/* ==========================================================================
   RITHM · STAGE — Component classes
   --------------------------------------------------------------------------
   Plain CSS classes that mirror the React primitives in src/proto/ui.jsx.
   Drop these on plain Django templates — no JS required for the look.
   ========================================================================== */

/* ── Panel ──────────────────────────────────────────────────────────────── */

.stage-panel {
  position: relative;
  background: var(--stage-bevel-up);
  border: 1px solid #000;
  border-radius: var(--stage-radius-panel);
  box-shadow: var(--stage-shadow-up);
}

.stage-panel--inset {
  background: var(--stage-bevel-down);
  box-shadow: var(--stage-shadow-down);
}

.stage-panel--flat {
  background: var(--stage-panel);
  box-shadow: inset 0 1px 0 rgba(51, 51, 58, 0.2), inset 0 -1px 0 #000;
}

/* ── Screw (drop inside any .stage-panel with position:relative) ────────── */

.stage-screw {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6A6A72, #1A1A20 70%);
  box-shadow: inset 0 -1px 1px #000, 0 1px 0 var(--stage-edge);
  position: relative;
  flex-shrink: 0;
}

.stage-screw::before,
.stage-screw::after {
  content: '';
  position: absolute;
  top: 50%; left: 12%; right: 12%;
  height: 1px;
  background: #0A0A0E;
}

.stage-screw::before { transform: translateY(-0.5px) rotate(35deg); }
.stage-screw::after  { transform: translateY(-0.5px) rotate(-55deg); }

.stage-screw--slot::after { display: none; }
.stage-screw--slot::before { transform: translateY(-0.5px) rotate(-30deg); }

/* Drop into a .stage-panel — four corner screws */
.stage-panel--screws::before,
.stage-panel--screws::after,
.stage-panel--screws > .stage-corner-tl,
.stage-panel--screws > .stage-corner-br {
  /* fallback: use the .stage-corner-screws helper below */
}

.stage-corner-screws {
  position: absolute; inset: 0; pointer-events: none;
}
.stage-corner-screws > .stage-screw {
  position: absolute;
}
.stage-corner-screws > .stage-screw:nth-child(1) { top: 6px;    left: 6px; }
.stage-corner-screws > .stage-screw:nth-child(2) { top: 6px;    right: 6px; }
.stage-corner-screws > .stage-screw:nth-child(3) { bottom: 6px; left: 6px; }
.stage-corner-screws > .stage-screw:nth-child(4) { bottom: 6px; right: 6px; }

/* ── LED ────────────────────────────────────────────────────────────────── */

.stage-led {
  --led-color: var(--stage-led-green);
  --led-size: 8px;
  width: var(--led-size);
  height: var(--led-size);
  border-radius: 50%;
  background: var(--led-color);
  border: 1px solid transparent;
  flex-shrink: 0;
  box-shadow:
    0 0 var(--led-size) var(--led-color),
    0 0 calc(var(--led-size) * 2) color-mix(in srgb, var(--led-color) 40%, transparent),
    inset 0 0 2px rgba(255, 255, 255, 0.4);
}

