/* Track app layer — built on the ASP design tokens (tokens/*.css). */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }

/* Wordmark lockup */
/* Track. wordmark per the 04/07 handoff: Suisse Screen 700, tight tracking,
   Ink, with the Track Rose dot (brand-only colour — deliberately not a token). */
.wordmark { display: flex; align-items: center; }
.track-mark { width: 22px; height: 22px; margin-right: 10px; }
.track-mark.dark { display: none; }
[data-theme="dark"] .track-mark.light { display: none; }
[data-theme="dark"] .track-mark.dark { display: block; }
/* Benchmark wordmark (matches the redesign artboards): Suisse Screen Medium,
   26px, tight tracking, with the ORANGE accent dot (was the Datum rose dot). */
/* Track logotype per design_handoff_track_logo (locked, 08/08): Suisse Screen
   Bold, -0.055em, rose full stop. Rose is IDENTITY only — never UI. Sidebar
   lockup: 22px mark + 22px logotype, gap 10 (the mark img is inline). */
/* The logotype is INK, not the brand navy literal: in the dark theme navy on
   navy is an invisible wordmark. The rose full stop is identity and never
   moves. (Rose on both grounds passes contrast; it was checked.) */
.wordmark-track { font-weight: var(--weight-wordmark); font-size: 22px; letter-spacing: -0.055em; color: var(--ink); line-height: 1; }
.wordmark-dot { color: var(--track-rose, #F5385D); }
.wordmark-lg { justify-content: center; margin-bottom: var(--space-3); }
.wordmark-lg .wordmark-track { font-size: 44px; }

/* Buttons */
.btn { appearance: none; border: 1px solid var(--hair-strong); background: var(--surface); color: var(--ink);
  padding: 10px 18px; border-radius: var(--radius-pill); font-family: var(--font-sans);
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--nav-hover); }
.btn.primary { background: var(--brand-blue); border-color: var(--link); color: var(--brand-light-grey); }
.btn.primary:hover { background: var(--brand-dark-blue); }
.btn.ghost { background: transparent; }
.linkbtn { appearance: none; background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); }
.linkbtn:hover { color: var(--anchor); }

/* Login / provisioning */
.centered { display: grid; place-items: center; min-height: 100vh; padding: 8vh 20px; background: var(--brief-bg); }
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 40px; max-width: 420px; width: 100%; text-align: center; }
.page-title, .card h1 { margin: 0 0 8px; font-size: var(--text-h2); font-weight: var(--weight-medium); letter-spacing: -0.02em; color: var(--ink); }
.muted { color: var(--text-muted); }
/* Text-error utility — layout metrics live on the login field only, so the
   class can't distort tone-classed pills/dots (`.pill.error`, `.dot.error`). */
.error { color: var(--status-error); }
p.error, td.error { font-size: var(--text-small); }
#login-error { min-height: 20px; margin: 12px 0 0; font-size: var(--text-small); }
.card .btn { margin-top: 12px; }
.card .btn + .btn { margin-left: 8px; }

/* Shell: rail + main */
.shell { display: flex; width: 100%; min-height: 100vh; background: var(--ground); }
/* Rail pinned to the viewport (Karan 07/07): max 100vh, never follows the
   page scroll — nav + footer always in reach; it scrolls internally if short. */
/* Benchmark §1.1: 216px rail on --brand-light-grey with a 1px --brand-grey-200 right
   border. The rail is identical on every screen — this was the single
   most-reported complaint about the current app, so its metrics live here and
   nowhere else. */
/* 200px and a tighter gutter (design_handoff_track_polish §1, 23/09) — the rail
   carries eighteen items in four groups now, so it needs less width, not more. */
.rail { width: 200px; flex: none; background: var(--rail-bg); border-right: 1px solid var(--rail-border);
  padding: 24px 12px 20px; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; max-height: 100vh; overflow-y: auto; scrollbar-width: thin; }
.rail-nav { margin-top: 44px; display: flex; flex-direction: column; }
/* 14px of air above the rule, and the block inset 10px to line up with the
   items' own 10px gutter — as drawn. */
.rail-foot { margin-top: 14px; padding: 14px 10px 0; border-top: 1px solid var(--rail-border);
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.user-chip { font-size: 11px; letter-spacing: 0.04em; color: var(--text-muted); }
.user-name { font-size: 13.5px; font-weight: var(--weight-medium); color: var(--ink); }
.user-title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }

/* Role-view toggle (Karan 09/07): Owners/Directors preview Track as a role. */
.user-name.viewas-trigger { cursor: pointer; }
.user-name.viewas-trigger:hover { color: var(--link); }
.user-name.viewas-trigger::after { content: '⌄'; margin-left: 5px; font-size: 11px; color: var(--text-muted); }
.viewas-menu { position: fixed; z-index: 130; min-width: 168px; background: var(--surface);
  border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--shadow-dialog);
  padding: 6px; display: flex; flex-direction: column; }
.viewas-menu button { appearance: none; text-align: left; background: none; border: 0;
  padding: 9px 13px; border-radius: var(--radius-pill); font: inherit; font-size: 13px;
  color: var(--ink); cursor: pointer; }
.viewas-menu button:first-child { color: var(--link); font-weight: var(--weight-medium); }
.viewas-menu button:hover { background: var(--nav-hover); }
.viewas-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
  padding: 10px 16px; background: var(--nav-hover); border: 1px solid var(--link);
  border-radius: var(--radius-pill); font-size: 13px; color: var(--ink); }
.viewas-banner .linkbtn { margin-left: auto; white-space: nowrap; }

#brand { cursor: pointer; }
#brand:hover .wordmark-track { color: var(--link); transition: color var(--dur-fast) var(--ease-out); }

/* About easter egg: frozen frosted screen, logo + version + credit. */
.about-overlay { position: fixed; inset: 0; z-index: 200; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(244, 244, 242, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1);
  animation: about-in var(--dur-base) var(--ease-out); }
@keyframes about-in { from { opacity: 0; } to { opacity: 1; } }
.about-version { margin-top: 18px; font-size: 15px; font-weight: var(--weight-medium); color: var(--ink); }
.about-build { font-family: var(--font-technical); font-size: 12px; color: var(--text-muted); }
.about-whatsnew { margin-top: 16px; appearance: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.55); border: 1px solid var(--hair); border-radius: var(--radius-pill);
  padding: 7px 16px; font-family: var(--font-sans); font-size: 11px; font-weight: var(--weight-medium);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.about-whatsnew:hover { background: var(--surface); border-color: var(--ink); }
.about-credit { margin-top: 26px; font-size: 11.5px; font-weight: var(--weight-medium); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }

/* NO hairlines — the group label is the separator (§1). The 22px is carried as
   margin-TOP on each following group, exactly as the prototype computes it
   (first 0, middle 22px, last auto), so the first group sits tight under the
   wordmark and the gap above Help is the flex push rather than a fixed pad. */
.nav-group { padding: 0; display: flex; flex-direction: column; gap: 1px; margin-top: 22px; }
.nav-group:first-child { margin-top: 0; }
/* Help, pinned to the foot above the name/sign-out block. */
.nav-group-foot { margin-top: auto; padding-top: 18px; }
/* Nav items as proper pill buttons, consistent with the app (Karan 07/07):
   quiet at rest, blue-tint hover, white pill when active. */
/* Benchmark rail items (artboards): 13.5px mixed-case (NOT uppercase), quiet at
   rest, white rounded pill in --brand-blue when active. */
.nav-item { appearance: none; background: none; border: 0; text-align: left; cursor: pointer;
  padding: 5px 10px; margin: 0; border-radius: var(--radius-pill); line-height: 1.4;
  font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none;
  color: var(--ink); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
  transform 120ms var(--ease-out); }
.nav-item:active { transform: scale(0.98); }
.nav-item:hover { background: var(--nav-hover); color: var(--ink); }
.nav-item.active { background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: var(--weight-medium); box-shadow: 0 1px 2px rgba(12,17,57,0.06); }
.nav-item.disabled { color: var(--ink-3); cursor: default; background: none; }

/* Capped for a sane reading measure on big monitors (design audit), but
   CENTERED in the space beside the rail — pinned-left left a dead right
   margin on wide screens (Karan 09/08). */
/* WIDE SCREENS (artboard 1g). The content column stays LEFT-ALIGNED against
   the 216px rail and the surplus becomes a single right-hand gutter — 404px at
   1980. Centring floats the column away from the rail and breaks the strong
   left edge the rest of Track is built on, which is why the artboard says so in
   words as well as in geometry. The cap itself is Karan's (1680, 25/08): 1g
   drew 1360 around turn 1's two-column Today, which turn 3 replaced. */
.main { flex: 1; position: relative; padding: 30px 56px 130px; min-width: 0; background: var(--ground); max-width: var(--content-max); margin: 0 auto 0 0; }

/* THE HEADER LINE (§4) — one row, every screen. The clocks used to be an
   absolutely-positioned block in the corner, which is why four layout rules
   carried a 160px right padding to clear it; they don't any more. */
.hdr { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 28px; }
.hdr-where { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hdr-screen { font-size: 9.5px; font-weight: var(--weight-medium); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); }
.hdr-date { font-size: 15px; font-weight: var(--weight-medium); letter-spacing: -0.01em; color: var(--ink); }
.hdr-date .yr { color: var(--ink-3); font-weight: var(--weight-regular); }
.hdr-back { appearance: none; background: none; border: 0; font-family: inherit;
  margin-left: 18px; padding: 0 0 2px; font-size: 12.5px; color: var(--link); cursor: pointer; }
.hdr-back:hover { text-decoration: underline; }
.hdr-gap { flex: 1; }
/* Where the "need you" pill lands (§6), 26px clear of the clocks (§4). */
.hdr-pill-slot { display: flex; align-items: center; gap: 10px; margin-right: 26px; }
.hdr-pill-slot:empty { margin-right: 0; }
.hdr-clocks { display: flex; align-items: flex-end; gap: 22px; }
.hdr-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hdr-clock-lab { font-size: 9.5px; font-weight: var(--weight-medium); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); }
.hdr-clock-time { font-family: var(--font-technical); font-size: 17px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.hdr-clock-rule { width: 1px; height: 26px; background: var(--hair); }
/* The colon blinks: on for the first half of every two seconds, DIM for the
   second — not off. steps(1) so it switches rather than fades.

   It used to go to zero, which is what a blinking colon does on a clock radio.
   On a phone it reads as a missing character instead: two of four screenshots
   Karan sent showed "05 23" and "09 53", and a still frame is how a clock on a
   phone is mostly seen. At 0.4 it still pulses and there is always a colon. */
@keyframes hdr-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.4; } }
.hdr-clock-time .cl { animation: hdr-blink 2s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .hdr-clock-time .cl { animation: none; } }
/* ON A PHONE the header line becomes the DATE LINE the mobile design draws
   (§13): "MON 23 SEP" on the left, "13:36 UK · 18:06 CHENNAI" on the right, in
   one row above the anchor. The clocks stay — they were never a desk
   affordance; half this practice is five and a half hours away — they just get
   smaller and lose their labels' second line. */
@media (max-width: 760px) {
  .hdr { margin-bottom: 16px; gap: 10px; align-items: center; }
  .hdr-where { flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; }
  .hdr-screen { display: none; }
  .hdr-date { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
  .hdr-date .yr { display: none; }
  .hdr-back { margin-left: 0; font-size: 12px; }
  .hdr-clocks { gap: 10px; align-items: center; }
  .hdr-clock { flex-direction: row; align-items: baseline; gap: 5px; }
  .hdr-clock-lab { font-size: 8.5px; letter-spacing: 0.1em; }
  .hdr-clock-time { font-size: 12px; }
  .hdr-clock-rule { display: none; }
  .hdr-clock + .hdr-clock::before { content: '·'; color: var(--ink-3); margin-right: 5px; }
}
.clock-time { color: var(--ink); font-weight: var(--weight-medium); }

/* (The old floating Ask Track pill is gone — ask-bar.js draws the corner disc + panel.) */

/* ── §5 micro-interactions ──────────────────────────────────────────────────
   Small, quick, and all on the same easing. A row nudges 2px on hover so the
   pointer feels like it is resting on something; pills and chips give under a
   press; the Help topic cards lift. Nothing here moves more than 2px. */
.bm-table tbody tr, table.data tbody tr {
  transition: transform 160ms var(--ease-out), background var(--dur-fast) var(--ease-out); }
.bm-table tbody tr:hover, table.data tbody tr:hover { transform: translateX(2px); }
.btn:active, .linkbtn:active { transform: scale(0.97); }
.btn { transition: background var(--dur-fast) var(--ease-out), transform 100ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .bm-table tbody tr, table.data tbody tr, .btn, .chip, .nav-item { transition: none; }
  .bm-table tbody tr:hover, table.data tbody tr:hover { transform: none; }
}

/* ── §6 "NEED YOU" — the pill, and the sheet behind it ───────────────────────
   The pill sits in the header's slot and is ABSENT when the count is nought;
   an empty pill would be a permanent reminder that there is nothing to be
   reminded of. The sheet is a right-edge panel rather than a dropdown because
   the list is a to-do, not a menu — it wants the height. */
.ntf-pill { appearance: none; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px 0 11px;
  border: 1px solid var(--chip-border); border-radius: var(--radius-pill); background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-out), transform 100ms var(--ease-out); }
.ntf-pill:hover { border-color: var(--brand-orange); }
.ntf-pill:active { transform: scale(0.97); }
.ntf-pill[aria-expanded="true"] { border-color: var(--brand-orange); }
.ntf-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-orange);
  box-shadow: 0 0 0 3px rgba(255, 80, 1, 0.18); flex: none; }
.ntf-pill .ntf-badge { font-family: var(--font-technical); font-size: 12.5px; color: var(--ink); }
.ntf-pill-text { font-size: 12.5px; color: var(--ink-2); }

.ntf-scrim { position: fixed; inset: 0; z-index: 140; background: rgba(12, 17, 57, 0.28);
  animation: bm-fade var(--dur-fast) var(--ease-out) both; }
.ntf-sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 141;
  width: 420px; max-width: 100vw; display: flex; flex-direction: column;
  background: var(--ground); border-left: 1px solid var(--hair);
  box-shadow: -24px 0 60px rgba(12, 17, 57, 0.22);
  animation: ntf-in var(--dur-base) var(--ease-out) both; }
@keyframes ntf-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ntf-sheet, .ntf-scrim { animation: none; } }

.ntf-head { flex: none; position: relative; padding: 26px 26px 20px; border-bottom: 1px solid var(--hair); }
.ntf-eyebrow { display: block; font-size: var(--text-caps); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-orange); }
.ntf-anchor { display: block; margin-top: 4px; font-size: var(--anchor-sm); font-weight: var(--weight-medium);
  line-height: 1; letter-spacing: -0.04em; color: var(--anchor); font-variant-numeric: tabular-nums; }
.ntf-lede { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); max-width: 34ch; }
.ntf-close { position: absolute; top: 20px; right: 20px; appearance: none; background: none; border: 0;
  font-size: 17px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 6px 10px; }
.ntf-close:hover { color: var(--ink); }

.ntf-scroll { flex: 1; min-height: 0; overflow-y: auto; }
/* The group header is a caps verb and a mono count sitting on the ink rule —
   the same rule a table head uses, because it is doing the same job. */
.ntf-group { display: flex; align-items: baseline; gap: 10px; margin: 0 26px;
  padding: 22px 0 8px; border-bottom: 1px solid var(--rule-head); }
.ntf-group-label { font-size: var(--text-caps); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink); }
.ntf-group-count { font-family: var(--font-technical); font-size: 11.5px; color: var(--ink-3); }

.ntf-item { display: grid; grid-template-columns: 7px 1fr auto; gap: 12px; align-items: start;
  padding: 14px 26px; border-bottom: 1px solid var(--hair-soft); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out); }
.ntf-item:hover { background: var(--row-hover); }
.ntf-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; }
.ntf-item-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ntf-title { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.ntf-sub { font-size: 11.5px; color: var(--ink-3); }
.ntf-age { font-family: var(--font-technical); font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.ntf-empty { margin: 0; padding: 40px 26px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.ntf-how { margin: 26px; padding: 18px 20px; background: var(--brief-bg); border-radius: 12px; }
.ntf-how-title { display: block; font-size: 13px; font-weight: var(--weight-medium); color: var(--ink); }
.ntf-how-list { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.ntf-how-list li { font-size: 12px; line-height: 1.55; color: var(--ink-2); }

@media (max-width: 760px) {
  /* On a phone the sheet rises from the bottom — the right edge is not a place
     a thumb goes (§13). */
  .ntf-sheet { top: auto; left: 0; width: auto; max-height: 82dvh; border-left: 0;
    border-top: 1px solid var(--hair); border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom); animation-name: ntf-in-phone; }
  @keyframes ntf-in-phone { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
}

/* ── §8 HELP ─────────────────────────────────────────────────────────────────
   Nine topic cards in three columns; open one and it takes the whole row, with
   its points laid out in as many columns as they fit. One at a time, because
   two open cards in a three-column grid reflow everything under them twice. */
.hp { display: flex; flex-direction: column; gap: 30px; }
.hp-open { display: flex; flex-direction: column; gap: 4px; }
.hp-anchor { font-size: var(--anchor-lg); font-weight: var(--weight-medium); line-height: 0.86;
  letter-spacing: -0.045em; color: var(--anchor); animation: bm-rise var(--bm-dur-rise) var(--ease-out) both; }
.hp-lede { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }

.hp-searchrow { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px;
  border: 1px solid var(--hair); border-radius: var(--radius-pill); background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-out); }
.hp-searchrow:focus-within { border-color: var(--link); }
.hp-search-mark { color: var(--ink-3); flex: none; }
.hp-search { flex: 1; min-width: 0; border: 0; background: none; font-family: var(--font-sans);
  font-size: 14px; color: var(--ink); }
.hp-keycap { font-family: var(--font-technical); font-size: 11px; color: var(--ink-3);
  border: 1px solid var(--hair); border-radius: 5px; padding: 2px 7px; flex: none; }

.hp-guide-card { appearance: none; font-family: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 16px; padding: 22px 26px; border: 0; border-radius: 14px;
  background: var(--brand-navy); color: var(--brand-white);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out); }
.hp-guide-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(12, 17, 57, 0.18); }
.hp-guide-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-orange); flex: none; }
.hp-guide-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.hp-guide-title { font-size: 17px; font-weight: var(--weight-medium); }
.hp-guide-line { font-size: 12.5px; line-height: 1.5; color: var(--brand-on-ink-1); }
.hp-guide-go { font-size: 12.5px; color: var(--brand-white); white-space: nowrap; flex: none; }

.hp-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.hp-topic { appearance: none; font-family: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 7px; padding: 20px 22px 18px;
  border: 1px solid var(--hair); border-radius: 14px; background: var(--surface); color: var(--ink);
  transition: transform 140ms var(--ease-out), border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out); }
.hp-topic:hover { transform: translateY(-2px); border-color: var(--link); box-shadow: 0 8px 24px rgba(12, 17, 57, 0.08); }
.hp-topic.open { grid-column: 1 / -1; border-color: var(--link); transform: none; }
.hp-topic-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hp-topic-n { font-family: var(--font-technical); font-size: 11.5px; color: var(--brand-orange); }
.hp-topic-hint { font-size: 11px; color: var(--ink-3); }
.hp-topic-title { font-size: 16.5px; font-weight: var(--weight-medium); letter-spacing: -0.015em; line-height: 1.25; }
.hp-topic-line { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.hp-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 28px;
  margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--hair); }
.hp-point { display: flex; flex-direction: column; gap: 5px; }
.hp-point-k { font-size: var(--text-caps); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.hp-point-v { font-size: 13px; line-height: 1.55; color: var(--ink); }
.hp-nomatch { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }

.hp-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.hp-col { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.hp-block { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hp-block-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hp-block-note { font-size: 12px; color: var(--ink-3); }
.hp-report { appearance: none; font-family: inherit; cursor: pointer; margin-left: auto;
  border: 1px solid var(--chip-border); border-radius: var(--radius-pill); background: none;
  padding: 6px 14px; font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.hp-report:hover { border-color: var(--link); color: var(--link); }
.hp-news { display: flex; flex-direction: column; gap: 10px; }
.hp-news-row { display: flex; gap: 11px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.hp-news-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-orange); flex: none; margin-top: 7px; }
.hp-tag { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-orange); }
.hp-keys { display: flex; flex-direction: column; }
.hp-keyrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--hair-soft); font-size: 13px; color: var(--ink); }

.hp-audit-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.hp-audit-sub { font-size: 12px; color: var(--ink-3); }
.hp-audit-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; gap: 14px;
  align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--hair); cursor: pointer; }
.hp-audit-row:hover { background: var(--row-hover); }
.hp-audit-n { font-family: var(--font-technical); font-size: 11.5px; color: var(--ink-3); }
.hp-audit-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hp-audit-title { font-size: 13.5px; font-weight: var(--weight-medium); color: var(--ink); }
.hp-audit-finding { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.hp-audit-detail { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); padding-top: 4px; }
.hp-audit-where { font-family: var(--font-technical); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.hp-audit-state { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.hp-audit-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

@media (max-width: 1100px) {
  .hp-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-cols { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 760px) {
  .hp-topics { grid-template-columns: minmax(0, 1fr); }
  .hp-audit-row { grid-template-columns: 22px minmax(0, 1fr); }
  .hp-audit-where { display: none; }
}

/* ── §8 THE GUIDE — /help/guide ──────────────────────────────────────────────
   220px of sticky contents against a 76ch measure. The measure is the point:
   this is the one screen in Track that is read rather than scanned. */
.gd { display: flex; flex-direction: column; gap: 34px; }
.gd-head { display: flex; flex-direction: column; gap: 4px; }
.gd-anchor { font-size: var(--anchor-lg); font-weight: var(--weight-medium); line-height: 0.86;
  letter-spacing: -0.045em; color: var(--anchor); animation: bm-rise var(--bm-dur-rise) var(--ease-out) both; }
.gd-eyebrow { color: var(--brand-orange); }
.gd-lede { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 70ch; }
.gd-grid { display: grid; grid-template-columns: 220px minmax(0, 76ch); gap: 56px; align-items: start; }
.gd-contents { position: sticky; top: 24px; display: flex; flex-direction: column; }
.gd-con-link { display: flex; gap: 11px; padding: 6px 0; text-decoration: none; }
.gd-con-n { font-family: var(--font-technical); font-size: 11px; color: var(--ink-3); flex: none; }
.gd-con-t { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.gd-con-link:hover .gd-con-t { color: var(--link); }
.gd-body-col { display: flex; flex-direction: column; gap: 44px; min-width: 0; }
.gd-sec { scroll-margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.gd-title { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-medium); letter-spacing: -0.02em; color: var(--ink); }
.gd-para { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.gd-steps { display: flex; flex-direction: column; }
.gd-step { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px;
  padding: 11px 0; border-top: 1px solid var(--hair); }
.gd-step:last-child { border-bottom: 1px solid var(--hair); }
.gd-step-k { font-size: 13px; font-weight: var(--weight-medium); color: var(--ink); }
.gd-step-v { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.gd-rule { display: flex; gap: 12px; padding: 16px 20px; background: var(--brief-bg); border-radius: 12px; }
.gd-rule-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-orange); flex: none; margin-top: 7px; }
.gd-rule span:last-child { font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.gd-try { appearance: none; font-family: inherit; cursor: pointer; align-self: flex-start;
  border: 1px solid var(--chip-border); border-radius: var(--radius-pill); background: none;
  padding: 8px 17px; font-size: 12.5px; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.gd-try:hover { border-color: var(--link); color: var(--link); }
.gd-divider { padding-top: 10px; border-top: 1px solid var(--rule-head); color: var(--ink-3); }
.gd-body p { font-size: 15px; line-height: 1.6; color: var(--ink); }
.gd-body ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.gd-body li { font-size: 14px; line-height: 1.55; color: var(--ink); }
.gd-body code { font-family: var(--font-technical); font-size: 12.5px; background: var(--surface-sunk);
  border-radius: 4px; padding: 1px 6px; }

@media (max-width: 1000px) {
  .gd-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .gd-contents { position: static; }
}

/* ── §14 RELEASE HISTORY ─────────────────────────────────────────────────────
   A spine with a dot per release. The dot says what kind: a filled anchor for
   a minor (x.y.0), a hollow one for a patch, and orange with a halo for the
   first release of an era — the two moments the whole thing changed name. */
/* Width law (18/10/2026): the page takes the full content column (W1); the
   reading rows cap their own text at a measure (W3), left-aligned. */
.rl { display: flex; flex-direction: column; gap: 26px; }
.rl-open { display: flex; flex-direction: column; gap: 4px; }
.rl-eyebrow { font-size: var(--text-caps); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-orange); }
.rl-anchor { font-size: var(--anchor-lg); font-weight: var(--weight-medium); line-height: 0.86;
  letter-spacing: -0.045em; color: var(--anchor); font-variant-numeric: tabular-nums;
  animation: bm-rise var(--bm-dur-rise) var(--ease-out) both; }
.rl-lede { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 74ch; }

.rl-strip { display: flex; align-items: flex-end; gap: 2px; height: 46px; }
.rl-week { flex: 1; min-width: 2px; border-radius: 1px 1px 0 0; transform-origin: bottom;
  animation: bm-grow var(--bm-dur-bar) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .rl-week { animation: none; } }

/* Help › Tedds runs (calc-verify.js): Calculate against past Tedds calcs. */
.cv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.cv-tile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.cv-tile-l { font-size: var(--text-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); }
.cv-tile-v { font-size: var(--text-h2); font-weight: var(--weight-medium); color: var(--anchor); font-variant-numeric: tabular-nums; }
.cv-tile-v.ok, .cv-table .ok { color: var(--status-ok); }
.cv-tile-v.attn, .cv-table .attn { color: var(--brand-orange); }
.cv-tile-v.bad, .cv-table .bad { color: var(--status-error); }
.cv-h { margin: 8px 0 0; font-size: 17px; font-weight: var(--weight-medium); color: var(--ink); }
.cv-tablewrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: 12px; }
.cv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cv-table th { text-align: left; font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); padding: 10px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.cv-table td { padding: 9px 12px; border-bottom: 1px solid var(--hair-soft); vertical-align: top; color: var(--ink); }
.cv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cv-table .mono, .cv-finding .mono { font-family: var(--font-technical); }
.cv-click { cursor: pointer; }
.cv-click:hover td { background: var(--nav-hover); }
.cv-pill { display: inline-flex; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; background: var(--surface-sunk); color: var(--text-secondary); }
.cv-pill.ok { background: color-mix(in srgb, var(--status-ok) 12%, var(--surface)); color: var(--status-ok); }
.cv-pill.attn { background: color-mix(in srgb, var(--brand-orange) 12%, var(--surface)); color: var(--brand-orange); }
.cv-pill.bad { background: color-mix(in srgb, var(--status-error) 10%, var(--surface)); color: var(--status-error); }
.cv-note { margin-top: 4px; font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); max-width: 48ch; }
.cv-count { margin: 0 0 8px; font-size: 12.5px; color: var(--text-secondary); }
.cv-findings { display: flex; flex-direction: column; gap: 10px; }
.cv-finding { padding: 14px 16px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.cv-finding-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-finding-head b { font-weight: var(--weight-medium); color: var(--ink); }
.cv-finding p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.cv-why > summary { cursor: pointer; list-style: none; }
.cv-why > summary::-webkit-details-marker { display: none; }
.cv-why > summary .cv-h::after { content: ' ▾'; color: var(--text-secondary); font-size: 13px; }
.cv-why:not([open]) > summary .cv-h::after { content: ' ▸'; }
.cv-prose { display: flex; flex-direction: column; gap: 14px; max-width: 78ch; margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.cv-prose b { color: var(--ink); font-weight: var(--weight-medium); }
.cv-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cv-causes { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
details.cv-finding > summary { cursor: pointer; list-style: none; }
details.cv-finding > summary::-webkit-details-marker { display: none; }
details.cv-finding[open] { border-color: var(--link); }
.cv-aform { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair-soft); }
.cv-arow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cv-aform label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.cv-arow label { flex: 1 1 200px; }
.cv-aform input, .cv-aform select, .cv-aform textarea { font: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--hair); border-radius: 8px; padding: 8px 10px; }
.cv-aform textarea { resize: vertical; }
.cv-aform input:focus, .cv-aform select:focus, .cv-aform textarea:focus { outline: 2px solid var(--link); outline-offset: 1px; }
.cv-hist { display: flex; flex-direction: column; }
.cv-hev { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--hair-soft); font-size: 13px; }
.cv-hev p { margin: 0; color: var(--ink-2); }
.cv-link { border: 0; background: none; color: var(--link); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0 0 0 6px; }
.cv-detailrow > td { background: var(--surface-sunk); padding: 0; }
.cv-detail { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.cv-dhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-h3 { margin: 6px 0 0; font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--link); }
.cv-dcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; }
.cv-kv td { padding: 6px 10px; }
.cv-gov td { background: color-mix(in srgb, var(--brand-orange) 7%, var(--surface)); }
.cv-working summary { cursor: pointer; font-size: 12.5px; color: var(--link); }
.cv-badtxt { color: var(--status-error); }
.cv-finding .cv-ev { font-size: 12px; color: var(--text-secondary); }

.rl-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rl-search { border: 1px solid var(--hair); border-radius: 8px; padding: 9px 15px; font-size: 12.5px;
  font-family: var(--font-sans); color: var(--ink); background: var(--surface); min-width: 240px; }
.rl-search:focus { outline: 2px solid var(--link); outline-offset: 1px; }

.rl-month { font-size: var(--text-caps); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3);
  padding: 26px 0 10px; }
.rl-row { display: grid; grid-template-columns: 26px minmax(0, 80ch) 132px; gap: 16px; font-size: 13.5px; /* ch = the text's own */
  padding: 12px 0; border-bottom: 1px solid var(--hair-soft); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out); }
.rl-row:hover { background: var(--row-hover); }
.rl-spine { position: relative; display: flex; justify-content: center; }
/* The spine itself: a 2px rule running the height of the row, behind the dot. */
.rl-spine::before { content: ''; position: absolute; top: -12px; bottom: -13px; width: 2px;
  background: var(--hair); }
.rl-dot { position: relative; z-index: 1; border-radius: 50%; margin-top: 4px; }
.rl-dot.minor { width: 12px; height: 12px; background: var(--anchor); box-shadow: 0 0 0 3px var(--ground); }
.rl-dot.patch { width: 9px; height: 9px; background: var(--hollow-bg);
  border: 2px solid var(--hair-strong); box-shadow: 0 0 0 3px var(--ground); }
.rl-dot.era { width: 12px; height: 12px; background: var(--brand-orange);
  box-shadow: 0 0 0 3px var(--ground), 0 0 0 7px rgba(255, 80, 1, 0.18); }
.rl-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rl-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rl-first { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.rl-era-pill { font-size: 9.5px; font-weight: var(--weight-medium); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand-orange); border: 1px solid var(--brand-orange);
  border-radius: var(--radius-pill); padding: 2px 9px; white-space: nowrap; }
.rl-new { font-size: 9.5px; font-weight: var(--weight-medium); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--link); white-space: nowrap; }
.rl-counts { display: flex; gap: 16px; flex-wrap: wrap; }
.rl-count { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3); }
.rl-item-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.rl-items { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.rl-item { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 11px; align-items: start;
  font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.rl-item .rl-item-dot { margin-top: 7px; }
.rl-tag { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-orange); }
.rl-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rl-v { font-family: var(--font-technical); font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.rl-date { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.rl-more { appearance: none; font-family: inherit; cursor: pointer; margin-top: 22px; align-self: flex-start;
  border: 1px solid var(--chip-border); border-radius: var(--radius-pill); background: none;
  padding: 9px 18px; font-size: 12.5px; color: var(--ink); }
.rl-more:hover { border-color: var(--link); color: var(--link); }
.rl-nomatch { margin: 22px 0 0; font-size: 13px; color: var(--ink-2); }

/* Help › What Ask Track searches (views/library-index.js): a source heading,
   folder captions, and one quiet row per document. */
.li-source { display: flex; flex-direction: column; gap: 4px; padding: 26px 0 8px; border-bottom: 1px solid var(--hair); }
.li-source-title { font-size: 15px; font-weight: var(--weight-medium); color: var(--ink); }
.li-source-meta { font-size: 11.5px; color: var(--ink-3); }
.li-stale { font-size: 11.5px; color: var(--brand-orange); }
.li-folder { font-family: var(--font-technical); font-size: 11px; color: var(--ink-3); padding: 14px 0 4px; overflow-wrap: anywhere; }
.li-row { display: grid; grid-template-columns: minmax(0, 96ch) 48px 88px; gap: 12px; align-items: baseline; font-size: 13px;
  padding: 8px 0; border-bottom: 1px solid var(--hair-soft); }
.li-name { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.li-type { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.li-count { font-size: 11.5px; color: var(--ink-3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .li-row { grid-template-columns: minmax(0, 1fr) auto; }
  .li-type { display: none; }
}

@media (max-width: 760px) {
  .rl-row { grid-template-columns: 22px minmax(0, 1fr); }
  .rl-meta { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 10px; }
}

/* (§9 action row: retired 07/10/2026 — the project page now uses .pdx-pill, see PROJECT DETAIL at the end.) */

/* ── §15 TRACK IN NUMBERS — the easter egg ───────────────────────────────────
   Deliberately NOT themed: navy in both, because it is a moment rather than a
   screen. Triple-click the wordmark; Owner only; Esc closes. */
.tn { position: fixed; inset: 0; z-index: 1100; background: var(--brand-navy); color: var(--brand-white);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box; animation: bm-fade var(--dur-base) var(--ease-out) both; }
.tn-scroll { height: 100%; overflow-y: auto; }
.tn-inner { max-width: 1080px; margin: 0 auto; padding: 8vh 40px 12vh; display: flex; flex-direction: column; gap: 56px; }
.tn-close { position: fixed; top: calc(24px + env(safe-area-inset-top, 0px)); right: 28px; appearance: none; cursor: pointer;
  font-family: var(--font-technical); font-size: 11px; letter-spacing: 0.1em; color: var(--brand-on-ink-2);
  background: none; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; padding: 5px 11px; }
.tn-close:hover { color: var(--brand-white); border-color: rgba(255, 255, 255, 0.4); }

.tn-wordmark { font-weight: var(--weight-wordmark); font-size: 15vw; line-height: 0.82;
  letter-spacing: -0.055em; color: var(--brand-white); }
.tn-dot { color: var(--track-rose, #F5385D); }
.tn-since { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  font-size: 13px; color: var(--brand-on-ink-1); }
.tn-uptime { font-family: var(--font-technical); font-variant-numeric: tabular-nums;
  color: var(--brand-white); }

.tn-sect { display: flex; flex-direction: column; gap: 22px; }
.tn-eyebrow { font-size: var(--text-caps); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-orange); }
.tn-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px; }
.tn-fig { display: flex; flex-direction: column; gap: 7px; }
.tn-fig-n { font-size: var(--anchor-md); font-weight: var(--weight-medium); line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tn-fig-l { font-size: var(--text-caps); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-on-ink-2); }
.tn-fig-s { font-size: 12.5px; line-height: 1.5; color: var(--brand-on-ink-1); }

.tn-vs { display: flex; flex-direction: column; gap: 26px; }
.tn-wait { font-size: 13px; color: var(--brand-on-ink-2); }
.tn-saved { display: flex; flex-direction: column; gap: 7px; }
.tn-saved-n { font-size: var(--anchor-lg); font-weight: var(--weight-medium); line-height: 0.9;
  letter-spacing: -0.045em; color: var(--brand-orange); font-variant-numeric: tabular-nums; }
.tn-bars { display: flex; flex-direction: column; gap: 12px; }
.tn-bar-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 170px; gap: 18px; align-items: center; }
.tn-bar-l { font-size: 13px; color: var(--brand-on-ink-1); }
.tn-bar { height: 12px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
/* A minimum of 3px: at £75 against £4,550 Track's bar is one and a half percent
   of the track, and a bar that rounds to nothing reads as no bar at all —
   which is a different claim from a very small one. */
.tn-bar-fill { display: block; height: 12px; min-width: 3px; border-radius: 2px; transform-origin: left center;
  animation: bm-grow-x var(--bm-dur-bar) var(--ease-out) 200ms both; }
.tn-bar-fill.sf { background: var(--brand-orange); }
.tn-bar-fill.tk { background: rgba(157, 182, 255, 0.85); }
.tn-bar-v { font-family: var(--font-technical); font-size: 12.5px; color: var(--brand-white);
  text-align: right; font-variant-numeric: tabular-nums; }
.tn-rates { display: flex; gap: 32px; flex-wrap: wrap; font-size: 13px; color: var(--brand-on-ink-1); }

.tn-holds { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 26px 32px; }
.tn-hold { display: flex; flex-direction: column; gap: 6px; }
.tn-hold-n { font-family: var(--font-technical); font-size: var(--figure-sm); font-weight: var(--weight-medium);
  line-height: 1; font-variant-numeric: tabular-nums; }
.tn-hold-l { font-size: var(--text-caps); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-on-ink-2); }
.tn-hold-why { font-size: 11px; color: var(--brand-on-ink-3); }

.tn-notes { display: flex; flex-direction: column; gap: 10px; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12); }
.tn-notes p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--brand-on-ink-2); max-width: 88ch; }
.tn-notes code { font-family: var(--font-technical); }

@media (prefers-reduced-motion: reduce) { .tn, .tn-bar-fill { animation: none; } }
@media (max-width: 760px) {
  .tn-inner { padding: 6vh 20px 10vh; gap: 40px; }
  .tn-wordmark { font-size: 24vw; }
  .tn-bar-row { grid-template-columns: 84px minmax(0, 1fr); }
  .tn-bar-v { grid-column: 2; text-align: left; }
}

/* ── §8 Help: the issues register and the AI-costs block ─────────────────── */
.iss-list { display: flex; flex-direction: column; }
.iss-row { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 12px;
  align-items: start; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); }
.iss-row.done { opacity: 0.6; }
.iss-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; }
.iss-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.iss-text { font-size: 13px; line-height: 1.45; color: var(--ink); }
.iss-sub { font-size: 11.5px; color: var(--ink-3); }
.iss-state { font-family: var(--font-technical); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

.cs { display: flex; flex-direction: column; gap: 8px; }
.cs-fig { font-size: var(--figure); font-weight: var(--weight-medium); line-height: 1;
  letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cs-note { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
/* A BUDGET, not a limit: nothing stops at the ceiling, and the bar says so when
   it is passed rather than sitting full and silent. */
.cs-bar { display: block; height: 5px; border-radius: 3px; background: var(--surface-sunk);
  overflow: hidden; margin-top: 2px; }
.cs-bar-fill { display: block; height: 5px; border-radius: 3px; background: var(--link);
  transform-origin: left center; animation: bm-grow-x var(--bm-dur-bar) var(--ease-out) 200ms both; }
.cs-bar-fill.over { background: var(--brand-orange); }
.cs-ceiling { font-size: 11.5px; color: var(--ink-3); }
.cs-more { appearance: none; align-self: flex-start; margin-top: 4px; cursor: pointer;
  background: none; border: 0; padding: 0; font-family: inherit; font-size: 12.5px; color: var(--link); }
.cs-more:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .cs-bar-fill { animation: none; } }

/* §9 — the four-node chain above the history: did this get all the way
   through? Four shapes instead of forty rows. */
.gt-chain { display: flex; align-items: flex-start; margin: 0 0 18px; }
.gt-chain-step { flex: 1; display: flex; flex-direction: column; align-items: center;
  position: relative; min-width: 0; }
.gt-chain-node { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  position: relative; z-index: 1; animation: bm-pop var(--bm-dur-pop) var(--ease-out) both; }
.gt-chain-node.passed { background: var(--ink-fill); }
.gt-chain-node.attention { background: var(--brand-orange); }
.gt-chain-node.unreached { background: var(--hollow-bg); border: 1.5px solid var(--hair-strong); }
.gt-chain-conn { position: absolute; top: 5px; height: 2px; left: calc(-50% + 6px);
  width: calc(100% - 12px); background: var(--hair-strong); transform-origin: left center;
  animation: bm-draw var(--bm-dur-draw) var(--ease-out) both; }
.gt-chain-conn.on { background: var(--ink-fill); }
.gt-chain-label { margin-top: 9px; font-size: var(--text-caps); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); text-align: center; }
@media (prefers-reduced-motion: reduce) { .gt-chain-node, .gt-chain-conn { animation: none; } }

/* Summary's charts scale UNIFORMLY (24/09). They were stretched to a fixed
   height with preserveAspectRatio="none", which on a full-width card smeared
   every label sideways and drew the trajectory's dots as ellipses. Capped so a
   very wide screen does not turn a chart into a landscape strip; the natural
   size is the 1000-unit drawing, which is what the artboard specifies. */
.sm-chart { display: block; width: 100%; max-width: 1180px; height: auto; }

/* ── SCROLLBARS ──────────────────────────────────────────────────────────────
   The prototype hides them outright — `scrollbar-width: none` and
   `::-webkit-scrollbar { display: none }`. That is right for a design canvas,
   which is one page somebody looks at; it is wrong for an application people
   scroll all day, because the scrollbar is the only thing telling them how much
   of a 3,000-row register is below the fold, and a page that scrolls with no
   indication it scrolls is a page whose content people do not find.

   So: thin and quiet, in the palette, rather than absent. It is the design's
   intent — no heavy grey system chrome down the edge of the page — without
   taking away the one thing the bar is for. Hiding them completely is
   `scrollbar-width: none` here and one line in the webkit block. */
* { scrollbar-width: thin; scrollbar-color: var(--hair-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* The inner scrollers that carry their own affordance — a register that swipes,
   the phone's month grid — keep none, as they did. */
.bm-scroll-x { scrollbar-width: none; }
.bm-scroll-x::-webkit-scrollbar { display: none; }

/* The record's FIRST paint, from the row you just clicked — the number, the
   client and the scheme are in cache before the server is asked anything, and
   they are the four things you looked at the row to check. The full render
   replaces this the moment the panels land. */
.pd-first { display: flex; flex-direction: column; gap: 6px; padding-top: 4px;
  animation: bm-rise var(--bm-dur-rise) var(--ease-out) both; }
.pd-first-no { font-size: var(--anchor-lg); font-weight: var(--weight-medium); line-height: 0.86;
  letter-spacing: -0.045em; color: var(--anchor); }
.pd-first-client { font-size: var(--text-h3); font-weight: var(--weight-medium);
  letter-spacing: -0.02em; color: var(--ink); }
.pd-first-sub { font-size: 14px; line-height: 1.4; color: var(--ink-2); max-width: 58ch; }
.pd-first-wait { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 760px) { .pd-first-no { font-size: var(--anchor-md); } }

/* Shared primitives */
.eyebrow { font-size: 13px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-orange); }
.eyebrow.blue { color: var(--link); }
.h1 { margin: 0; font-size: var(--text-h1); font-weight: var(--weight-medium); letter-spacing: -0.02em; color: var(--ink); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--hair-strong); vertical-align: middle; }
.dot.ok { background: var(--status-ok); }
.dot.warn { background: var(--brand-orange); }
.dot.hold { background: var(--status-hold); }
.dot.error { background: var(--status-error); }
.dot.info { background: var(--brand-blue); }

/* ─────────────────────────────────────────────────────────────────────────
   Benchmark type primitives (HANDOFF §1.2, §1.7). The atomic classes the
   redesign composes: the anchor figure, the card figure, the eyebrow, the
   editorial/body/meta text, and the Monitor technical cut. Anchors and card
   figures are Suisse Screen Medium (500) — the family default carries it.
   The composite components (figures card, brief block, table row) build on
   these in §7.2. Marks come from marks.js.
   ───────────────────────────────────────────────────────────────────────── */

/* The 10px orange caps eyebrow (§1.7). Blue variant for non-attention labels. */
.bm-eyebrow { font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--brand-orange); }
.bm-eyebrow.blue { color: var(--link); }
.bm-eyebrow.grey { color: var(--ink-3); }

/* The anchor: one figure in --brand-dark-blue per screen (§1.2). 88px left with an
   orange caps label and a single grey line, or 68px right where a title +
   period control exist. Mobile drops to 52px (§1.9). "Never two competing
   figures." */
.bm-anchor { font-weight: var(--weight-medium); font-size: var(--anchor-lg); line-height: 1;
  letter-spacing: var(--tracking-display); color: var(--anchor); }
.bm-anchor.md { font-size: var(--anchor-md); }
.bm-anchor-label { font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--brand-orange); }
.bm-anchor-line { height: 1px; background: var(--hair-strong); border: 0; }

/* The four card figures: 38px over 10px caps labels (§1.4). */
.bm-figure { font-weight: var(--weight-medium); font-size: var(--figure); line-height: 1;
  letter-spacing: -0.02em; color: var(--anchor); }
.bm-figure.sm { font-size: var(--figure-sm); }
.bm-figure-label { font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink-3); }

/* Editorial (the brief, §1.3), body, meta, and the Monitor technical cut. */
.bm-editorial { font-size: var(--text-editorial); line-height: var(--leading-body); color: var(--ink);
  max-width: 90ch; text-wrap: pretty; }
.bm-body { font-size: var(--text-body-bm); line-height: 1.5; color: var(--ink); }
.bm-meta { font-size: var(--text-meta); color: var(--ink-3); }
.bm-mono { font-family: var(--font-technical); }

/* The six marks render inline (marks.js). Keep them optically aligned with the
   text they sit beside. */
.mark { display: inline-block; vertical-align: middle; flex: none; }

/* ─────────────────────────────────────────────────────────────────────────
   Benchmark shared components (§7.2) — the anchor open, the figures card with
   its thread chain, the brief block, and the data table. Built by bm.js.
   ───────────────────────────────────────────────────────────────────────── */

/* §1.2 The anchor open. */
.bm-open { animation: bm-rise var(--bm-dur-rise) var(--ease-out) both; }
.bm-open-date { margin-bottom: 14px; }
.bm-open .bm-anchor-label { margin-bottom: 6px; }
.bm-open .bm-anchor-line { width: 220px; max-width: 60%; margin: 18px 0 0; }
.bm-open-sub { margin-top: 14px; font-size: var(--text-body-bm); color: var(--ink-2); max-width: 70ch; }
.bm-open.right { text-align: right; }
.bm-open.right .bm-anchor-label { margin-bottom: 4px; }

/* The standard opening row: the anchor on the left, the brief filling the rest.
   Screens that lead with an assessment (review surfaces) use this. */
.bm-open-row { display: flex; gap: 40px; align-items: flex-start; margin-top: 22px; }
.bm-open-row > :first-child { flex: none; min-width: 150px; }
.bm-open-row > :last-child { flex: 1; min-width: 0; }

/* §1.4 The figures card. */
/* §11: radius 14 and 22px 26px as drawn — the card was a step roomier than
   the artboard and every screen inherits it, so it read as a different grid. */
.bm-card { border: 1px solid var(--hair); border-radius: 14px; padding: 22px 26px; background: var(--surface); }
.bm-card-figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.bm-cfig { display: flex; flex-direction: column; gap: 8px; animation: bm-rise var(--bm-dur-figure) var(--ease-out) both; }
.bm-hair { border: 0; border-top: 1px solid var(--hair); margin: 24px 0; }
.bm-card-chain { padding-top: 2px; }

/* §1.5 The thread chain. Nodes pop, connectors draw, both staggered; the fill
   stops dead at the break. */
.bm-chain { display: flex; align-items: flex-start; --node: 12px; }
.bm-chain.rows { --node: 8px; }
.bm-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; min-width: 0; }
.bm-node { width: var(--node); height: var(--node); border-radius: 50%; box-sizing: border-box; position: relative; z-index: 1;
  animation: bm-pop var(--bm-dur-pop) var(--ease-out) both; }
.bm-node.passed { background: var(--ink-fill); }
/* The node you are ON breathes: 3px of halo to 6px and back, for as long as
   you are looking at it (§5). The one continuous animation in the app besides
   the clock's colon, and it is slow enough to read as presence rather than as
   something demanding to be clicked. */
.bm-node.current { background: var(--brand-blue); box-shadow: 0 0 0 3px var(--halo);
  animation: bm-pop var(--bm-dur-pop) var(--ease-out) both,
             bm-halo 2400ms linear 900ms infinite; }
.bm-node.unreached { background: var(--hollow-bg); border: 1.5px solid var(--hair-strong); }
.bm-node.attention { background: var(--brand-orange); }
/* The rule between nodes. Anchored at the node's vertical centre, spanning the
   gap from the previous node's centre to this one's. */
.bm-conn { position: absolute; top: calc(var(--node) / 2 - 1px); height: 2px;
  left: calc(-50% + var(--node) / 2); width: calc(100% - var(--node));
  background: var(--hair-strong); transform-origin: left center; }
.bm-conn.navy { background: var(--ink-fill); animation: bm-draw var(--bm-dur-draw) var(--ease-out) both; }
.bm-conn:not(.navy):not(.gap):not(.dashed) { animation: bm-draw var(--bm-dur-draw) var(--ease-out) both; }
.bm-conn.gap { background: none; } /* the thread is broken here — no rule */
.bm-conn.dashed { background: none; border-top: 2px dashed var(--hair-strong); height: 0; }
.bm-step-text { margin-top: 12px; text-align: center; display: flex; flex-direction: column; gap: 3px; padding: 0 6px; }
.bm-chain.rows .bm-step-text { margin-top: 8px; }
.bm-step-label { font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink-3); }
.bm-step-value { font-size: var(--text-body-bm); font-weight: var(--weight-medium); color: var(--ink); }
.bm-step-record { font-size: var(--text-meta-sm); color: var(--ink-3); }

/* §1.3 The brief. */
.bm-brief { background: var(--brief-bg); border-radius: var(--radius-lg); padding: 22px 26px; }
.bm-brief .bm-eyebrow { margin-bottom: 10px; }
.bm-brief .bm-editorial + .bm-editorial { margin-top: 12px; }
.bm-brief .bm-editorial { margin: 0; }

/* §1.6 The data table. */
.bm-table-wrap { overflow-x: auto; }
.bm-table { width: 100%; border-collapse: collapse; }
.bm-table thead th { text-align: left; font-size: var(--text-table-head); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--ink-3);
  padding: 0 16px 10px; border-bottom: 1px solid var(--rule-head); white-space: nowrap; }
/* Rows: 11px of air, a hairline under each, and — where a row wants something —
   a 3px orange rule inside the left edge with the text pushed clear of it. The
   inset shadow is deliberate: a real left border would shift every other row by
   3px, which is how the 8554 that read as 3554 happened. */
.bm-table tbody td { padding: 11px 16px; border-bottom: 1px solid var(--hair); }
.bm-table tbody tr.attn td { box-shadow: inset 3px 0 0 var(--brand-orange); }
.bm-table tbody tr.attn td:first-child { padding-left: 28px; }
.bm-table tbody tr.attn .ref, .bm-table tbody tr.attn .when { color: var(--brand-orange); }
.bm-table th.r, .bm-table td.r { text-align: right; }
.bm-tgroup td { padding: 22px 16px 8px; }
.bm-tgroup-label { font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink); }
.bm-tgroup-count { margin-left: 10px; font-size: var(--text-meta-sm); color: var(--ink-3); }
.bm-tgroup-total { float: right; font-size: var(--text-body-bm); font-weight: var(--weight-medium); color: var(--ink); }
.bm-trow td { font-size: 12px; color: var(--ink); padding: 12px 16px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.bm-trow.nav { cursor: pointer; }
.bm-trow.nav:hover td { background: var(--nav-hover); }
.bm-trow.attention td:first-child { box-shadow: inset 3px 0 0 var(--brand-orange); padding-left: 12px; }
.bm-trow .bm-mono { font-family: var(--font-technical); }

/* ── Home dashboard layout (mobile pass, 26/08) ──────────────────────────────
   These three grids used to be written inline in views/home.js, which meant no
   media query could reach them: the figures stayed four-up, the pipeline's seven
   nodes stayed 84px each, and Reminders/Notes/Emails stayed three-up however
   narrow the screen got. They live here now so the 760px breakpoint can act. ── */
.hm-figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.hm-pipe { display: flex; align-items: flex-start; }
.hm-pipe-node { display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 84px; flex: none; text-align: center; }
.hm-pipe-conn { flex: 1 1 auto; min-width: 10px; height: 2px; margin-top: 5px; }
.hm-cols3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 44px; padding-top: 10px; }

@media (max-width: 760px) {
  /* Two-up: four figures across a ~330px card left "Past deadline" wrapping
     into its own column edge. */
  .hm-figs { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  /* The pipeline keeps its 84px nodes and scrolls, the same convention the
     over-wide tables already use — wrapping it would break the timeline. */
  .hm-pipe { overflow-x: auto; padding-bottom: 4px; }
  .hm-cols3 { grid-template-columns: 1fr; gap: 32px; }
}

/* Home — KPI row */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.kpi-label { font-size: 13px; font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.kpi-fig { display: flex; align-items: baseline; gap: 2px; color: var(--anchor); font-weight: var(--weight-medium); font-size: var(--anchor-md); letter-spacing: -0.02em; line-height: 1; margin-top: 10px; }
.kpi-unit { font-size: var(--text-h3); font-weight: var(--weight-medium); }
.kpi-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; min-height: 14px; }
.rule { border: 0; border-top: 1px solid var(--hair); margin-top: 28px; }

/* Home — Focus */
.focus { margin-top: 44px; }
.focus-cap { color: var(--text-muted); font-size: 13px; margin: 4px 0 20px; }
.focus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.focus-item { text-align: center; }
.focus-chart { height: 120px; display: grid; place-items: center; }
.focus-arrow { font-size: var(--text-display-xl); font-weight: var(--weight-medium); color: var(--anchor); line-height: 1; }
.focus-text { font-size: 14px; font-weight: var(--weight-medium); letter-spacing: 0.02em; text-transform: uppercase; color: var(--anchor); max-width: 240px; line-height: 1.5; margin: 14px auto 0; }

/* Home — Alerts */
.alerts { margin-top: 48px; background: var(--brief-bg); border-radius: var(--radius-sm); padding: 18px 22px; }
.alert-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; }
.alert-title { font-weight: var(--weight-medium); color: var(--ink); }
.alert-desc { color: var(--text-secondary); font-size: 13px; }

/* View header + filter chips */
.view-head { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.chips { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* §11: 6px 14px and the chip's own border token, so an active chip inverts
   correctly in both themes — white-on-blue in the light one, navy-on-pale-blue
   in the dark, where white on the pale blue would be unreadable. */
.chip { border: 1px solid var(--chip-border); background: transparent; color: var(--ink); border-radius: var(--radius-pill);
  padding: 6px 14px; font-size: 12.5px; font-weight: var(--weight-medium); cursor: pointer; font-family: var(--font-sans);
  transition: transform 100ms var(--ease-out), background var(--dur-fast) var(--ease-out); }
.chip:active { transform: scale(0.96); }
.chip.active { background: var(--chip-active-bg); border-color: var(--chip-active-bg); color: var(--chip-active-ink); }

/* Table */
.table-wrap { overflow-x: auto; margin-top: 22px; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-size: var(--text-table-head); font-weight: var(--weight-medium); letter-spacing: var(--tracking-table); text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--rule-head); padding: 10px 14px 10px 0; }
table.data td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--hair); color: var(--ink);
  white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
table.data tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
table.data tbody tr:hover { background: var(--row-hover); }
/* A row that wants something: 3px of orange inside the left edge, the text
   pushed clear of it, and its ref and date in orange. */
table.data tbody tr.attn td { box-shadow: inset 3px 0 0 var(--brand-orange); }
table.data tbody tr.attn td:first-child { padding-left: 12px; }
table.data tbody tr.attn .ref, table.data tbody tr.attn .when { color: var(--brand-orange); }
td.strong { font-weight: var(--weight-medium); }
.pager { margin-top: 20px; }

.stub-view { padding-top: 8px; }
.stub-view .muted { margin-top: 8px; }

/* Finance */
.fin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 26px; }
.fin-label { font-size: 13px; font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.fin-fig { margin-top: 4px; font-size: var(--text-h1); font-weight: var(--weight-medium); letter-spacing: -0.02em; color: var(--anchor); line-height: 1; }
.fin-fig.overdue { color: var(--brand-orange); }
.fin-invoices { margin-top: 30px; }

@media (max-width: 860px) { .fin-stats { grid-template-columns: repeat(2, 1fr); padding-right: 0; } }

/* Calendar */
.cal-head { display: flex; align-items: baseline; gap: 14px; }
.cal-date { font-size: var(--text-h3); font-weight: var(--weight-medium); color: var(--brand-orange); }
.cal-team { font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); border-bottom: 1px solid var(--link); cursor: pointer; }
.cal-legend { display: flex; gap: 16px; margin-right: 130px; margin-top: 40px; flex-wrap: wrap; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-secondary); }
.cal-legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.cal-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.cal-cell { min-height: 110px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 10px; box-sizing: border-box; }
.cal-cell.today { outline: 2px solid var(--link); outline-offset: -2px; }
.cal-cell-top { display: flex; justify-content: space-between; align-items: baseline; }
.cal-month { font-size: 12px; font-weight: var(--weight-medium); color: var(--brand-orange); }
.cal-daynum { font-size: 13px; font-weight: var(--weight-medium); color: var(--ink); }
.cal-events { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.cal-chip { width: 24px; height: 24px; border-radius: 50%; color: var(--brand-white); font-size: 9px; font-weight: var(--weight-medium); display: inline-flex; align-items: center; justify-content: center; }
.cal-note { margin-top: 16px; font-size: 12.5px; color: var(--brand-orange); }

@media (max-width: 860px) { .cal-grid { grid-template-columns: repeat(5, minmax(90px, 1fr)); overflow-x: auto; } .cal-legend { margin-right: 0; margin-top: 16px; } }

/* Project detail */
/* RETIRED BY §4: every screen's own "← Projects" is gone — the way back lives
   in the header line, once, beside the date. The rule stays because the touch
   sizing below still names the class, and because a screen that grows a local
   back link should look like the old one and not invent a new style. */
.back-link { appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); }
.pd-head { display: flex; align-items: baseline; gap: 16px; margin-top: 18px; }
.pd-no { font-size: var(--text-h1); font-weight: var(--weight-medium); color: var(--anchor); flex: none; letter-spacing: -0.02em; }
.pd-client { flex: 1; min-width: 0; margin: 0; font-size: var(--text-h1); font-weight: var(--weight-medium); letter-spacing: -0.02em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-status { flex: none; white-space: nowrap; color: var(--ink); font-size: 14px; }
.pd-sub { margin-top: 10px; font-size: 14px; color: var(--text-secondary); }
.pd-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; padding-right: 130px; margin-top: 32px; }

.pd-summary { background: var(--brief-bg); border-radius: var(--radius-sm); padding: 18px 22px; }
.pd-summary-cap { color: var(--text-muted); font-size: 12px; margin: 3px 0 12px; }
.pd-summary-text { font-size: 14px; line-height: 1.6; color: var(--ink); }
.pd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pd-action { border: 1px solid var(--anchor); background: var(--surface); color: var(--anchor); border-radius: var(--radius-pill);
  padding: 6px 14px; font-size: 12.5px; font-weight: var(--weight-medium); cursor: pointer; font-family: var(--font-sans); }

.pd-activity { margin-top: 32px; }
.pd-act-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair-soft); }
.pd-act-row.pd-superseded { opacity: 0.6; }
.pd-act-row.pd-superseded .g-mono { text-decoration: line-through; }
.pd-act-date { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pd-act-desc { font-size: 13.5px; color: var(--ink); }

.pd-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 14px; }
.pd-stat-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.pd-stat-val { margin-top: 4px; font-size: var(--text-h2); font-weight: var(--weight-medium); color: var(--anchor); letter-spacing: -0.01em; }
.pd-team { margin-top: 32px; }
.pd-avatars { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pd-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-blue); color: var(--brand-light-grey);
  display: grid; place-items: center; font-size: 12px; font-weight: var(--weight-medium); }

@media (max-width: 860px) {
  .pd-head, .pd-body { padding-right: 0; }
  .pd-body { grid-template-columns: 1fr; gap: 28px; }
}

/* Timesheet */
.ts-top { display: flex; align-items: flex-start; }
.ts-weeknav { margin-top: 12px; display: flex; align-items: center; gap: 14px; }
.ts-navbtn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hair-strong); background: var(--surface); color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; }
.ts-weeklabel { font-size: 14px; font-weight: var(--weight-medium); color: var(--ink); }
.ts-thisweek { font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); border-bottom: 1px solid var(--link); cursor: pointer; }
.ts-weektotal-label { font-size: 13px; font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ts-weektotal { margin-top: 4px; font-size: var(--text-h1); font-weight: var(--weight-medium); letter-spacing: -0.02em; color: var(--anchor); line-height: 1; font-family: var(--font-technical); }
/* Benchmark §1.2: the 68px right anchor for the week total. The figure is
   Suisse Screen Medium even though it is a duration (§1.7), not Monitor. */
.ts-top-left .h1 { margin-top: 2px; }
.ts-weekanchor { margin-top: 2px; }
.ts-weekanchor .bm-anchor-label { display: inline-flex; align-items: center; gap: 5px; }
.ts-weekanchor .bm-anchor.md { margin-top: 4px; }
.ts-h-proj .mark { margin-right: 6px; }
.ts-chips { margin-top: 20px; display: flex; gap: 8px; }
.ts-chip { padding: 6px 14px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: var(--weight-medium); border: 1px solid var(--anchor); color: var(--anchor); background: var(--surface); cursor: pointer; }

/* Timesheet: hugs its content (so the totals row sits right under the rows,
   Karan 13/07), but never grows past the viewport — then the rows scroll. */
.ts-page { display: flex; flex-direction: column; max-height: calc(100vh - 140px); }
.ts-grid { margin-top: 14px; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ts-rows-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* Wide project/client column on roomy screens, but columns SHRINK to fit a
   narrower window (Karan 13/07 — the grid must resize, not clip). */
.ts-line { display: grid; grid-template-columns: minmax(200px, 1.9fr) repeat(5, minmax(46px, 1fr)) repeat(2, minmax(38px, 0.5fr)) 96px; }
/* Weekend hidden (default): drop the two Sat/Sun columns so the grid stays aligned. */
.ts-grid.ts-noweekend .ts-line { grid-template-columns: minmax(200px, 1.9fr) repeat(5, minmax(46px, 1fr)) 96px; }
/* Last resort on very narrow windows: scroll the grid sideways rather than clip. */
.ts-rows-scroll, .ts-headline, .ts-totline { min-width: 0; }
.ts-headline { background: var(--brief-bg); border-bottom: 1px solid var(--hair); }
.ts-row { border-bottom: 1px solid var(--hair-soft); }
.ts-h-proj { padding: 12px 16px; font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.ts-h-day { padding: 9px 8px; text-align: center; }
.ts-h-dow { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.ts-h-dow.today { color: var(--link); } .ts-h-dow.weekend { color: var(--ink-3); }
.ts-h-date { font-size: 15px; font-weight: var(--weight-medium); color: var(--ink); }
.ts-h-date.today { color: var(--link); }
.ts-h-total { padding: 12px; text-align: right; font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.ts-proj { padding: 12px 16px; display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Project number: larger but lighter (Karan 07/07), spanning both lines so the
   category starts in line with the client name. */
.ts-proj-num { font-family: var(--font-technical); font-size: var(--text-h3); font-weight: 400; letter-spacing: -0.01em; color: var(--ink); flex-shrink: 0; }
.ts-proj-main { min-width: 0; flex: 1; }
.ts-proj-main[role="button"] { cursor: pointer; border-radius: 5px; }
.ts-proj-main[role="button"]:hover .ts-proj-name-in { text-decoration: underline; text-underline-offset: 2px; }
.ts-proj-name { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.ts-proj-name-in { display: inline-block; }
/* Truncated names animate via the Web Animations API (timesheet.js) —
   per-name timing so every name moves at the same speed. */
.ts-proj-task { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-cell { border-left: 1px solid var(--hair-soft); }
.ts-cell.today, .ts-h-day.today { background: var(--nav-hover); }
.ts-cell.weekend { background: var(--surface-sunk); }
/* Per-day comment marker (Karan 13/07): a small dot on cells that carry a comment. */
.ts-cell.has-note { position: relative; }
.ts-cell.has-note::after { content: ''; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-blue); pointer-events: none; }
.ts-daynotes { display: flex; flex-direction: column; gap: 8px; }
.ts-daynote-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; }
.ts-daynote-day { font-size: 12px; color: var(--text-muted); font-weight: var(--weight-medium); }
.ts-input { width: 100%; height: 100%; min-height: 52px; box-sizing: border-box; border: none; outline: none; background: transparent;
  text-align: center; font-family: var(--font-technical); font-size: 15px; color: var(--ink); padding: 0 6px; }
.ts-input:focus { background: var(--surface); box-shadow: inset 0 0 0 2px var(--link); }
/* Cells are now click-to-log (Karan 13/07): a popup handles time + comment + expenses. */
.ts-cell-btn { min-height: 52px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-family: var(--font-technical); font-size: 15px; color: var(--ink-3); transition: background var(--dur-fast) var(--ease-out); }
.ts-cell-btn.filled .ts-cell-val { color: var(--ink); }
.ts-cell-btn:hover { background: var(--nav-hover); color: var(--ink); }
.ts-cell-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--link); }
/* Log-time popup */
.ts-logdays { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 6px; }
.ts-logday { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 10px; }
.ts-logday-lbl { font-size: 12.5px; color: var(--text-muted); font-weight: var(--weight-medium); }
.ts-log-extra { display: flex; gap: 10px; margin-top: 16px; }
.ts-rowtot { padding: 12px; display: flex; align-items: center; justify-content: flex-end; border-left: 1px solid var(--hair-soft);
  font-family: var(--font-technical); font-size: 15px; font-weight: var(--weight-medium); color: var(--ink-3); }
.ts-rowtot.has { color: var(--ink); }
.ts-addrow { border-bottom: 1px solid var(--hair); }
.ts-add { padding: 12px 16px; display: flex; align-items: center; gap: 10px; color: var(--link); }
.ts-add-plus { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--link); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; }
.ts-totline { background: var(--brief-bg); }
.ts-tot-label { padding: 14px 16px; font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.ts-daytot { padding: 14px 6px; text-align: center; border-left: 1px solid var(--hair); font-family: var(--font-technical); font-size: 15px; font-weight: var(--weight-medium); color: var(--ink-3); }
.ts-daytot.today { background: var(--nav-hover); } .ts-daytot.has { color: var(--ink); }
.ts-weekgrand { padding: 14px 12px; text-align: right; border-left: 1px solid var(--hair); font-family: var(--font-technical); font-size: 16px; font-weight: var(--weight-medium); color: var(--anchor); }
.ts-hint { margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
.ts-note { margin-top: 8px; font-size: 12.5px; color: var(--brand-orange); }
.ts-mono { font-family: var(--font-technical); color: var(--ink); }

/* Tedds calc sheets, Track-styled (Karan 07/07) */
.ted-scroll { flex: 1; overflow-y: auto; min-height: 0; background: var(--brief-bg); }
.ted-sheet { max-width: 860px; margin: 26px auto; background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 34px 42px 28px; }
.ted-head { border-bottom: 2px solid var(--ink); padding-bottom: 14px; margin-bottom: 20px; }
.ted-title { font-size: var(--text-h3); font-weight: var(--weight-medium); color: var(--ink); }
.ted-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 8px; font-size: 12.5px; color: var(--ink); }
.ted-meta-k { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.ted-calc-name { font-size: 15px; font-weight: var(--weight-medium); color: var(--anchor); margin: 18px 0 8px; }
.ted-heading { font-size: 13px; font-weight: var(--weight-medium); letter-spacing: 0.02em; color: var(--ink);
  margin: 16px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--hair); }
.ted-row { display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(0, .5fr) minmax(0, .5fr); gap: 14px; padding: 2.5px 0; font-size: 12.5px; }
.ted-label { color: var(--text-secondary); }
.ted-val { color: var(--ink); font-size: 12px; }
.ted-row:not(.ted-row3) > .ted-val { grid-column: 2 / -1; }
.ted-text { font-size: 12.5px; color: var(--text-secondary); padding: 2.5px 0; }
.ted-text.strong { color: var(--ink); font-weight: var(--weight-medium); }
.ted-verdict { margin: 8px 0; padding: 7px 12px; border-radius: 8px; font-size: 12.5px; font-weight: var(--weight-medium); }
.ted-verdict.pass { background: color-mix(in srgb, var(--status-ok) 12%, var(--surface)); color: var(--status-ok); }
.ted-verdict.fail { background: color-mix(in srgb, var(--status-error) 10%, var(--surface)); color: var(--status-error); }
/* Embedded Tedds diagrams (PNG/JPEG extracted from the calc's RTF, Karan 12/07) */
.ted-figure { margin: 12px 0; }
.ted-figure img { max-width: 100%; height: auto; border: 1px solid var(--hair); border-radius: 6px; background: var(--surface); }
/* Vector diagrams (EMF/WMF → SVG). Constrain to the sheet width, cap height so
   a tall section sketch can't dominate, keep the drawing on white. */
.ted-figure-vec { border: 1px solid var(--hair); border-radius: 6px; background: var(--surface); padding: 10px; overflow-x: auto; }
.ted-figure-vec svg { display: block; max-width: 100%; height: auto; max-height: 68vh; margin: 0 auto; }
.ted-figure-missing { border: 1px dashed var(--hair); border-radius: 6px; background: var(--brand-grey-50, var(--surface-sunk));
  color: var(--brand-grey-500, var(--ink-3)); font-size: 13px; padding: 14px 16px; }
.ted-figure-caveat { margin-top: 6px; font-size: 11.5px; color: var(--brand-orange, #FF5001);
  background: rgba(245,158,11,0.08); border-radius: 5px; padding: 5px 9px; }

/* MasterSeries Masonry model viewer — direct MSNX XML, no recalculation. */
.msnx-scroll { flex: 1; min-height: 0; overflow-y: auto; background: var(--brief-bg); }
.msnx-sheet { max-width: 1080px; margin: 26px auto; padding: 34px 42px 28px; background: var(--surface);
  border: 1px solid var(--hair); border-radius: 12px; }
.msnx-head { display: flex; justify-content: space-between; gap: 28px; align-items: flex-end;
  padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.msnx-kicker { color: var(--link); font-size: 11px; font-weight: var(--weight-medium); letter-spacing: .12em; text-transform: uppercase; }
.msnx-head h1 { margin: 5px 0 0; color: var(--ink); font-size: var(--text-h3); font-weight: var(--weight-medium); }
.msnx-head-meta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.msnx-head-meta span, .msnx-section-title span { padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--nav-hover); color: var(--anchor); font-family: var(--font-technical); font-size: 11px; }
.msnx-notice { display: grid; grid-template-columns: 150px 1fr; gap: 16px; margin-top: 18px; padding: 13px 16px;
  border-left: 3px solid var(--brand-orange); background: color-mix(in srgb, var(--brand-orange) 7%, var(--surface)); font-size: 13px; line-height: 1.5; }
.msnx-notice strong { color: var(--ink); }
.msnx-notice span { color: var(--text-secondary); }
.msnx-hero { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.8fr); gap: 30px; margin-top: 26px; align-items: start; }
.msnx-preview { text-align: center; }
.msnx-preview img { display: block; width: min(100%, 250px); height: auto; aspect-ratio: 1; object-fit: contain;
  margin: 0 auto; border: 1px solid var(--hair); background: var(--surface); image-rendering: auto; }
.msnx-preview p { margin: 8px 0 0; color: var(--text-muted); font-size: 11.5px; }
.msnx-preview-missing { min-height: 240px; display: grid; place-items: center; border: 1px dashed var(--hair); color: var(--text-muted); }
.msnx-overview, .msnx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.msnx-card { min-width: 0; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; }
.msnx-card h3 { margin: 0; padding: 10px 13px; border-bottom: 1px solid var(--hair); background: var(--brief-bg);
  color: var(--ink); font-size: 11px; font-weight: var(--weight-medium); letter-spacing: .1em; text-transform: uppercase; }
.msnx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, auto); gap: 14px; padding: 7px 13px; border-bottom: 1px solid var(--hair-soft); font-size: 12.5px; }
.msnx-row:last-child { border-bottom: 0; }
.msnx-row span { min-width: 0; color: var(--text-secondary); }
.msnx-row strong { color: var(--ink); font-family: var(--font-technical); font-weight: 400; text-align: right; overflow-wrap: anywhere; }
.msnx-leaf { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hair); }
.msnx-section-title { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 13px; }
.msnx-section-title h2 { margin: 0; color: var(--anchor); font-size: 17px; font-weight: var(--weight-medium); }
.msnx-foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; padding-top: 13px;
  border-top: 1px solid var(--hair); color: var(--text-muted); font-size: 11px; }

/* Enquiry pipeline timeline (Karan 07/07) */
.eq-timeline { display: flex; flex-direction: column; gap: 2px; }
.eq-tl-row { display: grid; grid-template-columns: 14px 78px 84px 1fr; align-items: center; gap: 8px; padding: 5px 0; }
.eq-tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-blue); position: relative; }
.eq-tl-dot::after { content: ''; position: absolute; left: 4px; top: 11px; width: 1px; height: 16px; background: var(--hair); }
.eq-tl-row:last-child .eq-tl-dot::after { display: none; }
.eq-tl-dot.now { background: var(--ink-fill); }
.eq-tl-dot.wait { background: var(--surface); border: 2px solid var(--brand-orange); }
.eq-tl-when { font-size: 11px; color: var(--text-muted); }
.eq-tl-label { font-size: 12.5px; font-weight: var(--weight-medium); color: var(--ink); }
.eq-tl-sub { font-size: 11.5px; }

/* List controls: filter chips + search on full-portfolio views */
.list-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.list-controls .chips { margin-top: 0; flex: 1; }
.search-input { border: 1px solid var(--hair-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink);
  font-family: var(--font-sans); font-size: 13px; padding: 7px 16px; min-width: 260px; outline: none; }
.search-input:focus { border-color: var(--link); }
.search-input::placeholder { color: var(--text-muted); }

/* Projects toolbar (Karan 10/07): two tidy, aligned rows — view chips + search
   on top, scheme chips + lead/sort selects below, filters pushed to the right
   so both rows line up on the same edge. */
.proj-toolbar { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.proj-toolbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.proj-toolbar-row .chips { margin-top: 0; }
.proj-toolbar-spacer { flex: 1 1 auto; }
.proj-toolbar .search-input { margin-left: auto; }
.proj-sel { max-width: 180px; }

/* Nav group labels (04/07 handoff shell) */
.nav-group-label { font-size: 9.5px; font-weight: var(--weight-medium); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); padding: 0 10px 7px; }

/* Gmail / Drive panels (per-user, read-only) */
.home-cols { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.home-cols.three { grid-template-columns: 1.05fr 1fr 1.25fr; gap: 44px; }
@media (max-width: 1200px) { .home-cols.three { grid-template-columns: 1fr 1fr; } }
/* Project detail: activity + registers scroll instead of growing the page */
.pd-activity #activity-feed, #issued-list, #received-list { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.pd-body { margin-top: 24px; }
.pd-google { margin-top: 32px; padding-top: 24px; }
/* Home emails: never taller than the viewport — scroll inside the panel. */
.home-cols .g-body { max-height: min(52vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }

/* Home layout (Karan 13/07): denser — Focus + Reminders share a row, My Work
   spans full width as two columns, Notes + Emails share a row. Less dead space. */
.home-top { margin-top: 40px; display: grid; grid-template-columns: 1.7fr 1fr; gap: 44px; align-items: start; }
.home-top .focus { margin-top: 0; }
.home-mywork { margin-top: 40px; }
.home-mywork-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; margin-top: 6px; }
.home-bottom { margin-top: 40px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: start; }
.home-bottom .g-body { max-height: min(52vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
@media (max-width: 1000px) {
  .home-top, .home-mywork-grid, .home-bottom { grid-template-columns: 1fr; gap: 28px; }
}
.pd-google { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; border-top: 1px solid var(--hair); padding-top: 32px; }
.g-cap { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }
.g-mono { font-family: var(--font-technical); }
.g-body { margin-top: 16px; }
.g-note { font-size: 13px; color: var(--text-muted); margin: 0; }
.g-note.error { color: var(--status-error); }
.g-connect { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.g-mail-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hair-soft); text-decoration: none; }
.g-mail-row:hover { background: var(--nav-hover); }
.g-avatar { margin-top: 1px; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--nav-hover); color: var(--anchor); font-size: 12px; font-weight: var(--weight-medium); display: inline-flex; align-items: center; justify-content: center; }
.g-mail-main { flex: 1; min-width: 0; display: block; }
.g-mail-top { display: flex; align-items: center; gap: 8px; }
.g-mail-from { font-size: 15px; font-weight: var(--weight-medium); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-unread { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-orange); flex: none; }
.g-mail-meta { margin-left: auto; flex: none; font-size: 12px; color: var(--text-muted); font-family: var(--font-technical); }
.g-mail-subject { display: block; margin-top: 3px; font-size: 13.5px; font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-mail-snippet { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-file-scroll { max-height: 460px; overflow-y: auto; overscroll-behavior: contain; }
.g-file-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair-soft); text-decoration: none; }
.g-file-row:hover { background: var(--nav-hover); }
.g-file-tag { flex: none; min-width: 38px; text-align: center; padding: 4px 6px; border-radius: var(--radius-sm); background: var(--nav-hover); color: var(--anchor); font-family: var(--font-technical); font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.06em; }
.g-file-tag.dir { background: var(--brand-dark-blue); color: var(--brand-light-grey); }
.g-file-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: var(--weight-medium); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-file-meta { flex: none; font-size: 12px; color: var(--text-muted); font-family: var(--font-technical); }
.g-open-folder { display: inline-block; margin-top: 14px; font-size: 12.5px; font-weight: var(--weight-medium); letter-spacing: 0.04em; color: var(--link); text-decoration: none; }
.g-open-folder:hover { color: var(--anchor); }

/* Summary band (pipeline / expenses style) */
.band { margin-top: 20px; background: var(--brief-bg); border-radius: 12px; padding: 16px 24px; display: flex; align-items: center; flex-wrap: wrap; }
.band-item { padding-left: 32px; margin-left: 32px; border-left: 1px solid var(--hair); }
.band-item:first-child { padding-left: 0; margin-left: 0; border-left: none; }
.band-label { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.band-fig { margin-top: 5px; font-size: var(--text-h2); font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1; color: var(--anchor); }

/* Status pill — BLOCK CAPS at small size for a consistent case system */
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: var(--weight-medium); letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--surface-sunk); color: var(--text-secondary); white-space: nowrap; }
.pill .dot, .ts-proj .dot, .avatar-name .mini-avatar, .review-card .pd-avatar,
.g-avatar, .init-tile, .svc-tile, .meet-avatar, .pd-avatar { flex: none; }
.pill .dot { width: 6px; height: 6px; }
.pill.ok { background: color-mix(in srgb, var(--status-ok) 12%, var(--surface)); color: var(--status-ok); }
.pill.warn { background: color-mix(in srgb, var(--brand-orange) 12%, var(--surface)); color: var(--brand-orange); }
.pill.error { background: color-mix(in srgb, var(--status-error) 10%, var(--surface)); color: var(--status-error); }
.pill.info { background: var(--nav-hover); color: var(--link); }
.pill.hold { background: color-mix(in srgb, var(--status-hold) 14%, var(--surface)); color: var(--status-hold-ink); }

/* Bordered card table with grouped rows (enquiries / suppliers / ledger) */
.card-table { margin-top: 18px; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.card-table .scroll { overflow-x: auto; }
.ct-head, .ct-row { display: grid; gap: 16px; padding: 13px 18px; align-items: center; }
.ct-head { padding: 14px 18px; border-bottom: 1px solid var(--hair); }
.ct-head > div { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.ct-group { display: flex; align-items: center; gap: 10px; padding: 9px 18px; background: var(--brief-bg); }
.ct-group-label { font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.04em; color: var(--text-secondary); }
.ct-group-count { font-size: 11px; font-family: var(--font-technical); color: var(--text-muted); background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-pill); padding: 0 7px; }
.ct-group-right { margin-left: auto; font-family: var(--font-technical); font-size: 12.5px; font-weight: var(--weight-medium); color: var(--ink); }
.ct-row { border-bottom: 1px solid var(--hair-soft); font-size: 13.5px; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.ct-row:last-child { border-bottom: none; }
.ct-row:hover { background: var(--nav-hover); }
.ct-row > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-row .mono { font-family: var(--font-technical); }
.ct-row .strong { font-weight: var(--weight-medium); color: var(--ink); }
.ct-row .sec { color: var(--text-secondary); }
.ct-row .num { text-align: right; font-family: var(--font-technical); color: var(--ink); }
.ct-head .num { text-align: right; }
.ct-empty { padding: 28px 18px; font-size: 13.5px; color: var(--text-muted); }

/* Chip count badge */
.chip .chip-count { font-family: var(--font-technical); font-size: 11px; padding: 1px 6px; margin-left: 7px; border-radius: var(--radius-pill); background: var(--surface-sunk); color: var(--text-muted); }
/* The count on an active chip sits at 70% of the chip's own ink (§11) — one
   value, so it follows the theme's flip with the chip rather than against it. */
.chip.active .chip-count { background: transparent; color: var(--chip-active-ink); opacity: 0.7; padding: 1px 0; }

/* Segmented control (Summary FY ranges) */
.seg { display: inline-flex; background: var(--brief-bg); border-radius: var(--radius-pill); padding: 3px; }
.seg button { border: none; cursor: pointer; border-radius: var(--radius-pill); padding: 6px 13px; font-family: var(--font-sans);
  font-size: 12.5px; font-weight: var(--weight-medium); background: transparent; color: var(--text-secondary); transition: background var(--dur-fast); }
.seg button.active { background: var(--brand-blue); color: #F5F5F5; }

/* Finance summary cards + KPI tiles */
.fin-kpis { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fin-kpis.five { grid-template-columns: repeat(5, 1fr); margin-top: 14px; }
.fin-kpi { background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 16px 18px; }
.fin-kpi-label { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.fin-kpi-val { margin-top: 8px; font-size: var(--text-h2); font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1; color: var(--anchor); }
.fin-kpi-val.big { font-size: var(--text-h2); }
.fin-kpi-sub { margin-top: 8px; font-size: 11.5px; color: var(--text-muted); }
.fin-cards { margin-top: 20px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; }
.fin-card { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 20px 22px; min-width: 0; }
.fin-card-title { font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.fin-legend { display: flex; gap: 18px; margin-top: 12px; justify-content: center; flex-wrap: wrap; }
.fin-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-secondary); }
.fin-swatch { width: 10px; height: 10px; border-radius: 2px; }
.fin-swatch.line { width: 14px; height: 0; border-radius: 0; }
.fin-tables { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
table.fin { width: 100%; border-collapse: collapse; margin-top: 14px; }
table.fin th { font-size: var(--text-table-head); font-weight: var(--weight-medium); letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--ink-3); padding: 0 0 12px; border-bottom: 1px solid var(--rule-head); white-space: nowrap; text-align: right; }
table.fin th:first-child { text-align: left; }
table.fin td { padding: 11px 0; border-top: 1px solid var(--hair-soft); font-family: var(--font-technical); font-size: 13.5px; white-space: nowrap; text-align: right; color: var(--ink); }
table.fin td:first-child { text-align: left; font-family: var(--font-sans); font-weight: var(--weight-medium); }
table.fin td.pos { color: var(--link); font-weight: var(--weight-medium); }
table.fin td.neg { color: var(--status-error); font-weight: var(--weight-medium); }
table.fin td.mut { color: var(--text-muted); }
table.fin tr.total td { border-top: 1px solid var(--hair); font-weight: var(--weight-medium); }

/* Services card grid */
.svc-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-right: 40px; }
.svc-card { border: 1px solid var(--hair); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; min-height: 150px;
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast); }
.svc-card:hover { box-shadow: var(--shadow-float); border-color: var(--link); }
.svc-tile { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-blue); color: #F5F5F5; display: flex; align-items: center; justify-content: center; font-weight: var(--weight-medium); font-size: 15px; letter-spacing: -0.02em; }
.svc-name { margin-top: 16px; font-size: var(--text-h3); font-weight: var(--weight-medium); letter-spacing: -0.01em; color: var(--anchor); }
.svc-desc { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); flex: 1; }
.svc-meta { margin-top: 14px; font-size: 12px; font-family: var(--font-technical); color: var(--text-muted); }

/* ── Team roster (design handoff, Karan 03/08) ── */
.view-head { display: flex; align-items: baseline; gap: 12px; }
.tm-add { width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; background: var(--brand-orange); color: var(--brand-white);
  font-size: var(--text-h3); line-height: 1; cursor: pointer; margin-left: 2px; align-self: center;
  transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.tm-add:hover { background: var(--brand-orange-deep); box-shadow: 0 2px 8px rgba(12,17,57,0.14); }

.tm-strip { margin-top: 30px; display: flex; gap: 56px; padding-bottom: 26px; border-bottom: 1px solid var(--hair); }
.tm-strip-sep { padding-left: 56px; border-left: 1px solid var(--hair); }
.tm-strip-lbl { font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.tm-strip-fig { margin-top: 8px; display: flex; align-items: baseline; gap: 12px; font-size: var(--figure); font-weight: var(--weight-medium); letter-spacing: -0.03em; line-height: 1; color: var(--anchor); }
.tm-strip-warn { color: var(--brand-orange); }
.tm-strip-sub { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }

.tm-filters { margin-top: 26px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tm-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.tm-tab { appearance: none; height: 38px; padding: 0 20px; border: 1px solid var(--hair); background: var(--surface); color: var(--ink);
  border-radius: 999px; font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.tm-tab:hover { border-color: var(--link); color: var(--link); }
.tm-tab.active { background: var(--brand-blue); border-color: var(--link); color: var(--brand-white); }
.tm-search { margin-left: auto; height: 40px; width: 320px; max-width: 100%; border: 1px solid var(--hair); border-radius: 999px;
  padding: 0 18px; font: inherit; font-size: 14.5px; color: var(--ink); background: var(--surface); }
.tm-search::placeholder { color: var(--ink-3); }
.tm-search:focus { outline: none; border-color: var(--link); }

.tm-row2 { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tm-former-chip { appearance: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.tm-fc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hair-strong); }
.tm-former-chip.on { background: var(--nav-hover); border-color: var(--link); color: var(--anchor); }
.tm-former-chip.on .tm-fc-dot { background: var(--brand-blue); }
.tm-fin { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.tm-fin > span:first-child { font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.tm-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.tm-switch input { appearance: none; width: 44px; height: 24px; border-radius: 999px; background: var(--hair-strong); cursor: pointer; transition: background var(--dur-base) var(--ease-out); }
.tm-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(12,17,57,0.25); transition: transform var(--dur-base) var(--ease-out); }
.tm-switch input:checked { background: var(--brand-blue); }
.tm-switch input:checked::after { transform: translateX(20px); }

.tm-table { margin-top: 26px; }
.tm-head { display: grid; align-items: center; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--hair);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.tm-head .tm-h-r { text-align: right; padding-right: 20px; }
.tm-head .tm-h-l { padding-left: 20px; }
.tm-row { display: grid; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--hair-soft);
  font-size: 14.5px; color: var(--ink); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.tm-row:hover { background: var(--nav-hover); }
.tm-c-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tm-av { width: 32px; height: 32px; flex: none; border-radius: 50%; color: var(--brand-white); display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-medium); font-size: 11.5px; letter-spacing: -0.02em; }
.tm-nm { display: flex; flex-direction: column; min-width: 0; }
.tm-nm-main { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-nm-role { font-size: 12.5px; color: var(--ink-3); }
.tm-c-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-c-email a { color: var(--link); text-decoration: none; }
.tm-c-lead { font-variant-numeric: tabular-nums; }
.tm-c-util { display: flex; align-items: center; gap: 12px; }
.tm-util-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-sunk); overflow: hidden; min-width: 40px; }
.tm-util-fill { display: block; height: 100%; border-radius: 3px; transition: width var(--dur-slow) var(--ease-out); }
.tm-util-pct { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.tm-c-leave { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tm-c-leave .tm-sub { color: var(--ink-3); }
.tm-c-rate { text-align: right; padding-right: 20px; font-variant-numeric: tabular-nums; }
.tm-c-cost { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tm-masked { color: var(--ink-3); letter-spacing: 1px; }
.tm-c-status { padding-left: 20px; display: flex; align-items: center; gap: 8px; }
.tm-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; white-space: nowrap; }
.tm-st-active { color: var(--status-ok); } .tm-st-leave { color: var(--brand-orange); } .tm-st-inactive { color: var(--ink-3); }
.tm-row-edit { opacity: 0; width: 26px; height: 26px; border: 0; background: none; color: var(--ink-3); font-size: 14px; cursor: pointer; border-radius: 6px; margin-left: auto; transition: opacity var(--dur-fast) var(--ease-out); }
.tm-row:hover .tm-row-edit { opacity: 1; }
.tm-row-edit:hover { color: var(--link); }
.tm-empty { padding: 34px 4px; color: var(--ink-3); font-size: 14.5px; }
.tm-foot { margin-top: 22px; font-size: 13px; color: var(--ink-3); }

/* ── Team person detail ── */
.pm-back { appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 12.5px; font-weight: var(--weight-medium); letter-spacing: 0.11em; text-transform: uppercase; color: var(--link); }
.pm-head { margin-top: 22px; display: flex; align-items: center; gap: 20px; }
.pm-av { width: 64px; height: 64px; flex: none; border-radius: 50%; color: var(--brand-white); display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-medium); font-size: var(--text-h3); letter-spacing: -0.02em; }
.pm-id { flex: 1; min-width: 0; }
.pm-name { margin: 0; font-size: var(--figure); font-weight: var(--weight-medium); letter-spacing: -0.025em; color: var(--ink); line-height: 1; }
.pm-meta { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.pm-meta a { color: var(--link); text-decoration: none; }
.pm-role { font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.pm-head-r { display: flex; align-items: center; gap: 22px; padding-top: 8px; }
.pm-status-pill { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--link); color: var(--anchor); font-size: 14px; }
.pm-body { margin-top: 30px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 52px; align-items: start; }
.pm-capacity { display: flex; align-items: flex-start; gap: 24px; border: 1px solid var(--hair); border-left: 4px solid var(--link); border-radius: 14px; padding: 22px 26px; }
.pm-cap-main { flex: 1; }
.pm-cap-word { margin-top: 12px; font-size: var(--text-h2); font-weight: var(--weight-medium); letter-spacing: -0.015em; color: var(--ink); }
.pm-cap-note { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.pm-cap-pills { display: flex; flex-direction: column; gap: 8px; }
.pm-pill { font-size: 12.5px; color: var(--ink-2); background: var(--brief-bg); border-radius: 999px; padding: 5px 13px; white-space: nowrap; text-align: center; }
.pm-sec { margin-top: 32px; }
.pm-c { color: var(--ink-3); font-weight: 400; }
.pm-proj-head, .pm-proj-row { display: grid; grid-template-columns: 88px 1fr 130px 108px; gap: 14px; align-items: center; }
.pm-proj-head { margin-top: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--hair); font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pm-proj-row { padding: 14px 0; border-bottom: 1px solid var(--hair-soft); font-size: 14.5px; color: var(--ink); cursor: pointer; }
.pm-proj-row:hover { background: var(--nav-hover); }
.pm-proj-no { font-weight: var(--weight-medium); color: var(--anchor); }
.pm-chart { margin-top: 20px; display: flex; align-items: flex-end; gap: 30px; height: 130px; padding: 0 8px; }
.pm-bcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
.pm-bval { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pm-bar { width: 100%; max-width: 64px; border-radius: 6px 6px 0 0; }
.pm-chart-lbls { display: flex; gap: 30px; padding: 10px 8px 0; border-top: 1px solid var(--hair); }
.pm-chart-lbls span { flex: 1; text-align: center; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.pm-acc { display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--hair-soft); font-size: 14.5px; }
.pm-acc span:first-child { font-size: 13px; color: var(--ink-3); }
.pm-acc span:last-child { color: var(--ink); }
.pm-actions { margin-top: 30px; display: flex; gap: 12px; }
.pm-obtn { appearance: none; height: 40px; padding: 0 20px; border: 1px solid var(--hair); background: var(--surface); color: var(--ink);
  border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.pm-obtn:hover { border-color: var(--link); color: var(--link); }
.pm-obtn-warn:hover { border-color: var(--brand-orange); color: var(--brand-orange); }
.pm-right { position: sticky; top: 20px; }
.pm-nums { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.pm-nl { font-size: 11.5px; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
.pm-nv { margin-top: 7px; font-size: var(--figure-sm); font-weight: var(--weight-medium); letter-spacing: -0.025em; line-height: 1; color: var(--anchor); }
.pm-nsub { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.pm-fin-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.pm-lv { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hair-soft); font-size: 13.5px; }
.pm-lv-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pm-lv-d { color: var(--ink); font-weight: 500; }
.pm-lv-k { margin-left: auto; color: var(--ink-3); }
.pm-summary { margin-top: 26px; background: var(--brief-bg); border-radius: 14px; padding: 20px 22px; }
.pm-sum-sub { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.pm-summary p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.eyebrow.orange { color: var(--brand-orange); }
@media (max-width: 1000px) { .pm-body { grid-template-columns: 1fr; gap: 32px; } .pm-right { position: static; } }
@media (max-width: 900px) { .tm-table { overflow-x: auto; } .tm-head, .tm-row { min-width: 760px; } .tm-search { margin-left: 0; } }
/* Initials tile (suppliers etc.) */
.init-tile { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--nav-hover); color: var(--anchor);
  font-size: 11px; font-weight: var(--weight-medium); display: inline-flex; align-items: center; justify-content: center; }

/* Empty-state card for screens whose data source doesn't exist yet */
.empty-state { margin-top: 24px; border: 1.5px dashed var(--hair-strong); border-radius: 12px; background: var(--brief-bg); padding: 36px 32px; max-width: 640px; }
.empty-state h2 { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-medium); color: var(--ink); }
.empty-state p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }

/* Calendar (real month view) */
.cal-weekday-head { margin-top: 26px; display: grid; grid-template-columns: repeat(5, 1fr); }
.cal-weekday-head div { padding: 0 10px 8px; font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.cal-grid.real { margin-top: 0; }
.cal-cell.other { background: var(--brief-bg); }
.cal-ev { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; text-decoration: none; padding: 2px 0; }
.cal-ev-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cal-ev-time { font-family: var(--font-technical); font-size: 10.5px; color: var(--text-muted); flex: none; }
.cal-ev-title { font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-nav { display: flex; align-items: center; gap: 14px; }

/* Avatar + name chip */
.avatar-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mini-avatar { flex: none; border-radius: 50%; background: var(--brand-blue); color: var(--brand-light-grey);
  font-size: 10px; font-weight: var(--weight-medium); display: inline-flex; align-items: center; justify-content: center; }
.avatar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linky { cursor: pointer; }
.linky:hover .avatar-label { color: var(--link); }

/* Simple forms (overlay + inline) */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 18px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.f-label { display: block; font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.f-input, .f-select, .f-textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--hair-strong);
  border-radius: var(--radius-sm); background: var(--surface); font-family: var(--font-sans); font-size: 14px; color: var(--ink); outline: none; }
.f-input:focus, .f-select:focus, .f-textarea:focus { border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
/* EVERY select gets the house look (Karan 10/07 — consistent across the app):
   no native chrome, rounded, navy chevron, hover tint, ASP border + focus. */
.f-select, select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  box-sizing: border-box; padding: 9px 34px 9px 12px; cursor: pointer;
  border: 1px solid var(--hair-strong); border-radius: 8px; background-color: var(--surface);
  font-family: var(--font-sans); font-size: 14px; color: var(--ink); outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%232B2D42' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.f-select:hover, select:hover { background-color: var(--nav-hover); }
.f-select:focus, select:focus { border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.f-textarea { min-height: 80px; resize: vertical; }
.form-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 20px 18px; }
.form-note { padding: 0 20px 12px; font-size: 12.5px; color: var(--text-muted); }
.form-error { padding: 0 20px 12px; font-size: 12.5px; color: var(--status-error); min-height: 16px; }

/* Loading skeletons (Karan 07/07): containers appear immediately with a
   soft sheen sweeping across — no spinners, no bare "Loading…" text. */
.skel { position: relative; overflow: hidden; background: var(--surface-sunk); border-radius: 10px; }
.skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  animation: skel-sweep 1.5s linear infinite; }
@keyframes skel-sweep { 100% { transform: translateX(100%); } }

/* Files & Mail field skeletons (Karan 06/08): a grey-200 bar at the TRUE width
   of the field it stands in, shimmering at the motion table's 1400ms. Used ONLY
   for server-derived fields (Rev/Status/In-use on Files; unread dot, attachment
   count, timestamp, in-use on Mail) — names and numbers render as real text so
   the layout never collapses or jumps when the rest lands. White sheen, no new grey. */
.fm-skel { position: relative; display: inline-block; overflow: hidden; vertical-align: middle;
  background: var(--hair); border-radius: 4px; }
.fm-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: fm-shimmer var(--bm-dur-shimmer, 1400ms) linear infinite; }
@keyframes fm-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .fm-skel::after { animation: none; } }
.skel-band { display: flex; gap: 24px; margin-top: 20px; }
.skel-band .skel { height: 68px; flex: 1; }
.skel-rows { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.skel-rows .skel { height: 46px; }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* Timesheet extras: submit state + row actions */
.ts-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.ts-status { font-size: 12.5px; font-weight: var(--weight-medium); }
.ts-rowbtns { display: inline-flex; gap: 6px; margin-left: 8px; }
.ts-rowbtn { border: none; background: none; cursor: pointer; color: var(--ink-3); font-size: 13px; padding: 0 2px; }
.ts-rowbtn:hover { color: var(--link); }
.ts-rowbtn.on { color: var(--link); font-weight: var(--weight-medium); font-size: 11px; }
.ts-revcheck { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--ink); }
.ts-revcheck input { width: 15px; height: 15px; accent-color: var(--brand-blue); }

/* Folder-creation indicator (Karan 09/07): red circle + "Creating", pulsing very
   slowly while a project/enquiry Drive folder tree is being built. */
@keyframes creatingPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.creating-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 13px;
  font-weight: var(--weight-medium); color: var(--ink); animation: creatingPulse 3.4s linear infinite; }
.creating-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--status-error); flex: none; }
@media (prefers-reduced-motion: reduce) { .creating-badge { animation: none; } }

/* One-click status-suggestion banner (automation engine → project page). */
.suggest-banner { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 16px;
  background: var(--nav-hover); border: 1px solid var(--link); border-radius: 12px; font-size: 13px; color: var(--ink); }
.suggest-banner.uncertain { background: var(--status-hold-bg); border-color: var(--brand-orange); }
/* --status-hold-bg is a fixed cream; under dark text it read as a blank bar (07/10/2026). */
[data-theme="dark"] .suggest-banner.uncertain { background: rgba(255, 80, 1, 0.10); }
.suggest-banner .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-blue); flex: none; }
.suggest-banner.uncertain .dot { background: var(--brand-orange); }
.suggest-text { flex: 1; }
.suggest-note { color: var(--brand-orange); font-size: 12px; }
.suggest-actions { display: flex; align-items: center; gap: 12px; flex: none; }
/* .btn.sm — single definition (was declared twice with conflicting metrics; the
   later one at ~L1348 won, so this duplicate is removed) (Karan 16/07). */

/* Rollout telemetry: the report dialog (opened from the Ask Track panel footer). */
.report-issue-overlay { position: fixed; inset: 0; z-index: 210; background: rgba(18,19,43,0.35);
  display: flex; align-items: center; justify-content: center;
  padding: calc(4vw + env(safe-area-inset-top, 0px)) 4vw calc(4vw + env(safe-area-inset-bottom, 0px)); }
.report-issue-card { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-dialog);
  padding: 26px 28px; width: min(460px, 100%); }
.report-issue-card h3 { margin: 0 0 6px; font-size: var(--text-h3); color: var(--ink); font-weight: var(--weight-medium); }
.report-issue-card p { margin: 0 0 14px; font-size: 13.5px; color: var(--text-muted); }
.report-issue-card textarea { width: 100%; border: 1px solid var(--hair); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; color: var(--ink); }
.report-issue-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* "What's new" splash — shown once after the tab updates to a newer build. */
.whatsnew-overlay { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
  background: rgba(15,23,42,0.45); backdrop-filter: blur(3px); animation: whatsnew-fade var(--dur-base) var(--ease-out); }
@keyframes whatsnew-fade { from { opacity: 0; } to { opacity: 1; } }
.whatsnew-card { background: var(--surface); border-radius: 16px; max-width: 520px; width: 100%; max-height: 86vh; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(15,23,42,0.35); }
.whatsnew-head { display: flex; align-items: center; gap: 14px; padding: 24px 26px 16px; }
.whatsnew-spark { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue)); color: var(--brand-white); font-size: var(--text-h3); }
.whatsnew-title { font-size: var(--text-h3); font-weight: var(--weight-medium); color: var(--ink); }
.whatsnew-sub { font-size: 12.5px; color: var(--brand-grey-500, var(--ink-3)); margin-top: 2px; }
.whatsnew-body { padding: 4px 26px 8px; overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.whatsnew-group { padding: 10px 0; border-top: 1px solid var(--hair-soft); }
.whatsnew-group:first-child { border-top: 0; }
.whatsnew-ver { font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); color: var(--link); text-transform: uppercase; margin-bottom: 6px; }
.whatsnew-date { color: var(--brand-grey-500, var(--ink-3)); font-weight: 400; text-transform: none; letter-spacing: 0; }
.whatsnew-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.whatsnew-list li { font-size: 14px; line-height: 1.5; color: var(--ink); }
.whatsnew-foot { padding: 16px 26px 22px; display: flex; justify-content: flex-end; }

/* "New version available" banner (Karan 13/07) — top bar, prompts a reload. */
/* The banner sits ON the status bar in standalone — viewport-fit=cover means
   top:0 is the top of the SCREEN, not the top of the safe area. It is the first
   thing anybody sees after a deploy, printed over the clock. */
.update-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: calc(11px + env(safe-area-inset-top, 0px)) 20px 11px;
  background: var(--ink-fill); color: var(--ink-fill-ink);
  font-size: 13.5px; font-weight: var(--weight-medium); box-shadow: var(--shadow-float); }
.update-banner .btn.primary { padding: 5px 16px; font-size: 12.5px; }
/* Banner pushes the app down instead of sitting over the logo/title. */
body.update-banner-open .shell,
body.update-banner-open .centered { padding-top: calc(48px + env(safe-area-inset-top, 0px)); }
.ri-shot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ri-shot-status { font-size: 12.5px; color: var(--text-muted); }

/* Issues admin screen (Karan 12/07): the Report-an-issue register. */
.issue-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.issue-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 16px 18px; }
.issue-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.issue-who { font-weight: var(--weight-medium); color: var(--ink); font-size: 13px; }
.issue-chip { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--link);
  background: var(--nav-hover); padding: 2px 9px; border-radius: var(--radius-pill); }
.issue-when { font-size: 12px; color: var(--text-muted); }
.issue-build { font-family: var(--font-technical); font-size: 11px; color: var(--text-muted); margin-left: auto; }
.issue-msg { font-size: 14.5px; color: var(--ink); line-height: 1.55; white-space: pre-wrap; }
.issue-shot { display: block; margin-top: 12px; max-width: 320px; max-height: 200px; width: auto; border-radius: 8px;
  border: 1px solid var(--hair); cursor: zoom-in; }
.issue-ua { margin-top: 10px; font-size: 11px; color: var(--ink-3); word-break: break-all; }
.issue-card.resolved { opacity: 0.6; }
.issue-done { margin-left: auto; font-size: 11px; color: var(--status-ok); background: color-mix(in srgb, var(--status-ok) 12%, var(--surface)); padding: 2px 10px; border-radius: var(--radius-pill); font-weight: var(--weight-medium); }
.issue-foot { margin-top: 12px; }
.issue-foot .btn { padding: 6px 15px; font-size: 12.5px; }
.issue-lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(12,17,57,0.82);
  display: grid; place-items: center; padding: 4vh 4vw; cursor: zoom-out; }
.issue-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: var(--shadow-dialog); }

/* Bank page (Karan 10/07): account balances, monthly cash flow, category picker. */
.bk-accounts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.bk-acct { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg);
  padding: 14px 18px; min-width: 150px; }
.bk-acct.main { border-color: var(--link); box-shadow: var(--shadow-float); }
.bk-acct.alert { margin-left: auto; }
.bk-acct-name { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.bk-acct-bal { font-size: var(--text-h3); font-weight: var(--weight-medium); color: var(--ink); margin-top: 4px;
  font-variant-numeric: tabular-nums; }
.bk-cashflow { margin-top: 20px; background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius-lg); padding: 16px 20px; }
.bk-cf-title { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.bk-cf-grid { display: flex; gap: 20px; align-items: flex-end; }
.bk-cf-col { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.bk-cf-bars { display: flex; gap: 4px; align-items: flex-end; height: 90px; }
.bk-cf-bars span { width: 16px; border-radius: 3px 3px 0 0; min-height: 2px; }
.bk-cf-in { background: var(--status-ok); }
.bk-cf-out { background: var(--status-error); }
.bk-cf-net { font-size: 12.5px; font-weight: var(--weight-medium); margin-top: 8px; font-variant-numeric: tabular-nums; }
.bk-cf-mon { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.bk-cf-key { display: flex; gap: 18px; margin-top: 14px; font-size: 11px; color: var(--text-muted); }
.bk-cf-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.bk-cf-key i.in { background: var(--status-ok); }
.bk-cf-key i.out { background: var(--status-error); }
.bk-cat { font-size: 11.5px; padding: 4px 26px 4px 8px; border-radius: 6px; max-width: 150px;
  background-position: right 8px center; }
.bk-cat.guessed { border-color: var(--brand-orange); color: var(--brand-orange); font-style: italic; }

/* Enquiry status-action bar (Karan 10/07). */
.eq-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; }
.eq-actions .g-note { margin-right: 4px; }

/* Help page (Karan 12/07) — the original .help-* screen. Its centred 940px
   .help-shell was removed 18/10/2026 (width law W1); nothing renders it now. */

.help-hero { padding: 20px 0 8px; }
.help-eyebrow { display: inline-block; font-family: var(--font-technical); font-size: 11px; font-weight: var(--weight-medium);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--link); margin-bottom: 12px; }
.help-hero h1 { font-size: var(--text-h1); letter-spacing: -0.025em; color: var(--ink); font-weight: var(--weight-medium); margin: 0; text-wrap: balance; }
.help-lead { font-size: 16px; color: var(--text-muted); line-height: 1.6; margin: 14px 0 0; max-width: 60ch; }

.help-grid { display: grid; grid-template-columns: 200px 1fr; gap: 56px; margin-top: 40px; align-items: start; }

/* Contents rail — sticky, quiet until active. */
.help-toc { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 2px; }
.help-toc-head { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 0 10px 12px; }
.help-toc-link { display: block; padding: 6px 12px; border-left: 2px solid var(--hair); border-radius: 0 6px 6px 0;
  font-size: 13px; line-height: 1.35; color: var(--text-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.help-toc-link:hover { color: var(--ink); background: var(--nav-hover); }
.help-toc-link.active { color: var(--link); border-left-color: var(--link); font-weight: var(--weight-medium); }

/* Content column — strictly left-aligned. */
.help-content { min-width: 0; }
.help-sec { padding: 0 0 40px; scroll-margin-top: 28px; }
.help-sec + .help-sec { padding-top: 40px; border-top: 1px solid var(--hair); }
.help-sec h2 { font-size: var(--text-h3); color: var(--ink); font-weight: var(--weight-medium); letter-spacing: -0.02em; margin: 0 0 16px; }
.help-sec p { font-size: 15px; color: var(--ink); line-height: 1.72; margin: 0 0 14px; max-width: 68ch; }
.help-sec ul { margin: 6px 0 14px; padding-left: 20px; max-width: 68ch; }
.help-sec li { font-size: 15px; color: var(--ink); line-height: 1.7; margin-bottom: 6px; }
.help-sec li::marker { color: var(--link); }
.help-sec b { font-weight: var(--weight-medium); }
.help-sec code { font-family: var(--font-technical, monospace); font-size: 12.5px; background: var(--nav-hover);
  padding: 2px 7px; border-radius: 5px; color: var(--anchor); white-space: nowrap; }
.help-note { padding: 14px 18px; background: var(--brief-bg); border-radius: var(--radius-lg); border: 1px solid var(--hair); }

/* Email keys — labelled rows, code chip over its description. */
.help-keys { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 16px; }
.help-key { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: baseline;
  padding: 13px 4px; border-bottom: 1px solid var(--hair); }
.help-key > code { justify-self: start; }
.help-key > span { font-size: 14px; color: var(--ink); line-height: 1.6; }

@media (max-width: 760px) {
  .help-grid { grid-template-columns: 1fr; gap: 20px; }
  .help-toc { position: static; flex-flow: row wrap; gap: 6px; }
  .help-toc-head { width: 100%; padding-left: 0; }
  .help-toc-link { border-left: 0; border: 1px solid var(--hair); border-radius: var(--radius-pill); padding: 5px 12px; }
  .help-toc-link.active { border-color: var(--link); background: var(--nav-hover); }
  .help-hero h1 { font-size: var(--figure-sm); }
  .help-key { grid-template-columns: 1fr; gap: 6px; }
}

/* Fee-calculator item picker: custom dropdown directly below the input (Karan 10/07). */
.fc-picker { position: relative; }
.fc-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 4px;
  max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--hair);
  border-radius: 12px; box-shadow: var(--shadow-dialog); padding: 5px; }
.fc-opt { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--ink);
  padding: 8px 12px; border-radius: 8px; }
.fc-opt:hover { background: var(--nav-hover); }
.fc-opt .sec { font-size: 11.5px; color: var(--text-muted); }

/* The enquiry email card (Karan 10/07 — show the actual message). */
.eq-email { background: var(--brief-bg); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 18px 20px; }
.eq-email-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.eq-email-from { font-size: 13px; color: var(--text-muted); }
.eq-email-subj { font-size: 15px; font-weight: var(--weight-medium); color: var(--ink); margin: 2px 0 10px; }
.eq-email-body { font-size: 13.5px; color: var(--ink); line-height: 1.6; white-space: pre-wrap;
  max-height: 320px; overflow-y: auto; }
.chip.attn { border-color: var(--brand-orange); color: var(--brand-orange); }
.chip.attn.active { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--brand-white); }

/* Review cards (timesheet approvals) */
.review-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.review-card { border: 1px solid var(--hair); border-radius: 12px; padding: 16px 18px; }
.review-card.clickable { cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.review-card.clickable:hover { border-color: var(--link); box-shadow: var(--shadow-card, 0 1px 3px rgba(12,17,57,0.08)); }
.review-hours { font-size: var(--text-h2); font-weight: var(--weight-medium); color: var(--anchor); font-family: var(--font-technical); margin-top: 8px; }
/* At-a-glance day strip inside each approval card (Karan 07/07). */
.review-days { display: flex; gap: 12px; margin-top: 8px; }
.rd { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rd-l { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.08em; color: var(--ink-3); }
.rd-v { font-family: var(--font-technical); font-size: 11.5px; color: var(--ink-3); }
.rd-v.has { color: var(--ink); }
.review-foot { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.review-weekend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }

/* Weekend-working request/approval (Karan 13/07) */
.ts-weekend-badge { font-size: 12px; padding: 5px 12px; border-radius: var(--radius-pill); font-weight: var(--weight-medium); white-space: nowrap; }
.ts-weekend-badge.open { background: color-mix(in srgb, var(--status-ok) 12%, var(--surface)); color: var(--status-ok); }
.ts-weekend-badge.pending { background: var(--status-hold-bg); color: var(--status-hold-ink); }

/* Meeting mode */
.meet-overlay { position: fixed; inset: 0; z-index: 70; background: var(--brand-navy); color: #F5F5F5; display: flex; flex-direction: column; padding: 48px 64px; }
.meet-head { display: flex; align-items: center; gap: 20px; }
.meet-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-blue); color: #F5F5F5; display: grid; place-items: center; font-size: var(--text-h3); font-weight: var(--weight-medium); }
.meet-name { font-size: var(--text-h1); font-weight: var(--weight-medium); letter-spacing: -0.02em; }
.meet-sub { color: var(--brand-blue-100); font-size: 14px; margin-top: 4px; }
.meet-list { margin-top: 36px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.meet-row { display: grid; grid-template-columns: 100px 1fr 1.2fr 150px 140px; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(245,245,245,0.12); font-size: 16px; align-items: baseline; }
/* Inline status/lead editing (Karan 13/07): quick updates from the list + the
   Monday walkthrough without opening each project. */
.cell-edit { cursor: pointer; border-radius: 5px; transition: background var(--dur-fast); }
table.data td.cell-edit:hover { background: var(--surface-sunk); box-shadow: inset 0 0 0 1px var(--hair); }
.meet-list.editable .cell-edit:hover { background: rgba(255,255,255,0.08); }
.meet-ld-cell { color: var(--brand-blue-100); font-size: 14px; }
.meet-assign { color: var(--brand-blue-100); font-style: italic; }
.inline-pick { position: fixed; z-index: 100000; background: var(--surface); border: 1px solid var(--hair);
  border-radius: 9px; box-shadow: 0 10px 32px rgba(15,23,42,0.22); padding: 5px; max-height: 320px; overflow-y: auto;
  min-width: 160px; display: flex; flex-direction: column; gap: 1px; }
.inline-pick-opt { text-align: left; background: none; border: 0; padding: 8px 12px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.inline-pick-opt:hover { background: var(--surface-sunk); }
.inline-pick-opt.current { font-weight: var(--weight-medium); color: var(--link); }
.pdf-qmenu-head { font-size: 12px; font-weight: var(--weight-medium); color: var(--ink); padding: 6px 12px 4px; }
.pdf-qmenu-note { font-size: 11px; color: var(--brand-grey-500, var(--ink-3)); padding: 4px 12px 6px; max-width: 200px; line-height: 1.4; }
.inline-pick-opt.current::after { content: none; }
.inline-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 100001;
  background: var(--ink-fill); color: var(--ink-fill-ink); padding: 11px 18px; border-radius: 9px; font-size: 13.5px;
  box-shadow: 0 8px 26px rgba(15,23,42,0.3); max-width: 90vw; }

/* Compress PDF tool */
.cmp-wrap { max-width: 640px; }
.cmp-intro { color: var(--brand-grey-500, var(--ink-3)); font-size: 14.5px; line-height: 1.55; margin: 4px 0 22px; }
.cmp-drop { display: block; border: 1.5px dashed var(--hair); border-radius: 12px; padding: 34px 20px;
  text-align: center; cursor: pointer; transition: border-color var(--dur-base), background var(--dur-base); background: var(--brand-grey-50, #F5F5F5); }
.cmp-drop:hover, .cmp-drop.over { border-color: var(--link); background: rgba(37,99,235,0.04); }
.cmp-drop-title { font-size: 15.5px; color: var(--ink); font-weight: 500; }
.cmp-drop-sub { font-size: 12.5px; color: var(--brand-grey-500, var(--ink-3)); margin-top: 6px; }
.cmp-quality { display: flex; align-items: center; gap: 18px; margin: 22px 0 4px; flex-wrap: wrap; }
.cmp-qopts { display: flex; gap: 18px; flex-wrap: wrap; }
.cmp-qopt { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.cmp-card { margin-top: 22px; border: 1px solid var(--hair); border-radius: 12px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px; }
.cmp-file { font-size: 14px; color: var(--ink); }
.cmp-card .cmp-file b { font-weight: var(--weight-medium); }
.cmp-prog { height: 8px; background: var(--surface-sunk); border-radius: 99px; overflow: hidden; }
.cmp-bar { height: 100%; width: 0; background: var(--brand-blue); border-radius: 99px; transition: width var(--dur-base); }
.cmp-status { font-size: 13px; color: var(--brand-grey-500, var(--ink-3)); }
.cmp-big { font-size: var(--text-h3); color: var(--ink); font-weight: var(--weight-regular); }
.cmp-big b { font-weight: var(--weight-medium); }
.cmp-saved { display: inline-block; margin-left: 10px; font-size: 13px; font-weight: var(--weight-medium); color: var(--status-ok);
  background: rgba(16,185,129,0.12); padding: 3px 10px; border-radius: 99px; vertical-align: middle; }
.cmp-sub { font-size: 12.5px; color: var(--brand-grey-500, var(--ink-3)); }
.cmp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cmp-actions .btn { text-decoration: none; }
.cmp-note { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.cmp-note.error { color: var(--brand-red, var(--status-error)); }
.meet-row .mono { font-family: var(--font-technical); font-weight: var(--weight-medium); }
.meet-row .dim { color: var(--brand-blue-100); font-size: 14px; }
.meet-foot { display: flex; align-items: center; gap: 18px; margin-top: 24px; }
.meet-btn { border: 1px solid rgba(245,245,245,0.4); background: none; color: #F5F5F5; border-radius: var(--radius-pill); padding: 9px 22px; font-family: var(--font-sans); font-size: 14px; cursor: pointer; }
.meet-btn:hover { background: rgba(245,245,245,0.12); }
.meet-count { color: var(--brand-blue-100); font-size: 13px; letter-spacing: 0.08em; }

/* Calendar full-height + leave */
.cal-grid.real .cal-cell { min-height: calc((100vh - 300px) / 5); }
.cal-actions { display: flex; gap: 10px; }

/* Client detail overlay bits */
.cd-similar { margin: 0 20px 14px; padding: 12px 14px; background: color-mix(in srgb, var(--brand-orange) 8%, var(--surface)); border-radius: 8px; font-size: 13px; color: var(--ink); }
.cd-stats { display: flex; gap: 28px; padding: 16px 20px 4px; }
.cd-stat-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.cd-stat-val { font-size: var(--text-h3); font-weight: var(--weight-medium); color: var(--anchor); margin-top: 2px; }

/* Overlay viewer (files + email threads + forms). Frosted backdrop; forms
   default to a narrower, more vertical panel — viewers opt into .wide. */
/* Every panel and viewer in Track opens inside this. The 4vh of padding is not
   enough on a notched phone, where the top 59px of "the screen" is the status
   bar — so the inset is added to it rather than replacing it. */
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(12, 17, 57, 0.35);
  -webkit-backdrop-filter: blur(7px) saturate(0.9); backdrop-filter: blur(7px) saturate(0.9);
  display: grid; place-items: center;
  padding: calc(4vh + env(safe-area-inset-top, 0px)) 4vw calc(4vh + env(safe-area-inset-bottom, 0px)); }
.overlay-panel { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-dialog); width: min(520px, 100%); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
/* Wide viewers fill the padded backdrop exactly — the .overlay 4vh/4vw padding
   is the only screen margin, so nothing spills off the edges (Karan 07/07). */
.overlay-panel.wide { width: 100%; height: 100%; max-height: 100%; }
.overlay-panel.reading { width: min(840px, 94vw); } /* comfortable email/reading width (Karan 16/07) */
.overlay-panel.wide .ov-content { flex: 1; min-height: 0; }
.form-grid { grid-template-columns: 1fr 1fr; }
.overlay-panel:not(.wide) .form-grid { grid-template-columns: 1fr 1fr; }
.overlay-head { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--hair); flex: none; }
.ov-titles { min-width: 0; flex: 1; }
.ov-title { font-size: 16px; font-weight: var(--weight-medium); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-subtitle { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.ov-actions { flex: none; }
.ov-link { font-size: 12.5px; font-weight: var(--weight-medium); color: var(--link); text-decoration: none; }
.ov-link:hover { color: var(--anchor); }
.ov-close { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hair); background: var(--surface); color: var(--ink); font-size: var(--text-h3); line-height: 1; cursor: pointer; }
.ov-close:hover { background: var(--nav-hover); }
.ov-content { overflow-y: auto; flex: 1; min-height: 200px; }
.ov-content.viewer { display: flex; padding: 0; }
.viewer-iframe { border: 0; flex: 1; width: 100%; min-height: 0; }
.cad-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* Dark stage: CAD colour-7 linework is white (AutoCAD model-space convention). */
.cad-stage { flex: 1; min-height: 0; display: flex; background: var(--brand-navy); overflow: hidden; touch-action: none; position: relative; }
.cad-stage canvas { display: block; }
.d3-canvas { width: 100%; height: 100%; touch-action: none; }
/* Floating hint: max 1vh tall, zero layout footprint (Karan 07/07). */
.cad-hint { position: absolute; left: 10px; bottom: 4px; max-height: 1vh; overflow: hidden;
  font-size: 10px; line-height: 1; color: rgba(245,245,245,0.4); pointer-events: none; }

/* Email thread viewer */
.mail-msg { padding: 16px 20px 6px; border-bottom: 1px solid var(--hair-soft); }
.mail-msg:last-child { border-bottom: none; }
.mail-msg-head { display: flex; align-items: center; gap: 12px; }
.mail-msg-who { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mail-msg-from { font-size: 14px; font-weight: var(--weight-medium); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-msg-email { font-weight: 400; font-size: 12px; color: var(--text-muted); }
.mail-msg-to { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-msg-date { flex: none; font-family: var(--font-technical); font-size: 12px; color: var(--text-muted); }
.mail-iframe { display: block; width: 100%; border: 0; margin-top: 6px; background: var(--surface); }
.mail-atts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 10px; }
.mail-att { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--hair); border-radius: var(--radius-pill); font-size: 12px; color: var(--ink); }
.mail-att-size { color: var(--text-muted); font-family: var(--font-technical); font-size: 11px; }

/* Drive breadcrumbs */
.g-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 0 10px; border-bottom: 1px solid var(--hair-soft); margin-bottom: 4px; }
.g-crumb { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--font-sans); font-size: 12.5px; font-weight: var(--weight-medium); color: var(--link); }
.g-crumb:hover { color: var(--anchor); }
.g-crumb.here { color: var(--ink); cursor: default; }
.g-crumb-sep { color: var(--ink-3); font-size: 12px; }
.g-file-row, .g-mail-row { cursor: pointer; }

/* Finance privacy shield */
.privacy-zone { position: relative; }
.privacy-zone .pz-gate { display: none; }
.privacy-zone.frosted .pz-content { filter: blur(13px) saturate(0.75); pointer-events: none; user-select: none; }
.privacy-zone.frosted .pz-gate { display: block; position: absolute; inset: 0; z-index: 5; }
.pz-card { background: rgba(255,255,255,0.88); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid var(--hair); border-radius: 16px; padding: 26px 34px; text-align: center;
  box-shadow: var(--shadow-float); max-width: 340px;
  position: sticky; top: 30vh; margin: 120px auto 0; }
.pz-title { font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }

/* Advisory document-control audit on each project. */
.dc-panel { margin: 24px 0; padding: 18px 20px; border: 1px solid var(--hair); border-left-width: 4px; border-radius: 12px; background: var(--surface); }
.dc-panel.ok { border-left-color: var(--status-ok); }
.dc-panel.warn { border-left-color: var(--brand-orange); }
.dc-panel.error { border-left-color: var(--status-error); }
.dc-head, .dc-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dc-head h2 { margin: 3px 0 0; color: var(--ink); font-size: var(--text-h3); font-weight: var(--weight-medium); }
.dc-counts { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.dc-counts span { padding: 4px 9px; border-radius: var(--radius-pill); background: var(--surface-sunk); color: var(--text-secondary); font-size: 11px; }
.dc-findings { display: grid; gap: 7px; margin: 14px 0; }
.dc-finding { display: grid; grid-template-columns: minmax(150px, .5fr) 1.5fr; gap: 14px; padding: 9px 11px; border-radius: 8px; background: var(--surface-sunk); font-size: 12.5px; }
.dc-finding strong { color: var(--ink); }
.dc-finding span, .dc-foot { color: var(--text-muted); }
.dc-finding.blocked { background: color-mix(in srgb, var(--status-error) 7%, var(--surface)); }
.dc-finding.warning { background: color-mix(in srgb, var(--brand-orange) 8%, var(--surface)); }
.dc-foot { margin-top: 12px; font-size: 11.5px; }
@media (max-width: 760px) { .dc-head, .dc-foot { align-items: flex-start; flex-direction: column; } .dc-counts { justify-content: flex-start; } .dc-finding { grid-template-columns: 1fr; gap: 3px; } }

/* Enquiry detail */
.eq-ai-fields { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.eq-ai-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.eq-ai-val { margin-top: 3px; font-size: 13.5px; color: var(--ink); }
.eq-draft { margin-top: 16px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface); padding: 14px 16px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }

@media (max-width: 1100px) { .fin-cards, .fin-tables { grid-template-columns: 1fr; } .svc-grid { grid-template-columns: repeat(2, 1fr); } }

/* S1 (design audit 08/08): the old stacked-rail shell rules for ≤860px never
   rendered — the later 761–1180 sidebar block won every shared property — so
   they are deleted, and tablet portrait KEEPS the sidebar (the behaviour that
   actually shipped). Content-grid tweaks below still apply 761–860. */
@media (max-width: 860px) {
  .kpi-row, .view-head { padding-right: 0; }
  .kpi-row, .focus-grid { grid-template-columns: repeat(2, 1fr); }
  .home-cols, .pd-google { grid-template-columns: 1fr; gap: 32px; }
  .fin-kpis, .fin-kpis.five { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: 1fr; padding-right: 0; }
  .band-item { padding-left: 20px; margin-left: 20px; }
}

/* ── Responsive shell: tablet rail + phone navigation ─────────────────────
   The earlier 860px rules pre-date the completed app. These final overrides
   are intentionally last so every screen gets one predictable shell. */
.mobile-header, .mobile-nav-backdrop { display: none; }

@media (min-width: 761px) and (max-width: 1180px) {
  .shell { flex-direction: row; }
  .rail { width: 188px; height: 100vh; padding: 28px 24px 24px; }
  .rail-nav { margin-top: 34px; flex-direction: column; flex-wrap: nowrap; }
  .nav-group { border-top: 1px solid var(--hair); flex-direction: column; gap: 4px; padding: 12px 0 14px; }
  .nav-group:first-child { border-top: 0; }
  .nav-item { font-size: 11px; letter-spacing: 0.1em; padding: 7px 11px; margin-left: -11px; }
  .rail-foot { margin-top: auto; }
  .main { padding: 32px 30px 112px; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; }
  .kpi-fig { font-size: var(--anchor-sm); }
  .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-top, .home-bottom, .pd-body, .pd-google { gap: 28px; }
  .home-cols.three { grid-template-columns: 1fr 1fr; }
  .fin-kpis.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ts-grid { overflow-x: auto; }
  .ts-headline, .ts-rows-scroll, .ts-totline { min-width: 790px; }
}

@media (max-width: 760px) {
  html { overflow-x: hidden; }
  .shell { display: block; min-height: 100dvh; padding-top: 58px; }
  .mobile-header { position: fixed; inset: 0 0 auto; z-index: 55; height: 58px; padding: 0 14px;
    display: grid; grid-template-columns: 40px auto 1fr; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.94); border-bottom: 1px solid var(--hair);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .mobile-header .wordmark-track { font-size: 19px; }   /* the phone app bar (mobile design, 2a) */
  .mobile-menu-btn { width: 44px; height: 44px; appearance: none; border: 0; background: none;
    border-radius: 50%; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .mobile-menu-btn:active { background: var(--nav-hover); }
  .mobile-view-name { min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--text-muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
  .mobile-nav-backdrop { position: fixed; inset: 58px 0 0; z-index: 49; width: 100%; border: 0;
    background: rgba(12,17,57,0.28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .rail { position: fixed; z-index: 50; left: 0; top: 58px; width: min(86vw, 320px); height: calc(100dvh - 58px);
    max-height: none; padding: 24px 26px 22px; box-shadow: var(--shadow-dialog); transform: translateX(-105%);
    transition: transform var(--dur-base) var(--ease-out); }
  .nav-open .rail { transform: translateX(0); }
  .nav-open .mobile-nav-backdrop { display: block; }
  .rail > .wordmark { display: none; }
  .rail-nav { margin-top: 0; flex-direction: column; flex-wrap: nowrap; }
  .nav-group { border-top: 1px solid var(--hair); padding: 12px 0 14px; gap: 4px; flex-direction: column; }
  .nav-group:first-child { padding-bottom: 14px; }
  .nav-group-label { display: block; }
  .nav-item { width: 100%; min-height: 44px; margin: 0; padding: 10px 13px; font-size: 12px; }
  .rail-foot { margin-top: 14px; padding-top: 18px; }
  .main { padding: 22px max(16px, env(safe-area-inset-right))
    calc(104px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    min-height: calc(100dvh - 58px); }

  .h1 { font-size: var(--text-h1); }
  .view-head { align-items: flex-start; flex-wrap: wrap; padding-right: 0; gap: 10px 12px; }
  .view-head > .h1 { width: 100%; }
  .list-controls, .proj-toolbar, .proj-toolbar-row { padding-right: 0; }
  .proj-toolbar-row { align-items: stretch; flex-wrap: wrap; }
  .proj-toolbar-row .search-input { width: 100%; max-width: none; order: -1; }
  .proj-toolbar-spacer { display: none; }
  .proj-sel { flex: 1 1 140px; min-width: 0; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 3px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; min-height: 44px; padding: 10px 14px; }

  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; padding-right: 0; }
  .kpi-fig { font-size: var(--anchor-sm); }
  .kpi-unit { font-size: var(--text-h3); }
  .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .focus-chart { height: 98px; }
  .focus-arrow { font-size: var(--anchor-md); }
  .focus-text { font-size: 12px; }
  .home-top, .home-bottom, .home-mywork-grid, .home-cols, .home-cols.three, .pd-body, .pd-google,
  .fin-cards, .fin-tables { grid-template-columns: 1fr; gap: 26px; }
  .home-top, .home-mywork, .home-bottom, .home-cols { margin-top: 32px; }
  .alerts { padding: 14px 16px; }
  .alert-row { align-items: flex-start; }

  .table-wrap { width: calc(100% + 16px); margin-right: -16px; padding-right: 16px; }
  table.data { min-width: 720px; font-size: 13px; }
  table.data th { font-size: 10px; }
  .card-table { overflow-x: auto; }
  .card-table .scroll { overflow: visible; }
  .ct-head, .ct-row { min-width: 620px; }
  .fin-kpis, .fin-kpis.five, .fin-stats { grid-template-columns: 1fr 1fr; padding-right: 0; gap: 10px; }
  .fin-kpi { padding: 14px; }
  .fin-kpi-val, .fin-kpi-val.big { font-size: var(--text-h3); }

  .ts-page { max-height: none; }
  .ts-grid { overflow-x: auto; }
  .ts-headline, .ts-rows-scroll, .ts-totline { min-width: 760px; }
  .ts-rows-scroll { overflow-y: visible; overflow-x: visible; }
  .ts-logdays { grid-template-columns: 1fr; }
  .ts-weeknav { flex-wrap: wrap; }

  .cal-head, .cal-nav, .cal-actions { flex-wrap: wrap; }
  #cal-body { overflow-x: auto; }
  .cal-weekday-head, .cal-grid.real { min-width: 620px; }
  .cal-grid.real .cal-cell { min-height: 110px; }

  .pd-head { flex-wrap: wrap; }
  .pd-client { flex-basis: calc(100% - 50px); }
  .pd-status { margin-left: 50px; }
.pd-body { padding-right: 0; }
  .pd-numbers { grid-template-columns: 1fr 1fr; }
  .pd-act-row { grid-template-columns: 70px 1fr; }
  .eq-tl-row { grid-template-columns: 12px 66px 72px minmax(120px, 1fr); }
  .eq-ai-fields { grid-template-columns: 1fr; }

  .ted-sheet { margin: 0; border: 0; border-radius: 0; padding: 22px 16px; }
  .ted-row, .ted-row3 { grid-template-columns: 1fr; gap: 1px; padding: 5px 0; }
  .ted-row > :empty { display: none; }
  .ted-row:not(.ted-row3) > .ted-val { grid-column: auto; }
  .ted-figure-vec { padding: 4px; }
  .msnx-sheet { margin: 0; padding: 22px 16px; border: 0; border-radius: 0; }
  .msnx-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .msnx-head-meta { justify-content: flex-start; }
  .msnx-notice { grid-template-columns: 1fr; gap: 4px; }
  .msnx-hero, .msnx-overview, .msnx-cards { grid-template-columns: 1fr; }
  .msnx-hero { gap: 20px; }
  .msnx-foot { flex-direction: column; gap: 6px; }

  .overlay { padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); place-items: stretch; }
  .overlay-panel, .overlay-panel.wide { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .overlay-head { padding: 12px 14px; gap: 10px; }
  .overlay-panel:not(.wide) .form-grid, .form-grid { grid-template-columns: 1fr; }
  .ov-title { font-size: 14px; }
  .mail-msg { padding: 14px 14px 6px; }
  .mail-msg-date { display: none; }
  .review-grid { grid-template-columns: 1fr; }
  .card { padding: 28px 20px; }
  .card .btn { width: 100%; }
  .card .btn + .btn { margin-left: 0; }
}

/* ── 55-inch office display (/office) ─────────────────────────────────── */
.shell.office-mode { display: block; min-height: 100dvh; padding: 0; background: var(--brand-navy); cursor: none; }
.office-mode > .rail, .office-mode > .mobile-header, .office-mode > .mobile-nav-backdrop,
.office-mode .hdr { display: none !important; }
.office-mode .main { padding: 0; min-height: 100dvh; background: var(--brand-navy); }
.office-mode .view { min-height: 100dvh; }
/* ── The Office Display — a 1920×1080 stage scaled to fit the wall, so every
   value is the design's verbatim px (artboards 1a–1d). Own type scale + own
   colours; inherits none of the app. cursor:none — nobody holds a mouse. */
.od-viewport { height: 100dvh; width: 100%; overflow: hidden; background: var(--brand-navy); display: grid; place-items: center; cursor: none; }
.od-scaler { width: 1920px; height: 1080px; flex: none; transform-origin: center center; }
.od-stage { width: 1920px; height: 1080px; box-sizing: border-box; padding: 56px 64px 44px;
  background: var(--brand-navy); color: var(--brand-white); font-family: var(--font-sans);
  display: flex; flex-direction: column; overflow: hidden;
  transition: opacity var(--dur-base) var(--ease-out); animation: om-fade var(--dur-base) var(--ease-out) both; }
.od-stage, .od-stage * { cursor: none; }
@keyframes om-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes od-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes od-fillw { from { width: 0; } to { width: 100%; } }
.od-fill { animation: od-fillw var(--dur-slow) linear forwards; }
@keyframes od-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.od-bar { animation: od-bar-grow var(--dur-slow) var(--ease-out) both; }

@media (max-width: 900px), (max-height: 650px) {
  .office-board { height: auto; min-height: 100dvh; overflow: auto; }
  .office-head { grid-template-columns: 1fr auto; }
  .office-actions { display: none; }
  .office-grid { grid-template-columns: 1fr; }
  .office-panel { min-height: 480px; }
  .office-project-row { grid-template-columns: 68px minmax(0, 1fr) 118px; }
  .office-lead { display: none; }
}

/* AI fee-proposal draft (server-side agent) — draft-and-review card. */
.fee-draft { margin-top: 14px; border: 1px solid var(--hair); border-radius: 10px; padding: 14px 16px; background: var(--brand-grey-50, #F5F5F5); }
.fee-draft.approved { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.05); }
.fee-draft-head { display: flex; align-items: center; gap: 8px; }
.fee-draft-tag { font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); color: var(--link); text-transform: uppercase; }
.fee-draft-head .pill { margin-left: auto; }
.fee-draft-head .pill + .pill { margin-left: 6px; }
.fee-draft-scope { font-size: 13px; line-height: 1.5; color: var(--ink); margin: 10px 0; }
.fee-draft-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0 10px; }
.fee-draft-table th { text-align: left; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-grey-500,var(--ink-3)); padding: 4px 6px; border-bottom: 1px solid var(--hair); }
.fee-draft-table th:nth-child(n+2) { text-align: center; }
.fee-draft-table th:last-child { text-align: right; }
.fee-draft-table td { padding: 5px 6px; border-bottom: 1px solid var(--hair-soft); color: var(--ink); }
.fee-draft-table tfoot td { font-weight: var(--weight-medium); border-bottom: 0; border-top: 1px solid var(--hair); }
.fee-draft-calc { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink); margin: 6px 0; }
.fee-draft-calc span:first-child { display: inline-block; min-width: 118px; color: var(--brand-grey-500,var(--ink-3)); }
.fee-draft-calc .dim { color: var(--brand-grey-500,var(--ink-3)); }
.fee-draft-flags { margin: 10px 0 4px; background: rgba(245,158,11,0.07); border-radius: 7px; padding: 9px 12px; }
.fee-draft-flags-h { font-size: 11px; font-weight: var(--weight-medium); color: var(--brand-orange,#FF5001); margin-bottom: 4px; }
.fee-draft-flags ul { margin: 0; padding-left: 18px; }
.fee-draft-flags li { font-size: 12px; line-height: 1.45; color: var(--ink); margin: 2px 0; }
.fee-draft-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

/* Site Visit Capture — deliberately oversized for gloves, glare and one hand. */
.pd-site-visits { margin-bottom: 22px; }
.site-visit-launch { width: 100%; min-height: 92px; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto;
  align-items: center; column-gap: 14px; padding: 17px 20px; border: 0; border-radius: 14px; background: var(--ink-fill); color: var(--ink-fill-ink); text-align: left; cursor: pointer; box-shadow: var(--shadow-card); }
.site-visit-launch > span { grid-row: 1 / 3; font-size: var(--figure-sm); }
.site-visit-launch strong { align-self: end; font-size: var(--text-h3); }
.site-visit-launch small { align-self: start; color: var(--brand-blue-100); font-size: 12px; }
.site-visit-recent { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 10px; }
.site-visit-row { appearance: none; width: 100%; display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border: 0; border-bottom: 1px solid var(--hair-soft); background: transparent; color: inherit; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.site-visit-row:last-child { border-bottom: 0; }
.site-visit-row:hover span { color: var(--link); }
.site-visit-recent span { color: var(--text-secondary); }

/* Site report Phase 2 — engineer review, never automatic issue. */
.svr-empty { max-width: 620px; padding: 8px 2px; }
.svr-empty h2 { margin: 6px 0 10px; color: var(--ink); font-size: var(--text-h3); }
.svr-empty p { color: var(--text-secondary); line-height: 1.6; }
.svr-state { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 12px 15px; border-left: 4px solid var(--brand-orange); background: rgba(245,152,56,.08); color: var(--ink); }
.svr-state.approved { border-left-color: var(--status-ok); background: color-mix(in srgb, var(--status-ok) 8%, var(--surface)); }
.svr-state a { color: var(--link); }
.svr-review textarea { line-height: 1.55; resize: vertical; }
.svr-fixed, .svr-transcripts, .svr-photos { margin-top: 18px; padding: 15px 17px; border: 1px solid var(--hair); border-radius: 10px; }
.svr-fixed h3, .svr-photos h3 { margin: 0 0 9px; color: var(--ink); font-size: 13px; }
.svr-fixed ul { margin: 0; padding-left: 19px; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.svr-fixed small { color: var(--text-muted); }
.svr-fixed.flags { border-left: 3px solid var(--brand-orange); }
.svr-transcripts summary { cursor: pointer; color: var(--ink); font-weight: var(--weight-medium); }
.svr-transcripts article { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair-soft); }
.svr-transcripts p { white-space: pre-wrap; color: var(--text-secondary); line-height: 1.55; }
.svr-photos > div { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hair-soft); font-size: 12.5px; }
.svr-photos a { color: var(--link); }
.svr-footer { margin: 18px 0; color: var(--text-muted); font-size: 11px; font-style: italic; }
@media (max-width: 520px) { .site-visit-row { grid-template-columns: 74px 1fr; } .site-visit-row .pill { grid-column: 2; justify-self: start; } .svr-state { flex-direction: column; } .svr-photos > div { grid-template-columns: 24px 1fr; } .svr-photos a { grid-column: 2; } }

  .msnx-sheet { margin: 0; padding: 22px 16px; border: 0; border-radius: 0; }
  .msnx-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .msnx-head-meta { justify-content: flex-start; }
  .msnx-notice { grid-template-columns: 1fr; gap: 4px; }
  .msnx-hero, .msnx-overview, .msnx-cards { grid-template-columns: 1fr; }
  .msnx-hero { gap: 20px; }
  .msnx-foot { flex-direction: column; gap: 6px; }

/* Shared project email list (Karan 14/07 — visible to everyone, from the archiver index) */
.pd-email-row { padding: 10px 0; border-top: 1px solid var(--hair-soft); }
.pd-email-row:first-child { border-top: 0; }
a.pd-email-row { display: block; text-decoration: none; color: inherit; }
/* Applies whether the row is an <a> or a <div role="button"> (Karan 16/07 — no
   hover cue that the email is clickable). */
.pd-email-row.clickable { cursor: pointer; padding: 10px 8px; margin: 0 -8px; border-radius: 8px; transition: background var(--dur-fast); }
.pd-email-row.clickable:hover { background: var(--brand-grey-050, rgba(0,0,0,0.04)); box-shadow: inset 0 0 0 1px var(--brand-grey-100, var(--hair-soft)); }
.pd-email-row.clickable:hover .pd-email-subj { color: var(--link); }
.pd-email-row.clickable:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }

/* Global keyboard focus ring — every interactive element gets a visible focus
   state (was on only 2 elements; --focus-ring was defined but unused) (Karan 16/07). */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.nav-item:focus-visible, .chip:focus-visible, .linkbtn:focus-visible, .seg button:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px;
}
.pd-email-row.clickable .pd-email-subj::after { content: ' ›'; color: var(--ink-3); opacity: 0; transition: opacity var(--dur-fast); }
.pd-email-row.clickable:hover .pd-email-subj::after { opacity: 1; }
.pd-email-count { font-size: 11px; color: var(--ink-3); }
.email-view-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; color: var(--ink); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--hair-soft); }
.email-view-meta .sec { color: var(--ink-3); margin-right: 4px; }
.email-view-body { white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.55; color: var(--ink); max-height: 58vh; overflow-y: auto; font-family: inherit; }

/* In-app email reader (Karan 16/07 — "make it look like an email"): padded,
   with a sender header + avatar and a readable body column. */
.email-reader { padding: 26px 30px 10px; }
.email-reader-head { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--hair-soft); }
.email-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-blue); color: var(--brand-white); display: grid; place-items: center; font-size: 14px; font-weight: var(--weight-medium); flex: none; text-transform: uppercase; }
.email-reader-who { flex: 1; min-width: 0; }
.email-reader-from { font-size: 15px; font-weight: var(--weight-medium); color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.email-reader-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; word-break: break-word; }
.email-reader-date { font-size: 12.5px; color: var(--text-muted); text-align: right; white-space: nowrap; flex: none; }
.email-reader-body { white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.7; color: var(--ink); max-width: 66ch; }

/* Per-project issues log (Karan 16/07) */
.pd-issue-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pd-issue-row { display: block; width: 100%; text-align: left; background: none; border: 1px solid var(--hair-soft); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); }
.pd-issue-row:hover { background: var(--row-hover); border-color: var(--link); }
.pd-issue-title { font-size: 13.5px; font-weight: var(--weight-medium); color: var(--ink); }
.eq-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 24px; padding: 12px 14px; border-radius: 10px;
  background: var(--brand-amber-050, var(--status-hold-bg)); border: 1px solid var(--brand-amber-200, var(--status-hold)); font-size: 13px; color: var(--ink); }
.eq-suggest-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.btn.sm { padding: 4px 12px; font-size: 12px; }
.cd-related { margin-top: 26px; }
.cd-related-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cd-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--brand-grey-100, var(--surface-sunk)); border-radius: 999px; padding: 2px 4px 2px 2px; }
.cd-chip-open { appearance: none; background: none; border: 0; cursor: pointer; padding: 4px 8px; font-size: 12.5px; color: var(--link); font-weight: var(--weight-medium); border-radius: 999px; }
.cd-chip-open:hover { text-decoration: underline; }
.cd-chip-x { appearance: none; background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: 15px; line-height: 1; padding: 0 6px; border-radius: 50%; }
.cd-chip-x:hover { color: var(--brand-red, var(--status-error)); }
.cd-related-add { display: flex; gap: 8px; margin-top: 12px; align-items: center; max-width: 460px; }

/* Project status: an inline dropdown (set ANY status, forward or back) with a
   colour edge matching the status tone (Karan 15/07). */
.status-select { appearance: none; -webkit-appearance: none; border: 1px solid var(--brand-grey-200, var(--hair)); border-left-width: 5px;
  border-radius: 8px; padding: 6px 28px 6px 12px; font-size: 13px; font-weight: var(--weight-medium); color: var(--ink);
  background-color: var(--card, var(--surface)); cursor: pointer; line-height: 1.2;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%23667085"/></svg>');
  background-repeat: no-repeat; background-position: right 10px center; }
.status-select:hover { border-color: var(--link); }
.status-select:disabled { opacity: 0.6; cursor: default; }
.status-select.status-complete, .status-select.status-issued { border-left-color: var(--status-ok); }
.status-select.status-part-issued { border-left-color: var(--brand-orange); }
.status-select.status-in-progress, .status-select.status-review, .status-select.status-ready-to-issue { border-left-color: var(--link); }
.status-select.status-not-started { border-left-color: var(--hair-strong); }
.pd-email-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.pd-email-from { font-size: 12.5px; font-weight: var(--weight-medium); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pd-email-date { font-size: 11.5px; color: var(--brand-grey-500, var(--ink-3)); margin-left: auto; white-space: nowrap; }
.pd-email-subj { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.pd-email-snip { font-size: 12.5px; color: var(--brand-grey-500, var(--ink-3)); line-height: 1.5; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Expense VAT auto-calc readout (Karan 14/07) */
.x-vatcalc { font-size: 13px; color: var(--ink); background: var(--brand-grey-50, var(--surface-sunk));
  border-radius: 8px; padding: 8px 11px; font-variant-numeric: tabular-nums; }

/* Danger (Decline / Reject) buttons — visually distinct from Approve (Karan 14/07) */
.btn.ghost.danger { color: var(--status-error); border-color: rgba(180,35,24,0.35); }
.btn.ghost.danger:hover { background: rgba(180,35,24,0.08); border-color: rgba(180,35,24,0.6); }
/* Amber dot on a nav item with pending approvals (Procurement) */
.nav-item.has-pending { position: relative; }
.nav-item.has-pending::after { content: ''; position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-orange); }

/* Feedback golden-thread on the project page (Karan 14/07) */
.pd-fb-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pd-fb-row { padding: 10px 12px; border: 1px solid var(--hair-soft); border-radius: 10px; }
.pd-fb-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.pd-fb-from { font-size: 12px; color: var(--ink); font-weight: var(--weight-medium); }
.pd-fb-date { font-size: 11.5px; color: var(--brand-grey-500, var(--ink-3)); margin-left: auto; }
.pd-fb-text { font-size: 13px; color: var(--ink); line-height: 1.5; }

/* Feedback AI-suggested review queue (Karan 14/07) */
.fb-suggest { border: 1px solid var(--hair-soft); border-radius: 12px; padding: 16px 18px; margin-bottom: 22px; background: var(--brand-grey-50, var(--surface-sunk)); }
.fb-suggest-row { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--hair-soft); }
.fb-suggest-row:first-of-type { border-top: 0; }
.fb-suggest-main { min-width: 0; flex: 1; }
.fb-suggest-acts { display: flex; gap: 8px; flex: none; }
.sv-screen { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--surface-sunk); color: var(--ink); overscroll-behavior: contain; }
.sv-head { flex: none; min-height: 68px; padding: calc(12px + env(safe-area-inset-top)) 18px 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--brand-navy); color: var(--brand-white); }
.sv-head div { min-width: 0; display: flex; flex-direction: column; }
.sv-head span { color: var(--brand-blue-100); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.sv-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.sv-close { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--brand-white); font-size: var(--text-h2); }
.sv-main { flex: 1; min-height: 0; overflow-y: auto; padding: 18px max(16px, env(safe-area-inset-left)) 130px; }
.sv-setup { max-width: 820px; margin: 0 auto 14px; }
.sv-label { margin-bottom: 8px; color: var(--text-secondary); font-size: var(--text-caps); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.sv-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.sv-chips button { flex: none; min-height: 44px; padding: 8px 14px; border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: var(--weight-medium); }
.sv-chips button.active { border-color: var(--link); background: var(--brand-blue); color: var(--brand-white); }
.sv-weather, .sv-caption { box-sizing: border-box; width: 100%; min-height: 48px; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); padding: 11px 13px; font: inherit; }
.sv-status { max-width: 820px; margin: 12px auto; display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 13px; }
.sv-status strong { color: var(--ink); font-size: var(--text-h3); }
.sv-status span { margin-left: auto; color: var(--link); font-weight: var(--weight-medium); }
.sv-actions { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
.sv-action { min-height: 150px; border: 0; border-radius: 18px; color: var(--brand-white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--shadow-card); }
.sv-action b { font-size: var(--anchor-sm); }
.sv-action span { font-size: var(--text-h3); font-weight: var(--weight-medium); }
.sv-action.photo { background: var(--brand-blue); }
.sv-action.voice { background: var(--ink-fill); }
.sv-action.voice.recording { background: var(--status-error); animation: sv-pulse 1.4s linear infinite; }
@keyframes sv-pulse { 50% { filter: brightness(1.18); } }
.sv-captures { max-width: 820px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 10px; }
.sv-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 13px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.sv-item-icon { font-size: var(--text-h2); }
.sv-item > div:last-child { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sv-item small { color: var(--text-secondary); }
.sv-chips.compact button { min-height: 44px; padding: 6px 11px; font-size: 11.5px; }
.sv-foot { position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.sv-end, .sv-sync { min-height: 58px; border: 0; border-radius: 12px; padding: 10px 20px; font-size: 17px; font-weight: var(--weight-medium); }
.sv-end { background: var(--status-ok); color: var(--brand-white); }
.sv-sync { background: var(--brief-bg); color: var(--ink); }
@media (max-width: 520px) {
  .sv-actions { grid-template-columns: 1fr 1fr; }
  .sv-action { min-height: 136px; }
  .sv-action b { font-size: var(--text-h1); }
  .sv-action span { font-size: 15px; }
  .sv-foot { grid-template-columns: 1fr 112px; }
  .site-visit-row { grid-template-columns: 74px 1fr; }
  .site-visit-row .pill { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .sv-action.voice.recording, .si2-progress i { animation: none; } }

/* Ask Track (.lib-*) legacy block deleted 08/08 — the view is inline-styled
   per handoff-ask-track; only the spinner keyframes remain in use. */
@keyframes lib-spin { to { transform: rotate(360deg); } }

/* Time-tracked breakdown overlay (Karan 14/07) */
.tb-list { max-height: 60vh; overflow-y: auto; }
.tb-person { padding: 10px 0; border-top: 1px solid var(--hair-soft); }
.tb-person:first-child { border-top: 0; }
.tb-person-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 14px; }
.tb-row { display: flex; gap: 12px; align-items: baseline; padding: 3px 0; font-size: 12.5px; }
.tb-row .mono { white-space: nowrap; }

/* Time breakdown page (Karan 14/07): full-page drill-down from the tracked-time figure */
.tbk-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 22px 28px; }
.tbk-scroll { overflow-x: auto; margin-top: 12px; }
.tbk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbk-table th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); font-weight: var(--weight-medium); padding: 0 14px 8px 0; border-bottom: 1px solid var(--hair-soft); white-space: nowrap; }
.tbk-table td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair-soft); color: var(--ink); vertical-align: top; }
.tbk-table th.r, .tbk-table td.r { text-align: right; }
.tbk-table tbody tr:hover td { background: var(--brand-grey-050, rgba(0,0,0,0.02)); }
.tbk-task { color: var(--ink); }
.tbk-note { margin-top: 3px; font-size: 12px; line-height: 1.4; max-width: 52ch; }

/* Ask Track bar: shrink as you scroll down, expand at the top / on focus (Karan 14/07) */

/* Timesheet: bank-holiday / approved-leave days blanked out + labelled (Karan 23/07). */
.ts-cell-off { background: var(--brand-grey-50, var(--surface-sunk)); opacity: .5; }
.ts-h-offlbl { font-size: var(--text-table-head); line-height: 1.15; font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-table); margin-top: 1px; }
.ts-h-offlbl.bh, .ts-h-offlbl.sick { color: var(--brand-grey, var(--ink-3)); }
.ts-h-offlbl.leave { color: var(--brand-orange, #FF5001); }

/* ── Project detail redesign (design handoff, Karan 04/08) ── */
.pd-head2 { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 18px; padding-right: 130px; }
.pd-title { margin: 0; font-size: var(--figure); font-weight: var(--weight-medium); letter-spacing: -0.03em; line-height: 1; }
.pd-t-no { color: var(--anchor); } .pd-t-client { color: var(--ink); }
.pd-sub2 { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.pd-sub2 .linky { color: var(--link); cursor: pointer; }
.pd-plain { color: var(--ink-2); }
.pd-dot { color: var(--ink-3); }
.pd-scheme-pill { border: 1px solid var(--hair); border-radius: 999px; padding: 3px 12px; font-size: 12.5px; color: var(--ink); }
.pd-head2-r { display: flex; align-items: center; gap: 20px; padding-top: 52px; white-space: nowrap; }
.pd-lead { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.pd-lead-lbl { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); }
.pd-lead-name { font-size: 14px; color: var(--ink); }
.pd-status2 .status-select { font-size: 14px; }

.pd-next { margin-top: 26px; display: flex; align-items: center; gap: 14px; background: var(--brief-bg); border-radius: 14px; padding: 16px 22px; flex-wrap: wrap; }
.pd-next-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--brand-orange); }
.pd-next-lbl { font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); color: var(--brand-orange); }
.pd-next-text { flex: 1; min-width: 200px; font-size: 15px; color: var(--ink); }
.pd-next-actions { display: flex; gap: 10px; }
.pd-obtn2 { appearance: none; height: 36px; padding: 0 16px; border: 1px solid var(--hair); background: var(--surface); color: var(--ink); border-radius: 999px; font: inherit; font-size: 13.5px; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.pd-obtn2:hover { border-color: var(--link); color: var(--link); }

.pd-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.pd-abtn { appearance: none; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 1px solid var(--hair); background: var(--surface); color: var(--ink); border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; transition: all var(--dur-fast) var(--ease-out); }
.pd-abtn:hover { border-color: var(--link); color: var(--link); }
.pd-abtn-primary { background: var(--brand-blue); border-color: var(--link); color: var(--brand-white); }
.pd-abtn-primary:hover { background: var(--brand-dark-blue); border-color: var(--anchor); color: var(--brand-white); }

.pd-kpis { margin-top: 30px; display: grid; grid-template-columns: repeat(6, 1fr); padding-bottom: 22px; border-bottom: 1px solid var(--hair); padding-right: 40px; }
.pd-kpi { padding-left: 26px; border-left: 1px solid var(--hair); }
.pd-kpi:first-child { padding-left: 0; border-left: 0; }
.pd-kpi-lbl { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pd-kpi-fig { margin-top: 8px; font-size: var(--figure-sm); font-weight: var(--weight-medium); letter-spacing: -0.03em; color: var(--anchor); line-height: 1; }
.pd-kpi-fig.empty { color: var(--ink-3); }
.pd-kpi-btn { font-size: inherit; font-weight: inherit; letter-spacing: inherit; padding: 0; color: var(--anchor); }
.pd-kpi-sub { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); min-height: 15px; }
.pd-kpi-act { color: var(--link); cursor: pointer; }
.pd-kpi-act:hover { color: var(--anchor); }

.pd-tabs { margin-top: 24px; display: flex; gap: 26px; border-bottom: 1px solid var(--hair); padding-right: 40px; }
.pd-tab { appearance: none; border: 0; background: none; padding: 0 0 14px; margin-bottom: -1px; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; }
.pd-tab:hover { color: var(--ink); }
.pd-tab.active { color: var(--ink); border-bottom-color: var(--link); }
.pd-tab-n { font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
.pd-panel { margin-top: 28px; padding-right: 40px; }
.pd-panel[hidden] { display: none; }
.pd-ov { display: grid; grid-template-columns: 1.6fr 1fr; gap: 52px; align-items: start; }
.pd-ov-l > * + *, .pd-ov-r > * + * { margin-top: 28px; }
.pd-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.pd-fin { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }

.dc-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--hair); border-radius: 12px; padding: 14px 18px; cursor: pointer; }
.dc-row:hover { border-color: var(--link); }
.dc-row-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--status-ok); }
.dc-row-dot.warn { background: var(--brand-orange); } .dc-row-dot.error { background: var(--status-error); }
.dc-row-lbl { font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.dc-row-verdict { color: var(--ink); font-size: 14px; }
.dc-row-counts { margin-left: auto; font-family: var(--font-technical); font-size: 13px; color: var(--ink-3); }
.dc-row-chev { color: var(--ink-3); }
.dc-detail { margin-top: 12px; background: var(--brief-bg); border-radius: 12px; padding: 16px 18px; }
.pd-details { }
.pd-det-row { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); font-size: 14px; }
.pd-det-row span:first-child { color: var(--ink-3); }
.pd-det-row .linky { color: var(--link); cursor: pointer; }
.eyebrow.orange { color: var(--brand-orange); }
.pd-email-snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1100px) {
  .pd-head2, .pd-kpis, .pd-tabs, .pd-panel { padding-right: 0; }
  .pd-ov, .pd-fin { grid-template-columns: 1fr; gap: 28px; }
  .pd-docs { grid-template-columns: 1fr; }
  .pd-kpis { grid-template-columns: repeat(3, 1fr); gap: 20px 0; }
  .pd-kpi:nth-child(4) { padding-left: 0; border-left: 0; }
}

/* ── Project detail v2 (design handoff, Karan 04/08) — status card, header, golden thread ── */
.pd-head3 { display: flex; align-items: flex-end; gap: 20px; margin-top: 12px; padding-right: 40px; }
.pd-head3-l { display: flex; align-items: flex-end; gap: 18px; min-width: 0; flex: 1; }
.pd-h3-no { margin: 0; font-size: var(--anchor-lg); font-weight: var(--weight-medium); letter-spacing: -0.05em; line-height: 0.76; color: var(--anchor); }
.pd-h3-idblock { min-width: 0; padding-bottom: 2px; }
.pd-h3-client { font-size: var(--figure); font-weight: var(--weight-medium); letter-spacing: -0.03em; line-height: 0.92; color: var(--ink); }
.pd-h3-meta { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; line-height: 1; color: var(--ink-2); }
.pd-h3-meta .pd-dot { color: var(--ink-3); }
.pd-h3-r { flex: none; padding-bottom: 4px; display: flex; align-items: center; gap: 12px; }
.pd-h3-lead { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.pd-h3-status .status-select { font-size: 13.5px; }
.pd-golden-btn { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--link); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.pd-golden-btn:hover { background: var(--nav-hover); }

.ps-card { margin-top: 26px; border-radius: 18px; background: var(--brief-bg); padding: 28px clamp(20px, 2.4vw, 32px) 26px; margin-right: 40px; }
.ps-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.ps-head-note { font-size: 13.5px; color: var(--ink-2); }
.ps-thread { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); row-gap: 22px; }
.ps-node { min-width: 0; padding-right: 12px; }
.ps-node-top { display: flex; align-items: center; height: 14px; }
.ps-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--hair-strong); }
.ps-conn { flex: 1; height: 2px; margin-left: 6px; }
.ps-line-solid { background: var(--brand-dark-blue); }
.ps-line-dash { background-image: repeating-linear-gradient(90deg, var(--hair-strong) 0 5px, transparent 5px 11px); }
.ps-line-none { background: transparent; }
.ps-node-lbl { margin-top: 15px; font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); }
.ps-node-val { margin-top: 7px; font-size: 13.5px; }
.ps-node-rec { margin-top: 5px; font-size: 11.5px; }
.ps-figs { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); row-gap: 24px; }
.ps-fig { min-width: 0; padding-left: 24px; border-left: 1px solid var(--hair); }
.ps-fig:first-child { padding-left: 0; border-left: 0; }
.ps-fig-lbl { font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.ps-fig-val { margin-top: 10px; font-size: var(--figure); font-weight: var(--weight-medium); letter-spacing: -0.035em; line-height: 1; color: var(--anchor); }
.ps-fig-val.empty { color: var(--ink-3); }
.ps-fig-btn { font-size: inherit; font-weight: inherit; letter-spacing: inherit; padding: 0; color: var(--anchor); }
.ps-fig-sub { margin-top: 9px; font-size: 12.5px; color: var(--ink-3); }
.ps-narr { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair); display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.ps-narr-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--brand-orange); }
.ps-narr-text { font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.ps-narr-btn { height: 36px; flex: none; }
.pd-fin-hidden { font-size: var(--text-caps); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); align-self: center; }

@media (max-width: 1100px) { .pd-head3, .ps-card { padding-right: 0; margin-right: 0; } }

/* ─────────────────────────────────────────────────────────────────────────
   Benchmark — mobile & states (§1.9). Rail already becomes a sheet behind the
   ☰ (earlier breakpoints). Here: the anchor drops to 52px, the opening row and
   figures stack, the brief clamps to three lines, and the chain + tables keep
   the thread while scrolling rather than breaking it.
   ───────────────────────────────────────────────────────────────────────── */
.bm-card-chain { overflow-x: auto; }

@media (max-width: 760px) {
  .bm-anchor, .bm-anchor.md, .pd-h3-no { font-size: var(--anchor-sm); }   /* 52px */
  .bm-open-row { flex-direction: column; gap: 20px; margin-top: 18px; }
  .bm-open-row > :first-child, .bm-open-row > :last-child { min-width: 0; width: 100%; }
  .bm-open .bm-anchor-line { max-width: 100%; width: 100%; }
  .bm-card { padding: 20px 18px; }
  .bm-card-figures { grid-template-columns: repeat(2, 1fr); gap: 18px 16px; }
  .bm-figure { font-size: var(--figure-sm); }
  .bm-brief { padding: 18px; }
  .bm-editorial { font-size: 15.5px; }
  /* The brief clamps to three lines on mobile (§1.9). */
  .bm-brief .bm-editorial { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* Keep the thread intact: the chain scrolls rather than wrapping/breaking. */
  .bm-chain { min-width: 520px; }
  .bm-chain.detailed { min-width: 620px; }
  /* Tables keep their columns and scroll (the wrapper is overflow-x:auto). */
  .bm-table { min-width: 560px; }
  .ts-weekanchor { text-align: left; }
}

/* Right anchors go left-aligned on very narrow screens so the figure never
   collides with the period control above it. */
@media (max-width: 520px) {
  .bm-open.right { text-align: left; }
}

/* ── Sign-in — 30/70 split with the datum rule (artboards 1e/1f/1g, handoff 2) ──
   Navy column 432px + full-bleed B&W photograph. A 2px orange rule at y=44
   crosses the seam. No card, no scrim, no gradient. Only the block under the
   wordmark swaps per state (signin.js); the split, photo, rule and foot hold. */
.si2 { position: fixed; inset: 0; z-index: 300; display: flex; overflow: hidden; background: var(--brand-navy); color: var(--brand-white); font-family: var(--font-sans); }
.si2-col { position: relative; z-index: 1; width: 432px; flex: none; background: var(--brand-navy); padding: 62px 48px 56px; display: flex; flex-direction: column; }
.si2-eyebrow { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps-wide); line-height: 1.6; text-transform: uppercase; color: var(--brand-orange); }
.si2-bottom { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 92px; min-height: 0; }
.si2-wordmark { font-size: 80px; font-weight: var(--weight-wordmark); letter-spacing: -0.055em; line-height: 0.98; color: var(--brand-white); animation: si-rise var(--dur-slow) var(--ease-out) var(--dur-fast) both; }
.si2-wordmark span { color: var(--track-rose, #F5385D); }
#login-block { display: flex; flex-direction: column; }
.si2-photo { flex: 1; min-width: 0; background: var(--brand-navy) url('/assets/photo-site-bw.jpg') 80% 80% / 155% no-repeat; }
.si2-rule { position: absolute; z-index: 2; top: 44px; left: 48px; width: 572px; height: 2px; background: var(--brand-orange); transform-origin: left center; animation: si2-draw var(--dur-slow) var(--ease-out) var(--dur-fast) both; }
@keyframes si2-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.si2-foot { display: flex; flex-direction: column; gap: 14px; }
.si2-foot-rule { height: 1px; background: rgba(255,255,255,0.14); }
.si2-foot-row { display: flex; align-items: baseline; gap: 18px; }
.si2-ver { font-family: var(--font-technical); font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.38); }
.si2-help { margin-left: auto; font-size: 13px; color: rgba(255,255,255,0.55); text-decoration: none; white-space: nowrap; cursor: pointer; background: none; border: 0; font-family: var(--font-sans); padding: 0; }
.si2-help:hover { color: var(--brand-white); text-decoration: underline; }
.si2-note { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.5); max-width: 40ch; }
.si2-tagline { font-size: 19px; line-height: 1.45; color: rgba(255,255,255,0.72); margin-top: 18px; max-width: 22ch; text-wrap: pretty; }
.si2-btn { appearance: none; border: 0; background: var(--brand-white); border-radius: 8px; padding: 13px 20px; display: inline-flex; align-items: center; gap: 12px; width: fit-content; cursor: pointer; margin-top: 40px; font-family: var(--font-sans); }
.si2-btn svg { flex: none; }
.si2-btn span { font-size: 15px; font-weight: 500; color: var(--brand-navy); }
.si2-btn.state-btn { border-radius: 10px; padding: 14px 22px; margin-top: 6px; }
.si2-label { font-size: 12px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps-wide); text-transform: uppercase; color: rgba(255,255,255,0.4); }
.si2-label.attn { color: var(--brand-orange); }
.si2-heading { font-size: 30px; font-weight: 500; letter-spacing: -0.025em; color: var(--brand-white); margin-top: 18px; }
.si2-text { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.55); max-width: 46ch; margin-top: 18px; }
.si2-text .si2-mono { font-family: var(--font-technical); color: var(--brand-white); }
.si2-progress { width: 200px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.2); overflow: hidden; margin-top: 24px; }
.si2-progress i { display: block; height: 4px; width: 46%; background: var(--brand-white); border-radius: 999px; animation: si-load 1.2s linear infinite; }
.si2-rise { animation: si-rise var(--dur-slow) var(--ease-out) both; }
@keyframes si-load { 0% { margin-left: -46%; } 100% { margin-left: 100%; } }
@keyframes si-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Mobile (1g): photo band on top, navy beneath, button full width, lower third. */
@media (max-width: 560px) {
  .si2 { flex-direction: column; }
  .si2-photo { flex: none; order: -1; height: 292px; background-position: 62% 70%; background-size: cover; }
  .si2-col { width: 100%; flex: 1; padding: 34px 28px 30px; }
  .si2-eyebrow br { display: none; }
  .si2-bottom { justify-content: center; padding-bottom: 0; }
  .si2-wordmark { font-size: 62px; }
  .si2-rule { display: none; }
  .si2-tagline { max-width: 24ch; font-size: 17px; }
  .si2-btn { width: 100%; justify-content: center; padding: 17px 0; }
  .si2-foot-rule { display: none; }
  .si2-foot-row { flex-direction: column; align-items: center; gap: 8px; }
  .si2-help { margin-left: 0; }
  .si2-ver { text-align: center; order: 2; }
  .si2-note { text-align: center; }
}

/* Timesheet mobile inversion (§1.9): a day picker, then that day's rows. Only
   rendered by timesheet.js on the phone breakpoint. */
.ts-mday-picker { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.ts-mday { appearance: none; border: 1px solid var(--hair); background: var(--surface); border-radius: 12px; padding: 10px 4px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; font-family: var(--font-sans); min-height: 44px; }
.ts-mday-dow { font-size: var(--text-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.ts-mday-date { font-family: var(--font-technical); font-size: 17px; font-weight: 500; color: var(--ink); }
.ts-mday-tot { font-family: var(--font-technical); font-size: 11.5px; color: var(--ink-3); }
.ts-mday-tot.has { color: var(--link); }
.ts-mday.today { border-color: var(--hair-strong); }
.ts-mday.active { background: var(--brand-blue); border-color: var(--link); }
.ts-mday.active .ts-mday-dow, .ts-mday.active .ts-mday-date, .ts-mday.active .ts-mday-tot { color: var(--brand-light-grey); }
.ts-mday-off { margin-top: 12px; padding: 9px 13px; border-radius: 8px; background: var(--brief-bg); font-size: 12.5px; color: var(--ink-2); }
.ts-mrows { margin-top: 12px; display: flex; flex-direction: column; }
.ts-mrow { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--hair); cursor: pointer; min-height: 56px; }
.ts-mrow .dot { width: 8px; height: 8px; flex: none; }
.ts-mrow-main { flex: 1; min-width: 0; }
.ts-mrow-name { font-size: 14.5px; font-weight: var(--weight-medium); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-mrow-task { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ts-mrow-val { font-family: var(--font-technical); font-size: var(--text-h3); font-weight: var(--weight-medium); color: var(--ink-3); min-width: 44px; text-align: right; }
.ts-mrow.filled .ts-mrow-val { color: var(--anchor); }

/* ── System-wide sensitive-figures shield (figures.js, Karan 07/08) ──────────
   Break-even cost, margin, salary, charge-out and bank balances are wrapped in
   a .secret span carrying the real value AND a •••• stand-in. While the body is
   .figures-hidden the real value is swapped out for the dots — a pure class flip,
   no re-render. Role-gated figures the viewer may NOT see are emitted by the view
   as a bare .secret-dots (never the real value), so revealing can never leak. */
.secret-dots { color: var(--ink-3); font-family: var(--font-technical); letter-spacing: 0.06em; }
.secret > .secret-dots { display: none; }
body.figures-hidden .secret > .secret-real { display: none; }
body.figures-hidden .secret > .secret-dots { display: inline; }

/* The top-bar Figures toggle. */
.fig-toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hair);
  border-radius: 8px; padding: 7px 12px; font-size: 12px; color: var(--ink-2); cursor: pointer;
  background: var(--surface); font-family: var(--font-sans); white-space: nowrap; }
.fig-toggle:hover { border-color: var(--hair-strong); }
.fig-toggle .fig-eye { font-size: 13px; line-height: 1; }
.fig-toggle .fig-state { font-weight: 500; }
body:not(.figures-hidden) .fig-toggle { border-color: var(--link); color: var(--anchor); }

/* ── Horizontal-scroll affordance (design audit 08/08, §C1 + screen review B19).
   One convention everywhere something scrolls sideways: a 24px right-edge
   shade that only shows while more content is hidden (background-attachment
   local/scroll trick — no JS, no extra elements). .hscroll is the wrapper the
   over-wide registers sit in (screen review item 18). ── */
.hscroll { overflow-x: auto; }
.hscroll, .card-table, .ts-grid, .tbk-scroll, .table-wrap,
.bm-table-wrap, .bm-card-chain, #cal-body, .tm-table {
  /* The two covers hide the shade until there is more to scroll, so they must
     be the colour BEHIND the table: the page ground, or --surface inside a
     dialog or panel. They were --surface everywhere, which is the same white as
     the ground in light mode but a lighter grey in dark, so every register
     showed a pale 40px band at each edge (Karan 18/10, Suppliers). The shade
     is ink in light and white in dark. */
  background: linear-gradient(90deg, var(--hscroll-bg, var(--ground)) 30%, transparent) left/40px 100% no-repeat local,
    linear-gradient(270deg, var(--hscroll-bg, var(--ground)) 30%, transparent) right/40px 100% no-repeat local,
    linear-gradient(90deg, var(--hscroll-shade), transparent) left/24px 100% no-repeat scroll,
    linear-gradient(270deg, var(--hscroll-shade), transparent) right/24px 100% no-repeat scroll;
}
:root { --hscroll-shade: rgba(12, 17, 57, 0.10); }
[data-theme="dark"] { --hscroll-shade: rgba(255, 255, 255, 0.10); }
.tf-card, .tf-panel, .overlay-panel, .card { --hscroll-bg: var(--surface); }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — the design canvas, turns 1a + 2a.
   ══════════════════════════════════════════════════════════════════════════
   One 358px column at 390px, 16px gutters, nothing wider than the viewport.
   The rail becomes a four-word tab bar plus a More sheet; the Ask Track disc,
   which used to sit over the last row of every table, takes the middle of the
   bar. These rules are LAST in the file on purpose — they close out the older
   860/1000/1100px patches with one predictable phone shell.

   Everything above the media query is the DESKTOP reading of hooks that used to
   be written inline in views/home.js. They live here so the breakpoint can act
   on them at all (the same reason .hm-figs moved out in v2.21.15).
   ══════════════════════════════════════════════════════════════════════════ */

/* Home — anchor, brief */
.hm-anchor-row { display: flex; align-items: flex-end; gap: 24px; }
.hm-anchor { font-size: var(--anchor-lg); font-weight: var(--weight-medium); line-height: 0.86; letter-spacing: -0.045em; color: var(--anchor); }
.hm-anchor-line { display: flex; flex-direction: column; gap: 5px; padding-bottom: 6px; min-width: 0; }
.hm-anchor-eyebrow { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-orange); }
.hm-anchor-text { font-size: 15px; color: var(--ink-2); }
.hm-brief { background: var(--brief-bg); border-radius: 16px; padding: 24px 26px; }
.hm-brief-eyebrow { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-orange); margin-bottom: 12px; }
.hm-brief-text { font-size: 17px; line-height: 1.55; max-width: 90ch; text-wrap: pretty; }
.hm-brief-more { display: none; }

/* Home — figures card. The label sits in a fixed slot so a two-word label can
   no longer shove its number off the shared baseline (fault 08). */
.hm-card { border: 1px solid var(--hair); border-radius: 16px; padding: 24px 26px 26px; }
.hm-card-rule { height: 1px; background: var(--hair); margin: 24px 0 22px; }
.hm-fig { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hm-fig-label { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.hm-fig-val { font-size: var(--figure); font-weight: var(--weight-medium); line-height: 1; letter-spacing: -0.03em; }
.hm-fig-sub { font-size: 11.5px; color: var(--ink-3); }
.hm-fig.attn .hm-fig-label, .hm-fig.attn .hm-fig-val, .hm-fig.attn .hm-fig-sub { color: var(--brand-orange); }

/* Home — the chain */
.hm-pipe-dot { width: 11px; height: 11px; border-radius: 50%; }
.hm-pipe-num { font-size: 14px; font-weight: var(--weight-medium); }
.hm-pipe-lab { font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; }

/* Home — the ledger. Six columns on a desktop; the sixth carries the chevron
   the phone needs and is display:none here, so the grid is unchanged. */
.hm-mcols { display: grid; grid-template-columns: 66px 1fr 250px 122px 46px 62px; gap: 16px; }
.hm-mtable { min-width: 777px; }   /* 766 + the 11px gutter */
/* The 11px left gutter is the attention bar's lane. Head and rows carry the
   same one so the six columns stay in line. */
.hm-mhead { align-items: end; padding: 0 0 9px 11px; border-bottom: 1px solid var(--ink);
  font-size: 9.5px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.hm-mhead > span:nth-child(5) { text-align: right; }
.hm-mrow[data-pid] { cursor: pointer; }
.hm-mrow-main { align-items: center; padding: 12px 0 12px 11px; border-bottom: 1px solid var(--hair); }
/* INSET, so it paints INSIDE the row — and the row had no left padding, so the
   bar sat on top of the first 3px of the reference. 8554 read as 3554 and 8562
   as 3562, on exactly the rows that matter most, which are the only ones that
   get a bar (Karan 21/09). The gutter above gives it somewhere to be. */
.hm-mrow[data-attn="1"] .hm-mrow-main { box-shadow: inset 3px 0 0 var(--brand-orange); }
.hm-c-ref { min-width: 0; font-family: var(--font-technical); font-size: 14px; font-weight: var(--weight-medium); }
.hm-c-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-c-client { font-size: 13.5px; }
.hm-c-scope { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-c-stage { display: flex; align-items: center; gap: 7px; font-size: 12px; min-width: 0; }
.hm-c-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
.hm-c-lead { display: flex; min-width: 0; }
.hm-c-nolead { color: var(--ink-3); font-size: 12px; }
.hm-c-due { min-width: 0; font-family: var(--font-technical); font-size: 12px; text-align: right; }
.hm-c-chev, .hm-n, .hm-seg { display: none; }
.hm-mrow-open { display: none; }
.hm-mrow[data-attn="1"] .hm-c-ref, .hm-mrow[data-attn="1"] .hm-c-stage, .hm-mrow[data-attn="1"] .hm-c-due { color: var(--brand-orange); }
.hm-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ── The phone shell ─────────────────────────────────────────────────────── */
.tabbar, .more-sheet { display: none; }

@media (max-width: 760px) {
  /* Paper, not white: the cards need something to sit on. */
  .shell, .main { background: var(--brief-bg); }
  .shell { padding-top: calc(48px + env(safe-area-inset-top)); }

  /* App bar — mark, wordmark, Find. The hamburger is gone (fault 07): the bar
     swaps the wordmark for the screen's own name once you scroll past the
     anchor, so it always says where you are. */
  .mobile-header { height: auto; min-height: calc(48px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0; display: flex; align-items: center; gap: 10px;
    background: var(--surface); border-bottom: 1px solid var(--hair);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mh-mark { width: 22px; height: 22px; display: block; flex: 0 0 22px; }
  .mh-title { display: none; font-size: 15px; font-weight: var(--weight-medium); color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bar-scrolled .mh-wordmark { display: none; }
  .bar-scrolled .mh-title { display: block; }
  .mh-spacer { flex: 1; }
  /* FIND IS GONE FROM THE HEADER (§13). It lives in Ask Track, where the same
     field also asks and notes — two entry points to one box is one too many,
     and the header is 48px of the most contested space on the phone. */
  .mh-find { display: none; }
  /* The need-you pill rides here instead, at 34px. */
  .mobile-header .ntf-pill { height: 34px; padding: 0 12px 0 10px; margin-left: auto; }
  .mobile-header .ntf-pill-text { display: none; }

  /* The rail does not come to a phone — the More sheet is the rail. */
  .rail, .mobile-nav-backdrop { display: none; }
  /* 150px of bottom padding (§13): the bar floats, so content must end above
     it rather than behind it. */
  .main { padding: 8px 16px calc(150px + env(safe-area-inset-bottom)); max-width: none; margin: 0;
    min-height: calc(100dvh - 48px - env(safe-area-inset-top)); }
  /* …and a fade under the bar, so a row scrolling past it dissolves rather
     than being sliced off by the glass. */
  .shell::after { content: ''; position: fixed; left: 0; right: 0; z-index: 59; pointer-events: none;
    bottom: 0; height: calc(120px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--brief-bg) 34%, transparent); }

  /* Fault 04 — the floating disc used to cover the last table row on every
     screen. It has a home in the tab bar now; the panel it opens is unchanged. */
  .askbar-disc { display: none !important; }
  .askbar-root { bottom: calc(118px + env(safe-area-inset-bottom)) !important; }

  /* ── Tab bar ───────────────────────────────────────────────────────────── */
  /* THE BAR FLOATS (§13): 14px in, 30px up, 66px tall, radius 33, on glass.
     The blur is a deliberate, user-approved exception to the brand's no-blur
     rule and it applies to THIS BAR ONLY. The fallback is an opaque surface,
     which is what a browser without backdrop-filter will show. */
  .tabbar { position: fixed; left: 14px; right: 14px; z-index: 60;
    bottom: calc(30px + env(safe-area-inset-bottom));
    height: 66px; border-radius: 33px; display: grid; grid-template-columns: 1fr 1fr 84px 1fr 1fr;
    align-items: center; padding: 0;
    background: var(--surface); border: 1px solid var(--hair);
    box-shadow: 0 12px 34px rgba(12, 17, 57, 0.20); }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .tabbar { background: rgba(255, 255, 255, 0.78);
      -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); }
    [data-theme="dark"] .tabbar { background: rgba(30, 35, 80, 0.72); }
  }
  .tab { position: relative; height: 66px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; appearance: none; border: 0; background: none; padding: 0;
    cursor: pointer; font-family: var(--font-sans); color: var(--ink-2);
    transition: transform 160ms var(--ease-spring), color var(--dur-fast) var(--ease-out); }
  .tab:active { transform: scale(0.86); }
  /* The active tab sits on a 52x48 tinted pill that scales in — the only thing
     on the bar that moves, so it is the only thing that has to be found. */
  .tab-pill { position: absolute; width: 52px; height: 48px; border-radius: 14px;
    background: var(--avatar-bg); transform: scale(0.6); opacity: 0;
    transition: transform 160ms var(--ease-spring), opacity 160ms var(--ease-out); }
  .tab.active .tab-pill { transform: scale(1); opacity: 1; }
  .tab-icon { position: relative; }
  .tab.active { color: var(--link); }
  .tab-label { position: relative; font-size: 10px; font-weight: var(--weight-medium);
    letter-spacing: 0.06em; color: inherit; }
  .tab-badge { position: absolute; top: 9px; right: 50%; margin-right: -22px;
    min-width: 16px; height: 16px; border-radius: 999px; background: var(--brand-orange);
    color: var(--brand-white); font-family: var(--font-technical); font-size: 10px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px; }
  /* The Ask Track mark: 64px, raised 18px, ringed in the page colour so it
     reads as ON the bar rather than in it. */
  .tab-mark { overflow: visible; }
  .tab-disc { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-navy);
    display: flex; align-items: center; justify-content: center; margin-top: -18px;
    box-shadow: 0 0 0 5px var(--brief-bg), 0 10px 26px rgba(12, 17, 57, 0.30);
    transition: transform 160ms var(--ease-spring); }
  .tab-mark:active .tab-disc { transform: scale(0.9); }
  .tab-disc-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--brand-orange); }
  .tab-mark-label { position: absolute; bottom: 7px; font-size: 8.5px; font-weight: var(--weight-medium);
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
    max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
  /* Twice, once ever — a hint, not a nag. */
  .tab-disc.ping { animation: tab-ping 1300ms var(--ease-out) 2; }
  @keyframes tab-ping {
    0%, 100% { box-shadow: 0 0 0 5px var(--brief-bg), 0 10px 26px rgba(12, 17, 57, 0.30); }
    45% { box-shadow: 0 0 0 5px var(--brief-bg), 0 0 0 16px rgba(255, 80, 1, 0.22), 0 10px 26px rgba(12, 17, 57, 0.30); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tab, .tab-pill, .tab-disc { transition: none; }
    .tab-disc.ping { animation: none; }
  }

  /* ── PHONE LAYOUT (§13) ─────────────────────────────────────────────────
     The screens were drawn for a desk and lay out with inline flex rows; at
     390px the anchor, its sub-line and the screen's action all fight for the
     same row and the sub-line loses, wrapping to four words a line beside an
     88px figure. These three rules unpick that WITHOUT touching ten views:
     the anchor row wraps, the anchor itself comes down a size, and the thread
     scrolls rather than compressing its labels into each other.

     Matched on the inline pattern every artboard row shares. That is a
     stylesheet reaching into markup it does not own, which is a cost — but the
     alternative is a class threaded through ten views for a rule that exists
     only below 760px, and this is honest about being a phone adaptation. */
  .view [style*="align-items:flex-end"][style*="justify-content:space-between"] {
    flex-wrap: wrap; gap: 16px; }
  .bm-anchor, .hm-anchor, .hp-anchor, .gd-anchor, .rl-anchor { font-size: var(--anchor-md); }
  /* The inline anchors are matched on their tracking, not their size: the size
     is the thing being changed, and naming it here would read to design-lint as
     a display size set outside the scale. */
  .view [style*="letter-spacing:-0.045em"] { font-size: var(--anchor-md) !important; }
  /* THE CHAIN RUNS VERTICALLY (§13). Seven stages across 358px put "READY TO
     ISSUE" on top of "PART ISSUED"; a swipe was better than that but it was not
     what the design draws, and a thread you have to scroll sideways to read is
     a thread you do not read. Down the page it is seven rows, each a node, its
     count and its label, with the rule running between them.

     The connectors are absolutely positioned for the horizontal layout, so they
     are re-pointed rather than re-written: a 2px column down the left instead
     of a 2px rule across the middle. */
  .bm-scroll-x { overflow-x: visible; flex-direction: column; align-items: stretch !important; gap: 0; }
  /* The horizontal connectors go: a vertical run between the nodes replaces
     them, drawn behind each stage so it cannot fall out of step with the row
     heights the way a fixed-length rule would. */
  .pj-conn { display: none; }
  .pj-stage { width: 100% !important; flex-direction: row !important;
    align-items: center !important; gap: 14px !important; padding: 9px 0; position: relative; }
  .pj-stage > :first-child { flex: 0 0 11px; margin-left: 5px; }
  .pj-stage > :nth-child(2) { flex: 0 0 34px; text-align: left; }
  .pj-stage > :nth-child(3) { flex: 1; text-align: left; }
  .pj-stage:not(:last-child)::before {
    content: ''; position: absolute; left: 10px; top: calc(50% + 8px); bottom: -9px; width: 2px;
    background: var(--hair-strong); }

  /* Home's pipe is already vertical on a phone and is left alone. */

  /* Context actions (§13): up to three 44px glass pills above the bar, on the
     same glass as the bar itself so they read as part of it. */
  .tab-actions { position: fixed; left: 14px; right: 14px; z-index: 61;
    bottom: calc(104px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    animation: bm-rise var(--dur-base) var(--ease-out) both; }
  .tab-action { min-height: 44px; padding: 0 20px; border-radius: 22px; cursor: pointer;
    appearance: none; font-family: var(--font-sans); font-size: 13.5px; font-weight: var(--weight-medium);
    color: var(--ink); background: var(--surface); border: 1px solid var(--hair);
    box-shadow: 0 8px 22px rgba(12, 17, 57, 0.16);
    transition: transform 160ms var(--ease-spring); }
  .tab-action:active { transform: scale(0.94); }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .tab-action { background: rgba(255, 255, 255, 0.82);
      -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); }
    [data-theme="dark"] .tab-action { background: rgba(30, 35, 80, 0.78); }
  }
  @media (prefers-reduced-motion: reduce) { .tab-actions { animation: none; } .tab-action { transition: none; } }

  /* ── REGISTERS BECOME ROWS (§13) ──────────────────────────────────────────
     Every register in Track is a CSS grid with a fixed column list, written for
     1440px. On a 390px screen those columns do not shrink — they run off the
     right edge inside a container that clips, so on the audit the Projects
     register's STATUS and LEAD columns sat at x=374..674 with no way to reach
     them. The data was not squeezed; it was GONE.
     
     So on a phone each row is re-laid as the design draws it: a ref and a name
     on the first line, the detail on the second, the state on the right, at
     least 60px tall. The header row goes — there are no columns left to label.
     
     THIS IS COUPLED TO MARKUP ORDER. Each block below names a register and
     positions its children by index, so adding or reordering a column in a view
     silently scrambles its phone layout. test/register-columns.test.mjs holds
     each register to the column count these rules assume, which is the failure
     this coupling actually has. The alternative — a phone template written into
     every row builder — is the same coupling with more code and no test. */
  .reg-head { display: none !important; }
  /* A re-laid row still stretches to its container, so a container pinned to a
     desktop width puts the sideways scroll straight back. .reg-wrap marks the
     wrappers whose rows HAVE been re-laid; the tables that are still tables —
     Files, Mail, the timesheet grid — keep their pin and their swipe, because
     a grid of days does not become two lines. */
  .reg-wrap { min-width: 0 !important; }
  .hscroll:has(> .reg-wrap) { overflow-x: visible; }
  .reg-row {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 2px 10px !important;
    align-items: baseline !important;
    min-height: 60px;
    padding: 11px 0 !important;
    min-width: 0 !important;
  }
  /* Everything is hidden unless a rule below puts it somewhere. A column with
     no home on a phone is a column the design left out, not one to squeeze in. */
  .reg-row > * { display: none; }
  /* The three places a cell can go, for registers that name their cells rather
     than relying on column order. */
  .reg-row > .ph-ref { display: block; grid-area: 1 / 1; white-space: nowrap; }
  .reg-row > .ph-name { display: block; grid-area: 1 / 2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row > .ph-sub { display: block; grid-area: 2 / 1 / 3 / 3; font-size: 11.5px; color: var(--ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row > .ph-state { display: block; grid-area: 1 / 3 / 3 / 4; justify-self: end; align-self: center;
    text-align: right; white-space: nowrap; }

  /* projects: ref · client / description · status. Child 2 is the site-check
     marker column (15/10) — it has no place on a phone and stays hidden. */
  .reg-row[data-reg="projects"] > :nth-child(1) { display: block; grid-area: 1 / 1; white-space: nowrap; }
  .reg-row[data-reg="projects"] > :nth-child(3) { display: block; grid-area: 1 / 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="projects"] > :nth-child(4) { display: block; grid-area: 2 / 1 / 3 / 3; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="projects"] > :nth-child(6) { display: flex; grid-area: 1 / 3 / 3 / 4; justify-self: end; align-self: center; }

  /* enquiries: ref · client / scope · stage. Its rows, its header and its group
     headers are all pinned to 940px so the desktop table scrolls as one — on a
     phone there is no table to keep aligned, so the pin comes off all three. */
  .reg-row[data-reg="enquiries"] { min-width: 0 !important; }
  #eq-table [style*="min-width:940px"] { min-width: 0 !important; }
  .enq-scroll-x { overflow-x: visible; }
  /* Child 2 is the site-check marker (15/10): hidden on a phone; the worst
     flag still reads in words at the end of the scope line (child 6). */
  .reg-row[data-reg="enquiries"] > :nth-child(1) { display: block; grid-area: 1 / 1; white-space: nowrap; }
  .reg-row[data-reg="enquiries"] > :nth-child(3) { display: block; grid-area: 1 / 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="enquiries"] > :nth-child(6) { display: block; grid-area: 2 / 1 / 3 / 3; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="enquiries"] > :nth-child(4) { display: block; grid-area: 1 / 3 / 3 / 4; justify-self: end; align-self: center; }

  /* clients: name / contact · live count. Named cells rather than indexes,
     because Clients has TWO column templates — Finance sees a Billed column and
     nobody else does — so the same nth-child is a different column per role.
     Wherever a register's shape depends on who is looking, .ph-name / .ph-sub /
     .ph-state are the way to do this. */
  .reg-row[data-reg="clients"] > .ph-name { display: flex; grid-area: 1 / 1 / 2 / 3; min-width: 0; }
  .reg-row[data-reg="clients"] > .ph-sub { display: block; grid-area: 2 / 1 / 3 / 3; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="clients"] > .ph-state { display: block; grid-area: 1 / 3 / 3 / 4; justify-self: end; align-self: center; }

  /* feedback: ref · client / what was said · status */
  .reg-row[data-reg="feedback"] > :nth-child(1) { display: block; grid-area: 1 / 1; white-space: nowrap; }
  .reg-row[data-reg="feedback"] > :nth-child(5) { display: block; grid-area: 1 / 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="feedback"] > :nth-child(4) { display: block; grid-area: 2 / 1 / 3 / 3; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="feedback"] > :nth-child(8) { display: block; grid-area: 1 / 3 / 3 / 4; justify-self: end; align-self: center; }

  /* invoices: three lines — money wants its date. ref · client / project ·
     status / date, with the amount on the right. */
  .reg-row[data-reg="invoices"] { grid-template-rows: auto auto auto !important; }
  .reg-row[data-reg="invoices"] > :nth-child(1) { display: block; grid-area: 1 / 1; white-space: nowrap; }
  .reg-row[data-reg="invoices"] > :nth-child(2) { display: block; grid-area: 1 / 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="invoices"] > :nth-child(3) { display: block; grid-area: 2 / 1; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
  .reg-row[data-reg="invoices"] > :nth-child(6) { display: block; grid-area: 2 / 2; font-size: 11.5px; white-space: nowrap; }
  .reg-row[data-reg="invoices"] > :nth-child(4) { display: block; grid-area: 3 / 1 / 4 / 3; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
  .reg-row[data-reg="invoices"] > :nth-child(5) { display: block; grid-area: 1 / 3 / 4 / 4; justify-self: end; align-self: center; white-space: nowrap; }

  /* purchase orders: ref · supplier / what for · gross, with the actions under */
  .reg-row[data-reg="po"] { grid-template-rows: auto auto auto !important; }
  .reg-row[data-reg="po"] > :nth-child(1) { display: block; grid-area: 1 / 1; white-space: nowrap; }
  .reg-row[data-reg="po"] > :nth-child(2) { display: block; grid-area: 1 / 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="po"] > :nth-child(3) { display: block; grid-area: 2 / 1 / 3 / 3; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="po"] > :nth-child(4) { display: block; grid-area: 1 / 3 / 3 / 4; justify-self: end; align-self: center; white-space: nowrap; }
  .reg-row[data-reg="po"] > :nth-child(7) { display: flex; grid-area: 3 / 1 / 4 / 4; justify-content: flex-end; gap: 8px; padding-top: 6px; }

  /* expenses: who / what for · gross, actions under */
  .reg-row[data-reg="expenses"] { grid-template-rows: auto auto auto !important; }
  .reg-row[data-reg="expenses"] > :nth-child(2) { display: block; grid-area: 1 / 1 / 2 / 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="expenses"] > :nth-child(4) { display: block; grid-area: 2 / 1 / 3 / 3; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="expenses"] > :nth-child(6) { display: block; grid-area: 1 / 3 / 3 / 4; justify-self: end; align-self: center; white-space: nowrap; }
  .reg-row[data-reg="expenses"] > :nth-child(1) { display: block; grid-area: 3 / 1; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
  .reg-row[data-reg="expenses"] > :nth-child(7) { display: flex; grid-area: 3 / 2 / 4 / 4; justify-content: flex-end; gap: 8px; }

  /* catalogue — items, services, suppliers, archive */
  .reg-row[data-reg="items"] > :nth-child(1),
  .reg-row[data-reg="services"] > :nth-child(1),
  .reg-row[data-reg="suppliers"] > :nth-child(1),
  .reg-row[data-reg="archive"] > :nth-child(1) { display: block; grid-area: 1 / 1 / 2 / 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="items"] > :nth-child(2),
  .reg-row[data-reg="services"] > :nth-child(2),
  .reg-row[data-reg="suppliers"] > :nth-child(2),
  .reg-row[data-reg="archive"] > :nth-child(2) { display: block; grid-area: 2 / 1 / 3 / 3; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reg-row[data-reg="items"] > :nth-child(4),
  .reg-row[data-reg="services"] > :nth-child(4),
  .reg-row[data-reg="suppliers"] > :nth-child(4),
  .reg-row[data-reg="archive"] > :nth-child(4) { display: block; grid-area: 1 / 3 / 3 / 4; justify-self: end; align-self: center; white-space: nowrap; }

  /* A real <table> cannot be re-laid this way — it scrolls instead, inside its
     own box, so the page never does. */
  .bm-table-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bm-table, table.data, table.fin { min-width: 520px; }

  /* ── 44px, EVERYWHERE (§13, and audit item 18) ────────────────────────────
     The phone audit found sub-44px targets on fifteen screens: tab strips at
     29px, chips at 32, the calendar's month arrows at 9x15, Decline at 38x12.
     Every one of them is a button somebody is expected to hit with a thumb.
     
     The fix is padding, not size: setting a height would stretch inline chips
     into blocks and break the rows they sit in. min-height plus centred content
     leaves the ink where it was and grows the box around it. */
  .view button, .view a[href], .view [role="button"], .view select, .view .chip, .view .tk-fchip, .view .enq-chip, .view .cat-chip, .view .po-chip, .view .fb-confirm, .view .fb-dismiss, .view .fb-adv, .view .xa, .tm-tabs button, .tabstrip button {
    min-height: 44px;
  }
  /* Team's tab strip sets min-height:38px inline, so the rule above loses to it.
     This is the only place in the phone block that needs !important for a size,
     and it needs it because the value is in a style attribute. */
  .tm-tabs button { min-height: 44px !important; }
  /* Inline controls that sit INSIDE a line of text are the exception: growing
     them to 44px would push the line apart. They get a tap area instead, drawn
     nowhere, by a pseudo-element that overflows the box. */
  .view .cl-menu, .view .pj-dots, .view .fm-inv-dots, .view .tm9-dot,
  .view .hp-topic-hint, .gd-con-link {
    min-height: 0; position: relative;
  }
  .view .cl-menu::after, .view .pj-dots::after, .view .fm-inv-dots::after,
  .view .tm9-dot::after, .gd-con-link::after {
    content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: max(100%, 44px); height: max(100%, 44px);
  }
  /* .linkbtn is deliberately NOT here. It is a link inside a sentence — "cancel",
     "update…" — and both fixes make it worse: 44px of height pushes the line
     apart, and a 44px tap halo on a 16px link reaches into the line above and
     steals its taps. A target inside a block of text is the one case WCAG 2.5.8
     exempts, and this is that case.

     …and where a control is genuinely tiny and alone, it just gets bigger. */
  .view button[id="prev"], .view button[id="next"],
  .view button[id="pd-prev"], .view button[id="pd-next"],
  .view button[id="wk-prev"], .view button[id="wk-next"] {
    min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .view .fb-dismiss, .view .fb-adv, .view .xa { display: inline-flex; align-items: center; padding: 0 12px; }

  /* Figure grids: four columns at 1440, two at 390. They are written inline as
     repeat(4, 1fr) in a dozen views, so they are matched on that rather than
     restated in each — "22 INDUSTRIAL" was sitting at x=340..447 on Clients,
     half of it off the screen. */
  .view [style*="repeat(4, 1fr)"], .view [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 16px !important; }
  .view [style*="repeat(3, 1fr)"], .view [style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* TWO-COLUMN SPLITS BECOME ONE. Matched on the shape rather than listed by
     name: every screen that splits does it as a two-track grid whose first
     track is fractional, and on 390px the second track is what falls off — on
     Catalogue the whole Services panel was hanging over the edge with its
     "+ Add service" button half visible. */
  .view [style*="grid-template-columns:1.55fr 1fr"],
  .view [style*="grid-template-columns:1.5fr 1fr"],
  .view [style*="grid-template-columns:1.4fr 1fr"],
  .view [style*="grid-template-columns:1fr 1fr"],
  .view [style*="grid-template-columns:2fr 1fr"],
  .view [style*="minmax(0,1fr) 300px"], .view [style*="minmax(0, 1fr) 300px"],
  .enq-two-col, .hp-cols, .gd-grid {
    grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }

  /* The guide card stacks: at 390px its line and its "Open the guide →" were
     fighting over the same 200px and both lost. */
  .hp-guide-card { flex-wrap: wrap; gap: 10px 14px; padding: 20px; }
  .hp-guide-text { flex: 1 0 100%; order: 2; }
  .hp-guide-dot { order: 1; }
  .hp-guide-go { order: 3; flex: 1 0 100%; }

  /* Clients' scheme strip is proportional bars — the bars fit, the LABELS under
     them do not, so "22 INDUSTRIAL" hung off the edge. The strip stacks: the
     proportions are the point and they survive as bar widths. */
  .cl-schemes { flex-direction: column; gap: 10px; }
  .cl-schemes > div { flex: none !important; width: 100% !important; }
  .cl-schemes > div > :first-child { max-width: 100%; }

  /* Fields. The audit found Help's search box rendering 255x20 — a 52px pill
     collapsed to twenty pixels because its height came from a desktop flex row.
     Every field on a phone gets a real one. */
  .view input, .view select, .view textarea, .hp-search, .rl-search {
    min-height: 44px; font-size: 16px; }
  .hp-searchrow { height: auto; padding: 4px 16px; }
  /* A search box that has wrapped onto its own line should take the line. They
     are written with a desktop min-width (240–260px) and then sit stranded to
     one side of a 358px row. */
  .view input[type="search"], .view input#search, .view input#sp-search,
  .view input#hp-search, .view input#rl-search {
    min-width: 0 !important; width: 100%; flex: 1 1 100%; }
  /* 16px is not a style choice: iOS Safari zooms the page when a field under
     16px takes focus, and then leaves it zoomed. */

  /* Filter and chip rows wrap instead of running off the edge. They are written
     as inline flex rows in a dozen views, so they are matched on the pattern. */
  .view [style*="display:flex"][style*="align-items:center"],
  .view [style*="display:flex"][style*="align-items:baseline"] { flex-wrap: wrap; }
  .chips { flex-wrap: wrap; }
  /* A row that wraps cannot keep a fixed height, or the second line is clipped
     by it — Tasks' toolbar is 42px tall and had four filter chips running off
     the edge inside it. */
  /* A wrapped chip row must not turn its chips into two-line blobs: a chip is a
     word, so it keeps its line and the ROW wraps instead. */
  .view .chip, .view .tk-fchip, .view .enq-chip, .view .cat-chip, .view .po-chip, .view [class*="chip"] { white-space: nowrap; }
  /* The flexible spacer that pushes an action to the right of a desktop row is
     dead weight once the row wraps — it becomes an empty line. */
  .view [style*="display:flex"] > [style="flex:1;"],
  .view [style*="display:flex"] > [style="flex:1"] { display: none; }
  /* …and anything still too wide scrolls rather than clipping. */
  .hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* The last thing on a screen must clear the floating bar. .main carries the
     padding, but a screen whose content is inside its own scroller does not
     inherit it — Help's issues list ended under the glass. */
  .view > *:last-child { padding-bottom: 8px; }
  .hp, .rl, .gd { padding-bottom: 20px; }

  /* ── THE ASK SHEET RISES FROM THE BOTTOM (§13) ────────────────────────────
     It was position:fixed;inset:0 — a full-screen navy panel with its input
     jammed under the iOS status bar (the app runs viewport-fit=cover in
     standalone, so inset:0 means UNDER the clock and the battery), and several
     hundred pixels of empty navy below it because the body stretched to fill.

     A sheet instead: it comes up from the bottom over the tab bar, takes only
     the height its content needs, and keeps clear of both safe areas. The
     design has said "sheets rise from the bottom over the bar" all along. */
  .askbar-root:has(.askbar-panel.is-sheet) { position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: 0;
    display: block; z-index: 80; }
  /* The scrim: tapping the page behind closes it, and the sheet stops looking
     like the screen itself. */
  .askbar-root:has(.askbar-panel.is-sheet)::before {
    content: ''; position: absolute; inset: 0; background: rgba(12, 17, 57, 0.38);
    animation: bm-fade var(--dur-fast) var(--ease-out) both; }
  .askbar-panel.is-sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: calc(100dvh - 72px - env(safe-area-inset-top));
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation: ask-sheet-in var(--dur-base) var(--ease-out) both; }
  @keyframes ask-sheet-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .askbar-panel.is-sheet { animation: none; }
    .askbar-root:has(.askbar-panel.is-sheet)::before { animation: none; }
  }

  /* ── THE CALENDAR AND THE LEAVE STRIP (§13) ───────────────────────────────
     A seven-column month at 390px gives each day fifty pixels, and every event
     in it renders as "RE:…" — a grid of ellipses. The month keeps its shape and
     SCROLLS: a week is a unit and splitting it would stop it being a calendar.
     Today's column is scrolled into view on open. */
  /* !important because the wrapper carries an inline `overflow:hidden` — it is
     there to clip the rounded corners, and as a shorthand it sets both axes, so
     without this the month CLIPS at 356px instead of scrolling. Measured: the
     grid is 620px inside a 356px box, which is the fault, not the fix. */
  .cal-month { overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch; }
  .cal-month-grid { min-width: 620px; }

  /* Leave: a three-column desktop row put "Rajan Dosanjh · annual leave, 0.5
     days" through a 140px column and got five lines of it, with the approve
     buttons stacked beside. Two lines and a row of actions underneath. */
  .lv-row { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important;
    padding: 14px 0 !important; }
  .lv-when { order: 1; font-size: 11.5px !important; color: var(--ink-3); }
  .lv-who { order: 2; align-items: flex-start !important; }
  .lv-act-wrap { order: 3; margin-top: 4px; }
  .lv-act-wrap > span { flex-wrap: wrap; gap: 8px !important; }
  .lv-row .lv-act { min-height: 44px; }

  /* Headings come down a step. "Timesheet" at 34px took a third of a 390px
     screen before a single hour was on it, and .h1 at 40px is a desktop
     display size. The scale is the same shape, one size smaller — nothing is
     redrawn, it just stops shouting. */
  .h1, .hp-anchor, .gd-anchor, .rl-anchor, .h1-inline { font-size: var(--text-h1-phone) !important; }

  /* ── More sheet — the rail's five groups, in the rail's order, 48px rows ── */
  body.sheet-open { overflow: hidden; }
  .more-sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 70; background: var(--ink-fill); }
  /* A navy sheet over a navy page is one surface (§13). In dark it lifts to
     --sheet-lift with a 16% white top edge, and the scrim goes properly black. */
  [data-theme="dark"] .more-sheet:not([hidden]) { background: rgba(0, 0, 0, 0.55); }
  [data-theme="dark"] .ms-panel { background: var(--sheet-lift); border-top: 1px solid rgba(255, 255, 255, 0.16); }
  [data-theme="dark"] .ntf-sheet { background: var(--sheet-lift); border-top: 1px solid rgba(255, 255, 255, 0.16); }
  [data-theme="dark"] .ntf-scrim { background: rgba(0, 0, 0, 0.55); }
  .ms-top { padding: calc(env(safe-area-inset-top) + 8px) 16px 0; height: 40px; display: flex; align-items: center;
    font-size: 15px; font-weight: var(--weight-medium); color: var(--brand-white); }
  .ms-panel { position: absolute; left: 0; right: 0; bottom: 0; top: calc(40px + env(safe-area-inset-top));
    background: var(--brief-bg); border-radius: 20px 20px 0 0; overflow: hidden; display: flex; flex-direction: column; }
  .ms-head { flex: 0 0 auto; min-height: 52px; padding: 0 16px; display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--hair); }
  .ms-title { flex: 1; font-size: 15px; font-weight: var(--weight-medium); }
  .ms-close { min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: flex-end;
    appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--font-sans);
    font-size: 12.5px; font-weight: var(--weight-medium); color: var(--link); }
  .ms-list { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .ms-group { padding: 16px 16px 6px; font-size: 9.5px; font-weight: var(--weight-medium);
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
  .ms-hairline { height: 1px; margin: 10px 16px 5px; background: var(--hair-strong); }
  .ms-row { width: 100%; min-height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 10px;
    border: 0; border-bottom: 1px solid var(--hair-soft); background: none; cursor: pointer;
    font-family: var(--font-sans); text-align: left; }
  .ms-row:active { background: var(--surface-sunk); }
  .ms-row-label { flex: 1; font-size: 14.5px; color: var(--ink); }
  .ms-count { font-family: var(--font-technical); font-size: 12px; color: var(--ink-2); }
  .ms-count.attn { color: var(--brand-orange); }
  .ms-chev { font-size: 15px; color: var(--ink-2); }
}

/* ── Home on a phone — direction 1a, "the ledger, made to fit" ──────────────
   Same order as the desktop screen, same reading: anchor, brief, figures with
   the chain, then the ledger. You scroll to the work, which is honest about
   what Home is — a report you read top to bottom. ── */
@media (max-width: 760px) {
  .hm-anchor-row { align-items: flex-start; gap: 14px; }
  .hm-anchor { font-size: var(--anchor-sm); line-height: 0.92; letter-spacing: -0.03em; }
  .hm-anchor-line { padding: 3px 0 0; gap: 4px; }
  .hm-anchor-eyebrow { font-size: 9.5px; }
  .hm-anchor-text { font-size: 13.5px; line-height: 1.45; color: var(--ink); }

  /* The brief clamps to three lines; "Read all" lets it out in place. */
  .hm-brief { background: var(--surface); padding: 16px 16px 2px; }
  .hm-brief-eyebrow { font-size: 9.5px; margin-bottom: 8px; }
  .hm-brief-text { font-size: 14px; line-height: 1.5; max-width: none;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hm-brief.open .hm-brief-text { display: block; overflow: visible; }
  .hm-brief-more { display: flex; align-items: center; min-height: 44px; appearance: none; border: 0;
    background: none; padding: 0; cursor: pointer; font-family: var(--font-sans); font-size: 12.5px;
    font-weight: var(--weight-medium); color: var(--link); }

  /* Figures 2×2 in one card with the chain — the label keeps a fixed two-line
     slot so the four numbers stay on one baseline (fault 08). */
  .hm-card { background: var(--surface); padding: 0; overflow: hidden; }
  .hm-card-rule { margin: 0; }
  .hm-figs { grid-template-columns: 1fr 1fr; gap: 0; }
  .hm-fig { padding: 15px 14px; gap: 4px; }
  .hm-fig:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
  .hm-fig:nth-child(odd) { border-right: 1px solid var(--hair); }
  .hm-fig-label { height: 26px; font-size: 9.5px; letter-spacing: 0.12em; line-height: 1.25; }
  .hm-fig-val { font-size: var(--figure-xs); }
  .hm-fig-sub { font-size: 11px; }

  /* Fault 02 — the seven chain labels used to collide, WORKED ON wrapping under
     INSTRUCTED with DEADLINE on top of it. The chain stands up instead: label,
     value and node on one 33px row each. Nothing abbreviated, nothing scrolled. */
  .hm-pipe { flex-direction: column; overflow: visible; padding: 6px 0; }
  .hm-pipe-node { flex-direction: row; align-items: center; width: auto; gap: 12px;
    min-height: 33px; padding: 0 14px; text-align: left; }
  .hm-pipe-dot { order: 1; flex: 0 0 9px; width: 9px; height: 9px; }
  .hm-pipe-lab { order: 2; flex: 1; min-width: 0; font-size: 10px; letter-spacing: 0.12em; }
  .hm-pipe-num { order: 3; font-size: 13px; }
  .hm-pipe-node.current { background: var(--nav-hover); }
  .hm-pipe-conn { display: none; }

  /* Two columns and a tap. Ref and name left, the figure that matters right;
     the three columns the phone drops arrive in the open panel rather than
     being clipped off the edge (fault 01). Nothing scrolls sideways. */
  .hm-mtable-wrap { overflow-x: visible; background: none; }
  .hm-mtable { min-width: 0; background: var(--surface); border-top: 1px solid var(--ink); margin: 0 -16px; }
  .hm-mhead { display: none; }
  .hm-mrow-main { grid-template-columns: auto 1fr auto 15px;
    grid-template-areas: "ref client due chev" "scope scope stage chev"; gap: 3px 8px; padding: 12px 16px; }
  .hm-c-name { display: contents; }
  .hm-c-ref { grid-area: ref; font-size: 12px; align-self: baseline; }
  .hm-c-client { grid-area: client; font-size: 14px; font-weight: var(--weight-medium);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-c-scope { grid-area: scope; font-size: 12px; color: var(--ink-2); }
  .hm-c-due { grid-area: due; justify-self: end; font-size: 12px; text-align: right; }
  .hm-c-stage { grid-area: stage; justify-self: end; font-size: 11px; color: var(--ink-2); }
  .hm-c-dot, .hm-c-lead, .hm-w { display: none; }
  .hm-n { display: inline; }
  .hm-c-chev { grid-area: chev; display: block; align-self: center; font-size: 15px; color: var(--ink-3); }

  /* The open row pushes the rest down rather than covering it, and carries the
     two actions you would otherwise navigate for. */
  .hm-mrow.open { background: var(--brief-bg); }
  .hm-mrow-open { display: block; padding: 0 16px 14px; }
  .hm-open-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .hm-open-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .hm-of-l { font-size: 9.5px; font-weight: var(--weight-medium); letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-2); }
  .hm-of-v { font-size: 13px; color: var(--ink); }
  .hm-of-v.mono { font-family: var(--font-technical); }
  .hm-of-v.attn { color: var(--brand-orange); }
  .hm-open-acts { display: flex; gap: 8px; margin-top: 12px; }
  .hm-act { flex: 1; height: 44px; border-radius: 8px; border: 1px solid var(--hair);
    background: var(--surface); font-family: var(--font-sans); font-size: 13px;
    font-weight: var(--weight-medium); color: var(--ink); cursor: pointer; }
  .hm-act.primary { background: var(--ink-fill); border-color: var(--ink-fill); color: var(--ink-fill-ink); }

  /* Reminders, notes and emails stop being three squeezed columns and become
     one segmented block, so an empty Notes column costs nothing. */
  .hm-seg { display: flex; border: 1px solid var(--hair); border-radius: 10px;
    overflow: hidden; background: var(--surface); }
  .hm-seg-btn { flex: 1; min-height: 44px; appearance: none; border: 0; background: none; cursor: pointer;
    font-family: var(--font-sans); font-size: 12px; font-weight: var(--weight-medium); color: var(--ink-2);
    border-left: 1px solid var(--hair); }
  .hm-seg-btn:first-child { border-left: 0; }
  .hm-seg-btn.active { background: var(--ink-fill); color: var(--ink-fill-ink); }
  .hm-seg-n { font-family: var(--font-technical); opacity: 0.7; }
  .hm-cols3 { display: block; }
  .hm-col { display: none; }
  .hm-cols3[data-seg="reminders"] .hm-col[data-seg="reminders"],
  .hm-cols3[data-seg="notes"] .hm-col[data-seg="notes"],
  .hm-cols3[data-seg="emails"] .hm-col[data-seg="emails"] { display: flex; }
  .hm-col > span:first-child { display: none; }   /* the segment bar carries the label */
}

/* ── The remaining faults from the canvas, applied to every screen ────────── */
@media (max-width: 760px) {
  /* Fault 01 + 03 — cells were nowrap with overflow:hidden inside a page that
     cannot scroll sideways, so a long name collapsed onto its neighbour and the
     last column was unreachable. They wrap now, and every register that is still
     wider than the column keeps its own scroller. */
  table.data td { white-space: normal; max-width: none; }
  .table-wrap, .card-table, .tm-table, .bm-table-wrap, .hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Fault 05 — filter chips stacked one per line, five rows to say four words.
     One scrolling row instead. */
  .chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; min-height: 32px; }

  /* Fault 06 — desktop margins survived: a 350px right column of empty paper on
     a 390px screen. */
  .kpi-row, .fin-stats, .view-head, .list-controls, .proj-toolbar,
  .pd-head3, .ps-card, .home-top { padding-right: 0; }

  /* 44px minimum on every target the phone actually uses. */
  .btn, .linkbtn, .back-link { min-height: 44px; }
}

/* Desktop reading of the remaining Home hooks (they were inline until the
   phone needed to re-lay them). */
/* .hm-daterow retired with §4 — the header line draws the date and the clocks. */
.hm-date { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.hm-clocks { font-family: var(--font-technical); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); white-space: nowrap; }
.hm-movinghead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: -12px; }
.hm-movinghead-l { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); }
.hm-movinghead-r { font-size: 12px; color: var(--ink-3); }
.hm-more { padding: 14px 0 0; display: flex; align-items: center; }
.hm-more > span { font-size: 12.5px; color: var(--link); }
.hm-col-list { display: flex; flex-direction: column; }
.hm-col-empty { font-size: 13px; color: var(--ink-3); }
.hm-crow { display: grid; grid-template-columns: 62px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.hm-crow.email { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; }
.hm-crow-when { font-family: var(--font-technical); font-size: 11.5px; color: var(--ink-3); }
.hm-crow-text { font-size: 13px; line-height: 1.5; }

@media (max-width: 760px) {
  /* The chain's rows run the full width of the card — label left, value right,
     the tinted row for the current node spanning the whole 33px. */
  .hm-pipe { align-items: stretch; }

  /* Only the FIGURE that matters goes orange on an overdue row. The status
     under it stays grey, as the canvas has it — two oranges in one cell reads
     as an error state rather than a deadline. */
  .hm-mrow[data-attn="1"] .hm-c-stage { color: var(--ink-2); }

  /* The date and the two clocks stack — side by side they touch at 358px. */
  .hm-daterow { flex-direction: column; align-items: flex-start; gap: 3px; }
  .hm-daterow-gap { display: none; }
  .hm-date { font-size: 9.5px; }
  .hm-clocks { font-size: 10.5px; letter-spacing: 0; }

  .hm-movinghead { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: -8px; }
  .hm-movinghead-r { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }

  /* "n more" is a row of the ledger, not a line floating under it. */
  .hm-more { min-height: 44px; padding: 0 16px; margin: 0 -16px; background: var(--surface);
    border-bottom: 1px solid var(--hair); }
  .hm-more > span { font-weight: var(--weight-medium); }

  /* Segmented block: underlined tabs, the active one navy over an orange rule —
     the same marker the tables use. Not a filled pill. */
  .hm-seg { display: flex; gap: 12px; padding: 0; border: 0; border-radius: 0; background: none; }
  .hm-seg-btn { flex: 0 0 auto; min-width: 66px; height: 44px; min-height: 0; display: flex;
    align-items: flex-end; justify-content: center; padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent;
    background: none; cursor: pointer; font-family: var(--font-sans); font-size: 10px;
    font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
  .hm-seg-btn.active { color: var(--ink); border-bottom-color: var(--brand-orange); background: none; }
  .hm-seg-n { font-family: var(--font-technical); opacity: 1; margin-left: 4px; }

  /* The list under it is one white block, full width, 46px date column. */
  .hm-col-list { background: var(--surface); border-top: 1px solid var(--hair); margin: 0 -16px; }
  .hm-crow { grid-template-columns: 46px 1fr; gap: 14px; padding: 11px 16px; }
  .hm-crow.email { padding: 11px 16px; }
  .hm-crow:last-child { border-bottom: 0; }
  .hm-crow-when { color: var(--ink-2); }
  .hm-col-empty { padding: 14px 16px; }
}

@media (max-width: 760px) {
  /* The attention rule runs the whole height of the row, open panel included —
     it marks the record, not the summary line. */
  .hm-mrow[data-attn="1"] .hm-mrow-main { box-shadow: none; }
  .hm-mrow[data-attn="1"] { box-shadow: inset 3px 0 0 var(--brand-orange); }
}

/* The office display is a TV in kiosk mode — no phone chrome over it, whatever
   the window happens to be. */
.office-mode .tabbar, .office-mode .mobile-header, .office-mode .more-sheet { display: none; }

/* ── Timesheet — this week changed in another window (Karan 27/08) ──────────
   Not an error state: the save was REFUSED, so the other window's hours are
   intact and so is whatever is on screen here. Orange inset rule, the same
   attention marker the tables use, rather than a red failure. ── */
.ts-conflict { display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding: 12px 16px; background: var(--surface); box-shadow: inset 3px 0 0 var(--brand-orange);
  border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--ink); }
.ts-conflict > span { flex: 1; min-width: 220px; line-height: 1.45; }
.ts-conflict button { min-height: 44px; padding: 0 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--hair); background: var(--surface); font-family: var(--font-sans);
  font-size: 13px; font-weight: var(--weight-medium); color: var(--ink); }
.ts-conflict button:hover { border-color: var(--hair-strong); }

/* ── Mail reader — an offer, not an action (email canvas turn 2, 27/08) ─────
   "Set as the response-by date". Outlined in the attention orange rather than
   filled: Track has READ something and is proposing it, and the person decides.
   A filled navy button would read as the app having already done it. ── */
.mr-offer { min-height: 40px; padding: 0 14px; border-radius: 8px; text-align: left; cursor: pointer;
  border: 1px solid var(--brand-orange); background: transparent; font-family: var(--font-sans);
  font-size: 12.5px; color: var(--brand-orange); }
.mr-offer:hover { background: var(--surface); }
.mr-offer[disabled] { opacity: 0.6; cursor: default; }

/* ── What's new — the release splash (whatsnew.js) ──────────────────────────
   It was a 640px card built inline, so nothing in the 760px layer could reach
   it: on a phone it overflowed the viewport on both edges and cut off its own
   button (Karan 27/08). Classes now, laid out here. ── */
.wn-card { width: 640px; max-width: 100%; max-height: 86vh; background: var(--surface);
  border-radius: 20px; box-shadow: var(--shadow-dialog); overflow: hidden;
  display: flex; flex-direction: column; animation: bm-rise var(--dur-slow) var(--ease-out) both; }
.wn-head { padding: 26px 30px 22px; display: flex; align-items: flex-start; gap: 16px; flex: none; }
.wn-body { padding: 24px 30px 26px; display: flex; flex-direction: column; gap: 26px; overflow-y: auto; }
.wn-foot { padding: 18px 30px; display: flex; align-items: center; gap: 14px; flex: none; flex-wrap: wrap; }
.wn-ok { background: var(--ink-fill); color: var(--ink-fill-ink); border: 0; border-radius: 8px;
  padding: 11px 22px; font-size: 13px; font-weight: var(--weight-medium); cursor: pointer;
  font-family: var(--font-sans); min-height: 44px; }

@media (max-width: 760px) {
  /* A sheet off the bottom, like the More sheet — not a card that cannot fit. */
  .whatsnew-overlay { padding: 0; place-items: end stretch; }
  .wn-card { width: 100%; max-width: none; max-height: 92dvh; border-radius: 20px 20px 0 0; }
  .wn-head { padding: 20px 16px 16px; }
  .wn-body { padding: 18px 16px 20px; gap: 22px; }
  .wn-foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .wn-foot > span { flex: 1 1 100%; order: 2; }
  .wn-ok { flex: 1 1 auto; }
}

/* ── Mail reader on a phone ─────────────────────────────────────────────────
   The reader is a 1120px card with a 1fr/300px body grid. Inside a 390px
   screen that left the message column 42px wide — unreadable (Karan 27/08).
   It becomes a full-height sheet with one column, side panel underneath. ── */
@media (max-width: 760px) {
  .mr-backdrop { padding: 0 !important; align-items: stretch !important; }
  .mr-card { width: 100% !important; max-width: none !important; height: 100dvh;
    border-radius: 0 !important; display: flex; flex-direction: column; }
  .mr-card > div:first-child { padding: calc(env(safe-area-inset-top) + 14px) 16px 14px !important; }
  .mr-grid { display: block !important; overflow-y: auto; flex: 1; min-height: 0; }
  .mr-grid > div:first-child { padding: 18px 16px 20px !important; }
  /* the side panel stops being a column and becomes the last block */
  .mr-grid > div:last-child { border-left: 0 !important; border-top: 1px solid var(--hair);
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom)) !important; }
  #mr-menu { width: calc(100vw - 32px) !important; right: -8px !important; }
}

/* ── Quick-add (design_handoff_tasks_module, artboard 1a) ────────────────────
   Every value below is transcribed from spec/tasks-artboards.json, which is
   extracted from the canvas by scripts/extract-artboard.py. If a number here
   disagrees with the artboard, the artboard is right — regenerate and fix. */
.qa-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(12, 17, 57, 0.28);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
  animation: qa-fade var(--bm-dur-scrim) var(--ease-out);
}
.qa-card {
  width: 680px; max-width: 100%;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(12, 17, 57, 0.20);
  overflow: hidden;
  animation: qa-rise var(--dur-base) var(--ease-out);
}
@keyframes qa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qa-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .qa-scrim, .qa-card { animation: none; }
}

/* The field. Three paddings, one per state, exactly as drawn. */
.qa-field { padding: 22px 24px; display: flex; align-items: center; gap: 14px; }
.qa-card[data-state="parsed"] .qa-field { padding: 22px 24px 18px; }
.qa-card[data-state="ambiguous"] .qa-field { padding: 22px 24px 16px; }
.qa-kbd {
  font-family: var(--font-technical); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.08em; flex: none;
}
/* One contenteditable line, so the parsed spans stay live IN the field — the
   handoff's point that correcting the line and correcting a chip are the same
   action. A plain <input> cannot hold mark-up. */
.qa-line {
  flex: 1; font-size: 17px; letter-spacing: -0.01em; line-height: 1.3;
  color: var(--text-primary); outline: none; white-space: pre-wrap; word-break: break-word;
}
.qa-line:empty::before { content: attr(data-placeholder); color: var(--ink-3); }
.qa-line .qa-span { background: var(--tint-blue-2); border-radius: 4px; padding: 1px 3px; }
.qa-line .qa-span-amb { background: var(--brand-orange-050); border-radius: 4px; padding: 1px 3px; }
.qa-caret { width: 1.5px; height: 22px; background: var(--brand-blue); flex: none; }

/* Resting hint strip. */
.qa-hint {
  padding: 12px 24px 14px; border-top: 1px solid var(--hair-soft);
  background: var(--surface-sunk-soft);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.qa-hint-t { font-size: 12px; color: var(--ink-3); }
.qa-tok { font-family: var(--font-technical); font-size: 11.5px; color: var(--ink-2); }

/* Parsed body: "Reads as", the chips, the backlog note. */
.qa-body { padding: 0 24px 18px; display: flex; flex-direction: column; gap: 12px; }
.qa-reads { display: flex; align-items: center; gap: 10px; }
.qa-reads-l {
  font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.14em; font-weight: 500; text-transform: uppercase;
}
.qa-reads-v { font-size: 14.5px; font-weight: 500; }
.qa-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qa-chip {
  border: 1px solid var(--line-blue); background: var(--tint-blue);
  border-radius: 8px; padding: 7px 8px 7px 11px;
  display: flex; align-items: center; gap: 9px;
}
.qa-chip-l {
  font-family: var(--font-technical); font-size: 9.5px;
  color: var(--link); letter-spacing: 0.1em;
}
.qa-chip-v { font-size: 13px; }
.qa-chip-x {
  font-size: 13px; color: var(--ink-3);
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; line-height: 1;
}
.qa-chip-empty {
  border: 1px dashed var(--hair); border-radius: 8px; padding: 7px 11px;
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: none; font-family: inherit;
}
.qa-chip-empty .qa-chip-l { color: var(--ink-3); }
.qa-chip-empty .qa-chip-v { color: var(--ink-3); }
/* Priority reads on one dimension only — the dot, same scale as the task row. */
.qa-pdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.qa-pdot[data-p="1"] { background: var(--brand-orange); }
.qa-pdot[data-p="2"] { background: var(--ink-3); }
.qa-pdot[data-p="3"] { background: none; border: 1.5px solid var(--hair-strong); }

.qa-note { display: flex; align-items: center; gap: 10px; }
.qa-note-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-orange); flex: none; }
.qa-note-t { font-size: 12.5px; color: var(--ink-2); }
.qa-note-a {
  font-size: 12.5px; color: var(--link);
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}

/* Footer. */
.qa-foot {
  padding: 14px 24px; border-top: 1px solid var(--hair-soft);
  background: var(--surface-sunk-soft);
  display: flex; align-items: center; gap: 12px;
}
.qa-foot-k {
  font-family: var(--font-technical); font-size: 10.5px;
  color: var(--ink-3); letter-spacing: 0.08em;
}
.qa-acts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.qa-btn {
  min-height: 40px; padding: 0 16px; border-radius: 8px;
  border: 1px solid var(--hair); background: transparent;
  font-family: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.qa-btn-p {
  min-height: 40px; padding: 0 20px; border-radius: 8px; border: 0;
  background: var(--brand-blue); font-family: inherit; font-size: 13px;
  font-weight: 500; color: var(--brand-white); cursor: pointer;
}
.qa-btn-p:hover { background: var(--brand-dark-blue); }

/* Ambiguous: the picker. Never a guess — the last row is always "leave it". */
.qa-pick { border-top: 1px solid var(--hair-soft); }
.qa-pick-row {
  padding: 13px 24px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; background: none; border: 0; width: 100%;
  font-family: inherit; text-align: left;
}
.qa-pick-row + .qa-pick-row { border-top: 1px solid var(--hair-soft); }
.qa-pick-row[aria-selected="true"] { background: var(--tint-blue); }
.qa-pick-ref {
  font-family: var(--font-technical); font-size: 11px;
  color: var(--ink-3); width: 62px; flex: none;
}
.qa-pick-row[data-unlink] .qa-pick-ref { color: var(--ink-3); }
.qa-pick-name { font-size: 14px; }
.qa-pick-row[data-unlink] .qa-pick-name { color: var(--ink-2); }
.qa-pick-meta { font-size: 12.5px; color: var(--ink-3); }
.qa-pick-enter {
  margin-left: auto; font-family: var(--font-technical);
  font-size: 10.5px; color: var(--link);
}

@media (max-width: 760px) {
  .qa-scrim { padding: 0; align-items: flex-end; }
  .qa-card { width: 100%; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(12, 17, 57, 0.14); }
  .qa-btn, .qa-btn-p { min-height: 44px; }
  .qa-chip, .qa-chip-empty { min-height: 44px; }
}

/* ── Project tasks tab (design_handoff_tasks_module, artboard 1c) ────────────
   The tab is NOT in §14's dropped list and turn 7/8 gives the project RECORD no
   replacement, so it stays. These four rules came with the Today panel that was
   deleted with the rest of turns 1-6; they live here now, with their only user. */
.td-check {
  width: 19px; height: 19px; border-radius: 5px; border: 1.5px solid var(--hair-strong);
  flex: none; background: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-white); font-size: 11px; font-family: inherit;
}
.td-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.td-dot[data-p="1"] { background: var(--brand-orange); }
.td-dot[data-p="2"] { background: var(--ink-3); }
.td-dot[data-p="3"] { border: 1.5px solid var(--hair-strong); }
.td-t { font-size: 14.5px; }
.td-src {
  font-family: var(--font-technical); font-size: 10.5px; letter-spacing: 0.06em;
  border-radius: 4px; flex: none;
  color: var(--ink-2); border: 1px solid var(--hair); padding: 2px 6px;
}
.td-src[data-agent] {
  color: var(--brand-white); background: var(--brand-blue); border-color: var(--link);
  padding: 3px 6px;
}
.td-timer {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--ink); cursor: pointer; background: none; font-family: inherit;
}
.td-timer[data-on] { background: var(--brand-blue); border-color: var(--link); }

/* ── Tasks module leftovers still drawn elsewhere ─────────────────────────────
   The turn 7/8 Tasks page went with Tasks v2 (its block is at the end of this
   file). These four are still drawn: the source chip on task rows (and the
   site-flag variant, SITE CHECKS below), and the attention header / filter chip
   Ask Track's drawer (views/ask-track.js) reuses. */
.tk-fchip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--hair);
  background: var(--surface); border-radius: 7px; padding: 5px 10px; font-size: 12px;
  cursor: pointer; font-family: inherit; color: inherit; }
.tk-fchip.on { border-color: var(--status-overdue-line); background: var(--status-overdue-bg); color: var(--status-overdue-ink); }
.tk-src { font-family: var(--font-technical); font-size: 9px; border: 1px solid var(--hair);
  border-radius: 3px; padding: 1px 5px; color: var(--ink-2); letter-spacing: 0.06em; flex: none; }
.tk-attn-head { height: 30px; padding: 0 20px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--hair-soft); }
.tk-attn-l { font-family: var(--font-technical); font-size: 9.5px; letter-spacing: 0.1em; color: var(--ink-3); }
.tk-attn-list { overflow-y: auto; flex: 1; min-height: 0; }
@keyframes tk-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── ASK TRACK, the recommendation layer (ASK-TRACK.md, 9a–9d) ────────────────
   --brand-blue-200 IS THE TELL: a blue-tinted border means Track wrote it. Nothing else
   in the module uses that border, and it should stay that way. The filled
   ASK TRACK label appears at most once per surface — in the drawer it is in the
   header, not on every card, where it would become wallpaper. */
.at-label { font-family: var(--font-technical); font-size: 9.5px; color: var(--brand-white);
  background: var(--brand-blue); border-radius: 4px; padding: 3px 6px; letter-spacing: 0.06em; }
.at-tag { font-family: var(--font-technical); font-size: 8.5px; color: var(--link);
  border: 1px solid var(--line-blue); background: var(--tint-blue); border-radius: 3px;
  padding: 1px 5px; letter-spacing: 0.06em; }
.at-count { margin-left: auto; font-family: var(--font-technical); font-size: 9.5px; color: var(--ink-3); }

.at-card { padding: 14px 20px; border-bottom: 1px solid var(--hair-soft);
  display: flex; flex-direction: column; gap: 9px; }
.at-card-solo { border: 1px solid var(--line-blue); border-radius: 12px; padding: 14px 16px; }
.at-top { display: flex; align-items: center; gap: 9px; }
.at-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: block; }
.at-dot-move { background: var(--brand-blue); }
.at-dot-risk { background: var(--brand-orange); }
.at-title { font-size: 12.5px; font-weight: var(--weight-medium); }
.at-title-risk { color: var(--status-overdue-ink); }
.at-fig { margin-left: auto; font-family: var(--font-technical); font-size: 9.5px; color: var(--ink-3); }
.at-fig-risk { color: var(--status-overdue-ink); }
.at-body { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.at-ev { font-family: var(--font-technical); font-size: 9.5px; color: var(--ink-3); letter-spacing: 0.04em; }
.at-acts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.at-act { min-height: 32px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--hair);
  background: var(--surface); color: var(--ink-2); font-size: 12px; cursor: pointer; font-family: inherit; }
.at-act-p { background: var(--brand-blue); border-color: var(--link); color: var(--brand-white);
  font-weight: var(--weight-medium); }
.at-more { align-self: flex-start; margin: 12px 20px; font-size: 12px; color: var(--link);
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.at-quiet { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); margin: 0; }
.at-quiet-box { padding: 16px 20px; }

/* Weight 1 — one line beside the field it concerns. No border, no buttons. */
.at-hint { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; }
.at-hint-t { font-size: 11.5px; line-height: 1.45; color: var(--link); }
.at-hint-a { font-size: 11.5px; color: var(--link); background: none; border: 0; padding: 0;
  cursor: pointer; font-family: inherit; text-decoration: underline; }
.at-hint-ev { font-family: var(--font-technical); font-size: 9px; color: var(--ink-3); }

/* Weight 3 — the moment of decision. */
.at-strip { background: var(--tint-blue); border-bottom: 1px solid var(--line-blue);
  padding: 12px 16px; display: flex; align-items: flex-start; gap: 11px; }
.at-strip-b { display: flex; flex-direction: column; gap: 4px; }
.at-strip-t { font-size: 12.5px; line-height: 1.5; color: var(--ink); }

/* The drawer (9b) — never pushed, always openable. */
.at-chip { border-color: var(--line-blue); background: var(--tint-blue); color: var(--link); }
.at-chip-n { font-family: var(--font-technical); font-size: 11px; }
.at-scrim { position: fixed; inset: 0; z-index: 125; background: rgba(12, 17, 57, 0.12);
  display: flex; justify-content: flex-end; }
.at-drawer { width: 480px; max-width: 100%; background: var(--surface);
  border-left: 1px solid var(--hair); box-shadow: -18px 0 48px rgba(12, 17, 57, 0.12);
  display: flex; flex-direction: column; animation: tk-slide 200ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .at-drawer { animation: none; } }
.at-dhead { padding: 16px 20px 14px; border-bottom: 1px solid var(--hair-soft);
  display: flex; align-items: center; gap: 11px; }
.at-dtitle { font-size: 15px; font-weight: var(--weight-medium); letter-spacing: -0.02em; margin: 0; }
.at-dclose { margin-left: auto; width: 28px; height: 28px; border: 1px solid var(--hair);
  border-radius: 8px; background: none; cursor: pointer; font-size: 13px; color: var(--ink-3);
  font-family: inherit; }
.at-dfilters { padding: 12px 20px; border-bottom: 1px solid var(--hair-soft);
  background: var(--surface-sunk-soft); display: flex; gap: 8px; flex-wrap: wrap; }
.at-tab { padding: 5px 10px; border-radius: 7px; border: 1px solid var(--hair);
  background: var(--surface); font-size: 12px; color: var(--ink-2); cursor: pointer;
  font-family: inherit; display: inline-flex; align-items: center; gap: 7px; }
.at-tab.on { background: var(--ink-fill); border-color: var(--ink-fill); color: var(--ink-fill-ink); }
.at-tab-n { font-family: var(--font-technical); font-size: 11px; }
.at-dlist { overflow-y: auto; flex: 1; }
.at-ghead { height: 30px; padding: 0 20px; background: var(--brief-bg);
  border-bottom: 1px solid var(--hair-soft); display: flex; align-items: center; gap: 10px; }
.at-gn { font-family: var(--font-technical); font-size: 9.5px; color: var(--ink-2); }
.at-dfoot { border-top: 1px solid var(--hair); padding: 14px 20px;
  display: flex; flex-direction: column; gap: 8px; }
.at-what { align-self: flex-start; font-size: 12px; color: var(--link); background: none;
  border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.at-what-page { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.at-prose { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.at-prose li { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; line-height: 1.5; }

/* ── Golden thread (Track Golden Thread.html, turns 1–3, 04/09/2026) ─────────
   A 640px slide-over over a navy scrim: one continuous history, oldest first,
   with every gap drawn as a break IN the line rather than listed underneath.
   Sizes and spacing are the canvas's own; the two above 17px are tokens
   (--text-h2 = 28px, --figure-sm = 34px) because design-lint takes literals
   above 17px as a bypassed scale. */
.gt-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(12, 17, 57, 0.38);
  display: flex; justify-content: flex-end; }
/* §9: min(620px, 92vw) and a slide from the right — it comes from the edge it
   is pinned to, which bm-rise (a translateY) did not say. */
.gt-panel { width: min(620px, 92vw); max-width: 100%; height: 100%; box-sizing: border-box;
  background: var(--ground); box-shadow: -24px 0 60px rgba(12, 17, 57, 0.22);
  overflow-y: auto; display: flex; flex-direction: column;
  animation: gt-in var(--dur-base) var(--ease-out) both; }
@keyframes gt-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gt-panel { animation: none; } }
.gt-body { padding: 30px 34px 36px; }
.gt-spacer { flex: 1; }

.gt-head { display: flex; align-items: flex-start; gap: 16px; }
.gt-head-t { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gt-eyebrow { font-size: 10.5px; font-weight: var(--weight-medium); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--anchor); }
.gt-h1 { font-size: var(--text-h2); font-weight: var(--weight-medium); letter-spacing: -0.025em; line-height: 1.08; }
.gt-sub { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.gt-close { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--hair);
  background: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink); cursor: pointer; }

/* Scope pills — the same thread read at three widths: this project, this
   client, this asset. The asset pill is disabled rather than hidden when
   there is no asset record, because its absence is itself information (3c). */
.gt-scopes { margin-top: 22px; display: flex; gap: 6px; flex-wrap: wrap; }
.gt-scope { height: 32px; display: inline-flex; align-items: center; padding: 0 15px;
  border-radius: var(--radius-pill); font-size: 12.5px; font-weight: var(--weight-medium);
  font-family: inherit; cursor: pointer; background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--hair); }
.gt-scope.is-on { background: var(--ink-fill); border-color: var(--ink-fill); color: var(--ink-fill-ink); }
.gt-scope:disabled { color: var(--ink-3); cursor: default; }

.gt-card { margin-top: 20px; padding: 18px 20px 16px; border: 1px solid var(--hair);
  border-radius: 14px; background: var(--brief-bg); }
.gt-card-top { display: flex; align-items: flex-end; gap: 16px; }
.gt-card-fig { display: flex; flex-direction: column; gap: 6px; }
.gt-card-l { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3); }
.gt-card-n { display: flex; align-items: baseline; gap: 7px; }
.gt-done { font-size: var(--figure-sm); font-weight: var(--weight-medium); letter-spacing: -0.03em;
  line-height: 1; font-variant-numeric: tabular-nums; }
.gt-of { font-size: 15px; color: var(--ink-3); }
.gt-card-r { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.gt-gapnote { font-size: 12.5px; }
.gt-gapsub { font-size: 12.5px; color: var(--ink-3); }
.gt-bar { margin-top: 16px; display: flex; gap: 3px; }
.gt-bar span { flex: 1; height: 6px; border-radius: 2px; }
.gt-legend { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: 4px; }
.gt-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11px;
  letter-spacing: 0.05em; color: var(--ink-3); }
.gt-legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* The line. 58px date column, a 22px rail carrying a 1px line and a 9px dot,
   then the record. The line NEVER breaks for a withheld record — only for a
   real gap — which is the whole of rule 3e. */
.gt-thread { margin-top: 20px; display: flex; flex-direction: column; }
.gt-row { display: grid; grid-template-columns: 58px 22px 1fr; column-gap: 14px; align-items: stretch; }
.gt-date { padding-top: 1px; text-align: right; font-size: 10.5px; font-weight: var(--weight-medium);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.gt-rail { position: relative; display: flex; justify-content: center; }
.gt-line { width: 1px; background: var(--hair); }
.gt-dot { position: absolute; top: 3px; width: 9px; height: 9px; border-radius: 50%; }
.gt-dot-break { position: absolute; top: 3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--brand-orange); box-sizing: border-box; }
.gt-node { padding-bottom: 22px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.gt-node.is-withheld { cursor: default; }
.gt-kind { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.13em; text-transform: uppercase; }
.gt-title { font-size: 14.5px; font-weight: var(--weight-medium); line-height: 1.35; text-wrap: pretty; }
.gt-node.is-withheld .gt-title { color: var(--ink-2); }
.gt-meta { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.gt-chips { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.gt-chip { border: 1px solid var(--hair); border-radius: 6px; padding: 4px 9px;
  font-size: 11.5px; color: var(--ink-2); }

/* A record opened in place (3a). */
.gt-open { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; padding: 15px 17px;
  border-radius: 12px; background: var(--brief-bg); }
.gt-sect { display: flex; flex-direction: column; gap: 7px; }
.gt-sect-h { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3); }
.gt-detail { font-size: 13px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.gt-person { display: flex; align-items: center; gap: 10px; }
.gt-person span { display: flex; flex-direction: column; gap: 2px; }
.gt-person b { font-size: 13px; font-weight: var(--weight-medium); }
.gt-person i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.gt-changed { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.gt-open-actions { display: flex; align-items: center; gap: 14px; }
.gt-open-note { font-size: 12.5px; color: var(--ink-3); }

/* A break. Orange border, the age, and a name — a gap nobody owns is a
   complaint rather than a chase. */
.gt-breakwrap { padding-bottom: 22px; }
.gt-break { border: 1px solid var(--brand-orange); border-radius: 12px; padding: 15px 17px;
  display: flex; flex-direction: column; gap: 7px; }
.gt-break-head { display: flex; align-items: baseline; gap: 10px; }
.gt-break-eyebrow { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--brand-orange); }
.gt-age { font-size: 11.5px; color: var(--brand-orange); }
.gt-why { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.gt-owner { margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.gt-av { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--ink-2);
  color: var(--brand-white); font-size: 10.5px; font-weight: var(--weight-medium);
  display: inline-flex; align-items: center; justify-content: center; }
.gt-av[data-mine] { background: var(--brand-dark-blue); }
.gt-av-sm { width: 22px; height: 22px; font-size: 10px; }
.gt-ownerline { font-size: 12.5px; color: var(--ink-2); }
.gt-raise { height: 30px; display: inline-flex; align-items: center; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--brand-orange); background: none;
  color: var(--brand-orange); font-size: 12.5px; font-weight: var(--weight-medium);
  font-family: inherit; cursor: pointer; }
.gt-secondary { font-size: 12.5px; font-weight: var(--weight-medium); color: var(--link);
  background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }

/* The task a break was raised into — the chase, now answerable. */
.gt-task { margin-top: 6px; padding: 13px 15px; border-radius: 10px; background: var(--brief-bg);
  display: flex; flex-direction: column; gap: 8px; }
.gt-task-head { display: flex; align-items: baseline; gap: 10px; }
.gt-task-ref { font-size: 12.5px; font-weight: var(--weight-medium); color: var(--anchor); }
.gt-task-brief { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
.gt-task-foot { display: flex; align-items: center; gap: 10px; }
.gt-task-meta { font-size: 12px; color: var(--ink-2); }

/* What normally comes next (3c) — expectation, not failure. */
.gt-expect { margin-top: 4px; margin-left: 72px; padding: 14px 16px; border-radius: 12px;
  background: var(--brief-bg); display: flex; flex-direction: column; gap: 8px; }
.gt-expect-h { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3); }
.gt-expect-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; font-size: 12.5px;
  color: var(--ink-2); }
.gt-expect-hint { color: var(--ink-3); }
.gt-expect-note { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.gt-withheld-note { margin-top: 20px; margin-left: 72px; font-size: 12.5px; line-height: 1.55;
  color: var(--ink-3); }

/* Arrived from an Ask Track answer (3b): the answer stays pinned above the
   thread, so the thread reads as the evidence for it. */
.gt-answer { padding: 20px 34px 22px; background: var(--brand-navy); display: flex;
  flex-direction: column; gap: 11px; }
.gt-answer-head { display: flex; align-items: center; gap: 10px; }
.gt-answer-brand { font-size: 15px; font-weight: var(--weight-wordmark); letter-spacing: -0.04em;
  color: var(--brand-white); }
.gt-answer-brand i { font-style: normal; color: #F5385D; }
.gt-answer-back { font-size: 11.5px; color: var(--brand-grey); background: none; border: 0;
  font-family: inherit; cursor: pointer; }
.gt-answer-q { font-size: 13px; color: var(--brand-grey); }
.gt-answer-a { font-size: 14px; line-height: 1.55; color: var(--brand-white); text-wrap: pretty; }

@media (max-width: 760px) {
  .gt-panel { width: 100%; }
  .gt-body { padding: 22px 18px 30px; }
  .gt-row { grid-template-columns: 48px 20px 1fr; column-gap: 10px; }
  .gt-expect, .gt-withheld-note { margin-left: 0; }
  .gt-close, .gt-raise, .gt-scope { min-height: 44px; }
}

/* The record an answer cited (3b) — named, not merely highlighted, so it is
   clear WHY this row is marked. A BREAK can be the cited record too: "why has
   nothing been invoiced" is answered by the gap, not by a document. */
.gt-row.is-cited .gt-node { background: var(--nav-hover); border-radius: 12px;
  padding: 15px 17px; margin: -4px 0 18px; }
.gt-row.is-cited .gt-break { box-shadow: 0 0 0 1px var(--brand-orange); }
.gt-cited { float: right; letter-spacing: 0.13em; color: var(--anchor); }
.gt-break-head .gt-cited { float: none; margin-left: 10px; color: var(--brand-orange); }
/* Waiting for an answer, or told there is none: the thread underneath is the
   substance, so this line steps back rather than pretending to be an answer. */
.gt-answer-a.is-quiet { color: var(--brand-grey); }
/* An answer drawn from an email names it underneath (06/10/2026) — emails are
   evidence, not nodes on the thread, so there is no row to open at. */
.gt-answer-src { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--brand-on-ink-2); }
.gt-answer-src a { color: var(--brand-on-ink-1); text-decoration: underline; text-underline-offset: 2px; }
/* The line ends WITH the last record — it is a history, not an open edge. */
.gt-thread .gt-row:last-child .gt-rail { padding-bottom: 22px; }

/* ── The meeting-room display (/room) ─────────────────────────────────────── */
/* Scoped to this route only, by a class the view adds to <body> and removes on
   teardown. A finger on a TV must not select text, summon a callout menu,
   bounce the page or pinch-zoom the wallboard out of true. */
body.room-kiosk {
  overscroll-behavior: none;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}
body.room-kiosk #room-host { position: fixed; inset: 0; z-index: 10; }
#room-root {
  position: absolute; inset: 0;
  background: var(--brand-light-grey); color: var(--brand-navy);
  font-family: var(--font-sans);
  /* The burn-in nudge: one pixel of drift a minute. Linear and token-timed,
     because it is movement nobody should ever notice happening. */
  transition: transform var(--dur-slow) linear;
}
/* DARK IS THE DEFAULT, because this is a television in a room with the lights
   off half the time. The panels are built from the brand's own dark end —
   navy as the ground, blue-800 lifted above it — so no new colour is invented
   for a screen nobody can colour-check from four metres away. */
#room-root[data-theme="dark"] {
  background: var(--brand-navy); color: var(--brand-white);
  --brand-white: var(--brand-blue-800);
  --brand-grey-100: var(--brand-dark-blue);
  --brand-grey-200: var(--brand-dark-blue);
  --brand-grey-500: var(--brand-grey);
  --brand-grey-700: var(--brand-grey-200);
  --brand-blue-50: var(--brand-dark-blue);
}

/* A record redrawn on its own account (the time figure arriving after its read
   finally returns) must not replay the entrance animation — see
   project-detail.js. Held for 800ms, then ordinary interactions animate again. */
.pd-quiet * { animation: none !important; }

/* THE PHONE APP TAKES THE WHOLE PAGE (design_handoff_track_mobile §4).
   On a phone Track is its own app, not the desktop narrowed, so when the mobile
   shell mounts the desktop chrome is not hidden — it is never rendered. This
   only covers the markup index.html ships before any script runs. */
body.is-mobile-app > #app,
body.is-mobile-app > #signin,
body.is-mobile-app > .rail,
body.is-mobile-app > header { display: none !important; }
body.is-mobile-app { background: var(--m-bg); overflow: hidden; }

/* ── CALCULATE (handoff Calculate-by-ASP, 05/10/2026) ───────────────────────
   Karan-only while it is built. Colours come from tokens/calc.css (--cx-*),
   which references Track's semantic layer wherever Track has the value, so
   the dark theme follows. Every number, reference and clause is Monitor. */
.cx-mono { font-family: var(--font-technical); }
.cx-caps { font-size: var(--text-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 500; }
.cx-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.cx-head { display: flex; align-items: flex-start; gap: 24px; margin-top: 8px; }
.cx-head-main { flex: 1; min-width: 0; }
.cx-head-act { padding-top: 48px; }
.cx-table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.cx-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.cx-title { font-size: var(--cx-title); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin: 0; }
.cx-rev { font-family: var(--font-technical); font-size: 12.5px; color: var(--ink-2); border: 1px solid var(--cx-line); border-radius: 4px; padding: 4px 8px; }
.cx-pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caps); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.cx-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cx-pill.brand { background: var(--cx-brand-tint); color: var(--cx-brand); }
.cx-pill.muted { background: var(--cx-soft); color: var(--ink-2); }
.cx-pill.ink { background: var(--ink); color: var(--ground); }
.cx-pill.ok { background: var(--cx-ok-tint); color: var(--cx-ok); }
.cx-pill.attn { background: var(--cx-attn-tint); color: var(--cx-attn-ink); }
.cx-pill.bad { background: var(--cx-bad-tint); color: var(--cx-bad); }
.cx-sub { margin-top: 10px; font-size: var(--text-small); color: var(--ink-2); }
.cx-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.cx-btn:hover { background: var(--row-hover); }
.cx-btn.primary { background: var(--cx-brand); border-color: var(--cx-brand); color: var(--ground); }
.cx-btn.primary:hover { background: var(--cx-brand-deep); }
.cx-btn:disabled { opacity: 0.5; cursor: default; }
.cx-btn:focus-visible, .cx-step:focus-visible, .cx-q:focus-visible, .cx-row:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }
.cx-link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--text-small); color: var(--cx-brand); cursor: pointer; }
.cx-link.cx-caps { font-size: var(--text-caps); }

.cx-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 22px 0 28px; }
.cx-step { text-align: left; background: none; border: 0; padding: 0; font-family: inherit; color: var(--cx-muted); cursor: pointer; min-height: 44px; }
.cx-step-bar { height: 4px; border-radius: 2px; background: var(--cx-line); margin-bottom: 10px; transition: background var(--dur-base) var(--ease-out); }
.cx-step-label { display: flex; align-items: center; gap: 6px; font-size: var(--text-small); }
.cx-step-n { font-family: var(--font-technical); font-size: 11px; }
.cx-step-note { margin-top: 4px; font-size: var(--text-meta-sm); color: var(--cx-muted); }
.cx-step.done { color: var(--ink); }
.cx-step.done .cx-step-bar { background: var(--cx-brand-deep); }
.cx-step.current { color: var(--ink); }
.cx-step.current .cx-step-label { font-weight: 500; }
.cx-step.current .cx-step-bar { background: var(--cx-attn); }
.cx-step .cx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cx-attn); }
.cx-step.active .cx-step-label { text-decoration: underline; text-underline-offset: 4px; }

.cx-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.cx-summary { background: var(--cx-soft); border-radius: 6px; padding: 18px 22px; }
.cx-summary p { margin: 10px 0 0; font-size: var(--text-editorial); line-height: 1.5; color: var(--ink); }
.cx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 28px 0; padding-bottom: 24px; border-bottom: 1px solid var(--cx-line); }
.cx-stat-fig { font-family: var(--font-technical); font-size: var(--cx-figure); line-height: 1; color: var(--cx-brand-deep); margin: 10px 0 12px; }
.cx-stat-fig.attn { color: var(--cx-attn-ink); }
.cx-stat-note { font-size: var(--text-meta); color: var(--ink-2); }
.cx-table { width: 100%; border-collapse: collapse; }
.cx-table th { text-align: left; font-size: var(--text-table-head); letter-spacing: var(--tracking-table); text-transform: uppercase; font-weight: 500; color: var(--ink-2); padding: 0 8px 10px; border-bottom: 1px solid var(--cx-line); }
.cx-table td { padding: 14px 8px; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); vertical-align: middle; }
.cx-table tr.cx-row { cursor: pointer; }
.cx-table tr.cx-row:hover td { background: var(--cx-brand-tint); }
.cx-util { display: flex; align-items: center; gap: 12px; }
.cx-util-track { position: relative; width: 44px; height: 4px; border-radius: 2px; background: var(--cx-line2); }
.cx-util-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--cx-brand-deep); transition: width var(--dur-base) var(--ease-out); }
.cx-util-fill.fail { background: var(--cx-bad); }
.cx-util-fill.attn { background: var(--cx-attn); }
.cx-util-fill.stale { background: repeating-linear-gradient(135deg, var(--cx-stale) 0 3px, transparent 3px 6px); }
.cx-util-tick { position: absolute; left: 80%; top: -4px; width: 1px; height: 12px; background: var(--ink); }

.cx-side h3 { margin: 0 0 12px; color: var(--cx-brand); }
.cx-side section + section { margin-top: 28px; }
.cx-side-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cx-line); }
.cx-side-row:last-child { border-bottom: 0; }
.cx-avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--cx-brand-deep); color: var(--ground); font-size: 12px; font-weight: 500; }
.cx-avatar.empty { background: none; border: 1px dashed var(--cx-line); color: var(--cx-muted); }
.cx-empty-note { font-size: var(--text-small); color: var(--cx-muted); padding: 10px 0; }

.cx-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
.cx-chip.track { background: var(--cx-ok-tint); color: var(--cx-ok); }
.cx-chip.typed { border: 1px dashed var(--cx-line); color: var(--ink-2); }
.cx-chip.code, .cx-chip.member, .cx-chip.drawing, .cx-chip.buildup { border: 1px solid var(--cx-line); color: var(--ink-2); }
.cx-chip.override { background: var(--cx-attn); color: var(--ground); }
/* Site checks in Calculate (hand-off 15/10/2026, "New CSS"): a value or an
   assumption that came from the project's site check. */
.cx-chip.site { background: var(--cx-brand-tint); color: var(--cx-brand-deep); }
.cx-site-ans { border: 1px solid var(--cx-line); border-radius: 10px; padding: 14px 16px; font-size: 15px; line-height: 1.6; color: var(--ink); background: var(--surface); min-height: 96px; white-space: pre-wrap; }
.cx-site-hl { background: var(--nav-hover); border-radius: 3px; padding: 0 2px; }
.cx-site-row { align-items: flex-start; cursor: default; }
.cx-site-mk { margin-top: 3px; flex: none; }
.cx-site-title { font-size: 15px; font-weight: var(--weight-medium); }
.cx-site-card { margin-top: 16px; }
.cx-side section.cx-site-card { margin-top: 16px; }
.cx-site-inputs .cx-irow { grid-template-columns: 1fr auto auto; }
.cx-banner.cx-site-banner { margin: 0 0 16px; align-items: flex-start; }
.cx-site-banner .cx-btn { background: var(--surface); }
.cx-flag-where .cx-chip.site { white-space: normal; text-align: left; max-width: 100%; }

.cx-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px; align-items: center; background: var(--cx-soft); border-radius: 16px; padding: 48px; }
.cx-hero h2 { font-size: var(--text-h2); font-weight: 500; margin: 28px 0 16px; line-height: 1.15; }
.cx-hero p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 24px; }
.cx-known { background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; padding: 22px 24px; }
.cx-known-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.cx-known-row:last-of-type { border-bottom: 0; }
.cx-later { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.cx-later div { border: 1px dashed var(--cx-line); border-radius: 10px; padding: 16px; font-size: var(--text-small); color: var(--ink-2); }
.cx-later b { display: block; font-weight: 500; color: var(--ink); margin-bottom: 4px; }

.cx-basis { display: grid; grid-template-columns: 260px minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.cx-qlist { background: var(--cx-soft); border-radius: 10px; padding: 10px; }
.cx-q { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 12px; font-family: inherit; color: var(--ink); cursor: pointer; min-height: 44px; }
.cx-q:hover { background: var(--row-hover); }
.cx-q.on { background: var(--surface); box-shadow: var(--cx-shadow); }
.cx-q-mark { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--cx-muted); display: grid; place-items: center; color: var(--ground); font-size: 12px; }
.cx-q-mark.confirmed { border: 0; background: var(--cx-brand-deep); }
.cx-q-mark.current { border: 2px solid var(--cx-attn); }
.cx-q-mark.current::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-attn); }
.cx-q-label { font-size: 14px; font-weight: 500; }
.cx-q-state { display: block; font-size: var(--text-meta-sm); color: var(--cx-muted); margin-top: 2px; }
.cx-ask h2 { font-size: var(--cx-question); font-weight: 500; line-height: 1.2; margin: 8px 0 12px; }
.cx-ask .cx-help { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; }
.cx-ask textarea, .cx-ask input[type="text"] { width: 100%; box-sizing: border-box; border: 1px solid var(--cx-line); border-radius: 10px; padding: 14px 16px; font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--surface); }
.cx-ask textarea { min-height: 140px; resize: vertical; }
.cx-ask textarea:focus-visible, .cx-ask input:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 1px; }
.cx-opt { display: flex; align-items: center; gap: 16px; border: 1px solid var(--cx-line); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; cursor: pointer; min-height: 44px; }
.cx-opt.on { border-color: var(--cx-brand); box-shadow: inset 0 0 0 1px var(--cx-brand); }
.cx-opt input { width: 18px; height: 18px; accent-color: var(--cx-brand); flex: 0 0 18px; }
.cx-opt-main { flex: 1; min-width: 0; font-size: 14px; }
.cx-opt-main b { font-weight: 500; font-size: 15px; }
.cx-opt-meta { font-size: var(--text-meta); color: var(--ink-2); margin-top: 4px; }
.cx-add { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px dashed var(--cx-line); border-radius: 12px; padding: 14px 18px; background: none; font-family: inherit; font-size: 14px; color: var(--cx-brand); cursor: pointer; min-height: 44px; }
.cx-actions { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.cx-note { margin-top: 12px; font-size: var(--text-meta); color: var(--cx-attn-ink); }
.cx-card { border: 1px solid var(--cx-line); border-radius: 12px; padding: 18px; }
.cx-assume { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.cx-later-step { border: 1px dashed var(--cx-line); border-radius: 16px; padding: 48px; max-width: 640px; }
.cx-later-step h2 { font-size: var(--text-h3); font-weight: 500; margin: 0 0 10px; }
.cx-later-step p { margin: 0; color: var(--ink-2); line-height: 1.6; font-size: 14px; }

.cx-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 12px 0 28px; }
.cx-wordmark { font-size: var(--text-h1); font-weight: 500; letter-spacing: -0.045em; color: var(--ink); margin: 0; line-height: 1; }
.cx-wordmark i { display: inline-block; width: 0.16em; height: 0.16em; background: var(--cx-attn); margin-left: 0.04em; }

@media (max-width: 1100px) {
  .cx-body, .cx-basis, .cx-hero { grid-template-columns: minmax(0, 1fr); }
  .cx-later { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-head { flex-direction: column; }
  .cx-head-act { padding-top: 0; }
  .cx-table { min-width: 560px; }
  .cx-hero { padding: 24px; }
  .cx-title { font-size: var(--text-h1-phone); }
  .cx-known-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cx-known-row > :first-child { grid-column: 1 / -1; }
}

/* Calculate — plan canvas, Structure, Loads (README "Structure", "Loads") */
.cx-planbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cx-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--cx-soft); border: 1px solid var(--cx-line); }
.cx-seg button { border: 0; background: none; border-radius: 999px; padding: 0 14px; min-height: 36px; font-family: inherit; font-size: var(--text-small); color: var(--ink-2); cursor: pointer; }
.cx-seg button.on, .cx-seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--cx-shadow); }
.cx-seg-add { font-size: 16px; }
.cx-layer { border: 1px solid var(--cx-line); background: var(--surface); border-radius: 999px; padding: 0 14px; min-height: 36px; font-family: inherit; font-size: var(--text-small); color: var(--ink-2); cursor: pointer; }
.cx-layer.on { color: var(--ink); }
.cx-scale { font-size: var(--text-meta); color: var(--ink-2); }
.cx-planwrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.cx-canvas { position: relative; height: 640px; border: 1px solid var(--cx-line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.cx-plan { position: absolute; inset: 0; touch-action: none; }
.cx-plan:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: -2px; }
.cx-plan-svg { width: 100%; height: 100%; display: block; cursor: crosshair; }
.cx-palette { position: absolute; left: 16px; top: 16px; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--cx-line); box-shadow: var(--cx-shadow); }
.cx-tool { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.cx-tool:hover { background: var(--row-hover); }
.cx-tool.on { background: var(--cx-brand); color: var(--ground); }
.cx-tool:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }
.cx-tool-sep { height: 1px; background: var(--cx-line); margin: 4px 8px; }
.cx-hint { position: absolute; right: 16px; bottom: 16px; font-size: var(--text-meta); color: var(--ink-2); background: var(--surface); border: 1px solid var(--cx-line); border-radius: 999px; padding: 8px 14px; pointer-events: none; }
.cx-plan-status { position: absolute; left: 90px; top: 16px; font-size: var(--text-meta); color: var(--ink-2); }
.cx-grid line { stroke: var(--cx-line2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cx-plan-svg * { vector-effect: non-scaling-stroke; }
.cx-plan-svg { -webkit-user-select: none; user-select: none; }
.cx-underlay { pointer-events: none; }
.cx-zone { fill: var(--cx-brand-tint); fill-opacity: 0.5; stroke: var(--cx-member); stroke-width: 1.5; }
.cx-joist { stroke: var(--cx-member); stroke-opacity: 0.45; stroke-width: 1; }
.cx-span { stroke: var(--cx-member); stroke-width: 1.5; }
.cx-beam { stroke: var(--cx-member); stroke-width: 6; stroke-linecap: round; }
.cx-wall { stroke: var(--cx-underlay); stroke-width: 9; stroke-dasharray: 4 3; }
.cx-wall.masonry { stroke: var(--cx-calc-ink); stroke-dasharray: none; stroke-opacity: 0.6; }
.cx-hit { stroke: transparent; stroke-width: 22; cursor: pointer; }
.cx-node { fill: var(--surface); stroke: var(--cx-member); stroke-width: 1.5; }
.cx-col { fill: var(--cx-brand-tint); stroke: var(--cx-member); stroke-width: 2; }
.cx-foot { fill: none; stroke: var(--cx-member); stroke-width: 1.5; stroke-dasharray: 6 4; }
.cx-m { cursor: pointer; }
.cx-m.sel .cx-zone, .cx-m.sel .cx-col { stroke-width: 3; }
.cx-m.sel .cx-beam { stroke: var(--cx-attn); }
.cx-m.dim { opacity: 0.35; }
.cx-m.st-stale .cx-beam, .cx-m.st-blocked .cx-beam { stroke: var(--cx-stale); stroke-dasharray: 8 5; }
.cx-lbl { fill: var(--ink); font-family: var(--font-technical); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.cx-chiplbl { fill: var(--cx-member); }
.cx-lbl-load { fill: var(--cx-calc-ink); }
.cx-lbl-catch { fill: var(--ink); }
.cx-lbl-stale { fill: var(--cx-attn-ink); }
.cx-lbl-draft { fill: var(--cx-attn-ink); }
.cx-area { fill: var(--cx-calc); fill-opacity: 0.16; stroke: var(--cx-calc-ink); stroke-width: 1.5; stroke-dasharray: 6 4; cursor: pointer; }
.cx-area.sel { fill-opacity: 0.3; stroke-dasharray: none; stroke-width: 2.5; }
.cx-area.catchment { fill: var(--cx-brand-tint); fill-opacity: 0.6; stroke: var(--cx-member); stroke-dasharray: none; }
.cx-area.catchment.s-landscape, .cx-area.catchment.undrained { fill: var(--cx-ok-tint); stroke: var(--cx-ok); stroke-dasharray: 6 4; }
.cx-area.catchment.s-concrete, .cx-area.catchment.s-asphalt { fill: var(--cx-line2); }
.cx-load { cursor: pointer; }
/* Drainage package: the storm network on Site. */
.cx-dpipe, .cx-dnode { cursor: pointer; }
.cx-dpipe-l { stroke: var(--cx-member); stroke-width: 3; }
.cx-dpipe-arrow { fill: var(--cx-member); }
.cx-dpipe.fail .cx-dpipe-l { stroke: var(--cx-bad); }
.cx-dpipe.sel .cx-dpipe-l { stroke: var(--cx-attn); stroke-width: 4; }
.cx-dnode-c { fill: var(--surface); stroke: var(--cx-member); stroke-width: 2; }
.cx-dnode.k-outfall .cx-dnode-c { fill: var(--cx-member); }
.cx-dnode.k-control .cx-dnode-c { stroke-dasharray: 3 2; stroke-width: 2.5; }
.cx-dnode.sel .cx-dnode-c { stroke: var(--cx-attn); stroke-width: 3; }
.cx-lbl-pipe, .cx-lbl-node { fill: var(--cx-member); }
.cx-lbl-pipe.fail { fill: var(--cx-bad); }
.cx-load.dim { opacity: 0.4; }
.cx-lline { stroke: var(--cx-calc-ink); stroke-width: 4; }
.cx-lpoint { fill: var(--cx-calc); stroke: var(--cx-calc-ink); stroke-width: 2; }
.cx-load.sel .cx-lline { stroke: var(--cx-attn); }
.cx-sketch { fill: none; stroke: var(--cx-attn-ink); stroke-width: 1.5; }
.cx-draft { fill: var(--cx-attn-tint); fill-opacity: 0.4; stroke: var(--cx-attn); stroke-width: 2; stroke-dasharray: 5 4; }
.cx-snap { fill: none; stroke: var(--cx-attn); stroke-width: 2; }
.cx-snapg { fill: none; stroke: var(--cx-attn); pointer-events: none; }
.cx-snapg .dot { fill: var(--cx-attn); stroke: none; }
.cx-snapg .grid { stroke: var(--ink-3); }
.cx-snapguide { stroke: var(--cx-attn); fill: none; pointer-events: none; }
.cx-sniptip { fill: var(--cx-brand-deep); pointer-events: none; }
.cx-sniptxt { fill: var(--surface); font-family: var(--font-sans); font-weight: var(--weight-medium); pointer-events: none; }
.cx-sniptxt.sub { font-weight: 400; opacity: 0.8; }
.cx-zedge { stroke: var(--ink-3); fill: none; pointer-events: none; }
.cx-zedge.on { stroke: var(--cx-ok); }
.cx-zedgelbl { fill: var(--ink-3); font-family: var(--font-sans); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; pointer-events: none; }
.cx-zedgelbl.on { fill: var(--cx-ok); stroke: var(--surface); font-weight: var(--weight-medium); }
.cx-snapchip { position: absolute; right: 16px; top: 16px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink-2); font-size: var(--text-meta); cursor: pointer; }
.cx-snapchip:hover { color: var(--ink); border-color: var(--cx-line2); }
.cx-snapmenu { position: absolute; right: 16px; top: 56px; z-index: 5; width: 260px; background: var(--surface); border: 1px solid var(--cx-line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--cx-shadow); font-size: var(--text-small); }
.cx-snaprow { display: flex; align-items: center; gap: 8px; min-height: 32px; color: var(--ink); }
.cx-snaprow select { margin-left: auto; min-height: 30px; border: 1px solid var(--cx-line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: var(--text-meta); }
.cx-snapnote { margin: 8px 0 0; color: var(--ink-2); font-size: var(--text-meta); }
.cx-scalebox { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--cx-line); border-radius: 12px; padding: 10px 14px; box-shadow: var(--cx-shadow); font-size: var(--text-small); }
.cx-scalebox input { width: 110px; min-height: 36px; border: 1px solid var(--cx-line); border-radius: 8px; padding: 0 8px; font-family: var(--font-technical); background: var(--surface); color: var(--ink); }
.cx-menu { position: fixed; z-index: 1300; min-width: 300px; max-width: 360px; background: var(--surface); border: 1px solid var(--cx-line); border-radius: 12px; box-shadow: var(--cx-shadow); padding: 12px; }
.cx-menu-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; min-height: 40px; font-family: inherit; font-size: var(--text-small); color: var(--ink); cursor: pointer; }
.cx-menu-row:hover { background: var(--row-hover); }
.cx-menu-row.on { background: var(--cx-brand-tint); }
.cx-panel { border: 1px solid var(--cx-line); border-radius: 12px; padding: 18px; background: var(--surface); max-height: 640px; overflow: auto; }
.cx-mrow { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-radius: 8px; padding: 8px 10px; min-height: 40px; font-family: inherit; font-size: var(--text-small); color: var(--ink); text-align: left; cursor: pointer; }
.cx-mrow:hover { background: var(--row-hover); }
.cx-mrow.on { background: var(--cx-brand-tint); }
.cx-stale-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cx-stale); }
.cx-insp { border-top: 1px solid var(--cx-line); margin-top: 16px; padding-top: 14px; }
.cx-irow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.cx-irow.over { background: var(--cx-attn-tint); }
.cx-ilabel { color: var(--ink-2); }
.cx-ival { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.cx-ival input[type="number"], .cx-ival input[type="text"], .cx-ival select { width: 92px; min-height: 32px; border: 1px solid var(--cx-line); border-radius: 6px; padding: 0 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-small); }
.cx-ival input[type="text"] { width: 140px; }
.cx-ival input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--cx-brand); }
.cx-unit { font-size: 11px; color: var(--ink-2); }
.cx-stale-note { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--cx-attn-tint); color: var(--cx-attn-ink); font-size: var(--text-small); line-height: 1.45; }
.cx-loads { display: grid; grid-template-columns: 330px minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.cx-secs-note { max-width: 70ch; color: var(--ink-2); font-size: var(--text-small); margin: 0 0 12px; }
.cx-secs-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cx-secs-fam { display: inline-flex; gap: 8px; align-items: center; font-size: var(--text-small); color: var(--ink-2); }
.cx-secs-bar select, .cx-secs-bar input { min-height: 40px; border: 1px solid var(--cx-line); border-radius: 8px; padding: 0 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-small); }
.cx-secs-bar input { flex: 1 1 220px; min-width: 0; }
.cx-secs-table { overflow-x: auto; max-height: 560px; overflow-y: auto; border: 1px solid var(--cx-line); border-radius: 12px; }
.cx-secs-table table { width: 100%; border-collapse: collapse; font-size: var(--text-meta); }
.cx-secs-table th { position: sticky; top: 0; background: var(--surface); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--cx-line); white-space: nowrap; }
.cx-secs-table th small { display: block; color: var(--ink-2); font-weight: 400; }
.cx-secs-table td { padding: 6px 10px; border-bottom: 1px solid var(--cx-line); white-space: nowrap; }
.cx-secs-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cx-lc { margin-top: 28px; border-top: 1px solid var(--cx-line); padding-top: 22px; }
.cx-lc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 22px; align-items: end; margin-bottom: 18px; }
.cx-lc-title { font-size: var(--text-h2); font-weight: 500; margin: 6px 0 0; }
.cx-lc-sub { display: block; font-size: var(--text-meta); color: var(--ink-2); }
.cx-lc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.cx-lc-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.cx-lc-id small { display: block; color: var(--ink-2); font-size: var(--text-meta); }
.cx-lc-flow { display: grid; gap: 3px; color: var(--ink); }
.cx-lc-out { color: var(--ink-2); }
.cx-lc-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; border: 1px solid var(--cx-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface); font-size: var(--text-small); }
.cx-lc-item.query, .cx-lc-item.missing { border-style: dashed; border-color: var(--cx-ai-line); background: var(--cx-ai-tint); }
.cx-lc-item.agree { padding: 8px 14px; }
.cx-lc-item p { margin: 4px 0 0; color: var(--ink-2); line-height: 1.5; }
.cx-lc-ico { font-family: var(--font-technical); text-align: center; }
.cx-lc-itop { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cx-lc-ititle { display: block; font-weight: 500; margin-top: 6px; }
.cx-lc-cite { margin-top: 6px; font-size: var(--text-meta); color: var(--ink-2); }
@media (max-width: 1100px) { .cx-lc-head, .cx-lc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .cx-lc-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.cx-bu { border: 1px solid var(--cx-line); border-radius: 12px; margin-top: 12px; background: var(--surface); }
.cx-bu.open { border-color: var(--cx-calc); box-shadow: 0 0 0 1px var(--cx-calc); }
.cx-bu-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 14px 4px; background: none; border: 0; font-family: inherit; font-size: 14px; color: var(--ink); cursor: pointer; min-height: 44px; }
.cx-bu-sub { display: flex; gap: 12px; padding: 0 14px 12px; font-size: var(--text-meta); color: var(--ink-2); }
.cx-bu-layers { border-top: 1px solid var(--cx-line); padding: 10px 14px 14px; }
.cx-bu-layer { display: grid; grid-template-columns: 1fr 70px auto; gap: 6px; align-items: center; padding: 4px 0; }
.cx-bu-layer input, .cx-bu-layer select, .cx-bu-layers > input { min-height: 32px; border: 1px solid var(--cx-line); border-radius: 6px; padding: 0 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-small); }
.cx-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--cx-calc); flex: 0 0 12px; }
.cx-swatch.s-landscape { background: var(--cx-ok-tint); border: 1px solid var(--cx-ok); }
.cx-swatch.s-roof, .cx-swatch.s-greenRoof { background: var(--cx-brand-tint); border: 1px solid var(--cx-member); }
.cx-swatch.s-concrete, .cx-swatch.s-asphalt, .cx-swatch.s-permeable { background: var(--cx-line2); border: 1px solid var(--ink-2); }
.cx-manual { display: grid; grid-template-columns: 16px 30px 1fr 70px 70px 34px; gap: 6px; align-items: center; border: 1px solid var(--cx-line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; font-size: var(--text-small); }
.cx-manual.on { border-color: var(--cx-attn); }
.cx-manual input { width: 100%; min-height: 30px; border: 1px solid var(--cx-line); border-radius: 6px; padding: 0 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; box-sizing: border-box; }
.cx-manual label { display: flex; gap: 3px; align-items: center; font-size: 11px; color: var(--ink-2); }
.cx-chain { display: flex; gap: 10px; align-items: center; border: 1px solid var(--cx-line); border-radius: 10px; padding: 12px 14px; font-size: var(--text-small); }
.cx-chain.on { border-color: var(--cx-brand); box-shadow: inset 0 0 0 1px var(--cx-brand); }
.cx-chain.out { border-style: dashed; color: var(--ink-2); }
.cx-chain-link { font-size: var(--text-meta); color: var(--ink-2); padding: 6px 0 6px 26px; }

/* Calculate — member design, checks, sign, output (README §5–§8) */
.cx-mhead { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.cx-member { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 40px; align-items: start; }
.cx-dgcard { padding: 18px 20px; }
.cx-diagram { width: 100%; height: auto; display: block; margin-top: 8px; }
.cx-dg-member { fill: var(--cx-brand-deep); }
.cx-dg-load, .cx-dg-point, .cx-dg-support, .cx-dg-dim, .cx-dg-reaction { fill: none; stroke-width: 1.4; }
.cx-dg-load { stroke: var(--cx-calc-ink); }
.cx-dg-loadFill { fill: var(--cx-calc-ink); }
.cx-dg-loadBand { fill: var(--cx-calc-tint); stroke: var(--cx-calc-ink); }
.cx-dg-point { stroke: var(--cx-attn-ink); stroke-width: 2; }
.cx-dg-pointFill { fill: var(--cx-attn-ink); }
.cx-dg-support { stroke: var(--ink); }
.cx-dg-dim { stroke: var(--ink-3); }
.cx-dg-reaction { stroke: var(--cx-brand); }
.cx-dg-reactionFill { fill: var(--cx-brand); }
.cx-dg-concrete { fill: var(--cx-line2); stroke: var(--ink-3); }
.cx-dg-masonry { fill: var(--cx-calc-tint); stroke: var(--ink-3); }
.cx-dg-text { fill: var(--ink); font-size: 13px; font-family: var(--font-technical); }
.cx-dg-textMuted { fill: var(--ink-2); font-size: 12px; font-family: var(--font-technical); }
.cx-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.cx-pick { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; border: 1px solid var(--cx-line); border-radius: 12px; padding: 14px; background: var(--surface); font-family: inherit; font-size: var(--text-small); color: var(--ink); cursor: pointer; min-height: 44px; text-align: left; }
.cx-pick.on { border-color: var(--cx-brand); box-shadow: inset 0 0 0 1px var(--cx-brand); }
.cx-pick:hover { background: var(--row-hover); }
.cx-checks { border-top: 1px solid var(--cx-line); }
.cx-check { display: grid; grid-template-columns: 1.1fr 0.9fr 1.2fr 1.3fr auto auto; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.cx-check.fail { background: var(--cx-bad-tint); }
.cx-working { background: var(--cx-soft); border-radius: 8px; padding: 12px 16px; margin: 8px 0 12px; font-family: var(--font-technical); font-size: 12.5px; line-height: 1.6; }
.cx-working > div { display: grid; grid-template-columns: 190px 1fr; gap: 12px; }
.cx-working > div > span:first-child { font-family: var(--font-sans); color: var(--ink-2); }
.cx-working .carried > span:last-child { font-weight: 500; }
.cx-overbtn { font-size: 12px; }
.cx-overform { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px; background: var(--cx-attn-tint); border-radius: 8px; margin: 6px 0; }
.cx-overform input { min-height: 36px; border: 1px solid var(--cx-line); border-radius: 6px; padding: 0 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-small); }
.cx-overform input[type="text"] { flex: 1; min-width: 200px; }
.cx-failbanner { padding: 14px 18px; border-radius: 10px; background: var(--cx-bad-tint); color: var(--cx-bad); font-size: 14px; line-height: 1.5; margin-bottom: 18px; }
.cx-checks-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.cx-mstrip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cx-mchip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--cx-line); border-radius: 999px; padding: 0 12px; min-height: 36px; background: var(--surface); font-family: inherit; color: var(--ink); cursor: pointer; }
.cx-mchip.st-fail { border-color: var(--cx-bad); }
.cx-aibar { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--cx-ai-line); background: var(--cx-ai-tint); border-radius: 12px; padding: 14px 16px; font-size: var(--text-small); position: relative; overflow: hidden; }
.cx-aiprog { position: absolute; left: 0; bottom: 0; height: 3px; width: 40%; background: var(--cx-ai-line); animation: cx-ai-run 1400ms linear infinite; }
@keyframes cx-ai-run { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.cx-aidot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 6px var(--cx-attn); flex: 0 0 12px; vertical-align: middle; }
.cx-flag { border: 1px solid var(--cx-line); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; background: var(--surface); }
.cx-flag.ai { border-style: dashed; border-color: var(--cx-ai-line); background: var(--cx-ai-tint); }
.cx-flag.closed { opacity: 0.85; }
.cx-flag-mini { display: block; width: 100%; text-align: left; font-family: inherit; font-size: var(--text-small); color: var(--ink); cursor: pointer; padding: 12px 14px; }
.cx-flag-mini small { color: var(--ink-2); }
.cx-flag h3 { font-size: 16px; font-weight: 500; margin: 10px 0 6px; }
.cx-flag p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.cx-flag-where { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.cx-flag-where button.cx-chip { cursor: pointer; background: var(--surface); font-family: inherit; }
.cx-flag-reason { font-size: var(--text-small); color: var(--ink-2); margin-top: 8px; }
.cx-decide { display: flex; gap: 8px; margin-top: 10px; }
.cx-decide input { flex: 1; min-height: 40px; border: 1px solid var(--cx-line); border-radius: 8px; padding: 0 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-small); }
.cx-ask-panel { border: 1px solid var(--cx-line); border-radius: 12px; padding: 18px; background: var(--surface); position: sticky; top: 16px; }
.cx-ask-log { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; max-height: 520px; overflow: auto; }
.cx-q-bubble { align-self: flex-end; max-width: 85%; background: var(--cx-brand); color: var(--ground); border-radius: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.45; }
.cx-a-card { border: 1px dashed var(--cx-ai-line); background: var(--cx-ai-tint); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.cx-a-card p { margin: 8px 0; }
.cx-ask-form { display: flex; flex-direction: column; gap: 6px; }
.cx-ask-form input { min-height: 44px; border: 1px solid var(--cx-line); border-radius: 999px; padding: 0 16px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.cx-sign { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.cx-sec { color: var(--cx-brand); margin: 26px 0 8px; }
.cx-change { display: grid; grid-template-columns: 1.3fr 1fr 24px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.cx-change s { color: var(--ink-3); }
.cx-change b { color: var(--cx-attn-ink); font-weight: 500; }
.cx-kv { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.cx-kv > span:first-child { color: var(--ink-2); }
.cx-flagrow { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.cx-flagrow small { display: block; color: var(--ink-2); }
.cx-signcard { border: 1px solid var(--cx-line); border-radius: 16px; padding: 22px; position: sticky; top: 16px; background: var(--surface); box-shadow: var(--cx-shadow); }
.cx-signcard h2 { font-size: var(--text-h3); font-weight: 500; margin: 8px 0 14px; }
.cx-checklist { list-style: none; padding: 0; margin: 0 0 12px; border-top: 1px solid var(--cx-line); }
.cx-checklist li { display: flex; gap: 10px; padding: 9px 0; font-size: var(--text-small); }
.cx-checklist li > span:first-child { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--cx-soft); color: var(--ink-2); flex: 0 0 20px; font-size: 12px; }
.cx-checklist li.ok > span:first-child { background: var(--cx-ok); color: var(--ground); }
.cx-checklist small { display: block; color: var(--cx-attn-ink); }
.cx-note-in { width: 100%; box-sizing: border-box; border: 1px solid var(--cx-line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); margin: 6px 0 14px; }
.cx-signbtn { width: 100%; justify-content: center; }
.cx-sign-why { font-size: var(--text-meta); color: var(--ink-2); line-height: 1.5; }
.cx-output { display: grid; grid-template-columns: 110px minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.cx-thumbs { display: flex; flex-direction: column; gap: 12px; max-height: 1100px; overflow: auto; }
.cx-thumb { border: 1px solid var(--cx-line); background: var(--surface); border-radius: 4px; padding: 4px; cursor: pointer; font-family: inherit; font-size: 11px; color: var(--ink-2); min-height: 44px; }
.cx-thumb.on { border-color: var(--cx-brand); box-shadow: inset 0 0 0 1px var(--cx-brand); }
.cx-thumb svg { width: 100%; height: auto; display: block; pointer-events: none; }
.cx-page-stage { background: var(--cx-soft); border-radius: 16px; padding: 24px; }
.cx-page svg { width: 100%; height: auto; display: block; box-shadow: var(--cx-shadow); }
.cx-issue { display: flex; flex-direction: column; gap: 4px; }
.cx-ifield { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--cx-line); font-size: 14px; }
.cx-ifield .cx-caps { color: var(--ink-2); }
.cx-ifield small { color: var(--ink-2); font-size: var(--text-meta); }
.cx-hier { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--cx-line); border-radius: 14px; padding: 18px 20px; margin-bottom: 12px; background: var(--surface); }
.cx-hier.adopted { border: 2px solid var(--cx-ok); }
.cx-hier.locked, .cx-hier.after { opacity: 0.55; border-style: dashed; }
.cx-hier p { color: var(--ink-2); font-size: 14px; margin: 6px 0; }
.cx-hier textarea { width: 100%; box-sizing: border-box; margin-top: 8px; border: 1px solid var(--cx-line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); }
.cx-hier-n { width: 34px; height: 34px; border-radius: 50%; background: var(--cx-soft); display: grid; place-items: center; font-family: var(--font-technical); flex: 0 0 34px; }
.cx-hier .cx-flag-where input { min-height: 32px; border: 1px dashed var(--cx-line); border-radius: 6px; padding: 0 8px; font: inherit; font-size: 12px; background: var(--surface); color: var(--ink); }
.cx-lockrow { padding: 14px 18px; background: var(--cx-soft); border-radius: 10px; font-size: var(--text-small); color: var(--ink-2); }
.cx-storerow { display: grid; grid-template-columns: 1fr 2fr 90px 24px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.cx-storerow > input { min-height: 34px; border: 1px solid var(--cx-line); border-radius: 6px; padding: 0 8px; font: inherit; font-size: var(--text-small); background: var(--surface); color: var(--ink); }
.cx-mini { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--ink-2); }
.cx-mini input { width: 70px; min-height: 30px; border: 1px solid var(--cx-line); border-radius: 6px; padding: 0 6px; background: var(--surface); color: var(--ink); font-size: 12px; }
.cx-storebar { position: relative; height: 12px; border-radius: 6px; background: var(--cx-line2); margin-top: 10px; }
.cx-storebar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--cx-brand-deep); }
.cx-storebar span.short { background: var(--cx-bad); }
.cx-storebar i { position: absolute; top: -6px; width: 2px; height: 24px; background: var(--ink); }
.cx-sbar { display: block; height: 8px; border-radius: 4px; background: var(--cx-line2); }
.cx-sbar span { display: block; height: 8px; border-radius: 4px; background: var(--cx-brand-deep); }
.cx-sbar span.crit { background: var(--cx-attn); }
.cx-table tr.crit td { font-weight: 500; }
.cx-table td input { min-height: 30px; border: 1px solid var(--cx-line); border-radius: 6px; padding: 0 6px; background: var(--surface); color: var(--ink); }
.cx-save { margin-right: 10px; font-size: var(--text-meta); }
.cx-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1500; background: var(--ink); color: var(--ground); border-radius: 999px; padding: 12px 20px; font-size: 14px; box-shadow: var(--cx-shadow); max-width: min(560px, 90vw); }
@media (max-width: 1100px) {
  .cx-planwrap, .cx-loads, .cx-member, .cx-checks-wrap, .cx-sign, .cx-output { grid-template-columns: minmax(0, 1fr); }
  .cx-thumbs { flex-direction: row; overflow-x: auto; max-height: none; }
  .cx-thumb { flex: 0 0 90px; }
  .cx-panel, .cx-ask-panel, .cx-signcard { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .cx-canvas { height: 70vh; }
  .cx-check { grid-template-columns: 1fr 1fr; }
  .cx-working > div { grid-template-columns: 1fr; }
  .cx-storerow { grid-template-columns: 1fr 90px 24px; }
  .cx-storerow > span:nth-child(2) { grid-column: 1 / -1; }
  .cx-tool, .cx-mchip, .cx-layer, .cx-seg button { min-height: 44px; }
}

.cx-banner { display: flex; align-items: center; gap: 14px; border-radius: 12px; padding: 14px 18px; margin: -10px 0 22px; font-size: 14px; line-height: 1.5; }
.cx-banner.lock { background: var(--ink); color: var(--ground); }
.cx-banner.lock .cx-btn { background: var(--ground); color: var(--ink); border-color: var(--ground); }
.cx-banner.stale { background: var(--cx-attn-tint); color: var(--cx-attn-ink); }
.cx-banner.chain { background: var(--cx-brand-tint); color: var(--cx-brand-deep); font-family: var(--font-technical); font-size: var(--text-small); }
.cx-ailine { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cx-line); font-size: var(--text-small); color: var(--ink-2); }

.cx-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.cx-lib { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cx-libcard { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; border: 1px solid var(--cx-line); border-radius: 12px; padding: 18px; font-size: 15px; }
.cx-libcard.later { border-style: dashed; color: var(--ink-2); }
.cx-clientpage { max-width: 640px; background: var(--surface); border: 1px solid var(--cx-line); border-radius: 4px; padding: 44px; box-shadow: var(--cx-shadow); }
.cx-clientpage h2 { font-size: var(--text-h2); font-weight: 500; line-height: 1.15; margin: 22px 0 14px; }
.cx-clientpage p { font-size: 14px; line-height: 1.55; }
.cx-cp-row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--cx-line); font-size: 14px; line-height: 1.5; }
.cx-cp-foot { margin-top: 40px; background: var(--cx-soft); padding: 14px 16px; font-size: var(--text-small); }
.cx-dg-frame { stroke: var(--ink); stroke-width: 2; fill: none; }
.cx-dg-forceArea { fill: var(--cx-brand-tint); fill-opacity: 0.7; stroke: var(--cx-brand); stroke-width: 1; }
.cx-dg-deflected { stroke: var(--cx-attn); stroke-width: 2; stroke-dasharray: 6 4; fill: none; }
@media (max-width: 1100px) { .cx-lib { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Calculate — Calc library + calc screen (Calculate App design 04/05, 13/10/2026) */
.cx-pill.dashed { background: none; border: 1px dashed var(--cx-line); }
.cx-libbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 22px 0 16px; }
.cx-libbar input[type="search"] { flex: 1 1 260px; max-width: 340px; min-height: 44px; border: 1px solid var(--cx-line); border-radius: 10px; padding: 0 14px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-small); }
.cx-libonly { display: inline-flex; gap: 6px; align-items: center; font-size: var(--text-small); color: var(--ink-2); min-height: 44px; }
.cx-libtable td { vertical-align: middle; }
.cx-libtable .cx-btn { min-height: 36px; padding: 0 14px; margin-left: 8px; }
.cx-lib-later td { color: var(--ink-2); }
.cx-runwrap { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 40px; align-items: start; }
.cx-runform { display: flex; flex-direction: column; gap: 18px; }
.cx-fgroup { display: flex; flex-direction: column; gap: 6px; }
.cx-fgroup > .cx-caps { color: var(--ink-2); margin-bottom: 2px; }
.cx-frow { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 4px 10px; align-items: center; border: 1px solid var(--cx-line); border-radius: 8px; padding: 6px 10px; font-size: var(--text-small); }
.cx-frow label { color: var(--ink); }
.cx-fctl { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.cx-fctl input[type="number"], .cx-fctl input[type="text"], .cx-fctl select { width: 100%; min-height: 36px; border: 1px solid var(--cx-line); border-radius: 6px; padding: 0 8px; background: var(--surface); color: var(--ink); font: inherit; font-family: var(--font-technical); font-size: var(--text-small); text-align: right; }
.cx-fctl input[type="text"], .cx-fctl select { text-align: left; font-family: inherit; }
.cx-funit { font-size: var(--text-meta-sm); color: var(--ink-2); white-space: nowrap; }
.cx-fhelp { grid-column: 1 / -1; font-size: var(--text-meta-sm); color: var(--cx-muted); line-height: 1.4; }
.cx-fopt { font-size: var(--text-meta-sm); color: var(--cx-muted); }
.cx-fobj { border: 1px solid var(--cx-line); border-radius: 10px; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.cx-fobj legend { font-size: var(--text-small); padding: 0 4px; }
.cx-farow { border-left: 2px solid var(--cx-brand-tint); padding-left: 8px; display: flex; flex-direction: column; gap: 6px; }
.cx-farow-h { display: flex; justify-content: space-between; align-items: center; color: var(--ink-2); }
.cx-rcheck { border: 1px solid var(--cx-line); border-radius: 10px; padding: 12px 14px; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cx-rcheck.gov { border-color: var(--cx-brand); box-shadow: inset 0 0 0 1px var(--cx-brand); }
.cx-rcheck.fail { background: var(--cx-bad-tint); }
.cx-rcheck-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: var(--text-small); }
.cx-rcheck .cx-util-track { flex: 1; }
.cx-rcheck-m { font-size: var(--text-meta-sm); color: var(--ink-2); }
.cx-rwarn { margin-top: 18px; border-radius: 10px; background: var(--cx-attn-tint); color: var(--cx-attn-ink); padding: 12px 16px; font-size: var(--text-small); line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.cx-outputs { overflow-x: auto; font-size: var(--text-small); }
.cx-odl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.cx-odl dt { color: var(--ink-2); }
.cx-odl dd { margin: 0; }
.cx-otable { font-size: var(--text-meta); }
@media (max-width: 1100px) { .cx-runwrap { grid-template-columns: minmax(0, 1fr); } }
/* Family diagrams (design screen 14) */
.cx-fd { width: 100%; max-width: 560px; height: auto; display: block; margin-top: 8px; }
.cx-fd-ctx { fill: var(--cx-soft); stroke: var(--ink-3); stroke-width: 1; }
.cx-fd-ctx-line { stroke: var(--ink-3); stroke-width: 1; }
.cx-fd-el { stroke: var(--cx-brand-deep); stroke-width: 1.4; fill: none; }
.cx-fd-plate, .cx-fd-conc, .cx-fd-bolt { fill: var(--surface); stroke: var(--cx-brand-deep); stroke-width: 1.6; }
.cx-fd-conc { fill: var(--cx-soft); stroke: var(--ink-3); }
.cx-fd-bolt { stroke-width: 2; }
.cx-fd-grout { fill: var(--cx-line2); }
.cx-fd-mas { fill: var(--cx-soft); stroke: var(--ink-3); }
.cx-fd-course { stroke: var(--cx-line); stroke-width: 1; }
.cx-fd-spread { fill: var(--cx-brand-tint); stroke: var(--cx-brand); stroke-width: 1; stroke-dasharray: 5 4; }
.cx-fd-zone { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1; }
.cx-fd-zone.on { fill: var(--cx-brand-tint); stroke: var(--cx-brand); stroke-width: 2; }
.cx-fd-load { stroke: var(--cx-brand-deep); stroke-width: 1.6; fill: none; }
.cx-fd-loadfill { fill: var(--cx-brand-deep); }
.cx-fd .ok { stroke: var(--cx-brand); stroke-width: 2.4; }
.cx-fd .attn { stroke: var(--cx-attn-ink); stroke-width: 2.4; }
.cx-fd .fail { stroke: var(--cx-bad); stroke-width: 2.4; }
.cx-fd-txt { fill: var(--ink); font-size: 12px; font-family: var(--font-technical); }
.cx-fd-sketch { max-width: 300px; color: var(--cx-brand-deep); }
.cx-fd-txtm { fill: var(--ink-2); font-size: 11px; font-family: var(--font-technical); }
/* Calculate on a touch screen (artboards iPadStructure, iPadLoads): Pencil-sized tools. */
@media (pointer: coarse) {
  .cx-tool { width: 52px; height: 52px; }
  .cx-palette { gap: 6px; padding: 10px; }
  .cx-mrow, .cx-menu-row, .cx-check .cx-link { min-height: 44px; }
}
@media (max-width: 760px) {
  .cx-mhead .cx-actions { flex-wrap: wrap; }
  .cx-bu-layer { grid-template-columns: 1fr 64px auto; }
  .cx-bu-layer .cx-chip { grid-column: 1 / -1; justify-self: start; }
  .cx-irow { grid-template-columns: 1fr auto; }
  .cx-irow > .cx-chip, .cx-irow > .cx-overbtn { grid-column: 2; justify-self: end; }
  .cx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-table td input { width: 64px; }
}

/* ── Files (Karan 06/10/2026: "Track web — Mail and Files") ────────────────
   The standard section layout — figure + eyebrow + line + one primary, tabs,
   chips, then tables — for Files' two tabs: Projects (document control against
   the house numbering rule) and Shared drives. Colours are the semantic layer
   so it follows Grey dark: blue is --link (numbers, selected), green is
   --status-ok-ui, attention is orange. Track never renames, moves or deletes. */
.fx { display: flex; flex-direction: column; gap: 26px; }
.fx-hero { display: flex; align-items: flex-end; gap: 26px; }
.fx-fig { font-size: var(--anchor-lg); font-weight: 500; line-height: 0.86; letter-spacing: -0.045em;
  color: var(--anchor); animation: bm-rise var(--dur-slow) var(--ease-out) both; }
.fx-hero-text { display: flex; flex-direction: column; gap: 5px; padding-bottom: 6px; min-width: 0; flex: 1; }
.fx-eyebrow { font-size: var(--text-caps); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-orange); }
.fx-line { font-size: 15px; color: var(--ink-2); text-wrap: pretty; }
.fx-primary { align-self: flex-end; margin-bottom: 8px; padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--brand-blue); color: var(--brand-white); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center; transition: background var(--dur-fast) var(--ease-out); }
.fx-primary:hover { background: var(--anchor); }
.fx-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--hair); }
.fx-tab { padding: 0 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-3); transition: color var(--dur-fast) var(--ease-out); }
.fx-tab:hover { color: var(--ink); }
.fx-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--link); }
.fx-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--chip-border); background: transparent; color: var(--ink); font: inherit; font-size: 12.5px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.fx-chip[aria-pressed="true"] { background: var(--chip-active-bg); border-color: var(--chip-active-bg); color: var(--chip-active-ink); }
.fx-chip-n { font-family: var(--font-technical); opacity: 0.7; }
.fx-chip-add { color: var(--link); border-style: dashed; }
.fx-chips-note { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.fx-table { display: flex; flex-direction: column; animation: bm-rise var(--dur-slow) var(--ease-out) both; }
.fx-table-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.fx-table-title { font-size: var(--text-h3); font-weight: 500; letter-spacing: -0.02em; }
.fx-table-note { font-size: 12.5px; color: var(--ink-3); }
.fx-note-link { margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--link); }
.fx-cols { display: grid; gap: 14px; align-items: end; padding-bottom: 9px; border-bottom: 1px solid var(--rule-strong);
  font-size: var(--text-table-head); font-weight: 500; letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--ink-3); }
.fx-cols > .r { text-align: right; }
.fx-row { display: grid; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hair);
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.fx-row[data-go] { cursor: pointer; }
.fx-row[data-go]:hover { background: var(--row-hover); }
.fx-row.is-attn { padding-left: 12px; box-shadow: inset 3px 0 0 var(--brand-orange); }
.fx-row.is-dim { opacity: 0.55; }
.fx-group { display: flex; align-items: baseline; gap: 12px; padding: 18px 0 8px; border-bottom: 1px solid var(--hair); }
.fx-group-label { font-size: var(--text-caps); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink);
  background: none; border: 0; padding: 0; font-family: inherit; cursor: default; text-align: left; }
button.fx-group-label { cursor: pointer; }
button.fx-group-label:hover { color: var(--link); }
.fx-group-n { font-family: var(--font-technical); font-size: 11px; color: var(--ink-3); }
.fx-group-total { margin-left: auto; font-family: var(--font-technical); font-size: 12px; color: var(--ink); }
.fx-cell { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: var(--text-body-bm); color: var(--ink); }
.fx-cell.r { justify-content: flex-end; text-align: right; }
.fx-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-wrap { white-space: normal; overflow-wrap: anywhere; }
.fx-sub { font-size: var(--text-meta-sm); color: var(--ink-3); }
.fx-mono { font-family: var(--font-technical); font-size: 12.5px; }
.fx-blue { color: var(--link); }
.fx-ok { color: var(--status-ok-ui); }
.fx-attn { color: var(--brand-orange); }
.fx-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; }
.fx-open { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--text-meta-sm); color: var(--ink-3); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fx-open:hover { color: var(--link); text-decoration: underline; }
.fx-tick { position: relative; width: 16px; height: 16px; flex: none; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--chip-border); background: transparent; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.fx-tick::before { content: ''; position: absolute; inset: -14px; }
.fx-tick[aria-checked="true"] { background: var(--status-ok-ui); border-color: var(--status-ok-ui); }
.fx-tick[aria-checked="true"]::after { content: ''; width: 6px; height: 3px; margin-top: -2px; border: solid var(--surface); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
.fx-tick.is-busy { border-style: dashed; border-color: var(--link); animation: fx-spin 900ms linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
.fx-msg { font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 600px; text-wrap: pretty; }
.fx-foot { padding-top: 14px; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.fx-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--hair); border-radius: 8px; padding: 0 14px; background: var(--surface); margin-bottom: 14px; }
.fx-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 0; font: inherit; font-size: 13px; color: var(--ink); }
.fx-card { background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.fx-card-title { font-size: var(--text-card-title); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
/* The grids, desktop. */
.fx-g-fix { grid-template-columns: 24px minmax(0, 1fr) 96px minmax(120px, 170px); }
.fx-g-fold { grid-template-columns: minmax(0, 1fr) 70px 90px; }
.fx-g-drv { grid-template-columns: minmax(0, 1fr) 80px 120px 90px; }
.fx-g-job { grid-template-columns: 72px minmax(0, 1fr) 70px 90px; }
.fx-g-sub { grid-template-columns: minmax(0, 1fr) 70px 90px; }
/* A folder opened in Track (files-folder.js, 06/10/2026): name, updated, size,
   and doc control inside a numbered project folder. */
.fx-g-ls { grid-template-columns: minmax(0, 1fr) 100px 80px minmax(120px, 170px); }
.fx-g-ls3 { grid-template-columns: minmax(0, 1fr) 100px 80px; }
.fx-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: -6px 0 14px; font-size: 12.5px; color: var(--ink-3); }
.fx-crumb { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--link); }
/* Every row keeps the same 12px gutter, so an orange-edged row lines up. */
.fx-cols.fx-g-ls, .fx-cols.fx-g-ls3, .fx-row.fx-g-ls, .fx-row.fx-g-ls3 { padding-left: 12px; }
.fx-crumb:hover { text-decoration: underline; }
.fx-crumb.is-here { color: var(--ink); cursor: default; }
.fx-crumb.is-here:hover { text-decoration: none; }
.fx-crumb-sep { color: var(--hair-strong); }
.fx-crumb-drive { margin-left: auto; font-size: 12.5px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.fx-crumb-drive:hover { color: var(--link); }
/* Row glyphs: a sheet with lines of text for a file, a tabbed folder for a
   folder — never a plain square, which would read as a tick box. */
.fx-ico { position: relative; width: 11px; height: 14px; flex: none; border: 1.2px solid var(--ink-3); border-radius: 1.5px; color: var(--ink-3); }
.fx-ico:not(.fx-ico-dir)::before { content: ''; position: absolute; left: 2px; right: 2px; top: 3px; height: 1.2px; background: currentColor; box-shadow: 0 3px 0 currentColor, 0 6px 0 currentColor; }
.fx-ico-dir { width: 15px; height: 11px; margin-top: 2px; border-color: var(--link); border-radius: 0 2px 2px 2px; }
.fx-ico-dir::before { content: ''; position: absolute; left: -1.4px; top: -4px; width: 7px; height: 3px; border: 1.4px solid var(--link); border-bottom: 0; border-radius: 2px 2px 0 0; }
@media (max-width: 760px) {
  .fx { gap: 20px; }
  .fx-g-ls { grid-template-columns: minmax(0, 1fr) auto; }
  .fx-g-ls > .fx-c-upd, .fx-g-ls > .fx-c-size { display: none; }
  .fx-g-ls > .fx-c-dc { grid-column: 1 / -1; padding-left: 20px; }
  .fx-g-ls3 { grid-template-columns: minmax(0, 1fr) auto; }
  .fx-g-ls3 > .fx-c-upd { display: none; }
  .fx-crumb, .fx-crumb-sep { min-height: 44px; display: inline-flex; align-items: center; }
  .fx-crumb-drive { margin-left: 0; flex-basis: 100%; min-height: 32px; display: inline-flex; align-items: center; }
  .fx-hero { flex-wrap: wrap; gap: 14px 18px; }
  .fx-fig { font-size: var(--anchor-sm); }
  .fx-hero-text { flex-basis: 60%; }
  .fx-primary { min-height: 44px; margin-bottom: 0; }
  .fx-tab { min-height: 44px; }
  .fx-chip { min-height: 44px; }
  .fx-chips-note { margin-left: 0; flex-basis: 100%; }
  .fx-note-link { min-height: 44px; margin-left: 0; }
  .fx-open { min-height: 32px; }
  .fx-cols { display: none; }
  .fx-row { gap: 4px 12px; min-height: 44px; }
  .fx-g-fix { grid-template-columns: 30px minmax(0, 1fr); }
  .fx-g-fix > .fx-c-folder, .fx-g-fix > .fx-c-reason { grid-column: 2; }
  .fx-g-fold { grid-template-columns: minmax(0, 1fr) auto; }
  .fx-g-fold > .fx-c-upd { display: none; }
  .fx-g-drv { grid-template-columns: minmax(0, 1fr) auto; }
  .fx-g-drv > .fx-c-items, .fx-g-drv > .fx-c-upd { display: none; }
  .fx-g-job { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .fx-g-job > .fx-c-items { display: none; }
  .fx-g-sub { grid-template-columns: minmax(0, 1fr) auto; }
  .fx-g-sub > .fx-c-upd { display: none; }
  .fx-tick::before { inset: -14px -7px; }
}

/* ── Mail v2 (Karan's Mail spec, 06/10/2026) — views/mail.js ─────────────────
   The standard section layout: figure + eyebrow + line + one primary button,
   folder tabs, a pill search, label chips, then a five-column table and the
   Track AI log. Sizes are the design's (Track Polish.dc.html generic screen). */
.mq { display: flex; flex-direction: column; gap: 22px; }
.mq-hero { display: flex; align-items: flex-end; gap: 26px; animation: bm-rise 320ms var(--ease-out) both; }
.mq-fig { font-size: var(--anchor-lg); font-weight: var(--weight-medium); line-height: 0.86; letter-spacing: -0.045em; color: var(--anchor); }
.mq-hero-text { display: flex; flex-direction: column; gap: 5px; padding-bottom: 6px; min-width: 0; }
.mq-primary { appearance: none; border: 0; cursor: pointer; font-family: inherit; align-self: flex-end; margin-bottom: 8px;
  padding: 8px 16px; min-height: 36px; background: var(--chip-active-bg); color: var(--chip-active-ink); border-radius: 999px;
  font-size: 13px; font-weight: var(--weight-medium); flex: none; }
.mq-primary:hover { filter: brightness(1.08); }
.mq-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--hair); overflow-x: auto; scrollbar-width: none; }
.mq-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  font-family: inherit; padding: 0 0 12px; font-size: 13.5px; font-weight: var(--weight-medium); color: var(--ink-3);
  display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: color 120ms var(--ease-out); }
.mq-tab:hover { color: var(--ink); }
.mq-tab.is-on { color: var(--ink); border-bottom-color: var(--link); }
.mq-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-orange); }
.mq-search { display: flex; align-items: center; gap: 12px; max-width: 560px; }
.mq-search input { flex: 1; min-width: 0; min-height: 40px; border: 1px solid var(--chip-border); border-radius: 999px; padding: 0 18px;
  font-family: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink); }
.mq-search input:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.mq-link { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: 12.5px; color: var(--link); }
.mq-link:hover { text-decoration: underline; }
.mq-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mq-chip { appearance: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--chip-border); background: transparent; color: var(--ink);
  transition: background 120ms var(--ease-out), color 120ms var(--ease-out), transform 100ms var(--ease-out); }
.mq-chip:active { transform: scale(0.96); }
.mq-chip.is-on { background: var(--chip-active-bg); border-color: var(--chip-active-bg); color: var(--chip-active-ink); }
.mq-chip-n { font-family: var(--font-technical); font-size: 10.5px; opacity: 0.7; }
.mq-table, .mq-log { display: flex; flex-direction: column; }
.mq-table-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.mq-table-title > span:first-child { font-size: var(--text-h3); font-weight: var(--weight-medium); letter-spacing: -0.02em; }
.mq-table-note { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.mq-grid { display: grid; grid-template-columns: 40px 64px minmax(120px, 1fr) minmax(0, 2fr) minmax(0, 112px) 52px; gap: 14px; align-items: center; }
.mq-head { padding: 0 0 9px 12px; border-bottom: 1px solid var(--rule-head); font-size: 9.5px; font-weight: var(--weight-medium);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); align-items: end; }
.mq-row { position: relative; padding: 11px 0 11px 12px; border-bottom: 1px solid var(--hair);
  transition: background 120ms var(--ease-out), opacity 200ms var(--ease-out), transform 160ms var(--ease-out); }
.mq-row.is-action { cursor: pointer; }
.mq-row.is-action:hover { background: var(--row-hover); transform: translateX(2px); }
.mq-row.is-attn { box-shadow: inset 3px 0 0 var(--brand-orange); }
.mq-row:focus-visible, .mq-log-row:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.mq-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mq-c-when { align-items: flex-end; text-align: right; }
.mq-sub { font-size: 11.5px; color: var(--ink-3); }
.mq-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-wrap { white-space: normal; line-height: 1.4; }
.mq-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; }
.mq-more { position: absolute; right: -34px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 6px;
  appearance: none; border: 0; background: none; color: var(--ink-3); font-size: 15px; cursor: pointer; opacity: 0; }
.mq-row:hover .mq-more, .mq-more:focus-visible { opacity: 1; }
.mq-more:hover { color: var(--link); background: var(--nav-hover); }
.mq-group { display: flex; align-items: baseline; gap: 12px; padding: 18px 0 8px; border-bottom: 1px solid var(--hair); }
.mq-group-label { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.mq-group-n { font-family: var(--font-technical); font-size: 11px; color: var(--ink-3); }
.mq-group-folders { font-size: 11.5px; color: var(--ink-3); }
.mq-empty { padding: 22px 0; font-size: 13.5px; color: var(--ink-3); border-bottom: 1px solid var(--hair); line-height: 1.5; }
.mq-foot { display: flex; align-items: center; gap: 16px; padding-top: 14px; }
.mq-foot-copy { padding-top: 12px; font-size: 12px; color: var(--ink-3); line-height: 1.5; max-width: 90ch; }
.mq-log-grid, .mq-log-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) 60px; gap: 14px; }
.mq-log-row { align-items: start; padding: 11px 0 11px 12px; border-bottom: 1px solid var(--hair); cursor: pointer;
  transition: background 120ms var(--ease-out), opacity 200ms var(--ease-out); }
.mq-log-row:hover { background: var(--row-hover); }
.mq-log-row.is-undone { opacity: 0.55; }
.mq-log-undo { text-align: right; font-size: 12.5px; color: var(--link); }
@media (hover: none) { .mq-more { opacity: 1; } }
@media (max-width: 1100px) { .mq-more { right: 0; top: 10px; transform: none; } .mq-row { padding-right: 30px; } }
@media (max-width: 760px) {
  .mq-hero { flex-wrap: wrap; gap: 14px; }
  .mq-fig { font-size: var(--anchor-sm); }
  .mq-primary, .mq-chip, .mq-tab, .mq-link { min-height: 44px; }
  .mq-tabs { gap: 20px; }
  .mq-tab { padding-bottom: 8px; }
  .mq-table-note { margin-left: 0; flex-basis: 100%; }
  .mq-grid { grid-template-columns: 56px minmax(0, 1fr) 48px; column-gap: 10px; row-gap: 4px;
    grid-template-areas: "job from when" "job subj when" "job ai when"; }
  .mq-head { grid-template-areas: "job from when"; }
  .mq-head .mq-c-subj, .mq-head .mq-c-ai { display: none; }
  .mq-c-job { grid-area: job; align-self: start; }
  .mq-c-from { grid-area: from; }
  .mq-c-subj { grid-area: subj; }
  .mq-c-ai { grid-area: ai; }
  .mq-c-ai.is-empty { display: none; }
  .mq-c-when { grid-area: when; align-self: start; }
  .mq-row { min-height: 44px; }
  .mq-more { width: 44px; height: 44px; right: -8px; top: auto; bottom: 0; }
  .mq-log-grid { display: none; }
  .mq-log-row { grid-template-columns: minmax(0, 1fr) 52px; }
  .mq-log-row > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .mq-log-row > :nth-child(3) { grid-column: 2; grid-row: 1; }
}

/* Compose: the person's Gmail signature, shown on white as the recipient sees it (07/10/2026). */
.cmp-sig-paper { background: var(--brand-white); color: var(--brand-navy); border: 1px solid var(--hair); border-radius: 8px;
  padding: 12px 14px; font-size: 13px; line-height: 1.45; max-height: 240px; overflow: auto; }
.cmp-sig-paper img { max-width: 100%; height: auto; }

/* The per-route host every screen renders into (app.js selectView, 07/10/2026).
   Invisible to layout: its children lay out exactly as if they sat in #view. */
.view-host { display: contents; }

/* ── PROJECT DETAIL (Karan's "Track Mail - Project Detail" design, 07/10/2026) ──
   views/project-detail.js + project-detail-parts.js. Semantic tokens only, so
   light and Grey dark both read; every touch target reaches 44px on a phone. */
.pdx-flex { flex: 1; }
.pdx-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.pdx-eyebrow { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pdx-eyebrow.is-link { color: var(--link); }
.pdx-eyebrow.is-attn { color: var(--brand-orange); }
.pdx-linkbtn { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-sans);
  font-size: 12.5px; font-weight: var(--weight-medium); color: var(--link); text-align: left; }
.pdx-note { font-size: 12px; line-height: 1.55; color: var(--ink-3); }

.pdx-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 24px; }
.pdx-head-l { min-width: 0; flex: 1 1 480px; display: flex; align-items: flex-end; flex-wrap: wrap; gap: clamp(18px, 2vw, 28px); }
.pdx-no { margin: 0; font-size: var(--anchor-lg); font-weight: var(--weight-medium); letter-spacing: -0.05em; line-height: 0.78;
  color: var(--anchor); animation: bm-rise 320ms var(--ease-out) both; }
.pdx-head-text { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pdx-client { font-size: var(--text-h1); font-weight: var(--weight-medium); letter-spacing: -0.03em; line-height: 0.95; color: var(--ink); }
.pdx-sub { font-size: 13.5px; line-height: 1.2; color: var(--ink-2); }
.pdx-sep { color: var(--ink-3); margin: 0 9px; }
.pdx-title { font-size: 13px; line-height: 1.4; color: var(--ink-3); max-width: 62ch; }
.pdx-head-r { flex: none; display: flex; align-items: center; gap: 12px; padding-bottom: 4px; flex-wrap: wrap; }
.pdx-lead { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); }
.pdx-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--anchor); color: var(--ink-fill-ink);
  font-size: 10px; font-weight: var(--weight-medium); display: inline-flex; align-items: center; justify-content: center; }
.pdx-status-ro { border: 1px solid var(--link); border-radius: var(--radius-pill); padding: 6px 16px; font-size: 13px; }
.pdx-round { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--link); background: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); font-size: 16px; line-height: 1; padding: 0; }
.pdx-round:hover { background: var(--tint-blue); }
.pdx-round-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand-orange); border: 1.5px solid var(--ground); }
.pdx-menu { position: absolute; z-index: 400; width: 240px; background: var(--sheet-lift); border: 1px solid var(--hair); border-radius: 12px;
  box-shadow: var(--shadow-float); padding: 6px; display: flex; flex-direction: column; }
.pdx-menu button { appearance: none; background: none; border: 0; text-align: left; padding: 10px 12px; border-radius: 8px; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink); min-height: 40px; }
.pdx-menu button:hover, .pdx-menu button:focus-visible { background: var(--row-hover); outline: none; }

.pdx-status { border-radius: 18px; background: var(--brief-bg); padding: 28px clamp(20px, 2.4vw, 32px) 26px; }
.pdx-status-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.pdx-status-count { font-size: 13.5px; color: var(--ink-2); }
.pdx-status-basis { font-size: 12.5px; color: var(--ink-3); }
.pdx-status-phrase { font-size: 13.5px; }
.pdx-chain { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); row-gap: 22px; }
.pdx-chain > div { padding-right: 12px; }
.pdx-figs { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); row-gap: 24px; }
.pdx-fig { min-width: 0; padding-left: 24px; border-left: 1px solid var(--hair); display: flex; flex-direction: column; gap: 9px; }
.pdx-fig-val { font-size: var(--figure); font-weight: var(--weight-medium); letter-spacing: -0.035em; line-height: 1; }
.pdx-fig-of { font-size: 13.5px; font-weight: 400; color: var(--ink-3); margin-left: 7px; }
.pdx-fig-sub { font-size: 12.5px; min-height: 18px; }
.pdx-attn { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair); display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.pdx-attn-text { font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; flex: 1 1 320px; }

.pdx-pill { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--hair); background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 13.5px;
  font-weight: var(--weight-medium); cursor: pointer; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.pdx-pill:hover { border-color: var(--link); color: var(--link); }
.pdx-pill.is-primary { background: var(--chip-active-bg); border-color: var(--chip-active-bg); color: var(--chip-active-ink); }
.pdx-pill.is-primary:hover { color: var(--chip-active-ink); filter: brightness(1.08); }
.pdx-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pdx-access { font-size: 11.5px; font-weight: var(--weight-medium); letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }

.pdx-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; border-bottom: 1px solid var(--hair); }
.pdx-tab { appearance: none; background: none; border: 0; padding: 0 2px 13px; margin-bottom: -1px; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: var(--weight-medium); color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; }
.pdx-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.pdx-tab-n { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.pdx-tab-n:empty { display: none; }

.pdx-ov { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.pdx-ov-l { flex: 1 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.pdx-ov-r { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.pdx-sec { display: flex; flex-direction: column; gap: 14px; }
.pdx-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pdx-sec-note { font-size: 12.5px; color: var(--ink-3); }

.pdx-stack { position: relative; margin-bottom: calc(var(--layers, 0) * 8px); }
.pdx-stack-back { position: absolute; left: calc(var(--k) * 10px); right: calc(var(--k) * 10px); top: calc(var(--k) * 8px); height: 100%;
  border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); z-index: calc(4 - var(--k)); }
.pdx-instr { position: relative; z-index: 5; border: 1px solid var(--hair); border-radius: 16px; background: var(--surface);
  padding: 24px 28px 22px; display: flex; gap: 24px; }
.pdx-instr.is-cycle { cursor: pointer; }
.pdx-instr.is-cycle:hover { border-color: var(--link); }
.pdx-instr-num { flex: none; width: 52px; display: flex; flex-direction: column; gap: 10px; }
.pdx-numeral { font-size: var(--figure); font-weight: var(--weight-medium); letter-spacing: -0.05em; line-height: 0.78; color: var(--ink-3); }
.pdx-counter { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pdx-instr-body { flex: 1; min-width: 0; }
.pdx-instr-top { display: flex; align-items: flex-start; gap: 20px; }
.pdx-instr-text { flex: 1; font-size: 16.5px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.pdx-instr-status { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding-top: 3px; }
.pdx-instr-meta { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.pdx-stages { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; }
.pdx-stage { min-width: 0; display: flex; flex-direction: column; }
.pdx-stage-bar { height: 5px; border-radius: 3px; }
.pdx-stage-label { margin-top: 11px; font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; }
.pdx-stage-note { margin-top: 6px; font-size: 12.5px; }

.pdx-summary { font-size: var(--text-h3); line-height: 1.55; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; max-width: 56ch; }
.pdx-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.pdx-chips:empty { display: none; }
.pdx-chip { height: 34px; display: inline-flex; align-items: center; gap: 9px; padding: 0 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--hair); background: none; color: var(--ink); font-family: var(--font-sans); font-size: 12.5px; font-weight: var(--weight-medium); cursor: pointer; }
.pdx-chip:hover { border-color: var(--brand-orange); color: var(--brand-orange); }

.pdx-acts { display: flex; flex-direction: column; }
.pdx-act { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hair-soft); }
.pdx-act .pdx-dot { margin-top: 6px; }
.pdx-act-text { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); }
.pdx-act-when { flex: none; font-size: 12px; color: var(--ink-3); }

.pdx-dc { border: 1px solid var(--hair); border-radius: 14px; padding: 16px 18px; cursor: pointer; }
.pdx-dc-head { display: flex; align-items: center; gap: 11px; }
.pdx-dc-verdict { font-size: 13.5px; font-weight: var(--weight-medium); }
.pdx-chev { font-size: 11px; color: var(--ink-3); }
.pdx-dc-line { margin-top: 12px; font-size: 13.5px; color: var(--ink); }
.pdx-dc-conv { margin-top: 9px; font-family: var(--font-technical); font-size: 12px; color: var(--ink-3); }
.pdx-dc-open { margin-top: -18px; border-radius: 12px; background: var(--brief-bg); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.pdx-dc-open[hidden] { display: none; }
.pdx-fix { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.pdx-fix .pdx-dot { margin-top: 6px; }
.pdx-fix-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pdx-fix-name { font-size: 12.5px; color: var(--ink); word-break: break-all; }
.pdx-fix-why { font-size: 12px; color: var(--brand-orange); word-break: break-word; }
.pdx-dc-reg { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--hair); }

.pdx-links, .pdx-files { display: flex; flex-direction: column; }
.pdx-link { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); }
.pdx-link.is-link { cursor: pointer; }
.pdx-link.is-link:hover { background: var(--row-hover); }
.pdx-link-kind { width: 96px; flex: none; font-size: 11px; font-weight: var(--weight-medium); letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
.pdx-link-val { flex: 1; min-width: 0; font-size: 13.5px; }
.pdx-link-meta { font-size: 12px; color: var(--ink-3); }
.pdx-file { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); cursor: pointer; }
.pdx-file:hover { background: var(--row-hover); }
.pdx-file-name { flex: 1; min-width: 0; font-size: 13.5px; }
.pdx-file-n { font-size: 12px; color: var(--ink-3); }

.pdx-ftable { display: flex; flex-direction: column; }
.pdx-frow { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px 140px; gap: 12px; align-items: center; padding: 14px 0;
  border-bottom: 1px solid var(--hair-soft); font-size: 13.5px; cursor: pointer; }
.pdx-frow:not(.pdx-fhead):hover { background: var(--row-hover); }
.pdx-fhead { cursor: default; padding: 0 0 12px; border-bottom: 1px solid var(--hair); font-size: 11px; font-weight: var(--weight-medium);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pdx-fname { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdx-fupd { color: var(--ink-2); }
.pdx-fdc { display: flex; align-items: center; gap: 8px; }
.pdx-folder-host { padding: 0 22px 22px; }

@media (max-width: 760px) {
  .pdx-no { font-size: var(--anchor-md); }
  .pdx-head-l { flex-basis: 100%; }
  .pdx-round { width: 44px; height: 44px; }
  .pdx-lead, .pdx-linkbtn { min-height: 44px; }
  .pdx-pill, .pdx-chip, .pdx-tab { min-height: 44px; }
  .pdx-tabs { gap: 18px; overflow-x: auto; flex-wrap: nowrap; }
  .pdx-access { display: none; }
  .pdx-instr { padding: 18px 16px; gap: 14px; }
  .pdx-instr-num { width: 36px; }
  .pdx-numeral { font-size: var(--figure-xs); }
  .pdx-client { font-size: var(--text-h1-phone); }
  .pdx-instr-top { flex-direction: column; gap: 8px; }
  .pdx-summary { font-size: 17px; }
  .pdx-link, .pdx-file, .pdx-act { min-height: 44px; }
  .pdx-frow { grid-template-columns: minmax(0, 1fr) 54px 110px; min-height: 44px; }
  .pdx-frow > .pdx-fupd { display: none; }
  .pdx-fig { padding-left: 14px; }
  .pdx-fig-val { font-size: var(--figure-xs); }
  .pdx-stack-back { display: none; }
  .pdx-stack { margin-bottom: 0; }
}

/* ── SITE CONSTRAINTS (design hand-off "Site checks", 15/10/2026) ─────────────
   The project page block (views/project-detail-parts.js siteCheckHtml /
   siteFlagsHtml, wired by views/site-checks-card.js) — the same build as
   Document control — and the detail panel body (views/site-checks-detail.js).
   Severity marks, location badges and source chips are .site-mk / .site-loc /
   .site-chip below. Tokens only; green is reserved for nothing here. */
.scb-host { display: flex; flex-direction: column; scroll-margin-top: 24px; }
.scb-block { cursor: pointer; }
.scb-block.is-static { cursor: default; }
.scb-toggle { appearance: none; background: none; border: 0; padding: 0; margin: 0; width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.scb-toggle:focus-visible, .scb-flag-open:focus-visible, .scb-more:focus-visible, .scb-tab:focus-visible, .scb-mast:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }
.scb-dim { opacity: 0.4; }
.scb-sk { width: 72%; height: 14px; }
.scb-spin { width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--tint-blue-2); border-top-color: var(--link); flex: none; animation: scb-spin 900ms linear infinite; }
@keyframes scb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scb-spin { animation: none; } }
.scb-pills { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.scb-conv-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scb-inline { font-size: 12px; font-family: var(--font-sans); }
.scb-open { padding-top: 26px; gap: 0; }
.scb-flag { align-items: flex-start; }
.scb-flag > .site-mk { margin-top: 4px; }
.scb-flag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.scb-flag-open { appearance: none; background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.scb-flag-open:disabled { cursor: default; }
.scb-flag-open:not(:disabled):hover .pdx-fix-name { color: var(--link); }
.scb-flag .pdx-fix-name { font-size: 13.5px; font-weight: var(--weight-medium); word-break: normal; overflow-wrap: anywhere; }
.scb-flag .scb-why { color: var(--ink-2); line-height: 1.5; }
.scb-more { width: 28px; height: 28px; flex: none; border: 0; background: none; border-radius: 8px; color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1; }
.scb-more:hover { background: var(--row-hover); }
.scb-retry { flex: none; font-size: 12.5px; }
.scb-after { display: flex; flex-direction: column; gap: 4px; }
.scb-done { font-size: 11.5px; color: var(--link); }
.scb-fnote { font-size: 11.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.scb-fnote b { font-weight: var(--weight-medium); }
.scb-note-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.scb-note-in { flex: 1 1 180px; min-width: 0; height: 34px; box-sizing: border-box; border: 1px solid var(--hair-strong); border-radius: 8px; padding: 0 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.scb-note-form .pdx-pill { height: 34px; padding: 0 14px; }
.scb-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 2px; }
.scb-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--hair); }
.scb-foot-note { margin-left: auto; }
.scb-mast { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.scb-mast:hover { color: var(--link); }
.scb-site-val { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scb-addr { color: var(--link); font-size: 13.5px; text-align: left; }
.scb-site-extra { display: inline-flex; align-items: center; gap: 10px; }
.scb-site-extra:empty { display: none; }
.pdx-menu button[disabled] { color: var(--ink-3); cursor: not-allowed; }
.scb-menu button { display: flex; align-items: center; gap: 10px; }

/* The detail panel (openPanel, view mode). */
.tf-body.scb-d-body { padding-top: 0; }
.scb-tabs { position: sticky; top: 0; z-index: 1; display: flex; gap: 4px; overflow-x: auto; background: var(--surface); border-bottom: 1px solid var(--hair); margin: 0 -30px; padding: 0 22px; }
.scb-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 8px; font: inherit; font-size: 13px; font-weight: var(--weight-medium); color: var(--ink-3); white-space: nowrap; cursor: pointer; }
.scb-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.scb-d-note { margin-top: 18px; padding: 12px 14px; background: var(--nav-hover); border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: var(--anchor); }
.scb-d-apx { margin-top: 16px; width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; min-height: 44px; border: 1px dashed var(--brand-orange); border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.scb-d-apx b { color: var(--link); font-weight: var(--weight-medium); }
.scb-d-sec { padding: 26px 0; border-bottom: 1px solid var(--hair-soft); display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 48px; }
.scb-d-head { display: flex; align-items: center; gap: 10px; }
.scb-d-ico { color: var(--anchor); display: inline-flex; }
.scb-d-sev { display: inline-flex; align-items: center; gap: 6px; }
.scb-d-val-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.scb-d-val { font-size: var(--figure-xs); font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1.05; color: var(--anchor); overflow-wrap: anywhere; }
.scb-d-val.is-short { font-size: var(--figure-site); line-height: 1; }
.scb-d-sub { font-size: 14px; color: var(--ink); }
.scb-d-mean { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.scb-kv { margin: 0; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 5px 14px; font-size: 13px; }
.scb-kv dt { color: var(--ink-3); }
.scb-kv dd { margin: 0; font-family: var(--font-technical); font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; }
.scb-rows { display: flex; flex-direction: column; border-top: 1px solid var(--hair-soft); }
.scb-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hair-soft); font-size: 13.5px; align-items: baseline; }
.scb-row-k { color: var(--ink-3); }
.scb-row-v { color: var(--ink); overflow-wrap: anywhere; }
.scb-group { display: flex; flex-direction: column; }
.scb-group .scb-row { grid-template-columns: minmax(0, 1fr) auto; }
.scb-none { color: var(--ink-3); font-family: var(--font-sans); }
.scb-code { font-family: var(--font-technical); font-size: 12px; color: var(--ink-3); }
.scb-cap { font-size: 10.5px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.scb-attr { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.scb-d-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.scb-d-link { flex: none; font-size: 12.5px; color: var(--link); text-decoration: none; }
.scb-d-link:hover { text-decoration: underline; }
.scb-hist-list { display: flex; flex-direction: column; }
.scb-hist { display: grid; grid-template-columns: 100px auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); font-size: 13.5px; }
.scb-hist .site-loc { justify-self: start; }
.scb-d-prev { border-bottom: 0; }
.scb-foot-pill { flex: none; white-space: nowrap; }

/* Below 900 px the right column falls under Activity, so the block leads the
   Overview instead (README §1 "Narrow screens"): the right column's children
   join the overview's own flow and the block takes order -1. */
@media (max-width: 900px) {
  .pdx-ov { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 28px; }
  .pdx-ov > .pdx-ov-l { flex: none; width: 100%; }
  .pdx-ov-r { display: contents; }
  .pdx-ov-r > * { order: 1; }
  .pdx-ov-r > .scb-host { order: -1; }
}
@media (max-width: 760px) {
  .scb-more { width: 44px; height: 44px; }
  .scb-toggle, .scb-flag-open, .scb-inline, .scb-retry, .scb-tab, .scb-d-link, .scb-mast { min-height: 44px; }
  .scb-flag-open { display: flex; flex-direction: column; justify-content: center; }
  .scb-d-link, .scb-mast { display: inline-flex; align-items: center; }
  .scb-note-in, .scb-note-form .pdx-pill { height: 44px; }
  .scb-chips .site-chip, .scb-menu button { min-height: 44px; }
  .scb-kv { grid-template-columns: 120px minmax(0, 1fr); }
  .scb-row { grid-template-columns: 1fr; gap: 2px; }
  .scb-d-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .scb-hist { grid-template-columns: 90px minmax(0, 1fr); }
  .scb-hist .scb-hist-what { grid-column: 1 / -1; }
}

/* ── Mail, the full client (Karan's "Track Mail - Project Detail" design, 3a on
   the chosen 2b split reader, 07/10/2026) — views/mail.js, mail-split.js and
   mail-rules-page.js. Rail · list · reader · Track AI. Semantic tokens only. */
.mx { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 30px; align-items: start; }
.mx-rail { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; min-height: calc(100vh - 140px); }
.mx-rail-spacer { flex: 1; }
.mx-new { appearance: none; border: 0; cursor: pointer; font-family: inherit; min-height: 38px; border-radius: 9px;
  background: var(--chip-active-bg); color: var(--chip-active-ink); font-size: 13px; font-weight: var(--weight-medium); }
.mx-new:hover { filter: brightness(1.08); }
.mx-folders { display: flex; flex-direction: column; gap: 2px; }
.mx-folder { appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; min-height: 32px; padding: 0 10px; border-radius: 7px; font-size: 13px; color: var(--ink-2); text-align: left; }
.mx-folder:hover { background: var(--nav-hover); color: var(--ink); }
.mx-folder.is-on { background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: var(--weight-medium); }
.mx-count { font-family: var(--font-technical); font-size: 11px; color: var(--ink-3); }
.mx-folder.is-on .mx-count { color: var(--nav-active-ink); }
.mx-rail-sec { display: flex; flex-direction: column; gap: 2px; }
.mx-eyebrow { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 0 10px 6px; }
.mx-proj { appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 1px;
  padding: 6px 10px; border-radius: 7px; text-align: left; color: var(--ink-2); min-width: 0; }
.mx-proj:hover { background: var(--nav-hover); color: var(--ink); }
.mx-proj.is-on { background: var(--nav-active-bg); color: var(--nav-active-ink); }
.mx-proj-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
.mx-proj-top > .mq-ell { flex: 1; }
.mx-proj-sub { font-size: 11px; color: var(--ink-3); }
.mx-find { position: relative; margin-top: 8px; }
.mx-find input { width: 100%; box-sizing: border-box; min-height: 34px; border: 1px solid var(--chip-border); border-radius: 8px; padding: 0 10px;
  font: inherit; font-size: 12.5px; background: var(--surface); color: var(--ink); }
.mx-find input:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.mx-find-res { display: flex; flex-direction: column; }
.mx-find-pick { appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left; padding: 6px 10px;
  font-size: 12.5px; color: var(--ink-2); border-radius: 6px; }
.mx-find-pick:hover { background: var(--nav-hover); color: var(--ink); }
.mx-rail-foot { font-size: 12px; color: var(--ink-3); padding: 0 10px; }
.mx-main { min-width: 0; }

/* Row tools: tick, star; the open-able row; the project cell files. */
.mq-row > .mq-c-tools, .mq-head > .mq-c-tools { flex-direction: row; align-items: center; gap: 7px; }
.mx-tick { width: 15px; height: 15px; margin: 0; accent-color: var(--link); cursor: pointer; }
.mx-star { appearance: none; border: 0; background: none; cursor: pointer; padding: 0; font-size: 14px; line-height: 1; color: var(--hair-strong); }
.mx-star:hover { color: var(--ink-3); }
.mx-star.is-on { color: var(--brand-orange); }
.mq-row.is-open-able { cursor: pointer; }
.mq-row.is-open-able:hover { background: var(--row-hover); }
.mq-row.is-sel { background: var(--tint-blue); }
.mq-c-job.is-action { cursor: pointer; }
.mq-c-job.is-action:hover > span:first-child { text-decoration: underline; }
.mx-bulk { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; margin-bottom: 8px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--hair); box-shadow: var(--shadow-float); }
.mx-tool { appearance: none; cursor: pointer; font-family: inherit; font-size: 12.5px; min-height: 30px; padding: 0 11px; border-radius: 7px;
  border: 1px solid var(--chip-border); background: transparent; color: var(--ink); }
.mx-tool:hover { border-color: var(--link); color: var(--link); }
.mx-icon { appearance: none; border: 0; background: none; cursor: pointer; font-size: 17px; line-height: 1; width: 30px; height: 30px; border-radius: 7px; color: var(--ink-3); }
.mx-icon:hover { background: var(--nav-hover); color: var(--ink); }

/* 2b: the list narrows to a column, the reader fills the rest. */
.mx-split { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); border: 1px solid var(--hair); border-radius: 14px;
  overflow: hidden; background: var(--surface); min-height: calc(100vh - 170px); }
.mx-list { border-right: 1px solid var(--hair); display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 170px); }
.mx-list-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 12px; border-bottom: 1px solid var(--hair); }
.mx-list-head input { margin-left: auto; min-width: 0; width: 46%; min-height: 30px; border: 1px solid var(--chip-border); border-radius: 8px; padding: 0 10px;
  font: inherit; font-size: 12.5px; background: transparent; color: var(--ink); }
.mx-list-head input:focus { outline: none; border-color: var(--link); }
.mx-list-rows { overflow-y: auto; flex: 1; }
.mx-crow { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px 12px; border-bottom: 1px solid var(--hair); cursor: pointer; min-width: 0; }
.mx-crow:hover { background: var(--row-hover); }
.mx-crow.is-open { background: var(--nav-active-bg); }
.mx-crow.is-attn { box-shadow: inset 3px 0 0 var(--brand-orange); }
.mx-crow:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.mx-crow-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mx-crow-when { font-family: var(--font-technical); font-size: 11px; color: var(--ink-3); }
.mx-reader-slot { min-width: 0; }
.mx-reader { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.mx-r-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.mx-chip-job { appearance: none; cursor: pointer; font-family: var(--font-technical); font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--chip-border); background: transparent; color: var(--link); }
.mx-r-cols { display: grid; grid-template-columns: minmax(0, 1fr) 248px; flex: 1; min-height: 0; }
.mx-r-main { padding: 22px 26px 26px; overflow-y: auto; max-height: calc(100vh - 230px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mx-r-thread { display: flex; flex-direction: column; gap: 14px; }
.mx-r-subj { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1.25; }
.mx-r-fold { appearance: none; border: 1px solid var(--hair); background: none; cursor: pointer; font-family: inherit; display: flex; align-items: center;
  gap: 10px; padding: 9px 12px; border-radius: 10px; text-align: left; color: var(--ink); min-width: 0; }
.mx-r-fold:hover { background: var(--row-hover); }
.mx-r-msg { display: flex; flex-direction: column; gap: 14px; }
.mx-r-from { display: flex; align-items: flex-start; gap: 12px; }
.mx-avatar { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--avatar-bg);
  color: var(--link); font-size: 10.5px; font-weight: var(--weight-medium); }
.mx-avatar.is-lg { width: 36px; height: 36px; font-size: 12px; }
.mx-r-frame { width: 100%; min-height: 80px; border: 1px solid var(--hair); border-radius: 10px; background: var(--brand-white); display: block; }
.mx-r-text { font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; text-wrap: pretty; }
.mx-r-files { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mx-file { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 9px; font-size: 12.5px; max-width: 100%; }
.mx-r-replybar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mx-r-replyin { appearance: none; flex: 1; min-width: 200px; text-align: left; cursor: text; font-family: inherit; font-size: 13px; color: var(--ink-3);
  min-height: 40px; padding: 0 14px; border: 1px solid var(--chip-border); border-radius: 10px; background: transparent; }
.mx-r-replyin:hover { border-color: var(--link); }
.mx-r-compose { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; }
.mx-r-compose:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.mx-r-field { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--hair); padding-bottom: 8px; }
.mx-r-field input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); min-height: 28px; }
.mx-r-field input:focus { outline: none; }
.mx-r-editor { min-height: 110px; font-size: 14px; line-height: 1.6; color: var(--ink); outline: none; }
.mx-r-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mx-r-note { font-size: 12px; }
.mx-r-ai { border-left: 1px solid var(--hair); padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; max-height: calc(100vh - 230px); }
.mx-ai-sec { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.mx-ai-label { font-size: 11px; color: var(--ink-3); }
.mx-ai-draft { color: var(--ink-2); white-space: pre-wrap; }
.mx-ai-use { appearance: none; cursor: pointer; font-family: inherit; font-size: 12.5px; min-height: 34px; border-radius: 8px; border: 1px solid var(--link);
  background: transparent; color: var(--link); margin-top: 4px; }
.mx-ai-use:hover { background: var(--tint-blue); }
.mx-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 300;
  background: var(--ink-fill); color: var(--ink-fill-ink); padding: 10px 16px; border-radius: 10px; font-size: 13px; max-width: calc(100vw - 32px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.mx-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mx-toast .mq-link { color: inherit; text-decoration: underline; }

/* Mail rules (Settings › Mail rules). */
.mr { display: flex; flex-direction: column; gap: 22px; }
.mr-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mr-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.mr-card { display: flex; flex-direction: column; min-width: 0; }
.mr-row { display: grid; grid-template-columns: 34px minmax(110px, 0.8fr) minmax(0, 1.2fr) minmax(0, 1.3fr) 62px 74px; gap: 14px; align-items: center;
  padding: 12px 0 12px 4px; border-bottom: 1px solid var(--hair); position: relative; }
.mr-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mr-headrow { padding: 0 0 9px 4px; border-bottom: 1px solid var(--rule-head); font-size: 9.5px; font-weight: var(--weight-medium); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); }
.mr-row.is-off { opacity: 0.55; }
.mr-n { font-family: var(--font-technical); font-size: 12px; color: var(--ink-3); }
.mr-when { font-size: 12.5px; color: var(--ink-2); }
.mr-row > .mr-matched { font-family: var(--font-technical); font-size: 12.5px; align-items: flex-end; }
.mr-row > .mr-ctl { flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; }
.mr-switch { appearance: none; border: 0; cursor: pointer; width: 34px; height: 20px; border-radius: 999px; background: var(--hair-strong); position: relative;
  padding: 0; transition: background var(--dur-fast) var(--ease-out); }
.mr-switch span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-white);
  transition: left var(--dur-fast) var(--ease-out); }
.mr-switch.is-on { background: var(--link); }
.mr-switch.is-on span { left: 17px; }
.mr-switch:disabled { cursor: default; }
.mr-switch:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.mr-row .mr-more { position: static; transform: none; opacity: 1; }
.mr-more-gap { width: 28px; flex: none; }
.mr-foot { display: flex; align-items: center; gap: 16px; padding-top: 14px; flex-wrap: wrap; }
.mr-add { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.mr-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mr-f { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--ink-3); position: relative; }
.mr-f input, .mr-f select { min-height: 36px; border: 1px solid var(--chip-border); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13px;
  background: var(--surface); color: var(--ink); }
.mr-f input:focus, .mr-f select:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.mr-suggest { display: flex; flex-direction: column; }
.mr-pick { appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left; font-size: 12.5px; padding: 6px 8px;
  border-radius: 6px; color: var(--ink-2); }
.mr-pick:hover { background: var(--nav-hover); color: var(--ink); }
.mr-test { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface);
  position: sticky; top: 16px; }
.mr-test-in { min-height: 40px; border: 1px solid var(--chip-border); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 13px; background: transparent; color: var(--ink); }
.mr-test-in:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.mr-trace { display: flex; flex-direction: column; border-top: 1px solid var(--rule-head); }
.mr-trace-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--hair); }

@media (max-width: 1280px) {
  .mx-r-cols { grid-template-columns: minmax(0, 1fr); }
  .mx-r-ai { border-left: 0; border-top: 1px solid var(--hair); max-height: none; }
  .mx-r-main { max-height: none; }
}
@media (max-width: 1100px) {
  .mx { grid-template-columns: 170px minmax(0, 1fr); gap: 20px; }
  .mr-cols { grid-template-columns: minmax(0, 1fr); }
  .mr-test { position: static; }
}
@media (max-width: 760px) {
  .mx { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mx-rail { position: static; min-height: 0; flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; align-items: center; }
  .mx-rail-sec, .mx-rail-spacer { display: none; }
  .mx-rail-foot { white-space: nowrap; }
  .mx-folders { flex-direction: row; gap: 4px; }
  .mx-folder, .mx-new, .mx-tool, .mx-find-pick, .mx-r-replyin, .mx-ai-use, .mx-chip-job { min-height: 44px; white-space: nowrap; }
  .mx-new { padding: 0 14px; }
  .mq-row > .mq-c-tools, .mq-head > .mq-c-tools { display: none; }
  .mx-split { grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 0; min-height: 0; background: transparent; }
  .mx.is-reading .mx-list { display: none; }
  .mx-list { border-right: 0; max-height: none; }
  .mx-r-main { padding: 16px 0; }
  .mx-r-bar { padding: 8px 0; }
  .mx-r-ai { padding: 16px 0; }
  .mx-icon, .mx-star { min-width: 44px; min-height: 44px; }
  .mr-row { grid-template-columns: 26px minmax(0, 1fr) 74px; grid-template-areas: "n type ctl" "n when when" "n then matched"; }
  .mr-n { grid-area: n; } .mr-type { grid-area: type; } .mr-when { grid-area: when; } .mr-then { grid-area: then; }
  .mr-matched { grid-area: matched; } .mr-ctl { grid-area: ctl; }
  .mr-headrow { display: none; }
  .mr-switch { width: 44px; height: 26px; }
  .mr-switch span { width: 20px; height: 20px; }
  .mr-switch.is-on span { left: 21px; }
}

/* Ticking a row used to INSERT the selection bar above the table and push every
   row down (07/10/2026). The title line and the bar now share one fixed slot:
   the bar lies over the title while rows are ticked, and nothing moves. */
.mq-titlewrap { position: relative; min-height: 50px; margin-bottom: 6px; display: flex; align-items: center; }
.mq-titlewrap > .mq-table-title { margin-bottom: 0; flex: 1; }
.mq-titlewrap > .mx-bulk { position: absolute; inset: 0; margin: 0; }
.mq-titlewrap.is-selecting > .mq-table-title { visibility: hidden; }

/* The reader was boxed in a small card (07/10/2026). Reading now takes the
   whole Mail area: the folder rail steps aside while a thread is open, and the
   split runs the full height of the window. */
@media (min-width: 761px) {
  .mx.is-reading { grid-template-columns: minmax(0, 1fr); }
  .mx.is-reading > .mx-rail-slot { display: none; }
  .mx-split { min-height: calc(100vh - 120px); grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
  .mx-list { max-height: calc(100vh - 120px); }
  .mx-r-main, .mx-r-ai { max-height: calc(100vh - 180px); }
  .mx-r-cols { grid-template-columns: minmax(0, 1fr) 264px; }
}
.mx-r-from.is-refold { cursor: pointer; border-radius: 8px; }
.mx-r-from.is-refold:hover { background: var(--row-hover); }

/* Track AI on a trial run: what it would do, two columns, nothing to undo. */
.mq-log.is-trial .mq-log-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); cursor: default; }
.mq-log.is-trial .mq-log-row:hover { background: transparent; }

/* ── Mail approval (Karan 07/10/2026) — views/mail-approvals.js + Compose ──────
   Ask another person to read, suggest changes to and approve an email before it
   goes. Suggestions are tracked: insertions underlined in the link colour,
   deletions struck through in orange — the base text is never touched until the
   author accepts. Semantic tokens only. */
.mx-approvals { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); }
.cmp-askpanel { margin: 0 22px 14px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.cmp-askpanel[hidden] { display: none; }
.cmp-ask-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cmp-ask-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-3); min-width: 200px; }
.cmp-ask-field select, .cmp-ask-field input { font-family: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--hair-strong); border-radius: 8px; padding: 0 10px; min-height: 40px; }
.cmp-ask-auto { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-ask-go { appearance: none; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: var(--weight-medium); background: var(--ink-fill); color: var(--ink-fill-ink); border-radius: 8px; padding: 0 16px; min-height: 40px; }
.cmp-ask-go:disabled { opacity: 0.6; cursor: default; }
.cmp-ask-cancel { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--ink-3); min-height: 40px; padding: 0 8px; }

.ap { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 40px; }
.ap-head { display: flex; flex-direction: column; gap: 6px; }
.ap-eyebrow { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-orange); }
.ap-line { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ap-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule-head); }
.ap-row { appearance: none; border: 0; border-bottom: 1px solid var(--hair); background: transparent; color: var(--ink); font-family: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2.2fr) minmax(0, 150px) 96px; gap: 14px; align-items: center; padding: 12px 12px; min-height: 56px; }
.ap-row:hover { background: var(--row-hover); }
.ap-c-who, .ap-c-subj, .ap-c-st { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap-c-st { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 12.5px; }
.ap-c-when { font-family: var(--font-technical); font-size: 12px; color: var(--ink-3); text-align: right; }
.ap-who { font-size: 13.5px; }
.ap-subj { font-size: 13.5px; font-weight: var(--weight-medium); }
.ap-sub { font-size: 11.5px; color: var(--ink-3); }
.ap-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.ap-mono { font-family: var(--font-technical); }

.ap-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ap-st { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.ap-title { font-size: var(--text-h3); font-weight: var(--weight-medium); letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.ap-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-3); }
.ap-meta b { color: var(--ink); font-weight: var(--weight-medium); }
.ap-note { color: var(--ink-2); font-style: italic; }
.ap-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.ap-doc { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ap-doc-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; }
.ap-body { font-size: 14.5px; line-height: 1.7; color: var(--ink); border: 1px solid var(--hair); border-radius: 12px; padding: 18px 20px; background: var(--surface); white-space: normal; word-wrap: break-word; }
.ap-ins { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; background: var(--tint-blue); }
.ap-del { color: var(--brand-orange); text-decoration: line-through; }
.ap-sugg-tools { display: inline-flex; gap: 4px; margin: 0 4px; vertical-align: 1px; }
.ap-mini { appearance: none; cursor: pointer; font-family: inherit; font-size: 11px; min-height: 22px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--hair-strong); background: var(--surface); color: var(--ink-2); }
.ap-mini:hover { border-color: var(--link); color: var(--link); }
.ap-edit { width: 100%; min-height: 260px; box-sizing: border-box; font-family: inherit; font-size: 14.5px; line-height: 1.7; color: var(--ink); background: var(--surface); border: 1.5px solid var(--link); border-radius: 12px; padding: 16px 18px; resize: vertical; }
.ap-quoted summary { cursor: pointer; font-size: 12.5px; color: var(--ink-3); }
.ap-quote-body { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.ap-atts { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-att { border: 1px solid var(--hair); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--ink-2); }
.ap-side { display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--hair); padding-left: 16px; }
.ap-c-empty { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.ap-comment { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.ap-comment.is-resolved { opacity: 0.6; }
.ap-quote { color: var(--ink-3); border-left: 2px solid var(--brand-orange); padding-left: 8px; }
.ap-ctext b, .ap-reply b { color: var(--ink); font-weight: var(--weight-medium); }
.ap-reply { padding-left: 10px; border-left: 1px solid var(--hair); }
.ap-creply { display: flex; gap: 8px; align-items: center; }
.ap-rin { flex: 1; min-width: 0; font-family: inherit; font-size: 12.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--hair-strong); border-radius: 7px; padding: 0 8px; min-height: 32px; }
.ap-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--hair); }
.ap-actions .mq-primary { align-self: center; margin: 0; }
.ap-actions .mq-primary:disabled { opacity: 0.5; cursor: default; }
.ap-msg { flex: 1; min-width: 200px; font-family: inherit; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--hair-strong); border-radius: 8px; padding: 0 10px; min-height: 38px; }
.ap-auto { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.ap-err { font-size: 12.5px; color: var(--brand-orange); min-height: 0; }
@media (max-width: 760px) {
  .ap-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who when" "subj subj" "st st"; min-height: 64px; }
  .ap-c-who { grid-area: who; } .ap-c-when { grid-area: when; } .ap-c-subj { grid-area: subj; } .ap-c-st { grid-area: st; }
  .ap-grid { grid-template-columns: minmax(0, 1fr); }
  .ap-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 12px; }
  .ap-mini, .mx-tool, .ap-rin, .ap-msg { min-height: 44px; }
  .ap-mini { padding: 0 12px; }
}

/* ── Responsiveness (Karan's "Track mail upgrades" turn 4a, 08/10/2026) —
   views/responsiveness.js, a tab of Feedback. Five figures with 12-week
   sparklines, the open queries on the working-time clock, promises due today,
   clients needing attention, by person (workload first), and the query drawer.
   Semantic tokens only; works in light and Grey dark. */
.rs { display: flex; flex-direction: column; gap: 18px; }
.rs-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rs-title { margin: 0; font-size: var(--text-h2, 26px); font-weight: var(--weight-medium); letter-spacing: -0.02em; }
.rs-sub { font-size: 12.5px; color: var(--ink-3); }
.rs-filters { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.rs-filter select { appearance: none; font: inherit; font-size: 12.5px; min-height: 32px; padding: 0 28px 0 12px; border-radius: 999px;
  border: 1px solid var(--chip-border); background: transparent; color: var(--ink); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 11px) 50%; background-size: 4px 4px; background-repeat: no-repeat; }
.rs-filter .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rs-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.rs-card { border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rs-card-label { font-size: 12px; color: var(--ink-2); }
.rs-card-val { font-size: var(--figure-xs); font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1.1; }
.rs-card-val.is-ok, .rs-card-spark.is-ok { color: var(--status-ok-ui); }
.rs-card-val.is-miss, .rs-card-spark.is-miss { color: var(--brand-orange); }
.rs-card-val.is-none { color: var(--anchor); }
.rs-card-spark.is-none { color: var(--ink-3); }
.rs-card-sub { font-size: 11.5px; color: var(--ink-3); }
.rs-card-spark { margin-top: 6px; display: flex; justify-content: center; min-height: 24px; }
.rs-spark-empty { font-size: 11px; color: var(--ink-3); }
.rs-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.rs-panel { border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); overflow: hidden; }
.rs-panel-head { display: flex; align-items: baseline; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.rs-panel-title { font-size: 14px; font-weight: var(--weight-medium); }
.rs-panel-note { font-size: 12px; color: var(--ink-3); }
.rs-q { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--hair); cursor: pointer; }
.rs-q:hover { background: var(--row-hover); }
.rs-q:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.rs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--link); }
.rs-dot.is-breached { background: var(--brand-orange); }
.rs-dot.is-risk { background: var(--anchor); box-shadow: 0 0 0 3px var(--halo); }
.rs-q-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-q-who { font-size: 13.5px; font-weight: var(--weight-medium); }
.rs-q-subj { font-size: 13px; color: var(--ink-2); }
.rs-q-sub { font-size: 11.5px; color: var(--ink-3); }
.rs-q-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.rs-badge { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--link); color: var(--link); white-space: nowrap; }
.rs-badge.is-breached { border-color: var(--brand-orange); color: var(--brand-orange); }
.rs-badge.is-risk { border-color: var(--anchor); color: var(--anchor); background: var(--tint-blue); }
.rs-badge.is-done { border-color: var(--status-ok-ui); color: var(--status-ok-ui); }
.rs-eyebrow { display: block; font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding: 14px 16px 6px; }
.rs-p { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--hair); }
.rs-p:last-child { border-bottom: 0; }
.rs-p-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-p-text { font-size: 13px; }
.rs-p-due { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.rs-p-due.is-ok { color: var(--status-ok-ui); }
.rs-p-due.is-miss { color: var(--brand-orange); }
.rs-c { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--hair); }
.rs-c-dom { font-size: 13.5px; font-weight: var(--weight-medium); }
.rs-c-why { font-size: 12px; color: var(--brand-orange); }
.rs-c-proj { font-size: 12px; color: var(--link); }
.rs-foot { padding: 12px 16px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.rs-empty { padding: 16px; font-size: 13px; color: var(--ink-3); }
.rs-table-wrap { overflow-x: auto; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rs-table th { text-align: left; font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 10px 16px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.rs-table td { padding: 11px 16px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.rs-t-name { font-weight: var(--weight-medium); }
.rs-scrim { position: fixed; inset: 0; z-index: 140; background: rgba(0, 0, 0, 0.35); }
.rs-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 141; width: min(440px, 100vw); background: var(--sheet-lift, var(--surface));
  border-left: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; overflow-y: auto; box-shadow: var(--shadow-dialog); }
.rs-dr-head { display: flex; align-items: center; justify-content: space-between; }
.rs-dr-title { margin: 6px 0 0; font-size: 17px; font-weight: var(--weight-medium); line-height: 1.3; }
.rs-dr-why { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.rs-corrected { font-size: 12px; color: var(--brand-orange); }
.rs-evs { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.rs-ev { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair-soft); }
.rs-ev-at { font-family: var(--font-technical); font-size: 11.5px; color: var(--ink-3); }
.rs-ev-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rs-ev-kind { font-size: 10.5px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); }
.rs-ev-kind.is-chase { color: var(--anchor); }
.rs-ev-kind.is-missed, .rs-ev-kind.is-corrected { color: var(--brand-orange); }
.rs-ev-kind.is-replied { color: var(--status-ok-ui); }
.rs-ev-detail { font-size: 13px; }
.rs-ev-src { font-size: 11px; color: var(--ink-3); }
.rs-dr-fix { margin-top: 12px; }
.rs-dr-fix .rs-eyebrow { padding: 0 0 8px; }
.rs-dr-btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1100px) { .rs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rs-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .rs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-filters { margin-left: 0; }
  .rs-q { grid-template-columns: 10px minmax(0, 1fr); }
  .rs-q-act { grid-column: 2; justify-content: flex-start; }
  .rs-q-act .mq-link, .rs-dr-btns .mx-tool, .rs-filter select { min-height: 44px; }
  .rs-p { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .rs-p .mq-link { min-height: 44px; text-align: left; }
}
/* Reader: the monitored thread's status line and READ & LOGGED (turn 3a additions). */
.mx-ai-status { display: block; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.mx-ai-logged { display: flex; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.mx-ai-bullet { color: var(--ink-3); }
.mx-ai-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.mx-ai-kv > span:first-child { color: var(--ink-3); }

/* Only the mail scrolls (08/10/2026): the rows sit in their own scroll box under
   the fixed figure, search, chips and column heads. Height set in mail.js. */
.mq-scroll { overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) { .mq-scroll { overflow: visible; max-height: none; } }
/* The page's own 130px bottom clearance (for the Ask Track disc) is what kept
   the whole page scrolling under Mail; with the rows in their own box it goes. */
@media (min-width: 761px) { .main:has(.mq-scroll) { padding-bottom: 0; } .mq-scroll { padding-bottom: 56px; } }

/* ── Calculate · Show working (REVIEW-MODE §2–4) ──────────────────────────
   The ƒ marker shows on hover or focus of its row, or on every number while
   "Show working" (W) is on. The panel is non-modal: the member page stays
   live beside it and the panel follows every edit. */
.cx-fx { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 6px; border: 1px solid var(--cx-line); border-radius: 6px; background: var(--ground); color: var(--cx-brand); font: italic 500 13px/1 Georgia, 'Times New Roman', serif; cursor: pointer; opacity: 0; transition: opacity var(--dur-fast); vertical-align: middle; }
.cx-check:hover .cx-fx, .cx-working > div:hover .cx-fx, .cx-fx:focus-visible, body.cx-sw-all .cx-fx, [data-fx-row]:hover .cx-fx { opacity: 1; }
.cx-fx:hover { background: var(--cx-brand-tint); }
@media (hover: none) { .cx-fx { opacity: 1; width: 32px; height: 32px; } }
[data-sw-toggle][aria-pressed="true"] { background: var(--cx-brand-tint); border-color: var(--cx-brand); color: var(--cx-brand); }
.cx-sw { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--ground); border-left: 1px solid var(--cx-line); box-shadow: -12px 0 32px rgba(0,0,0,0.08); z-index: 60; display: flex; flex-direction: column; }
.cx-sw-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 20px 22px 12px; }
.cx-sw-title { font-size: var(--text-h3); font-weight: 500; margin: 6px 0 4px; }
.cx-sw-meta { font-size: 11.5px; color: var(--ink-2); }
.cx-sw-close { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: var(--text-h3); cursor: pointer; flex: 0 0 36px; }
.cx-sw-close:hover { background: var(--cx-soft); }
.cx-sw-result { display: flex; gap: 10px; align-items: center; padding: 0 22px 12px; font-size: 13px; }
.cx-sw-tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--cx-line); overflow-x: auto; }
.cx-sw-tabs button { border: 0; background: none; padding: 10px 8px; font: inherit; font-size: 13px; color: var(--ink-2); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; min-height: 40px; }
.cx-sw-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--cx-brand); font-weight: 500; }
.cx-sw-body { flex: 1; overflow-y: auto; padding: 14px 22px 40px; overscroll-behavior: contain; }
.cx-sw-sec { color: var(--cx-brand); margin: 16px 0 8px; }
.cx-sw-in { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--cx-line); font-size: 13px; }
.cx-sw-line { padding: 9px 0; border-bottom: 1px solid var(--cx-line); }
.cx-sw-line.carried .cx-sw-res { font-weight: 500; color: var(--ink); }
.cx-sw-line:target, .cx-sw-line.hl { background: var(--cx-attn-tint); }
.cx-sw-lab { font-size: 12px; color: var(--ink-2); margin-bottom: 3px; }
.cx-sw-sym, .cx-sw-sub, .cx-sw-res { font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; }
.cx-sw-sub { color: var(--ink-2); }
.cx-sw-chain { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.cx-sw-prose { font-size: 13px; line-height: 1.6; color: var(--ink); }
.cx-sw-prose p { margin: 0 0 10px; }
.cx-sw-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cx-sw-ex { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 12.5px; border-bottom: 1px solid var(--cx-line); }
.cx-sw-note { font-size: 12px; color: var(--ink-2); line-height: 1.5; margin: 8px 0; }
.cx-sw-try, .cx-sw-compare, .cx-sw-cform, .cx-sw-ask { display: grid; gap: 8px; margin: 8px 0 14px; }
.cx-sw-tryrow { display: grid; grid-template-columns: 1fr 120px auto; gap: 8px; align-items: center; font-size: 13px; }
.cx-sw-tryrow input { min-height: 36px; padding: 6px 8px; border: 1px solid var(--cx-line); border-radius: 6px; background: var(--ground); color: var(--ink); text-align: right; }
.cx-sw-tryrow input[type=text] { text-align: left; }
.cx-sw-tryrow.changed input { border-color: var(--cx-attn); background: var(--cx-attn-tint); }
.cx-sw-unit { font-size: 12px; color: var(--ink-2); min-width: 40px; }
.cx-sw-moved td { background: var(--cx-attn-tint); }
.cx-sw-ask textarea, .cx-sw-cform textarea, .cx-sw-cform select { width: 100%; padding: 8px 10px; border: 1px solid var(--cx-line); border-radius: 8px; font: inherit; font-size: 13px; background: var(--ground); color: var(--ink); box-sizing: border-box; }
.cx-sw-ai { padding: 12px 14px; border-radius: 10px; margin-top: 8px; font-size: 13px; line-height: 1.55; }
.cx-sw-cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.cx-sw-cmp > div { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--cx-line); border-radius: 8px; }
.cx-sw-cmp b { font-size: var(--text-card-title); font-weight: 500; }
.cx-bad-ink { color: var(--cx-bad); }
.cx-sw-thread { display: grid; gap: 10px; margin-bottom: 14px; }
.cx-sw-c { padding: 10px 12px; border: 1px solid var(--cx-line); border-radius: 10px; font-size: 13px; }
.cx-sw-c p { margin: 6px 0 0; line-height: 1.5; white-space: pre-wrap; }
.cx-sw-cmeta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); }
.cx-sw-reply { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--cx-soft); }
@media (max-width: 760px) { .cx-sw { width: 100vw; } .cx-sw-tryrow { grid-template-columns: 1fr 110px auto; } }
.cx-list-sec { display: flex; gap: 12px; align-items: baseline; margin: 26px 0 8px; font-size: var(--text-meta); color: var(--ink-2); }

/* ── Calculate · site levels (LevelsSurvey / LevelsEarthworks / LevelsNetwork / L7241*) ── */
.cx-lv-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 20px; align-items: start; margin-top: 16px; }
.cx-lv-grid.ew { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr); }
.cx-lv-grid.net { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.cx-lv-side { display: grid; gap: 16px; }
.cx-lv-card { padding: 18px 20px; margin-bottom: 16px; }
.cx-lv-cardhead { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cx-lv-plan { padding: 14px; }
.cx-lv-svg { width: 100%; height: auto; display: block; }
.cx-lv-tin { fill: none; stroke: var(--cx-underlay); stroke-width: 0.6; opacity: 0.7; }
.cx-lv-svg circle.cx-z0 { fill: var(--cx-z0); } .cx-lv-svg circle.cx-z1 { fill: var(--cx-z1); } .cx-lv-svg circle.cx-z2 { fill: var(--cx-z2); }
.cx-lv-svg circle.cx-z3 { fill: var(--cx-z3); } .cx-lv-svg circle.cx-z4 { fill: var(--cx-z4); } .cx-lv-svg circle.cx-z5 { fill: var(--cx-z5); }
.cx-lv-spike { fill: var(--cx-attn); stroke: var(--ground); stroke-width: 1.5; }
.cx-lv-lab { font-size: 9px; fill: var(--ink-2); font-family: var(--font-technical); }
.cx-lv-zone { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
.cx-lv-zone.dashed { stroke-dasharray: 5 4; }
.cx-lv-zone.faint { stroke: var(--cx-line); fill: var(--cx-soft); }
.cx-lv-zlab { font-size: 10px; fill: var(--ink); }
.cx-lv-tbm circle { fill: none; stroke: var(--ink); stroke-width: 1.4; } .cx-lv-tbm text { font-size: 10px; fill: var(--ink); }
.cx-lv-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--text-meta); color: var(--ink-2); }
.cx-lv-ramp { display: inline-block; width: 90px; height: 6px; border-radius: 3px; }
.cx-lv-ramp.z { background: linear-gradient(90deg, var(--cx-z0), var(--cx-z2), var(--cx-z5)); }
.cx-lv-ramp.d { background: linear-gradient(90deg, var(--cx-cut5), var(--cx-cut2), var(--cx-fill0), var(--cx-fill2), var(--cx-fill5)); width: 140px; }
.cx-lv-key { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--ink-2); margin-left: 8px; }
.cx-lv-key.spike { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--cx-attn); }
.cx-lv-key.ex { border-top: 1.5px dashed var(--ink-2); } .cx-lv-key.strip { border-color: var(--cx-calc-ink); } .cx-lv-key.fin { border-color: var(--ink); } .cx-lv-key.form { border-color: var(--cx-pipe); }
.cx-lv-datum { font-size: var(--text-meta); color: var(--ink-2); } .cx-lv-datum.bad { color: var(--cx-bad); }
.cx-lv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 14px 0 6px; }
.cx-lv-stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx-lv-stat { display: grid; gap: 4px; }
.cx-lv-stat b { font-size: var(--cx-figure); font-weight: 500; line-height: 1.05; color: var(--cx-brand-deep); font-family: var(--font-technical); }
.cx-lv-stat b.cut, .cx-table td.cut, .cx-lv-opt .cut { color: var(--cx-attn-ink); }
.cx-lv-stat b.fill, .cx-table td.fill, .cx-lv-opt .fill { color: var(--cx-brand); }
.cx-lv-stat > span:last-child { font-size: var(--text-meta); color: var(--ink-2); }
.cx-lv-src { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.cx-lv-src > div { display: grid; gap: 3px; } .cx-lv-src span { color: var(--ink-2); font-size: var(--text-meta); line-height: 1.45; }
.cx-lv-addsrc { display: grid; gap: 6px; margin-top: 12px; }
.cx-lv-chk { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.cx-lv-chk .ok { color: var(--cx-ok); } .cx-lv-chk .warn { color: var(--cx-attn-ink); }
.cx-lv-chk:hover .cx-fx { opacity: 1; }
.cx-lv-accepts > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.cx-lv-accepts span:not(.cx-pill) { grid-column: 1; color: var(--ink-2); font-size: var(--text-meta); }
.cx-lv-accepts .cx-pill { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.cx-lv-steps { list-style: none; margin: 0; padding: 0; }
.cx-lv-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--cx-line); }
.cx-lv-steps p { margin: 4px 0 0; font-size: var(--text-small); color: var(--ink-2); line-height: 1.5; }
.cx-lv-step { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-meta); color: var(--ground); }
.cx-lv-step.ok { background: var(--cx-ok); } .cx-lv-step.warn { background: var(--cx-attn); }
.cx-lv-flaghead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.cx-lv-flagtitle { display: block; font-weight: 500; font-size: var(--text-body); margin-bottom: 6px; }
.cx-lv-radios { display: grid; gap: 8px; margin-top: 10px; }
.cx-lv-radio { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--cx-line); border-radius: 8px; font-size: var(--text-small); min-height: 44px; cursor: pointer; }
.cx-lv-radio:has(input:checked) { border-color: var(--cx-brand); background: var(--cx-brand-tint); }
.cx-lv-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--cx-line); margin: 6px 0 4px; overflow-x: auto; }
.cx-lv-tabs button { display: grid; text-align: left; gap: 2px; padding: 10px 16px 12px; border: 0; background: none; border-bottom: 2px solid transparent; cursor: pointer; font: inherit; color: var(--ink-2); min-height: 44px; }
.cx-lv-tabs button b { font-weight: 500; font-size: var(--text-body); }
.cx-lv-tabs button span { font-size: var(--text-meta); }
.cx-lv-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--cx-brand); }
.cx-lv-toprow { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cx-lv-in { width: 100%; min-height: 36px; padding: 6px 8px; border: 1px solid var(--cx-line); border-radius: 6px; background: var(--ground); color: var(--ink); font: inherit; font-size: var(--text-small); box-sizing: border-box; }
.cx-lv-in.num { text-align: right; max-width: 110px; }
.cx-lv-facs { display: grid; gap: 8px; max-width: 460px; }
.cx-lv-svg rect.cx-d0 { fill: var(--cx-fill0); }
.cx-lv-svg rect.cx-dc1 { fill: var(--cx-cut1); } .cx-lv-svg rect.cx-dc2 { fill: var(--cx-cut2); } .cx-lv-svg rect.cx-dc3 { fill: var(--cx-cut3); } .cx-lv-svg rect.cx-dc4 { fill: var(--cx-cut4); } .cx-lv-svg rect.cx-dc5 { fill: var(--cx-cut5); }
.cx-lv-svg rect.cx-df1 { fill: var(--cx-fill1); } .cx-lv-svg rect.cx-df2 { fill: var(--cx-fill2); } .cx-lv-svg rect.cx-df3 { fill: var(--cx-fill3); } .cx-lv-svg rect.cx-df4 { fill: var(--cx-fill4); } .cx-lv-svg rect.cx-df5 { fill: var(--cx-fill5); }
.cx-lv-secline { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 8 3 2 3; }
.cx-lv-conv { font-size: var(--text-small); color: var(--ink-2); margin: 10px 0 0; }
.cx-lv-grid-l { stroke: var(--cx-line); stroke-width: 1; }
.cx-lv-ex { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 5 4; }
.cx-lv-strip { fill: none; stroke: var(--cx-calc-ink); stroke-width: 1.2; }
.cx-lv-fin { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.cx-lv-form { fill: none; stroke: var(--cx-pipe); stroke-width: 1.4; }
.cx-lv-work { background: var(--cx-soft); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; font-size: var(--text-small); line-height: 1.5; }
.cx-lv-opts { display: grid; }
.cx-lv-opt { display: grid; grid-template-columns: 1fr 70px 70px 70px; gap: 8px; align-items: center; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--cx-line); background: none; text-align: left; font: inherit; font-size: var(--text-small); cursor: pointer; color: var(--ink); min-height: 44px; }
.cx-lv-opt span:not(:first-child) { text-align: right; }
.cx-lv-opt.on { background: var(--cx-brand-tint); }
.cx-lv-pipe { stroke: var(--cx-pipe); stroke-width: 2; } .cx-lv-pipe.fail { stroke: var(--cx-bad); }
.cx-lv-plab { font-size: 9.5px; fill: var(--cx-pipe); } .cx-lv-plab.fail { fill: var(--cx-bad); }
.cx-lv-node { fill: var(--ground); stroke: var(--ink); stroke-width: 1.5; } .cx-lv-node.outfall { fill: var(--ink); }
.cx-lv-nlab { font-size: 9.5px; fill: var(--ink); } .cx-lv-nlab.b { font-weight: 500; font-size: 11px; }
.cx-lv-failrow td { background: var(--cx-attn-tint); }
.cx-lv-pipes td { vertical-align: top; }
.cx-lv-lswrap { overflow-x: auto; }
.cx-lv-svg.ls { min-width: 760px; }
.cx-lv-lspipe { fill: var(--cx-brand-tint2); stroke: var(--cx-pipe); stroke-width: 1; }
.cx-lv-mh { fill: var(--ground); stroke: var(--ink); stroke-width: 1.2; }
.cx-lv-tank { fill: var(--cx-brand-tint); stroke: var(--cx-pipe); stroke-width: 1; stroke-dasharray: 4 3; }
.cx-lv-fixes { display: grid; gap: 8px; margin-top: 10px; }
.cx-lv-fix { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--cx-line); border-radius: 8px; background: var(--ground); font: inherit; font-size: var(--text-small); color: var(--ink); cursor: pointer; text-align: left; min-height: 44px; }
.cx-lv-fix:hover { border-color: var(--cx-brand); }
@media (max-width: 1100px) { .cx-lv-grid, .cx-lv-grid.ew, .cx-lv-grid.net { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cx-lv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cx-lv-opt { grid-template-columns: 1fr 56px 56px 56px; } }

/* ── Calculate · member tabs and the load diagram (LOAD-DIAGRAM.md §3) ── */
.cx-mtabs { display: flex; gap: 24px; border-bottom: 1px solid var(--cx-line); margin: 18px 0 18px; }
.cx-mtab { border: 0; background: none; padding: 10px 0; min-height: 44px; font-family: inherit; font-size: var(--text-body); color: var(--ink-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cx-mtab.on { color: var(--ink); font-weight: var(--weight-medium); border-bottom-color: var(--cx-brand); }
.ld-card { padding: 16px 18px; }
.ld-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ld-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.ld-tool.on { background: var(--cx-brand); color: var(--surface); border-color: var(--cx-brand); }
.ld-sep { width: 1px; height: 24px; background: var(--cx-line); margin: 0 4px; }
.ld-newcase { font-size: var(--text-meta); color: var(--ink-2); }
.ld-chips { display: flex; justify-content: flex-end; gap: 16px; font-size: var(--text-meta); color: var(--ink-2); margin: 8px 0 4px; }
.ld-main { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
.ld-svgwrap { overflow-x: auto; overscroll-behavior-x: contain; }
.ld-svg { width: 100%; min-width: 720px; height: auto; display: block; touch-action: none; -webkit-user-select: none; user-select: none; font-family: var(--font-technical); }
.ld-side { border: 1px solid var(--cx-line); border-radius: 12px; padding: 14px; background: var(--cx-soft); font-size: var(--text-small); display: flex; flex-direction: column; gap: 10px; }
.ld-sh { margin: 0; font-size: var(--text-body); font-weight: var(--weight-medium); }
.ld-shrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ld-note { margin: 0; color: var(--ink-2); font-size: var(--text-meta); line-height: 1.45; }
.ld-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ld-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-meta); color: var(--ink-2); }
.ld-field input { width: 100%; box-sizing: border-box; min-width: 0; min-height: 36px; border: 1px solid var(--cx-line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); font-size: var(--text-small); }
.ld-field input[readonly] { background: transparent; color: var(--ink-2); }
.ld-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ld-ask { border: 1px solid var(--cx-brand); border-radius: 10px; padding: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.ld-suptypes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ld-suptype { text-align: left; border: 1px solid var(--cx-line); border-radius: 10px; padding: 8px 10px; background: var(--surface); color: var(--ink); font-family: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 44px; }
.ld-suptype span { font-size: var(--text-meta); color: var(--ink-2); }
.ld-suptype.on { border-color: var(--cx-brand); box-shadow: 0 0 0 1px var(--cx-brand); }
.ld-under { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.ld-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ld-cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ld-meta { font-size: var(--text-meta); color: var(--ink-2); }
.ld-table td.num, .ld-table th.num, .cx-table td.num, .cx-table th.num { text-align: right; }
.ld-table tr.on td { background: var(--cx-brand-tint); }
.ld-g { color: var(--cx-brand); font-weight: var(--weight-medium); }
.ld-q { color: var(--cx-attn-ink); font-weight: var(--weight-medium); }
.ld-uplift { color: var(--cx-bad); font-weight: var(--weight-medium); }
.ld-check { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.ld-check b { font-weight: var(--weight-medium); }
.ld-clause { font-family: var(--font-technical); font-size: var(--text-meta); color: var(--cx-brand); }
.ld-u { text-align: right; }
.ld-u.fail { color: var(--cx-bad); font-weight: var(--weight-medium); }
.ld-fixes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ld-fix { border: 1px solid var(--cx-brand); color: var(--cx-brand); background: var(--surface); border-radius: 999px; padding: 0 14px; min-height: 36px; font-family: var(--font-technical); font-size: var(--text-small); cursor: pointer; }
.ld-fix:hover { background: var(--cx-brand-tint); }
.ld-mech { border: 1px solid var(--cx-bad); background: var(--cx-bad-tint); border-radius: 12px; padding: 16px 18px; grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.ld-mech p { margin: 0; color: var(--ink-2); }
.ld-env { width: 100%; height: auto; display: block; font-family: var(--font-technical); }
/* SVG pieces */
.ld-ruler, .ld-chain { stroke: var(--ink-3); stroke-width: 1; }
.ld-tick { fill: var(--ink-2); font-size: 11px; }
.ld-guide { stroke: var(--cx-line); stroke-width: 1; stroke-dasharray: 3 3; }
.ld-bracket { fill: none; stroke: var(--cx-brand); stroke-width: 1.5; }
.ld-bracket.q { stroke: var(--cx-attn); }
.ld-brtxt { fill: var(--cx-brand); font-size: 9px; letter-spacing: 0.12em; font-family: var(--font-sans); }
.ld-brtxt.q { fill: var(--cx-attn-ink); }
.ld-gut { fill: transparent; }
.ld-gut.sel { fill: var(--cx-brand-tint); }
.ld-gl { fill: var(--cx-brand); font-size: 12px; font-weight: var(--weight-medium); font-family: var(--font-sans); }
.ld-gl.q { fill: var(--cx-attn-ink); }
.ld-gv { fill: var(--ink); font-size: 11.5px; }
.ld-gs { fill: var(--ink-2); font-size: 10px; font-family: var(--font-sans); }
.ld-row { cursor: pointer; }
.ld-load { fill: var(--cx-brand-tint); stroke: var(--cx-brand); stroke-width: 1.4; }
.ld-load.q { fill: url(#ld-hatch); stroke: var(--cx-attn); }
.ld-load.auto { stroke-dasharray: 4 3; }
.ld-load.sel { stroke-width: 2.4; }
.ld-hatchline { stroke: var(--cx-attn); stroke-width: 1.2; }
.ld-val { fill: var(--cx-brand); font-size: 11px; }
.ld-val.q { fill: var(--cx-attn-ink); }
.ld-tri { fill: var(--cx-brand); }
.ld-tri.q { fill: var(--cx-attn); }
.ld-lock { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.ld-pt { stroke: var(--cx-brand); stroke-width: 2; }
.ld-pt.q { stroke: var(--cx-attn); }
.ld-pt.sel, .ld-mom.sel { stroke-width: 3; }
.ld-arrhead { fill: var(--cx-brand); }
.ld-arrhead.q { fill: var(--cx-attn); }
.ld-mom { fill: none; stroke: var(--cx-brand); stroke-width: 2; }
.ld-mom.q { stroke: var(--cx-attn); }
.ld-hit, .ld-hitline { fill: transparent; stroke: transparent; stroke-width: 12; }
.ld-h { fill: var(--surface); stroke: var(--cx-brand); stroke-width: 2; cursor: grab; }
.ld-h.rd { cursor: ns-resize; }
.ld-h.sq { cursor: ew-resize; }
.ld-beam { fill: var(--cx-brand); }
.ld-beam.bad { fill: var(--cx-bad); }
.ld-beamlbl { fill: var(--cx-brand); font-size: 11px; font-weight: var(--weight-medium); }
.ld-tri-sup { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.ld-supline { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.ld-sup { cursor: pointer; }
.ld-sup.sel .ld-tri-sup, .ld-sup.sel .ld-supline { stroke: var(--cx-brand); stroke-width: 2.5; }
.ld-suplbl { fill: var(--ink); font-size: 11px; font-weight: var(--weight-medium); }
.ld-supon { fill: var(--ink-2); font-size: 10px; font-family: var(--font-sans); }
.ld-free { fill: var(--ink-2); font-size: 11px; font-family: var(--font-sans); }
.ld-draft { fill: var(--cx-brand-tint); stroke: var(--cx-brand); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ld-axis { stroke: var(--ink-3); stroke-width: 1; }
.ld-envfill { fill: var(--cx-brand-tint); }
.ld-envmax { fill: none; stroke: var(--cx-brand); stroke-width: 1.5; }
.ld-envmin { fill: none; stroke: var(--cx-attn); stroke-width: 1.4; stroke-dasharray: 4 3; }
.ld-envsup { fill: var(--ink-2); }
.ld-envlbl { fill: var(--cx-brand); font-size: 11px; }
.ld-envlbl.bad { fill: var(--cx-bad); }
.ld-defl { fill: none; stroke: var(--cx-attn); stroke-width: 1.6; }
.ld-defl.alt { stroke: var(--cx-brand); stroke-dasharray: 4 3; }
@media (max-width: 900px) {
  .ld-main, .ld-under { grid-template-columns: minmax(0, 1fr); }
}
.ld-lockic { fill: none; stroke: var(--ink-2); stroke-width: 1.2; vertical-align: -1px; }
.cx-supring { fill: none; stroke: var(--cx-ok); stroke-width: 2; }
.cx-supring.bad { stroke: var(--cx-bad); }
.cx-lbl-sup { fill: var(--cx-ok); }
.cx-lbl-gap { fill: var(--cx-bad); text-anchor: middle; }
.cx-lbl-free { fill: var(--ink-2); }
.cx-sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cx-ok); }
.cx-sdot.bad { background: var(--cx-bad); }
.cx-sdot.grey { background: var(--ink-3); }
.cx-elev { width: 100%; height: auto; display: block; margin: 6px 0; }
.cx-elevbox { padding: 12px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-meta); }

/* ── Calculate · section chooser (SECTION-PICKER.md §4) ── */
.sc-stepper { display: flex; flex-direction: column; gap: 6px; }
.sc-steprow { display: flex; gap: 6px; align-items: stretch; }
.sc-stepbtn { min-width: 40px; font-size: var(--text-body); }
.sc-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 1px solid var(--cx-line); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 0 10px; min-height: 40px; font-family: inherit; font-size: var(--text-small); cursor: pointer; text-align: left; }
.sc-field b { font-family: var(--font-technical); font-weight: var(--weight-medium); white-space: nowrap; }
.sc-field span { color: var(--ink-2); font-size: var(--text-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-caret { margin-left: auto; }
.sc-govline { display: flex; align-items: center; gap: 8px; font-size: var(--text-meta); color: var(--ink-2); }
.sc-suggest { font-size: var(--text-meta); color: var(--ink); background: var(--cx-ok-tint); border-radius: 8px; padding: 0 10px; }
.sc-suggest:not(:empty) { padding: 8px 10px; }
.sc-ok { color: var(--cx-ok); }
.sc-bad { color: var(--cx-bad); }
.sc-sheet-wrap { position: fixed; inset: 0; z-index: 80; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); background: color-mix(in srgb, var(--ink) 30%, transparent); display: flex; justify-content: flex-end; }
.sc-sheet { width: min(1180px, 100%); height: 100%; background: var(--surface); box-shadow: var(--shadow-float); overflow-y: auto; overscroll-behavior: contain; }
.sc-body { padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 16px; }
.sc-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.sc-title { margin: 6px 0 4px; font-size: var(--text-h2); font-weight: var(--weight-medium); }
.sc-headbtns { display: flex; gap: 8px; flex: none; }
.sc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.sc-tile { background: var(--cx-soft); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.sc-tile span { font-size: var(--text-meta); color: var(--ink-2); }
.sc-tile b { font-size: var(--text-h3); font-weight: var(--weight-regular); color: var(--cx-brand); font-family: var(--font-technical); }
.sc-tile b small { font-size: var(--text-meta); }
.sc-tile i { font-style: normal; font-size: var(--text-meta); color: var(--ink-2); }
.sc-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sc-search { margin-left: auto; min-width: 260px; min-height: 40px; border: 1px solid var(--cx-line); border-radius: 999px; padding: 0 14px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: var(--text-small); }
.sc-limits { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sc-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 999px; background: var(--cx-brand-tint); color: var(--cx-brand); font-size: var(--text-small); border: 1px solid transparent; font-family: inherit; }
.sc-chip small { color: var(--ink-2); font-size: var(--text-meta); }
.sc-chip button { border: 0; background: none; color: var(--ink-2); cursor: pointer; font-size: var(--text-body); min-width: 24px; min-height: 24px; }
.sc-chip.locked { background: var(--cx-soft); color: var(--ink); }
.sc-chip.add { background: none; border: 1px dashed var(--cx-line2); color: var(--ink-2); cursor: pointer; }
.sc-counts { margin-left: auto; font-size: var(--text-meta); color: var(--ink-2); }
.sc-limitform { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sc-limitform select, .sc-limitform input { min-height: 32px; border: 1px solid var(--cx-line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: var(--text-small); }
.sc-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.sc-side { display: flex; flex-direction: column; gap: 16px; }
.sc-list { padding: 8px; }
.sc-row { display: grid; grid-template-columns: 22px minmax(0, 1.4fr) 54px 84px minmax(170px, 1.3fr) 96px 26px; gap: 8px; align-items: center; padding: 10px; border-radius: 8px; cursor: pointer; font-size: var(--text-small); outline: none; }
.sc-row:hover { background: var(--cx-soft); }
.sc-row.on { background: var(--cx-brand-tint); box-shadow: inset 3px 0 0 var(--cx-brand); }
.sc-row:focus-visible { box-shadow: 0 0 0 2px var(--cx-brand); }
.sc-hrow { cursor: default; font-size: var(--text-table-head); letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--cx-line); border-radius: 0; }
.sc-hrow:hover { background: none; }
.sc-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--cx-line2); }
.sc-row.on .sc-radio { border: 5px solid var(--cx-brand); }
.sc-name b { font-family: var(--font-technical); font-weight: var(--weight-medium); }
.sc-name small { color: var(--ink-2); font-size: var(--text-meta); }
.sc-row.fail .sc-name b { color: var(--ink-2); }
.sc-badge { display: inline-block; margin-left: 6px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--cx-brand-tint); color: var(--cx-brand); }
.sc-badge.ok { background: var(--cx-ok-tint); color: var(--cx-ok); }
.sc-badge.muted { background: var(--cx-soft); color: var(--ink-2); }
.sc-num { text-align: right; }
.sc-gov { display: grid; grid-template-columns: auto auto; gap: 2px 8px; align-items: center; }
.sc-gov small { grid-column: 1 / -1; font-size: var(--text-meta); color: var(--ink-2); }
.sc-minis { display: flex; gap: 6px; }
.sc-mini { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sc-mini i { font-style: normal; font-size: 9px; color: var(--ink-2); }
.sc-minitrack { width: 5px; height: 20px; background: var(--cx-line2); border-radius: 2px; position: relative; overflow: hidden; }
.sc-minifill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--cx-brand-deep); }
.sc-minifill.fail { background: var(--cx-bad); }
.sc-cmp input { width: 16px; height: 16px; }
.sc-hidden { padding: 10px; font-size: var(--text-small); color: var(--ink-2); border-top: 1px solid var(--cx-line); }
.sc-hiddenlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; margin-top: 8px; max-height: 220px; overflow-y: auto; }
.sc-noload { border: 1px dashed var(--cx-bad); background: var(--cx-bad-tint); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.sc-noload p { margin: 0; color: var(--ink-2); }
.sc-scatter { width: 100%; height: auto; display: block; font-family: var(--font-technical); }
.sc-gridl { stroke: var(--cx-line); stroke-width: 1; }
.sc-tick { fill: var(--ink-2); font-size: 9px; }
.sc-tick.bad { fill: var(--cx-bad); }
.sc-tick.brand { fill: var(--cx-brand); }
.sc-limitl { stroke: var(--cx-bad); stroke-dasharray: 4 3; stroke-width: 1; }
.sc-pt { cursor: pointer; stroke-width: 1.4; }
.sc-pt.pass { fill: var(--cx-brand); stroke: var(--cx-brand); }
.sc-pt.hid { fill: var(--ink-3); stroke: var(--ink-3); }
.sc-pt.fail { fill: var(--surface); stroke: var(--cx-bad); }
.sc-ring { fill: none; stroke: var(--cx-brand); stroke-width: 2; }
.sc-ring.cur { stroke: var(--ink-2); stroke-dasharray: 2 2; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--text-meta); color: var(--ink-2); margin-top: 6px; }
.sc-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.sc-legend i.pass { background: var(--cx-brand); }
.sc-legend i.hid { background: var(--ink-3); }
.sc-legend i.fail { border: 1.5px solid var(--cx-bad); }
.sc-prev { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; }
.sc-sil { width: 100%; height: auto; }
.sc-silsel { fill: var(--cx-brand); }
.sc-silcur { fill: var(--cx-line2); }
.sc-prevname { font-family: var(--font-technical); font-weight: var(--weight-medium); color: var(--cx-brand); font-size: var(--text-h3); }
.sc-best { color: var(--cx-ok); font-weight: var(--weight-medium); }
@media (max-width: 1000px) {
  .sc-grid { grid-template-columns: minmax(0, 1fr); }
  .sc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-row { grid-template-columns: 22px minmax(0, 1fr) 50px minmax(120px, 1fr) 26px; }
  .sc-row > :nth-child(4), .sc-row > :nth-child(6) { display: none; }
  .sc-body { padding: 20px 16px 32px; }
}
.ld-ghost { fill: var(--cx-attn-tint); stroke: var(--cx-attn); stroke-width: 1.4; stroke-dasharray: 5 4; }
.ld-ghost.sel { stroke-width: 2.4; }
/* ── Track's always-on review (AI-WATCH.md §6) ── */
.cx-watchpill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px dashed var(--cx-ai-line); background: var(--cx-ai-tint); color: var(--ink); font-family: inherit; font-size: var(--text-meta); cursor: pointer; margin-right: 8px; max-width: 420px; }
.cx-watchpill span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-watchpill.running .cx-aidot { animation: cx-pulse 1.4s var(--ease-out) infinite; }
.cx-watchpill.hasnew { border-color: var(--cx-attn); }
@keyframes cx-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .cx-watchpill.running .cx-aidot { animation: none; } }
.cx-findings { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 70; background: var(--surface); border-left: 1px solid var(--cx-line); box-shadow: var(--shadow-float); overflow-y: auto; overscroll-behavior: contain; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.cx-findhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cx-findfilters { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-findfilters button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink-2); font-family: inherit; font-size: var(--text-meta); cursor: pointer; }
.cx-findfilters button.on { background: var(--cx-brand-tint); color: var(--cx-brand); border-color: transparent; }
.cx-findgroup { color: var(--ink-2); margin-top: 8px; }
.cx-fcard { border: 1px dashed var(--cx-ai-line); border-radius: 12px; padding: 12px; background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.cx-fcard.rule { border-style: solid; border-color: var(--cx-line); }
.cx-fcard.open { box-shadow: 0 0 0 1px var(--cx-brand); }
.cx-fcard.st-fixed, .cx-fcard.st-dismissed { opacity: 0.75; }
.cx-fctop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-meta); color: var(--ink-2); }
.cx-fclayer { display: inline-flex; align-items: center; gap: 4px; }
.cx-fnew { width: 8px; height: 8px; border-radius: 50%; background: var(--cx-attn); margin-left: auto; }
.cx-fctitle { font-weight: var(--weight-medium); font-size: var(--text-small); }
.cx-fcwhy { margin: 0; color: var(--ink-2); font-size: var(--text-meta); line-height: 1.45; }
.cx-fcev { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-fcghost { border: 1px dashed var(--cx-attn); background: var(--cx-attn-tint); border-radius: 8px; padding: 8px 10px; font-size: var(--text-meta); display: flex; flex-direction: column; gap: 2px; }
.cx-fdismiss { display: flex; gap: 6px; flex: 1; min-width: 220px; }
.cx-fdismiss input { flex: 1; min-width: 0; min-height: 36px; border: 1px solid var(--cx-line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); font-family: inherit; font-size: var(--text-small); }
.cx-finline { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; border: 1px dashed var(--cx-ai-line); background: var(--cx-ai-tint); border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-size: var(--text-meta); }
.cx-finline.rule { border-style: solid; border-color: var(--cx-bad); background: var(--cx-bad-tint); }
.cx-finline b { font-weight: var(--weight-medium); display: block; }
.cx-finwhy { display: block; color: var(--ink-2); }
.cx-finline small { color: var(--ink-3); }
.cx-finico { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--surface); color: var(--cx-attn-ink); border: 1px solid var(--cx-ai-line); }
.cx-finline.rule .cx-finico { color: var(--cx-bad); border-color: var(--cx-bad); font-weight: var(--weight-medium); }
.cx-finline.new { box-shadow: inset 3px 0 0 var(--cx-attn); }
.cx-fmark { cursor: pointer; }
.cx-fdot { fill: var(--surface); stroke: var(--cx-ai-line); stroke-width: 1.6; stroke-dasharray: 3 2; }
.cx-fmark.rule .cx-fdot { stroke: var(--cx-bad); stroke-dasharray: none; fill: var(--cx-bad-tint); }
.cx-fcore { fill: var(--ink-3); stroke: none; }
.cx-fmark.sev-check .cx-fcore { fill: var(--cx-attn); }
.cx-fmark.sev-blocker .cx-fcore { fill: var(--cx-bad); }
.cx-fhalo { fill: var(--cx-attn-tint); stroke: none; opacity: 0.8; }
.cx-fbang { fill: var(--cx-bad); font-family: var(--font-sans); font-weight: var(--weight-medium); }
.sc-trow { grid-template-columns: 22px minmax(0, 1.6fr) 60px minmax(170px, 1.3fr) 76px; }
.cx-wallbody { fill: url(#cx-hatch); stroke: var(--ink-3); stroke-width: 1; pointer-events: none; }
.cx-opening { fill: var(--surface); stroke: var(--cx-attn); stroke-width: 1.2; stroke-dasharray: 4 3; }
.cx-ghost { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: 0.6; pointer-events: none; }
.cx-lline.partition { stroke-dasharray: 6 4; }
.cx-hatchline { stroke: var(--ink-3); stroke-width: 1; }
.cx-fhover { position: fixed; z-index: 75; background: var(--surface); border: 1px dashed var(--cx-ai-line); border-radius: 12px; padding: 12px; box-shadow: var(--shadow-float); display: flex; flex-direction: column; gap: 6px; font-size: var(--text-small); }
.cx-fhover.rule { border-style: solid; border-color: var(--cx-bad); }
.cx-checkfind { margin: -4px 0 8px 0; padding-left: 12px; }
.ld-cell { width: 70px; min-height: 30px; text-align: right; border: 1px solid var(--cx-line); border-radius: 6px; padding: 0 6px; background: var(--surface); color: var(--ink); font-size: var(--text-small); }
.cx-canvaswrap { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cx-elevstrip { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: center; border: 1px solid var(--cx-line); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.cx-elevtext { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; font-size: var(--text-small); }
.cx-elevtext p { margin: 0; color: var(--ink-2); font-size: var(--text-meta); }
.cx-planfoot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: var(--text-meta); color: var(--ink-2); }
.cx-keys { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cx-keys kbd { font-family: var(--font-technical); font-size: 11px; border: 1px solid var(--cx-line); border-radius: 4px; padding: 1px 5px; background: var(--surface); color: var(--ink); }
.cx-ring { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cx-ok); vertical-align: -1px; }
.cx-ring.bad { border-color: var(--cx-bad); }
.cx-sdot.drawing { background: var(--cx-brand); }
@media (max-width: 900px) { .cx-elevstrip { grid-template-columns: minmax(0, 1fr); } }
.sc-channel { border: 1px dashed var(--cx-attn); background: var(--cx-attn-tint); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-small); }
.sc-chopt { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-height: 32px; }
.sc-hint { border: 1px solid var(--cx-attn); background: var(--cx-attn-tint); border-radius: 12px; padding: 10px 14px; font-size: var(--text-small); }
.sc-chip.off { opacity: 0.6; }
/* Project detail Emails tab — compact rows (Karan 08/10, mail-reader renderMailRows) */
.mrw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--hair); }
.mrw-count { font-size: var(--text-small); color: var(--ink-3); }
.mrw { display: flex; flex-direction: column; gap: 22px; }
.mrw-bucket { display: flex; flex-direction: column; gap: 10px; }
.mrw-label { font-size: var(--text-eyebrow); letter-spacing: 0.14em; padding-left: 4px; }
.mrw-card { border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); overflow: hidden; }
.mrw-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 24px; padding: 14px 28px; cursor: pointer; }
.mrw-card > * + *, .mrw-autorows > .mrw-row { border-top: 1px solid var(--hair); }
.mrw-row:hover { background: var(--surface-sunk-soft); }
.mrw-row:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.mrw-dir { font-size: var(--text-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding-top: 5px; }
.mrw-dir.sent { color: var(--link); }
.mrw-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mrw-l1 { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.mrw-name { font-size: var(--text-editorial); font-weight: var(--weight-medium); color: var(--ink); white-space: nowrap; }
.mrw-detail { font-size: var(--text-small); color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrw-date { margin-left: auto; font-size: var(--text-small); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mrw-l2 { font-size: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrw-subj { font-weight: var(--weight-medium); color: var(--ink); }
.mrw-prev { color: var(--ink-3); margin-left: 6px; }
.mrw-auto { display: flex; align-items: center; gap: 16px; padding: 6px 28px; min-height: 56px; background: var(--surface-sunk-soft); }
.mrw-pill { flex: none; border: 1px solid var(--hair-strong); border-radius: var(--radius-pill); padding: 3px 12px; font-size: var(--text-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.mrw-autonames { flex: 1; min-width: 0; font-size: var(--text-body); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrw-show { flex: none; min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--link); cursor: pointer; }
.mrw-autorows .mrw-row { background: var(--surface-sunk-soft); }
@media (max-width: 760px) {
  .mrw-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 16px; }
  .mrw-dir { padding-top: 0; }
  .mrw-detail { display: none; }
  .mrw-l2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mrw-prev { display: block; margin-left: 0; }
  .mrw-auto { padding: 6px 16px; gap: 10px; }
  .mrw-show { min-height: 44px; }
}
/* ← / → between files in any viewer (Karan 08/10). */
.fv-nav { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1450; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 999px; background: var(--surface); color: var(--ink); border: 1px solid var(--hair, var(--cx-line)); box-shadow: var(--shadow-float); font-size: var(--text-meta); max-width: calc(100vw - 32px); }
.fv-nav span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.fv-nav b { color: var(--ink); font-weight: var(--weight-medium); }
.fv-nav button { min-width: 36px; min-height: 36px; border-radius: 50%; border: 1px solid var(--hair, var(--cx-line)); background: var(--surface); color: var(--ink); font-size: var(--text-body); cursor: pointer; }
.fv-nav button:disabled { opacity: 0.35; cursor: default; }
/* Over a drawing the switcher lives in the viewer's top bar (markup v2 §1,
   views/google-panels.js navPill). This keeps any floating copy clear of the
   bar should one appear before the viewer has mounted. */
body:has(.dr-viewer) .fv-nav { top: calc(64px + env(safe-area-inset-top, 0px)); bottom: auto; }

/* ── Files: a project in columns (turn 8 — 8a project columns, 8b file preview,
   8c preview slide-over; views/files-columns.js, 09/10/2026). Folders |
   register | preview; the preview slides in from the right when narrow. */
.fc-wrap { display: flex; flex-direction: column; gap: 26px; }
.fc-head { display: flex; align-items: flex-end; gap: 20px; }
.fc-head-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.fc-back { align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--link); }
.fc-back:hover { text-decoration: underline; }
.fc-title { margin: 0; font-size: var(--text-h1); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.fc-title-btn { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; }
.fc-title-btn:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fc-num { color: var(--link); font-weight: 400; margin-right: 6px; }
.fc-sub { margin: 0; font-size: 14px; color: var(--ink-2); text-wrap: pretty; }
.fc-drive { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border: 1px solid var(--chip-border); border-radius: 999px;
  font-size: 13px; color: var(--ink); text-decoration: none; }
.fc-drive:hover { border-color: var(--link); color: var(--link); }
.fc { display: grid; grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.55fr) minmax(300px, 1.08fr); border: 1px solid var(--hair); border-radius: 16px;
  background: var(--surface); overflow: hidden; height: max(520px, calc(100vh - 290px)); animation: bm-rise var(--dur-slow) var(--ease-out) both; }
.fc.is-narrow { grid-template-columns: minmax(180px, 0.6fr) minmax(0, 1.6fr); }
.fc.is-narrow > .fc-pane { display: none; }
.fc-cap { font-size: var(--text-caps); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.fc-folders { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--hair); background: var(--surface-sunk-soft); }
.fc-folders > .fc-cap { padding: 22px 24px 12px; }
.fc-folder-list { display: flex; flex-direction: column; overflow-y: auto; flex: 1; }
.fc-folder { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 22px 0 24px; border: 0; background: none;
  cursor: pointer; font: inherit; font-size: 14.5px; color: var(--ink); text-align: left; }
.fc-folder:hover { background: var(--nav-hover); }
.fc-folder.is-on { background: var(--nav-active-bg); color: var(--nav-active-ink); font-weight: 500; }
.fc-folder-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-count { flex: none; font-family: var(--font-technical); font-size: 12px; color: var(--ink-3); }
.fc-folder.is-on .fc-count { color: var(--nav-active-ink); }
.fc-foot { margin: 0; padding: 16px 24px 20px; border-top: 1px solid var(--hair); font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.fc-list { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fc-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 22px 26px 10px; }
.fc-sort { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--ink-3); }
.fc-sort:hover { color: var(--link); }
.fc-rows { flex: 1; overflow-y: auto; min-height: 0; }
.fc-rows:focus-visible { outline: 1px solid var(--hair-strong); outline-offset: -1px; }
.fc-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 44px 28px; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px 0 26px;
  cursor: pointer; font-size: 14.5px; color: var(--ink); }
.fc-row:hover { background: var(--row-hover); }
.fc-row.is-sel { background: var(--tint-blue-2); }
.fc-row.is-sel .fc-t { font-weight: 500; }
.fc-no { color: var(--link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-rev { text-align: center; color: var(--ink-2); }
.fc-row.is-old { color: var(--ink-3); }
.fc-row.is-old .fc-no, .fc-row.is-old .fc-rev { color: var(--ink-3); }
.fc-row.is-old .fc-t { text-decoration: line-through; text-decoration-thickness: 1px; }
.fc-rename { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-orange); }
.fc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-orange); flex: none; }
.fc-ext { font-family: var(--font-technical); font-size: 11.5px; color: var(--ink-3); }
.fc-row.is-plain .fc-t { color: var(--ink-2); }
.fc-group { padding: 16px 26px 6px; font-size: var(--text-caps); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.fc-use, .fc-use-none { width: 14px; height: 14px; justify-self: center; flex: none; }
.fc-use { display: inline-block; border-radius: 50%; border: 1.5px solid var(--link); box-shadow: inset 0 0 0 2.5px var(--surface); background: var(--link); }
.fc-use.is-mine { border-color: var(--ink); background: var(--ink); }
.fc-keys { display: flex; gap: 22px; flex-wrap: wrap; padding: 16px 26px 18px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--ink-2); }
.fc-keys kbd { font: inherit; color: var(--ink-3); }
.fc-empty { margin: 0; padding: 18px 26px; font-size: 13px; color: var(--ink-3); }
.fc-pane { border-left: 1px solid var(--hair); overflow-y: auto; padding: 28px 30px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fc-pane-empty { margin: auto; text-align: center; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.fc-pane-empty p { margin: 0; }
.fc-thumb { display: flex; align-items: center; justify-content: center; min-height: 220px; max-height: 340px; padding: 16px; border: 1px solid var(--hair);
  border-radius: 12px; background: var(--surface-sunk); font-size: 13px; color: var(--ink-3); text-align: center; overflow: hidden; }
.fc-thumb.has-img { padding: 0; background: var(--brand-white); }
.fc-thumb img { display: block; max-width: 100%; max-height: 340px; object-fit: contain; }
.fc-id { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); min-width: 0; }
.fc-idno { color: var(--link); font-size: 15px; overflow-wrap: anywhere; }
.fc-idtitle { font-size: var(--text-h3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); }
.fc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 13px; color: var(--ink-2); }
.fc-crumb { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.fc-crumb:hover { color: var(--link); text-decoration: underline; }
.fc-crumb-sep { font-size: 9px; color: var(--ink-3); }
.fc-facts { margin: 0; display: flex; flex-direction: column; gap: 11px; }
.fc-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; }
.fc-fact dt { color: var(--ink-2); flex: none; }
.fc-fact dd { margin: 0; color: var(--ink); text-align: right; display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 8px; min-width: 0; overflow-wrap: anywhere; }
.fc-fact .fc-use { width: 12px; height: 12px; }
.fc-mono { font-family: var(--font-technical); font-size: 12.5px; }
.fc-mini { padding: 2px 9px; border: 1px solid var(--chip-border); border-radius: 999px; background: none; cursor: pointer; font: inherit; font-size: 12px; color: var(--link); }
.fc-mini:hover { border-color: var(--link); }
.fc-actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 8px; }
.fc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 1px solid var(--chip-border); border-radius: 999px;
  background: none; cursor: pointer; font: inherit; font-size: 14px; color: var(--ink); text-decoration: none; transition: background var(--dur-fast) var(--ease-out); }
.fc-btn:hover { border-color: var(--link); color: var(--link); }
.fc-btn-primary { min-height: 50px; border: 0; background: var(--brand-blue); color: var(--brand-white); font-weight: 500; font-size: 15px; }
.fc-btn-primary:hover { background: var(--anchor); color: var(--brand-white); }
.fc-btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fc-btn-pair > :only-child { grid-column: 1 / -1; }
.fc-link { align-self: center; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--link); }
.fc-link:hover { text-decoration: underline; }
.fc-hint { padding: 12px 14px; border-radius: 10px; background: var(--surface-tint); font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.fc-hint a { color: var(--link); }
.fc-scrim { position: fixed; inset: 0; z-index: 64; background: rgba(12, 17, 57, 0.45); animation: bm-fade var(--dur-base) var(--ease-out) both; }
.fc-slide { position: fixed; top: 0; right: 0; bottom: 0; z-index: 65; width: min(480px, 100vw); box-sizing: border-box; overflow-y: auto;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 30px calc(30px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 18px; background: var(--sheet-lift); border-left: 1px solid var(--hair); box-shadow: var(--shadow-float);
  animation: fc-in var(--dur-base) var(--ease-out) both; }
.fc-slide[hidden], .fc-scrim[hidden] { display: none; }
@keyframes fc-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.fc-slide-top { display: flex; align-items: center; justify-content: space-between; }
.fc-esc { min-height: 30px; padding: 0 12px; border: 1px solid var(--chip-border); border-radius: 8px; background: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink-2); }
.fc-esc:hover { color: var(--ink); border-color: var(--link); }
@media (max-width: 760px) {
  .fc-wrap { gap: 18px; }
  .fc-head { flex-wrap: wrap; }
  .fc-back { min-height: 44px; }
  .fc-title { font-size: var(--text-h1-phone); }
  .fc-drive { min-height: 44px; }
  .fc, .fc.is-narrow { grid-template-columns: minmax(0, 1fr); height: auto; }
  .fc-folders { border-right: 0; border-bottom: 1px solid var(--hair); }
  .fc-folders > .fc-cap, .fc-foot, .fc-keys { display: none; }
  .fc-folder-list { flex-direction: row; overflow-x: auto; padding: 8px 10px; gap: 4px; }
  .fc-folder { flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; }
  .fc-row { grid-template-columns: 84px minmax(0, 1fr) 30px 18px; gap: 10px; min-height: 52px; padding: 0 14px 0 16px; font-size: 14px; }
  .fc-list-head { padding: 16px 16px 8px; }
  .fc-sort { min-height: 44px; }
  .fc-group { padding: 14px 16px 6px; }
  .fc-rows { overflow: visible; }
  .fc-slide { padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .fc-esc, .fc-mini, .fc-crumb, .fc-link { min-height: 44px; }
}

/* ── Calculate · the drawing canvas (design_handoff_calc_canvas, 1a–1h) ── */
/* 1a: the member a snap lands on lights up whole. */
.cx-m.snaptarget .cx-beam, .cx-m.snaptarget .cx-wall, .cx-m.snaptarget .cx-col, .cx-m.snaptarget .cx-zone { stroke: var(--cx-attn); }
.cx-m.snaptarget .cx-wallbody { stroke: var(--cx-attn); stroke-width: 2; }
.cx-fixmenu .cx-caps { color: var(--cx-bad); margin-bottom: 6px; }
.cx-fixmenu .cx-menu-row small { display: block; color: var(--ink-2); font-size: var(--text-meta); }
.cx-askbox { display: flex; flex-direction: column; gap: 10px; }
.cx-askbox label { display: flex; align-items: center; gap: 8px; font-size: var(--text-small); }
.cx-askbox input, .cx-askbox select { flex: 1; min-width: 0; }
.cx-askbox .cx-actions { display: flex; gap: 8px; justify-content: flex-end; }
/* 1b: what Track filled, as a card with its three answers. */
.cx-fillcard { position: fixed; right: 24px; bottom: 24px; z-index: 1500; width: min(380px, 92vw); background: var(--surface); border: 1px solid var(--cx-line); border-left: 3px solid var(--cx-ok); border-radius: 12px; box-shadow: var(--cx-shadow); padding: 14px 16px; font-size: var(--text-small); }
.cx-fillcard b { font-weight: 500; }
.cx-fillcard p { margin: 6px 0 10px; color: var(--ink-2); line-height: 1.5; }
.cx-fillcard .cx-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-filldot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cx-attn); margin-left: 6px; vertical-align: 1px; }
/* 1c: what comes out, hatched in the demolition colour. */
.cx-removal { fill: var(--cx-attn-tint); stroke: var(--cx-attn); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.9; pointer-events: none; }
.cx-lbl-removal { fill: var(--cx-attn-ink); }
.cx-wall.new { stroke-dasharray: 10 4; }
.cx-fate { display: inline-flex; border: 1px solid var(--cx-line); border-radius: 999px; overflow: hidden; }
.cx-fate button { border: 0; background: none; padding: 6px 12px; min-height: 32px; font: inherit; font-size: var(--text-meta); color: var(--ink); cursor: pointer; }
.cx-fate button.on { background: var(--cx-brand-tint); color: var(--cx-brand-deep); }
.cx-fate button.on.out { background: var(--cx-attn-tint); color: var(--cx-attn-ink); }
.cx-broken { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--cx-bad-tint); color: var(--cx-bad); font-size: var(--text-meta); line-height: 1.5; }
/* 1e: follow the load. */
.cx-m.off { opacity: 0.3; }
.cx-ghost.follow { stroke: var(--cx-member); opacity: 0.45; }
.cx-hop { stroke: var(--cx-member); stroke-width: 2; fill: none; pointer-events: none; }
.cx-hop.broken { stroke: var(--cx-bad); stroke-dasharray: 5 4; }
.cx-hop.on { stroke: var(--cx-attn); stroke-width: 3; }
.cx-hopn { fill: var(--cx-member); stroke: var(--surface); stroke-width: 2; cursor: pointer; }
.cx-hopn.broken { fill: var(--cx-bad); }
.cx-hopn.on { fill: var(--cx-attn); }
.cx-hopnum { fill: var(--surface); font-family: var(--font-technical); pointer-events: none; }
.cx-lbl-hop { fill: var(--cx-member); }
.cx-hopstrip { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--cx-line); border-radius: 12px; background: var(--surface); font-size: var(--text-meta); }
.cx-hopstrip .cx-caps { margin-right: 6px; }
.cx-hopchip { border: 1px solid var(--cx-line); border-radius: 999px; padding: 4px 10px; min-height: 32px; background: none; font: inherit; font-size: var(--text-meta); color: var(--ink); cursor: pointer; }
.cx-hopchip.on { border-color: var(--cx-attn); color: var(--cx-attn-ink); }
.cx-hopchip.broken { border-color: var(--cx-bad); color: var(--cx-bad); }
.cx-hopstrip .ld-meta { flex-basis: 100%; }
/* 1f: a wall on top of a beam, as a band. */
.cx-ontop { fill: var(--cx-calc-tint); stroke: var(--cx-calc-ink); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.cx-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-chips button { border: 1px solid var(--cx-line); border-radius: 999px; padding: 8px 14px; min-height: 40px; background: none; font: inherit; font-size: var(--text-small); color: var(--ink); cursor: pointer; }
.cx-chips button.on { border-color: var(--cx-brand); background: var(--cx-brand-tint); color: var(--cx-brand-deep); }
/* 1g: the member in elevation and true section. */
.cx-sect { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 18px; }
.cx-sect svg { width: 100%; height: auto; display: block; }
.cx-sect .ld-beam { fill: var(--cx-member); }
.cx-sect-wall { fill: var(--cx-calc-tint); stroke: var(--cx-calc-ink); stroke-width: 1; }
.cx-sect-handle { fill: var(--surface); stroke: var(--cx-attn); stroke-width: 2; cursor: ns-resize; }
.cx-sect-cursor { stroke: var(--cx-attn); stroke-width: 1.5; stroke-dasharray: 4 3; }
.cx-sect-cut { fill: var(--cx-member); }
.cx-sect-plate { fill: var(--cx-brand-tint2); stroke: var(--cx-member); stroke-width: 1; }
.cx-sect-leaf { fill: var(--cx-calc-tint); stroke: var(--cx-calc-ink); stroke-width: 1; }
.cx-sect-dim { stroke: var(--ink-3); stroke-width: 1; }
.cx-sect text { fill: var(--ink-2); font-family: var(--font-technical); font-size: 11px; }
@media (max-width: 900px) { .cx-sect { grid-template-columns: minmax(0, 1fr); } }
.cx-askbox input[type="checkbox"], .cx-askbox input[type="radio"] { flex: none; }
.cx-supring.typed { stroke-dasharray: 3 2; }
/* The load-diagram keys on the member page's own figures (the sheet styles them inline in calc-sheet-svg.js). */
.cx-diagram .cx-dg-ldG { fill: var(--cx-brand-tint); stroke: var(--cx-member); stroke-width: 1.2; }
.cx-diagram .cx-dg-ldQ { fill: var(--cx-attn-tint); stroke: var(--cx-attn); stroke-width: 1.2; }
.cx-diagram .cx-dg-ldTextG { fill: var(--cx-member); font-size: 13px; font-family: var(--font-technical); }
.cx-diagram .cx-dg-ldTextQ { fill: var(--cx-attn-ink); font-size: 13px; font-family: var(--font-technical); }
/* A wall drawn at its thickness: its centreline shows only when it is selected (or about to be snapped to). */
.cx-wall.centre { opacity: 0; stroke-width: 1.5; stroke-dasharray: 8 5; }
.cx-m.sel .cx-wall.centre, .cx-m.snaptarget .cx-wall.centre { opacity: 1; }
/* A wall answers the click: outlined and tinted when selected, a hint of it on hover. */
.cx-m-wall .cx-hit { cursor: pointer; }
.cx-m-wall:hover .cx-wallbody { stroke: var(--cx-brand); }
.cx-m.sel .cx-wallbody { stroke: var(--cx-brand); stroke-width: 2.5; fill: var(--cx-brand-tint2); }
.cx-m.sel .cx-wall.centre { stroke: var(--cx-brand); }
.cx-m-wall.sel .cx-chiplbl { fill: var(--cx-brand); font-weight: 500; }
.cx-bay { fill: var(--cx-brand-tint); fill-opacity: 0.55; stroke: var(--cx-brand); stroke-width: 2; }
/* Full-height Calculate panels sit below the update banner, like the app does. */
body.update-banner-open .sc-sheet-wrap { padding-top: calc(48px + env(safe-area-inset-top, 0px)); }
body.update-banner-open .cx-findings { top: calc(48px + env(safe-area-inset-top, 0px)); }
/* The chooser's title and its Cancel / Use stay in view while the list scrolls. */
.sc-head { position: sticky; top: 0; z-index: 3; background: var(--surface); margin: -28px -32px 0; padding: 20px 32px 14px; border-bottom: 1px solid var(--cx-line); }
@media (max-width: 760px) { .sc-head { margin: -20px -16px 0; padding: 14px 16px 12px; } }
/* Checkboxes in the chooser follow the theme (they were bright white boxes in dark mode). */
.sc-sheet input[type="checkbox"] { accent-color: var(--cx-brand); }
[data-theme="dark"] .sc-sheet { color-scheme: dark; }
/* What this package designs — the four links for a beam. */
.cx-chaincard { border: 1px solid var(--cx-line); border-radius: 12px; padding: 12px 14px; margin: 10px 0 14px; background: var(--surface); font-size: var(--text-meta); }
.cx-chaincard.open { border-color: var(--cx-attn); }
.cx-chainhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.cx-chainhead .cx-caps { color: var(--cx-brand); }
.cx-chainstep { padding: 6px 0; border-top: 1px solid var(--cx-line); }
.cx-chainstep:first-of-type { border-top: 0; }
.cx-chaintitle { display: flex; align-items: center; gap: 8px; }
.cx-chaintitle b { font-weight: 500; flex: 1; }
.cx-chainn { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cx-brand-tint); color: var(--cx-brand-deep); font-size: 11px; flex: none; }
.cx-chainmark { width: 16px; text-align: center; flex: none; font-family: var(--font-technical); }
.cx-chainstep.ok > .cx-chaintitle .cx-chainmark, .cx-chainline.ok .cx-chainmark { color: var(--cx-ok); }
.cx-chainstep.fail > .cx-chaintitle .cx-chainmark, .cx-chainline.fail .cx-chainmark { color: var(--cx-bad); }
.cx-chainstep.missing > .cx-chaintitle .cx-chainmark, .cx-chainline.missing .cx-chainmark { color: var(--cx-attn-ink); }
.cx-chainstep.assumed > .cx-chaintitle .cx-chainmark, .cx-chainline.assumed .cx-chainmark { color: var(--ink-2); }
.cx-chainline { display: flex; align-items: baseline; gap: 6px; padding: 3px 0 0 26px; color: var(--ink-2); line-height: 1.45; }
.cx-chainline > span:nth-child(2) { flex: 1; }
.cx-chainline .cx-link { flex: none; white-space: nowrap; }
.cx-table-loadonly td { color: var(--ink-2); }
.ld-namefield { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 4px; }
.ld-namefield input { width: 100%; box-sizing: border-box; }
/* Canvas 2a — the loads check on the ledger lines. */
.cx-lc-counts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--text-meta); }
.cx-lc-counts > span:first-child { color: var(--cx-ok); font-weight: 500; }
.cx-lcause { border: 1px solid var(--cx-attn); background: var(--cx-attn-tint); border-radius: 12px; padding: 12px 14px; margin: 10px 0 16px; }
.cx-lcausehead { display: flex; gap: 8px; align-items: baseline; }
.cx-lcausehead b { font-weight: 500; }
.cx-lm { border-top: 1px solid var(--cx-line); padding: 10px 0; }
.cx-lmhead { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.cx-lmhead small { color: var(--ink-2); }
.cx-lmstate { font-size: var(--text-meta); color: var(--cx-ok); }
.cx-lmstate.q { color: var(--cx-attn-ink); }
.cx-lmout { margin-left: auto; font-size: var(--text-meta); color: var(--ink-2); font-family: var(--font-technical); }
.cx-ll { display: flex; gap: 8px; align-items: baseline; padding: 3px 0 3px 4px; font-size: var(--text-small); }
.cx-lltext { flex: 1; min-width: 0; }
.cx-llsrc { flex: none; }
.cx-llmark { width: 14px; text-align: center; flex: none; font-family: var(--font-technical); color: var(--ink-3); }
.cx-ll.agreed .cx-llmark { color: var(--cx-ok); }
.cx-ll.question .cx-llmark, .cx-llmark.question { color: var(--cx-attn); }
.cx-ll.dismissed { color: var(--ink-3); }
.cx-ll.carried { color: var(--ink-2); }
.cx-lq { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 2px 0 8px 26px; padding: 8px 10px; border-left: 2px solid var(--cx-attn); background: var(--cx-attn-tint); border-radius: 0 8px 8px 0; font-size: var(--text-small); }
.cx-lqtext { flex: 1; min-width: 200px; }
.cx-lqtext small { color: var(--ink-2); }
.cx-lqbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-ldis { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
.cx-ldis input { flex: 1; min-width: 0; }
/* Canvas 2b — gates before the verdict. */
.cx-gates { border: 1px solid var(--cx-attn); border-radius: 12px; padding: 12px 14px; margin: 18px 0 6px; background: var(--cx-attn-tint); }
.cx-gate { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; font-size: var(--text-small); border-top: 1px solid var(--cx-line); }
.cx-gate:first-of-type { border-top: 0; }
.cx-pill.gated { background: transparent; border: 1.5px dashed var(--cx-attn); color: var(--cx-attn-ink); }
/* Canvas 2c — the path is the page. */
.cx-path { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 6px 2px 12px; }
.cx-pcol { display: flex; flex-direction: column; gap: 10px; flex: none; }
.cx-pnode { width: 210px; border: 1px solid var(--cx-line); border-radius: 12px; padding: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; font-size: var(--text-small); }
.cx-pnode.bu { background: var(--cx-calc-tint); border-color: var(--cx-calc-ink); }
.cx-pnode.out { border-style: dashed; background: transparent; color: var(--ink-2); }
.cx-pnode.top { border: 2px solid var(--cx-calc); }
.cx-pnode.on { box-shadow: 0 0 0 2px var(--cx-brand-tint2); }
.cx-pnode.loadonly { opacity: 0.75; }
.cx-pnhead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cx-pnhead b { font-weight: 500; flex: 1; }
.cx-pnutil { display: flex; gap: 8px; align-items: center; }
.cx-pnode .cx-link { align-self: flex-start; margin-top: 4px; }
.cx-pjoin { font-size: var(--text-meta); color: var(--cx-brand); font-family: var(--font-technical); }
.cx-parrow { flex: none; width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--font-technical); font-size: var(--text-meta); color: var(--ink); }
.cx-parrow i { display: block; width: 100%; height: 2px; background: var(--cx-member); position: relative; }
.cx-parrow i::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--cx-member); border-right: 0; }
.cx-parrow small { color: var(--ink-2); }
.cx-pfoot { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; border-top: 1px solid var(--cx-line); padding-top: 10px; font-size: var(--text-meta); color: var(--ink-2); }

/* ── Calculate · feedback (screenshot, mark, send) ─────────────────────── */
.cx-fb-btn { position: fixed; left: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--cx-line); border-radius: 999px; background: var(--ground); color: var(--ink); font: 500 var(--text-small)/1 var(--font-sans, inherit); box-shadow: var(--shadow-float); cursor: pointer; }
.cx-fb-btn:hover { border-color: var(--cx-brand); color: var(--cx-brand); }
.cx-fb-btn.busy { opacity: .6; cursor: progress; }
.cx-fb { position: fixed; inset: 0; z-index: 400; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); display: grid; grid-template-columns: minmax(0, 1fr) 340px; background: var(--ground); }
.cx-fb-shot { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 16px; gap: 12px; background: var(--surface-sunk-soft); }
.cx-fb-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-fb-tools [aria-pressed="true"] { border-color: var(--cx-brand); color: var(--cx-brand); background: var(--cx-brand-tint); }
.cx-fb-hint { color: var(--ink-2); font-size: var(--text-meta); margin-left: 6px; }
.cx-fb-canvaswrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.cx-fb-canvaswrap canvas { border: 1px solid var(--cx-line); border-radius: 8px; cursor: crosshair; touch-action: none; box-shadow: var(--shadow-float); }
.cx-fb-side { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; border-left: 1px solid var(--cx-line); overflow: auto; }
.cx-fb-where { font-size: var(--text-small); color: var(--ink-2); }
.cx-fb-kinds { display: flex; gap: 6px; }
.cx-fb-kind { min-height: 36px; padding: 0 12px; border: 1px solid var(--cx-line); border-radius: 999px; background: var(--ground); color: var(--ink-2); cursor: pointer; font: inherit; font-size: var(--text-small); }
.cx-fb-kind[aria-checked="true"] { border-color: var(--cx-brand); color: var(--cx-brand); background: var(--cx-brand-tint); }
.cx-fb-side textarea { width: 100%; resize: vertical; }
.cx-fb-note { margin: 0; min-height: 1em; font-size: var(--text-meta); color: var(--cx-attn-ink); }
.cx-fb-actions { display: flex; gap: 8px; }
.cx-fb-key { opacity: .7; font-size: var(--text-meta-sm); margin-left: 4px; }
.cx-fb-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 410; max-width: 520px; padding: 12px 18px; border-radius: 10px; background: var(--ink); color: var(--ground); font-size: var(--text-small); box-shadow: var(--shadow-float); }
.cx-fb-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.cx-fb-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 12px; border: 1px solid var(--cx-line); border-radius: 10px; }
.cx-fb-row.done { opacity: .6; }
.cx-fb-row.opened { border-color: var(--cx-brand); }
.cx-fb-row p { margin: 6px 0; white-space: pre-wrap; }
.cx-fb-thumb { display: block; width: 160px; padding: 0; border: 1px solid var(--cx-line); border-radius: 6px; overflow: hidden; background: var(--ground); cursor: zoom-in; }
.cx-fb-thumb img { display: block; width: 100%; }
.cx-fb-thumb.empty { display: flex; align-items: center; justify-content: center; height: 90px; color: var(--ink-2); font-size: var(--text-meta); cursor: default; }
.cx-fb-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--text-meta); color: var(--ink-2); }
.cx-fb-rowact { display: flex; flex-direction: column; gap: 6px; }
.cx-fb-fix { margin-top: 6px; font-size: var(--text-small); color: var(--ink-2); }
.cx-fb-fixform { display: flex; gap: 8px; margin-top: 8px; }
.cx-fb-fixform input { flex: 1; min-width: 0; }
.cx-fb-view { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px)); background: rgba(12,17,57,0.42); }
.cx-fb-viewcard { max-width: min(1400px, 100%); max-height: 100%; overflow: auto; padding: 16px; border-radius: 12px; background: var(--ground); }
.cx-fb-viewhead { display: flex; align-items: center; gap: 6px; }
.cx-fb-viewhead .cx-sw-close { margin-left: auto; }
.cx-fb-viewimg img { display: block; max-width: 100%; border: 1px solid var(--cx-line); border-radius: 6px; }
@media (max-width: 760px) { .cx-fb { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .cx-fb-side { border-left: 0; border-top: 1px solid var(--cx-line); } .cx-fb-row { grid-template-columns: 1fr; } .cx-fb-btn { bottom: 76px; } }

/* ── Calculate · the shell and six screens (Calculate App design pass 1, 15/10/2026) ──
   Tokens of the handoff mapped onto Track's: paper → --cx-soft, card → --surface,
   hairline → --cx-line, row rule → --cx-line2, muted → --cx-muted, ink → --ink,
   dark blue → --cx-brand-deep, vivid blue → --cx-brand, orange → --cx-attn
   (eyebrows, the active stage, the dot — accent only), amber → --cx-warn.
   Radius: cards 10px, pills 999px. Motion: fades only, token durations. */
.cx-shell { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: -8px; }
.cx-shell-main { min-width: 0; padding-top: 14px; }
.cx-nav { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 16px; padding: 16px 10px 16px 0; border-right: 1px solid var(--cx-line); min-height: calc(100vh - 120px); box-sizing: border-box; }
.cx-nav-brand { padding: 0 8px; }
.cx-lockup { display: inline-flex; align-items: center; gap: 8px; }
.cx-lockup-text { display: flex; flex-direction: column; gap: 2px; }
.cx-lockup-word { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--cx-brand-deep); line-height: 1; }
.cx-lockup-by { font-size: 9px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--cx-muted); }
.cx-nav-pkg { font-family: var(--font-technical); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); padding: 0 8px; line-height: 1.7; }
.cx-nav-group { display: flex; flex-direction: column; gap: 1px; }
.cx-nav-group > .cx-caps { font-size: 9px; color: var(--cx-muted); padding: 0 8px 4px; }
.cx-nav-item { display: flex; align-items: center; gap: 2px; width: 100%; text-align: left; padding: 6px 8px; min-height: 32px; border-radius: 7px; font-family: inherit; font-size: 12px; background: none; border: 1px solid transparent; color: var(--ink-2); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.cx-nav-item:hover { background: var(--row-hover); color: var(--ink); }
.cx-nav-item.on { background: var(--surface); border-color: var(--cx-line); color: var(--ink); font-weight: 500; }
.cx-nav-item:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }
.cx-nav-n { font-family: var(--font-technical); font-size: 9.5px; color: var(--cx-muted); width: 24px; flex: none; }
.cx-nav-foot { margin-top: auto; font-size: 9.5px; color: var(--cx-muted); padding: 8px; line-height: 1.5; }

.cx-screen-eyebrow { font-size: var(--text-caps); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--cx-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cx-eyebrow-link { font-size: var(--text-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 500; }
.cx-screen-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cx-screen-main { flex: 1 1 320px; min-width: 0; }
.cx-screen-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-screen-title { font-size: var(--text-page-title); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 4px; color: var(--ink); }
.cx-screen-sub { font-size: 12.5px; color: var(--ink-2); margin-bottom: 16px; line-height: 1.5; }
.cx-pkg-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.cx-pkg-title { font-size: var(--text-screen-title); font-weight: 500; letter-spacing: -0.03em; line-height: 1; margin: 0; color: var(--ink); }
.cx-pkg-sub { font-size: 12.5px; color: var(--ink-2); margin-bottom: 18px; }
.cx-grow { flex: 1 1 auto; }
.cx-turn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--cx-attn); border-radius: 999px; padding: 3px 11px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cx-attn-ink); white-space: nowrap; }
.cx-turn::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-attn); }
.cx-turn.brand { border-color: var(--cx-brand); color: var(--cx-brand); }
.cx-turn.brand::before { background: var(--cx-brand); }
.cx-turn.muted { border-color: var(--cx-line); color: var(--ink-2); }
.cx-turn.muted::before { background: var(--cx-muted); }
.cx-turn.ink { border-color: var(--ink); color: var(--ink); }
.cx-turn.ink::before { background: var(--ink); }

.cx-stagebar { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 0 20px; }
.cx-stage { flex: 1 1 130px; min-width: 110px; display: flex; flex-direction: column; gap: 1px; padding: 0 10px 0 0; background: none; border: 0; text-align: left; font-family: inherit; color: var(--ink); cursor: pointer; min-height: 44px; }
.cx-stage-bar { height: 3px; border-radius: 2px; margin-bottom: 7px; background: var(--rule-board); transition: background var(--dur-base) var(--ease-out); }
.cx-stage.done .cx-stage-bar { background: var(--cx-brand); }
.cx-stage.active .cx-stage-bar { background: var(--cx-attn); }
.cx-stage-label { font-size: 12px; font-weight: 500; }
.cx-stage-sub { font-size: 10.5px; color: var(--cx-muted); }
.cx-stage.on .cx-stage-label { text-decoration: underline; text-underline-offset: 4px; }
.cx-stage:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; border-radius: 4px; }

.cx-cardw { background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; }
.cx-summary2 { background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; padding: 13px 16px; margin-bottom: 18px; }
.cx-summary2 p { font-size: 14px; line-height: 1.5; margin: 4px 0 0; text-wrap: pretty; color: var(--ink); }
.cx-summary-from { color: var(--cx-muted); letter-spacing: 0.08em; }
.cx-statrow { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 20px; }
.cx-stat { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.cx-stat > .cx-caps { color: var(--cx-muted); }
.cx-stat-v { font-family: var(--font-technical); font-size: var(--text-screen-title-lg); font-weight: 500; letter-spacing: -0.02em; color: var(--cx-brand); line-height: 1; }
.cx-stat-v.attn { color: var(--cx-bad); }
.cx-stat-s { font-size: 10.5px; color: var(--ink-2); }
.cx-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.cx-sec-note { font-size: 11px; color: var(--cx-muted); }
.cx-seg-sm button { min-height: 28px; padding: 0 12px; font-size: 11px; }

.cx-list-head2, .cx-listrow { display: flex; gap: 12px; align-items: center; }
.cx-list-head2 { padding: 7px 12px; font-size: var(--text-table-head); font-weight: 500; letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--cx-muted); }
.cx-listcard { overflow: hidden; }
.cx-listrow { padding: 11px 12px; border-bottom: 1px solid var(--cx-line2); cursor: pointer; flex-wrap: wrap; transition: background var(--dur-fast) var(--ease-out); }
.cx-listrow:last-child { border-bottom: 0; }
.cx-listrow:hover { background: var(--row-hover); }
.cx-listrow:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: -2px; }
.w-ref { width: 44px; flex: none; font-size: 12px; color: var(--cx-brand); }
.w-member { flex: 1.2; min-width: 110px; font-size: 12.5px; }
.w-gov { flex: 1.4; min-width: 120px; font-size: 11.5px; color: var(--ink-2); }
.w-scope { width: 96px; flex: none; }
.w-util { width: 128px; flex: none; display: flex; align-items: center; gap: 8px; }
.w-status { width: 56px; flex: none; display: flex; justify-content: flex-end; }
.cx-listrow-name { display: block; }
.cx-listrow-size { display: block; font-size: 10.5px; color: var(--cx-muted); }
.cx-ubar { flex: 1; height: 4px; border-radius: 2px; background: var(--cx-line2); overflow: hidden; display: block; min-width: 40px; }
.cx-ubar > span { display: block; height: 100%; border-radius: 2px; background: var(--cx-brand); transition: width var(--dur-base) var(--ease-out); }
.cx-ubar.warn > span { background: var(--cx-warn-bar); }
.cx-ubar.fail > span { background: var(--cx-bad); }
.cx-uval { font-size: 11.5px; }
.cx-util-row { display: flex; align-items: center; gap: 8px; }

.cx-chip2 { display: inline-flex; align-items: center; font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; line-height: 1.5; }
.cx-chip2.ok { background: var(--cx-ok-tint); color: var(--cx-ok); }
.cx-chip2.warn { background: var(--cx-warn-tint); color: var(--cx-warn); }
.cx-chip2.fail { background: var(--cx-bad-tint); color: var(--cx-bad); }
.cx-chip2.set, .cx-chip2.ai { background: var(--cx-brand-tint); color: var(--cx-brand); }
.cx-chip2.rule { background: var(--cx-attn-tint); color: var(--cx-attn-ink); }
.cx-chip2.muted { background: var(--cx-soft); color: var(--ink-2); }
.cx-scope { display: inline-flex; align-items: center; font-size: 9px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; font-family: inherit; cursor: pointer; white-space: nowrap; line-height: 1.5; transition: background var(--dur-fast) var(--ease-out); }
.cx-scope.issued { border: 1px solid var(--cx-brand); background: var(--cx-brand-tint); color: var(--cx-brand); }
.cx-scope.loading { border: 1px dashed var(--hair-strong); background: transparent; color: var(--ink-2); }
.cx-scope.inherit { cursor: default; opacity: 0.7; }
.cx-scope:disabled { cursor: default; }
.cx-scope:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }

.cx-chain { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.cx-chain-stage { display: flex; align-items: center; gap: 10px; }
.cx-chain-col { display: flex; flex-direction: column; gap: 10px; }
.cx-chain-title { font-size: 9.5px; color: var(--cx-muted); }
.cx-chain-arrow { color: var(--hair-strong); font-size: 16px; align-self: center; padding-bottom: 4px; }
.cx-node { border: 1px solid var(--cx-line); background: var(--surface); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 190px; max-width: 260px; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.cx-node:hover { background: var(--row-hover); }
.cx-node.setnode { cursor: default; opacity: 0.9; }
.cx-node.fail { border-color: var(--cx-bad); }
.cx-node.rerun { border-color: var(--cx-warn-bar); }
.cx-node.loading { border-style: dashed; }
.cx-node:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }
.cx-node-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cx-node-h > .cx-mono { font-size: 12px; color: var(--cx-brand); }
.cx-node-name { font-size: 11.5px; color: var(--ink-2); }
.cx-node-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cx-node-note { font-size: 10px; letter-spacing: 0.04em; color: var(--cx-muted); }
.cx-node-note.rerun { color: var(--cx-warn); }

.cx-home { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.cx-home-main { flex: 999 1 460px; min-width: min(100%, 400px); }
.cx-home-side { flex: 1 1 250px; min-width: min(100%, 240px); display: flex; flex-direction: column; gap: 14px; }
.cx-sidecard { background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cx-sidecard > .cx-caps { color: var(--cx-muted); }
.cx-sideflag > .cx-caps.kind-ai { color: var(--cx-brand); }
.cx-sideflag > .cx-caps.kind-rule { color: var(--cx-attn-ink); }
.cx-person, .cx-based-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; font-size: 12.5px; }
.cx-person.second, .cx-based-row + .cx-based-row { border-top: 1px solid var(--cx-line2); padding-top: 10px; }
.cx-person-name { display: block; }
.cx-person-role { display: block; font-size: 10.5px; color: var(--cx-muted); }
.cx-person-none { color: var(--ink-2); }
.cx-person-state { font-size: var(--text-caps); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-muted); white-space: nowrap; }
.cx-person-state.on { color: var(--cx-ok); }
.cx-sideflag { border: 1px solid var(--cx-line2); border-radius: 8px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; background: none; text-align: left; font-family: inherit; color: var(--ink); width: 100%; box-sizing: border-box; min-height: 44px; }
.cx-sideflag:hover { background: var(--row-hover); }
.cx-sideflag > .cx-caps { font-size: 9.5px; }
.cx-sideflag-t { font-size: 12px; }
.cx-sideflag-w { font-size: 10.5px; color: var(--cx-muted); }
.cx-danger { color: var(--cx-attn-ink); }

.cx-reg { background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; overflow: hidden; max-width: 860px; }
.cx-reg-row { border: 0; border-bottom: 1px solid var(--cx-line2); padding: 11px 16px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; width: 100%; box-sizing: border-box; background: none; text-align: left; font-family: inherit; color: var(--ink); min-height: 44px; }
.cx-reg-row:last-child { border-bottom: 0; }
.cx-reg-row.opens { cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.cx-reg-row.opens:hover { background: var(--row-hover); }
.cx-reg-row:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: -2px; }
.cx-reg-k { font-size: var(--text-table-head); font-weight: 500; letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--cx-muted); width: 110px; flex: none; }
.cx-reg-v { flex: 1; font-size: 12.5px; min-width: 200px; line-height: 1.5; color: var(--ink-2); }
.cx-reg-empty { color: var(--cx-muted); font-style: italic; }
.cx-reg-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; max-width: 860px; }

.cx-flags2 { display: flex; flex-direction: column; gap: 10px; max-width: 800px; }
.cx-flag2 { background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; padding: 13px 16px; display: flex; flex-direction: column; gap: 8px; transition: opacity var(--dur-base) var(--ease-out); }
.cx-flag2.closed { opacity: 0.75; border-color: var(--cx-ok); }
.cx-flag2.held { opacity: 1; border-color: var(--cx-bad); }
.cx-flag2-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cx-flag2-t { font-size: 13.5px; font-weight: 500; flex: 1; min-width: 200px; }
.cx-flag2-where { font-size: 10.5px; color: var(--cx-muted); }
.cx-flag2-w { font-size: 10.5px; color: var(--cx-muted); }
.cx-flag2-w:hover { color: var(--cx-brand); text-decoration: underline; }
.cx-flag2-why { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.cx-flag2-act { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cx-flag2-closed { font-size: 11.5px; color: var(--cx-ok); }
.cx-flag2.held .cx-flag2-closed { color: var(--cx-bad); }
.cx-reason { padding: 3px 10px; border-radius: 999px; font-size: 10.5px; border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink-2); font-family: inherit; cursor: pointer; min-height: 28px; transition: background var(--dur-fast) var(--ease-out); }
.cx-reason:hover { background: var(--row-hover); color: var(--ink); }
.cx-reason:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }
.cx-btn-sm { min-height: 32px; padding: 0 13px; font-size: 11.5px; }

.cx-review { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.cx-review-main { flex: 1 1 380px; min-width: min(100%, 340px); display: flex; flex-direction: column; gap: 8px; }
.cx-changes { overflow: hidden; }
.cx-change2 { border-bottom: 1px solid var(--cx-line2); padding: 10px 15px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.cx-change2:last-child { border-bottom: 0; }
.cx-change2 small { font-size: 10.5px; color: var(--cx-muted); }
.cx-signoff { flex: 1 1 300px; min-width: min(100%, 280px); background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 11px; }
.cx-signoff-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.cx-signoff-gates { border-top: 1px solid var(--cx-line2); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.cx-gate { font-size: 11.5px; color: var(--cx-muted); }
.cx-gate.ok { color: var(--cx-ok); }
.cx-gate.bad { color: var(--cx-bad); }
.cx-signoff .cx-note-in { margin: 0; }
.cx-signoff .cx-sign-why { margin: 0; }
.cx-review-record { margin-top: 26px; max-width: 900px; }
.cx-review-record > summary { cursor: pointer; list-style: none; padding: 8px 0; }
.cx-review-record > summary::-webkit-details-marker { display: none; }
.cx-review-record > summary::before { content: '› '; }
.cx-review-record[open] > summary::before { content: '⌄ '; }

.cx-sheetwrap { position: relative; }
/* The DRAFT watermark on the output preview. Its own class: '.cx-draft' is the plan's
   draft shape (calc-plan.js), and sharing the name rotated every shape being drawn by -24°. */
.cx-draft-mark { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font-size: var(--text-display); font-weight: 500; letter-spacing: 0.1em; color: var(--cx-brand-deep); opacity: 0.08; pointer-events: none; white-space: nowrap; }
.cx-footnote { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-top: 10px; font-size: 9.5px; color: var(--cx-muted); }
.cx-footnote-brand { font-weight: 500; color: var(--cx-brand-deep); }

.cx-defaults { overflow: hidden; max-width: 800px; }
.cx-defrow { border-bottom: 1px solid var(--cx-line2); padding: 11px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; }
.cx-defrow:last-child { border-bottom: 0; }
.cx-defrow-n { flex: 1; font-size: 12.5px; min-width: 150px; }
.cx-defrow-v { font-size: 12.5px; color: var(--cx-brand); }
.cx-defrow-m { font-size: 10.5px; color: var(--cx-muted); }
.cx-defrow-in { min-height: 32px; border: 1px solid var(--cx-line); border-radius: 6px; padding: 0 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; max-width: 160px; }
.cx-defrow-err { flex-basis: 100%; font-size: var(--text-meta); color: var(--cx-bad); }
.cx-prompt { border: 1px solid var(--cx-brand); background: var(--cx-brand-tint); border-radius: 10px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; max-width: 800px; margin-top: 10px; font-size: 12.5px; line-height: 1.5; }
/* .cx-standalone (Calculate's screens outside a package) no longer caps the
   page (width law W1, 18/10/2026). */

@media (max-width: 1100px) {
  .cx-shell { grid-template-columns: minmax(0, 1fr); }
  .cx-nav { position: static; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; border-right: 0; border-bottom: 1px solid var(--cx-line); padding: 0 0 12px; gap: 14px 22px; }
  .cx-nav-brand { flex-basis: 100%; }
  .cx-nav-pkg, .cx-nav-foot { display: none; }
  .cx-nav-group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px; }
  .cx-nav-group > .cx-caps { padding: 0 6px 0 0; }
  .cx-nav-item { width: auto; }
}
@media (max-width: 760px) {
  .cx-nav-item { min-height: 44px; }
  .cx-btn-sm, .cx-reason, .cx-scope:not(.inherit), .cx-seg-sm button { min-height: 44px; }
  .cx-list-head2 { display: none; }
  .w-util { width: 100%; }
}

/* ── Calculate · pass 2 (design hand-off, 17/10/2026): 04 library, 04b runner,
   03b flow steps, 07 drainage, 08 levels, 12 engineering review, 14 family
   diagrams, 05–06 calculation screen, 15 components, 16 brand. Same token map
   as pass 1 above; amber = --cx-warn*, never the attention orange. */
/* .cx-wide's 1240px page cap removed 18/10/2026 (width law W1): these screens
   take the full content column; text and single-column readers cap themselves. */
.cx-eyebrow-on { color: var(--cx-brand); }
.cx-titleline { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.cx-titleline .cx-screen-title { margin: 0; }
.cx-titleline-sub { font-size: 12.5px; color: var(--ink-2); }
.cx-btn-xs { min-height: 28px; padding: 0 12px; font-size: 11px; font-weight: 400; }
.cx-btn-sm.primary, .cx-btn-xs.primary { font-weight: 500; }
.cx-fchip { border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 0 12px; min-height: 30px; font-family: inherit; font-size: 11.5px; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.cx-fchip:hover { background: var(--row-hover); color: var(--ink); }
.cx-fchip.on { background: var(--ink-fill); border-color: var(--ink-fill); color: var(--ink-fill-ink); font-weight: 500; }
.cx-fchip:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }

/* Release chips (README Status rules): ISSUABLE green, VERIFIED / REVIEWED blue tint, DRAFT dashed grey. */
.cx-rel { display: inline-flex; align-items: center; font-size: 9px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; line-height: 1.5; }
.cx-rel.draft { border: 1px dashed var(--hair-strong); color: var(--cx-muted); }
.cx-rel.verified { background: var(--cx-brand-tint); color: var(--cx-brand); }
.cx-rel.issuable { background: var(--cx-ok-tint); color: var(--cx-ok); }

/* 04 Calculation library */
.cx-libbar2 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 14px; }
.cx-libbar2 input[type="search"] { width: min(300px, 100%); min-height: 34px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--cx-line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 12px; padding: 0 12px; }
.cx-libcard2 { overflow: hidden; max-width: 980px; }
.cx-librow { display: flex; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--cx-line2); align-items: center; flex-wrap: wrap; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.cx-librow:last-child { border-bottom: 0; }
.cx-librow:hover { background: var(--row-hover); }
.cx-librow:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: -2px; }
.cx-librow.draft { opacity: 0.75; }
.cx-librow.later { cursor: default; }
.cx-librow.later:hover { background: none; }
.cx-librow-id { font-size: 11.5px; color: var(--cx-brand); width: 40px; flex: none; }
.cx-librow-t { flex: 1.3; min-width: 150px; font-size: 12.5px; font-weight: 500; }
.cx-librow-t > span, .cx-librow-f > span { display: block; font-size: 11px; font-weight: 400; color: var(--ink-2); }
.cx-librow-f { flex: 0.7; min-width: 90px; font-size: 11px; color: var(--ink-2); }
.cx-librow-f > span { color: var(--cx-muted); }
.cx-librow-act { display: flex; gap: 6px; flex: none; min-width: 74px; justify-content: flex-end; }

/* Cards of the pass-2 screens */
.cx-card-pad { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.cx-cardw-h { font-size: var(--text-caps); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--cx-brand); }
.cx-cardw-h.muted { color: var(--cx-muted); }
.cx-cardw-h.warn { color: var(--cx-warn); }
.cx-cardw-h.attn { color: var(--cx-attn-ink); }
.cx-cardw-split { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* 04b Calculation runner */
.cx-runhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.cx-runhead .cx-screen-title { margin: 0; }
.cx-runhead-id { font-size: 14px; color: var(--cx-brand); }
.cx-libonly-sm { min-height: 32px; font-size: 12px; }
.cx-run2 { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.cx-incard { flex: 1 1 300px; min-width: min(100%, 280px); overflow: hidden; margin: 0; }
.cx-incard > .cx-cardw-h { padding: 11px 14px 4px; }
.cx-run2-side { flex: 1.4 1 380px; min-width: min(100%, 340px); display: flex; flex-direction: column; gap: 14px; }
.cx-run2-side > div:empty { display: none; }
.cx-run2-rest { display: flex; flex-direction: column; gap: 14px; }
.cx-ingroup-h { padding: 10px 14px 2px; font-size: var(--text-table-head); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--cx-muted); }
.cx-inrow { display: flex; gap: 10px; padding: 7px 14px; border-bottom: 1px solid var(--cx-line2); align-items: center; flex-wrap: wrap; }
.cx-inrow > label { flex: 1 1 140px; font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.cx-inval { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.cx-inval input[type="number"], .cx-inval input[type="text"], .cx-inval select { min-height: 30px; width: 112px; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--cx-line); border-radius: 0; background: transparent; color: var(--ink); font-family: var(--font-technical); font-size: 12px; text-align: right; padding: 0 2px; }
.cx-inval select { text-align: left; font-family: inherit; width: 150px; }
.cx-inval input:focus-visible, .cx-inval select:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 1px; }
.cx-inrow .cx-fhelp { flex-basis: 100%; }
.cx-inobj { padding: 8px 14px 10px; border-bottom: 1px solid var(--cx-line2); display: flex; flex-direction: column; gap: 4px; }
.cx-inobj .cx-inrow { padding: 5px 0 5px 10px; border-bottom: 0; border-left: 2px solid var(--cx-line2); }
.cx-inobj .cx-inobj { padding: 6px 0 6px 10px; border-bottom: 0; }
.cx-inobj-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--ink); }
.cx-inobj .cx-btn-xs { align-self: flex-start; margin-top: 4px; }
/* Source chips (README A3 + 04b): DRAWING blue tint, CALC ink tint, SITE green tint, DEFAULT dashed, YOURS amber, EXAMPLE grey. */
.cx-src { display: inline-flex; justify-content: center; font-size: 9px; font-weight: 500; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; flex: none; width: 58px; box-sizing: border-box; white-space: nowrap; line-height: 1.5; }
.cx-src.drawing { background: var(--cx-brand-tint); color: var(--cx-brand); }
.cx-src.calc { background: var(--surface-sunk); color: var(--ink); }
.cx-src.site { background: var(--cx-ok-tint); color: var(--cx-ok); }
.cx-src.default { border: 1px dashed var(--hair-strong); color: var(--ink-2); }
.cx-src.yours { background: var(--cx-warn-tint); color: var(--cx-warn); }
.cx-src.example { background: var(--cx-soft); color: var(--cx-muted); }
.cx-src-gap { width: 58px; flex: none; }
.cx-checkcard { overflow: hidden; }
.cx-checkcard > .cx-cardw-h { padding: 11px 14px 4px; }
.cx-checkrow { display: flex; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--cx-line2); align-items: center; flex-wrap: wrap; }
.cx-checkrow.gov { background: var(--cx-brand-tint); }
.cx-checkrow-t { flex: 1; min-width: 150px; font-size: 12.5px; }
.cx-checkrow-t > span { display: block; font-size: 10.5px; color: var(--cx-muted); }
.cx-checkrow-u { width: 130px; flex: none; display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.cx-governs { padding: 10px 14px; font-size: 12px; color: var(--ink-2); }
.cx-governs > .cx-caps { color: var(--cx-attn-ink); }
.cx-sheetline { display: flex; gap: 14px; align-items: baseline; border-bottom: 1px solid var(--cx-line2); padding-bottom: 7px; flex-wrap: wrap; }
.cx-sheetline-c { font-size: 10px; color: var(--cx-muted); width: 86px; flex: none; }
.cx-sheetline-f { font-size: 11.5px; color: var(--cx-brand-deep); flex: 1 1 200px; word-break: break-word; }
.cx-sheetline-v { font-size: 11.5px; flex: none; }
.cx-sheetcard .cx-link { align-self: flex-start; font-size: 11.5px; }
.cx-assume { font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.cx-assume .cx-caps { color: var(--cx-warn); }
@media (max-width: 760px) {
  .cx-btn-xs, .cx-fchip, .cx-inval input[type="number"], .cx-inval input[type="text"], .cx-inval select { min-height: 44px; }
  .cx-librow-act { min-width: 0; }
}
/* 07 Drainage network */
.cx-dn { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.cx-dn-main { flex: 999 1 460px; min-width: min(100%, 400px); display: flex; flex-direction: column; gap: 14px; }
.cx-dn-side { flex: 1 1 250px; min-width: min(100%, 240px); display: flex; flex-direction: column; gap: 14px; }
.cx-dn-plancard { background: var(--surface-sunk-soft); padding: 6px; }
.cx-dn-plan { width: 100%; height: auto; display: block; }
.cx-dn-pipe { stroke: var(--cx-pipe); stroke-width: 3; stroke-linecap: round; }
.cx-dn-pipe.out { stroke-dasharray: 8 6; }
.cx-dn-pipe.fail { stroke: var(--cx-bad); }
.cx-dn-mh { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.cx-dn-plab { fill: var(--cx-pipe); font-size: 11px; font-family: var(--font-technical); }
.cx-dn-plab.fail { fill: var(--cx-bad); }
.cx-dn-nlab { fill: var(--ink-2); font-size: 11px; font-family: var(--font-technical); }
.cx-dn-nlab.muted { fill: var(--cx-muted); }
.cx-dn-sched { overflow: hidden; }
.cx-dn-sched .cx-table { margin: 0; }
.cx-dn-table th { font-size: var(--text-table-head); letter-spacing: var(--tracking-table); color: var(--cx-muted); font-weight: 500; }
.cx-dn-table td { font-size: 12px; }
.cx-dn-check { font-size: 11.5px; white-space: nowrap; }
.cx-dn-check.ok { color: var(--cx-ok); }
.cx-dn-check.bad { color: var(--cx-bad); }
.cx-dn-attrow { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--cx-line2); padding-bottom: 7px; }
.cx-dn-attrow .cx-mono { color: var(--ink); text-align: right; }
.cx-dn-att .cx-link { align-self: flex-start; font-size: 11.5px; }
/* 08 Levels and earthworks: the section band, warm = cut, cool = fill */
.cx-lv-band.cut { fill: var(--cx-cut2); fill-opacity: 0.7; }
.cx-lv-band.fill { fill: var(--cx-fill2); fill-opacity: 0.7; }
.cx-ew .cx-lv-card { margin: 0; }
.cx-dn-attrow .cx-mono.cut { color: var(--cx-attn-ink); }
.cx-dn-attrow .cx-mono.fill { color: var(--cx-brand); }
.cx-ew-below { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.cx-ew-below > :first-child { grid-column: 1 / -1; }
/* 14 Family diagrams */
.cx-fdgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.cx-fdcard { padding: 13px 14px 10px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.cx-fdcard-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cx-fdcard-t { font-size: 13px; font-weight: 500; flex: 1 1 auto; }
.cx-fdpills { display: inline-flex; gap: 4px; }
.cx-fdpill { border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 0 10px; min-height: 24px; font-family: inherit; font-size: 11px; cursor: pointer; }
.cx-fdpill.on { background: var(--ink-fill); border-color: var(--ink-fill); color: var(--ink-fill-ink); font-weight: 500; }
.cx-fdpill:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }
.cx-fdcard-dg { min-height: 200px; display: flex; align-items: center; justify-content: center; }
.cx-fdcard-dg .cx-fd { margin: 0; }
.cx-fdcard-f { display: flex; gap: 10px; align-items: baseline; border-top: 1px solid var(--cx-line2); padding-top: 8px; font-size: 11.5px; color: var(--ink-2); }
.cx-fdcard-f .cx-link { font-size: 11.5px; }
.cx-fdcard-gov { flex: 1; }
.cx-fdnote { max-width: 780px; margin-top: 14px; line-height: 1.5; }
.cx-fd .attn { stroke: var(--cx-warn-bar); }
@media (max-width: 760px) { .cx-fdpill { min-height: 44px; } }
/* 12 Engineering review */
/* The page is the full content column (width law W1); the comment and proposal
   text caps its own measure (W3). */
.cx-er-banner { border: 1px solid var(--cx-attn); background: var(--cx-attn-tint); color: var(--cx-attn-ink); border-radius: 10px; padding: 11px 16px; font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
.cx-er-list { overflow: hidden; }
.cx-er-row { padding: 12px 16px; border-bottom: 1px solid var(--cx-line2); display: flex; flex-direction: column; gap: 4px; }
.cx-er-row:last-child, .cx-er-prop:last-child { border-bottom: 0; }
.cx-er-row.done { opacity: 0.75; }
.cx-er-row-h { display: flex; gap: 10px; align-items: baseline; }
.cx-er-ref { font-size: 11.5px; color: var(--cx-brand); min-width: 34px; flex: none; }
.cx-er-t { flex: 1; font-size: 13px; font-weight: 500; }
.cx-er-q { font-size: 12.5px; color: var(--ink); line-height: 1.5; max-width: 96ch; }
.cx-er-m { font-size: 10.5px; color: var(--cx-muted); }
.cx-er-m .cx-link { font-size: 10.5px; }
.cx-er-h { display: flex; gap: 10px; align-items: baseline; margin: 22px 0 2px; }
.cx-er-count { color: var(--cx-brand); }
.cx-er-note { margin: 0 0 8px; }
.cx-er-prop { display: flex; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--cx-line2); align-items: center; flex-wrap: wrap; }
.cx-er-pt { flex: 1; min-width: 220px; max-width: 104ch; font-size: 12.5px; }
.cx-er-pt > span { display: block; font-size: 10.5px; color: var(--cx-muted); line-height: 1.45; margin-top: 2px; }
.cx-er-act { display: flex; gap: 6px; flex: none; }
.cx-er-form { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--cx-line); padding-top: 10px; }
.cx-er-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-2); }
.cx-er-form input, .cx-er-form textarea { border: 1px solid var(--cx-line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; padding: 6px 10px; }
.cx-er-form input:focus-visible, .cx-er-form textarea:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 1px; }
.cx-er-formact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cx-er-prop .cx-er-ref { width: 74px; overflow-wrap: anywhere; }
/* 03 Design flow (FIX-03-DESIGN-FLOW.md): one top bar, a floating TOOLS card,
   the calculation sheet as a split panel, a right panel per step. */
.cx-flowbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-height: 52px; padding: 8px 18px; background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; box-sizing: border-box; margin-bottom: 12px; }
.cx-flowbar-l { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; flex: 1 1 260px; }
.cx-flowbar-eb { font-size: var(--text-caps); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--cx-muted); }
.cx-flowbar-pj { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cx-muted); }
.cx-flowbar-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 260px; }
.cx-flowtabs { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; }
.cx-flowtabs-arr { color: var(--cx-muted); font-size: 12px; }
.cx-flowtab { border-radius: 999px; padding: 0 14px; min-height: 30px; font-family: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink-2); transition: background var(--dur-fast) var(--ease-out); }
.cx-flowtab.done { border-color: var(--cx-brand); color: var(--cx-brand); }
.cx-flowtab.active { background: var(--ink-fill); border-color: var(--ink-fill); color: var(--ink-fill-ink); font-weight: 500; }
.cx-flowtab.todo { color: var(--cx-muted); }
.cx-flowtab:focus-visible, .cx-flowpill:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }
.cx-flowpill { border-radius: 999px; padding: 0 14px; min-height: 30px; font-family: inherit; font-size: 12px; cursor: pointer; border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink); }
.cx-flowpill.on { border-color: var(--cx-brand); background: var(--cx-brand-tint); color: var(--cx-brand); }
.cx-autocalc { font-size: 11px; color: var(--cx-ok); white-space: nowrap; }
.cx-flowwrap { display: flex; gap: 0; align-items: stretch; border: 1px solid var(--cx-line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.cx-flowwrap .cx-canvaswrap { flex: 999 1 460px; min-width: min(100%, 380px); }
.cx-flowwrap .cx-canvas { border: 0; border-radius: 0; background: var(--surface-sunk-soft); }
.cx-flowpanel { flex: 1 1 300px; min-width: min(100%, 280px); border: 0; border-left: 1px solid var(--cx-line); border-radius: 0; padding: 16px; max-height: none; }
.cx-sheetpanel { flex: 1 1 320px; min-width: min(100%, 300px); background: var(--surface-sunk); padding: 14px; border-left: 1px solid var(--cx-line); overflow: auto; max-height: 720px; }
.cx-sheetpanel-card { background: var(--surface); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.cx-sheetpanel-card .cx-gfields { padding: 0; }
.cx-sheet-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cx-sheet-h > .cx-caps { color: var(--cx-brand); }
.cx-sheet-stages { display: flex; flex-direction: column; font-size: 11px; }
.cx-sheet-beams { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-sheet-sec { border-top: 1px solid var(--cx-line2); padding-top: 8px; }
.cx-sheet-sech { font-size: 12.5px; font-weight: 500; margin-bottom: 2px; }
.cx-sheet-figs { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--cx-line2); padding-top: 8px; }
.cx-sheet-figh { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.cx-sheet-fig svg { width: 100%; height: auto; display: block; }
/* The floating TOOLS card and the step chip (FIX-03 §3) */
.cx-stepchip { position: absolute; top: 12px; left: 14px; background: var(--surface); border: 1px solid var(--cx-line); border-radius: 999px; padding: 5px 12px; font-size: 11.5px; color: var(--ink-2); pointer-events: none; z-index: 2; }
.cx-toolcard { position: absolute; left: 14px; top: 56px; z-index: 2; background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 138px; }
.cx-tc-h { font-size: 9px; font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--cx-muted); padding: 4px 6px 2px; }
.cx-tc-row { display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 7px; background: none; padding: 4px 6px; min-height: 30px; font-family: inherit; font-size: 11.5px; color: var(--ink-2); cursor: pointer; text-align: left; }
.cx-tc-row:hover { background: var(--row-hover); }
.cx-tc-row.on { background: var(--cx-attn-tint); border-color: var(--cx-attn); color: var(--cx-attn-ink); font-weight: 500; }
.cx-tc-row:focus-visible, .cx-tc-more:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 1px; }
.cx-tc-key { width: 18px; height: 18px; flex: none; border: 1px solid var(--cx-line); border-radius: 5px; display: grid; place-items: center; font-size: 10.5px; font-family: var(--font-technical); color: var(--ink); background: var(--surface); }
.cx-tc-more { border: 0; background: none; font-family: inherit; font-size: 10.5px; color: var(--cx-brand); cursor: pointer; text-align: left; padding: 4px 6px; }
.cx-tc-rest { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--cx-line2); padding-top: 3px; }
.cx-tc-foot { font-size: 9.5px; color: var(--cx-muted); padding: 4px 6px 2px; max-width: 150px; line-height: 1.4; }
/* The right panel, per step (FIX-03 §6) */
.cx-fp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.cx-fp-set { border: 1px solid var(--cx-line2); border-radius: 8px; padding: 4px 10px; margin-bottom: 10px; }
.cx-fp-setrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--cx-line2); }
.cx-fp-setrow:last-child { border-bottom: 0; }
.cx-fp-setrow .cx-link { font-size: 12px; text-align: right; }
.cx-fp-dim { font-size: 10.5px; color: var(--cx-muted); text-align: right; }
.cx-fp-row { align-items: flex-start; border: 1px solid var(--cx-line); border-radius: 8px; margin-bottom: 6px; padding: 9px 10px; }
.cx-fp-row.on { border-color: var(--cx-attn); background: var(--cx-attn-tint); }
.cx-fp-id { color: var(--cx-brand); width: 30px; flex: none; font-size: 12px; }
.cx-fp-name { flex: 1; min-width: 0; font-size: 12.5px; }
.cx-fp-meta { display: block; font-size: 10.5px; color: var(--cx-muted); margin-top: 2px; }
.cx-fp-len { font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.cx-fp-u { width: 92px; flex: none; }
.cx-fp-sub { font-size: var(--text-table-head); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--cx-muted); margin: 12px 0 6px; }
.cx-fp-open { display: block; font-size: 11.5px; margin: -2px 0 8px 40px; }
.cx-fp-view { display: flex; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--cx-line2); margin-top: 14px; padding-top: 10px; font-size: 11.5px; color: var(--ink-2); }
.cx-fp-view label { display: inline-flex; gap: 6px; align-items: center; }
.cx-fp-elsewhere { margin: 10px 0 0; }
.cx-fate-chip { font-size: 9px; font-weight: 500; letter-spacing: 0.1em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; }
.cx-fate-chip.stays { background: var(--cx-soft); color: var(--ink-2); }
.cx-fate-chip.out { background: var(--cx-attn-tint); color: var(--cx-attn-ink); border: 1px dashed var(--cx-attn); }
.cx-fate-chip.new { background: var(--cx-brand-tint); color: var(--cx-brand); }
.cx-flowwrap + .cx-planfoot { align-items: center; }
@media (max-width: 760px) {
  .cx-flowtab, .cx-flowpill, .cx-tc-row, .cx-tc-more { min-height: 44px; }
}
.cx-fp-row { flex-wrap: wrap; row-gap: 4px; }
.cx-fp-row .cx-fp-name { flex: 1 1 120px; }
.cx-fp-row .cx-fp-u { flex: 1 1 100%; width: auto; padding-left: 50px; box-sizing: border-box; order: 9; }
.cx-flowbar-r .cx-btn-sm { min-height: 30px; }
/* 03b Flow steps */
.cx-fs-stages { margin-top: 6px; }
.cx-fs-sketch { padding: 10px; }
.cx-fs-svg { width: 100%; max-width: 620px; height: auto; display: block; margin: 0 auto; }
.cx-fs-wall { fill: var(--cx-soft); stroke: var(--hair-strong); stroke-width: 1; }
.cx-fs-floor { fill: var(--surface-sunk-soft); stroke: var(--cx-muted); stroke-width: 1; }
.cx-fs-open { fill: var(--cx-soft); stroke: var(--cx-muted); stroke-width: 1; stroke-dasharray: 4 3; }
.cx-fs-ground { stroke: var(--hair-strong); stroke-width: 1.2; }
.cx-fs-m { fill: var(--surface); stroke: var(--hair-strong); stroke-width: 2; }
.cx-fs-m.line, .cx-fs-m.thin, .cx-fs-m.heavy { fill: none; }
.cx-fs-m.thin { stroke-width: 1; }
.cx-fs-m.heavy { stroke-width: 4; }
.cx-fs-m.hollow { fill: none; }
.cx-fs-m.t-ok, .cx-fs-m.t-none { stroke: var(--cx-brand); }
.cx-fs-m.t-warn { stroke: var(--cx-warn-bar); }
.cx-fs-m.t-fail { stroke: var(--cx-bad); }
.cx-fs-txt { fill: var(--ink-2); font-size: 12px; }
.cx-fs-txtm { fill: var(--cx-muted); font-size: 11px; }
.cx-fs-cap { fill: var(--cx-muted); font-size: 9.5px; letter-spacing: 0.08em; }
.cx-fs-members { overflow: hidden; }
.cx-fs-mrow { display: flex; gap: 6px 10px; padding: 10px 14px; border-bottom: 1px solid var(--cx-line2); align-items: baseline; flex-wrap: wrap; }
.cx-fs-mrow:last-child { border-bottom: 0; }
.cx-fs-id { font-size: 11.5px; color: var(--cx-brand); width: 32px; flex: none; }
.cx-fs-mt { flex: 1 1 140px; font-size: 12.5px; }
.cx-fs-mt > span { display: block; font-size: 10.5px; color: var(--cx-muted); }
.cx-fs-u { flex: 1 1 100%; padding-left: 42px; box-sizing: border-box; }
.cx-fs-gov { flex: 1 1 100%; padding-left: 42px; font-size: 10.5px; color: var(--cx-muted); }
.cx-fs-opt { border: 1px solid var(--cx-warn-bar); background: var(--cx-warn-tint); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cx-fs-opt p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.cx-fs-done { font-size: 12px; color: var(--cx-ok); }
.cx-fs-done .cx-link { font-size: 12px; }
.cx-fs-nav { display: flex; gap: 8px; }
.cx-fs-flag { font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }
.cx-dn-main .cx-fs-u, .cx-dn-main .cx-fs-gov { max-width: 520px; }
/* 05–06 The calculation screen: the calculations bar, three columns, check cards.
   Follows the app theme (light / Grey); the design's navy is an open question. */
.cx-calcbar { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--cx-line); border-radius: 10px; background: var(--surface); margin-bottom: 16px; }
.cx-calctabs { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cx-calctab { border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 0 13px; min-height: 30px; font-family: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out); }
.cx-calctab:hover { background: var(--row-hover); color: var(--ink); }
.cx-calctab.on { border-color: var(--cx-brand); background: var(--cx-brand-tint); color: var(--cx-brand-deep); font-weight: 500; }
.cx-calctab:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }
.cx-calc3 { display: flex; gap: 0; flex-wrap: wrap; align-items: stretch; border: 1px solid var(--cx-line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.cx-calc3 > section { padding: 14px 16px; box-sizing: border-box; min-width: 0; }
.cx-calc3-in { flex: 1 1 250px; border-right: 1px solid var(--cx-line); }
.cx-calc3-mid { flex: 2 1 330px; }
.cx-calc3-checks { flex: 1 1 240px; border-left: 1px solid var(--cx-line); background: var(--surface-sunk-soft); }
.cx-calc3-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cx-calc3 .cx-dgcard { border: 0; padding: 0; }
.cx-calc3-working { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--cx-line); background: none; padding: 10px 0 0; margin-top: 16px; font-family: inherit; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.cx-calc3-working span { color: var(--cx-muted); }
.cx-calc3-working:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }
.cx-ccards { display: flex; flex-direction: column; gap: 8px; }
.cx-ccard { border: 1px solid var(--cx-line); border-radius: 10px; padding: 11px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 7px; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.cx-ccard:hover { background: var(--row-hover); }
.cx-ccard.gov { border-color: var(--cx-brand); box-shadow: inset 0 0 0 1px var(--cx-brand); }
.cx-ccard.fail { border-color: var(--cx-bad); }
.cx-ccard:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }
.cx-ccard-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 500; }
.cx-ccard-w { font-size: 9.5px; letter-spacing: 0.1em; flex: none; }
.cx-ccard-w.ok { color: var(--cx-ok); }
.cx-ccard-w.warn { color: var(--cx-warn); }
.cx-ccard-w.fail { color: var(--cx-bad); }
.cx-ccard-w.na { color: var(--cx-muted); }
.cx-ccard-c { font-size: 10.5px; color: var(--cx-muted); }
.cx-ccard-na { font-size: 11px; color: var(--ink-2); line-height: 1.45; }
.cx-ccard-wk { align-self: flex-start; font-size: 11px; }
.cx-ccard .cx-working { margin: 0; }
.cx-calc3-in .cx-irow { grid-template-columns: 1fr auto auto auto; }
@media (max-width: 760px) {
  .cx-calctab { min-height: 44px; }
  .cx-calc3-in, .cx-calc3-checks { border: 0; }
}
/* 15 Components & tokens, 16 Brand */
.cx-sys-h { font-size: var(--text-caps); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--cx-attn-ink); margin: 22px 0 10px; }
.cx-sys-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cx-sys-sw { border: 1px solid var(--cx-line); border-radius: 10px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; }
.cx-sys-chip { height: 46px; border-bottom: 1px solid var(--cx-line); margin-bottom: 8px; }
.cx-sys-swn { font-size: 12.5px; padding: 0 10px; }
.cx-sys-swv { font-size: 10px; color: var(--cx-muted); padding: 0 10px; word-break: break-all; }
.cx-sys-swu { font-size: 10.5px; color: var(--ink-2); padding: 0 10px; }
.cx-sys-type > div { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--cx-line2); flex-wrap: wrap; }
.cx-sys-type > div:last-child { border-bottom: 0; }
.cx-sys-type > div > .cx-mono:first-child { width: 170px; flex: none; font-size: 10.5px; color: var(--cx-muted); }
.cx-sys-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.cx-sys-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cx-sys-secondary { border-color: var(--cx-brand); color: var(--cx-brand); }
.cx-sys-urow { display: grid; grid-template-columns: 90px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 11.5px; color: var(--ink-2); }
.cx-sys-urow .cx-mono { text-align: right; color: var(--ink); }
.cx-sys-sp > div { display: grid; grid-template-columns: 160px 160px minmax(0, 1fr); gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--cx-line2); font-size: 12px; }
.cx-sys-sp > div:last-child { border-bottom: 0; }
.cx-sys-sp .cx-mono { color: var(--cx-brand); }
.cx-node.loading .cx-node-note { color: var(--cx-muted); }
.cx-sys-brand { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.cx-sys-panel { background: var(--surface); border: 1px solid var(--cx-line); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.cx-sys-panel p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.cx-sys-panel.blue { background: var(--cx-brand); border-color: var(--cx-brand); }
.cx-sys-panel.blue p, .cx-sys-panel.blue .cx-cardw-h, .cx-sys-panel.blue .cx-lockup-word, .cx-sys-panel.blue .cx-lockup-by { color: var(--ink-fill-ink); }
.cx-sys-wide { grid-column: 1 / -1; }
.cx-sys-word { font-size: var(--text-display); font-weight: 500; letter-spacing: -0.045em; color: var(--cx-brand-deep); line-height: 1; }
.cx-sys-word i { display: inline-block; width: 0.14em; height: 0.14em; border-radius: 50%; background: var(--cx-attn); margin-left: 0.03em; }
.cx-sys-icons { display: flex; gap: 18px; align-items: flex-end; }
.cx-sys-lock { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.cx-sys-lock .cx-lockup-word { font-size: var(--text-h3); }
.cx-sys-sheet { border: 1px solid var(--cx-line); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.cx-sys-sheet b { font-size: 14px; font-weight: 500; color: var(--cx-brand-deep); }
.cx-sys-sheet .cx-caps { font-size: 8px; color: var(--cx-muted); }
.cx-sys-sheet i { display: block; height: 4px; background: var(--cx-line2); border-radius: 2px; }
.cx-sys-sheet i.short { width: 70%; }
.cx-sys-foot { align-self: flex-end; font-size: 9.5px; font-weight: 400; color: var(--cx-muted); }
.cx-sys-foot b { font-size: 9.5px; color: var(--cx-brand-deep); }
.cx-sys-dont { display: flex; gap: 10px; font-size: 12px; padding: 7px 0; border-bottom: 1px solid var(--cx-line2); }
.cx-sys-dont > span { color: var(--cx-bad); }
.cx-sys-file { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--cx-line2); }
.cx-sys-file a { color: var(--cx-brand); }
.cx-sys-file span { font-size: 10.5px; color: var(--cx-muted); }
/* ── end Calculate pass 2 ── */

/* ── SITE CHECKS — shared visual language (design hand-off 15/10/2026) ──
   Severity markers carry shape + word, not only colour. Green is used for
   nothing here. Location badges: three tiers. Tokens only. */
.site-mk { display: inline-block; vertical-align: -1px; flex: 0 0 auto; }
.site-mk.w { fill: var(--status-error); }
.site-mk.a { fill: var(--brand-orange); }
.site-mk.i { fill: none; stroke: var(--ink-3); stroke-width: 1.6; }
.site-sev { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--weight-medium); }
.site-sev.warning { color: var(--status-error); }
.site-sev.action { color: var(--cx-attn-ink, var(--brand-orange)); }
.site-sev.info { color: var(--ink-3); }
.site-loc { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--weight-medium); line-height: 1; white-space: nowrap; vertical-align: middle; }
.site-loc.pin { background: var(--ink); color: var(--surface); }
.site-loc.addr { border: 1.5px solid var(--ink); color: var(--ink); }
.site-loc.apx { border: 1.5px solid var(--brand-orange); color: var(--cx-attn-ink, var(--brand-orange)); }
.site-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--hair); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.site-chip b { color: var(--ink); font-weight: var(--weight-medium); }
.site-chip.down { border-style: dashed; color: var(--ink-3); }
.site-chip:hover { border-color: var(--ink-3); }
@media (max-width: 760px) { .site-chip { min-height: 44px; } }

/* ── SITE CHECKS — enquiry, lists, tasks, visit (hand-off §5–§6, 15/10/2026).
   views/site-checks-surfaces.js. Tokens only. The enquiry block is the project
   page's .pdx-dc row, ALWAYS open; .sug is the dashed suggestion pill on the
   fee notes (solid once added). */
.pdx-dc.enq-sc { cursor: default; display: flex; flex-direction: column; }
.enq-sc .pdx-dc-head .site-mk { flex: 0 0 auto; }
.enq-sc-flags { margin-top: 10px; display: flex; flex-direction: column; transition: opacity var(--dur-base) var(--ease-out); }
.enq-sc .pdx-fix .site-mk { margin-top: 3px; }
.enq-sc .pdx-fix-name { word-break: normal; overflow-wrap: anywhere; font-size: 13.5px; font-weight: var(--weight-medium); }
.enq-sc .pdx-fix-why { color: var(--cx-attn-ink); font-size: 12.5px; }
.enq-sc-conv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.enq-sc-conv .pdx-linkbtn { font-size: 12px; }
.enq-sc-dim { opacity: 0.4; }
.enq-sc-acts { margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.enq-sc-sk { display: block; height: 12px; width: 70%; border-radius: 6px; background: var(--hair-soft); }
.enq-sc-spin { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; border: 1.6px solid var(--hair); border-top-color: var(--link);
  animation: enq-sc-spin 900ms linear infinite; }
@keyframes enq-sc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .enq-sc-spin { animation: none; } }
.sug-wrap { margin-bottom: 12px; }
.sug-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--ink-2); }
.sug-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sug { appearance: none; display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px dashed var(--hair-strong); background: var(--surface); font-family: var(--font-sans); font-size: 12.5px;
  font-weight: var(--weight-medium); color: var(--ink); cursor: pointer; text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.sug b { color: var(--link); font-weight: var(--weight-medium); }
.sug:hover { border-color: var(--link); }
.sug.added { border-style: solid; border-color: var(--link); background: var(--nav-hover); color: var(--anchor); }
.sug[disabled] { opacity: 0.6; cursor: progress; }
.sug-flash { background: var(--nav-hover) !important; transition: background-color var(--dur-slow) var(--ease-out); }
.site-list-mk { display: inline-flex; align-items: center; justify-content: center; width: 24px; }
.site-col { display: flex; align-items: center; }
.enq-scope { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.enq-scope-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enq-scope-site { flex: 0 0 auto; font-size: 12px; color: var(--cx-attn-ink); white-space: nowrap; }
.tk-src.tk-src-site { display: inline-flex; align-items: center; gap: 4px; border-color: transparent; color: var(--cx-attn-ink);
  font-family: var(--font-sans); font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase; }
.sv-prompts { display: flex; flex-direction: column; gap: 4px; }
.sv-prompt { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; font-size: 15px; line-height: 1.4; cursor: pointer; }
.sv-prompt input { width: 20px; height: 20px; flex: 0 0 20px; margin: 1px 0 0; }
.sv-prompt small { display: block; font-size: 12.5px; opacity: 0.7; }
@media (max-width: 760px) {
  .sug { min-height: 44px; padding: 8px 12px; white-space: normal; }
  .enq-sc-acts .pdx-linkbtn, .enq-sc-conv .pdx-linkbtn, .enq-sc-btn { min-height: 44px; }
  .reg-row > .site-col { display: none; }
}

/* ── SITE PIN — the pin-drop overlay (design hand-off 15/10/2026, boards
   PinDesktop / PinMobile). public/views/site-pin.js. Tokens only; the map
   ground is --ink-3 until the image/tiles land. Phone: full-screen map with
   the footer as a bottom sheet. */
.site-pin-panel .ov-actions { display: flex; align-items: center; gap: 14px; }
.site-pin-seg button[disabled] { cursor: default; color: var(--ink-3); }
.site-pin-soon { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-left: 4px; }
.ov-content.site-pin-content { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.site-pin-loading { padding: 24px; color: var(--ink-3); font-size: 13px; }
.site-pin-map { position: relative; flex: 1; min-height: 360px; background: var(--ink-3); overflow: hidden; }
.site-pin-canvas { position: absolute; inset: 0; }
.site-pin-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.site-pin-stage img { display: block; height: auto; cursor: crosshair; user-select: none; }
.site-pin-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.site-pin-line line { stroke: var(--surface); stroke-width: 2; stroke-dasharray: 6 6; }
.site-pin-stage .site-pin-pin, .site-pin-stage .site-pin-ref, .site-pin-stage .site-pin-dist { position: absolute; }
.site-pin-pin { transform: translate(-50%, -100%); cursor: grab; touch-action: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
.site-pin-pin:active { cursor: grabbing; }
.site-pin-body { fill: var(--ink); stroke: var(--surface); stroke-width: 1.2; }
.site-pin-dot { fill: var(--brand-orange); }
.site-pin-ref { transform: translate(-50%, -9px); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.site-pin-refdot { width: 18px; height: 18px; border-radius: 50%; border: 2px dashed var(--surface); background: rgba(255, 80, 1, 0.6); }
.site-pin-reflabel { background: rgba(12, 17, 57, 0.8); color: #F5F5F5; font-size: 11.5px; padding: 3px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.site-pin-dist { transform: translate(-50%, -50%); background: var(--surface); color: var(--ink); font-family: var(--font-technical); font-size: 12px; padding: 3px 8px; border-radius: var(--radius-pill); pointer-events: none; }
.site-pin-map > .site-pin-dist { position: absolute; left: 50%; bottom: 16px; top: auto; transform: translateX(-50%); }
.site-pin-nomap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 380px; margin: 0; padding: 16px 18px; background: var(--surface); color: var(--ink-2); border-radius: 12px; font-size: 13px; line-height: 1.5; box-shadow: var(--shadow-dialog); }
.site-pin-card { position: absolute; top: 16px; left: 16px; width: min(330px, calc(100% - 32px)); background: var(--surface); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-dialog); }
.site-pin-searchbox { display: flex; align-items: center; gap: 8px; height: 38px; border: 1px solid var(--hair); border-radius: 8px; padding: 0 12px; color: var(--ink-3); }
.site-pin-searchbox input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink); }
.site-pin-searchbox:focus-within { border-color: var(--link); }
.site-pin-hint { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.site-pin-hint .site-mk { margin-top: 4px; }
.site-pin-hint b { font-weight: var(--weight-medium); color: var(--ink); }
.site-pin-msg { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }
.site-pin-msg:empty { display: none; }
.site-pin-type { position: absolute; top: 16px; right: 16px; background: var(--surface); box-shadow: var(--shadow-dialog); }
.site-pin-zoom { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; background: var(--surface); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-dialog); }
.site-pin-zoom button { width: 40px; height: 40px; border: 0; background: var(--surface); color: var(--ink); font: inherit; font-size: 17px; cursor: pointer; }
.site-pin-zoom button + button { border-top: 1px solid var(--hair); }
.site-pin-locate { position: absolute; right: 68px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--surface); color: var(--link); font: inherit; font-size: 13px; cursor: pointer; box-shadow: var(--shadow-dialog); }
.site-pin-foot { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-top: 1px solid var(--hair); background: var(--surface); flex-wrap: wrap; }
.site-pin-now { display: inline-flex; align-items: center; gap: 6px; }
.site-pin-nowword { font-size: 12px; color: var(--ink-3); }
.site-pin-arrow { color: var(--ink-3); }
.site-pin-coords { font-family: var(--font-technical); font-size: 14px; color: var(--ink); }
.site-pin-note { font-size: 12.5px; color: var(--ink-3); }
.site-pin-flex { flex: 1; }
@media (max-width: 760px) {
  .site-pin-panel .ov-actions .ov-link { display: none; }
  .site-pin-map { min-height: 0; }
  .site-pin-card { top: 12px; left: 12px; width: calc(100% - 24px); padding: 10px 12px; }
  .site-pin-hint { font-size: 12.5px; margin-top: 8px; }
  .site-pin-type { top: auto; bottom: 16px; left: 12px; right: auto; }
  .site-pin-type button { min-height: 44px; }
  .site-pin-locate { right: 64px; min-height: 44px; }
  .site-pin-zoom button { width: 44px; height: 44px; }
  .site-pin-foot { gap: 8px 10px; padding: 16px 16px 24px; border-radius: 16px 16px 0 0; box-shadow: var(--shadow-dialog); }
  .site-pin-note, .site-pin-flex { flex-basis: 100%; }
  .site-pin-coords { font-size: 15px; flex-basis: 100%; }
  .site-pin-foot .pdx-pill { flex: 1; justify-content: center; min-height: 50px; }
  .site-pin-foot .pdx-pill.is-primary { order: 9; flex-basis: 100%; }
  .site-pin-foot #sp-cancel { order: 10; flex-basis: 100%; }
}

/* ── Calculate · guided flow (design "Track Calc Flow", 15/10/2026) ────────
   A card over the Design-flow canvas asking one thing at a time, and the live
   calculation sheet. Tokens only; dark mode follows the calc tokens. */
.cx-guide { position: absolute; z-index: 5; top: 12px; right: 12px; width: min(400px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: hidden; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--cx-line); border-radius: 16px; box-shadow: var(--cx-shadow); color: var(--ink); }
.cx-gbody { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 8px; }
.cx-ggrip { flex: none; display: flex; justify-content: center; padding: 8px 0 2px; cursor: grab; touch-action: none; }
.cx-ggrip span { width: 36px; height: 4px; border-radius: 2px; background: var(--cx-line); }
.cx-gstages { flex: none; display: flex; gap: 2px; padding: 4px 12px 0; overflow-x: auto; }
.cx-gstage { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--cx-muted); font: inherit; font-size: var(--text-meta-sm); cursor: pointer; white-space: nowrap; }
.cx-gstage .cx-gt { display: none; }
.cx-gstage.on { background: var(--cx-brand); color: var(--ground); }
.cx-gstage.on .cx-gt { display: inline; }
.cx-gstage.done.ok { color: var(--cx-brand); }
.cx-gstage.done.warn, .cx-gstage.done.fail { color: var(--cx-attn-ink); }
.cx-gn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid currentColor; font-family: var(--font-technical); font-size: var(--text-caps); }
.cx-ghead { padding: 10px 20px 0; display: flex; flex-direction: column; gap: 6px; }
.cx-gmeta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-technical); font-size: var(--text-caps); letter-spacing: 0.14em; color: var(--cx-muted); }
.cx-gprog { height: 3px; border-radius: 2px; background: var(--cx-soft); overflow: hidden; }
.cx-gprog span { display: block; height: 100%; background: var(--cx-brand); transition: width var(--dur-base) var(--ease-out); }
.cx-ghead h2 { margin: 6px 0 0; font-size: var(--text-h3); font-weight: 500; letter-spacing: -0.01em; }
.cx-ghead p { margin: 0; font-size: var(--text-small); line-height: 1.5; color: var(--ink-2); }
.cx-gbeams { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cx-gchip { min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-meta); cursor: pointer; }
.cx-gchip.on { border-color: var(--cx-brand); background: var(--cx-brand-tint); color: var(--cx-brand); }
.cx-gask { margin: 12px 20px 0; padding: 12px 14px; border: 1px solid var(--cx-line); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.cx-gask-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--text-small); }
.cx-gask-h b { font-weight: 500; }
.cx-gask-h .cx-mono { color: var(--cx-muted); font-size: var(--text-meta-sm); }
.cx-gask-g { display: flex; flex-direction: column; gap: 4px; }
.cx-gask-g > .cx-caps { color: var(--cx-muted); }
.cx-gask-g > div { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-gfields { padding: 8px 20px 4px; display: flex; flex-direction: column; }
.cx-gfield { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(0, 1.4fr); gap: 4px 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--cx-line); }
.cx-gfield.click { cursor: pointer; }
.cx-gfield.click:hover, .cx-gfield.sel { background: var(--cx-brand-tint); }
.cx-gk { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-small); min-width: 0; }
.cx-gh { font-size: var(--text-meta-sm); color: var(--cx-muted); }
.cx-gv { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-width: 0; }
.cx-gval { font-family: var(--font-technical); font-size: var(--text-small); padding: 5px 10px; border: 1px solid var(--cx-line); border-radius: 8px; background: var(--surface); text-align: right; overflow-wrap: anywhere; }
.cx-gval.warn { border-color: var(--cx-warn-bar); background: var(--cx-warn-tint); color: var(--cx-warn); }
.cx-gval.fail { border-color: var(--cx-bad); color: var(--cx-bad); }
.cx-gval.ok { color: var(--cx-ok); }
.cx-gsrc { font-family: var(--font-technical); font-size: var(--text-caps); letter-spacing: 0.08em; color: var(--cx-muted); border: 1px solid var(--cx-line); border-radius: 999px; padding: 2px 7px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.cx-gbar { flex: 1 1 60px; min-width: 40px; height: 6px; border-radius: 3px; background: var(--cx-soft); overflow: hidden; }
.cx-gbar span { display: block; height: 100%; background: var(--cx-brand); }
.cx-gbar span.warn { background: var(--cx-warn-bar); }
.cx-gbar span.fail { background: var(--cx-bad); }
.cx-glines { padding: 8px 0 4px; font-size: var(--text-small); }
.cx-glines .cx-chainline { padding-left: 0; }
.cx-gnote { margin: 8px 20px 0; padding: 10px 12px; border-radius: 8px; background: var(--cx-brand-tint); font-size: var(--text-small); line-height: 1.45; }
.cx-gnote.warn { background: var(--cx-attn-tint); color: var(--cx-attn-ink); }
.cx-gask .cx-gnote { margin: 0; }
.cx-gfoot { flex: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 20px 16px; border-top: 1px solid var(--cx-line); }
.cx-gfoot .cx-btn { min-height: 38px; padding: 0 16px; font-size: var(--text-small); }
.cx-gsheet { position: absolute; z-index: 4; left: 64px; bottom: 12px; width: max(220px, min(360px, calc(100% - 500px))); max-height: 50%; overflow: auto; background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; box-shadow: var(--cx-shadow); }
.cx-gsheet-h { position: sticky; top: 0; display: flex; justify-content: space-between; width: 100%; padding: 10px 14px; border: 0; background: var(--surface); color: var(--cx-muted); font: inherit; font-size: var(--text-meta-sm); cursor: pointer; }
.cx-gsheet-h .cx-caps { color: var(--cx-brand); }
.cx-gsheet-b { padding: 0 14px 12px; font-family: var(--font-technical); font-size: var(--text-meta); line-height: 1.6; }
.cx-gsh-s { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--cx-line); color: var(--cx-muted); }
.cx-gsh-s.warn, .cx-gsh-s.fail { color: var(--cx-attn-ink); }
.cx-gsh-r { display: flex; gap: 12px; border-bottom: 1px dotted var(--cx-line); }
.cx-gsh-r > span:first-child { flex: none; min-width: 60px; color: var(--ink-2); }
.cx-gsh-r > span:last-child { flex: 1; text-align: right; }
.cx-gsh-r.warn { color: var(--cx-warn); }
.cx-gsh-r.fail { color: var(--cx-bad); }
@media (max-width: 760px) {
  .cx-guide { top: auto; right: 8px; left: 8px !important; bottom: 8px; width: auto; max-height: 60%; }
  .cx-ggrip { display: none; }
  .cx-gsheet { display: none; }
  .cx-gchip, .cx-gstage, .cx-gfoot .cx-btn { min-height: 44px; }
}
/* Guided flow, phase 2: the step's drawing beside the card. */
.cx-gfig { position: absolute; z-index: 4; left: 12px; top: 12px; bottom: 12px; right: calc(min(400px, 100% - 24px) + 24px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--cx-line); border-radius: 12px; box-shadow: var(--cx-shadow); overflow: hidden; }
.cx-gfig-h { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--cx-line); }
.cx-gfig-h > .cx-caps { color: var(--cx-brand); }
.cx-gfig-b { flex: 1 1 auto; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 8px; }
.cx-gfig-b canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.cx-gfig-show { position: absolute; z-index: 4; left: 64px; top: 12px; min-height: 36px; padding: 0 14px; font-size: var(--text-small); }
.cx-gf { width: 100%; height: 100%; max-height: 100%; font-family: var(--font-technical); }
.cx-gf-empty { padding: 24px; color: var(--cx-muted); font-size: var(--text-small); text-align: center; max-width: 360px; }
.cx-gf-t { font-size: 15px; fill: var(--ink); }
.cx-gf-t.brand { fill: var(--cx-brand); }
.cx-gf-t.mute, .cx-gf-t.dim { fill: var(--cx-muted); font-size: 13px; }
.cx-gf-t.ok { fill: var(--cx-ok); }
.cx-gf-t.warn { fill: var(--cx-warn); }
.cx-gf-t.fail { fill: var(--cx-bad); }
.cx-gf-t.attn { fill: var(--cx-attn-ink); }
.cx-gf-hatch { stroke: var(--cx-underlay); stroke-width: 0.7; }
.cx-gf-dot { fill: var(--cx-underlay); }
.cx-gf-mas { stroke: var(--ink); stroke-width: 1.2; }
.cx-gf-mas.faint { opacity: 0.45; }
.cx-gf-void { fill: var(--surface); stroke: none; }
.cx-gf-con { stroke: var(--ink); stroke-width: 1.4; }
.cx-gf-con.assumed { stroke-dasharray: 6 3; }
.cx-gf-steel { fill: var(--cx-member); }
.cx-gf-steelweb { fill: var(--cx-brand-tint); stroke: var(--cx-member); stroke-width: 1; }
.cx-gf-timber { fill: var(--cx-calc-tint); stroke: var(--cx-calc-ink); stroke-width: 1.2; }
.cx-gf-break, .cx-gf-lead { fill: none; stroke: var(--ink); stroke-width: 0.8; }
.cx-gf-axis { stroke: var(--cx-muted); stroke-width: 0.7; stroke-dasharray: 8 3 2 3; }
.cx-gf-load { stroke: var(--cx-brand); stroke-width: 2; }
.cx-gf-loadh { fill: var(--cx-brand); }
.cx-gf-dim { fill: none; stroke: var(--cx-muted); stroke-width: 0.8; }
.cx-gf-spread { fill: none; stroke: var(--cx-attn); stroke-width: 1.2; stroke-dasharray: 5 3; }
.cx-gf-level { stroke: var(--cx-ok); stroke-width: 1.4; stroke-dasharray: 2 2; }
.cx-gf-level.warn { stroke: var(--cx-warn-bar); }
.cx-gf-level.fail { stroke: var(--cx-bad); }
.cx-gf-base { fill: var(--cx-soft); stroke: var(--ink); stroke-width: 1; }
.cx-gf-soil { stroke: none; opacity: 0.5; }
.cx-gf-ground { stroke: var(--ink); stroke-width: 1.4; }
.cx-gf-press { stroke: var(--cx-brand); stroke-width: 1; }
.cx-gf-pressh { fill: var(--cx-brand); }
@media (max-width: 760px) {
  .cx-gfig { right: 12px; bottom: auto; height: 38%; }
  .cx-gfig-show { min-height: 44px; }
}
/* Walls read off the drawing, before they are added (guided flow phase 3). */
.cx-prop { cursor: pointer; }
.cx-plan-svg .cx-prop-band, .cx-plan-svg .cx-prop-gap { vector-effect: none; }
.cx-prop-band { stroke: var(--cx-attn); stroke-opacity: 0.28; stroke-linecap: butt; }
.cx-prop-line { stroke: var(--cx-attn-ink); stroke-width: 1.5; stroke-dasharray: 6 4; }
.cx-prop-gap { stroke: var(--surface); stroke-opacity: 0.85; }
.cx-prop.off .cx-prop-band { stroke: var(--cx-underlay); stroke-opacity: 0.18; }
.cx-prop.off .cx-prop-line { stroke: var(--cx-underlay); }
.cx-gread { margin: 12px 20px 0; padding: 12px 14px; border: 1px solid var(--cx-line); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; font-size: var(--text-small); line-height: 1.45; }
.cx-gread p { margin: 0; color: var(--ink-2); }
.cx-gread-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cx-gread-h b, .cx-gread-row b { font-weight: 500; }
.cx-gread-h .cx-mono { color: var(--cx-muted); font-size: var(--text-meta-sm); }
.cx-gread-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cx-gread-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cx-gread .cx-btn { min-height: 36px; padding: 0 14px; font-size: var(--text-small); }
@media (max-width: 760px) { .cx-gread .cx-btn { min-height: 44px; } }

/* Site constraints block — open/close motion (16/10/2026). Height animates in
   site-checks-card.js so the page below slides; rows rise just behind it. */
.scb-open.scb-anim { transition: height var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.scb-open.scb-out { transition-duration: var(--dur-fast), var(--dur-fast), var(--dur-fast), var(--dur-fast); }
.scb-chev { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.scb-toggle[aria-expanded="true"] .scb-chev { transform: rotate(180deg); }
@keyframes scb-row-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.scb-open.scb-in > * { animation: scb-row-in var(--dur-base) var(--ease-out) both; }
.scb-open.scb-in > :nth-child(2) { animation-delay: 30ms; }
.scb-open.scb-in > :nth-child(3) { animation-delay: 60ms; }
.scb-open.scb-in > :nth-child(n+4) { animation-delay: 90ms; }
@media (prefers-reduced-motion: reduce) {
  .scb-open.scb-anim, .scb-chev { transition: none; }
  .scb-open.scb-in > * { animation: none; }
}

/* ── Calculate · Analysis (Calculate Analysis design A1–A3, 17/10/2026) ──────
   Built over the existing portal package (rev.frames). The README's hexes map
   onto the semantic layer: blue → --cx-brand, navy ink → --ink, muted →
   --cx-muted, secondary → --ink-2, hairline → --cx-line, row rule / bar track
   → --cx-line2, linework → --hair-strong, amber → --cx-warn-bar / --cx-warn,
   orange (accent only: eyebrows, the selection halo) → --cx-attn. Tints are
   colour-mixes of those tokens, so dark mode follows. */
.cx-an { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cx-an-eyebrow { font-size: var(--text-caps); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--cx-muted); margin-bottom: 8px; }
.cx-an-eyebrow b, .cx-an-blue { color: var(--cx-brand); font-weight: 500; }
.cx-an-title { font-size: var(--text-page-title); font-weight: 500; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--ink); line-height: 1.2; }
.cx-an-title.big { font-size: var(--text-screen-title); letter-spacing: -0.03em; line-height: 1; margin: 0; }
.cx-an-sub { font-size: 12.5px; color: var(--ink-2); max-width: 620px; line-height: 1.5; text-wrap: pretty; }
.cx-an-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cx-an-spec { font-family: var(--font-technical); font-size: 11px; color: var(--ink-2); margin-top: 6px; }
.cx-an-seg { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--cx-line); border-radius: 999px; padding: 2px; }
.cx-an-seg button { padding: 5px 13px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-2); font-family: inherit; font-size: 12px; cursor: pointer; min-height: 28px; transition: background var(--dur-fast) var(--ease-out); }
.cx-an-seg button.on { background: var(--ink); color: var(--ground); font-weight: 500; }
.cx-an-btn { padding: 7px 15px; border-radius: 999px; border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 12px; cursor: pointer; min-height: 32px; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out); }
.cx-an-btn:hover { background: var(--row-hover); }
.cx-an-btn.sec { border-color: var(--cx-brand); color: var(--cx-brand); font-weight: 500; }
.cx-an-btn.primary { background: var(--cx-brand); border-color: var(--cx-brand); color: var(--ground); font-weight: 500; padding: 8px 14px; }
.cx-an-btn.primary:hover { background: var(--cx-brand-deep); }
.cx-an-btn:disabled { opacity: 0.45; cursor: default; }
.cx-an-btn:focus-visible, .cx-an-seg button:focus-visible, .cx-an-chip:focus-visible, .cx-an-tpl:focus-visible, .cx-an-secpill:focus-visible, .cx-an-linkpill:focus-visible, .cx-an-sib:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }
.cx-an-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink-2); font-family: inherit; font-size: 11px; cursor: pointer; min-height: 26px; }
.cx-an-chip.on { border-color: var(--cx-brand); background: color-mix(in srgb, var(--cx-brand) 6%, transparent); color: var(--cx-brand); font-weight: 500; }
.cx-an-chip:disabled { opacity: 0.45; cursor: default; }
.cx-an-body { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.cx-an-vp { flex: 999 1 440px; min-width: min(100%, 380px); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.cx-an-vpbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--cx-line2); flex-wrap: wrap; }
.cx-an-caps { font-size: var(--text-caps); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--cx-muted); }
.cx-an-caps.attn { color: var(--cx-attn); }
.cx-an-caps.brand { color: var(--cx-brand); }
.cx-an-canvas { flex: none; height: 420px; position: relative; overflow: hidden; }
.cx-an-canvas:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: -2px; }
.cx-an-canvas canvas { display: block; }
.cx-an-lbl { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-technical); font-size: 11px; color: var(--ink-2); pointer-events: none; white-space: nowrap; }
.cx-an-lbl.on { color: var(--ink); }
.cx-an-lbl.snow { color: var(--cx-warn); }
.cx-an-lbl.wind { color: var(--cx-brand); }
.cx-an-vpfoot { display: flex; gap: 16px; padding: 8px 12px; border-top: 1px solid var(--cx-line2); font-size: 10.5px; color: var(--cx-muted); flex-wrap: wrap; align-items: center; }
.cx-an-views { display: flex; gap: 4px; font-family: var(--font-technical); }
.cx-an-views button { background: none; border: 0; padding: 2px 4px; font: inherit; color: var(--cx-muted); cursor: pointer; }
.cx-an-views button:hover, .cx-an-views button.on { color: var(--cx-brand); }
.cx-an-side { flex: 1 1 250px; min-width: min(100%, 240px); display: flex; flex-direction: column; gap: 14px; }
.cx-an-card { background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.cx-an-cardh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cx-an-id { font-family: var(--font-technical); font-size: 13px; color: var(--cx-brand); }
.cx-an-name { font-size: 14px; }
.cx-an-size { font-size: 11px; color: var(--cx-muted); }
.cx-an-rows { display: flex; flex-direction: column; border-top: 1px solid var(--cx-line2); }
.cx-an-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--cx-line2); font-size: 12px; }
.cx-an-row > span:first-child { color: var(--ink-2); }
.cx-an-row > span:last-child { font-family: var(--font-technical); text-align: right; }
.cx-an-gov { font-size: 10.5px; color: var(--cx-muted); line-height: 1.45; }
.cx-an-note { font-size: 11px; color: var(--ink-2); line-height: 1.45; }
.cx-an-note.warn { color: var(--cx-warn); }
.cx-an-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-an-check { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; align-items: baseline; }
.cx-an-check > span:first-child { color: var(--ink-2); }
.cx-an-check small { display: block; font-size: 10px; color: var(--cx-muted); }
.cx-an-check .cx-an-v { display: flex; gap: 8px; align-items: center; font-family: var(--font-technical); white-space: nowrap; }
.cx-an-strip { display: flex; flex-wrap: wrap; min-height: 130px; }
.cx-an-strip > div:first-child { flex: 999 1 380px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.cx-an-strip > div:last-child { flex: 1 1 200px; border-left: 1px solid var(--cx-line2); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; font-family: var(--font-technical); font-size: 11px; line-height: 1.7; color: var(--ink-2); white-space: pre; }
.cx-an-strip svg { width: 100%; height: 90px; display: block; }
.cx-an-axis { stroke: var(--ink); stroke-width: 1.2; }
.cx-an-dfill { fill: color-mix(in srgb, var(--cx-brand) 8%, transparent); stroke: none; }
.cx-an-dline { fill: none; stroke: var(--cx-brand); stroke-width: 1.4; }
.cx-an-more { margin-top: 8px; }
.cx-an-more > summary { cursor: pointer; list-style: none; padding: 6px 0; font-size: 12px; color: var(--cx-brand); }
.cx-an-more > summary::-webkit-details-marker { display: none; }
.cx-an-more > summary::before { content: '› '; }
.cx-an-more[open] > summary::before { content: '⌄ '; }
/* A1 */
.cx-an-thead, .cx-an-trow { display: flex; gap: 12px; align-items: center; }
.cx-an-thead > span { color: var(--cx-muted); font-family: inherit; font-size: inherit; }
.cx-an-thead { padding: 7px 12px; font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cx-muted); }
.cx-an-table { background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; overflow: hidden; margin-bottom: 28px; }
.cx-an-trow { padding: 11px 12px; border: 0; border-bottom: 1px solid var(--cx-line2); flex-wrap: wrap; cursor: pointer; width: 100%; box-sizing: border-box; background: none; text-align: left; font-family: inherit; color: var(--ink); transition: background var(--dur-fast) var(--ease-out); }
.cx-an-trow:last-child { border-bottom: 0; }
.cx-an-trow:hover { background: var(--row-hover); }
.cx-an-trow:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: -2px; }
.an-ref { width: 44px; flex: none; font-family: var(--font-technical); font-size: 12px; color: var(--cx-brand); }
.an-frame { flex: 1.4; min-width: 140px; font-size: 12.5px; }
.an-frame small { display: block; font-size: 10.5px; color: var(--cx-muted); }
.an-links { flex: 1; min-width: 120px; font-family: var(--font-technical); font-size: 11px; color: var(--ink-2); }
.an-util { width: 128px; flex: none; display: flex; align-items: center; gap: 8px; font-family: var(--font-technical); font-size: 11.5px; }
.an-status { width: 60px; flex: none; display: flex; justify-content: flex-end; }
.cx-an-new { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.cx-an-new > span:last-child { font-size: 11px; color: var(--cx-muted); }
.cx-an-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cx-an-tpl { background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; text-align: left; font-family: inherit; color: var(--ink); }
.cx-an-tpl.on { border-color: var(--cx-brand); box-shadow: inset 0 0 0 1px var(--cx-brand); }
.cx-an-tpl:disabled { cursor: default; opacity: 0.5; }
.cx-an-tpl svg { width: 100%; height: 54px; display: block; }
.cx-an-tpl .g { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.cx-an-tpl .gr { stroke: var(--hair-strong); stroke-width: 1; }
.cx-an-tpl b { font-size: 12.5px; font-weight: 500; }
.cx-an-tpl small { font-size: 10.5px; color: var(--cx-muted); }
.cx-an-params { background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; padding: 14px 16px; display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; }
.cx-an-param { display: flex; flex-direction: column; gap: 4px; min-width: 76px; }
.cx-an-param > span { font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cx-muted); }
.cx-an-param input, .cx-an-param select { font-family: var(--font-technical); font-size: 15px; border: 0; border-bottom: 1px solid var(--cx-line); padding: 0 0 3px; background: transparent; color: var(--ink); width: 76px; border-radius: 0; }
.cx-an-param input:focus-visible, .cx-an-param select:focus-visible { outline: 2px solid var(--cx-attn); outline-offset: 2px; }
/* A3 */
.cx-an-linkpill { font-family: var(--font-technical); font-size: 10px; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--cx-brand); background: var(--surface); color: var(--cx-brand); cursor: pointer; }
.cx-an-banner { border: 1px solid var(--cx-warn-bar); background: color-mix(in srgb, var(--cx-warn-bar) 6%, transparent); border-radius: 10px; padding: 12px 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cx-an-banner > div { flex: 1 1 320px; display: flex; flex-direction: column; gap: 3px; }
.cx-an-banner .cx-an-caps { color: var(--cx-warn); }
.cx-an-banner p { font-size: 13px; line-height: 1.5; margin: 0; }
.cx-an-main { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.cx-an-left { flex: 999 1 420px; min-width: min(100%, 380px); display: flex; flex-direction: column; gap: 18px; }
.cx-an-sechead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.cx-an-sechead > span:last-child { font-size: 11px; color: var(--cx-muted); }
.cx-an-list { background: var(--surface); border: 1px solid var(--cx-line); border-radius: 10px; overflow: hidden; }
.cx-an-irow { display: flex; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--cx-line2); align-items: center; flex-wrap: wrap; }
.cx-an-irow:last-child { border-bottom: 0; }
.cx-an-irow.hl, .cx-an-irow.gov { background: color-mix(in srgb, var(--cx-brand) 3.5%, transparent); }
.cx-an-irow > .k { flex: 1; min-width: 140px; font-size: 12.5px; }
.cx-an-irow > .k small { display: block; font-family: var(--font-technical); font-size: 10.5px; color: var(--cx-muted); }
.cx-an-irow > .v { font-family: var(--font-technical); font-size: 12.5px; min-width: 90px; text-align: right; }
.cx-an-irow > .v.moved { color: var(--cx-warn); }
.cx-an-irow > .s { width: 108px; flex: none; display: flex; justify-content: flex-end; }
.cx-an-irow > .u { width: 130px; flex: none; display: flex; align-items: center; gap: 8px; font-family: var(--font-technical); font-size: 11.5px; }
.cx-an-irow > .st { width: 44px; flex: none; display: flex; justify-content: flex-end; }
.cx-an-src { font-family: var(--font-technical); font-size: 9px; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; text-transform: uppercase; }
.cx-an-src.frame { border: 1px solid var(--cx-brand); color: var(--cx-brand); }
.cx-an-src.yours { background: color-mix(in srgb, var(--cx-warn-bar) 10%, transparent); color: var(--cx-warn); }
.cx-an-src.drawing, .cx-an-src.calc { background: color-mix(in srgb, var(--cx-brand) 8%, transparent); color: var(--cx-brand-deep); }
.cx-an-src.default { border: 1px dashed var(--hair-strong); color: var(--cx-muted); }
.cx-an-secpills { display: flex; gap: 4px; flex-wrap: wrap; }
.cx-an-secpill { font-family: var(--font-technical); font-size: 11px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink-2); cursor: pointer; min-height: 26px; }
.cx-an-secpill.on { border-color: var(--ink); background: var(--ink); color: var(--ground); }
.cx-an-secpill:disabled { cursor: default; opacity: 0.6; }
.cx-an-sib { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; align-items: baseline; padding: 4px 0; background: none; border: 0; text-align: left; font-family: inherit; color: var(--ink); width: 100%; cursor: pointer; }
.cx-an-sib:disabled { cursor: default; }
.cx-an-sib .n { font-size: 10px; letter-spacing: 0.04em; color: var(--cx-muted); }
.cx-an-sib .n.warn { color: var(--cx-warn); }
.cx-an-mini { width: 100%; height: 110px; display: block; }
.cx-an-mini .ctx { fill: none; stroke: var(--hair-strong); stroke-width: 1.4; }
.cx-an-mini .on { stroke: var(--cx-brand); stroke-width: 3.5; stroke-linecap: round; }
.cx-an-mini .pin { fill: var(--ink); }
.cx-an-mini text { font-family: var(--font-technical); font-size: 10px; fill: var(--cx-brand); }
.cx-an-trail { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; border-top: 1px solid var(--cx-line2); padding-top: 8px; }
.cx-an-trail > span:first-child { color: var(--ink-2); }
.cx-an-trail > span:last-child { font-family: var(--font-technical); font-size: 11px; text-align: right; }
.cx-nav-tag { font-family: var(--font-technical); font-size: 9px; color: var(--cx-brand); margin-left: auto; padding-left: 4px; }
@media (max-width: 760px) {
  .cx-an-btn, .cx-an-chip, .cx-an-secpill, .cx-an-seg button { min-height: 44px; }
  .cx-an-thead { display: none; }
  .an-util { width: 100%; }
}

/* ── WHATSAPP IN TRACK (17/10/2026, "Track · WhatsApp screens") ─────────────
   The channel is an icon and a word, never a fill: the WhatsApp glyph is the
   one place --wa-green appears. Rows, the reader and the composer are Mail's
   and the project page's own (.mrw-*, .mx-r-*, .mx-ai-*, .mq-chip); only what
   WhatsApp adds is here — photos, voice notes, the window, templates, import. */
.wa-ch { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.wa-ch svg { width: 12px; height: 12px; flex: none; color: var(--wa-green); }
.wa-ch.is-fwd svg { color: var(--ink-2); }
.wa-ch.is-sent { color: var(--link); }
.mrw-dir .wa-ch { display: flex; margin-top: 6px; }
.mx-crow-top .wa-ch, .mq-c-from .wa-ch { letter-spacing: 0; }
.wa-row.is-attn, .wa-mrow.is-attn { box-shadow: inset 3px 0 0 var(--brand-orange); }
.wa-body { font-size: var(--text-body); line-height: 1.55; color: var(--ink); max-width: 84ch; white-space: pre-line; text-wrap: pretty; overflow-wrap: anywhere; }
.wa-body.is-quiet { color: var(--ink-2); }
.wa-meta { display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.wa-await { color: var(--brand-orange); font-weight: var(--weight-medium); }
.wa-why { color: var(--ink-3); }
.wa-rec { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.wa-rec .mq-link { font-size: 12px; }
.wa-doc { font-size: 13px; color: var(--ink-2); border: 1px solid var(--hair); border-radius: 8px; padding: 7px 11px; align-self: flex-start; }
.wa-num { font-family: var(--font-technical); }
.wa-photos { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wa-ph { appearance: none; border: 0; padding: 6px 7px; cursor: zoom-in; width: 96px; height: 72px; border-radius: 8px; background: var(--surface-sunk);
  display: flex; align-items: flex-end; position: relative; overflow: hidden; font-family: var(--font-technical); font-size: 10.5px; color: var(--ink-2); }
.wa-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wa-ph:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.wa-photos.is-small .wa-ph { width: 72px; height: 54px; }
.wa-voice { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.wa-play { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--chip-border); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; }
.wa-play:hover, .wa-play.is-on { border-color: var(--link); color: var(--link); }
.wa-play.is-loading { opacity: 0.6; }
.wa-play:disabled { opacity: 0.4; cursor: default; }
.wa-wave { flex: 1; max-width: 220px; height: 2px; background: var(--hair-strong); border-radius: 2px; position: relative; overflow: hidden; }
.wa-wave-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--link); }
.wa-tag { font-family: var(--font-technical); font-size: 11px; color: var(--ink-3); }
.wa-trans { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); white-space: normal; text-wrap: pretty; margin-top: 6px; max-width: 84ch; }
.wa-trans.is-pending { font-size: 12.5px; color: var(--ink-3); }
.wa-head-l { display: flex; flex-direction: column; gap: 6px; }
.wa-head-r { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wa-import-link { font-size: 13px; }

/* Mail */
.wa-new-link { padding: 0 10px; font-size: 13px; }
.wa-chiprow { display: flex; gap: 10px 22px; align-items: center; flex-wrap: wrap; }
.wa-chan .mq-chip.is-sm { padding: 4px 11px; }
.mx-list-head:has(.wa-chan) { flex-wrap: wrap; }
.mx-list-head .wa-chan { width: 100%; flex: 1 0 100%; padding-top: 6px; }
.wa-crow-pill { align-self: flex-start; margin-top: 4px; cursor: default; }
.wa-triage { font-size: 11.5px; color: var(--brand-orange); margin-top: 4px; }
.wa-chip-triage { color: var(--brand-orange); border-color: var(--brand-orange); cursor: default; }
.wa-msg .mx-r-text { margin: 0; }
.wa-msg .wa-photos, .wa-msg .wa-voice { margin-top: 0; }
.wa-msg.is-out .mx-avatar { background: var(--surface-sunk); color: var(--ink-2); }
.wa-reader .mx-ai-status { font-size: 12px; color: var(--brand-orange); }
.wa-rec-chips { gap: 6px; }
.wa-rec-chips .mq-chip { padding: 4px 10px; font-size: 12px; }
.wa-rec-chips .mq-chip.is-suggest { border-color: var(--link); color: var(--link); }
.wa-kind { font-size: 11px; color: var(--link); }
.wa-ov { padding: 0; }
.wa-ov .wa-reader { min-height: 100%; }
.wa-ov .mx-r-main, .wa-ov .mx-r-ai { max-height: none; }
.wa-ov-note { font-size: 12.5px; color: var(--status-ok-ui); padding: 8px 14px; border-bottom: 1px solid var(--hair); }

/* Composer (board 3) */
.wa-compose { gap: 12px; }
.wa-to { gap: 10px; flex-wrap: wrap; }
.wa-to-name { color: var(--ink); font-size: 13px; }
.wa-window { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.wa-window b { font-weight: var(--weight-medium); color: var(--ink); }
.wa-dot-ok { background: var(--status-ok-ui); }
.wa-dot-attn { background: var(--brand-orange); }
.wa-editor { width: 100%; border: 0; background: transparent; resize: vertical; font-family: inherit; padding: 0; box-sizing: border-box; }
.wa-actions .mq-primary { margin: 0; align-self: auto; }
.wa-foot { font-size: 11.5px; color: var(--ink-3); }
.wa-explain { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.wa-tpl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wa-tpl { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--hair); border-radius: 10px; padding: 12px 14px; cursor: pointer; min-width: 0; }
.wa-tpl:hover { border-color: var(--link); }
.wa-tpl:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.wa-tpl.is-on { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link); background: var(--tint-blue); }
.wa-tpl.is-off { cursor: default; opacity: 0.55; }
.wa-tpl.is-off:hover { border-color: var(--hair); }
.wa-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--hair-strong); flex: none; margin-top: 2px; display: grid; place-items: center; box-sizing: border-box; }
.wa-tpl.is-on .wa-radio { border-color: var(--link); }
.wa-tpl.is-on .wa-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--link); }
.wa-tpl-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wa-tpl-name { font-size: 13.5px; font-weight: var(--weight-medium); color: var(--ink); }
.wa-tpl-about { font-size: 12px; color: var(--ink-3); }
.wa-flds { display: flex; gap: 14px; flex-wrap: wrap; }
.wa-fld { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 0; }
.wa-fld label, .wa-eyebrow { font-size: 10.5px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.wa-fld input, .wa-select, .wa-set-in { min-height: 38px; border: 1px solid var(--chip-border); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 13.5px;
  color: var(--ink); background: var(--surface); box-sizing: border-box; width: 100%; }
.wa-fld input:focus, .wa-select:focus, .wa-set-in:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.wa-preview { background: var(--brief-bg); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.wa-preview-text { font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.wa-preview-text b { font-weight: var(--weight-medium); }
.wa-blank { color: var(--brand-orange); }
.wa-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.wa-note-bad { font-size: 12.5px; color: var(--brand-orange); line-height: 1.5; }
.wa-ok { font-size: 12px; color: var(--status-ok-ui); }
.wa-dim { font-size: 12px; color: var(--ink-3); }
.wa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Import (board 6) */
.wa-imp { display: flex; flex-direction: column; gap: 20px; }
.wa-drop, .wa-file { display: flex; align-items: center; gap: 14px; border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px; position: relative; }
.wa-drop { border-style: dashed; cursor: pointer; }
.wa-drop.is-over, .wa-drop:hover { border-color: var(--link); background: var(--tint-blue); }
.wa-drop:focus-within { border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.wa-zip { width: 36px; height: 36px; border-radius: 8px; background: var(--brief-bg); display: grid; place-items: center; flex: none;
  font-family: var(--font-technical); font-size: 10px; color: var(--ink-2); }
.wa-drop-text, .wa-file-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wa-drop-title, .wa-file-name { font-size: 14px; font-weight: var(--weight-medium); color: var(--ink); }
.wa-drop-sub, .wa-file-sub { font-size: 12.5px; color: var(--ink-3); }
.wa-another { position: relative; cursor: pointer; }
.wa-sec { display: flex; flex-direction: column; gap: 8px; }
.wa-who-card { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.wa-who { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 120px; gap: 14px; align-items: center; padding: 11px 16px; font-size: 13.5px; color: var(--ink); }
.wa-who + .wa-who, .wa-addc + .wa-who { border-top: 1px solid var(--hair-soft); }
.wa-who.is-attn { box-shadow: inset 3px 0 0 var(--brand-orange); }
.wa-who-note { color: var(--ink-2); }
.wa-who-r { text-align: right; }
.wa-addc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px 12px; background: var(--surface-sunk-soft); font-size: 13px; border-top: 1px solid var(--hair-soft); }
.wa-addc b { font-weight: var(--weight-medium); }
.wa-addc input { min-height: 34px; border: 1px solid var(--chip-border); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); }
.wa-opts { display: flex; flex-direction: column; gap: 10px; }
.wa-opt { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ink); }
.wa-opt input { width: 15px; height: 15px; accent-color: var(--link); margin: 0; }
.wa-progress { font-size: 12.5px; color: var(--ink-2); min-height: 18px; }
.wa-new { display: flex; flex-direction: column; gap: 16px; }

/* Settings › WhatsApp */
.wa-set-card { display: flex; flex-direction: column; gap: 10px; max-width: 980px; }
.wa-set-me { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.wa-set-me .mr-f { min-width: 260px; }
.wa-set-me .mq-primary { margin: 0; align-self: auto; }
.wa-set-help { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; max-width: 80ch; }
.wa-set-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 120px; gap: 14px; align-items: center; padding: 11px 4px;
  border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--ink); }
.wa-set-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-set-row.is-tpl { grid-template-columns: minmax(0, 1.4fr) 110px 110px 120px; }
.wa-set-row.is-staff { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); padding: 8px 4px; }
.wa-set-head { padding: 0 4px 9px; border-bottom: 1px solid var(--rule-head); font-size: 9.5px; font-weight: var(--weight-medium); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); }
.wa-st-approved { color: var(--status-ok-ui); }
.wa-st-rejected { color: var(--brand-orange); }
.wa-st-draft, .wa-st-submitted { color: var(--ink-3); }

@media (max-width: 760px) {
  .wa-head-r { gap: 10px; }
  .wa-tpl-grid { grid-template-columns: minmax(0, 1fr); }
  .wa-who { grid-template-columns: minmax(0, 1fr) auto; }
  .wa-who-note { grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; }
  .wa-set-row, .wa-set-row.is-tpl, .wa-set-row.is-staff { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wa-ph { width: 88px; height: 66px; }
  .wa-play { width: 44px; height: 44px; }
  .wa-chan .mq-chip { min-height: 44px; }
}
/* ── HELP ART (views/help-art.js) ────────────────────────────────────────────
   Small drawings that show an action rather than describe it. The resting
   frame is the finished picture; motion is added by .ha-run (loops), .ha-once
   (plays once) or hovering a Help tile. Every keyframe starts from "not there
   yet", so reduced motion simply shows the end state. Loops are linear with
   the pacing written into the keyframe stops (design-lint rule 3). */
.ha-wrap { display: block; width: 100%; }
.ha { display: block; width: 100%; height: auto; overflow: visible; }
.ha-paper { fill: var(--surface); }
.ha-edge { stroke: var(--hair); stroke-width: 1; }
.ha-dash { stroke-dasharray: 3 3; }
.ha-quiet { fill: var(--hair); }
.ha-ink { fill: var(--ink-3); }
.ha-tint { fill: var(--tint-blue-2); }
.ha-brand { fill: var(--link); }
.ha-brand-soft { fill: var(--cx-brand-tint); }
.ha-on-brand { stroke: var(--ground); fill: none; }
.ha-hot { fill: var(--brand-orange); }
.ha-hot-soft { fill: var(--cx-attn-tint); }
.ha-ok { fill: var(--status-ok-ui); }
.ha-ok-soft { fill: var(--cx-ok-tint); }
.ha-bad { fill: var(--cx-bad); }
.ha-calc { fill: var(--cx-calc); }
.ha-calc-ink { fill: var(--cx-calc-ink); font-family: var(--font-technical); font-size: 11px; font-weight: 500; }
.ha-grid path { stroke: var(--hair); stroke-width: 0.6; }
.ha-wall { fill: var(--ink-3); opacity: 0.55; }
.ha-beam { stroke: var(--link); stroke-width: 4; stroke-linecap: round; fill: none; }
.ha-ring { fill: var(--surface); stroke: var(--status-ok-ui); stroke-width: 2; }
.ha-cursor { fill: var(--ink); stroke: var(--surface); stroke-width: 0.8; }
.ha-support { fill: var(--ink-3); }
.ha-arrow { stroke: var(--brand-orange); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ha-tickmark { stroke: var(--ink); stroke-width: 1.2; }
.ha-tick-stroke { stroke: var(--status-ok-ui); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ha-sig { stroke: var(--link); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.ha-strike { stroke: var(--brand-orange); stroke-width: 1.6; fill: none; }
.ha-doc { fill: var(--tint-blue-2); stroke: var(--link); stroke-width: 1; }
.ha-folder { fill: var(--cx-brand-tint); stroke: var(--link); stroke-width: 1.2; stroke-linejoin: round; }
.ha-env { stroke: var(--ink-3); stroke-width: 1.2; fill: none; }
/* Track-wide tiles (18/10/2026). */
.ha-big { fill: var(--link); font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.04em; } /* size: the SVG attribute (viewBox units) */
.ha-chip-ink { fill: var(--surface); font-family: var(--font-sans); font-size: 13px; font-weight: 500; }
.ha-navy { fill: var(--brand-navy); }
.ha-on-navy { fill: var(--brand-white); opacity: 0.85; }
.ha-on-navy-soft { fill: var(--brand-white); opacity: 0.3; }
.ha-on-hot { fill: var(--brand-white); }
.ha-markup { stroke: var(--markup-red); stroke-width: 1.8; fill: none; stroke-linejoin: round; }
.ha-label { fill: var(--link); font-family: var(--font-technical); font-size: 9px; }
.ha-rule { stroke: var(--hair); stroke-width: 2; }
.ha-thread { stroke: var(--link); stroke-width: 2; fill: none; }
.ha-step { fill: var(--ink-3); font-family: var(--font-technical); font-size: 6px; }
.ha-step-l { fill: var(--ink-2); font-family: var(--font-sans); font-size: 6px; }
.ha-draw, .ha-tick { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ha-pop, .ha-stamp, .ha-fill, .ha-grow { transform-box: fill-box; transform-origin: center; }
.ha-fill, .ha-grow { transform-origin: left center; }
.ha-wrap * { animation-delay: calc(var(--d, 0) * 1s); }

@keyframes ha-draw { 0%, 8% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes ha-tick { 0%, 10% { stroke-dashoffset: 1; } 30%, 100% { stroke-dashoffset: 0; } }
@keyframes ha-pop { 0%, 20% { transform: scale(0); opacity: 0; } 34% { transform: scale(1.25); opacity: 1; } 42%, 100% { transform: scale(1); opacity: 1; } }
@keyframes ha-drop { 0%, 12% { transform: translateY(-10px); opacity: 0; } 30%, 100% { transform: none; opacity: 1; } }
@keyframes ha-slide { 0%, 12% { transform: translateY(-15px); } 30%, 100% { transform: none; } }
@keyframes ha-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes ha-beat { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes ha-glide { 0% { transform: translate(28px, 48px); opacity: 0; } 8% { opacity: 1; } 45%, 80% { transform: translate(128px, 48px); opacity: 1; } 100% { transform: translate(128px, 48px); opacity: 0; } }
@keyframes ha-rain { 0%, 22% { transform: translateY(-12px); opacity: 0; } 36% { opacity: 1; } 48%, 100% { transform: none; opacity: 1; } }
@keyframes ha-stack { 0%, 10% { transform: translateY(-14px); opacity: 0; } 28%, 100% { transform: none; opacity: 1; } }
@keyframes ha-fill { 0%, 10% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
@keyframes ha-reveal { 0%, 14% { opacity: 0; transform: translateX(-6px); } 30%, 100% { opacity: 1; transform: none; } }
@keyframes ha-lift { 0%, 20% { transform: none; } 40%, 100% { transform: translateY(-6px); } }
@keyframes ha-fly { 0%, 6% { transform: none; opacity: 1; } 42% { transform: translate(78px, 8px) scale(0.45); opacity: 1; } 50%, 100% { transform: translate(78px, 8px) scale(0.45); opacity: 0; } }

:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-draw { animation: ha-draw 4.2s linear infinite; }
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-tick { animation: ha-tick 4.2s linear infinite; }
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-pop,
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-stamp { animation: ha-pop 4.2s linear infinite; }
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-drop { animation: ha-drop 4.2s linear infinite; }
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-slide { animation: ha-slide 4.2s linear infinite; }
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-pulse { animation: ha-pulse 1.4s linear infinite; }
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-beat { animation: ha-beat 1.2s steps(1) infinite; }
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-glide { animation: ha-glide 4.2s linear infinite; }
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-rain { animation: ha-rain 4.2s linear infinite; }
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-stack { animation: ha-stack 4.2s linear infinite; }
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-fill,
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-grow { animation: ha-fill 4.2s linear infinite; }
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-reveal { animation: ha-reveal 4.2s linear infinite; }
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-lift { animation: ha-lift 4.2s linear infinite; }
:is(.ha-run, .ha-once, .hp-wt:hover, .hp-wt:focus-visible) .ha-fly { animation: ha-fly 4.2s linear infinite; }
.ha-once * { animation-iteration-count: 1 !important; }
.ha-glide { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ha-wrap *, .hp-wt .ha-wrap * { animation: none !important; } }

/* ── HELP, REDESIGNED (Karan 17/10/2026) ─────────────────────────────────────
   Help now leads with doing, not reading: "Show me how" tiles that open a
   step-by-step walkthrough on real screens, then the topics, then the
   housekeeping columns. */
.hp-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.hp-guide-card.hp-startcard { display: grid; grid-template-columns: 172px minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: 20px; row-gap: 14px; align-items: start; padding: 20px 22px; }
.hp-guide-card.hp-startcard .hp-start-art { grid-row: 1 / span 2; display: block; border-radius: 10px; padding: 10px 10px 4px;
  background: rgba(255, 255, 255, 0.06); }
.hp-guide-card.hp-startcard .hp-guide-go, .hp-guide-card.hp-startcard .hp-startrow { grid-column: 2; align-self: end; }
@media (max-width: 560px) { .hp-guide-card.hp-startcard { grid-template-columns: 1fr; } .hp-guide-card.hp-startcard .hp-start-art { grid-row: auto; }
  .hp-guide-card.hp-startcard .hp-guide-go, .hp-guide-card.hp-startcard .hp-startrow { grid-column: auto; } }
.hp-guide-card.hp-startcard .ha-quiet { fill: rgba(255, 255, 255, 0.18); }
.hp-guide-card.hp-startcard .ha-step-l, .hp-guide-card.hp-startcard .ha-step { fill: var(--brand-on-ink-1); }
.hp-guide-card.hp-startcard .ha-paper { fill: rgba(255, 255, 255, 0.08); }
.hp-guide-card.hp-startcard .ha-edge { stroke: rgba(255, 255, 255, 0.2); }
.hp-guide-card.hp-startcard .ha-brand { fill: var(--brand-white); }
.hp-guide-card.hp-startcard .ha-rule { stroke: rgba(255, 255, 255, 0.18); }
.hp-guide-card.hp-startcard .ha-thread { stroke: var(--brand-white); }
.hp-guide-card.hp-startcard .ha-tint, .hp-guide-card.hp-startcard .ha-brand-soft { fill: rgba(255, 255, 255, 0.14); }
.hp-startrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hp-guide-card.hp-startcard .hp-startbtn { appearance: none; font-family: inherit; cursor: pointer; min-height: 40px; padding: 0 16px;
  border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.35); background: none; color: var(--brand-white); font-size: 13px; }
.hp-guide-card.hp-startcard .hp-startbtn.go { background: var(--brand-white); color: var(--brand-navy); border-color: var(--brand-white); font-weight: var(--weight-medium); }
.hp-guide-card.hp-startcard .hp-startbtn:hover { border-color: var(--brand-white); }
.hp-startcard-meta { font-size: 12px; color: var(--brand-on-ink-2); margin-left: auto; }
div.hp-guide-card { cursor: default; }
div.hp-guide-card:hover { transform: none; box-shadow: none; }

.hp-sec { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 80px; }
.hp-sec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hp-sec-title { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-medium); letter-spacing: -0.02em; color: var(--ink); }
.hp-sec-note { font-size: 13px; color: var(--ink-3); }
.hp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.hp-chip { appearance: none; font-family: inherit; cursor: pointer; min-height: 32px; padding: 0 13px; border-radius: var(--radius-pill);
  border: 1px solid var(--chip-border); background: none; color: var(--ink-2); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.hp-chip b { font-weight: var(--weight-regular); color: var(--ink-3); font-family: var(--font-technical); font-size: 11px; }
.hp-chip.on { background: var(--chip-active-bg); border-color: var(--chip-active-bg); color: var(--chip-active-ink); }
.hp-chip.on b { color: inherit; opacity: 0.7; }

.hp-wts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
/* "All": one small grid per area; the groups wrap side by side, each as wide
   as the tiles it holds (--n), so a one-tile area never owns a whole row. */
.hp-wts.hp-wts-grouped { display: flex; flex-wrap: wrap; gap: 26px 14px; align-items: flex-start; }
.hp-wt-sec { flex: var(--n) 1 calc(var(--n) * 250px + (var(--n) - 1) * 14px); min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.hp-wt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.hp-wt-group { display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-technical); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.hp-wt-group b { font-weight: 400; color: var(--ink-3); opacity: 0.7; }
.hp-wt { appearance: none; font-family: inherit; text-align: left; cursor: pointer; color: var(--ink);
  display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface); overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.hp-wt:hover, .hp-wt:focus-visible { transform: translateY(-2px); border-color: var(--link); box-shadow: 0 10px 28px rgba(12, 17, 57, 0.1); }
.hp-wt-art { position: relative; display: block; padding: 16px 26px 12px; background: var(--tint-blue); border-bottom: 1px solid var(--hair); }
.hp-wt-play { position: absolute; right: 12px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); color: var(--link); box-shadow: 0 2px 8px rgba(12, 17, 57, 0.12);
  transition: transform var(--dur-fast) var(--ease-out); }
.hp-wt:hover .hp-wt-play { transform: scale(1.1); }
.hp-wt-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; flex: 1; }
.hp-wt-area { font-size: var(--text-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-orange); font-weight: var(--weight-medium); }
.hp-wt-title { font-size: 15.5px; font-weight: var(--weight-medium); letter-spacing: -0.01em; line-height: 1.3; }
.hp-wt-line { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.hp-wt-meta { margin-top: auto; padding-top: 8px; font-size: 11.5px; color: var(--ink-3); font-family: var(--font-technical); }
.hp-wt-done { color: var(--status-ok-ui); }

/* The walkthrough viewer: a screenshot that zooms to each step and rings it. */
.wt-scrim { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  background: rgba(12, 17, 57, 0.55); animation: bm-fade var(--dur-base) var(--ease-out) both; }
.wt { width: min(1240px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--ink); border-radius: 18px; box-shadow: var(--shadow-dialog);
  animation: bm-rise var(--dur-slow) var(--ease-out) both; }
.wt-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px 14px 24px; border-bottom: 1px solid var(--hair); }
.wt-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wt-eyebrow { font-size: var(--text-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-orange); font-weight: var(--weight-medium); }
.wt-title { margin: 0; font-size: 17px; font-weight: var(--weight-medium); letter-spacing: -0.01em; }
.wt-x { appearance: none; border: 1px solid var(--hair); background: none; color: var(--ink-2); width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer; font-size: 16px; font-family: inherit; flex: none; }
.wt-x:hover { color: var(--ink); border-color: var(--ink-3); }
.wt-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; flex: 1; overflow: auto; }
.wt-stage { padding: 20px; background: var(--surface-sunk); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wt-frame { border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 8px 30px rgba(12, 17, 57, 0.1); }
.wt-chrome { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-bottom: 1px solid var(--hair); background: var(--surface); }
.wt-chrome i { width: 8px; height: 8px; border-radius: 50%; background: var(--hair); }
.wt-url { margin-left: 10px; font-family: var(--font-technical); font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wt-view { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ground); }
.wt-pan { position: absolute; inset: 0; transform-origin: 0 0; transition: transform var(--bm-dur-draw, 600ms) var(--ease-out); }
.wt-pan img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; user-select: none; -webkit-user-drag: none; }
.wt-ring { position: absolute; border-radius: 8px; border: calc(2.5px / var(--s, 1)) solid var(--brand-orange);
  box-shadow: 0 0 0 9999px rgba(12, 17, 57, 0.26); pointer-events: none;
  transition: left var(--bm-dur-draw, 600ms) var(--ease-out), top var(--bm-dur-draw, 600ms) var(--ease-out),
    width var(--bm-dur-draw, 600ms) var(--ease-out), height var(--bm-dur-draw, 600ms) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.wt-ring::after { content: ''; position: absolute; inset: calc(-2.5px / var(--s, 1)); border-radius: inherit;
  border: calc(2.5px / var(--s, 1)) solid var(--brand-orange); animation: wt-ping 1.8s linear infinite; }
.wt-ring.off { opacity: 0; }
@keyframes wt-ping { 0% { transform: scale(1); opacity: 0.8; } 60%, 100% { transform: scale(1.12); opacity: 0; } }
.wt-stagebar { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); }
.wt-zoom { appearance: none; font-family: inherit; cursor: pointer; border: 1px solid var(--chip-border); background: var(--surface); color: var(--ink-2);
  min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); font-size: 12px; }
.wt-zoom:hover { color: var(--link); border-color: var(--link); }
.wt-side { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; min-width: 0; border-left: 1px solid var(--hair); }
.wt-count { font-family: var(--font-technical); font-size: 12px; color: var(--ink-3); }
.wt-count b { color: var(--brand-orange); font-weight: var(--weight-medium); }
.wt-step-title { margin: 0; font-size: var(--text-h3); font-weight: var(--weight-medium); letter-spacing: -0.02em; line-height: 1.2; }
.wt-step-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.wt-tip { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--cx-attn-tint); font-size: 13px; line-height: 1.55; color: var(--ink); }
.wt-tip::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--brand-orange); }
.wt-anim { animation: bm-rise var(--dur-slow) var(--ease-out) both; }
.wt-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--hair); padding-top: 12px; }
.wt-li { appearance: none; width: 100%; text-align: left; font-family: inherit; cursor: pointer; display: flex; gap: 10px; align-items: baseline;
  padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink-3); font-size: 13px; line-height: 1.35; }
.wt-li:hover { background: var(--row-hover); color: var(--ink); }
.wt-li span { font-family: var(--font-technical); font-size: 11px; flex: none; width: 18px; }
.wt-li.on { color: var(--ink); background: var(--tint-blue); }
.wt-li.on span { color: var(--brand-orange); }
.wt-li.done span { color: var(--status-ok-ui); }
/* Autoplay (help-walkthrough.js): a bar fills along the foot of the current step
   for as long as that step is held; it freezes while held, and is gone when
   autoplay is off or on the last step. */
.wt-li { position: relative; overflow: hidden; }
.wt-li.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 2px; border-radius: 1px;
  background: var(--link); transform-origin: left; transform: scaleX(0); opacity: 0; }
.wt[data-auto="run"] .wt-li.on::after, .wt[data-auto="held"] .wt-li.on::after { opacity: 0.55; animation: wt-fill var(--wt-dur, 6s) linear forwards; }
.wt[data-auto="held"] .wt-li.on::after { animation-play-state: paused; }
@keyframes wt-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .wt-li.on::after { animation: none !important; opacity: 0 !important; } }
.wt-nav { margin-top: auto; display: flex; gap: 8px; align-items: center; padding-top: 10px; }
.wt-btn { appearance: none; font-family: inherit; cursor: pointer; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--chip-border); background: var(--surface); color: var(--ink); font-size: 14px; }
.wt-btn:hover { border-color: var(--link); color: var(--link); }
.wt-btn.go { margin-left: auto; background: var(--link); border-color: var(--link); color: var(--ground); font-weight: var(--weight-medium); }
.wt-btn.go:hover { background: var(--cx-brand-deep); color: var(--ground); }
.wt-btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 900px) {
  .wt-note { display: none; }
  .wt-main { grid-template-columns: 1fr; }
  .wt-side { border-left: 0; border-top: 1px solid var(--hair); padding: 18px; }
  .wt-list { display: none; }
  .wt-stage { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .wt-pan, .wt-ring { transition: none; } .wt-ring::after { animation: none; } }

/* ── CALCULATE GUIDED TOUR (views/calc-tour.js) ──────────────────────────────
   The page dims; one control is lit; a card beside it says what it is for. */
.cx-guidebtn { padding: 0 14px 0 8px; gap: 7px; }
.cx-guide-q { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--cx-brand-tint); color: var(--cx-brand); font-size: 12.5px; font-weight: var(--weight-medium); }
.ct { position: relative; z-index: 1200; }
.ct-veil { position: fixed; inset: 0; background: rgba(12, 17, 57, 0.02); }
.ct-hole { position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(12, 17, 57, 0.5), 0 0 0 2px var(--brand-orange);
  transition: left var(--dur-slow) var(--ease-out), top var(--dur-slow) var(--ease-out), width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out); }
.ct-hole::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--brand-orange); animation: wt-ping 1.8s linear infinite; }
.ct-centre .ct-hole { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 9999px rgba(12, 17, 57, 0.6); }
.ct-centre .ct-hole::after { display: none; }
.ct-card { position: fixed; width: 360px; max-width: calc(100vw - 32px); border-radius: 16px; overflow: hidden;
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(12, 17, 57, 0.35);
  transition: left var(--dur-slow) var(--ease-out), top var(--dur-slow) var(--ease-out); }
.ct-card:focus-visible { box-shadow: 0 24px 60px rgba(12, 17, 57, 0.35), var(--focus-ring); }
.ct-card.ct-wide { width: 460px; }
.ct-centre .ct-card { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.ct-in .ct-body, .ct-in .ct-art { animation: bm-rise var(--dur-slow) var(--ease-out) both; }
.ct-out { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.ct-art { padding: 18px 34px 12px; background: var(--tint-blue); border-bottom: 1px solid var(--hair); }
.ct-wide .ct-art { padding: 22px 48px 14px; }
.ct-body { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 8px; }
.ct-eyebrow { display: flex; align-items: center; gap: 8px; font-size: var(--text-caps); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink-3); font-weight: var(--weight-medium); }
.ct-c { width: 16px; height: 16px; border-radius: 4px; display: inline-grid; place-items: center; background: var(--cx-brand); color: var(--ground);
  font-size: 10px; letter-spacing: 0; }
.ct-title { margin: 2px 0 0; font-size: 17px; font-weight: var(--weight-medium); letter-spacing: -0.015em; line-height: 1.25; }
.ct-text { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.ct-text p { margin: 0 0 8px; }
.ct-text p:last-child { margin-bottom: 0; }
.ct-text b { color: var(--ink); font-weight: var(--weight-medium); }
.ct-kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--hair); border-bottom-width: 2px; border-radius: 5px;
  font-family: var(--font-technical); font-size: 11.5px; color: var(--ink); background: var(--surface-sunk); text-align: center; }
.ct-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.ct-dots { display: flex; gap: 5px; }
.ct-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hair); transition: width var(--dur-base) var(--ease-out); }
.ct-dots i.done { background: var(--link); opacity: 0.45; }
.ct-dots i.on { width: 18px; border-radius: 3px; background: var(--brand-orange); }
.ct-btns { margin-left: auto; display: flex; gap: 6px; }
.ct-btn { appearance: none; font-family: inherit; cursor: pointer; min-height: 38px; padding: 0 16px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: none; color: var(--ink-2); font-size: 13.5px; }
.ct-btn.ct-quiet:hover { color: var(--ink); background: var(--row-hover); }
.ct-btn.ct-go { background: var(--link); color: var(--ground); font-weight: var(--weight-medium); }
.ct-btn.ct-go:hover { background: var(--cx-brand-deep); }
.ct-dock .ct-card { left: 12px !important; right: 12px; top: auto !important; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; max-width: none; }
.ct-dock .ct-art { display: none; }
.ct-menu { position: fixed; z-index: 1300; width: 300px; padding: 6px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--hair); box-shadow: 0 16px 40px rgba(12, 17, 57, 0.18); display: flex; flex-direction: column;
  animation: bm-pop var(--dur-base) var(--ease-out) both; }
.ct-menu button { appearance: none; font-family: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--ink); }
.ct-menu button:hover, .ct-menu button:focus-visible { background: var(--row-hover); }
.ct-menu b { font-size: 13.5px; font-weight: var(--weight-medium); }
.ct-menu span { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .ct-hole, .ct-card { transition: none; } .ct-hole::after { animation: none; } .ct-in .ct-body, .ct-in .ct-art { animation: none; } }

/* ── CALCULATE · LOAD PATH, ANIMATED (views/calc-flow.js) ────────────────────
   The plan with the load moving through it, the cascade beside it, the story
   and the change list below. Load is orange (it is the thing that matters);
   members keep their result colours; a change shows red for more, blue for
   less. Dots and bands only move when motion is allowed. */
.fl { display: flex; flex-direction: column; gap: 16px; }
.fl-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.fl-head-l { flex: 1; min-width: 280px; }
.fl-title { font-size: var(--text-h2); margin: 8px 0 6px; }
.fl-lede { margin: 0; font-size: var(--text-small); line-height: 1.55; color: var(--ink-2); max-width: 70ch; }
.fl-head-r { display: flex; gap: 8px; flex-wrap: wrap; }
.fl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fl-chip { appearance: none; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px;
  border-radius: var(--radius-pill); border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink); font-size: 13px; }
.fl-chip:hover { border-color: var(--cx-brand); }
.fl-chip.on { background: var(--cx-brand); border-color: var(--cx-brand); color: var(--ground); }
.fl-chip-u { font-family: var(--font-technical); font-size: 11.5px; color: var(--ink-3); }
.fl-chip.on .fl-chip-u { color: inherit; opacity: 0.8; }
.fl-chip.b-fail:not(.on) .fl-chip-u { color: var(--cx-bad); }
.fl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 18px; align-items: start; }
.fl-planwrap, .fl-cascwrap { border: 1px solid var(--cx-line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.fl-plan { display: block; width: 100%; height: 560px; background: var(--ground); }
.fl-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 10px 14px; border-top: 1px solid var(--cx-line); font-size: 12px; color: var(--ink-2); }
.fl-legend-r { margin-left: auto; font-family: var(--font-technical); font-size: 11px; color: var(--ink-3); }
.fl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-orange); vertical-align: middle; margin-right: 4px; }
.fl-dot.up { background: var(--cx-bad); }
.fl-dot.down { background: var(--link); }
.fl-ring { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink-3); vertical-align: middle; margin-right: 4px; }
.fl-cascwrap { display: flex; flex-direction: column; }
.fl-casc-head { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; }
.fl-casc-head:last-child { border-top: 1px solid var(--cx-line); }
.fl-casc-note { font-size: 11.5px; color: var(--ink-3); }
.fl-casc { display: block; width: 100%; height: auto; max-height: 560px; }

/* Plan drawing. Lengths are plan millimetres; --u is mm per screen pixel. */
.fl-p-area { fill: var(--cx-calc); fill-opacity: 0.16; stroke: var(--cx-calc-ink); stroke-opacity: 0.4; stroke-width: calc(1px * var(--u, 10)); }
.fl-p-zone { fill: var(--cx-brand-tint); fill-opacity: 0.5; stroke: var(--cx-member); stroke-width: calc(1.2px * var(--u, 10)); }
.fl-p-joist { stroke: var(--cx-member); stroke-opacity: 0.35; stroke-width: calc(1px * var(--u, 10)); }
.fl-p-wall { stroke: var(--ink-3); stroke-opacity: 0.6; stroke-width: calc(7px * var(--u, 10)); stroke-linecap: square; }
.fl-p-beam { stroke: var(--cx-member); stroke-width: calc(5px * var(--u, 10)); stroke-linecap: round; }
.fl-p-hit { stroke: transparent; stroke-width: calc(18px * var(--u, 10)); }
.fl-p-post { fill: var(--surface); stroke: var(--cx-member); stroke-width: calc(2.5px * var(--u, 10)); }
.fl-p-pad { fill: none; stroke: var(--ink-3); stroke-dasharray: calc(4px * var(--u, 10)) calc(3px * var(--u, 10)); stroke-width: calc(1.4px * var(--u, 10)); }
.fl-p-load { fill: none; stroke: var(--brand-orange); stroke-width: calc(2.5px * var(--u, 10)); stroke-dasharray: calc(6px * var(--u, 10)) calc(4px * var(--u, 10)); }
.fl-p-m { cursor: pointer; transition: opacity var(--dur-base) var(--ease-out); }
.fl-p-m.b-fail .fl-p-beam, .fl-p-m.b-fail .fl-p-post { stroke: var(--cx-bad); }
.fl-p-m.b-fail .fl-p-zone { stroke: var(--cx-bad); fill: var(--cx-bad-tint); }
.fl-p-m.focus .fl-p-beam, .fl-p-m.focus .fl-p-zone, .fl-p-m.focus .fl-p-post, .fl-p-m.focus .fl-p-pad { stroke: var(--brand-orange); }
.fl-p-m:hover .fl-p-beam, .fl-p-m:hover .fl-p-zone { stroke-opacity: 0.8; }
.fl-plan .dim { opacity: 0.22; }
.fl-p-lbl { fill: var(--ink-2); font-family: var(--font-technical); pointer-events: none; }
.fl-p-lbl.k-area { fill: var(--cx-calc-ink); font-family: var(--font-sans); }
.fl-p-tag rect { fill: var(--ink); }
.fl-p-tag text { fill: var(--ground); font-family: var(--font-technical); }
.fl-p-tag.side rect { fill: var(--ink-3); }
.fl-p-tag.hl rect { fill: var(--brand-orange); }
.fl-p-m.step .fl-p-beam, .fl-p-m.step .fl-p-zone, .fl-p-m.step .fl-p-post, .fl-p-m.step .fl-p-pad { stroke: var(--brand-orange); animation: fl-step 1.4s linear infinite; }
.fl-p-area.step { fill-opacity: 0.32; animation: fl-step 1.4s linear infinite; }
@keyframes fl-step { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.fl-summary { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.fl-summary.bad { color: var(--cx-bad); }
.fl-dot-p { fill: var(--brand-orange); }
.fl-dot-p.up { fill: var(--cx-bad); }
.fl-dot-p.down { fill: var(--link); }
.fl-ripple { fill: none; stroke: var(--ink-3); stroke-width: calc(1.4px * var(--u, 10)); transform-box: fill-box; transform-origin: center;
  animation: fl-ripple var(--bm-dur-draw, 600ms) var(--ease-out) both; }
.fl-ripple.bad { stroke: var(--cx-bad); }
@keyframes fl-ripple { from { transform: scale(1); opacity: 0.9; } to { transform: scale(var(--grow, 5)); opacity: 0; } }

/* Cascade. */
.fl-rb-band { fill: var(--cx-brand); fill-opacity: 0.16; transition: fill-opacity var(--dur-base) var(--ease-out); }
.fl-rb.on .fl-rb-band { fill-opacity: 0.2; }
.fl-casc.focused .fl-rb.on .fl-rb-band { fill-opacity: 0.32; }
.fl-rb.side .fl-rb-band { fill-opacity: 0.12; }
.fl-rb.off { opacity: 0.25; }
.fl-rb.hl .fl-rb-band { fill: var(--brand-orange); fill-opacity: 0.45; }
.fl-rb.up .fl-rb-band { fill: var(--cx-bad); fill-opacity: 0.32; }
.fl-rb.down .fl-rb-band { fill: var(--link); fill-opacity: 0.32; }
.fl-rb-run { fill: none; stroke: var(--surface); stroke-opacity: 0.85; stroke-linecap: round; stroke-dasharray: 1 11; animation: fl-run 0.9s linear infinite; }
.fl-rb.off .fl-rb-run { animation: none; stroke-opacity: 0; }
.fl-rb-v { font-family: var(--font-technical); font-size: 10px; fill: var(--ink-2); }
.fl-rb.hl .fl-rb-v, .fl-rb.up .fl-rb-v { fill: var(--ink); }
@keyframes fl-run { to { stroke-dashoffset: -12; } }
.fl-nd rect { fill: var(--cx-member); }
.fl-nd.k-area rect, .fl-nd.k-load rect { fill: var(--cx-calc); }
.fl-nd.k-wall rect, .fl-nd.k-outside rect { fill: var(--ink-3); }
.fl-nd.k-ground rect { fill: var(--ink); }
.fl-nd.k-none rect { fill: var(--cx-bad); }
.fl-nd.b-fail rect { fill: var(--cx-bad); }
.fl-nd.focus rect { fill: var(--brand-orange); }
.fl-nd.dim { opacity: 0.3; }
.fl-nd[tabindex="0"] { cursor: pointer; }
.fl-nd:focus-visible rect { stroke: var(--link); stroke-width: 2; }
.fl-nd-id { font-family: var(--font-technical); font-size: 10.5px; fill: var(--ink); pointer-events: none; }
.fl-nd-id.in { fill: var(--ground); }
.fl-nd.k-area .fl-nd-id.in, .fl-nd.k-load .fl-nd-id.in { fill: var(--cx-calc-ink); }
.fl-nd.flip rect { animation: fl-flash var(--dur-slow) var(--ease-out) 3 alternate; }
@keyframes fl-flash { from { opacity: 1; } to { opacity: 0.35; } }
.fl-rb.up, .fl-rb.down, .fl-nd.flip { animation: fl-wave var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--dd, 0) * 220ms); }
@keyframes fl-wave { from { opacity: 0.2; } to { opacity: 1; } }

/* Panels. */
.fl-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fl-card { border: 1px solid var(--cx-line); border-radius: 14px; background: var(--surface); padding: 16px 18px; min-width: 0; }
.fl-card-k { color: var(--cx-brand); margin-bottom: 10px; }
.fl-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--cx-line); font-size: var(--text-small); }
.fl-row:last-child { border-bottom: 0; }
.fl-row-l { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-row-p { font-family: var(--font-technical); font-size: 11.5px; color: var(--ink-3); width: 36px; text-align: right; }
.fl-row s { color: var(--ink-3); }
.fl-row.fl-bad { color: var(--cx-bad); }
.fl-row.fl-good { color: var(--cx-ok); }
.fl-sharebar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin-bottom: 8px; }
.fl-sharebar span, .fl-sw { background: var(--cx-brand); opacity: calc(1 - var(--i, 0) * 0.22); }
.fl-sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.fl-quiet { margin: 0; font-size: var(--text-small); line-height: 1.5; color: var(--ink-3); }
.fl-delta { font-family: var(--font-technical); font-size: 11px; padding: 1px 6px; border-radius: 6px; }
.fl-delta.up { color: var(--cx-bad); background: var(--cx-bad-tint); }
.fl-delta.down { color: var(--link); background: var(--cx-brand-tint); }
.fl-res { display: flex; gap: 12px; align-items: baseline; }
.fl-res-id { font-size: var(--text-h3); color: var(--cx-brand); }
.fl-res-l { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-small); color: var(--ink-2); }
.fl-res-l b { font-weight: var(--weight-medium); color: var(--ink); }
.fl-flip { margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-size: var(--text-small); font-weight: var(--weight-medium); }
.fl-flip.bad { color: var(--cx-bad); background: var(--cx-bad-tint); }
.fl-flip.ok { color: var(--cx-ok); background: var(--cx-ok-tint); }
.fl-story { border: 1px solid var(--cx-line); border-radius: 14px; background: var(--surface); padding: 16px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 20px; align-items: start; }
.fl-story-steps { display: flex; gap: 6px; flex-wrap: wrap; max-width: 240px; }
.fl-sdot { appearance: none; font-family: var(--font-technical); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cx-line); background: var(--surface); color: var(--ink-2); font-size: 12px; }
.fl-sdot.done { background: var(--cx-brand-tint); color: var(--cx-brand); border-color: transparent; }
.fl-sdot.on { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--ground); }
.fl-story-text p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.fl-anim { animation: bm-rise var(--dur-slow) var(--ease-out) both; }
.fl-read { grid-column: 1 / -1; font-size: var(--text-small); color: var(--ink-2); }
.fl-read summary { cursor: pointer; color: var(--cx-brand); }
.fl-read ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.6; }
.fl-change { border: 1px solid var(--brand-orange); border-radius: 14px; background: var(--surface); padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.fl-change-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fl-ctls { display: flex; gap: 10px 18px; flex-wrap: wrap; }
.fl-ctl { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-small); color: var(--ink-2); }
.fl-ctl em { font-style: normal; color: var(--ink-3); font-size: 12px; }
.fl-in { width: 84px; min-height: 36px; padding: 0 8px; border: 1px solid var(--cx-line); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 13px; }
select.fl-in { width: auto; font-family: inherit; }
.fl-diff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 28px; }
@media (max-width: 1100px) { .fl-grid { grid-template-columns: 1fr; } .fl-panels { grid-template-columns: 1fr; } .fl-diff { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .fl-plan { height: 380px; } .fl-story { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fl-p-m.step *, .fl-p-area.step, .fl-rb-run, .fl-ripple, .fl-nd.flip rect, .fl-rb.up, .fl-rb.down, .fl-nd.flip, .fl-anim { animation: none; } }

/* ── TASKS v2 · project tab (design_handoff_tasks_v2) ── */
/* Project record › Tasks: the brief, the add line with its instruction picker,
   By instruction (a table grouped per live instruction with time against
   budget) and Board (four state columns). Full width (W1); the table stacks and
   the board goes to one column on a phone (W2). Orange = late or held; blue =
   with a checker, and every link; dark blue = done. */
.pt2 { display: flex; flex-direction: column; gap: 22px; padding-top: 4px; }
.pt2-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ink-2); }

.pt2-brief {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 24px;
  padding: 18px 0; border-top: 1px solid var(--rule-head); border-bottom: 1px solid var(--hair);
}
.pt2-brief-l { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; }
.pt2-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-orange); }
.pt2-upd { font-size: 11.5px; color: var(--ink-3); }
.pt2-brief-p { margin: 0; font-size: 16px; line-height: 1.6; max-width: 88ch; text-wrap: pretty; color: var(--ink); }
.pt2-blink {
  font: inherit; font-weight: 500; color: var(--link); background: none; border: 0; padding: 0;
  cursor: pointer; text-align: inherit;
}
.pt2-blink:hover { text-decoration: underline; }
.pt2-bhot { color: var(--brand-orange); }

.pt2-bar { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; }
.pt2-add {
  flex: 1 1 420px; min-width: 0; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--hair); border-radius: 8px; padding: 0 6px 0 14px; background: var(--surface);
}
.pt2-add:focus-within { border-color: var(--hair-strong); }
.pt2-in {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13.5px; color: var(--ink);
  border: 0; background: transparent; padding: 10px 0;
}
.pt2-in::placeholder { color: var(--ink-3); }
.pt2-instr-w { position: relative; flex: 0 1 auto; min-width: 0; max-width: 46%; display: flex; }
.pt2-instr-w::after {
  content: ''; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; margin-top: -4px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg);
  pointer-events: none;
}
.pt2-instr {
  appearance: none; width: 100%; min-width: 0; font: inherit; font-size: 12.5px; color: var(--ink);
  border: 0; border-radius: 6px; background: var(--brief-bg); padding: 6px 28px 6px 8px; cursor: pointer;
  text-overflow: ellipsis;
}
.pt2-modes { display: flex; gap: 20px; }
.pt2-mode {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-3); background: none; border: 0;
  padding: 0 0 4px; cursor: pointer;
}
.pt2-mode[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.pt2-done { font: inherit; font-size: 12.5px; color: var(--link); background: none; border: 0; padding: 0 0 4px; cursor: pointer; }
.pt2-note { margin: -8px 0 0; font-size: 13px; color: var(--status-error); }

/* By instruction */
.pt2-table { display: flex; flex-direction: column; }
.pt2-cols, .pt2-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 150px 190px 110px; gap: 16px;
  padding-left: 10px; padding-right: 10px;
}
.pt2-cols {
  align-items: end; padding-top: 9px; padding-bottom: 8px; border-top: 1px solid var(--rule-head);
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.pt2-gh {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding: 16px 10px 8px; border-top: 1px solid var(--hair);
}
.pt2-gl { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.pt2-ref { font-family: var(--font-technical); font-size: 13px; font-weight: 500; color: var(--ink); flex: none; }
.pt2-ref[data-none] { color: var(--ink-3); }
.pt2-gt { font-size: 15px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt2-gs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); flex: none; white-space: nowrap; }
.pt2-gs[data-live] .pt2-dot { background: var(--link); }
.pt2-gm { display: flex; align-items: baseline; gap: 18px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.pt2-time { font-family: var(--font-technical); font-size: 12.5px; color: var(--ink); }
.pt2-time[data-over] { color: var(--brand-orange); }

.pt2-row {
  align-items: center; padding-top: 8px; padding-bottom: 8px; min-height: 34px;
  border-top: 1px solid var(--hair-soft); font-size: 13.5px; cursor: pointer;
}
.pt2-row:hover { background: var(--row-hover); }
.pt2-row:focus-visible, .pt2-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.pt2-tick {
  position: relative; width: 16px; height: 16px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--hair-strong); background: var(--surface); color: var(--ink-fill-ink);
  font: inherit; font-size: 10px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pt2-tick::before { content: ''; position: absolute; inset: -10px; }
.pt2-row[data-done] .pt2-tick { background: var(--anchor); border-color: var(--anchor); }
.pt2-task { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pt2-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.pt2-row[data-done] .pt2-title { color: var(--ink-3); text-decoration: line-through; }
.pt2-src {
  flex: none; font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; color: var(--ink-3);
  border: 1px solid var(--hair); border-radius: 4px; padding: 2px 5px;
}
.pt2-who { font-size: 12.5px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt2-who[data-none] { color: var(--brand-orange); }
.pt2-state { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.pt2-state[data-tone="hot"] { color: var(--brand-orange); }
.pt2-state[data-tone="hot"] .pt2-dot { background: var(--brand-orange); }
.pt2-state[data-tone="check"] { color: var(--link); }
.pt2-state[data-tone="check"] .pt2-dot { background: var(--link); }
.pt2-state[data-tone="done"] { color: var(--anchor); }
.pt2-state[data-tone="done"] .pt2-dot { background: var(--anchor); }
.pt2-due { font-family: var(--font-technical); font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.pt2-due[data-tone="hot"] { color: var(--brand-orange); }
.pt2-due[data-tone="muted"] { color: var(--ink-3); }
.pt2-empty { margin: 0; padding: 22px 10px; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--hair); }

/* Board */
.pt2-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pt2-col {
  display: flex; flex-direction: column; gap: 10px; background: var(--brief-bg);
  border-radius: 16px; padding: 14px 12px 12px; min-height: 360px;
}
.pt2-colh { display: flex; align-items: center; gap: 8px; padding: 0 4px 4px; }
.pt2-colh .pt2-dot { width: 7px; height: 7px; background: var(--hair-strong); }
.pt2-col[data-col="waiting"] .pt2-colh .pt2-dot { background: var(--brand-orange); }
.pt2-col[data-col="checking"] .pt2-colh .pt2-dot { background: var(--link); }
.pt2-col[data-col="done"] .pt2-colh .pt2-dot { background: var(--anchor); }
.pt2-coln { font-size: 13px; font-weight: 500; }
.pt2-colc { font-family: var(--font-technical); font-size: 12px; color: var(--ink-3); }
.pt2-cempty { padding: 2px 4px; font-size: 12.5px; color: var(--ink-3); }
.pt2-card {
  background: var(--surface); border: 1px solid var(--hair); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer;
}
.pt2-card:hover { border-color: var(--hair-strong); }
.pt2-ct { font-size: 13.5px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.pt2-card[data-done] .pt2-ct { color: var(--ink-3); text-decoration: line-through; }
.pt2-cwait { font-size: 12px; color: var(--brand-orange); }
.pt2-cm { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-2); min-width: 0; }
.pt2-cref { font-family: var(--font-technical); }
.pt2-cfig { margin-left: auto; font-family: var(--font-technical); color: var(--ink-2); white-space: nowrap; }
.pt2-cfig[data-hot] { color: var(--brand-orange); }

@media (max-width: 1100px) {
  .pt2-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt2-cols, .pt2-row { grid-template-columns: 22px minmax(0, 1fr) 110px 170px 104px; }
}
@media (max-width: 760px) {
  .pt2-brief { grid-template-columns: 1fr; gap: 8px; }
  .pt2-brief-p { font-size: 15px; }
  .pt2-add { flex-basis: 100%; flex-wrap: wrap; padding: 0 6px 6px 12px; }
  .pt2-in { flex-basis: 100%; min-height: 44px; }
  .pt2-instr-w { max-width: 100%; flex: 1 1 100%; }
  .pt2-instr { min-height: 44px; }
  .pt2-mode, .pt2-done { min-height: 44px; }
  .pt2-cols { display: none; }
  .pt2-gh { grid-template-columns: 1fr; gap: 4px; padding-left: 0; padding-right: 0; }
  .pt2-gl { flex-wrap: wrap; row-gap: 2px; }
  .pt2-gt { white-space: normal; }
  .pt2-gm { flex-wrap: wrap; white-space: normal; gap: 4px 14px; }
  .pt2-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "tick task task" ". who due" ". state state";
    gap: 4px 10px; padding: 12px 0; min-height: 68px;
  }
  .pt2-tick { grid-area: tick; width: 22px; height: 22px; align-self: start; }
  .pt2-task { grid-area: task; flex-wrap: wrap; }
  .pt2-title { white-space: normal; }
  .pt2-who { grid-area: who; }
  .pt2-state { grid-area: state; }
  .pt2-due { grid-area: due; text-align: right; }
  .pt2-board { grid-template-columns: 1fr; }
  .pt2-col { min-height: 0; }
}

/* ── TASKS v2 · desktop page (design_handoff_tasks_v2) ── */
/* Mine (three questions) and Team (09:15) on the full content column, hairline
   tables, a 104ch prose brief, and a 460px right panel that does not dim the
   page (W4). Row grids reflow at 1100 and stack to one column at 760 (W2). */
.tk2-root { color: var(--ink); }
.tk2-page { min-width: 0; }

.tk2-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 24px; border-bottom: 1px solid var(--ink); }
.tk2-h1 { margin: 0; font-size: var(--text-h1); font-weight: var(--weight-medium); letter-spacing: var(--tracking-display);
  line-height: 1; color: var(--ink); }
.tk2-count { font-size: 17px; color: var(--ink-3); align-self: flex-end; padding-bottom: 2px; }
.tk2-new { width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; margin-left: 6px; cursor: pointer;
  background: var(--brand-orange); color: var(--brand-white); font-size: 17px; line-height: 30px; font-family: inherit;
  box-shadow: 0 2px 8px rgba(255, 80, 1, 0.28); }
.tk2-new:hover { background: var(--brand-orange-deep); }
.tk2-tabs { display: flex; gap: 22px; margin-left: 30px; }
.tk2-tab { background: none; border: 0; padding: 4px 0 5px; border-bottom: 2px solid transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: var(--weight-medium); color: var(--ink-3); }
.tk2-tab:hover { color: var(--ink); }
.tk2-tab.on { color: var(--ink); border-bottom-color: var(--ink); }

.tk2-flash { margin: 14px 0 0; padding: 10px 14px; border: 1px solid var(--status-overdue-line); border-radius: 8px;
  background: var(--status-overdue-bg); color: var(--status-overdue-ink); font-size: 13px;
  display: flex; align-items: flex-start; gap: 12px; max-width: 104ch; }
.tk2-flash-ok { border-color: var(--line-blue); background: var(--tint-blue); color: var(--ink); }
.tk2-flash-x { margin-left: auto; background: none; border: 0; padding: 0 4px; cursor: pointer; font: inherit;
  font-size: 16px; line-height: 1; color: inherit; }

/* The brief: an orange eyebrow on the left, prose naming records on the right. */
.tk2-brief { display: grid; grid-template-columns: 156px minmax(0, 104ch); padding: 22px 0 24px;
  border-bottom: 1px solid var(--hair); }
.tk2-brief-l { display: flex; flex-direction: column; gap: 6px; padding-top: 3px; padding-right: 16px; }
.tk2-brief-eb { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--brand-orange); line-height: 1.3; }
.tk2-updated { font-size: 11.5px; color: var(--ink-3); }
.tk2-brief-p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.tk2-blink { display: inline; background: none; border: 0; padding: 0; font: inherit; line-height: inherit; text-decoration: none; color: var(--link); font-weight: var(--weight-medium);
  cursor: pointer; text-align: left; }
.tk2-blink:hover { text-decoration: underline; text-underline-offset: 3px; }
.tk2-hot { color: var(--brand-orange); }

/* Sections and tables */
.tk2-section { margin-top: 32px; }
.tk2-sec { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; }
.tk2-eb { margin: 0; font-size: 11px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--brand-blue); }
.tk2-eb-grey { color: var(--ink-3); }
.tk2-sub { font-size: 12px; color: var(--ink-3); }
.tk2-table { border-bottom: 1px solid var(--hair); }
.tk2-cols { display: grid; column-gap: 16px; padding: 9px 10px 8px; border-top: 1px solid var(--ink);
  font-size: 10px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-table); text-transform: uppercase;
  color: var(--ink-3); }
.tk2-row { display: grid; column-gap: 16px; align-items: center; padding: 6px 10px; min-height: 34px;
  border-top: 1px solid var(--hair); cursor: pointer; font-size: 12.5px; }
.tk2-row:hover { background: var(--row-hover); }
.tk2-row-on { background: var(--row-hover); box-shadow: inset 2px 0 0 var(--brand-blue); }
.tk2-t-wy .tk2-row { min-height: 36px; }
.tk2-t-wo .tk2-row { min-height: 50px; padding-top: 9px; padding-bottom: 9px; }
.tk2-cols + .tk2-row, .tk2-cols + .tk2-group { border-top: 0; }

/* Fluid tracks: the task column takes most of a wide screen and the project
   column keeps a readable minimum, so 1280 and 1920 both use their width. */
.tk2-wy { grid-template-columns: minmax(0, 2.7fr) minmax(170px, 1fr) minmax(110px, 0.6fr) 90px 96px; }
.tk2-yl { grid-template-columns: 22px minmax(0, 3fr) minmax(170px, 1fr) 112px 120px; }
.tk2-wo { grid-template-columns: minmax(0, 2fr) minmax(170px, 1fr) minmax(180px, 0.9fr) 64px 110px 72px; }
.tk2-tm { grid-template-columns: minmax(0, 1fr) 64px 76px 190px 140px 170px; }
.tk2-pt { grid-template-columns: 22px minmax(0, 2.4fr) minmax(170px, 1fr) minmax(130px, 0.7fr) 112px 64px; }
.tk2-cols.tk2-tm { padding-left: 30px; }
.tk2-cols.tk2-tm span:nth-child(2), .tk2-cols.tk2-tm span:nth-child(3) { text-align: right; }

.tk2-task { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tk2-title { font-size: 13.5px; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk2-strong { font-weight: var(--weight-medium); }
.tk2-root .tk-src { font-family: var(--font-sans); font-size: 9.5px; font-weight: var(--weight-medium); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--hair); border-radius: 3px; padding: 2px 5px;
  line-height: 1.2; flex: none; }
.tk2-ref { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.tk2-num { font-family: var(--font-technical); font-size: 12.5px; color: var(--ink); flex: none; }
.tk2-client { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.tk2-none { color: var(--ink-3); }
.tk2-ref .tk2-none { font-family: var(--font-technical); font-size: 12.5px; }
.tk2-muted2 { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk2-age { color: var(--ink-2); }
.tk2-age.tk2-hot { color: var(--brand-orange); }
.tk2-t-wo .tk2-age { font-family: var(--font-technical); text-align: right; }
.tk2-due { font-family: var(--font-technical); color: var(--ink); white-space: nowrap; }
.tk2-due.tk2-hot { color: var(--brand-orange); }
.tk2-chased { color: var(--ink-2); white-space: nowrap; }
.tk2-chased.tk2-hot { color: var(--brand-orange); }
.tk2-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk2-who b { font-size: 13px; font-weight: var(--weight-medium); color: var(--ink); }
.tk2-who span { font-size: 12px; color: var(--ink-2); }
.tk2-act { justify-self: end; background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: var(--weight-medium); color: var(--link); }
.tk2-act:hover { text-decoration: underline; text-underline-offset: 3px; }
.tk2-act-past { color: var(--ink-3); cursor: default; }
.tk2-act-past:hover { text-decoration: none; }
.tk2-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--link); }
.tk2-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The tick: a ring, a filled dark-blue disc with a check once done. */
.tk2-tick { position: relative; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%; }
.tk2-tick::before { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--hair-strong); box-sizing: border-box; background: var(--surface); }
.tk2-tick:hover::before { border-color: var(--brand-blue); }
.tk2-tick[aria-checked="true"]::before { background: var(--brand-dark-blue); border-color: var(--brand-dark-blue); }
.tk2-tick[aria-checked="true"]::after { content: ''; position: absolute; left: 9px; top: 7px; width: 4px; height: 7px;
  border: solid var(--brand-white); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.tk2-done .tk2-title { text-decoration: line-through; color: var(--ink-3); }

.tk2-group { display: flex; align-items: baseline; gap: 9px; padding: 14px 10px 7px; border-top: 1px solid var(--hair); }
.tk2-glabel { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink); }
.tk2-group-hot .tk2-glabel { color: var(--brand-orange); }
.tk2-gn { font-family: var(--font-technical); font-size: 11px; color: var(--ink-3); }

/* The add line: one at the top of Your list. */
.tk2-add { display: flex; align-items: center; gap: 16px; padding: 8px 10px; min-height: 40px; border-top: 1px solid var(--hair); }
.tk2-ring { width: 16px; height: 16px; border-radius: 50%; flex: none; margin-left: 3px; }
.tk2-ring-dash { border: 1.5px dashed var(--hair-strong); box-sizing: border-box; }
.tk2-add-in { flex: 1; min-width: 0; border: 0; background: transparent; padding: 4px 0; font: inherit;
  font-size: 13.5px; color: var(--ink); }
.tk2-add-in::placeholder { color: var(--ink-3); }
.tk2-add-hint { font-family: var(--font-technical); font-size: 11.5px; color: var(--ink-3); flex: none; }
.tk2-empty { margin: 0; padding: 12px 10px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--hair); }
.tk2-cols + .tk2-empty { border-top: 0; }

/* Team */
.tk2-team .tk2-table { border-bottom: 0; }
.tk2-team .tk2-cols { border-top: 1px solid var(--ink); }
.tk2-prow { display: grid; column-gap: 16px; align-items: center; padding: 10px 10px 10px 10px; min-height: 38px;
  border-top: 1px solid var(--hair); cursor: pointer; font-size: 12.5px; grid-template-columns: minmax(0, 1fr) 64px 76px 190px 140px 170px; }
.tk2-prow:hover { background: var(--row-hover); }
.tk2-pname { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tk2-pname b { font-size: 13.5px; font-weight: var(--weight-medium); color: var(--ink); }
.tk2-prow-none .tk2-pname b { color: var(--brand-orange); }
.tk2-caret { width: 0; height: 0; border-style: solid; border-width: 3.5px 0 3.5px 5px; margin: 0 0 0 1px;
  border-color: transparent transparent transparent var(--ink-3); flex: none; }
.tk2-prow.on .tk2-caret { transform: rotate(90deg); }
.tk2-n { text-align: right; font-size: 12.5px; color: var(--ink); }
.tk2-n.tk2-hot { color: var(--brand-orange); }
.tk2-ptasks { background: var(--surface-sunk-soft); border-top: 1px solid var(--hair); padding-left: 20px; }
.tk2-ptasks .tk2-row { border-top-color: var(--hair-soft); }
.tk2-ptasks .tk2-row:first-child { border-top: 0; }
.tk2-empty-in { border-top: 0; }
.tk2-state { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk2-tone-blue { color: var(--link); }
.tk2-tone-hot { color: var(--brand-orange); }
.tk2-tone-open { color: var(--ink-2); }
.tk2-tone-done { color: var(--ink-3); }
.tk2-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 0;
  border-top: 1px solid var(--hair); font-size: 12px; color: var(--ink-3); }

/* The panel (W4: it sizes itself). Fixed on the right, no scrim, no dim. */
.tk2-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 120; width: min(460px, 100vw); overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--hair); box-shadow: -18px 0 48px rgba(12, 17, 57, 0.10);
  overscroll-behavior: contain; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tk2-panel-in { padding: 28px 32px 40px; }
.tk2-pbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tk2-pref { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--brand-blue); }
.tk2-pclose { width: 32px; height: 32px; margin-right: -8px; border: 0; background: none; cursor: pointer; font-size: 17px;
  color: var(--ink-2); border-radius: 6px; }
.tk2-pclose:hover { background: var(--row-hover); }
.tk2-ptitle { margin: 22px 0 10px; font-size: var(--text-overlay-title); font-weight: var(--weight-medium);
  letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.tk2-pstate { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 12.5px; font-weight: var(--weight-medium); }
.tk2-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tk2-waitbox { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; padding: 16px 18px; border-radius: 14px;
  background: var(--row-hover); }
.tk2-waitbox-eb { font-size: 10.5px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--brand-orange); }
.tk2-waitbox-what { font-size: 14px; color: var(--ink); }
.tk2-waitbox-meta { font-size: 12.5px; color: var(--ink-2); }
.tk2-waitbox-note { font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; }
.tk2-props { margin-top: 22px; border-top: 1px solid var(--hair); }
.tk2-prop { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.tk2-plabel { padding-top: 2px; font-size: 10px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-table);
  text-transform: uppercase; color: var(--ink-3); }
.tk2-pvalue { font-size: 13px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.tk2-pdesc { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; }
.tk2-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tk2-btn { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--hair); background: var(--surface); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: var(--weight-medium); color: var(--ink); }
.tk2-btn:hover { border-color: var(--hair-strong); }
.tk2-btn-p { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--brand-white); }
.tk2-btn-p:hover { background: var(--brand-blue-800); border-color: var(--brand-blue-800); }
.tk2-btn:disabled { opacity: 0.55; cursor: default; }
.tk2-btn-past { cursor: default; color: var(--ink-3); border-style: dashed; }
.tk2-more { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; flex-wrap: wrap; }
.tk2-dotsep { margin: 0 8px; }
.tk2-err { margin: 10px 0 0; font-size: 12.5px; color: var(--status-error); }
.tk2-ptime { margin: 20px 0 0; font-size: 12.5px; color: var(--ink-2); }
.tk2-activity { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--hair); }
.tk2-activity .tk2-empty { border-top: 0; padding-left: 0; }
.tk2-act-row { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--hair-soft); }
.tk2-act-row:first-of-type { margin-top: 8px; }
.tk2-act-t { font-size: 13px; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.tk2-act-t b { font-weight: var(--weight-medium); }
.tk2-act-w { font-family: var(--font-technical); font-size: 11px; color: var(--ink-3); }
.tk2-comment { margin-top: 12px; }
.tk2-cinput, .tk2-field input, .tk2-field select, .tk2-field textarea { width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--hair); border-radius: 8px; background: transparent; font: inherit; font-size: 13.5px; color: var(--ink); }
.tk2-field textarea { resize: vertical; line-height: 1.45; }
.tk2-step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 24px; }
.tk2-step-head .tk2-link { font-size: 12.5px; }
.tk2-pick-list { margin-top: 10px; border-top: 1px solid var(--hair); }
.tk2-pick { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 10px 8px;
  border: 0; border-bottom: 1px solid var(--hair-soft); background: none; cursor: pointer; font: inherit; text-align: left; }
.tk2-pick:hover { background: var(--row-hover); }
.tk2-pick-n { font-size: 13.5px; color: var(--ink); }
.tk2-pick-m { font-size: 12px; color: var(--ink-3); flex: none; }
.tk2-pick.on .tk2-pick-n { color: var(--link); font-weight: var(--weight-medium); }
.tk2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tk2-chip { padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--hair); background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--ink); }
.tk2-chip.on { background: var(--tint-blue); border-color: var(--line-blue); color: var(--link); }
.tk2-field { display: block; margin-top: 14px; }
.tk2-field > span { display: block; margin-bottom: 6px; font-size: 10px; font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--ink-3); }
.tk2-field > span i { font-style: normal; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.tk2-field-date input { max-width: 200px; }

@media (max-width: 1100px) {
  .tk2-wy { grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr) 100px 64px 60px; }
  .tk2-yl { grid-template-columns: 22px minmax(0, 2fr) minmax(150px, 1fr) 104px 90px; }
  .tk2-wo { grid-template-columns: minmax(0, 1.4fr) minmax(150px, 1fr) minmax(150px, 1fr) 48px 100px 60px; }
  .tk2-tm, .tk2-prow { grid-template-columns: minmax(0, 1fr) 48px 64px 140px 110px 140px; }
  .tk2-pt { grid-template-columns: 22px minmax(0, 2fr) minmax(150px, 1fr) 120px 104px 56px; }
}

/* Phone width (?desktop=1 at 390): one column, no horizontal scroll. */
@media (max-width: 760px) {
  .tk2-head { gap: 10px; padding-bottom: 18px; }
  .tk2-new { width: 44px; height: 44px; line-height: 44px; }
  .tk2-tabs { margin-left: auto; }
  .tk2-tab { min-height: 44px; }
  .tk2-brief { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tk2-brief-l { flex-direction: row; gap: 12px; align-items: baseline; }
  .tk2-brief-p { font-size: 15px; }
  .tk2-cols { display: none; }
  .tk2-row, .tk2-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 4px; min-height: 56px; }
  .tk2-task { flex: 1 1 100%; order: 1; }
  .tk2-title { white-space: normal; font-size: 14.5px; }
  .tk2-yl .tk2-task, .tk2-pt .tk2-task { flex-basis: calc(100% - 56px); }
  .tk2-tick { order: 0; width: 44px; height: 44px; margin: -10px 0 -10px -6px; }
  .tk2-tick::before { left: 11px; top: 11px; width: 22px; height: 22px; }
  .tk2-tick[aria-checked="true"]::after { left: 19px; top: 16px; width: 5px; height: 9px; }
  .tk2-row > :not(.tk2-task):not(.tk2-tick) { order: 2; }
  .tk2-yl > .tk2-ref, .tk2-pt > .tk2-ref, .tk2-yl > .tk2-due, .tk2-pt > .tk2-state { margin-left: 40px; }
  .tk2-row > .tk2-muted2:has(> .tk2-none) { display: none; }
  .tk2-ref, .tk2-who { flex: 1 1 100%; }
  .tk2-act { order: 3; margin-left: auto; min-height: 44px; padding: 0 4px; }
  .tk2-age[data-l]::before, .tk2-chased[data-l]::before, .tk2-prow [data-l]::before {
    content: attr(data-l) ' '; color: var(--ink-3); }
  .tk2-pname { flex: 1 1 100%; }
  .tk2-n, .tk2-c { text-align: left; }
  .tk2-today { flex: 1 1 100%; }
  .tk2-ptasks { padding-left: 8px; }
  .tk2-add { min-height: 56px; }
  .tk2-add-hint { display: none; }
  .tk2-foot { flex-direction: column; gap: 4px; }
  .tk2-panel { width: 100vw; border-left: 0; }
  .tk2-panel-in { padding: 18px 18px 40px; }
  .tk2-pclose { width: 44px; height: 44px; }
  .tk2-btn, .tk2-chip, .tk2-pick { min-height: 48px; }
  .tk2-btns .tk2-btn { flex: 1 1 auto; }
  .tk2-prop { grid-template-columns: 110px minmax(0, 1fr); }
}