/* Enterwebs — one stylesheet, no build step.
   Identity: an indigo "woven" header band (twill texture) and an interlaced
   warp/weft mark. Everything else stays quiet so the discussion carries the page.
   Type: Atkinson Hyperlegible Next, chosen for legibility. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-Variable.woff") format("woff");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/AtkinsonHyperlegibleNext-Italic-Variable.woff") format("woff");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/AtkinsonHyperlegibleMono-Variable.woff") format("woff");
  font-weight: 200 800;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;
  --ground: #eceef4;
  --surface: #ffffff;
  --surface-2: #f6f7fb;
  --ink: #1b1f33;
  --ink-2: #4a5170;
  --ink-3: #626986;
  --line: #d9dce8;
  --line-strong: #b8bdd1;

  --indigo: #3346a8;
  --indigo-strong: #26368a;
  --indigo-wash: #e6e9f8;
  --on-indigo: #ffffff;
  --woad: #1c2559;
  --woad-2: #232d68;
  --weft: #e3b341;
  --on-woad: #ffffff;
  --on-woad-2: #c9d0f2;

  --madder: #a83a2c;
  --madder-wash: #f9e8e4;
  --moss: #1f6b55;
  --moss-wash: #e1f1ea;
  --ochre: #7a5a08;
  --ochre-wash: #fbf0d2;
  --plum: #6c3e8e;
  --plum-wash: #f1e7f7;
  --slate: #4a5170;
  --slate-wash: #eceef4;
  --sky: #2f5da0;
  --sky-wash: #e4edf9;

  --focus: #1c2559;
  --focus-halo: #e3b341;

  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Minor-third scale from a 17px base */
  --step--1: 0.8235rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.44rem;
  --step-3: 1.728rem;
  --step-4: 2.074rem;

  --radius-sheet: 12px;
  --radius-control: 8px;
  --space: 1rem;
  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #121527;
    --surface: #1a1e35;
    --surface-2: #20253f;
    --ink: #e7e9f3;
    --ink-2: #b5bad3;
    --ink-3: #9298b8;
    --line: #2e3453;
    --line-strong: #434a6e;
    --indigo: #a3afff;
    --indigo-strong: #c3cbff;
    --indigo-wash: #262d52;
    --on-indigo: #121527;
    --woad: #0d1130;
    --woad-2: #161c45;
    --madder: #f2988a;
    --madder-wash: #3a1f23;
    --moss: #7fd3b4;
    --moss-wash: #17332b;
    --ochre: #e8c162;
    --ochre-wash: #3a3018;
    --plum: #d3a8f0;
    --plum-wash: #2f2240;
    --slate: #b5bad3;
    --slate-wash: #262b45;
    --sky: #9cc0f5;
    --sky-wash: #1c2b45;
    --focus: #e3b341;
    --focus-halo: #121527;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #121527;
  --surface: #1a1e35;
  --surface-2: #20253f;
  --ink: #e7e9f3;
  --ink-2: #b5bad3;
  --ink-3: #9298b8;
  --line: #2e3453;
  --line-strong: #434a6e;
  --indigo: #a3afff;
  --indigo-strong: #c3cbff;
  --indigo-wash: #262d52;
  --on-indigo: #121527;
  --woad: #0d1130;
  --woad-2: #161c45;
  --madder: #f2988a;
  --madder-wash: #3a1f23;
  --moss: #7fd3b4;
  --moss-wash: #17332b;
  --ochre: #e8c162;
  --ochre-wash: #3a3018;
  --plum: #d3a8f0;
  --plum-wash: #2f2240;
  --slate: #b5bad3;
  --slate-wash: #262b45;
  --sky: #9cc0f5;
  --sky-wash: #1c2b45;
  --focus: #e3b341;
  --focus-halo: #121527;
}

