/*
 * Minda Community's pages (KDD 280), served at /community/assets/forum.css. Built on the tokens core/pages.ts page() defines for
 * every public page (its type scale, spacing, radii and light/dark colours); the few colours and sizes of its own are tokens here.
 * The layout: a sticky header, a navigation column from 1280 px (a drawer under it, opened by a link with no script), the feed
 * and, from 1024 px, a rail of cards. Cards of thread, 44 px vote box, pill buttons 32 px tall, monochrome primary (the ui-theme
 * skill), phone width without a sideways scroll. Every rule here is a class: page() draws bare elements after this file.
 */
:root {
  --f-ok: #146c2e;
  --f-ai: #6a4bd1;
  --f-mascot-hi: #efe8ff;
  --f-mascot: #a37cff;
  --f-mascot-lo: #6a4bd1;
  --f-kind-discussion: #0b57d0;
  --f-kind-question: #9a5b00;
  --f-kind-idea: #0f766e;
  --f-kind-announcement: #a31d6a;
  --f-kind-daily: #3f51b5;
  --f-scrim: rgba(0, 0, 0, 0.4);
  --f-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  --f-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --f-top-h: 56px;
  --f-max: 1600px;
  --f-pad: var(--space-4);
  --f-edge: max(var(--f-pad), calc((100% - var(--f-max)) / 2 + var(--f-pad)));
  --f-nav-w: 240px;
  --f-rail-w: 320px;
  --f-vote: 40px;
  --f-tile: 24px;
  --f-avatar: 24px;
  --f-ico-xs: 14px;
  --f-ico-sm: 16px;
  --f-ico: 18px;
  --f-ico-lg: 20px;
  --f-icon-stroke: 1.67;
  --f-badge: 16px;
}
@media (min-width: 640px) {
  :root { --f-pad: var(--space-6); --f-vote: 44px; }
}
@media (min-width: 1024px) {
  :root { --f-pad: calc(var(--space-6) + var(--space-2)); }
}
@media (min-width: 1280px) {
  :root { --f-rail-w: 340px; }
}
@media (prefers-color-scheme: dark) {
  :root {
    --f-ok: #6dd58c;
    --f-ai: #b9a3ff;
    --f-mascot-hi: #d9ccff;
    --f-kind-discussion: #7aaaff;
    --f-kind-question: #f0b35a;
    --f-kind-idea: #5fd3cb;
    --f-kind-announcement: #f58fc7;
    --f-kind-daily: #9fa8ff;
    --f-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}
:root {
  --f-ok-soft: color-mix(in srgb, var(--f-ok) 13%, transparent);
  --f-ai-soft: color-mix(in srgb, var(--f-ai) 14%, transparent);
  --f-tint: color-mix(in srgb, var(--accent) 6%, var(--card));
  --f-tint-line: color-mix(in srgb, var(--accent) 22%, transparent);
}
html { scroll-padding-top: calc(var(--f-top-h) + var(--space-4)); }

.forum { display: flex; flex-direction: column; font-size: var(--text-base); line-height: 1.5; }
.forum [hidden] { display: none !important; }
.forum.is-signed-in .f-signed-out { display: none; }
.forum h1 { margin: 0; color: var(--fg); font-size: var(--text-2xl); line-height: 1.25; overflow-wrap: anywhere; }
:where(.forum) :is(h2, h3) { margin: 0; color: var(--fg); font-family: var(--font-display); font-weight: 600; overflow-wrap: anywhere; }
:where(.forum) h2 { font-size: var(--text-xl); line-height: 1.3; }
:where(.forum) h3 { font-size: var(--text-lg); line-height: 1.3; }
.forum a:focus-visible, .forum button:focus-visible, .forum summary:focus-visible, .forum input:focus-visible, .forum select:focus-visible, .forum textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.f-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.f-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.f-skip { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 70; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card); color: var(--fg); transform: translateY(-300%); }
.f-skip:focus { transform: none; }

