/* ============================================================================
   custom_theme.css — P-003 R6 darkmode plumbing, shared by every page that
   loads it: the exported pages link it via the template.
   P-003 R13 CORRECTION (2026-11-10, owner directive "the css of the button
   has not to be in the index either"): through R12 the jsMind mindmap root
   page (site index.html) ALSO linked this file from the served css/ folder —
   that link is removed; the mindmap takes the color-scheme signal and the
   FAB styles from its own kristall_style.css now (R13 block, byte-identical
   values at that file's end). This file keeps serving the export pages.
   P-003 R15 (2026-11-10): the owner had the split reviewed by a QA model
   ("Die Knopf-Styles liegen jetzt an zwei Orten — kristall_style.css
   (Hauptseite) und custom_theme.css (Exportseiten)") and accepts it as the
   standing architecture "if it is properly documented" — this is that
   documentation. The block from the color-scheme marker below to this
   file's end is the TWIN of the R13 block at the end of the MindMap's
   css/kristall_style.css: same selectors, same declarations, same order
   (only the comments differ). THE SYNC RULE IS BINDING: a FAB or
   color-scheme change lands in BOTH files in the same turn — one edit
   without the other is a defect. The twin is machine-checked value-identical
   by scripts/p003_r15_fab_sync_probe.py.

   What lives here: the color-scheme signal and the theme FAB. The DARK
   PALETTES live in the page stylesheets as append-only dark blocks —
   exports: custom_base.css + custom_pygments.css; mindmap:
   kristall_style.css.

   State model (owner directive, P-003 R3b/R4b standing): three states —
   auto (default; the page follows prefers-color-scheme via the media
   queries, works without JavaScript), dark and light (manual overrides,
   <html data-theme="dark|light"> set by js/custom_theme.js, persisted per
   origin in localStorage so one choice serves the whole site).

   The FAB reflects the STATE, not the resolved palette: its colors and
   icons key off the data-theme attribute only, so in auto the button
   shows the green "A" even while a dark-system preference renders the
   page dark. Cycle order (owner spec): auto -> dark -> light -> auto.

   FAB states (owner spec):
     auto  green      #2E7D32, white "A"
     dark  dark blue  #1E3A5F, light moon
     light yellow     #F5C518, dark sun
   ========================================================================== */

/* --- color-scheme follows the theme (form controls, scrollbars, frames) --- */
html { color-scheme: light; }
/* P-003 R7: the explicit light choice survives UA force-dark engines
   (Android Chrome "auto dark theme", Samsung Internet web dark mode):
   they UA-darken light pages at PAINT time — computed styles stay light,
   the pixels turn dark — and a plain root "light" does NOT opt out
   (verified on the bundled Chromium force-dark machinery: light state
   painted ~30/255 luminance without this rule, 245/255 with it; the
   meta color-scheme opt-out is useless here because author css overrides
   the meta's root default). The documented page opt-out is the ROOT
   computing "only light" — exactly this rule. Auto/dark stay untouched:
   a page already painting our dark palette is a no-op for the transform,
   so the footnote glow keeps its turquoise everywhere. */
html[data-theme="light"] { color-scheme: only light; }
html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { color-scheme: dark; }
}

/* --- the FAB: fixed lower right; 48px circle like the mindmap's help FAB
   (#mm_help_fab, bottom left) so the two corners read as a pair --- */
#custom_theme_fab {
    position: fixed; right: 16px; bottom: 16px; z-index: 9999;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background-color: #2E7D32; color: #FFFFFF;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px; font-weight: bold; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 0; cursor: pointer;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
}
#custom_theme_fab .ctf-i { display: none; line-height: 1; }
#custom_theme_fab .ctf-i svg { display: block; }
/* P-003 R9: the icons are CHROME, not content — a page-level svg rule must
   not reach into the button. Owner report (2026-11-10, on a --brat export):
   "with --brat on the export the fab symbols fail" — custom_brat.css's
   plain `svg` frame (width calc(100% - 12px), height 1px, 1px solid
   #7fa2ff, margin-left 12px; deliberate and KEPT for the site's content
   svgs) also matched the baked 22x22 moon/sun icons on every page that
   links it (--brat exports and the Jupyter-UI copies): both icons
   collapsed to the frame's 1px sliver, while the auto "A" (text) was
   unaffected. This rule pins the icons to their markup geometry:
   (1,0,1) outranks the frame's (0,0,1) `svg` selectors regardless of
   link order, and it is inert wherever custom_brat.css is not linked. */
#custom_theme_fab svg {
    width: 22px;
    height: 22px;
    border: none;
    margin: 0;
}
/* default (auto): the "A" — correct icon from first paint, no JS needed */
#custom_theme_fab .ctf-auto { display: block; }
html[data-theme="dark"] #custom_theme_fab {
    background-color: #1E3A5F; color: #E8E8E8;
    border-color: rgba(255, 255, 255, 0.35);
}
html[data-theme="dark"] #custom_theme_fab .ctf-auto { display: none; }
html[data-theme="dark"] #custom_theme_fab .ctf-dark { display: block; }
html[data-theme="light"] #custom_theme_fab {
    background-color: #F5C518; color: #1A1A1A;
    border-color: rgba(0, 0, 0, 0.25);
}
html[data-theme="light"] #custom_theme_fab .ctf-auto { display: none; }
html[data-theme="light"] #custom_theme_fab .ctf-light { display: block; }

/* print: the control is chrome, not content — hidden. The palette is the
   reader's choice and is deliberately NOT forced to light for print. */
@media print {
    #custom_theme_fab { display: none !important; }
}
