/* ══════════════════════════════════════════════════════════════
   STRATUM — DIRECTION B
   Light architectural · top-nav · map-first
   Complete design token + component system
   Claude Code handoff reference: see HANDOFF.md
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:          #f4f3ef;
  --surface:     #ffffff;
  --surface-2:   #f0efe9;
  --surface-3:   #e8e7e0;

  /* Rules */
  --border:      #e3e2db;
  --border-h:    #c5c4bc;
  --border-s:    #a0a098;
  --btn-edge:    #8a897f;   /* ≥3:1 vs --bg : WCAG 1.4.11 button boundary (was --border 1.17:1) */

  /* Text */
  --text:        #111110;
  --text-2:      #4c4c47;
  --text-3:      #6a6a64;   /* 2026-06-17: was #6f6f68 (4.39:1 on --surface-2) — AA; LV-19/29/40 */

  /* Brand — ink primary */
  --primary:     #111110;
  --primary-fg:  #ffffff;
  --primary-h:   #2a2a28;

  /* Accent — citron, used sparingly */
  --accent:      #c4dd1a;
  --accent-h:    #a8be15;
  --accent-soft: #f0f5c6;
  --accent-soft-fg: #556307;
  --accent-fg:   #111110;

  /* Semantic */
  --ok:          #3c780a;
  --ok-soft-fg:   #2f6008; /* --ok on --ok-soft is 4.48:1 in light */
  --ok-soft:     #dff0c4;
  --warn:        #98590a;
  --warn-soft:   #faeabc;
  --bad:         #8b1818;
  --bad-soft:    #f5d4d4;
  --info:        #1a5a96;
  --info-soft:   #d4e8f8;

  /* Type */
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Scale */
  --t-2xs: 10px;
  --t-xs:  11.5px;
  --t-sm:  12.5px;
  --t-md:  13.5px;
  --t-lg:  15px;
  --t-xl:  18px;
  --t-2xl: 22px;
  --t-3xl: 28px;
  --t-4xl: 36px;

  /* Radius */
  --r-xs:   3px;
  --r-sm:   5px;
  --r:      8px;
  --r-lg:   12px;
  --r-pill: 999px;

  /* Spacing */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 40px;
  --s9: 52px;  --s10: 68px;

  /* Layout */
  --nav-h:     52px;
  --projbar-h: 44px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(17,17,16,0.06);
  --sh-md: 0 4px 16px -4px rgba(17,17,16,0.11);
  --sh-lg: 0 16px 48px -12px rgba(17,17,16,0.16);

  /* Motion */
  --ease:     cubic-bezier(0.16,1,0.3,1);
  --ease-io:  cubic-bezier(0.65,0,0.35,1);
  --fast:     120ms;
  --mid:      200ms;
  --slow:     300ms;
}

[data-theme="dark"] {
  --bg:        #0d0d0b;
  --surface:   #161614;
  --surface-2: #1d1d1a;
  --surface-3: #262622;
  --border:    #2a2a26;
  --border-h:  #3c3c36;
  --border-s:  #555550;
  --btn-edge:  #6a6a61;   /* ≥3:1 vs dark --bg : WCAG 1.4.11 button boundary */
  --text:      #f0f0ea;
  --text-2:    #aeaea5;
  --text-3:    #8c8c83;
  --primary:   #f0f0ea;
  --primary-fg:#0d0d0b;
  --primary-h: #ffffff;
  --accent:    #d2eb3a;
  --accent-h:  #e3f56e;
  --accent-soft:#2c3608;
  --accent-soft-fg:#d2eb3a;
  --accent-fg: #0d0d0b;
  --ok:        #84cc16;
  --ok-soft-fg: #84cc16;  --ok-soft:   #1a2c08;
  --warn:      #d4a017; --warn-soft: #2c2208;
  --bad:       #ef4444; --bad-soft:  #280808;
  --info:      #60a5fa; --info-soft: #0a1e38;
}

/* ── 2. Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--sans); font-size: var(--t-md); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
body { margin: 0; line-height: 1.5; font-feature-settings: "ss01" 1; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--text); text-decoration: none; }
* { font-variant-numeric: tabular-nums; } /* override below for prose */
p, h1, h2, h3, h4, h5, h6 { font-variant-numeric: normal; }

/* ── 3. Typography utilities ───────────────────────────────────── */
.t-label { font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.t-mono  { font-family: var(--mono); font-size: var(--t-sm); letter-spacing: 0.02em; }
.t-dim   { color: var(--text-2); }
.t-faint { color: var(--text-3); }
.t-ok    { color: var(--ok); }
.t-warn  { color: var(--warn); }
.t-bad   { color: var(--bad); }
.t-accent{ color: var(--accent-h); }

/* ── 4. Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px;
  font-family: var(--sans); font-size: var(--t-md); font-weight: 500; line-height: 1;
  border: 1px solid transparent; border-radius: var(--r); cursor: pointer;
  white-space: nowrap; user-select: none;
  box-shadow: var(--sh-sm); /* resting elevation : kills the "flat / no affordance" feel (was: none) */
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:active:not(:disabled) { opacity: 0.82; }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--t-sm); border-radius: var(--r-sm); }
.btn-lg { height: 42px; padding: 0 20px; font-size: var(--t-lg); }

