/* ═══════════════════════════════════════════════════════════════
   PLSIC Community public pages (/community/*), Direction A board.
   Loaded after colors_and_type.css + interior.css. Every class is
   fm- namespaced (the site's .btn, .tag, .section stay untouched);
   the site tokens stay for the nav and footer, the forum tokens live
   in the one block below. Source: handoffs/forum-ux-redesign-2026-10-11/src
   (common.css + a.css), transformed by hand-checked script; edit here.
   ═══════════════════════════════════════════════════════════════ */

/* PLSIC public forum prototype: shared tokens and chrome (both directions) */
/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  FORUM TOKENS: the calm theme (handoff §4.4, designer 2026-10-11).   ║
   ║  The one block to edit for a palette change. Every forum colour     ║
   ║  resolves to these names (the prototype-era names below are aliases).║
   ╚══════════════════════════════════════════════════════════════════════╝ */
body.fm-page {
  /* Neutrals (warm gray scale) */
  --fm-ground: #F4F3F0;        /* page background */
  --fm-panel: #FFFFFF;         /* panels, message boxes, author cards, header row 1 */
  --fm-panel-alt: #F9F8F6;     /* post band behind author card and message; row hover */
  --fm-bar: #ECEAE6;           /* group bars, table header rows, sidebar heads, current page, active chips */
  --fm-border: #DEDCD7;        /* every rule and border */
  --fm-border-strong: #C9C6C0; /* search and form field outlines */
  /* Type */
  --fm-strong: #1A1A1A;        /* asphalt: h1, titles, names, bar headings */
  --fm-text: #2B2B2B;          /* body text */
  --fm-meta: #6B6966;          /* meta text, counts labels, dates (AA on white, ground, bar) */
  --fm-muted: #8A8783;         /* icons, chevrons, dashed outlines, glyphs only: fails AA for small text */
  --fm-link: #2D6EB5;          /* Handicap Blue: links (not on --fm-bar: 4.36:1) */
  /* The one highlight */
  --fm-accent: #FEDD2F;        /* Marking Yellow: primary buttons, active tab underline, What's new marker, focus halo */
  --fm-accent-hover: #E5C620;  /* primary button hover; thin underline under <mark> */
  --fm-on-accent: #1A1A1A;     /* text on yellow (12.9:1) */
  --fm-tint: #FFF7D6;          /* archive banner and notes, <mark>, example labels */
  --fm-tint-border: #EFE3B4;   /* edge of tinted notes */
  /* Badges */
  /* Sub-nav: mid (default). For the light variant swap these four values, see .subnav.light */
  --fm-subnav: #3A3A38;
  --fm-subnav-text: #E6E4DF;
  --fm-subnav-link: #FFFFFF;
  --fm-subnav-active: #FFFFFF;
  /* Handle avatars: one flat circle, one initial (2026-10-11) */
  --fm-av-bg: #E4E2DE; --fm-av-fg: #4A4A4A;
}

/* Prototype-era names, kept for the base rules: sizes, plus colour aliases onto the calm palette above. */
body.fm-page {
  --fm-asphalt: var(--fm-strong);
  --fm-asphalt-mid: var(--fm-subnav);
  --fm-warm-dark: var(--fm-text);
  --fm-yellow: var(--fm-accent);
  --fm-yellow-hover: var(--fm-accent-hover);
  --fm-yellow-light: var(--fm-tint);
  --fm-white: var(--fm-panel);
  --fm-concrete: var(--fm-ground);
  --fm-stripe: var(--fm-border);
  --fm-body-gray: var(--fm-meta);
  --fm-light-gray: var(--fm-muted);
  --fm-blue: var(--fm-link);
  --fm-fire: #C0392B;
  --fm-wrap: 1200px;
  --fm-gutter: 24px;
  --fm-r-btn: 6px;
  --fm-r-panel: 8px;
  --fm-s1: 4px; --fm-s2: 8px; --fm-s3: 12px; --fm-s4: 16px; --fm-s5: 24px; --fm-s6: 32px; --fm-s7: 48px;
}

body.fm-page {
  background: var(--fm-concrete); color: var(--fm-asphalt);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}
.fm-fm-page .fm-fm-wrap a { color: inherit; }
.fm-fm-page button, .fm-fm-page input, .fm-fm-page select { font: inherit; }
.fm-num { font-variant-numeric: tabular-nums; }
.fm-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fm-wrap { max-width: calc(var(--fm-wrap) + 2 * var(--fm-gutter)); margin: 0 auto; padding: 0 var(--fm-gutter); }
.fm-fm-page :focus-visible { outline: 2px solid var(--fm-asphalt); outline-offset: 2px; box-shadow: 0 0 0 5px var(--fm-yellow); border-radius: 4px; }

/* ── Forum bar: identity, search slot, primary action ── */
.fm-fbar { background: var(--fm-white); border-bottom: 1px solid var(--fm-stripe); }
.fm-fbar .fm-wrap { height: 60px; display: flex; align-items: center; gap: var(--fm-s5); }
.fm-fname { font-size: 18px; font-weight: 800; letter-spacing: -0.2px; text-decoration: none; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.fm-fname svg { flex: none; }
.fm-sbox-wrap { flex: 1; max-width: 640px; display: flex; align-items: center; gap: 12px; position: relative; }
.fm-search { flex: 1; position: relative; display: flex; align-items: center; }
.fm-search svg { position: absolute; left: 13px; pointer-events: none; color: var(--fm-asphalt); }
.fm-search input { width: 100%; height: 44px; border: 2px solid var(--fm-asphalt); background: var(--fm-white); border-radius: var(--fm-r-btn); padding: 0 92px 0 40px; color: var(--fm-asphalt); font-size: 15px; }
.fm-search input::placeholder { color: #6B6964; }
.fm-search .fm-sgo { position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 14px; border: 0; border-radius: 4px; background: var(--fm-asphalt); color: var(--fm-yellow); font-weight: 700; font-size: 13px; cursor: pointer; }
.fm-tips-pop { position: relative; flex: none; font-size: 13px; }
.fm-tips-pop summary { cursor: pointer; font-weight: 600; color: var(--fm-asphalt); text-decoration: underline; text-underline-offset: 3px; list-style: none; white-space: nowrap; }
.fm-tips-pop summary::-webkit-details-marker { display: none; }
.fm-tips-pop .fm-pop { position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; width: 340px; background: var(--fm-white); border: 1px solid var(--fm-asphalt); border-radius: var(--fm-r-panel); box-shadow: 0 8px 24px rgba(26,26,26,.18); padding: 12px 14px; }
.fm-tips-pop .fm-pop p { margin: 0 0 8px; color: var(--fm-warm-dark); }
.fm-tips-pop dl { margin: 0; display: grid; gap: 4px; }
.fm-tips-pop dl div { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: baseline; }
.fm-tips-pop dd { margin: 0; color: var(--fm-body-gray); }
.fm-fm-page code { font-family: inherit; font-weight: 600; background: var(--fm-concrete); border: 1px solid var(--fm-stripe); border-radius: 4px; padding: 0 5px; font-size: .95em; }
/* Continue this discussion */
.fm-btn.fm-cont { white-space: nowrap; }
.fm-contin { border: 1px solid var(--fm-asphalt); background: var(--fm-white); border-radius: var(--fm-r-panel); padding: 12px 16px; margin: 0 0 16px; }
.fm-contin h2 { margin: 0 0 6px; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.fm-contin ul { list-style: none; margin: 0; padding: 0; }
.fm-contin li { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; padding: 6px 0; font-size: 13px; color: var(--fm-body-gray); }
.fm-contin li + li { border-top: 1px solid var(--fm-stripe); }
.fm-contin a { font-size: 15px; font-weight: 700; color: var(--fm-asphalt); }
.fm-continues { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; color: var(--fm-warm-dark); }
.fm-continues a { font-weight: 700; color: var(--fm-asphalt); }
.fm-example { display: inline-block; margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--fm-asphalt); border: 1.5px dashed var(--fm-asphalt); border-radius: 4px; padding: 2px 8px; background: var(--fm-yellow-light); }
.fm-ph-text { color: var(--fm-body-gray); font-style: normal; background: repeating-linear-gradient(90deg, var(--fm-concrete) 0 8px, transparent 8px 12px); padding: 2px 4px; }
.fm-search-btn { display: none; }
.fm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--fm-r-btn); font-size: 14px; font-weight: 700; text-decoration: none; border: 1px solid transparent; white-space: nowrap; cursor: pointer; }
.fm-btn-y { background: var(--fm-yellow); color: var(--fm-asphalt); }
.fm-btn-y:hover { background: var(--fm-yellow-hover); }
.fm-btn-o { background: var(--fm-white); color: var(--fm-asphalt); border-color: var(--fm-asphalt); }
.fm-btn-q { background: transparent; color: var(--fm-asphalt); border-color: var(--fm-stripe); }
.fm-fbar .fm-btn-y { margin-left: auto; }

