/* prototypes/audit-tablet/audit.css — GRC tablet (834 × 1194), module styles. Plan: docs/plan-grc.md.
   Colours only as tokens from app/tokens.css. No font-size / font-weight here: text takes a .t-* class (typeset.js).
   Look: iPad-3 layout rules (docs/grc/ipad3-reference.md), Antz Web Code pieces (docs/grc/component-map.md, webcode-sweep.md),
   the session grid from Batch Assessment V5 (docs/grc/grid-v5-spec.md). Every content group sits in a white container (G-4). */

/* ---------- stage (prototype only, outside the tablet) ---------- */
body { margin: 0; background: var(--md3-displaybg-secondary); }
.stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); padding: var(--sp-24); }
.stage__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-16); width: 834px; max-width: 100%; box-sizing: border-box; padding: var(--sp-8) var(--sp-12); border: 1px dashed var(--md3-outline); border-radius: 8px; color: var(--md3-on-surface-variant); }
.stage__bar--figma { border-style: solid; }
.stage__label { text-transform: uppercase; letter-spacing: .06em; }
.stage__group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.stage__link { border: 0; background: none; padding: 0; color: var(--md3-on-surface); text-decoration: underline; cursor: pointer; font-family: inherit; font-size: inherit; }
.stage__link:disabled { color: var(--md3-on-surface-variant); text-decoration: none; cursor: default; }
.stage__me { color: var(--md3-on-surface); }
.figbar__status { margin-left: auto; color: var(--md3-on-surface-variant); }
.figbar__status[data-tone="error"] { color: var(--md3-error); }
.device-slot { position: relative; flex: none; }
body.fill .stage { padding: 0; gap: 0; }
body.fill .stage__bar { display: none; }

/* ---------- the tablet ---------- */
/* The reference's colour names, re-pointed at Antz tokens (G-9), so inline var(--x) in the carried-over markup resolves to Antz. */
.device {
  --bg: var(--md3-background); --card: var(--md3-on-primary);
  --ink: var(--md3-on-surface-variant); --ink2: var(--md3-on-surface-variant); --ink3: var(--md3-on-surface-variant); /* UX audit 4: text under 18px never uses neutral-secondary (3.77:1) */
  --line: var(--md3-neutral05); --line2: var(--md3-neutral05);
  --brand: var(--md3-on-surface); --brand-d: var(--md3-on-surface); --brand-50: var(--md3-on-background);
  --ok: var(--md3-on-surface); --ok-bg: var(--md3-on-background);
  --warn: var(--md3-on-tertiary-container); --warn-bg: var(--md3-notes-a40);
  --bad: var(--md3-error); --bad-bg: var(--md3-error-container);
  --info: var(--md3-on-secondary-container); --info-bg: var(--md3-secondary-container-a30);
  --fill-ok: var(--md3-primary); --fill-warn: var(--md3-moderate-secondary); --fill-bad: var(--md3-error); /* bar, dot and ring fills (component-map 0.2 glyph column) */
  --r: 16px;
  position: absolute; top: 0; left: 0; transform-origin: top left;
  width: 834px; height: 1194px; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif;
  box-shadow: 0 4px 16px var(--md3-neutral-primary-a20), 0 1px 3px var(--black-08);
  -webkit-font-smoothing: antialiased;
}
body.fill .device { position: relative; width: 100vw; height: 100vh; border-radius: 0; box-shadow: none; }
:where(.device) *, :where(.device) *::before, :where(.device) *::after { box-sizing: border-box; margin: 0; padding: 0; } /* zero specificity, so any module rule wins */
:where(.device) a { color: inherit; text-decoration: none; }
:where(.device) button { font-family: inherit; color: inherit; cursor: pointer; }

main { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--sp-16) var(--sp-24); display: flex; flex-direction: column; }
main > * { flex-shrink: 0; } /* a child with overflow set would otherwise shrink to nothing when the page scrolls */
main > * + * { margin-top: var(--sp-16); }
main > .ph + *, main > .crumb + .ph { margin-top: 0; }

/* ---------- bottom tab bar (library tablet navigation; badge = library .app-badge tone) ---------- */
.rail { flex: none; display: flex; background: var(--md3-on-primary); box-shadow: 0 -1px 0 var(--md3-surface-variant); padding: 0 var(--sp-8); }
.rail .logo, .rail .me { display: none; }
.nav { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); height: 72px; color: var(--md3-on-surface-variant); border-top: 2px solid transparent; }
.nav.on { color: var(--md3-on-surface); border-top-color: var(--md3-primary); }
.nav .dot { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--md3-tertiary); color: var(--md3-on-primary); display: grid; place-items: center; }

/* ---------- page header: a white band across the top, never text on the page tint (G-4) ---------- */
.ph { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-12) var(--sp-16);
  margin: 0 calc(-1 * var(--sp-16)); padding: var(--sp-20) var(--sp-24) var(--sp-16); background: var(--md3-on-primary); border-bottom: 1px solid var(--md3-surface-variant); }
.ph h1 { color: var(--md3-neutral-primary); }
.ph .sub { color: var(--md3-on-surface-variant); margin-top: var(--sp-4); }
.ph-act { display: flex; align-items: center; gap: var(--sp-8); flex: none; margin-left: auto; }
.crumb { display: flex; align-items: center; gap: var(--sp-4); margin: 0 calc(-1 * var(--sp-16)); padding: var(--sp-12) var(--sp-24) 0; background: var(--md3-on-primary); color: var(--md3-on-surface); }
.crumb + .ph { padding-top: var(--sp-8); }
/* the model chain under the Governance title belongs to the header band */
.ph-chain { gap: var(--sp-8); margin: 0 calc(-1 * var(--sp-16)) !important; padding: 0 var(--sp-24) var(--sp-12); background: var(--md3-on-primary); }
.ph:has(+ .ph-chain) { border-bottom: 0; }
.ph-chain .app-icon { color: var(--md3-outline); }
.ph-chain + .tabs, .ph + .tabs, .ph + nav.tabs { margin: 0 calc(-1 * var(--sp-16)); padding: 0 var(--sp-24); background: var(--md3-on-primary); border-bottom: 1px solid var(--md3-surface-variant); }
.ph:has(+ .tabs) { border-bottom: 0; padding-bottom: var(--sp-8); }
main > .ph + .tabs + * { margin-top: var(--sp-16); }
main > .ph + * { margin-top: var(--sp-16); }
main > .ph + .tabs, main > .ph-chain + .tabs { margin-top: 0; }
main > .ph-chain + .tabs + * { margin-top: var(--sp-16); }
main > .crumb:first-child { margin-top: 0; }

/* ---------- buttons (the library .btn is 78 wide; the GRC buttons size to their label) ---------- */
.device .btn { width: auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); height: 44px; padding: 0 var(--sp-16); border-radius: 8px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); white-space: nowrap; }
.device .btn.pri { background: var(--md3-on-surface); border-color: var(--md3-on-surface); color: var(--md3-on-primary); }
.device .btn.ghost { background: transparent; border-color: transparent; color: var(--md3-on-surface-variant); }
.device .btn.sm { height: 40px; padding: 0 var(--sp-12); }
.device .btn.bad { color: var(--md3-error); }
.device .btn.block { width: 100%; }
.device .btn:disabled { background: var(--md3-surface-variant); border-color: var(--md3-surface-variant); color: var(--md3-on-surface-variant); cursor: not-allowed; }
.iconbtn { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); display: grid; place-items: center; color: var(--md3-on-surface-variant); }
/* the site pill in the header (Web Code ScopeChip) */
.ph-act .chip { height: 40px; background: var(--md3-secondary-container-a30); border-color: var(--md3-outline-variant); color: var(--md3-on-surface-variant); }
.ph-act .chip .app-icon { color: var(--md3-secondary-dark); }

/* ---------- containers ---------- */
.card { background: var(--md3-on-primary); border: 1px solid var(--line); border-radius: 16px; }
.pad { padding: var(--sp-20); }
.sec-h { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-16) var(--sp-20) var(--sp-8); }
.h2, .h3 { color: var(--md3-neutral-primary); }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; color: var(--md3-on-surface-variant); }
.muted, .faint { color: var(--md3-on-surface-variant); }
.mt8 { margin-top: var(--sp-8); } .mt12 { margin-top: var(--sp-12); } .mt16 { margin-top: var(--sp-16); } .mt20 { margin-top: var(--sp-20); } .mt24 { margin-top: var(--sp-24); }
.flex { display: flex; align-items: center; gap: var(--sp-8); } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-16); }
.g4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-16); }
.ms { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--sp-16); }

/* row list inside a white container (iPad-3 rows, Web Code dividers) */
.row { display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-16) var(--sp-20); border-top: 1px solid var(--line2); min-height: 72px; cursor: pointer; }
.row:first-child { border-top: 0; }
.row .chev { color: var(--md3-outline); flex: none; display: flex; }
.ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); }
.ico.bad { background: var(--md3-error-container); color: var(--md3-on-error-container); }
.ico.warn { background: var(--md3-notes-a40); color: var(--md3-on-tertiary-container); }
.ico.ok { background: var(--md3-on-background); color: var(--md3-on-surface); }
.ico.info { background: var(--md3-secondary-container-a30); color: var(--md3-on-secondary-container); }
.title { color: var(--md3-neutral-primary); }
.meta { color: var(--md3-on-surface-variant); margin-top: 2px; }

/* A group label joins the white container under it, so it never sits on the tint (G-4). */
.grp { display: flex; align-items: baseline; gap: var(--sp-8); padding: var(--sp-16) var(--sp-20) var(--sp-8); background: var(--md3-on-primary); border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; }
.grp + .card, .grp + section.card { margin-top: 0 !important; border-top: 0; border-radius: 0 0 16px 16px; }
.grp .eyebrow { letter-spacing: .08em; }

.empty { padding: var(--sp-20); border: 1px dashed var(--md3-outline-variant); border-radius: 12px; text-align: center; color: var(--md3-on-surface-variant); background: var(--md3-on-primary); }
.banner { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-16) var(--sp-20); border-radius: 12px; background: var(--md3-notes-a40); color: var(--md3-on-tertiary-container); }
.banner.bad { background: var(--md3-error-container); color: var(--md3-on-error-container); }
.banner.ok { background: var(--md3-on-background); color: var(--md3-on-surface); }

/* ---------- tabs and segmented (Web Code tabs; Antz CustomSwitchTabs for the segmented) ---------- */
.tabs { display: flex; gap: var(--sp-24); overflow-x: auto; scrollbar-width: none; }
.tabs a { height: 52px; display: flex; align-items: center; gap: var(--sp-8); color: var(--md3-on-surface-variant); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--md3-on-surface); border-bottom-color: var(--md3-primary); }
.tabs .n { min-width: 22px; height: 20px; padding: 0 var(--sp-8); border-radius: 10px; background: var(--md3-displaybg-primary); color: var(--md3-on-surface-variant); display: inline-grid; place-items: center; }
.tabs a.on .n { background: var(--md3-on-background); color: var(--md3-on-surface); }
/* a tabs row that is not under the header still gets a white container */
main > .tabs:not(.ph + .tabs):not(.ph-chain + .tabs) { background: var(--md3-on-primary); border: 1px solid var(--line); border-radius: 16px; padding: 0 var(--sp-20); }
.seg { display: inline-flex; flex-wrap: wrap; gap: var(--sp-4); padding: var(--sp-4); border-radius: 12px; background: var(--md3-displaybg-primary); margin-bottom: var(--sp-16); }
.seg a, .seg button { height: 40px; padding: 0 var(--sp-16); border-radius: 8px; display: flex; align-items: center; gap: var(--sp-8); border: 0; background: none; color: var(--md3-on-surface-variant); }
.seg .on { background: var(--md3-on-primary-container); color: var(--md3-on-primary); }
.seg .n { color: var(--md3-on-surface-variant); }
.seg .on .n { color: var(--md3-on-primary50); }
main > .seg { align-self: flex-start; background: var(--md3-on-primary); border: 1px solid var(--line); }

/* ---------- status: word + one dot, colour only on the dot (SURFACES T1.4, G-11); severity tag (G-8) ---------- */
.pill { display: inline-flex; align-items: center; gap: var(--sp-8); height: 28px; padding: 0 var(--sp-12); border-radius: 999px; background: var(--md3-on-primary); border: 1px solid var(--md3-outline-variant); color: var(--md3-on-surface-variant); white-space: nowrap; }
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--md3-outline); flex: none; }
.pill.ok::before { background: var(--md3-primary); }
.pill.info::before { background: var(--md3-add-primary); }
.pill.warn::before { background: var(--md3-moderate-secondary); }
.pill.bad::before { background: var(--md3-error); }
.t-ok { color: var(--md3-on-surface); } .t-warn { color: var(--md3-on-tertiary-container); } .t-bad { color: var(--md3-error); } .t-info { color: var(--md3-on-secondary-container); }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--sp-8); border-radius: 4px; background: var(--md3-displaybg-primary); color: var(--md3-on-surface-variant); white-space: nowrap; }
.dotm { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--md3-outline); display: inline-block; }
.dotm.bad { background: var(--md3-error); } .dotm.warn { background: var(--md3-moderate-secondary); } .dotm.ok { background: var(--md3-primary); } .dotm.info { background: var(--md3-add-primary); } .dotm.attn { background: var(--md3-tertiary); }
.sev { display: inline-flex; align-items: center; gap: var(--sp-4); height: 24px; padding: 0 var(--sp-8); border-radius: 4px; white-space: nowrap; }
.sev--High { background: var(--md3-error-container); color: var(--md3-on-error-container); }
.sev--Medium { background: var(--md3-notes-a40); color: var(--md3-on-tertiary-container); }
.sev--Low { background: var(--md3-displaybg-primary); color: var(--md3-on-surface-variant); }

/* ---------- KPI tile (iPad-3 §5; Web Code Kpi) ---------- */
.metric { display: flex; flex-direction: column; padding: var(--sp-16) 18px; cursor: pointer; }
.metric .eyebrow { letter-spacing: 1.12px; }
.metric .num { margin-top: var(--sp-8); color: var(--md3-neutral-primary); font-variant-numeric: tabular-nums; }
.metric .num small { color: var(--md3-on-surface-variant); margin-left: var(--sp-4); }
.metric .kpi-sub { display: flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-8); color: var(--md3-on-surface-variant); }
.metric:active { background: var(--md3-surface); }

