/* ===========================================================================
   Power Mechanical Portal - brand stylesheet

   The 2026 look (task 104), described in DESIGN.md: white and light-gray
   surfaces, near-black ink, one blue, borderless cards, one typeface (Hanken
   Grotesk). The tokens are below; every rule that draws the look is in the
   last section of this file, under [data-look="2026"], which views.js stamps
   on every page.

   ACCENT RULE (important, don't break this):
   The blue (--accent for fills, --link for text) is for primary actions,
   links and plain counts. It is never a status. Amber, red and green carry
   status, and they are never decoration. Keeping them separate is what lets a
   person tell an action from an alarm at a glance.
   ========================================================================= */

/* ---- Tokens: light. The 2026 look (task 104); DESIGN.md describes it. ---- */
:root {
  color-scheme: light;

  --accent: #3E6AE1;
  --accent-hover: #2F57C7;
  --on-accent: #FFFFFF;
  /* Link text is the reference's darker blue: #3E6AE1 measures 4.39:1 on the gray page and on
     Surface 2 (392 places in the audit); #2F57C7 is 5.77:1 there. Fills keep --accent. */
  --link: #2F57C7;
  --chrome: #FFFFFF;
  --r-ctl: 4px;
  --r-pill: 999px;

  /* The old brand names, re-pointed. 900 was "dark ground with white text on
     it"; 800 its raised variant; 700 / 600 "interactive on a light surface";
     gold "the accent on dark chrome". */
  --pm-green-900: #171A20;
  --pm-green-800: #171A20;
  --pm-green-700: var(--link);
  --pm-green-600: #2F57C7;
  --pm-gold: var(--link);
  --pm-gold-300: var(--link);

  --surface: #FFFFFF;
  --surface-2: #F4F4F4;
  --canvas: #F4F4F4;
  --line: #E8E8E8;
  --line-strong: #D0D1D2;
  --ink: #171A20;
  --ink-2: #393C41;
  --ink-3: #5C5E62;

  --crit: #C0362C;     --crit-bg: #FBECEB;
  /* The reference amber, #B5650C, is 3.97:1 on its own tint and 4.35:1 on white. #A65C0B is the
     lightest amber that passes 4.5:1 on white, on the page gray and on --warn-bg. */
  --warn: #A65C0B;     --warn-bg: #FDF3E8;
  --watch: #8A6A00;    --watch-bg: #FBF4DC;
  --unknown: #5C5E62;  --unknown-bg: #F4F4F4;
  --ok: #1F7A55;       --ok-bg: #E6F3EC;

  --shadow-sm: none;
  --shadow-md: none;
  --r-card: 12px;

  --font-display: "Hanken Grotesk", Arial, sans-serif;
  --font-body: "Hanken Grotesk", Arial, sans-serif;

  /* Charts: series one is the accent, so a plain count and a link agree. */
  --s1: #3E6AE1;
  --s2: #eb6834;
  --seq-lo: #E4EEFB;
  --seq-hi: #0d366b;
  --grid: #E8E8E8;

  /* The printed letter (task 114, Letter Generator). Paper stays paper in dark mode, so these have no
     dark values. The letter document carries these lines itself (engineering-letters.js reads them
     from here), because a PDF render loads nothing from the server. */
  --letter-paper: #FFFFFF;
  --letter-ink: #1A1A1A;
  --letter-signature-ink: #15233F;
  --font-letter: Gelasio, Georgia, "Times New Roman", serif;
  --font-sig-mr-dafoe: "Mr Dafoe", cursive;
  --font-sig-allura: "Allura", cursive;
  --font-sig-parisienne: "Parisienne", cursive;
  --font-sig-great-vibes: "Great Vibes", cursive;
  --font-sig-alex-brush: "Alex Brush", cursive;
}

/* ---- Tokens: dark. Guarded so an explicit light choice beats a dark OS. -- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --accent: #3E6AE1;
    --accent-hover: #2F57C7;
    --link: #7F9FF5;
    --chrome: #101114;

    --pm-green-900: #24262A;
    --pm-green-800: #F2F2F3;
    --pm-green-600: #5B84F0;

    --surface: #1B1C20;
    --surface-2: #24262A;
    --canvas: #101114;
    --line: #2B2D31;
    --line-strong: #3B3D42;
    --ink: #F2F2F3;
    --ink-2: #B9BABE;
    --ink-3: #8E8F94;

    --crit: #FF7A6E;     --crit-bg: #331512;
    --warn: #F0A65A;     --warn-bg: #33210C;
    --watch: #E3C34E;    --watch-bg: #2E2609;
    --unknown: #9A9BA0;  --unknown-bg: #202125;
    --ok: #6FD0AF;       --ok-bg: #133027;

    --shadow-sm: none;
    --shadow-md: none;

    --s1: #5B84F0;
    --s2: #d95926;
    --seq-lo: #18222C;
    --seq-hi: #86b6ef;
    --grid: #2B2D31;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;

  --accent: #3E6AE1;
  --accent-hover: #2F57C7;
  --link: #7F9FF5;
  --chrome: #101114;

  --pm-green-900: #24262A;
  --pm-green-800: #F2F2F3;
  --pm-green-600: #5B84F0;

  --surface: #1B1C20;
  --surface-2: #24262A;
  --canvas: #101114;
  --line: #2B2D31;
  --line-strong: #3B3D42;
  --ink: #F2F2F3;
  --ink-2: #B9BABE;
  --ink-3: #8E8F94;

  --crit: #FF7A6E;     --crit-bg: #331512;
  --warn: #F0A65A;     --warn-bg: #33210C;
  --watch: #E3C34E;    --watch-bg: #2E2609;
  --unknown: #9A9BA0;  --unknown-bg: #202125;
  --ok: #6FD0AF;       --ok-bg: #133027;

  --shadow-sm: none;
  --shadow-md: none;

  --s1: #5B84F0;
  --s2: #d95926;
  --seq-lo: #18222C;
  --seq-hi: #86b6ef;
  --grid: #2B2D31;
}

/* Legacy names (--pm-green-*, --pm-gold*) are kept as aliases of the tokens
   above so older rules keep working; new code uses --accent, --link,
   --chrome, --surface, --ink and the status pairs (DESIGN.md). */

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
a { color: var(--pm-green-700); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--pm-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Eyebrow / label: condensed caps, echoing the stencil wordmark ----------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.num {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.tnum { font-variant-numeric: tabular-nums; }

/* =========================================================================
   THE CHEVRON — the letterhead's angled gold band, used as this product's
   one structural signature. Sparingly: under the app bar and on the login
   panel. Not on cards.
   ========================================================================= */
.chevron-rule {
  height: 6px;
  background: var(--pm-gold);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4% 100%, 0 40%);
}

/* =========================================================================
   APP CHROME — dark green bar + rail, light workspace
   ========================================================================= */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "brand topbar" "rail  main";
  background: var(--canvas);
}

.brandbox {
  grid-area: brand;
  background: var(--pm-green-900);
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 58px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.brandbox img { width: 168px; height: auto; display: block; }

.topbar {
  grid-area: topbar;
  background: var(--pm-green-900);
  height: 58px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: #fff;
}
.topbar .page-name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
}
.topbar .spacer { flex: 1; }

.freshness {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .74);
}
.freshness .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pm-gold);
  box-shadow: 0 0 0 3px rgba(240, 160, 12, .22);
}

.iconbtn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 3px;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
}
.iconbtn:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.userchip {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .09);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.userchip .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pm-gold);
  color: var(--pm-green-900);
  display: grid; place-items: center;
  font-weight: 700; font-size: 11px;
  letter-spacing: .02em;
}

/* Left rail ------------------------------------------------------------- */
.rail {
  grid-area: rail;
  background: var(--pm-green-900);
  padding: 14px 10px 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rail-group {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  padding: 16px 12px 6px;
}
.rail a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 3px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: 13.5px;
  border-left: 3px solid transparent;
}
.rail a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.rail a[aria-current="page"] {
  background: rgba(255, 255, 255, .1);
  border-left-color: var(--pm-gold);
  color: #fff;
  font-weight: 600;
}
.rail a.disabled { color: rgba(255, 255, 255, .50); cursor: default; }
.rail a.disabled:hover { background: transparent; }
.rail svg { flex: none; }

.main { grid-area: main; padding: 22px 24px 56px; min-width: 0; }

/* =========================================================================
   CARDS / PANELS
   ========================================================================= */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}
.panel-hd {
  display: flex; align-items: baseline; gap: 10px;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--line);
}
.panel-hd h3 { font-size: 14px; font-weight: 700; letter-spacing: -.005em; }
.panel-hd .sub { font-size: 12.5px; color: var(--ink-3); }
.panel-ft {
  border-top: 1px solid var(--line);
  padding: 9px 16px;
  text-align: center;
}
.panel-ft a { font-size: 12.5px; font-weight: 600; text-decoration: none; }
.panel-ft a:hover { text-decoration: underline; }

/* Alert card — severity carried by a left stripe AND the icon, not color alone */
.alert {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sev, var(--unknown));
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.alert.crit    { --sev: var(--crit);    --sev-bg: var(--crit-bg); }
.alert.warn    { --sev: var(--warn);    --sev-bg: var(--warn-bg); }
.alert.watch   { --sev: var(--watch);   --sev-bg: var(--watch-bg); }
.alert.unknown { --sev: var(--unknown); --sev-bg: var(--unknown-bg); }

.alert-hd { display: flex; gap: 11px; padding: 14px 15px 11px; }
.alert-badge {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--sev-bg);
  color: var(--sev);
  display: grid; place-items: center;
}
.alert-count {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  line-height: 1.15;
}
.alert-count b { color: var(--sev); font-weight: 700; }
.alert-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }

.rows { padding: 2px 15px 12px; display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
  border-top: 1px solid var(--line);
}
.rows .row:first-child { border-top: 0; }
.row .tag {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--pm-green-700);
}
.row .site { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .when { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Pills ------------------------------------------------------------------ */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.pill-live { background: var(--ok-bg); color: var(--ok); }
.pill-live .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-soon { background: var(--unknown-bg); color: var(--unknown); }

/* Coverage bars ---------------------------------------------------------- */
.cov { display: flex; flex-direction: column; gap: 11px; padding: 14px 16px; }
.cov-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.cov-label { font-size: 12.5px; color: var(--ink-2); }
.cov-val { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cov-track {
  grid-column: 1 / -1;
  height: 6px; border-radius: 3px;
  background: var(--unknown-bg);
  overflow: hidden;
}
.cov-fill { height: 100%; border-radius: 3px; background: var(--ok); }
.cov-fill.is-warn { background: var(--warn); }
.cov-fill.is-watch { background: var(--watch); }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px 18px;
  border-radius: 3px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--pm-green-700); color: #fff; }
.btn-primary:hover { background: var(--pm-green-600); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }

/* =========================================================================
   GRID HELPERS
   ========================================================================= */
.grid { display: grid; gap: 14px; }
.section-hd {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 11px;
}
.section-hd h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.section-hd .hint { font-size: 12.5px; color: var(--ink-3); }
.section-hd .spacer { flex: 1; }

/* =========================================================================
   APP LAUNCHER TILES (portal home)
   ========================================================================= */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.tile {
  position: relative;
  display: flex; flex-direction: column; gap: 9px;
  min-height: 196px;
  padding: 22px 20px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease;
}
.tile-live:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--pm-green-600);
}
.tile-icon {
  width: 46px; height: 46px;
  border-radius: 3px;
  display: grid; place-items: center;
  background: var(--pm-green-900);
  color: var(--pm-gold);
}
.tile h3 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.tile p { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.tile .pill { position: absolute; top: 16px; right: 16px; }
.tile-top { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 8px; }
.tile-top .pill { position: static; }
.tile-top .tile-badge { margin-left: 0; }

.tile-cta {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px; font-weight: 600;
  color: var(--pm-green-700);
}
.tile-live:hover .tile-cta { text-decoration: underline; }

.tile-soon { background: var(--surface-2); border-style: dashed; cursor: default; }
.tile-soon .tile-icon { background: var(--unknown-bg); color: var(--ink-3); }
.tile-soon h3 { color: var(--ink-2); }
.tile-soon .tile-cta { color: var(--ink-3); font-weight: 400; }

/* =========================================================================
   REPORT PAGES  (Rental Fleet Reliability and anything else that renders a
   generated report body inside a frame)
   ========================================================================= */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  margin-bottom: 16px;
}
.field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.field select {
  font-family: var(--font-body); font-size: 13px;
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
}
.toolbar .spacer { flex: 1; }

/* Stat tiles. Severity is set server-side by adding is-crit / is-warn /
   is-watch / is-ok. A zero count should get is-zero, not is-ok — "0 alarms"
   is only good news if the unit was actually reporting. */
.stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--sev, var(--line-strong));
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: 13px 15px 12px;
}
.stat .n {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 31px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sev-ink, var(--ink));
}
.stat .l {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-2);
}
.stat.is-crit  { --sev: var(--crit);  --sev-ink: var(--crit); }
.stat.is-warn  { --sev: var(--warn);  --sev-ink: var(--warn); }
.stat.is-watch { --sev: var(--watch); --sev-ink: var(--watch); }
.stat.is-ok    { --sev: var(--ok); }
.stat.is-zero  { --sev: var(--line-strong); }

/* Caveat bar — the coverage note that must survive any redesign */
.notebar {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 15px;
  margin-bottom: 16px;
  background: var(--watch-bg);
  border: 1px solid var(--watch);
  border-left-width: 4px;
  border-radius: var(--r-card);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.notebar svg { flex: none; color: var(--watch); margin-top: 1px; }
.notebar b { font-weight: 700; }

/* .report-frame and .report-open lived here until the report was rendered
   natively. Both are gone with the iframe: there is no embedded document to
   size, and no phone-only escape link to reveal, because the page itself is
   now the report at every width.

   The dvh note they carried is worth keeping somewhere, because it will come
   up again: on iOS Safari 100vh is the UNSCROLLED viewport, so anything sized
   to 100vh is taller than the visible area whenever the URL bar is showing.
   Use 100dvh, with a vh line above it for browsers that do not know dvh. */

@media (max-width: 1180px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================================
   LOGIN PAGE
   ========================================================================= */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--pm-green-900);
  color: #fff;
}

/* Faint blueprint wash, echoing the letterhead's ghosted watermark */
.login::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(255, 255, 255, .055), transparent 62%),
    radial-gradient(760px 520px at 96% 108%, rgba(240, 160, 12, .08), transparent 64%);
}

/* One centered column: logo, then the sign-in card. */
.login-body {
  position: relative;
  width: min(452px, 100% - 40px);
  margin: 0 auto;
  padding: 56px 0 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.login-body .lockup {
  width: min(340px, 100%);
  height: auto;
  display: block;
}

/* Tagline, carried from the letterhead footer. Sits below the login card. */
.login-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(27px, 3vw, 37px);
  line-height: 1.06;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  color: #fff;
}
.login-tagline em {
  font-style: normal;
  color: var(--pm-gold);
  display: block;
}

/* Sign-in card */
.signin {
  /* This card is deliberately light in BOTH themes — it sits on the dark
     green brand panel either way. Re-pin the light palette locally so dark
     mode can't invert its text onto a white ground. Custom properties
     inherit, so every child inside the card picks these up. */
  --ink:   #12211C;
  --ink-2: #4F6259;
  --ink-3: #5F736A;
  --line:  #DCE3DE;
  --pm-green-700: #0B4A3A;

  background: #fff;
  color: var(--ink);
  border-radius: 5px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
  overflow: hidden;
  width: 100%;
}
.signin .cap { /* the gold chevron, carried from the letterhead */
  height: 7px;
  background: var(--pm-gold);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%, 0 42%);
}
.signin-inner { padding: 34px 34px 30px; text-align: center; }
.signin h1 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pm-green-900);
}
.signin .sub {
  margin: 8px auto 26px;
  max-width: 32ch;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}

.ms-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  padding: 13px 16px;
  background: var(--pm-green-900);
  color: #fff;
  border: 0; border-radius: 3px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .14s ease;
}
.ms-btn:hover { background: #0A3A2C; }
.ms-btn .ms-logo { width: 18px; height: 18px; flex: none; }

.signin-note {
  margin: 18px auto 0;
  max-width: 36ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* Login footer, mirroring the letterhead's dark footer band */
.login-foot {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .13);
  background: #001C15;
}
.login-foot-in {
  width: min(1120px, 100% - 48px);
  margin: 0 auto;
  padding: 17px 0;
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  align-items: center; justify-content: center;
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .58);
}
.login-foot-in .sep { color: rgba(255, 255, 255, .34); }
@media (max-width: 560px) { .login-foot-in .sep { display: none; } }

@media (max-width: 900px) {
  .login-body { gap: 28px; padding: 40px 0 36px; }
  .login-body .lockup { width: min(280px, 100%); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .signin-inner { padding: 28px 22px 26px; }
  .signin h1 { font-size: 29px; }
  .tiles { grid-template-columns: 1fr; }
}

/* Warn variant of the caveat bar. Used for "this is not today's report" and
   "the daily push may have stopped" - conditions about the DELIVERY, which are
   a step more urgent than the standing coverage caveat above them. Existing
   tokens only; no new colour is introduced. */
.notebar.is-warn { background: var(--warn-bg); border-color: var(--warn); }
.notebar.is-warn svg { color: var(--warn); }

/* =========================================================================
   PHONE LAYOUT
   =========================================================================

   The shell grid above keeps a 232px rail column at every width, so below
   about 620px the page is wider than the screen and every page scrolls
   sideways - the admin screen and the reliability report included.

   Below 800px the rail comes out of the flow and becomes an overlay. Nothing
   here applies above 800px: the desktop layout is untouched.

   No JavaScript. The #nav-toggle checkbox in views.js appPage() drives this
   with sibling selectors. Toggle and backdrop are position:fixed so they never
   participate in the grid.
   ========================================================================= */

/* Off-screen but still focusable, so the menu can be reached from a keyboard.
   pointer-events:none keeps it from swallowing taps at the top-left corner;
   the <label> toggles it regardless. */
.nav-toggle {
  position: fixed;
  top: 0; left: 0;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Both are inert on a desktop. */
.menubtn { display: none; }
.mobile-app-nav { display: none; }

/* Tables scroll inside their surface instead of extending beyond the page. */
.panel { min-width: 0; }
.scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; background: var(--surface); }
.scroll table { background: var(--surface); }
@media (max-width: 800px) {
  /* Keep native form scrolling above the fixed quick-navigation bar. */
  html, .app .main { scroll-padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .mobile-app-nav { position: fixed; z-index: 25; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; gap: 8px; padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); }
  .mobile-app-nav a, .mobile-app-nav label { min-height: 46px; flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; }
  .mobile-app-nav svg { width: 19px; height: 19px; }
  .mobile-app-nav a[aria-current] { color: var(--pm-green-700); }
  .mobile-app-nav a:focus-visible { outline: 2px solid var(--pm-green-700); }
  .app .main { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .app .main :where(a, button, input, select, textarea, summary) { scroll-margin-bottom: calc(78px + env(safe-area-inset-bottom)); }
  body.has-fb .app .main { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  body .fb-fab { bottom: calc(70px + env(safe-area-inset-bottom)); right: 12px; }
  .menubtn span { font: 600 12px var(--font-body); }
}
.nav-backdrop { display: none; }

@media (max-width: 800px) {

  /* One column. The brand lockup is 168px wide and there is nowhere to put it
     on a 390px bar, so it goes; the app bar already names the page. */
  .app {
    grid-template-columns: 100%;
    grid-template-areas: "topbar" "main";
  }
  .brandbox { display: none; }

  .menubtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto; min-width: 64px; height: 44px; gap: 5px;
    margin-left: -6px;
    flex: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
  }
  .menubtn:hover { background: rgba(255, 255, 255, .1); }
  .nav-toggle:focus-visible ~ .topbar .menubtn {
    outline: 2px solid var(--pm-gold);
    outline-offset: 2px;
  }

  /* Out of the flow, off the left edge. Translating LEFT rather than using
     left:-264px matters: a fixed element pushed off to the left does not add
     to scrollWidth, so the closed menu cannot itself cause the sideways scroll
     this block exists to remove. */
  .rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 264px;
    max-width: 82vw;
    padding: 14px 10px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 2px 0 14px rgba(0, 0, 0, .3);
  }
  .nav-toggle:checked ~ .rail { transform: translateX(0); }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, .5);
    cursor: pointer;
  }
  .nav-toggle:checked ~ .nav-backdrop { display: block; }

  /* The bar has to survive a 390px width with a page name on it. */
  .topbar {
    gap: 10px;
    padding: 0 12px;
  }
  .topbar .page-name {
    font-size: 17px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .userchip-name { display: none; }

  .main { padding: 18px 14px 44px; }

  /* Long unbroken strings - a UPN, a supervisor chain, an employee number -
     are the other way a page gets wider than the screen. */
  .main { overflow-wrap: break-word; }

  /* A panel heading and its subtitle sit side by side and will not both fit.
     Let the subtitle drop to its own line rather than squeezing the title. */
  .panel-hd { flex-wrap: wrap; gap: 2px 10px; }
  .panel-hd .sub { flex-basis: 100%; }
}

@media (max-width: 560px) {
  /* Last thing to go. It is a nicety, and the delivered time is also on the
     report itself. */
  .freshness { display: none; }
}

/* =========================================================================
   NATIVE RELIABILITY REPORT
   =========================================================================

   The report used to be a standalone document in an iframe: its own title,
   its own stats, its own scrollbar, inside a page that already had all three.
   These are the styles for rendering it as part of the page instead.

   Existing tokens only. No new colours - the severity ramp already in use
   (--crit / --warn / --watch / --ok / --unknown) carries every state the
   report distinguishes.
   ========================================================================= */

.rv-body { padding: 14px 16px; }
.rv-p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 10px; }
.rv-p:last-child { margin-bottom: 0; }
.rv-sub { color: var(--ink-3); font-size: 12.5px; }
.rv-empty { padding: 15px 16px; color: var(--ink-3); font-size: 13px; }
.rv-list { margin: 0 0 12px; padding-left: 20px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.rv-note {
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  padding: 11px 16px; border-top: 1px solid var(--line); background: var(--surface-2);
}

/* 6 & 12 tab — scrubbed Daily Problem / Check It history */
.six12 h2 { margin: 0 0 6px; font-size: 17px; }
.six12 h3 { margin: 18px 0 6px; font-size: 14px; }
.six12-entry { border-top: 1px solid var(--line); padding: 12px 0; }
.six12-entry:first-of-type { border-top: 0; }
.six12-entry h3 { margin: 0 0 4px; font-size: 14px; }
.six12-dl { margin: 8px 0 0; }
.six12-dl dt { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-top: 8px; }
.six12-dl dd {
  margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 13.5px; color: var(--ink); line-height: 1.45;
}

/* Timecard hours heat map under Service history (task 087). */
.du-timecards {
  margin-top: 8px; padding: 16px 0 8px; border-top: 1px solid var(--line);
}
.du-timecards h3 { margin: 0 16px 6px; font-size: 15px; }
.du-timecards > .rv-sub,
.du-timecards > .rv-note { margin: 0 16px 10px; }
.du-timecards .hm-hd { padding-left: 16px; padding-right: 16px; }
.du-timecards .hm-name {
  width: 110px; overflow: hidden; text-overflow: ellipsis;
}
.du-timecards .hm-axis { margin-left: 118px; }
.du-timecards .hm-legend,
.du-timecards .hm-wrap { padding-left: 16px; padding-right: 16px; }
.du-tc-list { margin: 8px 16px 4px; font-size: 13px; color: var(--ink-2); }
.du-tc-list summary { cursor: pointer; font-weight: 600; }
.du-tc-list .rv-tablewrap { margin-top: 8px; }

/* Jump chips + find unit — triage chrome above the first panel */
.rv-tools {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 10px 16px; margin: 0 0 14px; padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
.rv-jump {
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center;
}
.rv-jump a {
  display: inline-block; padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); text-decoration: none; font-size: 12.5px; font-weight: 600;
}
.rv-jump a:hover { color: var(--pm-green-700); border-color: var(--pm-green-700); }
#rv-problems, #rv-24h, #rv-30d, #rv-events, #rv-all-units { scroll-margin-top: 12px; }
.rv-find {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px;
}
.rv-find-label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3);
}
.rv-find input {
  min-width: 9rem; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: var(--r-card, 3px); background: var(--surface); color: var(--ink);
  font-size: 13.5px; font-weight: 600;
}

