/* bss-surface: surface layer for the sign studio. color, gradient, shadow,
   glass and motion only. sizes, layout and 44px targets stay as in index.html.
   tokens live on the studio root (body), never on the document root. */

body {
  --bss-gold: #d4a020;
  --bss-gold-dim: #8a6a14;
  --bss-gold-deep: #7a5f14;
  --bss-teal: #2fc8c8;
  --bss-teal-dim: #1d7d7d;
  --bss-ink: #e8e6df;
  --bss-dim: #a8a499;
  --bss-faint: #b0aca0;
  --bss-panel: #14171c;
  --bss-panel-2: #191d23;
  --bss-line: #2a2e35;
  --bss-radius-card: 12px;
  --bss-radius-ctl: 8px;
  --bss-shadow-drop: 0 4px 12px rgba(0, 0, 0, 0.4);
  --bss-shadow-glow-gold: 0 0 20px rgba(212, 160, 32, 0.3);
  --bss-shadow-glow-teal: 0 0 20px rgba(47, 200, 200, 0.3);
  --bss-hi: rgba(255, 255, 255, 0.08);
  --bss-lo: rgba(0, 0, 0, 0.3);
  --bss-sheen: rgba(255, 255, 255, 0.14);
  --bss-lamp: rgba(255, 255, 255, 0.07);
  --bss-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  --bss-glass: rgba(20, 23, 28, 0.88);
  --bss-glass-dialog: rgba(25, 29, 35, 0.9);
  --bss-glass-edge: rgba(255, 255, 255, 0.14);
  --bss-noise-alpha: 0.1;
  --bss-btn-top: #43350f;
  --bss-btn-bot: #2b220a;
  --bss-metal-1: #3a3f48;
  --bss-metal-2: #2a2e35;
  --bss-metal-3: #1f2228;
  --bss-bar-top: #181b20;
  --bss-bar-mid: #101318;
  --bss-bar-bot: #0d0d0d;
  --bss-host-glow: #d4a020;
  --bss-glow-mix: 55%;
  --bss-sweep-ms: 400ms;
  --bss-press-ms: 80ms;
}

html[data-theme="light"] body {
  --bss-ink: #26241f;
  --bss-dim: #3f3c37;
  --bss-faint: #4e4b44;
  --bss-panel: #f4f1e9;
  --bss-panel-2: #ece7d8;
  --bss-line: #b9b3a4;
  --bss-shadow-drop: 0 3px 10px rgba(60, 50, 20, 0.18);
  --bss-shadow-glow-gold: 0 0 16px rgba(122, 95, 20, 0.28);
  --bss-shadow-glow-teal: 0 0 16px rgba(11, 95, 91, 0.25);
  --bss-hi: rgba(255, 255, 255, 0.8);
  --bss-lo: rgba(60, 50, 20, 0.16);
  --bss-sheen: rgba(255, 255, 255, 0.6);
  --bss-lamp: rgba(255, 255, 255, 0.7);
  --bss-pressed: inset 0 2px 4px rgba(60, 50, 20, 0.25);
  --bss-glass: rgba(242, 240, 234, 0.9);
  --bss-glass-dialog: rgba(244, 241, 233, 0.94);
  --bss-glass-edge: rgba(255, 255, 255, 0.8);
  --bss-noise-alpha: 0.06;
  --bss-btn-top: #f6f1e2;
  --bss-btn-bot: #e0d8c0;
  --bss-metal-1: #fbf9f2;
  --bss-metal-2: #e4dfd0;
  --bss-metal-3: #d3ccb8;
  --bss-bar-top: #f4f1e9;
  --bss-bar-mid: #ece9e0;
  --bss-bar-bot: #e2dfd5;
  --bss-glow-mix: 0%;
}

body[data-host="cristine"],
body[data-host="grace"],
body[data-host="preston"] {
  --bss-host-glow: #e0a24a;
}

