/* ============================================================================
   Backline OS · V2 — TRC Staff web (zero-build)
   Design source of truth: docs/DESIGN-NOTES.md + design/html/01..16-*.html
   All tokens are the EXACT values from DESIGN-NOTES §Tokens.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* --- surfaces / ink --- */
  --bg:        #0A0C11;
  --bg2:       #0D1017;
  --surf:      #12151D;
  --surf2:     #171B25;
  --surf3:     #1D222E;
  --hair:      #1B2130;
  --line:      #242A38;
  --line2:     #2F3646;
  --glassBorder: #FFFFFF1F;

  --ink:       #EEF1F7;
  --ink2:      #C2C8D6;
  --mut:       #8B93A6;
  --dim:       #5C6376;  /* decorative glyphs ONLY, never body copy */

  /* --- accents --- */
  --violet:     #8B6CFF;
  --violet2:    #A98BFF;
  --violetSoft: #8B6CFF24;
  --teal:       #2EE6CF;
  --tealSoft:   #2EE6CF1F;
  --blue:       #5B8CFF;

  --ok:    #37D67A;  --okSoft:   #37D67A20;
  --warn:  #F5B74E;  --warnSoft: #F5B74E20;
  --bad:   #F03222;  --badSoft:  #F032221F;  /* TRC Record Red — live / alert / error */
  --gold:  #E8C375;  --goldSoft: #E8C37524;  /* PLATINUM ONLY */

  /* --- derived strokes used repeatedly --- */
  --violetStroke:  #8B6CFF52;
  --violetStroke2: #8B6CFF3D;
  --tealStroke:    #2EE6CF3D;
  --tealStroke2:   #2EE6CF33;
  --redStroke:     #F0322242;
  --redStroke2:    #F0322233;
  --amberStroke:   #F5B74E3D;
  --okStroke:      #37D67A38;
  --goldStroke:    #E8C37552;
  --goldStroke2:   #E8C37533;
  --pillOnPhoto:   #0A0C11A6;
  --pillOnArt:     #0A0C11C7;  /* 78% — a pill on cover art, light ground or dark */
  --onArtStroke:   #FFFFFF42;
  --artFloor:      #0A0C118C;  /* legibility floor under a scrim on unknown art */
  /* The 44px date tile carries type at 11px over art with no scrim above it, so it
     needs its own floor: measured over the eleven live covers, 55% left four tiles
     under AA (worst 2.61:1) and 70% cleared it by 0.01 on the worst one. 78% is the
     first value with a margin. */
  --tileFloor:     #0A0C11C7;

  /* --- the one gradient, everywhere (118°) --- */
  --grad: linear-gradient(118deg, #8B6CFF 0%, #5B8CFF 42%, #2EE6CF 100%);
  /* the gate uses a mirrored angle in the export; keep both available */
  --grad-btn: linear-gradient(-94.091deg, #8B6CFF 6.05%, #5B8CFF 42.968%, #2EE6CF 93.95%);

  /* --- photo scrim (mandatory under text on photos) --- */
  --scrim: linear-gradient(180deg, #0A0C1100 0%, #0A0C11B8 55%, #0A0C11 100%);

  /* --- fonts --- */
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* --- layout --- */
  --app-w: 390px;
  --tabbar-h: 82px; /* capsule + padding, floats above content */
  --sidebar-w: 268px;   /* desktop left rail */
  --topbar-h: 64px;     /* desktop content top bar */
  --content-max: 1200px;/* content lane ceiling on ultra-wide */
  --read-max: 720px;    /* single-column view lane inside the content area */
}

/* ============================================================================
   RESET
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input  { font-family: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--violetSoft); }

/* thin custom scrollbars */
::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }

/* ============================================================================
   APP SHELL — mobile-first 390px; desktop ≥821 switches to sidebar layout
   ============================================================================ */
#app { min-height: 100vh; }

.app-frame {
  width: 100%;
  max-width: var(--app-w);
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

/* the scrollable content region (between status bar and tab bar) */
.view-scroll {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Clear the floating tab-bar capsule with a comfortable buffer so the last
     element (e.g. the Ask omni input) never touches the capsule. The capsule
     itself sits inside --tabbar-h; +26px keeps a visible gap above it, and the
     safe-area inset handles the home indicator on notched devices. */
  padding-bottom: calc(var(--tabbar-h) + 26px + env(safe-area-inset-bottom, 0px));
}

/* status bar */
.statusbar {
  width: 100%;
  height: 62px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 26px 10px;
}
.statusbar .sb-time {
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.statusbar .sb-right { display: flex; gap: 7px; align-items: center; color: var(--ink); }
.statusbar .sb-right svg { display: block; }
/* A real phone paints its own status bar; the mock one is desktop-preview chrome only. */
.real-device .statusbar { display: none; }
/* The shell already renders one mock bar at the top of .view-scroll. A photo-hero
   that builds its own would paint a second "9:41" over the art in a narrow
   non-touch window, so the hero's copy never renders at any width. */
.photo-hero .statusbar { display: none; }
.real-device .view-scroll { padding-top: env(safe-area-inset-top, 0px); }

/* content wrapper (per-view, matches Pencil content padding) */
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 4px 16px 0;
}

/* ============================================================================
   TYPOGRAPHY HELPERS
   ============================================================================ */
.screen-title { font-family: var(--serif); font-size: 28px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink); line-height: 1.05; }
.screen-title.sm { font-size: 26px; }
.greeting     { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: -0.3px; color: var(--ink); }
.hero-q       { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.15; color: var(--ink); }

.eyebrow {
  font-family: var(--sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--mut);
}
.eyebrow.teal   { color: var(--teal); }
.eyebrow.violet { color: var(--violet2); }

.mono-eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 1.4px; color: var(--mut);
}
.mono-eyebrow.teal { color: var(--teal); }

.section-label {
  font-family: var(--sans); font-size: 10.5px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--mut);
}

.headline-copy { font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--mut); }
.meta { font-size: 11px; font-weight: 500; color: var(--mut); }
.mono { font-family: var(--mono); }

/* section header row (label + "All →") */
.section-header {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; margin-top: 4px;
}
.section-header .sh-link { font-size: 12px; font-weight: 600; color: var(--teal); }

/* ============================================================================
   CARD
   ============================================================================ */
.card {
  width: 100%;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 12px 14px;
}
.card.line2 { border-color: var(--line2); }
.card.tight { padding: 8px 10px; }
.card.violet { border-color: var(--violetStroke); }
.card.teal   { border-color: var(--tealStroke); }
.card.warn   { border-color: var(--amberStroke); }
.card.bad    { border-color: var(--redStroke2); }
.card.gold   { border-color: var(--goldStroke); }

/* ============================================================================
   CHIP
   ============================================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px;
  background: var(--surf2);
  border: 1px solid var(--line);
  padding: 7px 13px;
  font-size: 12px; font-weight: 600; color: var(--ink2);
  white-space: nowrap;
}
.chip.active { background: var(--violetSoft); border-color: var(--violetStroke); color: var(--ink); }
.chip .chip-count { font-family: var(--mono); font-size: 9.5px; color: var(--violet2); }
.chip.sm { padding: 5px 10px; font-size: 11.5px; }

/* h-scroll filter rows (intentionally run off the right edge) */
.chip-row {
  display: flex; gap: 7px;
  overflow-x: auto;
  width: calc(100% + 16px);
  margin-right: -16px;
  padding-right: 16px;
  scroll-snap-type: x proximity;
}
.chip-row .chip { flex-shrink: 0; }

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background-image: var(--grad-btn);
  border-radius: 13px;
  padding: 14px 18px;
  font-size: 14.5px; font-weight: 700;
  color: #0A0C11; /* dark text — mandatory */
}
.btn-primary.full { width: 100%; }
.btn-primary.sm { padding: 8px 14px; font-size: 12px; border-radius: 11px; }

.btn-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #FFFFFF0D;
  border: 1px solid var(--glassBorder);
  border-radius: 13px;
  padding: 13px 18px;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.btn-glass.full { width: 100%; }

/* small surface3 action chip (Triage / Ticket etc.) */
.btn-surf {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surf3); border: 1px solid var(--line2);
  border-radius: 10px; padding: 7px 13px;
  font-size: 12px; font-weight: 600; color: var(--ink);
}
.btn-warn { background: var(--warnSoft); border: 1px solid var(--amberStroke); border-radius: 10px; padding: 7px 13px; font-size: 11px; font-weight: 700; color: var(--warn); }
.btn-gold { background: var(--goldSoft); border: 1px solid var(--goldStroke); border-radius: 10px; padding: 7px 13px; font-size: 11px; font-weight: 700; color: var(--gold); display: inline-flex; align-items: center; gap: 5px; }

/* the ONE earned gold CTA */
.btn-platinum {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: var(--goldSoft);
  border: 1.5px solid var(--gold);
  border-radius: 13px;
  padding: 14px 18px;
  font-size: 14px; font-weight: 700; color: var(--gold);
}

/* ============================================================================
   AVATAR
   ============================================================================ */
.avatar {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, #3A2F6B 0%, #1C5C58 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #FFF;
}
.avatar.sm { width: 30px; height: 30px; border-radius: 10px; font-size: 11px; }
.avatar.lg { width: 54px; height: 54px; border-radius: 16px; font-size: 18px; }

/* ============================================================================
   KPI / STAT CARD
   ============================================================================ */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.kpi-grid.trio { grid-template-columns: 1fr 1fr 1fr; }

.kpi-card {
  background: var(--surf); border: 1px solid var(--line);
  border-radius: 15px; padding: 11px 13px;
  display: flex; flex-direction: column; gap: 6px;
}
.kpi-card .kpi-key { display: flex; align-items: center; gap: 6px; }
.kpi-card .kpi-key svg { width: 13px; height: 13px; color: var(--mut); }
.kpi-card .kpi-key .k { font-size: 11px; font-weight: 600; color: var(--mut); }
.kpi-card .kpi-key.warn svg, .kpi-card .kpi-key.warn .k { color: var(--warn); }
.kpi-card .kpi-key.teal svg, .kpi-card .kpi-key.teal .k { color: var(--teal); }
.kpi-card .kpi-key.gold svg, .kpi-card .kpi-key.gold .k { color: var(--gold); }
.kpi-card .kpi-val-row { display: flex; align-items: flex-end; gap: 5px; }
.kpi-card .kpi-val { font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1; color: var(--ink); }
.kpi-card .kpi-unit { font-size: 11.5px; font-weight: 500; color: var(--dim); }
.kpi-card .kpi-sub { font-size: 11px; font-weight: 500; color: var(--mut); }
.kpi-card .kpi-sub.warn { color: var(--warn); }
.kpi-card .kpi-sub.gold { color: var(--gold); }

/* mini stat cell (4-up rows in detail views) */
.stat-cell {
  background: var(--surf2); border-radius: 10px; padding: 7px 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.stat-cell .v { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink); }
.stat-cell .k { font-size: 9px; font-weight: 600; color: var(--mut); }

/* ============================================================================
   CONSOLE METER — the signature mark (12 bars violet→teal, animated)
   ============================================================================ */
.console-meter {
  display: inline-flex; align-items: flex-end; gap: 2px; height: 20px;
}
.console-meter .cm-bar {
  width: 3px; border-radius: 1.5px;
  transform-origin: bottom;
}
.console-meter.h12 { height: 12px; }
.console-meter.h14 { height: 14px; }

/* working state: bars pulse */
.console-meter.working .cm-bar {
  animation: cm-pulse 1.05s ease-in-out infinite;
}
@keyframes cm-pulse {
  0%, 100% { transform: scaleY(0.45); }
  50%      { transform: scaleY(1); }
}
/* muted (idle) variant: all bars line2, no animation */
.console-meter.muted .cm-bar { background: var(--line2) !important; animation: none; }

/* ============================================================================
   TALLY / PILL / STATUS CHIPS
   ============================================================================ */
