/* ─────────────────────────────────────────────────────────────────────────────
   App shell — the shared frame for every signed-in surface (admin first; the club
   portal is meant to adopt the same classes).

   WHY THIS EXISTS. The admin had three ways of drawing itself: 46 pages with a
   hand-drawn 60px header plus an injected sidebar (js/admin-nav.js), two pages on
   js/shell.js, and one with no nav at all. Corey approved one layout — a left
   sidebar with labelled groups, icons and small attention counts; a home
   dashboard led by a single "Next:" banner; white cards, generous spacing — and
   this file is that layout, once.

   It is a VARIATION of the established design system (css/tokens.css + ds.css),
   not a new one: same tokens, same 12px card radius, same status palette
   (green / amber / red / purple / teal / blue / slate), same pill shape. What it
   adds is richness the old pills lacked — a status dot, an icon, a count, a solid
   brand variant — without inventing new colours.

   THEMING. Program colour arrives the way it always has: js/config.js writes
   --navy (primary) and --red (accent) on <html>. Everything here reads those two.

   ── COMPONENT INDEX (prefix .as-) ───────────────────────────────────────────
   Frame
     body.as-on                  shell is mounted (set by js/app-shell.js)
     .as-top.wpc-head            THE HEADER (2026-10-21): the design system's PageHeader (.ncl-header, navy) —
                                 logo + workspace name + season + role badge, the page's controls, WPC
                                 Platforms, the account menu (.wpc-acct). Every portal bar ([data-wpc-bar]) too.
       .header-right               the slot legacy scripts (bell, View As) mount into
     .as-side                    fixed left sidebar under the header (drawer under 900px)
       .as-ctx                     "working inside <event>" card (accent tinted)
       .as-nav-group               a labelled group
         .as-nav-label               the group's label
         .as-nav-link[.is-active]    icon + label + optional .as-count
       .as-side__foot              platform links / account actions
     .as-scrim                   drawer backdrop on phones
   Page
     .as-page-head               crumbs row + actions slot, sits above the title
     .as-crumbs                  breadcrumb trail
     .as-h1                      page title (applied to a page's own h1 / .page-title)
     .as-sub                     muted one-line subtitle
   Dashboard
     .as-next[--warn|--alert|--ok] the single "Next:" banner — one action, one button
     .as-grid[--2|--3|--4]       responsive card grid
     .as-section / __head        a titled section with an optional "View all" link
     .as-card / __head / __body  white card, 12px radius
     .as-kpi                     KPI card: icon tile, value, label, chips row
     .as-event                   upcoming-event card with a date block
     .as-list / .as-row          attention rows: dot/icon, title, meta, chip, chevron
     .as-launcher / .as-tile     phone icon grid (sidebar as an app menu)
     .as-empty                   empty state (icon, title, text)
     .as-skel                    loading placeholder bar
   Atoms
     .as-chip                    pill: --green --amber --red --purple --teal --blue
                                 --slate --brand(solid) ; --sm ; with .as-dot,
                                 an <svg> icon, and/or .as-chip__n count
     .as-count[--alert|--warn]   small sidebar count bubble
     .as-seg / .as-seg__btn      segmented chip switch (NCL / CC / All)
     .as-btn[--primary|--ghost|--sm] buttons
     .as-table                   table with the house header style
     .as-ic                      inline icon sizing helper
   Pop-up (entry 197 — js/wpc-modal.js; the OTCP behaviour Corey settled on)
     .as-modal                   centred backdrop (on the page's own overlay element)
     .as-modal-panel             the box: capped to the viewport, header/footer fixed
       .as-modal-head / -body / -foot   only the body scrolls
       .as-modal-x                 the round ✕
     body.as-modal-lock          no page scroll behind an open pop-up
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --as-side-w: 248px;
  --as-primary: var(--navy, #1A1A1A);
  --as-accent: var(--red, #ED1C24);
  --as-bg: var(--light, #F2F4F7);
  --as-surface: #fff;
  --as-surface-2: #F7F8FA;
  --as-line: var(--border, #D5D8DC);
  --as-line-soft: #E9ECF0;
  --as-text: var(--text, #1A1A1A);
  --as-muted: var(--muted, #5D6D7E);
  --as-faint: #97A0AD;
  --as-radius: 12px;
  --as-radius-sm: 8px;
  --as-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --as-shadow-hover: 0 6px 20px rgba(16,24,40,.09);
  --as-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* status palette — the tokens.css values, restated so a legacy page whose own
     :root lacks one (most lack teal/blue/slate) still gets the right colour */
  --as-green: #1E8449;  --as-green-bg: #EAFAF1;  --as-green-bd: #A9DFBF;
  --as-amber: #9A6200;  --as-amber-bg: #FEF9E7;  --as-amber-bd: #F5C842;  --as-amber-dot: #F39C12;
  --as-red:   #C0141B;  --as-red-bg:   #FDEDEC;  --as-red-bd:   #F5B7B1;
  --as-purple:#6B21A8;  --as-purple-bg:#F3E8FF;  --as-purple-bd:#D8B4FE;
  --as-teal:  #0E7490;  --as-teal-bg:  #ECFEFF;  --as-teal-bd:  #A5F3FC;
  --as-blue:  #1A5276;  --as-blue-bg:  #EBF5FB;  --as-blue-bd:  #AED6F1;
  --as-slate: #475569;  --as-slate-bg: #F1F4F8;  --as-slate-bd: #D5DBE3;
}

