/* css/themes.css — shared page, figure and control styling for every theme. */

/* ---------- shared: page key-light + drafting dots (A's v10.1) ---------- */
body {
  background:
    radial-gradient(1000px 460px at 50% -120px, color-mix(in srgb, var(--anatomy-lit) 10%, transparent), transparent 72%),
    var(--page-bg);
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--anatomy-lo) 26%, transparent) 1px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000, transparent 85%);
}
* { scrollbar-width: thin; scrollbar-color: var(--anatomy-faint) transparent; }

.panel-box, .field-detail {
  border-radius: 11px;
  box-shadow: inset 0 1px 0 var(--hl), 0 1px 1px var(--drop-2), 0 10px 22px -14px var(--drop);
}
.iso-card { border-radius: 14px; box-shadow: inset 0 1px 0 var(--hl), 0 2px 3px var(--drop-2), 0 24px 44px -22px var(--drop); }
.iso-card:focus-visible { box-shadow: 0 0 0 2px var(--anatomy-lit), 0 24px 44px -22px var(--drop); }
.corner-bar-bottom { box-shadow: inset 0 1px 0 var(--hl); }

.stage-wrap {
  background:
    radial-gradient(ellipse 46% 11% at 50% 69%, var(--floor), transparent 72%),
    radial-gradient(ellipse 70% 60% at 50% 55%, color-mix(in srgb, var(--anatomy-lit) 14%, transparent), transparent 72%);
}
.stage-wrap::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(30deg, var(--grid) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(-30deg, var(--grid) 0 1px, transparent 1px 36px);
  -webkit-mask-image: radial-gradient(ellipse 50% 40% at 50% 64%, #000 10%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 40% at 50% 64%, #000 10%, transparent 100%);
}

/* gradient faces and tactile controls */
html:root .iso-top,
html:root .nb-top { fill: url(#kg-top) var(--anatomy-top); }
html:root .iso-s0 { fill: url(#kg-s0) var(--anatomy-shade-0); }
html:root .iso-s1,
html:root .nb-side { fill: url(#kg-s1) var(--anatomy-shade-1); }
html:root .iso-s2 { fill: url(#kg-s2) var(--anatomy-shade-2); }
html:root .iso-s3 { fill: url(#kg-s3) var(--anatomy-shade-3); }
html:root .iso-lit-top,
html:root .nb-sel .nb-top,
html:root .txm.sel .nb-top { fill: url(#kg-lit-top) var(--anatomy-lit-top); }
html:root .iso-lit-side { fill: url(#kg-lit-side) var(--anatomy-lit-shade); }
html:root .nb-blue { fill: url(#kg-blue) var(--anatomy-blue); }
html:root .nb-red { fill: url(#kg-red) var(--anatomy-red); }

html:root .ctrl-btn,
html:root .tk,
html:root .hex-cell {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 84%, var(--anatomy-top)), color-mix(in srgb, var(--panel-bg) 92%, var(--anatomy-shade-1)));
  box-shadow: inset 0 1px 0 var(--hl), 0 1px 1.5px var(--drop-2);
}
html:root .ctrl-btn.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--anatomy-lit) 14%, var(--panel-bg)), color-mix(in srgb, var(--anatomy-lit) 6%, var(--panel-bg)));
  box-shadow: inset 0 1px 0 var(--hl), 0 0 0 3px color-mix(in srgb, var(--anatomy-lit) 14%, transparent);
}
html:root .station-pill {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-bg) 84%, var(--anatomy-top)), var(--panel-bg));
  box-shadow: inset 0 1px 0 var(--hl), 0 1px 1.5px var(--drop-2);
}
html:root .station-pill.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--anatomy-lit) 9%, var(--anatomy-card)), var(--anatomy-card) 70%);
  box-shadow: inset 3px 0 0 var(--anatomy-lit), inset 0 1px 0 var(--hl), 0 10px 22px -12px color-mix(in srgb, var(--anatomy-lit) 60%, transparent);
}
html:root .byte-bar { height: 32px; border-radius: 8px; box-shadow: inset 0 1px 3px var(--drop), 0 1px 0 var(--hl); }

/* ---------- reduced motion: no idle tour, no sfx motion, still readable ---------- */
@media (prefers-reduced-motion: reduce) {
  #live-chip.on::before { animation: none; }
  .lv-flash { animation: none; }
}

/* ---------- phone layer: ≥44px thumb targets and ≥11px text (rule 5/7) ---------- */
@media (max-width: 639px) {
  /* the numbered tray callouts stack above the figure instead of overlapping it */
  .callout-row { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .callout-pill { flex: 0 0 auto; min-width: 128px; scroll-snap-align: start; }
  #layer-sketch { display: none; }
  .ctrl-btn,
  .hud .ctrl-btn,
  .dna-actions .ctrl-btn,
  .theme-group .ctrl-btn,
  .gf-pill { min-height: 44px; }
  #fd-jump-btn { min-height: 44px !important; font-size: 11px !important; }
  .ctrl-btn { padding-block: 8px; }
  .hex-cell { min-height: 44px; min-width: 40px; }
  .tk { min-height: 44px; }
  .lv-row, .tx-row, .fl-row { min-height: 44px; align-items: center; }
  .row-jump { min-height: 44px; display: inline-flex; align-items: center; }
  .station-pill { min-height: 56px; }
  /* the smallest text stays readable: the byte-bar's 8.5px segment labels hide
     on phones — the field list right below carries the same information */
  .byte-seg span { display: none; }
  .metric-sub, .slider-sub, .station-pill-sub, .station-pill-code,
  .fl-row .fn small, .byte-ruler, .dim, .field-iso-az, .field-iso-cap,
  .cb-right, .callout-pill small, #zoom-lbl,
  .station-pill-sub code { font-size: 11px; }
  .nodeT, .nb-lbl, .tx-lbl, .nb-note, .tx-note { font-size: 11px; }
}