/* ---------- small data pieces ---------- */
.kv { display: grid; grid-template-columns: 128px 1fr; gap: var(--sp-12) var(--sp-16); }
.kv dt { color: var(--md3-on-surface-variant); } .kv dd { color: var(--md3-on-surface-variant); }
.bar { height: 8px; border-radius: 4px; background: var(--md3-surface-variant); overflow: hidden; display: flex; gap: 1px; }
.bar i { display: block; height: 100%; }
.heat { display: grid; grid-template-columns: 22px repeat(5, 1fr); gap: var(--sp-4); color: var(--md3-on-surface-variant); }
.heat div { height: 34px; border-radius: 8px; display: grid; place-items: center; }
.lvl { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border-radius: 12px; }
.av { width: 32px; height: 32px; border-radius: 50%; background: var(--md3-on-background); color: var(--md3-on-surface); display: inline-grid; place-items: center; flex: none; }

/* chain / trace (Web Code StagePipeline) */
.chain { display: flex; align-items: stretch; }
.node { flex: 1; min-width: 0; padding: var(--sp-12) 14px; border: 1px solid var(--md3-surface-variant); border-radius: 12px; background: var(--md3-on-primary); cursor: pointer; }
.node .v { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--md3-neutral-primary); }
.link { width: 22px; flex: none; display: grid; place-items: center; color: var(--md3-outline-variant); }
.node.cur { border-color: var(--md3-outline-variant); background: var(--md3-surface); }
.rel { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-12); }
.rel a { padding: 14px; border: 1px solid var(--md3-surface-variant); border-radius: 12px; background: var(--md3-on-primary); }
.rel b { display: block; color: var(--md3-neutral-primary); }

/* evidence thumbnails (Web Code AddMediaDrawer tiles) */
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-12); }
.thumb { aspect-ratio: 4 / 3; border-radius: 12px; display: grid; place-items: center; color: var(--md3-on-primary); position: relative; overflow: hidden; cursor: pointer; }
.thumb > span:not(.app-icon) { position: absolute; left: var(--sp-8); bottom: var(--sp-8); background: var(--md3-neutral-primary-a40); padding: 2px var(--sp-8); border-radius: 4px; color: var(--md3-on-primary); }
.thumb.doc { background: var(--md3-displaybg-primary); color: var(--md3-outline); }
.thumb.doc > span:not(.app-icon) { background: var(--md3-on-primary); color: var(--md3-on-surface-variant); }

/* search + chips (iPad-3 §12, Web Code choice chips) */
.search { height: 44px; display: flex; align-items: center; gap: var(--sp-8); padding: 0 var(--sp-16); background: var(--md3-on-primary); border: 1px solid var(--md3-outline-variant); border-radius: 999px; flex: 1; color: var(--md3-on-surface-variant); }
.card .search, .sheet .search { background: var(--md3-background); border-color: transparent; }
.search input { border: 0; outline: 0; font-family: inherit; flex: 1; background: none; color: var(--md3-on-surface-variant); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.chip { height: 40px; padding: 0 var(--sp-16); border-radius: 999px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); display: inline-flex; align-items: center; gap: var(--sp-8); white-space: nowrap; }
.chip.on { background: var(--md3-primary-a10); border-color: var(--md3-primary); color: var(--md3-on-surface); }

/* ---------- form fields (library .app-field geometry, 56 high) ---------- */
.field { margin-bottom: var(--sp-20); }
.field > label { display: block; color: var(--md3-on-surface-variant); margin-bottom: var(--sp-8); }
.inp { width: 100%; height: 56px; border: 1px solid var(--md3-outline-variant); border-radius: 8px; padding: 0 var(--sp-16); font-family: inherit; color: var(--md3-on-surface-variant); background: var(--md3-on-primary); outline: none; }
textarea.inp { height: 96px; padding: 14px var(--sp-16); resize: none; }
.inp:focus { border-color: var(--md3-outline); }
.scale { display: flex; gap: var(--sp-8); }
.scale button { flex: 1; height: 56px; border-radius: 8px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); }
.scale button.on { background: var(--md3-on-primary-container); border-color: var(--md3-on-primary-container); color: var(--md3-on-primary); }
.cbx { width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--md3-outline); display: grid; place-items: center; flex: none; background: var(--md3-on-primary); }
.cbx.on { background: var(--md3-on-surface); border-color: var(--md3-on-surface); color: var(--md3-on-primary); }
.rng { width: 100%; height: 44px; accent-color: var(--md3-primary); }
/* toggle rows (Web Code switch rows; knob = library .app-switch colours) */
.tgl { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); min-height: 56px; border-top: 1px solid var(--line2); cursor: pointer; }
.tgl i { width: 44px; height: 26px; border-radius: 13px; background: var(--md3-outline-variant); position: relative; flex: none; transition: background .15s; }
.tgl i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--md3-on-primary); box-shadow: 0 1px 2px var(--md3-neutral-primary-a20); transition: left .15s; }
.tgl.on i { background: var(--md3-primary); } .tgl.on i::after { left: 21px; }

/* ---------- sheets (iPad-3 §14: teal scrim, 22 top radius; Web Code DrawerShell header/footer) ---------- */
.scrim { position: absolute; inset: 0; background: var(--md3-on-primary-container-a60); display: none; z-index: 20; }
.scrim.on { display: block; }
.sheet { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: calc(100% - 32px); max-width: 770px; max-height: 90%; background: var(--md3-on-primary); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; box-shadow: 0 8px 10px -5px var(--md3-neutral-primary-a20), 0 16px 24px 2px var(--md3-neutral-primary-a10), 0 6px 30px 5px var(--md3-neutral-primary-a10); }
.sheet .grab { width: 36px; height: 4px; border-radius: 999px; background: var(--md3-outline-variant); margin: var(--sp-12) auto var(--sp-4); flex: none; }
.sh-h { padding: var(--sp-8) var(--sp-24) var(--sp-16); border-bottom: 1px solid var(--md3-surface-variant); }
.sh-b { padding: var(--sp-24); overflow-y: auto; flex: 1; background: var(--md3-background); }
.sh-f { padding: var(--sp-16) var(--sp-24) var(--sp-20); border-top: 1px solid var(--md3-surface-variant); display: flex; gap: var(--sp-12); justify-content: flex-end; background: var(--md3-on-primary); }
/* wizard steps (Web Code NewAuditWizard StepHeader numbers, iPad-3 bar) */
.steps { display: flex; gap: var(--sp-8); margin-top: var(--sp-16); }
.steps div { flex: 1; }
.steps i { display: block; height: 4px; border-radius: 2px; background: var(--md3-surface-variant); }
.steps .done i { background: var(--md3-primary); } .steps .cur i { background: var(--md3-on-surface); }
.steps span { display: block; color: var(--md3-on-surface-variant); margin-top: var(--sp-8); }
.steps .done span { color: var(--md3-on-surface-variant); } .steps .cur span { color: var(--md3-on-surface); }
/* option cards inside sheets — white on the sheet's tinted body */
.opt { display: flex; align-items: center; gap: 14px; padding: var(--sp-16); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; min-height: 72px; background: var(--md3-on-primary); }
.opt.on { border-color: var(--md3-primary); background: var(--md3-surface); }
.opt + .opt { margin-top: var(--sp-8); }
.libgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-24); background: var(--md3-on-primary); border-radius: 12px; padding: 0 var(--sp-16); }
.libgrid a { display: flex; align-items: center; gap: var(--sp-12); height: 56px; border-bottom: 1px solid var(--line2); color: var(--md3-on-surface-variant); }

/* toast (the old build's) */
.toast { position: absolute; left: 50%; bottom: 96px; transform: translate(-50%, 20px); background: var(--md3-on-secondary-container); color: var(--md3-on-primary); padding: var(--sp-12) var(--sp-16); border-radius: 8px; opacity: 0; transition: .25s; z-index: 40; display: flex; gap: var(--sp-8); align-items: center; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* activity timeline (Web Code _activity rail) */
.tl { position: relative; padding-left: var(--sp-24); }
.tl::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1.5px; background: var(--md3-surface-variant); }
.tl > div { position: relative; padding-bottom: var(--sp-16); }
.tl > div::before { content: ''; position: absolute; left: -23px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--md3-on-primary); border: 2px solid var(--md3-outline); }
.tl > div.ok::before { border-color: var(--md3-primary); } .tl > div.bad::before { border-color: var(--md3-error); } .tl > div.info::before { border-color: var(--md3-add-primary); } .tl > div.warn::before { border-color: var(--md3-moderate-secondary); }

/* charts — no chart library; iPad-3 §7 bars */
.trend { display: flex; align-items: flex-end; gap: var(--sp-8); height: 110px; }
.trend div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); color: var(--md3-on-surface-variant); }
.trend i { display: block; width: 100%; max-width: 48px; border-radius: 4px 4px 0 0; background: var(--md3-primary-a20); }
.trend div:last-child i { background: linear-gradient(180deg, var(--md3-primary-a60), var(--md3-primary)); }
.mini { display: inline-flex; align-items: flex-end; gap: 3px; height: 28px; }
.mini i { display: block; width: 8px; border-radius: 2px; }
.th { display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-12) var(--sp-20); border-bottom: 1px solid var(--line2); background: var(--md3-displaybg-secondary); text-transform: uppercase; letter-spacing: 1.12px; color: var(--md3-on-surface-variant); border-radius: 16px 16px 0 0; }
.sevbar { display: inline-block; width: 10px; height: 10px !important; border-radius: 50%; flex: none; align-self: center; } /* G-8: the reference's edge bar becomes a severity dot (its inline colour is SEVC); rows add the severity tag */
.qbox { padding: var(--sp-16) 18px; border-radius: 12px; background: var(--md3-background); }

/* ---------- audit card, run, builder (phases 3–4 refine) ---------- */
.acard { padding: 18px var(--sp-20); cursor: pointer; }
.acard + .acard { margin-top: var(--sp-12); }
.astrip { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--sp-16); margin-top: 14px; padding: 14px var(--sp-16); background: var(--md3-background); border-radius: 12px; }
.astrip b { display: block; margin-top: 2px; }
.asec { margin-top: var(--sp-12); color: var(--md3-on-surface-variant); display: flex; flex-wrap: wrap; gap: 6px var(--sp-16); }
.runwrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--sp-16); align-items: start; }
.secnav { background: var(--md3-on-primary); border: 1px solid var(--line); border-radius: 16px; padding: var(--sp-8); }
.secnav a { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-12); border-radius: 10px; min-height: 52px; color: var(--md3-on-surface-variant); }
.secnav a.on { background: var(--md3-surface); color: var(--md3-on-surface); }
.ring-s { width: 28px; height: 28px; flex: none; }
.q { padding: var(--sp-20); }
.q + .q { margin-top: var(--sp-12); }
.ans { display: flex; gap: var(--sp-8); margin-top: 14px; }
.ans button { flex: 1; height: 56px; border-radius: 8px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); }
.ans .on.yes { background: var(--md3-on-background); border-color: var(--md3-primary); color: var(--md3-on-surface); }
.ans .on.no { background: var(--md3-error-container); border-color: var(--md3-error); color: var(--md3-on-error-container); }
.ans .on.na { background: var(--md3-displaybg-primary); border-color: var(--md3-outline); }
.finding { margin-top: 14px; padding: var(--sp-16); border-radius: 12px; background: var(--md3-error-container-a30); border: 1px solid var(--md3-error-container); }
.srow { padding: 14px 0 var(--sp-4); border-top: 1px solid var(--line2); margin-top: var(--sp-12); }
.fq { padding: var(--sp-16) 18px; cursor: pointer; }
.fq + .fq { margin-top: var(--sp-8); }
.fq.open { border-color: var(--md3-primary); box-shadow: 0 0 0 3px var(--md3-primary-a10); cursor: default; }
.prev { display: flex; gap: 6px; margin-top: var(--sp-8); }
.prev span { height: 30px; padding: 0 var(--sp-12); border-radius: 8px; border: 1px solid var(--md3-outline-variant); display: inline-flex; align-items: center; color: var(--md3-on-surface-variant); }
.secin { border: 0; outline: 0; background: none; font-family: inherit; color: var(--md3-neutral-primary); width: 100%; padding: var(--sp-4) 0; border-bottom: 1.5px dashed transparent; }
.secin:focus { border-bottom-color: var(--md3-primary); }

/* ---------- session grid (G-7: white cells, outcome as a dot; V5 look — phase 4 completes) ---------- */
.gridwrap { overflow: auto; max-height: 64vh; background: var(--md3-on-primary); border: 1px solid var(--line); border-radius: 16px; outline: none; }
.gridwrap:focus-visible { box-shadow: 0 0 0 3px var(--md3-primary-a20); }
.grid { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.grid th, .grid td { border-bottom: 1px solid var(--md3-surface-variant); border-right: 1px solid var(--md3-surface-variant); text-align: left; vertical-align: middle; background: var(--md3-on-primary); }
.grid thead th { position: sticky; z-index: 6; background: var(--md3-displaybg-secondary); padding: var(--sp-8) var(--sp-12); cursor: pointer; color: var(--md3-on-surface-variant); }
.grid thead tr.gsec th { top: 0; height: 32px; text-transform: uppercase; letter-spacing: .48px; cursor: default; }
.grid thead tr.gqh th { top: 32px; min-width: 184px; max-width: 216px; vertical-align: top; }
.grid .sticky { position: sticky; left: 0; z-index: 4; min-width: 200px; padding: var(--sp-8) var(--sp-12); box-shadow: 2px 0 4px var(--black-04); cursor: default; }
.grid thead .sticky { z-index: 8; }
.grid td.gc { min-width: 184px; max-width: 216px; height: 60px; padding: 6px var(--sp-12); position: relative; cursor: cell; user-select: none; -webkit-user-select: none; }
.grid td.lk { background: var(--md3-on-surface-variant-a5); cursor: not-allowed; } /* V5 not-applicable wash */
.grid td.rs { background: var(--md3-surface); }
.grid td.sel { box-shadow: inset 0 0 0 3px var(--md3-primary); z-index: 2; } /* V5 3px frame */
.grid td.err { box-shadow: inset 0 0 0 2px var(--md3-error); }
.grid td.fp { outline: 2px dashed var(--md3-outline); outline-offset: -4px; }
.grid td.ed { background: var(--md3-on-primary) !important; box-shadow: inset 0 0 0 2px var(--md3-primary), 0 0 0 3px var(--md3-primary-a20); z-index: 9; } /* V5 editing halo */
.gv { line-height: 1.3; display: flex; align-items: center; gap: 6px; justify-content: space-between; min-height: 36px; color: var(--md3-on-secondary-container); }
.grid td.num .gv { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.grid .gcrit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gu { color: var(--md3-on-surface-variant); margin-left: 3px; }
.gfl { color: var(--md3-error); display: inline-flex; flex: none; } .gfl.ok { color: var(--md3-on-surface-variant); }
.fh { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; background: var(--md3-primary); border: 2px solid var(--md3-on-primary); border-radius: 50%; cursor: crosshair; touch-action: none; z-index: 10; }
.ged { height: 36px; width: 100%; border: 0; outline: 0; font-family: inherit; background: transparent; color: var(--md3-on-secondary-container); padding: 0; }
.ged.r { text-align: right; font-variant-numeric: tabular-nums; }
.gedw { position: relative; }
.gopts { position: absolute; left: -10px; top: 42px; min-width: 230px; max-height: 230px; overflow: auto; background: var(--md3-on-primary); border-radius: 3px; box-shadow: 0 4px 16px var(--md3-neutral-primary-a20), 0 1px 3px var(--black-08); z-index: 30; padding: var(--sp-4); }
.gopts.up { top: auto; bottom: 42px; }
.gopt { display: flex; align-items: center; gap: var(--sp-8); padding: 0 var(--sp-12); border-radius: 4px; cursor: pointer; min-height: 42px; }
.gopt.hl { background: var(--md3-neutral05); }
.gdot { width: 8px; height: 8px; border-radius: 50%; background: var(--md3-outline-variant); flex: none; }
.gdot.pass { background: var(--md3-primary); } .gdot.partial { background: var(--md3-moderate-secondary); } .gdot.fail { background: var(--md3-error); } .gdot.na { background: var(--md3-outline); }
.gchips { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding-top: var(--sp-4); }
.gerr { position: absolute; left: -2px; top: 100%; z-index: 31; background: var(--md3-error); color: var(--md3-on-primary); padding: 6px 10px; border-radius: 0 0 8px 8px; white-space: nowrap; }
.gsl { height: 24px; padding: 0 var(--sp-8); border: 1px solid var(--md3-outline-variant); border-radius: 6px; background: var(--md3-on-primary); color: var(--md3-on-surface-variant); margin-top: 2px; }
.gslp { position: absolute; left: -10px; top: 66px; width: 250px; background: var(--md3-on-primary); border-radius: 3px; padding: 10px var(--sp-12); z-index: 30; box-shadow: 0 4px 16px var(--md3-neutral-primary-a20), 0 1px 3px var(--black-08); }
.gslp input { width: 100%; accent-color: var(--md3-primary); }
.gfoot th, .gfoot td { background: var(--md3-background) !important; position: sticky; bottom: 0; z-index: 5; padding: var(--sp-8) var(--sp-12); }
.gfoot th.sticky { z-index: 8; }
.glegend { display: flex; flex-wrap: wrap; gap: var(--sp-12); color: var(--md3-on-surface-variant); }
.glegend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--md3-outline-variant); }
.gcard { position: absolute; top: 0; right: 0; bottom: 72px; width: 380px; background: var(--md3-on-primary); border-left: 1px solid var(--md3-surface-variant); box-shadow: 0 12px 40px var(--md3-neutral-primary-a20); z-index: 18; display: flex; flex-direction: column; }
.gcard .gc-b { flex: 1; overflow-y: auto; padding: var(--sp-16) var(--sp-20); }

