/* The kit: Harbour Bold's components, the shadcn base in its tokens. A comment names the web kit's component
 (web/src/components) where there is one. Every page of the prototype loads it after tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.25rem; background: var(--background-color-canvas); color: var(--text-color-primary); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
h1 { font-size: 1.875rem; line-height: 2.25rem; }
h2 { font-size: 1.5rem; line-height: 2rem; }
h3 { font-size: 1.125rem; line-height: 1.75rem; }
h4 { font-size: 0.875rem; line-height: 1.25rem; }
p { margin: 0; }
a { color: var(--text-color-link); }
button { font: inherit; color: inherit; }
code { font-family: ui-monospace, monospace; font-size: 0.75rem; }
:focus-visible { outline: 0.125rem solid var(--outline-color-focus); outline-offset: 0.125rem; }
svg.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }

/* ---------- components: Harbour Bold's, the shadcn base in its tokens. A comment names the web kit's
   component (web/src/components) where there is one. ---------- */
.card { background: var(--background-color-surface); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.pad { padding: 1.25rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.tight { display: flex; flex-direction: column; gap: 0.25rem; }
.row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 40rem) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.form-narrow { max-width: 24rem; }
.muted { color: var(--text-color-secondary); }
.tert { color: var(--text-color-tertiary); }
.num { font-variant-numeric: tabular-nums; }

/* Button, SubmitButton: brand, secondary, outline, ghost, danger, danger outline, link; sm and block. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; height: var(--control-h); padding: 0 var(--control-px); font-size: var(--control-fs); font-weight: 500; border-radius: var(--radius-md); border: 0.0625rem solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .12s, box-shadow .12s; }
.btn-brand { background: var(--background-color-brand); color: var(--text-color-on-brand); }
.btn-brand:hover { background: var(--background-color-brand-hover); }
.btn-secondary { background: var(--background-color-sunken); color: var(--text-color-primary); }
.btn-outline { background: var(--background-color-surface); color: var(--text-color-primary); border-color: var(--border-color-strong); }
.btn-ghost { background: transparent; color: var(--text-color-primary); }
.btn-secondary:hover, .btn-outline:hover, .btn-ghost:hover { background: var(--background-color-hover); }
.btn-danger { background: var(--background-color-danger); color: var(--text-color-on-danger); }
.btn-danger:hover { background: var(--background-color-danger-hover); }
.btn-danger-outline { background: var(--background-color-surface); color: var(--text-color-danger); border-color: var(--border-color-danger); }
.btn-danger-outline:hover { background: var(--background-color-danger-subtle); }
.btn-link { background: transparent; color: var(--text-color-link); text-decoration: underline; text-underline-offset: 0.25rem; padding: 0 0.25rem; }
.btn[disabled] { background: var(--background-color-sunken); color: var(--text-color-disabled); border-color: transparent; cursor: not-allowed; }
.btn-sm { height: 1.75rem; padding: 0 0.625rem; font-size: 0.8125rem; }
.btn-block { width: 100%; }
/* A button that reads as a link inside a line of text, such as Resend code. */
.textbtn { border: 0; background: none; padding: 0; color: var(--text-color-link); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 0.1875rem; display: inline-flex; gap: 0.375rem; align-items: center; }
.textbtn[disabled] { color: var(--text-color-tertiary); text-decoration: none; cursor: default; font-variant-numeric: tabular-nums; }
/* BackLink. */
.back { display: inline-flex; gap: 0.375rem; align-items: center; color: var(--text-color-secondary); font-weight: 500; text-decoration: none; }
.back:hover { color: var(--text-color-primary); }

/* Field, Label, Input, TextField: label, help and error under it. */
.field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.field label { font-weight: 500; font-size: var(--body-fs); }
.labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.labelrow a { font-size: 0.8125rem; font-weight: 500; }
.help { font-size: 0.75rem; line-height: 1rem; color: var(--text-color-tertiary); }
.err { font-size: 0.75rem; line-height: 1rem; color: var(--text-color-danger); display: flex; gap: 0.25rem; align-items: flex-start; }
.err svg { margin-top: 0.125rem; }
.input { height: var(--control-h); padding: 0 var(--control-px); font: inherit; font-size: var(--control-fs); color: var(--text-color-primary); background: var(--background-color-surface); border: 0.0625rem solid var(--border-color-strong); border-radius: var(--radius-md); width: 100%; min-width: 0; }
.input::placeholder { color: var(--text-color-tertiary); }
.input:focus { outline: none; border-color: var(--ring-color-focus); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--ring-color-focus) 30%, transparent); }
.input.invalid, .input[aria-invalid="true"] { border-color: var(--border-color-danger-strong); }
.input:disabled { background: var(--background-color-sunken); color: var(--text-color-disabled); border-color: var(--border-color-default); }
textarea.input { height: auto; min-height: 4.5rem; padding: 0.5rem var(--control-px); resize: vertical; line-height: 1.25rem; }
/* NativeSelect, SelectField. */
.select { position: relative; display: flex; align-items: center; }
.select .input { appearance: none; padding-right: 2rem; }
.select svg { position: absolute; right: 0.625rem; color: var(--text-color-tertiary); pointer-events: none; }
/* An input with an icon before it, such as search. */
.with-icon { position: relative; display: flex; align-items: center; }
.with-icon svg { position: absolute; left: 0.625rem; color: var(--text-color-tertiary); pointer-events: none; }
.with-icon .input { padding-left: 2rem; }
/* PasswordField: the reveal button shows or hides the input beside it. */
.pw { position: relative; display: flex; align-items: center; }
.pw .input { padding-right: 2.5rem; }
.reveal { position: absolute; right: 0.25rem; width: 1.75rem; height: 1.5rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-color-tertiary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.reveal:hover { color: var(--text-color-primary); background: var(--background-color-hover); }
/* CodeField: one numeric input for the whole code. */
.otp { height: calc(var(--control-h) + 0.75rem); font-size: 1.5rem; letter-spacing: 0.5em; text-align: center; font-variant-numeric: tabular-nums; padding-left: calc(var(--control-px) + 0.5em); }

/* Checkbox, Radio, Switch. */
.check { display: inline-flex; gap: 0.5rem; align-items: center; font-size: var(--body-fs); }
.box { width: 1rem; height: 1rem; border-radius: 0.25rem; border: 0.0625rem solid var(--border-color-strong); background: var(--background-color-surface); display: inline-flex; align-items: center; justify-content: center; color: var(--text-color-on-brand); font-size: 0.75rem; flex: none; }
.box.on { background: var(--background-color-brand); border-color: var(--background-color-brand); }
.radio { border-radius: 999rem; }
.radio.on { background: var(--background-color-surface); border: 0.3125rem solid var(--background-color-brand); }
.switch { width: 2.25rem; height: 1.25rem; border-radius: 999rem; background: var(--border-color-strong); position: relative; display: inline-block; flex: none; }
.switch::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 1rem; height: 1rem; border-radius: 999rem; background: var(--background-color-surface); box-shadow: var(--shadow-sm); }
.switch.on { background: var(--background-color-brand); }
.switch.on::after { left: 1.125rem; }
/* ChoiceField: one option as a card, checked when its radio is. */
.choice { display: flex; gap: 0.75rem; align-items: center; padding: 0.875rem 1rem; border: 0.0625rem solid var(--border-color-strong); border-radius: var(--radius-lg); background: var(--background-color-surface); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--border-color-brand); box-shadow: 0 0 0 0.0625rem var(--border-color-brand); background: var(--background-color-brand-subtle); }
.choice input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--background-color-brand); flex: none; }
.choice .ic { width: 2.25rem; height: 2.25rem; border-radius: 999rem; display: inline-flex; align-items: center; justify-content: center; background: var(--background-color-sunken); color: var(--text-color-secondary); flex: none; font-size: 1.125rem; }
.choice b { display: block; font-weight: 600; }
.choice span:not(.ic) { display: block; color: var(--text-color-secondary); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* Chip: a Status takes a Tone and carries an icon and a label; a Stage (.stage) stays neutral. */
.chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 999rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; white-space: nowrap; border: 0.0625rem solid transparent; }
.chip-success { background: var(--background-color-success-subtle); color: var(--text-color-success); border-color: var(--border-color-success); }
.chip-warning { background: var(--background-color-warning-subtle); color: var(--text-color-warning); border-color: var(--border-color-warning); }
.chip-danger { background: var(--background-color-danger-subtle); color: var(--text-color-danger); border-color: var(--border-color-danger); }
.chip-info { background: var(--background-color-info-subtle); color: var(--text-color-info); border-color: var(--border-color-info); }
.chip-neutral { background: var(--background-color-neutral-subtle); color: var(--text-color-neutral); border-color: var(--border-color-neutral); }
.chip-solid-success { background: var(--background-color-success); color: var(--text-color-on-success); }
.chip-solid-warning { background: var(--background-color-warning); color: var(--text-color-on-warning); }
.chip-solid-danger { background: var(--background-color-danger); color: var(--text-color-on-danger); }
.chip-solid-info { background: var(--background-color-info); color: var(--text-color-on-info); }
.stage { border-radius: var(--radius-sm); }

/* Alert, Toast, Tooltip: a banner, toast, tooltip and chip take one Tone, neutral by default or a Status. */
.alert { display: flex; gap: 0.625rem; padding: 0.75rem 0.875rem; border-radius: var(--radius-lg); border: 0.0625rem solid; font-size: var(--body-fs); line-height: var(--body-lh); }
.alert svg { margin-top: 0.1875rem; }
.alert b { display: block; font-weight: 600; }
.alert a { color: inherit; font-weight: 500; }
.alert-neutral { background: var(--background-color-neutral-subtle); border-color: var(--border-color-neutral); color: var(--text-color-neutral); }
.alert-success { background: var(--background-color-success-subtle); border-color: var(--border-color-success); color: var(--text-color-success); }
.alert-warning { background: var(--background-color-warning-subtle); border-color: var(--border-color-warning); color: var(--text-color-warning); }
.alert-danger { background: var(--background-color-danger-subtle); border-color: var(--border-color-danger); color: var(--text-color-danger); }
.alert-info { background: var(--background-color-info-subtle); border-color: var(--border-color-info); color: var(--text-color-info); }
.toast { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 1rem; border-radius: var(--radius-lg); border: 0.0625rem solid; box-shadow: var(--shadow-lg); max-width: 24rem; }
.toast svg { margin-top: 0.1875rem; }
.toast b { display: block; font-weight: 600; }
.tooltip { display: inline-block; padding: 0.375rem 0.625rem; border-radius: var(--radius-md); border: 0.0625rem solid; box-shadow: var(--shadow-md); font-size: 0.75rem; line-height: 1rem; }
.tooltip, .toast, .tone-neutral { background: var(--background-color-neutral-subtle); border-color: var(--border-color-neutral); color: var(--text-color-neutral); }
.tone-success { background: var(--background-color-success-subtle); border-color: var(--border-color-success); color: var(--text-color-success); }
.tone-warning { background: var(--background-color-warning-subtle); border-color: var(--border-color-warning); color: var(--text-color-warning); }
.tone-danger { background: var(--background-color-danger-subtle); border-color: var(--border-color-danger); color: var(--text-color-danger); }
.tone-info { background: var(--background-color-info-subtle); border-color: var(--border-color-info); color: var(--text-color-info); }

/* Navigation and feedback: Tabs, Count, Progress, Avatar, a spinner, a loading line, an icon badge, an empty state. */
.tabs { display: flex; gap: 1.25rem; border-bottom: 0.0625rem solid var(--border-color-default); }
.tabs > a, .tabs > span { padding: 0.5rem 0; color: var(--text-color-secondary); font-weight: 500; border-bottom: 0.125rem solid transparent; margin-bottom: -0.0625rem; white-space: nowrap; text-decoration: none; display: inline-flex; gap: 0.375rem; align-items: center; }
.tabs > a:hover { color: var(--text-color-primary); }
.tabs > .on { color: var(--text-color-primary); border-color: var(--background-color-brand); }
.count { font-size: 0.6875rem; padding: 0 0.375rem; border-radius: 999rem; background: var(--background-color-sunken); color: var(--text-color-secondary); }
.progress { height: 0.375rem; border-radius: 999rem; background: var(--background-color-sunken); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--background-color-brand); border-radius: 999rem; }
.avatar { width: 1.75rem; height: 1.75rem; border-radius: 999rem; display: inline-flex; align-items: center; justify-content: center; background: var(--background-color-brand-subtle); color: var(--text-color-brand); font-size: 0.6875rem; font-weight: 600; flex: none; }
/* Progress shows on the control that started it: .spin inside the button; .spin.lg alone in a card. */
.spin { width: 1rem; height: 1rem; border-radius: 999rem; border: 0.125rem solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: spin 0.9s linear infinite; flex: none; }
.spin.lg { width: 2rem; height: 2rem; border-width: 0.1875rem; border-color: var(--background-color-sunken); border-top-color: var(--background-color-brand); }
@keyframes spin { to { transform: rotate(1turn); } }
.sk { display: block; height: 0.625rem; border-radius: 999rem; background: var(--background-color-sunken); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .spin, .sk { animation: none; } }
.badge-ic { width: 2.75rem; height: 2.75rem; border-radius: 999rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; background: var(--background-color-brand-subtle); color: var(--text-color-brand); flex: none; }
.badge-ic.warn { background: var(--background-color-warning-subtle); color: var(--text-color-warning); }
.badge-ic.danger { background: var(--background-color-danger-subtle); color: var(--text-color-danger); }
.empty { text-align: center; padding: 2.5rem 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.empty p { max-width: 24rem; }

/* Lists and details: a card's head, a list of rows with a leading icon, key and value pairs, a list of consequences. */
.cardhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; padding: 1rem 1.25rem; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 1.25rem; border-top: 0.0625rem solid var(--border-color-subtle); flex-wrap: wrap; }
.who { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; flex: 1 1 12rem; }
.who b { font-weight: 500; display: flex; gap: 0.375rem; align-items: center; flex-wrap: wrap; }
.who small { color: var(--text-color-tertiary); font-size: 0.75rem; line-height: 1rem; }
.dic { width: 2rem; height: 2rem; border-radius: var(--radius-lg); background: var(--background-color-sunken); color: var(--text-color-secondary); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex: none; }
.kv { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: baseline; }
.kv dt { color: var(--text-color-tertiary); font-size: 0.8125rem; }
.kv dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.consq { margin: 0; padding-left: 1.125rem; color: var(--text-color-secondary); display: flex; flex-direction: column; gap: 0.25rem; }

/* DataTable: in a .tablecard, with a .tfoot for the count and paging. */
.tablecard { background: var(--background-color-surface); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); overflow: auto; box-shadow: var(--shadow-xs); }
.datatable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--body-fs); }
.datatable th { text-align: left; font-weight: 500; color: var(--text-color-tertiary); font-size: 0.75rem; padding: 0 0.75rem; height: 2.25rem; background: var(--background-color-sunken); border-bottom: 0.0625rem solid var(--border-color-default); white-space: nowrap; }
.datatable td { padding: 0.5rem 0.75rem; height: var(--row-h); border-bottom: 0.0625rem solid var(--border-color-subtle); white-space: nowrap; }
.datatable tr:hover td { background: var(--background-color-hover); }
.datatable tr.sel td { background: var(--background-color-brand-subtle); }
.datatable td.r, .datatable th.r { text-align: right; }
.datatable .sub { color: var(--text-color-tertiary); font-size: 0.75rem; }
.tfoot { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; color: var(--text-color-tertiary); font-size: 0.75rem; gap: 0.5rem; flex-wrap: wrap; }
/* DataTable's parts: a .tablewrap.signals hangs a .flag strip per flagged row in a gutter left of the card, toning the row;
   .pin-l and .pin-r stay put while .tablescroll scrolls sideways (positioned, so it clips its cells' .sr text), and the .pager below it never does. */
