/* ==========================================================================
   studio-dark.css — MapX Studio DARK CHROME.  Loaded LAST; every rule is gated
   on html[data-mx-theme="dark"], so with no attribute this file is a total
   no-op and the light editor renders exactly as before.

   THE ARTBOARD NEVER GOES DARK.  The poster preview shows the real material and
   the real ink; the customer proof must read true colour.  Two rules make that
   structural — tests/studio-theme.test.mjs FAILS the build if either is broken:

     1. No selector here may contain #laser-svg, "#poster-wrap svg",
        #poster-canvas, #content, .laser-svg-text, .laser-marker, .shape-group,
        .edit-line, .gen-editable, .sel-ring or [data-screen-only].
     2. No declaration here may be anything but paint: color, background,
        background-color, border-color, border-<side>-color, outline-color,
        box-shadow, accent-color, color-scheme, border-radius.
        Fonts, sizes, spacing and display are FORBIDDEN — text metrics feed
        getBBox and getComputedTextLength, which decide erase plates and welded
        geometry in the CUT FILES.

   Exports are safe by construction too: the exporters clone the live svg node
   and XMLSerializer it (js/laser-lake.js renderSvgPng + the 4
   stripEditorDecoration sites).  Document stylesheets are never serialised —
   the reference export docs/layers-baseline/A15b-laser.svg has 0 style
   elements and 0 class attributes — and the PNG proof paints its own literal
   '#ffffff' in JS.
   ========================================================================== */

/* ---- tokens ------------------------------------------------------------- */
html[data-mx-theme="dark"] {
  color-scheme: dark;                 /* native scrollbars, selects, textareas */
  background: #1d2125;
  /* editor.css :root tokens, re-pointed */
  --mx-panel:       #15191c;
  --mx-canvas:      #1d2125;
  --mx-line:        #262c31;
  --mx-line-2:      #21272b;
  --mx-ink:         #e8ebed;
  --mx-muted:       #9aa4ab;
  --mx-faint:       #7c868c;
  --mx-accent:      #5f8d74;
  --mx-accent-d:    #8cc0a1;
  --mx-accent-soft: #212c2a;
  --mx-shadow:      0 1px 2px rgba(0,0,0,.44), 0 4px 14px rgba(0,0,0,.40);
  --mx-shadow-sm:   0 1px 2px rgba(0,0,0,.44);
  /* js/feedback.js reads these four with fallbacks; nothing else defines them */
  --surface: #15191c;
  --ink:     #e8ebed;
  --line:    #262c31;
  --accent:  #5f8d74;
}
html[data-mx-theme="dark"] body.mx-studio {
  background: #1d2125;
  --s-brand:  #5f8d74;
  --s-dark:   #8cc0a1;   /* "accent as TEXT": #5f8d74 on the dark tint is 3.80:1 — fails AA */
  --s-tint:   #212c2a;   /* = the package's rgba(95,141,116,.16) flattened on #15191c */
  --s-tint-2: #27352f;
  --s-bg:     #1d2125;   /* workspace */
  --s-surface:#15191c;   /* panels */
  --s-well:   #1b2024;   /* wells / inputs */
  --s-text:   #e8ebed;
  --s-muted:  #9aa4ab;
  --s-faint:  #7c868c;   /* package says #667077 = 3.49:1; raised to 4.75:1 for AA */
  --s-line:   #262c31;
  /* MAP source panel, straight from the approved handoff: the row surface sits
     between the panel (#15191c) and the well (#1b2024); the flat layout's
     hairline; the switch's off track; the row hover border. CHROME ONLY — the
     source dots and feed swatches are CutPalette hexes written inline as data,
     so they render identically in both themes. */
  --s-row:     #171c1f;
  --s-hair:    #22282c;
  --s-sw-off:  #333a40;
  --s-line-hi: #3d454c;
  --s-danger: #cf6b60;
  --s-op-engrave: #8cc0a1;   /* inspector BADGES only — the real cut colours live in js/cutpalette.js */
  --s-op-score:   #cbaa63;
  --s-op-cut:     #cf6b60;
  /* .mxs-railtabs currently reads these as var(...,fallback) only */
  --mxs-panel:  #111517;
  --mxs-border: #262c31;
  --mxs-muted:  #9aa4ab;
  --mxs-text:   #e8ebed;
  --mxs-accent: #5f8d74;
  --s-sel-border: rgba(95,141,116,.55);
  --s-danger-soft: rgba(207,107,96,.14);
  --s-on-accent: #10241b;   /* readable INK for a filled --s-dark button (7.69:1) */
}

