/* APOLLO CORRECTION OVERLAY — UI Wand toolbar/button review (t_9da2af4b)
   Scope: two confirmed, code-grounded "generic across materials" defects.
   Does NOT touch: hero/bench physics, marquee sign, Align engine, layout,
   control bar (bd-bar) buttons, Back button, hit targets, focus rings,
   homepage one-viewport layout, About/DESIGN.md page content.

   ---------------------------------------------------------------------
   DEFECT A — design.html's header (.dmd-header) carries ZERO theme-
   specific material across all 7 styles. .bd-nav (index.html, about.html)
   IS themed per style (leather band in skeuomorph, navy pixel strip in
   retro, violet glass in gel, frosted blur in frost, soft extrude surface
   in extrude, flat ink-bordered card in primitives) — confirmed by reading
   css/skeuomorph.css L24-30, css/retro.css L98-101, css/gel.css L24-29,
   css/frost.css L17-19, css/extrude.css L16-18, css/primitives.css L26-28.
   design-md.css's .dmd-header has no per-[data-theme] rule anywhere in the
   codebase (grep across all 7 theme CSS files returns 0 matches for
   "dmd-header"). Every style's DESIGN.md page currently shows the exact
   same semi-transparent white nav strip, breaking the "one spec, seven
   looks" premise on the one page whose entire purpose is to document each
   look's own materials.
   FIX: give .dmd-header real per-theme surfaces reusing each theme's own
   --bd-bar-bg / nav treatment tokens already defined in tokens.css, so the
   page chrome matches the material it is documenting.

   DEFECT B — the nav-level DESIGN.md button (.bd-nav .bd-btn--primary,
   the one that sits next to "About" on index.html/about.html — NOT
   design.html's own Download button, which is fine) is force-flattened to
   plain white-bg/ink-text via a blanket `!important` rule for ALL 7 themes
   (css/odysseus.css:109). Confirmed by computed style: in Retro, the real
   primary button elsewhere on the same page (Download, inside design.html)
   renders rgb(250,107,67) chunky pixel-bevel orange per retro.css L41-44,
   but this nav DESIGN.md button renders flat rgb(255,255,255) with a plain
   2px ink ring — a completely different, materially generic treatment, on
   every single theme (skeuomorph loses its glossy pill, gel loses its
   cream capsule, frost loses its glass, extrude loses its soft-press
   surface). The override's own comment explains why it exists: legibility
   on themed nav backgrounds ("C1: nav ink matches nav backing"). That is a
   real, valid concern — but every theme ALREADY has a verified-AA
   --bd-accent / --bd-accent-fg pair (used by the real primary buttons
   elsewhere on the same pages, e.g. the Download button) that solves
   legibility without flattening material identity.
   FIX: replace the flat override with each theme's own accent treatment
   (same tokens already proven AA-safe and already shipped on Download).
   ---------------------------------------------------------------------- */

