/* The judge pages, on top of the main site's own front-end code (/static/site.css and
   /static/home.css, linked first). The header, type, hero, sections, buttons, chips, index rows
   and footer are the site's classes as they are. This file adds only what the site has no pattern
   for (the code form, the live layout, the chat) and builds it from the site's variables: no
   colour, type or spacing value of its own except the alert red the site's own forms use. */

:root {
  --ink-soft: color-mix(in srgb, var(--text) 74%, var(--muted));
  --track: color-mix(in srgb, var(--text) 10%, var(--canvas));
  --alert: #e88;                 /* the site's form error colour (.waitlist-msg) */
  --nav-h: 67px;                 /* the site's nav: 18px padding, a 29px row, 18px, one hairline */
  --tabs-h: 52px;
}

[hidden] { display: none !important; }
button, input, textarea, select { font-family: inherit; }
.btn { font-family: var(--sans); }
.btn:disabled { opacity: .5; cursor: progress; transform: none; }
.btn-small { height: 32px; padding: 0 14px; font-size: 13px; }

.skip {
  position: absolute; top: var(--s3); left: var(--s3); z-index: 40;
  padding: var(--s2) var(--s4); border-radius: var(--r-full);
  background: var(--text); color: var(--canvas); font-weight: 600; font-size: 14px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── forms: the site's waitlist field, as a pattern ─────────────────────── */

.field-label {
  display: block; margin-bottom: var(--s2);
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.field-input {
  width: 100%; min-width: 0; height: 46px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text);
  font: 500 15px/1 var(--mono); letter-spacing: .08em;
  transition: border-color .2s;
}
.field-input::placeholder, textarea::placeholder { color: var(--muted-2); }
.field-input:focus { outline: none; border-color: var(--accent); }
.field-input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field-input[aria-invalid="true"] { border-color: var(--alert); }
.form-status { min-height: 1.4em; margin: var(--s3) 0 0; font-size: 14px; color: var(--muted); }
.form-status[data-kind="error"] { color: var(--alert); }
.form-status[data-kind="ok"] { color: var(--accent-2); }
.form-status:empty { min-height: 0; margin: 0; }

/* ── the landing ────────────────────────────────────────────────────────── */

.judge-landing .home-hero .lede { max-width: 100%; margin-top: var(--s6); }
.code-row { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* the hero's primary action: the judge code, then the started week as the quieter way in */
.hero-code { width: min(100%, 600px); margin-top: var(--s8); text-align: left; }
.hero-code .field-label { color: rgba(255, 255, 255, .62); }
.judge-landing .home-hero .hero-code .hero-actions { margin-top: 0; justify-content: flex-start; }
.hero-code .field-input { height: 52px; background: rgba(0, 0, 0, .72); border-color: rgba(255, 255, 255, .26); backdrop-filter: blur(6px); }
.hero-code .field-input:hover { border-color: rgba(255, 255, 255, .42); }
.hero-code .code-row .btn { height: 52px; }
.judge-landing .home-hero .hero-code .btn-primary { background: var(--text); color: var(--canvas); border-color: var(--text); }
.judge-landing .home-hero .hero-code .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.hero-fine { margin: var(--s2) 0 0; font: 500 12px/1.5 var(--mono); color: rgba(255, 255, 255, .5); }
.hero-alt {
  display: inline-flex; gap: 8px; margin-top: var(--s5); padding: 6px 2px; font-size: 15px; color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong); transition: color .2s, border-color .2s;
}
.hero-alt span { display: inline-block; transition: transform .25s var(--ease); }
.hero-alt:hover { color: var(--text); border-color: var(--accent); }
.hero-alt:hover span { transform: translateX(3px); }
.hero-alt:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.flow {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) 0; margin: var(--s8) 0 0; padding: 0; list-style: none;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.flow li + li::before { content: "\2192"; margin: 0 var(--s3); color: var(--accent); }
.judge-landing .home-hero .hero-note { margin-top: var(--s5); }
.judge-landing .sect { padding-top: var(--s12); padding-bottom: var(--s10); }
.judge-landing .index > li { padding: var(--s5) 0; }
/* results: a few numbers, each labelled with what kind of evidence it is */
.results-lede { margin: calc(var(--s6) * -1) 0 var(--s8); max-width: 62ch; color: var(--muted); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.figures { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.figures li { grid-column: span 2; background: var(--canvas); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3); transition: background var(--duration-normal, .3s) var(--ease); }
.figures li:hover { background: #0f0f10; }
.figures li.lead { grid-column: span 3; padding: var(--s8) var(--s6); }
.figures .fig { margin: var(--s2) 0 0; font: 620 clamp(48px, 5.4vw, 72px)/0.92 var(--sans); letter-spacing: -0.055em; color: var(--text); font-variant-numeric: tabular-nums; }
.figures li.lead .fig { font-size: clamp(64px, 8vw, 112px); color: var(--accent-2); }
.figures .fig small { font-size: .45em; letter-spacing: -0.02em; color: var(--muted); margin: 0 .08em; }
.figures h3 { margin: 0; font-weight: 620; font-size: 19px; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.figures p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 56ch; text-wrap: pretty; }
.figures .src { margin-top: auto; padding-top: var(--s3); font: 500 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--muted-2); }
.misses-head { margin: var(--s10) 0 var(--s4); font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); }
.misses { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.misses li { padding: var(--s3) 0 var(--s3) var(--s5); border-top: 1px solid var(--line); position: relative; color: var(--muted); font-size: 16px; line-height: 1.55; }
.misses li::before { content: ''; position: absolute; left: 2px; top: calc(var(--s3) + .7em); width: 8px; height: 1px; background: var(--muted-2); }
@media (max-width: 860px) {
  .figures { grid-template-columns: 1fr; }
  .figures li, .figures li.lead { grid-column: auto; padding: var(--s6) var(--s5); }
}

/* one night: the home page's cycle, at landing scale */
.night-cycle > div { padding: var(--s6); }
.night-cycle .tier-name { margin: 0; font-size: 12px; }
.night-cycle .tier-when { margin: var(--s2) 0 0; font: 620 clamp(20px, 2.2vw, 26px)/1.1 var(--sans); letter-spacing: -0.03em; color: var(--text); }
.night-cycle .tier-when + p { margin: var(--s3) 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 34ch; }
.night-cycle .tier-model { margin: var(--s4) 0 0; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--accent); }
.home-hero .hero-tech { margin: var(--s3) auto 0; max-width: 46ch; font: 500 13px/1.6 var(--mono); letter-spacing: .02em; color: var(--muted); text-wrap: balance; }
.code-row .field-input { flex: 1 1 12rem; text-transform: uppercase; }
.code-row .btn { height: 46px; flex: 0 0 auto; }
.chip.existing { color: var(--muted); }
.index .body .chip { margin-bottom: var(--s3); }
.judge-footer { grid-template-columns: 1.5fr repeat(3, 1fr); }
.judge-footer p:not(:first-of-type), .judge-footer div + div p {
  margin: 0; padding: 5px 0; font-size: 13px; color: var(--muted); max-width: none;
}
.judge-footer > div:first-child p { margin-top: var(--s3); }

/* ── the live view: header, tabs and the two panes ──────────────────────── */

.live-view { padding-bottom: var(--s10); }
.live-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s5); padding-top: var(--s6); padding-bottom: var(--s5);
}
.live-title { display: grid; gap: var(--s3); min-width: 0; }
.live-actions { display: flex; gap: var(--s3); }
.live-status, .live-head .confirm { flex: 1 1 100%; }