body[data-host="fiona"],
body[data-host="maya"],
body[data-host="alien"],
body[data-host="luke"],
body[data-host="wes"] {
  --bss-host-glow: #2fc8c8;
}

body[data-host="jay"] {
  --bss-host-glow: #d4a020;
}

/* primary button: coat over a bevel, specular stripe sweeps on hover */
html[data-theme] button.action {
  background-color: transparent;
  background-image:
    linear-gradient(
      105deg,
      transparent 38%,
      var(--bss-sheen) 50%,
      transparent 62%
    ),
    conic-gradient(
      from 200deg at 50% 140%,
      var(--bss-hi),
      transparent 22%,
      var(--bss-hi) 50%,
      transparent 78%,
      var(--bss-hi)
    ),
    linear-gradient(180deg, var(--bss-btn-top) 0%, var(--bss-btn-bot) 100%);
  background-size:
    260% 100%,
    100% 100%,
    100% 100%;
  background-position:
    100% 0,
    0 0,
    0 0;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 var(--bss-hi),
    inset 0 -1px 0 var(--bss-lo),
    0 1px 2px var(--bss-lo),
    var(--bss-shadow-drop);
  text-shadow: 0 0 8px
    color-mix(in srgb, var(--bss-host-glow) var(--bss-glow-mix), transparent);
  transition:
    border-color 0.15s ease,
    background-position var(--bss-sweep-ms) ease,
    box-shadow 0.2s ease,
    transform var(--bss-press-ms) ease;
}

html[data-theme] button.action:hover:not(:disabled) {
  background-position:
    0 0,
    0 0,
    0 0;
  box-shadow:
    inset 0 1px 0 var(--bss-hi),
    inset 0 -1px 0 var(--bss-lo),
    var(--bss-shadow-drop),
    var(--bss-shadow-glow-gold);
}

html[data-theme] button.action:active:not(:disabled) {
  box-shadow: var(--bss-pressed);
}

/* secondary controls: machined bevel, no sweep */
html[data-theme] button.mini {
  background-image: linear-gradient(180deg, var(--bss-hi) 0%, transparent 60%);
  box-shadow:
    inset 0 1px 0 var(--bss-hi),
    inset 0 -1px 0 var(--bss-lo),
    0 1px 2px var(--bss-lo);
  transition:
    border-color 0.15s ease,
    box-shadow 0.2s ease,
    transform var(--bss-press-ms) ease;
}

html[data-theme] button.mini:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 var(--bss-hi),
    inset 0 -1px 0 var(--bss-lo),
    0 1px 2px var(--bss-lo),
    var(--bss-shadow-glow-gold);
}

html[data-theme] button.mini:active:not(:disabled) {
  box-shadow: var(--bss-pressed);
}

html[data-theme] button.mini[aria-pressed="true"] {
  box-shadow:
    inset 0 1px 0 var(--bss-hi),
    inset 0 -1px 0 var(--bss-lo),
    var(--bss-shadow-glow-gold);
}

/* host picker chip */
html[data-theme] #host-btn {
  box-shadow:
    inset 0 1px 0 var(--bss-hi),
    inset 0 -1px 0 var(--bss-lo),
    var(--bss-shadow-drop);
}

/* deck headers: soft overhead lamp across the strip */
html[data-theme] details.deck-group > summary {
  background-image: linear-gradient(
    180deg,
    var(--bss-lamp) 0%,
    transparent 100%
  );
  box-shadow: inset 0 1px 0 var(--bss-hi);
  transition: box-shadow 0.2s ease;
}

html[data-theme] details.deck-group > summary:hover {
  box-shadow:
    inset 0 1px 0 var(--bss-hi),
    inset 0 -1px 0 var(--bss-gold-dim);
}

/* deck cards: area light from above, elevation stack, glow on hover */
html[data-theme] .deck-card {
  background-image: radial-gradient(
    ellipse 120% 80% at 50% 0%,
    var(--bss-lamp) 0%,
    transparent 62%
  );
  box-shadow:
    inset 0 1px 0 var(--bss-hi),
    inset 0 -1px 0 var(--bss-lo),
    0 1px 2px var(--bss-lo),
    var(--bss-shadow-drop);
  transition:
    border-color 0.15s ease,
    box-shadow 0.2s ease,
    transform var(--bss-press-ms) ease;
}