/* ---- chrome bar + contextual bar get their own tones (package spec) ------
   NOTE: laser-studio.html's header has NO .mx-hdr2 class (only laser-lake.html
   does), so this is matched on #free-header alone to cover both shells. */
html[data-mx-theme="dark"] body.mx-studio #free-header { background: #111517; border-bottom-color: #262c31; }
html[data-mx-theme="dark"] body.mx-studio #mx-ctxbar { background: #14181b; }
html[data-mx-theme="dark"] body.mx-studio #free-brand .brand-mark {
  background: #e8ebed; border-radius: 5px;   /* navy chevron mark needs a light chip on dark */
}
html[data-mx-theme="dark"] body.mx-studio #free-brand { color: var(--s-dark); }
html[data-mx-theme="dark"] body.mx-studio #free-brand em { color: var(--s-dark); }

/* ---- studio.css values that bypass its own tokens ----------------------- */
/* REQUIREMENT B: .ctx-menu-btn went with the deleted TEXT pane's Position / More buttons.
   The inspector's OBJECT ACTIONS block needs no dark rule — it uses studio.css's own tokens. */
html[data-mx-theme="dark"] body.mx-studio #mx-ctxbar .ctx-chip.on { border-color: var(--s-sel-border); }
html[data-mx-theme="dark"] body.mx-studio #mx-ctxbar .ctx-danger { border-color: var(--s-sel-border); color: var(--s-danger); }
html[data-mx-theme="dark"] body.mx-studio #mx-ctxbar .ctx-danger:hover { background: var(--s-danger-soft); }
html[data-mx-theme="dark"] body.mx-studio #mx-inspector .lyr-row:hover { background: var(--s-well); }
html[data-mx-theme="dark"] body.mx-studio #mx-inspector .insp-foot { color: var(--s-faint); border-top-color: var(--s-line); }
html[data-mx-theme="dark"] body.mx-studio #free-header #rail-del:hover { background: var(--s-danger-soft); color: var(--s-danger); }

/* Shape-op dialogs (added by the BOOL + OFFSET tracks): the OK button fills with
   --s-dark, which in dark mode is a LIGHT green — white label on it is 1.7:1. */
html[data-mx-theme="dark"] body.mx-studio #mx-bool-dlg .bd-ok,
html[data-mx-theme="dark"] body.mx-studio #mx-offsetdlg .mxo-ok { color: var(--s-on-accent); }
html[data-mx-theme="dark"] body.mx-studio #mx-bool-dlg .bd-ok:hover,
html[data-mx-theme="dark"] body.mx-studio #mx-offsetdlg .mxo-ok:hover { color: #fff; }
html[data-mx-theme="dark"] body.mx-studio #mx-offsetdlg .mxo-field input[type="number"] { background: var(--s-well); }

/* ---- header widgets styled in the pages' inline <style> ----------------- */
html[data-mx-theme="dark"] body.mx-studio .align-btn,
html[data-mx-theme="dark"] body.mx-studio #topbar-color {
  background: var(--s-well); border-color: var(--s-line); color: var(--s-text);
}
html[data-mx-theme="dark"] body.mx-studio .align-btn:hover,
html[data-mx-theme="dark"] body.mx-studio #topbar-color:hover { background: var(--s-surface); border-color: var(--s-brand); }
html[data-mx-theme="dark"] body.mx-studio .tool-menu-pop { background: var(--s-surface); border-color: var(--s-line); }
html[data-mx-theme="dark"] body.mx-studio .tool-menu-pop button { color: var(--s-text); }
html[data-mx-theme="dark"] body.mx-studio .tool-menu-pop button:hover { background: var(--s-well); }
html[data-mx-theme="dark"] body.mx-studio .tool-menu-pop .tm-sep { background: var(--s-line); }
html[data-mx-theme="dark"] body.mx-studio .editor-tools .mx-sep { background: var(--s-line); }
html[data-mx-theme="dark"] body.mx-studio .lock-toggle.active { background: var(--s-tint); border-color: var(--s-sel-border); color: var(--s-dark); }
html[data-mx-theme="dark"] body.mx-studio .autosave-status.ok { color: var(--s-dark); }