.talker {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font: 500 12px/1.5 var(--mono); letter-spacing: .02em; color: var(--ink-soft);
}
.talker-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2);
  animation: p-breathe 3.2s ease-in-out infinite;          /* the site's presence dot */
}
.talker[data-state="cold"] .talker-dot { background: var(--muted); box-shadow: none; animation: none; }
.talker[data-state="warm"] .talker-dot { animation: none; }

.confirm {
  padding: var(--s4) var(--s5); border: 1px solid var(--line-strong); border-left: 2px solid var(--accent);
  border-radius: var(--r-sm); background: var(--surface-2);
}
.confirm p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); max-width: 60ch; }
.confirm-buttons { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

.tabs { display: none; }
.live-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); align-items: start; }
.pane { min-width: 0; }

@media (min-width: 960px) {
  .live-grid { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: var(--s8); }
  .pane-mind {
    position: sticky; top: calc(var(--nav-h) + var(--s4));
    max-height: calc(100dvh - var(--nav-h) - var(--s8)); overflow-y: auto; overscroll-behavior: contain;
  }
  .narrow-only { display: none; }
}
@media (max-width: 959.98px) {
  .tabs {
    position: sticky; top: var(--nav-h); z-index: 15; display: flex; gap: var(--s2);
    height: var(--tabs-h); align-items: center; background: var(--canvas);
    border-bottom: 1px solid var(--line);
  }
  .tab {
    position: relative; height: 36px; padding: 0 var(--s4); border: 1px solid transparent; border-radius: var(--r-full);
    background: transparent; color: var(--muted); font: 600 14px/1 var(--sans); letter-spacing: -0.01em; cursor: pointer;
    transition: color .18s, border-color .18s, background .18s;
  }
  .tab:hover { color: var(--text); }
  .tab[aria-selected="true"] { color: var(--text); border-color: var(--line-strong); background: var(--surface-2); }
  .tab-badge {
    margin-left: 6px; padding: 2px 7px; border-radius: var(--r-full); background: var(--accent);
    color: var(--canvas); font: 600 10px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  }
  .live-grid { padding-top: var(--s4); }
  .chat-empty, .pane-chat .night { border-top: 0; padding-top: var(--s3); }
  .live-grid[data-view="chat"] .pane-mind, .live-grid[data-view="mind"] .pane-chat { display: none; }
  .wide-only { display: none; }
}

