/*
  WhateverGo UI layer
  This file is intentionally loaded last on every content page. It translates
  the shared learning interface to the same calm, light system as the home page
  without changing any subject-specific structure or learning interactions.
*/
:root{
  color-scheme:light;
  --bg:#f5f5f7 !important;
  --surface:#ffffff !important;
  --surface-2:#f2f2f4 !important;
  --side:#ffffff !important;
  --card:#ffffff !important;
  --card-soft:#f2f2f4 !important;
  --card-warm:#ffffff !important;
  --input-bg:#ffffff !important;
  --ink-strong:#1d1d1f !important;
  --ink:#3a3a3c !important;
  --ink-2:#3a3a3c !important;
  --ink-soft:#6e6e73 !important;
  --ink-faint:#8e8e93 !important;
  --muted:#6e6e73 !important;
  --text:#1d1d1f !important;
  --faint:#8e8e93 !important;
  --rule:rgba(0,0,0,.10) !important;
  --rule-strong:rgba(0,0,0,.16) !important;
  --border:rgba(0,0,0,.10) !important;
  --line:rgba(0,0,0,.11) !important;
  --accent:#0071e3 !important;
  --accent-dark:#1d1d1f !important;
  --accent-light:#0071e3 !important;
  --accent-2:#0071e3 !important;
  --accent-soft:#0071e3 !important;
  --accent-strong:#0071e3 !important;
  --accent-fade:rgba(0,113,227,.11) !important;
  --hover-bg:rgba(0,113,227,.08) !important;
  --nav-bg:rgba(250,250,252,.76) !important;
  --shadow-sm:0 1px 2px rgba(23,32,51,.06),0 8px 20px rgba(23,32,51,.04) !important;
  --shadow-md:0 2px 6px rgba(23,32,51,.08),0 12px 28px rgba(23,32,51,.06) !important;
}

html[data-wgo-theme="dark"]{
  color-scheme:dark;
  --bg:#101012 !important;--surface:#1c1c1e !important;--surface-2:#242426 !important;
  --side:#1c1c1e !important;--card:#242426 !important;--card-soft:#242426 !important;
  --card-warm:#242426 !important;--input-bg:#1c1c1e !important;--ink-strong:#f5f5f7 !important;
  --ink:#d2d2d7 !important;--ink-2:#d2d2d7 !important;--ink-soft:#a1a1a6 !important;
  --ink-faint:#7d7d82 !important;--muted:#a1a1a6 !important;--text:#f5f5f7 !important;
  --faint:#a1a1a6 !important;--rule:rgba(255,255,255,.12) !important;--rule-strong:rgba(255,255,255,.18) !important;
  --border:rgba(255,255,255,.13) !important;--line:rgba(255,255,255,.13) !important;
  --accent:#2997ff !important;--accent-light:#2997ff !important;--accent-2:#2997ff !important;
  --accent-soft:#64b5ff !important;--accent-strong:#2997ff !important;--accent-fade:rgba(41,151,255,.15) !important;
  --hover-bg:rgba(41,151,255,.13) !important;--nav-bg:rgba(22,22,24,.76) !important;
}

html,body{background:var(--bg) !important;color:var(--ink) !important}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",sans-serif !important;line-height:1.68 !important}
body::before,body::after{display:none !important}
h1,h2,h3,h4,h5,h6,.brand,#topnav .brand,.header h1{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;color:var(--ink-strong) !important}

