/* Concept: a redacted personnel file, set like a phone OS from 2012. Three voices, each with one job:
   - the interface (navigation, buttons, labels) speaks in the system face: Segoe UI on Windows, SF on Apple,
     Roboto on Android. Zero bytes, and on Windows it is literally the Metro typeface.
   - the person's own words are set in Newsreader, a reading serif.
   - the company's record gets one typewritten stamp (Courier Prime), and only that.
   Fonts are served by this site, never a font CDN, which would see every visitor's IP address.

   References, and what was taken from each:
   - Windows Phone 8 (Metro): one surface per theme, true #000 in dark, white type, a single accent, no borders,
     shadows or gradients, big lowercase pivot headers as navigation.
   - A24 (a24.raviklaassens.com): monochrome restraint; the record sheet of tiny tracked labels on the left,
     values on the right, hairline rules between.
   - Later, "Made You Look": oversized display type and one loud colour against quiet body copy.
   - HyperFrames: motion as a short deterministic timeline with one purpose (here: showing where a view came
     from), never decoration, and off when the reader asks for reduced motion.

   Layout follows Bluesky's open-source social-app breakpoints (src/alf/breakpoints.shared.ts: mobile 800,
   rightNav 1100, tablet 1300): one column + bottom bar under 800, left nav + 600 px feed from 800, right rail
   from 1100. */
