/* Usage dashboard.
   Series colours are the validated categorical slots (blue, orange, aqua,
   yellow) run through the palette checker: adjacent pairs clear CVD separation,
   and because the lighter two do not reach 3:1 against the surface, every
   segment carries a direct label. That labelling is required, not decorative. */

:root {
  --canvas: #f6f6fa;
  --surface: #ffffff;
  --ink: #14121f;
  --ink-dim: #6c6980;
  --line: #e3e2ec;
  --blue: #3355ff;

  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;

  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body.dash {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
code { font-family: var(--font-mono); font-size: 0.86em; }

.dash-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.dash-mark { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.dash-top nav { display: flex; gap: 22px; }
.dash-top nav a {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-dim);
}
.dash-top nav a:hover { color: var(--ink); }

.dash-main { max-width: 1080px; margin: 0 auto; padding: 48px 32px 96px; }
.dash-head h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: -0.03em; }
.dash-lede { margin-top: 12px; max-width: 60ch; color: var(--ink-dim); line-height: 1.6; }

/* Picker */
#empty { display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 900px) { #empty { grid-template-columns: 1.6fr 1fr; align-items: start; } }

.drop {
  border: 2px dashed var(--line); border-radius: 16px; background: var(--surface);
  padding: 56px 32px; text-align: center; transition: border-color 0.18s ease, background 0.18s ease;
}
.drop.is-over { border-color: var(--blue); background: rgba(51, 85, 255, 0.04); }
.drop-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.drop-sub { margin: 8px 0 20px; color: var(--ink-dim); font-size: 0.9rem; }
.drop-where { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.drop-where-label {
  font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink-dim); margin-bottom: 10px;
}
.drop-where > code { display: block; color: var(--ink); font-size: 0.8rem; }
.drop-where-note { margin: 10px auto 0; max-width: 46ch; font-size: 0.76rem; line-height: 1.55; color: var(--ink-dim); }
.drop-where-note code { color: var(--ink); }

.privacy { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.privacy h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.privacy p { margin-top: 12px; font-size: 0.88rem; line-height: 1.6; color: var(--ink-dim); }
.privacy strong { color: var(--ink); font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 10px; padding: 11px 22px;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; cursor: pointer;
  transition: transform 0.14s ease, background 0.18s ease;
}
.btn-primary { background: var(--ink); color: var(--surface); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.5; cursor: default; transform: none; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-dim); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-dim); }

/* Report */
#report { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.report-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-chip, .model-chip {
  font-family: var(--font-mono); font-size: 0.72rem; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-dim);
}
.report-bar .btn { margin-left: auto; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); padding: 22px 24px; }
.stat-key { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-dim); }
.stat strong { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 1.9rem; font-weight: 400; letter-spacing: -0.03em; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.panel h2 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.panel-sub { margin-top: 8px; font-size: 0.86rem; line-height: 1.6; color: var(--ink-dim); max-width: 68ch; }
.grid2 { display: grid; gap: 20px; }
@media (min-width: 860px) { .grid2 { grid-template-columns: 1fr 1fr; } }

/* Composition. A 2px surface gap between segments keeps adjacent fills legible. */
.stack { display: flex; height: 34px; margin-top: 22px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface); }
.stack-seg { display: block; min-width: 3px; border-radius: 3px; }

.legend { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.legend li { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: baseline; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.legend-name { font-size: 0.9rem; }
.legend-val { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink); white-space: nowrap; }
.legend-note { grid-column: 2 / -1; font-size: 0.78rem; color: var(--ink-dim); margin-top: -4px; }

/* Tool magnitudes: one hue, length carries the value, value labelled. */
.brow { display: grid; grid-template-columns: 122px 1fr 40px; gap: 12px; align-items: center; margin-top: 12px; }
.brow-label { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow-track { height: 10px; background: var(--canvas); border-radius: 999px; overflow: hidden; }
.brow-track i { display: block; height: 100%; background: var(--s1); border-radius: 999px; }
.brow-val { font-family: var(--font-mono); font-size: 0.78rem; text-align: right; }

.prow { padding: 14px 0; border-top: 1px solid var(--line); }
.prow:first-child { border-top: none; padding-top: 4px; }
.prow-head { display: flex; gap: 10px; align-items: baseline; }
.prow-turns { font-family: var(--font-mono); font-size: 0.76rem; color: var(--s2); }
.prow-tok { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-dim); }
.prow-text { margin-top: 6px; font-size: 0.86rem; line-height: 1.5; color: var(--ink); }

/* Analysis */
.analyse-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
#analysis { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.analysis-headline { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.4; }
.analysis-sub { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; margin-top: 8px; }
.finding { border-left: 2px solid var(--s1); padding-left: 16px; }
.finding h3 { font-size: 0.95rem; font-weight: 600; }
.finding-evidence { margin-top: 6px; font-size: 0.86rem; line-height: 1.6; color: var(--ink-dim); }
.finding-fix { margin-top: 8px; font-size: 0.88rem; line-height: 1.6; }
.finding-fix strong { color: var(--s1); }
.worst { background: var(--canvas); border-radius: 12px; padding: 18px; }
.worst-quote { font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.55; }
.worst-cost { margin-top: 8px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--s2); }
.worst-rewrite { margin-top: 10px; font-size: 0.86rem; line-height: 1.6; color: var(--ink-dim); }
.worst-rewrite strong { color: var(--ink); font-weight: 500; }