.tally { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; display: inline-block; }
.tally.ok   { background: var(--ok); }
.tally.warn { background: var(--warn); }
.tally.bad  { background: var(--bad); }
.tally.dim  { background: var(--dim); }
.tally.live { background: var(--bad); box-shadow: 0 0 0 0 rgba(240,50,34,0.5); animation: live-throb 1.6s ease-out infinite; }
@keyframes live-throb {
  0%   { box-shadow: 0 0 0 0 rgba(240,50,34,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(240,50,34,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,50,34,0); }
}

/* generic pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 9px;
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
.pill.live    { background: var(--pillOnPhoto); border: 1px solid var(--glassBorder); color: var(--ink); font-family: var(--mono); letter-spacing: 1px; }
.pill.set     { background: var(--okSoft);   border: 1px solid var(--okStroke);   color: var(--ok); }
.pill.noeng   { background: var(--warnSoft); border: 1px solid var(--amberStroke); color: var(--warn); }
.pill.ratio   { background: var(--tealSoft); border: 1px solid var(--tealStroke); color: var(--teal); font-family: var(--mono); font-size: 10px; }
.pill.overdue { background: var(--badSoft);  border: 1px solid var(--redStroke);  color: var(--bad); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.8px; }
.pill.tentative { background: var(--surf2); border: 1px solid var(--line); color: var(--dim); }
.pill.platinum{ background: var(--goldSoft); border: 1px solid var(--goldStroke); color: var(--gold); }
.pill.member  { background: var(--surf2);   border: 1px solid var(--line);   color: var(--mut); }
.pill.ready   { background: var(--tealSoft); border: 1px solid var(--tealStroke); color: var(--teal); font-weight: 800; }
.pill.delta   { background: var(--okSoft);   border: 1px solid var(--okStroke); color: var(--ok); font-family: var(--mono); font-size: 9.5px; }
.pill.mod     { background: var(--violetSoft); border: 1px solid var(--violetStroke); color: var(--violet2); font-weight: 700; }

/* status dot inside a pill */
.pill .dot { width: 5px; height: 5px; border-radius: 999px; }
.pill.set .dot { background: var(--ok); }
.pill.noeng .dot { background: var(--warn); }

/* A pill sitting on cover art. Covers are drawn dark, but a legacy or not-yet-
   redrawn cover can have a light ground, so the pill brings its own 78% ground
   rather than trusting the art underneath. Declared after the tone rules so it
   wins on equal specificity while the tone keeps its text colour. */
.pill.pill-on-art {
  background: var(--pillOnArt); border-color: var(--onArtStroke);
  backdrop-filter: blur(6px);
}
.pill.pill-on-art.member { color: var(--ink2); }
.pill.pill-on-art.tentative { color: var(--ink2); }

/* ============================================================================
   CHANNEL-STRIP ROW (sessions / board)
   ============================================================================ */
.channel-strip {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  background: var(--surf); border: 1px solid var(--line);
  border-radius: 13px; padding: 8px 10px;
}
.channel-strip.live { border-color: var(--redStroke2); }
.channel-strip .time-tile {
  width: 44px; height: 34px; flex-shrink: 0;
  border-radius: 9px;
  background: var(--surf2); border: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink2);
  text-align: center; line-height: 1.05;
}
.channel-strip .time-tile.live {
  background: var(--badSoft); border-color: var(--redStroke);
  color: var(--bad); font-size: 9.5px; letter-spacing: 1px;
}
/* The date tile carries the night's cover art. The 55% overlay is what the date
   and month sit on, so the numerals read the same on any ground. */
.channel-strip .time-tile.on-art {
  position: relative; overflow: hidden;
  background-color: var(--surf2); background-size: cover; background-position: center;
  border-color: var(--onArtStroke);
}
.channel-strip .time-tile.on-art::before {
  content: ''; position: absolute; inset: 0; background: var(--tileFloor);
}
.channel-strip .time-tile.on-art > * { position: relative; z-index: 1; }

/* ---------- phone TONIGHT hero: the night's art under the standard scrim -----
   The scrim gradient is transparent at the top, so it rides on a flat floor:
   the hero's copy starts at the top edge and has to hold on a light cover too. */
.ev-hero-art {
  position: relative; overflow: hidden;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.ev-hero-art > .hero-art-scrim {
  position: absolute; inset: 0; z-index: 0;
  background: var(--scrim), var(--artFloor);
}
.ev-hero-art > *:not(.hero-art-scrim) { position: relative; z-index: 1; }
.channel-strip .cs-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.channel-strip .cs-title { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-strip .cs-sub { font-size: 11px; font-weight: 500; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-strip .cs-right { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

/* ============================================================================
   ROW (generic list row: doc / agent / lead / event)
   ============================================================================ */
.list-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  background: var(--surf); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 11px;
}
.list-row .row-mid { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-row .row-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.list-row .row-sub { font-size: 10.5px; font-weight: 500; color: var(--mut); }
.list-row .chevron { color: var(--dim); flex-shrink: 0; }

/* icon tile (soft-tint) */
.icon-tile {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.icon-tile.violet { background: var(--violetSoft); color: var(--violet2); }
.icon-tile.teal   { background: var(--tealSoft);   color: var(--teal); }
.icon-tile.warn   { background: var(--warnSoft);   color: var(--warn); }
.icon-tile.bad    { background: var(--badSoft);    color: var(--bad); }
.icon-tile.gold   { background: var(--goldSoft);   color: var(--gold); }
.icon-tile.neutral{ background: var(--surf2);      color: var(--mut); }
.icon-tile.lg { width: 38px; height: 38px; border-radius: 12px; }
.icon-tile.xl { width: 54px; height: 54px; border-radius: 16px; }

/* ============================================================================
   ASK ENTRY / OMNI INPUT
   ============================================================================ */
.ask-entry {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--surf); border: 1px solid var(--line2);
  border-radius: 14px; padding: 11px 14px;
}
.ask-entry svg { width: 17px; height: 17px; color: var(--violet); flex-shrink: 0; }
.ask-entry .ae-text { flex: 1 1 0; font-size: 13.5px; font-weight: 500; color: var(--mut); }
.ask-entry .ae-key {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: var(--surf3); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--ink2);
}

.omni {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--surf2); border: 1px solid var(--line2);
  border-radius: 999px; padding: 8px 9px 8px 16px;
}
.omni input {
  flex: 1 1 0; background: none; border: none; outline: none;
  font-size: 13.5px; color: var(--ink); font-weight: 500;
}
.omni input::placeholder { color: var(--mut); }
.omni .send {
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  background-image: var(--grad-btn);
  display: flex; align-items: center; justify-content: center; color: #0A0C11;
}
.omni .send:disabled { opacity: 0.5; }

/* generic input (search / pass field) */
.input {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: var(--surf); border: 1px solid var(--line);
  border-radius: 14px; padding: 13px 16px;
}
.input svg { color: var(--mut); flex-shrink: 0; }
.input input {
  flex: 1 1 0; background: none; border: none; outline: none;
  font-size: 13.5px; color: var(--ink); font-weight: 500;
}
.input input::placeholder { color: var(--mut); }

/* ============================================================================
   PHOTO HERO (mandatory scrim)
   ============================================================================ */
.photo-hero {
  position: relative; width: 100%; overflow: hidden; flex-shrink: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.photo-hero .scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 0; }
.photo-hero > *:not(.scrim) { position: relative; z-index: 1; }

/* ============================================================================
   SEGMENTED CONTROL
   ============================================================================ */
.segmented {
  display: flex; gap: 0; width: 100%;
  background: var(--surf); border: 1px solid var(--hair);
  border-radius: 12px; padding: 3px;
}
.segmented .seg {
  flex: 1 1 0; text-align: center; border-radius: 9px; padding: 8px 0;
  font-size: 12px; font-weight: 600; color: var(--mut);
}
.segmented .seg.active { background: var(--surf3); border: 1px solid var(--line2); color: var(--ink); font-weight: 700; }

/* ============================================================================
   TOGGLE
   ============================================================================ */
.toggle { width: 40px; height: 24px; border-radius: 12px; flex-shrink: 0; position: relative; background: var(--surf3); border: 1px solid var(--line2); transition: background .15s; }
.toggle .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: var(--dim); transition: transform .15s, background .15s; }
.toggle.on { background: var(--violet); border-color: var(--violet); }
.toggle.on .knob { transform: translateX(16px); background: #FFF; }

/* ============================================================================
   TAB BAR — floating capsule
   ============================================================================ */
.tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  pointer-events: none;
}
.tabbar .capsule {
  pointer-events: auto;
  height: 58px; border-radius: 29px;
  background: #12151DF2; border: 1px solid var(--glassBorder);
  backdrop-filter: blur(20px);
  display: flex; padding: 5px; gap: 0;
}
.tabbar .tab {
  flex: 1 1 0; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--mut);
}
.tabbar .tab svg { width: 21px; height: 21px; }
.tabbar .tab .tab-label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.2px; }
.tabbar .tab.active { background: var(--violetSoft); color: #FFF; }

/* ============================================================================
   EMPTY / ERROR / LOADING STATES
   ============================================================================ */
.state {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 48px 24px; text-align: center; width: 100%;
}
.state .state-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--surf2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--mut);
}
.state .state-msg { font-size: 13px; font-weight: 500; color: var(--mut); line-height: 1.5; max-width: 260px; }
.state.error .state-icon { background: var(--badSoft); border-color: var(--redStroke); color: var(--bad); }
.state.error.denied .state-icon { background: var(--violetSoft); border-color: var(--violetStroke); color: var(--violet2); }
.state .state-note { font-size: 11.5px; font-weight: 500; color: var(--dim); line-height: 1.45; max-width: 260px; }

/* skeleton shimmer for loading */
.skeleton {
  background: linear-gradient(90deg, var(--surf) 0%, var(--surf2) 50%, var(--surf) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: 12px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-row { height: 58px; width: 100%; margin-bottom: 8px; }
.skeleton-kpi { height: 84px; }

/* spinner (inline) */
.spinner {
  width: 18px; height: 18px; border-radius: 999px;
  border: 2px solid var(--line2); border-top-color: var(--teal);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================================
   NAV ROW (back link on detail screens)
   ============================================================================ */
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 6px 16px 10px;
}
.nav-row .back { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.nav-row .back svg { width: 20px; height: 20px; }

/* area tag pill */
.tag { display: inline-flex; border-radius: 999px; padding: 3px 9px; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.tag.teal { background: var(--tealSoft); color: var(--teal); }
.tag.violet { background: var(--violetSoft); color: var(--violet2); }

/* ============================================================================
   ASK THREAD — bubbles + answer card
   ============================================================================ */
.bubble-user {
  align-self: flex-end; max-width: 300px;
  background: var(--violetSoft); border: 1px solid var(--violetStroke2);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.45;
}
.answer-card {
  width: 100%;
  background: var(--surf); border: 1px solid var(--line);
  border-radius: 16px 16px 16px 4px;
  padding: 11px 13px;
  display: flex; flex-direction: column; gap: 8px;
}
.answer-card .grounding { font-size: 9px; font-weight: 800; letter-spacing: 1.6px; color: var(--teal); text-transform: uppercase; }
.answer-card .answer-body { font-size: 13px; font-weight: 500; color: var(--ink2); line-height: 1.5; white-space: pre-wrap; }
.streaming-card {
  width: 100%;
  background: var(--surf); border: 1px solid var(--violetStroke2);
  border-radius: 16px 16px 16px 4px; padding: 11px 13px;
  display: flex; flex-direction: column; gap: 8px;
}
.streaming-card .working-label { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; color: var(--violet2); }
.caret::after { content: '▌'; animation: blink 1s step-end infinite; color: var(--violet2); }
@keyframes blink { 50% { opacity: 0; } }

/* citation pill */
.cite {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tealSoft); border-radius: 999px; padding: 5px 10px;
  font-size: 10.5px; font-weight: 600; color: var(--teal);
}

/* agent rail (Ask home) */
.agent-rail { display: flex; gap: 14px; overflow-x: auto; width: 100%; }
.agent-rail .agent-node { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.agent-rail .agent-circle {
  width: 50px; height: 50px; border-radius: 25px;
  background: var(--surf2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--mut);
}
.agent-rail .agent-node.active .agent-circle { background: var(--violetSoft); border: 1.5px solid var(--violet); color: var(--violet2); }
.agent-rail .agent-label { font-size: 10.5px; font-weight: 500; color: var(--mut); }
.agent-rail .agent-node.active .agent-label { color: var(--ink); font-weight: 700; }

/* ============================================================================
   SIDEBAR + TOPBAR chrome — styled once; visibility flips per breakpoint below.
   Structure (app.js):
     .app-frame
       ├─ aside.sidebar            (desktop rail; hidden on mobile)
       │    ├─ .sb-brand           logo + wordmark
       │    ├─ .sb-nav             nav-item × 8 (icon + label + optional badge)
       │    └─ .sb-identity        signed-in staff + walkie status (bottom)
       └─ .content-col
            ├─ header.topbar       (desktop; ⌘K omni + notifications)
            └─ .view-scroll        status bar (mobile) + .view-body (views mount .content here)
            └─ nav.tabbar          (mobile bottom capsule; hidden on desktop)
   ============================================================================ */

/* --- sidebar ---------------------------------------------------------------- */
.sidebar {
  display: flex; flex-direction: column;
  width: var(--sidebar-w); flex-shrink: 0;
  border-right: 1px solid var(--hair);
  background: var(--bg2);
  padding: 22px 16px 16px;
  gap: 3px;
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
}
.sidebar .sb-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 2px 10px 18px; margin-bottom: 6px;
  border-bottom: 1px solid var(--hair);
}
.sidebar .sb-brand .sb-logo { width: 30px; height: 30px; flex-shrink: 0; }
.sidebar .sb-brand .sb-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sidebar .sb-brand .brand-name { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); line-height: 1.1; }
.sidebar .sb-brand .brand-sub { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--dim); }

.sidebar .sb-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; overflow-y: auto; padding-top: 4px; }
.sidebar .sb-nav .nav-sec {
  font-family: var(--sans); font-size: 9.5px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--dim);
  padding: 14px 12px 6px;
}
.sidebar .nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 11px;
  font-size: 13.5px; font-weight: 600; color: var(--mut);
  cursor: pointer; transition: background .12s, color .12s;
}
.sidebar .nav-item svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--mut); transition: color .12s; }
.sidebar .nav-item .nav-label { flex: 1 1 0; min-width: 0; }
.sidebar .nav-item .nav-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
  background: var(--surf2); border: 1px solid var(--line); color: var(--mut);
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar .nav-item .nav-badge.live { background: var(--badSoft); border-color: var(--redStroke); color: var(--bad); }
.sidebar .nav-item:hover:not(.active) { background: var(--surf); color: var(--ink2); }
.sidebar .nav-item:hover:not(.active) svg { color: var(--ink2); }
.sidebar .nav-item.active {
  background: var(--violetSoft); color: var(--ink);
  box-shadow: inset 3px 0 0 var(--violet);
}
.sidebar .nav-item.active svg { color: var(--violet2); }

