/* Setronome web. Tokens are App/DesignSystem/Tokens.swift, transcribed — the phone is the
   design source of truth, and the doctrine is its: no cards, no borders, no drop shadows;
   hierarchy from size and spacing alone. Dark first; light derived from it. */

:root {
  --background: #08090A;
  --surface: #141417;
  --surface-raised: #1C1C20;
  --text-primary: #F5F5F7;
  --text-secondary: #8E8E93;
  --text-tertiary: #48484A;
  --accent: #FF9F0A;
  --accent-muted: #B36F07;
  --success: #30D158;
  --warning: #FF453A;
  --divider: #2C2C2E;

  --track: #2C2C2E;
  --dot-idle: #1C1C20;

  --space-xs: 4px; --space-s: 8px; --space-m: 12px; --space-l: 16px;
  --space-xl: 24px; --space-xxl: 32px; --space-xxxl: 48px;
  --column: 520px;
}

@media (prefers-color-scheme: light) {
  :root {
    --background: #F4F3F0;
    --surface: #E9E8E4;
    --surface-raised: #FFFFFF;
    --text-primary: #1B1B1E;
    --text-secondary: #5A5A60;
    --text-tertiary: #A5A5AA;
    --accent: #C77800;
    --accent-muted: #8A5400;
    --divider: #D8D7D2;
    --track: #DAD9D4;
    --dot-idle: #CFCEC8;
  }
}

* { box-sizing: border-box; margin: 0; }

html { height: 100%; }

body {
  min-height: 100%;
  background: var(--background);
  color: var(--text-primary);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* The photographic backdrop, under the iOS rules (ScreenBackdrop.swift): anchored at the
   top and faded out before the middle so the large numbers sit on clean ground; dimmer
   than looks right on a desk; and in Light a whisper, because a light page has thirty-five
   levels of room where a black page has the whole scale. The photographs are the app's own
   — the stadium behind the Metronome, the brass (the reference, per the iOS comments)
   behind Shows. Fixed, so content scrolls over it the way it does on the phone. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 62vh;
  z-index: -1;
  background-size: cover;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, black 18%, transparent 92%);
  mask-image: linear-gradient(to bottom, black 18%, transparent 92%);
  /* Dimmer than looks right on a desk — checked against the phone side by side. */
  opacity: 0.26;
  pointer-events: none;
}
/* Per-screen assignments are the phone's own (each view's ScreenBackdrop bands):
   brass over stage on the Metronome, the practice room under Shows, the guard under
   Rehearsal, the orchestra under the Tuner, the drum major behind Settings, the stadium
   on the tour and the door. Top band via ::before, bottom band via ::after. */
body[data-screen="metronome"]::before { background-image: url("../images/brass.jpg"); }
body[data-screen="tour"]::before,
body[data-screen="account"]::before { background-image: url("../images/stadium.jpg"); opacity: 0.3; }

body::after {
  content: "";
  position: fixed;
  inset: auto 0 0 0;
  height: 56vh;
  z-index: -1;
  background-size: cover;
  background-position: center bottom;
  -webkit-mask-image: linear-gradient(to top, black 12%, transparent 88%);
  mask-image: linear-gradient(to top, black 12%, transparent 88%);
  opacity: 0.22;
  pointer-events: none;
}
body[data-screen="metronome"]::after { background-image: url("../images/stage.jpg"); opacity: 0.17; }
body[data-screen="shows"]::after,
body[data-screen="show"]::after,
body[data-screen="review"]::after,
body[data-screen="edit"]::after { background-image: url("../images/practiceroom.jpg"); opacity: 0.26; }
body[data-screen="rehearsal"]::after { background-image: url("../images/guard.jpg"); opacity: 0.3; }
body[data-screen="tuner"]::after { background-image: url("../images/orchestra.jpg"); opacity: 0.28; }
body[data-screen="settings"]::after { background-image: url("../images/drummajor.jpg"); opacity: 0.24; }

@media (prefers-color-scheme: light) {
  body::before, body::after { opacity: 0.09; }
}

#flash {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  background: var(--accent); opacity: 0;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--accent); color: #08090A; padding: var(--space-s) var(--space-l);
  border-radius: 8px; text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: var(--space-l); }

