/* Class schedule (booking), v2 calm: a printed timetable */
body{display:flex;flex-direction:column;min-height:100dvh;background:var(--surface)}
.bar,.stage{width:100%;max-width:1360px;margin-inline:auto;padding-inline:var(--gutter)}
.bar{display:grid;grid-template-columns:1fr auto;align-items:end;padding-top:24px}
.brand,.gh,.dh span,#wklabel,.p-meta dt,.kicker{font:600 var(--t-xs)/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.brand{grid-column:1/-1;justify-self:start;display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}
.mark,.avatar{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--ink-2);border-radius:50%;font:14px/1 var(--serif);color:var(--ink)}
h1,h2,.sum,.empty,.dayempty,.dh b,.slot b,.p-meta dd,.p-desc,.p-note,.d-list b,#mine-n{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.bar h1{margin-top:16px;font-size:clamp(2.5rem,1.6rem + 3.6vw,4.5rem);line-height:1;letter-spacing:-.03em}
.sum,.empty,.dayempty,.p-note{font-style:italic;font-size:var(--t-lg);color:var(--ink-2)}
.sum{grid-column:1/-1;max-width:none;margin:12px 0 0;padding-bottom:24px;border-bottom:3px double var(--ink)}
.wk{display:flex;align-items:center;justify-self:end}
.wk .btn{min-width:44px;padding:0;font-size:var(--t-xl);color:var(--ink)}
.wk .btn:disabled{opacity:1;color:var(--ink-2)}
#wklabel{color:var(--ink);font-variant-numeric:tabular-nums}
.chips,.tools{display:flex;gap:24px;padding-block:8px;border-bottom:1px solid var(--line)}
.chips{overflow-x:auto;scrollbar-width:none}
.chip{flex:none;min-height:44px;padding:0;border:0;border-bottom:2px solid transparent;background:none;color:var(--ink-2);font:500 var(--t-sm)/1 var(--sans);cursor:pointer}
.chip:hover,.chip[aria-pressed=true]{color:var(--ink)}
.chip[aria-pressed=true]{border-bottom-color:var(--accent)}
.tools{align-items:center;gap:16px}
.tools :is(input,select){min-height:44px;border:0;border-bottom:1px solid var(--edge);border-radius:0;background:none;padding-inline:2px}
.tools input{width:230px}
#mine{border-color:var(--line);border-radius:var(--r-pill);font-weight:500}
#mine-n{margin-left:4px;font-size:var(--t-md);color:var(--accent)}
#mine[aria-pressed=true]{border-color:var(--accent)}
main{flex:1}
.stage{overflow-x:auto;padding-block:24px 64px}
.grid{display:grid;grid-template-columns:4.5rem repeat(7,minmax(118px,1fr));gap:0;min-width:900px}
.gh{padding:12px 0;border-top:1px solid var(--line)}
.grid>.gh:first-child,.dh{border:0;border-bottom:1px solid var(--ink)}
.dh{display:flex;align-items:baseline;gap:8px;padding:12px;background:none;color:var(--ink);cursor:pointer}
.dh b{font-size:var(--t-xl)}
.dh.today b{color:var(--accent)}
.today,.now{background:var(--wash)}
.cell{min-height:72px;padding:4px 8px 12px;border-top:1px solid var(--line)}
.slot{display:grid;gap:3px;width:100%;min-height:44px;padding:8px 4px;border:0;border-radius:0;background:none;color:var(--ink-2);font:var(--t-xs)/1.3 var(--sans);text-align:left;cursor:pointer}
.slot+.slot{border-top:1px solid var(--line)}
.slot b{font-size:var(--t-md);color:var(--ink)}
.slot:enabled:hover b{color:var(--accent)}
.slot .t{font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.slot .low,.booked .cap{color:var(--ink);font-weight:600}
.booked .cap{color:var(--accent)}
.booked .cap::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor}
.slot .full{font-style:italic}
.slot:disabled{cursor:default}
.slot.past b{color:var(--ink-2)}
.dayempty{display:none}
.empty{margin:48px auto;text-align:center}
.panel{position:fixed;inset:0 0 0 auto;z-index:30;width:min(440px,100%);display:flex;flex-direction:column;gap:24px;padding:32px;border-radius:0;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-dialog);overflow-y:auto}
.p-head{display:grid;grid-template-columns:1fr auto;gap:8px}
.p-head .kicker{margin:0;padding:0;background:none}
.p-head h2{font-size:var(--t-3xl)}
.p-x{grid-area:1/2/3;align-self:start;min-width:44px;padding:0;font-size:var(--t-xl)}
.p-meta{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:0;border-top:1px solid var(--ink)}
.p-meta div{padding:12px 0;border-bottom:1px solid var(--line)}
.p-meta dd{margin:4px 0 0;font-variant-numeric:tabular-nums}
.p-desc{margin:0;line-height:1.6}
.p-inst{display:flex;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.avatar{flex:none;width:44px;height:44px}
.p-inst p,.p-cap p{margin:2px 0 0;font-size:var(--t-sm);color:var(--ink-2);font-variant-numeric:tabular-nums}
.p-cap{display:grid;gap:8px}
.p-bar{height:3px;background:var(--line)}
.p-bar span{display:block;height:100%;background:var(--accent)}
.p-note{min-height:1.4em;margin:0;font-size:var(--t-md);color:var(--accent)}
.scrim{position:fixed;inset:0;z-index:25;background:var(--scrim)}
.drawer{position:fixed;inset:auto 0 0;z-index:30;max-height:70dvh;padding:24px max(var(--gutter),50% - 360px);background:var(--surface);border-top:3px double var(--ink);box-shadow:var(--shadow-dialog);overflow-y:auto}
.d-head{display:flex;align-items:center;justify-content:space-between}
.d-head .btn{min-width:44px;padding:0;font-size:var(--t-xl)}
.d-list{margin:12px 0 0;padding:0;list-style:none}
.d-list li{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.d-list .w{flex:1;display:grid}
.d-list b{font-size:var(--t-md)}
.d-list span{font-size:var(--t-sm);color:var(--ink-2)}
.toast{position:fixed;left:50%;bottom:24px;z-index:40;transform:translateX(-50%);max-width:calc(100% - 32px);font-size:var(--t-sm);opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}
@media (max-width:760px){
.bar{grid-template-columns:1fr;padding-top:12px}
.bar h1{font-size:2.5rem}
.wk{justify-self:start;margin-left:-12px}
.sum{font-size:var(--t-md);padding-bottom:16px}
.chips,.tools{border:0}
.tools{flex-wrap:wrap}.tools input{flex:1 1 100%}.select{flex:1}
.stage{overflow:visible;padding-block:0 48px}
.grid{grid-template-columns:repeat(7,1fr);min-width:0}
.gh,.cell:not(.sel),.cell:empty{display:none}
.dh{position:sticky;top:0;z-index:5;flex-direction:column;align-items:center;gap:4px;min-height:56px;padding:6px 0;border-block:1px solid var(--line);border-bottom-width:2px;background:var(--surface)}
.dh[aria-pressed=true]{border-bottom-color:var(--accent)}
.dh span{font-size:10px;letter-spacing:.08em}
.dh b{font-size:var(--t-lg)}
.cell,.dayempty{grid-column:1/-1;display:block;min-height:0;padding:0;border:0;background:none}
.slot{grid-template-columns:5.2rem 1fr auto;column-gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.slot .t{grid-row:1/3;padding-top:3px}
.slot b{font-size:var(--t-lg)}
.slot .i{grid-column:2}
.slot .cap{grid-area:1/3/3;align-self:center;text-align:right;max-width:9ch}
.dayempty{margin:32px 0}
.panel{padding:24px var(--gutter)}
.p-head h2{font-size:var(--t-2xl)}
}


/* tap-targets: comfortable phone taps -- the sizes win on phones, the page's own layout stays */
@media (max-width: 600px) {
  a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a), button, [role=button], [onclick], summary, select, input:not([type=hidden], [type=checkbox], [type=radio], [type=range]) { min-height: 44px !important; min-width: 44px !important; }
  :where(a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a)) { display: inline-flex; align-items: center; justify-content: center; }
  input, select, textarea { font-size: max(16px, 1em) !important; }
}