/* ===== DEFECT A FIX: themed design.html header per style ===== */
.dmd-header{
  /* fallback / Modern: match .bd-nav's own look (no override needed, kept
     for clarity — explicit so nothing silently inherits a stale value) */
  background:color-mix(in srgb,var(--bd-bg) 92%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--bd-border);
}
html[data-theme="skeuomorph"] .dmd-header{
  background:var(--sk-noise),linear-gradient(180deg,var(--sk-leather-hi),var(--sk-leather) 55%,var(--sk-leather-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.6),0 3px 6px rgba(0,0,0,.45);
  backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;
}
html[data-theme="skeuomorph"] .dmd-header .dmd-header__title{color:#f3e8d6;text-shadow:0 -1px 0 rgba(0,0,0,.6)}
html[data-theme="retro"] .dmd-header{
  background:var(--bd-bg);border-bottom:var(--bd-px) solid var(--rt-navy);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
html[data-theme="retro"] .dmd-header .dmd-header__title{font:12px/1 var(--bd-p-pixel);color:var(--rt-cream)}
html[data-theme="gel"] .dmd-header{
  background:rgba(239,234,255,.9);
  box-shadow:0 10px 24px -12px rgba(26,12,90,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:0;
}
html[data-theme="frost"] .dmd-header{
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 -1.5px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border-bottom:0;
}
html[data-theme="extrude"] .dmd-header{
  background:var(--bd-bg);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 8px 16px -8px var(--ex-lo);border-bottom:0;
}
html[data-theme="primitives"] .dmd-header{
  background:var(--bd-bg);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 2px 0 var(--pr-ink);border-bottom:0;
}

/* ===== DEFECT D (SUPERSEDING CHANGE, Brian 11:10) — About removed from
   public nav. This is a content/IA decision from Brian via t_a9a96996,
   not a visual-balance finding, but it reshapes the header this spec
   corrects: the nav/dmd-header now carry ONE nav button (DESIGN.md) next
   to the wordmark, not two. Hide .uiw-nav-pages' About link and collapse
   the mobile "more" kebab back to a single inline DESIGN.md button (no
   menu needed for one item) so the header doesn't carry dead affordance
   for a hidden page. About's route-level removal (404/redirect) and
   deploy are t_a9a96996/Atlas's job, not a CSS concern — this only hides
   the now-inapplicable nav entry so the chrome matches current scope. ===== */
.uiw-nav-pages a[href="about.html"],
.uiw-nav-pages__more a[href="about.html"]{display:none!important}
@media (max-width:390px){
  /* With only one item (DESIGN.md) left, the kebab collapse pattern is
     unnecessary complexity: show the single DESIGN.md button inline
     instead of behind a "more" menu. */
  body.is-oneview .uiw-nav-pages{display:flex!important}
  body.is-oneview .uiw-nav-pages a[href="about.html"]{display:none!important}
  body.is-oneview .uiw-nav-pages__more{display:none!important}
}

/* ===== DEFECT B FIX: nav-level DESIGN.md primary button keeps each
   theme's real accent material instead of a flattened white override.
   Replaces css/odysseus.css:109's blanket rule (removed in the real
   patch; this overlay demonstrates the intended replacement values). ===== */
html[data-theme] .bd-nav .uiw-nav-pages .bd-btn--primary,
html[data-theme] .dmd-header .uiw-nav-pages .bd-btn--primary{
  background:var(--bd-accent)!important;
  color:var(--bd-accent-fg)!important;
  box-shadow:var(--bd-sh-btn-primary)!important;
}
/* Retro: match the real primary button's pixel-bevel language exactly
   (same values as retro.css L41, proven AA on this theme already). */
html[data-theme="retro"] .bd-nav .uiw-nav-pages .bd-btn--primary,
html[data-theme="retro"] .dmd-header .uiw-nav-pages .bd-btn--primary{
  background:var(--rt-org)!important;color:#1a1022!important;
  box-shadow:inset 3px 3px 0 var(--rt-org-hi),inset -3px -3px 0 var(--rt-org-dk),
    0 0 0 var(--bd-px) var(--rt-ol),var(--bd-px) var(--bd-px) 0 var(--bd-px) var(--rt-ol)!important;
}
/* Skeuomorph: real glossy pill + leather-contract text, matching the
   theme's own .bd-btn--primary rule exactly (skeuomorph.css doesn't
   define one explicitly, so this reuses the base pill + accent). */
html[data-theme="skeuomorph"] .bd-nav .uiw-nav-pages .bd-btn--primary,
html[data-theme="skeuomorph"] .dmd-header .uiw-nav-pages .bd-btn--primary{
  background:var(--sk-gloss),linear-gradient(180deg,var(--bd-accent-hi),var(--bd-accent) 60%,var(--bd-accent-lo))!important;
  color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.35)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.35),0 0 0 1px #9c3109!important;
}

/* ---------------------------------------------------------------------
   DEFECT C — on index.html's one-viewport mobile layout (<=390px), the
   collapsed About/DESIGN.md "more" menu kebab (.uiw-nav-pages__more) is
   positioned `position:absolute; top:calc(100% + 6px)` relative to
   .bd-nav (odysseus.css L222). .bd-nav itself is `position:relative`
   inside a flex column (is-oneview rules), so that absolute offset drops
   the kebab trigger down INTO the hero workbench field below the nav,
   where it sits on top of / collides with draggable bench pieces (e.g.
   an "Overview / Activity / Settings" segmented-control piece in Modern,
   confirmed in before/index_modern_mobile.png and before/
   index_skeuomorph_mobile.png — the kebab button renders as a floating
   square over the live interactive field, not inside the nav strip).
   The kebab itself is fine (correct size, clear icon); only its position
   is wrong — it reads as a stray bench piece, not a nav control, and sits
   where a drag gesture on the real piece underneath could be captured by
   the menu button instead.
   FIX: anchor the dropdown PANEL (not the trigger) below the nav with the
   trigger staying inline in nav flow where .uiw-nav-pages__more already
   sits before the collapse breakpoint. Scope this only to body.is-oneview
   at <=390px; the design.html/about.html instances of this menu (if any)
   are unaffected by this rule's specificity floor. ---------------------- */
@media (max-width:390px){
  body.is-oneview .uiw-nav-pages__more{
    position:relative!important;
    top:auto!important;right:auto!important;
  }
  body.is-oneview .uiw-nav-pages__more[open]{
    position:relative!important;
  }
  body.is-oneview .uiw-nav-pages__more > .uiw-nav-pages__more-list,
  body.is-oneview .uiw-nav-pages__more a:not(summary){
    /* the dropdown panel itself still opens as a positioned overlay,
       anchored to the (now in-flow) trigger, so it drops over the hero
       rather than the trigger button sitting inside it */
    position:absolute;top:calc(100% + 6px);right:0;
    background:var(--bd-surface);border-radius:var(--bd-r-md);
    box-shadow:var(--bd-sh-2);padding:6px;min-width:140px;z-index:40;
  }
}