.rv-subhd {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 12px; margin: 0; padding: 12px 16px 4px;
  border-top: 1px solid var(--line);
}
.rv-subhd:first-of-type { border-top: 0; }
.rv-subhd h4 {
  margin: 0; font-size: 14px; font-weight: 700; color: var(--ink);
  font-family: var(--font-body, inherit);
}
.rv-cov-low { color: var(--crit); font-weight: 700; }

.rv-tablewrap { overflow-x: auto; }
.rv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rv-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); font-weight: 700; padding: 9px 14px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
  position: sticky; top: 0; background: var(--surface); z-index: 1;
  box-shadow: 0 1px 0 var(--line);
}
.rv-table td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rv-table tr:last-child td { border-bottom: 0; }

.rv-tag {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line); margin: 0 3px 3px 0; white-space: nowrap;
}
a.rv-unit.rv-tag { text-decoration: none; color: var(--pm-green-700); }
.rv-tag.is-crit  { background: var(--crit-bg);    color: var(--crit);    border-color: transparent; }
.rv-tag.is-warn  { background: var(--warn-bg);    color: var(--warn);    border-color: transparent; }
.rv-tag.is-watch { background: var(--watch-bg);   color: var(--watch);   border-color: transparent; }
.rv-tag.is-dead  { background: var(--unknown-bg); color: var(--unknown); border-color: transparent; }

/* Top problem units ------------------------------------------------------ */
.rv-top { list-style: none; margin: 0; padding: 4px 16px 14px; }
.rv-top li {
  padding: 11px 0 11px 12px; border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent; margin-left: -2px;
}
.rv-top li:first-child { border-left-color: var(--crit); }
.rv-top li:last-child { border-bottom: 0; }
.rv-top-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 3px; }
.rv-top-hd b { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.rv-top-n { font-size: 13px; font-weight: 700; color: var(--crit); }
.rv-top-down { font-size: 12.5px; color: var(--ink-2); }

/* Fleet table starts collapsed — half the page was this list alone */
details.rv-fleet > summary.panel-hd {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between; gap: 6px 12px;
}
details.rv-fleet > summary.panel-hd::-webkit-details-marker { display: none; }
details.rv-fleet > summary.panel-hd::after {
  content: '▾'; color: var(--ink-3); font-size: 15px; margin-left: auto;
}
details.rv-fleet[open] > summary.panel-hd::after { content: '▴'; }
details.rv-fleet .rv-tablewrap {
  max-height: min(70vh, 560px); overflow: auto;
}

/* The 24-hour timeline --------------------------------------------------
   One row per unit, SEGMENTED. Bands come from the generator already
   positioned; render them in the order given - the paint order is deliberate,
   with dropouts last so a blackout during an outage still reads as lost
   contact rather than vanishing under the red. */
.tb-wrap { padding: 12px 16px 10px; overflow-x: auto; }
.tb-axis { position: relative; height: 16px; margin-left: 126px; min-width: 320px; }
.tb-axis span {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-size: 10.5px; color: var(--ink-3);
}
/* The end labels sit at 0% and 100%, so centring them hangs half of each one
   outside the chart - the last one came out clipped. Anchor the ends inward
   and leave everything between them centred on its tick. */
.tb-axis span:first-child { transform: none; }
.tb-axis span:last-child  { transform: translateX(-100%); }
.tb-row { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.tb-name {
  /* Wide enough for the longest tag plus a note count plus a fuel pill
     ("TBF-19 (12) GAS"). At 78px the row was right-aligned into a box too
     narrow for three things, and the tag lost its first letter behind the
     note count (2026-09-14). The axis margin below is this width + the gap. */
  width: 116px; flex: none; text-align: right; white-space: nowrap;
  font-size: 11.5px; display: flex; align-items: center; justify-content: flex-end; gap: 5px;
}
.tb-name .rv-unit { font-size: 11.5px; }
/* A pill, not grey text - it reads at a glance where lowercase annotation did
   not. The reasoning behind the call is the tooltip, and is written out below
   the chart for anything that cannot hover. */
.tb-fuel {
  font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 5px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
  cursor: help;
}
.tb-track {
  position: relative; flex: 1; min-width: 320px; height: 15px;
  background: var(--surface-2); border-radius: 2px; overflow: hidden;
}
.tb-seg { position: absolute; top: 0; bottom: 0; display: block; }
.tb-up   { background: var(--ok); opacity: .55; }
.tb-down { background: var(--crit); }
.tb-gap  { background: var(--warn); opacity: .9; }
.tb-none { background: var(--unknown-bg); box-shadow: inset 0 0 0 1px var(--line); }
/* Standing fault is a hatch over the top, not a solid block. It says "carrying
   a fault all window", which is not the same claim as "down all window" - and a
   solid band was read as exactly that. */
.tb-standing {
  background: repeating-linear-gradient(45deg,
    var(--warn) 0, var(--warn) 3px, transparent 3px, transparent 8px);
  opacity: .75;
}
.tb-mk { position: absolute; top: -1px; bottom: -1px; width: 2px; display: block; }
.tb-trip  { background: var(--crit); }
.tb-alarm { background: var(--watch); }

.tb-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding: 6px 16px 13px; font-size: 12px; color: var(--ink-2);
}
.tb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tb-key { width: 13px; height: 10px; border-radius: 2px; display: inline-block; }
.tb-key.tb-mkkey { width: 3px; height: 13px; border-radius: 1px; opacity: 1; }

.tb-whys { display: none; }

/* What's new ------------------------------------------------------------
   Native <details>. The newest entry reads without clicking, because a panel
   nobody opens is the same as no panel. */
.wn {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--pm-gold, var(--warn));
  border-radius: 3px; margin-bottom: 14px;
}
.wn > summary {
  padding: 11px 14px; cursor: pointer; font-size: 13px; color: var(--ink-2);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 9px;
  list-style: none;
}
.wn > summary::-webkit-details-marker { display: none; }
.wn > summary::after {
  content: '▾'; order: 2; margin-left: auto;
  color: var(--ink-3); font-size: 15px;
}
.wn[open] > summary::after { content: '▴'; }
.wn-pill {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--warn); color: #fff;
}
.wn-open { color: var(--ink-3); }
/* The newest headline goes on its own line below, so it is readable at a
   glance rather than being crowded out by the summary. */
.wn-newest { order: 3; flex-basis: 100%; color: var(--ink); font-weight: 600; }
.wn-list { margin: 0; padding: 0 16px 14px 34px; font-size: 13px; line-height: 1.6; }
.wn-list li { margin-bottom: 11px; }
.wn-list li div { color: var(--ink-2); margin-top: 2px; }

/* What keeps failing, under each 30-day bar. Text, not a tooltip - it is the
   most diagnostic thing on that panel and a phone cannot hover. */
/* A sibling of .rk, not a child of it, so it is indented to line up under the
   bar rather than positioned in the grid. */
.rk-why {
  padding: 0 168px 9px 84px; margin-top: -3px;
  font-size: 12px; color: var(--ink-3); line-height: 1.5;
}
.rk-last { display: block; color: var(--ink-3); }

/* On rent by month ------------------------------------------------------ */
.rc-cal { border-collapse: collapse; font-size: 11px; margin: 4px 16px 2px; }
.rc-cal th {
  color: var(--ink-3); font-weight: 600; padding: 2px 4px; text-align: center;
  font-size: 10.5px;
}
.rc-cal tbody th { text-align: right; padding-right: 7px; white-space: nowrap; }
.rc-cal td {
  width: 15px; height: 13px; padding: 0;
  border: 1px solid var(--surface);
}
.rc-on  { background: var(--pm-green-700); }
.rc-off { background: var(--surface-2); }
/* A month that has not happened yet is not "not on rent". */
.rc-fut { background: transparent; }

@media (max-width: 800px) {
  .rc-cal { margin: 4px 12px 2px; }
  .rc-cal td { width: 12px; height: 12px; }
  .wn-list { padding-left: 28px; }
  .rv-tools { flex-direction: column; align-items: stretch; }
  .rv-find { width: 100%; }
  .rv-find input { flex: 1; min-width: 0; width: 100%; }
}

/* Who's Nearby ----------------------------------------------------------
   No map. The dispatch island is 99.1% base64 satellite tiles, and the list
   underneath is 9 KB - so the list is what came across and the picture did
   not. Everything here styles text and a table. */

/* The tab is DISABLED, not hidden, on a unit nobody looked up. A missing tab
   reads as a missing feature; a greyed one reads as "not looked up". */
.du-tab.is-off {
  color: var(--ink-3); background: var(--surface-2); opacity: .55;
  cursor: not-allowed;
}
.du-tab-n {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--line);
  font-size: 11px; font-weight: 700; color: var(--ink-2);
}
.du-tab.is-on .du-tab-n { background: var(--surface-2); }

.du-sub-hd {
  padding: 14px 16px 6px; font-size: 13px; font-weight: 700;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
}
.du-sub-hd .du-sub { font-weight: 400; }

.du-list { margin: 0; padding: 0 16px 4px 34px; font-size: 13px; line-height: 1.65; }
.du-list li { margin-bottom: 6px; }
.du-veh .du-list { padding: 0 0 0 16px; font-size: 12.5px; }

/* The rank number beside each vehicle. A pool vehicle with no known driver is
   drawn hollow, because "VEH-451, nobody" and "VEH-451, Hunter Powell" are
   different answers to "who do I call". */
.du-pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--pm-green-700); color: #fff;
  font-size: 11px; font-weight: 700;
}
.du-pin.is-pool { background: transparent; color: var(--ink-3); border: 1px solid var(--line-strong); }

/* Status chip on a service call or appointment. Neutral by default - these
   describe where a call sits in GP, not how bad anything is. */
.du-st {
  display: inline-block; padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-2);
}
.du-st.du-pending { background: var(--warn-bg, var(--surface-2)); }

/* Flags sit beside a named colleague, so they are deliberately quiet: they
   describe a data-matching problem, not the person. */
.du-flag {
  display: inline-block; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  cursor: help;
}

@media (max-width: 800px) {
  .du-sub-hd { padding: 12px 12px 6px; }
  .du-list { padding-left: 28px; }
}

/* The parts total. A footer row rather than a line under the card, so the
   figure sits in the same column as the numbers it adds up. */
.du-total td { border-top: 2px solid var(--line-strong); padding-top: 10px; }
.du-total .du-sub { font-weight: 400; }

/* The coverage denominator, moved down here from the banner that used to sit at
   the top of the page. Reads as a fact next to the chart, not as a warning. */
.tb-cover { font-weight: 400; }

@media (max-width: 800px) {
  .tb-wrap { padding: 20px 12px 8px; }
  /* The unit column keeps its full width on a phone: a two-digit note count
     beside TBF-19 GAS needs all of it, and the track still has ~250px. */
  /* Nine three-hourly labels do not fit in ~300px and ran into each other.
     Drop every other one - the grid is unchanged, only how much of it is
     labelled, and six-hourly is still enough to place a band by eye. */
  .tb-axis span:nth-child(even) { display: none; }
  .tb-legend { padding: 6px 12px 12px; }
  /* No hover on a phone, so the fuel reasoning is written out instead. */
  .tb-whys {
    display: block; padding: 10px 12px; border-top: 1px solid var(--line);
    font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  }
}

/* The confidentiality notice the generated document carries. It travels with
   the figures, so it has to survive the port. Flowed at the end, never fixed -
   fixed is what made it overlap content on a phone in the first place. */
.rv-conf {
  margin: 4px 0 8px;
  padding: 12px 4px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
}

@media (max-width: 800px) {
  .rv-table th, .rv-table td { padding: 8px 10px; }
  .rv-top { padding: 4px 12px 12px; }
  .rv-body { padding: 12px; }
  .rv-note { padding: 11px 12px; }
}

/* Fuel tag and site line on the native report. The generator resolves fuel for
   a minority of units (6 of 28 the day this was built) and looks up customer
   and site only for the units it is reporting on, so both are absent far more
   often than present. Neither renders anything when absent. */
.rv-fuel {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: lowercase;
  vertical-align: middle;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.rv-site { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }

/* Nameplate fuel capability. Deliberately unlike .rv-fuel: that one is what the
   boiler is burning now, this is what it could burn. They are different facts
   and a reader must not take one for the other, so they do not share a shape. */
.rv-cap {
  display: inline-block;
  margin-left: 7px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3);
  border-bottom: 1px dotted var(--line-strong);
  vertical-align: middle;
}

/* =========================================================================
   RELIABILITY: THE LAST 30 DAYS
   =========================================================================
   Ranked bar chart plus a day-by-day heat map.

   The old document drew the bars blue. There is no blue token here and this is
   not the place to introduce a palette, so the bars use the brand green and the
   heat ramp uses neutral TINTS of the same brand ink.

   Trip density is a count, not a severity. Running it on --crit/--warn would
   make a busy-but-fine day read as an alarm, so red is reserved for time down -
   which is what the document does too.
   ========================================================================= */

.rk-wrap { padding: 12px 16px 6px; }
.rk { display: grid; grid-template-columns: 74px 1fr 168px; gap: 10px;
      align-items: center; margin-bottom: 7px; font-size: 12.5px; }
.rk-name { font-weight: 700; color: var(--ink); white-space: nowrap; }
.rk-track { background: var(--surface-2); border: 1px solid var(--line);
            border-radius: var(--r-pill); height: 12px; overflow: hidden; }
.rk-fill { height: 100%; background: var(--pm-green-700); border-radius: var(--r-pill); }
.rk-val { color: var(--ink-2); white-space: nowrap; text-align: right; }
.rk-val b { color: var(--ink); font-weight: 700; }

.hm-hd { font-size: 13px; font-weight: 700; color: var(--ink-2);
         padding: 14px 16px 2px; }
.hm-wrap { padding: 2px 16px 8px; overflow-x: auto; }
.hm-axis { display: flex; justify-content: space-between; font-size: 11px;
           color: var(--ink-3); margin: 0 0 4px 82px; min-width: 300px; }
.hm-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.hm-name { width: 74px; flex: none; font-size: 11.5px; color: var(--ink-2);
           text-align: right; white-space: nowrap; }
.hm-cells { display: flex; gap: 2px; flex: 1; min-width: 300px; }
.hm-c { flex: 1; min-width: 9px; height: 15px; border-radius: 2px;
        display: inline-block; background-repeat: no-repeat; }

/* Neutral tints of --pm-green-900, not a second palette. */
.hm-0 { background-color: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.hm-1 { background-color: rgba(11, 42, 32, .18); }
.hm-2 { background-color: rgba(11, 42, 32, .36); }
.hm-3 { background-color: rgba(11, 42, 32, .58); }
.hm-4 { background-color: rgba(11, 42, 32, .82); }

.hm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
             padding: 4px 16px 12px; font-size: 12px; color: var(--ink-2); }
.hm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hm-legend .hm-c { flex: none; width: 14px; min-width: 14px; height: 12px; }

/* The phone substitute for hover. Hidden wherever hovering works. */
.hm-tells { display: none; }
.hm-tell { padding: 10px 12px; border-top: 1px solid var(--line); font-size: 12.5px;
           color: var(--ink-2); line-height: 1.6; }
.hm-tell b { color: var(--ink); }

@media (max-width: 800px) {
  .rk { grid-template-columns: 62px 1fr; gap: 4px 8px; }
  .rk-val { grid-column: 2; text-align: left; }
  .rk-why { padding: 0 0 9px 70px; }
  .rk-wrap { padding: 12px 12px 6px; }
  .hm-wrap, .hm-legend, .hm-hd { padding-left: 12px; padding-right: 12px; }
  .hm-name { width: 58px; }
  .hm-axis { margin-left: 66px; }
  /* A phone cannot hover, so the tooltips are unreachable. The same detail is
     written out below the map instead. */
  .hm-tells { display: block; }
}

/* =========================================================================
   PER-UNIT DRILL-DOWN
   =========================================================================
   A page, not a modal. Tabs are links and the range and dropout toggles are
   query parameters, so there is still no client-side JavaScript anywhere in
   this portal.
   ========================================================================= */

.rv-unit { color: var(--pm-green-700); font-weight: 700; text-decoration: none; }
.rv-unit:hover { text-decoration: underline; }

.du-hd { margin-bottom: 14px; }
.du-hd h1 { font-family: var(--font-display); font-size: 27px; font-weight: 700;
            display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.du-site { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
.du-sub { color: var(--ink-3); font-size: 12px; }

.du-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: -1px; }
.du-tab {
  padding: 9px 14px; font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 3px 3px 0 0;
}
.du-tab:hover { color: var(--ink); }
.du-tab.is-on { background: var(--surface); color: var(--pm-green-700); }

.du-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
               padding: 12px 16px; border-bottom: 1px solid var(--line); }
.du-range { display: flex; gap: 2px; }
.du-btn {
  font-size: 12.5px; font-weight: 600; padding: 5px 10px; text-decoration: none;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 3px;
}
.du-btn:hover { background: var(--surface-2); }
.du-btn.is-on { background: var(--pm-green-700); color: #fff; border-color: var(--pm-green-700); }
.du-btn.is-on .du-sub { color: rgba(255,255,255,.75); }
.du-btn.is-off { opacity: .55; cursor: default; }
.du-count { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }

.du-table td { vertical-align: top; }
.du-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.du-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.du-down { color: var(--crit); }
.du-x { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.du-kind {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 6px;
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line); margin-right: 6px; vertical-align: middle;
}
/* The day banner and the quiet-stretch row, so a week of trouble looks
   different from trouble weeks apart at a glance. */
.du-table tr.du-day td { background: var(--surface-2); font-size: 12.5px;
                         font-weight: 600; color: var(--ink); padding: 7px 14px; }
.du-table tr.du-day .du-sub { margin-left: 8px; font-weight: 400; }
.du-table tr.du-gap td { background: var(--ok-bg); color: var(--ok);
                         font-size: 11.5px; padding: 4px 14px; }

.du-scope { padding: 11px 16px; font-size: 12.5px; color: var(--ink-2);
            border-bottom: 1px solid var(--line); }
.du-call { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.du-call:last-child { border-bottom: 0; }
.du-call-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.du-call-d { font-size: 13px; color: var(--ink); margin: 3px 0 6px; }
.du-note { border-left: 2px solid var(--line); padding: 6px 0 6px 11px;
           margin-top: 7px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }

/* Clipboard tab (044) - the GP task list. */
.du-clip-strip { padding: 4px 16px 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.du-clip-strip .rv-tag b { margin-left: 3px; }
/* "To be determined" sits on its own side of a separator: on TB-222 it is 48
   of 85 - one commissioning checklist entered as a batch - and a strip that
   folds it in is dominated by it. */
.du-clip-sep { color: var(--ink-3); padding: 0 4px; }
.du-clip-row > summary { cursor: pointer; list-style: none; }
.du-clip-row > summary::-webkit-details-marker { display: none; }
.du-clip-row > summary::after { content: " \25BE"; color: var(--ink-3); font-size: 11px; }
.du-clip-row[open] > summary::after { content: " \25B4"; }
.du-clip-more { margin-top: 6px; padding: 8px 10px; background: var(--surface-2);
  border-left: 3px solid var(--line-strong); font-size: 12.5px; white-space: pre-wrap; }
.du-clip-closed { margin: 6px 16px 12px; }
.du-clip-closed > summary { cursor: pointer; padding: 8px 0; font-weight: 700; color: var(--pm-green-700); font-size: 13px; }

@media (max-width: 800px) {
  .du-hd h1 { font-size: 22px; }
  .du-tab { padding: 8px 11px; font-size: 12.5px; }
  .du-controls { padding: 11px 12px; }
  .du-count { margin-left: 0; width: 100%; }
  .du-call, .du-scope { padding: 12px; }
}

/* ===========================================================================
   Reliability event notes (041)

   What a technician found on site, who saw it, and photographs taken at the
   time. No JavaScript: the form is a plain multipart POST and the "write a
   note" disclosure is a <details>, so this stays consistent with the rest of
   the portal having none.
   =========================================================================== */

/* The count beside a unit tag on the main report, when a note covers that day. */
.rv-noten {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--pm-green-700); color: #fff;
  font-size: 11px; font-weight: 700; text-decoration: none; vertical-align: 1px;
}
.rv-noten:hover { background: var(--pm-green-600); }

.rn-list { padding: 4px 16px 16px; }

.rn-note {
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--surface); margin: 12px 0; padding: 13px 15px;
}
.rn-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.rn-span { font-weight: 700; font-size: 14px; }

.rn-cause, .rn-vis {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 7px; border-radius: var(--r-pill);
}
/* Cause is a judgement, so it is coloured as one - and "undetermined" is
   deliberately neutral rather than a warning, because not knowing yet is a
   legitimate state and should not read as an alarm. */
.rn-cause.is-ours     { background: var(--crit-bg);  color: var(--crit); }
.rn-cause.is-customer { background: var(--ok-bg);    color: var(--ok); }
.rn-cause.is-undetermined { background: var(--surface-2); color: var(--ink-2); }
.rn-vis.is-internal   { background: var(--surface-2); color: var(--ink-3); }
.rn-vis.is-shareable  { background: var(--warn-bg);  color: var(--warn); }

.rn-body { font-size: 14px; line-height: 1.6; white-space: normal; }
.rn-attrib { margin-top: 9px; font-size: 12.5px; color: var(--ink-2); }

.rn-photos {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px;
}
.rn-photo { margin: 0; width: 220px; }
/* Originals are served, constrained here rather than resized on the server -
   derivatives are a later decision and the first real byte sizes are wanted
   before it is taken. */
.rn-photo img {
  width: 100%; height: 160px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 3px; background: var(--surface-2);
}
.rn-photo figcaption {
  font-size: 11.5px; color: var(--ink-3); margin-top: 4px;
  display: flex; flex-direction: column; gap: 1px;
}
/* Absent capture time reads as absent, never as zero and never as the file's
   own timestamp dressed up as one. */
.rn-when.rn-absent { font-style: italic; color: var(--ink-3); }

.rn-ctx { margin-top: 11px; font-size: 13px; }
.rn-ctx summary { cursor: pointer; color: var(--pm-green-700); }

/* ---- the form ---- */
.rn-add { margin: 4px 16px 0; }
.rn-add > summary {
  cursor: pointer; padding: 9px 0; font-weight: 700; color: var(--pm-green-700);
}
.rn-form {
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2);
  padding: 14px 16px; margin-bottom: 10px; max-width: 640px;
}
.rn-form .field { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; }
.rn-form .field input[type="text"],
.rn-form .field input[type="date"],
.rn-form .field select,
.rn-form .field textarea {
  display: block; width: 100%; margin-top: 4px; padding: 7px 9px;
  border: 1px solid var(--line-strong); border-radius: 3px;
  font: inherit; font-weight: 400; background: var(--surface); color: var(--ink);
}
.rn-form textarea { resize: vertical; }
.rn-span-in { display: flex; align-items: center; gap: 8px; }
.rn-span-in input { flex: 1; }
.rn-span-in span { font-weight: 400; color: var(--ink-3); }
.rn-hint { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.rn-check { display: block; font-size: 13px; margin: 4px 0 14px; }
.rn-check input { margin-right: 6px; }
.rn-form button {
  font: inherit; font-weight: 700; padding: 9px 18px; border: 0; border-radius: 3px;
  background: var(--pm-green-700); color: #fff; cursor: pointer;
}
.rn-form button:hover { background: var(--pm-green-600); }

@media (max-width: 640px) {
  .rn-photo { width: 100%; }
  .rn-photo img { height: 220px; }
  .rn-span-in { flex-direction: column; align-items: stretch; }
}

/* =========================================================================
   MY TODAY (.work) — the daily work plan, stage 2 (docs/top10-rev0)
   Mobile first: one column, 44 px targets, radios styled as segmented
   controls. Desktop widens the column; it never becomes a table.
   ========================================================================= */
.work { max-width: 720px; }
.work .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.work-head { margin-bottom: 14px; }
.work-head h1 { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: .01em; overflow-wrap: anywhere; }
.work-date { color: var(--ink-3); font-size: 14px; margin-top: 2px; }
.work-status { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; background: var(--unknown-bg); color: var(--unknown); }
.work-status.is-submitted { background: var(--ok-bg); color: var(--ok); }
.work-desc-big { font-size: 18px; font-weight: 600; margin-top: 4px; overflow-wrap: anywhere; }
.work-notice { margin-top: 4px; }
.work-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 14px 16px; margin: 0 0 14px; }
.work-section h2 { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.work-count { font-weight: 500; color: var(--ink-3); }
.work-muted { color: var(--ink-3); font-size: 13px; line-height: 1.5; margin-top: 8px; }
.work-empty { color: var(--ink-3); font-size: 14px; padding: 10px 0; }
.work-error { color: var(--crit); font-size: 13.5px; font-weight: 600; margin-top: 8px; }
.work-foot { margin-top: 18px; }

/* Last plan */
.work-last { margin: 0 0 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); padding: 0 14px; }
.work-last summary { cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.work-last > *:not(summary) { padding-bottom: 12px; }
.work-lastlist { list-style: none; margin: 0; padding: 0; }
.work-lastlist li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.work-lastlist li.is-done .work-desc { text-decoration: line-through; color: var(--ink-3); }

/* Segmented radio controls */
.work-seg { display: grid; gap: 6px; border: 0; padding: 0; margin: 0 0 10px; }
.work-seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work-seg-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) { .work-seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.work-seg-opt { position: relative; display: block; min-width: 0; }
.work-seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.work-seg-opt span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 8px 10px;
  border: 1.5px solid var(--line-strong); border-radius: 3px;
  background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 600; cursor: pointer; user-select: none;
}
.work-seg-opt input:checked + span { background: var(--pm-green-700); border-color: var(--pm-green-700); color: #fff; }
.work-seg-opt input:focus-visible + span { outline: 2px solid var(--pm-gold); outline-offset: 2px; }
.work-absence legend { font-weight: 600; font-size: 14px; margin: 6px 0 8px; }
.work-notefield label { display: block; font-size: 13.5px; font-weight: 600; margin: 8px 0 6px; }
.work-notefield input, .work-add input {
  width: 100%; min-height: 46px; padding: 8px 12px; font: inherit; font-size: 16px;
  border: 1.5px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink);
}
/* Which of the day's sections applies. A browser without :has() shows both
   - every control still works, the page is only longer. */