/* Figma capture (prototype only) */
.is-figma-picking .device, .is-figma-picking .device * { cursor: crosshair !important; }
[data-figma-pick] { outline: 2px solid var(--md3-add-primary) !important; outline-offset: 2px; }

/* ---------- dashboard (phase 1) ---------- */
.kpi-sub { display: flex; align-items: center; gap: var(--sp-8); color: var(--md3-on-surface-variant); }
.tl a { display: block; }
.tl .sm { margin-top: 2px; }

/* ---------- tone words and numbers: last, so they win over role colours ---------- */
.device .t-ok { color: var(--md3-on-surface); }
.device .t-warn { color: var(--md3-on-tertiary-container); }
.device .t-bad { color: var(--md3-error); }
.device .t-info { color: var(--md3-on-secondary-container); }
/* stat-size numbers may carry the tone (≥ 3:1 at 28px, as iPad-3's KPI numbers); amber is too light for text, so warn uses Tertiary */
.device .metric .num.t-warn, .device .num.t-warn { color: var(--md3-tertiary); }

/* ---------- governance (phase 2) ---------- */
.toolbar { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-16) var(--sp-20); }
.toolbar .search { flex: none; }
.toolbar .chips .chip { height: 36px; }
#reqlist > div > .grp + .card { margin-top: 0; }

/* ---------- audits (phase 3) ---------- */
/* an intro line placed straight in the page gets its own white container (G-4) */
main > p { background: var(--md3-on-primary); border: 1px solid var(--line); border-radius: 16px; padding: var(--sp-12) var(--sp-20); }
#audlist > div > .grp + .acard { margin-top: 0; border-top: 0; border-radius: 0 0 16px 16px; }
#audlist > div > .acard + .acard { margin-top: var(--sp-12); }
.fb-sechead { padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-20); margin-bottom: var(--sp-12); gap: var(--sp-12); }

/* ---------- session grid, V5 cell language (phase 4, G-7) ---------- */
.grid .sticky { width: 240px; min-width: 240px; max-width: 240px; }
.gid { min-width: 0; } .gid b { display: block; color: var(--md3-on-surface-variant); }
.gq { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-transform: uppercase; letter-spacing: .48px; }
.grid thead tr.gqh th { height: 72px; }
.grid thead tr.gqh .gcrit { color: var(--md3-on-surface-variant); margin-top: var(--sp-4); }
.gcritf { margin-left: auto; }
.gv { justify-content: flex-start; }
.gvt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid td.has-note::after { content: ''; position: absolute; top: 0; right: 0; border-top: 10px solid var(--md3-moderate-primary); border-left: 10px solid transparent; z-index: 1; } /* V5 note corner flag */
.gfoot td b { color: var(--md3-on-surface-variant); }
/* entry card — V5 CellEntryPopup layout, docked right on the tablet (spec §6 fallback) */
.gcard { width: 380px; border-radius: 12px 0 0 12px; border: 1px solid var(--md3-surface-variant); box-shadow: 0 12px 40px var(--md3-neutral-primary-a20); }
.gc-h { display: flex; align-items: flex-start; gap: var(--sp-12); padding: var(--sp-20) var(--sp-20) var(--sp-16); color: var(--md3-on-surface-variant); }
.gc-x { border: 0; width: 36px; height: 36px; }
.gcard .gc-b { padding: 0; }
.gc-sec { padding: 0 var(--sp-20) var(--sp-16); color: var(--md3-on-surface-variant); }
.gc-sec .seg { margin: var(--sp-8) 0 0; }
.gc-fix { margin: 0 var(--sp-20) var(--sp-16); padding: var(--sp-12) var(--sp-16); border-radius: 8px; background: var(--md3-error-container-a30); border: 1px solid var(--md3-error-container); }
.gc-when { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.gnote { min-height: 56px; height: 84px; padding: 14px var(--sp-16); resize: none; background: var(--md3-notes); border-color: var(--md3-moderate-secondary); color: var(--md3-on-tertiary-container); }
.gnote:focus { border-color: var(--md3-moderate-secondary); }
.gnote::placeholder { color: var(--md3-on-tertiary-container); opacity: .55; }
.gc-hist { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-8) 0; border-top: 1px solid var(--md3-surface-variant); margin-top: var(--sp-8); }
.gc-f { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-16); background: var(--md3-background); border-top: 1px solid var(--md3-surface-variant); }
.gc-f .btn { flex: 1; height: 48px; }
.gc-clear { border: 0; background: none; color: var(--md3-error); padding: 0 var(--sp-8); }
/* big-change confirm — V5 DeviationConfirmDialog visuals */
.dv-h { display: flex; align-items: center; gap: var(--sp-12); }
.dv-disc { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--md3-tertiary-container-a30); color: var(--md3-tertiary); }
.dv-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); padding: var(--sp-12) var(--sp-20); border: 1px solid var(--md3-surface-variant); border-radius: 8px; background: var(--md3-on-primary); }
.dv-last { color: var(--md3-on-surface-variant); font-variant-numeric: tabular-nums; } .dv-now { color: var(--md3-neutral-primary); font-variant-numeric: tabular-nums; }
.dv-arrows { display: flex; gap: var(--sp-4); }
.dv-arrows i { width: 8px; height: 14px; background: var(--md3-tertiary); clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%); }
.dv-arrows i:nth-child(1) { opacity: .3; } .dv-arrows i:nth-child(2) { opacity: .7; }
/* the run's progress bar sits in the header band, under the title (G-17) */
main > .bar { margin: 0 calc(-1 * var(--sp-16)) !important; height: 4px !important; border-radius: 0; background: var(--md3-surface-variant); }
main > .ph + .bar + * { margin-top: var(--sp-16) !important; }
/* risk (phase 5) */
.toolbar .seg { align-self: flex-start; }
/* library (phase 7): evidence gallery in a white container; the chosen item gets the selection ring */
.ev-item { border-radius: 12px; padding: var(--sp-4); }
.ev-item.on { outline: 2px solid var(--md3-primary); outline-offset: 2px; }