@font-face { font-family: "News"; src: url(/fonts/newsreader-text-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "News"; src: url(/fonts/newsreader-text-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "News Display"; src: url(/fonts/newsreader-display-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "News Display"; src: url(/fonts/newsreader-display-italic-400.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Type"; src: url(/fonts/courierprime-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

/* One surface per theme, as on Windows Phone: no panels on panels. Depth comes from type size and space.
   Measured (WCAG 2.x): light ink 21:1, soft 6.7:1, accent 4.74:1 and white on accent 4.74:1;
   dark ink 21:1, soft 8.6:1, accent 5.64:1 and black on accent 5.64:1. WP8's own red (#e51400) is 4.43:1 on
   black, just under AA, so dark mode uses a brighter red of the same hue. */
:root {
  --bg: #ffffff; --ink: #000000; --soft: #5c5c5c; --rule: #d6d6d6; --faint: #f2f2f2;
  --redact: #d4d4d4; --redact-hi: #000000; --redact-mark: #000000;
  --stamp: #e51400; --on-stamp: #ffffff; --hi: #fff0a1; --hi-ink: #3d3300; --mark: #ffe45c;
  --display: "News Display", "Iowan Old Style", Georgia, serif;
  --text: "News", "Iowan Old Style", Georgia, serif;
  --ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --type: "Type", "Courier New", ui-monospace, monospace;
  --bar: 64px; --side: 56px;
  --ease: cubic-bezier(0.1, 0.9, 0.2, 1); /* Metro's "exponential out": fast start, long settle */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --ink: #ffffff; --soft: #a6a6a6; --rule: #333333; --faint: #1a1a1a;
    --redact: #333333; --redact-hi: #ffffff; --redact-mark: #ffffff;
    --stamp: #ff2d1a; --on-stamp: #000000; --hi: #332b00; --hi-ink: #ffd84d; --mark: #5c4b00; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --ink: #ffffff; --soft: #a6a6a6; --rule: #333333; --faint: #1a1a1a;
  --redact: #333333; --redact-hi: #ffffff; --redact-mark: #ffffff;
  --stamp: #ff2d1a; --on-stamp: #000000; --hi: #332b00; --hi-ink: #ffd84d; --mark: #5c4b00; color-scheme: dark;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.55 var(--text); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--stamp); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
em { font-family: var(--display); font-style: italic; font-weight: 400; }
p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; z-index: 40; background: var(--ink); color: var(--bg); padding: 8px 12px; font-family: var(--ui); }
.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* A24's record-sheet label: tiny, tracked, uppercase. */
.label { font: 600 0.72rem/1.3 var(--ui); text-transform: uppercase; letter-spacing: 0.12em; color: var(--soft); }
.todo { background: var(--hi); color: var(--hi-ink); padding: 0 4px; }

/* ---- Shell: one column, then two, then three. */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 auto; }
main { min-width: 0; overflow-x: clip; outline: none; /* clip, not hidden: keeps sticky headers working; stops the entry slide widening a phone's layout viewport */ padding-bottom: calc(var(--bar) + 32px + env(safe-area-inset-bottom, 0px)); }
.rail { display: none; }

.side { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: var(--side);
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  background: var(--bg); border-bottom: 1px solid var(--rule); }
.logo { display: inline-flex; align-items: center; flex: none; white-space: nowrap; min-height: 44px; font: 500 1.5rem var(--display); letter-spacing: -0.03em; text-decoration: none; }
.logo em { color: var(--stamp); margin-left: 1px; }
.logo .mark { flex: none; width: 1em; height: 1em; margin-right: .35em; }
.logo .m1 { fill: var(--ink); } .logo .m2 { fill: var(--stamp); }
.side > .side-note, .side > .side-post, .side > .side-acct, .tabs .wide { display: none; }

/* Phone: four thumb-reach targets in an app bar (Hoober 2013: 49% of people hold a phone one-handed;
   44 px minimum from WCAG 2.5.8). Icons over lowercase labels, as in Windows Phone's application bar. */
.tabs { position: fixed; z-index: 30; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: stretch;
  padding: 2px max(4px, env(safe-area-inset-right, 0px)) calc(2px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
  background: var(--bg); border-top: 1px solid var(--rule); }
.tabs a, .tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 4px 2px;
  border: 0; background: none; color: var(--soft); font: 400 0.72rem/1.1 var(--ui); text-transform: lowercase; text-align: center; text-decoration: none; cursor: pointer; }
.tabs a[aria-current=page]:not(.cta), .tabs button[aria-current=page] { color: var(--ink); }
.tabs .cta { color: var(--stamp); }
.long-label { display: none; }
.short-label { display: inline; }

@media (min-width: 800px) {
  .shell { grid-template-columns: 220px minmax(0, 600px); justify-content: center; column-gap: 24px; padding-inline: 16px; }
  main { border-inline: 1px solid var(--rule); min-height: 100vh; padding-bottom: 64px; }
  .side { top: 0; align-self: start; height: 100vh; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 24px; padding: 20px 0; border: 0; }
  .side .logo { padding-inline: 4px; }
  /* Metro pivot navigation: big, light, lowercase words; the current one is full ink, the rest recede. */
  .tabs { position: static; display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; background: none; border: 0; }
  .tabs a, .tabs button { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 0 4px;
    font: 300 1.6rem/1 var(--ui); letter-spacing: -0.02em; color: var(--soft); text-align: left; }
  .tabs .ico, .tabs .cta { display: none; }
  .tabs a:hover:not(.cta), .tabs button:hover { color: var(--ink); }
  .tabs a[aria-current=page]:not(.cta) { color: var(--ink); }
  .tabs .wide { display: flex; font-size: 1rem; font-weight: 400; min-height: 44px; letter-spacing: 0; }
    .long-label { display: inline; }
  .short-label { display: none; }
  .tabs .search-jump { display: none; }
  .side > .side-post, .side > .side-acct { display: block; }
  .side > .side-acct { margin-top: -12px; }
  .side-acct { min-height: 48px; } /* reserve the slot: #side-acct is hidden until /api/me answers, so the nav below must not jump */
  .side-acct .btn { width: 100%; }
  .side-post .btn { width: 100%; }
  .side > .side-note { display: block; margin-top: auto; padding-inline: 4px; font: 400 0.88rem/1.45 var(--ui); color: var(--soft); }
  .side-note a { display: inline-block; min-height: 44px; color: var(--ink); }
  .strip { top: 0; }
}
@media (min-width: 1100px) {
  .shell { grid-template-columns: 220px minmax(0, 600px) 300px; }
  /* One scroll for the page, like X: the rail never scrolls on its own. It sticks at the top when it is shorter than
     the window; when taller, --rail-top (set in app.js: window height minus rail height, never positive) lets it
     scroll with the page only until its bottom is visible, then it sticks. */
  .rail { position: sticky; top: var(--rail-top, 0px); align-self: start; display: grid; gap: 28px; padding: 20px 0 24px; }
  .narrow { display: none !important; }
}
@media (min-width: 1300px) {
  .shell { grid-template-columns: 250px 600px 320px; column-gap: 32px; }
}

/* ---- Views. A view enters the way a Metro page did: a short slide from the right, settling fast.
   One purpose (this is a new place), 260 ms, and none at all under reduced motion. */
.view { display: grid; gap: 18px; }
main > .view { padding: 0 16px 16px; }
@media (min-width: 800px) { main > .view { padding-inline: 24px; } }
@media (prefers-reduced-motion: no-preference) {
  main > .view:not([hidden]) { animation: enter 260ms var(--ease) both; }
  @keyframes enter { from { opacity: 0; transform: translateX(24px); } }
}
.stack { display: grid; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.prose > .row a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--ui); }

/* Later's lesson: one headline set big enough to be the page. */
.feed-head { display: grid; gap: 12px; padding-top: 28px; }
.feed-head h1 { font-size: clamp(2.6rem, 11vw, 4.4rem); line-height: 0.92; letter-spacing: -0.045em; }
.feed-head h1 em { color: var(--stamp); }
.feed-head .label { display: none; } /* "Home" repeats the nav, and its line box collided with the 0.92 headline */
.feed-lede { font: 400 1.02rem/1.5 var(--ui); color: var(--soft); max-width: 46ch; }
.co-head { display: grid; gap: 16px; padding-top: 24px; margin-bottom: 16px; }
.co-head h1 { font-size: clamp(1.75rem, 7vw, 2.75rem); line-height: 1.1; letter-spacing: normal; overflow-wrap: anywhere; }
@media (min-width: 800px) { .co-head h1 { font-size: clamp(2.75rem, 4vw, 3.5rem); } }

/* The composer at the top of the feed: a line to write on, not a box. It opens the one-screen form. */
.stub { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 0; border-block: 1px solid var(--rule); color: var(--soft); text-decoration: none; }
.composer-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
.composer-copy strong { color: var(--ink); font: 500 1.4rem/1.15 var(--display); letter-spacing: -0.02em; }
.composer-copy span { font: 400 0.9rem/1.35 var(--ui); }
.stub:hover strong { color: var(--stamp); }
.stub .btn { flex: none; background: transparent; border-color: var(--ink); color: var(--ink); } /* one primary button per screen: the nav's */

/* Fields: a line to write on, as on a form. */
.search-top { padding-top: 4px; }
.field { display: grid; gap: 6px; }
.line { width: 100%; min-height: 50px; padding: 9px 0; background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; font-family: var(--ui); }
.line.big { font: 500 clamp(1.5rem, 6vw, 1.9rem)/1.2 var(--display); letter-spacing: -0.02em; }
.line::placeholder { color: var(--soft); opacity: 1; }
select.line { appearance: none; padding-right: 32px; cursor: pointer;
  background: linear-gradient(45deg, transparent 50%, var(--ink) 50%) right 12px center / 7px 7px no-repeat,
    linear-gradient(135deg, var(--ink) 50%, transparent 50%) right 5px center / 7px 7px no-repeat; }
select.line option { background: var(--bg); color: var(--ink); }
.opt { margin-left: 8px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.line:focus-visible { outline: none; border-bottom-color: var(--stamp); box-shadow: 0 2px 0 var(--stamp); }
textarea.line { min-height: 240px; resize: vertical; padding: 14px; border: 2px solid var(--ink); font: 400 1.0625rem/1.55 var(--text); }
textarea.line:focus-visible { border-color: var(--stamp); box-shadow: none; outline: 1px solid var(--stamp); }
[aria-invalid=true] { border-color: var(--stamp) !important; }
.err { font: 600 0.92rem var(--ui); color: var(--stamp); }
.hint { color: var(--soft); font: 400 0.95rem/1.45 var(--ui); }
.lede { font-size: 1.3rem; line-height: 1.45; }
.company-field { gap: 8px; }
.subfield { display: grid; gap: 4px; margin: 4px 0; padding-left: 14px; border-left: 2px solid var(--rule); }
.subline { font-size: 1rem; border-bottom-width: 1px; }

/* Buttons: Metro's flat rectangles. Solid is the one action that matters; outlined is everything else. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--bg); font: 600 0.98rem var(--ui); text-decoration: none; cursor: pointer; }
.btn.quiet { background: transparent; color: var(--ink); }
.side-post .btn, #w-post { background: var(--stamp); border-color: var(--stamp); color: var(--on-stamp); }
.btn:disabled { opacity: 0.55; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .btn, .same, .chips button { transition: transform 120ms var(--ease); }
  .btn:not(:disabled):active, .same:active { transform: scale(0.97); } /* Metro's press tilt, flattened */
}

.results { list-style: none; margin: 0; padding: 0; }
.results li { border-bottom: 1px solid var(--rule); }
.results a, .results button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 0;
  background: none; border: 0; color: var(--ink); text-decoration: none; text-align: left; font: 500 1.15rem var(--display); cursor: pointer; }
.results a:hover span:first-child, .results button:hover span:first-child { color: var(--stamp); }
.results .count { flex: none; font: 400 0.85rem var(--ui); color: var(--soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.notice { padding: 14px 0; border-block: 1px solid var(--rule); font-family: var(--ui); font-size: 0.98rem; }
.notice a { font-weight: 600; }

/* Reason filter as a Metro pivot: words, not boxes. The chosen one is full ink with the accent under it. */
.strip { position: sticky; top: var(--side); z-index: 10; display: grid; gap: 2px; margin-inline: -16px; padding: 10px 16px 0; background: var(--bg); border-bottom: 1px solid var(--rule); }
.chips { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; min-height: 44px; min-width: 44px; padding: 0; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--soft);
  font: 300 1.3rem/1 var(--ui); letter-spacing: -0.01em; text-transform: lowercase; white-space: nowrap; cursor: pointer; }
.chips button:hover { color: var(--ink); }
.chips button[aria-pressed=true] { color: var(--ink); border-bottom-color: var(--stamp); }
#rail-filter-slot .chips { flex-wrap: wrap; gap: 0 16px; overflow: visible; }
#rail-filter-slot .chips button { font-size: 1.02rem; }
@media (min-width: 800px) { .strip { margin-inline: -24px; padding-inline: 24px; } }

/* ---- A story, in full. No avatar column: the company is the face of a story here. */
.list { display: grid; margin-inline: -16px; }
@media (min-width: 800px) { .list { margin-inline: -24px; } }
.card { display: grid; gap: 8px; padding: 20px 16px; border-bottom: 1px solid var(--rule); min-width: 0; }
@media (min-width: 800px) { .card { padding-inline: 24px; } }
@media (prefers-reduced-motion: no-preference) {
  .list > .card { animation: rise 320ms var(--ease) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}
.card-body { display: grid; gap: 8px; min-width: 0; }
.card h2 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: 1.45rem; line-height: 1.15; }
.card h2 a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.card h2 a:hover { color: var(--stamp); }
.where { font: 400 0.95rem var(--ui); color: var(--soft); letter-spacing: 0; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; font: 400 0.88rem/1.4 var(--ui); color: var(--soft); }
.meta b { font-weight: 600; color: var(--ink); }
.meta a { display: inline-flex; align-items: center; min-height: 44px; color: var(--soft); }
.meta a:hover { color: var(--ink); }
/* The one typewritten thing on the page: the stamp on the file. */
.chip { justify-self: start; padding: 3px 9px 2px; border: 2px solid var(--stamp); color: var(--stamp); font: 700 0.76rem/1.3 var(--type);
  text-transform: uppercase; letter-spacing: 0.07em; transform: rotate(-1.5deg); }
.sensitive-note { padding-left: 12px; border-left: 3px solid var(--stamp); color: var(--soft); font: 400 0.92rem/1.45 var(--ui); }
.story { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 65ch; font-size: 1.1rem; line-height: 1.6; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
.same, .act { min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); background: transparent; color: var(--ink);
  font: 600 0.9rem var(--ui); font-variant-numeric: tabular-nums; cursor: pointer; }
.act { padding: 0; border-color: transparent; color: var(--soft); text-decoration: underline; text-underline-offset: 4px; }
.act:hover { color: var(--ink); }
.same[aria-pressed=true] { background: var(--ink); color: var(--bg); }
mark { background: var(--mark); color: inherit; padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* A24's record sheet, for a story on its own page: label left, value right, hairline between. */
.ledger { display: grid; grid-template-columns: auto 1fr; margin: 4px 0 6px; border-top: 1px solid var(--ink); }
.ledger dt, .ledger dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.ledger dd { text-align: right; font: 400 0.98rem var(--ui); }
.ledger dt { align-self: center; }

/* The end of a feed: a stopping point, never a bottomless page. */
.end { display: grid; gap: 12px; justify-items: start; padding-block: 28px 8px; font-family: var(--ui); }
.end:empty { display: none; }

/* ---- Company: the answer before the stories. */
.why { display: grid; gap: 14px; }
.why:empty { display: none; }
.why h2 { font: 300 1.6rem/1.1 var(--ui); letter-spacing: -0.02em; text-transform: lowercase; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bars button { display: grid; gap: 6px; width: 100%; min-height: 44px; padding: 4px 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bars .top { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.bars .name { font: 400 1rem var(--ui); }
.bars .num { font: 400 0.88rem var(--ui); color: var(--soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bars button:hover .name { color: var(--stamp); }
.track { display: block; height: 6px; background: var(--faint); }
.fill { display: block; height: 100%; background: var(--ink); }
.bars li:first-child .fill { background: var(--stamp); }
.bars li:first-child .name { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .fill { animation: grow 600ms var(--ease) both; transform-origin: left; }
  @keyframes grow { from { transform: scaleX(0); } }
}

/* ---- Writing: one screen, no steps. */
.form { display: grid; gap: 26px; }
.form .label { color: var(--ink); }
.stack .results { margin-top: 4px; }
.reasons { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.reasons legend { margin-bottom: 8px; padding: 0; }
.options { display: grid; border-top: 1px solid var(--rule); }
@media (min-width: 520px) { .options { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.options label { display: flex; align-items: center; gap: 8px; min-height: 50px; border-bottom: 1px solid var(--rule); cursor: pointer; font: 400 1rem var(--ui); }
.options input { appearance: none; width: 44px; height: 44px; flex: none; margin: 0 0 0 -11px; border: 0; display: grid; place-content: center; place-items: center; /* items too: a smaller dot would sit at the start of the ring's grid cell */ background: none; cursor: pointer; }
.options input::after { content: ""; grid-area: 1 / 1; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; }
.options input::before { content: ""; grid-area: 1 / 1; width: 12px; height: 12px; border-radius: 50%; background: var(--stamp); transform: scale(0); z-index: 1; }
.options input:checked::before { transform: scale(1); }
.options label:has(input:checked) { font-weight: 600; }
.claim-code { margin: 0; padding: 14px 16px; border: 2px solid var(--ink); font: 600 1.25rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.06em; overflow-wrap: anywhere; user-select: all; }
.agree { display: flex; align-items: center; gap: 8px; min-height: 50px; font: 400 0.95rem/1.4 var(--ui); }
.agree label { cursor: pointer; }
.agree input { appearance: none; width: 44px; height: 44px; flex: none; margin: 0; border: 0; display: grid; place-items: center; background: none; cursor: pointer; }
.agree input::after { content: ""; grid-area: 1 / 1; width: 22px; height: 22px; border: 2px solid var(--ink); }
.agree input::before { content: ""; grid-area: 1 / 1; width: 12px; height: 12px; background: var(--stamp); transform: scale(0); z-index: 1; }
.agree input:checked::before { transform: scale(1); }
.agree input:focus-visible::after { outline: 2px solid var(--stamp); outline-offset: 2px; }
.counter { justify-self: end; font: 400 0.85rem var(--ui); color: var(--soft); font-variant-numeric: tabular-nums; }
.flags { display: grid; gap: 10px; padding: 14px 16px; background: var(--hi); color: var(--hi-ink); border-left: 4px solid var(--hi-ink); font: 400 0.98rem/1.5 var(--ui); }
.flags ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.flags.clear { background: none; color: var(--ink); border-left-color: var(--ink); }
.preview { border-block: 1px solid var(--rule); border-top: 0; }
.sheet .card { padding-inline: 0; border-bottom: 0; }
.keeps { display: grid; gap: 10px; padding-left: 14px; border-left: 3px solid var(--ink); font: 400 0.95rem/1.5 var(--ui); }
.status { min-height: 1.5em; font: 600 1rem var(--ui); }
.status.error { color: var(--stamp); }

/* ---- Long-form pages. */
.crumbs ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font: 400 0.92rem var(--ui); }
.crumbs li { display: flex; align-items: center; min-width: 0; color: var(--soft); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--soft); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.crumbs [aria-current] { color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; }
.prose h2 { font: 300 1.6rem/1.15 var(--ui); letter-spacing: -0.02em; text-transform: lowercase; margin-top: 12px; }
.prose ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
details { border-top: 1px solid var(--rule); }
.prose details:last-of-type { border-bottom: 1px solid var(--rule); }
summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 56px; padding-block: 14px; cursor: pointer; list-style: none; font: 500 1.25rem/1.3 var(--display); }
@media (min-width: 800px) { summary { font-size: 1.375rem; } }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font: 300 1.2em/1.0833 var(--ui); color: var(--soft); }
details[open] > summary::after { content: "–"; }
.prose details p { padding-bottom: 16px; }
.prose details a { font-weight: 600; }

/* ---- Right column: section titles as Metro headers, rows on hairlines, no boxes. */
.box { display: grid; gap: 6px; }
.box h2 { font: 300 1.6rem/1.1 var(--ui); letter-spacing: -0.02em; text-transform: lowercase; }
.box .results { margin-top: 8px; border-top: 1px solid var(--ink); }
.box .results a { font-size: 1.05rem; min-height: 48px; }
.box .results > li.hint { padding-block: 12px; }
.legal { display: flex; flex-wrap: wrap; column-gap: 14px; font: 400 0.88rem var(--ui); }
.phone-legal { padding: 8px 16px 0; }
@media (min-width: 800px) { .phone-legal { display: none; } }
.legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--soft); }
.rail .field .line { min-height: 46px; font-size: 1rem; }

.toast { position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); bottom: calc(var(--bar) + 20px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--bg); padding: 12px 18px; font: 600 0.95rem var(--ui); max-width: calc(100% - 32px); }
.toast:empty { display: none; }
@media (min-width: 800px) { .toast { bottom: 24px; } }

/* ---- Phone hierarchy. One job per band, in reading order: what this is (one line), look a company up, write,
   filter, read. Anything that repeats the bottom bar or explains the obvious is dropped below 520 px, so the
   first story starts on the first screen of a 375 x 667 phone. */
.where::before { content: "· "; }
@media (max-width: 519px) {
  .feed-head { gap: 8px; padding-top: 18px; }
  #home-filter-center > .label { display: none; }
  .feed-lede { font-size: 0.95rem; }
  .stub { min-height: 60px; padding: 8px 0; }
  .composer-copy strong { font-size: 1.2rem; }
  .card h2 .where { flex-basis: 100%; }
  .card h2 .where::before { content: none; }
  .chips { gap: 18px; }
  .chips button { font-size: 1.15rem; }
}

/* ---- Appearance. A segmented control (iOS-style, built from native radios): icon over label, the chosen
   segment lifted onto the page colour with an ink edge. Desktop: always visible in the sidebar's settings
   zone, below the primary nav and the one primary button. Phone: a bottom sheet from the header's Theme
   button, with a backdrop and Done. */
.brandbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1; min-width: 0; }
.theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 10px;
  border: 0; background: none; color: var(--ink); font: 600 0.95rem var(--ui); cursor: pointer; }
.theme-btn .ico { width: 18px; height: 18px; flex: none; }
.theme-btn:hover { background: var(--faint); }
.theme-btn:focus-visible { outline: 3px solid var(--stamp); outline-offset: -3px; background: var(--faint); }
/* Phone top bar: 56 px, one line, logo left; Sign in (text) and the theme icon (44 x 44) right, 4 px apart. */
@media (max-width: 799px) {
  .side { height: calc(var(--side) + env(safe-area-inset-top, 0px)); min-height: 0; }
  .brandbar { height: var(--side); }
  .brandbar > .acct-open { margin-left: auto; margin-right: 4px; }
  .acct-open[hidden] { display: inline-flex; visibility: hidden; } /* keep its width while /api/me is in flight: no jump */
  #theme-open { width: 44px; padding: 0; }
  #theme-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #theme-open .ico { width: 20px; height: 20px; }
}
.seg-set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.seg-set legend { padding: 0; margin-bottom: 8px; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 3px; background: var(--faint); border: 1px solid var(--rule); }
.seg label { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 52px; min-width: 44px; padding: 4px 2px;
  color: var(--soft); font: 500 0.76rem var(--ui); cursor: pointer; }
.seg label:hover { color: var(--ink); }
.seg .ico { width: 20px; height: 20px; }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--stamp); outline-offset: 1px; }
.appearance { display: grid; gap: 10px; }
.appearance .hint { font-size: 0.8rem; }
.ap-done { display: none; }

/* Phone: the sheet. */
@media (max-width: 799px) {
  .appearance { display: none; }
  body.sheet-open .appearance { display: grid; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--bg); border-top: 1px solid var(--ink); }
  body.sheet-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.55); }
  /* The sheet lives inside the sticky header, which is its own stacking context: lift the header over the backdrop. */
  body.sheet-open .side { z-index: 70; }
  body.sheet-open .ap-done { display: inline-flex; width: 100%; }
  .seg label { min-height: 60px; font-size: 0.85rem; }
  .seg .ico { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 799px) {
  body.sheet-open .appearance { animation: sheet 240ms var(--ease) both; }
  @keyframes sheet { from { transform: translateY(100%); } }
}
@media (min-width: 800px) {
  .brandbar { flex: none; }
  .theme-btn { display: none; }
  .side > .appearance { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); }
  .side > .side-note { margin-top: 0; }
}
/* ---- Account sheet: the same bottom sheet on phones, a centred dialog on wide screens. A native <dialog>, so
   Escape, focus trapping and focus return come with it; a tap on the backdrop closes it (app.js). */
