/* Resume Builder — plate-system UI
   Palette (5 values, per the design system: never introduce a sixth hue) */

:root {
  --paper:    #efedea;
  --ink:      #0a0a0a;
  --cobalt:   #1e2edc;
  --sky:      #7fb2e8;
  --signal:   #e0492a;
  --surround: #e5e5e5;

  --serif: "Instrument Serif", Georgia, serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html { font-variant-numeric: tabular-nums; }

body {
  background: var(--surround);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100svh;
}

/* ══ Shared type roles ══ */

.meta {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
}
.mono { font-family: var(--mono); font-size: 0.8rem; }
.mono.small { font-size: 0.7rem; }
.caption { font-size: 0.8125rem; line-height: 1.45; max-width: 34ch; opacity: 0.85; }
.card-title { font-family: var(--serif); font-size: 1.35rem; }
.hint { font-size: 0.85rem; opacity: 0.75; margin: 8px 0 14px; }
.opt { opacity: 0.5; text-transform: none; letter-spacing: 0; }

/* ══ App frame ══ */

.app { display: flex; min-height: 100svh; }

/* ── Rail: the ink plate ── */
.rail {
  width: 264px;
  flex-shrink: 0;
  background: var(--ink);
  color: var(--paper);
  margin: clamp(0.75rem, 1.2vw, 1.25rem);
  margin-right: 0;
  padding: 1.4rem 1.2rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 34px rgb(0 0 0 / 0.09);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: sticky;
  top: clamp(0.75rem, 1.2vw, 1.25rem);
  /* Stretch to the plate's full height. Aligned flex-start it ended wherever its content
     ran out, leaving a tall column of bare ground below it — an orphaned card rather than
     the ink plate the series pairs against paper. */
  align-self: stretch;
  height: calc(100svh - 2 * clamp(0.75rem, 1.2vw, 1.25rem));
}

.rail-head { display: flex; justify-content: space-between; align-items: flex-start; }
.wordmark { font-family: var(--serif); font-size: 1.7rem; line-height: 0.95; letter-spacing: -0.02em; }
.rail-meta { text-align: right; opacity: 0.55; }

.session-list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
  min-height: 60px;
  border-top: 1px solid rgb(239 237 234 / 0.18);
}
.session-item {
  display: grid;
  grid-template-columns: 10px 1fr auto 14px;
  gap: 8px;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgb(239 237 234 / 0.12);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.85rem;
  text-align: left;
  padding: 10px 6px;
  cursor: pointer;
}
.session-item:hover { background: rgb(239 237 234 / 0.06); }
.session-item.active { background: rgb(127 178 232 / 0.14); box-shadow: inset 2px 0 0 var(--sky); }
.session-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-score { opacity: 0.6; }
.session-del { opacity: 0; text-align: center; font-size: 1rem; }
.session-item:hover .session-del { opacity: 0.6; }
.session-del:hover { opacity: 1 !important; color: var(--signal); }

.rail-foot { border-top: 1px solid rgb(239 237 234 / 0.18); padding-top: 0.9rem; display: flex; flex-direction: column; gap: 6px; }
.rail-foot .meta { opacity: 0.55; }

/* ── Repo link + author credit ──
   Sits in the mono metadata register so it reads as part of the plate's furniture
   rather than a bolted-on badge. */
.repo-link {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(239 237 234 / 0.18);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.62;
  transition: opacity 0.18s ease;
}
.repo-link:hover { opacity: 1; }
.repo-link:focus-visible { outline: 1px solid var(--sky); outline-offset: 3px; opacity: 1; }
.gh-mark { flex-shrink: 0; }
.repo-label { flex: 1; }
/* The count only appears once it has actually been fetched, so a rate-limited or
   offline load shows a clean link instead of a zero. */
.repo-stars {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border: 1px solid rgb(239 237 234 / 0.3);
}
.repo-stars::before { content: "★ "; }

.rail-credit {
  margin-top: 0.7rem;
  opacity: 0.38;
  line-height: 1.5;
}
.profile-status { font-size: 0.82rem; display: flex; align-items: center; gap: 8px; }

/* status dots */
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(239 237 234 / 0.3); display: inline-block; flex-shrink: 0; }
.dot.good { background: var(--sky); }
.dot.run  { background: var(--sky); animation: pulse 1.2s ease-in-out infinite; }
.dot.bad  { background: var(--signal); }
.dot.warn { background: transparent; border: 1.5px solid var(--signal); }
@keyframes pulse { 50% { opacity: 0.25; } }