/* identity + walkie footer (bottom of the rail) */
.sidebar .sb-identity {
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 8px;
}
.sidebar .sb-me { display: flex; align-items: center; gap: 10px; padding: 4px 4px; }
.sidebar .sb-me .avatar { width: 36px; height: 36px; border-radius: 11px; font-size: 12px; }
.sidebar .sb-me .sb-me-txt { min-width: 0; }
.sidebar .sb-me .sb-me-name { font-size: 12.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .sb-me .sb-me-role { font-size: 10.5px; font-weight: 500; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .sb-walkie {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: 11px; cursor: pointer;
  background: var(--surf); border: 1px solid var(--line);
  transition: border-color .12s, background .12s;
}
.sidebar .sb-walkie:hover { border-color: var(--tealStroke); background: var(--surf2); }
.sidebar .sb-walkie svg { width: 16px; height: 16px; color: var(--teal); flex-shrink: 0; }
.sidebar .sb-walkie .sw-txt { flex: 1 1 0; min-width: 0; }
.sidebar .sb-walkie .sw-title { font-size: 11.5px; font-weight: 700; color: var(--ink2); }
.sidebar .sb-walkie .sw-sub { font-size: 10px; font-weight: 500; color: var(--mut); }
.sidebar .sb-walkie .sw-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--teal); flex-shrink: 0; box-shadow: 0 0 8px 1px var(--tealStroke); }

/* --- topbar (desktop content header) ---------------------------------------- */
.topbar {
  display: none;
  height: var(--topbar-h); flex-shrink: 0;
  align-items: center; gap: 14px;
  padding: 0 28px;
  border-bottom: 1px solid var(--hair);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 30;
}
.topbar .tb-title { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); flex-shrink: 0; }
.topbar .tb-omni {
  display: flex; align-items: center; gap: 9px;
  flex: 1 1 0; max-width: 480px; margin-left: 8px;
  height: 38px; padding: 0 14px;
  background: var(--surf2); border: 1px solid var(--line2);
  border-radius: 11px; cursor: pointer; color: var(--mut);
  transition: border-color .12s;
}
.topbar .tb-omni:hover { border-color: var(--violetStroke2); }
.topbar .tb-omni svg { width: 16px; height: 16px; color: var(--violet); flex-shrink: 0; }
.topbar .tb-omni .tb-omni-text { flex: 1 1 0; min-width: 0; font-size: 13px; font-weight: 500; color: var(--mut);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .tb-omni .tb-kbd {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--ink2);
  padding: 3px 7px; border-radius: 6px; background: var(--surf3); border: 1px solid var(--line);
}
.topbar .tb-spacer { flex: 1 1 0; }
.topbar .tb-btn {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surf2); border: 1px solid var(--line); color: var(--ink2);
  position: relative; transition: border-color .12s, color .12s;
}
.topbar .tb-btn:hover { border-color: var(--line2); color: var(--ink); }
.topbar .tb-btn svg { width: 18px; height: 18px; }
.topbar .tb-btn .tb-dot { position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; border-radius: 999px; background: var(--bad); }

/* ============================================================================
   DESKTOP / TABLET ≥768px — true sidebar shell: rail + topbar + wide content.
   The shell (sidebar + topbar + full-width lane) engages at 768 so tablets are
   NEVER a narrow phone column floating on black. View INTERNALS keep their own
   ≥1024 breakpoints for multi-column layouts; between 768–1023 each view renders
   its single-column body centered in the wide lane (--read-max). This is the fix
   for the 768px "phone-column-on-black" gap.
   ============================================================================ */
@media (min-width: 768px) {
  .app-frame {
    max-width: none;
    flex-direction: row;
    min-height: 100vh;
    overflow: visible;
  }
  /* the mobile status bar hides on desktop */
  .app-frame > .statusbar { display: none; }

  .sidebar { display: flex; }
  .topbar { display: flex; }

  /* content column = topbar (sticky) + scrolling view lane, full remaining width */
  .content-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex; flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }
  /* the scroll region owns the wide content area; views sit in a centered lane */
  .content-col .view-scroll {
    flex: 1 1 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 60px;
  }
  .content-col .view-scroll > .statusbar { display: none; }

  /* the per-view .content lane: wide but bounded, centered, generous padding.
     Content max-width caps at --content-max on ultra-wide; single-column views
     read at --read-max; both centered with 40px gutters. */
  .content-col .view-scroll > .content,
  .content-col .view-scroll > .view-body > .content,
  .content-col .view-scroll .content {
    max-width: var(--read-max);
    margin: 0 auto;
    padding: 30px 40px 0;
    gap: 16px;
  }
  /* wide views may opt into the full 1200 lane via .content.wide */
  .content-col .view-scroll .content.wide { max-width: var(--content-max); }

  /* tab bar irrelevant on desktop (sidebar handles nav) */
  .content-col .tabbar { display: none; }

  /* detail back-links + doc bodies also center in the lane */
  .content-col .view-scroll > .nav-row,
  .content-col .view-scroll > .view-body > .nav-row { max-width: var(--read-max); margin: 0 auto; padding-left: 40px; padding-right: 40px; }
}

/* ============================================================================
   PHONE ≤767px — sidebar collapses; the floating bottom tab bar drives nav and
   the app is a full-bleed single column (no gutters). At ≥768 the sidebar shell
   above takes over so tablets get real width, not a centered phone column.
   ============================================================================ */
@media (max-width: 767px) {
  .sidebar { display: none; }
  .topbar { display: none; }
  .content-col { display: contents; }
}

/* --------------------------------------------------------------------------
   TABLET 768–1023 — the sidebar shell is on, but view internals are still in
   their single-column (mobile) DOM. Give the content lane a comfortable read
   width and a slightly narrower rail so nothing feels cramped. The full desktop
   multi-column view layouts switch on at ≥1024 as before.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar { width: 232px; padding: 20px 12px 14px; }
  .content-col .view-scroll > .content,
  .content-col .view-scroll > .view-body > .content,
  .content-col .view-scroll .content { max-width: 640px; padding: 24px 28px 0; }
  .content-col .view-scroll .content.wide { max-width: 720px; }
}

/* ============================================================================
   UTILITIES
   ============================================================================ */
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.row.end { align-items: flex-end; }
.col { display: flex; flex-direction: column; }
.gap-3 { gap: 3px; } .gap-6 { gap: 6px; } .gap-7 { gap: 7px; } .gap-8 { gap: 8px; } .gap-11 { gap: 11px; } .gap-14 { gap: 14px; }
.grow { flex: 1 1 0; min-width: 0; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; }
.wfull { width: 100%; }
.txt-ink { color: var(--ink); } .txt-ink2 { color: var(--ink2); } .txt-mut { color: var(--mut); } .txt-teal { color: var(--teal); } .txt-gold { color: var(--gold); } .txt-bad { color: var(--bad); } .txt-warn { color: var(--warn); } .txt-violet { color: var(--violet2); }
.f-serif { font-family: var(--serif); } .f-mono { font-family: var(--mono); }
.divider { height: 1px; width: 100%; background: var(--hair); }
.hidden { display: none !important; }

/* ============================================================================
   DETAIL-VIEW PIECES
   ============================================================================ */
/* profile / about tables (hair dividers) */
.prof-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; }
.prof-k { font-size: 12px; font-weight: 500; color: var(--mut); }
.prof-v { font-size: 12px; font-weight: 600; color: var(--ink); text-align: right; }

/* session-note quote block */
.quote {
  margin-top: 8px;
  background: var(--surf2); border-radius: 10px; padding: 9px 12px 9px 15px;
  border-left: 3px solid var(--violet);
  font-size: 11.5px; font-weight: 500; color: var(--ink2); line-height: 1.5; font-style: italic;
}

/* sticky detail CTA */
.sticky-cta { position: sticky; bottom: calc(var(--tabbar-h) - 12px); padding-top: 14px; width: 100%; background: linear-gradient(180deg, transparent 0, var(--bg) 14px); }
@media (min-width: 821px) { .sticky-cta { position: static; background: none; } }

/* doc reader */
.doc-body { padding: 2px 20px 40px; }
.doc-title { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.12; color: var(--ink); margin-bottom: 12px; }
.md p.md-p { font-size: 14.5px; font-weight: 400; line-height: 1.55; color: var(--ink2); margin: 0 0 12px; }
.md .md-h { font-family: var(--serif); font-weight: 600; color: var(--ink); margin: 18px 0 8px; }
.md h1.md-h { font-size: 20px; } .md h2.md-h { font-size: 19px; } .md h3.md-h { font-size: 16px; }
.md ul.md-ul, .md ol.md-ol { margin: 0 0 12px; padding-left: 20px; }
.md li { font-size: 14px; line-height: 1.5; color: var(--ink2); margin-bottom: 5px; }
.md code { font-family: var(--mono); font-size: 12.5px; background: var(--surf2); border: 1px solid var(--hair); border-radius: 5px; padding: 1px 5px; color: var(--teal); }
.md strong { color: var(--ink); font-weight: 700; }

/* event detail hero */
/* No photograph default: the hero's art is always set inline (real cover or the
   seeded pattern), so the fallback is the app's own surface colour. */
.event-hero { height: 252px; background-color: var(--surf2); }
/* inset:0 with height:auto — the previous `top:40px; height:212px; inset:auto…`
   let the shorthand reset top, leaving a 40px band of unscrimmed art. */
.event-hero .scrim { inset: 0; height: auto; }
.hero-back {
  position: absolute; left: 16px; top: 64px; z-index: 3;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--pillOnPhoto); border: 1px solid var(--glassBorder);
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.hero-title { position: absolute; left: 16px; bottom: 16px; z-index: 3; right: 16px; display: flex; flex-direction: column; gap: 4px; }
/* .photo-hero > *:not(.scrim){position:relative} out-specifies the two absolute
   rules above, which dropped the title into flow on top of the back button. */
.photo-hero.event-hero > .hero-title,
.photo-hero.event-hero > .hero-back { position: absolute; }

