/* ===================================================================
   17-dark-fixes.css  --  dark-mode counterparts for hardcoded light colours

   GENERATED 2026-07-27 from an audit of every css/*.css rule that hardcodes a colour instead of
   using a theme token. Those rules keep their LIGHT value when the theme flips, which is why dark
   mode looked uneven: some sections stayed pale and some text went nearly invisible.

   Light mode is deliberately UNTOUCHED. The original values are correct there -- a white hover on a
   pale panel is right -- so rather than rewrite them and change a theme the owner did not ask about,
   each selector gets a dark-mode counterpart here mapping it onto the existing dark tokens.

   Mapping: near-white background -> --bg2 (the dark panel surface); pale tinted background -> --bg1;
   dark text -> --txt. Original alpha is preserved via color-mix so layering and depth survive.

   This whole file can be deleted to revert the change in one step.
=================================================================== */

/* ── from 03-header.css ── */
body.dark-mode #btn-prefs-header:hover { background: color-mix(in srgb, var(--bg2) 70%, transparent); }   /* was a light background (lum 1.00, alpha 0.7) with no dark counterpart */
body.dark-mode .hdr-pill-btn.active { background: color-mix(in srgb, var(--bg2) 85%, transparent); }   /* was a light background (lum 1.00, alpha 0.85) with no dark counterpart */
body.dark-mode .hdr-pill-btn:hover { background: color-mix(in srgb, var(--bg2) 85%, transparent); }   /* was a light background (lum 1.00, alpha 0.85) with no dark counterpart */
body.dark-mode .hdr-pill-dev:hover { color: var(--txt); }   /* was dark text (lum 0.28) that vanishes on a dark panel */
body.dark-mode .proj-tab { background: color-mix(in srgb, var(--bg1) 60%, transparent); }   /* was a light background (lum 0.93, alpha 0.6) with no dark counterpart */
body.dark-mode .proj-tab.active { background: color-mix(in srgb, var(--bg2) 95%, transparent); }   /* was a light background (lum 1.00, alpha 0.95) with no dark counterpart */
body.dark-mode .proj-tab:hover { background: color-mix(in srgb, var(--bg2) 85%, transparent); }   /* was a light background (lum 1.00, alpha 0.85) with no dark counterpart */

/* ── from 04-vocab-panel.css ── */
body.dark-mode #add-form { background: color-mix(in srgb, var(--bg1) 48%, transparent); }   /* was a light background (lum 0.83, alpha 0.48) with no dark counterpart */
body.dark-mode #cat-filter-btn { background: color-mix(in srgb, var(--bg2) 60%, transparent); }   /* was a light background (lum 1.00, alpha 0.6) with no dark counterpart */
body.dark-mode #cat-filter-btn:hover { background: color-mix(in srgb, var(--bg2) 90%, transparent); }   /* was a light background (lum 1.00, alpha 0.9) with no dark counterpart */
body.dark-mode #cat-filter-dropdown { background: color-mix(in srgb, var(--bg2) 98%, transparent); }   /* was a light background (lum 0.97, alpha 0.98) with no dark counterpart */
body.dark-mode .cat-filter-chip.cat-filter-chip-excl { color: var(--txt); }   /* was dark text (lum 0.25) that vanishes on a dark panel */
body.dark-mode .cfd-btn-excl-on { color: var(--txt); }   /* was dark text (lum 0.23) that vanishes on a dark panel */
body.dark-mode .cfd-btn-excl:hover { color: var(--txt); }   /* was dark text (lum 0.26) that vanishes on a dark panel */
body.dark-mode .cfd-row:hover { background: color-mix(in srgb, var(--bg2) 60%, transparent); }   /* was a light background (lum 1.00, alpha 0.6) with no dark counterpart */
body.dark-mode .entry-card { background: color-mix(in srgb, var(--bg2) 52%, transparent); }   /* was a light background (lum 1.00, alpha 0.52) with no dark counterpart */
body.dark-mode .entry-card.pinned { background: color-mix(in srgb, var(--bg2) 55%, transparent); }   /* was a light background (lum 0.97, alpha 0.55) with no dark counterpart */
body.dark-mode .entry-card.pinned.selected { background: color-mix(in srgb, var(--bg2) 72%, transparent); }   /* was a light background (lum 0.97, alpha 0.72) with no dark counterpart */
body.dark-mode .field input, body.dark-mode .field textarea { background: color-mix(in srgb, var(--bg2) 65%, transparent); }   /* was a light background (lum 1.00, alpha 0.65) with no dark counterpart */
body.dark-mode .scc-count-badge.has-exclude:not(.has-include) { color: var(--txt); }   /* was dark text (lum 0.25) that vanishes on a dark panel */
body.dark-mode .scc-dropdown { background: color-mix(in srgb, var(--bg2) 98%, transparent); }   /* was a light background (lum 0.97, alpha 0.98) with no dark counterpart */
body.dark-mode .scc-item.is-exclude { color: var(--txt); }   /* was dark text (lum 0.25) that vanishes on a dark panel */
body.dark-mode .scc-item.is-exclude:hover { color: var(--txt); }   /* was dark text (lum 0.20) that vanishes on a dark panel */
body.dark-mode .scc-item.is-include:hover { color: var(--txt); }   /* was dark text (lum 0.27) that vanishes on a dark panel */
body.dark-mode .scc-section-head.is-excluded { color: var(--txt); }   /* was dark text (lum 0.28) that vanishes on a dark panel */
body.dark-mode .search-row input { background: color-mix(in srgb, var(--bg2) 60%, transparent); }   /* was a light background (lum 1.00, alpha 0.6) with no dark counterpart */
body.dark-mode .search-row input, body.dark-mode .search-row select { background: color-mix(in srgb, var(--bg2) 65%, transparent); }   /* was a light background (lum 1.00, alpha 0.65) with no dark counterpart */
body.dark-mode .search-row input:focus { background: color-mix(in srgb, var(--bg2) 85%, transparent); }   /* was a light background (lum 1.00, alpha 0.85) with no dark counterpart */

