/* =====================================================================================================
   JNVKAA console patterns: one set of page patterns for every Admin, Batch Admin and member page.
   Loaded by _PortalLayout (consoles) and the website shell (member pages) after site.css / portal.css.
   Mobile-first where it matters; the breakpoints are the shared ones (390/600/760/1024/1280/1536/1920).

   CONTRACT (use these classes; do not invent per-page variants of the same thing):
     Page header   .pg-head > .pg-head-text (h1.pg-title + p.pg-sub) + .pg-actions (buttons)
                   back link above the title: a.pg-crumb  or  p.pg-crumb > a  or  a.pg-back
                   member pages: .pg-head.is-banner (+ .pg-eyebrow, .pg-meta > .pg-chip)
     Toolbar       .pg-toolbar > .pg-tabs (a.pg-tab[.is-active] > .pg-tab-count) + form.pg-search
                   search with icon: .pg-search > .pg-search-box (i + input) + button
                   quick filters: .pg-chips > (.pg-chips-label) a.pg-chip[.is-active]
     Filters       <details class="pg-filter-panel"> <summary>…</summary> <form class="pg-filters[.is-compact]">
                   .pg-field (label + control) … + .pg-filter-actions </form></details>
                   (collapsible on phones/tablets, always open from 1024px via portal.js)
     Data table    .dt-card > table.dt.dt-stack
                   cells: .dt-primary (main text) + .dt-meta (secondary line); .dt-ident (avatar + text);
                   .dt-with-thumb (thumb + text); .dt-tags; .dt-clamp (2 lines); .dt-trunc; .dt-mono
                   column helpers on th AND td: .dt-nowrap .dt-grow .dt-num .dt-actions .dt-center .dt-shrink
                   priority: .dt-hide-md (hidden 760–1279) .dt-hide-tab (hidden 760–999) .dt-show-md
                   row actions: .dt-actions > .dt-btns > .btn.btn-sm[.btn-icon > i + span.btn-label|.dt-btn-label]
                   row popover: details.dt-pop > summary.btn + .dt-pop-body;  menu: details.dt-more > summary + .dt-more-menu
                   phones (<760px): rows become cards; give EVERY td data-label="Column"
                   (data-label="" for the title cell, which then spans the card header)
     Cards         .pg-grid[.is-dense|.is-wide] > .pg-card;  .pg-card-head > h2.pg-card-title + actions
                   tiles: .pg-card.pg-tile > .pg-card-media? + .pg-card-body (.pg-card-chips, .pg-card-title,
                   .pg-card-meta, .pg-card-text) + .pg-card-foot;  link cards: a.pg-card.is-link
     Stats         .pg-stats > .pg-stat[.is-accent|.is-warn] (.pg-stat-head? > .pg-stat-label + .pg-stat-icon,
                   .pg-stat-value, .pg-stat-hint): equal height, tabular numerals, no wrapping numbers
     Layout        .pg-section > (.pg-section-head >) h2.pg-section-title;  .pg-cols[.is-side];  .pg-stack;
                   .pg-split > .pg-main + .pg-aside;  .pg-panels > .pg-panel (or details.pg-panel)
     Forms         .pg-form-actions (Save / Cancel row at the end of a form or card; sticky on long forms with .is-sticky)
                   .field-error (message under a control, with aria-invalid on the control);  .btn.is-danger
     Misc          dl.pg-dl > div > dt + dd;  .pg-inline;  .pg-hint;  .pg-count;  .pg-empty[.is-compact];  nav.pg-pager;  .pg-narrow
                   .pg-cols.is-side > .is-sticky (side column that stays in view from 1024px)
   ===================================================================================================== */

/* ---- 1. Page header ------------------------------------------------------------------------------ */
.pg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3) var(--sp-4);
  flex-wrap: wrap; margin: 0 0 var(--sp-4); }
.pg-head-text { min-width: 0; flex: 1 1 320px; }
.pg-title { font-family: var(--font-head); font-size: var(--fs-title); font-weight: 700; line-height: 1.2; margin: 0; color: var(--ink);
  letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: balance; }
.pg-title .badge { vertical-align: middle; margin-left: var(--sp-2); font-size: var(--fs-xs); }
.pg-sub { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); max-width: 80ch; text-wrap: pretty; }
.pg-sub a { font-weight: 500; }
.pg-sub .badge { vertical-align: 1px; }
.pg-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.pg-actions > form { margin: 0; display: inline-flex; }
@media (max-width: 559px) {
  /* phones: actions take the row; buttons size to their text and share the width, wrapping when needed */
  .pg-actions { width: 100%; }
  .pg-actions > .btn, .pg-actions > form { flex: 1 1 auto; min-width: 0; }
  .pg-actions > .btn, .pg-actions > form > .btn { justify-content: center; }
  .pg-actions > form > .btn { width: 100%; }
}

