/* iCifra 0.8.52 — Tools page (Metronome, Tap Tempo) and the "metronome playing" pill.
   Uses the site's tokens (--surface, --surface-2, --line, --accent, --accent-2, --radius). Touch targets ≥ 44px. */
.tools-view .visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tools-head{flex-wrap:wrap}
#toolsTitle:focus{outline:none} /* focused by script when a tool opens (announced by screen readers); not a Tab stop */
.tools-head-actions{display:flex;flex-wrap:wrap;gap:8px}
.tools-head-actions .ghost{min-height:44px}
.tools-intro{margin:0 0 16px;color:var(--muted)}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.tool-card{display:flex;align-items:center;gap:14px;width:100%;min-height:96px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.tool-card:hover{border-color:var(--accent-2)}
.tool-card:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
.tool-card-icon{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:14px;background:var(--surface-2);color:var(--accent);font-size:28px;line-height:1}
.tool-card-text{display:grid;gap:4px;min-width:0;flex:1}
.tool-card-text strong{font-size:17px}
.tool-card-text span{color:var(--muted);font-size:14px;line-height:1.4}
.tool-card-go{color:var(--accent-2);font-size:20px}

.tool-panel{max-width:640px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.metro-display{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:10px}
.metro-bpm{font-size:64px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.metro-bpm-unit{color:var(--muted);font-weight:700}
.metro-beats{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:6px 0 18px}
.metro-beat{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--line);border-radius:50%;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.metro-beat.accent{border-color:var(--accent)}
.metro-beat.secondary{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.metro-beat.on{background:var(--accent-2);border-color:var(--accent-2);color:#04121a}
.metro-beat.accent.on{background:var(--accent);border-color:var(--accent);color:#1b1407}
.metro-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0}
.metro-bpm-controls input[type=range]{flex:1 1 160px;min-width:120px;height:44px;accent-color:var(--accent)}
.metro-row input[type=range]#metroVolume{flex:1 1 160px;height:44px;accent-color:var(--accent-2)}
.metro-step{width:48px;height:48px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);font-size:24px;font-weight:700;cursor:pointer}
.metro-number input{width:84px;height:48px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);font:700 18px/1 inherit;text-align:center}
.metro-label{color:var(--muted);font-size:14px;font-weight:700;min-width:110px}
.metro-signatures{display:flex;flex-wrap:wrap;gap:6px}
.metro-signatures button{min-width:56px;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);font-weight:700;cursor:pointer}
.metro-signatures button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface-2));color:var(--text)}
.metro-actions .button,.metro-actions .ghost{min-height:52px;padding:10px 20px}
.metro-start{min-width:150px;font-size:18px}
.metro-start.active{background:var(--accent-2);border-color:var(--accent-2);color:#04121a}
.metro-tap small{margin-left:6px;color:var(--muted);font-weight:600}
.metro-note{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.metro-status{min-height:1.2em;margin:6px 0 0;color:var(--accent);font-size:14px}
.tool-panel button:focus-visible,.tool-panel input:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}

.tap-pad{display:grid;place-items:center;align-content:center;gap:4px;width:100%;min-height:220px;padding:20px;border:2px dashed var(--line);border-radius:var(--radius);background:var(--surface-2);color:var(--text);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.tap-pad.counting{border-style:solid;border-color:var(--accent-2)}
.tap-pad.pulse{background:color-mix(in srgb,var(--accent-2) 14%,var(--surface-2))}
.tap-pad-bpm{font-size:72px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.tap-pad-unit{color:var(--muted);font-weight:700}
.tap-pad-hint{margin-top:6px;color:var(--accent-2);font-weight:700}
.tap-info{min-height:1.3em;margin:12px 0 0;font-size:15px}

/* chord dictionary (0.8.54): the diagram itself uses the player's .fretboard styles */
.chord-search{width:100%;min-height:48px;margin:6px 0 0;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);font:600 18px/1 inherit}
.chord-search:focus-visible,.dict-chip:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
.chord-results{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 16px}
.dict-chip{min-width:52px;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);font-weight:700;cursor:pointer}
.dict-chip[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface-2))}
.chord-dict-detail .fretboard{display:block;width:min(240px,100%);height:auto;margin:8px auto}
.chord-dict-detail:empty{display:none}