/* ---- category rail ------------------------------------------------------ */
html[data-mx-theme="dark"] body.mx-studio #cat-rail { background: var(--s-surface); border-right-color: var(--s-line); }
html[data-mx-theme="dark"] body.mx-studio #cat-rail .cat-btn { color: var(--s-muted); }
html[data-mx-theme="dark"] body.mx-studio #cat-rail .cat-btn:hover { background: var(--s-well); color: var(--s-text); }

/* ---- content panel: free.css literals that survive the token cascade ---- */
html[data-mx-theme="dark"] body.mx-studio .ctl-group h3 { color: var(--s-dark); border-bottom-color: var(--s-line); }
html[data-mx-theme="dark"] body.mx-studio .ctl-check { color: var(--s-text); }
html[data-mx-theme="dark"] body.mx-studio .ctl-label { color: var(--s-muted); }
html[data-mx-theme="dark"] body.mx-studio .ctl-hint { color: var(--s-muted); }
html[data-mx-theme="dark"] body.mx-studio .slider-label b { color: var(--s-dark); }
html[data-mx-theme="dark"] body.mx-studio .frame-lbl,
html[data-mx-theme="dark"] body.mx-studio .size-unit,
html[data-mx-theme="dark"] body.mx-studio .shape-size-hint,
html[data-mx-theme="dark"] body.mx-studio .sp-f,
html[data-mx-theme="dark"] body.mx-studio .sp-c { color: var(--s-muted); }

/* free.css styles input[type=text] + select with a BARE selector; textareas and
   number/search inputs are not covered there at all (browser-default white).
   Scoped to body.mx-studio rather than to a container ON PURPOSE: js/laser-studio.js
   REPARENTS sections at runtime (#order-notes moves out of #free-controls into the
   #mx-notes-pin), so a container-scoped rule silently misses whatever moved. Form
   controls are HTML — none of these can exist inside the artboard's SVG.
   !important because 16 of these controls (#order-notes, #item-label, #venue-search,
   the cruise + size fields …) hardcode background:#fff in a style="" attribute, and an
   inline style beats specificity. A text/number/search field is ALWAYS chrome — it can
   never be artwork and can never live inside the SVG — so this is safe to state flatly.
   input[type=color] is deliberately NOT in this list: those wells show a chosen colour. */
