/* ==========================================================================
   Guitar Thing — shared tool styles (stage 06). Loaded after tokens.css and site.css
   on the five tool pages only. Restyles the tools' control vocabulary
   (.zone, .btn, .seg, .board, .panel, …) with the stage 03 tokens, so the
   tools' React markup and the locked smoke tests keep their class names.
   ========================================================================== */

.tool-page main { padding-bottom: var(--sp-6); }
.tool-page .tool-head { padding-block: var(--sp-5) var(--sp-5); }
.tool-page .tool-head p:not(.subtitle) { max-width: 62ch; }
#app-root { max-width: var(--tool-max, 100%); }
.tool-page .site-footer { margin-top: var(--sp-7); }

/* App column */
.app { display: grid; gap: var(--sp-4); }
.app > * { margin: 0; min-width: 0; }

/* Control zones: a raised card of controls */
.app .zone { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4);
  background: var(--card); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--sp-4) var(--sp-5); }
.app .zone .spacer { flex: 1 1 0; }
.app .zone label, .app .meter label, .app .seq-actions label {
  display: grid; gap: var(--sp-2); font: 700 var(--fs-xs)/1.2 var(--font-tag); letter-spacing: var(--tracking-tag);
  text-transform: uppercase; color: var(--tobacco); }
@media (max-width: 480px) { .app .zone { padding: var(--sp-4); gap: var(--sp-3); } }

/* Selects and text fields */
.app select {
  -webkit-appearance: none; appearance: none; min-height: var(--tap); min-width: 9rem; max-width: 100%;
  padding: 0 40px 0 var(--sp-4); border: 1.5px solid var(--control-line); border-radius: var(--radius-sm);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2324120A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
  color: var(--ink); font: 500 var(--fs-md)/1.2 var(--font-body); text-transform: none; letter-spacing: 0; cursor: pointer; }
.app select:disabled { opacity: .45; cursor: not-allowed; }
.app input[type=text] { min-height: var(--tap); padding: 0 var(--sp-4); border: 1.5px solid var(--control-line);
  border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: 400 var(--fs-md) var(--font-body); max-width: 100%; }
.app input[type=text]::placeholder { color: var(--muted); }
.app select:focus-visible, .app input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.app input[type=range] { accent-color: var(--orange-deep); height: var(--tap); cursor: pointer; }
@media (max-width: 640px) { .app select, .app input[type=text] { font-size: 16px; } }  /* no iOS zoom on focus */

/* Buttons: the tools' .btn is a small pill; .primary = deep orange; .active = on (ink) */
.app .btn { min-height: var(--tap); padding: 0 var(--sp-4); border-radius: var(--radius-pill); font-size: var(--fs-sm);
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--control-line); }
.app .btn:hover:not(:disabled) { background: var(--sunken); color: var(--ink); }
.app .btn:active:not(:disabled) { transform: translateY(1px); }
.app .btn.primary { background: var(--orange-deep); color: #fff; box-shadow: none; }
.app .btn.primary:hover:not(:disabled) { background: var(--orange-deep-hover); color: #fff; }
.app .btn.active { background: var(--ink); color: var(--cream); box-shadow: none; }
.app .btn.active:hover:not(:disabled) { background: var(--burst-deep); color: var(--cream); }
.app .btn.icon { min-width: var(--tap); padding: 0 var(--sp-3); font-size: 1.05rem; line-height: 1; }
.app .btn:disabled { opacity: .45; cursor: not-allowed; }
.app .btn svg { display: block; }

/* Segmented choices (Notes/Intervals, Strum/Arpeggio, click sounds) */
.app .display-toggle, .app .mode-toggle, .app .sounds {
  display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--control-line); background: var(--card); }
.app .seg { min-height: var(--tap); min-width: var(--tap); padding: 0 var(--sp-4); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink); font: 600 var(--fs-sm) var(--font-body); cursor: pointer; }
.app .seg + .seg { border-left: 0; }
.app .seg:hover:not(:disabled) { background: var(--sunken); }
.app .seg.on, .app .seg.on:hover { background: var(--ink); color: var(--cream); }
.app .seg:disabled { opacity: .45; cursor: not-allowed; }

/* Surfaces */
.app .board, .app .panel { background: var(--card); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--sp-4); }
.app .panel h2 { font: 400 var(--fs-xl)/1.1 var(--font-display); margin: 0 0 var(--sp-3); }
.app .panel-note { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }

/* Sound hint (stage 03 .hint) keeps its look inside the app column */
.app .hint.audio-hint { justify-self: start; }

/* How it works */
.app .help { margin-top: var(--sp-2); }
.app .help-body { gap: var(--sp-4); }
.app .help-item h3 { font: 700 var(--fs-md)/1.3 var(--font-body); margin: 0 0 var(--sp-1); }
.app .help-item p { color: var(--ink); }
.app .help-item a { font-weight: 600; }

.app .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* site.css also has a .seg (the stage 03 segmented container); inside the tools .seg is one button */
.app .seg { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; max-width: none;
  box-shadow: none; line-height: 1.2; white-space: nowrap; }
.app .hint.audio-hint.is-on { color: var(--muted); }
.app .hint.audio-hint.is-on::before { background: var(--control-line); box-shadow: none; }