/* StartupSend: every color is a token; light and dark both ship. --brand is the signed-in company's own color,
   set from its settings, so buttons, links, progress and the brand chip wear that company's look. The shell around it
   is StartupSend's own (public/brand/brand.md): steel greys, Barlow Semi Condensed for headings and labels, machined
   corners, opaque bars, and the gauge's signal orange used only as a marker (the current tab, the logo's needle).
   Phones keep 16 px side gutters, 44 px targets and one bottom tab bar. */
@font-face { font-family: "Inter Var"; src: url("/site/fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow SC"; src: url("/site/fonts/barlow-semi-condensed-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow SC"; src: url("/site/fonts/barlow-semi-condensed-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --brand: #1f4e79; --brand-ink: #fff; --accent: var(--brand); --on-accent: var(--brand-ink);
  --bg: #f3f5f8; --panel: #fff; --sunk: #eef1f5; --fg: #0f1a27; --fg2: #2a3747; --mute: #536173; --faint: #8a95a5; --line: #dde2e9; --line2: #e9edf2;
  --good: #17733f; --good-soft: rgba(23,115,63,.1); --bad: #b42318; --bad-soft: rgba(180,35,24,.09); --warn: #b7791f; --warn-soft: rgba(229,161,23,.15);
  --info: #2557c7; --info-soft: rgba(37,87,199,.09); --shadow: 0 1px 2px rgba(15,26,39,.06), 0 1px 1px rgba(15,26,39,.03); --shadow-lg: 0 24px 60px rgba(15,26,39,.22);
  --glass: #fff; --needle: #f26b1f; --logo-l: block; --logo-d: none; --scrim: rgba(10,16,24,.45);
  --r: 12px; --r-sm: 8px; --r-xs: 6px;
  --font: "Inter Var", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Barlow SC", "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  /* scales: space, type, elevation; the phone tab bar's height */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  --t-xs: 12px; --t-sm: 13px; --t-base: 15px; --t-md: 16.5px; --t-lg: 19px; --t-xl: 24px; --t-2xl: 30px;
  --e1: var(--shadow); --e2: 0 2px 10px rgba(15,26,39,.08); --e3: var(--shadow-lg);
  --tab-h: 64px; --gutter: 24px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) {
  --bg: #0a1018; --panel: #111a26; --sunk: #172130; --fg: #eef2f7; --fg2: #c9d2dd; --mute: #a3afbf; --faint: #6b788b; --line: #253244; --line2: #1c2735;
  --good: #48cf8b; --good-soft: rgba(72,207,139,.13); --bad: #ff7b6e; --bad-soft: rgba(255,123,110,.12); --warn: #f2b84b; --warn-soft: rgba(242,184,75,.13);
  --info: #8aa8ff; --info-soft: rgba(138,168,255,.13); --shadow: 0 1px 2px rgba(0,0,0,.45); --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --glass: #111a26; --needle: #ff8040; --logo-l: none; --logo-d: block; --scrim: rgba(0,0,0,.6); --e2: 0 2px 10px rgba(0,0,0,.4); color-scheme: dark; } }
:root[data-theme=dark] {
  --bg: #0a1018; --panel: #111a26; --sunk: #172130; --fg: #eef2f7; --fg2: #c9d2dd; --mute: #a3afbf; --faint: #6b788b; --line: #253244; --line2: #1c2735;
  --good: #48cf8b; --good-soft: rgba(72,207,139,.13); --bad: #ff7b6e; --bad-soft: rgba(255,123,110,.12); --warn: #f2b84b; --warn-soft: rgba(242,184,75,.13);
  --info: #8aa8ff; --info-soft: rgba(138,168,255,.13); --shadow: 0 1px 2px rgba(0,0,0,.45); --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --glass: #111a26; --needle: #ff8040; --logo-l: none; --logo-d: block; --scrim: rgba(0,0,0,.6); --e2: 0 2px 10px rgba(0,0,0,.4); color-scheme: dark;
}
/* In dark mode the brand color is lifted so it stays readable as text and focus. */
:root[data-theme=dark] { --accent: var(--brand-dark, var(--brand)); --on-accent: var(--brand-dark-ink, #fff); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --accent: var(--brand-dark, var(--brand)); --on-accent: var(--brand-dark-ink, #fff); } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--t-base)/1.5 var(--font); min-height: 100vh; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: var(--accent); }
h1, h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: 0; }
h1 { font-size: var(--t-2xl); line-height: 1.1; margin: 0; text-wrap: balance; }
h2 { font-size: var(--t-lg); line-height: 1.2; margin: 0; }
h3 { font-size: var(--t-base); margin: 0; }
.mute { color: var(--mute); }
.small { font-size: var(--t-sm); }
.grow { flex: 1; min-width: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--panel); padding: 8px 12px; border-radius: var(--r-sm); z-index: 50; }
.skip:focus { left: 8px; }
/* B12 (B17): the equipment table (canvas grid) shows where the keyboard is, like every other control */
.ms-grid-sc:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* StartupSend's mark is its brand files (public/brand/): the light one on light grounds, the dark one on dark */
.ss-mark { display: inline-grid; width: 32px; height: 32px; flex: none; }
.ss-mark img { grid-area: 1 / 1; width: 100%; height: 100%; }
.ss-l { display: var(--logo-l, block); }
.ss-d { display: var(--logo-d, none); }

/* top bar: opaque, one line, the company's chip or logo and its name */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s2); min-height: 60px; padding: 0 var(--s5); padding-top: env(safe-area-inset-top);
  background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--fg); text-decoration: none; min-width: 0; }
.logo-box { display: grid; place-items: center; height: 32px; min-width: 32px; color: var(--brand); flex: none; }
.logo-box img { max-height: 32px; max-width: 120px; object-fit: contain; display: block; }
.mark { width: 30px; height: 30px; }
.co-chip { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--brand); color: var(--brand-ink); font: 700 14px/1 var(--font-head); letter-spacing: .04em; }
.logo-box.on-brand { background: var(--brand); border-radius: var(--r-sm); padding: 4px 8px; }
.logo-box.on-brand img { max-height: 24px; }
.logo-drop.on-brand { background: var(--brand); color: var(--brand-ink); }
.brand-name { font: 700 19px/1.1 var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.tabs { display: flex; align-self: stretch; gap: 2px; margin-left: var(--s5); }
.tabs a { position: relative; display: flex; align-items: center; padding: 0 12px; text-decoration: none; color: var(--mute); font: 600 16.5px/1 var(--font-head); letter-spacing: .01em; }
.tabs a:hover { color: var(--fg); }
.tabs a[aria-current=page] { color: var(--fg); }
.tabs a[aria-current=page]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 2px 2px 0 0; background: var(--needle); }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--mute); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--sunk); color: var(--fg); }
.icon-btn svg { width: 20px; height: 20px; }
.save { font-size: 12.5px; font-weight: 600; color: var(--mute); width: 120px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save.busy { color: var(--warn); }
.save.off { color: var(--bad); }
.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: 48px; z-index: 30; display: flex; flex-direction: column; min-width: 240px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--e3); }
.menu-list > button, .menu-list .smcp-inline { display: flex; align-items: center; min-height: 44px; text-align: left; border: 0; background: none; padding: 0 12px; border-radius: var(--r-sm); font: 500 15px var(--font); color: var(--fg); width: 100%; cursor: pointer; }
.menu-list > button:hover, .menu-list .smcp-inline:hover { background: var(--sunk); }
.menu-list .menu-theme { display: none; }
.who { padding: 8px 12px 10px; font-size: var(--t-sm); color: var(--mute); overflow-wrap: anywhere; border-bottom: 1px solid var(--line2); margin-bottom: 4px; }
/* the phone's tab bar: opaque, equal tabs, the current one marked like a gauge pointer */
.bottom-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding: 0 var(--s2) env(safe-area-inset-bottom);
  background: var(--panel); border-top: 1px solid var(--line); }
.bottom-tabs a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; text-decoration: none; color: var(--mute); font: 600 12px/1 var(--font); letter-spacing: .01em; }
.bottom-tabs a svg { width: 24px; height: 24px; }
.bottom-tabs a[aria-current=page] { color: var(--fg); }
.bottom-tabs a[aria-current=page]::before { content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 0 0 2px 2px; background: var(--needle); }
.bottom-tabs a[aria-current=page] svg { color: var(--accent); }

/* page */
.page { max-width: 1240px; margin: 0 auto; padding: var(--s6) var(--gutter) 80px; outline: none; }
.page.wide { max-width: none; }
.head { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }
.head .sub { color: var(--mute); margin-top: 4px; }
.crumbs { font-size: var(--t-sm); color: var(--mute); margin-bottom: 6px; }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.gap-y { margin-bottom: var(--s3); }
.gap-top { margin-top: var(--s4); }
.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.stack { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--e1); }
.pad { padding: var(--s4); }
.card > .card-h { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px var(--s4); border-bottom: 1px solid var(--line2); }
.empty { text-align: center; padding: var(--s12) var(--s4); color: var(--mute); }
/* an empty state carries the gauge, quietly */
.empty::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto var(--s3); background: var(--faint); opacity: .55; -webkit-mask: url("/brand/startupsend-mark-one-color.svg") center / contain no-repeat; mask: url("/brand/startupsend-mark-one-color.svg") center / contain no-repeat; }
.empty h2 { color: var(--fg); margin-bottom: 6px; }

/* buttons and inputs: machined corners, signage letters */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: 600 16px/1 var(--font-head); letter-spacing: .01em; border-radius: var(--r-sm); padding: 0 16px; height: 40px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--faint); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn.good { background: var(--good); border-color: var(--good); color: #fff; }
.btn.danger { color: var(--bad); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { height: 34px; padding: 0 12px; font-size: 15px; }
.btn.lg { height: 48px; padding: 0 22px; font-size: 18px; }
.btn svg { width: 17px; height: 17px; flex: none; }
label.f { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--fg2); min-width: 0; }
.in, .f input, .f select, .f textarea { width: 100%; min-width: 0; height: 42px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: 400 var(--t-base) var(--font); }
.f textarea, textarea.in { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.in:focus, .f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
input[type=color] { padding: 2px; width: 48px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); }
.search { position: relative; }
.search.grow { flex: 1 1 180px; }
.search input { padding-left: 36px; }
.search svg { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--mute); pointer-events: none; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--sunk); border: 1px solid var(--line); gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; color: var(--mute); font: 600 15px/1 var(--font-head); letter-spacing: .01em; height: 34px; padding: 0 14px; border-radius: 7px; cursor: pointer; }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed=true] { background: var(--panel); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); font: 600 13.5px var(--font); color: var(--fg); cursor: pointer; }
.chip[aria-pressed=true] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chip .n { color: var(--mute); font-weight: 600; }

/* status tags: small inspection tags, the same words as the PDF */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 5px; font: 600 12.5px/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: var(--sunk); color: var(--mute); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.st-open { background: var(--sunk); color: var(--mute); }
.st-progress { background: var(--info-soft); color: var(--info); }
.st-review { background: var(--warn-soft); color: var(--warn); }
.st-returned { background: var(--bad-soft); color: var(--bad); }
.st-approved { background: var(--good-soft); color: var(--good); }
.st-sent { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
.bar { height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; width: 0; transition: width .25s; }
.strip { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); padding: 14px var(--s4); }
.strip div { display: grid; }
.strip b { font: 700 24px/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.strip span { font-size: var(--t-xs); color: var(--mute); }

/* lists */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 10px var(--s4); border-top: 1px solid var(--line2); min-width: 0; }
.list > li:first-child { border-top: 0; }
.list > li.click { cursor: pointer; }
.list > li.click:hover { background: var(--sunk); }
.list .t { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .d { font-size: var(--t-sm); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .main { flex: 1; min-width: 0; display: grid; }
.cb { width: 22px; height: 22px; accent-color: var(--accent); flex: none; cursor: pointer; }
.group-h { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px var(--s4); background: var(--sunk); border-top: 1px solid var(--line2); font: 600 16px/1.2 var(--font-head); letter-spacing: .01em; }
.group-h:first-child { border-top: 0; border-radius: var(--r) var(--r) 0 0; }

/* project cards */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s3); }
.pcard { display: grid; gap: 10px; padding: 18px; text-decoration: none; color: var(--fg); }
.pcard:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pcard .t { font: 700 20px/1.15 var(--font-head); }
.pcard .meta { font-size: var(--t-sm); color: var(--mute); }

/* sub tabs inside a page */
.subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--s4); overflow-x: auto; scrollbar-width: none; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs a { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; color: var(--mute); text-decoration: none; font: 600 16.5px/1 var(--font-head); letter-spacing: .01em; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subtabs a:hover { color: var(--fg); }
.subtabs a[aria-current=page] { color: var(--fg); border-color: var(--accent); }

/* action bar for selected rows */
.actionbar { position: sticky; bottom: 12px; z-index: 15; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: 10px 14px; margin-top: var(--s3); border-radius: 14px; background: var(--fg); color: var(--bg); box-shadow: var(--e3); }
.actionbar .btn { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 30%, transparent); }
.actionbar .btn.primary { background: var(--bg); color: var(--fg); border-color: var(--bg); }

