/* =====================================================================================================================
   Grow Admin · shared/ap.css: app-level components on top of the vendored Grow App Design System (ds/tokens.css +
   ds/components.css, never edited). DS tokens only; no color-mix() (WebKit). Sections:
   0 fonts + growdev bar · 1 app tokens · 2 shell (header, rail groups, mini rail, flyouts, sheet, account menu)
   3 page header + sections · 4 status chips, tags, avatars · 5 table · 6 KPIs, charts, crosstab · 7 range control
   8 drawer · 9 palette · 10 detail pages · 11 overview · 12 forms + misc · 13 density · 14 responsive · 15 motion
   ===================================================================================================================== */

/* ---------- 0. self-hosted Plus Jakarta Sans (OFL) + growdev's unified top bar ---------- */
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/jakarta-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
html[data-tb]:root { --hdr: var(--tb-bar, 68px); --stripe-h: var(--tb-stripe-h, 6px); }
html[data-tb] .hdr .gc-logo .ap-appico { width: calc(var(--tb-mark, 32px) * .82); height: calc(var(--tb-mark, 32px) * .82); }
img { max-width: 100%; height: auto; }

/* ---------- 1. app tokens ---------- */
:root {
  --shell: 1560px; --rail: 236px; --rail-gap: 32px;
  --row-h: 48px; --th-h: 40px; --cell-x: 12px;
  --c1: #5E8117; --c2: #2294A9; --c3: #E07A2E; --c4: #6370E8; --c5: #D9577F; --c6: #B59A12; --cprev: #9AA1A9;
  --heat: 191,228,120;
  --good-ink: var(--evt-ink); --good-soft: var(--evt-soft); --bad-ink: var(--disc-ink); --bad-soft: var(--disc-soft);
  --sk: #E9ECEF; --sk2: #F3F5F7;
}
html[data-mode="dark"] { --c1: #BFE478; --c2: #5FC9DC; --c3: #F4AA73; --c4: #A5AFFF; --c5: #F6A2BB; --c6: #E4D353; --cprev: #6B737B; --sk: #3A4046; --sk2: #434A50; }
html:not([data-mode="dark"]) .btn-primary { box-shadow: inset 0 0 0 1px #6D941E, 0 1px 2px rgba(var(--shd), .10); }
html:not([data-mode="dark"]) .btn-primary:hover { box-shadow: inset 0 0 0 1px #6D941E, 0 6px 14px -6px var(--acc-glow), 0 1px 2px rgba(var(--shd), .10); }
html:not([data-mode="dark"]) .btn-primary:is([disabled], [aria-disabled="true"]) { box-shadow: inset 0 0 0 1px var(--line); }
.tnum, .num { font-variant-numeric: tabular-nums; }
kbd { font: 650 11.5px/1 var(--font); }

/* ---------- 2. shell ---------- */
.gc-logo .ap-appico { width: 28px; height: 28px; flex: none; border-radius: 22%; margin-right: -2px; }
@media (max-width: 400px) { .hdr .gc-logo .ap-appico { display: none; } }
.ftr .gc-logo .ap-appico { display: none; }
.ap-hsearch { margin-left: 28px; max-width: 460px; }
.ap-hsearch .fld { display: block; width: 100%; text-align: left; cursor: text; color: var(--ph); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-hsearch .fld:focus-visible { outline: 2px solid var(--acc-ring); outline-offset: 2px; }
.ap-search-ico { display: none; }
.ap-roletag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin-right: 4px; border-radius: 8px; background: var(--env-soft); color: var(--env-ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ap-roletag svg { width: 15px; height: 15px; }
.ap-roletag[hidden] { display: none; }

/* rail: groups */
.ap-rail { padding-top: 22px; padding-bottom: 18px; flex-direction: column; }
@media (min-width: 1000px) { .ap-rail { display: flex; } }
.ap-railnav { display: flex; flex-direction: column; gap: 1px; }
.ap-rail .rail-link { min-height: 36px; font-size: 14px; gap: 11px; padding: 0 10px; }
.ap-rail .rail-link > svg { width: 18px; height: 18px; color: var(--ink-3); }
.ap-rail .rail-link:hover > svg, .ap-rail .rail-link[aria-current="page"] > svg { color: var(--ink); }
.ap-rail .rl-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg { margin-top: 12px; }
.rg[hidden] { display: none; }
.rg-h { margin: 0; font: inherit; }
.rg-btn { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer;
  color: var(--ink-3); font: 650 12.5px/1 var(--font); letter-spacing: -.005em; text-align: left; }
.rg-btn:hover { color: var(--ink); background: var(--hover); }
.rg-btn > svg:first-child { display: none; width: 18px; height: 18px; }
.rg-t { flex: 1; }
.rg-car { width: 15px; height: 15px; opacity: 0; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast); }
.rg-btn:hover .rg-car, .rg-btn:focus-visible .rg-car, .rg-btn[aria-expanded="false"] .rg-car { opacity: 1; }
.rg-btn[aria-expanded="false"] .rg-car { transform: rotate(-90deg); }
.rg-list { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 1px; }
.rg-list[hidden] { display: none; }
.rg-pins .rg-list:empty { display: none; }
.ap-rail .cnt, .sheet .cnt { background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; }
.ap-rail .cnt[data-cnt="mp-disputes"], .sheet .cnt[data-cnt="mp-disputes"], .ap-rail .cnt[data-cnt="failed"], .sheet .cnt[data-cnt="failed"] { background: var(--alert-soft); color: var(--alert-ink); box-shadow: none; }
.rg-pins .rail-link.is-here { color: var(--ink); }
.rg-pins .rail-link.is-here > svg { color: var(--ink); }
.rg-pins .rail-link.is-here::after { content: ""; flex: none; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--accent); }
.rail-foot { margin-top: auto; padding-top: 16px; }
.rail-mini { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 11px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-tile); background: none; color: var(--ink-3);
  font: 600 13.5px/1 var(--font); cursor: pointer; }
.rail-mini:hover { background: var(--hover); color: var(--ink); }
.rail-mini svg { width: 18px; height: 18px; flex: none; }

/* rail: collapsed icon rail (≥1000px) */
@media (min-width: 1000px) {
  html[data-rail="mini"] { --rail: 56px; --rail-gap: 24px; }
  html[data-rail="mini"] .ap-rail .rail-link, html[data-rail="mini"] .rail-mini { justify-content: center; padding: 0; position: relative; }
  html[data-rail="mini"] .ap-rail :is(.rl-t, .rg-t, .rg-car) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-rail="mini"] .rg-btn { justify-content: center; padding: 0; min-height: 36px; color: var(--ink-3); }
  html[data-rail="mini"] .rg-btn > svg:first-child { display: block; }
  html[data-rail="mini"] .rg-btn[aria-expanded="true"] { background: var(--sf); color: var(--ink); box-shadow: var(--e1); }
  html[data-rail="mini"] .rg-pins .rg-h { display: none; }
  html[data-rail="mini"] .rg-pins .rg-list { display: grid; }
  html[data-rail="mini"] .rg-pins { padding-bottom: 8px; border-bottom: 1px solid var(--hair); }
  html[data-rail="mini"] .rg { margin-top: 6px; }
  html[data-rail="mini"] .rg[data-cur] .rg-btn { background: var(--sf); color: var(--ink); box-shadow: var(--e1); }
  html[data-rail="mini"] .ap-rail .rail-link .cnt { position: absolute; top: 5px; right: 7px; width: 8px; min-width: 0; height: 8px; padding: 0; border-radius: 50%; font-size: 0; color: transparent; box-shadow: 0 0 0 2px var(--canvas); }
}
.ap-fly { position: fixed; z-index: 80; min-width: 230px; max-width: 300px; padding: 6px; border-radius: 12px; background: var(--raise); box-shadow: var(--e3); display: grid; gap: 1px; }
html[data-mode="dark"] .ap-fly { --sf: #373C42; --bg: #3E444A; }
.ap-fly-h { margin: 6px 10px 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.ap-fly li { list-style: none; }
.ap-fly .rail-link { min-height: 38px; font-size: 14px; gap: 11px; padding: 0 10px; }
.ap-fly .rail-link > svg { width: 18px; height: 18px; color: var(--ink-3); }
.ap-fly .rail-link:focus-visible { outline: 2px solid var(--acc-ring); outline-offset: -2px; }

/* mobile sheet */
.ap-sheet-search { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; margin-bottom: 14px; border: 0; border-radius: var(--r-pill); background: var(--fld); color: var(--ph); font: 500 15px/1 var(--font); cursor: text; }
.ap-sheet-search svg { width: 18px; height: 18px; }
.ap-sheetnav { display: grid; gap: 4px; }
.ap-sh-top { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--r-tile); color: var(--ink); font-weight: 650; text-decoration: none; }
.ap-sh-top svg, .ap-shg svg { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.ap-sh-top[aria-current="page"] { background: var(--sel-bg); color: var(--sel-ink); }
.ap-sh-top[aria-current="page"] svg { color: inherit; }
.ap-sh-pinrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 6px; }
.ap-sh-pinrow a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 12px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.ap-sh-pinrow svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.ap-shg { border-radius: var(--r-tile); }
.ap-shg[hidden] { display: none; }
.ap-shg > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--r-tile); cursor: pointer; font-weight: 650; color: var(--ink); }
.ap-shg > summary::-webkit-details-marker { display: none; }
.ap-shg > summary span { flex: 1; }
.ap-shg > summary .rg-car { opacity: 1; transform: rotate(-90deg); }
.ap-shg[open] > summary .rg-car { transform: none; }
.ap-shg ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 20px; display: grid; gap: 2px; }
.ap-shg ul a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: var(--r-tile); color: var(--ink-2); font-weight: 600; font-size: 15px; text-decoration: none; }
.ap-shg ul a[aria-current="page"] { background: var(--bg); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.ap-shg ul a .cnt { margin-left: auto; }
.ap-shacct { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--hair); }
.sheet .ap-roles { margin: 6px 0 10px; }