/* ── frame ─────────────────────────────────────────────────────────────────── */
body.as-on { padding-left: var(--as-side-w); background: var(--as-bg); }
body.as-on > header.as-legacy-hdr,
body.as-on > header:not(.as-keep),
body.as-on > nav:not(.as-keep) { display: none !important; }
body.as-on #ncl-program-accent, body.as-on #adminNavToggle,
body.as-on #adminNavBackdrop { display: none !important; }

.as-side {
  position: fixed; left: 0; top: var(--wpc-head-h, 60px); bottom: 0; width: var(--as-side-w);   /* under the header */
  background: var(--as-surface); border-right: 1px solid var(--as-line-soft);
  display: flex; flex-direction: column; z-index: 300;
  font-family: var(--as-font); color: var(--as-text);
}
.as-side__scroll { flex: 1; overflow-y: auto; padding: 4px 0 16px; overscroll-behavior: contain; }
.as-side__scroll::-webkit-scrollbar { width: 6px; }
.as-side__scroll::-webkit-scrollbar-thumb { background: #DADFE5; border-radius: 3px; }

.as-ctx {
  margin: 12px 14px 4px; padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--as-accent) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--as-accent) 35%, #fff);
  position: relative;
}
.as-ctx__lbl { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--as-accent); display: flex; align-items: center; gap: 5px; }
.as-ctx__lbl svg { width: 12px; height: 12px; }
.as-ctx a.as-ctx__go { display: block; margin-top: 3px; font-size: 13px; font-weight: 700; color: var(--as-text); text-decoration: none; line-height: 1.3; padding-right: 18px; }
.as-ctx a.as-ctx__go:hover { color: var(--as-accent); }
.as-ctx__x { position: absolute; top: 6px; right: 6px; background: none; border: 0; cursor: pointer; color: var(--as-faint); padding: 3px; line-height: 0; border-radius: 6px; }
.as-ctx__x:hover { color: var(--as-accent); background: rgba(0,0,0,.04); }
.as-ctx__x svg { width: 14px; height: 14px; }

