/* Day One Great — "first light": pre-dawn ink, one amber horizon. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* Fallbacks sized to match the fonts above, so text doesn't jump when they arrive on a slow phone (SF1, layout
   shift; PERFORMANCE.md). Numbers from the font files, against Arial and Times New Roman (or their metric twins),
   at regular and bold. Each covers only the characters the font files have, so any other character still comes
   from the next font in the list, as before. */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  font-style: normal;
  font-weight: 100 549;
  size-adjust: 95.04%;
  ascent-override: 97.85%;
  descent-override: 28.41%;
  line-gap-override: 0%;
  unicode-range: U+20-7E, U+A0-A3, U+A5-AC, U+AE-FF, U+102, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  font-style: normal;
  font-weight: 550 900;
  size-adjust: 91.66%;
  ascent-override: 101.47%;
  descent-override: 29.46%;
  line-gap-override: 0%;
  unicode-range: U+20-7E, U+A0-A3, U+A5-AC, U+AE-FF, U+102, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Source Serif Fallback";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("LiberationSerif");
  font-style: normal;
  font-weight: 100 549;
  size-adjust: 110.93%;
  ascent-override: 93.39%;
  descent-override: 30.2%;
  line-gap-override: 0%;
  unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Source Serif Fallback";
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("LiberationSerif-Bold");
  font-style: normal;
  font-weight: 550 900;
  size-adjust: 107.64%;
  ascent-override: 96.25%;
  descent-override: 31.12%;
  line-gap-override: 0%;
  unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Source Serif Fallback";
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("LiberationSerif-Italic");
  font-style: italic;
  font-weight: 100 549;
  size-adjust: 102.83%;
  ascent-override: 100.75%;
  descent-override: 32.58%;
  line-gap-override: 0%;
  unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Source Serif Fallback";
  src: local("Times New Roman Bold Italic"), local("TimesNewRomanPS-BoldItalicMT"), local("Liberation Serif Bold Italic"), local("LiberationSerif-BoldItalic");
  font-style: italic;
  font-weight: 550 900;
  size-adjust: 107.88%;
  ascent-override: 96.03%;
  descent-override: 31.05%;
  line-gap-override: 0%;
  unicode-range: U+20-7E, U+A0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+300-301, U+303-304, U+308-309, U+323, U+329, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  --ink: #0d0f14;
  --text: #ece7dd;
  --muted: #9a9ba5;
  --rule: #23262e;
  --amber: #f2a33a;
  --glow: rgba(242, 163, 58, 0.18);
  --display: "Bricolage Grotesque", "Bricolage Fallback", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Serif 4", "Source Serif Fallback", Georgia, "Times New Roman", serif;
  --measure: 38rem;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --ink: #f6f7f9;
    --text: #15171c;
    --muted: #5b5e68;
    --rule: #dcdee4;
    --amber: #a65e00;
    --glow: rgba(242, 163, 58, 0.22);
    color-scheme: light;
  }
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.65;
  font-optical-sizing: auto;
}

a {
  color: var(--text);
  text-decoration-color: var(--amber);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--amber); }
a:focus-visible, .button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Header */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.tm {
  font-size: 0.55em;
  font-weight: 500;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.08em;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-family: var(--display); font-size: 0.95rem; }
.site-nav a { text-decoration: none; color: var(--muted); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--amber); }