/* ── Desk & sheets ── */

.desk { flex: 1; min-width: 0; }

.sheet {
  --ground: var(--paper);
  --figure: var(--ink);
  --accent: var(--cobalt);
  background: var(--ground);
  color: var(--figure);
  margin: clamp(0.75rem, 1.2vw, 1.25rem);
  min-height: calc(100svh - 2 * clamp(0.75rem, 1.2vw, 1.25rem));
  padding: clamp(1.5rem, 2.6vw, 2.75rem);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 34px rgb(0 0 0 / 0.09);
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2vw, 1.8rem);
}
.sheet.cobalt { --ground: var(--cobalt); --figure: var(--paper); --accent: var(--sky); }
.sheet.ink    { --ground: var(--ink);    --figure: var(--paper); --accent: var(--sky); }

.sheet-top { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; }
.sheet-meta { text-align: right; opacity: 0.65; flex-shrink: 0; }

/* Display type carries the system. The old clamp topped out at 3.6rem, which read as a
   large heading rather than the poster-scale statement the series is built around. */
.display-line {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6.4vw, 6.25rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  max-width: 15ch;
}
.display-line em { font-style: normal; color: var(--accent); }

/* ── The heat field ──
   The system's signature visual, and the thing this page was missing: without it every
   surface was the same furniture-only plate, which the design system calls a template
   rather than a series. The canvas is absolutely positioned so it never participates in
   intrinsic sizing — a canvas with width/height attributes carries an aspect ratio and
   will otherwise claim a height of its own and blow the sheet open. */
.field-band {
  position: relative;
  height: clamp(150px, 22vh, 260px);
  margin: 0 calc(-1 * clamp(1.5rem, 2.6vw, 2.75rem));
  border-top: 1px solid color-mix(in srgb, var(--figure) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--figure) 18%, transparent);
  overflow: hidden;
}
.field-band canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;   /* one ImageData pixel per cell, upscaled hard */
  display: block;
}

/* ══ Forms ══ */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 8px;
}
input[type="text"], input[type="url"], input[type="password"], textarea {
  width: 100%;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--figure) 30%, transparent);
  color: var(--figure);
  padding: 11px 13px;
  font-size: 0.92rem;
  font-family: var(--sans);
  resize: vertical;
  border-radius: 0;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
::placeholder { color: color-mix(in srgb, var(--figure) 40%, transparent); }
.url-row { display: flex; gap: 10px; }
.url-row input { flex: 1; }

/* ══ Buttons ══ */

.btn {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 11px 20px;
  border: 1px solid var(--figure, var(--ink));
  background: transparent;
  color: var(--figure, var(--ink));
  cursor: pointer;
  border-radius: 0;
  transition: background 0.12s, color 0.12s;
}
.btn.primary { background: var(--accent, var(--cobalt)); border-color: var(--accent, var(--cobalt)); color: var(--paper); }
.sheet.cobalt .btn.primary { background: var(--paper); border-color: var(--paper); color: var(--cobalt); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost:hover { background: color-mix(in srgb, var(--figure) 8%, transparent); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.big { width: 100%; padding: 16px; font-size: 0.85rem; }
.btn.block { width: 100%; }
.btn.sm { padding: 6px 12px; font-size: 0.68rem; }
.rail .btn.primary { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.linklike {
  background: none; border: none; padding: 0;
  color: inherit;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: 0.8;
  text-align: left;
}
.linklike:hover { opacity: 1; color: var(--accent, inherit); }
.rail .linklike:hover { color: var(--sky); }

.error { color: var(--signal); font-size: 0.85rem; }

/* ══ Advanced (template + aggressiveness) ══ */

details.advanced summary { cursor: pointer; list-style: none; }
details.advanced summary::-webkit-details-marker { display: none; }
details.advanced summary .field-label { margin: 0; }
details.advanced summary .field-label::after { content: "  +"; }
details.advanced[open] summary .field-label::after { content: "  −"; }
details.advanced[open] summary { margin-bottom: 14px; }

.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.template-card, .agg-option {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--figure) 30%, transparent);
  padding: 12px 14px;
  text-align: left;
  color: var(--figure);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--sans);
}
.template-card strong, .agg-option strong { font-size: 0.88rem; }
.template-card span, .agg-option span { font-size: 0.76rem; opacity: 0.65; line-height: 1.4; }
.template-card:hover, .agg-option:hover { border-color: var(--accent); }
.template-card.selected, .agg-option.selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.template-card.selected strong, .agg-option.selected strong { color: var(--accent); }
.custom-template-row { margin: 12px 0 16px; display: flex; gap: 12px; align-items: center; }
.agg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ══ Ticket-stub table ══ */