/* back links above the title */
a.pg-crumb, .pg-crumb > a, .pg-back { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; max-width: 100%;
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted); text-decoration: none; border-radius: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.pg-crumb { margin: 0 0 var(--sp-2); }
.pg-crumb { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); line-height: 1.4; }
.pg-back { margin: 0 0 var(--sp-2); font-weight: 600; color: var(--teal-700); }
:is(a.pg-crumb, .pg-crumb > a, .pg-back) i { font-size: .8em; transition: transform .15s; }
:is(a.pg-crumb, .pg-crumb > a):hover, .pg-crumb > a:focus-visible { color: var(--teal-700); }
.pg-back:hover { color: var(--teal); }
:is(a.pg-crumb, .pg-crumb > a, .pg-back):hover i { transform: translateX(-2px); }

/* kicker + info chips (mostly member pages) */
.pg-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--sp-2); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal-700); }
.pg-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.pg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600;
  line-height: 1.5; background: var(--cream); color: var(--teal-700); white-space: nowrap; }

/* banner header (member area): the website shell (site-shell.css) turns it into the full-bleed band */
.pg-head.is-banner { position: relative; isolation: isolate; overflow: hidden; align-items: center;
  padding: var(--sp-5) var(--sp-4); margin-bottom: var(--sp-5); border-radius: 14px; color: #fff;
  background: radial-gradient(90% 140% at 100% 0%, rgba(77, 192, 197, .32), transparent 60%),
              linear-gradient(118deg, #001d23 0%, #06313a 52%, #0b6569 100%);
  box-shadow: 0 18px 40px -26px rgba(0, 29, 35, .6); }
.pg-head.is-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(127, 233, 238, .55) 1px, transparent 1px); background-size: 22px 22px; opacity: .22;
  -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%); mask-image: linear-gradient(100deg, transparent 35%, #000 100%); }
.pg-head.is-banner::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 240px; height: 240px; z-index: -1;
  border-radius: 50%; border: 1px solid rgba(127, 233, 238, .18);
  box-shadow: 0 0 0 28px rgba(127, 233, 238, .04), 0 0 0 64px rgba(127, 233, 238, .03); pointer-events: none; }
