/* src/app/[locale]/(warroom)/warroom.css */
/*
 * WARROOM director console: scoped design system (C1 sections 4, 5, 6, 10).
 * Plain CSS, imported only by the (warroom) layout. Every top-level selector
 * starts with .warroom or .wr- (section 12 scope check), so nothing here can
 * match an element of the public site even if Next co-bundles this file.
 * Unlayered on purpose: every .wr-* declaration beats a Tailwind utility on the
 * same element. Express state through data-attributes and pseudo-classes here,
 * never by toggling utilities.
 */

/* ======================= part 1: tokens (section 4) ======================= */

/* ---------- theme-independent tokens (motion) ---------- */
.wr-scope {
  --wr-t-fast: 180ms;      /* border ink, hover */
  --wr-t-base: 220ms;      /* glow, panel state */
  --wr-sweep:  9s;         /* scan-line sweep period */
  --wr-pulse:  1.6s;       /* badge dot pulse */
  --wr-ease:   ease;
}

/* ---------- tokens: tactical dark (default) ---------- */
.wr-scope[data-wr-theme="dark"] {
  --radius: 0.125rem;                 /* sharp corners; shadcn radius-* derive from this inline */

  --background: #1A1D21;             /* charcoal base, low end of spec range */
  --wr-bg-2: #22262B;                /* charcoal base, high end (HUD bar, ticker) */
  --foreground: #E8ECF0;             /* body text */
  --card: #25292E;                   /* surface */
  --wr-surface-2: #2C3137;           /* elevated surface (hover rows, header strips) */
  --card-foreground: #E8ECF0;
  --popover: #25292E;
  --popover-foreground: #E8ECF0;
  --primary: #00FFF0;                /* neon cyan accent */
  --primary-foreground: #1A1D21;
  --secondary: #2C3137;
  --secondary-foreground: #E8ECF0;
  --muted: #22262B;
  --muted-foreground: #B0B8C1;       /* secondary text (spec), not the placeholder grey */
  --accent: #2C3137;
  --accent-foreground: #00FFF0;
  --destructive: #FF5566;
  --destructive-foreground: #1A1D21;
  --border: #343A41;
  --input: #343A41;
  --ring: #00FFF0;                   /* active border + focus ring */

  --wr-text-1: #E8ECF0;
  --wr-text-2: #B0B8C1;
  --wr-text-3: #959DA7;              /* muted / placeholder. Spec #7A8490 is 3.85:1 on card; this passes AA 4.5:1 on every surface (review fix) */
  --wr-accent: #00FFF0;
  --wr-glow: rgba(0, 255, 240, 0.35);
  --wr-border: #343A41;
  --wr-border-active: #00FFF0;

  --wr-status-live:    #39FF8A;
  --wr-status-pending: #FFD34A;
  --wr-status-error:   #FF5566;
  --wr-status-active:  #00FFF0;
  --wr-status-idle:    #7A8490;
  /* status ink: text drawn in a status hue (badge labels, alert and paused counters, error lines). Each hue is
     moved just far enough to reach 4.5:1 as 10px text on its own 12% badge tint over every surface; the status
     colours above stay for dots, borders and tints (review fix, section 10.1) */
  --wr-status-live-ink:    #39FF8A;
  --wr-status-pending-ink: #FFD34A;
  --wr-status-error-ink:   #FF7B88;
  --wr-status-active-ink:  #00FFF0;
  --wr-status-idle-ink:    #9FA6AF;

  --wr-grid-line: rgba(232, 236, 240, 1);   /* diamond grid ink; opacity applied on the layer */
  --wr-grid-opacity: 0.05;
  --wr-scan-line: rgba(0, 0, 0, 0.35);

  --wr-hud-h: 56px;
  --wr-ticker-h: 28px;
  --wr-gap: 10px;

  --chart-1: #00FFF0; --chart-2: #39FF8A; --chart-3: #FFD34A; --chart-4: #FF5566; --chart-5: #B0B8C1;
  --sidebar: #22262B; --sidebar-foreground: #E8ECF0; --sidebar-primary: #00FFF0;
  --sidebar-primary-foreground: #1A1D21; --sidebar-accent: #2C3137; --sidebar-accent-foreground: #00FFF0;
  --sidebar-border: #343A41; --sidebar-ring: #00FFF0;

  color-scheme: dark;
}

/* ---------- tokens: tactical light ---------- */
.wr-scope[data-wr-theme="light"] {
  --radius: 0.125rem;
  --background: #EEF1F4;
  --wr-bg-2: #E4E8EC;
  --foreground: #14171A;
  --card: #FFFFFF;
  --wr-surface-2: #F5F7F9;
  --card-foreground: #14171A;
  --popover: #FFFFFF;
  --popover-foreground: #14171A;
  --primary: #00736D;                /* cyan pulled down to AA on white (5.72:1); pure #00FFF0 is 1.27:1 */
  --primary-foreground: #FFFFFF;
  --secondary: #E4E8EC;
  --secondary-foreground: #14171A;
  --muted: #E4E8EC;
  --muted-foreground: #3E4750;
  --accent: #DDF5F3;
  --accent-foreground: #00736D;
  --destructive: #C2263A;
  --destructive-foreground: #FFFFFF;
  --border: #CBD2D9;
  --input: #CBD2D9;
  --ring: #00736D;

  --wr-text-1: #14171A;
  --wr-text-2: #3E4750;
  --wr-text-3: #5F6874;
  --wr-accent: #00736D;
  --wr-glow: rgba(0, 167, 157, 0.35);
  --wr-border: #CBD2D9;
  --wr-border-active: #00736D;

  --wr-status-live:    #1F7A45;
  --wr-status-pending: #8A6100;
  --wr-status-error:   #C2263A;
  --wr-status-active:  #00736D;
  --wr-status-idle:    #5F6874;
  --wr-status-live-ink:    #1B6A3C;
  --wr-status-pending-ink: #7B5600;
  --wr-status-error-ink:   #AF2234;
  --wr-status-active-ink:  #006862;
  --wr-status-idle-ink:    #565E68;

  --wr-grid-line: rgba(20, 23, 26, 1);
  --wr-grid-opacity: 0.04;
  --wr-scan-line: rgba(0, 0, 0, 0.06);

  --wr-hud-h: 56px;
  --wr-ticker-h: 28px;
  --wr-gap: 10px;

  --chart-1: #00736D; --chart-2: #1F7A45; --chart-3: #8A6100; --chart-4: #C2263A; --chart-5: #3E4750;
  --sidebar: #E4E8EC; --sidebar-foreground: #14171A; --sidebar-primary: #00736D;
  --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: #DDF5F3; --sidebar-accent-foreground: #00736D;
  --sidebar-border: #CBD2D9; --sidebar-ring: #00736D;
  color-scheme: light;
}

/* =================== part 2: typography + shell (section 5) =================== */

.warroom {
  min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--background); color: var(--foreground);
  font-family: var(--font-geist-sans);
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.wr-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* >=1280: the console is exactly one viewport tall and the grid takes the height the HUD (one row or more) and the
   ticker leave, so a wrapped HUD shortens the panels instead of scrolling the page (review fix) */
@media (min-width: 1280px) {
  .warroom { height: 100dvh; }
  .wr-main { overflow: hidden; }
}

/* type scale: sharp/technical. No new font: mono + tracking + case. */
.wr-label  { font-family: var(--font-geist-mono); font-size: 10px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--wr-text-2); }
.wr-label--muted { color: var(--wr-text-3); }
.wr-num    { font-family: var(--font-geist-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.wr-title  { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--wr-text-1); }
.wr-body-2 { color: var(--wr-text-2); }                 /* metadata labels: light grey */
.wr-body-3 { color: var(--wr-text-3); }                 /* placeholders */
.wr-glow-text { color: var(--wr-accent); text-shadow: 0 0 6px var(--wr-glow), 0 0 16px var(--wr-glow); }
.wr-link:hover, .wr-row:hover { color: var(--wr-accent); transition: color var(--wr-t-fast) var(--wr-ease); }   /* active / hover: neon cyan */

/* focus under clip-path: outlines and outer box-shadows are clipped away; an inset shadow survives */
.wr-focus-inset:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ring); }
.wr-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ring); }

/* cut-corner controls (.wr-cmd cuts 6px, .wr-badge 5px). The element is clipped to a polygon, so a rectangular ring
   (outline or inset box-shadow) loses both diagonals. Instead the ring is a 2px band of the same polygon painted
   above the content: the outer path, then the path moved 2px inward, filled even-odd. Moving a 45-degree edge 2px
   inward shifts its corners by 2px x (sqrt2 - 1) = 0.83px along each edge. inset: -1px lines the band up with the
   border box the element's own clip uses (both carry a 1px border). A C3 row that gets a cut sets --wr-cut and
   joins these three rules (review fix). */
.wr-cmd,
.wr-badge { position: relative; clip-path: polygon(var(--wr-cut) 0, 100% 0, 100% calc(100% - var(--wr-cut)), calc(100% - var(--wr-cut)) 100%, 0 100%, 0 var(--wr-cut)); }
.wr-cmd:focus-visible,
.wr-badge:focus-visible { outline: none; box-shadow: none; }
.wr-cmd:focus-visible::after,
.wr-badge:focus-visible::after {
  --wr-ring-d: max(2px, calc(var(--wr-cut) + 0.83px));
  content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; background: var(--ring);
  clip-path: polygon(evenodd,
    var(--wr-cut) 0, 100% 0, 100% calc(100% - var(--wr-cut)), calc(100% - var(--wr-cut)) 100%, 0 100%, 0 var(--wr-cut), var(--wr-cut) 0,
    var(--wr-ring-d) 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - var(--wr-ring-d)),
    calc(100% - var(--wr-ring-d)) calc(100% - 2px), 2px calc(100% - 2px), 2px var(--wr-ring-d), var(--wr-ring-d) 2px);
}

/* ========================= part 3: primitives (section 6) ========================= */