.stage-led--off {
  background: color-mix(in srgb, var(--led-color) 15%, transparent);
  border-color: #000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}

.stage-led--pulse { animation: stage-pulse-led 1.6s ease-in-out infinite; }

.stage-led--amber { --led-color: var(--stage-amber); }
.stage-led--green { --led-color: var(--stage-led-green); }
.stage-led--blue  { --led-color: var(--stage-led-blue); }
.stage-led--red   { --led-color: var(--stage-led-red); }

.stage-led--sm    { --led-size: 6px; }
.stage-led--lg    { --led-size: 10px; }
.stage-led--xl    { --led-size: 12px; }

/* ── LCD readout ────────────────────────────────────────────────────────── */

.stage-lcd {
  --lcd-color: var(--stage-amber);
  --lcd-dim:   var(--stage-amber-dim);
  --lcd-tint:  rgba(255, 176, 32, 0.2);
  display: inline-block;
  padding: 8px 14px;
  min-width: 80px;
  border-radius: var(--stage-radius);
  border: 1px solid #000;
  background: radial-gradient(ellipse at center, #2A1A03 0%, #150C01 70%, #0A0500 100%);
  color: var(--lcd-color);
  font-family: var(--stage-font-lcd);
  box-shadow:
    inset 0 0 24px var(--lcd-tint),
    inset 0 1px 0 #000,
    0 1px 0 rgba(51, 51, 58, 0.2);
  line-height: 1;
}

.stage-lcd--blue {
  --lcd-color: var(--stage-led-blue);
  --lcd-dim:   rgba(74, 158, 255, 0.5);
  --lcd-tint:  rgba(74, 158, 255, 0.2);
  background: radial-gradient(ellipse at center, #021530 0%, #010A1F 70%, #000510 100%);
}

.stage-lcd--green {
  --lcd-color: var(--stage-led-green);
  --lcd-dim:   rgba(92, 224, 139, 0.5);
  --lcd-tint:  rgba(92, 224, 139, 0.2);
  background: radial-gradient(ellipse at center, #002a14 0%, #001a0b 70%, #000a04 100%);
}

.stage-lcd__label,
.stage-lcd__sub {
  font-family: var(--stage-font-lcd);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--lcd-dim);
  line-height: 1;
}

.stage-lcd__value {
  font-family: var(--stage-font-lcd);
  font-size: 22px;
  line-height: 1;
  text-align: right;
  color: var(--lcd-color);
  text-shadow:
    0 0 8px color-mix(in srgb, var(--lcd-color) 80%, transparent),
    0 0 16px color-mix(in srgb, var(--lcd-color) 40%, transparent);
  margin-top: 2px;
}

.stage-lcd__sub { margin-top: 2px; }

.stage-lcd--sm  { padding: 6px 10px; }
.stage-lcd--sm  .stage-lcd__value { font-size: 16px; }
.stage-lcd--lg  { padding: 10px 18px; }
.stage-lcd--lg  .stage-lcd__value { font-size: 32px; }
.stage-lcd--xl  { padding: 14px 22px; }
.stage-lcd--xl  .stage-lcd__value { font-size: 48px; }

/* ── Hardware button ────────────────────────────────────────────────────── */

.stage-hw-btn {
  --btn-color: var(--stage-amber);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(180deg, var(--stage-panel-hi) 0%, var(--stage-panel) 100%);
  color: var(--stage-ink);
  border: 1px solid #000;
  border-radius: var(--stage-radius);
  font-family: var(--stage-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
  cursor: pointer;
  transition: transform 0.08s, background 0.12s, color 0.12s;
  box-shadow: var(--stage-shadow-up);
  text-decoration: none;
}

.stage-hw-btn::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--btn-color) 15%, transparent);
  border: 1px solid #000;
}

.stage-hw-btn--no-indicator::before { display: none; }

.stage-hw-btn:hover {
  background: linear-gradient(180deg, #404048 0%, var(--stage-panel-hi) 100%);
}

.stage-hw-btn:active { transform: translateY(1px); }

.stage-hw-btn.stage-hw-btn--lit {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--btn-color) 13%, transparent) 0%,
      color-mix(in srgb, var(--btn-color) 7%, transparent) 50%,
      color-mix(in srgb, var(--btn-color) 3%, transparent) 100%);
  color: color-mix(in srgb, var(--btn-color) 25%, #fff);
  text-shadow: 0 0 6px color-mix(in srgb, var(--btn-color) 70%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--btn-color) 33%, transparent),
    inset 0 -1px 0 #000,
    0 0 12px color-mix(in srgb, var(--btn-color) 33%, transparent),
    0 0 24px color-mix(in srgb, var(--btn-color) 13%, transparent);
}

.stage-hw-btn.stage-hw-btn--lit:hover {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--btn-color) 22%, transparent) 0%,
      color-mix(in srgb, var(--btn-color) 13%, transparent) 50%,
      color-mix(in srgb, var(--btn-color) 7%, transparent) 100%);
  color: #fff;
}

.stage-hw-btn.stage-hw-btn--lit::before {
  background: var(--btn-color);
  border-color: transparent;
  box-shadow:
    0 0 6px var(--btn-color),
    0 0 12px color-mix(in srgb, var(--btn-color) 40%, transparent),
    inset 0 0 2px rgba(255, 255, 255, 0.4);
}

.stage-hw-btn--amber { --btn-color: var(--stage-amber); }
.stage-hw-btn--blue  { --btn-color: var(--stage-led-blue); }
.stage-hw-btn--green { --btn-color: var(--stage-led-green); }
.stage-hw-btn--red   { --btn-color: var(--stage-led-red); }

.stage-hw-btn--wide  { width: 100%; }
.stage-hw-btn--lg    { padding: 14px 26px; font-size: 13px; }