/* ---------- UX audit fixes (2026-09-27) ---------- */
/* 3 · one app bar (iPad-3 §1): white, 56 high, no border — the tint change separates it; page headers keep only their own action */
.appbar { flex: none; display: flex; align-items: center; gap: var(--sp-8); height: 56px; padding: 0 var(--sp-16) 0 var(--sp-24); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); border-bottom: 1px solid var(--md3-surface-variant); }
.appbar .chip { height: 40px; background: var(--md3-secondary-container-a30); border-color: var(--md3-outline-variant); }
.appbar .chip .app-icon { color: var(--md3-secondary-dark); }
.ph { flex-wrap: nowrap; align-items: center; }
.ph > div:first-child { flex: 1; min-width: 0; }
.ph-act:empty { display: none; }
/* 4 · contrast: secondary text is on-surface-variant (~7.9:1 on white); hierarchy comes from weight and size, not a failing grey */
.search input::placeholder { color: var(--md3-on-surface-variant); opacity: .75; }
/* 2 · filter buttons (Web Code AnimalsSheet: outlined, radius 8) at 44px; the active state gets the Surface fill and primary border */
.fbtn { display: inline-flex; align-items: center; gap: var(--sp-8); height: 44px; padding: 0 var(--sp-12) 0 var(--sp-16); border-radius: 8px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); color: var(--md3-on-surface); white-space: nowrap; }
.fbtn.on { background: var(--md3-surface); border-color: var(--md3-primary); }
.toolbar__row { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.toolbar__row .search { min-width: 220px; }
.toolbar .chips .chip { height: 40px; }
/* 1 · stat strip: one card, equal cells split by a hairline; as a filter, the chosen cell gets the tab underline */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; overflow: hidden; }
.strip__c { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-12) var(--sp-16); border: 0; border-left: 1px solid var(--line); background: none; text-align: left; font-family: inherit; min-height: 88px; justify-content: center; }
.strip__c:first-child { border-left: 0; }
button.strip__c { cursor: pointer; }
.strip__c.on { background: var(--md3-surface); box-shadow: inset 0 -3px 0 var(--md3-primary); }
.strip__n { color: var(--md3-neutral-primary); font-variant-numeric: tabular-nums; }
.device .strip__n.t-bad { color: var(--md3-error); } .device .strip__n.t-warn { color: var(--md3-tertiary); } .device .strip__n.t-ok { color: var(--md3-on-surface); }
/* 5 · session grid: one V5 toolbar, a taller grid, a right-edge fade while columns are hidden, a 28px touch area on the fill handle */
.gbar { padding: var(--sp-12) var(--sp-16); }
.gbar .seg { padding: 3px; }
.gbar .seg button { height: 38px; padding: 0 var(--sp-12); }
.gbar .ginp { border-color: var(--md3-outline-variant) !important; }
.gbar__help { display: inline-flex; align-items: center; gap: var(--sp-4); border: 0; background: none; color: var(--md3-on-surface-variant); cursor: help; }
.gridwrap { max-height: 720px; }
#gridhost { position: relative; }
#gridhost.more-r::after { content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 40px; border-radius: 0 16px 16px 0; background: linear-gradient(to left, var(--md3-on-primary), var(--md3-on-primary-a5)); pointer-events: none; z-index: 12; }
.fh::before { content: ''; position: absolute; inset: -9px; } /* 14px dot, 32px hit area */
.toolbar__row .search { flex: 1; }
/* entry card as a small window beside the cell (Batch Assessment V5 CellEntryPopup): radius 12, 1px line, 0 12px 40px shadow, scrolls inside */
.gcard { top: 0; right: auto; bottom: auto; left: 0; width: 380px; max-height: 1000px; border-radius: 12px; border: 1px solid var(--md3-surface-variant); z-index: 30; }
.gcard .gc-b { flex: 1; min-height: 0; overflow-y: auto; }
.gcard .gc-f { border-radius: 0 0 12px 12px; }
.gc-ptr { position: absolute; left: -18px; width: 18px; height: 28px; background: var(--md3-surface-variant); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.gc-ptr::after { content: ''; position: absolute; inset: 1px 0 1px 2px; left: 2px; right: -1px; background: var(--md3-on-primary); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.gcard.gc-left .gc-ptr { left: auto; right: -18px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.gcard.gc-left .gc-ptr::after { left: -1px; right: 2px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* page background is the Antz Background token on every page (Sourav, 2026-09-27; was iPad-3's displaybg-primary) */
.device, body.fill .device { background: var(--md3-background); }
/* entry-card body, Batch Assessment CellEntryPopup: 56px option rows, gap 8, max 4 visible (248px), radio/checkbox 22, chosen = OnBackground + 1px primary;
   fields 56px, radius 8, white, 1px line, hover and focus Outline, no focus ring */
.gc-opts { display: flex; flex-direction: column; gap: var(--sp-8); max-height: 248px; overflow-y: auto; }
.gc-opt { display: flex; align-items: center; gap: var(--sp-12); min-height: 56px; flex: none; padding: 0 var(--sp-12); border-radius: 8px; border: 1px solid var(--md3-surface-variant); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); text-align: left; font-family: inherit; cursor: pointer; }
.gc-opt:hover { border-color: var(--md3-outline); }
.gc-opt.on { background: var(--md3-on-background); border-color: var(--md3-primary); }
.gc-mark { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--md3-outline); display: grid; place-items: center; color: var(--md3-on-primary); }
.gc-opt.on .gc-mark { border-color: var(--md3-primary); box-shadow: inset 0 0 0 4px var(--md3-on-primary); background: var(--md3-primary); }
.gc-mark.sq { border-radius: 4px; }
.gc-opt.on .gc-mark.sq { box-shadow: none; }
.gc-half { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.gcard .inp { height: 56px; border-color: var(--md3-surface-variant); }
.gcard .inp:hover, .gcard .inp:focus { border-color: var(--md3-outline); }
.gc-num { text-align: left; }
.gc-unit { display: flex; align-items: center; color: var(--md3-on-surface-variant); background: var(--md3-on-primary); }
.gcard textarea.inp { height: 112px; }
.gcard .gnote { height: 84px; border-color: var(--md3-moderate-secondary); }
/* aligned list rows: one fixed column grid per list, so tags, dates and status pills line up down the list */
.lrow { display: grid; align-items: center; column-gap: var(--sp-16); min-height: 84px; }
.lrow--pol { grid-template-columns: 40px minmax(0,1fr) 132px 104px 176px 20px; }
.lrow--find { grid-template-columns: minmax(0,1fr) 72px 72px 204px 20px; }
.lrow__main { min-width: 0; }
.lrow .one, .dtab .one { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .flex .one { flex: 0 1 auto; min-width: 0; }
.lcol { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.lcol b { color: var(--md3-neutral-primary); }
.lcol--st { align-items: flex-start; }
.lcol--tag { align-items: flex-start; }
.lcol .bar { width: 100%; margin-top: 2px; }
/* list header with the view switcher */
.lhead { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-20); }
.vsw { margin: 0; padding: 3px; }
.vsw button { height: 36px; padding: 0 var(--sp-12); }
/* table view */
.dtab-wrap { background: var(--md3-on-primary); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.dtab { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dtab th { height: 48px; padding: 0 var(--sp-12); text-align: left; background: var(--md3-displaybg-secondary); color: var(--md3-on-surface-variant); text-transform: uppercase; letter-spacing: .48px; }
.dtab td { padding: var(--sp-12); border-top: 1px solid var(--md3-surface-variant); vertical-align: middle; color: var(--md3-on-surface-variant); }
.dtab th:first-child, .dtab td:first-child { padding-left: var(--sp-20); }
.dtab .r { text-align: right; }
.dtab tbody tr { cursor: pointer; }
.dtab tbody tr:hover, .dtab tbody tr:focus-visible { background: var(--md3-surface); outline: none; }
.dtab .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtab td b { color: var(--md3-neutral-primary); }
/* list rows: titles wrap (never cut), the meta line stays one line; columns keep their fixed grid */
.lrow--pol { grid-template-columns: 40px minmax(0,1fr) 120px 100px 164px 20px; }
.lrow .flex { align-items: flex-start; }
.lrow .flex .tag, .lrow .flex .sev { flex: none; margin-top: 1px; }
/* Library sheet: one white card per group, label inside, 56px rows with a 40px icon tile (iPad-3 All-tabs sheet), no divider under the last row */
.libgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; background: none; padding: 0; border-radius: 0; }
.libcard { background: var(--md3-on-primary); border: 1px solid var(--line); border-radius: 16px; padding: var(--sp-8) var(--sp-16); }
.libcard__h { padding: var(--sp-8) 0; }
.libcard a { display: flex; align-items: center; gap: var(--sp-12); min-height: 60px; border-top: 1px solid var(--md3-surface-variant); color: var(--md3-on-surface-variant); }
.libcard__h + a { border-top: 0; }
.libcard__ico { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); flex: none; }
.libcard .chev { color: var(--md3-outline); display: flex; }
.lhead .sm.muted { flex: 1; min-width: 0; padding-right: var(--sp-12); }
.lf > div > .grp + .card, .lf > div > .grp + section.card { margin-top: 0; }

/* ================= App phone (390 × 840) — standards: SURFACES shell / TABLE / FORM / LAYOUT, T1.2, T1.5, A11Y-TARGET-001 =================
   Page padding 16, one column, row cards only, filters behind an icon box, flows full page, touch targets stay 44. */
.device.is-phone { width: 390px; height: 840px; border-radius: 28px; }
body.fill .device.is-phone { width: 100vw; height: 100vh; border-radius: 0; }
.appbar__short { display: none; }
.is-phone .appbar__long { display: none; } .is-phone .appbar__short { display: inline; }
.is-phone .appbar { padding: 0 var(--sp-8) 0 var(--sp-16); }
.is-phone .appbar .btn.ghost { padding: 0 var(--sp-8); }
.is-phone main { padding: 0 var(--sp-16) var(--sp-16); }
.is-phone .ph, .is-phone .crumb, .is-phone .ph-chain, .is-phone .ph + .tabs, .is-phone .ph-chain + .tabs { padding-left: var(--sp-16); padding-right: var(--sp-16); }
.is-phone .ph { flex-wrap: wrap; align-items: flex-start; padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
.is-phone .ph .sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.is-phone .ph-chain { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.is-phone .tabs { gap: var(--sp-16); }
/* bottom tab bar: five items at 78 */
.is-phone .rail { padding: 0; }
.is-phone .nav { height: 64px; }
/* one column everywhere; KPI / stat tiles stay 3 across (LAYOUT) */
.is-phone .g2, .is-phone .g3, .is-phone .ms, .is-phone .rel, .is-phone .libgrid, .is-phone .gc-half { grid-template-columns: minmax(0,1fr); }
.is-phone .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-12); }
.is-phone .strip__c { min-height: 76px; padding: var(--sp-8) var(--sp-12); border-top: 1px solid var(--line); }
.is-phone .metric { padding: var(--sp-12) var(--sp-16); }
.is-phone .kv { grid-template-columns: 112px minmax(0,1fr); }
.is-phone .thumbs { grid-template-columns: repeat(2, 1fr) !important; }
.is-phone .astrip { grid-template-columns: 1fr 1fr; }
/* row cards: the right-hand columns fold under the title (never squeezed) */
.is-phone .row { padding: var(--sp-12) var(--sp-16); min-height: 64px; }
.is-phone .row:not(.lrow):not(.p-lab) { flex-wrap: nowrap; align-items: flex-start; gap: var(--sp-12); }
.is-phone .row:not(.lrow):not(.p-lab) > .grow { flex: 1 1 auto; min-width: 0; }
.is-phone .row:not(.lrow):not(.p-lab) > :not(.grow):not(.ico):not(.av):not(.chev):not(.sevbar) { flex: none; width: auto !important; max-width: 42%; text-align: right !important; }
.is-phone .row:not(.lrow):not(.p-lab) > .chev { margin-left: auto; align-self: center; }
.is-phone .lrow { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: var(--sp-12); row-gap: var(--sp-8); }
.is-phone .lrow > .ico { display: none; }
.is-phone .lrow__main { grid-column: 1 / -1; }
.is-phone .lrow .lcol { flex-direction: row; align-items: baseline; gap: var(--sp-8); grid-column: auto; }
.is-phone .lrow .lcol .bar { width: 72px; align-self: center; }
.is-phone .lrow .lcol--st { grid-column: 1 / -1; }
.is-phone .lrow > .chev { display: none; }
.is-phone .lrow--find .lcol--tag { display: none; }
.is-phone .acard { padding: var(--sp-16); }
/* list toolbar: search + filter icon box with count, active chips under (T1.5) */
.is-phone .toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-8); padding: var(--sp-12); }
.is-phone .toolbar__row { min-width: 0; }
.is-phone .toolbar__row .search { min-width: 0; }
.is-phone .toolbar > .chips { grid-column: 1 / -1; }
.is-phone .toolbar > .seg { grid-column: 1 / -1; overflow-x: auto; flex-wrap: nowrap; }
.phfilt { position: relative; }
.phfilt__n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--md3-on-surface); color: var(--md3-on-primary); display: grid; place-items: center; }
/* sheets: full width; flows and the filter sheet are full pages on the phone */
.is-phone .sheet { width: 100%; max-width: none; border-radius: 12px 12px 0 0; }
.is-phone .sheet.full { top: 0; max-height: none; height: 100%; border-radius: 0; }
.is-phone .sh-h, .is-phone .sh-b, .is-phone .sh-f { padding-left: var(--sp-16); padding-right: var(--sp-16); }
.is-phone .sh-f .btn.pri { flex: 1; height: 48px; }
.is-phone .steps span { display: none; } .is-phone .steps .cur span { display: block; }
/* session run: the section rail becomes a scrolling row */
.is-phone .runwrap { grid-template-columns: minmax(0,1fr); }
.is-phone .secnav { display: flex; overflow-x: auto; gap: var(--sp-4); }
.is-phone .secnav a { flex: none; min-height: 44px; }
.is-phone .ans button { height: 48px; }
.is-phone .gbar .toolbar__row { flex-wrap: wrap; }
.is-phone .fb-sechead { padding-left: var(--sp-16); }

/* ================= Phone session run (phone-run.js) — from the approved study phone-entry.html =================
   Session chrome replaces the app bar and tab bar (a focused task); the header collapses to a 48 bar on scroll. */
.device.in-session .appbar, .device.in-session .rail { display: none; }
.p-root { flex: 1; display: flex; flex-direction: column; margin: 0 calc(-1 * var(--sp-16)) calc(-1 * var(--sp-16)); min-height: 100%; background: var(--md3-background); color: var(--md3-on-surface-variant); }
.p-root .grow { flex: 1; min-width: 0; }
.p-muted { color: var(--md3-on-surface-variant); } .p-ink { color: var(--md3-neutral-primary); } .p-bad { color: var(--md3-error); } .p-ok { color: var(--md3-on-surface); } .p-soft { color: var(--md3-on-tertiary-container); } .p-err { color: var(--md3-error); }
.p-up { text-transform: uppercase; letter-spacing: .08em; }
.p-flex { display: flex; align-items: center; gap: var(--sp-8); }
.p-stack { display: grid; gap: var(--sp-8); margin-top: 10px; }
.p-page { padding: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-12); }
.p-card { background: var(--md3-on-primary); border: 1px solid var(--md3-neutral05); border-radius: 16px; }
.p-card.pad { padding: 14px var(--sp-16); }
.p-back { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; color: var(--md3-on-surface); align-self: flex-start; }
.p-kv { display: grid; grid-template-columns: 104px 1fr; gap: var(--sp-8) var(--sp-12); margin-top: var(--sp-12); }
.p-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: 4px; background: var(--md3-displaybg-primary); color: var(--md3-on-surface-variant); flex: none; }
.p-li { display: flex; align-items: center; gap: 10px; min-height: 52px; width: 100%; border: 0; border-top: 1px solid var(--md3-surface-variant); background: none; padding: 0; text-align: left; color: inherit; }
.p-li:first-of-type { border-top: 0; }
.p-cbx { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--md3-outline); display: grid; place-items: center; flex: none; background: var(--md3-on-primary); color: var(--md3-on-primary); }
.p-cbx.on { background: var(--md3-on-surface); border-color: var(--md3-on-surface); }
.p-av { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--md3-on-background); color: var(--md3-on-surface); display: grid; place-items: center; }
.p-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); height: 44px; padding: 0 var(--sp-16); border-radius: 8px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); white-space: nowrap; cursor: pointer; }
.p-btn.pri { background: var(--md3-on-surface); border-color: var(--md3-on-surface); color: var(--md3-on-primary); }
.p-btn.ghost { border-color: transparent; background: transparent; }
.p-btn.sm { height: 36px; padding: 0 var(--sp-12); } .p-btn.lg { height: 48px; } .p-btn.block { width: 100%; white-space: normal; height: auto; min-height: 44px; padding: var(--sp-8) var(--sp-12); }
.p-btn:disabled { background: var(--md3-surface-variant); border-color: var(--md3-surface-variant); color: var(--md3-on-surface-variant); cursor: not-allowed; }
.p-ib { width: 44px; height: 44px; flex: none; border-radius: 8px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); display: grid; place-items: center; color: var(--md3-on-surface-variant); position: relative; cursor: pointer; }
.p-ib.plain { border-color: transparent; background: transparent; }
.p-ib:disabled { opacity: .35; cursor: default; }
.p-ib .n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--md3-on-surface); color: var(--md3-on-primary); display: grid; place-items: center; }
.p-lnk { border: 0; background: none; padding: 4px 2px; color: var(--md3-on-surface); text-decoration: underline; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.p-banner { display: flex; gap: 10px; align-items: flex-start; padding: var(--sp-12) 14px; border-radius: 12px; background: var(--md3-notes-a40); color: var(--md3-on-tertiary-container); }
.p-banner.ok { background: var(--md3-on-background); color: var(--md3-on-surface); } .p-banner.bad { background: var(--md3-error-container); color: var(--md3-on-error-container); }
.p-dot { width: 10px; height: 10px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--md3-outline-variant); flex: none; display: inline-block; }
.p-dot.pass { background: var(--md3-primary); box-shadow: none; } .p-dot.partial { background: var(--md3-moderate-secondary); box-shadow: none; } .p-dot.fail { background: var(--md3-error); box-shadow: none; } .p-dot.na { background: var(--md3-outline); box-shadow: none; }
.p-seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--md3-displaybg-primary); }
.p-seg button { flex: 1; height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--md3-on-surface-variant); white-space: nowrap; cursor: pointer; }
.p-seg button.on { background: var(--md3-on-primary-container); color: var(--md3-on-primary); }
.p-opt { display: flex; align-items: center; gap: var(--sp-12); min-height: 56px; flex: none; width: 100%; padding: 0 var(--sp-12); border-radius: 8px; border: 1px solid var(--md3-surface-variant); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); text-align: left; cursor: pointer; }
.p-opt.on { background: var(--md3-on-background); border-color: var(--md3-primary); }
.p-rad { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--md3-outline); display: grid; place-items: center; color: var(--md3-on-primary); }
.p-opt.on .p-rad { border-color: var(--md3-primary); background: var(--md3-primary); box-shadow: inset 0 0 0 4px var(--md3-on-primary); }
.p-rad.sq { border-radius: 4px; } .p-opt.on .p-rad.sq { box-shadow: none; }
.p-foot { position: sticky; bottom: 0; margin-top: auto; padding: var(--sp-12) 18px 18px; background: var(--md3-on-primary); border-top: 1px solid var(--md3-surface-variant); display: flex; gap: 10px; }
/* session header + sticky tools */
.p-shd { background: var(--md3-on-primary); padding: 10px var(--sp-16) var(--sp-12); }
.p-shd h1 { margin: 6px 0 2px; }
.p-bar { height: 6px; border-radius: 3px; background: var(--md3-surface-variant); overflow: hidden; display: flex; }
.p-bar i { display: block; height: 100%; background: var(--md3-primary); } .p-bar i.f { background: var(--md3-error); }
.p-stick { position: sticky; top: 0; z-index: 8; background: var(--md3-on-primary); box-shadow: 0 1px 0 var(--md3-surface-variant); }
.p-cbar { position: absolute; left: 0; right: 0; bottom: 100%; background: var(--md3-on-primary); display: flex; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity var(--dur-short) var(--ease-standard), transform var(--dur-medium) var(--ease-standard); align-items: center; gap: 6px; height: 48px; padding: 0 var(--sp-8) 0 4px; border-bottom: 1px solid var(--md3-surface-variant); }
.p-root.collapsed .p-cbar { opacity: 1; transform: none; pointer-events: auto; }
.p-root.collapsed .p-stick { top: 48px; }
.p-cbar .ttl { flex: 1; min-width: 0; } .p-cbar .ttl span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-modes { display: flex; align-items: center; gap: 6px; padding: 6px var(--sp-8); }
.p-modes .p-seg { flex: 1; }
.p-findf { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: var(--sp-8); padding: 0 6px 0 14px; border-radius: 999px; background: var(--md3-background); }
.p-findf input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--md3-on-surface-variant); }
.p-focus { display: flex; align-items: center; gap: 2px; padding: 4px 2px 6px; border-top: 1px solid var(--md3-surface-variant); }
.p-ft { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 2px 4px; border-radius: 8px; cursor: pointer; }
.p-ft .l1 { display: flex; align-items: center; gap: 6px; }
.p-ft .nm { display: flex; align-items: center; gap: 4px; color: var(--md3-neutral-primary); white-space: nowrap; overflow: hidden; }
.p-ft .nm span { overflow: hidden; text-overflow: ellipsis; }
.p-ft .rl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-ring { width: 36px; height: 36px; flex: none; display: grid; place-items: center; position: relative; }
.p-ring svg { position: absolute; inset: 0; } .p-ring b { position: relative; }
/* rows */
.p-rows { background: var(--md3-on-primary); }
.p-sq { display: flex; align-items: center; gap: 10px; min-height: 48px; width: 100%; padding: 6px var(--sp-16); border: 0; border-bottom: 1px solid var(--md3-surface-variant); background: var(--md3-secondary-container-a30); color: var(--md3-on-secondary-container); text-align: left; cursor: pointer; }
.p-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 6px; min-height: 64px; padding: 10px var(--sp-12) 10px var(--sp-16); border-bottom: 1px solid var(--md3-surface-variant); touch-action: pan-y; }
.p-row.next { box-shadow: inset 3px 0 0 var(--md3-primary); }
.p-row.hl { animation: phl 1.2s ease-out; }
@keyframes phl { 0% { background: var(--md3-primary-a20); } 100% { background: transparent; } }
.p-row.locked { background: var(--md3-on-surface-variant-a5); }
.p-row.has-note::after { content: ''; position: absolute; top: 0; right: 0; border-top: 10px solid var(--md3-moderate-primary); border-left: 10px solid transparent; }
.p-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: inherit; }
.p-who .nm { display: block; color: var(--md3-neutral-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-who .mt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-row.q .p-who .nm { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.p-ctl { flex: none; display: flex; align-items: center; gap: 6px; }
.p-mark { width: 20px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.p-flag { color: var(--md3-error); display: flex; } .p-flag.done { color: var(--md3-outline); }
.p-under { flex-basis: 100%; margin-left: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.p-under.col { flex-direction: column; align-items: flex-start; }
.p-rchips { display: flex; flex-wrap: wrap; gap: 6px; }
.p-rchips button { height: 32px; padding: 0 var(--sp-12); border-radius: 999px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); cursor: pointer; }
.p-rchips button.on { border-color: var(--md3-primary); background: var(--md3-primary-a10); color: var(--md3-on-surface); }
.p-grp { padding: var(--sp-12) var(--sp-16) 6px; background: var(--md3-background); border-bottom: 1px solid var(--md3-surface-variant); text-transform: uppercase; letter-spacing: .08em; }
.p-yn { display: flex; border: 1px solid var(--md3-outline-variant); border-radius: 8px; overflow: hidden; }
.p-yn button { width: 46px; height: 44px; border: 0; border-left: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); cursor: pointer; }
.p-yn button:first-child { border-left: 0; } .p-yn.sc button { width: 30px; }
.p-yn button.on.pass { background: var(--md3-on-background); color: var(--md3-on-surface); box-shadow: inset 0 0 0 2px var(--md3-primary); }
.p-yn button.on.fail { background: var(--md3-error-container); color: var(--md3-on-error-container); box-shadow: inset 0 0 0 2px var(--md3-error); }
.p-yn button.on.na, .p-yn button.on.partial, .p-yn button.on.review { background: var(--md3-displaybg-primary); box-shadow: inset 0 0 0 2px var(--md3-outline); }
.p-num { display: flex; align-items: center; gap: 6px; }
.p-num input { width: 96px; height: 44px; padding: 0 10px; border: 1px solid var(--md3-outline-variant); border-radius: 8px; text-align: right; color: var(--md3-on-secondary-container); background: var(--md3-on-primary); outline: none; font-family: inherit; font-variant-numeric: tabular-nums; }
.p-num input:focus { border-color: var(--md3-primary); box-shadow: 0 0 0 3px var(--md3-primary-a20); }
.p-num input.bad { border-color: var(--md3-error); } .p-num input.held { border-color: var(--md3-moderate-secondary); box-shadow: 0 0 0 3px var(--md3-moderate-secondary-a20); }
.p-num .u { width: 24px; }
.p-pv { height: 44px; max-width: 160px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 var(--sp-12); border-radius: 8px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); color: var(--md3-on-secondary-container); cursor: pointer; }
.p-pv span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-pv.empty { color: var(--md3-on-surface-variant); border-style: dashed; }
.p-roval { max-width: 160px; color: var(--md3-on-secondary-container); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-sum { position: sticky; bottom: 0; z-index: 7; margin-top: auto; display: flex; align-items: center; gap: var(--sp-8); min-height: 60px; padding: var(--sp-8) 18px var(--sp-12); background: var(--md3-on-primary); border-top: 1px solid var(--md3-surface-variant); box-shadow: 0 -2px 8px var(--black-04); }
/* map */
.p-mtabs { display: flex; gap: 20px; padding: 0 var(--sp-16); border-top: 1px solid var(--md3-surface-variant); }
.p-mtabs button { height: 44px; border: 0; background: none; border-bottom: 2px solid transparent; color: var(--md3-on-surface-variant); cursor: pointer; }
.p-mtabs button.on { color: var(--md3-on-surface); border-bottom-color: var(--md3-primary); }
.p-mxw { overflow: auto; background: var(--md3-on-primary); max-height: 600px; }
.p-mx { border-collapse: separate; border-spacing: 0; }
.p-mx th, .p-mx td { padding: 0; background: var(--md3-on-primary); }
.p-mx thead th { position: sticky; top: 0; z-index: 2; height: 44px; vertical-align: bottom; padding-bottom: 6px; border-bottom: 1px solid var(--md3-surface-variant); }
.p-mx .qh span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); }
.p-mx .ent { position: sticky; left: 0; z-index: 1; width: 112px; min-width: 112px; max-width: 112px; padding: 0 var(--sp-8) 0 var(--sp-16); text-align: left; border-right: 1px solid var(--md3-surface-variant); }
.p-mx thead .ent { z-index: 3; }
.p-mx .ent button { border: 0; background: none; padding: 0; width: 100%; text-align: left; color: var(--md3-neutral-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; height: 44px; cursor: pointer; }
.p-mx td.c { width: 30px; min-width: 30px; border-bottom: 1px solid var(--md3-surface-variant); }
.p-mx td.c button { width: 30px; height: 44px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; }
.p-mx td.c .p-dot { width: 14px; height: 14px; } .p-mx td.c .p-dot.undec { box-shadow: 0 0 0 3px var(--md3-error-container); }
.p-mx .sx { box-shadow: inset 1px 0 0 var(--md3-surface-variant); }
.p-hatch { width: 14px; height: 14px; border-radius: 3px; background: repeating-linear-gradient(45deg, var(--md3-surface-variant), var(--md3-surface-variant) 2px, transparent 2px, transparent 4px); display: inline-block; }
.p-gq { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 10px var(--sp-16); border: 0; border-bottom: 1px solid var(--md3-surface-variant); background: var(--md3-on-primary); text-align: left; color: var(--md3-on-surface-variant); cursor: pointer; }
.p-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: var(--sp-12) var(--sp-16); }
.p-legend span { display: inline-flex; align-items: center; gap: 6px; }
/* review */
.p-rvs { display: flex; flex-direction: column; }
.p-rvi { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: var(--sp-8) 4px; border: 0; border-top: 1px solid var(--md3-surface-variant); background: none; width: 100%; text-align: left; color: var(--md3-on-surface-variant); cursor: pointer; }
.p-rvs > span + .p-rvi { border-top: 0; }
.p-fld { width: 100%; height: 56px; padding: 0 var(--sp-16); border: 1px solid var(--md3-surface-variant); border-radius: 8px; background: var(--md3-on-primary); color: var(--md3-on-surface-variant); outline: none; font-family: inherit; }
.p-fld:focus, .p-fld:hover { border-color: var(--md3-outline); }
textarea.p-fld { height: 96px; padding: 14px var(--sp-16); resize: none; }
.p-note { background: var(--md3-notes); border-color: var(--md3-moderate-secondary) !important; color: var(--md3-on-tertiary-container); }
/* sheets (the build's sheet shell; body content) */
.p-shh { padding-left: var(--sp-16); }
.p-sec { background: var(--md3-on-primary); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.p-fix { background: var(--md3-error-container-a30); border: 1px solid var(--md3-error-container); }
.p-opts { display: flex; flex-direction: column; gap: var(--sp-8); max-height: 248px; overflow-y: auto; }
.p-half { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.p-fld.unit { display: flex; align-items: center; }
.p-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); }
.p-big button { height: 56px; border-radius: 8px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); cursor: pointer; }
.p-big button.on.pass { background: var(--md3-on-background); border-color: var(--md3-primary); color: var(--md3-on-surface); }
.p-big button.on.fail { background: var(--md3-error-container); border-color: var(--md3-error); color: var(--md3-on-error-container); }
.p-big button.on.na { background: var(--md3-displaybg-primary); border-color: var(--md3-outline); }
.p-hist { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-8) 0; border-top: 1px solid var(--md3-surface-variant); }
.p-rng { width: 100%; accent-color: var(--md3-primary); height: 32px; }
.p-tgl { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); min-height: 52px; border: 0; background: none; padding: 0; width: 100%; text-align: left; cursor: pointer; color: inherit; }
.p-tgl i { width: 44px; height: 26px; border-radius: 13px; background: var(--md3-outline-variant); position: relative; flex: none; }
.p-tgl i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--md3-on-primary); transition: left .15s; }
.p-tgl.on i { background: var(--md3-primary); } .p-tgl.on i::after { left: 21px; }
.p-mi { display: flex; align-items: center; gap: var(--sp-12); min-height: 60px; padding: var(--sp-8) 4px; border: 0; border-top: 1px solid var(--md3-surface-variant); background: none; width: 100%; text-align: left; color: var(--md3-on-surface-variant); cursor: pointer; }
.p-mi:first-child { border-top: 0; } .p-mi:disabled { opacity: .45; cursor: default; }
.p-pk { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 4px; border: 0; border-top: 1px solid var(--md3-surface-variant); background: none; width: 100%; text-align: left; color: var(--md3-on-surface-variant); cursor: pointer; }
.p-pk.on { color: var(--md3-on-surface); }
.p-chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.p-chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); cursor: pointer; }
.p-chip.on { background: var(--md3-primary-a10); border-color: var(--md3-primary); color: var(--md3-on-surface); }
.p-vf { position: relative; height: 260px; border-radius: 16px; background: var(--md3-on-secondary-container); display: grid; place-items: center; overflow: hidden; }
.p-vf i { position: absolute; width: 170px; height: 170px; border: 3px solid var(--md3-primary-container); border-radius: 16px; }
.p-vf .ln { position: absolute; left: 22%; right: 22%; height: 2px; background: var(--md3-primary-container); animation: pscan 1.8s ease-in-out infinite alternate; }
@keyframes pscan { from { top: 32%; } to { top: 66%; } }
.p-snack { position: absolute; left: 12px; right: 12px; bottom: 72px; z-index: 30; display: flex; align-items: center; gap: var(--sp-12); min-height: 48px; padding: 6px var(--sp-8) 6px var(--sp-16); border-radius: 8px; background: var(--md3-on-secondary-container); color: var(--md3-on-primary); opacity: 0; transform: translateY(12px); transition: .2s; pointer-events: none; }
.p-snack.on { opacity: 1; transform: none; pointer-events: auto; }
.p-snack button { border: 0; background: none; color: var(--md3-primary-container); height: 40px; padding: 0 10px; cursor: pointer; }
.device.in-session main { padding-bottom: 0; }
.device.in-session .p-root { margin-bottom: 0; }
.sh-h.p-shh { display: flex; align-items: flex-start; gap: var(--sp-8); padding-right: var(--sp-8); }
.p-btn.p-bad { color: var(--md3-error); }

