/* Shared presentation only: full-width pages with Serene-style top navigation. */
study-page-shell,:host {display:block;height:100vh;height:100dvh;min-width:0;}
.shared-chrome-frame {height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--chrome-rows,72px minmax(0,1fr));}
.shared-chrome-content {display:block;overflow:auto;min-width:0;min-height:0;overscroll-behavior:contain;}
slot {display:contents;}
.chrome-header,.chrome-header * {box-sizing:border-box;}
.chrome-header {position:relative;z-index:60;display:var(--chrome-header-display,flex);align-items:center;justify-content:space-between;gap:16px;min-width:0;margin:0;padding:12px 28px;color:var(--text);font:14px/1.4 "Avenir Next","Trebuchet MS",sans-serif;}
.chrome-brand {display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap;}
.chrome-brand svg {width:32px;height:32px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.chrome-brand strong {font-size:23px;font-weight:500;}.chrome-brand em {font-size:10px;font-style:normal;letter-spacing:.06em;color:var(--muted);}
.chrome-nav {display:flex;align-items:center;gap:2px;flex:none;padding:4px;border:1px solid var(--line);border-radius:28px;background:var(--chrome-nav-bg,rgba(var(--panel-rgb),.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.15);backdrop-filter:blur(var(--glass-blur,16px));-webkit-backdrop-filter:blur(var(--glass-blur,16px));}
.chrome-primary {display:flex;align-items:center;gap:2px;}
.chrome-nav .nav,.chrome-more>summary {display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 13px;border:1px solid transparent;border-radius:22px;appearance:none;font-family:inherit;font-size:12px;line-height:1.2;color:var(--muted);background:transparent;cursor:pointer;white-space:nowrap;}
.chrome-nav .nav small {font:inherit;}.chrome-primary .nav>span {display:none;}
.chrome-nav .nav:hover,.chrome-more>summary:hover,.chrome-more[open]>summary,.chrome-more.has-current-route>summary {border-color:rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.09);color:var(--text);}
.chrome-nav .nav.active {color:var(--text);border-color:var(--line);background:var(--chrome-active-bg,rgba(var(--accent-rgb),.19));}
.chrome-nav .nav:focus-visible,.chrome-more>summary:focus-visible {outline:2px solid var(--focus);outline-offset:2px;}
.chrome-more {position:relative;}.chrome-more>summary {list-style:none;}.chrome-more>summary::-webkit-details-marker {display:none;}
.chrome-menu {position:absolute;right:0;top:calc(100% + 12px);width:350px;max-width:calc(100vw - 40px);max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain;padding:12px;border:1px solid var(--chrome-menu-border,var(--line));border-radius:20px;background:var(--chrome-menu-bg,rgb(var(--panel-rgb)));box-shadow:0 12px 30px rgba(0,0,0,.16);scrollbar-width:thin;}
.chrome-secondary {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;}
.chrome-secondary .nav {justify-content:flex-start;min-height:44px;padding:10px;border-radius:11px;text-align:left;white-space:normal;background-color:rgba(var(--accent-rgb),.04);}
.chrome-secondary .nav>span {width:22px;flex:none;color:var(--accent);font-size:17px;text-align:center;}
.chrome-secondary .nav.active {background:var(--chrome-active-bg,rgba(var(--accent-rgb),.19));}
.chrome-pending {font-size:12px;line-height:1.5;color:var(--muted);margin:0;}
[hidden] {display:none!important;}
/* Keep account/reward nodes in the light DOM, tucked into More without a rail. */
body[data-shared-chrome] study-page-shell>.chrome-profile {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font:12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);}
body[data-shared-chrome] .chrome-profile b,body[data-shared-chrome] .chrome-profile small {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body[data-shared-chrome] .chrome-profile small {font-size:10px;color:var(--muted);}
body[data-shared-chrome] .chrome-profile .mini-flame {color:var(--accent);}
/* Keyboard bypass links precede the shell and must paint above its header. */
body[data-shared-chrome]>.skip:focus {z-index:61;}
body[data-shared-chrome] {margin:0;height:100vh;height:100dvh;overflow:hidden;}
body[data-shared-chrome] #app.app:not(.hidden) {display:block!important;height:100%;min-width:0;}
body[data-shared-chrome] #app>.shell {height:100%;}
body[data-shared-chrome] .j-bottom-nav,body[data-shared-chrome] .j-nav-backdrop {display:none!important;}
body[data-shared-chrome] study-page-shell>header>.brand {display:none;}
body[data-shared-chrome] study-page-shell>.auth-restore-status {margin:20vh auto 0;max-width:32rem;}
html[data-theme="serene-future"] study-page-shell {--chrome-nav-bg:rgba(246,251,255,.5);--chrome-active-bg:linear-gradient(115deg,#d2e6f5,#e2ddf0);--chrome-menu-bg:#f7fbff;--chrome-menu-border:#b5cadd;}
@media(max-width:1199px){.chrome-header{gap:10px;padding-inline:20px}.chrome-brand strong{font-size:20px}}
@media(max-width:900px){.chrome-primary{display:none}.shared-chrome-frame{grid-template-rows:var(--chrome-rows,64px minmax(0,1fr))}.chrome-header{padding:8px 14px}.chrome-brand{gap:7px}.chrome-brand svg{width:26px;height:26px}.chrome-brand strong{font-size:19px}.chrome-nav{padding:0}.chrome-more>summary{min-height:44px;padding:9px 13px}.chrome-menu{max-width:calc(100vw - 28px);max-height:calc(100dvh - 90px - env(safe-area-inset-bottom))}.chrome-pending{max-width:112px;font-size:11px}.shared-chrome-content{padding-bottom:var(--chrome-content-bottom,env(safe-area-inset-bottom))}}
/* The prior mobile dashboard reserved space for a bottom rail; none remains. */
@media(max-width:900px){body[data-shared-chrome][data-study-route="dashboard"]:not(.exam-route) .workspace{padding-bottom:16px!important}}
/* Focused Exam alone occupies the entire viewport, including the header area. */
body.exam-route:has(.exam-screen) study-page-shell {--chrome-rows:minmax(0,1fr);--chrome-header-display:none;--chrome-content-bottom:0px;}

/* A single header: original controls are light-DOM slottables. Controllers own
   hidden attributes; these rules only size and style the visible controls. */
body[data-shared-chrome] #app>.shell {grid-template-rows:minmax(0,1fr);}
body[data-shared-chrome] .chrome-route-heading {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.chrome-search-area {flex:1;min-width:150px;max-width:250px;}
.chrome-action-area {flex:none;min-width:0;max-width:180px;}
.chrome-menu-tools {display:grid;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}
.chrome-menu>slot[name="chrome-profile"] {display:contents;}
.chrome-more>summary>span:first-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body[data-shared-chrome] study-page-shell>.chrome-tools {box-sizing:border-box;min-width:0;margin:0;color:var(--text);font:13px/1.4 "Avenir Next","Trebuchet MS",sans-serif;}
body[data-shared-chrome] study-page-shell>.chrome-tools:not([hidden]) {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
body[data-shared-chrome] study-page-shell>.chrome-tools[hidden] {display:none!important;}
body[data-shared-chrome] study-page-shell>.chrome-tools :is(button,a) {box-sizing:border-box;min-height:44px;max-width:100%;margin:0;padding:9px 12px;border:1px solid var(--line);border-radius:12px;font:inherit;color:var(--text);background:rgb(var(--panel-rgb));text-decoration:none;overflow-wrap:anywhere;}
body[data-shared-chrome] study-page-shell>.chrome-tools :is(button,a,input):focus-visible {outline:2px solid var(--focus);outline-offset:2px;}
/* Status text remains legible on the opaque menu in light and dark themes. */
html:root body[data-shared-chrome] study-page-shell>.chrome-tools #syncPill {color:var(--text);background:rgb(var(--panel-rgb));}
body[data-shared-chrome] study-page-shell>.chrome-tools #identity {display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0;max-width:100%;overflow-wrap:anywhere;}
body[data-shared-chrome] study-page-shell>#main-chrome-search {width:100%;max-width:250px;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgb(var(--panel-rgb));border:1px solid var(--line);padding:9px 12px;border-radius:12px;}
body[data-shared-chrome] study-page-shell>.global-search:not([hidden]) {display:flex;flex-wrap:nowrap;}
body[data-shared-chrome] study-page-shell>.global-search input {color:var(--text);font-size:12px;}
body[data-shared-chrome] study-page-shell>.global-search input::placeholder {color:var(--muted);opacity:1;}
body[data-shared-chrome] study-page-shell>.chrome-tools #mobileSettingsButton {display:none;}
body[data-shared-chrome] study-page-shell>.chrome-tools .home-view-bar {margin:0;padding:0;border:0;background:none;}
/* The old dashboard hid this switch on phones; in More it has room to remain usable. */
html:root body[data-shared-chrome] study-page-shell>.chrome-tools #homeViewBar:not([hidden]) {display:block!important;}
body[data-shared-chrome] study-page-shell>.chrome-tools .home-view-switch {display:flex;flex-wrap:wrap;gap:6px;}
body[data-shared-chrome] study-page-shell>.chrome-tools .home-view-switch button[aria-pressed="true"] {border-color:var(--accent);}
@media(max-width:1180px){.chrome-search-area{display:none}body[data-shared-chrome] study-page-shell>.global-search{display:none!important}}
@media(max-width:900px){
 .chrome-nav{min-width:0;flex-shrink:1}.chrome-more{min-width:0}.chrome-more>summary{max-width:150px}
 .chrome-brand{flex-shrink:0}.chrome-menu-tools{gap:10px}
 body[data-shared-chrome] study-page-shell>.chrome-tools #mobileSettingsButton{display:inline-flex;width:auto;gap:6px}
 body[data-shared-chrome] study-page-shell>.chrome-tools #mobileSettingsButton small{display:inline;font:inherit}
}
@media(max-width:360px){.chrome-header{padding-inline:10px;gap:6px}.chrome-brand{gap:5px}.chrome-brand strong{font-size:18px}.chrome-brand em{font-size:10px}.chrome-more>summary{max-width:126px;padding-inline:9px}}