/* DELTALab public site — stylesheet (ROADMAP Phase 32).

   The token block below is COPIED from deltalab-ui/src/app.css, only the tokens the
   site uses. tests/test_site_tokens.py fails if any value drifts from the app's, in
   either theme (the sync contract "Site design tokens"). Change a token in app.css
   first, then here.

   Python comparison: this is like a constants module imported by two programs, except
   CSS has no import across the two projects, so a test enforces the copy instead.

   Dark mode: the app flips it with a toggle (:root[data-theme="dark"]). The site has
   no toggle, so it follows the visitor's system setting through the media query. */
:root {
  color-scheme: light; /* native controls follow the theme */

  --bg:         #f5f5f7;
  --surface:    #ffffff;
  --surface2:   #f5f5f7;
  --border:     #e0e0e0;
  --text:       #1d1d1f;
  --text-muted: #333333;
  --text-dim:   #7a7a7a;
  --accent:     #0066cc;
  --accent2:    #0071e3;
  --accent-fill: #0066cc;

  --sans:         "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --sans-display: "SF Pro Display", "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;

  --nav-h:        44px;
  --surface-nav:  #000000;
  --radius-card:  18px;
  --radius-util:  8px;
  --radius-pill:  999px;
  --divider-soft: #f0f0f0;

  /* The one status hue: used only for the error line under the download card. */
  --qc-red: #C62828;

  --shadow-plot: rgba(0,0,0,.22) 3px 5px 30px 0;
  --shadow-card: 0 1px 2px rgba(0,0,0,.03),
                 0 5px 14px rgba(0,0,0,.045),
                 0 12px 32px rgba(0,0,0,.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg:         #111113;
    --surface:    #1d1d1f;
    --surface2:   #111113;
    --border:     #38383a;
    --text:       #f5f5f7;
    --text-muted: #d2d2d7;
    --text-dim:   #8e8e93;
    --accent:     #2997ff;
    --accent2:    #0a84ff;
    --accent-fill: #0071e3;
    --divider-soft: #2a2a2c;
    --qc-red: #e5534b;

    --shadow-plot: rgba(0,0,0,.55) 3px 5px 30px 0;
    --shadow-card: 0 1px 2px rgba(0,0,0,.30),
                   0 5px 14px rgba(0,0,0,.35),
                   0 12px 32px rgba(0,0,0,.40);
  }
}

/* ── Reset and base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Unlike the app (a fixed-height window), the site is a normal scrolling page. */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* Focus is the one affordance the design language keeps; there are no :hover rules. */
:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

/* ── Layout ─────────────────────────────────────────────────────────────────
   Everything from here down reads tokens only. The two literals allowed are white
   (text on the black nav and on --accent-fill; the logo plate in dark mode) and the
   nav's 70% white version number. tests/test_site_css.py holds the rest of the
   design language: the type ladder, weights, no gradients, no hover. */

/* A hidden element must stay hidden even when a rule below gives it a display value. */
[hidden] { display: none !important; }

a { color: var(--accent); text-decoration: none; }

/* Pressing is the only feedback a control gives (no :hover anywhere): scale to 0.95
   over about 120ms. `transform` needs a box, so inline links become inline-block. */
.nav-logo, .nav-link, .primary, .row a, .docs-row a, .card-line a {
  display: inline-block;
  transition: transform 120ms;
}
.nav-logo:active, .nav-link:active, .primary:active,
.row a:active, .docs-row a:active, .card-line a:active {
  transform: scale(0.95);
}

/* The centred content column: 16px gutters on phones, 24px from 768px up. */
.column {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .column { padding: 0 24px; }
}

/* ── Nav: a copy of the app's black TopBar ───────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--nav-h);
  padding: 0 16px;
  background: var(--surface-nav);
}
@media (min-width: 768px) {
  .nav { padding: 0 24px; }
}
.nav-logo { line-height: 0; }
.nav-logo img { display: block; height: 24px; width: auto; }
.nav-link {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
}
.nav-version {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}
@media (max-width: 599px) {
  .nav-link { display: none; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* one column on phones: text, card, screenshot */
  gap: 40px;
  padding-top: 64px;
}
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    align-items: center;
  }
}

h1 {
  font-family: var(--sans-display);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
}
@media (max-width: 599px) {
  h1 { font-size: 28px; }
}
.sub {
  margin-top: 12px;
  font-size: 17px;
  color: var(--text-muted);
}

/* The download card */
.download-card {
  margin-top: 24px;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card-line {
  font-size: 12px;
  color: var(--text-dim);
}
.primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 12px 0;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--accent-fill);
  color: #ffffff;
  font-size: 17px;
  font-weight: 400;
  text-align: center;
}
.primary-sub {
  font-size: 12px;
  opacity: 0.85;
}
.rows { list-style: none; }
.row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  border-top: 1px solid var(--divider-soft);
  font-size: 14px;
}
.row > span:first-child {
  flex: 1;
  color: var(--text);
}
.row a { font-size: 14px; }
.row-note {
  margin-right: 8px;
  color: var(--text-dim);
}
.rows + .card-line { margin-top: 12px; }
.card-error {
  margin-top: 8px;
  font-size: 12px;
  color: var(--qc-red);
}

/* The screenshot: a framed card with the plot-sized shadow */
.hero-shot {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-plot);
}
.hero-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── What DELTALab does ──────────────────────────────────────────────────── */
.about {
  max-width: 760px;
  margin-top: 56px;
}
h2 {
  font-family: var(--sans-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--text);
}
.about p {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-muted);
}
main.column { padding-bottom: 56px; }

