/* ------------------------------------------------------------------------- *
   Type Instrument — DR / Warp design language.
   Palette, type, spacing, borders and shadows ported 1:1 from the type-app /
   type-website brand (dr.dart + type-website/styles.css). Same brand, uniform:
   black stock, red ink, signal white, electric cyan/magenta, safety swatches.
   Hard rules, hard 0-blur drop-shadows, no rounded corners, faux regulatory
   authority. Display: Barlow Condensed. Body: Inter. Chrome: Space Mono.
 * ------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* DR palette — exact match to class DR */
  --paper: #0A0A0A;
  --paper-hi: #1A1A1A;
  --module: #141414;
  --ink: #FF152E;
  --ink-faint: #E08A92;
  --body: #EDEAE0;
  --body-faint: #A8A49A;
  --warp: #FFFFFF;
  --warp-deep: #D8D8D8;
  --cyan: #7FD8F0;
  --magenta: #E91A8C;
  --safety-yellow: #F5D300;
  --safety-green: #00A65E;
  --on-ink: #0A0A0A;

  /* spacing grid (DRGrid) */
  --tick: 4px;
  --nib: 8px;
  --pica: 12px;
  --line: 16px;
  --em: 24px;
  --leaf: 32px;
  --page: 48px;

  /* borders (DRBorders) */
  --b-hair: 0.75px;
  --b-thin: 1px;
  --b-thick: 1.5px;
  --b-rule: 2px;

  /* hard 0-blur drop-shadows (DRShadow) */
  --shadow-hard: 6px 6px 0 0 var(--paper);
  --shadow-hard-sm: 3px 3px 0 0 var(--paper);

  --mono: 'Space Mono', ui-monospace, monospace;
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
  --display: 'Barlow Condensed', 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: var(--ink); color: var(--on-ink); }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
}

#viz { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hidden { display: none !important; }

/* keyboard focus ring (none existed before) — cyan is on-palette */
:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }

/* shared chrome label */
.lbl-mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: 1.5px; }

/* ---------------- Start gate / loading ---------------- */
.gate {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--paper);
}
.gate-inner {
  width: min(680px, 92vw);
  padding: var(--page) var(--em);
  border: var(--b-thick) solid var(--ink);
  background: var(--paper-hi);
  box-shadow: var(--shadow-hard);
}

/* corporate strap across the top of the card */
.corp {
  display: flex; align-items: center; gap: var(--line);
  background: var(--ink); color: var(--on-ink);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase;
  padding: var(--tick) var(--pica);
  margin: calc(-1 * var(--page)) calc(-1 * var(--em)) var(--em);
}
.corp .w { color: var(--warp); font-weight: 700; }
.corp .spacer { flex: 1; }
.corp .reg { color: var(--paper); }

.logo { display: flex; align-items: baseline; gap: 6px; }
.logo-mark { display: none; }            /* the wordmark carries the brand now */
.wordmark {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(48px, 11vw, 92px); line-height: 0.9; letter-spacing: -0.01em;
  color: var(--ink); text-transform: uppercase;
  display: flex; align-items: baseline; flex-wrap: wrap;
}
.wordmark .slash { color: var(--warp); font-weight: 500; margin: 0 0.08em; }
.wordmark .sup { font-family: var(--mono); font-size: 0.13em; font-weight: 700; color: var(--cyan); letter-spacing: 0.04em; margin-left: 0.12em; align-self: flex-start; }

.tagline { font-size: 17px; color: var(--body); margin-top: var(--line); max-width: 56ch; }
.tagline strong { color: var(--ink); font-weight: 700; }
.subtagline { color: var(--body-faint); font-size: 14px; line-height: 1.5; margin-top: var(--nib); max-width: 60ch; }

.start-btn {
  margin-top: var(--em);
  display: inline-flex; align-items: center; gap: var(--nib);
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--paper); background: var(--warp);
  border: var(--b-thick) solid var(--ink);
  padding: var(--pica) var(--em); cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
}
.start-btn:hover { background: var(--ink); color: var(--on-ink); transform: translate(-3px, -3px); box-shadow: var(--shadow-hard); }
.start-btn .kbd { font-family: var(--mono); font-size: 11px; border: var(--b-thin) solid currentColor; padding: 1px 6px; }

.hint { font-family: var(--mono); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-faint); margin-top: var(--line); line-height: 1.6; }

.loadbar { width: 100%; height: 14px; margin-top: var(--em); border: var(--b-thin) solid var(--ink); background: var(--paper); }
.loadbar i { display: block; height: 100%; width: 0%; background: var(--ink); transition: width 0.35s ease; }
.logo-mark.spin { animation: none; }