/* ---------- 6.2 FacetedPanel ---------- */
/* three layers inside one stacking context: glow (z0, blurred) < ::before border ink (z1) < __body surface inset 1px (z2). */
.wr-facet {
  --wr-cut-tl: 16px; --wr-cut-tr: 0px; --wr-cut-br: 24px; --wr-cut-bl: 0px;
  --wr-facet-shape: polygon(
    var(--wr-cut-tl) 0, calc(100% - var(--wr-cut-tr)) 0, 100% var(--wr-cut-tr),
    100% calc(100% - var(--wr-cut-br)), calc(100% - var(--wr-cut-br)) 100%,
    var(--wr-cut-bl) 100%, 0 calc(100% - var(--wr-cut-bl)), 0 var(--wr-cut-tl));
  position: relative; display: flex; min-height: 0; min-width: 0;
  isolation: isolate;                 /* own stacking context: the glow's z-index is resolved here, not behind .warroom's background */
}
.wr-facet[data-facet="b"] { --wr-cut-tl: 0px;  --wr-cut-tr: 20px; --wr-cut-br: 0px;  --wr-cut-bl: 16px; }
.wr-facet[data-facet="c"] { --wr-cut-tl: 22px; --wr-cut-tr: 0px;  --wr-cut-br: 0px;  --wr-cut-bl: 10px; }
.wr-facet[data-facet="d"] { --wr-cut-tl: 0px;  --wr-cut-tr: 12px; --wr-cut-br: 28px; --wr-cut-bl: 0px; }

/* glow: blur on the element, clip on its child. CSS masking order is filter, clip-path, mask, opacity,
   so blur and clip on the SAME node would clip the blur back to the polygon (invisible under __body). */
.wr-facet__glow { position: absolute; inset: -2px; z-index: 0; filter: blur(7px); opacity: 0; pointer-events: none;
  transition: opacity var(--wr-t-base) var(--wr-ease); }
.wr-facet__glow::before { content: ""; position: absolute; inset: 0; background: var(--wr-accent); clip-path: var(--wr-facet-shape); }
.wr-facet[data-active="true"] .wr-facet__glow { opacity: .35; }

.wr-facet::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--wr-border);
  clip-path: var(--wr-facet-shape); transition: background-color var(--wr-t-fast) var(--wr-ease); }
.wr-facet[data-active="true"]::before { background: var(--wr-border-active); }

.wr-facet__body { position: relative; z-index: 2; flex: 1; min-height: 0; margin: 1px; display: flex; flex-direction: column;
  background: var(--card); clip-path: var(--wr-facet-shape); }
/* 3px block padding keeps the stock 3px outer ring of a header action inside the clipped body (review fix);
   C3 header actions should still be .wr-cmd, whose ring follows the cut corners */
.wr-facet__head { position: relative; display: flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 3px 12px 3px calc(var(--wr-cut-tl) + 6px); }
.wr-facet__actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.wr-facet__content { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
/* an overflowing panel body is a keyboard-focusable scroller in current Chrome; an outer ring would be clipped by the body */
.wr-facet__content:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.wr-facet__foot { position: relative; padding: 6px 12px; }

/* ---------- 6.3 AngledDivider ---------- */
.wr-divider { position: relative; height: 7px; flex: none; --wr-div-split: 62%; }
.wr-divider[data-flip="true"] { --wr-div-split: 38%; }
.wr-divider::before { content: ""; position: absolute; left: 0; top: 0; width: var(--wr-div-split); height: 1px; background: var(--wr-border); }
.wr-divider::after  { content: ""; position: absolute; right: 0; bottom: 0; width: calc(100% - var(--wr-div-split) + 7px); height: 1px; background: var(--wr-border); }
.wr-divider > i { position: absolute; left: calc(var(--wr-div-split) - 1px); top: 0; width: 1px; height: 7px; background: var(--wr-border); transform-origin: top; transform: skewX(-45deg); }
.wr-facet[data-active="true"] .wr-divider::before,
.wr-facet[data-active="true"] .wr-divider::after,
.wr-facet[data-active="true"] .wr-divider > i { background: var(--wr-border-active); }

/* ---------- 6.4 DiamondGrid, ScanLines ---------- */
.wr-diamond { position: absolute; inset: 0; pointer-events: none; opacity: var(--wr-grid-opacity);
  background-image:
    repeating-linear-gradient( 45deg, var(--wr-grid-line) 0 1px, transparent 1px var(--wr-grid-step, 28px)),
    repeating-linear-gradient(-45deg, var(--wr-grid-line) 0 1px, transparent 1px var(--wr-grid-step, 28px)); }
.wr-scan { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wr-scan::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, var(--wr-scan-line) 0 1px, transparent 1px 3px); opacity: .25; }
.wr-scan::after  { content: ""; position: absolute; left: 0; right: 0; top: -25%; height: 25%; opacity: .18;
  background: linear-gradient(180deg, transparent, var(--wr-glow) 50%, transparent);
  animation: wr-sweep var(--wr-sweep) linear infinite; will-change: transform; }
@keyframes wr-sweep { to { transform: translateY(500%); } }

/* ---------- 6.5 StatusBadge ---------- */
/* shape and focus ring: the cut-corner block in part 2. Label text uses the status ink, the tint and border the status colour. */
.wr-badge { --c: var(--wr-status-idle); --c-ink: var(--wr-status-idle-ink); --wr-cut: 5px;
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px;
  font-family: var(--font-geist-mono); font-size: 10px; line-height: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-ink); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.wr-badge[data-status="live"]    { --c: var(--wr-status-live);    --c-ink: var(--wr-status-live-ink); }
.wr-badge[data-status="pending"] { --c: var(--wr-status-pending); --c-ink: var(--wr-status-pending-ink); }
.wr-badge[data-status="error"]   { --c: var(--wr-status-error);   --c-ink: var(--wr-status-error-ink); }
.wr-badge[data-status="active"]  { --c: var(--wr-status-active);  --c-ink: var(--wr-status-active-ink); }
.wr-badge__dot { width: 6px; height: 6px; background: var(--c); border-radius: 50%; box-shadow: 0 0 6px var(--c); }
.wr-badge[data-pulse="true"] .wr-badge__dot { animation: wr-pulse var(--wr-pulse) ease-in-out infinite; }
@keyframes wr-pulse { 50% { opacity: .35; } }

/* ---------- 6.6 TacticalGrid ---------- */
.wr-grid { flex: 1; min-height: 0; display: grid; gap: var(--wr-gap); padding: var(--wr-gap);
  grid-template-columns: minmax(0, 4.5fr) minmax(0, 3.5fr) minmax(0, 4fr);   /* P1 enlarged */
  grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);                          /* P4 enlarged */
  grid-template-areas: "p1 p2 p3" "p1 p2 p4"; }
@media (max-width: 1279px) { .wr-grid { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(420px, auto) minmax(420px, auto);
  grid-template-areas: "p1 p2" "p4 p3"; } }
@media (max-width: 767px)  { .wr-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(320px, auto);
  grid-template-areas: "p1" "p2" "p3" "p4"; padding: 8px; } }

/* ---------- 6.7 TickerStrip ---------- */
/* aside (landmark) > marquee (focusable, draws the ring) > viewport (edge-fade mask, clip) > track of two identical
   halves. The mask sits below the focusable element so it cannot fade the ring out, and every half is at least one
   viewport wide, so translateX(-50%) always lands on an identical frame however short the list is (review fix). */