/* --- Shell ---------------------------------------------------------------------------- */

#app {
  max-width: var(--column); margin: 0 auto;
  padding: calc(var(--space-l) + env(safe-area-inset-top)) var(--space-l) calc(96px + env(safe-area-inset-bottom));
}

/* The phone's floating tab bar: icon over label, active in accent, translucent pill. */
.tabbar {
  position: fixed; bottom: calc(var(--space-m) + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  display: flex; gap: var(--space-s); z-index: 5;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-radius: 999px; padding: 6px;
}
.tabbar button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 22px; border-radius: 999px;
}
.tabbar button[aria-selected="true"] { background: var(--surface-raised); color: var(--accent); }
.tabbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
/* Section labels the way the phone writes them: small caps-tracked secondary ink. */
h2 {
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.08em; margin-top: var(--space-xxl);
}

.screen-header {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 44px; margin-bottom: var(--space-s);
}
.pill {
  appearance: none; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--surface-raised) 75%, transparent);
  color: var(--text-primary); font: inherit; font-size: 17px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px;
}
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill-row { display: flex; justify-content: center; gap: var(--space-m); margin: var(--space-l) 0; }
.prose { color: var(--text-secondary); max-width: 60ch; }

button.primary, label.primary, a.primary {
  display: inline-block; appearance: none; border: 0; cursor: pointer;
  background: var(--accent); color: #08090A; font: inherit; font-weight: 700;
  padding: 14px var(--space-xl); border-radius: 12px;
}
button.quiet {
  appearance: none; border: 0; cursor: pointer; background: var(--surface-raised);
  color: var(--text-primary); font: inherit; font-weight: 600;
  padding: 10px var(--space-l); border-radius: 10px;
}
button.destructive { background: transparent; color: var(--warning); }
button:focus-visible, label:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* --- Metronome -------------------------------------------------------------------------- */

.tempo-readout {
  text-align: center; margin: var(--space-xxl) 0 var(--space-l);
  font-variant-numeric: tabular-nums;
}
.tempo-readout .bpm { font-size: 96px; font-weight: 200; letter-spacing: -0.04em; line-height: 1; }
.tempo-readout .unit { color: var(--text-secondary); font-size: 15px; }