/* ── Guest strip ── */

/* ── Avatars: one flat circle, one initial; 24 px in lists and strips, 28 px on post cards ── */
.fm-av { --fm-sz: 24px; flex: none; width: var(--fm-sz); height: var(--fm-sz); border-radius: 50%; display: inline-grid; place-items: center; background: var(--fm-av-bg); color: var(--fm-av-fg); font-weight: 600; font-size: calc(var(--fm-sz) * .5); line-height: 1; user-select: none; }
.fm-av.fm-s28 { --fm-sz: 28px; }

/* ── Section tag ── */
.fm-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fm-blue); text-decoration: none; white-space: nowrap; }
.fm-tag::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: currentColor; opacity: .9; }
.fm-tag.fm-t-for-sale { color: #7A5B00; } .fm-tag.fm-t-after-hours { color: var(--fm-body-gray); } .fm-tag.fm-t-tips-tricks { color: #1F5E9C; }
.fm-tag.fm-t-striping-marking { color: var(--fm-blue); } .fm-tag.fm-t-uncategorized, .fm-tag.fm-t-important-announcements, .fm-tag.fm-t-equipment-security-theft { color: var(--fm-body-gray); }
.fm-tag.fm-t-for-sale::before { background: var(--fm-yellow-hover); }

/* ── Reply count heat: plain, warm (10+), hot (20+) painted chip ── */
.fm-rc { font-variant-numeric: tabular-nums; font-weight: 600; }
.fm-rc.fm-warm { font-weight: 800; }
.fm-rc.fm-hot { background: var(--fm-yellow); color: var(--fm-asphalt); font-weight: 800; padding: 2px 8px; border-radius: 4px; }

/* ── Post body ── */
.fm-body { font-size: 16px; line-height: 1.65; color: var(--fm-asphalt); overflow-wrap: anywhere; }
.fm-body p { margin: 0 0 12px; max-width: 68ch; }
.fm-body p:last-child { margin-bottom: 0; }
.fm-body a { color: var(--fm-blue); text-decoration: underline; text-underline-offset: 2px; }
.fm-quote { margin: 4px 0 14px; max-width: 68ch; background: var(--fm-concrete); border: 1px solid var(--fm-stripe); border-radius: var(--fm-r-panel); padding: 10px 14px 12px; font-size: 15px; line-height: 1.6; color: var(--fm-warm-dark); }
.fm-quote .fm-qh { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fm-body-gray); margin-bottom: 6px; }
.fm-quote .fm-qh b { color: var(--fm-asphalt); font-weight: 600; }
.fm-quote .fm-qh a { color: var(--fm-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; margin-left: auto; }
.fm-quote .fm-quote { background: var(--fm-white); }
.fm-quote p { margin: 0; }
.fm-body .fm-qlabel { font-size: 13px; font-weight: 600; color: var(--fm-body-gray); margin-bottom: 4px; }

/* ── Search ── */
.fm-fm-page mark { background: var(--fm-yellow-light); color: inherit; box-shadow: inset 0 -2px 0 var(--fm-yellow); padding: 0 1px; border-radius: 2px; }
.fm-sform { display: flex; gap: 8px; margin-top: 12px; max-width: 640px; }
.fm-sform input { flex: 1; height: 44px; border: 1px solid var(--fm-asphalt); border-radius: var(--fm-r-btn); padding: 0 14px; font-size: 16px; background: var(--fm-white); color: var(--fm-asphalt); }
.fm-sform .fm-btn { min-height: 44px; }
.fm-stips { margin-top: 10px; font-size: 13px; color: var(--fm-warm-dark); max-width: 640px; }
.fm-stips summary { cursor: pointer; font-weight: 600; color: var(--fm-asphalt); }
.fm-stips ul { margin: 8px 0 0; padding-left: 18px; }
.fm-stips li { margin: 4px 0; }
.fm-stips code { font-family: inherit; font-weight: 600; background: var(--fm-concrete); border: 1px solid var(--fm-stripe); border-radius: 4px; padding: 0 5px; }
.fm-snip { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fm-warm-dark); max-width: 75ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Search page */
.fm-sbig { display: flex; gap: 8px; max-width: 760px; }
.fm-sbig input { flex: 1; height: 48px; border: 2px solid var(--fm-asphalt); border-radius: var(--fm-r-btn); padding: 0 14px; font-size: 16px; background: var(--fm-white); color: var(--fm-asphalt); }
.fm-sbig .fm-btn { min-height: 48px; padding: 0 22px; }
.fm-ophint { margin: 8px 0 0; font-size: 13px; color: var(--fm-warm-dark); line-height: 1.9; }
.fm-ophint code { margin-right: 2px; }
.fm-filters { margin: 16px 0 12px; display: grid; gap: 8px; }
.fm-frow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.fm-frow .fm-fl { width: 64px; flex: none; font-weight: 700; color: var(--fm-asphalt); }
.fm-fchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--fm-stripe); border-radius: 999px; background: var(--fm-white); color: var(--fm-asphalt); font-weight: 600; text-decoration: none; white-space: nowrap; }
.fm-fchip:hover { border-color: var(--fm-asphalt); }
.fm-fchip[aria-current] { background: var(--fm-asphalt); border-color: var(--fm-asphalt); color: var(--fm-yellow); }
.fm-fchip .fm-x { font-weight: 800; color: #fff; }
.fm-fchip.fm-input { padding: 0 4px 0 11px; gap: 4px; }
.fm-fchip.fm-input input { border: 0; height: 26px; width: 120px; font: inherit; font-weight: 500; background: transparent; }
.fm-rcount-line { margin: 0 0 10px; font-size: 14px; color: var(--fm-warm-dark); }
.fm-rcount-line b { color: var(--fm-asphalt); }
.fm-snip { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fm-warm-dark); max-width: 80ch; }
.fm-jumpto { font-size: 13px; font-weight: 600; color: var(--fm-blue); }
.fm-emptyst { background: var(--fm-white); border: 1px solid var(--fm-stripe); border-radius: var(--fm-r-panel); padding: 22px 24px; }
.fm-emptyst h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.fm-emptyst p { margin: 0 0 12px; color: var(--fm-warm-dark); }
.fm-emptyst ul { margin: 0; padding-left: 18px; line-height: 1.9; font-size: 14px; }
.fm-emptyst a { color: var(--fm-blue); font-weight: 600; }