/* sign-out row */
.signout-row { border-color: var(--redStroke2) !important; color: var(--bad); font-size: 13px; font-weight: 600; }
.signout-row svg { color: var(--bad); }

/* ============================================================================
   ACCESS GATE — faithful port of 01-access-gate.html
   ============================================================================ */
.gate-frame { overflow: hidden; }
.gate-hero {
  height: 470px;
  background-image: url('../assets/studio-control-room.png');
  /* headblock is bottom-anchored inside the hero (was a fragile top:318 that
     clipped the two-line title). flex-end pins the wordmark + title to the
     bottom edge with room for both lines regardless of font metrics. */
  display: flex; flex-direction: column; justify-content: flex-end;
}
.gate-hero .scrim { top: 150px; height: 320px; inset: auto 0 auto 0; }
.gate-livepill { position: absolute; right: 22px; top: 66px; z-index: 2; }
/* bottom-anchored head block — never clips the title */
.gate-headblock { position: relative; z-index: 3; width: auto; padding: 0 24px 26px; }
.gate-headblock .col { width: 100%; }
.gate-title {
  font-family: var(--serif); font-size: 30px; font-weight: 600;
  letter-spacing: -0.3px; line-height: 1.1; color: var(--ink);
  width: 100%; overflow: visible;
}
.gate-wordmark { width: 232px; max-width: 68%; height: auto; display: block;
  user-select: none; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }

.gate-form {
  flex: 1 1 0;
  display: flex; flex-direction: column; gap: 13px;
  padding: 22px 24px 30px;
}
.gate-sub { width: 100%; font-size: 13px; font-weight: 500; line-height: 1.46; color: var(--mut); }
.gate-field { width: 100%; }
.gate-field input { letter-spacing: 3px; }
.gate-eye { display: flex; align-items: center; color: var(--dim); }
.gate-err { font-size: 12px; font-weight: 600; color: var(--bad); width: 100%; }

.gate-facerow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-top: 6px; width: 100%;
}
.gate-facerow svg { color: var(--mut); }
.gate-facerow span { font-size: 12px; font-weight: 500; color: var(--mut); }

.gate-dev {
  width: 100%; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; color: var(--dim);
}
.gate-foot {
  width: 100%; text-align: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 1.2px; color: var(--dim);
}

/* ============================================================================
   ASK THREAD layout
   ============================================================================ */
.thread-view { display: flex; flex-direction: column; height: 100%; }
.thread-scroll {
  flex: 1 1 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 2px 16px 8px;
}
.thread-reply { margin: 6px 16px 12px; width: auto; }
@media (min-width: 821px) {
  .thread-view { height: auto; }
  .thread-scroll { min-height: 40vh; }
}

/* ============================================================================
   ACCESS GATE — DESKTOP ≥1024px: full-bleed split (studio hero | login card).
   Heading "Welcome back to the club." must be FULLY visible (was clipped).
   Below 1024 the mobile photo-hero gate (above) stays exactly as-is.
   NOTE: the base `.gate-desktop { display:none }` MUST precede the ≥1024 media
   query so the media rule wins (equal specificity → source order decides).
   ============================================================================ */
.gate-desktop {
  display: none;   /* hidden on mobile; the media query below flips to grid */
  grid-template-columns: 1.02fr 0.98fr;
  min-height: 100vh; width: 100%; position: relative;
}

@media (min-width: 768px) {
  /* the desktop gate is its own full-screen composition, not the phone frame.
     Engages at 768 (matches the shell) so a tablet never shows the stretched
     phone photo-hero gate — it gets the centered unlock card instead. */
  .gate-frame { display: none; }
  .gate-desktop { display: grid; }
}

/* LEFT — the studio-console hero (full-bleed photo + scrim + editorial cap) */
.gate-desktop .gd-canvas {
  position: relative; overflow: hidden;
  border-right: 1px solid var(--hair);
  background: var(--bg);
}
.gate-desktop .gd-canvas .gd-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.gate-desktop .gd-canvas .gd-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,12,17,.94) 0%, rgba(10,12,17,.55) 44%, rgba(10,12,17,.26) 100%);
}
.gate-desktop .gd-canvas .gd-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 400px at 74% 20%, rgba(46,230,207,.14), transparent 60%),
              radial-gradient(680px 460px at 22% 96%, rgba(139,108,255,.14), transparent 62%);
}
.gate-desktop .gd-brand { position: absolute; top: 40px; left: 46px; z-index: 3; display: flex; align-items: center; gap: 11px; }
.gate-desktop .gd-brand .gd-logo { width: 30px; height: 30px; }
.gate-desktop .gd-brand .gd-brand-nm { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); }
.gate-desktop .gd-live {
  position: absolute; top: 40px; right: 44px; z-index: 3;
}
.gate-desktop .gd-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 46px 48px; max-width: 560px; }
.gate-desktop .gd-cap .gd-eyebrow { margin-bottom: 12px; }
.gate-desktop .gd-cap .gd-quote {
  font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.18;
  letter-spacing: -0.015em; color: var(--ink); max-width: 20ch;
}
.gate-desktop .gd-cap .gd-by { margin-top: 18px; display: flex; align-items: center; gap: 11px; }
.gate-desktop .gd-cap .gd-by .gd-by-nm { font-size: 13px; font-weight: 600; color: var(--ink); }
.gate-desktop .gd-cap .gd-by .gd-by-rl { font-size: 11.5px; color: var(--mut); }

/* RIGHT — the unlock card, vertically centered, with breathing room */
.gate-desktop .gd-stage {
  position: relative; display: grid; place-items: center; padding: 48px;
  background: var(--bg);
}
.gate-desktop .gd-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 440px at 50% -6%, rgba(139,108,255,.12), transparent 60%);
}
.gate-desktop .gd-card {
  position: relative; width: 100%; max-width: 408px;
  background: linear-gradient(180deg, var(--surf2), var(--surf));
  border: 1px solid var(--line); border-radius: 22px;
  padding: 36px 36px 30px;
  box-shadow: 0 42px 100px -46px rgba(139,108,255,.42), 0 0 0 1px rgba(139,108,255,.08);
}
.gate-desktop .gd-card .gd-tile {
  width: 56px; height: 56px; border-radius: 16px; margin-bottom: 22px;
  background: var(--grad); display: grid; place-items: center;
  box-shadow: 0 14px 40px -14px rgba(139,108,255,.7);
}
.gate-desktop .gd-card .gd-tile img { width: 30px; height: 30px; }
.gate-desktop .gd-card .gd-kicker {
  font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--teal);
}
.gate-desktop .gd-card .gd-title {
  font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--ink); margin: 10px 0 8px; width: 100%;
}
.gate-desktop .gd-card .gd-lede { color: var(--ink2); font-size: 13.5px; line-height: 1.5; max-width: 38ch; }
.gate-desktop .gd-card .gd-fieldwrap { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.gate-desktop .gd-card .gd-lab {
  font-size: 11.5px; font-weight: 700; color: var(--ink2); letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 8px;
}
.gate-desktop .gd-card .gd-lab .gd-lab-key { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--mut); }
.gate-desktop .gd-card .input { border-radius: 13px; padding: 15px 16px; }
.gate-desktop .gd-card .input input { font-family: var(--mono); font-size: 17px; letter-spacing: 6px; }
.gate-desktop .gd-card .btn-primary { height: 52px; font-size: 15px; border-radius: 13px; margin-top: 4px; }
.gate-desktop .gd-card .gd-foot {
  display: flex; align-items: center; gap: 9px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--hair);
}
.gate-desktop .gd-card .gd-foot .tally { flex-shrink: 0; }
.gate-desktop .gd-card .gd-foot .gd-foot-t { font-size: 12px; color: var(--mut); font-weight: 500; }
.gate-desktop .gd-card .gd-foot .gd-foot-brand { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--dim); }
.gate-desktop .gd-card .gate-err { margin-top: -2px; }

/* tablet / narrow-desktop (768–1180): drop the hero, center just the unlock card
   full-bleed so the gate reads clean on an iPad-width viewport. */
@media (min-width: 768px) and (max-width: 1180px) {
  .gate-desktop { grid-template-columns: 1fr; }
  .gate-desktop .gd-canvas { display: none; }
}

/* Settings brand wordmark */
.set-brand { display: flex; justify-content: center; padding: 4px 0 10px; }
.set-wordmark { width: 100%; max-width: 300px; height: auto; opacity: 0.96; }

/* ============================================================================
   DESKTOP SESSIONS BOARD + SESSION DETAIL (≥1024 only; mobile untouched)
   Wired to real GET /staff/sessions data. Reference:
   trc-staff-redesign/screens/sessions-web.html + session-detail-web.html.
   These classes are only emitted by the desktop render path in
   js/views/sessions.js + session-detail.js.
   ============================================================================ */