/* Icons: lucide's paths from the page's sprite, drawn as outlines in the text's colour */
.f-ico { flex: none; width: var(--f-ico); height: var(--f-ico); fill: none; stroke: currentColor; stroke-width: var(--f-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.f-ico.is-xs { width: var(--f-ico-xs); height: var(--f-ico-xs); }
.f-ico.is-sm { width: var(--f-ico-sm); height: var(--f-ico-sm); }
.f-ico.is-lg { width: var(--f-ico-lg); height: var(--f-ico-lg); }

/* The header: the brand, the search, the reader */
.f-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-4); height: var(--f-top-h); padding: 0 var(--f-edge); border-bottom: 1px solid var(--line); background: var(--card); }
.f-brand { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--fg); text-decoration: none; }
.f-brand svg { flex: none; width: auto; height: var(--space-6); }
.f-brand span { overflow: hidden; font: 600 var(--text-lg)/1.2 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.f-find { position: relative; display: flex; align-items: center; flex: 1 1 auto; max-width: 480px; margin: 0; }
.f-find .f-ico { position: absolute; left: var(--space-3); color: var(--muted); pointer-events: none; }
.f-find input { flex: 1 1 auto; width: 100%; min-width: 0; height: var(--control-h-sm); padding: 0 var(--space-3) 0 calc(var(--space-3) * 2 + var(--f-ico)); border: 1px solid var(--field-line); border-radius: var(--radius-full); background: var(--fill); color: var(--fg); font: inherit; font-size: var(--text-base); }
.f-find input::placeholder { color: var(--muted); }
.f-find.is-big { flex: none; width: 100%; max-width: 560px; gap: var(--space-2); }
.f-find.is-big input, .f-find.is-big .f-btn { height: var(--control-h); }
.f-find-link { display: none; align-items: center; justify-content: center; flex: none; width: var(--control-h-sm); height: var(--control-h-sm); margin-left: auto; border-radius: 50%; color: var(--fg); }
.f-find-link:hover { background: var(--fill); }
.f-me { display: flex; align-items: center; flex: none; gap: var(--space-1); margin-left: auto; }
.f-me .f-btn { display: block; max-width: 36vw; overflow: hidden; line-height: calc(var(--control-h-sm) - 2px); text-overflow: ellipsis; }
.f-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); border-radius: 50%; color: var(--fg); }
.f-bell:hover { background: var(--fill); }
.f-bell svg { width: var(--f-ico); height: var(--f-ico); fill: none; stroke: currentColor; stroke-width: var(--f-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.f-unread { position: absolute; top: 0; right: 0; min-width: var(--f-badge); height: var(--f-badge); padding: 0 var(--space-1); border-radius: var(--radius-full); background: var(--accent); color: var(--accent-fg); font-size: var(--text-xs); line-height: var(--f-badge); text-align: center; }

/* Buttons: one size, pills, as wide as their label */
.f-btn { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--control-h-sm); padding: 0 var(--space-4); border: 1px solid var(--field-line); border-radius: var(--radius-full); background: transparent; color: var(--fg); font: inherit; font-size: var(--text-base); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.12s ease, background-color 0.12s ease; }
.f-btn:hover { background: var(--fill); }
.f-btn:active { transform: scale(0.97); }
.f-btn.primary { border-color: var(--fg); background: var(--fg); color: var(--card); }
.f-btn.primary:hover { background: color-mix(in srgb, var(--fg) 85%, var(--card)); }
.f-btn.ghost { border-color: transparent; }
.f-btn[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent); }
.f-btn:disabled { opacity: 0.5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .f-btn { transition: none; } .f-btn:active { transform: none; } .f-faq-item .f-ico { transition: none; } }

/* Pills: the sorts, the statuses, the sections of a phone, the categories */
.f-pill { display: inline-flex; align-items: center; flex: none; gap: var(--space-1); height: var(--control-h-sm); padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--card); color: var(--fg); font-size: var(--text-base); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; }
.f-pill:hover { background: var(--fill); }
.f-pill[aria-current] { border-color: var(--f-tint-line); background: var(--accent-soft); color: var(--accent); }
.f-browse { border-color: var(--field-line); background: transparent; }
.f-pill-n { margin-left: var(--space-1); color: var(--muted); font-size: var(--text-xs); }
.f-sorts, .f-chips, .f-cat-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.f-cat-chips { margin: 0; padding: 0; list-style: none; }

