/* MODPACK site — static, no JS, no external resources.
   Tokens mirror the app design system:
   - lib/theme/app_theme.dart   (ModpackColors light/dark, indigo accent #3F51B5)
   - lib/theme/value_colors.dart (value ramp, dark label ink, darkened borders)
   - lib/widgets/sprint_board.dart (blueprint trame: accent 10% fine / 22% major,
     24px module, major every 5 modules)
   - drop preview green / #F6A609 / red (sprint_grid.dart, RG-02.12) */

:root {
  /* Accent — indigo MODPACK (kDefaultAccentArgb) */
  --accent: #3f51b5;
  --on-accent: #ffffff;
  /* Surfaces (ModpackColors.light) */
  --canvas: #f3f4f9;
  --card: #ffffff;
  --outline: rgba(0, 0, 0, 0.08);
  --ink: #222633;
  --ink-muted: rgba(0, 0, 0, 0.45);
  --action: #4a5061;
  --cell-fill: #eceef6;
  --cell-line: rgba(39, 49, 79, 0.18);
  --gauge-track: #edeef4;
  /* Blueprint trame (accent-tinted) */
  --trame-fine: rgba(63, 81, 181, 0.10);
  --trame-major: rgba(63, 81, 181, 0.22);
  /* Drop preview (RG-02.12 — theme-invariant) */
  --ok: #4caf50;
  --warn: #f6a609;
  --ko: #f44336;
  /* Value spectrum (RG-03.4 — theme-invariant, dark ink on top) */
  --v-xs: #9fd8b0;
  --v-s: #9ec5f2;
  --v-m: #c2abea;
  --v-l: #f7c873;
  --v-xl: #f09a8c;
  --block-ink: rgba(0, 0, 0, 0.87);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #bac3ff;
    --on-accent: #1a2069;
    /* Surfaces (ModpackColors.dark) */
    --canvas: #14161d;
    --card: #21252f;
    --outline: rgba(255, 255, 255, 0.12);
    --ink: #e9ebf5;
    --ink-muted: rgba(233, 235, 245, 0.60);
    --action: #b3bacd;
    --cell-fill: #2a2f3c;
    --cell-line: rgba(201, 210, 238, 0.20);
    --gauge-track: #313644;
    --trame-fine: rgba(186, 195, 255, 0.10);
    --trame-major: rgba(186, 195, 255, 0.22);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Roboto: the app's typeface (Flutter default), no webfont fetched. */
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
}

a { color: var(--accent); }

code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.9em;
  background: var(--cell-fill);
  border: 1px solid var(--outline);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

pre {
  background: var(--cell-fill);
  border: 1px solid var(--outline);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  overflow-x: auto;
}
pre code { background: none; border: none; padding: 0; }

kbd {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  background: var(--cell-fill);
  border: 1px solid var(--cell-line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.05em 0.45em;
}

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

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

/* App-bar-like header: card surface, hairline bottom (app_theme.dart). */
header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card);
  border-bottom: 1px solid var(--outline);
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.logo {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The real mark: assets/brand/logo.svg inlined, accent-tinted like the
   app bar (_LogoPainter). */
.logo svg { color: var(--accent); display: block; }
.logo .name { letter-spacing: 3px; font-size: 0.9rem; }

nav.main { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; }
nav.main a { color: var(--action); text-decoration: none; font-size: 0.95rem; }
nav.main a:hover, nav.main a[aria-current="page"] { color: var(--accent); }
nav.main a.lang {
  border: 1px solid var(--outline);
  border-radius: 999px;
  padding: 0.1rem 0.7rem;
  font-size: 0.85rem;
}

footer.site {
  border-top: 1px solid var(--outline);
  background: var(--card);
  margin-top: 4rem;
  padding: 2rem 0 3rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
}
footer.site .wrap { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: space-between; }

/* ---------- Buttons and badges ---------- */

.badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.badges span {
  font-size: 0.82rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--outline);
  background: var(--cell-fill);
  color: var(--action);
}

.cta { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 0.65rem 1.3rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
}
.btn { transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.08); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn.ghost { border: 1.5px solid var(--accent); color: var(--accent); }

/* ---------- Home board (the page IS a plan) ---------- */

/* Only the home pages wear the blueprint paper; guide pages stay plain. */
body.board-page {
  background:
    linear-gradient(var(--trame-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--trame-fine) 1px, transparent 1px),
    linear-gradient(var(--trame-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--trame-major) 1px, transparent 1px),
    var(--canvas);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
}
.board { padding: 2.5rem 0 4rem; }

/* A section = a card laid on the paper, like a sprint card. */
.sheet {
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
  margin-bottom: 2rem;
  overflow: hidden;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.sheet:hover { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16); transform: translateY(-2px); }