/* ── VU meter ──────────────────────────────────────────────────────────── */

.stage-vu {
  display: flex;
  gap: 2px;
  align-items: center;
  height: 12px;
  padding: 2px 4px;
  background: var(--stage-panel-deep);
  border: 1px solid #000;
  border-radius: 1px;
  box-shadow: inset 0 1px 2px #000;
}

.stage-vu__cell {
  flex: 1;
  height: 100%;
  background: rgba(92, 224, 139, 0.1);
}

.stage-vu__cell--on        { background: var(--stage-led-green); box-shadow: 0 0 4px rgba(92, 224, 139, 0.7); }
.stage-vu__cell--warn      { background: rgba(255, 176, 32, 0.1); }
.stage-vu__cell--warn.stage-vu__cell--on {
  background: var(--stage-amber);
  box-shadow: 0 0 4px rgba(255, 176, 32, 0.7);
}
.stage-vu__cell--danger    { background: rgba(255, 77, 77, 0.1); }
.stage-vu__cell--danger.stage-vu__cell--on {
  background: var(--stage-led-red);
  box-shadow: 0 0 4px rgba(255, 77, 77, 0.7);
}

/* ── Toggle (rocker switch) ────────────────────────────────────────────── */

.stage-toggle {
  --tog-color: var(--stage-amber);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.stage-toggle__track {
  width: 40px; height: 22px;
  background: linear-gradient(180deg, var(--stage-panel-lo), var(--stage-panel));
  border: 1px solid #000;
  border-radius: var(--stage-radius);
  position: relative;
  box-shadow: inset 0 1px 2px #000;
}

.stage-toggle__thumb {
  position: absolute;
  top: 1px; bottom: 1px;
  left: 1px;
  width: 20px;
  background: linear-gradient(180deg, var(--stage-edge), var(--stage-rail) 50%, #2A2A30);
  border: 1px solid #000;
  border-radius: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 #6A6A72;
  transition: left 0.15s;
}

.stage-toggle[aria-pressed="true"] .stage-toggle__thumb { left: 18px; }

.stage-toggle[aria-pressed="true"] .stage-toggle__thumb::after {
  content: '';
  position: absolute;
  top: 7px; left: 6px; right: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--tog-color);
  box-shadow: 0 0 6px var(--tog-color);
}

.stage-toggle__label {
  font-family: var(--stage-font-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--stage-mute-2);
}

.stage-toggle[aria-pressed="true"] .stage-toggle__label { color: var(--tog-color); }

/* ── Nameplate (engraved label) ────────────────────────────────────────── */

.stage-nameplate {
  display: inline-block;
  padding: 4px 10px;
  background: var(--stage-panel);
  border: 1px solid #000;
  border-radius: 1px;
  box-shadow: inset 0 1px 0 rgba(51, 51, 58, 0.2), inset 0 -1px 0 #000;
  font-family: var(--stage-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stage-mute-2);
  text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(255, 255, 255, 0.04);
}

/* ── Knob (decorative — not interactive in pure CSS) ───────────────────── */

.stage-knob {
  --knob-color: var(--stage-amber);
  --knob-value: 0.6;
  --knob-size: 64px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.stage-knob__dial {
  width: var(--knob-size);
  height: var(--knob-size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--stage-edge) 0%, #2A2A30 50%, var(--stage-panel-lo) 100%);
  box-shadow:
    inset 0 2px 3px #000,
    0 1px 0 var(--stage-edge),
    0 4px 8px rgba(0, 0, 0, 0.7),
    0 0 0 2px var(--stage-panel);
  position: relative;
}

.stage-knob__dial::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #4A4A52 0%, #1A1A20 80%);
  box-shadow: inset 0 1px 1px #000;
}

.stage-knob__indicator {
  position: absolute;
  top: 6px; left: 50%;
  width: 3px;
  height: calc(var(--knob-size) * 0.35);
  margin-left: -1.5px;
  background: var(--knob-color);
  border-radius: 1px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--knob-color) 80%, transparent);
  transform-origin: 50% calc(var(--knob-size) * 0.5 - 6px);
  /* angle = -135deg + value * 270deg */
  transform: rotate(calc(-135deg + var(--knob-value) * 270deg));
}

.stage-knob__label {
  font-family: var(--stage-font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--stage-mute);
}

/* ── Hairline (separator) ──────────────────────────────────────────────── */

.stage-hairline {
  height: 1px;
  background: #000;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
  border: none;
  margin: 0;
}