.wr-ticker { flex: none; display: flex; height: var(--wr-ticker-h); background: var(--wr-bg-2); border-bottom: 1px solid var(--wr-border); }
.wr-ticker__marquee { flex: 1; min-width: 0; display: flex; }
.wr-ticker__marquee:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.wr-ticker__viewport { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.wr-ticker__track { display: inline-flex; flex: none; animation: wr-marquee var(--wr-ticker-duration, 40s) linear infinite; will-change: transform; }
.wr-ticker__half  { display: inline-flex; justify-content: space-around; gap: 40px; min-width: 100vw; padding-right: 40px; }
.wr-ticker__item  { font-family: var(--font-geist-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--wr-text-2); }
.wr-ticker__item::before { content: "◆"; color: var(--wr-accent); margin-right: 10px; font-size: 8px; }
.wr-ticker:hover .wr-ticker__track, .wr-ticker:focus-within .wr-ticker__track { animation-play-state: paused; }
@keyframes wr-marquee { to { transform: translateX(-50%); } }

/* ---------- 6.8 HUD bar, counters, clock, commands ---------- */
/* A wrapping flex row (review fix): every item keeps its min-content width and moves to the next row when the row
   is full, so the HUD never widens the page, in any locale or with any handle. At >=1280 it stays on one row for
   handles up to 13 characters in every locale; 1024-1279 is a two-row grid; phones stack. */
.wr-hud { position: sticky; top: 0; z-index: 40; flex: none; min-height: var(--wr-hud-h); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; column-gap: 16px; row-gap: 6px; padding: 6px 16px;
  background: var(--wr-bg-2); border-bottom: 1px solid var(--wr-border); }
.wr-hud__title { font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.wr-hud__label { color: var(--wr-text-1); }
.wr-counters { flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.wr-counter { display: grid; grid-template-rows: auto auto; gap: 3px; text-align: center; min-width: 64px; }
.wr-counter__value { font-family: var(--font-geist-mono); font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--wr-text-1); }
.wr-counter[data-alert="true"] .wr-counter__value { color: var(--wr-status-error-ink); }
.wr-counter[data-paused="true"] .wr-counter__value { color: var(--wr-status-pending-ink); }
.wr-counters__meta { display: grid; gap: 4px; align-content: center; justify-items: start; }
.wr-counters__paused { color: var(--wr-status-pending-ink); }
.wr-counters__error { align-self: center; font-family: var(--font-geist-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--wr-status-error-ink); }
.wr-hud__operator, .wr-clock { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.wr-hud__operator { min-width: 0; }
.wr-hud__handle { min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.wr-clock__time { font-family: var(--font-geist-mono); font-size: 18px; font-variant-numeric: tabular-nums; }
.wr-clock__utc  { font-family: var(--font-geist-mono); font-size: 10px; color: var(--wr-text-3); }
.wr-cmds { display: flex; gap: 6px; }
/* shape and focus ring: the cut-corner block in part 2. shadcn's own ring (focus-visible:ring-[3px], ui/button.tsx:8) is an
   outer box-shadow the clip would hide; the unlayered rule there replaces the whole utilities-layer composite. */
.wr-cmd  { --wr-cut: 6px; border-radius: 0;
  transition: background-color var(--wr-t-fast) var(--wr-ease), color var(--wr-t-fast) var(--wr-ease); }
/* a command whose backend has not shipped (aria-disabled, still focusable): dimmed ink and no fill instead of opacity,
   so its focus ring keeps full strength; unlayered, so this also beats the hover utilities */
.wr-cmd[aria-disabled="true"] { cursor: not-allowed; background-color: transparent; color: var(--wr-text-3); }
/* icon-only below 1920px (tooltip + aria-label carry the name); with labels the widest locale needs about 1890px */
.wr-cmd__label { display: none; }
@media (min-width: 1920px) { .wr-cmd__label { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 1439px) {
  .wr-hud { column-gap: 12px; padding-inline: 12px; }
  .wr-counters { column-gap: 14px; }
  .wr-counter { min-width: 52px; }
}
/* 1280-1439, where the single row is tightest: the "Operator" caption is visually hidden (still read out); the
   @handle and the role badge stay visible (spec section 3, operator readout always visible) */
@media (min-width: 1280px) and (max-width: 1439px) {
  .wr-hud__caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* below 1280 the page scrolls and the HUD takes the rows it needs */
@media (max-width: 1279px) { .wr-hud { padding-block: 8px; } }
/* 1024-1279: two fixed rows, title | counters | commands over operator | clock; the counters wrap inside their column */
@media (min-width: 1024px) and (max-width: 1279px) { .wr-hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (max-width: 767px) {
  .wr-hud { position: relative; }
  .wr-counters { flex-basis: 100%; justify-content: space-between; gap: 8px; }
  .wr-cmds { flex-wrap: wrap; }
}

/* ---------- tooltip content (portaled; carries .wr-scope via useWarroomScopeProps) ---------- */
.wr-tip { display: grid; gap: 2px; max-width: 260px; font-family: var(--font-geist-mono); }
.wr-tip__label { font-size: 10px; line-height: 14px; letter-spacing: .12em; text-transform: uppercase; }
.wr-tip__hint { font-size: 11px; line-height: 15px; }

/* ---------- 6.9 DiagnosticsDialog (portaled; carries .wr-scope) ---------- */
.wr-dialog { background: var(--card); color: var(--card-foreground); border-color: var(--wr-border); }
.wr-diag { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wr-border); }
.wr-diag__row { display: grid; grid-template-columns: 5.5rem minmax(0, 8rem) minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--wr-border); }
.wr-diag__row > .wr-badge { justify-self: start; }
.wr-diag__group { padding: 12px 0 4px; border-bottom: 1px solid var(--wr-border); }
.wr-diag__name { font-family: var(--font-geist-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--wr-text-1); overflow-wrap: anywhere; }
.wr-diag__detail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0;
  font-family: var(--font-geist-mono); font-size: 12px; color: var(--wr-text-2); overflow-wrap: anywhere; }
.wr-diag__path { flex-basis: 100%; display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.wr-diag__status { min-height: 40px; display: flex; align-items: center; }
.wr-diag__error { color: var(--wr-status-error-ink); }
/* phones: the fixed 5.5rem + 8rem columns left the detail a few px wide; verdict and name share a line, detail below */
@media (max-width: 639px) {
  .wr-diag__row { grid-template-columns: auto minmax(0, 1fr); }
  .wr-diag__detail { grid-column: 1 / -1; }
}

/* ---------- 6.11 PlaceholderPanel ---------- */
.wr-empty { height: 100%; display: grid; place-items: center; text-align: center; padding: 24px; }
.wr-empty .wr-label { line-height: 1.6; max-width: 40ch; }

/* ============== part 4: console content (C3, 2026-09) — appended block; keep above 10.2 ============== */
/* Every selector is .wr-* (section 12). Durations only through tokens. Lists, rows, actions and the small form
   vocabulary the four panels share; the HUD nav joins the cut-corner rules of .wr-cmd/.wr-badge by copying them
   (the C1 comment above those rules invites a C3 element to do exactly that). */
.wr-scope { --wr-spin: 1s; }                                  /* refresh icon rotation period */

/* ---------- HUD nav (hud-nav.tsx): icon-only below 1920px, like .wr-cmd__label ---------- */
.wr-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.wr-nav__link { --wr-cut: 6px; position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  font-family: var(--font-geist-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--wr-text-2); background: var(--card); border: 1px solid var(--wr-border); text-decoration: none;
  transition: color var(--wr-t-fast) var(--wr-ease), border-color var(--wr-t-fast) var(--wr-ease); }
.wr-nav__link:hover { color: var(--wr-accent); border-color: var(--wr-border-active); }
.wr-nav__link svg { width: 14px; height: 14px; flex: none; }
.wr-nav__label { display: none; }
@media (min-width: 1920px) { .wr-nav__label { display: block; } }

/* ---------- panel actions: small cut-corner buttons/links inside a facet (always labelled) ---------- */
.wr-act { --wr-cut: 5px; position: relative; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px;
  font-family: var(--font-geist-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--wr-text-2); background: var(--wr-surface-2); border: 1px solid var(--wr-border); border-radius: 0; cursor: pointer;
  text-decoration: none;
  transition: color var(--wr-t-fast) var(--wr-ease), border-color var(--wr-t-fast) var(--wr-ease), background-color var(--wr-t-fast) var(--wr-ease); }
.wr-act svg { width: 12px; height: 12px; flex: none; }
.wr-act:hover:not(:disabled) { color: var(--wr-accent); border-color: var(--wr-border-active); }
.wr-act:disabled { cursor: not-allowed; color: var(--wr-text-3); }
.wr-act[aria-pressed="true"] { color: var(--wr-accent); border-color: var(--wr-border-active); }
.wr-act[data-armed="true"] { color: var(--wr-status-pending-ink); border-color: var(--wr-status-pending); }
.wr-act--danger[data-armed="true"] { color: var(--wr-status-error-ink); border-color: var(--wr-status-error); }
.wr-act--primary { color: var(--primary-foreground); background: var(--wr-accent); border-color: var(--wr-accent); }
.wr-act--primary:hover:not(:disabled) { color: var(--primary-foreground); }
.wr-act--primary:disabled { color: var(--primary-foreground); opacity: .45; }

/* cut corners + the even-odd ring band, copied from the .wr-cmd/.wr-badge rules in part 2 */
.wr-act,
.wr-nav__link { clip-path: polygon(var(--wr-cut) 0, 100% 0, 100% calc(100% - var(--wr-cut)), calc(100% - var(--wr-cut)) 100%, 0 100%, 0 var(--wr-cut)); }
.wr-act:focus-visible,
.wr-nav__link:focus-visible { outline: none; box-shadow: none; }
.wr-act:focus-visible::after,
.wr-nav__link:focus-visible::after {
  --wr-ring-d: max(2px, calc(var(--wr-cut) + 0.83px));
  content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; background: var(--ring);
  clip-path: polygon(evenodd,
    var(--wr-cut) 0, 100% 0, 100% calc(100% - var(--wr-cut)), calc(100% - var(--wr-cut)) 100%, 0 100%, 0 var(--wr-cut), var(--wr-cut) 0,
    var(--wr-ring-d) 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - var(--wr-ring-d)),
    calc(100% - var(--wr-ring-d)) calc(100% - 2px), 2px calc(100% - 2px), 2px var(--wr-ring-d), var(--wr-ring-d) 2px);
}

/* ---------- panel body: toolbar, list, rows ---------- */
.wr-panel { display: flex; flex-direction: column; min-height: 100%; }
.wr-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.wr-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.wr-input { height: 30px; min-width: 0; padding: 0 8px; font-family: var(--font-geist-mono); font-size: 12px; color: var(--wr-text-1);
  background: var(--wr-bg-2); border: 1px solid var(--wr-border); border-radius: 0;
  transition: border-color var(--wr-t-fast) var(--wr-ease); }
.wr-input::placeholder { color: var(--wr-text-3); }
.wr-input:focus-visible { outline: none; border-color: var(--wr-border-active); box-shadow: inset 0 0 0 1px var(--ring); }
.wr-input[aria-invalid="true"] { border-color: var(--wr-status-error); }
.wr-input:disabled { color: var(--wr-text-3); cursor: not-allowed; }
.wr-input--grow { flex: 1 1 160px; }
.wr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center;
  background: var(--card); border: 1px solid var(--wr-border);
  transition: border-color var(--wr-t-fast) var(--wr-ease), box-shadow var(--wr-t-base) var(--wr-ease); }
.wr-item[data-selected="true"] { border-color: var(--wr-border-active); box-shadow: 0 0 8px var(--wr-glow); }
.wr-item__pick { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; min-width: 0;
  padding: 6px; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.wr-item__thumb { width: 64px; aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center; background: var(--wr-bg-2); }
.wr-item__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wr-item__body { display: grid; gap: 4px; min-width: 0; }
.wr-item__title { font-size: 13px; font-weight: 600; color: var(--wr-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-item__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 11px; }
.wr-item__actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; padding: 6px 6px 6px 0; }
@media (max-width: 767px) { .wr-item { grid-template-columns: 1fr; } .wr-item__actions { justify-content: flex-start; padding: 0 6px 6px; } }
.wr-more { display: flex; justify-content: center; margin-top: 8px; }
.wr-countdown { font-family: var(--font-geist-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--wr-accent); }
.wr-countdown[data-overdue="true"] { color: var(--wr-status-pending-ink); }
.wr-counter__value--time { font-size: 16px; }

/* ---------- notices + the Adjust form ---------- */
.wr-notice { margin: 6px 0 0; min-height: 1em; font-family: var(--font-geist-mono); font-size: 11px; line-height: 1.4; color: var(--wr-text-2); }
.wr-notice[data-kind="error"] { color: var(--wr-status-error-ink); }
.wr-notice[data-kind="ok"] { color: var(--wr-status-live-ink); }
.wr-form { display: grid; gap: 12px; align-content: start; }
.wr-field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.wr-field--schedule { padding-top: 10px; border-top: 1px solid var(--wr-border); }
.wr-field__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wr-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wr-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--wr-text-1); cursor: pointer; }
.wr-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--wr-accent); }
.wr-spin { animation: wr-spin var(--wr-spin) linear infinite; }
@keyframes wr-spin { to { transform: rotate(360deg); } }

