/* The Sixele design system, for the web.
 *
 * Every value here comes from the app: colours from lib/theme/app_colors.dart,
 * spacing and sizes from lib/theme/tokens.dart, and the type scale from
 * openspec/specs/design-language/spec.md. If a token changes there, change it
 * here. Square corners, the 6px grid, IBM Plex, no pink, plum for black.
 */

/* --- Type: IBM Plex, shipped with the site. Nothing calls a font server. --- */

@font-face { font-family: "IBM Plex Serif"; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSerif-Medium.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSerif-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/IBMPlexSans-Italic.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype"); }

/* --- Tokens --- */

:root {
  color-scheme: light dark;

  /* Semantic colours, light (DL-09). */
  --surface: #f1ecef;
  --surface-raised: #ffffff;
  --surface-well: #e1dbe0;
  --ink: #2e1d38;
  --ink-muted: #594b60;
  --ink-subtle: #65576b;
  --accent: #7a2740;
  --on-accent: #f1ecef;
  --accent-edge: #7a2740;
  --accent-text: #7a2740;
  --accent-quiet: #e1dbe0;
  --affirm: #1f5d59;
  --affirm-text: #1f5d59;
  --affirm-quiet: #d8dbdd;
  --attention: #9e5141;
  --attention-text: #9e5141;
  --attention-quiet: #e1dbe0;
  --line: #74687a;
  --line-subtle: #c6bec7;
  --focus: #7a2740;
  --shadow: rgba(46, 29, 56, 0.2);

  /* The 6px grid (DL-02). */
  --s6: 6px;
  --s12: 12px;
  --s18: 18px;
  --s24: 24px;
  --s30: 30px;
  --s36: 36px;
  --s48: 48px;
  --s60: 60px;
  --s72: 72px;
  --s96: 96px;

  /* Widths (DL-04). The page holds two reading columns side by side. */
  --reading: 576px;
  --page: 1104px;

  --serif: "IBM Plex Serif", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* Semantic colours, dark. Also what an inverted block uses on a light page. */
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #2e1d38;
    --surface-raised: #3c2b45;
    --surface-well: #211528;
    --ink: #f1ecef;
    --ink-muted: #c2bac3;
    --ink-subtle: #afa6b1;
    --accent-edge: #f1ecef;
    --accent-text: #f1ecef;
    --accent-quiet: #45203a;
    --affirm: #3cb4ac;
    --affirm-text: #3cb4ac;
    --affirm-quiet: #293042;
    --attention: #cc7866;
    --attention-text: #cc7866;
    --attention-quiet: #502d3b;
    --line: #8c8090;
    --line-subtle: #55465d;
    --focus: #f1ecef;
    --shadow: rgba(21, 12, 28, 0.5);
  }
}

/* --- Base --- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--s96); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/24px var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent-text); text-underline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
strong { font-weight: 600; }

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

.wrap {
  max-width: calc(var(--page) + 2 * var(--s24));
  margin: 0 auto;
  padding: 0 var(--s24);
}

/* --- Type scale (DL-06) --- */

.display {
  font: 500 42px/48px var(--serif);
  letter-spacing: -0.01em;
}
.headline { font: 600 24px/30px var(--serif); }
.title { font: 600 20px/24px var(--serif); }
.title-sm { font: 600 16px/24px var(--serif); }
.section-title { font: 500 30px/36px var(--serif); }
.reading { font: 400 18px/30px var(--sans); }
.quote { font: italic 400 18px/30px var(--sans); }
.small { font: 400 14px/18px var(--sans); color: var(--ink-muted); }
.label {
  font: 600 14px/18px var(--sans);
  letter-spacing: 0.01em;
}
.status {
  font: 600 13px/18px var(--sans);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
.note { font: 400 13px/18px var(--mono); color: var(--ink-muted); }
.fact { font: 500 16px/24px var(--mono); white-space: nowrap; }
.fact-lg { font: 500 24px/30px var(--mono); }
.code { font: 400 14px/18px var(--mono); }
.num { font-family: var(--mono); }
.muted { color: var(--ink-muted); }

@media (max-width: 599px) {
  .display { font-size: 36px; line-height: 42px; }
}

/* --- Brand marks (DL-12, DL-13) ---
 * The marks are flat pictures with mist or plum baked in, so they only ever
 * sit directly on the page colour, never on a card or a well. */

.mark-60 { width: 60px; height: 60px; }
.mark-48 { width: 48px; height: 48px; }
.wordmark { width: 216px; height: 216px; }
@media (max-width: 599px) {
  .wordmark { width: 144px; height: 144px; }
}

.pebble { flex: none; width: 40px; height: 40px; }
.pebble-64 { width: 64px; height: 64px; }

/* --- Line icons: a 24 box, 1.5 stroke, square caps, the text's colour. --- */

.line-icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.icon-affirm { color: var(--affirm-text); }
.icon-attention { color: var(--attention-text); }

/* --- Header: the mark, the three sections, and Leave now. --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--line-subtle);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s12);
  padding-top: var(--s12);
  padding-bottom: var(--s12);
}
.home { display: flex; flex: none; }
.site-nav {
  flex: 1 1 360px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s6);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--s12);
  color: var(--ink);
  text-decoration: none;
  font: 600 14px/18px var(--sans);
  letter-spacing: 0.01em;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.site-nav a[aria-current="page"] {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* Leave now: 60 tall, edged in 2, the one control that carries a stone. */
.leave-now {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s12);
  height: 60px;
  padding: 0 var(--s24) 0 4px;
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 0 6px 0 var(--shadow);
  color: var(--ink);
  text-decoration: none;
  font: 600 16px/24px var(--sans);
}
.leave-now:hover { border-color: var(--ink); }