/* --- shared desktop card chrome ------------------------------------------- */
.desk-card { background: var(--surf); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.desk-card.pad-lg { padding: 18px 20px; }
.desk-card-h { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.desk-card-h .dch-ic { width: 20px; height: 20px; flex-shrink: 0; color: var(--violet2); display: flex; align-items: center; justify-content: center; }
.desk-card-h .dch-ic svg { width: 18px; height: 18px; }
.desk-card-h .dch-t { font-family: var(--serif); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.desk-card-h .dch-r { margin-left: auto; }
.desk-link { font-size: 12px; font-weight: 600; color: var(--teal); cursor: pointer; }
.desk-hair { height: 1px; background: var(--hair); border: none; margin: 13px 0; }

/* --- board KPI row (4-up) ------------------------------------------------- */
.desk-kpi4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.desk-stat { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; display: flex; flex-direction: column; gap: 5px; }
.desk-stat.accent { border-color: var(--violetStroke); background: linear-gradient(165deg, var(--violetSoft), var(--surf)); }
.desk-stat.warn { border-color: var(--amberStroke); }
.desk-stat .ds-k { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--mut); }
.desk-stat .ds-k svg { width: 14px; height: 14px; color: var(--mut); flex-shrink: 0; }
.desk-stat.warn .ds-k, .desk-stat.warn .ds-k svg { color: var(--warn); }
.desk-stat .ds-v { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1; color: var(--ink); }
.desk-stat .ds-v .ds-unit { font-size: 15px; color: var(--mut); font-family: var(--sans); font-weight: 500; margin-left: 2px; }
.desk-stat.warn .ds-v { color: var(--warn); }
.desk-stat .ds-d { font-size: 11px; font-weight: 500; color: var(--mut); }

/* --- filter chip + legend row -------------------------------------------- */
.desk-filterbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.desk-filterbar .df-spacer { flex: 1 1 0; }
.desk-legend { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--mut); }
.desk-legend .dl-dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.desk-legend .dl-dot.ok { background: var(--bad); }      /* live = record red */
.desk-legend .dl-dot.warn { background: var(--warn); }
.desk-legend .dl-dot.idle { background: var(--dim); }

/* --- the 2-column board grid --------------------------------------------- */
.desk-board { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.desk-col { display: flex; flex-direction: column; gap: 18px; }

/* --- session row inside a board card ------------------------------------- */
.sess-row { display: flex; align-items: stretch; gap: 14px; padding: 11px 0; border-top: 1px solid var(--hair); cursor: pointer; text-decoration: none; color: inherit; transition: background .12s; border-radius: 12px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.sess-row:first-of-type { border-top: none; }
.sess-row:hover { background: var(--surf2); }
.sess-row.warn { background: rgba(245,183,78,.05); }
.sess-row.warn:hover { background: rgba(245,183,78,.09); }
.sess-lead { width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; background: var(--surf2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--mut); position: relative; }
.sess-lead svg { width: 20px; height: 20px; }
.sess-lead.live { background: linear-gradient(135deg, #8B6CFF, #2EE6CF); border: none; color: #0A0C11; }
.sess-lead.warn { background: var(--warnSoft); border-color: var(--amberStroke); color: var(--warn); }
.sess-lead .sl-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 999px; border: 2px solid var(--surf); }
.sess-lead .sl-dot.ok { background: var(--bad); }
.sess-lead .sl-dot.warn { background: var(--warn); }
.sess-body { flex: 1 1 0; min-width: 0; }
.sess-title { font-size: 14.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sess-sub { font-size: 12px; font-weight: 500; color: var(--mut); margin-top: 4px; }
.sess-sub b { color: var(--ink2); font-weight: 600; }
.sess-right { flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 8px; }
.sess-time { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink2); white-space: nowrap; }

/* live progress bar */
.sess-prog { margin-top: 9px; height: 6px; border-radius: 6px; background: var(--surf3); overflow: hidden; }
.sess-prog > i { display: block; height: 100%; background: var(--grad); border-radius: 6px; }
.sess-prog-lbl { display: flex; justify-content: space-between; margin-top: 5px; }
.sess-prog-lbl span { font-family: var(--mono); font-size: 11px; color: var(--mut); }
.sess-prog-lbl span.mid { color: var(--ink2); }

/* right-column mini rows (rooms / engineers) */
.mini-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.mini-row:first-of-type { border-top: none; }
.mini-lead { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: var(--surf2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--mut); }
.mini-lead svg { width: 17px; height: 17px; }
.mini-lead.grad { background: linear-gradient(135deg,#8B6CFF,#2EE6CF); border: none; color: #0A0C11; }
.mini-mid { flex: 1 1 0; min-width: 0; }
.mini-t { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-s { font-size: 11px; font-weight: 500; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-r { flex-shrink: 0; }

/* --- SESSION DETAIL (desktop) -------------------------------------------- */
.sd-hero { position: relative; height: 210px; border-radius: 18px; overflow: hidden; margin-bottom: 20px; display: flex; align-items: flex-end; padding: 22px 24px; background: linear-gradient(135deg, #171B25 0%, #12151D 60%); border: 1px solid var(--line); }
.sd-hero.grad { background: linear-gradient(125deg, rgba(139,108,255,.28) 0%, rgba(91,140,255,.14) 45%, rgba(46,230,207,.20) 100%), #0D1017; }
.sd-hero.warn { background: linear-gradient(125deg, rgba(245,183,78,.22) 0%, rgba(240,50,34,.10) 100%), #0D1017; }
.sd-hero .sd-hero-body { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; width: 100%; }
.sd-hero .sd-eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--teal); }
.sd-hero .sd-title { font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1.05; letter-spacing: -0.4px; color: var(--ink); margin-top: 8px; }
.sd-hero .sd-lede { color: var(--ink2); font-size: 14px; margin-top: 7px; max-width: 62ch; line-height: 1.5; }
.sd-hero .sd-herochips { display: flex; gap: 8px; flex-shrink: 0; }

.sd-alert { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; background: linear-gradient(120deg, rgba(245,183,78,.13), var(--surf)); border: 1px solid var(--amberStroke); border-radius: 16px; padding: 15px 18px; }
.sd-alert .sda-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--warnSoft); border: 1px solid var(--amberStroke); display: flex; align-items: center; justify-content: center; color: var(--warn); }
.sd-alert .sda-ic svg { width: 20px; height: 20px; }
.sd-alert .sda-txt { flex: 1 1 200px; min-width: 0; }
.sd-alert .sda-t { font-size: 14px; font-weight: 700; color: var(--ink); }
.sd-alert .sda-s { font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.sd-alert .sda-btns { display: flex; gap: 8px; flex-shrink: 0; }

.sd-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: start; }

/* meta grid inside client card */
.sd-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; }
.sd-meta .sdm-k { font-size: 11.5px; font-weight: 500; color: var(--mut); }
.sd-meta .sdm-v { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: 3px; }

.sd-quote { font-size: 13.5px; color: var(--ink2); background: var(--surf2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; line-height: 1.5; font-style: italic; }

/* credits-roll rows */
.sd-roll { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hair); }
.sd-roll:first-of-type { border-top: none; }
.sd-roll .sdr-k { font-size: 12px; color: var(--mut); width: 100px; flex: none; }
.sd-roll .sdr-v { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sd-roll .sdr-v.mut { color: var(--mut); font-weight: 500; }

/* engineer assign card (desktop) */
.sd-assign { background: linear-gradient(165deg, rgba(139,108,255,.13), var(--surf)); border-color: var(--violetStroke); }
.sd-assign-empty { border: 1.5px dashed var(--line2); border-radius: 14px; padding: 16px; text-align: center; margin-bottom: 12px; }
.sd-assign-empty .sae-ic { color: var(--mut); display: flex; justify-content: center; }
.sd-assign-empty .sae-ic svg { width: 26px; height: 26px; }
.sd-assign-empty .sae-t { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: 8px; }
.sd-assign-empty .sae-s { font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.sd-assign .sda-reclabel { font-size: 11.5px; color: var(--mut); margin-bottom: 6px; }

/* 1024–1180: desktop shell is on but the content lane is narrow — stack the
   board/detail columns and drop KPIs to 2-up so nothing crushes. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .desk-board { grid-template-columns: 1fr; }
  .sd-grid { grid-template-columns: 1fr; }
  .desk-kpi4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   DESKTOP VIEW LAYOUTS — Events + Members (wide, multi-column).
   Mobile-first defaults: desktop-only pieces hidden; the existing phone lists
   render as before. The @media (min-width:1024px) block flips them on and lays
   out the wide grids. Real data only; no fabricated capacity/RSVP/credit cells.
   ============================================================================ */

/* --- shared: desktop-only / mobile-only helpers (default = mobile) --- */
.ev-kpi-wide, .mem-kpi-wide,
.cal-strip, .ev-cal-card,
.ev-grid,
.mem-table-sec,
.evd-cta-desktop, .mem-prof-cta-desktop { display: none; }
.ev-lede, .mem-lede { display: none; }  /* lede is desktop-only chrome */

/* ============================================================================
   DESKTOP ≥1024px
   ============================================================================ */
@media (min-width: 1024px) {

  /* ---------- EVENTS ---------- */
  .ev-head { margin-bottom: 6px; }
  .ev-lede { display: block; font-size: 13.5px; color: var(--mut); max-width: 62ch; margin-top: 4px; }

  /* KPI console: 4 across */
  .ev-kpis, .mem-kpis { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .ev-kpi-wide, .mem-kpi-wide { display: block; }
  .ev-kpi-wide > .kpi-card, .mem-kpi-wide > .kpi-card { height: 100%; }

  /* hide the mobile filter chips + mobile hero + mobile row list on desktop */
  .ev-chips, .ev-mobile-hero, .ev-rows { display: none; }
  .mem-mobile { display: none; }

  /* this-week calendar strip */
  .ev-cal-card { display: block; padding: 16px 18px; border-radius: 16px; }
  .cal-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
  .cal-day {
    border: 1px solid var(--hair); border-radius: 12px; padding: 9px 9px 10px;
    min-height: 96px; background: var(--surf); display: flex; flex-direction: column; gap: 6px;
  }
  .cal-day.today { background: var(--violetSoft); border-color: var(--violetStroke); }
  .cal-hd { display: flex; justify-content: space-between; align-items: baseline; }
  .cal-hd .dow { font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; color: var(--mut); text-transform: uppercase; }
  .cal-hd .dn { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink); }
  .cal-day.today .dn { color: var(--violet2); }
  .ev-dot {
    display: flex; align-items: stretch; gap: 6px; cursor: pointer;
    font-size: 10.5px; font-weight: 500; color: var(--ink2);
    background: var(--surf2); border: 1px solid var(--line); border-radius: 7px;
    padding: 4px 6px; line-height: 1.15;
  }
  .ev-dot:hover { border-color: var(--line2); background: var(--surf3); }
  .ev-dot .tk { width: 3px; border-radius: 3px; background: var(--grad); flex-shrink: 0; }
  .ev-dot.g .tk { background: var(--gold); }
  .ev-dot.warn .tk { background: var(--warn); }
  .ev-dot .ev-dot-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ev-dot-more { font-size: 9.5px; font-weight: 600; color: var(--mut); padding-left: 2px; }

  /* event card grid */
  .ev-listwrap .ev-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch;
  }
  @media (min-width: 1440px) { .ev-listwrap .ev-grid { grid-template-columns: repeat(4, 1fr); } }
  .ev-card {
    position: relative; display: flex; flex-direction: column;
    background: var(--surf); border: 1px solid var(--line); border-radius: 16px;
    overflow: hidden; cursor: pointer; transition: transform .16s, border-color .16s;
  }
  .ev-card:hover { border-color: var(--line2); transform: translateY(-2px); }
  .ev-card.today { border-color: var(--violetStroke); }
  .ev-photo { position: relative; height: 150px; background-size: cover; background-position: center; }
  .ev-photo-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, #0A0C1108 0%, #0A0C11B0 100%); }
  .ev-datechip {
    position: absolute; top: 12px; left: 12px; z-index: 1;
    background: var(--pillOnPhoto); backdrop-filter: blur(8px);
    border: 1px solid var(--glassBorder); border-radius: 12px;
    padding: 6px 9px 5px; text-align: center; min-width: 50px;
  }
  .ev-datechip .mo { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; color: var(--teal); }
  .ev-datechip .dy { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 0.95; color: var(--ink); margin-top: 1px; }
  .ev-photo-pill { position: absolute; top: 12px; right: 12px; z-index: 1; }
  .ev-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 0; }
  .ev-card-eyebrow { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.8px; color: var(--mut); }
  .ev-card-nm { font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.08; color: var(--ink); }
  .ev-card-note { font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--mut); }
  .ev-card-foot { margin-top: auto; padding-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .ev-card-meta { font-size: 11px; font-weight: 600; color: var(--ink2); }
  .ev-card-btn { padding: 6px 11px; font-size: 11px; }

  /* ---------- EVENT DETAIL ---------- */
  .event-hero { height: 300px; }
  /* the desktop override carried the same 40px short scrim; inset:0 + auto */
  .event-hero .scrim { height: auto; }
  .evd-title { font-size: 34px; }
  .evd-body { padding-top: 22px; }
  .evd-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: start; width: 100%; }
  .evd-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .evd-right { position: sticky; top: 8px; }
  .evd-cta-desktop { display: block; margin-top: 4px; }
  .evd-cta { display: flex; flex-direction: column; gap: 8px; }
  .evd-cta-mobile { display: none; }

  /* ---------- MEMBERS TABLE ---------- */
  .mem-head { margin-bottom: 6px; }
  .mem-lede { display: block; font-size: 13.5px; color: var(--mut); max-width: 62ch; margin-top: 4px; }
  .mem-table-sec { display: block; }
  .mem-table { padding: 0; border-radius: 16px; overflow: hidden; }
  .mem-tr {
    display: grid;
    grid-template-columns: 2.2fr 1.3fr 1fr 1.1fr 0.9fr 1.1fr 72px;
    align-items: center; gap: 10px;
    padding: 11px 16px;
  }
  .mem-thead {
    background: var(--surf2); border-bottom: 1px solid var(--line);
  }
  .mem-th { font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mut); }
  .mem-row { border-top: 1px solid var(--hair); cursor: pointer; transition: background .12s; }
  .mem-row:first-of-type { border-top: none; }
  .mem-row:hover { background: var(--surf2); }
  .mem-td { min-width: 0; display: flex; align-items: center; gap: 8px; }
  .mem-c-name { gap: 10px; }
  .mem-name-wrap { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .mem-name { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mem-name-sub { font-size: 10.5px; font-weight: 500; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mem-c-tier { flex-wrap: wrap; gap: 5px; }
  .mem-owner { font-size: 12px; font-weight: 600; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mem-dash { font-size: 12px; font-weight: 500; color: var(--dim); }
  .mem-cell-txt { font-size: 12px; font-weight: 500; color: var(--mut); }
  .mem-due { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--warn); }
  .mem-c-act { justify-content: flex-end; }
  .mem-row-btn { padding: 6px 12px; font-size: 11px; }

  /* ---------- MEMBER PROFILE ---------- */
  .mem-prof-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; width: 100%; }
  .mem-prof-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .mem-prof-right { position: sticky; top: 8px; }
  .mem-prof-cta-desktop { display: block; margin-top: 2px; }
  .mem-prof-cta-mobile { display: none; }
}

/* ============================================================================
   MOBILE ≤1023px — keep the desktop-only pieces hidden, mobile pieces shown
   ============================================================================ */
@media (max-width: 1023px) {
  .ev-cal-card, .cal-strip, .ev-grid, .ev-kpi-wide,
  .mem-table-sec, .mem-kpi-wide,
  .evd-cta-desktop, .mem-prof-cta-desktop { display: none !important; }
  .ev-lede, .mem-lede { display: none !important; }
  /* the mobile KPI grid stays 2-up (its default) */
  .ev-kpis, .mem-kpis { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   FLOATER (manager surface) — Assign + Monitor (+ inline missed-alert).
   Reuses Backline v2 tokens: near-black surfaces, violet→teal accent, Record
   Red (--bad) for missed/alert, gold for the end-of-night "Close" marker.
   ========================================================================== */
.flt-intro { font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--mut); margin-top: 6px; }
.flt-field-label {
  font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--mut); margin-bottom: -6px;
}

/* selected floater card */
.flt-sel-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--violetSoft); border: 1px solid var(--violetStroke);
  border-radius: 16px; padding: 12px 14px;
}
.flt-sel-mid { flex: 1 1 0; min-width: 0; }
.flt-sel-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.flt-sel-role { font-size: 11.5px; font-weight: 500; color: var(--mut); margin-top: 1px; }
.flt-pres-tag { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--mut); flex-shrink: 0; }
.flt-pres-tag.on { color: var(--ok); }
.flt-pres-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--dim); }
.flt-pres-tag.on .flt-pres-dot { background: var(--ok); }

/* person chip row */
.flt-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.flt-person-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surf2); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 11px; cursor: pointer;
}
.flt-person-chip:hover { border-color: var(--violetStroke); }
.flt-chip-name { font-size: 12px; font-weight: 600; color: var(--ink2); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flt-chip-pres { width: 6px; height: 6px; border-radius: 999px; background: var(--ok); }

/* interval presets */
.flt-presets { display: flex; gap: 8px; }
.flt-preset {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 0; border-radius: 13px; background: var(--surf); border: 1px solid var(--line); cursor: pointer;
}
.flt-preset.on { background: var(--violetSoft); border-color: var(--violetStroke); }
.flt-preset-n { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink2); }
.flt-preset.on .flt-preset-n { color: var(--ink); }
.flt-preset-u { font-family: var(--sans); font-size: 9px; font-weight: 800; letter-spacing: 0.8px; color: var(--mut); }
.flt-custom-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surf2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer;
}
.flt-custom-row.on { border-color: var(--violetStroke); cursor: default; }
.flt-custom-label { font-size: 13px; font-weight: 500; color: var(--ink2); }
.flt-custom-value { font-family: var(--mono); font-size: 12px; color: var(--ink2); }
.flt-custom-input-wrap { display: flex; align-items: center; gap: 5px; }
.flt-custom-input {
  min-width: 44px; text-align: right; background: none; border: none; outline: none;
  font-family: var(--mono); font-size: 14px; color: var(--ink);
}
.flt-custom-unit { font-size: 12px; font-weight: 500; color: var(--mut); }