/* ================= section 10.2: reduced motion (keep last) ================= */
@media (prefers-reduced-motion: reduce) {
  .wr-scope { --wr-t-fast: 0s; --wr-t-base: 0s; --wr-sweep: 0s; --wr-pulse: 0s; }
  .wr-scan::after { display: none; }                     /* explicit: a zero-duration infinite animation still paints its end frame */
  /* static ticker: one copy of the items, wrapping onto more lines instead of a scrollbar inside the thin strip */
  .wr-ticker { height: auto; min-height: var(--wr-ticker-h); }
  .wr-ticker__viewport { mask-image: none; white-space: normal; padding: 4px 12px; }
  .wr-ticker__track { animation: none; flex: 1 1 auto; min-width: 0; }
  .wr-ticker__half { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-start; row-gap: 4px; min-width: 0; padding-right: 0; }
  .wr-ticker__half + .wr-ticker__half { display: none; }
  .wr-badge[data-pulse="true"] .wr-badge__dot { animation: none; }
  .wr-spin { animation: none; }
  .wr-facet::before, .wr-facet__glow, .wr-cmd { transition: none; }
  /* portaled shadcn surfaces: the tw-animate-css enter/exit zoom and slide have no reduced-motion handling of their own */
  .wr-dialog,
  .wr-tip { animation: none; }
}

/* src/components/public-home/public-home.css */
/*
 * WARROOM public home (docs/HOME-WARROOM-2026-09-16.md; design: docs/design/home-warroom-canvas/).
 * Plain scoped CSS, loaded only by the route that renders the new home, next to warroom.css, whose
 * .wr-scope token set and primitives (.wr-facet, .wr-divider, .wr-diamond, .wr-scan, .wr-badge,
 * .wr-ticker, .wr-cmd focus ring) this file reuses. No colour or motion token is redefined here.
 * Same authoring rules as warroom.css section 12: every top-level line starts with whitespace, "}",
 * a comment, "@" or ".wrp-", so nothing here can match outside the new page; every transition and
 * animation reads a --wr-* motion token (no literal durations), so reduced motion zeroes them.
 * Unlayered on purpose (beats Tailwind utilities on the same element), like warroom.css.
 */

/* ============================ page shell ============================ */

/* Child of the theme provider's .warroom root, which is one viewport tall at >=1280 (console layout):
   flex: none keeps the page at its content height, so the document scrolls and this paints its own
   background below the first viewport. */
.wrp-page {
  /* imagery constants (model.test.ts checks them against warroom.css): the scrim shade is the dark theme's
     --background (#1A1D21) as an rgb triplet, because scrims on posters stay dark in both themes; the poster
     void is the mockup's thumbnail backdrop, not a token. Plates, chip ink and chip lines are not constants:
     they are derived from the tokens of a dark island (.wrp-isle below). */
  --wrp-shade: 26, 29, 33;
  --wrp-void: #0E1012;
  --wrp-pad: 32px;
  --wrp-max: 1760px;
  /* the gutter centres a --wrp-max column. 100vw, not 100%: a custom property's percentage resolves wherever
     it is used, and the rail uses this inside a narrower box (its negative margin and its track padding), so
     only a length that is the same for every element keeps the rail bleeding to the page edge above 1760px.
     With a classic scrollbar, 100vw is the scrollbar wider than the page: the column is that much narrower. */
  --wrp-inline: max(var(--wrp-pad), calc((100vw - var(--wrp-max)) / 2 + var(--wrp-pad)));
  --wrp-hud-h: var(--wr-hud-h);
  flex: none; position: relative; isolation: isolate; min-height: 100dvh; overflow-x: clip;
  background: var(--background); color: var(--foreground);
  font-family: var(--font-geist-sans); font-feature-settings: "tnum" 1, "ss01" 1;
}
@media (max-width: 1023px) { .wrp-page { --wrp-pad: 16px; --wrp-hud-h: 52px; } }

/* dark islands on imagery: the element also carries .wr-scope[data-wr-theme="dark"], so these resolve against
   the dark tokens in both themes (mockup Components sheet: "chips sit on imagery, so they carry their own dark plate") */
.wrp-isle {
  --wrp-plate: color-mix(in srgb, var(--background) 82%, transparent);
  --wrp-plate-line: color-mix(in srgb, var(--wr-text-1) 16%, transparent);
}

/* viewport-fixed atmosphere: diamond lattice + scan lines behind everything */
.wrp-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.wrp-fx .wr-scan { opacity: .55; }
.wrp-fx[data-sweep="off"] .wr-scan::after { display: none; }
/* Light.dc.html has no page-level scan (the lead keeps its own); the theme attribute sits on the provider root */
.wrp-fx:where([data-wr-theme="light"] *) .wr-scan { display: none; }

.wrp-page a { color: inherit; text-decoration: none; }
.wrp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrp-ico { width: 16px; height: 16px; flex: none; }
.wrp-cut { --wr-cut: 5px; clip-path: polygon(var(--wr-cut) 0, 100% 0, 100% calc(100% - var(--wr-cut)), calc(100% - var(--wr-cut)) 100%, 0 100%, 0 var(--wr-cut)); }
.wrp-glow { display: inline-flex; filter: drop-shadow(0 0 8px var(--wr-glow)); }
.wrp-glow[data-on="false"] { filter: none; }

/* desktop / compact switches (one element of each pair is display:none, so assistive tech reads one) */
@media (max-width: 1023px) { .wrp-desk { display: none !important; } }
@media (min-width: 1024px) { .wrp-mob { display: none !important; } }

/* ============================ preview banner ============================ */

/* plain bar surface: the pending StatusBadge ink is tuned for its own tint over a plain surface */
.wrp-preview { position: relative; z-index: 45; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 5px var(--wrp-inline); background: var(--wr-bg-2);
  border-bottom: 1px solid color-mix(in srgb, var(--wr-status-pending) 45%, transparent); }
.wrp-preview__text { font-family: var(--font-geist-mono); font-size: 11px; line-height: 16px; letter-spacing: .06em; color: var(--wr-text-1); }

/* ============================ HUD header ============================ */

.wrp-hud { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 22px;
  height: var(--wrp-hud-h); padding: 0 var(--wrp-inline); background: var(--wr-bg-2); border-bottom: 1px solid var(--wr-border); }
.wrp-brand { display: flex; align-items: baseline; gap: 9px; min-width: 0; white-space: nowrap;
  font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.wrp-page .wrp-brand { color: var(--wr-text-1); }
.wrp-brand:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.wrp-brand__mark { width: 10px; height: 10px; flex: none; align-self: center; background: var(--wr-accent); transform: rotate(45deg); box-shadow: 0 0 10px var(--wr-glow); }
.wrp-brand__logo { height: 30px; width: auto; max-width: 240px; object-fit: contain; align-self: center; filter: drop-shadow(0 0 6px var(--wr-glow)); }
.wrp-brand__name { overflow: hidden; text-overflow: ellipsis; }

.wrp-nav { display: flex; gap: 2px; }
.wrp-nav__item { display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  font-family: var(--font-geist-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid transparent; transition: color var(--wr-t-fast) var(--wr-ease); }
.wrp-page .wrp-nav__item { color: var(--wr-text-2); }
.wrp-page .wrp-nav__item:hover { color: var(--wr-accent); }
.wrp-page .wrp-nav__item[aria-current="page"] { color: var(--wr-accent); border-bottom-color: var(--wr-accent); }
.wrp-nav__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ring); }

/* GNEWS sister site, between the navigation and the search field. Desktop only (.wrp-desk): below 1024 the
   row is brand + search command + menu. It shrinks before the row can overflow — the anchor keeps its band
   and object-fit scales the artwork inside it, so the wordmark never distorts, only gets smaller. */
.wrp-gnews-link { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; height: 26px; }
.wrp-gnews-link img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center;
  transition: filter var(--wr-t-base) var(--wr-ease); }
.wrp-gnews-link:hover img { filter: drop-shadow(0 0 6px var(--wr-glow)); }
.wrp-gnews-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

.wrp-search { --wr-cut: 8px; position: relative; flex: 1 1 auto; min-width: 140px; max-width: 440px; display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 12px; color: var(--wr-text-3); background: var(--background); border: 1px solid var(--wr-border);
  clip-path: polygon(var(--wr-cut) 0, 100% 0, 100% calc(100% - var(--wr-cut)), calc(100% - var(--wr-cut)) 100%, 0 100%, 0 var(--wr-cut));
  transition: border-color var(--wr-t-fast) var(--wr-ease); }
/* the input's own ring would be clipped with the form, so the form draws the ring: the band of warroom.css
   6.8 (.wr-cmd:focus-visible::after), same polygon with this form's 8px cut, so it follows both diagonals */
.wrp-search:focus-within { border-color: var(--ring); }
.wrp-search:focus-within::after {
  --wrp-ring-d: max(2px, calc(var(--wr-cut) + 0.83px));
  content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; background: var(--ring);
  clip-path: polygon(evenodd,
    var(--wr-cut) 0, 100% 0, 100% calc(100% - var(--wr-cut)), calc(100% - var(--wr-cut)) 100%, 0 100%, 0 var(--wr-cut), var(--wr-cut) 0,
    var(--wrp-ring-d) 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - var(--wrp-ring-d)),
    calc(100% - var(--wrp-ring-d)) calc(100% - 2px), 2px calc(100% - 2px), 2px var(--wrp-ring-d), var(--wrp-ring-d) 2px);
}
.wrp-search__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--wr-text-1);
  font-family: var(--font-geist-mono); font-size: 11px; letter-spacing: .12em; }
.wrp-search__input::placeholder { color: var(--wr-text-3); text-transform: uppercase; opacity: 1; }
.wrp-search__input::-webkit-search-cancel-button { display: none; }
.wrp-kbd { flex: none; padding: 1px 6px; font-family: var(--font-geist-mono); font-size: 10px; color: var(--wr-text-3); border: 1px solid var(--wr-border); white-space: nowrap; }

.wrp-hud__r { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* commands: .wr-cmd supplies the cut corners, the corner-following focus ring and the colour transition */
.wrp-cmd { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 14px;
  font-family: var(--font-geist-mono); font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--wr-border); background: transparent; cursor: pointer; }