.stub-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid color-mix(in srgb, var(--figure) 45%, transparent);
  margin-top: auto;
}
.stub-table > div {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid color-mix(in srgb, var(--figure) 45%, transparent);
  min-width: 0;
}
.stub-table > div:last-child { border-right: none; }
.stub-table .meta { opacity: 0.55; }
.stub-table .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stub-table .linklike { font-size: 0.8rem; text-transform: none; letter-spacing: 0; }

/* ══ Running view ══ */

.phase-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.phase-chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--figure) 35%, transparent);
  opacity: 0.55;
}
.phase-chip.on { opacity: 1; border-color: var(--accent); color: var(--accent); }
.phase-sep { opacity: 0.4; font-family: var(--mono); font-size: 0.7rem; }

.progress-track { height: 6px; background: color-mix(in srgb, var(--figure) 18%, transparent); overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--accent); transition: width 0.6s ease; }
.running-meta { display: flex; justify-content: space-between; align-items: center; min-height: 20px; }
.linklike.light { opacity: 0.6; }

.think-panel { display: flex; flex-direction: column; gap: 6px; }
.think-panel > .meta { opacity: 0.55; }
.think-stream {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid color-mix(in srgb, var(--figure) 30%, transparent);
  padding: 14px 16px;
  height: 380px;
  overflow-y: auto;
  opacity: 0.9;
}
.think-stream.sm { height: 90px; font-size: 0.68rem; }

/* running view: reasoning + live keyword panel side by side */
.run-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: clamp(1rem, 2vw, 1.8rem); align-items: start; }
.kw-live {
  border: 1px solid color-mix(in srgb, var(--figure) 30%, transparent);
  padding: 14px 16px;
  max-height: 520px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kw-head { display: flex; flex-direction: column; gap: 3px; }
.kw-head .meta:first-child { opacity: 1; }
.kw-note, .kw-count { opacity: 0.5; }
.kw-waiting { opacity: 0.6; }
.kw-tier { display: flex; flex-direction: column; gap: 6px; }
.kw-tier-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--figure) 20%, transparent); padding-bottom: 4px; }
.kw-blurb { opacity: 0.55; max-width: none; }
.kw-group { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.kw-group-label { opacity: 0.6; font-size: 0.6rem; }
.kw-group-label.missing-label { color: var(--signal); opacity: 0.9; }
.sheet.cobalt .kw-group-label.missing-label { color: var(--paper); opacity: 0.7; }
.chip.placed { border-color: var(--accent); color: var(--accent); }
/* On the cobalt plate, signal red against saturated blue reads muddy — mark
   "missing" with a dashed dimmed outline instead (accent stays sky). */
.sheet.cobalt .chip.placed { border-color: var(--sky); color: var(--sky); }
.sheet.cobalt .chips.missing .chip {
  border-color: color-mix(in srgb, var(--paper) 50%, transparent);
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  border-style: dashed;
}

.page-badge { margin-left: 10px; opacity: 0.6; }
.page-badge.over { color: var(--signal); opacity: 1; }

.progress-log { list-style: none; max-height: 320px; overflow-y: auto; }
.progress-log li {
  font-size: 0.85rem;
  padding: 7px 0 7px 20px;
  position: relative;
  border-bottom: 1px solid color-mix(in srgb, var(--figure) 10%, transparent);
  opacity: 0.75;
}
.progress-log li::before { content: "›"; position: absolute; left: 4px; color: var(--accent); font-family: var(--mono); }
.progress-log li:last-child { opacity: 1; }
.progress-log li.good::before { content: "✓"; }
.progress-log li.error { color: var(--signal); opacity: 1; }
.progress-log li.error::before { content: "✗"; color: var(--signal); }

/* ══ Done view ══ */

.result-grid { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(240px, 4fr); gap: clamp(1.2rem, 2.5vw, 2.5rem); }

.score-block { display: flex; gap: 22px; align-items: flex-start; }
.score-num {
  font-family: var(--serif);
  font-size: 4.2rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.score-num small { font-size: 1.1rem; font-family: var(--mono); letter-spacing: 0; opacity: 0.5; }
.score-num.good { color: var(--cobalt); }
.score-num.ok { color: var(--ink); }
.score-num.bad { color: var(--signal); }

.score-bars { display: flex; flex-direction: column; gap: 7px; flex: 1; padding-top: 8px; }
.score-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 46px;
  gap: 10px;
  align-items: center;
  font-size: 0.78rem;
  opacity: 0.85;
}
.score-bar-row .bar { height: 5px; background: color-mix(in srgb, var(--figure) 14%, transparent); }
.score-bar-row .bar div { height: 100%; background: var(--cobalt); }
.score-bar-row .val { text-align: right; font-size: 0.72rem; }

.kw-block { display: flex; flex-direction: column; gap: 8px; }
.kw-block .meta { opacity: 0.55; }
.meta.warn-text { color: var(--signal); opacity: 1; margin-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--figure) 35%, transparent);
}
.chips.missing .chip { border-color: var(--signal); color: var(--signal); }