/* the field form */
.form { display: grid; gap: var(--s4); max-width: 920px; margin: 0 auto; }
.form .sec { padding: 0; }
.sec > h2 { padding: 14px var(--s4); border-bottom: 1px solid var(--line2); font-size: 18px; display: flex; align-items: center; gap: 8px; }
.sec .body { padding: var(--s4); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px var(--s4); }
.fgrid .wide { grid-column: 1 / -1; }
.unit-in { position: relative; }
.unit-in input { padding-right: 56px; }
.unit-in .u { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: var(--t-sm); color: var(--mute); pointer-events: none; }
.yn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line2); }
.yn:first-child { border-top: 0; padding-top: 0; }
.yn .seg button { min-width: 54px; }
.yn .seg button[aria-pressed=true][data-v=Yes] { background: var(--good); color: #fff; }
.yn .seg button[aria-pressed=true][data-v=No] { background: var(--bad); color: #fff; }
.yn .seg button[aria-pressed=true][data-v="N/A"] { background: var(--mute); color: var(--panel); }
table.mt { width: 100%; border-collapse: collapse; }
table.mt th { text-align: left; font: 600 13px/1.2 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 0 6px 8px; }
table.mt td { padding: 5px 6px; border-top: 1px solid var(--line2); vertical-align: middle; }
table.mt td:first-child { font-size: 14px; padding-left: 0; }
table.mt td input { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: 400 var(--t-base) var(--font); }
table.mt td input:focus { outline: none; border-color: var(--accent); }
table.mt .u { font-size: var(--t-xs); color: var(--mute); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.photos figure { margin: 0; position: relative; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 1; background: var(--sunk); }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos .x { position: absolute; top: 5px; right: 5px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; }
.add-photo { display: grid; place-items: center; aspect-ratio: 1; border: 2px dashed var(--line); border-radius: var(--r-sm); color: var(--mute); cursor: pointer; font-weight: 650; font-size: var(--t-sm); text-align: center; padding: 8px; }
.add-photo svg { width: 28px; height: 28px; }
.add-photo:hover { border-color: var(--accent); color: var(--accent); }
.sigpad { width: 100%; height: 160px; border: 1px dashed var(--faint); border-radius: var(--r-sm); background: #fff; touch-action: none; display: block; }
.sig-img { max-height: 90px; background: #fff; border-radius: var(--r-sm); border: 1px solid var(--line); padding: 4px; }
.unit-head { display: grid; gap: var(--s3); padding: var(--s4); }
.unit-head .fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sticky-actions { position: sticky; bottom: 0; z-index: 12; display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; padding: 10px var(--s4); padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid var(--line); margin: 0 calc(-1 * var(--gutter)) -80px; }
.note-box { padding: 10px 14px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.tip { padding: 10px 14px; border-radius: 10px; background: var(--info-soft); color: var(--fg); font-size: 14px; }

/* the equipment table */
.gridwrap { height: calc(100vh - 290px); min-height: 380px; }

/* template editor */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--s4); align-items: start; }
.blocks { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.block { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--e1); }
.block.drag-over { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.block.dragging { opacity: .45; }
.block-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; }
.handle { cursor: grab; color: var(--faint); display: grid; place-items: center; width: 26px; height: 30px; border-radius: 6px; flex: none; touch-action: none; }
.handle:hover { background: var(--sunk); color: var(--fg); }
.handle svg { width: 16px; height: 16px; }
.block-h .ttl { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kind { font-size: 11.5px; font-weight: 650; color: var(--mute); background: var(--sunk); padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.block-b { padding: 4px 12px 12px; border-top: 1px solid var(--line2); display: grid; gap: 10px; }
.frow { display: grid; grid-template-columns: 26px minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, .8fr) auto; gap: 6px; align-items: center; padding: 4px; border-radius: 10px; }
.frow.drag-over { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.frow .in { height: 36px; font-size: 14px; }
.frow .opts { grid-column: 2 / -1; }
.palette { display: flex; flex-wrap: wrap; gap: 6px; }
.preview { position: sticky; top: 76px; max-height: calc(100vh - 90px); overflow: auto; }
.preview .form { gap: 10px; }
.preview .sec .body { padding: 10px 12px; }
.mini { transform-origin: top left; }

/* toasts and dialogs */
.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(460px, calc(100vw - 32px)); }
.toast { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border-radius: var(--r); background: var(--fg); color: var(--bg); box-shadow: var(--e3); font-weight: 550; }
.toast.bad { background: var(--bad); color: #fff; }
.toast button { margin-left: auto; background: transparent; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); color: inherit; border-radius: var(--r-sm); height: 34px; padding: 0 12px; font: 600 15px var(--font-head); cursor: pointer; }
dialog { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--fg); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px); padding: 0; box-shadow: var(--e3); }
dialog::backdrop { background: var(--scrim); }
dialog form, #whatsnew { padding: 22px; }
dialog h2 { margin-bottom: 14px; font-size: 22px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.err { color: var(--bad); min-height: 1.4em; font-weight: 550; }
.linkbox { display: flex; gap: 6px; }
.linkbox input { flex: 1; min-width: 0; font-size: var(--t-sm); }

/* sign in */
.signin { max-width: 440px; margin: 8vh auto 0; display: grid; gap: var(--s5); }
.signin .card { padding: var(--s6); display: grid; gap: 14px; }
.signin h1 { font-size: 34px; }
.hero-mark { display: block; width: 52px; height: 52px; flex: none; }
.hero-mark .ss-mark { width: 100%; height: 100%; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.logo-drop { display: grid; place-items: center; min-height: 110px; border: 2px dashed var(--line); border-radius: var(--r); padding: 12px; cursor: pointer; text-align: center; color: var(--mute); }
.logo-drop img { max-height: 80px; max-width: 100%; }
.logo-drop.over { border-color: var(--accent); }
.drop-veil { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,.3)); color: #fff; font: 700 24px var(--font-head); pointer-events: none; }

/* touch screens: every target at least 44 px */
@media (pointer: coarse) {
  .btn, .btn.sm { height: 44px; }
  .btn.lg { height: 50px; }
  .in, .f input, .f select { height: 46px; }
  table.mt td input { height: 44px; }
  .seg button { height: 40px; }
  .chip { height: 40px; }
  .icon-btn { width: 44px; height: 44px; }
}
@media (max-width: 1000px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
  .preview { position: static; max-height: none; }
  .unit-head .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: 16 px gutters, the bottom tab bar, a one-line header that never cuts the company's name short */
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .tabs { display: none; }
  .bottom-tabs { display: grid; }
  .page { padding: var(--s4) var(--gutter) calc(var(--tab-h) + 40px + env(safe-area-inset-bottom)); }
  .top { min-height: 56px; padding: 0 10px 0 var(--gutter); padding-top: env(safe-area-inset-top); gap: 4px; }
  .brand { flex: 1 1 auto; }
  .brand-name { max-width: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; font-size: 17px; line-height: 1.08; overflow-wrap: anywhere; }
  .top > .grow { display: none; }
  .save { width: 58px; font-size: 12px; }
  .icon-btn { width: 44px; height: 44px; }
  /* the menu carries light and dark on a phone, so the bar keeps room for the name */
  .top:has(#menu:not([hidden])) #theme { display: none; }
  .menu-list .menu-theme { display: flex; }
  .menu-list { width: min(300px, calc(100vw - 20px)); }
  h1 { font-size: 26px; }
  .head { align-items: center; gap: 10px var(--s3); margin-bottom: var(--s4); }
  .head > .grow { flex: 1 1 200px; }
  .head > .search { order: 3; flex: 1 1 100%; }
  /* a detail page's title and its details take the full width; its action sits under them */
  .head > .grow:has(.crumbs) { flex-basis: 100%; }
  .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .row > .seg { flex: 1 1 100%; }
  .row > .seg button { flex: 1; padding: 0 6px; }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .frow { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) auto; }
  .frow .unit-col { display: none; }
  .block-h .kind { display: none; }
  .block-h .icon-btn { width: 36px; }
  .actionbar { border-radius: var(--r); bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); }
  .sticky-actions { margin: 0 calc(-1 * var(--gutter)) calc(-1 * (var(--tab-h) + 40px)); bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding: 10px var(--gutter); }
  .gridwrap { height: calc(100vh - 300px); }
  .list > li { padding: 10px var(--s3); }
  .list > li .bar { display: none; }
  .list .t, .list .d { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
  /* a row with its own controls (a role picker, buttons): the name gets the line, the controls go under it */
  .list > li:has(> select.in), .list > li:has(> .btn ~ .btn) { flex-wrap: wrap; row-gap: 10px; }
  .list > li:has(> select.in) > .main, .list > li:has(> .btn ~ .btn) > .main { flex-basis: calc(100% - 40px); }
  .list > li > select.in { flex: 1 1 120px; width: auto; }
  .group-h { padding: 6px var(--s3); }
  .card > .card-h { padding: 10px var(--s3); }
  .pad { padding: 14px; }
  .pcard { padding: var(--s4); }
  .strip { gap: 10px var(--s5); padding: var(--s3); }
  .strip b { font-size: 22px; }
  .strip .strip-mode { flex: 1 1 100%; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line2); }
  .strip .strip-mode b { line-height: 1.3; }
  .strip .strip-mode span::after { content: ":"; }
  .subtabs { margin: 0 calc(-1 * var(--gutter)) var(--s4); padding: 0 var(--s2); }
  .subtabs a { padding: 0 10px; }
  #tf { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) var(--s3); padding: 2px var(--gutter); }
  #tf::-webkit-scrollbar { display: none; }
  #tf .chip { flex: none; }
  .toasts { bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom)); }
  /* dialogs rise from the bottom like a phone's own sheets */
  dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; max-height: calc(100vh - 24px); }
  dialog form, #whatsnew { padding: 20px var(--gutter) max(20px, env(safe-area-inset-bottom)); }
  .dlg-actions { flex-wrap: nowrap; }
  .dlg-actions .btn { flex: 1; height: 48px; }
  .signin { margin-top: 4vh; }
}
@media (max-width: 760px) { .unit-head .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sticky-actions { flex-wrap: nowrap; } .sticky-actions .btn.lg { flex: 1; height: 48px; padding: 0 12px; } .sticky-actions .grow { display: none; } }
@media (max-width: 380px) { .yn { grid-template-columns: minmax(0, 1fr); } .save { width: 50px; } }
@media (prefers-reduced-motion: reduce) { .bar > i { transition: none; } }
@media print { .top, .bottom-tabs, .actionbar, .sticky-actions { display: none !important; } }
:root[data-theme=dark] .btn.good, :root[data-theme=dark] .yn .seg button[aria-pressed=true][data-v=Yes] { color: #04140b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .btn.good, :root:not([data-theme=light]) .yn .seg button[aria-pressed=true][data-v=Yes] { color: #04140b; } }
:root[data-theme=dark] .yn .seg button[aria-pressed=true][data-v=No] { color: #1d0605; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .yn .seg button[aria-pressed=true][data-v=No] { color: #1d0605; } }
.bill-price { margin: 0; font: 700 28px/1.1 var(--font-head); }

/* ---------- V2: owner "view as", the demo, review options and the review interface (review.js) ----------
   Own tokens, light and both dark blocks: the view-as banner is amber in both themes so it can never be missed. */
:root { --va-bg: #f2b544; --va-fg: #2b1c00; --va-hover: rgba(43,28,0,.12); --va-h: 0px; --on-warn: #fff; --cx: #6d3fd1; --cx-soft: rgba(109,63,209,.11); --sig-bg: #fff; --warn-ink: #8a5a0f; --good-ink: #146c3a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --va-bg: #e9ab3c; --va-fg: #1f1400; --va-hover: rgba(31,20,0,.14); --on-warn: #1f1400; --cx: #b9a0ff; --cx-soft: rgba(185,160,255,.14); --sig-bg: #f4f4f1; --warn-ink: var(--warn); --good-ink: var(--good); } }
:root[data-theme=dark] { --va-bg: #e9ab3c; --va-fg: #1f1400; --va-hover: rgba(31,20,0,.14); --on-warn: #1f1400; --cx: #b9a0ff; --cx-soft: rgba(185,160,255,.14); --sig-bg: #f4f4f1; --warn-ink: var(--warn); --good-ink: var(--good); }
html.viewing { --va-h: 38px; }
@media (max-width: 760px) { html.viewing { --va-h: 44px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The banner wears a caution stripe at its edge: you are working as someone else, and it says so. */
.viewas { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 4px; height: var(--va-h); padding: 0 var(--s4) 0 0; background: var(--va-bg); color: var(--va-fg); font-size: 14px; white-space: nowrap; }
.viewas::before { content: ""; align-self: stretch; flex: none; width: 14px; margin-right: 10px; background: repeating-linear-gradient(-45deg, var(--va-fg) 0 5px, transparent 5px 10px); opacity: .8; }
.viewas .va-t { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.viewas .va-t b { overflow: hidden; text-overflow: ellipsis; }
.viewas .va-t b:last-child { flex: none; }
.viewas .va-dot { opacity: .6; flex: none; }
.viewas button { flex: none; background: transparent; border: 0; color: inherit; font: 700 15.5px/1 var(--font-head); letter-spacing: .01em; text-decoration: underline; text-underline-offset: 3px; height: 32px; padding: 0 8px; border-radius: 6px; cursor: pointer; }
.viewas button:hover { background: var(--va-hover); }
.viewas button:focus-visible { outline: 2px solid var(--va-fg); outline-offset: 0; }
html.viewing .top { top: var(--va-h); }

/* Status words in small type stay readable (4.5:1) on their tint: amber and green use a deeper ink in light mode. */
.st-complete, .st-approved, .st-cx_approved { background: var(--good-soft); color: var(--good-ink); }
.st-review { color: var(--warn-ink); }
.st-cx_review { background: var(--cx-soft); color: var(--cx); }
.st-cx_returned { background: var(--bad-soft); color: var(--bad); }

/* the review mode picker and the role picker */
.modes { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.modes legend { font-size: 12.5px; font-weight: 600; color: var(--mute); padding: 0; margin-bottom: 6px; }
.mode-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; min-width: 0; }
.mode-opt input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.mode-opt > span { display: grid; gap: 2px; min-width: 0; }
.mode-opt b { font-size: 13.5px; }
.mode-opt small { color: var(--mute); font-size: 12px; line-height: 1.35; }
.mode-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); box-shadow: inset 0 0 0 1px var(--accent); }
.mode-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.role-pick { display: grid; gap: 8px; margin-top: 12px; }
.role-btn { display: grid; gap: 2px; text-align: left; padding: 12px 14px; min-height: 58px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--fg); font: inherit; cursor: pointer; }
.role-btn:hover, .role-btn:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.role-btn[aria-current=true] { border-color: var(--accent); }
.role-btn b { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.role-btn > span { color: var(--mute); font-size: 12.5px; }
.demo-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.demo-row > .grow { flex: 1 1 300px; }
.demo-row h2 { margin-bottom: 2px; }
.demo-row p { margin: 0; }
.owner-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
/* B16: the Team list: the name and email take the room; the role picker and buttons keep their own size beside them, and
   go under the name when the row is narrow. */
.team-list > li { flex-wrap: wrap; row-gap: 10px; }
.team-list > li > .main { flex: 1 1 220px; }
.team-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; flex: 0 1 auto; min-width: 0; }
.team-acts > select.in { width: auto; min-width: 116px; height: 34px; flex: none; }
.bulk-prev { max-height: 260px; overflow-y: auto; border: 1px solid var(--line2); border-radius: var(--r-sm); }
.bulk-prev:empty { display: none; }
.bulk-prev > li { min-height: 48px; }
@media (max-width: 760px) { .team-list > li > .main { flex-basis: 100%; } .team-acts { justify-content: flex-start; } }
/* B16: the page a sign-in link opens: one calm card, one big button */
.link-in h2, .link-in p { margin: 0; }
.link-in .btn { width: 100%; }

/* the review interface: reports list, the readings, comments and the decision */
.rv { display: grid; grid-template-columns: 270px minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.rv-list, .rv-side { position: sticky; top: calc(68px + var(--va-h)); max-height: calc(100vh - 84px - var(--va-h)); overflow: auto; display: grid; gap: 12px; align-content: start; border-radius: var(--r); }
.rv-list .card-h h2 { font-size: 15px; }
.rv-g h3 { display: flex; gap: 6px; padding: 12px 16px 6px; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.rv-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 9px 16px; border: 0; border-top: 1px solid var(--line2); background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.rv-item:hover { background: var(--sunk); }
.rv-item[aria-current=true] { background: color-mix(in srgb, var(--accent) 6%, var(--panel)); box-shadow: inset 3px 0 0 var(--accent); }
.rv-it { display: grid; min-width: 0; }
.rv-it b, .rv-it span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-it span { font-size: 12px; color: var(--mute); }
.rv-cn { display: inline-flex; align-items: center; gap: 3px; font: 700 12px var(--font); color: var(--fg); }
.rv-cn svg { width: 14px; height: 14px; color: var(--warn); }
.rv-top { display: none; align-items: center; gap: 8px; margin-bottom: 10px; }
.rv-top .btn svg { width: 18px; height: 18px; }
.rv-nav { width: 44px; padding: 0; }
.rv-sheet { padding: 0; overflow: hidden; outline: none; }
.rv-sh { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 3px solid var(--brand); }
.rv-sh.band { background: var(--brand); color: var(--brand-ink); border-bottom: 0; }
.rv-brand img { display: block; max-height: 44px; max-width: 180px; }
.rv-ttl { margin: 0 0 0 auto; text-align: right; font-size: 15px; letter-spacing: .04em; color: var(--accent); }
.rv-sh.band .rv-ttl { color: var(--brand-ink); }
.rv-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; margin: 0; padding: 14px 22px; background: var(--sunk); border-bottom: 1px solid var(--line2); }
.rv-info dt { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.rv-info dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.rv-hint { margin: 0; padding: 12px 22px 0; font-size: 12.5px; color: var(--mute); }
.rv-sec { padding: 10px 22px 14px; }
.rv-sec h3 { margin-bottom: 2px; padding: 8px 0 7px; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); border-bottom: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.rv-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); column-gap: 24px; }
.rv-row { display: flex; align-items: center; gap: 10px; min-height: 46px; border-bottom: 1px solid var(--line2); min-width: 0; }
.rv-l { flex: 1; min-width: 0; color: var(--mute); font-size: 13.5px; }
.rv-v { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; max-width: 62%; min-height: 40px; padding: 4px 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--fg); font: 650 14.5px var(--font); text-align: right; overflow-wrap: anywhere; cursor: pointer; }
.rv-v:hover { border-color: var(--line); background: var(--sunk); }
.rv-v:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rv-ci { display: inline-grid; color: var(--faint); opacity: .6; }
.rv-ci svg { width: 14px; height: 14px; }
.rv-v:hover .rv-ci, .rv-v:focus-visible .rv-ci { opacity: 1; color: var(--accent); }
.rv-v.rv-blank .rv-val { color: var(--mute); }
.rv-v.has-c { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.rv-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--warn-ink); color: var(--on-warn); font-size: 11.5px; }
.rv-v.flash { animation: rv-flash 1.6s ease-out; }
@keyframes rv-flash { 0%, 55% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 40%, transparent); } 100% { box-shadow: none; } }
.rv-v.yn .rv-val { padding: 2px 10px; border-radius: 99px; font-size: 12.5px; }
.rv-v.yn-yes .rv-val { background: var(--good-soft); color: var(--good-ink); }
.rv-v.yn-no .rv-val { background: var(--bad-soft); color: var(--bad); }
.rv-v.yn-na .rv-val { background: var(--sunk); color: var(--mute); }
.rv-notes .rv-v { width: 100%; max-width: none; justify-content: space-between; text-align: left; font-weight: 450; white-space: pre-wrap; }
.rv-tw { min-width: 0; }
.rv-t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rv-t thead th { padding: 6px 8px; text-align: right; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.rv-t thead th:first-child { width: 44%; }
.rv-t tbody tr { border-bottom: 1px solid var(--line2); }
.rv-t tbody th { padding: 4px 8px 4px 0; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--mute); overflow-wrap: anywhere; }
.rv-t td { padding: 2px 0; text-align: right; }
.rv-t .rv-v { width: 100%; max-width: none; }
.rv-t .u { font-size: 11.5px; color: var(--mute); font-weight: 450; }
.rv-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding-top: 10px; }
.rv-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.rv-sig { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 10px; }
.rv-sig img { max-height: 80px; max-width: 100%; padding: 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--sig-bg); }
.rv-decide { display: grid; gap: 10px; }
.rv-decide h2 { font-size: 19px; }
.rv-decide p { margin: 0; }
.rv-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rv-btns .tip, .rv-btns > .btn.sm { grid-column: 1 / -1; justify-self: start; }
.rv-btns .btn.lg { padding: 0 10px; }
.rv-btns .btn.good, .rv-bar .btn.good { background: var(--good-ink); border-color: var(--good-ink); }
.rv-decide > .btn.sm { justify-self: start; }
.rv-cmts .list > li { align-items: flex-start; }
.rv-cmts .list .d { white-space: normal; }
.rv-cm .main { gap: 3px; }
.rv-cm.done { opacity: .72; }
.rv-jump { justify-self: start; padding: 0; border: 0; background: none; color: var(--accent); font: 650 13px var(--font); text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rv-jump.plain { color: var(--mute); text-decoration: none; cursor: default; }
.rv-cb { white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-done summary { padding: 10px 16px; border-top: 1px solid var(--line2); color: var(--mute); font-size: 12.5px; cursor: pointer; }
.rv-add { display: grid; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line2); }
.rv-add .btn { justify-self: start; }
.rv-bar { display: none; }
.rv-cv { margin: 0 0 10px; }
.rv-here { margin-bottom: 10px; border: 1px solid var(--line2); border-radius: 10px; }
.rv-quick { margin-bottom: 10px; }
.rv-quick .chip { height: auto; min-height: 34px; padding: 6px 12px; white-space: normal; text-align: left; }
.rv-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; align-items: start; }
.rv-hub h3 { font-size: 13.5px; }
.rv-hub p { margin: 0; }
.rv-hub .btn.lg { justify-self: start; }
/* A tall card beside a short one: the short one keeps its rows together at the top. */
.grid2 > .card.stack { align-content: start; }
.rv-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.rv-links > li { flex-wrap: wrap; padding-left: 0; padding-right: 0; }
.rv-links .d { white-space: normal; }
.rv-lb { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-q > li { padding-left: 0; padding-right: 0; }
.strip .strip-mode b { font-size: 14px; line-height: 1.75; }

/* the tech's side: comments from review on the exact fields */
.fc-sum { padding: 14px 16px; border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); background: color-mix(in srgb, var(--warn) 7%, var(--panel)); }
.fc-sum h2 { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 15.5px; }
.fc-sum h2 svg { width: 20px; height: 20px; color: var(--warn); }
.fc-sum ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fc-go { display: grid; gap: 2px; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 10px; background: var(--panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.fc-go:hover { border-color: var(--warn); }
.fc-go b { font-size: 13px; }
.fc-go small { color: var(--mute); }
.fc-go.plain { cursor: default; }
.fc { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--warn); border-radius: 10px; background: var(--warn-soft); color: var(--fg); font-size: 13px; font-weight: 500; }
.fc b { display: block; font-weight: 650; }
.fc small { display: block; color: var(--mute); font-weight: 500; }
.fc-i { display: inline-grid; padding-top: 1px; }
.fc-i svg { width: 16px; height: 16px; color: var(--warn); }
.yn .fc { grid-column: 1 / -1; margin-top: 0; }
.fc-on > input, .fc-on > select, .fc-on > textarea, .fc-on .unit-in input, tr.fc-on input { border-color: var(--warn); }
tr.fc-tr td { border-top: 0; padding-top: 0; }

/* the Cx provider's page (public/review/) */
.cx-page .page { padding-bottom: 40px; }
.cx-head { align-items: flex-end; }
.cx-sum { display: grid; justify-items: end; gap: 2px; text-align: right; }
.cx-sum > span:first-child { font-weight: 600; }
.cx-sum b { font-size: 24px; line-height: 1; margin-right: 4px; }
.cx-how { margin: 0 0 14px; }
.cx-closed { max-width: 560px; margin: 8vh auto 0; }
.cx-closed h1 { margin-bottom: 8px; font-size: 22px; }
.cx-who { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-homelink { flex: none; }
:root { --on-good-ink: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --on-good-ink: #04140b; } }
:root[data-theme=dark] { --on-good-ink: #04140b; }
.rv-btns .btn.good, .rv-bar .btn.good { color: var(--on-good-ink); }

/* B20: what the Cx provider sees on each reading and report (review.js): flags from the checks, design, changes since
   their last decision, threads, the triage on each list row, the photo viewer, the key readings table, the downloads */
.rv-vv { display: inline-grid; justify-items: end; gap: 1px; min-width: 0; }
.rv-dn, .rv-was { display: block; font-size: 11.5px; font-weight: 550; line-height: 1.25; color: var(--mute); white-space: normal; }
.rv-dn.off { color: var(--warn-ink); font-weight: 700; }
.rv-was { color: var(--cx); font-weight: 650; }
.rv-fi { display: inline-grid; vertical-align: -2px; margin-right: 4px; }
.rv-fi svg { width: 14px; height: 14px; }
.rv-v.rv-flag { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: var(--warn-soft); }
.rv-v.rv-flag .rv-fi { color: var(--warn-ink); }
.rv-v.rv-f-alert { border-color: color-mix(in srgb, var(--bad) 55%, transparent); background: var(--bad-soft); }
.rv-v.rv-f-alert .rv-fi, .rv-v.rv-f-alert .rv-val { color: var(--bad); }
.rv-v.rv-chgd { box-shadow: inset 3px 0 0 var(--cx); border-color: color-mix(in srgb, var(--cx) 45%, transparent); }
.rv-v.rv-chgd:not(.rv-flag):not(.has-c) { background: var(--cx-soft); }
.rv-v.rv-static { cursor: default; }
.rv-v.rv-static:hover { border-color: transparent; background: transparent; }
.rv-ban { display: grid; gap: 4px; margin: 0; padding: 12px 22px; border-bottom: 1px solid var(--line2); border-left: 4px solid var(--info); background: var(--info-soft); font-size: 14px; }
.rv-ban.warn { border-left-color: var(--cx); background: var(--cx-soft); }
.rv-ban.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.rv-ban.good { border-left-color: var(--good); background: var(--good-soft); }
.rv-ban b { font-weight: 700; }
.rv-chl { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; }
.rv-chl li span { font-variant-numeric: tabular-nums; }
.rv-chk { margin: 12px 22px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 13.5px; }
.rv-chk > .row > b { display: inline-flex; align-items: center; gap: 6px; }
.rv-chk > .row > b svg { width: 15px; height: 15px; color: var(--warn-ink); }
.rv-only { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; cursor: pointer; }
.rv-fl { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.rv-fl li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 0 0; border-top: 1px solid var(--line2); }
.rv-fl li:first-child { border-top: 0; padding-top: 0; }
.rv-fl-d { margin: 0 0 10px; }
.rv-notes2 summary { margin-top: 8px; color: var(--mute); cursor: pointer; }
.rv-photos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.rv-photos figure { margin: 0; display: grid; gap: 4px; min-width: 0; }
.rv-photos figcaption { font-size: 12.5px; color: var(--mute); overflow-wrap: anywhere; }
.rv-ph { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; }
.rv-tri { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; white-space: normal; }
.rv-it .rv-tri { overflow: visible; }
.rb, .rv-it .rb { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 5px; background: var(--sunk); color: var(--mute); font: 650 11.5px/1 var(--font); white-space: nowrap; }
.rb svg { width: 12px; height: 12px; }
.rb-warn, .rv-it .rb-warn { background: var(--warn-soft); color: var(--warn-ink); }
.rb-alert, .rb-bad, .rv-it .rb-alert, .rv-it .rb-bad { background: var(--bad-soft); color: var(--bad); }
.rb-later, .rv-it .rb-later { background: var(--later-soft); color: var(--later); }
.rb-info, .rv-it .rb-info { background: var(--cx-soft); color: var(--cx); }
.rb-new, .rv-it .rb-new { background: var(--info-soft); color: var(--info); }
.rv-item .rv-cn { font-size: 11.5px; }
.rv-filt { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line2); }
.rv-filt .chip { height: 32px; padding: 0 10px; font-size: 12.5px; }
.rv-bulk { display: grid; gap: 4px; justify-items: start; padding: 10px 16px; border-bottom: 1px solid var(--line2); }
.rv-pend { border-top: 1px solid var(--line2); }
.rv-pend summary { padding: 10px 16px; font-size: 12.5px; color: var(--mute); cursor: pointer; }
.rv-pend p { margin: 0; padding: 0 16px 12px; }
.rv-tline { color: var(--fg2); font-weight: 600; }
.rv-who, .rv-keys { margin: 0; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--sunk); color: var(--fg); font: 650 11.5px var(--font); }
.rv-kh { display: grid; gap: 8px; margin: 0; }
.rv-kh div { display: flex; gap: 12px; align-items: center; }
.rv-kh dd { margin: 0; }
.rv-c1 { display: grid; gap: 3px; min-width: 0; }
.rv-c1.re { margin: 8px 0 0 10px; padding: 6px 0 0 10px; border-left: 2px solid var(--line); }
.rv-c1.re.theirs { border-left-color: var(--accent); }
.rv-c1 .btn { justify-self: start; }
.rv-reply { justify-self: start; margin-top: 6px; padding: 6px 0; border: 0; background: none; color: var(--accent); font: 650 13px var(--font); cursor: pointer; min-height: 32px; }
.st-away { background: var(--info-soft); color: var(--info); }
.cx-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cx-table { overflow: hidden; }
.cx-table > .pad { padding-bottom: 0; margin: 0; }
.cx-tw { position: relative; overflow-x: auto; padding: 8px 0 4px; }
.cx-kt { width: 100%; border-collapse: collapse; font-size: 14px; }
.cx-kt th, .cx-kt td { padding: 8px 12px; border-top: 1px solid var(--line2); text-align: left; white-space: nowrap; }
.cx-kt thead th { border-top: 0; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); vertical-align: bottom; }
.cx-kt .num { text-align: right; font-variant-numeric: tabular-nums; }
.cx-kt td.kf { color: var(--bad); font-weight: 700; background: var(--bad-soft); }
.cx-kt tbody tr:hover { background: var(--sunk); }
.th-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-align: right; white-space: normal; min-height: 32px; }
.cx-dls { display: grid; gap: 8px; }
.cx-dls .btn { justify-content: flex-start; height: auto; min-height: 56px; padding: 10px 14px; text-align: left; white-space: normal; }
.cx-dls .btn span { display: grid; gap: 2px; }
.cx-dls .btn small { font: 450 13px var(--font); color: var(--mute); }
.pv { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.pv-in { display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(1200px, 100%); max-height: calc(100vh - 32px); border-radius: var(--r); background: var(--panel); box-shadow: var(--e3); overflow: hidden; }
.pv-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line2); }
.pv-bar b { min-width: 0; overflow-wrap: anywhere; }
.pv-bar .btn svg { width: 16px; height: 16px; }
.pv-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
.pv-img { overflow: auto; background: #10151c; display: grid; place-items: center; min-height: 0; max-height: calc(100vh - 100px); }
.pv-img img { display: block; max-width: none; height: auto; cursor: zoom-in; }
.pv-img:not(.zoomed) img { max-width: 100%; max-height: calc(100vh - 100px); width: auto !important; object-fit: contain; }
.pv-img.zoomed { place-items: start; }
.pv-img.zoomed img { cursor: zoom-out; }
.pv-plate { overflow: auto; padding: 12px 16px; border-left: 1px solid var(--line2); }
.pv-plate h3 { margin-bottom: 6px; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.pv-plate dl { margin: 0; display: grid; }
.pv-plate dl div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line2); font-size: 13.5px; }
.pv-plate dt { color: var(--mute); }
.pv-plate dd { margin: 0; font-weight: 650; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .pv { padding: 0; place-items: stretch; }
  .pv-in { max-height: 100vh; border-radius: 0; }
  .pv-body { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .pv-img, .pv-img:not(.zoomed) img { max-height: 60vh; }
  .pv-plate { border-left: 0; border-top: 1px solid var(--line2); }
  .pv-bar b { flex: 1 1 100%; }
  .pv-bar .mute { margin-right: auto; }
}
@media (max-width: 760px) {
  .rv-ban { padding: 12px 16px; }
  .rv-chk { margin: 10px 16px 0; }
  .cx-homelink:not([hidden]) ~ .cx-who { display: none; }
}

/* B20 round 3: the head's counts, the office's answers to the Cx provider (report page, Review tab), written values */
.cx-sum-n { display: grid; justify-items: inherit; gap: 2px; }
.cx-sum-n > span:first-child { font-weight: 600; }
.fc-re { display: grid; gap: 2px; margin: 6px 0 0 14px; padding: 4px 0 0 10px; border-left: 2px solid var(--accent); font-size: 14px; }
.fc-re small { color: var(--mute); font-size: 12px; }
.fc-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rv-cxq > li { padding-left: 0; padding-right: 0; align-items: flex-start; }
.rv-cxq .main { gap: 6px; }
.rv-cxq .rv-c1 { padding: 8px 0 0; border-top: 1px solid var(--line2); }
.rv-cxq .rv-c1.re { border-top: 0; }
.rv-cxq .d { white-space: normal; }
.cx-kt .kc { color: var(--mute); font-weight: 600; white-space: nowrap; }
.cx-kt td.kf .kc { color: inherit; }

/* B20: the Cx home (public/cx/): every project contractors shared with one email address */
.cxh-strip { margin-bottom: 16px; }
.cxh-co { margin-bottom: 14px; }
.cxh-co > .card-h h2 { display: flex; align-items: center; gap: 10px; }
.cxh-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; background: var(--co, var(--brand)); }
.cxh-p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line2); }
.cxh-p:first-of-type { border-top: 0; }
.cxh-p h3 { font-size: 16px; overflow-wrap: anywhere; }
.cxh-p .d { font-size: 13px; color: var(--mute); overflow-wrap: anywhere; }
.cxh-n { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cxh-n .rb { height: 24px; padding: 0 8px; font-size: 12.5px; }
.cxh-pend { margin: 6px 0 0; font-size: 12.5px; color: var(--mute); overflow-wrap: anywhere; }
.cxh-sign { max-width: 520px; margin: 6vh auto 0; display: grid; gap: 12px; }
.cxh-sign h1 { font-size: 26px; }
@media (max-width: 600px) {
  .cxh-p { grid-template-columns: minmax(0, 1fr); } .cxh-p .btn { justify-self: start; }
  #cx-out ~ .cx-who, .cx-who:has(+ #cx-out) { display: none; }
  .cx-kt .eq { display: none; }
  .cx-kt tbody th { position: sticky; left: 0; background: var(--panel); }
}

@media (max-width: 1180px) {
  .rv { grid-template-columns: minmax(0, 1fr) 320px; }
  .rv-top { display: flex; }
  .rv[data-view=report] .rv-list { display: none; }
  .rv[data-view=list] .rv-main, .rv[data-view=list] .rv-side, .rv[data-view=list] .rv-bar { display: none !important; }
  .rv[data-view=list] .rv-list { grid-column: 1 / -1; position: static; max-height: none; }
}
@media (max-width: 860px) { .rv { grid-template-columns: minmax(0, 1fr); } .rv-side { position: static; max-height: none; } .rv-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .viewas { padding-right: 6px; font-size: 14px; }
  .viewas::before { width: 10px; margin-right: 8px; }
  .viewas .va-t b:first-child { display: none; }
  .viewas .va-t { flex: 1; }
  .viewas button { height: 40px; }
  .rv-sh { padding: 14px 16px; }
  .rv-info { padding: 12px 16px; }
  .rv-hint { padding: 10px 16px 0; }
  .rv-sec { padding: 8px 16px 12px; }
  .rv.has-bar { padding-bottom: 80px; }
  .rv.has-bar .rv-bar { display: flex; position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); z-index: 18; gap: 8px; padding: 10px 12px;
    background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  .cx-page .rv.has-bar .rv-bar { bottom: 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .rv-bar .btn { flex: 1; height: 48px; padding: 0 10px; }
  .rv-bar .rv-to-c { flex: none; min-width: 60px; }
  .rv-side .rv-btns .btn.lg { display: none; }
  .rv-btns { grid-template-columns: minmax(0, 1fr); }
  .rv-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-sum { justify-items: start; text-align: left; }
  .cx-head .cx-sum { width: 100%; }
  .owner-cos > li { flex-wrap: wrap; }
  .owner-cos .owner-acts { width: 100%; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .rv-v.flash { animation: none; outline: 3px solid var(--accent); } }

/* ---------- report sheet, report design studio and template builder (sheet.js, design.js, templates.js) ----------
   Paper is paper: the sheet stays white with its print colors in both themes; the desk and tools around it follow the
   theme. --paper-sel marks what is picked on the paper, so it is the same readable blue in both themes. */
:root { --paper: #fff; --paper-sel: #2f5bd3; --paper-bad: #c4261d; --paper-shadow: 0 1px 3px rgba(16,20,30,.12), 0 10px 28px rgba(16,20,30,.10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --paper: #fff; --paper-sel: #2f5bd3; --paper-bad: #c4261d; --paper-shadow: 0 1px 3px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45); } }
:root[data-theme=dark] { --paper: #fff; --paper-sel: #2f5bd3; --paper-bad: #c4261d; --paper-shadow: 0 1px 3px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45); }
.desk { background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; min-width: 0; overflow: hidden; }
.sheet { display: grid; gap: 18px; max-width: 860px; margin: 0 auto; }
.sheet-page { position: relative; background: var(--paper); border-radius: 3px; box-shadow: var(--paper-shadow); container-type: inline-size; color-scheme: light; }
.sheet-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; font-kerning: none; }
.sheet-svg text, svg.mini text { white-space: pre; }
.sheet.f-helvetica .sheet-svg, svg.mini.f-helvetica, .inl.f-helvetica, .ff-h { font-family: Helvetica, Arial, "Liberation Sans", "Nimbus Sans", sans-serif; }
.sheet.f-times .sheet-svg, svg.mini.f-times, .inl.f-times, .ff-t { font-family: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif; }
.sheet-ov { position: absolute; inset: 0; }
svg.mini { display: block; width: 100%; height: auto; font-kerning: none; }

/* builder: click targets, "+" buttons, the toolbar and the rename box on the paper */
.sh-hit, .sh-sec, .sh-body { position: absolute; display: block; margin: 0; padding: 0; border: 0; background: transparent; border-radius: 3px; }
.sh-hit { cursor: text; }
.sh-hit:hover { background: color-mix(in srgb, var(--paper-sel) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper-sel) 40%, transparent); }
.sh-hit:focus-visible { outline: 2px solid var(--paper-sel); outline-offset: 1px; }
.sh-hit.on { box-shadow: 0 0 0 2px var(--paper-sel); background: color-mix(in srgb, var(--paper-sel) 5%, transparent); }
.sh-sec.on { box-shadow: 0 0 0 2px var(--paper-sel); }
.sh-sec.in { box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper-sel) 30%, transparent); }
.sh-hit .req { position: absolute; right: 3px; top: 1px; color: var(--paper-bad); font: 700 13px/1 var(--font); }
.sh-add { position: absolute; display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--paper-sel); font: 650 11.5px/1 var(--font); cursor: pointer; white-space: nowrap; }
.sh-add svg { width: 13px; height: 13px; }
.sh-add-row { z-index: 2; height: 24px; padding: 0 10px 0 6px; transform: translateY(-50%); border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper-sel) 45%, transparent), 0 2px 6px rgba(16,20,30,.12); opacity: 0; pointer-events: none; transition: opacity .12s; }
.sh-add-row.near, .sh-add-row.hot, .sh-add-row:focus-visible { opacity: 1; pointer-events: auto; }
.sh-add-sec { justify-content: center; opacity: 0; transition: opacity .12s; }
.sh-add-sec::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--paper-sel); }
.sh-add-sec > span { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--paper-sel); }
.sh-add-sec:hover, .sh-add-sec:focus-visible, .sh-add-sec.end { opacity: 1; }
.sh-add-sec.end::before { opacity: .45; }
.sh-add:focus-visible { outline: 2px solid var(--paper-sel); outline-offset: 2px; border-radius: 999px; }
.ftb { position: absolute; z-index: 5; display: flex; align-items: center; gap: 2px; padding: 3px; transform: translateY(calc(-100% - 6px)); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); white-space: nowrap; }
.ftb.below { transform: translateY(6px); }
.ftb .icon-btn { width: 32px; height: 32px; color: var(--fg); }
.ftb .icon-btn[data-act=rm]:hover { color: var(--bad); }
.ftb .grip { cursor: grab; touch-action: none; }
.ftb-sep { align-self: stretch; width: 1px; margin: 5px 2px; background: var(--line); }
.inl { position: absolute; z-index: 4; box-sizing: border-box; min-width: 0; margin: 0; padding: 0 2px; border: 0; border-radius: 2px; outline: 2px solid var(--paper-sel); line-height: 1; }
.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.dragging .ftb, .dragging .sh-add { display: none; }
.drop-mark { position: absolute; z-index: 6; height: 3px; border-radius: 2px; background: var(--paper-sel); pointer-events: none; }