@media (max-width: 599px) {
  .site-nav { order: 3; flex-basis: 100%; }
  .leave-now { margin-left: auto; }
}

/* --- Page structure --- */

main.page {
  display: flex;
  flex-direction: column;
  gap: var(--s48);
  padding-top: var(--s72);
  padding-bottom: var(--s96);
}
@media (max-width: 599px) {
  main.page { padding-top: var(--s48); }
}

.intro {
  max-width: var(--reading);
  display: flex;
  flex-direction: column;
  gap: var(--s18);
}
.intro .display { margin: 0; }

.centre {
  align-items: center;
  text-align: center;
  align-self: center;
  width: 100%;
  gap: var(--s24);
}
.centre .display { margin-top: var(--s12); }

.band {
  border-top: 1px solid var(--line-subtle);
  padding-top: var(--s48);
}
.band-copy {
  flex: 1 1 432px;
  max-width: var(--reading);
  display: flex;
  flex-direction: column;
  gap: var(--s18);
}
.band-aside { flex: 1 1 336px; }

.two-up {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s36) var(--s72);
  align-items: flex-start;
}
.stack { display: flex; flex-direction: column; gap: var(--s18); }
.stack-36 { display: flex; flex-direction: column; gap: var(--s36); }

.kicker {
  display: flex;
  align-items: center;
  gap: var(--s12);
}

/* --- Buttons (DL-03, DL-11) --- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s6);
  min-height: 48px;
  padding: 0 var(--s24);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 600 16px/24px var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 120ms ease-out;
}
.button:hover { opacity: 0.85; }
.button-primary {
  height: 60px;
  padding: 0 var(--s30);
  background: var(--accent);
  border-color: var(--accent-edge);
  color: var(--on-accent);
}
.button-lg { height: 60px; padding: 0 var(--s30); }
.action { margin-top: var(--s24); align-self: flex-start; }

/* --- Cards: raised, hairline edge, no shadow (DL-01a). --- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s18);
  padding: var(--s24);
  background: var(--surface-raised);
  border: 1px solid var(--line-subtle);
}
.card-12 { gap: var(--s12); }
.card-foot {
  margin-top: auto;
  padding-top: var(--s12);
  border-top: 1px solid var(--line-subtle);
}
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s24);
}
.card-row > * { flex: 1 1 288px; }

/* The three choices on the landing page. */
.choice {
  color: var(--ink);
  text-decoration: none;
  border-color: var(--line);
}
.choice:hover { border-color: var(--ink); }
.choice .headline { display: block; margin-top: var(--s6); }
.choice-body { flex-grow: 1; color: var(--ink-muted); }
.choice-go {
  display: inline-flex;
  align-items: center;
  gap: var(--s6);
  min-height: 48px;
  font: 600 14px/18px var(--sans);
  letter-spacing: 0.01em;
  color: var(--accent-text);
}

/* --- Lists --- */

.checks { display: flex; flex-direction: column; gap: var(--s12); }
.checks li { display: flex; gap: var(--s12); }

.steps { display: flex; flex-direction: column; }
.steps li {
  display: flex;
  gap: var(--s18);
  padding: var(--s12) 0;
  border-top: 1px solid var(--line-subtle);
}
.steps li:last-child { border-bottom: 1px solid var(--line-subtle); }
.steps .num { flex: 0 0 18px; font-weight: 500; }

.rows { display: flex; flex-direction: column; }
.rows > li {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  padding: var(--s18) 0;
  border-top: 1px solid var(--line-subtle);
}
.rows > li:last-child { border-bottom: 1px solid var(--line-subtle); }
.rows p { margin-top: var(--s6); }

