/* ############################################################################
   mrartin.all.css  --  CONSOLIDATED stylesheet (Mr Z "one place" rule).
   Built 2026-06-27 by opus-4.8.  HIGH-RISK consolidation of the 6 real
   stylesheets into ONE file.  Originals are KEPT on disk for rollback.

   SOURCES, in cascade order (later wins on conflicts -- intended):
     (a) MERGED :root token blocks   (from mrartin.css + elder.css + site_nav.css)
     (b) mrartin.css     base/reset + components
     (c) elder_global.css  then  elder.css   (elder section themes)
     (d) mrai_chrome.css   (shared chrome)
     (e) site_nav.css      (left-rail nav)
     (f) elder_force_dark.css  LAST  (the force-dark !important override wins)

   :root MERGE NOTE -- name collisions between mrartin.css and elder_force_dark.css
   (--base-size, --radius, --bg, --card-bg, --fg, --link-fg, --good, --warn,
   --error).  Per the merge rule the consolidated :root in section (a) keeps the
   mrartin.css values.  elder_force_dark.css's OWN :root blocks are intentionally
   LEFT VERBATIM in section (f) (they use !important and must still win last, so
   force-dark elder pages look exactly as before).  Do NOT "dedupe" them up.
   ############################################################################ */


/* ===== SECTION (a): MERGED :root TOKENS (mrartin.css + elder.css + site_nav.css) =====
   These are the non-force-dark token blocks, merged into ONE :root.
   For names that ALSO appear in elder_force_dark.css, the mrartin.css value is
   kept here; force-dark re-declares (with !important) in section (f) and wins. */
