@import url('./apps/daily/subtest-tokens.css');
/* Navigation shares the same canvas as every embedded page. */
:root{--canvas:#dff5ff;--text:#192f50;--quiet:#526983;--accent:#7846e4;--chrome-hover:#536aa010;color-scheme:light;background:var(--canvas);color:var(--text)}
:root[data-theme=dark]{--canvas:#0f203b;--text:#e7eefb;--quiet:#a4b8d3;--accent:#ba9bff;--chrome-hover:#c5d9ff0e;--line:#30435e;color-scheme:dark}
body,.workspace,.shell-header{background:var(--canvas);color:var(--text)}
.shell-header{border:0;box-shadow:none}
body[data-active-app=daily] .shell-header:not(.preparation-shell-header){background:#eaf5ff}
body[data-active-app=materi] .shell-header{background:#e8f4ff}
body[data-active-app=jadwal] .shell-header{background:#e9f5ff}
body.jadwal-narrow:not(.jadwal-month-expanded) .shell-header{background:#086aff}
body.jadwal-narrow:not(.jadwal-month-expanded) .shell-header .mobile-brand{color:#fff}
body.jadwal-narrow:not(.jadwal-month-expanded) .shell-header .mobile-brand>span{color:#d5e4ff}
body.jadwal-narrow:not(.jadwal-month-expanded) .shell-header :is(.icon-button,#settings){color:#fff}
:root[data-theme=dark] body[data-active-app] .shell-header:not(.preparation-shell-header){background:#14243a}
.header-tools{display:flex;align-items:center;gap:4px;margin-left:auto}
.icon-button,.shell-header #settings{color:var(--quiet)}
.icon-button:hover{background:var(--chrome-hover)}
.shell-header #settings{margin:0;cursor:default}
.brand-copy>span,.mobile-brand>span{color:var(--accent)}
.sidebar{background:color-mix(in srgb,var(--canvas) 85%,var(--text) 3%);border-color:color-mix(in srgb,var(--quiet) 13%,transparent)}
.nav-item{color:var(--quiet)}
.nav-item:hover{background:var(--chrome-hover)}
.nav-item[aria-current=page]{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.sidebar-foot,.nav-caption{color:var(--quiet)}
.sidebar-foot div>span{color:var(--quiet)}
.student-mark{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
#loading{background:transparent;color:var(--quiet)}#unavailable{background:var(--canvas);color:var(--quiet)}
#unavailable h2{color:var(--text)}
.shell-header.preparation-shell-header{background:color-mix(in srgb,var(--folder-ink) 35%,#161526);color:#fff}
.shell-header.preparation-shell-header .mobile-brand{color:#fff}
.shell-header.preparation-shell-header .mobile-brand>span{color:var(--folder-light)}
.shell-header.preparation-shell-header :is(.icon-button,#settings){color:#fff;background:transparent}
.shell-header.preparation-shell-header .icon-button:hover{background:#ffffff15}
.shell-header.preparation-shell-header :is(a,button):focus-visible{outline-color:#fff}
@media(max-width:767px){
 .workspace,.collapsed .workspace{height:calc(100dvh - 68px - env(safe-area-inset-bottom,0px))}
 .shell-header{height:54px;padding:0 16px;background:var(--canvas);gap:10px}
 .header-tools{gap:2px}
 .header-tools .icon-button{width:38px;min-width:38px;height:40px}
 .header-tools svg{width:21px;height:21px}
 #mobile-nav{--bubble-rim:#fbfdff;left:0;right:0;bottom:0;height:calc(56px + env(safe-area-inset-bottom,0px));padding:0 max(4px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(4px,env(safe-area-inset-left,0px));border:0;border-radius:0;background:var(--canvas);box-shadow:none}
 :root[data-theme=dark] #mobile-nav{--bubble-rim:#263c5a}
 #mobile-nav .nav-item{height:56px;min-height:44px;border-radius:0;font-size:9.5px;line-height:11px;color:var(--quiet);background:transparent;touch-action:manipulation}
 #mobile-nav .nav-icon{isolation:isolate;width:50px;height:50px;top:-12px;background:transparent;border:0;border-radius:50%;box-shadow:none;color:inherit;transform:translateY(12px);transition:transform .38s cubic-bezier(.22,.85,.3,1.25),color .2s}
 #mobile-nav .nav-icon::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:50%;border:5px solid var(--bubble-rim);background:linear-gradient(140deg,#c8acff 0%,#a271fa 35%,#7945eb 76%,#a976ff 100%);box-shadow:0 3px 6px #59399724,inset 0 1px 2px #ffffff70;opacity:0;transform:scale(.55);transition:transform .38s cubic-bezier(.2,.85,.3,1.3),opacity .18s}
 #mobile-nav .nav-icon::after{content:'';position:absolute;inset:1px;border:1.5px solid var(--accent);border-radius:50%;opacity:0;pointer-events:none}
 #mobile-nav .nav-item svg{position:relative;width:22px;height:22px;transition:transform .18s,fill .2s;transform-origin:center}
 #mobile-nav .nav-label{top:auto;bottom:4px;max-width:calc(100% - 2px);white-space:nowrap;transition:color .2s}
 #mobile-nav .nav-item[aria-current=page]{color:var(--accent);background:transparent}
 #mobile-nav .nav-item[aria-current=page] .nav-icon{top:-12px;transform:translateY(0);color:#fff}
 #mobile-nav .nav-item[aria-current=page] .nav-icon::before{opacity:1;transform:scale(1)}
 #mobile-nav .nav-item[aria-current=page] svg{width:24px;height:24px;fill:#ffffff20;filter:drop-shadow(0 1px 1px #5820a640);stroke-width:1.9}
 #mobile-nav .nav-item[aria-current=page] .nav-label{top:auto;bottom:4px}
 #mobile-nav .nav-item[aria-current=page]::after{display:none}
 #mobile-nav .nav-item:active svg{transform:scale(.84)}
 #mobile-nav .is-tapped .nav-icon::after{animation:nav-tap-ring .5s ease-out}
 #mobile-nav .is-tapped .nav-icon svg{animation:nav-icon-tap .38s cubic-bezier(.2,.8,.3,1)}
}
@keyframes nav-tap-ring{0%{opacity:.5;transform:scale(.6)}100%{opacity:0;transform:scale(1.25)}}
@keyframes nav-icon-tap{0%{transform:scale(.8)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#mobile-nav .nav-icon,#mobile-nav .nav-icon::before,#mobile-nav .nav-item svg,#mobile-nav .nav-label{transition:none!important;animation:none!important}}

/* The active Daily exercise occupies the shell viewport. The elements remain
   in the document and return under their existing theme/collapse preferences. */
body.daily-exercise-focus{overflow:hidden}
body.daily-exercise-focus :is(.sidebar,.shell-header,#mobile-nav){display:none}
body.daily-exercise-focus .workspace{margin-left:0;height:100dvh;transition:none}

/* The discussion owns its compact header; sidebar and bottom navigation keep
   their existing layout and return unchanged when the Daily route changes. */
body.daily-discussion-focus{overflow:hidden}
body.daily-discussion-focus .shell-header{display:none}

/* Genuine pending/error feedback stays inside the current page. */
#content{background:var(--canvas)}
#loading{max-width:calc(100% - 48px);text-wrap:pretty}
#unavailable{
 inset:24px auto auto 24px;width:min(440px,calc(100% - 48px));height:auto;
 align-items:flex-start;gap:9px;padding:24px;text-align:left;
 background:var(--surface);border:1px solid var(--shell-border);border-radius:20px;
}
#unavailable .error-icon{font-size:25px;line-height:1;color:var(--quiet)}
#unavailable h2{font-size:20px;line-height:1.3;margin:0;text-wrap:balance}
#unavailable p{font-size:13px;max-width:none;margin:0;line-height:1.6;text-wrap:pretty}
#retry{
 min-height:44px;width:max-content;max-width:100%;padding:10px 20px;
 border-radius:999px;background:#1768ce;color:#fff;margin-top:4px;
}
@media(max-width:767px){#unavailable{inset:16px auto auto 16px;width:calc(100% - 32px);padding:20px}}