.btn-primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-h); border-color: var(--primary-h); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--btn-edge); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--btn-edge); }

.btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border-s); box-shadow: none; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); border-color: var(--btn-edge); }

.btn-warn { background: var(--warn); color: #fff; border-color: var(--warn); }
.btn-warn:hover:not(:disabled) { filter: brightness(0.9); }
.btn-danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn-danger:hover:not(:disabled) { filter: brightness(0.9); }

.btn-icon { width: 34px; height: 34px; padding: 0; border: 1px solid var(--btn-edge); border-radius: var(--r-sm); background: var(--surface); color: var(--text-2); display: inline-grid; place-items: center; }
.btn-icon:hover:not(:disabled) { background: var(--surface-2); border-color: var(--btn-edge); color: var(--text); }
.btn-icon svg { width: 16px; height: 16px; }

/* ── 5. Badges + status ────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
  /* line-height ported from the deleted platform.css .badge base (was the
     only property platform contributed that this winner didn't override). */
  line-height: 1.2;
}
/* badge-ok light text is darkened from var(--ok) #3c780a (4.48:1 — fails AA at the
   9.5px badge size) to #2f6008 (6.22:1) so it clears AA; this preserves the contrast
   margin the consolidated-away platform .badge-success carried (was 6.73:1). Dark mode
   keeps var(--ok) #84cc16 (7.55:1) via the override below. (badge consolidation 2026-06-09) */
.badge-ok    { background: var(--ok-soft);   color: #2f6008;     border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.badge-warn  { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.badge-bad   { background: var(--bad-soft);  color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
/* badge-accent light text darkened to #556307 (5.85:1 on --accent-soft #f0f5c6) —
   the lime color-mix was 2.85:1, failing AA at the 9.5px badge size (F-19). Dark
   keeps the lighter mix (6.73:1 on the dark olive tint) via the override below. */
.badge-accent{ background: var(--accent-soft); color: #556307; border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.badge-ghost { background: transparent; color: var(--text-3); border-color: var(--border); }
/* Dark mode: restore the brand greens — the light-mode darkenings above (--ok #2f6008,
   accent #556307) are only correct against the light pale tints. */
[data-theme="dark"] .badge-ok { color: var(--ok); }
[data-theme="dark"] .badge-accent { color: color-mix(in srgb, var(--accent-h) 80%, black); }

.live-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.07em;
  /* NOTE (F-19): light text var(--ok) #3c780a on --ok-soft is 4.48:1 — a 0.02 miss
     of AA. NOT fixed here: the .project-home-head contextual rule sets its own color,
     so a base-only bump would make page-title vs project-home pills inconsistent.
     Fold the contrast tune into the deferred live-pill base reconciliation (doc-16). */
  color: var(--ok-soft-fg); padding: 2px 8px 2px 6px;
  border: 1px solid var(--ok); border-radius: var(--r-pill);
  background: var(--ok-soft);
}
.live-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); animation: pulse 2s ease-in-out infinite;
}
/* .live-pill.capturing removed 2026-06-09 — never applied; the live "streaming"
   state uses platform.css .live-pill-btn.streaming (live-stream.ts toggles
   "streaming", not "capturing"). The platform.css/stratum-b .live-pill base
   duplication is a known deferred reconciliation — see docs/ux-review/16. */
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.85)} }
@media (prefers-reduced-motion: reduce) { .live-pill-dot { animation: none; } }

/* flex-shrink:0 ported from the deleted platform.css .status-dot base (the only
   property platform contributed that this winner didn't set). Consolidated 2026-06-09. */
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.status-dot.ok   { background: var(--ok); }
.status-dot.warn { background: var(--warn); }
.status-dot.bad  { background: var(--bad); }

/* ── 6. Form controls ──────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.input, .select, .textarea {
  height: 38px; padding: 0 12px; width: 100%;
  font: inherit; font-size: var(--t-md); color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); outline: 0;
  transition: border-color var(--fast);
}
.input:hover, .select:hover { border-color: var(--border-h); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); }
.textarea { height: auto; padding: 10px 12px; resize: vertical; }

/* ── 7. Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); transition: border-color var(--fast);
}
.card-click { cursor: pointer; }
.card-click:hover { border-color: var(--border-h); }
.card-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.card-title { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2); }
.card-meta  { font-family: var(--mono); font-size: var(--t-2xs); color: var(--text-3); letter-spacing: 0.04em; }
.card-body  { padding: 16px 18px; }

/* Risk-banded card */
.card-risk { display: flex; overflow: hidden; }
.card-risk-strip { width: 3px; flex-shrink: 0; background: var(--text-3); }
.card-risk.ok   .card-risk-strip { background: var(--ok); }
.card-risk.warn .card-risk-strip { background: var(--warn); }
.card-risk.bad  .card-risk-strip { background: var(--bad); }
.card-risk-body { flex: 1; }