/* Hero: the horizon */
.hero {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 4rem;
  isolation: isolate;
}
.hero::before {
  /* the first light rising behind the headline */
  content: "";
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  bottom: 0;
  height: 70%;
  /* centred and sized to fade out fully inside its box: no hard edges */
  background: radial-gradient(ellipse 46% 96% at 50% 100%, var(--glow), transparent 100%);
  animation: dawn 2.4s ease-out both;
}
.hero::after {
  /* the horizon line */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--amber), transparent 85%);
}
@keyframes dawn {
  from { opacity: 0; transform: translateY(12%); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
}
.hero h1 {
  font-size: clamp(3rem, 11vw, 6.25rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.lede {
  max-width: var(--measure);
  margin: 1.75rem 0 0;
  font-size: 1.3rem;
  line-height: 1.55;
}
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.button {
  display: inline-block;
  padding: 0.7rem 1.15rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.button.primary { background: var(--amber); border-color: var(--amber); color: #15110a; }
.button.primary:hover { filter: brightness(1.08); color: #15110a; }
.button:not(.primary):hover { border-color: var(--amber); color: var(--text); }
@media (prefers-color-scheme: light) {
  .button.primary, .button.primary:hover { color: #ffffff; }
}

/* Sections */
section { padding: 3.5rem 0 0.5rem; }
section h2 { font-size: clamp(1.6rem, 4.5vw, 2.1rem); margin-bottom: 1.25rem; }
section p { max-width: var(--measure); margin: 0 0 1rem; }

.principles { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.principles li { padding: 1rem 0; border-top: 1px solid var(--rule); }
.principles li:last-child { border-bottom: 1px solid var(--rule); }
.principles strong {
  display: block;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.15rem;
}
.principles span { color: var(--muted); }

.log { list-style: none; margin: 0; padding: 0; max-width: var(--measure); counter-reset: step; }
.log li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  padding: 0.55rem 0;
}
.log li::before {
  content: counter(step);
  font-family: var(--display);
  font-weight: 700;
  color: var(--amber);
  padding-top: 0.05rem;
}

.nownext { display: grid; gap: 0.5rem 2.5rem; max-width: calc(var(--measure) * 1.6); }
.nownext h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber); margin: 0 0 0.25rem; }
.nownext a { color: var(--text); font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; text-decoration-color: var(--amber); text-underline-offset: 0.25em; }
.nownext a:hover { color: var(--amber); }
.nownext span { display: block; font-size: 0.92rem; margin-top: 0.2rem; }
@media (min-width: 48rem) { .nownext { grid-template-columns: 1fr 1fr; } }

.people { display: grid; gap: 1.5rem; max-width: var(--measure); }
.people h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
.people p { margin: 0.25rem 0 0; color: var(--muted); }

/* Story pages */
.story { padding-top: 3.5rem; padding-bottom: 1rem; }
.story h1 { font-size: clamp(2.4rem, 8vw, 4rem); letter-spacing: -0.04em; max-width: 14ch; }
.story .dek { color: var(--muted); font-size: 1.2rem; margin: 1rem 0 2.5rem; max-width: var(--measure); }
.story h2 { font-size: 1.6rem; margin: 2.75rem 0 1rem; }
.story p, .story ul { max-width: var(--measure); }
.story ul { padding-left: 1.2rem; }
.story li { margin-bottom: 0.5rem; }
.story blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 2px solid var(--amber);
  font-style: italic;
  max-width: var(--measure);
}
.story .voice { font-family: var(--display); font-weight: 600; font-style: normal; }

/* Conversation page */
.post {
  max-width: calc(var(--measure) + 3rem);
  margin: 0 0 1rem;
  padding: 1.5rem 1.5rem 0.5rem;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--amber);
  border-radius: 10px;
}
.post h2 { margin-top: 0.25rem; font-size: 1.45rem; }
.post-meta, .story .fine { color: var(--muted); font-size: 0.95rem; }
.post-meta { font-family: var(--display); margin: 0; }
.post .signoff { font-style: italic; }
.talk-replies { max-width: calc(var(--measure) + 3rem); margin-top: 1.5rem; min-height: 12rem; }
@media (max-width: 560px) { .post { padding: 1.25rem 1rem 0.25rem; } }

/* Footer */
.site-footer {
  margin-top: 5rem;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.95rem;
}
.site-footer p { margin: 0 0 0.5rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--amber); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 0.75rem; }

@media (max-width: 34rem) {
  body { font-size: 1.0625rem; }
  .site-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .hero { padding-top: 3rem; padding-bottom: 3rem; }
  .lede { font-size: 1.15rem; }
}
.site-footer .contact { line-height: 1.7; }

.snippet { max-width: var(--measure); margin: 0.5rem 0 1.25rem; padding: 0.85rem 1rem; border: 1px solid var(--rule); border-radius: 8px; overflow-x: auto; line-height: 1.45; }
.snippet code { white-space: pre-wrap; overflow-wrap: anywhere; }
.story ul.tools { list-style: none; padding-left: 0; }
.tools li { padding: 0.55rem 0; border-top: 1px solid var(--rule); margin: 0; }
.tools li:last-child { border-bottom: 1px solid var(--rule); }
.tools code { display: inline-block; margin-right: 0.5rem; color: var(--amber); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; overflow-wrap: anywhere; color: var(--text); }

/* Proposals page */
.story ol.steps { max-width: var(--measure); padding-left: 1.4rem; }
.story ol.steps li { margin-bottom: 0.4rem; }
.proposal-list { display: flex; flex-direction: column; gap: 1rem; max-width: calc(var(--measure) + 3rem); margin-top: 1rem; }
.proposal { border: 1px solid var(--rule); border-radius: 10px; padding: 1.1rem 1.25rem 0.4rem; }
.proposal h3 { margin: 0.35rem 0 0.4rem; font-size: 1.25rem; overflow-wrap: anywhere; }
.proposal .post-meta { line-height: 1.9; }
.proposal .post-meta .status { margin-right: 0.15rem; }
.proposal-text { white-space: pre-line; overflow-wrap: anywhere; }
.status { display: inline-block; padding: 0.05rem 0.6rem; border-radius: 999px; border: 1px solid var(--rule); font-family: var(--display); font-size: 0.82rem; color: var(--text); }
.status-approved, .status-in-review { border-color: var(--amber); }
.status-shipped { background: var(--amber); border-color: var(--amber); color: #15110a; }
.status-declined, .status-closed { color: var(--muted); }
.flag { font-family: var(--display); font-size: 0.92rem; color: var(--amber); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .status-shipped { color: #ffffff; } }

/* Research: working papers */
.kicker { font-family: var(--display); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin: 0 0 1rem; }
.kicker a { color: var(--amber); text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.story h1.paper-title { max-width: 20ch; }
.paper-subtitle { font-family: var(--display); font-size: 1.25rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--text); margin: 1rem 0 0; max-width: 34rem; }
.byline, .review-status { color: var(--muted); font-size: 0.95rem; margin: 0.75rem 0 0; max-width: var(--measure); }
.review-status { padding: 0.6rem 0.9rem; border: 1px solid var(--rule); border-left: 2px solid var(--amber); border-radius: 6px; margin-top: 1.25rem; }
.toc { margin: 2.5rem 0 1rem; padding: 1rem 1.25rem; border: 1px solid var(--rule); border-radius: 10px; max-width: var(--measure); }
.story .toc h2.toc-title { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber); margin: 0 0 0.5rem; }
.toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; font-family: var(--display); font-size: 0.95rem; }
.toc li { margin: 0 0 0.35rem; break-inside: avoid; }
.toc a { text-decoration: none; color: var(--text); }
.toc a:hover { color: var(--amber); }
@media (max-width: 34rem) { .toc ol { columns: 1; } }
.paper ol, .paper ul { max-width: var(--measure); padding-left: 1.4rem; }
.paper h2 { scroll-margin-top: 1rem; }
.math-block { max-width: 100%; overflow-x: auto; margin: 1rem 0 1.25rem; padding: 0.25rem 0; }
.math-block math { font-size: 1.15em; }
.figure { margin: 2rem 0 2.25rem; }
.fig-scroll { max-width: 100%; overflow-x: auto; }
.fig-scroll:focus-visible, .math-block:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.figure svg.fig { display: block; width: 100%; min-width: 40rem; height: auto; font-family: var(--display); }
.figure figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 0.5rem; }
.table-wrap { max-width: 100%; overflow-x: auto; margin: 1rem 0 1.5rem; }
.table-wrap:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.paper table { border-collapse: collapse; font-size: 0.9rem; line-height: 1.45; min-width: 36rem; }
.paper th, .paper td { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--rule); }
.paper th { font-family: var(--display); font-weight: 600; color: var(--muted); border-bottom-color: var(--amber); }
.cite { padding: 0.85rem 1rem; border: 1px solid var(--rule); border-radius: 8px; font-size: 0.95rem; }
.paper-list { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: calc(var(--measure) + 3rem); }
.paper-list li { border: 1px solid var(--rule); border-top: 2px solid var(--amber); border-radius: 10px; padding: 1.25rem 1.5rem 0.75rem; }
.paper-list h3 { font-size: 1.4rem; margin: 0.35rem 0 0.5rem; }
.paper-list h3 a { text-decoration: none; }
.paper-list h3 a:hover { color: var(--amber); }
.paper-list .post-meta { font-size: 0.9rem; }

/* Figures: drawn as inline SVG, coloured from the theme */
.fig .fig-text { fill: var(--text); }
.fig .fig-quiet { fill: var(--muted); }
.fig .fig-grid { stroke: var(--rule); stroke-width: 1; }
.fig .fig-zero { stroke: var(--muted); stroke-width: 1.25; }
.fig .fig-ref { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; }
.fig .fig-line path { fill: none; stroke: var(--muted); stroke-width: 1.25; }
.fig .fig-axis-fill { fill: var(--muted); }
.fig .fig-box { fill: none; stroke: var(--muted); stroke-width: 1.25; }
.fig .fig-box-accent { fill: var(--glow); stroke: var(--amber); stroke-width: 2; }
.fig .fig-band { fill: var(--glow); stroke: var(--rule); stroke-width: 1; }
.fig .fig-accent { fill: var(--amber); }
.fig .fig-accent-soft { fill: var(--amber); fill-opacity: 0.4; }
.fig .fig-mute { fill: var(--muted); fill-opacity: 0.75; }
.fig .fig-mute-soft { fill: var(--muted); fill-opacity: 0.3; }
.fig .fig-accent-range { stroke: var(--amber); stroke-opacity: 0.85; stroke-width: 6; }
.fig .fig-mute-range { stroke: var(--muted); stroke-opacity: 0.7; stroke-width: 6; }
.fig .fig-accent-line { fill: none; stroke: var(--amber); stroke-width: 2.25; }
.fig .fig-mute-line { fill: none; stroke: var(--muted); stroke-width: 2.25; }
.fig .fig-whisker { stroke: var(--text); stroke-width: 1.25; }
.fig .fig-whisker-quiet { stroke: var(--muted); stroke-width: 1; }

/* Sign-in (/join and /auth/email/continue) */
.signin .notice { border-left: 3px solid var(--amber); padding: 0.6rem 0.9rem; background: var(--glow); }
.email-signin { display: grid; gap: 0.6rem; max-width: 24rem; margin-top: 2rem; }
/* The bot-check field: off screen, out of the tab order and hidden from screen readers, so no person meets it. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.email-signin label { font-family: var(--display); font-weight: 600; }
.email-signin input {
  font: inherit; color: var(--text); background: transparent;
  border: 1px solid var(--rule); border-radius: 0.6rem; padding: 0.65rem 0.8rem;
}
.email-signin input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.signin button.button { cursor: pointer; background: transparent; color: var(--text); justify-self: start; }

/* Posts (/feed) */
.lanes { display: flex; gap: 0.5rem; margin: 1.5rem 0; }
.lanes [role="tab"] { font: inherit; font-family: var(--display); font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 0.45rem 1rem; cursor: pointer; }
.lanes [role="tab"][aria-selected="true"] { color: var(--text); border-color: var(--amber); }
.lanes [role="tab"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.compose { display: grid; gap: 0.6rem; margin-bottom: 2rem; }
.compose label { font-family: var(--display); font-weight: 600; }
.compose textarea { font: inherit; color: var(--text); background: transparent; border: 1px solid var(--rule); border-radius: 0.6rem; padding: 0.7rem 0.8rem; resize: vertical; }
.compose textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.compose-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.compose button.button { cursor: pointer; }
.feed .post { border-top: 1px solid var(--rule); padding: 1rem 0; overflow-wrap: anywhere; }
.feed .post p { margin: 0.4rem 0; white-space: pre-line; }

/* Reports (/feed) and the review queue (/review): big targets for thumbs (SF5) */
.feed button.button { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 1rem; }
.feed button.button:not(.primary) { background: transparent; }
.feed button.button:not(.primary):not(.danger) { color: var(--text); }
.feed button.button:disabled { opacity: 0.6; cursor: default; }
.report-link { font: inherit; font-size: 0.9rem; color: var(--muted); background: none; border: 0; padding: 0.25rem 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); }
.report-link:hover { color: var(--amber); }
.report-form { display: grid; gap: 0.5rem; margin: 0.5rem 0 0.25rem; max-width: 30rem; }
.report-form select, .report-form input { font: inherit; color: var(--text); background: var(--ink); border: 1px solid var(--rule); border-radius: 0.6rem; padding: 0.55rem 0.7rem; }
.report-form select:focus-visible, .report-form input:focus-visible, .report-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 0.75rem 0 0.25rem; }
.review-actions .button { min-height: 3rem; justify-content: center; text-align: center; }
.feed .button.danger { border-color: #c2413b; color: #f1857f; }
.feed .button.danger:hover { border-color: #e0574f; color: #ffb0ab; }
@media (prefers-color-scheme: light) { .feed .button.danger { color: #a3302a; } .feed .button.danger:hover { color: #7d211c; } }
.review-item.decided > :not(.fine):not(.button) { opacity: 0.55; }
.review .note { font-style: italic; }

/* Agents (/agents) */
.agents input { font: inherit; color: var(--text); background: var(--ink); border: 1px solid var(--rule); border-radius: 0.6rem; padding: 0.6rem 0.75rem; }
.agents input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.agents h2 { font-size: 1.3rem; margin: 1.5rem 0 0.5rem; }
.key-once code { display: block; padding: 0.75rem; border: 1px solid var(--amber); border-radius: 0.6rem; overflow-wrap: anywhere; user-select: all; }
.agent-of { color: var(--muted); }
.claim-agent { font-size: 1.1rem; }

/* Owner controls (/controls, PR 6): the numbers in a grid, the brake form one field per row on a phone */
.controls #totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.controls .stat { margin: 0; padding: 0.75rem; border: 1px solid var(--rule); border-radius: 6px; }
.controls .stat strong { display: block; font-size: 1.5rem; }
.brake-form { display: grid; gap: 0.6rem; max-width: var(--measure); }
.brake-form label { display: grid; gap: 0.25rem; }
.brake-form input, .brake-form select { min-height: 2.75rem; font: inherit; color: var(--text); background: var(--ink); border: 1px solid var(--rule); border-radius: 0.6rem; padding: 0.55rem 0.7rem; }
.brake-form input:focus-visible, .brake-form select:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Your account (/account, PR 8) */
.account-form { display: grid; gap: 0.6rem; max-width: 30rem; }
.account-form label { display: grid; gap: 0.25rem; }
.account-form input { min-height: 2.75rem; font: inherit; color: var(--text); background: var(--ink); border: 1px solid var(--rule); border-radius: 0.6rem; padding: 0.55rem 0.7rem; }
.account-form input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.inline-form { display: inline; }

/* Agents acting for their owners (PR 7): the inbox, rules and receipts */
.feed .post p.draft-body { white-space: pre-wrap; border-left: 2px solid var(--amber); padding-left: 0.75rem; }
/* One tap on a notice (PR 13): the exact words being answered, kept as written (what is shown is what is hashed). */
.inbox .draft-words { white-space: pre-wrap; font-style: normal; border-left: 2px solid var(--amber); padding: 0.1rem 0 0.1rem 0.75rem; margin: 0.5rem 0; }
.inbox .one-tap { margin: 0.5rem 0; }
.rules-form { display: grid; gap: 0.5rem; max-width: 30rem; margin: 0.75rem 0; }
.rules-form label { display: grid; gap: 0.25rem; }
.rules-form select, .rules-form input { min-height: 2.75rem; font: inherit; color: var(--text); background: var(--ink); border: 1px solid var(--rule); border-radius: 0.6rem; padding: 0.55rem 0.7rem; }
.delegation { margin: 0.25rem 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }