/* app.css — "Modern Conservatory" theme on top of Bootstrap 5.3.
   Deep ink-navy + warm brass, cream staff-paper surfaces, Playfair Display for
   headings and the system sans for UI. Refined and music-school, but crisp and
   modern. Accessibility (contrast, focus, reduced motion) is baked in below. */

/* ---- Vendored heading font (offline) ---- */
@font-face {
  font-family: 'Playfair Display';
  src: url('../lib/fonts/playfair.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

/* ---- Palette ---- */
:root {
  --ink:        #16223f;   /* deep navy — text, bars */
  --ink-soft:   #2a3a5e;
  --brass:      #b8893b;   /* warm brass/gold accent */
  --brass-deep: #8a6526;   /* darker brass for text-on-cream (AA contrast) */
  --paper:      #fbf7ee;   /* cream staff paper */
  --paper-2:    #f3ecdc;   /* slightly deeper cream for app bg */
  --line:       #e2d8c2;   /* warm hairline borders */
  --note-active: #1d63c4;  /* clear blue for an active/clicked note */

  /* Map Bootstrap's theme variables onto the palette. */
  --bs-primary:        #16223f;
  --bs-primary-rgb:    22, 34, 63;
  --bs-link-color:     #8a6526;
  --bs-link-color-rgb: 138, 101, 38;
  --bs-link-hover-color: #6e501d;
  --bs-body-bg:        var(--paper-2);
  --bs-body-color:     #1c2438;
  --bs-border-color:   var(--line);
  --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

body.bg-body-tertiary { background-color: var(--paper-2) !important; }

/* ---- Typography ---- */
h1, h2, h3, h4, h5, .navbar-brand, .display-5, .card-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  letter-spacing: .01em;
}
.navbar-brand { font-weight: 700; }

/* ---- Top bar: deep navy with a fine brass underline ---- */
.navbar.bg-primary {
  background-color: var(--ink) !important;
  border-bottom: 3px solid var(--brass);
}
#offline-badge { color: rgba(255,255,255,.75) !important; }

/* ---- Buttons: brass primary, navy outline ---- */
.btn-primary, .btn-success {
  --bs-btn-bg: var(--brass);
  --bs-btn-border-color: var(--brass);
  --bs-btn-color: #2a1f08;
  --bs-btn-hover-bg: #a87c31;
  --bs-btn-hover-border-color: #a87c31;
  --bs-btn-hover-color: #2a1f08;
  --bs-btn-active-bg: #8a6526;
  --bs-btn-active-border-color: #8a6526;
  font-weight: 600;
}
.btn-success {
  --bs-btn-bg: #3f6f4a; --bs-btn-border-color: #3f6f4a;
  --bs-btn-hover-bg: #345d3e; --bs-btn-hover-border-color: #345d3e;
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--ink); --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink);
  --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ink);
}
.btn-outline-success {
  --bs-btn-color: #3f6f4a; --bs-btn-border-color: #3f6f4a;
  --bs-btn-hover-bg: #3f6f4a; --bs-btn-hover-border-color: #3f6f4a;
  --bs-btn-hover-color: #fff; --bs-btn-active-bg: #345d3e;
}
.btn-outline-secondary {
  --bs-btn-color: var(--ink-soft); --bs-btn-border-color: #b9b09b;
  --bs-btn-hover-bg: var(--ink-soft); --bs-btn-hover-border-color: var(--ink-soft);
  --bs-btn-hover-color: #fff;
}
.btn-outline-dark {
  --bs-btn-color: var(--ink); --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: var(--ink); --bs-btn-hover-color: #fff;
}

/* ---- Cards: cream paper with warm borders ---- */
.card {
  --bs-card-bg: var(--paper);
  --bs-card-border-color: var(--line);
  box-shadow: 0 1px 2px rgba(22,34,63,.05);
}