.tablescroll { overflow-x: auto; position: relative; }
.datatable .pin-l { position: sticky; left: 0; z-index: 1; background: var(--background-color-surface); box-shadow: inset -0.0625rem 0 0 var(--border-color-subtle); }
.datatable .pin-r { position: sticky; right: 0; z-index: 1; width: 1%; text-align: right; background: var(--background-color-surface); box-shadow: inset 0.0625rem 0 0 var(--border-color-subtle); }
.datatable th.pin-l, .datatable th.pin-r { z-index: 2; background: var(--background-color-sunken); }
.datatable tr[data-href], .datatable tr[data-go] { cursor: pointer; }
/* A pinned or toned cell stays opaque on hover: the translucent hover is laid over its own fill. */
.datatable tr:hover td.pin-l, .datatable tr:hover td.pin-r { background: linear-gradient(var(--background-color-hover), var(--background-color-hover)), var(--background-color-surface); }
.datatable tr.row-danger td { background: var(--background-color-danger-subtle); }
.datatable tr.row-warning td { background: var(--background-color-warning-subtle); }
.datatable tr.row-info td { background: var(--background-color-info-subtle); }
.datatable tr.row-danger:hover td { background: linear-gradient(var(--background-color-hover), var(--background-color-hover)), var(--background-color-danger-subtle); }
.datatable tr.row-warning:hover td { background: linear-gradient(var(--background-color-hover), var(--background-color-hover)), var(--background-color-warning-subtle); }
.datatable tr.row-info:hover td { background: linear-gradient(var(--background-color-hover), var(--background-color-hover)), var(--background-color-info-subtle); }
/* The strips live outside the card, since a scrolling box clips whatever hangs past its edge; each takes its row's tint. */
.tablewrap { position: relative; }
.tablewrap.signals { padding-left: 2.75rem; }
.flag { position: absolute; left: 0; top: 0; width: 2.75rem; display: flex; align-items: center; justify-content: center; gap: 0.125rem; padding: 0; border: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); font-size: 0.75rem; line-height: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: default; }
.flag-danger { background: var(--background-color-danger-subtle); color: var(--text-color-danger); }
.flag-warning { background: var(--background-color-warning-subtle); color: var(--text-color-warning); }
.flag-info { background: var(--background-color-info-subtle); color: var(--text-color-info); }
/* A tooltip opened from a control (data-tip), drawn fixed so no scrolling box clips it. */
.tip { position: fixed; z-index: 30; max-width: 20rem; white-space: normal; pointer-events: none; }
.tip ul { margin: 0.25rem 0 0; padding-left: 1rem; }
/* RowMenu: two or more row actions sit behind the ⋮; its .menu is drawn fixed so the table's scroll never clips it. */
.kebab { width: 1.75rem; height: 1.75rem; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-color-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; }
.kebab:hover, .kebab[aria-expanded="true"] { background: var(--background-color-hover); color: var(--text-color-primary); }
.menu { position: fixed; z-index: 30; min-width: 10rem; padding: 0.25rem; display: flex; flex-direction: column; text-align: left; background: var(--background-color-raised); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.menu button { display: flex; gap: 0.5rem; align-items: center; padding: 0.4375rem 0.625rem; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-color-primary); white-space: nowrap; cursor: pointer; font-size: 0.875rem; line-height: 1.25rem; }
.menu button:hover { background: var(--background-color-hover); }
.menu button.danger { color: var(--text-color-danger); }
/* Pager: the range, then the pages. */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; padding: 0.5rem 0.75rem; color: var(--text-color-tertiary); font-size: 0.75rem; }
.pages { display: inline-flex; gap: 0.25rem; }
.pages button { min-width: 1.75rem; height: 1.75rem; padding: 0 0.375rem; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-md); background: var(--background-color-surface); color: var(--text-color-secondary); font-size: 0.75rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.pages button:hover { background: var(--background-color-hover); }
.pages button[aria-current="page"] { background: var(--background-color-brand); border-color: var(--background-color-brand); color: var(--text-color-on-brand); }
.pages button:disabled { background: transparent; color: var(--text-color-disabled); cursor: not-allowed; }

/* DatePicker, TimePicker: a read-only field whose button opens a .pop. On the phone the date opens as a sheet and the
   time uses the phone's own picker. .pop.up opens above the field; .pop.end aligns it to the field's end. */
.picker { position: relative; }
.picker .input { padding-right: 2.75rem; cursor: pointer; }
.pickbtn { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: calc(var(--control-h) - 0.5rem); height: calc(var(--control-h) - 0.5rem); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-color-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.125rem; }
.pickbtn:hover { background: var(--background-color-hover); color: var(--text-color-primary); }
.pop { position: absolute; top: calc(100% + 0.375rem); left: 0; z-index: 9; background: var(--background-color-raised); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 0.75rem; }
.pop.up { top: auto; bottom: calc(100% + 0.375rem); }
.pop.end { left: auto; right: 0; }
.cal { width: 17.5rem; max-width: 100%; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; }
.sheet .cal { width: 100%; }
.cal-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.cal-head button { width: 2rem; height: 2rem; border: 0; border-radius: var(--radius-md); background: transparent; cursor: pointer; color: var(--text-color-primary); font-size: 1rem; }
.cal-head button:hover { background: var(--background-color-hover); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.125rem; text-align: center; }
.cal-grid .wd { font-size: 0.75rem; color: var(--text-color-tertiary); padding: 0.25rem 0; }
.cal-grid button { aspect-ratio: 1; min-height: 2.125rem; border: 0; border-radius: 999rem; background: transparent; cursor: pointer; color: var(--text-color-primary); font-variant-numeric: tabular-nums; }
.cal-grid button:hover { background: var(--background-color-hover); }
.cal-grid button.today { box-shadow: inset 0 0 0 0.0625rem var(--border-color-brand); color: var(--text-color-brand); font-weight: 600; }
.cal-grid button[aria-selected="true"] { background: var(--background-color-brand); color: var(--text-color-on-brand); font-weight: 600; }
.cal-grid button:disabled { color: var(--text-color-disabled); cursor: not-allowed; background: transparent; }
.timepop { display: grid; grid-template-columns: repeat(2, 4.5rem); gap: 0.5rem; }
.timecol { display: flex; flex-direction: column; gap: 0.125rem; max-height: 12rem; overflow: auto; }
.timecol .eyebrow { padding: 0 0.5rem 0.25rem; }
.timecol button { border: 0; border-radius: var(--radius-md); background: transparent; padding: 0.375rem 0.5rem; cursor: pointer; font-variant-numeric: tabular-nums; text-align: center; color: var(--text-color-primary); }
.timecol button:hover { background: var(--background-color-hover); }
.timecol button[aria-selected="true"] { background: var(--background-color-brand); color: var(--text-color-on-brand); }

/* Dialog: .ov covers its frame, so the frame's content box (.app, .page, .screen) is position: relative. */
.ov { position: absolute; inset: 0; background: var(--background-color-overlay); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 5; }
.dlg { background: var(--background-color-raised); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 1.25rem; width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: 1rem; }
.dlg .actions { justify-content: flex-end; }

/* Steps: the Client's claim progress. */
.steps { display: flex; flex-direction: column; }
.stp { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; position: relative; padding-bottom: 0.875rem; }
.stp::before { content: ""; position: absolute; left: 0.6875rem; top: 1.5rem; bottom: 0; width: 0.125rem; background: var(--border-color-default); }
.stp:last-child::before { display: none; }
.stp .b { width: 1.5rem; height: 1.5rem; border-radius: 999rem; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; border: 0.125rem solid var(--border-color-strong); background: var(--background-color-surface); color: var(--text-color-tertiary); }
.stp.done .b { background: var(--background-color-brand); border-color: var(--background-color-brand); color: var(--text-color-on-brand); }
.stp.done::before { background: var(--background-color-brand); }
.stp.cur .b { border-color: var(--background-color-brand); color: var(--text-color-brand); box-shadow: 0 0 0 0.25rem var(--background-color-brand-subtle); }
.stp small { display: block; color: var(--text-color-tertiary); font-size: 0.8125rem; }

/* ---------- signed out on the web (AuthLayout, AuthCard): the brand row, one centred card, a line under it ---------- */
.auth { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; }
.auth-col { width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: 1.25rem; }
.brandrow { display: flex; gap: 0.5rem; align-items: center; justify-content: center; font-weight: 600; color: var(--text-color-primary); }
/* The app's logo: an icon, or a short word while the logo is a placeholder. */
.mark { min-width: 2rem; height: 2rem; padding: 0 0.375rem; border-radius: var(--radius-lg); background: var(--background-color-shell); color: var(--text-color-on-shell); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.mark svg { font-size: 1.125rem; }
.authcard { padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.comfortable .authcard { padding: 1.5rem 1.25rem; }
.authcard h3 { font-size: 1.25rem; line-height: 1.75rem; }
.authfoot { text-align: center; font-size: 0.8125rem; line-height: 1.125rem; color: var(--text-color-tertiary); }
.authlang { display: flex; justify-content: center; }
.authlang .select { width: 11rem; }
/* The call centre, where a Client can only be helped by phone. */
.callcentre { display: flex; gap: 0.75rem; align-items: center; padding: 0.875rem 1rem; border-radius: var(--radius-lg); background: var(--background-color-sunken); }
.callcentre > svg { font-size: 1.5rem; color: var(--text-color-secondary); }
.callcentre b { display: block; }


/* ---------- the Client's pages (ClientLayout, ClientHeader, ClientFooter, LanguageSwitcher), on the web and in the app ---------- */
.chdr { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 1rem; background: var(--background-color-surface); border-bottom: 0.0625rem solid var(--border-color-default); }
.chdr .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--text-color-primary); text-decoration: none; white-space: nowrap; }
.chdr nav { display: flex; align-items: center; gap: 0.75rem; }
.chdr .primary { display: flex; gap: 0.25rem; margin-right: auto; }
.chdr .primary a { padding: 0.375rem 0.625rem; border-radius: var(--radius-md); color: var(--text-color-secondary); font-weight: 500; text-decoration: none; white-space: nowrap; }
.chdr .primary a.on { background: var(--background-color-brand-subtle); color: var(--text-color-brand); }
.chdr .signout { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--text-color-secondary); font-weight: 500; text-decoration: none; white-space: nowrap; }
/* The menu button and the switcher are controls: they take the Density's control height, like a button. */
.menubtn { display: none; width: var(--control-h); height: var(--control-h); align-items: center; justify-content: center; border: 0.0625rem solid var(--border-color-strong); border-radius: var(--radius-md); background: var(--background-color-surface); color: var(--text-color-primary); font-size: 1.125rem; cursor: pointer; padding: 0; }
.menubtn:hover { background: var(--background-color-hover); }
.closebtn { width: var(--control-h); height: var(--control-h); flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-color-primary); cursor: pointer; }
.closebtn:hover { background: var(--background-color-hover); }
/* The switcher draws its own pill; the native select sits invisibly on top and keeps the keyboard, the screen reader and the dropdown. */
.langsel { position: relative; display: inline-flex; }
.langsel .pill { display: inline-flex; align-items: center; gap: 0.375rem; height: var(--control-h); padding: 0 0.625rem; border: 0.0625rem solid var(--border-color-strong); border-radius: var(--radius-md); background: var(--background-color-surface); color: var(--text-color-primary); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.langsel .pill > svg:first-child { color: var(--text-color-secondary); }
.langsel .pill .code { display: none; font-weight: 600; }
.langsel .pill .chev { color: var(--text-color-tertiary); }
.langsel select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font: inherit; }
.langsel:focus-within .pill { border-color: var(--ring-color-focus); box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--ring-color-focus) 30%, transparent); }
.langsel option { color: var(--text-color-primary); background: var(--background-color-surface); }
.sr { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The menu sheet fades in and its panel slides from the right. */
.sheet { position: absolute; inset: 0; z-index: 5; background: var(--background-color-overlay); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
.menu-open > .sheet { opacity: 1; visibility: visible; transition: opacity 0.2s ease, visibility 0s; }
.sheet .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(20rem, 85%); background: var(--background-color-raised); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem; transform: translateX(100%); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.menu-open > .sheet .panel { transform: none; }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet .panel { transition: none; } }
.sheet .panel .top { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0.25rem 0.75rem; }
.sheet .panel a { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-md); color: var(--text-color-primary); font-weight: 500; text-decoration: none; }
.sheet .panel a.on { background: var(--background-color-brand-subtle); color: var(--text-color-brand); }
.sheet .panel hr { border: 0; border-top: 0.0625rem solid var(--border-color-default); margin: 0.5rem 0; width: 100%; }
.sheet .panel .langsel { margin: 0 0.25rem; }
.sheet .panel .langsel .pill { width: 100%; }
.sheet .panel .langsel .pill .chev { margin-left: auto; }
.sheet .panel .signout { margin-top: auto; }
.cftr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding: 1rem; border-top: 0.0625rem solid var(--border-color-default); background: var(--background-color-canvas); color: var(--text-color-tertiary); font-size: 0.8125rem; line-height: 1.125rem; }
.cftr nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.cftr nav a { color: var(--text-color-secondary); font-weight: 500; text-decoration: none; }
/* Phone and tablet: the pages and Sign out live in the sheet; the switcher shows the globe and the language's code. */
@container (max-width: 63.99rem) {
  .chdr .primary, .chdr .signout { display: none; }
  .chdr .menubtn { display: inline-flex; }
  .chdr .langsel .pill .name { display: none; }
  .chdr .langsel .pill .code { display: inline; }
}
/* Phone: the footer stacks. */
@container (max-width: 40rem) {
  .cftr { flex-direction: column; align-items: center; text-align: center; padding: 1.25rem 1rem 1.5rem; }
  .cftr nav { justify-content: center; }
}
/* Desktop: the pages inline, no sheet, wide gutters. */
@container (min-width: 64rem) {
  .menu-open > .sheet { opacity: 0; visibility: hidden; }
  .chdr, .cftr { padding-left: 2rem; padding-right: 2rem; }
}

