/* The tuner sheet (App/TunerView.swift, the Mac's sheet variant; spec tuner.md §3.7–3.9):
   460 × 592 over Home, "Tuner" at the head's leading edge, the gauge on a canvas with the needle
   as its own layer, Note names and Reference under it, Done at the foot. On a phone it is a
   bottom card with 16 px gutters. Listen and Tap Tempo are drawn by Stage Mode (stage.css). */

/* macOS systemGreen: the in-tune window, needle and cents. The label on accent is the Mac's white
   in light; in dark the brighter amber needs the app's dark ink to stay legible. */
:root { --tuner-green: #28CD41; --tuner-on-accent: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tuner-green: #32D74B; --tuner-on-accent: var(--on-accent); }
}
:root[data-theme="dark"], :root.stage { --tuner-green: #32D74B; --tuner-on-accent: var(--on-accent); }

/* ---------------------------------------------------------------- the sheet's chrome */

.tuner-sheet .sheet-head {
  justify-content: flex-start;
  padding-inline: 48px 20px;
}
.tuner-sheet .sheet-head h2 { text-align: start; }

.tuner-sheet .sheet-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.tuner-sheet .sheet-foot {
  min-height: 66px;
  padding: 0 20px;
}

/* The default button: accent fill, white label, a small capsule (≈ 64 × 22). Return presses it. */
.tuner-sheet .tuner-done {
  min-width: 64px;
  min-height: 24px;
  padding: 2px 14px;
  border-radius: 999px;
  font-size: calc(13px * var(--text-scale));
  font-weight: 500;
  color: var(--tuner-on-accent);
}

/* ---------------------------------------------------------------- the body */

.tuner-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 24px 20px;
}
.tuner-spacer { flex: 1 1 0; min-height: 0; }
.tuner-body.tuner-has-gauge .tuner-spacer { flex: 0 0 0; }

.tuner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* The gauge takes all the spare height and cancels the side padding: it is the sheet's full width. */
.tuner-content.is-gauge {
  flex: 1 1 auto;
  min-height: 0;
  margin-inline: -24px;
  align-items: stretch;
}

.tuner-gauge {
  position: relative;
  flex: 1 1 auto;
  min-height: 120px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.tuner-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The needle: a line from 0.56 r to r − 20, width 4, round caps, turned about the hub every frame
   by the spring. Shown only while a note is heard, at once, with no fade; green within ±3 cents. */
.tuner-needle {
  position: absolute;
  width: 4px;
  transform-origin: 50% 100%;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.tuner-needle.on { opacity: 1; }
.tuner-needle-bar {
  position: absolute;
  left: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--accent);
}
.tuner-needle.in-tune .tuner-needle-bar { background: var(--tuner-green); }

/* ---------------------------------------------------------------- denied block and notice */

.tuner-denied {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 380px;
  margin: 0 auto;
  text-align: center;
}
.tuner-denied-icon {
  width: 40px;
  height: 40px;
  color: var(--label-3);
  stroke-width: 1.3;
}
.tuner-denied-title {
  margin: 0;
  font-family: var(--font-rounded);
  font-size: 19px;
  font-weight: 600;
  color: var(--label);
}
.tuner-denied-body {
  margin: 0;
  font-size: calc(14px * var(--text-scale));
  line-height: 1.35;
  color: var(--label-2);
}
.tuner-notice {
  max-width: 380px;
  margin: 0 auto;
  font-size: calc(15px * var(--text-scale));
  line-height: 1.35;
  color: var(--label-2);
  text-align: center;
}

/* ---------------------------------------------------------------- note names and reference */

.tuner-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.tuner-naming {
  display: flex;
  flex-wrap: wrap;   /* a long label puts the control on its own line rather than past the gutters */
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tuner-naming-label { font-size: calc(13px * var(--text-scale)); color: var(--label); white-space: nowrap; }

/* The Mac's native segmented control: ≈ 175 × 24, a grey track, the choice in accent. */
.tuner-naming .segmented {
  flex: none;
  width: 175px;
  padding: 2px;
  border-radius: 7px;
  background: var(--chip);
}
.tuner-naming .segmented .thumb { top: 2px; bottom: 2px; border-radius: 5px; }
.tuner-naming .segmented button {
  min-height: 20px;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: calc(13px * var(--text-scale));
  font-weight: 400;
}
.tuner-naming .segmented button[aria-pressed="true"] { color: var(--tuner-on-accent); font-weight: 500; }

.tuner-ref {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tuner-ref-label {
  flex: 1;
  min-width: 0;
  font-size: calc(14px * var(--text-scale));
  font-weight: 500;
  color: var(--label);
}
.tuner-ref-value {
  min-width: 86px;
  font-family: var(--font-rounded);
  font-size: calc(15px * var(--text-scale));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

/* Bordered steppers, both 40 × 22 (the Mac's glyph-sized pair came out uneven; spec O3). */
.tuner-step {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--label);
  transition: background 0.12s, opacity 0.12s;
}
.tuner-step .icon { width: 13px; height: 13px; stroke-width: 2; }
.tuner-step:active:not(:disabled) { background: var(--fill); }
.tuner-step:disabled { opacity: 0.35; }

/* ---------------------------------------------------------------- touch and phones */

@media (pointer: coarse) {
  .tuner-sheet .tuner-done { min-height: 34px; padding: 4px 18px; font-size: calc(15px * var(--text-scale)); }
  .tuner-naming .segmented { width: 196px; }
  .tuner-naming .segmented button { min-height: 28px; }
  .tuner-step { width: 48px; height: 32px; }
}

/* Below the compact width: a bottom card, 16 px from the sides and the bottom, the gauge in the
   Mac's proportions (460 × 401), so its geometry scales with the width. */
@media (max-width: 639px) {
  dialog.sheet.tuner-sheet {
    width: calc(100vw - 32px);
    height: fit-content;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px));
    margin: auto 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-sheet);
  }
  .tuner-sheet .sheet-head {
    padding-top: 0;
    min-height: 48px;
    padding-inline: 20px;
  }
  .tuner-sheet .sheet-foot { min-height: 60px; }
  .tuner-body { padding: 0 16px 16px; }
  .tuner-content.is-gauge { margin-inline: -16px; flex: 0 1 auto; }
  .tuner-gauge { flex: 0 1 auto; aspect-ratio: 460 / 401; min-height: 0; }
  .tuner-content:not(.is-gauge) { padding: 32px 0; }
}