html[data-theme] .deck-card:hover:not([aria-disabled="true"]) {
  box-shadow:
    inset 0 1px 0 var(--bss-hi),
    inset 0 -1px 0 var(--bss-lo),
    var(--bss-shadow-drop),
    var(--bss-shadow-glow-gold);
}

html[data-theme] .deck-card:active:not([aria-disabled="true"]) {
  box-shadow: var(--bss-pressed);
}

html[data-theme] .deck-card[aria-current="true"] {
  box-shadow:
    inset 0 1px 0 var(--bss-hi),
    var(--bss-shadow-drop),
    var(--bss-shadow-glow-gold);
}

/* caption pill: glass with noise grain, one blur layer */
html[data-theme] #sign-caption {
  background-color: var(--bss-glass);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--bss-hi) 0%, transparent 55%);
  background-size:
    120px 120px,
    100% 100%;
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 var(--bss-glass-edge),
    inset 0 -1px 0 var(--bss-lo),
    var(--bss-shadow-drop);
  text-shadow: 0 0 10px
    color-mix(
      in srgb,
      var(--host-glow, var(--bss-host-glow)) var(--bss-glow-mix),
      transparent
    );
}

html[data-theme="light"] #sign-caption {
  background-color: var(--bss-glass);
}

html[data-theme] #sign-caption.show {
  box-shadow:
    inset 0 1px 0 var(--bss-glass-edge),
    var(--bss-shadow-drop),
    var(--bss-shadow-glow-gold);
}

/* help dialog: glass sheet over the scrim, single blur layer while open */
html[data-theme] #sign-feedback-dialog {
  background-color: var(--bss-glass-dialog);
  background-image: linear-gradient(180deg, var(--bss-hi) 0%, transparent 40%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 var(--bss-glass-edge),
    inset 0 -1px 0 var(--bss-lo),
    0 2px 4px var(--bss-lo),
    0 16px 40px rgba(0, 0, 0, 0.45);
}

html[data-theme] #sign-feedback-dialog h3 {
  text-shadow: 0 0 8px
    color-mix(in srgb, var(--bss-host-glow) var(--bss-glow-mix), transparent);
}

/* status bar: reflected ambient light along the top edge */
html[data-theme] #statusbar {
  background-image: linear-gradient(
    180deg,
    var(--bss-bar-top) 0%,
    var(--bss-bar-mid) 50%,
    var(--bss-bar-bot) 100%
  );
  box-shadow:
    inset 0 1px 0 var(--bss-hi),
    inset 0 -1px 0 var(--bss-lo);
}

/* version pill: machined metal edge */
html[data-theme] #version {
  background-image: conic-gradient(
    from 45deg,
    var(--bss-metal-2) 0deg,
    var(--bss-metal-1) 90deg,
    var(--bss-metal-2) 180deg,
    var(--bss-metal-3) 270deg,
    var(--bss-metal-2) 360deg
  );
}

/* asl clock pill: same metal as the version pill, light inner edge */
html[data-theme] #asl-clock .clk-pill {
  background-color: transparent;
  background-image: conic-gradient(
    from 45deg,
    var(--bss-metal-2) 0deg,
    var(--bss-metal-1) 90deg,
    var(--bss-metal-2) 180deg,
    var(--bss-metal-3) 270deg,
    var(--bss-metal-2) 360deg
  );
  box-shadow:
    inset 0 1px 0 var(--bss-hi),
    inset 0 -1px 0 var(--bss-lo),
    0 1px 2px var(--bss-lo);
}

/* footer chips: ready, camera, clock and version share one surface.
   replaces the per-chip metal (version, clock) so the bar reads as one set */