/* ── 8. App shell ──────────────────────────────────────────────── */
html, body { height: 100%; overflow-x: hidden; }
#root { min-height: 100vh; }

/* ── 9. Global nav ─────────────────────────────────────────────── */
.nav {
  height: var(--nav-h); position: sticky; top: 0; z-index: 200;
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px; gap: 0;
}
.nav-brand {
  display: flex; align-items: center; gap: 8px; margin-right: 28px; min-height: 24px;   /* WCAG 2.5.8 target size — was 22.4px tall (target-size family) */
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--text);
}
.nav-brand img { width: 20px; height: 20px; }

.nav-links { display: flex; gap: 2px; }
.nav-link {
  padding: 6px 13px; border-radius: var(--r-sm);
  font-size: var(--t-md); color: var(--text-2);
  cursor: pointer; transition: background var(--fast), color var(--fast);
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active { color: var(--text); font-weight: 500; }

.nav-spacer { flex: 1; }

.nav-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 7px 12px; width: 236px;
  cursor: pointer; color: var(--text-3); font-size: var(--t-sm);
  transition: border-color var(--fast);
}
.nav-search:hover { border-color: var(--border-h); }
.nav-search span { flex: 1; font-family: var(--sans); }
.nav-kbd {
  font-family: var(--mono); font-size: 9.5px;
  padding: 2px 5px; border: 1px solid var(--border);
  border-radius: 3px; color: var(--text-3);
}

/* ── 10. Project context bar ───────────────────────────────────── */
.projbar {
  height: var(--projbar-h);
  position: sticky; top: var(--nav-h); z-index: 190;
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px;
}
.projbar-back {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: 0.04em; color: var(--text-3);
  cursor: pointer; padding: 5px 8px; border-radius: var(--r-sm);
  transition: color var(--fast), background var(--fast);
}
.projbar-back:hover { color: var(--text); background: var(--surface-2); }
.projbar-vsep { width: 1px; height: 16px; background: var(--border); margin: 0 12px; flex-shrink: 0; }
.projbar-name { font-size: var(--t-md); font-weight: 500; color: var(--text); margin-right: 18px; white-space: nowrap; }
/* W3 station-depth breadcrumb (NC-05, 2026-07-13): "‹ Dashboard / Project /
   Station" in the projbar. Ancestor segments are links (project → project
   home); the station segment is the current location. The trailing segment
   keeps .projbar-name's 18px gap before the tab strip; the mid (project)
   segment zeroes it so the slashes space evenly. */
.projbar-crumb-sep { color: var(--text-3); margin: 0 10px; flex-shrink: 0; font-size: var(--t-sm); }
a.projbar-crumb-link { color: var(--text-2); text-decoration: none; cursor: pointer; transition: color var(--fast); }
a.projbar-crumb-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.projbar-crumb-mid { margin-right: 0; }
.projbar-tabs { display: flex; height: 100%; }
.projbar-tab {
  display: flex; align-items: center; padding: 0 13px;
  font-size: var(--t-sm); color: var(--text-2);
  cursor: pointer; border-bottom: 2px solid transparent; border-top: 0; border-left: 0; border-right: 0;
  background: transparent; height: 100%;
  /* The .projbar-tabs-scroll wrapper (shell/stratum.ts) is unstyled and
     collapses to content height, so height:100% no longer inherits the 44px
     bar — buttons rendered ~20.8px tall. Floor the block size so the tap
     target clears the AA 24px minimum without disturbing the dense bar (the
     .projbar host is 44px, align-items:center, so 24px tabs stay centred).
     WCAG 2.5.8 Target Size RISK; LV-30 / LV-37. */
  min-height: 24px;
  font-family: var(--sans);
  transition: color var(--fast), border-color var(--fast);
}
.projbar-tab:hover { color: var(--text); }
/* Active tab — thicker underline + 600 weight so it reads at a glance vs hover.
   (Audit 2026-05-27 P2-L4: previous 2px / 500 had insufficient contrast against inactive.) */
.projbar-tab.active { color: var(--text); border-bottom-width: 3px; border-bottom-color: var(--text); font-weight: 600; }
.projbar-tab.locked { color: var(--text-3); cursor: not-allowed; }
.projbar-actions { margin-left: auto; display: flex; gap: 6px; }

/* ── 11. Page content ──────────────────────────────────────────── */
.page { padding: var(--s7) 28px 80px; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s7); }
.page-title { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--text); line-height: 1.1; }
.page-meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-3); letter-spacing: 0.04em; margin-left: auto; }

