/* ============================================================================
   FORUMS - the knowledge base (website/forums/*.html, generated by
   tools/forums/build-forums.mjs). Every page is read-only and staff-written.
   Since 04-11 the pages load v2.css (the new site look), not style.css: the
   names below are this file's own, mapped onto v2's tokens, and the "V2 LOOK"
   block at the end takes the outlines off and sets the type the way the main
   pages have it. Solid cards, one accent (zest), no glows, and no mono
   uppercase labels anywhere - headings and labels are sentence case.
   ========================================================================== */

body[data-page="forums"] {
  --fg: var(--ink);
  --muted: var(--mute);
  --faint: #85858F;
  --bg: var(--ground);
  --card: var(--raise);
  --surface: var(--raise-2);
  --hover: var(--raise-2);
  --line: rgba(255, 255, 255, 0.07);
  --line-soft: rgba(255, 255, 255, 0.05);
  --line-hi: rgba(255, 255, 255, 0.16);
  --accent: var(--zest);
  --zest-lo: rgba(47, 194, 74, 0.5);
  --gold-line: rgba(212, 175, 55, 0.4);
  --body: var(--text);
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --pad: var(--gutter);
  --nav-h: 78px;
}

.fm { padding-block: clamp(28px, 4vw, 48px) clamp(64px, 8vw, 104px); }
.fm a { color: inherit; text-decoration: none; }
.fm .zest { color: var(--zest); }
.fm-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--pad); }

/* ---- breadcrumbs + page title ------------------------------------------- */
.fm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--faint); margin-bottom: 18px; }
.fm-crumbs a { color: var(--muted); }
.fm-crumbs a:hover { color: var(--zest); }
.fm-crumbs svg { opacity: 0.6; }
.fm-title { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.06; letter-spacing: -0.03em; margin: 0; }
.fm-title .ver { color: var(--zest); }
.fm-lede { color: var(--muted); font-size: clamp(15px, 1.4vw, 18px); max-width: 68ch; margin: 14px 0 0; line-height: 1.55; }
.fm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: 28px; }
.fm-head > div { min-width: 0; }

/* ---- search ------------------------------------------------------------- */
.fm-search { position: relative; width: min(420px, 100%); }
.fm-search label { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); }
.fm-search label { transition: border-color 0.15s, background 0.15s; }
.fm-search label:focus-within { border-color: var(--line-hi); background: var(--card); color: var(--fg); }
/* the site's focus ring (refresh.css, scoped under html:not(#rf)) drew a second green box inside the
   field; the field's own border is the focus state here */
html:not(#rf) .fm-search input:focus-visible { outline: 0; }
/* the browser's own clear button is blue; Escape clears instead */
.fm-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.fm-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--fg); font: inherit; font-size: 15px; }
.fm-search label input:focus, .fm-search label input:focus-visible { outline: 0; box-shadow: none; border: 0; }
.fm-search kbd { font-family: var(--body); font-size: 12px; color: var(--faint); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; }
.fm-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: min(70vh, 520px); overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7); padding: 6px; }
.fm-results[hidden] { display: none; }
.fm-results { display: flex; flex-direction: column; gap: 2px; }
.fm-results a { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 8px; transition: background 0.12s ease; }
.fm-results a:hover, .fm-results a.on { background: rgba(255, 255, 255, 0.05); }
/* one highlight at a time: with the mouse in the list, the keyboard pick steps aside */
.fm-results:hover a.on:not(:hover) { background: none; }
.fm-results b { font-weight: 600; font-size: 15px; }
.fm-results span { font-size: 13px; color: var(--faint); }
.fm-results span i { font-style: normal; color: var(--zest); }
.fm-results .none { padding: 14px 12px; color: var(--faint); font-size: 14px; }
.fm-search.wide { width: 100%; max-width: 640px; }
.fm-search.wide label { height: 54px; font-size: 16px; }

