/* v0.183.0 (F59, the owner, 2026-10-16: "I need to change the mobile's design to follow the carbon design"): IBM CARBON v11.118.0
 * (2026-10-07 — the latest; the PC's F56 read it from the release's own token files, D:\cx-scratch\carbon-latest-src), as the PC since
 * 0.179.0–0.181.0, with his F56 choices: Gray 100 dark (the default here, as before) and Gray 10 light with Carbon's layering, IBM Plex
 * Sans served by the app (field/fonts/, OFL — LICENSE-IBM-Plex.txt beside them), square corners (tags round), the bar at the top
 * Carbon's dark header in BOTH themes (his H1), Carbon blue the accent with Snagtwin amber a choice (Sync & settings › Appearance ›
 * Accent, html[data-accent="amber"] — his A1), IBM's own icons (field/icons.js), the status colours as Carbon's tag hues and the chart
 * colours unchanged (his S1: data). A RESKIN: the ids and classes are the ones the field app always had, and the Material token NAMES
 * (--md-*) stay — every rule below reads them — now holding Carbon's values; Carbon's own (--cds-*) beside them, and the components'
 * look in ONE block at the end of this sheet (later rules of the same weight). Departures from Carbon, each for 4.5:1 text, as the PC:
 * the light accent as TEXT is link secondary #0043ce, the light warning text #8a5600, placeholders at full text secondary.
 * Before v0.183.0: Material Design 3, seeded from the brand teal #00313C (field.css history: v0.57.0 light, v0.62.0 motion). */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/IBMPlexSans-Bold.woff2") format("woff2"); }
/* F76: IBM Plex Mono for tags, SOR numbers and the stage counts — the PC's own files (renderer/fonts, OFL as the Sans) */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); }
/* F76 (the owner, 2026-10-21: "apply the brand guidelines on the mobile app", his PH1 of F75 and every recommended phone code — DR1 SP1
 * TB1 GH1 LN1 IC1 SH1 TT1, the canvas https://claude.ai/artifact/Tey1HMpNCrwFMQHX9G5yxw): THE BRAND'S COLOURS under the same token names
 * (docs/brand/README.md, brand guidelines 1.1; the PC's F75 values, sent by its session): the Ink ground #171d1f and teal-tinted greys
 * (SF1), the bar Deep Teal #0e3a46 in both themes (HB1), Teal #17788f acts — the buttons, links lifted to #5db8cc dark / #136a7f light —
 * and Amber #ffb020 marks only what is on or chosen (AC1), the status chips in the 3D view's hues (ST1), the record words Amber dark /
 * Copper 100+ light (RC1). The type stays IBM Plex (Android has no Verdana or Georgia, and their licence forbids the APK carrying them).
 * The phone's own pieces (the panel's lock-up, the stage blocks, the SOR's steps…) are in ONE block at the end of this sheet. */
:root {
  /* colour roles — the brand's dark set under their Material names (Carbon Gray 100 before F76) */
  --md-primary: #5db8cc;             /* the accent as text and marks — Teal lifted for the dark ground (6.7:1 on a panel) */
  --md-on-primary: #171d1f;
  --md-primary-container: #0e3a46;   /* Deep Teal */
  --md-on-primary-container: #d1e4e9;
  --md-secondary: #b7c2c6;
  --md-on-secondary: #171d1f;
  --md-secondary-container: #2e3a3e; /* the chosen ground — a chosen icon, a gray tag */
  --md-on-secondary-container: #f2f5f6;
  --md-tertiary: #ffc04d;            /* what waits, an interim tag — Amber 80 */
  --md-on-tertiary: #171d1f;
  --md-tertiary-container: #3d3218;
  --md-on-tertiary-container: #ffefd2;
  --md-error: #ff8a80;               /* Failed as text on dark (R3) */
  --md-on-error: #171d1f;
  --md-error-container: #42221f;
  --md-on-error-container: #ffd7d9;
  --md-surface: #171d1f;             /* the ground — Ink */
  --md-surface-1: #1e2629;           /* a panel */
  --md-surface-2: #1e2629;           /* a panel — the tab bar, cards */
  --md-surface-3: #263034;           /* raised — a picture's place while it loads */
  --md-surface-4: #2e3a3e;           /* chosen */
  --md-on-surface: #f2f5f6;          /* text */
  --md-on-surface-variant: #b7c2c6;  /* grey text */
  --md-outline: #6b7c83;             /* the strong line */
  --md-outline-variant: #33424a;     /* the line between rows */
  --md-inverse-surface: #f2f5f6;
  --md-inverse-on-surface: #171d1f;
  /* shape — Carbon's square corners; tags and the content switcher keep theirs */
  --md-shape-xs: 0;
  --md-shape-sm: 0;
  --md-shape-md: 0;
  --md-shape-full: 999px;
  /* state layer opacities */
  --md-hover: 0.08;
  --md-press: 0.12;
  /* Carbon's token names, the brand's dark values (F76) */
  --cds-layer-01: #1e2629;
  --cds-layer-hover: #263034;
  --cds-layer-selected: #2e3a3e;
  --cds-field-01: #1e2629;           /* a field on the background */
  --cds-field-02: #263034;           /* a field on a layer (a line's card) */
  --cds-border-strong: #6b7c83;
  --cds-border-subtle-01: #3e4e55;
  --cds-helper: #9fb0b5;
  --cds-focus: #ffffff;
  --cds-focus-inset: #171d1f;
  --cds-border-interactive: #ffb020; /* AC1: Amber marks what is on or chosen — the open tab, the opened line, the pressed icon */
  --cds-btn-primary: #17788f;        /* Teal acts: white on it 5.1:1 */
  --cds-btn-primary-hover: #136a7f;
  --cds-btn-primary-active: #0e5566;
  --cds-btn-primary-ink: #ffffff;
  --cds-btn-secondary: #5c6673;      /* Slate: white on it 5.8:1 */
  --cds-btn-secondary-active: #3a424c;
  --cds-btn-tertiary: #5db8cc;
  --cds-btn-ghost-hover: rgba(159, 176, 181, .16);
  --cds-btn-ghost-active: rgba(159, 176, 181, .40);
  --cds-btn-danger: #a8392f;         /* white on it 6.4:1 */
  --cds-selected-inverse: #ffb020;   /* the content switcher's chosen segment and a pressed filter chip: Amber (AC1), Ink on it 9.3:1 */
  --cds-text-inverse: #171d1f;
  --cds-support-error: #e8453d;
  --cds-support-success: #3fcf8e;
  --cds-support-warning: #ffb020;
  --cds-support-info: #5db8cc;
  --cds-toggle-off: #6b7c83;
  --cds-ok-text: #3fcf8e;            /* Complete as text (R3) */
  /* ST1 — the status chips (R3, every one 4.5:1 or more) */
  --tag-gray-bg: #2a3236;   --tag-gray: #b4bcc4;
  --tag-green-bg: #173b2c;  --tag-green: #3fcf8e;
  --tag-blue-bg: #1a3049;   --tag-blue: #6fb4ff;
  --tag-red-bg: #42221f;    --tag-red: #ff8a80;
  --tag-purple-bg: #2e2a45; --tag-purple: #b9acea;
  --tag-yellow-bg: #3d3218; --tag-yellow: #ffc04d;
  --rec-text: #ffb020;               /* v0.182.0 (his C1): an SOR's or action's own words — F76 (RC1): Amber on dark */
  /* the header — Deep Teal in both themes (HB1; Carbon's dark UI-shell header before F76) */
  --hd-bg: #0e3a46;
  --hd-ink: #ffffff;
  --hd-dim: #9fb0b5;                 /* 5.5:1 on Deep Teal */
  --hd-line: #0e3a46;
  --hd-chip: #215b69;
  --hd-hover: rgba(255, 255, 255, .12);
  /* the brand's own, for the phone's pieces (the end of this sheet) */
  --brand-deep: #0e3a46;
  --brand-amber: #ffb020;
  --brand-band-dim: #9fb0b5;
  --brand-teal: #17788f;             /* F120 (UX-25): Teal itself — the Filter sheet's boxes and sliders on its white ground */
  --stg-ok: #3fcf8e; --stg-active: #58a6ff; --stg-idle: #8b949e; --stg-failed: #e8453d; --stg-none: #6b7c83;   /* the 3D view's hues */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  background: var(--md-surface); color: var(--md-on-surface);
  /* v0.183.0 (F59): Carbon body 02, 16/24, in IBM Plex Sans (was M3 body-large in Roboto) */
  font: 400 16px/1.5 "IBM Plex Sans", Roboto, system-ui, "Segoe UI", sans-serif;
  overscroll-behavior-y: contain;
}
/* v0.61.0: the body GROWS with its content. The page is in quirks mode (no doctype — index.html's head comment says why
   the tags are kept as they are), where the body is the scroller, and a sticky element sticks only inside its containing
   block. With the body held at 100% the top bar stuck for the first ~700 px and then scrolled away, leaving the content
   under the transparent status bar — on any long list, made obvious by the Status tab (measured on the S23: body 823 px
   high, content 1,842; with min-height the bar stays at 0 after an 847 px scroll). */
body { height: auto; min-height: 100%; }
.muted { color: var(--md-on-surface-variant); }
.small { font-size: 12px; line-height: 1.35; letter-spacing: .033em; } /* body-small */
.hidden { display: none !important; }
code {
  background: var(--md-surface-3); padding: 1px 5px;
  border-radius: 4px; font-size: .85em;
}

/* --- top app bar (M3 small, on surface) ------------------------------------ */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; background: var(--md-surface-1);
  position: sticky; top: 0; z-index: 5;
  padding-top: max(10px, env(safe-area-inset-top));
}
/* v0.186.0 (F62): the brand, its chips (project, tracker, role, offline) and the bar's Sign in / Sync / ⋮ gave way to Gmail's bar — below, at the end */

/* --- navigation: M3 bottom navigation bar ----------------------------------
 * The tabs keep their markup and JS; the bar moves to the bottom, which is
 * where Android navigation lives. Content gets bottom padding to clear it. */
.tabs {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  background: var(--md-surface-2); z-index: 6;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  box-shadow: 0 -1px 3px rgba(0,0,0,.4);
}
.tab {
  flex: 1; padding: 14px 8px 16px; background: none; border: 0;
  color: var(--md-on-surface-variant); font: inherit;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;   /* label-medium */
  position: relative;
}
.tab.active { color: var(--md-on-surface); }
.tab.hidden { display: none; }
/* F43 M5c: the Reviews tab's cards */
.rv-card { border: 1px solid var(--md-outline-variant, #444); border-radius: var(--md-shape-m, 12px); padding: 10px 12px; margin: 0 0 10px; background: var(--md-surface-2); }
.rv-head { margin: 0 0 2px; }
/* v0.175.0 (F52): the card's buttons at the card's right edge (Open · Approve · Return · Reject under the card's words — 84 px short
   before); "This step is decided on a PC…" is words, so it leads the line and Open keeps the edge; the reason box's Return / Cancel
   under their field, right. The audit (test/phone-btnalign.js) also found these buttons UNSTYLED — reviews.js names them
   primary / ghost / ghost danger without .btn, so the WebView drew its own grey 13-px buttons — the M3 look is given here. */
.rv-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; align-items: center; }
.rv-btns > span { order: -1; flex: 1 1 auto; min-width: 0; }
.rv-reason { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.rv-reason input { flex: 1 1 100%; }
.rv-btns button, .rv-reason button {
  position: relative; overflow: hidden;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  border: 0; border-radius: var(--md-shape-full);
  padding: 10px 12px; min-height: 40px; white-space: nowrap;   /* 12 px sides: Open · Approve · Return · Reject fit one 384-px line (20 px wrapped Reject) */
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .007em;
}
.rv-btns button.primary, .rv-reason button.primary { background: var(--md-primary); color: var(--md-on-primary); }
.rv-btns button.ghost, .rv-reason button.ghost { background: none; color: var(--md-primary); }
.rv-btns button.danger, .rv-reason button.danger { color: var(--md-error); }
.rv-reason input {   /* the reason, an M3 filled field like the others (it was the WebView's bare white box) */
  background: var(--md-surface-3); color: var(--md-on-surface);
  border: 0; border-bottom: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0;
  padding: 10px 12px; font: inherit; font-size: 14px;
}
.rv-reason input:focus { outline: none; border-bottom: 2px solid var(--md-primary); padding-bottom: 9px; }
.rv-detail { margin-top: 8px; }
.rv-detail p { margin: 4px 0; }
.rv-photos { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.rv-photos img { height: 64px; border-radius: 6px; }
.rv-card.st-rejected, .rv-card.st-returned, .rv-card.st-withdrawn { opacity: .8; }
/* the M3 active-indicator pill */
.tab.active::before {
  content: ''; position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 4px; border-radius: var(--md-shape-full);
  background: var(--md-primary);
}
.pane { padding-bottom: 88px; }         /* clear the nav bar */
.pad { padding: 16px; padding-bottom: 96px; }

/* --- search: M3 filled text field shape ------------------------------------ */
#search {
  width: calc(100% - 32px); margin: 12px 16px; padding: 14px 16px; font: inherit;
  background: var(--md-surface-3); color: inherit;
  border: 0; border-radius: var(--md-shape-full);
}
#search::placeholder { color: var(--md-on-surface-variant); }
#search:focus { outline: 2px solid var(--md-primary); outline-offset: -2px; }

/* --- lists: M3 list items --------------------------------------------------- */
.list { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 16px; min-height: 56px;
  background: none; border: 0; color: inherit; font: inherit;
  position: relative;
}
.row::after {           /* state layer */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: currentColor; opacity: 0; transition: opacity 80ms;
}
.row:active::after { opacity: var(--md-press); }
.row-main { flex: 1; min-width: 0; }
.row-tag {
  font-size: 16px; font-weight: 500;                       /* title-medium-ish */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-desc {
  color: var(--md-on-surface-variant); font-size: 14px; letter-spacing: .014em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pill {
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  border-radius: var(--md-shape-full); padding: 4px 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .045em;   /* label-small */
}
.empty { color: var(--md-on-surface-variant); text-align: center; padding: 48px 24px; line-height: 1.7; }

/* --- v0.55.0 (roadmap R1): groups — Discipline, then equipment type --------- */
.grp { border-bottom: 1px solid var(--md-outline-variant); }
.grp > summary, .sub > summary {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px;
  cursor: pointer; list-style: none; position: relative;
}
.grp > summary::-webkit-details-marker, .sub > summary::-webkit-details-marker { display: none; }
.grp > summary::before, .sub > summary::before {
  content: '▸'; flex: none; width: 12px; color: var(--md-on-surface-variant); transition: transform 120ms;
}
.grp[open] > summary::before, .sub[open] > summary::before { transform: rotate(90deg); }
.grp > summary { font-size: 15px; font-weight: 600; background: var(--md-surface-1); }
.sub > summary { font-size: 14px; font-weight: 500; padding-left: 32px; }
.grp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-count { color: var(--md-on-surface-variant); font-size: 12px; font-variant-numeric: tabular-nums; }
.sub .row { padding-left: 44px; }
.row.more { justify-content: center; color: var(--md-primary); font-weight: 500; min-height: 48px; }

/* --- buttons ----------------------------------------------------------------
 * .btn          -> M3 filled tonal button
 * .btn.primary  -> M3 filled button (primary)
 * .btn.ghost    -> M3 text button
 * All get a state layer and the full pill shape. */
.btn {
  position: relative; overflow: hidden;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  border: 0; border-radius: var(--md-shape-full);
  padding: 10px 20px; min-height: 40px;
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .007em; /* label-large */
}
.btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: currentColor; opacity: 0; transition: opacity 80ms;
}
.btn:active::after { opacity: var(--md-press); }
.btn.primary { background: var(--md-primary); color: var(--md-on-primary); }
.btn.ghost { background: none; color: var(--md-primary); }
.btn.wide { width: 100%; padding: 14px; margin: 8px 0; }
.btn:disabled { opacity: .38; }

/* --- full-screen sheets ------------------------------------------------------ */
.sheet { position: fixed; inset: 0; background: var(--md-surface); z-index: 10; overflow: auto; }
.sheet-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--md-surface-1);
  position: sticky; top: 0; z-index: 2;
  padding-top: max(10px, env(safe-area-inset-top));
}
.sheet-bar strong { font-size: 22px; font-weight: 400; }   /* title-large */
/* v0.62.1 (D3): a long tag used to squeeze "‹ Back" onto two lines. The button keeps its one line and the title takes
   what is left, breaking inside a long tag (tags have no spaces) rather than pushing the button. */
.sheet-bar > .btn { flex: none; white-space: nowrap; }
.sheet-bar > strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
h3 {
  margin: 22px 0 8px; font-size: 14px; font-weight: 500; letter-spacing: .01em;
  color: var(--md-primary);                                 /* M3 section header */
  text-transform: none;
}

/* --- stage rows: M3 segmented buttons --------------------------------------- */
.stage { margin-bottom: 16px; }
.stage-name { font-weight: 500; margin-bottom: 8px; }
.seg {
  display: flex; flex-wrap: wrap;
  border: 1px solid var(--md-outline); border-radius: var(--md-shape-full);
  overflow: hidden;
}
.seg-btn {
  flex: 1 1 30%; padding: 12px 6px; font: inherit; font-size: 13px; font-weight: 600;
  background: none; color: var(--md-on-surface);
  border: 0; border-left: 1px solid var(--md-outline);
  position: relative;
}
.seg-btn:first-child { border-left: 0; }
.seg-btn.on {
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
}
.seg-btn.on::before { content: '✓ '; }
.pending { color: var(--md-tertiary); font-size: 11px; font-weight: 650; }
/* v0.59.0 (R9): a stage the desktop's stage matrix makes N/A for this line's type — shown, never a choice. */
.stage-na { color: var(--md-on-surface-variant); font-size: 13px; padding: 6px 0; }

/* --- v0.54.0: what the desktop knows about a line, and work held back --------- */
.notes { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.note { font-size: 12px; line-height: 1.4; color: var(--md-on-surface-variant); }
.note.interim, .note.was { color: var(--md-tertiary); }
.tag-chip {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--md-shape-full);
  font-size: 10px; font-weight: 650; letter-spacing: .04em; vertical-align: middle;
  background: var(--md-tertiary); color: #000;
}
.held { margin: 12px 0; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--md-tertiary); }
.held .row-2 { margin-top: 4px; }
/* v0.175.0 (F52): a held record's Discard / Send anyway on a line of their own under its words, at the right edge — beside the words
   they squeezed them to "Observ…" and "Send anyway" wrapped onto two lines (the photograph on the S23) */
#outbox-held-list .row { flex-wrap: wrap; }
#outbox-held-list .row-main { flex: 1 1 100%; }
#outbox-held-list .row-2 { margin-left: auto; }
#outbox-held-list .row-2 .btn { flex: 0 0 auto; white-space: nowrap; }
/* v0.83.0: the tracker on the phone is no cloud project's (read-only), and what the outbox waits for */
#assets-note { margin: 0 0 10px; }
#assets-note p { margin: 0 0 8px; line-height: 1.45; }
#outbox-note { margin: 8px 0 10px; color: var(--md-on-surface); }

/* --- photo thumbnails: M3 cards --------------------------------------------- */
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs img {
  width: 100px; height: 75px; object-fit: cover;
  border-radius: var(--md-shape-sm); background: var(--md-surface-3);
}
/* v0.84.1: this phone's own photographs stay on their line — marked still on the phone, or sent */
.own-thumb { position: relative; display: inline-block; line-height: 0; }
.own-mark {
  position: absolute; left: 4px; bottom: 4px; line-height: 1.4;
  padding: 0 6px; border-radius: var(--md-shape-full, 999px);
  font: 500 11px/1.5 system-ui, sans-serif;
  background: var(--md-surface-container-highest, rgba(0,0,0,.6)); color: var(--md-on-surface, #fff);
}
.own-thumb.waiting .own-mark { background: var(--md-tertiary-container, #ffdcbe); color: var(--md-on-tertiary-container, #2c1600); }
.own-thumb.sent .own-mark { background: var(--md-primary-container, #a8ecff); color: var(--md-on-primary-container, #001f26); }

/* --- camera ------------------------------------------------------------------ */
#cam { display: flex; flex-direction: column; background: #000; }
#cam-video { flex: 1; width: 100%; object-fit: cover; }
.cam-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); background: #000;
}
.shutter {
  width: 72px; height: 72px; border-radius: 50%;
  border: 4px solid #fff; background: rgba(255,255,255,.25);
}
.shutter:active { background: #fff; }

/* --- toast: M3 snackbar ------------------------------------------------------ */
.toast {
  position: fixed; left: 16px; right: 16px;
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px)); /* above the nav bar */
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
  border: 0; border-radius: var(--md-shape-xs);
  padding: 14px 16px; z-index: 30; font-size: 14px;
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.toast.bad { background: var(--md-error-container); color: var(--md-on-error-container); }

/* --- form rows --------------------------------------------------------------- */
.aspect-row, .obs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 12px 0; color: var(--md-on-surface-variant); font-size: 14px;
}
.aspect-row select, .obs-row input {
  flex: 0 0 auto; min-width: 0;
  background: var(--md-surface-3); color: var(--md-on-surface);
  border: 0; border-bottom: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0;   /* M3 filled field */
  padding: 10px 12px; font: inherit; font-size: 14px;
}
.aspect-row select:focus, .obs-row input:focus, #obs-text:focus, #act-text:focus, .cl-note:focus, #cloud-url:focus {
  outline: none; border-bottom: 2px solid var(--md-primary); padding-bottom: 9px;
}
/* v0.73.0 (R7): the photographs the desktop holds for a line, fetched when the line is opened */
.thumbs img.rec-thumb { cursor: pointer; }
.thumbs img.rec-thumb.missing { background: var(--md-surface-3); outline: 1px dashed var(--md-outline); }
.pview { margin: 8px 0 12px; }
.pview.hidden { display: none; }
.pview img { display: block; width: 100%; height: auto; border-radius: var(--md-shape-xs); background: var(--md-surface-3); min-height: 120px; }

/* v0.71.0 (R7): one caption per attached photograph, printed under it on the SOR */
.obs-captions { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.obs-captions.hidden { display: none; }
.obs-cap { display: flex; align-items: center; gap: 10px; }
.obs-cap img { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: var(--md-shape-xs); background: var(--md-surface-3); }
.obs-cap input {
  flex: 1; min-width: 0;
  background: var(--md-surface-3); color: var(--md-on-surface);
  border: 0; border-bottom: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0;
  padding: 10px 12px; font: inherit; font-size: 14px;
}
.obs-cap input:focus { outline: none; border-bottom: 2px solid var(--md-primary); padding-bottom: 9px; }
/* v0.113.0 (build 31): an action's "what must be done" is the observation's box (build 30's photograph: a bare white textarea) */
/* 2026-10-14 (F43 M4, build 55's photograph: the same bare white box): and the note with an SOR's status change */
#obs-text, #act-text, #sor-status-note {
  width: 100%; background: var(--md-surface-3); color: var(--md-on-surface); font: inherit;
  border: 0; border-bottom: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0;
  padding: 12px; resize: vertical;
}

/* --- checklist sheet --------------------------------------------------------- */
.cl-items { list-style: none; margin: 0; padding: 0; }
.cl-items li { border-bottom: 1px solid var(--md-outline-variant); padding: 14px 0; }
.cl-text { margin-bottom: 10px; line-height: 1.5; }
.cl-note {
  width: 100%; margin-top: 10px;
  background: var(--md-surface-3); color: var(--md-on-surface); font: inherit; font-size: 14px;
  border: 0; border-bottom: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0; padding: 10px 12px;
}
#det-checklists .btn { margin-bottom: 8px; text-align: left; border-radius: var(--md-shape-sm); }
/* F91 CM2: an item by its kind — a reading's design under its words, its number and the judgement; a choice, a note, a photograph */
.cl-sub { font-size: 13px; color: var(--md-on-surface-variant); margin-top: 2px; }
.cl-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.cl-num { width: 110px; font: inherit; font-size: 16px; text-align: right; padding: 8px 10px; background: var(--md-surface-3); color: var(--md-on-surface);
  border: 0; border-bottom: 1px solid var(--md-outline); }
.cl-unit { font-size: 13px; color: var(--md-on-surface-variant); }
.cl-judge { font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.cl-judge:empty { display: none; }
.cl-judge.ok { background: var(--tag-green-bg); color: var(--tag-green); }
.cl-judge.bad { background: var(--tag-red-bg); color: var(--tag-red); }
.cl-judge.over { outline: 1px dashed currentColor; }
.cl-choice { font: inherit; font-size: 15px; padding: 8px 10px; max-width: 100%; }
.cl-ctl .cl-textval { margin-top: 0; }
.cl-ph-n { font-size: 13px; color: var(--md-on-surface-variant); }
.cl-ph-take { margin-left: auto; }
.cl-inst { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 14px; }
.cl-inst.hidden { display: none; }
/* (0.245.0, found by the guide's picture: the list was the WebView's white box and ran past the sheet's edge) — Carbon's field below, the
   label over it and the list the sheet's width */
.cl-inst label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 100%; min-width: 0; }
.cl-inst select { width: 100%; }
.cl-inst-state { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 10px; }
.cl-inst-state:empty { display: none; }
.cl-inst-state.valid { background: var(--tag-green-bg); color: var(--tag-green); }
.cl-inst-state.due { color: var(--cds-support-warning); outline: 1px solid currentColor; }
.cl-inst-state.expired { background: var(--tag-red-bg); color: var(--tag-red); }
/* F91 CM3: a scenario's run — the clock large, the trigger, a type effect's heading */
.cl-ist { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; padding: 10px 12px; background: var(--md-surface-3); }
.cl-ist.hidden { display: none; }
.cl-ist-top { display: flex; align-items: center; gap: 10px; }
.cl-ist-top > span:first-child { flex: 1 1 auto; font-size: 14px; }
.cl-ist-clock { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-ist-wit { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--md-on-surface-variant); }
.cl-ist-wit .cl-note { margin-top: 0; }
/* F91 CM3: Show in 3D on a line of its own, at the right edge (the button rule) */
.cl-ist-3drow { display: flex; justify-content: flex-end; }
.cl-items li.cl-grp { display: flex; align-items: center; gap: 10px; background: var(--md-surface-3); padding: 10px 8px; }
.cl-items li.cl-grp > .cl-text { flex: 1 1 auto; margin: 0; font-weight: 600; }
.cl-items li.cl-k-effect.in-grp { padding-left: 14px; }

/* --- sync & settings sheet ---------------------------------------------------- */
.row-2 { display: flex; gap: 8px; }

/* --- v0.61.0 (roadmap R4): the Status tab ------------------------------------------------------------------------------
 * The chart colours are DATA — the desktop's .ch-* fills byte for byte (renderer/styles.css; a test holds them equal) — in
 * both themes, like the desktop's legend. */
.ch-ok { fill: #3fcf8e; background-color: #3fcf8e; }
.ch-active { fill: #58a6ff; background-color: #58a6ff; }
.ch-idle { fill: #8b949e; background-color: #8b949e; }
.ch-failed { fill: #e8453d; background-color: #e8453d; }
.ch-na { fill: #786ba8; background-color: #786ba8; }
.ch-blank { fill: #8b949e; fill-opacity: .45; background-color: rgba(139, 148, 158, .45); stroke: #8b949e; stroke-dasharray: 3 2; }
.ch-other { fill: #ffb020; background-color: #ffb020; }
.st-asof { margin: 0 0 8px; }
.st-card { background: var(--md-surface-2); border-radius: var(--md-shape-md); padding: 12px 14px; margin: 8px 0 12px; }
.st-card.prov { outline: 1px solid var(--md-tertiary); }
.st-big { font-size: 16px; line-height: 1.4; }
.st-stages { flex-wrap: wrap; margin: 8px 0; }
.st-pie-wrap { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.st-pie { width: 150px; height: 150px; flex: none; }
.st-pie path { stroke: var(--md-surface); stroke-width: 1; }
.st-legend { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.st-legend li { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.st-legend li.zero { color: var(--md-on-surface-variant); }
.st-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.st-table-wrap { overflow-x: auto; }
/* 12 px and 3 px sides: five stages and the Weighted column fit a 360-dp phone (measured on the S23: 391 px of table in a
   352 px box at 13 px / 6 px, the Weighted column off the edge). More stages still scroll inside the box. */
.st-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.st-table th, .st-table td { padding: 5px 3px; border-bottom: 1px solid var(--md-outline-variant); text-align: right; white-space: nowrap; }
.st-table th:first-child, .st-table td:first-child { text-align: left; white-space: normal; }
.st-table tr.total td { font-weight: 600; }
.st-table .st-wt { border-left: 1px solid var(--md-outline-variant); font-weight: 600; }
/* A Status row SAYS something — the SOR's observation (cut at 300 characters on the desktop), the checklist's answered
   count and who — so it wraps instead of the asset list's one-line ellipsis (seen on the S23: "Damper act…"). */
.st-item .row-tag, .st-item .row-desc { white-space: normal; overflow-wrap: anywhere; }
.pill.overdue, .st-item.overdue .row-tag { color: var(--md-error); }
.pill.overdue { background: var(--md-error-container); color: var(--md-on-error-container); }
.pill.fail { background: var(--md-error-container); color: var(--md-on-error-container); }
.note.st-error { color: var(--md-error); }
.note.record { color: var(--md-on-surface); }
.row-2 .btn { flex: 1; }
#cloud-url {
  min-width: 0; flex: 1;
  background: var(--md-surface-3); color: var(--md-on-surface);
  border: 0; border-bottom: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0;
  padding: 10px 12px; font: inherit; font-size: 14px;
}

/* Capture + upload side by side, capture keeping the visual weight */
.photo-actions { display: flex; gap: 8px; margin: 10px 0; }
.photo-actions .btn { flex: 1; padding: 14px; margin: 0; }
.photo-actions #btn-capture { flex: 1.6; }
/* v0.57.0 (roadmap R3): the LIGHT scheme — Sync & settings › Appearance: Dark (default), Light, or Follow phone. themeboot.js puts
 * theme-light on <html> before the first paint (it runs in <head>, ahead of this sheet taking effect), so a light phone never flashes
 * dark. v0.183.0 (F59): Carbon's Gray 10 — the page #f4f4f4 and a card white, as in the dark theme the page the darker of the two; every
 * ink measured on the surface it sits on (t0570: text 7:1 and more, secondary and the accent 4.5:1 and more). */
html.theme-light {
  color-scheme: light;
  /* F76: the brand's light set — the Mist ground, white panels (Carbon Gray 10 before) */
  --md-primary: #136a7f;             /* Teal's text step: 5.5:1 on Mist (Teal itself is 3.96:1 on the chosen ground) */
  --md-on-primary: #ffffff;
  --md-primary-container: #d1e4e9;   /* Teal 20 */
  --md-on-primary-container: #0e3a46;
  --md-secondary: #5c6673;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #dce4e7; /* chosen */
  --md-on-secondary-container: #171d1f;
  --md-tertiary: #8a5600;            /* Amber 100+, amber as text on light (6.2:1) */
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #fff1d6;
  --md-on-tertiary-container: #8a5600;
  --md-error: #a8392f;               /* Failed as text on light (R3) */
  --md-on-error: #ffffff;
  --md-error-container: #fbe3e1;
  --md-on-error-container: #a8392f;
  --md-surface: #eef2f3;             /* the ground — Mist */
  --md-surface-1: #ffffff;           /* a panel */
  --md-surface-2: #ffffff;
  --md-surface-3: #e6ecee;           /* raised */
  --md-surface-4: #dce4e7;           /* chosen */
  --md-on-surface: #171d1f;
  --md-on-surface-variant: #5c6673;  /* Slate — 4.5:1 on the chosen ground, 5.8:1 on white */
  --md-outline: #8f99a5;
  --md-outline-variant: #d3dcdf;
  --md-inverse-surface: #2e3a3e;
  --md-inverse-on-surface: #f2f5f6;
  --cds-layer-01: #ffffff;
  --cds-layer-hover: #e6ecee;
  --cds-layer-selected: #dce4e7;
  --cds-field-01: #ffffff;
  --cds-field-02: #eef2f3;
  --cds-border-strong: #8f99a5;
  --cds-border-subtle-01: #d3dcdf;
  --cds-helper: #5c6673;
  --cds-focus: #136a7f;
  --cds-focus-inset: #ffffff;
  --cds-border-interactive: #ffb020; /* Amber marks — 1.8:1 on white, so a chosen ground and the weight mark it too (AC1) */
  --cds-btn-secondary: #5c6673;
  --cds-btn-secondary-active: #3a424c;
  --cds-btn-tertiary: #136a7f;
  --cds-btn-ghost-hover: rgba(92, 102, 115, .12);
  --cds-btn-ghost-active: rgba(92, 102, 115, .30);
  --cds-selected-inverse: #ffb020;
  --cds-text-inverse: #171d1f;
  --cds-support-error: #e8453d;
  --cds-support-success: #00aa6b;
  --cds-support-warning: #ffb020;
  --cds-support-info: #136a7f;
  --cds-toggle-off: #8f99a5;
  --cds-ok-text: #00703f;
  --tag-gray-bg: #e6e9ec;   --tag-gray: #545b63;
  --tag-green-bg: #ddf3e8;  --tag-green: #00703f;
  --tag-blue-bg: #dfebfa;   --tag-blue: #1f63ab;
  --tag-red-bg: #fbe3e1;    --tag-red: #a8392f;
  --tag-purple-bg: #ece8f4; --tag-purple: #5e5091;
  --tag-yellow-bg: #fff1d6; --tag-yellow: #8a5600;
  --rec-text: #b04c20;               /* v0.182.0 (his C1) — F76 (RC1): Copper 100+ on light (5.4:1 on white) */
  --stg-ok: #00aa6b; --stg-active: #4896ee; --stg-idle: #8b949e; --stg-failed: #e8453d; --stg-none: #8f99a5;   /* the print fill steps, 3:1 on white */
}
/* The interim-tag chip carries black text on the dark scheme's bright amber; on the light scheme's dark amber it takes
   the role's own ink. */
html.theme-light .tag-chip { color: var(--md-on-tertiary); }
/* v0.183.0 (F59, his A1): Snagtwin amber in place of Carbon blue — Sync & settings › Appearance › Accent (themeboot.js data-accent) */
html[data-accent="amber"] {
  --md-primary: #ffb020; --md-on-primary: #1a1204;
  --cds-btn-primary: #ffb020; --cds-btn-primary-hover: #ffc04d; --cds-btn-primary-active: #e69a12; --cds-btn-primary-ink: #1a1204;
  --cds-focus: #ffb020; --cds-border-interactive: #ffb020;
}
html.theme-light[data-accent="amber"] {
  --md-primary: #8a5600; --md-on-primary: #ffffff;
  --cds-btn-primary: #8a5600; --cds-btn-primary-hover: #9c6200; --cds-btn-primary-active: #6e4400; --cds-btn-primary-ink: #ffffff;
  --cds-focus: #8a5600; --cds-border-interactive: #8a5600;
}

/* --- v0.62.0 (roadmap R11): motion ------------------------------------------------------------------------------
 * The springs are field/motion.js's; field.js puts their sampled easings into these custom properties (0 ms when
 * motion is off, and before the script runs). */
:root { interpolate-size: allow-keywords; }
/* A screen or snackbar that is closing: .hidden is already set (so every check of it reads the new state at once), and
   it stays drawn, with the pointer passing through it, until its fade ends. */
.hidden.leaving { display: block !important; pointer-events: none !important; }
/* The screen a Back gesture goes back to, drawn beneath the one being closed while the gesture is in progress. */
.sheet.hidden.peek { display: block !important; pointer-events: none !important; }
/* Groups open and close by height — the spatial spring clamped at 1, so a group never grows past its contents. A group
   opened while the list is drawn (remembered, or by a search) is open from its first frame and does not animate. */
.grp::details-content, .sub::details-content {
  block-size: 0; overflow: clip;
  transition: block-size var(--cx-height-dur, 0ms) var(--cx-height-ease, linear),
              content-visibility var(--cx-height-dur, 0ms) allow-discrete;
}
.grp[open]::details-content, .sub[open]::details-content { block-size: auto; }
.grp > summary::before, .sub > summary::before {
  transition: transform var(--cx-caret-dur, 0ms) var(--cx-caret-ease, linear);
}
/* The tick on a chosen segment pops in (a transform needs a box). */
.seg-btn.on::before { display: inline-block; }

/* --- v0.78.0 (owner, 2026-10-02): photographs first on a line's page; its SORs; an SOR opened in the app ------------- */
h3.first { margin-top: 4px; }
.pill.bad { background: var(--md-error-container); color: var(--md-on-error-container); }
.sor-row.overdue .row-tag { color: var(--md-error); }
/* v0.113.0 (F21): a line's actions — an action is a sentence, so it wraps; the phone's own, not yet filed, faded */
.act-row .row-tag, .act-row .row-desc { white-space: normal; overflow-wrap: anywhere; }
.act-row.pending { opacity: .75; }
.act-row.overdue .row-tag { color: var(--md-error); }
.pill.ok { background: var(--md-tertiary-container, var(--md-secondary-container)); color: var(--md-on-tertiary-container, var(--md-on-secondary-container)); }
.sor-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 14px 0 0; }
/* 2026-10-13 (F43 M4): an SOR's status changed on the phone (a Shared project), and an action's close / reopen on its line */
.sor-status { margin: 12px 0 0; }
.sor-moves { display: flex; flex-wrap: wrap; gap: 8px; }
.sor-moves .btn { flex: 1 1 0; min-width: 0; }
.sor-status textarea { width: 100%; margin: 8px 0 0; box-sizing: border-box; }
.act-move { padding: 6px 12px; margin-left: 8px; }
.sor-kv dt { color: var(--md-on-surface-variant); font-size: 13px; }
.sor-kv dd { margin: 0; overflow-wrap: anywhere; }
.sor-obs { white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; margin: 0; }
.sor-photos { display: flex; flex-direction: column; gap: 14px; }
.sor-fig { margin: 0; }
.sor-fig img { display: block; width: 100%; height: auto; min-height: 80px; border-radius: 12px; background: var(--md-surface-3); }
.sor-fig.missing img { display: none; }
.sor-fig figcaption { color: var(--md-on-surface-variant); font-size: 13px; margin-top: 6px; overflow-wrap: anywhere; }

/* --- v0.81.0 (owner, 2026-10-02): sign in in the app; the cloud project this phone follows ------------------------- */
.si-show { flex-direction: row; align-items: center; justify-content: space-between; }
.si-show input { width: auto; flex: none; }
/* F81 R1: Create account / Forgot password — the links under Sign in, the terms' two pages */
.si-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 8px 0 12px; }
.si-terms-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; margin: 0; }
.si-msg { min-height: 1.4em; margin: 10px 0 2px; color: var(--md-on-surface-variant); overflow-wrap: anywhere; }
.si-msg.warn { color: var(--md-tertiary); }
.si-msg.err { color: var(--md-error); }
/* 2026-10-13 (F43 M2): the role chip — outlined, not a button; a "do" icon the role lacks, dimmed (its tap says why) */
.role-chip { background: transparent; border: 1px solid var(--outline, #83929a); cursor: default; }
/* 2026-10-13 (F43 M3): what was sent to a Shared project — applied, waiting, not applied */
.row-desc.sent-ok { color: var(--md-tertiary); }
.row-desc.sent-wait { color: var(--md-on-surface-variant); }
.row-desc.sent-bad { color: var(--md-error); }
.line-ico.role-off { opacity: .4; }
.proj-chip {
  display: inline-block; margin-top: 4px; max-width: 100%;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
  border: 0; border-radius: var(--md-shape-full); padding: 3px 10px;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prj-row .row-tag, .prj-row .row-desc { white-space: normal; overflow-wrap: anywhere; }
.prj-row.chosen .row-tag { color: var(--md-primary); }
.prj-row .row-side { color: var(--md-primary); font-weight: 700; }
#signin .obs-row:not(.si-show) { flex-direction: column; align-items: stretch; gap: 6px; }
#signin .obs-row:not(.si-show) input { width: 100%; font-size: 16px; }

/* --- v0.114.0 (owner, 2026-10-09: "compress the element page …"; option B): a line opens IN THE LIST --------------------
 * #detail sits under the line pressed (field.js placeLine): the line's head, ONE strip of eight round icons — five to do,
 * a divider, three to see with their counts — and the one sub-list an icon opened, as a card under the strip. Eight 44 px
 * targets and the divider take 353 px; the S23 gives the list 384. */
.line-open {
  background: var(--md-surface-2); border-bottom: 1px solid var(--md-outline-variant);
  scroll-margin-top: 72px; scroll-margin-bottom: 96px;   /* clear the top bar and the nav bar when it scrolls into view */
}
.line-head .row-tag { color: var(--md-primary); font-weight: 600; }
.line-head .row-desc { white-space: normal; }
.line-head .row-side { display: flex; align-items: center; gap: 8px; color: var(--md-on-surface-variant); }
.line-svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.line-head .line-svg { width: 20px; height: 20px; }
.line-notes { padding: 0 16px 2px 44px; }
.line-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 0;
  padding: 4px 8px 10px;
}
.line-ico {
  position: relative; flex: 0 1 44px; min-width: 34px; height: 44px;   /* F72 (v0.201.0): ten icons — 34 px the floor (a 360-px screen holds ten; 38 made 397 px) */
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--md-shape-full); color: var(--md-on-surface);
}
.line-ico::after {           /* state layer */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: currentColor; opacity: 0; transition: opacity 80ms;
}
.line-ico:active::after { opacity: var(--md-press); }
.line-ico.on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.line-sep { flex: none; width: 1px; height: 28px; background: var(--md-outline-variant); }
.line-badge {
  position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
  border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
  background: var(--md-primary); color: var(--md-on-primary);
}
.line-badge.bad { background: var(--md-error); color: var(--md-on-error); }   /* one of them is overdue */
/* v0.163.0 (F48): the Layout icon — lit when a drawing is mapped to the line, grey when none; the drawing's sheet */
.line-ico.lit { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.line-ico.none { opacity: .4; }
#lay { display: flex; flex-direction: column; overflow: hidden; }
.lay-view { position: relative; flex: 1 1 auto; overflow: hidden; background: #fbfbfc; touch-action: none; }
.lay-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lay-text { position: absolute; left: 0; top: 0; pointer-events: none; }   /* v0.165.0: the text at one size over the zoomed drawing */
.lay-note { position: absolute; left: 12px; right: 12px; top: 12px; margin: 0; }
.lay-dock { position: absolute; left: 0; right: 0; bottom: 0; max-height: 62%; overflow-y: auto; background: var(--md-surface); border-top: 1px solid var(--md-outline-variant); box-shadow: 0 -2px 12px rgba(0, 0, 0, .28); z-index: 3; }   /* v0.168.0: the line docked over the drawing */
.lay-dock > #detail { margin: 0; }
/* v0.184.0 (his ask on build 78): the docked line stays, and its up arrow expands it to most of the drawing (the arrow turned down) */
.lay-dock.expanded { max-height: none; height: 75%; }   /* a strip of the drawing stays seen above it */
.lay-dock.expanded > #detail { min-height: 100%; }   /* the line's card fills it — no empty band under its stages */
.lay-dock.expanded #det-back .row-side svg.ic { transform: rotate(180deg); }
.line-close { margin-right: 4px; }
.lay-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--md-outline-variant); background: var(--md-surface); }
/* F72 (v0.201.0): the 3D view — the tools on one line (the stage and the floor share it, Fit at its right edge), the model under them */
#d3 { display: flex; flex-direction: column; overflow: hidden; }
.d3-tools { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--md-outline-variant); background: var(--md-surface); }
#d3 .d3-tools select { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 6px; }   /* Carbon's field (below), narrower at its sides */
#d3 .d3-tools #d3-stage { flex-grow: 1.35; }   /* "Status at ATP-1" whole beside "All floors" on a 384-px screen */
.d3-tools .btn { flex: none; margin-left: auto; }
.d3-view { position: relative; flex: 1 1 auto; overflow: hidden; background: #f4f4f4; touch-action: none; }
.d3-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.d3-note { position: absolute; left: 12px; right: 12px; top: 12px; margin: 0; }
.d3-legend { display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
/* v0.211.0 (F77): the legend and the "Showing …" line at the view's foot (#d3-foot); the legend's keys filter (FL2) */
.d3-foot { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; z-index: 1; }
button.d3-key { pointer-events: auto; min-height: 40px; padding: 0 10px; border: 1px solid #c9d1d4; font: inherit; font-size: 13px; }
button.d3-key.on { background: var(--brand-amber); border-color: var(--brand-amber); color: #171d1f; font-weight: 600; }
.d3-shown { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding-left: 10px; background: rgba(255, 255, 255, .95); color: #171d1f; font-size: 13px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.d3-shown span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d3-shown .btn.ghost { flex: none; color: #136a7f; min-height: 40px; }
.d3-key { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: rgba(255, 255, 255, .92); color: #161616; font-size: 12px; line-height: 16px; }
.d3-key i { width: 10px; height: 10px; flex: none; }
/* v0.211.0: a swatch outlined, so a model's near-white own colour still reads on the white key */
.d3-key i, .d3-chip i { box-shadow: inset 0 0 0 1px rgba(23, 29, 31, .4); }
#d3 .lay-dock { z-index: 3; }
/* v0.203.0: the view's tools at its right edge (Reset view, Fit, Section box) and the section box's X, Y, Z ranges over the view's top */
.d3-side { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
/* F86 TP1: the tags over the model — as the PC's Text above (a mono tag with a light halo); another tracker's quieter; the tapped one bold */
/* F86 DP1: the Light 3D by discipline in the Filter sheet — a row each: the box, the code, the slider, the value */
.d3-look { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.d3-look-row { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.d3-look-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
.d3-look-code { flex: 0 0 auto; min-width: 72px; font-weight: 600; }
.d3-look-row input[type="range"] { flex: 1 1 auto; min-width: 80px; }
.d3-look-row input[type="range"]:disabled { opacity: .4; }
.d3-look-val { flex: none; width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.d3-look-sw { flex: none; width: 14px; height: 14px; border: 1px solid var(--md-outline, #8d8d8d); }
.d3-look-foot { justify-content: flex-end; gap: 8px; }
.d3-look-note { flex: 1 1 auto; font-size: 12px; color: var(--md-on-surface-variant, #525252); }
.d3-tags { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 1; }
.d3-tag { position: absolute; white-space: nowrap; font-family: var(--mono, monospace); font-weight: 600; font-size: 12px; line-height: 1.25; color: #1b1d21;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff, 0 0 6px #fff; }
.d3-tag.other { font-weight: 400; color: #4a5059; }
.d3-tag.tap { font-size: 13px; font-weight: 700; color: #000; }
/* F91 CM3: a scenario's results — each tag in its result's ink (dark enough on the white halo), the tracker's colour list, the filter and
   the Tags button put away while they are shown */
.d3-tag.ist-ok { color: #0e6027; }
.d3-tag.ist-bad { color: #a2191f; }
.d3-tag.ist-todo { color: #0043ce; }
.d3-tag.ist-trig { color: #684e00; }
#d3.scen #d3-stage, #d3.scen #d3-flt-btn, #d3.scen #d3-tags-btn { display: none; }
.d3-tool { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: rgba(255, 255, 255, .92); color: #161616; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.d3-tool svg.ic { width: 20px; height: 20px; fill: #161616; }
.d3-tool[aria-pressed="true"] { background: #0f62fe; color: #fff; }
.d3-tool[aria-pressed="true"] svg.ic { fill: #fff; }
.d3-secbox { position: absolute; top: 12px; left: 12px; right: 68px; z-index: 2; padding: 4px 12px 8px; background: rgba(255, 255, 255, .95); color: #161616; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.d3-sec-head { display: flex; align-items: center; gap: 4px; min-height: 40px; }
.d3-sec-head strong { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.d3-sec-head .btn.ghost { color: #0f62fe; min-height: 40px; }
.d3-sec-x { width: 40px; padding: 0; }
.d3-sec-x svg.ic { fill: #161616; }
.d3-sec-row { display: flex; align-items: center; gap: 10px; height: 36px; }
.d3-sec-ax { flex: none; width: 14px; font-weight: 600; font-size: 14px; }
.d3-range { position: relative; flex: 1 1 auto; height: 36px; }
/* two ranges laid over one another: only their thumbs take a finger, so either end is dragged */
.d3-range input[type="range"] { position: absolute; left: 0; top: 0; width: 100%; height: 36px; margin: 0; padding: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.d3-range input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: #8d8d8d; }
.d3-range input[type="range"] + input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.d3-range input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -12px; border-radius: 50%; background: #0f62fe; border: 3px solid #fff; box-shadow: 0 0 0 1px #0f62fe; }
/* v0.211.0 (F77 FL1 / FH1 / WC1): the Filter button's badge and the Filter sheet — an ON choice Amber with Ink on it, as the
   brand's pressed tools; actions Teal */
.d3-flt-btn { position: relative; }
.d3-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--brand-deep); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.d3-flt { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72%; overflow-y: auto; z-index: 4; padding: 4px 16px 16px; background: #fff; color: #171d1f; box-shadow: 0 -2px 10px rgba(0, 0, 0, .3); display: flex; flex-direction: column; gap: 8px; }
.d3-flt-head { display: flex; align-items: center; gap: 4px; min-height: 44px; }
.d3-flt-head strong { flex: 1 1 auto; min-width: 0; font-size: 16px; }
.d3-flt-head .btn.ghost { color: #136a7f; min-height: 40px; }
.d3-flt-head .d3-sec-x svg.ic { fill: #171d1f; }
.d3-flt-lab { font-size: 13px; color: #4b5a5f; }
.d3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.d3-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid #9fb0b5; background: #fff; color: #171d1f; font: inherit; font-size: 14px; }
.d3-chip i { width: 10px; height: 10px; flex: none; }
.d3-chip.on { background: var(--brand-amber); border-color: var(--brand-amber); font-weight: 600; }
.d3-flt-row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.d3-seg { display: inline-flex; margin-left: auto; }
.d3-seg-b { min-height: 40px; padding: 0 16px; border: 1px solid #9fb0b5; background: #fff; color: #171d1f; font: inherit; font-size: 14px; }
.d3-seg-b + .d3-seg-b { border-left: 0; }
.d3-seg-b.on { background: var(--brand-amber); border-color: var(--brand-amber); font-weight: 600; }
.d3-walls { flex: 1 1 auto; min-width: 0; accent-color: var(--brand-teal); }
.d3-walls-n { flex: none; width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.d3-flt-go { min-height: 44px; }
.lay-bar > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lay-dot { flex: none; width: 14px; height: 14px; border: 1px solid var(--md-outline); border-radius: 3px; }
.lay-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.lay-row .row-tag, .lay-row .small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; text-align: left; width: 100%; }   /* v0.167.0: the titles wrap, left */
/* v0.166.0: the Layouts tab's filters — floor, discipline, type and the order, M3 filled fields two to a row */
.lay-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.lay-filters select { flex: 1 1 45%; min-width: 0; background: var(--md-surface-3); color: var(--md-on-surface); border: 0; border-bottom: 1px solid var(--md-outline); border-radius: var(--md-shape-xs) var(--md-shape-xs) 0 0; padding: 8px 10px; font: inherit; font-size: 14px; }
.lay-filters select:focus { outline: none; border-bottom: 2px solid var(--md-primary); padding-bottom: 7px; }
.lay-row .small { color: var(--md-on-surface-variant); }
/* v0.164.0 (F48 part 2): the project kept offline — the bar's cloud icon (outline · amber · filled) and the card's bar */
/* v0.184.0: the trackers kept, and the other projects kept on this phone */
.offline-trackers { margin: 4px 0 8px 16px; }
.offline-trk { padding-left: 16px; }
.offline-h { margin: 16px 0 4px; font-size: 14px; font-weight: 600; }
.offline-prj { border-bottom: 1px solid var(--md-outline-variant); padding: 4px 0; }
.offline-prj-name { display: flex; flex-direction: column; min-width: 0; }
.offline-prj-name .row-tag { white-space: normal; overflow-wrap: anywhere; }
.offline-bar { height: 6px; border-radius: 3px; background: var(--md-outline-variant); overflow: hidden; margin: 6px 0; }
.offline-fill { height: 6px; width: 0; background: var(--md-primary); transition: width 240ms; }
.line-sub {
  margin: 0 12px 12px; padding: 4px 12px 12px;
  background: var(--md-surface); border-radius: var(--md-shape-md); box-shadow: inset 0 0 0 1px var(--md-outline-variant);
  scroll-margin-top: 72px; scroll-margin-bottom: 96px;
}
.line-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.line-sub-head strong { color: var(--md-primary); font-size: 14px; font-weight: 600; }
.line-x {
  flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--md-shape-full); color: var(--md-on-surface-variant);
}
.sub-cap { margin: 4px 0 6px; font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); }
.sub-panel .row { padding-left: 0; padding-right: 0; }   /* the SORs and actions in the card: the card is their margin */
.sub-panel .photo-actions { margin-top: 4px; }
.sor-row.pending { opacity: .75; }
/* ATP status: a stage a row — its name and its status pill, coloured by the desktop's class for the value — and the choices
   under the stage tapped */
.stg-wrap { border-bottom: 1px solid var(--md-outline-variant); }
.stg {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px;
  padding: 4px 0; background: none; border: 0; color: inherit; font: inherit; text-align: left;
}
.stg.na { border-bottom: 1px solid var(--md-outline-variant); }
.stg.na .stage-na { padding: 0; text-align: right; }
.stg-name { font-weight: 500; }
.stg-side { display: flex; align-items: center; gap: 8px; }
.stg-pill {
  display: inline-block; border-radius: var(--md-shape-full); padding: 4px 10px; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  background: var(--md-surface-4); color: var(--md-on-surface);
}
.stg-pill.s-ok { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.stg-pill.s-active { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.stg-pill.s-failed { background: var(--md-error-container); color: var(--md-on-error-container); }
.stg-pill.s-na { background: transparent; color: var(--md-on-surface-variant); box-shadow: inset 0 0 0 1px var(--md-outline); }
.stg-choices { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 10px; }
.stg-choice {
  min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--md-shape-xs);
  background: var(--md-surface-3); color: var(--md-on-surface); font: inherit; font-size: 13px; font-weight: 500;
}
.stg-choice.on { background: var(--md-primary); color: var(--md-on-primary); }

/* --- v0.116.0 (owner, 2026-10-09, F24) ---------------------------------------------------------------------------------
 * "Tighter line header": the line's notes behind an i beside its head (amber when one is about the tag). */
.line-head-row { display: flex; align-items: center; }
.line-head-row .line-head { flex: 1; min-width: 0; }
.line-info { margin-right: 6px; }
.line-info.warn { color: var(--md-tertiary); }
.line-notes { padding-bottom: 6px; }
/* "Upload by long-pressing Photo": a held icon is the app's press, not a text selection or the WebView's menu */
.line-ico { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
/* "Tap a photo to see it full size": this phone's own photographs are buttons now; the viewer is a black screen of its own,
   the photograph fitted to it — tapped, its own pixels, scrolling */
button.own-thumb { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; border-radius: var(--md-shape-sm); }
#pv { display: flex; flex-direction: column; background: #000; }
#pv .sheet-bar { background: rgba(0, 0, 0, .85); color: #fff; }
#pv .sheet-bar .btn.ghost { color: #fff; }
.pv-frame { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.pv-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }   /* fitted, small or large, letterboxed */
.pv-frame.actual { display: block; cursor: zoom-out; }
.pv-frame.actual img { width: auto; height: auto; }
.pv-note { margin: 0; padding: 10px 16px max(14px, env(safe-area-inset-bottom)); color: #c9d1d4; background: #000; }

/* v0.182.0 (the owner, his C1 K2 X1): an SOR's observation, an action's text and a photograph's comment — bold in the record colour
   (Carbon yellow 30, as the PC's dark theme; the phone is dark); a closed SOR's or action's words in the plain dim ink */
.rec-text { font-weight: 600; color: #f1c21b; }
.rec-text.rec-closed { font-weight: 400; color: var(--md-on-surface-variant); }

/* =================================================================================================================================
 * v0.183.0 (F59, the owner: "I need to change the mobile's design to follow the carbon design"): CARBON'S COMPONENTS, read from
 * v11.118.0 as the PC's 0.180.0 did — one block at the END of the sheet, so every rule above (and the tests that read them) stands and
 * these, of the same weight and later, win. Each says which Carbon component it is.
 * ================================================================================================================================= */
:root {
  --cds-btn-disabled: #525252; --cds-text-disabled: #8d8d8d;
  --cds-toast-bg: #393939;
  --cds-note-bg: #262626;
  --search-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23c6c6c6' d='M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z'/%3E%3C/svg%3E");
}
html.theme-light {
  --cds-btn-disabled: #c6c6c6; --cds-text-disabled: #8d8d8d;
  --cds-toast-bg: #ffffff;
  --cds-note-bg: #ffffff;
  --search-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23525252' d='M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z'/%3E%3C/svg%3E");
}
body { letter-spacing: 0; }
.small { font-size: 12px; line-height: 16px; letter-spacing: .32px; }   /* label 01 / helper text 01 */

/* --- icons: Carbon's, filled in the text colour (field/icons.js) ---------------------------------------------------------------- */
svg.ic { width: 20px; height: 20px; flex: none; fill: currentColor; stroke: none; display: inline-block; vertical-align: middle; }
.btn svg.ic { width: 16px; height: 16px; }
.btn.icon svg.ic, .line-ico svg.ic, .line-x svg.ic { width: 20px; height: 20px; }

/* --- the UI shell header, dark in both themes (his H1): the bar and every screen's own bar ---------------------------------------- */
.bar, .sheet-bar {
  background: var(--hd-bg); color: var(--hd-ink); border-bottom: 1px solid var(--hd-line); box-shadow: none; min-height: 48px;
}
.bar { padding: max(8px, env(safe-area-inset-top)) 4px 8px 16px; }
.sheet-bar { padding: max(8px, env(safe-area-inset-top)) 16px 8px 4px; }
.sheet-bar strong { font-size: 16px; line-height: 22px; font-weight: 600; }
.bar .btn, .sheet-bar .btn.ghost { background: transparent; color: var(--hd-ink); min-height: 48px; }
.bar .btn:active, .sheet-bar .btn.ghost:active { background: var(--hd-hover); }
.sheet-bar > .btn.ghost { padding: 0 12px 0 8px; gap: 4px; }
.proj-chip {
  background: var(--hd-chip); color: var(--hd-ink); border: 0; border-radius: 12px; min-height: 24px; padding: 2px 10px;
  font-size: 12px; line-height: 16px; letter-spacing: .32px; display: inline-flex; align-items: center; gap: 4px;
}
.proj-chip svg.ic { width: 16px; height: 16px; }
.role-chip { background: transparent; border: 1px solid var(--cds-border-strong); color: var(--hd-ink); }

/* --- buttons: primary (filled blue), secondary (filled gray — the plain .btn), tertiary (outline), ghost, danger; square, 48 px --------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 0; min-height: 48px; padding: 0 16px;
  background: var(--cds-btn-secondary); color: #ffffff;
  font-size: 14px; line-height: 18px; font-weight: 400; letter-spacing: .16px;
}
.btn::after { content: none; }   /* Carbon's pressed colours (below), not Material's state layer */
.btn:active { background: var(--cds-btn-secondary-active); }
.btn.primary { background: var(--cds-btn-primary); color: var(--cds-btn-primary-ink); }
.btn.primary:active { background: var(--cds-btn-primary-active); }
.btn.tertiary { background: transparent; color: var(--cds-btn-tertiary); box-shadow: inset 0 0 0 1px var(--cds-btn-tertiary); }
.btn.tertiary:active { background: var(--cds-btn-ghost-active); }
.btn.ghost { background: transparent; color: var(--md-primary); }
.btn.ghost:active { background: var(--cds-btn-ghost-active); }
.btn.danger { background: var(--cds-btn-danger); color: #ffffff; }
.btn.icon { background: transparent; color: var(--md-on-surface); width: 48px; height: 48px; min-height: 48px; padding: 0; flex: none; }
.btn.icon:active { background: var(--cds-btn-ghost-active); }
/* …in the header, its own light ink in both themes (the bar is dark in both — his H1) */
.bar .btn.icon, .sheet-bar .btn.icon, .bar .btn.ghost { color: var(--hd-ink); }
.bar .btn.icon:active, .sheet-bar .btn.icon:active { background: var(--hd-hover); }
.btn.wide { justify-content: flex-start; padding: 0 16px; margin: 8px 0; min-height: 48px; }
.btn:disabled, .btn.primary:disabled { background: var(--cds-btn-disabled); color: var(--cds-text-disabled); opacity: 1; box-shadow: none; }
.btn.ghost:disabled, .btn.icon:disabled, .btn.tertiary:disabled { background: transparent; color: var(--cds-text-disabled); box-shadow: none; }
.btn:focus-visible, .tab:focus-visible, .row:focus-visible, .line-ico:focus-visible, .seg-btn:focus-visible {
  outline: 2px solid var(--cds-focus); outline-offset: -2px;
}
.btn.primary:focus-visible, .btn:not(.ghost):not(.icon):not(.tertiary):focus-visible { box-shadow: inset 0 0 0 3px var(--cds-focus-inset); }
.row-2 { gap: 1px; }
.row-2 .btn { min-height: 48px; }

/* --- the tab bar: Carbon's line tab, its bar on top (it sits at the foot), an icon over each word ------------------------------------ */
.tabs { background: var(--cds-layer-01); border-top: 1px solid var(--md-outline-variant); box-shadow: none; }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 8px 4px 10px; min-height: 64px; color: var(--md-on-surface-variant);
  font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: .32px;
}
.tab.active { color: var(--md-on-surface); font-weight: 600; }
.tab.active::before {   /* the bar on the open tab — left 50 % and translateX(-50 %), as field.js grows it in */
  top: 0; left: 50%; width: 100%; height: 3px; border-radius: 0; transform: translateX(-50%); background: var(--cds-border-interactive);
}
.tab > .pill {   /* the Outbox's and the Reviews' counts — a notification count over the icon */
  position: absolute; top: 6px; left: 50%; margin-left: 4px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 8px; background: var(--cds-btn-primary); color: var(--cds-btn-primary-ink); font-size: 11px; line-height: 16px; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.tab > .pill.hidden { display: none; }
.pane { padding-bottom: 96px; }

/* --- text inputs, text areas, selects: Carbon's fields — the field colour, a line at the foot, the focus outline ---------------------- */
#search, .aspect-row select, .obs-row input:not([type="checkbox"]):not([type="radio"]), #obs-text, #act-text, #act-remarks, #sor-status-note,
.cl-note, .obs-cap input, .lay-filters select, .rv-reason input, #cloud-url, #lay-tap, #lay-draw, .d3-tools select, .cl-inst select, select.cl-choice {
  background: var(--cds-field-01); color: var(--md-on-surface); border: 0; border-bottom: 1px solid var(--cds-border-strong);
  border-radius: 0; font: inherit; font-size: 14px; line-height: 18px; letter-spacing: .16px; padding: 13px 16px; min-height: 48px; box-sizing: border-box;
}
#search { border-radius: 0; padding-left: 48px; background-image: var(--search-ico); background-repeat: no-repeat; background-position: 16px center; background-size: 16px 16px; }
#search:focus, .aspect-row select:focus, .obs-row input:focus, #obs-text:focus, #act-text:focus, #act-remarks:focus, #sor-status-note:focus,
.cl-note:focus, .obs-cap input:focus, .lay-filters select:focus, .rv-reason input:focus, #cloud-url:focus, .d3-tools select:focus, .cl-inst select:focus, select.cl-choice:focus {
  outline: 2px solid var(--cds-focus); outline-offset: -2px; border-bottom: 1px solid var(--cds-border-strong); padding-bottom: 13px;
}
::placeholder { color: var(--md-on-surface-variant); opacity: 1; }
textarea { resize: vertical; }
#obs-text, #act-text, #act-remarks { width: 100%; }
.fld-label { display: block; margin: 0 0 8px; color: var(--md-on-surface-variant); font-size: 12px; line-height: 16px; letter-spacing: .32px; font-weight: 400; }
.fld-label.hidden { display: none; }
/* a field on a layer (the open line's card, a sheet's card) is field 02 */
.line-open #obs-text, .line-open #act-text, .line-open #act-remarks, .line-open .obs-row input:not([type="checkbox"]):not([type="radio"]),
.line-open .aspect-row select, .lay-dock #obs-text, .lay-dock #act-text { background: var(--cds-field-02); }
.aspect-row, .obs-row { color: var(--md-on-surface-variant); font-size: 14px; }

/* --- toggles and radio buttons: Carbon's toggle (on in support success) and radio -------------------------------------------------- */
.obs-row input[type="checkbox"], .si-show input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 48px; height: 24px; margin: 0;
  border-radius: 12px; background: var(--cds-toggle-off); cursor: pointer; transition: background 70ms;
}
.obs-row input[type="checkbox"]::before, .si-show input[type="checkbox"]::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; transition: transform 70ms;
}
.obs-row input[type="checkbox"]:checked, .si-show input[type="checkbox"]:checked { background: var(--cds-support-success); }
.obs-row input[type="checkbox"]:checked::before, .si-show input[type="checkbox"]:checked::before { transform: translateX(24px); }
.obs-row input[type="checkbox"]:disabled { opacity: .5; }
.obs-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 1px; }
.radio-list { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.radio-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; cursor: pointer; }
.radio-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.radio-title { color: var(--md-on-surface); font-size: 14px; line-height: 20px; }
.radio-row input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border-radius: 50%;
  border: 1px solid var(--md-on-surface); background: transparent; display: inline-grid; place-content: center;
}
.radio-row input[type="radio"]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--md-on-surface); transform: scale(0); }
.radio-row input[type="radio"]:checked::before { transform: scale(1); }
.radio-row input[type="radio"]:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 2px; }

/* --- the content switcher (Appearance, Motion, a stage's choices): Carbon's, its chosen segment inverse ------------------------------ */
.seg { border: 1px solid var(--cds-selected-inverse); border-radius: 4px; }
.seg-btn {
  color: var(--md-on-surface-variant); font-size: 14px; line-height: 18px; font-weight: 400; letter-spacing: .16px; min-height: 40px;
  border-left: 1px solid var(--cds-border-subtle-01);
}
.seg-btn.on { background: var(--cds-selected-inverse); color: var(--cds-text-inverse); }
.seg-btn.on::before { content: none; }

/* --- tags: Carbon's (24 px, round), in the status hues ----------------------------------------------------------------------------- */
.pill, .stg-pill {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; box-sizing: border-box; border-radius: 12px;
  font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: .32px;
  background: var(--tag-gray-bg); color: var(--tag-gray);
}
.pill.ok, .stg-pill.s-ok { background: var(--tag-green-bg); color: var(--tag-green); }
.pill.bad, .pill.overdue, .pill.fail, .stg-pill.s-failed { background: var(--tag-red-bg); color: var(--tag-red); }
.stg-pill.s-active { background: var(--tag-blue-bg); color: var(--tag-blue); }
.stg-pill.s-na { background: transparent; color: var(--md-on-surface-variant); box-shadow: inset 0 0 0 1px var(--cds-border-strong); }
.pill.idle { background: var(--tag-gray-bg); color: var(--tag-gray); }
.tag-chip { border-radius: 12px; background: var(--tag-yellow-bg); color: var(--tag-yellow); font-weight: 400; letter-spacing: .32px; }
html.theme-light .tag-chip { color: var(--tag-yellow); }

/* --- lists: Carbon's contained list — a line between rows, the tag in heading 02, the words in helper ------------------------------- */
.row { min-height: 56px; }
.list > .row + .row, .list > .row + .line-open, .list > .line-open + .row { border-top: 1px solid var(--md-outline-variant); }
.row-tag { font-size: 16px; line-height: 22px; font-weight: 600; }
.row-desc { font-size: 14px; line-height: 18px; letter-spacing: .16px; }
.row::after { background: var(--md-on-surface); }
.grp { border-bottom: 1px solid var(--md-outline-variant); }
.grp > summary { background: var(--cds-layer-01); font-size: 14px; line-height: 20px; font-weight: 600; min-height: 48px; }
.sub > summary { font-size: 14px; line-height: 20px; font-weight: 400; }
.grp > summary::before, .sub > summary::before {   /* Carbon's chevron, drawn by its borders: right when shut, down when open */
  content: ''; width: 6px; height: 6px; margin: 0 4px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
.grp[open] > summary::before, .sub[open] > summary::before { transform: rotate(45deg); }
.row.more { color: var(--md-primary); font-weight: 400; }
h3 { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--md-on-surface); margin: 28px 0 12px; letter-spacing: 0; }

/* --- notifications: Carbon's inline (low contrast — a 3-px edge in the support colour) and its toast -------------------------------- */
.held {
  border: 0; border-left: 3px solid var(--cds-support-warning); border-radius: 0; background: var(--cds-note-bg);
  padding: 12px 12px 12px 13px; box-shadow: none;
}
html.theme-light .held { background: #fcf4d6; }
#outbox-note:not(:empty), .edit-bar {
  border-left: 3px solid var(--cds-support-info); background: var(--cds-note-bg); padding: 12px 12px 12px 13px; color: var(--md-on-surface);
  font-size: 14px; line-height: 20px;
}
html.theme-light #outbox-note:not(:empty), html.theme-light .edit-bar { background: #edf5ff; }
.edit-bar { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; }
.edit-bar.hidden { display: none; }
.edit-bar > span { flex: 1 1 auto; min-width: 0; }
.edit-bar .btn { flex: none; min-height: 32px; padding: 0 8px; }
.toast {
  background: var(--cds-toast-bg); color: var(--md-on-surface); border: 0; border-left: 3px solid var(--cds-support-info); border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3); padding: 14px 16px 14px 13px; font-size: 14px; line-height: 20px;
}
.toast.bad { background: var(--cds-toast-bg); color: var(--md-on-surface); border-left-color: var(--cds-support-error); }
.note.interim, .note.was { color: var(--md-tertiary); }

/* --- tiles and cards: square, layer 01 ----------------------------------------------------------------------------------------------- */
.st-card, .rv-card { border-radius: 0; background: var(--cds-layer-01); border: 0; padding: 16px; }
.rv-btns button, .rv-reason button { border-radius: 0; min-height: 40px; font-weight: 400; background: var(--cds-btn-secondary); color: #ffffff; }
.rv-btns button.primary, .rv-reason button.primary { background: var(--cds-btn-primary); color: var(--cds-btn-primary-ink); }
.rv-btns button.ghost, .rv-reason button.ghost { background: transparent; color: var(--md-primary); }
.rv-photos img, .thumbs img, .sor-fig img, .pview img, .obs-cap img, button.own-thumb { border-radius: 0; }
.own-mark { border-radius: 12px; font-family: inherit; }

/* --- the line opened in the list: a card on layer 01, its edge in the interactive blue ------------------------------------------------ */
.line-open { background: var(--cds-layer-01); border-left: 3px solid var(--cds-border-interactive); border-radius: 0; }
.line-head .row-tag { color: var(--md-on-surface); }
.line-ico { border-radius: 0; color: var(--md-on-surface); }
.line-ico.on { box-shadow: inset 0 -2px 0 var(--cds-border-interactive); }
.line-badge { border-radius: 8px; background: var(--cds-btn-primary); color: var(--cds-btn-primary-ink); font-weight: 400; }
.line-badge.bad { background: var(--cds-btn-danger); color: #ffffff; }
.line-sep { background: var(--cds-border-subtle-01); }
.line-sub { border-radius: 0; background: transparent; box-shadow: none; border-top: 1px solid var(--md-outline-variant); margin: 0; padding: 4px 16px 16px; }
/* a queued SOR's or action's row is a row — not the stage's small amber "pending" mark that shares its class */
.row.pending { color: var(--md-on-surface); font-size: 16px; font-weight: 400; }
/* what a Shared project's cloud did with a send: applied green, waiting grey, refused red — Carbon's text hues */
.row-desc.sent-ok { color: var(--cds-ok-text); }
.accent-label { margin-top: 16px; }
.line-sub-head strong { color: var(--md-on-surface); font-size: 14px; font-weight: 600; }
.line-x { border-radius: 0; color: var(--md-on-surface); }

/* --- v0.183.0 (F59): the SOR form's photo cards — the picture, its number, its comment (optional), ✕ off the SOR ----------------------- */
.obs-captions { gap: 8px; margin: 0 0 8px; }
.obs-cap { display: flex; gap: 12px; align-items: flex-start; padding: 8px; background: var(--cds-layer-selected); }
.obs-cap img { width: 88px; height: 66px; object-fit: cover; flex: none; background: var(--md-surface-3); }
.obs-cap-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.obs-cap-head { display: flex; align-items: center; min-height: 32px; }
.obs-cap-n { flex: 1 1 auto; color: var(--md-on-surface-variant); font-size: 12px; line-height: 16px; letter-spacing: .32px; }
.obs-cap-x.btn.icon { width: 32px; height: 32px; min-height: 32px; }
.obs-cap input { width: 100%; min-height: 40px; padding: 10px 12px; background: var(--cds-field-01); }
.obs-cap input:focus { padding-bottom: 10px; }
.obs-photos-label { margin-top: 16px; }
.obs-others { margin: 0 0 8px; }
.obs-others.hidden { display: none; }
.obs-others .thumbs img { width: 64px; height: 48px; }
.obs-other:disabled { opacity: .5; }
.obs-photo-actions { display: flex; gap: 8px; justify-content: flex-end; margin: 4px 0 12px; }   /* his F52 rule: buttons at the right edge */
.obs-photo-actions .btn { min-height: 40px; }
#act-remarks { margin: 0 0 8px; }
#act-remarks.hidden { display: none; }

/* --- the Outbox's rows: the record's words, its Edit and Discard at the row's right edge --------------------------------------------- */
.ob-row { align-items: center; padding-right: 0; }
.ob-btns { display: flex; align-items: center; flex: none; }
.ob-btns .btn.icon:disabled { opacity: 1; }
.ob-row .row-desc, .sor-row .row-desc, .act-row .row-desc { white-space: normal; overflow-wrap: anywhere; }

/* --- the record colour (v0.182.0, his C1): yellow 30 on dark, red 60 on light — the light theme's own, not dark's yellow ---------------- */
.rec-text { color: var(--rec-text); }
.rec-text.rec-closed { color: var(--md-on-surface-variant); }

/* =================================================================================================================================
 * v0.184.0 (F59, his picks on the canvas — "Build all recommendation: E1 M1, U1 U2 U4 U6 U8 U10, F1 F4 F5 F7 F9"): the phone's UI set.
 * ================================================================================================================================= */
/* --- U10: the open line's head, notes and strip stay under the bar while its sub-list scrolls ----------------------------------------- */
.line-top { position: sticky; top: var(--bar-h, 0px); z-index: 4; background: var(--cds-layer-01); }
.lay-dock .line-top { top: 0; }
/* --- U2: the SOR's and the action's forms full screen — Carbon's full-page form: the dark header with the title and ✕, the fields, and a
       footer of two 64-px buttons (Cancel, then the form's own) fixed at the foot, above the keyboard ------------------------------------ */
.line-sub.form-full {
  position: fixed; inset: 0; z-index: 9; margin: 0; padding: 0 16px; border: 0; box-shadow: none;
  background: var(--md-surface); overflow-y: auto; overscroll-behavior: contain;
}
.line-sub.form-full .line-sub-head {
  position: sticky; top: 0; z-index: 2; margin: 0 -16px 16px; min-height: 48px;
  padding: max(8px, env(safe-area-inset-top)) 4px 8px 16px; background: var(--hd-bg); border-bottom: 1px solid var(--hd-line);
}
.line-sub.form-full .line-sub-head strong { color: var(--hd-ink); font-size: 16px; line-height: 22px; }
.line-sub.form-full .line-sub-head .line-x { color: var(--hd-ink); width: 48px; height: 48px; }
.form-foot { display: flex; gap: 1px; margin: 16px -16px 0; }
.line-sub.form-full .form-foot { position: sticky; bottom: 0; z-index: 2; padding-bottom: env(safe-area-inset-bottom); background: var(--md-surface); }
.form-foot .btn { flex: 1 1 50%; min-height: 64px; margin: 0; justify-content: flex-start; align-items: flex-start; padding: 14px 16px; }
/* --- U4's thumb bar (Photo · SOR · Action) removed the same day on his word — the line's own icon row is enough ---------------------- */
/* --- U6: Undo at the queued message's right edge, for 6 s ---------------------------------------------------------------------------- */
.toast.has-undo { display: flex; align-items: center; gap: 12px; padding-right: 4px; }
.toast-words { flex: 1 1 auto; min-width: 0; }
.toast-undo.btn.ghost { flex: none; min-height: 40px; padding: 0 12px; color: var(--md-primary); font-weight: 600; }
/* --- U8: Sunlight — Carbon White, black ink, 18-px text, 2-px lines (Sync & settings › Appearance › Sunlight; themeboot theme-sun) ------- */
#appearance-seg .seg-btn { flex: 1 1 45%; }
html.theme-sun {
  --md-surface: #ffffff; --md-surface-1: #ffffff; --md-surface-2: #ffffff; --md-surface-3: #f4f4f4; --md-surface-4: #e0e0e0;
  --md-on-surface: #000000; --md-on-surface-variant: #262626; --md-outline: #000000; --md-outline-variant: #161616;
  --md-primary: #0e3a46; --md-tertiary: #684e00; --md-error: #a2191f;   /* F76: Deep Teal (12.3:1 on white) for Carbon's blue 80 */
  --cds-layer-01: #ffffff; --cds-field-01: #ffffff; --cds-field-02: #ffffff; --cds-border-strong: #000000; --cds-border-subtle-01: #161616;
  --rec-text: #a2191f;
}
html.theme-sun body { font-size: 18px; }
html.theme-sun .row-tag { font-size: 18px; line-height: 24px; }
html.theme-sun .row-desc, html.theme-sun .small, html.theme-sun .note { font-size: 16px; line-height: 22px; }
html.theme-sun .list > .row + .row, html.theme-sun .grp, html.theme-sun .list > .row + .line-open, html.theme-sun .list > .line-open + .row { border-width: 2px; }
html.theme-sun #search, html.theme-sun .aspect-row select, html.theme-sun .obs-row input:not([type="checkbox"]):not([type="radio"]),
html.theme-sun #obs-text, html.theme-sun #act-text, html.theme-sun #act-remarks, html.theme-sun .obs-cap input { border: 2px solid #000000; font-size: 16px; }
html.theme-sun .pill, html.theme-sun .stg-pill { box-shadow: inset 0 0 0 2px currentColor; font-weight: 600; font-size: 14px; }
html.theme-sun .tab { font-size: 14px; color: #262626; }
html.theme-sun .tab.active { color: #000000; }
html.theme-sun .tabs { border-top: 2px solid #000000; }
/* --- U1: the filter chips under the search — Carbon's filter tags (32 px, round, pressed = inverse with a ✕), the stage and floor dropdowns -- */
.flt-chips { display: flex; flex-wrap: nowrap; gap: 8px; padding: 0 16px 12px; margin-top: -4px; overflow-x: auto; scrollbar-width: none; }
.flt-chips > * { flex: none; }   /* one row, swiped sideways — the list starts at once */
.flt-chips:empty { display: none; }
.flt-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 16px;
  background: var(--md-surface-4); color: var(--md-on-surface); font: inherit; font-size: 14px; line-height: 18px; letter-spacing: .16px;
}
.flt-chip.on { background: var(--cds-selected-inverse); color: var(--cds-text-inverse); }
.flt-chip svg.ic { width: 16px; height: 16px; }
.flt-n { font-variant-numeric: tabular-nums; color: inherit; opacity: .8; }
/* --- F91 CM1: readiness — a line Ready for its next stage (blue, as the PC's In progress) or Blocked (red, as Failed), its needs --- */
.row-ready { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; }
.rd-chip { padding: 1px 8px; border-radius: 10px; font-weight: 600; }
.rd-chip.ready { background: var(--tag-blue-bg); color: var(--tag-blue); }
.rd-chip.blocked { background: var(--tag-red-bg); color: var(--tag-red); }
.rd-why { color: var(--md-on-surface-variant, inherit); opacity: .85; }
.line-needs { display: flex; flex-direction: column; gap: 6px; padding: 4px 16px 10px; }
.line-needs.hidden { display: none; }
.line-needs-title { font-size: 12px; opacity: .85; }
.line-needs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.need-chip { min-height: 36px; padding: 0 10px; border: 1px solid var(--cds-border-strong, currentColor); background: transparent; color: inherit; font: inherit; font-size: 13px; }
.need-chip.met { background: var(--tag-blue-bg); color: var(--tag-blue); border-color: transparent; }
.need-chip.open { background: var(--tag-red-bg); color: var(--tag-red); border-color: transparent; }
.need-chip.missing { border-style: dashed; }
.stg-ask { display: flex; flex-direction: column; gap: 10px; margin: 0 0 10px; padding: 12px; border: 1px solid var(--cds-support-warning, #b37800); background: var(--cds-note-bg, transparent); font-size: 13px; }
.stg-ask-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stg-ask-btns button { min-height: 44px; font: inherit; }
.flt-sel {
  min-height: 32px; max-width: 46%; padding: 0 8px; border: 0; border-bottom: 1px solid var(--cds-border-strong); border-radius: 0;
  background: var(--cds-field-01); color: var(--md-on-surface); font: inherit; font-size: 14px;
}
.flt-sel.on { box-shadow: inset 0 -2px 0 var(--cds-border-interactive); }
/* U2: the foot at the SCREEN's foot when the form is short — the form a column as tall as the screen, its foot pushed down */
.line-sub.form-full:not(.hidden) { display: flex; flex-direction: column; }
.line-sub.form-full > .sub-panel:not(.hidden) { flex: 1 0 auto; display: flex; flex-direction: column; }
.line-sub.form-full .form-foot { margin-top: auto; }

/* --- v0.186.0 (F62, the owner's Gmail layout in Carbon — his picks A1 D1 S1 V1): the bar ☰ · project over tracker · search · initials;
   the side panel (the Projects screen made a drawer) with the app's icon on top; the search over the whole bar; the account card ------ */
.bar { justify-content: flex-start; gap: 0; min-height: 64px; padding: max(8px, env(safe-area-inset-top)) 4px 8px 4px; }
.bar-ico {
  width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--hd-ink); cursor: pointer;
}
.bar-ico svg.ic { width: 20px; height: 20px; }
.bar-title {
  flex: 1 1 auto; min-width: 0; min-height: 48px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 8px; margin: 0; border: 0; border-radius: 0; background: transparent; color: var(--hd-ink); font: inherit; text-align: left; cursor: pointer;
}
.bar-project { max-width: 100%; font-size: 16px; line-height: 22px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .bar-sub { max-width: 100%; font-size: 12px; line-height: 16px; color: var(--hd-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-ico:active, .bar-title:active, .bar-avatar:active { background: var(--hd-hover); }
.bar-avatar {
  width: 48px; height: 48px; flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer;
}
.avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cds-btn-primary); color: var(--cds-btn-primary-ink); font-size: 13px; line-height: 1; font-weight: 600; letter-spacing: .5px;
}
.avatar.big { width: 56px; height: 56px; font-size: 20px; }
.avatar svg.ic { width: 18px; height: 18px; }
.offline-dot {
  position: absolute; right: 7px; bottom: 9px; width: 10px; height: 10px; padding: 0; border-radius: 50%;
  border: 2px solid var(--hd-bg); background: var(--md-on-surface-variant);
}
.offline-dot.done { background: var(--cds-support-success); }
.offline-dot.part { background: var(--cds-support-warning); }
.offline-dot.paused { background: var(--cds-support-error); }
.bar #btn-signin { flex: none; margin: 0 4px 0 8px; padding: 0 16px; min-height: 40px; background: var(--cds-btn-primary); color: var(--cds-btn-primary-ink); }
/* S1: the search takes the bar */
.bar.searching > :not(.bar-search) { display: none !important; }
.bar-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; background: #262626; border-bottom: 1px solid #8d8d8d; }
.bar-search #search {
  flex: 1 1 auto; min-width: 0; width: auto; height: 48px; margin: 0; padding: 0 8px; border: 0; border-radius: 0;
  background: transparent; color: var(--hd-ink); font: inherit; font-size: 16px;
}
.bar-search #search::placeholder { color: var(--hd-dim); }
.bar-search #search:focus { outline: none; }
.bar-search:focus-within { box-shadow: inset 0 -2px 0 #ffffff; }
.bar-search #search::-webkit-search-cancel-button { display: none; }
#tab-assets #flt-chips { padding-top: 12px; }
/* D1: the side panel */
.sheet.drawer, .sheet.acct { background: transparent; overflow: hidden; }
.drawer-scrim { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(0, 0, 0, .6); cursor: default; }
.drawer-panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(320px, 86vw); display: flex; flex-direction: column; overflow: hidden;
  background: var(--cds-layer-01); color: var(--md-on-surface); box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.drawer-head {
  flex: none; display: flex; align-items: center; gap: 12px; min-height: 64px;
  padding: max(8px, env(safe-area-inset-top)) 4px 8px 16px; border-bottom: 1px solid var(--md-outline-variant);
}
.app-mark { width: 40px; height: 40px; flex: none; display: block; }
.drawer-brand { flex: 1 1 auto; min-width: 0; }
.drawer-brand strong { font-size: 16px; line-height: 22px; font-weight: 600; }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.drawer-label { margin: 16px 16px 4px; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.drawer-cur {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 16px; margin: 0;
  border: 0; border-radius: 0; background: var(--cds-layer-selected); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.drawer-cur-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.drawer-cur .row-tag { white-space: normal; overflow-wrap: anywhere; }
.drawer-cur[aria-expanded="true"] .drawer-chev { transform: rotate(180deg); }
.prj-box { padding-bottom: 4px; border-bottom: 1px solid var(--md-outline-variant); }
.prj-box #prj-note { margin: 8px 16px; }
.drawer #prj-msg { margin: 4px 16px 0; min-height: 0; }
.drawer #prj-msg:empty { display: none; }
.drawer .prj-row { padding-left: 16px; padding-right: 16px; }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-item {
  width: 100%; min-height: 48px; display: flex; align-items: center; gap: 16px; padding: 0 16px; margin: 0;
  border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.drawer-item:active { background: var(--cds-layer-hover); }
.drawer-item-name { flex: 1 1 auto; min-width: 0; }
.drawer-val { flex: none; max-width: 48%; font-size: 12px; color: var(--md-on-surface-variant); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v0.198.0: clear the bar it scrolls under — the bar is the status-bar inset + 56 px (91 px on an S23), so a fixed 72 px left a side panel
   row's heading half under it */
#menu h3 { scroll-margin-top: calc(max(8px, env(safe-area-inset-top)) + 64px); }
/* V1: the account card */
.acct-card {
  position: absolute; left: 8px; right: 8px; top: max(8px, env(safe-area-inset-top)); max-height: calc(100% - 16px); overflow-y: auto;
  display: flex; flex-direction: column; padding-bottom: 8px; background: var(--cds-layer-01); color: var(--md-on-surface); box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.acct-top { display: flex; align-items: center; min-height: 56px; padding: 0 4px; }
.acct-title { flex: 1 1 auto; text-align: center; padding-right: 48px; font-size: 16px; line-height: 22px; font-weight: 600; }
.acct-who { display: flex; align-items: center; gap: 16px; padding: 8px 16px 16px; }
.acct-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-id .row-tag { white-space: normal; overflow-wrap: anywhere; }
.acct-id .small { overflow-wrap: anywhere; }
.acct .role-chip { align-self: flex-start; margin-top: 6px; border: 0; background: var(--cds-layer-selected); color: var(--md-on-surface); }
.acct-row {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin: 0;
  border: 0; border-top: 1px solid var(--md-outline-variant); border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left;
}
.acct-link { cursor: pointer; }
.acct-link:active { background: var(--cds-layer-hover); }
.acct-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-row #btn-cloud { flex: none; margin: 0; }
.acct-foot { display: flex; justify-content: flex-end; padding: 8px 16px 0; border-top: 1px solid var(--md-outline-variant); }

/* F63 (owner, 2026-10-16): the user guide (field/fieldhelp.js) — the list of pages, the search, and a page as guidemd.js draws it (gd-*) */
.help-wrap { padding-top: 8px; }
.help-find { width: 100%; box-sizing: border-box; margin: 0 0 4px; }
.help-find.hidden, .help-list.hidden { display: none; }
.help-list .drawer-label { margin: 16px 0 4px; }
.help-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--md-outline-variant); padding: 12px 0; color: var(--md-on-surface); font: inherit; }
.help-item:active { background: var(--cds-layer-hover); }
.help-item-title { font-size: 16px; line-height: 22px; }
.help-page { color: var(--md-on-surface); padding-bottom: 32px; }
.help-page .help-h1 { font-size: 24px; line-height: 30px; font-weight: 400; margin: 8px 0 14px; }
.help-page h2.gd-h { font-size: 18px; line-height: 24px; font-weight: 600; margin: 24px 0 6px; }
.help-page h3.gd-h { font-size: 16px; line-height: 22px; font-weight: 600; margin: 18px 0 4px; }
.help-page p, .help-page li { font-size: 15px; line-height: 23px; }
.help-page p { margin: 0 0 10px; }
.help-page ul, .help-page ol { margin: 0 0 12px; padding-left: 22px; }
.help-page li { margin: 0 0 4px; }
.help-page code, .help-page kbd { font-family: 'IBM Plex Mono', monospace; font-size: 13px; background: var(--md-surface-2); padding: 0 4px; }
.help-page a.gd-link { color: var(--md-primary); text-decoration: underline; }
.help-page .gd-fig { margin: 14px 0 16px; }
.help-page .gd-fig img { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; margin: 0 auto; border: 1px solid var(--md-outline-variant); }   /* a tall screenshot fits the screen */
.help-page .gd-fig figcaption { font-size: 13px; line-height: 18px; color: var(--md-on-surface-variant); margin-top: 6px; }
.help-page .gd-note { border-left: 3px solid var(--md-primary); background: var(--md-surface-2); padding: 10px 12px 2px; margin: 12px 0 14px; }
.help-page .gd-note.gd-warning { border-left-color: var(--md-error); }
.help-page .gd-note-kind { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--md-on-surface-variant); margin-bottom: 4px; }
.help-page .gd-table-wrap { overflow-x: auto; margin: 10px 0 14px; }
.help-page .gd-table { border-collapse: collapse; font-size: 14px; }
.help-page .gd-table th, .help-page .gd-table td { border-bottom: 1px solid var(--md-outline-variant); padding: 6px 10px 6px 0; text-align: left; vertical-align: top; }
.help-page .help-foot { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--md-outline-variant); }

/* =================================================================================================================================
 * F76 (the owner, 2026-10-21 — the phone on the brand, his DR1 SP1 TB1 GH1 LN1 IC1 SH1 TT1 on the canvas
 * https://claude.ai/artifact/Tey1HMpNCrwFMQHX9G5yxw): the phone's own pieces. The colours are the tokens at the top of this sheet; these
 * rules, of the same weight and later, win over the Carbon blocks above (v0.183.0's pattern). TT1: the titles stay Plex SemiBold.
 * ================================================================================================================================= */
/* --- DR1: the side panel's head — Deep Teal in both themes, the lock-up as drawn for dark grounds, FIELD under it ------------------- */
.drawer-head {
  align-items: flex-start; background: var(--brand-deep); color: #ffffff; border-bottom: 0;
  padding: max(16px, env(safe-area-inset-top)) 4px 12px 16px;
}
.drawer-head .line-x { color: #ffffff; }
.drawer-brand { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.drawer-lockup { display: block; width: 204px; max-width: 100%; height: auto; }
.drawer-field { padding-left: 2px; font-size: 12px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-band-dim); }
/* the chosen project's tracker: the chosen ground and Amber at its edge, the words in the text colour (AC1) */
.drawer .prj-row.chosen { background: var(--cds-layer-selected); box-shadow: inset 3px 0 0 var(--brand-amber); }
.drawer .prj-row.chosen .row-tag, .drawer .prj-row .row-side { color: var(--md-on-surface); }
/* …and the stacked lock-up above the sign-in form, the artwork for the theme's ground */
.si-brand { display: flex; justify-content: center; padding: 12px 0 20px; }
.si-brand img { display: block; width: 210px; height: auto; }
.si-brand .brand-light, html.theme-light .si-brand .brand-dark { display: none; }
html.theme-light .si-brand .brand-light { display: block; }

/* --- TB1: the open tab — Amber above it (the bar below), the chosen ground and the bold label --------------------------------------- */
.tab.active { background: var(--cds-layer-selected); }

/* --- GH1: a discipline's head is the brand's table head — Deep Teal, white words, the count in Plex Mono; the Status table's head too -- */
.grp > summary { background: var(--brand-deep); color: #ffffff; }
.grp > summary .grp-count { color: var(--brand-band-dim); font-family: "IBM Plex Mono", monospace; font-size: 13px; }
.st-table thead th { background: var(--brand-deep); color: #ffffff; font-weight: 600; border-bottom: 0; }

/* --- tags, SOR numbers and the stage counts in IBM Plex Mono (the PC's TY1 for tags) ----------------------------------------------- */
#tab-assets .row > .row-main > .row-tag, .line-head .row-tag, .sor-row .row-tag, #sor-title { font-family: "IBM Plex Mono", monospace; font-size: 15px; }
.row-tag .tag-chip { font-family: "IBM Plex Sans", Roboto, system-ui, sans-serif; }

/* --- LN1: a line's counted stages as blocks in their status colours (field.js stageStripEl, fieldstate.js stageStrip), then the count -- */
.row-side { display: flex; align-items: center; gap: 8px; }
.stg-strip { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.stg-strip:empty { display: none; }
.stg-b { width: 9px; height: 8px; box-sizing: border-box; border: 1px solid var(--stg-none); }
.stg-b.s-ok { background: var(--stg-ok); border-color: var(--stg-ok); }
.stg-b.s-active { background: var(--stg-active); border-color: var(--stg-active); }
.stg-b.s-idle { background: var(--stg-idle); border-color: var(--stg-idle); }
.stg-b.s-failed { background: var(--stg-failed); border-color: var(--stg-failed); }
.row-side .pill.stg-count {
  min-height: 0; padding: 0; background: none; box-shadow: none; color: var(--md-on-surface-variant);
  font-family: "IBM Plex Mono", monospace; font-size: 13px; line-height: 16px; letter-spacing: 0;
}

/* --- IC1: the opened line's icons — the five that DO in Teal, the five that SHOW in the text colour with Teal counts; the open one on the
       chosen ground with Amber under it, as the open tab ------------------------------------------------------------------------------ */
#detail .line-ico:is([data-sub="photo"], [data-sub="sor"], [data-sub="action"], [data-sub="checklist"], [data-sub="atp"]) { color: var(--md-primary); }
.line-ico.on { background: var(--cds-layer-selected); box-shadow: inset 0 -3px 0 var(--cds-border-interactive); }

/* --- SH1: the SOR's status as three steps in the Deep Teal head — the one it is at filled in its status colour — the response due under -- */
#sor .sheet-bar { flex-wrap: wrap; row-gap: 8px; }
.sor-steps { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 0 0 0 12px; }
.sor-step {
  min-height: 28px; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: 1px solid #6e8990; color: var(--brand-band-dim); font-size: 13px; line-height: 16px;
}
.sor-step.on { border: 0; color: #171d1f; font-weight: 600; }   /* Ink on the three hues 7.5:1 and more */
.sor-step.on.s-failed { background: #ff8a80; }
.sor-step.on.s-active { background: #6fb4ff; }
.sor-step.on.s-ok { background: #3fcf8e; }
.sor-due { flex: 1 1 100%; margin: 0; padding: 0 0 4px 12px; font-size: 13px; line-height: 18px; color: #ffc04d; }   /* 7.5:1 on Deep Teal */
.sor-due.overdue { color: #ff8a80; font-weight: 600; }
.sor-steps.hidden, .sor-due.hidden { display: none; }

/* --- AC1 elsewhere: what is on or chosen is Amber — the content switcher's segment (bold too, the cue on white), a switch that is on --- */
.seg { border-color: var(--cds-border-strong); }
.seg-btn.on { font-weight: 600; }
.obs-row input[type="checkbox"]:checked, .si-show input[type="checkbox"]:checked { background: var(--brand-amber); }
.obs-row input[type="checkbox"]:checked::before, .si-show input[type="checkbox"]:checked::before { background: #171d1f; }
/* the search over the Deep Teal bar: the bar's own colour, a line under it */
.bar-search { background: transparent; border-bottom: 1px solid var(--brand-band-dim); }
/* the 3D view's tools: pressed is Amber, its link and the section box's thumbs Teal (the model's and the status colours unchanged) */
.d3-tool[aria-pressed="true"] { background: var(--brand-amber); color: #171d1f; }
.d3-tool[aria-pressed="true"] svg.ic { fill: #171d1f; }
.d3-sec-head .btn.ghost { color: #136a7f; }
.d3-range input[type="range"]::-webkit-slider-thumb { background: #17788f; box-shadow: 0 0 0 1px #17788f; }
/* the light theme's notes on the brand's tints for Carbon's yellow 10 and blue 10 */
html.theme-light .held { background: #fff1d6; }
html.theme-light #outbox-note:not(:empty), html.theme-light .edit-bar { background: #e8f2f4; }
html.theme-sun .tab { color: #171d1f; }
html.theme-sun #tab-assets .row > .row-main > .row-tag, html.theme-sun .line-head .row-tag { font-size: 17px; line-height: 24px; }

/* =================================================================================================================================
 * F120 (the review of 0.288.0 on the phone — BUG-33, UX-25): what a field engineer meets on a small screen. Phone rules; the tablet's own
 * stay in the one block at this sheet's end.
 * ================================================================================================================================= */
/* --- BUG-33: the Assets list (and the Layouts tab) when the search or the filters leave nothing — said, Clear filters at the right edge -- */
.none-row { display: flex; align-items: center; gap: 12px; padding: 24px 16px; color: var(--md-on-surface-variant); line-height: 1.5; }
.none-row > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.none-row .btn { flex: none; margin-left: auto; }
#layouts-body .none-row { padding-left: 0; padding-right: 0; }   /* the tab's .pad gives its sides */
/* --- UX-25: the Outbox — "Nothing pending." beside Send now (it was at the screen's foot); a sent row's project and time ---------------- */
.ob-push { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.ob-empty { flex: 1 1 auto; min-width: 0; color: var(--md-on-surface-variant); }
.ob-push .btn { flex: none; margin-left: auto; min-width: 144px; }
.row-desc.sent-where { color: var(--md-on-surface-variant); }
/* --- UX-25: the 3D view's tools each with its word under its icon (they were icons only); a screen too short for six keeps the icons --- */
.d3-tool { flex-direction: column; gap: 2px; width: 56px; height: 52px; font: inherit; }   /* the words in IBM Plex, as the keys beside them */
.d3-tool-w { font-size: 12px; line-height: 14px; letter-spacing: .16px; white-space: nowrap; }
.d3-secbox { right: 80px; }   /* beside the wider tools */
@media (max-height: 640px) {
  .d3-tool { width: 44px; height: 44px; gap: 0; }
  .d3-tool-w { display: none; }
  .d3-secbox { right: 68px; }
}
/* --- UX-25: a legend's colour a short bar, never a square — a model's near-white colour inside its outline read as an unticked box ---- */
.d3-key i, .d3-chip i { width: 16px; height: 8px; border-radius: 4px; }
/* --- UX-25: the Filter sheet's boxes and sliders brand Teal on its white ground (they were the WebView's blue); every other native box,
       slider and bar the accent's button colour --------------------------------------------------------------------------------------- */
:root { accent-color: var(--cds-btn-primary); }
.d3-flt { accent-color: var(--brand-teal); }

/* F87 release 3 (v0.229.0, his PW1): THE PHONE'S WALKTHROUGH — the lit control (a hole in a dim layer that takes no taps, an Amber ring),
   its card under or over it (field/walkphone.js placePhoneCard), and the Walkthrough screen's six rows. Taps reach the app through the dim. */
.pw-hole { position: fixed; z-index: 9000; pointer-events: none; box-shadow: 0 0 0 2000px rgba(0, 0, 0, .58); outline: 2px solid var(--cds-border-interactive); outline-offset: 0; transition: left 160ms, top 160ms, width 160ms, height 160ms; }
.pw-card { position: fixed; z-index: 9001; box-sizing: border-box; background: var(--cds-layer-01); color: var(--md-on-surface); box-shadow: 0 12px 30px rgba(0, 0, 0, .55); padding: 12px 14px 6px; }
.pw-kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--md-primary); }
.pw-title { margin: 4px 0 6px; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 19px; line-height: 1.3; }
.pw-body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--md-on-surface-variant); }
.pw-do { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px; background: #3d2a00; color: #ffe2a8; font-size: 14px; line-height: 1.45; }
html.theme-light .pw-do { background: #fff1d6; color: #3d2a00; }
.pw-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--cds-support-warning); }
.pw-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; padding: 8px 0 4px; }
.pw-btn { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--md-primary); font: inherit; font-size: 14px; }
.pw-btn.s, .pw-btn.p { border: 1px solid var(--md-primary); }
.pw-btn.p { background: var(--md-primary); color: var(--md-surface); }
.pw-btn.pw-x { min-width: 44px; color: var(--md-on-surface-variant); }
.pw-list { margin: 8px 0 16px; }
.pw-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 4px; border-bottom: 1px solid var(--md-outline-variant); }
.pw-no { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--md-on-surface-variant); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--md-on-surface-variant); }
.pw-row.done .pw-no { background: var(--md-primary); border-color: var(--md-primary); color: var(--md-surface); }
.pw-row.now { box-shadow: inset 3px 0 0 var(--cds-border-interactive); }
.pw-row .pw-t { flex: 1 1 auto; min-width: 0; }
/* F100 PH1: a stage's planned dates under its name on the line page (late in red) */
.stg-plan { display: block; font-weight: 400; font-size: 12px; color: var(--md-on-surface-variant); margin-top: 2px; }
.stg-plan.late { color: var(--md-error); }
/* F107 release 2 (v0.264.0): A METHOD STATEMENT'S RUN — field/msrun.js (the PC's renderer/msrun.js) draws .msr-* as on the PC; a pass the
   success green, a fail the error red, a row behind an unsigned hold point dimmed; buttons the phone's own (.btn) and 44 px to touch */
.msr-pad-host { padding-bottom: 24px; }
.msr { display: flex; flex-direction: column; gap: 8px; color: var(--md-on-surface); }
.msr-head { padding-bottom: 8px; border-bottom: 1px solid var(--md-outline-variant); }
.msr-title { font-size: 17px; font-weight: 600; }
.msr-sub, .msr-s, .msr-dim, .msr-unit, .msr-th { font-size: 13px; color: var(--md-on-surface-variant); }
.msr-prog { font-size: 13px; margin-top: 4px; }
.msr-prog.ok, .msr-done-line.ok { color: var(--cds-support-success); }
.msr-prog.bad, .msr-done-line.bad { color: var(--md-error); }
.msr-try { padding: 8px 10px; font-size: 13px; background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.msr-body { display: flex; flex-direction: column; gap: 6px; }
.msr-sec { display: flex; align-items: center; gap: 8px; padding: 12px 0 4px; font-size: 16px; font-weight: 600; border-bottom: 2px solid var(--md-primary); }
.msr-sec.bad { border-bottom-color: var(--md-error); }
.msr-rep { border-bottom-style: dashed; }
.msr-inst { font-size: 13px; font-weight: 700; color: var(--md-primary); padding: 6px 0 0 10px; }
.msr-num { color: var(--md-primary); font-weight: 700; min-width: 26px; }
.msr-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px solid var(--md-outline-variant); background: var(--md-surface-container, var(--md-surface)); }
.msr-row.in { margin-left: 10px; }
.msr-row.static { background: transparent; border-style: dashed; }
.msr-row.tone-caution, .msr-row.tone-warning { background: var(--md-tertiary-container); }
.msr-row.ok { border-left: 4px solid var(--cds-support-success); }
.msr-row.bad { border-left: 4px solid var(--md-error); }
.msr-row.locked { opacity: .45; }
.msr-words { flex: 1 1 100%; min-width: 0; }
.msr-t { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.msr-ctl { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.msr-row > .msr-in, .msr-row > .msr-photo, .msr-row > .msr-need { flex: 1 1 100%; }
.msr-in { font: inherit; font-size: 15px; padding: 10px; border: 1px solid var(--md-outline); background: var(--md-surface); color: var(--md-on-surface); box-sizing: border-box; min-width: 0; min-height: 44px; }
textarea.msr-in { width: 100%; }
.msr-num-in { width: 120px; text-align: right; }
.msr-num-in.ok { border-color: var(--cds-support-success); }
.msr-num-in.bad { border-color: var(--md-error); color: var(--md-error); }
.msr-calc { font-size: 17px; font-weight: 700; }
.msr-seg { display: flex; flex: 1 1 100%; border: 1px solid var(--md-outline); }
.msr-seg-b { flex: 1 1 0; font: inherit; font-size: 15px; min-height: 44px; background: var(--md-surface); color: var(--md-on-surface); border: 0; border-left: 1px solid var(--md-outline); }
.msr-seg-b:first-child { border-left: 0; }
.msr-seg-b.on { background: var(--md-primary-container); color: var(--md-on-surface); font-weight: 700; }
.msr-seg-b.on.ok { background: var(--cds-support-success); color: var(--md-surface); }
html.theme-light .msr-seg-b.on.ok { background: #00703f; }   /* light: the deep green, light text 5.6:1 (the theme's #00aa6b reads 2.9:1) */   /* the ground as text — 4.5:1 or more on both themes */
.msr-seg-b.on.bad { background: var(--md-error); color: var(--md-surface); }
.msr-badge { font-size: 13px; padding: 4px 8px; border: 1px solid var(--md-outline-variant); }
.msr-badge.ok { border-color: var(--cds-support-success); color: var(--cds-support-success); }
.msr-badge.bad { border-color: var(--md-error); color: var(--md-error); }
.msr-list { margin: 4px 0 0; padding-left: 20px; font-size: 13px; }
.msr-grid { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; font-size: 13px; margin-top: 4px; }
.msr-table { display: grid; gap: 6px; margin-top: 8px; align-items: center; max-width: 520px; }
.msr-table .msr-num-in { width: 100%; }
.msr-items { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.msr-photo { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.msr-need { font-size: 13px; color: var(--md-tertiary); }
.msr-signer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; }
.msr-signer > .msr-in { flex: 1 1 160px; }
.msr-pad { width: 100%; height: 110px; background: #ffffff; border: 1px dashed var(--md-outline); touch-action: none; }
.msr-sigimg { height: 44px; background: #ffffff; }
.msr-link { font: inherit; font-size: 14px; background: transparent; border: 0; color: var(--md-primary); text-decoration: underline; min-height: 44px; }
.msr-add { align-self: flex-start; margin-left: 10px; }
.msr-break { border-top: 1px dashed var(--md-outline); margin: 6px 0; }
.msr-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--md-outline-variant); }
.msr-foot > .grow { flex: 1 1 auto; }
.msr-missing { flex: 1 1 100%; font-size: 13px; color: var(--md-tertiary); }
.msr-missing ul { margin: 4px 0 0; padding-left: 20px; color: var(--md-on-surface-variant); }
.msr-done-line { flex: 1 1 100%; font-size: 14px; }
.msr-stage { margin-top: 10px; padding: 12px; border: 1px solid var(--cds-support-success); display: flex; flex-direction: column; gap: 8px; }
.msr-stage-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* F113 (v0.274.0): the AI helpers — a draft HELD on a dashed amber edge until it is used; hold to speak; a checklist value read
   from a nameplate marked until confirmed */
:root { --ai-mark: #ffb020; --ai-soft: rgba(255, 176, 32, .12); }
html.theme-light { --ai-mark: #8a5600; --ai-soft: rgba(138, 86, 0, .08); }
.ai-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 8px 0 0; }
.ai-row .btn { min-height: 44px; }
.ai-host:empty { display: none; }
.ai-host { margin: 8px 0; }
.ai-draft { border: 2px dashed var(--ai-mark); background: var(--ai-soft); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ai-draft-head { display: flex; align-items: center; gap: 8px; }
.ai-draft-title { flex: 1 1 auto; min-width: 0; color: var(--ai-mark); font-weight: 700; font-size: 13px; }
.ai-draft-text { width: 100%; box-sizing: border-box; font: inherit; border: 1px solid transparent; background: transparent; color: inherit; resize: vertical; }
.ai-draft-text:not([readonly]) { border-color: var(--md-outline, #8d8d8d); background: var(--md-surface, #fff); }
.ai-why { margin: 0; padding-left: 18px; font-size: 12.5px; opacity: .85; }
.ai-draft-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ai-draft-foot .btn { min-height: 44px; }
/* v0.284.0 (F117 X1): the held draft field by field */
.ai-frow { display: grid; gap: 4px; padding: 4px 0; }
.ai-ftop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.ai-ftop input { width: 22px; height: 22px; }
.ai-fkey { font-weight: 600; }
.ai-src { font-size: 12px; opacity: .8; border: 1px solid var(--md-outline-variant, #c4c7c5); padding: 0 5px; }
.ai-fval { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 8px; }
.ai-frow.off .ai-fval, .ai-frow.off .ai-fkey { opacity: .5; }
.ai-notshown { font-size: 12.5px; opacity: .7; }
.ai-alert { color: #da1e28; border-left: 3px solid #da1e28; padding: 4px 8px; font-weight: 600; }
.ai-busy, .ai-said { font-size: 13px; padding: 6px 0; }
.ai-busy { color: var(--ai-mark); }
.ai-mic.on { background: var(--ai-mark); color: #161616; }
html.theme-light .ai-mic.on { color: #fff; }
.ai-mic { touch-action: none; user-select: none; -webkit-user-select: none; }
/* v0.290.0 (F121 AI-16): a press's typical cost under its row of buttons, and Already raised?'s line in the SOR form */
.ai-cost { flex: 1 1 100%; margin: 0; text-align: right; font-size: 12px; color: var(--md-on-surface-variant); }
.ai-cost:empty { display: none; }
.ai-cost.ai-cost-left { text-align: left; margin: 4px 0 0; }
/* v0.290.0 (F121 AI-34): Already raised? at Queue SOR — each SOR that reads the same, with Open it at the right edge */
.ai-same { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.ai-same-words { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.ai-same .btn { flex: none; min-height: 44px; }
li.cl-ai-read input { border: 1px dashed var(--ai-mark) !important; background: var(--ai-soft); }
.cl-ai-ok { min-height: 44px; margin-left: 6px; }

/* F129 (2026-10-30, PH1): an item's review on the phone, top to bottom — done green, the step waiting amber, the rest grey; read only
 * (field/reviews.js wfTimeline over field/wfmodel.js progressOf). */
.wf-tl { margin: 8px 0 4px; display: flex; flex-direction: column; }
.wf-tl-step { display: flex; gap: 12px; }
.wf-tl-rail { display: flex; flex-direction: column; align-items: center; width: 24px; flex: none; }
.wf-tl-dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; box-sizing: border-box; border: 2px solid var(--cds-border-strong); color: var(--md-on-surface-variant); flex: none; }
.wf-tl-bar { width: 2px; flex: 1 1 auto; min-height: 14px; background: var(--cds-border-strong); }
.wf-tl-body { flex: 1 1 auto; min-width: 0; padding-bottom: 14px; display: flex; flex-direction: column; gap: 3px; }
.wf-tl-step.done .wf-tl-dot { background: var(--cds-support-success); border-color: var(--cds-support-success); color: #fff; }
.wf-tl-step.done .wf-tl-bar { background: var(--cds-support-success); }
.wf-tl-step.now .wf-tl-dot { border-color: var(--cds-support-warning); color: var(--cds-support-warning); }
.wf-tl-step.later, .wf-tl-step.skip { opacity: .6; }
.wf-tl-step.bad .wf-tl-dot { border-color: var(--cds-support-error); color: var(--cds-support-error); }
.wf-tl-part { border-left: 3px solid var(--cds-border-strong); padding: 4px 0 4px 10px; display: flex; flex-direction: column; gap: 2px; }
.wf-tl-part.done { border-left-color: var(--cds-support-success); }
.wf-tl-part.now { border-left-color: var(--cds-support-warning); background: var(--cds-layer-selected); }
.wf-tl-part.skip { opacity: .6; }
.wf-tl-ok { color: var(--cds-ok-text); }
.wf-tl-wait { color: var(--cds-support-warning); }
.wf-tl-bad { color: var(--cds-support-error); }

/* F126 release 3 (v0.304.0, PH1): a stage a room can start now (its stage flow) */
.stg-can { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--md-primary, #137c8a); }

/* F132 RM1 (his "The rooms are only selectable by their tags"): a room's pin over the 3D view — its status dot, its number and name; the
   selected one dark with an amber rim (RM3). TS1: Select off — the button white with a red stroke. */
/* F134: a room's tag in the PC's look (Room indicators › Format…) — its colour and ink set from the phone copy; pin / circle / square / tag;
   small / standard / large; the tapped one an amber rim */
.d3-room-pin { position: absolute; display: inline-flex; flex-direction: column; align-items: center; min-height: 24px; padding: 2px 7px; border: 1.5px solid transparent;
  border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); font: 700 13px/1.25 Verdana, Geneva, sans-serif; white-space: nowrap; pointer-events: auto; cursor: pointer; }
.d3-room-pin .rp-1 { display: block; }
.d3-room-pin .rp-2 { display: block; font-weight: 400; font-size: .9em; }
.d3-room-pin.rp-small { font-size: 12px; }
.d3-room-pin.rp-large { font-size: 15px; padding: 3px 9px; }
.d3-room-pin.rp-pin::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--pin, #0e3a46); }
.d3-room-pin.rp-circle { border-radius: 14px; }
.d3-room-pin.rp-square { border-radius: 0; }
.d3-room-pin.sel { border: 3px solid #f2b134; z-index: 2; }
.d3-tool.sel-off { box-shadow: inset 0 0 0 2px #b13b00; }
.d3-tool.sel-off .ic { opacity: .55; }

/* =================================================================================================================================
 * F79 (2026-10-21, the owner: "based on the latest UI guidelines, start developing the android tablet app") — THE TABLET.
 * One app (Android's large-screen guidance): formboot.js puts the form on <html> from Material 3's window size classes —
 *   rail (600–839 dp wide, 480 dp tall or more): the tabs become a navigation rail down the left edge; forms and settings float as dialogs;
 *   two  (840 dp and wider): the rail, and the Assets tab in TWO PANES (M3's list-detail) — the list left, the open line in its own pane.
 * On the brand guidelines 1.2 (Screens): Ink / Mist grounds, the Deep Teal bar, "Teal acts, Amber marks" (the open tab and the open line's
 * row marked Amber on the chosen ground), the logo leading the bar — the mark alone under 1200 dp, the lock-up from 1200 dp; IBM Plex kept.
 * A phone is untouched: every rule below is under html[data-form="rail"] or html[data-form="two"], except the three hidden at its head.
 * ================================================================================================================================= */
.bar-mark, .bar-lockup, .line-pane { display: none; }
html:is([data-form="rail"], [data-form="two"]) { --rail-w: 88px; }

/* --- the logo leads the bar ---------------------------------------------------------------------------------------------------------- */
html:is([data-form="rail"], [data-form="two"]) .bar-mark { display: block; flex: none; width: 28px; height: 28px; margin: 0 8px 0 6px; }
@media (min-width: 1200px) {
  html:is([data-form="rail"], [data-form="two"]) .bar-mark { display: none; }
  html:is([data-form="rail"], [data-form="two"]) .bar-lockup { display: block; flex: none; width: auto; height: 36px; margin: 0 16px 0 6px; }
}
html:is([data-form="rail"], [data-form="two"]) .bar-title { border-left: 1px solid var(--hd-line, rgba(255, 255, 255, .2)); padding-left: 16px; }

/* --- the navigation rail ------------------------------------------------------------------------------------------------------------- */
html:is([data-form="rail"], [data-form="two"]) .tabs {
  top: var(--bar-h, 64px); bottom: 0; left: 0; right: auto; width: var(--rail-w);
  flex-direction: column; justify-content: flex-start; gap: 4px; padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  border-top: 0; border-right: 1px solid var(--md-outline-variant); overflow-y: auto;
}
html:is([data-form="rail"], [data-form="two"]) .tab { flex: none; min-height: 72px; padding: 12px 4px 10px; gap: 4px; }
html:is([data-form="rail"], [data-form="two"]) .tab svg.ic { width: 24px; height: 24px; }
html:is([data-form="rail"], [data-form="two"]) .tab.active::before { top: 0; bottom: 0; left: 0; width: 3px; height: auto; transform: none; }
html:is([data-form="rail"], [data-form="two"]) .tab > .pill { top: 8px; margin-left: 6px; }
html.theme-light:is([data-form="rail"], [data-form="two"]) .tab.active { color: #8a5600; }   /* Amber 100+ — a marked word on light (6.2:1) */
html:is([data-form="rail"], [data-form="two"]) .pane { margin-left: var(--rail-w); padding-bottom: 24px; }
html:is([data-form="rail"], [data-form="two"]) .pad { padding-bottom: 32px; }
html:is([data-form="rail"], [data-form="two"]) .toast {
  left: calc(var(--rail-w) + 24px); right: auto; width: min(560px, calc(100% - var(--rail-w) - 48px)); bottom: max(24px, env(safe-area-inset-bottom));
}
/* the other tabs: one readable column (M3 on large screens — a line of text no wider than it reads) */
html:is([data-form="rail"], [data-form="two"]) :is(#tab-status, #tab-reviews, #tab-layouts, #tab-outbox) > .pad { max-width: 880px; margin: 0 auto; }
/* the account card under the initials, not across the screen */
html:is([data-form="rail"], [data-form="two"]) .acct-card { left: auto; right: 12px; width: 400px; }

/* --- the forms and settings float as dialogs over a scrim (field.js DIALOG_SHEETS: SOR, checklist, Sync & settings, sign in, the guide) - */
html:is([data-form="rail"], [data-form="two"]) .sheet.dlg {
  inset: 0; margin: auto; width: min(720px, calc(100% - 48px)); height: fit-content; max-height: calc(100% - 64px);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .62), 0 12px 32px rgba(0, 0, 0, .45); outline: 1px solid var(--md-outline-variant);
  overscroll-behavior: contain;
}
/* a tap outside the dialog lands on this (the sheet's own), and field.js reads it as Back */
html:is([data-form="rail"], [data-form="two"]) .sheet.dlg::before { content: ''; position: fixed; inset: 0; z-index: -1; }
html:is([data-form="rail"], [data-form="two"]) .sheet.dlg .sheet-bar { padding-top: 8px; }
html:is([data-form="rail"], [data-form="two"]) #help.sheet.dlg { width: min(880px, calc(100% - 48px)); height: calc(100% - 64px); }   /* the guide reads at its own height */

/* --- two panes: the list, and the open line beside it -------------------------------------------------------------------------------- */
html[data-form="two"] { --list-w: clamp(320px, 36vw, 440px); }
html[data-form="two"] #tab-assets {
  width: var(--list-w); box-sizing: border-box; min-height: calc(100vh - var(--bar-h, 64px)); border-right: 1px solid var(--md-outline-variant);
}
html[data-form="two"] .line-pane {
  display: block; position: fixed; top: var(--bar-h, 64px); bottom: 0; right: 0; left: calc(var(--rail-w) + var(--list-w));
  overflow-y: auto; overscroll-behavior: contain; background: var(--md-surface);
  contain: layout;   /* the containing block of the SOR's and the action's forms (.line-sub.form-full is position: fixed) — they fill the pane */
}
html[data-form="two"] #line-pane:has(.line-sub.form-full:not(.hidden)) { overflow: hidden; }
html[data-form="two"] #line-pane > .line-open { border-left: 0; border-bottom: 0; min-height: 100%; }
html[data-form="two"] #line-pane .line-top { top: 0; }
html[data-form="two"] #line-pane .line-head svg.ic[data-ic="up"] { display: none; }   /* the ✕ closes it here; the list beside it stays */
html[data-form="two"] #line-pane .line-strip { justify-content: flex-start; gap: 8px; padding: 4px 16px 12px; }
html[data-form="two"] #line-pane .line-ico { flex: none; width: 48px; height: 48px; }
html[data-form="two"] #line-pane .line-sep { margin: 0 4px; }
html[data-form="two"] #line-pane .line-sub { padding-left: 24px; padding-right: 24px; }
html[data-form="two"] #line-pane .line-sub.form-full .line-sub-head,
html[data-form="two"] #line-pane .line-sub.form-full .form-foot { margin-left: -24px; margin-right: -24px; }
html[data-form="two"] #line-pane .line-sub.form-full .line-sub-head { padding-top: 8px; }
/* the line open in the pane: its row in the list marked — the chosen ground, Amber at its left edge, the tag bold */
html[data-form="two"] #asset-list .row.line-sel { background: var(--cds-layer-selected); box-shadow: inset 3px 0 0 var(--cds-border-interactive); }
html[data-form="two"] #asset-list .row.line-sel .row-tag { font-weight: 700; }
/* before a line is opened: the brand's stacked lock-up and a line of words */
html[data-form="two"] .line-pane-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  min-height: 100%; box-sizing: border-box; padding: 32px; text-align: center;
}
html[data-form="two"] .line-pane-empty img { width: 210px; height: auto; }
html[data-form="two"] .line-pane-empty .brand-light, html.theme-light[data-form="two"] .line-pane-empty .brand-dark { display: none; }
html.theme-light[data-form="two"] .line-pane-empty .brand-light { display: block; }
html[data-form="two"] #line-pane:has(> #detail:not(.hidden)) > .line-pane-empty { display: none; }