/* Phase 4 — Today heatmap/classes, Calendar (month + timetable), Study. */
/* Grid tracks default to their content's max-content width unless told
   otherwise — without this, the Timetable's wide inner scroller (which is
   supposed to scroll only inside its own card) pushes the whole page wide
   instead. */
.main{min-width:0}
html,body{overflow-x:hidden}

/* ── Today: two-row grid, heatmap, classes card ─────────────────────────── */
.grid2{grid-template-columns:1.6fr 1fr}
@media (max-width:719px){.grid2{grid-template-columns:1fr}}

.barscroll{overflow-x:auto}
.bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(16px,1fr);gap:5px;align-items:end;height:118px;min-width:340px}
.bar{border:0;padding:0;border-radius:5px 5px 2px 2px;background:var(--line);min-height:4px;transform-origin:bottom;cursor:pointer;display:block}
.bar.zero{opacity:.7;cursor:default}
.bar.now{outline:2px solid var(--ink);outline-offset:2px}
.bar.heavy{box-shadow:0 0 0 1px color-mix(in oklch,var(--urgent) 45%,transparent) inset}
.wk{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(16px,1fr);gap:5px;margin-top:6px;font:11px "DM Mono",monospace;color:var(--muted);text-align:center;min-width:340px}
#studybars{height:90px}
.legend{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;color:var(--muted)}
.legend .peak{color:var(--ink);font-weight:600}

.classes .clsrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.classes .clsrow:last-child{border-bottom:0}
.cltime{font:500 12px "DM Mono",monospace;color:var(--muted);white-space:nowrap;width:88px;flex:none}
.clkind{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.clkind.tutorial{font-style:italic}
.clroom{margin-left:auto;color:var(--muted);font-size:12px}
.classreason{color:var(--muted);font-size:13px;margin:0 0 8px}

/* ── Calendar ────────────────────────────────────────────────────────────── */
.calcontrols{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.monthnav{display:flex;align-items:center;gap:10px;margin-left:auto}
.monthnav .navbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;width:30px;height:30px;display:grid;place-items:center;cursor:pointer}
.monthnav .navbtn:disabled{opacity:.35;cursor:default}
.monthlabel{font:600 14px var(--f-ui);min-width:120px;text-align:center}
.calwrap{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
@media (max-width:900px){.calwrap{grid-template-columns:1fr}}

.calgrid{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.calrow{display:grid;grid-template-columns:36px repeat(7,1fr);border-bottom:1px solid var(--line-soft)}
.calrow:last-child{border-bottom:0}
.calrow.calheads{background:var(--rail);font:600 11px var(--f-ui);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.calrow.calheads>div{padding:8px 4px;text-align:center}
.calrow.hirow{animation:hiflash calc(1.6s * var(--motion)) var(--ease-decel) 1}
.weeknum{display:flex;align-items:center;justify-content:center;font:500 11px "DM Mono",monospace;color:var(--muted);border-right:1px solid var(--line-soft)}
.daycell{position:relative;border:0;border-right:1px solid var(--line-soft);background:none;min-height:78px;padding:6px;display:flex;flex-direction:column;gap:3px;cursor:pointer;text-align:left;color:var(--ink)}
.daycell:last-child{border-right:0}
.daycell.out{color:var(--muted);opacity:.45}
.daynum{font:600 12px var(--f-ui)}
.daycell.today .daynum{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--bg)}
.daycell.selected{background:var(--accent-soft)}
.daycell.holiday{background:color-mix(in oklch,var(--warn-bg) 70%,transparent)}
.daycell.examband{background:color-mix(in oklch,var(--u4-bg) 55%,transparent)}
.daycell.heavy::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--urgent)}
.holname{font-size:10px;color:var(--warn-ink);line-height:1.2}
.keymarker{font-size:10px;color:var(--muted);line-height:1.2}
.chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:auto}
.dchip{font:600 10px var(--f-ui);padding:1px 6px;border-radius:999px;background:oklch(var(--c-l) var(--c-c) var(--h));color:oklch(var(--c-ink) calc(var(--c-c) + .04) var(--h))}
.dchip.closed{opacity:.5;text-decoration:line-through}
.dchip.more{background:var(--line-soft);color:var(--muted)}