/* Shared navigation and side navigation */
#topnav,.legal-nav{background:var(--nav-bg) !important;border-color:var(--rule) !important;box-shadow:none !important;backdrop-filter:blur(18px) !important;-webkit-backdrop-filter:blur(18px) !important}
#topnav{height:76px !important;padding:0 clamp(16px,4vw,38px) !important;gap:10px !important}
#topnav .brand{min-width:auto !important;margin-right:16px !important;font-size:16px !important;font-weight:800 !important;letter-spacing:-.02em !important}
#topnav .brand::before{content:"W" !important;display:grid !important;place-items:center !important;width:32px !important;height:32px !important;border-radius:8px !important;background:var(--ink-strong) !important;color:var(--surface) !important;font:800 16px/1 Inter,system-ui,sans-serif !important;box-shadow:none !important}
.nav-btn,.nav-back,#topnav .nav-btn,.legal-nav-links a{border-radius:8px !important;color:var(--ink-soft) !important;font-size:13px !important;font-weight:650 !important}
.nav-btn:hover,.nav-back:hover,#topnav .nav-btn:hover,.legal-nav-links a:hover{background:var(--hover-bg) !important;color:var(--ink-strong) !important;transform:none !important}
.nav-btn.active,#topnav .nav-btn.active{background:var(--accent-fade) !important;border-color:rgba(64,84,198,.22) !important;color:var(--accent) !important}
#topnav .pill,.status-pill,.badge,.public-pill{background:var(--surface-2) !important;border:1px solid var(--rule) !important;color:var(--ink-soft) !important;box-shadow:none !important}

aside.toc,.toc,#sidebar,#lessons-nav{background:var(--surface) !important;border-color:var(--rule) !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
aside.toc h2,.toc h2,#lessons-nav h3{color:var(--accent) !important;border-color:var(--rule) !important}
aside.toc a,.toc a,#lessons-nav button{color:var(--ink-soft) !important;border-radius:8px !important}
aside.toc a:hover,.toc a:hover,#lessons-nav button:hover{background:var(--hover-bg) !important;color:var(--ink-strong) !important;transform:none !important}
aside.toc a.active,.toc a.active,.toc a.study-active,#lessons-nav button.active{background:var(--accent-fade) !important;border-color:rgba(64,84,198,.20) !important;color:var(--accent) !important}
.toc-toggle{background:var(--surface) !important;border-color:var(--rule-strong) !important;color:var(--accent) !important;box-shadow:var(--shadow-sm) !important}