/* Text size preference (Settings or the Display menu) */
html { font-size: 106.25%; }
html[data-text-size="large"] { font-size: 118.75%; }
html[data-text-size="larger"] { font-size: 131.25%; }
html[data-text-size="largest"] { font-size: 150%; }

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.005em; }
h1 { font-size: var(--step-3); letter-spacing: -0.015em; }
h2 { font-size: var(--step-1); }
h3 { font-size: var(--step-0); }
p { margin: 0 0 0.85em; }
a { color: var(--indigo); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--indigo-strong); text-decoration-thickness: 2px; }
small, .small { font-size: var(--step--1); }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
code, kbd { font-family: var(--mono); font-size: 0.9em; }
.mono { font-family: var(--mono); font-size: var(--step--1); word-break: break-all; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
  border-radius: 4px;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--surface); color: var(--ink); padding: 0.6rem 1rem;
  border-radius: var(--radius-control); font-weight: 700;
}
.skip-link:focus { top: 0.75rem; }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--ink-2); }
.quiet { color: var(--ink-3); }
.nowrap { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Header: the woven band ---------- */

.demo-banner {
  background: var(--ochre-wash); color: var(--ochre); border-bottom: 1px solid var(--line);
  text-align: center; font-size: var(--step--1); padding: 0.35rem 1rem; font-weight: 600;
}
.site-header {
  background-color: var(--woad);
  /* A 2/1 twill: fine diagonal ribs in two thread colors */
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 7px);
  color: var(--on-woad);
  border-bottom: 3px solid var(--weft);
}
.site-header :focus-visible { outline-color: var(--weft); box-shadow: none; }
.site-header__inner {
  max-width: 84rem; margin: 0 auto; padding: 0.55rem 1rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--on-woad); text-decoration: none; margin-right: auto; }
.brand:hover { color: var(--on-woad); }
.brand__mark { width: 2rem; height: 2rem; flex: none; }
.brand__name { font-size: 1.32rem; font-weight: 750; letter-spacing: -0.02em; }
.brand__domain { font-size: var(--step--1); color: var(--on-woad-2); font-weight: 500; margin-left: 0.15rem; }
.header-link, .header-menu > summary {
  display: inline-flex; align-items: center; gap: 0.4rem; color: var(--on-woad);
  text-decoration: none; padding: 0.45rem 0.65rem; border-radius: var(--radius-control);
  font-weight: 600; font-size: var(--step--1); cursor: pointer; list-style: none;
}
.header-menu > summary::-webkit-details-marker { display: none; }
.header-link:hover, .header-menu > summary:hover, .header-menu[open] > summary { background: rgba(255,255,255,0.1); color: var(--on-woad); }
.header-link .count {
  background: var(--weft); color: #1b1f33; border-radius: 999px; padding: 0 0.45rem;
  font-size: 0.78rem; font-weight: 750; line-height: 1.45;
}
.header-cta { background: var(--weft); color: #1b1f33; }
.header-cta:hover { background: #f0c75e; color: #1b1f33; }
.header-menu { position: relative; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 30; min-width: 15rem;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sheet); padding: 0.5rem; box-shadow: 0 12px 32px rgba(18, 21, 39, 0.24);
}
.menu-panel a, .menu-panel button.menu-item {
  display: flex; width: 100%; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem;
  border-radius: 6px; color: var(--ink); text-decoration: none; font: inherit; font-size: var(--step--1);
  background: none; border: 0; cursor: pointer; text-align: left;
}
.menu-panel a:hover, .menu-panel button.menu-item:hover { background: var(--indigo-wash); color: var(--ink); }
.menu-panel hr { margin: 0.4rem 0; }
.menu-panel .menu-label { font-size: var(--step--1); color: var(--ink-3); padding: 0.35rem 0.65rem 0.15rem; margin: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.15rem 0.5rem 0.4rem; }
.choice-row button {
  font: inherit; font-size: var(--step--1); border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); border-radius: 6px; padding: 0.25rem 0.55rem; cursor: pointer;
}
.choice-row button[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); }
.menu-toggle { display: none; }

/* ---------- Page shell ---------- */

.shell {
  max-width: 84rem; margin: 0 auto; padding: 1.5rem 1rem 3rem;
  display: grid; gap: 1.75rem;
  grid-template-columns: 14rem minmax(0, 1fr) 19.5rem;
  grid-template-areas: "nav main context";
  align-items: start;
}
.shell--wide { grid-template-columns: 14rem minmax(0, 1fr); grid-template-areas: "nav main"; }
.shell > .sidebar { grid-area: nav; }
.shell > main { grid-area: main; min-width: 0; }
.shell > .context { grid-area: context; }