/* The navigation: a column from 1280 px, a drawer under it */
.f-shell { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-4); padding: var(--space-4) var(--f-edge) var(--space-6); }
.f-side-nav { display: none; }
.f-nav-panel { display: flex; flex-direction: column; }
.f-nav-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.f-nav-list a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-h); padding: 0 var(--space-3); border-radius: var(--radius); color: var(--fg); font-weight: 500; text-decoration: none; }
.f-nav-list a:hover { background: var(--fill); }
.f-nav-list a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.f-nav-list .f-ico { color: var(--muted); }
.f-nav-list a[aria-current] .f-ico { color: var(--accent); }
.f-nav-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-nav-h { margin: var(--space-5) 0 var(--space-2); padding: 0 var(--space-3); color: var(--muted); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.f-nav-more { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); padding: 0 var(--space-3); color: var(--link); font-weight: 500; text-decoration: none; }
.f-nav-more:hover { text-decoration: underline; }
.f-nav-close { align-self: flex-end; margin-bottom: var(--space-2); }
.f-join { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--f-tint-line); border-radius: var(--radius-lg); background: var(--f-tint); font-weight: 500; }
.f-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--f-tile); height: var(--f-tile); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--k) 14%, transparent); color: var(--k); font-size: var(--text-xs); font-weight: 600; line-height: 1; }
.f-kind, .f-tile { --k: var(--muted); }
.f-kind.is-discussion, .f-tile.is-discussion { --k: var(--f-kind-discussion); }
.f-kind.is-question, .f-tile.is-question { --k: var(--f-kind-question); }
.f-kind.is-idea, .f-tile.is-idea { --k: var(--f-kind-idea); }
.f-kind.is-announcement, .f-tile.is-announcement { --k: var(--f-kind-announcement); }
.f-kind.is-daily, .f-tile.is-daily { --k: var(--f-kind-daily); }
.f-tile.is-agent { --k: var(--f-ai); }
@media (max-width: 1279px) {
  .f-side-nav { position: fixed; inset: 0; z-index: 40; }
  .f-side-nav:target { display: block; }
  .f-nav-scrim { position: absolute; inset: 0; background: var(--f-scrim); }
  .f-nav-panel { position: relative; width: min(320px, 86vw); height: 100%; padding: var(--space-4); overflow-y: auto; background: var(--card); box-shadow: var(--f-shadow); }
  .f-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .f-chips::-webkit-scrollbar { display: none; }
}
@media (min-width: 1280px) {
  .f-shell { grid-template-columns: var(--f-nav-w) minmax(0, 1fr); gap: var(--space-6); }
  .f-side-nav { position: sticky; top: calc(var(--f-top-h) + var(--space-4)); display: block; max-height: calc(100vh - var(--f-top-h) - var(--space-6)); overflow-y: auto; }
  .f-nav-scrim, .f-nav-close, .f-chips { display: none; }
}