/* Surfaces that should read as "staff paper". */
.bg-white, #b-stage, #song-stage, #ex-stage, .list-group-item {
  background-color: var(--paper) !important;
}
.list-group-item { border-color: var(--line); }
.form-control, .form-select { background-color: var(--paper); border-color: #cdbfa3; }

/* ---- Home menu cards: colored accents become brass/navy/green ---- */
.border-primary { border-color: var(--ink) !important; }
.border-success { border-color: #3f6f4a !important; }
.border-warning { border-color: var(--brass) !important; }
.text-primary { color: var(--ink) !important; }
.text-success { color: #3f6f4a !important; }
.text-warning { color: var(--brass-deep) !important; }

/* ---- Motion ---- */
#app { animation: fade-in .2s ease; }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.card[role="button"] { transition: transform .12s ease, box-shadow .12s ease; }
.card[role="button"]:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(22,34,63,.14) !important; }

/* ---- Accessibility: visible, consistent focus ring everywhere ---- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
.form-control:focus, .form-select:focus,
.btn:focus-visible, .list-group-item:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
  box-shadow: none;
}
.card[role="button"]:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  #app, .card[role="button"] { animation: none; transition: none; }
  .vf-flash path, .vf-flash ellipse, .vf-flash text { transition: none; }
}

/* ============================================================
   Notation surface
   ============================================================ */
#song-stage, #b-stage, #ex-stage { overflow-x: auto; }
#song-stage svg, #b-stage svg, #ex-stage svg { display: block; }

.vf-note { cursor: pointer; transition: filter .1s ease; }
.vf-note:hover { filter: brightness(0.55); }
.vf-hit { pointer-events: all; }

.vf-name-label {
  font: 700 18px/1 var(--bs-font-sans-serif);
  fill: var(--note-active);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
}

/* ============================================================
   Builder palette
   ============================================================ */
.b-palette { display: flex; flex-direction: column; gap: .5rem; }
.b-pal-row { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.b-pal-label {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--brass-deep); font-weight: 600; min-width: 84px;
}

.b-glyph-btn {
  flex: 0 0 auto;
  min-width: 50px; width: 50px; height: 48px; padding: 3px 4px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--ink);
}
.b-glyph-btn .glyph-svg { flex: 0 0 auto; max-width: 100%; max-height: 100%; display: block; color: inherit; }
.b-glyph-btn.btn-outline-primary { color: var(--ink); }
.b-glyph-btn.active { color: #fff; }

.b-erase-btn { height: 48px; display: inline-flex; align-items: center; }
.b-erase-btn.active { background: var(--bs-danger); color: #fff; }

.b-pitch-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: .3rem; width: 100%; }
.b-pitch-btn { min-height: 44px; font-weight: 600; padding: .25rem; }

@media (max-width: 575px) {
  .b-pitch-grid { grid-template-columns: repeat(6, 1fr); }
  .b-pal-label { min-width: 100%; margin-bottom: .15rem; }
  .b-glyph-btn { width: 48px; height: 46px; }
}

/* Click-to-place staff: ghost preview, placement flash, eraser cursor. */
#b-stage svg { cursor: pointer; }
.vf-ghost ellipse { fill: var(--note-active); opacity: .35; }
.b-erasing #b-stage svg, #b-stage.b-erasing svg { cursor: crosshair; }
.b-erasing .vf-note:hover path, .b-erasing .vf-note:hover ellipse { fill: #c2333f; stroke: #c2333f; }

.vf-flash path, .vf-flash ellipse, .vf-flash text {
  fill: #2f7d4f; stroke: #2f7d4f;
  transition: fill .15s ease, stroke .15s ease;
}

/* ---- Piano keyboard (drill reveal) ---- */
.piano-svg { display: block; margin: 0 auto; }
.piano-white { fill: #fcfaf4; stroke: #2a3a5e; stroke-width: 1; cursor: pointer; }
.piano-black { fill: #1c2438; stroke: #1c2438; stroke-width: 1; cursor: pointer; }
.piano-white:hover { fill: #f0e9d6; }
.piano-black:hover { fill: #2a3a5e; }
.piano-hl { transition: fill .12s ease; }
/* Middle C (C4) gets a faint brass tint so it's findable at a glance. */
.piano-middle-c { fill: #fbf1da; }
.piano-label { font: 600 9px var(--bs-font-sans-serif); fill: var(--ink); }
.piano-label-mc { fill: var(--brass-deep); font-weight: 700; }

/* ---- Guitar fretboard (drill reveal) ---- */
.fretboard-svg { display: block; margin: 0 auto; background: #f3ead7; border-radius: .4rem; }
.fb-string-label { font: 600 12px var(--bs-font-sans-serif); fill: var(--ink); }
.fb-fret-num { font: 12px var(--bs-font-sans-serif); fill: var(--brass-deep); }
.fb-inlay { fill: #d8c9a6; }
.fb-marker { stroke: #2a1f08; stroke-width: 1; }
.fb-marker-open { stroke-width: 2.5; }

/* Home hero: "Mrs. Thiessen's" + portrait + "Note Reader App". */
.home-possessive {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem; font-style: italic; color: var(--brass-deep);
}
.home-portrait {
  width: 160px; height: auto; display: block; margin: 0 auto;
}

/* Drill-card mini staff preview. */
.ex-preview { overflow: hidden; }
.ex-preview svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }

/* Leaderboard: two compact columns so the top-10 fills the card height. */
.nd-board-cols { columns: 2; column-gap: 1.5rem; }
.nd-board-cols li { break-inside: avoid; margin-bottom: .15rem; }

/* Duration-picker glyphs sit inline with their label. */
.nd-dur-glyph { display: inline-flex; width: 20px; height: 22px; align-items: center; justify-content: center; }
.nd-dur-glyph .glyph-svg { max-width: 100%; max-height: 100%; color: var(--ink); }

/* Keep big tap targets on phones. */
@media (max-width: 480px) {
  .btn { min-height: 44px; }
}