/* ── Pager ── */
.fm-pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fm-pager a, .fm-pager span { min-width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: var(--fm-r-btn); font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid var(--fm-stripe); background: var(--fm-white); font-variant-numeric: tabular-nums; }
.fm-pager [aria-current] { background: var(--fm-asphalt); color: var(--fm-yellow); border-color: var(--fm-asphalt); }
.fm-pager .fm-gap { border: 0; background: none; min-width: 20px; padding: 0; color: var(--fm-body-gray); }
.fm-pager .fm-next { padding: 0 14px; }

/* ── Shared phone rules ── */
@media (max-width: 720px) {
  body.fm-page { --fm-gutter: 16px; }
  .fm-fbar .fm-wrap { height: 56px; gap: var(--fm-s2); }
  .fm-fname { font-size: 16px; }
  .fm-sbox-wrap { display: none; }
  .fm-search-btn { display: inline-grid; text-decoration: none; place-items: center; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--fm-stripe); border-radius: var(--fm-r-btn); background: var(--fm-white); color: var(--fm-asphalt); }
  .fm-fbar .fm-btn-y { margin-left: 0; min-height: 44px; padding: 0 12px; }
  .fm-pager a, .fm-pager span { min-width: 44px; height: 44px; }
  .fm-sbig input, .fm-sbig .fm-btn { min-height: 44px; height: 44px; }
  .fm-frow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .fm-frow .fm-fl { width: auto; margin-right: 4px; }
  .fm-fchip { height: 36px; }
  .fm-emptyst { padding: 18px 16px; }

  .fm-body { font-size: 16px; }
}

/* ── Direction A board ── */
/* Direction A: classic board, modelled on Wilders Security Forums (XenForo) in PLSIC colours */
.fm-page { padding-top: var(--fm-s4); }

.fm-ptitle { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; }
.fm-pdesc { margin: 0 0 16px; color: var(--fm-warm-dark); font-size: 14px; max-width: 80ch; }

.fm-home { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--fm-s5); align-items: start; }

/* Category group: dark bar + forum rows */
.fm-grp { background: var(--fm-white); border: 1px solid var(--fm-stripe); border-radius: var(--fm-r-panel); overflow: hidden; }
.fm-grp + .fm-grp { margin-top: var(--fm-s4); }
.fm-grp-h { display: flex; align-items: center; gap: 10px; background: var(--fm-asphalt); color: #fff; padding: 11px 16px; }
.fm-grp-h h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.1px; }
.fm-grp-h .fm-tag-y { font-size: 11px; font-weight: 700; color: var(--fm-asphalt); background: var(--fm-yellow); border-radius: 3px; padding: 1px 6px; }
.fm-grp-h .fm-tag-a { font-size: 11px; font-weight: 700; color: var(--fm-yellow); border: 1px solid var(--fm-yellow); border-radius: 3px; padding: 0 6px; }
.fm-grp-h .fm-more { margin-left: auto; color: var(--fm-yellow); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fm-grp-h .fm-folder { width: 16px; height: 12px; border-radius: 2px; background: var(--fm-yellow); flex: none; position: relative; margin-top: 2px; }
.fm-grp-h .fm-folder::before { content: ''; position: absolute; left: 0; top: -3px; width: 7px; height: 4px; background: var(--fm-yellow); border-radius: 2px 2px 0 0; }

.fm-node { display: grid; grid-template-columns: 40px minmax(0, 1fr) 300px; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--fm-stripe); }
.fm-node:last-child { border-bottom: 0; }
.fm-node .fm-ico { width: 36px; height: 36px; display: grid; place-items: center; }
.fm-node .fm-ico svg { stroke: var(--fm-asphalt); }
.fm-node.fm-live .fm-ico svg path:first-child { fill: var(--fm-yellow); }
.fm-node.fm-arch .fm-ico svg { stroke: var(--fm-body-gray); stroke-dasharray: 3 2.5; }
.fm-node .fm-nm { font-size: 16px; font-weight: 700; color: var(--fm-asphalt); text-decoration: none; }
.fm-node .fm-nm:hover { text-decoration: underline; text-underline-offset: 3px; }
.fm-node .fm-desc { margin: 2px 0 0; font-size: 13px; color: var(--fm-warm-dark); line-height: 1.45; }
.fm-node .fm-cnt { margin: 4px 0 0; font-size: 13px; color: var(--fm-body-gray); display: flex; gap: 14px; }
.fm-node .fm-cnt b { color: var(--fm-asphalt); font-variant-numeric: tabular-nums; }
/* Empty member sections stay in the list but stay short */
.fm-node.fm-live { padding-top: 10px; padding-bottom: 10px; }
.fm-node.fm-live .fm-ico { width: 30px; height: 30px; }
.fm-node.fm-live .fm-ico svg { width: 26px; height: 26px; }
.fm-node.fm-live .fm-nm { font-size: 15px; }
.fm-node.fm-live .fm-desc { display: inline; margin: 0 0 0 8px; }
.fm-node.fm-live .fm-cnt { display: none; }
.fm-lp { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 10px; align-items: center; font-size: 13px; line-height: 1.35; }
.fm-lp .fm-t { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fm-body-gray); }
.fm-lp .fm-t a { color: var(--fm-blue); font-weight: 600; text-decoration: none; }
.fm-lp .fm-t a:hover { text-decoration: underline; }
.fm-lp .fm-u { color: var(--fm-body-gray); }
.fm-lp .fm-u b { color: var(--fm-asphalt); font-weight: 600; }
.fm-lp.fm-none { display: block; color: var(--fm-warm-dark); font-size: 13px; }
.fm-lp.fm-none a { color: var(--fm-asphalt); font-weight: 700; }