.sheet > .body { padding: 1.6rem 1.8rem 1.8rem; }
.sheet-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1.8rem;
  border-bottom: 1px solid var(--outline);
  font-weight: 500;
}
.sheet-head .grip { display: grid; grid-template-columns: repeat(2, 3px); gap: 2px; opacity: 0.45; }
.sheet-head .grip i { width: 3px; height: 3px; border-radius: 50%; background: var(--action); }
.sheet-head .tag { margin-left: auto; font-weight: 400; font-size: 0.82rem; color: var(--ink-muted); }
.sheet h2 { margin: 0 0 0.8rem; font-size: 1.5rem; }
.sheet p { max-width: 46rem; }
.sheet p:last-child { margin-bottom: 0; }

/* Hero card: pitch left, screenshot right. */
.sheet.hero > .body { display: flex; gap: 2.5rem; align-items: center; flex-wrap: wrap; }
.sheet.hero .pitch { flex: 1 1 20rem; }
.sheet.hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 0.9rem; }
.sheet.hero h1 em { color: var(--accent); font-style: normal; }
.sheet.hero .sub { color: var(--ink-muted); margin: 0 0 1.5rem; }
.sheet.hero figure { flex: 1 1 24rem; min-width: 0; margin: 0; }

/* Key points inside a card: no nested boxes — a colored dot from the value
   spectrum (RG-03.4), a term, a sentence. */
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.4rem 2.5rem; margin-top: 1.4rem; }
.points > div { --dot: var(--accent); }
.points > div.v1 { --dot: var(--v-xs); }
.points > div.v2 { --dot: var(--v-s); }
.points > div.v3 { --dot: var(--v-m); }
.points b { display: block; margin-bottom: 0.25rem; }
.points b::before {
  content: "";
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border-radius: 2px;
  margin-right: 0.5em;
  background: var(--dot);
}
.points p { margin: 0; font-size: 0.95rem; color: var(--ink-muted); max-width: none; }

/* Steps carry their own numbering — no dot needed. */
.points.plain b::before { content: none; }

/* The metaphor, demonstrated: a real sprint grid drawn in CSS. One cell = one
   point (RG-02.1), blocks colored by the value spectrum (RG-03.4). */
.demo { display: flex; gap: 2.5rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; }
.demo .grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(10, 1.5rem);
  grid-auto-rows: 1.5rem;
  gap: 3px;
}
.demo .grid i { background: var(--cell-fill); border: 1px solid var(--cell-line); border-radius: 3px; }
.demo .grid b {
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--block-ink);
  font-size: 0.6rem;
  font-weight: 700;
  font-style: normal;
}
.demo .b-m { grid-column: 1 / span 5; grid-row: 1 / span 4; background: var(--v-m); border: 1.5px solid color-mix(in srgb, var(--v-m) 60%, black); }
.demo .b-s { grid-column: 6 / span 5; grid-row: 1 / span 2; background: var(--v-s); border: 1.5px solid color-mix(in srgb, var(--v-s) 60%, black); }
.demo .b-xs { grid-column: 6 / span 5; grid-row: 3 / span 1; background: var(--v-xs); border: 1.5px solid color-mix(in srgb, var(--v-xs) 60%, black); }
.demo .cap { font-size: 0.85rem; color: var(--ink-muted); margin: 0.7rem 0 0; text-align: center; }
.demo .legend { flex: 1 1 20rem; }
.demo .legend p { margin: 0 0 0.8rem; }
.demo .legend p:last-child { margin: 0; }

/* The project's estimation scale, drawn as the app's chips (RG-03.2),
   colored by the value spectrum (RG-03.4). */
.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; }
.chips span {
  --chip: var(--accent);
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--block-ink);
  background: var(--chip);
  border: 1.5px solid color-mix(in srgb, var(--chip) 60%, black);
  transition: transform 140ms ease;
}
.chips span:hover { transform: translateY(-2px); }
.chips span b { font-weight: 700; }
.chips span i { font-style: normal; opacity: 0.75; font-size: 0.82rem; }
.chips .c1 { --chip: var(--v-xs); }
.chips .c2 { --chip: var(--v-s); }
.chips .c3 { --chip: var(--v-m); }
.chips .c4 { --chip: var(--v-l); }
.chips .c5 { --chip: var(--v-xl); }
.chips .note { background: none; border: none; color: var(--ink-muted); font-size: 0.85rem; padding-left: 0.4rem; }
.chips .note:hover { transform: none; }

/* Getting started as a flow: steps joined by the same dashed arrow as the
   cards, laid on their side. */
