gt-fretboard {
  display: block;
  transform-origin: center center;
}

/* The card can be resized (x-behavior="resizable") wider than the page's
   900px centered column (index.html body { max-width: 900px }) -- without
   this, growing it just overflows the right edge of that column, so the
   whole card visibly drifts off-center instead of staying in the middle of
   the viewport. left:50%/translateX(-50%) centers it on the VIEWPORT
   directly, independent of the parent's own (narrower) width, however wide
   the card is resized to. */
.gt-fretboard-card {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* The fretboard is inherently a wide, landscape-shaped diagram (6 strings
   across many frets) -- it doesn't work in a narrow phone-portrait column.
   Desktop has no such constraint (a desktop window is effectively always
   "landscape enough"), so this only ever applies below a phone-width
   breakpoint -- AND only on an actual touchscreen device (pointer:coarse,
   hover:none), not just a narrow desktop browser window, which still has a
   mouse (pointer:fine) even when resized down to phone-width. */
.gt-rotate-hint {
  display: none;
}

@media (max-width: 768px) and (orientation: portrait) and (pointer: coarse) and (hover: none) {
  .gt-rotate-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: absolute;
    inset: 0;
    z-index: 40;
    background: var(--bg-primary, #111827);
    color: var(--text-primary, #f9fafb);
    text-align: center;
    padding: 2rem;
    font-size: 0.95rem;
    font-weight: 600;
  }
  .gt-rotate-hint__icon {
    font-size: 2.5rem;
    animation: gt-rotate-hint-spin 2s ease-in-out infinite;
  }
  @keyframes gt-rotate-hint-spin {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-90deg); }
  }
}

.gt-fretboard-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 0.75rem !important;
}

/* Lives in the header now (was a separate banner inside the card body) --
   see gt:focus-changed wiring in index.html. */
.gt-focus-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary, #9ca3af);
}

.gt-focus-indicator[hidden] {
  display: none;
}