/* What's new strip */
.fm-wn { margin-bottom: var(--fm-s4); }
.fm-wn ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.fm-wn li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--fm-stripe); min-width: 0; }
.fm-wn li:nth-child(odd) { border-right: 1px solid var(--fm-stripe); }
.fm-wn li:nth-last-child(-n+2) { border-bottom: 0; }
.fm-wn a { font-weight: 600; color: var(--fm-asphalt); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.fm-wn a:hover { text-decoration: underline; }
.fm-wn li > div > span { font-size: 12px; color: var(--fm-body-gray); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sidebar */
.fm-side .fm-sp { background: var(--fm-white); border: 1px solid var(--fm-stripe); border-radius: var(--fm-r-panel); overflow: hidden; }
.fm-side .fm-sp + .fm-sp { margin-top: var(--fm-s4); }
.fm-sp h2 { margin: 0; background: var(--fm-asphalt); color: #fff; font-size: 14px; font-weight: 700; padding: 10px 14px; }
.fm-sp .fm-in { padding: 12px 14px; font-size: 14px; }
.fm-sp .fm-in p { margin: 0 0 12px; color: var(--fm-warm-dark); }
.fm-sp .fm-btn { width: 100%; }
.fm-sp .fm-btn + .fm-btn { margin-top: 8px; }
.fm-sp .fm-sub { display: block; text-align: center; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--fm-asphalt); }
.fm-fstats { margin: 0; padding: 6px 14px 10px; font-size: 13px; }
.fm-fstats div { display: flex; justify-content: space-between; padding: 4px 0; }
.fm-fstats dt { color: var(--fm-warm-dark); }
.fm-fstats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.fm-reads { list-style: none; margin: 0; padding: 4px 0; }
.fm-reads li { padding: 8px 14px; }
.fm-reads li + li { border-top: 1px solid var(--fm-stripe); }
.fm-reads a { font-weight: 600; font-size: 14px; text-decoration: none; line-height: 1.35; display: block; color: var(--fm-blue); }
.fm-reads a:hover { text-decoration: underline; }
.fm-reads span { font-size: 12px; color: var(--fm-body-gray); }

/* Forum view: thread list */
.fm-ftool { display: flex; align-items: center; gap: var(--fm-s3); flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; }
.fm-ftool .fm-pager { margin-right: auto; }
.fm-ftool .fm-pg-l { color: var(--fm-body-gray); margin-right: 4px; }
.fm-ftool label { font-weight: 600; }
.fm-ftool select { height: 36px; border: 1px solid var(--fm-stripe); border-radius: 6px; padding: 0 10px; background: var(--fm-white); font: inherit; font-weight: 600; }
.fm-lockchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--fm-warm-dark); border: 1px solid var(--fm-stripe); border-radius: 4px; padding: 3px 8px; background: var(--fm-white); }
.fm-tlist { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--fm-white); border: 1px solid var(--fm-stripe); border-radius: var(--fm-r-panel); overflow: hidden; }
.fm-tlist th { background: var(--fm-asphalt); color: #fff; font-size: 14px; font-weight: 600; text-align: left; padding: 10px 16px; }
.fm-tlist th.fm-c-r { text-align: center; width: 92px; }
.fm-tlist th.fm-c-l { text-align: right; width: 190px; }
.fm-tlist th .fm-sorted { color: var(--fm-yellow); }
.fm-tlist td { padding: 11px 16px; border-bottom: 1px solid var(--fm-stripe); vertical-align: middle; }
.fm-tlist tr:last-child td { border-bottom: 0; }
.fm-tlist tbody tr:hover td { background: #FBFAF8; }
.fm-tlist td.fm-c-r { text-align: center; }
.fm-tlist td.fm-c-l { text-align: right; font-size: 13px; line-height: 1.35; }
.fm-tlist td.fm-c-l b { display: block; font-weight: 600; color: var(--fm-asphalt); }
.fm-tlist td.fm-c-l span { color: var(--fm-body-gray); }
.fm-tlist td.fm-c-l .fm-none { color: #8a8780; }
.fm-tcell { display: flex; gap: 12px; align-items: center; min-width: 0; }
.fm-tcell > div { min-width: 0; }
.fm-ttl { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--fm-asphalt); text-decoration: none; }
.fm-ttl:hover { text-decoration: underline; text-underline-offset: 3px; }
.fm-tmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 2px; font-size: 13px; color: var(--fm-body-gray); }
.fm-fpager { display: flex; align-items: center; gap: var(--fm-s3); margin-top: 12px; flex-wrap: wrap; font-size: 13px; color: var(--fm-body-gray); }
.fm-fpager .fm-pager { margin-left: auto; }

/* Thread view */
.fm-thd { display: flex; gap: var(--fm-s4); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.fm-thd h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.5px; }
.fm-thd .fm-acts { display: flex; align-items: center; gap: 10px; flex: none; }
.fm-disc { margin: 6px 0 14px; font-size: 13px; color: var(--fm-body-gray); }
.fm-disc a { color: var(--fm-asphalt); font-weight: 600; }
.fm-msg { display: grid; grid-template-columns: 172px minmax(0, 1fr); background: #F7F6F3; border: 1px solid var(--fm-stripe); border-radius: var(--fm-r-panel); scroll-margin-top: 64px; }
.fm-msg + .fm-msg { margin-top: 10px; }
.fm-msg:target { box-shadow: 0 0 0 3px var(--fm-yellow); }
.fm-ablk { padding: 14px 0 14px 12px; }
.fm-acard { position: relative; background: var(--fm-white); border: 1px solid var(--fm-stripe); border-radius: 6px; padding: 12px 10px 10px; text-align: center; }
.fm-acard::after { content: ''; position: absolute; right: -8px; top: 26px; width: 14px; height: 14px; background: var(--fm-white); border-top: 1px solid var(--fm-stripe); border-right: 1px solid var(--fm-stripe); transform: rotate(45deg); }
.fm-acard .fm-av { margin: 0 auto 8px; }
.fm-acard .fm-nm { display: block; font-size: 14px; font-weight: 700; color: var(--fm-asphalt); overflow-wrap: anywhere; }
.fm-acard .fm-lbl { display: block; margin-top: 2px; font-size: 12px; color: var(--fm-body-gray); line-height: 1.35; }
.fm-acard .fm-op { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--fm-asphalt); background: var(--fm-yellow); border-radius: 3px; padding: 1px 6px; }
/* Claim this handle (NNN-5177): hidden until community.js reveals it for a signed-in member. */
.fm-claim { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; }
.fm-claim[hidden], .fm-claim [hidden] { display: none; }
.fm-claim-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--fm-meta); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fm-claim-btn:hover, .fm-claim-btn:focus-visible { color: var(--fm-strong); }
.fm-claim-st { color: var(--fm-meta); }
.fm-claim-modal .fm-ph-band { margin: 0 0 6px; border-radius: 4px; }
.fm-claim-modal .cm-modal-sub b { color: var(--fm-strong); overflow-wrap: anywhere; }
.fm-mright { margin: 14px 14px 14px 18px; background: var(--fm-white); border: 1px solid var(--fm-stripe); border-radius: 6px; display: flex; flex-direction: column; min-width: 0; }
.fm-mtop { display: none; }
.fm-mbody { padding: 16px 18px 10px; flex: 1; }
.fm-mfoot { display: flex; align-items: center; gap: 14px; padding: 8px 18px 10px; border-top: 1px solid var(--fm-stripe); font-size: 13px; color: var(--fm-body-gray); }
.fm-mfoot .fm-perma { margin-left: auto; font-weight: 700; color: var(--fm-body-gray); text-decoration: none; font-variant-numeric: tabular-nums; }
.fm-mfoot .fm-perma:hover { color: var(--fm-asphalt); text-decoration: underline; }
.fm-report { display: inline-flex; align-items: center; gap: 5px; color: var(--fm-body-gray); text-decoration: none; font-weight: 500; min-height: 28px; }
.fm-report:hover { color: var(--fm-asphalt); text-decoration: underline; }
.fm-closed { margin-top: var(--fm-s4); display: grid; grid-template-columns: auto 1fr auto; gap: var(--fm-s4); align-items: center; padding: 18px 20px; background: var(--fm-white); border: 1px solid var(--fm-stripe); border-radius: var(--fm-r-panel); }
.fm-closed .fm-ico { width: 40px; height: 40px; border-radius: 8px; background: var(--fm-asphalt); color: var(--fm-yellow); display: grid; place-items: center; }
.fm-closed h2 { margin: 0; font-size: 16px; font-weight: 800; }
.fm-closed p { margin: 2px 0 0; font-size: 14px; color: var(--fm-warm-dark); }
.fm-closed .fm-acts { display: flex; gap: 8px; }