.pg-head.is-banner .pg-head-text { flex-basis: 420px; }
.pg-head.is-banner .pg-title { color: #fff; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.15; }
.pg-head.is-banner .pg-sub { color: rgba(255, 255, 255, .8); font-size: var(--fs-base); margin-top: var(--sp-2); }
.pg-head.is-banner .pg-sub a { color: #9af4f8; text-decoration: underline; text-underline-offset: 2px; }
.pg-head.is-banner .pg-sub a:hover { color: #fff; }
.pg-head.is-banner .pg-eyebrow { color: #7fe9ee; }
.pg-head.is-banner .pg-back { color: rgba(255, 255, 255, .8); }
.pg-head.is-banner .pg-back:hover { color: #fff; }
.pg-head.is-banner .pg-back + .pg-eyebrow { display: none; }
.pg-head.is-banner .pg-chip { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .2); }
.pg-head.is-banner .pg-chip.is-warn { background: #fff4e5; color: #8a5300; border-color: transparent; }
.pg-head.is-banner .pg-chip.is-ok { background: #e8f6ef; color: #10794f; border-color: transparent; }
.pg-head.is-banner .pg-actions .btn:not(.btn-ghost) { --bg: var(--cream); --fg: var(--ink); border-color: transparent; }
.pg-head.is-banner .pg-actions .btn-ghost { --bg: rgba(255, 255, 255, .08); --fg: #fff; border-color: rgba(255, 255, 255, .3); }
.pg-head.is-banner .pg-actions .btn-ghost:hover { --fg: #fff; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); }
.pg-head.is-banner .pg-actions .btn:focus-visible { box-shadow: 0 0 0 3px rgba(127, 233, 238, .6); }
@media (min-width: 760px) { .pg-head.is-banner { padding: var(--sp-6) var(--sp-8); margin-bottom: var(--sp-6); border-radius: 16px; } }

/* ---- 2. Toolbar: status tabs, search, quick chips ------------------------------------------------- */
.pg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.pg-tabs { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; max-width: 100%; padding: 2px; margin: -2px;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.pg-tabs::-webkit-scrollbar { display: none; }
.pg-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; min-height: var(--ctl-h-sm);
  padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.pg-tab:hover { border-color: var(--teal-300); color: var(--teal-700); }
.pg-tab.is-active { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.pg-tab.is-active:hover { color: #fff; }
.pg-tab > i { font-size: .85em; opacity: .8; }
.pg-tab-count { font-size: var(--fs-2xs); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 1.6em; text-align: center;
  padding: 1px 6px; border-radius: 999px; background: rgba(0, 29, 35, .06); }
.pg-tab.is-active .pg-tab-count { background: rgba(255, 255, 255, .2); }

.pg-search { display: flex; gap: var(--sp-1); align-items: center; flex: 0 1 380px; min-width: 0; margin: 0; }
.pg-search input { flex: 1 1 auto; min-width: 0; }
.pg-search input, .pg-search .input, .pg-search-box input { min-height: var(--ctl-h); height: var(--ctl-h); font-size: var(--ctl-fs); }
.pg-search .btn { min-height: var(--ctl-h); height: var(--ctl-h); flex: none; }
.pg-search-box { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.pg-search-box > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .85em; pointer-events: none; }
.pg-search-box > input { width: 100%; padding-left: 32px !important; }
@media (max-width: 759px) { .pg-search { flex: 1 1 100%; } }

.pg-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.pg-chips-label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-right: var(--sp-1); }
.pg-chips > a.pg-chip, a.pg-chip { min-height: var(--ctl-h-sm); padding: 0 12px; border: 1px dashed var(--line-strong); background: #fff; color: var(--ink);
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
a.pg-chip:hover { border-style: solid; border-color: var(--teal); color: var(--teal-700); }
a.pg-chip.is-active { border-style: solid; border-color: var(--teal); background: rgba(18, 146, 152, .1); color: var(--teal-700); font-weight: 600; }

/* ---- 3. Filter panel ------------------------------------------------------------------------------ */
.pg-filter-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); margin: 0 0 var(--sp-4);
  box-shadow: 0 1px 2px rgba(0, 29, 35, .04); }
.pg-filter-panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); min-height: 44px; border-radius: var(--card-radius); }
.pg-filter-panel > summary::-webkit-details-marker { display: none; }
.pg-filter-panel > summary > i:first-child { color: var(--teal); }
.pg-filter-panel > summary .count { font-size: var(--fs-2xs); background: var(--teal); color: #fff; border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.pg-filter-panel > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto;
  font-size: var(--fs-xs); color: var(--muted); transition: transform .2s; }
.pg-filter-panel[open] > summary::after { transform: rotate(180deg); }
.pg-filter-panel[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--card-radius) var(--card-radius) 0 0; }
.pg-filter-panel > .pg-chips { padding: var(--sp-3) var(--sp-4) 0; }
.pg-filter-panel:not([open]) > :is(.pg-filters, .pg-chips) { display: none; }
/* portal.js opens every panel on desktop and adds .is-auto-open; only then is the summary row hidden */
@media (min-width: 1024px) { .pg-filter-panel.is-auto-open > summary { display: none; } }

.pg-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4); align-items: end; margin: 0; }
.pg-filters.is-compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.pg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pg-field > label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pg-field > input, .pg-field > select { width: 100%; min-width: 0; }
.pg-field.is-wide { grid-column: span 2; }
.pg-filter-actions { display: flex; gap: var(--sp-2); align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.pg-filter-actions .btn { white-space: nowrap; }
@media (max-width: 559px) {
  .pg-field.is-wide { grid-column: auto; }
  .pg-filter-actions > * { flex: 1 1 0; justify-content: center; }
}

/* Compact control look for controls inside the patterns (36px; 44px and 16px text on touch). */
:where(.app-ui) :is(.pg-search, .pg-field, .dt-pop-body, .dt-more-menu, .pg-inline) :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), select, textarea) {
  min-height: var(--ctl-h); padding: .375rem .7rem; font-family: var(--font-body); font-size: var(--ctl-fs); line-height: 1.4;
  border: 1px solid var(--line-strong); border-radius: var(--ctl-radius); background-color: #fff; color: var(--ink); width: 100%;
  transition: border-color .15s, box-shadow .15s; }
:where(.app-ui) :is(.pg-search, .pg-field, .dt-pop-body, .dt-more-menu, .pg-inline) select { padding-right: 2rem; }
:where(.app-ui) :is(.pg-search, .pg-field, .dt-pop-body, .dt-more-menu, .pg-inline) :is(input, select, textarea):hover { border-color: rgba(0, 29, 35, .28); }
:where(.app-ui) :is(.pg-search, .pg-field, .dt-pop-body, .dt-more-menu, .pg-inline) :is(input, select, textarea):focus-visible {
  outline: none; border-color: var(--teal); box-shadow: var(--ring); }
:where(.app-ui) :is(.pg-search, .pg-field) input::placeholder { color: #7d8c8f; }

/* ---- 4. Data tables -------------------------------------------------------------------------------- */
.dt-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); overflow: auto hidden;
  box-shadow: 0 1px 2px rgba(0, 29, 35, .04); overscroll-behavior-x: contain; }
.dt-card > .dt-scroll { overflow-x: auto; }
.dt-card:has(details.dt-pop[open]), .dt-card:has(details.dt-more[open]) { overflow: visible; }
.dt-card + .pg-pager, .dt-card + nav.pg-pager { margin-top: var(--sp-3); }
table.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); color: var(--ink); }
table.dt th { text-align: left; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); background: #f6f9f9; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: bottom; }
table.dt thead th:first-child { border-top-left-radius: calc(var(--card-radius) - 1px); }
table.dt thead th:last-child { border-top-right-radius: calc(var(--card-radius) - 1px); }
table.dt td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.4; }
table.dt :is(th, td):first-child { padding-left: var(--sp-4); }
table.dt :is(th, td):last-child { padding-right: var(--sp-4); }
table.dt tbody tr:last-child td { border-bottom: 0; }
table.dt tbody tr { transition: background-color .12s; }
table.dt tbody tr:hover { background: rgba(18, 146, 152, .035); }
table.dt tbody tr.is-attention { background: #fffaf0; }
table.dt tbody tr.is-attention:hover { background: #fff4e0; }
table.dt tbody tr.is-attention > td:first-child { box-shadow: inset 3px 0 0 #e8a33d; }
table.dt td.dt-num, table.dt td.dt-nowrap { color: var(--ink-2); }
table.dt .badge { white-space: nowrap; }
table.dt time[title], time[title] { cursor: help; }

.dt-primary { display: block; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
a.dt-primary, .dt-primary a { color: var(--ink); text-decoration: none; }
a.dt-primary:hover, .dt-primary a:hover { color: var(--teal-700); text-decoration: underline; text-underline-offset: 2px; }
.dt-meta { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.dt-meta.dt-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.dt-meta-row .badge { font-size: var(--fs-2xs); padding: 0 .45rem; }
.dt-nowrap { white-space: nowrap; }
.dt-shrink { width: 1%; white-space: nowrap; }
.dt-grow { width: 100%; min-width: 240px; }
.dt-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-center { text-align: center !important; }
.dt-actions { width: 1%; white-space: nowrap; text-align: right !important; }
.dt-actions .dt-btns { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
.dt-actions form { margin: 0; display: inline-flex; }
.dt-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.dt-trunc { display: block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.dt-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.dt-ident, .dt-with-thumb { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
:is(.dt-ident, .dt-with-thumb) > div { min-width: 0; }
.dt-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--cream), #ffe2cf); color: var(--teal-700); font-family: var(--font-head);
  font-weight: 700; font-size: var(--fs-xs); letter-spacing: .02em; border: 1px solid rgba(18, 146, 152, .14); }
.dt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dt-avatar.is-lg { width: 64px; height: 64px; font-size: 1.25rem; }
.dt-thumb { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; object-fit: cover; background: var(--cream);
  display: grid; place-items: center; color: var(--teal-700); overflow: hidden; }

/* column priority: hide secondary columns where the content area is tight (tablet, or laptop with the sidebar) */
.dt-show-md { display: none; }
@media (min-width: 760px) and (max-width: 1279px) { table.dt .dt-hide-md { display: none; } }
@media (min-width: 760px) and (max-width: 1279px) {
  table.dt .dt-show-md { display: inline; }
  table.dt td.dt-num .dt-meta { white-space: normal; min-width: 7.5em; }
}
@media (min-width: 760px) and (max-width: 999px) { table.dt .dt-hide-tab { display: none; } }
@media (min-width: 760px) and (max-width: 1199px) { .dt-grow { min-width: 160px; } }

/* icon buttons: label hidden on desktop, shown on phone cards */
.btn-icon { position: relative; min-width: var(--ctl-h-sm); padding-inline: .5rem !important; justify-content: center; }
.btn-icon > i { margin: 0; }
.btn-icon.btn-sm { width: var(--ctl-h-sm); min-width: var(--ctl-h-sm); padding: 0 !important; }
.btn-icon .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-icon .dt-btn-label { display: none; }
.btn-icon.is-danger:hover, .btn-icon.is-danger:focus-visible, .dt-pop.is-danger > summary:hover {
  color: var(--danger); border-color: rgba(179, 38, 30, .35); background: var(--danger-bg); }

/* row popover (one small form) and row menu (several forms) */
details.dt-pop, details.dt-more { position: relative; display: inline-flex; }
details:is(.dt-pop, .dt-more) > summary { list-style: none; cursor: pointer; }
details:is(.dt-pop, .dt-more) > summary::-webkit-details-marker { display: none; }
details.dt-pop[open] > summary { border-color: var(--teal); color: var(--teal-700); }
details.dt-more[open] > summary { background: var(--cream); color: var(--teal-700); border-color: var(--teal-300); }
.dt-pop-body, .dt-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; text-align: left; white-space: normal;
  background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: 0 18px 40px -16px rgba(0, 29, 35, .35);
  animation: dt-pop-in .14s ease-out; }
.dt-pop-body { width: 300px; max-width: 80vw; padding: var(--sp-4); }
.dt-pop-body > form { display: grid !important; gap: var(--sp-2); }
.dt-pop-body label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.dt-pop-body :is(input, textarea, select) { width: 100%; }
.dt-pop-title { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); margin: 0; }
.dt-more-menu { width: min(300px, 86vw); padding: var(--sp-3); display: grid; gap: var(--sp-3); }
.dt-more-menu form { display: grid !important; gap: var(--sp-2); margin: 0; }
.dt-more-menu form + form { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.dt-more-menu label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dt-more-menu .btn { justify-content: center; }
@keyframes dt-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- 5. Data tables on phones: every row becomes a card -------------------------------------------- */
@media (max-width: 759px) {
  .dt-card:has(table.dt-stack) { background: none; border: 0; box-shadow: none; overflow: visible; border-radius: 0; }
  table.dt-stack, table.dt-stack tbody, table.dt-stack tr, table.dt-stack td { display: block; width: 100%; }
  table.dt-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.dt-stack tr { background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius);
    margin: 0 0 var(--sp-3); padding: var(--sp-2) 0; box-shadow: 0 1px 2px rgba(0, 29, 35, .04); }
  table.dt-stack tbody tr:hover { background: #fff; }
  table.dt-stack tr.is-attention { border-left: 3px solid #e8a33d; background: #fffdf8; }
  table.dt-stack tr.is-attention > td:first-child { box-shadow: none; }
  table.dt-stack td, table.dt-stack :is(th, td):first-child, table.dt-stack :is(th, td):last-child {
    border: 0; padding: 5px var(--sp-4); text-align: right; min-width: 0; white-space: normal; }
  /* label | value cells: label left, the value (and its .dt-meta line) stacked on the right */
  table.dt-stack td:not([data-label=""]):not(.dt-grow):not(.dt-wide):not(.dt-actions) {
    display: grid; grid-template-columns: auto minmax(0, 1fr); justify-items: end; align-items: start; column-gap: var(--sp-3); row-gap: 2px; }
  table.dt-stack td::before { content: attr(data-label); text-align: left; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); padding-top: 3px; }
  table.dt-stack td:not([data-label=""]):not(.dt-grow):not(.dt-wide):not(.dt-actions)::before { grid-row: 1 / span 6; justify-self: start; max-width: none; }
  table.dt-stack td:not([data-label=""]):not(.dt-grow):not(.dt-wide):not(.dt-actions) > * { grid-column: 2; max-width: 100%; justify-self: end; }
  /* title cell spans the card header */
  table.dt-stack td[data-label=""] { display: block; text-align: left; padding-bottom: var(--sp-2); margin-bottom: var(--sp-1);
    border-bottom: 1px solid var(--line); }
  table.dt-stack td[data-label=""]::before { content: none; }
  table.dt-stack td[data-label=""] .dt-primary { font-size: var(--fs-md); }
  table.dt-stack td:is(.dt-grow, .dt-wide) { display: block; text-align: left; }
  table.dt-stack td:is(.dt-grow, .dt-wide)::before { display: block; margin-bottom: 2px; }
  table.dt-stack td .dt-meta { margin-top: 0; }
  table.dt-stack td .dt-tags { justify-content: flex-end; }
  table.dt-stack td[data-label=""] .dt-tags, table.dt-stack td:is(.dt-grow, .dt-wide) .dt-tags { justify-content: flex-start; }
  table.dt-stack td .dt-with-thumb { width: 100%; }
  table.dt-stack .dt-clamp { -webkit-line-clamp: 4; }
  table.dt-stack .dt-trunc { max-width: none; white-space: normal; }
  /* actions: full-width row of buttons at the bottom of the card */
  table.dt-stack td.dt-actions { width: 100%; border-top: 1px solid var(--line); margin-top: var(--sp-2); padding-top: var(--sp-3); padding-bottom: var(--sp-1); }
  table.dt-stack td.dt-actions::before { content: none; }
  table.dt-stack td.dt-actions.is-empty { display: none; }
  table.dt-stack td.dt-actions .dt-btns { display: flex; width: 100%; flex-wrap: wrap; }
  table.dt-stack td.dt-actions .dt-btns > *, table.dt-stack td.dt-actions .dt-btns form { flex: 1 1 0; }
  table.dt-stack td.dt-actions .btn { width: 100%; justify-content: center; }
  table.dt-stack td.dt-actions .btn-icon .btn-label { position: static; width: auto; height: auto; clip: auto; }
  table.dt-stack .btn-icon .dt-btn-label { display: inline; }
  table.dt-stack td.dt-actions .btn-icon.btn-sm { width: auto; padding-inline: .6rem !important; }
  table.dt-stack td.dt-actions details:is(.dt-pop, .dt-more) { flex: 1 1 0; position: static; display: block; }
  table.dt-stack td.dt-actions details:is(.dt-pop, .dt-more) > summary.btn { width: 100%; justify-content: center; }
  table.dt-stack td.dt-actions details.dt-pop[open] { flex-basis: 100%; }
  table.dt-stack :is(.dt-pop-body, .dt-more-menu) { position: static; width: auto; max-width: none; margin-top: var(--sp-2); box-shadow: none; }
}

/* ---- 6. Cards, tiles, link cards -------------------------------------------------------------------- */
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--sp-4); }
.pg-grid.is-dense { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--sp-3); }
.pg-grid.is-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.pg-card { background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); padding: var(--sp-4);
  box-shadow: 0 1px 2px rgba(0, 29, 35, .04); min-width: 0; }
.pg-card + .pg-card { margin-top: var(--sp-4); }
:is(.pg-cols, .pg-grid, .pg-stack, .pg-panels, .pg-split) > .pg-card { margin-top: 0; }
@media (min-width: 1024px) { .pg-card { padding: var(--sp-4) var(--sp-5); } }

.pg-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sp-3); min-height: var(--ctl-h-sm); }
.pg-card-title { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; margin: 0; color: var(--ink);
  display: flex; align-items: center; gap: var(--sp-2); }