.acct-open { margin-left: auto; }
@media (min-width: 800px) { .acct-open { display: none; } }
.acct { width: min(440px, 100%); max-width: 100%; max-height: 100%; padding: 0; border: 1px solid var(--ink); background: var(--bg); color: var(--ink); overflow: auto; }
.acct::backdrop { background: rgba(0, 0, 0, 0.55); }
.acct-body { display: grid; gap: 14px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.acct h2 { font-size: 1.9rem; line-height: 1.05; }
.acct .btn { width: 100%; }
.acct .status:empty { display: none; }
.acct .status { min-height: 0; }
.acct .field { gap: 2px; }
.why-line { font: 600 1rem/1.4 var(--ui); }
.signin-link { font-family: var(--ui); font-weight: 600; }

/* ---- Hidden company: a brush stroke of ink instead of any words. The width is one of three, picked from the story id,
   so it says nothing about the name. The mask is a hand-ragged path (uneven edges, torn ends) stretched to the box. */
:root { --stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M2 15 L6 9 L4 5 L13 7 L32 3 L61 6 L96 2 L131 6 L166 3 L191 5 L197 3 L195 11 L199 17 L195 24 L198 31 L190 34 L193 38 L160 36 L121 39 L86 35 L51 38 L21 36 L9 38 L10 32 L3 28 L6 21 Z'/%3E%3C/svg%3E"); }
.redact::before { content: ""; background: var(--redact); -webkit-mask: var(--stroke) 0 0 / 100% 100% no-repeat; mask: var(--stroke) 0 0 / 100% 100% no-repeat; }
.w0 { --w: 6.5em; } .w1 { --w: 8em; } .w2 { --w: 9.5em; }
.redact { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--w); max-width: 100%; min-height: 44px; padding: 0;
  border: 0; background: none; color: var(--bg); font: 600 1.45rem/1 var(--ui); cursor: pointer; }
.redact::before { position: absolute; inset: 0; margin: auto 0; height: 0.95em; transform-origin: 0 50%; }
.redact::after { content: "Sign in"; position: relative; font-size: 0.6em; line-height: 1; opacity: 0; }
/* Card stroke: muted at rest; hover and keyboard focus switch to full ink (colour only: no motion, no shadow) and show the label, centred.
   The button itself is the 44px tap target; the visible stroke inside it is shorter. */
button.redact:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
button.redact:focus-visible::before { background: var(--redact-hi); }
button.redact:focus-visible::after { opacity: 1; }
@media (hover: hover) { button.redact:hover::before { background: var(--redact-hi); } button.redact:hover::after { opacity: 1; } }
[data-theme="brutal"] .redact::after { color: var(--ink); }
/* Touch has no hover: a small padlock at the stroke's right end, drawn from two gradients (shackle ring over a body). */
@media (hover: none) {
  button.redact::after { content: ""; position: absolute; right: 0.7em; top: 50%; width: 0.62em; height: 0.8em; margin-top: -0.4em; opacity: 1; font-size: 0.6em;
    background: radial-gradient(circle at 50% 50%, transparent 34%, var(--redact-mark) 38% 68%, transparent 72%) top / 70% 70% no-repeat,
      linear-gradient(var(--redact-mark), var(--redact-mark)) bottom / 100% 55% no-repeat; }
}
/* The signed-out "most stories" rail: five strokes with a muted count each, all inside one button. */
.lock { display: block; width: 100%; margin-top: 8px; padding: 0; border: 0; border-top: 1px solid var(--ink); background: none; text-align: left; cursor: pointer; }
[data-theme="brutal"] .lock { border-top-width: 3px; }
.lock-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--rule); }
.lock { position: relative; }
.lock .redact { font-size: 1.05rem; cursor: inherit; }
.lock:focus-visible .redact::before { background: var(--redact-hi); }
@media (hover: hover) { .lock:hover .redact::before { background: var(--redact-hi); } }
.lock .redact::after { display: none; }
.lock::after { content: "Sign in"; position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; padding: 8px 16px; display: none;
  background: var(--ink); color: var(--bg); outline: 2px solid var(--bg); font: 600 1rem/1 var(--ui); }