/* ---- version picker (index) --------------------------------------------- */
.fm-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.fm-ver { display: flex; flex-direction: column; gap: 18px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.fm-ver:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.fm-ver-top { display: flex; align-items: center; gap: 14px; }
.fm-ver-badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--zest); letter-spacing: -0.02em; }
.fm-ver h2 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.fm-ver p { margin: 0; color: var(--muted); line-height: 1.55; }
.fm-ver-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: 14px; }
.fm-ver-stats b { color: var(--fg); font-weight: 600; margin-right: 4px; }
.fm-ver-go { display: inline-flex; align-items: center; gap: 6px; color: var(--zest); font-weight: 600; font-size: 15px; }

/* ---- board: subforum rows ------------------------------------------------ */
.fm-board { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.fm-board + .fm-board { margin-top: 20px; }
.fm-board-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.fm-board-h h2 { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.fm-board-h span { color: var(--faint); font-size: 14px; }
.fm-sub { display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px minmax(0, 300px); align-items: center; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--line-soft); transition: background 0.15s; }
.fm-board-h + .fm-sub { border-top: 0; }
.fm-sub:hover { background: var(--hover); }
.fm-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--zest); }
.fm-sub-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fm-sub-name b { font-weight: 600; font-size: 16px; }
.fm-sub-name span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.fm-sub-count { text-align: center; color: var(--faint); font-size: 13px; }
.fm-sub-count b { display: block; color: var(--fg); font-size: 17px; font-weight: 600; }
.fm-sub-last { font-size: 13px; color: var(--faint); min-width: 0; }
.fm-sub-last b { display: block; color: var(--muted); font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- thread list ---------------------------------------------------------- */
.fm-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.fm-list + .fm-list { margin-top: 20px; }
.fm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 15px 20px; border-top: 1px solid var(--line-soft); transition: background 0.15s; }
.fm-list > .fm-board-h + .fm-row, .fm-list > .fm-row:first-child { border-top: 0; }
.fm-row:hover { background: var(--hover); }
.fm-row-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fm-row-t { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fm-row-t b { font-weight: 600; font-size: 16px; }
.fm-row-main p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-row-meta { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 13px; white-space: nowrap; }
.fm-row-meta img { width: 22px; height: 22px; }
.fm-row[hidden] { display: none; }

/* tags: small, solid, sentence case */
.fm-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--muted); background: var(--surface); border: 1px solid var(--line); white-space: nowrap; }
.fm-tag.on { color: var(--zest); border-color: rgba(47, 194, 74, 0.35); }
.fm-tag.gold { color: var(--gold); border-color: var(--gold-line); }
.fm-tag.pin { color: var(--fg); background: var(--accent); border-color: var(--accent); }

/* filter chips above a list */
.fm-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.fm-filter button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.fm-filter button:hover { color: var(--fg); border-color: var(--faint); }
.fm-filter button[aria-pressed="true"] { color: var(--fg); background: var(--surface); border-color: var(--zest-lo); }
.fm-filter .fm-count { margin-left: auto; color: var(--faint); font-size: 14px; }

/* ---- thread page ---------------------------------------------------------- */
.fm-thread { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.fm-post { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.fm-post-by { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--faint); }
.fm-post-by img { width: 32px; height: 32px; }
.fm-post-by b { color: var(--fg); font-weight: 600; }
.fm-staff { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; background: var(--accent); color: var(--zest-ink); font-size: 12px; font-weight: 600; }
.fm-post-by .grow { flex: 1; }
.fm-body { padding: 24px 26px 30px; font-size: 16px; line-height: 1.65; color: #D6D6DA; }
.fm-body > :first-child { margin-top: 0; }
.fm-body h2 { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--fg); margin: 34px 0 12px; padding-top: 22px; border-top: 1px solid var(--line-soft); scroll-margin-top: 90px; }
.fm-body h3 { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--fg); margin: 24px 0 8px; scroll-margin-top: 90px; }
.fm-body p { margin: 0 0 14px; }
.fm-body ul, .fm-body ol { margin: 0 0 16px; padding-left: 22px; }
.fm-body li { margin: 5px 0; }
.fm-body li::marker { color: var(--zest-lo); }
.fm-body b, .fm-body strong { color: var(--fg); font-weight: 600; }
.fm-body a { color: var(--zest); border-bottom: 1px solid rgba(47, 194, 74, 0.3); }
.fm-body a:hover { border-bottom-color: var(--zest); }
.fm-body code { font-family: var(--mono); font-size: 0.88em; padding: 1px 6px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); color: var(--fg); }
.fm-body kbd { font-family: var(--body); font-size: 0.86em; padding: 1px 7px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px; color: var(--fg); white-space: nowrap; }
.fm-lead { font-size: 18px; color: var(--fg); line-height: 1.6; }
.fm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }

.fm-note { display: flex; gap: 12px; padding: 14px 16px; margin: 0 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; line-height: 1.55; }
.fm-note > svg { flex: none; margin-top: 3px; color: var(--zest); }
.fm-note.warn > svg { color: var(--gold); }
.fm-note > div > :last-child { margin-bottom: 0; }

.fm-steps { counter-reset: s; list-style: none; padding: 0 !important; }
.fm-steps > li { counter-increment: s; position: relative; padding-left: 40px; margin: 12px 0; }
.fm-steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--zest); font-size: 13px; font-weight: 600; }

.fm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 0 0 20px; }
/* dividers on the cells, not through the grid background, so a short last row leaves no grey hole;
   overflow: hidden clips the ones that land on the outer edge */
.fm-facts > div { box-shadow: 1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.fm-facts span { font-size: 13px; color: var(--faint); }
.fm-facts b { font-size: 15px; }

/* settings tables */
.fm-set { margin: 0 0 22px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fm-set-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.fm-set-h b { font-size: 15px; }
.fm-set-h span { font-size: 13px; color: var(--faint); }
.fm-set table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fm-set td { padding: 10px 14px; border-top: 1px solid var(--line-soft); vertical-align: top; line-height: 1.5; }
.fm-set tr:first-child td { border-top: 0; }
.fm-set td:first-child { width: 30%; color: var(--fg); font-weight: 500; }
.fm-set td:last-child { width: 26%; color: var(--muted); }
.fm-set td.desc { color: #C4C4CA; }
.fm-set tr.sub td:first-child { padding-left: 30px; position: relative; }
.fm-set tr.sub td:first-child::before { content: ""; position: absolute; left: 15px; top: 0; bottom: 50%; width: 9px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); border-bottom-left-radius: 4px; }
.fm-set .when { display: block; margin-top: 3px; font-size: 12px; color: var(--faint); font-weight: 400; }
.fm-set .def { display: inline-block; color: var(--fg); }
.fm-set .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; border: 1px solid rgba(255, 255, 255, 0.2); }
.fm-set .opts { display: block; margin-top: 3px; font-size: 12.5px; color: var(--faint); }
.fm-set details { border-top: 1px solid var(--line); }
.fm-set details summary { cursor: pointer; padding: 10px 14px; color: var(--muted); font-size: 14px; list-style: none; }
.fm-set details summary::-webkit-details-marker { display: none; }
.fm-set details summary:hover { color: var(--fg); }

.fm-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: table; }
.fm-table th { text-align: left; font-weight: 600; color: var(--fg); background: var(--surface); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.fm-table td { padding: 10px 14px; border-top: 1px solid var(--line-soft); vertical-align: top; color: #C4C4CA; line-height: 1.5; }
.fm-table td:first-child { color: var(--fg); font-weight: 500; white-space: nowrap; }
.fm-scroll { overflow-x: auto; margin: 0 0 20px; }
.fm-scroll .fm-table { margin: 0; }

.fm-closed { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: 14px; }
.fm-closed a { color: var(--zest); }

/* aside: sibling threads + on this page */
.fm-aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 110px); }
.fm-side { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.fm-side h3 { margin: 0; padding: 12px 16px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); background: var(--surface); }
.fm-side nav { overflow: auto; padding: 6px; display: flex; flex-direction: column; }
.fm-side nav a { padding: 7px 10px; border-radius: 7px; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.fm-side nav a:hover { color: var(--fg); background: var(--hover); }
.fm-side nav a[aria-current="page"] { color: var(--fg); background: var(--hover); font-weight: 600; }
.fm-side.toc nav a { font-size: 13.5px; padding: 5px 10px; }
/* In a short window the sticky column runs out of height: the contents box keeps up to 40% of it and
   scrolls itself, the sibling list takes the rest. Without flex-shrink: 0 on the links, a flex column
   with overflow: hidden squashes every row instead of scrolling. */
.fm-side.toc { flex-shrink: 0; max-height: 40%; }
.fm-other { flex-shrink: 0; }
.fm-other { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 14px; color: var(--muted); }
.fm-other:hover { border-color: var(--line-hi); color: var(--fg); }
.fm-other b { color: var(--zest); font-weight: 600; }

.fm-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.fm-pager a { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.fm-pager a:hover { border-color: var(--line-hi); background: var(--hover); }
.fm-pager a span { font-size: 13px; color: var(--faint); }
.fm-pager a b { font-weight: 600; }
.fm-pager a.next { text-align: right; grid-column: 2; }


/* ---- small screens --------------------------------------------------------- */
@media (max-width: 980px) {
  .fm-thread { grid-template-columns: minmax(0, 1fr); }
  .fm-aside { position: static; max-height: none; }
  .fm-side.toc { display: none; }
  .fm-side nav { max-height: 320px; }
  .fm-sub { grid-template-columns: 44px minmax(0, 1fr) 72px; }
  .fm-sub-last { display: none; }
}
@media (max-width: 720px) {
  .fm-versions { grid-template-columns: minmax(0, 1fr); }
  .fm-sub { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
  .fm-ic { width: 40px; height: 40px; }
  .fm-sub-count { display: none; }
  .fm-row { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .fm-row-meta { display: none; }
  .fm-body { padding: 20px 18px 24px; font-size: 15.5px; }
  .fm-post-by { padding: 12px 18px; }
  .fm-set td { display: block; width: auto !important; border-top: 0; padding: 4px 14px; }
  .fm-set td:first-child { padding-top: 12px; }
  .fm-set td:last-child { padding-bottom: 12px; }
  .fm-set tr { display: block; border-top: 1px solid var(--line-soft); }
  .fm-set tr:first-child { border-top: 0; }
  .fm-set tr.sub td:first-child::before { display: none; }
  .fm-set tr.sub td { padding-left: 26px; }
  .fm-pager { grid-template-columns: minmax(0, 1fr); }
  .fm-pager a.next { grid-column: 1; }
  .fm-table td:first-child { white-space: normal; }
}

/* ============================================================================
   DOCS LAYOUT (31-10, his ask: "like Slinky's docs") - everything on the
   version down the left in dropdowns, the page in the middle, "On this page"
   on the right. Replaces the old thread/aside layout on every page.
   ========================================================================== */
.fm { padding: 0; }
.dc { display: grid; grid-template-columns: 290px minmax(0, 1fr) 230px; max-width: 1480px; margin: 0 auto; align-items: start; }

/* left: the tree */
.dc-nav { position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto; overscroll-behavior: contain; padding: 22px 14px 40px 20px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.dc-nav .fm-search { width: 100%; flex: none; }
.dc-nav .fm-search label { height: 40px; border-radius: 10px; font-size: 14px; }
.dc-nav .fm-search input { font-size: 14px; }
.dc-ver { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.dc-ver a { text-align: center; padding: 7px 0; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--muted); }
.dc-ver a:hover { color: var(--fg); }
.dc-ver a[aria-current] { background: var(--accent); color: var(--zest-ink); }
.dc-tree { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.dc-tree a { display: block; padding: 6px 10px; border-radius: 7px; color: var(--muted); line-height: 1.35; }
.dc-tree a:hover { color: var(--fg); background: var(--hover); }
.dc-tree a[aria-current="page"] { color: var(--fg); background: var(--hover); font-weight: 600; }
.dc-tree details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; color: var(--fg); font-weight: 600; user-select: none; }
.dc-tree details > summary::-webkit-details-marker { display: none; }
.dc-tree details > summary:hover { background: var(--hover); }
.dc-tree summary .dd { margin-left: auto; flex: none; color: var(--faint); transition: transform 0.18s var(--ease); transform: rotate(-90deg); }
.dc-tree details[open] > summary .dd { transform: none; }
.dc-tree summary .ic { display: grid; place-items: center; color: var(--zest); }
.dc-tree summary .ic svg { width: 17px; height: 17px; }
.dc-tree summary .n { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--faint); }
.dc-tree summary .n ~ .dd { margin-left: 6px; }
.dc-g { margin-top: 6px; }
.dc-links { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 17px; padding-left: 8px; border-left: 1px solid var(--line-soft); }
.dc-links details > summary { font-weight: 500; color: var(--muted); padding: 6px 10px; }
.dc-links details[open] > summary { color: var(--fg); }

/* middle: the page */
.dc-main { min-width: 0; padding: 30px clamp(20px, 4vw, 56px) 80px; }
.dc-main > .fm-crumbs { margin-bottom: 14px; }
.dc-main .fm-title { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 12px; }
.dc-main .fm-lede { margin-bottom: 26px; }
.dc-main .fm-body { padding: 0; color: #D6D6DA; max-width: 860px; }
.dc-main .fm-body h2 { scroll-margin-top: 84px; }
.dc-main .fm-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dc-main .fm-body a.fm-row, .dc-main .fm-body a.fm-ver, .dc-main .fm-body a.dc-card, .dc-main .fm-body .fm-results a { color: inherit; border-bottom: 0; }
.dc-main .fm-pager, .dc-main .dc-main .fm-search.wide { margin-bottom: 8px; }
.fm-body .fm-ver h3 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 600; }
.dc-menu { display: none; }

/* right: on this page */
.dc-toc { position: sticky; top: 68px; max-height: calc(100vh - 68px); overflow-y: auto; padding: 30px 18px 40px 8px; }
.dc-toc h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--fg); }
.dc-toc nav { position: relative; display: flex; flex-direction: column; border-left: 1px solid var(--line-soft); }
/* the bar that slides to the section being read (forums.js) */
.dc-toc-bar { position: absolute; left: -1px; top: 0; width: 2px; border-radius: 2px; background: var(--zest); opacity: 0; pointer-events: none; transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), height 0.35s cubic-bezier(.2, .8, .2, 1), opacity 0.2s; }
@media (prefers-reduced-motion: reduce) { .dc-toc-bar { transition: none; } }
.dc-toc a { padding: 5px 0 5px 12px; margin-left: -1px; border-left: 1px solid transparent; font-size: 13.5px; color: var(--faint); line-height: 1.35; }
.dc-toc a.sub { padding-left: 24px; font-size: 13px; }
.dc-toc a:hover { color: var(--fg); }
.dc-toc a { transition: color 0.25s var(--ease); }
.dc-toc a.on { color: var(--zest); }

/* cards on overview pages */
.dc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 0 0 12px; }
.dc-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: border-color 0.15s, background 0.15s; }
.dc-card:hover { border-color: var(--line-hi); background: var(--hover); }
.dc-card .fm-ic { width: 38px; height: 38px; flex: none; }
.dc-card-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.dc-card-t b { font-size: 15px; }
.dc-card-t span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.dc-card-t i { font-style: normal; color: var(--zest); }
.dc-card-n { font-size: 13px; color: var(--faint); padding-top: 2px; }