:root {
    /* ---- from mrartin.css (the MATHEMATICAL palette axes + derived) ---- */
    /* AXIS A: hue.  Per audience override below in section (b). */
    --hue:                 258;          /* default = purple-navy */
    --saturation:          35%;          /* how saturated the colors are */

    /* AXIS B: lightness.  These four numbers control contrast.
       Keep (fg-lightness - bg-lightness) >= 70 for guaranteed contrast. */
    --bg-lightness:        16%;          /* page bg.  Low = dark. */
    --card-bg-lightness:   16%;          /* card bg = same as page; cards use border to stand out. */
    --fg-lightness:        92%;          /* body text.  High = light. */
    --link-fg-lightness:   84%;          /* accent.  Slightly less than fg. */

    /* AXIS C: typography. */
    --base-size:           16px;         /* NOTE: elder_force_dark.css re-declares 16px too (section f). */
    --font-family:         system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --line-height:         1.55;

    /* AXIS D: shapes. */
    --radius:              8px;          /* NOTE: elder_force_dark.css re-declares --radius:14px (section f, wins). */
    --tap-target:          44px;

    /* DERIVED COLORS -- one formula per role.  Edit the axes above, not these. */
    --bg:        hsl(var(--hue), var(--saturation), var(--bg-lightness));        /* NOTE: force-dark overrides (section f). */
    --card-bg:   hsl(var(--hue), var(--saturation), var(--card-bg-lightness));   /* NOTE: force-dark overrides (section f). */
    --fg:        hsl(var(--hue), 10%, var(--fg-lightness));                       /* NOTE: force-dark overrides (section f). */
    --link-fg:   hsl(var(--hue), 60%, var(--link-fg-lightness));                  /* NOTE: force-dark overrides (section f). */

    /* Status borders (semantic; same bg as everything, only border changes). */
    --good:      hsl(120, 50%, 55%);     /* NOTE: identical value re-declared in force-dark. */
    --warn:      hsl(40,  85%, 60%);     /* NOTE: identical value re-declared in force-dark. */
    --error:     hsl(340, 70%, 65%);     /* NOTE: identical value re-declared in force-dark. */

    /* ---- from elder.css (the --elder-* tokens; no name collision) ---- */
    --elder-base-size:   18px;

    /* 2026-06-15 ORCHESTRATOR DIRECT EDIT (lightened elder palette). */
    --elder-bg:          #14224a;   /* dark NAVY BLUE page (owner 2026-06-26: bg blue, cards purple) */
    --elder-fg:          #ede5ff;   /* light lavender body text */
    --elder-heading:     #fff3a8;   /* soft yellow heading */
    --elder-subhead:     #ffd2dc;   /* light pink sub-head */

    --elder-panel:       #1f1248;   /* slightly deeper purple chrome */
    --elder-panel-fg:    #ede5ff;

    --elder-card-bg:     #4a3580;   /* LIGHTER purple card -- visibly pops */
    --elder-card-fg:     #ffffff;   /* white text inside the lighter card */
    --elder-card-border: #9678d5;   /* LIGHT LAVENDER border -- visible */

    --elder-input-bg:    #3a2570;   /* medium purple input bg */
    --elder-border:      #9678d5;   /* light lavender border */

    --elder-link-dark:   #fff3a8;   /* yellow link on dark page bg */
    --elder-link-card:   #ffd2dc;   /* light-pink link inside dark cards */

    /* RULE 35 + 37 buttons: dark bg + light pastel text, cross-family. */
    --elder-btn-bg:      #1a1340;   /* deep purple */
    --elder-btn-fg:      #fff3a8;   /* soft yellow text */
    --elder-btn-bd:      #fff3a8;
    --elder-btn2-bg:     #0a1b3e;   /* navy */
    --elder-btn2-fg:     #ffd2dc;   /* light pink text */
    --elder-btn2-bd:     #ffd2dc;
    --elder-focus:       #fff3a8;

    --elder-accent:      #1a1340;   /* logo dot bg (dark) */
    --elder-accent-fg:   #fff3a8;   /* logo glyph (yellow) */

    --elder-panic-bg:    #c0140f;   /* big red (RULE 10), white text */
    --elder-panic-fg:    #ffffff;

    --elder-muted:       #9fb0d8;   /* muted light text on dark cards */
    --elder-muted-dark:  #9fc4ff;   /* muted light text on dark chrome */

    /* ---- from site_nav.css ---- */
    --site-rail-w: 260px;

    /* ===== CONSOLIDATION TOKENS (added by Color Coordinator 2026-06-28) =====
       Each token VALUE is the EXACT off-palette hex it replaces. Flat (defined
       once here) so it resolves identically in every scope incl. high-contrast.
       PURE CONSOLIDATION -- zero visual change. */
    --muted:             #9aa4b2;
    --muted-2:           #cfd6e0;
    --baby-blue:         #cfe4ff;
    --muted-blue:        #9fc4ff;
    --panel-2:           #0f1730;
    --slate-2:           #2a3142;
    --btn-deep:          #1a1340;
    --lime:              #90ee90;
    --blue-mid:          #1f63b8;
    --slate-3:           #2a3550;
    --slate-4:           #2a3a55;
    --mint:              #5fd28a;
    --indigo-2:          #241a55;
    --slate-5:           #374151;
    --amber-soft:        #f6c452;
    --blue-deep:         #0a4a8f;
    --purple-2:          #3a2f6e;
    --muted-3:           #aab8c8;
    --muted-4:           #cdd5e0;
    --rose-soft:         #ffd7d7;
    --maroon-2:          #7c2d2d;
    --maroon-3:          #5a2020;
    --ink-2:             #0a0d12;
    --navy-2:            #1a2545;
    --ink-3:             #1a2030;
    --ink-4:             #0a1224;
    --navy-3:            #1a3357;
    --red-deep:          #a32020;
    --rose-2:            #ff9aa4;
    --ink-5:             #06090f;
    --ink-6:             #0e1320;
    --mint-2:            #46d68e;
    --green-deep:        #1e3a1e;
    --violet-2:          #b083ff;
    --green-mid:         #2a7d2a;
    --lilac-2:           #a89cd6;
    --muted-5:           #cbd5e1;
    --purple-3:          #3a1f6e;
    --green-3:           #14803a;
    --green-pale:        #cdebc1;
    --amber-pale:        #fde68a;
    --mint-pale:         #b8e6c8;
    --red-2:             #ef6a6a;
    --pink-2:            #e25a8f;
    --navy-4:            #112a55;
    --bronze:            #cd853f;
    --indigo-3:          #322a55;
    --green-pale-2:      #dff4d8;
    --purple-4:          #2d1a5e;
    --peach:             #ffd1a8;
    --rose-pale:         #fecaca;
    --navy-5:            #0a1b3e;
    --navy-6:            #152a44;
    --baby-blue-2:       #cfe7ff;
    --purple-5:          #3d3275;
    --purple-card:       #4a3580;
    --blue-bright:       #3b82f6;
    --blue-soft:         #7cb6ff;
    --muted-6:           #9fb0d8;
    --slate-6:           #1e2e3a;
    --cyan-2:            #6dd6ff;
    --slate-7:           #5a6478;
    --ink-7:             #0e0b22;
    --amber-2:           #facc15;
    --ink-8:             #0c1320;
    --pink-3:            #f4a8c4;
    --green-4:           #36c45a;
    --ink-9:             #14102e;
    --silver:            #c0c0c0;
    --purple-6:          #3b3170;
    --slate-8:           #2a4a6a;
    --maroon-4:          #3a1015;
    --plum-2:            #3a2840;
    --rose-3:            #ff7a8a;
    --green-deep-2:      #06310f;
    --amber-3:           #ffd47a;
    --mint-3:            #7bed9f;
    --pink-deep:         #c2185b;
    --lavender-pale:     #f4f1ff;
    --lilac-3:           #d4c4ec;
    --green-5:           #2a6e3f;
    --rose-4:            #ff5a78;
    --cyan-3:            #22d3ee;
    --mint-pale-2:       #bbf7d0;
    --maroon-5:          #7a1010;
    --red-3:             #c4475a;
    --lavender-2:        #e6ecff;
    --violet-3:          #7e60dc;
    --blue-soft-2:       #9ec5ff;
    --grey-1:            #e8e8e8;
    --red-4:             #dc2626;
    --lilac-4:           #b9a3ff;
    --muted-7:           #cbd5e6;
    --ink-10:            #1a1a1a;
    --red-5:             #b3000c;
    --lilac-5:           #b8a8e8;
    --navy-7:            #0a1a2e;
    --ink-11:            #2a2a2a;
    --green-6:           #58c06f;
    --navy-8:            #0a0d3e;
    --maroon-6:          #3a1e1e;
    --slate-9:           #2a3a40;
    --mint-pale-3:       #c5e6d2;
    --blue-2:            #2b6cb0;
    --red-6:             #e07070;
    --grey-2:            #f2f5fa;
    --slate-10:          #6b7a8d;
    /* ===== BATCH 3 CONSOLIDATION TOKENS (Color Coordinator 2026-07-01) =====
       Exact off-palette hexes lifted from true consumption sites (kids ABC +
       animals encyclopedia, admin sqlbrowser, admin dashboard, licensing
       country). Each VALUE is the EXACT hex it replaces -- pure consolidation,
       ZERO visual change. */
    --kids-lilac-soft:   #b7afd6;   /* kids muted lilac */
    --kids-indigo:       #2a2350;   /* kids small-btn / chip bg */
    --kids-ink:          #1a1338;   /* kids on-lilac dark text */
    --kids-row-bg:       #1d1940;   /* kids expand-row bg */
    --kids-lilac-dim:    #9a90c6;   /* kids row sub-text */
    --kids-edge-2:       #564f8c;   /* kids jump-letter border */
    --kids-panel:        #211c44;   /* kids card bg literal */
    --kids-edge:         #322e5e;   /* kids card border */
    --kids-blue:         #a9c7ff;   /* kids summary link */
    --kids-lilac:        #cdbcff;   /* kids jump-letter text */
    --lavender-3:        #e9e3ff;   /* lavender facts / modal text */
    --edge-lilac:        #8b7bd6;   /* lilac control border */
    --ink-navy:          #1a2330;   /* kids fun-fact bg */
    --slate-panel:       #2e2e2e;   /* sqlbrowser panel bg */
    --slate-body:        #222222;   /* sqlbrowser body bg */
    --grey-eee:          #eeeeee;   /* sqlbrowser body text */
    --amber-head:        #ffce6a;   /* sqlbrowser heading gold */
    --grey-ccc:          #cccccc;   /* sqlbrowser crumbs */
    --blue-link:         #9bc1f0;   /* sqlbrowser link blue */
    --slate-td:          #383838;   /* sqlbrowser td border */
    --slate-hover:       #363636;   /* sqlbrowser row hover */
    --amber-btn:         #d4a000;   /* confirm/warn amber */
    --green-flash:       #1f5f1f;   /* sqlbrowser flash-ok bg */
    --green-code:        #7fd07f;   /* sqlbrowser code green */
    --grey-bbb:          #bbbbbb;   /* mid grey text */
    --grey-aaa:          #aaaaaa;   /* mid grey text 2 */
    --grey-888:          #888888;   /* dim grey text */
    --blue-3:            #6aa3ec;   /* dashboard / licensing link blue */
    --amber-band:        #3a3a28;   /* dashboard aging-band bg */
    --yellow-band:       #fff34a;   /* dashboard aging-band fg */
    --maroon-band:       #3d1a1a;   /* dashboard stale/bootstrap bg */
    --maroon-code:       #2a0d0d;   /* dashboard bootstrap code bg */
    --maroon-alert:      #3a0f0f;   /* dashboard elder-alert bg */
    --indigo-modal:      #1a1733;   /* dashboard Q-modal bg */
    --lilac-modal:       #c8b8ff;   /* dashboard Q-modal title */
    --lavender-pre:      #f3eeff;   /* dashboard Q-modal pre text */
    --amber-warn-2:      #ffffbb;   /* dashboard bootstrap heading (#ffb) */
    --rose-warn:         #ff9090;   /* dashboard bootstrap warn */
    --rose-warn-2:       #ffbbbb;   /* dashboard bootstrap warn 2 (#fbb) */
    --maroon-edge:       #6a2a2a;   /* dashboard bootstrap border */
    --amber-auction:     #f6b400;   /* licensing auction border */
    --red-suspend:       #cc4444;   /* licensing suspended border */
    --grey-999:          #999999;   /* licensing expired border */
    --green-high:        #1a5a1a;   /* licensing high-bid text */
    --lilac-state:       #bcb3d8;   /* licensing state sublabel */
    --blue-hover:        #0c5aae;   /* badge.js help hover bg */
    --navy-input:        #0f223a;   /* badge.js input bg */
    --slate-ph:          #7a8b9c;   /* badge.js placeholder */
    --green-flash-2:     #1e4a1e;   /* badge.js flash-ok bg */
    --green-flash-fg:    #cfe9cf;   /* badge.js flash-ok fg */
    --maroon-flash:      #5a1a1a;   /* badge.js flash-err bg */
    --rose-flash:        #f5c8c8;   /* badge.js flash-err fg */
    --amber-note-bg:     #3a2f1a;   /* badge.js warn-note bg */
    --amber-note-fg:     #e8d8b0;   /* badge.js warn-note fg */

    /* ===== BATCH 4 CONSOLIDATION TOKENS (Color Coordinator 2026-07-01) =====
       Exact hexes lifted from true consumption sites tokenized in batch 4
       (admin/services.php greys; kids/skills + kids/game/sound theme + swatch
       colors). Each token VALUE is the EXACT hex it replaced -- pure
       consolidation, ZERO visual change. */
    --grey-ddd:          #dddddd;   /* services.php bio / verify text */
    --grey-444:          #444444;   /* services.php input border / save-btn bg */
    --kids-ink-2:        #2b2350;   /* kids skills on-key dark text */
    --kids-grad-1:       #241b50;   /* kids skills card gradient start */
    --kids-grad-2:       #1b1640;   /* kids skills card gradient end */
    --kids-ok:           #8be6a8;   /* kids sound-game right-answer border */
    --kids-ok-bg:        #1e3326;   /* kids sound-game right-answer bg */
    --kids-wrong:        #e0a86a;   /* kids sound-game wrong-answer border */
    --kids-key-2:        #ffe7b3;   /* kids skills rainbow key c2 (peach) */
    --kids-key-3:        #d6f0c8;   /* kids skills rainbow key c3 (mint) */
    --kids-key-5:        #e3d4f7;   /* kids skills rainbow key c5 (lilac) */
    --kids-key-7:        #c8eef0;   /* kids skills rainbow key c7 (aqua) */
    --kids-key-8:        #f7d4ea;   /* kids skills rainbow key c8 (pink) */
}


