/* ============================================================
   COMPIE — COMPONENT LAYER for the AI Decision Challenge
   Import order matters:
     tokens/base.css → tokens/colors.css → tokens/typography.css
     → tokens/spacing.css → tokens/backgrounds.css → tokens/fonts.css
     → compie.css
   Dark is the only theme this app ships. It runs on two big screens
   in a dim hall; see docs/BRAND.md for why we do not copy the
   light marketing site.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

html,body{margin:0;padding:0}
/* The token --bg-neon-pulse is tuned for a 1280x720 slide: at 0.5 alpha over a
   scrolling page it floods everything olive and kills body-text contrast.
   The app uses the same corner-glow idea at slide-to-screen strength instead. */
body{
  background:var(--surface-base);
  color:var(--text-body,#D7DBE6);
  font-family:var(--font-sans);
  font-size:var(--text-md);
  line-height:var(--leading-relaxed);
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  position:relative;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 900px at 100% 100%, rgba(206,255,0,0.13) 0%, rgba(1,4,13,0) 70%),
    radial-gradient(700px 700px at 0% 0%,    rgba(206,255,0,0.06) 0%, rgba(1,4,13,0) 70%);
}
body[dir="rtl"], [dir="rtl"]{font-family:var(--font-hebrew)}

/* ---------- type ---------- */
.c-display{
  font-family:var(--font-display);
  color:var(--neon-pulse);
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  text-transform:uppercase;
  margin:0;
}
.c-display--hero{font-size:clamp(48px,12vw,var(--display-xl))}
.c-display--xl  {font-size:clamp(40px,9vw,var(--display-lg))}
.c-display--lg  {font-size:clamp(32px,7vw,var(--display-md))}
.c-display--sm  {font-size:clamp(24px,5vw,var(--display-sm))}

/* Headlines that are mostly white with the key word in neon.
   .c-hl__key is the highlight — see BRAND.md "selective highlight". */
.c-hl{font-family:var(--font-display);color:#fff;text-transform:uppercase;
  font-size:clamp(32px,8vw,var(--display-md));line-height:var(--leading-display);margin:0}
.c-hl__key{color:var(--neon-pulse)}

.c-lede{font-size:var(--text-xl);color:#fff;line-height:var(--leading-snug)}
.c-muted{color:var(--text-secondary)}
.c-faint{color:var(--text-secondary);font-size:var(--text-xs)}  /* #55575D is unreadable on midnight; captions use Nebula Mist */
.c-mono{font-variant-numeric:tabular-nums}

/* label / eyebrow */
.c-eyebrow{font-size:var(--text-xs);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--neon-pulse);font-weight:var(--weight-medium)}

/* ---------- layout ---------- */
.c-page{max-width:1120px;margin:0 auto;padding:var(--space-8) var(--space-6)}
.c-stack>*+*{margin-top:var(--space-4)}
.c-row{display:flex;align-items:center;gap:var(--space-3)}
.c-grid{display:grid;gap:var(--space-4)}
.c-grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.c-grid--3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ---------- surfaces ---------- */
.c-card{
  background:var(--surface-raised);
  border:var(--border-width) solid var(--border-hairline);
  border-radius:var(--radius-2xl);
  padding:var(--space-6);
}
.c-card--flush{padding:0;overflow:hidden}
.c-panel{ /* the accent call-out panel */
  background:var(--panel-accent-bg);
  border:var(--border-width) solid var(--panel-accent-border);
  border-radius:var(--radius-xl);
  padding:var(--space-5) var(--space-6);
}

/* ---------- diamond bullets (brand signature) ---------- */
.c-list{list-style:none;padding:0;margin:0}
.c-list>li{position:relative;padding-inline-start:26px;margin-bottom:var(--space-3)}
.c-list>li::before{
  content:"\25C6";                 /* ◆ */
  position:absolute;inset-inline-start:0;top:0.05em;
  color:var(--neon-pulse);font-size:0.62em;line-height:1.6;
}