.work:has(#work-day input[name="day_status"][value="working"]:checked) .work-absence { display: none; }
.work:has(#work-day input[name="day_status"][value="not_working"]:checked) .work-workload { display: none; }
.work-absence { border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px 4px; margin: 0 0 8px; }
.work-collapsed { margin-bottom: 14px; }
.work-collapsed > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: 14px; padding: 0 4px; }

/* Top 3 */
.work-top3 { list-style: none; margin: 0; padding: 0; }
.work-top3 li { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 15px; }
.work-top3 li:first-child { border-top: 0; }
.work-top3 li .work-muted { margin: 0 0 0 auto; white-space: nowrap; }
.work-rank {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pm-green-700); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.is-empty .work-rank { background: var(--unknown-bg); color: var(--unknown); }

/* Task rows */
.work-list { list-style: none; margin: 0; padding: 0; }
.work-task { padding: 12px 0; border-top: 1px solid var(--line); }
.work-task:first-child { border-top: 0; }
.work-task-main { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; font-weight: 500; line-height: 1.4; flex-wrap: wrap; }
.work-task-main .work-edit { flex: 1 1 100%; }
.work-desc { min-width: 0; overflow-wrap: anywhere; }
.work-task.is-done .work-desc { color: var(--ink-3); text-decoration: line-through; }
.work-check { color: var(--ok); font-weight: 700; }
.work-task-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: 13px; color: var(--ink-3); align-items: center; }
.work-unit { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); background: var(--ok-bg); color: var(--ok); font-weight: 600; font-size: 12px; letter-spacing: .02em; }
.work-pct { font-weight: 700; color: var(--ink); }
.work-task-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.work-task-actions form { display: contents; }
.work-set {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line-strong); border-radius: 3px; font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none;
}
.work-complete { min-height: 44px; }
.work-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; }
.work-task-actions .work-picker { display: grid; }
.work-step {
  min-height: 56px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink);
}
.work-step.is-current { background: var(--pm-green-700); border-color: var(--pm-green-700); color: #fff; }

/* Add */
.work-add { margin-top: 12px; }
.work-add label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.work-add-row { display: flex; gap: 8px; }
.work-add-row input { flex: 1; min-width: 0; }
.work-add-row .btn { min-height: 46px; flex: none; }

/* Submit */
.work-submit { display: flex; flex-direction: column; gap: 8px; }
.work-submit .btn { min-height: 52px; font-size: 16px; }
.work-submit-btn { width: 100%; }

/* Closed pages */
.work-closed { max-width: 640px; }
.work-closed h1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-bottom: 10px; }
.work-closed p { color: var(--ink-2); line-height: 1.6; margin-bottom: 12px; }

@media (max-width: 380px) {
  .work-seg-opt span { font-size: 14px; padding: 8px 6px; }
  .work-task-actions .btn, .work-set { flex: 1; justify-content: center; }
}
@media (min-width: 900px) {
  .work { max-width: 860px; }
  .work-submit { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .work-submit-btn { width: auto; min-width: 240px; }
}

/* --- My Campaigns (/apps/campaigns): a table of GP projects, nothing more --- */
.cp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cp-table th, .cp-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.cp-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.cp-table td.r, .cp-table th.r { text-align: right; white-space: nowrap; }
.cp-table a { font-weight: 600; }
.cp-desc { font-size: 12px; margin-top: 2px; }
.cp-depts { max-width: 220px; }
.cp-count { font-weight: 400; font-size: 13px; }
.cp-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.cp-pill.is-ok { background: var(--ok-bg); color: var(--ok); }
.cp-pill.is-watch { background: var(--warn-bg, var(--surface-2)); color: var(--warn, var(--ink-2)); }
.cp-pill.is-zero { background: var(--surface-2); color: var(--ink-3); }
.cp-pill.is-dead { background: var(--surface-2); color: var(--ink-3); text-decoration: line-through; }
.cp-pill.is-crit { background: var(--crit-bg); color: var(--crit); }
.cp-pill.is-warn { background: var(--warn-bg, var(--surface-2)); color: var(--warn, var(--ink-2)); }
/* Fleet Maintenance: the signed-in custodian's own rows */
.cp-table tr.is-mine td { background: var(--ok-bg); }
/* My Receipts: card names are fixed-width codes; a badge on the home tile carries the count owed */
.cp-card { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; white-space: nowrap; }
.tile-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--crit-bg); color: var(--crit); vertical-align: middle; }