html[data-mx-theme="dark"] body.mx-studio input[type="text"],
html[data-mx-theme="dark"] body.mx-studio input[type="number"],
html[data-mx-theme="dark"] body.mx-studio input[type="search"],
html[data-mx-theme="dark"] body.mx-studio select,
html[data-mx-theme="dark"] body.mx-studio textarea {
  background: var(--s-well) !important; border-color: var(--s-line) !important; color: var(--s-text) !important;
}
html[data-mx-theme="dark"] body.mx-studio input:focus,
html[data-mx-theme="dark"] body.mx-studio select:focus,
html[data-mx-theme="dark"] body.mx-studio textarea:focus {
  border-color: var(--s-brand); box-shadow: 0 0 0 3px rgba(140,192,161,.30);
}
html[data-mx-theme="dark"] body.mx-studio .fbtn { background: var(--s-well); border-color: var(--s-line); color: var(--s-text); }
html[data-mx-theme="dark"] body.mx-studio .fbtn:hover { background: var(--s-surface); border-color: var(--s-brand); }
html[data-mx-theme="dark"] body.mx-studio .fbtn-primary,
html[data-mx-theme="dark"] body.mx-studio .fbtn-primary:hover { background: var(--s-brand); border-color: var(--s-brand); color: #fff; }
html[data-mx-theme="dark"] body.mx-studio .mode-card,
html[data-mx-theme="dark"] body.mx-studio .preset-btn,
html[data-mx-theme="dark"] body.mx-studio .occasion-btn,
html[data-mx-theme="dark"] body.mx-studio .marker-btn,
html[data-mx-theme="dark"] body.mx-studio .icon-cell,
html[data-mx-theme="dark"] body.mx-studio .label-edit,
html[data-mx-theme="dark"] body.mx-studio .tier-row,
html[data-mx-theme="dark"] body.mx-studio .golf-draw-btns button,
html[data-mx-theme="dark"] body.mx-studio .golf-draw-active,
html[data-mx-theme="dark"] body.mx-studio .golf-draw-active button,
html[data-mx-theme="dark"] body.mx-studio .color-pick input[type="color"],
html[data-mx-theme="dark"] body.mx-studio .marker-color-row input[type="color"],
html[data-mx-theme="dark"] body.mx-studio .golf-feat-row .golf-color,
html[data-mx-theme="dark"] body.mx-studio .tier-head input[type="color"],
html[data-mx-theme="dark"] body.mx-studio .sp-c input[type="color"] {
  background: var(--s-well); border-color: var(--s-line); color: var(--s-text);
}
html[data-mx-theme="dark"] body.mx-studio .mode-card:hover,
html[data-mx-theme="dark"] body.mx-studio .preset-btn:hover,
html[data-mx-theme="dark"] body.mx-studio .occasion-btn:hover,
html[data-mx-theme="dark"] body.mx-studio .marker-btn:hover,
html[data-mx-theme="dark"] body.mx-studio .golf-draw-btns button:hover,
html[data-mx-theme="dark"] body.mx-studio .icon-cell:hover { border-color: var(--s-brand); background: var(--s-tint); }
html[data-mx-theme="dark"] body.mx-studio .mode-card.active,
html[data-mx-theme="dark"] body.mx-studio .occasion-btn.active,
html[data-mx-theme="dark"] body.mx-studio .golf-draw-btns button.active { background: var(--s-tint); border-color: var(--s-brand); color: var(--s-dark); }
html[data-mx-theme="dark"] body.mx-studio .golf-draw-active #golf-draw-finish { background: var(--s-brand); border-color: var(--s-brand); color: #fff; }
html[data-mx-theme="dark"] body.mx-studio .golf-draw-item:hover { background: var(--s-well); }
html[data-mx-theme="dark"] body.mx-studio .golf-draw-item .gd-del { color: var(--s-danger); }
html[data-mx-theme="dark"] body.mx-studio .mode-name { color: var(--s-text); }
html[data-mx-theme="dark"] body.mx-studio .mode-desc { color: var(--s-muted); }
html[data-mx-theme="dark"] body.mx-studio .style-tile { background: var(--s-well); }
html[data-mx-theme="dark"] body.mx-studio .style-tile:hover { border-color: var(--s-line); }
html[data-mx-theme="dark"] body.mx-studio .style-tile .nm { color: var(--s-muted); }
/* swatch OUTLINES only — the fills inside are artwork previews set inline by JS */
html[data-mx-theme="dark"] body.mx-studio .topo-swatch,
html[data-mx-theme="dark"] body.mx-studio .theme-swatch { border-color: var(--s-line); }
html[data-mx-theme="dark"] body.mx-studio #search-results,
html[data-mx-theme="dark"] body.mx-studio .slot-results { background: var(--s-surface); border-color: var(--s-line); }
html[data-mx-theme="dark"] body.mx-studio #search-results li,
html[data-mx-theme="dark"] body.mx-studio .slot-results li { border-bottom-color: var(--s-line); color: var(--s-text); }
html[data-mx-theme="dark"] body.mx-studio #search-results li:hover,
html[data-mx-theme="dark"] body.mx-studio .slot-results li:hover { background: var(--s-tint); }
html[data-mx-theme="dark"] body.mx-studio #search-results li .res-type,
html[data-mx-theme="dark"] body.mx-studio .slot-row .slot-title { color: var(--s-dark); }
html[data-mx-theme="dark"] body.mx-studio .slot-row { border-color: var(--s-line); }
html[data-mx-theme="dark"] body.mx-studio .picked,
html[data-mx-theme="dark"] body.mx-studio .slot-picked { background: var(--s-tint); color: var(--s-dark); }

/* ---- the item inspector (#text-popup) — duplicated in studio.css AND in
   both pages' inline <style>; this one block outranks both --------------- */
html[data-mx-theme="dark"] body.mx-studio #text-popup { background: var(--s-surface); border-color: var(--s-line); color: var(--s-text); }
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-empty,
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-lab { color: var(--s-muted); }
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-empty-title,
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-val,
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-title { color: var(--s-text); }
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-empty-ico { background: var(--s-well); }
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-empty-ico svg { color: var(--s-faint); }
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-ico { color: var(--s-muted); }
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-ico:hover { background: var(--s-well); color: var(--s-text); }
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-ico-danger:hover { background: var(--s-danger-soft); color: var(--s-danger); }
html[data-mx-theme="dark"] body.mx-studio #text-popup #tp-pin.on { background: var(--s-tint); border-color: var(--s-sel-border); color: var(--s-dark); }
html[data-mx-theme="dark"] body.mx-studio #text-popup textarea#tp-text,
html[data-mx-theme="dark"] body.mx-studio #text-popup select#tp-font,
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-weight,
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-action,
html[data-mx-theme="dark"] body.mx-studio #text-popup input[type=color]#tp-color {
  background: var(--s-well); border-color: var(--s-line); color: var(--s-text);
}
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-seg button { background: var(--s-well); border-color: var(--s-line); color: var(--s-muted); }
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-weight.on,
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-seg button.on { background: var(--s-tint); border-color: var(--s-sel-border); color: var(--s-dark); }
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-action:hover { background: var(--s-surface); border-color: var(--s-brand); }
html[data-mx-theme="dark"] body.mx-studio #text-popup textarea#tp-text:focus { border-color: var(--s-brand); }
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-sep { background: var(--s-line); }
html[data-mx-theme="dark"] body.mx-studio #text-popup .tp-swatches button.on { outline-color: var(--s-dark); }

