/* noteman design system — ported from the Nuxt app's SCSS (_design-system
   and main, concatenated). No build step: the file is plain CSS.

   The SCSS-only syntax the source did use was converted by hand:
     //  line comments  ->  block comments   (invalid CSS; the parser bails
                                              at the first one and silently
                                              drops every rule after it)
     &-- concatenation  ->  written-out selectors
     bare nesting       ->  descendant selectors
   Keep it that way — anything a browser can't parse takes the rest of the
   stylesheet down with it, which reads as a broken theme, not a CSS error. */
/* noteman — design tokens + base component styles
   Pico-flavored: semantic, calm, modest accent.
   Light + dark via .nm-light / .nm-dark wrapper classes.

   AUTHORING SOURCE: ../../../designer/noteman.css (generated from a
   Claude-Designer tablet artboard). When the designer file is
   updated, re-copy it here verbatim. Any noteman-specific overrides
   (e.g. neutralising the artboard's fixed sizing) live in main.scss,
   NOT in this partial, so the round-trip stays clean. */

/* ---- Tokens ---------------------------------------------------------- */
.nm {
  --nm-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --nm-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --nm-fs-xs: 11px;
  --nm-fs-sm: 13px;
  --nm-fs-body: 15px;
  --nm-fs-lg: 17px;
  --nm-fs-h3: 19px;
  --nm-fs-h2: 24px;
  --nm-fs-h1: 32px;

  --nm-s-1: 4px;
  --nm-s-2: 8px;
  --nm-s-3: 12px;
  --nm-s-4: 16px;
  --nm-s-6: 24px;
  --nm-s-8: 32px;
  --nm-s-12: 48px;

  --nm-radius-sm: 4px;
  --nm-radius: 6px;
  --nm-radius-lg: 10px;

  --nm-hit: 44px;
}

/* Light — warm paper, ink, deep burgundy */
.nm-light {
  --nm-bg: #f6f3ec;
  --nm-surface: #fdfbf6;
  --nm-surface-2: #f1ede4;
  --nm-text: #1c1a17;
  --nm-text-muted: #6b665d;
  --nm-text-faint: #a39d92;
  --nm-accent: #7a2e2e;
  --nm-accent-hover: #5d2222;
  --nm-on-accent: #fdfbf6;
  --nm-border: #d8d1c2;
  --nm-border-strong: #b9b0a0;
  --nm-danger: #a23a3a;
  --nm-success: #4a6b3d;
  --nm-slice-bg: #ffffff;
  --nm-slice-ink: #16140f;
  --nm-overlay: rgba(28, 26, 23, 0.42);
  --nm-shadow: 0 1px 2px rgba(28,26,23,.04), 0 4px 16px rgba(28,26,23,.06);
  --nm-shadow-lg: 0 8px 32px rgba(28,26,23,.16);
  color-scheme: light;
}

/* Dark — low-light rehearsal hall */
.nm-dark {
  --nm-bg: #131210;
  --nm-surface: #1c1a17;
  --nm-surface-2: #25221e;
  --nm-text: #ebe6d8;
  --nm-text-muted: #8e887c;
  --nm-text-faint: #5a564d;
  --nm-accent: #c97a7a;
  --nm-accent-hover: #d99494;
  --nm-on-accent: #1a1813;
  --nm-border: #2e2b25;
  --nm-border-strong: #4a463e;
  --nm-danger: #c97a7a;
  --nm-success: #8aa37a;
  /* slices stay legible: light cream paper, dark ink, slightly dimmed */
  --nm-slice-bg: #d8d2c2;
  --nm-slice-ink: #0e0d0a;
  --nm-overlay: rgba(0, 0, 0, 0.62);
  --nm-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.5);
  --nm-shadow-lg: 0 8px 32px rgba(0,0,0,.65);
  color-scheme: dark;
}

/* ---- Base ------------------------------------------------------------ */
.nm, .nm * { box-sizing: border-box; }
.nm {
  width: 100%;
  height: 100%;
  background: var(--nm-bg);
  color: var(--nm-text);
  font-family: var(--nm-font-sans);
  font-size: var(--nm-fs-body);
  line-height: 1.45;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow: hidden;
}
.nm h1, .nm h2, .nm h3, .nm h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.nm h1 { font-size: var(--nm-fs-h1); letter-spacing: -0.02em; }
.nm h2 { font-size: var(--nm-fs-h2); }
.nm h3 { font-size: var(--nm-fs-h3); }
.nm p { margin: 0; }
.nm button { font-family: inherit; }
.nm hr { border: 0; border-top: 1px solid var(--nm-border); margin: 0; }
.nm .mono { font-family: var(--nm-font-mono); font-feature-settings: "ss01"; }
.nm .muted { color: var(--nm-text-muted); }
.nm .faint { color: var(--nm-text-faint); }

/* ---- Buttons --------------------------------------------------------- */
.nm-btn {
  font: inherit;
  font-size: var(--nm-fs-body);
  font-weight: 500;
  min-height: var(--nm-hit);
  padding: 0 var(--nm-s-4);
  border-radius: var(--nm-radius);
  border: 1px solid var(--nm-border-strong);
  background: var(--nm-surface);
  color: var(--nm-text);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nm-s-2);
  white-space: nowrap;
}
.nm-btn.primary { background: var(--nm-accent); color: var(--nm-on-accent); border-color: var(--nm-accent); }
.nm-btn.danger  { color: var(--nm-danger); border-color: var(--nm-border); background: transparent; }
.nm-btn.ghost   { border-color: transparent; background: transparent; color: var(--nm-text-muted); }
.nm-btn.small   { min-height: 32px; padding: 0 var(--nm-s-3); font-size: var(--nm-fs-sm); }
.nm-btn.block   { width: 100%; }