/* ── Logo plate (used in topbar and login/register hero) ───────────────── */

.stage-logo-plate {
  position: relative;
  display: inline-block;
  background: linear-gradient(180deg, var(--stage-panel-hi) 0%, var(--stage-panel) 50%, var(--stage-panel-lo) 100%);
  border: 1px solid #000;
  border-radius: var(--stage-radius-panel);
  padding: 8px 18px 8px 28px;
  box-shadow: inset 0 1px 0 var(--stage-edge), 0 1px 2px rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.stage-logo-plate__title {
  display: block;
  font-family: var(--stage-font-mono);
  font-size: 28px;
  font-weight: 800;
  color: #D8D8DE;
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.stage-logo-plate__sub {
  display: block;
  font-family: var(--stage-font-mono);
  font-size: 8px;
  color: var(--stage-mute);
  letter-spacing: 0.3em;
  margin-top: 2px;
}

.stage-logo-plate > .stage-screw:first-of-type { position: absolute; top: 4px; left: 4px; }
.stage-logo-plate > .stage-screw:last-of-type  { position: absolute; bottom: 4px; left: 4px; }

/* ── Heading scale (defaults inside .stage-scope) ─────────────────────── */

.stage-scope h1, .stage-scope .stage-h1 {
  font-family: var(--stage-font-mono);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  color: var(--stage-ink);
  letter-spacing: -0.03em;
  line-height: 1.0;
  margin: 0;
  text-shadow: 0 1px 0 #000;
}

.stage-scope h2, .stage-scope .stage-h2 {
  font-family: var(--stage-font-mono);
  font-size: 32px;
  font-weight: 800;
  color: var(--stage-ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}

.stage-scope h3, .stage-scope .stage-h3 {
  font-family: var(--stage-font-mono);
  font-size: 17px;
  font-weight: 800;
  color: var(--stage-ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.stage-scope p, .stage-scope .stage-body {
  font-family: var(--stage-font-mono-alt);
  font-size: 14px;
  color: var(--stage-ink-soft);
  line-height: 1.7;
}

.stage-scope a { color: var(--stage-amber); text-decoration: none; }
.stage-scope a:hover { color: var(--stage-amber-bright); text-decoration: underline; }

/* Accent text */
.stage-accent       { color: var(--stage-amber); text-shadow: 0 0 16px rgba(255, 176, 32, 0.4); }
.stage-accent-blue  { color: var(--stage-led-blue); }
.stage-accent-green { color: var(--stage-led-green); }

/* ── Form input (inset recessed look with amber focus ring) ─────────────── */

.stage-input,
.stage-textarea,
.stage-select {
  width: 100%;
  padding: 12px 14px;
  background: var(--stage-panel-deep);
  border: 1px solid #000;
  border-radius: var(--stage-radius);
  color: var(--stage-ink);
  font-family: var(--stage-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
}

.stage-input:focus,
.stage-textarea:focus,
.stage-select:focus {
  outline: none;
  border-color: var(--stage-amber);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.6),
    0 0 0 1px var(--stage-amber),
    0 0 12px rgba(255, 176, 32, 0.4);
}

.stage-input::placeholder,
.stage-textarea::placeholder {
  color: var(--stage-mute-2);
}

.stage-textarea { min-height: 100px; resize: vertical; }

.stage-form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.stage-form-row > .stage-nameplate { align-self: flex-start; }

.stage-form-error {
  font-family: var(--stage-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--stage-led-red);
  text-shadow: 0 0 4px rgba(255, 77, 77, 0.4);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Auth-style centered panel (login / register / verification screens) ─ */

.stage-auth-shell {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.stage-auth-panel {
  max-width: 440px;
  width: 100%;
  padding: 32px 28px;
  position: relative;
}

.stage-auth-panel__plate {
  text-align: center;
  margin-bottom: 22px;
}

.stage-auth-panel__title {
  font-family: var(--stage-font-mono);
  font-size: 22px;
  font-weight: 800;
  color: var(--stage-ink);
  letter-spacing: 0.04em;
  margin: 14px 0 6px;
  text-shadow: 0 1px 0 #000;
}

.stage-auth-panel__sub {
  font-family: var(--stage-font-mono-alt);
  font-size: 12px;
  color: var(--stage-ink-soft);
  margin: 0;
}

.stage-auth-panel__footer {
  margin-top: 22px;
  text-align: center;
  font-family: var(--stage-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--stage-mute);
}