/* ===== SECTION (b): mrartin.css  base/reset + components ===== */
/* (copied verbatim from mrartin.css, except its :root block which is merged into
   section (a) above.) */

/* PER-AUDIENCE HUE OVERRIDES (mrartin.css section 3). */
body.elder-section,
.section-elder       { --hue: 258; --saturation: 35%; }   /* purple-navy */
.section-kids-boys   { --hue: 220; --saturation: 55%; }   /* blue */
.section-kids-girls  { --hue: 320; --saturation: 55%; }   /* pink */
.section-adults      { --hue: 258; --saturation: 35%; }
.section-programmer  { --hue: 200; --saturation: 35%; }   /* cyan */
.section-admin       { --hue: 258; --saturation: 25%; }   /* slightly less saturated for admin */

/* SURFACES (mrartin.css section 4). */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-family);
    font-size: var(--base-size);
    line-height: var(--line-height);
    color-scheme: dark;
}

/* Headings + links: the accent. */
h1, h2, h3, h4, h5, h6 { color: var(--link-fg); margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
a, a:link, a:visited { color: var(--link); }   /* B: cyan links */

/* All container surfaces -- same bg as page, defined by a border. */
.card, .panel, .tile,
.elder-card, .elder-tile,
.emenu-card, .adu-card, .wiz-card, .qr-card,
.profile-card, .empty, .box, .well, .note,
.bubble, .transcript, fieldset {
    background: var(--card-bg);
    color: var(--fg);
    border: 1px solid var(--link-fg);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}
.card h1, .card h2, .card h3,
.panel h2, .panel h3,
.elder-card h1, .elder-card h2, .elder-card h3,
.tile .label, .emenu-card .lbl,
fieldset legend { color: var(--link-fg); }

/* Buttons -- border-defined like cards. */
button, .btn, input[type="submit"], input[type="button"],
.elder-btn, .kids-btn, .buy {
    background: var(--card-bg);
    color: var(--fg);
    border: 2px solid var(--link-fg);
    border-radius: var(--radius);
    padding: .7rem 1.1rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    min-height: var(--tap-target);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Inputs. */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="password"],
input[type="search"], input[type="url"],
select, textarea {
    background: var(--card-bg);
    color: var(--fg);
    border: 2px solid var(--link-fg);
    border-radius: var(--radius);
    padding: .6rem .9rem;
    font: inherit;
    font-size: var(--base-size);
    color-scheme: dark;
    width: 100%;
}
textarea { min-height: 90px; }
input::placeholder, textarea::placeholder { color: var(--fg); opacity: .55; }

/* Flash messages -- same bg as everything, border tells you the type. */
.flash, .alert {
    background: var(--card-bg);
    color: var(--fg);
    border: 2px solid var(--link-fg);
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin-bottom: 1rem;
}
.flash.ok,    .alert-success { border-color: var(--good); }
.flash.error, .alert-danger,
.flash.err                   { border-color: var(--error); }
.flash.warn,  .alert-warning { border-color: var(--warn); }

/* Tables. */
table { width: 100%; border-collapse: collapse; color: var(--fg); }
th, td { padding: .6rem .5rem; border-bottom: 1px solid var(--link-fg); text-align: left; }

/* HOVER == BASE.  Owner-locked: zero visual change. (mrartin.css section 5) */
*:hover, *:focus {
    transform: none !important;
    filter: none !important;
    text-decoration: inherit !important;
}
a:hover, a:focus,
button:hover, button:focus,
.btn:hover, .btn:focus,
.card:hover, .card:focus,
.tile:hover, .tile:focus,
.elder-card:hover, .elder-card:focus,
.elder-tile:hover, .elder-tile:focus,
.elder-btn:hover, .elder-btn:focus,
.emenu-card:hover, .emenu-card:focus,
.buy:hover, .buy:focus {
    background: var(--card-bg) !important;
    color: var(--fg) !important;
    border-color: var(--link-fg) !important;
    text-decoration: none !important;
    outline: none !important;
}

/* PRINT. (mrartin.css section 6) */
@media print {
    html, body { background: #fff; color: #000; }
    .card, .panel, button { border-color: #000; color: #000; background: #fff; }
}


/* ===== SECTION (c1): elder_global.css  (elder section min-22px font theme) ===== */
/* (copied verbatim; this file has no :root block.) */
body.elder-section,
body.elder-section p,
body.elder-section li,
body.elder-section a,
body.elder-section span,
body.elder-section label,
body.elder-section input,
body.elder-section textarea,
body.elder-section select,
body.elder-section button {
    font-size: 22px !important;
    line-height: 1.55;
}

body.elder-section h1 { font-size: 32px !important; line-height: 1.25; }
body.elder-section h2 { font-size: 28px !important; line-height: 1.3;  }
body.elder-section h3 { font-size: 24px !important; line-height: 1.35; }
body.elder-section h4 { font-size: 22px !important; line-height: 1.4;  }

body.elder-section button,
body.elder-section .btn,
body.elder-section input[type=submit],
body.elder-section input[type=button] {
    min-height: 48px;
    padding: 10px 18px;
}

body.elder-section input[type=text],
body.elder-section input[type=email],
body.elder-section input[type=password],
body.elder-section input[type=tel],
body.elder-section input[type=number],
body.elder-section textarea,
body.elder-section select {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 22px !important;
}

body.elder-section a { text-decoration: underline; }

/* Panic button = soft pink, NOT red (RULE 32) */
body.elder-section .panic-btn {
    background: #ffb5c2;
    color: #4a0d18;
    border: 2px solid #6e0f1f;
    font-weight: 700;
    min-width: 110px;
    min-height: 48px;
}
body.elder-section .panic-btn:hover { background: #ff9aae; }

/* RULE 37 (all-dark) elder_global overrides. */
body.elder-section { background: #112a55; color: #cfe4ff; }
body.elder-section .card,
body.elder-section .panel { background: #1a1340; color: #cfe4ff; border-color: #3a2f6e; }
body.elder-section input,
body.elder-section textarea,
body.elder-section select {
    background: #0a0d3e; color: #cfe4ff; border-color: #3a2f6e;
}


/* ===== SECTION (c2): elder.css  (Mr Artin for Elders UX shell) ===== */
/* (copied verbatim, except its :root block --elder-* tokens which are merged
   into section (a).  The per-section mood :root-scoped overrides and the
   .elder-high-contrast :root block below are NOT global :root and stay here.) */

/* Per-section moods (gated so the high-contrast toggle still wins). */
html:not(.elder-high-contrast) body.elder-sect-welcome  { --elder-bg:#2a1f5a; --elder-fg:#cfe4ff; } /* blue-purple + baby blue */
html:not(.elder-high-contrast) body.elder-sect-art      { --elder-bg:#3a1f6e; --elder-fg:#ffd2dc; } /* purple + light pink */
html:not(.elder-high-contrast) body.elder-sect-wellness { --elder-bg:#3a1f6e; --elder-fg:#cdebc1; } /* purple + light green */
html:not(.elder-high-contrast) body.elder-sect-memorial { --elder-bg:#2a1f5a; --elder-fg:#fff3a8; } /* blue-purple + soft yellow */
html:not(.elder-high-contrast) body.elder-sect-faith    { --elder-bg:#0a1b3e; --elder-fg:#ffd2dc; } /* navy + light pink */
html:not(.elder-high-contrast) body.elder-sect-boredom  { --elder-bg:#0e1e4d; --elder-fg:#cfe4ff; } /* midnight + baby blue */

/* RULE 7 high contrast -- still ALL dark (no white card), max contrast. */
html.elder-high-contrast {
    --elder-bg:          #03101f;
    --elder-fg:          #ffffff;
    --elder-heading:     #ffe680;
    --elder-subhead:     #ffd2dc;
    --elder-panel:       #03101f;
    --elder-panel-fg:    #ffffff;
    --elder-card-bg:     #0a0a22;
    --elder-card-fg:     #ffffff;
    --elder-card-border: #ffe680;
    --elder-input-bg:    #000010;
    --elder-border:      #ffe680;
    --elder-link-dark:   #ffe680;
    --elder-link-card:   #ffe680;
    --elder-btn-bg:      #000010;
    --elder-btn-fg:      #ffe680;
    --elder-btn-bd:      #ffe680;
    --elder-btn2-bg:     #000010;
    --elder-btn2-fg:     #ffffff;
    --elder-btn2-bd:     #ffffff;
    --elder-focus:       #ffd400;
    --elder-accent:      #000010;
    --elder-accent-fg:   #ffe680;
    --elder-muted:       #dddddd;
    --elder-muted-dark:  #ffffff;
}

/* BASE */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.elder-shell {
    background: var(--elder-bg);
    color: var(--elder-fg);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: var(--elder-base-size, 18px);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}
body.elder-shell, body.elder-shell * { text-shadow: none !important; }   /* solid text only */

/* Headings: soft yellow (h1/h2), light pink (h3).  Cross-family on dark bg. */
.elder-shell h1, .elder-shell h2 { line-height: 1.25; margin: 0 0 .5em 0; color: var(--elder-heading); }
.elder-shell h3 { line-height: 1.3; margin: 0 0 .5em 0; color: var(--elder-subhead); }

/* Links -- cross-family + underline. */
.elder-shell a { color: var(--elder-link-dark); text-decoration: underline; text-underline-offset: 2px; }
.elder-card a, .elder-bigtext a { color: var(--elder-link-card); }
.elder-shell a:focus-visible { outline: 3px solid var(--elder-focus); outline-offset: 2px; }

/* Form fields: dark navy-black bg + light text (RULE 37). */
.elder-shell input, .elder-shell textarea, .elder-select {
    background: var(--elder-input-bg); color: var(--elder-fg);
    border: 2px solid var(--elder-border); border-radius: 8px;
}
.elder-shell input::placeholder, .elder-shell textarea::placeholder { color: var(--elder-muted); }

/* BUTTONS  (RULE 35 + 37: dark bg + light pastel text) */
.elder-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 56px; min-width: 96px; padding: .55rem .9rem;
    background: var(--elder-btn-bg); color: var(--elder-btn-fg);
    border: 2px solid var(--elder-btn-bd);
    border-radius: 10px; font-family: inherit; font-size: 1.05rem; font-weight: 800;
    text-decoration: none; cursor: pointer; line-height: 1.1; box-sizing: border-box;
}
/* hover == base. */
.elder-btn:hover, .elder-btn:focus  { filter: none; text-decoration: none; outline: none; }
.elder-btn:active { transform: none; }
.elder-btn:focus-visible { outline: 3px solid var(--elder-focus); outline-offset: 3px; }
.elder-btn.secondary {
    background: var(--elder-btn2-bg); color: var(--elder-btn2-fg);
    border: 2px solid var(--elder-btn2-bd);
}

/* TOP BAR */
.elder-topbar {
    position: sticky; top: 0; z-index: 1000;
    display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
    padding: .8rem 1.1rem;
    background: var(--elder-panel);
    border-bottom: 3px solid var(--elder-border);
}
.elder-wordmark {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 800; font-size: 1.25rem;
    color: var(--elder-link-dark);            /* soft yellow on navy = cross-family */
    text-decoration: none; margin-right: auto;
}
.elder-wordmark:hover { text-decoration: none; }
.elder-wordmark .logo-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--elder-accent); color: var(--elder-accent-fg);
    border: 2px solid var(--elder-accent-fg); font-size: 20px;
}

.elder-controls { display: flex; align-items: center; gap: .4rem; }
/* 2026-06-18 owner directive: ALL substrip buttons UNIFORM size. */
.elder-ctrl {
    min-width: 96px; min-height: 56px; padding: .55rem .9rem;
    background: var(--elder-card-bg); color: var(--elder-card-fg);
    border: 2px solid var(--elder-border);
    border-radius: 10px; font-family: inherit; font-weight: 800; font-size: 1.05rem;
    cursor: pointer; line-height: 1.1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    box-sizing: border-box;
}
/* hover == base (owner directive). */
.elder-ctrl:hover, .elder-ctrl:focus { filter: none; outline: none; }
.elder-ctrl:focus-visible { outline: 3px solid var(--elder-focus); outline-offset: 2px; }
.elder-ctrl .lbl { font-size: .82rem; font-weight: 700; display: inline; line-height: 1.1; }

/* PANIC HELP button -- MATCHES Other Help in size, only color differs. */
.elder-panic {
    min-width: 96px; min-height: 56px; padding: .55rem .9rem;
    background: var(--elder-panic-bg); color: var(--elder-panic-fg);
    border: 2px solid var(--elder-panic-fg); border-radius: 10px;
    font-family: inherit; font-weight: 900; font-size: 1.05rem;
    letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
    cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    box-sizing: border-box;
}
.elder-panic:hover, .elder-panic:focus { filter: none; transform: none; text-decoration: none; outline: none; }
.elder-panic:focus-visible { outline: 4px solid var(--elder-focus); outline-offset: 2px; }

/* Second strip below the help row. */
.elder-substrip {
    display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
    padding: .5rem 1.1rem;
    background: var(--elder-panel);
    border-bottom: 1px solid var(--elder-border);
}
.elder-substrip .elder-ctrl { min-height: 44px; }
.elder-substrip a.elder-ctrl { text-decoration: none; }
.elder-substrip .elder-ctrl.live { background: var(--elder-panic-bg); color: #fff; border-color: #fff; }

/* Greeting strip. */
.elder-greet {
    padding: .8rem 1.1rem; font-size: 1.15rem; font-weight: 700;
    background: var(--elder-bg); color: var(--elder-fg);
    border-bottom: 1px solid var(--elder-border);
}
.elder-greet .mic-hint { font-size: .9rem; font-weight: 600; color: var(--elder-muted-dark); margin-left: .6rem; }

/* MAIN + CARDS  (dark cards, light text -- RULE 37) */
.elder-main { max-width: none; margin: 0; padding: 1.25rem 1.6rem 2rem; } /* full-width (owner rule 2026-06-25) */

.elder-card {
    background: var(--elder-card-bg); color: var(--elder-card-fg);
    border: 2px solid var(--elder-card-border); border-radius: 14px;
    padding: 1.25rem 1.35rem; margin: 0 0 1rem 0;
}
.elder-card h2 { font-size: 1.4rem; }
.elder-card h3 { font-size: 1.2rem; }

.elder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }

.elder-card.clickable-card { cursor: pointer; transition: transform 80ms ease, box-shadow 80ms ease; }
.elder-card.clickable-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.elder-card.clickable-card:focus-visible { outline: 3px solid var(--elder-focus); outline-offset: 2px; }

/* Status banners -- DARK tinted (no light/white bg). */
.elder-ok, .elder-err { padding: .9rem 1.1rem; border-radius: 10px; border: 2px solid; font-weight: 700; margin: 0 0 1rem 0; }
.elder-ok  { background: #0d2a16; color: #cdebc1; border-color: #2f6a3f; }
.elder-err { background: #3a0d12; color: #ffd2dc; border-color: #7a2030; }

/* RULE 8  --  TOP / BOTTOM SPLIT */
.elder-split { display: flex; flex-direction: column; gap: 1rem; }
.elder-split-top { min-height: 40vh; }
.elder-split-bottom { border-top: 4px solid var(--elder-border); padding-top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.elder-bigtext {
    font-size: clamp(24px, 6vw, 30px); font-weight: 800; line-height: 1.35;
    padding: 1.1rem 1.25rem; background: var(--elder-card-bg); color: var(--elder-fg);
    border: 2px solid var(--elder-card-border); border-radius: 14px;
}

/* BIG ON/OFF TOGGLE  (inside dark cards) */
.elder-toggle { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; }
.elder-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.elder-toggle .track {
    width: 78px; height: 44px; background: #4a4a6e; border-radius: 999px;   /* >=44px tap target */
    position: relative; transition: background 120ms ease; flex: 0 0 auto;
    border: 2px solid var(--elder-border);
}
.elder-toggle .track::after {
    content: ""; position: absolute; top: 4px; left: 4px;
    width: 34px; height: 34px; background: #ffd2dc; border-radius: 50%;   /* light pink knob, not white */
    transition: transform 120ms ease;
}
.elder-toggle input:checked + .track { background: #14803a; }              /* green on */
.elder-toggle input:checked + .track::after { transform: translateX(34px); }
.elder-toggle input:focus-visible + .track { outline: 3px solid var(--elder-focus); outline-offset: 2px; }
.elder-toggle .state { font-weight: 800; min-width: 3.2em; color: var(--elder-card-fg); }

.elder-select {
    min-height: 48px; padding: .6rem .8rem; font-family: inherit; font-size: 1rem;
    color: var(--elder-fg); background: var(--elder-input-bg);
    border: 2px solid var(--elder-border); border-radius: 10px;
}

/* FOOTER BAR */
.elder-footer-bar { border-top: 4px solid var(--elder-border); background: var(--elder-panel); color: var(--elder-panel-fg); padding: 1.1rem; margin-top: 1.5rem; }
.elder-footer-bar .row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: center; max-width: 1000px; margin: 0 auto; }
.elder-mic-dot { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--elder-muted-dark); }
.elder-mic-dot .dot { width: 14px; height: 14px; border-radius: 50%; background: #4a4a6e; }
.elder-mic-dot.live .dot { background: #ff6b6b; animation: elderMicPulse 1s ease-in-out infinite; }
@keyframes elderMicPulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
.elder-disclaimer { max-width: 1000px; margin: 1rem auto 0; font-size: .8rem; color: var(--elder-muted-dark); text-align: center; line-height: 1.45; padding: 0 1.1rem; }

/* PHONE  --  900px breakpoint, keep >=15px side padding */
@media (max-width: 900px) {
    .elder-topbar { padding: .7rem 1rem; }
    .elder-wordmark { font-size: 1.1rem; }
    .elder-grid { grid-template-columns: 1fr; }
    .elder-card { padding: 1.1rem 1rem; border-radius: 12px; }
    .elder-main { padding: 1rem 1rem 2rem; }
    .elder-greet { padding: .7rem 1rem; }
    .elder-panic { flex: 1 1 100%; order: 5; text-align: center; }
}

/* 2026-06-15 ORCHESTRATOR DIRECT EDIT: hide floating mute, pin TTS toolbar top. */
#mrai-mute-btn,
.mrai-tts-toolbar #mrai-mute-btn,
.mrai-mute-chip {
    display: none !important;
}

/* Pin the site-wide TTS toolbar to the TOP, NOT floating bottom-right */
.mrai-tts-toolbar,
#mrai-tts-toolbar,
#mrai-read-all-btn {
    position: static !important;
    margin: 0 0 1rem 0 !important;
    bottom: auto !important;
    right: auto !important;
    box-shadow: none !important;
}

/* For ANY page that uses elder header, anchor the read-page button in flow. */
body.elder-section #mrai-read-all-btn,
body.elder-section .mrai-read-page-top {
    position: relative !important;
    margin-bottom: 1rem;
    padding: 0.8rem 1.2rem;
    background: var(--elder-card-bg);
    color: var(--elder-card-fg);
    border: 2px solid var(--elder-card-border);
    border-radius: 12px;
    font-weight: 600;
}


/* ===== SECTION (d): mrai_chrome.css  (shared two-row page chrome) ===== */
/* (copied verbatim; no :root block.) */

/* ---- Row 1 : title bar ---- */
.mrai-titlebar {
    position: sticky; top: 0; z-index: 1000;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    background: var(--elder-panel, #15123a);
    border-bottom: 3px solid var(--elder-border, #2c2a5a);
}
.mrai-title {
    display: inline-flex; align-items: center; gap: 8px;
    margin-right: auto;                 /* push the gear to the far right */
    padding: 4px 6px; border-radius: 8px;
    text-decoration: none; line-height: 1.1;
    font-weight: 800; font-size: 1.3rem;
    color: var(--elder-link-dark, #ffe08a);
}
.mrai-title:hover, .mrai-title:focus { text-decoration: none; outline: none; }
.mrai-title:focus-visible { outline: 3px solid var(--elder-focus, #9ec5ff); outline-offset: 2px; }
.mrai-heart { font-size: 1.25em; line-height: 1; }
.mrai-brand { white-space: nowrap; }

.mrai-gear {
    display: inline-flex; align-items: center; justify-content: center;
    width: 37px; height: 37px; padding: 0; flex: 0 0 auto;  /* gear padding halved (owner 2026-06-26) */
    background: var(--elder-card-bg, #22204d); color: var(--elder-card-fg, #eef1ff);
    border: 2px solid var(--elder-border, #2c2a5a); border-radius: 10px; cursor: pointer;
}
.mrai-gear .mrai-ico { width: 26px; height: 26px; }
.mrai-gear:focus-visible { outline: 3px solid var(--elder-focus, #9ec5ff); outline-offset: 2px; }

/* ---- Row 2 : action buttons ---- */
.mrai-actionrow {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    padding: 10px 12px;
    background: var(--elder-panel, #15123a);
    border-bottom: 1px solid var(--elder-border, #2c2a5a);
}
.mrai-actbtn {
    flex: 0 1 auto; min-width: 0;            /* content-width, NOT stretched (owner 2026-06-26) */
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 10px;        /* 10px buffer (owner rule) */
    background: var(--elder-card-bg, #22204d); color: var(--elder-card-fg, #eef1ff);
    border: 2px solid var(--elder-border, #2c2a5a); border-radius: 10px;
    font-family: inherit; font-weight: 800; font-size: 1.02rem; line-height: 1.1;
    text-decoration: none; cursor: pointer; box-sizing: border-box;
}
.mrai-actbtn:hover, .mrai-actbtn:focus { filter: none; text-decoration: none; outline: none; }
.mrai-actbtn:focus-visible { outline: 3px solid var(--elder-focus, #9ec5ff); outline-offset: 2px; }
.mrai-actbtn .lbl { font-weight: 800; }
.mrai-actbtn.mrai-help {
    background: var(--elder-panic-bg, #b3122a); color: var(--elder-panic-fg, #ffffff);
    border-color: #ffffff; font-weight: 900; letter-spacing: .03em; text-transform: uppercase;
}
.mrai-dot { line-height: 1; }

/* Row-2 VOICE PILLS (Speak = microphone, Read = read whole page). */
.mrai-pill { border-radius: 999px; padding: 10px; flex: 0 0 auto; }

/* Kill the legacy injected page-reader button + floating speak bar. */
#mrai-read-all-btn, .mrai-read-page-top, .mrai-speak-bar { display: none !important; }

/* ---- icon toggle buttons (speak / listen) ---- */
.mrai-iconbtn .mrai-ico { width: 30px; height: 30px; flex: 0 0 auto; }
.mrai-ico .ico-line  { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.mrai-ico .ico-solid { fill: currentColor; stroke: none; }
.mrai-ico .ico-slash { display: none; }
.mrai-iconbtn.is-off .mrai-ico .ico-slash { display: inline; }
.mrai-iconbtn.is-off .mrai-ico .ico-line,
.mrai-iconbtn.is-off .mrai-ico .ico-solid { opacity: .4; }
.mrai-iconbtn.live {
    background: var(--elder-ok-bg, #14803a); color: #ffffff; border-color: #ffffff;
}

/* ---- generic high-contrast (non-elder sections use this class on <html>) ---- */
html.mrai-contrast { filter: contrast(1.18) saturate(1.08); }

/* ---- gear settings popup ---- */
.mrai-settings {
    display: none;
    position: fixed; top: 62px; right: 12px; z-index: 1200;
    width: min(330px, 92vw);
    background: var(--elder-panel, #15123a); color: var(--elder-fg, #eef1ff);
    border: 2px solid var(--elder-border, #2c2a5a); border-radius: 12px;
    padding: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.mrai-settings.open { display: block; }
.mrai-settings h3 { margin: 0 0 10px; font-size: 1.15rem; }
.mrai-settings .row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.mrai-settings .row:last-child { margin-bottom: 0; }
.mrai-settings .elder-ctrl { flex: 1 1 130px; min-width: 0; min-height: 48px; }
.mrai-settings .elder-ctrl.is-on { background: var(--elder-accent, #cfe4ff) !important; color: #1a1340 !important; border-color: var(--elder-accent, #cfe4ff) !important; }

/* ---- phone : tighten spacing to 8px ---- */
@media (max-width: 900px) {
    .mrai-titlebar  { padding: 6px 10px; gap: 8px; }
    .mrai-title     { font-size: 1.12rem; }
    .mrai-actionrow { padding: 8px 10px; gap: 8px; }
    .mrai-actbtn    { min-height: 50px; padding: 8px; }
    .mrai-settings  { top: 56px; }
}


/* ===== SECTION (e): site_nav.css  (B7 unified left-sidebar nav) ===== */
/* (copied verbatim, except its :root { --site-rail-w } which is merged into
   section (a).) */

/* Page layout wrapper put around (rail + content) by the header. */
.site-shell { display: flex; align-items: stretch; min-height: 100vh; }
/* 2026-06-26 FIX: content column fills space to the right of the rail. */
.site-content { flex: 1 1 0%; min-width: 0; width: 100%; }
.site-rail {
    width: var(--site-rail-w); flex: 0 0 var(--site-rail-w);
    background: #0a1b3e; color: #cfe4ff;
    border-right: 2px solid #3a2f6e;
    padding: 15px; box-sizing: border-box;
    display: flex; flex-direction: column; gap: .4rem;
    position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
}
.site-rail .brand {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 800; font-size: 1.2rem; color: #fff3a8;
    text-decoration: none; padding: .4rem .2rem 1rem;
}
.site-rail .brand .dot {
    width: 30px; height: 30px; border-radius: 50%;
    background: #1a1340; color: #fff3a8; border: 2px solid #fff3a8;
    display: inline-flex; align-items: center; justify-content: center;
}
.site-nav-item {
    display: flex; align-items: center; gap: .7rem;
    min-height: 48px; padding: .6rem .8rem; border-radius: 12px;
    color: #cfe4ff; text-decoration: none; font-weight: 700; font-size: 1.05rem;
    border: 2px solid transparent;
}
.site-nav-item .ic { font-size: 1.3rem; line-height: 1; width: 1.6rem; text-align: center; }
.site-nav-item:hover { background: #1a1340; }
/* Active = filled pastel pill in the item's family color (RULE 35). */
.site-nav-item.active { color: #1a1340; font-weight: 800; }
.site-rail .spacer { flex: 1 1 auto; }
.site-nav-voice {
    min-height: 52px; margin-top: .6rem;
    background: #1a1340; color: #fff3a8; border: 2px solid #fff3a8;
    border-radius: 12px; font-weight: 800; font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    text-decoration: none; cursor: pointer;
}

/* 2026-06-17 owner directive: kill the yellow square hamburger entirely. */
.site-burger { display: none !important; }
.site-rail-scrim {
    display: none; position: fixed; inset: 0; z-index: 1090;
    background: rgba(3,16,31,.6);
}

@media (max-width: 900px) {
    .site-shell { display: block; }
    .site-burger { display: none !important; }     /* stays hidden -- bottom MENU replaces it */
    .site-rail {
        position: fixed; top: 0; left: 0; height: 100vh; z-index: 1100;
        transform: translateX(-100%); transition: transform .22s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,.5);
    }
    .site-shell.rail-open .site-rail { transform: translateX(0); }
    .site-shell.rail-open .site-rail-scrim { display: block; }
    .site-content { padding-top: 0; }     /* no fixed burger to clear */
    /* Keep the elder topbar wordmark clear of the fixed burger. */
    .elder-topbar { padding-left: 64px; }
}

/* ---- B7 collision handling with the elder shell's fixed widgets ---- */
@media (min-width: 901px) {
    #elder-voice-pill, #elder-fb-open { left: 274px !important; }
}


/* ===== SECTION (f): elder_force_dark.css  (FORCE-DARK -- MUST WIN, LAST) ===== */
/* (copied VERBATIM, INCLUDING its two :root blocks.  These :root blocks are
   intentionally NOT merged into section (a): they use !important and must
   override the earlier mrartin.css token values so force-dark pages keep their
   exact look.  Do not move them up.) */

:root {
    --base-size:  16px;
    --radius:     14px;

    /* 2026-06-26 owner: BACKGROUND and CARDS must be CLEARLY different dark colors. */
    --bg:        #241a55;   /* violet page (Mr Z 2026-07-02) -- clearly different from the midnight cards + more colorful than the old navy. */
    --card-bg:   #0b1440;   /* CARD BLUE #10 "Midnight" (Mr Z pick 2026-07-02, "for now"). */
    --fg:        #efe9ff;   /* B: light body text */
    --link-fg:   #fff3a8;   /* gold heading+link accent -- B's CYAN link is HELD
                               pending owner OK (headings+links share this token;
                               splitting them is the one decision left). */
    --card-edge: #7d62c4;   /* B: card outline */
    --link:      #7fe3ff;   /* B: links = CYAN (own token; headings stay gold via --link-fg) */
    --good:      hsl(150, 55%, 55%);   /* B success green */
    --warn:      hsl(40,  88%, 60%);   /* B warning amber */
    --error:     hsl(345, 72%, 66%);   /* B error/red */
}

/* Force the palette site-wide via !important to beat any page's own
   inline <style> block. */
html, body {
    background: var(--bg) !important;
    color: var(--fg) !important;
    color-scheme: dark !important;
}

h1, h2, h3, h4, h5, h6 { color: var(--link-fg) !important; }
a, a:link, a:visited { color: var(--link) !important; }   /* B: cyan links */

/* Every card / panel / tile / button gets the same bg + border-defined look. */
.tile, .card, .panel, .bubble, .transcript,
.elder-tile, .elder-card, .qr-card, .wiz-card,
.emenu-card, .adu-card, .profile-card,
.empty, .photo, .album, .intro, .info,
.item, .box, .well, .note, .alert, .hint-box,
.entry, .post, .message, .summary, .preview,
fieldset {
    background: var(--card-bg) !important;
    color: var(--fg) !important;
    border-color: var(--card-edge) !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-radius: var(--radius) !important;
}

button, .btn, .buy, .elder-btn, .kids-btn,
input[type="submit"], input[type="button"] {
    background: var(--card-bg) !important;
    color: var(--fg) !important;
    border: 2px solid var(--card-edge) !important;
    border-radius: var(--radius) !important;
    text-decoration: none !important;
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="password"],
input[type="search"], input[type="url"],
select, textarea {
    background: var(--card-bg) !important;
    color: var(--fg) !important;
    border: 2px solid var(--link-fg) !important;
    border-radius: var(--radius) !important;
    color-scheme: dark;
}

.flash, .alert, .ok, .err {
    background: var(--card-bg) !important;
    color: var(--fg) !important;
    border: 2px solid var(--link-fg) !important;
    border-radius: var(--radius) !important;
}
.flash.ok, .ok                            { border-color: var(--good) !important; }
.flash.err, .err, .flash.error, .alert-danger { border-color: var(--error) !important; }

/* Hover == base.  Zero visual change. */
*:hover, *:focus {
    transform: none !important;
    filter: none !important;
    outline: none !important;
}
a:hover, button:hover, .btn:hover,
.card:hover, .tile:hover,
.elder-card:hover, .elder-tile:hover, .elder-btn:hover,
.emenu-card:hover, .buy:hover {
    background: var(--card-bg) !important;
    color: var(--fg) !important;
    border-color: var(--link-fg) !important;
    text-decoration: none !important;
}

/* 4-INCH ANDROID FLOOR (locked 2026-06-25, owner directive). */
img, video, iframe, table, pre {
    max-width: 100% !important;
    box-sizing: border-box;
}
pre { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
body { overflow-x: hidden; }

/* 2026-06-26 OWNER GLOBAL DEFAULT: dark night bg + light pastel text.
   Re-point legacy "cream template" var NAMES to the dark scheme. */
:root{
  --bg:   #14224a !important;   /* night navy page background */
  --card: #3a2a73 !important;   /* purple cards / panels */
  --ink:  #ede5ff !important;   /* light lavender body text */
  --soft: #bcd2f5 !important;   /* soft blue secondary text */
  --warm: #fff3a8 !important;   /* soft yellow accent / border */
  --blue: #cfe0ff !important;   /* light pastel blue accent / headings */
  --red:  #ff9aa9 !important;   /* soft pastel red accent */
}
pre.manual { color:#ede5ff !important; }                 /* was hardcoded #2b1d10 */
.toolbar a:hover, .toolbar button:hover, .gate .tap{      /* vars used as BG -> dark */
    background:#4a3580 !important; color:#ffffff !important; }
.mic-orb.error { background:#a32020 !important; }         /* error orb stays real red */
/* 2026-06-27 FIX: light-background OVERLAYS hold var()-colored (now light) text.
   Give the overlay a DARK bg so the light text reads. Fixes the talk.php gate
   ("Mr Artin is listening / Tap to start") that went light-on-light. */
.gate { background:rgba(20,34,74,0.97) !important; }
.no-speech { background:#241a55 !important; }


/* ===========================================================================
   GLOBAL READABILITY SAFETY BASELINE  (Color Coordinator 2026-06-29)
   Owner's #1 rule: NO page may render light-background + light/yellow text.
   This block is LAST in the cascade so it wins, but it is written so the
   intended force-dark palette above still applies (it re-asserts the SAME
   var() tokens, never a new raw color).

   WHY: a few standalone pages do NOT load the force-dark chrome, or set a
   light background on their own custom class. If any page ever "forgets the
   chrome", these rules still paint a dark navy page with light, readable text.
   =========================================================================== */

/* (1) Hard floor: every page's root surface is dark navy + light text.
       Re-asserts the force-dark tokens so a page that forgot the chrome
       (or whose own body{background:#fff} tried to win) is still readable. */
html, body {
    background-color: var(--bg) !important;
    color:            var(--fg)  !important;
    color-scheme:     dark        !important;
}

/* (2) Default text colors so inherited text is always light on the dark page. */
p, li, span, label, dt, dd, td, th, blockquote, figcaption, small, strong, em, b, i {
    color: var(--fg);
}

/* (3) Catch-all container classes seen across the tree that some pages paint
       light. Force them to the dark card surface + light text so the contents
       read. var() tokens only. */
.sheet, .letter, .inc-box, .help-err, .chat-blocked, .no-speech,
.med-demo, .recv-output, .recv-display, .output-box, .thinking-box,
.taste, .safety, .seo-related, .danger-zone, .alert-row, .hist-flash,
.lang-badge, .bubble, .bubble.user, .bubble.ai, .bubble.sys,
.my-code, .vote-btn, .code, .sender, .receiver, .legend, .side {
    background-color: var(--card-bg) !important;
    color:            var(--fg)      !important;
    border-color:     var(--card-edge);
}

/* (4) THE EXCEPTION — intentionally light, MUST stay readable with DARK text.
       The emergency responder med card and the printable cards are meant to be
       read/printed by a stranger; they keep a light sheet but with DARK ink.
       (Their own page CSS sets color:#111/#000; this just guarantees it can't
       be flipped light by the rules above.) */
.med-sheet, .med-sheet *,
.print-card, .print-card *,
.printable, .printable * {
    /* leave background as the page set it; only guarantee text stays dark */
}
.med-sheet, .print-card, .printable {
    color: #111 !important;             /* dark ink on the light print sheet */
}
@media print {
    /* Print already forces #fff bg + #000 text above; keep it readable. */
    .med-sheet, .print-card, .printable, body { color: #000 !important; }
}