/* ---- Form fields ----------------------------------------------------- */
.nm-field { display: flex; flex-direction: column; gap: var(--nm-s-2); }
.nm-field > label { font-size: var(--nm-fs-sm); color: var(--nm-text-muted); font-weight: 500; }
.nm-input, .nm-select, .nm-textarea {
  font: inherit;
  font-size: var(--nm-fs-body);
  width: 100%;
  min-height: var(--nm-hit);
  padding: 0 var(--nm-s-3);
  border-radius: var(--nm-radius);
  border: 1px solid var(--nm-border-strong);
  background: var(--nm-surface);
  color: var(--nm-text);
  outline: none;
}
.nm-textarea { padding: var(--nm-s-3); min-height: 100px; line-height: 1.5; resize: none; }
.nm-input::placeholder { color: var(--nm-text-faint); }
.nm-input.has-value, .nm-input:focus { border-color: var(--nm-accent); }

/* ---- Chips ----------------------------------------------------------- */
.nm-chip {
  display: inline-flex; align-items: center; gap: var(--nm-s-1);
  height: 32px;
  padding: 0 var(--nm-s-3);
  border-radius: var(--nm-radius);
  border: 1px solid var(--nm-border);
  background: var(--nm-surface);
  color: var(--nm-text-muted);
  font-size: var(--nm-fs-sm);
  font-weight: 500;
  white-space: nowrap;
}
.nm-chip.active { background: var(--nm-accent); color: var(--nm-on-accent); border-color: var(--nm-accent); }
.nm-chip.outline { background: transparent; }

/* ---- Cards / surfaces ------------------------------------------------ */
.nm-card {
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
}

/* ---- List rows ------------------------------------------------------- */
.nm-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--nm-s-4);
  padding: var(--nm-s-3) var(--nm-s-4);
  border-bottom: 1px solid var(--nm-border);
  min-height: 64px;
}
.nm-row:last-child { border-bottom: 0; }
.nm-row .primary { font-size: var(--nm-fs-lg); font-weight: 500; color: var(--nm-text); }
.nm-row .secondary { font-size: var(--nm-fs-sm); color: var(--nm-text-muted); margin-top: 2px; }

/* ---- Toolbar / header ------------------------------------------------ */
.nm-header {
  display: flex; align-items: center; gap: var(--nm-s-4);
  padding: var(--nm-s-3) var(--nm-s-4);
  border-bottom: 1px solid var(--nm-border);
  background: var(--nm-surface);
  min-height: 56px;
}
.nm-titlebar {
  padding: var(--nm-s-4);
  border-bottom: 1px solid var(--nm-border);
  background: var(--nm-surface);
}

/* ---- Slice surface (sheet music) ------------------------------------- */
.nm-slice {
  background: var(--nm-slice-bg);
  color: var(--nm-slice-ink);
  width: 100%;
  display: block;
}

/* ---- Section labels -------------------------------------------------- */
.nm-section-label {
  font-size: var(--nm-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nm-text-muted);
  padding: var(--nm-s-3) var(--nm-s-4) var(--nm-s-2);
}

/* ---- Tabs ------------------------------------------------------------ */
.nm-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--nm-border); }
.nm-tabs > button {
  font: inherit; font-size: var(--nm-fs-sm); font-weight: 500;
  background: transparent; border: 0; color: var(--nm-text-muted);
  padding: var(--nm-s-3) var(--nm-s-4); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.nm-tabs > button.active { color: var(--nm-text); border-bottom-color: var(--nm-accent); }

/* ---- Drawer / overlay ------------------------------------------------ */
.nm-drawer {
  position: absolute; top: 0; bottom: 0;
  width: 40%;
  background: var(--nm-surface);
  border-color: var(--nm-border);
  box-shadow: var(--nm-shadow-lg);
  display: flex; flex-direction: column;
  z-index: 10;
}
.nm-drawer.right { right: 0; border-left: 1px solid var(--nm-border); }
.nm-drawer.left  { left: 0;  border-right: 1px solid var(--nm-border); }

.nm-scrim {
  position: absolute; inset: 0;
  background: var(--nm-overlay);
  z-index: 9;
}

/* ---- Sliders --------------------------------------------------------- */
.nm-slider {
  position: relative; height: 6px;
  background: var(--nm-surface-2);
  border-radius: 999px;
  border: 1px solid var(--nm-border);
}
.nm-slider > i {
  position: absolute; top: -7px;
  width: 18px; height: 18px;
  background: var(--nm-surface); border: 1px solid var(--nm-border-strong);
  border-radius: 50%;
  box-shadow: var(--nm-shadow);
}
.nm-slider > b {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--nm-accent);
  border-radius: 999px;
}

/* ---- Floating action button ----------------------------------------- */
.nm-fab {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--nm-text);
  box-shadow: var(--nm-shadow);
  backdrop-filter: blur(8px);
}
.nm-dark .nm-fab { background: rgba(28,26,23,0.78); }
.nm-light .nm-fab { background: rgba(253,251,246,0.86); }