.as-nav-group { padding: 14px 0 0; }
.as-nav-label {
  padding: 0 20px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .7px;
  text-transform: uppercase; color: var(--as-faint); display: flex; align-items: center; justify-content: space-between;
}
.as-nav-link {
  display: flex; align-items: center; gap: 11px; margin: 1px 10px; padding: 8px 10px;
  border-radius: 8px; font-size: 13.5px; font-weight: 500; color: #2B3440; text-decoration: none;
  position: relative; transition: background .12s, color .12s;
}
.as-nav-link > svg { width: 18px; height: 18px; flex: 0 0 auto; color: #7A8594; stroke-width: 1.8; }
.as-nav-link:hover { background: var(--as-surface-2); color: var(--as-text); }
.as-nav-link:hover > svg { color: var(--as-text); }
.as-nav-link.is-active {
  background: color-mix(in srgb, var(--as-accent) 8%, #fff); color: var(--as-text); font-weight: 700;
}
.as-nav-link.is-active::before {
  content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--as-accent);
}
.as-nav-link.is-active > svg { color: var(--as-accent); }
.as-nav-link__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-nav-link__ext { width: 13px !important; height: 13px !important; opacity: .5; }

.as-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 800;
  display: inline-grid; place-items: center; font-variant-numeric: tabular-nums;
  background: var(--as-slate-bg); color: var(--as-slate); border: 1px solid var(--as-slate-bd);
}
.as-count--alert { background: var(--as-accent); color: #fff; border-color: transparent; }
.as-count--warn  { background: var(--as-amber-bg); color: var(--as-amber); border-color: var(--as-amber-bd); }

.as-side__foot { border-top: 1px solid var(--as-line-soft); padding: 10px 0 12px; flex: 0 0 auto; }
/* The footer is pinned (it never scrolls with the menu): ← My WPC, Portals and WPC platforms are
   always on screen, however long the page or the menu. Opened, it may take up to half the
   sidebar and then scrolls on its own, so the menu above always keeps room. On a short window
   it tightens up. (Corey, 2026-10-16: "if the page is long, the platforms links are low".) */
.as-side__foot { max-height: 50%; overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 760px) { .as-side__foot { padding: 6px 0 6px; } }
.as-side__foot .as-nav-link { font-size: 12.5px; padding: 6px 10px; color: var(--as-muted); }
.as-side__foot .as-nav-link > svg { width: 15px; height: 15px; }
.as-side details > summary { list-style: none; cursor: pointer; }
.as-side details > summary::-webkit-details-marker { display: none; }
.as-side details > summary .as-nav-label { padding-top: 2px; }
.as-side details > summary .as-nav-label svg { width: 12px; height: 12px; transition: transform .15s; }
.as-side details[open] > summary .as-nav-label svg { transform: rotate(90deg); }
.as-count[hidden] { display: none; }

/* program switch under the brand (admins): All · NCL · CC — entry 170 */
.as-progsw { display: flex; gap: 3px; margin: 12px 14px 2px; padding: 3px; background: var(--as-surface-2); border: 1px solid var(--as-line-soft); border-radius: 22px; }
.as-progsw .as-seg__btn { flex: 1; justify-content: center; height: 28px; padding: 0 8px; gap: 6px; font-size: 12px; }
.as-progsw .as-seg__btn[aria-pressed="true"] { background: #fff; color: var(--as-text); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.as-progsw .as-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* ── the header (2026-10-21) ──────────────────────────────────────────────────
   Corey, 21 Oct: "The header of the HP Platform is different than other modules. can we fix?" The admin
   frame's top bar (#asTop, js/app-shell.js) and every portal bar ([data-wpc-bar], js/portal-bar.js) are the
   design system's PageHeader, as the WPC Hub admin portal, My WPC, OTCP, NCCP and High Performance render it:
   navy band, white WPC logo, the workspace's or portal's name, a badge, and at the right the page's own
   controls, the WPC Platforms grid and the account menu. The band, logo, type and badge are the design
   system's own CSS (/assets/ds/, byte-identical to wpc-hub's: .ncl-header inside .wpc-brand, loaded before
   the page's stylesheets). What is here is the glue the other modules have too: the page's controls on the
   band, the account menu, the sidebar under the header, and the phone rules (the Hub admin's: no badge and
   an avatar-only account button at 720px and below). */
.as-top { position: sticky; top: 0; z-index: 300; font-family: var(--as-font); }   /* the wrapper sticks */
/* 60px, as the white bar was (the design system's bridge pads it to 62 around the 42px logo): a dozen pages
   stick their own toolbars at top:60px and size panels to 100vh - 60px, and they stay right. The design system
   sits in a cascade layer below the page, so a page's universal reset (*{margin:0;padding:0}) would take the
   header's spacing away: it is held here, the design system's own values. */
.wpc-head .ncl-header { position: static; padding: 9px 32px; }
.wpc-head .ncl-header__badge { padding: 3px 10px; }
.wpc-head .ncl-badge { padding: 3px 9px; }
.wpc-head button, .wpc-head a, .wpc-head select { margin: 0; }   /* a page's form rules (button{margin-top:12px}) stop at the header */
.wpc-head .ncl-header__left { min-width: 0; }
.wpc-head .ncl-header__right { flex: 0 0 auto; }
.wpc-head .ncl-header__logo { text-decoration: none; color: #fff; min-width: 0; flex: 0 1 auto; }   /* the name gives way (ellipsis) to the controls */
.wpc-head .ncl-header__logo > div, .wpc-head .wpc-bar__txt { min-width: 0; overflow: hidden; }
.wpc-head .ncl-header__logo img { height: 42px; width: auto; display: block; }   /* the design system's, held against a page's img rules */
.wpc-head .wpc-bar__txt { display: flex; flex-direction: column; min-width: 0; }
.wpc-head .ncl-header__title, .wpc-head .ncl-header__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a portal's context chip (club, role · season, event) is the header's badge */
.wpc-head .ncl-header__badge { display: inline-flex; align-items: center; gap: 6px; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.wpc-head .ncl-header__badge:empty, .wpc-head .ncl-header__badge[hidden] { display: none; }
.wpc-head .wpc-bar__ctx button, .wpc-head .wpc-bar__ctx a { font: 700 11.5px var(--as-font); color: #fff; background: none; border: 0; padding: 0 0 0 4px; cursor: pointer; text-decoration: underline; }
.wpc-head .wpc-bar__ctx--sso { color: #D7F2DF; background: rgba(31, 122, 61, .45); }
.wpc-head-actions, .wpc-head .header-right { display: flex; align-items: center; gap: 10px; margin: 0; }
/* the page's own controls on the band, in the outline of the Platforms grid and the account pill */
.wpc-head .as-btn, .wpc-head .as-iconbtn, .wpc-head-burger, .wpc-head .wpc-head-lang {
  box-sizing: border-box; height: 38px; border-radius: 10px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.wpc-head .as-btn { padding: 0 12px; font: 600 13px var(--as-font); }
.wpc-head .as-btn:hover, .wpc-head .as-iconbtn:hover, .wpc-head-burger:hover, .wpc-head .wpc-head-lang:hover { background: rgba(255,255,255,.18); }
.wpc-head .wpc-head-lang { min-width: 38px; padding: 0 11px; font: 600 13px/1 var(--as-font); cursor: pointer; }
.wpc-head select[data-wpc-season-picker] {
  height: 38px; padding: 0 28px 0 10px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background-color: rgba(255,255,255,.10);
  color: #fff; color-scheme: dark; font: 600 12.5px var(--as-font);
}
.as-top.wpc-head .ncl-bell-btn { background: rgba(255,255,255,.10) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important;
  width: 38px; height: 38px; border-radius: 10px !important; font-size: 0 !important; }
.as-top.wpc-head .ncl-bell-btn:hover { background: rgba(255,255,255,.18) !important; }
.as-top .ncl-bell-btn::before { content: ''; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center/contain no-repeat; }
.as-top .ncl-bell-count { font-size: 10px !important; }
.as-top .ncl-bell { margin-right: 0; }
.as-iconbtn {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--as-line-soft); background: #fff;
  display: inline-grid; place-items: center; cursor: pointer; color: var(--as-text); text-decoration: none; padding: 0;
}
.as-iconbtn:hover { background: var(--as-surface-2); }
.as-iconbtn svg { width: 18px; height: 18px; }
.wpc-head .as-iconbtn { width: 38px; }
/* WPC Platforms (js/wpc-platforms.js mountGrid, dark theme): the WPC Hub admin's colours */
.wpc-head .wpcp--grid { --wpcp-btn-bg: rgba(255,255,255,.10); --wpcp-btn-line: rgba(255,255,255,.22); --wpcp-btn-hover: rgba(255,255,255,.18); --wpcp-accent: var(--wpc-red); }
.wpc-head .wpcp--grid .wpcp__btn { font-family: var(--as-font); }
/* admin-utils.js "View As" — the same portals now live in the sidebar footer */
.as-top #viewAsBtn, .as-top #viewAsDrop { display: none !important; }
/* entry 215: NCL Live lockup, NCL workspace only (js/admin-nav.js), after the name — white on the navy band */
.as-ncllive { flex: 0 0 auto; display: flex; align-items: center; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.22); }
.as-ncllive img { height: 40px; width: auto; display: block; }
/* the menu button for the sidebar drawer (admin frame, 900px and below) */
.wpc-head-burger { display: none; flex: 0 0 auto; width: 38px; padding: 0; align-items: center; justify-content: center; cursor: pointer; }
.wpc-head-burger svg { width: 18px; height: 18px; }
/* the account menu: the WPC Hub admin's AccountMenu (who you are, your role, then the items) */
.wpc-acct { position: relative; }
.wpc-acct-btn { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 4px 10px 4px 5px; cursor: pointer; color: #fff; font: inherit; }
.wpc-acct-btn:hover { background: rgba(255,255,255,.18); }
.wpc-acct-label { font-size: 13px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpc-acct-caret { font-size: 10px; opacity: .8; }
.wpc-acct-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; max-height: calc(100vh - 90px); overflow-y: auto; z-index: 60;
  background: #fff; color: var(--as-text); text-align: left; border: 1px solid var(--as-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.18);
  font-family: var(--as-font); }
.wpc-acct-menu[hidden] { display: none; }
.wpc-acct-menu .who { padding: 11px 12px; border-bottom: 1px solid var(--as-line-soft); }
.wpc-acct-menu .nm { font-size: 13px; font-weight: 600; }
.wpc-acct-menu .em { font-size: 12px; color: var(--as-muted); word-break: break-all; }
.wpc-acct-menu .sep { height: 1px; background: var(--as-line-soft); }
.wpc-acct-menu .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--as-faint); padding: 9px 12px 3px; }
.wpc-acct-menu a, .wpc-acct-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; font: 400 13px var(--as-font);
  text-align: left; background: none; border: 0; cursor: pointer; color: var(--as-text); text-decoration: none; }
.wpc-acct-menu a:hover, .wpc-acct-menu button:hover { background: var(--as-surface-2); }
.wpc-acct-menu svg { width: 16px; height: 16px; color: var(--as-muted); flex: 0 0 auto; }
.wpc-acct-menu a > span, .wpc-acct-menu button > span { flex: 1; min-width: 0; }
.wpc-acct-menu small { display: block; font-size: 11.5px; color: var(--as-muted); margin-top: 1px; }
.wpc-acct-menu .wpc-acct-ext { width: 13px; height: 13px; opacity: .55; }
.wpc-acct-menu .out { color: var(--wpc-red); font-weight: 600; }
.wpc-acct-menu .out svg { color: currentColor; }
.wpc-bar .wpc-bar__guide-m { display: none; }
/* the frame: the header spans the window, whatever the page's body margin (measured into --wpc-body-*: the band
   goes out to the edges and the same gap opens under it, so the page below does not move); the sidebar sits
   under it (top: --wpc-head-h, measured) */
.as-top.wpc-head { margin: calc(-1 * var(--wpc-body-mt, 0px)) calc(-1 * var(--wpc-body-mr, 0px)) var(--wpc-body-mt, 0px) calc(-1 * var(--wpc-body-ml, 0px)); }
@media (min-width: 901px) { body.as-on > #asTop { margin-left: calc(-1 * (var(--as-side-w) + var(--wpc-body-ml, 0px))); } }
@media (max-width: 900px) {
  .as-top.wpc-head { z-index: 610; }                   /* above the drawer (600) and its scrim */
  body.as-on .wpc-head-burger { display: inline-flex; }
  .wpc-head .wpc-acct-label { display: none; }           /* as the white bar did: the name goes at 900px */
  .wpc-head select[data-wpc-season-picker] { display: none; }
  .wpc-head .wpc-bar__ctx--sso { display: none; }
  .wpc-head #asViewAs > .as-btn { width: 38px; padding: 0; }             /* "View as" keeps its eye */
  .wpc-head #asViewAs > .as-btn > span, .wpc-head #asViewAs > .as-btn > svg:last-child { display: none; }
}
@media (max-width: 720px) {
  .wpc-head .ncl-header { padding-left: 14px; padding-right: 14px; }
  .wpc-head .ncl-header__badge { display: none; }
}
@media (max-width: 640px) {
  .wpc-head-actions, .wpc-head .header-right, .wpc-head .as-top__mine { gap: 8px !important; }
  .wpc-bar .wpc-bar__guide, .wpc-bar .wpc-bar__wide { display: none; }
  .wpc-bar .wpc-bar__guide-m { display: flex; }
  .wpc-head [data-wpc-back-hub] span { display: none; }  /* "← My WPC" keeps its arrow */
  .wpc-head [data-wpc-back-hub] { padding: 0 10px; }
  .as-ncllive img { height: 32px; } .as-ncllive { padding-left: 10px; }
}
@media (max-width: 420px) {
  .wpc-head .ncl-header__sub { display: none; }
  .wpc-head .ncl-header__logo img { height: 34px; }
  .as-ncllive { display: none; }
  /* Events' headers carry more controls than the other modules' (bell, View as, status light, a page's own
     buttons): on a phone the logo stays and the name gives its room to them. (The white bars had no logo here
     at all in the admin, and ran wider than the phone on four portal pages.) */
  .wpc-head .ncl-header__logo > div, .wpc-head .wpc-bar__txt { display: none; }
}

/* Lucide icons that replaced emoji in portal buttons, tabs and headings (entry 170).
   <i data-lucide="…" class="emo-ic"> becomes an <svg class="emo-ic lucide …"> via js/icons.js. */
svg.emo-ic, i.emo-ic { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.17em; margin-right: .32em; stroke-width: 2.1; flex: 0 0 auto; }
.empty .icon svg, .detail-empty .icon svg, .em-empty svg.emo-ic { width: 34px; height: 34px; margin: 0; color: var(--as-faint); stroke-width: 1.6; vertical-align: middle; }
.resource-icon svg { width: 18px; height: 18px; color: var(--as-muted); }
.uz-icon svg { width: 28px; height: 28px; color: var(--as-muted); }

/* ── page header ───────────────────────────────────────────────────────────── */
.as-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 6px; min-height: 22px; }
.as-page-head:empty { display: none; }
.as-page-head__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.as-page-head__actions:empty { display: none; }
.as-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--as-muted); font-family: var(--as-font); min-width: 0; }
.as-crumbs a { color: var(--as-muted); text-decoration: none; font-weight: 600; }
.as-crumbs a:hover { color: var(--as-text); text-decoration: underline; }
.as-crumbs svg { width: 13px; height: 13px; opacity: .45; flex: 0 0 auto; }
.as-crumbs [aria-current] { color: var(--as-text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Legacy pages style every bare nav / nav a (a white tab bar with 14px
   padding). The crumb trail is a <nav> for accessibility, so undo that here. */
body nav.as-crumbs { display: flex; background: none; border: 0; padding: 0; margin: 0; gap: 6px; overflow: visible; box-shadow: none; position: static; height: auto; }
body nav.as-crumbs a { display: inline; padding: 0; border: 0; font-size: 12.5px; white-space: nowrap; }

body.as-on .as-h1, .as-h1 {
  font-family: var(--as-font) !important; font-size: 24px !important; font-weight: 800 !important;
  letter-spacing: -.3px; line-height: 1.2; color: var(--as-text) !important; margin: 0;
}
.as-sub { font-size: 13.5px; color: var(--as-muted); margin-top: 4px; line-height: 1.5; }

/* ── atoms ─────────────────────────────────────────────────────────────────── */
.as-ic { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }

.as-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 20px;
  font: 700 11.5px/1 var(--as-font); white-space: nowrap; border: 1px solid var(--as-slate-bd);
  background: var(--as-slate-bg); color: var(--as-slate); text-decoration: none; vertical-align: middle;
}
.as-chip svg { width: 13px; height: 13px; flex: 0 0 auto; stroke-width: 2.2; }
.as-chip .as-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.as-chip__n { font-variant-numeric: tabular-nums; font-weight: 800; padding: 0 6px; margin-right: -5px; height: 18px; border-radius: 9px; display: inline-grid; place-items: center; background: rgba(255,255,255,.75); }
.as-chip--sm { height: 20px; padding: 0 8px; font-size: 10.5px; gap: 5px; }
.as-chip--sm svg { width: 11px; height: 11px; }
.as-chip--green  { background: var(--as-green-bg);  color: var(--as-green);  border-color: var(--as-green-bd); }
.as-chip--amber  { background: var(--as-amber-bg);  color: var(--as-amber);  border-color: var(--as-amber-bd); }
.as-chip--amber .as-dot { background: var(--as-amber-dot); }
.as-chip--red    { background: var(--as-red-bg);    color: var(--as-red);    border-color: var(--as-red-bd); }
.as-chip--purple { background: var(--as-purple-bg); color: var(--as-purple); border-color: var(--as-purple-bd); }
.as-chip--teal   { background: var(--as-teal-bg);   color: var(--as-teal);   border-color: var(--as-teal-bd); }
.as-chip--blue   { background: var(--as-blue-bg);   color: var(--as-blue);   border-color: var(--as-blue-bd); }
.as-chip--slate  { /* default */ }
.as-chip--brand  { background: var(--as-primary); color: #fff; border-color: transparent; }
.as-chip--accent { background: var(--as-accent); color: #fff; border-color: transparent; }
.as-chip--brand .as-chip__n, .as-chip--accent .as-chip__n { background: rgba(255,255,255,.22); }
.as-chip--outline { background: #fff; }

.as-seg { display: inline-flex; gap: 4px; padding: 3px; background: #fff; border: 1px solid var(--as-line-soft); border-radius: 22px; }
.as-seg__btn {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 18px; border: 0; background: none;
  font: 700 12.5px var(--as-font); color: var(--as-muted); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.as-seg__btn:hover { color: var(--as-text); background: var(--as-surface-2); }
.as-seg__btn .as-dot { width: 8px; height: 8px; border-radius: 50%; }
.as-seg__btn[aria-pressed="true"] { background: var(--as-primary); color: #fff; }

.as-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 9px;
  font: 700 13.5px var(--as-font); text-decoration: none; cursor: pointer; border: 1px solid var(--as-line); background: #fff; color: var(--as-text); white-space: nowrap;
}
.as-btn svg { width: 16px; height: 16px; }
.as-btn:hover { background: var(--as-surface-2); }
.as-btn--primary { background: var(--as-primary); border-color: var(--as-primary); color: #fff; }
.as-btn--primary:hover { background: var(--as-primary); filter: brightness(1.18); }
.as-btn--accent { background: var(--as-accent); border-color: var(--as-accent); color: #fff; }
.as-btn--accent:hover { background: var(--as-accent); filter: brightness(1.08); }
.as-btn--ghost { background: transparent; border-color: transparent; }
.as-btn--sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }

/* ── dashboard pieces ──────────────────────────────────────────────────────── */
.as-wrap { max-width: 1240px; margin: 0 auto; padding: 22px clamp(16px, 3vw, 32px) 64px; font-family: var(--as-font); color: var(--as-text); }
.as-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }

.as-next {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; margin-bottom: 22px;
  background: #fff; border: 1px solid var(--as-line-soft); box-shadow: var(--as-shadow); position: relative; overflow: hidden;
}
.as-next::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--as-primary); }
.as-next__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: var(--as-slate-bg); color: var(--as-primary); }
.as-next__ic svg { width: 22px; height: 22px; }
.as-next__body { flex: 1; min-width: 0; }
.as-next__lbl { font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--as-muted); }
.as-next__t { font-size: 16.5px; font-weight: 800; margin-top: 2px; line-height: 1.3; }
.as-next__d { font-size: 13px; color: var(--as-muted); margin-top: 3px; line-height: 1.45; }
.as-next__more { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.as-next--alert::before { background: var(--as-accent); }
.as-next--alert .as-next__ic { background: var(--as-red-bg); color: var(--as-red); }
.as-next--alert .as-next__lbl { color: var(--as-red); }
.as-next--warn::before { background: var(--as-amber-dot); }
.as-next--warn .as-next__ic { background: var(--as-amber-bg); color: var(--as-amber); }
.as-next--warn .as-next__lbl { color: var(--as-amber); }
.as-next--ok::before { background: var(--as-green); }
.as-next--ok .as-next__ic { background: var(--as-green-bg); color: var(--as-green); }

.as-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.as-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.as-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.as-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.as-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.as-section { margin-top: 30px; }
.as-section:first-child { margin-top: 0; }
.as-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.as-section__t { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; margin: 0; }
.as-section__t svg { width: 17px; height: 17px; color: var(--as-muted); }
.as-section__link { font-size: 12.5px; font-weight: 700; color: var(--as-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.as-section__link:hover { color: var(--as-text); }
.as-section__link svg { width: 14px; height: 14px; }

.as-card { background: #fff; border: 1px solid var(--as-line-soft); border-radius: var(--as-radius); box-shadow: var(--as-shadow); min-width: 0; }
a.as-card { display: block; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
a.as-card:hover { box-shadow: var(--as-shadow-hover); transform: translateY(-1px); }
.as-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--as-line-soft); }
.as-card__head h3 { margin: 0; font-size: 13.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.as-card__head h3 svg { width: 16px; height: 16px; color: var(--as-muted); }
.as-card__body { padding: 16px; }

.as-kpi { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.as-kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.as-kpi__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--as-slate-bg); color: var(--as-primary); }
.as-kpi__ic svg { width: 19px; height: 19px; }
.as-kpi__ic--red { background: var(--as-red-bg); color: var(--as-red); }
.as-kpi__ic--amber { background: var(--as-amber-bg); color: var(--as-amber); }
.as-kpi__ic--green { background: var(--as-green-bg); color: var(--as-green); }
.as-kpi__ic--blue { background: var(--as-blue-bg); color: var(--as-blue); }
.as-kpi__ic--purple { background: var(--as-purple-bg); color: var(--as-purple); }
.as-kpi__val { font-size: 30px; font-weight: 800; line-height: 1; margin-top: 10px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.as-kpi__lbl { font-size: 12.5px; font-weight: 700; color: var(--as-muted); }
.as-kpi__chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }

.as-event { display: flex; gap: 14px; padding: 14px; }
.as-event__date { width: 54px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--as-line-soft); overflow: hidden; text-align: center; background: #fff; align-self: flex-start; }
.as-event__mon { background: var(--as-primary); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 3px 0; }
.as-event__day { font-size: 21px; font-weight: 800; padding: 4px 0 5px; line-height: 1.1; }
.as-event__body { min-width: 0; flex: 1; }
.as-event__t { font-size: 14px; font-weight: 800; line-height: 1.3; }
.as-event__m { font-size: 12.5px; color: var(--as-muted); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.as-event__m svg { width: 13px; height: 13px; }
.as-event__chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }

.as-list { list-style: none; margin: 0; padding: 0; }
.as-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--as-line-soft); text-decoration: none; color: inherit; min-width: 0; }
.as-list > .as-row:first-child, .as-list > li:first-child > .as-row { border-top: 0; }
a.as-row:hover { background: var(--as-surface-2); }
.as-row__ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; background: var(--as-slate-bg); color: var(--as-slate); }
.as-row__ic svg { width: 17px; height: 17px; }
.as-row__ic--red { background: var(--as-red-bg); color: var(--as-red); }
.as-row__ic--amber { background: var(--as-amber-bg); color: var(--as-amber); }
.as-row__ic--green { background: var(--as-green-bg); color: var(--as-green); }
.as-row__ic--blue { background: var(--as-blue-bg); color: var(--as-blue); }
.as-row__ic--purple { background: var(--as-purple-bg); color: var(--as-purple); }
.as-row__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--as-slate); }
.as-row__body { flex: 1; min-width: 0; }
.as-row__t { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-row--wrap .as-row__t, .as-row--wrap .as-row__m { white-space: normal; }
.as-row__m { font-size: 12px; color: var(--as-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-row__end { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.as-row__chev { width: 16px; height: 16px; color: var(--as-faint); flex: 0 0 auto; }
.as-meter { height: 5px; border-radius: 3px; background: var(--as-line-soft); margin-top: 6px; overflow: hidden; max-width: 160px; }
.as-meter > i { display: block; height: 100%; background: var(--as-accent); border-radius: 3px; }

.as-launcher { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.as-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 15px 6px 13px; background: #fff; border: 1px solid var(--as-line-soft); border-radius: 14px; text-decoration: none; color: var(--as-text);
  box-shadow: var(--as-shadow); min-width: 0;
}
.as-tile:active { background: var(--as-surface-2); }
.as-tile > svg { width: 24px; height: 24px; color: var(--as-primary); }
.as-tile__t { font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.as-tile .as-count { position: absolute; top: 7px; right: 7px; }
.as-tile.is-active { border-color: var(--as-accent); }
.as-tile.is-active > svg { color: var(--as-accent); }

.as-empty { text-align: center; padding: 30px 18px; color: var(--as-muted); }
.as-empty svg { width: 28px; height: 28px; color: var(--as-green); }
.as-empty__t { font-size: 14px; font-weight: 800; color: var(--as-text); margin-top: 8px; }
.as-empty__d { font-size: 12.5px; margin-top: 4px; line-height: 1.5; }

.as-wrap .loading { padding: 16px; color: var(--as-muted); }
.as-skel { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #EEF1F4, #F7F8FA, #EEF1F4); background-size: 200% 100%; animation: as-shimmer 1.2s infinite; }
@keyframes as-shimmer { to { background-position: -200% 0; } }

.as-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.as-table th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--as-muted); background: var(--header-bg, #FAFBFC); border-bottom: 1px solid var(--as-line-soft); }
.as-table td { padding: 11px 14px; border-bottom: 1px solid var(--as-line-soft); }
.as-table tr:last-child td { border-bottom: 0; }

/* ── legacy normalisation (only once the shell is mounted) ─────────────────── *
   Deliberately small and specificity-scoped so a page's own rule still wins
   where it means something different. What it fixes is what the audit found
   drifting across pages: primary buttons in two colours, card radii from 8 to
   16px, and five different table-header treatments. */
body.as-on { font-family: var(--as-font); }
body.as-on main .page-title { display: block; }
body.as-on main .page-sub { color: var(--as-muted); max-width: 88ch; }
body.as-on .btn-primary:not(:disabled):not(.btn-danger) { background: var(--as-primary); border-color: var(--as-primary); color: #fff; }
body.as-on .btn-primary:not(:disabled):not(.btn-danger):hover { filter: brightness(1.2); }
body.as-on main .card, body.as-on main .panel, body.as-on main .kpi, body.as-on main .stat-card,
body.as-on main .table-card, body.as-on main .table-wrap { border-radius: var(--as-radius); }
body.as-on main table > thead > tr > th:not([style]) {
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
}

/* ── responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .as-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  body.as-on { padding-left: 0; }
  .as-side {
    width: min(340px, 88vw); transform: translateX(-104%);
    box-shadow: 6px 0 28px rgba(0,0,0,.22); z-index: 600;
  }
  body.as-nav-open .as-side { transform: none; }
  /* animate only once mounted, so a late-loading stylesheet never slides it */
  body.as-ready .as-side { transition: transform .22s ease; }
  .as-scrim { position: fixed; inset: 0; background: rgba(15,20,28,.45); z-index: 590; display: none; }
  body.as-nav-open .as-scrim { display: block; }
  body.as-nav-open { overflow: hidden; }
  /* the drawer reads as an app menu: each group becomes an icon grid */
  .as-side .as-nav-group:not(.as-nav-group--solo) .as-nav-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 14px; }
  .as-side .as-nav-group:not(.as-nav-group--solo) .as-nav-link {
    flex-direction: column; justify-content: center; text-align: center; gap: 6px; margin: 0; padding: 12px 4px 10px;
    border: 1px solid var(--as-line-soft); border-radius: 12px; font-size: 11.5px; font-weight: 600; min-height: 72px;
  }
  .as-side .as-nav-group:not(.as-nav-group--solo) .as-nav-link > svg { width: 22px; height: 22px; color: var(--as-primary); }
  .as-side .as-nav-group:not(.as-nav-group--solo) .as-nav-link.is-active::before { display: none; }
  .as-side .as-nav-group:not(.as-nav-group--solo) .as-nav-link.is-active { border-color: var(--as-accent); }
  .as-side .as-nav-group:not(.as-nav-group--solo) .as-nav-link__t { white-space: normal; line-height: 1.2; overflow: visible; }
  .as-side .as-nav-group:not(.as-nav-group--solo) .as-count { position: absolute; top: 5px; right: 5px; }
  body.as-on main table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 640px) {
  .as-launcher { display: grid; }
  .as-grid--2, .as-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .as-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .as-kpi { padding: 13px; }
  .as-kpi__val { font-size: 25px; margin-top: 8px; }
  .as-next { flex-wrap: wrap; padding: 14px; gap: 12px; }
  .as-next__go { width: 100%; }
  .as-head .as-seg { width: 100%; justify-content: space-between; }
  .as-head .as-seg__btn { flex: 1; justify-content: center; }
  .as-top #viewAsBtn { display: none; }
  body.as-on main { padding-left: 14px !important; padding-right: 14px !important; overflow-wrap: break-word; }
  /* page-internal widths the 375px sweep caught (tab strips, long code, selects) */
  body.as-on main .tab-bar, body.as-on main .tab-filter { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  body.as-on main pre, body.as-on main code { white-space: pre-wrap; word-break: break-word; }
  body.as-on main select, body.as-on main input { max-width: 100%; min-width: 0; }
  body.as-on main .row, body.as-on main .toolbar, body.as-on main .filters { flex-wrap: wrap; }
  body.as-on main .fld, body.as-on main .field, body.as-on main .form-group { min-width: 0; max-width: 100%; }
}
@media print {
  .as-side, .as-top, .as-scrim, .as-page-head { display: none !important; }
  body.as-on { padding-left: 0; }
}

/* ── Pop-up (entry 197) ──────────────────────────────────────────────────────
   Applied by js/wpc-modal.js to a page's existing overlay + box. Corey: "It should be a
   normal pop-up" — not a right-side window. Capped to the viewport; head (title + ✕) and
   foot (Save / Cancel) always visible, the body scrolls; full-screen sheet under 640px.
   !important because each page still carries its own older .modal / .card rules. */
.as-modal { position: fixed !important; inset: 0 !important; z-index: 1000 !important;
  align-items: center !important; justify-content: center !important;
  padding: 20px !important; background: rgba(15, 20, 28, .5) !important; overflow: hidden !important; }
.as-modal-panel { display: flex !important; flex-direction: column !important;
  width: 100%; max-height: calc(100vh - 40px) !important; max-height: calc(100dvh - 40px) !important;
  overflow: hidden !important; padding: 0 !important; margin: 0 !important; background: #fff;
  border-radius: 14px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.as-modal-panel > .as-modal-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--as-line-soft, #E9ECF0); background: #fff; }
.as-modal-panel > .as-modal-head > .as-modal-title { min-width: 0; }
.as-modal-panel > .as-modal-head h2, .as-modal-panel > .as-modal-head h3 { margin: 0 !important; }
.as-modal-panel > .as-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 20px; -webkit-overflow-scrolling: touch; }
.as-modal-panel > .as-modal-foot { flex: none; padding: 12px 20px; border-top: 1px solid var(--as-line-soft, #E9ECF0);
  background: #fff; margin: 0 !important; }
.as-modal-x { flex: none; width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 18px; line-height: 1; color: #1B2230; background: #EDEFF3;
  border: 1px solid #E4E8F0; cursor: pointer; padding: 0; font-family: inherit; }
.as-modal-x:hover { background: #E4E8F0; }
.as-modal-x:focus-visible { outline: 2px solid var(--as-primary, #1A1A1A); outline-offset: 2px; }
body.as-modal-lock { overflow: hidden !important; }
/* WpcModal.confirm (entry 199): a short question — narrow, never a full-screen sheet */
.as-modal-confirm { max-width: 480px; }
.as-modal-confirm .as-modal-body p { margin: 0 0 10px; line-height: 1.5; font-size: 14.5px; color: var(--as-text, #1B2230); }
.as-modal-confirm .as-modal-body ul { margin: 0 0 12px 18px; padding: 0; line-height: 1.55; font-size: 14px; }
.as-modal-confirm .as-modal-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.as-modal-confirm .as-confirm-label { display: block; font-size: 12px; font-weight: 700; color: var(--as-muted, #5D6D7E); margin: 6px 0 5px; }
.as-modal-confirm textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--as-line, #D5D8DC); border-radius: 8px; font: inherit; font-size: 15px; }
.as-modal-confirm textarea.as-confirm-invalid { border-color: #C0392B; box-shadow: 0 0 0 2px rgba(192, 57, 43, .15); }
.as-btn--danger { background: #C0392B; border-color: #C0392B; color: #fff; }
.as-btn--danger:hover { background: #A93226; }
/* grid cells may shrink below a long <select> option, so the body never scrolls sideways */
.as-modal-body .form-row > *, .as-modal-body .grid2 > *, .as-modal-body .grid3 > * { min-width: 0; }
.as-modal-body select, .as-modal-body input, .as-modal-body textarea { max-width: 100%; }
@media (max-width: 640px) {
  .as-modal { padding: 0 !important; align-items: stretch !important; }
  .as-modal-panel { max-width: none !important; width: 100% !important; height: 100vh; height: 100dvh;
    max-height: none !important; border-radius: 0 !important; }
  .as-modal-panel > .as-modal-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .as-modal-panel .grid2, .as-modal-panel .grid3, .as-modal-panel .form-grid, .as-modal-panel .form-row { grid-template-columns: 1fr !important; }
  .as-modal-panel .span2 { grid-column: auto !important; }
  .as-modal.as-modal--confirm { padding: 16px !important; align-items: center !important; }
  .as-modal--confirm .as-modal-panel { height: auto; max-height: calc(100dvh - 32px) !important; border-radius: 14px !important; }
}