@media (max-width: 75rem) {
  .shell { grid-template-columns: minmax(0, 1fr) 18rem; grid-template-areas: "main context"; }
  .shell--wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
  .shell > .sidebar { display: none; }
  .shell > .sidebar:target, body.nav-open .shell > .sidebar {
    display: block; position: fixed; inset: 0 auto 0 0; width: min(20rem, 88vw); z-index: 40;
    background: var(--surface); overflow-y: auto; padding: 1rem; box-shadow: 0 0 0 100vmax rgba(18,21,39,0.45);
  }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 56rem) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "context"; padding-top: 1rem; }
  .brand__domain { display: none; }
  .site-header__inner { gap: 0.15rem; padding: 0.5rem 0.6rem; }
  .brand { gap: 0.45rem; }
  .brand__name { font-size: 1.12rem; }
  .header-link, .header-menu > summary { padding: 0.45rem 0.5rem; white-space: nowrap; }
  .header-link .label, .header-menu > summary .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .tabs a, .tabs span { white-space: nowrap; }
  .post-row { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.35rem 0.6rem; padding-right: 0.9rem; }
  .post-full { padding: 1.1rem 1rem 1rem; }
  .thread { padding: 0.8rem 0.7rem 0.3rem 0.4rem; }
  .comment { padding-left: 1.45rem; }
  .menu-panel { position: fixed; left: 0.75rem; right: 0.75rem; top: 3.6rem; min-width: 0; }
}

/* ---------- Sidebar ---------- */

.sidebar { position: sticky; top: 1rem; font-size: var(--step--1); }
.sidebar .sidebar__close { display: none; }
body.nav-open .sidebar .sidebar__close, .sidebar:target .sidebar__close { display: inline-flex; margin-bottom: 0.5rem; }
.nav-group { margin-bottom: 1.4rem; }
.nav-group h2 { font-size: var(--step--1); color: var(--ink-3); font-weight: 700; margin: 0 0 0.35rem 0.6rem; }
.nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-group a {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.6rem; border-radius: var(--radius-control);
  color: var(--ink); text-decoration: none; font-weight: 550;
}
.nav-group a:hover { background: var(--surface); }
.nav-group a[aria-current="page"] { background: var(--surface); color: var(--indigo); box-shadow: inset 3px 0 0 var(--indigo); }
.nav-group .icon { color: var(--ink-3); }
.nav-group a[aria-current="page"] .icon { color: var(--indigo); }
.nav-group .badge-count { margin-left: auto; font-size: 0.78rem; color: var(--ink-3); }

/* ---------- Sheets, panels, headings ---------- */

.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sheet); }
.sheet--pad { padding: 1.25rem 1.4rem; }
.sheet + .sheet, .sheet + .stack, .stack + .sheet, main > * + .sheet, main > * + section { margin-top: 1.25rem; }
.page-head { margin-bottom: 1.25rem; }
.page-head h1 { margin-bottom: 0.25rem; }
.page-head p { color: var(--ink-2); margin: 0; max-width: var(--measure); }
.page-head .actions { margin-top: 0.75rem; }
.section-title { font-size: var(--step-1); margin: 1.75rem 0 0.75rem; }
.stack > * + * { margin-top: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.split { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }

.context { display: grid; gap: 1rem; font-size: var(--step--1); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sheet); padding: 1rem 1.1rem; }
.panel h2 { font-size: var(--step-0); margin-bottom: 0.4rem; }
.panel p:last-child, .panel ul:last-child { margin-bottom: 0; }
.panel ul { padding-left: 1.1rem; margin: 0 0 0.75rem; }
.panel li + li { margin-top: 0.25rem; }
.panel--community { border-top: 4px solid var(--indigo); }
.panel .community-name { font-size: var(--step-1); margin-bottom: 0.1rem; }
.panel .stat-line { display: flex; gap: 1rem; color: var(--ink-2); margin: 0.4rem 0 0.75rem; }
.rule-list { list-style: none; padding: 0 !important; counter-reset: none; }
.rule-list li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.25rem; }
.rule-list .code { font-weight: 700; color: var(--ink-2); }
.roster { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }

/* ---------- Buttons and forms ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font: inherit; font-weight: 650; font-size: var(--step--1); line-height: 1.2;
  padding: 0.55rem 0.95rem; border-radius: var(--radius-control);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  text-decoration: none; cursor: pointer;
}
.btn:hover { border-color: var(--indigo); color: var(--indigo); }
.btn--primary { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); }
.btn--primary:hover { background: var(--indigo-strong); border-color: var(--indigo-strong); color: var(--on-indigo); }
.btn--danger { background: var(--madder); border-color: var(--madder); color: #fff; }
:root[data-theme="dark"] .btn--danger { color: #121527; }
.btn--danger:hover { filter: brightness(1.08); color: #fff; }
.btn--quiet { border-color: transparent; background: transparent; color: var(--ink-2); padding: 0.4rem 0.55rem; }
.btn--quiet:hover { background: var(--indigo-wash); color: var(--indigo); border-color: transparent; }
.btn--small { padding: 0.3rem 0.6rem; font-size: 0.82rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.inline-form { display: inline; margin: 0; }

.form { max-width: 44rem; }
.form--wide { max-width: none; }
.field { margin-bottom: 1.1rem; }
.field > label, .field > .label, fieldset > legend { display: block; font-weight: 650; margin-bottom: 0.3rem; }
.field .optional { font-weight: 450; color: var(--ink-3); font-size: var(--step--1); }
.field .help { color: var(--ink-2); font-size: var(--step--1); margin: 0.35rem 0 0; max-width: var(--measure); }
.field .errorlist, .form-errors .errorlist { list-style: none; padding: 0; margin: 0.35rem 0 0; color: var(--madder); font-weight: 600; font-size: var(--step--1); }
.field--error input, .field--error textarea, .field--error select { border-color: var(--madder); }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"],
input[type="search"], input[type="date"], input[type="datetime-local"], textarea, select {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-control); padding: 0.6rem 0.75rem;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
textarea.tall { min-height: 14rem; }
select { appearance: auto; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--focus); }
.check { display: flex; gap: 0.55rem; align-items: flex-start; font-weight: 500; }
.check input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--indigo); flex: none; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-control); padding: 0.9rem 1rem 0.4rem; margin: 0 0 1.1rem; }
.radio-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.radio-list label { display: flex; gap: 0.55rem; align-items: flex-start; font-weight: 500; }
.radio-list input { margin-top: 0.3rem; accent-color: var(--indigo); }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.25rem; }
.form-errors { border-left: 4px solid var(--madder); background: var(--madder-wash); padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1.1rem; }
.form-errors p { margin: 0; color: var(--ink); font-weight: 600; }
.markdown-hint { font-size: var(--step--1); color: var(--ink-3); margin-top: 0.35rem; }

/* ---------- Messages and notices ---------- */