/* ---------- additions the folded mockups brought ---------- */
/* PasswordField's strength meter: four bars by length. */
.meter { display: flex; flex-direction: column; gap: 0.375rem; }
.meter .bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; }
.meter .bars i { height: 0.25rem; border-radius: 999rem; background: var(--background-color-sunken); box-shadow: inset 0 0 0 0.0625rem var(--border-color-default); }
.meter[data-level="1"] .bars i:nth-child(1) { background: var(--background-color-danger); box-shadow: none; }
.meter[data-level="2"] .bars i:nth-child(-n+2) { background: var(--background-color-warning); box-shadow: none; }
.meter[data-level="3"] .bars i:nth-child(-n+3) { background: var(--background-color-brand); box-shadow: none; }
.meter[data-level="4"] .bars i { background: var(--background-color-success); box-shadow: none; }
.meter .ml { font-size: 0.75rem; line-height: 1rem; color: var(--text-color-tertiary); display: flex; justify-content: space-between; gap: 0.5rem; }
.meter .ml b { font-weight: 500; color: var(--text-color-secondary); }
.meter[data-level="1"] .ml b { color: var(--text-color-danger); }
/* The code step's resend line. */
.resend { display: flex; gap: 0.375rem; justify-content: center; flex-wrap: wrap; color: var(--text-color-tertiary); font-size: 0.8125rem; }
/* Signed-in devices (DevicesCard, DeviceRow). */
.devhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1.25rem; }
.devs { list-style: none; margin: 0; padding: 0; }
.dev { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.875rem 1.25rem; border-top: 0.0625rem solid var(--border-color-subtle); }
.dev .ic { width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--radius-lg); background: var(--background-color-sunken); color: var(--text-color-secondary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.125rem; }
.dev .who { flex: 1 1 14rem; }
.dev .state-ok { font-size: 0.75rem; font-weight: 500; color: var(--text-color-success); white-space: nowrap; }
.dev .state-seen { font-size: 0.75rem; color: var(--text-color-tertiary); white-space: nowrap; }
/* Toast viewport: bottom right, as web/src/components/Toast's ToastViewport. */
.toasts { position: fixed; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; width: 100%; max-width: 24rem; pointer-events: none; }
.toasts .toast { pointer-events: auto; max-width: none; position: relative; padding-right: 2.5rem; }
.toasts .toast .x { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.5rem; height: 1.5rem; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; }
/* A part of a page no mockup has drawn yet. */
.ph { border: 0.0625rem dashed var(--border-color-strong); border-radius: var(--radius-xl); padding: 2.5rem 1.5rem; color: var(--text-color-tertiary); text-align: center; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
mark[data-placeholder] { background: var(--background-color-warning-subtle); color: var(--text-color-warning); border-radius: var(--radius-sm); padding: 0 0.125rem; }

/* ---------- signed in on the web: the Shell (web/src/ui/Shell), drawn by shell.js ----------
   Below 48rem a top bar whose menu button opens a sheet, with 44 px targets; from 48rem the navy sidebar. */
.app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.side { display: none; position: sticky; top: 0; height: 100dvh; background: var(--background-color-shell); padding: 0.75rem; flex-direction: column; gap: 0.25rem; }
.col { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 1rem; background: var(--background-color-surface); border-bottom: 0.0625rem solid var(--border-color-default); }
.topbar .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; min-width: 0; }
.topbar .brand .mark { font-size: 1.125rem; }
.topbar .brand .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app .menubtn { display: inline-flex; width: 2.75rem; height: 2.75rem; }
.app .closebtn { width: 2.75rem; height: 2.75rem; }
/* The sheet: a modal dialog sliding in from the right, 20rem or 85%. */
.sheetwrap { position: fixed; inset: 0; z-index: 10; visibility: hidden; transition: visibility 0s linear 0.2s; }
.sheetwrap.is-open { visibility: visible; transition-delay: 0s; }
.sheet-ov { position: absolute; inset: 0; background: var(--background-color-overlay); opacity: 0; transition: opacity 0.2s ease; }
.is-open .sheet-ov { opacity: 1; }
.sheetwrap .sheet-panel { position: absolute; top: 0; bottom: 0; right: 0; width: min(20rem, 85%); display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem; overflow-y: auto; background: var(--background-color-raised); color: var(--text-color-primary); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 0.2s ease; outline: none; }
.is-open .sheet-panel { transform: none; }
@media (prefers-reduced-motion: reduce) { .sheetwrap, .sheet-ov, .sheet-panel { transition: none; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.25rem 0.75rem; }
.sheet-head h2 { font-size: 1rem; line-height: 1.5rem; }
.sheetnav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sbody { flex: 1 1 auto; min-height: 8rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; padding-bottom: 0.5rem; }
.sfoot { flex: none; display: flex; flex-direction: column; gap: 0.25rem; }
.sitem { display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 2.75rem; padding: 0 0.75rem; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-color-primary); font-weight: 500; text-decoration: none; cursor: pointer; text-align: left; }
.sitem:hover { background: var(--background-color-hover); }
.sitem[aria-current="page"] { background: var(--background-color-brand-subtle); color: var(--text-color-brand); box-shadow: inset 0.1875rem 0 0 var(--background-color-brand); }
.sitem .count { margin-left: auto; }
.sdiv { height: 0.0625rem; background: var(--border-color-default); margin: 0.5rem 0 0.25rem; flex: none; border: 0; }
.sperson { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; min-width: 0; }
.sperson .avatar { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
.sperson .txt { min-width: 0; flex: 1; }
.sperson b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-weight: 600; }
.sperson small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-color-secondary); font-size: 0.75rem; line-height: 1rem; }
/* The sidebar's items. */
.nav-item { display: flex; gap: 0.625rem; align-items: center; padding: 0.4375rem 0.625rem; border-radius: var(--radius-md); font-weight: 500; text-decoration: none; color: var(--text-color-on-shell-muted); }
.nav-item:hover, .nav-item[aria-current="page"] { background: var(--background-color-shell-active); color: var(--text-color-on-shell); }
.nav-item svg { font-size: 1rem; }
.nav-item .count { margin-left: auto; }
.side .sdiv2 { height: 0.0625rem; background: var(--background-color-shell-active); margin-top: 0.5rem; flex: none; }
.side .me { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.25rem; margin-top: 0.375rem; color: var(--text-color-on-shell); min-width: 0; }
.side .me .avatar { background: var(--background-color-shell-active); color: var(--text-color-on-shell); }
.side .me .txt { min-width: 0; flex: 1; }
.side .me b { display: block; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .me small { display: block; font-size: 0.6875rem; line-height: 1rem; color: var(--text-color-on-shell-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iconbtn { width: 2rem; height: 2rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-color-on-shell-muted); cursor: pointer; font-size: 1rem; padding: 0; }
.iconbtn:hover { background: var(--background-color-shell-active); color: var(--text-color-on-shell); }
/* The Organisation switcher: a popover from the sidebar, an inline disclosure in the sheet (OrganisationSwitcher, SheetSwitcher). */
.orgsw { display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem; border: 0; width: 100%; text-align: left; border-radius: var(--radius-md); margin-bottom: 0.75rem; background: var(--background-color-shell-active); color: var(--text-color-on-shell); }
button.orgsw { cursor: pointer; }
.orgsw .logo { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--text-color-on-shell); color: var(--background-color-shell); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.75rem; flex: none; }
.orgsw .tx { min-width: 0; flex: 1; }
.orgsw b { display: block; font-size: 0.8125rem; line-height: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orgsw small { display: block; color: var(--text-color-on-shell-muted); font-size: 0.6875rem; line-height: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swmenu { position: absolute; top: 3.5rem; left: 0.75rem; z-index: 6; width: 20rem; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.375rem; background: var(--background-color-raised); color: var(--text-color-primary); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.app .count { min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: 999rem; background: var(--background-color-brand); color: var(--text-color-on-brand); font-size: 0.6875rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; font-weight: 500; }
.grp { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.5rem 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--text-color-tertiary); flex-wrap: wrap; }
.grp b { font-weight: 600; color: var(--text-color-secondary); min-width: 0; overflow-wrap: anywhere; }
.grp .type { margin-left: auto; white-space: nowrap; }
.opt { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.5rem 0.4375rem 0.75rem; border: 0; border-radius: var(--radius-md); background: transparent; text-align: left; cursor: pointer; width: 100%; color: inherit; text-decoration: none; font-size: 0.875rem; }
.opt:hover { background: var(--background-color-hover); }
.opt .otx { flex: 1; min-width: 0; }
.opt .otx small { display: block; color: var(--text-color-tertiary); font-size: 0.75rem; line-height: 1rem; overflow-wrap: anywhere; }
.opt .tick { color: var(--text-color-brand); width: 1rem; height: 1rem; flex: none; }
.opt[aria-current] { font-weight: 600; }
.opt[disabled] { cursor: default; }
.swmenu hr, .swlist hr { border: 0; border-top: 0.0625rem solid var(--border-color-subtle); margin: 0.25rem 0; width: 100%; }
.chipbtn { position: relative; cursor: pointer; font: inherit; font-size: 0.75rem; }
.why { margin: 0.125rem 0.5rem 0.25rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-md); background: var(--background-color-danger-subtle); border: 0.0625rem solid var(--border-color-danger); color: var(--text-color-danger); font-size: 0.75rem; line-height: 1.125rem; }
.why b { display: flex; gap: 0.375rem; align-items: center; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.25rem; }
.swbtn { display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 3rem; padding: 0.375rem 0.75rem; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-md); background: var(--background-color-sunken); color: var(--text-color-primary); text-align: left; }
button.swbtn { cursor: pointer; }
button.swbtn:hover { background: var(--background-color-hover); }
.swbtn .logo { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--background-color-shell); color: var(--text-color-on-shell); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.75rem; flex: none; }
.swbtn .tx { min-width: 0; flex: 1; }
.swbtn b { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swbtn small { display: block; font-size: 0.75rem; line-height: 1rem; color: var(--text-color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swbtn .chev { color: var(--text-color-tertiary); transition: transform 0.2s ease; }
.swbtn[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .swbtn .chev { transition: none; } }
.swlist { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.25rem; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-md); }
.swlist .opt { min-height: 2.75rem; }
/* The page beside the Shell. */
.main { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.main h1 { font-size: 1.5rem; line-height: 2rem; }
.phead { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; }
.app .card.pad { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.app .card h3 { overflow-wrap: anywhere; }
.app .form { display: flex; flex-direction: column; gap: 1rem; max-width: 26rem; }
.app .form.pwf { max-width: 24rem; }
.app .btn-brand { align-self: flex-start; }
/* Settings: the Organisation and Personal tabs, then its own menu beside the content (web/src/ui/Settings). */
.app .tabs > a { padding: 0.5rem 0.75rem; }
.app .tabs > a[aria-current] { color: var(--text-color-primary); border-color: var(--background-color-brand); }
.setgrid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; }
.setgrid > .smenu { flex: 1 1 11rem; max-width: 13rem; display: flex; flex-direction: column; gap: 0.125rem; }
.setgrid > .content { flex: 999 1 26rem; max-width: 42rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.setgrid > .content.wide { max-width: none; }
.smenu a { display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.625rem; border-radius: var(--radius-md); color: var(--text-color-secondary); font-weight: 500; text-decoration: none; }
@media (max-width: 47.99rem) { .app .tabs > a, .smenu a { min-height: 2.75rem; } .reveal { width: 2.25rem; height: 2.25rem; } .btn-sm, .pgbtn { height: 2.75rem; min-width: 2.75rem; } }
.smenu a:hover { background: var(--background-color-hover); color: var(--text-color-primary); }
.smenu a[aria-current="page"] { background: var(--background-color-brand-subtle); color: var(--text-color-brand); }
.smenu svg { font-size: 1rem; }
.smenu .count { margin-left: auto; }
/* The bell: a header row of its own above every signed-in page from 48rem; in the top bar, before the menu, below it. */
.apphdr { display: none; align-items: center; justify-content: flex-end; gap: 0.5rem; min-height: 3rem; padding: 0.5rem 1.5rem; background: var(--background-color-surface); border-bottom: 0.0625rem solid var(--border-color-default); }
.tbar-end { display: inline-flex; align-items: center; gap: 0.5rem; }
.bellbtn { position: relative; width: var(--control-h); height: var(--control-h); display: inline-flex; align-items: center; justify-content: center; flex: none; border: 0.0625rem solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-color-secondary); font-size: 1.125rem; cursor: pointer; }
.topbar .bellbtn { width: 2.75rem; height: 2.75rem; }
.bellbtn:hover { background: var(--background-color-hover); }
.bellbtn[aria-expanded="true"] { background: var(--background-color-brand-subtle); border-color: var(--border-color-brand); color: var(--text-color-brand); }
.bellbtn .badge { position: absolute; top: -0.3125rem; right: -0.4375rem; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: 999rem; background: var(--background-color-brand); color: var(--text-color-on-brand); font-size: 0.6875rem; line-height: 1.125rem; font-weight: 600; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 0.125rem var(--background-color-surface); }
.bellpanel { position: fixed; top: 4rem; left: 0; right: 0; bottom: 0; z-index: 12; display: flex; flex-direction: column; background: var(--background-color-raised); border: 0 solid var(--border-color-default); border-top-width: 0.0625rem; }
.bp-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0.5rem 0.5rem 1rem; }
.bp-head h2 { font-size: 1rem; line-height: 1.5rem; }
.bp-head small { display: block; color: var(--text-color-tertiary); font-size: 0.75rem; line-height: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-head > div { min-width: 0; }
.bp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0.375rem 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.bp-body > .alert, .bp-body > .bp-load { margin: 0.25rem 0.375rem; }
.bp-foot { padding: 0.625rem 1rem; border-top: 0.0625rem solid var(--border-color-subtle); color: var(--text-color-tertiary); font-size: 0.75rem; line-height: 1rem; }
.bp-empty { padding: 2rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; text-align: center; color: var(--text-color-secondary); }
.bp-load { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem 0.5rem; color: var(--text-color-tertiary); }
.bp-more { margin: 0.25rem 0.375rem 0; }
.qhead { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.625rem 0.25rem; font-size: 0.75rem; line-height: 1rem; min-width: 0; }
.qhead b { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-color-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qhead .unreadn { flex: none; padding: 0 0.375rem; border-radius: 999rem; background: var(--background-color-brand); color: var(--text-color-on-brand); font-weight: 600; font-variant-numeric: tabular-nums; }
.qhead .textbtn { margin-left: auto; font-size: 0.75rem; flex: none; }
.alist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.arow { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.5rem 0.625rem; border-radius: var(--radius-md); color: var(--text-color-secondary); text-decoration: none; min-width: 0; }
.arow:hover { background: var(--background-color-hover); }
.arow.unread { background: var(--background-color-brand-subtle); color: var(--text-color-primary); }
.aic { width: 1.75rem; height: 1.75rem; border-radius: 999rem; border: 0.0625rem solid; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 0.875rem; }
.atx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.0625rem; }
.atx b { font-weight: 500; display: flex; gap: 0.375rem; align-items: center; flex-wrap: wrap; }
.arow.unread .atx b { font-weight: 600; }
.atx .ln { font-size: 0.8125rem; line-height: 1.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atx .dt { font-size: 0.75rem; line-height: 1rem; color: var(--text-color-tertiary); overflow-wrap: anywhere; }
.ameta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; flex: none; font-size: 0.75rem; line-height: 1rem; color: var(--text-color-tertiary); white-space: nowrap; }
.udot { display: none; width: 0.5rem; height: 0.5rem; border-radius: 999rem; background: var(--background-color-brand); }
.arow.unread .udot { display: block; }
/* Unread Alerts in another Organisation: a count beside it in the switcher, a dot on the closed switcher. */
.orgsw .swdot { width: 0.5rem; height: 0.5rem; border-radius: 999rem; background: var(--text-color-on-shell); flex: none; }
@media (min-width: 48rem) {
  .app { grid-template-columns: 13.5rem minmax(0, 1fr); }
  .side { display: flex; }
  .topbar, .sheetwrap { display: none; }
  .apphdr { display: flex; }
  .bellpanel { top: 3.25rem; right: 1rem; left: auto; bottom: auto; width: 25rem; max-height: min(36rem, calc(100dvh - 4.5rem)); border-radius: var(--radius-lg); border-width: 0.0625rem; box-shadow: var(--shadow-lg); }
  .main { padding: 1.5rem; }
  .app .card.pad { padding: 1.5rem; }
  .devhead { padding: 1.5rem; }
}
/* AuthLayout: the product's mark on the left, the page's action (the language switcher) on the right. */
.authtop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.authtop .brandrow { justify-content: flex-start; min-width: 0; }
/* Dialog over the whole window, as Radix draws it, instead of over a mockup's frame. */
.ov.ov-page { position: fixed; z-index: 20; }
/* Progress sits on the clicked control: same size and colour, its label hidden under a spinner, not clickable. */
.btn.busy { position: relative; color: transparent; pointer-events: none; }
.btn.busy .spin { position: absolute; inset: 0; margin: auto; }
.btn-brand.busy .spin { color: var(--text-color-on-brand); }
.btn-danger.busy .spin { color: var(--text-color-on-danger); }
.btn-outline.busy .spin, .btn-secondary.busy .spin, .btn-ghost.busy .spin { color: var(--text-color-primary); }

/* ---------- Claims: list, Register a Claim, the Claim page ---------- */
.field legend { font-weight: 500; font-size: var(--body-fs); padding: 0; }
.field fieldset, fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field .opt { display: inline; padding: 0; width: auto; font-weight: 400; color: var(--text-color-tertiary); }
.input[readonly] { background: var(--background-color-sunken); color: var(--text-color-secondary); border-color: var(--border-color-default); }
.with-suffix { position: relative; display: flex; align-items: center; }
.with-suffix .input { padding-right: 3rem; }
.with-suffix .sfx { position: absolute; right: 0.625rem; font-size: 0.75rem; color: var(--text-color-tertiary); pointer-events: none; }
/* A selectable chip: the chip's shape, with the selected card's border and subtle fill. */
.picks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pick { position: relative; display: inline-flex; max-width: 100%; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick > span { display: inline-flex; align-items: center; gap: 0.375rem; min-height: var(--control-h); max-width: 100%; padding: 0 var(--control-px); border: 0.0625rem solid var(--border-color-strong); border-radius: 999rem; background: var(--background-color-surface); color: var(--text-color-primary); font-size: var(--control-fs); font-weight: 500; overflow-wrap: anywhere; }
.pick input:checked + span { border-color: var(--border-color-brand); background: var(--background-color-brand-subtle); color: var(--text-color-brand); box-shadow: 0 0 0 0.0625rem var(--border-color-brand); }
.pick input:focus-visible + span { outline: 0.125rem solid var(--outline-color-focus); outline-offset: 0.125rem; }
.picks.invalid .pick > span { border-color: var(--border-color-danger-strong); }
.switchrow { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; min-height: var(--control-h); cursor: pointer; font-weight: 500; }
input.switch { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 2.25rem; height: 1.25rem; border-radius: 999rem; background: var(--border-color-strong); position: relative; cursor: pointer; display: inline-block; }
input.switch::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 1rem; height: 1rem; border-radius: 999rem; background: var(--background-color-surface); box-shadow: var(--shadow-sm); }
input.switch:checked { background: var(--background-color-brand); }
input.switch:checked::after { left: 1.125rem; }
hr.rule { border: 0; border-top: 0.0625rem solid var(--border-color-default); margin: 0; width: 100%; }
/* Inside the app, key and value pairs read left to right: a label column, then the value. */
.app .kv { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
.app .kv dd { text-align: left; font-weight: 500; overflow-wrap: anywhere; }
.eyebrow { font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-color-tertiary); }
.crumb { color: var(--text-color-tertiary); display: flex; gap: 0.375rem; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.crumb a { color: var(--text-color-link); }
.backbtn { width: var(--control-h); height: var(--control-h); flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-color-primary); text-decoration: none; }
.backbtn:hover { background: var(--background-color-hover); }
.titlerow { display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.sdim { position: fixed; inset: 0; z-index: 15; background: var(--background-color-overlay); }
.spanel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 16; width: 85%; display: flex; flex-direction: column; min-width: 0; background: var(--background-color-surface); box-shadow: var(--shadow-lg); }
.spanel-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; padding: 0.75rem 1.25rem; border-bottom: 0.0625rem solid var(--border-color-default); }
.spanel-head h1 { font-size: 1.125rem; line-height: 1.75rem; }
.spanel-body { flex: 1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); min-height: 0; }
.spanel-left { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.spanel-scroll { flex: 1; overflow: auto; padding: 0 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.spanel-foot { border-top: 0.0625rem solid var(--border-color-default); padding: 0.75rem 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.spanel-right { border-left: 0.0625rem solid var(--border-color-default); background: var(--background-color-sunken); padding: 1rem; overflow: auto; display: flex; flex-direction: column; gap: 0.75rem; }
@media (max-width: 64rem) { .spanel { width: 100%; } .spanel-body { grid-template-columns: minmax(0, 1fr); overflow: auto; } .spanel-scroll { overflow: visible; } .spanel-right { border-left: 0; border-top: 0.0625rem solid var(--border-color-default); } }
.spanel-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.spanel-view > .spanel-scroll { padding-top: 1rem; }
.spanel-scroll > .tabs { flex-shrink: 0; } /* a scrolling strip would otherwise shrink to nothing in the panel's column */
/* A form inside the Shell: one card, sections divided by a rule. */
.formcard { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 40rem) { .cols2, .cols3 { grid-template-columns: minmax(0, 1fr); } }
.sect { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1rem; border-top: 0.0625rem solid var(--border-color-default); }
.sect > h4 { color: var(--text-color-secondary); }
.big { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.numbox { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0.75rem 1rem; border-radius: var(--radius-lg); background: var(--background-color-brand-subtle); border: 0.0625rem solid var(--border-color-brand); color: var(--text-color-brand); }
.numbox small { display: block; font-size: 0.75rem; line-height: 1rem; }
/* The Claim page: the main column and a side column. */
.dgrid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; }
@media (max-width: 64rem) { .dgrid { grid-template-columns: minmax(0, 1fr); } }
.pnl { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.pnl > header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pnl > header h3 { font-size: 1rem; line-height: 1.5rem; min-width: 0; overflow-wrap: anywhere; }
.claimhead { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.num1 { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-width: 0; }
.picgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 40rem) { .picgrid { grid-template-columns: minmax(0, 1fr); } }
.pic { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); min-width: 0; }
.pic.empty { background: var(--background-color-sunken); border-style: dashed; border-color: var(--border-color-strong); color: var(--text-color-secondary); text-align: left; align-items: stretch; padding: 0.75rem; }
.flaglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.flaglist li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: flex-start; min-width: 0; }
.flaglist li > div { min-width: 0; flex: 1 1 10rem; overflow-wrap: anywhere; }
ol.steps { list-style: none; margin: 0; padding: 0; }
.tle { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.tle .what { display: flex; gap: 0.375rem 0.5rem; align-items: center; flex-wrap: wrap; font-weight: 600; }
.tle .who { display: block; flex: none; color: var(--text-color-tertiary); font-size: 0.75rem; line-height: 1rem; overflow-wrap: anywhere; }
.tle .note { color: var(--text-color-secondary); overflow-wrap: anywhere; }
.tle details { margin-top: 0.25rem; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); background: var(--background-color-sunken); }
.tle summary { cursor: pointer; padding: 0.5rem 0.75rem; font-weight: 500; color: var(--text-color-secondary); }
.tle details .inner { padding: 0.75rem 0.75rem 0; }
.notelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.note1 { padding: 0.75rem; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.note1 .meta { display: flex; gap: 0.25rem 0.5rem; flex-wrap: wrap; align-items: center; color: var(--text-color-tertiary); font-size: 0.75rem; line-height: 1rem; }
.letter { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); min-width: 0; }
.letter > header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.composer { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 0.75rem; border-top: 0.0625rem solid var(--border-color-default); }
/* ---------- a list page (fraud-signals): header, tabs only for several lists, subtitle, then one tinted card
   holding the filter rows, the tags and the table, paged above and below ---------- */
.pagehead { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.subtitle { color: var(--text-color-tertiary); font-size: 0.8125rem; }
.listcard { background: var(--background-color-sunken); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-xl); padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; position: relative; }
.frows { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.625rem 0.75rem; align-items: start; }
.frows .by { min-height: var(--control-h); display: flex; align-items: center; color: var(--text-color-tertiary); font-size: 0.8125rem; white-space: nowrap; }
.frows .ctrls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; position: relative; min-width: 0; }
.frows .fact { display: flex; gap: 0.5rem; align-items: center; }
@media (max-width: 40rem) { .frows { grid-template-columns: minmax(0, 1fr); } .frows .by { min-height: 0; } .frows > span:empty { display: none; } }
.gtag { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.375rem 0 0.625rem; border-radius: 999rem; border: 0.0625rem solid; font-size: 0.8125rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.gtag .c { min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: 999rem; background: var(--background-color-surface); display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.gtag.t-danger { background: var(--background-color-danger-subtle); color: var(--text-color-danger); border-color: var(--border-color-danger); }
.gtag.t-warning { background: var(--background-color-warning-subtle); color: var(--text-color-warning); border-color: var(--border-color-warning); }
.gtag.t-info { background: var(--background-color-info-subtle); color: var(--text-color-info); border-color: var(--border-color-info); }
.gtag.t-neutral { background: var(--background-color-neutral-subtle); color: var(--text-color-neutral); border-color: var(--border-color-neutral); }
.gtag[aria-pressed="true"] { box-shadow: 0 0 0 0.125rem var(--border-color-brand); }
.search { position: relative; width: 20rem; max-width: 100%; }
.search svg { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); color: var(--text-color-tertiary); }
.search .input { padding-left: 2rem; }
.fchip { height: var(--control-h); padding: 0 0.75rem; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-md); background: var(--background-color-surface); color: var(--text-color-primary); display: inline-flex; gap: 0.375rem; align-items: center; font-weight: 500; cursor: pointer; white-space: nowrap; font-size: 0.8125rem; position: relative; }
.fchip svg { color: var(--text-color-tertiary); }
.fchip.on { background: var(--background-color-brand-subtle); border-color: var(--border-color-brand); color: var(--text-color-brand); font-weight: 600; }
.fpop { position: absolute; top: calc(100% + 0.375rem); left: 0; z-index: 7; background: var(--background-color-raised); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 0.375rem; min-width: 12rem; display: flex; flex-direction: column; gap: 0.125rem; }
.fpop label { display: flex; gap: 0.5rem; align-items: center; padding: 0.375rem 0.5rem; border-radius: var(--radius-md); cursor: pointer; font-weight: 400; color: var(--text-color-primary); }
.fpop label:hover { background: var(--background-color-hover); }
/* A multi-select filter: the chip's × clears what Apply set; the popover searches its options. */
.fmulti { position: relative; display: inline-flex; }
.fmulti.on .fchip { padding-right: 2rem; }
.fmulti.on .fchip > svg { display: none; }
.fchip-x { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-color-brand); cursor: pointer; }
.fchip-x:hover { background: var(--background-color-hover); }
.fpop-search { width: 16rem; gap: 0.375rem; }
.fpop-search .search { width: 100%; }
.fopts { display: flex; flex-direction: column; gap: 0.125rem; max-height: 12rem; overflow-y: auto; }
.fpop-foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.375rem; border-top: 0.0625rem solid var(--border-color-default); }
.fpop-note { padding: 0.375rem 0.5rem; white-space: nowrap; }
.tablebox { background: var(--background-color-surface); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); overflow: hidden; }
.tablebox .datatable td { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.tablebox .datatable tr:last-child td { border-bottom: 0; }
.tablebox .datatable th:first-child, .tablebox .datatable td:first-child { padding-left: 1rem; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; padding: 0.5rem 0.75rem; background: var(--background-color-surface); color: var(--text-color-tertiary); font-size: 0.75rem; }
.pagination .pp { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.pagination .input { height: 1.75rem; font-size: 0.75rem; }
.pagination .select { flex: none; }
.pgbtn { width: 1.75rem; height: 1.75rem; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-md); background: var(--background-color-surface); color: var(--text-color-secondary); cursor: pointer; }
.pgbtn:disabled { color: var(--text-color-disabled); cursor: not-allowed; }
.tablebox > .pagination:first-child { border-bottom: 0.0625rem solid var(--border-color-default); }
.tablebox > .pagination:last-child { border-top: 0.0625rem solid var(--border-color-default); }
.gtag[aria-pressed="true"]::after { content: "×"; margin: 0 0.125rem 0 -0.125rem; font-weight: 600; }
.dot { width: 0.5rem; height: 0.5rem; border-radius: 999rem; flex: none; }
.dot-danger { background: var(--background-color-danger); }
.dot-warning { background: var(--background-color-warning); }
.dot-info { background: var(--background-color-info); }
.segchips { display: inline-flex; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-md); overflow: hidden; background: var(--background-color-surface); }
.segchips button { height: calc(var(--control-h) - 0.125rem); padding: 0 0.75rem; border: 0; border-left: 0.0625rem solid var(--border-color-default); background: transparent; cursor: pointer; font-weight: 500; font-size: 0.8125rem; color: var(--text-color-secondary); }
.segchips button:first-child { border-left: 0; }
.segchips button[aria-pressed="true"] { background: var(--background-color-brand-subtle); color: var(--text-color-brand); font-weight: 600; }
.btn-warning { background: var(--background-color-warning-subtle); color: var(--text-color-warning); border-color: var(--border-color-warning); }
/* An amount pinned right sits just left of the pinned actions column, so .actcol has a fixed width. */
.datatable .pin-r2 { position: sticky; right: 6.5rem; z-index: 1; background: var(--background-color-surface); box-shadow: inset 0.0625rem 0 0 var(--border-color-subtle); }
.datatable th.pin-r2 { z-index: 2; background: var(--background-color-sunken); }
.datatable tr:hover td.pin-r2 { background: linear-gradient(var(--background-color-hover), var(--background-color-hover)), var(--background-color-surface); }
.datatable .actcol { width: 6.5rem; min-width: 6.5rem; }
.datatable td.wrap { white-space: normal; min-width: 13rem; }
.datatable td.wrap-s { white-space: normal; min-width: 8rem; max-width: 11rem; }
.datatable tr.staff td { background: var(--background-color-warning-subtle); }
.tabs > button { padding: 0.5rem 0.75rem; color: var(--text-color-secondary); font-weight: 500; border: 0; border-bottom: 0.125rem solid transparent; margin-bottom: -0.0625rem; background: none; cursor: pointer; white-space: nowrap; display: inline-flex; gap: 0.375rem; align-items: center; }
.tabs > button[aria-selected="true"] { color: var(--text-color-primary); border-color: var(--background-color-brand); }
.tabs { overflow-x: auto; scrollbar-width: none; }

