/* declutter (learn view): the shiur player and the text first; class list and class material slide out and resize.
   Loaded last on course/learn.html; everything is scoped to body.dc. */
.dc{--dcL:380px;--dcR:540px;--dcH:58vh;--rail:72px;--lw:0px}
/* class list: a slide-out at every width */
.dc .shell{display:block}
.dc .sb{position:fixed;z-index:30;inset:0 auto 0 0;width:min(var(--dcL),100vw);transform:translateX(-102%);visibility:hidden;transition:transform .18s,visibility .18s}
.dc.dopen .sb{transform:none;visibility:visible}
.dc .sb-close{display:block}
.dc .lessons-btn{display:block}
.dc .main{height:100%;transition:margin-left .18s}
.dc.dopen #scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:20}
.dc.dc-drag,.dc.dc-drag *{user-select:none;-webkit-user-select:none}
.dc.dc-drag .sb,.dc.dc-drag .main,.dc.dc-drag .lower{transition:none}
.dc .main>.acct-main{display:none!important}
/* sign-in / sync status sits in the top bar (full controls stay in the Classes panel) */
.dc .mtop .acct-main{padding:0;margin-left:auto;flex:0 1 auto;min-width:0;overflow:hidden}
.dc .mtop .lessons-btn,.dc .mtop .pn button{white-space:nowrap;flex:none}
.dc .mtop .pn{flex:none}
.dc .mtop .cs-st{white-space:nowrap;overflow:hidden}
.dc .mtop .acct-main:not([hidden]){display:flex!important}
.dc .mtop .acct-main:not([hidden])~.pn{margin-left:0}
.dc .mtop .acct-main [data-cs=out]{display:none}
.dc .mtop .cs-btn{min-height:40px}
/* the material panel's own header (its tab strip is replaced by the side rail) */
.dc .lower>.tabs{display:none}
.dc-head{display:flex;align-items:center;gap:10px;min-height:52px;border-bottom:1px solid var(--line);flex:none}
.dc-title{flex:1;margin:0;font:600 13px var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.dc-x{min-height:40px;padding:0 14px;border:1px solid var(--line);background:none;border-radius:var(--r);font:600 14px var(--ui);color:var(--ink2)}
.dc-x:hover{border-color:var(--ink2);color:var(--ink)}
.dc-grab{display:none}
/* the rail of buttons that open the panel */
.dc-rail{display:flex;flex-direction:column;gap:4px;padding:10px 6px;background:var(--panel);border-left:1px solid var(--line2);min-height:0;overflow:auto}
.dc-rail[hidden]{display:none}
.dc-rail button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:58px;padding:8px 2px;border:0;background:none;border-radius:var(--r);color:var(--muted);font:600 11.5px/1.15 var(--ui);cursor:pointer}
.dc-rail button[hidden]{display:none}
.dc-rail svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dc-rail button:hover{color:var(--ink);background:var(--hover)}
.dc-rail button[aria-expanded=true]{color:var(--ink);background:var(--cur);box-shadow:inset 3px 0 0 var(--acc)}
.dc-rail button:focus-visible,.dc-x:focus-visible,.dc-rz:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
/* save-offline and stop-at-questions share one row under the player */
.dc-opts{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;margin-top:6px}
.dc-opts .off-cls{margin:0}
.dc-opts .stoprow{margin:0;flex:1 1 auto}
/* resize handles */
.dc-rz{position:absolute;z-index:5;touch-action:none;background:transparent}
.dc-rz::after{content:"";position:absolute;background:var(--acc);opacity:0;transition:opacity .12s}
.dc-rz:hover::after,.dc-drag .dc-rz.on::after,.dc-rz:focus-visible::after{opacity:.7}
.dc-rzl{display:none}
/* ---------- desktop: player + text centred; panels dock beside it ---------- */
@media (min-width:1100px){
 .dc.dopen{--lw:min(var(--dcL),100vw)}
 .dc.dopen #scrim{display:none}
 .dc.dopen .main{margin-left:var(--lw)}
 .dc .sb{box-shadow:none}
 .dc .main{display:grid;grid-template-columns:minmax(0,1fr) auto var(--rail);grid-template-rows:auto minmax(0,1fr)}
 .dc .mtop{grid-column:1/-1}
 .dc .stage{grid-column:1;grid-row:2;border-right:0;max-width:none;align-items:center}
 .dc .stage>*{width:100%;max-width:960px;margin-left:auto;margin-right:auto}
 .dc .screen{min-height:clamp(110px,17vh,210px)}
 .dc .lower{grid-column:2;grid-row:2;position:relative;display:none;width:var(--dcR);min-width:320px;max-width:calc(100vw - var(--rail) - var(--lw) - 420px);padding:0 22px 0 26px;border-left:1px solid var(--line);background:var(--bg)}
 .dc.dc-ropen .lower{display:flex}
 .dc .dc-rail{grid-column:3;grid-row:2}
 .dc-rz{top:0;bottom:0;width:12px;cursor:col-resize}
 .dc-rz::after{top:0;bottom:0;left:5px;width:2px}
 .dc-rzr{left:-6px}
 .dc-rzl{display:block;right:-6px}
 .dc .sb{border-right:1px solid var(--line)}
}
/* ---------- phone / small tablet: text under the player; material in a bottom sheet ---------- */
@media (max-width:1099px){
 .dc .main{display:flex;flex-direction:column}
 .dc .stage{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 .dc .stagetext{display:block;flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;margin-top:8px;border-top:1px solid var(--line2);padding:2px 2px 24px}
 .dc .stagetext .ph{display:none}
 .dc.atstop .stagetext{display:none}
 .dc .stopcard{flex:0 1 auto;min-height:0;overflow:auto}
 .dc .dc-rail{flex:none;flex-direction:row;gap:0;padding:2px 2px calc(2px + env(safe-area-inset-bottom));border-left:0;border-top:1px solid var(--line);overflow:visible}
 .dc .dc-rail button{flex:1 1 0;min-width:0;min-height:54px;padding:6px 0;font-size:11px}
 .dc .dc-rail button[aria-expanded=true]{box-shadow:inset 0 3px 0 var(--acc)}
 .dc .lower{position:fixed;left:0;right:0;bottom:var(--railh,60px);z-index:26;height:var(--dcH);max-height:calc(100% - var(--railh,60px) - 64px);min-height:160px;max-width:none;padding:0 14px;background:var(--bg);border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.45);transform:translateY(calc(100% + 80px));visibility:hidden;transition:transform .2s,visibility .2s}
 .dc.dc-ropen .lower{transform:none;visibility:visible}
 .dc-head{position:relative;padding-top:12px;touch-action:none;cursor:row-resize}
 .dc-grab{display:block;position:absolute;top:6px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:var(--line)}
 .dc-rzr{display:none}
 .dc .sb{width:min(400px,100vw)}
 .dc-opts .stopn{display:none}
 .dc-opts{gap:0 14px}
 .dc-opts .off-save{font-size:0;gap:6px}
 .dc-opts .off-save>span{font-size:15px}
 .dc-opts .off-save::after{content:"Save offline";font-size:13px}
 .dc .mtop .acct-main .cs-em{display:none}
 .dc .mtop .acct-main .cs-btn{padding:0 10px}
 .dc .mtop .acct-main .cs-btn>span{display:none}
 .dc .mtop .acct-main .cs-btn::after{content:"Sign in"}
}