/* ============================================================
   Intern Radar
   Live-ticker / terminal register. Acid lime on warm black,
   heavy condensed display type, monospace figures, film grain.
   ============================================================ */

:root {
  --ink:        #f2f2ec;
  --ink-2:      #9d9d94;
  --ink-3:      #6a6a62;
  --bg:         #0a0a0b;
  --bg-2:       #0f0f11;
  --card:       #121214;
  --card-2:     #17171a;
  --rule:       #222226;
  --rule-2:     #303036;

  --live:       #c8ff00;   /* the one loud colour. never a gradient. */
  --live-ink:   #14170a;
  --hot:        #ff5c1a;
  --cash:       #00e57a;

  --r:          4px;
  --r-2:        10px;

  --display: 'Archivo', 'Helvetica Neue', Impact, sans-serif;
  --ui:      'Space Grotesk', ui-sans-serif, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --snap:    cubic-bezier(.2,.9,.25,1);
  --bar-h:   62px;
  /* Replaced at runtime by syncStickyOffset(); this is only the first paint. */
  --stack-h: 152px;
}

:root[data-theme="light"] {
  --ink:      #131311;
  --ink-2:    #56564e;
  --ink-3:    #86867c;
  --bg:       #f4f3ee;
  --bg-2:     #eceae3;
  --card:     #ffffff;
  --card-2:   #f7f6f1;
  --rule:     #dddbd2;
  --rule-2:   #c6c4b9;
  --live:     #5d7a00;
  --live-ink: #ffffff;
  --hot:      #c2410c;
  --cash:     #067a52;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Film grain. Replaces the blurred gradient blobs that make a page read as
   machine-made — texture is the cheapest signal that a human chose something. */
.grain {
  position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* No blend mode in light theme. A full-viewport multiply layer composites
   unpredictably over light surfaces — it rendered a selected row as a black
   block even though the row's computed background was pure white. A plain
   low-opacity overlay is boring and always correct. */
:root[data-theme="light"] .grain { opacity: .028; }

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 900; }
p { margin: 0; }
ol, ul, dl { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }

.wrap { width: min(1320px, 100% - 44px); margin-inline: auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 0; top: 0; z-index: 1000; background: var(--live); color: var(--live-ink); padding: 10px 16px; }

/* ---------- top bar ---------- */

.bar {
  position: sticky; top: 0; z-index: 60; height: var(--bar-h);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.bar-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.scope { width: 30px; height: 30px; flex: none; }
.scope svg { width: 100%; height: 100%; display: block; overflow: visible; }
.s-ring { fill: none; stroke: var(--live); stroke-width: 1.1; opacity: .3; }
.s-sweep { transform-origin: 22px 22px; animation: sweep 2.6s linear infinite; }
.s-sweep path { fill: var(--live); opacity: .3; }
.s-dot { fill: var(--live); }
@keyframes sweep { to { transform: rotate(360deg); } }

.word {
  font-family: var(--display); font-weight: 900; font-size: 18px;
  letter-spacing: -.045em; line-height: 1;
}
.word em { font-style: normal; color: var(--live); }

.bar-right { display: flex; align-items: center; gap: 10px; }

.ticker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  color: var(--ink-2); text-transform: uppercase;
  border: 1px solid var(--rule); padding: 6px 11px; border-radius: var(--r);
}
.beat {
  width: 6px; height: 6px; background: var(--live); flex: none;
  animation: beat 1.6s steps(1) infinite;
}
@keyframes beat { 0%,60% { opacity: 1; } 61%,100% { opacity: .18; } }

.ghost-btn {
  display: grid; place-items: center; width: 33px; height: 33px; padding: 0;
  background: none; border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--ink-2); cursor: pointer;
  transition: color .16s, border-color .16s, background .16s;
}
.ghost-btn:hover { color: var(--live); border-color: var(--live); }
.i-moon { display: none; }
:root:not([data-theme="light"]) .i-sun { display: none; }
:root:not([data-theme="light"]) .i-moon { display: block; }

/* ---------- lede ---------- */

/* Deliberately compact. The headline is a label, not a billboard — the
   listings are the product, and every pixel spent here pushes them down. */
.lede { border-bottom: 1px solid var(--rule); padding: 22px 0 20px; }
.lede-in { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }

.lede h1 {
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1;
  letter-spacing: -.045em; text-transform: uppercase; flex: none;
}
.lede h1::after { content: ""; display: inline-block; width: .13em; height: .13em; margin-left: .05em; background: var(--live); vertical-align: baseline; }
.lede p { max-width: 68ch; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.lede strong { color: var(--ink); font-weight: 600; }

/* ---------- control rail ---------- */

.rail {
  position: sticky; top: var(--bar-h); z-index: 50;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.rail-in { display: flex; align-items: center; gap: 14px; padding: 12px 0; flex-wrap: wrap; }

.seg { display: flex; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.seg-b {
  background: none; border: 0; cursor: pointer;
  padding: 8px 15px; font-size: 13px; font-weight: 600; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .16s, background .16s;
}
.seg-b + .seg-b { border-left: 1px solid var(--rule); }
.seg-b b {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px; background: var(--card-2); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.seg-b:hover { color: var(--ink); }
.seg-b[aria-selected="true"] { background: var(--live); color: var(--live-ink); }
.seg-b[aria-selected="true"] b { background: color-mix(in oklab, var(--live-ink) 16%, transparent); color: var(--live-ink); }

.find {
  flex: 1 1 240px; min-width: 190px; display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--rule); border-radius: var(--r); padding: 0 12px; height: 34px;
  color: var(--ink-3); transition: border-color .16s;
}
.find:focus-within { border-color: var(--live); }
.find input { flex: 1; border: 0; background: none; outline: none; font-size: 13.5px; color: var(--ink); min-width: 0; }
.find input::-webkit-search-cancel-button { display: none; }
.x { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 19px; line-height: 1; padding: 0 2px; }
.x:hover { color: var(--ink); }

.picks { display: flex; gap: 8px; flex-wrap: wrap; }
.picks label { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule); border-radius: var(--r); padding: 0 10px 0 11px; height: 34px; }
.picks span { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.picks select {
  appearance: none; -webkit-appearance: none; background: none; border: 0; outline: none;
  font-size: 13px; color: var(--ink); cursor: pointer; max-width: 140px;
  padding-right: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6a62' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 11px;
}
.picks label:hover { border-color: var(--rule-2); }

.flags { display: flex; gap: 8px; }
.flag {
  background: none; border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--ink-3); height: 34px; padding: 0 13px; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  transition: all .16s;
}
.flag:hover { color: var(--ink); border-color: var(--rule-2); }
.flag[aria-pressed="true"] { background: var(--live); border-color: var(--live); color: var(--live-ink); font-weight: 700; }
.flag-reset { color: var(--hot); border-color: color-mix(in oklab, var(--hot) 40%, transparent); }

/* ---------- board ---------- */

.board { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 26px; align-items: start; padding: 20px 0 80px; }
.feed-head {
  font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-3); padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

/* ---------- the register ---------- */

.feed { display: flex; flex-direction: column; gap: 10px; }

/* Each job is its own bordered block. Hairline-separated rows blurred into one
   another; an outline makes every listing a distinct object you can aim at. */
.row {
  scroll-margin-top: calc(var(--stack-h) + 16px);
  position: relative; display: grid;
  grid-template-columns: 24px 42px minmax(0,1fr) auto;
  gap: 15px; align-items: start;
  padding: 16px 18px 16px 16px; cursor: pointer;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  overflow: hidden;
  transition: border-color .16s, transform .18s var(--snap), background .16s;
  animation: rowIn .34s var(--snap) both;
}
@keyframes rowIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* the lit edge — how selection and freshness are signalled */
.row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: transparent; transition: background .16s, width .2s var(--snap);
}
.row:hover { border-color: var(--rule-2); transform: translateY(-2px); }
.row:hover::before { background: var(--rule-2); }
.row[aria-current="true"] {
  border-color: var(--live); background: var(--card-2);
}
.row[aria-current="true"]::before { background: var(--live); width: 4px; }
.row.is-hot::before { background: var(--hot); }
.row.is-hot { border-color: color-mix(in oklab, var(--hot) 42%, var(--rule)); }

.rank {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  padding-top: 5px; font-variant-numeric: tabular-nums; text-align: right;
}

.crest {
  width: 42px; height: 42px; border-radius: var(--r); overflow: hidden; position: relative;
  display: grid; place-items: center; background: var(--card-2);
  font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink-2);
  border: 1px solid var(--rule);
}
.crest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; }

