/* Interaction states and bespoke artwork. Shared components use Tailwind CDN. */
:root { --ink:var(--color-ink); --muted:var(--color-muted); --primary:var(--color-brand-700); --primary-hover:var(--color-brand-800); --soft:var(--color-brand-50); --canvas:var(--color-cream); --line:var(--color-sand); --danger:#b54440; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
.auth-body { padding-bottom:0; }
[hidden] { display:none!important; }
::selection { background:var(--color-brand-200); }
.material-symbols-rounded { font-family:'Material Symbols Rounded'; font-weight:400; font-style:normal; font-size:22px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; font-variation-settings:'FILL' 0,'wght' 450,'GRAD' 0,'opsz' 24; }
.icon { flex-shrink:0; width:22px; height:22px; vertical-align:middle; overflow:hidden; }
.button .icon,.text-link .icon,.card-meta .icon,.metric-top .icon,.back-link .icon { font-size:17px; width:17px; height:17px; }
.brand-mark .icon { font-size:21px; width:21px; height:21px; }
.bottom-nav .icon { font-size:23px; width:23px; height:23px; }
.bottom-nav [aria-current] .icon { font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; }
.bottom-nav { padding-bottom:max(6px,env(safe-area-inset-bottom)); box-shadow:0 -4px 24px #53283804; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; background:var(--primary); color:white; padding:10px 20px; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.back-link .icon,.exam-controls .previous .icon { transform:rotate(180deg); }
.sidebar.is-open { translate:0 0!important; transform:translateX(0)!important; }
.nav-backdrop { position:fixed; inset:0; z-index:45; background:color-mix(in srgb,var(--color-brand-900) 45%,transparent); backdrop-filter:blur(3px); }
.account-menu summary::-webkit-details-marker { display:none; }
.input-wrap:has(.password-toggle) input { padding-right:55px; }
.contact-form .form-grid>.form-field:last-of-type { grid-column:1/-1; }
.dialog::backdrop { background:color-mix(in srgb,var(--color-brand-900) 52%,transparent); backdrop-filter:blur(4px); }
.question-card { scroll-margin-top:82px; }
.question-palette-item.review:after { content:''; position:absolute; top:-2px; right:-2px; width:7px; height:7px; border:1px solid white; border-radius:50%; background:#d99e3b; }
.exam-page { padding:0; }
.enrollment-banner>.icon { color:var(--primary); }
.course-art>.course-symbol { position:absolute; right:18px; bottom:-10px; width:92px; height:92px; font-size:92px; color:var(--color-brand-600); opacity:.42; font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 48; transform:rotate(-12deg); }
.course-card:nth-child(3n+2) .course-art { background:#f4e7d5; }
.course-card:nth-child(3n+2) .course-symbol { color:#b68a58; }
.course-card:nth-child(3n+3) .course-art { background:#e8e4ef; }
.course-card:nth-child(3n+3) .course-symbol { color:#9180ae; }
.hero-orbits { position:absolute; right:-50px; top:-65px; width:285px; height:285px; border:1px solid #ffffff0e; border-radius:50%; box-shadow:0 0 0 35px #ffffff04,0 0 0 70px #ffffff03; pointer-events:none; }
.hero-feature-card { background:linear-gradient(145deg,#ffffff14,#ffffff05); border:1px solid #ffffff20; box-shadow:0 12px 30px #230c1812; }
.home-courses { display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 16px 6px; scrollbar-width:none; margin-inline:-16px; }
.home-courses>* { scroll-snap-align:start; }
.exam-paths { scrollbar-width:none; }
.home-courses::-webkit-scrollbar,.exam-paths::-webkit-scrollbar { display:none; }
.hero-main { background:radial-gradient(ellipse at 100% 110%,var(--color-brand-100) 0%,transparent 58%),linear-gradient(135deg,var(--color-brand-50),white); }
@media(max-width:1023px) {
    .public-nav.is-open { display:flex; position:absolute; inset:100% 0 auto; background:var(--canvas); padding:12px 20px; border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; box-shadow:0 10px 20px #381d2709; }
    .public-nav a { padding:11px 4px; font-size:13px; }
}
@media(max-width:767px) {
    .auth-story h2 br { display:none; }
    .form-field input,.form-field select,.form-field textarea,.search-field input { font-size:16px; }
    .table-scroll .data-table { min-width:530px; }
    .result-review .option-card { flex-wrap:wrap; }
    .exam-sidebar { position:fixed; z-index:50; inset:auto 0 0; width:100%; max-height:72vh; overflow:auto; padding:12px; background:var(--canvas); border-radius:18px 18px 0 0; transform:translateY(110%); transition:transform .2s ease; }
    .exam-sidebar.is-open { transform:translateY(0); }
    .exam-sidebar .panel-body { padding:12px 14px; }
    .exam-submit p { display:none; }
    .exam-submit { justify-content:flex-end; }
    .exam-submit .button { min-height:32px; padding:7px 12px; }
    .question-tools .question-save-status { margin-left:auto; }
}
@media(min-width:768px) {
    .home-courses { grid-auto-flow:initial; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-columns:auto; gap:16px; overflow:visible; margin:0; padding:0; }
    .hero-orbits { width:470px; height:470px; right:5%; top:-90px; }
}
@media(min-width:1024px) { body { padding-bottom:0; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } }
@media print { .sidebar,.workspace-header,.site-header,.site-footer,.bottom-nav,.toast-stack,.button,.tabs,.filter-bar { display:none!important; } body,.workspace,.workspace-content { padding:0; } .panel,.metric,.question-card { break-inside:avoid; box-shadow:none; } .table-scroll { overflow:visible; } }
/* Course listings use compact rows on phones; the home shelf remains swipeable. */
.course-art-label { position:absolute; left:14px; bottom:12px; }
@media(max-width:767px) {
    .home-courses { margin-inline:0; padding:0 0 6px; grid-auto-columns:84%; }
    .catalog-content .course-card { display:grid; grid-template-columns:78px minmax(0,1fr); align-items:start; padding:12px; }
    .catalog-content .course-art { height:86px; border-radius:12px; padding:8px; }
    .catalog-content .course-art .badge,.catalog-content .course-art-label { display:none; }
    .catalog-content .course-symbol { width:67px; height:67px; font-size:67px; right:4px; bottom:2px; }
    .catalog-content .course-body { padding:0 0 0 12px; }
    .catalog-content .course-body h3 { font-size:15px; }
    .catalog-content .course-body>p { -webkit-line-clamp:2; font-size:14px; margin:7px 0 9px; }
    .catalog-content .course-body .card-meta { font-size:12px; gap:5px 8px; padding-bottom:8px; }
    .catalog-content .course-body .card-footer { padding-top:8px; font-size:12px; }
    .catalog-content .course-body .text-link { font-size:14px; }
}