/* ---- workspace overlays (all plain HTML — never serialised into an export) */
html[data-mx-theme="dark"] body.mx-studio #poster-status { background: rgba(21,25,28,.94); border-color: var(--s-line); color: var(--s-text); }
html[data-mx-theme="dark"] body.mx-studio #poster-status.no-spin { background: rgba(21,25,28,.96); }
html[data-mx-theme="dark"] body.mx-studio #poster-status.status-error { color: var(--s-danger); }
html[data-mx-theme="dark"] body.mx-studio #poster-status .ps-bar { background: rgba(255,255,255,.12); }
html[data-mx-theme="dark"] body.mx-studio .fspinner { border-color: var(--s-line); border-top-color: var(--s-brand); }
html[data-mx-theme="dark"] body.mx-studio #free-foot { color: var(--s-faint); }
html[data-mx-theme="dark"] body.mx-studio #free-foot a { color: var(--s-muted); }

/* ---- the per-tab help card ---------------------------------------------
   .mx-help styles come from a <style> js/laser-lake.js injects into <head> at
   runtime, i.e. AFTER this file in the cascade — but those rules are single-class
   (0,1,0) and these are (0,3,2), so specificity wins and no !important is needed.
   .mx-help-thumb keeps its own #20303c poster frame: that is video artwork. */
html[data-mx-theme="dark"] body.mx-studio .mx-help { background: var(--s-well); border-color: var(--s-line); }
html[data-mx-theme="dark"] body.mx-studio .mx-help-cap { color: var(--s-text); }
html[data-mx-theme="dark"] body.mx-studio .mx-help-cap b { color: var(--s-text); }
html[data-mx-theme="dark"] body.mx-studio .mx-help-cap .w { color: var(--s-dark); }

/* ---- surfaces whose colour lives in an INLINE style="" attribute ---------
   An inline style beats every stylesheet rule regardless of specificity, so
   !important is the only lever here. Still paint-only, still gated, still
   outside the artboard. Kept to this short, named list — if it grows, the
   markup should be moved into a stylesheet instead. */
html[data-mx-theme="dark"] body.mx-studio #license-box {
  background: var(--s-well) !important; border-color: var(--s-line) !important; color: var(--s-muted) !important;
}
html[data-mx-theme="dark"] body.mx-studio #license-box b { color: var(--s-text) !important; }
html[data-mx-theme="dark"] body.mx-studio #license-box a { color: var(--s-dark) !important; }
/* the print preview's checkerboard is a TRANSPARENCY checker, not artwork — a dark
   checker reads the same way and stops a white slab sitting in the dark panel. The
   preview IMAGE painted on top of it is untouched. */
html[data-mx-theme="dark"] body.mx-studio #print-preview {
  background: #1b2024 repeating-conic-gradient(#232a2f 0% 25%, #1b2024 0% 50%) 50%/14px 14px !important;
  border-color: var(--s-line) !important;
}

/* ---- DELIBERATELY LEFT LIGHT ------------------------------------------
   The Decor (.marker-btn[data-marker]) and Ornament (button[data-ks-shape]) grids
   build their tiles with an inline style="" carrying background:#fff, and their
   thumbnails are ARTWORK previews drawn with dark strokes on a cream material fill.
   Darkening those tiles would erase the preview — the same reason the artboard
   stays light. They are left alone on purpose; do not "fix" them. */

/* ---- the toggle button itself ------------------------------------------
   Tri-state now (auto/light/dark, js/studio-theme.js sets data-mode): whenever
   the DARK chrome is showing — an explicit Dark pick or Auto on a dark system —
   the button reads as engaged. */
html[data-mx-theme="dark"] body.mx-studio #theme-toggle { background: var(--s-tint); color: var(--s-dark); }