/* The content: the feed and, from 1024 px, the rail */
.f-content { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-4); min-width: 0; }
.f-feed { container: feed / inline-size; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.f-rail { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.f-content.is-narrow .f-feed { width: min(100%, 896px); justify-self: center; }
@media (min-width: 1024px) {
  .f-content.is-hub { grid-template-columns: minmax(0, 1fr) var(--f-rail-w); gap: var(--space-6); }
}
@media (max-width: 639px) {
  .f-top { gap: var(--space-2); }
  .f-top .f-find { display: none; }
  .f-find-link { display: inline-flex; }
  .f-me { margin-left: 0; }
}

/* Text */
.f-lead { color: var(--muted); font-size: var(--text-md); }
.f-meta { color: var(--muted); font-size: var(--text-sm); }
.f-meta a { color: inherit; }
.f-empty { padding: var(--space-3) 0; color: var(--muted); }
.f-note { color: var(--muted); font-size: var(--text-sm); }
.f-error { color: var(--err); }
.f-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.f-pagehead { display: flex; flex-direction: column; gap: var(--space-2); }
.f-crumbs { color: var(--muted); font-size: var(--text-sm); }
.f-crumbs a { color: var(--muted); text-decoration: none; }
.f-crumbs a:hover { text-decoration: underline; }
.f-eyebrow { color: var(--accent); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.f-accent { color: var(--accent); }
.f-count-line { color: var(--muted); font-size: var(--text-sm); }

/* Cards */
.f-card, .f-rail-card, .f-quiz { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.f-card, .f-rail-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.f-rail-card { padding: var(--space-4); }
.f-rail-card h2 { font-size: var(--text-lg); }
.f-more { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--space-1); color: var(--link); font-weight: 500; text-decoration: none; }
.f-more:hover { text-decoration: underline; }
.f-plain, .f-league, .f-trend, .f-live, .f-links, .f-more-rows, .f-checks, .f-lessons, .f-notes, .f-badges { margin: 0; padding: 0; list-style: none; }
.f-plain, .f-live, .f-more-rows { display: grid; gap: var(--space-3); }
.f-league, .f-trend, .f-links { display: grid; gap: var(--space-1); }
.f-league li, .f-trend li { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-sm); }
.f-league a, .f-trend a { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--fg); text-decoration: none; }
.f-league a:hover, .f-trend a:hover { text-decoration: underline; }
.f-rank { min-width: 1.5em; color: var(--muted); font-weight: 600; text-align: right; }
.f-points { margin-left: auto; color: var(--muted); font-size: var(--text-sm); }
.f-live li, .f-track-rows li, .f-more-rows li, .f-where li { display: flex; flex-direction: column; gap: 2px; }
.f-track-rows a, .f-more-rows a { color: var(--fg); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.f-track-rows a:hover, .f-more-rows a:hover { text-decoration: underline; }
.f-links a { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-sm); color: var(--fg); text-decoration: none; }
.f-links a:hover { text-decoration: underline; }
.f-links .f-ico { color: var(--muted); }
.f-checks { display: grid; gap: var(--space-2); }
.f-checks li { display: flex; align-items: flex-start; gap: var(--space-2); }
.f-checks .f-ico { margin-top: 2px; color: var(--f-ok); }
.f-prompts { margin: 0; padding-left: var(--space-5); color: var(--fg); }
.f-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.f-stat-line { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); margin: 0; }
.f-stat-line dt { display: flex; align-items: center; gap: var(--space-1); color: var(--muted); font-size: var(--text-sm); }
.f-stat-line dd { margin: 0; color: var(--fg); font: 600 var(--text-2xl)/1.2 var(--font-display); }

/* The home page: the hero, three ways in, the threads, the FAQ */
.f-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4); border: 1px solid var(--f-tint-line); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--f-tint), var(--card) 70%); }
.f-hero-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.f-hero h1 { font-size: var(--text-2xl); line-height: 1.2; }
.f-hero-side { min-width: 0; }
.f-hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.f-hero .f-daily { border-color: var(--f-tint-line); background: var(--card); }
.f-hero .f-stat-line { padding-top: var(--space-4); border-top: 1px solid var(--f-tint-line); }
@container feed (min-width: 560px) {
  .f-hero { padding: var(--space-6); }
  .f-hero h1 { font-size: var(--text-3xl); }
}
@container feed (min-width: 880px) {
  .f-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: center; gap: var(--space-6); }
  .f-hero .f-stat-line { grid-column: 1 / -1; }
}
.f-quick { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.f-quick-card { display: flex; align-items: center; gap: var(--space-3); height: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--fg); text-decoration: none; }
.f-quick-card:hover { border-color: var(--f-tint-line); background: var(--f-tint); }
.f-quick-card > .f-ico:first-child { color: var(--accent); }
.f-quick-card > .f-ico:last-child { margin-left: auto; color: var(--muted); }
.f-quick-text { display: flex; flex-direction: column; min-width: 0; }
.f-quick-text b { font-weight: 600; }
.f-quick-text span { color: var(--muted); font-size: var(--text-sm); }
@container feed (min-width: 560px) {
  .f-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.f-list-card { display: flex; flex-direction: column; gap: var(--space-3); }
.f-type-tabs { display: flex; gap: var(--space-5); overflow-x: auto; box-shadow: inset 0 -1px 0 var(--line); scrollbar-width: none; }
.f-type-tabs::-webkit-scrollbar { display: none; }
.f-type-tabs a { position: relative; flex: none; padding: var(--space-3) 0; color: var(--muted); font-weight: 500; text-decoration: none; white-space: nowrap; }
.f-type-tabs a:hover { color: var(--fg); }
.f-type-tabs a[aria-current] { color: var(--fg); }
.f-type-tabs a[aria-current]::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; border-radius: var(--radius-full); background: var(--accent); }
.f-filter, .f-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.f-filter .f-find { flex: 1 1 240px; max-width: none; }
.f-bar { justify-content: space-between; }
.f-list-body { display: flex; flex-direction: column; gap: var(--space-3); }
.f-faq { gap: 0; }
.f-faq h2 { margin-bottom: var(--space-2); }
.f-faq-item { border-top: 1px solid var(--line); }
.f-faq-item:first-of-type { border-top: 0; }
.f-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; color: var(--fg); font-weight: 600; list-style: none; cursor: pointer; }
.f-faq-item summary::-webkit-details-marker { display: none; }
.f-faq-item .f-ico { color: var(--muted); transition: transform 0.15s ease; }
.f-faq-item[open] .f-ico { transform: rotate(180deg); }
.f-faq-item p, .f-faq-item ul { padding: 0 0 var(--space-3); color: var(--muted); }
.f-faq-item ul { margin: 0; padding-left: var(--space-5); }
.f-daily { gap: var(--space-2); }
.f-daily h2 { display: flex; align-items: baseline; gap: var(--space-2); }
.f-daily-q { color: var(--fg); font: 600 var(--text-xl)/1.35 var(--font-display); overflow-wrap: anywhere; }
.f-daily-q a { color: var(--fg); text-decoration: none; }
.f-daily-q a:hover { text-decoration: underline; }