.wrp-page .wrp-cmd { color: var(--wr-text-1); }
.wrp-page .wrp-cmd:hover { color: var(--wr-accent); }
.wrp-cmd[data-icon="true"] { width: 32px; padding: 0; }
.wrp-cmd[data-size="lg"] { height: 40px; padding: 0 20px; font-size: 12px; }
.wrp-cmd--locale { gap: 6px; }
.wrp-page .wrp-cmd[data-variant="primary"] { background: var(--wr-accent); border-color: var(--wr-accent); color: var(--primary-foreground); font-weight: 600; }
.wrp-page .wrp-cmd[data-variant="primary"]:hover { background: color-mix(in srgb, var(--wr-accent) 82%, var(--wr-text-1)); color: var(--primary-foreground); }
.wrp-page .wrp-cmd[aria-disabled="true"] { color: var(--wr-text-3); cursor: not-allowed; }
/* accent-filled controls (primary commands, the pressed chip): the .wr-cmd ring is --ring, which equals the fill in
   both themes, so their band is drawn in the ink on the fill and 2px in from the edge, with fill on both sides of it
   (13.3:1 dark, 5.7:1 light). Same even-odd construction as warroom.css 6.8, both paths moved inward by 2px. */
.wrp-page .wrp-cmd[data-variant="primary"]:focus-visible::after,
.wrp-page .wrp-kchip[aria-pressed="true"]:focus-visible::after {
  --wrp-ring-o: max(2px, calc(var(--wr-cut) + 0.83px));
  --wrp-ring-i: max(4px, calc(var(--wr-cut) + 1.66px));
  background: var(--primary-foreground);
  clip-path: polygon(evenodd,
    var(--wrp-ring-o) 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - var(--wrp-ring-o)),
    calc(100% - var(--wrp-ring-o)) calc(100% - 2px), 2px calc(100% - 2px), 2px var(--wrp-ring-o), var(--wrp-ring-o) 2px,
    var(--wrp-ring-i) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(100% - var(--wrp-ring-i)),
    calc(100% - var(--wrp-ring-i)) calc(100% - 4px), 4px calc(100% - 4px), 4px var(--wrp-ring-i), var(--wrp-ring-i) 4px);
}
.wrp-avatar { --wr-cut: 6px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; overflow: hidden;
  border: 1px solid var(--wr-border); background: var(--card); cursor: pointer; font-family: var(--font-geist-mono); font-size: 12px; font-weight: 600; }
.wrp-page .wrp-avatar { color: var(--wr-accent); }
.wrp-avatar img { width: 100%; height: 100%; object-fit: cover; }

.wrp-clock { display: grid; gap: 3px; justify-items: end; padding: 0 6px 0 10px; border-left: 1px solid var(--wr-border); white-space: nowrap; }
.wrp-clock__time { font-family: var(--font-geist-mono); font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--wr-text-1); }
/* the zone name arrives after hydration; the label reserves the widest one (14 characters, "Prague · GMT+2")
   so the commands to its left do not move */
.wrp-clock .wr-label { min-width: calc(14 * (1ch + .14em)); text-align: end; }
/* World clocks: one slot the size of the Prague clock (it carries .wrp-clock too, so it inherits that
   typography, the label width and the hide-below-1280 rule) cycling five cities. All five entries share the
   one grid cell, so the slot is as wide and as tall as the widest, and nothing reflows as they swap; the slot
   clips. The entry in the slot sits at rest, the one that has just left rides up and fades, the ones waiting
   sit below with no transition — so the wrap back to the first city never slides anything downwards.
   The slide reads --wr-t-base, which warroom.css 10.2 zeroes: reduced motion swaps without motion. */
.wrp-wclock { position: relative; overflow: hidden; }
.wrp-wclock__e { grid-area: 1 / 1; display: grid; gap: 3px; justify-items: end;
  transition: transform calc(var(--wr-t-base) * 2) var(--wr-ease), opacity calc(var(--wr-t-base) * 2) var(--wr-ease); }
.wrp-wclock__e[data-state="out"] { transform: translateY(-100%); opacity: 0; }
.wrp-wclock__e[data-state="wait"] { transform: translateY(100%); opacity: 0; transition: none; }
@media (max-width: 1279px) { .wrp-clock { display: none; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .wrp-hud { gap: 14px; }
  .wrp-brand__sub { display: none; }
  .wrp-gnews-link { height: 18px; }
}
/* 1280 is where both clocks join the row: a deliberate step down for the sister-site wordmark, rather than
   whatever width flex-shrink would leave it */
@media (min-width: 1280px) and (max-width: 1439px) { .wrp-gnews-link { height: 20px; } }

/* compact HUD (< 1024): brand + search + menu, 40px touch targets (44px on touch screens, see the end) */
@media (max-width: 1023px) {
  .wrp-hud { gap: 10px; }
  .wrp-brand { font-size: 13px; gap: 7px; }
  .wrp-cmd[data-touch="true"] { width: 40px; height: 40px; }
}

/* menus (portaled; content carries the .wr-scope props). The shadcn highlight is a surface step of about 1.1:1,
   so the highlighted item also gets a ring; the checked state is an indicator plus weight, not colour. */
.wrp-menu { min-width: 13rem; border-color: var(--wr-border); }
.wrp-menu--wide { width: 15rem; }
.wrp-menu--scroll { max-height: min(80dvh, 20rem); overflow-y: auto; }
.wrp-menu [data-highlighted] { box-shadow: inset 0 0 0 2px var(--ring); }
.wrp-menu__label { font-family: var(--font-geist-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--wr-text-3); }
.wrp-menu__item { font-family: var(--font-geist-mono); font-size: 12px; letter-spacing: .06em; }
.wrp-menu__item[data-state="checked"] { font-weight: 600; }
/* checkable items (menu-choice.tsx) keep the indicator column of shadcn's checkbox and radio items: a 32px
   inset and a 14px box 8px in, holding a check or an 8px dot in the item's own ink (the base item rule
   would give an svg the muted ink) */
.wrp-menu__choice { position: relative; padding-left: 32px; }
.wrp-menu__mark { position: absolute; left: 8px; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; pointer-events: none; }
.wrp-menu__mark > svg { color: inherit; }
.wrp-menu__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wrp-menu__code { display: inline-block; min-width: 2.2em; color: var(--wr-text-3); text-transform: uppercase; }
.wrp-menu__who { display: grid; gap: 2px; min-width: 0; }
.wrp-menu__who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================ ticker ============================ */

.wrp-ticker { position: relative; z-index: 4; display: flex; min-height: var(--wr-ticker-h); background: var(--wr-bg-2); border-bottom: 1px solid var(--wr-border); }
.wrp-ticker__label { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 var(--wrp-inline);
  border-right: 1px solid var(--wr-border); background: color-mix(in srgb, var(--wr-accent) 8%, transparent); }
/* the active-status ink: the accent itself is 4.2:1 on this tint in the light theme, the ink 4.9:1 (same colour in dark) */
.wrp-ticker__label .wr-label { color: var(--wr-status-active-ink); }
.wrp-ticker .wr-ticker { flex: 1; min-width: 0; border-bottom: 0; }
.wrp-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--wr-status-live); box-shadow: 0 0 6px var(--wr-status-live);
  animation: wr-pulse var(--wr-pulse) ease-in-out infinite; }
/* pause/resume for every animation on the page (WCAG 2.2.2); hidden under reduced motion, where nothing moves */
.wrp-motion { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; margin-left: 2px;
  border: 1px solid var(--wr-border); background: transparent; cursor: pointer; }
.wrp-ticker .wrp-motion { --wr-cut: 4px; }
.wrp-page .wrp-motion { color: var(--wr-text-2); }
.wrp-page .wrp-motion:hover { color: var(--wr-accent); }
.wrp-motion svg { width: 12px; height: 12px; }
@media (max-width: 1023px) { .wrp-ticker__label { padding-right: 10px; } }
.wrp-page[data-motion="paused"] .wr-ticker__track { animation-play-state: paused; }
.wrp-page[data-motion="paused"] .wr-scan::after { display: none; }
.wrp-page[data-motion="paused"] .wr-badge__dot,
.wrp-page[data-motion="paused"] .wrp-dot { animation: none; }

/* ============================ faceted frames ============================ */

/* card corner sets (mockup SHAPES); no data-facet on these, so .wr-facet's defaults are the only competitor */
.wrp-facet[data-shape="0"] { --wr-cut-tl: 0px;  --wr-cut-tr: 12px; --wr-cut-br: 0px;  --wr-cut-bl: 12px; }
.wrp-facet[data-shape="1"] { --wr-cut-tl: 12px; --wr-cut-tr: 0px;  --wr-cut-br: 12px; --wr-cut-bl: 0px; }
.wrp-facet[data-shape="2"] { --wr-cut-tl: 0px;  --wr-cut-tr: 0px;  --wr-cut-br: 14px; --wr-cut-bl: 8px; }
.wrp-facet[data-shape="3"] { --wr-cut-tl: 10px; --wr-cut-tr: 10px; --wr-cut-br: 0px;  --wr-cut-bl: 0px; }
.wrp-facet > .wr-facet__body { overflow: hidden; }

/* hover: cyan border ink, glow and brackets. Keyboard focus is a separate state (Components sheet): the border band
   in the ring colour, 2px wide, without glow or brackets. The band is the ::before polygon showing around the
   body, so it follows every cut corner, which an outline or an inset box-shadow on a clipped element cannot. */
.wrp-hot:hover .wr-facet::before { background: var(--wr-border-active); }
.wrp-hot:hover .wr-facet__glow { opacity: .35; }
.wrp-hot:focus-visible { outline: none; }
.wrp-hot:focus-visible .wr-facet::before { background: var(--ring); }
.wrp-hot:focus-visible .wr-facet__body { margin: 2px; }
/* panels whose link is a stretched child instead of the wrapper */
.wrp-hotpanel:hover::before { background: var(--wr-border-active); }
.wrp-hotpanel:hover > .wr-facet__glow { opacity: .35; }
.wrp-hotpanel:has(.wrp-stretch:focus-visible)::before { background: var(--ring); }
.wrp-hotpanel:has(.wrp-stretch:focus-visible) > .wr-facet__body { margin: 2px; }
/* without :has() the panel band cannot react, so the link keeps an inset outline (square at the cut corners) */
.wrp-stretch { position: absolute; inset: 0; z-index: 5; }
.wrp-stretch:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
@supports selector(:has(*)) {
  .wrp-stretch:focus-visible { outline: none; }
}

