/* Barre Chord Bootcamp: Stroombundel family, Brisa tokens. Dark for practice. */
:root{
  --font: "Outfit", "Century Gothic", system-ui, -apple-system, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
.light{ --ground:#f4efe6; --surface:#fbf8f2; --sunk:#eae3d6; --ink:#2a211c; --muted:#63574e; --line:#ddd0bf;
  --primary:#9e4a2f; --on-primary:#f4efe6; --support:#8fa98f; --on-support:#2a211c; --accent:#c49a35; --on-accent:#2a211c;
  --signal:#a3253b; --focus:#9e4a2f; color-scheme:light }
.dark{ --ground:#2b211c; --surface:#372b24; --sunk:#211915; --ink:#f4efe6; --muted:#cbbfb3; --line:#4a3b31;
  --primary:#e0896a; --on-primary:#2b211c; --support:#8fa98f; --on-support:#211915; --accent:#d9b05a; --on-accent:#2b211c;
  --signal:#f2909f; --focus:#f4efe6; color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--ground);color:var(--ink);-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:16px;line-height:24px;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
a{color:var(--primary)}

.screen{max-width:760px;margin:0 auto;min-height:100vh;padding:calc(var(--safe-t) + 16px) 20px calc(var(--safe-b) + 28px);
  display:flex;flex-direction:column;gap:16px;font-variant-numeric:tabular-nums}

.label{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.t1{font-size:34px;line-height:40px;font-weight:500;margin:0}
.t2{font-size:26px;line-height:32px;font-weight:500;margin:0}
.t3{font-size:20px;line-height:26px;font-weight:500;margin:0}
.small{font-size:14px;line-height:20px}
.muted{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.grow{flex:1}
p{margin:0}

.btn{min-height:56px;padding:0 22px;border-radius:4px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:18px;font-weight:500}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.ghost{background:transparent}
.btn.sm{min-height:40px;padding:0 14px;font-size:15px;font-weight:400}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:default}
.card{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:16px 18px}
.instr{background:var(--sunk);border-radius:4px;padding:12px 16px}
.tag{display:inline-block;font-size:13px;line-height:18px;background:var(--support);color:var(--on-support);padding:2px 10px;border-radius:4px}

/* header */
.appbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.brand{display:flex;flex-direction:column;gap:2px}
.brand .word{font-size:22px;line-height:26px;font-weight:500}

/* today */
.blocks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.blocks li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:12px 16px}
.blocks .min{font-size:20px;font-weight:500}
.blocks .min small{font-size:13px;color:var(--muted);font-weight:400}
.strip{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px}
.strip i{height:10px;border-radius:2px;background:var(--line)}
.strip i.done{background:var(--support)}
.strip i.cur{background:var(--primary)}

/* drill */
.grips{display:flex;gap:6px 10px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
.grip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border-radius:4px;border:2px solid transparent}
.grip.cur{border-color:var(--primary)}
.grip .nm{font-size:22px;font-weight:500}
.grip .wh{font-size:13px;color:var(--muted)}
.grip svg{display:block}
.big{font-size:64px;line-height:64px;font-weight:500;text-align:center}
.mid{font-size:40px;line-height:44px;font-weight:500}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair .btn{min-height:72px;font-size:22px}
.timer{font-size:18px;font-weight:500}
.timer.over{color:var(--accent)}
.dots{display:flex;gap:8px;justify-content:center}
.dots i{width:16px;height:16px;border-radius:999px;background:var(--line)}
.dots i.on{background:var(--support)}
.beats{display:flex;gap:10px;justify-content:center}
.beats i{width:18px;height:18px;border-radius:999px;background:var(--line);transition:background .05s}
.beats i.on{background:var(--primary)}
.beats i.one.on{background:var(--ink)}
.seq{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.seq span{min-width:64px;text-align:center;padding:8px 12px;border-radius:4px;border:1px solid var(--line);background:var(--surface);font-size:22px;font-weight:500}
.seq span.cur{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.stat{display:flex;flex-direction:column;align-items:center}
.stats{display:flex;justify-content:space-around;gap:12px}
.tries{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tries li{padding:4px 10px;border-radius:4px;background:var(--sunk);font-size:15px}
.check{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:4px;background:var(--surface);font-size:17px}
.check input{width:26px;height:26px;flex:none;margin:0;accent-color:var(--primary)}

/* progress */
.weekrow{display:grid;grid-template-columns:72px repeat(9,minmax(0,1fr));gap:6px;align-items:center}
.cell{height:40px;border-radius:4px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:14px;color:var(--muted)}
.cell.done{background:var(--support);border-color:var(--support);color:var(--on-support)}
.cell.cur{border:2px solid var(--primary);color:var(--ink)}
.cell.locked{opacity:.4}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}

.toast{position:fixed;left:50%;top:calc(var(--safe-t) + 12px);transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:12px 20px;border-radius:4px;font-size:17px;font-weight:500;z-index:10;max-width:90vw;text-align:center}

@media (min-width:700px){ .t1{font-size:40px;line-height:46px} .big{font-size:88px;line-height:88px} }

/* strumming patterns */
.pat{display:flex;flex-direction:column;gap:8px}
.patrow{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.pc{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 0;border-radius:4px;background:var(--surface);border:1px solid var(--line);transition:background .05s}
.pc b{font-size:34px;line-height:36px;font-weight:600}
.pc small{font-size:13px;color:var(--muted)}
.pc.skip b{color:var(--line)}
.pc.acc b{color:var(--accent)}
.pc.on{background:var(--primary);border-color:var(--primary)}
.pc.on b,.pc.on small{color:var(--on-primary)}
/* First Blues Solo */
.seq.blues12{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.seq.blues12 span{min-width:0;position:relative;font-size:19px;padding:10px 4px}
.seq.blues12 small{position:absolute;left:5px;top:2px;font-size:10px;color:var(--muted)}
.seq.blues12 span.cur small{color:var(--on-primary)}
.turn{align-self:center;padding:8px 22px;border-radius:999px;border:1px solid var(--line);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:15px}
.turn.you{background:var(--signal);border-color:var(--signal);color:var(--ground)}
.boxwrap{display:flex;justify-content:center;overflow-x:auto}
.btn.primary.danger,.pair .btn.danger{background:var(--signal);border-color:var(--signal);color:var(--ground)}
.pair .btn.ok{background:var(--support);border-color:var(--support);color:var(--on-support)}
/* Practice Room */
.sel,.inp{width:100%;font:inherit;font-size:17px;min-height:46px;padding:8px 12px;border-radius:4px;border:1px solid var(--line);background:var(--ground);color:var(--ink)}
.sel:disabled,.inp:disabled{opacity:.55}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.now{display:grid;justify-items:center;gap:2px;padding:6px 0}
.now b{font-size:64px;line-height:1.05;font-weight:600;color:var(--primary)}

/* site navigation above every app */
.sitebar{position:sticky;top:0;z-index:20;max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px 18px;padding:calc(var(--safe-t) + 10px) 20px 10px;background:var(--ground);border-bottom:1px solid var(--line);font-size:14px;line-height:20px}
.sitebar a{color:var(--muted);text-decoration:none}
.sitebar a:first-child{color:var(--ink);font-weight:500}
.sitebar a:hover{color:var(--ink)}
.sitebar + .screen{padding-top:16px;min-height:calc(100vh - 41px)}