.messages { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 0.5rem; }
.message { padding: 0.7rem 1rem; border-radius: var(--radius-control); border: 1px solid var(--line); background: var(--surface); }
.message--success { border-left: 4px solid var(--moss); }
.message--error { border-left: 4px solid var(--madder); background: var(--madder-wash); }
.message--info, .message--warning { border-left: 4px solid var(--ochre); }
.callout { border-radius: var(--radius-control); padding: 0.85rem 1rem; background: var(--surface-2); border: 1px solid var(--line); }
.callout--indigo { background: var(--indigo-wash); border-color: transparent; }
.callout--ochre { background: var(--ochre-wash); border-color: transparent; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- Feed ---------- */

.feed-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.feed-head h1 { margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.2rem; border-bottom: 1px solid var(--line-strong); margin-bottom: 0.9rem; }
.tabs a, .tabs span {
  padding: 0.5rem 0.85rem; text-decoration: none; color: var(--ink-2); font-weight: 650; font-size: var(--step--1);
  border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 0.35rem; align-items: center;
}
.tabs a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.tabs a[aria-current="page"] { color: var(--indigo); border-bottom-color: var(--indigo); }
.tabs .tab-off { color: var(--ink-3); cursor: help; }
.tabs .tab-off .icon { width: 0.95em; height: 0.95em; }
.ranking-note { font-size: var(--step--1); color: var(--ink-2); margin: -0.25rem 0 0.9rem; display: flex; gap: 0.5rem; align-items: flex-start; max-width: var(--measure); }
.ranking-note .icon { margin-top: 0.15rem; color: var(--ink-3); }

.feed { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sheet); }
.feed > li + li { border-top: 1px solid var(--line); }
.post-row { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.35rem 0.9rem; padding: 1rem 1.15rem 0.9rem 0.75rem; }
.useful-rail { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding-top: 0.15rem; }
.useful-rail .count { font-weight: 750; font-size: var(--step--1); color: var(--ink-2); }
.useful-toggle {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; border: 1px solid transparent;
  background: none; color: var(--ink-3); cursor: pointer; padding: 0.3rem 0.35rem; border-radius: var(--radius-control); font: inherit;
}
.useful-toggle:hover { color: var(--indigo); background: var(--indigo-wash); }
.useful-toggle[aria-pressed="true"] { color: var(--indigo); }
.useful-toggle[aria-pressed="true"] .icon { fill: var(--indigo-wash); }
.post-meta { display: flex; flex-wrap: wrap; gap: 0.15rem 0.85rem; font-size: var(--step--1); color: var(--ink-3); margin-bottom: 0.2rem; }
.post-meta .community-link { font-weight: 700; color: var(--ink); text-decoration: none; }
.post-meta .community-link:hover { color: var(--indigo); text-decoration: underline; }
.post-meta a { color: var(--ink-2); }
.post-title { font-size: var(--step-1); font-weight: 700; margin: 0 0 0.25rem; line-height: 1.3; letter-spacing: -0.008em; }
.post-title a { color: var(--ink); text-decoration: none; }
.post-title a:hover { color: var(--indigo); text-decoration: underline; }
.post-title a:visited { color: var(--ink-2); }
.post-excerpt { color: var(--ink-2); margin: 0 0 0.45rem; max-width: var(--measure); }
.post-foot { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: var(--step--1); color: var(--ink-3); align-items: center; }
.post-foot a { color: var(--ink-2); text-decoration: none; display: inline-flex; gap: 0.35rem; align-items: center; font-weight: 600; }
.post-foot a:hover { color: var(--indigo); }
.empty { padding: 2rem 1.5rem; text-align: left; }
.empty h2 { margin-bottom: 0.35rem; }
.empty p { color: var(--ink-2); max-width: var(--measure); }

.pagination { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; margin-top: 1rem; font-size: var(--step--1); }

/* ---------- Post page ---------- */

.post-full { padding: 1.4rem 1.5rem 1.1rem; }
.post-full .post-title { font-size: var(--step-3); line-height: 1.2; margin: 0.15rem 0 0.75rem; }
.prose { max-width: var(--measure); overflow-wrap: anywhere; }
.prose > :last-child { margin-bottom: 0; }
.prose h3, .prose h4, .prose h5, .prose h6 { margin-top: 1.2em; }
.prose blockquote { margin: 0 0 1em; padding: 0.2rem 0 0.2rem 1rem; border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.prose pre { background: var(--surface-2); padding: 0.75rem 1rem; border-radius: var(--radius-control); overflow-x: auto; }
.prose ul, .prose ol { padding-left: 1.35rem; margin: 0 0 0.9em; }
.prose li + li { margin-top: 0.2em; }
.prose table { border-collapse: collapse; margin: 0 0 1em; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 0.35rem 0.6rem; text-align: left; }
.edited-mark { font-size: var(--step--1); color: var(--ink-3); }
.action-row { display: flex; flex-wrap: wrap; gap: 0.25rem 0.35rem; align-items: center; margin-top: 0.9rem; font-size: var(--step--1); }
.action-row form { margin: 0; }
.reaction-group { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-control); overflow: hidden; }
.reaction-group .btn--quiet { border-radius: 0; }
.reaction-group .btn--quiet + .btn--quiet, .reaction-group form + form .btn--quiet { border-left: 1px solid var(--line); }
.react[aria-pressed="true"] { color: var(--indigo); background: var(--indigo-wash); }
.react .n { font-weight: 750; }
.reaction-note { font-size: 0.78rem; color: var(--ink-3); margin-left: 0.25rem; }