/* viewfinder brackets */
.wrp-brk { position: absolute; z-index: 3; width: 18px; height: 18px; border: 0 solid var(--wr-accent); opacity: .85; pointer-events: none;
  transition: opacity var(--wr-t-base) var(--wr-ease); }
.wrp-brk[data-pos="tl"] { left: var(--wrp-bx, 12px); top: var(--wrp-by, 12px); border-width: 2px 0 0 2px; }
.wrp-brk[data-pos="br"] { right: var(--wrp-bx, 12px); bottom: var(--wrp-by, 12px); border-width: 0 2px 2px 0; }
.wrp-brk[data-hover="true"] { opacity: 0; }
.wrp-hot:hover .wrp-brk[data-hover="true"],
.wrp-hotpanel:hover .wrp-brk[data-hover="true"] { opacity: .85; }

/* imagery */
.wrp-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
  transition: opacity var(--wr-t-base) var(--wr-ease); }
.wrp-media[data-shown="false"] { opacity: 0; }
.wrp-noposter { position: absolute; inset: 0; display: grid; place-items: center; color: var(--wrp-plate-line); }
.wrp-noposter svg { width: 40px; height: 40px; }
.wrp-scrim { position: absolute; inset: 0; pointer-events: none; }
.wrp-scrim[data-kind="lead"] { background:
  linear-gradient(90deg, rgba(var(--wrp-shade), .9) 0%, rgba(var(--wrp-shade), .55) 42%, rgba(var(--wrp-shade), 0) 72%),
  linear-gradient(0deg, rgba(var(--wrp-shade), .7) 0%, transparent 45%); }
.wrp-scrim[data-kind="theme"] { background: linear-gradient(0deg,
  color-mix(in srgb, var(--background) 92%, transparent) 0%, color-mix(in srgb, var(--background) 35%, transparent) 42%, transparent 70%); }
.wrp-scrim[data-kind="card"] { background: linear-gradient(0deg, rgba(var(--wrp-shade), .7) 0%, transparent 38%); }
.wrp-scrim[data-kind="preview"] { background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, transparent 50%); opacity: 0; transition: opacity var(--wr-t-base) var(--wr-ease); }
.wrp-scrim[data-kind="preview"][data-shown="true"] { opacity: 1; }

/* chips on imagery: a dark island (plate and ink from the dark tokens in both themes) */
.wrp-chips-on { position: absolute; z-index: 4; display: flex; gap: 4px; pointer-events: none; }
.wrp-chip { display: inline-flex; align-items: center; padding: 2px 6px; font-family: var(--font-geist-mono); font-size: 10px; line-height: 14px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--wr-text-1); background: var(--wrp-plate); border: 1px solid var(--wrp-plate-line); }

/* meta line */
.wrp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0;
  font-family: var(--font-geist-mono); font-size: 11px; line-height: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--wr-text-3); }
.wrp-meta[data-tone="light"] { color: var(--wr-text-2); }
.wrp-meta__sep { width: 3px; height: 3px; flex: none; background: currentColor; transform: rotate(45deg); opacity: .8; }
.wrp-page .wrp-meta__own { color: var(--wr-text-1); }
/* the owner link sits over the stretched watch link: 5px of padding (taken back by the margin) makes it 24px tall */
.wrp-meta__own[href] { position: relative; z-index: 6; pointer-events: auto; padding-block: 5px; margin-block: -5px;
  transition: color var(--wr-t-fast) var(--wr-ease); }
.wrp-page .wrp-meta__own[href]:hover { color: var(--wr-accent); }
.wrp-meta__own[href]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ============================ hero ============================ */

.wrp-hero { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 20px; padding: 28px var(--wrp-inline) 0; }
.wrp-lead { height: clamp(380px, 33vw, 640px); }
.wrp-lead__media { position: absolute; inset: 0; }
.wrp-lead__media .wrp-brk { --wrp-bx: 30px; --wrp-by: 30px; }
.wrp-lead__media .wrp-brk[data-pos="br"] { --wrp-bx: 38px; --wrp-by: 38px; }
.wrp-lead__chips { right: 40px; top: 30px; gap: 8px; }
.wrp-lead__badge { position: absolute; left: 16px; bottom: 14px; z-index: 4; }
.wrp-lead__info { position: absolute; left: 44px; bottom: 40px; z-index: 6; max-width: min(560px, calc(100% - 88px)); display: grid; gap: 14px;
  pointer-events: none; background: none; color: var(--wr-text-1); }