@media (max-width: 1100px) { .fm-home { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .fm-page { padding-top: var(--fm-s3); }
  .fm-ptitle { font-size: 22px; }
  .fm-node { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 14px; align-items: start; }
  .fm-node .fm-ico { width: 30px; height: 30px; }
  .fm-node .fm-ico svg { width: 26px; height: 26px; }
  .fm-node .fm-desc { display: none; }
  .fm-node.fm-live .fm-desc { display: none; }
  .fm-node.fm-live { align-items: center; }
  .fm-node.fm-live > .fm-lp { margin-top: 2px; }
  .fm-node > .fm-lp { grid-column: 2; }
  .fm-node > .fm-lp .fm-av { display: none; }
  .fm-lp { grid-template-columns: minmax(0, 1fr); }
  .fm-grp-h { padding: 10px 14px; }
  .fm-grp-h h2 { font-size: 15px; }
  .fm-wn ol { grid-template-columns: 1fr; }
  .fm-wn li { border-right: 0 !important; border-bottom: 1px solid var(--fm-stripe) !important; padding: 10px 14px; }
  .fm-wn li:last-child { border-bottom: 0 !important; }
  .fm-ftool .fm-pager, .fm-ftool .fm-pg-l { display: none; }
  .fm-tlist thead { display: none; }
  .fm-tlist, .fm-tlist tbody, .fm-tlist tr, .fm-tlist td { display: block; width: auto; }
  .fm-tlist tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--fm-stripe); }
  .fm-tlist tr:last-child { border-bottom: 0; }
  .fm-tlist td { padding: 0; border: 0 !important; }
  .fm-tlist td.fm-c-r { grid-column: 2; grid-row: 1; align-self: start; padding-top: 2px; }
  .fm-tlist td.fm-c-l { grid-column: 1; text-align: left; padding-left: 36px; margin-top: 4px; font-size: 12px; }
  .fm-tlist td.fm-c-l b { display: inline; }
  .fm-tlist td.fm-c-l b::before { content: 'Last post by '; font-weight: 400; color: var(--fm-body-gray); }
  .fm-tlist td.fm-c-l b.fm-when::before { content: 'Last post '; }
  .fm-tlist td.fm-c-l b + span::before { content: ', '; }
  .fm-tcell { align-items: flex-start; }
  .fm-tmeta { font-size: 12px; }
  .fm-fpager .fm-pager { margin-left: 0; }
  .fm-thd h1 { font-size: 23px; }
  .fm-thd .fm-acts { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
  .fm-thd .fm-acts .fm-lockchip { align-self: flex-start; }
  .fm-thd .fm-acts .fm-btn { min-height: 44px; }
  .fm-msg { grid-template-columns: minmax(0, 1fr); background: var(--fm-white); }
  .fm-ablk { display: none; }
  .fm-mright { margin: 0; border: 0; }
  .fm-mtop { display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; }
  .fm-mtop b { display: block; font-size: 14px; }
  .fm-mtop small { display: block; font-size: 12px; color: var(--fm-body-gray); }
  .fm-mbody { padding: 12px 14px 8px; }
  .fm-mfoot { padding: 8px 14px 10px; flex-wrap: wrap; }
  .fm-closed { grid-template-columns: auto 1fr; padding: 16px 14px; }
  .fm-closed .fm-acts { grid-column: 1 / -1; }
  .fm-closed .fm-acts .fm-btn { flex: 1; min-height: 44px; }
}

/* ── Calm theme overrides (src/a-calm.css, fm- namespaced). Keep after the base rules. ── */

/* ── Base ── */
body.fm-fm-page { background: var(--fm-ground); color: var(--fm-text); }
.fm-fm-page :focus-visible { outline: 2px solid var(--fm-strong); box-shadow: 0 0 0 5px var(--fm-accent); }

/* ── Forum header row 1 ── */
.fm-fbar { background: var(--fm-panel); border-bottom-color: var(--fm-border); }
.fm-fname { color: var(--fm-strong); }
.fm-fname svg rect { fill: var(--fm-subnav); }
.fm-search svg { color: var(--fm-meta); }
.fm-search input { border: 1.5px solid var(--fm-border-strong); background: var(--fm-panel); color: var(--fm-text); }
.fm-search input:hover { border-color: var(--fm-meta); }
.fm-search input::placeholder { color: var(--fm-meta); }
.fm-search .fm-sgo { background: var(--fm-accent); color: var(--fm-on-accent); }
.fm-search .fm-sgo:hover { background: var(--fm-accent-hover); }
.fm-tips-pop summary { color: var(--fm-text); }
.fm-tips-pop .fm-pop { border-color: var(--fm-border); box-shadow: 0 8px 24px rgba(43, 43, 43, .12); }
.fm-tips-pop .fm-pop p, .fm-tips-pop dd { color: var(--fm-meta); }
.fm-search-btn { border-color: var(--fm-border); color: var(--fm-text); }
.fm-fm-page code { background: var(--fm-ground); border-color: var(--fm-border); color: var(--fm-text); }

/* ── Avatars, tags, counts ── */
.fm-tag, .fm-tag.fm-t-for-sale, .fm-tag.fm-t-after-hours, .fm-tag.fm-t-tips-tricks, .fm-tag.fm-t-striping-marking, .fm-tag.fm-t-uncategorized, .fm-tag.fm-t-important-announcements, .fm-tag.fm-t-equipment-security-theft { color: var(--fm-link); }
.fm-tag::before, .fm-tag.fm-t-for-sale::before { background: var(--fm-muted); opacity: 1; }
.fm-rc { color: var(--fm-text); }
.fm-rc.fm-warm { color: var(--fm-strong); }
.fm-rc.fm-hot { background: var(--fm-bar); color: var(--fm-strong); box-shadow: inset 0 0 0 1px var(--fm-border-strong); }

/* ── Buttons, pager, chips ── */
.fm-btn-y { background: var(--fm-accent); color: var(--fm-on-accent); }
.fm-btn-y:hover { background: var(--fm-accent-hover); }
.fm-btn-o { background: var(--fm-panel); color: var(--fm-strong); border-color: var(--fm-border-strong); }
.fm-btn-o:hover { border-color: var(--fm-meta); }
.fm-pager a, .fm-pager span { background: var(--fm-panel); border-color: var(--fm-border); color: var(--fm-text); }
.fm-pager [aria-current] { background: var(--fm-bar); color: var(--fm-strong); border-color: var(--fm-meta); font-weight: 800; }
.fm-pager .fm-gap { background: none; color: var(--fm-meta); }
.fm-fchip { background: var(--fm-panel); border-color: var(--fm-border); color: var(--fm-text); }
.fm-fchip:hover { border-color: var(--fm-meta); }
.fm-fchip[aria-current] { background: var(--fm-bar); border-color: var(--fm-meta); color: var(--fm-strong); }
.fm-fchip .fm-x { color: var(--fm-meta); }
.fm-sbig input { border: 1.5px solid var(--fm-border-strong); background: var(--fm-panel); color: var(--fm-text); }
.fm-ophint, .fm-rcount-line, .fm-snip { color: var(--fm-meta); }
.fm-rcount-line b { color: var(--fm-strong); }
.fm-fm-page mark { background: var(--fm-tint); box-shadow: inset 0 -1px 0 var(--fm-accent-hover); color: inherit; }
.fm-jumpto { color: var(--fm-link); }
.fm-emptyst { background: var(--fm-panel); border-color: var(--fm-border); }
.fm-emptyst p { color: var(--fm-meta); }
.fm-example { background: var(--fm-tint); border-color: var(--fm-meta); color: var(--fm-text); }

