/* OPAI theme + motion layer. Loaded after opai-shared.css on every section page.
   Dark mode = html[data-theme=dark] (set by opai-ux.js, remembered in localStorage). */

/* ================= DARK THEME ================= */
html[data-theme=dark]{
  color-scheme:dark;
  --paper:#120F0F;--bg:#120F0F;--card:#1C1616;--card-2:#221B1B;--well:#282020;--hair:#332829;--line:#362A2B;--line-2:#423738;
  --s1:#1C1616;--s2:#221B1B;--s3:#332829;
  --ink:#E4EBE9;--tx:#E4EBE9;--ink-2:#AABDBB;--mut:#9BAFAF;--ink-3:#7E8F95;
  --teal:#377387;--pri:#377387;--teal-2:#43849A;--teal-soft:#153540;--coral:#E4B181;--coral-ink:#DFC2A1;--coral-soft:#322828;
  --ok:#5C9DB2;--good:#5C9DB2;--warn:#E19146;--bad:#E2AB78;--ac:#9AC2D0;
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -18px rgba(0,0,0,.8);
  /* Tailwind-page channels (see tailwind config in app/agent-console/academics-full) */
}
html[data-theme=dark],html[data-theme=dark] body{background-color:var(--paper);color:var(--ink)}
html[data-theme=dark] ::selection{background:#473D3F;color:#fff}
html[data-theme=dark] .opai-hd{background:rgba(18,15,15,.86);border-bottom-color:var(--hair)}
html[data-theme=dark] .opai-pills a[aria-current=page]{background:#E4EBE9;color:#120F0F}
html[data-theme=dark] .opai-dock{background:rgba(28,22,22,.86)}
html[data-theme=dark] .opai-user .av{background:var(--teal)}
html[data-theme=dark] #opai-guide{background:rgba(0,0,0,.55)}
html[data-theme=dark] #opai-guide a.gi,html[data-theme=dark] #opai-guide input{background:var(--card-2)}

/* hard-coded light surfaces inside pages */
html[data-theme=dark] .conf button,html[data-theme=dark] .en button,html[data-theme=dark] dialog textarea,
html[data-theme=dark] .addbox,html[data-theme=dark] .cc,html[data-theme=dark] .msg,html[data-theme=dark] button.chip,
html[data-theme=dark] label.chip,html[data-theme=dark] .dots button,html[data-theme=dark] .composer input,
html[data-theme=dark] .composer textarea,html[data-theme=dark] .mic,html[data-theme=dark] button.b.alt,
html[data-theme=dark] a.b.alt,html[data-theme=dark] button.b.dng,html[data-theme=dark] input,
html[data-theme=dark] textarea,html[data-theme=dark] select,html[data-theme=dark] .modal>div,
html[data-theme=dark] .big.out:hover{background:var(--card-2);color:var(--ink);border-color:var(--hair)}
html[data-theme=dark] button.chip,html[data-theme=dark] label.chip,html[data-theme=dark] .mic,html[data-theme=dark] button.b.alt,html[data-theme=dark] a.b.alt{color:#88B7C7;border-color:#377387}
html[data-theme=dark] button.b.dng{color:var(--bad);border-color:var(--bad)}
html[data-theme=dark] .msg.u,html[data-theme=dark] .dots button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
html[data-theme=dark] .msg.err{background:var(--coral-soft);border-color:var(--coral)}
html[data-theme=dark] .pend{background:#261D1E;border-color:#964A03}
html[data-theme=dark] .note,html[data-theme=dark] .banner{background:#432000;border-color:#793A00;color:#DBCCB4}
html[data-theme=dark] .col{background:#20191A}
html[data-theme=dark] pre.mail,html[data-theme=dark] .bul{background:var(--card-2);border-color:var(--hair)}
html[data-theme=dark] .meter,html[data-theme=dark] .bar{background:#332829}
html[data-theme=dark] .repo,html[data-theme=dark] .blk,html[data-theme=dark] .tp{border-top-color:var(--hair)}
html[data-theme=dark] .seg{border-color:var(--hair)}
html[data-theme=dark] .btn:hover:not(.p):not(.accent){background:var(--well)}
html[data-theme=dark] .course:hover,html[data-theme=dark] .course[aria-pressed=true],html[data-theme=dark] .drop.over{background:var(--teal-soft)}
/* tinted status pills */
html[data-theme=dark] .pill,html[data-theme=dark] .src.ok,html[data-theme=dark] .btn.on,html[data-theme=dark] .pill.ok{background:#153540;color:#A3C7D2;border-color:#153540}
html[data-theme=dark] .pill.soon,html[data-theme=dark] .src.warn,html[data-theme=dark] .pill.Partial,html[data-theme=dark] .pill.warn{background:#4E2600;color:#E5B385}
html[data-theme=dark] .pill.hot,html[data-theme=dark] .pill.Poor,html[data-theme=dark] .pill.bad,html[data-theme=dark] .pill.crit{background:#552900;color:#DCC8AD}
html[data-theme=dark] .pill.Strong,html[data-theme=dark] .pill.good,html[data-theme=dark] .pill.Good{background:#14333D;color:#9EC4D1}
html[data-theme=dark] .pill.line,html[data-theme=dark] .pill.coral{background:transparent;color:var(--ink-2)}
html[data-theme=dark] .toast,html[data-theme=dark] #msg{background:#E4EBE9;color:#120F0F}
html[data-theme=dark] .card:hover{box-shadow:0 8px 22px rgba(0,0,0,.45);border-color:var(--line-2)}
html[data-theme=dark] img:not([src$=".svg"]){filter:brightness(.92)}

/* briefs.html keeps its own variable names; make it follow the toggle */
html[data-theme=dark] body{--ac:#9AC2D0}
html[data-theme=light]{color-scheme:light}
html[data-theme=light]:has(#tools){--bg:#F6F9F8;--card:#fff;--line:#E4ECEA;--tx:#0E232A;--mut:#44859B}
html[data-theme=light] .why{background:rgba(135,183,199,.08)}

/* Tailwind-page colour channels (tailwind config maps every colour to rgb(var(--c-name) / alpha)) */
:root{--c-tertiary-fixed:228 235 233;--c-primary-fixed:228 235 233;--c-surface-container-low:247 250 249;--c-on-tertiary-container:26 64 77;--c-on-tertiary-fixed:17 43 51;--c-on-primary-container:26 64 77;--c-on-tertiary-fixed-variant:35 83 99;--c-tertiary:47 103 122;--c-surface-container-high:229 236 234;--c-primary-fixed-dim:195 212 208;--c-on-primary-fixed-variant:26 64 77;--c-on-secondary:255 255 255;--c-inverse-primary:118 172 190;--c-outline:112 131 138;--c-error-container:234 239 238;--c-on-surface-variant:80 74 77;--c-primary-container:228 235 233;--c-surface-bright:247 250 249;--c-inverse-on-surface:240 244 243;--c-secondary-container:232 240 238;--c-on-surface:27 21 22;--c-on-secondary-fixed:107 52 0;--c-outline-variant:200 216 212;--c-on-tertiary:255 255 255;--c-background:240 244 243;--c-tertiary-fixed-dim:195 212 208;--c-on-primary:255 255 255;--c-surface-tint:26 64 77;--c-on-primary-fixed:17 43 51;--c-secondary:224 159 98;--c-surface-variant:213 225 222;--c-surface-container:242 246 245;--c-surface-container-highest:218 228 226;--c-surface:240 244 243;--c-on-error:255 255 255;--c-on-background:27 21 22;--c-inverse-surface:27 21 22;--c-surface-dim:226 234 232;--c-secondary-fixed:232 240 238;--c-surface-container-lowest:240 244 243;--c-on-secondary-fixed-variant:166 83 6;--c-primary:26 64 77;--c-secondary-fixed-dim:217 213 196;--c-on-error-container:139 68 1;--c-tertiary-container:228 235 233;--c-on-secondary-container:166 83 6;--c-error:206 108 17;}
html[data-theme=dark]{--c-tertiary-fixed:21 53 64;--c-primary-fixed:21 53 64;--c-surface-container-low:25 19 20;--c-on-tertiary-container:163 199 210;--c-on-tertiary-fixed:211 226 225;--c-on-primary-container:163 199 210;--c-on-tertiary-fixed-variant:163 199 210;--c-tertiary:118 172 190;--c-surface-container-high:38 30 31;--c-primary-fixed-dim:67 56 58;--c-on-primary-fixed-variant:163 199 210;--c-on-secondary:68 33 0;--c-inverse-primary:55 115 135;--c-outline:126 143 149;--c-error-container:85 41 0;--c-on-surface-variant:170 189 187;--c-primary-container:21 53 64;--c-surface-bright:34 27 27;--c-inverse-on-surface:27 21 22;--c-secondary-container:50 40 40;--c-on-surface:228 235 233;--c-on-secondary-fixed:222 230 226;--c-outline-variant:57 45 46;--c-on-tertiary:10 25 30;--c-background:18 15 15;--c-tertiary-fixed-dim:67 56 58;--c-on-primary:10 25 30;--c-surface-tint:118 172 190;--c-on-primary-fixed:211 226 225;--c-secondary:228 177 129;--c-surface-variant:51 40 41;--c-surface-container:28 22 22;--c-surface-container-highest:46 37 37;--c-surface:18 15 15;--c-on-error:66 32 0;--c-on-background:228 235 233;--c-inverse-surface:228 235 233;--c-surface-dim:14 11 11;--c-secondary-fixed:50 40 40;--c-surface-container-lowest:18 15 15;--c-on-secondary-fixed-variant:217 213 196;--c-primary:76 143 166;--c-secondary-fixed-dim:130 63 0;--c-on-error-container:220 200 173;--c-tertiary-container:21 53 64;--c-on-secondary-container:217 213 196;--c-error:226 171 120;}

/* ================= TOGGLE BUTTON ================= */
.opai-theme{width:36px;height:36px;border-radius:50%;border:1px solid var(--hair,#D5E1DE);background:var(--well,#E2EAE8);color:var(--ink-2,#504A4D);display:grid;place-items:center;cursor:pointer;padding:0;flex:none;position:relative;overflow:hidden;transition:background .25s,border-color .25s,transform .2s}
.opai-theme:hover{color:var(--ink,#1B1516);transform:rotate(-12deg) scale(1.06)}
.opai-theme svg{position:absolute;width:18px;height:18px;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.opai-theme .sun{transform:rotate(0) scale(1);opacity:1}.opai-theme .moon{transform:rotate(-90deg) scale(.4);opacity:0}
html[data-theme=dark] .opai-theme .sun{transform:rotate(90deg) scale(.4);opacity:0}
html[data-theme=dark] .opai-theme .moon{transform:rotate(0) scale(1);opacity:1}
.opai-theme.float{position:fixed;top:14px;right:14px;z-index:80;box-shadow:0 6px 18px -8px rgba(0,0,0,.35)}
/* smooth colour cross-fade when toggling (class added for ~450ms by opai-ux.js) */
html.opai-swap *,html.opai-swap *::before,html.opai-swap *::after{transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease,fill .4s ease!important}

/* ================= MOTION ================= */
:root{--o-ease:cubic-bezier(.22,.61,.36,1);--o-spring:cubic-bezier(.34,1.56,.64,1)}
/* scroll / load reveal. Hidden only once JS marks the page (.o-js), so no-JS still shows everything */
.o-js .o-rv{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .55s var(--o-ease),transform .6s var(--o-ease);transition-delay:var(--o-d,0ms);will-change:opacity,transform}
.o-js .o-rv.o-in{opacity:1;transform:none}
/* items added later by JS (lists, cards after fetch): quick stagger-in */
@keyframes oPop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.o-new{animation:oPop .45s var(--o-ease) backwards;animation-delay:var(--o-d,0ms)}
/* tab / section switch */
@keyframes oSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.o-swap{animation:oSwap .35s var(--o-ease) both}
/* hover lift on every card-like block */
.card,.panel,.cc,.addbox,.course,.col>*,.task,.kpi,.stat,.proj,.opp,.row.item{transition:transform .25s var(--o-ease),box-shadow .25s var(--o-ease),border-color .25s,background-color .25s}
.card:hover,.course:hover,.cc:hover{transform:translateY(-3px)}
/* buttons: press + soft lift */
button,.btn,.b,.big,.chip,a.b{transition:transform .18s var(--o-ease),background-color .2s,border-color .2s,color .2s,box-shadow .2s}
button:not(:disabled):active,.btn:active,.b:active,.big:active,.chip:active{transform:scale(.96)}
.btn:hover,.b:hover,.big:hover{transform:translateY(-1px)}
/* header pills: sliding feel */
.opai-pills a{transition:background-color .25s,color .25s,box-shadow .25s}
.opai-dock a,.opai-dock button{transition:background-color .2s,color .2s,transform .25s var(--o-spring)}
.opai-dock a:hover,.opai-dock button:hover{transform:translateY(-4px) scale(1.08)}
.opai-dock{animation:oDock .6s var(--o-spring) .25s backwards}
@keyframes oDock{from{opacity:0;transform:translate(-50%,24px)}}
.opai-hd{animation:oDown .5s var(--o-ease) backwards}
@keyframes oDown{from{opacity:0;transform:translateY(-14px)}}
/* progress bars grow in */
.o-js .meter>*,.o-js .bar>i,.o-js .track>*,.o-js .prog>*{transform-origin:0 50%}
@keyframes oGrow{from{transform:scaleX(0)}}
.o-in .meter>*,.o-in .bar>i,.o-in .track>*,.o-in .prog>*,.meter>.o-new,.bar>i.o-new{animation:oGrow .9s var(--o-ease) .15s backwards}
/* dialogs / modals */
dialog[open]{animation:oPop .3s var(--o-ease)}
.modal>div{animation:oPop .3s var(--o-spring)}
#opai-guide.open .gp{animation:oPop .3s var(--o-ease)}
/* page-level scroll progress */
#o-prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9998;background:var(--coral,#E09F62);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
/* soft attention pulse for urgent things */
@keyframes oPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,159,98,.35)}60%{box-shadow:0 0 0 7px rgba(224,159,98,0)}}
.pill.crit,.pill.hot{animation:oPulse 2s ease-out infinite}

@media (prefers-reduced-motion:reduce){
  .o-js .o-rv{opacity:1!important;transform:none!important;transition:none!important}
  .o-new,.o-swap,.opai-dock,.opai-hd,dialog[open],.modal>div,.pill.crit,.pill.hot{animation:none!important}
  .card:hover,.btn:hover,.b:hover,.big:hover{transform:none}
  html.opai-swap *{transition:none!important}
}

/* ================= MOTION v2 (more of everything) ================= */
/* ambient glow behind everything (very low contrast, never blocks clicks) */
#o-amb{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:.55}
/* PERF: static soft glow. The old version animated three 90px-blurred layers forever, which also forced every
   backdrop-filter above it to re-blur on every frame (3-8 fps on many laptops). Gradients cost nothing. */
#o-amb i{position:absolute;border-radius:50%}
#o-amb i:nth-child(1){width:60vw;height:60vw;left:-18vw;top:-20vw;background:radial-gradient(closest-side,rgba(26,64,77,.16),transparent)}
#o-amb i:nth-child(2){width:50vw;height:50vw;right:-14vw;top:16vh;background:radial-gradient(closest-side,rgba(224,159,98,.13),transparent)}
#o-amb i:nth-child(3){width:46vw;height:46vw;left:28vw;bottom:-24vw;background:radial-gradient(closest-side,rgba(26,64,77,.11),transparent)}
html[data-theme=dark] #o-amb i:nth-child(1){background:radial-gradient(closest-side,rgba(55,115,135,.19),transparent)}
html[data-theme=dark] #o-amb i:nth-child(2){background:radial-gradient(closest-side,rgba(228,177,129,.12),transparent)}
html[data-theme=dark] #o-amb i:nth-child(3){background:radial-gradient(closest-side,rgba(55,115,135,.13),transparent)}
html[data-theme=dark] #o-amb{opacity:.9}

/* cursor spotlight on cards */
.o-spot{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(55,115,135,.10),transparent 55%)!important}
html[data-theme=dark] .o-spot{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(139,185,201,.09),transparent 55%)!important}

/* header: sliding hover pill, scroll state, logo wiggle, live dots */
.opai-pills{position:relative}
.o-ind{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--card,#F7FAF9);box-shadow:0 1px 3px rgba(0,0,0,.10);opacity:0;pointer-events:none;transition:transform .35s var(--o-spring),width .35s var(--o-spring),opacity .2s;z-index:0}
.opai-pills a{position:relative;z-index:1}
.opai-pills a[aria-current=page]{z-index:1}
.opai-hd{transition:height .3s var(--o-ease),box-shadow .3s,background-color .3s}
.opai-hd.o-sc{height:56px;box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}
body.opai-pad{transition:padding-top .3s var(--o-ease)}
.opai-mark{display:block;transition:transform .7s var(--o-spring),filter .3s}
.opai-logo:hover .opai-mark{transform:rotate(90deg) scale(1.06);filter:drop-shadow(0 0 8px #5498AF80)}
@keyframes oLive{0%,100%{box-shadow:0 0 0 0 rgba(55,115,135,.55)}70%{box-shadow:0 0 0 7px rgba(55,115,135,0)}}
.opai-timer.on i{animation:oLive 2s ease-out infinite}
.opai-st.off i{animation:none}
.opai-user .av{transition:transform .35s var(--o-spring)}.opai-user:hover .av{transform:rotate(-8deg) scale(1.1)}

/* heading words rise in */
.o-w{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.15;padding-bottom:.08em}
.o-w>span{display:inline-block;transform:translateY(110%);animation:oWord .7s var(--o-ease) forwards;animation-delay:calc(var(--w,0)*55ms + 80ms)}
@keyframes oWord{to{transform:none}}

/* selected tab / chip / pill springs in when it becomes active */
@keyframes oSel{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.tabs [aria-selected=true],.chip[aria-pressed=true],.chip.on,.seg button.on,.dots button.on,.opai-pills a[aria-current=page],nav button.on,.conf button.on{animation:oSel .4s var(--o-spring)}

/* rows, lists, tables */
main li,.wrap li,.blk,.tp,.repo,.task,tbody tr{transition:transform .2s var(--o-ease),background-color .2s}
main li:hover,.wrap li:hover{transform:translateX(3px)}
.blk:hover,.tp:hover,.repo:hover,tbody tr:hover{background-color:rgba(114,133,140,.06)}
/* progress bars: moving sheen */
.o-in .meter>*,.o-in .bar>i,.o-in .track>*,.o-in .prog>*{position:relative;overflow:hidden}
.o-in .meter>*::after,.o-in .bar>i::after,.o-in .track>*::after,.o-in .prog>*::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-100%);animation:oSheen 2.8s ease-in-out 1.1s infinite}
@keyframes oSheen{60%,100%{transform:translateX(100%)}}
/* loading text shimmer + dots */
.o-shim{background:linear-gradient(90deg,var(--ink-3,#70838A) 30%,var(--ink,#1B1516) 50%,var(--ink-3,#70838A) 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:oShim 1.6s linear infinite}
@keyframes oShim{to{background-position:-220% 0}}
/* ripple */
.o-rip-host{position:relative;overflow:hidden}
.o-rip{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);animation:oRip .6s var(--o-ease) forwards;pointer-events:none}
@keyframes oRip{to{transform:scale(1);opacity:0}}
/* toasts + live regions */
.toast,#msg{animation:oToast .4s var(--o-spring)}
@keyframes oToast{from{opacity:0;transform:translate(-50%,16px) scale(.96)}}
dialog::backdrop{animation:oFade .3s ease both}@keyframes oFade{from{opacity:0}}
#opai-guide.open{animation:oFade .25s ease both}
/* "Ask KARNA" floating button: gentle float */
[class*=ask-karna],#karna-fab,.karna-fab{animation:oFloat 4s ease-in-out infinite}
@keyframes oFloat{50%{transform:translateY(-4px)}}
/* focus ring that breathes */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{animation:oFocus 1.6s ease-in-out infinite}
@keyframes oFocus{50%{outline-offset:4px}}
/* inputs: lift on focus */
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px rgba(55,115,135,.15);transition:box-shadow .25s}

@media (prefers-reduced-motion:reduce){
  #o-amb,.o-ind{display:none}
  .o-w>span{animation:none!important;transform:none!important}
  .opai-st i,.opai-timer.on i,.o-in .meter>*::after,.o-in .bar>i::after,.o-shim,[class*=ask-karna],a:focus-visible,button:focus-visible{animation:none!important}
  .tabs [aria-selected=true],.chip[aria-pressed=true],.seg button.on,.opai-pills a[aria-current=page]{animation:none!important}
}

/* ===== MOBILE + TOUCH (shared by every page) ===== */
html{-webkit-text-size-adjust:100%}
a,button,input,select,textarea,summary,[role=button]{touch-action:manipulation}
@media (max-width:760px){
  /* let the last content scroll clear of the floating dock + Ask KARNA button (pages with their own composer excluded) */
  body:not(:has(#ktools)){padding-bottom:calc(148px + env(safe-area-inset-bottom,0px))}
  body #kp-fab{height:44px;padding:0 14px 0 12px;font-size:13px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  /* top nav scrolls sideways: fade the edge so it reads as scrollable */
  .opai-pills{padding-right:22px;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .opai-pills a{scroll-snap-align:center}
}
@media (pointer:coarse){
  .opai-logo,.opai-pills a{min-height:40px;display:inline-flex;align-items:center}
  button,.btn,button.chip,select,summary,[role=button]{min-height:40px}
  .hbtn{min-width:40px;min-height:40px;justify-content:center}
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  /* 16px stops iOS from zooming the page when a field is focused */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px}
}