.wrp-lead__title { margin: 0; font-size: clamp(24px, 2.25vw, 34px); line-height: 1.12; font-weight: 600; letter-spacing: -.01em; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wrp-lead__cta { display: flex; gap: 10px; margin-top: 4px; }
.wrp-lead__body { display: none; }

.wrp-slots { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; min-height: 0; }
.wrp-slot { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wrp-slot > .wr-facet { flex: 1; }
.wrp-slot__chips { right: 16px; top: 14px; }
.wrp-slot .wrp-brk { --wrp-bx: 14px; --wrp-by: 14px; }
.wrp-slot__info { position: absolute; left: 18px; right: 22px; bottom: 16px; z-index: 6; display: grid; gap: 8px; pointer-events: none; }
.wrp-slot__title { margin: 0; font-size: 17px; line-height: 1.22; font-weight: 500; color: var(--wr-text-1); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wrp-slot__below { display: none; }
.wrp-slot__dur { display: none; }

/* play glyph on hover */
.wrp-play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; opacity: 0;
  transition: opacity var(--wr-t-base) var(--wr-ease); }
.wrp-play__box { --wr-cut: 6px; display: grid; place-items: center; width: 46px; height: 46px; color: var(--wr-accent);
  background: var(--wrp-plate); border: 1px solid var(--wr-accent); }
.wrp-hot:hover .wrp-play,
.wrp-hotpanel:hover .wrp-play { opacity: 1; }
.wrp-play[data-hidden="true"] { opacity: 0 !important; }

@media (max-width: 1023px) {
  .wrp-hero { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 16px; }
  /* lead: poster on top (16:10, capped so a tablet or a landscape phone keeps the text in view), then title,
     meta and the play command */
  .wrp-lead { height: auto; }
  .wrp-lead__media { position: relative; inset: auto; aspect-ratio: 16 / 10; max-height: 56svh; overflow: hidden; }
  .wrp-lead__media .wrp-brk { --wrp-bx: 18px; --wrp-by: 18px; }
  .wrp-lead__media .wrp-brk[data-pos="br"] { --wrp-bx: 22px; --wrp-by: 22px; }
  .wrp-lead__chips { right: 16px; top: 14px; gap: 4px; }
  .wrp-lead__media .wrp-scrim[data-kind="lead"] { background: linear-gradient(0deg,
    color-mix(in srgb, var(--background) 92%, transparent) 0%, color-mix(in srgb, var(--background) 35%, transparent) 42%, transparent 70%); }
  .wrp-lead__info { display: none; }
  .wrp-lead__body { position: relative; display: grid; gap: 12px; padding: 14px 16px 18px; }
  .wrp-lead__body .wrp-lead__title { font-size: 22px; line-height: 1.18; }
  .wrp-lead__body .wrp-glow { display: flex; }
  .wrp-lead__body .wrp-cmd { flex: 1; height: 44px; font-size: 12px; }
  .wrp-slots { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wrp-slot > .wr-facet { flex: none; aspect-ratio: 16 / 9; }
  /* Mobile.dc.html: the slots take the card corner sets 0 and 1 and have no lattice */
  .wrp-slot .wr-facet[data-facet="b"] { --wr-cut-tl: 0px;  --wr-cut-tr: 12px; --wr-cut-br: 0px;  --wr-cut-bl: 12px; }
  .wrp-slot .wr-facet[data-facet="c"] { --wr-cut-tl: 12px; --wr-cut-tr: 0px;  --wr-cut-br: 12px; --wr-cut-bl: 0px; }
  .wrp-slot .wr-diamond { display: none; }
  .wrp-slot .wrp-scrim[data-kind="theme"] { background: linear-gradient(0deg, rgba(var(--wrp-shade), .7) 0%, transparent 38%); }
  .wrp-slot__info,
  .wrp-slot__chips { display: none; }
  .wrp-slot__dur { display: block; }
  .wrp-slot__below { display: -webkit-box; margin: 10px 0 0; font-size: 13px; line-height: 1.3; font-weight: 500; color: var(--wr-text-1);
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (min-width: 1024px) {
  .wrp-lead__badge { display: none; }
}

/* ============================ category bar ============================ */

.wrp-feed { position: relative; }
/* sticky, so opaque: rows scroll underneath (the mockup's static bar is a 70% tint that shows the lattice) */
.wrp-catbar { position: sticky; top: var(--wrp-hud-h); z-index: 30; display: flex; align-items: center; gap: 16px; margin-top: 28px;
  padding: 10px var(--wrp-inline); border-block: 1px solid var(--wr-border); background: var(--wr-bg-2); }
.wrp-catbar[data-flush="true"] { margin-top: 0; border-top: 0; }
/* 8px of padding (taken back by the margin) so the active chip's glow is not clipped by the scroller */
.wrp-chiprow { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 8px; margin: -8px -8px; }
.wrp-chiprow::-webkit-scrollbar { display: none; }
.wrp-chiprow > .wrp-glow { flex: none; }
.wrp-kchip { flex: none; display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
  font-family: var(--font-geist-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  background: var(--card); border: 1px solid var(--wr-border); cursor: pointer; }
.wrp-page .wrp-kchip { color: var(--wr-text-2); }
.wrp-page .wrp-kchip:hover { color: var(--wr-accent); border-color: color-mix(in srgb, var(--wr-accent) 45%, var(--wr-border)); }
.wrp-page .wrp-kchip[aria-pressed="true"] { background: var(--wr-accent); border-color: var(--wr-accent); color: var(--primary-foreground); font-weight: 600; }
.wrp-langsel { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px 0 12px;
  font-family: var(--font-geist-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--wr-border); background: var(--card); cursor: pointer; }
.wrp-page .wrp-langsel { color: var(--wr-text-1); }
.wrp-page .wrp-langsel:hover { color: var(--wr-accent); }
.wrp-langsel[aria-busy="true"] { cursor: progress; opacity: .7; }
/* < 1024 the compact trigger is a separate element placed before the chips in the DOM (feed.tsx), so the tab
   order follows the visual order */
@media (max-width: 1023px) {
  .wrp-catbar { gap: 10px; margin-top: 20px; padding-right: 0; }
  .wrp-catbar > .wr-label { display: none; }
  .wrp-kchip { height: 34px; }
  .wrp-chiprow { padding-right: 16px; margin-right: 0; }
  .wrp-langsel { height: 34px; }
  .wrp-langsel__caption { display: none; }
}

/* ============================ sections ============================ */

.wrp-sec { position: relative; padding: 40px var(--wrp-inline) 0; }
.wrp-sh { display: flex; align-items: center; gap: 12px; min-height: 32px; }
/* the accent before a section title: the GNTV wings (an <img> in section-header.tsx), kept glowing like the
   rotated accent square it replaced */
.wrp-sh__d { height: 14px; width: auto; flex: none; filter: drop-shadow(0 0 6px var(--wr-glow)); }
.wrp-sh__t { margin: 0; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wr-text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the heading of a category opened with "see all" takes focus (feed.tsx): land below the sticky HUD and bar */
.wrp-sh__t[tabindex] { scroll-margin-top: calc(var(--wrp-hud-h) + 88px); }
.wrp-sh__t:focus { outline: none; }
.wrp-sh__t:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.wrp-sh__n { flex: none; font-family: var(--font-geist-mono); font-size: 11px; letter-spacing: .08em; color: var(--wr-text-3); }
.wrp-sh > .wr-divider { flex: 1; min-width: 24px; }
.wrp-sh__actions { flex: none; display: flex; gap: 6px; }
/* phones: the heading wraps instead of shrinking to an ellipsis, and the actions move to their own row when the
   row is full; the rail arrows are gone (Mobile.dc.html), a rail scrolls by swipe and by Tab */
@media (max-width: 767px) {
  .wrp-sec { padding-top: 30px; }
  .wrp-sh { flex-wrap: wrap; row-gap: 8px; }
  .wrp-sh__t { font-size: 13px; max-width: calc(100% - 74px); white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
  .wrp-sh__actions { margin-left: auto; }
  .wrp-sh__arrows { display: none; }
}

/* rail: arrows in the header, snap scrolling, edge fades; the track pads 10px so a hovered card's glow is not clipped */
.wrp-rail { position: relative; margin: 8px calc(-1 * var(--wrp-inline)) 0 -10px; }
.wrp-rail__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 10px;
  scrollbar-width: none; padding: 10px var(--wrp-inline) 10px 10px; }
.wrp-rail__track::-webkit-scrollbar { display: none; }
.wrp-rail__track:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.wrp-rail__item { flex: none; width: 300px; scroll-snap-align: start; }
.wrp-rail__fade { position: absolute; top: 0; bottom: 0; z-index: 4; pointer-events: none; transition: opacity var(--wr-t-base) var(--wr-ease); }
.wrp-rail__fade[data-side="start"] { left: 0; width: 60px; background: linear-gradient(270deg, transparent, var(--background)); }
.wrp-rail__fade[data-side="end"] { right: 0; width: 120px; background: linear-gradient(90deg, transparent, var(--background)); }
.wrp-rail__fade[data-shown="false"] { opacity: 0; }
@media (max-width: 767px) {
  .wrp-rail__track { gap: 14px; }
  .wrp-rail__item { width: 260px; }
  .wrp-rail__fade { display: none; }
}

/* grid */
.wrp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; margin-top: 20px; }
@media (min-width: 1680px) { .wrp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1279px) { .wrp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .wrp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin-top: 16px; }
  .wrp-grid .wrp-card__title { font-size: 13px; }
  .wrp-grid .wrp-meta { font-size: 9.5px; gap: 3px 6px; }
}

/* ============================ video card ============================ */

.wrp-card { display: flex; flex-direction: column; min-width: 0; }
.wrp-card > .wr-facet { aspect-ratio: 16 / 9; }
.wrp-thumb { position: relative; flex: 1; min-height: 0; background: var(--wrp-void); }
.wrp-card__chips { left: 10px; top: 10px; }
/* duration: a dark-island plate like the chips (on a bright poster, bare text over the card scrim fell to 2.5:1) */
.wrp-dur { position: absolute; right: 10px; bottom: 10px; z-index: 4; pointer-events: none; padding: 1px 5px;
  font-family: var(--font-geist-mono); font-size: 11px; line-height: 14px; letter-spacing: .06em; font-variant-numeric: tabular-nums;
  color: var(--wr-text-1); background: var(--wrp-plate); border: 1px solid var(--wrp-plate-line); }
.wrp-card__title { margin: 12px 0 0; font-size: 14px; line-height: 1.36; font-weight: 500; color: var(--wr-text-1); text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--wr-t-fast) var(--wr-ease); }
.wrp-card:hover .wrp-card__title { color: var(--wr-accent); }
.wrp-card .wrp-meta { margin-top: 7px; }
.wrp-card .wrp-brk[data-pos="tl"] { --wrp-bx: 12px; --wrp-by: 40px; }
.wrp-card .wrp-brk[data-pos="br"] { --wrp-bx: 12px; --wrp-by: 34px; }
.wrp-thumb > .wrp-mute { --wr-cut: 5px; position: absolute; left: 10px; bottom: 8px; z-index: 6; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  color: var(--wr-text-1); background: var(--wrp-plate); border: 1px solid var(--wrp-plate-line); cursor: pointer; }
.wrp-thumb > .wrp-mute:hover { color: var(--wr-accent); }

/* ============================ empty state ============================ */

.wrp-empty { padding: 72px var(--wrp-inline); display: flex; justify-content: center; }
.wrp-empty > .wr-facet { width: 100%; max-width: 760px; }
.wrp-empty__body { position: relative; display: grid; justify-items: center; gap: 22px; padding: 56px 28px 60px; text-align: center; }
.wrp-empty__body > .wr-divider { justify-self: stretch; }
.wrp-empty__mark { --wr-cut: 10px; display: grid; place-items: center; width: 72px; height: 72px; color: var(--wr-accent);
  background: color-mix(in srgb, var(--wr-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--wr-accent) 45%, transparent); }
.wrp-empty__mark svg { width: 32px; height: 32px; }
.wrp-empty__tagline { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; color: var(--wr-text-1); }
.wrp-empty__sub { margin: 10px auto 0; max-width: 56ch; font-size: 15px; line-height: 1.5; color: var(--wr-text-2); }
.wrp-empty__title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wr-text-1); }
.wrp-empty__text { margin: 8px 0 0; font-family: var(--font-geist-mono); font-size: 12px; letter-spacing: .06em; color: var(--wr-text-3); }

/* ============================ footer rule ============================ */

.wrp-end { display: flex; justify-content: center; padding: 44px var(--wrp-inline) 36px; }
.wrp-end > .wr-divider { flex: 1; max-width: 520px; }
@media (max-width: 767px) { .wrp-end { padding-block: 34px 30px; } }

/* ============================ touch screens ============================ */
/* 44px targets where the primary pointer is a finger (the artboards draw 40 and 34; every size passes the 24px minimum) */
@media (pointer: coarse) {
  .wrp-cmd[data-touch="true"] { width: 44px; height: 44px; }
  .wrp-kchip,
  .wrp-langsel { height: 44px; }
  .wrp-sh__actions .wrp-cmd { height: 44px; }
  .wrp-sh__actions .wrp-cmd[data-icon="true"] { width: 44px; }
  .wrp-menu__item { min-height: 44px; }
}

/* ============================ reduced motion (keep last) ============================ */
/* the scan sweep, the ticker and the badge pulse are stopped by warroom.css 10.2; the transitions above read
   the motion tokens, which that block zeroes. Only this file's own animation, the portaled menus and the pause
   control (nothing left to pause) remain. */
@media (prefers-reduced-motion: reduce) {
  .wrp-dot { animation: none; }
  .wrp-menu { animation: none; }
  .wrp-rail__track { scroll-behavior: auto; }
  .wrp-motion { display: none; }
}
/* warroom.css 10.2 turns the ticker into a wrapping list of every item; on narrow screens that is a tall block, so
   there it lists three titles, one line each (the rest stay in the accessibility tree, visually hidden) */
@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
  .wrp-ticker .wr-ticker__half { flex-direction: column; flex-wrap: nowrap; row-gap: 2px; }
  .wrp-ticker .wr-ticker__item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wrp-ticker .wr-ticker__item:nth-child(n+4) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* src/components/public-home/site-chrome.css */
/*
 * WARROOM chrome for every page that is NOT the home: About, Privacy, Search, a channel, History,
 * Subscriptions, Watch, Login/Signup, and the dashboard and admin areas that sit under the same layout.
 * Served by /api/warroom-chrome.css (src/lib/warroom-chrome-css.ts) after warroom.css and public-home.css,
 * whose tokens and primitives this file reuses, and linked only by the (site) layout's HOME_VARIANT=warroom
 * branch. A classic deployment never loads it — not even as an unused chunk.
 *
 * The pages keep their markup. They are built from the shadcn primitives, which carry data-slot (and,
 * for the button, data-variant / data-size) attributes, and the warroom token set (warroom.css part 1,
 * .wr-scope) already redefines every shadcn colour token and --radius — so most of the re-skin happens
 * simply by rendering inside the theme provider. This file does what tokens cannot: the fixed Tailwind
 * radii, the cut corners and their focus ring, the mono/uppercase command and label face, and the
 * heading rhythm.
 *
 * Same authoring rules as public-home.css: every top-level line starts with whitespace, "}", a comment,
 * "@" or ".wrp-", so nothing here can match outside the chrome. Every selector is scoped to .wrp-site,
 * the class the chrome adds next to .wrp-page, so the home (which carries .wrp-page alone) keeps its own
 * bespoke design untouched. No colour or motion token is redefined here, and the file adds no animation:
 * these pages have no ticker, hence no pause command (WCAG 2.2.2). Unlayered on purpose, like both
 * neighbours — an unlayered rule beats a Tailwind utility whatever its specificity, which is how page
 * markup gets restyled without being rewritten.
 */

/* ============================ page shell ============================ */

/* The home clips its horizontal overflow, because its rails bleed past the page edge. These pages carry
   wide tables instead, which must stay reachable: the page scrolls rather than swallowing them. */
.wrp-site { overflow-x: visible; }
/* Every page brings its own centred container and padding, so <main> is a plain block. */
.wrp-site__main { display: block; }

/* Sharp corners. The warroom scope already sets --radius to 2px, which covers rounded-sm/md/lg/xl, but the
   fixed Tailwind radii (rounded-2xl, rounded-3xl) do not derive from it. rounded-full is left alone: it is
   the circle of a Switch thumb, a status dot, a spinner or a Progress track, and a square there reads as
   broken, not as a design. :where() keeps the specificity at the scope class, so anything below can override
   it. */
.wrp-site :where([class*="rounded"]:not([class*="rounded-full"])) { border-radius: 0; }

/* ============================ typography ============================ */

/* Page headings keep the display face of the home's lead and empty-state titles (600, tight tracking,
   sentence case). An h1 here is often content — a video title, a channel name — and must not be shouted. */
.wrp-site h1 { font-weight: 600; letter-spacing: -.01em; color: var(--wr-text-1); text-wrap: balance; }
/* Section headings take the console's label face instead (.wrp-sh__t in public-home.css), preceded by the
   accent diamond of the HUD wordmark. One size for the whole site, a step above the 16px prose, so the
   hierarchy survives the change of case. */
.wrp-site h2 { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wr-text-1); }
.wrp-site h2::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px;
  background: var(--wr-accent); transform: rotate(45deg); box-shadow: 0 0 8px var(--wr-glow); }
