/* SHELL: the signed-in student app shell (R2-1). Side menu on desktop, drawer below 900px.
   On top of tokens/tokens.css and tokens/app.css. Page css never restyles these classes.
   Behaviour (drawer, persona, active item, icons, panels) lives in js/persona.js. */
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/onest-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* round 3 (MENU): the menu width follows the viewport: 272px minimum, 20vw, 340px maximum.
     At 1024px wide the content keeps 752px (about 80 characters); the drawer takes over below 1024px. */
  --app-side-w:clamp(272px,20vw,340px);
  --app-fs:clamp(.9375rem,.3vw + .85rem,1.0625rem);   /* menu text: 15px at 1280 and below, 17px at 1920 */
  --app-fs-s:.875rem;                                    /* smallest menu text: 14px */
  --app-devbar-h:var(--devbar-h,0px);                    /* js/devbar.js sets --devbar-h to the preview bar height */
  --app-scrim:rgba(22,52,80,.42);  /* ink at 42 percent, no token for a scrim */
  --app-maxw:1440px;               /* round 2 (NAV): content uses the space right of the menu on big screens */
  --app-pad-x:clamp(var(--s-6), 3.2vw, 4rem);
}

/* ---- skip link ---- */
.app-skip{position:absolute;left:var(--s-3);top:-100px;z-index:80;background:var(--color-ink);color:var(--color-on-accent);
  font:700 var(--t-sm)/1 var(--font-head);padding:var(--s-3) var(--s-4);border-radius:var(--radius-sm);text-decoration:none}
.app-skip:focus{top:var(--s-3);text-decoration:none}

/* ---- frame ---- */
body.app{background:var(--color-bg)}
.app-shell{display:flex;flex:1 1 auto;width:100%;min-height:100vh}
.app-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;margin-left:var(--app-side-w)}
.app-content{display:block;width:100%;max-width:var(--app-maxw);margin:0 auto;padding:var(--s-7) var(--app-pad-x) var(--s-7);flex:1 0 auto}
.app-content.is-narrow{max-width:760px}
.app-content > .hook{margin:var(--s-7) 0 0}
.app-content > .foot{margin-top:var(--s-6);font-size:var(--t-xs);color:var(--color-muted)}

/* ---- side menu ---- */
/* round 4 (MENUFIX): the column itself does not scroll. Brand and the user box with Sign out are pinned (top and bottom);
   .app-nav scrolls between them, with Dashboard and the Pre-course row sticky at its top. The open tree and the four items
   under it scroll together, so the scroll area gets all the height that is left (about 60 percent of a 720 px window).
   The column ends above the dev bar (--devbar-h). */
.app-side{position:fixed;top:0;left:0;bottom:var(--app-devbar-h);z-index:40;width:var(--app-side-w);
  display:flex;flex-direction:column;background:var(--color-card);border-right:1px solid var(--color-line);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.app-brand{display:block;flex:0 0 auto;padding:var(--s-5) var(--s-5) var(--s-4);font-family:var(--font-script);font-size:1.75rem;line-height:1.1;
  color:var(--color-ink);text-decoration:none;white-space:nowrap}
.app-brand:hover{text-decoration:none;color:var(--color-ink)}
.app-brand-sub{display:block;margin-top:var(--s-1);font:700 var(--app-fs-s)/1.2 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}

.app-nav{--nav-row:44px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  display:flex;flex-direction:column;gap:2px;padding:0 var(--s-3) var(--s-3);border-top:1px solid var(--color-line)}
.app-nav a{flex:0 0 auto;position:relative;display:flex;align-items:center;gap:var(--s-3);min-height:44px;padding:var(--s-2) var(--s-3);border-radius:var(--radius-sm);
  font:600 var(--app-fs)/1.3 var(--font-head);color:var(--color-ink);text-decoration:none;transition:background .12s,color .12s}
.app-nav a[hidden]{display:none}
.app-nav a svg,.app-signout svg,.app-menu-btn svg,.app-close svg{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-nav a svg{color:var(--color-muted);transition:color .12s}
.app-nav a:hover{background:var(--color-bg);text-decoration:none}
.app-nav a:hover svg{color:var(--color-ink)}
.app-nav a.is-active{background:var(--color-accent-wash);color:var(--color-ink);font-weight:700}
.app-nav a.is-active svg{color:var(--color-accent-text)}
.app-nav a.is-active::before{content:"";position:absolute;left:calc(var(--s-3) * -1);top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--color-accent)}
.app-nav .app-nav-gap{height:var(--s-3)}
/* short windows: tighter rows so the pinned items leave room for the tree */
@media (max-height:860px){
  .app-brand{padding:var(--s-3) var(--s-5) var(--s-2);font-size:1.5rem}
  .app-nav{--nav-row:40px;padding:0 var(--s-3) var(--s-2)}
  .app-nav > a[data-nav="dashboard"]{margin-top:var(--s-2)}
  .app-nav a{min-height:40px;padding-top:var(--s-1);padding-bottom:var(--s-1)}
  .app-tree-btn{top:0}
  .app-side-foot{padding:var(--s-3) var(--s-5)}
  .app-signout{margin-top:var(--s-2);min-height:40px}
}
/* very short windows: name and Sign out share one row, the email line goes (it stays on the Account page) */
@media (max-height:800px) and (min-width:900px){
  .app-side-foot{grid-template-columns:auto minmax(0,1fr) auto;padding:var(--s-3) var(--s-4)}
  .app-avatar{grid-row:1;width:36px;height:36px}
  .app-who{grid-column:2}
  .app-who-mail{display:none}
  .app-signout{grid-column:3;margin-top:0;padding:0 var(--s-3)}
}

.app-side-foot{flex:0 0 auto;margin-top:auto;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-3);row-gap:2px;align-items:center;
  padding:var(--s-4) var(--s-5) var(--s-5);border-top:1px solid var(--color-line)}