/* builder: page layout */
.ed-page .head { margin-bottom: 12px; }
.ed-page:not(.ed-phone) .ed-narrow, .ed-page.ed-phone .ed-wide { display: none !important; }
.ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 16px; align-items: start; }
.ed-main { display: grid; gap: 10px; min-width: 0; }
.ed-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ed-tip { margin: 0; }
#e-form { max-width: 430px; }
#e-form .fgrid { grid-template-columns: minmax(0, 1fr); }
.ed-side { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; padding: 16px; outline: none; }
.ed-side-in { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.insp-h { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.insp-acts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line2); }
.insp-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--sunk); }
.sw-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; min-height: 28px; }
details.adv { border-top: 1px solid var(--line2); padding-top: 10px; }
details.adv summary { cursor: pointer; font-weight: 650; font-size: 12.5px; color: var(--mute); }
details.adv[open] summary { margin-bottom: 8px; }
.rng { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: 6px; }
.row.nowrap { flex-wrap: nowrap; }
.cols { gap: 6px; }
.type-pick { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.type-btn { display: grid; gap: 3px; align-content: start; min-height: 66px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.type-btn:hover { border-color: var(--accent); }
.type-btn span { font-size: 12.5px; color: var(--mute); }
.req { color: var(--bad); font-weight: 700; }
.bs-veil { position: fixed; inset: 0; z-index: 39; background: rgba(10,12,18,.42); }
.ed-list { display: grid; gap: 10px; }
.pl-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.pl-item b, .pl-item > .grow > .small { display: block; }
.pl-item > svg { width: 18px; height: 18px; color: var(--faint); flex: none; }
.pl-item:hover { background: var(--sunk); }
.pl-sec { overflow: hidden; }
.pl-h { border-bottom: 1px solid var(--line2); }
.pl-rows { list-style: none; margin: 0; padding: 0; }
.pl-rows li + li { border-top: 1px solid var(--line2); }
.pl-rows .pl-item { padding-left: 22px; }
.pl-cols { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 2px; }
.pl-add { margin: 8px 14px 12px; height: 40px; }
.pl-addsec { height: 48px; border-style: dashed; }
.ed-phone .ed { grid-template-columns: minmax(0, 1fr); }
.ed-phone .desk { padding: 10px; }
.ed-phone .ed-side { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 80vh; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-lg); transform: translateY(105%); visibility: hidden; transition: transform .2s, visibility 0s linear .2s; }
.ed-phone .ed-side.open { transform: none; visibility: visible; transition: transform .2s, visibility 0s; }
.ed-phone .ed-side .in, .ed-phone .ed-side .btn.sm, .ed-phone .ed-side .sw-row { min-height: 44px; }
@media (max-width: 1000px) { .ed { grid-template-columns: minmax(0, 1fr) minmax(0, 290px); } }

/* design studio */
.design-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--fg); text-decoration: none; font-weight: 500; }
.design-link:hover { border-color: var(--accent); }
.design-link > svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.design-link b, .design-link .small { display: block; }
.studio { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 18px; align-items: start; }
.studio-pv { position: sticky; top: 72px; min-width: 0; }
.pv-box { overflow: hidden; }
.pv-box > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-weight: 700; cursor: pointer; list-style: none; }
.pv-box > summary::-webkit-details-marker { display: none; }
.pv-box > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg); margin: -4px 4px 0; }
.pv-box[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.pv-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 16px 12px; }
.pv-pick { flex: 1 1 200px; min-width: 0; }
.pv-box .desk { border: 0; border-top: 1px solid var(--line2); border-radius: 0; max-height: calc(100vh - 220px); overflow: auto; }
.presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.preset, .tile { display: grid; gap: 5px; align-content: start; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.preset:hover:not(:disabled), .tile:hover:not(:disabled) { border-color: var(--faint); }
.preset[aria-pressed=true], .tile[aria-pressed=true] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.preset:disabled, .tile:disabled { cursor: default; }
.preset-pic, .tile-pic { display: block; overflow: hidden; border-radius: 6px; border: 1px solid var(--line2); background: var(--paper); }
.preset-t { padding: 0 3px; font-weight: 700; }
.preset-d { padding: 0 3px 3px; font-size: 12px; line-height: 1.35; color: var(--mute); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile-l { padding: 0 3px 1px; font-size: 12.5px; font-weight: 650; }
.opt > .seg { justify-self: start; }
.logo-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-thumb { max-height: 40px; max-width: 160px; padding: 4px; border: 1px solid var(--line2); border-radius: 6px; background: var(--paper); }
.save-state { display: inline-flex; align-items: center; gap: 7px; height: 36px; font-size: 13px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.save-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.save-state.un { color: var(--fg); }
.save-state.un::before { background: var(--warn); }
.seg.v { display: grid; border-radius: 14px; justify-self: stretch; }
.seg.v button { text-align: left; border-radius: 11px; height: 36px; }
.studio .f.opt > label { cursor: default; }
.studio p, .ed-side p { margin: 0; }
.studio .f.opt, .ed-side div.f { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--mute); min-width: 0; }
.ed-page .head > .grow, .design-page .head > .grow { flex: 1 1 320px; }
.studio-bar { display: none; }
@media (max-width: 1000px) {
  .studio { grid-template-columns: minmax(0, 1fr); }
  .studio-pv { position: static; }
  .pv-box .desk { max-height: none; }
  .studio-bar { display: flex; margin-top: 16px; }
}
@media (max-width: 760px) {
  .desk { padding: 10px; }
  .sheet { gap: 10px; }
  .type-pick { grid-template-columns: minmax(0, 1fr); }
  .opt > .seg { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .ed-phone .ed-side, .sh-add-row, .sh-add-sec { transition: none; } }

/* ---- B7: Claude connectors. The "Use StartupSend from Claude" card (Company page, Owner page, menu) and the sign-in
   door's consent page (body.door, served by src/lib/oauth.js with this stylesheet and nothing inline). ---- */
.connect-h { display: flex; align-items: center; gap: 10px; }
.connect-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.connect-mark svg { width: 19px; height: 19px; }
.connect-body { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.connect p { margin: 0; }
.nowrap { white-space: nowrap; }
/* a card beside a taller one keeps its content at the top instead of spreading it out */
.grid2 > .card.stack { align-content: start; }
.connect-body.wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; }
.connect-body > .stack { align-content: start; }
.connect .mono { font: 500 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.connect div.f { display: grid; gap: 4px; }
.connect div.f > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--mute); }
.connect h3 { font-size: 13.5px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: baseline; line-height: 1.45; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sunk); border: 1px solid var(--line); color: var(--fg); font: 700 12.5px var(--font); align-self: start; }
.steps b { font-weight: 650; }
.connect .apps { border: 1px solid var(--line); border-radius: 12px; }
.connect .apps > li { padding: 10px 12px; flex-wrap: wrap; }
.connect .apps > li.asking { background: var(--bad-soft); }
.connect .apps .d { white-space: normal; }
.connect .apps > li.asking .d { color: var(--fg); }
.connect .apps .ask { margin-left: auto; }
dialog .connect .connect-body { gap: 16px; }

body.door { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px; }
.door .box { width: min(460px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 26px; display: grid; gap: 14px; }
.door .brand { font-size: 15.5px; }
.door .brand img { width: 30px; height: 30px; display: block; }
.door h1 { font-size: 22px; }
.door p { margin: 0; }
.door form { display: grid; gap: 14px; margin: 0; }
.door .where { font-size: 17px; line-height: 1.4; } /* B16: the return address, large: the one thing a client cannot fake */
.door .where b { font-weight: 700; overflow-wrap: anywhere; }
.door .scope { padding: 13px 15px; border-radius: 12px; background: var(--info-soft); color: var(--fg); line-height: 1.55; }
.door .hint { font-size: 13px; color: var(--mute); line-height: 1.5; }
.door .bad { color: var(--bad); }
.door .row { justify-content: flex-end; gap: 10px; }
.door button { min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: 600 15px var(--font); cursor: pointer; }
.door button:hover { border-color: var(--faint); }
.door button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); min-width: 120px; }
.door button.link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 13.5px; font-weight: 550; text-decoration: underline; text-underline-offset: 3px; }
.door .switch { border-top: 1px solid var(--line2); padding-top: 2px; }
/* the door has no company brand, so dark mode lifts StartupSend's own blue as the app does (brandVars) */
:root[data-theme=dark] .door { --accent: #849eb5; --on-accent: #0b0c10; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .door { --accent: #849eb5; --on-accent: #0b0c10; } }
@media (max-width: 900px) { .connect-body.wide { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
@media (max-width: 480px) {
  .connect .linkbox { flex-wrap: wrap; }
  .connect .linkbox input, .connect .linkbox .btn { flex: 1 1 100%; }
  .connect .linkbox .btn { height: 42px; }
  .door .box { padding: 20px 18px; }
  .door .row { flex-direction: column-reverse; align-items: stretch; }
  .door .row button { width: 100%; }
}

/* ---------- B8 checks: the Checks console (public/js/checksui.js) ---------- */
/* pill inks dark enough to read at 11px on their soft backgrounds (4.5:1 and up) */
:root { --ck-knob: #ffffff; --ck-off: #c9ccd3; --ck-info-ink: #2445a8; --ck-warn-ink: #7f520c; --ck-bad-ink: #a3211a; --ck-good-ink: #16663a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --ck-knob: #f1f2f4; --ck-off: #3a3d45; --ck-info-ink: #a9bcff; --ck-warn-ink: #f4c46e; --ck-bad-ink: #ff9a91; --ck-good-ink: #74e2a8; } }
:root[data-theme=dark] { --ck-knob: #f1f2f4; --ck-off: #3a3d45; --ck-info-ink: #a9bcff; --ck-warn-ink: #f4c46e; --ck-bad-ink: #ff9a91; --ck-good-ink: #74e2a8; }
.ck-sum { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; }
.ck-sum .dot { margin: 0 8px; color: var(--faint); }
.ck-sum-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ck-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.ck-main { display: grid; gap: 12px; min-width: 0; }
.ck-group > summary, .ck-try > summary, .ck-isec > summary, .ck-gone > summary { list-style: none; cursor: pointer; }
.ck-group > summary::-webkit-details-marker, .ck-try > summary::-webkit-details-marker, .ck-isec > summary::-webkit-details-marker, .ck-gone > summary::-webkit-details-marker { display: none; }
.ck-group > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 14px 16px; border-radius: var(--r); }
.ck-group > summary:hover { background: var(--sunk); }
.ck-group[open] > summary { border-radius: var(--r) var(--r) 0 0; }
.ck-g-t { font-weight: 700; font-size: 15.5px; }
.ck-g-t::before, .ck-try > summary .t::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 11px 2px 2px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(-45deg); transition: transform .15s; }
details[open] > summary .ck-g-t::before, .ck-try[open] > summary .t::before { transform: rotate(45deg); }
.ck-g-n { font-size: 12px; font-weight: 650; color: var(--mute); background: var(--sunk); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.ck-g-d { grid-column: 1 / -1; font-size: 12.5px; color: var(--mute); padding-left: 22px; }
.ck-rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); }
.ck-rule { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line2); }
.ck-rule:first-child { border-top: 0; }
.ck-rule.off .ck-name, .ck-rule.off .ck-what { color: var(--mute); }
.ck-b { min-width: 0; }
.ck-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 26px; }
.ck-name { font-weight: 650; }
.ck-what { margin: 2px 0 0; font-size: 13px; color: var(--mute); }
.ck-msg { margin: 4px 0 0; font-size: 13px; }
.ck-chg { font-size: 11.5px; font-weight: 700; color: var(--accent); }
.lv { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 700 11px var(--font); white-space: nowrap; }
.lv-info { background: var(--info-soft); color: var(--ck-info-ink); }
.lv-warn { background: var(--warn-soft); color: var(--ck-warn-ink); }
.lv-alert { background: var(--bad-soft); color: var(--ck-bad-ink); }
.ck-lims { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ck-lim { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 3px 4px 3px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--sunk); font-size: 12.5px; font-weight: 600; color: var(--fg); max-width: 100%; }
.ck-lim input { width: 66px; height: 28px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: 650 13px var(--font); text-align: center; padding: 0 4px; }
.ck-lim input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ck-lim input:disabled { opacity: 1; background: transparent; border-color: transparent; }
.ck-lim .u { color: var(--mute); padding-right: 8px; }
.ck-lim.moved { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.ck-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 9px; font-size: 12.5px; }
.ck-lvl { display: inline-flex; align-items: center; gap: 6px; color: var(--mute); font-weight: 600; }
.ck-lvl select { height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: 600 12.5px var(--font); padding: 0 6px; }
.ck-link { border: 0; background: none; padding: 6px 0; color: var(--accent); font: 650 12.5px var(--font); cursor: pointer; text-align: left; }
.ck-link:hover { text-decoration: underline; }
.ck-link[aria-disabled=true] { color: var(--mute); }
.ck-link.danger { color: var(--bad); }
input.sw { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--ck-off); position: relative; cursor: pointer; margin: 0; flex: none; transition: background .15s; }
input.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ck-knob); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
input.sw:checked { background: var(--good); }
input.sw:checked::after { transform: translateX(18px); }
input.sw:disabled { opacity: .6; cursor: default; }
input.sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ck-own-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; }
.ck-own-h h2 { flex: 1; }
.ck-empty { margin: 0; padding: 0 16px 12px; color: var(--mute); font-size: 13px; }
.ck-starters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; }
.ck-starters .chip { height: auto; min-height: 32px; padding: 4px 12px; text-align: left; }
.ck-starters .chip svg { width: 14px; height: 14px; flex: none; }
.ck-own .ck-rules + .ck-starters { padding-top: 12px; border-top: 1px solid var(--line2); }
.ck-gone > summary { padding: 10px 16px; color: var(--mute); font-size: 12.5px; font-weight: 600; border-top: 1px solid var(--line2); }
.ck-try { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; }
.ck-try > summary { display: grid; gap: 2px; padding: 14px 16px; }
.ck-try[open] > summary { border-bottom: 1px solid var(--line2); }
.ck-try > summary .t { font-weight: 700; font-size: 15.5px; }
.ck-try > summary .d { font-size: 12.5px; color: var(--mute); padding-left: 22px; }
.ck-try-body { display: grid; gap: 12px; padding: 14px 16px 16px; }
.ck-res { display: grid; gap: 8px; }
.ck-found { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ck-found li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--sunk); border-left: 3px solid var(--line); }
.ck-found li.lvb-info { border-left-color: var(--info); }
.ck-found li.lvb-warn { border-left-color: var(--warn); }
.ck-found li.lvb-alert { border-left-color: var(--bad); }
.ck-found li b { font-size: 13px; }
.ck-found p { margin: 2px 0 0; font-size: 12.5px; }
.ck-quiet { margin: 0; padding: 12px; border-radius: 12px; background: var(--good-soft); color: var(--ck-good-ink); font-weight: 600; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.ck-quiet svg { width: 18px; height: 18px; flex: none; }
.ck-work { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-work .chip { cursor: default; }
.ck-cplt { justify-content: space-between; }
.ck-ph { width: 64px; height: 32px; }
.ck-inputs { display: grid; gap: 4px; border-top: 1px solid var(--line2); padding-top: 8px; }
.ck-isec > summary { font-weight: 650; font-size: 13px; padding: 8px 0; }
.ck-igrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; padding: 2px 0 10px; }
.ck-igrid .f input, .ck-igrid .f select { height: 34px; }
.ck-igrid .u { color: var(--faint); font-weight: 500; }
.ck-form .f input, .ck-form .f select { height: 38px; }
.ck-fs { border: 1px solid var(--line2); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.ck-fs legend { font-weight: 700; font-size: 13.5px; padding: 0 6px; display: flex; align-items: center; gap: 8px; }
.ck-step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 12px; }
.ck-eqs { max-height: 220px; overflow: auto; border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px; display: grid; gap: 4px; }
.ck-eqs label { min-height: 30px; }
.ck-eqh { font-size: 11.5px; font-weight: 700; color: var(--mute); margin-top: 6px; }
.ck-hint { margin: 0; color: var(--ck-good-ink); font-weight: 600; }
.ck-hint.none { color: var(--ck-warn-ink); }
/* B16: how many library sheets an own check reaches; few or none is said in the warning ink */
.ck-hint.few { color: var(--ck-warn-ink); }
.ck-cover { margin: 2px 0 0; font-size: 13px; color: var(--mute); }
.ck-cover.few { color: var(--ck-warn-ink); }
.ck-why h3 { margin: 14px 0 2px; }
.ck-why h3:first-child { margin-top: 0; }
.ck-why p { margin: 0 0 4px; }
.ck-ex { display: grid; gap: 6px; }
.ck-ex .ck-starters { padding: 0; }
@media (max-width: 900px) {
  .ck-layout { grid-template-columns: minmax(0, 1fr); }
  .ck-try { position: static; max-height: none; order: -1; }
}
@media (max-width: 560px) {
  .ck-rule { padding: 12px; gap: 10px; }
  .ck-igrid { grid-template-columns: minmax(0, 1fr); }
  .ck-sum { padding: 12px; }
  .ck-sum .dot { margin: 0 5px; }
  .ck-g-d { padding-left: 0; }
}
/* ---------- end B8 checks ---------- */
/* ---------- B8 checks: the AI group ---------- */
.lv-lock { background: var(--sunk); color: var(--mute); }
.lv-ai { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.ck-ai-note { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line2); font-size: 13px; color: var(--mute); }
.ck-ai-note.lock { background: var(--sunk); color: var(--fg); font-weight: 600; }
.ck-ai-own { border-top: 1px solid var(--line2); }
.ck-ai-own .ck-own-h h3 { flex: 1; }
.ck-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ck-sample { display: grid; gap: 4px; font-size: 12px; color: var(--mute); cursor: pointer; position: relative; }
.ck-sample img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; border: 2px solid var(--line); }
.ck-sample input { position: absolute; top: 6px; left: 6px; }
.ck-sample input:checked + img { border-color: var(--accent); }
.ck-cb { align-self: end; min-height: 38px; }
.ck-answers summary { cursor: pointer; font-size: 12.5px; color: var(--mute); padding: 6px 0; }
.ck-answers ul { margin: 0; padding-left: 18px; font-size: 12.5px; }
.ck-answers code { font-size: 11.5px; }
/* ---------- end B8 checks: the AI group ---------- */
/* ---------- B8 checks: Try it sections ---------- */
.ck-ihint { margin: 0 0 2px; }
.ck-isec > summary { border-top: 1px solid var(--line2); }
.ck-isec:first-of-type > summary { border-top: 0; }
/* the results stay in view while readings below them are typed */
.ck-res { position: sticky; top: 0; z-index: 3; background: var(--panel); padding: 2px 0 10px; max-height: 46vh; overflow: auto; border-bottom: 1px solid var(--line2); }
@media (max-width: 900px) { .ck-try { overflow: visible; } .ck-res { top: 60px; } .ck-work .chip { height: 26px; padding: 0 9px; font-size: 12px; } }
/* ---------- end B8 checks: Try it sections ---------- */