/* ── from 06-merge-insert.css ── */
/* OPAQUE FOR REAL (owner 2026-08-06: "the tooltip should NOT have any transparency on its div").
   The 2026-08-02 pass meant this and its comment said "fully opaque", but it assigned var(--bg2),
   which is rgba(...,0.70) in the dark theme and rgba(...,0.78) in the alternate one. So the box was
   never opaque, and Wordbank rows showed straight through it -- visible in his screenshot. Named
   colours here rather than a token, because every --bg* token in this project carries alpha by design
   and any of them would quietly reintroduce the bug. */
body.dark-mode #word-def-tooltip {
  background: rgb(38, 34, 30);
  border-color: rgb(92, 86, 78);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.dark-mode .btn { background: color-mix(in srgb, var(--bg2) 62%, transparent); }   /* was a light background (lum 1.00, alpha 0.62) with no dark counterpart */
body.dark-mode .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--bg2) 85%, transparent); }   /* was a light background (lum 1.00, alpha 0.85) with no dark counterpart */
body.dark-mode .cell-char.hover-lit { color: var(--txt); }   /* was dark text (lum 0.23) that vanishes on a dark panel */
body.dark-mode .comp-char.comp-hover-lit { color: var(--txt); }   /* was dark text (lum 0.23) that vanishes on a dark panel */
/* body.dark-mode .mu-entry override removed 2026-09-29: Must Use rows are .suggest-item rows now. */   /* was a light background (lum 1.00, alpha 0.52) with no dark counterpart */
body.dark-mode .num-input { background: color-mix(in srgb, var(--bg2) 65%, transparent); }   /* was a light background (lum 1.00, alpha 0.65) with no dark counterpart */
body.dark-mode .suggest-item { background: color-mix(in srgb, var(--bg2) 45%, transparent); }   /* was a light background (lum 1.00, alpha 0.45) with no dark counterpart */
body.dark-mode .suggest-item.wb-entry.pinned { background: color-mix(in srgb, var(--bg2) 55%, transparent); }   /* was a light background (lum 0.97, alpha 0.55) with no dark counterpart */
body.dark-mode .suggest-item.wb-entry.pinned.selected { background: color-mix(in srgb, var(--bg2) 72%, transparent); }   /* was a light background (lum 0.97, alpha 0.72) with no dark counterpart */
/* Wordbank row hover (owner 2026-09-27: "a slight highlight on-hover ... to communicate these are interactable").
   The old bg2 45%->75% shift was near-invisible and body.dark-mode .suggest-item reset the border to --line,
   cancelling the light-mode blue hover border. Accent-tinted surface + accent border, same in both modes. */
