/* Shared student shell: retain theme tokens and session-specific layouts. */
/* Compositor-only feedback: do not block taps or shift the page while loading. */
a[href], button { touch-action: manipulation; }
a.navigation-pressed { opacity: .72; }
.navigation-restored .paper-card { animation: none !important; opacity: 1; transform: none; }
#navigation-progress {
    position: fixed; inset: 0 0 auto; height: 3px; z-index: 100000;
    pointer-events: none; overflow: hidden; background: var(--chrome-tint, #eee8ff);
}
#navigation-progress[hidden] { display: none; }
#navigation-progress span {
    display: block; width: 40%; height: 100%; background: var(--chrome-purple, #6540c4);
    animation: navigation-progress 1s ease-in-out infinite;
}
@keyframes navigation-progress { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) { #navigation-progress span { animation: none; width: 100%; } }
/* Colourful app chrome, shared by desktop and mobile. */
:root {
    --chrome-surface:linear-gradient(110deg,#f0eaff 0%,#f8faff 52%,#e0f7f3 100%);
    --chrome-border:#dcd7f4;
    --chrome-purple:#6540c4;
    --chrome-teal:#087f78;
    --chrome-blue:#2563b5;
    --chrome-amber:#9a5708;
    --chrome-tint:#eee8ff;
}
[data-theme="dark"] {
    --chrome-surface:linear-gradient(110deg,#29203f 0%,#1c2537 52%,#153a3a 100%);
    --chrome-border:#45405f;
    --chrome-purple:#c4a7ff;
    --chrome-teal:#71dfce;
    --chrome-blue:#91beff;
    --chrome-amber:#ffd18b;
    --chrome-tint:#382c52;
}
#app-header {
    background:var(--chrome-surface);
    border-bottom:1px solid var(--chrome-border);
    box-shadow:0 4px 18px rgb(65 43 112 / .08);
}
#app-header .header-logo h1 {
    background:linear-gradient(100deg,var(--chrome-purple),var(--chrome-teal));
    -webkit-background-clip:text;
    background-clip:text;
    font-weight:800;
    letter-spacing:-.025em;
}
#app-header #theme-toggle {
    background:var(--chrome-tint);
    border-color:var(--chrome-border);
    border-radius:13px;
}
#app-header #profile-btn {
    background:linear-gradient(135deg,#7950da,#147e8b);
    border:1px solid rgb(255 255 255 / .35);
    border-radius:13px;
    color:#fff;
    font-weight:800;
    box-shadow:0 3px 8px rgb(81 53 154 / .2);
}
#app-header :focus-visible { outline:3px solid var(--chrome-purple); outline-offset:3px; }
#app-header .desktop-nav-link.active,
#app-header .desktop-nav-link[aria-current="page"] {
    color:var(--chrome-purple);
    background:var(--chrome-tint);
    box-shadow:inset 0 -3px var(--chrome-purple);
}
#app-header .desktop-nav-link:hover { color:var(--chrome-teal); }
.app-icon { width:24px; height:24px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mobile-more { box-sizing:border-box; width:min(100%, 560px); max-width:100%; max-height:calc(var(--app-viewport-height, 100dvh) * .85); margin:auto auto 0; padding:20px 20px calc(20px + env(safe-area-inset-bottom)); border:1px solid var(--border-color); border-radius:24px 24px 0 0; color:var(--text-color); background:var(--card-color); }
.mobile-more {
    position:fixed;
    inset:auto 0 0;
    margin:0 auto;
    max-height:85vh;
    max-height:calc(var(--app-viewport-height, 100dvh) * .85);
    overflow-y:auto;
    overscroll-behavior:contain;
}
.mobile-more::backdrop { background:rgb(0 0 0 / .55); }
.more-open { overflow:hidden; }
.more-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.more-heading h2 { margin:0; font-size:1.2rem; }
.more-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.more-links a, .more-links button, .more-logout { box-sizing:border-box; display:flex; align-items:center; gap:10px; min-width:0; min-height:52px; padding:12px; border:1px solid var(--border-color); border-radius:12px; background:var(--card-color-alt); color:var(--text-color); font:inherit; font-size:.9rem; text-align:left; text-decoration:none; overflow-wrap:anywhere; cursor:pointer; }
.more-links .app-icon { color:var(--primary-color); width:21px; }
.more-logout { width:100%; justify-content:center; margin-top:16px; }
.mobile-more :focus-visible, .habit-nav :focus-visible { outline:3px solid var(--primary-color); outline-offset:2px; }
@media(max-width:767px) {
    body:has(.habit-nav) { --app-nav-height:76px; padding-bottom:calc(var(--app-nav-height) + env(safe-area-inset-bottom)); }
    .habit-nav { grid-template-columns:repeat(4,minmax(0,1fr)) !important; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); }
    .habit-nav a, .habit-nav button { box-sizing:border-box; min-width:0; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:4px 2px; border:0; border-radius:12px; background:transparent; color:var(--text-muted); font:inherit; font-size:.7rem; font-weight:600; text-decoration:none; cursor:pointer; }
    .habit-nav button[data-active], .habit-nav button[aria-expanded="true"], .habit-nav a[aria-current="page"] { background:var(--card-color-alt); color:var(--primary-color); }
    body:has(.habit-nav) #app-header { padding:8px 16px; gap:10px; }
    body:has(.habit-nav) .header-logo h1 { font-size:1.15rem; white-space:nowrap; }
    body:has(.habit-nav) .xp-header { display:none; }
    body:has(.habit-nav) > main { box-sizing:border-box; width:100%; min-width:0; padding:12px 16px; }
    body:has(.habit-nav) > main h1, body:has(.habit-nav) > main h2, body:has(.habit-nav) > main h3 { overflow-wrap:anywhere; }
    body:has(.habit-nav) .card { box-sizing:border-box; max-width:100%; border-radius:16px; }
    body:has(.habit-nav) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), body:has(.habit-nav) select { box-sizing:border-box; max-width:100%; min-height:44px; font-size:16px; }
    body:has(.habit-nav) .pwa-banner { bottom:calc(var(--app-nav-height) + env(safe-area-inset-bottom)); }
    .study-setup { padding:0 !important; }
    .setup-mode { padding:12px !important; }
    .setup-mode small { font-size:.82rem; }
}
@media(max-width:767px) {
    body:has(.habit-nav) main canvas { max-width:100%; }
}
@media(min-width:768px) and (max-width:1100px) {
    body:has(.habit-nav) #app-header { flex-wrap:wrap; gap:12px; }
    body:has(.habit-nav) .header-desktop-nav { order:4; flex-basis:100%; justify-content:center; margin:0; }
    body:has(.habit-nav) .xp-header { margin-left:auto; }
}
.mobile-more .hdr-btn { min-width:44px; min-height:44px; }
@media(max-width:767px) {
    body:has(.habit-nav) .hdr-btn { min-width:44px; min-height:44px; }
}