.section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.section-label { font-family: var(--mono); font-size: var(--t-2xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.section-count { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-3); }
.section-rule  { flex: 1; height: 1px; background: var(--border); }
.section-actions { margin-left: auto; display: flex; gap: 6px; }

/* ── 12. KPI strip ─────────────────────────────────────────────── */
/* FND-B05: flex-wrap so trailing tile isn't clipped on phone/tablet.
   FND-B04/FND-PERF02: min-height reserves space against async fill (CLS fix). */
.kpi-strip { display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; margin-bottom: var(--s7); min-height: 84px; }
.kpi-tile { flex: 1; padding: 22px 22px 18px; position: relative; }
.kpi-tile + .kpi-tile { border-left: 1px solid var(--border); }
.kpi-tile::before {
  content: ""; position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px; border-radius: 0 2px 2px 0; background: transparent;
}
.kpi-tile.ok::before   { background: var(--ok); }
.kpi-tile.warn::before { background: var(--warn); }
.kpi-tile.bad::before  { background: var(--bad); }
.kpi-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-3); margin-bottom: 9px; }
.kpi-val   { font-family: var(--mono); font-size: 2.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--text); margin-bottom: 5px; }
.kpi-tile.warn .kpi-val { color: var(--warn); }
.kpi-tile.bad  .kpi-val { color: var(--bad); }
.kpi-sub   { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-3); }

/* Anna's-week F-ALERTS1: KPI tiles can become buttons. Defang the native
 * button look so they read identically to the static .kpi-tile, but add
 * hover + focus affordance so the user knows they're interactive. */
button.kpi-tile-clickable {
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
button.kpi-tile-clickable:hover:not(:disabled) {
  background: var(--surface-2, rgba(0,0,0,0.03));
}
button.kpi-tile-clickable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
button.kpi-tile-clickable:disabled {
  cursor: default;
  opacity: 0.85;
}

/* G-15 (Anna's-week full-pass audit): activity-list briefly flashes
 * when the Issues KPI tile is clicked, so the user's eye lands on
 * the feed instead of having to hunt for the failed events. Respects
 * prefers-reduced-motion. */
.activity-list-flash {
  animation: activity-list-flash-anim 2.4s ease-out;
  box-shadow: 0 0 0 2px var(--warn, #d4943f);
  border-radius: var(--r);
}
@keyframes activity-list-flash-anim {
  0%   { box-shadow: 0 0 0 0 var(--warn, #d4943f); }
  20%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--warn, #d4943f) 30%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .activity-list-flash { animation: none; }
}

/* Mobile: 5 tiles in flex:1 squeeze the .kpi-val font (2.25rem) to wrap
   "1 / 5" across 3 lines at 375px. Switch to 2-col grid and scale the
   value font so trailing tiles still fit without breaking numerics.
   (Audit 2026-05-27 P1-2.) */
@media (max-width: 600px) {
  .kpi-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .kpi-tile {
    flex: none;
    padding: 16px 16px 14px;
    border-top: 1px solid var(--border);
  }
  /* The first row's two tiles shouldn't have a top border. */
  .kpi-tile:nth-child(-n+2) { border-top: 0; }
  /* Reset the desktop "every tile after the first has a left border" so
     only every-other tile has a left divider on the 2-col grid. */
  .kpi-tile + .kpi-tile { border-left: 0; }
  .kpi-tile:nth-child(odd) { border-right: 1px solid var(--border); }
  .kpi-tile:nth-child(odd) + .kpi-tile { border-left: 0; }
  .kpi-val { font-size: 1.6rem; }
}

/* ── 13. Map hero ──────────────────────────────────────────────── */
/* Doubled from 340px (2026-05-27 facelift) — CEO ask for a hero map. */
.map-hero { position: relative; width: 100%; height: 640px; background: var(--surface-2); overflow: hidden; }
@media (max-width: 880px) { .map-hero { height: 50vh; min-height: 360px; } }
.map-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 38px 38px; opacity: 0.6;
}
.map-wash { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 36% 52%, var(--surface-2) 0%, transparent 65%); }
.map-road-h { position: absolute; top: 42%; left: 0; right: 0; height: 6px; background: rgba(255,255,255,0.6); }
.map-road-v { position: absolute; left: 34%; top: 0; bottom: 0; width: 6px; background: rgba(255,255,255,0.6); }
.map-pin {
  position: absolute; transform: translate(-50%,-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ok); border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  cursor: pointer; transition: transform 150ms;
}
.map-pin:hover { transform: translate(-50%,-50%) scale(1.4); }
.map-pin.warn { background: var(--warn); }
.map-pin.bad  { background: var(--bad); }
.map-pin.cold { background: var(--text-3); }
.map-pin.live { animation: map-live 2s ease-in-out infinite; }
@keyframes map-live {
  0%,100% { box-shadow: 0 0 0 0 rgba(60,120,10,0.4), 0 1px 3px rgba(0,0,0,0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(60,120,10,0), 0 1px 3px rgba(0,0,0,0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .map-pin.live { animation: none; }
}
.map-kpi-float {
  position: absolute; bottom: 20px; left: 24px;
  display: flex;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh-md);
}
.mkf-tile { padding: 12px 20px; border-right: 1px solid var(--border); }
.mkf-tile:last-child { border-right: 0; }
.mkf-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.mkf-val   { font-family: var(--mono); font-size: 1.65rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1; color: var(--text); }
.mkf-tile.warn .mkf-val { color: var(--warn); }

/* ── 14. Project rows ──────────────────────────────────────────── */
.proj-list { display: flex; flex-direction: column; gap: 6px; }
.proj-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer;
  transition: border-color var(--fast);
}
.proj-row:hover { border-color: var(--border-h); }
.proj-thumb {
  width: 64px; height: 40px; border-radius: var(--r-sm);
  background-size: cover; background-position: center;
  border: 1px solid var(--border); flex-shrink: 0;
}
.proj-thumb.cold { filter: saturate(0.2) brightness(0.8); }
.proj-info { flex: 1; min-width: 0; }
.proj-name { font-size: var(--t-md); font-weight: 500; color: var(--text); margin-bottom: 3px; }
.proj-meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-2); letter-spacing: 0.02em; }
.proj-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }

/* ── 15. Activity feed ─────────────────────────────────────────── */
.feed-item {
  display: grid; grid-template-columns: 38px 7px 1fr;
  gap: 0 10px; padding: 9px 18px;
  border-top: 1px solid var(--border); align-items: start;
}
.feed-item:first-child { border-top: 0; }
.feed-time { font-family: var(--mono); font-size: 10px; color: var(--text-3); padding-top: 2px; letter-spacing: 0.02em; }
.feed-dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-top: 3px; }
.feed-dot.warn { background: var(--warn); }
.feed-dot.bad  { background: var(--bad); }
.feed-dot.info { background: var(--text-3); }
.feed-msg  { font-size: var(--t-sm); color: var(--text); line-height: 1.45; }
.feed-stn  { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; }
.feed-dim  { color: var(--text-2); font-size: var(--t-xs); }

/* ── 16. Feature cards — REMOVED (W1a, 2026-07-13, owner pick A) ──
   The project-home "Features · project modules" grid was deleted;
   modules live in the project tab bar, pricing in Settings → Features. */

/* ── 17. Station tiles ─────────────────────────────────────────── */
.stn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.stn-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden; cursor: pointer;
  transition: border-color var(--fast);
}
.stn-tile:hover { border-color: var(--border-h); }
.stn-thumb { aspect-ratio: 16/9; background-size: cover; background-position: center; position: relative; border-bottom: 1px solid var(--border); }
.stn-thumb.offline { filter: grayscale(1) brightness(0.65); }
.stn-tag {
  position: absolute; top: 6px; left: 7px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em;
  color: #fff; background: rgba(0,0,0,0.55); padding: 1px 5px; border-radius: 3px;
}
.stn-info { padding: 8px 10px; }
.stn-name { font-size: var(--t-sm); color: var(--text); margin-bottom: 2px; }
.stn-meta { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.stn-meta.bad { color: var(--bad); }

/* ── 18. Canvas ────────────────────────────────────────────────── */
.canvas-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.canvas-bar {
  height: 50px; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px; padding: 0 18px 0 20px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  z-index: 10;
}
.canvas-crumbs {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-3);
}
.canvas-crumbs .here { color: var(--text); font-weight: 500; }
.canvas-crumbs .sep  { color: var(--border-s); }
.canvas-stage { flex: 1; position: relative; overflow: hidden; background: #0c0c0a; }
.canvas-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.canvas-bim {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.52;
  background-image: linear-gradient(60deg, rgba(255,255,255,0.7) 1px, transparent 1px), linear-gradient(-60deg, rgba(255,255,255,0.7) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.45) 1px, transparent 1px);
  background-size: 44px 76px, 44px 76px, 76px 76px;
  mix-blend-mode: screen;
}
.canvas-det {
  position: absolute; border: 1.5px solid var(--accent); pointer-events: none;
}
.canvas-det::after {
  content: attr(data-label); position: absolute; top: -1px; left: 0; transform: translateY(-100%);
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-fg); padding: 1px 5px; border-radius: 3px 3px 0 0; white-space: nowrap;
}

.canvas-hud { position: absolute; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.canvas-hud.tl { top: 14px; left: 14px; }
.canvas-hud.tr { top: 14px; right: 54px; }
.hud-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(10,10,8,0.7); backdrop-filter: blur(6px);
  padding: 4px 9px; border-radius: var(--r-sm); /* FND-C05: collapse 4px legacy → 5px Stratum --r-sm */
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: rgba(255,255,255,0.5);
}
.hud-chip .k { text-transform: uppercase; font-size: 9px; }
.hud-chip .v { color: rgba(255,255,255,0.9); font-weight: 500; }
.hud-chip.accent .v { color: var(--accent); }