/* playing pill: bottom-left, above the bottom navigation on phones and tablets */
.metronome-pill{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:6px;padding:4px 4px 4px 12px;border:1px solid var(--accent-2);border-radius:999px;background:var(--surface);box-shadow:0 6px 20px rgb(0 0 0 / .35)}
.metronome-pill[hidden]{display:none}
.metro-pill-dot{width:12px;height:12px;border-radius:50%;background:var(--accent-2);opacity:.35}
.metro-pill-dot.flash{opacity:1}
.metro-pill-dot.accent{background:var(--accent)}
.metro-pill-open,.metro-pill-stop{min-height:40px;border:0;background:none;color:var(--text);font:700 14px/1 inherit;cursor:pointer}
.metro-pill-open{padding:0 6px}
.metro-pill-stop{width:40px;border-radius:50%;background:var(--surface-2);color:var(--accent)}
.metro-pill-open:focus-visible,.metro-pill-stop:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}
@media(max-width:1023px){.metronome-pill{bottom:calc(84px + env(safe-area-inset-bottom,0px))}body[data-view="songView"] .metronome-pill{bottom:calc(12px + env(safe-area-inset-bottom,0px))}}
@media(max-width:600px){
 .tool-panel{padding:14px}
 .metro-bpm{font-size:54px}
 .metro-label{min-width:0;width:100%}
 .metro-beat{width:36px;height:36px}
 .metro-actions .button,.metro-actions .ghost{flex:1 1 auto}
 .tap-pad{min-height:200px}
}
@media print{.metronome-pill{display:none!important}}
/* 0.8.57: "Back to <song>" keeps the normal ghost-button look (no link underline, no text-selection highlight on tap) */
#toolsBackToSong{text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