/* Removed / moderation notice (madder rule = conduct moderation) */
.removal {
  border-left: 4px solid var(--madder); background: var(--madder-wash); border-radius: 0 var(--radius-control) var(--radius-control) 0;
  padding: 0.7rem 0.95rem; font-size: var(--step--1); color: var(--ink);
}
.removal strong { color: var(--ink); }
.removal p { margin: 0.25rem 0 0; }
.removal .removal-meta { color: var(--ink-2); }
.author-view { border: 1px dashed var(--line-strong); border-radius: var(--radius-control); padding: 0.75rem 1rem; margin-top: 0.75rem; }
.author-view > .label { font-size: var(--step--1); color: var(--ink-3); margin-bottom: 0.4rem; }

/* ---------- Evidence notes (claim-level) ---------- */

.claims { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: 0.9rem; }
.claims > h2 { font-size: var(--step--1); color: var(--ink-2); font-weight: 700; margin-bottom: 0.6rem; }
.claim-note { border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.claim-note + .claim-note { margin-top: 0.5rem; }
.claim-note > summary { list-style: none; cursor: pointer; padding: 0.6rem 0.8rem; display: grid; gap: 0.35rem; }
.claim-note > summary::-webkit-details-marker { display: none; }
.claim-note > summary .summary-line { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; }
.claim-note > summary .expand-hint { margin-left: auto; font-size: 0.8rem; color: var(--ink-3); display: inline-flex; gap: 0.3rem; align-items: center; }
.claim-note[open] > summary .expand-hint .icon { transform: rotate(180deg); }
.claim-note[open] > summary { border-bottom: 1px solid var(--line); }
.claim-quote { font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.claim-quote q { quotes: "“" "”"; }
.claim-body { padding: 0.8rem 0.9rem 0.9rem; font-size: var(--step--1); display: grid; gap: 0.85rem; }
.claim-body h3 { font-size: var(--step--1); margin: 0 0 0.3rem; color: var(--ink-2); }
.claim-body .prose { font-size: var(--step--1); }
.scope-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.9rem; margin: 0; }
.scope-grid dt { color: var(--ink-3); font-weight: 600; }
.scope-grid dd { margin: 0; }
.citations { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.citation { display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.15rem 0.75rem; padding: 0.55rem 0.65rem; background: var(--surface-2); border-radius: 6px; }
.citation .relation { font-weight: 700; }
.citation .relation--supports { color: var(--moss); }
.citation .relation--contradicts { color: var(--madder); }
.citation .relation--context { color: var(--ink-2); }
.citation blockquote { margin: 0.25rem 0 0; padding-left: 0.7rem; border-left: 2px solid var(--line-strong); color: var(--ink-2); }
.verification { display: inline-flex; gap: 0.3rem; align-items: center; font-weight: 600; }
.verification--verified { color: var(--moss); }
.verification--unavailable, .verification--not_checked { color: var(--ochre); }
.verification--does_not_support { color: var(--madder); }
.provenance { color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 0.65rem; }
.claim-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.earlier-notes { margin-top: 0.9rem; }
.earlier-notes .callout { font-size: var(--step--1); }

.badge {
  display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: 0.18rem 0.65rem 0.18rem 0.5rem;
  font-size: 0.82rem; font-weight: 700; line-height: 1.35; border: 1px solid transparent; white-space: nowrap;
}
.badge .icon { width: 1em; height: 1em; stroke-width: 2.2; }
.badge--supported { color: var(--moss); background: var(--moss-wash); }
.badge--contradicted { color: var(--madder); background: var(--madder-wash); }
.badge--insufficient { color: var(--slate); background: var(--slate-wash); }
.badge--mixed { color: var(--ochre); background: var(--ochre-wash); }
.badge--opinion { color: var(--plum); background: var(--plum-wash); }
.badge--prediction { color: var(--sky); background: var(--sky-wash); }
.badge--state { color: var(--ink-2); background: var(--surface-2); border-color: var(--line); font-weight: 600; }
.badge--challenged { color: var(--ochre); background: var(--ochre-wash); }
.badge--removed { color: var(--madder); background: var(--madder-wash); }
.badge--neutral { color: var(--ink-2); background: var(--surface-2); border-color: var(--line); }
.badge--in-force { color: var(--madder); background: var(--madder-wash); }
.badge--pending { color: var(--ochre); background: var(--ochre-wash); }
.badge--reversed, .badge--ended { color: var(--moss); background: var(--moss-wash); }
.post-foot .badge { font-size: 0.78rem; }

/* ---------- Comments: warp threads ---------- */

.comments { margin-top: 1.25rem; }
.comments-head { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.comments-head h2 { margin: 0; }
.comment-form { margin-bottom: 1rem; }
.comment-form textarea { min-height: 6rem; }
.thread, .thread ol { list-style: none; margin: 0; padding: 0; }
.thread { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sheet); padding: 0.9rem 1.1rem 0.4rem 0.7rem; }
.comment { position: relative; padding-left: 1.6rem; }
.comment > .comment-inner { padding-bottom: 0.85rem; }
.comment > .thread-line {
  position: absolute; left: 0.62rem; top: 2rem; bottom: 0.5rem; width: 2px; background: var(--line);
  border-radius: 1px;
}
.comment:hover > .thread-line { background: var(--line-strong); }
.collapse-toggle {
  position: absolute; left: 0; top: 0.05rem; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.collapse-toggle:hover { border-color: var(--indigo); color: var(--indigo); }
.collapse-toggle .icon { width: 0.85rem; height: 0.85rem; stroke-width: 2.4; }
.comment-meta { display: flex; flex-wrap: wrap; gap: 0.1rem 0.75rem; font-size: var(--step--1); color: var(--ink-3); align-items: baseline; }
.comment-meta .user-link { font-weight: 700; color: var(--ink); text-decoration: none; }
.comment-meta .user-link:hover { color: var(--indigo); text-decoration: underline; }
.comment-meta a.quiet, .post-meta a:not(.community-link) { text-decoration: none; }
.comment-meta a.quiet:hover, .post-meta a:not(.community-link):hover { text-decoration: underline; }
.comment-meta .op { font-size: 0.75rem; font-weight: 700; color: var(--indigo); background: var(--indigo-wash); border-radius: 4px; padding: 0 0.3rem; }
.comment-body { margin-top: 0.2rem; }
.comment .action-row { margin-top: 0.35rem; }
.comment.is-collapsed > .comment-inner > .comment-content, .comment.is-collapsed > ol { display: none; }
.comment.is-collapsed > .thread-line { display: none; }
.collapsed-summary { display: none; font-size: var(--step--1); color: var(--ink-3); }
.comment.is-collapsed .collapsed-summary { display: inline; }
.reply-box { display: flex; flex-direction: column; }
.reply-box[open] { flex-basis: 100%; }
.reply-box > summary { display: inline-flex; list-style: none; align-self: flex-start; }
.reply-box > summary::-webkit-details-marker { display: none; }
.reply-box form { margin-top: 0.5rem; max-width: 40rem; }
.continue-thread { font-size: var(--step--1); font-weight: 650; display: inline-block; margin: 0 0 0.75rem; }
.blocked-note { font-size: var(--step--1); color: var(--ink-3); font-style: italic; }
.parent-context { font-size: var(--step--1); color: var(--ink-2); background: var(--surface-2); border-radius: var(--radius-control); padding: 0.6rem 0.8rem; margin-bottom: 0.9rem; }

/* ---------- Records: tables, timelines, ledger ---------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.table th, .table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--ink-2); font-weight: 700; background: var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline > li { position: relative; padding: 0 0 1.1rem 1.6rem; }
.timeline > li::before { content: ""; position: absolute; left: 0.37rem; top: 0.45rem; bottom: -0.2rem; width: 2px; background: var(--line); }
.timeline > li:last-child::before { display: none; }
.timeline > li::after { content: ""; position: absolute; left: 0; top: 0.3rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--indigo); }
.timeline .when { font-size: var(--step--1); color: var(--ink-3); }
.timeline h2, .timeline h3 { margin: 0.1rem 0 0.3rem; font-size: var(--step-0); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.1rem; margin: 0; }
.kv dt { color: var(--ink-3); font-weight: 650; }
.kv dd { margin: 0; min-width: 0; }
.ledger-list { list-style: none; margin: 0; padding: 0; }
.ledger-entry { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.2rem 0.9rem; padding: 0.85rem 1.1rem; }
.ledger-entry + .ledger-entry { border-top: 1px solid var(--line); }
.ledger-entry .seq { font-family: var(--mono); color: var(--ink-3); font-size: var(--step--1); padding-top: 0.15rem; }
.ledger-entry .summary { font-weight: 600; margin: 0; }
.ledger-entry .meta { font-size: var(--step--1); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 0.2rem 0.85rem; }
.hash-link { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-3); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sheet); padding: 0.9rem 1rem; }
.stat-grid + .sheet { margin-top: 0.75rem; }
.stat .value { font-size: var(--step-3); font-weight: 750; line-height: 1.1; letter-spacing: -0.02em; }
.stat .label { color: var(--ink-2); font-size: var(--step--1); }
.bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: var(--step--1); }
.bar-list li { display: grid; grid-template-columns: 12rem 1fr 2.5rem; gap: 0.75rem; align-items: center; }
.bar { height: 0.6rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--indigo); border-radius: 999px; }
.bar-list .n { text-align: right; font-weight: 700; }
.verify-ok { border-left: 4px solid var(--moss); }
.verify-bad { border-left: 4px solid var(--madder); }

/* Appeal steps are a real sequence, so they are numbered */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 1.7rem 1fr; gap: 0.6rem; align-items: start; color: var(--ink-3); }
.steps li::before {
  content: counter(step); width: 1.55rem; height: 1.55rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--line-strong); font-weight: 700; font-size: 0.8rem; color: var(--ink-3);
}
.steps li.done { color: var(--ink-2); }
.steps li.done::before { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); }
.steps li.current { color: var(--ink); font-weight: 650; }
.steps li.current::before { border-color: var(--indigo); color: var(--indigo); }