/* --- Security (/security): cards for now, a night grid, a history table --- */
.sec-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sec-card { border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; background: var(--surface); }
.sec-card h3 { margin: 0 0 6px; font-size: 15px; }
.sec-card.is-alarm { border-color: var(--crit); box-shadow: inset 4px 0 0 var(--crit); }
.sec-card.is-stale { opacity: .8; }
.sec-state { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; }
.sec-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
.sec-kv dt { color: var(--ink-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; align-self: start; padding-top: 2px; }
.sec-kv dd { margin: 0; }
.sec-zones { margin: 0; padding-left: 16px; }
.sec-inferred { font-style: italic; color: var(--ink-2); border-bottom: 1px dotted var(--ink-3); }
.sec-health { margin-top: 12px; }
.sec-err { color: var(--crit); }
.cp-pill.is-alarm { background: var(--crit); color: #fff; }
.cp-pill.is-auto { background: var(--surface-2); color: var(--ink-2); font-style: italic; }
.sec-grid th.sec-night { font-size: 10.5px; padding: 6px 3px; text-align: center; }
.sec-grid td.sec-cell { padding: 0; text-align: center; min-width: 22px; }
.sec-grid td.sec-cell a { display: block; padding: 7px 2px; font-size: 11.5px; font-weight: 700; text-decoration: none; color: inherit; }
.sec-grid td.sec-cell sup { font-weight: 400; }
.sec-grid td.is-ok a { background: var(--ok-bg); color: var(--ok); }
.sec-grid td.is-auto a { background: var(--surface-2); color: var(--ink-2); font-style: italic; font-weight: 500; }
.sec-grid td.is-warn a { background: var(--warn-bg); color: var(--warn); }
.sec-grid td.is-crit a { background: var(--crit-bg); color: var(--crit); }
.sec-grid td.is-alarm a { background: var(--crit); color: #fff; }
.sec-grid td.is-zero a { background: transparent; color: var(--ink-3); font-weight: 400; }
.sec-day-alarm { color: var(--crit); font-size: 9px; vertical-align: top; margin-right: 1px; }
/* Current Status: a list grouped by city; a building with several partitions is a row group */
.sec-city { margin-top: 14px; }
.sec-city h3 { margin: 0 0 6px; font-size: 15px; letter-spacing: .02em; }
.sec-status tr.sec-bld-row th { text-align: left; text-transform: none; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--surface-2); letter-spacing: 0; padding-top: 9px; padding-bottom: 7px; }
.sec-status tr.is-child td.sec-name { padding-left: 22px; }
.sec-bullet { color: var(--ink-3); margin-right: 4px; }
.sec-status tr.is-alarm td { background: var(--crit-bg); }
.sec-status td.sec-statecell { white-space: nowrap; }
.sec-status td.sec-zonecell { max-width: 320px; }
/* The keypad: styled after the panels on the wall */
.kp { max-width: 620px; border: 1px solid var(--line-strong); border-radius: 14px; padding: 16px; background: linear-gradient(180deg, #fbfbfb, #ebebeb); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.kp-top { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.kp-leds { display: flex; flex-direction: column; gap: 8px; font: 700 13px/1 var(--font-head, var(--font-display)); letter-spacing: .06em; color: #1e2a24; }
.kp-led { display: flex; align-items: center; gap: 8px; }
.kp-led i { width: 16px; height: 16px; border-radius: 50%; background: #444; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); display: inline-block; }
.kp-led.is-on.is-red i { background: #e0342f; box-shadow: 0 0 8px #e0342f; }
.kp-led.is-on.is-green i { background: #7ed321; box-shadow: 0 0 8px #7ed321; }
.kp-lcd { background: #7f9a3a; color: #10200e; border: 6px solid #d9d9d9; border-radius: 6px; padding: 12px 14px; min-height: 50px; font: 600 15px/1.3 ui-monospace, Consolas, monospace; letter-spacing: .12em; box-shadow: inset 0 3px 8px rgba(0,0,0,.35); text-align: center; }
.kp-lcd.is-entering { letter-spacing: .25em; font-size: 20px; }
.kp-body { display: grid; grid-template-columns: 1fr auto; gap: 14px; }
.kp-digits { display: grid; grid-template-columns: repeat(3, 68px); gap: 8px; }
.kp-key { min-height: 56px; font: 700 22px/1 var(--font-head, var(--font-display)); color: #1e2a24; background: linear-gradient(180deg, #fff, #e3e3e3); border: 1px solid #bdbdbd; border-radius: 8px; box-shadow: 0 2px 0 #b5b5b5; cursor: pointer; }
.kp-key:active { transform: translateY(1px); box-shadow: 0 1px 0 #b5b5b5; }
.kp-key.kp-clear { font-size: 14px; color: var(--ink-2); }
.kp-cmds { display: flex; flex-direction: column; gap: 10px; justify-content: flex-start; }
.kp-cmd { min-width: 150px; min-height: 60px; font: 800 22px/1 var(--font-head, var(--font-display)); letter-spacing: .04em; color: #fff; border: 0; border-radius: 10px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.kp-cmd:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.kp-arm { background: linear-gradient(180deg, #1fa447, #157a34); }
.kp-disarm { background: linear-gradient(180deg, #e0342f, #b0221e); }
.kp-stay { background: linear-gradient(180deg, #4a6b8a, #33506b); font-size: 16px; min-height: 44px; }
.kp-typed { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.kp.is-enhanced .kp-typed { flex-direction: row; align-items: center; gap: 10px; }
@media (max-width: 800px) {
  .kp-body { grid-template-columns: 1fr; }
  .kp-digits { grid-template-columns: repeat(3, 1fr); }
  .kp-cmds { flex-direction: row; flex-wrap: wrap; }
  .kp-cmd { flex: 1 1 45%; min-width: 0; }
}
.sec-keypad-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sec-code-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.sec-code { font-size: 22px; letter-spacing: .3em; width: 9ch; padding: 8px 10px; border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--ink); }
.sec-keypad-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.sec-keypad-buttons .btn { min-height: 44px; }
.sec-keypad-buttons .btn.danger { border-color: var(--crit); color: var(--crit); }
.sec-steps { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 800px) { .sec-keypad-buttons { width: 100%; } .sec-keypad-buttons .btn { flex: 1 1 30%; } }
.sec-grid td.is-alarm .sec-day-alarm { color: #fff; }
.sec-grid th[scope=row] { white-space: nowrap; font-weight: 600; text-transform: none; font-size: 13px; letter-spacing: 0; }
.sec-history tr.is-grey td { color: var(--ink-3); }
.sec-history tr.is-grey code { color: var(--ink-3); }
.sec-history tr.is-hit td { background: var(--ok-bg); }
.sec-history td.sec-when { white-space: nowrap; }
.sec-history td.sec-raw code { font-size: 12px; white-space: normal; }
@media (max-width: 800px) {
  .sec-cards { grid-template-columns: 1fr; }
  .sec-kv { grid-template-columns: 1fr; gap: 2px; }
}
.toolbar .btn.is-on { pointer-events: none; }

/* --- My Today, enhanced (stage 3): only applies once work-today.js booted --- */
.work.is-enhanced { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
.work.is-enhanced .work-nojs, .work.is-enhanced #work-submit, .work.is-enhanced .work-foot { display: none; }
/* the hidden attribute must win over every display rule in this block (.btn is inline-flex) */
.work [hidden], .work-sticky [hidden], .work-sheet-wrap [hidden], .work-toasts [hidden] { display: none !important; }
.work-desc-btn {
  display: inline; text-align: left; font: inherit; font-weight: 500; line-height: 1.4; color: inherit;
  background: none; border: 0; padding: 0; cursor: text; min-height: 0; overflow-wrap: anywhere;
}
.work-desc-btn:hover { text-decoration: underline dotted; }
.work-edit { width: 100%; font: inherit; font-size: 16px; padding: 8px 10px; border: 1.5px solid var(--pm-green-700); border-radius: 3px; background: var(--surface); color: var(--ink); resize: vertical; }
.work-counter { margin-left: auto; font-size: 12px; }
.work-pri-btn { font: inherit; font-size: 13px; color: var(--ink-2); background: none; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 10px; min-height: 30px; cursor: pointer; }
.work-pct-btn, .work-caret { cursor: pointer; font: inherit; background: var(--surface); }
.work-caret { padding: 0 12px; }
.work-mini {
  min-width: 44px; min-height: 44px; font: inherit; font-size: 16px; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink);
}
.work-mini:disabled { opacity: .35; cursor: default; }
.work-order { display: inline-flex; gap: 6px; }
.work-more { font-weight: 700; }
.work-top3-ctl { margin-left: auto; display: inline-flex; gap: 6px; }
.work-top3 li .work-top3-pct { margin-left: auto; white-space: nowrap; }
.work-top3 li .work-top3-ctl + .work-top3-pct { margin-left: 0; }
.work-top3 li.is-empty { flex-wrap: wrap; gap: 8px; }
.work-slot-btn { min-height: 44px; }
.work-task.is-flash { background: var(--ok-bg); transition: background .8s; }
.work-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--watch); background: var(--watch-bg); border-radius: 3px; font-size: 14px; }
.work-chip-btn { min-height: 40px; padding: 6px 12px; }
.work-check-opt { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 44px; font-size: 14px; }

/* sticky action area */
.work-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(0, 39, 30, .10);
}
.work-sticky-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); min-height: 22px; flex-wrap: wrap; }
.work-save { font-weight: 600; }
.work-save.is-saving, .work-save.is-retrying { color: var(--watch); }
.work-save.is-failed, .work-save.is-notsaved { color: var(--crit); }
.work-save.is-needs { color: var(--watch); }
.work-save.is-saved, .work-save.is-uptodate { color: var(--ok); }
.work-save.is-refreshed { color: var(--warn); }
.work-retry { min-height: 44px; padding: 4px 12px; }
.work-sticky .work-submit-btn { width: 100%; min-height: 52px; font-size: 16px; }
.work-sticky .work-submit-btn:disabled { opacity: .55; cursor: default; }
@media (min-width: 900px) {
  .work-sticky { left: 240px; flex-direction: row; align-items: center; justify-content: flex-end; }
  .work-sticky-row { flex: 1; }
  .work-sticky .work-submit-btn { width: auto; min-width: 240px; }
}

/* bottom sheets */
.work-sheet-wrap { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.work-sheet-back { position: absolute; inset: 0; background: rgba(0, 39, 30, .45); }
.work-sheet {
  position: relative; width: 100%; max-width: 560px; max-height: 85vh; overflow: auto;
  background: var(--surface); color: var(--ink); border-radius: 10px 10px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-md);
  animation: work-sheet-up .18s ease-out;
}
.work-sheet-wrap.is-still .work-sheet { animation: none; }
@keyframes work-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.work-sheet h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.work-sheet-body { display: flex; flex-direction: column; gap: 8px; }
.work-sheet-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  min-height: 48px; padding: 10px 12px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink);
}
.work-sheet-input { width: 100%; min-height: 46px; padding: 8px 12px; font: inherit; font-size: 16px; border: 1.5px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink); }
.work-sheet-close { margin-top: 12px; width: 100%; min-height: 48px; }
.work-sheet-pri { margin: 4px 0 0; }
body.work-sheet-open { overflow: hidden; }
@media (min-width: 900px) { .work-sheet-wrap { align-items: center; } .work-sheet { border-radius: 6px; } }

/* toasts (Undo lives here) */
.work-toasts { position: fixed; left: 12px; right: 12px; bottom: calc(140px + env(safe-area-inset-bottom, 0px)); z-index: 35; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.work-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto; width: 100%;
  padding: 10px 12px; background: var(--pm-green-900); color: #fff; border-radius: 4px; box-shadow: var(--shadow-md); font-size: 14px;
}
.work-toast > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.work-toast-btn { min-height: 40px; color: var(--pm-gold-300); border-color: var(--pm-gold-300); background: transparent; }
.work-toast-btn:hover { background: rgba(255, 255, 255, .08); }
.work-toast-x { background: none; border: 0; color: #fff; font-size: 20px; min-width: 40px; min-height: 40px; cursor: pointer; }
@media (min-width: 900px) { .work-toasts { left: 260px; bottom: 100px; } }

/* voice (stage 4): the Dictate control, its live status, the first-use panel and the review row */
.work-mic { min-height: 44px; min-width: 44px; padding: 4px 12px; white-space: nowrap; }
.work-mic.is-live { background: var(--ok-bg); border-color: var(--pm-green-700); color: var(--pm-green-700); }
.work-voice-live { display: block; font-size: 13px; color: var(--ink-2); min-height: 1.2em; }
.work-voice-disclosure { margin: 8px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); font-size: 14px; }
.work-voice-disclosure p { margin: 0 0 8px; }
.work-voice-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.work-voice-actions .btn { min-height: 44px; }
.work-voice-review { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.work-voice-review .btn { min-height: 44px; }
.work-add-row .work-mic { margin-left: 0; }
.work-task-main .work-mic { margin-left: 0; }
.work-task-main .work-voice-review, .work-task-main .work-voice-disclosure { flex: 1 1 100%; }

/* stage 5: the work-page strip, My Tasks, task history and My History */
.work-nav { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; }
.work-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.work-nav a[aria-current="page"] { background: var(--pm-green-700); border-color: var(--pm-green-700); color: #fff; }
.work-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.work-inline-form .btn { min-height: 44px; }
.work-inline-form select { min-height: 44px; font: inherit; padding: 4px 8px; }
.work-pill { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--unknown-bg); color: var(--unknown); }
.work-task.is-removed { opacity: .92; }
.work-edit-form label { display: block; font-weight: 600; font-size: 13.5px; margin: 12px 0 4px; }
.work-edit-form textarea, .work-edit-form select, .work-edit-form input[type="date"] { width: 100%; max-width: 560px; font: inherit; font-size: 16px; padding: 8px 10px; border: 1.5px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink); }
.work-edit-form fieldset { margin: 12px 0; }
.work-history { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.work-history li { display: grid; grid-template-columns: 9.5em 1fr; gap: 8px; font-size: 14.5px; }
.work-history time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .work-history li { grid-template-columns: 1fr; gap: 2px; } }
.work-hist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.work-hist-row { display: grid; grid-template-columns: 8em 9em 1fr; gap: 8px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); font-size: 14.5px; }
.work-hist-row.is-missing { border-left: 4px solid var(--crit); }
.work-hist-row.is-off { border-left: 4px solid var(--watch); }
.work-hist-row.is-submitted { border-left: 4px solid var(--ok); }
.work-hist-row.is-not_expected, .work-hist-row.is-holiday { color: var(--ink-2); }
.work-hist-state { font-weight: 600; }
@media (max-width: 560px) { .work-hist-row { grid-template-columns: 1fr 1fr; } .work-hist-detail { grid-column: 1 / -1; } }
.work-hist-nav { display: flex; gap: 8px; margin-top: 12px; }
.work-facts { display: grid; grid-template-columns: 8em 1fr; gap: 6px 12px; margin: 0; }
.work-facts dt { color: var(--ink-2); font-weight: 600; }
.work-facts dd { margin: 0; }
.work-frozen .work-task { cursor: default; }

/* task 094: Simple / Detailed, and the personal planning tree.
   One page, two views of the same tasks. In Simple the detail-only parts of a
   server-drawn row (.work-d) are hidden, never removed, so nothing stored is
   lost by switching; the script draws each view directly. */
.work-viewswitch { display: inline-flex; gap: 0; margin: 0 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; background: var(--surface); }
.work-viewswitch a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 96px; padding: 0 18px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.work-viewswitch a[aria-current="true"] { background: var(--pm-green-700); color: #fff; }
.work-viewswitch a:focus-visible { outline: 2px solid var(--pm-gold); outline-offset: -3px; }
.work[data-view="simple"] .work-d { display: none; }
.work-outline { flex: none; min-width: 1.6em; color: var(--ink-3); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.75; }
.work-task.work-depth-2 { padding-left: 18px; }
.work-task.work-depth-3 { padding-left: 36px; }
.work-plan { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.work-due { font-weight: 600; color: var(--ink-2); }
.work-due.is-overdue { color: var(--crit); }
.work-camp { max-width: 100%; overflow-wrap: anywhere; }
.work-kids { color: var(--ink-3); }
.work-details { min-height: 44px; }
.work.is-enhanced .work-details { display: none; }
.work-sheet-label { display: block; font-size: 13.5px; font-weight: 600; margin-top: 6px; }
select.work-sheet-input { appearance: auto; }
.work-subhead { font-size: 14px; font-weight: 700; margin: 18px 0 0; }
.work-edit-form input[type="text"] { width: 100%; max-width: 560px; font: inherit; font-size: 16px; padding: 8px 10px; border: 1.5px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink); }
.work-kidlist { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14.5px; }
.work-blockers { margin: 0 0 12px; padding: 0 2px; }
.work-frozen-plan { margin-top: 2px; }
@media (min-width: 900px) {
  .work-task.work-depth-2 { padding-left: 28px; }
  .work-task.work-depth-3 { padding-left: 56px; }
}

/* task 130: My Tasks list, print, and the Detailed count tiles. */
.work-deskpage { max-width: 1100px; min-width: 0; }
.work-tiles { margin: 0 0 14px; }
.work .work-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.work-tiles a.stat { display: block; text-decoration: none; color: inherit; min-height: 44px; }
.work-tiles a.stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 620px) {
  .work .work-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.work-chips { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin: 0 0 12px; max-width: 100%; }
.work-chips a {
  display: inline-flex; align-items: center; flex: none; min-height: 44px; padding: 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  text-decoration: none; font-weight: 600; font-size: 14px;
}
.work-chips a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.work-chips a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.work-list-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 0 0 12px; }
.work-list-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.work-list-form input[type="search"], .work-list-form select {
  font: inherit; font-size: 16px; min-height: 44px; padding: 6px 8px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink); max-width: 100%;
}
.work-list-form input:focus-visible, .work-list-form select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.work-check-line { flex-direction: row; align-items: center; min-height: 44px; gap: 8px; }
.work-list-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.work-scroll { overflow-x: auto; max-width: 100%; }
.work-desk { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 14px; }
.work-desk th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.work-desk td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.work-desk td.work-desk-desc { white-space: normal; min-width: 14em; }
.work-desk td.work-desk-line { white-space: normal; min-width: 10em; max-width: 18em; overflow-wrap: anywhere; }
.work-desk a { color: var(--link); }
.work-desk a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.work-print-head, .work-print-back { display: none; }
.work.is-print .work-print-head, .work.is-print .work-print-back { display: block; }
.work.is-print .work-nav, .work.is-print .work-chips, .work.is-print .work-list-form, .work.is-print .work-list-tools, .work.is-print .work-react, .work.is-print .work-pager, .work.is-print .work-list-note { display: none; }
@media print {
  .brandbox, .topbar, .rail, .nav-toggle, .nav-backdrop, .mobile-app-nav, .qc-dashboard { display: none !important; }
  .app, .main { display: block; }
  .work-nav, .work-chips, .work-list-form, .work-list-tools, .work-react, .work-pager, .work-list-note, .work-print-back { display: none !important; }
  .work-print-head { display: block !important; }
  .work-scroll { overflow: visible; }
  .work-desk, .work-desk th, .work-desk td { white-space: normal; }
  .work-desk { width: 100%; min-width: 0; table-layout: fixed; font-size: 11px; }
  .work-desk th, .work-desk td { padding: 4px 3px; font-size: inherit; overflow-wrap: anywhere; }
  .work-desk td.work-desk-desc, .work-desk td.work-desk-line { min-width: 0; max-width: none; }
  .work-deskpage { max-width: none; }
}
.work-parked { display: inline-flex; align-items: center; margin-left: 8px; padding: 0 8px; min-height: 22px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 600; }
.work-notes { margin: 8px 0; padding-left: 1.2em; }
.work-notes li { margin: 4px 0; }
.work-notes time { color: var(--ink-2); font-size: 13px; }
.work-notes-earlier { margin-top: 8px; }
.work-notes-earlier summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font-weight: 600; }

/* stage 6: Team Today and employee detail (supervisor, read-only) */
.work-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; vertical-align: middle; margin-left: 4px; }
.work-tag.is-live { background: var(--ok-bg); color: var(--ok); }
.work-tag.is-official, .work-tag.is-submitted { background: var(--unknown-bg); color: var(--unknown); }
.work-tag.is-derived { background: var(--watch-bg); color: var(--watch); }
.work-headline { font-size: 17px; line-height: 1.5; margin: 0 0 8px; }
.work-state.is-missing { color: var(--crit); }
.work-state.is-off { color: var(--watch); }
.work-state.is-submitted { color: var(--ok); }
.work-state.is-quiet { color: var(--ink-3); }
.work-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.work-filters a { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.work-filters a[aria-current="page"] { background: var(--pm-green-700); border-color: var(--pm-green-700); color: #fff; }
.work-filters a[aria-current="page"] .work-count { color: #fff; opacity: .85; }
.work-basis { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin: 8px 0 0; }
.work-basis em { font-style: normal; font-weight: 700; }
.work-datenav { margin-top: 10px; }
.work-datenav input[type="date"] { min-height: 44px; font: inherit; font-size: 16px; padding: 4px 8px; border: 1.5px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink); max-width: 100%; }
.work-unit-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 0; margin: 0; font-size: 15px; }
.work-cluster-n { font-weight: 700; }
.work-live-change { display: inline-block; color: var(--watch); font-weight: 600; font-size: 13px; }
.work-load.is-heavy { font-weight: 700; color: var(--crit); }
.work-load.is-np { color: var(--ink-3); font-style: italic; }
.work-load.is-not-busy { font-weight: 700; text-decoration: underline dotted; text-underline-offset: 3px; }
/* Revision A: the Not Busy (Revision B name) and Stagnant blocks on Team Today. Labels are words, never colour alone. */
.work-not-busy, .work-stagnant-block { border-left: 4px solid var(--line-strong); padding-left: 12px; }
.work-not-busy p, .work-stagnant-block p { margin: 4px 0; }
.work-stagnant-tasks .work-desc { overflow-wrap: anywhere; }
.work-stagnant-official { font-weight: 600; }
.work-stagnant-live { color: var(--watch); }
.work-flag { color: var(--crit); font-weight: 700; }
.work-num { font-variant-numeric: tabular-nums; }
.work-num.is-unconfirmed { color: var(--ink-3); }
.work-top3 { margin: 0; padding-left: 1.2em; font-size: 14px; }
.work-top3 .work-muted { display: inline; }
.work-top3.is-unconfirmed { color: var(--ink-3); }
.work-top3.is-unconfirmed > li.work-muted { list-style: none; margin-left: -1.2em; font-style: italic; }
.work-top3 li { margin: 2px 0; }
.work-names { width: 100%; max-width: 420px; font: inherit; font-size: 15px; padding: 8px 10px; border: 1.5px solid var(--line-strong); border-radius: 3px; background: var(--surface-2); color: var(--ink); display: block; margin-top: 4px; }
.work-missing .btn { min-height: 44px; margin-right: 8px; }
.work-table-wrap { overflow-x: auto; max-width: 100%; }
.work-team { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.work-col-person { width: 16%; } .work-col-status { width: 20%; } .work-col-top3 { width: 32%; } .work-col-load { width: 9%; } .work-col-active { width: 10%; } .work-col-attn { width: 13%; }
.work-team th[scope="row"], .work-team td { overflow-wrap: normal; }
.work-team .work-desc { overflow-wrap: normal; }
.work-team th, .work-team td { text-align: left; vertical-align: top; padding: 8px 8px; border-top: 1px solid var(--line); }
.work-team thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); border-top: 0; }
.work-team th[scope="row"] { font-weight: 600; }
.work-team th[scope="row"] a { color: var(--pm-green-700); }
.work-team .work-group th { background: var(--surface-2); font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); padding-top: 12px; }
.work-team tr.is-missing th[scope="row"], .work-team tr.is-late th[scope="row"] { border-left: 4px solid var(--crit); }
.work-team tr.is-off th[scope="row"] { border-left: 4px solid var(--watch); }
.work-team tr.is-submitted th[scope="row"], .work-team tr.is-updated th[scope="row"], .work-team tr.is-also_submitted th[scope="row"] { border-left: 4px solid var(--ok); }
.work-team tr.is-not_expected th[scope="row"] { border-left: 4px solid var(--line); color: var(--ink-2); }
.work-team .work-muted { margin-top: 0; }
@media (max-width: 799px) {
  .work-team { table-layout: auto; }
  .work-team colgroup { display: none; }
  .work-team, .work-team tbody, .work-team tr, .work-team td, .work-team th { display: block; }
  .work-team thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .work-team tr.work-person { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 6px 0; margin: 8px 0; }
  .work-team tr.work-group th { border: 0; background: transparent; padding: 14px 0 2px; }
  .work-team th, .work-team td { border-top: 0; padding: 4px 10px; }
  .work-team th[scope="row"] { font-size: 16px; padding-top: 8px; }
  .work-team td::before { content: attr(data-label); display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 1px; }
  .work-team td:empty { display: none; }
}
.work-tabs { display: flex; gap: 0; margin: 0 0 12px; border-bottom: 2px solid var(--line); }
.work-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--ink-2); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.work-tabs a[aria-current="page"] { color: var(--pm-green-700); border-bottom-color: var(--pm-green-700); }
.work-back { margin: 0 0 8px; font-size: 14px; }
.work-status-line { margin-top: 6px; font-size: 14.5px; }
.work-strip { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0; margin: 0; }
@media (min-width: 1024px) { .work-strip { grid-template-columns: repeat(14, minmax(0, 1fr)); } }
.work-strip-day { min-width: 0; }
.work-strip-day a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 60px; min-width: 0; overflow: hidden; padding: 4px 1px; border: 1px solid var(--line); border-radius: 3px; text-decoration: none; color: var(--ink); background: var(--surface); font-size: 11px; }
.work-strip-day[aria-current="date"] a { border-color: var(--pm-green-700); box-shadow: inset 0 0 0 1px var(--pm-green-700); }
.work-strip-date { color: var(--ink-3); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip; }
.work-strip-mark { font-size: 18px; line-height: 1; }
.work-strip-load { font-weight: 700; min-height: 1em; }
.work-strip-day.is-submitted .work-strip-mark { color: var(--ok); }
.work-strip-day.is-off .work-strip-mark { color: var(--watch); }
.work-strip-day.is-missing .work-strip-mark, .work-strip-day.is-due .work-strip-mark { color: var(--crit); }
.work-strip-day.is-not_expected .work-strip-mark, .work-strip-day.is-holiday .work-strip-mark { color: var(--ink-3); }
/* stage 6.1 closeout */
.work-strip-day.is-voided .work-strip-mark { color: var(--crit); font-weight: 700; }
.work-hist-row.is-voided { border-left: 4px solid var(--crit); }
.work-top3 li.is-done .work-desc { text-decoration: line-through; color: var(--ink-3); }
.work-edit.is-over, .work-sheet-input.is-over, #work-new.is-over { border-color: var(--crit); box-shadow: 0 0 0 2px var(--crit-bg); }
.work-over:not(:empty) { display: block; color: var(--crit); font-weight: 600; margin-top: 4px; }
.work-voice-live.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* stage 7: work plan administration (namespaced .wa) */
.wa h1 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 4px 0 6px; }
.wa h2 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.wa-section { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.wa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.wa-card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); text-decoration: none; min-height: 44px; }
.wa-card-n { font-size: 24px; font-weight: 700; line-height: 1.1; }
.wa-card-l { font-size: 13px; color: var(--ink-2); }
.wa-card.is-zero .wa-card-n { color: var(--ink-3); }
.wa-card.is-warn:not(.is-zero) { border-color: var(--watch); }
.wa-card.is-err:not(.is-zero) { border-color: var(--crit); }
.wa-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wa-table th, .wa-table td { text-align: left; vertical-align: top; padding: 6px 8px; border-top: 1px solid var(--line); }
.wa-table thead th { border-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.wa-table tr.is-attention td, .wa-table tr.is-warning td { background: var(--watch-bg); }
.wa-table tr.is-bad td { color: var(--ink-3); }
.wa-table tr.is-voided td { color: var(--crit); }
.wa-scroll { overflow-x: auto; max-width: 100%; }
.wa-dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 4px 14px; margin: 8px 0 12px; font-size: 14.5px; }
.wa-dl dt { color: var(--ink-3); }
.wa-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .wa-dl { grid-template-columns: 1fr; } .wa-dl dt { margin-top: 6px; } }
.wa-np { color: var(--ink-3); font-style: italic; }
.wa-warn { color: var(--watch); font-weight: 600; }
.wa-err { color: var(--crit); font-weight: 600; }
.wa-flag { display: inline-block; padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 12px; background: var(--surface); }
.wa-flag.is-held { border-color: var(--watch); color: var(--ink); background: var(--watch-bg); }
.wa-status { display: inline-block; padding: 2px 9px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; background: var(--surface); border: 1px solid var(--line); }
.wa-status.is-applied { color: var(--ok); border-color: var(--ok); }
.wa-status.is-wrong_date, .wa-status.is-pending { color: var(--watch); border-color: var(--watch); }
.wa-status.is-rejected, .wa-status.is-superseded, .wa-status.is-duplicate { color: var(--ink-3); }
.wa-cands { list-style: none; padding: 0; margin: 0; }
.wa-cand { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.wa-cand-head a { text-decoration: none; color: var(--ink); }
.wa-questions { margin: 8px 0 12px; padding: 10px 14px; border-left: 4px solid var(--watch); background: var(--watch-bg); }
.wa-questions ol { margin: 4px 0 0 18px; padding: 0; }
.wa-questions li { margin: 4px 0; line-height: 1.5; }
.wa-form { display: grid; gap: 10px; max-width: 760px; }
.wa-field { display: grid; gap: 4px; font-size: 14px; }
.wa-field > span { color: var(--ink-2); }
.wa-field input, .wa-field textarea, .wa-field select { font: inherit; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; width: 100%; box-sizing: border-box; }
.wa-field textarea { min-height: 90px; }
.wa-fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.wa-fieldset legend { font-size: 13px; color: var(--ink-2); padding: 0 4px; }
.wa-fieldset label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.wa-fieldset .wa-field { flex: 1 1 100%; }
.wa-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wa-actions .btn { min-height: 44px; }
.wa-secondary { margin-top: 10px; }
.wa-inline input[type="text"], .wa-inline input[type="search"] { font: inherit; min-height: 44px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; max-width: 220px; }
.wa-inline label { display: inline-flex; align-items: center; gap: 6px; }
.wa-search { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin: 6px 0 10px; }
.wa-search .wa-field { flex: 1 1 240px; }
.wa-people { list-style: none; padding: 0; margin: 0 0 8px; }
.wa-people li { padding: 6px 0; border-top: 1px solid var(--line); }
.wa-people a { color: var(--ink); font-weight: 600; }
.wa-features { list-style: none; padding: 0; margin: 0; }
.wa-feature { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.wa-feature .is-on { color: var(--ok); }
.wa-feature .is-off { color: var(--crit); }
.wa-decide { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--watch); background: var(--watch-bg); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.wa-decide label { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.wa-raw { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: 12.5px; }
.wa-tools { display: grid; gap: 6px; min-width: 260px; }
.wa-flash { margin: 0 0 10px; }
.wa-held { display: flex; flex-wrap: wrap; gap: 4px; }
.wa-events td:nth-child(2) { min-width: 240px; }
.wa-events code { overflow-wrap: anywhere; }
.wa-lines td:nth-child(2) { min-width: 260px; }
.wa-lines td:nth-child(6) { min-width: 160px; }
.work-merged { margin: 6px 0 0; font-size: 14px; }
/* stage 7.1 */
.wa-replace-note { margin: 0 0 8px; padding: 8px 12px; border-left: 4px solid var(--watch); background: var(--watch-bg); font-size: 14px; }
.wa-task-form { display: grid; gap: 6px; }
.wa-inline-fields { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.wa-inline-fields select, .wa-inline-fields input[type="text"] { font: inherit; min-height: 40px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; }
.wa-livelist td:nth-child(2) { min-width: 320px; }
/* stage 8: Company Attention (namespaced .wc) */
.wc h1 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 4px 0 6px; }
.wc h2 { font-size: 16px; font-weight: 700; margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wc-section { margin: 14px 0 0; }
.wc-block { padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); margin-bottom: 12px; min-width: 0; }
.wc-grid-top, .wc-grid-two { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .wc-grid-top { grid-template-columns: 3fr 2fr; } .wc-grid-two { grid-template-columns: 1fr 1fr; } }
.wc-basis { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink-2); background: var(--bg); }
.wc-basis.is-official { border-style: solid; }
.wc-basis.is-live { border-style: dashed; }
.wc-basis.is-derived { border-style: dotted; }
.wc-headline { font-size: 18px; margin: 4px 0 6px; }
.wc-headline strong { font-size: 24px; }
.wc-nums { margin: 4px 0 8px; line-height: 1.9; }
.wc-num { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding: 2px 0; }
.wc-num strong { font-size: 18px; }
.wc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wc-table th, .wc-table td { text-align: left; vertical-align: top; padding: 5px 8px; border-top: 1px solid var(--line); }
.wc-table thead th { border-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.wc-table tr.wc-total th, .wc-table tr.wc-total td { font-weight: 700; border-top: 2px solid var(--ink-3); }
.wc-scroll { overflow-x: auto; max-width: 100%; }
.wc-cards { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.wc-card { padding: 8px 10px; border-left: 4px solid var(--watch); background: var(--bg); border-radius: 4px; display: grid; gap: 2px; }
.wc-card.is-overwhelmed { border-left-color: var(--crit); }
.wc-warn { color: var(--watch); font-weight: 600; }
.wc-units { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wc-units li a { display: inline-block; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); text-decoration: none; min-height: 44px; }
.wc-sources { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wc-sources a { color: var(--ink); }
.wc-seq { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 3px; font-size: 12px; font-weight: 700; background: var(--bg); border: 1px solid var(--line); }
.wc-seq.is-overwhelmed { background: var(--crit-bg); color: var(--crit); }
.wc-tasks { padding-left: 18px; }
.wc-not-busy .wc-headline strong { font-size: 24px; }
.wc-not-busy-word { text-decoration: underline dotted; text-underline-offset: 3px; }
.wc-top3 { margin: 0; padding-left: 1.6em; font-size: 13.5px; list-style: decimal; }
.wc-top3 li::marker { font-weight: 700; }
.wc-top3 .work-desc, .wc-table .work-desc { overflow-wrap: anywhere; }
.wc-list { padding: 12px 14px; border: 2px solid var(--pm-green-700); border-radius: 6px; background: var(--surface); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 799px) {
  .wc-table:not(.wc-depts) thead { display: none; }
  .wc-table:not(.wc-depts) tr { display: grid; gap: 2px; padding: 6px 0; border-top: 1px solid var(--line); }
  .wc-table:not(.wc-depts) td { border-top: 0; padding: 0; }
  .wc-table:not(.wc-depts) td::before { content: attr(data-label) ": "; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
  .wc-table:not(.wc-depts) td:empty { display: none; }
  .wc-depts { font-size: 13px; }
  .wc-depts th, .wc-depts td { padding: 4px 6px; }
}

/* ---- My Orders: the package-tracking bar ---------------------------------- */
.ord-stats .stat { text-decoration: none; }
.ord-toolbar { flex-wrap: wrap; gap: 8px; }
.ord-toolbar .btn, .ord-toolbar input, .ord-toolbar select { min-height: 44px; }
.ord-search { display: flex; gap: 6px; flex: 1 1 260px; }
.ord-search input { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink); }
.ord-site select { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink); max-width: 260px; }
.ord-group { margin-top: 14px; }
.ord-group > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 13px 16px 11px; }
.ord-group > summary::-webkit-details-marker { display: none; }
.ord-group > summary::before { content: '\25B8'; color: var(--ink-3); font-size: 12px; }
.ord-group[open] > summary::before { content: '\25BE'; }
.ord-group > summary h2 { margin: 0; font-size: 15px; }
.ord-list { list-style: none; margin: 0; padding: 4px 16px 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.ord-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-width: 0; }
.ord-row.is-warn { border-left: 3px solid var(--warn); }
.ord-row.is-ok { border-left: 3px solid var(--ok); }
.ord-row.is-watch { border-left: 3px solid var(--line-strong); }
.ord-head { display: flex; align-items: flex-start; gap: 10px; }
.ord-what { font-weight: 600; font-size: 14px; line-height: 1.35; flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; }
.ord-what:hover { text-decoration: underline; }
.ord-head .cp-pill { flex: none; white-space: nowrap; }
.ord-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ord-when { font-size: 13px; color: var(--ink-2); }
.ord-when b { font-weight: 600; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-right: 3px; }
.ord-track { list-style: none; margin: 0; padding: 0; display: flex; width: 132px; flex: none; }
.ord-track li { flex: 1; position: relative; font-size: 0; }
.ord-track li::before { content: ''; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--line-strong); }
.ord-track li:first-child::before { display: none; }
.ord-track li.is-done::before, .ord-track li.is-now::before { background: var(--ok); }
.ord-dot { display: block; width: 14px; height: 14px; margin: 0 auto; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); position: relative; z-index: 1; box-sizing: border-box; }
.ord-track li.is-done .ord-dot { background: var(--ok); border-color: var(--ok); }
.ord-track li.is-now .ord-dot { background: var(--surface); border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.ord-track .ord-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ord-track.is-canceled .ord-dot { border-style: dashed; }
.ord-row.is-warn .ord-track li.is-now .ord-dot { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg, var(--surface-2)); }
.ord-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; line-height: 1.4; }
.ord-kv dt { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.ord-kv dd { margin: 0; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.ord-kv .ord-po { color: var(--ink); font-weight: 600; letter-spacing: .01em; }
.ord-row .muted, .ord-kv .muted { color: var(--ink-3); }
.meta-line .kv b { font-weight: 600; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-right: 3px; }
.meta-line .kv { margin-right: 14px; }
@media (max-width: 420px) { .ord-list { grid-template-columns: 1fr; padding: 4px 10px 12px; } }
.ord-pager { display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; margin: 0; }
.ord-stats div.stat { cursor: default; }
/* task 071: the scanner's receipts under a PO line, and the Landed today page */
.ord-ev-row td { padding: 0 10px 8px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ord-events { list-style: none; margin: 0; padding: 4px 0 0; display: grid; gap: 3px; font-size: 12.5px; color: var(--ink-2); }
.ord-events li::before { content: '\21B3'; color: var(--ink-3); margin-right: 6px; }
.ord-events b { font-weight: 600; color: var(--ink); }
.ord-events .cp-pill { margin-left: 6px; }
.ord-landed { margin: 8px 0 12px; }
.ord-landed select, .ord-landed input { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13.5px; background: var(--surface); color: var(--ink); max-width: 100%; }
.ord-landed input[type=search] { flex: 1 1 200px; min-width: 0; }
.ord-landed-table td.ord-time { white-space: nowrap; font-weight: 600; }
.ord-landed-table td.ord-time .cp-pill { display: block; margin-top: 3px; }
.ord-landed-table td.ord-po-cell a { color: var(--ink-3); font-weight: 400; }

/* ---- Security: Now page ------------------------------------------------- */
.sec-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.sec-hero h1 { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: .01em; margin: 0; }
.sec-hero p { margin: 2px 0 0; font-size: 13.5px; }
.sec-hero-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sec-updated { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; line-height: 1.3; margin-right: 4px; }
.sec-updated b { font-weight: 600; color: var(--ink); }
.sec-iconbtn { padding-left: 9px; padding-right: 9px; }
.sec-tabs .btn { display: inline-flex; align-items: center; gap: 7px; }
.sec-tabs .btn svg { flex: none; }
.btn.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.sec-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sec-stat { display: flex; align-items: center; gap: 12px; border-top-width: 1px; padding: 12px 14px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
button.sec-stat { appearance: none; -webkit-appearance: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card, 6px); }
button.sec-stat:hover { border-color: var(--line-strong); background: var(--surface-2); }
button.sec-stat.is-filter-on { border-color: var(--pm-green-700); box-shadow: inset 0 0 0 1px var(--pm-green-700); }
button.sec-stat:focus-visible { outline: 2px solid var(--pm-green-600); outline-offset: 2px; }
.sec-stat .l { font-size: 12px; color: var(--ink-3); }
.sec-stat .n { font-size: 22px; line-height: 1.1; }
.sec-stat-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.sec-stat.is-ok .sec-stat-icon { background: var(--ok-bg); color: var(--ok); }
.sec-stat.is-warn .sec-stat-icon { background: var(--warn-bg, var(--surface-2)); color: var(--warn); }
.sec-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; list-style: none; margin: 0 0 8px; padding: 0 16px; font-size: 13px; color: var(--ink-2); }
.sec-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sec-legend-swatch { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; padding: 2px 6px; border-radius: 4px; font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.sec-legend-swatch.is-ok { background: var(--ok-bg); color: var(--ok); }
.sec-legend-swatch.is-auto { background: var(--surface-2); color: var(--ink-2); font-style: italic; font-weight: 500; }
.sec-legend-swatch.is-warn { background: var(--warn-bg); color: var(--warn); }
.sec-legend-swatch.is-crit { background: var(--crit-bg); color: var(--crit); }
.sec-legend-swatch.is-alarm { background: var(--crit); color: #fff; }
.sec-legend-swatch.is-zero { background: transparent; color: var(--ink-3); border: 1px solid var(--line); font-weight: 400; }
.sec-legend-mark { color: var(--crit); font-size: 11px; }
.sec-legend-note { margin: 0 16px 12px; font-size: 13px; }
.sec-panel-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px 6px; }
.sec-panel-hd h2 { margin: 0; }
.sec-panel-hd p { margin: 2px 0 0; font-size: 13px; }
.sec-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sec-search input { padding: 7px 10px 7px 12px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13px; min-width: 220px; background: var(--surface); color: var(--ink); }
.sec-controls select { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); }
.sec-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; }
.sec-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sec-switch .sec-track { width: 34px; height: 18px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .15s; }
.sec-switch .sec-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.sec-switch input:checked + .sec-track { background: var(--pm-green-700); }
.sec-switch input:checked + .sec-track::after { left: 18px; }
.sec-switch input:focus-visible + .sec-track { outline: 2px solid var(--pm-green-600); outline-offset: 2px; }
.sec-now { font-size: 13.5px; }
.sec-now td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.sec-now tr.sec-city-row th { text-align: left; text-transform: none; font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--surface-2); letter-spacing: 0; padding-top: 8px; padding-bottom: 7px; }
.sec-now td.sec-name { white-space: nowrap; }
.sec-now td.sec-name b { font-weight: 600; }
.sec-toggle { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 4px; border: 0; background: transparent; color: var(--ink-3); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; border-radius: 4px; vertical-align: middle; }
.sec-toggle:hover { background: var(--surface-2); color: var(--ink); }
.sec-toggle.is-blank { cursor: default; }
.sec-now:not(.has-js) .sec-toggle { visibility: hidden; }
.sec-bicon { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; color: var(--ink-3); vertical-align: middle; }
.sec-now tr.is-child td.sec-name { padding-left: 46px; }
.sec-bullet { display: inline-block; width: 8px; margin-right: 10px; color: var(--line-strong); font-size: 18px; line-height: 0; vertical-align: middle; }
.sec-bullet.is-ok { color: var(--ok); } .sec-bullet.is-watch { color: var(--ok); } .sec-bullet.is-alarm, .sec-bullet.is-crit { color: var(--crit); } .sec-bullet.is-warn { color: var(--warn); }
.sec-now td.sec-seen { white-space: nowrap; color: var(--ink-2); }
.sec-act b { font-weight: 600; margin-right: 4px; }
.sec-zone { display: inline-flex; align-items: center; gap: 6px; }
.sec-zone svg { flex: none; }
.sec-zone.is-ok { color: var(--ok); } .sec-zone.is-ok b { font-weight: 600; }
.sec-zone.is-warn { color: var(--warn); }
.sec-zone.is-crit { color: var(--crit); }
.sec-zone.is-crit svg, .sec-zone.is-warn svg { color: inherit; }
.sec-now td.sec-actions { text-align: right; white-space: nowrap; }
.sec-now tr.sec-bld-row.is-issue td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.sec-now tr.is-alarm td, .sec-now tr.sec-bld-row.is-issue td { background: var(--crit-bg); }
.sec-now tr.is-child.is-issue td { background: transparent; }
@media (max-width: 900px) { .sec-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sec-hero-r { width: 100%; justify-content: flex-start; } .sec-updated { align-items: flex-start; } }