/* ---- Switch ---------------------------------------------------------- */
.nm-switch {
  width: 44px; height: 26px;
  border-radius: 999px;
  background: var(--nm-surface-2);
  border: 1px solid var(--nm-border-strong);
  position: relative;
  flex-shrink: 0;
}
.nm-switch > i {
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: var(--nm-surface); border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.nm-switch.on { background: var(--nm-accent); border-color: var(--nm-accent); }
.nm-switch.on > i { left: 20px; background: var(--nm-on-accent); }

/* ---- Scroll containers ---------------------------------------------- */
.nm-scroll { overflow: hidden; }

/* ---- Tablet device frame -------------------------------------------- */
.nm-frame {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* status bar for tablet illusion */
.nm-statusbar {
  height: 24px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--nm-s-4);
  font-size: 11px;
  font-family: var(--nm-font-mono);
  color: var(--nm-text-muted);
  background: var(--nm-bg);
  flex-shrink: 0;
}

/* artboard label band (above each artboard, native canvas chrome handles it)
   nothing here — labels live in DCArtboard label prop. */
/* noteman design-system layer (from designer/noteman.css). Adds tokens */
/* (.nm) + theme variants (.nm-light, .nm-dark) + component classes */
/* (.nm-btn, .nm-card, .nm-input, .nm-row, .nm-fab, .nm-switch, …). */
/* Pages opt into components by applying these classes; the tokens */
/* cascade from the root .nm wrapper applied in app/layouts/*.vue. */

/* Native base reset — Pico CSS was removed (it fought the .nm design */
/* system more than it helped; see #17). All visual styling lives in the */
/* .nm-* layer; this block only neutralises browser defaults so classed */
/* elements start from a flat surface. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
svg {
  /* Inline SVGs (AppIcon) sit on the text baseline by default and drop */
  /* below adjacent text in pills/badges (#37); middle keeps them centred. */
  vertical-align: middle;
}

/* The designer authored `.nm` as a tablet artboard frame — fixed */
/* `width/height: 100%` with `overflow: hidden` so mock content stayed */
/* clipped inside the device chrome. In a real responsive web app */
/* that breaks page-level scrolling (notably the long viewer slice */
/* column), so we neutralise those three properties here. Done in */
/* main.scss rather than the partial so the partial can be re-copied */
/* from the designer file verbatim. */
.nm {
  width: auto;
  height: auto;
  overflow: visible;
}

/* noteman custom styles below this line */
/* ───────────────────────────────────────────────────────────────────────── */

/* Default layout shell — flex column, header up top, content fills. */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1;
  background: var(--nm-bg);
}

/* ── Auth card (sign-in, sign-up, pending) ──────────────────────────────── */
.auth-card {
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: center;
}

.auth-card__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.auth-card__logo {
  color: var(--nm-accent);
}

.auth-card__name {
  font-size: 24px;
}

.auth-card__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth-card__title {
  text-align: center;
  margin-bottom: 4px;
  font-size: 22px;
}

.auth-card__message {
  font-size: 14px;
  color: var(--nm-text-muted);
  text-align: center;
  line-height: 1.5;
}

.auth-card__error {
  color: var(--nm-danger);
  font-size: 13px;
  margin: 4px 0 0;
}

.auth-card__rule {
  margin: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--nm-border);
}

.auth-card__signup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.auth-card__signup-q {
  font-size: 13px;
  color: var(--nm-text-muted);
}

.auth-card__signup-link {
  color: var(--nm-accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

/* ── Setup wizard: landscape two-column grid ───────────────────────────── */
.setup-grid {
  width: min(100%, 1100px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  overflow: hidden;
  background: var(--nm-surface);
  box-shadow: var(--nm-shadow);

  @media (max-width: 800px) {
    grid-template-columns: 1fr;
  }
}

.setup-rail {
  padding: 64px 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: center;
  border-right: 1px solid var(--nm-border);
  background: var(--nm-surface-2);

  @media (max-width: 800px) {
    border-right: 0;
    border-bottom: 1px solid var(--nm-border);
    padding: 40px 32px;
  }
}

.setup-rail__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.setup-rail__logo {
  color: var(--nm-accent);
}

.setup-rail__title {
  font-size: 36px;
  line-height: 1.15;
  max-width: 380px;
  margin: 0;
}

.setup-rail__intro {
  font-size: 16px;
  max-width: 360px;
  margin: 0;
  line-height: 1.5;
}

.setup-rail__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
}

.setup-rail__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--nm-text-muted);
  margin-top: 9px;
  flex-shrink: 0;
}

.setup-form {
  padding: 56px 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;

  @media (max-width: 800px) {
    padding: 32px;
  }
}

/* ── Library ───────────────────────────────────────────────────────────── */
.library {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.library__search-wrap {
  position: relative;
}

.library__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nm-text-muted);
  pointer-events: none;
}

.library__search-input {
  padding-left: 42px;
  font-size: 16px;
  min-height: 48px;
}

.library__list {
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  overflow: hidden;
}

.library__row {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.library__row:hover {
  background: var(--nm-surface-2);
}

.library__row-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.library__row-meta-label {
  color: var(--nm-text-faint);
  margin-right: 3px;
}

.library__row-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.library__attachments {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--nm-text-faint);
  font-size: 12px;
  font-family: var(--nm-font-mono);
}

.library__attach {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.library__attach--off {
  opacity: 0.32;
}

/* The PDF chip is a button, not a link — a nested <a> inside the row's <a>
   is invalid. Strip the button chrome so it still reads as a chip, and give
   it a real hit target: a miss-tap navigates to the song. */
.library__attach--action {
  background: none;
  border: 0;
  padding: 4px 6px;
  margin: -4px -6px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--nm-radius-sm, 4px);
}
.library__attach--action:hover,
.library__attach--action:focus-visible {
  color: var(--nm-text);
  background: var(--nm-surface-2);
}

.library__pin {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--nm-text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* #47: full 44px hit target (--nm-hit) — a miss-tap navigates to the */
  /* song, so the pin must be easy to hit on a music stand. */
  width: var(--nm-hit);
  height: var(--nm-hit);
}
.library__pin--on {
  color: var(--nm-accent);
}

.library__empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--nm-text-muted);
}