/* 0.8.60: use the available width for selection beside the chord, without changing other tools. */
.chords-panel{max-width:none}
.chord-dict-detail{width:100%;box-sizing:border-box}
@media(min-width:760px){
 .chords-panel:not([hidden]){display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1fr);grid-template-rows:auto auto auto 1fr;column-gap:32px;align-items:start}
 .chords-panel>label{grid-column:1;grid-row:1}
 .chords-panel>.chord-search{grid-column:1;grid-row:2;box-sizing:border-box}
 .chords-panel>#chordSearchHelp{grid-column:1;grid-row:3}
 .chords-panel>.chord-results{grid-column:1;grid-row:4;align-content:start;margin-bottom:0}
 .chords-panel>.chord-dict-detail{grid-column:2;grid-row:1 / 5;max-width:480px;margin:0 auto;padding:0 0 0 24px;border-left:1px solid var(--line)}
 .chord-dict-detail .fretboard{width:200px;width:clamp(140px,calc(100vh - 460px),240px);margin:4px auto}
 .chord-dict-detail .diagram-symbol{font-size:40px}
}
@media(min-width:760px) and (max-height:650px){
 .chords-panel{padding:10px 20px}
 .chord-dict-detail .metro-note{margin-top:4px}
}
/* Tools showcase: scoped to the landing page; functional panels keep their own layout. */
.tools-view[data-tools-landing="true"] .tools-head{position:relative;isolation:isolate;border-bottom:0;margin-bottom:8px;padding:4px 0 0}
.tools-view[data-tools-landing="true"] .tools-head:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#07111e 10%,#07111eaa 55%,#07111e33),url('assets/images/tools-guitar.webp') right center/cover no-repeat;opacity:.8;pointer-events:none}
.tools-view[data-tools-landing="true"] #toolsTitle{font-size:clamp(38px,5vw,66px);line-height:1.1;letter-spacing:-.04em;background:linear-gradient(100deg,#f5f8ff 15%,#ffe19a 75%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:8px}
.tools-subtitle{font-size:clamp(15px,1.7vw,21px);font-weight:600;color:#b6cde4;margin:6px 0 0;line-height:1.4}
.tools-intro{font-size:14px;line-height:1.5;max-width:1000px;margin-bottom:20px;color:#aac3dc}
.tools-grid{grid-template-columns:minmax(0,1fr);gap:14px}
.tools-grid .tool-card{position:relative;isolation:isolate;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto 70px;gap:10px 14px;align-items:start;min-width:0;min-height:190px;padding:16px;overflow:hidden;border-radius:16px;border-color:#244258;background:radial-gradient(ellipse at 10% 100%,#153146 0,transparent 65%),linear-gradient(135deg,#0b1b2b,#06121e);color:#f1f6ff;transition:transform .16s,border-color .16s,box-shadow .16s}
.tools-grid .tool-card:hover{transform:translateY(-2px);border-color:#4da8bc;box-shadow:0 8px 20px #0003}
.tools-grid .tool-card:active{transform:translateY(0)}
.tools-grid .tool-card:focus-visible{outline:3px solid #21ded2;outline-offset:3px}
.tools-grid .tool-card-icon{width:48px;height:54px;border-radius:15px;background:linear-gradient(145deg,#d04f43,#742b27);color:#fff3df;box-shadow:inset 0 1px 0 #ffffff33;grid-column:1;grid-row:1}
.tools-grid .tool-card-icon svg{width:29px;height:32px}
.tools-grid .tool-card-tap-tempo .tool-card-icon,.tools-grid .tool-card-scales .tool-card-icon{background:linear-gradient(145deg,#118bf6,#1536b9)}
.tools-grid .tool-card-chords .tool-card-icon,.tools-grid .tool-card-chord-finder .tool-card-icon{background:linear-gradient(145deg,#b84061,#65243c)}
.tools-grid .tool-card-capo .tool-card-icon{background:linear-gradient(145deg,#f1a031,#92500d)}
.tools-grid .tool-card-reference-tones .tool-card-icon{background:linear-gradient(145deg,#049b9b,#03505a)}
.tools-grid .tool-card-text{grid-column:2;grid-row:1;gap:7px}
.tools-grid .tool-card-text strong{font-size:16px;line-height:1.25}
.tools-grid .tool-card-text>span{font-size:13px;line-height:1.5;color:#b2c9de}
.tool-card-art{grid-column:1/-1;grid-row:2;width:200px;height:112px;align-self:end;margin-bottom:-20px;pointer-events:none}
.tools-grid .tool-card-go{position:absolute;bottom:16px;right:16px;display:grid;place-items:center;width:40px;height:40px;border:1px solid #31556e;border-radius:12px;background:linear-gradient(#132d42,#0b1b29);color:#e5f1fc;font-size:23px;transition:transform .16s}
.tools-grid .tool-card:hover .tool-card-go{transform:translateX(2px)}
.tools-other-heading{grid-column:1/-1;margin:8px 0 0}
.tools-other-heading h2{font-size:22px;margin:0 0 4px;color:#f2f6ff}
.tools-other-heading p{font-size:14px;color:#aac3dc;margin:0}
.tools-grid .tool-feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:14px;min-height:0;padding:20px;border:2px solid #02aab9;border-radius:24px;background:radial-gradient(ellipse at 10% 0,#07414b88,transparent 60%),linear-gradient(125deg,#051c27,#03101e);box-shadow:inset 1px 1px 0 #46f8e966,0 0 20px #00b8bc14;overflow:hidden}
.tool-feature-copy{display:flex;flex-direction:column;align-items:start;gap:12px;min-width:0}
.tool-feature-badge{padding:6px 10px;border-radius:10px;background:#6b5c273d;color:#ffcf68;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.03em}
.tool-feature-heading{display:flex;align-items:center;gap:16px}
.tools-grid .tool-feature .tool-card-icon{width:60px;height:64px;border:2px solid #00dbd4;border-radius:18px;background:linear-gradient(145deg,#00575f,#002d3b);color:#12e5db}
.tools-grid .tool-feature .tool-card-icon svg{width:34px;height:40px}
.tool-feature-heading>strong{font-size:32px;line-height:1.1;letter-spacing:-.03em}
.tool-feature-description{font-size:16px;line-height:1.4;color:#c0d6eb}
.tool-feature-detail{font-size:13px;line-height:1.5;color:#94b2ca}
.tool-feature-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:48px;padding:10px 22px;border-radius:24px;background:linear-gradient(100deg,#00e2d4,#00cbbf);color:#001b25;font-size:16px;font-weight:800;box-shadow:0 5px 15px #00dace15}
.tool-feature-cta>span{font-size:24px;line-height:1}
.tools-preview{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;width:100%;gap:5px;padding-bottom:18px;pointer-events:none}
.tools-preview-dial{display:block;width:100%;max-width:510px;min-width:0}
.tools-preview .toolsPreview-gauge{display:block;width:100%;height:auto}
.tools-preview .toolsPreview-gauge text{fill:#bfd5e7;font:14px sans-serif}
.tools-preview .toolsPreview-tick{stroke:#a7c4d3;stroke-width:1}
.tools-preview .toolsPreview-tick.major{stroke:#e4eff5;stroke-width:2}
.tools-preview .toolsPreview-zone{fill:none;stroke-width:5}
.tools-preview .red{stroke:#f06f75}.tools-preview .amber{stroke:#f7d275}.tools-preview .green{stroke:#24e3cf}
.tools-preview .toolsPreview-center{stroke:#b3fff1;stroke-width:3}
#toolsPreviewNeedle{fill:#19decd;transform:rotate(3.4deg);transform-origin:300px 270px}
.tools-preview-digital{display:flex;align-items:center;justify-content:center;gap:34px;padding:6px 15px;border:1px solid #26718b;border-radius:16px;background:linear-gradient(#0b2434,#04101b);box-shadow:inset 0 0 0 3px #03101a;color:#eff8ff;max-width:88%;margin:auto}
.tools-preview-digital>b{font-size:42px;line-height:1.1}.tools-preview-digital sub{font-size:.5em}
.tools-preview-digital>span{font-size:24px;font-weight:700}.tools-preview-digital small{display:block;font-size:12px;font-weight:400;color:#afcada}
.tools-preview-label{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#7fa4b8;font-size:10px}
.tools-preview-guitar{display:none;max-width:190px;width:28%;flex-shrink:0;align-self:stretch;overflow:hidden}
.tools-preview-guitar svg{width:100%;height:100%;max-height:320px;display:block}
.tools-preview-guitar [data-preview-string]{stroke:#d8c593}
.tools-preview-guitar text{fill:#c8deeb;font:13px sans-serif}
.tools-preview-guitar .toolsPreview-peg-number{fill:#081420;font-weight:bold}
@media(max-width:599px){.tools-grid .tool-feature{padding:16px;gap:6px}.tool-feature-copy{gap:10px}.tool-feature-heading>strong{font-size:30px}.tools-preview{max-width:310px;margin:auto}.tool-feature-cta{width:100%;margin-top:2px}.tool-feature-description{font-size:15px}.tool-feature-detail{font-size:12px}.tools-grid .tool-feature .tool-card-icon{width:52px;height:56px}.tools-preview-digital>b{font-size:30px}.tools-preview-digital>span{font-size:20px}.tools-grid .tool-card:not(.tool-feature){grid-template-columns:48px minmax(0,1fr);min-height:180px}.tool-card-art{width:175px;height:100px}}
@media(min-width:600px){.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tools-grid .tool-feature{grid-template-columns:minmax(230px,.85fr) minmax(0,1.15fr);align-items:center;padding:24px}.tool-feature-description{font-size:17px}.tools-preview{padding-bottom:22px}.tools-preview-guitar{display:block}.tool-feature-copy{gap:16px}.tool-feature-detail{max-width:300px}.tool-feature-cta{margin-top:4px}}
@media(min-width:1000px){.tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-feature-heading>strong{font-size:42px}.tools-grid .tool-feature .tool-card-icon{width:78px;height:82px}.tools-grid .tool-feature .tool-card-icon svg{width:40px;height:48px}.tools-grid .tool-feature{grid-template-columns:minmax(300px,.8fr) minmax(0,1.7fr);padding:26px 30px;gap:30px}.tool-feature-description,.tool-feature-detail{max-width:330px}.tool-feature-description{font-size:18px}}
@media(min-width:1200px){.tools-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.tools-grid .tool-card:not(.tool-feature){min-height:230px;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto 80px}.tool-card-art{width:200px;height:115px}.tools-preview-guitar{max-width:200px}.tool-feature-copy{gap:18px}.tool-feature-cta{margin-top:12px;min-width:220px}}
@media(prefers-reduced-motion:reduce){.tools-grid .tool-card,.tools-grid .tool-card-go{transition:none}.tools-grid .tool-card:hover,.tools-grid .tool-card:hover .tool-card-go{transform:none}}

.tools-preview-strings{display:none;flex-shrink:0;align-self:center;gap:13px;color:#c5d9e8}
.tools-preview-strings>span{display:flex;gap:9px;align-items:center;font-size:13px;text-align:left}
.tools-preview-strings b{display:grid;place-items:center;width:29px;height:29px;border:1px solid #76652d;border-radius:50%;color:#ffd272;font-size:16px;font-weight:500}
.tools-preview-strings small{display:block;font-size:10px;color:#83a2b8;margin-top:3px;white-space:nowrap}
@media(min-width:1200px){.tools-preview-strings{display:flex;flex-direction:column}.tools-preview-guitar{width:19%;max-width:145px}.tools-preview-dial{flex:1}.tools-preview{gap:8px}.tools-preview-guitar svg{height:320px}}

/* The featured tuner takes two regular card slots, leaving room for tools beside it. */
@media(min-width:1000px){
 .tools-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
 .tools-other-heading{display:none}
 .tools-grid .tool-feature{grid-column:span 2;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:16px;min-height:230px;border-radius:18px}
 .tool-feature-copy{gap:8px;justify-content:center}
 .tool-feature-badge{font-size:10px;padding:4px 8px}
 .tool-feature-heading{gap:10px}.tool-feature-heading>strong{font-size:28px}
 .tools-grid .tool-feature .tool-card-icon{width:40px;height:44px;border-radius:12px}
 .tools-grid .tool-feature .tool-card-icon svg{width:24px;height:30px}
 .tool-feature-description{font-size:14px;line-height:1.4}
 .tool-feature-detail{display:none}
 .tool-feature-cta{min-width:0;min-height:44px;margin-top:2px;padding:8px 15px;font-size:14px;gap:12px}
 .tools-preview{padding-bottom:16px;gap:0}
 .tools-preview-guitar,.tools-preview-strings{display:none}
 .tools-preview-dial{width:100%;max-width:330px}
 .tools-preview-digital{gap:20px;padding:5px 10px}
 .tools-preview-digital>b{font-size:28px}.tools-preview-digital>span{font-size:20px}
 .tools-preview-label{font-size:9px}
 .tools-grid .tool-card:not(.tool-feature){min-height:230px;grid-template-rows:auto 80px}
}

/* Locally generated product artwork replaces the flat illustration layer only. */
.tools-grid img.tool-card-art{display:block;width:230px;max-width:calc(100% - 28px);height:124px;object-fit:contain;object-position:left bottom;margin-bottom:-16px}
@media(max-width:599px){.tools-grid img.tool-card-art{width:200px;height:110px}}

@media(max-width:599px){.tools-grid .tool-card:not(.tool-feature){grid-template-rows:auto 110px;min-height:220px}}