/* ---- Feedback chat ------------------------------------------------------- */
.fb-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--pm-green-800, var(--pm-green-700)); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-md); cursor: pointer; }
.fb-fab:hover { background: var(--pm-green-700); }
.fb-fab.is-open { opacity: 0; pointer-events: none; }
.mobile-app-nav .fb-in-nav { position: static; flex: 1; min-width: 0; min-height: 46px; padding: 2px 3px; flex-direction: column; justify-content: center; gap: 3px; box-shadow: none; border-radius: 8px; background: transparent; color: var(--ink); font-size: 11px; }
.mobile-app-nav .fb-in-nav .fb-fab-badge { position: static; min-width: 14px; height: 14px; line-height: 14px; }
@media (max-width: 800px) {
  body.has-fb-nav .mobile-app-nav { gap: 2px; }
  body.has-fb-nav .mobile-app-nav a, body.has-fb-nav .mobile-app-nav label { min-width: 0; font-size: 11px; text-align: center; }
  body.has-fb-nav .app .main { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}
.fb-fab-badge { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--crit); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }
/* the button must never sit on top of something clickable: give every page room below its last control */
body.has-fb .main { padding-bottom: 84px; }
.fb-drawer[hidden], .fb-drawer [hidden], .fb-full [hidden] { display: none !important; }
.fb-drawer { position: fixed; right: 18px; bottom: 18px; z-index: 61; width: min(400px, calc(100vw - 36px)); max-height: min(600px, calc(100vh - 36px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); overflow: hidden; }
.fb-hd { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 14px; background: var(--pm-green-900); color: #fff; }
.fb-hd b { flex: 1; font-size: 13px; }
.fb-close { border: 0; background: transparent; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.fb-log { flex: 1; min-height: 180px; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.fb-full .fb-log { min-height: 320px; max-height: 60vh; border: 1px solid var(--line); border-radius: 10px; }
.fb-msg { max-width: 85%; align-self: flex-start; }
.fb-msg.is-mine { align-self: flex-end; }
.fb-bubble { padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-msg.is-mine .fb-bubble { background: var(--pm-green-700); color: #fff; border-color: var(--pm-green-700); border-radius: 14px 14px 4px 14px; }
.fb-msg.is-staff .fb-bubble { background: var(--ok-bg); border-color: var(--ok); }
.fb-page .fb-msg.is-staff { align-self: flex-end; }
.fb-page .fb-msg.is-staff .fb-bubble { border-radius: 14px 14px 4px 14px; }
.fb-meta { font-size: 11.5px; margin-top: 3px; }
.fb-msg.is-mine .fb-meta { text-align: right; }
.fb-compose { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 10px; }
.has-msgs .fb-compose { border-top: 1px solid var(--line); }
.fb-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.fb-about { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.fb-about-l { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.fb-about select { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); }
.fb-compose textarea, .fb-reply textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 44px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 10px; font: inherit; font-size: 14px; line-height: 1.45; background: var(--surface); color: var(--ink); }
.fb-compose textarea:focus { outline: 2px solid var(--pm-green-600); outline-offset: 1px; border-color: var(--pm-green-600); }
.fb-line { display: flex; align-items: center; gap: 10px; }
.fb-line .fb-hint { flex: 1; font-size: 11px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-mic { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.fb-mic:hover { background: var(--surface-2); }
.fb-mic.is-on { border-color: var(--crit); color: var(--crit); animation: fb-pulse 1.2s ease-in-out infinite; }
@keyframes fb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(155,44,44,.35); } 50% { box-shadow: 0 0 0 6px rgba(155,44,44,0); } }
.fb-full .fb-compose { padding: 12px 0 0; }
.fb-threads { list-style: none; margin: 0; padding: 0 16px 8px; }
.fb-thread { border-top: 1px solid var(--line); }
.fb-thread:first-child { border-top: 0; }
.fb-thread a { display: block; padding: 12px 8px; text-decoration: none; color: inherit; border-radius: 8px; }
.fb-thread a:hover { background: var(--surface-2); }
.fb-thread.is-fresh .fb-thread-hd b { color: var(--pm-green-800, var(--ink)); }
.fb-thread-hd { display: flex; align-items: center; gap: 8px; }
.fb-thread-hd .fb-when { margin-left: auto; font-size: 12px; white-space: nowrap; }
.fb-preview { font-size: 13.5px; margin-top: 2px; color: var(--ink-2); }
.fb-reply { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.fb-reply textarea { flex: 1; }
.fb-page .fb-log { margin: 0 0 4px; }
@media (max-width: 560px) { .fb-drawer { right: 0; bottom: 0; width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; } .fb-fab { padding: 10px 14px; } .fb-line .fb-hint { display: none; } }

/* ---- admin: activity --------------------------------------------------- */
.adm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.adm-two .panel { margin-top: 0; }
@media (max-width: 800px) { .adm-two { grid-template-columns: 1fr; } }

/* ---- My Orders: the group chart --------------------------------------- */
.ord-chart { display: grid; gap: 6px; margin: 6px 0 4px; max-width: 720px; }
.ord-scope { margin: 8px 0; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.ord-overview { padding: 16px; }
.ord-overview h2 { font-size: 17px; margin: 0 0 8px; }
.ord-overview .why { font-size: 13px; margin: 0 0 12px; }
.ord-timing-note { display: block; color: var(--ink-2); font-size: 12px; text-transform: none; }
.ord-bar { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 36px; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-size: 13px; }
.ord-bar:hover .ord-bar-l { text-decoration: underline; }
.ord-bar-l { color: var(--ink-2); }
.ord-bar.is-empty .ord-bar-l, .ord-bar.is-empty .ord-bar-n { color: var(--ink-3); }
.ord-bar-track { height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.ord-bar-fill { display: block; height: 100%; border-radius: 7px; background: var(--line-strong); }
.ord-bar.is-ok .ord-bar-fill { background: var(--ok); }
.ord-bar.is-watch .ord-bar-fill { background: var(--pm-green-600, var(--ok)); opacity: .75; }
.ord-bar.is-warn .ord-bar-fill { background: var(--warn); }
.ord-bar-n { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .ord-bar { grid-template-columns: 1fr 30px; gap: 4px; min-height: 44px; }
  .ord-bar-l { grid-column: 1; grid-row: 1; }
  .ord-bar-n { grid-column: 2; grid-row: 1; }
  .ord-bar-track { grid-column: 1 / -1; grid-row: 2; height: 5px; }
  .ord-bar.is-empty .ord-bar-track { display: none; }
}

/* ---- Sales hub shell ------------------------------------------------------ */
.sh-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-bottom: 10px; }
.sh-eyebrow { display: block; font: 500 11.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.sh-top h1 { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.1; margin: 0; }
.sh-fresh { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); margin: 0; }
.sh-fresh::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.sh-hub { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 8px; }
.sh-chip { font-size: 13px; padding: 6px 12px; border-radius: 999px; color: var(--ink-2); text-decoration: none; background: var(--surface-2); border: 1px solid var(--line); }
.sh-chip.is-on { background: var(--pm-green-900); color: #fff; border-color: var(--pm-green-900); font-weight: 600; }
.sh-chip.is-soon { opacity: .6; cursor: default; }
.sh-chip.is-soon small { font-size: 11px; }
.sh-sub { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; margin-bottom: 14px; }
.sh-subl { color: var(--ink-2); text-decoration: none; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.sh-subl.is-on { color: var(--ink); border-color: var(--s1); font-weight: 600; }
.sh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 12px; }
.sh-row { display: grid; gap: 12px; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 12px; }
.sh-card { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 16px; margin: 0; }
.sh-card h2 { margin: 0; font-size: 17px; }
.sh-c8 { grid-column: span 8; } .sh-c4 { grid-column: span 4; } .sh-c6 { grid-column: span 6; } .sh-c7 { grid-column: span 7; } .sh-c5 { grid-column: span 5; } .sh-c12 { grid-column: span 12; }
.sh-hd { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sh-cap { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.sh-legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.sh-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.sh-legend i.is-a { background: var(--s1); } .sh-legend i.is-b { background: var(--s2); }
.sh-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh-split > * { min-width: 0; }
/* Sales -> Property (078): inline entry forms in the sizes table */
.pr-form { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; }
.pr-form label { display: grid; gap: 2px; font-size: 12px; color: var(--ink-3); }
.pr-form input[type=number] { width: 7em; } .pr-form input[type=text] { width: 11em; }
.pr-import { display: grid; gap: 10px; max-width: 640px; } .pr-import textarea { width: 100%; font-family: var(--font-mono, monospace); font-size: 12px; }
.pr-table tr.is-focus td { background: var(--warn-bg); }
/* Purchasing activity (088): group rows in the by-purchaser table */
.cp-table tr.is-group td { background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }   /* a table in a .scroll box must not widen the column (Sales -> Leads, 077) */
.sh-mini { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; }
.sh-mini .v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-mini .l { font-size: 12px; color: var(--ink-3); }
.sh-narrow { display: none; }
@media (max-width: 980px) { .sh-c8, .sh-c4, .sh-c6, .sh-c7, .sh-c5 { grid-column: span 12; } }
@media (max-width: 560px) { .sh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sh-wide { display: none; } .sh-narrow { display: block; } .sh-split { grid-template-columns: 1fr; } }

/* ---- svgchart.js ---------------------------------------------------------- */
.ch { display: block; width: 100%; height: auto; overflow: visible; }
.ch text { font-family: var(--font-body); font-size: 10.5px; fill: var(--ink-3); }
.ch .ch-grid { stroke: var(--grid); stroke-width: 1; }
.ch .ch-lbl { fill: var(--ink-2); font-weight: 600; }
.ch .ch-rowl { fill: var(--ink-2); font-size: 12px; }
.ch .ch-right { fill: var(--ink); font-weight: 600; font-size: 12px; }
.ch .ch-on-dark { fill: #fff; font-weight: 600; }
.ch .ch-a { fill: var(--s1); } .ch .ch-b { fill: var(--s2); }
.ch .ch-line { stroke: var(--s1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ch .ch-area { fill: var(--s1); fill-opacity: .18; stroke: none; }
.ch .ch-dot { fill: var(--s1); stroke: var(--surface); stroke-width: 2; }
.ch .ch-band { fill: var(--surface-2); }
.ch .ch-empty-cell { stroke: var(--line); stroke-dasharray: 2 3; }
.ch .ch-partial { stroke: var(--ink-3); }
.ch .ch-tile-none { fill: var(--surface-2); stroke: var(--line); }
.ch a { text-decoration: none; }
.ch a:hover path, .ch a:hover rect { filter: brightness(1.08); }
.ch-empty { padding: 18px 0; font-size: 13px; }
.ch-numbers { font-size: 12.5px; }
.ch-numbers summary { cursor: pointer; color: var(--ink-3); }
.ch-numbers table { margin-top: 6px; font-size: 12.5px; }
.ch-numbers caption { text-align: left; font-size: 11.5px; color: var(--ink-3); padding: 4px 0; }
.ch-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 12px; display: grid; gap: 4px; text-decoration: none; color: inherit; min-width: 0; }
.ch-tile:hover { border-color: var(--s1); }
.ch-tile-l { font-size: 12.5px; color: var(--ink-2); }
.ch-tile-v { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ch-tile-v small { font-size: 14px; font-weight: 500; color: var(--ink-3); font-family: var(--font-body); }
.ch-tile-d { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ch-delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-delta.is-good { color: var(--ok); } .ch-delta.is-bad { color: var(--crit); } .ch-delta.is-none { color: var(--ink-3); font-weight: 400; }
.ch-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ch-age { display: flex; gap: 2px; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.ch-age-seg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 11.5px; font-weight: 600; color: var(--wf-heat-light, var(--ink)); min-width: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ch-age-seg { color: var(--wf-heat-dark, var(--ink)); } }
:root[data-theme="dark"] .ch-age-seg { color: var(--wf-heat-dark, var(--ink)); }
.ch-age-link { height: 100%; }
.ch-age-legend { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

/* ---- People (task 051) ----------------------------------------------------- */
/* 5 Voices colours: fixed per voice, never cycled. Three are under 3:1 on white,
   so the voice name always sits beside the colour. Light / dark pairs validated. */
:root { --pv-pioneer: #2a78d6; --pv-connector: #eb6834; --pv-creative: #1baf7a; --pv-guardian: #eda100; --pv-nurturer: #e87ba4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pv-pioneer: #3987e5; --pv-connector: #d95926; --pv-creative: #199e70; --pv-guardian: #c98500; --pv-nurturer: #d55181; } }
:root[data-theme="dark"] { --pv-pioneer: #3987e5; --pv-connector: #d95926; --pv-creative: #199e70; --pv-guardian: #c98500; --pv-nurturer: #d55181; }
.is-pioneer { --pv: var(--pv-pioneer); } .is-connector { --pv: var(--pv-connector); } .is-creative { --pv: var(--pv-creative); } .is-guardian { --pv: var(--pv-guardian); } .is-nurturer { --pv: var(--pv-nurturer); }
.sh-fresh.is-none::before { background: var(--line-strong); }
.sh-fresh.is-warn { color: var(--warn); } .sh-fresh.is-warn b { font-weight: 700; } .sh-fresh.is-warn::before { background: var(--warn); }
.work-roster { margin-top: 6px; }
.pp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.pp-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 14px 16px 12px; display: grid; gap: 4px; align-content: start; color: inherit; text-decoration: none; min-width: 0; }
.pp-kpi .l { font-size: 12.5px; color: var(--ink-2); }
.pp-kpi .v { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pp-kpi .v small { font-size: 14px; font-weight: 500; color: var(--ink-3); font-family: var(--font-body); }
.pp-kpi .d { font-size: 12.5px; color: var(--ink-3); }
.pp-cov { display: grid; grid-template-columns: 62px 1fr 34px; gap: 4px 8px; align-items: center; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.pp-cov .t { height: 6px; border-radius: 3px; background: var(--grid); overflow: hidden; }
.pp-cov .t i { display: block; height: 100%; background: var(--s1); border-radius: 3px; }
.pp-cov b { font-weight: 600; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.pp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.pp-card h2 { margin: 0; font-size: 17px; } .pp-card h3 { margin: 0; font-size: 14.5px; } .pp-card h3 small { font-weight: 500; font-size: 11px; margin-left: 6px; }
.pp-cap { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.pp-stack { display: grid; gap: 4px; min-width: 0; } .pp-stack.grow { flex: 1; min-width: 160px; }
.pp-lnk { color: var(--ink); border-bottom: 1px dotted var(--ink-3); text-decoration: none; justify-self: start; } .pp-lnk:hover { color: var(--s1); }
.pp-name { font-weight: 600; text-decoration: none; } .pp-name:hover { text-decoration: underline; }
.pp-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-3); }
.pp-crumbs a { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--ink-2); text-decoration: none; } .pp-crumbs a:hover { color: var(--ink); }
.pp-focus { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--surface-2); border-radius: var(--r-card); padding: 12px 14px; }
.pp-focus .who { display: grid; gap: 2px; flex: 1; min-width: 180px; } .pp-focus .who b { font-size: 16px; }
.pp-av { width: 40px; height: 40px; border-radius: 50%; background: var(--seq-lo); color: var(--seq-hi); display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none; }
.pp-av.is-big { width: 52px; height: 52px; font-size: 18px; }
.pp-mix { display: block; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; min-width: 120px; } .pp-mix rect { fill: var(--pv); }
.pp-orgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; }
.pp-node { border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 11px; display: grid; gap: 6px; align-content: start; background: var(--surface); position: relative; min-width: 0; }
.pp-node.is-me { border-color: var(--s1); box-shadow: 0 0 0 1px var(--s1) inset; }
.pp-node .nm { font-size: 13.5px; line-height: 1.25; padding-right: 30px; } .pp-node .meta { font-size: 11.5px; color: var(--ink-3); }
.pp-open { justify-self: start; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--ink-2); text-decoration: none; } .pp-open:hover { border-color: var(--s1); color: var(--ink); }
.pp-you { position: absolute; top: 8px; right: 9px; font-size: 10.5px; font-weight: 600; color: var(--s1); letter-spacing: .04em; text-transform: uppercase; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 1px 8px 1px 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.pp-chip.is-none { color: var(--ink-3); border-style: dashed; }
.pp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--pv); vertical-align: 0; margin-right: 2px; }
.pp-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ink-2); } .pp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--pv); }
.pp-orphans { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 6px; } .pp-orphans ul { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; }
.pp-mehead { display: flex; gap: 12px; align-items: center; }
.pp-warn { font-size: 12.5px; color: var(--ink-2); border-left: 3px solid var(--pv-guardian); padding: 6px 10px; background: var(--surface-2); border-radius: 0 4px 4px 0; }
.pp-stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-table th, .pp-table td { white-space: nowrap; } .pp-table td:first-child { white-space: normal; min-width: 150px; }
.pp-onfile { display: inline-flex; gap: 3px; } .pp-onfile span { width: 18px; height: 18px; border-radius: 4px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; }
.pp-onfile .y { background: var(--seq-lo); color: var(--seq-hi); } .pp-onfile .n { border: 1px dashed var(--ink-3); color: var(--ink-3); }
.pp-dir { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
.pp-dir-group { display: grid; gap: 8px; }
.pp-dir-group + .pp-dir-group { margin-top: 4px; }
.pp-dir-group .pp-dir { max-height: 280px; }
.pp-hub-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.pp-search { display: flex; gap: 8px; flex-wrap: wrap; } .pp-search input { flex: 1; min-width: 200px; font: inherit; min-height: 40px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); color: var(--ink); }
.pp-flags { display: grid; max-height: 430px; overflow: auto; } .pp-flags.is-tall { max-height: none; }
.pp-flag { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 4px 12px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--line); } .pp-flag:last-child { border-bottom: 0; }
.pp-note { font-size: 12.5px; color: var(--ink-2); border-left: 3px solid var(--s1); padding: 8px 12px; background: var(--surface); margin-top: 4px; }
.pp-lock { font-size: 12px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; margin: 0; }
.pp-hb { display: block; width: 100%; max-width: 420px; height: auto; } .pp-hb text { font-family: var(--font-body); font-size: 11.5px; fill: var(--ink-2); } .pp-hb .pp-hb-v { fill: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-hb .pp-hb-bar { fill: var(--pv, var(--s1)); rx: 3; } .pp-hb .pp-hb-bar.is-seq { fill: var(--seq-hi); } .pp-hb .pp-hb-bar.is-s1 { fill: var(--s1); }
/* profile */
.pp-profile { display: grid; gap: 12px; max-width: 760px; }
.pp-phead { display: flex; gap: 12px; align-items: center; } .pp-phead h2 { margin: 0; font-size: 22px; }
.pp-tier { font-size: 12.5px; padding: 8px 12px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); } .pp-tier b { color: var(--ink); }
.pp-three { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pp-fw { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; display: grid; gap: 8px; }
.pp-ttl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pp-big { font-size: 17px; font-weight: 600; font-family: var(--font-display); } .pp-sub { font-size: 12px; color: var(--ink-3); }
.pp-ennwrap { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; } @media (max-width: 420px) { .pp-ennwrap { grid-template-columns: 1fr; } }
.pp-enn { display: block; width: 100%; max-width: 150px; height: auto; } .pp-enn .pp-enn-ring { fill: none; stroke: var(--grid); }
.pp-enn text { font: 600 9.5px var(--font-body); fill: var(--ink-2); } .pp-enn text.is-light { fill: #fff; }
.pp-enn .is-prim circle { fill: var(--s1); stroke: var(--surface); stroke-width: 2; } .pp-enn .is-scored circle { stroke: var(--surface); stroke-width: 1; } .pp-enn .is-plain circle { fill: var(--surface-2); stroke: var(--ink-3); stroke-width: 1; }
.pp-disc { display: block; width: 100%; max-width: 320px; height: auto; } .pp-disc text { font-family: var(--font-body); font-size: 11px; fill: var(--ink-2); } .pp-disc .pp-disc-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.pp-disc .pp-disc-track { fill: var(--grid); rx: 3; } .pp-disc .pp-disc-bar { fill: var(--seq-hi); opacity: .35; rx: 3; } .pp-disc .is-top .pp-disc-bar { opacity: 1; }
.pp-voices { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pp-vp { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 6px; font-size: 12.5px; } .pp-vp .r { font: 600 10.5px/1 ui-monospace, Consolas, monospace; color: var(--ink-3); } .pp-vp.is-lead { font-weight: 600; border-color: var(--ink-2); }
.pp-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; display: grid; gap: 8px; } .pp-sec h3 { margin: 0; font-size: 14.5px; } .pp-sec h3 small { font-weight: 500; font-size: 11px; color: var(--ink-3); margin-left: 6px; }
.pp-tips { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: 13.5px; }
.pp-pair { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; font-size: 13px; } .pp-pair .k { font: 600 10.5px/1.9 ui-monospace, Consolas, monospace; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.pp-raw { font: 12px/1.5 ui-monospace, Consolas, monospace; color: var(--ink-2); display: grid; gap: 3px; word-break: break-word; }
.pp-guardline { border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 560px) { .pp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-stat3 { grid-template-columns: 1fr; } .pp-flag { grid-template-columns: 1fr; } }

/* ---- People: new-hire feedback (task 100) ---------------------------------- */
/* Layout only. Green, Yellow and Red use the status tokens and always sit beside
   their word; the chosen one also gets a check mark and a heavier border. */
.pf .muted { color: var(--ink-3); }
.pf .btn { min-height: 44px; } .pf .btn-primary { color: var(--surface); }
.pf-intro { margin: 0; font-size: 13.5px; color: var(--ink-2); max-width: 76ch; }
.pf-table td:last-child { white-space: normal; min-width: 190px; }
.pf-counts { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.pf-table a.pf-quiet { font-weight: 400; }
.pf .pp-phead { margin-bottom: 12px; }
.pf-flash { margin: 0 0 12px; padding: 8px 12px; border-radius: 4px; background: var(--ok-bg); color: var(--ink); font-size: 13.5px; }
.pf-form { display: grid; gap: 10px; max-width: 760px; }
.pf-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.pf-seg legend { font-weight: 600; font-size: 14px; padding: 0; margin: 0 0 6px; }
.pf-q { font-weight: 600; font-size: 14px; }
.pf-opt { position: relative; display: block; min-width: 0; }
.pf-opt.is-green { --pf-c: var(--ok); --pf-bg: var(--ok-bg); } .pf-opt.is-yellow { --pf-c: var(--warn); --pf-bg: var(--warn-bg); } .pf-opt.is-red { --pf-c: var(--crit); --pf-bg: var(--crit-bg); }
.pf-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pf-opt span { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; min-height: 52px; padding: 8px 10px; border: 1.5px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--ink); font-size: 13px; cursor: pointer; user-select: none; }
.pf-opt span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--pf-c); margin-bottom: 3px; }   /* the color as a dot beside its word, not an edge stripe (task 104's rule) */
.pf-opt span b { font-size: 15px; }
.pf-opt input:checked + span { background: var(--pf-bg); border-color: var(--pf-c); box-shadow: inset 0 0 0 1.5px var(--pf-c); }
.pf-opt input:checked + span b::before { content: "\2713\00a0"; }
.pf-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.pf-form textarea, .pf-wd input[type="text"] { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--ink); }
.pf-form textarea { min-height: 132px; resize: vertical; }
.pf-guard { margin: 0; font-size: 12.5px; color: var(--ink-2); border-radius: 4px; padding: 6px 10px; background: var(--surface-2); }
.pf-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pf-entry { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); } .pf-entry:first-child { border-top: 0; }
.pf-entry.is-withdrawn .pp-cap { border-left: 3px solid var(--line-strong); padding-left: 10px; }   /* reads as an entry that was taken back, not as a caption for the list */
.pf-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; }
.pf-text { margin: 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pf-wd summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pf-wd summary::-webkit-details-marker { display: none; }
.pf-wd form { display: grid; gap: 8px; max-width: 520px; padding: 2px 0 6px; } .pf-wd label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.pf-wd input[type="text"] { min-height: 44px; } .pf-wd .btn { justify-self: start; }
.pf-trend { max-width: 560px; }
@media (max-width: 800px) { .pf-table td:first-child a { display: inline-flex; align-items: center; min-height: 44px; } .pf-table td { vertical-align: middle; } }   /* a 44px name to tap on phones and tablets */
@media (max-width: 560px) {
  .pf-seg { grid-template-columns: 1fr; }
  .pf-table, .pf-table tbody, .pf-table tr, .pf-table td { display: block; }
  .pf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pf-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .pf-table td, .pf-table td:first-child, .pf-table td:last-child { border: 0; padding: 1px 0; white-space: normal; min-width: 0; }
  .pf-table td:first-child { font-size: 15px; }
  .pf-table td[data-l]::before { content: attr(data-l) ": "; color: var(--ink-3); }
  .pf-trend th, .pf-trend td { padding: 6px 3px; }
  .pf-trend th { font-size: 10.5px; letter-spacing: 0; }
  .pf-trend th.r { width: 14%; }   /* even Green / Yellow / Red columns instead of three bunched ones and a gap */
  .pf-trend th.r:last-child { white-space: normal; min-width: 52px; width: 17%; }
  .pf-trend td:first-child { min-width: 64px; }
}

/* Read-only employee preview: the warning uses Portal's existing palette. */
.preview-banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 16px; padding:8px 12px; background:var(--warn-bg); color:var(--ink); border:2px solid var(--warn); font-size:14px; }
.preview-banner form { margin:0; }
.preview-banner .btn { color:var(--ink); background:var(--surface); border-color:var(--warn); min-height:44px; }
.preview-top { position:relative; z-index:70; }
.preview-bottom { display:none; }
.view-as-page { min-width:0; padding-bottom:160px; }
.view-as-page .btn { scroll-margin:160px 0; }
@media(max-width:899px) {
 .preview-bottom { display:flex; position:fixed; z-index:70; bottom:calc(60px + env(safe-area-inset-bottom)); left:0; right:0; font-size:12px; padding:4px 8px; }
 body:has([data-preview-banner]) .main { padding-bottom:230px; }
 body:has([data-preview-banner]) .fb-fab { bottom:200px; }
}
.cl-nav-count { margin-left:auto; border:1px solid currentColor; border-radius:9px; padding:0 6px; font-size:11px; line-height:18px; }

/* Task 060: review controls remain in document flow, above the app content. */
.qc-page { max-width:1100px; margin:0 auto; }
.qc-page h1 { font-size:28px; }
.qc-page h2 { font-family:inherit; font-size:17px; }
.qc-page .panel { padding:14px; margin:12px 0; }
.qc-page form, .qc-bar form { margin:0; }
.qc-page textarea { display:block; width:100%; box-sizing:border-box; margin:8px 0; }
.qc-page label { display:block; margin:8px 0; }
.qc-page .qc-actions label { margin:0; }
.qc-page .btn, .qc-bar .btn { scroll-margin:160px 0 240px; }
.qc-actions, .qc-results, .qc-tabs { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:10px 0; }
.qc-results details[open] { flex-basis:100%; }
.qc-tabs a { padding:8px; }
.qc-tabs [aria-current] { font-weight:700; border-bottom:2px solid var(--s1); }
.qc-note { white-space:pre-wrap; overflow-wrap:anywhere; }
.qc-verdict { font-size:12px; margin:6px 0; }
.qc-verdict-chip { font-size:12px; }
.qc-totals { display:flex; flex-wrap:wrap; gap:20px; }
.qc-bar { border:2px solid var(--s1); border-radius:8px; padding:10px; margin:0 0 14px; background:var(--surface); color:var(--ink); overflow-wrap:anywhere; }
.qc-bar-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.qc-bar-line > span { font-size:13px; }
.qc-bar .btn { min-height:36px; padding:6px 10px; }
.qc-bar-details[open] { flex-basis:100%; }
.qc-bar-details summary { cursor:pointer; min-height:36px; display:flex; align-items:center; }
.qc-bar-details p, .qc-bar-desktop { margin:8px 0 0; font-size:14px; }
.qc-bar:has(.qc-bar-details[open]) .qc-bar-desktop { display:none; }
.qc-dashboard { margin-bottom:12px; padding:12px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
@media(max-width:600px) { .qc-bar-desktop { display:none; } .qc-bar { padding:8px; } .qc-bar-line { gap:6px; } .qc-bar .btn { padding:6px 8px; } .qc-page .qc-actions { gap:8px; } }
.dash-top { display: grid; gap: 12px; margin: 0 0 16px; }
@media (min-width: 800px) { .dash-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
@media (max-width: 390px) { .dash-top { grid-template-columns: minmax(0, 1fr); } }
.news-section { max-width: 100%; overflow-wrap: anywhere; }
.news-quote {
  margin: 2px 0 16px;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--pm-green-700);
  color: var(--ink);
  font-size: 22px;
  font-style: italic;
  line-height: 1.35;
  max-width: 40rem;
  overflow-wrap: anywhere;
}
.news-quote::before { content: "\201C"; font-size: 1.5em; line-height: 0; margin-right: 6px; color: var(--ink-3); }
.weather-card { max-width: 100%; overflow-wrap: anywhere; }
.weather-days { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.weather-days li { display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); }
.weather-days .is-today { background: var(--ok-bg); border-color: var(--pm-green-600); }
.weather-day, .weather-temp { font-weight: 650; }
.weather-day small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.weather-icon { width: 32px; height: 32px; color: var(--pm-green-700); flex: none; }
.weather-temp strong { font: 30px var(--font-display); color: var(--ink); }
.weather-temp strong small { display: inline; font-size: 14px; }
.weather-temp span { display: block; font-size: 12px; font-weight: 400; color: var(--ink-2); }
.weather-summary { font-size: 12px; line-height: 1.4; }
.weather-precip { margin-top: auto; font-size: 11px; color: var(--ink-3); }
.weather-updated { margin: 12px 0 0; color: var(--ink-3); font-size: 11px; }
.news-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0; color: var(--ink-3); font-size: 13px; }
.dash-context .news-quote { font-size: 16px; margin: 12px 0; }
@media (max-width: 700px) {
  .weather-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weather-days li { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; }
  .weather-temp strong { font-size: 26px; }
  .weather-days .weather-summary { grid-column: 1 / -1; }
  .weather-days .weather-precip { grid-column: 1 / -1; }
  .weather-days .is-today { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px 14px; }
  .weather-days .is-today .weather-summary { grid-column: 1 / 3; }
  .weather-days .is-today .weather-precip { grid-column: 3; margin: 0; }
}
/* Marketing layout lives in static/marketing.css (loaded from views.js). */
.news-post, .news-form, .news-card, .news-body, .news-filters, .news-card-list { max-width: 100%; overflow-wrap: anywhere; }
.news-body { white-space: pre-wrap; }
.news-figure, .news-post img { max-width: 100%; height: auto; }
.news-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.news-filters a { min-height: 36px; display: inline-flex; align-items: center; }
.news-form label { display: block; margin: 0 0 10px; }
.news-form input[type="date"], .news-form input[name="title"], .news-form input[name="person"], .news-form input[name="reason"], .news-form textarea, .news-form select { width: 100%; max-width: 40rem; box-sizing: border-box; }
.news-card-list { list-style: none; padding: 0; margin: 0; }
@media (max-width: 390px) { .news-post, .news-form, .news-card { max-width: 100%; } }

/* Equipment section navigation is shared with signed-in Maintenance pages. */
.equipment-tabs { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding:0 0 12px; margin:0 0 16px; border-bottom:1px solid var(--line); }
.equipment-tabs a { color:var(--pm-green-700); padding:4px 0; }
.equipment-tabs a[aria-current] { font-weight:700; text-decoration-thickness:2px; text-underline-offset:6px; }
.equipment-subtabs { display:flex; flex-wrap:wrap; gap:12px 20px; margin:0 0 16px; }
.equipment-subtabs a[aria-current] { font-weight:700; }

/* All apps keeps each destination and its favorite control together. */
.app-directory-list article { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.app-directory-list article > div { min-width:0; }
.app-directory-list h3 { margin:0 0 4px; font-size:17px; }
.app-directory-list p { margin:0; color:var(--ink-3); overflow-wrap:anywhere; }
.app-directory-list form { flex:none; }
@media (max-width:600px) { .app-directory-list article { align-items:flex-start; flex-direction:column; } }
.feed-stale { color: var(--warn); font-weight: 700; }
.adm-tablewrap { max-width: 100%; overflow-x: auto; }

/* Accounting tables (task 090): column titles wrap so a table is never wider than its card, and a title is a button that sorts */
.ac-table th, .ac-table th.r { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.ac-table th.r { min-width: 4.5em; }
.ac-table td:first-child { min-width: 9em; }
.ac-sort { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer; }
.ac-sort:hover { color: var(--ink); text-decoration: underline; }
.ac-sort:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; border-radius: 2px; }
.ac-sort::after { content: " \2195"; color: var(--ink-3); font-size: 11px; }
th[aria-sort="ascending"] .ac-sort::after { content: " \25B2"; color: var(--ink); }
th[aria-sort="descending"] .ac-sort::after { content: " \25BC"; color: var(--ink); }
th[aria-sort="ascending"] .ac-sort, th[aria-sort="descending"] .ac-sort { color: var(--ink); }

/* The Ask box (task 092b): one search field in the top bar of every page. A plain GET form; no script needed. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ask-toggle { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.askbtn { display: none; }
.askbox { position: relative; flex: 1 1 300px; min-width: 150px; max-width: 460px; display: flex; align-items: center; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); }
.askbox:focus-within { background: rgba(255, 255, 255, .16); border-color: var(--pm-gold); }
.askbox input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: 400 14px var(--font-body); padding: 0 4px 0 12px; }
.askbox input::placeholder { color: rgba(255, 255, 255, .62); }
.askbox input::-webkit-search-cancel-button { filter: invert(1); opacity: .7; }
.askbox > button { flex: none; width: 38px; height: 100%; display: grid; place-items: center; border: 0; background: transparent; color: rgba(255, 255, 255, .8); cursor: pointer; border-radius: 0 8px 8px 0; }
.askbox > button:hover, .askbox > button:focus-visible { color: #fff; background: rgba(255, 255, 255, .1); }
.askbox > .ask-mic { border-radius: 0; }
.askbox > button.ask-mic.is-listening, [data-look="2026"] .askbox > button.ask-mic.is-listening { color: var(--crit); }
.ask-voice-note { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(100%, 28rem); padding: 10px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-ctl); font: 400 14px var(--font-body); }
.ask-voice-note p { margin: 0 0 8px; }
.ask-voice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-voice-note .btn { min-height: 36px; }
@media print { .ask-voice-note, .ask-mic { display: none !important; } }
@media (max-width: 800px) {
  .topbar { position: relative; }
  .topbar .helpbtn { display: none; }
  .askbtn { display: grid; flex: none; width: 44px; height: 44px; }
  .ask-toggle:focus-visible ~ .askbtn { outline: 2px solid var(--pm-gold); outline-offset: 2px; }
  .askbox { display: none; position: absolute; top: 58px; left: 0; right: 0; z-index: 20; max-width: none; height: 52px; margin: 0; padding: 6px 12px; border: 0; border-radius: 0; background: var(--pm-green-900); box-shadow: 0 6px 12px rgba(0, 0, 0, .25); }
  .askbox:focus-within { background: var(--pm-green-900); }
  .ask-toggle:checked ~ .askbox { display: flex; }
  .askbox input { font-size: 16px; background: rgba(255, 255, 255, .12); border-radius: 8px 0 0 8px; height: 40px; }
  .askbox > button { width: 46px; height: 40px; background: rgba(255, 255, 255, .12); }
}

/* ===========================================================================
   THE 2026 LOOK (task 104) - the look, since Phase 3 switched everyone over

   views.js stamps data-look="2026" on every <html>, so everything below is
   the design; the older rules above it are what these override and can be
   folded in over time. The tokens are at the top of the file. DESIGN.md
   describes the system; the short version:

     - White and light-gray surfaces, near-black ink, one blue. Cards carry no
       border and no shadow; a hairline separates chrome from content, rows in
       a table, and the edge of an input.
     - The blue (--accent) is for primary actions, links and plain counts. It
       is never a status. Amber, red and green keep their meanings.
     - One family, Hanken Grotesk. 500 for headings, labels and buttons, 400
       for body, 600 only where a number has to stand out. Sentence case.
     - Phones get 44px touch targets.

   The old token names are aliases of the new ones, so every app follows
   without an edit. New code uses --accent, --link, --chrome, --r-ctl and the
   other names in DESIGN.md.
   ========================================================================= */

/* ---- Base ---------------------------------------------------------------- */
[data-look="2026"] ::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
[data-look="2026"] :where(a, button, input, select, textarea, summary, label, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:where([data-look="2026"]) a { color: var(--link); text-underline-offset: 2px; }

/* Two weights. Anything still asking for 700 gets 600, the heaviest loaded. */
:root[data-look="2026"] :is(h1, h2, h3, h4, h5) { font-family: var(--font-display); font-weight: 500; letter-spacing: 0; text-transform: none; }
:root[data-look="2026"] h1 { letter-spacing: -.01em; }
[data-look="2026"] :is(th, b, strong, legend, summary, label) { font-weight: 500; }

/* Numbers line up: tables, count cards and anything already marked numeric. */
[data-look="2026"] :is(table, .num, .tnum, .stat .n, .pp-kpi .v, .ch-tile-v, .sh-mini .v, .glance-n, .alert-count, .dash-count, .dash-stages strong, .tile-badge) {
  font-variant-numeric: tabular-nums;
}

/* Sentence case. The words are already written that way in the markup; this
   removes the all-capitals styling and its tracking. IDs and codes are typed
   in capitals in the data, so nothing here touches them (.kp-typed and
   .sec-code-label are codes and keep their styling). */
[data-look="2026"] :is(
  .eyebrow, .rail-group, .pill, .login-tagline, .signin h1, .rv-find-label, .rv-table th, .tb-fuel, .wn-pill,
  .du-st, .rv-conf, .rn-cause, .rn-vis, .work-section h2, .cp-table th, .sec-kv dt, .work-tag,
  .work-team thead th, .work-team .work-group th, .work-team td::before, .wa-table thead th, .wc-basis,
  .wc-table thead th, .wc-table:not(.wc-depts) td::before, .ord-when b, .ord-kv dt, .meta-line .kv b,
  .fb-about-l, .sh-eyebrow, .pp-you, .pp-pair .k, .inv-chiplabel, .dash-eyebrow, .ys-fab-facts dt,
  .ys-unit-kind, .adm-table th
) { text-transform: none; letter-spacing: 0; }
[data-look="2026"] :is(.work-team td, .wc-table:not(.wc-depts) td)::before { text-transform: none; letter-spacing: 0; }
[data-look="2026"] :is(.eyebrow, .sh-eyebrow, .dash-eyebrow) { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-3); }

/* ---- Chrome: top bar, rail, wordmark ------------------------------------- */
[data-look="2026"] .chevron-rule { display: none; }

[data-look="2026"] .brandbox { background: var(--chrome); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
[data-look="2026"] .wordmark {
  font: 500 14px/1 var(--font-display);
  letter-spacing: .30em;
  color: var(--ink);
  white-space: nowrap;
}
[data-look="2026"] .topbar { background: var(--chrome); border-bottom: 1px solid var(--line); color: var(--ink); }
[data-look="2026"] .topbar .page-name { font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--ink); }
[data-look="2026"] .freshness { color: var(--ink-3); }
[data-look="2026"] .freshness .dot { background: var(--ink-3); box-shadow: none; }
[data-look="2026"] .iconbtn { border-radius: var(--r-ctl); color: var(--ink-2); }
[data-look="2026"] .iconbtn:hover { background: var(--surface-2); color: var(--ink); }
[data-look="2026"] .userchip { background: var(--surface-2); color: var(--ink); text-decoration: none; }
[data-look="2026"] .userchip:hover { color: var(--ink); }
[data-look="2026"] .userchip .avatar { background: var(--ink); color: var(--canvas); font-weight: 500; letter-spacing: 0; }

[data-look="2026"] .rail { background: var(--chrome); border-right: 1px solid var(--line); }
[data-look="2026"] .rail-group { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--ink-3); }
[data-look="2026"] .rail a { border-left: 0; border-radius: 6px; padding-left: 12px; color: var(--ink-2); font-weight: 400; }
[data-look="2026"] .rail a:hover { background: var(--surface-2); color: var(--ink); }
[data-look="2026"] .rail a[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 500; }
[data-look="2026"] .rail a.disabled { color: var(--ink-3); }
[data-look="2026"] .rail a.disabled:hover { background: transparent; color: var(--ink-3); }

[data-look="2026"] .menubtn { color: var(--ink-2); border-radius: var(--r-ctl); }
[data-look="2026"] .menubtn:hover { background: var(--surface-2); }
[data-look="2026"] .menubtn span { font-weight: 500; }
[data-look="2026"] .nav-toggle:focus-visible ~ .topbar .menubtn,
[data-look="2026"] .ask-toggle:focus-visible ~ .askbtn { outline-color: var(--accent); }

/* The Ask box */
[data-look="2026"] .askbox { border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--line); }
[data-look="2026"] .askbox:focus-within { background: var(--surface-2); border-color: var(--accent); }
[data-look="2026"] .askbox input::placeholder { color: var(--ink-3); }
[data-look="2026"] .askbox input::-webkit-search-cancel-button { filter: none; }
[data-look="2026"] .askbox > button { color: var(--ink-2); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
[data-look="2026"] .askbox > .ask-mic { border-radius: 0; }
[data-look="2026"] .askbox > button:hover,
[data-look="2026"] .askbox > button:focus-visible { color: var(--ink); background: var(--line); }

/* ---- Cards --------------------------------------------------------------- */
[data-look="2026"] :is(.panel, .alert, .tile, .pp-kpi, .pp-card, .pp-fw, .pp-sec, .pp-tier, .ch-tile, .dash-disclosure) { border: 0; box-shadow: none; border-radius: var(--r-card); }
[data-look="2026"] .panel-hd { border-bottom: 0; }
[data-look="2026"] .panel-hd h3 { font-size: 15px; font-weight: 500; letter-spacing: 0; }
[data-look="2026"] .panel-ft { border-top: 0; }
[data-look="2026"] .panel-ft a { font-weight: 500; }
[data-look="2026"] .section-hd h2 { font-weight: 500; letter-spacing: 0; }

/* Severity was a colored edge; it is the icon and the number now. */
[data-look="2026"] .alert-count { font-weight: 500; letter-spacing: 0; }
[data-look="2026"] .alert-count b { font-weight: 600; }
[data-look="2026"] .notebar { border: 0; border-radius: var(--r-card); }
[data-look="2026"] .notebar b { font-weight: 500; }
[data-look="2026"] .news-quote { border-left: 0; padding-left: 0; }

[data-look="2026"] .tile { transition: none; }
[data-look="2026"] .tile-live:hover { transform: none; box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-look="2026"] .tile-icon { border-radius: 8px; background: var(--surface-2); color: var(--ink); }
[data-look="2026"] .tile h3 { font-weight: 500; letter-spacing: 0; }
[data-look="2026"] .tile-cta { font-weight: 500; }
[data-look="2026"] .tile-soon { background: transparent; border: 1px dashed var(--line-strong); }
[data-look="2026"] .tile-soon .tile-icon { background: var(--unknown-bg); color: var(--ink-3); }
[data-look="2026"] .pill { font-size: 12px; font-weight: 500; }
/* Home: the "Right now" cards. The status moves from the edge to the icon. */
[data-look="2026"] .glance { border: 0; box-shadow: none; transition: none; }
[data-look="2026"] .glance:hover { transform: none; box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-look="2026"] .glance-ico { border-radius: 8px; background: var(--surface-2); color: var(--ink); }
[data-look="2026"] .glance.is-crit .glance-ico { background: var(--crit-bg); color: var(--crit); }
[data-look="2026"] .glance.is-warn .glance-ico { background: var(--warn-bg); color: var(--warn); }
[data-look="2026"] .glance.is-watch .glance-ico { background: var(--watch-bg); color: var(--watch); }
[data-look="2026"] .glance.is-ok .glance-ico { background: var(--ok-bg); color: var(--ok); }
[data-look="2026"] .tile-badge { font-weight: 500; }

/* ---- Buttons ------------------------------------------------------------- */
:where([data-look="2026"]) .btn { min-height: 40px; border-radius: var(--r-ctl); font-weight: 500; letter-spacing: 0; }   /* :where, so an app's own taller floor (.pf .btn, .cm .btn) wins */
:root[data-look="2026"] body .btn.btn-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
:root[data-look="2026"] body .btn.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
[data-look="2026"] .btn-ghost { background: var(--surface); border-color: transparent; color: var(--ink); }
[data-look="2026"] :is(.panel, .alert, .tile, .pp-card, .pp-sec, .pp-fw, .signin, .fb-drawer, .dash-disclosure, .qc-bar) .btn-ghost { background: var(--surface-2); }
[data-look="2026"] .btn-ghost:hover { background: var(--line); color: var(--ink); }
@media (max-width: 800px) {
  [data-look="2026"] .btn { min-height: 44px; }
}

/* ---- Count cards --------------------------------------------------------- */
[data-look="2026"] .stat { border: 0; box-shadow: none; background: var(--surface); }
[data-look="2026"] :is(.panel, .pp-card) .stat { background: var(--surface-2); }
[data-look="2026"] .stat .n { font-size: 28px; font-weight: 600; }
[data-look="2026"] .stat.is-ok { --sev-ink: var(--ok); }
[data-look="2026"] :is(.pp-kpi .v, .ch-tile-v, .glance-n, .dash-count) { font-weight: 600; }

/* ---- Tables and tags ----------------------------------------------------- */
[data-look="2026"] .rv-table th { font-size: 12px; font-weight: 500; color: var(--ink-3); box-shadow: none; }
[data-look="2026"] .rv-tag { font-size: 12px; font-weight: 500; border-color: transparent; }
[data-look="2026"] .rv-cov-low,
[data-look="2026"] .feed-stale { font-weight: 500; }

/* ---- Inputs -------------------------------------------------------------- */
:root[data-look="2026"] :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
}
:root[data-look="2026"] :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"]), select, textarea):focus {
  border-color: var(--accent);
}
:root[data-look="2026"] :is(input, select, textarea)::placeholder { color: var(--ink-3); opacity: 1; }
:root[data-look="2026"] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
@media (max-width: 800px) {
  :root[data-look="2026"] .main :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"]), select) { min-height: 44px; }
}
/* The Ask box draws its own edge; the field inside it stays bare. */
:root[data-look="2026"] .askbox input { border: 0; border-radius: 0; background: transparent; color: var(--ink); min-height: 0; }

/* ---- Tabs and section navigation ----------------------------------------- */
[data-look="2026"] .dash-subnav a { border-radius: 6px; }
[data-look="2026"] .dash-subnav a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 500; }
[data-look="2026"] :is(.equipment-tabs, .equipment-subtabs) a { color: var(--ink-2); text-decoration: none; }
[data-look="2026"] :is(.equipment-tabs, .equipment-subtabs) a:hover { color: var(--ink); }
[data-look="2026"] :is(.equipment-tabs, .equipment-subtabs) a[aria-current] { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
[data-look="2026"] .qc-tabs a { color: var(--ink-2); text-decoration: none; }
[data-look="2026"] .qc-tabs [aria-current] { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
[data-look="2026"] .sh-chip { background: var(--surface); border-color: transparent; }
[data-look="2026"] .sh-chip.is-on { background: var(--ink); color: var(--canvas); border-color: transparent; font-weight: 500; }
[data-look="2026"] .sh-subl.is-on { border-color: var(--ink); font-weight: 500; }
[data-look="2026"] .pp-crumbs a { background: var(--surface); border-color: transparent; }

/* ---- Progress rings ------------------------------------------------------ */
[data-look="2026"] .dash-ring circle { stroke-width: 4; }
[data-look="2026"] .dash-ring-track { stroke: var(--line); fill: none; }
[data-look="2026"] .dash-ring text { font-weight: 500; }
[data-look="2026"] .dash-ring.brand .dash-ring-value { stroke: var(--accent); }
[data-look="2026"] .dash-cost-fill { fill: var(--accent); }

/* ---- Fills that were brand green with white text -------------------------
   In dark mode the link blue is too light to carry white text, so a fill uses
   --accent. A bar that reports a status keeps its status color. */
[data-look="2026"] :is(.rc-on, .rk-fill, .du-btn.is-on, .work-seg-opt input:checked + span, .work-step.is-current,
  .work-nav a[aria-current="page"], .work-filters a[aria-current="page"], .work-viewswitch a[aria-current="true"],
  .sec-switch input:checked + .sec-track, .ys-stock-track > span) { background: var(--accent); }
[data-look="2026"] :is(.rv-noten, .rn-form button):hover { background: var(--accent-hover); }
/* "Awaiting delivery" is a plain count, not a status: the accent, not green. */
[data-look="2026"] .ord-bar.is-watch .ord-bar-fill { background: var(--accent); opacity: 1; }

/* ---- Feedback ------------------------------------------------------------ */
[data-look="2026"] .fb-fab { background: var(--ink); color: var(--canvas); box-shadow: none; font-weight: 500; }
[data-look="2026"] .fb-fab:hover { background: var(--ink-2); }
[data-look="2026"] .fb-fab-badge { color: var(--surface); font-weight: 500; }
[data-look="2026"] .mobile-app-nav .fb-in-nav,
[data-look="2026"] .mobile-app-nav .fb-in-nav:hover { background: transparent; color: var(--ink-2); font-weight: 500; }
[data-look="2026"] .fb-drawer { border: 1px solid var(--line-strong); border-radius: var(--r-card); }
[data-look="2026"] .fb-hd { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); }
[data-look="2026"] .fb-close { color: var(--ink-2); }
[data-look="2026"] .fb-msg.is-mine .fb-bubble { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
[data-look="2026"] .fb-compose textarea:focus { outline-color: var(--accent); border-color: var(--accent); }
@media (max-width: 560px) {
  [data-look="2026"] .fb-drawer { border: 0; border-radius: 0; }
}

/* ---- Phone ---------------------------------------------------------------- */
@media (max-width: 800px) {
  [data-look="2026"] .mobile-app-nav { background: var(--surface); border-top: 1px solid var(--line); box-shadow: none; }
  [data-look="2026"] .mobile-app-nav a,
  [data-look="2026"] .mobile-app-nav label { color: var(--ink-2); font-weight: 500; }
  [data-look="2026"] .mobile-app-nav a:hover { color: var(--ink); }
  [data-look="2026"] .mobile-app-nav a[aria-current] { color: var(--ink); }
  [data-look="2026"] .mobile-app-nav a:focus-visible { outline-color: var(--accent); }
  [data-look="2026"] .rail { box-shadow: none; }
  [data-look="2026"] .askbox { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--chrome); box-shadow: none; }
  [data-look="2026"] .askbox:focus-within { background: var(--chrome); }
  :root[data-look="2026"] .askbox input { background: var(--surface-2); border-radius: var(--r-ctl) 0 0 var(--r-ctl); padding-left: 12px; }
  [data-look="2026"] .askbox > button { background: var(--surface-2); }
}

/* ---- Dashboard pieces the approved screens were built from -------------- */
[data-look="2026"] .dash-personal-card,
[data-look="2026"] .dash-metric { border-radius: 8px; }
[data-look="2026"] .dash-campaign-strip .dash-personal-card { border-radius: 0; }
[data-look="2026"] .dash-stages li a,
[data-look="2026"] .dash-stages li.is-none { border: 0; border-radius: 8px; }
[data-look="2026"] .dash-stages li strong,
[data-look="2026"] .dash-purchase-numbers strong,
[data-look="2026"] .dash-project-total strong { font-weight: 600; }
[data-look="2026"] .weather-days li { border: 0; border-radius: 8px; }
[data-look="2026"] .weather-days .is-today { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-look="2026"] .weather-icon { color: var(--ink-2); }
[data-look="2026"] .weather-day,
[data-look="2026"] .weather-temp { font-weight: 500; }
[data-look="2026"] .weather-temp strong { font-weight: 600; }
[data-look="2026"] .dash :focus-visible,
[data-look="2026"] .dash-subnav :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Sign-in page --------------------------------------------------------- */
[data-look="2026"] .login { background: var(--canvas); color: var(--ink); }
[data-look="2026"] .login::before { content: none; }
[data-look="2026"] .login-body .wordmark { font-size: 16px; }
[data-look="2026"] .signin {
  --ink: inherit; --ink-2: inherit; --ink-3: inherit; --line: inherit; --pm-green-700: inherit;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: none;
}
[data-look="2026"] .signin .cap { display: none; }
[data-look="2026"] .signin h1 { font-size: 26px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
[data-look="2026"] .ms-btn { min-height: 44px; border-radius: var(--r-ctl); background: var(--accent); color: var(--on-accent); font-weight: 500; transition: none; }
[data-look="2026"] .ms-btn:hover { background: var(--accent-hover); color: var(--on-accent); }
[data-look="2026"] .ms-btn .ms-logo { padding: 3px; box-sizing: content-box; background: #fff; border-radius: 2px; }
[data-look="2026"] .login-tagline { font-size: 17px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--ink-2); }
[data-look="2026"] .login-tagline em { color: var(--ink-2); display: inline; }
[data-look="2026"] .login-foot { background: transparent; border-top: 1px solid var(--line); }
[data-look="2026"] .login-foot-in { color: var(--ink-3); }
[data-look="2026"] .login-foot-in .sep { color: var(--line-strong); }

/* ---- Phone touch targets: 44px, though Tesla's own controls are 40 -------- */
@media (max-width: 800px) {
  [data-look="2026"] .rail a { min-height: 44px; }
  [data-look="2026"] .userchip { min-width: 44px; min-height: 44px; justify-content: center; padding: 4px; }
  [data-look="2026"] :is(.dash-subnav a, .equipment-tabs a, .equipment-subtabs a, .qc-tabs a, .sh-chip, .sh-subl) { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- Phase 2, batch 1: My Dashboard, My Receipts, My Purchases, My Campaigns, Fleet Maintenance ----
   These pages put a heading, a sentence, count cards and a table straight into a card. The text sat on
   the card's edge; with rounded cards it needs room. Tables still run edge to edge. */
[data-look="2026"] .cp-panel { padding: 16px 0 10px; }
[data-look="2026"] .cp-panel > * { margin-left: 16px; margin-right: 16px; }
[data-look="2026"] .cp-panel > :is(.scroll, .rv-tablewrap, table, .ch-frame) { margin-left: 0; margin-right: 0; }
[data-look="2026"] .cp-panel > h2 { margin-top: 0; }
[data-look="2026"] .cp-panel .cp-table :is(th, td):first-child { padding-left: 16px; }
[data-look="2026"] .cp-panel .cp-table :is(th, td):last-child { padding-right: 16px; }
[data-look="2026"] .cp-table th { font-size: 12px; font-weight: 500; }
[data-look="2026"] .cp-table a,
[data-look="2026"] .cp-pill { font-weight: 500; }
/* "Mine" was a green row and the selected filter a bare link; neither is a status. */
[data-look="2026"] .cp-table tr.is-mine td { background: var(--surface-2); }
[data-look="2026"] .toolbar .btn.is-on { background: var(--ink); color: var(--canvas); }
/* A purchase: an inset block. Its stage is the tag, not a colored edge. */
[data-look="2026"] .ord-row,
[data-look="2026"] .ord-row:is(.is-warn, .is-ok, .is-watch) { border: 0; border-radius: 8px; background: var(--surface-2); }
[data-look="2026"] .ord-row .ord-dot { background: var(--surface-2); }
[data-look="2026"] .ord-row .ord-track li.is-done .ord-dot { background: var(--ok); }
[data-look="2026"] .ord-what { font-weight: 500; }
[data-look="2026"] :is(.ord-when b, .meta-line .kv b) { font-size: 12px; font-weight: 400; }
[data-look="2026"] .ord-kv dt { font-size: 12px; }
[data-look="2026"] .ord-kv .ord-po { font-weight: 500; letter-spacing: 0; }
[data-look="2026"] .ord-landed-table td.ord-time,
[data-look="2026"] .ord-events b { font-weight: 500; }
[data-look="2026"] :is(.ord-search input, .ord-site select, .ord-landed select, .ord-landed input) { border-radius: var(--r-ctl); }
[data-look="2026"] .ord-group > summary h2 { font-size: 15px; }
[data-look="2026"] .cp-panel + .cp-panel { margin-top: 12px; }
[data-look="2026"] .cp-panel > h2 { margin-bottom: 10px; }
[data-look="2026"] .cp-panel > .ord-track { margin-top: 12px; margin-bottom: 12px; }
[data-look="2026"] .ord-group > summary { font-weight: 400; }
/* A button with no variant (Find, a filter that is not selected) is a ghost button. */
[data-look="2026"] .btn:not(.btn-primary, .btn-ghost, .is-on) { background: var(--surface); color: var(--ink); border-color: transparent; }
[data-look="2026"] :is(.panel, .cp-panel) .btn:not(.btn-primary, .btn-ghost, .is-on) { background: var(--surface-2); }
[data-look="2026"] .btn:not(.btn-primary, .btn-ghost, .is-on):hover { background: var(--line); }

/* ---- Phase 2, batch 2: Equipment and vehicle checks ----------------------
   static/equipment.css already uses tokens only. What the new look changes is
   the edge stripes (a note and a reported failure become tinted blocks), the
   weights, and the selected answer. */
[data-look="2026"] fieldset { border: 1px solid var(--line); border-radius: 8px; }
[data-look="2026"] .eq a,
[data-look="2026"] .eq summary { color: var(--link); }
[data-look="2026"] .eq-tabs a { color: var(--ink-2); text-decoration: none; }
[data-look="2026"] .eq-tabs a:hover { color: var(--ink); }
[data-look="2026"] .eq-tabs a[aria-current] { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
[data-look="2026"] .eq-source { border-left: 0; border-radius: 8px; padding: 10px 12px; }
[data-look="2026"] .eq-reported-fail { border-left: 0; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg); }
[data-look="2026"] :is(.eq-filters label, .eq-answers dt, .eq-question legend, .eq-progress, .eq-pick-list a) { font-weight: 500; }
[data-look="2026"] .eq-evidence-counts dd { font-weight: 600; font-variant-numeric: tabular-nums; }
[data-look="2026"] .eq-flag { border-radius: 999px; font-size: 12px; font-weight: 500; }
[data-look="2026"] .eq-error { border-radius: 8px; }
[data-look="2026"] .eq-question { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
[data-look="2026"] .eq-policy-fields { border: 0; border-radius: 0; }
[data-look="2026"] .eq-question .eq-choices label { border-color: var(--line-strong); border-radius: var(--r-ctl); }
[data-look="2026"] .eq-choices label:has(input:checked) { border-color: var(--accent); background: var(--surface-2); }
[data-look="2026"] .eq-question input[type=radio] { accent-color: var(--accent); }
[data-look="2026"] .eq-progress { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; font-variant-numeric: tabular-nums; }
[data-look="2026"] .eq :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 800px) {
  [data-look="2026"] .eq-tabs a,
  [data-look="2026"] .eq-pages a,
  [data-look="2026"] .eq-missing > a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- Phase 2, batch 3: York-Shipley -----------------------------------------
   static/ys.css names its own tokens (--muted, --brand, --brand-dark, --panel-2,
   --text, --bg, --danger, --info) and falls back to a fixed green and gray-green
   when they are not defined. They are not defined in the current look, so it
   keeps those colors. Here they are defined, so York-Shipley follows the look.
   --brand marks a finished step or a share that is complete, so it is the done
   green; a selection or "today" is the accent. */
:root[data-look="2026"] {
  --muted: var(--ink-3);
  --text: var(--ink);
  --bg: var(--canvas);
  --panel-2: var(--surface-2);
  --brand: var(--ok);
  --brand-dark: var(--ink-2);
  --danger: var(--crit);
  --info: var(--link);
}
[data-look="2026"] :is(.ys-nav a, .ys-filters a, .ys-chip) { border-color: transparent; background: var(--surface); }
[data-look="2026"] :is(.panel, .cp-panel) :is(.ys-filters a, .ys-chip) { background: var(--surface-2); }
[data-look="2026"] :is(.ys-nav a, .ys-filters a)[aria-current="page"],
[data-look="2026"] .ys-nav-more > summary.is-current { background: var(--ink); color: var(--canvas); }
[data-look="2026"] :is(.ys-check.is-suggested, .ys-steps-strip li.is-gp span, .ys-steps-strip li.is-dropbox span, .ys-wps-box.is-on, .ys-scope li.is-in .ys-scope-box, .ys-cal-day.is-today) { --brand: var(--accent); }
[data-look="2026"] tr.ys-row-attn td:first-child { box-shadow: none; }
[data-look="2026"] tr.ys-row-attn td { background: var(--surface-2); }
[data-look="2026"] :is(.ys-title, .ys-unit-card b, .ys-strip b) { font-weight: 500; }
[data-look="2026"] .ys-strip b { font-weight: 600; font-variant-numeric: tabular-nums; }
[data-look="2026"] .ys-tile b { font-weight: 500; }
[data-look="2026"] .cp-panel :is(.ys-table, .rv-table) :is(th, td):first-child { padding-left: 16px; }
[data-look="2026"] .cp-panel :is(.ys-table, .rv-table) :is(th, td):last-child { padding-right: 16px; }
@media (max-width: 800px) {
  [data-look="2026"] :is(.ys-nav a, .ys-filters a, .ys-nav-more > summary) { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- Phase 2, batch 4: Top 3/10, People, My team, Inventory ----------------
   Selected section buttons are ink, like every other selected chip. Neutral
   and decorative edge stripes go. The status stripes on Top 3/10 history and
   team rows stay for now: they are the status, and they need a look at the
   real pages before they change. */
[data-look="2026"] .work-section { border: 0; }
[data-look="2026"] .work-section h2 { font-weight: 500; color: var(--ink); }
[data-look="2026"] :is(.work-nav a, .work-filters a) { border-color: transparent; font-weight: 500; }
[data-look="2026"] .work-viewswitch { border: 1px solid var(--line-strong); }
[data-look="2026"] .work-viewswitch a { font-weight: 500; }
[data-look="2026"] .work-viewswitch a:focus-visible { outline-color: var(--accent); }
:root[data-look="2026"] :is(.work-nav a, .work-filters a)[aria-current="page"],
:root[data-look="2026"] .work-viewswitch a[aria-current="true"] { background: var(--ink); color: var(--canvas); border-color: transparent; }
[data-look="2026"] .work-sticky { box-shadow: none; border-top: 1px solid var(--line); }
[data-look="2026"] :is(.work-not-busy, .work-stagnant-block, .team-you) { border-left: 0; padding-left: 0; }
[data-look="2026"] .pp-warn { border-left: 0; border-radius: 8px; padding: 8px 12px; }
[data-look="2026"] .pp-note { border-left: 0; border-radius: var(--r-card); padding: 12px 16px; }
[data-look="2026"] .pp-node { border: 0; border-radius: 8px; background: var(--surface-2); }
[data-look="2026"] .pp-node.is-me { box-shadow: inset 0 0 0 1px var(--accent); }
[data-look="2026"] :is(.pp-name, .pp-vp.is-lead, .pp-you) { font-weight: 500; }
/* Inventory keeps its own accent names; in the new look they are the one accent in light and dark. */
:root[data-look="2026"] body .inv { --inv-accent: var(--accent); --inv-accent-ink: var(--on-accent); --inv-accent-edge: var(--accent); --inv-accent-hover: var(--accent-hover); --inv-field-edge: var(--ink-3); }   /* Inventory keeps a 3:1 field edge (its own check) */
[data-look="2026"] .inv-tile-icon { color: var(--ink-2); --pmi-icon-accent: var(--accent); }

/* ===========================================================================
   Phase 2, batch 5 (task 104c): the Impeccable critique and audit findings.
   North star: a polished industrial operating system. Space has to earn its
   place: these rules mostly take space out and make dense things legible.
   ========================================================================= */

/* ---- Shared: controls an app left to the browser -------------------------
   :where() keeps these at the weight of a browser default, so any app rule
   still wins. A field or a button nobody styled gets the system's shape. */
[data-look="2026"] :where(.main) :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"]), select) { min-height: 36px; padding: 0 10px; font-size: 14px; }
[data-look="2026"] :where(.main) :where(textarea) { padding: 8px 10px; font-size: 14px; }
[data-look="2026"] :where(.main) :where(button:not([class]), input[type="submit"]:not([class])) {
  min-height: 36px; padding: 0 12px;
  border: 0; border-radius: var(--r-ctl);
  background: var(--surface-2); color: var(--ink);
  font: 500 14px var(--font-body); cursor: pointer;
}
[data-look="2026"] :where(.main) :where(button:not([class]), input[type="submit"]:not([class])):hover { background: var(--line); }
[data-look="2026"] input[type="file"] { max-width: 100%; color: var(--ink-2); font: 400 14px var(--font-body); }
[data-look="2026"] input[type="file"]::file-selector-button {
  min-height: 36px; margin-right: 10px; padding: 0 12px;
  border: 0; border-radius: var(--r-ctl);
  background: var(--surface-2); color: var(--ink);
  font: 500 14px var(--font-body); cursor: pointer;
}
[data-look="2026"] :is(.panel, table, .sh-card, .wf-filterbox, .cp-panel) .btn-ghost { background: var(--surface-2); }
@media (max-width: 800px) {
  [data-look="2026"] :where(.main) :where(button:not([class]), input[type="submit"]:not([class])) { min-height: 44px; }
  [data-look="2026"] input[type="file"]::file-selector-button { min-height: 44px; }
}

/* ---- Shared: phones. A wide table scrolls inside its card instead of
   crushing to a word per line, keys stay whole, and a row of section links
   is one line that scrolls sideways, not two or three wrapped rows. */
@media (max-width: 800px) {
  [data-look="2026"] :is(.scroll, .rv-tablewrap, .adm-tablewrap) > :is(.cp-table, .ac-table, .adm-table, .wf-summary, .rv-table):has(th:nth-child(4)):not(.dash-project-table, .pf-table, .pf-trend, .wc-table, .work-team, .inv-cardtable) { min-width: 620px; }
  [data-look="2026"] :is(.scroll, .rv-tablewrap, .adm-tablewrap) > :is(.cp-table, .ac-table, .adm-table, .wf-summary, .rv-table):has(th:nth-child(7)):not(.dash-project-table, .pf-table, .pf-trend, .wc-table, .work-team, .inv-cardtable) { min-width: 860px; }
  [data-look="2026"] table:not(.inv-cardtable) td:first-child > a:first-child,
  [data-look="2026"] table :is(.cp-pill, .rv-tag, .ys-chip, .pill) { white-space: nowrap; }
  [data-look="2026"] :is(.equipment-tabs, .equipment-subtabs, .eq-tabs, .dash-subnav, .work-nav, .sh-hub, .sh-sub, .ys-nav, .qc-tabs, .at nav) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  [data-look="2026"] :is(.equipment-tabs, .equipment-subtabs, .eq-tabs, .dash-subnav, .work-nav, .sh-hub, .sh-sub, .ys-nav, .qc-tabs, .at nav) > * { flex: none; white-space: nowrap; }
  [data-look="2026"] .equipment-tabs { gap: 0 18px; }
}
[data-look="2026"] .sh-chip { gap: 4px; }
/* One shape for section buttons everywhere: 6px, like the dashboard's. */
[data-look="2026"] :is(.work-nav a, .work-filters a, .ys-nav a, .ys-filters a, .ys-nav-more > summary, .sh-chip, .inv-chip) { border-radius: 6px; }

/* ---- Shared: small things ------------------------------------------------ */
[data-look="2026"] :is(.ch-tile, .pp-kpi) { align-content: start; }
[data-look="2026"] :is(.ch-tile-v, .wf-tiles .v) { font-size: 28px; }
[data-look="2026"] .ch-empty { padding: 4px 0; }
[data-look="2026"] a.cp-pill { text-decoration: none; }
[data-look="2026"] :is(.cp-pill, .rv-tag):empty { display: none; }
/* A note under a table explains the data; it should not outweigh it. */
[data-look="2026"] .cp-panel > .meta-line:last-child,
[data-look="2026"] .main > .meta-line { font-size: 13px; color: var(--ink-3); }
[data-look="2026"] .sh-card > .sh-cap { max-width: 96ch; }
/* A count of zero is not a status (the pages mark it with is-count-0). */
[data-look="2026"] .stat.is-count-0 { --sev-ink: var(--ink); }
/* "Waiting" is needs attention, not a problem. */
[data-look="2026"] .tile-badge { background: var(--warn-bg); color: var(--warn); }

/* ---- Launcher and notices ------------------------------------------------- */
[data-look="2026"] .tiles { gap: 12px; }
[data-look="2026"] .tile { min-height: 0; padding: 16px; gap: 4px 12px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; }
[data-look="2026"] .tile > * { grid-column: 2; }
[data-look="2026"] .tile .tile-icon { grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 40px; }
[data-look="2026"] .tile h3 { padding-right: 96px; font-size: 15px; }
[data-look="2026"] .tile-cta { margin-top: 0; padding-top: 2px; }
[data-look="2026"] .glance { align-items: start; }
[data-look="2026"] .notice { max-width: 640px; padding: 16px; border-radius: var(--r-card); background: var(--surface); }
[data-look="2026"] .notice h1 { font-size: 20px; margin: 0 0 8px; }
@media (max-width: 560px) {
  [data-look="2026"] .tile { padding: 12px; }
  [data-look="2026"] .tile p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}

/* ---- All apps ------------------------------------------------------------- */
[data-look="2026"] .panel:has(> .app-directory-list) { margin-bottom: 12px; overflow: hidden; }
[data-look="2026"] .panel:has(> .app-directory-list) > h2 { margin: 0; padding: 12px 16px 4px; font-size: 15px; }
[data-look="2026"] .app-directory-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 8px 16px; }
[data-look="2026"] .app-directory-list h3 { margin: 0; font-size: 14px; }
[data-look="2026"] .app-directory-list h3 a { text-decoration: none; }
[data-look="2026"] .app-directory-list h3 a:hover { text-decoration: underline; }
[data-look="2026"] .app-directory-list p { font-size: 13px; }
[data-look="2026"] .app-directory-list form { grid-column: 2; }
[data-look="2026"] .app-directory-list .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
@media (max-width: 800px) {
  [data-look="2026"] .app-directory-list .btn { min-height: 44px; }
}

/* ---- Top 3/10 -------------------------------------------------------------- */
[data-look="2026"] .work-status { background: var(--surface); font-size: 12px; font-weight: 500; }
[data-look="2026"] .work-status.is-submitted { background: var(--ok-bg); }
[data-look="2026"] .work-seg-opt span { border-color: transparent; border-radius: var(--r-ctl); background: var(--surface-2); font-weight: 500; }
[data-look="2026"] .work-top3-ctl :is(a, button) { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--ink); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; }
/* The Submit bar starts at the rail and leaves the corner to the Feedback button. */
@media (min-width: 801px) {
  [data-look="2026"] .work-sticky { left: 232px; padding-right: 172px; }
}
@media (max-width: 800px) {
  [data-look="2026"] .work-top3-ctl :is(a, button) { min-height: 44px; }
}

/* ---- People and hiring trends --------------------------------------------- */
[data-look="2026"] .pp-stat3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-look="2026"] .wf-tiles .v a { color: var(--ink); text-decoration: none; }
[data-look="2026"] .wf-tiles .v a:hover { text-decoration: underline; }
[data-look="2026"] .wf-filterbox { border: 0; }
[data-look="2026"] .wf-filterbox summary { font-weight: 500; }
[data-look="2026"] .co .wf-filters { justify-content: flex-start; }
[data-look="2026"] .co .wf-summary :is(th, td) { height: 34px; }

/* ---- Inventory ------------------------------------------------------------- */
[data-look="2026"] .inv-back { border: 0; background: var(--surface); padding: 0 14px; font-size: 14px; font-weight: 500; }
[data-look="2026"] .inv-chip { border-color: transparent; background: var(--surface); }
[data-look="2026"] :is(.panel, .inv-filterbox) .inv-chip { background: var(--surface-2); }
:root[data-look="2026"] body .inv .inv-chip.is-on { background: var(--ink); color: var(--canvas); border-color: transparent; }
@media (max-width: 640px) {
  [data-look="2026"] .inv-tile { min-height: 0; padding: 10px 12px; }
  [data-look="2026"] .inv-tile:has(.inv-tile-icon) { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; min-height: 60px; align-content: center; }
  [data-look="2026"] .inv-tile:has(.inv-tile-icon) .inv-tile-icon { grid-row: 1 / span 2; align-self: center; }
  [data-look="2026"] .inv-back { width: auto; justify-content: flex-start; }
}

/* ---- York-Shipley ----------------------------------------------------------
   The traveler is checked off at the vessel, on a phone: a step's name gets
   the full width and its controls go underneath. */
@media (max-width: 640px) {
  [data-look="2026"] .ys-step-head { flex-wrap: wrap; }
  [data-look="2026"] .ys-step-body { flex: 1 1 calc(100% - 42px); }
  [data-look="2026"] .ys-step-form { flex: 1 1 100%; width: auto; margin-left: 32px; justify-content: flex-end; }
}
@media (max-width: 800px) {
  [data-look="2026"] .ys-table :is(th, td) { white-space: nowrap; }
  [data-look="2026"] .ys-table td:first-child { white-space: normal; min-width: 130px; }
}
[data-look="2026"] .ys-cal-day { border: 0; }
[data-look="2026"] .ys-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
[data-look="2026"] .ys-cal-grid .ys-cal-ev { display: block; position: relative; padding-left: 14px; overflow-wrap: break-word; }
[data-look="2026"] .ys-cal-grid .ys-cal-ev .ys-cal-dot { position: absolute; left: 0; top: 3px; }
[data-look="2026"] .ys-cal-ev .ys-cal-who { white-space: nowrap; font-weight: 500; }
[data-look="2026"] details.panel.ys-details { padding: 12px 16px; margin-bottom: 12px; }
[data-look="2026"] .ys-unit-card :is(.cp-pill, .rv-tag) { align-self: flex-start; }
[data-look="2026"] .ys-scope li.is-in .ys-scope-box { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
[data-look="2026"] .ys-attn li > :last-child:not(:first-child) { color: var(--ink-3); }

/* ---- Sales ------------------------------------------------------------------ */
[data-look="2026"] .sh-card .cp-table th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
[data-look="2026"] .sh-card .cp-table td:first-child { white-space: nowrap; }
[data-look="2026"] .sh-fresh { align-items: baseline; }
[data-look="2026"] .sh-fresh::before { flex: none; }
[data-look="2026"] .sh-fresh.is-warn { color: var(--ink-2); }
[data-look="2026"] .sh-card > .notebar { margin: 0; padding: 8px 12px; }
[data-look="2026"] :is(.sh-top, .sh-kpis) + .sh-cap { margin: 0 0 12px; }
[data-look="2026"] .ch-age { background: var(--surface-2); }
[data-look="2026"] .co-outliers { min-width: 760px; }
[data-look="2026"] .co-outliers td { white-space: nowrap; }
[data-look="2026"] .co-outliers td:nth-child(2) { white-space: normal; min-width: 16em; }
[data-look="2026"] .co .scroll:has(> .co-outliers) { border-radius: var(--r-card); margin-top: 10px; }
[data-look="2026"] .pr-table .cp-desc { color: var(--ink-3); }
@media (max-width: 800px) {
  [data-look="2026"] .pr-table .pr-form { flex-wrap: nowrap; }
  [data-look="2026"] .pr-table td { white-space: nowrap; }
  [data-look="2026"] .pr-table td:nth-child(3) { white-space: normal; min-width: 12em; }
}
/* Accounting */
[data-look="2026"] .ac-card h2 { color: var(--link); }
[data-look="2026"] .ac-card:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ---- Commissioning ----------------------------------------------------------- */
[data-look="2026"] .cm .work-unit { background: var(--surface-2); color: var(--ink-2); font-weight: 500; }
[data-look="2026"] :is(.cm-project-id, .cm-who, .cm-assign, .cm-add label, .cm-finished > summary, .cm-status, .cm-project-flag, .cm-update.is-new .cm-update-what) { font-weight: 500; }
[data-look="2026"] :is(.cm-summary b, .cm .sh-chip b, .cm-project-count b) { font-weight: 600; font-variant-numeric: tabular-nums; }
[data-look="2026"] .cm-who.is-none,
[data-look="2026"] .cm-add :is(select, input) { font-weight: 400; }
[data-look="2026"] .cm-project { border: 0; border-radius: 8px; background: var(--surface-2); }
[data-look="2026"] .cm-project:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-look="2026"] .cm-status { border-color: var(--line-strong); }
[data-look="2026"] .cm-status:is(.is-ok, .is-warn) { border-color: transparent; }
/* Commissioning keeps its own density (commissioning.css): 48px complete boxes and 15px words at every width. */
@media (max-width: 800px) {
  [data-look="2026"] .cm-state { flex-wrap: nowrap; gap: 6px 8px; }
  [data-look="2026"] .cm-who { flex: 1 1 auto; min-width: 0; }
  [data-look="2026"] .cm .cm-take { padding: 0 12px; }
}

/* ---- New-hire feedback ------------------------------------------------------- */
[data-look="2026"] .pf-seg { border: 0; border-radius: 0; }
[data-look="2026"] :is(.pf-seg legend, .pf-q, .pf-wd label) { font-weight: 500; }
[data-look="2026"] .pf-entry.is-withdrawn .pp-cap { border-left: 0; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); }
[data-look="2026"] .pf-table a { text-decoration: none; }
[data-look="2026"] .pf-table a:hover { text-decoration: underline; }
[data-look="2026"] .pf-trend th { white-space: nowrap; font-size: 12px; }
@media (max-width: 700px) {
  [data-look="2026"] .pf-table tr { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 6px 0; }
  [data-look="2026"] .pf-table td:first-child { grid-column: 1; }
  [data-look="2026"] .pf-table td:nth-child(2) { grid-column: 2; align-self: center; color: var(--ink-2); }
  [data-look="2026"] .pf-table td:nth-child(3),
  [data-look="2026"] .pf-table td:last-child { grid-column: 1 / -1; }
  [data-look="2026"] .pf-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-look="2026"] .pf-opt span { min-height: 64px; padding: 6px 4px; font-size: 12px; }
}

/* ---- Feedback ------------------------------------------------------------------ */
[data-look="2026"] .fb-page { padding: 16px; max-width: 860px; }
:root[data-look="2026"] body .btn.fb-send { background: var(--accent); color: var(--on-accent); }
:root[data-look="2026"] body .btn.fb-send:hover { background: var(--accent-hover); }
[data-look="2026"] .fb-about select { min-height: 40px; border-radius: var(--r-ctl); }
[data-look="2026"] :is(.fb-compose, .fb-reply) textarea { border-radius: var(--r-ctl); }
[data-look="2026"] .fb-full .fb-log { border-radius: 8px; }
[data-look="2026"] .fb-mic { min-height: 40px; padding: 0 14px; border: 0; background: var(--surface-2); color: var(--ink); }
[data-look="2026"] :is(.fb-about-l, .fb-line .fb-hint) { font-size: 12px; }
[data-look="2026"] .fb-about-l { font-weight: 500; }
@media (max-width: 800px) {
  [data-look="2026"] .fb-page { padding: 12px; }
  [data-look="2026"] .fb-mic { min-height: 44px; }
}
@media (max-width: 560px) {
  [data-look="2026"] .fb-line .fb-send { margin-left: auto; }
}

/* ---- Ask ------------------------------------------------------------------------- */
[data-look="2026"] .aa-page .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-look="2026"] .aa-page :is(th, td):not(:first-child) { text-align: right; }
[data-look="2026"] .ask-ai { background: var(--surface-2); color: var(--ink-2); font-weight: 500; letter-spacing: 0; }
[data-look="2026"] .ask-list a { font-weight: 500; }
[data-look="2026"] :is(.ask-page, .aa-page, .ai-page) h2 { font-size: 15px; }
@media (max-width: 800px) {
  [data-look="2026"] .ask-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0; }
  [data-look="2026"] .ask-try a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 14px; text-decoration: none; }
  [data-look="2026"] .ai-check { min-height: 44px; }
  [data-look="2026"] .aa-page :is(th, td):not(:first-child) { width: 1%; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
  [data-look="2026"] .aa-page td:first-child { min-width: 0; }
}
@media (max-width: 620px) {
  [data-look="2026"] .aa-page .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-look="2026"] .aa-page .stat .n { font-size: 22px; }
}

/* ---- Administration: View as, Changelog, Review changes ------------------------ */
[data-look="2026"] .view-as-page .panel { padding: 16px; margin: 0 0 12px; }
[data-look="2026"] .view-as-page .panel h2 { font-size: 15px; margin: 0 0 8px; }
[data-look="2026"] .view-as-page .panel p { margin: 0 0 4px; }
[data-look="2026"] .view-as-page :is(.adm-tablewrap, .scroll) { border-radius: var(--r-card); background: var(--surface); }
[data-look="2026"] .adm-table th { font-size: 12px; font-weight: 500; color: var(--ink-3); }
/* A builder's name is a label, not a status: no amber, green or red for who built it. */
[data-look="2026"] .cl-source { border: 0; border-radius: 999px; padding: 2px 8px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 500; }
[data-look="2026"] :is(.cl-warning, .cl-mini-change strong) { font-weight: 500; }
[data-look="2026"] .cl-nav a { color: var(--ink-2); text-decoration: none; padding: 8px 0; }
[data-look="2026"] .cl-nav a[aria-current] { color: var(--ink); font-weight: 500; border-bottom: 2px solid var(--ink); }
[data-look="2026"] .qc-page { margin: 0; }
[data-look="2026"] .qc-page .panel { padding: 12px 16px; margin: 8px 0; }
[data-look="2026"] .qc-page .panel p { margin: 4px 0; }
[data-look="2026"] .qc-bar { border: 1px solid var(--line-strong); border-radius: var(--r-card); }
[data-look="2026"] .qc-results details > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--ink); font-weight: 500; list-style: none; cursor: pointer; }
[data-look="2026"] .qc-results details > summary::-webkit-details-marker { display: none; }
@media (max-width: 800px) {
  [data-look="2026"] .qc-results details > summary { min-height: 44px; }
}

/* ---- Shared: a plain card pads itself ---------------------------------------
   Many pages put a heading and a sentence straight into class="panel" and the
   text sat on the card's edge. :where() keeps this weaker than any app rule
   that already pads its cards (.at .panel, .cl .panel, .qc-page .panel ...). */
[data-look="2026"] :where([class="panel"]:not(:has(> .panel-hd, > .panel-ft, > .rows))) { padding: 14px 16px; }
[data-look="2026"] :where([class="panel"]) > :where(h2, h3):first-child { margin-top: 0; }
[data-look="2026"] :where([class="panel"]) > :where(p, ul, ol, dl):last-child { margin-bottom: 0; }
[data-look="2026"] :where([class="panel"]) + :where([class="panel"]) { margin-top: 12px; }
@media (max-width: 800px) {
  [data-look="2026"] :where([class="panel"]:not(:has(> .panel-hd, > .panel-ft, > .rows))) { padding: 12px; }
}

/* ---- Equipment (the Impeccable critique's findings) ------------------------- */
[data-look="2026"] .eq :is(.eq-tabs, .equipment-tabs, .equipment-subtabs) a { color: var(--ink-2); text-decoration: none; }
[data-look="2026"] .eq :is(.eq-tabs, .equipment-tabs, .equipment-subtabs) a:hover { color: var(--ink); }
[data-look="2026"] .eq :is(.eq-tabs, .equipment-tabs, .equipment-subtabs) a[aria-current] { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
[data-look="2026"] .eq a.stat { color: var(--ink); text-decoration: none; }
[data-look="2026"] .eq a.btn:not(.btn-primary) { color: var(--ink); }
/* A note on the page background was the page's own gray and vanished; a sentence is not a pill. */
[data-look="2026"] .eq-source { background: var(--surface); }
[data-look="2026"] .panel .eq-source { background: var(--surface-2); }
[data-look="2026"] p.eq-flag { display: block; border-radius: 8px; padding: 8px 12px; }
[data-look="2026"] :is(.eq-machine, .eq-panel) { padding: 16px; }
[data-look="2026"] .eq-panel { margin: 12px 0; }
[data-look="2026"] .eq-machine p { margin: 6px 0; }
[data-look="2026"] .eq-panel:has(> details:only-child) { padding: 4px 16px; margin: 8px 0; }
/* The check form: one question should not cost 76px of answers and 36px of air. */
[data-look="2026"] .eq-question { margin: 12px 0; padding-top: 12px; }
[data-look="2026"] .eq-question > .eq-muted { margin: 4px 0 8px; }
@media (min-width: 801px) {
  [data-look="2026"] .eq-question .eq-choices label { flex: 1 1 auto; white-space: nowrap; }
}
@media (max-width: 800px) {
  [data-look="2026"] .eq-check-form > .btn-primary { width: 100%; }
  [data-look="2026"] :is(.eq-tabs, .equipment-subtabs) { row-gap: 0; }
}
@media (max-width: 600px) {
  [data-look="2026"] :is(.eq-machine, .eq-panel) { padding: 12px; }
}

/* ---- Rental Reliability ------------------------------------------------------ */
[data-look="2026"] .rv-tools ~ .panel { margin-top: 12px; }
[data-look="2026"] .rv-jump a { font-weight: 500; border-color: transparent; }
[data-look="2026"] .rv-find input { font-weight: 400; border-radius: var(--r-ctl); }
[data-look="2026"] .du-tabs { gap: 0 4px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
[data-look="2026"] .du-tab { border: 0; border-radius: 0; background: transparent; font-weight: 400; padding: 9px 12px; }
[data-look="2026"] .du-tab.is-on { background: transparent; color: var(--ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--ink); }
[data-look="2026"] .du-btn { font-weight: 500; border-radius: var(--r-ctl); }
@media (max-width: 800px) {
  [data-look="2026"] :is(.rv-jump a, .du-tab, .du-btn) { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- Security ------------------------------------------------------------------ */
/* An alarm tag is the problem red; its text takes the surface color so it reads in dark too. */
[data-look="2026"] :is(.cp-pill.is-alarm, .sec-grid td.is-alarm a, .sec-legend-swatch.is-alarm, .sec-grid td.is-alarm .sec-day-alarm) { color: var(--surface); }
[data-look="2026"] .sec-bld-row th { font-weight: 500; }
@media (max-width: 800px) {
  [data-look="2026"] :is(.sec-history, .sec-status) :is(th, td),
  [data-look="2026"] .sec-history td.sec-raw code { white-space: nowrap; }
  [data-look="2026"] .sec-zonecell { white-space: normal; min-width: 200px; }
}

/* ---- Marketing ------------------------------------------------------------------ */
:root[data-look="2026"] .marketing-page > .dash-heading h1 { font-weight: 500; letter-spacing: -.01em; }
[data-look="2026"] :is(.marketing-attention-title, .marketing-jump, .marketing-detail > summary, .marketing-social-name) { font-weight: 500; }
[data-look="2026"] :is(.marketing-review, .marketing-social-card) { border: 0; border-radius: 8px; background: var(--surface-2); }
[data-look="2026"] .marketing-social-card.is-missing { background: transparent; border: 1px dashed var(--line-strong); }
[data-look="2026"] .marketing-attention { border: 0; border-radius: var(--r-card); background: var(--warn-bg); }
@media (max-width: 800px) {
  [data-look="2026"] :is(.marketing-jump a, .marketing-controls label) { min-height: 44px; display: inline-flex; align-items: center; }
  [data-look="2026"] .marketing-page summary { padding-block: 12px; }
}

/* ---- Sales: rentals --------------------------------------------------------------- */
[data-look="2026"] .sh-kpis > :empty { display: none; }

/* ---- From the Impeccable audit (measured on every fixture page) -------------- */
/* Only 400, 500 and 600 are loaded. Without this a rule that still asks for 700
   gets a smeared, synthesized bold; with it the browser uses the 600 face. */
:root[data-look="2026"] { font-synthesis-weight: none; }

/* Dark mode: fills that were brand green under white text. The link blue is too
   light to carry white, so a fill uses --accent; a problem tag takes dark text. */
[data-look="2026"] :is(.du-pin, .work-rank, .rv-noten, .rn-form button) { background: var(--accent); color: var(--on-accent); }
[data-look="2026"] .cp-pill.is-watch { background: var(--watch-bg); color: var(--watch); }
@media (prefers-color-scheme: dark) {
  :root[data-look="2026"]:not([data-theme="light"]) .wn-pill { color: var(--canvas); }
  :root[data-look="2026"]:not([data-theme="light"]) .ch .ch-on-dark { fill: var(--canvas); }
}
:root[data-look="2026"][data-theme="dark"] .wn-pill { color: var(--canvas); }
:root[data-look="2026"][data-theme="dark"] .ch .ch-on-dark { fill: var(--canvas); }

/* Phones: 44px for the controls the per-class rules missed, and 16px fields so
   Safari does not zoom the page when a field takes focus. A lone link in a table
   cell becomes the cell's whole height instead of adding to it. */
@media (max-width: 800px) {
  [data-look="2026"] .main summary { padding-block: 12px; }
  [data-look="2026"] .main td:has(> a:only-child) { padding-top: 0; padding-bottom: 0; }
  [data-look="2026"] .main td > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
  :root[data-look="2026"] :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) { font-size: 16px; }
  :root[data-look="2026"] .at .btn,
  [data-look="2026"] :is(.work-nav a, .work-filters a, .inv-chip, .inv-seg, .dash-shortcuts a, .fb-fab, .ys-chip, .ac-sort) { min-height: 44px; }
  [data-look="2026"] :is(.dash-shortcuts a, .ys-chip, .ac-sort) { display: inline-flex; align-items: center; }
  [data-look="2026"] .askbox { height: 56px; }
  :root[data-look="2026"] .askbox input,
  [data-look="2026"] .askbox > button { height: 44px; }
}

/* ---- From the detector pass: borders, small text and weights that survived --- */
:root[data-look="2026"] :is(th, b, strong, legend, summary, label) { font-weight: 500; }
[data-look="2026"] :is(.inv-admin-group, .inv-filters, .inv-about, .inv-filterbox, .ys-stock-card, .ys-stock-goal, .ys-order-card, .team-report, .dash-sales) { border: 0; }
[data-look="2026"] :is(.panel, .cp-panel, .dash-panel) :is(.ys-stock-card, .ys-stock-goal, .ys-order-card, .team-report, .inv-admin-group, .inv-about) { background: var(--surface-2); border-radius: 8px; }
[data-look="2026"] :is(.inv-filters, .inv-filterbox) { background: var(--surface); border-radius: var(--r-card); }
[data-look="2026"] .dash-sales { box-shadow: none; }
[data-look="2026"] .dash-stages li span { font-size: 11px; }
[data-look="2026"] .pp-onfile span { font-size: 11px; font-weight: 500; }
[data-look="2026"] .inv-res-name { font-weight: 500; }
[data-look="2026"] .inv-answer-q { font-weight: 600; color: var(--ink); }
@media (max-width: 800px) {
  [data-look="2026"] .main label:has(> input[type="checkbox"], > input[type="radio"]) { min-height: 44px; }
  [data-look="2026"] :is(a.rv-tag, .sec-toggle) { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Verification round: the launcher's Live and waiting tags sit above the name instead of over it. */
[data-look="2026"] .tile h3 { padding-right: 0; }
[data-look="2026"] .tile-top,
[data-look="2026"] .tile > .pill { position: static; justify-self: start; }
[data-look="2026"] .panel:has(> .app-directory-list) { padding: 0; }
[data-look="2026"] :where([class="panel"]) > :where(h2) { font-size: 15px; margin-bottom: 8px; }
[data-look="2026"] .dash-inline label input { margin-left: 8px; }
[data-look="2026"] :where(.main) :where(input, select, textarea) { font-weight: 400; }

/* WebKit counts a select's longest option as overflow of the label around it even though the select is
   clipped; on a 320px phone that widened the page by a few pixels. The label clips it, with room for
   the focus outline. */
[data-look="2026"] :is(.eq-filters label:not(.eq-check), .eq label:has(> select), .dash form label:has(> select), .cp-panel label:has(> select), .inv label:has(> select)) { overflow: hidden; padding: 0 4px 4px; margin: 0 -4px; }
/* The "Where" choice on Inventory lists sites; the select shrinks to the row instead of widening a phone page. */
[data-look="2026"] .inv-where { max-width: 100%; min-width: 0; }
[data-look="2026"] .inv-where select { min-width: 0; flex: 0 1 auto; }
/* A project ID is a code, not a link: ink, not the accent. */
[data-look="2026"] .cm-project-id { color: var(--ink); }
/* Commissioning is used on the shop floor; its controls stay 44px tall at every width. */
:where([data-look="2026"]) .cm .btn { min-height: 44px; }   /* commissioning.css raises some to 48 */
/* A count card's figure wraps rather than widening a 320px page ("$0.00 of $25.00" on Ask box activity). */
[data-look="2026"] .stat { min-width: 0; }
[data-look="2026"] .stat .n { overflow-wrap: anywhere; }
/* The New-hire feedback trend table is narrow by design; its headings wrap on a phone. */
[data-look="2026"] .pf-trend th { white-space: normal; }
/* Inventory fields keep their own 3:1 edge color. */
:root[data-look="2026"] body .inv :is(input:not([type="radio"], [type="checkbox"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) { border-color: var(--inv-field-edge); }

/* York-Shipley bill of materials (task 135). Stock folds under the part on a phone.
   WebKit sizes a select to its longest option and a fieldset refuses to shrink below that,
   which pushed the plate card (PLT-… · 450.00 sq ft) past a 320px page. */
.ys-bom { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.ys-bom :is(form, fieldset, .panel, .ys-bom-part, .ys-bom-line, .ys-bom-line > *) { min-width: 0; max-width: 100%; }
.ys-bom fieldset { min-width: 0; max-width: 100%; }
.ys-bom .ys-find { min-width: 0; max-width: 100%; }
.ys-bom .ys-find > label { flex: 1 1 12rem; min-width: 0; max-width: 100%; }
.ys-bom label:has(select) { overflow: hidden; min-width: 0; max-width: 100%; }
.ys-bom .scroll { width: 100%; max-width: 100%; min-width: 0; contain: inline-size; }
.ys-bom-line { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.ys-bom-where { min-width: 0; }
.ys-bom-lv-2 { margin-left: 0.75rem; }
.ys-bom-lv-3 { margin-left: 1.5rem; }
.ys-bom-lv-4 { margin-left: 2.25rem; }
.ys-bom-lv-5 { margin-left: 3rem; }
.ys-bom-lv-6 { margin-left: 3.75rem; }
.ys-bom-lv-7 { margin-left: 4.5rem; }
.ys-bom-lv-8 { margin-left: 5.25rem; }
.ys-bom-kids { min-width: 0; }
.ys-bom-sub { margin: 0 0 8px; }
.ys-bom-matches, .ys-bom-alts, .ys-bom-lines { list-style: none; margin: 4px 0; padding: 0; }
.ys-bom-check, .ys-bom-choice, .ys-bom-mode label { display: block; margin: 6px 0; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.ys-bom .btn, .ys-bom-find .btn { min-height: 44px; }
.ys-bom select, .ys-bom input[type="search"], .ys-bom input[name="build"] { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 40rem) {
  .ys-bom-line { grid-template-columns: minmax(0, 1fr); }
  .ys-bom-where { display: block; }
  .ys-bom-lv-2, .ys-bom-lv-3, .ys-bom-lv-4, .ys-bom-lv-5, .ys-bom-lv-6, .ys-bom-lv-7, .ys-bom-lv-8 { margin-left: 0.75rem; }
}
@media print {
  .ys-bom-screen { display: none; }
  .ys-bom-sub { display: block; }
}

/* Task 247: private People avatars and server-rendered admin forms. */
.pp-photo{object-fit:cover;flex-shrink:0}
.pp-av{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0}
.pp-name{margin-inline-start:8px}
.pp-photo-controls{margin-block:12px}
.pp-photo-controls form{margin-block:12px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pp-photo-controls input{max-width:100%}
.pp-photo-controls summary{cursor:pointer;min-height:44px;display:flex;align-items:center}

.pp-av:not(.is-big){width:64px;height:64px}
.pp-phead .pp-av.is-big{width:96px;height:96px}