/* ============ Motion (docs/motion-plan.md) — Material 3 timing; transform and opacity only ============ */
:root { --dur-press: 100ms; --dur-short: 150ms; --dur-medium: 250ms; --dur-long: 350ms;
  --ease-standard: cubic-bezier(.2,0,0,1); --ease-enter: cubic-bezier(.05,.7,.1,1); --ease-exit: cubic-bezier(.3,0,.8,.15); }
/* sheets: the scrim fades, the sheet slides up; on close both stay mounted until the slide ends */
.scrim { display: block; visibility: hidden; opacity: 0; transition: opacity 200ms var(--ease-exit), visibility 0s 200ms; }
.scrim.on { visibility: visible; opacity: 1; transition: opacity 200ms var(--ease-standard); }
.scrim .sheet { transform: translate(-50%, 100%); transition: transform 200ms var(--ease-exit); }
.scrim.on .sheet { transform: translateX(-50%); transition: transform 300ms var(--ease-enter); }
.device:not(.is-phone) .scrim.on .sheet { transition-duration: var(--dur-long); }
.toast { transition: opacity 200ms var(--ease-standard), transform 200ms var(--ease-enter); }
.p-snack { transition: opacity 200ms var(--ease-standard), transform 200ms var(--ease-enter); }
/* colour changes on selection fade instead of snapping */
.device :is(.seg > *, .p-seg > *, .tabs > *, .p-mtabs > *, .strip__c, .chip, .btn, .p-btn, .opt, .p-opt, .row, .p-row, .metric, .rail a, .gcell, .p-ans button) {
  transition: background-color var(--dur-short) var(--ease-standard), color var(--dur-short) var(--ease-standard), border-color var(--dur-short) var(--ease-standard), transform var(--dur-press) var(--ease-standard); }
