/* Dark adapters for the portfolio's two creative tools. The builder pages use
   the original ramp names internally; rebinding them here keeps their layout
   and interaction system intact while giving every control one semantic dark
   surface. Light states do not enter either rule. */
:root[data-theme="dark"] body[data-theme-page="gradientlab"],
:root[data-theme="dark"] body[data-theme-page="headmaker"]{
 --builder-page:var(--theme-page);
 --builder-surface:var(--theme-surface);
 --builder-elevated:var(--theme-elevated);
 --builder-ink:var(--theme-ink);
 --builder-ink-soft:var(--theme-ink-soft);
 --builder-muted:var(--theme-muted);
 --builder-rim:var(--theme-rim);
 --builder-rim-strong:var(--theme-rim-strong);

 --c50:var(--builder-page);
 --c0:var(--builder-surface);
 --c75:var(--builder-surface);
 --c100:var(--builder-rim);
 --c500:var(--builder-muted);
 --c700:var(--builder-ink-soft);
 --c950:var(--builder-ink);
 /* --accent stays bound to --theme-focus: the dark theme keeps a violet identity
    (see --theme-atmosphere) and this is what the page's own accent-coloured
    marks read. It no longer reaches the PRIMARY BUTTON -- .ctl--primary comes
    from controls.css and takes --ctl-primary-ground like every other page's
    primary does in dark -- and as of 2026-08-08 it no longer reaches THE SLIDER
    THUMB either. It used to on headmaker.html and not on gradientlab.html, which
    is how one site ended up with a violet thumb on one builder and a near-white
    one on the other in the same theme. `.ctl--range` paints its thumb in
    --ctl-ink-strong on both. The violet is not lost: --ctl-focus is still
    --theme-focus, so the thumb wears it the moment it takes focus, which is the
    state the accent was always meant to mark. */
 --accent:var(--theme-focus);
 --accent-press:#C8C5FF;
 --accent-wash:var(--builder-elevated);
 --mat-3-solid:var(--builder-elevated);
 --mat-i1:var(--builder-ink);
 --rim-1:inset 0 0 0 var(--hair-w) var(--builder-rim);
 --rim-2:inset 0 0 0 var(--hair-w) var(--builder-rim-strong);
 --rim-3:inset 0 0 0 var(--focus-w) var(--builder-rim-strong);
 --rim-i1:inset 0 0 0 var(--hair-w) rgba(11,12,15,.22);
 --rim-i2:inset 0 0 0 var(--focus-w) rgba(11,12,15,.42);
 background-color:var(--builder-page);
 color:var(--builder-ink);
}

/* The outer shell stays almost invisible; the working surface is the one
   raised plane. Fields receive the third depth so editable areas remain clear. */
:root[data-theme="dark"] body[data-theme-page="gradientlab"] :is(.panel,.stage),
:root[data-theme="dark"] body[data-theme-page="headmaker"] :is(.mkPanel,.mkStageCol){
 background-color:var(--builder-surface);
}
:root[data-theme="dark"] body[data-theme-page="gradientlab"] :is(.field,.panelFoot .ctl--secondary),
:root[data-theme="dark"] body[data-theme-page="headmaker"] :is(.field,.skipLink){
 background-color:var(--builder-elevated);
 color:var(--builder-ink);
}

/* THE .ctl DARK ADAPTERS THAT USED TO SIT HERE ARE GONE, and their absence is
   the point. They existed because both builder pages carried a PRIVATE copy of
   `.ctl` that bound raw --c* ramps, so dark mode had to be handed to it by
   name — five rules restating rest ink, hover ink and the primary's fill and
   hover fill. Both pages link controls.css as of 2026-08-08, and the library
   reads --ctl-ink / --ctl-ink-strong / --ctl-primary-ground, every one of which
   already resolves through --theme-* and is therefore already dark. Restating
   them here would be a third definition of the same decision.
   The --c* rebinding block above stays: it is what makes the page's REMAINING
   local styling — the stage, the drop region, the step rail — dark-aware. The
   sliders and the colour wells have left that list as of 2026-08-08; they are
   .ctl--range and .ctl--swatch now, and they read --ctl-* like every other
   control, so dark reaches them without being handed to them by name. */

/* THE SLIDER'S DARK ADAPTER IS GONE, and it turns out never to have run.
   It repainted five pseudo-elements by name -- two tracks per page, because each
   builder had drawn its own slider, plus the step rail's mark -- and it wrapped
   them in :is(). MEASURED, not reasoned: :is() takes a FORGIVING selector list
   and pseudo-elements are not valid arguments to it, so every argument was
   silently dropped and Chrome serialises the rule's selector back as `:is()`,
   which matches nothing. CSS.supports('selector(:is(input::-webkit-slider-
   runnable-track))') returns false; the rule still parses and still appears in
   cssRules, which is exactly why nobody noticed. Every dark track on this site
   has been rendering on its page's own --c100 rebinding, not on this block.
   Nothing replaces it. Both pages carry `.ctl--range` now, whose track is a
   translucent wash of --ctl-ink-strong and inverts by itself in all six
   time-of-day states, and .mkSteps li::before already reads --c100, which the
   --c* block above rebinds to --builder-rim. Reviving the rule would have
   darkened a hairline nobody asked to change; deleting it says what was already
   true. The lesson is in controls.css: -webkit- and -moz- pseudo-elements get
   their own separate blocks, never a shared list. */
:root[data-theme="dark"] body[data-theme-page="headmaker"] .hmDrop{
 border-color:var(--builder-rim-strong);
 color:var(--builder-muted);
}

/* The framing overlay belongs to the crop tool, not the user's photograph. Its
   dark surround keeps step two from flashing a large light-gray sheet. */
:root[data-theme="dark"] body[data-theme-page="headmaker"] .hmOvalMask path:first-child{
 fill:rgba(11,12,15,.90);
}
:root[data-theme="dark"] body[data-theme-page="headmaker"] .hmOvalMask path:last-child,
:root[data-theme="dark"] body[data-theme-page="headmaker"] :is(#gL,#gR){
 stroke:rgba(244,245,247,.36);
}
:root[data-theme="dark"] body[data-theme-page="headmaker"] .hmLoupe{
 border-color:var(--builder-ink);
 background-color:var(--builder-page);
}
:root[data-theme="dark"] body[data-theme-page="headmaker"] .hmLoupe::after{
 border-color:var(--builder-ink);
 background-color:rgba(11,12,15,.32);
}

/* .ctl, .ctl--range, .ctl--swatch and .field take --ctl-focus, which is
   --theme-focus already. The colour well and the crop sliders have left this
   list because they are library primitives now; only the page-local regions
   still need telling. */
:root[data-theme="dark"] body[data-theme-page="headmaker"] :is(.hmDrop,.hmPitPick){
 outline-color:var(--theme-focus);
}

@media(forced-colors:active){
 :root[data-theme="dark"] body[data-theme-page="gradientlab"],
 :root[data-theme="dark"] body[data-theme-page="headmaker"]{
  --builder-page:Canvas;
  --builder-surface:Canvas;
  --builder-elevated:Canvas;
  --builder-ink:CanvasText;
  --builder-ink-soft:CanvasText;
  --builder-muted:CanvasText;
  --builder-rim:CanvasText;
  --builder-rim-strong:CanvasText;
 }
}