.pg-card-title > i { color: var(--teal); font-size: .9em; }
.pg-card-sub { font-size: var(--fs-xs); color: var(--muted); }
p.pg-card-sub { margin: calc(var(--sp-2) * -1) 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.5; max-width: 80ch; }
.pg-card-head p.pg-card-sub { margin: 2px 0 0; flex-basis: 100%; }
legend.pg-card-title { padding: 0; margin-bottom: var(--sp-3); }

/* tiles (card-grid pages: albums, events, approvals) */
.pg-card.pg-tile { display: flex; flex-direction: column; padding: 0; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
@media (hover: hover) { .pg-card.pg-tile:hover { border-color: rgba(18, 146, 152, .45); box-shadow: 0 14px 30px -18px rgba(0, 29, 35, .35); transform: translateY(-2px); } }
.pg-card.pg-tile:focus-within { border-color: var(--teal); }
.pg-card-media { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--cream), #ffe3cf); overflow: hidden; }
.pg-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
@media (hover: hover) { .pg-card.pg-tile:hover .pg-card-media img { transform: scale(1.03); } }
.pg-card-media > .pg-card-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--teal-700); font-size: 1.6rem; opacity: .55; }
.pg-card-media > .badge { position: absolute; top: var(--sp-2); left: var(--sp-2); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.pg-card-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); flex: 1 1 auto; min-width: 0; }
.pg-card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
:is(.pg-tile, .pg-card-body) .pg-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--fs-md); overflow-wrap: anywhere; }
.pg-card-title a { color: inherit; text-decoration: none; }
.pg-card-title a:hover { color: var(--teal-700); }
.pg-card-meta { display: flex; flex-wrap: wrap; gap: 4px var(--sp-3); margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.pg-card-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pg-card-meta i { color: var(--teal); font-size: .9em; }
.pg-card-text { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pg-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: auto; padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line); background: #fbfcfc; flex-wrap: nowrap; }
.pg-card-foot > .pg-card-foot-start { margin-right: auto; font-size: var(--fs-xs); color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-card-foot form { margin: 0; display: inline-flex; }
/* in a padded card the footer bleeds to the card edges */
.pg-card:not(.pg-tile) > .pg-card-foot { margin: var(--sp-4) calc(var(--sp-4) * -1) calc(var(--sp-4) * -1); padding-inline: var(--sp-4);
  border-radius: 0 0 calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px); }
.pg-card.is-link > .pg-card-foot { margin-top: auto; }
.pg-card.is-link > :has(+ .pg-card-foot) { margin-bottom: var(--sp-4); }
@media (min-width: 1024px) { .pg-card:not(.pg-tile) > .pg-card-foot { margin-inline: calc(var(--sp-5) * -1); padding-inline: var(--sp-5); } }

a.pg-card.is-link, .pg-card.is-link { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; position: relative;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s; }
.pg-card.is-link:hover { border-color: var(--teal-300); color: var(--ink); }
@media (hover: hover) { .pg-card.is-link:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(0, 29, 35, .35); } }
.pg-card.is-link:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--teal); }

