/* Ask the match: a conversation with one match. The studio's tokens and their meanings: lime is
   a checked answer, gold is the ledger and the Critic's verdict, red only where the Critic refused. */
:root {
  --navy: #0A1F2E;
  --navy-deep: #06141F;
  --navy-raised: #0F2A3D;
  --chalk: #F4F1E8;
  --chalk-dim: rgba(244, 241, 232, 0.72);
  --chalk-faint: rgba(244, 241, 232, 0.16);
  --lime: #B8F53D;
  --gold: #C9A227;
  --card: #F25C54;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--chalk); font: 400 1rem / 1.5 var(--body);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  background: radial-gradient(60rem 40rem at 100% 0%, rgba(184, 245, 61, 0.06), transparent 60%), var(--navy-deep);
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
[hidden] { display: none !important; }

/* The page's header is the rooms' bar (nav.css) */
.topnav { padding-inline: 1.5rem; }

.room { display: grid; grid-template-columns: minmax(17rem, 23rem) minmax(0, 1fr); min-height: 0; }

/* ---------- the match ---------- */
.match { display: grid; align-content: start; gap: 1rem; padding: 1.25rem; border-right: 1px solid var(--chalk-faint); overflow: auto; }
.pick { display: grid; gap: 0.75rem; }
.pick label { display: grid; gap: 0.2rem; font-size: 0.75rem; color: var(--chalk-dim); }
.pick select { padding: 0.45rem 0.55rem; border: 1px solid var(--chalk-faint); border-radius: 4px; background: var(--navy-raised); font-size: 0.9375rem; color: var(--chalk); }
.pick-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.when { display: grid; gap: 0.35rem; margin: 0; padding: 0; border: 0; }
.when legend { margin-bottom: 0.3rem; font-size: 0.75rem; color: var(--chalk-dim); }
.when label { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 0.5rem; padding: 0.5rem 0.65rem; border: 1px solid var(--chalk-faint); border-radius: 4px; font-size: 0.9375rem; color: var(--chalk); cursor: pointer; }
.when label:has(input:checked) { border-color: var(--lime); background: rgba(184, 245, 61, 0.06); }
.when small { grid-column: 2; font-size: 0.75rem; color: var(--chalk-dim); }
.when input { accent-color: var(--lime); }
.go { padding: 0.55rem 1.1rem; border: 0; border-radius: 4px; background: var(--lime); color: var(--navy-deep); font-weight: 600; cursor: pointer; }
.go:disabled { opacity: 0.45; cursor: not-allowed; }
.quiet { justify-self: start; padding: 0.4rem 0.75rem; border: 1px solid rgba(201, 162, 39, 0.6); border-radius: 4px; background: transparent; color: var(--gold); font-size: 0.8125rem; cursor: pointer; }
.quiet:hover { background: rgba(201, 162, 39, 0.1); }

.card { display: grid; gap: 0.6rem; padding: 1rem; background: var(--navy); border: 1px solid var(--chalk-faint); border-radius: 6px; }
.score { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font: 800 1.6rem / 1 var(--display); }
.team { display: flex; align-items: center; gap: 0.45rem; }
.team i { width: 0.5rem; height: 1.4rem; border-radius: 1px; background: var(--team, var(--chalk-dim)); }
.goals { font-size: 2.2rem; font-variant-numeric: tabular-nums; }
.status { margin: 0; font-size: 0.875rem; color: var(--chalk-dim); }
.clock { font: 500 1rem / 1 var(--mono); color: var(--lime); margin-right: 0.4rem; }
.pitch { width: 100%; }
.pitch rect, .pitch line, .pitch circle { fill: none; stroke: var(--chalk-faint); stroke-width: 0.5; }
.pitch > rect:first-child { fill: rgba(30, 123, 69, 0.18); }
.pitch .shot { stroke: var(--navy-deep); stroke-width: 0.4; }
.pitch .shot.miss { fill-opacity: 0.35; }
.pitch .shot.cited { stroke: var(--gold); stroke-width: 1; }
.seal { display: grid; gap: 0.35rem; padding-top: 0.6rem; border-top: 1px solid var(--chalk-faint); }
.seal p { margin: 0; font-size: 0.8125rem; color: var(--chalk-dim); }
.seal strong { font: 800 1rem / 1 var(--display); color: var(--gold); margin-right: 0.35rem; }
.seal code { font: 400 0.6875rem / 1.4 var(--mono); color: var(--gold); word-break: break-all; }
.seal-result.good { color: var(--lime); }
.seal-result.bad { color: var(--card); }
.rules { margin: 0; font-size: 0.8125rem; color: var(--chalk-dim); }

/* ---------- the conversation ---------- */
.talk { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.empty { align-self: center; justify-self: center; max-width: 40rem; padding: 2rem 1.5rem; grid-row: 1; grid-column: 1; }
.empty h1 { margin: 0 0 0.6rem; font: 900 clamp(2.4rem, 5vw, 4rem) / 0.95 var(--display); }
.empty p { margin: 0; color: var(--chalk-dim); font-size: 1.0625rem; max-width: 52ch; }
.thread { grid-row: 1; grid-column: 1; list-style: none; margin: 0; padding: 1.5rem clamp(1rem, 3vw, 2.5rem); overflow: auto; display: flex; flex-direction: column; gap: 1rem; }
.asked { align-self: flex-end; max-width: min(36rem, 85%); padding: 0.6rem 0.9rem; background: var(--navy-raised); border-radius: 12px 12px 2px 12px; }
.asked small { display: block; font: 500 0.6875rem / 1.2 var(--mono); color: var(--chalk-dim); margin-bottom: 0.15rem; }
.reply { align-self: flex-start; max-width: min(44rem, 92%); padding: 0.85rem 1rem; background: var(--navy); border-left: 4px solid var(--lime); border-radius: 2px 12px 12px 12px; }
.reply.cannot { border-left-color: var(--chalk-faint); }
.reply.refused { border-left-color: var(--card); }
.reply.thinking { border-left-color: var(--gold); color: var(--chalk-dim); }
.reply .verdict { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.35rem; font-size: 0.8125rem; font-weight: 600; color: var(--lime); }
.reply.cannot .verdict { color: var(--chalk-dim); }
.reply.refused .verdict { color: var(--card); }
.reply .verdict svg { width: 1.1rem; height: 1.1rem; }
.reply .said { margin: 0 0 0.5rem; font-size: 1.125rem; line-height: 1.45; }
.reply .said:lang(ur) { font: 400 1.2rem / 2.2 "Noto Nastaliq Urdu", serif; }
.reply .said:lang(ar) { font: 400 1.25rem / 1.8 "Noto Naskh Arabic", serif; }
.reply details { margin: 0.35rem 0; font-size: 0.875rem; }
.reply summary { cursor: pointer; color: var(--chalk-dim); }
.reply ol { margin: 0.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.reply li::marker { font: 500 0.75rem var(--mono); color: var(--lime); }
.evidence { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
.evidence code { font: 400 0.6875rem / 1 var(--mono); padding: 0.2rem 0.35rem; border-radius: 3px; background: rgba(184, 245, 61, 0.1); color: var(--lime); }
.struck { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.8125rem; }
.struck li::marker { color: var(--card); }
.struck s { color: var(--chalk-dim); text-decoration-color: var(--card); }
.struck small { display: block; font: 400 0.75rem / 1.4 var(--mono); color: var(--chalk-dim); }
.proof { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--chalk-faint); font: 400 0.75rem / 1.3 var(--mono); color: var(--gold); }
.proof .quiet { font-family: var(--body); }
.proof-result { flex-basis: 100%; }
.proof-result.good { color: var(--lime); }
.proof-result.bad { color: var(--card); }

.compose { padding: 0.75rem clamp(1rem, 3vw, 2.5rem) 1rem; border-top: 1px solid var(--chalk-faint); background: var(--navy); }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; }
.chips button { padding: 0.3rem 0.7rem; border: 1px solid var(--chalk-faint); border-radius: 999px; background: transparent; font-size: 0.8125rem; color: var(--chalk-dim); cursor: pointer; }
.chips button:hover { color: var(--lime); border-color: rgba(184, 245, 61, 0.5); }
.ask { display: flex; gap: 0.5rem; }
.ask input { flex: 1; min-width: 0; padding: 0.7rem 0.85rem; border: 1px solid var(--chalk-faint); border-radius: 6px; background: var(--navy-deep); font-size: 1.0625rem; }
.ask input::placeholder { color: var(--chalk-dim); opacity: 0.75; }
.mic { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; border: 1px solid rgba(184, 245, 61, 0.6); border-radius: 6px; background: transparent; color: var(--lime); font-weight: 600; cursor: pointer; }
.mic svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mic[aria-pressed="true"] { background: var(--card); border-color: var(--card); color: var(--navy-deep); }
.mic:disabled { opacity: 0.45; cursor: not-allowed; }
.left { margin: 0.4rem 0 0; min-height: 1.2em; font: 400 0.75rem / 1.2 var(--mono); color: var(--chalk-dim); }

@media (prefers-reduced-motion: no-preference) {
  .asked, .reply { animation: arrive 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
  .reply.thinking .verdict::after { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--gold); animation: pulse 1s ease-in-out infinite; }
  .mic[aria-pressed="true"] { animation: listening 1.2s ease-in-out infinite; }
}
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } }
@keyframes pulse { 50% { opacity: 0.2; } }
@keyframes listening { 50% { box-shadow: 0 0 0 6px rgba(242, 92, 84, 0.25); } }

@media (max-width: 56rem) {
  html, body { height: auto; }
  .room { grid-template-columns: minmax(0, 1fr); }
  .match { border-right: 0; border-bottom: 1px solid var(--chalk-faint); }
  .thread { max-height: none; overflow: visible; }
  .compose { position: sticky; bottom: 0; }
  .topnav { padding-inline: 1rem; }
}