/* Fazoh social layer (docs/DESIGN.md, "Social"). Loaded after foretold.css and overrides it.
   A light grey ground with white cards, a Facebook-style app bar, and the data-driven devices from the
   research: confidence type (Anybody's width and weight axes), Datatype sparklines, Martian Mono ledger lines.
   Fonts are self-hosted (the CSP allows no font hosts); licenses in public/fonts/LICENSE-*.txt (SIL OFL).
   font-display: optional + preload (layout): a face that is ready is used at once; one that is not keeps the
   fallback for that page instead of swapping in later, so text never shifts after it appears. */
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin.woff2") format("woff2"); font-weight: 400 800; font-display: optional; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-ext.woff2") format("woff2"); font-weight: 400 800; font-display: optional; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anybody"; src: url("../fonts/anybody-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: optional; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Anybody"; src: url("../fonts/anybody-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: optional; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Martian Mono"; src: url("../fonts/martian-mono-latin.woff2") format("woff2"); font-weight: 300 600; font-stretch: 75% 112.5%; font-display: optional; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Martian Mono"; src: url("../fonts/martian-mono-latin-ext.woff2") format("woff2"); font-weight: 300 600; font-stretch: 75% 112.5%; font-display: optional; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Datatype"; src: url("../fonts/datatype-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 100%; font-display: block; }

/* Layout: ground → white cards → light inner wells. Three columns on the wall: shortcuts, feed, live rail. */
:root {
  --ground: #f0f2f5;
  --paper: #ffffff;
  --well: #f6f7f9;
  --wash: #f0f2f5;
  --ink: #0f1419;
  --ink-2: #475563;
  --ink-3: #5f6b77;
  --rule: #e6e8ec;
  --line: rgba(15, 20, 25, .07);
  --seal: #d7301f;
  --seal-hover: #c02818;
  --seal-wash: #fdecea;
  --card-shadow: 0 0 0 1px rgba(15, 20, 25, .06), 0 1px 2px rgba(15, 20, 25, .04);
  --lift-shadow: 0 0 0 1px rgba(15, 20, 25, .08), 0 8px 24px -8px rgba(15, 20, 25, .14);
  --bar-bg: rgba(255, 255, 255, .86);

  --f-ui: "Onest", -apple-system, "Segoe UI", system-ui, sans-serif;
  --f-head: "Onest", -apple-system, "Segoe UI", system-ui, sans-serif;
  --f-read: "Onest", -apple-system, "Segoe UI", system-ui, sans-serif;
  --f-ledger: "Martian Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  --f-num: "Anybody", "Arial Narrow", "Onest", sans-serif;
  --f-chart: "Datatype", ui-monospace, monospace;
  --r-card: 16px;
  --r-well: 14px;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --ground: #0d0f12; --paper: #17191d; --well: #1e2126; --wash: #23272d; --ink: #e9ebee; --ink-2: #a0a8b2; --ink-3: #8f98a3;
    --rule: #2a2e35; --line: rgba(255, 255, 255, .08); --seal: #ff5a45; --seal-hover: #ff7461; --seal-wash: #2b1714;
    --card-shadow: 0 0 0 1px rgba(255, 255, 255, .06); --lift-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 24px -8px rgba(0, 0, 0, .6);
    --bar-bg: rgba(23, 25, 29, .86);
  }
}
:root[data-theme="dark"] {
  --ground: #0d0f12; --paper: #17191d; --well: #1e2126; --wash: #23272d; --ink: #e9ebee; --ink-2: #a0a8b2; --ink-3: #8f98a3;
  --rule: #2a2e35; --line: rgba(255, 255, 255, .08); --seal: #ff5a45; --seal-hover: #ff7461; --seal-wash: #2b1714;
  --card-shadow: 0 0 0 1px rgba(255, 255, 255, .06); --lift-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 24px -8px rgba(0, 0, 0, .6);
  --bar-bg: rgba(23, 25, 29, .86);
}