/* ---------- buttons ---------- */
.c-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-bold);
  padding:14px var(--space-6);border-radius:var(--radius-pill);
  border:var(--border-width-strong) solid var(--neon-pulse);
  background:var(--neon-pulse);color:var(--text-on-accent);
  cursor:pointer;text-decoration:none;
  transition:background var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.c-btn:hover:not(:disabled){background:var(--accent-hover);box-shadow:var(--glow-neon)}
.c-btn:active:not(:disabled){background:var(--accent-pressed);transform:translateY(1px)}
.c-btn:disabled{opacity:.45;cursor:not-allowed}
.c-btn--ghost{background:transparent;color:var(--neon-pulse)}
.c-btn--ghost:hover{background:var(--accent-subtle);box-shadow:none}
.c-btn--lg{font-size:var(--text-lg);padding:18px var(--space-10)}

/* ---------- form ---------- */
.c-field{display:block}
.c-label{display:block;font-size:var(--text-sm);color:var(--text-secondary);
  margin-bottom:var(--space-2)}
.c-input,.c-textarea{
  width:100%;font-family:inherit;font-size:var(--text-md);color:#fff;
  background:var(--surface-overlay);
  border:var(--border-width) solid var(--border-card);
  border-radius:var(--radius-md);padding:12px var(--space-4);
}
.c-textarea{min-height:150px;resize:vertical;line-height:var(--leading-relaxed)}
.c-input:focus,.c-textarea:focus{
  outline:none;border-color:var(--neon-pulse);box-shadow:0 0 0 3px var(--accent-subtle);
}
.c-input::placeholder,.c-textarea::placeholder{color:var(--text-tertiary)}

/* 500-character budget meter. Add .is-warn past 90%, .is-over at the cap.
   The counter is not decoration — the cap IS the game. See docs/SCORING.md. */
.c-counter{display:flex;justify-content:space-between;align-items:center;
  margin-top:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary)}
.c-counter__n{font-variant-numeric:tabular-nums;font-weight:var(--weight-bold);color:var(--neon-pulse)}
.c-counter.is-warn .c-counter__n{color:var(--warning)}
.c-counter.is-over .c-counter__n{color:var(--danger)}
.c-meter{height:4px;border-radius:var(--radius-pill);background:var(--border-hairline);
  overflow:hidden;margin-top:var(--space-2)}
.c-meter__fill{height:100%;background:var(--neon-pulse);
  transition:width var(--duration-base) var(--ease-standard)}
.c-counter.is-over ~ .c-meter .c-meter__fill{background:var(--danger)}

/* ---------- chips & icons ---------- */
.c-chip{display:inline-flex;align-items:center;gap:var(--space-2);
  padding:6px var(--space-3);border-radius:var(--radius-pill);
  background:var(--surface-raised);border:var(--border-width) solid var(--border-hairline);
  font-size:var(--text-sm);color:#fff}
.c-chip--accent{background:var(--neon-pulse);color:var(--text-on-accent);border-color:var(--neon-pulse);
  font-weight:var(--weight-bold)}
.c-chip--spark{border-color:var(--pixel-spark);color:var(--pixel-spark)}

/* Number chip — dark digit on neon for ordered steps. */
.c-num{display:inline-grid;place-items:center;width:40px;height:40px;
  border-radius:var(--radius-md);background:var(--neon-pulse);
  color:var(--text-on-accent);font-family:var(--font-display);font-size:26px;line-height:1}
.c-num--outline{background:transparent;border:var(--border-width-strong) solid var(--neon-pulse);
  color:var(--neon-pulse)}

/* Raster icons ship as neon-stroke PNGs at 120px. Never recolor them —
   scale only. brand/icons.json maps a role to a file. */
.c-icon{width:48px;height:48px;object-fit:contain;flex:0 0 auto}
.c-icon--sm{width:32px;height:32px}
.c-icon--lg{width:72px;height:72px}

/* ---------- stat / score ---------- */
/* The number is a <p> in most call sites, and a 96px paragraph carries a 96px
   default margin. Zero it here rather than in every call site. */
.c-stat__n{font-family:var(--font-display);font-size:var(--display-lg);
  color:var(--neon-pulse);line-height:1;font-variant-numeric:tabular-nums;margin:0}
.c-stat__label{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;
  letter-spacing:var(--tracking-wide);margin:var(--space-2) 0 0}

.c-verdict{display:inline-flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-display);font-size:var(--display-sm);
  padding:var(--space-2) var(--space-6);border-radius:var(--radius-xl)}