/* ── Documentation band ──────────────────────────────────────────────────── */
.docs-band {
  padding: 24px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.docs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.docs-row .docs-label {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
}
.docs-row a { font-size: 14px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  padding: 48px 16px;
  text-align: center;
}
.protium-logo {
  display: block;
  margin: 0 auto;
  width: 48px;
  height: 48px;
}
.credit {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-dim);
}

/* The Protium mark is navy on white, so on the dark page it sits on a white rounded
   plate, the same idea as the app icon's white squircle. */
@media (prefers-color-scheme: dark) {
  .protium-logo {
    box-sizing: content-box;
    padding: 8px;
    background: #ffffff;
    border-radius: var(--radius-util);
  }
}

/* ── The user guide (guide.html) ─────────────────────────────────────────────
   The text styles are copied from the app's own guide viewer, UserDocsModal.svelte,
   so the site and the app read alike. Sizes that were off the type ladder there
   (19, 16, 13, 12.5) moved to the nearest ladder step. The note box keeps the app's
   translucent yellow, which reads on both themes without a second token. */
.guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 56px;
}
@media (min-width: 900px) {
  .guide {
    grid-template-columns: 240px minmax(0, 760px);
    gap: 40px;
    align-items: start;
  }
}

/* Chapter list: a <details> block above the text on phones, a sticky rail from 900px. */
.chapters {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  font-size: 14px;
}
.chapters summary { font-weight: 600; color: var(--text); cursor: pointer; }
.chapters ul { list-style: none; margin-top: 8px; }
.chapters li { padding: 4px 0; }
.chapters a { font-size: 14px; }
@media (min-width: 900px) {
  .chapters {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    max-height: calc(100vh - var(--nav-h) - 48px);
    overflow-y: auto;
  }
  .chapters summary { display: none; }
  .chapters ul { margin-top: 0; }
}

.guide-text {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
}
.guide-text h1 {
  font-size: 34px;
  margin-bottom: 16px;
}
@media (max-width: 599px) {
  .guide-text h1 { font-size: 28px; }
}
.guide-text .chapter { scroll-margin-top: calc(var(--nav-h) + 16px); }
.guide-text h2, .guide-text h3, .guide-text h4 {
  font-weight: 600;
  color: var(--text);
  margin: 20px 0 8px;
}
.guide-text .chapter { margin-top: 40px; }
.guide-text h2 { font-size: 24px; margin-top: 0; }
.guide-text h3 { font-size: 18px; }
.guide-text h4 { font-size: 17px; }
.guide-text p { margin: 0 0 12px; }
/* Justified with automatic hyphenation, as in the app. <html lang="en"> picks the dictionary. */
.guide-text p, .guide-text li { text-align: justify; hyphens: auto; }
.guide-text ul, .guide-text ol { margin: 0 0 12px; padding-left: 22px; }
.guide-text ul { list-style: disc; }
.guide-text ol { list-style: decimal; }
.guide-text li { margin-bottom: 4px; }
.guide-text strong { color: var(--text); font-weight: 600; }
.guide-text hr {
  border: none;
  border-top: 1px solid var(--divider-soft);
  margin: 16px 0;
}

/* Screenshots keep the width core/docs.py gave them (their real on-screen size). */
.guide-text img {
  display: block;
  max-width: 75%;
  height: auto;
  margin: 12px auto 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-util);
}
.guide-text img.guide-img-wide {
  max-width: 100%;
  border: none;
  border-radius: 0;
  margin: 14px auto;
}
.guide-text table + p > img.guide-img-wide { margin-left: -14px; }
.guide-text img.guide-img-right {
  float: right;
  max-width: 50%;
  margin: 0 0 10px 24px;
}
.guide-text img.guide-img-side {
  float: right;
  max-width: 100%;
  width: 215px;
  margin: -20px 0 8px 24px;
}
@media (max-width: 599px) {
  /* A floated picture beside narrow text is unreadable on a phone. */
  .guide-text img.guide-img-right, .guide-text img.guide-img-side {
    float: none;
    max-width: 100%;
    margin: 12px auto 4px;
  }
}

/* No mono face in the design language: inline code stays on the sans stack, set apart
   by a chip instead. */
.guide-text code {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.guide-text pre {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 0 0 12px;
}
.guide-text pre code { border: none; background: none; padding: 0; }

/* Notes (blockquotes) and "Important:"-style callouts, with the label in its own column
   so wrapped lines hang under the text. */
.guide-text blockquote {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: rgba(250, 204, 21, 0.14);
  border: 1px solid rgba(234, 179, 8, 0.45);
  border-radius: var(--radius-util);
}
.guide-text blockquote.callout {
  display: flex;
  gap: 0.4em;
  align-items: baseline;
}
.guide-text .callout-label { flex-shrink: 0; font-weight: 600; }
.guide-text .callout-body { flex: 1; min-width: 0; }
.guide-text .callout-body p:last-child, .guide-text blockquote > p:last-child { margin-bottom: 0; }

/* Tables hold prose, so cells wrap. A wide table scrolls inside its own box instead of
   making the page scroll sideways. */
.guide-text table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 14px;
}
.guide-text th, .guide-text td {
  text-align: left;
  padding: 6px 10px;
  border: 1px solid var(--border);
  vertical-align: top;
}
.guide-text th { background: var(--surface2); font-weight: 600; }