/* Shared application frame. Feature pages only style their contents. */
:root { --app-sidebar-width:248px; --app-content-width:1120px; --app-content-top:36px; --app-section-gap:28px; --app-header-height:80px; }
html:has(.app-shell) { scrollbar-gutter:stable; }
body:has(.app-sidebar) { --color-primary:#642bd4; --color-primary-strong:#5020ad; --color-primary-soft:#f0eafa; --color-text:#201b2d; --color-text-muted:#625c70; --color-border:#e5e0ec; padding:0 36px 40px calc(var(--app-sidebar-width) + 36px); background:#fdfcfb; }
.app-shell { width:min(100%,var(--app-content-width)); min-width:0; margin-inline:auto; }
.app-brand { display:block; color:var(--color-text); text-decoration:none; }
.app-brand img { display:block; width:170px; max-width:100%; height:auto; }
.app-sidebar { position:fixed; inset:0 auto 0 0; z-index:40; display:flex; flex-direction:column; width:var(--app-sidebar-width); padding:28px 16px 202px; background:#f7f4fe; border-right:1px solid #e9e3f3; }
.app-sidebar > .app-brand { flex-shrink:0; margin:0 10px 25px; }
.app-subject-label,.app-nav-label { color:#74658d; font-size:10px; font-weight:650; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; }
.app-subject-label { flex-shrink:0; margin:0 11px 18px; }
.app-navigation { display:flex; flex-direction:column; gap:5px; min-height:0; overflow-y:auto; }
.app-nav-label { margin:20px 12px 7px; }
.app-nav-label-separated { margin-top:15px; padding-top:22px; border-top:1px solid #e3dbee; }
.app-navigation a { display:flex; align-items:center; flex-shrink:0; gap:13px; min-height:48px; padding:12px; border-radius:10px; color:#483b60; font-size:13px; line-height:1.4; text-decoration:none; }
.app-navigation svg { flex-shrink:0; width:22px; height:22px; }
.app-navigation a:hover { background:#eee7fa; }
.app-navigation a.is-current { background:var(--color-primary); color:#fff; font-weight:650; }
.nav-short { display:none; }
.app-mobile-back { display:none; }
.app-site-link { position:absolute; inset:auto 16px 20px; display:flex; align-items:center; gap:11px; min-height:44px; padding:16px 10px 0; border-top:1px solid #e3dbee; color:#625575; font-size:12px; text-decoration:none; }
.app-site-link svg { width:20px; }
.app-site-link > span { margin-left:auto; }
.app-shell > .app-topbar.user-bar { display:contents; }
.app-location { display:none; }
.app-location > .app-brand { display:none; }
.app-location > span > span { margin-inline:12px; color:#b2aaba; }
.app-location strong { font-weight:500; color:#40384e; }
.app-topbar-subject { color:#74658d; font-size:12px; white-space:nowrap; }
.app-topbar-subject > span { margin-inline:6px; }
/* One set of wallet/account nodes, placed in the sidebar footer on desktop and
   the header on mobile. Unique ids preserve partial-response balance updates. */
.app-topbar .user-bar-actions { position:fixed; inset:auto auto 79px 16px; z-index:45; display:flex; align-items:stretch; flex-direction:column; gap:10px; width:calc(var(--app-sidebar-width) - 32px); padding-top:16px; border-top:1px solid #e3dbee; background:#f7f4fe; }
.app-topbar .user-bar-points { display:flex; justify-content:flex-start; gap:8px; min-height:46px; margin:0; padding:7px 10px; border:1px solid #e9e0f6; border-radius:10px; background:#fff; box-shadow:none; color:#554368; font-size:12px; white-space:nowrap; }
.app-topbar .points-display-icon { display:block; width:26px; height:26px; }
.app-topbar .points-display-label { display:inline; position:static; width:auto; height:auto; clip:auto; }
.app-topbar .points-display-value { font-variant-numeric:tabular-nums; }
.app-topbar .points-add { width:28px; height:28px; margin-left:auto; font-size:18px; box-shadow:none; }
.app-topbar .user-bar-separator { display:none; }
.app-topbar .user-bar-greeting { gap:10px; width:100%; min-height:46px; padding:3px 6px; font-size:13px; }
.app-topbar .user-bar-avatar { width:36px; height:36px; flex-basis:36px; border:0; box-shadow:none; background:#e6ddfa; font-size:13px; }
.app-topbar .user-bar-greeting-text { display:block; max-width:125px; }
.app-topbar .user-bar-menu-chevron { margin-left:auto; }
/* Fixed placement works without CSS anchor support, and never reflows content. */
.app-topbar .user-bar-account .user-bar-menu-panel { inset:auto auto 136px 16px; width:288px; min-width:0; max-width:calc(100vw - 32px); max-height:calc(100dvh - 160px); overflow-y:auto; margin:0; padding:12px; border-radius:12px; box-shadow:0 12px 36px #23183524; font-size:13px; }
.app-topbar .user-bar-link { min-height:44px; }
.app-topbar .user-bar-login { display:flex; align-items:center; min-height:46px; padding:8px 12px; font-size:13px; }
.app-shell > .app-content { display:grid; grid-template-columns:minmax(0,1fr); align-content:start; width:100%; max-width:none; min-width:0; gap:var(--app-section-gap); margin:var(--app-content-top) 0 48px; padding:0; }
.app-content > * { min-width:0; }
.app-content > .settings { width:100%; margin:0; }
.app-content.exercise-page > article { width:100%; margin:0; }
.app-content .exam-toolbar { position:static; }
.app-content.exam-page > .exam-card { margin:0; }
.app-skip-link { position:fixed; left:20px; top:-100px; z-index:100; padding:10px 16px; background:white; border:2px solid var(--color-primary); border-radius:8px; }
.app-skip-link:focus { top:10px; }
/* Image-source dropdowns are placed against the viewport by scan-desktop.js. */
.app-shell .custom-check-source-menu { position:fixed; right:auto; bottom:auto; width:min(310px,calc(100vw - 32px)); overflow-y:auto; z-index:60; }
/* Heading origin is shared by feature, account, and corpus pages. */
.app-shell .app-content > .page-intro { display:block; position:relative; width:100%; min-height:132px; margin:0; padding:0; border:0; background:none; box-shadow:none; overflow:hidden; }
.app-shell .page-intro .page-intro-copy { padding:0; }
.app-shell .page-intro.has-artwork .page-intro-copy { padding-right:150px; }
.app-shell .page-intro .page-intro-eyebrow { display:block; margin:0 0 12px; color:#777083; font-size:10px; line-height:1.3; font-weight:650; letter-spacing:.12em; text-transform:uppercase; }
.app-shell .page-intro .page-intro-copy h1 { max-width:none; margin:0; color:var(--color-text); font-size:32px; line-height:1.2; font-weight:730; letter-spacing:-.04em; }
.app-shell .page-intro .page-intro-copy p { max-width:760px; margin:10px 0 0; color:var(--color-text-muted); font-size:15px; line-height:1.55; }
.app-shell .page-intro .page-intro-artwork { position:absolute; inset:0 0 auto auto; width:130px; height:110px; max-width:none; margin:0; object-fit:contain; opacity:.75; transform:none; }
/* Library leads; the other three modes retain their original illustrations. */
.illustrated-dashboard .home-feature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.illustrated-dashboard .home-feature { min-height:280px; grid-template-columns:minmax(0,1fr); border-color:#e5e0ec; border-radius:16px; }
.illustrated-dashboard .home-feature-copy { padding:24px; }
.illustrated-dashboard .home-feature-label { font-size:10px; letter-spacing:.07em; font-weight:650; margin-bottom:14px; }
.illustrated-dashboard .home-feature strong { font-size:22px; font-weight:700; line-height:1.22; }
.illustrated-dashboard .home-feature-description { max-width:65%; font-size:13px; line-height:1.55; margin-top:12px; }
.illustrated-dashboard .home-feature-link { align-items:center; min-height:44px; font-size:12px; color:var(--color-primary); padding-top:18px; }
.illustrated-dashboard .home-geometry { position:absolute; inset:auto 0 54px auto; width:105px; height:110px; opacity:.9; }
.illustrated-dashboard .home-geometry::after { display:none; }
.illustrated-dashboard .home-geometry img { right:-17%; width:145%; }
.illustrated-dashboard .home-feature-primary { grid-column:1 / -1; min-height:270px; grid-template-columns:minmax(0,68%) 32%; background:#f6f1ff; border-color:#e3d7fa; }
.illustrated-dashboard .home-feature-primary .home-feature-copy { padding:30px 36px; }
.illustrated-dashboard .home-feature-primary strong { font-size:32px; }
.illustrated-dashboard .home-feature-primary .home-feature-description { max-width:none; font-size:15px; }
.illustrated-dashboard .home-feature-primary .home-feature-link { min-height:46px; margin-top:22px; padding:10px 20px; border-radius:9px; background:var(--color-primary); color:white; font-size:14px; gap:24px; }
.illustrated-dashboard .home-feature-primary .home-geometry { position:relative; inset:auto; width:auto; height:auto; }
.illustrated-dashboard .home-feature-primary .home-geometry img { width:110%; right:0; mix-blend-mode:multiply; }
.illustrated-dashboard .home-feature:focus-visible { outline:3px solid var(--color-primary); outline-offset:4px; }
@media (min-width:761px) and (max-width:1150px) {
  :root { --app-sidebar-width:220px; }
  body:has(.app-sidebar) { padding-left:calc(var(--app-sidebar-width) + 24px); padding-right:24px; }
  .app-navigation a { gap:10px; font-size:12px; }
  .app-topbar-subject { display:none; }
  .illustrated-dashboard .home-feature-grid { grid-template-columns:1fr; }
  .illustrated-dashboard .home-feature { min-height:210px; grid-template-columns:minmax(0,70%) 30%; }
  .illustrated-dashboard .home-feature-primary { grid-column:auto; }
  .illustrated-dashboard .home-feature-description { max-width:none; }
  .illustrated-dashboard .home-geometry { position:relative; inset:auto; width:auto; height:auto; }
  .illustrated-dashboard .home-geometry img { width:125%; right:-10%; }
}


@media (prefers-reduced-motion:reduce) {
  .illustrated-dashboard .home-feature,.illustrated-dashboard .home-feature-link span { transition:none; }
  .illustrated-dashboard .home-feature:hover,.illustrated-dashboard .home-feature:hover .home-feature-link span { transform:none; }
}

/* Desktop navigation uses the same quiet controls as the mobile header. */
@media (min-width:761px) {
  .app-sidebar { padding:28px 16px 196px; background:#fff; border-right:1px solid var(--color-border); box-shadow:4px 0 24px rgb(35 24 53 / .025); }
  .app-sidebar > .app-brand { margin:0 12px 22px; }
  .app-sidebar > .app-brand img { width:160px; }
  .app-sidebar .app-subject-label { margin:0 12px 18px; color:var(--color-text-muted); font-size:10px; letter-spacing:.08em; }
  .app-sidebar .app-navigation { gap:4px; padding:3px; margin-inline:-3px; scrollbar-width:thin; scrollbar-color:#ded7eb transparent; }
  .app-sidebar .app-navigation a { min-height:46px; padding:11px 12px; gap:12px; border-radius:10px; color:var(--color-text-muted); font-size:14px; font-weight:500; transition:background-color 140ms ease,color 140ms ease; }
  .app-sidebar .app-navigation svg { width:20px; height:20px; }
  .app-sidebar .app-nav-label { margin:20px 12px 6px; color:#8a8295; font-size:10px; letter-spacing:.08em; }
  .app-sidebar .app-navigation a:hover { background:#f7f5fb; color:var(--color-text); }
  .app-sidebar .app-navigation a.is-current { background:var(--color-primary-soft); color:var(--color-primary); font-weight:650; }
  .app-sidebar .app-site-link { inset:auto 16px 20px; min-height:44px; padding:10px 12px; gap:12px; border:0; border-radius:10px; color:var(--color-text-muted); font-size:12px; }
  .app-sidebar .app-site-link:hover { background:#f7f5fb; color:var(--color-primary); }
  .app-sidebar .app-site-link svg { width:20px; height:20px; }

  .app-topbar .user-bar-actions { bottom:80px; gap:8px; padding-top:12px; border-top:1px solid var(--color-border); background:#fff; }
  .app-topbar .user-bar-points,
  .app-topbar .user-bar-greeting { box-sizing:border-box; min-height:46px; padding:8px 10px; gap:10px; border:0; border-radius:10px; background:#f5f1fb; box-shadow:none; color:var(--color-primary); font-size:13px; }
  .app-topbar .user-bar-points { font-weight:600; }
  .app-topbar .user-bar-points .points-display-label { font-size:12px; font-weight:500; }
  .app-topbar .user-bar-points .points-display-icon { width:28px; height:28px; }
  .app-topbar .points-add { width:28px; height:28px; border:0; border-radius:6px; background:transparent; color:inherit; }
  .app-topbar .points-add:hover,.app-topbar .user-bar-greeting:hover { background:var(--color-primary-soft); }
  .app-topbar .user-bar-avatar { width:28px; height:28px; flex-basis:28px; border:0; border-radius:6px; background:transparent; color:inherit; font-size:13px; font-weight:650; }
  .app-topbar .user-bar-greeting .dropdown-chevron svg { width:18px; height:18px; }
  .app-topbar .user-bar-login { border-radius:10px; background:#f5f1fb; color:var(--color-primary); }
}
@media (min-width:761px) and (prefers-reduced-motion:reduce) {
  .app-sidebar .app-navigation a { transition:none; }
}

/* One account trigger owns identity, live wallet balance and account actions. */
.app-topbar .user-bar-account .user-bar-greeting { gap:6px; padding-inline:8px; white-space:nowrap; }
.app-topbar .user-bar-greeting .user-bar-greeting-text { flex:1; min-width:0; max-width:none; overflow:hidden; text-overflow:ellipsis; }
.app-topbar .user-bar-greeting .account-balance { display:inline-flex; flex:none; width:auto; height:auto; min-height:0; margin:0; padding:0; gap:4px; border:0; border-radius:0; background:transparent; box-shadow:none; color:inherit; font-size:13px; font-weight:600; }
.app-topbar .user-bar-greeting .account-balance .points-display-icon { width:18px; height:18px; }
.app-topbar .account-balance .points-display-label { position:absolute; display:block; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.app-topbar .user-bar-greeting .user-bar-avatar { width:28px; height:28px; flex-basis:28px; border-radius:50%; background:#e8dffb; }
.app-topbar .user-bar-greeting .dropdown-chevron { flex:none; margin-left:0; }
.app-topbar .user-bar-greeting .dropdown-chevron svg { width:14px; height:14px; }
@media (min-width:761px) { .app-sidebar { padding-bottom:148px; } }