.c-verdict--go  {background:var(--neon-pulse);color:var(--text-on-accent)}
.c-verdict--nogo{background:transparent;color:var(--danger);
  border:var(--border-width-strong) solid var(--danger)}

/* Score breakdown bar, one per rubric component. */
.c-bar{display:grid;grid-template-columns:1fr auto;gap:var(--space-2) var(--space-4);
  align-items:center;font-size:var(--text-sm)}
.c-bar__track{grid-column:1/-1;height:8px;border-radius:var(--radius-pill);
  background:var(--border-hairline);overflow:hidden}
.c-bar__fill{height:100%;background:var(--neon-pulse)}
.c-bar__fill--penalty{background:var(--danger)}

/* ---------- leaderboard (big screen) ---------- */
.c-board{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.c-board th{text-align:start;font-size:var(--text-sm);text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--neon-pulse);
  padding:var(--space-3) var(--space-4);border-bottom:2px solid var(--neon-pulse)}
.c-board td{padding:var(--space-4);border-bottom:var(--border-width) solid var(--border-hairline);
  color:#fff}
.c-board tbody tr:nth-child(even){background:var(--table-row-alt)}
.c-board__rank{font-family:var(--font-display);font-size:32px;color:var(--neon-pulse);width:1%}
.c-board__score{font-family:var(--font-display);font-size:32px;color:#fff;text-align:end}
.c-board tr.is-new{animation:c-flash var(--duration-slow) var(--ease-out)}
@keyframes c-flash{from{background:var(--accent-subtle)}to{background:transparent}}

/* Screen mode: the hall display. Scale type up, kill chrome, and use the width
   of the panel - 1120px of a 1920px screen reads as a browser window on a wall. */
.c-screen{font-size:1.6rem}
.c-screen .c-page{max-width:1600px}
.c-screen .c-board td{padding:var(--space-5) var(--space-4)}
.c-screen .c-board__rank,.c-screen .c-board__score{font-size:56px}

/* ---------- agent thinking stream ---------- */
.c-stream{font-family:var(--font-mono);font-size:var(--text-sm);
  background:var(--table-row-alt);border:var(--border-width) solid var(--border-hairline);
  border-radius:var(--radius-lg);padding:var(--space-4);
  max-height:340px;overflow-y:auto;white-space:pre-wrap}
.c-stream__line{opacity:0;animation:c-in var(--duration-slow) var(--ease-out) forwards}
@keyframes c-in{to{opacity:1}}
.c-cursor::after{content:"\258B";color:var(--neon-pulse);animation:c-blink 1s steps(1) infinite}
@keyframes c-blink{50%{opacity:0}}

/* ---------- finding rows (breakdown + hall screen B) ---------- */
.c-findings{list-style:none;padding:0;margin:0}
.c-finding{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:var(--space-3) var(--space-4);
  padding:var(--space-3) 0;
  border-bottom:var(--border-width) solid var(--border-hairline);
}
.c-finding:last-child{border-bottom:none}
.c-finding__title{margin:0;color:#fff;font-weight:var(--weight-medium);line-height:var(--leading-snug)}

/* Severity pill. Danger for blocker, warning for high, then it recedes.
   Digital Surge is never used here - it is not allowed on text (BRAND.md). */
.c-sev{
  display:inline-block;padding:4px var(--space-3);border-radius:var(--radius-pill);
  font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);
  border:var(--border-width) solid currentColor;white-space:nowrap;
}
.c-sev--blocker{color:var(--danger)}
.c-sev--high{color:var(--warning)}
.c-sev--medium{color:var(--text-body)}
.c-sev--low,.c-sev--info{color:var(--text-secondary)}

/* ---------- language toggle ---------- */
.c-toggle{display:inline-flex;border:var(--border-width) solid var(--border-hairline);
  border-radius:var(--radius-pill);overflow:hidden}
.c-toggle button{
  font-family:inherit;font-size:var(--text-sm);padding:6px var(--space-4);
  background:transparent;color:var(--text-secondary);border:0;cursor:pointer;
}
.c-toggle button.is-on{background:var(--neon-pulse);color:var(--text-on-accent);
  font-weight:var(--weight-bold)}

/* ---------- brand bar ---------- */
.c-brandbar{display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-6)}
.c-brandbar img{height:clamp(40px,4.2vw,56px);width:auto}

/* ---------- motion respect ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ============================================================
   COMPOSITION LAYER
   The component layer above gives you parts. These give a page
   STRUCTURE — asymmetry, bands, and one dominant element per
   viewport. Without them a page becomes a stack of cards in
   content order, which reads as a memo, not a page.
   ============================================================ */

/* ---------- full-bleed band ----------
   Sections alternate surface so the page has rhythm instead of one
   continuous column. Put a .c-page inside for the content width. */
.c-band{padding-block:var(--space-16)}
.c-band--raised{
  background:var(--table-row-alt);
  border-block:var(--border-width) solid var(--border-hairline);
}
.c-band--tight{padding-block:var(--space-12)}

/* ---------- section header ----------
   Eyebrow + heading + one line. Constrained to ~62ch so it never
   spans the full width — full-width prose is the flat-page tell. */
.c-sec{max-width:62ch;margin-bottom:var(--space-8)}
.c-sec .c-lede{font-size:var(--text-lg);color:var(--text-body)}

/* ---------- asymmetric hero ----------
   Content left, a visual claim right. The imbalance is the point:
   a centred or full-width hero has no direction to read in. */
.c-hero{
  display:grid;gap:var(--space-12);align-items:start;
  padding-block:var(--space-16) var(--space-12);
}
@media (min-width:900px){
  .c-hero{grid-template-columns:1.3fr 1fr;gap:var(--space-16)}
}
.c-hero__body{max-width:62ch}
.c-hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}

