/* DeepSeek POE — operational, LIGHT, built for reading a plan and nine answers.
   No gradients, no shadows-for-decoration, no emoji. The plan pane is the anchor of the
   layout: findings are subordinate to it, unlike every earlier build where the plan
   disappeared behind tabs.

   LIGHT THEME. The palette below is the whole theme — every component reads from it, so
   changing the look means changing these values and nothing else. Two rules keep it honest:

   1. `color-scheme: light` is declared, not assumed. Without it the browser paints native
      furniture — scrollbars, the textarea's resize grip, form controls — for its own default
      scheme, which on a light page is the difference between "light theme" and "dark page
      with white boxes".

   2. Every text colour here is chosen for CONTRAST ON WHITE, not to look like the dark
      palette. A dark theme's accents are pastel because they sit on near-black; the same
      values on white are unreadable. Each accent is darkened until it carries body text at
      its size: --expansion 4.5:1, --critique 4.9:1, --accent 4.6:1, --text-dim 4.6:1. */

:root {
  color-scheme: light;

  --bg: #f7f8fa;          /* page */
  --bg-2: #ffffff;        /* cards, panes, bars — raised surfaces */
  --bg-3: #eef1f5;        /* controls and inline code */
  --line: #d5dae1;        /* borders */
  --line-strong: #b9c0ca;

  --text: #1b1f24;
  --text-dim: #5a6472;    /* 4.6:1 on white */
  --text-faint: #7b8494;  /* metadata only, never body copy */

  --accent: #1d5fa8;
  --on-accent: #ffffff;
  --expansion: #1f7048;
  --critique: #a8452f;
  --warn: #8a5a06;
  --error: #b3362f;

  --mark: #fff0ab;        /* the plan highlight — an absence of colour, not a new hue */
  --mark-active: #ffe066;

  /* The star fill is a GRAPHICAL object, not text: 3:1 is its bar (WCAG 1.4.11), and pushing
     it to 4.5:1 turns a gold star into a brown one. It is a token rather than a literal so a
     test can state that distinction instead of guessing which literals are ink and which are
     fill. --star-empty is the unfilled star: deliberately low-contrast, since it reads as
     absence, and it is never the only signal — the value is printed beside it. */
  --star: #c08104;
  --star-empty: #c2c8d2;

  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* THE `hidden` ATTRIBUTE MUST WIN.
 *
 * The browser default for [hidden] is `display: none`, but ANY author rule that sets a
 * display value overrides it. Several elements here are laid out with grid or flex while
 * also being toggled with `.hidden = true`, so without this rule they stayed on screen:
 * the login card sat above the app at full viewport height, and the app was pushed below
 * the fold. Setting `element.hidden = true` looked like it worked and did nothing.
 *
 * !important is correct here. `hidden` is a semantic instruction from the markup or the
 * script — "this is not shown" — and no layout rule should be able to contradict it.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.muted { color: var(--text-dim); }
.small { font-size: 12px; }
.warn-text { color: var(--warn); }
.error { color: var(--error); }

button {
  font: inherit;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  color: var(--text);
  padding: 6px 12px;
}
button:hover { background: var(--bg-3); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
button.primary:hover { background: #17508f; }
button.ghost { background: transparent; }
button.ghost:hover { background: var(--bg-3); }
button:disabled { opacity: .5; cursor: default; }
button:disabled:hover { background: transparent; }

/* ---------- login ---------- */

.login { display: grid; place-items: center; min-height: 100vh; }
.login-card { width: 340px; text-align: center; }
.login-card h1 { font-size: 20px; font-weight: 600; letter-spacing: .02em; margin: 0 0 4px; }
.login-card h1 span { color: var(--accent); }
.login-card form { display: flex; gap: 8px; margin-top: 20px; }
.login-card input {
  flex: 1; background: var(--bg-2); border: 1px solid var(--line-strong);
  border-radius: 4px; padding: 8px 10px; color: var(--text); font: inherit;
}
.login-note { margin-top: 22px; line-height: 1.6; text-align: left; }
.login-card code {
  font-family: var(--mono); font-size: 11px;
  background: var(--bg-3); padding: 1px 4px; border-radius: 3px;
}
#skip-login { margin-top: 14px; width: 100%; }
.build-stamp {
  margin-top: 18px; font-family: var(--mono); font-size: 10px; color: var(--text-faint);
}
.build-inline {
  font-family: var(--mono); font-size: 10px; color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 8px; padding: 2px 7px;
}
.copy-btn { font-size: 10px; padding: 2px 8px; }

/* ---------- chrome ---------- */

.bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.brand { font-weight: 600; letter-spacing: .02em; }
.brand span { color: var(--accent); }
.bar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.chip {
  font-size: 12px; padding: 3px 9px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--text-dim); font-family: var(--mono);
  background: var(--bg);
}
.chip.mock { color: var(--expansion); border-color: #b7d8c6; background: #f0f8f3; }
.chip.live { color: var(--warn); border-color: #e2cfa6; background: #fdf7ea; }
.chip.warn { color: var(--warn); border-color: #e2cfa6; background: #fdf7ea; }

/* ---------- layout ---------- */

.stage {
  display: grid; grid-template-columns: minmax(340px, 30%) 1fr;
  gap: 1px; background: var(--line); height: calc(100vh - 45px);
}
.plan-pane, .panel-pane { background: var(--bg); overflow: auto; padding: 14px 16px; }

.pane-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.pane-head h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dim); margin: 0; font-weight: 600; }

/* ---------- the plan, which owns the left side ---------- */

.plan-text {
  white-space: pre-wrap; word-wrap: break-word;
  font-size: 14px; line-height: 1.7; margin-bottom: 14px;
  padding: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px;
}
.plan-input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 4px;
  color: var(--text); font: inherit; padding: 10px; resize: vertical; min-height: 180px;
}
.plan-input::placeholder { color: var(--text-faint); }

mark.anchor-mark {
  background: var(--mark); color: #3b3520; border-radius: 2px;
  padding: 1px 2px; box-decoration-break: clone;
  transition: background .15s;
}
mark.anchor-mark:hover { background: var(--mark-active); }

/* ---------- compose ---------- */

.compose { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.preset { font-size: 12px; padding: 4px 9px; }

.picker { display: flex; flex-direction: column; gap: 4px; }
.pick {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: baseline;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg-2); cursor: pointer;
}
.pick.on { border-color: var(--accent); }
.pick-name { font-weight: 500; }
.pick-team { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; padding: 1px 5px; border-radius: 8px; }
.pick-team.expansion { color: var(--expansion); border: 1px solid #b7d8c6; background: #f0f8f3; }
.pick-team.critique { color: var(--critique); border: 1px solid #ecc7bd; background: #fdf2ef; }
.pick-sum { grid-column: 2 / 4; color: var(--text-faint); font-size: 12px; }

.compose-actions { display: flex; gap: 8px; }
.estimate, .gate {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px;
  padding: 10px; font-size: 12px;
}
.estimate ul { margin: 6px 0 0; padding-left: 18px; font-family: var(--mono); }
.est-head { margin-bottom: 2px; }
.gate button { margin-top: 8px; display: block; }

/* ---------- two teams, two columns ---------- */

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.column { min-width: 0; }
.col-head {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; font-weight: 600;
}
.col-head.expansion { border-color: var(--expansion); color: var(--expansion); }
.col-head.critique { border-color: var(--critique); color: var(--critique); }
.cards { display: flex; flex-direction: column; gap: 10px; }

.card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px;
  padding: 10px 12px; cursor: pointer; transition: border-color .15s;
}
.card:hover { border-color: var(--line-strong); }
.card.focused { border-color: var(--accent); }

.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-name { font-weight: 600; }
.card-state {
  font-size: 11px; font-family: var(--mono); padding: 2px 7px; border-radius: 9px;
  border: 1px solid var(--line); color: var(--text-dim); white-space: nowrap; background: var(--bg);
}
.card-state.working { color: var(--accent); border-color: #b8d0e8; background: #f0f6fc; }
.card-state.ok { color: var(--expansion); border-color: #b7d8c6; background: #f0f8f3; }
.card-state.error, .card-state.timeout { color: var(--error); border-color: #eec3c0; background: #fdf2f2; }
.card-state.adds_little, .card-state.degraded { color: var(--warn); border-color: #e2cfa6; background: #fdf7ea; }
.card-state.pending { color: var(--text-faint); }

.card-sum { margin-top: 3px; }
.thinking-note {
  padding: 7px 9px; border-left: 2px solid var(--accent); background: #f0f6fc;
  border-radius: 3px; line-height: 1.5;
}
.card-body {
  margin-top: 8px; max-height: 420px; overflow: auto;
  white-space: pre-wrap; word-wrap: break-word; font-size: 13px; line-height: 1.6;
}
.card-body h3, .card-body h4 { font-size: 13px; margin: 10px 0 4px; color: var(--text); }
.card-body code { font-family: var(--mono); background: var(--bg-3); padding: 1px 4px; border-radius: 3px; font-size: 12px; }

.card-foot { margin-top: 8px; display: flex; gap: 8px; align-items: center; font-family: var(--mono); flex-wrap: wrap; }
.card-foot .foot-cost { color: var(--text-faint); }
.card-foot .foot-time { color: var(--text-faint); }

/* ---------- stars: the feedback signal, per answer ---------- */

.stars { display: inline-flex; align-items: center; gap: 1px; }
.star {
  background: none; border: none; padding: 0 1px; font-size: 17px; line-height: 1;
  color: var(--star-empty); cursor: pointer;
}
.star:hover { color: var(--star); background: none; }
.star.on { color: var(--star); }
.star:focus-visible { outline: 2px solid var(--accent); border-radius: 2px; }
.star-value { margin-left: 6px; font-family: var(--mono); }
.stars-compact { color: var(--star); letter-spacing: .06em; font-size: 12px; }
.stars-compact.muted { color: var(--star-empty); }
.expand-btn { font-size: 10px; padding: 2px 8px; margin-left: auto; }

/* ---------- the fullscreen answer ---------- */

body.expanded-open { overflow: hidden; }

.expand {
  position: fixed; inset: 0; z-index: 40; background: var(--bg);
  display: flex; flex-direction: column;
}
.expand-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.expand-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.expand-name { font-weight: 600; font-size: 16px; }
.expand-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 8px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono);
  background: var(--bg-2);
}
.expand-body {
  flex: 1; overflow: auto; padding: 20px 16px;
  max-width: 900px; width: 100%; margin: 0 auto;
  white-space: pre-wrap; word-wrap: break-word; font-size: 15px; line-height: 1.75;
}
.expand-body h3 { font-size: 16px; margin: 18px 0 6px; }
.expand-body h4 { font-size: 15px; margin: 14px 0 6px; }
.expand-body code {
  font-family: var(--mono); background: var(--bg-3); padding: 1px 4px;
  border-radius: 3px; font-size: 13px;
}
.expand-foot {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bg-2);
}
.expand-stars .star { font-size: 24px; padding: 0 3px; }

/* ---------- leaderboard ---------- */

.leaderboard { width: 520px; }
.lb-intro { margin: 0 0 12px; line-height: 1.6; }
.lb-table { display: flex; flex-direction: column; gap: 4px; }
.lb-row {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 6px 10px;
  align-items: baseline; padding: 8px 10px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px;
}
.lb-row.unqualified { opacity: .72; }
.lb-rank { font-family: var(--mono); font-size: 13px; color: var(--text-dim); text-align: right; }
.lb-expert { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.lb-name { font-weight: 500; }
.lb-note { grid-column: 2 / 4; }
.lb-mean { display: flex; align-items: baseline; gap: 6px; font-family: var(--mono); }
.lb-mean strong { font-size: 14px; color: var(--text); }
.lb-runs { grid-column: 2; font-family: var(--mono); }
.lb-dist { grid-column: 3; display: flex; gap: 2px; align-items: center; }
.lb-bar {
  display: inline-block; height: 8px; background: #d8a12a; border-radius: 2px; opacity: .9;
}
.lb-bar[data-n="5"] { background: var(--expansion); }
.lb-bar[data-n="4"] { background: #6aa84f; }
.lb-bar[data-n="3"] { background: var(--star); }
.lb-bar[data-n="1"], .lb-bar[data-n="2"] { background: var(--critique); }
.lb-never { margin-top: 12px; line-height: 1.6; }

/* ---------- badges ---------- */

.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; align-items: center; }
.grade { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 3px; }
.grade.strong { background: #dff0e7; color: #1a5c3c; }
.grade.ok { background: #e2ecf6; color: #1d5fa8; }
.grade.weak { background: #f7e8e2; color: #96432c; }
.badge {
  font-size: 10px; font-family: var(--mono); padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--line); color: var(--text-faint);
}
.badge.pass { color: #2c6b4c; border-color: #b7d8c6; background: #f0f8f3; }
.badge.fail { color: var(--warn); border-color: #e2cfa6; background: #fdf7ea; }
.anchor-sum { margin-top: 6px; }

.dist { font-size: 11px; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--line); }
.dist.distinct { color: var(--expansion); border-color: #b7d8c6; background: #f0f8f3; }
.dist.partial { color: var(--warn); border-color: #e2cfa6; background: #fdf7ea; }
.dist.costume { color: var(--error); border-color: #eec3c0; background: #fdf2f2; }

.error-card {
  margin-top: 8px; padding: 8px; border-radius: 4px;
  background: #fdf2f2; border: 1px solid #eec3c0; color: #8f2f2a; font-size: 12px;
}

/* ---------- verdict (collapsed by default) ---------- */

.verdict {
  margin-top: 16px; border: 1px solid var(--line);
  border-radius: 5px; background: var(--bg-2); padding: 8px 12px;
}
.verdict-summary {
  cursor: pointer; font-size: 12px; color: var(--text-dim);
  list-style: none; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.verdict-summary::-webkit-details-marker { display: none; }
.verdict-summary::before {
  content: "▸"; color: var(--text-faint); font-size: 10px;
}
.verdict[open] .verdict-summary::before { content: "▾"; }
.verdict-body {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.verdict .v { font-size: 12px; padding: 4px 10px; }

/* ---------- archive ---------- */

.archive {
  position: fixed; top: 45px; right: 0; bottom: 0; width: 420px;
  background: var(--bg-2); border-left: 1px solid var(--line);
  padding: 14px 16px; overflow: auto; z-index: 20;
}
.archive-list { display: flex; flex-direction: column; gap: 6px; }
.archive-item {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 9px 11px; background: var(--bg); border: 1px solid var(--line);
}
.archive-item:hover { border-color: var(--accent); background: var(--bg-3); }
.ai-plan { font-size: 13px; }

@media (max-width: 1100px) {
  .stage { grid-template-columns: 1fr; height: auto; }
  .columns { grid-template-columns: 1fr; }
  .archive, .leaderboard { width: 100%; }
}