:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: one 880px column read like a score; the five phases carry rehearsal letters A–E, each book keeps a colour taken from its cover. */
:root{
  --paper:#F3F4F7; --sheet:#FFFFFF; --ink:#171B26; --ink-2:#4C5465; --ink-3:#8A91A1;
  --rule:#D9DDE5; --staff:#C3C9D6; --accent:#2B47A3; --on-accent:#FFFFFF;
  --good:#2D7A4E; --warn:#9A6210; --late:#B03636;
  --c-kostka:#9C6B0E; --c-caplin:#3A5A8A; --c-chung:#B8452A; --c-pattison:#1D76A8;
  --c-russo:#2A7068; --c-mckay:#983150; --c-variego:#6A4A36; --c-otoe:#6B3F8C;
  --f-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --f-body:"Libre Franklin","Franklin Gothic Medium",-apple-system,"Segoe UI",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#101218; --sheet:#181B23; --ink:#E7E9EF; --ink-2:#A2A9B8; --ink-3:#6E7585;
  --rule:#2A2F3A; --staff:#3A404E; --accent:#9AAEFF; --on-accent:#0F1424;
  --good:#6FC593; --warn:#E3A94F; --late:#F08080;
  --c-kostka:#DDAE4C; --c-caplin:#93B1E0; --c-chung:#EE8C6C; --c-pattison:#6DBFEA;
  --c-russo:#6EC3B8; --c-mckay:#E68BA3; --c-variego:#CDAA92; --c-otoe:#C5A4E8; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#101218; --sheet:#181B23; --ink:#E7E9EF; --ink-2:#A2A9B8; --ink-3:#6E7585;
  --rule:#2A2F3A; --staff:#3A404E; --accent:#9AAEFF; --on-accent:#0F1424;
  --good:#6FC593; --warn:#E3A94F; --late:#F08080;
  --c-kostka:#DDAE4C; --c-caplin:#93B1E0; --c-chung:#EE8C6C; --c-pattison:#6DBFEA;
  --c-russo:#6EC3B8; --c-mckay:#E68BA3; --c-variego:#CDAA92; --c-otoe:#C5A4E8; color-scheme:dark;
}
body{background:var(--paper);color:var(--ink);font:15px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:880px;margin:0 auto;padding-inline:16px;padding-block:32px 72px}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.55}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* masthead */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,7vw,52px);line-height:1;letter-spacing:-.01em;margin:8px 0 12px;text-wrap:balance}
.lede{max-width:62ch;color:var(--ink-2);margin:0}
.staff{position:relative;height:25px;margin:44px 0 10px}
.staff .lines{position:absolute;left:0;right:0;top:0;height:25px;background:repeating-linear-gradient(to bottom,var(--staff) 0 1px,transparent 1px 6px)}
.staff .fill{position:absolute;left:0;top:0;height:25px;background:color-mix(in srgb,var(--accent) 24%,transparent)}
.staff .bar{position:absolute;top:0;height:25px;width:1px;background:var(--ink-3)}
.staff .mk{position:absolute;top:-24px;font:700 12px/16px var(--f-display);padding:0 4px;border:1.5px solid var(--ink);color:var(--ink);background:var(--paper);transform:translateX(-1px)}
.staff .end{position:absolute;right:0;top:0;height:25px;width:6px;border-left:1px solid var(--ink);border-right:3px solid var(--ink)}
.staff .now{position:absolute;top:-5px;height:35px;width:2px;background:var(--accent)}
.staffkey{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12px;color:var(--ink-2)}
.staffkey i{display:inline-block;width:14px;height:9px;vertical-align:-1px;margin-right:6px;background:color-mix(in srgb,var(--accent) 24%,transparent);border:1px solid var(--staff)}
.staffkey b{display:inline-block;width:2px;height:12px;vertical-align:-2px;margin-right:6px;background:var(--accent)}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px;margin:26px 0 0;padding:18px 0;border-block:1px solid var(--rule)}
.stats div{min-width:0}
.stats dt{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.stats dd{margin:4px 0 0;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.stats dd small{display:block;font-weight:400;font-size:13px;color:var(--ink-2)}
.ok{color:var(--good)} .behind{color:var(--late)} .soon{color:var(--warn)}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.settings{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:end;margin:18px 0 0}
.settings label{display:grid;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.settings input{background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:6px 8px;font-weight:500;min-width:0}
.settings input[type=number]{width:6.5em}
.settings .hint{font-size:12.5px;color:var(--ink-3);flex:1 1 220px}

.notice{margin:18px 0 0;padding:10px 12px;border:1px solid var(--warn);border-radius:4px;color:var(--ink);background:color-mix(in srgb,var(--warn) 10%,var(--sheet));font-size:14px}

/* tabs */
.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;gap:2px;margin:30px 0 0;background:var(--paper);border-bottom:1px solid var(--rule);overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:12px 14px 10px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
#view{padding-top:22px}

h2{font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.15;margin:0;text-wrap:balance}
h3{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin:26px 0 4px}
.muted{color:var(--ink-2)}
.small{font-size:13px}

/* week view */
.weeknav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.weeknav .grow{flex:1 1 240px;min-width:0}
.weeknav .sub{color:var(--ink-2);font-size:14px;margin-top:4px}
.btn{background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:6px 12px;font-weight:600;font-size:13.5px}
.btn:hover:not(:disabled){border-color:var(--ink-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.iconbtn{width:34px;height:34px;padding:0;display:inline-grid;place-items:center;font-size:18px;line-height:1}
.callout{margin:16px 0 0;padding:12px 14px;border-left:3px solid var(--accent);background:var(--sheet);font-size:14px}
.empty{padding:22px 0;color:var(--ink-2)}

/* item rows */
.items{margin-top:6px}
.item{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:2px 12px;padding:12px 0;border-top:1px solid var(--rule)}
.item:first-child{border-top:0}
.item .head{padding-top:2px}
.item .head svg{display:block;width:20px;height:20px}
.item .t1{display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline}
.item .lbl{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--bk);font-variant-numeric:tabular-nums;white-space:nowrap}
.item .ttl{font-weight:600;min-width:0}
.item .ttl.untitled{font-weight:500;color:var(--ink-2);font-style:italic}
.item.s-done .ttl{color:var(--ink-2)}
.item.s-skip .ttl{text-decoration:line-through;color:var(--ink-3)}
.item .sub{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-top:1px}
.item .sub .bk{color:var(--bk);font-weight:600}
.item .more{align-self:start;background:none;border:0;padding:2px 0;font-size:12.5px;font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.item .more[aria-expanded="true"]{color:var(--ink)}
.parts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);border-radius:999px;padding:3px 11px;font-size:12.5px;font-weight:500;background:var(--sheet);color:var(--ink-2)}
.chip:hover:not(:disabled){border-color:var(--bk)}
.chip[aria-pressed="true"]{background:color-mix(in srgb,var(--bk) 15%,var(--sheet));border-color:var(--bk);color:var(--ink)}
.chip .tk{width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor;flex:none}
.chip[aria-pressed="true"] .tk{background:var(--bk);border-color:var(--bk)}
.step{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:999px;background:var(--sheet);font-size:12.5px;color:var(--ink-2)}
.step.part{border-color:var(--bk);color:var(--ink)}
.step.full{border-color:var(--bk);background:color-mix(in srgb,var(--bk) 15%,var(--sheet));color:var(--ink)}
.step button{background:none;border:0;width:28px;height:26px;font-size:15px;font-weight:600;color:inherit}
.step span{padding:0 2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.panel{margin-top:10px;padding:12px;background:var(--sheet);border:1px solid var(--rule);border-radius:4px;display:grid;gap:10px}
.panel label{display:grid;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.panel textarea,.panel input{background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:7px 9px;font-size:14px;font-weight:400;color:var(--ink);width:100%;box-sizing:border-box;min-width:0}
.panel textarea{min-height:64px;resize:vertical}
.panel .row{display:flex;flex-wrap:wrap;gap:8px}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{from{background:color-mix(in srgb,var(--accent) 16%,transparent)}to{background:transparent}}

/* plan view */
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--ink-2);margin:10px 0 0}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend svg{width:16px;height:16px}
.phase{margin-top:22px;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;padding:20px}
.phase .top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start}
.mark{font:700 22px/1 var(--f-display);width:38px;height:38px;display:grid;place-items:center;border:2px solid var(--ink);margin-top:2px}
.phase .when{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;margin-top:4px}
.phase p{margin:12px 0 0;max-width:68ch}
.meter{height:4px;background:var(--rule);border-radius:2px;margin-top:14px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent)}
.lanes{display:grid;gap:12px;margin-top:16px}
.lane{display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px 14px;align-items:start}
.lane .who{font-size:13px;font-weight:700;color:var(--bk);padding-top:3px}
.lane .who small{display:block;font-weight:500;color:var(--ink-3);font-size:12px}
.heads{display:flex;flex-wrap:wrap;gap:4px}
.nh{min-width:30px;height:26px;padding:0 6px;border:1px solid var(--rule);border-radius:4px;background:var(--sheet);font-size:12px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.nh:hover{border-color:var(--bk)}
.nh.doing{border-color:var(--bk);background:color-mix(in srgb,var(--bk) 18%,var(--sheet));color:var(--ink)}
.nh.done{background:var(--bk);border-color:var(--bk);color:var(--sheet)}
.nh.now{box-shadow:0 0 0 2px var(--accent)}
.milestone{margin-top:14px;font-size:13px;color:var(--ink-2)}
@media (max-width:560px){.lane{grid-template-columns:1fr}.lane .who small{display:inline;margin-left:6px}}

/* books view */
details.book{border-top:1px solid var(--rule)}
details.book:last-of-type{border-bottom:1px solid var(--rule)}
details.book>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:4px 14px;padding:16px 0;align-items:start}
details.book>summary::-webkit-details-marker{display:none}
.sw{width:14px;height:20px;background:var(--bk);border-radius:2px;margin-top:4px}
.book .bt{font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1.2}
.book .by{font-size:13px;color:var(--ink-2)}
.book .bp{text-align:right;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.book .bp b{display:block;font-size:15px;color:var(--ink)}
.bar2{grid-column:2 / -1;height:3px;background:var(--rule);border-radius:2px;overflow:hidden}
.bar2 i{display:block;height:100%;background:var(--bk)}
.book .body{padding:0 0 18px 28px}
.about{font-size:13.5px;color:var(--ink-2);max-width:68ch;margin:0 0 6px}
.about a{color:var(--accent)}
.addform{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px;align-items:end}
.addform label{display:grid;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.addform .grow{flex:1 1 220px}
.addform input{background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:7px 9px;width:100%;box-sizing:border-box;min-width:0}
.addform input[type=number]{width:5.5em}
@media (max-width:560px){.book .body{padding-left:0}}

footer{margin-top:44px;font-size:12.5px;color:var(--ink-3);max-width:70ch}
footer p{margin:0 0 8px}
@media (prefers-reduced-motion:reduce){.flash{animation:none}}