/* Oversized watermark symbol bleeding a corner. Decorative only. */
.c-watermark{
  position:absolute;inset-inline-end:-6%;top:-8%;width:min(48vw,620px);
  opacity:.05;pointer-events:none;z-index:0;
}
.c-relative{position:relative;overflow:hidden}
.c-relative>*:not(.c-watermark){position:relative;z-index:1}

/* ---------- stat rail ----------
   Two or three figures stacked with hairlines. Use it to make a
   quantity FELT. A number that matters belongs at display size, not
   inside a sentence. */
.c-rail{display:grid;gap:0}
.c-rail__row{
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);
  align-items:baseline;padding-block:var(--space-5);
  border-bottom:var(--border-width) solid var(--border-hairline);
}
.c-rail__row:first-child{padding-top:0}
.c-rail__row:last-child{border-bottom:0}
.c-rail__n{
  font-family:var(--font-display);color:var(--neon-pulse);line-height:.85;
  font-size:clamp(44px,7vw,var(--display-md));font-variant-numeric:tabular-nums;
}
.c-rail__n--muted{color:var(--text-secondary)}
.c-rail__label{color:var(--text-body);font-size:var(--text-md)}
.c-rail__label small{display:block;color:var(--text-secondary);font-size:var(--text-sm)}

/* ---------- numbered tile ----------
   For a short set of rules or steps. A bulleted list and a tile grid
   carry different weight; using a list for both makes two different
   kinds of information look identical. */
.c-tiles{display:grid;gap:var(--space-4)}
@media (min-width:700px){.c-tiles--2{grid-template-columns:1fr 1fr}}
.c-tile{
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);
  align-items:start;padding:var(--space-5);
  background:var(--surface-raised);
  border:var(--border-width) solid var(--border-hairline);
  border-radius:var(--radius-xl);
}
.c-tile p{margin:0;color:var(--text-body)}
.c-tile strong{display:block;color:#fff;margin-bottom:4px}

/* ---------- dense item grid ----------
   Many small things, shown as many small things. When the volume IS
   the message, a three-line paragraph hides it — let the grid be
   visibly crowded. */
.c-dense{display:grid;gap:var(--space-2);
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.c-dense__item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--surface-raised);
  border:var(--border-width) solid var(--border-hairline);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--text-body);
}
.c-dense__item img{width:26px;height:26px;flex:0 0 auto}
.c-dense__meta{margin-inline-start:auto;color:var(--text-secondary);
  font-size:var(--text-xs);font-variant-numeric:tabular-nums;
  white-space:nowrap;padding-inline-start:var(--space-3)}