/* ---------- V2 B2: the field phone (unit.js, form.js, live.js, field.js, ptchart.js) ----------
   Glove-size targets (48 px and up), 18 px input text, high contrast, calm suggestion colors. Own tokens, light and
   both dark blocks: the Yes / No / N/A colors carry their own ink so white text never sits on a light green. */
:root { --yes-bg: #146c3a; --yes-ink: #fff; --no-bg: #b42318; --no-ink: #fff; --na-bg: #5d616c; --na-ink: #fff; --line-strong: #c3c7cf; --chip-bg: #eef3ff; --sg-ink: var(--fg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --yes-bg: #3fcf84; --yes-ink: #06140c; --no-bg: #ff7a70; --no-ink: #2a0503; --na-bg: #a3a7b1; --na-ink: #0d0e11; --line-strong: #464a54; --chip-bg: #1b2236; } }
:root[data-theme=dark] { --yes-bg: #3fcf84; --yes-ink: #06140c; --no-bg: #ff7a70; --no-ink: #2a0503; --na-bg: #a3a7b1; --na-ink: #0d0e11; --line-strong: #464a54; --chip-bg: #1b2236; }

/* both layouts: entries, Yes / No / N/A, units, "Not on this unit" */
.fld { display: grid; gap: 4px; min-width: 0; align-content: start; }
.fld .fl { font-size: 12.5px; font-weight: 600; color: var(--mute); }
.f input.cb { width: 20px; height: 20px; }
.inrow { display: flex; gap: 8px; min-width: 0; }
.inrow > .unit-in { flex: 1; min-width: 0; }
.unit-in .u, table.mt .u { color: var(--mute); }
.yl { min-width: 0; }
.yn .seg button[aria-pressed=true][data-v=Yes] { background: var(--yes-bg); color: var(--yes-ink); }
.yn .seg button[aria-pressed=true][data-v=No] { background: var(--no-bg); color: var(--no-ink); }
.yn .seg button[aria-pressed=true][data-v="N/A"] { background: var(--na-bg); color: var(--na-ink); }
.yn .chk { grid-column: 1 / -1; }
.sec > h2 { flex-wrap: wrap; }
.sec-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.na-tog { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--line-strong); background: transparent; color: var(--mute); font: 600 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.na-tog:hover { color: var(--fg); border-style: solid; }
.na-tog[aria-pressed=true] { border-style: solid; border-color: var(--na-bg); background: var(--na-bg); color: var(--na-ink); }
.na-tog[aria-pressed=true]::before { content: "✓"; }
.na-note { display: none; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--sunk); color: var(--mute); font-size: 13.5px; }
.sec.is-na > .body { display: none; }
.sec.is-na > .sec-na { display: block; margin: 12px 16px 14px; }
.mcol.is-na > .na-note { display: block; margin-top: 10px; }
.mcol.is-na > .mlist { display: none; }
table.mt th { vertical-align: bottom; }
table.mt th .th-l { display: inline-block; margin-right: 6px; vertical-align: middle; }
.na-col { height: 26px; padding: 0 9px; font-size: 11.5px; vertical-align: middle; }
table.mt th.na .th-l { color: var(--mute); text-decoration: line-through; }
table.mt td.na input { background: var(--sunk); color: var(--mute); border-style: dashed; }
.pt-btn { margin-left: auto; }

/* live checks: a slot under each entry that opens with a height animation */
.chk { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease, margin-top .22s ease; }
.chk > .chk-in { overflow: hidden; min-height: 0; display: grid; gap: 6px; }
.chk.on { grid-template-rows: 1fr; margin-top: 6px; }
.sec-chk.on { margin-top: 12px; }
.sg { display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; border-left: 4px solid var(--info); background: var(--info-soft); color: var(--sg-ink); font-size: 14px; font-weight: 500; line-height: 1.4; }
.sg-l { font: 750 11px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--info); }
.sg.lv-warn { border-left-color: var(--warn); background: var(--warn-soft); }
.sg.lv-warn .sg-l { color: var(--warn-ink); }
.sg.lv-alert { border-left-color: var(--bad); background: var(--bad-soft); }
.sg.lv-alert .sg-l { color: var(--bad); }
.sg-b b { font-weight: 700; }
.sg details { margin-top: 2px; }
.sg summary { display: inline-flex; align-items: center; min-height: 30px; color: var(--accent); font-weight: 650; cursor: pointer; }
.sg details p { margin: 2px 0 4px; }
.cv { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 7px 12px; border-radius: 10px; background: var(--sunk); color: var(--fg); font-size: 13.5px; line-height: 1.4; }
.cv-t { flex: 1 1 200px; min-width: 0; }
.cv-t b { font-weight: 750; }
.col-n { font-weight: 750; white-space: nowrap; }
.sg > .col-n { font-size: 12.5px; color: var(--mute); }
tr.chk-tr td { border-top: 0; padding: 0 0 6px; }
tr.chk-tr .chk.on { margin-top: 0; }