/* A thread in a list: its own card, the vote box beside it */
.f-cards { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.f-tc { display: grid; grid-template-columns: var(--f-vote) minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.f-tc:hover { border-color: var(--field-line); }
.f-tc.is-pinned { border-color: var(--f-tint-line); background: var(--f-tint); }
.f-tc-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.f-tc-title { color: var(--fg); font: 600 var(--text-xl)/1.35 var(--font-display); overflow-wrap: anywhere; }
.f-tc-title a, a.f-tc-title { color: var(--fg); text-decoration: none; }
.f-tc-title a:hover, a.f-tc-title:hover { text-decoration: underline; }
.f-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--muted); overflow-wrap: anywhere; }
.f-tc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); }
.f-stat { display: inline-flex; align-items: center; gap: var(--space-1); }
.f-reply-item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.f-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); }
@media (min-width: 640px) {
  .f-tc { gap: var(--space-4); padding: var(--space-4) var(--space-5); }
}

/* The vote box, the avatar, the byline, the badges */
.f-votebox { display: block; }
.f-vote { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: var(--f-vote); height: auto; padding: var(--space-2) 0; border: 1px solid var(--field-line); border-radius: var(--radius); background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.f-vote:hover { background: var(--fill); }
.f-vote[aria-pressed='true'] { border-color: var(--f-tint-line); background: var(--accent-soft); color: var(--accent); }
.f-vote:disabled { opacity: 0.5; cursor: default; }
.f-votes { color: var(--fg); font-size: var(--text-sm); font-weight: 600; line-height: 1; }
.f-vote[aria-pressed='true'] .f-votes { color: var(--accent); }
.f-av { --k: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--f-avatar); height: var(--f-avatar); border-radius: 50%; background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); font-size: var(--text-xs); font-weight: 600; line-height: 1; }
.f-av.is-0 { --k: var(--f-kind-discussion); }
.f-av.is-1 { --k: var(--f-ok); }
.f-av.is-2 { --k: var(--f-kind-question); }
.f-av.is-3 { --k: var(--f-kind-announcement); }
.f-av.is-4 { --k: var(--f-kind-idea); }
.f-av.is-ai { background: radial-gradient(circle at 34% 30%, var(--f-mascot-hi), var(--f-mascot) 55%, var(--f-mascot-lo)); }
.f-av.is-lg { width: calc(var(--f-avatar) * 2.5); height: calc(var(--f-avatar) * 2.5); font-size: var(--text-2xl); }
.f-byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.f-author { color: var(--fg); font-weight: 600; }
.f-author a { color: inherit; text-decoration: none; }
.f-author a:hover { text-decoration: underline; }
.f-author.is-agent b, .f-author.is-ai { color: var(--fg); }
.f-kind, .f-chip { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; line-height: 1.7; vertical-align: middle; white-space: nowrap; }
.f-kind { border: 1px solid color-mix(in srgb, var(--k) 35%, transparent); background: color-mix(in srgb, var(--k) 14%, transparent); color: var(--k); font-weight: 600; }
.f-chip { background: var(--fill); color: var(--muted); }
.f-chip.is-ok { background: var(--f-ok-soft); color: var(--f-ok); }
.f-chip.is-ai { background: var(--f-ai-soft); color: var(--f-ai); }
.f-chip.is-link { color: var(--fg); text-decoration: none; }
.f-chip.is-link:hover { text-decoration: underline; }
.f-level { display: inline-block; padding: 0 var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-full); color: var(--muted); font-size: var(--text-xs); font-weight: 500; line-height: 1.5; vertical-align: middle; }
.f-tag { padding: 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-full); color: var(--muted); font-size: var(--text-xs); line-height: 1.7; text-decoration: none; }
.f-tag:hover { color: var(--fg); }
.f-mascot { display: inline-block; flex: none; width: 1.3em; height: 1.3em; margin-right: var(--space-1); border-radius: 50%; vertical-align: -0.3em; background: radial-gradient(circle at 34% 30%, var(--f-mascot-hi), var(--f-mascot) 55%, var(--f-mascot-lo)); }
.f-byline .f-mascot { display: none; }
.f-dot::before { content: ' · '; white-space: pre; }