body.dark-mode .suggest-item:hover { background: color-mix(in srgb, var(--blue) 12%, var(--bg2)); border-color: color-mix(in srgb, var(--blue) 50%, transparent); }
body.dark-mode .text-input { background: color-mix(in srgb, var(--bg2) 65%, transparent); }   /* was a light background (lum 1.00, alpha 0.65) with no dark counterpart */
body.dark-mode .word-def-box { background: var(--bg2); }   /* W5 (owner 2026-08-02): fully opaque in dark mode too */

/* ── from 07-banks.css ── */
body.dark-mode #bulk-textarea { background: color-mix(in srgb, var(--bg2) 65%, transparent); }   /* was a light background (lum 1.00, alpha 0.65) with no dark counterpart */
body.dark-mode .astra-item { background: color-mix(in srgb, var(--bg2) 52%, transparent); }   /* was a light background (lum 1.00, alpha 0.52) with no dark counterpart */
body.dark-mode .edit-row input, body.dark-mode .edit-row textarea { background: color-mix(in srgb, var(--bg2) 65%, transparent); }   /* was a light background (lum 1.00, alpha 0.65) with no dark counterpart */
body.dark-mode .import-preview { background: color-mix(in srgb, var(--bg1) 45%, transparent); }   /* was a light background (lum 0.93, alpha 0.45) with no dark counterpart */
body.dark-mode .ph-item { background: color-mix(in srgb, var(--bg2) 45%, transparent); }   /* was a light background (lum 1.00, alpha 0.45) with no dark counterpart */

/* ── from 08-composition.css ── */
body.dark-mode #comp-toggle-stub { background: color-mix(in srgb, var(--bg1) 60%, transparent); }   /* was a light background (lum 0.83, alpha 0.6) with no dark counterpart */
body.dark-mode .comp-export-btn:hover { background: color-mix(in srgb, var(--bg2) 70%, transparent); }   /* was a light background (lum 1.00, alpha 0.7) with no dark counterpart */

/* ── from 09-segments.css ── */
body.dark-mode .seg-box.active { background: color-mix(in srgb, var(--bg2) 92%, transparent); }   /* was a light background (lum 0.98, alpha 0.92) with no dark counterpart */
body.dark-mode .seg-box.pending-delete { background: color-mix(in srgb, var(--bg1) 85%, transparent); }   /* was a light background (lum 0.92, alpha 0.85) with no dark counterpart */
body.dark-mode .seg-box.seg-branch { background: color-mix(in srgb, var(--bg2) 60%, transparent); }   /* was a light background (lum 0.98, alpha 0.6) with no dark counterpart */
body.dark-mode .seg-box:hover { background: color-mix(in srgb, var(--bg2) 72%, transparent); }   /* was a light background (lum 0.96, alpha 0.72) with no dark counterpart */
body.dark-mode .seg-drag-ghost { background: color-mix(in srgb, var(--bg2) 92%, transparent); }   /* was a light background (lum 0.98, alpha 0.92) with no dark counterpart */

/* ── from 12-video-bg.css ── */
body.dark-mode html { background: var(--bg1); }   /* was a light background (lum 0.91, alpha 1.0) with no dark counterpart */