.co {
  font-family: var(--display); font-weight: 800; font-size: 25px;
  line-height: 1.02; letter-spacing: -.038em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.role { margin-top: 5px; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }

/* What the job actually is, shown only when the title does not say — a quarter of
   postings are titled just "Apprentice". Carries the accent so the eye lands on the
   distinguishing half of the line rather than the word every card shares. The
   separator is a pseudo-element so it never appears without a qualifier. */
.role .qual { color: var(--ink); }
.role .qual::before { content: "·"; margin: 0 7px; color: var(--ink-3); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--ink-3); text-transform: uppercase; }
.meta .cash { color: var(--cash); font-weight: 700; }
.meta .ea { color: var(--hot); }
.meta .unpaid { color: var(--ink-3); }
.meta .dunno { color: var(--ink-3); opacity: .72; }

/* Eligibility. The only boxed item in the row, because it is the one fact that
   can rule you out entirely — everything else is detail you read afterwards. */
.elig {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid color-mix(in oklab, var(--live) 42%, transparent);
  border-radius: var(--r); padding: 2px 7px; margin: -2px 0;
}
.elig b { color: var(--live); font-weight: 700; letter-spacing: .08em; }
.elig i { font-style: normal; color: var(--ink-2); text-transform: none; letter-spacing: .02em; }

.skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.skill {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); background: var(--card-2); border: 1px solid var(--rule);
  border-radius: 3px; padding: 3px 7px;
}

.gist {
  margin-top: 10px; font-size: 13.5px; color: var(--ink-2); max-width: 62ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden;
}

/* Bullets replace the description blurb: the old paragraph was clamped to two
   lines and almost always spent them on company boilerplate. */
.gist-list { margin-top: 10px; max-width: 66ch; display: grid; gap: 5px; }
.gist-list li {
  position: relative; padding-left: 15px;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
}
.gist-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; background: var(--live); opacity: .55;
}

.age { text-align: right; padding-top: 4px; }
.age b {
  display: block; font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.age.fresh b { color: var(--live); }
.age.blazing b { color: var(--hot); }
.age s {
  display: block; margin-top: 6px; margin-left: auto; height: 2px; width: 44px;
  background: var(--rule); text-decoration: none; overflow: hidden;
}
.age s i { display: block; height: 100%; background: var(--live); }
.age.blazing s i { background: var(--hot); }

/* ---------- empty ---------- */

.void { padding: 66px 20px; text-align: center; border: 1px dashed var(--rule-2); border-radius: var(--r-2); }
.void-mark {
  display: block; width: 46px; height: 46px; margin: 0 auto 20px;
  border: 1px solid var(--rule-2); border-radius: 50%; position: relative;
}
.void-mark::after { content: ""; position: absolute; inset: 12px; border: 1px solid var(--rule-2); border-radius: 50%; }
.void h3 { font-size: 22px; text-transform: uppercase; letter-spacing: -.03em; }
.void p { margin-top: 8px; color: var(--ink-3); font-size: 14px; }

/* ---------- detail pane ---------- */

.pane-col { position: sticky; top: calc(var(--stack-h) + 16px); }
.pane, .pane-idle { border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--card); }
.pane-idle { display: grid; place-items: center; text-align: center; padding: 84px 30px; min-height: 380px; }
.pane-idle p { font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: -.03em; }
.pane-idle p span { display: block; margin-top: 9px; font-family: var(--ui); font-weight: 400; font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--ink-3); }

.idle-scope, .wait-scope { position: relative; display: block; width: 72px; height: 72px; margin-bottom: 26px; }
.idle-scope i, .wait-scope i {
  position: absolute; inset: 0; border: 1px solid var(--live); border-radius: 50%;
  animation: ripple 2.8s var(--snap) infinite;
}
.idle-scope i:nth-child(2), .wait-scope i:nth-child(2) { animation-delay: .95s; }
.idle-scope i:nth-child(3), .wait-scope i:nth-child(3) { animation-delay: 1.9s; }
@keyframes ripple { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }

.pane { padding: 26px; max-height: calc(100vh - var(--stack-h) - 44px); overflow: auto; overscroll-behavior: contain; }
.pane.is-in { animation: rowIn .3s var(--snap) both; }
.back {
  display: none; background: none; border: 0; color: var(--live); cursor: pointer;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  padding: 0; margin-bottom: 18px;
}
.p-co { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: .96; letter-spacing: -.045em; text-transform: uppercase; }
.p-role { margin-top: 9px; font-size: 16px; color: var(--ink); }
.p-loc { margin-top: 6px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }

.p-acts { display: flex; gap: 9px; margin: 22px 0; flex-wrap: wrap; }