.gt-fullscreen-btn,
.gt-label-mode-btn,
.gt-fret-marker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem; /* 44px touch target */
  border: 1px solid var(--border-color, #4b5563);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary, #f9fafb);
  padding: 0.35rem 0.9rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.gt-fullscreen-btn:hover,
.gt-fullscreen-btn[aria-pressed="true"],
.gt-label-mode-btn:hover,
.gt-label-mode-btn[aria-pressed="true"],
.gt-fret-marker-btn:hover,
.gt-fret-marker-btn[aria-pressed="true"] {
  background: var(--primary, #6366f1);
  border-color: var(--primary, #6366f1);
  color: #fff;
}

.gt-fretboard-card:fullscreen {
  position: relative;
  left: auto;
  transform: none; /* cancel the breakout-centering trick above -- native fullscreen already fills/centers the viewport on its own */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--bg-primary, #111827);
}

/* The exit-fullscreen button floats over a corner instead of sitting in a
   header bar above the fretboard -- otherwise centering header+main as one
   flex block shifts the fretboard itself above true center. */
.gt-fretboard-card:fullscreen header {
  position: absolute;
  top: 1rem;
  right: 1rem;
  max-width: calc(100vw - 2rem);
  justify-content: flex-end;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.gt-fretboard-card:fullscreen main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.gt-fretboard-card:fullscreen .gt-fretboard__svg {
  width: auto;
  height: auto;
  max-width: 95vw;
  max-height: 85vh;
}

/* In fullscreen, main becomes a flex-centered container for the SVG alone
   -- the modal (a normal-flow sibling before <gt-fretboard>) would
   otherwise become a flex item squeezed in beside it instead of floating
   over it. Pull it out of flow and pin it to the top, above everything. */
.gt-fretboard-card:fullscreen .gt-lesson-modal {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 30;
  max-height: 90vh;
  overflow: visible;
  margin-bottom: 0;
}

/* Clicking the fretboard itself (not just the small button) also toggles
   fullscreen -- cursor:zoom-in on the svg signals that without competing
   with the dots' own pointer cursor for note playback. Pinch/Ctrl+scroll
   zoom (pinch-zoom.js) scales the <gt-fretboard> element itself in place,
   independent of the resizable container's box size; overflow:hidden clips
   it like zooming a photo rather than panning; touch-action:none stops the
   browser's own native page-pinch from competing with our two-finger
   handler over this region. */
.gt-fretboard-card main {
  position: relative; /* offsetParent for .gt-lesson-modal's drag/resize bounds */
  cursor: zoom-in;
  overflow: hidden;
  touch-action: none;
}

/* A lesson's narration -- a panel docked above the fretboard by default (see
   src/lesson-player.js#showModal), pushing the neck down rather than
   covering it. Draggable/resizable (x-behavior, index.html) so the learner
   can pull it down over the neck for a compact view, or resize it, if they
   want to -- bounded to stay within the card either way. */
.gt-lesson-modal {
  width: 100%;
  overflow: visible;
  margin-bottom: 1rem; /* the modal's own action buttons must sit exactly 1rem above the fretboard's top edge */
  background: var(--bg-secondary, #1f2937);
  border: 2px solid var(--primary, #6366f1);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 1rem;
  cursor: auto; /* the card's own zoom-in cursor shouldn't bleed onto readable text */
}

.gt-lesson-modal[hidden] {
  display: none;
}

.gt-lesson-modal h2 {
  margin-top: 0;
}

.gt-lesson-modal__handle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.gt-lesson-modal__handle {
  display: inline-block;
  color: var(--text-secondary, #9ca3af);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: grab;
  user-select: none;
}

.gt-lesson-modal__collapse-btn {
  border: 1px solid var(--border-color, #4b5563);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #9ca3af);
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  cursor: pointer;
}

/* Numbers/Key/Notes-per-string/Add Notes/Direction/Play/info/focus/
   Fullscreen -- always visible (not just while a lesson narration shows),
   since these drive the fretboard itself. Tightened gap and per-control
   padding vs. their old standalone-<header> spacing, now that they all
   share one row inside the modal. */
.gt-lesson-modal__header-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.gt-lesson-modal__header-controls .gt-key-card {
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
}

.gt-lesson-modal__header-controls .gt-stepper__btn {
  min-width: 1.6rem;
  min-height: 1.6rem;
  font-size: 0.85rem;
}

.gt-lesson-modal__header-controls .gt-stepper__value {
  min-width: 2em;
  font-size: 0.8rem;
}

/* Auto-collapsed (showModal()/Dismiss, every time a lesson starts): hides
   only the narration text, leaving the drag/collapse row and every control
   (tempo, notes-per-string, chord-delay, Replay/Loop/Mute/Dismiss) visible
   and usable -- these drive the fretboard itself and must stay reachable
   without the reader ever touching the collapse button. */
.gt-lesson-modal.is-collapsed .gt-lesson-modal__content {
  display: none;
}

/* Issue #29 -- fully collapsed (an explicit click on the collapse button,
   never set automatically): hides everything except the drag/collapse row
   and the bottom play-controls row (Play/Stop/Loop/Mute/Mute
   Narration/Dismiss). */
.gt-lesson-modal.is-fully-collapsed .gt-lesson-modal__content,
.gt-lesson-modal.is-fully-collapsed .gt-lesson-modal__header-controls,
.gt-lesson-modal.is-fully-collapsed .gt-lesson-modal__tempo {
  display: none;
}

.gt-lesson-modal.wb-draggable--dragging .gt-lesson-modal__handle {
  cursor: grabbing;
}

.gt-lesson-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.gt-lesson-modal__tempo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary, #9ca3af);
}

.gt-lesson-modal__tempo-slider {
  accent-color: var(--primary, #6366f1);
}

.gt-lesson-modal__nps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-secondary, #9ca3af);
  cursor: pointer;
}

.gt-lesson-modal__nps-select {
  color-scheme: dark;
  border: 1px solid var(--border-color, #4b5563);
  border-radius: 6px;
  background: var(--bg-primary, #111827);
  color: var(--text-primary, #f9fafb);
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.gt-lesson-modal__nps-select option {
  background: var(--bg-primary, #111827);
  color: var(--text-primary, #f9fafb);
}

.gt-lesson-modal__tempo-value {
  min-width: 5.5em;
  font-variant-numeric: tabular-nums;
}

/* Sits inline right after the Time signature select (not its own
   full-width row) -- cycles 1..beatsPerMeasure while any scale demo plays
   (see gt-fretboard.js's gt:beat-changed). */
.gt-beat-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border-color, #4b5563);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.gt-beat-counter strong {
  color: var(--text-primary, #f9fafb);
}

/* Sits inline right after the Mode select -- the actual chord name that
   mode's own tonic triad produces in the current key (e.g. Phrygian in C
   -> "Edim"), kept in sync with both the Mode and Key selects (see
   index.html's updateModeChordName()). */
.gt-mode-chord-name {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border-color, #4b5563);
  border-radius: 999px;
  color: var(--text-primary, #f9fafb);
  font-weight: 600;
}

/* Same touch-friendly resize grip treatment as .gt-fretboard-card's own
   corner handle (above) -- resizable.js injects a small 12px hit target,
   too small to reliably grab on a touchscreen. */
.gt-lesson-modal .wb-resizable__handle--se {
  width: 32px !important;
  height: 32px !important;
  right: -14px !important;
  bottom: -14px !important;
  background: transparent !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gt-lesson-modal .wb-resizable__handle--se::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.gt-lesson-modal .wb-resizable__handle--se:hover::after {
  background-color: var(--primary, #6366f1);
}

/* wb-starter's resizable behavior sets the handle to a 12px hit target
   inline -- fine for a mouse, too small to reliably grab on a touchscreen.
   Grow the tappable area to a real 32px touch target while keeping the
   original small visual dot (via ::after) so the corner doesn't look
   oversized. !important overrides the inline styles resizable.js sets. */
.gt-fretboard-card .wb-resizable__handle--se {
  width: 32px !important;
  height: 32px !important;
  right: -14px !important;
  bottom: -14px !important;
  background: transparent !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gt-fretboard-card .wb-resizable__handle--se::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.gt-fretboard-card .wb-resizable__handle--se:hover::after {
  background-color: var(--primary, #6366f1);
}

.gt-fretboard__mode-switch {
  display: inline-flex;
  border: 1px solid var(--border-color, #4b5563);
  border-radius: 999px;
  padding: 0.2rem;
  margin-bottom: 1rem;
}

.gt-mode-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary, #9ca3af);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.gt-mode-btn.is-active {
  background: var(--primary, #6366f1);
  color: #fff;
}

.gt-fretboard__mode-switch--inversions {
  padding: 0.4rem;
  gap: 0.2rem;
}

.gt-fretboard__mode-switch--inversions .gt-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4rem 0.9rem;
}

.gt-mode-btn__subtitle {
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.85;
}

.gt-fretboard__chord-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: var(--text-secondary, #9ca3af);
}

/* A plain readout of the current chord's Nashville number + name -- not a
   picker (see #30-adjacent feedback: switching chords here duplicated what
   clicking a chord card already does, so this is now display-only). */
.gt-chord-picker-value {
  border: 1px solid var(--border-color, #4b5563);
  border-radius: 6px;
  background: var(--bg-primary, #111827);
  color: var(--text-primary, #f9fafb);
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.gt-mode-btn--back {
  border: 1px solid var(--border-color, #4b5563);
}

.gt-fretboard__svg {
  width: 100%;
  height: auto;
  background: var(--bg-secondary, #1f2937);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-color, #374151);
}

.gt-dot {
  cursor: pointer;
}

.gt-dot:hover circle {
  stroke-width: 3;
}

.gt-dot--bare:hover text {
  opacity: 0.75;
}

/* Flashes on the exact instant a note is plucked (see pulseNote() in
   gt-fretboard.js and the gt:chord-note-plucked event) -- a quick glow/scale
   pop distinct from the constant color-coded fill, so a chord's notes read
   as "happening now" one at a time instead of just appearing lit as a group. */
.gt-dot.is-plucked circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: gt-note-pluck 380ms ease-out;
}

.gt-dot--bare.is-plucked text {
  transform-box: fill-box;
  transform-origin: center;
  animation: gt-note-pluck-bare 380ms ease-out;
}

@keyframes gt-note-pluck {
  0% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); transform: scale(1); }
  30% { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95)); transform: scale(1.35); }
  100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); transform: scale(1); }
}

@keyframes gt-note-pluck-bare {
  0% { opacity: 1; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* Beat 1 of a measure under the current time signature (see
   playScaleDemo's beatsPerMeasure) -- a bigger, gold-tinted version of the
   same pluck flash, so the downbeat is visibly distinct from the other
   beats in the measure, not just louder. */
.gt-dot.is-accented circle {
  animation: gt-note-pluck-accent 380ms ease-out;
}

.gt-dot--bare.is-accented text {
  animation: gt-note-pluck-accent-bare 380ms ease-out;
}

@keyframes gt-note-pluck-accent {
  0% { filter: drop-shadow(0 0 0 rgba(250, 204, 21, 0)); transform: scale(1); }
  30% { filter: drop-shadow(0 0 12px rgba(250, 204, 21, 1)); transform: scale(1.6); }
  100% { filter: drop-shadow(0 0 0 rgba(250, 204, 21, 0)); transform: scale(1); }
}

@keyframes gt-note-pluck-accent-bare {
  0% { opacity: 1; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.6); filter: drop-shadow(0 0 10px rgba(250, 204, 21, 1)); }
  100% { opacity: 1; transform: scale(1); }
}