/* The site's palette, applied to the demo applications.
 *
 * Shared by all six through BrowserDemo.props, and linked AFTER each demo's own demo.css so
 * these :root values win. Editing it here changes every demo.
 *
 * WHY IT EXISTS. Each demo was built standalone against the Blazor template's light default,
 * so six white applications sat inside a site whose background is #17181A. Adrian asked on
 * 2026-09-10 whether that was intended. It was not.
 *
 * The values are sparsr.com's own, copied from themes/sparsr/css. If the site's palette
 * moves, move these with it - a demo that is nearly the site's colour looks more broken than
 * one that is plainly a different colour.
 *
 * THE SITE IS MONOCHROME, so --accent is the foreground rather than a blue. The semantic
 * colours below are not: a verdict that says "repaired perfectly" or "the qubit was
 * destroyed" needs to read as good or bad at a glance, and those are chosen for contrast on
 * a dark ground rather than taken from the site, which has no such states to show.
 *
 * WHAT STAYS LIGHT. --canvas. The error-correction demo's picture is one bit per pixel, ink
 * on paper, so paper is what the background of that canvas means; darkening it would invert
 * the picture's meaning rather than restyle it. The digit, lattice and image canvases are
 * already black and are left alone.
 */

:root {
  /* From sparsr.com/themes/sparsr/css, SHIFTED UP ONE STEP. That shift is the point.
   *
   * The first version of this file gave the demo body the site's own --bg, #17181A. It
   * matched the page exactly, and Adrian's reaction on 2026-09-10 was that the demo had
   * stopped looking like a machine and started looking like a paragraph. He was right: a
   * window that is the same plane as the page behind it is not a window.
   *
   * So the interior sits on the site's --surface while the page stays on --bg, and every
   * layer inside moves up with it. Same palette family, distinct plane - which is how a
   * real window reads, and what the old white box got right by accident while being
   * jarring about it.
   */
  --paper: #1E2023;
  --surface: #232629;
  --surface-2: #2A2E33;
  --ink: #FFFCFC;
  --muted: #C4C4C4;
  --line: rgba(255, 252, 252, 0.14);
  --line-strong: rgba(255, 252, 252, 0.28);

  /* Monochrome, like the site. A button or a slider is foreground on surface. */
  --accent: #FFFCFC;
  --accent-contrast: #17181A;

  /* Not from the site: these carry meaning and have to survive a dark ground. */
  --good: #6FD08C;
  --warn: #E8C46B;
  --bad: #FF8B7E;

  /* Ink on paper, and it stays paper. See the note above. */
  --canvas: #F6F8FA;
}

body { background: var(--paper); color: var(--ink); }

/* The demo stylesheets hardcode white on their panels rather than naming a variable, which
   is why those rules are restated here instead of being reached by the palette above. */
.card,
.control,
.choice,
.qubit,
.stabilizers li,
button { background: var(--surface); color: var(--ink); border-color: var(--line); }

button:hover:not(:disabled) { background: var(--surface-2); }
button.primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
button:disabled { opacity: .45; }

.card:hover, .choice:hover, .qubit:hover { border-color: var(--line-strong); }

/* Selected states read as a light edge rather than a blue one, matching the site. */
.card[aria-pressed="true"], .choice[aria-pressed="true"], .card.selected, .choice.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* A failure notice was a light red panel, which on this ground glowed. */
.error {
  background: rgba(255, 139, 126, 0.12);
  border: 1px solid rgba(255, 139, 126, 0.4);
  color: var(--bad);
}

/* The one canvas that is a picture rather than a display surface. */
.pane canvas { background: var(--canvas); }

/* Sliders and focus rings, which otherwise stay the browser's blue. */
input[type=range] { accent-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tables of numbers, which several demos show after a run. */
th { color: var(--muted); font-weight: 600; }
td, th { border-color: var(--line); }

/* SPR-348: the "that was the algorithm, not the processor" line, beside a wrong answer.
   Quiet on purpose - it is a clarification, not a warning, and styling it as a warning
   would suggest something went wrong when nothing did. */
.whose-fault {
  margin: 1rem 0 0;
  padding: .7rem .9rem;
  background: var(--surface-2);
  border-left: 2px solid var(--line-strong);
  border-radius: 6px;
  font-size: .875rem;
  color: var(--muted);
}

.whose-fault strong { color: var(--ink); }

/* SPR-347: the operations comparison, shown after a run.
   Two rows of fact and one of arithmetic. It carries no time or energy column on purpose -
   see the comment beside the markup in each demo. */
.cost {
  border-collapse: collapse;
  margin: 1.25rem 0 0;
  font-size: .9rem;
}

.cost caption {
  text-align: left;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: .45rem;
}

.cost th, .cost td { text-align: left; padding: .4rem .9rem .4rem 0; border-bottom: 1px solid var(--line); }
.cost th { color: var(--muted); font-weight: 400; white-space: nowrap; }
.cost td { font-variant-numeric: tabular-nums; }
.cost tr:last-child th, .cost tr:last-child td { border-bottom: 0; }
.cost-ratio td strong { color: var(--ink); }

/* SPR-355: the panel showing what the device actually ran.
   Collapsed by default, because the page is for a visitor and this is for a developer. */
.ran { margin: 1.25rem 0 0; }

.ran summary {
  cursor: pointer;
  font-size: .85rem;
  color: var(--muted);
  padding: .35rem 0;
}

.ran summary:hover { color: var(--ink); }

.ran-list {
  border-collapse: collapse;
  margin: .6rem 0 0;
  font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  width: 100%;
}

.ran-list th {
  text-align: left;
  font-weight: 400;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: .25rem .8rem .25rem 0;
}

.ran-list td { padding: .15rem .8rem .15rem 0; color: var(--muted); }
.ran-list td:last-child { color: var(--ink); }

/* The wide instructions are the point, so they are the ones that stand out. */
.ran-wide td { color: var(--ink); }
.ran-wide td:first-child { box-shadow: inset 2px 0 0 var(--accent); padding-left: .5rem; }

.ran-note { margin: .7rem 0 0; font-size: .8rem; color: var(--muted); }

/* The three layers of the panel, and the source files inside two of them. */
.ran .layer { margin: 1rem 0 0; }
.ran .layer h3 { margin: 0 0 .3rem; font-size: .85rem; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.ran .layer .ran-note { margin-top: 0; }

.src { margin: .5rem 0 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.src summary { padding: .4rem .7rem; font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); cursor: pointer; }
.src summary:hover { color: var(--ink); }
.src pre { margin: 0; padding: .6rem .8rem; overflow-x: auto; border-top: 1px solid var(--line); font: .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
.src code { white-space: pre; }