/* Content panels, headers, tables and forms */
.notes-main,.main-content,.page-container,#lessons-main{background:var(--bg) !important}
.header,.legal-hero{background:transparent !important;border:0 !important;box-shadow:none !important}
.header h1,.legal-hero h1{letter-spacing:-.045em !important;font-weight:750 !important}
.header .subtitle,.lede,.header p{color:var(--muted) !important}
section.topic,.card,.guide-step,.card-wrapper,.board-section,.guide,.section,.chat-list,.att-area,.formula-box,.note,.chat-msg,.badge,.content-card,.panel,.glass,.legal-section,.toc,.legal-card,.pt-details,.editor-wrap,.challenge{
  background:var(--surface) !important;border:1px solid var(--rule) !important;box-shadow:var(--shadow-sm) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
section.topic{border-radius:12px !important}
.card:hover,.guide-step:hover,.section:hover,.legal-card:hover{border-color:rgba(64,84,198,.30) !important;box-shadow:var(--shadow-md) !important;transform:none !important}
.ai-note,.notice,.info-box,.success-box,.warn-box{background:var(--surface-2) !important;border-color:var(--rule) !important;color:var(--ink) !important}
.ai-note,.notice,.info-box{border-left:4px solid var(--accent) !important}
table{background:var(--surface) !important;border-color:var(--rule) !important;color:var(--ink) !important}
th{background:var(--surface-2) !important;color:var(--ink-strong) !important;border-color:var(--rule) !important}
td{color:var(--ink) !important;border-color:var(--rule) !important}
input,textarea,select,#input-wrap,#search-wrap,#search-results,.formula,.output-box{background:var(--input-bg) !important;border-color:var(--rule) !important;color:var(--ink-strong) !important;box-shadow:none !important}
.reference-page code.formula,
.reference-sheet .formula,
.formula-row code.formula{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
input::placeholder,textarea::placeholder{color:var(--ink-faint) !important}
button:not(.wgo-theme-toggle),.button,.run,.check,.hint,.reset,#send{border-radius:8px !important}
button.run,button.check,#send,.primary,.cta{background:var(--accent-dark) !important;color:var(--surface) !important;border-color:var(--accent-dark) !important}
html[data-wgo-theme="dark"] button.run,html[data-wgo-theme="dark"] button.check,html[data-wgo-theme="dark"] #send{color:#11151f !important}

/* Tutor panes */
#tutor-page,#main-pane,.chat-header,#input-bar{background:var(--bg) !important;border-color:var(--rule) !important}
.msg.user{background:var(--accent) !important;color:#fff !important;box-shadow:none !important}
.msg.bot{color:var(--ink) !important}
.formula,.formula pre,pre,code{font-family:"Fira Code","Cascadia Code","SF Mono",Consolas,monospace !important}

@media(max-width:640px){#topnav{height:60px !important}.page{height:calc(100dvh - 60px) !important}.legal-nav{min-height:60px !important}}

/* Apple-inspired interaction and material layer */
:root{
  --apple-blue:#0071e3;
  --apple-blue-hover:#0077ed;
  --apple-canvas:#f5f5f7;
  --apple-surface:rgba(255,255,255,.78);
  --apple-surface-solid:#fff;
  --apple-text:#1d1d1f;
  --apple-secondary:#6e6e73;
  --apple-separator:rgba(0,0,0,.1);
  --apple-radius:18px;
  --apple-radius-large:26px;
  --apple-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 42px rgba(0,0,0,.075);
  --apple-shadow-raised:0 4px 14px rgba(0,0,0,.07),0 28px 70px rgba(0,0,0,.12);
}
html[data-wgo-theme="dark"]{
  --apple-blue:#2997ff;
  --apple-blue-hover:#40a2ff;
  --apple-canvas:#101012;
  --apple-surface:rgba(31,31,34,.76);
  --apple-surface-solid:#1c1c1e;
  --apple-text:#f5f5f7;
  --apple-secondary:#a1a1a6;
  --apple-separator:rgba(255,255,255,.12);
  --apple-shadow:0 1px 2px rgba(0,0,0,.28),0 18px 46px rgba(0,0,0,.26);
  --apple-shadow-raised:0 6px 18px rgba(0,0,0,.32),0 34px 80px rgba(0,0,0,.38);
}
html[data-wgo-design="apple"] body{
  background:var(--apple-canvas)!important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Segoe UI",sans-serif!important;
  font-optical-sizing:auto;
  letter-spacing:0;
  text-rendering:optimizeLegibility;
}
html[data-wgo-design="apple"] h1,
html[data-wgo-design="apple"] h2,
html[data-wgo-design="apple"] h3,
html[data-wgo-design="apple"] .brand,
html[data-wgo-design="apple"] #topnav .brand{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,"Segoe UI",sans-serif!important;
  font-optical-sizing:auto;
}
html[data-wgo-design="apple"] h1{letter-spacing:-.045em!important;line-height:1.04!important}
html[data-wgo-design="apple"] h2{letter-spacing:-.03em!important;line-height:1.12!important}
html[data-wgo-design="apple"] p,html[data-wgo-design="apple"] li{letter-spacing:-.006em}
html[data-wgo-design="apple"] .header .subtitle,html[data-wgo-design="apple"] .header .authors{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"Segoe UI",sans-serif!important}

html[data-wgo-design="apple"] #topnav,
html[data-wgo-design="apple"] .site-header,
html[data-wgo-design="apple"] .legal-nav{
  background:var(--apple-surface)!important;
  border-color:transparent!important;
  box-shadow:0 1px 0 var(--apple-separator)!important;
  backdrop-filter:blur(24px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%)!important;
  transition:box-shadow .25s ease,background-color .25s ease!important;
}
html[data-wgo-design="apple"] body.dashboard-page .site-header,
html[data-wgo-design="apple"] body.formula-hub .site-header,
html[data-wgo-design="apple"] body.reference-page .site-header{
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html[data-wgo-design="apple"] #topnav.wgo-is-scrolled,
html[data-wgo-design="apple"] .site-header.wgo-is-scrolled,
html[data-wgo-design="apple"] .legal-nav.wgo-is-scrolled{box-shadow:0 1px 0 var(--apple-separator),0 14px 38px rgba(0,0,0,.08)!important}
html[data-wgo-design="apple"] #topnav .brand::before,
html[data-wgo-design="apple"] .brand-mark{border-radius:10px!important;background:linear-gradient(145deg,#242426,#050506)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 5px 14px rgba(0,0,0,.16)!important}

html[data-wgo-design="apple"] button,
html[data-wgo-design="apple"] .button,
html[data-wgo-design="apple"] .nav-btn,
html[data-wgo-design="apple"] a.course-card,
html[data-wgo-design="apple"] [role="button"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),background-color .2s ease,border-color .2s ease,box-shadow .28s ease,opacity .2s ease!important;
  will-change:transform;
}
html[data-wgo-design="apple"] .wgo-is-pressed{transform:scale(.97)!important;transition-duration:.08s!important;opacity:.84!important}
html[data-wgo-design="apple"] .nav-btn,
html[data-wgo-design="apple"] #topnav .nav-btn{min-height:38px!important;border-radius:999px!important;padding-inline:15px!important}
html[data-wgo-design="apple"] .nav-btn.active,
html[data-wgo-design="apple"] #topnav .nav-btn.active{background:var(--apple-blue)!important;border-color:var(--apple-blue)!important;color:#fff!important;box-shadow:0 5px 16px color-mix(in srgb,var(--apple-blue) 26%,transparent)!important}
html[data-wgo-design="apple"] .nav-btn:hover:not(.active),
html[data-wgo-design="apple"] #topnav .nav-btn:hover:not(.active){background:color-mix(in srgb,var(--apple-text) 7%,transparent)!important}

html[data-wgo-design="apple"] aside.toc,
html[data-wgo-design="apple"] .toc,
html[data-wgo-design="apple"] #sidebar,
html[data-wgo-design="apple"] #lessons-nav{
  background:color-mix(in srgb,var(--apple-surface-solid) 82%,transparent)!important;
  border-color:var(--apple-separator)!important;
  backdrop-filter:blur(26px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(26px) saturate(160%)!important;
}
html[data-wgo-design="apple"] aside.toc a,
html[data-wgo-design="apple"] .toc a,
html[data-wgo-design="apple"] #lessons-nav button{border-radius:11px!important;transition:background-color .18s ease,color .18s ease,transform .1s ease!important}
html[data-wgo-design="apple"] aside.toc a.active,
html[data-wgo-design="apple"] .toc a.active,
html[data-wgo-design="apple"] .toc a.study-active,
html[data-wgo-design="apple"] #lessons-nav button.active{background:color-mix(in srgb,var(--apple-blue) 13%,transparent)!important;color:var(--apple-blue)!important}

html[data-wgo-design="apple"] section.topic,
html[data-wgo-design="apple"] .card,
html[data-wgo-design="apple"] .guide-step,
html[data-wgo-design="apple"] .section,
html[data-wgo-design="apple"] .content-card,
html[data-wgo-design="apple"] .panel,
html[data-wgo-design="apple"] .legal-card,
html[data-wgo-design="apple"] .pt-details{
  background:var(--apple-surface-solid)!important;
  border-color:color-mix(in srgb,var(--apple-separator) 72%,transparent)!important;
  border-radius:var(--apple-radius)!important;
  box-shadow:var(--apple-shadow)!important;
}
html[data-wgo-design="apple"] section.topic{padding:clamp(1.35rem,3vw,2.35rem)!important}
html[data-wgo-design="apple"] .card:hover,
html[data-wgo-design="apple"] .guide-step:hover,
html[data-wgo-design="apple"] .section:hover,
html[data-wgo-design="apple"] .legal-card:hover{transform:translateY(-2px)!important;box-shadow:var(--apple-shadow-raised)!important;border-color:color-mix(in srgb,var(--apple-blue) 28%,var(--apple-separator))!important}
html[data-wgo-design="apple"] input,
html[data-wgo-design="apple"] textarea,
html[data-wgo-design="apple"] select,
html[data-wgo-design="apple"] #input-wrap,
html[data-wgo-design="apple"] #search-wrap,
html[data-wgo-design="apple"] #search-results{
  border-radius:14px!important;
  background:color-mix(in srgb,var(--apple-surface-solid) 90%,transparent)!important;
  border-color:var(--apple-separator)!important;
}
html[data-wgo-design="apple"] input:focus,
html[data-wgo-design="apple"] textarea:focus,
html[data-wgo-design="apple"] select:focus{border-color:var(--apple-blue)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--apple-blue) 18%,transparent)!important}
html[data-wgo-design="apple"] .wgo-theme-toggle{border-radius:999px!important;background:color-mix(in srgb,var(--apple-surface-solid) 82%,transparent)!important;box-shadow:inset 0 0 0 1px var(--apple-separator)!important}
html[data-wgo-design="apple"] #wgo-auth-gate .wgo-auth-backdrop{background:rgba(0,0,0,.34)!important;backdrop-filter:blur(12px) saturate(130%)!important;-webkit-backdrop-filter:blur(12px) saturate(130%)!important}
html[data-wgo-design="apple"] .wgo-auth-dialog,html[data-wgo-design="apple"] .wgo-user-menu{border:1px solid var(--apple-separator)!important;border-radius:24px!important;background:var(--apple-surface)!important;box-shadow:var(--apple-shadow-raised)!important;backdrop-filter:blur(28px) saturate(180%)!important;-webkit-backdrop-filter:blur(28px) saturate(180%)!important}
html[data-wgo-design="apple"] .wgo-user-menu{border-radius:16px!important}

html[data-wgo-design="apple"] .wgo-reveal{opacity:0;transform:translate3d(0,18px,0);filter:blur(3px);transition:opacity .55s ease var(--wgo-reveal-delay,0ms),transform .55s cubic-bezier(.2,.8,.2,1) var(--wgo-reveal-delay,0ms),filter .55s ease var(--wgo-reveal-delay,0ms)!important}
html[data-wgo-design="apple"] .dashboard-page .wgo-reveal,
html[data-wgo-design="apple"] .formula-hub .wgo-reveal,
html[data-wgo-design="apple"] .reference-page .wgo-reveal{opacity:1!important;transform:none!important;filter:none!important}
html[data-wgo-design="apple"] .wgo-reveal.wgo-is-revealed{opacity:1;transform:none;filter:none}
html[data-wgo-design="apple"] .page.active section.topic.wgo-reveal{opacity:1;transform:none;filter:none}

::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:reduce){
  html[data-wgo-design="apple"] .wgo-reveal,html[data-wgo-design="apple"] .wgo-reveal.wgo-is-revealed{opacity:1!important;transform:none!important;filter:none!important}
  html[data-wgo-design="apple"] button,html[data-wgo-design="apple"] .button,html[data-wgo-design="apple"] .nav-btn,html[data-wgo-design="apple"] a.course-card{transition:none!important;will-change:auto}
}
@media(prefers-reduced-transparency:reduce){
  html[data-wgo-design="apple"] #topnav,html[data-wgo-design="apple"] .site-header,html[data-wgo-design="apple"] .legal-nav,html[data-wgo-design="apple"] aside.toc,html[data-wgo-design="apple"] .toc,html[data-wgo-design="apple"] #sidebar{background:var(--apple-surface-solid)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html[data-wgo-design="apple"] #wgo-auth-gate .wgo-auth-backdrop,html[data-wgo-design="apple"] .wgo-auth-dialog,html[data-wgo-design="apple"] .wgo-user-menu{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
@media(prefers-contrast:more){
  html[data-wgo-design="apple"] #topnav,html[data-wgo-design="apple"] .site-header,html[data-wgo-design="apple"] aside.toc,html[data-wgo-design="apple"] section.topic,html[data-wgo-design="apple"] .card{border-color:currentColor!important}
}