/* press: a tint within 100 ms; buttons give a little */
.device :is(.btn, .p-btn, .chip, .seg > *, .p-seg > *, .p-ans button):active { transform: scale(.97); }
.device :is(.row, .p-row, .opt, .p-opt, .acard, .p-card, a.card, .card[onclick], .libcard a):active { background-image: linear-gradient(var(--md3-neutral-primary-a5), var(--md3-neutral-primary-a5)); }
/* glide ghosts: the selected look travels from the old item to the new one */
.m-gliding > * { position: relative; z-index: 1; }
.m-ghost { position: absolute; z-index: 0; pointer-events: none; transform-origin: 0 0; }
.m-ghost.pill { background: var(--md3-on-primary-container); border-radius: 8px; }
.m-ghost.line { background: var(--md3-primary); }
.m-ghost.cell { background: var(--md3-surface); box-shadow: inset 0 -3px 0 var(--md3-primary); }
.m-gliding > .on { background-color: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; }
.m-gliding.strip > .on { background: transparent; }
/* route changes (View Transitions): the page moves, the app bar and tab bar stay */
#main { view-transition-name: page; }
#appbar { view-transition-name: appbar; }
#rail { view-transition-name: rail; }
::view-transition-group(root) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(page) { animation-duration: var(--dur-medium); animation-timing-function: var(--ease-standard); }
::view-transition-old(page) { animation: m-out 120ms var(--ease-exit) both; }
::view-transition-new(page) { animation: m-in var(--dur-medium) var(--ease-enter) both; }
:root[data-nav="fwd"]::view-transition-new(page) { animation-name: m-in-fwd; }
:root[data-nav="back"]::view-transition-new(page) { animation-name: m-in-back; }
::view-transition-old(appbar), ::view-transition-new(appbar), ::view-transition-old(rail), ::view-transition-new(rail) { animation-duration: var(--dur-short); }
@keyframes m-out { to { opacity: 0; } }
@keyframes m-in { from { opacity: 0; } }
@keyframes m-in-fwd { from { opacity: 0; transform: translateX(12px); } }
@keyframes m-in-back { from { opacity: 0; transform: translateX(-12px); } }
/* reduced motion (the OS setting, or the stage toggle): no movement, short fades only */
@media (prefers-reduced-motion: reduce) {
  .device *, .device *::before, .device *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .scrim, .scrim.on { transition: opacity 100ms linear, visibility 0s; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.reduce-motion .device *, .reduce-motion .device *::before, .reduce-motion .device *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
.reduce-motion .scrim, .reduce-motion .scrim.on { transition: opacity 100ms linear, visibility 0s; }
/* values ease to their new size; the grid card and new answers arrive instead of appearing */
.bar i, .p-bar i { transition: width 300ms var(--ease-standard); }
svg circle { transition: stroke-dasharray 300ms var(--ease-standard), stroke-dashoffset 300ms var(--ease-standard); }
.gcard { animation: m-pop var(--dur-short) var(--ease-enter); }
@keyframes m-pop { from { opacity: 0; transform: scale(.98); } }

/* ============ Phone shell (docs/phone-native-plan.md P1, phone-shell.js) ============ */
.is-phone .appbar { gap: var(--sp-4); padding: 0 var(--sp-4); }
.iconbtn.plain { border-color: transparent; background: transparent; color: var(--md3-on-surface); }
.is-phone .appbar__title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--md3-neutral-primary); }
.is-phone .appbar__site { max-width: 150px; margin-right: var(--sp-4); }
.appbar__sitet { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pab-t { opacity: 0; transform: translateY(6px); transition: opacity var(--dur-short) var(--ease-standard), transform var(--dur-medium) var(--ease-standard); }
.appbar.show-t .pab-t { opacity: 1; transform: none; }
.is-phone .ph.p-hide, .is-phone .ph-chain { display: none; }
.is-phone .ph-act > .btn { display: none; }
.is-phone .ph-act { margin-left: 0; }
.is-phone main > .ph:first-child, .is-phone main > .ph.p-hide + * { margin-top: 0; }
.is-phone main > .ph.p-hide + .tabs { margin-top: 0; }
.pact { flex: none; position: relative; }
.pbar { display: flex; gap: var(--sp-8); padding: var(--sp-12) var(--sp-16); background: var(--md3-on-primary); border-top: 1px solid var(--md3-surface-variant); }
.pbar .btn { height: 48px; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar .btn.pri { flex: 1; max-width: none; }
.fab { position: absolute; right: var(--sp-16); bottom: var(--sp-16); z-index: 15; display: flex; align-items: center; gap: var(--sp-8); height: 56px; max-width: calc(100vw - 32px); padding: 0 var(--sp-20) 0 var(--sp-16); border: 0; border-radius: 16px;
  background: var(--md3-on-surface); color: var(--md3-on-primary); cursor: pointer; box-shadow: 0 4px 8px 3px var(--md3-neutral-primary-a10), 0 1px 3px var(--md3-neutral-primary-a20);
  transition: padding var(--dur-medium) var(--ease-standard), transform var(--dur-press) var(--ease-standard); }
.fab span { white-space: nowrap; overflow: hidden; }
.fab.mini { padding: 0 var(--sp-16); }
.fab.mini span { display: none; }
.fab:active { transform: scale(.97); }
.is-phone.has-fab main { padding-bottom: 88px; }
.device.p-task .rail { display: none; }
.is-phone .toast { bottom: 80px; max-width: calc(100% - 32px); }
.is-phone.has-pbar .toast, .is-phone.has-fab .toast { bottom: 152px; }
.is-phone.p-task .toast { bottom: 16px; }
.is-phone.p-task.has-pbar .toast { bottom: 88px; }
.is-phone .tabs { position: relative; }
.is-phone .tabs.fr { -webkit-mask-image: linear-gradient(to right, var(--md3-on-surface) calc(100% - 40px), transparent); mask-image: linear-gradient(to right, var(--md3-on-surface) calc(100% - 40px), transparent); }
.is-phone .tabs.fl { -webkit-mask-image: linear-gradient(to left, var(--md3-on-surface) calc(100% - 40px), transparent); mask-image: linear-gradient(to left, var(--md3-on-surface) calc(100% - 40px), transparent); }
.is-phone .tabs.fl.fr { -webkit-mask-image: linear-gradient(to right, transparent, var(--md3-on-surface) 40px, var(--md3-on-surface) calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, var(--md3-on-surface) 40px, var(--md3-on-surface) calc(100% - 40px), transparent); }

/* ============ Phone detail template (P2) ============ */
/* traceability chain: a compact timeline of rows, not five stacked boxes */
.is-phone .chain { flex-direction: column; gap: 0; }
.is-phone .chain .link { display: none; }
.is-phone .node { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); min-height: 48px; padding: var(--sp-8) 0 var(--sp-8) var(--sp-24); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.is-phone .node:first-child { border-top: 0; }
.is-phone .node::before { content: ''; position: absolute; left: 4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--md3-outline-variant); }
.is-phone .node::after { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--md3-surface-variant); z-index: -1; }
.is-phone .node.cur { background: none; }
.is-phone .node.cur::before { background: var(--md3-primary); }
.is-phone .node .v { margin: 0; max-width: 60%; text-align: right; }
.is-phone .chain { isolation: isolate; }
/* long link chips and status pills wrap instead of running off the card */
.is-phone .tag { height: auto !important; min-height: 30px; padding-top: 6px !important; padding-bottom: 6px !important; white-space: normal; max-width: 100%; }
.is-phone .g4 > *, .is-phone .g2 > *, .is-phone .g3 > * { min-width: 0; }
.is-phone .metric .pill { max-width: 100%; white-space: normal; height: auto; min-height: 28px; }
/* stat strips: 2 or 3 cells sit in one row, 4 make a 2 × 2, any other count scrolls sideways instead of leaving orphans */
.is-phone .strip { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(128px, 1fr); overflow-x: auto; scrollbar-width: none; }
.is-phone .strip::-webkit-scrollbar { display: none; }
.is-phone .strip__c, .is-phone .strip__c:nth-child(-n+3) { border-top: 0; }
.is-phone .strip__c:nth-child(3n+1) { border-left: 1px solid var(--line); }
.is-phone .strip__c:first-child { border-left: 0; }
.is-phone .strip:has(> :nth-child(4):last-child) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0,1fr)); overflow: visible; }
.is-phone .strip:has(> :nth-child(4):last-child) > :nth-child(3) { border-left: 0; }
.is-phone .strip:has(> :nth-child(4):last-child) > :nth-child(n+3) { border-top: 1px solid var(--line); }
.is-phone .strip .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ Phone list template (P3) ============ */
/* object cell: one trailing element; a link row's own button is decorative (the whole row opens it), so it goes */
.is-phone a.row > .btn { display: none; }
/* search + filter pinned under the top bar, on the page colour, not in a card */
.is-phone main .card.toolbar:not(.gbar) { position: sticky; top: 0; z-index: 5; margin-left: calc(-1 * var(--sp-16)); margin-right: calc(-1 * var(--sp-16)); padding: var(--sp-8) var(--sp-16); border: 0; border-radius: 0; box-shadow: none; background: var(--md3-background); }
.is-phone main .card.toolbar .search { background: var(--md3-on-primary); border: 1px solid var(--md3-outline-variant); }
.is-phone main .card.toolbar .iconbtn { background: var(--md3-on-primary); }
/* segmented controls never wrap: one row, scrolls when it doesn't fit, with the same edge fade as tabs */
.is-phone .seg { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.is-phone .seg::-webkit-scrollbar { display: none; }
.is-phone .seg > * { flex: 1 0 auto; padding: 0 var(--sp-12); white-space: nowrap; }
.is-phone .seg.fr { -webkit-mask-image: linear-gradient(to right, var(--md3-on-surface) calc(100% - 32px), transparent); mask-image: linear-gradient(to right, var(--md3-on-surface) calc(100% - 32px), transparent); }
.is-phone .seg.fl.fr { -webkit-mask-image: linear-gradient(to right, transparent, var(--md3-on-surface) 32px, var(--md3-on-surface) calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, var(--md3-on-surface) 32px, var(--md3-on-surface) calc(100% - 32px), transparent); }
.is-phone .seg.fl:not(.fr) { -webkit-mask-image: linear-gradient(to left, var(--md3-on-surface) calc(100% - 32px), transparent); mask-image: linear-gradient(to left, var(--md3-on-surface) calc(100% - 32px), transparent); }
/* labelled table rows (pLabels): name on top, the values as a 3-up grid of label over value */
.is-phone .th { display: none; }
.is-phone .row.p-lab { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-12); }
.is-phone .row.p-lab > .grow { grid-column: 1 / -1; }
.is-phone .row.p-lab > :not(.grow) { width: auto !important; max-width: none; text-align: left !important; display: flex !important; flex-flow: row wrap; align-items: center; align-content: flex-start; align-self: start; gap: 4px; }
.p-lab-l { flex-basis: 100%; color: var(--md3-on-surface-variant); }
.is-phone .row.p-lab > :not(.grow) > .sm { flex-basis: 100%; margin-top: 0; }
/* compact audit card (auditCard on the phone) */
.p-acard__h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-12); }
.p-acard__h .title { min-width: 0; }
.p-acard__h .pill { flex: none; }
.p-acard .meta { margin-top: var(--sp-4); color: var(--md3-on-surface-variant); }
.p-acard__f { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-16); margin-top: var(--sp-12); padding-top: var(--sp-12); border-top: 1px solid var(--line); color: var(--md3-on-surface-variant); }
.p-acard__f b { color: var(--md3-neutral-primary); }

/* ============ Phone editors (P5) ============ */
.p-hidden { display: none !important; }
.p-pickrow { display: flex; align-items: center; gap: var(--sp-8); width: 100%; min-height: 56px; padding: 0 var(--sp-12) 0 var(--sp-16); border: 1px solid var(--md3-outline-variant); border-radius: 8px; background: var(--md3-on-primary); color: var(--md3-on-surface); text-align: left; cursor: pointer; font-family: inherit; }
.p-pickrow .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-pick { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--md3-on-primary); animation: m-in-fwd var(--dur-medium) var(--ease-enter); }
.p-pick__h { flex: none; display: flex; align-items: center; gap: var(--sp-4); height: 56px; padding: 0 var(--sp-12) 0 var(--sp-4); border-bottom: 1px solid var(--md3-surface-variant); }
.p-pick__h .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--md3-neutral-primary); }
.p-pick__s { flex: none; margin: var(--sp-12) var(--sp-16) 0; }
.p-pick__list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-8) 0; }
.p-pickopt { display: flex; align-items: center; gap: var(--sp-12); width: 100%; min-height: 56px; padding: var(--sp-8) var(--sp-16); border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--md3-on-surface); text-align: left; cursor: pointer; font-family: inherit; }
.p-pickopt.on { background: var(--md3-surface); }
.p-pickopt .p-rad { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--md3-outline); display: grid; place-items: center; color: var(--md3-on-primary); }
.p-pickopt .p-rad.sq { border-radius: 4px; }
.p-pickopt.on .p-rad { border-color: var(--md3-primary); background: var(--md3-primary); }
/* form builder: the open question is a full-screen editor with its tools pinned at the bottom */
.is-phone .fq.open { position: absolute; inset: 0; z-index: 22; margin: 0 !important; border: 0; border-radius: 0; overflow-y: auto; padding: var(--sp-16); box-shadow: none; animation: m-in-fwd var(--dur-medium) var(--ease-enter); }
.is-phone .fq.open > :last-child { position: sticky; bottom: calc(-1 * var(--sp-16)); margin: var(--sp-16) calc(-1 * var(--sp-16)) calc(-1 * var(--sp-16)) !important; padding: var(--sp-12) var(--sp-16) !important; background: var(--md3-on-primary); border-top: 1px solid var(--md3-surface-variant) !important; }
.is-phone .fq.open > :last-child .btn.sm { height: 44px; }
.is-phone .fq .prev span { min-height: 44px; }
/* option editors in sheets (response sets, list options): the name takes the row, the outcome segment and remove sit under it */
.is-phone .sh-b .field > .flex:has(> .inp + .seg) { flex-wrap: wrap; gap: var(--sp-8); padding-bottom: var(--sp-12); border-bottom: 1px solid var(--line); }
.is-phone .sh-b .field > .flex:has(> .inp + .seg) > .inp { flex: 1 1 100%; }
.is-phone .sh-b .field > .flex:has(> .inp + .seg) > .seg { flex: 1 1 auto; }
.is-phone .sh-b .field > .flex:has(> .inp + .seg) > .iconbtn { width: 44px; flex: none; }
/* session form: the answer badge drops under the question instead of squeezing it */
.is-phone .q > .flex:first-child { flex-wrap: wrap; }
.is-phone .q > .flex:first-child > span[id^="b-"] { flex-basis: 100%; padding-left: 40px; }
/* hit areas: nothing tappable under 44 */
.is-phone .iconbtn { min-width: 44px; min-height: 44px; }
.is-phone .chip { min-height: 44px; }
.device .p-pickrow .grow, .device .p-pickopt .grow { color: var(--md3-neutral-primary); }
.device .p-pickrow .grow.faint { color: var(--md3-on-surface-variant); }
/* the open question editor lives inside #main's layer, so the page's own action bar steps aside while it is open */
.is-phone:has(.fq.open) .pact { display: none; }
/* phone hit areas (walk phone pass): small buttons, ghost buttons and segments grow to 44 */
.is-phone .device .btn.sm, .device.is-phone .btn.sm, .device.is-phone .btn.ghost { height: 44px; min-width: 44px; }
.device.is-phone .seg > * { min-height: 44px; min-width: 44px; }
.device.is-phone .p-back, .device.is-phone .p-lnk { min-height: 44px; display: inline-flex; align-items: center; }
.device.is-phone .p-btn { min-height: 44px; }
.device.is-phone .p-who { min-height: 44px; }
.device.is-phone .p-seg button { min-height: 44px; }