/* ---- 7. Stats --------------------------------------------------------------------------------------- */
.pg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--sp-3); align-items: stretch; margin: 0 0 var(--sp-4); }
@media (max-width: 559px) {
  .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .pg-stats > .pg-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.pg-stat { background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: 2px; min-width: 0; box-shadow: 0 1px 2px rgba(0, 29, 35, .04); }
.pg-stat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.pg-stat-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  min-height: 2.6em; text-wrap: balance; }
.pg-stat-icon { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .8rem;
  background: rgba(18, 146, 152, .1); color: var(--teal-700); }
.pg-stat-value { font-family: var(--font-head); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 700; line-height: 1.1; color: var(--ink);
  white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.pg-stat-value small { font-size: .6em; font-weight: 600; color: var(--muted); }
.pg-stat-hint { font-size: var(--fs-xs); color: var(--muted); margin-top: auto; padding-top: 2px; }
.pg-stat.is-accent { border-color: rgba(18, 146, 152, .35); background: linear-gradient(180deg, #fff, #f3fbfb); }
.pg-stat.is-warn { border-color: #f5d7a9; background: linear-gradient(180deg, #fff, #fffaf1); }
.pg-stat.is-warn .pg-stat-icon { background: var(--warn-bg); color: var(--warn); }
@media (max-width: 559px) { .pg-stat { padding: var(--sp-3); } .pg-stat-label { min-height: 0; } }

/* ---- 8. Sections, panels, layouts, definition lists -------------------------------------------------- */
.pg-section { margin: var(--sp-6) 0 0; }
.pg-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.pg-section-title { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 700; margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.pg-section-head > .pg-section-title { margin: 0; }
.pg-section-title > i { color: var(--teal); font-size: .9em; }

.pg-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); padding: var(--sp-4) var(--sp-5);
  box-shadow: 0 1px 2px rgba(0, 29, 35, .04); min-width: 0; }
.pg-panel + .pg-panel { margin-top: var(--sp-4); }
.pg-panel-title { font-family: var(--font-head); font-size: var(--fs-lg); margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.pg-panel-title > i { color: var(--teal); font-size: .9em; }
details.pg-panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; min-height: 28px; }
details.pg-panel > summary::-webkit-details-marker { display: none; }
details.pg-panel > summary > i:first-child { color: var(--teal); width: 18px; text-align: center; }
details.pg-panel > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; font-size: var(--fs-xs); color: var(--muted); transition: transform .2s; }
details.pg-panel[open] > summary::after { transform: rotate(180deg); }
details.pg-panel[open] > summary { margin-bottom: var(--sp-3); }
.pg-panels { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; margin-top: var(--sp-4); }
.pg-panels > .pg-panel + .pg-panel { margin-top: 0; }
@media (max-width: 559px) { .pg-panel { padding: var(--sp-4); } }

.pg-cols { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); align-items: start; margin: 0 0 var(--sp-4); }
@media (min-width: 1024px) {
  .pg-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-cols.is-side { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
}
@media (min-width: 1920px) { .pg-cols.is-side { grid-template-columns: minmax(0, 3fr) minmax(360px, 1fr); } }
.pg-stack { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
.pg-split { display: grid; gap: var(--sp-4); align-items: start; }
.pg-split > * { min-width: 0; }
@media (min-width: 1100px) {
  .pg-split { grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 380px); gap: var(--sp-5); }
  .pg-split.is-aside-left { grid-template-columns: clamp(280px, 24vw, 340px) minmax(0, 1fr); }
  .pg-aside { position: sticky; top: calc(var(--mnav-h, var(--top-h, 52px)) + var(--sp-4)); }
}
.pg-narrow { max-width: 880px; margin-inline: auto; }

dl.pg-dl { margin: 0; display: grid; gap: 0; }
dl.pg-dl > div { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: var(--sp-3); padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
dl.pg-dl > div:first-child { padding-top: 0; }
dl.pg-dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
dl.pg-dl dt { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
dl.pg-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 759px) { dl.pg-dl > div { grid-template-columns: 1fr; gap: 2px; } }

.pg-inline { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.pg-inline > :is(.input, input, select, .pg-search-box) { flex: 1 1 160px; min-width: 0; width: auto; }
.pg-inline > .btn { flex: 0 0 auto; }
.pg-hint { font-size: var(--fs-xs); color: var(--muted); margin: var(--sp-2) 0 0; line-height: 1.5; }

/* ---- 9. Empty state, result count, pager -------------------------------------------------------------- */
.pg-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--muted);
  background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--card-radius); }
.pg-empty > i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 1.3rem;
  color: var(--teal-700); background: rgba(18, 146, 152, .1); }