/* A side panel's sections: a card each, its title in its own header. */
.pcard { background: var(--background-color-surface); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-xl); }
.pcard > header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem 1rem; border-bottom: 0.0625rem solid var(--border-color-default); }
.pcard > header h3 { font-size: 0.9375rem; line-height: 1.375rem; }
.pcard > .pb { padding: 1rem; display: flex; flex-direction: column; gap: 0.875rem; }
.pcard > .tablescroll, .pcard > .fflags { border: 0; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
/* Scores: a flag's leads its row in a box sized for three digits; the Claim's Risk score is the highlight, sized for 100. */
.riskhead { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.rscore { width: 4.5rem; height: 3.5rem; flex: none; border-radius: var(--radius-lg); border: 0.0625rem solid; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; line-height: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fscore { width: 2.75rem; flex: none; text-align: center; font-weight: 600; font-size: 1rem; line-height: 1.5rem; font-variant-numeric: tabular-nums; border-radius: var(--radius-md); border: 0.0625rem solid; padding: 0.125rem 0; }
.s-danger { background: var(--background-color-danger-subtle); color: var(--text-color-danger); border-color: var(--border-color-danger); }
.s-warning { background: var(--background-color-warning-subtle); color: var(--text-color-warning); border-color: var(--border-color-warning); }
.s-info { background: var(--background-color-info-subtle); color: var(--text-color-info); border-color: var(--border-color-info); }
.s-neutral { background: var(--background-color-neutral-subtle); color: var(--text-color-disabled); border-color: var(--border-color-neutral); }
.fflags { list-style: none; margin: 0; padding: 0; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); }
.fflags > li { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.75rem 0.875rem; border-top: 0.0625rem solid var(--border-color-subtle); }
.fflags > li:first-child { border-top: 0; }
.ftxt { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.ftxt small { color: var(--text-color-tertiary); font-size: 0.75rem; line-height: 1rem; }
.photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); border: 0.0625rem solid var(--border-color-default); background: repeating-linear-gradient(135deg, var(--background-color-surface) 0 0.75rem, var(--background-color-sunken) 0.75rem 1.5rem); display: flex; align-items: flex-end; padding: 0.5rem; font-size: 0.75rem; color: var(--text-color-secondary); }
.photo .aibox { position: absolute; border: 0.125rem solid var(--border-color-danger-strong); border-radius: var(--radius-sm); }
.photo .cap { background: var(--background-color-surface); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-sm); padding: 0.125rem 0.375rem; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.compare .card { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.app .compare .kv { grid-template-columns: 4.5rem minmax(0, 1fr); }

/* ---------- the fraud case page: a summary of four facts, then tabs of form sections ---------- */
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-xl); background: var(--background-color-surface); }
.summary > div { padding: 0.875rem 1rem; border-left: 0.0625rem solid var(--border-color-default); display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.summary > div:first-child { border-left: 0; }
.summary .lbl { font-size: 0.75rem; color: var(--text-color-tertiary); font-weight: 500; }
.summary .val { font-weight: 600; }
@media (max-width: 56rem) { .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .summary > div:nth-child(3) { border-left: 0; } .summary > div:nth-child(n+3) { border-top: 0.0625rem solid var(--border-color-default); } }
.formsec { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem 0; border-top: 0.0625rem solid var(--border-color-default); }
.formsec:first-child { border-top: 0; padding-top: 0.5rem; }
.formsec .intro h4 { margin-bottom: 0.25rem; }
@media (max-width: 56rem) { .formsec { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
@media (max-width: 48rem) { .grid3 { grid-template-columns: minmax(0, 1fr); } }
.span3 { grid-column: 1 / -1; }
.checkrow { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; }
.checkrow input { margin-top: 0.1875rem; accent-color: var(--background-color-brand); }
.choices { display: grid; gap: 0.5rem; }
.choices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) { .choices.two { grid-template-columns: minmax(0, 1fr); } }
.sectiontitle { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-color-tertiary); }
.losstable { width: 100%; border-collapse: collapse; }
.losstable th { font-size: 0.75rem; font-weight: 500; color: var(--text-color-tertiary); text-align: left; padding: 0 0.75rem 0.5rem 0; }
.losstable th.r, .losstable td.r { text-align: right; }
.losstable td { padding: 0 0.75rem 0.625rem 0; }
.losstable td:first-child { font-weight: 500; white-space: nowrap; width: 9rem; }
.losstable tfoot td { border-top: 0.0625rem solid var(--border-color-default); padding-top: 0.625rem; font-weight: 600; }
.losstable .input { text-align: right; }
.perp { padding: 1rem; display: flex; flex-direction: column; gap: 0.875rem; }
.kvgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1.5rem; }
.kvgrid > div { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; overflow-wrap: anywhere; }
.kvgrid .lbl { font-size: 0.75rem; color: var(--text-color-tertiary); }
.kvgrid .wide { grid-column: span 2; }
@media (max-width: 48rem) { .kvgrid { grid-template-columns: minmax(0, 1fr); } .kvgrid .wide { grid-column: auto; } }
.chist { display: flex; flex-direction: column; gap: 0.5rem; }