.calpanel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;display:grid;gap:16px;align-self:start}
.calpanel h2{margin:0;font:var(--title)}
.panelsec h3{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.panelitem{display:flex;gap:8px;align-items:center;width:100%;border:0;background:none;padding:6px 0;cursor:pointer;text-align:left;color:var(--ink);font-size:13px}
.keyline{margin:0 0 4px;font-size:13px;color:var(--muted)}

.ttscroll{overflow-x:auto}
.ttgrid{display:grid;grid-template-columns:56px repeat(5,minmax(120px,1fr));min-width:680px}
.ttcorner{grid-row:1}
.ttday{grid-row:1;text-align:center;font:600 13px var(--f-ui);padding:8px 0;border-bottom:1px solid var(--line)}
.ttday.today{color:var(--accent)}
.tthours{grid-row:2;position:relative;display:grid;grid-template-rows:repeat(11,60px)}
.tthour{font:11px "DM Mono",monospace;color:var(--muted);padding-top:2px;text-align:right;padding-right:6px}
.ttcol{grid-row:2;position:relative;height:660px;border-left:1px solid var(--line-soft)}
.ttcol.today{background:color-mix(in oklch,var(--accent-soft) 55%,transparent)}
.ttnow{position:absolute;left:0;right:0;height:2px;background:var(--urgent);z-index:5}
.ttblock{position:absolute;left:4px;right:4px;border-radius:var(--r-sm);padding:5px 8px;overflow:hidden;
  background:oklch(var(--c-l) var(--c-c) var(--h));color:oklch(var(--c-ink) calc(var(--c-c) + .04) var(--h));font-size:11px}
.ttblock.tutorial{background:none;border:1.5px dashed oklch(var(--c-ink) var(--c-c) var(--h))}
.ttblock b{display:block;font-size:12px}
.ttblock span{text-transform:uppercase;font-size:9px;letter-spacing:.04em;opacity:.85}
.ttblock small{display:block;font-size:10px;opacity:.8}

@keyframes hiflash{0%{box-shadow:inset 0 0 0 2px var(--accent)}100%{box-shadow:inset 0 0 0 0 transparent}}

/* ── Study ───────────────────────────────────────────────────────────────── */
.studyform{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.studyform label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.studyform label.full{grid-column:1/-1}
.studyform select,.studyform input{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;font:14px var(--f-ui);background:var(--bg);color:var(--ink)}
.studyform .quickrow{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mchip{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:6px 14px;font:600 12px var(--f-ui);cursor:pointer}
.mchip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mcustom{width:110px}
.studyform button[type=submit]{grid-column:1/-1;justify-self:start}

.studystats{display:flex;gap:22px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:2px}
.statnum{font:var(--title)}
.statlbl{font-size:12px;color:var(--muted)}

.coursebars{display:grid;gap:10px}
.cbarrow{display:grid;grid-template-columns:70px 1fr 64px;gap:10px;align-items:center;font-size:13px}
.cbarlbl{display:flex;align-items:center;gap:6px;font-weight:600}
.cbarlbl .ico{width:16px;height:16px}
.cbartrack{height:10px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.cbarfill{display:block;height:100%;border-radius:999px;background:oklch(var(--c-l) var(--c-c) var(--h));transform-origin:left;
  animation:growx var(--dur-slow) var(--ease-decel) both}
.cbarval{text-align:right;color:var(--muted);font:12px "DM Mono",monospace}

.sessionlist{display:grid;gap:2px}
.sessionrow{display:grid;grid-template-columns:88px auto 60px 1fr 30px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.sessionrow:last-child{border-bottom:0}
.sdate{color:var(--muted);font:12px "DM Mono",monospace}
.smin{font-weight:600}
.snote{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sessionx{border:0;background:none;color:var(--muted);width:26px;height:26px;border-radius:999px;cursor:pointer;justify-self:end}
.sessionx:hover{background:var(--line-soft);color:var(--ink)}

@media (prefers-reduced-motion:no-preference){
  .bars.grow .bar{animation:grow var(--dur-base) var(--ease-decel) both;animation-delay:calc(var(--i) * 28ms * var(--motion))}
}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:719px){
  .studyform{grid-template-columns:1fr}
  .calwrap{grid-template-columns:1fr}
  .daycell{min-height:56px;padding:4px}
  .holname,.keymarker{display:none}
  .sessionrow{grid-template-columns:70px auto 50px 1fr 26px;font-size:12px}
}

/* ── Opus review fixes (phase 4) ─────────────────────────────────────────── */
/* Segmented control everywhere (Calendar tabs were falling back to UA buttons). */
.seg{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--surface)}
.seg button{border:0;background:none;padding:6px 14px;border-radius:999px;font:500 13px var(--f-ui);color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Class rows: one grid in both the Classes card and the Calendar day panel. */
.clsrow{display:grid;grid-template-columns:92px auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.clsrow:last-child{border-bottom:0}
.clsrow .cltime{width:auto}
.clsrow .clroom{margin-left:0}
/* Coming up sits in a narrower column now: let titles wrap to 2 lines instead of "Group & t…". */
.queue .q{grid-template-columns:84px minmax(0,1fr) 84px 78px 40px 128px;gap:12px}
.queue .q .what{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.queue .q .what small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* "You are here": an accent bar, not an outline ring (read as a stray pill on empty weeks). */
.bar.now{outline:none}
.bars .bar.now.zero{background:var(--accent);opacity:1;min-height:6px}
.bar.now:not(.zero){box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}

/* ── Phase 8: phone layout + tap targets ─────────────────────────────────── */
/* Bars sit inside full-height columns: the whole column is the tap target. */
.bars{align-items:stretch}
.barcol{display:flex;align-items:flex-end;height:100%;min-width:0;padding:0;border:0;background:none;cursor:pointer;border-radius:6px}
span.barcol{cursor:default}
.barcol .bar{width:100%}
.barcol:hover .bar,.barcol:focus-visible .bar{filter:brightness(1.08)}
.barcol:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 24px minimum targets (WCAG 2.2 · 2.5.8) */
.course{min-height:24px}
.linkbtn{min-height:24px;padding:0 4px}
/* Grid columns may shrink below their content — prevents cards being clipped on phones. */
.grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.grid2{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.grid>*,.grid2>*{min-width:0}
@media (max-width:719px){
  .grid,.grid2{grid-template-columns:minmax(0,1fr)}
  /* Account + semester + people move to a slim top strip; the bottom bar is navigation only. */
  .rail-foot{position:fixed;top:0;left:0;right:0;z-index:41;display:flex;flex-direction:row;align-items:center;gap:8px;
    width:auto;padding:8px 12px;background:var(--rail);border-bottom:1px solid var(--line);overflow-x:auto}
  .rail-foot .sem{display:flex;gap:6px;flex:none;font-size:11px}
  .rail-foot .sem > span:last-child{display:none}
  .semswitch{flex:1 1 auto;min-width:110px;max-width:170px}
  .semswitch select{min-height:32px}
  .signin{flex:none}
  .signinbtn{width:auto;min-height:32px;padding:6px 12px}
  .accerr{display:none}
  .people{flex:none;margin-left:auto}
  .person{min-height:32px;padding:4px 10px;white-space:nowrap}
  .rail-foot .modetoggle{display:flex;flex:none;width:32px;height:32px;padding:0;justify-content:center;font-size:0}
  .rail-foot .modetoggle i{font-size:16px}
  .main{padding-top:64px}
  .xuan .main{padding-top:64px}
}

.barscroll:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
@media (max-width:719px){
  /* 15 weeks can't all be 24px wide on a phone: the chart scrolls inside its card instead. */
  .bars,.wk{grid-auto-columns:minmax(24px,1fr);gap:3px;min-width:402px}
  /* Top strip: fit on one line, no scrollbar */
  .rail-foot{scrollbar-width:none}
  .rail-foot::-webkit-scrollbar{display:none}
  .rail-foot:has(.signin) .sem{display:none}
  .signinbtn .long{display:none}
  .semswitch{min-width:96px;max-width:140px}
  /* Coming up: title on its own line, details wrap underneath */
  .queue .q{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
  .queue .q .what{order:-1;flex:1 1 100%}
  .queue .q .num{margin-right:auto}
}

/* The page behind the app (seen when a phone over-scrolls) follows the theme. */
html:has(.app.xuan),html:has(.app.xuan) body{background:oklch(.17 .025 320)}
html:has(.app.dark),html:has(.app.dark) body{background:oklch(.18 .02 265)}
@media (max-width:719px){
  .xuan .h1{font-size:30px;flex-wrap:nowrap;align-items:flex-end}
}