/* ukuleletuner.co tool styles (grey-card standard) */
.tools{display:grid;gap:18px;padding-top:6px;padding-bottom:30px}
.tools .card{max-width:860px;width:100%;margin:0 auto}
.field{border:0;padding:0;margin:0 0 12px}
.field legend,.lab{font-weight:700;margin-bottom:6px;color:var(--card-ink);display:block}
input[type=range]{accent-color:var(--neon-lime);width:100%;min-height:36px}
.tool .btn-row{margin:10px 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.big-start{font-size:1.2rem;padding:14px 28px}
.t-display{background:var(--tile);border-radius:18px;padding:14px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:center;border:2px solid transparent}
.t-display[data-state=ok]{border-color:var(--neon-lime)}
.gauge{width:100%;height:auto;display:block}
.gauge .arc{fill:none;stroke:#8d97a8;stroke-width:3}
.gauge .zone{fill:none;stroke:var(--neon-lime);stroke-width:10}
.gauge .tick{stroke:#e3e8ef;stroke-width:2}
.gauge .lbl{fill:#e3e8ef;font:700 13px var(--font)}
.gauge .needle line{stroke:#ffe14a;stroke-width:4;stroke-linecap:round}
.gauge .needle{transition:transform .12s linear}
.t-display[data-state=ok] .needle line{stroke:var(--neon-lime)}
.gauge .hub{fill:#e3e8ef}
.t-read{text-align:center}
.t-notebox{display:flex;justify-content:center;align-items:baseline;gap:2px}
.t-note{font-size:4.2rem;font-weight:800;line-height:1;color:var(--t-cyan)!important;text-shadow:0 0 4px rgba(214,246,251,.25)}
.t-oct{font-size:1.4rem;font-weight:800;color:var(--card-ink-soft)!important}
.t-display[data-state=ok] .t-note{color:var(--t-lime)!important}
.t-cents{font-weight:800;font-size:1.3rem;font-variant-numeric:tabular-nums;margin:4px 0 0}
.t-hz{font-size:.9rem;color:var(--card-ink-soft)!important;font-variant-numeric:tabular-nums;margin:2px 0 0}
.t-msg{font-weight:800;color:var(--t-yellow)!important;margin:10px 0 0;min-height:1.4em}
.tool[data-state=ok] .t-msg{color:var(--t-lime)!important}
.t-strings,.r-strings{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.sbtn{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--field-line);background:var(--tile);color:var(--card-ink);font:700 1rem var(--font);cursor:pointer}
.sbtn.on{background:var(--neon-cyan);color:var(--on-neon);border-color:transparent}
.sbtn.hit{outline:3px solid var(--neon-lime);outline-offset:1px}
.rbtn{min-height:64px;min-width:120px;padding:8px 14px;border-radius:14px;border:1px solid var(--field-line);background:var(--tile);color:var(--card-ink);font:inherit;cursor:pointer;display:grid;text-align:left}
.rbtn b{font-size:1.6rem;font-weight:800;color:var(--t-cyan)}
.rbtn span{font-size:.82rem;color:var(--card-ink-soft)}
.rbtn.on{background:var(--neon-lime)}.rbtn.on b,.rbtn.on span{color:var(--on-neon)}
.chk{display:inline-flex;gap:8px;align-items:center;font-weight:700;color:var(--card-ink)}
.chk input{width:20px;height:20px;accent-color:var(--neon-lime)}
.t-err{margin-top:14px;padding:14px;border-radius:16px;background:#3b2730;border:1px solid #ffd6f5}
.t-err p,.t-err li,.t-err summary{color:#fff!important}
.t-err summary{font-weight:700;cursor:pointer;min-height:36px}
.privacy-note{font-size:.92rem;color:var(--card-ink-soft)!important}
.r-now{min-height:1.3em;font-weight:700;color:var(--t-lime)!important}
.steps li{margin-bottom:.4em}
.table-wrap{background:var(--card-bg);border-radius:var(--radius);padding:12px;overflow-x:auto;margin:0 0 1em}
.table-wrap caption{text-align:left;font-weight:700;padding:4px 6px 8px;color:var(--card-ink)}
.table-wrap table{width:100%;border-collapse:collapse}
.table-wrap th,.table-wrap td{padding:8px 10px;border-bottom:1px solid var(--card-rule);text-align:left;color:var(--card-ink)}
.chords{list-style:none;padding:0;margin:0 0 1.2em;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.chords li{background:#fff;border:1px solid #d5dae2;border-radius:12px;padding:8px 6px 4px;text-align:center}
.chords svg{width:100%;max-width:120px;height:auto}
.chords b{display:block;font-size:1.15rem;color:#141a26}
.chords small{display:block;color:#4a5468;font-size:.8rem;font-variant-numeric:tabular-nums}
.print-only{display:none}
@media (max-width:700px){.t-display{grid-template-columns:1fr}.t-note{font-size:3.4rem}}
@media print{
  body.chart-print .tools,body.chart-print .faq,body.chart-print .related,body.chart-print .updated,body.chart-print .hero .answer,body.chart-print .no-print{display:none!important}
  .chords{grid-template-columns:repeat(6,1fr);gap:3mm}
  .chords li{break-inside:avoid;border:0.5pt solid #999}
  .print-only{display:block}
}