body { background: var(--ground); font-family: var(--f-ui); font-size: 15.5px; line-height: 1.45; }
h1, h2, h3 { font-family: var(--f-head); }
.ledger { font-family: var(--f-ledger); font-stretch: 90%; font-size: 11.5px; }
.num, .fig-num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.icon { width: 20px; height: 20px; flex: none; }
.card { background: var(--paper); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
a, button, .act, .seg, .vote, .nav-row { -webkit-tap-highlight-color: transparent; }

/* ---------- App bar ---------- */
.bar { position: sticky; top: 0; z-index: 30; background: var(--bar-bg); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); }
.bar-inner { max-width: none; height: 56px; padding: 0 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.bar-start { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--seal); color: #fff; display: grid; place-items: center; font: 800 22px/1 var(--f-ui); letter-spacing: -.02em; text-decoration: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.brand-mark:hover { background: var(--seal-hover); }
.bar .search { flex: 1 1 auto; max-width: 300px; height: 40px; padding: 0 8px 0 14px; border-radius: 999px; background: var(--wash); color: var(--ink-2); gap: 8px; }
.bar .search .icon { width: 17px; height: 17px; }
.bar .search input { font-size: 14.5px; }
.bar .search input::placeholder { color: var(--ink-2); }
.bar .search:focus-within { box-shadow: 0 0 0 2px var(--seal); background: var(--paper); }
.search-kbd { font: 500 11.5px var(--f-ledger); color: var(--ink-2); background: var(--paper); border-radius: 8px; padding: 2px 6px; box-shadow: 0 0 0 1px var(--line); }
.bar-tabs { display: flex; align-items: stretch; height: 56px; gap: 2px; }
.bar-tabs a { position: relative; width: clamp(64px, 7vw, 100px); margin: 4px 0; display: grid; place-items: center; border-radius: 12px; color: var(--ink-2); transition: background .15s ease, color .15s ease; }
.bar-tabs a:hover { background: var(--wash); color: var(--ink); }
.bar-tabs a .icon { width: 24px; height: 24px; }
.bar-tabs a[aria-current="page"] { color: var(--seal); background: none; margin: 0; border-radius: 0; }
.bar-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--seal); }
.bar-tabs a[aria-current="page"] .icon { fill: currentColor; fill-opacity: .14; }
.bar-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: var(--seal); color: #fff; font: 700 14.5px var(--f-ui); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgba(215, 48, 31, .3), inset 0 1px 0 rgba(255, 255, 255, .18); transition: background .15s ease, transform .12s ease; }
.btn-cta:hover { background: var(--seal-hover); color: #fff; }
.btn-cta:active { transform: scale(.97); }
.btn-cta .icon { width: 18px; height: 18px; stroke-width: 2.6; }
.btn-cta.wide { width: 100%; padding: 0 16px; }
.btn-ghost { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 14.5px var(--f-ui); text-decoration: none; box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; }
.btn-ghost:hover { background: var(--wash); }
.bar .icon-btn { width: 40px; height: 40px; background: var(--wash); color: var(--ink); position: relative; transition: background .15s ease; }
.bar .icon-btn:hover { background: var(--rule); }
.bar .icon-btn .icon { width: 19px; height: 19px; }
.bar .bell-count { top: -3px; right: -3px; min-width: 18px; height: 18px; font: 700 11.5px/18px var(--f-ui); box-shadow: 0 0 0 2px var(--paper); color: #fff; }
.me-menu { position: relative; }
.me-menu summary { list-style: none; cursor: pointer; border-radius: 50%; }
.me-menu summary::-webkit-details-marker { display: none; }
.me-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; object-fit: cover; background: #2b3a55; color: #fff; font: 700 14.5px var(--f-ui); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--seal); }
.me-pop { position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; padding: 8px; display: grid; gap: 2px; background: var(--paper); border-radius: 12px; box-shadow: var(--lift-shadow); }
.me-pop-name { margin: 4px 10px 6px; font-weight: 700; }
.me-pop a, .me-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 500 14.5px var(--f-ui); text-decoration: none; text-align: left; cursor: pointer; }
.me-pop a:hover, .me-pop button:hover { background: var(--wash); }
.me-pop .icon { width: 18px; height: 18px; color: var(--ink-2); }
.bar .search-link { display: none; }

/* Phones: the bar keeps brand, search icon and the member; tabs move to a bottom bar. */
.tabbar { display: none; }
@media (max-width: 900px) {
  .bar-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0 12px; height: 54px; }
  .bar-tabs { display: none; }
  .bar .search { display: none; }
  .bar .search-link { display: inline-flex; }
  .bar-end .btn-cta { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: none; height: calc(62px + env(safe-area-inset-bottom, 0px)); padding: 0 0 env(safe-area-inset-bottom, 0px); margin: 0; border-top: 1px solid var(--line); background: var(--bar-bg); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); }
  .tabbar a { display: grid; justify-items: center; gap: 3px; padding: 0; font: 600 11.5px/1.1 var(--f-ui); color: var(--ink-2); text-decoration: none; }
  .tabbar a .icon { width: 24px; height: 24px; stroke-width: 2; }
  .tabbar a[aria-current="page"] { color: var(--seal); }
  .tabbar a[aria-current="page"]::after { display: none; }
  .tabbar a[aria-current="page"] .icon { fill: currentColor; fill-opacity: .14; }
  .tabbar .tab-file { justify-self: center; width: 52px; height: 40px; border-radius: 12px; background: var(--seal); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px -4px rgba(215, 48, 31, .6); }
  .tabbar .tab-file .icon { width: 22px; height: 22px; stroke-width: 2.8; background: none; padding: 0; color: #fff; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- The wall ---------- */
.wall { max-width: 1320px; margin: 20px auto 0; padding-inline: 16px; display: grid; grid-template-columns: 256px minmax(0, 640px) 312px; justify-content: center; gap: 28px; align-items: start; }
.wall-left, .wall-right { position: sticky; top: 76px; display: grid; gap: 2px; }
.wall-right { gap: 14px; }
.wall-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (max-width: 1180px) { .wall { grid-template-columns: minmax(0, 640px) 300px; } .wall-left { display: none; } }
@media (max-width: 900px) { .wall { grid-template-columns: minmax(0, 1fr); padding-inline: 0; margin-top: 8px; gap: 8px; } .wall-right { display: none; } .wall-main { gap: 8px; } }

.nav-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--ink); font-weight: 500; text-decoration: none; transition: background .15s ease; }
.nav-row:hover { background: rgba(15, 20, 25, .05); }
:root[data-theme="dark"] .nav-row:hover { background: rgba(255, 255, 255, .06); }
.nav-row[aria-current="page"] { background: var(--paper); box-shadow: var(--card-shadow); font-weight: 700; }
.nav-row.sm { padding: 6px 10px; }
.nav-row.has-action { padding-right: 6px; }
.nav-row .nav-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.nav-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--paper); box-shadow: var(--card-shadow); display: grid; place-items: center; color: var(--ink); }
.nav-ic.sm { width: 32px; height: 32px; border-radius: 8px; }
.nav-ic .icon { width: 19px; height: 19px; }
.nav-ic .desk-glyph { width: 22px; height: 22px; }
.nav-ic.is-home { background: var(--seal-wash); color: var(--seal); box-shadow: none; }
.nav-ic.is-faz { color: var(--seal); }
.nav-grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { font: 500 11.5px var(--f-ledger); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nav-two { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; font-weight: 600; }
.nav-two small { font: 500 11.5px var(--f-ledger); color: var(--ink-2); font-stretch: 90%; }
.nav-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 13.5px var(--f-ui); object-fit: cover; flex: none; }
.me-row { font-weight: 600; }
.rail-title { margin: 18px 10px 6px; font: 600 11.5px var(--f-ledger); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.follow-btn { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 12.5px var(--f-ui); cursor: pointer; }
.follow-btn:hover { opacity: .85; }
.join-card { background: var(--paper); border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 18px; display: grid; gap: 10px; margin-bottom: 8px; }
.join-card h2 { margin: 0; font: 800 20px/1.2 var(--f-head); letter-spacing: -.01em; }
.join-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.join-more { justify-self: center; font-weight: 600; font-size: 14.5px; color: var(--ink-2); }

/* Composer */
.composer { padding: 14px 16px 12px; }
.composer .ask-box { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.composer .ask-form { gap: 12px; }
.ask-avatar { width: 40px; height: 40px; background: #2b3a55; color: #fff; font-weight: 700; }
.ask-input { height: 44px; border: 0; background: var(--wash); font-size: 15.5px; padding: 0 18px; }
.ask-input:focus { background: var(--paper); box-shadow: 0 0 0 2px var(--seal); }
.ask-form .btn { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 14.5px var(--f-ui); }
.ask-hint { margin: 8px 0 0 52px; font-size: 12.5px; color: var(--ink-2); }
.wall-main > .onboard { padding: 18px; border: 0; margin: 0; }

/* Stories: each desk's newest claim. Four and a bit show; the rest scroll sideways. */
.stories-wrap { position: relative; }
.stories { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 4.3); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
/* Round arrows on the row's edges (desktop); touch screens swipe. */
.stories-nav { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); box-shadow: 0 2px 10px rgba(15, 20, 25, .22), 0 0 0 1px var(--line); display: grid; place-items: center; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.stories-nav:hover { transform: scale(1.06); box-shadow: 0 4px 16px rgba(15, 20, 25, .28), 0 0 0 1px var(--line); }
.stories-nav:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
.stories-nav .icon { width: 22px; height: 22px; stroke-width: 2.4; }
.stories-nav.is-next { right: 8px; }
.stories-nav.is-prev { left: 8px; }
.stories-nav.is-prev .icon { transform: rotate(180deg); }
.stories-nav[hidden] { display: none; }
.story { scroll-snap-align: start; }
.story { position: relative; height: 210px; border-radius: var(--r-card); overflow: hidden; background: var(--paper); box-shadow: var(--card-shadow); display: flex; flex-direction: column; color: var(--ink); text-decoration: none; transition: box-shadow .2s ease; }
.story:hover { box-shadow: var(--lift-shadow); color: var(--ink); }
.story-art { flex: 1 1 auto; min-height: 0; background: #fff; display: grid; place-items: center; overflow: hidden; }
.story-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transition: transform .35s ease; }
.story:hover .story-art img { transform: scale(1.06); }
.story-glyph .desk-glyph { width: 56px; height: 56px; }
.story-bar { position: absolute; left: 10px; right: 10px; top: 10px; height: 3px; border-radius: 4px; background: rgba(15, 20, 25, .12); }
.story-bar i { display: block; height: 3px; border-radius: 4px; background: var(--ink); }
.story .chip-time { position: absolute; left: 10px; top: 20px; }
.story-text { padding: 10px 12px 12px; display: grid; gap: 4px; border-top: 1px solid var(--line); }
.story-title { font: 700 13.5px/1.25 var(--f-ui); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story-odds { font: 500 11.5px var(--f-ledger); color: var(--ink-2); font-stretch: 90%; }
.story-odds .faz { color: var(--seal); font-weight: 600; }
.story-new { align-items: stretch; }
.story-me { flex: 1; display: grid; place-items: center; background: #2b3a55; color: #fff; }
.story-me .icon { width: 40px; height: 40px; opacity: .7; }
.story-me-av { width: 100%; height: 100%; display: grid; place-items: center; font: 800 34px var(--f-ui); color: #fff; object-fit: cover; border-radius: 0; }
.story-plus { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--seal); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 4px var(--paper); }
.story-plus .icon { width: 18px; height: 18px; stroke-width: 2.8; }
.story-new-label { height: 52px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; font: 700 13.5px var(--f-ui); }
.chip-time { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 11.5px var(--f-ledger); font-stretch: 90%; white-space: nowrap; box-shadow: 0 0 0 1px var(--line); }
.chip-time.hot { background: var(--seal); color: #fff; box-shadow: none; }
@media (max-width: 900px) {
  .stories { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 12px; gap: 8px; scrollbar-width: none; }
  .stories-nav { display: none !important; }
  .stories::-webkit-scrollbar { display: none; }
  .story { flex: 0 0 112px; height: 184px; scroll-snap-align: start; }
}

/* Feed tabs */
.feed-tabs { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.segs { display: flex; gap: 4px; flex-wrap: wrap; }
.seg { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); font: 600 14.5px var(--f-ui); text-decoration: none; transition: background .15s ease, color .15s ease; }
.seg:hover { background: var(--rule); color: var(--ink); }
.seg[aria-current="page"] { background: var(--ink); color: var(--paper); }
.live-count { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px var(--f-ledger); color: var(--ink-2); font-stretch: 90%; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--seal); animation: fz-pulse 1.8s ease-in-out infinite; }
@keyframes fz-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(215, 48, 31, .45); } 50% { box-shadow: 0 0 0 5px rgba(215, 48, 31, 0); } }
@media (max-width: 900px) {
  .feed-tabs { padding: 4px 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .feed-tabs::-webkit-scrollbar { display: none; }
  .segs { flex-wrap: nowrap; }
  .seg { white-space: nowrap; }
  .live-count { display: none; }
  .composer .ask-hint { display: none; }
  .composer { padding: 12px; }
  .fig-num { font-size: 48px; }
  .post-claim { padding: 14px; }
  .post-claim-title { font-size: 20px; }
}

/* ---------- Posts ---------- */
.feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.post { background: var(--paper); border-radius: var(--r-card); box-shadow: var(--card-shadow); overflow: hidden; }
@media (max-width: 900px) { .feed { gap: 8px; } .post, .card { border-radius: 0; } }
.post-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 0; }
.post-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 14.5px var(--f-ui); object-fit: cover; }
.post-avatar .icon { width: 21px; height: 21px; stroke-width: 2.2; }
.av-faz { background: var(--seal); }
.av-ink { background: var(--ink); color: var(--paper); }
.av-desk { background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.av-desk .desk-glyph { width: 24px; height: 24px; }
.post-who { flex: 1; min-width: 0; }
.post-line { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; color: var(--ink-2); line-height: 1.35; }
.post-name { color: var(--ink); font-weight: 700; text-decoration: none; }
a.post-name:hover { text-decoration: underline; color: var(--ink); }
.verified { display: inline-grid; color: var(--seal); }
.verified .icon { width: 16px; height: 16px; fill: var(--seal); stroke: #fff; stroke-width: 2.6; }
.chip-move { font: 600 11.5px var(--f-ledger); color: var(--seal); background: var(--seal-wash); padding: 2px 7px; border-radius: 999px; font-stretch: 90%; }
.side-badge { font: 700 11.5px var(--f-ui); letter-spacing: .05em; color: var(--ink); padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.post-meta { margin: 2px 0 0; font: 500 11.5px var(--f-ledger); color: var(--ink-2); font-stretch: 90%; }
.post-meta a { color: inherit; text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }
.post-why { color: var(--seal); }
.post-body { padding: 10px 16px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.post-body > * { min-width: 0; }
/* Tables and charts inside an answer (App\Support\AnswerChart): quiet rules, figures in the ledger type. */
.prose .prose-table { margin: 1em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; }
.prose-table table { width: 100%; border-collapse: collapse; font: 400 14.5px/1.4 var(--f-ui); }
.prose-table caption { caption-side: top; text-align: left; padding: 10px 14px 8px; font: 600 13px/1.35 var(--f-ui); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.prose-table th { padding: 9px 14px; text-align: left; font: 500 10.5px/1.3 var(--f-ledger); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--well); white-space: nowrap; }
.prose-table td { padding: 9px 14px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.prose-table tbody tr:hover td { background: color-mix(in srgb, var(--well) 60%, transparent); }
.prose-table .is-right { text-align: right; font-variant-numeric: tabular-nums; }
.prose-table .is-center { text-align: center; }
.prose .prose-chart { margin: 1.1em 0; padding: 14px 16px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.prose-chart figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; font-family: var(--f-ui); }
.prose-chart-title { font-weight: 650; font-size: 15px; line-height: 1.35; color: var(--ink); }
.prose-chart-unit { font: 500 10.5px/1 var(--f-ledger); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 3px 6px; border-radius: 5px; background: var(--well); }
.prose-chart-source { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.prose-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.prose-chart-svg text { font-family: var(--f-ui); font-size: 13px; fill: var(--ink-2); }
.prose-chart-svg .pc-axis { font-family: var(--f-ledger); font-size: 11px; fill: var(--ink-3); }
.prose-chart-svg .pc-value { font-family: var(--f-ledger); font-size: 12px; font-weight: 600; fill: var(--ink); }
.prose-chart-svg .pc-bar { fill: var(--ink); opacity: .82; }
.prose-chart-svg .pc-bar:last-of-type { fill: var(--seal); opacity: 1; }
.prose-chart-svg .pc-zero { stroke: var(--ink-3); stroke-width: 1; }
.prose-chart-svg .pc-grid { stroke: var(--line); stroke-width: 1; }
.prose-chart-svg .pc-line { fill: none; stroke: var(--seal); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.prose-chart-svg .pc-dot { fill: var(--paper); stroke: var(--seal); stroke-width: 2; }
.prose-chart-svg .pc-dot.is-last { fill: var(--seal); }
.post-text { margin: 0; font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.post-text.muted { color: var(--ink-2); font-size: 14.5px; }
.post-text.muted b { color: var(--ink); }
.post-thesis { margin: 0; font: 700 18px/1.35 var(--f-head); letter-spacing: -.005em; }
.post-thesis a { color: var(--ink); text-decoration: none; }
.post-thesis a:hover { text-decoration: underline; }
.post-quote { margin: 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--rule); font-size: 16.5px; line-height: 1.55; }
.post-context { display: flex; gap: 8px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.post-context:hover { box-shadow: inset 0 0 0 1px var(--rule), var(--lift-shadow); color: var(--ink); }

/* The claim inside a post */
.post-claim { min-width: 0; border-radius: var(--r-well); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.post-claim-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.post-claim-top .ledger { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-claim-title { margin: 0; font: 800 22px/1.18 var(--f-head); letter-spacing: -.015em; text-wrap: balance; }
.post-claim-title a { color: var(--ink); text-decoration: none; }
.post-claim-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post-figures { display: flex; align-items: flex-end; gap: 12px 28px; flex-wrap: wrap; }
.fig { display: grid; gap: 2px; }
.fig-label { font: 600 12.5px var(--f-ui); color: var(--ink-2); }
.fig.faz, .fig.faz .fig-label { color: var(--seal); }
.fig-delta { font: 600 11.5px var(--f-ledger); }
.fig-num { font-size: 56px; line-height: .88; letter-spacing: -.01em; font-variation-settings: "wdth" 100, "wght" 600; }
.fig-num small { font-size: .38em; font-variation-settings: "wdth" 100, "wght" 500; margin-left: .04em; }
.fig-num .none { font-size: .5em; color: var(--ink-3); font-variation-settings: "wght" 400; }
.fig-spark { margin-left: auto; justify-items: end; }
.spark { font-family: var(--f-chart); font-size: 40px; line-height: 1.05; color: var(--seal); font-variation-settings: "wdth" 80, "wght" 500; white-space: nowrap; }
.post-seam { position: relative; height: 8px; border-radius: 999px; background: repeating-linear-gradient(135deg, var(--rule) 0 2px, var(--wash) 2px 5px); }
.post-seam-yes { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px 0 0 999px; background: var(--ink); }
.post-seam-pin { position: absolute; top: -5px; width: 4px; height: 18px; margin-left: -2px; border-radius: 4px; background: var(--seal); box-shadow: 0 0 0 2px var(--well); }
.post-pending { margin: 0; }
.post-vote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vote { height: 46px; padding: 0 18px; border-radius: 999px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font: 700 15.5px var(--f-ui); text-decoration: none; transition: background .15s ease, color .15s ease, transform .12s ease; }
.vote small { font: 600 12.5px var(--f-ledger); opacity: .7; }
.vote:hover { background: var(--ink); color: var(--paper); }
.vote:active { transform: scale(.98); }
.post-mine { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; }
.post-mine b { font-weight: 700; }
.post-mine-tick { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; flex: none; }
.post-mine-tick .icon { width: 17px; height: 17px; }
.post-mine-edit { margin-left: auto; font-weight: 600; color: var(--ink-2); }
.post-mine:hover .post-mine-edit { color: var(--seal); }

/* Sealed */
.post-sealed { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.post-sealed-text { display: grid; gap: 6px; min-width: 0; }
.post-sealed .post-claim-title { font-size: 20px; }
.post-sealed .stamp { font-size: 15.5px; padding: 7px 12px; transform: rotate(-6deg); }
.post-sealed .stamp small { font-size: 11.5px; }
.post-verdict { margin: 12px 16px 0; padding: 12px 14px; border-radius: 12px; background: var(--well); font-weight: 600; }
.post-verdict.won { background: var(--seal-wash); color: var(--seal); }
.post-verdict a { margin-left: 6px; font-weight: 600; color: inherit; }

/* Social line and actions */
.post-social { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.post-social b { color: var(--ink); font-weight: 600; }
.post-social b.hot { color: var(--seal); font-weight: 700; }
.post-social-text { flex: 1; min-width: 0; }
.post-social-end { white-space: nowrap; }
.stack { display: flex; }
.stack-av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 11.5px var(--f-ui); object-fit: cover; box-shadow: 0 0 0 2px var(--paper); }
.stack-av + .stack-av { margin-left: -6px; }
.post-actions { display: flex; gap: 4px; margin: 0 10px; padding: 4px 0 6px; border-top: 1px solid var(--line); }
.post-actions form { flex: 1; display: flex; }
.act { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 600 14.5px var(--f-ui); text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease; }
.act:hover { background: var(--wash); color: var(--ink); }
.act .icon { width: 18px; height: 18px; }
.act small { font: 500 11.5px var(--f-ledger); }
.act.on, .act.on:hover { color: var(--seal); }
.act.on .icon { fill: currentColor; }
.feed-more { display: flex; justify-content: center; margin: 4px 0 0; }
.empty-card { padding: 28px 24px; display: grid; justify-items: start; gap: 10px; }
.empty-card h2 { margin: 0; font: 800 22px var(--f-head); }
.empty-card p { margin: 0; color: var(--ink-2); }

/* ---------- Right rail ---------- */
.rail-card { padding: 16px; display: grid; gap: 10px; }
.rail-head { display: flex; align-items: center; gap: 10px; }
.rail-head h2 { margin: 0; flex: 1; font: 800 16.5px var(--f-head); }
.rail-head a { font: 600 11.5px var(--f-ledger); color: var(--ink-2); text-decoration: none; }
.rail-head a:hover { color: var(--seal); }
.rail-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--seal); color: #fff; }
.rail-ic .icon { width: 17px; height: 17px; }
.rail-stats { display: flex; gap: 22px; }
.rail-stats div { display: grid; }
.rail-stats .num { font-size: 34px; line-height: 1; font-variation-settings: "wdth" 88, "wght" 720; }
.rail-stats span { font-size: 12.5px; color: var(--ink-2); }
.rail-note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.person-row, .gap-row { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.person-row:hover, .gap-row:hover { background: var(--wash); color: var(--ink); }
.person-row.is-me { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-top: 12px; margin-top: 2px; }
.rank { width: 16px; font: 600 11.5px var(--f-ledger); color: var(--ink-2); text-align: center; flex: none; }
.person-row:first-of-type .rank { color: var(--seal); }
.person-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 12.5px var(--f-ui); object-fit: cover; flex: none; }
.gap-row .nav-two { flex: 1; font-size: 14.5px; }
.gap-pill { font: 700 12.5px var(--f-ledger); padding: 3px 8px; border-radius: 999px; background: var(--wash); color: var(--ink); }
.gap-pill.hot { background: var(--seal); color: #fff; }
.rail-links { padding: 0 6px; font-size: 12.5px; line-height: 1.8; color: var(--ink-2); }
.rail-links a { color: inherit; text-decoration: none; }
.rail-links a:hover { text-decoration: underline; }

/* Site footer on the grey ground */
.site-footer { background: transparent; border-top: 1px solid var(--line); margin-top: 48px; }
.footer-brand .wordmark { font-family: var(--f-ui); font-weight: 800; letter-spacing: -.03em; }

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .story-art img, .story, .vote, .act, .btn-cta, .seg, .nav-row { transition: none; }
}

/* Dark theme: graphite-on-paper story art becomes chalk-on-slate; hue-rotate keeps the red accent red. */
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .story-art { background: var(--paper); } :root[data-theme="auto"] .story-art img { filter: invert(1) hue-rotate(180deg); opacity: .9; } }
:root[data-theme="dark"] .story-art { background: var(--paper); }
:root[data-theme="dark"] .story-art img { filter: invert(1) hue-rotate(180deg); opacity: .9; }

/* ---------- Pages: the same cards and rail as the wall, tuned per page ---------- */
/* Two-column pages (claim, question): content column + the live rail, centred like the wall. */
.page { max-width: 1040px; padding: 20px 16px 72px; grid-template-columns: minmax(0, 680px) 320px; justify-content: center; gap: 28px; }
.page-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.page-main > section, .page-main > article.claim { margin-top: 0; }
.page-main > article.claim,
.page-main > section.call,
.page-main > section.reading,
.page-main > section.takes,
.page-main > section.polls,
.page-main > section.questions-sec { background: var(--paper); border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 22px 24px 24px; scroll-margin-top: 76px; }
.page-main .section-head { margin-top: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.page-main .section-head h2 { font: 800 18px/1.2 var(--f-head); letter-spacing: -.01em; }
.page-main .btn { border-radius: 999px; border-width: 1px; border-color: var(--rule); height: 36px; padding: 0 14px; font-weight: 700; }
.page-main .btn:hover:not([aria-disabled="true"]) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.page-main .btn-solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Claim hero */
.claim-ledger { gap: 6px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.claim-title { margin: 16px 0 10px; font: 800 clamp(28px, 1.1rem + 2.2vw, 42px)/1.06 var(--f-head); letter-spacing: -.025em; max-width: 22ch; }
.criteria { font-family: var(--f-read); font-size: 16.5px; line-height: 1.55; }
.scoreboard { margin-top: 22px; }
.score-num { font-family: var(--f-num); font-weight: 600; font-size: clamp(64px, 3rem + 3.4vw, 96px); }
.score-num sup { font-family: var(--f-num); font-variation-settings: "wdth" 100, "wght" 500; }
.page-main > section.call { grid-template-columns: minmax(0, 1fr) 240px; }
.call .side-choice > span { background: var(--well); border-radius: 12px; }
.call .side-choice input:checked + span { background: var(--ink); }

/* Questions on a claim */
.questions-sec .questions { margin-top: 4px; }
.questions-sec .q-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.questions-sec .q-item:last-child { border-bottom: 0; padding-bottom: 0; }
.questions-sec .q-title { font: 700 17px/1.3 var(--f-head); }
.questions-sec .q-top { padding: 10px 12px; border-radius: 12px; background: var(--well); }

/* The rail on two-column pages */
.page .right { top: 76px; gap: 14px; }
.right > .oracle-card, .right > .side-list, .right > details.watch { background: var(--paper); border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 16px 18px 18px; }
.right > .oracle-card { border-top: 0; position: relative; overflow: hidden; }
.right > .oracle-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--seal); }
.oracle-card h2 { font: 800 16.5px var(--f-head); }
.oracle-card p { font-family: var(--f-read); font-size: 14.5px; }
.oracle-figure strong { font-family: var(--f-num); font-variation-settings: "wdth" 120, "wght" 700; }
.side-list h2.ledger { margin-bottom: 6px; }
.side-list li { border-bottom: 1px solid var(--line); }
/* Faz's ruling on each related claim as an icon: the words do not fit the rail's narrow column. */
.side-list li:has(.side-mark) { grid-template-columns: minmax(0, 1fr) 24px; }
.side-mark { display: inline-flex; justify-content: flex-end; color: var(--ink-3); }
.side-mark .icon { width: 21px; height: 21px; stroke-width: 2.1; }
.side-mark.is-likely { color: var(--ok); }
.side-mark.is-unlikely { color: var(--seal); }
.side-list li:last-child { border-bottom: 0; }
.right > details.watch summary { font-weight: 700; }

/* Question page */
.claim-context { display: grid; gap: 6px; padding: 14px 16px; color: var(--ink); text-decoration: none; transition: box-shadow .2s ease; }
.claim-context:hover { box-shadow: var(--lift-shadow); color: var(--ink); }
.claim-context-title { font: 700 16.5px/1.3 var(--f-head); }
.claim-context-figs { display: flex; align-items: flex-end; gap: 18px; margin-top: 2px; }
.fig-num.sm { font-size: 30px; line-height: .9; }
.post-seam.grow { flex: 1; align-self: center; height: 6px; min-width: 60px; }
.claim-context-go { display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px var(--f-ui); color: var(--ink-2); }
.claim-context-go .icon { width: 14px; height: 14px; }
.claim-context:hover .claim-context-go { color: var(--seal); }
.question-card { overflow: hidden; }
.question-title { margin: 2px 0 0; font: 800 clamp(24px, 1rem + 1.6vw, 32px)/1.15 var(--f-head); letter-spacing: -.02em; text-wrap: balance; }
.question-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 16px 0; padding: 12px 0 14px; border-top: 1px solid var(--line); }
.question-split { display: flex; align-items: center; gap: 10px; }
.question-split .mini-seam { width: 120px; }
.question-actions { display: flex; align-items: center; gap: 8px; }
.question-actions .act { flex: none; padding: 0 12px; }
.feed-count { margin: 0 8px 0 4px; font: 800 18px var(--f-head); }

/* Answers as posts */
.answer-post .post-thesis { font-size: 20px; }
.answer-post .prose { font-family: var(--f-read); font-size: 16.5px; line-height: 1.6; max-width: none; }
.answer-post .prose a[href^="#a"] { color: var(--seal); font-weight: 700; text-decoration: none; }
.side-badge.side-yes { background: var(--ink); color: var(--paper); box-shadow: none; }
.steel-well { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--well); box-shadow: inset 3px 0 0 var(--ink); }
.steel-well .prose { font-size: 15.5px; color: var(--ink-2); }
.post .refs { padding: 0; border-top: 0; gap: 8px; }
.post .ref { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; scroll-margin-top: 90px; }
.post .ref:target { box-shadow: inset 0 0 0 2px var(--seal); }
.post .ref a { color: var(--ink); }
.post .ref q { font-family: var(--f-read); font-size: 13.5px; }
.post .grade { font: 600 11.5px var(--f-ledger); padding: 1px 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--ink-3); margin-left: 4px; }
.flag-chip { font: 600 11.5px var(--f-ledger); color: var(--seal); }
.review-summary { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.act-strong { color: var(--ink); }
.act-strong:hover { background: var(--ink); color: var(--paper); }
.act.is-static { cursor: default; color: var(--ink-2); }
.act.is-static:hover { background: none; }
.post-withdrawn { padding: 16px; color: var(--ink-2); font-style: italic; }
.post-menu { position: relative; align-self: flex-start; }
.post-menu summary { list-style: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; }
.post-menu summary::-webkit-details-marker { display: none; }
.post-menu summary:hover { background: var(--wash); color: var(--ink); }
.post-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 200px; padding: 6px; display: grid; background: var(--paper); border-radius: 12px; box-shadow: var(--lift-shadow); }
.post-menu-pop a, .post-menu-pop button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 14.5px var(--f-ui); text-align: left; text-decoration: none; cursor: pointer; }
.post-menu-pop a:hover, .post-menu-pop button:hover { background: var(--wash); }
.post-menu-link { font: 600 12.5px var(--f-ui); color: var(--ink-2); }
.post-tools { display: flex; gap: 6px 16px; flex-wrap: wrap; padding: 0 16px 10px; }
.post-tools .tool summary { font-size: 12.5px; color: var(--ink-2); }
.post-tools .tool[open] { flex-basis: 100%; }

/* Rebuttals: a reply thread joined by a line, like Threads */
.thread { margin: 0 16px 16px; padding-top: 6px; display: grid; gap: 14px; border-top: 1px solid var(--line); }
.reply { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding-top: 10px; }
.reply::before { content: ""; position: absolute; left: 15px; top: 46px; bottom: -8px; width: 2px; background: var(--rule); border-radius: 4px; }
.reply:last-child::before { display: none; }
.reply-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 12.5px var(--f-ui); object-fit: cover; }
.reply-main { min-width: 0; display: grid; gap: 6px; }
.reply-quote { margin: 2px 0; padding: 8px 12px; border-radius: 10px; background: var(--well); color: var(--ink-2); font-style: italic; font-size: 14.5px; }
.reply-thesis { margin: 0; font: 700 16.5px/1.35 var(--f-head); }
.reply .prose { font-family: var(--f-read); font-size: 15.5px; line-height: 1.6; }

/* One-column pages (ledger, records, profile, account, forms, text pages): one card on the ground */
main.page.single { max-width: 980px; margin: 20px auto 0; padding: 28px 32px 40px; background: var(--paper); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
main.page.single .ask-box { background: var(--well); box-shadow: none; border: 0; border-radius: var(--r-well); }
main.page.single .section-head { border-bottom-color: var(--line); }

@media (max-width: 900px) {
  .page { padding: 8px 0 40px; gap: 8px; grid-template-columns: minmax(0, 1fr); }
  .page .right { position: static; padding: 0; }
  .page-main { gap: 8px; }
  .page-main > article.claim, .page-main > section.call, .page-main > section.reading, .page-main > section.takes, .page-main > section.polls, .page-main > section.questions-sec,
  .right > .oracle-card, .right > .side-list, .right > details.watch, .claim-context { border-radius: 0; padding-left: 16px; padding-right: 16px; }
  .question-card { border-radius: 0; }
  .page-main > section.call { grid-template-columns: minmax(0, 1fr); }
  main.page.single { margin-top: 8px; padding: 22px 16px 32px; border-radius: 0; }
  .thread { margin: 0 12px 14px; }
}

/* Form controls everywhere: soft, rounded, on wells */
main input[type="text"], main input[type="url"], main input[type="email"], main input[type="search"], main input[type="number"], main input[type="date"], main textarea, main select { border-radius: 12px; border: 1px solid var(--rule); background: var(--paper); }
main input[type="text"]:focus, main input[type="url"]:focus, main input[type="email"]:focus, main textarea:focus, main select:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px var(--wash); }
.side-choice > span { border-radius: 12px; }
main .ask-input { border: 0; border-radius: 999px; }

/* Leaderboard: people, not rows */
.lb { border-top: 0; }
.lb li { grid-template-columns: 32px 40px minmax(0, 1fr) auto; align-items: center; padding: 10px 8px; margin: 0 -8px; border-bottom: 1px solid var(--line); border-radius: 12px; }
.lb li:hover { background: var(--well); }
.lb li:nth-child(1) .lb-rank { color: var(--seal); font-weight: 600; }
.lb-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 14.5px var(--f-ui); object-fit: cover; }
.lb-value { font-family: var(--f-num); font-variation-settings: "wdth" 90, "wght" 700; }
.lb-tabs { border-bottom-color: var(--line); }

/* ---------- One shell for the wall and the detail pages (Reddit-style) ----------
   Thin left rail, wide centre, thin right rail; the same widths everywhere. Both rails are sticky and never taller
   than the screen: what does not fit scrolls inside the rail, not the page. */
.wall, .page { max-width: 1360px; margin: 0 auto; padding: 20px 16px 72px; display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; justify-content: center; gap: 24px; align-items: start; }
.page-main, .wall-main { min-width: 0; }
.rail { position: sticky; top: 72px; max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain;
  display: grid; align-content: start; gap: 2px; margin: -4px; padding: 4px 4px 16px;
  scrollbar-width: thin; scrollbar-color: transparent transparent; }
.rail:hover, .rail:focus-within { scrollbar-color: var(--rule) transparent; }
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.rail:hover::-webkit-scrollbar-thumb { background: var(--rule); }
.rail-right { gap: 14px; }
.rail-left .rail-links { margin-top: 14px; padding: 0 10px; }
.page .right { top: 72px; position: sticky; }
.page-main.is-card { background: var(--paper); border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 24px 28px 32px; }
.page-main.is-card > h1:first-child { margin-top: 0; }

@media (max-width: 1200px) {
  .wall, .page { grid-template-columns: minmax(0, 1fr) 300px; max-width: 1040px; }
  .rail-left { display: none; }
}
@media (max-width: 900px) {
  .wall, .page { grid-template-columns: minmax(0, 1fr); padding: 8px 0 40px; gap: 8px; }
  .wall .rail-right { display: none; }
  .page .rail-right { position: static; max-height: none; overflow: visible; margin: 0; padding: 0; gap: 8px; }
  .page-main.is-card { border-radius: 0; padding: 20px 16px 28px; }
}

/* ---------- Rails that fit the screen (no inner scrolling) ----------
   Budget: a 720px-tall screen leaves ~630px under the bar. Rows are 34px, cards are compact, and the long material
   (Faz's evidence, the watch form) lives in the page column. On screens too short even for that, the rails stop
   being sticky and flow with the page, so nothing is ever cut off. */
.rail { max-height: none; overflow: visible; margin: 0; padding: 0; scrollbar-width: auto; }
.rail-left { gap: 0; }
.rail-nav { display: grid; gap: 1px; }
.rail-row { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 10px; border-radius: 10px; color: var(--ink); font: 500 14.5px var(--f-ui); text-decoration: none; transition: background .15s ease; }
.rail-row:hover { background: rgba(15, 20, 25, .05); color: var(--ink); }
:root[data-theme="dark"] .rail-row:hover { background: rgba(255, 255, 255, .06); }
.rail-row .icon { width: 19px; height: 19px; color: var(--ink-2); }
.rail-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-row small { font: 500 11.5px var(--f-ledger); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rail-row[aria-current="page"] { background: var(--paper); box-shadow: var(--card-shadow); font-weight: 700; }
.rail-row[aria-current="page"] .icon { color: var(--seal); }
.rail-row[aria-current="true"] { font-weight: 700; }
.rail-row.is-faz .icon { color: var(--seal); }
.rail-row.desk { height: 32px; }
.rail-row.desk .desk-glyph { width: 20px; height: 20px; flex: none; }
.rail-row .followed { width: 6px; height: 6px; border-radius: 50%; background: var(--seal); flex: none; }
.rail-row.more span { color: var(--ink-2); font-size: 13.5px; }
.rail-left .rail-title { margin: 14px 10px 4px; }
.rail-left .rail-links { margin: 12px 0 0; padding: 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.rail-left .rail-links a { color: inherit; text-decoration: none; }
.rail-left .rail-links a:hover { text-decoration: underline; }
.join-mini { display: grid; gap: 10px; padding: 14px; margin-bottom: 10px; background: var(--paper); border-radius: 12px; box-shadow: var(--card-shadow); }
.join-mini p { margin: 0; font: 600 14.5px/1.4 var(--f-ui); }
.join-mini .btn-cta { height: 36px; font-size: 14.5px; }

/* Compact right rail */
.rail-right { gap: 12px; }
.rail-right .rail-card { padding: 14px 16px; gap: 8px; }
.rail-head h2 { font-size: 15.5px; }
.rail-meta { font: 500 11.5px/1.35 var(--f-ledger); color: var(--ink-2); font-stretch: 90%; }
.rail-head .rail-meta { margin-left: auto; }
.rail-ic { width: 26px; height: 26px; }
.rail-ic .icon { width: 15px; height: 15px; }
.rail-stats .num { font-size: 28px; }
.rail-note { font-size: 12.5px; }
.person-row, .gap-row { padding: 6px 8px; }
.person-av { width: 30px; height: 30px; font-size: 11.5px; }
.gap-row .nav-two { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gap-row .nav-two small { display: none; }
.rail-more { font: 600 13.5px var(--f-ui); color: var(--seal); text-decoration: none; }
.rail-more:hover { text-decoration: underline; color: var(--seal); }
.faz-mini { position: relative; overflow: hidden; }
.faz-mini::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--seal); }
.faz-mini-fig { display: flex; align-items: center; gap: 10px; }
.faz-mini-fig .num { font-size: 46px; line-height: .9; color: var(--seal); }
.faz-mini-fig .num small { font-size: .4em; font-variation-settings: "wdth" 100, "wght" 500; }
.faz-mini-fig .spark { margin-left: auto; font-size: 30px; }
.faz-mini-text { margin: 0; font: 400 13.5px/1.5 var(--f-read); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rail-right .side-list { padding: 14px 16px; }
.rail-right .side-list li { padding-block: 8px; grid-template-columns: minmax(0, 1fr) 40px; }
.rail-right .side-list a { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* The full Faz reading and the watch panel, now in the page column */
.page-main > section.oracle-sec, .page-main > details.watch { background: var(--paper); border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 20px 24px 22px; scroll-margin-top: 76px; }
.page-main > section.oracle-sec .oracle-card { border-top: 0; padding-top: 0; }
.page-main > details.watch summary { font-weight: 700; cursor: pointer; }

/* Shorter screens: tighten first, then let the rails flow with the page */
@media (max-height: 820px) {
  .rail-left .rail-links { display: none; }
  .rail-row { height: 32px; }
  .rail-row.desk { height: 30px; }
  .faz-mini-text { -webkit-line-clamp: 3; }
}
@media (max-height: 680px) { .rail { position: static; } }

@media (max-width: 900px) {
  .page-main > section.oracle-sec, .page-main > details.watch { border-radius: 0; padding-left: 16px; padding-right: 16px; }
}

/* ---------- Wordmark: Quora-style, a red serif name ---------- */
.brand-word { flex: none; font: 700 28px/1 "Source Serif 4", Georgia, "Times New Roman", serif; letter-spacing: -.02em; color: var(--seal); text-decoration: none; padding: 0 4px 2px; }
.brand-word:hover { color: var(--seal-hover); }
@media (max-width: 900px) { .brand-word { font-size: 26px; } }
.footer-brand .wordmark { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.02em; }

/* ---------- App bar on the page grid ----------
   Wide screens: wordmark over the left rail, search across the content column, actions over the right rail.
   Tablet (no left rail): wordmark, search and the icon tabs share the middle. Phone: wordmark and actions. */
.bar-inner { max-width: 1360px; margin: 0 auto; height: 56px; padding: 0 16px; display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 24px; align-items: center; }
.bar-start { display: flex; align-items: center; min-width: 0; padding-left: 6px; }
.bar-mid { display: flex; align-items: center; gap: 12px; min-width: 0; height: 56px; }
.bar .bar-mid .search { flex: 1 1 auto; max-width: none; }
.bar-mid .bar-tabs { display: none; }
.bar-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.bar .icon-btn[aria-current="page"] { background: var(--seal-wash); color: var(--seal); }

@media (max-width: 1200px) {
  .bar-inner { grid-template-columns: auto minmax(0, 1fr) auto; max-width: 1040px; }
  .bar-mid .bar-tabs { display: flex; flex: none; height: 56px; }
  .bar-mid .bar-tabs a { width: 52px; }
  .bar-mid .bar-tabs a[aria-current="page"]::after { left: 8px; right: 8px; }
}
@media (max-width: 900px) {
  .bar-inner { grid-template-columns: minmax(0, 1fr) auto; height: 54px; padding: 0 12px; gap: 8px; }
  .bar-mid { display: none; }
}

/* ---------- One-column pages inside the shared shell ---------- */
.shell { max-width: 1360px; margin: 0 auto; padding: 20px 16px 72px; display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; justify-content: center; gap: 24px; align-items: start; }
.shell-main { min-width: 0; display: grid; gap: 14px; align-content: start; }
.shell-main > main.page.single { max-width: none; margin: 0; }
.shell-main > main.page.single .doc { max-width: none; }
@media (max-width: 1200px) {
  .shell { grid-template-columns: minmax(0, 1fr) 300px; max-width: 1040px; }
  .shell .rail-left { display: none; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding: 8px 0 40px; gap: 8px; }
  .shell .rail-right { display: none; }
  .shell-main > main.page.single { margin: 0; }
}

/* ---------- Left rail: folding, accordion sections, the agenda ----------
   Budget (open, member, 720px screen): fold 34 + 7 rows + 3 section heads + agenda ≈ 560px, under the ~630px
   available. Sections open one at a time, so the rail never needs to scroll. */
.rail-left { gap: 0; }
.rail-left .rail-row { height: 32px; }
.rail-fold { display: flex; align-items: center; gap: 12px; width: 100%; height: 34px; margin-bottom: 4px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 500 13.5px var(--f-ui); cursor: pointer; }
.rail-fold:hover { background: rgba(15, 20, 25, .05); color: var(--ink); }
.rail-fold .icon { width: 19px; height: 19px; }
.rail-fold .when-folded { display: none; }
.rail-icons { display: none; }

.rail-secs { display: grid; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.rail-sec summary { list-style: none; display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 10px; border-radius: 10px; cursor: pointer; color: var(--ink-2); font: 600 11.5px var(--f-ledger); letter-spacing: .08em; text-transform: uppercase; user-select: none; }
.rail-sec summary::-webkit-details-marker { display: none; }
.rail-sec summary:hover { background: rgba(15, 20, 25, .05); color: var(--ink); }
.rail-sec summary .icon { width: 17px; height: 17px; }
.rail-sec summary span { flex: 1; }
.rail-sec summary .chev { width: 16px; height: 16px; transition: transform .2s ease; }
.rail-sec[open] summary .chev { transform: rotate(180deg); }
.rail-sec[open] summary { color: var(--ink); }
.rail-sec[data-sec="agenda"] summary .icon:first-child { color: var(--seal); }
.rail-sec > .rail-nav, .rail-sec > .agenda { padding: 2px 0 8px; }
.rail-row.sm { height: 28px; font-size: 13.5px; color: var(--ink-2); padding-left: 41px; }
.rail-row.desk small { margin-left: 2px; }

/* The agenda: dense like Ekşi Sözlük's left frame, a title and the count of what happened on it */
.agenda-tabs { display: flex; gap: 2px; padding: 0 6px 4px; }
.agenda-tabs button { height: 24px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 600 12.5px var(--f-ui); cursor: pointer; }
.agenda-tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--card-shadow); }
.agenda-tabs button:disabled { opacity: .45; cursor: default; }
.agenda-list { list-style: none; margin: 0; padding: 0; display: grid; }
.agenda-list a { display: flex; align-items: baseline; gap: 8px; height: 28px; padding: 0 10px; border-radius: 8px; color: var(--ink); font: 500 13.5px/28px var(--f-ui); text-decoration: none; }
.agenda-list a:hover { background: rgba(15, 20, 25, .05); color: var(--ink); }
.agenda-list a:hover span { text-decoration: underline; text-underline-offset: 2px; }
.agenda-list a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-list a small { flex: none; font: 500 11.5px var(--f-ledger); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.agenda-list a[aria-current="true"] { font-weight: 700; }
.agenda-list a[aria-current="true"] small { color: var(--seal); }
:root[data-theme="dark"] .rail-fold:hover, :root[data-theme="dark"] .rail-sec summary:hover, :root[data-theme="dark"] .agenda-list a:hover { background: rgba(255, 255, 255, .06); }

@media (max-height: 820px) {
  .rail-left .rail-row { height: 30px; }
  .agenda-list li:nth-child(n+7) { display: none; }
}

/* Folded: an icon strip; the centre column takes the space */
:root[data-rail="folded"] .wall, :root[data-rail="folded"] .page, :root[data-rail="folded"] .shell { grid-template-columns: 72px minmax(0, 1fr) 300px; }
:root[data-rail="folded"] .bar-inner { grid-template-columns: 72px minmax(0, 1fr) 300px; }
:root[data-rail="folded"] .bar-start { overflow: visible; }
:root[data-rail="folded"] .rail-left { justify-items: center; }
:root[data-rail="folded"] .rail-left .rail-label,
:root[data-rail="folded"] .rail-left .rail-secs,
:root[data-rail="folded"] .rail-left .join-mini { display: none; }
:root[data-rail="folded"] .rail-fold { width: 44px; justify-content: center; padding: 0; }
:root[data-rail="folded"] .rail-fold .when-open { display: none; }
:root[data-rail="folded"] .rail-fold .when-folded { display: block; }
:root[data-rail="folded"] .rail-left .rail-nav { justify-items: center; }
:root[data-rail="folded"] .rail-left .rail-row { width: 44px; height: 40px; justify-content: center; padding: 0; }
:root[data-rail="folded"] .rail-left .rail-row .icon { width: 21px; height: 21px; }
:root[data-rail="folded"] .rail-icons { display: grid; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); justify-items: center; }
:root[data-rail="folded"] .rail-icons a { width: 40px; height: 36px; display: grid; place-items: center; border-radius: 10px; }
:root[data-rail="folded"] .rail-icons a:hover { background: rgba(15, 20, 25, .05); }
:root[data-rail="folded"] .rail-icons a[aria-current="true"] { background: var(--paper); box-shadow: var(--card-shadow); }
:root[data-rail="folded"] .rail-icons .desk-glyph { width: 22px; height: 22px; }
@media (max-width: 1200px) {
  :root[data-rail="folded"] .wall, :root[data-rail="folded"] .page, :root[data-rail="folded"] .shell { grid-template-columns: minmax(0, 1fr) 300px; }
  :root[data-rail="folded"] .bar-inner { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 900px) {
  :root[data-rail="folded"] .wall, :root[data-rail="folded"] .page, :root[data-rail="folded"] .shell { grid-template-columns: minmax(0, 1fr); }
  :root[data-rail="folded"] .bar-inner { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (prefers-reduced-motion: reduce) { .rail-sec summary .chev { transition: none; } }

/* Rail fixes: hidden agenda list stays hidden; the rail never grows past its column; folded strip fits 720px */
.agenda-list[hidden] { display: none; }
.rail-left { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.rail-left > *, .rail-sec, .rail-sec > *, .agenda, .agenda-list li { min-width: 0; }
.rail-sec summary { min-width: 0; }
:root[data-rail="folded"] .rail-left .rail-row { height: 36px; }
:root[data-rail="folded"] .rail-icons a { height: 32px; }
:root[data-rail="folded"] .rail-icons { gap: 2px; }

/* ---------- Facebook-style frame ----------
   The left rail hugs the left edge and runs the full height under the bar: it stays put while the page scrolls and
   scrolls on its own if it ever needs to (the scrollbar shows on hover). The right rail hugs the right edge. The
   content column sits centred between them at the same width on every page; the bar follows the same three tracks. */
:root { --rail-l: clamp(248px, 19vw, 320px); --rail-r: clamp(300px, 22vw, 360px); --col: 740px; --bar-h: 56px; }
:root[data-rail="folded"] { --rail-l: 72px; --col: 860px; }

.wall, .page, .shell, :root[data-rail="folded"] .wall, :root[data-rail="folded"] .page, :root[data-rail="folded"] .shell {
  max-width: none; margin: 0; padding: 0; gap: 0; grid-template-columns: var(--rail-l) minmax(0, 1fr) var(--rail-r); justify-content: stretch; }
.wall > .wall-main, .page > .page-main, .shell > .shell-main { justify-self: center; width: 100%; max-width: var(--col); padding: 20px 20px 72px; box-sizing: border-box; }

.rail-left, .page .rail-left, .shell .rail-left {
  position: sticky; top: var(--bar-h); align-self: start; height: calc(100vh - var(--bar-h)); height: calc(100dvh - var(--bar-h));
  overflow-y: auto; overscroll-behavior: contain; padding: 16px 8px 24px; margin: 0; box-sizing: border-box;
  scrollbar-width: thin; scrollbar-color: transparent transparent; }
.rail-left:hover, .rail-left:focus-within { scrollbar-color: var(--rule) transparent; }
.rail-left::-webkit-scrollbar { width: 8px; }
.rail-left::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.rail-left:hover::-webkit-scrollbar-thumb { background: var(--rule); }
.rail-right, .page .rail-right, .shell .rail-right { position: sticky; top: calc(var(--bar-h) + 16px); align-self: start; margin: 16px 16px 0 0; padding: 0; }

/* The bar on the same three tracks */
.bar-inner, :root[data-rail="folded"] .bar-inner { max-width: none; margin: 0; padding: 0; gap: 0; grid-template-columns: var(--rail-l) minmax(0, 1fr) var(--rail-r); }
.bar-start { padding-left: 16px; }
.bar-mid { justify-self: center; width: 100%; max-width: var(--col); padding: 0 20px; box-sizing: border-box; }
.bar-end { padding-right: 16px; }
:root[data-rail="folded"] .bar-start { padding-left: 14px; }

@media (max-width: 1200px) {
  .wall, .page, .shell, :root[data-rail="folded"] .wall, :root[data-rail="folded"] .page, :root[data-rail="folded"] .shell { grid-template-columns: minmax(0, 1fr) var(--rail-r); }
  .bar-inner, :root[data-rail="folded"] .bar-inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .bar-mid { max-width: none; }
}
@media (max-width: 900px) {
  .wall, .page, .shell, :root[data-rail="folded"] .wall, :root[data-rail="folded"] .page, :root[data-rail="folded"] .shell { grid-template-columns: minmax(0, 1fr); }
  .wall > .wall-main, .page > .page-main, .shell > .shell-main { padding: 8px 0 40px; max-width: none; }
  .page .rail-right { position: static; margin: 0; }
  .bar-inner, :root[data-rail="folded"] .bar-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .bar-start { padding-left: 12px; }
  .bar-end { padding-right: 12px; }
}

/* Wide screens: the left rail is fixed like Facebook's, so nothing below (the footer, a short page) ever moves it.
   Its grid track stays as the spacer; the content and the right rail are placed in their own tracks. */
@media (min-width: 1201px) {
  .rail-left, .page .rail-left, .shell .rail-left { position: fixed; left: 0; top: var(--bar-h); bottom: 0; width: var(--rail-l); height: auto; align-self: stretch; z-index: 5; }
  .wall > .wall-main, .page > .page-main, .shell > .shell-main { grid-column: 2; grid-row: 1; }
  .wall > .rail-right, .page > .rail-right, .shell > .rail-right { grid-column: 3; grid-row: 1; }
  body:has(.rail-left) .site-footer { margin-left: var(--rail-l); }
}

/* ---------- Reddit-style content group ----------
   The left rail stays fixed at the left edge (Facebook). To its right, the feed and the right rail sit together as one
   group, centred in the remaining space with a 16px gutter between them (Reddit), so there is no wide gap on either
   side of the feed. Tracks: [left rail] [spacer] [feed] [gutter] [right rail] [spacer]. */
:root { --rail-r: 316px; --gutter: 16px; }
@media (min-width: 1201px) {
  .wall, .page, .shell, :root[data-rail="folded"] .wall, :root[data-rail="folded"] .page, :root[data-rail="folded"] .shell {
    grid-template-columns: var(--rail-l) minmax(0, 1fr) minmax(0, var(--col)) var(--gutter) var(--rail-r) minmax(0, 1fr); }
  .wall > .wall-main, .page > .page-main, .shell > .shell-main { grid-column: 3; grid-row: 1; max-width: none; padding: 20px 0 72px; }
  .wall > .rail-right, .page > .rail-right, .shell > .rail-right { grid-column: 5; grid-row: 1; margin: 20px 0 0; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .wall, .page, .shell, :root[data-rail="folded"] .wall, :root[data-rail="folded"] .page, :root[data-rail="folded"] .shell {
    grid-template-columns: minmax(16px, 1fr) minmax(0, var(--col)) var(--gutter) var(--rail-r) minmax(16px, 1fr); }
  .wall > .wall-main, .page > .page-main, .shell > .shell-main { grid-column: 2; grid-row: 1; max-width: none; padding: 20px 0 72px; }
  .wall > .rail-right, .page > .rail-right, .shell > .rail-right { grid-column: 4; grid-row: 1; margin: 20px 0 0; }
}

/* ---------- App bar: search and the icon tabs in the middle, Reddit-style actions on the right ---------- */
.bar-inner, :root[data-rail="folded"] .bar-inner { grid-template-columns: var(--rail-l) minmax(0, 1fr) auto; }
.bar-mid { justify-self: center; width: auto; max-width: none; display: flex; align-items: center; gap: 16px; padding: 0 16px; }
.bar .bar-mid .search { flex: 0 1 380px; width: 380px; }
.bar-mid .bar-tabs, .bar-mid .bar-tabs { display: flex; height: 56px; gap: 2px; }
.bar-mid .bar-tabs a { width: 64px; }
.bar-end { gap: 6px; }
/* Reddit's "Create": a quiet pill, not a red slab; the red is kept for the guest's Sign in. */
.bar .btn-cta { height: 40px; padding: 0 14px 0 10px; background: transparent; color: var(--ink); box-shadow: none; font-weight: 600; }
.bar .btn-cta:hover { background: var(--wash); color: var(--ink); }
.bar .btn-cta .icon { color: var(--ink); stroke-width: 2.2; width: 20px; height: 20px; }
.bar .btn-ghost { background: var(--seal); color: #fff; box-shadow: none; }
.bar .btn-ghost:hover { background: var(--seal-hover); color: #fff; }
.bar .icon-btn { background: transparent; }
.bar .icon-btn:hover { background: var(--wash); }
.bar .icon-btn .icon { width: 21px; height: 21px; }
.me-avatar { width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--rule); }
.me-menu[open] .me-avatar, .me-menu summary:hover .me-avatar { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--seal); }

@media (max-width: 1200px) {
  .bar-inner, :root[data-rail="folded"] .bar-inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .bar .bar-mid .search { flex-basis: 260px; width: 260px; }
  .bar-mid .bar-tabs a { width: 52px; }
}
@media (max-width: 1020px) {
  .bar .btn-cta span { display: none; }
  .bar .btn-cta { width: 40px; padding: 0; }
}

/* Keep at least 20px between the group and the rail / screen edge on narrower desktops */
@media (min-width: 1201px) {
  .wall, .page, .shell, :root[data-rail="folded"] .wall, :root[data-rail="folded"] .page, :root[data-rail="folded"] .shell {
    grid-template-columns: var(--rail-l) minmax(20px, 1fr) minmax(0, var(--col)) var(--gutter) var(--rail-r) minmax(20px, 1fr); }
}

/* Header: small icon tabs beside the wordmark, search centred, actions right */
.bar-inner, :root[data-rail="folded"] .bar-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; }
.bar-start { gap: 14px; }
.bar-start .bar-tabs { display: flex; align-items: center; gap: 2px; height: auto; }
.bar-start .bar-tabs a { width: 38px; height: 38px; margin: 0; border-radius: 10px; display: grid; place-items: center; color: var(--ink-2); }
.bar-start .bar-tabs a:hover { background: var(--wash); color: var(--ink); }
.bar-start .bar-tabs a .icon { width: 20px; height: 20px; }
.bar-start .bar-tabs a[aria-current="page"] { color: var(--seal); background: var(--seal-wash); margin: 0; border-radius: 10px; }
.bar-start .bar-tabs a[aria-current="page"]::after { display: none; }
.bar-start .bar-tabs a[aria-current="page"] .icon { fill: none; }
.bar-mid { justify-self: center; width: 100%; max-width: 480px; padding: 0; }
.bar .bar-mid .search { flex: 1 1 auto; width: auto; }
@media (max-width: 1200px) { .bar-mid { max-width: 320px; } }
@media (max-width: 900px) { .bar-start .bar-tabs { display: none; } }

/* The left rail keeps one width whichever section is open: room for a scrollbar is always reserved */
.rail-left { scrollbar-gutter: stable; }
.rail-left > * { width: 100%; box-sizing: border-box; }

/* Titles fill their own width: no balanced short lines, no character caps leaving space on the right */
.claim-title, .post-claim-title, .question-title, .post-thesis, .top h1, .story-title { text-wrap: wrap; max-width: none; }
.post-claim-title, .question-title, .claim-title { text-wrap: pretty; }

/* Left rail: no reserved scrollbar lane (it left a gap right of the titles); it still scrolls, Facebook-style, with the bar hidden */
.rail-left { scrollbar-gutter: auto; scrollbar-width: none; }
.rail-left::-webkit-scrollbar { width: 0; height: 0; }

/* The rail chart: Open Hunch and Faz over time */
.odds-legend { margin: 0; display: flex; gap: 14px; font: 600 12.5px var(--f-ui); color: var(--ink-2); }
.odds-legend b { color: var(--ink); font-family: var(--f-num); font-variation-settings: "wdth" 90, "wght" 700; }
.odds-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 4px; margin-right: 6px; vertical-align: middle; }
.lg-crowd i { background: var(--ink); }
.lg-faz i { background: var(--seal); }
.lg-faz b { color: var(--seal); }
.odds-plot { position: relative; padding-right: 26px; }
.odds-svg { display: block; width: 100%; height: 112px; overflow: visible; }
.odds-grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 3; }
.odds-crowd { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.odds-faz { fill: none; stroke: var(--seal); stroke-width: 2.2; stroke-linejoin: round; }
.odds-y { position: absolute; right: 0; transform: translateY(-50%); font: 500 11.5px var(--f-ledger); color: var(--ink-2); }
.odds-axis { display: flex; justify-content: space-between; padding-right: 26px; font: 500 11.5px var(--f-ledger); color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Profile ---------- */
.profile { display: grid; gap: 14px; }
.profile-card { padding: 24px 24px 20px; display: grid; gap: 16px; }
.profile-top { display: flex; align-items: flex-start; gap: 18px; }
.profile-av { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; flex: none; object-fit: cover; color: #fff; font: 800 38px var(--f-ui); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line); }
.profile-id { flex: 1; min-width: 0; display: grid; gap: 2px; }
.profile-name { margin: 0; font: 800 28px/1.15 var(--f-head); letter-spacing: -.02em; }
.profile-handle { margin: 0; font: 500 12.5px var(--f-ledger); color: var(--ink-2); }
.profile-facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-2); font-size: 14.5px; }
.profile-facts li { display: inline-flex; align-items: center; gap: 7px; }
.profile-facts .icon { width: 16px; height: 16px; }
.flag { width: 20px; height: 15px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.profile-edit { flex: none; gap: 6px; height: 36px; padding: 0 14px; background: var(--paper) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--rule) !important; }
.profile-edit:hover { background: var(--wash) !important; }
.profile-edit .icon { width: 16px; height: 16px; }
.profile-bio { margin: 0; font: 400 15.5px/1.6 var(--f-read); white-space: pre-line; }
.profile-bio.muted { color: var(--ink-2); font-size: 14.5px; }
.profile-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.profile-links a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--wash); color: var(--ink); font: 600 13.5px var(--f-ui); text-decoration: none; }
.profile-links a:hover { background: var(--rule); }
.profile-links .icon { width: 14px; height: 14px; }
.profile-stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); padding-top: 14px; }
.profile-stats div { display: grid; gap: 2px; }
.profile-stats div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.profile-stats dt { font: 500 11.5px var(--f-ledger); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.profile-stats dd { margin: 0; font-size: 26px; line-height: 1.1; font-variation-settings: "wdth" 90, "wght" 700; }
.profile-badges { margin: 0; }
.profile-sec { padding: 16px 20px 8px; display: grid; gap: 4px; }
.profile-sec .rail-head .icon { width: 18px; height: 18px; color: var(--ink-2); }
.profile-list { list-style: none; margin: 0; padding: 0; }
.profile-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.profile-list li:first-child { border-top: 0; }
.profile-list a { min-width: 0; color: var(--ink); font-weight: 600; text-decoration: none; }
.profile-list a:hover { text-decoration: underline; }
.profile-call { flex: none; display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px var(--f-ledger); color: var(--ink-2); }
.profile-call .num { font-size: 18px; color: var(--ink); }
.profile-call .pts { font: 700 13.5px var(--f-ledger); }
.profile-call .pts.up { color: var(--seal); }
@media (max-width: 640px) {
  .profile-top { flex-wrap: wrap; }
  .profile-av { width: 76px; height: 76px; font-size: 30px; }
  .profile-edit { order: 3; }
  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
  .profile-stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .profile-list li { flex-direction: column; gap: 4px; }
  .profile-card, .profile-sec { border-radius: 0; }
}

/* Account: the profile form */
.profile-form { display: grid; gap: 16px; max-width: 640px; }
.avatar-field { display: flex; gap: 16px; align-items: flex-start; }
.avatar-preview { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; object-fit: cover; color: #fff; font: 800 28px var(--f-ui); flex: none; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.profile-form .field { display: grid; gap: 6px; min-width: 0; }
.profile-form label { font-weight: 600; font-size: 14.5px; }
.profile-form input[type="text"], .profile-form input[type="url"], .profile-form select, .profile-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; font: 400 15.5px var(--f-ui); }
.profile-form .check { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; }
.links-field { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.links-field legend { font-weight: 700; margin-bottom: 4px; }
@media (max-width: 640px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================================================
   Docked rail (final; supersedes every frame variant above).
   - One-column pages keep their own card: the frame rules below never touch main.page.single.
   - Closed: a 72px icon strip; the content group is centred with equal margins.
   - Open: the rail takes its own 280px column and the content group slides right into the space that is left
     (padding-left animates); the app bar never moves. The choice is remembered.
   ===================================================================================================== */
:root, :root[data-rail], :root[data-rail="open"] { --col: 740px; --strip: 72px; --rail-open: 280px; --edge: 88px; --pad-l: var(--edge); }
:root[data-rail="open"] { --pad-l: calc(var(--rail-open) + 16px); }

/* The single-column card is never a frame */
main.page.single, :root[data-rail] main.page.single, :root[data-rail="open"] main.page.single {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 28px 32px 40px; justify-content: stretch; }

@media (min-width: 1201px) {
  :root .wall, :root .page:not(.single), :root .shell,
  :root[data-rail] .wall, :root[data-rail] .page:not(.single), :root[data-rail] .shell {
    display: grid; max-width: none; margin: 0; gap: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--col)) var(--gutter) var(--rail-r) minmax(0, 1fr);
    padding: 0 var(--edge) 0 var(--pad-l); transition: padding-left .2s ease; }
  :root .wall > .wall-main, :root .page:not(.single) > .page-main, :root .shell > .shell-main { grid-column: 2; grid-row: 1; }
  :root .wall > .rail-right, :root .page:not(.single) > .rail-right, :root .shell > .rail-right { grid-column: 4; grid-row: 1; }

  :root[data-rail="open"] .rail-left { box-shadow: 1px 0 0 var(--line); }
  body:has(.rail-left) .site-footer { padding-left: var(--pad-l); transition: padding-left .2s ease; }
}
@media (max-width: 900px) {
  main.page.single, :root[data-rail] main.page.single, :root[data-rail="open"] main.page.single { padding: 22px 16px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  :root .wall, :root .page, :root .shell, body .site-footer { transition: none !important; }
}
.avatar-field > div { flex: 1; min-width: 0; }
.avatar-field input[type="file"] { width: 100%; max-width: 100%; min-width: 0; }

/* =====================================================================================================
   Full-width frame (final; supersedes every frame variant above).
   The page is as wide as the app bar. The left rail is always open, fixed to the left edge; the feed takes all the
   space between it and the right rail; the right rail's outer edge lines up with the bar's actions (16px in).
   ===================================================================================================== */
:root, :root[data-rail], :root[data-rail="open"] { --rail-w: 272px; --gutter: 24px; --rail-r: 316px; }

@media (min-width: 1201px) {
  :root .wall, :root .page:not(.single), :root .shell,
  :root[data-rail] .wall, :root[data-rail] .page:not(.single), :root[data-rail] .shell {
    display: grid; max-width: none; margin: 0; gap: 0; transition: none;
    grid-template-columns: minmax(0, 1fr) var(--gutter) var(--rail-r);
    padding: 0 16px 0 calc(var(--rail-w) + var(--gutter)); }
  :root .wall > .wall-main, :root .page:not(.single) > .page-main, :root .shell > .shell-main { grid-column: 1; grid-row: 1; max-width: none; }
  :root .wall > .rail-right, :root .page:not(.single) > .rail-right, :root .shell > .rail-right { grid-column: 3; grid-row: 1; }

  .rail-left, .page .rail-left, .shell .rail-left,
  :root[data-rail="open"] .rail-left { width: var(--rail-w); justify-items: stretch; padding: 14px 10px 24px; box-shadow: 1px 0 0 var(--line); transition: none; }
  body:has(.rail-left) .site-footer { padding-left: calc(var(--rail-w) + var(--gutter)); transition: none; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  :root .wall, :root .page:not(.single), :root .shell,
  :root[data-rail] .wall, :root[data-rail] .page:not(.single), :root[data-rail] .shell {
    grid-template-columns: minmax(0, 1fr) var(--gutter) var(--rail-r); padding: 0 16px; gap: 0; }
  :root .wall > .wall-main, :root .page:not(.single) > .page-main, :root .shell > .shell-main { grid-column: 1; grid-row: 1; max-width: none; }
  :root .wall > .rail-right, :root .page:not(.single) > .rail-right, :root .shell > .rail-right { grid-column: 3; grid-row: 1; }
}

/* =====================================================================================================
   Boxed frame, 1280px (final; supersedes every frame variant above).
   The app bar and the page share one centred 1280px box with 16px padding. Inside it: the left rail (always open,
   sticky under the bar, Facebook-style), the feed, and the right rail. The rail's left edge lines up with the
   wordmark, the right rail's right edge with the bar's actions.
   ===================================================================================================== */
:root, :root[data-rail], :root[data-rail="open"] { --site: 1280px; --rail-w: 248px; --gutter: 20px; --rail-r: 300px; }

.bar-inner, :root[data-rail] .bar-inner { max-width: var(--site); margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.bar-start, :root[data-rail="folded"] .bar-start { padding-left: 0; }
.bar-end { padding-right: 0; }

@media (min-width: 1201px) {
  :root .wall, :root .page:not(.single), :root .shell,
  :root[data-rail] .wall, :root[data-rail] .page:not(.single), :root[data-rail] .shell {
    display: grid; max-width: var(--site); margin: 0 auto; padding: 0 16px; box-sizing: border-box; gap: 0 var(--gutter);
    grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--rail-r); }
  :root .wall > .rail-left, :root .page:not(.single) > .rail-left, :root .shell > .rail-left,
  :root[data-rail="open"] .rail-left {
    position: sticky; grid-column: 1; grid-row: 1; top: var(--bar-h); left: auto; bottom: auto; align-self: start;
    width: auto; height: calc(100vh - var(--bar-h)); height: calc(100dvh - var(--bar-h));
    padding: 14px 0 24px; margin: 0; box-shadow: none; background: transparent; z-index: 1; }
  :root .wall > .wall-main, :root .page:not(.single) > .page-main, :root .shell > .shell-main { grid-column: 2; grid-row: 1; max-width: none; padding: 20px 0 72px; }
  :root .wall > .rail-right, :root .page:not(.single) > .rail-right, :root .shell > .rail-right { grid-column: 3; grid-row: 1; margin: 20px 0 0; }
  body:has(.rail-left) .site-footer { padding-left: 0; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  :root .wall, :root .page:not(.single), :root .shell,
  :root[data-rail] .wall, :root[data-rail] .page:not(.single), :root[data-rail] .shell {
    max-width: var(--site); margin: 0 auto; padding: 0 16px; gap: 0 var(--gutter); grid-template-columns: minmax(0, 1fr) var(--rail-r); }
  :root .wall > .wall-main, :root .page:not(.single) > .page-main, :root .shell > .shell-main { grid-column: 1; grid-row: 1; padding: 20px 0 72px; }
  :root .wall > .rail-right, :root .page:not(.single) > .rail-right, :root .shell > .rail-right { grid-column: 2; grid-row: 1; margin: 20px 0 0; }
}
.footer-inner { max-width: var(--site); box-sizing: border-box; padding-left: 16px; padding-right: 16px; }

/* The Fazoh team mark */
.team-badge { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 11.5px/1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; cursor: help; }
.team-badge.lg { height: 22px; padding: 0 9px; font-size: 11.5px; margin-left: 10px; position: relative; top: -3px; }

/* ---------- Refinement (supersedes the notes above where they clash) ----------
   1. A heavier wordmark, set in the display cut of Source Serif 4 (weights up to 900, letters only).
   2. Header icons: thinner strokes, quieter hit areas; the current page sits on light grey, never on red.
   3. Buttons: softly rounded corners (10px) instead of full pills. Tags and badges stay pills.
   4. Cards carry no accent rules: no coloured bar on top, no stripe on the left. Emphasis comes from a tinted
      surface and the type, not from lines. */

.bar-start { gap: 14px; }
.bar-start .bar-tabs { gap: 0; }
.bar-start .bar-tabs a { width: 36px; height: 36px; border-radius: 10px; color: var(--ink-3); }
.bar-start .bar-tabs a .icon { width: 19px; height: 19px; stroke-width: 1.6; }
.bar-start .bar-tabs a:hover { background: var(--wash); color: var(--ink); }
.bar-start .bar-tabs a[aria-current="page"] { background: var(--wash); color: var(--ink); }
.bar-start .bar-tabs a[aria-current="page"] .icon { stroke-width: 1.9; fill: none; }
.bar-end .icon-btn .icon, .bar-end .bell .icon { stroke-width: 1.6; }

:root { --btn-r: 10px; }
.btn, .btn-cta, .btn-ghost, .follow-btn, .ask-form .btn, .page-main .btn, .vote, .feed-cta, .seg { border-radius: var(--btn-r); }
main .ask-input, .ask-input, .bar .search { border-radius: 12px; }

.right > .oracle-card::before, .faz-mini::before { display: none; }
.oracle-card { border-top: 0; padding-top: 0; }
.claim-card, .claim-card-lg, .rules-card, .record-figures, .calls, .lb, .poll-rows, .account-facts, .health,
.notice-list, .horizon, .front-opening, .front-col, .front-soon { border-top: 0; }
.record-figures { border-bottom: 0; }
.record-figures > div + div, .profile-stats div + div, .desk-card:not(:nth-child(4n + 1)), .desk-card:nth-child(2n) { border-left: 0; }
.steel-well { box-shadow: none; }
.steelman, .post-quote, .feed-quote, .mod-target, .agent-card { border-left: 0; padding: 12px 14px; border-radius: 12px; background: var(--well); }
.status-note p, .oracle-note-box, .form-errors { border-left: 0; border-radius: 12px; }
.notice.new a { border-left: 0; padding-left: 0; }
.bar .icon-btn[aria-current="page"] { background: var(--wash); color: var(--ink); }
.bar .icon-btn .icon { stroke-width: 1.6; }

/* Scoreboard: the figures and the countdown wrap instead of colliding. Confidence type makes a figure wider the
   surer it is, and the market figure adds a third, so a fixed grid can run out of room in the content column. */
.scoreboard, .scoreboard.has-markets { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 36px; }
.scoreboard .score { flex: none; min-width: 0; }
.scoreboard .countdown { margin-left: auto; justify-self: auto; }
@media (max-width: 640px) {
  .scoreboard, .scoreboard.has-markets { gap: 14px 24px; }
  .scoreboard .countdown { flex-basis: 100%; margin-left: 0; text-align: left; }
}

/* Profile badges: an even grid, three across on wide screens and two on phones. */
.profile-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
.profile-badges .badge { max-width: none; min-width: 0; }
@media (max-width: 640px) { .profile-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; } }

/* Account: the photo picker, in the site's own words and buttons. */
.field-label { display: block; font: 700 14.5px var(--f-ui); margin-bottom: 8px; }
.upload { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.upload-input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.upload-btn { height: 36px; gap: 6px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule); }
.upload-btn .icon { width: 16px; height: 16px; }
.upload-input:focus-visible + .upload-btn { outline: 2px solid var(--ink); outline-offset: 2px; }
.upload-name { color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Faz's record: in the content column the calibration chart and the list of sealed calls stack, each at full width;
   the four figures keep their numbers on one baseline however their labels wrap. */
.record-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.record-grid .calibration { max-width: 440px; }
.record-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; margin-top: 18px; }
.record-figures > div, .record-figures > div + div { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 0; }
.record-figures dd { margin: 0; }
.calls li { padding: 16px 0; column-gap: 20px; }
.calls li:first-child { padding-top: 4px; }
.calls .stamp { justify-self: end; }
@media (max-width: 640px) {
  .record-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .calls li { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "m" "s"; }
  .calls .stamp { justify-self: start; margin-top: 6px; }
}

/* Growth figures: soft tiles in an even grid (three across, two on phones) instead of a ruled table. */
.kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border: 0; }
.kpis > div { border: 0; border-radius: 12px; background: var(--well); padding: 14px 16px; }
@media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* Sealed on phones: each row becomes a card (claim on top, the two figures and who was closer, then the verdict). */
@media (max-width: 640px) {
  .sealed-table, .sealed-table tbody { display: block; }
  .sealed-table thead, .sealed-table .sealed-no { display: none; }
  .sealed-table tr { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "claim claim claim" "crowd faz closer" "verdict verdict verdict"; gap: 8px 18px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .sealed-table td { display: block; padding: 0; border: 0; text-align: left; }
  .sealed-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 11.5px var(--f-ledger); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
  .sealed-table .sealed-claim { grid-area: claim; }
  .sealed-table td.num:not(.oracle) { grid-area: crowd; }
  .sealed-table td.oracle { grid-area: faz; }
  .sealed-table .sealed-closer { grid-area: closer; }
  .sealed-table .sealed-verdict { grid-area: verdict; margin-top: 4px; }
}

/* =====================================================================================================================
   Mobile app layer (supersedes every earlier rule at 900px and below)
   Modelled on how the big social apps behave on a phone (Instagram, Threads, X, Facebook, Reddit):
   - a slim top bar that slides away while reading down and returns on the way up;
   - a bottom tab bar of five: Home, Ledger, File a claim, Faz, You. Labels stay (the words are new to people),
     the active tab is drawn bolder in ink, never in red; the create button is a calm rounded square;
   - "You" is the avatar and opens an account sheet from the bottom; guests get the ways to sign in there;
   - the feed runs edge to edge with 16px gutters, posts separated by thin bands of the ground colour;
   - feed tabs pin under the top bar, X style, with an underline;
   - 44px tap targets, safe-area insets, and never a horizontal scrollbar on any page.
   ===================================================================================================================== */
html, body { overflow-x: clip; max-width: 100%; }

/* The account sheet and the sign-in button are drawn the same at every width; only phones open the sheet. */
.sheet { position: fixed; inset: auto 0 0; width: 100%; max-width: 560px; max-height: min(88dvh, 760px); margin: 0 auto; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: var(--paper); color: var(--ink); box-shadow: 0 -16px 48px rgba(10, 12, 16, .22); overflow: hidden; }
.sheet[open] { display: flex; animation: fz-sheet-up .26s cubic-bezier(.2, .8, .2, 1); }
.sheet.closing { animation: fz-sheet-down .18s ease-in forwards; }
.sheet::backdrop { background: rgba(10, 12, 16, .46); animation: fz-fade .2s ease; }
@keyframes fz-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fz-sheet-down { to { transform: translateY(100%); } }
@keyframes fz-fade { from { opacity: 0; } }
:root.sheet-open { overflow: hidden; }
.sheet-body { position: relative; width: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 18px; align-content: start; }
.sheet-grip { justify-self: center; width: 38px; height: 4px; border-radius: 4px; background: var(--rule); }
.sheet-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--wash); color: var(--ink-2); cursor: pointer; }
.sheet-close .icon { width: 18px; height: 18px; }
.sheet-me { display: flex; align-items: center; gap: 14px; padding: 2px 48px 2px 0; color: var(--ink); text-decoration: none; }
.sheet-av { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 22px var(--f-ui); object-fit: cover; }
.sheet-me-text { display: grid; gap: 3px; min-width: 0; }
.sheet-me-text b { font: 700 18px/1.2 var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-me-text small { font: 500 12.5px var(--f-ledger); color: var(--ink-3); font-stretch: 92%; }
.sheet-chev { width: 18px; height: 18px; margin-left: auto; color: var(--ink-3); }
.sheet-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sheet-tile { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 12px; background: var(--well); color: var(--ink); font: 600 14.5px var(--f-ui); text-decoration: none; }
.sheet-tile .icon { width: 20px; height: 20px; color: var(--ink-2); stroke-width: 1.8; }
.sheet-tile span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-tile b { font: 600 12.5px var(--f-ledger); color: var(--ink-3); }
.sheet-tile b.hot { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--seal); color: #fff; display: grid; place-items: center; font-size: 11.5px; }
.sheet-list { display: grid; }
.sheet-list form { margin: 0; }
.sheet-list a, .sheet-list button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 0 6px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: 500 15.5px var(--f-ui); text-align: left; text-decoration: none; cursor: pointer; }
.sheet-list button[hidden] { display: none; }
.sheet-list a:active, .sheet-list button:active, .sheet-tile:active, .sheet-desks a:active { background: var(--wash); }
.sheet-list .icon { width: 22px; height: 22px; color: var(--ink-2); stroke-width: 1.7; }
.sheet-quiet a, .sheet-quiet button { min-height: 44px; font-size: 14.5px; color: var(--ink-2); }
.sheet-quiet .icon { width: 20px; height: 20px; }
.sheet-list .sheet-out, .sheet-list .sheet-out .icon { color: var(--seal); }
.sheet-sec { display: grid; gap: 10px; }
.sheet-h { margin: 0; font: 500 11.5px var(--f-ledger); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sheet-desks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sheet-desks a { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 76px; padding: 10px 4px; border-radius: 12px; background: var(--well); color: var(--ink); font: 600 11.5px/1.2 var(--f-ui); text-align: center; text-decoration: none; }
.sheet-desks .desk-glyph { width: 28px; height: 28px; }
.sheet-join { display: grid; justify-items: center; gap: 12px; padding: 14px 0 2px; text-align: center; }
.sheet-join .brand-word { font-size: 34px; }
.sheet-join p { margin: 0; max-width: 32ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .sheet[open], .sheet.closing, .sheet::backdrop { animation: none; } }

.sign-in-options { display: grid; justify-items: center; gap: 10px; width: 100%; }
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 360px; height: 46px; padding: 0 18px; border-radius: var(--btn-r, 10px); background: #fff; color: #1f1f1f; box-shadow: inset 0 0 0 1px #747775; font: 600 15.5px var(--f-ui); text-decoration: none; }
.btn-google:hover { background: #f8fafd; color: #1f1f1f; }
.btn-google:active { transform: scale(.985); }
.g-logo { width: 20px; height: 20px; flex: none; }
:root[data-theme="dark"] .btn-google { background: #131314; color: #e3e3e3; box-shadow: inset 0 0 0 1px #8e918f; }
.sign-in-options .btn-cta.wide { max-width: 360px; height: 46px; }
.sign-in-fine { margin: 2px 0 0; max-width: 40ch; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; text-align: center; }
.sign-in-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-wrap .sign-in-options { justify-items: start; margin-top: 8px; }
.form-wrap .sign-in-fine { text-align: left; }

@media (max-width: 900px) {
  :root, :root[data-rail], :root[data-rail="open"] { --bar-h: 52px; --tab-h: 58px; --m-gutter: 16px; }
  body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }

  /* Top bar */
  .bar { transition: transform .24s ease; }
  :root.bar-hidden .bar { transform: translateY(-100%); }
  .bar-inner, :root[data-rail] .bar-inner { height: var(--bar-h); padding: 0 8px 0 var(--m-gutter); gap: 4px; }
  .brand-word { font-size: 27px; }
  .bar-end { gap: 2px; }
  .bar-end .btn-ghost, .bar-end .me-menu, .bar-end .btn-cta { display: none; }
  .bar .icon-btn { width: 42px; height: 42px; border-radius: 12px; }
  .bar .icon-btn .icon { width: 23px; height: 23px; stroke-width: 1.7; }

  /* Bottom tab bar */
  .tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding: 0 4px env(safe-area-inset-bottom, 0px); }
  .tabbar a { position: relative; height: var(--tab-h); display: grid; align-content: center; justify-items: center; gap: 4px; color: var(--ink-3); font: 600 11.5px/1 var(--f-ui); letter-spacing: .01em; }
  .tabbar a .icon { width: 25px; height: 25px; stroke-width: 1.7; fill: none; transition: transform .15s ease; }
  .tabbar a:active .icon, .tabbar a:active .tab-av { transform: scale(.9); }
  .tabbar a[aria-current="page"] { color: var(--ink); }
  .tabbar a[aria-current="page"] .icon { stroke-width: 2.3; fill: none; }
  .tabbar .tab-file { justify-self: center; align-self: center; width: 50px; height: 36px; border-radius: 12px; background: var(--ink); color: var(--paper); box-shadow: none; }
  .tabbar .tab-file .icon { width: 22px; height: 22px; stroke-width: 2.4; color: var(--paper); }
  .tabbar .tab-file[aria-current="page"] { background: var(--seal); }
  .tab-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 11.5px var(--f-ui); object-fit: cover; transition: transform .15s ease; }
  .tab-me[aria-current="page"] .tab-av { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
  .tab-dot { position: absolute; top: 8px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--seal); box-shadow: 0 0 0 2px var(--paper); }

  /* The wall */
  .wall, :root .wall, :root[data-rail] .wall { margin: 0; padding: 0; gap: 0; }
  .wall-main { gap: 8px; }
  .composer { padding: 12px var(--m-gutter); border-radius: 0; box-shadow: none; }
  .composer .ask-form { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
  .composer .ask-avatar { width: 38px; height: 38px; }
  .composer .ask-input { height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15.5px; }
  .composer .ask-form .btn { display: none; height: 38px; padding: 0 14px; border-radius: var(--btn-r, 10px); }
  .composer .ask-form:focus-within .btn { display: inline-flex; }
  .composer .ask-hint { display: none; }
  .stories { padding: 4px var(--m-gutter); gap: 8px; scroll-padding-inline: var(--m-gutter); }
  .story { flex: 0 0 108px; height: 178px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
  .story-text { padding: 8px 10px 10px; }
  .story-title { font-size: 12.5px; }
  .feed-tabs { position: sticky; top: var(--bar-h); z-index: 20; padding: 0 4px; gap: 0; background: var(--bar-bg); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); transition: top .24s ease; }
  :root.bar-hidden .feed-tabs { top: 0; }
  .feed-tabs .segs { flex: 1; gap: 0; }
  .feed-tabs .seg { position: relative; flex: 1; justify-content: center; height: 46px; padding: 0 6px; border-radius: 0; background: none; color: var(--ink-3); font: 600 14.5px var(--f-ui); }
  .feed-tabs .seg:hover { background: none; }
  .feed-tabs .seg[aria-current="page"] { background: none; color: var(--ink); font-weight: 700; }
  .feed-tabs .seg[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 44px; height: 3px; border-radius: 4px; background: var(--ink); transform: translateX(-50%); }
  .feed { gap: 8px; }
  .post, .card { border-radius: 0; box-shadow: none; }
  .post-head { padding: 14px var(--m-gutter) 0; gap: 10px; }

  /* One-column pages and detail pages: full-bleed sheets of paper with the same gutter */
  .shell, :root .shell, :root[data-rail] .shell { margin: 0; padding: 0; gap: 0; }
  .shell-main { padding: 0; }
  main.page.single, :root[data-rail] main.page.single, .shell-main > main.page.single { margin: 0; padding: 22px var(--m-gutter) 32px; border-radius: 0; box-shadow: none; max-width: none; }
  .home-title { font-size: clamp(30px, 8vw, 38px); }

  /* Footer above the tab bar */
  .site-footer { margin-top: 24px; }
  .footer-inner { padding: 22px var(--m-gutter) 18px; }
}

@media (max-width: 380px) {
  :root, :root[data-rail] { --m-gutter: 14px; }
  .tabbar a { font-size: 11.5px; }
  .sheet-desks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Posts: the text of a quick take reads as the post itself (no box); the claim it is about is one soft card. */
.post-quote { padding: 0; border-radius: 0; background: none; font-size: 16.5px; line-height: 1.5; }
.post-context { box-shadow: none; padding: 11px 14px; }
.post-context:hover { box-shadow: none; background: var(--wash); }
@media (max-width: 900px) {
  .post-actions { margin: 0 6px; gap: 0; }
  .act { gap: 6px; height: 44px; padding: 0 4px; font-size: 13.5px; white-space: nowrap; min-width: 0; }
  .act span { overflow: hidden; text-overflow: ellipsis; }
}

/* Post actions share the row by content: a long label takes the room it needs, short ones give way. */
.post-actions .act, .post-actions form { flex: 1 1 auto; }
.act-short { display: none; }
@media (max-width: 380px) { .act-long { display: none; } .act-short { display: inline; } .act { font-size: 13.5px; } }

/* The old front page (/front): its single column never grows past the screen. */
main.home { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { main.home { padding: 20px var(--m-gutter, 16px) 32px; } }
.claim-card, .claim-card-lg { grid-template-columns: minmax(0, 1fr); min-width: 0; }
@media (max-width: 480px) { .claim-card-lg { padding: 18px 16px 20px; } .card-scores { flex-wrap: wrap; } }

/* Tablets and large phones (641-900px): the same app chrome, with the feed and pages using the full width, set
   16px in from the edges as rounded cards (a centred 680px column left wide empty margins on both sides). */
@media (min-width: 641px) and (max-width: 900px) {
  :root .wall > .wall-main, :root .shell > .shell-main, :root .page:not(.single) > .page-main, main.page.single, :root[data-rail] main.page.single, :root .shell-main > main.page.single { width: auto; max-width: none; margin-inline: 16px; justify-self: stretch; }
  .wall-main { padding-top: 12px; }
  .post, .card, .composer, main.page.single, .shell-main > main.page.single { border-radius: 16px; }
  .stories { padding-inline: 0; }
  .shell-main { padding-top: 12px; }
}

/* ---------- The ledger (mobile first) ----------
   Sort as tabs; time span and desks as chips that scroll sideways; each claim a row with the desk, the time left, the
   title, and one 0-100 scale that shows the Open Hunch and Faz as two marks with the gap between them shaded. */
.ledger-page .desk-head { align-items: flex-end; }
.ledger-count { margin: 6px 0 0; color: var(--ink-2); font-size: 15.5px; }
.ledger-sorts { display: flex; gap: 4px; margin: 18px 0 0; overflow-x: auto; scrollbar-width: none; }
.ledger-sorts::-webkit-scrollbar { display: none; }
.ledger-sorts a { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--btn-r, 10px); color: var(--ink-2); font: 600 14.5px var(--f-ui); text-decoration: none; white-space: nowrap; }
.ledger-sorts a:hover { background: var(--wash); color: var(--ink); }
.ledger-sorts a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.ledger-chips { display: flex; gap: 8px; margin: 12px 0 6px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.ledger-chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--well); color: var(--ink); font: 600 13.5px var(--f-ui); text-decoration: none; white-space: nowrap; }
.chip:hover { background: var(--wash); color: var(--ink); }
.chip .desk-glyph { width: 16px; height: 16px; }
.chip[aria-current="page"] { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .chip[aria-current="page"] .desk-glyph { filter: invert(1); }
.chip-select { position: relative; flex: none; display: inline-flex; align-items: center; }
.chip-select select { appearance: none; -webkit-appearance: none; height: 34px; padding: 0 32px 0 14px; border: 0; border-radius: 999px; background: var(--well); color: var(--ink); font: 600 13.5px var(--f-ui); cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule); }
.chip-select select.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.chip-select .icon { position: absolute; right: 10px; width: 15px; height: 15px; pointer-events: none; color: var(--ink-2); }
.chip-select select.on + .icon { color: var(--paper); }

.ledger-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.lrow { display: grid; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.lrow:last-child { border-bottom: 0; }
.lrow-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lrow-desk { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font: 600 12.5px var(--f-ui); text-decoration: none; }
.lrow-desk:hover { color: var(--ink); }
.lrow-desk .desk-glyph { width: 16px; height: 16px; }
.lrow-no { font: 500 11.5px var(--f-ledger); color: var(--ink-3); font-stretch: 92%; }
.lrow-top .chip-time { margin-left: auto; }
.lrow-title { margin: 0; font: 700 18px/1.3 var(--f-ui); letter-spacing: -.01em; text-wrap: pretty; }
.lrow-title a { color: var(--ink); text-decoration: none; }
.lrow-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lrow-odds { display: grid; gap: 10px; padding: 12px 14px 14px; border-radius: 12px; background: var(--well); }
.lrow-figs { display: flex; align-items: flex-end; gap: 22px; }
.lrow-fig { display: grid; gap: 2px; }
.lrow-fig small { font: 500 11.5px var(--f-ledger); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.lrow-fig b { font-family: var(--f-num); font-size: 30px; line-height: .95; color: var(--ink); display: inline-flex; align-items: flex-start; }
.lrow-fig b sup { font-size: .45em; margin: .15em 0 0 2px; font-variation-settings: "wdth" 100, "wght" 500; }
.lrow-fig.faz small, .lrow-fig.faz b { color: var(--seal); }
.lrow-gap { margin-left: auto; align-self: center; display: inline-flex; align-items: baseline; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--paper); color: var(--ink-2); font: 500 11.5px/26px var(--f-ledger); white-space: nowrap; }
.lrow-gap b { font: 700 13.5px var(--f-num); color: var(--ink); }
.lrow-gap.big { background: var(--seal); color: #fff; }
.lrow-gap.big b { color: #fff; }
.lrow-scale { position: relative; height: 8px; margin: 2px 6px 0; border-radius: 8px; background: var(--rule); }
.lrow-span { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: repeating-linear-gradient(135deg, rgba(215, 48, 31, .55) 0 3px, rgba(215, 48, 31, .25) 3px 6px); }
.lrow-mark { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--well); }
.lrow-mark.crowd { background: var(--ink); }
.lrow-mark.faz { background: var(--seal); }
.lrow-wait { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--well); color: var(--ink-2); font-size: 14.5px; }
.lrow-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--ink-3); font: 500 11.5px var(--f-ledger); font-stretch: 92%; }
.lrow-meta span:not(:last-child)::after { content: "·"; margin: 0 8px; }
.ledger-file { margin-top: 28px; display: grid; gap: 10px; }
.ledger-file .section-title { margin: 0; }
.ledger-page .pager { margin-top: 18px; }

@media (max-width: 900px) {
  .ledger-page .desk-art { margin: -22px calc(var(--m-gutter, 16px) * -1) 16px; border-radius: 0; }
  .ledger-sorts, .ledger-chips { margin-inline: calc(var(--m-gutter, 16px) * -1); padding-inline: var(--m-gutter, 16px); scroll-padding-inline: var(--m-gutter, 16px); }
  .lrow { padding: 16px 0; }
  .lrow-title { font-size: 17px; }
  .lrow-fig b { font-size: 28px; }
}
@media (max-width: 360px) {
  .lrow-figs { gap: 14px; }
  .lrow-no { display: none; }
}
.ledger-file { grid-template-columns: minmax(0, 1fr); }
.ask-form { min-width: 0; } .ask-form .ask-input { min-width: 0; width: 100%; }


/* ---------- The phone menu (app-sheet) ----------
   Grouped like iOS settings on the ground colour: you first (members), then explore, what is moving, desks, Fazoh,
   appearance. Every row is at least 48px; groups are white cards with hairlines between rows. */
.sheet.menu { max-height: 94dvh; background: var(--ground); }
.menu .sheet-body { gap: 14px; padding-top: 0; }
.menu-head { position: sticky; top: 0; z-index: 2; margin: 0 -16px; padding: 8px 16px 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; background: var(--ground); }
.menu-head .sheet-grip { grid-column: 1 / -1; margin-bottom: 8px; }
.menu-head h2 { margin: 0; font: 800 26px/1 var(--f-ui); letter-spacing: -.02em; }
.menu-head .sheet-close { position: static; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }

.menu-me { display: grid; gap: 14px; padding: 16px; border-radius: 16px; background: var(--paper); box-shadow: var(--card-shadow); }
.menu-me-id { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.menu-me-text { display: grid; gap: 4px; min-width: 0; }
.menu-me-text b { display: flex; align-items: center; gap: 2px; font: 700 18px/1.2 var(--f-ui); }
.menu-me-text small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ink-3); font: 500 12.5px var(--f-ui); }
.menu-me-text .flag { width: 16px; height: 12px; border-radius: 4px; margin-right: 4px; vertical-align: -1px; }
.menu-stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.menu-stats div { display: grid; gap: 2px; padding: 10px 8px; border-radius: 12px; background: var(--well); text-align: center; }
.menu-stats dt { font: 500 11.5px var(--f-ledger); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.menu-stats dd { margin: 0; font: 700 17px var(--f-num); color: var(--ink); }

.menu-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.menu-tile { position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 84px; padding: 12px 6px; border-radius: 16px; background: var(--paper); box-shadow: var(--card-shadow); color: var(--ink); font: 600 12.5px/1.2 var(--f-ui); text-align: center; text-decoration: none; }
.menu-tile .icon { width: 24px; height: 24px; stroke-width: 1.7; color: var(--ink); }
.menu-tile[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--ink); }
.menu-badge { position: absolute; top: 8px; right: 10px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--seal); color: #fff; display: grid; place-items: center; font: 700 11.5px var(--f-ui); }

.menu-join { display: grid; justify-items: center; gap: 14px; padding: 22px 18px 18px; border-radius: 16px; background: var(--paper); box-shadow: var(--card-shadow); text-align: center; }
.menu-join p { margin: 0; max-width: 30ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.45; }
.menu-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 360px; text-align: left; }
.menu-why li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.menu-why .icon { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--well); color: var(--seal); stroke-width: 1.8; }
.menu-join .sign-in-options { margin-top: 2px; }

.menu-sec { display: grid; gap: 8px; }
.menu-h { margin: 6px 4px 0; display: flex; align-items: center; gap: 6px; font: 600 12.5px var(--f-ui); letter-spacing: .02em; color: var(--ink-3); }
.menu-h .icon { width: 15px; height: 15px; color: var(--seal); }
.menu-group { list-style: none; margin: 0; padding: 0; display: grid; border-radius: 16px; background: var(--paper); box-shadow: var(--card-shadow); overflow: hidden; }
.menu-group > a, .menu-group > li > a { position: relative; display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 14px; color: var(--ink); font: 500 15.5px var(--f-ui); text-decoration: none; }
.menu-group > a + a::before, .menu-group > li + li > a::before { content: ""; position: absolute; top: 0; left: 50px; right: 0; height: 1px; background: var(--line); }
.menu-group > a:active, .menu-group > li > a:active, .menu-tile:active, .sheet-desks a:active { background: var(--wash); }
.menu-group .icon { width: 22px; height: 22px; color: var(--ink-2); stroke-width: 1.7; }
.menu-group a[aria-current="page"] { font-weight: 700; }
.menu-group a[aria-current="page"] > .icon:first-child { color: var(--seal); }
.menu-trend a { padding-block: 10px; align-items: flex-start; }
.menu-trend-n { flex: none; width: 22px; font: 700 14.5px/1.35 var(--f-num); color: var(--seal); text-align: center; }
.menu-trend-t { flex: 1; min-width: 0; font: 600 14.5px/1.35 var(--f-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.menu-trend small { flex: none; margin-top: 2px; padding: 1px 7px; border-radius: 999px; background: var(--well); font: 600 11.5px var(--f-ledger); color: var(--ink-2); }
.menu-trend li + li > a::before { left: 50px; }
.menu .sheet-desks a { background: var(--paper); box-shadow: var(--card-shadow); }
.menu .sheet-desks a[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--ink); }

.menu-theme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--wash); }
.menu-theme[hidden] { display: none; }
.menu-theme button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 600 14.5px var(--f-ui); cursor: pointer; }
.menu-theme button .icon { width: 17px; height: 17px; }
.menu-theme button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.menu-out { margin: 4px 0 0; }
.menu-out button { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--card-shadow); color: var(--seal); font: 700 15.5px var(--f-ui); cursor: pointer; }
.menu-out .icon { width: 20px; height: 20px; }
.menu-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 6px; }
.menu-legal a { color: var(--ink-3); font-size: 12.5px; text-decoration: none; }
.menu-foot { margin: 0 0 4px; text-align: center; color: var(--ink-3); font: 500 11.5px var(--f-ledger); letter-spacing: .04em; }