/* active window */
.flt-win-row { display: flex; align-items: center; gap: 8px; }
.flt-win-box { flex: 1 1 0; background: var(--surf); border: 1px solid var(--line); border-radius: 13px; padding: 11px 13px; }
.flt-win-key { font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--mut); }
.flt-win-val { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.flt-win-sub { font-size: 10.5px; font-weight: 500; color: var(--dim); margin-top: 2px; }
.flt-win-arrow { font-size: 16px; color: var(--dim); }

/* preview card */
.flt-preview { }
.flt-preview-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.flt-rounds-pill {
  background: var(--violetSoft); border: 1px solid var(--violetStroke); border-radius: 999px;
  padding: 3px 9px; font-size: 10px; font-weight: 700; color: var(--violet2);
}
.flt-preview-meta { font-size: 12px; font-weight: 500; color: var(--mut); }
.flt-preview-empty { font-size: 12px; font-weight: 500; color: var(--mut); }
.flt-chip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.flt-round-chip {
  display: inline-flex; align-items: baseline; gap: 3px;
  background: var(--surf2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px;
}
.flt-round-t { font-family: var(--mono); font-size: 12px; color: var(--ink2); }
.flt-round-m { font-family: var(--mono); font-size: 9.5px; color: var(--dim); }
.flt-grace { display: flex; gap: 9px; align-items: flex-start; }
.flt-grace-emoji { font-size: 14px; line-height: 1.3; }
.flt-grace-txt { flex: 1 1 0; font-size: 11.5px; font-weight: 500; line-height: 1.5; color: var(--ink2); }
.flt-grace-txt b { font-weight: 700; color: var(--ink); }

/* checklist template row */
.flt-template-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surf2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.flt-template-label { font-size: 13px; font-weight: 500; color: var(--ink2); }
.flt-template-hint { font-size: 12px; font-weight: 600; color: var(--teal); }

/* warn / ok inline cards */
.flt-warn, .flt-ok {
  display: flex; gap: 9px; align-items: flex-start;
  border-radius: 14px; padding: 11px 13px; font-size: 12px; font-weight: 500; line-height: 1.45;
}
.flt-warn { border: 1px solid var(--amberStroke); background: var(--warnSoft); color: var(--warn); }
.flt-warn svg { color: var(--warn); flex-shrink: 0; }
.flt-ok { border: 1px solid var(--okStroke); background: var(--okSoft); color: var(--ok); }
.flt-ok svg { color: var(--ok); flex-shrink: 0; }

/* sticky assign footer (in-flow on web; the desktop lane centers it) */
.flt-sticky { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.flt-sticky .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
.flt-foot-hint { text-align: center; font-size: 11.5px; font-weight: 500; color: var(--dim); }

/* ---- Monitor ------------------------------------------------------------- */
.flt-id-card { }
.flt-id-row { display: flex; align-items: center; gap: 11px; }
.flt-id-mid { flex: 1 1 0; min-width: 0; }
.flt-id-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.flt-id-sub { font-size: 11.5px; font-weight: 500; color: var(--mut); margin-top: 1px; }
.flt-reassign-link { background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--teal); flex-shrink: 0; }
.flt-state-tag {
  display: flex; align-items: center; gap: 7px; margin-top: 11px;
  border-radius: 10px; padding: 7px 10px; font-size: 11px; font-weight: 500;
}
.flt-state-tag.warn { background: var(--warnSoft); border: 1px solid var(--amberStroke); color: var(--warn); }
.flt-state-tag.mut { background: var(--surf2); border: 1px solid var(--line); color: var(--mut); }
.flt-kpi-row { display: flex; gap: 8px; margin-top: 12px; }
.flt-kpi {
  flex: 1 1 0; background: var(--surf2); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 11px; display: flex; flex-direction: column; gap: 4px;
}
.flt-kpi.accent { background: var(--violetSoft); border-color: var(--violetStroke2); }
.flt-kpi-key { font-size: 10px; font-weight: 600; color: var(--mut); }
.flt-kpi-val { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1; color: var(--ink); }
.flt-kpi-val.ok { color: var(--ok); }
.flt-kpi-val.bad { color: var(--bad); }
.flt-kpi-val.next { font-size: 16px; color: var(--violet2); }

.flt-tl-label {
  font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--mut); margin: 6px 0 -6px;
}
.flt-tl { display: flex; flex-direction: column; gap: 8px; }
.flt-tl-empty { font-size: 12.5px; font-weight: 500; color: var(--mut); padding: 12px 4px; }
.flt-tl-row {
  display: flex; align-items: center; gap: 13px;
  background: var(--surf); border: 1px solid var(--line); border-radius: 16px; padding: 13px 14px;
}
.flt-tl-row.miss { border-color: var(--redStroke2); }
.flt-tl-row.live { border-color: var(--violet); }
.flt-tl-row.next { border-color: var(--violetStroke); }
.flt-tl-row.dim { opacity: 0.55; }
.flt-tl-tile {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--surf2); color: var(--mut);
}
.flt-tl-tile.done { background: var(--okSoft); border-color: var(--okStroke); color: var(--ok); }
.flt-tl-tile.miss { background: var(--badSoft); border-color: var(--redStroke); color: var(--bad); }
.flt-tl-tile.live, .flt-tl-tile.next { background: var(--violetSoft); border-color: var(--violetStroke); color: var(--violet2); }
.flt-tl-mid { flex: 1 1 0; min-width: 0; }
.flt-tl-time { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.flt-tl-sub { font-size: 11.5px; font-weight: 500; color: var(--mut); margin-top: 1px; }
.flt-controls { display: flex; gap: 8px; margin-top: 6px; }
.flt-controls .btn-glass[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- inline missed-alert card (shot 06) ---------------------------------- */
.flt-miss { display: flex; flex-direction: column; gap: 10px; }
.flt-miss-eyebrow {
  font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--bad);
}
.flt-miss-title { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); }
.flt-miss-emoji { font-size: 18px; }
.flt-miss-ctx { font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--mut); }
.flt-miss-ctx b { font-weight: 700; color: var(--ink2); }
.flt-miss-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.flt-miss-actions .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
.flt-miss-row { display: flex; gap: 9px; }

/* ---- event-detail floater card ------------------------------------------- */
.flt-evd-card { padding: 13px 14px; }
.flt-evd-loading { font-size: 12px; font-weight: 500; color: var(--mut); }
.flt-evd-row { display: flex; align-items: center; gap: 11px; }
.flt-evd-tile {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--violetSoft); border: 1px solid var(--violetStroke); color: var(--violet2);
}
.flt-evd-mid { flex: 1 1 0; min-width: 0; }
.flt-evd-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.flt-evd-sub { font-size: 11px; font-weight: 500; color: var(--mut); margin-top: 1px; }
.flt-evd-card .btn-primary.sm { flex-shrink: 0; text-decoration: none; }

/* ==========================================================================
   PUNCH — time-tracking + earnings console (ARCHITECTURE §10, Backline v2).
   Skim protocol: biggest element = the answer (dollar amount / elapsed timer),
   IBM Plex Mono numerals, Record Red only for live/overrun, button text #0A0C11.
   ========================================================================== */

/* section eyebrow + segmented tabs reused across all punch views */
.pch-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 4px; }
.pch-tab {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surf2); border: 1px solid var(--line); color: var(--mut);
}
.pch-tab.active { background: var(--violetSoft); border-color: var(--violetStroke); color: var(--ink); font-weight: 700; }
.pch-tab .c { font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--surf3); border: 1px solid var(--line); color: var(--mut); }
.pch-tab.active .c { background: var(--violet); border-color: transparent; color: #0A0C11; }
.pch-tab.warn.active { background: var(--warnSoft); border-color: var(--amberStroke); color: var(--warn); }

/* KPI console (mockup .kpi4/.stat) — mono/serif numerals, tone-tinted borders */
.pch-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 2px 0 6px; }
@media (min-width: 700px) { .pch-kpis { grid-template-columns: repeat(4, 1fr); } }
.pch-stat { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; display: flex; flex-direction: column; gap: 6px; }
.pch-stat.accent { border-color: var(--violetStroke); background: linear-gradient(165deg, var(--violetSoft), var(--surf)); }
.pch-stat.live { border-color: var(--redStroke2); }
.pch-stat.warn { border-color: var(--amberStroke); }
.pch-stat.ok { border-color: var(--okStroke); }
.pch-stat .k { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--mut); }
.pch-stat.warn .k { color: var(--warn); }
.pch-stat.live .k { color: var(--bad); }
.pch-stat .v { font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1; color: var(--ink); }
.pch-stat .v .u { font-size: 14px; color: var(--mut); font-family: var(--sans); font-weight: 500; }
.pch-stat.warn .v { color: var(--warn); }
.pch-stat.live .v { color: var(--bad); }
.pch-stat .d { font-size: 10.5px; font-weight: 500; color: var(--mut); }
.pch-stat .d.ok { color: var(--ok); }