.issues-details summary { cursor: pointer; opacity: 0.7; }
.issues-details[open] summary { margin-bottom: 8px; }
.issues { list-style: none; }
.issues li {
  font-size: 0.84rem;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--figure) 10%, transparent);
  opacity: 0.85;
}
.issues li em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cobalt);
  margin-right: 8px;
}

/* work area: latex + chat */
.work-grid { display: grid; grid-template-columns: minmax(380px, 3fr) minmax(300px, 2fr); gap: clamp(1rem, 2vw, 1.8rem); align-items: stretch; }
.latex-pane, .chat-pane { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pane-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pane-head .meta { opacity: 0.55; }

.tab-row { display: flex; gap: 0; align-items: center; }
.tab {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--figure) 35%, transparent);
  border-right: none;
  background: transparent;
  color: var(--figure);
  cursor: pointer;
  opacity: 0.6;
}
.tab:last-of-type { border-right: 1px solid color-mix(in srgb, var(--figure) 35%, transparent); }
.tab.on { opacity: 1; background: var(--cobalt); color: var(--paper); border-color: var(--cobalt); }
.rev-label { margin-left: 10px; opacity: 0.5; }

.preview-box { position: relative; height: 560px; }
.pdf-view { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--figure) 30%, transparent); background: #fff; }
.pdf-frame { width: 100%; height: 100%; border: none; display: block; }
.compiling {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink);
}
.compiling .meta { animation: pulse 1.2s ease-in-out infinite; }

.latex-block {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--figure) 30%, transparent);
  background: color-mix(in srgb, var(--figure) 4%, transparent);
  padding: 16px;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.5;
  overflow: auto;
  white-space: pre;
}