/* ── Viewer ────────────────────────────────────────────────────────────── */
.viewer {
  background: var(--nm-bg);
}

/* Engraved front page (#46, mockup variant A) — sits INSIDE the paper */
/* Type is set 50% up from the original mockup: the front page shares a sheet */
/* with engraved music, and next to the staves the old sizes read as a caption */
/* rather than a title block. */
/* sheet, so colours are fixed ink-on-white in both themes: it's part of */
/* the "print", not the app chrome. */
.viewer__frontpage {
  width: 100%;
  color: #16140f;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 24px;
  align-items: end;
}
.viewer__frontpage-title {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0;
  font-size: clamp(36px, 6vw, 51px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.viewer__frontpage-subtitle {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0 0 27px;
  font-size: 22px;
  color: #6b665d;
}
.viewer__frontpage-tempo {
  font-style: italic;
  font-size: 21px;
}
/* The quarter-note glyph runs small in every text font — at the same size as */
/* the number it reads as a speck. line-height: 0 keeps it from stretching the */
/* line box it doubles inside. */
.viewer__frontpage-note {
  font-size: 2em;
  line-height: 0;
  vertical-align: -0.1em;
}
.viewer__frontpage-credits {
  grid-column: 2;
  text-align: right;
  font-size: 20px;
  color: #444;
  line-height: 1.5;
}

/* #35: the slice column is one continuous white "sheet of paper" — pure */
/* white (not a theme token) so it matches the white baked into the slice */
/* PNGs, in dark mode too. gap = inter-slice spacing, padding = paper margin */
/* around the music; both show paper, never the page background. */
/* Values user-picked from a mockup + live tuning (2026-07-04): 48px between */
/* systems, 5% width-proportional paper margin (word-processor-style; ~1 cm */
/* on A4). CSS % padding is width-relative on all four sides, exactly the */
/* proportional behaviour wanted. */
/* `--nm-zoom` (set inline by the viewer) widens the sheet past the viewport; */
/* the page then pans horizontally. Nothing inside needs to know: slices are */
/* width: 100% and the paper margin is a percentage, so both follow. */
.viewer__slices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(48px * var(--nm-zoom, 1));
  /* Bottom clearance so the fixed FAB stack never covers the last system */
  /* (#46 item 3); sides/top stay the proportional paper margin. */
  padding: 5% 5% max(5%, 160px);
  width: calc(100% * var(--nm-zoom, 1));
  /* #46 item 2: cap the sheet so wide monitors don't upscale the ~2100px */
  /* slice sources past comfortable reading size. The cap scales with zoom — */
  /* zooming past it is the one time upscaling is what the reader asked for. */
  max-width: calc(1920px * var(--nm-zoom, 1));
  margin: 0 auto;
  background: #fff;
}

.viewer__slice-wrap {
  position: relative;
  width: 100%;
  display: block;
}

.viewer__slice {
  display: block;
  width: 100%;
  height: auto;
  /* Pure white, not var(--nm-slice-bg): the slice sits on the white paper */
  /* sheet (#35), and a theme-dimmed patch behind transparent pixels would */
  /* read as a stain on it. */
  background: #fff;
}

/* Passive marker badges, top-right of the slice. Translucent so they never */
/* fight the score (CONTEXT.md: score real estate is paramount). */
.viewer__badges {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 60%;
  justify-content: flex-end;
}
.viewer__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--nm-surface) 82%, transparent);
  border: 1px solid var(--nm-border);
  color: var(--nm-text-muted);
}

/* Inline jump buttons, bottom-right of the slice that prompts the jump. */
.viewer__jumps {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.viewer__jump {
  gap: 6px;
  background: color-mix(in srgb, var(--nm-accent) 12%, var(--nm-surface));
  border: 1px solid var(--nm-accent);
  color: var(--nm-accent);
  box-shadow: var(--nm-shadow-sm);
}
.viewer__jump:disabled {
  opacity: 0.5;
  border-color: var(--nm-border);
  color: var(--nm-text-muted);
  background: var(--nm-surface);
}

/* Floating summon button, thumb-reachable bottom-right (mirrors the future */
/* audio-panel affordance on the other edge). */
.viewer__jump-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 8;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  box-shadow: var(--nm-shadow-lg);
  color: var(--nm-text);
}

