/* Storied Student · shell roles and the parts of the original app that the shared shell replaces.
   Loaded after shared/shell.css. */
:root{
  --spruce-soft:#3C564F;--sage-tint:#E1E7D8;--sage-deep:#56664B;--gold-tint:#F1E6CD;--gold-deep:#7A6232;--plum-tint:#EADFE5;
  --paper:#FFFDF8;--soft:#F0EAE0;--sans:var(--f-body);--serif:var(--f-display);
  --rail-bg:var(--spruce);--rail-soft:var(--spruce-soft);--rail-line:#4A625A;--rail-text:#C9D3C6;--rail-sub:#A9B7A8;--rail-heading:#9DAE9C;--rail-mark:var(--harvest);
  --rail-active-bg:var(--parchment);--rail-active-fg:var(--spruce);
  --accent-soft:var(--spruce-soft);--accent-mark:var(--field-sage);
  --eyebrow:var(--gold-deep);
  --path-within-bg:var(--plum-tint);--path-within-fg:var(--plum);
  --path-between-bg:var(--sage-tint);--path-between-fg:var(--sage-deep);
  --path-around-bg:var(--gold-tint);--path-around-fg:var(--gold-deep);
}
/* the original app hid this bar on wide screens; the shared shell shows it everywhere */
.app-shell .topbar{display:flex;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;height:80px;padding:0 43px;background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--line)}
.app-shell .topbar .brand{display:none}
.app-shell .workspace-symbol{color:var(--spruce);font-family:var(--f-display)}
.app-shell .main{min-width:0}
.app-shell .wrap{max-width:1180px;padding:34px 43px 64px}
.app-shell .person-switch .avatar{width:32px;height:32px;font-size:11px}
.app-shell .person-switch select{border:0;background:none;padding:9px 0;font-size:12px;font-weight:500;max-width:200px;width:auto}
.app-shell .rolebadge{font-size:9px;letter-spacing:1px;text-transform:uppercase;border:1px solid var(--sand);background:transparent;color:var(--gold-deep);border-radius:3px;padding:4px 8px}
@media(max-width:1150px){.app-shell .topbar{padding:0 28px}.app-shell .wrap{padding:30px 28px 56px}}
@media(max-width:850px){
  .app-shell .topbar{height:66px;padding:0 18px}
  .app-shell .wrap{padding:22px 16px 110px}
  .app-shell .rolebadge{display:none}
}
@media(max-width:600px){
  .app-shell .person-switch .tiny{display:none}
  .app-shell .person-switch select{max-width:150px}
  .app-shell .mobile-brand{font-size:19px}
  .app-shell .mobile-brand svg{width:20px;height:28px}
}

/* type and surfaces in the shared family */
h1{font-size:clamp(30px,3.2vw,44px);letter-spacing:-1px}
h2{font-size:1.45rem;letter-spacing:-.3px}
.eyebrow{color:var(--gold-deep);letter-spacing:.14em}
.card{border-radius:16px;padding:22px}
.btn{border-radius:999px}
.btn.sm{border-radius:999px}
.hero h1{font-size:clamp(36px,4.6vw,58px);letter-spacing:-1.6px;line-height:1.04}
.move{background:var(--spruce);border-radius:18px;padding:26px}
.move p.big{font-size:1.45rem}
.pathways{margin:4px 0 0}
.mono{font-family:var(--f-body);font-variant-numeric:tabular-nums;font-size:.92em}

/* More sheet inside the app's own dialog */
.modal-more{max-width:520px}
.more-head{display:flex;justify-content:space-between;align-items:start;gap:16px}
.more-head h2{font-size:1.6rem}
.close-btn{border:0;background:none;font-size:26px;line-height:1;color:var(--muted);padding:0 4px;cursor:pointer}
.more-who{display:flex}
.more-who .person-switch select{max-width:none}
/* the original .brand rule shrinks its caption; the rail brand is the wordmark */
.sidebar .brand span{font-size:inherit;color:inherit;line-height:1.05}
.app-shell .person-switch .tiny{font-size:10px}
.app-shell .mobile-brand span{white-space:nowrap}
.btn.sm.ghost,.head>.btn{justify-self:start}