/* live-board rows (mockup .row/.lead/.right) */
.pch-row { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--hair); }
.pch-row:first-of-type { border-top: none; }
.pch-row.warn { background: rgba(245,183,78,.05); margin: 0 -10px; padding: 12px 10px; border-radius: 12px; border-top: none; }
.pch-lead { width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; position: relative; }
.pch-lead.live { background: var(--grad-btn); color: #0A0C11; }
.pch-lead.credit { background: linear-gradient(135deg,#3A2F6B,#4A3B8B); color: #fff; }
.pch-lead.payroll { background: linear-gradient(135deg,#1C4B48,#1C5C58); color: #fff; }
.pch-lead.warn { background: var(--warnSoft); border: 1px solid var(--amberStroke); color: var(--warn); }
.pch-lead .sl { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 999px; border: 2px solid var(--surf); }
.pch-lead .sl.live { background: var(--bad); }
.pch-lead .sl.warn { background: var(--warn); }
.pch-lead .sl.ok { background: var(--ok); }
.pch-body { flex: 1 1 0; min-width: 0; }
.pch-b-t { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink); }
.pch-b-s { font-size: 11.5px; font-weight: 500; color: var(--mut); margin-top: 3px; }
.pch-b-s b { color: var(--ink2); font-weight: 600; }
.pch-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 8px; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.pch-tag.credit { background: var(--violetSoft); color: var(--violet2); }
.pch-tag.payroll { background: var(--tealSoft); color: var(--teal); }
.pch-tag.flag { background: var(--warnSoft); color: var(--warn); }
.pch-right { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.pch-elapsed { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--ink); }
.pch-elapsed.warn { color: var(--warn); }
.pch-elapsed.live { color: var(--bad); }
.pch-earn { font-family: var(--mono); font-size: 11px; color: var(--mut); }

/* approval-queue cards (mockup .qcard) */
.pch-qcard { display: flex; align-items: flex-start; gap: 12px; background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; flex-wrap: wrap; }
.pch-qcard.flag { border-color: var(--amberStroke); }
.pch-qcard.credit { border-color: var(--violetStroke2); }
.pch-qmid { flex: 1 1 200px; min-width: 0; }
.pch-qname { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--ink); }
.pch-qsub { font-size: 11px; font-weight: 500; color: var(--mut); margin-top: 3px; }
.pch-qsub b { color: var(--ink2); font-weight: 600; }
.pch-qflag { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: var(--warn); margin-top: 7px; }
.pch-qflag svg { flex-shrink: 0; }
.pch-qmetrics { display: flex; gap: 14px; flex-shrink: 0; }
.pch-qm { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.pch-qm-k { font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--mut); }
.pch-qm-v { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.pch-qm-v.amt { color: var(--teal); }
.pch-qm-v.warn { color: var(--warn); }
.pch-qactions { display: flex; gap: 8px; flex-basis: 100%; margin-top: 4px; }
.pch-qactions .btn-primary, .pch-qactions .btn-glass { flex: 1 1 0; }
.pch-sec-h { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; }
.pch-sec-h .e { font-size: 15px; }
.pch-sec-h .t { font-size: 13px; font-weight: 800; letter-spacing: .3px; color: var(--ink2); }
.pch-sec-h .n { font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-left: auto; }

/* CONFIRM modal — hero dollar amount is the biggest element */
.pch-modal-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(4,5,10,.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.pch-modal { width: 100%; max-width: 400px; background: var(--bg); border: 1px solid var(--line2); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 13px; box-shadow: 0 40px 120px -40px rgba(139,108,255,.4); }
.pch-modal-eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--violet2); }
.pch-modal-title { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.pch-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 6px 0; }
.pch-hero-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--violet2); }
.pch-hero-big { font-family: var(--serif); font-size: 46px; font-weight: 600; line-height: 1; color: var(--ink); }
.pch-hero-big.credit { color: var(--violet2); }
.pch-hero-big.payroll { color: var(--teal); }
.pch-hero-sub { font-size: 12px; font-weight: 500; color: var(--mut); }
.pch-ctx { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pch-ctx-cell { background: var(--surf2); border: 1px solid var(--hair); border-radius: 11px; padding: 9px 11px; }
.pch-ctx-k { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--mut); }
.pch-ctx-v { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.pch-ctx-v.warn { color: var(--warn); }
.pch-ctx-v.sans { font-family: var(--sans); font-size: 12.5px; }
.pch-modal-btns { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.pch-modal-btns .btn-primary.full { padding: 15px; font-size: 15px; }
.pch-foot-hint { text-align: center; font-size: 10.5px; font-weight: 500; color: var(--dim); }
.pch-foot-hint b { color: var(--mut); }

/* start-time change cards — the third request kind, added 2026-09-02.
   Blue is this cluster's one new voice and it is the palette's own --blue, unused
   until now: violet is every control, teal is confirmed money, amber is a guard
   trip and red is a live shift. A request that MOVES money needed a colour that
   does not already mean one of those. Strokes are mixed off it the way
   parity-comms.css mixes .pc-bubble.mine, rather than adding a --blueStroke that
   would have exactly two users. */
.pch-qcard.corr { border-color: color-mix(in srgb, var(--blue) 30%, transparent); background: color-mix(in srgb, var(--blue) 4%, var(--surf)); }
.pch-lead.corr { background: linear-gradient(135deg, #2B3E7A, #35509E); color: #fff; }
.pch-tag.corr { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
/* The claim itself: the one line on the card a manager checks against memory. */
.pch-corr-line {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.2px;
  margin-top: 3px; line-height: 1.35;
}
.pch-corr-owed { font-size: 11.5px; font-weight: 600; color: var(--blue); margin-top: 5px; }
.pch-corr-foot { flex-basis: 100%; font-size: 10.5px; font-weight: 500; color: var(--dim); line-height: 1.45; margin-top: 2px; }
/* 44px on the two decisions. These are not the queue's incidental controls. */
.pch-corr-actions .btn-primary, .pch-corr-actions .btn-glass { min-height: 44px; }
.pch-hero-big.corr { color: var(--blue); font-variant-numeric: tabular-nums; }

/* the standing Approvals row's count */
.appr-badge {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 700; letter-spacing: -0.2px;
  padding: 3px 9px; border-radius: 999px; flex-shrink: 0;
  background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue);
}
.list-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* the Today banner — the ONLY place a manager who is not already on the queue
   finds out something is waiting, since nothing pushes to this browser */
.pc-rail.corr::before { background: var(--blue); }
.corr-banner { border-color: color-mix(in srgb, var(--blue) 26%, transparent); }
.corr-banner-t { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.corr-banner-s { font-size: 11px; font-weight: 500; color: var(--mut); margin-top: 3px; line-height: 1.4; }

/* The tabs became real buttons when the queue got a keyboard-reachable one.
   They were divs with an onclick, which no focus ring can rescue. */
.pch-tab { font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.pch-tab:focus-visible, .pch-corr-actions .btn-primary:focus-visible,
.pch-corr-actions .btn-glass:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

/* guard math strip (replayable, from time_clock_events.meta) */
.pch-guard { background: var(--surf2); border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; }
.pch-guard-h { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--mut); }
.pch-guard-line { font-family: var(--mono); font-size: 11px; color: var(--ink2); margin-top: 6px; display: flex; justify-content: space-between; gap: 10px; }
.pch-guard-line b { color: var(--teal); font-weight: 600; }
.pch-guard-line .bad { color: var(--warn); }

/* payroll run + rates: simple table rows */
.pch-prow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--hair); }
.pch-prow:first-of-type { border-top: none; }
.pch-prow-mid { flex: 1 1 0; min-width: 0; }
.pch-prow-t { font-size: 13px; font-weight: 700; color: var(--ink); }
.pch-prow-s { font-size: 10.5px; font-weight: 500; color: var(--mut); margin-top: 1px; }
.pch-prow-nums { display: flex; gap: 16px; align-items: baseline; flex-shrink: 0; }
.pch-num { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink2); text-align: right; }
.pch-num.amt { color: var(--teal); font-size: 14px; }
.pch-num.credit { color: var(--violet2); }

/* verdict banner (reconciliation) — biggest element */
.pch-verdict { display: flex; align-items: center; gap: 16px; background: linear-gradient(150deg, var(--okSoft), var(--surf)); border: 1px solid var(--okStroke); border-radius: 18px; padding: 18px 20px; }
.pch-verdict.warn { background: linear-gradient(150deg, var(--warnSoft), var(--surf)); border-color: var(--amberStroke); }
.pch-verdict-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; background: var(--okSoft); border: 1px solid var(--okStroke); color: var(--ok); display: flex; align-items: center; justify-content: center; }
.pch-verdict.warn .pch-verdict-ic { background: var(--warnSoft); border-color: var(--amberStroke); color: var(--warn); }
.pch-verdict-mid { flex: 1 1 0; min-width: 0; }
.pch-verdict-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ok); }
.pch-verdict.warn .pch-verdict-eyebrow { color: var(--warn); }
.pch-verdict-title { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.12; color: var(--ink); margin-top: 3px; }
.pch-verdict-sub { font-size: 11.5px; font-weight: 500; color: var(--mut); margin-top: 5px; line-height: 1.45; }
.pch-verdict-sub b { color: var(--ink2); font-weight: 600; }
.pch-verdict-right { flex-shrink: 0; text-align: right; }
.pch-verdict-big { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--ok); }
.pch-verdict.warn .pch-verdict-big { color: var(--warn); }
.pch-verdict-big-k { font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--mut); margin-top: 2px; }

/* tie-out equation rows (reconciliation split) */
.pch-eq { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.pch-eq-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 11.5px; }
.pch-eq-row:last-child { border-bottom: none; }
.pch-eq-row.total { padding-top: 10px; }
.pch-eq-k { color: var(--mut); font-weight: 500; }
.pch-eq-v { font-family: var(--mono); font-weight: 600; color: var(--ink2); }
.pch-eq-v.ok { color: var(--ok); }
.pch-eq-v.warn { color: var(--warn); }

/* live "now" chip in headers */
.pch-live-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--badSoft); border: 1px solid var(--redStroke); border-radius: 999px; padding: 5px 11px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--bad); letter-spacing: .4px; }
.pch-live-chip .p { width: 7px; height: 7px; border-radius: 999px; background: var(--bad); animation: live-throb 1.6s ease-out infinite; }

/* soft "not MOD" gate note */
.pch-gate-note { display: flex; align-items: flex-start; gap: 9px; background: var(--surf2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; font-size: 11.5px; font-weight: 500; color: var(--ink2); }
.pch-gate-note svg { color: var(--violet2); flex-shrink: 0; margin-top: 1px; }

/* export success + download chip */
.pch-chip-ok { display: inline-flex; align-items: center; gap: 6px; background: var(--okSoft); border: 1px solid var(--okStroke); border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 700; color: var(--ok); }

/* inline field for rate / period entry */
.pch-field { display: flex; flex-direction: column; gap: 6px; }
.pch-field-label { font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--mut); }
.pch-input { width: 100%; background: var(--surf2); border: 1px solid var(--line2); border-radius: 11px; padding: 11px 13px; font-size: 14px; font-family: var(--mono); color: var(--ink); }
.pch-input:focus { outline: none; border-color: var(--violetStroke); }
.pch-input-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   FLOOR NOTES (studio observations) — catch/kudos log. #/floornotes
   ═══════════════════════════════════════════════════════════════════════════ */
.fn-intro { font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--mut); margin-top: 2px; }
.fn-date-chip { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.5px; color: var(--dim); }

/* KPI row */
.fn-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fn-kpi { background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; }
.fn-kpi.warn   { border-color: var(--amberStroke); }
.fn-kpi.ok     { border-color: var(--okStroke); }
.fn-kpi.accent { border-color: var(--redStroke); }
.fn-kpi-key { font-size: 10.5px; font-weight: 700; color: var(--mut); letter-spacing: 0.3px; }
.fn-kpi-val { font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1; color: var(--ink); }
.fn-kpi.warn   .fn-kpi-val { color: var(--warn); }
.fn-kpi.ok     .fn-kpi-val { color: var(--ok); }
.fn-kpi.accent .fn-kpi-val { color: var(--bad); }
.fn-kpi-sub { font-size: 10px; font-weight: 500; color: var(--dim); }

/* FILTER chips — All · ⚠️ Catches · 👏 Kudos · 🔴 Open · ✅ Resolved */
.fn-filter-row { display: flex; gap: 7px; flex-wrap: wrap; }
.fn-filter {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surf2); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--ink2);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.fn-filter:hover { border-color: var(--violetStroke); }
.fn-filter-emoji { font-size: 12.5px; line-height: 1; }
.fn-filter-count {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  color: var(--mut); background: var(--surf3); border-radius: 999px; padding: 1px 6px;
}
/* active = Backline v2 violet accent (matches .chip.active) */
.fn-filter.on { background: var(--violetSoft); border-color: var(--violetStroke); color: var(--ink); }
.fn-filter.on .fn-filter-count { color: var(--violet2); background: transparent; }
/* kind/status chips carry their own accent when active so the legend reads at a glance */
.fn-filter.catch.on    { background: var(--warnSoft); border-color: var(--amberStroke); color: var(--warn); }
.fn-filter.catch.on .fn-filter-count { color: var(--warn); }
.fn-filter.kudos.on    { background: var(--okSoft);   border-color: var(--okStroke);   color: var(--ok); }
.fn-filter.kudos.on .fn-filter-count { color: var(--ok); }
.fn-filter.open.on     { background: var(--badSoft);  border-color: var(--redStroke);  color: var(--bad); }
.fn-filter.open.on .fn-filter-count { color: var(--bad); }
.fn-filter.resolved.on { background: var(--okSoft);   border-color: var(--okStroke);   color: var(--ok); }
.fn-filter.resolved.on .fn-filter-count { color: var(--ok); }