/* screenshots */
.dc-shot { margin: 0 0 22px; }
.dc-shot a { display: block; border: 1px solid var(--line) !important; border-radius: 12px; overflow: hidden; background: #000; }
.dc-shot img { display: block; width: 100%; height: auto; }
.dc-shot figcaption, .dc-mock figcaption { margin-top: 8px; font-size: 13.5px; color: var(--faint); line-height: 1.5; }
.dc-shot figcaption b, .dc-mock figcaption b { color: var(--muted); font-weight: 600; }

/* mockup of a mod's settings panel (drawn, not captured) - styled after the real right-hand panel of
   the in-game mods screen: a dark glass card over a blurred world, rows as rounded cards. */
.dc-mock { margin: 0 0 22px; }
.mk { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; padding: 22px; max-width: 640px; isolation: isolate; background: #0d1210; }
.mk::before { content: ""; position: absolute; inset: -30px; z-index: -1; background: url("../img/forums/1-8-9/mainmenu.jpg") center / cover; filter: blur(14px) brightness(0.55) saturate(1.1); }
.mk-panel { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px; background: rgba(16, 18, 20, 0.86); padding: 16px 12px 12px; font-family: var(--display); }
.mk-head { display: flex; align-items: flex-start; gap: 14px; padding: 0 6px 12px; }
.mk-head > div { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-head b { font-size: 21px; font-weight: 600; color: #F1F1F3; letter-spacing: -0.01em; }
.mk-head > div > span { color: #A9ACB1; font-size: 13.5px; line-height: 1.45; }
.mk-icons { display: flex; align-items: center; gap: 7px; flex: none; }
.mk-ib { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: rgba(255, 255, 255, 0.07); color: #D8D8DC; }
.mk-group { display: flex; align-items: center; gap: 7px; padding: 8px 8px 8px; color: #C9CBCF; font-size: 13.5px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mk-group .dd { color: #C9CBCF; }
.mk-rows { display: flex; flex-direction: column; gap: 6px; }
.mk-rows + .mk-group { margin-top: 8px; }
.mk-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 6px 12px 6px 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.055); }
.mk-name { color: #ECECEF; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-ctl { display: flex; align-items: center; gap: 10px; flex: none; }
.mk-sw { position: relative; width: 40px; height: 21px; border-radius: 999px; background: #3a3c40; flex: none; margin-top: 4px; }
.mk-row .mk-sw { margin-top: 0; }
.mk-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #F3F3F5; }
.mk-sw.on { background: #13901F; }
.mk-sw.on::after { left: 22px; }
.mk-slider { position: relative; width: 130px; height: 5px; border-radius: 999px; background: #3a3c40; }
.mk-slider > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: #13901F; }
.mk-slider > span::after { content: ""; position: absolute; right: -6px; top: -4px; width: 13px; height: 13px; border-radius: 50%; background: #F3F3F5; }
.mk-val { width: 44px; text-align: right; color: #C9CBCF; font-size: 13px; }
.mk-drop { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: #ECECEF; font-size: 13px; }
.mk-drop .dd { color: #A9ACB1; }
.mk-col { display: inline-flex; align-items: center; gap: 8px; color: #C9CBCF; font-size: 13px; }
.mk-col span { width: 20px; height: 20px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.25); }
.mk-key { min-width: 56px; text-align: center; height: 26px; line-height: 26px; padding: 0 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: #ECECEF; font-size: 12.5px; }
.mk-text { min-width: 130px; height: 28px; line-height: 28px; padding: 0 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); color: #A9ACB1; font-size: 13px; }
.mk-more, .mk-empty { padding: 10px 8px 2px; color: #8C8F94; font-size: 13px; }
.mk-empty { border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* a page with nothing for "On this page" gives that column to the page */
@media (min-width: 1181px) {
  .dc:has(> .dc-toc:empty) { grid-template-columns: 290px minmax(0, 1fr); }
  .dc > .dc-toc:empty { display: none; }
}
@media (max-width: 1180px) {
  .dc { grid-template-columns: 270px minmax(0, 1fr); }
  .dc-toc { display: none; }
}
@media (max-width: 860px) {
  .dc { grid-template-columns: minmax(0, 1fr); }
  .dc-nav { position: fixed; z-index: 60; top: 68px; left: 0; bottom: 0; width: min(320px, 86vw); height: auto; background: var(--bg); border-right: 1px solid var(--line); transform: translateX(-102%); transition: transform 0.22s var(--ease); }
  .dc-nav.open { transform: none; box-shadow: 30px 0 60px -20px rgba(0, 0, 0, 0.8); }
  .dc-menu { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; }
  .dc-menu svg { width: 16px; height: 16px; color: var(--zest); }
  .dc-main { padding: 20px 16px 60px; }
  .mk { padding: 12px; }
  .mk-slider { width: 70px; }
  .mk-head b { font-size: 18px; }
}

/* Unique Mods list */
.fm-unique { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; }
.fm-unique li { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.fm-unique li a { font-weight: 600; font-size: 16px; }
.fm-unique li span { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ============================================================================
   V2 LOOK (04-11, his note: the forums "have NOT been converted to the new
   website look, it ALL needs to be sorted"). The rules the main pages follow:
   frames are fills on the page ground, never outlines; one modest radius;
   Montserrat 800 titles in the accent green; every text link in a page body is
   the accent green with an arrow to the top right, underlined only on hover.
   ========================================================================== */

/* frames: fills, no outlines (border kept at its width but transparent, so nothing shifts) */
.fm-ver, .fm-board, .fm-list, .fm-post, .fm-side, .fm-other, .fm-pager a, .dc-card, .fm-unique li,
.fm-set, .fm-table, .fm-note, .fm-facts, .dc-ver, .fm-results, .fm-ic, .fm-ver-badge, .dc-menu,
.fm-search label, .fm-filter button, .fm-tag, .dc-shot a { border-color: transparent !important; }
.fm-ver, .fm-board, .fm-list, .fm-post, .fm-side { border-radius: var(--radius); }
.fm-pager a, .dc-card, .fm-unique li, .fm-set, .fm-table, .fm-note, .fm-facts, .fm-other, .dc-shot a { border-radius: var(--radius-sm); }
.fm-ver:hover, .fm-other:hover, .fm-pager a:hover, .dc-card:hover { background: var(--raise-2); transform: none; }
.fm-ic, .fm-ver-badge { background: var(--raise-2); }
.dc-card:hover .fm-ic { background: var(--raise-3); }
.fm-set-h, .fm-table th, .fm-board-h, .fm-post-by, .fm-side h3 { background: var(--raise-2); }
.fm-set td, .fm-table td { border-top-color: var(--line-soft); }
.fm-search label { min-height: 54px; height: auto; border-radius: 999px; background: var(--raise); padding: 0 20px; }
.fm-search label:focus-within { background: var(--raise-2); box-shadow: inset 0 0 0 2px var(--raise-3); }
.dc-nav .fm-search label { min-height: 46px; height: 46px; padding: 0 16px; }
.fm-results { background: var(--raise-2); border-radius: var(--radius-sm); }
.fm-results a:hover, .fm-results a.on { background: var(--raise-3); }
.fm-search kbd { border-color: transparent; background: var(--raise-3); }
.fm-filter button { background: var(--raise); }
.fm-filter button:hover { background: var(--raise-2); }
.fm-filter button[aria-pressed="true"] { background: var(--raise-3); color: var(--ink); box-shadow: none; }
.fm-tag { background: var(--raise-2); }
.fm-tag.on { background: color-mix(in srgb, var(--zest) 14%, transparent); }
.fm-tag.gold { background: var(--gold-tint); }
.fm-staff { background: var(--zest); color: var(--zest-ink); font-weight: 700; }
.dc-ver { background: var(--raise); border-radius: 999px; }
.dc-ver a { border-radius: 999px; }
.dc-ver a[aria-current] { background: var(--zest); color: var(--zest-ink); }

/* type: the main pages' scale */
.fm-title, .dc-main .fm-title { font: 800 clamp(36px, 4vw, 60px)/1.02 var(--display); letter-spacing: -0.04em; color: var(--zest); margin-bottom: 16px; }
.fm-lede, .dc-main .fm-lede { color: var(--mute); font-size: var(--fs-lead); line-height: 1.5; max-width: 40em; }
.fm-body, .dc-main .fm-body { font-size: 17px; line-height: 1.65; color: #D2D2D8; }
.fm-body h2 { font: 800 clamp(26px, 2.4vw, 34px)/1.1 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 48px 0 16px; padding-top: 0; border-top: 0; }
.fm-body h3 { font: 700 20px/1.25 var(--display); letter-spacing: -0.015em; margin: 30px 0 10px; }
.fm-ver h2, .fm-body .fm-ver h3 { font-weight: 800; letter-spacing: -0.03em; }
.fm-board-h h2 { font-weight: 800; letter-spacing: -0.02em; }
.fm-crumbs { font-size: 15px; color: var(--mute); }
.fm-crumbs a { color: var(--mute); }
.fm-crumbs a:hover { color: var(--zest); }

/* links in running text: accent green, arrow to the top right, underline only on hover (his rule 03-11) */
.fm-body a { border-bottom: 0; font-weight: 600; text-decoration: none; text-underline-offset: 4px; }
.fm-body a:hover { color: var(--zest-hi); text-decoration: underline; }
.fm-body :is(p, li, td, figcaption) > a:not([class])::after, .fm-closed a::after {
  content: ""; display: inline-block; width: 0.78em; height: 0.78em; margin-left: 0.18em; vertical-align: -0.04em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fm-closed a { font-weight: 600; }
.fm-closed a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fm-ver-go, .fm-other b { color: var(--zest); }

/* the tree and the contents rail: no rules down the side, the current page in green */
.dc-nav { top: var(--nav-h); height: calc(100vh - var(--nav-h)); border-right-color: transparent; padding-top: 28px; }
.dc-toc { top: var(--nav-h); max-height: calc(100vh - var(--nav-h)); padding-top: 34px; }
.dc-tree { font-size: 15px; }
.dc-tree a, .dc-tree details > summary { border-radius: 10px; }
.dc-tree a[aria-current="page"] { color: var(--zest); background: var(--raise); }
.dc-tree a:hover, .dc-tree details > summary:hover { background: var(--raise); }
.dc-links { border-left-color: var(--raise-3); }
.dc-toc h3 { font: 700 15px/1.3 var(--display); }
.dc-toc nav { border-left-color: var(--raise-3); }
.dc-toc a { font-size: 14px; color: var(--mute); }
.dc-main { padding-top: 40px; }
.fm-body li::marker { color: var(--zest); }
.fm-body code { border-color: transparent; background: var(--raise-2); }
.fm-body kbd { border-color: var(--raise-3); background: var(--raise-2); }
.fm-steps > li::before { border-color: transparent; background: var(--raise-2); }
.dc-shot a { background: var(--raise); }
@media (max-width: 860px) {
  .dc-nav { top: 0; z-index: 70; background: var(--ground); border-right: 0; }
}

/* the home's search (his ask 04-11): one big bar under the title, searches to try under it; the inner pages keep
   the small one at the top of the left column */
.fm-home-search { margin: 6px 0 clamp(40px, 5vw, 64px); }
.fm-home-search .fm-search.wide { max-width: 760px; }
.fm-home-search .fm-search.wide label { height: 68px; padding: 0 24px; gap: 14px; border: 0; border-radius: 999px; background: var(--raise-2); font-size: 18px; }
.fm-home-search .fm-search.wide label:focus-within { background: var(--raise-3); box-shadow: 0 0 0 2px var(--zest); }
.fm-home-search .fm-search.wide input { font-size: 18px; }
.fm-home-search .fm-search.wide svg { width: 22px; height: 22px; }
.fm-home-search .fm-results { border-radius: 20px; }
.fm-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--mute); font-size: 15px; }
/* the forum's own `p` margin was winning, so the Try row sat flush against the bar (his report 04-11) */
.fm-home-search p.fm-try { margin: 18px 0 0; }
/* Pick your version: Home's version cards (v2.css .f-ver / .f-nums), the whole card a link */
.fm-vers2 { margin-top: 8px; }
/* the version cards use the whole column (his note 04-11: "too crammed small"); the home page's text keeps its
   reading width */
.fm-body:has(.fm-vers2) { max-width: none; }
.fm-body:has(.fm-vers2) > p, .fm-body:has(.fm-vers2) > .fm-home-search { max-width: 860px; }
.fm-vers2 .f-ver { padding: clamp(28px, 2.6vw, 40px); }
.fm-vers2 .f-ver { color: inherit; text-decoration: none; transition: background-color 0.2s var(--ease), transform 0.2s var(--ease); }
.fm-vers2 .f-ver:hover { background: var(--raise-2); transform: translateY(-2px); }
.fm-vers2 .f-ver h3 { margin: 0; font: 800 clamp(30px, 2.8vw, 42px)/1.05 var(--display); color: var(--ver); letter-spacing: -0.035em; }
.fm-vers2 .f-ver .ver-ico { width: 44px; height: 44px; }
.fm-vers2 .f-ver > p { margin: 0; color: var(--mute); }
.fm-vers2 .f-nums dt { text-transform: none; letter-spacing: 0; }
.fm-vers2 .tlink { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-weight: 700; }
@media (max-width: 760px) { .fm-vers2 { grid-template-columns: minmax(0, 1fr); } }
.fm-try span { margin-right: 4px; font-weight: 600; }
.fm-try button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--raise-2); color: var(--ink); font: 600 14px var(--text); cursor: pointer; transition: background .15s, color .15s; }
.fm-try button:hover { background: var(--raise-3); color: var(--zest); }