/* ── Breadcrumb bar ── */
.fm-ptitle { color: var(--fm-strong); }
.fm-pdesc { color: var(--fm-meta); }

/* ── Category groups and forum rows ── */
.fm-grp { background: var(--fm-panel); border-color: var(--fm-border); }
.fm-grp-h { background: var(--fm-bar); color: var(--fm-strong); border-bottom: 1px solid var(--fm-border); }
.fm-grp-h h2 { color: var(--fm-strong); }
.fm-grp-h .fm-folder, .fm-grp-h .fm-folder::before { background: var(--fm-muted); }
.fm-grp-h .fm-tag-y, .fm-grp-h .fm-tag-a { background: var(--fm-panel); color: var(--fm-meta); border: 1px solid var(--fm-border-strong); }
.fm-grp-h .fm-more { color: var(--fm-text); }
.fm-wn .fm-grp-h::before { content: ''; width: 4px; height: 18px; border-radius: 2px; background: var(--fm-accent); box-shadow: inset 0 0 0 1px var(--fm-accent-hover); flex: none; }
.fm-node { border-bottom-color: var(--fm-border); }
.fm-node .fm-ico svg { stroke: var(--fm-meta); }
.fm-node.fm-live .fm-ico svg path:first-child { fill: var(--fm-panel); }
.fm-node.fm-arch .fm-ico svg { stroke: var(--fm-muted); }
.fm-node .fm-nm { color: var(--fm-strong); }
.fm-node .fm-desc { color: var(--fm-meta); }
.fm-node .fm-cnt { color: var(--fm-meta); }
.fm-node .fm-cnt b { color: var(--fm-strong); }
.fm-lp .fm-t, .fm-lp .fm-u { color: var(--fm-meta); }
.fm-lp .fm-t a { color: var(--fm-link); }
.fm-lp .fm-u b { color: var(--fm-strong); }
.fm-lp.fm-none { color: var(--fm-meta); }
.fm-wn li { border-color: var(--fm-border); }
.fm-wn a { color: var(--fm-strong); }
.fm-wn li > div > span { color: var(--fm-meta); }

/* ── Sidebar ── */
.fm-side .fm-sp { background: var(--fm-panel); border-color: var(--fm-border); }
.fm-sp h2 { background: var(--fm-bar); color: var(--fm-strong); border-bottom: 1px solid var(--fm-border); }
.fm-sp .fm-in p { color: var(--fm-meta); }
.fm-sp .fm-sub { color: var(--fm-text); }
.fm-fstats dt { color: var(--fm-meta); }
.fm-fstats dd { color: var(--fm-strong); }
.fm-reads li + li { border-top-color: var(--fm-border); }
.fm-reads a { color: var(--fm-link); }
.fm-reads span { color: var(--fm-meta); }

/* ── Forum view table ── */
.fm-ftool .fm-pg-l, .fm-fpager { color: var(--fm-meta); }
.fm-ftool label { color: var(--fm-text); }
.fm-ftool select { border-color: var(--fm-border-strong); background: var(--fm-panel); color: var(--fm-text); }
.fm-lockchip { background: var(--fm-panel); border-color: var(--fm-border); color: var(--fm-meta); }
.fm-tlist { background: var(--fm-panel); border-color: var(--fm-border); }
.fm-tlist th { background: var(--fm-bar); color: var(--fm-strong); border-bottom: 1px solid var(--fm-border); }
.fm-tlist th .fm-sorted { color: var(--fm-meta); }
.fm-tlist td { border-bottom-color: var(--fm-border); }
.fm-tlist tbody tr:hover td { background: var(--fm-panel-alt); }
.fm-tlist td.fm-c-l b { color: var(--fm-strong); }
.fm-tlist td.fm-c-l span, .fm-tmeta { color: var(--fm-meta); }
.fm-tlist td.fm-c-l .fm-none { color: var(--fm-meta); }
.fm-ttl { color: var(--fm-strong); }

/* ── Thread view ── */
.fm-thd h1 { color: var(--fm-strong); }
.fm-disc { color: var(--fm-meta); }
.fm-disc a { color: var(--fm-text); }
.fm-msg { background: var(--fm-panel-alt); border-color: var(--fm-border); }
.fm-msg:target { box-shadow: 0 0 0 3px var(--fm-accent); }
.fm-acard, .fm-acard::after { border-color: var(--fm-border); }
.fm-acard .fm-nm { color: var(--fm-strong); }
.fm-acard .fm-lbl { color: var(--fm-meta); }
.fm-acard .fm-op { background: var(--fm-bar); color: var(--fm-strong); box-shadow: inset 0 0 0 1px var(--fm-border-strong); }
.fm-mright { border-color: var(--fm-border); }
.fm-mfoot { border-top-color: var(--fm-border); color: var(--fm-meta); }
.fm-mfoot .fm-perma, .fm-report { color: var(--fm-meta); }
.fm-mfoot .fm-perma:hover, .fm-report:hover { color: var(--fm-strong); }
.fm-body { color: var(--fm-text); }
.fm-quote { background: var(--fm-ground); border-color: var(--fm-border); color: var(--fm-text); }
.fm-quote .fm-qh { color: var(--fm-meta); }
.fm-quote .fm-qh b { color: var(--fm-strong); }
.fm-quote .fm-quote { background: var(--fm-panel); }
.fm-body .fm-qlabel { color: var(--fm-meta); }
.fm-ph-text { color: var(--fm-meta); }
.fm-contin { border-color: var(--fm-border); background: var(--fm-panel); }
.fm-contin h2 { color: var(--fm-strong); }
.fm-contin h2 svg { color: var(--fm-meta); }
.fm-contin li { color: var(--fm-meta); }
.fm-contin li + li { border-top-color: var(--fm-border); }
.fm-contin a { color: var(--fm-strong); }
.fm-continues { color: var(--fm-meta); }
.fm-continues a { color: var(--fm-strong); }
.fm-closed { background: var(--fm-panel); border-color: var(--fm-border); }
.fm-closed .fm-ico { background: var(--fm-bar); color: var(--fm-meta); }
.fm-closed h2 { color: var(--fm-strong); }
.fm-closed p { color: var(--fm-meta); }

@media (max-width: 720px) {
  .fm-msg { background: var(--fm-panel); }
}

/* ─── Archive foot line: one quiet line at the bottom of archive thread and list pages ─── */
.fm-afoot { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--fm-meta); }
.fm-afoot a { color: var(--fm-meta); text-decoration: underline; text-underline-offset: 2px; }
.fm-afoot a:hover { color: var(--fm-strong); }

/* ─── Member sign-in and composers (NNN-5170 W3/W4) ─── */
.fm-page [hidden] { display: none !important; }
.fm-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--fm-strong); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Site header on forum pages: Member Login opens the forum sign-in, and a
   signed-in member gets their name with Member portal and Sign out
   (components.js renderForumAccount). The nav sits outside .fm-page, so it
   needs its own [hidden] rule. */