.chat-log {
  border: 1px solid color-mix(in srgb, var(--figure) 30%, transparent);
  flex: 1;
  min-height: 260px;
  max-height: 420px;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-empty { opacity: 0.6; margin: auto; text-align: center; }
.chat-msg { font-size: 0.85rem; line-height: 1.5; display: flex; flex-direction: column; gap: 3px; max-width: 92%; }
.chat-msg .meta { opacity: 0.45; font-size: 0.6rem; }
.chat-msg.user { align-self: flex-end; text-align: right; }
.chat-msg.user .meta { text-align: right; }
.chat-msg.editor { align-self: flex-start; border-left: 2px solid var(--cobalt); padding-left: 10px; }
.chat-live { display: flex; flex-direction: column; gap: 4px; }
.chat-live .meta { color: var(--cobalt); opacity: 1; }
.chat-input-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-input-row textarea { flex: 1; }

/* ══ Modals ══ */

.modal { border: none; padding: 0; background: transparent; max-width: min(600px, 92vw); width: 100%; margin: auto; }
.modal::backdrop { background: rgb(10 10 10 / 0.55); }
.modal-plate {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 18px 50px rgb(0 0 0 / 0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.modal-head .meta { opacity: 0.5; }
.modal-actions { display: flex; gap: 10px; margin-top: 14px; }

/* dropzone */
.dropzone {
  border: 1px dashed color-mix(in srgb, var(--ink) 45%, transparent);
  padding: 26px 18px;
  text-align: center;
  font-size: 0.9rem;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone.dragging { border-color: var(--cobalt); background: rgb(30 46 220 / 0.05); }
.dz-formats { display: block; margin-top: 8px; opacity: 0.5; }
.dz-file { display: flex; justify-content: center; gap: 14px; align-items: center; }
.toggle-paste { margin-top: 10px; }

/* ══ Responsive ══ */

@media (max-width: 960px) {
  .app { flex-direction: column; }
  .rail {
    width: auto;
    position: static;
    max-height: none;
    /* Stacked above the desk, a full-height rail would fill the viewport and push the
       form entirely below the fold. Height goes back to the content here. */
    height: auto;
    align-self: auto;
    margin: clamp(0.75rem, 1.6vw, 1.25rem);
    margin-bottom: 0;
  }
  .session-list { flex: none; }
  .result-grid, .work-grid, .form-grid, .run-split { grid-template-columns: 1fr; }
  .preview-box { height: 420px; }
  .kw-live { max-height: 340px; }
}
@media (max-width: 640px) {
  .agg-grid { grid-template-columns: 1fr; }
  .stub-table { grid-template-columns: 1fr; }
  .stub-table > div { border-right: none; border-bottom: 1px solid color-mix(in srgb, var(--figure) 45%, transparent); }
  .stub-table > div:last-child { border-bottom: none; }
  .sheet-top { flex-direction: column; gap: 0.8rem; }
  .sheet-meta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .dot.run { animation: none; }
  .progress-bar { transition: none; }
}

/* ══ Running view: right column (keywords + passes) ══ */

.right-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kw-live { max-height: 400px; }

.pass-panel {
  border: 1px solid color-mix(in srgb, var(--figure) 30%, transparent);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 500px;
  overflow-y: auto;
}
.pass-panel > .meta:first-child { opacity: 1; }
.pass-row {
  display: flex; flex-direction: column; gap: 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--figure) 18%, transparent);
}
.pass-row:last-child { border-bottom: none; padding-bottom: 0; }
.pass-head { display: flex; align-items: baseline; gap: 10px; }
.pass-score { font-family: var(--serif); font-size: 1.5rem; line-height: 1; }
.pass-score small { font-family: var(--mono); font-size: 0.6rem; opacity: 0.5; }
.pass-delta { font-family: var(--mono); font-size: 0.65rem; margin-left: 6px; color: var(--accent); }
.pass-verdict { margin-left: auto; opacity: 0.6; }
.good-text { color: var(--accent); opacity: 1; }
.sheet.cobalt .good-text { color: var(--sky); }
.pass-pages { opacity: 0.7; }
.pass-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.pass-cat {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--figure) 25%, transparent);
  opacity: 0.85;
}
.pass-cat b { font-weight: 500; }
.pass-issues summary { cursor: pointer; opacity: 0.7; }
.pass-issues[open] summary { margin-bottom: 4px; }
.pass-issues .issues li { font-size: 0.78rem; padding: 5px 0; }

/* ══ Revision strip ══ */

.rev-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: -2px; }
.rev-strip > .meta { opacity: 0.5; }
.rev-chip {
  font-family: var(--mono); font-size: 0.66rem;
  padding: 3px 9px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--figure) 32%, transparent);
  background: transparent; color: var(--figure);
}
.rev-chip:hover { border-color: var(--accent); }
.rev-chip.on { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); }
.rev-viewing { opacity: 0.55; margin-left: 4px; }

/* ══ Template preview popover ══ */

.template-card { position: relative; }
.tpl-peek { opacity: 0; margin-top: 2px; color: var(--accent); transition: opacity 0.12s; }
.template-card:hover .tpl-peek, .template-card:focus .tpl-peek { opacity: 1; }