/* ---------- the Survey workspace's tabs (design 181, the Capture hand-off from client-capture) ---------- */
/* Capture: the map and the Slots on the left, the flags or one item's details on the right. */
.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; }
@media (max-width: 76rem) { .ws-grid { grid-template-columns: minmax(0, 1fr); } }
/* The map is MapLibre in web; here a drawn street grid with the numbered points and the capture fixes' accuracy ring. */
.ws-map { position: relative; height: 13rem; border-radius: var(--radius-lg); overflow: hidden; border: 0.0625rem solid var(--border-color-default); background:
  linear-gradient(90deg, transparent 47%, var(--border-color-default) 47%, var(--border-color-default) 53%, transparent 53%),
  linear-gradient(0deg, transparent 62%, var(--border-color-default) 62%, var(--border-color-default) 66%, transparent 66%),
  linear-gradient(20deg, transparent 30%, var(--background-color-sunken) 30%, var(--background-color-sunken) 34%, transparent 34%),
  var(--background-color-surface); }
.ws-map .pt { position: absolute; width: 1.375rem; height: 1.375rem; border-radius: 999rem; display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 700; color: var(--text-color-on-brand); background: var(--background-color-brand); border: 0.125rem solid var(--background-color-surface); transform: translate(-50%, -50%); }
.ws-map .pt.p1 { background: var(--background-color-info); }
.ws-map .pt.p2 { background: var(--background-color-danger); }
.ws-map .pt.pw { background: var(--background-color-shell); color: var(--text-color-on-shell); }
.ws-map .ring { position: absolute; border-radius: 999rem; border: 0.0625rem dashed var(--border-color-brand); background: color-mix(in srgb, var(--background-color-brand) 10%, transparent); transform: translate(-50%, -50%); }
.ws-map .attr { position: absolute; right: 0.375rem; bottom: 0.25rem; font-size: 0.625rem; color: var(--text-color-tertiary); }
.ws-legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem 1rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--text-color-secondary); }
/* Four Slots a row: the thumbnail waits for its original, the caption and tag never do. */
.ws-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
@media (max-width: 40rem) { .ws-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-thumb { border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); overflow: hidden; background: var(--background-color-surface); text-align: left; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.ws-thumb[aria-pressed="true"], .ws-thumb.on { border-color: var(--border-color-brand); box-shadow: 0 0 0 0.0625rem var(--border-color-brand); }
.ws-thumb .img { height: 4.25rem; background: linear-gradient(135deg, var(--background-color-sunken), var(--border-color-default)); }
.ws-thumb .img.wait, .ws-thumb .img.broken { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; font-size: 0.6875rem; background: var(--background-color-sunken); color: var(--text-color-tertiary); }
.ws-thumb .img.broken { color: var(--text-color-danger); }
.ws-thumb .cap { padding: 0.375rem 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; align-items: flex-start; }
.ws-thumb .cap b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ws-thumb .cap small { color: var(--text-color-tertiary); }
/* Survey: the form's column and the fraud flags panel beside the Findings. */
.ws-split { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1rem; align-items: start; }
@media (max-width: 76rem) { .ws-split { grid-template-columns: minmax(0, 1fr); } }
/* A field's value with the tag naming where it came from, and Correct beside it. */
.srcval { display: flex; gap: 0.375rem 0.5rem; align-items: center; flex-wrap: wrap; }
.srcval .chip { font-size: 0.6875rem; }
/* ---------- Policies (web/src/ui/Policies, web/src/ui/Policy): the list's search, the Policy's head and cards ---------- */
/* Main's placeholder names a plate and a dotted Policy number, so the box is wider than Claims'. */
.pol-search { width: 22rem; }
/* The panel's head: the number, then the endorsement in the tertiary weight, as main's h1 draws it. */
.pol-endo { color: var(--text-color-tertiary); font-weight: 400; }
/* Four cards, two a row from 64rem as main's lg:grid-cols-2; their pairs read left to right, as .app .kv does. */
.pol-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 64rem) { .pol-cards { grid-template-columns: minmax(0, 1fr); } }
.pol-cards .kv { grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr); }
.pol-cards .kv dd { text-align: left; overflow-wrap: anywhere; }
/* The NIK or NPWP: the number with its link, then the note or the error under it. */
.pol-id { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; min-width: 0; }
.pol-id .row { gap: 0.25rem 0.75rem; }
.pol-id .alert { font-weight: 400; }
/* Settings › Organisation and Policy import (web/src/ui/Settings/Organisation, PolicyImport, ImportMapping). */
.set-h2 { font-size: 1.125rem; line-height: 1.75rem; }
.set-h3 { font-size: 1rem; line-height: 1.5rem; }
.set-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.set-head > .tight { min-width: 0; flex: 1 1 16rem; }
/* A form page's head (Import mapping): the title takes the room, the actions stay top right. */
.set-formhead { align-items: flex-start; }
.set-formhead > .titlerow { flex: 1 1 24rem; }
.set-narrow { max-width: 20rem; }
.set-sk { display: flex; flex-direction: column; gap: 0.875rem; padding: 0.25rem 0; }
.set-block { display: block; overflow-wrap: anywhere; }
.set-anywhere { min-width: 0; overflow-wrap: anywhere; }

/* Upload card: the drop zone, the status bar, then the result. */
.set-drop { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1.5rem; text-align: center; border: 0.0625rem dashed var(--border-color-strong); border-radius: var(--radius-lg); }
.set-drop > svg { font-size: 1.5rem; color: var(--text-color-tertiary); }
.set-drop .tight { align-items: center; }
.app .set-drop .btn-brand { align-self: center; }
.set-status { display: flex; flex-direction: column; gap: 0.75rem; }
.set-status-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.set-status-head > .tight { min-width: 0; flex: 1 1 14rem; overflow-wrap: anywhere; }
.set-status-head b { font-weight: 500; }
.set-bar { height: 0.5rem; }
.set-bar-danger i { background: var(--background-color-danger); }
.set-bar-warning i { background: var(--background-color-warning); }
.set-bar-indet i { width: 100%; animation: pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .set-bar-indet i { animation: none; } }
.set-result { gap: 0.75rem; }
.set-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
@media (max-width: 40rem) { .set-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.set-tiles > div { display: flex; flex-direction: column-reverse; gap: 0.125rem; min-width: 0; padding: 0.5rem 0.75rem; border-radius: var(--radius-lg); background: var(--background-color-sunken); }
.set-tiles dt { font-size: 0.75rem; line-height: 1rem; color: var(--text-color-tertiary); }
.set-tiles dd { margin: 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.set-probs td.set-wrap { white-space: normal; min-width: 14rem; }
.set-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }

/* The mapping's summary on the import page: header → field pairs. */
.set-maplist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; }
.set-maplist li { display: flex; align-items: center; gap: 0.375rem; min-width: 0; overflow-wrap: anywhere; }

/* Import history: rows in one card; a row's border follows the first visible one, as data-when hides some. */
.set-hist { gap: 0.5rem; }
.set-hlist { list-style: none; margin: 0; padding: 0; }
.set-hrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.875rem 1.25rem; }
.set-hrow:not([hidden]) ~ .set-hrow { border-top: 0.0625rem solid var(--border-color-subtle); }
.set-hrow .who { flex: 1 1 14rem; }
.set-hrow .who b { overflow-wrap: anywhere; }
.set-hrow .who b .tert { font-weight: 400; }
.set-hempty { padding: 1.5rem; gap: 0.25rem; }
.set-hempty > svg { font-size: 1.5rem; color: var(--text-color-tertiary); }

/* Import mapping: the column table, its new and missing rows, and the code values. */
.set-aichip { align-self: flex-start; white-space: normal; }
.set-maptable td { vertical-align: top; }
/* Holds the sr-only Notes label inside the scroller, so it never widens the page. */
.set-maptable th { position: relative; }
.set-maptable td.set-samples { white-space: normal; min-width: 10rem; color: var(--text-color-tertiary); }
.set-maptable .select { min-width: 12rem; }
.set-maptable tr.set-new td { background: var(--background-color-brand-subtle); }
.set-maptable tr.set-missing td { color: var(--text-color-tertiary); }
.set-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.set-codelink { font-size: 0.75rem; line-height: 1rem; }
.set-maptable .help { margin-top: 0.25rem; white-space: normal; min-width: 12rem; }
.set-sheet { max-width: 18rem; }
.set-bullets { margin: 0.25rem 0 0; padding-left: 1.25rem; font-weight: 500; }
.set-codegroup { display: flex; flex-direction: column; gap: 0.375rem; }
.set-codegroup h3 { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--text-color-secondary); overflow-wrap: anywhere; }
.set-coderow { display: grid; grid-template-columns: minmax(6rem, auto) auto minmax(10rem, 16rem) auto; gap: 0.5rem; align-items: center; justify-content: start; }
.set-coderow code { overflow-wrap: anywhere; }
@media (max-width: 40rem) { .set-coderow { display: flex; flex-wrap: wrap; } .set-coderow .select { flex: 1 1 10rem; } }
.set-codelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.set-codelist li { display: flex; align-items: center; gap: 0.5rem; }
.set-sheetdl { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.set-sheetdl dt { font-weight: 500; }
.set-sheetdl dd { margin: 0; }
.set-vlist { list-style: none; margin: 0; padding: 0; }
.set-vlist li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.75rem; }
.set-vlist li + li { border-top: 0.0625rem solid var(--border-color-subtle); }
.set-vlist a { font-weight: 500; }

/* Settings › Support access (web/src/ui/Settings/SupportAccess) */
/* The line preview: the pick and below see everything, the levels up to the top their own records, the rest are struck. */
.sa-preview { background: var(--background-color-sunken); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); padding: 0.75rem 0.875rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sa-eyebrow { font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--text-color-tertiary); }
.sa-line { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; }
.sa-line li { display: flex; gap: 0.5rem; align-items: center; }
.sa-line .sa-nm { min-width: 0; }
.sa-line .sa-what { margin-left: auto; font-size: 0.75rem; font-weight: 400; color: var(--text-color-tertiary); white-space: nowrap; }
.sa-line .sa-all { color: var(--text-color-success); font-weight: 600; }
.sa-line .sa-own { color: var(--text-color-primary); }
.sa-line .sa-off { color: var(--text-color-tertiary); }
.sa-line .sa-off .sa-nm { text-decoration: line-through; }
/* The durations: ChoiceField's pills, two to a row below 48rem. */
@media (max-width: 47.99rem) { .sa-durs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sa-durs .pick > span { width: 100%; justify-content: center; } }
/* Grants: one card, a pager above and below the rows; Activity stays rightmost on every row. */
.sa-list { overflow: hidden; }
.sa-rows { list-style: none; margin: 0; padding: 0; border-bottom: 0.0625rem solid var(--border-color-subtle); }
.sa-grant { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 1.25rem; border-top: 0.0625rem solid var(--border-color-subtle); }
.sa-who { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; overflow-wrap: anywhere; }
.sa-who small { font-size: 0.75rem; line-height: 1rem; color: var(--text-color-tertiary); }
.sa-nameline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.sa-nameline b { font-weight: 600; }
.sa-why { font-size: 0.8125rem; color: var(--text-color-secondary); }
.sa-acts { flex: 1 0 100%; justify-content: flex-end; }
@media (min-width: 48rem) { .sa-grant { flex-wrap: nowrap; } .sa-acts { flex: none; flex-wrap: nowrap; } }
/* A grant's page (web/src/ui/Settings/SupportGrant): the summary's parts, then one activity row a request. */
.sg-back { align-self: flex-start; }
.sg-part { padding: 1rem 1.25rem; border-top: 0.0625rem solid var(--border-color-subtle); }
.sg-reach { display: block; font-weight: 400; color: var(--text-color-tertiary); }
.sg-foot { display: flex; justify-content: flex-end; padding: 0.75rem 1.25rem; border-top: 0.0625rem solid var(--border-color-subtle); }
.sg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 1rem 1.25rem; }
.sg-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 1rem; padding: 0.625rem 1.25rem; border-top: 0.0625rem solid var(--border-color-subtle); font-size: 0.875rem; line-height: 1.25rem; }
.sg-row time { flex: none; width: 10rem; font-size: 0.75rem; line-height: 1rem; color: var(--text-color-tertiary); font-variant-numeric: tabular-nums; }
.sg-row b { font-weight: 500; }
.sg-rec { min-width: 0; color: var(--text-color-tertiary); overflow-wrap: anywhere; }
.sg-empty { border-top: 0.0625rem solid var(--border-color-subtle); }
/* The Client's web pages (ClientLayout, ClientFrame): the kit's .chdr, .cftr and .sheet, laid out as a whole page. */