.go, .alt, .bare {
  border-radius: var(--r); height: 40px; padding: 0 18px; cursor: pointer;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .14s var(--snap), background .16s, border-color .16s, color .16s;
}
.go { background: var(--live); border: 1px solid var(--live); color: var(--live-ink); }
.go:hover { transform: translateY(-2px); }
.go:active { transform: none; }
.go:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.go-block { width: 100%; }
.alt { background: none; border: 1px solid var(--rule-2); color: var(--ink); }
.alt:hover { border-color: var(--live); color: var(--live); transform: translateY(-2px); }
.alt svg { flex: none; }
.bare { background: none; border: 1px solid transparent; color: var(--ink-3); }
.bare:hover { color: var(--ink); }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px,1fr)); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; margin-bottom: 22px; }
.fact { padding: 12px 14px; box-shadow: 0 0 0 1px var(--rule); }
.fact dt { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.fact dd { margin: 5px 0 0; font-size: 14.5px; font-weight: 600; }
.fact dd.cash { color: var(--cash); }

.pane h3 { font-family: var(--mono); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-3); margin: 22px 0 10px; }
.p-gist { font-size: 14.5px; white-space: pre-line; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--rule); border-radius: var(--r); padding: 4px 9px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.src { margin-top: 24px; padding-top: 15px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-3); }
.src a { color: var(--ink-2); }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--rule); background: var(--bg-2); padding: 30px 0 52px; font-size: 12px; color: var(--ink-3); }
.foot p { max-width: 80ch; }
.dim { margin-top: 8px; opacity: .75; }

/* ---------- modal ---------- */

.veil { position: fixed; inset: 0; z-index: 90; background: rgba(5,5,6,.78); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.modal {
  position: fixed; z-index: 91; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(790px, calc(100vw - 32px)); max-height: min(89vh, 940px);
  background: var(--bg-2); border: 1px solid var(--rule-2); border-radius: var(--r-2);
  display: flex; flex-direction: column; overflow: hidden;
  animation: pop .3s var(--snap);
}
@keyframes pop { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); } }
.modal-top { display: flex; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--rule); flex: none; }
.modal-top h2 { font-size: 21px; text-transform: uppercase; letter-spacing: -.035em; }
.modal-sub { margin-top: 5px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.modal-body { padding: 22px; overflow: auto; overscroll-behavior: contain; }

.drop { display: grid; place-items: center; gap: 7px; text-align: center; border: 1px dashed var(--rule-2); border-radius: var(--r); padding: 40px 22px; cursor: pointer; color: var(--ink-3); transition: border-color .16s, color .16s, background .16s; }
.drop:hover, .drop.over { border-color: var(--live); color: var(--live); background: color-mix(in oklab, var(--live) 5%, transparent); }
.drop b { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--ink); text-transform: uppercase; letter-spacing: -.02em; }
.drop:hover b, .drop.over b { color: var(--live); }
.drop span { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; }

.paste { margin-top: 14px; }
.paste summary { cursor: pointer; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.paste summary:hover { color: var(--live); }
.paste textarea { width: 100%; margin-top: 10px; padding: 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); color: var(--ink); resize: vertical; font-size: 13px; outline: none; }
.paste textarea:focus { border-color: var(--live); }

.filestate { margin-top: 14px; padding: 11px 13px; border-radius: var(--r); border: 1px solid color-mix(in oklab, var(--cash) 40%, transparent); color: var(--cash); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.filestate.bad { border-color: color-mix(in oklab, var(--hot) 45%, transparent); color: var(--hot); text-transform: none; letter-spacing: 0; font-family: var(--ui); font-size: 13px; }

.warn { margin: 16px 0 18px; padding: 14px 16px; border-left: 2px solid var(--hot); background: var(--card); font-size: 12.5px; color: var(--ink-2); display: flex; flex-direction: column; gap: 8px; }
.warn b { color: var(--ink); }

.wait { display: grid; place-items: center; text-align: center; padding: 60px 20px; }
.wait b { font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: -.02em; }
.wait > span { margin-top: 7px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }

.acts { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 18px; }
.flagbox { border-left: 2px solid var(--hot); background: var(--card); padding: 13px 15px; margin-bottom: 12px; font-size: 13px; color: var(--ink-2); }
.flagbox b { display: block; color: var(--ink); margin-bottom: 5px; }
.flagbox ul { list-style: disc; padding-left: 18px; margin-top: 5px; }
.flagbox-gap { border-left-color: var(--live); }

.diffs { margin-bottom: 18px; }
.diffs h4 { margin: 0 0 9px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-3); font-weight: 700; }
.diffs ul { display: flex; flex-direction: column; gap: 6px; }
.diffs li { font-size: 13px; color: var(--ink-2); padding-left: 18px; position: relative; }
.diffs li::before { content: "+"; position: absolute; left: 0; color: var(--live); font-family: var(--mono); font-weight: 700; }