/* ── Jump menu drawer (JumpMenu.vue) ──────────────────────────────────────── */
/* Reka portals these to <body>, so the shared .nm-drawer/.nm-scrim absolute */
/* positioning (which assumed the designer's .nm-frame wrapper) must become */
/* fixed to pin against the viewport. */
.jump-menu {
  position: fixed;
  width: 44%;
  min-width: 280px;
}
.nm-scrim {
  position: fixed;
}
.jump-menu__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--nm-border);
  color: var(--nm-text-muted);
}
.jump-menu__title {
  font-weight: 600;
  color: var(--nm-text);
}
.jump-menu__close {
  margin-left: auto;
  min-height: 32px;
  padding: 0 6px;
}
.jump-menu__list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jump-menu__row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--nm-border);
  background: transparent;
  color: var(--nm-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.jump-menu__row:hover {
  background: var(--nm-surface-2);
}
.jump-menu__glyph {
  display: inline-flex;
  justify-content: center;
  color: var(--nm-text-muted);
}
.jump-menu__labels {
  min-width: 0;
}
.jump-menu__label {
  display: block;
  font-size: 15px;
  font-weight: 500;
}
.jump-menu__kind {
  font-size: 12px;
}
.jump-menu__pos {
  font-size: 12px;
}
.jump-menu__empty {
  padding: 18px;
  font-size: 13px;
}

.viewer__empty {
  max-width: 40rem;
  margin: 64px auto;
  text-align: center;
  color: var(--nm-text-muted);
}

/* Loading / fallback line before the sheet renders (replaces the dead */
/* Pico-era `container` class). */
.viewer__state {
  padding: 32px 24px;
  max-width: 1000px;
  margin: 0 auto;
  color: var(--nm-text-muted);
}

/* ── Admin song management ─────────────────────────────────────────────── */
.admin-page {
  padding: 28px 32px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.admin-page__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.admin-page__header h1 {
  margin: 0;
  font-size: 28px;
}

.admin-songs__list {
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  overflow: hidden;
}

.admin-songs__row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Admin song edit — designer's side-nav + sectioned panes */
.admin-edit {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 64px);

  @media (max-width: 900px) {
    grid-template-columns: 1fr;
  }
}

.admin-edit__nav {
  border-right: 1px solid var(--nm-border);
  padding: 20px 0;
  background: var(--nm-surface);

  @media (max-width: 900px) {
    border-right: 0;
    border-bottom: 1px solid var(--nm-border);
    padding: 8px 0;
    /* A grid item defaults to min-width:auto, so the nowrap links pushed the
       track — and the page — wider than the viewport. */
    min-width: 0;
  }
}

/* #42: sticky at desktop so the nav survives scrolling into long sections; */
/* the <900px layout is the horizontal strip instead, where sticky would */
/* just eat vertical space. */
.admin-edit__nav-inner {
  position: sticky;
  top: 16px;

  @media (max-width: 900px) {
    position: static;
    display: flex;
    /* One row that scrolls sideways: the strip costs ~40px of height instead
       of seven stacked rows. min-width:0 on the grid item above is what keeps
       it inside the viewport. */
    overflow-x: auto;
    scrollbar-width: none;
    /* Same 20px gutter as the header and the page content below. The links
       carry no side padding here, so the first label starts exactly on that
       line; `gap` does the spacing instead. */
    padding-inline: 20px;
    gap: 20px;
  }
}

.admin-edit__nav-link {
  display: block;
  padding: 10px 24px;
  border-left: 2px solid transparent;
  color: var(--nm-text-muted);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  font-family: inherit;
  text-align: left;
  width: 100%;

  /* In the horizontal strip the link is sized by its text, and the active
     marker moves from the left edge to the bottom. */
  @media (max-width: 900px) {
    width: auto;
    flex: none;
    padding: 6px 0;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
}
.admin-edit__nav-link:hover {
  color: var(--nm-text);
}
.admin-edit__nav-link--active {
  border-left-color: var(--nm-accent);
  color: var(--nm-text);
  font-weight: 600;

  @media (max-width: 900px) {
    border-bottom-color: var(--nm-accent);
  }
}
.admin-edit__nav-link--danger {
  color: var(--nm-danger);
}

.admin-edit__main {
  padding: 28px 40px 80px;
  display: flex;
  flex-direction: column;
  gap: 36px;

  /* Match the header's gutter; 40px of side padding is a lot of screen to
     give away on a tablet. */
  @media (max-width: 900px) {
    padding: 20px 20px 60px;
    gap: 28px;
  }
}

.admin-edit__section h3 {
  margin: 0 0 14px;
}

.admin-edit__field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 720px;

  @media (max-width: 700px) {
    grid-template-columns: 1fr;
  }
}

.admin-edit__voice-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--nm-border-strong);
  border-radius: var(--nm-radius);
  min-height: 44px;
  background: var(--nm-surface);
}

/* Section: slices uploader + grid */
.admin-edit__section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}

.admin-edit__section-count {
  color: var(--nm-text-muted);
  font-size: 13px;
}

.admin-edit__section-spacer {
  flex: 1;
}

.admin-slice-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.admin-slice-tile {
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius);
  overflow: hidden;
  background: var(--nm-slice-bg);
  position: relative;
}

.admin-slice-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: cover;
}

.admin-slice-tile__index {
  position: absolute;
  top: 4px;
  left: 6px;
  font-family: var(--nm-font-mono);
  font-size: 10px;
  color: var(--nm-slice-ink);
  opacity: 0.55;
}

.admin-slice-tile__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: var(--nm-surface);
  border-top: 1px solid var(--nm-border);
}

.admin-slice-upload {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.admin-slice-upload small {
  color: var(--nm-text-muted);
  font-size: 12px;
}

/* Danger zone */
.admin-edit__danger {
  border-top: 1px solid var(--nm-border);
  padding-top: 24px;
}
.admin-edit__danger h3 {
  color: var(--nm-danger);
}
.admin-edit__danger p {
  color: var(--nm-text-muted);
  font-size: 13px;
  margin: 0 0 12px;
  max-width: 540px;
}

/* Admin settings — single card with .nm-switch toggle */
.admin-settings__card {
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  max-width: 760px;
}

.admin-settings__title {
  font-size: 16px;
  margin: 0 0 4px;
}

.admin-settings__help {
  font-size: 13px;
  color: var(--nm-text-muted);
  max-width: 440px;
  margin: 0;
}

.admin-settings__help strong {
  color: var(--nm-text);
  font-weight: 600;
}

.admin-settings__status {
  font-size: 12px;
  margin: 8px 0 0;
}
.admin-settings__status--ok {
  color: var(--nm-success);
}
.admin-settings__status--err {
  color: var(--nm-danger);
}

/* .nm-switch helper — make it clickable as a button */
button.nm-switch,
.nm-switch[role='switch'] {
  cursor: pointer;
}

/* ── Admin asset managers (MP3 #4, MIDI #3) ───────────────────────────────── */
.asset-manager__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.asset-manager__count {
  color: var(--nm-text-muted);
  font-size: 13px;
}
.asset-manager__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mp3-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--nm-border);
  border-radius: 8px;
  background: var(--nm-surface);
}
.mp3-row__fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.mp3-row__title {
  font-weight: 500;
}
.mp3-row__desc {
  font-size: 13px;
}
.mp3-row__audio {
  height: 34px;
  max-width: 240px;
}
.mp3-row__delete {
  flex: none;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
}