/* The frame is the container kit.css's header and footer query; the sheet sits outside it, so it stays fixed to the window. */
.cl-frame { min-height: 100dvh; display: flex; flex-direction: column; container-type: inline-size; font-size: var(--body-fs); line-height: var(--body-lh); }
.cl-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem; }
.cl-tools { display: flex; align-items: center; gap: 0.75rem; }

/* A page with no route yet is listed but not linked, in the header, the sheet and the footer alike. */
.cl-nolink { color: var(--text-color-secondary); font-weight: 500; white-space: nowrap; }
.chdr .primary .cl-nolink { padding: 0.375rem 0.625rem; border-radius: var(--radius-md); }
.sheet .panel .cl-nolink { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; color: var(--text-color-primary); }

/* Signed in below 1024 px, the switcher lives only in the sheet. */
@container (max-width: 63.99rem) { .cl-hdrlang { display: none; } }

.cl-sheet { position: fixed; z-index: 30; opacity: 1; visibility: visible; font-size: var(--body-fs); line-height: var(--body-lh); }
.cl-sheet .panel { transform: none; }
.cl-scrim { position: absolute; inset: 0; }
@media (min-width: 64rem) { .cl-sheet { display: none; } }

.cl-upper { text-transform: uppercase; }
/* CodeField: one field at the control's height, the digits spaced out. */
.cl-otp { height: 2.75rem; font-size: 1.375rem; }
.cl-static { cursor: default; }
.cl-static span:not(.ic) { overflow-wrap: anywhere; }
.resend.cl-resend { justify-content: flex-start; color: var(--text-color-secondary); font-size: inherit; }

.cl-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.cl-kv { grid-template-columns: auto minmax(0, 1fr); }
.cl-kv dd { overflow-wrap: anywhere; }
.cl-call { font-weight: 500; font-variant-numeric: tabular-nums; text-underline-offset: 0.1875rem; }

/* ErrorView: the app's error page, drawn without the Client frame. */
.cl-errorview { padding: 1rem; }
.cl-errorview .btn { margin-top: 1rem; }
/* Emails (platform/mail): each drawn as a mail client shows it, the client's From, To and Subject above the message.
   Every email shares one frame: a brand row, the copy, a brand-filled button for every action, and small print
   under a rule inside the card. */
.mail-page { min-height: 100dvh; padding: 2rem 1rem 6rem; display: flex; justify-content: center; align-items: flex-start; }
/* The mail client's window. */
.mail-client { width: 100%; max-width: 44rem; background: var(--background-color-surface); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.mail-bar { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; background: var(--background-color-sunken); border-bottom: 0.0625rem solid var(--border-color-default); font-size: 0.75rem; line-height: 1rem; color: var(--text-color-tertiary); }
.mail-bar i { width: 0.625rem; height: 0.625rem; border-radius: 999rem; background: var(--border-color-strong); opacity: 0.5; }
.mail-bar span { margin-left: 0.5rem; }
.mail-head { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; border-bottom: 0.0625rem solid var(--border-color-default); }
.mail-head h2 { font-size: 1.125rem; line-height: 1.75rem; overflow-wrap: anywhere; }
.mail-head dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.75rem; align-items: baseline; font-size: 0.8125rem; line-height: 1.25rem; }
.mail-head dt { color: var(--text-color-tertiary); }
.mail-head dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* An attachment, as the client lists it under the head. */
.mail-att { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.75rem; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); background: var(--background-color-surface); }
.mail-att > svg { font-size: 1.25rem; color: var(--text-color-danger); }
.mail-att b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.mail-att small { display: block; color: var(--text-color-tertiary); font-size: 0.75rem; line-height: 1rem; }
/* The message: main's 30rem card, at the mail client's own 16 px text. */
.mail-body { padding: 1.5rem 1rem 2rem; display: flex; justify-content: center; background: var(--background-color-sunken); }
.mail-msg { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; background: var(--background-color-surface); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-xl); font-size: 1rem; line-height: 1.5rem; overflow-wrap: anywhere; }
.mail-msg h3 { font-size: 1.25rem; line-height: 1.75rem; }
.mail-msg .btn { align-self: flex-start; }
/* A one-time code: grouped in threes, centred in a brand-tinted box, so a long press selects it whole. */
.mail-code { padding: 0.75rem 1rem; border-radius: var(--radius-lg); background: var(--background-color-brand-subtle); color: var(--text-color-brand); font-size: 2rem; line-height: 2.5rem; font-weight: 600; letter-spacing: 0.25em; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mail-foot { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.75rem; border-top: 0.0625rem solid var(--border-color-default); color: var(--text-color-tertiary); font-size: 0.75rem; line-height: 1rem; }

/* Settings › Roles: the editor's Permission groups, a Role's held Permissions in its side panel, and the editor's form. */

/* The editor: a card each for the name and the Permissions, kept narrow enough that a label stays beside its chips. */
.rol-form { max-width: 48rem; }
.rol-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.rol-name { max-width: 24rem; }
.rol-groups { display: flex; flex-direction: column; gap: 0.5rem; }
.rol-grp { border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); background: var(--background-color-surface); }
.rol-grp > summary { list-style: none; display: flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.75rem; cursor: pointer; font-weight: 600; border-radius: var(--radius-lg); }
.rol-grp > summary::-webkit-details-marker { display: none; }
.rol-grp > summary:hover { background: var(--background-color-hover); }
.rol-grp > summary > svg { color: var(--text-color-tertiary); transform: rotate(-90deg); transition: transform 0.15s; }
.rol-grp[open] > summary > svg { transform: none; }
.rol-gname { min-width: 0; overflow-wrap: anywhere; }
.rol-count { margin-left: auto; font-weight: 500; font-size: 0.8125rem; color: var(--text-color-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rol-perms { border-top: 0.0625rem solid var(--border-color-default); padding: 0.125rem 0.75rem; }
.rol-perm { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.5rem 0; cursor: pointer; }
.rol-perm + .rol-perm { border-top: 0.0625rem solid var(--border-color-subtle); }
.rol-perm input { flex: none; width: 1rem; height: 1rem; margin: 0.125rem 0 0; accent-color: var(--background-color-brand); }
.rol-ptext { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-width: 0; }
.rol-plabel { overflow-wrap: anywhere; }
.rol-perm:has(input:disabled) { cursor: not-allowed; }
.rol-perm:has(input:disabled) .rol-plabel { color: var(--text-color-secondary); }
@media (prefers-reduced-motion: reduce) { .rol-grp > summary > svg { transition: none; } }

/* A Role's side panel: its title takes the room and the actions wrap under it on a phone; a card per group it holds. */
.rol-head { flex-wrap: wrap; }
.rol-head > .rol-htitle { flex: 1 1 12rem; min-width: 0; }
.rol-head > .actions { margin-left: auto; }
.rol-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 64rem) { .rol-cards { grid-template-columns: minmax(0, 1fr); } }
.rol-plist { list-style: none; margin: 0; padding: 0 1rem; }
.rol-plist li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; padding: 0.625rem 0; overflow-wrap: anywhere; }
.rol-plist li + li { border-top: 0.0625rem solid var(--border-color-subtle); }

/* Settings › Members: the list's pager around its count tags, a Member's side panel and the Change Roles picker. */

/* The page holds every row but shows a page of them: a row from a later page (.mem-later) shows only while a count
   tag filters, and the pager swaps its page count (.mem-paged) for the filter's (.mem-filtered). */
.mem-list:not(:has(.gtag[aria-pressed="true"])) .mem-later,
.mem-list:not(:has(.gtag[aria-pressed="true"])) .mem-filtered { display: none; }
.mem-list:has(.gtag[aria-pressed="true"]) .mem-paged { display: none; }
.mem-branch { width: 11rem; }

/* The panel's head: on a phone Change Roles wraps under the name rather than squeezing the email; "(you)" is tertiary. */
.mem-head { flex-wrap: wrap; }
.mem-headtx { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.mem-you { color: var(--text-color-tertiary); font-weight: 400; }

/* Two cards, side by side from 64rem; their pairs read left to right, as the app's do. */
.mem-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 64rem) { .mem-cards { grid-template-columns: minmax(0, 1fr); } }
.mem-cards .kv { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); }
.mem-cards .kv dd { text-align: left; overflow-wrap: anywhere; }

/* The Roles a Member holds, one a line, the Admin chip beside its name. */
.mem-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.mem-roles li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-weight: 500; }

/* Change Roles: every Role, one checkbox row each, in a box that scrolls once the window is too short for all fifteen. */
.mem-pick { display: flex; flex-direction: column; max-height: min(30rem, 55dvh); overflow-y: auto; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); background: var(--background-color-surface); }
.mem-pick.invalid { border-color: var(--border-color-danger-strong); }
.mem-pick label { display: flex; align-items: center; gap: 0.625rem; padding: 0.3125rem 0.75rem; cursor: pointer; }
.mem-pick label + label { border-top: 0.0625rem solid var(--border-color-subtle); }
.mem-pick label > span:first-of-type { flex: 1; min-width: 0; }
.mem-pick input { width: 1rem; height: 1rem; margin: 0; flex: none; accent-color: var(--background-color-brand); }
.mem-pick label:has(input:disabled) { cursor: not-allowed; color: var(--text-color-disabled); }
@media (max-width: 47.99rem) { .mem-pick label { min-height: 2.75rem; } }

/* Companies, on the operator console: a Company's panel head and cards, and New company's form with its Admin rows.
   Loaded after kit.css by the three platform-compan* pages only. */

/* The first-run card centres its New company, which the app's brand buttons otherwise pin left. */
.app .plc-firstrun > .btn-brand { align-self: center; }

/* A Company's panel: the initials tile, the name over its chips, and Suspend or Reactivate on the right. */
.plc-head { flex-wrap: wrap; }
.plc-tile { width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--radius-lg); background: var(--background-color-brand-subtle); color: var(--text-color-brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; }
.plc-headtx { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.plc-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.plc-head > .actions { margin-left: auto; }
.plc-cardtx { flex: 1 1 14rem; min-width: 0; }
.plc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 64rem) { .plc-cards { grid-template-columns: minmax(0, 1fr); } }
.plc-list li { padding: 0.625rem 1rem; }
.plc-list li:first-child { border-top: 0; }
/* A branch sits under its parent, one step in per level. */
.plc-list li.plc-l1 { padding-left: 2.25rem; }
.plc-list li.plc-l2 { padding-left: 3.5rem; }
.plc-code { color: var(--text-color-tertiary); font-weight: 400; font-size: 0.75rem; }
/* On a phone a row keeps its button beside the name, the chip moving under it. */
@media (max-width: 40rem) {
  .plc-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.375rem 0.75rem; }
  .plc-list li > .avatar, .plc-list li > .dic { grid-column: 1; grid-row: 1 / span 2; }
  .plc-list li > .who { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; }
  .plc-list li > .chip { grid-column: 2; grid-row: 2; justify-self: start; }
  .plc-list li > .btn { grid-column: 3; grid-row: 1 / span 2; }
}

/* New company: one form, at most 40rem wide, with a narrow Code and one row per first Admin. */
.plc-form { max-width: 40rem; }
.plc-narrow { max-width: 12rem; }
.plc-arows { display: flex; flex-direction: column; gap: 0.75rem; }
.plc-arow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 0.75rem; align-items: start; }
/* The X lines up with the inputs, under their labels. */
.app .plc-arow > .closebtn { width: var(--control-h); height: var(--control-h); margin-top: 1.625rem; color: var(--text-color-tertiary); }
@media (max-width: 40rem) {
  .plc-arow { grid-template-columns: minmax(0, 1fr) auto; }
  .plc-arow > .field:nth-child(2) { grid-column: 1; }
  .plc-arow > .closebtn { grid-row: 1; grid-column: 2; }
  .plc-arow + .plc-arow { border-top: 0.0625rem solid var(--border-color-subtle); padding-top: 0.75rem; }
}

/* The console's people pages: Find person (its search row and the found Person's card). Operators and an Operator's
   panel are built from the Members list's and panel's own parts in kit.css. */