html[data-theme] #run-state,
html[data-theme] #statusbar #preset-cycle,
html[data-theme] #asl-clock,
html[data-theme] #version {
  background-color: var(--bss-panel-2);
  background-image: linear-gradient(180deg, var(--bss-hi) 0%, transparent 60%);
  box-shadow:
    inset 0 1px 0 var(--bss-hi),
    inset 0 -1px 0 var(--bss-lo);
}
html[data-theme] #asl-clock .clk-pill {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

/* the ready chip: engine state at a glance, the door to the engine panel.
   loading sweeps, ready glows teal with a breathing led, playing glows gold */
html[data-theme] #run-state {
  cursor: pointer;
  transition: transform 120ms ease;
}
html[data-theme] #run-state:hover {
  transform: translateY(-1px);
}
html[data-theme] #run-state .led {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}
html[data-theme] #run-state[data-s="loading"] {
  color: var(--uipack-dim);
  background-image:
    linear-gradient(
      100deg,
      transparent 30%,
      color-mix(in srgb, var(--uipack-teal) 22%, transparent) 50%,
      transparent 70%
    ),
    linear-gradient(180deg, var(--bss-hi) 0%, transparent 60%);
  background-size:
    240% 100%,
    100% 100%;
  animation: bss-run-sweep 1.4s linear infinite;
}
html[data-theme] #run-state[data-s="loading"] .led {
  background: var(--uipack-dim);
}
html[data-theme] #run-state[data-s="ready"],
html[data-theme] #run-state[data-s="paused"] {
  color: var(--uipack-teal);
  border-color: color-mix(in srgb, var(--uipack-teal) 60%, var(--bss-line));
  text-shadow: 0 0 8px color-mix(in srgb, var(--uipack-teal) 45%, transparent);
}
html[data-theme] #run-state[data-s="ready"] .led {
  background: #3ddc97;
  box-shadow:
    0 0 0 3px rgba(61, 220, 151, 0.18),
    0 0 10px rgba(61, 220, 151, 0.6);
  animation: bss-led-breathe 2.4s ease-in-out infinite;
}
html[data-theme] #run-state[data-s="playing"] {
  color: var(--uipack-gold);
  border-color: color-mix(in srgb, var(--uipack-gold) 60%, var(--bss-line));
  text-shadow: 0 0 8px color-mix(in srgb, var(--uipack-gold) 45%, transparent);
}
html[data-theme] #run-state[data-s="playing"] .led {
  background: var(--uipack-gold);
  box-shadow: 0 0 10px color-mix(in srgb, var(--uipack-gold) 70%, transparent);
}
html[data-theme="light"] #run-state[data-s] {
  text-shadow: none;
}
html[data-theme="light"] #run-state[data-s="ready"] .led {
  background: #12925d;
  box-shadow: 0 0 0 3px rgba(18, 146, 93, 0.16);
}
@keyframes bss-run-sweep {
  from {
    background-position:
      120% 0,
      0 0;
  }
  to {
    background-position:
      -120% 0,
      0 0;
  }
}
@keyframes bss-led-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(61, 220, 151, 0.18),
      0 0 10px rgba(61, 220, 151, 0.6);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(61, 220, 151, 0.08),
      0 0 16px rgba(61, 220, 151, 0.85);
  }
}

/* reduced motion: no sweeps, no transitions, the highlight rests mid-surface */
@media (prefers-reduced-motion: reduce) {
  html[data-theme] #run-state,
  html[data-theme] #run-state .led {
    transition: none;
    animation: none;
  }
  html[data-theme] button.action,
  html[data-theme] button.mini,
  html[data-theme] .deck-card,
  html[data-theme] details.deck-group > summary,
  html[data-theme] #sign-caption,
  html[data-theme] #sign-feedback-dialog {
    transition: none;
    animation: none;
  }

  html[data-theme] button.action,
  html[data-theme] button.action:hover:not(:disabled) {
    background-position:
      50% 0,
      0 0,
      0 0;
  }
}