:root{
  --bg:#14161a; --panel:#1d2026; --panel2:#242830; --text:#e8e6e1; --muted:#9a9891;
  --accent:#f28c28; --accent2:#e0b04a; --sel:#4fb0e8; --dot:#d8d4cc; --scale:#7d8796;
  --wood:#3b2a1e; --inlay:#c9b48c; --nut:#e6dccb; --fretwire:#a8a49c; --string:#cfc8b8;
  --border:#31353d; --danger:#d9534f; --ok:#4caf7d;
  --accent-text:#f28c28; /* accent used as TEXT colour (darker in light mode for contrast) */
  /* fretboard marks sit on dark wood in both themes, so these never flip */
  --fb-dot:#d8d4cc; --fb-scale:#8a94a3; --fb-sel:#4fb0e8; --fb-bad:#e0605c; --mark-text:#14161a;
  --radius:12px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f5f3ee; --panel:#ffffff; --panel2:#f0ede6; --text:#1e1f22; --muted:#625f59; --border:#e0dcd2; --dot:#3a3a3a; --scale:#5f6b7a; --sel:#1f7fc2; --nut:#e6dccb;
    --accent-text:#b35a00; --accent2:#8a6410; --danger:#c0392b; --ok:#2e8b57; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif}
h2{margin:0 0 .5rem;font-size:1.15rem;letter-spacing:.2px}
h3{margin:.8rem 0 .4rem;font-size:1rem;color:var(--accent2)}
a{color:var(--sel)}
.hidden{display:none!important}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1.2rem;padding:calc(.6rem + env(safe-area-inset-top)) max(1.2rem, env(safe-area-inset-right)) .6rem max(1.2rem, env(safe-area-inset-left));background:var(--panel);border-bottom:1px solid var(--border)}
.brand{font-weight:700;font-size:1.05rem}
.tabs{display:flex;gap:.25rem;flex:1}
.tabs button{background:transparent;border:0;color:var(--muted);padding:.5rem .9rem;border-radius:8px;font-size:.95rem;cursor:pointer}
.tabs button.active{background:var(--panel2);color:var(--text)}
.tabs button:hover{color:var(--text)}
.topbar-right{display:flex;gap:.8rem;align-items:center;font-size:.9rem;color:var(--muted)}
main{padding:1rem max(1.2rem, env(safe-area-inset-right)) calc(4rem + env(safe-area-inset-bottom)) max(1.2rem, env(safe-area-inset-left));max-width:1400px;margin:0 auto}
.tab{display:none}.tab.active{display:block}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;margin-bottom:1rem}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem}
.controls{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;font-size:.9rem;color:var(--muted)}
.controls label{display:flex;align-items:center;gap:.35rem}
select,input[type=text],input[type=number],input[type=date],textarea{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.35rem .5rem;font:inherit;font-size:.9rem}
input[type=number]{width:5.5rem}
textarea{width:100%;resize:vertical}
.btn{background:var(--accent);color:#141414;border:0;border-radius:8px;padding:.45rem .9rem;font-weight:600;cursor:pointer;font:inherit;font-size:.9rem}
.btn:hover{filter:brightness(1.08)}
.btn.small{padding:.3rem .65rem;font-size:.82rem}
.btn.ghost{background:var(--panel2);color:var(--text);border:1px solid var(--border)}
.btn.danger{background:var(--danger);color:#fff}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap}
.hint{color:var(--muted);font-size:.88rem;margin:.3rem 0 .7rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:1000px){.two-col,.three-col{grid-template-columns:1fr}}
.toggle{display:flex;align-items:center;gap:.3rem;cursor:pointer}
.fretboard-host{overflow-x:auto;padding:.3rem 0}
.fretboard{min-width:700px}
.fretboard.compact{min-width:0}
.identify .primary{font-size:1.5rem;font-weight:700;color:var(--accent-text)}
.identify .alt{color:var(--muted);font-size:.9rem;margin-top:.2rem}
.identify .notes{margin-top:.3rem;font-size:.9rem}
.pill{display:inline-block;background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:.05rem .55rem;font-size:.82rem;margin:.1rem .15rem;cursor:pointer}
.pill.root{border-color:var(--accent);color:var(--accent-text)}
.pill:hover{border-color:var(--sel)}
.scale-info .row{margin:.2rem 0}
.formula{color:var(--muted);font-size:.9rem;margin:.2rem 0 .6rem}
.formula b{color:var(--text)}
.voicing-grid{display:flex;flex-wrap:wrap;gap:.6rem}
.voicing{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:.4rem .5rem .2rem;text-align:center;cursor:pointer;color:var(--text)}
.voicing:hover{border-color:var(--accent)}
.voicing .cap{font-size:.75rem;color:var(--muted);margin-top:-.2rem}
.voicing .name{font-size:.85rem;font-weight:600}
.key-chords{display:grid;grid-template-columns:repeat(7,1fr);gap:.5rem;margin:.5rem 0}
@media (max-width:900px){.key-chords{grid-template-columns:repeat(4,1fr)}}
.kc{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:.5rem;text-align:center;cursor:pointer}
.kc:hover{border-color:var(--accent)}
.kc .roman{color:var(--muted);font-size:.8rem}
.kc .name{font-size:1.15rem;font-weight:700}
.kc .sev{font-size:.85rem;color:var(--accent2)}
.kc .fn{font-size:.75rem;color:var(--muted)}
.progressions{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.6rem}
.prog{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:.5rem .7rem}
.prog .title{font-weight:600}
.prog .chords{margin:.2rem 0}
.prog .desc{color:var(--muted);font-size:.82rem}
.circle-host svg{width:100%;max-width:440px;display:block;margin:0 auto}
.circle-host .seg{cursor:pointer}
.circle-host .seg:hover path{fill-opacity:.9}
.key-detail .row{margin:.35rem 0}
.key-detail .lbl{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.5px}
.ref-table{width:100%;border-collapse:collapse;font-size:.9rem}
.ref-table td,.ref-table th{padding:.3rem .5rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.ref-table th{color:var(--muted);font-weight:600}
.ref-table tr.clickable{cursor:pointer}.ref-table tr.clickable:hover td{background:var(--panel2)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.7rem}
.card{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:.7rem .9rem}
.card h4{margin:0 0 .3rem;font-size:1rem}
.card p{margin:.3rem 0;font-size:.9rem}
.card ul{margin:.3rem 0 .3rem 1.1rem;padding:0;font-size:.9rem}
.card summary{cursor:pointer;font-weight:600}
.timer-row{display:flex;align-items:center;gap:1rem;margin:.4rem 0}
.timer{font-size:2.4rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px}
.metro{margin-top:.8rem;border-top:1px solid var(--border);padding-top:.7rem}
.metro-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.metro input[type=range]{width:100%;margin-top:.5rem}
.metro-beats{display:flex;gap:.4rem;margin-top:.5rem}
.metro-beats span{width:14px;height:14px;border-radius:50%;background:var(--border);display:inline-block}
.metro-beats span.on{background:var(--accent)}
.metro-beats span.on.accent{background:var(--sel)}
.form label{display:block;margin:.45rem 0;font-size:.88rem;color:var(--muted)}
.form label input,.form label select,.form label textarea{display:block;width:100%;margin-top:.15rem;color:var(--text)}
.form-row{display:flex;gap:.6rem}.form-row label{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.2rem}
.chip{border:1px solid var(--border);border-radius:999px;padding:.15rem .6rem;cursor:pointer;font-size:.82rem;color:var(--text);background:var(--panel2)}
.chip.on{background:var(--accent);color:#141414;border-color:var(--accent)}
.plan .item{display:flex;gap:.6rem;padding:.35rem 0;border-bottom:1px solid var(--border);font-size:.9rem}
.plan .item .min{color:var(--accent-text);font-weight:700;min-width:3.2rem}
.plan .item .what b{display:block}
.plan .item .what span{color:var(--muted);font-size:.83rem}
.stats{display:flex;gap:1.2rem;flex-wrap:wrap}
.stat{text-align:center}.stat .v{font-size:1.4rem;font-weight:700;color:var(--accent-text)}.stat .l{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.chart-host{overflow-x:auto;margin-top:.5rem}
.chart-host svg{width:100%;height:auto;max-height:220px}
.hist{width:100%;border-collapse:collapse;font-size:.88rem}
.hist td,.hist th{padding:.35rem .5rem;border-bottom:1px solid var(--border);vertical-align:top;text-align:left}
.hist .acts{white-space:nowrap;text-align:right}
.hist .nowrap{white-space:nowrap}
.hist .notes{min-width:10rem;white-space:pre-line}
.icon-btn{background:transparent;border:1px solid transparent;border-radius:8px;color:var(--muted);cursor:pointer;font:inherit;min-width:2rem;min-height:2rem;padding:0 .35rem}
.icon-btn:hover{border-color:var(--border);color:var(--text)}.icon-btn.del:hover{color:var(--danger)}
.hist th{color:var(--muted)}
.song-board{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
@media (max-width:1000px){.song-board{grid-template-columns:repeat(2,1fr)}}
.col h4{margin:0 0 .4rem;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.song{background:var(--panel2);border:1px solid var(--border);border-radius:10px;margin-bottom:.5rem}
.song-open{display:block;width:100%;background:none;border:0;border-radius:10px;padding:.5rem .7rem;text-align:left;font:inherit;color:inherit;cursor:pointer}
.song-open > span{display:block}
.song-links{display:flex;flex-wrap:wrap;gap:.2rem .7rem;padding:0 .7rem .5rem;font-size:.82rem}
.song-links a{text-decoration:none}.song-links a:hover{text-decoration:underline}
.empty-slot{display:block;width:100%;border:1px dashed var(--border);border-radius:10px;padding:.55rem;background:transparent;color:var(--muted);font:inherit;font-size:.85rem;cursor:pointer;text-align:center}
.empty-slot:hover{border-color:var(--accent);color:var(--text)}
.song-history{background:var(--panel2);border-radius:8px;padding:.5rem .7rem;font-size:.88rem;margin:.2rem 0 .5rem}
.song:hover{border-color:var(--accent)}
.song .t{font-weight:600}.song .a{color:var(--muted);font-size:.85rem}
.song .meta{font-size:.8rem;color:var(--muted);margin-top:.2rem}
.song .bar{height:4px;background:var(--border);border-radius:2px;margin-top:.4rem;overflow:hidden}
.song .bar i{display:block;height:100%;background:var(--ok)}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem;width:min(560px,95vw)}
dialog::backdrop{background:rgba(0,0,0,.55)}
.chord-diagram{color:var(--text)}
kbd{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:0 .3rem;font-size:.8rem}
.empty{color:var(--muted);font-style:italic}
/* Trainer */
.tr-prompt{font-size:1.25rem;margin:.6rem 0 .3rem;min-height:1.8rem}
.tr-prompt .big{font-size:1.9rem;color:var(--accent-text)}
.tr-answers{margin:.4rem 0}
.chips.big .chip{font-size:1.05rem;padding:.35rem .9rem}
.tr-session{color:var(--muted);font-size:.9rem;margin:.4rem 0}
.lvl{border:1px solid var(--border);border-radius:8px;padding:.45rem .7rem;margin:.35rem 0;cursor:pointer;background:var(--panel2)}
.lvl:hover{border-color:var(--accent)}
.lvl.cur{border-color:var(--accent)}
.lvl.passed{opacity:.75}
.lvl-h{display:flex;justify-content:space-between;gap:.5rem;font-size:.92rem}
.lvl-p{color:var(--muted);font-size:.8rem;white-space:nowrap}
.heat{border-collapse:separate;border-spacing:2px;font-size:.75rem;width:100%}
.heat th{color:var(--muted);font-weight:600;padding:.1rem}
.heat td{text-align:center;padding:.25rem 0;border-radius:4px;min-width:1.6rem;color:var(--text)}
/* Videos */
.nudge{background:var(--panel2);border-left:3px solid var(--accent);border-radius:8px;padding:.6rem .8rem;margin:.4rem 0 .6rem;font-size:.95rem}
.vid{border:1px solid var(--border);border-radius:8px;padding:.5rem .7rem;margin-bottom:.4rem;background:var(--panel2)}
.vid-h{display:flex;justify-content:space-between;gap:.6rem;cursor:pointer;flex-wrap:wrap}
.vid-h .t{font-weight:600}
.vid.reviewed .vid-h .t::after{content:' ✓';color:var(--ok)}
.vid-list{max-height:520px;overflow:auto}

/* Tuner */
.tuner{margin-top:.8rem;border-top:1px solid var(--border);padding-top:.7rem}
.tn-display{display:flex;align-items:center;gap:.8rem;margin:.4rem 0}
.tn-gauge{width:190px;flex:none}
.tn-read #tnNote{font-size:2.6rem;font-weight:700;line-height:1}
.tn-read sub{font-size:1rem;color:var(--muted)}
.tn-read #tnCents{font-size:1.1rem;color:var(--muted);margin-left:.4rem}
/* Scale explorer */
.legend{display:flex;gap:.8rem;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin:.2rem 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.3rem;vertical-align:middle}

/* ---------- Phones / tablets / home-screen app ---------- */
html{-webkit-text-size-adjust:100%}
/* visually hidden but still tappable via its <label> (iOS ignores labels for display:none file inputs on some versions) */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}
button,.btn,.chip,.pill,.kc,.voicing,.song,.lvl,.hit,.seg,.vid-h{touch-action:manipulation}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
dialog{max-height:calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto}
/* Status bar is translucent in the home-screen app; keep the strip behind it dark (home-screen app only; in a Safari tab the bar matches the white header) so the white clock stays readable in light mode */
@media (prefers-color-scheme: light) and (display-mode: standalone){
  .topbar{background:linear-gradient(#1d2026 0 env(safe-area-inset-top), var(--panel) env(safe-area-inset-top))}
}
/* Touch screens: 16px inputs stop iOS from zooming on focus; bigger tap targets */
@media (pointer:coarse){
  select,input[type=text],input[type=number],input[type=date],textarea{font-size:16px}
  .tabs button{padding:.6rem .9rem}
  .chip{padding:.3rem .75rem}
}
@media (max-width:820px){
  .topbar{flex-wrap:wrap;gap:.4rem .8rem;padding-left:max(.8rem, env(safe-area-inset-left));padding-right:max(.8rem, env(safe-area-inset-right))}
  .topbar-right{margin-left:auto;gap:.5rem}
  .tabs{order:3;flex:1 1 100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none;white-space:nowrap}
  main{padding-left:max(.7rem, env(safe-area-inset-left));padding-right:max(.7rem, env(safe-area-inset-right))}
  .panel{padding:.8rem .85rem}
  .form-row{flex-wrap:wrap}
  .form-row label{min-width:8rem}
  .timer{font-size:2rem}
  .tn-display{flex-wrap:wrap}
}
@media (max-width:560px){
  .song-board{grid-template-columns:1fr}
  .key-chords{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:1fr}
  .progressions{grid-template-columns:1fr}
}

/* ---------- Controls rendered as real <button>s (keyboard + screen reader) ---------- */
button.chip,button.pill,button.kc,button.voicing,button.lvl{font:inherit;text-align:inherit;-webkit-appearance:none;appearance:none}
button.chip,button.pill{font-size:.82rem;color:var(--text);line-height:1.4}
button.pill.root{color:var(--accent-text)}
button.kc,button.voicing{color:var(--text)}
button.kc{width:100%}
.kc > span,.voicing > .cap{display:block}
button.lvl{display:block;width:100%;color:var(--text)}
.chip.static,.pill.static{cursor:default}
.chips-label{align-self:center;font-size:.82rem;color:var(--muted);margin-right:.15rem}
.form .field{display:block;margin:.45rem 0;font-size:.88rem;color:var(--muted)}

/* ---------- Focus + motion ---------- */
:where(button,.btn,.chip,.pill,.kc,.voicing,.lvl,select,input,textarea,a,summary,[tabindex]):focus-visible{outline:2px solid var(--sel);outline-offset:2px}
.circle-host .seg:focus-visible{outline:none}.circle-host .seg:focus-visible path{stroke:var(--sel);stroke-width:3}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- Wide content scrolls inside its panel, never the page ---------- */
/* clip (not hidden) so the sticky header keeps working */
@supports (overflow-x:clip){ html,body{overflow-x:clip} }
.table-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* ---------- Toast + data banner ---------- */
.toast{position:fixed;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:20;max-width:calc(100vw - 2rem);background:var(--text);color:var(--bg);padding:.6rem 1rem;border-radius:999px;font-weight:600;font-size:.92rem;box-shadow:0 4px 16px rgba(0,0,0,.25);opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}.toast.show.interactive{pointer-events:auto}
.toast-btn{background:transparent;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:.2rem .3rem;margin-left:.3rem}
.data-banner{max-width:1400px;margin:1rem auto 0;padding:.8rem 1rem;border:1px solid var(--danger);border-left-width:4px;border-radius:10px;background:var(--panel);font-size:.92rem;display:grid;gap:.5rem}
.data-banner:not(.hidden){margin-left:max(.7rem, env(safe-area-inset-left));margin-right:max(.7rem, env(safe-area-inset-right))}
@media (min-width:1440px){ .data-banner:not(.hidden){margin-left:auto;margin-right:auto} }

/* ---------- Trainer: Learn mode hides the quiz-only controls ---------- */
#tab-trainer.learn #trStrings,#tab-trainer.learn #trSkip,#tab-trainer.learn .tr-naturals{display:none}

/* ---------- Touch: 44px-ish tap targets ---------- */
@media (pointer:coarse){
  .btn,.tabs button{min-height:44px}
  .btn.small{min-height:40px;padding:.45rem .8rem}
  .chip{min-height:40px;padding:.4rem .8rem;display:inline-flex;align-items:center}
  button.pill{min-height:36px;padding:.35rem .7rem;display:inline-flex;align-items:center;gap:.25rem}
  .toggle{min-height:44px}
  .toggle input{width:20px;height:20px}
  .icon-btn{min-width:44px;min-height:44px}
  .empty-slot,.song-links a{min-height:40px;display:flex;align-items:center;justify-content:center}
  .song-links a{justify-content:flex-start}
}
/* Phones: tab strip shows it scrolls; tables hide low-value columns */
@media (max-width:820px){
  .tabs:not(.at-end){-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
}
@media (max-width:560px){
  .hist .c-tempo,.hist .c-feel{display:none}
  .hist .notes{min-width:8rem}
}
/* Phones: brand + settings on one row so the header doesn't eat the screen */
@media (max-width:560px){
  .topbar{row-gap:.2rem}
  .brand{font-size:.9rem;white-space:nowrap}
  .topbar-right{gap:.25rem;font-size:.82rem;flex-wrap:nowrap;min-width:0}
  .topbar-right .toggle{min-height:36px}
  #tonePreset{max-width:6rem;padding:.25rem .2rem}
  #toneTest{display:none} /* changing the tone already plays a test strum */
  .lbl-long{display:none}
  .tabs button{padding:.45rem .7rem}
}

/* ---------- GitHub sync: header indicator + panel ---------- */
.sync-btn{display:inline-flex;align-items:center;gap:.35rem;background:transparent;border:1px solid var(--border);border-radius:999px;color:var(--muted);font:inherit;font-size:.82rem;padding:.2rem .6rem;cursor:pointer;white-space:nowrap}
.sync-btn:hover{border-color:var(--accent);color:var(--text)}
.sync-dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--muted);flex:none}
[data-state="synced"] .sync-dot,.sync-dot[data-state="synced"]{background:var(--ok)}
[data-state="syncing"] .sync-dot,.sync-dot[data-state="syncing"]{background:var(--sel);animation:syncPulse 1s ease-in-out infinite alternate}
[data-state="offline"] .sync-dot,.sync-dot[data-state="offline"]{background:var(--accent2)}
[data-state="error"] .sync-dot,.sync-dot[data-state="error"],[data-state="blocked"] .sync-dot,.sync-dot[data-state="blocked"]{background:var(--danger)}
[data-state="notconnected"] .sync-dot{background:transparent;border:1.5px solid var(--muted)}
@keyframes syncPulse{from{opacity:1}to{opacity:.35}}
@media (prefers-reduced-motion:reduce){ [data-state="syncing"] .sync-dot,.sync-dot[data-state="syncing"]{animation:none} }
.sync-panel .panel-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.sync-panel h3{margin:0}
.sync-panel p{margin:.5rem 0}
.sync-panel ol{margin:.4rem 0;padding-left:1.3rem}
.sync-panel li{margin:.2rem 0}
.sync-panel ul{margin:.3rem 0;padding-left:1.2rem}
.sync-howto{margin:.6rem 0}
.sync-howto summary{cursor:pointer;color:var(--sel)}
.sync-token{margin-top:.6rem}
.sync-token label{display:block;font-weight:600;margin-bottom:.3rem}
.sync-token .btn-row input{flex:1 1 12rem;min-width:0;background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.45rem .6rem;font:inherit}
.sync-err{color:var(--danger);min-height:1em}
.sync-note{border-left:3px solid var(--accent2);padding:.3rem .6rem;background:var(--panel2);border-radius:4px}
.sync-panel code{overflow-wrap:anywhere}
.sync-panel a{color:var(--sel)}
.sync-panel a.btn{text-decoration:none;color:inherit}
@media (pointer:coarse){ .sync-btn{min-height:36px} }
@media (max-width:560px){
  .sync-btn{padding:.2rem .45rem}
  .sync-btn .sync-lbl{display:none} /* dot only on phones; the panel has the words */
  .sync-btn[data-state="error"] .sync-lbl{display:inline}
}