/* fill the other units, and the weather */
.sf, .wx { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; padding: 9px 12px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--fg); line-height: 1.4; }
.sf { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line)); }
.sf.done { background: var(--sunk); border-color: var(--line); }
.sf-t { flex: 1 1 220px; min-width: 0; }
.sf-b { display: flex; gap: 6px; flex-wrap: wrap; }
.wx { background: var(--chip-bg); border: 1px solid color-mix(in srgb, var(--info) 30%, var(--line)); }
.wx > span { flex: 1 1 200px; min-width: 0; }
.wx.quiet { padding: 2px 2px 0; background: none; border: 0; color: var(--mute); font-size: 12.5px; }
td > .wx { margin-top: 4px; padding: 6px 8px; font-size: 12.5px; }

/* the desk: the whole form, with the sections list at the side */
.u-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.snav { display: none; }
@media (min-width: 1100px) {
  .u-wrap { grid-template-columns: 236px minmax(0, 920px); justify-content: center; align-items: start; }
  .snav { display: block; position: sticky; top: calc(var(--top-h, 53px) + var(--va-h) + 12px); max-height: calc(100vh - var(--top-h, 53px) - var(--va-h) - 100px); overflow: auto; padding: 8px; }
  .u-wrap .form { margin: 0; width: 100%; }
}
.snav h2 { padding: 6px 10px 4px; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.snav ol { list-style: none; margin: 0; padding: 0; }
.snav button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--fg); font: 500 13px var(--font); text-align: left; cursor: pointer; }
.snav button:hover { background: var(--sunk); }
.snav .n { flex: none; color: var(--mute); font-size: 12px; font-weight: 600; }
.snav button.done .n { color: var(--good-ink); }

/* the phone: one step at a time */
.page.g-page { padding: 12px 16px calc(110px + env(safe-area-inset-bottom)); }
.up.g { max-width: 760px; margin: 0 auto; }
.up.g .head { margin-bottom: 8px; align-items: center; flex-wrap: nowrap; }
.up.g .head h1 { font-size: 24px; }
.g-more { height: 44px; padding: 0 16px; font-size: 14.5px; flex: none; }
.g-step { position: sticky; top: calc(var(--top-h, 53px) + var(--va-h)); z-index: 11; margin: 0 -16px 12px; padding: 10px 16px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.g-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.g-n { flex: 1; min-width: 0; font: 650 13.5px var(--font); color: var(--mute); }
.g-t { margin: 2px 0 6px; font-size: 19px; line-height: 1.25; outline: none; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-left { flex: none; font: 750 14.5px var(--font); }
.g-step .btn.sm { height: 40px; padding: 0 14px; font-size: 13.5px; }
.g-step .bar { height: 8px; }
.up.g .sec, .up.g .unit-head, .up.g .fc-sum { display: none; }
.up.g .sec.cur { display: block; }
.up.g.at0 .unit-head { display: grid; }
.up.g.at0 .fc-sum { display: block; }
.up.g .sec > h2 { padding: 12px 14px 0; border-bottom: 0; justify-content: flex-end; gap: 8px; }
.up.g .sec > h2 > .grow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.up.g .sec .body { padding: 12px 14px 16px; }
.up.g .na-tog { height: 44px; padding: 0 16px; font-size: 14px; }
.up.g .fgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.up.g .fld .fl, .up.g .prow > .fl { font-size: 15.5px; font-weight: 650; color: var(--fg); }
.up.g .f input, .up.g .f select, .up.g .f textarea { height: 52px; font-size: 18px; border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 0 14px; }
.up.g .f textarea { height: auto; min-height: 140px; padding: 12px 14px; }
.up.g .unit-in .u { font-size: 14px; right: 14px; }
.up.g .unit-in input { padding-right: 64px; }
.pm { flex: none; width: 52px; height: 52px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--sunk); color: var(--fg); font: 600 22px var(--font); cursor: pointer; }
.pm:active { background: var(--line); }
.up.g .yn { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 0; }
.up.g .yl { font-size: 16px; font-weight: 550; }
.up.g .yn-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; padding: 4px; border-radius: 14px; }
.up.g .yn-seg button { height: 48px; border-radius: 11px; font-size: 16px; }
.allyes-g { width: 100%; height: 48px; font-size: 15px; }
.mtabs { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
/* B12: the shown column's N/A and Later on the tab row: beside the tabs when they fit, else just under its own tab */
.mtabs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.mtabs-row > .mtabs { flex: 1 1 auto; margin-bottom: 0; }
.mtab-part { flex: none; display: flex; }
.mtab-part.at-end { margin-left: auto; }
.mtab-part.at-mid { margin: 0 auto; }
.mtab-part[hidden] { display: none; }
.mtab { flex: 1 0 0; min-width: 120px; min-height: 58px; display: grid; place-content: center; gap: 1px; padding: 6px 10px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--panel); color: var(--fg); font: inherit; text-align: center; cursor: pointer; }
.mtab b { font-size: 15.5px; }
.mtab .n { font-size: 12.5px; color: var(--mute); font-weight: 600; }
.mtab[aria-selected=true] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: inset 0 0 0 1px var(--accent); }
.mtab[aria-selected=true] b { color: var(--accent); }
.mtab.is-na b { text-decoration: line-through; color: var(--mute); }
.mcol > .na-tog { margin-bottom: 12px; }
.mlist, .plist { display: grid; gap: 16px; }
.prow .ph3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ph { display: grid; gap: 3px; font: 700 13px var(--font); color: var(--mute); text-align: center; }
.up.g .ph input { text-align: center; padding: 0 6px; }
.ph.is-na input { background: var(--sunk); border-style: dashed; }
.up.g .sf, .up.g .wx { font-size: 15px; padding: 10px 12px; }
.up.g .sf .btn, .up.g .wx .btn, .up.g .cv-use { height: 44px; padding: 0 16px; font-size: 14.5px; }
.up.g .sg { font-size: 15px; }
.up.g .sg summary { min-height: 44px; }
.up.g .cv { font-size: 14.5px; }
.up.g .unit-head { gap: 10px; padding: 6px 14px 14px; }
.up.g .u-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.u-det summary { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; font-weight: 600; list-style: none; }
.u-det summary::-webkit-details-marker { display: none; }
.u-edit { color: var(--accent); font-weight: 700; }
.u-det[open] .u-edit { visibility: hidden; }
.up.g #h-copy { width: 100%; height: 48px; font-size: 14.5px; }
.photos.big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.photos.big .add-photo { font-size: 15.5px; gap: 4px; }
.photos.big .add-photo svg { width: 36px; height: 36px; }
.add-photo.alt .pick-i { font-size: 34px; line-height: 1; }
.sigpad.big { height: 240px; background: var(--sig-bg); }
.up.g .sig-row .btn.lg { flex: 1; }
.up.g .sig-row .grow { flex-basis: 100%; }
.g-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.35fr); gap: 8px; padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.g-bar .btn { height: 56px; padding: 0 8px; font-size: 16px; }
.g-bar .btn svg { width: 20px; height: 20px; }
.g-bar .btn.good { background: var(--yes-bg); border-color: var(--yes-bg); color: var(--yes-ink); }
@media (min-width: 761px) { .g-bar { left: 50%; right: auto; width: min(760px, 100vw); transform: translateX(-50%); border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; } }
html.in-guide .bottom-tabs { display: none !important; }
html.in-guide .toasts { bottom: calc(90px + env(safe-area-inset-bottom)); }
@media print { .g-bar, .g-step { display: none !important; } }