/* ---------------- HUD ---------------- */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: stretch; justify-content: space-between;
  background: var(--paper-hi); border-bottom: var(--b-rule) solid var(--ink);
}
.hud-left { display: flex; align-items: center; padding: 0 var(--line); }
.brand {
  font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 0.7px; text-transform: uppercase; color: var(--ink);
}
.brand .slash { color: var(--warp); }
.hud-center { display: flex; }
.stat {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: var(--nib) var(--line); border-left: var(--b-hair) solid var(--ink);
}
.stat label { font-family: var(--mono); font-size: 8px; letter-spacing: 2px; color: var(--ink-faint); text-transform: uppercase; }
.stat span { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--body); }
#statChord { color: var(--ink); }
.mood-pill {
  font-family: var(--mono); font-size: 11px !important; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--on-ink) !important; background: var(--warp); padding: 2px var(--nib);
}
.mood-pill.ai { background: var(--cyan); color: var(--on-ink) !important; }

.hud-right { display: flex; align-items: center; gap: var(--pica); padding: 0 var(--line); border-left: var(--b-hair) solid var(--ink); }
.intensity { display: flex; flex-direction: column; gap: 3px; }
.intensity label { font-family: var(--mono); font-size: 8px; letter-spacing: 2px; color: var(--ink-faint); text-transform: uppercase; }
.intensity em { font-style: normal; color: var(--cyan); margin-left: 3px; }
.meter { width: 110px; height: 8px; border: var(--b-thin) solid var(--ink); background: var(--paper); }
.meter i { display: block; height: 100%; width: 0%; background: var(--cyan); transition: width 0.12s ease; }

/* mute toggle — always visible, top-right */
.mute-btn {
  align-self: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink); background: transparent; border: var(--b-thin) solid var(--ink);
  padding: var(--nib) var(--pica); cursor: pointer; transition: background 110ms ease, color 110ms ease;
}
.mute-btn:hover { background: var(--ink); color: var(--on-ink); }
.mute-btn.muted { background: var(--cyan); color: var(--on-ink); border-color: var(--cyan); }
.mute-btn.muted:hover { background: var(--cyan); color: var(--on-ink); }

/* exit -> back to the site */
.exit-btn {
  align-self: center; text-decoration: none;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink); background: transparent; border: var(--b-thin) solid var(--ink);
  padding: var(--nib) var(--pica); cursor: pointer; transition: background 110ms ease, color 110ms ease;
}
.exit-btn:hover { background: var(--ink); color: var(--on-ink); }

/* ---------------- Ribbon (typed text) ---------------- */
.ribbon { position: fixed; left: 0; right: 0; bottom: var(--em); z-index: 15; text-align: center; pointer-events: none; padding: 0 var(--page); }
.ribbon #ribbonText {
  font-family: var(--mono); font-size: clamp(16px, 3vw, 30px); font-weight: 700; letter-spacing: 2px;
  color: var(--body); text-transform: lowercase;
}
.ribbon .caret { color: var(--ink); animation: blink 1s step-end infinite; }

/* live contour readout: 8 hard cells, low (left) -> high (right) */
.contour {
  position: fixed; left: 0; right: 0; bottom: calc(var(--em) + 46px); z-index: 15;
  display: flex; gap: 3px; justify-content: center; pointer-events: none; padding: 0 var(--page);
}
.contour i { width: 32px; height: 9px; border: var(--b-thin) solid var(--ink); display: block; transition: background 80ms ease; }
.contour i.hit { background: var(--warp) !important; }

/* ---------------- Control dock ---------------- */
.dock {
  position: fixed; top: calc(var(--em) + 40px); right: var(--line); z-index: 25;
  width: 300px; max-height: calc(100vh - 90px); display: flex; flex-direction: column;
  background: var(--module); border: var(--b-thick) solid var(--ink); box-shadow: var(--shadow-hard);
}
.dock-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); color: var(--on-ink);
  font-family: var(--mono); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700;
  padding: var(--tick) var(--pica);
}
.dock-body { padding: 0 var(--line) var(--line); overflow-y: auto; }
.dock.collapsed .dock-body { display: none; }
.ctl-group { padding: var(--pica) 0; border-bottom: var(--b-hair) solid var(--ink); }
.ctl-group:last-of-type { border-bottom: none; }
.ctl-group h3 {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--cyan); margin-bottom: var(--pica);
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--pica); }
.field:last-child { margin-bottom: 0; }
.field > span { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }
.field.check { flex-direction: row; align-items: flex-start; gap: var(--nib); cursor: pointer; }
.field.check span { font-family: var(--sans); font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--body); line-height: 1.35; }
.field.slider span { display: flex; justify-content: space-between; }
.field.slider em { font-family: var(--mono); font-style: normal; color: var(--cyan); }
.micro { font-family: var(--mono); font-size: 9px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--body-faint); margin: -2px 0 var(--nib); line-height: 1.5; }

input[type="checkbox"] {
  appearance: none; width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px;
  border: var(--b-thin) solid var(--ink); background: var(--paper); cursor: pointer;
}
input[type="checkbox"]:checked { background: var(--ink); }
input[type="checkbox"]:checked::after { content: "\2713"; position: absolute; margin: -1px 0 0 2px; font-size: 12px; font-weight: 700; color: var(--on-ink); }