/* ── from 13-ctx-gami.css ── */
body.dark-mode #admin-notif-badge { background: var(--bg2); }   /* was a light background (lum 1.00, alpha 1.0) with no dark counterpart */
body.dark-mode #cat-browse { background: color-mix(in srgb, var(--bg2) 50%, transparent); }   /* was a light background (lum 1.00, alpha 0.5) with no dark counterpart */
body.dark-mode #cat-input-wrap { background: color-mix(in srgb, var(--bg2) 70%, transparent); }   /* was a light background (lum 1.00, alpha 0.7) with no dark counterpart */
body.dark-mode #cat-sublist { background: color-mix(in srgb, var(--bg2) 92%, transparent); }   /* was a light background (lum 1.00, alpha 0.92) with no dark counterpart */
body.dark-mode #forge-start-btn { background: var(--bg2); }   /* was a light background (lum 1.00, alpha 1.0) with no dark counterpart */
body.dark-mode #gami-panel { background: color-mix(in srgb, var(--bg2) 97%, transparent); }   /* was a light background (lum 1.00, alpha 0.97) with no dark counterpart */
body.dark-mode #guest-email-gate { background: color-mix(in srgb, var(--bg1) 88%, transparent); }   /* was a light background (lum 0.93, alpha 0.88) with no dark counterpart */
body.dark-mode #guest-email-input { background: color-mix(in srgb, var(--bg2) 85%, transparent); }   /* was a light background (lum 1.00, alpha 0.85) with no dark counterpart */
body.dark-mode #guest-timer { background: color-mix(in srgb, var(--bg2) 95%, transparent); }   /* was a light background (lum 0.97, alpha 0.95) with no dark counterpart */
body.dark-mode #mirror-overlay { color: var(--txt); }   /* was dark text (lum 0.11) that vanishes on a dark panel */
body.dark-mode #prefs-panel { background: var(--bg); }   /* owner 2026-09-20: opaque */
body.dark-mode #reddit-panel { background: color-mix(in srgb, var(--bg2) 98%, transparent); }   /* was a light background (lum 0.97, alpha 0.98) with no dark counterpart */
body.dark-mode #wm-panel { background: color-mix(in srgb, var(--bg2) 97%, transparent); }   /* was a light background (lum 0.97, alpha 0.97) with no dark counterpart */
body.dark-mode #wm-sidebar { background: color-mix(in srgb, var(--bg1) 50%, transparent); }   /* was a light background (lum 0.93, alpha 0.5) with no dark counterpart */
body.dark-mode .add-form-cell { background: color-mix(in srgb, var(--bg2) 70%, transparent); }   /* was a light background (lum 1.00, alpha 0.7) with no dark counterpart */
body.dark-mode .bm-entry:hover { background: color-mix(in srgb, var(--bg2) 50%, transparent); }   /* was a light background (lum 1.00, alpha 0.5) with no dark counterpart */
body.dark-mode .cat-browse { background: color-mix(in srgb, var(--bg2) 50%, transparent); }   /* was a light background (lum 1.00, alpha 0.5) with no dark counterpart */
body.dark-mode .cat-input-wrap { background: color-mix(in srgb, var(--bg2) 70%, transparent); }   /* was a light background (lum 1.00, alpha 0.7) with no dark counterpart */
body.dark-mode .cat-sublist { background: color-mix(in srgb, var(--bg2) 97%, transparent); }   /* was a light background (lum 1.00, alpha 0.97) with no dark counterpart */
body.dark-mode .ctx-item:hover { background: color-mix(in srgb, var(--bg2) 55%, transparent); }   /* was a light background (lum 1.00, alpha 0.55) with no dark counterpart */
body.dark-mode .forge-cw-dropdown { background: var(--bg2); }   /* was a light background (lum 1.00, alpha 1.0) with no dark counterpart */
body.dark-mode .fp-contrib-hover-label { color: var(--txt); }   /* was dark text (lum 0.10) that vanishes on a dark panel */
body.dark-mode .reddit-input-row input { background: color-mix(in srgb, var(--bg2) 80%, transparent); }   /* was a light background (lum 1.00, alpha 0.8) with no dark counterpart */
body.dark-mode .reddit-post-item { background: color-mix(in srgb, var(--bg2) 60%, transparent); }   /* was a light background (lum 1.00, alpha 0.6) with no dark counterpart */
body.dark-mode .reddit-post-item:hover { background: color-mix(in srgb, var(--bg2) 90%, transparent); }   /* was a light background (lum 1.00, alpha 0.9) with no dark counterpart */
body.dark-mode .seg-box.seg-drop-over { background: color-mix(in srgb, var(--bg1) 50%, transparent); }   /* was a light background (lum 0.88, alpha 0.5) with no dark counterpart */
body.dark-mode .seg-label-sticker { background: color-mix(in srgb, var(--bg2) 82%, transparent); }   /* was a light background (lum 0.95, alpha 0.82) with no dark counterpart */
body.dark-mode .seg-label-sticker-hidden { background: color-mix(in srgb, var(--bg2) 82%, transparent); }   /* was a light background (lum 0.95, alpha 0.82) with no dark counterpart */
body.dark-mode .seg-save-btn { background: color-mix(in srgb, var(--bg2) 55%, transparent); }   /* was a light background (lum 1.00, alpha 0.55) with no dark counterpart */
body.dark-mode .seg-save-btn:hover { background: color-mix(in srgb, var(--bg2) 90%, transparent); }   /* was a light background (lum 1.00, alpha 0.9) with no dark counterpart */
body.dark-mode .tb-btn { background: color-mix(in srgb, var(--bg2) 55%, transparent); }   /* was a light background (lum 1.00, alpha 0.55) with no dark counterpart */
body.dark-mode .tb-btn-icon { background: color-mix(in srgb, var(--bg2) 45%, transparent); }   /* was a light background (lum 1.00, alpha 0.45) with no dark counterpart */
body.dark-mode .tb-btn-icon:hover { background: color-mix(in srgb, var(--bg2) 80%, transparent); }   /* was a light background (lum 1.00, alpha 0.8) with no dark counterpart */
body.dark-mode .tb-btn:hover { background: color-mix(in srgb, var(--bg2) 82%, transparent); }   /* was a light background (lum 1.00, alpha 0.82) with no dark counterpart */
body.dark-mode .wm-act-btn { background: color-mix(in srgb, var(--bg2) 80%, transparent); }   /* was a light background (lum 1.00, alpha 0.8) with no dark counterpart */
body.dark-mode .wm-act-btn:hover { background: var(--bg1); }   /* was a light background (lum 0.93, alpha 1.0) with no dark counterpart */
body.dark-mode .wm-cat-child.active { background: color-mix(in srgb, var(--bg2) 85%, transparent); }   /* was a light background (lum 1.00, alpha 0.85) with no dark counterpart */
body.dark-mode .wm-cat-child:hover { background: color-mix(in srgb, var(--bg2) 50%, transparent); }   /* was a light background (lum 1.00, alpha 0.5) with no dark counterpart */
body.dark-mode .wm-cat-parent.active { background: color-mix(in srgb, var(--bg2) 85%, transparent); }   /* was a light background (lum 1.00, alpha 0.85) with no dark counterpart */
body.dark-mode .wm-cat-parent:hover { background: color-mix(in srgb, var(--bg2) 60%, transparent); }   /* was a light background (lum 1.00, alpha 0.6) with no dark counterpart */
body.dark-mode .wm-entry:hover { background: color-mix(in srgb, var(--bg2) 60%, transparent); }   /* was a light background (lum 1.00, alpha 0.6) with no dark counterpart */
body.dark-mode .wm-tab.active { background: color-mix(in srgb, var(--bg2) 85%, transparent); }   /* was a light background (lum 1.00, alpha 0.85) with no dark counterpart */
body.dark-mode .wm-word-chip { background: color-mix(in srgb, var(--bg1) 70%, transparent); }   /* was a light background (lum 0.93, alpha 0.7) with no dark counterpart */