/* ---------- the contrast pair ----------
   Two quantities set against each other. The whole hook of a page is
   often one asymmetry; give it its own block rather than a clause. */
.c-versus{display:grid;gap:var(--space-4);align-items:center;
  grid-template-columns:1fr auto 1fr}
.c-versus__side{text-align:center}
.c-versus__n{font-family:var(--font-display);line-height:.85;
  font-size:clamp(52px,10vw,var(--display-lg));font-variant-numeric:tabular-nums}
.c-versus__n--big{color:var(--text-secondary)}
.c-versus__n--small{color:var(--neon-pulse)}
.c-versus__label{font-size:var(--text-sm);color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);margin-top:var(--space-2)}
.c-versus__op{font-family:var(--font-display);font-size:var(--display-sm);
  color:var(--text-tertiary)}


/* ============================================================
   HEBREW DISPLAY TYPE
   Bebas Neue contains no Hebrew glyphs. An RTL heading set in it falls back
   silently to Impact or a system face and looks broken, which is exactly what
   happened here. Hebrew display type is Assistant ExtraBold (weight 800).
   Figures stay Bebas — .c-rail__n, .c-stat__n, .c-num, .c-board__rank and
   .c-versus__n are Latin digits and read better in the condensed face.
   ============================================================ */
[dir="rtl"] .c-display,
[dir="rtl"] .c-hl,
[dir="rtl"] .c-hl__key,
[dir="rtl"] .c-verdict,
[dir="rtl"] .c-tile strong{
  font-family:var(--font-hebrew);
  font-weight:800;
  text-transform:none;        /* Hebrew has no case; uppercase is a no-op */
  letter-spacing:-0.015em;    /* Assistant needs tightening at display size */
  line-height:1.08;
}

/* Wide tracking is a Latin small-caps device. On Hebrew it just pulls the
   letters of a word apart. */
[dir="rtl"] .c-eyebrow,
[dir="rtl"] .c-stat__label,
[dir="rtl"] .c-board th{letter-spacing:normal;text-transform:none}

/* Hebrew runs longer than English at the same point size; give the hero
   headline a little more room before it wraps. */
[dir="rtl"] .c-hl{font-size:clamp(30px,7.2vw,var(--display-md))}

/* ---------- challenge badge ----------
   Says whose challenge this is and where. Deliberately Pixel Spark rather than
   Neon Pulse: the neon is already carrying the headline and the CTA, so a third
   neon element would not read as "different kind of thing". Always set in
   English (Bebas + LTR isolate) even on the Hebrew page — it is a fixed mark,
   and Bebas has no Hebrew glyphs. */
.c-badge{
  display:inline-flex;align-items:center;gap:var(--space-2);
  direction:ltr;unicode-bidi:isolate;
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(17px,1.8vw,24px);letter-spacing:.05em;line-height:1;
  padding:11px var(--space-5) 9px;border-radius:var(--radius-pill);
  background:var(--pixel-spark);color:var(--text-on-accent);
  white-space:nowrap;
}
.c-badge--quiet{background:transparent;color:var(--pixel-spark);
  border:var(--border-width-strong) solid var(--pixel-spark)}

/* The brief panel — the challenge itself, not marketing copy around it. */
.c-brief{margin-top:var(--space-6)}
.c-brief .c-eyebrow{display:block;margin-bottom:var(--space-3)}
.c-brief p{margin:0 0 var(--space-3)}
.c-brief p:last-child{margin-bottom:0;color:var(--text-secondary)}
.c-brief__line{font-size:var(--text-xl);color:#fff;line-height:var(--leading-snug)}