/* CAPTURE form */
.fn-cap-wrap { display: flex; flex-direction: column; gap: 8px; }
.fn-sub-label { font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--mut); }
.fn-sub-label.head { font-size: 11px; letter-spacing: 1.3px; color: var(--violet2); }
.fn-capture { display: flex; flex-direction: column; gap: 12px; padding: 14px; }

.fn-seg { display: flex; gap: 6px; background: var(--surf2); border: 1px solid var(--line); border-radius: 13px; padding: 4px; }
.fn-seg-btn { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 0; border-radius: 10px; background: transparent; border: 1px solid transparent; font-size: 13px; font-weight: 700; color: var(--mut); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.fn-seg-emoji { font-size: 14px; }
.fn-seg-btn.catch.on { background: var(--warnSoft); border-color: var(--amberStroke); color: var(--warn); }
.fn-seg-btn.kudos.on { background: var(--okSoft); border-color: var(--okStroke); color: var(--ok); }

.fn-textarea { width: 100%; background: var(--surf2); border: 1px solid var(--line2); border-radius: 12px; padding: 11px 13px; font-size: 14px; font-family: var(--sans); color: var(--ink); line-height: 1.4; resize: vertical; min-height: 76px; }
.fn-textarea::placeholder { color: var(--dim); }
.fn-textarea:focus { outline: none; border-color: var(--violetStroke); }

.fn-chip-row { display: flex; gap: 7px; flex-wrap: wrap; }
/* Fast-tag chips during a live floor catch — min 44px tap target (padding grows
   the box; the pill stays visually the same weight). */
.fn-pick { display: inline-flex; align-items: center; min-height: 44px; background: var(--surf2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.fn-pick:hover { border-color: var(--violetStroke); }
.fn-pick.on { background: var(--violetSoft); border-color: var(--violetStroke); color: var(--ink); }

.fn-person { display: inline-flex; align-items: center; min-height: 44px; gap: 7px; background: var(--surf2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px 6px 6px; cursor: pointer; }
.fn-person:hover { border-color: var(--violetStroke); }
.fn-person.on { background: var(--violetSoft); border-color: var(--violetStroke); }
.fn-person-name { font-size: 12px; font-weight: 600; color: var(--ink2); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-person.on .fn-person-name { color: var(--ink); }
.fn-tag-loading { font-size: 11.5px; font-weight: 500; color: var(--dim); }

/* Disabled primary buttons must NOT read as a lit, tappable accent. Desaturate
   the violet→teal gradient (not just dim it) so the affordance clearly reads
   inert until the body text makes it actionable. */
.fn-submit[disabled] { opacity: 0.42; filter: grayscale(0.85); cursor: not-allowed; }
.flt-sticky .btn-primary[disabled],
.flt-miss-actions .btn-primary[disabled] { filter: grayscale(0.85); }

.fn-warn, .fn-ok { display: flex; align-items: center; gap: 8px; border-radius: 11px; padding: 9px 12px; font-size: 12px; font-weight: 600; line-height: 1.35; }
.fn-warn { border: 1px solid var(--amberStroke); background: var(--warnSoft); color: var(--warn); }
.fn-warn svg { color: var(--warn); flex-shrink: 0; }
.fn-ok { border: 1px solid var(--okStroke); background: var(--okSoft); color: var(--ok); }
.fn-ok svg { color: var(--ok); flex-shrink: 0; }

/* NOTE cards — catches carry work → left accent bar + amber ring; kudos softer;
   resolved dims to signal "handled, nothing to do". */
.fn-note { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 13px 14px 13px 16px; }
.fn-note.catch { border-color: var(--amberStroke); border-left: 3px solid var(--warn); padding-left: 14px; }
.fn-note.kudos { border-color: var(--okStroke); border-left: 3px solid var(--okStroke); padding-left: 14px; }
/* an OPEN catch is the loudest card on the floor — it still needs a hand */
.fn-note.catch:not(.resolved) { background: var(--warnSoft); }
.fn-note.resolved { opacity: 0.6; }
.fn-note.resolved.catch { border-left-color: var(--line2); background: transparent; }
.fn-note-head { display: flex; align-items: center; gap: 8px; }
.fn-note-emoji { font-size: 15px; }
.fn-note-kind { font-size: 12px; font-weight: 800; letter-spacing: 0.4px; color: var(--ink2); }
.fn-note.catch .fn-note-kind { color: var(--warn); }
.fn-note.kudos .fn-note-kind { color: var(--ok); }
.fn-note-area { font-size: 11px; font-weight: 600; color: var(--mut); }
.fn-note-spacer { flex: 1 1 0; }
.fn-note-body { font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.42; }
.fn-note-subject { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--ink2); }
.fn-note-subject b { color: var(--ink); font-weight: 700; }
.fn-note-meta { font-size: 10.5px; font-weight: 500; color: var(--dim); }
.fn-note-actions { display: flex; gap: 8px; margin-top: 2px; }
.fn-act { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; font-size: 12px; }
.fn-act[disabled] { opacity: 0.5; cursor: not-allowed; }
.fn-note-done { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ok); }
.fn-note-done svg { color: var(--ok); }

/* YESTERDAY'S DIGEST */
.fn-digest-head { display: flex; align-items: center; gap: 11px; background: var(--surf); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.fn-digest-head:hover { border-color: var(--violetStroke); }
.fn-digest-emoji { font-size: 18px; }
.fn-digest-mid { flex: 1 1 0; min-width: 0; }
.fn-digest-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fn-digest-sub { font-size: 10.5px; font-weight: 500; color: var(--mut); margin-top: 1px; }
.fn-digest-head .chevron { color: var(--dim); flex-shrink: 0; }
.fn-digest-body { display: flex; flex-direction: column; gap: 9px; padding: 12px 4px 2px; }
.fn-digest-counts { display: flex; gap: 14px; flex-wrap: wrap; }
.fn-dc { font-size: 12px; font-weight: 500; color: var(--ink2); }
.fn-dc b { font-family: var(--serif); font-weight: 600; color: var(--ink); }
.fn-dc.sent { color: var(--ok); font-weight: 600; }
.fn-dc.pending { color: var(--warn); font-weight: 600; }
.fn-digest-empty { font-size: 12px; font-weight: 500; color: var(--dim); padding: 4px 0; }
.fn-drow { display: flex; align-items: flex-start; gap: 10px; background: var(--surf); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.fn-drow-emoji { font-size: 14px; line-height: 1.4; }
.fn-drow-mid { flex: 1 1 0; min-width: 0; }
.fn-drow-body { font-size: 12.5px; font-weight: 500; color: var(--ink); line-height: 1.38; }
.fn-drow-meta { font-size: 10px; font-weight: 500; color: var(--dim); margin-top: 2px; }

/* ============================================================================
   ACCESSIBILITY FLOOR (live QA 2026-09-02)
   Three things the app was missing on a phone. Kept in one block, last in the
   file, so nothing above has to be edited and the rules win on cascade order
   where specificity ties.
   ============================================================================ */

/* --- 1. focus-visible ------------------------------------------------------
   backline.css carried two :focus rules in the whole file and set
   `outline: none` on the base inputs with nothing in its place, so a keyboard
   user had no idea where they were. `.input input:focus-visible` is spelled out
   because it has to out-specify `.input input { outline: none }`. */
button:focus-visible,
a[href]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role='button']:focus-visible,
[tabindex]:focus-visible,
.input input:focus-visible,
.omni input:focus-visible {
  outline: 2px solid var(--violet2);
  outline-offset: 2px;
  border-radius: 10px;
}
/* the field is the visual unit, so tabbing into the bare input lights the shell */
.input:focus-within { border-color: var(--violetStroke); }

/* --- 2. 16px inputs on touch ----------------------------------------------
   Android Chrome and iOS Safari zoom the page when a focused field is under
   16px. That zoom was previously masked by `user-scalable=no`, which was itself
   the worse bug. 13.5px is also just small to type an email into on a phone.
   !important because every one of these is set on a more specific selector
   (.input input, .ask-composer input, .pt-input, …) scattered through five
   stylesheets and three view modules. */
@media (pointer: coarse) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* --- 3. 44px touch targets -------------------------------------------------
   The painted size stays exactly as designed; an invisible centered ::after
   grows the HIT area to 44x44. Changing the real box would have re-flowed every
   filter row and segmented control in the app. */
@media (pointer: coarse) {
  .chip,
  .ask-composer .send,
  .bk-tk-row,
  a.pt-foot,
  .segmented .seg,
  .btn-primary.sm,
  .btn-warn,
  .btn-surf,
  .btn-glass,
  .gate-eye,
  .omni .send,
  .mic-btn,
  .section-header .sh-link,
  .pt-btn.sm,
  .pt-chip,
  .pc-tap,
  .fn-filter,
  .fn-seg-btn,
  .lg-seg-item,
  .pch-tab,
  .signout-row {
    position: relative;
  }
  .chip::after,
  .ask-composer .send::after,
  .bk-tk-row::after,
  a.pt-foot::after,
  .segmented .seg::after,
  .btn-primary.sm::after,
  .btn-warn::after,
  .btn-surf::after,
  .btn-glass::after,
  .gate-eye::after,
  .omni .send::after,
  .mic-btn::after,
  .section-header .sh-link::after,
  .pt-btn.sm::after,
  .pt-chip::after,
  .pc-tap::after,
  .fn-filter::after,
  .fn-seg-btn::after,
  .lg-seg-item::after,
  .pch-tab::after,
  .signout-row::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
  }
}

/* --- 4. the 24px floor, pointer-agnostic -----------------------------------
   Two targets sit under the desktop minimum as well, so they are raised for
   every pointer rather than only for touch. The W-9 tick is !important because
   parity-time.css sizes it from a later sheet at equal specificity. */
input[type='checkbox'] {
  width: 24px !important;
  height: 24px !important;
}
.section-header .sh-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* --- TIME FIX · both ends (2026-09-08) -------------------------------------
   A correction now moves the clock-in, the clock-out or both, so the card holds
   TWO before/after lines instead of one. The unchanged end is dimmed rather than
   dropped: a manager who sees one line cannot tell "they left it alone" from
   "we do not know it", and those are different decisions about somebody's pay.
   No new colour — this is the same --blue register the one-ended card already
   owns. */
.pch-corr-ends { display: flex; flex-direction: column; gap: 4px; margin-top: 3px; }
.pch-corr-line.same { color: var(--mut); font-weight: 500; }
/* "Clock in 4:12 PM → 3:47 PM" is ONE phrase and never breaks: a wrap that drops
   the PM onto the next line is the card failing at the only thing it is for. It
   holds one line at 412px, and scrolls sideways rather than folding if a longer
   day label ever pushes it. */
.pch-corr-end { display: block; white-space: nowrap; font-size: 13px; }
.pch-corr-ends > .pch-corr-line { overflow-x: auto; }
.pch-corr-move {
  font-family: var(--sans); font-variant-numeric: normal;
  font-size: 11px; font-weight: 600; color: var(--blue);
  display: block; margin-top: 1px; white-space: nowrap;
}
.pch-corr-hours {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 11.5px; font-weight: 600; color: var(--ink2);
  margin-top: 5px; letter-spacing: -0.2px;
}
/* The requester's own words, quoted as text and never as markup. */
.pch-corr-note {
  display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap;
  margin-top: 7px; padding: 8px 10px; border-radius: 10px;
  background: var(--surf2); border: 1px solid var(--hair);
  font-size: 12px; font-weight: 500; color: var(--ink2); line-height: 1.45;
}
.pch-corr-note-lbl {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--mut);
}
/* Money that is already posted. A fact, in the warning register, never a block. */
.pch-corr-repost {
  margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--warn);
  line-height: 1.45;
}