@media(max-width:767px) {
    .habit-nav {
        background:var(--chrome-surface);
        border-top:1px solid var(--chrome-border);
        border-radius:20px 20px 0 0;
        box-shadow:0 -5px 24px rgb(65 43 112 / .12);
        gap:6px;
    }
    .habit-nav > :nth-child(1) { --tab-color:var(--chrome-purple); }
    .habit-nav > :nth-child(2) { --tab-color:var(--chrome-blue); }
    .habit-nav > :nth-child(3) { --tab-color:var(--chrome-teal); }
    .habit-nav > :nth-child(4) { --tab-color:var(--chrome-amber); }
    .habit-nav a, .habit-nav button {
        position:relative;
        color:var(--tab-color);
        transition:background-color .15s,box-shadow .15s;
    }
    .habit-nav .app-icon { width:23px; height:23px; }
    .habit-nav a:hover, .habit-nav button:hover { background:var(--chrome-tint); }
    .habit-nav button[data-active], .habit-nav button[aria-expanded="true"],
    .habit-nav a[aria-current="page"] {
        background:var(--chrome-tint);
        color:var(--tab-color);
        font-weight:800;
        box-shadow:inset 0 3px var(--tab-color);
    }
}

/* Smart "Open in App" banner for mobile browsers */
.smart-app-banner {
    display: none;
    box-sizing: border-box;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--chrome-surface);
    border-bottom: 1px solid var(--chrome-border);
    color: var(--text-color);
    position: sticky;
    top: 0;
    z-index: 1001;
    font-size: 0.9rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.smart-app-dismiss {
    background: transparent;
    border: none;
    color: var(--text-muted, #888);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.smart-app-dismiss:hover {
    color: var(--text-color);
}
.smart-app-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.smart-app-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.smart-app-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.2;
}
.smart-app-desc {
    font-size: 0.78rem;
    color: var(--text-muted, #777);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smart-app-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: linear-gradient(135deg, #7950da, #147e8b);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 8px;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(121, 80, 218, 0.25);
    transition: transform 0.1s ease, opacity 0.15s ease;
}
.smart-app-btn:active {
    transform: scale(0.97);
}
@media (min-width: 768px) {
    .smart-app-banner {
        display: none !important;
    }
}