/* piano.css — the few things Air Piano needs on top of the shared theme.
   Everything structural (topbar, stage, panel, controls, modal) comes from
   styles.css so the two instruments stay recognisably the same product. */

/* The stage is a desk seen at an angle, so it is rarely 16:9 — main.js sets the
   real ratio inline from the camera the moment it reports one. This is only a
   placeholder so the box doesn't collapse to nothing before then.

   Emphatically NOT `min-height`: with an aspect ratio also in play the browser
   is free to satisfy the constraint by growing the *width* instead, and on a
   narrow screen that pushes the stage clean off the side of the viewport. */
.stage { aspect-ratio: 4 / 3; }
/* Landmarks arrive mirrored, and a mirrored view is the one where moving your
   hand right moves the marker right. */
.stage video { transform: scaleX(-1); }
.stage.picking { cursor: crosshair; }
.stage.picking canvas { pointer-events: none; }

/* ---------- calibration bar ----------
   Lives in the panel now, directly under the button that opens it, so it
   stacks in a ~300 px column rather than spreading along the full width of
   the stage. */
.calbar {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  margin-top: 10px; padding: 11px 12px;
  background: linear-gradient(180deg, #FFF6E8, var(--card));
  border: 1px solid rgba(192, 99, 26, .38); border-radius: var(--r);
  box-shadow: var(--sh-s);
}
.calbar[hidden] { display: none; }
.cal-hint { font-size: 12.5px; line-height: 1.5; color: var(--ink2); }
/* "Use this area" is the one you want, so it gets the full width and the two
   escape hatches share the row above it. */
.cal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cal-actions .btn { padding: 9px 12px; font-size: 12.5px; }
.cal-actions .btn:last-child { grid-column: 1 / -1; }

/* ---------- panel bits ---------- */
.ghost-btn.wide { width: 100%; }
.ghost-btn.on { background: linear-gradient(180deg, #FFF3DE, #FDE7C6); border-style: solid; border-color: rgba(192, 99, 26, .45); color: var(--amber-d); }
.np-chord { font-size: 40px; }
.pill.bad, .pill-quiet.bad { color: var(--rose); }

@media (max-width: 720px) {
  .np-chord { font-size: 34px; }
}

/* Inline caution inside a panel note, e.g. the latency readout pointing at a
   CPU-only tracker — the one setting that matters most for how this feels. */
.ctl-note .warn { color: var(--rose); font-weight: 600; }

/* ---------- first-run walkthrough ----------
   The overlay never receives clicks — only the card does — so whatever is being
   pointed at stays usable while it is being described. The dimming is a hole
   with an enormous shadow spread rather than a sheet behind a raised element;
   see tour.js for why. */
.tour { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.tour[hidden] { display: none; }
.tour-hole {
  position: fixed; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(30, 20, 12, .52), 0 0 0 2px var(--amber) inset;
  outline: 2px solid rgba(224, 147, 47, .9); outline-offset: 0;
  transition: left .22s cubic-bezier(.22,1,.36,1), top .22s cubic-bezier(.22,1,.36,1),
              width .22s cubic-bezier(.22,1,.36,1), height .22s cubic-bezier(.22,1,.36,1);
}
/* A step with nothing to point at dims everything and centres the card. */
.tour.nospot { background: rgba(30, 20, 12, .52); }
.tour.nospot .tour-hole { display: none; }

.tour-card {
  position: fixed; pointer-events: auto; width: min(360px, calc(100vw - 24px));
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--r);
  box-shadow: var(--sh-m); padding: 16px 17px 14px;
  transition: left .22s cubic-bezier(.22,1,.36,1), top .22s cubic-bezier(.22,1,.36,1);
}
.tour-of { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.tour-card h3 { font-family: var(--disp); font-weight: 600; font-size: 19px; margin: 5px 0 7px; line-height: 1.2; }
.tour-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink2); }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-actions .btn { padding: 8px 15px; font-size: 13px; }
.tour-spacer { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .tour-hole, .tour-card { transition: none; }
}