.lock:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lock:focus-visible, .lock:focus-visible::after { display: block; }
.lock:focus-visible { background: var(--faint); }
@media (hover: hover) { .lock:hover { background: var(--faint); } .lock:hover::after { display: block; } }
[data-theme="brutal"] .lock::after { background: var(--pop); color: var(--ink); border: 3px solid var(--ink); }
.ph { flex: none; width: 2ch; height: 0.6em; background: color-mix(in srgb, var(--ink) 16%, transparent); }

/* After signing in, the names that replace the strokes wipe in once, left to right. */
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: no-preference) { .reveal .co, .reveal #top a > span:first-child { animation: wipe 350ms var(--ease) both; } }
@media (max-width: 799px) {
  .acct { margin: auto 0 0; border-width: 1px 0 0; }
}
@media (min-width: 800px) {
  .acct-body { padding: 24px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 799px) {
  .acct[open] { animation: sheet 240ms var(--ease) both; }
}
[data-theme="brutal"] .acct { border: 3px solid var(--ink); box-shadow: var(--shadow); background: var(--card); }
[data-theme="brutal"] .seg { border: 3px solid var(--ink); }
[data-theme="brutal"] .acct-open { border: 3px solid var(--ink); background: var(--pop); box-shadow: none; }
[data-theme="brutal"] .acct-open:hover { background: var(--pop); text-decoration: underline; }
[data-theme="brutal"] .seg label:has(input:checked) { background: var(--pop); box-shadow: inset 0 0 0 3px var(--ink); }
[data-theme="brutal"] body.sheet-open .appearance { border-top-width: 3px; }

/* ---- Search fields: a filled box with a magnifier, the shape people expect a search to have. */
.search { position: relative; }
.search > .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--soft); pointer-events: none; }
.search > .line { min-height: 48px; padding: 0 12px 0 42px; border: 1px solid var(--rule); background: var(--faint); font: 400 1rem var(--ui); }
.search > .line:focus-visible { border-color: var(--ink); box-shadow: none; outline: 2px solid var(--stamp); outline-offset: 1px; }
[data-theme="brutal"] .search > .line { border: 3px solid var(--ink); background: var(--card); }