/* ============ Tablet shell (Sourav 2026-09-28, tShell in phone-shell.js): no app bar, title-only headers, FAB + bottom action bar ============ */
.device:not(.is-phone) .appbar { display: none; }
.device:not(.is-phone) .ph .sub, .device:not(.is-phone) .ph-act > .btn { display: none; }
.device:not(.is-phone) main > .ph:first-child, .device:not(.is-phone) main > .crumb:first-child { padding-top: var(--sp-24); }
/* site selector — the same control as grc-mobile's header: location icon · site name · chevron, teal text, no chip */
.device .ph-act .tsite { display: inline-flex; align-items: center; gap: var(--sp-4); height: 44px; padding: 0 var(--sp-8); border: 0; border-radius: 8px; background: none; color: var(--md3-on-primary-container); cursor: pointer; font-family: inherit; }
.device .ph-act .tsite:hover { background: var(--md3-background); }
.tsite__t { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device:not(.is-phone).has-fab main { padding-bottom: 104px; }
.device:not(.is-phone) .fab { right: var(--sp-24); bottom: var(--sp-24); }
.device:not(.is-phone) .pbar { justify-content: flex-end; gap: var(--sp-12); padding: var(--sp-12) var(--sp-24); }
.device:not(.is-phone) .pbar .btn { max-width: none; height: 48px; }
.device:not(.is-phone) .pbar .btn.pri { flex: none; min-width: 220px; }
.device:not(.is-phone).has-pbar .toast { bottom: 168px; }

/* ============ Picker sheet — identical to grc-mobile's (grab · title + × · search · band · radio rows · Confirm) ============ */
.sheet:has(> .pk) { padding: 0; border-radius: 12px 12px 0 0; max-height: 88%; overflow: hidden; }
.pk { display: flex; flex-direction: column; max-height: 100%; min-height: 0; }
.pk > .grab { width: 36px; height: 4px; margin: var(--sp-8) auto 0; border-radius: 2px; background: var(--md3-outline-variant); }
.pk-h { flex: none; display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-24); color: var(--md3-on-primary-container); }
.pk-sr { flex: none; display: flex; align-items: center; gap: var(--sp-8); height: 44px; margin: 0 var(--sp-24) var(--sp-12); padding: 0 var(--sp-12); border-radius: 8px; background: var(--md3-background); color: var(--md3-on-primary-container); }
.pk-sr input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--md3-neutral-primary); font-family: inherit; }
.pk-bd { flex: none; padding: var(--sp-8) var(--sp-24); background: var(--md3-background); color: var(--md3-on-surface-variant); }
.pk-ls { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-12) var(--sp-24); }
.pk-opt { display: flex; align-items: center; gap: var(--sp-12); width: 100%; min-height: 56px; padding: var(--sp-12) var(--sp-16); border-radius: 8px; border: 1px solid var(--md3-outline-variant); background: var(--md3-on-primary); text-align: left; cursor: pointer; font-family: inherit; }
.pk-opt.on { border-color: var(--md3-primary); background: var(--md3-surface); }
.pk-l { display: block; color: var(--md3-neutral-primary); }
.pk-s { display: block; color: var(--md3-neutral-secondary); }
.pk-ft { flex: none; padding: var(--sp-12) var(--sp-24) var(--sp-16); }
.pk-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border: 0; border-radius: 8px; background: var(--md3-primary); color: var(--md3-on-primary); cursor: pointer; font-family: inherit; }
/* Material checkbox (MUI): 18 box, 2px border, radius 2; checked and mixed are filled Primary with a white mark; 40 touch circle */
.mcb { position: relative; width: 18px; height: 18px; flex: none; margin: 11px; border: 2px solid var(--md3-on-surface-variant); border-radius: 2px; display: grid; place-items: center; color: var(--md3-on-primary); }
.mcb::before { content: ''; position: absolute; inset: -13px; border-radius: 50%; }
.pk-opt:hover .mcb::before { background: var(--md3-primary-a10); }
.mcb.on, .mcb.mixed { background: var(--md3-primary); border-color: var(--md3-primary); }
.mcb.mixed i { display: block; width: 10px; height: 2px; background: var(--md3-on-primary); }
.pk-all { border-style: dashed; }
/* speed-dial FAB (tablet) */
.device:not(.is-phone) .fab.gfab { width: 64px; height: 64px; padding: 0; justify-content: center; border-radius: 18px; background: linear-gradient(135deg, var(--md3-secondary), var(--md3-primary)); color: var(--md3-on-primary); z-index: 15; }
.device:not(.is-phone) .fab.gfab.open { z-index: 27; background: var(--md3-primary-container); color: var(--md3-neutral-primary); }
.tdial { position: absolute; inset: 0; z-index: 26; background: color-mix(in srgb, var(--md3-on-primary) 88%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: tdf var(--dur-short) var(--ease-standard); }
@keyframes tdf { from { opacity: 0; } }
.tdial-items { position: absolute; right: var(--sp-24); bottom: 104px; z-index: 27; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: var(--sp-16); }
.tdial-it { display: flex; align-items: center; gap: var(--sp-24); border: 0; background: none; padding: 0; cursor: pointer; color: var(--md3-on-surface); font-family: inherit; animation: tdi var(--dur-medium) var(--ease-enter) both; }
.tdial-it:nth-child(2) { animation-delay: 30ms; } .tdial-it:nth-child(3) { animation-delay: 60ms; } .tdial-it:nth-child(4) { animation-delay: 90ms; } .tdial-it:nth-child(5) { animation-delay: 120ms; }
@keyframes tdi { from { opacity: 0; transform: translateY(12px); } }
.tdial-b { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--md3-surface-variant); color: var(--md3-on-primary-container); box-shadow: 0 1px 3px var(--md3-neutral-primary-a10), 0 4px 12px var(--md3-neutral-primary-a20); }
.tdial-it:active .tdial-b { transform: scale(.96); }

/* ============ Detail headers + session details + entity cards (Sourav 2026-09-28) ============ */
.device:not(.is-phone) main > .crumb { display: none; }
.device:not(.is-phone) .ph.p-det > div:first-child { display: flex; align-items: center; gap: var(--sp-4); }
.device:not(.is-phone) .ph.p-det h1 { margin-top: 0; }
.ph-back { width: 44px; height: 44px; flex: none; margin-left: calc(-1 * var(--sp-12)); display: grid; place-items: center; border-radius: 8px; color: var(--md3-on-surface); }
.ph-back:hover { background: var(--md3-background); }
.device:not(.is-phone) .ph-tags { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: nowrap; }
.device:not(.is-phone) .ph-tags .eyebrow { display: none; }
.ses-state { display: flex; align-items: center; gap: var(--sp-24); }
.ses-when { text-align: right; padding-left: var(--sp-24); border-left: 1px solid var(--line); }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-16) var(--sp-20) var(--sp-8); }
.ents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); margin-top: var(--sp-16); }
.ent { display: flex; align-items: center; gap: var(--sp-12); min-height: 88px; padding: var(--sp-12); border: 1px solid var(--line); border-radius: 12px; background: var(--md3-on-primary); color: inherit; }
a.ent:hover { background-image: linear-gradient(var(--md3-neutral-primary-a5), var(--md3-neutral-primary-a5)); }
.ent-av { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); }
.ent-sex { position: absolute; left: 4px; top: 4px; min-width: 20px; height: 20px; padding: 0 var(--sp-4); display: grid; place-items: center; border-radius: 4px; background: var(--md3-secondary); color: var(--md3-on-primary); }
.ent-sex.female { background: var(--md3-tertiary); }
.ent-n, .ent-m { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-n { color: var(--md3-neutral-primary); } .ent-m { color: var(--md3-on-surface-variant); }
.ent-p { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-4); color: var(--md3-on-surface-variant); }
.ent .pill { flex: none; }
.abt { display: flex; align-items: flex-start; gap: var(--sp-16); padding: var(--sp-12) 0; border-top: 1px solid var(--line); }
.card .h2 + .abt { margin-top: var(--sp-12); }
.abt-i { flex: none; padding-top: 2px; color: var(--md3-on-surface-variant); }
.abt-v { margin-top: 2px; color: var(--md3-neutral-primary); }
.is-phone .ents { grid-template-columns: minmax(0, 1fr); }
.is-phone .ses-state { flex-wrap: wrap; } .is-phone .ses-when { border-left: 0; padding-left: 0; text-align: left; }