.app-avatar{grid-row:1 / span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--color-ink);
  color:var(--color-on-accent);font:700 var(--t-sm)/1 var(--font-head);letter-spacing:.03em}
.app-who{font:700 var(--app-fs)/1.25 var(--font-head);color:var(--color-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-who-mail{font-size:var(--app-fs-s);line-height:1.3;color:var(--color-muted);overflow-wrap:break-word}
.app-signout{grid-column:1 / -1;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);margin-top:var(--s-3);min-height:44px;
  padding:0 var(--s-4);border:1.5px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-card);
  font:700 var(--app-fs)/1 var(--font-head);color:var(--color-accent-text);text-decoration:none;transition:border-color .12s}
.app-signout svg{width:18px;height:18px}
.app-signout:hover{border-color:var(--color-accent-text);text-decoration:none}


/* ---- Pre-course tree in the menu (round 2, lane NAV; drawn by js/persona.js from js/pckb-nav.js) ---- */
.app-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.app-nav-group{display:flex;flex-direction:column;flex:0 0 auto}
.app-nav-head{position:sticky;top:var(--nav-row);z-index:3;background:var(--color-card)}
.app-nav > a[data-nav="dashboard"]{position:sticky;top:0;z-index:3;margin-top:var(--s-3)}
:where(.app-nav > a[data-nav="dashboard"]){background:var(--color-card)}
.app-nav-head{box-shadow:0 0 0 0 var(--color-card)}
.app-nav-head > a[data-nav]{padding-right:44px}
.app-nav a.is-parent{font-weight:700}
.app-nav a.is-parent svg{color:var(--color-accent-text)}
.app-nav-head{position:sticky}
.app-tree-btn{position:absolute;top:2px;right:4px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--radius-sm);
  background:transparent;color:var(--color-muted);cursor:pointer;transition:background .12s,color .12s}
.app-tree-btn:hover{background:var(--color-bg);color:var(--color-ink)}
.app-tree-btn svg,.app-tree-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.app-tree-btn[aria-expanded="true"] svg,.app-tree-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.app-tree[hidden],.app-tree-lessons[hidden]{display:none}
.app-tree{margin:2px 0 var(--s-2) 19px;padding-left:4px;border-left:1px solid var(--color-line)}
.app-tree-list,.app-tree-lessons{list-style:none;margin:0;padding:0}
.app-tree-list{display:flex;flex-direction:column;gap:1px}
.app-tree.is-anim,.app-tree-lessons.is-anim{animation:app-tree-in .16s ease-out}
@keyframes app-tree-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.app-nav .app-tree-overview,.app-nav .app-tree-lesson{position:relative;display:flex;align-items:flex-start;gap:var(--s-2);min-height:40px;
  padding:8px var(--s-2) 8px 10px;border-radius:var(--radius-sm);font:500 var(--app-fs)/1.35 var(--font-body,var(--font-head));overflow-wrap:anywhere;color:var(--color-body)}
.app-nav .app-tree-overview{font-family:var(--font-head);font-weight:600;color:var(--color-ink)}
.app-nav .app-tree-overview.is-current,.app-nav .app-tree-lesson.is-current{background:var(--color-accent-wash);color:var(--color-ink);font-weight:700}
.app-nav .app-tree-overview.is-current::before,.app-nav .app-tree-lesson.is-current::before{content:"";position:absolute;left:-6px;top:6px;bottom:6px;
  width:4px;border-radius:0 4px 4px 0;background:var(--color-accent)}

.app-tree-toggle{display:flex;align-items:flex-start;gap:var(--s-2);width:100%;min-height:44px;padding:8px 6px 8px 10px;border:0;border-radius:var(--radius-sm);
  background:transparent;color:var(--color-ink);text-align:left;cursor:pointer;font:inherit;transition:background .12s}
.app-tree-toggle:hover{background:var(--color-bg)}
.app-tree-toggle svg{flex:0 0 auto;margin-top:2px;color:var(--color-muted)}
.app-tree-dot{flex:0 0 auto;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--sec-dot,var(--color-accent))}
.app-tree-text{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);row-gap:1px}
.app-tree-label{font:600 var(--app-fs)/1.3 var(--font-head);color:var(--color-ink)}
.app-tree-count{font-size:var(--app-fs-s);line-height:1.3;color:var(--color-muted)}
.app-tree-sec.is-complete .app-tree-count{color:var(--color-success-ink)}