input[type="range"] { appearance: none; width: 100%; height: 6px; background: var(--paper); border: var(--b-thin) solid var(--ink); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 12px; height: 14px; background: var(--ink); border: 0; }
input[type="range"]::-moz-range-thumb { width: 12px; height: 14px; background: var(--ink); border: 0; border-radius: 0; }

.patch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nib); }
.patch-btn {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: var(--b-thin) solid var(--ink);
  padding: var(--nib) 2px; cursor: pointer; transition: background 110ms ease, color 110ms ease;
}
.patch-btn:hover { background: var(--paper-hi); }
.patch-btn.active { background: var(--ink); color: var(--on-ink); }

.ghost-btn {
  width: 100%; margin-top: var(--nib); padding: var(--nib);
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: var(--b-thin) solid var(--ink); cursor: pointer;
  transition: background 110ms ease, color 110ms ease;
}
.ghost-btn:hover { background: var(--ink); color: var(--on-ink); }
.ghost-btn:disabled { opacity: 0.45; cursor: default; }

.panic {
  width: 100%; margin-top: var(--pica); padding: var(--pica);
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink); background: transparent; border: var(--b-thick) solid var(--ink); cursor: pointer;
  transition: background 110ms ease, color 110ms ease;
}
.panic:hover { background: var(--ink); color: var(--on-ink); }

.icon-btn { background: none; border: 0; color: var(--on-ink); cursor: pointer; font-family: var(--mono); font-size: 16px; line-height: 1; padding: 0 4px; }
.dock-header .icon-btn:hover { color: var(--warp); }

/* ---------------- Help ---------------- */
.help-fab {
  position: fixed; bottom: var(--line); left: var(--line); z-index: 25;
  width: 38px; height: 38px;
  background: var(--module); border: var(--b-thick) solid var(--ink); color: var(--ink);
  font-family: var(--display); font-size: 20px; font-weight: 500; cursor: pointer;
  box-shadow: var(--shadow-hard-sm); transition: background 110ms ease, color 110ms ease;
}
.help-fab:hover { background: var(--ink); color: var(--on-ink); }

.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(10,10,10,0.85); }
.modal-card { position: relative; width: min(540px, 92vw); background: var(--module); border: var(--b-thick) solid var(--ink); box-shadow: var(--shadow-hard); padding: var(--em); }
.modal-close { position: absolute; top: var(--nib); right: var(--pica); color: var(--ink); font-size: 22px; }
.modal-card h2 { font-family: var(--display); font-weight: 400; font-size: 28px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink); margin-bottom: var(--nib); }
.modal-card .lede { color: var(--body-faint); margin-bottom: var(--line); line-height: 1.5; font-size: 14px; }
.modal-card .lede em { color: var(--warp); font-style: normal; }
.legend { list-style: none; display: flex; flex-direction: column; gap: var(--nib); margin-bottom: var(--line); }
.legend li { font-size: 13px; line-height: 1.45; color: var(--body); border-left: var(--b-rule) solid var(--ink); padding-left: var(--nib); }
.legend b { font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--cyan); }
.modal-card .tip { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-faint); border-top: var(--b-hair) solid var(--ink); padding-top: var(--pica); line-height: 1.6; }

/* first-run onboarding dialog */
.onboard-actions { display: flex; flex-wrap: wrap; gap: var(--nib); margin-top: var(--line); }
.ob-btn {
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: var(--pica) var(--em); cursor: pointer; border: var(--b-thick) solid var(--ink);
  transition: background 110ms ease, color 110ms ease;
}
.ob-btn.primary { background: var(--ink); color: var(--on-ink); }
.ob-btn.primary:hover { background: var(--warp); color: var(--ink); border-color: var(--warp); }
.ob-btn.secondary { background: transparent; color: var(--ink); }
.ob-btn.secondary:hover { background: var(--ink); color: var(--on-ink); }
.ob-foot { margin-top: var(--pica); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ---------------- Animations ---------------- */
@keyframes blink { 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes statpulse { 0%,45% { background: var(--ink); color: var(--on-ink); } 100% { background: transparent; color: var(--ink); } }
.stat span.pulse { animation: statpulse 360ms ease-out; padding: 0 4px; }
@keyframes bpmrise { 0% { color: var(--cyan); } 100% { color: var(--body); } }
#statBpm.rising { animation: bpmrise 500ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .ribbon .caret { animation: none; }
  .start-btn { transition: none; }
}

@media (max-width: 760px) {
  .hud-center .stat:nth-child(3) { display: none; }
  .intensity { display: none; }
  .dock { width: calc(100% - 24px); right: 12px; top: 56px; max-height: 54vh; }
  .ribbon { padding: 0 var(--line); }
  .ribbon #ribbonText { overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; }
}