.midi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--nm-border);
  border-radius: 6px;
  background: var(--nm-surface);
}
.midi-row__sniff {
  font-size: 13px;
  color: var(--nm-text-muted);
  font-family: var(--nm-font-mono);
  min-width: 0;
}
.midi-row__voice {
  flex: none;
  min-height: 32px;
  max-width: 180px;
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--nm-border);
  border-radius: 4px;
  background: var(--nm-surface-2);
  color: var(--nm-text);
}
.midi-row__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

/* Switch thumb geometry (#17). The .nm-switch track lives in */
/* _design-system.scss (designer round-trip source); centring + animating */
/* the thumb is a noteman refinement kept here so re-copying the designer */
/* file can't lose it. */
button.nm-switch > i {
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.15s ease;
}
button.nm-switch.on > i {
  left: 22px; /* 44 track − 20 thumb − 2 inset */
}

/* Focus ring for label-as-button patterns (e.g. the slice-upload button, */
/* whose real <input type="file"> is visually hidden inside the label). */
.nm-btn:focus-within {
  outline: 2px solid var(--nm-accent);
  outline-offset: 2px;
}

/* ── Marker glyphs (MarkerGlyph.vue) — designer screens-viewer.jsx state 9 ── */
.marker-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.marker-glyph--letter {
  width: 22px;
  height: 22px;
  border: 1.4px solid currentColor;
  border-radius: 3px;
  font-weight: 700;
  font-size: 12px;
}
.marker-glyph--section {
  background: currentColor;
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;

  /* Text must contrast with the currentColor fill. */
  color: var(--nm-surface);
  background: var(--nm-text);
}
.marker-glyph--serif {
  font-family: serif;
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
}
.marker-glyph--mono {
  font-family: var(--nm-font-mono);
  font-size: 11px;
  font-weight: 700;
}

/* ── Admin marker editor (AdminMarkerEditor.vue) ──────────────────────────── */
.marker-editor__hint {
  color: var(--nm-text-muted);
  font-size: 13px;
  margin: 0 0 12px;
}
.marker-editor__palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  margin-bottom: 16px;
  background: var(--nm-surface-2);
  border: 1px solid var(--nm-border);
  border-radius: 8px;

  /* Stay reachable while scrolling a long slice list — the designer's */
  /* marker toolbar is pinned between header and slices for the same reason. */
  position: sticky;
  top: 8px;
  z-index: 5;
}
.marker-editor__tool {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 64px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: var(--nm-text);

}
.marker-editor__tool span:last-child {
  font-size: 10px;
  color: var(--nm-text-muted);
}
.marker-editor__tool--active {
  background: var(--nm-surface);
  border-color: var(--nm-accent);
  color: var(--nm-accent);
}
.marker-editor__slices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Full-width slice with its chips row beneath — the image must stay big */
/* enough to read the actual systems, or the admin can't tell where a */
/* marker belongs. */
.marker-editor__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.marker-editor__slice {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--nm-border);
  border-radius: 6px;
  background: var(--nm-slice-bg, var(--nm-surface-2));
  cursor: default;
  overflow: hidden;

}
.marker-editor__slice img {
  display: block;
  width: 100%;
}
.marker-editor__slice--armed {
  cursor: copy;
}
.marker-editor__slice--armed:hover {
  border-color: var(--nm-accent);
  outline: 1px dashed var(--nm-accent);
  outline-offset: -4px;
}
.marker-editor__slice-index {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 10px;
  color: var(--nm-text-muted);
  background: var(--nm-surface);
  padding: 1px 5px;
  border-radius: 3px;
}
.marker-editor__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 34px;
}
.marker-editor__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--nm-border);
  border-radius: 6px;
  background: var(--nm-surface);
  font-size: 12px;
}
.marker-editor__chip-label {
  width: 90px;
  min-height: 26px;
  padding: 0 6px;
  font: inherit;
  border: 1px solid var(--nm-border);
  border-radius: 4px;
  background: var(--nm-surface-2);
  color: var(--nm-text);
}
.marker-editor__chip-dest {
  min-height: 26px;
  max-width: 140px;
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--nm-border);
  border-radius: 4px;
  background: var(--nm-surface-2);
  color: var(--nm-text);
}
.marker-editor__chip-delete {
  display: inline-flex;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--nm-text-faint);
  cursor: pointer;
}
.marker-editor__chip-delete:hover {
  color: var(--nm-danger);
}
.marker-editor__none {
  color: var(--nm-text-faint);
  font-size: 12px;
}

/* ── Audio panel (AudioPanel.vue, #5) — designer ScreenViewerAudio with the */
/* three BACKLOG deviations: ~80% width, scrubber, dismissal-surviving */
/* playback (the header pill lives in AppHeader.vue's scoped styles). */
.viewer__audio-fab {
  position: fixed;
  left: 16px;
  bottom: 76px;
  z-index: 8;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  box-shadow: var(--nm-shadow-lg);
  color: var(--nm-text);
}

.audio-panel {
  position: fixed;
  width: 80%; /* BACKLOG deviation 1 — 44% squashes the mixer on tablet */
  max-width: 720px;
}

.audio-panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--nm-border);
  color: var(--nm-text-muted);
}
.audio-panel__title {
  font-weight: 600;
  color: var(--nm-text);
}
.audio-panel__close {
  margin-left: auto;
  min-height: 32px;
  padding: 0 6px;
}