/* ── the chat ───────────────────────────────────────────────────────────── */

.chat { display: flex; flex-direction: column; min-height: 52vh; }
.chat-empty { padding: var(--s6) 0 var(--s5); border-top: 1px solid var(--line); }
.chat-empty h2 { margin: 0; font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.04; letter-spacing: -0.04em; }
.chat-empty p { margin: var(--s3) 0 0; max-width: 52ch; color: var(--muted); font-size: 16px; }
.starters-label { margin: var(--s5) 0 0; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chat-empty p.starters-label { margin-top: var(--s6); max-width: none; font-size: 11px; color: var(--muted); }
.starters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.starter {
  min-height: 38px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-full);
  background: transparent; color: var(--ink-soft); font-size: 14px; line-height: 1.35; text-align: left; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.starter::after { content: " +"; color: var(--accent); }
.starter:hover { border-color: var(--text); color: var(--text); background: var(--surface-2); }
.starter:active:not(:disabled) { transform: scale(.98); }
.starter:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.chat-log { display: grid; gap: var(--s4); margin: 0; padding: var(--s5) 0 var(--s4); list-style: none; }
.chat-log:empty { padding: 0; }
.msg { display: grid; gap: 6px; max-width: min(46rem, 100%); scroll-margin-bottom: 112px; animation: msg-in .36s var(--ease) both; }
.msg-you .msg-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }  /* read out, not shown */
.msg-meta { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.msg-text { font-size: 16.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.msg-you { justify-self: end; justify-items: end; }
.msg-you .msg-text {
  padding: 11px 16px; border: 1px solid var(--line); border-radius: 18px 18px 6px 18px; background: var(--surface-2);
}
.msg-anjo .msg-text { padding-left: 14px; border-left: 2px solid var(--line-strong); }
.msg-anjo.msg-opener .msg-text { border-left-color: var(--accent); }
.msg-anjo.msg-opener .msg-meta { color: var(--accent); }
.msg-phase { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.4 var(--mono); color: var(--muted); padding-left: 16px; }
.msg-phase::after { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--accent-2); animation: phase-run 1.1s var(--ease) infinite; transform-origin: left; }
.msg.is-pending .msg-text:empty { display: none; }
.msg.is-error .msg-text { border-left-color: var(--alert); color: var(--ink-soft); }
.chat-status[data-kind="error"] { color: var(--alert); }

/* on a phone: what MIND last did, one tap from the Mind tab */
.mind-line {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: var(--s2) 0 0; padding: 10px 12px;
  border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-soft); text-align: left; cursor: pointer;
  font: 500 12px/1.45 var(--mono); transition: border-color .18s, background .18s;
}
.mind-line-k { flex: none; color: var(--accent); letter-spacing: .14em; }
.mind-line-text { flex: 1 1 auto; min-width: 0; }
.mind-line-go { flex: none; color: var(--muted); transition: transform .25s var(--ease); }
.mind-line[data-busy="true"] .mind-line-text { color: var(--accent-2); }
.mind-line:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--text) 6%, transparent); }
.mind-line:hover .mind-line-go { transform: translateX(3px); }
.mind-line:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 960px) { .chat .mind-line { display: none; } }
.live-foot { margin-top: 0; }
.judge-live footer { padding-top: var(--s5); padding-bottom: var(--s5); }

