/* ============================================================================
   Build / Assembly Guide (INTERNAL) page — component styles.
   Layout modeled on the Figma /build/<id> guide: a main content column of white
   shadow cards + a sticky right-hand "Quick Navigation" table of contents.
   Linked ALONGSIDE ft-wiki.css (shared header/footer/nav, tokens, theme
   neutralization, Wiki.js chrome removal). All rules scoped under .ft-wiki with
   ft- prefixed classes. Link colors carry !important because ft-wiki.css forces
   `.ft-wiki a { color: inherit !important }`.
   ========================================================================== */

/* Two-column layout: main + sticky right TOC */
.ft-wiki .ft-build { max-width: 88rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; display: flex; gap: 2rem; align-items: flex-start; }
.ft-wiki .ft-build-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.ft-wiki .ft-build-main [id] { scroll-margin-top: 5.5rem; }

/* Back link + header */
.ft-wiki .ft-build-back { display: inline-flex; align-items: center; gap: .5rem; color: #2563eb !important; font-weight: 500; font-size: .9rem; }
.ft-wiki .ft-build-back:hover { color: #1d4ed8 !important; }
.ft-wiki .ft-build-back svg { width: 1rem; height: 1rem; }
.ft-wiki .ft-build-head { display: flex; flex-direction: column; gap: .4rem; }
.ft-wiki .ft-build-badge { align-self: flex-start; display: inline-block; padding: .25rem .75rem; background: #fee2e2; color: #b91c1c; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 999px; }
.ft-wiki .ft-build-title { font-size: 1.875rem; font-weight: 800; line-height: 1.15; }
.ft-wiki .ft-build-sub { color: #475569; font-size: 1.05rem; }

/* Bold centered ESD banner (Figma: bg-red-50 border-2 border-red-500) */
.ft-wiki .ft-esd { background: #fef2f2; border: 2px solid #ef4444; border-radius: 10px; padding: 1rem; text-align: center; color: #b91c1c; font-weight: 700; }

/* Inline info note */
.ft-wiki .ft-note { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: .875rem 1rem; color: #1e3a8a; font-size: .9rem; }
.ft-wiki .ft-note a { color: #2563eb !important; font-weight: 600; }

/* Section cards */
.ft-wiki .ft-bcard { background: #fff; border-radius: 14px; box-shadow: 0 10px 25px -5px rgba(0,0,0,.08), 0 4px 10px -6px rgba(0,0,0,.06); border: 1px solid #eef2f7; padding: 2rem; }
.ft-wiki .ft-bcard h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .65rem; }
.ft-wiki .ft-bcard h2 .ft-num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: #2563eb; color: #fff; border-radius: 999px; font-size: .95rem; font-weight: 700; flex-shrink: 0; }
.ft-wiki .ft-bcard h3 { font-size: 1rem; font-weight: 700; margin: 1.4rem 0 .7rem; color: #1e293b; }

/* Warning callout (Figma: red-50 / red-200, "Warning" label) */
.ft-wiki .ft-warn { display: flex; gap: .75rem; align-items: flex-start; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: .85rem 1rem; color: #7f1d1d; font-weight: 600; margin: 1rem 0; }
.ft-wiki .ft-warn-icon { flex-shrink: 0; font-size: 1.05rem; line-height: 1.4; }

/* Tables (BOM, tools, wiring) */
.ft-wiki .ft-tbl-wrap { overflow-x: auto; }
.ft-wiki .ft-tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ft-wiki .ft-tbl th { background: #1e293b; color: #fff; text-align: left; padding: .6rem .75rem; font-weight: 600; white-space: nowrap; }
.ft-wiki .ft-tbl td { padding: .55rem .75rem; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.ft-wiki .ft-tbl tr:nth-child(even) td { background: #f8fafc; }
.ft-wiki .ft-tbl .ft-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; white-space: nowrap; }
.ft-wiki .ft-tbl .ft-loc { display: inline-block; background: #e2e8f0; color: #334155; border-radius: 4px; padding: .05rem .4rem; font-size: .75rem; font-weight: 600; }
.ft-wiki .ft-tbl .ft-qty { font-weight: 700; text-align: center; white-space: nowrap; }

/* Step lists — Figma numbered circles */
.ft-wiki .ft-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 1rem; }
.ft-wiki .ft-steps > li { counter-increment: step; position: relative; padding-left: 3rem; min-height: 2rem; line-height: 1.6; color: #334155; }
.ft-wiki .ft-steps > li::before { content: counter(step); position: absolute; left: 0; top: -.1rem; width: 2rem; height: 2rem; background: #2563eb; color: #fff; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; }
.ft-wiki .ft-steps ul { list-style: disc; margin: .5rem 0 0 1.1rem; color: #475569; font-size: .9rem; display: flex; flex-direction: column; gap: .35rem; }
.ft-wiki .ft-steps a { color: #2563eb !important; font-weight: 500; }
.ft-wiki .ft-step-warn { display: block; margin-top: .45rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: .45rem .65rem; font-size: .82rem; color: #78350f; font-weight: 600; }

/* Tools grid */
.ft-wiki .ft-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.ft-wiki .ft-tool { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: .75rem .95rem; font-size: .875rem; }
.ft-wiki .ft-tool .ft-tool-name { font-weight: 600; color: #1e293b; }
.ft-wiki .ft-tool .ft-loc { display: inline-block; background: #e2e8f0; color: #334155; border-radius: 4px; padding: .1rem .45rem; font-size: .75rem; font-weight: 600; white-space: nowrap; }

/* Image placeholder */
.ft-wiki .ft-imgph { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 6px; padding: .55rem .75rem; font-size: .8rem; color: #64748b; font-style: italic; }

/* Figure galleries (real images pulled from the source doc as assets).
   Sized larger for readability; click any image to enlarge (ft-build.js
   opens the full-resolution asset in the lightbox overlay below). */
.ft-wiki .ft-figs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; }
.ft-wiki .ft-fig { flex: 0 1 auto; }
.ft-wiki .ft-fig img { display: block; max-width: 100%; max-height: 320px; width: auto; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; object-fit: contain; cursor: zoom-in; }
.ft-wiki .ft-fig-wide img { max-height: 460px; }
/* Material/tool thumbnail cell */
.ft-wiki .ft-tbl .ft-thumb { width: 100px; }
.ft-wiki .ft-tbl .ft-thumb img { width: 88px; height: 88px; object-fit: contain; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; cursor: zoom-in; }
.ft-wiki .ft-tool-img { width: 60px; height: 60px; object-fit: contain; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; flex-shrink: 0; cursor: zoom-in; }
.ft-wiki .ft-tool { align-items: center; }

/* Click-to-enlarge lightbox overlay. ft-build.js appends .ft-lightbox to
   <body> (outside .ft-wiki), so these rules are intentionally unscoped; the
   stylesheet only loads on build pages, so they never leak elsewhere. */
.ft-lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.9); align-items: center; justify-content: center; padding: 2.5rem; cursor: zoom-out; }
.ft-lightbox.ft-lb-open { display: flex; }
.ft-lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 48px rgba(0,0,0,.5); background: #fff; }
.ft-lb-close { position: fixed; top: 1rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.ft-lb-close:hover { background: rgba(255,255,255,.32); }
.ft-wiki .ft-tool .ft-tool-name { flex: 1; }

/* Checklist */
.ft-wiki .ft-checklist { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.ft-wiki .ft-checklist li { position: relative; padding-left: 1.7rem; color: #334155; line-height: 1.5; }
.ft-wiki .ft-checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #16a34a; font-weight: 800; }

/* === Right-hand Table of Contents (sticky) === */
.ft-wiki .ft-toc { width: 18rem; flex-shrink: 0; }
/* position: fixed (not sticky) keeps the TOC frozen to the viewport's right the
   whole way down — it never scrolls away, even past the end of the content.
   left/right are auto, so it keeps its static horizontal position inside the
   reserved .ft-toc column. max-height + overflow lets a long TOC scroll itself. */
.ft-wiki .ft-toc-inner { position: fixed; top: 5rem; width: 18rem; max-height: calc(100vh - 6rem); overflow-y: auto; z-index: 40; background: #fff; border-radius: 14px; box-shadow: 0 10px 25px -5px rgba(0,0,0,.08), 0 4px 10px -6px rgba(0,0,0,.06); border: 1px solid #eef2f7; padding: 1.5rem; }
.ft-wiki .ft-toc-inner h3 { font-weight: 700; color: #0f172a; margin-bottom: 1rem; font-size: 1rem; }
.ft-wiki .ft-toc-search { margin-bottom: 1rem; }
.ft-wiki .ft-toc-search input { width: 100%; padding: .5rem .75rem; font-size: .8rem; border: 1px solid #cbd5e1; border-radius: 8px; outline: none; }
.ft-wiki .ft-toc-search input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px #bfdbfe; }
.ft-wiki .ft-toc nav { display: flex; flex-direction: column; gap: .25rem; }
.ft-wiki .ft-toc-link { display: flex; align-items: center; gap: .55rem; font-size: .82rem; color: #475569 !important; padding: .5rem .75rem; border-radius: 8px; line-height: 1.3; }
.ft-wiki .ft-toc-link:hover { background: #eff6ff; color: #2563eb !important; }
.ft-wiki .ft-toc-num { flex-shrink: 0; width: 1.4rem; height: 1.4rem; background: #eef2f7; color: #475569; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; }

/* Responsive */
@media (max-width: 900px) {
  .ft-wiki .ft-toc { display: none; }
}
@media (max-width: 640px) {
  .ft-wiki .ft-bcard { padding: 1.25rem; }
  .ft-wiki .ft-tools { grid-template-columns: 1fr; }
}

/* === Additions for the FT-200 build guide === */

/* Overview stats (Time / Difficulty) */
.ft-wiki .ft-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.25rem 0 .5rem; }
.ft-wiki .ft-stat { display: flex; align-items: center; gap: .75rem; }
.ft-wiki .ft-stat-ico { width: 3rem; height: 3rem; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
.ft-wiki .ft-stat-ico.blue { background: #dbeafe; }
.ft-wiki .ft-stat-ico.orange { background: #ffedd5; }
.ft-wiki .ft-stat-ico.green { background: #dcfce7; }
.ft-wiki .ft-stat-label { font-size: .8rem; color: #64748b; }
.ft-wiki .ft-stat-val { font-weight: 700; }
.ft-wiki .ft-build-editnote { font-size: .82rem; color: #94a3b8; font-style: italic; margin-top: .35rem; }

/* ESD video card */
.ft-wiki .ft-esd-card { background: #fef2f2; border: 2px solid #ef4444; border-radius: 14px; padding: 1.75rem; }
.ft-wiki .ft-esd-card h2 { color: #7f1d1d; margin-bottom: .5rem; }
.ft-wiki .ft-esd-card .ft-esd-sub { color: #b91c1c; font-weight: 700; margin-bottom: 1rem; }
.ft-wiki .ft-video { aspect-ratio: 16/9; background: #000; border-radius: 10px; overflow: hidden; }
.ft-wiki .ft-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Callouts: tips / warnings (multi-item) */
.ft-wiki .ft-callout { border-radius: 8px; padding: .85rem 1rem; margin-top: 1rem; font-size: .88rem; }
.ft-wiki .ft-callout h4 { font-size: .82rem; font-weight: 700; margin-bottom: .45rem; text-transform: uppercase; letter-spacing: .02em; }
.ft-wiki .ft-callout ul { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .3rem; }
.ft-wiki .ft-callout.tips { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.ft-wiki .ft-callout.warn { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* Related builds */
.ft-wiki .ft-related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ft-wiki .ft-related a { display: flex; flex-direction: column; gap: .25rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 1rem; }
.ft-wiki .ft-related a:hover { border-color: #4ade80; }
.ft-wiki .ft-rel-name { font-weight: 700; color: #14532d !important; }
.ft-wiki .ft-rel-desc { font-size: .82rem; color: #15803d !important; }

@media (max-width: 640px) {
  .ft-wiki .ft-stats { grid-template-columns: 1fr; }
  .ft-wiki .ft-related { grid-template-columns: 1fr; }
}

/* === Interactive layer (added by the injected /build JS module: /ft-build.js) ===
   Without the JS these rules are inert (progress bar at 0%, no buttons/notes).
   With it: each step gets a "Mark Complete" button that fills the progress bar
   (and shows a completion banner at 100%) plus a "Notes & Comments" section
   (add/list/delete notes, saved per-browser via localStorage). */

/* Progress bar */
.ft-wiki .ft-progress { margin-top: 1.25rem; }
.ft-wiki .ft-prog-track { height: .6rem; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.ft-wiki .ft-prog-fill { height: 100%; width: 0; background: #16a34a; border-radius: 999px; transition: width .3s ease; }
.ft-wiki .ft-prog-text { margin-top: .5rem; font-size: .85rem; font-weight: 600; color: #16a34a; }

/* === Sticky overview header (STANDARD BUILD-GUIDE TEMPLATE) ===
   The whole build-guide summary — badge, title, caption, Time/Difficulty/Steps
   stats, and the progress bar — stays LOCKED below the site header while
   scrolling. Every /build page uses .ft-overview as its first card. Kept compact
   (smaller title/stats) so the pinned header doesn't dominate the viewport. */
.ft-wiki .ft-overview { position: sticky; top: 4rem; z-index: 30; margin-top: .25rem; margin-bottom: .75rem; background: #fff; border: 1px solid #eef2f7; border-radius: 14px; box-shadow: 0 6px 16px -4px rgba(0,0,0,.14); padding: 1.1rem 1.5rem 1.75rem; transition: padding .2s ease; }
/* progress footer: text on the left, "Clear all" on the right */
.ft-wiki .ft-prog-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .5rem; }
.ft-wiki .ft-prog-foot .ft-prog-text { margin-top: 0; }
.ft-wiki .ft-prog-clear { flex-shrink: 0; background: none; border: 1px solid #cbd5e1; color: #64748b; font: inherit; font-size: .78rem; font-weight: 600; padding: .3rem .75rem; border-radius: 6px; cursor: pointer; }
.ft-wiki .ft-prog-clear:hover { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }
.ft-wiki .ft-overview .ft-build-badge { margin-bottom: .4rem; }
.ft-wiki .ft-overview .ft-build-title { font-size: 1.4rem; margin: 0 0 .2rem; line-height: 1.2; }
.ft-wiki .ft-overview .ft-build-sub { font-size: .9rem; margin: 0; }
.ft-wiki .ft-overview .ft-stats { margin: .85rem 0 .75rem; gap: .75rem; }
.ft-wiki .ft-overview .ft-stat-ico { width: 2.4rem; height: 2.4rem; font-size: 1.05rem; }
.ft-wiki .ft-overview .ft-progress { margin-top: 0; }

/* === Condensed sticky overview (scrolled state) ===
   The expanded card runs about 13rem tall. Pinned under the 4rem site header
   that left roughly 17rem of a short laptop viewport spent on a header that
   does not change, which is most of the room a 900px-tall screen has for the
   walkthrough itself.

   Once the card sticks, /ft-build.js adds .ft-ov-cond and the card drops to a
   single slim row: badge, caption and the Time/Difficulty/Steps stats fold
   away, the title shrinks to one truncated line, and the progress track goes
   from .6rem to .25rem. Measured on the FT-RD guide: 13.1rem expanded,
   4.2rem condensed, so roughly 9rem of viewport comes back.

   Notes for anyone editing this:

   (a) The collapse is driven by a class, not by scroll position in CSS. There
       is no shipping selector for "a sticky element is currently stuck", and
       scroll-driven animations are not supported widely enough to be the only
       path. Without JS no class is ever added and the card stays exactly as it
       is today.
   (d) Scoped to /build/ pages. These rules are inert everywhere else because
       nothing adds .ft-ov-cond there: /install/ never loads the script, and
       /programming/ and /3d/ load it but are gated out in initStickyCondense.
       That is why only the 29 /build/ pages needed a cache-buster bump.
   (b) Hidden rows collapse with max-height/opacity rather than display:none so
       the transition has something to animate. The max-height values only need
       to exceed the natural height; they are not layout measurements.
   (c) The title keeps its own line rather than sharing a row with the progress
       text. Sharing the row saves about .9rem more but truncates the title
       hard on narrow screens, which is where the space matters most. */
/* The expanded card carries NO max-height or overflow, deliberately. An earlier
   revision capped these three rows so max-height had two numbers to animate
   between, but the cap is live at the top of the page too, where the card is
   supposed to be untouched. Measured: the longest caption in build/ (the 4CH
   one) needs 108px once the card is down to a ~310px content width, against a
   96px cap, so overflow:hidden silently ate its last line on a phone.
   Only the condensed state constrains anything, so nothing can clip while the
   card is expanded regardless of how long a caption gets or how narrow the
   screen is. The cost is that max-height has no start value to animate from,
   so these rows snap rather than slide; opacity still crossfades, and the card
   padding, title and track still animate, so the box itself resizes smoothly. */
.ft-wiki .ft-overview .ft-build-badge,
.ft-wiki .ft-overview .ft-build-sub,
.ft-wiki .ft-overview .ft-stats { transition: max-height .22s ease, opacity .16s ease, margin .22s ease; opacity: 1; }

/* The bottom padding is deliberately larger than the top. The card is sticky, so
   the walkthrough scrolls directly beneath its bottom edge; at the original
   .7rem the step count sat 12px off that edge and the rows underneath ran
   straight into it. 1.25rem gives 21px of clear space so the progress row reads
   as part of the bar rather than as the first line of the content below. Costs
   8px of the height the collapse reclaims (122px to 130px, measured on
   wikistaging build/ft-rd). */
.ft-wiki .ft-overview.ft-ov-cond { padding: .6rem 1.5rem 1.25rem; }
.ft-wiki .ft-overview.ft-ov-cond .ft-build-badge,
.ft-wiki .ft-overview.ft-ov-cond .ft-build-sub,
.ft-wiki .ft-overview.ft-ov-cond .ft-stats { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; }
.ft-wiki .ft-overview.ft-ov-cond .ft-build-title { font-size: .95rem; margin: 0 0 .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-wiki .ft-overview.ft-ov-cond .ft-prog-track { height: .25rem; }
.ft-wiki .ft-overview.ft-ov-cond .ft-prog-foot { margin-top: .35rem; }
.ft-wiki .ft-overview.ft-ov-cond .ft-prog-text { font-size: .76rem; }
.ft-wiki .ft-overview.ft-ov-cond .ft-prog-clear { font-size: .7rem; padding: .18rem .55rem; }

/* The title and track animate too, so the whole card resizes as one movement
   instead of the text snapping while the box eases. */
.ft-wiki .ft-overview .ft-build-title { transition: font-size .2s ease, margin .2s ease; }
.ft-wiki .ft-overview .ft-prog-track { transition: height .2s ease; }

/* The sentinel /ft-build.js inserts above the card to detect the stuck state.
   It has to satisfy two things at once, and the obvious fixes each break one:

     - It must not move the page. .ft-build-main is a column flex container with
       `gap: 1.5rem`, so an in-flow sentinel is a flex item and the container
       adds a full 24px gap around it. Height alone is not the problem; a plain
       `margin-bottom: -1px` cancels the 1px and leaves the 24px, which pushed
       the card and its stick threshold down 24px on every build page.
     - It must sit exactly where the card starts, because that offset is the
       collapse trigger. `position: absolute` removes it from flex flow and so
       adds no gap, but an absolutely positioned child of a flex container
       resolves its static position to the container's content-box corner, not
       to its in-flow slot. Measured here: sentinel at 96px, card at 146px, so
       the card would collapse 50px before it actually sticks.

   So the sentinel stays in flow and /ft-build.js cancels height plus the
   container's real `row-gap`, read from computed style rather than hardcoded,
   so this keeps working if the gap is ever retuned. */
.ft-wiki .ft-ov-sentinel { height: 1px; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .ft-wiki .ft-overview,
  .ft-wiki .ft-overview .ft-build-badge,
  .ft-wiki .ft-overview .ft-build-sub,
  .ft-wiki .ft-overview .ft-stats,
  .ft-wiki .ft-overview .ft-build-title,
  .ft-wiki .ft-overview .ft-prog-track { transition: none; }
}

/* Completed step tint */
.ft-wiki .ft-bcard.ft-done { border-color: #bbf7d0; background: #f0fdf4; }

/* Mark Complete button — injected at the BOTTOM-RIGHT of the step, in its own
   row just above the Notes & Comments divider. */
.ft-wiki .ft-mark-row { display: flex; justify-content: flex-end; margin-top: 1.5rem; }
.ft-wiki .ft-mark { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 8px; font-size: .82rem; font-weight: 600; border: 1px solid #cbd5e1; background: #fff; color: #334155; cursor: pointer; font-family: inherit; }
.ft-wiki .ft-mark:hover { background: #f8fafc; }
.ft-wiki .ft-mark .ft-mark-ico { font-size: .9rem; line-height: 1; }
.ft-wiki .ft-mark.ft-mark-done { background: #16a34a; border-color: #16a34a; color: #fff; }
.ft-wiki .ft-mark.ft-mark-done:hover { background: #15803d; }

/* Notes & Comments (injected under each step) */
.ft-wiki .ft-nc { margin-top: 1.5rem; border-top: 1px solid #e2e8f0; padding-top: 1.25rem; }
.ft-wiki .ft-nc-title { font-size: .95rem; font-weight: 700; color: #1e293b; margin-bottom: .85rem; }
.ft-wiki .ft-nc-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .85rem; }
.ft-wiki .ft-nc-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: .7rem .85rem; }
.ft-wiki .ft-nc-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; }
.ft-wiki .ft-nc-author { font-size: .75rem; font-weight: 600; color: #475569; }
.ft-wiki .ft-nc-side { display: inline-flex; align-items: center; gap: .6rem; }
.ft-wiki .ft-nc-time { font-size: .72rem; color: #94a3b8; }
.ft-wiki .ft-nc-del { border: none; background: none; color: #cbd5e1; cursor: pointer; font-size: .8rem; line-height: 1; padding: 0; }
.ft-wiki .ft-nc-del:hover { color: #ef4444; }
.ft-wiki .ft-nc-text { font-size: .88rem; color: #334155; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.ft-wiki .ft-nc-row { display: flex; gap: .5rem; }
.ft-wiki .ft-nc-input { flex: 1; min-width: 0; padding: .55rem .75rem; font: inherit; font-size: .85rem; border: 1px solid #cbd5e1; border-radius: 8px; outline: none; }
.ft-wiki .ft-nc-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px #bfdbfe; }
.ft-wiki .ft-nc-add { flex-shrink: 0; padding: .55rem 1.1rem; background: #2563eb; color: #fff; border: none; border-radius: 8px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.ft-wiki .ft-nc-add:hover { background: #1d4ed8; }

/* Build Complete banner */
.ft-wiki .ft-complete-banner { background: #f0fdf4; border: 2px solid #16a34a; border-radius: 14px; padding: 2rem; text-align: center; }
.ft-wiki .ft-complete-ico { width: 3.5rem; height: 3.5rem; margin: 0 auto .75rem; background: #16a34a; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; font-weight: 700; }
.ft-wiki .ft-complete-banner h2 { font-size: 1.4rem; font-weight: 800; color: #14532d; margin-bottom: .35rem; }
.ft-wiki .ft-complete-banner p { color: #15803d; }

/* Stacked prose paragraphs inside a content card. The global
   `.ft-wiki p { margin: 0 !important }` reset in ft-wiki.css collapses
   consecutive <p> into one solid block, so re-assert a gap with matching
   !important.
   Scoped to .ft-bcard-prose, NOT every .ft-bcard, on purpose: ?v=11 and
   ?v=12 are the same asset and the query is only a cache-buster, so an
   unscoped rule would also reflow build/ft-200 and build/driver-id-puck
   (the two existing pages with stacked <p> in a card) as soon as their
   cache evicted. Opting those in is a separate, reviewable change. */
.ft-wiki .ft-bcard-prose p + p { margin-top: .75rem !important; }