.people { display: flex; flex-direction: column; }
.people li {
  display: flex;
  align-items: center;
  gap: var(--s12);
  padding: var(--s12) 0;
  border-top: 1px solid var(--line-subtle);
}
.people li:last-child { border-bottom: 1px solid var(--line-subtle); }
.initial {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-well);
  font: 600 14px/18px var(--sans);
}
.people .who { flex-grow: 1; display: flex; flex-direction: column; }
.affirm-word { font: 600 13px/18px var(--sans); letter-spacing: 0.01em; color: var(--affirm-text); }

.bullets { padding-left: var(--s24); list-style: disc; display: flex; flex-direction: column; gap: var(--s12); }

/* --- Notices (DL-16): square, edged in their tone, in the flow. --- */

.notice {
  display: flex;
  gap: var(--s12);
  width: 100%;
  max-width: var(--reading);
  padding: var(--s18);
  background: var(--surface-raised);
  border: 1px solid var(--line);
}
.notice .line-icon { color: var(--ink-muted); }
.notice > div { display: flex; flex-direction: column; gap: var(--s6); }
.notice-attention {
  background: var(--attention-quiet);
  border: 2px solid var(--attention);
}
.notice-attention .line-icon { color: var(--attention-text); }
.notice-attention .status { color: var(--ink); }

/* --- Tables --- */

.table-wrap {
  overflow-x: auto;
  background: var(--surface-raised);
  border: 1px solid var(--line-subtle);
}
table {
  width: 100%;
  min-width: 576px;
  border-collapse: collapse;
  text-align: left;
}
caption {
  caption-side: top;
  text-align: left;
  padding: var(--s18) var(--s24);
  font: 600 16px/24px var(--serif);
  border-bottom: 1px solid var(--line-subtle);
}
th, td { padding: var(--s18) var(--s24); vertical-align: top; }
thead th { padding: var(--s12) var(--s24); font: 600 14px/18px var(--sans); color: var(--ink-muted); }
th { font-weight: 600; }
tbody tr, tfoot tr { border-top: 1px solid var(--line-subtle); }
tfoot tr { border-top: 2px solid var(--line); }
.amount { text-align: right; font-family: var(--mono); white-space: nowrap; }
.awarded { display: inline-flex; align-items: center; gap: var(--s6); white-space: nowrap; }
tr.stage th { padding: var(--s12) var(--s24); font: 600 14px/18px var(--sans); background: var(--surface-well); }

/* --- Charts (DL-08, DL-09) ---
 * One mark is the point and wears claret; the rest are the line grey, and an
 * empty part is the well. In dark, claret on plum is too faint to read, so the
 * mark is mist, as an accent's edge and text already are. Square ends like
 * every other corner, a 2px gap of card colour between touching marks, and
 * every value written beside its mark, never colour alone. */

:root {
  --chart-mark: var(--accent);
  --chart-rest: var(--line);
  --chart-empty: var(--surface-well);
}
@media (prefers-color-scheme: dark) {
  :root { --chart-mark: var(--ink); }
}

.chart { margin-top: var(--s12); }

.waffle { display: block; width: 100%; height: auto; }
.waffle .mark { fill: var(--chart-mark); }
.waffle .empty { fill: var(--chart-empty); }

.meter { display: flex; height: 12px; background: var(--chart-empty); }
.meter > span { background: var(--chart-mark); border-right: 2px solid var(--surface-raised); }
.meter-key { display: flex; justify-content: space-between; gap: var(--s12); margin-top: var(--s6); }

.columns { display: flex; align-items: flex-end; }
.columns li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s6); }
.columns .col { width: 24px; height: calc(var(--v) * 2px); background: var(--chart-rest); }
.columns .col + span {
  align-self: stretch;
  margin-top: calc(-1 * var(--s6));
  padding-top: var(--s6);
  border-top: 1px solid var(--line-subtle);
  text-align: center;
}
.columns .is-mark .col { background: var(--chart-mark); }

.bars { display: flex; flex-direction: column; gap: var(--s12); }
.bars li { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s12); row-gap: var(--s6); }
.bars li > .small { flex-basis: 100%; }
.bars .bar { height: 12px; width: calc(var(--v) * 0.8%); background: var(--chart-rest); }
.bars .is-mark .bar { background: var(--chart-mark); }

/* --- Footer --- */

.site-footer { border-top: 1px solid var(--line-subtle); }
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s18) var(--s48);
  padding-top: var(--s36);
  padding-bottom: var(--s48);
  font: 400 14px/18px var(--sans);
  color: var(--ink-muted);
}
.site-footer .wrap > * { flex: 1 1 360px; max-width: var(--reading); }
.site-footer p + p { margin-top: var(--s12); }
.site-footer .who { flex: 0 1 auto; }
/* Contact and source links are tap targets: 48 minimum, in the footer and inline in text. */
.site-footer p a, a.contact-link, a.source-link { display: inline-flex; align-items: center; min-height: 48px; }