/* ── from 14-feed.css ── */
body.dark-mode #auth-email-input, body.dark-mode #auth-handle-input { background: color-mix(in srgb, var(--bg2) 60%, transparent); }   /* was a light background (lum 1.00, alpha 0.6) with no dark counterpart */
body.dark-mode #btn-feed-header:hover { background: color-mix(in srgb, var(--bg2) 60%, transparent); }   /* was a light background (lum 1.00, alpha 0.6) with no dark counterpart */
body.dark-mode #feed-compose-bar:hover { background: color-mix(in srgb, var(--bg2) 72%, transparent); }   /* was a light background (lum 1.00, alpha 0.72) with no dark counterpart */
body.dark-mode #feed-rx-picker { background: var(--bg2); }   /* fully opaque (owner 2026-09-25: emoji panel must not be see-through) */
body.dark-mode #pp-banner-edit-btn { color: var(--txt); }   /* was dark text (lum 0.00) that vanishes on a dark panel */
body.dark-mode .fc-cell:focus { background: color-mix(in srgb, var(--bg2) 55%, transparent); }   /* was a light background (lum 1.00, alpha 0.55) with no dark counterpart */
/* Owner 2026-09-25: social PalSegment cells match the dark studio segment (.seg-box.active, L88) -> opaque bg2. */
body.dark-mode .fc-cell.pal-seg,
body.dark-mode .fc-cell.pal-seg:focus { background: var(--bg2); border-color: rgba(53,116,196,0.70); }
body.dark-mode .feed-post.potd { background: color-mix(in srgb, var(--bg2) 72%, transparent); }   /* was a light background (lum 0.97, alpha 0.72) with no dark counterpart */
body.dark-mode .feed-time-chip.active { background: var(--bg2); }   /* was a light background (lum 1.00, alpha 1.0) with no dark counterpart */
body.dark-mode .fp-image-hidden:hover { background: color-mix(in srgb, var(--bg2) 45%, transparent); }   /* was a light background (lum 1.00, alpha 0.45) with no dark counterpart */
body.dark-mode .fp-reply-item { background: color-mix(in srgb, var(--bg2) 75%, transparent); }   /* was a light background (lum 0.98, alpha 0.75) with no dark counterpart */
body.dark-mode .fp-rx-hbtn-count { background: color-mix(in srgb, var(--bg2) 92%, transparent); }   /* was a light background (lum 1.00, alpha 0.92) with no dark counterpart */
body.dark-mode .fp-rx-hbtn:hover { background: color-mix(in srgb, var(--bg2) 55%, transparent); }   /* was a light background (lum 1.00, alpha 0.55) with no dark counterpart */
body.dark-mode .fp-thread-connector { background: color-mix(in srgb, var(--bg1) 55%, transparent); }   /* was a light background (lum 0.85, alpha 0.55) with no dark counterpart */
body.dark-mode .fpm-input { background: color-mix(in srgb, var(--bg2) 55%, transparent); }   /* was a light background (lum 1.00, alpha 0.55) with no dark counterpart */
body.dark-mode .fpm-pal-cell { background: color-mix(in srgb, var(--bg2) 55%, transparent); }   /* was a light background (lum 1.00, alpha 0.55) with no dark counterpart */
body.dark-mode .kbd-row kbd { background: color-mix(in srgb, var(--bg2) 85%, transparent); }   /* was a light background (lum 1.00, alpha 0.85) with no dark counterpart */
body.dark-mode .notif-avatar { background: var(--bg2); }   /* was a light background (lum 1.00, alpha 1.0) with no dark counterpart */
body.dark-mode .notif-box { background: var(--glass-bg); }   /* owner 2026-09-20: opaque; 2026-10-05: Wordbank surface */
/* Nibs Bin in the segment footer: neutral dark surface instead of the light rgba (owner 2026-09-20). */
body.dark-mode #tb-trash { background: rgba(255,255,255,0.06); border-color: var(--line); color: var(--dim); }
body.dark-mode .pricing-card-badge { background: var(--bg2); }   /* was a light background (lum 1.00, alpha 1.0) with no dark counterpart */
body.dark-mode .pricing-cta { background: color-mix(in srgb, var(--bg2) 60%, transparent); }   /* was a light background (lum 1.00, alpha 0.6) with no dark counterpart */
body.dark-mode .pricing-cta-featured { background: var(--bg2); }   /* was a light background (lum 1.00, alpha 1.0) with no dark counterpart */
body.dark-mode .pricing-cta:hover { background: color-mix(in srgb, var(--bg2) 90%, transparent); }   /* was a light background (lum 1.00, alpha 0.9) with no dark counterpart */
body.dark-mode .rx-picker-item:hover { background: color-mix(in srgb, var(--bg2) 55%, transparent); }   /* was a light background (lum 1.00, alpha 0.55) with no dark counterpart */