.audio-panel__body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.audio-panel__transport {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.audio-panel__transport-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.audio-panel__play {
  min-height: 40px;
  padding: 0 14px;
}
.audio-panel__loop {
  min-height: 40px;
  padding: 0 12px;
}
.audio-panel__loop--on {
  color: var(--nm-accent);
  border-color: var(--nm-accent);
}
.audio-panel__time {
  font-size: 13px;
  color: var(--nm-text-muted);
  margin-left: 4px;
}
/* Two-row info grid (#39/#41, mockup variant D): tempo+speed, key+transpose. */
/* Fixed first column + always-rendered (disabled) resets keep the two */
/* sliders exactly equal width no matter what the value texts do. */
.audio-panel__info {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 10px;
}
.audio-panel__info-value {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-panel__info-value--active {
  color: var(--nm-accent);
}
.audio-panel__slider-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.audio-panel__slider-field > input[type='range'] {
  flex: 1;
  min-width: 100px;
  margin: 0;
  accent-color: var(--nm-accent);
}
.audio-panel__slider-value {
  font-size: 13px;
  color: var(--nm-text-muted);
  min-width: 52px;
  text-align: right;
}
.audio-panel__slider-value--active {
  color: var(--nm-accent);
  font-weight: 700;
}
.audio-panel__slider-reset {
  min-height: 28px;
  padding: 0 6px;

}
.audio-panel__slider-reset:disabled {
  opacity: 0.35;
  cursor: default;
}
.audio-panel__info-value {
  padding: 6px 10px;
  border: 1px solid var(--nm-border-strong);
  border-radius: 6px;
  font-size: 14px;
}

/* Native range inputs carry the scrubber and the voice volume sliders — */
/* accent-color themes the track/thumb in every engine with one line. */
.audio-panel__scrub,
.audio-panel__voice-vol {
  width: 100%;
  margin: 0;
  accent-color: var(--nm-accent);
}

.audio-panel__voice {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nm-border);
}
.audio-panel__voice-solo {
  min-height: 32px;
  padding: 0 10px;
  font-weight: 700;
  font-family: var(--nm-font-mono);
}
.audio-panel__voice-solo--on {
  color: var(--nm-on-accent);
  background: var(--nm-accent);
}
.audio-panel__voice-name {
  font-weight: 600;
  min-width: 24px;
}
.audio-panel__voice--muted .audio-panel__voice-name {
  color: var(--nm-text-faint);
}
.audio-panel__voice--muted .audio-panel__voice-vol {
  opacity: 0.4;
}
.audio-panel__voice-mute {
  min-height: 32px;
  padding: 0 6px;
}
.audio-panel__voice-instr {
  min-height: 32px;
  width: auto;
  padding: 0 8px;
  font-size: 12px;
  color: var(--nm-text-muted);
}

.audio-panel__mp3s {
  border-top: 1px solid var(--nm-border);
}
.audio-panel__mp3 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 10px 18px;
  align-items: center;
  border-bottom: 1px solid var(--nm-border);
  cursor: pointer; /* #49: the whole row plays */
}
.audio-panel__mp3:hover {
  background: var(--nm-surface-2);
}
.audio-panel__mp3-play {
  width: 36px;
  min-height: 36px;
  padding: 0;
}
.audio-panel__mp3-title {
  font-size: 14px;
  font-weight: 500;
}
.audio-panel__mp3-desc {
  font-size: 12px;
}
.audio-panel__mp3-pin {
  min-height: 32px;
  padding: 0 6px;
}

.audio-panel__empty {
  padding: 12px 18px;
  font-size: 13px;
}

/* ── Tag editing + library tag strip (#30) ────────────────────────────────── */
.library__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.library__tag {
  cursor: pointer;
}

/* Designer "Tagit" chip box: chips + a borderless inline input in one */
/* bordered container. */
.tag-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--nm-border-strong);
  border-radius: 6px;
  max-width: 600px;
}
.tag-editor__chip {
  height: 30px;
  padding-right: 6px;
  gap: 2px;
}
.tag-editor__remove {
  display: inline-flex;
  padding: 0 2px;
  color: inherit;
  opacity: 0.8;
  margin-left: 2px;
}
.tag-editor__remove:hover {
  opacity: 1;
}
.tag-editor__input {
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
  padding: 4px 6px;
  min-width: 120px;
  color: var(--nm-text);
}
.tag-editor__input::placeholder {
  color: var(--nm-text-faint);
}

/* ── Profile page (#20) ───────────────────────────────────────────────────── */
.profile {
  padding: 28px 24px 64px;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.profile__title {
  font-size: 24px;
  margin: 0;
}
.profile__card {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.profile__card h3 {
  margin: 0;
}
.profile__facts {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile__joined {
  font-size: 13px;
}
.profile__password-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.profile__hint {
  margin: 0;
  font-size: 13px;
  color: var(--nm-danger);
}
.profile__hint--ok {
  color: var(--nm-success);
}
.profile__signout {
  color: var(--nm-text-muted);
}

/* ── Admin user management (#29) ──────────────────────────────────────────── */
.admin-users__list {
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
}
.admin-users__list--pending {
  border-color: var(--nm-accent);
}
.admin-users__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.admin-users__you {
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
  margin-left: 6px;
  vertical-align: middle;
}
.admin-users__disabled {
  color: var(--nm-danger);
  border-color: var(--nm-danger);
}

/* ── Error page (app/error.vue, #53) ──────────────────────────────────────── */
.error-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--nm-bg);
}
.error-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  max-width: 26rem;
}
.error-card__logo {
  color: var(--nm-accent);
}
.error-card__code {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
}
.error-card__title {
  margin: 0;
  font-size: 24px;
}
.error-card__message {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
}