/* ---- Report: a quiet control that opens a list of reasons in place. */
.report > summary { display: inline-flex; min-height: 44px; min-width: 44px; padding: 0; font: 600 0.9rem var(--ui); color: var(--soft);
  text-decoration: underline; text-underline-offset: 4px; }
.report > summary::after { content: none; }
.report > summary:hover { color: var(--ink); }
.report { border: 0; }
.report[open] { flex-basis: 100%; }
.report-menu { display: grid; border-top: 1px solid var(--rule); margin-top: 4px; }
.report-menu button { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink);
  font: 400 0.98rem var(--ui); text-align: left; cursor: pointer; }
.report-menu button:hover { color: var(--stamp); }
.act.done { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

/* ---- Neo-brutalism: the same page as a printed zine. Cream paper, 3 px black outlines, hard offset shadows
   with no blur, one yellow for "do this", the stamp red kept for the reason. Measured: soft 10.4:1, stamp
   5.14:1 on cream and 5.63:1 on white, black on yellow 14.7:1, black on pink highlight 11.0:1. */
:root[data-theme="brutal"] {
  --bg: #fff4d6; --ink: #000000; --soft: #3a3a3a; --rule: #000000; --faint: #ffe9a8;
  --stamp: #d1001f; --on-stamp: #ffffff; --hi: #ffd400; --hi-ink: #000000; --mark: #ff9ecf;
  --pop: #ffd400; --redact: #000000; --redact-hi: #ffd400; --redact-mark: #ffffff; --card: #ffffff; --shadow: 5px 5px 0 #000000; color-scheme: light;
}
[data-theme="brutal"] .label { color: var(--ink); font-weight: 800; }
[data-theme="brutal"] .side { border-bottom-width: 3px; }
[data-theme="brutal"] .tabs { border-top-width: 3px; }
[data-theme="brutal"] main { border-inline-width: 3px; }
[data-theme="brutal"] .feed-head h1 em { background: var(--pop); color: var(--ink); padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-theme="brutal"] .tabs a[aria-current=page]:not(.cta) { background: var(--pop); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); padding-inline: 10px; }
[data-theme="brutal"] .list { gap: 20px; margin-inline: 0; padding-block: 18px 6px; }
[data-theme="brutal"] .card { background: var(--card); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 18px; }
[data-theme="brutal"] .sheet .card { box-shadow: none; }
[data-theme="brutal"] .stub, [data-theme="brutal"] .box, [data-theme="brutal"] .flags, [data-theme="brutal"] .toast {
  background: var(--card); border: 3px solid var(--ink); box-shadow: var(--shadow); }