.nav-forum-account [hidden] { display: none !important; }
.nav-member .nav-parent { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); }
.nav-member-name { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.nav-member .nav-submenu { left: auto; right: -16px; min-width: 200px; }
.nav-submenu .nav-submenu-btn { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; padding: 10px 18px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85); letter-spacing: 0.01em; }
.nav-submenu .nav-submenu-btn:hover, .nav-submenu .nav-submenu-btn:focus-visible { color: var(--marking-yellow); background: rgba(255,255,255,0.04); }
@media (max-width: 860px) {
  .nav-member .nav-parent { justify-content: center; }
  .nav-member-name { max-width: 70vw; }
  .nav-member .nav-submenu a, .nav-submenu .nav-submenu-btn { text-align: center; padding: 12px 16px; min-height: 44px; }
}
.fm-home.fm-one { grid-template-columns: minmax(0, 1fr); }
.fm-signin summary { list-style: none; cursor: pointer; }
.fm-signin summary::-webkit-details-marker { display: none; }
.fm-signin-form { margin-top: 12px; text-align: left; }
.fm-field { display: block; margin-bottom: 12px; }
.fm-field > span { display: block; font-size: 12px; font-weight: 700; color: var(--fm-meta); margin-bottom: 5px; }
.fm-field input, .fm-field select, .fm-field textarea { width: 100%; min-height: 44px; border: 1.5px solid var(--fm-border-strong); border-radius: var(--fm-r-btn); background: var(--fm-panel); color: var(--fm-text); font: inherit; font-size: 15px; padding: 9px 12px; }
.fm-field textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
.fm-field input:focus, .fm-field select:focus, .fm-field textarea:focus { outline: 2px solid var(--fm-accent); outline-offset: 1px; }
.fm-form-err { margin: 0 0 12px; padding: 9px 12px; border-radius: var(--fm-r-btn); background: #FDECEC; color: #8E2B22; font-size: 14px; line-height: 1.45; }
.fm-compose { margin-bottom: var(--fm-s4); background: var(--fm-panel); border: 1px solid var(--fm-border); border-radius: var(--fm-r-panel); padding: 16px 20px 18px; }
.fm-compose-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fm-compose-h h2 { margin: 0; font-size: 18px; color: var(--fm-strong); }
.fm-compose-x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--fm-meta); cursor: pointer; padding: 0 4px; }
.fm-compose-x:hover { color: var(--fm-strong); }
.fm-compose-note { margin: 0 0 12px; font-size: 13px; color: var(--fm-meta); }
.fm-compose-note a { color: var(--fm-strong); }
.fm-compose-gate p { margin: 0 0 12px; color: var(--fm-meta); font-size: 14px; line-height: 1.5; }
.fm-compose-refused { margin: 0; padding: 10px 12px; background: var(--fm-bar); border-radius: var(--fm-r-btn); color: var(--fm-text); font-size: 14px; line-height: 1.5; }
.fm-compose .fm-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.fm-reply { display: block; }
.fm-reply .fm-compose-gate { display: grid; grid-template-columns: auto 1fr auto; gap: var(--fm-s4); align-items: center; }
.fm-reply .fm-compose-gate p { margin: 0; }
.fm-reply-form .fm-field textarea { min-height: 140px; }
.fm-msg.fm-target .fm-mright { box-shadow: inset 4px 0 0 var(--fm-accent); }
.fm-ph-band { background: var(--fm-tint); color: var(--fm-strong); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 16px; }
.fm-at-head { background: var(--fm-strong); color: #fff; padding: 12px 16px; border-bottom: 4px solid var(--fm-accent); margin: 0 -22px 14px; }
.fm-at-head .cm-modal-title { color: #fff; margin: 0; font-size: 16px; }
.fm-at-rule { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--fm-strong); line-height: 1.45; }
.fm-at-explain { margin: 0 0 12px; font-size: 14px; color: var(--fm-text); line-height: 1.45; }
.fm-at-fine { margin: 0 0 16px; font-size: 12px; color: var(--fm-meta); }
.fm-at-modal .fm-ph-band { margin: -22px -22px 12px; }
@media (max-width: 720px) {
  .fm-reply .fm-compose-gate { grid-template-columns: auto 1fr; }
  .fm-reply .fm-compose-gate .fm-acts { grid-column: 1 / -1; }
  .fm-compose { padding: 14px 14px 16px; }
  .fm-compose .fm-acts .fm-btn { flex: 1; min-height: 44px; }
}

/* ─── Report links and the takedown form (public/js/community.js) ─── */
.cm-post-tools { margin-left: auto; }
.cm-post-report, .cm-report-link, .cm-banner-link {
  font-size: 11px; color: var(--fg-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cm-post-report:hover, .cm-report-link:hover { color: var(--fire-red); }
.cm-report-link { font-size: inherit; color: var(--fg-2); }
.cm-banner-link { font-size: inherit; }
.cm-truncated { margin: 16px 0 0; font-size: 14px; color: var(--fg-3); }
.cm-reply-note { font-size: 14px; color: var(--fg-2); }
.cm-modal-open { overflow: hidden; }
.cm-modal-backdrop {
  position: fixed; inset: 0; z-index: 400; background: rgba(26,26,26,0.6);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cm-modal {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--line-white); border-radius: var(--r-xl); padding: 28px 28px 24px; box-shadow: var(--shadow-lg);
}
.cm-modal-close {
  position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 26px; line-height: 1;
  color: var(--fg-3); cursor: pointer; padding: 4px 8px;
}
.cm-modal-close:hover { color: var(--fg-1); }
.cm-modal-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--fg-1); }
.cm-modal-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.cm-field { display: block; margin-bottom: 14px; }
.cm-field > span { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-2); margin-bottom: 6px; }
.cm-opt { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--fg-3); }
.cm-field select, .cm-field input, .cm-field textarea {
  width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: var(--r-md); background: var(--line-white); color: var(--fg-1);
}
.cm-field select:focus, .cm-field input:focus, .cm-field textarea:focus { outline: 2px solid var(--handicap-blue); outline-offset: 1px; border-color: var(--handicap-blue); }
.cm-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--fg-2); margin: 0 0 14px; padding: 12px; background: var(--concrete); border-radius: var(--r-md); }
.cm-check input { margin-top: 3px; flex: none; }
.cm-modal-err { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-md); background: #FDECEC; color: var(--fire-red-dark); font-size: 14px; }
.cm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.cm-modal-actions .btn { padding: 10px 18px; min-height: 40px; font-size: 14px; }
.cm-modal-foot { margin: 16px 0 0; font-size: 12px; color: var(--fg-3); }
.cm-modal-done { font-size: 15px; color: var(--fg-1); margin: 8px 0 18px; }
@media (max-width: 560px) {
  .cm-modal { padding: 22px 16px 18px; }
  .cm-modal-actions .btn { width: 100%; }
}