/* A thread and its replies */
.f-thread { gap: var(--space-4); }
.f-grid { display: grid; grid-template-columns: var(--f-vote) minmax(0, 1fr); align-items: start; gap: var(--space-3) var(--space-4); }
.f-thread-top { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.f-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.f-md { color: var(--fg); font-size: var(--text-md); line-height: 1.6; overflow-wrap: anywhere; }
.f-md p, .f-md ul, .f-md ol, .f-md blockquote, .f-md pre { margin: 0 0 var(--space-3); color: var(--fg); }
.f-md > :last-child { margin-bottom: 0; }
.f-md ul, .f-md ol { padding-left: var(--space-5); }
.f-md h2 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xl); }
.f-md h3, .f-md h4 { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-lg); }
.f-md blockquote { padding-left: var(--space-3); border-left: 3px solid var(--line); color: var(--muted); }
.f-md pre { overflow-x: auto; padding: var(--space-3); border-radius: var(--radius); background: var(--fill); font-size: var(--text-sm); }
.f-md code { padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--fill); font-family: var(--f-mono); font-size: var(--text-sm); }
.f-md pre code { padding: 0; background: none; }
.f-md hr { margin: var(--space-4) 0; border: 0; border-top: 1px solid var(--line); }
.f-md a { color: var(--link); }
.f-actbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.f-actbar .f-btn { padding: 0 var(--space-3); }
.f-actbar > .f-btn:first-child { margin-left: calc(var(--space-3) * -1); }
.f-thread > .f-actbar { padding-top: var(--space-3); border-top: 1px solid var(--line); }
.f-actbar-stats { margin-left: auto; }
.f-posts, .f-accepted { gap: 0; }
.f-posts > h2, .f-accepted > h2 { margin-bottom: var(--space-2); }
.f-post { display: grid; grid-template-columns: var(--f-vote) minmax(0, 1fr); gap: var(--space-3) var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.f-posts > h2 + .f-post, .f-accepted > h2 + .f-post { border-top: 0; }
.f-post-main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.f-post.is-accepted { padding-left: var(--space-3); border-left: 3px solid var(--f-ok); }
.f-post.is-ai, .f-post.is-agent { padding-left: var(--space-3); border-left: 3px solid var(--f-ai-soft); }
.f-children { display: flex; flex-direction: column; margin-top: var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--line); }
.f-children .f-post { padding: var(--space-2) 0; border-top: 0; }
.f-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.f-ref { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg); text-decoration: none; }
.f-ref:hover { background: var(--fill); }
.f-ref b { overflow-wrap: anywhere; }
.f-ref-kind { color: var(--muted); font-size: var(--text-xs); }
.f-profile { flex-direction: row; align-items: center; gap: var(--space-4); }
.f-profile-main { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); min-width: 0; }
.f-tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.f-tracks a { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--fg); text-decoration: none; }
.f-tracks a:hover { border-color: var(--f-tint-line); background: var(--f-tint); }
.f-lessons { counter-reset: lesson; }
.f-lessons li, .f-notes li { padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.f-lessons li:first-child, .f-notes li:first-child { border-top: 0; }
.f-lessons li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.f-lessons li::before { counter-increment: lesson; content: counter(lesson) '.'; min-width: 1.5em; color: var(--muted); }
.f-notes li.is-unread a { font-weight: 600; }
.f-notes a { color: var(--fg); text-decoration: none; }
.f-notes a:hover { text-decoration: underline; }
.f-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.f-done-card { align-items: center; padding: var(--space-6) var(--space-4); text-align: center; }

/* Writing: the reply box, a new thread, the quiz, the dialogs */
.f-compose label, .f-dialog label { margin-top: var(--space-3); }
.f-compose textarea, .f-compose input[type='text'], .f-compose select, .f-dialog input[type='text'], .f-dialog textarea {
  display: block; width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--field-line); border-radius: var(--radius); background: transparent; color: var(--fg); font: inherit; font-size: var(--text-md);
}
.f-compose input[type='text'], .f-compose select, .f-dialog input[type='text'] { height: var(--control-h); padding-top: 0; padding-bottom: 0; }
.f-compose textarea, .f-dialog textarea { min-height: calc(var(--control-h) * 3); line-height: 1.5; resize: vertical; }
.f-as { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; padding: 0; border: 0; }
.f-as legend { margin-bottom: var(--space-1); padding: 0; color: var(--muted); font-size: var(--text-sm); }
.f-as label, .f-switch, .f-dialog .f-choice { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--fg); font-size: var(--text-base); cursor: pointer; }
.f-switch { align-items: flex-start; }
.f-preview { margin-top: var(--space-3); padding: var(--space-3); border: 1px dashed var(--line); border-radius: var(--radius); }
.f-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.f-replying { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm); }
.f-quiz { padding: var(--space-4) var(--space-5); }
.f-quiz h2 { margin-bottom: var(--space-3); }
.f-quiz ol { margin: 0; padding-left: var(--space-5); }
.f-quiz li { margin-bottom: var(--space-4); }
.f-quiz fieldset { margin: 0; padding: 0; border: 0; }
.f-quiz legend { margin-bottom: var(--space-1); padding: 0; color: var(--fg); font-weight: 600; }
.f-quiz label { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-1) 0; color: var(--fg); font-size: var(--text-md); cursor: pointer; }
.f-quiz .is-right .f-why { color: var(--f-ok); }
.f-quiz .is-wrong .f-why { color: var(--err); }
.f-why { margin: var(--space-1) 0 0; font-size: var(--text-base); }
.f-result { margin: var(--space-2) 0; }
.f-dialog { width: min(400px, calc(100vw - var(--space-4) * 2)); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--fg); box-shadow: var(--f-shadow); }
.f-dialog::backdrop { background: var(--f-scrim); }
.f-dialog h2 { margin: 0 0 var(--space-2); font: 600 var(--text-lg)/1.3 var(--font-display); }
.f-dialog p { margin: 0 0 var(--space-2); }
.f-dialog .f-choice { display: flex; margin: var(--space-1) 0; }
.f-toast { position: fixed; top: calc(var(--f-top-h) + var(--space-3)); left: 50%; z-index: 60; max-width: calc(100vw - var(--space-4) * 2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--fg); color: var(--card); font-size: var(--text-base); box-shadow: var(--f-shadow); transform: translateX(-50%); }

.f-foot { padding: var(--space-4) var(--f-edge) 0; color: var(--muted); font-size: var(--text-sm); }
.f-foot a { color: var(--muted); }
@media (max-width: 639px) {
  .f-card { padding: var(--space-4); }
  .f-quiz { padding: var(--space-4); }
  .f-actions { justify-content: flex-start; }
  .f-children { padding-left: var(--space-2); }
  .f-profile { flex-direction: column; align-items: flex-start; }
}