/* account menu: role switch + prefs */
.ap-am { width: min(340px, calc(100vw - 2 * var(--gut))); max-height: calc(100dvh - var(--hdr) - var(--stripe-h) - 24px); overflow-y: auto; }
.ap-roles { margin: 0 4px 8px; padding: 0; border: 0; min-width: 0; }
.ap-roles legend { padding: 4px 10px 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.ap-rolelist { display: grid; gap: 1px; }
.ap-rchk { position: relative; display: block; cursor: pointer; }
.ap-rchk input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ap-rchk > span { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); }
.ap-rchk > span::before { content: ""; grid-row: 1 / 3; align-self: center; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--sf); }
.ap-rchk input:checked + span::before { box-shadow: inset 0 0 0 5px var(--accent); }
.ap-rchk input:focus-visible + span { outline: 2px solid var(--acc-ring); outline-offset: -2px; }
.ap-rchk:hover > span { background: var(--bg); }
.ap-rchk b { font-size: 14px; line-height: 1.3; }
.ap-rchk small { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.ap-prefs { display: grid; gap: 8px; margin: 0 4px 8px; padding: 10px 10px 12px; border-radius: var(--r-tile); background: var(--bg); }
.ap-pref { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.ap-pref .seg button { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.ap-tzsel { width: auto; min-height: 34px; padding: 4px 34px 4px 10px; font-size: 13.5px; background-position: right 9px center; }
.ap-am-k { margin-left: auto; padding: 2px 7px; border-radius: 6px; background: var(--bg); color: var(--ink-3); font-weight: 700; }
.ap-ftr-k { font-size: 14px; color: var(--ink-2); font-weight: 550; text-decoration: none; }

/* ---------- 3. page header + sections ---------- */
.main { padding-top: 26px; }
.ap-ph { margin-bottom: 20px; align-items: flex-end; }
.ap-ph h1 { font-size: clamp(24px, 2.1vw, 30px); letter-spacing: -.03em; line-height: 1.15; }
.ap-ph .ph-sub { margin-top: 6px; font-size: 15px; max-width: 46rem; }
.ap-crumbs { margin-bottom: 10px; font-size: 13.5px; }
.ap-h1row { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ap-pinbtn { color: var(--ink-3); width: 36px; height: 36px; }
.ap-pinbtn[aria-pressed="true"] { color: #D9A514; }
html[data-mode="dark"] .ap-pinbtn[aria-pressed="true"] { color: #E4D353; }
.ap-pinbtn svg { width: 18px; height: 18px; }
.ap-sec { margin-top: 28px; }
.ap-sec:first-child { margin-top: 0; }
.ap-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 12px; }
.ap-sec-h h2 { margin: 0; font-size: 16.5px; letter-spacing: -.015em; }
.ap-sec-h p { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.ap-card { background: var(--sf); border-radius: var(--r-card); box-shadow: var(--e1); padding: 16px 18px; min-width: 0; }
.ap-card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 12px; }
.ap-card-h h2, .ap-card-h h3 { margin: 0; font-size: 15.5px; letter-spacing: -.01em; }
.ap-card-h p { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
.ap-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.ap-toolbar .search { flex: 1 1 240px; max-width: 380px; }
.ap-toolbar .search .inp { min-height: 40px; }
.ap-toolbar .grow { flex: 1 1 auto; }
.ap-toolbar .sel { width: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
.ap-toolbar .btn { min-height: 40px; padding-top: 0; padding-bottom: 0; }
.ap-qtabs { margin-bottom: 14px; }
.ap-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--r-tile); background: var(--bg); color: var(--ink-2); font-size: 13.5px; }
.ap-note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--ink-3); }
.ap-sample { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 5px; background: var(--bg); color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: .01em; vertical-align: middle; white-space: nowrap; }

/* ---------- 4. status chips, tags, avatars ---------- */
.ap-st { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 8px 0 7px; border-radius: 6px; font-size: 12px; font-weight: 650; line-height: 1; white-space: nowrap;
  background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.ap-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; flex: none; }
.ap-st[data-tone="ok"] { background: var(--evt-soft); color: var(--evt-ink); box-shadow: none; }
.ap-st[data-tone="warn"] { background: var(--disc-soft); color: var(--disc-ink); box-shadow: none; }
.ap-st[data-tone="bad"] { background: var(--alert-soft); color: var(--alert-ink); box-shadow: none; }
.ap-st[data-tone="info"] { background: var(--unread-soft); color: var(--unread-ink); box-shadow: none; }
.ap-st[data-tone="off"] { color: var(--ink-3); }
.ap-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ap-av[data-area] { background: linear-gradient(145deg, var(--id-tl), var(--id-td)); color: var(--id-on); }
html[data-mode="dark"] .ap-av[data-area] { background: linear-gradient(145deg, var(--id-da), var(--id-db)); color: var(--id-don); }
.ap-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ap-t td .ap-who { min-width: 180px; max-width: 320px; }
.ap-t td.m-title .ap-who { min-width: 160px; }
.ap-who-t { min-width: 0; display: grid; }
.ap-who-t a, .ap-who-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-who-t small { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.ap-rowlink { color: var(--ink); font-weight: 650; text-decoration: none; }
.ap-rowlink:hover { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.ap-mono { font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
.ap-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: -.01em; }
.ap-muted { color: var(--ink-3); }
.ap-strong { color: var(--ink); font-weight: 650; }
.ap-copy { width: 28px; height: 28px; color: var(--ink-3); vertical-align: middle; }
.ap-copy svg { width: 15px; height: 15px; }
.ap-itile { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--a-soft, var(--bg)); color: var(--a-ink, var(--ink-2)); }
.ap-itile svg { width: 18px; height: 18px; }

/* ---------- 5. table ---------- */
.ap-tbl { container: tbl / inline-size; min-width: 0; }
.ap-tw { position: relative; background: var(--sf); border-radius: var(--r-card); box-shadow: var(--e1); max-width: 100%; }
.ap-tw.is-scroll { overflow-x: auto; }
.ap-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ap-t thead th { position: sticky; top: calc(var(--hdr) + var(--stripe-h)); z-index: 3; height: var(--th-h); padding: 0 var(--cell-x); background: var(--sf); box-shadow: inset 0 -1px 0 var(--hair);
  text-align: left; font-size: 12.5px; font-weight: 650; color: var(--ink-3); white-space: nowrap; vertical-align: middle; }
.ap-tw.is-scroll .ap-t thead th { position: static; }
.ap-t thead th:first-child { border-top-left-radius: var(--r-card); }
.ap-t thead th:last-child { border-top-right-radius: var(--r-card); }
.ap-t th.num, .ap-t td.num { text-align: right; }
.ap-sort { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.ap-sort:hover { color: var(--ink); }
th.num .ap-sort { flex-direction: row-reverse; }
.ap-sortic { width: 13px; height: 13px; opacity: 0; transition: opacity var(--dur-fast); }
.ap-sort:hover .ap-sortic, .ap-sort:focus-visible .ap-sortic { opacity: .5; }
.ap-sortic.on { opacity: 1 !important; color: var(--ink); }
.ap-t th[aria-sort] { color: var(--ink); }
.ap-t td time, .ap-t td > span[title] { white-space: nowrap; }
.ap-t td { height: var(--row-h); padding: 6px var(--cell-x); border-bottom: 1px solid var(--hair); color: var(--ink-2); font-weight: 550; vertical-align: middle; }
.ap-t tbody tr:last-child td { border-bottom: 0; }
.ap-t td b, .ap-t td strong { color: var(--ink); }
.ap-t td small { color: var(--ink-3); }
.ap-t tbody tr:hover td { background: var(--hover); }
.ap-t tbody tr.is-link { cursor: pointer; }
.ap-t tbody tr.is-sel td { background: var(--acc-soft); }
.ap-t tbody tr.is-open td { background: var(--bg); }
.ap-t tbody tr.is-open td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ap-t tbody tr.ap-msgrow:hover td, .ap-t tbody tr.ap-skrow:hover td { background: none; }
.ap-t tbody tr.is-dim td { color: var(--ink-3); }
.ap-t .c-sel { width: 46px; padding: 0 0 0 8px; }
.ap-t .c-end { width: 44px; padding: 0 8px 0 0; text-align: right; vertical-align: middle; line-height: 0; }
.ap-chev { display: inline-grid; vertical-align: middle; color: var(--ink-3); opacity: .35; transition: opacity var(--dur-fast), transform var(--dur-fast); }
.ap-chev svg { width: 16px; height: 16px; }
.ap-t tbody tr:hover .ap-chev { opacity: 1; transform: translateX(2px); }
.ap-colbtn { width: 30px; height: 30px; color: var(--ink-3); }
.ap-colbtn svg { width: 16px; height: 16px; }
.ap-rowmenu { color: var(--ink-3); }
.ap-cell2 { display: grid; min-width: 0; }
.ap-cell2 > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-cell2 small { font-size: 12.5px; margin-top: 1px; }
.ap-clip { display: block; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-clip.w { max-width: 40ch; }
/* checkbox */
.ap-cb { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; cursor: pointer; vertical-align: middle; }
.ap-cb input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ap-cb > span { width: 18px; height: 18px; border-radius: 5px; background: var(--sf) no-repeat center / 13px; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background-color var(--dur-fast), box-shadow var(--dur-fast); }
.ap-cb input:checked + span, .ap-cb input:indeterminate + span { background-color: var(--accent); box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ap-cb input:indeterminate + span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
html[data-mode="dark"] .ap-cb input:checked + span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2328' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
html[data-mode="dark"] .ap-cb input:indeterminate + span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2328' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.ap-cb input:focus-visible + span { outline: 2px solid var(--acc-ring); outline-offset: 2px; }
.ap-cb input:disabled + span { opacity: .45; }
.ap-cbrow { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px 0 2px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; }
.ap-cbrow:hover { background: var(--bg); }
.ap-cbrow small { color: var(--ink-3); font-weight: 550; font-size: 12px; }
/* skeleton + messages */
.ap-sk { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--sk) 0, var(--sk2) 40%, var(--sk) 80%) 0 0 / 300% 100%; animation: apShim 1.3s linear infinite; }
.ap-sk.sm { height: 8px; margin-top: 6px; opacity: .7; }
.ap-sk.sq { width: 18px; height: 18px; border-radius: 5px; margin-left: 6px; }
@keyframes apShim { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.ap-tmsg { display: grid; justify-items: center; gap: 8px; padding: clamp(28px, 6cqi, 56px) 20px; text-align: center; }
.ap-tmsg b { font-size: 16px; color: var(--ink); }
.ap-tmsg p { margin: 0; max-width: 28rem; color: var(--ink-3); font-size: 14px; }
.ap-tmsg .empty-ico { margin-bottom: 2px; }
.ap-tmsg.is-err .empty-ico { background: var(--disc-soft); color: var(--disc-ink); }
/* footer + pager */
.ap-tfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 4px 0; min-height: 46px; }
.ap-tcount { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ap-pager { display: flex; align-items: center; gap: 6px; }
.ap-tfoot.is-single .ap-pager { visibility: hidden; }
.ap-psize { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.ap-psize .sel { width: auto; min-height: 34px; padding: 4px 30px 4px 10px; font-size: 13px; background-position: right 8px center; background-size: 14px; }
.ap-pager .ibtn:disabled { opacity: .4; cursor: default; }
/* column chooser */
.ap-colpop { position: absolute; z-index: 60; width: 270px; max-height: min(70vh, 520px); overflow-y: auto; padding: 8px; border-radius: var(--r-pop); background: var(--raise); box-shadow: var(--e3); }
html[data-mode="dark"] .ap-colpop { --sf: #373C42; --bg: #3E444A; }
.ap-colpop-h { margin: 4px 8px 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.ap-colpop ul { list-style: none; margin: 0; padding: 0; }
.ap-colpop-f { margin: 6px 8px 4px; padding-top: 8px; border-top: 1px solid var(--hair); font-size: 13px; }
.ap-colpop-f .linkish { font-weight: 650; color: var(--ink-2); }
/* bulk bar */
.ap-bulk { position: fixed; left: 50%; bottom: 22px; z-index: 95; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 16px; border-radius: 14px;
  background: var(--toast-bg); color: #FFFFFF; box-shadow: 0 0 0 1px var(--toast-ring), 0 18px 40px -16px rgba(0,0,0,.45); transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur); }
.ap-bulk.in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.ap-bulk b { font-size: 14px; font-variant-numeric: tabular-nums; }
.ap-bulk .linkish { color: #FFFFFF; font-size: 13.5px; }
.ap-bulk-a { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-bbtn, .ap-bdanger { border: 0; color: #FFFFFF; background: rgba(255,255,255,.12); }
.ap-bbtn:hover { background: rgba(255,255,255,.2); color: #FFFFFF; }
.ap-bdanger { background: rgba(232,78,78,.28); }
.ap-bdanger:hover { background: rgba(232,78,78,.42); color: #FFFFFF; }
.ap-bulk [aria-disabled="true"] { opacity: .55; }
.ap-bclose { color: #FFFFFF; }
.ap-bclose:hover { background: rgba(255,255,255,.14); color: #FFFFFF; }
/* column priorities (wide → narrow); user-forced columns stay and the wrapper scrolls */
@container tbl (max-width: 1080px) { .ap-t .pri-5:not(.force) { display: none; } }
@container tbl (max-width: 900px) { .ap-t .pri-4:not(.force) { display: none; } }
@container tbl (max-width: 760px) { .ap-t .pri-3:not(.force) { display: none; } }
/* phones / narrow containers: rows become cards */
@container tbl (max-width: 620px) {
  .ap-tw { overflow: hidden; }
  .ap-t, .ap-t tbody { display: block; }
  .ap-t thead { display: none; }
  .ap-t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; min-height: 60px; padding: 11px 14px; border-bottom: 1px solid var(--hair); }
  .ap-t tbody tr:last-child { border-bottom: 0; }
  .ap-t tbody tr.ap-msgrow, .ap-t tbody tr.ap-skrow { display: block; }
  .ap-t td { display: none; height: auto; padding: 0; border: 0; background: none !important; }
  .ap-t tr.ap-msgrow td { display: block; }
  .ap-t tr.ap-skrow td.m-title, .ap-t tr.ap-skrow td.m-sub { display: block; padding: 4px 0; }
  .ap-t td.m-title { display: block; grid-column: 1; color: var(--ink); font-weight: 650; min-width: 0; }
  .ap-t td.m-sub { display: block; grid-column: 1; font-size: 13px; color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ap-t td.m-meta { display: block; grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); min-width: 0; }
  .ap-t td.m-meta::before { content: attr(data-label) " · "; font-weight: 600; }
  .ap-t td.m-end { display: block; grid-column: 2; grid-row: 1 / span 2; text-align: right; justify-self: end; }
  .ap-t td.m-lead { display: block; }
  .ap-t td .ap-who, .ap-t td.m-title .ap-who { min-width: 0; max-width: none; }
  /* row actions stay reachable on phones: the ⋯ button sits top-right of the card (≥44px target) */
  .ap-t tbody tr:has(.ap-rowmenu) { grid-template-columns: minmax(0, 1fr) auto 44px; }
  .ap-t td.c-end:has(.ap-rowmenu) { display: block; grid-column: 3; grid-row: 1 / span 2; align-self: center; width: auto; padding: 0; }
  .ap-t td.c-end .ap-rowmenu { width: 44px; height: 44px; }
  .ap-t td.c-sel { display: none; }
  .ap-t tbody tr.is-open { box-shadow: inset 3px 0 0 var(--accent); }
  .ap-t tbody tr.is-sel { background: var(--acc-soft); }
  .ap-t tbody tr:hover { background: var(--hover); }
  .ap-t td.num { text-align: right; }
  .ap-psize span { display: none; }
}

/* ---------- 6. KPIs, charts, crosstab ---------- */
.ap-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.ap-kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ap-kpi { position: relative; display: grid; align-content: start; gap: 2px; min-width: 0; padding: 14px 16px 12px; border: 0; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--e1);
  color: var(--ink); text-align: left; font: inherit; text-decoration: none; }
button.ap-kpi, a.ap-kpi { cursor: pointer; transition: box-shadow var(--dur-fast); }
button.ap-kpi:hover, a.ap-kpi:hover { box-shadow: var(--e2); }
.ap-kpi[aria-pressed="true"] { box-shadow: var(--e1), inset 0 0 0 1.5px var(--accent); }
.ap-kpi[aria-pressed="true"] .ap-spark path { stroke: var(--c1); opacity: 1; }
.ap-kpi[aria-pressed="true"] .ap-spark path.ap-spark-a { fill: var(--c1); opacity: .08; }
.ap-kpi-l { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--ink-3); }
.ap-kpi-l .ap-sample { margin-left: auto; }
.ap-kpi-v { font-size: clamp(21px, 2vw, 26px); font-weight: 750; letter-spacing: -.03em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-kpi-d { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 20px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.ap-delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 5px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.ap-delta[data-good] { box-shadow: none; }
.ap-delta svg { width: 13px; height: 13px; }
.ap-delta[data-good="1"] { background: var(--good-soft); color: var(--good-ink); }
.ap-delta[data-good="0"] { background: var(--bad-soft); color: var(--bad-ink); }
.ap-kpi .ap-spark { display: block; width: 100%; height: 26px; margin-top: 8px; }
.ap-spark path { fill: none; stroke: var(--ink-3); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .7; }
.ap-spark path.ap-spark-a { stroke: none; fill: var(--ink-3); opacity: .05; }
.ap-spark path.is-prev { display: none; }
.ap-chart { position: relative; width: 100%; min-width: 0; }
.ap-ch-plot { width: 100%; height: 100%; border-radius: 8px; outline: none; }
.ap-ch-plot:focus-visible { box-shadow: 0 0 0 2px var(--acc-ring); }
.ap-ch-plot svg { display: block; overflow: visible; }
/* the DS sets svg { stroke: currentColor; stroke-width: 2 } for line icons: charts opt out */
.ap-ch-plot svg, .ap-ch-plot svg text, .ap-ch-plot svg rect, .ap-donut-svg text { stroke: none; }
.ap-ch-plot svg text, .ap-donut-svg text { paint-order: normal; }
.ap-ch-band { fill: var(--hover); stroke: none; }
.ap-ch-bar { stroke: none; }
.ap-ch-grid line { stroke: var(--hair); stroke-width: 1; }
.ap-ch-yl, .ap-ch-xl { fill: var(--ink-3); font: 600 11.5px var(--font); font-variant-numeric: tabular-nums; }
.ap-ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ap-ch-line.is-prev { stroke-width: 1.3; stroke-dasharray: 3 4; opacity: .7; }
.ap-ch-area { opacity: .1; }
.ap-ch-bar.is-prev { opacity: .55; }
.ap-ch-band { fill: var(--hover); }
.ap-ch-cross { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
.ap-ch-dot { fill: var(--sf); stroke-width: 2.4; }
/* line opt-ins (APChart.line markers / series cls / areaFade): a primary line, thinner secondary lines, point markers */
.ap-ch-plot.is-line { touch-action: pan-y pinch-zoom; }
.ap-ch-line.is-main { stroke-width: 2.5; }
.ap-ch-line.is-sec { stroke-width: 1.6; }
.ap-ch-marks circle { fill: var(--sf); stroke-width: 1.5; }
.ap-ch-marks.is-dot circle { stroke: var(--sf); stroke-width: 1.5; }
.ap-ch-area.is-fade { opacity: 1; }
.ap-ch-grad .s0 { stop-opacity: .16; }
.ap-ch-grad .s1 { stop-opacity: 0; }
html[data-mode="dark"] .ap-ch-grad .s0 { stop-opacity: .13; }
.ap-ch-tip { position: absolute; z-index: 5; min-width: 150px; max-width: 260px; padding: 9px 11px; border-radius: 10px; background: var(--raise); box-shadow: var(--e3); font-size: 12.5px; pointer-events: none; }
html[data-mode="dark"] .ap-ch-tip { background: #3E444A; }
.ap-ch-tip b { display: block; margin-bottom: 4px; font-size: 12.5px; }
.ap-ch-tip.is-compact { min-width: 0; padding: 7px 9px; font-size: 12px; }
.ap-ch-tip.is-compact .ap-tip-r { line-height: 1.5; }
.ap-tip-r { display: flex; align-items: center; gap: 7px; color: var(--ink-2); font-weight: 600; line-height: 1.6; }
.ap-tip-r i { width: 9px; height: 3px; border-radius: 2px; flex: none; }
.ap-tip-r i.is-prev { height: 0; border-top: 2px dashed var(--cprev); background: none !important; }
.ap-tip-r em { margin-left: auto; padding-left: 10px; font-style: normal; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-tip-tot { border-top: 1px solid var(--hair); margin-top: 3px; padding-top: 3px; }
.ap-legend-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.ap-legend-row span { display: inline-flex; align-items: center; gap: 7px; }
.ap-legend-row i { width: 14px; height: 3px; border-radius: 2px; }
.ap-legend-row i.is-prev { width: 20px; height: 0; border-top: 2px dashed var(--cprev); background: none !important; }
.ap-donut { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: center; }
.ap-donut-svg { width: 128px; height: 128px; }
.ap-donut-track { stroke: var(--bg); }
.ap-donut-v { fill: var(--ink); font: 750 19px var(--font); font-variant-numeric: tabular-nums; }
.ap-donut-l { fill: var(--ink-3); font: 600 10.5px var(--font); }
.ap-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.ap-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 38px; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ap-legend li i { width: 10px; height: 10px; border-radius: 3px; }
.ap-legend li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-legend li b { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 13px; }
.ap-legend li small { color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
@container main (max-width: 420px) { .ap-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; } .ap-legend { width: 100%; } }
/* horizontal bar list (top pages, countries, browsers) */
.ap-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ap-hbars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.ap-hbars li b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ap-hbars li > i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.ap-hbars li > i > i { display: block; height: 100%; border-radius: 3px; background: var(--c2); }
/* crosstab (subscriptions by product × billing) */
.ap-xt { width: 100%; border-collapse: separate; border-spacing: 4px; font-variant-numeric: tabular-nums; }
.ap-xt th { padding: 4px 8px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); text-align: right; white-space: nowrap; }
.ap-xt th[scope="row"] { text-align: left; color: var(--ink); font-size: 14px; }
.ap-xt th[scope="row"] .ap-itile { width: 26px; height: 26px; border-radius: 7px; margin-right: 8px; vertical-align: middle; }
.ap-xt th[scope="row"] .ap-itile svg { width: 15px; height: 15px; }
.ap-xt td { padding: 0; }
.ap-xt td a, .ap-xt td span { display: block; padding: 10px 12px; border-radius: 9px; text-align: right; color: var(--ink); font-size: 15px; font-weight: 650; text-decoration: none; }
.ap-xt td a:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.ap-xt td.tot a, .ap-xt td.tot span, .ap-xt tr.tot td a, .ap-xt tr.tot td span { background: var(--bg); color: var(--ink); font-weight: 750; }
.ap-xt tr.tot th { color: var(--ink-3); font-size: 12.5px; }
.ap-xt .grand a, .ap-xt .grand span { background: var(--bg) !important; color: var(--ink) !important; font-weight: 800; }
html[data-mode="dark"] .ap-xt .grand a, html[data-mode="dark"] .ap-xt .grand span { background: var(--bg) !important; color: var(--ink) !important; }

/* ---------- 7. date range control ---------- */
.ap-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ap-rgbtn { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--sf); box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink); font: 600 14px/1.2 var(--font); cursor: pointer; max-width: 100%; }
.ap-rgbtn:hover, .ap-rgbtn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--ink-3); }
.ap-rgbtn > svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.ap-rgl { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.ap-rgl b { font-weight: 650; }
.ap-rgl span { color: var(--ink-3); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .ap-rgl { flex-wrap: wrap; white-space: normal; row-gap: 0; text-align: left; } .ap-rgbtn { height: auto; min-height: 44px; padding-top: 6px; padding-bottom: 6px; } }
.ap-rgcar { width: 15px !important; height: 15px !important; }
.ap-rgpop { position: absolute; z-index: 70; display: grid; grid-template-columns: 200px 230px; gap: 8px; padding: 8px; border-radius: var(--r-pop); background: var(--raise); box-shadow: var(--e3); }
html[data-mode="dark"] .ap-rgpop { --sf: #373C42; --bg: #3E444A; --fld: #3E444A; }
.ap-rgpre { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.ap-rgpre button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink);
  font: 600 14px/1 var(--font); cursor: pointer; text-align: left; }
.ap-rgpre button:hover, .ap-rgpre button:focus-visible { background: var(--bg); outline: none; }
.ap-rgpre button svg { width: 15px; height: 15px; opacity: 0; color: var(--accent); }
.ap-rgpre button[aria-selected="true"] { background: var(--bg); }
.ap-rgpre button[aria-selected="true"] svg { opacity: 1; }
.ap-rgcus { display: grid; align-content: start; gap: 10px; padding: 8px 10px; border-left: 1px solid var(--hair); }
.ap-rgcus-h { margin: 0; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.ap-rgcus .inp { min-height: 40px; padding: 8px 10px; font-size: 14px; }
.ap-rgcus .lbl { font-size: 13px; }
.ap-cmp { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.ap-int .seg { }
.ap-int button { min-height: 32px; }
.ap-tzhint { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
@media (max-width: 560px) { .ap-rgpop { grid-template-columns: minmax(0, 1fr); left: 8px !important; right: 8px; } .ap-rgcus { border-left: 0; border-top: 1px solid var(--hair); } .ap-cmp-l { display: none; } .ap-tzhint { display: none; } }

/* ---------- 8. drawer ---------- */
.ap-drawer { position: fixed; z-index: 85; top: calc(var(--hdr) + var(--stripe-h)); right: 0; bottom: 0; width: min(500px, 100vw); display: flex; flex-direction: column; background: var(--sf);
  box-shadow: -1px 0 0 var(--hair), -24px 0 48px -28px rgba(31,35,40,.35); transform: translateX(24px); opacity: 0; visibility: hidden; outline: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur), visibility 0s linear var(--dur); }
.ap-drawer.in { transform: none; opacity: 1; visibility: visible; transition: transform var(--dur) var(--ease), opacity var(--dur), visibility 0s; }
html[data-mode="dark"] .ap-drawer { box-shadow: -1px 0 0 rgba(255,255,255,.08), -24px 0 48px -24px rgba(0,0,0,.8); }
.ap-dscrim { display: none; }
.ap-dtop { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 16px 14px 14px 22px; border-bottom: 1px solid var(--hair); }
.ap-dtop-t { flex: 1; min-width: 0; }
.ap-dkick { margin: 0 0 3px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.ap-dtop h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; line-height: 1.25; overflow-wrap: anywhere; }
.ap-dtop-a { flex: none; display: flex; gap: 6px; padding-top: 2px; }
.ap-dtop-a .btn svg { width: 15px; height: 15px; }
.ap-dbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 24px; }
.ap-dbody > * + * { margin-top: 18px; }
.ap-dfoot { flex: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: var(--sf); }
.ap-dfoot[hidden] { display: none; }
.ap-dh { margin: 0 0 8px; font-size: 13px; font-weight: 650; color: var(--ink-3); }
.ap-kv { grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 9px 18px; font-size: 14px; }
.ap-kv dd { overflow-wrap: anywhere; }
@media (max-width: 999px) {
  .ap-dscrim { display: block; position: fixed; inset: 0; z-index: 84; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--dur); }
  body.ap-dopen .ap-dscrim { opacity: 1; pointer-events: auto; }
}
@media (max-width: 600px) {
  .ap-drawer { top: 0; width: 100vw; z-index: 92; transform: translateY(24px); }
  .ap-dscrim { z-index: 91; }
  .ap-dtop { padding-top: calc(14px + env(safe-area-inset-top)); }
  body.ap-dopen { overflow: hidden; }
}

/* ---------- 9. command palette ---------- */
dialog.ap-pal { width: min(660px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - 24px)); margin: max(8vh, 12px) auto auto; padding: 0; border: 0; border-radius: 16px; background: var(--raise); color: var(--ink); box-shadow: var(--e3); overflow: hidden; }
html[data-mode="dark"] dialog.ap-pal { background: #33383E; --bg: #3E444A; --hair: rgba(255,255,255,.1); }
dialog.ap-pal::backdrop { background: rgba(31,35,40,.42); }
html[data-mode="dark"] dialog.ap-pal::backdrop { background: rgba(0,0,0,.62); }
dialog.ap-pal[open] { animation: dsDlgIn .2s var(--ease); }
.ap-pal-in { display: flex; flex-direction: column; max-height: inherit; }
.ap-pal-q { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 18px; min-height: 58px; border-bottom: 1px solid var(--hair); }
.ap-pal-q > svg { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.ap-pal-q input { flex: 1; min-width: 0; height: 56px; border: 0; background: none; color: var(--ink); font: 500 16.5px/1 var(--font); outline: none; }
.ap-pal-q input::placeholder { color: var(--ph); }
.ap-pal-q input::-webkit-search-cancel-button { display: none; }
.ap-pal-q kbd, .ap-pal-foot kbd, .ap-short kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
.ap-pal-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 8px; }
.ap-pal-gh { margin: 10px 10px 4px; font-size: 12px; font-weight: 650; color: var(--ink-3); }
.ap-pal-it { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 7px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; scroll-margin: 8px; }
.ap-pal-it[aria-selected="true"] { background: var(--bg); }
.ap-pal-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--bg); color: var(--ink-2); }
.ap-pal-it[aria-selected="true"] .ap-pal-ic { background: var(--sf); box-shadow: inset 0 0 0 1px var(--line); }
.ap-pal-ic svg { width: 17px; height: 17px; }
.ap-pal-it .av { width: 32px; height: 32px; font-size: 11px; }
.ap-pal-t { flex: 1; min-width: 0; display: grid; }
.ap-pal-t b { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-pal-t small { font-size: 12.5px; color: var(--ink-3); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-pal-t mark { background: rgba(var(--heat), .5); color: inherit; border-radius: 3px; padding: 0 1px; }
html[data-mode="dark"] .ap-pal-t mark { background: rgba(var(--heat), .28); }
.ap-pal-k { flex: none; font-size: 12px; font-weight: 650; color: var(--ink-3); }
.ap-pal-empty { display: grid; gap: 4px; padding: 30px 16px; text-align: center; }
.ap-pal-empty span { font-size: 13.5px; color: var(--ink-3); }
.ap-pal-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 16px; border-top: 1px solid var(--hair); font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.ap-pal-foot span { display: inline-flex; align-items: center; gap: 4px; }
.ap-pal-foot a { margin-left: auto; color: var(--acc-ink); font-weight: 700; text-decoration: none; }
.ap-pal-foot a:hover { text-decoration: underline; }
.ap-pal-foot a[hidden] { display: none; }
@media (max-width: 600px) {
  dialog.ap-pal { width: 100vw; max-width: 100vw; margin: 0; border-radius: 0 0 16px 16px; max-height: 88dvh; }
  .ap-pal-foot span { display: none; }
}
.ap-short { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ap-short li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.ap-short li:last-child { border-bottom: 0; }
.ap-keys { display: inline-flex; gap: 4px; }

/* ---------- 10. detail pages ---------- */
.ap-idh { position: relative; background: var(--sf); border-radius: var(--r-panel); box-shadow: var(--e1); margin-bottom: 18px; container: idh / inline-size; }
.ap-idh-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 18px; align-items: center; padding: 20px 22px 16px; }
.ap-idh .av.av-xl, .ap-idh .ap-idtile { width: 60px; height: 60px; font-size: 20px; border-radius: 50%; }
.ap-idh .ap-idtile { border-radius: 16px; display: grid; place-items: center; }
.ap-idh .ap-idtile svg { width: 28px; height: 28px; }
.ap-idh h1 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.03em; line-height: 1.15; overflow-wrap: anywhere; }
.ap-idh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 6px 0 0; font-size: 13.5px; font-weight: 550; color: var(--ink-3); }
.ap-idh-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ap-idh-meta svg { width: 15px; height: 15px; flex: none; }
.ap-idh-meta a { color: var(--ink-2); font-weight: 650; text-decoration: none; }
.ap-idh-meta a:hover { text-decoration: underline; }
.ap-idh-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ap-idh-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ap-idh .tabs { padding: 0 8px; }
.ap-idh .tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
@container idh (min-width: 760px) { .ap-idh .tabs { -webkit-mask-image: none; mask-image: none; } }
@container idh (max-width: 760px) { .ap-idh-in { grid-template-columns: auto minmax(0, 1fr); } .ap-idh-act { grid-column: 1 / -1; justify-content: flex-start; } }
@container idh (max-width: 480px) { .ap-idh-in { padding: 16px 16px 12px; } .ap-idh .av.av-xl, .ap-idh .ap-idtile { width: 48px; height: 48px; font-size: 16px; } .ap-idh-act .btn { flex: 1 1 auto; } }
.ap-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@container main (min-width: 980px) { .ap-cols { grid-template-columns: minmax(0, 1fr) 340px; } .ap-cols > .ap-side { position: sticky; top: calc(var(--hdr) + var(--stripe-h) + 16px); } }
.ap-side { display: grid; gap: 14px; min-width: 0; }
.ap-stack { display: grid; gap: 14px; min-width: 0; }
.ap-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.ap-mini > div { padding: 11px 13px; border-radius: var(--r-tile); background: var(--sf); box-shadow: var(--e1); min-width: 0; }
.ap-mini small { display: block; font-size: 12px; font-weight: 650; color: var(--ink-3); }
.ap-mini b { display: block; margin-top: 2px; font-size: 18px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-mini span { display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.ap-mini span.ap-sample { display: inline-flex; margin-left: 4px; }
/* activity timeline */
.ap-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.ap-tl > li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 0 0 16px; }
.ap-tl > li::before { content: ""; position: absolute; left: 13.5px; top: 28px; bottom: 0; width: 1px; background: var(--line); }
.ap-tl > li:last-child::before { display: none; }
.ap-tl-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); color: var(--ink-3); box-shadow: 0 0 0 3px var(--sf); }
.ap-tl-ic svg { width: 14px; height: 14px; }
.ap-tl-ic[data-tone="ok"] { background: var(--evt-soft); color: var(--evt-ink); }
.ap-tl-ic[data-tone="bad"] { background: var(--alert-soft); color: var(--alert-ink); }
.ap-tl-ic[data-tone="info"] { background: var(--unread-soft); color: var(--unread-ink); }
.ap-tl-ic[data-tone="warn"] { background: var(--disc-soft); color: var(--disc-ink); }
.ap-tl b { display: block; font-size: 14px; font-weight: 650; color: var(--ink); line-height: 1.35; }
.ap-tl p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-2); }
.ap-tl small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-3); font-weight: 550; }
.ap-tl .is-undone b { text-decoration: line-through; color: var(--ink-3); }
/* notes */
.ap-noteitem { padding: 10px 12px; border-radius: var(--r-tile); background: var(--env-soft); color: var(--ink); font-size: 14px; }
.ap-noteitem small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
html[data-mode="dark"] .ap-noteitem { background: #3F4036; }
/* conversation (tickets, chat) */
.ap-thread { display: grid; gap: 14px; }
.ap-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.ap-msg-b { min-width: 0; max-width: 72ch; padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: var(--sf); box-shadow: var(--e1); }
.ap-msg-b p { margin: 0; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-msg-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.ap-msg-h b { color: var(--ink); font-size: 14px; }
.ap-msg.is-staff .ap-msg-b { background: var(--acc-soft); box-shadow: none; }
.ap-msg.is-note .ap-msg-b { background: var(--env-soft); box-shadow: none; border-radius: 12px; }
html[data-mode="dark"] .ap-msg.is-note .ap-msg-b { background: #3F4036; }
.ap-msg .av { width: 36px; height: 36px; }
.ap-composer { background: var(--sf); border-radius: var(--r-card); box-shadow: var(--e1); padding: 6px; }
.ap-composer .seg { margin: 4px 4px 6px; }
.ap-composer textarea { width: 100%; min-height: 110px; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--bg); color: var(--ink); font: 500 15px/1.5 var(--font); resize: vertical; }
.ap-composer textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--acc-ring); }
.ap-composer.is-note textarea { background: var(--env-soft); }
html[data-mode="dark"] .ap-composer.is-note textarea { background: #3F4036; }
.ap-composer-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 6px 4px; }
.ap-composer-f .grow { flex: 1; }
.ap-saved { display: inline-flex; align-items: center; gap: 5px; min-width: 78px; font-size: 13px; font-weight: 650; color: var(--good-ink); opacity: 0; transition: opacity .2s; }
.ap-saved svg { width: 15px; height: 15px; }
.ap-saved.on { opacity: 1; }
.ap-saved.is-draft { opacity: 1; color: var(--ink-3); }
/* evidence checklist */
.ap-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ap-ev label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 6px; border-radius: var(--r-tile); background: var(--bg); cursor: pointer; font-size: 14px; font-weight: 600; }
.ap-ev label small { margin-left: auto; color: var(--ink-3); font-weight: 600; font-size: 12.5px; }
.ap-progress { height: 6px; border-radius: 3px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ap-progress i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width var(--dur); }

/* ---------- 11. overview ---------- */
.ap-attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.ap-attn a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 14px 14px 14px 16px; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--e1); color: var(--ink); text-decoration: none; transition: box-shadow var(--dur-fast); min-height: 76px; }
.ap-attn a:hover { box-shadow: var(--e2); }
.ap-attn .ap-itile { grid-row: 1 / span 2; width: 38px; height: 38px; }
.ap-attn b { font-size: 22px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ap-attn b span { font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--ink-2); margin-left: 6px; }
.ap-attn small { grid-column: 2; font-size: 12.5px; color: var(--ink-3); font-weight: 600; line-height: 1.35; }
.ap-attn .ap-itile { --a-soft: var(--bg); --a-ink: var(--ink-2); }
.ap-attn a.is-urgent .ap-itile { --a-soft: var(--alert-soft); --a-ink: var(--alert-ink); }
.ap-attn .ap-chev { grid-row: 1 / span 2; grid-column: 3; opacity: .5; }
.ap-attn a:hover .ap-chev { opacity: 1; transform: translateX(2px); }
.ap-ovgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container main (min-width: 1040px) { .ap-ovgrid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
/* Overview · Active subscriptions: 12-month line graph (total + toggleable product lines), today's figure, list links */
.ap-subs-sec { margin-top: 40px; } /* its own section after "Needs attention" (the card's h2 is the section heading) */
.ap-subs-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin: -2px 0 8px; }
.ap-subs-now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.ap-subs-big { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink); text-decoration: none; border-radius: 8px; }
.ap-subs-big b { font-size: 28px; font-weight: 750; letter-spacing: -.03em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ap-subs-big span { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.ap-subs-big:hover span { color: var(--ink); text-decoration: underline; }
.ap-subs-d { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.ap-subs-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ap-subs-lg button { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--sf); color: var(--ink-2); font: 600 12.5px/1 var(--font); white-space: nowrap; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); }
/* on: a faint tint of the line's own colour; off: plain outline, struck-through label, grey swatch */
.ap-subs-lg button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
.ap-subs-lg button[aria-pressed="true"]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--sw); opacity: .09; }
html[data-mode="dark"] .ap-subs-lg button[aria-pressed="true"]::before { opacity: .14; }
.ap-subs-lg button:hover { background: var(--hover); color: var(--ink); }
.ap-subs-lg button[aria-pressed="false"] { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ap-subs-lg button[aria-pressed="false"]:hover { color: var(--ink); }
.ap-subs-lg button[aria-pressed="false"] > span { text-decoration: line-through; text-decoration-color: var(--ink-3); text-decoration-thickness: 1px; }
.ap-subs-sw { position: relative; flex: none; width: 16px; height: 2px; border-radius: 2px; background: var(--sw); }
.ap-subs-sw::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--sw); }
.ap-subs-sw.is-tot { height: 3px; }
.ap-subs-sw.is-tot::after { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--sf); box-shadow: inset 0 0 0 2px var(--sw); }
.ap-subs-lg button[aria-pressed="false"] .ap-subs-sw { background: var(--ink-3); opacity: .55; }
.ap-subs-lg button[aria-pressed="false"] .ap-subs-sw::after { background: var(--sf); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .ap-subs-ch .ap-ch-plot { cursor: pointer; } }
.ap-subs-ch .ap-ch-cross { stroke: var(--ink-3); opacity: .55; }
.ap-subs-foot { display: grid; gap: 0; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hair); }
.ap-subs-fr { display: flex; align-items: center; gap: 0 8px; min-width: 0; }
.ap-subs-gl { flex: none; width: 118px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
/* one shared column grid for both rows so the billing links sit under the product links (and wrap evenly when narrow) */
.ap-subs-fg { display: grid; grid-template-columns: repeat(auto-fill, 150px); gap: 0 2px; flex: 1 1 auto; min-width: 0; margin-left: -7px; }
.ap-subs-foot a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 7px; border-radius: 7px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ap-subs-foot a b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-subs-foot a:hover { background: var(--hover); color: var(--ink-2); }
.ap-subs-foot a:hover b { text-decoration: underline; }
.ap-subs-k { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.ap-subs-k.is-none { background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ap-ch-tip .ap-tip-s { display: block; margin: -3px 0 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.ap-tip-r.is-tot { color: var(--ink); font-weight: 750; margin-bottom: 2px; padding-bottom: 3px; border-bottom: 1px solid var(--hair); }
.ap-tip-r.is-tot i { height: 4px; }
.ap-tip-r.is-off { opacity: .55; }
.ap-tip-r.is-other { color: var(--ink-3); }
.ap-tip-r.is-other i { background: var(--cprev); }
.ap-tip-hint { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--hair); font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.ap-subs-rng { white-space: nowrap; }
@container main (max-width: 760px) { .ap-subs-g { display: none; } .ap-subs-fg { grid-template-columns: repeat(auto-fill, 128px); } }
/* narrow cards: each "Today by …" label sits above its links, which share one even grid (4 across, or 2 × 2 on phones) */
@container main (max-width: 640px) {
  .ap-subs-fr { display: block; }
  .ap-subs-fr + .ap-subs-fr { margin-top: 6px; }
  .ap-subs-gl { display: block; width: auto; padding: 4px 0 2px; }
  .ap-subs-fg { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}
@container main (max-width: 520px) {
  .ap-subs-rng { display: block; }
  .ap-subs-dot { display: none; }
  .ap-subs-top { margin-bottom: 6px; }
  .ap-subs-big b { font-size: 26px; }
  /* phones: the five toggles form an even button grid */
  .ap-subs-lg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .ap-subs-lg button { gap: 6px; padding: 0 8px; }
}
@container main (max-width: 350px) { .ap-subs-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ap-xt-wrap { overflow-x: auto; margin: 0 -4px; }
.ap-xt .ap-xs { display: none; }
@container main (max-width: 520px) {
  .ap-xt { border-spacing: 2px; }
  .ap-xt .ap-xl { display: none; } .ap-xt .ap-xs { display: inline; }
  .ap-xt th { padding: 4px 4px; }
  .ap-xt th[scope="row"] { font-size: 13px; white-space: nowrap; }
  .ap-xt th[scope="row"] .ap-itile { display: none; }
  .ap-xt td a, .ap-xt td span { padding: 9px 6px; font-size: 14px; }
}
.ap-perf { display: grid; gap: 14px; }
.ap-perf .ap-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container main (max-width: 900px) { .ap-perf .ap-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container main (max-width: 620px) { .ap-perf .ap-sec-h { display: grid; gap: 10px; } .ap-perf .ap-sec-h .ap-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .ap-perf [data-range] { display: contents; } .ap-perf .ap-rgw { flex: 1 1 100%; } .ap-perf .ap-rgbtn { width: 100%; } .ap-perf .ap-cmp { flex: 1 1 auto; } .ap-perf [data-custom] { flex: none; margin-left: auto; } }
.ap-perf-ch { padding: 16px 18px 12px; }
.ap-lb { list-style: none; margin: 0; padding: 0; }
.ap-lb li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.ap-lb li:last-child { border-bottom: 0; }
.ap-3col .ap-card-h > .ap-muted { font-size: 12.5px; font-weight: 600; }
.ap-lb li > i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.ap-lb li > b { font-variant-numeric: tabular-nums; }
.ap-lb a { color: var(--ink); font-weight: 650; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.ap-lb a:hover { text-decoration: underline; }
.ap-lb small { display: block; font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-3col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }

/* ---------- 12. forms + misc ---------- */
.ap-dform .row2 { gap: 12px; }
.ap-okl { pointer-events: none; }
.ap-dform .field > label, .ap-dform .lbl { font-size: 13.5px; }
.ap-dnote { font-size: 12.5px; color: var(--ink-3); }
.ap-preview { padding: 12px 14px; border-radius: var(--r-tile); background: var(--bg); font-size: 14px; }
.ap-preview .kv { font-size: 13.5px; }
.ap-radios { display: grid; gap: 6px; }
.ap-radio { position: relative; display: block; cursor: pointer; }
.ap-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ap-radio > span { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-tile); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 600; }
.ap-radio > span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--sf); }
.ap-radio input:checked + span { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ap-radio input:checked + span::before { box-shadow: inset 0 0 0 5px var(--accent); }
.ap-radio input:focus-visible + span { outline: 2px solid var(--acc-ring); outline-offset: 2px; }
.ap-radio small { grid-column: 2; color: var(--ink-3); font-weight: 550; font-size: 12.5px; }
.ap-radio em { font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 6px 0 10px; border: 0; border-radius: 8px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 600 13px/1 var(--font); cursor: pointer; }
.ap-fchip b { font-weight: 700; }
.ap-fchip svg { width: 14px; height: 14px; color: var(--ink-3); }
.ap-fchip:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.ap-views { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ap-views button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 600 13.5px/1 var(--font); cursor: pointer; }
.ap-views button:hover { background: var(--hover); color: var(--ink); }
.ap-views button[aria-pressed="true"] { background: var(--sel-bg); color: var(--sel-ink); }
.ap-filterpop { position: absolute; z-index: 70; width: min(360px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow-y: auto; padding: 8px 8px 10px; border-radius: var(--r-pop); background: var(--raise); box-shadow: var(--e3); }
html[data-mode="dark"] .ap-filterpop { --sf: #373C42; --bg: #3E444A; }
.ap-fgroup { padding: 6px 6px 8px; }
.ap-fgroup + .ap-fgroup { border-top: 1px solid var(--hair); }
.ap-fgroup h3 { margin: 4px 4px 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.ap-fgroup .ap-chips { gap: 4px; }
.ap-fopt { position: relative; display: inline-flex; }
.ap-fopt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ap-fopt span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border-radius: 8px; background: var(--bg); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.ap-fopt input:checked + span { background: var(--sel-bg); color: var(--sel-ink); }
.ap-fopt input:focus-visible + span { outline: 2px solid var(--acc-ring); outline-offset: 2px; }
.ap-fpop-f { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 2px; border-top: 1px solid var(--hair); }
.ap-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ap-matrix th, .ap-matrix td { padding: 8px 10px; border-bottom: 1px solid var(--hair); text-align: center; white-space: nowrap; }
.ap-matrix thead th { position: sticky; top: calc(var(--hdr) + var(--stripe-h)); z-index: 2; background: var(--sf); font-size: 12.5px; font-weight: 650; color: var(--ink-3); vertical-align: bottom; }
.ap-matrix th[scope="row"] { text-align: left; font-weight: 650; color: var(--ink); white-space: normal; min-width: 180px; }
.ap-matrix th[scope="row"] small { display: block; font-size: 12.5px; font-weight: 550; color: var(--ink-3); }
.ap-matrix tbody tr:hover td, .ap-matrix tbody tr:hover th { background: var(--hover); }
.ap-matrix .is-me { background: none; }
.ap-matrix thead th.is-me { box-shadow: inset 0 -2px 0 var(--ink); }
.ap-matrix tr.ap-mhead th { background: var(--bg); text-align: left; font-size: 12.5px; color: var(--ink-3); font-weight: 650; }
.ap-lvl { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.ap-lvl button { min-width: 44px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--ink-3); font: 650 12.5px/1 var(--font); cursor: pointer; }
.ap-lvl button[aria-checked="true"] { background: var(--sf); color: var(--ink); box-shadow: 0 0 0 1px var(--hair-2), 0 1px 2px rgba(var(--shd), .12); }
.ap-lvl button[aria-checked="true"][data-v="0"] { color: var(--ink-3); }
.ap-lvl button[aria-checked="true"][data-v="2"] { background: var(--acc-soft); color: var(--acc-ink); }
html[data-mode="dark"] .ap-lvl button[aria-checked="true"] { background: #434A50; color: #FFFFFF; }
html[data-mode="dark"] .ap-lvl button[aria-checked="true"][data-v="2"] { background: #434D42; color: #BFE478; }
.ap-lvl[aria-disabled="true"] button { cursor: not-allowed; }
/* matrix cells: a calm chip shows the level (None · View · Edit) so the grid reads as a pattern; the None/View/Edit
   control sits on top of it and appears on hover/focus (or always on touch), so nothing moves */
.ap-matrix td.ap-mxc { position: relative; height: 46px; }
.ap-lvchip { display: inline-flex; align-items: center; gap: 5px; min-width: 64px; justify-content: center; padding: 4px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.ap-lvchip svg { width: 13px; height: 13px; }
.ap-lvchip[data-v="1"] { background: var(--bg); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.ap-lvchip[data-v="2"] { background: #BFE478; color: #1F2328; box-shadow: inset 0 0 0 1px #6D941E; }
html[data-mode="dark"] .ap-lvchip[data-v="2"] { background: #BFE478; color: #1F2328; box-shadow: none; }
.ap-lvchip[data-v="0"]::before { content: "—"; margin-right: 2px; color: var(--line-2); }
.ap-matrix td.ap-mxc .ap-lvl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; z-index: 1; background: var(--sf); box-shadow: 0 0 0 1px var(--line-2), 0 4px 12px -4px rgba(var(--shd), .25); }
.ap-matrix td.ap-mxc:hover .ap-lvl:not([aria-disabled="true"]), .ap-matrix td.ap-mxc .ap-lvl:not([aria-disabled="true"]):focus-within { opacity: 1; pointer-events: auto; }
.ap-matrix td.ap-mxc:hover .ap-lvl:not([aria-disabled="true"]) ~ .ap-lvchip, .ap-matrix td.ap-mxc:hover .ap-lvchip { visibility: hidden; }
.ap-matrix td.ap-mxc:has(.ap-lvl[aria-disabled="true"]):hover .ap-lvchip { visibility: visible; }
.ap-matrix td.ap-mxc .ap-lvl:focus-within { opacity: 1; }
@media (hover: none) { .ap-matrix td.ap-mxc .ap-lvl:not([aria-disabled="true"]) { position: static; transform: none; opacity: 1; pointer-events: auto; } .ap-matrix td.ap-mxc .ap-lvl:not([aria-disabled="true"]) ~ .ap-lvchip, .ap-matrix td.ap-mxc:not(:has(.ap-lvl[aria-disabled="true"])) .ap-lvchip { display: none; } }
.ap-gate { margin-top: 12px; }
.ap-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.ap-acard { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--e1); min-width: 0; }
.ap-acard-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ap-acard-h > span:last-child { min-width: 0; }
.ap-acard-h b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-acard-h small { display: block; font-size: 12.5px; color: var(--ink-3); }
.ap-acard-f { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.ap-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@container main (min-width: 860px) { .ap-split { grid-template-columns: 260px minmax(0, 1fr); } }
.ap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ap-list button, .ap-list a { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-tile); background: none; color: var(--ink-2); font: 600 14px/1.2 var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.ap-list button:hover, .ap-list a:hover { background: var(--hover); color: var(--ink); }
.ap-list [aria-current], .ap-list [aria-pressed="true"] { background: var(--sf); color: var(--ink); box-shadow: var(--e1); }
.ap-list .n { margin-left: auto; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ap-list svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
.ap-rating { display: inline-flex; gap: 1px; color: #D9A514; }
html[data-mode="dark"] .ap-rating { color: #E4D353; }
.ap-rating svg { width: 14px; height: 14px; }
.ap-rating .off { color: var(--line-2); }
.ap-bar-inline { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.ap-bar-inline i { display: block; height: 100%; background: var(--c2); }
.ap-ok { color: var(--good-ink); font-weight: 650; }
.ap-bad { color: var(--alert-ink); font-weight: 650; }

/* ---------- 12b. list engine (list pages + the report template) ---------- */
.ap-lview { display: grid; gap: 14px; min-width: 0; }
.ap-lview .ap-kpis, .ap-ankpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
/* balanced KPI rows: 4 → 2×2 (never 3+1), 5 → one row on wide screens, else 3+2 */
.ap-lview .ap-kpis[data-n="4"], .ap-ankpis[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container main (max-width: 640px) { .ap-lview .ap-kpis[data-n="4"], .ap-ankpis[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ap-ankpis[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@container main (max-width: 1020px) { .ap-ankpis[data-n="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container main (max-width: 620px) { .ap-ankpis[data-n="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ap-lhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 44px; }
.ap-lhead .ap-views { flex: 1 1 auto; min-width: 0; }
.ap-lrange { flex: 0 1 auto; }
.ap-lbar { margin-bottom: 0; }
.ap-lsearch { flex: 1 1 260px; max-width: 420px; }
.ap-lsearch .inp { min-height: 40px; }
.ap-fbtn .cnt { margin-left: 2px; }
.ap-fchips { flex: 1 1 auto; align-items: center; }
.ap-fclear { font-size: 13px; padding: 0 4px; }
.ap-views .n { margin-left: 6px; font-size: 12px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ap-views [aria-pressed="true"] .n { color: inherit; opacity: .75; }
.ap-views button > svg { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.ap-vsaved { display: inline-flex; align-items: center; }
.ap-views .ap-vdel { display: inline-grid; place-items: center; width: 28px; height: 28px; min-height: 0; margin-left: -4px; padding: 0; color: var(--ink-3); opacity: .55; }
.ap-views .ap-vdel svg { margin: 0; }
.ap-vsaved:hover .ap-vdel, .ap-views .ap-vdel:focus-visible { opacity: 1; }
.ap-views .ap-vsave { color: var(--ink-3); }
.ap-vlink { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.ap-vlink:hover { background: var(--hover); color: var(--ink); }
.ap-vlink svg { width: 14px; height: 14px; }
.ap-fopt small { margin-left: 6px; font-size: 11.5px; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ap-fopt input:checked + span small { color: inherit; opacity: .7; }
.ap-lcharts { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@container main (min-width: 900px) { .ap-lcharts.two { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.ap-rnote { margin: -6px 0 14px; }
.ap-rnote a, .ap-note a { color: var(--ink); font-weight: 650; }
.ap-oldroute { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-3); }
.ap-att { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-att.is-last { color: var(--alert-ink); font-weight: 700; }
.ap-undone { text-decoration: line-through; color: var(--ink-3); }
.ap-msgl { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 12.5px; color: var(--ink-3); }
.ap-msgl svg { width: 12px; height: 12px; }
.ap-t tr.is-live > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.ap-emailprev { margin-top: 16px; padding: 16px 18px; border-radius: var(--r-tile); background: var(--bg); font-size: 14px; }
.ap-emailprev h3 { margin: 4px 0 10px; font-size: 16px; }
.ap-emailprev p { margin: 0 0 8px; }
/* analytics layout */
.ap-metrics { margin: -4px 0 12px; }
.ap-anbar { margin-bottom: 10px; }
.ap-appchips { margin: 0 0 14px; align-items: center; }
.ap-appchips .ap-fopt span { box-shadow: inset 0 0 0 1px var(--line); background: var(--sf); }
.ap-appchips .ap-fopt input:checked + span { box-shadow: none; }
.ap-appall { font-size: 13px; }
.ap-ankpis { margin-bottom: 14px; }
.ap-anmain { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@container main (min-width: 1000px) { .ap-anmain.has-side { grid-template-columns: minmax(0, 1fr) 320px; } }

/* ---------- 12c. detail pages: profile rows, pickers ---------- */
.ap-subrows, .ap-orows { list-style: none; margin: 0; padding: 0; display: grid; }
.ap-subrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.ap-subrow:first-child { border-top: 0; padding-top: 2px; }
.ap-subrow .ap-itile { width: 34px; height: 34px; }
.ap-subrow-t { display: grid; min-width: 0; }
.ap-subrow-t a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-subrow-t small { font-size: 12.5px; color: var(--ink-3); font-weight: 550; }
.ap-orows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.ap-orows li:first-child { border-top: 0; }
.ap-orows li b { font-variant-numeric: tabular-nums; }
@container main (max-width: 620px) { .ap-orows li { grid-template-columns: auto minmax(0, 1fr) auto; } .ap-orows li > .ap-clip { display: none; } .ap-orows li > :last-child:empty { display: none; } }
.ap-subh { margin: 14px 0 8px; font-size: 13px; font-weight: 650; color: var(--ink-3); }
button.more.linkish { color: var(--acc-ink); text-decoration: none; font-weight: 650; font-size: 14px; min-height: 32px; }
button.more.linkish:hover { text-decoration: underline; }

/* ---------- 12d. small screens: the list engine + detail headers stay compact (a staff member at 390px) ---------- */
@container main (max-width: 620px) {
  .ap-lhead { display: grid; gap: 10px; }
  .ap-lhead .ap-views { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gut, 16px)); padding: 0 var(--gut, 16px); }
  .ap-lhead .ap-views::-webkit-scrollbar { display: none; }
  .ap-lhead .ap-views { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-right: 32px; }
  .ap-lhead .ap-views > * { flex: none; }
  .ap-lbar { flex-wrap: nowrap; }
  .ap-lsearch { flex: 1 1 auto; min-width: 0; max-width: none; }
  .ap-fbtn span:not(.cnt) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ap-fbtn { padding-left: 12px; padding-right: 12px; flex: none; }
  .ap-fchips:empty { display: none; }
  .ap-lbar:has(.ap-fchips:not(:empty)) { flex-wrap: wrap; }
  .ap-lview .ap-kpis, .ap-ankpis, .ap-perf .ap-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ap-kpi { padding: 12px 13px 10px; }
  .ap-kpi-v { font-size: 21px; }
  .ap-kpi .ap-spark { display: none; }
  .ap-lcharts .ap-chart { height: 180px !important; }
  .ap-idh-in { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .ap-idh .av.av-xl { width: 44px; height: 44px; font-size: 15px; margin-top: 2px; }
  .ap-idh-in > div:nth-child(2) { display: contents; }
  .ap-idh-in h1 { grid-column: 2; align-self: center; }
  .ap-idh-meta, .ap-idh-tags { grid-column: 1 / -1; }
  .ap-idh-meta { display: grid; gap: 6px; margin-top: 0; }
  .ap-idh-meta > span { display: flex; flex-wrap: nowrap; align-items: flex-start; }
  .ap-idh-meta > span > svg { margin-top: 2px; }
  .ap-idh-meta > span > :not(svg) { min-width: 0; }
  .ap-idh-tags { margin-top: 0; }
  .ap-idh-act { grid-column: 1 / -1; flex-wrap: wrap; }
  .ap-idh-act .btn { flex: 1 1 auto; padding-left: 12px; padding-right: 12px; }
  .ap-subrow { grid-template-columns: auto minmax(0, 1fr); }
  .ap-subrow > .ap-st { grid-column: 2; justify-self: start; }
  .ap-side .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ap-side .kv dd { margin-bottom: 8px; }
}
@media (max-width: 600px) {
  .ap-ph .ph-act { display: flex; flex-wrap: nowrap; gap: 8px; }
  .ap-ph .ph-act .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
}
.ap-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ap-pick button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border: 0; border-radius: var(--r-tile); background: var(--bg); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.ap-pick button:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.ap-pick button > span { flex: 1; min-width: 0; display: grid; }
.ap-pick b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-pick small { font-size: 12.5px; color: var(--ink-3); font-weight: 550; }
.ap-pick em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-impbar { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 22px; border-radius: var(--r-panel) var(--r-panel) 0 0; background: var(--disc-soft); color: var(--disc-ink); font-size: 13.5px; font-weight: 650; }
.ap-impbar svg { width: 17px; height: 17px; flex: none; }
.ap-impbar span { flex: 1; }
.ap-impbar .linkish { color: inherit; }
.ap-nextline { display: flex; align-items: center; gap: 10px; margin: -6px 0 18px; padding: 11px 16px; border-radius: var(--r-tile); background: var(--sf); box-shadow: var(--e1); font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.ap-nextline svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.ap-nextline.is-bad { background: var(--alert-soft); color: var(--alert-ink); box-shadow: none; }
.ap-nextline.is-bad svg { color: inherit; }
.ap-nextline.is-warn { background: var(--disc-soft); color: var(--disc-ink); box-shadow: none; }
.ap-nextline.is-warn svg { color: inherit; }
.btn.ap-dangerbtn { color: var(--alert-ink); }
.btn.ap-dangerbtn:hover { background: var(--alert-soft); color: var(--alert-ink); }
.ap-items { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ap-items th, .ap-items td { padding: 9px 4px; text-align: left; border-bottom: 1px solid var(--hair); }
.ap-items thead th { font-size: 12.5px; font-weight: 650; color: var(--ink-3); }
.ap-items .num { text-align: right; white-space: nowrap; }
.ap-items td small { display: block; font-size: 12.5px; color: var(--ink-3); }
.ap-items td small a { color: var(--ink-2); }
.ap-items tfoot th { font-weight: 600; color: var(--ink-2); }
.ap-items tfoot tr:last-child th, .ap-items tfoot tr:last-child td { border-bottom: 0; }
.ap-items tr.is-tot th, .ap-items tr.is-tot td { color: var(--ink); font-weight: 750; font-size: 15px; }
.ap-items tr.is-ref td { color: var(--alert-ink); font-weight: 650; }
.ap-items tr.is-fee th, .ap-items tr.is-fee td { color: var(--ink-3); font-size: 13px; font-weight: 550; }
.ap-method { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.ap-method > svg { width: 22px; height: 22px; color: var(--ink-3); flex: none; }
.ap-method span { display: grid; }
.ap-method small { font-size: 12.5px; color: var(--ink-3); }
.ap-autorow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 2px; border-top: 1px solid var(--hair); cursor: pointer; }
.ap-autorow > span:first-child { display: grid; }
.ap-autorow small { font-size: 12.5px; color: var(--ink-3); font-weight: 550; }
.ap-quote { display: flex; gap: 10px; margin: 0 0 10px; font-size: 14px; color: var(--ink); }
.ap-quote svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ink-3); }
.ap-quote small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.ap-ok svg, .ap-muted svg { width: 14px; height: 14px; vertical-align: -2px; }
.ap-nowrap { white-space: nowrap; }
.empty h1.ap-h1empty { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.ap-no { opacity: .7; }
.ap-small { font-size: 12.5px; }
.ap-evc { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ap-evc .ap-progress { width: 56px; }
.ap-evnote { margin-top: 12px; }
.ap-ev label > span:nth-child(2) { flex: 1; min-width: 0; }
.ap-ev input:disabled + span { opacity: .55; }
/* support */
.ap-thread { list-style: none; margin: 0; padding: 0; }
.ap-msg-h .tag svg { width: 12px; height: 12px; }
.ap-mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13.5px; }
.ap-mlist li { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.ap-mlist li > a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; text-decoration: none; }
.ap-mlist li > a:hover { text-decoration: underline; }
.ap-mlist .ibtn.sm { width: 32px; height: 32px; color: var(--ink-3); }
.ap-composer .seg button svg { width: 15px; height: 15px; }
@container main (max-width: 620px) { .ap-tkmeta { display: none; } }
.ap-composer-f .btn-quiet { box-shadow: inset 0 0 0 1px var(--line-2); }
@container main (max-width: 620px) {
  .ap-composer .seg { display: flex; margin: 4px 4px 6px; }
  .ap-composer .seg button { flex: 1 1 0; justify-content: center; }
  .ap-composer-f { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .ap-composer-f .grow { display: none; }
  .ap-composer-f .ap-saved { justify-self: end; min-width: 0; }
  .ap-composer-f .ap-cbrow { grid-column: 1 / -1; }
  .ap-composer-f .btn-primary { grid-column: 1 / -1; justify-content: center; min-height: 44px; }
}
.ap-chatlog { gap: 10px; }
.ap-chatlog .ap-msg-b { padding: 9px 12px; }
.ap-svcard { color: inherit; text-decoration: none; transition: box-shadow var(--dur-fast); }
.ap-svcard:hover { box-shadow: var(--e2); }
.ap-svnums { display: flex; gap: 16px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.ap-svnums b { color: var(--ink); font-size: 18px; letter-spacing: -.02em; margin-right: 4px; font-variant-numeric: tabular-nums; }
.ap-acard-f { align-items: center; justify-content: space-between; }
.ap-radios-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ap-radios-row .ap-radio > span { grid-template-columns: 16px auto; justify-content: center; padding: 10px 8px; }
.ap-t .tgl { vertical-align: middle; }
/* US tile map */
.ap-tiles { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; }
.ap-tile { fill: var(--bg); stroke: none; }
.ap-tile[data-l="1"] { fill: #EEF5DC; } .ap-tile[data-l="2"] { fill: #DCEBB4; } .ap-tile[data-l="3"] { fill: #BFE478; } .ap-tile[data-l="4"] { fill: #93BC45; } .ap-tile[data-l="5"] { fill: #6D941E; }
html[data-mode="dark"] .ap-tile[data-l="1"] { fill: #3A4237; } html[data-mode="dark"] .ap-tile[data-l="2"] { fill: #45523C; } html[data-mode="dark"] .ap-tile[data-l="3"] { fill: #5B7240; } html[data-mode="dark"] .ap-tile[data-l="4"] { fill: #7FA048; } html[data-mode="dark"] .ap-tile[data-l="5"] { fill: #A8CF5E; }
.ap-tile[data-hl="1"] { fill: #BFE478; stroke: #6D941E; stroke-width: 2.5; }
.ap-tile-t, .ap-tile-n { text-anchor: middle; stroke: none; font-family: var(--font); pointer-events: none; }
.ap-tile-t { fill: var(--ink-2); font-size: 12px; font-weight: 700; }
.ap-tile-n { fill: var(--ink-3); font-size: 10.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ap-tile[data-l="4"] ~ .ap-tile-t, .ap-tile[data-l="5"] ~ .ap-tile-t, .ap-tile[data-l="4"] ~ .ap-tile-n, .ap-tile[data-l="5"] ~ .ap-tile-n { fill: #FFFFFF; }
html[data-mode="dark"] .ap-tile[data-l="4"] ~ .ap-tile-t, html[data-mode="dark"] .ap-tile[data-l="5"] ~ .ap-tile-t, html[data-mode="dark"] .ap-tile[data-l="4"] ~ .ap-tile-n, html[data-mode="dark"] .ap-tile[data-l="5"] ~ .ap-tile-n { fill: #1F2328; }
.ap-tiles a:hover .ap-tile, .ap-tiles a:focus-visible .ap-tile { stroke: var(--ink); stroke-width: 2; }
.ap-tiles a { outline: none; }
.ap-tilelegend { justify-content: center; margin-top: 12px; align-items: center; }
.ap-tile-k { width: 18px !important; height: 12px !important; border-radius: 3px !important; display: inline-block; }
.ap-tile-k[data-l="1"] { background: #EEF5DC; } .ap-tile-k[data-l="2"] { background: #DCEBB4; } .ap-tile-k[data-l="3"] { background: #BFE478; } .ap-tile-k[data-l="4"] { background: #93BC45; } .ap-tile-k[data-l="5"] { background: #6D941E; }
html[data-mode="dark"] .ap-tile-k[data-l="1"] { background: #3A4237; } html[data-mode="dark"] .ap-tile-k[data-l="2"] { background: #45523C; } html[data-mode="dark"] .ap-tile-k[data-l="3"] { background: #5B7240; } html[data-mode="dark"] .ap-tile-k[data-l="4"] { background: #7FA048; } html[data-mode="dark"] .ap-tile-k[data-l="5"] { background: #A8CF5E; }
.ap-mapcard { padding: 0; }
.ap-mapcard summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 18px; cursor: pointer; list-style: none; font-weight: 650; font-size: 14.5px; }
.ap-mapcard summary::-webkit-details-marker { display: none; }
.ap-mapcard summary > span { display: inline-flex; align-items: center; gap: 8px; }
.ap-mapcard summary svg { width: 17px; height: 17px; color: var(--ink-3); }
.ap-mapcard summary small { color: var(--ink-3); font-weight: 600; font-size: 12.5px; }
.ap-mapcard[open] summary { border-bottom: 1px solid var(--hair); }
.ap-mapcard .ap-tiles { padding: 16px; box-sizing: content-box; max-width: 560px; }
.ap-chtile { --a-soft: var(--vol-soft); --a-ink: var(--vol-ink); }
.ap-t .ap-chtile { width: 32px; height: 32px; border-radius: 9px; }
.ap-t .ap-chtile svg { width: 17px; height: 17px; }
.ap-rowbtn { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink); font-weight: 650; }
.ap-rowbtn:focus-visible { outline: 2px solid var(--acc-ring); outline-offset: 2px; border-radius: 4px; }
/* content pages */
.ap-minseg { margin-bottom: 16px; }
.ap-vhead { align-items: flex-start; }
.ap-vhead h2 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
.ap-vhead p { margin: 3px 0 0; font-size: 13.5px; }
.ap-vtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: v; }
.ap-vcard { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px; border-radius: var(--r-tile); background: var(--bg); }
.ap-vthumb { width: 112px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.ap-vthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-vbody { display: grid; gap: 2px; min-width: 0; }
.ap-vbody b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-vbody small { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.ap-vmonth .sel { width: auto; min-height: 34px; padding: 4px 34px 4px 10px; font-size: 13px; margin-top: 4px; background-color: var(--sf); }
.ap-vact { display: flex; gap: 2px; }
.ap-vact .ibtn.sm { width: 36px; height: 36px; color: var(--ink-3); }
.ap-vact .ibtn.sm:disabled { opacity: .3; }
@container main (max-width: 620px) { .ap-vcard { grid-template-columns: 84px minmax(0, 1fr); } .ap-vthumb { width: 84px; } .ap-vact { grid-column: 1 / -1; justify-content: flex-end; } .ap-vact .ibtn.sm { width: 44px; height: 44px; } }
.ap-libgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ap-libgrid button { width: 100%; display: grid; gap: 4px; padding: 6px 6px 10px; border: 0; border-radius: var(--r-tile); background: var(--bg); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.ap-libgrid button:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.ap-libgrid button[aria-disabled="true"] { opacity: .5; cursor: default; box-shadow: none; }
.ap-libimg { display: block; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; }
.ap-libimg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-libgrid b { font-size: 14px; padding: 0 2px; }
.ap-libgrid small { font-size: 12px; color: var(--ink-3); font-weight: 600; padding: 0 2px; }
.ap-appn { margin: 0; font-size: 13.5px; color: var(--ink-3); font-weight: 600; }
.ap-appn b { font-size: 20px; color: var(--ink); letter-spacing: -.02em; margin-right: 2px; font-variant-numeric: tabular-nums; }
.ap-qgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.ap-qlinks { list-style: none; margin: 0; padding: 0; display: grid; }
.ap-qlinks li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; border-top: 1px solid var(--hair); }
.ap-qlinks li:first-child { border-top: 0; }
.ap-qlink-t { display: grid; min-width: 0; }
.ap-qlink-t b { font-size: 14px; }
.ap-qlink-t small { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-qlinks .btn-sm { min-height: 36px; }
@media (pointer: coarse) { .ap-qlinks .btn-sm { min-height: 44px; } }
.ap-ftile { width: 32px; height: 32px; border-radius: 8px; }
.ap-ftile svg { width: 17px; height: 17px; }
.ap-listsep { height: 1px; margin: 6px 10px; background: var(--hair); }
.ap-drop { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: var(--r-tile); box-shadow: inset 0 0 0 1.5px var(--line-2); background: var(--bg); }
.ap-drop > svg { width: 22px; height: 22px; color: var(--ink-3); }
.ap-drop span { display: grid; }
.ap-drop small { color: var(--ink-3); font-size: 12.5px; }
.ap-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ap-drop:focus-within { box-shadow: inset 0 0 0 1.5px var(--acc-ring), 0 0 0 3px var(--focus-glow); }
.ap-flrow { display: flex; align-items: center; gap: 2px; }
.ap-flrow > button:first-child { flex: 1; min-width: 0; }
.ap-flrow .ibtn.sm { width: 32px; height: 32px; color: var(--ink-3); flex: none; }
.ap-flslot { width: 32px; flex: none; }
.ap-addf { color: var(--ink-3) !important; }
/* admin pages */
.ap-mxwrap { padding: 0; overflow-x: auto; }
.ap-mxwrap .ap-matrix th, .ap-mxwrap .ap-matrix td { padding: 10px 12px; }
.ap-mxwrap .ap-matrix thead th { position: static; }
.ap-mx-h { display: grid; gap: 1px; justify-items: center; }
.ap-mx-h b { color: var(--ink); font-size: 13.5px; }
.ap-mx-h small { font-size: 11.5px; font-weight: 600; color: var(--ink-3); display: inline-flex; align-items: center; gap: 3px; }
.ap-mx-h small svg { width: 11px; height: 11px; }
.ap-matrix th[scope="col"] { min-width: 132px; }
.ap-matrix th[data-focus] { box-shadow: inset 0 -2px 0 var(--accent); }
.ap-matrix .tgl { margin: 0 auto; }
.ap-setgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.ap-setsec .ap-card-h { align-items: flex-start; }
.ap-setrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 48px; }
.ap-setrow > span:first-child { font-weight: 650; font-size: 14px; }
.ap-setlist { list-style: none; margin: 0; padding: 0; }
.ap-setlist li:first-child .ap-autorow { border-top: 0; }
.ap-setlist .ap-autorow { min-height: 48px; padding: 6px 0; }
.ap-setlinks { display: grid; gap: 6px; }
.ap-setlink { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--r-tile); background: var(--bg); color: var(--ink); text-decoration: none; }
.ap-setlink:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.ap-setlink > svg { width: 18px; height: 18px; color: var(--ink-3); }
.ap-setlink span { display: grid; }
.ap-setlink small { font-size: 12.5px; color: var(--ink-3); }
.ap-resetrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--hair); }
.ap-resetrow > span { display: grid; max-width: 34rem; }
.ap-resetrow small { font-size: 12.5px; color: var(--ink-3); }
.ap-rtnow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; }
@container main (min-width: 760px) { .ap-rtnow { grid-template-columns: 260px minmax(0, 1fr); } }
.ap-rtnum { display: grid; gap: 2px; }
.ap-rtnum > b { font-size: 46px; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ap-rtnum small { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.ap-rtlive { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 650; color: var(--ink-2); }
.ap-rtdot { width: 8px; height: 8px; border-radius: 50%; background: #5CBF7B; box-shadow: 0 0 0 4px rgba(92,191,123,.18); }
.is-paused .ap-rtdot { background: var(--ink-3); box-shadow: none; }
.ap-rtstrip { min-width: 0; }
.ap-rtgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.ap-rtpeople { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ap-rtpeople li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.ap-rtpeople a { color: inherit; text-decoration: none; min-width: 0; }
.ap-rtpeople a:hover b { text-decoration: underline; }
.ap-repcats { margin: 4px 0 4px; }
.ap-repcard, .ap-ancard { color: inherit; text-decoration: none; transition: box-shadow var(--dur-fast); }
.ap-repcard:hover, .ap-ancard:hover { box-shadow: var(--e2); }
.ap-repcard .ap-acard-h { align-items: flex-start; }
.ap-repcard .ap-acard-h small, .ap-ancard .ap-acard-h small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ap-repcard .ap-acard-f > svg { width: 16px; height: 16px; color: var(--ink-3); }
.ap-pinmark svg { width: 13px; height: 13px; color: #D9A514; vertical-align: -1px; }
.ap-ankpi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.ap-ankpi small { flex-basis: 100%; font-size: 12.5px; color: var(--ink-3); font-weight: 650; }
.ap-ankpi b { font-size: 24px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ap-ancard .ap-spark { display: block; width: 100%; height: 28px; }
.ap-bigsearch { max-width: 640px; flex-basis: 100%; }
.ap-bigsearch .inp { min-height: 48px; font-size: 16px; }
.ap-sresults { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ap-sres { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: var(--r-tile); background: var(--sf); box-shadow: var(--e1); color: var(--ink); text-decoration: none; }
.ap-sres:hover { box-shadow: var(--e2); }
.ap-sres-t { display: grid; min-width: 0; }
.ap-sres-t b, .ap-sres-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-sres-t small { font-size: 12.5px; color: var(--ink-3); }
.ap-sres > svg { width: 16px; height: 16px; color: var(--ink-3); }
@container main (max-width: 520px) { .ap-sres .tag { display: none; } .ap-sres { grid-template-columns: auto minmax(0, 1fr) auto; } }
/* sign-in mock */
.ap-loginbody { min-height: 100vh; display: grid; background: var(--canvas); }
.ap-login { display: grid; place-items: center; align-content: center; gap: 18px; min-height: 100vh; padding: 32px 16px; }
.ap-loginbox { width: min(420px, 100%); display: grid; gap: 14px; padding: 32px 28px 24px; border-radius: var(--r-panel); background: var(--sf); box-shadow: var(--e2); }
.ap-loginlogo .gc-logo { color: var(--ink); }
.ap-loginlogo .ap-appico { width: 28px; height: 28px; }
.ap-loginbox h1 { margin: 8px 0 0; font-size: 24px; letter-spacing: -.03em; }
.ap-loginsub { margin: -6px 0 4px; color: var(--ink-3); font-size: 14px; }
.ap-sso svg { width: 18px; height: 18px; }
.ap-or { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.ap-or::before, .ap-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ap-loginnote { margin: -4px 0 2px; }
.ap-loginerr { margin: 0; color: var(--alert-ink); font-size: 13.5px; font-weight: 600; }
.ap-loginfoot { margin: 0; text-align: center; font-size: 13.5px; }
.ap-loginlegal { margin: 0; font-size: 12px; color: var(--ink-3); text-align: center; }
.ap-kv dd { overflow-wrap: anywhere; min-width: 0; }
.ap-side .ap-tiles { max-width: 100%; }

/* ---------- 13. density ---------- */
html[data-density="compact"] { --row-h: 36px; --th-h: 34px; --cell-x: 10px; }
html[data-density="compact"] .ap-t { font-size: 13.5px; }
html[data-density="compact"] .ap-t td { padding-top: 3px; padding-bottom: 3px; }
html[data-density="compact"] .ap-t .av-sm { width: 24px; height: 24px; font-size: 9.5px; }
html[data-density="compact"] .ap-who-t small { display: none; }
html[data-density="compact"] .ap-rail .rail-link { min-height: 32px; }
html[data-density="compact"] .rg { margin-top: 8px; }
html[data-density="compact"] .ap-kpi { padding: 11px 14px 10px; }
html[data-density="compact"] .main { padding-top: 20px; }
html[data-density="compact"] .ap-ph { margin-bottom: 14px; }
html[data-density="compact"] .ap-card { padding: 13px 15px; }
@media (pointer: coarse) {
  html[data-density="compact"] { --row-h: 44px; }
  .ap-pinbtn { width: 44px; height: 44px; }
  .ap-views button, .ap-vlink, .ap-views .ap-vsave { min-height: 44px; }
  .ap-views .ap-vdel { width: 44px; height: 44px; }
  .seg button { min-height: 44px; }
  .ap-fchip { min-height: 44px; }
  .ap-fopt span { min-height: 44px; }
  .ap-lvl button { min-height: 44px; }
  .ap-mlist .ibtn.sm, .ap-flrow .ibtn.sm, .ap-vact .ibtn.sm { width: 44px; height: 44px; }
  .ap-list button, .ap-list a { min-height: 44px; }
  .subtabs :is(a, button) { min-height: 44px; display: inline-flex; align-items: center; }
  .more { min-height: 44px; }
  .ap-xt td a, .ap-xt td span { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; }
  .ap-subs-lg button, .ap-subs-foot a { min-height: 44px; }
  .ap-subs-big { min-height: 44px; align-items: center; }
  .ap-cb { width: 44px; height: 44px; }
  .ap-t .c-sel { width: 52px; padding-left: 2px; }
  .ap-copy { width: 40px; height: 40px; }
  .ap-pager .ibtn.sm { width: 44px; height: 44px; }
}

/* ---------- 14. responsive ---------- */
@media (max-width: 1199px) { .ap-hsearch { max-width: 300px; margin-left: 18px; } }
@media (max-width: 999px) {
  .ap-hsearch { display: none; }
  .ap-search-ico { display: inline-grid; }
  .hdr-util .ap-roletag { margin-right: 0; }
}
@media (max-width: 600px) {
  .ap-roletag span { display: none; }
  .ap-roletag { padding: 0 8px; }
  .ap-ph { gap: 12px; }
  .ap-ph .ph-act { width: 100%; }
  .ap-toolbar .search { max-width: none; flex-basis: 100%; }
  .ap-kpis.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-card { padding: 14px; }
  .ap-xt td a, .ap-xt td span { padding: 9px 8px; font-size: 14px; }
  .ap-bulk { left: 12px; right: 12px; bottom: 12px; transform: translateY(140%); }
  .ap-bulk.in { transform: none; }
  .ap-attn a { min-height: 64px; }
}

/* ---------- 15. motion ---------- */
/* ---------- live data (shared/ap-live.js): status bar, loading line, live-only controls ---------- */
.ap-livebar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 16px; padding: 8px 14px; border-radius: var(--r-tile); background: var(--bg); color: var(--ink-2); font-size: 13px; }
.ap-livebar svg { width: 16px; height: 16px; flex: none; }
.ap-livebar > span { flex: 1 1 240px; min-width: 0; }
.ap-livebar[data-tone="ok"] { background: var(--evt-soft); color: var(--evt-ink); }
.ap-livebar[data-tone="warn"] { background: var(--disc-soft); color: var(--disc-ink); }
.ap-livebar[data-tone="info"] { background: var(--unread-soft); color: var(--unread-ink); }
.ap-livebar .linkish { color: inherit; font-weight: 700; }
.ap-liveload { display: flex; align-items: center; gap: 10px; padding: 48px 8px; color: var(--ink-3); font-size: 14px; justify-content: center; }
.ap-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink-2); animation: apSpin .8s linear infinite; }
@keyframes apSpin { to { transform: rotate(360deg); } }
html[data-live="live"] .ap-sample, html[data-live="signin"] .ap-sample { display: none; }
html[data-live="live"] .am-proto, html[data-live="live"] .ap-roles, html[data-live="signin"] .am-proto { display: none; }
.ap-loginalt { margin: 4px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .ap-sk, .ap-spin { animation: none; }
  .ap-drawer, .ap-drawer.in, .ap-bulk, .ap-chev, .rg-car, .ap-saved { transition: none; }
  dialog.ap-pal[open] { animation: none; }
}