/* The ruler: every tick a real BPM, drawn by app/ruler.js on the canvas. */
.ruler-frame {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border-radius: 16px; margin: var(--space-l) 0 var(--space-s);
  touch-action: none;
}
.ruler {
  display: block; width: 100%; height: 96px; cursor: ew-resize;
  border-radius: 16px;
}
.ruler:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.legend {
  text-align: center; color: var(--text-secondary); font-size: 14px;
  font-variant-numeric: tabular-nums; margin-bottom: var(--space-l);
}

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: center; }
.chip-row .chip {
  appearance: none; border: 0; cursor: pointer; background: var(--surface);
  color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
}
/* Selection is an amber fill with dark type — the phone's own selected-chip treatment. */
.chip-row .chip[aria-pressed="true"] { background: var(--accent); color: #141417; }
/* Subdivision glyphs: rounded squares side by side, picked by shape. */
.chip-row.glyphs { gap: var(--space-s); flex-wrap: nowrap; }
.chip-row .chip.glyph {
  border-radius: 14px; min-width: 52px; min-height: 46px; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--surface-raised) 75%, transparent);
  color: var(--text-primary);
}
.chip-row .chip.glyph[aria-pressed="true"] { background: var(--accent); color: #141417; }

/* Each dot is a 44 pt button (the accent toggle) drawing a small mark — the hit target
   and the glyph are different sizes on purpose, the same 44-point floor the iOS suite
   enforces. */
.beat-strip {
  display: flex; justify-content: center;
  margin: var(--space-l) 0; flex-wrap: wrap;
}
.beat-strip .dot {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Rings, not dots — the phone draws outlined circles. An accent fills with the muted
   accent; the sounding beat fills amber. */
.beat-strip { justify-content: space-evenly; }
.beat-strip .dotmark {
  width: 34px; height: 34px; border-radius: 999px;
  border: 2px solid var(--text-tertiary); background: transparent;
  transition: transform 60ms linear, background 60ms linear;
}
.beat-strip .dotmark.accent { border-color: var(--accent-muted); background: color-mix(in srgb, var(--accent-muted) 38%, transparent); }
.beat-strip .dotmark.live { border-color: var(--accent); background: var(--accent); transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .beat-strip .dotmark { transition: none; }
  .beat-strip .dotmark.live { transform: none; }
}

.transport {
  display: flex; justify-content: center; align-items: center;
  gap: var(--space-xl); margin-top: var(--space-xl);
}
.transport .tap, .tap-spacer {
  appearance: none; border: 0; cursor: pointer;
  width: 64px; height: 64px; border-radius: 999px;
  background: var(--surface-raised); color: var(--text-primary);
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.06em;
}
/* An invisible twin of TAP on the other side, so GO stays centred on the page's axis. */
.tap-spacer { visibility: hidden; }

.hint {
  text-align: center; color: var(--text-secondary); font-size: 13px;
  margin-top: var(--space-l);
}
.transport .go {
  appearance: none; border: 0; cursor: pointer;
  width: 96px; height: 96px; border-radius: 999px;
  background: var(--accent); color: #08090A; font-size: 17px; font-weight: 800;
  letter-spacing: 0.06em;
}
.transport .go[data-running="true"] { background: var(--surface-raised); color: var(--warning); }

/* --- Shows ------------------------------------------------------------------------------ */

/* The list rides in one rounded surface group with hairline dividers, as on the phone. */
.show-list {
  list-style: none; padding: 4px var(--space-l); display: grid;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-radius: 18px;
}
.show-list li { display: flex; align-items: center; gap: var(--space-m); }
.show-list li + li { border-top: 1px solid var(--divider); }
.show-list .open {
  flex: 1; text-align: left; appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--text-primary); font: inherit;
  padding: 14px 0;
}
.show-list .open .title { font-size: 17px; font-weight: 600; display: block; }
.show-list .open .detail { color: var(--text-secondary); font-size: 14px; }
/* Quiet until intended: five red DELETEs were the loudest thing on the page. */
.show-list .row-delete {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  color: var(--text-tertiary); font: inherit; font-size: 14px; font-weight: 600;
  padding: 10px var(--space-s); border-radius: 8px;
}
.show-list .row-delete:hover, .show-list .row-delete:focus-visible { color: var(--warning); }

.import-row { display: flex; gap: var(--space-m); align-items: center; margin: var(--space-xl) 0; flex-wrap: wrap; }
input[type="file"] { display: none; }

.import-guide { margin: 0 0 var(--space-xl); }
.import-guide summary {
  cursor: pointer; color: var(--text-secondary); font-weight: 600;
  padding: var(--space-s) 0;
}
.import-guide summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.import-guide p { margin: var(--space-s) 0; font-size: 15px; }

.warning-list { list-style: none; padding: 0; display: grid; gap: var(--space-s); }
.warning-list li { color: var(--text-primary); }
.warning-list li::before { content: "⚠︎ "; color: var(--accent); }

.review-sets { list-style: none; padding: 0; display: grid; gap: var(--space-s); color: var(--text-secondary); }

.timeline-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.timeline-table td, .timeline-table th {
  text-align: left; padding: 10px var(--space-s); border-bottom: 1px solid var(--divider);
}
/* Secondary, not tertiary: 13 px column headers in tertiary measure ~2.2:1 against the
   page in both themes, under WCAG AA's 4.5:1 for text this size. Tertiary is for marks
   that are not read as text. */
.timeline-table th { color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.timeline-table td.n { color: var(--text-secondary); }

.set-grid { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.set-grid .set {
  appearance: none; border: 0; cursor: pointer; background: var(--surface-raised);
  color: var(--text-primary); font: inherit; font-weight: 600;
  padding: 12px 18px; border-radius: 12px;
}
.set-grid .set[aria-pressed="true"] { background: var(--accent); color: #141417; }
.set-grid .set[aria-pressed="true"] .m { color: #3a2f14; }
.set-grid .set .m { display: block; color: var(--text-secondary); font-size: 12px; font-weight: 400; }

.passage-summary { margin: var(--space-l) 0 0; text-align: center; }
/* Technique rows: a quiet left label, then the chips. */
.chip-row.grouped { justify-content: flex-start; align-items: center; margin-top: var(--space-s); }
.chip-group-label {
  color: var(--text-secondary); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; min-width: 118px;
}
.back-row { display: flex; justify-content: space-between; }

.now-playing {
  text-align: center; margin: var(--space-xl) 0; font-variant-numeric: tabular-nums;
  min-height: 72px;
}
.now-playing .measure { font-size: 44px; font-weight: 300; }
.now-playing .label { color: var(--text-secondary); }

.back-row { margin-bottom: var(--space-l); gap: var(--space-s); }
.error { color: var(--warning); margin: var(--space-l) 0; }

/* --- Tuner ------------------------------------------------------------------------------- */

.tuner-readout { text-align: center; margin: var(--space-xxxl) 0; min-height: 190px; }
.tuner-note {
  font-size: 120px; font-weight: 200; letter-spacing: -0.04em; line-height: 1.1;
  min-height: 132px; font-variant-numeric: tabular-nums;
}
.tuner-note.in-tune { color: var(--accent); }
.tuner-cents { color: var(--text-secondary); font-size: 17px; min-height: 26px; }

/* --- Editor ------------------------------------------------------------------------------ */

.editor { display: grid; gap: var(--space-m); }
.editor-title {
  appearance: none; border: 0; font: inherit; font-size: 22px; font-weight: 700;
  background: color-mix(in srgb, var(--surface-raised) 85%, transparent);
  color: var(--text-primary); padding: 14px var(--space-l); border-radius: 12px;
}
.editor-title:focus-visible, .editor-number:focus-visible, .editor-set-name:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.editor-row { display: flex; align-items: center; gap: var(--space-m); flex-wrap: wrap; }
.editor-label { color: var(--text-secondary); font-size: 14px; }
.editor-number, .editor-set-name {
  appearance: none; border: 0; font: inherit; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--surface-raised) 85%, transparent);
  color: var(--text-primary); padding: 10px var(--space-m); border-radius: 10px;
  width: 88px;
}
.editor-set-name { width: 160px; }
.editor-card {
  display: grid; gap: var(--space-s);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border-radius: 14px; padding: var(--space-m) var(--space-l);
}

/* --- Account ----------------------------------------------------------------------------- */

.account-form { display: grid; gap: var(--space-m); max-width: 360px; margin-top: var(--space-xl); }
.account-form input {
  appearance: none; border: 0; font: inherit; font-size: 17px;
  background: color-mix(in srgb, var(--surface-raised) 85%, transparent);
  color: var(--text-primary); padding: 14px var(--space-l); border-radius: 12px;
}
.account-form input::placeholder { color: var(--text-secondary); }
.account-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-form .primary { border: 0; cursor: pointer; }
.account-links { display: flex; gap: var(--space-l); margin-top: var(--space-l); flex-wrap: wrap; }
.linklike {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--accent); font: inherit; font-size: 15px; font-weight: 600; padding: 6px 0;
}
.linklike:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- The tour --------------------------------------------------------------------------- */

body[data-screen="tour"]::before { background-image: url("../images/stadium.jpg"); opacity: 0.3; }
.tour-skip { position: fixed; top: var(--space-l); right: var(--space-l); z-index: 6; }
.tour { display: grid; gap: var(--space-xxxl); padding-bottom: var(--space-xxxl); }
.scene { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; }
.scene .kicker {
  color: var(--accent); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-s);
}
.scene h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-l); }
.scene .prose { font-size: 17px; max-width: 34em; }
.scene-note { color: var(--text-tertiary); font-size: 14px; margin-top: var(--space-m); }
.cta-row { display: flex; gap: var(--space-m); flex-wrap: wrap; margin-top: var(--space-xl); align-items: center; }
.cta-row .primary { text-decoration: none; text-align: center; }

footer.appfoot {
  max-width: var(--column); margin: var(--space-xxxl) auto 0; padding: var(--space-l);
  color: var(--text-tertiary); font-size: 13px;
}
footer.appfoot a { color: var(--text-secondary); }