/* sheets: Sections, More, Mark complete, PT chart, copy from another unit */
@media (max-width: 760px) { #dlg.sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 20px 20px 0 0; max-height: 90vh; border-bottom: 0; } #dlg.sheet form { padding-bottom: max(20px, env(safe-area-inset-bottom)); } }
.pick-list, .sec-list { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.pick { display: grid; gap: 2px; width: 100%; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.pick:hover, .pick:focus-visible { border-color: var(--accent); }
.pick b { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.pick span, .pick small { color: var(--mute); font-size: 13.5px; }
.pick.here { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.pick .sn { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 99px; background: var(--sunk); font-size: 12.5px; color: var(--mute); }
.sec-list .pick { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.sec-list .st { font-weight: 650; }
.pick.done .st { color: var(--good-ink); }
.pick.done .sn { background: var(--good-soft); color: var(--good-ink); }
.pick.lv-alert { border-left: 4px solid var(--bad); }
.pick.lv-warn { border-left: 4px solid var(--warn); }
.cd-h { margin: 12px 0 2px; font-size: 15px; }
.cd-note { margin-top: 14px; }
.more-list { display: grid; gap: 8px; }
.more-list .btn { width: 100%; height: 52px; justify-content: flex-start; padding: 0 16px; font-size: 15px; }
.more-list .btn svg:last-child:not(:first-child) { margin-left: auto; }
.pt { display: grid; gap: 12px; }
.pt select { height: 52px; font-size: 18px; }
.pt-io { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pt .fld .fl { font-size: 14px; color: var(--fg); }
.pt input { height: 52px; font-size: 20px; }
.pt-out { display: block; min-height: 28px; padding-top: 4px; font-size: 14.5px; }
.pt-out b { font-size: 19px; }
.pt-tw { max-height: 38vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.pt-t { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.pt-t th, .pt-t td { padding: 8px 14px; text-align: right; border-top: 1px solid var(--line2); }
.pt-t thead th { position: sticky; top: 0; background: var(--panel); border-top: 0; font-size: 12.5px; color: var(--mute); }
.pt-t tbody th { text-align: left; font-weight: 700; }
.pt-t tr.at { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.pt-t tr.at td, .pt-t tr.at th { font-weight: 800; }
@media (max-width: 420px) { .pt-io { grid-template-columns: minmax(0, 1fr); } }

/* My work and a job, for a field tech */
.page.f-page { padding-left: 16px; padding-right: 16px; }
.fw-go { display: flex; align-items: center; gap: 12px; min-height: 68px; margin-bottom: 14px; padding: 12px 18px; text-decoration: none; color: var(--fg); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.fw-go small { display: block; color: var(--mute); font-size: 13px; font-weight: 600; }
.fw-go b { font-size: 17px; }
.fw-go .d { display: block; margin-top: 2px; color: var(--mute); font-size: 14px; font-weight: 600; }
.fw-go svg { width: 24px; height: 24px; color: var(--accent); }
.fw-back, .fw-mine { margin-bottom: 18px; }
.fw-back h2, .fw-mine h2, .fj-g h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 16px; }
.fw-back h2 .n, .fw-mine h2 .n, .fj-g h2 .n { color: var(--mute); font-size: 13.5px; font-weight: 650; }
.fw-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fw-row { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 12px 16px; text-decoration: none; color: var(--fg); }
.fw-row:hover, .fw-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.fw-row b { display: block; font-size: 17px; }
.fw-row .d, .fw-card .d { display: block; color: var(--mute); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.fw-row.back { border-left: 4px solid var(--bad); }
.fw-note { display: block; margin-top: 3px; color: var(--bad); font-size: 13.5px; font-weight: 600; }
.fw-row.is-done { background: var(--sunk); box-shadow: none; }
.fw-row > svg { width: 20px; height: 20px; color: var(--mute); flex: none; }
.fw-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.fw-card { display: grid; gap: 12px; padding: 18px; text-decoration: none; color: var(--fg); }
.fw-top { display: flex; gap: 10px; align-items: flex-start; }
.fw-name { display: block; font-size: 18px; line-height: 1.3; }
.fw-types { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fw-types li { display: flex; gap: 10px; font-size: 15.5px; }
.fw-types b { color: var(--mute); font-weight: 650; }
.fw-foot { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.fw-foot .bar { height: 8px; }
.fw-idle { margin-top: 18px; }
.fw-idle summary { min-height: 44px; display: flex; align-items: center; color: var(--mute); font-weight: 650; cursor: pointer; }
.fj-sum { margin: -6px 0 6px; font-size: 15px; }
.fj-g { margin-top: 16px; }
.fj-tag { font-size: 18px !important; }
.fj-st { display: grid; justify-items: end; gap: 5px; flex: none; }
.fj-left { font-size: 13px; font-weight: 650; color: var(--mute); }
.fj-st .bar { width: 96px; }
.f-toggle { align-items: flex-start; gap: 12px; flex-wrap: nowrap; }
.f-toggle > span { display: grid; gap: 2px; }
@media (max-width: 380px) { .fj-st .bar { width: 72px; } .g-bar .btn { font-size: 15px; } .up.g .u-details { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .chk { transition: none; } }
.up.g .sec > h2:not(:has(button)) { display: none; }
.up.g .sec > h2 .btn.sm { height: 44px; padding: 0 16px; font-size: 14px; }
.up.g .sec > h2 .pt-btn { margin-left: 0; }
.prow > .fl .u { color: var(--mute); font-weight: 600; }
.cd-note summary { display: flex; align-items: center; min-height: 48px; color: var(--accent); font-weight: 650; cursor: pointer; }
.cd-note textarea { min-height: 90px; }
.pick b .n { margin-left: auto; color: var(--mute); font-size: 13px; font-weight: 650; }
/* readable on the glare side: the saving word and the green buttons keep 4.5:1 (axe) */
.save.busy { color: var(--warn-ink); }
.btn.good { background: var(--yes-bg); border-color: var(--yes-bg); color: var(--yes-ink); }
.up .form { grid-template-columns: minmax(0, 1fr); }
.mtab { flex: 1 1 0; min-width: 92px; }
.up.g .yn-f .yn-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; padding: 4px; border-radius: 14px; }
.up.g .yn-f .yn-seg button { height: 48px; border-radius: 11px; font-size: 16px; }
.yn-f .seg button[aria-pressed=true][data-v=Yes] { background: var(--yes-bg); color: var(--yes-ink); }
.yn-f .seg button[aria-pressed=true][data-v=No] { background: var(--no-bg); color: var(--no-ink); }
.yn-f .seg button[aria-pressed=true][data-v="N/A"] { background: var(--na-bg); color: var(--na-ink); }
.yn-f > .seg { justify-self: start; }
.why { grid-column: 1 / -1; margin-top: 4px; }
.why .f > span { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.why-done { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--mute); }
.why-done svg { width: 16px; height: 16px; color: var(--yes-bg); }
.up.g .why input { height: 52px; }
.fill-pick { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.fill-pick > span { display: grid; gap: 2px; min-width: 0; }
.fill-pick .cb { width: 24px; height: 24px; }
/* do it, not on this unit, or can't do it today; finishing a visit; issues */
:root { --later: #8a5a0f; --later-soft: rgba(183,121,31,.13); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --later: #f0b44c; --later-soft: rgba(240,180,76,.14); } }
:root[data-theme=dark] { --later: #f0b44c; --later-soft: rgba(240,180,76,.14); }
.part-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--line-strong); background: transparent; color: var(--mute); font: 600 12.5px var(--font); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part-btn:hover { color: var(--fg); border-style: solid; }
.part-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.part-btn[aria-pressed=true] { border-style: solid; border-color: var(--na-bg); background: var(--na-bg); color: var(--na-ink); }
.part-btn.later[aria-pressed=true] { border-color: var(--later); background: var(--later-soft); color: var(--later); }
.part-btn[aria-pressed=true]::before { content: "✓"; }
.part-btn.sm { height: 26px; padding: 0 9px; font-size: 11.5px; vertical-align: middle; }
.up.g .part-btn { height: 44px; padding: 0 16px; font-size: 14px; }
table.mt th .part-seg { gap: 4px; vertical-align: middle; }
.later-note { display: none; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--later-soft); color: var(--fg); font-size: 13.5px; border-left: 4px solid var(--later); }
.sec.is-later > .body { display: none; }
.sec.is-later > .sec-later { display: block; margin: 12px 16px 14px; }
.mcol.is-later > .later-note { display: block; margin-top: 2px; }
.mcol.is-later > .mlist { display: none; }
.mtab.is-later b { color: var(--later); }
table.mt th.later .th-l { color: var(--later); }
.th-why { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--later); }
.sec-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.add-issue { color: var(--mute); }
.up.g .add-issue { height: 44px; font-size: 14px; }
.part-pick { display: grid; gap: 8px; }
.pick.later b { color: var(--later); }
.why-list { display: grid; gap: 8px; margin-top: 4px; }
.why-b { width: 100%; height: 52px; justify-content: flex-start; padding: 0 16px; font-size: 15.5px; }
.why-list .inrow input { height: 52px; font-size: 16px; }
.why-list .inrow .btn { height: 52px; }
.outs { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.outs legend { margin-bottom: 8px; padding: 0; font-weight: 650; }
.out-opt { display: flex; gap: 12px; align-items: flex-start; min-height: 60px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; }
.out-opt input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.out-opt > span { display: grid; gap: 2px; min-width: 0; }
.out-opt b { font-size: 15.5px; }
.out-opt small { color: var(--mute); font-size: 13px; }
.out-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); box-shadow: inset 0 0 0 1px var(--accent); }
.out-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.come-back { display: block; margin-top: 4px; color: var(--later); font-weight: 650; font-size: 13.5px; }
.add-issue-d { margin-top: 10px; height: 44px; }
.pill.out-partial { background: var(--later-soft); color: var(--later); }
.pill.out-issues { background: var(--bad-soft); color: var(--bad); }
.pill.out-complete { background: var(--good-soft); color: var(--good-ink); }
.u-visit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--later); }
.u-visit .iss-n { color: var(--bad); }
.fw-later { display: block; padding: 8px 12px; border-radius: 10px; background: var(--later-soft); color: var(--fg); font-size: 14px; }
.fw-later b { color: var(--later); }
.fw-row.later { border-left: 4px solid var(--later); }
/* B12: Yours (B21's assignment) first, late ones in red with the day they were due; then the rest under a quiet heading */
.fw-row.late { border-left: 4px solid var(--bad); }
.pill.st-late { background: var(--bad); color: var(--panel); }
.pill.st-mine { background: var(--info-soft); color: var(--info); }
.fw-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.fj-due { font-size: 13px; font-weight: 650; color: var(--mute); white-space: nowrap; }
.fj-due.is-late, .late-n { color: var(--bad); font-weight: 700; }
.fw-rest-h { margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.read-tag { width: 100%; height: 56px; font-size: 16px; margin-bottom: 4px; }
.read-tag svg { width: 22px; height: 22px; }

/* ---------- B2: Sun mode, for a phone in full sun (html[data-contrast=sun]) ----------
   Pure white and black, no greys under about 7:1, 2 px black borders, no translucency, shadows or hairlines, one step
   larger and heavier type, 56 px boxes. Levels and states carry a word and a mark, never colour alone; the few colours
   are deep, with white text. It beats dark mode while it is on. */
:root[data-contrast=sun] {
  --bg: #fff; --panel: #fff; --sunk: #fff; --fg: #000; --mute: #1a1a1a; --faint: #333; --line: #000; --line2: #000; --line-strong: #000;
  --good: #00661f; --good-soft: #fff; --good-ink: #00661f; --bad: #b00000; --bad-soft: #fff; --warn: #7a4a00; --warn-soft: #fff; --warn-ink: #7a4a00;
  --info: #0033aa; --info-soft: #fff; --shadow: none; --shadow-lg: none; --glass: #fff; color-scheme: light;
  --accent: #000; --on-accent: #fff; --brand-dark: #000; --brand-dark-ink: #fff;
  --yes-bg: #000; --yes-ink: #fff; --no-bg: #b00000; --no-ink: #fff; --na-bg: #333; --na-ink: #fff; --chip-bg: #fff; --sg-ink: #000;
  --later: #7a4a00; --later-soft: #fff; --cx: #4b0fb0; --cx-soft: #fff; --sig-bg: #fff; --on-warn: #fff;
}
:root[data-contrast=sun] *, :root[data-contrast=sun] *::before, :root[data-contrast=sun] *::after { box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
:root[data-contrast=sun] body { font-size: 16px; font-weight: 500; background: #fff; color: #000; }
:root[data-contrast=sun] :focus-visible { outline: 4px solid #000; outline-offset: 2px; }
:root[data-contrast=sun] .card, :root[data-contrast=sun] .top, :root[data-contrast=sun] .g-step, :root[data-contrast=sun] .g-bar, :root[data-contrast=sun] .sticky-actions, :root[data-contrast=sun] .bottom-tabs { border: 2px solid #000; }
:root[data-contrast=sun] .top, :root[data-contrast=sun] .g-step { border-width: 0 0 2px; }
:root[data-contrast=sun] .g-bar, :root[data-contrast=sun] .sticky-actions { border-width: 2px 0 0; }
:root[data-contrast=sun] .list > li, :root[data-contrast=sun] .yn, :root[data-contrast=sun] table.mt td, :root[data-contrast=sun] .sec > h2 { border-color: #000; border-top-width: 2px; }
:root[data-contrast=sun] .mute, :root[data-contrast=sun] .small, :root[data-contrast=sun] .sub, :root[data-contrast=sun] .crumbs, :root[data-contrast=sun] .crumbs a, :root[data-contrast=sun] .d, :root[data-contrast=sun] .g-n { color: #000; }
:root[data-contrast=sun] .small { font-size: 14px; }
:root[data-contrast=sun] label.f, :root[data-contrast=sun] .fld .fl, :root[data-contrast=sun] .yl, :root[data-contrast=sun] .ph, :root[data-contrast=sun] table.mt th, :root[data-contrast=sun] table.mt td:first-child { color: #000; font-weight: 650; font-size: 16px; }
:root[data-contrast=sun] .up.g .fld .fl, :root[data-contrast=sun] .up.g .prow > .fl, :root[data-contrast=sun] .up.g .yl { font-size: 17px; font-weight: 700; }
:root[data-contrast=sun] .in, :root[data-contrast=sun] .f input, :root[data-contrast=sun] .f select, :root[data-contrast=sun] .f textarea, :root[data-contrast=sun] table.mt td input, :root[data-contrast=sun] .ph input {
  min-height: 56px; height: auto; border: 2px solid #000; border-radius: 10px; background: #fff; color: #000; font-weight: 700; font-size: 19px; }
:root[data-contrast=sun] .f input.cb { min-height: 0; width: 26px; height: 26px; }
:root[data-contrast=sun] .f input:focus, :root[data-contrast=sun] .f select:focus, :root[data-contrast=sun] .f textarea:focus, :root[data-contrast=sun] table.mt td input:focus, :root[data-contrast=sun] .in:focus { outline: 4px solid #000; outline-offset: 1px; border-color: #000; }
:root[data-contrast=sun] ::placeholder { color: #444; opacity: 1; }
:root[data-contrast=sun] .unit-in .u, :root[data-contrast=sun] table.mt .u, :root[data-contrast=sun] .prow > .fl .u { color: #000; font-weight: 700; }
:root[data-contrast=sun] .btn, :root[data-contrast=sun] .chip, :root[data-contrast=sun] .pick, :root[data-contrast=sun] .mtab, :root[data-contrast=sun] .pm, :root[data-contrast=sun] .part-btn, :root[data-contrast=sun] .na-tog, :root[data-contrast=sun] .out-opt, :root[data-contrast=sun] .fw-row, :root[data-contrast=sun] .fw-card {
  border: 2px solid #000; border-style: solid; background: #fff; color: #000; font-weight: 700; }
:root[data-contrast=sun] .btn.primary, :root[data-contrast=sun] .btn.good, :root[data-contrast=sun] .g-bar .btn.good { background: #000; border-color: #000; color: #fff; }
:root[data-contrast=sun] .btn.ghost { border-color: #000; }
:root[data-contrast=sun] .btn.danger { color: #b00000; }
:root[data-contrast=sun] .btn:disabled { opacity: 1; color: #555; border-style: dashed; }
:root[data-contrast=sun] .seg { background: #fff; border: 2px solid #000; }
:root[data-contrast=sun] .seg button { color: #000; font-weight: 700; }
:root[data-contrast=sun] .seg button[aria-pressed=true] { background: #000; color: #fff; }
:root[data-contrast=sun] .yn .seg button[aria-pressed=true][data-v=Yes], :root[data-contrast=sun] .yn-f .seg button[aria-pressed=true][data-v=Yes] { background: #000; color: #fff; }
:root[data-contrast=sun] .yn .seg button[aria-pressed=true][data-v=No], :root[data-contrast=sun] .yn-f .seg button[aria-pressed=true][data-v=No] { background: #b00000; color: #fff; }
:root[data-contrast=sun] .yn .seg button[aria-pressed=true][data-v="N/A"], :root[data-contrast=sun] .yn-f .seg button[aria-pressed=true][data-v="N/A"] { background: #333; color: #fff; }
:root[data-contrast=sun] .seg button[aria-pressed=true][data-v=Yes]::before { content: "✓ "; }
:root[data-contrast=sun] .seg button[aria-pressed=true][data-v=No]::before { content: "✗ "; }
:root[data-contrast=sun] .seg button[aria-pressed=true][data-v="N/A"]::before { content: "– "; }
:root[data-contrast=sun] .mtab[aria-selected=true], :root[data-contrast=sun] .chip[aria-pressed=true], :root[data-contrast=sun] .part-btn[aria-pressed=true], :root[data-contrast=sun] .na-tog[aria-pressed=true], :root[data-contrast=sun] .pick.here { background: #000; border-color: #000; color: #fff; }
:root[data-contrast=sun] .mtab[aria-selected=true] b, :root[data-contrast=sun] .mtab[aria-selected=true] .n, :root[data-contrast=sun] .pick.here span, :root[data-contrast=sun] .pick.here b { color: #fff; }
:root[data-contrast=sun] .mtab .n, :root[data-contrast=sun] .pick span, :root[data-contrast=sun] .pick small, :root[data-contrast=sun] .fj-left, :root[data-contrast=sun] .fw-types b, :root[data-contrast=sun] .snav .n { color: #000; }
:root[data-contrast=sun] .mtab.is-na b, :root[data-contrast=sun] .mtab.is-later b { color: inherit; }
:root[data-contrast=sun] .out-opt:has(input:checked) { background: #000; color: #fff; outline: 0; }
:root[data-contrast=sun] .out-opt:has(input:checked) small, :root[data-contrast=sun] .out-opt:has(input:checked) .come-back { color: #fff; }
:root[data-contrast=sun] .pill { background: #fff; color: #000; border: 2px solid #000; font-weight: 750; font-size: 12.5px; height: 26px; }
:root[data-contrast=sun] .pill::before { background: #000; }
:root[data-contrast=sun] .bar { height: 12px; background: #fff; border: 2px solid #000; }
:root[data-contrast=sun] .bar > i { background: #000; }
:root[data-contrast=sun] .sg { background: #fff; border: 2px solid #000; border-left-width: 8px; color: #000; font-size: 16px; font-weight: 600; }
:root[data-contrast=sun] .sg.lv-alert { border-left-color: #b00000; }
:root[data-contrast=sun] .sg.lv-warn { border-left-color: #7a4a00; }
:root[data-contrast=sun] .sg.lv-info { border-left-color: #0033aa; }
:root[data-contrast=sun] .sg-l { color: #000; font-size: 12.5px; }
:root[data-contrast=sun] .sg.lv-alert .sg-l::before { content: "▲ "; }
:root[data-contrast=sun] .sg.lv-warn .sg-l::before { content: "! "; }
:root[data-contrast=sun] .sg.lv-info .sg-l::before { content: "i "; }
:root[data-contrast=sun] .sg summary, :root[data-contrast=sun] .u-edit, :root[data-contrast=sun] a, :root[data-contrast=sun] .cd-note summary { color: #000; text-decoration: underline; text-underline-offset: 3px; }
:root[data-contrast=sun] .btn, :root[data-contrast=sun] a.btn, :root[data-contrast=sun] .fw-row, :root[data-contrast=sun] .fw-card, :root[data-contrast=sun] .fw-go, :root[data-contrast=sun] .brand { text-decoration: none; }
:root[data-contrast=sun] .cv, :root[data-contrast=sun] .sf, :root[data-contrast=sun] .wx, :root[data-contrast=sun] .fw-later, :root[data-contrast=sun] .na-note, :root[data-contrast=sun] .later-note, :root[data-contrast=sun] .tip, :root[data-contrast=sun] .fc, :root[data-contrast=sun] .fc-sum { background: #fff; border: 2px solid #000; color: #000; font-size: 16px; font-weight: 600; }
:root[data-contrast=sun] .note-box { background: #b00000; color: #fff; }
:root[data-contrast=sun] .fw-note, :root[data-contrast=sun] .come-back, :root[data-contrast=sun] .u-visit, :root[data-contrast=sun] .fw-later b, :root[data-contrast=sun] .th-why { color: #000; font-weight: 750; }
:root[data-contrast=sun] .u-visit::before { content: "⏱ "; }
:root[data-contrast=sun] .fw-row.back { border-left: 8px solid #b00000; }
:root[data-contrast=sun] .fw-row.later { border-left: 8px solid #7a4a00; }
:root[data-contrast=sun] .fw-row.late { border-left: 8px solid #b00000; }
:root[data-contrast=sun] .pill.st-late { background: #b00000; color: #fff; border-color: #b00000; }
:root[data-contrast=sun] .fj-due, :root[data-contrast=sun] .fw-rest-h { color: #000; font-weight: 750; }
:root[data-contrast=sun] .fj-due.is-late, :root[data-contrast=sun] .late-n { color: #b00000; }
:root[data-contrast=sun] .fw-row.is-done { background: #fff; }
:root[data-contrast=sun] .save, :root[data-contrast=sun] .save.busy, :root[data-contrast=sun] .save.off { color: #000; font-weight: 750; }
:root[data-contrast=sun] .toast { background: #000; color: #fff; border: 2px solid #000; }
:root[data-contrast=sun] .toast button { border: 2px solid #fff; color: #fff; }
:root[data-contrast=sun] dialog { border: 3px solid #000; }
:root[data-contrast=sun] dialog::backdrop { background: #fff; }
:root[data-contrast=sun] .icon-btn { color: #000; }
:root[data-contrast=sun] .tabs a, :root[data-contrast=sun] .bottom-tabs a, :root[data-contrast=sun] .subtabs a { color: #000; }
:root[data-contrast=sun] .tabs a[aria-current=page], :root[data-contrast=sun] .subtabs a[aria-current=page] { background: #000; color: #fff; }
:root[data-contrast=sun] .pt-t tr.at { background: #000; color: #fff; }
:root[data-contrast=sun] .pt-t thead th { color: #000; }
:root[data-contrast=sun] .pt-t th, :root[data-contrast=sun] .pt-t td { border-top: 2px solid #000; }
:root[data-contrast=sun] .pt-tw, :root[data-contrast=sun] .add-photo { border: 2px solid #000; color: #000; }
:root[data-contrast=sun] .sigpad { border: 2px solid #000; }
:root[data-contrast=sun] .add-issue { color: #000; }
:root[data-contrast=sun] .g-bar .btn { height: 60px; font-size: 17px; }
:root[data-contrast=sun] .snav button { color: #000; font-weight: 650; }
:root[data-contrast=sun] .snav button.done .n, :root[data-contrast=sun] .pick.done .st { color: #000; }
:root[data-contrast=sun] .snav button.done .n::before, :root[data-contrast=sun] .pick.done .st::before { content: "✓ "; }
:root[data-contrast=sun] .st-returned, :root[data-contrast=sun] .st-cx_returned, :root[data-contrast=sun] .pill.out-issues { background: #b00000; color: #fff; border-color: #b00000; }
:root[data-contrast=sun] .st-returned::before, :root[data-contrast=sun] .st-cx_returned::before, :root[data-contrast=sun] .pill.out-issues::before { background: #fff; }
/* the sun button in the top bar */
.icon-btn[aria-pressed=true] { background: var(--fg); color: var(--bg); }
:root[data-contrast=sun] .icon-btn[aria-pressed=true] { background: #000; color: #fff; }

/* ---------- B9: Read the tag (public/js/nameplate.js) and the AI cards (public/js/aiaddon.js) ----------
   The sheet fills the phone; on a wide screen it is a centred panel. Every target a tech taps is 44 px or more. */
:root { --cam-bg: #000; --cam-ink: #fff; --paper: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --cam-bg: #000; --cam-ink: #fff; --paper: #fff; } }
:root[data-theme=dark] { --cam-bg: #000; --cam-ink: #fff; --paper: #fff; }
.tagread-btn { min-height: 44px; }
.tagread-btn svg { width: 18px; height: 18px; }
dialog.tagsheet { width: min(760px, calc(100vw - 32px)); height: min(900px, calc(100dvh - 32px)); max-height: none; padding: 0; overflow: hidden; }
dialog.tagsheet[open] { display: flex; flex-direction: column; }
@media (max-width: 640px) { dialog.tagsheet { width: 100vw; max-width: 100vw; height: 100dvh; margin: 0; inset: 0; border: 0; border-radius: 0; } }
.ts-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line2); }
.ts-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-x { width: 44px; height: 44px; }
.ts-body { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 16px; display: grid; gap: 16px; align-content: start; }
.ts-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line2); background: var(--panel); }
.ts-foot .btn { min-height: 48px; flex: 1 1 auto; }
.ts-foot .btn.primary { flex: 2 1 260px; font-size: 16px; }
.ts-start { display: grid; gap: 16px; justify-items: center; text-align: center; padding: 6px 0 4px; }
.ts-shoot { width: 100%; max-width: 440px; min-height: 180px; display: grid; place-items: center; align-content: center; gap: 12px; border-radius: 20px; border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel)); color: var(--accent); font: 700 20px var(--font); cursor: pointer; }
.ts-shoot:hover { background: color-mix(in srgb, var(--accent) 13%, var(--panel)); }
.ts-shoot svg { width: 60px; height: 60px; }
.ts-alt { justify-content: center; }
.ts-alt .btn { min-height: 48px; }
.ts-tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; text-align: left; width: 100%; max-width: 440px; }
.ts-tips li { padding: 10px 12px; border-radius: 12px; background: var(--sunk); font-size: 14.5px; }
.ts-start > p { max-width: 440px; margin: 0; }
.ts-busy { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 8px 0; }
.ts-busy h3 { font-size: 17px; }
.ts-busy-img { max-width: min(100%, 360px); max-height: 240px; border-radius: 12px; border: 1px solid var(--line); object-fit: contain; background: var(--sunk); }
.ts-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.ts-steps li { display: flex; align-items: center; gap: 10px; color: var(--mute); font-size: 15px; }
.ts-steps li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.ts-steps li svg { width: 18px; height: 18px; flex: none; }
.ts-steps li.now { color: var(--fg); font-weight: 650; }
.ts-steps li.now i { border-color: var(--accent); border-top-color: transparent; animation: ts-spin .8s linear infinite; }
.ts-steps li.done { color: var(--good); }
@keyframes ts-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ts-steps li.now i { animation: none; border-top-color: var(--accent); } }
.ts-banner { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; color: var(--fg); }
.ts-banner b { font-size: 15px; }
.ts-banner.warn { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.ts-banner.bad { background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); }
.ts-sum { margin: 0; font-size: 16px; }
.ts-sec { display: grid; gap: 8px; }
.ts-sec h3 { font-size: 15px; }
.ts-sec > p { margin: -4px 0 0; }
.ts-need, .ts-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ts-need li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.ts-need .grow { display: grid; gap: 2px; }
.ts-need .btn { min-height: 44px; flex: none; }
.ts-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 200px; gap: 10px; align-items: center; padding: 10px 12px 10px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ts-row.doubt { grid-template-columns: 44px minmax(0, 1fr) 260px; border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); background: color-mix(in srgb, var(--warn) 5%, var(--panel)); }
.ts-tick { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.ts-tick .cb { width: 26px; height: 26px; }
.ts-same { display: grid; place-items: center; color: var(--good); }
.ts-same svg { width: 24px; height: 24px; }
.ts-main { display: grid; gap: 4px; min-width: 0; }
.ts-lab { font-weight: 650; font-size: 13.5px; }
.ts-val { height: 44px; font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.ts-meta { font-size: 12.5px; color: var(--mute); overflow-wrap: anywhere; }
.ts-chip { display: inline-block; padding: 1px 8px; margin-right: 2px; border-radius: 99px; background: var(--warn-soft); color: var(--warn-ink, var(--warn)); font-weight: 700; }
.ts-now { color: var(--info); }
.ts-thumb { display: block; justify-self: end; height: 52px; width: auto; max-width: 200px; object-fit: contain; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); }
.ts-row.doubt .ts-thumb { height: 76px; max-width: 260px; }
.ts-thumb.none { visibility: hidden; width: 1px; border: 0; }
@media (max-width: 520px) { .ts-row, .ts-row.doubt { grid-template-columns: 44px minmax(0, 1fr); } .ts-thumb { grid-column: 2; justify-self: start; max-width: 100%; height: 44px; } .ts-row.doubt .ts-thumb { height: 72px; } .ts-thumb.none { display: none; } }
.ts-missing summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center; }
.ts-missing p { margin: 0; }
.ts-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-strip img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.ts-none { color: var(--mute); margin: 0; }
.ts-cam { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--cam-bg); }
.ts-cam video { width: 100%; height: 100%; object-fit: contain; }
.ts-count { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cam-ink); font: 800 120px var(--font); pointer-events: none; }
.ts-cam-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
/* AI on the owner's page and the company page */
.ai-defaults { display: grid; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line2); }
.ai-defaults > span:first-child { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-cos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; padding: 16px; }
.ai-co { display: grid; gap: 8px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; }
.ai-co.on { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.ai-co-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ai-co-h b { overflow-wrap: anywhere; }
.ai-co-f { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.ai-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--sunk); color: var(--fg); font: 650 13px var(--font); cursor: pointer; }
.ai-switch span { width: 34px; height: 20px; border-radius: 99px; background: var(--line); position: relative; }
.ai-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); transition: left .15s; }
.ai-switch[aria-checked=true] { color: var(--fg); border-color: color-mix(in srgb, var(--good) 45%, var(--line)); background: var(--good-soft); }
.ai-switch[aria-checked=true] span { background: var(--good); }
.ai-switch[aria-checked=true] span::after { left: 16px; }
.ai-meter { display: grid; gap: 4px; font-size: 13px; }
.ai-dot { margin: 0 6px; color: var(--faint); }
.ai-note { padding: 0 16px 14px; margin: 0; }
.ai-key { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; min-width: 0; }
.ai-key legend { font-weight: 650; font-size: 13px; padding: 0 4px; }
.ai-key p { margin: 0; }
.ai-company p { margin: 0; }
.ai-owner > .card-h { flex-wrap: wrap; }
.ai-owner > .card-h > .grow { min-width: min(100%, 280px); }
.ai-learn { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.ai-learn .cb { margin-top: 2px; }
.ai-learn > span { display: grid; gap: 4px; min-width: 0; }
.ai-tts { display: grid; gap: 10px; }
.ai-tt { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; }
.ai-tt-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ai-tt-h b { overflow-wrap: anywhere; }
.ai-tt-f, .ai-tt-edit .row { flex-wrap: wrap; gap: 8px; }
/* ---------- end of B9 ---------- */

/* ---------- B24: AI included (the allowance, a pause, the admin's pay as you go), tokens only ---------- */
.ai-meter.full .bar > i { background: var(--warn); }
.ai-paused { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--warn-soft); color: var(--fg); font-size: 14px; }
.ai-payg { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; }
.ai-payg p { margin: 0; }
.ai-payg > .row { flex-wrap: wrap; gap: 10px; }
.ai-ceil { flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.ai-ceil .f { min-width: min(100%, 180px); }
.ai-need { padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--fg); }
.ai-switch:disabled { opacity: .55; cursor: not-allowed; }
/* ---------- end of B24 ---------- */

/* ---------- B6: the global library, components on a sheet, Start from components ----------
   Colors only through the tokens above (both themes); chips that sit on the paper use the paper tokens, since the
   paper stays white in dark mode. */
:root { --lib-new: var(--good-ink); --lib-new-soft: var(--good-soft); --lib-draft: var(--warn-ink); --lib-draft-soft: var(--warn-soft); --lib-edit: var(--info); --lib-edit-soft: var(--info-soft); }
.madeof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.mo-h { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--mute); margin-right: 2px; }
.mo-h svg, .chip svg, .btn svg.cmp { width: 15px; height: 15px; }
.mo-h svg { color: var(--accent); }
.madeof .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.mo-part.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.chip.mo-add { border-style: dashed; color: var(--accent); }
.chip:hover { border-color: var(--faint); }
.cap-note { margin: 0; padding: 9px 13px; border-radius: 12px; background: var(--warn-soft); color: var(--fg); font-size: 13px; }
.sh-comp { position: absolute; z-index: 3; display: none; align-items: center; gap: 4px; max-width: 42%; height: 20px; padding: 0 8px 0 6px; margin: 0; transform: translateY(-50%);
  border: 0; border-radius: 999px; background: color-mix(in srgb, var(--paper-sel) 10%, var(--paper)); color: var(--paper-sel); box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper-sel) 28%, transparent);
  font: 650 11px/1 var(--font); cursor: pointer; white-space: nowrap; }
.sh-comp span { overflow: hidden; text-overflow: ellipsis; }
.sh-comp svg { width: 12px; height: 12px; flex: none; }
.sh-comp.first, .sh-comp.cur { display: inline-flex; }
.sh-comp.cur { background: var(--paper-sel); color: var(--paper); }
.sh-comp:focus-visible { outline: 2px solid var(--paper-sel); outline-offset: 2px; }
.ed-phone .sh-comp { display: none; }
.inst-box { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.inst-h { display: flex; gap: 10px; align-items: flex-start; }
.inst-h > svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 1px; }
.inst-h b, .inst-h .small { display: block; }
.inst-box .btn svg { width: 14px; height: 14px; }
.type-btn b { display: flex; align-items: center; gap: 7px; }
.type-btn b svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.type-btn.type-comp { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.type-pick.one { grid-template-columns: minmax(0, 1fr); }
.type-btn:focus-visible { border-color: var(--accent); }
/* the component picker */
.cp { display: grid; gap: 12px; min-width: 0; }
.cp-list { max-height: min(46vh, 420px); overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 0 6px 6px; overscroll-behavior: contain; }
.cp-g { position: sticky; top: 0; z-index: 1; margin: 0 -6px; padding: 9px 12px 5px; background: var(--panel); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.cp-item { display: grid; gap: 2px; width: 100%; min-height: 48px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.cp-item b { font-size: 14px; }
.cp-item span { font-size: 12.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-item:hover { background: var(--sunk); }
.cp-item[aria-pressed=true] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.cp-none { margin: 12px 6px 6px; }
.cp-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.cp-row > .f.grow { flex: 1 1 220px; }
.cp-n { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--mute); }
.cp-pick p { margin: 8px 0 0; }
/* The picker's Add and Cancel stay in reach however long the list is. */
#dlg-form:has(.cp) .dlg-actions { position: sticky; bottom: -20px; z-index: 2; margin: 12px -20px -20px; padding: 12px 20px 20px; background: var(--panel); border-top: 1px solid var(--line2); }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper .in { width: 52px; text-align: center; padding: 0 4px; }
.stepper output { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.step-b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: 700 18px/1 var(--font); cursor: pointer; }
.step-b:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.step-b:disabled { opacity: .35; cursor: default; }
/* the phone builder */
.pl-comp { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-weight: 600; }
.pl-comp svg { width: 12px; height: 12px; }
.pl-adds { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pl-adds .btn svg { width: 17px; height: 17px; }
.ed-phone .madeof .chip { min-height: 40px; height: auto; padding: 6px 12px; }
/* The phone list ends clear of the sticky Undo / Save bar, so its last buttons can be reached. */
.ed-phone .ed-list { padding-bottom: 76px; }
/* Start from components */
.sfc { display: grid; gap: 16px; }
.sfc-page h2 { display: flex; align-items: center; gap: 10px; }
.step-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 13.5px; flex: none; }
.sfc-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, .7fr) minmax(0, 1.2fr) minmax(0, 1.8fr); align-items: start; }
.sfc-err { display: block; min-height: 0; color: var(--bad); font-weight: 600; margin-top: 4px; }
.sfc-err:empty { display: none; }
.sfc-all { display: inline-flex; margin-left: 6px; vertical-align: middle; min-height: 24px; font-size: 12.5px; }
.trade-pick { flex: 0 0 auto; min-width: 0; }
.trade-pick select { width: auto; min-width: 150px; max-width: 100%; }
.cp-find { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cp-find .search { flex: 1 1 220px; }
.trades-f { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--mute); }
.trades-f legend { padding: 0; margin-bottom: 6px; }
.chip.chip-cb { gap: 7px; height: 34px; padding: 0 12px 0 9px; color: var(--fg); }
.chip.chip-cb:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); color: var(--accent); }
.chip.chip-cb input { width: 16px; height: 16px; margin: 0; }
.sfc-basics p { margin: 0; }
.sfc-ph { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 16px 0; }
.sfc-q { flex: 0 1 300px; }
.sfc-tip { margin: 6px 16px 0; }
.sfc-groups { display: grid; gap: 4px 18px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); padding: 8px 16px 16px; align-items: start; }
.sfc-g h3 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.sfc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sfc-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; }
.sfc-row.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.sfc-name { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 48px; padding: 6px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.sfc-name b { display: block; font-size: 14px; line-height: 1.3; }
.sfc-name .small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfc-name:hover { background: var(--sunk); }
.sfc-box { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 7px; border: 2px solid var(--faint); color: var(--on-accent); }
.sfc-row.on .sfc-box { background: var(--accent); border-color: var(--accent); }
.sfc-box svg { width: 16px; height: 16px; }
.sfc-bar { position: sticky; bottom: 0; z-index: 12; display: flex; gap: 12px; align-items: center; margin: 16px -20px -80px; padding: 12px 20px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.sfc-bar .grow { font-size: 13.5px; }
.sfc-over { color: var(--bad); font-weight: 650; }
/* the owner's Library */
.lib-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 6px; }
.lib-bar .search { flex: 1 1 260px; }
.lib-bar .seg .n { color: var(--faint); font-weight: 600; }
.lib-g { margin: 18px 0 10px; }
.lib-cards { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.lib-page .head > .grow { flex: 1 1 320px; }
.lib-card { align-content: start; }
.lib-card.off { opacity: .72; }
.lc-h { display: flex; gap: 8px; align-items: flex-start; }
.lc-h .t { color: var(--fg); text-decoration: none; }
.lc-h .t:hover { color: var(--accent); }
.lc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill.lib-seed { background: var(--sunk); color: var(--mute); }
.pill.lib-edited { background: var(--lib-edit-soft); color: var(--lib-edit); }
.pill.lib-new { background: var(--lib-new-soft); color: var(--lib-new); }
.pill.lib-draft { background: var(--lib-draft-soft); color: var(--lib-draft); }
.pill.lib-arch { background: var(--bad-soft); color: var(--bad); }
.mo-line { display: block; color: var(--fg); line-height: 1.5; }
.mo-line a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 2px; }
.mo-line a:hover { text-decoration-color: currentColor; }
.lc-src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-acts { margin-top: 2px; }
.lib-events .list .t { white-space: normal; }
.hist { max-height: 55vh; overflow: auto; margin: 0 -20px; }
.hist > li { padding: 10px 20px; }
@media (max-width: 1100px) { .sfc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sfc-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .sfc-grid { grid-template-columns: minmax(0, 1fr); }
  .sfc-groups { grid-template-columns: minmax(0, 1fr); padding: 6px 12px 12px; }
  .sfc-ph { padding: 14px 12px 0; }
  .sfc-q { flex: 1 1 100%; }
  .sfc-tip { margin: 6px 12px 0; }
  .sfc-bar { margin: 16px -12px -96px; bottom: calc(60px + env(safe-area-inset-bottom)); padding: 10px 12px; flex-wrap: wrap; }
  .sfc-bar .btn.lg { flex: 1 1 100%; height: 48px; }
  .lib-cards { grid-template-columns: minmax(0, 1fr); }
  .sfc-bar .grow { font-size: 12.5px; }
  .lib-bar .seg { width: 100%; }
  .lib-bar .trade-pick, .cp-find .trade-pick { flex: 1 1 100%; }
  .trade-pick select { width: 100%; min-width: 0; }
  .sfc-grid > :first-child { grid-column: auto; }
  .ed-phone .chip.chip-cb { height: 44px; }
  .lib-bar .seg button { flex: 1; padding: 0 6px; }
  .cp-row > .f.grow { flex: 1 1 150px; }
  .cp-list { max-height: 34vh; }
  .cp-find .trade-pick { flex: 0 0 132px; }
  .cp-find .search { flex: 1 1 150px; }
  .hist { margin: 0 -20px; }
}
@media (max-width: 440px) { .lib-tabs .mute { display: none; } .lib-tabs a { padding: 9px 10px; } }
@media (prefers-reduced-motion: reduce) { .sh-comp { transition: none; } }
/* ---------- end B6 ---------- */

/* ---------- B12: the persona test (a tech on a roof, gloves on, sun glare) ----------
   Every tap target on the phone form is at least 48 px, and no text he has to read there is under 14 px. */
.g-step .btn.sm { height: 48px; padding: 0 14px; font-size: 15px; }
.g-n { font-size: 15px; }
.up.g .crumbs, .up.g .crumbs a { font-size: 14px; }
.up.g .g-step .pill { height: 28px; font-size: 14px; }
.mtab .n { font-size: 14px; }
.ph { font-size: 14.5px; }
.up.g .u-details .f > span, .up.g .u-details label.f { font-size: 15px; }
.up.g .sig-row .small { font-size: 15px; }
/* One field or one row of amps not on this unit (compressor 2 on a one-compressor unit): what was typed is struck
   through, nothing counts, and the pressed button brings it back. */
.fld.is-na-one .na-one-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 48px; }
.na-was { color: var(--mute); text-decoration: line-through; }
.na-one { color: var(--mute); font-weight: 600; }
.prow-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.prow-h > .grow { min-width: 0; }
.prow.is-na .prow-h > .grow { color: var(--mute); text-decoration: line-through; }
.up.g .row-na { height: 48px; flex: none; }
tr.row-is-na > td:first-child { color: var(--mute); }
tr.row-is-na input { background: var(--sunk); border-style: dashed; }
/* A phone step of several cards (one part of a built-up unit): each card says its own name ("Checks"). */
.up.g .sec.in-part > h2 { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.up.g .sec.in-part > h2 > .grow { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; flex: 1 1 140px; font-size: 17px; }
/* ---------- B11: the issues log (open items), return visits and revisions ----------
   Tokens only, light and dark; big targets in the field; nothing wider than the screen. */
:root { --sev-high: var(--bad); --sev-high-soft: var(--bad-soft); --sev-normal: var(--warn-ink); --sev-normal-soft: var(--warn-soft); --sev-low: var(--mute); --sev-low-soft: var(--sunk); }
.iss-list { list-style: none; margin: 0; padding: 0; }
.iss { display: flex; gap: 12px; align-items: flex-start; padding: 12px var(--s4); border-top: 1px solid var(--line2); border-left: 4px solid transparent; min-width: 0; }
.iss:first-child { border-top: 0; }
.iss.is-open.sev-high { border-left-color: var(--sev-high); }
.iss.is-open.sev-normal { border-left-color: var(--sev-normal); }
.iss.is-done { background: var(--sunk); }
.iss-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.iss-top { display: flex; gap: 6px; flex-wrap: wrap; }
.iss-t { font-size: 16px; overflow-wrap: anywhere; }
.iss.is-done .iss-t { color: var(--mute); font-weight: 600; }
.iss-m { font-size: 13.5px; color: var(--mute); overflow-wrap: anywhere; }
.iss-m a { color: var(--fg); font-weight: 650; }
.iss-fix { font-size: 13.5px; color: var(--good-ink); font-weight: 600; overflow-wrap: anywhere; }
.pill.sev-high { background: var(--sev-high-soft); color: var(--sev-high); }
.pill.sev-normal { background: var(--sev-normal-soft); color: var(--sev-normal); }
.pill.sev-low { background: var(--sev-low-soft); color: var(--sev-low); }
.pill.iss-ok { background: var(--good-soft); color: var(--good-ink); }
.iss-ph { flex: none; width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--sunk); }
.iss-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iss-acts { display: grid; gap: 6px; flex: none; justify-items: end; }
.iss-acts .btn.good { height: 44px; }
.sec-iss { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.u-iss .card-h h2 .n, .rv-iss h3 .n { color: var(--mute); font-size: 13.5px; font-weight: 650; margin-left: 6px; }
.up.g .u-iss { display: none; }
.up.g.at0 .u-iss { display: block; }
.u-iss { margin-bottom: var(--s3); }
button.iss-n { border: 0; background: var(--bad-soft); color: var(--bad); font: 650 13.5px var(--font); min-height: 32px; padding: 0 10px; border-radius: 999px; cursor: pointer; }
.why-iss { margin-top: 8px; width: 100%; justify-content: flex-start; }
.up.g .why-iss { height: 48px; }
.iss-left { margin: 10px 0 0; color: var(--bad); font-weight: 650; font-size: 14px; }
/* raising one: big choices, one tap each */
.iss-about { margin: 0 0 10px; color: var(--fg2); }
.iss-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.iss-pick.own { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iss-pick.items { grid-template-columns: minmax(0, 1fr); }
.iss-match { color: var(--accent); font-weight: 700; } /* B12: the check that matches what was typed (a hint) */
.iss-pick legend { margin-bottom: 8px; padding: 0; font-weight: 650; font-size: 14px; }
.pick-b { display: grid; gap: 2px; align-content: center; min-height: 52px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.pick-b b { font-size: 15px; }
.pick-b small { color: var(--mute); font-size: 12px; line-height: 1.3; }
.pick-b[aria-pressed=true] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); box-shadow: inset 0 0 0 1px var(--accent); }
.pick-b.sev-high[aria-pressed=true] { border-color: var(--sev-high); background: var(--sev-high-soft); box-shadow: inset 0 0 0 1px var(--sev-high); }
.iss-photo { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.iss-cam { flex: 1; }
.iss-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.iss-rv { margin-top: 14px; font-size: 14px; align-items: flex-start; flex-wrap: nowrap; }
.iss-rv span { min-width: 0; }
.iss-quick { margin: 4px 0 12px; }
#dlg .danger[data-rm] { margin-top: 12px; }
@media (max-width: 420px) { .iss-pick { grid-template-columns: minmax(0, 1fr); } .pick-b { min-height: 48px; } .iss-acts .btn.good { padding: 0 12px; } }
/* the return visit: what it needs, the button that starts it, and the visit under way */
.rv-card { padding: var(--s4); margin-bottom: var(--s3); border-left: 5px solid var(--later); display: grid; gap: 10px; }
.rv-card.on { border-left-color: var(--info); }
.rv-card h2 { font-size: 19px; }
.rv-card p { margin: 0; }
.rv-card .iss-list { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.rv-sub { font-size: 14px; margin-top: 4px; }
.rv-go { width: 100%; height: 56px; font-size: 18px; }
.rv-needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rv-need { display: grid; gap: 1px; padding: 8px 12px; border-radius: 10px; background: var(--later-soft); }
.rv-need.issue { background: var(--bad-soft); }
.rv-need b { font-size: 15.5px; }
.rv-need span { font-size: 13.5px; color: var(--fg2); }
.rv-plan .fw-row { align-items: flex-start; }
.rv-plan .rv-needs { margin-top: 8px; }
.rv-last { display: block; margin-top: 6px; font-size: 13px; color: var(--mute); }
.rv-sum { margin: 0; font-size: 15px; }
.rv-why { margin-bottom: var(--s3); }
.tab-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--sunk); color: var(--fg2); font: 650 12px/1 var(--font); }
.lock-note { margin: 0 0 4px; padding: 10px 14px; border-radius: 10px; background: var(--sunk); color: var(--fg2); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sec.is-locked > h2 .grow::after { content: " · done before"; color: var(--mute); font-weight: 600; font-size: 13px; }
.sig-priors { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.sig-prior { margin: 0; display: grid; gap: 4px; }
.sig-prior .sig-img { height: 64px; width: auto; max-width: 100%; }
.sig-prior figcaption, .sig-now { font-size: 13px; color: var(--mute); }
.sig-now { margin: 0 0 6px; }
/* the review pages */
.rv-rev { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--info-soft); color: var(--fg); font-size: 14px; }
.rv-out { display: grid; gap: 2px; margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; border-left: 4px solid var(--good); background: var(--good-soft); font-size: 14px; }
.rv-out.out-partial, .rv-out.out-underway { border-left-color: var(--later); background: var(--later-soft); }
.rv-out.out-issues { border-left-color: var(--bad); background: var(--bad-soft); }
.rv-visits { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; }
.rv-visits li { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-iss .iss-list { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.rv-credit { margin: -2px 0 8px; font-size: 12.5px; font-style: italic; color: var(--mute); display: grid; gap: 2px; }
.rv-chg { font-style: normal; color: var(--later); font-weight: 600; }
.rv-sigs { display: flex; flex-wrap: wrap; gap: 16px; }
/* Sun mode (B2): black on white, words not colour */
:root[data-contrast=sun] .iss, :root[data-contrast=sun] .rv-card, :root[data-contrast=sun] .rv-need, :root[data-contrast=sun] .lock-note, :root[data-contrast=sun] .pick-b { background: #fff; color: #000; border-color: #000; }
:root[data-contrast=sun] .iss { border-top: 2px solid #000; }
:root[data-contrast=sun] .iss-m, :root[data-contrast=sun] .rv-need span, :root[data-contrast=sun] .pick-b small, :root[data-contrast=sun] .lock-note { color: #000; font-weight: 600; }
:root[data-contrast=sun] .pick-b[aria-pressed=true] { background: #000; color: #fff; }
:root[data-contrast=sun] .pick-b[aria-pressed=true] small { color: #fff; }
:root[data-contrast=sun] button.iss-n { background: #b00000; color: #fff; }
:root[data-contrast=sun] .rv-card { border: 2px solid #000; border-left-width: 8px; }
.rv-na, .rv-later { margin: 0; color: var(--mute); font-style: italic; font-size: 14px; }
.rv-later { color: var(--later); font-style: normal; font-weight: 600; }
.rv-cw { color: var(--mute); font-weight: 600; }
/* ---------- end B11 ---------- */
/* A photo or signature still on this phone (device queue): it shows, and says it goes up with signal. */
.photos figure.is-queued { outline: 2px dashed var(--warn); outline-offset: -2px; }
.q-tag { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: var(--panel); color: var(--fg); font: 650 13px var(--font); box-shadow: var(--e1); }
.row > .q-tag { position: static; }
.save-out { color: inherit; font-weight: 700; }
/* B15 flags: a part the unit's own data rules out reads as not on this unit, with why; one only some units have
   (ifEquipped) or not known yet is marked with a dashed edge and is not counted until answered. */
.yn.is-off .yl, .fld.is-off .fl { color: var(--mute); } /* muted by colour, never opacity: the words keep their contrast */
.yn.is-off .na-one { grid-column: 1 / -1; }
.yn.is-maybe { border-left: 3px dashed var(--line-strong); padding-left: 8px; }
.fld .na-own { margin-left: auto; }
.up.g .fld .na-own { height: 44px; }
.fld > .fl:has(.na-own) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* B12, critic Mike's low items: the save pill says all of its words on a phone; Remove photo, a toast's Undo and the
   crumbs are big enough for a gloved thumb. */
@media (max-width: 760px) { .save { width: auto; max-width: 132px; white-space: normal; line-height: 1.15; text-align: right; } }
.photos .x { width: 44px; height: 44px; font-size: 22px; }
.toast button { height: 44px; min-width: 64px; }
.crumbs a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
/* A primary button on dark is filled with the saturated brand tone (core.js darkFill), not the pale text tone, so it never
   reads as disabled (critic). */
:root[data-theme=dark]:not([data-contrast=sun]) .btn.primary { background: var(--brand-dark-fill, var(--accent)); border-color: var(--brand-dark-fill, var(--accent)); color: var(--brand-dark-fill-ink, var(--on-accent)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]):not([data-contrast=sun]) .btn.primary { background: var(--brand-dark-fill, var(--accent)); border-color: var(--brand-dark-fill, var(--accent)); color: var(--brand-dark-fill-ink, var(--on-accent)); } }
/* ---------- B22: trust, trial and leaving (public/js/trust.js, trial.js) ---------- */
.notice { display: grid; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.notice-i { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); padding: 10px var(--gutter); background: var(--info-soft); color: var(--fg); font-size: var(--t-sm); }
.notice-i > .grow { min-width: 220px; }
.notice-i .icon-btn { width: 34px; height: 34px; margin-left: auto; }
.access-state { display: flex; align-items: center; gap: var(--s3); padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sunk); }
.access-state .grow { display: grid; gap: 2px; }
.access-log { max-height: 360px; overflow: auto; border: 1px solid var(--line2); border-radius: var(--r-sm); }
.access-log .d, .access-log .t { white-space: normal; }
.row-f { display: flex !important; align-items: center; gap: var(--s2) !important; }
.row-f select { width: auto; }
.plan-pick { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.plan-pick legend { padding: 0; margin-bottom: 4px; }
.plan-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); cursor: pointer; }
.plan-opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan-opt input { margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.plan-opt > span { display: grid; gap: 2px; min-width: 0; }
.plan-opt .pill { margin-left: 6px; vertical-align: 1px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.progress { display: grid; gap: 8px; }
.progress .bar { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.progress .bar span { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.list .d .made { display: block; color: var(--fg2); }
.sup-off { color: var(--warn-ink); font-weight: 600; }
.test-mode { margin-bottom: var(--s3); }
.viewas .va-em { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
@media (max-width: 560px) { .viewas .va-em .va-long { display: none; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.center { text-align: center; }
.signup { max-width: 520px; }
@media (max-width: 760px) { .notice-i { padding: 10px var(--s4); } }
/* ---------- end B22 ---------- */

/* B23: the owner's Backups and storage card (public/js/ownerhealth.js) */
.oh-top { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--warn); border-radius: 10px; background: var(--warn-soft); font-weight: 600; }
.oh-top a { color: var(--fg); }
.oh-alerts > li { border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--panel)); }
.oh-alerts .small { color: var(--fg); overflow-wrap: anywhere; }
.oh-gauge { display: grid; gap: 6px; }
.oh-gauge .bar { height: 10px; border-radius: 5px; }
.oh-gauge .bar > i { border-radius: 5px; }
.oh-gauge.warn .bar > i { background: var(--warn); }
.oh-gauge p { margin: 0; }
.oh-warn { color: var(--warn-ink); font-weight: 600; }
.oh-bad { color: var(--bad); }
.oh .stack > p { margin: 0; }
.oh-cos .d, .oh-cos .small { overflow-wrap: anywhere; }
/* ---------- B12: the tag tray, the chip that keeps working, and two photos that disagree ---------- */
.tt-shots { display: grid; justify-items: center; gap: 12px; }
.tt-shoot { min-height: 120px; }
.tt-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.tt-thumbs li { position: relative; }
.tt-thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.tt-rm { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--fg); box-shadow: var(--shadow); cursor: pointer; }
.tt-rm svg { width: 20px; height: 20px; }
.tt-same { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--sunk); font-size: 14.5px; }
.tt-same .cb { margin-top: 3px; flex: none; }
.tt-same .tt-why { display: block; margin-top: 4px; color: var(--mute); font-size: 13.5px; }
:root[data-contrast=sun] .tt-same .tt-why { color: #000; }
.tagchip { position: sticky; top: calc(var(--top-h, 56px) + 6px); z-index: 20; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0 0 12px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--fg); box-shadow: var(--shadow); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.tagchip .grow { min-width: 0; }
.tagchip[data-state=done] { border-color: color-mix(in srgb, var(--good) 50%, var(--line)); }
.tagchip[data-state=error], .tagchip[data-state=offline] { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.tc-go { flex: none; padding: 6px 12px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; }
.tc-note { display: block; color: var(--mute); font-size: 13.5px; }
.tc-dot { flex: none; width: 12px; height: 12px; border-radius: 99px; background: var(--mute); }
.tc-dot.busy { background: var(--accent); animation: tcpulse 1.2s ease-in-out infinite; }
.tc-dot.ok { background: var(--good); }
.tc-dot.bad, .tc-dot.wait { background: var(--warn); }
@keyframes tcpulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tc-dot.busy { animation: none; } }
.tagchip-host { position: fixed; top: 8px; left: 8px; right: 8px; z-index: 30; }
.ts-from { white-space: nowrap; }
.ts-choices { display: grid; gap: 8px; margin-top: 8px; }
.ts-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
@media (max-width: 520px) { .ts-choice { grid-template-columns: auto minmax(0, 1fr); } .ts-choice .ts-thumb { grid-column: 2; justify-self: start; height: 40px; } }
.ts-choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ts-choice input { width: 20px; height: 20px; accent-color: var(--accent); }
.ts-choice .ts-thumb { height: 52px; }
.ts-row.ts-pick-row, .ts-row.doubt.ts-pick-row { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 520px) { .ts-row.ts-pick-row, .ts-row.doubt.ts-pick-row { grid-template-columns: minmax(0, 1fr); } }
:root[data-contrast=sun] .tagchip { background: #fff; color: #000; border: 2px solid #000; font-weight: 700; }
:root[data-contrast=sun] .tc-go { background: #000; color: #fff; }
:root[data-contrast=sun] .tt-same, :root[data-contrast=sun] .ts-choice { background: #fff; border: 2px solid #000; color: #000; }