.canvas-layers { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 3px; z-index: 5; }
.layer-btn {
  display: flex; align-items: center; gap: 7px; padding: 5px 10px;
  background: rgba(10,10,8,0.72); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.07); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.4);
  cursor: pointer; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  transition: border-color 100ms, color 100ms;
}
.layer-btn:hover:not(:disabled) { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.8); }
.layer-btn.on { color: rgba(255,255,255,0.9); }
.layer-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.layer-ind { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.layer-btn.on .layer-ind { background: var(--accent); }

.canvas-scrubber { height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 18px; background: var(--surface); border-top: 1px solid var(--border); }
.scrub-ctrl { display: flex; gap: 2px; }
.scrub-ctrl button { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-2); transition: background var(--fast), color var(--fast); }
.scrub-ctrl button:hover { background: var(--surface-2); color: var(--text); }
.scrub-track { flex: 1; height: 3px; background: var(--surface-3); border-radius: var(--r-xs); /* FND-C05: was 2px off-scale → --r-xs (3px) */ position: relative; cursor: pointer; }
.scrub-fill  { position: absolute; left: 0; top: 0; bottom: 0; background: var(--surface-3); border-radius: var(--r-xs); /* FND-C05: was 2px off-scale → --r-xs (3px) */ filter: brightness(0.7); }
.scrub-head  { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.scrub-stamp { min-width: 118px; text-align: right; }
.scrub-lbl   { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.scrub-val   { font-family: var(--mono); font-size: 11px; color: var(--accent-h); letter-spacing: 0.04em; }

/* ── 19. Station detail instruments ───────────────────────────── */
.inst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 24px; }
.inst-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 14px 16px; position: relative;
}
.inst-tile::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 0 2px 2px 0; background: transparent; }
.inst-tile.ok::before   { background: var(--ok); }
.inst-tile.warn::before { background: var(--warn); }
.inst-tile.bad::before  { background: var(--bad); }
.inst-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-3); margin-bottom: 7px; }
.inst-val   { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--text); margin-bottom: 4px; }
.inst-tile.warn .inst-val { color: var(--warn); }
.inst-tile.bad  .inst-val { color: var(--bad); }
.inst-sub   { font-family: var(--mono); font-size: 10px; color: var(--text-3); }

.cmd-row {
  display: grid; grid-template-columns: 52px 1fr auto 80px;
  gap: 10px; padding: 9px 18px; border-top: 1px solid var(--border); align-items: center;
}
.cmd-row:first-child { border-top: 0; }
.cmd-id   { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-3); }
.cmd-type { font-family: var(--mono); font-size: var(--t-sm); color: var(--text); }
.cmd-stat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; }
.cmd-stat.ok   { color: var(--ok); }
.cmd-stat.warn { color: var(--warn); }
.cmd-stat.bad  { color: var(--bad); }
.cmd-time { font-family: var(--mono); font-size: 10px; color: var(--text-3); text-align: right; }

/* ── 20. Gallery ───────────────────────────────────────────────── */
.gallery-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); cursor: pointer; background: var(--surface);
  color: var(--text-2); transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.filter-chip:hover { border-color: var(--border-h); color: var(--text); }
.filter-chip.active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }

.gallery-day { margin-bottom: 28px; }
.gallery-day-head { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.gallery-thumb {
  aspect-ratio: 16/9; background-size: cover; background-position: center;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  cursor: pointer; overflow: hidden; position: relative;
  transition: border-color var(--fast);
}
.gallery-thumb:hover { border-color: var(--border-h); }
.gallery-thumb:hover .gallery-thumb-meta { opacity: 1; }
.gallery-thumb-meta {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 8px 8px 6px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.8);
  opacity: 0; transition: opacity var(--fast);
}

.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(13,13,11,0.92); display: flex;
  align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
}
.lightbox-img {
  max-width: 90vw; max-height: 88vh;
  border-radius: var(--r); border: 1px solid rgba(255,255,255,0.1);
  object-fit: contain; background: #000;
}
.lightbox-close {
  position: absolute; top: 20px; right: 20px;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.1); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15);
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 56px; border-radius: var(--r-sm);
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 20px;
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-meta { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: var(--t-xs); color: rgba(255,255,255,0.5); letter-spacing: 0.04em; text-align: center; }

/* ── 21. Cmd+K overlay ─────────────────────────────────────────── */
.cmdk-backdrop { position: fixed; inset: 0; z-index: 500; background: rgba(13,13,11,0.48); backdrop-filter: blur(4px); }
.cmdk-panel {
  position: fixed; top: 20%; left: 50%; transform: translateX(-50%);
  width: 560px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); z-index: 501;
  overflow: hidden;
}
.cmdk-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.cmdk-input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: var(--t-lg); color: var(--text); font-family: var(--sans);
}
.cmdk-input::placeholder { color: var(--text-3); }
.cmdk-results { max-height: 380px; overflow-y: auto; }
.cmdk-group-label { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 10px 16px 4px; }
.cmdk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; cursor: pointer;
  transition: background var(--fast);
}
.cmdk-item:hover, .cmdk-item.focused { background: var(--surface-2); }
.cmdk-item-icon { color: var(--text-3); width: 20px; display: grid; place-items: center; flex-shrink: 0; }
.cmdk-item-name { flex: 1; font-size: var(--t-md); color: var(--text); }
.cmdk-item-meta { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-3); }
.cmdk-footer { padding: 8px 16px; border-top: 1px solid var(--border); display: flex; gap: 16px; }
.cmdk-key { font-family: var(--mono); font-size: 10px; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.cmdk-kbd { padding: 2px 5px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-2); font-size: 9.5px; }