/* ---------- Profile ---------- */

.profile-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.avatar {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 750; font-size: var(--step-1); color: var(--on-indigo); background: var(--indigo);
}
.role-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--step--1); }
.site-footer__inner { max-width: 84rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.site-footer a { color: var(--ink-2); }

/* ---------- Diff ---------- */

.diff { font-family: var(--mono); font-size: 0.82rem; background: var(--surface-2); border-radius: var(--radius-control); padding: 0.75rem 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff ins, .diff-legend ins { background: var(--moss-wash); color: var(--moss); text-decoration: none; padding: 0 0.15em; border-radius: 3px; }
.diff del, .diff-legend del { background: var(--madder-wash); color: var(--madder); padding: 0 0.15em; border-radius: 3px; }

/* JS-enhanced conditional form sections */
.js [data-show-when][hidden] { display: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Bar widths in 5% steps (no inline styles under the CSP) */
.bar > span[class^="bar-"] { display: block; height: 100%; background: var(--indigo); border-radius: 999px; }
.bar > .bar-5 { width: 5%; }
.bar > .bar-10 { width: 10%; }
.bar > .bar-15 { width: 15%; }
.bar > .bar-20 { width: 20%; }
.bar > .bar-25 { width: 25%; }
.bar > .bar-30 { width: 30%; }
.bar > .bar-35 { width: 35%; }
.bar > .bar-40 { width: 40%; }
.bar > .bar-45 { width: 45%; }
.bar > .bar-50 { width: 50%; }
.bar > .bar-55 { width: 55%; }
.bar > .bar-60 { width: 60%; }
.bar > .bar-65 { width: 65%; }
.bar > .bar-70 { width: 70%; }
.bar > .bar-75 { width: 75%; }
.bar > .bar-80 { width: 80%; }
.bar > .bar-85 { width: 85%; }
.bar > .bar-90 { width: 90%; }
.bar > .bar-95 { width: 95%; }
.bar > .bar-100 { width: 100%; }