/* The practice tools (App/PracticeTools.swift): their drawn symbols, Stage Mode's indicator bubbles
   (ToolBubble, always dark there) and Home's sheets (PracticeToolSheet: Tempo trainer, Rhythm
   trainer, Polyrhythm, Timer). */

:root {
  --tools-second: #9A5A00;            /* the second pulse (Color.secondPulse), light */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tools-second: #FFE0A8; }
}
:root[data-theme="dark"], :root.stage { --tools-second: #FFE0A8; }

/* ---------------------------------------------------------------- symbols */

.tools-icon { flex: none; display: inline-grid; place-items: center; line-height: 0; }
.tools-icon svg { display: block; overflow: visible; }

/* ---------------------------------------------------------------- shared */

.tools-panel { color: var(--label); }
/* The Mac's segmented control: a quiet track, the chosen segment amber (or the second pulse's). */
.tools-panel .segmented { background: var(--fill); }
.tools-panel .segmented button { min-height: 22px; padding: 2px 6px; }
.tools-rows { display: flex; flex-direction: column; gap: 12px; }
.tools-setting { display: flex; flex-direction: column; gap: 6px; }
.tools-name { padding-inline-start: 2px; font-size: calc(13px * var(--text-scale)); font-weight: 600; color: var(--label-2); }
.tools-slider { width: 100%; }

/* ---------------------------------------------------------------- bubbles (Stage Mode) */

.tools-panel.bubble { width: 320px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; }
.tools-bubble-title { margin: 0; font-size: calc(17px * var(--text-scale)); font-weight: 700; text-align: center; }

.tools-upto { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tools-upto-value { font: 600 calc(17px * var(--text-scale))/1.2 var(--font-rounded); font-variant-numeric: tabular-nums; }
.tools-slider-wrap { display: flex; flex-direction: column; gap: 3px; }
/* Light ticks along the bar, the long ones every other, from one end of the thumb's travel to the other. */
.tools-ticks { height: 7px; padding: 0 15px; display: flex; justify-content: space-between; align-items: flex-start; }
.tools-ticks span { width: 2px; height: 4px; border-radius: 1px; background: color-mix(in srgb, var(--label) 53%, transparent); }
.tools-ticks span.long { height: 7px; }

/* The countdown's two menus, hours and minutes, in a band 132 tall. */
.tools-wheel-box { height: 132px; display: grid; place-items: center; }
.tools-wheel { display: flex; justify-content: center; gap: 10px; }
.tools-select { width: auto; min-width: 88px; font-variant-numeric: tabular-nums; }

.tools-timer-status {
  height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  font: 600 30px/1 var(--font-rounded);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tools-paused { width: 0.5em; height: 0.5em; }

.tools-btn-row { display: flex; gap: 6px; }
.tools-text-btn {
  flex: 1 1 0; min-width: 0; height: 40px;
  border-radius: 12px;
  background: var(--chip); color: var(--label);
  font-size: calc(16px * var(--text-scale)); font-weight: 600; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tools-text-btn.prominent { background: var(--accent); color: var(--on-accent); }
.tools-text-btn:disabled { opacity: 0.4; }
.tools-text-btn:active:not(:disabled) { opacity: 0.8; }

/* "Sync with the metronome": the whole row is the switch. */
.tools-sync-row {
  width: 100%; min-height: 40px;
  padding-inline-start: 2px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: calc(15px * var(--text-scale)); font-weight: 600; text-align: start;
  color: var(--label);
}
.tools-switch-look {
  position: relative; flex: none;
  width: 32px; height: 19px; border-radius: 999px;
  background: var(--gray4);
  transition: background 0.18s;
}
.tools-switch-look::after {
  content: ""; position: absolute; top: 1.5px; left: 1.5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s var(--snappy);
}
.tools-switch-look.on { background: var(--accent); }
.tools-switch-look.on::after { transform: translateX(13px); }

/* What the beat did to the bar. */
.tools-poly-line { margin: 0; font-size: calc(10px * var(--text-scale)); line-height: 1.35; color: var(--label-2); }
.tools-meter-changed {
  display: flex; align-items: center; gap: 10px;
  padding-inline: 12px 2px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.tools-meter-now {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(11px * var(--text-scale)); font-weight: 600; color: var(--accent);
}
.tools-meter-now .icon { width: 11px; height: 11px; stroke-width: 2.4; }
.tools-meter-back { flex: none; min-height: 36px; padding: 0 10px; font-size: calc(11px * var(--text-scale)); font-weight: 600; color: var(--accent); }
.tools-meter-back:active { opacity: 0.6; }

/* ---------------------------------------------------------------- Home's sheets */

dialog.sheet.tools-sheet { background: var(--page); }
.tools-sheet .sheet-head { justify-content: flex-start; padding-inline: 20px; }
.tools-sheet .sheet-head h2 { text-align: start; }
.tools-sheet .sheet-body { padding: 0; }
.tools-sheet .sheet-foot { min-height: 48px; padding: 10px 16px; }
.tools-done { min-height: 24px; padding: 3px 14px; border-radius: 7px; font-size: calc(13px * var(--text-scale)); font-weight: 600; }

.tools-panel.sheet { display: flex; flex-direction: column; }
.tools-sheet-content { display: flex; flex-direction: column; gap: 24px; padding: 4px 20px 16px; }
.tools-intro { margin: 0; font-size: calc(11px * var(--text-scale)); line-height: 1.4; color: var(--label-2); }
.tools-field { display: flex; flex-direction: column; gap: 8px; }
.tools-field-title { font-size: calc(10px * var(--text-scale)); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--label-2); }
.tools-field-note { margin: 0; font-size: calc(10px * var(--text-scale)); color: var(--label-2); }
.tools-sheet-group { display: flex; flex-direction: column; gap: 24px; }
.tools-upto-sheet { display: flex; flex-direction: column; gap: 4px; }
.tools-big-bpm { font: 700 28px/1.15 var(--font-rounded); font-variant-numeric: tabular-nums; }
.tools-slider-line { display: flex; align-items: center; gap: 8px; }
.tools-minmax { font-size: calc(10px * var(--text-scale)); color: var(--label-2); font-variant-numeric: tabular-nums; }

/* Load in Metronome, at the sheet's foot (LoadInMetronomeButton). */
.tools-loadbar { flex: none; padding: 10px 20px 6px; background: var(--page); }
.tools-load {
  width: 100%; min-height: 50px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: calc(13px * var(--text-scale)); font-weight: 700; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tools-load:disabled { opacity: 0.45; }
.tools-load:active:not(:disabled) { opacity: 0.85; }

/* A panel on the sheet (toolPanel). */
.tools-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: var(--row);
  color: var(--label);
}
.tools-card.off { color: var(--label-2); }

/* The tempo trainer's climb. */
.tools-climb-head { font-size: calc(13px * var(--text-scale)); font-weight: 700; font-variant-numeric: tabular-nums; }
.tools-climb-body { height: 84px; display: flex; }
.tools-climb-flat { margin: 0; font-size: calc(11px * var(--text-scale)); line-height: 1.35; }
.tools-stairs { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.tools-stair { flex: 1 1 0; min-width: 0; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.tools-stair.last { background: var(--accent); }
.tools-climb.off .tools-stair { background: var(--gray4); }
.tools-climb.off .tools-stair.last { background: var(--gray2); }
.tools-figures { display: flex; }
.tools-figure { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tools-figure-value { font-size: calc(15px * var(--text-scale)); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tools-figure-label { font-size: calc(10px * var(--text-scale)); color: var(--label-2); }

/* The rhythm trainer's bars. */
.tools-gap-bars { display: flex; gap: 6px; }
.tools-gap-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.tools-gap-box { height: 44px; border-radius: 8px; }
.tools-gap-box.sounds { background: var(--accent); }
.tools-gap-box.silent { border: 2px dashed color-mix(in srgb, var(--label-2) 45%, transparent); }
.tools-gap.off .tools-gap-box.sounds { background: var(--gray4); }
.tools-gap-num { font-size: calc(10px * var(--text-scale)); color: var(--label-2); font-variant-numeric: tabular-nums; }
.tools-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: calc(10px * var(--text-scale)); }
.tools-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.tools-legend-box { flex: none; width: 14px; height: 14px; border-radius: 4px; }
.tools-legend-box.sounds { background: var(--accent); }
.tools-legend-box.silent { border: 1.5px dashed color-mix(in srgb, var(--label-2) 45%, transparent); }
.tools-gap.off .tools-legend-box.sounds { background: var(--gray4); }

/* The polyrhythm: one screen, the circle as big as the rest leaves it. */
.tools-sheet-poly .sheet-body { display: flex; flex-direction: column; }
.tools-sheet-poly .tools-panel.sheet { flex: 1; min-height: 0; }
.tools-poly-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 2px 16px 12px; }
.tools-poly-head { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tools-poly-circle { position: relative; flex: 1; width: 100%; min-height: 120px; }
.tools-poly-circle svg { position: absolute; inset: 0; }
.tools-poly-ratio {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  direction: ltr;
  font-family: var(--font-rounded); font-weight: 600; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--label) 90%, transparent);
  pointer-events: none;
}
.tools-poly-title { font-size: calc(13px * var(--text-scale)); font-weight: 700; }
.tools-poly-note {
  margin: 0;
  min-height: 2.6em;
  font-size: calc(10px * var(--text-scale)); line-height: 1.3; text-align: center;
  color: var(--label-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.tools-poly-rows { display: flex; flex-direction: column; gap: 6px; }
.tools-poly-row { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.tools-poly-label {
  flex: none; width: 76px;
  display: flex; align-items: center; gap: 6px;
  font-size: calc(11px * var(--text-scale)); font-weight: 600;
  white-space: nowrap; overflow: hidden;
}
.tools-poly-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.tools-poly-control { flex: 1; min-width: 0; }
.tools-poly-bar { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 6px; }
.tools-poly-summary {
  min-height: 1.3em;
  font-size: calc(10px * var(--text-scale)); line-height: 1.3; text-align: center;
  color: var(--label-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tools-poly-buttons { display: flex; gap: 10px; }
.tools-poly-buttons .tools-load { flex: 1; width: auto; }
.tools-listen {
  flex: none; min-height: 50px;
  padding: 0 20px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px;
  background: var(--chip); color: var(--label);
  font-size: calc(13px * var(--text-scale)); font-weight: 700;
}
.tools-listen .icon { width: 13px; height: 13px; }
.tools-listen:disabled { opacity: 0.45; }
.tools-listen:active:not(:disabled) { opacity: 0.8; }

/* The timer, laid out as a clock's is. */
.tools-timer-screen { display: flex; flex-direction: column; gap: 22px; padding: 8px 20px 32px; }
.tools-timer-middle { display: flex; align-items: center; justify-content: center; }
.tools-timer-set.sheet { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.tools-wheel-box.sheet { height: auto; }
.tools-presets { display: flex; gap: 8px; }
.tools-preset {
  flex: 1 1 0; min-width: 0; min-height: 34px;
  border-radius: 999px;
  background: var(--chip); color: var(--label);
  font-size: calc(11px * var(--text-scale)); font-weight: 600; font-variant-numeric: tabular-nums; text-align: center;
  white-space: nowrap; overflow: hidden;
}
.tools-preset.chosen { background: var(--accent); color: var(--on-accent); }

.tools-dial { position: relative; width: 290px; height: 290px; max-width: 100%; }
.tools-dial svg { position: absolute; inset: 0; }
.tools-dial-text {
  position: absolute; inset: 0;
  padding: 0 36px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.tools-dial-time { font-size: 66px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; overflow: hidden; }
.tools-dial-caption { height: 20px; display: flex; align-items: center; font-size: calc(11px * var(--text-scale)); font-weight: 500; }
.tools-dial-up { color: var(--accent); }
.tools-dial-end { display: inline-flex; align-items: center; gap: 4px; }
.tools-dial-end .icon { width: 11px; height: 11px; }

/* A clock's round button: a disc, and a ring just outside it. */
.tools-clock-row { display: flex; justify-content: space-between; padding: 0 6px; }
.tools-clock-btn {
  --clock-fill: color-mix(in srgb, var(--label) 9%, transparent);
  --clock-ink: var(--label);
  width: 84px; height: 84px; border-radius: 50%;
  padding: 0 6px;
  display: grid; place-items: center;
  background: var(--clock-fill); color: var(--clock-ink);
  box-shadow: 0 0 0 3px var(--page), 0 0 0 5px var(--clock-fill);
  font-size: calc(13px * var(--text-scale)); font-weight: 700; text-align: center;
  white-space: nowrap; overflow: hidden;
}
.tools-clock-btn.amber { --clock-fill: var(--accent); --clock-ink: var(--on-accent); }
.tools-clock-btn.amber.soft { --clock-fill: color-mix(in srgb, var(--accent) 20%, transparent); --clock-ink: var(--accent); }
.tools-clock-btn:disabled { opacity: 0.4; }
.tools-clock-btn:active:not(:disabled) { opacity: 0.8; }

.tools-toggle-block { display: flex; flex-direction: column; gap: 6px; }
.tools-toggle-row {
  min-height: 50px;
  padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-radius: 14px;
  background: var(--row);
  font-size: calc(13px * var(--text-scale));
  cursor: pointer;
}
.tools-toggle-note { margin: 0; padding: 0 16px; font-size: calc(10px * var(--text-scale)); color: var(--label-2); }

@media (max-width: 639px) {
  .tools-sheet .sheet-head { padding-inline: 16px; }
}