.tpl-preview {
  position: fixed;
  z-index: 60;
  width: min(430px, 92vw);
  height: 360px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 14px 40px rgb(0 0 0 / 0.28);
  display: flex;
  flex-direction: column;
}
.tpl-preview-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  color: var(--ink);
}
.tpl-frame { flex: 1; width: 100%; border: none; background: #fff; }

.kw-gap .kw-tier-head .meta:first-child { color: var(--signal); opacity: 1; }
.sheet.cobalt .kw-gap .kw-tier-head .meta:first-child { color: var(--paper); opacity: 0.85; }
.chips.gap .chip { border-style: dashed; opacity: 0.75; }
.chip.soft { border-style: dotted; opacity: 0.8; }

/* ══ Running dashboard ══ */

.sheet.dash { gap: clamp(0.9rem, 1.6vw, 1.4rem); }
.dash-head { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; }
.display-line.tight { font-size: clamp(1.7rem, 3.4vw, 2.7rem); max-width: 22ch; margin-bottom: 6px; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid color-mix(in srgb, var(--figure) 40%, transparent);
}
.stat {
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid color-mix(in srgb, var(--figure) 40%, transparent);
}
.stat:last-child { border-right: none; }
.stat .meta { opacity: 0.55; }
.stat-big { font-family: var(--serif); font-size: 2rem; line-height: 1.05; }
.stat-big small {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.5; margin-left: 7px;
}
.stat-big.good { color: var(--sky); }
.stat-big.bad { color: var(--signal); }
.sheet.cobalt .stat-big.bad { color: var(--paper); text-decoration: underline; text-underline-offset: 5px; }

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: clamp(0.8rem, 1.5vw, 1.3rem);
  align-items: start;
}
.dash-panel {
  border: 1px solid color-mix(in srgb, var(--figure) 30%, transparent);
  display: flex; flex-direction: column; min-width: 0;
}
.panel-head {
  padding: 8px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--figure) 22%, transparent);
}
.panel-head .meta { opacity: 0.6; }
.dash-panel .panel-body { padding: 12px 14px; overflow-y: auto; }
.dash-panel .think-stream { border: none; height: 300px; }
.dash-panel .progress-log { padding: 4px 14px 10px; max-height: 260px; }
.dash-panel .kw-live { border: none; max-height: 300px; padding: 12px 14px; }
.dash-panel .pass-panel { border: none; max-height: 260px; }

@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid color-mix(in srgb, var(--figure) 40%, transparent); }
}

/* A run that stopped early must say so on the result plate, not only in the log the
   user has already scrolled past. Signal red, because it changes how to read the score. */
.notice {
  border-left: 3px solid var(--signal);
  padding: 0.7rem 0.9rem;
  background: color-mix(in srgb, var(--signal) 7%, transparent);
  font-size: 0.85rem;
  line-height: 1.5;
  max-width: 62ch;
}

/* ── Access gate ──
   Small by design: it is a doorway, not a feature. Hidden entirely when the
   deployment sets no ACCESS_PIN, so a local checkout never sees it. */
.gate {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(239 237 234 / 0.18);
}
.gate-label { opacity: 0.5; display: block; margin-bottom: 6px; }
.gate-row { display: flex; gap: 6px; }
.gate-row input {
  flex: 1;
  min-width: 0;
  background: rgb(239 237 234 / 0.06);
  border: 1px solid rgb(239 237 234 / 0.22);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  padding: 7px 9px;
}
.gate-row input:focus { outline: none; border-color: var(--sky); }
.gate-go {
  flex-shrink: 0;
  padding: 0 11px;
  background: rgb(239 237 234 / 0.1);
  border: 1px solid rgb(239 237 234 / 0.22);
  color: var(--paper);
  cursor: pointer;
  font-family: var(--mono);
}
.gate-go:hover { background: var(--cobalt); border-color: var(--cobalt); }
.gate-go[disabled] { opacity: 0.45; cursor: default; }
.gate-msg { margin-top: 7px; color: var(--signal); text-transform: none; letter-spacing: 0; }
.gate-msg.good { color: var(--sky); }
.gate-ok { display: flex; align-items: center; gap: 8px; opacity: 0.75; }
.gate-ok .linklike { margin-left: auto; opacity: 0.6; }

/* ── Cover letter opt-in ──
   Sits outside the advanced panel, because it changes what you receive rather than
   how it is made. */
.opt-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--figure) 22%, transparent);
  cursor: pointer;
}
.opt-row:hover { border-color: color-mix(in srgb, var(--figure) 45%, transparent); }
.opt-row input[type="checkbox"] {
  appearance: none;
  width: 17px; height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1px solid color-mix(in srgb, var(--figure) 55%, transparent);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
}
.opt-row input[type="checkbox"]:checked { background: var(--cobalt); border-color: var(--cobalt); }
.opt-row input[type="checkbox"]:checked::after {
  content: "";
  width: 9px; height: 5px;
  border: 2px solid var(--paper);
  border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(0.5px, -1px);
}
.opt-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.opt-copy { display: flex; flex-direction: column; gap: 3px; }
.opt-copy strong { font-weight: 600; font-size: 0.92rem; }
.opt-note { font-size: 0.8125rem; opacity: 0.7; line-height: 1.45; }

/* ── Résumé / cover-letter switch ── */
.doc-switch {
  display: flex;
  border-bottom: 1px solid color-mix(in srgb, var(--figure) 18%, transparent);
}
.doc-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: inherit;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  opacity: 0.5;
}
.doc-tab:hover { opacity: 0.85; }
.doc-tab.on { opacity: 1; border-bottom-color: var(--accent); }