/* ── from 15-arts.css ── */
body.dark-mode #arts-panel { background: var(--bg2); }   /* was a light background (lum 0.95, alpha 1.0) with no dark counterpart */

/* ── from 16-post-card.css ── */
body.dark-mode #feed-scroll .fp-action-btn:hover { background: color-mix(in srgb, var(--bg2) 90%, transparent); }   /* was a light background (lum 1.00, alpha 0.9) with no dark counterpart */
body.dark-mode #feed-scroll .fp-options-btn:hover { background: color-mix(in srgb, var(--bg2) 90%, transparent); }   /* was a light background (lum 1.00, alpha 0.9) with no dark counterpart */
body.dark-mode #feed-scroll .fp-reaction:hover { background: var(--bg2); }   /* was a light background (lum 1.00, alpha 1.0) with no dark counterpart */


/* ===================================================================
   MID-ALPHA BASE SURFACES  (Hadrian 2026-07-27)

   Reported: "the section of the studio where the palindromes live has a different color than the top
   Composition Box when we're in dark mode: it's much brighter than the rest of the page."

   Cause: #palindrome-display paints rgba(240,237,233,0.35), a LIGHT wash, and had no dark counterpart. The
   Composition Box next to it uses var(--glass-bg), which adapts. So one panel followed the theme and its
   neighbour did not.

   Why the first sweep missed it: that sweep used an alpha floor of 0.45 and treated anything below as a
   subtle wash that reads fine on a dark panel. True for a small chip, false for a whole section: a light
   wash at 0.35 across a large surface visibly lifts it. 35 rules sit in the skipped 0.20-0.45 band.

   Only BASE SURFACES are corrected here. Rules in that band whose selector is a :hover state are left alone
   on purpose: a white wash on hover is the CORRECT dark-mode treatment, since hovering should lighten. The
   feed's surfaces are also left alone, being a different screen and several already handled above.

   Each value keeps the original ALPHA and swaps the light base for the dark theme's own base, so the
   intended layering and depth survive and only the direction of the wash flips. */