.flow { display: flex; align-items: flex-start; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.6rem; }
.flow .step { flex: 1 1 13rem; }
.flow .step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 1.5px dashed var(--accent);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}
.flow .step b { display: block; margin-bottom: 0.25rem; }
.flow .step p { margin: 0; font-size: 0.95rem; color: var(--ink-muted); max-width: none; }
.flow .to { flex: 0 0 auto; align-self: center; color: var(--accent); opacity: 0.5; }
@media (max-width: 52rem) { .flow .to { display: none; } }

/* The one action a card wants you to take. */
.cta-inline { margin-top: 1.6rem; }

.sheet .privacy { background: none; border: none; padding: 0; margin: 0; }
.sheet .privacy h2 { margin-top: 0; }

/* Card index, like a sprint name: "01", "02"… */
.sheet-head .idx {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.82rem;
}

/* Dependency arrow between cards — the app's dashed connector (RG-02.24),
   arrowhead on the dependent side. Drawn as SVG so it stays crisp. */
.board .sheet { margin-bottom: 0; }
.link { display: flex; justify-content: center; color: var(--accent); }
.link svg { display: block; opacity: 0.55; }

/* ---------- Screenshots ---------- */

img.shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--outline);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
figure { margin: 1.4rem 0; }
/* Screenshots displayed at half their native (2x) pixels stay crisp; the
   width attribute on the img carries the target size. */
img.shot-fix { width: auto; max-width: 100%; margin: 0 auto; display: block; }
figure.shot-frame { max-width: 100%; }
figcaption { font-size: 0.85rem; color: var(--ink-muted); margin-top: 0.5rem; text-align: center; }

/* ---------- Sections ---------- */

section { padding: 3.5rem 0 0.5rem; }
section > .wrap > h2 { font-size: 1.8rem; margin: 0 0 0.4rem; }
section > .wrap > p.lead { color: var(--ink-muted); max-width: 46rem; margin-top: 0; }

/* ---------- Your data ---------- */

.privacy {
  margin-top: 2rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 12px;
  padding: 2rem 2rem 1.5rem;
}
.privacy h2 { margin-top: 0; }
.privacy ul.checks { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.9rem 1.5rem; }
.privacy ul.checks li { padding-left: 1.7rem; position: relative; }
.privacy ul.checks li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}
.privacy ul.checks b { display: block; }
.privacy ul.checks span { color: var(--ink-muted); font-size: 0.92rem; }

/* ---------- Guide ---------- */

.guide { display: flex; gap: 3rem; align-items: flex-start; padding-top: 2.5rem; }

.guide nav.toc {
  position: sticky;
  top: 4.2rem;
  flex: 0 0 14rem;
  font-size: 0.92rem;
  background: var(--card);
  border: 1px solid var(--outline);
  border-radius: 10px;
  padding: 1rem 1.2rem;
}
.guide nav.toc ol { list-style: none; padding: 0; margin: 0; }
.guide nav.toc li { margin: 0.35rem 0; }
.guide nav.toc a { color: var(--action); text-decoration: none; }
.guide nav.toc a:hover { color: var(--accent); }
.guide nav.toc .toc-title { font-weight: 700; margin-bottom: 0.6rem; }
.guide nav.toc a[aria-current="page"] { color: var(--accent); font-weight: 500; }

/* The open page unfolds its own sections. */
.guide nav.toc .sub {
  list-style: none;
  margin: 0.35rem 0 0.6rem;
  padding-left: 0.7rem;
  border-left: 1px solid var(--outline);
  font-size: 0.88rem;
}
.guide nav.toc .sub li { margin: 0.2rem 0; }
.guide nav.toc .sub a { color: var(--ink-muted); }

.guide main { flex: 1 1 30rem; min-width: 0; }
.guide main h1 { margin-top: 0; }
.guide main h2 {
  margin-top: 2.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--outline);
  font-size: 1.45rem;
}
.guide main h3 { margin-top: 1.6rem; font-size: 1.1rem; }
.guide main .lead { color: var(--ink-muted); }

.tip {
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 0.7rem 1rem;
  margin: 1.2rem 0;
  font-size: 0.93rem;
}

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.93rem; }
th, td { border: 1px solid var(--outline); padding: 0.45rem 0.7rem; text-align: left; vertical-align: top; background: var(--card); }
th { background: var(--cell-fill); }

.swatch {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 3px;
  margin-right: 0.35em;
  vertical-align: baseline;
}
.sw-ok { background: var(--ok); }
.sw-warn { background: var(--warn); }
.sw-ko { background: var(--ko); }

@media (max-width: 52rem) {
  .guide { flex-direction: column; gap: 1.5rem; }
  .guide nav.toc { position: static; flex: none; width: 100%; }
}

/* Motion is decoration here — never required to read the page. */
@media (prefers-reduced-motion: reduce) {
  .sheet, .btn, .chips span { transition: none; }
  .sheet:hover, .btn:hover, .chips span:hover { transform: none; }
}