[data-theme="brutal"] .stub { padding: 12px 14px; }
[data-theme="brutal"] .box { padding: 16px; }
[data-theme="brutal"] .flags { background: var(--hi); }
[data-theme="brutal"] .toast { color: var(--ink); }
[data-theme="brutal"] .btn, [data-theme="brutal"] .same { border-width: 3px; box-shadow: 4px 4px 0 var(--ink); }
[data-theme="brutal"] .btn:not(:disabled):active, [data-theme="brutal"] .same:active { transform: translate(4px, 4px); box-shadow: none; }
[data-theme="brutal"] .side-post .btn, [data-theme="brutal"] #w-post {
  background: var(--pop); border-color: var(--ink); color: var(--ink); }
[data-theme="brutal"] .chips { padding-bottom: 8px; }
[data-theme="brutal"] .chips button { padding: 0 10px; border: 3px solid transparent; }
[data-theme="brutal"] .chips button[aria-pressed=true] { background: var(--pop); border-color: var(--ink); }
[data-theme="brutal"] .line:not(.search > .line) { padding-inline: 12px; /* not the search box: its icon padding must win */ background: var(--card); border: 3px solid var(--ink); }
[data-theme="brutal"] .line:focus-visible { box-shadow: 4px 4px 0 var(--stamp); }
[data-theme="brutal"] .chip { background: var(--card); border-width: 3px; }
[data-theme="brutal"] .track { border: 2px solid var(--ink); height: 12px; background: var(--card); }
[data-theme="brutal"] .fill { background: var(--ink); }
[data-theme="brutal"] .bars li:first-child .fill { background: var(--stamp); }

/* An empty filter is a fork, not a dead end. */
.empty { display: grid; gap: 10px; padding: 28px 16px; border-bottom: 1px solid var(--rule); }
@media (min-width: 800px) { .empty { padding-inline: 24px; } }
.empty h3 { font-size: 1.5rem; line-height: 1.15; max-width: 26ch; }
.empty .hint { max-width: 52ch; }
.empty .row { margin-top: 6px; }
[data-theme="brutal"] .empty { background: var(--card); border: 3px solid var(--ink); box-shadow: var(--shadow); }
/* A closed <details> still lays out its content in Chrome; keep the closed report menu out of the layout. */
.report:not([open]) > .report-menu { display: none; }
/* The FAQ's open/closed marker isn't for the report menu. */
.report > summary::after, .report[open] > summary::after { content: none; }