/* #palindrome-display is DEAD: no such element exists (only collab-palindrome-display, a different
   overlay). Its source rule at css/06-merge-insert.css:39 is dead too and can be deleted. No
   override is emitted for it, because a rule that matches nothing is not a fix. */
/* THE REPORTED ONE. #segments-list is where the palindrome segments live. It painted
   rgba(235,232,228,0.28), a light wash, over a #segs-panel that is already var(--glass-bg) dark, so
   the section read far brighter than the Composition Box sitting right above it. Both #comp-panel
   and #segs-panel use var(--glass-bg), so going transparent here makes the two surfaces identical,
   which is what "different color than the top Composition Box" asks for. Light mode keeps its wash. */
body.dark-mode #segments-list             { background: transparent; }
body.dark-mode #wordbank-footer           { background: rgba(28, 26, 24, 0.35); }   /* was rgba(...,0.35) light */
body.dark-mode #bulk-drawer               { background: rgba(28, 26, 24, 0.40); }   /* was rgba(...,0.40) light */
body.dark-mode .io-bar                    { background: rgba(28, 26, 24, 0.40); }   /* was rgba(...,0.40) light */

/* Compact post cards: neutral surfaces in dark mode too (owner 2026-09-20: de-golded). */
body.dark-mode #feed-scroll {
  --fp-surface: rgba(36,33,30,.92);
  --fp-quote: rgba(255,255,255,.05);
  --fp-hover: rgba(106,171,232,.12);
  --fp-quiet: var(--dim);
}
body.dark-mode #feed-scroll :is(.rap-battle-card,.lob-card) { background: var(--fp-surface); }
body.dark-mode #feed-scroll :is(.fp-action-btn,.fp-options-btn,.fp-reaction):hover {
  background: var(--fp-hover); color: var(--amber);
}
body.dark-mode .bulk-hint code            { background: rgba(52, 48, 44, 0.30); }   /* inline code chip: lift slightly off the panel */
body.dark-mode ::-webkit-scrollbar-track  { background: rgba(28, 26, 24, 0.30); }   /* track was a light grey */

/* Word Manager search + admin button: id-specificity white background had no dark counterpart, so
   the search box was white with near-white text in dark mode (CSS audit 2026-09-22). */
 body.dark-mode #wm-search, body.dark-mode #wm-search:focus { background: color-mix(in srgb, var(--bg2) 75%, transparent); }
body.dark-mode #wm-admin-btn { background: color-mix(in srgb, var(--bg2) 60%, transparent); }