/* ── 22. Login ─────────────────────────────────────────────────── */
.login-root { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-art { position: relative; overflow: hidden; background: #0c0c0a; }
.login-art-photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.6; }
.login-art-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; background: linear-gradient(to top, rgba(12,12,10,0.8) 0%, transparent 60%); }
.login-art-quote { font-size: var(--t-2xl); font-weight: 500; color: #fff; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 12px; }
.login-art-sub   { font-family: var(--mono); font-size: var(--t-xs); color: rgba(255,255,255,0.5); letter-spacing: 0.05em; }
.login-form-side { display: flex; align-items: center; justify-content: center; padding: 48px; background: var(--bg); }
.login-form-card { width: 100%; max-width: 380px; }
.login-logo { display: flex; align-items: center; gap: 9px; margin-bottom: 36px; font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text); }
.login-logo img { width: 22px; height: 22px; }
.login-title    { font-size: var(--t-3xl); font-weight: 600; letter-spacing: -0.025em; color: var(--text); margin-bottom: 6px; }
.login-subtitle { font-size: var(--t-sm); color: var(--text-3); margin-bottom: 32px; }
.login-fields   { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.login-stamp    { font-family: var(--mono); font-size: var(--t-2xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); text-align: center; margin-top: 20px; }

/* ── 23. Admin ─────────────────────────────────────────────────── */
.admin-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.admin-tab {
  padding: 10px 16px; font-size: var(--t-sm); color: var(--text-2);
  cursor: pointer; border-bottom: 2px solid transparent; background: transparent; border-top: 0; border-left: 0; border-right: 0;
  transition: color var(--fast), border-color var(--fast); font-family: var(--sans);
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--text); border-bottom-color: var(--text); font-weight: 500; }

.user-table { width: 100%; border-collapse: collapse; }
.user-table th { font-family: var(--mono); font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-3); padding: 8px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.user-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: var(--t-sm); }
.user-table tr:last-child td { border-bottom: 0; }
.user-table tr:hover td { background: var(--surface-2); }

/* ── 24. Utility ───────────────────────────────────────────────── */
.col-2 { display: grid; grid-template-columns: 1fr 280px; gap: 22px; }
.col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mb-6  { margin-bottom: var(--s6); }
.mb-7  { margin-bottom: var(--s7); }
@media (max-width: 1100px) { .col-2 { grid-template-columns: 1fr; } }

/* ── 25. Inline icon helpers (FND-C06/C09) ─────────────────────
   Mono-stroke inline-SVG icons sized to the surrounding text.
   Frontend swaps emoji glyphs (✨ ☰ ⬇ →) for <svg class="ui-icon …">.
   Use currentColor so icons inherit text color without per-instance fills. */
.ui-icon {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-icon--sm { width: 0.875em; height: 0.875em; }
.ui-icon--lg { width: 1.25em; height: 1.25em; }
/* When the icon precedes text in a button/control */
.ui-icon + .ui-icon-label,
.ui-icon-label + .ui-icon { margin-left: 0.4em; }
button > .ui-icon:first-child:not(:only-child) { margin-right: 0.4em; }
button > .ui-icon:last-child:not(:only-child) { margin-left: 0.4em; }

/* ============================================================
   Gallery time-navigation — calendar + intra-day scrubber.
   Self-contained tn-* classes (no collisions); reuses core
   Stratum tokens + .card/.btn/.eyebrow. Light+dark via tokens;
   ported from the approved m-gallery-time mock.
   ============================================================ */
.tn-shell{display:grid;grid-template-columns:340px 1fr;gap:var(--s5);align-items:start}
.tn-col{display:flex;flex-direction:column;gap:var(--s4)}
.tn-between{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.tn-row{display:flex;gap:var(--s2);align-items:center}
.tn-rail-h{font-family:var(--mono);font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.12em;color:var(--text-3)}

.tn-seg{display:inline-flex;padding:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);gap:2px}
.tn-seg button{height:28px;padding:0 var(--s4);border:0;background:transparent;cursor:pointer;font-family:var(--mono);font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);border-radius:var(--r-xs)}
.tn-seg button:hover{color:var(--text)}
.tn-seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--sh-sm);font-weight:600}

.tn-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1);margin-bottom:var(--s2)}
.tn-dow span{text-align:center;font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);padding:var(--s1) 0}
.tn-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s1)}
.tn-day{position:relative;aspect-ratio:1/1;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);display:flex;flex-direction:column;align-items:flex-start;padding:5px 6px;cursor:pointer;font-family:var(--mono);font-size:var(--t-xs);color:var(--text);transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
.tn-day:hover{border-color:var(--border-h)}
.tn-day.has{background:var(--accent-soft);border-color:var(--accent)}
.tn-day .tn-cnt{margin-top:auto;align-self:flex-end;font-size:8.5px;color:var(--accent-fg);opacity:.75}
.tn-day.gap{background:var(--warn-soft);border-color:var(--warn)}
.tn-day.gap .tn-cnt{color:var(--warn)}
.tn-day.gap::after{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:var(--r-pill);background:var(--warn)}
.tn-day.empty-day{background:var(--surface-2);border-style:dashed;border-color:var(--border);color:var(--text-3);cursor:default;opacity:.6}
.tn-day.empty-day:hover{border-color:var(--border)}
.tn-day.spill{visibility:hidden;cursor:default}
.tn-day.sel{box-shadow:inset 0 0 0 2px var(--text);border-color:var(--text)}
.tn-day.sel.has{box-shadow:inset 0 0 0 2px var(--accent-h)}

.tn-legend{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--border)}
.tn-legend span{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.tn-legend i{width:11px;height:11px;border-radius:var(--r-xs);border:1px solid var(--border);display:inline-block}
.tn-legend i.has{background:var(--accent-soft);border-color:var(--accent)}
.tn-legend i.empty-day{background:var(--surface-2);border-style:dashed}
.tn-legend i.gap{background:var(--warn-soft);border-color:var(--warn)}

.tn-hours{display:flex;flex-direction:column;gap:3px}
.tn-hr{display:grid;grid-template-columns:46px 1fr 30px;align-items:center;gap:var(--s2);height:22px;cursor:default}
.tn-hr.has{cursor:pointer}
.tn-hr-lbl{font-family:var(--mono);font-size:9.5px;color:var(--text-3)}
.tn-hr-bar{height:8px;border-radius:var(--r-pill);background:var(--surface-3);min-width:2px}
.tn-hr.has .tn-hr-bar{background:var(--accent)}
.tn-hr.sel .tn-hr-bar{background:var(--accent-h);box-shadow:0 0 0 2px var(--accent-soft)}
.tn-hr-cnt{font-family:var(--mono);font-size:9px;color:var(--text-3);text-align:right}

.tn-min{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:var(--s2)}
.tn-mr{position:relative;aspect-ratio:16/10;border-radius:var(--r-xs);overflow:hidden;border:1px solid var(--border);background:var(--surface-2);cursor:pointer}
.tn-mr.on{box-shadow:inset 0 0 0 2px var(--accent-h);border-color:var(--accent)}
.tn-mr img{width:100%;height:100%;object-fit:cover}
.tn-mr small{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;font-family:var(--mono);font-size:8px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);text-align:right}

.tn-preview{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);background:linear-gradient(135deg,var(--surface-3),var(--surface-2))}
.tn-preview img{width:100%;height:100%;object-fit:cover;display:block}
.tn-preview .tn-ts{position:absolute;left:var(--s3);top:var(--s3);font-family:var(--mono);font-size:var(--t-xs);color:#fff;background:rgba(0,0,0,.5);padding:3px 8px;border-radius:var(--r-xs);letter-spacing:.03em}
.tn-preview .tn-frameof{position:absolute;right:var(--s3);bottom:var(--s3);font-family:var(--mono);font-size:9.5px;color:#fff;background:rgba(0,0,0,.4);padding:2px 7px;border-radius:var(--r-xs)}

.tn-ruler{position:relative;margin-top:var(--s2);padding:var(--s4) 0 var(--s6);touch-action:none;user-select:none}
.tn-ruler .tn-axis{position:absolute;left:0;right:0;top:calc(var(--s4) + 11px);height:2px;background:var(--border);border-radius:var(--r-pill)}
.tn-ruler .tn-ticks{position:relative;height:24px}
.tn-ruler .tn-tick{position:absolute;top:0;width:1px;height:14px;background:var(--border-s)}
.tn-ruler .tn-cap{position:absolute;top:7px;width:4px;height:4px;border-radius:var(--r-pill);background:var(--accent-h);transform:translateX(-50%)}
.tn-ruler .tn-handle{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.tn-ruler .tn-handle .stem{width:2px;height:22px;background:var(--text)}
.tn-ruler .tn-handle .grip{width:16px;height:16px;border-radius:var(--r-pill);background:var(--accent);border:2px solid var(--surface);box-shadow:var(--sh-sm);margin-top:-3px}
.tn-ruler .tn-handle .now{position:absolute;top:-20px;white-space:nowrap;font-family:var(--mono);font-size:9.5px;background:var(--text);color:var(--primary-fg);padding:2px 6px;border-radius:var(--r-xs)}
.tn-ruler .tn-labels{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--text-3)}

.tn-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2);margin-top:var(--s2)}
.tn-fr{position:relative;aspect-ratio:16/10;border-radius:var(--r-xs);overflow:hidden;border:1px solid var(--border);background:var(--surface-2);cursor:pointer}
.tn-fr.on{box-shadow:inset 0 0 0 2px var(--accent-h);border-color:var(--accent)}
.tn-fr img{width:100%;height:100%;object-fit:cover}
.tn-fr small{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;font-family:var(--mono);font-size:8px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);text-align:right}

@media (max-width:760px){
  .tn-shell{grid-template-columns:1fr}
  .tn-strip{grid-template-columns:repeat(3,1fr)}
}