.composer {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: flex-end; gap: var(--s3);
  margin-top: auto; padding: var(--s3) 0 calc(var(--s2) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--canvas) 28%);
}
.composer textarea {
  flex: 1 1 auto; min-width: 0; min-height: 46px; max-height: 168px; padding: 11px 14px; resize: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--canvas); color: var(--text);
  font-size: 16px; line-height: 1.45; transition: border-color .2s;
}
.composer textarea:focus { outline: none; border-color: var(--accent); }
.composer textarea:disabled { opacity: .55; }
.composer .btn { height: 46px; flex: none; }
.composer-hint { margin: 0; font: 500 11px/1.6 var(--mono); letter-spacing: .03em; color: var(--muted); }

@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes phase-run { 0% { transform: scaleX(.15); opacity: .4; } 50% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(.15); opacity: .4; } }

@media (max-width: 700px) {
  .judge-footer { grid-template-columns: repeat(2, 1fr); }
  .live-head { padding-top: var(--s5); padding-bottom: var(--s4); }
  .live-actions { width: 100%; }
  .live-actions .btn { flex: 1 1 auto; }
  .msg-text { font-size: 16px; }
}
@media (max-width: 380px) {
  .code-row .btn { width: 100%; }
}
@media (max-width: 520px) {
  .hero-code .code-row .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .talker-dot, .msg-phase::after { animation: none; }
  .msg { animation: none; }
  .field-input, .composer textarea, .starter, .tab, .hero-alt, .hero-alt span, .mind-line, .mind-line-go { transition: none; }
}
.night-cycle + .hood { margin: var(--s4) 0 0; max-width: 72ch; font: 500 13px/1.6 var(--mono); letter-spacing: .02em; color: var(--muted-2); }
.figures li.half { grid-column: span 3; }
.receipt { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 920px; }
.receipt li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.receipt .r-step { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.receipt .r-what { color: var(--text); font-size: 16.5px; line-height: 1.55; }
.receipt code { font: 500 13.5px/1 var(--mono); color: var(--accent-2); }
#receipt .hood, .night-cycle + .hood { color: var(--muted); }
#receipt .hood { margin-top: var(--s4); font: 500 13px/1.6 var(--mono); }
.research-card { margin-top: var(--s5); max-width: 860px; padding: var(--s5) var(--s6); border: 1px solid var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; gap: var(--s3); }
.research-card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.research-card strong { color: var(--text); font-weight: 600; }
.evidence-link { margin: var(--s5) 0 0; font: 500 12px/1.5 var(--mono); letter-spacing: .04em; color: var(--muted); }
.evidence-link a { color: var(--accent-2); }
.evidence-link a:hover, .evidence-link a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 860px) {
  .figures li.half { grid-column: auto; }
  .receipt li { grid-template-columns: 1fr; gap: var(--s2); }
}

/* the before/after: one real question, the next morning, with and without its notes */
.compare-q { margin: 0 0 var(--s5); max-width: 70ch; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; }
.compare-q::before { content: 'Asked: '; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); vertical-align: 3px; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.compare > div { background: var(--canvas); padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }
.compare > div.after { background: color-mix(in srgb, var(--accent) 5%, var(--canvas)); }
.compare h3 { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.compare .after h3 { color: var(--accent); }
.compare blockquote { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; white-space: pre-line; }
.compare .after blockquote { color: var(--text); }
.compare-note { margin: var(--s4) 0 0; max-width: 72ch; font: 400 15px/1.6 var(--sans); color: var(--muted); text-wrap: pretty; }
.compare-note strong { color: var(--text); font-weight: 500; }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }
.compare-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compare mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-2); padding: 0 .15em; border-radius: 3px; }
.compare-note code { font: 500 11.5px/1 var(--mono); color: var(--accent-2); }
@media (max-width: 860px) { .compare-3 { grid-template-columns: 1fr; } }

/* all three held-out people beside the picked example (Astra round 5: show the spread, not only the best case) */
.per-person { margin: var(--s6) 0 0; width: 100%; max-width: 860px; border-collapse: collapse; font-size: 15px; }
.per-person caption { caption-side: top; text-align: left; padding: 0 0 var(--s3); color: var(--muted); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.per-person th, .per-person td { padding: var(--s3) var(--s4) var(--s3) 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; }
.per-person thead th { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); vertical-align: bottom; }
.per-person tbody th { color: var(--text); }
.per-person td { font-variant-numeric: tabular-nums; color: var(--text); }
.per-person td.below { color: var(--muted-2); }
.per-person tr.all th, .per-person tr.all td { border-top-color: var(--muted-2); font-weight: 600; }
.results-lede strong { color: var(--text); font-weight: 600; }
.research-card { margin-top: var(--s8); }
@media (max-width: 600px) { .per-person { font-size: 13.5px; } .per-person th, .per-person td { padding-right: var(--s2); } }