.wrp-site h3 { font-weight: 600; letter-spacing: .04em; color: var(--wr-text-1); }

/* .wrp-page strips colour and underline from every link (the home is built of card links). The ones inside
   running text have to be named again, in the accent — the ink .wr-link marks an active row with. */
.wrp-site p > a[href],
.wrp-site footer > a[href],
.wrp-site [data-slot="button"][data-variant="link"] { color: var(--wr-accent); text-decoration: underline; text-underline-offset: 4px; }
.wrp-site p > a[href]:hover,
.wrp-site footer > a[href]:hover { text-shadow: 0 0 6px var(--wr-glow); }
/* The hover affordances page markup asks for with Tailwind's `hover:underline` / `hover:text-primary`
   (comment authors, history rows, admin tables) lose to .wrp-page's unlayered `a { text-decoration: none }`;
   the same utilities are named again here, unlayered, so they win as their authors intended. */
.wrp-site :where(.hover\:underline):hover { text-decoration: underline; text-underline-offset: 4px; }
.wrp-site :where(.hover\:text-primary):hover { color: var(--wr-accent); }
.wrp-site hr { border-color: var(--wr-border); }

/* ============================ commands ============================ */

/* Buttons become the HUD's commands: cut corners, mono, uppercase, no shadow. `link` is excluded — it is a
   run of text, styled with the prose links above. */
.wrp-site [data-slot="button"]:not([data-variant="link"]) {
  --wr-cut: 6px; position: relative; border-radius: 0; box-shadow: none;
  font-family: var(--font-geist-mono); font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(var(--wr-cut) 0, 100% 0, 100% calc(100% - var(--wr-cut)), calc(100% - var(--wr-cut)) 100%, 0 100%, 0 var(--wr-cut));
}
/* a page's own primary call to action keeps a step up, like .wrp-cmd[data-size="lg"] */
.wrp-site [data-slot="button"][data-size="lg"] { font-size: 12px; }
.wrp-site [data-slot="button"][data-variant="outline"],
.wrp-site [data-slot="button"][data-variant="ghost"],
.wrp-site [data-slot="button"][data-variant="secondary"] { border-color: var(--wr-border); }
.wrp-site [data-slot="button"]:not([data-variant="link"]):hover { color: var(--wr-accent); }
.wrp-site [data-slot="button"][data-variant="default"]:hover,
.wrp-site [data-slot="button"][data-variant="destructive"]:hover { color: var(--primary-foreground); }

/* The clip removes shadcn's focus ring (an outer box-shadow), so the ring is redrawn as the 2px band of
   warroom.css part 2: the same polygon painted above the content, then moved 2px inward and filled
   even-odd, so it follows both diagonals. A 45-degree edge moved 2px inward shifts by 2px x (sqrt2 - 1). */
.wrp-site [data-slot="button"]:not([data-variant="link"]):focus-visible { outline: none; box-shadow: none; }
.wrp-site [data-slot="button"]:not([data-variant="link"]):focus-visible::after {
  --wrp-ring-d: max(2px, calc(var(--wr-cut) + 0.83px));
  content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; background: var(--ring);
  clip-path: polygon(evenodd,
    var(--wr-cut) 0, 100% 0, 100% calc(100% - var(--wr-cut)), calc(100% - var(--wr-cut)) 100%, 0 100%, 0 var(--wr-cut), var(--wr-cut) 0,
    var(--wrp-ring-d) 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - var(--wrp-ring-d)),
    calc(100% - var(--wrp-ring-d)) calc(100% - 2px), 2px calc(100% - 2px), 2px var(--wrp-ring-d), var(--wrp-ring-d) 2px);
}
/* Filled commands: --ring equals the fill, so their band is drawn in the ink ON the fill and 2px in from the
   edge, with fill on both sides of it (public-home.css, .wrp-cmd[data-variant="primary"]). */
.wrp-site [data-slot="button"][data-variant="default"]:focus-visible::after,
.wrp-site [data-slot="button"][data-variant="destructive"]:focus-visible::after {
  --wrp-ring-o: max(2px, calc(var(--wr-cut) + 0.83px));
  --wrp-ring-i: max(4px, calc(var(--wr-cut) + 1.66px));
  background: var(--primary-foreground);
  clip-path: polygon(evenodd,
    var(--wrp-ring-o) 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - var(--wrp-ring-o)),
    calc(100% - var(--wrp-ring-o)) calc(100% - 2px), 2px calc(100% - 2px), 2px var(--wrp-ring-o), var(--wrp-ring-o) 2px,
    var(--wrp-ring-i) 4px, calc(100% - 4px) 4px, calc(100% - 4px) calc(100% - var(--wrp-ring-i)),
    calc(100% - var(--wrp-ring-i)) calc(100% - 4px), 4px calc(100% - 4px), 4px var(--wrp-ring-i), var(--wrp-ring-i) 4px);
}

/* ============================ surfaces ============================ */

/* Cards read as the console's faceted panels at rest: the border ink of the scope, no shadow, one pair of
   cut corners. Safe to clip — the menus, tooltips and dialogs that could overflow one are all portaled. */
.wrp-site [data-slot="card"] { --wr-cut: 14px; border-radius: 0; box-shadow: none; border-color: var(--wr-border);
  clip-path: polygon(var(--wr-cut) 0, 100% 0, 100% calc(100% - var(--wr-cut)), calc(100% - var(--wr-cut)) 100%, 0 100%, 0 var(--wr-cut)); }
.wrp-site [data-slot="card-title"] { font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--wr-text-1); }
.wrp-site [data-slot="card-description"] { color: var(--wr-text-2); }

/* Tabs: a row of commands over a hairline, not a pill group. */
.wrp-site [data-slot="tabs-list"] { border-radius: 0; background: transparent; border-bottom: 1px solid var(--wr-border); }
.wrp-site [data-slot="tabs-trigger"] { border-radius: 0; font-family: var(--font-geist-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; }
.wrp-site [data-slot="tabs-trigger"][data-state="active"] { color: var(--wr-accent); border-color: var(--wr-accent); }

/* ============================ fields ============================ */

.wrp-site [data-slot="input"],
.wrp-site [data-slot="textarea"],
.wrp-site [data-slot="select-trigger"] { border-radius: 0; border-color: var(--wr-border); }
/* the value of a short field is read like a readout (.wrp-search__input); a comment body stays in the sans face */
.wrp-site [data-slot="input"],
.wrp-site [data-slot="select-trigger"] { font-family: var(--font-geist-mono); letter-spacing: .06em; }
.wrp-site [data-slot="input"]::placeholder,
.wrp-site [data-slot="textarea"]::placeholder { font-family: var(--font-geist-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--wr-text-3); opacity: 1; }
.wrp-site [data-slot="input"][type="search"]::-webkit-search-cancel-button { display: none; }
/* Field labels take the console's caption face (.wr-label in warroom.css part 2). */
.wrp-site [data-slot="label"] { font-family: var(--font-geist-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wr-text-2); }
/* The box-shadow of a focused field is deliberately left alone: nothing clips these, so shadcn's own
   ring — --ring, i.e. the accent, inside this scope — is the focus indicator. */

/* ============================ badges, tables, media ============================ */

.wrp-site [data-slot="badge"] { --wr-cut: 5px; border-radius: 0; font-family: var(--font-geist-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(var(--wr-cut) 0, 100% 0, 100% calc(100% - var(--wr-cut)), calc(100% - var(--wr-cut)) 100%, 0 100%, 0 var(--wr-cut)); }
.wrp-site [data-slot="badge"][data-variant="outline"] { border-color: var(--wr-border); color: var(--wr-text-2); }

.wrp-site [data-slot="table"] { font-variant-numeric: tabular-nums; }
.wrp-site [data-slot="table-head"] { font-family: var(--font-geist-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wr-text-3); }
.wrp-site [data-slot="table-row"] { border-color: var(--wr-border); }

.wrp-site [data-slot="separator"] { background: var(--wr-border); }
/* Avatars square off into the cut-corner tile the HUD's own avatar is (.wrp-avatar in public-home.css). */
.wrp-site [data-slot="avatar"] { --wr-cut: 6px;
  clip-path: polygon(var(--wr-cut) 0, 100% 0, 100% calc(100% - var(--wr-cut)), calc(100% - var(--wr-cut)) 100%, 0 100%, 0 var(--wr-cut)); }
.wrp-site [data-slot="avatar-fallback"] { font-family: var(--font-geist-mono); font-weight: 600; color: var(--wr-accent); background: var(--card); }
/* The player and the poster keep their own frame: a clip here would cut the controls. */
.wrp-site video { border-radius: 0; }

/* The Studio sizes itself to the viewport minus the classic 56px header (h-[calc(100dvh-3.5rem)]); the HUD
   is 56px too, except 52px under 1024px (public-home.css --wrp-hud-h), which left a 4px scroll. Read the
   HUD's own token instead — no breakpoint rule needed here: the variable already changes with it. */
.wrp-site .h-\[calc\(100dvh-3\.5rem\)\] { height: calc(100dvh - var(--wrp-hud-h)); }