/* ============ Session details — follows the Antz task-details design (Sourav 2026-09-28) ============ */
.sd { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--sp-16)) calc(-1 * var(--sp-24)); min-height: 100%; background: var(--md3-displaybg-secondary); }
.sd > * + * { margin-top: 0; }
.sd-hero { position: relative; padding: 0 var(--sp-24) var(--sp-24); background: var(--md3-on-secondary-container); color: var(--md3-on-primary); }
.sd-hb { display: flex; align-items: center; gap: var(--sp-8); height: 72px; margin: 0 calc(-1 * var(--sp-12)); }
.sd-back { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--md3-on-primary); cursor: pointer; }
.sd-back:hover { background: var(--md3-primarywhite20); }
.sd-tags { display: flex; flex-wrap: wrap; gap: var(--sp-8); padding-right: 72px; }
.sd-tag { height: 32px; display: inline-flex; align-items: center; padding: 0 var(--sp-12); border-radius: 999px; background: var(--md3-primarywhite20); color: var(--md3-on-primary); }
.sd-rib { position: absolute; right: 0; top: 72px; width: 64px; height: 40px; display: grid; place-items: center; padding-left: var(--sp-12); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); background: var(--md3-tertiary); color: var(--md3-on-primary); }
.sd-title { margin-top: var(--sp-16); color: var(--md3-on-primary); }
.sd-desc { margin-top: var(--sp-8); color: var(--md3-on-primary); opacity: .92; }
.sd-more { color: var(--md3-primary); }
.sd-due { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-12) var(--sp-24); background: var(--md3-on-primary); }
.sd-duet { display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--md3-on-surface); }
.sd-st { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--sp-16); border-radius: 6px; background: var(--md3-surface-variant); color: var(--md3-on-primary-container); }
.sd-st.info { background: var(--md3-add-primary); color: var(--md3-on-primary); } .sd-st.bad { background: var(--md3-error); color: var(--md3-on-primary); }
.sd-st.warn { background: var(--md3-moderate-secondary); color: var(--md3-neutral-primary); } .sd-st.ok { background: var(--md3-primary); color: var(--md3-on-primary); }
.sd-card { margin: var(--sp-16) var(--sp-16) 0; padding: var(--sp-20) var(--sp-24) var(--sp-8); border-radius: 12px; background: var(--md3-on-primary); }
.sd-h { color: var(--md3-neutral-primary); margin-bottom: var(--sp-8); }
.sd-row { display: flex; align-items: center; gap: var(--sp-16); min-height: 72px; padding: var(--sp-12) 0; border-top: 1px solid var(--md3-surface-variant); color: inherit; }
.sd-h + .sd-row { border-top: 0; }
.sd-ic { flex: none; width: 32px; display: grid; place-items: center; color: var(--md3-on-primary-container); }
.sd-t, .sd-t2, .sd-m, .sd-l { display: block; }
.sd-t { color: var(--md3-neutral-primary); } .sd-t2 { color: var(--md3-on-primary-container); } .sd-m, .sd-l { color: var(--md3-neutral-secondary); }
.sd-chev { flex: none; color: var(--md3-on-primary-container); }
.sd-ents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); padding-bottom: var(--sp-16); }
.sd-ent { display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-16); border-radius: 12px; background: var(--md3-background); color: inherit; }
.sd-av { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--md3-on-primary); color: var(--md3-on-primary-container); box-shadow: 0 1px 3px var(--md3-neutral-primary-a10); }
.sd-av .ent-sex { left: -2px; top: -2px; }
.sd-ab { display: flex; align-items: flex-start; gap: var(--sp-16); padding: var(--sp-16) 0; border-top: 1px solid var(--md3-surface-variant); }
.sd-h + .sd-ab { border-top: 0; }
.sd-lk { display: block; color: var(--md3-on-surface); }
.sd-foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: var(--sp-16); margin-top: auto; padding: var(--sp-16) var(--sp-24); background: var(--md3-on-primary); box-shadow: 0 -1px 0 var(--md3-surface-variant); }
.sd-card:last-of-type { margin-bottom: var(--sp-24); }
.sd-cm { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-12); color: var(--md3-on-primary-container); }
.sd-cm input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: none; color: var(--md3-neutral-primary); font-family: inherit; }
.sd-go { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 48px; min-width: 220px; padding: 0 var(--sp-24); border-radius: 8px; background: var(--md3-primary); color: var(--md3-on-primary); }
.device:not(.is-phone) main > .crumb + .sd { margin-top: 0; }
.is-phone .sd-ents { grid-template-columns: minmax(0, 1fr); }
.is-phone .sd-go { min-width: 0; }
/* detail pages: no bottom nav; the session page's own footer sits on the device edge */
.device:not(.is-phone).p-detail .rail { display: none; }
.device:not(.is-phone) main:has(> .sd) { padding-bottom: 0; }
.device:not(.is-phone) .sd { margin-bottom: 0; }
.sd-inl { display: flex; align-items: baseline; gap: var(--sp-8); } .sd-inl .sd-lk, .sd-inl .sd-m { display: inline; }
/* session score (Sourav 2026-09-28) */
.sd-score { display: flex; align-items: center; gap: var(--sp-24); margin: var(--sp-16) var(--sp-16) 0; padding: var(--sp-20) var(--sp-24); border-radius: 12px; background: var(--md3-on-primary); }
.sd-sbig { width: 120px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-12) 0; border-radius: 12px; background: var(--md3-background); color: var(--md3-on-primary-container); }
.sd-sbig b { color: var(--md3-neutral-primary); }
.sd-sbig.ok { background: var(--md3-on-background); } .sd-sbig.ok b { color: var(--md3-on-surface); }
.sd-sbig.warn { background: var(--md3-notes); } .sd-sbig.warn b { color: var(--md3-tertiary); }
.sd-sbig.bad { background: var(--md3-error-container); } .sd-sbig.bad b { color: var(--md3-error); }
.sd-hr { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-12); margin-bottom: var(--sp-8); } .sd-hr .sd-h { margin: 0; }
.sd-sc { flex: none; min-width: 52px; text-align: center; padding: 2px var(--sp-8); border-radius: 4px; background: var(--md3-background); color: var(--md3-on-primary-container); }
.sd-sc.ok { background: var(--md3-on-background); color: var(--md3-on-surface); } .sd-sc.warn { background: var(--md3-notes); color: var(--md3-on-tertiary-container); } .sd-sc.bad { background: var(--md3-error-container); color: var(--md3-error); }
.sd-tick { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--fill-ok); color: var(--md3-on-primary); }
/* session details — About (matches the task design), score in the hero, results line */
.sd-about .sd-ab { display: flex; align-items: stretch; gap: var(--sp-24); padding: 0; border: 0; }
.sd-abi { flex: none; width: 32px; display: grid; place-items: center; color: var(--md3-neutral-secondary); }
.sd-abt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-16) 0; border-top: 1px solid var(--md3-surface-variant); }
.sd-about .sd-h + .sd-ab .sd-abt { border-top: 0; }
.sd-about .sd-l { color: var(--md3-neutral-secondary); }
.sd-v { color: var(--md3-on-surface-variant); }
.sd-lk2 { color: var(--md3-primary); }
.sd-about .sd-lk { color: var(--md3-on-surface); }
.sd-hmain { display: flex; align-items: flex-end; gap: var(--sp-24); }
.sd-kpi { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.sd-kpi svg circle:first-child { stroke: var(--md3-primarywhite20); }
.sd-kpin { position: absolute; top: 38px; left: 50%; transform: translate(-50%, -50%); color: var(--md3-on-primary); }
.sd-kpil { color: var(--md3-on-primary); opacity: .85; white-space: nowrap; }
.sd-res { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-20); margin-top: var(--sp-16); padding-top: var(--sp-12); border-top: 1px solid var(--md3-primarywhite20); color: var(--md3-on-primary); }
.sd-res span { display: inline-flex; align-items: center; gap: var(--sp-8); }
.sd-res .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--md3-on-primary50); }
.sd-res .dot.ok { background: var(--md3-primary-container); } .sd-res .dot.warn { background: var(--md3-moderate-primary); } .sd-res .dot.bad { background: var(--md3-tertiary-container); }
.sd-pm { margin-left: auto; opacity: .75; }
.sd-hero .sd-rib { top: 76px; }
/* form page: task id tag, no repeated animal chip, a calm slider */
.tag.tsk { background: var(--md3-on-secondary-container); color: var(--md3-on-primary); }
.q-sub { display: none !important; }
.rng { -webkit-appearance: none; appearance: none; height: 28px; background: none; }
.rng::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--md3-surface-variant); }
.rng::-moz-range-track { height: 4px; border-radius: 2px; background: var(--md3-surface-variant); }
.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--md3-primary); box-shadow: 0 1px 3px var(--md3-neutral-primary-a20); }
.rng::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--md3-primary); }
/* Work To Be Completed — the task-design row: icon · title · one meta line · thin ring or tick · chevron; divider starts at the text */
.sd-wk { display: flex; align-items: stretch; gap: var(--sp-24); color: inherit; }
.sd-wki { flex: none; width: 32px; display: grid; place-items: center; color: var(--md3-on-primary-container); }
.sd-wkt { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-16) 0; border-top: 1px solid var(--md3-surface-variant); }
.sd-h + .sd-wk .sd-wkt { border-top: 0; }
.sd-wkn { display: block; color: var(--md3-on-surface-variant); }
.sd-wkm { display: block; margin-top: var(--sp-4); color: var(--md3-neutral-secondary); }
.sd-ring svg circle:first-child { stroke: var(--md3-surface-variant); }
.sd-ring { display: grid; place-items: center; }
.sd-wk .sd-tick { width: 28px; height: 28px; }
.sd-wk:hover .sd-wkn { color: var(--md3-neutral-primary); }
/* start session — "Assign task to" pattern */
.st-f { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: var(--sp-24); padding: var(--sp-12) var(--sp-16); border: 1px solid var(--md3-outline-variant); border-radius: 8px; background: var(--md3-on-primary); text-align: left; font-family: inherit; color: inherit; }
.st-f.st-ro { background: var(--md3-surface); }
.st-lab { position: absolute; left: var(--sp-12); top: 0; transform: translateY(-50%); padding: 0 var(--sp-4); background: var(--md3-on-primary); color: var(--md3-on-surface-variant); }
.st-v { color: var(--md3-neutral-primary); }
.st-sel { flex-direction: row; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; border-color: var(--md3-outline); }
.st-sel:hover { border-color: var(--md3-primary); }
.st-in { border: 0; outline: 0; background: none; height: 32px; color: var(--md3-neutral-primary); font-family: inherit; }
.st-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); margin-top: var(--sp-16); }
.st-it { display: flex; align-items: center; gap: var(--sp-16); padding: var(--sp-16); border-radius: 8px; background: var(--md3-background); }
.st-av { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--md3-on-primary); color: var(--md3-on-primary-container); }
.st-av .ent-sex { left: -4px; top: -4px; }
.st-n { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--md3-on-surface-variant); }
.st-n.muted { color: var(--md3-neutral-secondary); }
.st-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--md3-tertiary); cursor: pointer; }
.st-x:hover { background: var(--md3-tertiary-container); }
.st-bar { position: sticky; bottom: 0; z-index: 5; margin: auto calc(-1 * var(--sp-16)) calc(-1 * var(--sp-24)); padding: var(--sp-16) var(--sp-24); background: var(--md3-on-primary); box-shadow: 0 -4px 10px var(--black-08); }
.st-go { width: 100%; height: 56px; border: 0; border-radius: 8px; background: var(--md3-on-primary-container); color: var(--md3-on-primary); cursor: pointer; font-family: inherit; }
.st-go:disabled { background: var(--md3-surface-variant); color: var(--md3-on-surface-variant); cursor: not-allowed; }
.device:not(.is-phone) main:has(> .st-bar) { padding-bottom: 0; }
.device:not(.is-phone) main > .st-bar { margin-bottom: 0; }
.is-phone .st-list { grid-template-columns: minmax(0, 1fr); }
/* session header: title + task line (ID • Schedule • Due • who) — start screen and every form view */
.device .ph-task .tmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); margin-top: var(--sp-4); color: var(--md3-on-surface-variant); }
.ph-task .tmeta b { color: var(--md3-on-primary-container); }
.tdot { color: var(--md3-outline); }
.device:not(.is-phone) .ph.p-det.ph-task > div:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-4); align-items: center; }
.device:not(.is-phone) .ph.p-det.ph-task .tmeta { grid-column: 2; }
/* ============ Selection pattern — Figma VPKybj9jCMEQKKPynTu7Zo 4661:61496 / 4661:61396, tablet: two-column rows, collapse after 6 ============ */
.st-dis { background: var(--md3-neutral05); border-color: var(--md3-outline-variant); color: var(--md3-neutral-secondary); cursor: not-allowed; }
.st-dis .st-lab { color: var(--md3-neutral-secondary); }
.sel-trig { display: flex; align-items: center; gap: var(--sp-24); width: 100%; margin-top: var(--sp-24); padding: var(--sp-16); border: 1px solid var(--md3-outline-variant); border-radius: 8px; background: var(--md3-surface); color: var(--md3-on-primary-container); text-align: left; cursor: pointer; font-family: inherit; }
.sel-trig .app-icon, .sel-add .app-icon { color: var(--md3-add-primary); }
.sel-trig:hover { border-color: var(--md3-outline); }
.sel-g { margin-top: var(--sp-24); border-radius: 8px; overflow: hidden; background: var(--md3-displaybg-primary); }
.sel-h { display: flex; align-items: center; gap: var(--sp-4); height: 56px; padding: 10px var(--sp-12); background: var(--md3-displaybg-secondary); color: var(--md3-on-surface-variant); }
.sel-add { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.sel-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sel-r { display: flex; align-items: center; gap: var(--sp-12); min-height: 80px; padding: var(--sp-12); border: 1px solid var(--md3-on-primary); margin: -1px 0 0 -1px; }
.sel-av { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 24px; background: var(--md3-neutral05); color: var(--md3-on-primary-container); }
.sel-av .ent-sex { left: -4px; top: -4px; }
.sel-n { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--md3-on-surface-variant); }
.t-subtext-regular.sel-n { margin-top: 2px; }
.sel-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--md3-tertiary); cursor: pointer; }
.sel-x:hover { background: var(--md3-tertiary-container); }
.sel-more { display: block; width: 100%; padding: var(--sp-12) var(--sp-16); border: 0; border-top: 1px solid var(--md3-on-primary); background: var(--md3-add-primary-a10); color: var(--md3-on-surface); text-align: center; cursor: pointer; font-family: inherit; }
.is-phone .sel-rows { grid-template-columns: minmax(0, 1fr); }
/* header: title → task line 4px, header bottom 12px (Sourav: max 8px) */
.device .ph.ph-task { padding-bottom: var(--sp-12); }
.device .ph-task h1 { line-height: 1.15; }
.device .ph-task .tmeta { margin-top: var(--sp-4); }
.device:not(.is-phone) .ph.p-det.ph-task > div:first-child { row-gap: 0; }
/* session status — Figma Task Status CTA (4661:61345): p12, r8, Minor Medium, chevron 20 only when a manual step exists */
.sd-st, .sd-st.info, .sd-st.bad, .sd-st.warn, .sd-st.ok { display: inline-flex; align-items: center; gap: var(--sp-8); height: auto; padding: var(--sp-12); border: 0; border-radius: 8px; background: var(--md3-surface-variant); color: var(--md3-on-surface-variant); font-family: inherit; }
.sd-st.todo { background: var(--md3-secondary-container); }
.sd-st.up { background: var(--md3-neutral-primary-a10); color: var(--md3-neutral-secondary); }
.sd-st.ip { background: var(--md3-notes); cursor: pointer; }
.sd-st.ok { background: var(--md3-primary-container-a60); color: var(--md3-on-surface-variant); }
.sd-st.bad { background: var(--md3-error-container); color: var(--md3-error); }
.sd-stw { position: relative; }
.sd-menu { position: absolute; right: 0; top: calc(100% + var(--sp-4)); z-index: 12; min-width: 280px; padding: var(--sp-8) 0; border-radius: 8px; background: var(--md3-on-primary); box-shadow: 0 4px 16px var(--md3-neutral-primary-a20), 0 1px 3px var(--black-08); }
.sd-menu button { display: flex; align-items: center; gap: var(--sp-12); width: 100%; min-height: 56px; padding: var(--sp-8) var(--sp-16); border: 0; background: none; text-align: left; color: var(--md3-neutral-primary); cursor: pointer; font-family: inherit; }
.sd-menu button:hover:not(:disabled) { background: var(--md3-background); }
.sd-menu button:disabled { color: var(--md3-neutral-secondary); cursor: not-allowed; }
.sd-mh { display: block; color: var(--md3-neutral-secondary); }
.sd-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--fill-ok); }
.sd-duet.late { color: var(--md3-error); }
/* the 44px back hit-area must not stretch the title row: title → task line is exactly 4px */
.device:not(.is-phone) .ph-task .ph-back { margin-top: -8px; margin-bottom: -8px; }
/* ============ Form page (Sourav 2026-09-28) ============ */
/* header + toolbar = one section on white 75% */
.device:not(.is-phone) main:has(> .run-bar) > .ph-task { background: color-mix(in srgb, var(--md3-on-primary) 75%, transparent); border-bottom: 0; }
.run-bar { margin: 0 calc(-1 * var(--sp-16)) !important; padding: var(--sp-4) var(--sp-24) var(--sp-12); background: color-mix(in srgb, var(--md3-on-primary) 75%, transparent); }
main > .ph + .run-bar { margin-top: 0 !important; }
.run-bar .iconbtn { border: 0; background: var(--md3-displaybg-primary); color: var(--md3-on-primary-container); }
.run-bar .iconbtn:hover { background: var(--md3-displaybg-secondary); }
.run-prog { height: 4px; margin: 0 calc(-1 * var(--sp-16)) var(--sp-16) !important; background: var(--md3-surface-variant); }
.run-prog i { display: block; height: 100%; background: var(--md3-primary); }
main > .run-bar + .run-prog { margin-top: 0 !important; }
/* form containers: radius 8 */
main:has(> .run-bar) .card, main:has(> .run-bar) .secnav, main:has(> .run-bar) .secnav a { border-radius: 8px; }
/* question number: plain label, no tag */
.qnum { flex: none; min-width: 28px; padding-top: 1px; color: var(--md3-on-surface-variant); }
/* failed answer follow-up */
.finding { margin-top: var(--sp-16); padding: var(--sp-16); border-radius: 8px; background: var(--md3-on-primary); border: 1px solid var(--md3-error); }
.fnd-h { display: flex; align-items: center; gap: var(--sp-8); color: var(--md3-error); }
.fnd-h .app-icon { flex: none; }
.fnd-q { margin-top: var(--sp-8); color: var(--md3-on-surface-variant); }
.fnd-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12); margin-top: var(--sp-12); }
.fnd-opt { display: flex; align-items: center; gap: var(--sp-12); min-height: 64px; padding: var(--sp-12) var(--sp-16); border: 1px solid var(--md3-outline-variant); border-radius: 8px; background: var(--md3-on-primary); text-align: left; cursor: pointer; font-family: inherit; }
.fnd-opt.on { border-color: var(--md3-primary); background: var(--md3-surface); }
.fnd-opt .rdo { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--md3-on-surface-variant); }
.fnd-opt.on .rdo { border: 7px solid var(--md3-primary); }
.fnd-ot { display: block; color: var(--md3-neutral-primary); } .fnd-od { display: block; color: var(--md3-neutral-secondary); }
.fnd-sev { display: flex; align-items: center; gap: var(--sp-12); margin-top: var(--sp-12); }
/* buttons: in-page next = on-primary-container; bottom bar edge to edge 50/50, submit in primary */
.device .btn.deep { background: var(--md3-on-primary-container); border-color: var(--md3-on-primary-container); color: var(--md3-on-primary); }
.device:not(.is-phone).p-task .pbar { gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); }
.device:not(.is-phone).p-task .pbar .btn { flex: 1 1 0; min-width: 0; max-width: none; height: 52px; }
.device:not(.is-phone).p-task .pbar .btn.pri { background: var(--md3-primary); border-color: var(--md3-primary); color: var(--md3-on-primary); }
.run-q { display: flex; align-items: center; justify-content: space-between; margin: 0 calc(-1 * var(--sp-16)) !important; padding: var(--sp-4) var(--sp-24) var(--sp-12); background: color-mix(in srgb, var(--md3-on-primary) 75%, transparent); }
main > .run-bar + .run-q, main > .run-q + .run-prog { margin-top: 0 !important; }