/* CLASP shared stylesheet.
 *
 * One file for the web site (linked from every page under site/) and the
 * three consoles (spliced into their pages at startup; see ui_page.rs in
 * server-app and ui.rs in clasp-executive). Colour lives only here, as
 * tokens; pages keep layout rules of their own and nothing else.
 *
 * Schemes: light is the default. Dark follows prefers-color-scheme unless
 * the visitor chose one with the theme toggle (clasp-theme.js), which stamps
 * data-theme="light" or "dark" on <html>. Every token is defined three
 * times so the explicit choice wins in both directions.
 */

:root {
  color-scheme: light;
  --bg: #fdfaf6;
  --panel: #f6f1e9;
  --panel-2: #efe8dc;
  --ink: #14232b;
  --muted: #5b6f70;
  --line: #e3dacc;
  --line-2: #d3c8b6;
  --accent: #a54e28;
  --accent-hover: #8d4222;
  --on-accent: #ffffff;
  --gold: #8a6a1f;
  --good: #2e7a58;
  --wait: #8f6410;
  --bad: #b3362e;
  --info: #2f5f8f;
  --good-bg: #e6f2ec;
  --wait-bg: #f7ecd4;
  --bad-bg: #f8e3e0;
  --info-bg: #e3edf6;
  --code-bg: #14232b;
  --code-ink: #f3ede4;
  --shadow: 0 12px 40px rgba(20, 35, 43, .08);
  --font-display: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --font-body: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius-s: 6px;
  --radius: 10px;
  --radius-l: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #14232b;
    --panel: #1b2d37;
    --panel-2: #0f1a20;
    --ink: #fdfaf6;
    --muted: #9fb3b0;
    --line: #2c424d;
    --line-2: #3a5260;
    --accent: #e08a6a;
    --accent-hover: #eaa085;
    --on-accent: #14232b;
    --gold: #d4ab4f;
    --good: #6cc9a0;
    --wait: #e0b455;
    --bad: #ff8a7f;
    --info: #7fb4e6;
    --good-bg: #1a3a30;
    --wait-bg: #3d3118;
    --bad-bg: #452626;
    --info-bg: #1c3347;
    --code-bg: #0d181f;
    --code-ink: #e9e2d6;
    --shadow: 0 12px 40px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14232b;
  --panel: #1b2d37;
  --panel-2: #0f1a20;
  --ink: #fdfaf6;
  --muted: #9fb3b0;
  --line: #2c424d;
  --line-2: #3a5260;
  --accent: #e08a6a;
  --accent-hover: #eaa085;
  --on-accent: #14232b;
  --gold: #d4ab4f;
  --good: #6cc9a0;
  --wait: #e0b455;
  --bad: #ff8a7f;
  --info: #7fb4e6;
  --good-bg: #1a3a30;
  --wait-bg: #3d3118;
  --bad-bg: #452626;
  --info-bg: #1c3347;
  --code-bg: #0d181f;
  --code-ink: #e9e2d6;
  --shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

/* Base ------------------------------------------------------------------ */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
h1 { font: 300 clamp(2rem, 5vw, 3rem)/1.05 var(--font-display); }
h1 .brand { color: var(--accent); letter-spacing: .06em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: .6rem 0; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
small { font-size: .875em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
[hidden], .hidden { display: none !important; }
ul.plain, ol.plain { margin: .4rem 0 0; padding-left: 1.2rem; }
ul.plain li, ol.plain li { margin: .2rem 0; overflow-wrap: anywhere; }
.mt-1 { margin-top: .6rem; }
.mt-2 { margin-top: 1rem; }

code, kbd, .mono, .hash {
  font-family: var(--font-mono);
  font-size: .92em;
}
code {
  background: var(--panel-2);
  padding: .1em .35em;
  border-radius: 4px;
}
pre {
  background: var(--code-bg);
  color: var(--code-ink);
  padding: .9rem 1.1rem;
  border-radius: var(--radius-s);
  overflow: auto;
  font: .86rem/1.5 var(--font-mono);
  margin: .8rem 0 1rem;
}
pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.hash { overflow-wrap: anywhere; color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Text helpers ----------------------------------------------------------- */

.muted { color: var(--muted); }
.eyebrow {
  color: var(--accent);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.lede { color: var(--muted); font-size: 1.1rem; margin: 0 0 2.5rem; }
.brand-mark { font-family: var(--font-display); font-weight: 300; letter-spacing: .06em; color: var(--accent); }

/* Layout ------------------------------------------------------------------ */

.wrap { width: min(1280px, calc(100% - 2rem)); margin: 0 auto; padding: 1.75rem 0 4rem; }
.prose { max-width: 46rem; margin: 0 auto; padding: 3rem 1.5rem 6rem; line-height: 1.55; }
.page-header {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.page-header h1 { font: 700 clamp(1.6rem, 4vw, 2.4rem)/1.05 var(--font-body); letter-spacing: -.03em; margin: .1rem 0; }
.page-header .aside { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.span-6 { grid-column: span 6; }
.span-12, .wide { grid-column: 1 / -1; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.stack > * + * { margin-top: .75rem; }
@media (max-width: 820px) {
  .span-6 { grid-column: 1 / -1; }
  .split { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; }
  .page-header .aside { justify-content: flex-start; }
}

/* Cards ------------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.card > h2:first-child, .card > h3:first-child { margin-bottom: .75rem; }
.card.inset { background: var(--panel-2); box-shadow: none; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.metric {
  min-height: 4.5rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.metric > span, .metric > .label { display: block; color: var(--muted); font-size: .8rem; }
.metric > strong { display: block; margin-top: .35rem; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: .9rem; font-weight: 600; }
.metric > strong.good { color: var(--good); }
.metric > strong.wait { color: var(--wait); }
.metric > strong.bad { color: var(--bad); }

/* Badges ------------------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .2em .7em;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}
.badge::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; flex: none; }
/* A glyph beside the colour, so a state reads without it. */
.badge.good::before, .badge.bad::before, .badge.info::before { width: auto; height: auto; border-radius: 0; background: none; font-weight: 800; line-height: 1; }
.badge.good { color: var(--good); background: var(--good-bg); border-color: transparent; }
.badge.good::before { content: "✓"; }
.badge.wait { color: var(--wait); background: var(--wait-bg); border-color: transparent; }
.badge.bad { color: var(--bad); background: var(--bad-bg); border-color: transparent; }
.badge.bad::before { content: "!"; }
.badge.info { color: var(--info); background: var(--info-bg); border-color: transparent; }
.badge.info::before { content: "i"; font-family: var(--font-display); font-style: italic; }
.badge.lg { font-size: .9rem; padding: .35em .9em; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--wait); box-shadow: 0 0 10px currentColor; color: var(--wait); vertical-align: middle; margin-right: .3em; }
.dot.good { background: var(--good); color: var(--good); }
.dot.bad { background: var(--bad); color: var(--bad); }

/* Buttons ----------------------------------------------------------------- */

button, .button {
  font: 600 .9rem/1.2 var(--font-body);
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-s);
  padding: .6rem 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .12s, border-color .12s, color .12s;
}
button:hover, .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
button.secondary, .button.secondary {
  color: var(--ink);
  background: var(--panel-2);
  border-color: var(--line-2);
}
button.secondary:hover, .button.secondary:hover { background: var(--line); border-color: var(--line-2); color: var(--ink); }
button.danger, button.reject { color: #fff; background: var(--bad); border-color: var(--bad); }
button.danger:hover, button.reject:hover { filter: brightness(.92); background: var(--bad); border-color: var(--bad); color: #fff; }
button.ghost, .button.ghost { background: transparent; color: var(--accent); border-color: transparent; padding: .2rem .4rem; }
button.ghost:hover { background: var(--panel-2); color: var(--accent-hover); }
button.outline, .button.outline { background: transparent; color: var(--ink); border-color: var(--accent); }
button.outline:hover, .button.outline:hover { background: var(--accent); color: var(--on-accent); }
button.small { padding: .35rem .7rem; font-size: .8rem; }
button.pill, .button.pill { border-radius: 999px; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:disabled:hover { background: var(--accent); }
button.secondary:disabled:hover { background: var(--panel-2); }

/* Tabs -------------------------------------------------------------------- */

.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; }
.tabs button {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: .4rem .95rem;
  font-weight: 500;
}
.tabs button:hover { background: var(--panel-2); color: var(--ink); border-color: var(--line-2); }
.tabs button.active, .tabs button[aria-selected="true"] {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* Notices ----------------------------------------------------------------- */

.notice {
  margin-top: .75rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--line-2);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: var(--panel-2);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.notice.warn { border-left-color: var(--gold); background: var(--wait-bg); }
.notice.error { border-left-color: var(--bad); background: var(--bad-bg); }
.notice.ok { border-left-color: var(--good); background: var(--good-bg); }
.notice.info { border-left-color: var(--info); background: var(--info-bg); }
.notice.privacy { border-left-color: var(--good); }
.notice strong { color: var(--accent); }

/* Forms ------------------------------------------------------------------- */

label { display: block; margin: 0 0 .3rem; color: var(--muted); font-size: .85rem; font-weight: 500; }
input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  padding: .55rem .7rem;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
textarea { min-height: 6rem; resize: vertical; font-family: var(--font-mono); font-size: .9rem; }
input[type="checkbox"], input[type="radio"] { width: auto; margin-right: .4rem; accent-color: var(--accent); }
select[multiple] { min-height: 5.5rem; }
input.inline { display: inline-block; width: auto; min-width: 10rem; padding: .35rem .6rem; }
.field label { display: block; }
.checks { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); }
.checks label { margin: 0; color: var(--ink); font-size: .9rem; display: inline-flex; align-items: center; }

/* Tables ------------------------------------------------------------------ */

.table-scroll { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
td.actions { white-space: nowrap; text-align: right; }
tr.line { border-top: 1px solid var(--line); }
.list-row { display: grid; gap: .75rem; align-items: center; padding: .65rem 0; border-top: 1px solid var(--line); }
.list-row:first-child { border-top: 0; }

/* Status strip and theme toggle ------------------------------------------ */

.status-strip { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }
.status-strip strong { color: var(--ink); font-weight: 600; font-family: var(--font-mono); font-size: .85rem; }
.theme-toggle {
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: .3rem .7rem;
  font-size: .8rem;
  font-weight: 500;
}
.theme-toggle:hover { color: var(--ink); background: var(--panel-2); border-color: var(--line-2); }
.theme-toggle::before { content: "◐ "; }

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

.site-nav { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; padding: .35rem .6rem; border-radius: var(--radius-s); }
.site-nav a:hover { background: var(--panel-2); color: var(--ink); }
.site-nav .brand-mark { font-size: 1.1rem; padding: 0 .4rem 0 0; }
.note {
  background: var(--panel);
  border-left: 3px solid var(--gold);
  padding: .8rem 1rem;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  margin: 1rem 0;
}
.note strong { color: var(--accent); }
.code-hero {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  letter-spacing: .08em;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  padding: .3rem .7rem;
  display: inline-block;
}
footer.site-footer { margin-top: 4rem; color: var(--muted); font-size: .9rem; }
footer.site-footer .row { justify-content: space-between; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.site-header .site-nav a[aria-current="page"] { background: var(--panel-2); }
nav.toc { display: none; }
@media (min-width: 84rem) {
  nav.toc { display: block; position: fixed; top: 6rem; right: 2rem; width: 13rem; font-size: .85rem; }
  nav.toc a { display: block; color: var(--muted); text-decoration: none; padding: .2rem 0 .2rem .6rem; border-left: 2px solid var(--line); }
  nav.toc a:hover, nav.toc a.current { color: var(--ink); border-left-color: var(--accent); }
  nav.toc .step { color: var(--gold); font-weight: 600; font-size: .75rem; margin-right: .4rem; }
}

/* Console shell ----------------------------------------------------------- */

.console-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .6rem 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.console-bar .who { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.console-bar .who .brand-mark { font-size: 1.25rem; }
.console-bar .who .kind { color: var(--muted); font-weight: 600; font-size: .9rem; }
.console-bar .who h1 { font: 700 1.05rem/1.2 var(--font-body); letter-spacing: -.01em; overflow-wrap: anywhere; }
.console-bar .aside { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.console-lede { color: var(--muted); margin: -.25rem 0 1rem; }
.section-nav { display: flex; gap: .3rem; flex-wrap: wrap; margin: 0 0 1rem; }
.section-nav a { color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 500; padding: .3rem .8rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); }
.section-nav a:hover { background: var(--panel-2); color: var(--ink); }
.live { display: inline-flex; align-items: center; gap: .4em; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.live::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--wait); flex: none; }
.live.good::before { background: var(--good); }
.live.wait::before { background: var(--wait); }
.live.bad::before { background: var(--bad); }
.live.bad { color: var(--bad); }
.live.paused::before { background: var(--line-2); }
.notice-region { position: sticky; top: 3.4rem; z-index: 19; display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 1rem; box-shadow: var(--shadow); }
.notice-region .notice-text { flex: 1; }
.notice-region .notice-dismiss { flex: none; font-size: 1.1rem; line-height: 1; padding: 0 .35rem; color: var(--muted); }
.hash[data-full] { cursor: pointer; border-radius: 3px; }
.hash[data-full]:hover { background: var(--panel-2); }
.hash[data-full] .copy-mark { color: var(--muted); font-size: .85em; margin-left: .25em; opacity: .7; }
.hash.copied, .hash.copied .copy-mark { color: var(--good); }
button.copy { padding: 0 .3rem; vertical-align: middle; font-size: .95rem; }
button.copy.done, button.copy.copied { color: var(--good); }
dialog.confirm {
  border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.5rem 1.75rem;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow); width: min(32rem, 92vw);
}
dialog.confirm::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
dialog.confirm h2 { margin-bottom: .5rem; }
dialog.confirm p { color: var(--muted); }
dialog.confirm .confirm-id { margin: .8rem 0; padding: .6rem .8rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); font-family: var(--font-mono); font-size: .85rem; overflow-wrap: anywhere; }
dialog.confirm .actions { justify-content: flex-end; margin-top: 1.2rem; }
.tabs-select { display: none; margin: 0 0 1rem; width: auto; }
@media (max-width: 640px) {
  .tabs[data-tabs] { display: none; }
  .tabs-select { display: block; }
  .console-bar .who .kind { display: none; }
  .status-strip { gap: .3rem .8rem; font-size: .8rem; }
}
.list-row { grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) auto; }
.list-row > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 780px) {
  .list-row { grid-template-columns: 1fr auto; }
  .list-row > :first-child { grid-column: 1 / -1; }
}

/* Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .dot { box-shadow: none; }
}