.pg-empty > :is(h2, h3) { font-family: var(--font-head); font-size: var(--fs-md); color: var(--ink); margin: var(--sp-3) 0 var(--sp-1); }
.pg-empty > p { font-size: var(--fs-sm); margin: 0 auto var(--sp-3); max-width: 52ch; text-wrap: pretty; }
.pg-empty > p:last-child { margin-bottom: 0; }
.pg-empty > .btn, .pg-empty > a.btn { margin-top: var(--sp-1); }
.dt-card > .pg-empty, .pg-card > .pg-empty { border: 0; }
.pg-count { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
nav.pg-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
nav.pg-pager .pg-pager-links { display: flex; gap: var(--sp-1); align-items: center; }
.pg-pager-nums { display: none; align-items: center; gap: 2px; }
@media (min-width: 600px) { .pg-pager-nums { display: inline-flex; } }
.pg-pager-num { display: inline-grid; place-items: center; min-width: var(--ctl-h-sm); height: var(--ctl-h-sm); padding: 0 6px;
  border-radius: var(--ctl-radius); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none; }
a.pg-pager-num:hover { background: var(--cream); color: var(--teal-700); }
a.pg-pager-num:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.pg-pager-num.is-current { background: var(--teal); color: #fff; }
.pg-pager-gap { padding: 0 4px; color: var(--muted); }

/* ---- 9b. Forms: actions row, field errors, danger buttons, compact empty state, sticky side column ---- */
.pg-form-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; justify-content: flex-end;
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.pg-form-actions > .pg-form-note { margin-right: auto; font-size: var(--fs-xs); color: var(--muted); }
.pg-form-actions.is-sticky { position: sticky; bottom: 0; z-index: 5; background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding-bottom: var(--sp-3); }
@media (max-width: 559px) { .pg-form-actions > .btn, .pg-form-actions > form { flex: 1 1 auto; justify-content: center; } }
.field-error { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); font-weight: 500; color: var(--danger); }
:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger) !important; }
:is(input, select, textarea)[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(179, 38, 30, .2) !important; }
:where(.app-ui) .btn.is-danger:not(.btn-icon) { --bg: #fff; --fg: var(--danger); border-color: rgba(179, 38, 30, .35); }
:where(.app-ui) .btn.is-danger:not(.btn-icon):hover, :where(.app-ui) .btn.is-danger:not(.btn-icon):focus-visible { --fg: #fff; background: var(--danger); border-color: var(--danger); filter: none; }
.pg-empty.is-compact { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-4);
  text-align: left; border-style: solid; background: var(--paper); }
.pg-empty.is-compact > i { width: 36px; height: 36px; font-size: 1rem; }
.pg-empty.is-compact > :is(h2, h3) { margin: 0; }
.pg-empty.is-compact > p { margin: 0; flex: 1 1 220px; }
.pg-empty.is-compact > .btn { margin: 0; }
@media (min-width: 1024px) {
  .pg-cols.is-side > .is-sticky { position: sticky; top: calc(var(--top-h, 52px) + var(--sp-4)); }
}

/* ---- 10. Focus, motion, print ------------------------------------------------------------------------- */
.pg-tab:focus-visible, a.pg-chip:focus-visible, a.pg-crumb:focus-visible, .pg-crumb > a:focus-visible, .pg-back:focus-visible,
.btn-icon:focus-visible, details:is(.dt-pop, .dt-more, .pg-panel) > summary:focus-visible, .pg-filter-panel > summary:focus-visible,
a.dt-primary:focus-visible, .dt-primary a:focus-visible, .pg-card-title a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .dt-pop-body, .dt-more-menu { animation: none; }
  :is(a.pg-crumb, .pg-crumb > a, .pg-back) i, .pg-card.pg-tile, .pg-card-media img, .pg-card.is-link { transition: none; }
  .pg-card.pg-tile:hover, .pg-card.is-link:hover { transform: none; }
}
@media print {
  .pg-actions, .pg-toolbar, .pg-filter-panel, nav.pg-pager, .dt-actions { display: none !important; }
  .pg-head.is-banner { background: none; color: var(--ink); box-shadow: none; padding: 0; }
  .pg-head.is-banner .pg-title { color: var(--ink); }
  .pg-head.is-banner::before, .pg-head.is-banner::after { display: none; }
  .dt-card, .pg-card, .pg-stat { box-shadow: none; break-inside: avoid; }
}