.app-tree-lessons{margin:0 0 var(--s-1) 14px;padding-left:4px;border-left:1px dashed var(--color-line);display:flex;flex-direction:column;gap:1px}
.app-tree-mark{flex:0 0 auto;display:grid;place-items:center;width:16px;height:16px;margin-top:3px;border:1.5px solid var(--color-line);border-radius:50%;background:var(--color-card)}
.app-tree-lesson.is-read .app-tree-mark{border-color:var(--color-success);background:var(--color-success)}
.app-nav .app-tree-mark svg{width:11px;height:11px;color:var(--color-on-accent);fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.app-nav .app-tree-lesson.is-read{color:var(--color-muted)}
.app-nav .app-tree-lesson.is-current{color:var(--color-ink)}
.app-tree-lesson.is-current .app-tree-mark{border-color:var(--color-accent)}
.app-tree-title{min-width:0}
.app-side .app-tree-btn:focus-visible,.app-side .app-tree-toggle:focus-visible{outline:3px solid var(--color-accent-text);outline-offset:1px}


/* ---- phone and tablet top bar (hidden on desktop) ---- */
.app-top{display:none}
.app-close{display:none}
.app-overlay{display:none}

/* ---- focus ---- */
.app-side a:focus-visible,.app-menu-btn:focus-visible,.app-close:focus-visible,.app-skip:focus-visible,.app-panel-btn:focus-visible{
  outline:3px solid var(--color-accent-text);outline-offset:2px}

/* ---- small in-page panels (R2-3: a button that opens a note in place) ---- */
.app-panel{margin-top:var(--s-4);padding:var(--s-4) var(--s-5);background:var(--color-info-wash);border:1px solid var(--color-info-wash);
  border-left:4px solid var(--color-info);border-radius:var(--radius-sm);color:var(--color-info-ink);font-size:var(--t-sm);line-height:1.5}
.app-panel[hidden]{display:none}
.app-panel strong{display:block;margin-bottom:2px;color:var(--color-info-ink);font-size:var(--t-base)}
.app-panel p{margin:0 0 var(--s-3)}
.app-panel-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s-4);border:1.5px solid var(--color-info);border-radius:var(--radius-sm);
  background:var(--color-card);color:var(--color-info-ink);font:700 var(--t-sm)/1 var(--font-head);cursor:pointer}
.app-panel-btn:hover{background:var(--color-info);color:var(--color-on-accent)}
button.btn{font-family:var(--font-head)}

/* ---- drawer below 900px (round 3: 272px menu + about 600px of content) ---- */
@media (max-width:899.98px){
  .app-main{margin-left:0}
  .app-top{display:flex;align-items:center;gap:var(--s-3);position:sticky;top:0;z-index:30;min-height:56px;padding:var(--s-2) var(--s-4);
    background:var(--color-card);border-bottom:1px solid var(--color-line)}
  .app-menu-btn{display:inline-flex;align-items:center;gap:var(--s-2);min-height:40px;padding:0 var(--s-3) 0 var(--s-2);
    border:1.5px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-card);color:var(--color-ink);
    font:700 var(--t-sm)/1 var(--font-head);cursor:pointer}
  .app-menu-btn:hover{border-color:var(--color-ink)}
  .app-top-title{flex:1 1 auto;min-width:0;font:700 var(--t-base)/1.2 var(--font-head);color:var(--color-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .app-top-brand{flex:0 0 auto;font-family:var(--font-script);font-size:1.3rem;line-height:1;color:var(--color-ink);text-decoration:none}
  .app-top-brand:hover{text-decoration:none}
  @media (max-width:440px){.app-top-brand{display:none}}

  .app-side{width:min(340px,88vw);z-index:60;transform:translateX(-102%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;
    box-shadow:none;border-right:0}
  body.app-menu-open .app-side{transform:none;visibility:visible;transition:transform .22s ease;box-shadow:0 12px 40px rgba(22,52,80,.22)}
  .app-close{display:inline-grid;place-items:center;position:absolute;top:var(--s-3);right:var(--s-3);width:40px;height:40px;
    border:1.5px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-card);color:var(--color-ink);cursor:pointer}
  .app-brand{padding-right:var(--s-8)}
  .app-overlay{display:block;position:fixed;top:0;left:0;right:0;bottom:var(--app-devbar-h);z-index:50;background:var(--app-scrim);
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  body.app-menu-open .app-overlay{opacity:1;pointer-events:auto}
  body.app-menu-open{overflow:hidden}
}
@media (max-width:720px){
  .app-content{padding:var(--s-5) var(--s-4) var(--s-6)}
  .app-content > .hook{margin-top:var(--s-6);font-size:var(--t-base)}
  .app-panel{padding:var(--s-4)}
}
@media (prefers-reduced-motion:reduce){
  .app-side,.app-overlay,body.app-menu-open .app-side{transition:none}
  .app-tree.is-anim,.app-tree-lessons.is-anim{animation:none}
  .app-tree-btn svg,.app-tree-toggle svg{transition:none}
}