.sheet { background: #fff; color: #16160f; border-radius: var(--r); padding: 38px 42px; font-family: ui-serif, Georgia, serif; font-size: 13px; line-height: 1.5; }
.sheet .r-name { font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: -.035em; text-transform: uppercase; }
.sheet .r-contact { font-family: var(--mono); font-size: 11px; color: #55554c; margin-top: 4px; }
.sheet .r-summary { margin-top: 14px; }
.sheet .r-sec { margin-top: 19px; }
.sheet .r-sec > h5 { margin: 0 0 8px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; border-bottom: 1.5px solid #16160f; padding-bottom: 4px; }
.sheet .r-item { margin-bottom: 12px; break-inside: avoid; }
.sheet .r-item-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sheet .r-role { font-weight: 700; }
.sheet .r-org { font-style: italic; color: #3d3d35; }
.sheet .r-dates { font-family: var(--mono); font-size: 10.5px; color: #62625a; white-space: nowrap; }
.sheet .r-item ul { list-style: disc; padding-left: 18px; margin-top: 4px; }
.sheet .r-skills { font-family: var(--mono); font-size: 11.5px; }

.oops { text-align: center; padding: 48px 26px; color: var(--ink-2); }
.oops b { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--ink); text-transform: uppercase; margin-bottom: 8px; }
.oops p { margin-bottom: 18px; font-size: 14px; }

.snack {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 95;
  background: var(--live); color: var(--live-ink); padding: 11px 20px; border-radius: var(--r);
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  animation: rise .26s var(--snap);
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .board { grid-template-columns: 1fr; }
  .pane-col { position: fixed; inset: 0; z-index: 80; background: var(--bg); overflow: auto; display: none; }
  .pane-col.open { display: block; }
  .pane-idle { display: none; }
  .pane { max-height: none; min-height: 100vh; border: 0; border-radius: 0; padding: 22px 22px 70px; }
  .back { display: inline-block !important; }

}

@media (max-width: 680px) {
  .wrap { width: calc(100% - 30px); }
  .lede { padding: 18px 0 16px; }
  .lede-in { gap: 10px; }
  .lede h1 { font-size: 24px; }
  .lede p { font-size: 12.5px; }
  .ticker { display: none; }
  .row { grid-template-columns: 34px minmax(0,1fr); gap: 12px; padding: 14px 15px; }
  .rank { display: none; }
  .crest { width: 34px; height: 34px; font-size: 12px; }
  .co { font-size: 20px; }
  .age { grid-column: 2; text-align: left; padding-top: 8px; }
  .age s { margin-left: 0; }
  /* min-width:0 on both, or the select's intrinsic width — the widest company or
     city name in the option list — becomes an unshrinkable floor and pushes the
     rail ~150px past the viewport. That is what made the whole page scroll
     sideways on a phone. The ellipsis keeps a long name from looking clipped. */
  .picks label { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .picks select {
    max-width: none; flex: 1; min-width: 0; width: 100%;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  }

  /* Only the 62px bar stays pinned. The rail wraps to three rows here, and
     sticking it too froze ~350px — nearly half a phone screen — above every
     scroll. It scrolls away now; the bar is what you need while scrolling. */
  .rail { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .modal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; top: 0; left: 0; transform: none; border: 0; border-radius: 0; }
  @keyframes pop { from { opacity: 0; transform: translateY(14px); } }
  .sheet { padding: 24px 20px; }
  .p-co { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .grain { display: none; }
}

@media print {
  .bar, .lede, .rail, .board, .foot, .grain, .veil, .snack,
  .modal-top, .acts, .flagbox, .diffs { display: none !important; }
  body { background: #fff; }
  .modal { position: static; transform: none; width: auto; max-height: none; border: 0; border-radius: 0; animation: none; background: #fff; }
  .modal-body { padding: 0; overflow: visible; }
  .sheet { border-radius: 0; padding: 0; font-size: 10.5pt; line-height: 1.42; color: #000; }
  .sheet .r-name { font-size: 19pt; }
  .sheet .r-sec { margin-top: 13pt; break-inside: avoid; }
  @page { margin: 14mm 15mm; }
}