/* One column a person reads down: the search, then what it found, never wider than a form. */
.plp-col { display: flex; flex-direction: column; gap: 1rem; max-width: 48rem; }
.plp-find { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.plp-find .field { flex: 1 1 16rem; max-width: 28rem; }
.app .plp-find .btn { align-self: flex-end; } /* the kit lifts a brand button to the top of its row */

/* Before a search: a quiet card, sunk into the page rather than raised from it. */
.plp-start { background: var(--background-color-sunken); border: 0.0625rem dashed var(--border-color-strong); border-radius: var(--radius-xl); padding: 1.5rem 1.25rem; }
.plp-start .badge-ic { background: var(--background-color-surface); color: var(--text-color-tertiary); }

/* The found Person: who, with Suspend or Reactivate on the right, then the companies they belong to. */
.plp-person { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.plp-phead { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.plp-av { width: 2.5rem; height: 2.5rem; font-size: 0.8125rem; }
.plp-who { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.plp-who h2 { font-size: 1.125rem; line-height: 1.75rem; }
.plp-phead > .actions { margin-left: auto; }
.plp-sub { font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; color: var(--text-color-tertiary); }
.plp-orgs { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.plp-orgs li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; padding: 0.625rem 0; border-top: 0.0625rem solid var(--border-color-subtle); overflow-wrap: anywhere; }
.plp-orgs li > svg { color: var(--text-color-tertiary); }
.plp-orgs a { font-weight: 500; }
.plp-orgs .tert { margin-left: auto; }

/* The Client's app: on a wide screen each screen sits in a phone frame; at phone width the frame drops and the
   screen fills the window. Its header, tab bar, toasts and dialogs live inside the screen, as on a phone. */
.ap-stage { min-height: 100dvh; display: flex; justify-content: center; align-items: flex-start; padding: 2rem 1rem 6rem; background: var(--background-color-sunken); }
.ap-phone { width: 24rem; max-width: 100%; padding: 0.625rem; border-radius: 2.75rem; background: var(--background-color-shell); box-shadow: var(--shadow-lg); }
.ap-screen { position: relative; height: 48rem; max-height: calc(100dvh - 5.25rem); min-height: 36rem; display: flex; flex-direction: column; overflow: hidden; border-radius: 2.125rem; background: var(--background-color-canvas); font-size: var(--body-fs); line-height: var(--body-lh); }
.ap-status { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.5rem 0.25rem; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-status span:last-child { display: inline-flex; gap: 0.25rem; align-items: center; }
.ap-hdr { flex: none; display: flex; align-items: center; gap: 0.5rem; min-height: 3.25rem; padding: 0.25rem 0.75rem; background: var(--background-color-surface); border-bottom: 0.0625rem solid var(--border-color-default); }
.ap-hdr .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; margin-right: auto; min-width: 0; }
.ap-hdr h1 { font-size: 1.0625rem; line-height: 1.5rem; margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
.ap-hdr .backbtn { flex: none; }
.ap-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.ap-foot { flex: none; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 1rem 1rem; background: var(--background-color-surface); border-top: 0.0625rem solid var(--border-color-default); }
.ap-tabs { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0.375rem 0 1rem; background: var(--background-color-surface); border-top: 0.0625rem solid var(--border-color-default); }
.ap-tabs a { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; min-height: 2.75rem; justify-content: center; font-size: 0.75rem; line-height: 1rem; color: var(--text-color-tertiary); text-decoration: none; }
.ap-tabs a svg { font-size: 1.25rem; }
.ap-tabs a[aria-current="page"] { color: var(--text-color-brand); font-weight: 600; }
.ap-rows { display: flex; flex-direction: column; background: var(--background-color-surface); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-xl); overflow: hidden; }
.ap-rows > * { display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0.625rem 1rem; color: inherit; text-decoration: none; }
.ap-rows > * + * { border-top: 0.0625rem solid var(--border-color-subtle); }
.ap-rows .val { margin-left: auto; color: var(--text-color-tertiary); display: inline-flex; align-items: center; gap: 0.25rem; }
/* Toasts drop from the top of the screen, clear of the thumb; a dialog is a sheet rising from the bottom. */
.ap-toasts { position: absolute; top: 3.5rem; left: 0.75rem; right: 0.75rem; z-index: 4; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
.ap-toasts .toast { position: static; width: auto; max-width: none; pointer-events: auto; }
.ap-ov { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; background: var(--background-color-overlay); }
.ap-sheet { width: 100%; max-height: 85%; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1rem 1.5rem; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--background-color-surface); }
.ap-sheet .sheethead { display: flex; align-items: flex-start; gap: 0.5rem; }
.ap-sheet .sheethead h2 { font-size: 1.125rem; line-height: 1.5rem; margin-right: auto; }
@media (max-width: 30rem) {
  .ap-stage { padding: 0; background: var(--background-color-canvas); }
  .ap-phone { width: 100%; padding: 0; border-radius: 0; box-shadow: none; background: none; }
  .ap-screen { height: 100dvh; max-height: none; min-height: 0; border-radius: 0; }
  .ap-status { display: none; }
}

/* The Client's app, capture flow (consent, sign-in, report, guide, camera and Quality check, documents): the pieces
   these screens add to the app frame in kit.css. Every class is prefixed apc-. */

/* Signed out, the header's switcher shows the globe and the language's code, as the Client's web does on a phone. */
.apc-lang .pill .name { display: none; }
.apc-lang .pill .code { display: inline; }

.apc-title { font-size: 1.25rem; line-height: 1.75rem; }
.apc-center { align-items: center; text-align: center; }
.apc-between { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* The step a capture screen is on, with its bar. */
.apc-steps { display: flex; flex-direction: column; gap: 0.5rem; }
.apc-steps small { color: var(--text-color-tertiary); font-size: 0.8125rem; line-height: 1.125rem; }
/* Two actions side by side in the footer, such as Save as draft and Continue. */
.apc-pair { display: flex; gap: 0.5rem; }
.apc-pair > .btn { flex: 1; min-width: 0; }
.apc-foothelp { text-align: center; }
.apc-staff { text-align: center; font-size: 0.8125rem; line-height: 1.125rem; color: var(--text-color-tertiary); }
/* A destructive text action, such as Delete draft. */
.textbtn.apc-danger { color: var(--text-color-danger); }
.apc-cal { width: 100%; }

/* Consent: the four points, then the governing text. */
.apc-terms { margin: 0; padding: 1rem; display: flex; flex-direction: column; gap: 0.125rem; }
.apc-terms dt { font-weight: 600; }
.apc-terms dd { margin: 0 0 0.625rem; color: var(--text-color-secondary); }
.apc-terms dd:last-child { margin-bottom: 0; }

/* Report: the Policy card, the date and time side by side, the place search and the map with its pin. */
.apc-policy { padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.apc-row2 { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: 0.75rem; align-items: start; }
.apc-map { position: relative; height: 11rem; flex: none; border-radius: var(--radius-lg); overflow: hidden; border: 0.0625rem solid var(--border-color-default); background:
    linear-gradient(90deg, transparent 47%, var(--border-color-default) 47%, var(--border-color-default) 53%, transparent 53%),
    linear-gradient(0deg, transparent 62%, var(--border-color-default) 62%, var(--border-color-default) 66%, transparent 66%),
    linear-gradient(20deg, transparent 30%, var(--background-color-sunken) 30%, var(--background-color-sunken) 34%, transparent 34%),
    var(--background-color-surface); }
.apc-map .pin { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -100%); color: var(--background-color-danger); font-size: 2rem; }
.apc-map .chip { position: absolute; left: 0.5rem; top: 0.5rem; max-width: calc(100% - 1rem); }
.apc-map .attr { position: absolute; right: 0.375rem; bottom: 0.25rem; font-size: 0.625rem; color: var(--text-color-tertiary); }
.apc-results { display: flex; flex-direction: column; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); background: var(--background-color-raised); box-shadow: var(--shadow-md); overflow: hidden; }
.apc-results button { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.625rem; padding: 0.625rem 0.75rem; min-height: 2.75rem; border: 0; border-bottom: 0.0625rem solid var(--border-color-subtle); background: transparent; text-align: left; cursor: pointer; }
.apc-results button:last-child { border-bottom: 0; }
.apc-results button svg { margin-top: 0.1875rem; color: var(--text-color-tertiary); }
.apc-results small { display: block; color: var(--text-color-tertiary); font-size: 0.75rem; line-height: 1rem; }

/* Guide: a list of Slots, each a thumb, its name and line, and a chevron; a group's head carries its count. */
.apc-ghead { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.apc-ghead span { font-size: 0.8125rem; color: var(--text-color-tertiary); font-variant-numeric: tabular-nums; }
.apc-slots { display: flex; flex-direction: column; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-xl); background: var(--background-color-surface); overflow: hidden; flex: none; }
.apc-slot { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem; gap: 0.75rem; align-items: center; min-height: 3.25rem; padding: 0.625rem 0.875rem; border-bottom: 0.0625rem solid var(--border-color-subtle); text-decoration: none; color: inherit; }
.apc-slot:last-child { border-bottom: 0; }
.apc-slot .txt { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; min-width: 0; }
.apc-slot b { font-weight: 500; }
.apc-slot small { color: var(--text-color-tertiary); font-size: 0.75rem; line-height: 1rem; }
.apc-slot .chev { color: var(--text-color-tertiary); justify-self: end; }
.apc-slot .textbtn { font-size: 0.8125rem; }
.apc-th { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--background-color-sunken); border: 0.0625rem dashed var(--border-color-strong); display: flex; align-items: center; justify-content: center; color: var(--text-color-tertiary); }
.apc-th.done { background: var(--background-color-success-subtle); border: 0.0625rem solid var(--border-color-success); color: var(--text-color-success); }
.apc-th.skip { background: var(--background-color-warning-subtle); border: 0.0625rem solid var(--border-color-warning); color: var(--text-color-warning); }

/* Camera: dark in every theme. The preview fills the screen and a veil covers what the shot leaves out, so the clear
   window, outlined, is exactly what is kept: 3:4 for a photo, 9:16 for video. */
.apc-dark {
  color-scheme: dark;
  --background-color-canvas: #050c19;
  --background-color-surface: #0e1927;
  --background-color-raised: #1e293a;
  --background-color-sunken: #050c19;
  --background-color-hover: #f7faff14;
  --background-color-overlay: #000000a6;
  --background-color-brand: #236ed4;
  --background-color-brand-hover: #1258b4;
  --background-color-brand-subtle: #032350;
  --text-color-primary: #f7faff;
  --text-color-secondary: #cad5e5;
  --text-color-tertiary: #96a3b4;
  --text-color-disabled: #495669;
  --text-color-on-brand: #ffffff;
  --text-color-brand: #64a3ff;
  --text-color-link: #64a3ff;
  --border-color-default: #f7faff29;
  --border-color-subtle: #f7faff12;
  --border-color-strong: #667488;
  --border-color-brand: #236ed4;
  --ring-color-focus: #64a3ff;
  --outline-color-focus: #64a3ff;
  --background-color-danger: #cc2823;
  --background-color-danger-hover: #ac1313;
  --text-color-on-danger: #ffffff;
  --background-color-danger-subtle: #4c0303;
  --text-color-danger: #ffa69a;
  --border-color-danger: #8b090a;
  --background-color-warning: #d39700;
  --text-color-on-warning: #050c19;
  --background-color-warning-subtle: #342100;
  --text-color-warning: #e8b865;
  --border-color-warning: #614300;
  --background-color-neutral-subtle: #354254;
  --text-color-neutral: #cad5e5;
  --border-color-neutral: #495669;
  color: var(--text-color-primary);
}
.apc-cam .ap-hdr { background: var(--background-color-canvas); border-bottom: 0; }
.apc-cam .ap-hdr h1 { margin: 0 auto; text-align: center; font-size: 0.9375rem; line-height: 1.25rem; }
.apc-cam .ap-hdr h1 small { display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 400; color: var(--text-color-secondary); }
.apc-cam .ap-hdr .closebtn { font-size: 1.375rem; color: var(--text-color-primary); }
.apc-cam .ap-hdr .apc-gap { width: var(--control-h); flex: none; }
.apc-cam .ap-body { position: relative; padding: 0; gap: 0; overflow: hidden; align-items: center; justify-content: center; background:
    radial-gradient(ellipse at 55% 55%, var(--background-color-neutral-subtle) 0 22%, transparent 23%),
    linear-gradient(180deg, var(--background-color-raised) 0%, var(--background-color-surface) 55%, var(--background-color-neutral-subtle) 100%) no-repeat; }
.apc-cam .ap-body.apc-still { background: var(--background-color-canvas); }
.apc-cam .ap-foot { align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem 1.5rem; background: var(--background-color-canvas); border-top: 0; }
.apc-window { position: relative; flex: none; width: 100%; aspect-ratio: 3 / 4; box-shadow: 0 0 0 100rem var(--background-color-overlay); outline: 0.0625rem solid var(--text-color-secondary); outline-offset: -0.0625rem; }
.apc-window.v { width: auto; height: 100%; max-width: 100%; aspect-ratio: 9 / 16; }
.apc-still .apc-window { box-shadow: none; outline: 0; background: linear-gradient(160deg, var(--border-color-strong), var(--background-color-raised)) no-repeat; }
.apc-guide { position: absolute; left: 0; right: 0; bottom: 0.75rem; display: flex; justify-content: center; padding: 0 0.75rem; }
.apc-guide span { padding: 0.25rem 0.75rem; border-radius: 999rem; background: var(--background-color-overlay); font-size: 0.8125rem; line-height: 1.25rem; text-align: center; }
.apc-rec { position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%); padding: 0.125rem 0.625rem; border-radius: var(--radius-md); background: var(--background-color-danger); color: var(--text-color-on-danger); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.apc-scrub { position: absolute; left: 1rem; right: 1rem; top: 0.75rem; height: 2rem; border-radius: var(--radius-md); background: repeating-linear-gradient(90deg, var(--border-color-strong) 0 1.5rem, var(--background-color-raised) 1.5rem 1.625rem); }
.apc-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3.5rem; height: 3.5rem; border-radius: 999rem; background: var(--background-color-overlay); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.apc-mode { display: inline-flex; padding: 0.1875rem; border-radius: 999rem; background: var(--background-color-raised); }
.apc-mode span { padding: 0.25rem 0.875rem; border-radius: 999rem; color: var(--text-color-warning); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; }
.apc-shutter { width: 4.5rem; height: 4.5rem; padding: 0.1875rem; display: flex; border-radius: 999rem; border: 0.25rem solid var(--text-color-primary); background: transparent; cursor: pointer; }
.apc-shutter i { display: block; width: 100%; height: 100%; border-radius: 999rem; background: var(--text-color-primary); }
.apc-shutter.video i { background: var(--background-color-danger); }
.apc-shutter.rec i { background: var(--background-color-danger); border-radius: var(--radius-lg); transform: scale(0.5); }
.apc-review { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.apc-review > * { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.5rem; border: 0; background: transparent; color: var(--text-color-primary); font-size: 1.0625rem; text-decoration: none; cursor: pointer; }
.apc-review .use { font-weight: 600; }
.apc-camalert { position: absolute; top: 0.75rem; left: 0.75rem; right: 0.75rem; z-index: 1; }
.apc-notice { flex: 1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem 1.5rem; text-align: center; }
.apc-notice .big { font-size: 2.5rem; }
.apc-notice b { font-size: 1.125rem; line-height: 1.5rem; }
.apc-notice.danger, .apc-notice.danger b { color: var(--text-color-danger); }
.apc-notice.warning .big { color: var(--text-color-warning); }

/* Quality check: a flagged photo with the AI's note, Retake and a reason. */
.apc-flag { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.875rem 0; border-bottom: 0.0625rem solid var(--border-color-subtle); }
.apc-flag:first-child { padding-top: 0; }
.apc-flag:last-child { padding-bottom: 0; border-bottom: 0; }
.apc-flag > div { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.apc-thumb { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--background-color-sunken), var(--border-color-default)); border: 0.0625rem solid var(--border-color-default); }
.apc-rsn { padding: 0.5rem 0.625rem; border-radius: var(--radius-md); background: var(--background-color-sunken); color: var(--text-color-secondary); font-size: 0.8125rem; line-height: 1.125rem; }
.apc-acts { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* Documents: a collapsible card per document, its photo, and the fields OCR filled, each marked until changed. */
details.apc-coll { flex: none; background: var(--background-color-surface); border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
details.apc-coll > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto 1.25rem; gap: 0.5rem; align-items: center; min-height: 3.25rem; padding: 0.625rem 1rem; cursor: pointer; }
details.apc-coll > summary::-webkit-details-marker { display: none; }
details.apc-coll > summary .chev { color: var(--text-color-tertiary); }
details.apc-coll[open] > summary .chev { transform: rotate(180deg); }
details.apc-coll[open] > summary { border-bottom: 0.0625rem solid var(--border-color-subtle); }
.apc-collbody { padding: 1rem; display: flex; flex-direction: column; gap: 0.875rem; }
.apc-capbox { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; border: 0.0625rem dashed var(--border-color-strong); border-radius: var(--radius-lg); background: var(--background-color-sunken); text-align: center; }
.apc-capbox > svg { font-size: 1.5rem; color: var(--text-color-tertiary); }
.apc-docshot { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem; align-items: center; }
.apc-docshot .apc-thumb { width: 4.5rem; height: 3rem; background: linear-gradient(135deg, var(--background-color-info-subtle), var(--border-color-default)); }
.apc-ai { position: relative; }
.apc-ai .input { padding-right: 2.5rem; }
.apc-ai.picker .input { padding-right: 4.75rem; }
.apc-ai-ic { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--text-color-brand); }
.apc-ai.picker .apc-ai-ic { right: 2.875rem; }
.apc-ai-ic.off { color: var(--text-color-disabled); }
.apc-warn { display: flex; gap: 0.25rem; align-items: flex-start; font-size: 0.75rem; line-height: 1rem; color: var(--text-color-warning); }
.apc-warn svg { margin-top: 0.125rem; }
.apc-reading { display: flex; flex-direction: column; gap: 0.5rem; }
.apc-reading .sk { height: 0.75rem; }
.apc-reading .sk:nth-child(2) { width: 70%; }
.apc-reading .sk:nth-child(3) { width: 50%; }
.apc-reading .sk:nth-child(4) { width: 60%; }
.apc-start { align-self: flex-start; }
.apc-footform { display: flex; flex-direction: column; gap: 0.5rem; }
/* The step bar's fill, one per step of four. */
.apc-p25 { width: 25%; }
.apc-p50 { width: 50%; }
.apc-p75 { width: 75%; }
.apc-slot .txt a { color: inherit; font-weight: 500; text-decoration: none; }
.apc-upl { display: flex; gap: 0.375rem; align-items: center; font-size: 0.8125rem; line-height: 1.125rem; }
/* The camera's hints drop below its title. */
.apc-cam .ap-toasts { top: 6rem; }
/* A read-only picker keeps its error border: kit's read-only look would otherwise hide it. */
.input.apc-bad { border-color: var(--border-color-danger-strong); }

/* The Client's app after capture: the Workshop choice, Sent, the Claims tab, the tracker, the Document request and
   the Policy tab. Loaded after kit.css by app/workshop, sent, claims, claim, request and policy only; every class
   is prefixed apt-. */

/* WhatsApp's own green and ink (client-capture.html); the tokens have none. */
:root { --apt-wa-bg: #25d366; --apt-wa-bg-hover: #1ebe5a; --apt-wa-fg: #0b141a; }

/* Two things on one line, pushed apart, wrapping on a narrow screen. */
.apt-between { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.apt-between > b { display: inline-flex; gap: 0.375rem; align-items: center; }
/* Two buttons sharing a sheet's or a card's width. */
.apt-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.apt-center { align-self: center; }
/* A destructive text action: a text button in the danger colour, no padding. */
.textbtn.apt-danger { color: var(--text-color-danger); }

/* C6: the step line under the header, then one choice card per Workshop: name, distance on the right, then the
   dealer chip and the address. */
.apt-step { display: flex; flex-direction: column; gap: 0.5rem; color: var(--text-color-tertiary); font-size: 0.8125rem; line-height: 1.125rem; }
.apt-list { display: flex; flex-direction: column; gap: 0.625rem; }
.choice.apt-ws .apt-wsx { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 0.75rem; color: var(--text-color-primary); font-size: var(--body-fs); }
.choice.apt-ws .apt-km { grid-column: 2; grid-row: 1; color: var(--text-color-secondary); font-size: 0.875rem; white-space: nowrap; }
.choice.apt-ws .apt-addr { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; color: var(--text-color-secondary); font-size: 0.875rem; overflow-wrap: anywhere; }
.choice.apt-ws .chip { display: inline-flex; font-size: 0.75rem; }
.choice.apt-ws .chip-info { color: var(--text-color-info); }
/* The form spans the body and the foot; Send waits for a choice, so until a radio is ticked it looks and acts
   disabled, and the line under it says why. */
.apt-pick { display: contents; }
.apt-pick:not(:has(input[name="ws"]:checked)) .apt-send { background: var(--background-color-sunken); color: var(--text-color-disabled); border-color: transparent; pointer-events: none; }
.apt-pick:has(input[name="ws"]:checked) .apt-sendhelp { display: none; }

/* Sent: the upload card's head, its count on the right. */
.apt-upload { display: flex; flex-direction: column; gap: 0.75rem; }

/* The Claims tab: a row per Claim, the draft above them. */
.ap-rows > .apt-claim { align-items: center; }
.apt-claim .who { gap: 0.25rem; }
.apt-claim .who b { font-weight: 600; font-variant-numeric: tabular-nums; }
.apt-claim .who small { font-size: 0.8125rem; line-height: 1.125rem; }
.apt-claim > svg { color: var(--text-color-tertiary); }

/* The tracker: the Document request card's button, its head card, the stepper's outcomes, each side's person in
   charge, the notes. */
.apt-cta { margin-top: 0.75rem; }
.apt-cta .btn-brand { color: var(--text-color-on-brand); } /* the alert's links take its colour; its button keeps the brand's */
.apt-veh { font-size: 1.125rem; line-height: 1.5rem; overflow-wrap: anywhere; }
.apt-nowrap { white-space: nowrap; }
/* Key and value pairs read left to right on a phone: a label column, then the value. */
.apt-kv { grid-template-columns: auto minmax(0, 1fr); }
.apt-kv dd { text-align: left; overflow-wrap: anywhere; }
.stp.done .b svg { font-size: 0.875rem; }
.stp.apt-bad .b { background: var(--background-color-danger); border-color: var(--background-color-danger); color: var(--text-color-on-danger); }
.stp.apt-off .b { background: var(--background-color-neutral-subtle); border-color: var(--border-color-neutral); color: var(--text-color-neutral); }
.apt-who { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.apt-who .avatar, .apt-who .dic { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
.apt-who .dic { font-size: 1.125rem; }
.apt-who > span:last-child { min-width: 0; display: flex; flex-wrap: wrap; gap: 0 0.375rem; align-items: baseline; overflow-wrap: anywhere; }
.apt-who .apt-dot { color: var(--text-color-tertiary); }
.apt-who .apt-role { color: var(--text-color-secondary); white-space: nowrap; }
.btn.apt-wa { background: var(--apt-wa-bg); color: var(--apt-wa-fg); }
.btn.apt-wa:hover { background: var(--apt-wa-bg-hover); }
/* A note's live-camera photo: the thumbnail, what it is, and its remove button. */
.apt-att { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border: 0.0625rem solid var(--border-color-default); border-radius: var(--radius-lg); }
.apt-att .photo { width: 4rem; flex: none; padding: 0; }
.apt-att .tight { flex: 1; min-width: 0; }
.apt-att small { color: var(--text-color-tertiary); font-size: 0.75rem; line-height: 1rem; }
.note1 .photo { width: 6rem; padding: 0; }

/* The Client's web beyond sign-in and Your policy: Your claims, the tracker and the install card. */

/* WhatsApp's button and the stores' badges keep their owners' colours in both themes, so they are not Harbour Bold tokens. */
:root { --clw-whatsapp: #25d366; --clw-whatsapp-fg: #0b141a; --clw-badge-bg: #000000; --clw-badge-fg: #ffffff; --clw-badge-border: #a6a6a6; }

/* A page longer than the window starts at the top instead of centring. */
.cl-main.clw-top { align-items: flex-start; }
.clw-col { width: 100%; max-width: 40rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
/* On a phone the status chip drops under the title rather than squeezing it. */
.clw-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 0.75rem; }
.clw-head > .tight { flex: 1 1 18rem; min-width: 0; }
.clw-head h1 { font-size: 1.5rem; line-height: 2rem; overflow-wrap: anywhere; }
.clw-head .muted { overflow-wrap: anywhere; }
.clw-card { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.clw-card h2 { font-size: 1.125rem; line-height: 1.75rem; }
.clw-card .alert { font-size: inherit; }

/* Your claims: one card, a row per Claim that opens its tracker. */
.clw-rows { display: flex; flex-direction: column; overflow: hidden; }
.clw-row { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; color: inherit; text-decoration: none; }
.clw-row + .clw-row { border-top: 0.0625rem solid var(--border-color-subtle); }
.clw-row:hover { background: var(--background-color-hover); }
.clw-row > .tight { flex: 1; min-width: 0; }
.clw-row > .tight span { overflow-wrap: anywhere; }
.clw-row > svg { font-size: 1.25rem; color: var(--text-color-tertiary); }
.clw-rowtop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.5rem; }
.clw-rowtop b { font-weight: 600; }
.clw-skrow { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.25rem; }
.clw-skrow + .clw-skrow { border-top: 0.0625rem solid var(--border-color-subtle); }

/* The install card: why, the two store badges, then how it carries on. */
.clw-install { border-color: var(--border-color-brand); }
.clw-badges { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.clw-store { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.75rem; padding: 0 0.875rem 0 0.625rem; border-radius: var(--radius-lg); background: var(--clw-badge-bg); color: var(--clw-badge-fg); border: 0.0625rem solid var(--clw-badge-border); text-decoration: none; }
.clw-store svg { width: 1.5rem; height: 1.5rem; flex: none; }
.clw-store span { display: flex; flex-direction: column; line-height: 1.05; }
.clw-store small { font-size: 0.5625rem; letter-spacing: 0.02em; text-transform: uppercase; }
.clw-store b { font-size: 1rem; font-weight: 600; }
.clw-device { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 1rem; border-radius: var(--radius-lg); background: var(--background-color-sunken); }
.clw-device > svg { font-size: 1.5rem; color: var(--text-color-secondary); }
.clw-device b { display: block; }

/* The tracker's stepper: an outcome that ends the Claim closes it with its own marker. */
.clw-steps { margin: 0; padding: 0; list-style: none; }
.clw-steps .stp > div { min-width: 0; overflow-wrap: anywhere; }
.clw-steps .stp.cur b { font-weight: 600; }
.clw-steps .stp.clw-out .b { background: var(--background-color-neutral-subtle); border-color: var(--border-color-neutral); color: var(--text-color-neutral); }
.clw-steps .stp.clw-out.danger .b { background: var(--background-color-danger-subtle); border-color: var(--border-color-danger); color: var(--text-color-danger); }
.clw-steps .stp:not(.done):not(.cur):not(.clw-out) { color: var(--text-color-tertiary); }

/* A PIC: initials, name and role, the side under it, then one full-width contact button. */
.clw-pics { display: flex; flex-direction: column; gap: 1rem; }
.clw-pic { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.clw-pic + .clw-pic { padding-top: 1rem; border-top: 0.0625rem solid var(--border-color-subtle); }
.clw-who { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.clw-who .avatar { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
.clw-who .avatar svg { font-size: 1.125rem; }
.clw-who .tight { min-width: 0; overflow-wrap: anywhere; }
.clw-who .dot { color: var(--text-color-tertiary); margin: 0 0.25rem; }
.btn.clw-wa { background: var(--clw-whatsapp); color: var(--clw-whatsapp-fg); font-weight: 600; }
.btn.clw-wa:hover { filter: brightness(0.95); }

/* Notes shared with the Client, then the note box with Withdraw beside Send. */
.clw-notes { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.clw-notes li { display: flex; flex-direction: column; gap: 0.125rem; overflow-wrap: anywhere; }
.clw-notes small { color: var(--text-color-tertiary); font-size: 0.8125rem; }
.clw-noteacts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.clw-noteacts .btn { margin-left: auto; }
.textbtn.clw-danger { color: var(--text-color-danger); }
.clw-dlghead { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }

/* An email's list of what to send. */
.clw-maillist { margin: 0; padding-left: 1.25rem; }

/* The staff side of the app (staff sign-in, the app lock, the staff Claims and Account tabs): the pieces these screens
   add to the app frame in kit.css. Loaded after kit.css by app/staff-*.html; every class is prefixed aps-. */

/* The staff tab bar has two tabs, Claims and Account. */
.ap-tabs.aps-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The Active Organisation in the header: web's phone switcher face (kit's .swbtn), narrowed to sit beside the title. */
.ap-hdr .aps-org { width: auto; flex: 0 1 auto; min-width: 0; max-width: 64%; min-height: 2.75rem; padding: 0.25rem 0.5rem; gap: 0.5rem; }
.ap-hdr .aps-org .logo { width: 1.5rem; height: 1.5rem; font-size: 0.6875rem; }
.ap-hdr .aps-org b { font-size: 0.8125rem; line-height: 1.125rem; }
.ap-hdr .aps-org small { font-size: 0.6875rem; line-height: 1rem; }

/* A titled group of rows on the Claims tab, such as "My on-site surveys". */
.aps-group { display: flex; flex-direction: column; gap: 0.5rem; flex: none; }

/* A Surveyor's on-site survey: its lines open the Claim; Navigate sits under them, outside the link. */
.ap-rows > .aps-task { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.aps-tmain { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.aps-tmain b { font-weight: 600; font-variant-numeric: tabular-nums; }
.aps-tmain small { color: var(--text-color-tertiary); font-size: 0.8125rem; line-height: 1.125rem; }
.aps-reason { display: flex; gap: 0.375rem; align-items: center; margin-top: 0.25rem; color: var(--text-color-secondary); font-size: 0.8125rem; line-height: 1.125rem; }
.aps-nav { align-self: flex-start; }

/* The lock screen and the full-screen notices: one column in the middle of the screen. */
.ap-body.aps-mid { justify-content: center; align-items: center; text-align: center; }
.aps-mid .alert { text-align: left; align-self: stretch; }
.aps-bigic { width: 4rem; height: 4rem; font-size: 1.75rem; }

/* The phone's own unlock prompt, drawn as the system's sheet: centred, its owner named above it. */
.ap-sheet.aps-sys { align-items: center; text-align: center; gap: 0.75rem; }
.aps-sys h2 { font-size: 1.125rem; line-height: 1.5rem; }
.aps-glyph { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; flex: none; color: var(--text-color-brand); text-decoration: none; }
.aps-face { border: 0.1875rem solid currentColor; border-radius: 1rem; font-size: 2rem; }
.aps-fp { border-radius: 999rem; background: repeating-radial-gradient(circle, currentColor 0 0.125rem, transparent 0.125rem 0.4375rem); }
.aps-sysacts { display: flex; justify-content: space-between; gap: 0.5rem; width: 100%; }

/* The switcher sheet: web's list (kit's .grp, .opt, .why), its rows tall enough for a thumb. */
.aps-sw { display: flex; flex-direction: column; gap: 0.125rem; }
.aps-sw .opt { min-height: 2.75rem; }
.aps-sw hr { width: 100%; margin: 0.25rem 0; border: 0; border-top: 0.0625rem solid var(--border-color-subtle); }
.aps-sw .count { min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: 999rem; background: var(--background-color-brand); color: var(--text-color-on-brand); font-size: 0.6875rem; line-height: 1; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* A refused switch's toast shows over the open switcher. */
.ap-toasts.aps-top { z-index: 6; }

/* A row's text column, pushing what follows it to the row's end. */
.aps-grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.aps-grow small { font-size: 0.8125rem; line-height: 1.125rem; }

/* The staff side of the app: a Claim and the Workshop's FNOL. Loaded after kit.css by app/staff-claim,
   staff-fnol-policy, staff-fnol-incident and staff-fnol-code only; every class is prefixed apsc-. */

/* The step bar's fill, one per step of three, and the capture card's 7 of 19. */
.apsc-p33 { width: 33.333%; }
.apsc-p67 { width: 66.667%; }
.apsc-p100 { width: 100%; }
.apsc-p37 { width: 36.842%; }

/* The 404 page fills the content under the header, as web's does under the Shell. */
.apsc-404 { flex: 1; justify-content: center; }

/* An action card: its title and chip on one line, then what it takes. */
.apsc-act { padding: 1rem; gap: 0.75rem; }
.apsc-act > .muted { font-size: 0.8125rem; line-height: 1.125rem; }

/* A line led by its icon: the address on a Claim, the email a code goes to. */
.apsc-line { display: flex; gap: 0.5rem; align-items: flex-start; color: var(--text-color-secondary); overflow-wrap: anywhere; }
.apsc-line > svg { margin-top: 0.1875rem; color: var(--text-color-tertiary); }

/* The masked email the code goes to, read-only, with its icon. */
.apsc-to { display: flex; gap: 0.75rem; align-items: center; padding: 0.875rem 1rem; border-radius: var(--radius-lg); background: var(--background-color-sunken); }
.apsc-to > svg { font-size: 1.25rem; color: var(--text-color-secondary); }
.apsc-to .tight { min-width: 0; overflow-wrap: anywhere; }
.apsc-to small { color: var(--text-color-tertiary); font-size: 0.8125rem; line-height: 1.125rem; }

/* Back that asks before leaving FNOL is a button, which kit's link-shaped back button doesn't reset. */
button.backbtn.apsc-back { border: 0; background: none; padding: 0; cursor: pointer; }
button.backbtn.apsc-back:hover { background: var(--background-color-hover); }