/* ─── Site integration (not in the prototype) ─── */
.fm-nav-spacer { height: var(--fm-nav-h, 71px); background: var(--fm-asphalt); }
.fm-pagebody { padding-top: var(--fm-s4); padding-bottom: var(--fm-s6); }
.fm-page .skip { position: absolute; left: -9999px; }
.fm-page .skip:focus { left: 16px; top: 16px; z-index: 300; background: var(--fm-yellow); color: var(--fm-asphalt); padding: 8px 16px; border-radius: 4px; }
.fm-vh-btn { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fm-sortform { display: inline-flex; align-items: center; gap: 8px; }
.fm-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fm-emptyst .fm-acts { margin-top: 14px; }
.fm-status { max-width: 640px; }
.fm-status .fm-ptitle { font-size: 24px; }
.fm-status .fm-sub { display: inline-block; font-size: 13px; font-weight: 600; color: var(--fm-asphalt); text-decoration: underline; text-underline-offset: 3px; }
.fm-fpager-top { margin: 0 0 10px; }
.fm-truncated { margin: 12px 0 0; font-size: 13px; color: var(--fm-body-gray); }
.fm-tag.fm-t-live { color: var(--fm-blue); }
.fm-page .fm-tlist a.fm-tag, .fm-page .fm-tag { text-decoration: none; }
.fm-lp.fm-none b { font-weight: 700; color: var(--fm-asphalt); }
.fm-page #footer { margin-top: var(--fm-s7); }
.fm-page .footer { margin-top: 0; }
@media (max-width: 720px) {
  .fm-sortform { width: 100%; }
  .fm-sortform select { flex: 1; min-height: 44px; }
  .fm-status .fm-acts .fm-btn { flex: 1 1 100%; }
}

/* ─── Phone tap targets: 44 px on every control the thumb reaches (spec 4.7, 4.11) ─── */
@media (max-width: 720px) {
  .fm-fchip { height: 44px; }
  .fm-fchip.fm-input input { height: 40px; }
  .fm-report, .fm-perma, .fm-jumpto, .fm-afoot a { min-height: 44px; display: inline-flex; align-items: center; }
  .fm-claim-btn { min-height: 44px; }
  .fm-tips-pop summary, .fm-more, .fm-sub { min-height: 44px; display: inline-flex; align-items: center; }
  .fm-reads li a { min-height: 44px; display: flex; align-items: center; }
  .fm-wn li, .fm-node { min-height: 44px; }
  .fm-lockchip { min-height: 44px; }
  .fm-fname { min-height: 44px; }
  .fm-search-btn, .fm-fbar .fm-btn-y, .fm-pager a, .fm-pager span, .fm-sortform select, .fm-sbig input, .fm-sbig .fm-btn, .fm-btn { min-height: 44px; }
}

/* ─── One slim forum bar under the site nav (feedback item 3, 2026-10-11) ─── */
.fm-fbar .fm-wrap { height: 56px; display: flex; align-items: center; gap: var(--fm-s4); }
.fm-fbar .fm-search { flex: 1 1 auto; max-width: 560px; position: relative; display: flex; align-items: center; }
.fm-fbar .fm-search > svg { position: absolute; left: 11px; pointer-events: none; color: var(--fm-meta); }
/* The Search button has a fixed width so the "?" can sit a fixed distance
   to its left whatever the font renders at (2026-10-12: at 73px wide it
   covered 7px of the "?", which was pinned at 70px). Button 76px + 4px
   inset + 8px gap = 88px; the input's right padding clears both. */
.fm-fbar .fm-search input { width: 100%; height: 40px; padding: 0 118px 0 34px; font-size: 14px; }
.fm-fbar .fm-search .fm-sgo { right: 4px; top: 4px; bottom: 4px; width: 76px; padding: 0; }
.fm-tips-q { position: absolute; right: 88px; top: 50%; transform: translateY(-50%); font-size: 13px; }
.fm-tips-q summary { list-style: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--fm-border-strong); background: var(--fm-panel); color: var(--fm-meta); display: grid; place-items: center; font-size: 12px; font-weight: 700; cursor: pointer; }
.fm-tips-q summary::-webkit-details-marker { display: none; }
.fm-tips-q summary:hover, .fm-tips-q[open] summary { color: var(--fm-strong); border-color: var(--fm-meta); }
.fm-tips-q .fm-pop { position: absolute; z-index: 30; top: calc(100% + 12px); right: -88px; width: 340px; background: var(--fm-panel); border: 1px solid var(--fm-border); border-radius: var(--fm-r-panel); box-shadow: 0 8px 24px rgba(43, 43, 43, .12); padding: 12px 14px; text-align: left; }
.fm-tips-q .fm-pop p { margin: 0 0 8px; color: var(--fm-meta); }
.fm-tips-q dl { margin: 0; display: grid; gap: 4px; }
.fm-tips-q dl div { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: baseline; }
.fm-tips-q dd { margin: 0; color: var(--fm-meta); }
.fm-start-short { display: none; }
.fm-fbar .fm-start { margin-left: auto; min-height: 40px; white-space: nowrap; }
.fm-pagebody-home { padding-top: var(--fm-s4); }
/* Plain breadcrumb line on inner pages (no box, no Jump to) */
.fm-crumbs ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--fm-meta); }
.fm-crumbs li { display: flex; align-items: center; min-width: 0; }
.fm-crumbs li + li::before { content: "\203A"; margin-right: 8px; color: var(--fm-muted); }
.fm-crumbs a { color: var(--fm-text); text-decoration: none; }
.fm-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fm-crumbs [aria-current] { font-weight: 700; color: var(--fm-strong); }
@media (max-width: 720px) {
  .fm-fbar .fm-wrap { height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  .fm-fbar .fm-search { max-width: none; }
  .fm-start-long { display: none; }
  .fm-start-short { display: inline; }
  .fm-fbar .fm-search input { height: 44px; font-size: 16px; }
  .fm-fbar .fm-start { min-height: 44px; padding: 0 12px; font-size: 13px; }
  /* Phones: anchor the tips popup to the search box, not to the "?", so it
     starts at the box's left edge and never runs off the screen. The "?"
     itself keeps its place beside the Search button. */
  .fm-fbar .fm-tips-q { position: static; transform: none; }
  .fm-fbar .fm-tips-q summary { position: absolute; right: 88px; top: 50%; transform: translateY(-50%); }
  .fm-fbar .fm-tips-q .fm-pop { left: 0; right: auto; top: calc(100% + 8px); width: min(340px, calc(100vw - 32px)); }
  .fm-crumbs li[aria-current] { white-space: normal; }
}

/* ─── Two-colour chrome (feedback item 2): neutrals plus Marking Yellow; blue only inside post bodies ─── */
.fm-page .fm-wn a, .fm-page .fm-ttl, .fm-page .fm-lp .fm-t a, .fm-page .fm-reads a, .fm-page .fm-jumpto, .fm-page .fm-fname { color: var(--fm-strong); }
.fm-page .fm-lp .fm-t a:hover, .fm-page .fm-reads a:hover, .fm-page .fm-wn a:hover, .fm-page .fm-ttl:hover { text-decoration: underline; text-underline-offset: 3px; }
.fm-page .fm-jumpto { text-decoration: underline; text-underline-offset: 2px; }
.fm-page .fm-quote .fm-qh a { color: var(--fm-strong); }
.fm-page .fm-tag, .fm-page .fm-tag.fm-t-live { color: var(--fm-meta); }
.fm-page .fm-tag::before { background: var(--fm-muted); }
.fm-page .fm-subnav.fm-light { --fm-subnav-link: var(--fm-strong); }
.fm-page .fm-body a { color: var(--fm-link); }