/*
 * Drone & Tanpura page (/tools/drone/). Loaded after site.css; uses its
 * tokens only. Mobile first: controls (Sa, Start) come first on a phone,
 * the wheel and the Living String follow; side by side from 760 px.
 */

/* ------------------------------------------------------------------ layout */
.drone { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .drone { grid-template-columns: minmax(0, 1.7fr) minmax(22rem, 1fr); gap: var(--s-6); } }
.drone-stage { text-align: left; }
.drone-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .drone-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: var(--s-6); } }
.drone-controls { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.drone-controls .hint { margin: 0; }
.drone-side { display: grid; gap: var(--s-5); }
.drone-settings { display: grid; gap: var(--s-5); }
.drone-settings h2, .phone-panel h2 { margin: 0; }
.setting-group { display: grid; gap: var(--s-2); }
.setting-group .hint { margin: 0; }
.phone-panel { display: grid; gap: var(--s-3); }
.phone-panel p { margin: 0; }

/* ------------------------------------------------------------------ Sa chips: 12 notes, two lines each */
.sa-chips, .note12 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: var(--s-3); }
.sa-chips legend, .note12 legend { grid-column: 1 / -1; }
.sa-chips .chip, .note12 .chip { display: flex; }
.sa-chips .chip span, .note12 .chip span { flex: 1; min-width: 0; padding: 4px 2px; }
.sa-chips .chip span { flex-direction: column; min-height: 52px; line-height: 1.1; border-radius: var(--r-md); }
.sa-chips .chip b { font-size: 1.0625rem; font-weight: 750; }
.sa-chips .chip small { font-size: .75rem; font-weight: 600; min-height: 1.1em; white-space: nowrap; }
@media (min-width: 1500px) { .note12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.sa-line { min-height: 1.6em; font-size: var(--step--1); }
.sound-chips { margin-top: 0; }
.sound-chips .chip span { min-width: 7.5rem; }

.drone-stage .start-row { justify-content: flex-start; margin-top: var(--s-4); }
.drone-stage .start-row .start-btn { flex: 1 1 auto; max-width: none; }
.drone-stage .status { margin: var(--s-2) 0 0; }
.wake-state { margin: 0; min-height: 1.4em; }
.wake-state::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .45em; background: var(--line-strong); vertical-align: .05em; }
.wake-state[data-state="on"]::before { background: var(--teal); }
.wake-state[data-state="off"]::before, .wake-state:empty::before { display: none; }

/* ------------------------------------------------------------------ swara wheel */
.drone-visual { display: grid; gap: var(--s-3); min-width: 0; justify-items: center; }
.wheel-wrap { width: 100%; display: grid; justify-items: center; gap: var(--s-2); }
.wheel { width: min(100%, 17rem); height: auto; display: block; overflow: visible; }
@media (min-width: 1280px) { .wheel { width: min(100%, 19rem); } }
.wheel-ring { fill: none; stroke: var(--line); stroke-width: 2; }
.wheel-top { fill: var(--saffron-edge); }
.wheel-dot { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; transition: fill var(--t-base), r var(--t-base); }
.wheel-dot.is-sa { stroke-width: 3; }
.wheel-dot.on { fill: var(--saffron); stroke: var(--saffron-edge); stroke-width: 3; }
.wheel-dot.plucked { fill: var(--teal); stroke: var(--teal); }
.wheel-swara { fill: var(--muted); font: 600 13px var(--font-body); }
.wheel-swara.on { fill: var(--text); font-weight: 800; }
.wheel-mark { stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.wheel-mark.on { stroke: var(--text); }
.wheel-west { transform-origin: 120px 120px; transform-box: view-box; transition: transform var(--t-enter) var(--ease-out); }
.wheel-west text { fill: var(--text); font: 650 14px var(--font-body); transform-box: fill-box; transform-origin: center; transition: transform var(--t-enter) var(--ease-out); }
.wheel-west text.on { font-weight: 850; }
.wheel-centre { fill: var(--text); font: 750 34px var(--font-num); }
.wheel-centre-sub { fill: var(--muted); font: 650 13px var(--font-body); letter-spacing: .06em; }
.wheel-legend { text-align: center; max-width: 24rem; margin: 0; min-height: 1.4em; }
:root:not([data-terms="indian"]) .wheel-swara, :root:not([data-terms="indian"]) .wheel-mark { display: none; }

/* ------------------------------------------------------------------ Living String and the list of notes */
.drone-string-box { width: 100%; height: 110px; }
@media (min-width: 760px) { .drone-string-box { height: 130px; } }
.string-list { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--s-2); }
.string-list li {
  display: grid; gap: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); border: 1.5px solid var(--line);
  background: var(--surface); font-size: var(--step--1); line-height: 1.3; transition: border-color var(--t-fast), background-color var(--t-fast);
}
.string-list li b { font-size: 1rem; }
.string-list li .hz { color: var(--muted); font-variant-numeric: tabular-nums; }
.string-list li.plucked { border-color: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal); }

/* ------------------------------------------------------------------ settings rows */
.range-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.range-row input[type="range"] { flex: 1 1 10rem; width: auto; }
.range-row input[type="number"] { width: 6.5em; }
.range-out { min-width: 5.5em; font-variant-numeric: tabular-nums; font-weight: 650; }
.small-btn { min-height: 44px !important; padding: 6px 16px !important; }

/* ------------------------------------------------------------------ reference tone */
.pipe { margin-top: var(--s-6); }
.pipe-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-4); }
.pipe-head h2 { margin: 0; }
.pipe-head p { margin: 0; }
.pipe-grid { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .pipe-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
.pipe-note { display: grid; gap: var(--s-3); align-content: start; }
.note12 { margin-top: 0; }
.note12 .chip span { min-height: 44px; }
.octave-row { display: flex; align-items: center; gap: var(--s-3); }
.octave-label { font-weight: 650; margin-right: auto; }
.octave-out { min-width: 2ch; text-align: center; font: 750 1.5rem var(--font-num); }
.octave-row .round-btn { width: 48px; height: 48px; font-size: 1.4rem; }
.pipe-play { width: 100%; min-height: 56px; font-size: 1.0625rem; }
.pipe-play[aria-pressed="true"], .pipe-string[aria-pressed="true"] { background: var(--indigo); color: var(--indigo-ink); border-color: var(--indigo); box-shadow: 0 4px 0 var(--indigo-edge); }
.pipe-instruments { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); align-content: start; }
@media (min-width: 640px) { .pipe-instruments { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .pipe-instruments { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inst h3 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 700; margin: 0 0 var(--s-2); }
.inst h3 .hint { font-weight: 400; }
.inst-strings { display: flex; flex-wrap: wrap; gap: 6px; }
.pipe-string {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; min-height: 52px;
  padding: 4px 8px; border-radius: var(--r-md); border: 2px solid var(--line-strong); background: var(--surface); color: var(--text);
  font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.pipe-string small { font-size: .75rem; font-weight: 600; color: inherit; }
.pipe-string:hover { background: var(--surface-2); }
.pipe-string[aria-pressed="true"]:hover { background: var(--indigo); }
.pipe-foot { margin: var(--s-4) 0 0; }

/* wide screens: a bigger instrument */
@media (min-width: 1280px) {
  .drone-stage { padding: var(--s-6) var(--s-6) var(--s-5); }
  .drone-string-box { height: 150px; }
}