.muted { font-size: 0.86rem; color: var(--ink-dim); }
.error { font-size: 0.86rem; color: #a2423d; }
.footnote { font-size: 0.76rem; line-height: 1.6; color: var(--ink-dim); border-left: 2px solid var(--line); padding-left: 14px; }


.drop-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.drop-sub code { color: var(--ink); }
.drop-drag { margin-top: 14px; font-size: 0.78rem; color: var(--ink-dim); }

.dash-mark img { display: block; height: 30px; width: auto; }

/* ---------------------------------------------------------- the mascot
   One flat PNG cut to a transparent sprite. He fronts the empty state so
   the first thing on the page is a character, not a dashed rectangle. */
.mascot { position: relative; display: block; width: 100%; aspect-ratio: 925 / 832; }
.mascot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.drop-mascot { width: 128px; margin: 0 auto 18px; }
@keyframes dash-mascot-breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3%) rotate(-1.4deg); }
}
.drop-mascot .mascot { animation: dash-mascot-breathe 3.4s ease-in-out infinite; }
.drop.is-over .drop-mascot .mascot { animation-duration: 0.9s; }

@media (prefers-reduced-motion: reduce) {
  .drop-mascot .mascot { animation: none; }
}

/* A little more presence on the panels now the page has a face. */
.drop { padding: 44px 32px 48px; }
.panel { box-shadow: 0 1px 2px rgba(20,18,31,0.04), 0 12px 32px rgba(20,18,31,0.04); }
.stat { transition: background 0.2s ease; }
.stat:hover { background: #fbfbfe; }

/* ===================================================================
   Dashboard, rebuilt.
   The old empty state put the drop zone and a full privacy panel side
   by side, so the one thing to DO competed with a paragraph about what
   is not sent. Now it is one centred column: character, question,
   action — and the reassurance earns a line rather than a column.
   =================================================================== */

#empty { display: block; max-width: 720px; margin: 0 auto; }

.dash-hero { text-align: center; margin-bottom: 34px; }
.dash-hero h1 {
  font-family: var(--font-display); font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  letter-spacing: -0.035em; line-height: 1.05;
}
.dash-hero .dash-lede { margin: 14px auto 0; max-width: 52ch; }
.drop-mascot { width: 116px; margin: 0 auto 20px; }

.drop { border-radius: 20px; padding: 40px 32px 34px; }
.drop-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.drop-sub { margin: 10px auto 22px; max-width: 44ch; }

.assure { list-style: none; margin-top: 26px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.assure li { background: var(--surface); padding: 14px 18px; font-size: 0.84rem; line-height: 1.55; color: var(--ink-dim); }
.assure b { color: var(--ink); font-weight: 500; }

/* Report: give the numbers the room they deserve. */
.dash-main { max-width: 1080px; padding-top: 64px; }
#report { gap: 24px; }
.stat { padding: 26px 26px 24px; }
.stat strong { font-size: 2.1rem; }

/* Colour: the page was one blue on grey. Each assurance row and each headline
   stat now carries its own hue, matching the series colours the charts use so
   the language is consistent top to bottom. */
.dash-hero h1 {
  background: linear-gradient(96deg, var(--ink) 34%, var(--s1) 72%, var(--blue) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.assure li { border-left: 3px solid transparent; }
.assure li:nth-child(1) { border-left-color: var(--s1); }
.assure li:nth-child(2) { border-left-color: var(--s3); }
.assure li:nth-child(3) { border-left-color: var(--s4); }

.stats .stat:nth-child(1) strong { color: var(--s1); }
.stats .stat:nth-child(2) strong { color: var(--s2); }
.stats .stat:nth-child(3) strong { color: var(--s3); }
.stats .stat:nth-child(4) strong { color: var(--s4); }

.drop { border-color: rgba(51, 85, 255, 0.28); background: linear-gradient(180deg, #fff, #fbfbff); }
.drop.is-over { border-color: var(--blue); background: rgba(51, 85, 255, 0.05); }
.btn-primary { background: linear-gradient(120deg, var(--ink), #2b2a44); }

/* The CLI hand-off. Folded away by default: most people use the folder picker,
   and this is the answer for the ones who want every project at once. */
.cli { margin-top: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 18px 20px; }
.cli summary { font-size: 0.88rem; font-weight: 500; cursor: pointer; }
.cli-note { margin-top: 12px; font-size: 0.82rem; line-height: 1.6; color: var(--ink-dim); }
.cli-cmd { margin-top: 10px; background: #14121f; color: #e8e6f2; border-radius: 9px; padding: 11px 14px; overflow-x: auto; }
.cli-cmd code { font-family: var(--font-mono); font-size: 0.8rem; }
.cli-paste {
  width: 100%; margin-top: 12px; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 10px; font-family: var(--font-mono); font-size: 0.76rem;
  background: var(--canvas); color: var(--ink); resize: vertical;
}
.cli-paste:focus { outline: none; border-color: var(--blue); background: var(--surface); }
.cli-msg { margin-top: 10px; font-size: 0.8rem; color: var(--ink-dim); }

/* Desktop-only: switch between every project found on the machine. */
.proj-picker { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.proj-label { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-dim); margin-bottom: 12px; }
.proj-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.proj {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; text-align: left;
  border: 1px solid var(--line); border-radius: 11px; padding: 9px 13px; cursor: pointer;
  background: var(--canvas); color: var(--ink); font-family: var(--font-body);
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.proj:hover { border-color: var(--blue); transform: translateY(-1px); }
.proj.is-on { border-color: var(--blue); background: rgba(51,85,255,0.07); }
.proj:disabled { opacity: 0.55; cursor: default; }
.proj-name { font-size: 0.8rem; white-space: nowrap; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.proj-cost { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-dim); }
.proj.is-on .proj-cost { color: var(--blue); }