/* ── Setlists (#11, designer ScreenSetlist) ───────────────────────────────── */
.setlists,
.setlist {
  padding: 24px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.setlists__header h1 {
  margin: 0;
  font-size: 24px;
}
.setlists__create {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.setlists__create-name {
  flex: 1;
  min-width: 200px;
}
.setlists__create-date {
  width: auto;
}
.setlists__list {
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  overflow: hidden;
}
.setlists__empty {
  padding: 32px 8px;
  text-align: center;
}

.setlist__header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
}
.setlist__eyebrow {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nm-text-muted);
  margin-bottom: 8px;
}
.setlist__name {
  margin: 0;
  font-size: 30px;
}
/* Admin rename edits in place — styled as the heading, revealed as a field */
/* on focus. */
.setlist__name-input {
  font: inherit;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  border-radius: var(--nm-radius);
  background: transparent;
  color: var(--nm-text);
  padding: 2px 6px;
  margin-left: -6px;
  width: 100%;
  outline: none;
}
.setlist__name-input:hover,
.setlist__name-input:focus {
  border-color: var(--nm-border-strong);
  background: var(--nm-surface);
}
.setlist__meta {
  margin: 8px 0 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.setlist__date-input {
  min-height: 36px;
  width: auto;
}
.setlist__actions {
  display: flex;
  gap: 8px;
}
.setlist__picker {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.setlist__picker-list {
  display: flex;
  flex-direction: column;
}
.setlist__picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--nm-border);
  color: var(--nm-text);
  font-size: 14px;
  text-align: left;
}
.setlist__picker-row:last-of-type {
  border-bottom: 0;
}
.setlist__picker-row:hover {
  background: var(--nm-surface-2);
}
.setlist__picker-empty {
  padding: 10px 8px;
  font-size: 13px;
}
.setlist__row {
  grid-template-columns: auto 1fr auto;
  gap: 14px;
}
.setlist__num {
  width: 26px;
  text-align: right;
  color: var(--nm-text-muted);
}
.setlist__row-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.setlist__move {
  min-height: 36px;
  padding: 0 8px;
}

/* ── Notes (#6, designer ScreenViewerNotes) ───────────────────────────────── */
/* Stacked above the jump FAB (bottom-right column); translucent like the */
/* designer's NotesFab. */
.viewer__notes-fab {
  position: fixed;
  right: 16px;
  bottom: 76px;
  z-index: 8;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  box-shadow: var(--nm-shadow-lg);
  color: var(--nm-text);
  opacity: 0.88;
}
.viewer__notes-fab--has-notes {
  color: var(--nm-accent);
  border-color: var(--nm-accent);
}

/* Admin edit shortcut — left column, above the audio FAB (mirrors the */
/* notes-above-jump stack on the right). */
.viewer__edit-fab {
  position: fixed;
  left: 16px;
  bottom: 136px;
  z-index: 8;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  box-shadow: var(--nm-shadow-lg);
  color: var(--nm-text);
  opacity: 0.88;
}

/* Sheet zoom — right column, above the notes FAB. One pill, 48px wide like */
/* the FABs it stacks with, so the column reads as one control strip. */
.viewer__zoom {
  position: fixed;
  right: 16px;
  bottom: 136px;
  z-index: 8;
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 999px;
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  box-shadow: var(--nm-shadow-lg);
  color: var(--nm-text);
  opacity: 0.88;
}
.viewer__zoom-btn {
  width: 100%;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: 999px;
}
.viewer__zoom-btn:disabled {
  color: var(--nm-text-faint);
  cursor: default;
}
.viewer__zoom-level {
  font-size: 10px;
  color: var(--nm-text-muted);
  padding: 2px 0;
}

/* Fullscreen — bottom of the left column, under the audio FAB. Always */
/* rendered where the platform supports it, so it anchors the column. */
.viewer__fullscreen-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 8;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  box-shadow: var(--nm-shadow-lg);
  color: var(--nm-text);
  opacity: 0.88;
}

/* Scroll-to-top (#57): top-right, only rendered once the app header has */
/* scrolled out of view. */
.viewer__top-fab {
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 8;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  box-shadow: var(--nm-shadow-lg);
  color: var(--nm-text);
  opacity: 0.88;
}
.viewer-top-fab-enter-active,
.viewer-top-fab-leave-active {
  transition: opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .viewer-top-fab-enter-active,
  .viewer-top-fab-leave-active {
    transition: none;
  }
}
.viewer-top-fab-enter-from,
.viewer-top-fab-leave-to {
  opacity: 0;
}

/* Centred sheet, not a drawer. */
.notes-panel {
  position: fixed;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  width: min(76%, 720px);
  max-height: calc(100vh - 56px);
  background: var(--nm-surface);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-lg);
  box-shadow: var(--nm-shadow-lg);
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.notes-panel__head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--nm-border);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--nm-text-muted);
}
.notes-panel__title {
  font-weight: 600;
  color: var(--nm-text);
}
.notes-panel__close {
  margin-left: auto;
  min-height: 32px;
  padding: 0 6px;
}
.notes-panel__tabs {
  align-items: center;
}
.notes-panel__tabs-spacer {
  flex: 1;
}
.notes-panel__status {
  font-size: 11px;
  padding: 12px 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.notes-panel__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.notes-panel__content {
  margin: 0;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.55;
}
.notes-panel__editor {
  min-height: 180px;
  font-size: 14px;
  line-height: 1.55;
}
.notes-panel__actions {
  display: flex;
  justify-content: flex-end;
}