@media (max-width: 900px) {
  /* Guests see a compact sign-in in the top bar too; the menu tab carries the rest. */
  .bar-end .btn-ghost { display: inline-flex; height: 34px; margin-left: 4px; padding: 0 14px; border-radius: var(--btn-r, 10px); background: var(--seal); color: #fff; font-size: 13.5px; box-shadow: none; }
  .bar-end .btn-ghost:hover { background: var(--seal-hover); color: #fff; }
}
@media (max-width: 360px) {
  .menu-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-stats dd { font-size: 15.5px; }
}

/* Guest sign-in in the top bar: a quiet outlined button, not a red slab. */
.bar .btn-ghost, .bar-end .btn-ghost { height: 36px; padding: 0 14px; gap: 6px; border-radius: var(--btn-r, 10px); background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); font: 600 14.5px var(--f-ui); }
.bar .btn-ghost:hover, .bar-end .btn-ghost:hover { background: var(--wash); color: var(--ink); }
@media (max-width: 900px) { .bar-end .btn-ghost { display: inline-flex; height: 32px; margin-left: 2px; padding: 0 12px; font-size: 13.5px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); } .bar-end .btn-ghost:hover { background: var(--wash); color: var(--ink); } }

/* The wordmark: "Fazoh" set in Source Serif 4 Bold, in the seal red (the first logo, Quora style). */
.brand-word { display: inline-block; flex: none; font: 700 28px/1 "Source Serif 4", Georgia, "Times New Roman", serif; letter-spacing: -.02em; color: var(--seal); text-decoration: none; padding: 0 4px 2px; }
.brand-word:hover { color: var(--seal-hover); }
.footer-brand .wordmark { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.02em; color: var(--seal); }
.sheet-logo { font-size: 34px; padding: 0; }
@media (max-width: 900px) { .brand-word { font-size: 26px; } .sheet-logo { font-size: 34px; } }
.brand-word { font-size: 32px; }
@media (max-width: 900px) { .brand-word { font-size: 29px; } .sheet-logo { font-size: 36px; } }

/* Footer inside the rail grids: the rails span the content row and the footer row, so sticky rails never get pushed
   up by the footer at the end of a page (that read as the rails jumping while scrolling). */
@media (min-width: 1201px) {
  :root .wall > .rail-left, :root .page:not(.single) > .rail-left, :root .shell > .rail-left,
  :root .wall > .rail-right, :root .page:not(.single) > .rail-right, :root .shell > .rail-right { grid-row: 1 / span 2; }
  :root .wall > .grid-foot, :root .page:not(.single) > .grid-foot, :root .shell > .grid-foot { grid-column: 2; grid-row: 2; min-width: 0; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  :root .wall > .rail-right, :root .page:not(.single) > .rail-right, :root .shell > .rail-right { grid-row: 1 / span 2; }
  :root .wall > .grid-foot, :root .page:not(.single) > .grid-foot, :root .shell > .grid-foot { grid-column: 1; grid-row: 2; min-width: 0; }
}
.grid-foot .site-footer { margin-top: 0; border-top: 0; background: transparent; }
.grid-foot .footer-inner { max-width: none; padding: 8px 0 40px; }
@media (max-width: 900px) { .grid-foot .footer-inner { padding: 22px var(--m-gutter, 16px) 18px; } }
:root body .grid-foot .site-footer { margin: 0; padding: 0; }
:root body .grid-foot .footer-inner { margin: 0; padding: 8px 4px 40px; gap: 16px 32px; }
@media (max-width: 900px) { :root body .grid-foot .footer-inner { padding: 22px var(--m-gutter, 16px) 18px; } }

/* Sticky rails stick exactly where they rest: below the bar and its 1px line (left), and below the bar plus the
   right rail's 20px top margin (right). Any difference makes them slide up a few pixels when scrolling starts. */
@media (min-width: 901px) {
  :root .wall > .rail-left, :root .page:not(.single) > .rail-left, :root .shell > .rail-left { top: calc(var(--bar-h) + 1px); height: calc(100dvh - var(--bar-h) - 1px); }
  :root .wall > .rail-right, :root .page:not(.single) > .rail-right, :root .shell > .rail-right { top: calc(var(--bar-h) + 21px); }
}

/* Wordmark: "Fazoh" in Source Serif 4 Bold, seal red (the logo is undecided; this text mark stands in until it is). */
.brand-word { font-size: 32px; }
.sheet-logo { font-size: 36px; padding: 0; }
@media (max-width: 900px) { .brand-word { font-size: 29px; } .sheet-logo { font-size: 36px; } }

/* About: the ledger's loop (partials/loop-diagram). Ink and rules follow the theme; the runner is the one red. */
.loop { margin: 18px 0 8px; }
.loop-svg { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; }
.loop-ring { fill: none; stroke: var(--rule); stroke-width: 2; }
.loop-ring-run { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 9; opacity: .35; animation: loop-turn 24s linear infinite; transform-origin: 320px 210px; }
.loop-node { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.loop-station:first-of-type .loop-node { stroke: var(--seal); }
.loop-label { font: 700 17px/1 var(--f-ui); fill: var(--ink); letter-spacing: -.01em; }
.loop-note { font: 400 14.5px/1 var(--f-ui); fill: var(--ink-3, #6b6b66); }
.loop-centre { font: italic 600 22px/1 var(--f-head); fill: var(--ink); }
.loop-runner { fill: var(--seal); }
.loop-caption { margin: 18px auto 0; max-width: 560px; text-align: center; font-size: 15.5px; color: var(--ink-2, #4a4a46); }
@keyframes loop-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loop-ring-run { animation: none; }
  .loop-runner { display: none; }
}
@media (max-width: 560px) {
  .loop-label { font-size: 27px; }
  .loop-note { display: none; }
  .loop-centre { font-size: 26px; }
}

/* How Faz works: the engine log, a dated list. */
.engine-log { list-style: none; padding: 0; margin: 10px 0 0; border-top: 1px solid var(--rule); }
.engine-log li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.engine-log time { display: block; font: 500 12.5px/1.4 var(--f-ledger); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #6b6b66); margin-bottom: 3px; }

/* Contact: the official addresses. */
.contact-addresses { list-style: none; padding: 0; margin: 8px 0 0; border-top: 1px solid var(--rule); }
.contact-addresses li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.contact-addresses span { color: var(--ink-2, #4a4a46); }
.contact-addresses a { font-family: var(--f-ledger); font-size: 14.5px; overflow-wrap: anywhere; }

/* Home, signed out: who we are and the way in. */
.welcome { padding: 22px 22px 18px; }
.welcome-kicker { margin: 0 0 6px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--seal); }
.welcome-title { margin: 0 0 8px; font: 700 26px/1.2 var(--f-head); letter-spacing: -.015em; color: var(--ink); }
.welcome-dek { margin: 0 0 14px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2, #3a3a38); }
.welcome-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.welcome-actions .sign-in-options { flex: 0 1 auto; }
.welcome-actions .sign-in-fine { display: none; }
.welcome-more { font-weight: 600; }
.welcome-note { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3, #6b6b66); }
@media (max-width: 560px) {
  .welcome { padding: 18px 16px 14px; }
  .welcome-title { font-size: 22px; }
  .welcome-actions .sign-in-options, .welcome-actions .btn-google { width: 100%; }
}

/* Toasts (partials/toast): the message after an action floats over the page instead of pushing the layout down.
   Top right on wide screens; above the tab bar on phones. */
:root { --ok: #1a7f4b; --ok-wash: #e8f5ee; --warn: #a15c00; --warn-wash: #fdf3e3; --info: #2f5f9e; --info-wash: #ebf1fa; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --ok: #4cc38a; --ok-wash: #12261c; --warn: #f0b250; --warn-wash: #2a2010; --info: #8db4ea; --info-wash: #14202f; } }
:root[data-theme="dark"] { --ok: #4cc38a; --ok-wash: #12261c; --warn: #f0b250; --warn-wash: #2a2010; --info: #8db4ea; --info-wash: #14202f; }
.toast-region { position: fixed; z-index: 60; top: calc(var(--bar-h, 56px) + 14px); right: 20px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.toast { --tone: var(--ok); --tone-wash: var(--ok-wash); position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 12px 14px 14px; border-radius: 12px; background: var(--paper); box-shadow: var(--lift-shadow), 0 18px 40px -18px rgba(15, 20, 25, .28); pointer-events: auto; animation: toast-in .32s cubic-bezier(.2, .9, .3, 1.2) both; }
.toast-info { --tone: var(--info); --tone-wash: var(--info-wash); }
.toast-warning { --tone: var(--warn); --tone-wash: var(--warn-wash); }
.toast-error { --tone: var(--seal); --tone-wash: var(--seal-wash); }
.toast-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tone-wash); color: var(--tone); }
.toast-icon .icon { width: 17px; height: 17px; stroke-width: 2.2; }
.toast-text { margin: 5px 0 0; font: 500 14.5px/1.45 var(--f-ui); color: var(--ink); overflow-wrap: anywhere; }
.toast-close { display: grid; place-items: center; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer; }
.toast-close:hover { background: var(--wash); color: var(--ink); }
.toast-close:focus-visible { outline: 2px solid var(--tone); outline-offset: 1px; }
.toast-close .icon { width: 16px; height: 16px; }
.toast-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--tone); opacity: .55; transform-origin: left; animation: toast-timer var(--toast-ms, 6000ms) linear forwards; }
.toast.is-paused .toast-timer { animation-play-state: paused; }
.toast.is-leaving { animation: toast-out .24s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 900px) {
  .toast-region { top: auto; right: 16px; left: 16px; width: auto; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.98); } }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-leaving { animation: none; }
  .toast-timer { display: none; }
}

/* Short pages (an empty Sealed list, a fresh account) have no scrollbar; on desktops with classic scrollbars the
   whole centred layout then jumps sideways between pages. Keep the scrollbar's lane reserved everywhere. */
html { scrollbar-gutter: stable; }

/* Page art is a 21:9 panorama across the text column: full width, no letterboxing, no empty strip at the side. */
.doc-art img { width: 100%; height: auto; max-height: none; aspect-ratio: 21 / 9; object-fit: cover; object-position: center; border-radius: 12px; }

/* Team profiles: what a house writer is, in one quiet line. */
.profile-house { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--wash); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.profile-house .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); }

/* ── "When" topics (topics/show, topics/index): the date, big, read off a ladder of dated claims. ── */
.when-page article { max-width: 760px; }
.when-crumbs { display: flex; gap: 8px; margin: 0 0 10px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.when-crumbs a { color: var(--ink-3); text-decoration: none; }
.when-crumbs a:hover { color: var(--seal); }
.when-crumbs span { color: var(--ink-3); opacity: .6; }
.when-title { margin: 0 0 18px; font: 700 clamp(28px, 4.2vw, 40px)/1.12 var(--f-head); letter-spacing: -.02em; color: var(--ink); }

.when-hero { display: grid; gap: 20px; padding: 26px 28px 24px; border-radius: 16px; background: var(--paper); box-shadow: var(--card-shadow); container-type: inline-size; }
.when-label { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 12.5px/1 var(--f-ledger, ui-monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.when-pip { width: 8px; height: 8px; border-radius: 50%; background: var(--seal); box-shadow: 0 0 0 4px var(--seal-wash); }
.when-year { margin: 8px 0 6px; font-family: var(--f-num); font-size: clamp(84px, 27cqi, 168px); line-height: .86; letter-spacing: -.035em; font-variation-settings: "wdth" 118, "wght" 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.when-year small { display: block; margin-bottom: 6px; font: 600 15.5px/1 var(--f-ui); letter-spacing: .02em; color: var(--ink-3); }
.when-year.is-pending { color: var(--rule); letter-spacing: .02em; }
.when-year.is-after { font-size: clamp(60px, 18cqi, 112px); }
.when-range { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.when-range b { color: var(--ink); font-family: var(--f-num); font-variation-settings: "wdth" 100, "wght" 700; }
.when-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 22px; align-items: start; padding-top: 18px; border-top: 1px solid var(--rule); }
.when-side .when-how { grid-column: 1 / -1; }
.when-moved { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-self: start; margin: 0; padding: 7px 12px; border-radius: 999px; font: 600 13.5px/1.2 var(--f-ui); background: var(--wash); color: var(--ink); }
.when-moved .icon { width: 15px; height: 15px; }
.when-moved span { font-weight: 400; color: var(--ink-3); }
.when-moved.later { background: var(--warn-wash); color: var(--warn); }
.when-moved.earlier { background: var(--ok-wash); color: var(--ok); }
.when-crowd { display: grid; gap: 6px; }
.when-crowd-year { font-family: var(--f-num); font-size: 44px; line-height: .9; font-variation-settings: "wdth" 110, "wght" 650; color: var(--ink); }
.when-crowd-none { font-size: 14.5px; color: var(--ink-3); }
.when-how { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

.when-chart { margin: 18px 0 0; padding: 16px 16px 10px; border-radius: 16px; background: var(--paper); box-shadow: var(--card-shadow); }
.when-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.when-grid { stroke: var(--rule); stroke-width: 1; }
.when-grid.mid { stroke-dasharray: 4 5; stroke: var(--ink-3); opacity: .45; }
.when-axis { font: 500 12.5px var(--f-ui); fill: var(--ink-3); }
.when-axis.now { font-style: italic; }
.when-tick { stroke: var(--ink-3); opacity: .5; }
.when-band { fill: var(--seal); opacity: .07; }
.when-curve { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.when-curve.faz { stroke: var(--seal); }
.when-curve.crowd { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 6; opacity: .7; }
.when-dot { fill: var(--paper); stroke: var(--seal); stroke-width: 2; }
.when-median { stroke: var(--seal); stroke-width: 1.5; stroke-dasharray: 3 4; }
.when-median-dot { fill: var(--seal); stroke: var(--paper); stroke-width: 3; }
.when-median-label { font-family: var(--f-num); font-size: 18px; font-variation-settings: "wdth" 110, "wght" 750; fill: var(--seal); }
.when-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 4px 2px; font-size: 13.5px; color: var(--ink-2); }
.when-legend span::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 7px; vertical-align: middle; border-radius: 4px; background: var(--seal); }
.when-legend .crowd::before { background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 9px); height: 2px; }
.when-legend .band::before { height: 10px; background: var(--seal); opacity: .14; }

.when-section { margin-top: 34px; }
.when-section h2 { margin: 0 0 6px; font: 700 22px/1.25 var(--f-head); letter-spacing: -.01em; }
.when-note { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-3); }
.when-ladder { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: var(--paper); box-shadow: var(--card-shadow); overflow: hidden; }
.when-ladder li + li { border-top: 1px solid var(--rule); }
.when-rung { display: grid; grid-template-columns: 112px minmax(0, 1fr) 104px 74px; align-items: center; gap: 14px; padding: 13px 18px; color: inherit; text-decoration: none; }
.when-rung:hover { background: var(--wash); }
.when-rung-year { font-family: var(--f-num); font-size: 17px; font-variation-settings: "wdth" 104, "wght" 650; color: var(--ink); }
.when-rung-bar { height: 8px; border-radius: 999px; background: var(--wash); overflow: hidden; }
.when-rung-bar i { display: block; height: 100%; border-radius: inherit; background: var(--seal); }
.when-rung-figs { display: flex; justify-content: flex-end; gap: 12px; font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 16.5px; color: var(--ink-3); }
.when-rung-figs .faz, .when-key .faz { color: var(--seal); }
.when-rung-time { justify-self: end; font-size: 12.5px; color: var(--ink-3); }
.when-key { margin: 8px 4px 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.when-summary { margin: 0 0 10px; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.when-criteria { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--wash); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

.when-args { display: grid; gap: 14px; }
.when-arg { padding: 18px 20px; border-radius: 16px; background: var(--paper); box-shadow: var(--card-shadow); }
.when-arg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14.5px; }
.when-arg-av { width: 28px; height: 28px; border-radius: 50%; }
.when-arg .side-chip { margin-left: auto; padding: 4px 10px; border-radius: 999px; font: 600 12.5px/1.2 var(--f-ui); background: var(--wash); color: var(--ink-2); }
.when-arg .side-chip.yes { background: var(--ok-wash); color: var(--ok); }
.when-arg .side-chip.no { background: var(--seal-wash); color: var(--seal); }
.when-arg-thesis { margin: 0 0 8px; font: 700 18px/1.35 var(--f-head); }
.when-arg-thesis a { color: var(--ink); text-decoration: none; }
.when-arg-thesis a:hover { color: var(--seal); }
.when-arg-body { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.when-arg-foot { margin: 0; font-size: 12.5px; letter-spacing: .04em; color: var(--ink-3); }
.when-sources { margin: 0; padding: 0 0 0 22px; display: grid; gap: 10px; }
.when-sources li { font-size: 15.5px; line-height: 1.45; }
.when-sources .ledger { display: block; font-size: 12.5px; color: var(--ink-3); }
.when-method p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.when-history { font-size: 12.5px; color: var(--ink-3); }

.when-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.when-card { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 16px; background: var(--paper); box-shadow: var(--card-shadow); color: inherit; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.when-card:hover { box-shadow: var(--lift-shadow); transform: translateY(-2px); }
.when-card-desk { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--seal); }
.when-card-title { font: 700 20px/1.3 var(--f-head); color: var(--ink); }
.when-card-year { margin-top: 8px; font-family: var(--f-num); font-size: 68px; line-height: .86; letter-spacing: -.03em; font-variation-settings: "wdth" 116, "wght" 800; color: var(--ink); }
.when-card-note { font-size: 13.5px; color: var(--ink-3); }

/* The constitution's topic page: watching, happened, Faz's reading, the two sides, the call, the archive. */
.when-pip.is-watching { background: var(--ink-3); box-shadow: 0 0 0 4px var(--wash); }
.when-pip.is-done { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-wash); }
.when-year.is-chance { font-size: clamp(64px, 20cqi, 120px); color: var(--ink-2); }
.when-year.is-chance small { display: block; margin-top: 8px; font: 600 15.5px/1.2 var(--f-ui); letter-spacing: 0; color: var(--ink-3); }
.when-hero.is-happened { box-shadow: var(--card-shadow), inset 0 0 0 2px var(--ok-wash); }
.when-card-year.is-chance { color: var(--ink-3); }
.when-h3 { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font: 700 17px/1.3 var(--f-head); color: var(--ink); }
.when-evidence { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.when-evidence li { padding: 14px 16px; border-radius: 14px; background: var(--paper); box-shadow: var(--card-shadow); }
.when-evidence p { margin: 8px 0 6px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.when-evidence blockquote { margin: 0 0 8px; padding-left: 12px; border-left: 3px solid var(--rule); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.when-evidence .ledger { font-size: 12.5px; color: var(--ink-3); }
.when-evidence .side-chip, .when-revisions .side-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.2 var(--f-ui); background: var(--wash); color: var(--ink-2); }
.when-evidence .side-chip.yes { background: var(--ok-wash); color: var(--ok); }
.when-evidence .side-chip.no { background: var(--seal-wash); color: var(--seal); }
.when-change { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.when-revisions { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); display: grid; gap: 12px; }
.when-revisions li { position: relative; padding-left: 16px; font-size: 15.5px; color: var(--ink); }
.when-revisions li::before { content: ""; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--seal); }
.when-revisions .ledger { display: block; font-size: 12.5px; color: var(--ink-3); }
.when-revisions p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.when-early { display: flex; gap: 6px; align-items: flex-start; color: var(--warn) !important; }
.when-early .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.when-score { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 12px; }
.when-score-side { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--paper); box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none; }
.when-score-side:hover { box-shadow: var(--lift-shadow); }
.when-score-side b { font: 700 16.5px/1.25 var(--f-head); }
.when-score-side.is-yes { box-shadow: var(--card-shadow), inset 3px 0 0 var(--ok); }
.when-score-side.is-no { box-shadow: var(--card-shadow), inset 3px 0 0 var(--seal); }
.when-write { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; }
.when-side-list { display: grid; gap: 12px; }
.when-call { margin-top: 34px; }
.when-call-year { display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.when-call-year input { width: 140px; height: 44px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: var(--ink); font: 600 18px var(--f-num); }
.when-record-table td small, .when-record-table th small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.when-record-table tr.is-real { background: var(--ok-wash); }
.when-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.when-kpi { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--paper); box-shadow: var(--card-shadow); }
.when-kpi .ledger { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.when-kpi b { font-family: var(--f-num); font-size: 34px; line-height: 1; font-variation-settings: "wdth" 110, "wght" 750; color: var(--ink); }
.when-kpi small { font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 760px) {
  .when-hero { padding: 22px 20px; }
  .when-rung { grid-template-columns: 92px minmax(0, 1fr) 86px; gap: 10px; padding: 12px 14px; }
  .when-rung-time { display: none; }
  .when-cards { grid-template-columns: minmax(0, 1fr); }
  .when-score, .when-kpis { grid-template-columns: minmax(0, 1fr); }
  .when-axis { font-size: 17px; }
  .when-median-label { font-size: 26px; }
  .when-chart { padding: 12px 10px 8px; }
}
@media (prefers-reduced-motion: reduce) { .when-card { transition: none; } .when-card:hover { transform: none; } }

/* Claim page: the "when" topic this claim is a rung of. */
.claim-topic { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 7px 12px; border-radius: 999px; background: var(--wash); color: var(--ink-2); font-size: 13.5px; text-decoration: none; }
.claim-topic:hover { color: var(--ink); }
.claim-topic .icon { width: 15px; height: 15px; color: var(--seal); }
.claim-topic-year { font-family: var(--f-num); font-variation-settings: "wdth" 104, "wght" 700; color: var(--seal); }

/* About: the lantern line closes the mission. */
.doc-body .mission-lantern { margin: 18px 0 8px; padding: 16px 18px; border-radius: 12px; background: var(--wash); font: italic 500 18px/1.55 var(--f-head); color: var(--ink); }

/* ORCID: sign-in button, the account's connect card and the verified iD on profiles. */
.btn-orcid { margin-top: 10px; }
.orcid-icon { width: 20px; height: 20px; flex: none; }
.orcid-icon.inline { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.orcid-connect { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 16px; margin: 18px 0 6px; padding: 16px 18px; border-radius: 12px; background: var(--wash); }
.orcid-connect > .orcid-icon { width: 36px; height: 36px; }
.orcid-connect h2 { margin: 0 0 2px; font: 700 16.5px/1.3 var(--f-ui); }
.orcid-connect p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.profile-orcid a { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; font-family: var(--f-ledger, ui-monospace); font-size: 13.5px; }
.profile-orcid a:hover { text-decoration: underline; }
@media (max-width: 560px) { .orcid-connect { grid-template-columns: auto minmax(0, 1fr); } .orcid-connect .btn { grid-column: 1 / -1; justify-self: start; } }

/* Rail context card (partials/rail-context): the right rail's first card, about the page it sits on. */
.rail-context { gap: 6px; }
.rc-label { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 11.5px/1 var(--f-ledger, ui-monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.rc-pip { width: 7px; height: 7px; border-radius: 50%; background: var(--seal); box-shadow: 0 0 0 3px var(--seal-wash); }
.rc-figure { margin: 4px 0 2px; font-family: var(--f-num); font-size: 68px; line-height: .86; letter-spacing: -.035em; font-variation-settings: "wdth" 116, "wght" 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.rc-figure.is-wide { font-size: 52px; font-variation-settings: "wdth" 100, "wght" 750; }
.rc-topic .rc-figure, .rc-nearest .rc-figure, .rc-history .rc-figure { color: var(--seal); }
/* A ruling in words (Likely by then, No date yet): an icon and the word, sized to fit the card. */
.rc-mark { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; font: 700 19px/1.2 var(--f-ui); letter-spacing: -.01em; color: var(--ink); min-width: 0; }
.rc-mark .icon { flex: none; width: 34px; height: 34px; stroke-width: 2.1; color: var(--ink-3); }
.rc-mark span { min-width: 0; overflow-wrap: anywhere; }
.rc-mark.is-likely, .rc-mark.is-likely .icon, .rc-mark.is-happened .icon { color: var(--ok); }
.rc-mark.is-unlikely, .rc-mark.is-unlikely .icon { color: var(--seal); }
.rail-right.is-compact .rc-mark { font-size: 17px; }
.rail-right.is-compact .rc-mark .icon { width: 28px; height: 28px; }
.rc-title { margin: 2px 0 0; font: 600 14.5px/1.4 var(--f-ui); }
.rc-title a { color: var(--ink); text-decoration: none; }
.rc-title a:hover { color: var(--seal); }
.rc-count { margin: 2px 0 0; }
/* The date's place between now and the horizon: a hairline, the range as a soft band, the date as a ringed dot. */
.rc-track { margin: 14px 0 4px; }
.rc-track-line { position: relative; height: 14px; }
.rc-track-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--line); }
.rc-track-band { position: absolute; top: 50%; height: 8px; margin-top: -4px; border-radius: 8px; background: color-mix(in srgb, var(--seal) 22%, transparent); }
.rc-track-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--paper); border: 3px solid var(--seal); box-sizing: border-box; }
.rc-track-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; letter-spacing: .08em; color: var(--ink-3); }
.rc-track-note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.rc-track-range { display: block; margin-top: 2px; color: var(--ink-3); white-space: nowrap; }
.rc-track-range b { font-weight: 600; color: var(--ink-2); }
/* A few quiet facts, label over value, in a row that wraps. */
.rc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px 14px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.rc-facts div { min-width: 0; }
.rc-facts dt { margin: 0 0 3px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.rc-facts dd { margin: 0; font: 600 13.5px/1.3 var(--f-ui); color: var(--ink); }
.rc-line { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.rc-spark { display: block; width: 100%; height: 44px; margin: 4px 0; overflow: visible; }
.rc-spark polyline { fill: none; stroke: var(--seal); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rc-cta { display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-top: 6px; font: 600 13.5px/1 var(--f-ui); color: var(--seal); text-decoration: none; }
.rc-cta:hover { text-decoration: underline; }
.rc-cta .icon { width: 15px; height: 15px; }
.rc-toc { display: grid; margin: 4px -8px 0; }
.rc-toc a { position: relative; padding: 7px 8px 7px 14px; border-radius: 8px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); text-decoration: none; }
.rc-toc a::before { content: ""; position: absolute; left: 4px; top: 9px; bottom: 9px; width: 2px; border-radius: 4px; background: transparent; }
.rc-toc a:hover { background: var(--wash); color: var(--ink); }
.rc-toc a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.rc-toc a[aria-current="true"]::before { background: var(--seal); }

/* Right rail fit (public/js/foretold.js): the rail steps down until it is no taller than the screen. */
.rail-right.is-compact { gap: 10px; }
.rail-right.is-compact > .rail-card, .rail-right.is-compact > .side-list { padding-top: 12px; padding-bottom: 12px; gap: 6px; }
.rail-right.is-compact .rc-figure { font-size: 54px; }
.rail-right.is-compact .rc-figure.is-wide { font-size: 44px; }
.rail-right.is-compact .rc-spark { height: 32px; }
.rail-right.is-compact .faz-mini-fig .num { font-size: 40px; }
.rail-right.is-compact .faz-mini-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rail-right.is-compact .odds-svg { height: 84px; }
.rail-right.is-compact .rc-toc a { padding-top: 5px; padding-bottom: 5px; }
.rail-right.is-tight .rc-figure { font-size: 44px; }
.rail-right.is-tight .rc-line ~ .rc-line, .rail-right.is-tight .rail-note { display: none; }
.rail-right.is-tight .faz-mini-text { -webkit-line-clamp: 2; }
.rail-right.is-tight .rc-toc a { padding-top: 3px; padding-bottom: 3px; font-size: 13.5px; }
.rail-right.is-scroll { max-height: var(--rail-room); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

/* Claim and topic pages: who asked, and what Faz did to shape it (partials/claim-byline). */
.claim-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 14px; font-size: 14.5px; color: var(--ink-2); }
.by-owner { display: inline-flex; align-items: center; gap: 8px; }
.by-owner a { color: var(--ink); font-weight: 600; text-decoration: none; }
.by-owner a:hover { text-decoration: underline; }
.by-av { width: 26px; height: 26px; border-radius: 50%; }
.by-faz { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--wash); font-size: 13.5px; color: var(--ink-2); }
.by-faz .icon { width: 14px; height: 14px; color: var(--seal); }
.when-byline { margin-top: -6px; }

/* Sign-in: Google and ORCID side by side under one "Continue with", equal width; stacked on the narrowest phones. */
.sign-in-with { margin: 0 0 -2px; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.sign-in-row { display: grid; width: 100%; max-width: 360px; gap: 10px; }
.sign-in-row.is-pair { grid-template-columns: 1fr 1fr; }
.sign-in-row .btn-google { max-width: none; width: 100%; }
.sign-in-row .btn-orcid { margin-top: 0; }
.form-wrap .sign-in-row { justify-self: start; }
@media (max-width: 340px) { .sign-in-row.is-pair { grid-template-columns: 1fr; } }
.rc-reading .rc-figure { color: var(--seal); }
/* A card the rail fitter drops must really go: card styles set display, which would otherwise beat [hidden]. */
.rail-right [data-rail-drop][hidden], .rail-context[hidden] { display: none !important; }

/* Wall: a Faz reading is posted under the claim's owner, with Faz's eye riding on their avatar. */
.post-avatar-wrap { position: relative; display: inline-block; flex: none; }
.av-faz-badge { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--seal); color: #fff; box-shadow: 0 0 0 2px var(--paper); }
.av-faz-badge .icon { width: 11px; height: 11px; stroke-width: 2.4; }

/* Welcome (partials/welcome): the first screen for anyone signed out, on the wall and as the sign-in page.
   Phone first: a confident headline, the product in one glance (the big date), three steps, the way in. */
.welcome { display: grid; gap: 14px; padding: 24px 22px 20px; }
.welcome-kicker { margin: 0; }
.welcome-title { margin: 0; font: 700 clamp(26px, 6.6vw, 34px)/1.12 var(--f-head); letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
.welcome-dek { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

.welcome-date { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: end; padding: 16px 44px 16px 18px; border-radius: 16px; background: var(--ink); color: var(--paper); text-decoration: none; overflow: hidden; }
.welcome-date::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--seal) 55%, transparent) 0%, transparent 70%); opacity: .55; pointer-events: none; }
.welcome-date-label { grid-column: 1 / -1; margin-bottom: 4px; font: 600 11.5px/1 var(--f-ledger, ui-monospace); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 70%, transparent); }
.welcome-date-year { font-family: var(--f-num); font-size: 56px; line-height: .86; letter-spacing: -.035em; font-variation-settings: "wdth" 116, "wght" 800; color: var(--seal); }
.welcome-date-title { align-self: center; font: 600 15.5px/1.35 var(--f-ui); color: var(--paper); }
.welcome-date-go { position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: color-mix(in srgb, var(--paper) 70%, transparent); transition: transform .2s ease; }
.welcome-date:hover .welcome-date-go { transform: translate(3px, -50%); }

.welcome-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: step; }
.welcome-steps li { display: grid; justify-items: start; gap: 2px; padding: 12px 12px 11px; border-radius: 12px; background: var(--wash); }
.welcome-step-ic { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 50%; background: var(--paper); color: var(--seal); box-shadow: var(--card-shadow); }
.welcome-step-ic .icon { width: 16px; height: 16px; }
.welcome-steps b { font: 700 14.5px/1.25 var(--f-ui); color: var(--ink); }
.welcome-steps span:not(.welcome-step-ic) { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }

.welcome-actions { display: grid; justify-items: start; gap: 10px; margin-top: 2px; }
.welcome-actions .sign-in-options { justify-items: start; width: 100%; }
.welcome-actions .sign-in-row { max-width: 380px; }
.welcome-actions .sign-in-fine { display: none; }
.welcome-more { font-weight: 600; font-size: 14.5px; }
.welcome-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* As the sign-in page: centred, a little roomier. */
.welcome.is-login { max-width: 520px; margin: 18px auto 0; padding: 30px 28px 24px; }
.welcome.is-login .welcome-title { font-size: clamp(28px, 7vw, 36px); }

@media (max-width: 560px) {
  .welcome { gap: 12px; padding: 20px 16px 16px; border-radius: 0; }
  .welcome.is-login { margin: 0; padding: 26px 18px 20px; box-shadow: none; background: transparent; }
  .welcome-date { padding: 14px 40px 14px 16px; column-gap: 14px; }
  .welcome-date-year { font-size: 48px; }
  .welcome-date-title { font-size: 14.5px; }
  .welcome-steps { gap: 6px; }
  .welcome-steps li { padding: 10px 9px 9px; }
  .welcome-step-ic { width: 26px; height: 26px; margin-bottom: 4px; }
  .welcome-steps b { font-size: 13.5px; }
  .welcome-steps span:not(.welcome-step-ic) { font-size: 11.5px; }
  .welcome-actions .sign-in-row { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .welcome-date-go { transition: none; } }
:root[data-theme="dark"] .welcome-date { background: var(--well); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); }
:root[data-theme="dark"] .welcome-date-title { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .welcome-date { background: var(--well); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); }
  :root[data-theme="auto"] .welcome-date-title { color: var(--ink); }
}

/* Welcome: the big date card in the house style, light like every other card (no dark panel, no glow). */
.welcome-date { background: var(--wash); color: var(--ink); box-shadow: none; }
.welcome-date::after { display: none; }
.welcome-date:hover { background: color-mix(in srgb, var(--wash) 70%, var(--rule)); }
.welcome-date-label { color: var(--ink-3); }
.welcome-date-title { color: var(--ink); }
.welcome-date-go { color: var(--ink-3); }
:root[data-theme="dark"] .welcome-date { background: var(--wash); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .welcome-date { background: var(--wash); box-shadow: none; } }

/* The wall's right rail (partials/rail-home), in the manner of a social timeline's: quiet cards, a bold title,
   full-bleed rows that light up on hover, small grey meta lines, no large figures. */
.rail-right .x-card { padding: 14px 0 6px; gap: 0; overflow: hidden; }
.x-title { margin: 0 16px 8px; font: 800 19px/1.25 var(--f-ui); letter-spacing: -.01em; color: var(--ink); }
.x-sub { margin: 0 16px 10px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.x-sub b { color: var(--ink); }
.x-join { padding-bottom: 16px; }
.x-join .sign-in-options { justify-items: stretch; padding: 0 16px; }
.x-join .sign-in-row { max-width: none; }
.x-join .sign-in-with, .x-join .sign-in-fine { display: none; }
.x-row { display: grid; gap: 2px; padding: 10px 16px; color: inherit; text-decoration: none; transition: background .15s ease; }
.x-row:hover { background: var(--wash); }
.x-meta { font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.x-head { font: 700 15px/1.35 var(--f-ui); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.x-more { display: block; padding: 12px 16px 10px; font-size: 14.5px; color: var(--seal); text-decoration: none; transition: background .15s ease; }
.x-more:hover { background: var(--wash); }
.x-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 16px; transition: background .15s ease; }
.x-person:hover { background: var(--wash); }
.x-av { width: 40px; height: 40px; border-radius: 50%; }
.x-person-name { display: grid; min-width: 0; color: inherit; text-decoration: none; }
.x-person-name b { display: flex; align-items: center; gap: 4px; font: 700 15px/1.3 var(--f-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-person-name span { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-person-name:hover b { text-decoration: underline; }
.x-follow { padding: 7px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 13.5px/1 var(--f-ui); text-decoration: none; }
.x-follow:hover { opacity: .88; }
.x-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 4px 16px 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.x-foot a { color: inherit; text-decoration: none; }
.x-foot a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .x-row, .x-more, .x-person { transition: none; } }
/* Home rail on short screens: tighter rows first, then three of them, each on one line. */
.rail-right.is-compact .x-card { padding-top: 12px; }
.rail-right.is-compact .x-title { margin-bottom: 4px; font-size: 18px; }
.rail-right.is-compact .x-row, .rail-right.is-compact .x-person { padding-top: 8px; padding-bottom: 8px; }
.rail-right.is-tight .x-row:nth-child(n+5) { display: none; }
.rail-right.is-tight .x-head { -webkit-line-clamp: 1; }
.rail-right.is-tight .x-sub { display: none; }

/* The welcome keeps its own way in on every screen; the rail's "New to Fazoh?" is a second door, with the terms. */
.x-join .sign-in-fine { display: block; margin: 10px 0 0; max-width: none; font-size: 12.5px; text-align: left; }

/* Every post on the wall starts the same way: the avatar top-left at the same point and the name level with its
   top, whatever the post is (claim, answer, take, reading, verdict) and however long the line under the name runs. */
.post-head { align-items: flex-start; }
.post-head > .post-avatar, .post-head > .post-avatar-wrap { flex: none; width: 40px; height: 40px; }
.post-who { min-width: 0; padding-top: 1px; }

/* Wall infinite scroll: three quiet dots while the next page loads; the link stays for no-JS readers. */
.feed-more { display: grid; justify-items: center; gap: 8px; }
.feed-loading { display: none; gap: 6px; padding: 14px 0; }
.feed-loading i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); opacity: .35; animation: feed-dot 1s ease-in-out infinite; }
.feed-loading i:nth-child(2) { animation-delay: .15s; }
.feed-loading i:nth-child(3) { animation-delay: .3s; }
.feed-more.is-loading .feed-loading { display: flex; }
.feed-more.is-loading .btn-ghost { display: none; }
@keyframes feed-dot { 50% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .feed-loading i { animation: none; opacity: .6; } }

/* YouTube evidence (components/youtube): a 16:9 still with YouTube's play button, then the player in its place. */
.yt { margin: 10px 0 0; }
.yt-play, .yt-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; overflow: hidden; background: #000; }
.yt-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, opacity .2s ease; }
.yt-play:hover img { transform: scale(1.02); opacity: .92; }
.yt-btn { position: absolute; inset: 0; display: grid; place-items: center; }
.yt-btn svg { width: 64px; height: 45px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); transition: transform .15s ease; }
.yt-play:hover .yt-btn svg { transform: scale(1.08); }
.yt-cap { margin: 6px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.yt-cap span { color: var(--ink-3); }
.ref .yt { max-width: 520px; }
.post-yt { margin: 10px 0 2px; }
@media (prefers-reduced-motion: reduce) { .yt-play img, .yt-btn svg { transition: none; } }

/* Wall: a new claim leads with its desk's picture, like a link card. */
.post-media { display: block; margin: 0 0 10px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.post-media img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 60%; }
:root[data-theme="dark"] .post-media img { filter: invert(1) hue-rotate(180deg); opacity: .9; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .post-media img { filter: invert(1) hue-rotate(180deg); opacity: .9; } }

/* Phones: every control is easy to hit (at least 40px tall) without looking bigger; padding grows the target. */
@media (max-width: 900px) {
  .bar .btn-ghost, .bar .btn-cta { min-height: 38px; }
  .chip, .ledger-chips .chip, .seg { min-height: 38px; display: inline-flex; align-items: center; }
  .welcome-more, .rc-cta, .x-more, .link-btn { display: inline-flex; align-items: center; min-height: 40px; }
  .site-footer .footer-nav a, .site-footer .footer-nav .link-btn { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 4px; }
  .lrow-desk { padding-block: 6px; }
  .post-actions .act { min-height: 44px; }
  .ledger-chips select, .field select { min-height: 40px; }
  .dev-list .btn { min-height: 40px; }
}
@media (max-width: 900px) {
  /* Official pages: the page list becomes one swipeable row of chips instead of four rows of tiny links. */
  .doc-nav { flex-wrap: nowrap; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: -16px; padding: 0 16px 12px; scroll-padding-inline: 16px; }
  .doc-nav::-webkit-scrollbar { display: none; }
  .doc-nav a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--wash); white-space: nowrap; }
  .doc-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
  .ledger-sorts a { display: inline-flex; align-items: center; min-height: 40px; }
  .when-crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
}

/* ---------- Claim page: the dossier (picture, facts, flow, history, sides, evidence, ladder) ---------- */
.page-main > section.claim-flow, .page-main > section.history, .page-main > section.ladder-sec,
.page-main > section.sides-sec, .page-main > section.evidence-sec {
  background: var(--paper); border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 22px 24px 24px; scroll-margin-top: 76px; min-width: 0;
}
.claim-art { margin: -22px -24px 18px; border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); }
.claim-art img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 2; object-fit: cover; object-position: 50% 58%; }
:root[data-theme="dark"] .claim-art img { filter: invert(1) hue-rotate(180deg); opacity: .9; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .claim-art img { filter: invert(1) hue-rotate(180deg); opacity: .9; } }

/* At a glance */
.claim-facts { margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; }
.claim-facts > div { background: var(--well); padding: 11px 13px; min-width: 0; }
.claim-facts dt { margin: 0 0 4px; color: var(--ink-3); }
.claim-facts dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.claim-facts dd small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
.claim-facts a { color: var(--ink); }

/* How the claim is decided */
.claim-flow h2 { margin: 0 0 14px; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.flow-step { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; gap: 8px; padding: 0 4px; min-width: 0; }
.flow-step::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--rule); z-index: 0; }
.flow-step:first-child::before { display: none; }
.flow-step.is-done::before, .flow-step.is-now::before { background: var(--ink); }
.flow-dot {
  position: relative; z-index: 1; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); border: 2px solid var(--rule); color: var(--ink-3); font: 700 13px/1 var(--f-ui);
}
.flow-dot .icon { width: 18px; height: 18px; }
.flow-step.is-done .flow-dot { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.flow-step.is-now .flow-dot { border-color: var(--seal); color: var(--seal); box-shadow: 0 0 0 5px var(--seal-wash); }
.flow-text { display: grid; gap: 2px; }
.flow-text b { font-size: 13.5px; line-height: 1.25; }
.flow-text small { font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.flow-step.is-now .flow-text b { color: var(--seal); }

/* The record over time */
.history .odds-legend { margin: 14px 0 6px; }
.history-svg { display: block; width: 100%; height: auto; overflow: visible; }
.history-grid { stroke: var(--line); stroke-width: 1; }
.history-grid.is-mid { stroke: var(--rule); stroke-dasharray: 4 4; }
.history-tick { fill: var(--ink-3); font: 11px var(--f-ui); font-variant-numeric: tabular-nums; }
.history-crowd { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.history-faz { fill: none; stroke: var(--seal); stroke-width: 2.6; stroke-linejoin: round; }
.history-mark circle { fill: var(--paper); stroke: var(--seal); stroke-width: 2; }
.history-mark text { fill: var(--seal); font: 700 10px var(--f-ui); }
.history-sub { margin: 22px 0 8px; color: var(--ink-3); }
.history > .section-head + .history-sub { margin-top: 14px; }

/* Tables on the claim page */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; font: 600 11px/1.2 var(--f-ledger); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.data-table td, .data-table tbody th { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table tbody tr:last-child td, .data-table tbody tr:last-child th { border-bottom: 0; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .nowrap { white-space: nowrap; }
.data-table small { color: var(--ink-3); font-size: 12px; }
.data-table a { color: var(--ink); text-decoration: none; font-weight: 600; }
.data-table a:hover { text-decoration: underline; }
.data-table .muted, .data-table .muted a { color: var(--ink-3); font-weight: 400; }
.data-table td.why { color: var(--ink-2); line-height: 1.45; min-width: 220px; }
.delta { font-weight: 700; }
.delta.up { color: #1a7f4b; }
.delta.down { color: #b42318; }

/* How sure the members are */
.spread { height: 110px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; align-items: end; }
.spread-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.spread-bar i { display: block; width: 100%; height: var(--h); min-height: 2px; border-radius: 5px 5px 2px 2px; background: var(--ink-3); opacity: .5; }
.spread-bar.is-yes i { background: var(--ink); opacity: 1; }
.spread-bar b { order: -1; font: 600 11px var(--f-ui); color: var(--ink-2); }
.spread-axis { margin-top: 8px; display: flex; justify-content: space-between; color: var(--ink-3); }

/* The case on each side */
.sides-table { table-layout: fixed; margin-top: 4px; }
.sides-table thead th:first-child { width: 26%; }
.sides-table thead th { font-size: 12px; }
.sides-table thead th .glyph { margin-right: 6px; }
.sides-table tbody th { font: 500 13.5px/1.35 var(--f-ui); color: var(--ink-2); text-transform: none; letter-spacing: 0; white-space: normal; }
.sides-table td.num { text-align: left; font-size: 16px; font-weight: 700; }
.sides-table td.num small { font-weight: 400; margin-left: 4px; }
.sides-table tr.is-text td { line-height: 1.4; overflow-wrap: anywhere; }
.sides-table tr.is-text td a { display: block; font-family: var(--f-read); font-weight: 600; }
.sides-table tr.is-text td small { display: block; margin-top: 3px; }

/* Evidence on the record */
.evidence-table { margin-top: 4px; }
.evidence-table td.ev-source { min-width: 260px; }
.evidence-table td.ev-source a { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.evidence-table td.ev-source small { display: block; margin-top: 3px; }
.evidence-table td.ev-source q { display: block; margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--rule); color: var(--ink-2); font: italic 13.5px/1.45 var(--f-read); }
.grade { display: inline-grid; justify-items: center; min-width: 34px; padding: 4px 6px; border-radius: 8px; background: var(--well); font: 800 14px/1 var(--f-num); }
.grade small { font: 500 9.5px/1.2 var(--f-ui); color: inherit; opacity: .8; margin-top: 2px; }
.grade-a { background: var(--ink); color: var(--paper); }
.grade-b { background: var(--wash); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.grade-c, .grade-d { color: var(--ink-3); }
.ev-by { min-width: 130px; }
.ev-by > * + * { margin-top: 4px; }
.ev-person { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ev-person .glyph { width: 10px; height: 10px; }
.ev-person a { font-weight: 600; }
.ev-faz { display: block; font: 600 11.5px var(--f-ui); color: var(--seal); }
.evidence-more { margin-top: 4px; border-top: 1px solid var(--line); }
.evidence-more summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font: 700 14px var(--f-ui); color: var(--ink); }
.evidence-note { margin: 14px 0 0; color: var(--ink-3); }
.evidence-note a { color: var(--ink-2); }

/* One rung of a ladder */
.ladder-lead { margin: 12px 0 8px; font-family: var(--f-read); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ladder-lead a { color: var(--ink); }
.ladder-table tr.is-here td { background: var(--seal-wash); }
.ladder-table tr.is-here td:first-child { box-shadow: inset 3px 0 0 var(--seal); }
.ladder-table td:first-child, .ladder-table th:first-child { padding-left: 10px; }
.ladder-table .bar-col { width: 34%; }
.rung-bar { display: block; height: 8px; border-radius: 999px; background: var(--well); overflow: hidden; margin-top: 5px; }
.rung-bar i { display: block; height: 100%; background: var(--seal); border-radius: inherit; }

@media (max-width: 900px) {
  .page-main > section.claim-flow, .page-main > section.history, .page-main > section.ladder-sec,
  .page-main > section.sides-sec, .page-main > section.evidence-sec { border-radius: 0; padding-left: 16px; padding-right: 16px; }
  .claim-art { margin: -22px -16px 16px; border-radius: 0; }
}
@media (max-width: 640px) {
  .claim-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .claim-art img { aspect-ratio: 2 / 1; }
  /* The flow turns vertical: a line down the left. */
  .flow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .flow-step { grid-template-columns: 32px minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; gap: 12px; padding: 0; }
  .flow-step::before { top: -12px; left: 15px; width: 2px; height: 12px; }
  .history-tick { font-size: 21px; }
  .history-mark circle { r: 12px; }
  .history-mark text { font-size: 15px; transform: translateY(2px); transform-box: fill-box; }
  .history-svg .history-faz { stroke-width: 4; }
  .history-svg .history-crowd { stroke-width: 3.4; }
  /* Readings: the date, chance and change on one line, what moved it underneath. */
  .revisions-table thead { display: none; }
  .revisions-table tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
  .revisions-table tbody tr:last-child { border-bottom: 0; }
  .revisions-table td { padding: 0; border: 0; }
  .revisions-table td.why { grid-column: 2 / -1; min-width: 0; font-size: 13px; }
  .revisions-table td.why.is-empty { display: none; }
  .data-table { font-size: 13.5px; }
  /* Evidence rows become cards: the source on top, grade and people below. */
  .evidence-table thead { display: none; }
  .evidence-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .evidence-table tbody tr:last-child { border-bottom: 0; }
  .evidence-table td { padding: 0; border: 0; }
  .evidence-table td.ev-source { grid-column: 1 / -1; min-width: 0; }
  .ev-by { min-width: 0; align-self: center; }
  .sides-table thead th:first-child { width: 30%; }
  .ladder-table .bar-col { width: 24%; }
}

/* ---------- Claim page: official data and track records (App\Exhibits\Catalog) ---------- */
.page-main > section.exhibit {
  background: var(--paper); border-radius: var(--r-card); box-shadow: var(--card-shadow); padding: 22px 24px 22px; scroll-margin-top: 76px; min-width: 0;
}
.exhibit-caption { margin: 12px 0 0; font-family: var(--f-read); font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.exhibit-facts { margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.exhibit-facts > div { padding: 12px 14px; border-radius: 12px; background: var(--well); min-width: 0; }
.exhibit-facts dt { margin: 0 0 6px; color: var(--ink-3); }
.exhibit-facts dd { margin: 0; font: 700 22px/1.1 var(--f-num); font-variation-settings: "wdth" 90, "wght" 700; overflow-wrap: anywhere; }
.exhibit-facts dd small { display: block; margin-top: 5px; font: 400 12.5px/1.35 var(--f-ui); color: var(--ink-3); }
.exhibit-legend { margin: 18px 0 4px; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 600 12.5px var(--f-ui); color: var(--ink-2); }
.exhibit-legend span { display: inline-flex; align-items: center; gap: 7px; }
.exhibit-legend i { display: inline-block; width: 16px; height: 3px; border-radius: 3px; background: var(--ink); }
.exhibit-legend .tone-seal i { background: var(--seal); }
.exhibit-legend .lg-dashed i { background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 8px); }
.exhibit-legend .lg-dashed.tone-seal i { background: repeating-linear-gradient(90deg, var(--seal) 0 5px, transparent 5px 8px); }
.exhibit-legend .lg-dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--seal); }
.exhibit-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ex-grid { stroke: var(--line); stroke-width: 1; }
.ex-grid.is-zero { stroke: var(--rule); stroke-width: 1.4; }
.ex-tick { fill: var(--ink-3); font: 11px var(--f-ui); font-variant-numeric: tabular-nums; }
.ex-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ex-line.tone-ink { stroke: var(--ink); }
.ex-line.tone-seal { stroke: var(--seal); }
.ex-line.is-dashed { stroke-dasharray: 6 5; }
.ex-end, .ex-dot { stroke: var(--paper); stroke-width: 2; }
.ex-end.tone-ink, .ex-dot.tone-ink { fill: var(--ink); }
.ex-end.tone-seal, .ex-dot.tone-seal { fill: var(--seal); }
.ex-mark { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 4; }
.ex-mark-label { fill: var(--ink-2); font: 600 11px var(--f-ui); }
.ex-ref { stroke: var(--seal); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .8; }
.ex-ref-label { fill: var(--seal); font: 600 11px var(--f-ui); }
.ex-note { fill: var(--ink); font: 700 11.5px var(--f-ui); }
.ex-note-dot { fill: var(--paper); stroke: var(--seal); stroke-width: 2.4; }
.exhibit-source { margin: 12px 0 0; color: var(--ink-3); line-height: 1.6; }
.exhibit-source a { color: var(--ink-2); }

/* Track records */
.record-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.record-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.record-when { display: grid; gap: 4px; align-content: start; position: relative; padding-left: 16px; }
.record-when::before { content: ""; position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.record-when b { font: 700 18px/1.15 var(--f-num); font-variation-settings: "wdth" 90, "wght" 700; }
.record-status { font: 600 11.5px var(--f-ui); color: var(--ink-3); }
.record-row.is-passed .record-when b, .record-row.is-moved .record-when b { text-decoration: line-through; text-decoration-color: var(--seal); text-decoration-thickness: 2px; color: var(--ink-2); }
.record-row.is-passed .record-status, .record-row.is-moved .record-status { color: var(--seal); }
.record-row.is-pending .record-when::before { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.record-row.is-pending .record-status { color: var(--ink); }
.record-row.is-kept .record-when::before { background: #1a7f4b; }
.record-what q { display: block; font: italic 15px/1.5 var(--f-read); color: var(--ink); quotes: "\201C" "\201D"; }
.record-what small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.record-what a { color: var(--ink-2); }

@media (max-width: 900px) {
  .page-main > section.exhibit { border-radius: 0; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 640px) {
  .exhibit-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .exhibit-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; }
  .exhibit-facts dt { margin: 0; }
  .exhibit-facts dd { text-align: right; font-size: 19px; }
  .exhibit-facts dd small { margin-top: 2px; }
  .ex-tick { font-size: 20px; }
  .ex-mark-label, .ex-ref-label, .ex-note { font-size: 19px; }
  .ex-line { stroke-width: 3.6; }
  .record-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ---------- Tracking: people, dates, desks, claims; and you against another member ---------- */
.btn-track {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper); font: 700 14px/1 var(--f-ui); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-track .icon { width: 17px; height: 17px; }
.btn-track:hover { opacity: .9; color: var(--paper); }
.btn-track.is-on { background: var(--paper); color: var(--ink); border-color: var(--rule); }
.btn-track.is-on:hover { border-color: var(--ink-3); color: var(--ink); }
.profile-track { margin: 0 0 0 auto; align-self: flex-start; }
.profile-trackers { margin: 12px 0 0; display: flex; align-items: center; gap: 7px; color: var(--ink-3); }
.profile-trackers .icon { width: 15px; height: 15px; }

.when-track { margin: 14px 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.when-track form { margin: 0; }
.when-track-note { font-size: 13.5px; color: var(--ink-3); }

/* You and them */
.versus-empty, .versus-note { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.versus-note { font-size: 12.5px; color: var(--ink-3); }
.versus-board { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.versus-side { display: grid; justify-items: center; gap: 2px; padding: 14px 10px; border-radius: 14px; background: var(--well); text-align: center; min-width: 0; }
.versus-side b { font: 700 40px/1 var(--f-num); font-variation-settings: "wdth" 90, "wght" 700; }
.versus-side small { font-size: 12px; color: var(--ink-3); }
.versus-side.is-lead { background: var(--ink); color: var(--paper); }
.versus-side.is-lead .ledger, .versus-side.is-lead small { color: inherit; opacity: .78; }
.versus-mid { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 0 4px; }
.versus-mid small { font-size: 12px; color: var(--ink-3); }
.versus-table { margin-top: 12px; }
.versus-table td:first-child { min-width: 200px; }
.versus-table b.is-win { color: var(--paper); background: var(--ink); padding: 2px 7px; border-radius: 999px; }

/* The tracking page */
.tracking-page .card { margin-top: 14px; }
.track-sec { padding: 18px 20px; }
.track-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.track-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); min-width: 0; }
.track-list li:first-child { border-top: 0; }
.track-list form { margin: 0 0 0 auto; flex: none; }
.track-main { display: grid; gap: 2px; min-width: 0; }
.track-main a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.track-main a:hover { text-decoration: underline; }
.track-main small { font-size: 12.5px; color: var(--ink-3); }
.track-av { width: 38px; height: 38px; border-radius: 50%; flex: none; object-fit: cover; display: inline-grid; place-items: center; color: #fff; font: 600 15px/1 var(--f-ui); }
.track-year { flex: none; min-width: 58px; font: 700 22px/1 var(--f-num); font-variation-settings: "wdth" 90, "wght" 700; color: var(--seal); }
.track-glyph { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.track-glyph .desk-glyph { width: 28px; height: 28px; }

@media (max-width: 640px) {
  .profile-top { flex-wrap: wrap; }
  .profile-track { margin: 6px 0 0; width: 100%; }
  .profile-track .btn-track, .btn-track.profile-track { width: 100%; justify-content: center; }
  .versus-side b { font-size: 32px; }
  .versus-board { gap: 6px; }
}

/* Track buttons on the home rail: a form button that looks like the old link; "Tracking" is the quiet state. */
.x-person form { margin: 0; flex: none; }
button.x-follow { border: 1px solid var(--ink); cursor: pointer; }
.x-follow.is-on { background: var(--paper); color: var(--ink); border-color: var(--rule); }

/* ---------- The writing room (answers/form.blade.php, public/js/composer.js) ----------
   One sheet of paper in the middle of a quiet page. Without script the plain fields show; with it, the editor. */
body:has(.composer-room) .tabbar { display: none; }
.composer-room { max-width: 760px; margin: 0 auto; padding: 28px 20px 140px; box-sizing: border-box; }
.cmp-crumb { display: grid; gap: 8px; margin-bottom: 22px; }
.cmp-back { display: inline-flex; align-items: center; gap: 4px; width: max-content; color: var(--ink-3); font: 600 13px var(--f-ui); text-decoration: none; }
.cmp-back .icon { width: 15px; height: 15px; transform: rotate(180deg); }
.cmp-back:hover { color: var(--ink); }
.cmp-where { margin: 0; font-size: 13.5px; color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.cmp-where a { color: var(--ink-2); text-decoration: none; }
.cmp-where a:hover { text-decoration: underline; }
.cmp-question { margin: 0; font: 800 clamp(22px, 1rem + 1.4vw, 30px)/1.2 var(--f-head); letter-spacing: -.015em; text-wrap: balance; }

.cmp-parent { margin: 0 0 18px; padding: 18px 20px; border-radius: var(--r-card); background: var(--well); box-shadow: inset 3px 0 0 var(--ink-3); }
.cmp-parent-by { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.cmp-parent-thesis { margin: 0 0 8px; font: 700 17px/1.4 var(--f-head); }
.cmp-parent-text { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-height: 260px; overflow: auto; }
.cmp-parent-text ::selection { background: var(--seal-wash); color: var(--ink); }
.cmp-hint { margin: 10px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.cmp-hint .icon { width: 14px; height: 14px; }

.cmp-errors { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--seal-wash); color: var(--ink); font-size: 14px; }
.cmp-errors b { color: var(--seal); }
.cmp-errors ul { margin: 6px 0 0; padding-left: 18px; }

.composer { display: grid; gap: 16px; }
.cmp-paper { background: var(--paper); border-radius: 20px; box-shadow: var(--card-shadow), 0 18px 40px -28px rgba(15, 20, 25, .25); padding: 26px 30px 28px; display: grid; gap: 18px; }
.cmp-restored { margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--well); font-size: 13.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.cmp-restored button { border: 0; background: none; padding: 0; font: 600 13.5px var(--f-ui); color: var(--ink); text-decoration: underline; cursor: pointer; }

/* Rebuttal: what you are doing, and the passage */
.cmp-kind { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.cmp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-pill input { position: absolute; opacity: 0; pointer-events: none; }
.cmp-pill span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--well); font: 600 13.5px var(--f-ui); color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s; }
.cmp-pill input:checked + span { background: var(--ink); color: var(--paper); }
.cmp-pill input:focus-visible + span { outline: 2px solid var(--seal); outline-offset: 2px; }
.cmp-quote { display: grid; gap: 6px; }
.cmp-quote textarea { border: 0; border-left: 3px solid var(--seal); border-radius: 0; background: transparent; padding: 4px 0 4px 14px; font: italic 16px/1.5 var(--f-read); color: var(--ink); resize: vertical; min-height: 48px; }
.cmp-quote textarea:focus { outline: none; background: var(--well); }

/* Your side */
.cmp-side { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-side legend { margin-bottom: 8px; }
.cmp-side-card input { position: absolute; opacity: 0; pointer-events: none; }
.cmp-side-card > span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 13px 16px; border-radius: 14px; border: 1.5px solid var(--rule); cursor: pointer; transition: border-color .15s, background .15s; }
.cmp-side-card .glyph { grid-row: 1 / 3; }
.cmp-side-card b { font: 700 15.5px/1.2 var(--f-ui); }
.cmp-side-card small { font-size: 12.5px; color: var(--ink-3); }
.cmp-side-card:hover > span { border-color: var(--ink-3); }
.cmp-side-card input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.cmp-side-card input:checked + span small { color: inherit; opacity: .75; }
.cmp-side-card input:checked + span .glyph.yes { background: var(--paper); border-color: var(--paper); }
.cmp-side-card input:checked + span .glyph.no { background: var(--hatch-paper); border-color: var(--paper); }
.cmp-side-card input:focus-visible + span { outline: 2px solid var(--seal); outline-offset: 2px; }

/* The thesis reads like a headline */
.cmp-thesis-wrap { position: relative; display: block; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.cmp-thesis { width: 100%; box-sizing: border-box; border: 0; background: transparent; resize: none; overflow: hidden; padding: 0; color: var(--ink); font: 750 clamp(21px, 1rem + 1vw, 26px)/1.3 var(--f-head); letter-spacing: -.01em; }
.cmp-thesis::placeholder { color: var(--ink-3); opacity: .7; }
.cmp-thesis:focus { outline: none; }
.cmp-count { position: absolute; right: 0; bottom: -18px; font: 500 11px var(--f-ledger); color: var(--ink-3); }

/* Toolbar */
.cmp-toolbar, .cmp-editor, .cmp-sources-js { display: none; }
.composer.is-live .cmp-toolbar { display: flex; }
.composer.is-live .cmp-editor { display: block; }
.composer.is-live .cmp-sources-js { display: grid; }
.composer.is-live .cmp-fallback { display: none; }
.cmp-fallback { width: 100%; box-sizing: border-box; border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; font: 16px/1.6 var(--f-read); background: var(--paper); color: var(--ink); }
.cmp-fallback-sources { border: 0; padding: 0; }
.cmp-toolbar { position: sticky; top: 64px; z-index: 6; align-items: center; gap: 2px; flex-wrap: wrap; padding: 6px; margin: 0 -8px; border-radius: 12px; background: var(--bar-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cmp-toolbar button { position: relative; min-width: 36px; height: 34px; padding: 0 9px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 600 15px var(--f-ui); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cmp-toolbar button:hover { background: var(--well); color: var(--ink); }
.cmp-toolbar .icon { width: 17px; height: 17px; }
.cmp-sep { width: 1px; height: 20px; background: var(--rule); margin: 0 4px; }
.cmp-q { font: 700 22px/1 var(--f-read); margin-top: 6px; }
.cmp-ul { display: grid; gap: 3px; }
.cmp-ul i { display: block; width: 14px; height: 2px; background: currentColor; border-radius: 2px; box-shadow: -4px 0 0 currentColor; margin-left: 4px; }
.cmp-ol { font: 700 13px var(--f-ledger); }
.cmp-cite-btn { margin-left: auto; background: var(--seal-wash) !important; color: var(--seal) !important; }
.cmp-cite-btn span { font: 700 11px var(--f-ledger); }
.cmp-cite-menu { position: absolute; right: 6px; top: 44px; z-index: 8; display: grid; min-width: 260px; max-width: 360px; padding: 6px; border-radius: 12px; background: var(--paper); box-shadow: var(--lift-shadow); }
.cmp-cite-menu button { display: block; justify-content: flex-start; text-align: left; height: auto; padding: 9px 10px; font: 500 13.5px/1.35 var(--f-ui); color: var(--ink); white-space: normal; }
.cmp-cite-menu b { color: var(--seal); font-family: var(--f-ledger); }

/* The editor: generous, quiet, readable */
.cmp-editor { min-height: 240px; outline: none; font: 18px/1.72 var(--f-read); color: var(--ink); caret-color: var(--seal); padding: 4px 0; word-wrap: break-word; }
.cmp-editor.is-small { min-height: 120px; font-size: 16.5px; }
.cmp-editor.is-empty::before { content: attr(data-placeholder); color: var(--ink-3); opacity: .75; pointer-events: none; position: absolute; }
.cmp-editor p { margin: 0 0 .9em; }
.cmp-editor blockquote { margin: 0 0 .9em; padding: 2px 0 2px 16px; border-left: 3px solid var(--seal); color: var(--ink-2); font-style: italic; }
.cmp-editor ul, .cmp-editor ol { margin: 0 0 .9em; padding-left: 1.4em; }
.cmp-editor li { margin: .2em 0; }
.cmp-editor a { color: var(--ink); text-decoration-color: var(--seal); text-underline-offset: 3px; }
.cmp-chip { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin: 0 1px; box-sizing: border-box; border-radius: 6px; background: var(--seal); color: #fff; font: 700 11.5px/1 var(--f-ledger); vertical-align: 3px; cursor: default; user-select: all; }
.cmp-chip.is-orphan { background: var(--ink-3); text-decoration: line-through; }

.cmp-bubble { position: absolute; z-index: 50; display: none; gap: 2px; padding: 4px; border-radius: 10px; background: var(--ink); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.cmp-bubble.is-on { display: flex; }
.cmp-bubble button { height: 30px; min-width: 32px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--paper); font: 600 13.5px var(--f-ui); cursor: pointer; }
.cmp-bubble button:hover { background: rgba(255, 255, 255, .14); }

/* The steelman, folded until wanted */
.cmp-steelman { border-top: 1px dashed var(--rule); padding-top: 14px; }
.cmp-steelman summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 650 15px var(--f-ui); }
.cmp-steelman summary::-webkit-details-marker { display: none; }
.cmp-steelman summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--well); font-weight: 700; }
.cmp-steelman[open] summary::before { content: "–"; }
.cmp-steelman summary small { font: 500 12.5px var(--f-ui); color: var(--ink-3); }
.cmp-steelman .cmp-editor { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--well); }
.cmp-steelman .cmp-editor.is-empty::before { position: static; }

/* Sources: cards, not forms */
.cmp-sources { gap: 12px; }
.cmp-sources-head { display: grid; gap: 2px; }
.cmp-sources-head h2 { margin: 0; font: 800 17px var(--f-head); }
.cmp-sources-head p { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.cmp-source-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cmp-source { background: var(--paper); border-radius: 16px; box-shadow: var(--card-shadow); padding: 14px 16px; display: grid; gap: 10px; }
.cmp-source.is-uncited .cmp-num { background: var(--ink-3); }
.cmp-source-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.cmp-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--seal); color: #fff; font: 700 13px var(--f-ledger); }
.cmp-source-id { display: grid; gap: 4px; min-width: 0; }
.cmp-title { border: 0; background: none; padding: 0; font: 700 15.5px/1.35 var(--f-ui); color: var(--ink); width: 100%; text-overflow: ellipsis; }
.cmp-title:focus, .cmp-pub:focus, .cmp-date:focus { outline: none; background: var(--well); border-radius: 6px; }
.cmp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--ink-3); }
.cmp-meta a { color: var(--ink-2); }
.cmp-pub, .cmp-date { border: 0; background: none; padding: 1px 4px; font: 12.5px var(--f-ui); color: var(--ink-3); min-width: 0; }
.cmp-pub { width: 150px; }
.cmp-source-act { display: flex; gap: 4px; }
.cmp-mini { height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper); font: 600 12.5px var(--f-ui); color: var(--ink); cursor: pointer; white-space: nowrap; }
.cmp-mini:hover { border-color: var(--ink); }
.cmp-mini.is-quiet { border-color: transparent; color: var(--ink-3); }
.cmp-shimmer { color: var(--ink-3); font: 600 14px var(--f-ui); animation: cmp-pulse 1.2s ease-in-out infinite; }
@keyframes cmp-pulse { 50% { opacity: .45; } }
.cmp-source-note { margin: 0; font-size: 13px; color: var(--ink-3); }
.cmp-pick-label { margin: 0; font: 650 13px var(--f-ui); color: var(--ink-2); }
.cmp-pick-search { width: 100%; box-sizing: border-box; height: 34px; border: 1px solid var(--rule); border-radius: 999px; padding: 0 14px; font: 13.5px var(--f-ui); background: var(--well); color: var(--ink); }
.cmp-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; border-radius: 10px; }
.cmp-picks button { width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font: 14px/1.45 var(--f-read); color: var(--ink-2); cursor: pointer; }
.cmp-picks button:hover { background: var(--seal-wash); color: var(--ink); }
.cmp-own { width: 100%; box-sizing: border-box; border: 1px dashed var(--rule); border-radius: 10px; padding: 8px 10px; font: 14px/1.45 var(--f-read); background: none; color: var(--ink); resize: vertical; }
.cmp-own.over { border-color: var(--seal); }
.cmp-picked { margin: 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--seal); font: italic 15px/1.5 var(--f-read); color: var(--ink); }
.cmp-link { justify-self: start; border: 0; background: none; padding: 0; font: 600 12.5px var(--f-ui); color: var(--ink-3); text-decoration: underline; cursor: pointer; }
.cmp-add { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--paper); box-shadow: var(--card-shadow); }
.cmp-add .icon { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.cmp-add input { flex: 1; min-width: 0; border: 0; background: none; font: 15px var(--f-ui); color: var(--ink); height: 34px; }
.cmp-add input:focus { outline: none; }
.cmp-add input.is-call { animation: cmp-call .9s ease 1; }
@keyframes cmp-call { 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }
.cmp-add-btn { flex: none; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 13.5px var(--f-ui); cursor: pointer; }

/* The bar that stays with you */
.cmp-bar { position: sticky; bottom: 14px; z-index: 7; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--bar-bg); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); box-shadow: var(--lift-shadow); }
.cmp-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 0; min-width: 0; }
.cmp-bar .cmp-submit { flex: none; }
.cmp-checks li { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--well); font: 600 11.5px var(--f-ui); color: var(--ink-3); }
.cmp-checks li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rule); }
.cmp-checks li.ok { color: var(--ink); }
.cmp-checks li.ok::before { background: #1a9c5b; }
.cmp-saved { font: 500 12px var(--f-ui); color: var(--ink-3); }
.cmp-progress { display: none; font: 650 13px var(--f-ui); color: var(--ink-2); }
.cmp-progress.ok { color: #1a7f4b; }
.cmp-cancel { font: 600 13.5px var(--f-ui); color: var(--ink-3); text-decoration: none; }
.cmp-cancel:hover { color: var(--ink); }
.cmp-submit { height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 15px var(--f-ui); cursor: pointer; }
.cmp-submit:hover { opacity: .9; }

.cmp-rules { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.cmp-rules summary { cursor: pointer; font-weight: 600; color: var(--ink-3); }
.cmp-rules ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; }

:root[data-theme="dark"] .cmp-paper { box-shadow: var(--card-shadow); }

@media (max-width: 640px) {
  .composer-room { padding: 14px 12px 120px; }
  .cmp-paper { padding: 18px 16px 20px; border-radius: 16px; gap: 16px; }
  .cmp-side { grid-template-columns: 1fr; }
  .cmp-toolbar { top: 56px; margin: 0 -6px; }
  .cmp-toolbar button { min-width: 34px; padding: 0 7px; }
  .cmp-editor { font-size: 17px; min-height: 200px; }
  .cmp-source-top { grid-template-columns: auto minmax(0, 1fr); }
  .cmp-source-act { grid-column: 1 / -1; justify-content: flex-end; }
  .cmp-bar { bottom: 8px; padding: 8px 8px 8px 12px; }
  .cmp-checks { display: none; }
  .cmp-progress { display: inline; flex: 1; }
  .cmp-saved { display: none; }
}

/* The way into the writing room, on the question page */
.cmp-teaser { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--ink); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.cmp-teaser:hover { box-shadow: var(--lift-shadow); color: var(--ink); }
.cmp-teaser-av { width: 42px; height: 42px; border-radius: 50%; flex: none; object-fit: cover; display: inline-grid; place-items: center; color: #fff; font: 600 16px/1 var(--f-ui); }
.cmp-teaser-av.is-blank { background: var(--well); color: var(--ink-3); }
.cmp-teaser-av .icon { width: 18px; height: 18px; }
.cmp-teaser-text { display: grid; gap: 3px; flex: 1; min-width: 0; padding: 10px 14px; border-radius: 14px; background: var(--well); }
.cmp-teaser-text b { font: 650 15.5px/1.3 var(--f-head); }
.cmp-teaser-text span { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.cmp-teaser-go { flex: none; height: 38px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--paper); display: inline-grid; place-items: center; font: 700 14px var(--f-ui); }
@media (max-width: 640px) { .cmp-teaser { padding: 12px 14px; gap: 10px; } .cmp-teaser-go { display: none; } }

/* ---------- Academic signals: graded evidence, Faz's citation, citing an answer, the writer's record ---------- */
.refs-sum { margin: 14px 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink-2); }
.refs-sum .ledger { color: var(--ink-3); }
.refs-sum b { font-weight: 700; color: var(--ink); }
.refs-sum-g { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font: 600 12px var(--f-ui); }
.refs-sum-g.grade-a { background: var(--ink); color: var(--paper); }
.refs-sum-g.grade-b { background: var(--well); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.refs-sum-note { color: var(--ink-3); }
.refs-sum-how { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.post .ref-grade, .ref-grade { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; margin-left: 6px; border-radius: 999px; font: 600 11px var(--f-ui); vertical-align: 1px; white-space: nowrap; background: var(--well); color: var(--ink-3); box-shadow: none; min-width: 0; }
.ref-grade.grade-a { background: var(--ink); color: var(--paper); }
.ref-grade.grade-b { background: var(--wash); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.ref-grade.grade-d { background: var(--seal-wash); color: var(--seal); }

.chip-cited { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--seal-wash); color: var(--seal); font: 650 12px var(--f-ui); }
.chip-cited .icon { width: 13px; height: 13px; }

.act-cite { position: relative; }
.act-cite > summary { list-style: none; cursor: pointer; }
.act-cite > summary::-webkit-details-marker { display: none; }
.act-cite[open] > summary { color: var(--ink); }
.cite-pop { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 12; width: min(460px, 86vw); padding: 14px 16px; border-radius: 14px; background: var(--paper); box-shadow: var(--lift-shadow); display: grid; gap: 8px; text-align: left; }
.cite-pop .ledger { margin: 0; color: var(--ink-3); }
.cite-text { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--well); font: 14px/1.55 var(--f-read); color: var(--ink); user-select: all; overflow-wrap: anywhere; }
.cite-foot { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.cite-foot a { color: var(--ink-3); }

.writing-grid { margin: 10px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.writing-grid > div { padding: 10px 12px; border-radius: 12px; background: var(--well); display: grid; gap: 2px; min-width: 0; }
.writing-grid dt { font: 600 11px var(--f-ledger); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.writing-grid dd { margin: 0; font: 700 26px/1.05 var(--f-num); font-variation-settings: "wdth" 90, "wght" 700; }
.writing-grid small { font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }
.writing-bar { margin-top: 12px; height: 8px; border-radius: 999px; background: var(--well); overflow: hidden; display: flex; }
.writing-bar .is-a { background: var(--ink); }
.writing-bar .is-b { background: #8b97a5; }
.writing-note { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-3); }

@media (max-width: 640px) {
  .writing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .writing-grid > div:last-child { grid-column: 1 / -1; }
  .cite-pop { right: auto; left: 50%; transform: translateX(-60%); }
  .refs-sum-how { margin-left: 0; }
}

/* The Cite action sits in the row like the others. */
.post-actions .act-cite { flex: 1 1 auto; display: flex; }
.post-actions .act-cite > summary.act { flex: 1; justify-content: center; }

/* People (record/leaderboard): everyone on the record, with the record a reviewer would look at. */
.people-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--wash); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.people-note .icon { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--seal); }
.people { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.people > li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.people-av { width: 44px; height: 44px; border-radius: 50%; }
.people-name { margin: 0; font-size: 16.5px; }
.people-name a { font-weight: 700; color: var(--ink); text-decoration: none; }
.people-name a:hover { text-decoration: underline; }
.people-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.people-record { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.people-record li { padding: 4px 10px; border-radius: 999px; background: var(--wash); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.people-record li b { color: var(--ink); font-variant-numeric: tabular-nums; }
.people-record li.is-faz { background: var(--seal-wash); color: var(--seal); }
.people-record li.is-faz b { color: var(--seal); }
.record-waiting { margin: 22px 0 6px; }
.record-h3 { margin: 18px 0 8px; font: 700 16.5px/1.3 var(--f-head); color: var(--ink); }
.when-next-title { font-size: 15px; line-height: 1.35; color: var(--ink); }
@media (max-width: 640px) {
  .people > li { grid-template-columns: 40px minmax(0, 1fr); }
  .people-record { grid-column: 1 / -1; justify-content: flex-start; }
}
.post-topic .fig-range { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }

/* Faz's ruling and the positions people defend (components/ruling, components/positions): words, never numbers. */
.ruling { display: inline-grid; gap: 2px; align-content: start; }
.ruling-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ruling-head { font: 700 17px/1.2 var(--f-head); color: var(--ink); }
.ruling-range { font-size: 12.5px; color: var(--ink-3); }
.ruling.is-dated .ruling-head, .ruling.is-happened .ruling-head { font-family: var(--f-num); font-variation-settings: "wdth" 110, "wght" 750; color: var(--seal); }
.ruling.is-happened .ruling-head { color: var(--ok); }
.ruling.is-watching .ruling-head, .ruling.is-pending .ruling-head { color: var(--ink-2); }
.ruling.is-likely .ruling-head { color: var(--ok); }
.ruling.is-open .ruling-head { color: var(--ink); }
.ruling.is-unlikely .ruling-head { color: var(--seal); }
.ruling.is-sealed .ruling-head { color: var(--ink); }
.ruling-sm .ruling-head { font-size: 15px; }
.ruling-sm.is-dated .ruling-head { font-size: 22px; }
.ruling-lg .ruling-head { font-size: clamp(26px, 5vw, 40px); }
.positions { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.when-positions { font-size: 15px; color: var(--ink); }
/* The numbers that matter: a row of figures, each with what it measures and its quoted source a tap away. */
.tfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tfact { margin: 0; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); display: flex; flex-direction: column; gap: 8px; }
.tfact-value { margin: 0; font-family: var(--f-num); font-size: 34px; line-height: 1; letter-spacing: -.02em; font-variation-settings: "wdth" 112, "wght" 760; font-variant-numeric: tabular-nums; color: var(--ink); }
.tfact:first-child .tfact-value { color: var(--seal); }
.tfact figcaption { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tfact-label { font: 500 14px/1.4 var(--f-ui); color: var(--ink-2); }
.tfact-src { margin-top: auto; font-size: 12px; color: var(--ink-3); }
.tfact-src summary { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
.tfact-src summary::-webkit-details-marker { display: none; }
.tfact-src summary a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.tfact-q { margin-left: auto; padding: 1px 6px; border-radius: 6px; background: var(--well); font-family: var(--f-read); color: var(--ink-2); }
.tfact-src[open] .tfact-q { background: var(--ink); color: var(--paper); }
.tfact-src blockquote { margin: 8px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--seal); font: italic 13px/1.5 var(--f-read); color: var(--ink-2); }
/* The road to a main question: a vertical line of steps at Faz's dates, the question itself marked. */
.troad { list-style: none; margin: 4px 0 0; padding: 0; position: relative; }
.troad::before { content: ""; position: absolute; left: 74px; top: 14px; bottom: 14px; width: 2px; background: color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 2px; }
.troad-step { display: grid; grid-template-columns: 60px 30px minmax(0, 1fr); align-items: start; padding: 8px 0; position: relative; }
.troad-year { font-family: var(--f-num); font-size: 17px; line-height: 1.3; font-variation-settings: "wdth" 110, "wght" 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.troad-dot { justify-self: center; margin-top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-3); box-sizing: border-box; position: relative; z-index: 1; }
.troad-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.troad-title { font: 600 15px/1.35 var(--f-ui); color: var(--ink); text-decoration: none; }
a.troad-title:hover { color: var(--seal); }
.troad-note { font-size: 11px; letter-spacing: .04em; color: var(--ink-3); }
.troad-step.is-done .troad-dot { background: var(--ok); border-color: var(--ok); }
.troad-step.is-open .troad-year { color: var(--ink-3); }
.troad-step.is-main .troad-dot { width: 16px; height: 16px; margin-top: 3px; border: 3px solid var(--seal); }
.troad-step.is-main .troad-year, .troad-step.is-main .troad-note { color: var(--seal); }
.troad-step.is-main .troad-title { font-weight: 700; }
/* Quick polls on a topic: answers as quiet buttons; after voting, how many chose each, with a bar to the largest. */
.qpoll { margin: 28px 0 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.qpoll-kicker { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.qpoll-kicker .icon { width: 14px; height: 14px; color: var(--seal); }
.qpoll-q { margin: 0 0 14px; font: 650 18px/1.35 var(--f-ui); color: var(--ink); }
.qpoll-choices { display: grid; gap: 8px; }
.qpoll-choice { display: block; width: 100%; padding: 11px 14px; text-align: left; font: 500 15px/1.35 var(--f-ui); color: var(--ink); text-decoration: none; background: var(--well); border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.qpoll-choice:hover, .qpoll-choice:focus-visible { border-color: var(--seal); background: var(--paper); outline: none; }
.qpoll-choice.is-mine { border-color: var(--seal); }
.qpoll-choices.is-small { margin-top: 10px; }
.qpoll-choices.is-small .qpoll-choice { padding: 8px 12px; font-size: 14px; }
.qpoll-result { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.qpoll-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 5px; }
.qpoll-option { display: inline-flex; align-items: center; gap: 6px; font: 500 15px/1.35 var(--f-ui); color: var(--ink); min-width: 0; }
.qpoll-option .icon { flex: none; width: 16px; height: 16px; color: var(--seal); }
.qpoll-n { flex: none; font: 500 12.5px/1 var(--f-ledger); color: var(--ink-3); }
.qpoll-bar { display: block; height: 8px; border-radius: 8px; background: var(--well); overflow: hidden; }
.qpoll-bar i { display: block; height: 100%; border-radius: 8px; background: color-mix(in srgb, var(--ink) 45%, transparent); }
.qpoll-result .is-top .qpoll-bar i { background: var(--ink); }
.qpoll-result .is-mine .qpoll-bar i { background: var(--seal); }
.qpoll-result .is-mine .qpoll-n { color: var(--seal); }
.qpoll-foot { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.qpoll-change { display: inline; margin-left: 4px; }
.qpoll-change summary { display: inline; cursor: pointer; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.when-card-road { display: block; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.when-rung.is-ruled { grid-template-columns: 138px 140px minmax(0, 1fr) 74px; }
.when-rung.is-ruled .when-rung-year, .when-rung-ruling, .when-rung.is-ruled .when-rung-time { white-space: nowrap; }
.when-rung-ruling { font: 600 14px/1.25 var(--f-ui); }
.when-rung-ruling.is-likely { color: var(--ok); }
.when-rung-ruling.is-unlikely { color: var(--seal); }
.when-rung-ruling.is-pending, .when-rung-ruling.is-open { color: var(--ink-2); }
.when-rung.is-ruled .when-rung-figs { justify-content: flex-start; font: 400 13px/1.35 var(--f-ui); color: var(--ink-3); }
.ruling-history { margin-top: 18px; }
.post-ruling { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 22px; margin: 10px 0 4px; }
.story-ruling { font: 600 11.5px var(--f-ledger); color: var(--ink-2); font-stretch: 90%; }
.story-ruling b { color: var(--seal); }
@media (max-width: 760px) {
  .when-rung.is-ruled { grid-template-columns: 112px minmax(0, 1fr); row-gap: 2px; }
  .when-rung.is-ruled .when-rung-year { font-size: 15.5px; }
  .when-rung.is-ruled .when-rung-figs { grid-column: 2; }
}
/* Topic page: share, embed and cite (an image badge anyone can embed, APA and BibTeX). */
.when-badge { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.when-codes { display: grid; gap: 8px; }
.when-codes details { padding: 10px 14px; border-radius: 12px; background: var(--paper); box-shadow: var(--card-shadow); }
.when-codes summary { cursor: pointer; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.when-codes pre { margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: var(--wash); overflow-x: auto; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.when-cite { margin: 10px 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
/* Verified researcher (components/researcher-badge): ORCID's green mark and the word, the affiliation on profiles. */
.researcher-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px 2px 5px; border-radius: 999px; background: #eef6e2; color: #3b6a10; font: 600 11.5px/1.4 var(--f-ui); text-decoration: none; vertical-align: middle; white-space: nowrap; }
.researcher-badge:hover { background: #e2efd0; color: #2f560c; }
.researcher-badge .orcid-icon { width: 14px; height: 14px; }
.researcher-badge.is-full { margin-left: 0; padding: 4px 12px 4px 7px; font-size: 13px; white-space: normal; }
.researcher-line { font-weight: 500; }
.profile-researcher { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
.profile-researcher .ledger { font-size: 12px; color: var(--ink-3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .researcher-badge { background: #22331a; color: #b6db8c; } }
:root[data-theme="dark"] .researcher-badge { background: #22331a; color: #b6db8c; }
.sign-in-orcid-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.sign-in-orcid-note b { color: #3b6a10; }