/* Plainfleet T8 prototype. Palette + type: docs/marketing/BRAND.md §4.2–4.3 */
:root {
  --ink: #0F1B2D; --paper: #F7F5F0; --surface: #FFFFFF; --muted: #4A5566;
  --brand: #0F6E74; --gain: #1D5FA8; --loss: #B4532A; --sand: #C8A96A; --sand-text: #8A6A2E;
  --line: #DDD8CC;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #E8E6E1; --paper: #0E1622; --surface: #172232; --muted: #A7B0BD;
    --brand: #5CC2C7; --gain: #7FB2F0; --loss: #F0A07A; --sand: #D9BC85; --sand-text: #D9BC85; --line: #2A3647; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--brand); }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.num, .addr, td { font-variant-numeric: tabular-nums; }
.addr { font-family: var(--mono); }
main { max-width: 1100px; margin: 0 auto; padding: 0 16px 32px; }
.testbar { background: var(--sand-text); color: #fff; text-align: center; font-weight: 600; padding: 6px 16px; }
@media (prefers-color-scheme: dark) { .testbar { color: #0E1622; } }
header.bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; }
header.bar h1 { margin: 0; font-size: 1.4rem; }
.wordmark { font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; margin-right: auto; }
.badge { display: inline-block; border: 1px solid currentColor; border-radius: 4px; padding: 0 6px;
  font-size: .8rem; font-weight: 600; color: var(--sand-text); vertical-align: middle; }
.badge.grey { color: var(--muted); font-weight: 400; }
.muted { color: var(--muted); }
.notice { margin: 8px 0; }            /* disclaimer blocks: body size, never collapsed */
.warn { color: var(--sand-text); font-weight: 600; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin: 12px 0; }
.card h2 { font-size: .85rem; letter-spacing: .06em; margin: 0 0 8px; color: var(--muted); }
.gain { color: var(--gain); } .loss { color: var(--loss); }
dl.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; }
dl.kv dt { color: var(--muted); } dl.kv dd { margin: 0; text-align: right; }
/* (i) info buttons */
.info { font: inherit; font-size: .8rem; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--muted);
  background: transparent; color: var(--muted); cursor: pointer; padding: 0; margin-left: 4px; position: relative;
  /* 44px touch area without visual bulk */
  box-shadow: 0 0 0 10px transparent; }
.pop[hidden] { display: none; }
.pop { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
  margin: 4px 0; font-size: .9rem; color: var(--ink); text-align: left; font-weight: 400; }
/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.chips legend { font-size: .85rem; color: var(--muted); padding: 0; margin-bottom: 4px; width: 100%; }
.chips button { min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.chips button[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); font-weight: 600; box-shadow: inset 0 0 0 1px var(--brand); }
select { min-height: 44px; font: inherit; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; }
/* leaderboard: cards on mobile, table on desktop */
.rows { list-style: none; padding: 0; margin: 0; }
.rows a { display: block; min-height: 44px; padding: 10px 12px; margin: 8px 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; }
.rows a:hover { border-color: var(--brand); }
.rows .l1 { font-weight: 600; }
table.lb { display: none; width: 100%; border-collapse: collapse; background: var(--surface); }
table.lb th, table.lb td { padding: 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
table.lb th:first-child, table.lb td:first-child, table.lb th:nth-child(2), table.lb td:nth-child(2) { text-align: left; }
table.lb th, table.lb td:nth-child(2), table.lb td:last-child { white-space: normal; }
.tw { overflow-x: auto; }
table.lb th { font-size: .8rem; color: var(--muted); font-weight: 600; vertical-align: bottom; }
table.lb tbody tr:hover { background: var(--paper); }
@media (min-width: 900px) {
  .rows { display: none; } table.lb { display: table; }
  .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
}
.skel { height: 72px; border-radius: 8px; background: var(--line); margin: 8px 0; opacity: .5; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border-radius: 8px; border: 0; background: var(--brand); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.textbtn { min-height: 44px; background: none; border: 0; color: var(--brand); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
dialog { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); max-width: 420px; }
footer.d1 { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 12px; color: var(--muted); font-size: .9rem; }
footer.d1 .d4 { font-size: 1rem; color: var(--ink); } /* D4 placement: same size as body text */
svg.curve { width: 100%; height: auto; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.15rem; margin-top: 28px; }
.field { width: 100%; min-height: 44px; font: inherit; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; }
summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
/* waitlist (S1-72) */
.wl { max-width: 640px; }
.hero h1 { font-size: 1.8rem; line-height: 1.2; margin: 16px 0 8px; }
.hero .sub { font-size: 1.1rem; margin: 0 0 16px; }
.btn[disabled], .textbtn[disabled] { opacity: .55; cursor: not-allowed; }
.points { padding-left: 20px; } .points li { margin: 8px 0; }
.example .addr { margin: 0; } .small { font-size: .9rem; }
form.card label { display: block; font-weight: 600; margin: 12px 0 4px; }
.check { display: flex; gap: 10px; align-items: flex-start; }
.check input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; }
form.card .check label { font-weight: 400; margin: 0; }
fieldset.consent { border: 0; padding: 0; margin: 12px 0 0; }
fieldset.consent legend { font-weight: 600; padding: 0; }
.faq details { border-bottom: 1px solid var(--line); }