@font-face{font-family:"Barlow Condensed";src:url("assets/BarlowCondensed-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("assets/BarlowCondensed-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}

:root{
  color-scheme:dark;
  --color-void:#05080a;--color-ground:#080d11;--color-raised:#0d151a;--color-ink:#f4f8f8;--color-ink-soft:#b6c5c8;--color-ink-dim:#83969b;
  --color-cyan:#8ceaf2;--color-cyan-peak:#d7fcff;--color-cyan-deep:#2b7580;--color-amber:#e9ae55;--color-amber-soft:#ffe0a5;--color-mint:#98e7bf;--color-coral:#ff8f7e;
  --color-line:rgba(203,236,240,.18);--color-line-strong:rgba(208,244,247,.42);--color-surface:rgba(10,17,22,.78);--color-surface-strong:rgba(9,18,23,.94);
  --void:var(--color-void);--ground:var(--color-ground);--raised:var(--color-raised);--ink:var(--color-ink);--soft:var(--color-ink-soft);--dim:var(--color-ink-dim);
  --cyan:var(--color-cyan);--cyan-strong:var(--color-cyan-peak);--cyan-deep:var(--color-cyan-deep);--amber:var(--color-amber);--amber-soft:var(--color-amber-soft);
  --mint:var(--color-mint);--coral:var(--color-coral);--line:var(--color-line);--line-strong:var(--color-line-strong);--surface:var(--color-surface);--surface-strong:var(--color-surface-strong);
  --space-hairline:2px;--space-micro:4px;--space-tight:8px;--space-compact:10px;--space-control:12px;--space-standard:18px;--space-section:22px;--space-page:24px;--space-wide:48px;
  --radius-xs:5px;--radius-sm:8px;--radius-control:9px;--radius-medium:10px;--radius-group:11px;
  --motion-instant:80ms;--motion-control:180ms;--motion-spatial:320ms;--motion-materialize:520ms;--motion-maximum:700ms;
  --target-compact:40px;--target-preferred:44px;--measure-readable:72ch;
  --depth-home:0;--depth-tab-resting:40;--depth-tab-active:60;--depth-confirmation:90;--depth-system:120;
  --shadow-orb:0 18px 28px rgba(0,0,0,.38);--shadow-tab:0 35px 80px rgba(0,0,0,.54),18px 18px 70px rgba(0,0,0,.25);--shadow-command:0 18px 34px rgba(0,0,0,.34);
  --ease:cubic-bezier(.16,1,.3,1);
  --display:"Barlow Condensed","Avenir Next Condensed",sans-serif;--ui:"Avenir Next","Segoe UI",sans-serif;
}

/* `hidden` is a promise the browser only half keeps: any explicit `display` on the
   element wins, so a flex or grid container marked hidden stays on screen. That has
   now cost this project three separate bugs — the practice intake drawing on top of
   a live question, and the shutdown form refusing to leave after saving — each one
   found by looking at the screen rather than by reading the code. Enforcing it here
   ends the class of bug instead of patching the next instance of it.

   .view-scene is the deliberate exception: inactive project views keep their box and
   hide with visibility, so they can animate back in and so their layout is already
   settled when they return. */
[hidden]:not(.view-scene){display:none!important}

*{box-sizing:border-box}
html{min-width:320px;min-height:100%;background:var(--void)}
body{margin:0;min-height:100vh;overflow:hidden;background:var(--ground);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.45;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button{color:inherit}button,[role=button]{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--cyan-strong);outline-offset:4px}
::selection{background:var(--cyan-strong);color:var(--ground)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:10px;background:var(--cyan-deep);background-clip:padding-box}
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.skip-link{position:fixed;z-index:1000;top:12px;left:12px;transform:translateY(-150%);padding:9px 13px;background:var(--ink);color:var(--ground);text-decoration:none;border-radius:10px;transition:transform .18s var(--ease)}
.skip-link:focus{transform:none}
.app{position:relative;min-height:100vh;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 42%,rgba(48,101,106,.12),transparent 35%),linear-gradient(180deg,rgba(7,11,14,.86),rgba(4,7,9,.97))}
.ambient-room{position:absolute;z-index:-4;inset:0;background:url("assets/ambient-room.webp") center/cover no-repeat;opacity:.25;filter:saturate(.66) brightness(.62) blur(1.5px);transform:scale(1.025)}
.app::before{content:"";position:absolute;z-index:-3;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(7,13,16,.48) 0 34%,rgba(4,7,9,.76) 75%),linear-gradient(90deg,rgba(12,15,14,.18),transparent 25% 75%,rgba(12,15,14,.18))}
.app::after{content:"";position:absolute;z-index:60;inset:0;pointer-events:none;box-shadow:inset 0 0 130px rgba(0,0,0,.65)}
.atmosphere{position:absolute;z-index:-1;inset:70px 0 120px;overflow:hidden;pointer-events:none}
.atmosphere i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--cyan);opacity:.17;animation:float-particle 9s ease-in-out infinite}
.atmosphere i:nth-child(1){left:19%;top:30%}.atmosphere i:nth-child(2){left:35%;top:61%;animation-delay:-4s}.atmosphere i:nth-child(3){left:63%;top:24%;animation-delay:-7s}.atmosphere i:nth-child(4){left:78%;top:58%;animation-delay:-2s}.atmosphere i:nth-child(5){left:52%;top:76%;animation-delay:-5s}
@keyframes float-particle{50%{transform:translate3d(9px,-16px,0);opacity:.45}}

.topbar{position:relative;z-index:70;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px;padding:0 clamp(18px,2.8vw,44px);border-bottom:1px solid rgba(203,236,240,.11);background:linear-gradient(180deg,rgba(4,8,10,.83),rgba(4,8,10,.25));backdrop-filter:blur(10px)}
.brand,.system-status{display:flex;align-items:center}.brand{gap:12px}.brand strong{font-family:var(--display);font-size:1.55rem;font-weight:400;letter-spacing:.16em}.brand-wave{width:34px;height:20px;background:linear-gradient(90deg,transparent 0 4%,var(--cyan) 5% 8%,transparent 9% 17%,var(--cyan) 18% 21%,transparent 22% 30%,var(--cyan) 31% 34%,transparent 35% 43%,var(--cyan) 44% 47%,transparent 48% 56%,var(--cyan) 57% 60%,transparent 61%);clip-path:polygon(0 46%,10% 46%,10% 36%,20% 36%,20% 65%,30% 65%,30% 19%,40% 19%,40% 82%,50% 82%,50% 30%,60% 30%,60% 68%,70% 68%,70% 42%,80% 42%,80% 56%,90% 56%,90% 48%,100% 48%,100% 52%,0 52%);opacity:.8}.synthetic{padding:4px 7px;border:1px solid rgba(233,174,85,.3);border-radius:5px;background:transparent;color:var(--amber);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.view-switcher{position:relative;display:flex;align-self:stretch;align-items:center;gap:2px}.view-switcher::before{content:"";position:absolute;left:-58px;right:-58px;bottom:9px;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.view-button,.add-view{position:relative;height:44px;border:0;background:transparent;color:var(--dim);cursor:pointer;transition:color .18s var(--ease),background .18s var(--ease)}
.view-button{padding:0 22px}.view-button:hover{color:var(--ink)}.view-button.is-active{color:var(--ink)}.view-button.is-active::after{content:"";position:absolute;left:22px;right:22px;bottom:2px;height:1px;background:var(--amber);box-shadow:0 2px 10px rgba(233,174,85,.5)}
.add-view{display:grid;width:40px;place-items:center}.add-view svg{width:19px}.add-view:hover{color:var(--cyan)}
.system-status{justify-content:flex-end;gap:18px;color:var(--dim);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;font-variant-numeric:tabular-nums}.system-status span{display:flex;align-items:center;gap:7px}.online-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 2px 9px rgba(152,231,191,.55)}

.main-stage{position:relative;height:calc(100vh - 72px);min-height:620px;padding-bottom:184px;perspective:1500px;overflow:hidden}
.view-scene{position:absolute;inset:0 0 184px;overflow:hidden;transition:opacity .38s var(--ease),transform .55s var(--ease),filter .55s var(--ease)}
.view-scene[hidden]{display:block;visibility:hidden;opacity:0;transform:scale(.975) translateZ(-80px);filter:blur(10px);pointer-events:none}.view-scene.is-active{visibility:visible;opacity:1;transform:none;filter:none}
.home-scene{padding:14px clamp(24px,4vw,64px) 0}.signal-map{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--cyan);opacity:.72}.signal-map path{fill:none;stroke:rgba(192,241,246,.35);stroke-width:1}.signal-map circle{fill:var(--cyan-strong);stroke:none;filter:drop-shadow(0 0 7px var(--cyan))}.travel-pulse{opacity:0}
.home-layout{position:relative;display:grid;grid-template-columns:minmax(275px,1fr) minmax(250px,.82fr) minmax(310px,1.04fr);grid-template-rows:1fr .72fr;gap:8px clamp(38px,5vw,82px);max-width:1370px;height:100%;margin:auto;padding:28px 0 18px}
.home-zone{position:relative;min-width:0;padding:17px 4px;color:var(--soft)}.home-zone::before,.home-zone::after{content:"";position:absolute;pointer-events:none}.home-zone::before{inset:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);clip-path:polygon(7% 0,100% 0,100% 100%,0 100%,0 10%)}.home-zone::after{top:0;left:0;width:58px;height:1px;background:var(--amber);box-shadow:0 1px 10px rgba(233,174,85,.35)}
.now-zone{grid-column:1;grid-row:1 / 3;align-self:center;padding-right:26px}.homework-zone{grid-column:3;grid-row:1}.radar-zone{grid-column:3;grid-row:2;align-self:start}.zone-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}.zone-heading h1,.zone-heading h2{margin:0;color:var(--amber-soft);font-family:var(--display);font-size:1rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase}.zone-heading>span{color:var(--dim);font-size:.7rem}.text-action{border:0;background:transparent;color:var(--dim);font-size:.73rem;cursor:pointer}.text-action:hover{color:var(--cyan-strong);text-decoration:underline;text-underline-offset:4px}
.current-class{display:grid;width:100%;padding:7px 0 12px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}.current-class>span{color:var(--ink);font-family:var(--display);font-size:clamp(2rem,3vw,3rem);line-height:1}.current-class strong{margin-top:8px;color:var(--ink);font-size:1.35rem;font-weight:400;font-variant-numeric:tabular-nums}.current-class small{font-size:.7rem;font-weight:400}.current-class em{margin-top:2px;color:var(--cyan);font-style:normal}.current-class:hover>span{color:var(--cyan-strong)}
.countdown-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;margin:16px 0}.countdown-row>div:first-child{display:grid}.countdown-row span{color:var(--dim);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}.countdown-row strong{color:var(--mint);font-family:var(--display);font-size:2.45rem;font-weight:400;font-variant-numeric:tabular-nums}.countdown-track{position:relative;height:46px;border-right:1px solid var(--line-strong);border-radius:50%}.countdown-track::before,.countdown-track i{content:"";position:absolute;inset:4px;border:1px dashed rgba(152,231,191,.55);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(45deg)}.countdown-track i{inset:13px;border-style:solid;opacity:.45}.bring-line{display:flex;align-items:center;gap:9px;margin:0 0 12px;color:var(--soft);font-size:.78rem}.bring-line svg{width:18px;color:var(--mint)}
.mini-planner{display:grid;gap:0;margin:0;padding:0;list-style:none}.mini-planner li{display:grid;grid-template-columns:46px 1fr auto;gap:8px;padding:7px 0;border-top:1px solid rgba(203,236,240,.08);font-size:.73rem}.mini-planner time{color:var(--dim);font-variant-numeric:tabular-nums}.mini-planner span{color:var(--ink)}.mini-planner em{color:var(--dim);font-style:normal}
.jarvis-presence{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;align-items:center;align-self:center;justify-content:center;min-width:0;text-align:center}.greeting{margin:0 0 13px;padding:0;border:0;background:transparent;color:var(--ink);font-family:var(--display);font-size:clamp(1.45rem,2.2vw,2.25rem);letter-spacing:.08em;cursor:pointer}.orb{position:relative;display:grid;width:clamp(150px,16vw,230px);aspect-ratio:1;place-items:center;padding:0;border:0;border-radius:50%;background:radial-gradient(circle,rgba(148,238,245,.09),rgba(17,42,48,.08) 50%,transparent 71%);cursor:pointer;filter:drop-shadow(0 18px 28px rgba(0,0,0,.38));transition:transform .3s var(--ease),filter .3s var(--ease)}.orb:hover{transform:scale(1.035);filter:drop-shadow(0 20px 34px rgba(0,0,0,.4)) drop-shadow(0 0 14px rgba(140,234,242,.18))}.orb:active{transform:scale(.975)}.orb canvas{position:absolute;inset:0;width:100%;height:100%}.orb-ring{position:absolute;border:1px solid rgba(215,252,255,.35);border-radius:50%}.orb-ring-one{inset:13%;box-shadow:inset 0 0 26px rgba(140,234,242,.08),0 0 16px rgba(140,234,242,.08)}.orb-ring-two{inset:23%;border-color:rgba(215,252,255,.12)}.orb-status{position:absolute;bottom:-2px;color:var(--cyan);font-size:.67rem;letter-spacing:.12em;text-transform:uppercase}.jarvis-thought{max-width:29ch;margin:17px 0 0;padding:0;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--soft);font:inherit;font-size:.82rem;line-height:1.45;cursor:pointer}.jarvis-thought:hover{border-bottom-color:var(--line-strong);color:var(--cyan-strong)}
.task-list{display:grid}.task-list button{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:11px;padding:10px 2px;border:0;border-bottom:1px solid rgba(203,236,240,.1);background:transparent;text-align:left;cursor:pointer}.task-list button:hover strong{color:var(--cyan-strong)}.task-list button>span{display:grid;min-width:0}.task-list strong{overflow:hidden;color:var(--ink);font-weight:500;text-overflow:ellipsis;white-space:nowrap}.task-list small{overflow:hidden;color:var(--dim);font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}.task-list em{color:var(--amber);font-size:.68rem;font-style:normal}.subject-icon{display:grid;width:31px;height:31px;place-items:center;border:1px solid var(--line-strong);border-radius:9px;color:var(--cyan);font-style:normal}.algebra-icon{font-family:var(--display);font-size:1rem}.biology-icon::before{content:"";width:13px;height:18px;border:1px solid var(--mint);border-radius:80% 10% 80% 10%;transform:rotate(35deg)}.essay-icon::before{content:"";width:13px;height:17px;border:1px solid var(--soft);border-radius:2px;box-shadow:inset 0 -5px 0 rgba(255,255,255,.05)}
.alert-line{display:grid;grid-template-columns:55px 1fr auto;align-items:center;gap:10px;width:100%;padding:9px 2px;border:0;border-bottom:1px solid rgba(203,236,240,.09);background:transparent;text-align:left;cursor:pointer}.alert-line:hover strong{color:var(--cyan-strong)}.alert-kind{font-size:.62rem;letter-spacing:.04em;text-transform:uppercase}.alert-kind.change{color:var(--amber)}.alert-kind.message{color:var(--cyan)}.alert-kind.clear{color:var(--mint)}.alert-line strong{overflow:hidden;color:var(--ink);font-size:.77rem;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.alert-line time{color:var(--dim);font-size:.65rem}

.robotics-scene,.essay-scene,.custom-scene{padding:20px clamp(24px,4vw,64px)}.project-heading{position:absolute;z-index:4;top:20px;left:50%;display:flex;align-items:baseline;gap:14px;transform:translateX(-50%);white-space:nowrap}.project-heading span{color:var(--dim);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.project-heading strong{font-family:var(--display);font-size:1.5rem;font-weight:400}.project-heading em{color:var(--mint);font-size:.65rem;font-style:normal}.robot-workbench{display:grid;grid-template-columns:minmax(210px,.72fr) minmax(430px,1.8fr) minmax(210px,.72fr);align-items:center;gap:clamp(20px,3vw,48px);height:100%;max-width:1440px;margin:auto;padding-top:28px}.project-sheet{position:relative;z-index:2;max-height:490px;padding:18px;background:linear-gradient(160deg,rgba(15,24,29,.86),rgba(7,13,17,.64));box-shadow:0 28px 58px rgba(0,0,0,.32);clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}.project-sheet::before{content:"";position:absolute;inset:0;border:1px solid var(--line-strong);clip-path:inherit;pointer-events:none}.project-sheet h2{margin:0 0 13px;color:var(--amber-soft);font-family:var(--display);font-size:1rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase}.project-sheet button{display:grid;width:100%;padding:10px 3px;border:0;border-top:1px solid rgba(203,236,240,.1);background:transparent;text-align:left;cursor:pointer}.project-sheet button:hover span{color:var(--cyan-strong)}.project-sheet button span{color:var(--ink);font-size:.78rem}.project-sheet button em{color:var(--dim);font-size:.66rem;font-style:normal}.project-sheet .pass{color:var(--mint)}.project-sheet .warn{color:var(--amber)}
.model-stage{position:relative;height:min(61vh,560px);min-height:410px;perspective:950px;touch-action:none}.rover{position:absolute;top:48%;left:50%;width:360px;height:240px;transform:translate(-50%,-50%) rotateX(-12deg) rotateY(-20deg);transform-style:preserve-3d;cursor:grab;transition:transform .55s var(--ease)}.rover:active{cursor:grabbing}.rover-part{position:absolute;border:1px solid rgba(215,252,255,.74);background:rgba(53,113,121,.09);box-shadow:inset 0 0 22px rgba(140,234,242,.08),0 16px 32px rgba(0,0,0,.3);transform-style:preserve-3d;transition:transform .7s var(--ease),opacity .45s var(--ease),filter .45s var(--ease)}.chassis{top:77px;left:61px;width:238px;height:112px;transform:translateZ(24px) rotateX(64deg);clip-path:polygon(8% 0,92% 0,100% 20%,100% 80%,92% 100%,8% 100%,0 80%,0 20%)}.chassis i{position:absolute;top:18px;width:1px;height:75px;background:rgba(140,234,242,.28)}.chassis i:nth-child(1){left:25%}.chassis i:nth-child(2){left:50%}.chassis i:nth-child(3){left:75%}.board{top:74px;left:125px;width:110px;height:72px;transform:translateZ(76px) rotateX(64deg);background:repeating-linear-gradient(90deg,rgba(152,231,191,.08) 0 2px,transparent 2px 11px),rgba(35,88,78,.18)}.battery{top:50px;left:142px;width:82px;height:42px;transform:translateZ(116px) rotateX(64deg);border-color:rgba(233,174,85,.65);background:rgba(145,96,30,.12)}.sensor{top:58px;left:168px;width:26px;height:56px;transform:translateZ(146px);border-radius:5px}.wheel{width:66px;height:66px;border-radius:50%;background:radial-gradient(circle,transparent 22%,rgba(140,234,242,.18) 23% 28%,transparent 29% 45%,rgba(140,234,242,.1) 46% 60%,transparent 61%);box-shadow:inset 0 0 16px rgba(140,234,242,.16),0 12px 28px rgba(0,0,0,.34)}.wheel::before{content:"";position:absolute;inset:9px;border:1px dashed rgba(215,252,255,.54);border-radius:50%}.wheel-fl{top:61px;left:30px;transform:translateZ(58px) rotateY(70deg)}.wheel-fr{top:61px;right:30px;transform:translateZ(58px) rotateY(70deg)}.wheel-bl{top:151px;left:30px;transform:translateZ(58px) rotateY(70deg)}.wheel-br{top:151px;right:30px;transform:translateZ(58px) rotateY(70deg)}
.rover.is-exploded .battery{transform:translate3d(0,-70px,180px) rotateX(64deg)}.rover.is-exploded .board{transform:translate3d(0,-28px,122px) rotateX(64deg)}.rover.is-exploded .sensor{transform:translate3d(0,-48px,198px)}.rover.is-exploded .wheel-fl{transform:translate3d(-65px,-24px,72px) rotateY(70deg)}.rover.is-exploded .wheel-fr{transform:translate3d(65px,-24px,72px) rotateY(70deg)}.rover.is-exploded .wheel-bl{transform:translate3d(-65px,34px,72px) rotateY(70deg)}.rover.is-exploded .wheel-br{transform:translate3d(65px,34px,72px) rotateY(70deg)}
.model-axis{position:absolute;left:50%;bottom:17%;width:180px;height:62px;transform:translateX(-50%);border:1px solid rgba(233,174,85,.18);border-radius:50%;box-shadow:0 0 20px rgba(233,174,85,.08)}.model-axis::after{content:"";position:absolute;left:50%;bottom:50%;width:1px;height:270px;background:linear-gradient(transparent,var(--amber),transparent)}.model-label{position:absolute;z-index:3;padding:7px 9px;border:1px solid var(--line-strong);background:rgba(7,14,18,.82);color:var(--dim);font-size:.65rem;line-height:1.2;text-transform:uppercase}.model-label strong{color:var(--cyan);font-weight:400}.label-clearance{left:5%;top:28%}.label-battery{right:4%;top:25%}.label-conflict{right:1%;bottom:25%;border-color:rgba(255,143,126,.45)}.label-conflict strong{color:var(--coral)}.model-tools{position:absolute;bottom:4%;left:50%;z-index:5;display:flex;gap:3px;transform:translateX(-50%);padding:3px;border:1px solid var(--line);border-radius:11px;background:rgba(6,12,15,.8);backdrop-filter:blur(12px)}.model-tools button{padding:8px 11px;border:0;border-radius:8px;background:transparent;color:var(--soft);font-size:.7rem;cursor:pointer}.model-tools button:hover,.model-tools button.is-active{background:rgba(140,234,242,.1);color:var(--cyan-strong)}.drag-hint{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);color:var(--dim);font-size:.63rem;white-space:nowrap}
.blank-project{display:flex;height:100%;max-width:620px;margin:auto;flex-direction:column;align-items:center;justify-content:center;text-align:center}.blank-orb{display:grid;width:92px;aspect-ratio:1;place-items:center;border:1px solid rgba(215,252,255,.38);border-radius:50%;box-shadow:inset 0 0 30px rgba(140,234,242,.07),0 14px 34px rgba(0,0,0,.3)}.blank-orb span{width:42px;height:1px;background:var(--cyan);box-shadow:0 0 9px rgba(140,234,242,.65)}.blank-project h1{margin:22px 0 8px;font-family:var(--display);font-size:3rem;font-weight:400}.blank-project p{max-width:52ch;margin:0;color:var(--soft)}.blank-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}.blank-actions button{padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:rgba(10,18,22,.6);color:var(--soft);cursor:pointer}.blank-actions button:hover{border-color:var(--line-strong);color:var(--cyan-strong)}

.spatial-layer{position:absolute;z-index:35;inset:0 0 184px;pointer-events:none;perspective:1500px;contain:layout style}.summon-connection{position:absolute;z-index:0;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.summon-connection path{fill:none}.spatial-tab{position:absolute;display:flex;min-width:300px;min-height:220px;max-width:min(760px,calc(100vw - 40px));max-height:calc(100vh - 260px);flex-direction:column;overflow:hidden;resize:both;pointer-events:auto;color:var(--soft)}.spatial-tab.is-pinned::after{content:"Pinned";position:absolute;z-index:4;right:14px;bottom:10px;color:var(--mint);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase}
.tab-head{position:sticky;z-index:12;top:0;display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 10px 8px 16px;border-bottom:1px solid var(--line);background:rgba(9,19,24,.9);backdrop-filter:blur(14px);cursor:grab;user-select:none}.tab-head:active{cursor:grabbing}.tab-title{display:grid;min-width:0;margin-right:auto}.tab-title strong{overflow:hidden;color:var(--ink);font-family:var(--display);font-size:1.02rem;font-weight:400;letter-spacing:.06em;text-overflow:ellipsis;white-space:nowrap}.tab-title span{color:var(--dim);font-size:.61rem;letter-spacing:.06em;text-transform:uppercase}.tab-tools{display:flex;gap:2px;opacity:.18;transition:opacity .18s}.spatial-tab:hover .tab-tools,.spatial-tab.is-focused .tab-tools{opacity:1}.tab-tools button{display:grid;width:31px;height:31px;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:var(--soft);cursor:pointer}.tab-tools button:hover{background:rgba(140,234,242,.08);color:var(--cyan-strong)}.tab-tools button[aria-pressed=true]{color:var(--mint)}.tab-tools svg{width:16px}.tab-body{position:relative;flex:1;padding:18px}.tab-lead{margin:0 0 14px;color:var(--ink);font-size:1.02rem}.tab-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 16px;padding:0;list-style:none}.tab-meta li{display:grid}.tab-meta span{color:var(--dim);font-size:.61rem;letter-spacing:.07em;text-transform:uppercase}.tab-meta strong{color:var(--ink);font-weight:500}.tab-list{display:grid;margin:0;padding:0;list-style:none}.tab-list li{display:grid;grid-template-columns:1fr auto;gap:12px;padding:9px 0;border-top:1px solid rgba(203,236,240,.1)}.tab-list strong{color:var(--ink);font-size:.78rem;font-weight:500}.tab-list span{color:var(--dim);font-size:.68rem}.tab-list em{align-self:center;color:var(--amber);font-size:.68rem;font-style:normal}.tab-action{display:inline-flex;margin-top:16px;padding:9px 13px;border:1px solid rgba(140,234,242,.38);border-radius:9px;background:rgba(140,234,242,.07);color:var(--cyan-strong);cursor:pointer}.tab-action:hover{background:rgba(140,234,242,.13)}
.biology-object{display:grid;grid-template-columns:minmax(130px,.8fr) 1fr;align-items:center;gap:22px}.cell-model{position:relative;width:min(100%,230px);aspect-ratio:1;margin:auto;border:1px solid rgba(140,234,242,.5);border-radius:50%;background:radial-gradient(circle at 54% 47%,rgba(116,75,170,.46) 0 15%,transparent 16%),radial-gradient(circle at 48% 50%,rgba(140,234,242,.11),rgba(31,72,80,.18) 52%,transparent 53%);box-shadow:inset 0 0 34px rgba(140,234,242,.17),0 18px 38px rgba(0,0,0,.32);animation:cell-breathe 5s ease-in-out infinite}.cell-model::before,.cell-model::after{content:"";position:absolute;border:1px solid rgba(152,231,191,.45);border-radius:50%}.cell-model::before{inset:29% 33%;transform:rotate(23deg)}.cell-model::after{inset:42% 12%;border-style:dashed;transform:rotate(-38deg)}@keyframes cell-breathe{50%{transform:scale(1.025);box-shadow:inset 0 0 42px rgba(140,234,242,.23),0 20px 42px rgba(0,0,0,.36)}}
.confidence{font-family:var(--display);font-size:2.5rem;color:var(--cyan-strong);font-variant-numeric:tabular-nums}.focus-callout{margin-top:12px;padding:10px 0;border-top:1px solid var(--line)}.focus-callout span{color:var(--dim);font-size:.63rem;text-transform:uppercase}.focus-callout strong{display:block;color:var(--ink);font-family:var(--display);font-size:1.5rem;font-weight:400}.essay-grid{display:grid;grid-template-columns:minmax(160px,.7fr) 1fr;gap:18px}.rubric-meter{display:grid;place-items:center;min-height:160px;border:1px solid var(--line);background:radial-gradient(circle,rgba(140,234,242,.12),transparent 60%)}.rubric-meter strong{font-family:var(--display);font-size:3rem;font-weight:400;color:var(--cyan-strong)}.rubric-meter span{color:var(--dim);font-size:.66rem}.draft-text{max-height:260px;overflow:auto;color:var(--soft);font-family:var(--ui);line-height:1.7}.draft-text mark{background:rgba(233,174,85,.18);color:var(--amber-soft)}

.command-deck{position:fixed;z-index:80;right:0;bottom:88px;left:0;display:grid;grid-template-columns:1fr minmax(360px,700px) 1fr;align-items:center;gap:18px;height:86px;padding:0 clamp(18px,3vw,48px);border-top:1px solid rgba(203,236,240,.08);background:linear-gradient(180deg,rgba(5,9,11,.18),rgba(5,9,11,.91));backdrop-filter:blur(12px)}.reset-home{justify-self:start;display:flex;align-items:center;gap:8px;padding:8px 9px;border:0;background:transparent;color:var(--dim);font-size:.7rem;cursor:pointer}.reset-home:hover{color:var(--cyan-strong)}.reset-home svg{width:17px}.command-field{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:54px;border:1px solid var(--line-strong);background:rgba(8,16,20,.84);box-shadow:0 18px 34px rgba(0,0,0,.34);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%);transition:border-color .18s,box-shadow .18s}.command-field:focus-within{border-color:rgba(140,234,242,.7);box-shadow:0 20px 38px rgba(0,0,0,.38),0 0 22px rgba(140,234,242,.08)}.command-field input{min-width:0;border:0;outline:0;background:transparent;color:var(--ink);caret-color:var(--cyan)}.command-field input::placeholder{color:#899ba0}.mic-button,.send-button{display:grid;width:38px;height:38px;place-items:center;border:0;background:transparent;color:var(--soft);cursor:pointer}.mic-button:hover,.send-button:hover{color:var(--cyan-strong)}.mic-button svg,.send-button svg{width:20px}.command-state{justify-self:end;margin:0;color:var(--dim);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase}.app[data-state=listening] .mic-button{color:var(--cyan-strong);animation:listening-pulse 1.2s ease-in-out infinite}.app[data-state=thinking] .command-state{color:var(--amber)}@keyframes listening-pulse{50%{filter:drop-shadow(0 0 7px var(--cyan));transform:scale(1.08)}}
.class-rail{position:fixed;z-index:85;right:0;bottom:0;left:0;height:88px;padding:0 clamp(18px,3vw,48px) max(4px,env(safe-area-inset-bottom));background:rgba(4,8,10,.93);backdrop-filter:blur(18px);border-top:1px solid var(--line-strong)}.rail-track{display:grid;grid-template-columns:repeat(6,1fr);max-width:1500px;height:100%;margin:auto}.rail-class{position:relative;display:grid;grid-template-columns:auto 1fr;align-content:center;column-gap:10px;padding:11px clamp(9px,1.4vw,20px);border:0;border-right:1px solid rgba(203,236,240,.1);background:transparent;text-align:left;cursor:pointer}.rail-class:hover{background:rgba(140,234,242,.035)}.rail-class.is-current{background:linear-gradient(180deg,rgba(140,234,242,.07),transparent)}.rail-class.is-current::after{content:"";position:absolute;right:16px;bottom:0;left:16px;height:2px;background:var(--cyan);box-shadow:0 0 12px rgba(140,234,242,.5)}.rail-class>span{grid-row:1 / 3;align-self:center;color:var(--dim);font-family:var(--display);font-size:1.15rem}.rail-class strong{color:var(--ink);font-size:.83rem;font-weight:500}.rail-class em{color:var(--dim);font-size:.65rem;font-style:normal}.rail-class.is-current>span{color:var(--cyan)}
.toast{position:fixed;z-index:120;right:24px;bottom:194px;max-width:340px;padding:11px 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-strong);color:var(--soft);box-shadow:0 18px 38px rgba(0,0,0,.4);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}.toast.is-visible{opacity:1;transform:none}

@media(max-width:1080px){.topbar{grid-template-columns:auto 1fr auto}.brand .synthetic{display:none}.view-switcher{justify-self:center}.view-button{padding:0 12px}.home-layout{grid-template-columns:minmax(240px,1fr) 220px minmax(270px,1fr);gap:12px 28px}.signal-map{opacity:.48}.robot-workbench{grid-template-columns:200px 1fr}.parts-sheet{display:none}.project-heading{top:10px}.command-deck{grid-template-columns:auto 1fr auto}.command-state{display:none}}
@media(max-width:820px){html{overflow-x:hidden}body{overflow-y:auto;overflow-x:hidden}.app{min-height:100dvh;overflow:visible}.topbar{position:sticky;top:0;height:auto;min-height:64px;padding:8px 16px;grid-template-columns:auto 1fr}.system-status{display:none}.view-switcher{grid-column:1 / -1;grid-row:2;width:100%;height:42px;overflow-x:auto;justify-content:flex-start}.view-button{flex:0 0 auto}.main-stage{height:auto;min-height:calc(100dvh - 106px);padding-bottom:176px;overflow:visible;perspective:none}.view-scene{position:relative;inset:auto;min-height:calc(100dvh - 282px);overflow:visible}.view-scene[hidden]{display:none}.home-scene{padding:14px 18px}.signal-map{display:none}.home-layout{display:flex;height:auto;min-height:0;flex-direction:column;padding:0}.jarvis-presence{order:-1;min-height:250px}.orb{width:155px}.now-zone,.homework-zone,.radar-zone{width:100%;align-self:auto}.mini-planner{display:none}/* On a phone a panel is the screen, not a window on it. Full-bleed to the command deck: any margin left a strip of the home view showing through underneath, which read as text bleeding into the panel rather than as depth. */.spatial-layer{position:fixed;z-index:95;inset:106px 0 154px;pointer-events:none}.spatial-tab{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;max-width:none;min-width:0;max-height:none;border-radius:0;resize:none;transform:none!important}.robotics-scene{padding:12px 16px}.robot-workbench{display:block;padding-top:44px}.project-sheet{display:none}.model-stage{height:520px;min-height:0}.rover{transform:translate(-50%,-50%) scale(.8) rotateX(-12deg) rotateY(-20deg)}.command-deck{position:fixed;bottom:78px;grid-template-columns:1fr;height:76px;padding:8px 14px}.reset-home{position:absolute;top:-34px;left:12px}.command-field{grid-column:1}.class-rail{height:78px;padding:0}.rail-track{display:flex;overflow-x:auto}.rail-class{flex:0 0 112px;padding:9px 13px}.toast{right:12px;bottom:166px;left:12px;max-width:none}}
@media(max-width:520px){.brand strong{font-size:1.35rem}.brand-wave{width:26px}.view-button{font-size:.77rem}.home-scene{padding-inline:14px}.home-zone{padding-block:14px}.task-list button{grid-template-columns:32px 1fr}.task-list button>em{display:none}.alert-line{grid-template-columns:52px 1fr}.alert-line time{display:none}.biology-object,.essay-grid{grid-template-columns:1fr}.cell-model{width:155px}.tab-body{padding:15px}.model-stage{height:430px}.rover{transform:translate(-50%,-50%) scale(.66) rotateX(-12deg) rotateY(-20deg)}.model-label{display:none}.model-tools{bottom:7%}.model-tools button{padding:8px}.command-field input{font-size:16px}.command-field input::placeholder{color:transparent}.reset-home span{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.atmosphere{display:none}.spatial-tab{animation:none}.cell-model{animation:none}}

/* Responsive interaction invariants: JS rotations preserve this independent model scale. */
.rover{--model-scale:1}
@media(max-width:1080px){.brand .synthetic{display:inline-block;padding:3px 5px;font-size:.55rem}}
@media(max-width:820px){.rover{--model-scale:.8}}
@media(max-width:520px){.brand{gap:8px}.brand-wave{width:22px}.brand .synthetic{font-size:.5rem}.rover{--model-scale:.66}}

.system-status button{display:flex;align-items:center;gap:7px;padding:7px 8px;border:0;border-radius:8px;background:transparent;color:var(--dim);font:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}.system-status button:hover{background:rgba(140,234,242,.06);color:var(--cyan-strong)}
.app[data-connection="browser"] .online-dot{background:var(--amber);box-shadow:0 2px 9px rgba(233,174,85,.45)}.app[data-connection="locked"] .online-dot{background:var(--coral);box-shadow:0 2px 9px rgba(255,143,126,.45)}
.data-actions{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}.file-action{position:relative;cursor:pointer}.file-action input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.data-editor-label{display:block;margin-bottom:7px;color:var(--amber-soft);font-family:var(--display);font-size:.84rem;letter-spacing:.08em;text-transform:uppercase}.data-editor{display:block;width:100%;min-height:250px;resize:vertical;padding:12px;border:1px solid var(--line);border-radius:8px;outline:0;background:rgba(3,8,10,.72);color:var(--soft);font-family:ui-monospace,"SFMono-Regular",monospace;font-size:.75rem;line-height:1.55;caret-color:var(--cyan);tab-size:2}.data-editor:focus{border-color:rgba(140,234,242,.62);box-shadow:0 10px 28px rgba(0,0,0,.28)}.data-editor-help{margin:8px 0 0;color:var(--dim);font-size:.68rem}.data-save{margin-top:12px}.data-save:disabled{cursor:wait;opacity:.55}.data-error{min-height:1.4em;margin:9px 0 0;color:var(--coral);font-size:.76rem;overflow-wrap:anywhere}.empty-home-line,.rail-empty{margin:0;padding:13px 2px;color:var(--dim);font-size:.74rem}.rail-empty{align-self:center;padding-inline:20px}
@media(max-width:520px){.data-actions{display:grid;grid-template-columns:1fr 1fr}.data-actions .tab-action{justify-content:center;margin:0}.data-editor{min-height:220px;font-size:.7rem}}
.synthetic{font:inherit;white-space:nowrap;cursor:pointer}.synthetic:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* Live intelligence tools */
.mission-intro{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;padding:2px 0 18px;border-bottom:1px solid var(--line)}.mission-intro>div:first-child>span,.focus-plan>span{color:var(--amber-soft);font-family:var(--display);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}.mission-intro strong{display:block;margin:5px 0 2px;color:var(--ink);font-family:var(--display);font-size:1.8rem;font-weight:400;line-height:1.05}.mission-intro p{max-width:58ch;margin:0;color:var(--dim);font-size:.72rem}.mission-load{display:grid;text-align:right}.mission-load strong{color:var(--cyan-strong);font-family:var(--display);font-size:2.35rem;line-height:.9}.mission-load span{color:var(--dim);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase}.mission-stream{display:grid}.mission-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;min-height:61px;border-bottom:1px solid rgba(203,236,240,.1);transition:opacity .2s,background .2s}.mission-row:hover{background:rgba(140,234,242,.025)}.mission-check{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:11px;min-width:0;cursor:pointer}.mission-check input{width:16px;height:16px;margin:0;accent-color:var(--cyan)}.mission-check input:disabled{opacity:.35;cursor:not-allowed}.mission-check span{display:grid;min-width:0}.mission-check strong{overflow:hidden;color:var(--ink);font-size:.78rem;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.mission-check small{color:var(--dim);font-size:.66rem}.mission-row>em{color:var(--amber);font-size:.66rem;font-style:normal}.mission-row-actions{display:flex;gap:5px}.mission-row-actions button{padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--soft);font-size:.66rem;cursor:pointer}.mission-row-actions button:hover{border-color:var(--line-strong);color:var(--cyan-strong)}.mission-row.is-done{opacity:.46}.mission-row.is-done .mission-check strong{text-decoration:line-through;text-decoration-color:var(--dim)}.mission-actions,.class-actions,.focus-controls{display:flex;flex-wrap:wrap;gap:8px}.mission-actions .tab-action,.class-actions .tab-action,.focus-controls .tab-action{margin-top:14px}

.grade-lab{display:grid;gap:18px}.lab-field{display:grid;gap:7px;color:var(--dim);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase}.lab-field span{display:flex;justify-content:space-between;gap:12px}.lab-field output{color:var(--cyan);font-variant-numeric:tabular-nums}.lab-field select,.lab-field input[type=number],.lab-field input[type=text],.project-row input{width:100%;height:40px;padding:0 11px;border:1px solid var(--line);border-radius:8px;outline:0;background:rgba(3,8,10,.62);color:var(--ink);font:inherit;text-transform:none}.lab-field select:focus,.lab-field input:focus,.project-row input:focus{border-color:var(--cyan);box-shadow:0 10px 25px rgba(0,0,0,.24)}.lab-field input[type=range]{width:100%;accent-color:var(--cyan)}.grade-readout{display:grid;grid-template-columns:1fr minmax(70px,1.4fr) 1fr;align-items:center;gap:18px;padding:16px 0}.grade-readout>div{display:grid}.grade-readout>div:last-child{text-align:right}.grade-readout span{color:var(--dim);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase}.grade-readout strong{color:var(--ink);font-family:var(--display);font-size:2.65rem;font-weight:400;font-variant-numeric:tabular-nums}.grade-readout>div:last-child strong{color:var(--cyan-strong)}.grade-readout i{position:relative;height:1px;background:linear-gradient(90deg,var(--line),var(--cyan),var(--line))}.grade-readout i::after{content:"";position:absolute;top:-3px;left:calc(50% - 3px);width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 2px 10px rgba(140,234,242,.55)}.lab-controls{display:grid;grid-template-columns:1.4fr .7fr .7fr;gap:14px}.target-answer{padding:15px 0 2px;border-top:1px solid var(--line)}.target-answer span{color:var(--dim);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase}.target-answer strong{display:block;margin:3px 0;color:var(--amber-soft);font-family:var(--display);font-size:2rem;font-weight:400}.target-answer p{margin:0;color:var(--soft);font-size:.75rem;line-height:1.5}

.focus-session{display:grid;grid-template-columns:180px 1fr;gap:22px;align-items:start}.focus-clock{--focus-progress:0;position:relative;display:grid;width:170px;aspect-ratio:1;place-content:center;text-align:center;border-radius:50%;background:radial-gradient(circle at center,rgba(5,11,14,.98) 57%,transparent 58%),conic-gradient(var(--cyan) calc(var(--focus-progress)*1turn),rgba(140,234,242,.1) 0);box-shadow:0 18px 40px rgba(0,0,0,.34)}.focus-clock::after{content:"";position:absolute;inset:9px;border:1px solid var(--line);border-radius:50%}.focus-clock span,.focus-clock em{position:relative;z-index:1;color:var(--dim);font-size:.59rem;font-style:normal;letter-spacing:.07em;text-transform:uppercase}.focus-clock strong{position:relative;z-index:1;color:var(--cyan-strong);font-family:var(--display);font-size:2.7rem;font-weight:400;font-variant-numeric:tabular-nums}.focus-plan ol{display:grid;margin:10px 0 0;padding:0;list-style:none}.focus-plan li{border-top:1px solid rgba(203,236,240,.1)}.focus-plan label{display:grid;grid-template-columns:18px 1fr;align-items:center;gap:10px;padding:10px 0;cursor:pointer}.focus-plan input{width:15px;height:15px;margin:0;accent-color:var(--cyan)}.focus-plan label span{display:grid}.focus-plan strong{color:var(--ink);font-size:.76rem;font-weight:500}.focus-plan small{color:var(--dim);font-size:.64rem}.focus-plan li.is-done{opacity:.42}.focus-plan li.is-done strong{text-decoration:line-through}.focus-controls{grid-column:1 / -1;border-top:1px solid var(--line)}

.project-builder{display:grid;gap:16px}.project-create{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;padding:14px 0 18px;border-bottom:1px solid var(--line)}.project-create .tab-action{height:40px;margin:0}.project-list{display:grid}.project-row{display:grid;grid-template-columns:minmax(150px,1fr) auto auto auto;gap:7px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(203,236,240,.1)}.project-row button{height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--soft);cursor:pointer}.project-row button:hover{border-color:var(--line-strong);color:var(--cyan-strong)}.project-row .danger-action:hover{border-color:rgba(255,143,126,.45);color:var(--coral)}

@media(max-width:620px){.mission-intro{grid-template-columns:1fr}.mission-load{display:none}.mission-row{grid-template-columns:minmax(0,1fr) auto}.mission-row>em{display:none}.mission-row-actions{grid-column:2;grid-row:1;flex-direction:column}.lab-controls{grid-template-columns:1fr 1fr}.lab-controls .lab-field:first-child{grid-column:1 / -1}.focus-session{grid-template-columns:1fr}.focus-clock{width:145px;margin:auto}.project-create{grid-template-columns:1fr}.project-row{grid-template-columns:1fr auto auto}.project-row .danger-action{grid-column:2 / 4}.grade-readout strong{font-size:2.1rem}}

.greeting{border:0;background:transparent;cursor:pointer}.greeting:hover{color:var(--cyan-strong)}.jarvis-thought{display:flex;min-height:44px;max-width:32ch;margin-top:12px;padding:7px 5px;align-items:center;justify-content:center;border-bottom-color:var(--line);font-size:.78rem;line-height:1.4}.jarvis-thought:hover{border-bottom-color:var(--cyan)}
.model-assumption{margin:0;padding-top:11px;border-top:1px dashed rgba(203,236,240,.16);color:var(--dim);font-size:.66rem;line-height:1.5}
.project-row .danger-action:hover,.project-row.is-confirming .danger-action{border-color:rgba(255,143,126,.55);color:var(--coral)}.project-row.is-confirming{background:rgba(255,143,126,.035)}.project-undo{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(152,231,191,.3);color:var(--mint);font-size:.72rem}.project-undo button{height:36px;padding:0 11px;border:1px solid rgba(152,231,191,.42);border-radius:8px;background:rgba(152,231,191,.06);color:var(--mint);cursor:pointer}
@media(max-width:820px){.view-switcher{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.view-switcher::-webkit-scrollbar{display:none}.toast{top:114px;right:12px;bottom:auto;left:auto;max-width:min(270px,calc(100vw - 24px))}}

/* Crisp spatial light-fields: dimensional effects live outside the readable plane. */
.summon-connection{opacity:.74;shape-rendering:geometricPrecision;transition:opacity .32s var(--ease)}
.summon-connection[data-depth="1"]{opacity:.18}.summon-connection[data-depth="2"]{opacity:1}
.summon-connection path{vector-effect:non-scaling-stroke}
.summon-connection .signal-underlay{stroke:rgba(4,8,10,.8);stroke-width:5;stroke-dasharray:none;filter:none}
.summon-connection .signal-core{stroke:rgba(215,252,255,.54);stroke-width:1;stroke-dasharray:none;filter:drop-shadow(0 2px 5px rgba(140,234,242,.26))}
.summon-connection .signal-packet{stroke:var(--cyan-strong);stroke-width:2;stroke-dasharray:2 26;stroke-linecap:round;filter:drop-shadow(0 2px 6px rgba(140,234,242,.52));animation:signal-packet-travel 1.8s linear infinite}
.summon-connection .signal-origin{fill:rgba(140,234,242,.28);stroke:rgba(215,252,255,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.summon-connection .signal-anchor{fill:#071116;stroke:var(--cyan-strong);stroke-width:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 2px 5px rgba(140,234,242,.45))}
@keyframes signal-packet-travel{to{stroke-dashoffset:-112}}

.spatial-tab{
  --shell-shift:8px;--shell-opacity:.72;--shell-parallax-x:0px;--shell-parallax-y:0px;
  padding:5px 10px 11px 5px;
  overflow:hidden;
  background:transparent;
  box-shadow:none;
  clip-path:none;
  filter:none;
  transform:none;
  animation:none;
  transition:opacity .3s var(--ease);
}
.spatial-tab::before,.spatial-tab::after{content:none}
.tab-depth-shell{position:absolute;z-index:0;inset:10px 1px 1px 11px;opacity:var(--shell-opacity);background:#071116;clip-path:polygon(0 11px,11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);transform:translate3d(calc(var(--shell-shift) + var(--shell-parallax-x)),calc(5px + var(--shell-parallax-y)),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-origin:center;backface-visibility:hidden;pointer-events:none;box-shadow:22px 34px 66px rgba(0,0,0,.56),8px 18px 28px rgba(0,0,0,.32);animation:shell-acquire .56s var(--ease);transition:transform .46s var(--ease),opacity .35s var(--ease),box-shadow .35s var(--ease)}
.tab-depth-shell::before{content:"";position:absolute;inset:0;border:1px solid rgba(140,234,242,.31);clip-path:inherit}
.tab-depth-shell::after{content:"";position:absolute;top:15%;right:4px;bottom:15%;width:1px;background:linear-gradient(180deg,transparent,rgba(215,252,255,.34),rgba(233,174,85,.2),transparent)}
.tab-depth-shell i{position:absolute;right:12%;left:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(140,234,242,.32),transparent)}
.tab-depth-shell i:nth-child(1){top:18%}.tab-depth-shell i:nth-child(2){top:51%;opacity:.46}.tab-depth-shell i:nth-child(3){top:82%;opacity:.23}
.tab-content-plane{position:relative;z-index:2;display:flex;min-width:0;height:100%;flex-direction:column;overflow:hidden;color:var(--soft);background:radial-gradient(circle at 93% 5%,rgba(140,234,242,.045),transparent 24%),linear-gradient(155deg,#0c191f,#071014 72%);clip-path:polygon(0 11px,11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);transform:none!important;filter:none!important;isolation:isolate;text-rendering:geometricPrecision;box-shadow:0 26px 54px rgba(0,0,0,.46);animation:plane-resolve .52s var(--ease) both;transition:opacity .28s,box-shadow .35s var(--ease)}
.tab-content-plane::before{content:"";position:absolute;z-index:25;inset:0;border:1px solid rgba(208,244,247,.44);clip-path:inherit;pointer-events:none;transition:border-color .24s}
.spatial-tab.is-focused .tab-content-plane::before{border-color:rgba(215,252,255,.78)}
.spatial-tab.is-focused .tab-depth-shell{box-shadow:26px 38px 74px rgba(0,0,0,.62),10px 22px 42px rgba(8,36,42,.38)}
.spatial-tab.is-receded .tab-content-plane{opacity:.72;box-shadow:0 16px 32px rgba(0,0,0,.36)}
.spatial-tab.is-receded .tab-depth-shell{filter:none}
.spatial-tab.is-forward .tab-depth-shell{box-shadow:34px 46px 86px rgba(0,0,0,.68),12px 28px 48px rgba(6,32,38,.42)}
.spatial-tab.is-parallaxing .tab-depth-shell{will-change:transform}
.spatial-tab.is-docked{resize:none}.spatial-tab.is-docked .tab-depth-shell::after{background:linear-gradient(180deg,transparent,rgba(233,174,85,.46),rgba(140,234,242,.25),transparent)}
.spatial-tab.is-closing{opacity:0;transform:none;filter:none}
.spatial-tab.is-closing .tab-content-plane{clip-path:inset(0 0 0 100%);opacity:0}
.spatial-tab.is-closing .tab-depth-shell{transform:translate3d(-28px,8px,0);opacity:0}
@keyframes plane-resolve{0%{clip-path:inset(0 100% 0 0);opacity:.12;box-shadow:0 8px 20px rgba(0,0,0,.28)}100%{clip-path:polygon(0 11px,11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);opacity:1;box-shadow:0 26px 54px rgba(0,0,0,.46)}}
@keyframes shell-acquire{0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translate3d(calc(var(--shell-shift) + 24px),calc(5px + var(--shell-parallax-y)),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}100%{opacity:var(--shell-opacity);clip-path:polygon(0 11px,11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);transform:translate3d(calc(var(--shell-shift) + var(--shell-parallax-x)),calc(5px + var(--shell-parallax-y)),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}}
.tab-head{flex:0 0 auto;background:#0a171c;backdrop-filter:none}
.tab-body{min-height:0;overflow:auto}
.tab-action.is-quiet{border-color:var(--line);background:transparent;color:var(--soft)}
.tab-action.is-quiet:hover{border-color:var(--line-strong);background:rgba(140,234,242,.035);color:var(--cyan-strong)}

/* Spatial workbench controls */
.snap-guide{position:absolute;z-index:1;display:block;opacity:0;pointer-events:none;transition:opacity .12s}.snap-guide.is-visible{opacity:1}.snap-guide-x{top:10px;bottom:52px;width:1px;background:linear-gradient(transparent,rgba(233,174,85,.72),transparent)}.snap-guide-y{right:10px;left:10px;height:1px;background:linear-gradient(90deg,transparent,rgba(233,174,85,.72),transparent)}
.tab-shelf{position:absolute;z-index:110;right:18px;bottom:8px;left:18px;display:flex;max-width:calc(100% - 36px);gap:7px;padding:6px;border-top:1px solid rgba(208,244,247,.28);pointer-events:auto;overflow-x:auto;scrollbar-width:thin}.tab-shelf[hidden]{display:none}.tab-shelf button{display:flex;min-width:0;max-width:220px;height:34px;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#081318;color:var(--soft);cursor:pointer}.tab-shelf button:hover{border-color:var(--line-strong);color:var(--cyan-strong)}.tab-shelf svg{flex:0 0 15px;width:15px}.tab-shelf span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spatial-tab.is-minimized{display:none!important}

/* Robotics inspection surface */
.model-label{display:none}.part-inspector{position:absolute;z-index:7;top:9%;right:3%;display:grid;width:min(220px,30%);gap:4px;padding:11px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(6,14,18,.82),rgba(6,14,18,.36));pointer-events:none}.part-inspector>span{color:var(--amber-soft);font-family:var(--display);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase}.part-inspector>strong{color:var(--ink);font-family:var(--display);font-size:1.4rem;font-weight:400}.part-inspector>em{color:var(--cyan);font-size:.63rem;font-style:normal}.part-inspector dl{display:grid;margin:5px 0 0}.part-inspector dl div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-top:1px solid rgba(203,236,240,.09)}.part-inspector dt{color:var(--dim);font-size:.61rem}.part-inspector dd{margin:0;color:var(--soft);font-size:.62rem;font-variant-numeric:tabular-nums}.part-inspector p{margin:5px 0 0;color:var(--dim);font-size:.61rem;line-height:1.45}.model-attitude{position:absolute;z-index:6;right:3%;bottom:12%;color:var(--dim);font-size:.61rem;font-variant-numeric:tabular-nums;letter-spacing:.06em;text-transform:uppercase}.rover:focus-visible{outline:2px solid var(--cyan-strong);outline-offset:18px}.rover-part{cursor:pointer}.rover-part.is-selected{filter:drop-shadow(0 0 9px rgba(140,234,242,.75));outline:1px solid rgba(215,252,255,.72);outline-offset:3px}.project-sheet button.is-selected{background:rgba(140,234,242,.08);color:var(--cyan-strong)}
.part-comparison{display:grid;gap:16px}.comparison-columns{display:grid;grid-template-columns:1fr 36px 1fr;align-items:stretch;gap:10px}.comparison-columns>div{display:grid;align-content:start}.comparison-columns>div>span{color:var(--amber-soft);font-family:var(--display);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase}.comparison-columns>div>strong{margin:4px 0 9px;color:var(--ink);font-family:var(--display);font-size:1.45rem;font-weight:400}.comparison-columns>div>p{display:flex;justify-content:space-between;gap:14px;margin:0;padding:7px 0;border-top:1px solid rgba(203,236,240,.1)}.comparison-columns b{color:var(--dim);font-size:.64rem;font-weight:400}.comparison-columns em{color:var(--soft);font-size:.65rem;font-style:normal;text-align:right}.comparison-columns>i{position:relative;width:1px;justify-self:center;background:linear-gradient(transparent,var(--cyan),transparent)}.comparison-columns>i::after{content:"";position:absolute;top:50%;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--cyan)}

/* Class readiness is the first complete acquire → resolve → operate loop. */
.readiness-brief{--prep-progress:0;display:grid;gap:17px}
.readiness-answer{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:26px;padding:0 0 18px;border-bottom:1px solid var(--line)}
.readiness-answer::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:2px;transform:scaleX(var(--prep-progress));transform-origin:left;background:var(--cyan);box-shadow:0 2px 9px rgba(140,234,242,.42);transition:transform .38s var(--ease)}
.readiness-answer>div:first-child>strong{display:block;max-width:29ch;color:var(--ink);font-family:var(--display);font-size:clamp(1.65rem,2.8vw,2.25rem);font-weight:400;line-height:1.04;text-wrap:balance}
.readiness-answer p{max-width:62ch;margin:7px 0 0;color:var(--soft);font-size:.76rem}
.readiness-time{display:grid;min-width:92px;text-align:right}
.readiness-time strong{color:var(--cyan-strong);font-family:var(--display);font-size:3.15rem;font-weight:400;line-height:.78;font-variant-numeric:tabular-nums}
.readiness-time span{margin-top:8px;color:var(--dim);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase}
.evidence-chain{display:grid;grid-template-columns:1fr 32px 1.2fr 32px 1.2fr;align-items:center;gap:7px;padding:12px 0}
.evidence-chain>div{display:grid;min-width:0;gap:2px}
.evidence-chain span{color:var(--dim);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase}
.evidence-chain strong{overflow:hidden;color:var(--ink);font-size:.74rem;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.evidence-chain small{overflow:hidden;color:var(--dim);font-size:.62rem;opacity:.35;text-overflow:ellipsis;white-space:nowrap;transition:opacity .25s}
.readiness-brief.show-sources .evidence-chain small{opacity:1;color:var(--mint)}
.evidence-chain>i{position:relative;height:1px;background:linear-gradient(90deg,var(--line),var(--cyan),var(--line))}
.evidence-chain>i::after{content:"";position:absolute;top:-2px;right:0;width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.readiness-operate{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(190px,.75fr);gap:24px;border-top:1px solid rgba(203,236,240,.1)}
.readiness-sequence{display:grid}
.readiness-sequence>span,.readiness-result>span{padding:13px 0 7px;color:var(--amber-soft);font-family:var(--display);font-size:.76rem;letter-spacing:.07em;text-transform:uppercase}
.readiness-sequence label{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:11px;padding:10px 0;border-top:1px solid rgba(203,236,240,.09);cursor:pointer}
.readiness-sequence input{grid-row:1 / 3;width:16px;height:16px;margin:3px 0 0;accent-color:var(--cyan)}
.readiness-sequence b{color:var(--ink);font-size:.77rem;font-weight:500}
.readiness-sequence small{color:var(--dim);font-size:.64rem}
.readiness-sequence label:has(input:checked){opacity:.52}.readiness-sequence label:has(input:checked) b{text-decoration:line-through;text-decoration-color:var(--dim)}
.readiness-result{position:relative;display:flex;min-width:0;flex-direction:column;padding-left:20px;border-left:1px solid var(--line)}
.readiness-result>strong{color:var(--cyan-strong);font-family:var(--display);font-size:1.55rem;font-weight:400;line-height:1.1}
.readiness-result>p{margin:7px 0 0;color:var(--soft);font-size:.69rem;line-height:1.55}
.readiness-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}.readiness-actions .tab-action{margin-top:12px}
.rail-class.is-signaled{animation:class-acquired 1.2s var(--ease) 2}
@keyframes class-acquired{0%,100%{background:transparent}28%{background:rgba(140,234,242,.13);box-shadow:inset 0 2px 0 rgba(215,252,255,.72)}}

@media(max-width:820px){
  .spatial-tab{padding:0!important;overflow:hidden}
  .tab-depth-shell{display:none}
  .summon-connection{display:none!important}
  .tab-content-plane{clip-path:none;box-shadow:0 24px 54px rgba(0,0,0,.6)}
  .tab-content-plane::before{clip-path:none}
  .tab-tools [data-tool="move"],.tab-tools [data-tool="dock"],.tab-tools [data-tool="depth"],.tab-tools [data-tool="resize"]{display:none}
  .readiness-answer{grid-template-columns:1fr}.readiness-time{display:none}
  .evidence-chain{grid-template-columns:1fr}.evidence-chain>i{width:1px;height:14px;margin-left:6px;background:linear-gradient(var(--line),var(--cyan))}
  .evidence-chain>i::after{right:-2px;bottom:0;top:auto}
  .readiness-operate{grid-template-columns:1fr}.readiness-result{padding:0;border-top:1px solid var(--line);border-left:0}
}
@media(max-width:520px){.readiness-answer>div:first-child>strong{font-size:1.65rem}.readiness-sequence>span,.readiness-result>span{padding-top:10px}.tab-shelf{right:8px;left:8px;max-width:calc(100% - 16px)}.project-heading{right:12px;left:12px;justify-content:center;transform:none;overflow:hidden}.project-heading span{display:none}.project-heading em{overflow:hidden;text-overflow:ellipsis}.part-inspector{top:4%;right:12px;left:12px;width:auto}.part-inspector>strong{font-size:1.15rem}.part-inspector p{display:none}.part-inspector dl{grid-template-columns:repeat(3,1fr);gap:6px}.part-inspector dl div{display:grid;gap:1px}.model-attitude{display:none}.comparison-columns{grid-template-columns:1fr}.comparison-columns>i{width:100%;height:1px}}

/* Student operating core: facts, inference, and action remain visibly separate. */
.student-core,.assignment-workbench{--breakdown-progress:0;display:grid;gap:17px}.core-answer{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}.core-answer>div:first-child>strong{display:block;max-width:30ch;color:var(--ink);font-family:var(--display);font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:400;line-height:1.04;text-wrap:balance}.core-answer p{max-width:65ch;margin:7px 0 0;color:var(--soft);font-size:.75rem;line-height:1.5}.core-signal{display:grid;min-width:92px;text-align:right}.core-signal strong{color:var(--cyan-strong);font-family:var(--display);font-size:3rem;font-weight:400;line-height:.8;font-variant-numeric:tabular-nums}.core-signal span{margin-top:8px;color:var(--dim);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase}.briefing-grid{display:grid;grid-template-columns:1fr 1fr}.briefing-grid>div{display:grid;gap:3px;min-width:0;padding:12px 14px 12px 0;border-bottom:1px solid rgba(203,236,240,.1)}.briefing-grid>div:nth-child(even){padding-left:18px;border-left:1px solid rgba(203,236,240,.1)}.briefing-grid span,.core-reason>span,.recovery-path>div>span,.evidence-ledger>span{color:var(--amber-soft);font-family:var(--display);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase}.briefing-grid strong{overflow:hidden;color:var(--ink);font-size:.78rem;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.briefing-grid small{color:var(--dim);font-size:.63rem}.core-reason,.evidence-ledger{padding-top:12px;border-top:1px solid var(--line)}.core-reason p,.evidence-ledger p{max-width:72ch;margin:5px 0 0;color:var(--dim);font-size:.67rem;line-height:1.55}.core-reason strong,.evidence-ledger strong{color:var(--soft);font-weight:500}.core-actions{display:flex;flex-wrap:wrap;gap:8px}.core-actions .tab-action{margin-top:0}.core-actions .tab-action:disabled{cursor:default;opacity:.58}
.plan-sequence{display:grid}.plan-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:63px;border-bottom:1px solid rgba(203,236,240,.1)}.plan-row label{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:11px;min-width:0;cursor:pointer}.plan-row input{width:16px;height:16px;margin:0;accent-color:var(--cyan)}.plan-row label span{display:grid;min-width:0}.plan-row strong{overflow:hidden;color:var(--ink);font-size:.77rem;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.plan-row small{color:var(--dim);font-size:.64rem}.plan-row button,.recovery-path>button{padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--soft);font-size:.66rem;cursor:pointer}.plan-row button:hover,.recovery-path>button:hover{border-color:var(--line-strong);color:var(--cyan-strong)}.plan-row.is-done{opacity:.45}.plan-row.is-done strong{text-decoration:line-through}.plan-buffer{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:11px 0;border-bottom:1px solid var(--line)}.plan-buffer span{color:var(--ink);font-size:.76rem}.plan-buffer strong{color:var(--mint);font-size:.72rem;font-weight:500}.plan-buffer p{grid-column:1 / -1;margin:0;color:var(--dim);font-size:.64rem}
.recovery-path{display:grid;gap:12px}.recovery-path>div{display:grid;gap:3px}.recovery-path>div>strong{color:var(--ink);font-family:var(--display);font-size:1.45rem;font-weight:400}.recovery-path>div>small{color:var(--dim);font-size:.65rem}.recovery-path ol{display:grid;margin:0;padding:0;list-style:none;counter-reset:recovery}.recovery-path li{position:relative;display:grid;gap:2px;padding:10px 0 10px 34px;border-top:1px solid rgba(203,236,240,.1);counter-increment:recovery}.recovery-path li::before{content:counter(recovery);position:absolute;top:10px;left:2px;color:var(--cyan);font-family:var(--display);font-size:1.1rem}.recovery-path li strong{color:var(--ink);font-size:.76rem;font-weight:500}.recovery-path li span{color:var(--dim);font-size:.65rem;line-height:1.45}.recovery-path>button{justify-self:start}
.assignment-workbench .core-answer::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:2px;transform:scaleX(var(--breakdown-progress));transform-origin:left;background:var(--cyan);box-shadow:0 2px 9px rgba(140,234,242,.42);transition:transform .38s var(--ease)}.assignment-sequence{display:grid}.assignment-sequence label{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid rgba(203,236,240,.1);cursor:pointer}.assignment-sequence input{width:16px;height:16px;margin:0;accent-color:var(--cyan)}.assignment-sequence label span{display:grid}.assignment-sequence strong{color:var(--ink);font-size:.78rem;font-weight:500}.assignment-sequence small{color:var(--dim);font-size:.64rem}.assignment-sequence label:has(input:checked){opacity:.48}.assignment-sequence label:has(input:checked) strong{text-decoration:line-through}.assignment-status{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px}.assignment-status>div:first-child{display:grid;gap:3px}.assignment-status>div:first-child>span{color:var(--amber-soft);font-family:var(--display);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase}.assignment-status>div:first-child>strong{color:var(--cyan-strong);font-family:var(--display);font-size:1.45rem;font-weight:400}.assignment-status>div:first-child>p{margin:0;color:var(--dim);font-size:.66rem}.assignment-status .core-actions{justify-content:flex-end}
@media(max-width:620px){.core-answer{grid-template-columns:1fr}.core-signal{display:none}.briefing-grid{grid-template-columns:1fr}.briefing-grid>div:nth-child(even){padding-left:0;border-left:0}.plan-row{grid-template-columns:minmax(0,1fr) auto}.assignment-status{grid-template-columns:1fr}.assignment-status .core-actions{justify-content:flex-start}.core-answer>div:first-child>strong{font-size:1.72rem}}
@media(prefers-reduced-motion:reduce){.summon-connection .signal-packet,.tab-content-plane,.tab-depth-shell,.rail-class.is-signaled{animation:none}.tab-depth-shell{transition:none}}
@media(max-width:820px){.synthetic{min-height:32px}.text-action,.greeting,.reset-home{min-height:var(--target-compact)}.command-field button{width:42px;height:42px}.task-list button,.alert-line,.project-sheet button{min-height:var(--target-preferred)}.tab-tools button{width:var(--target-compact);height:var(--target-compact)}.model-tools button{min-height:var(--target-compact)}}

/* Layer 2 — trustworthy first-run setup and canonical school-data controls. */
.onboarding-shell{position:fixed;z-index:500;inset:0;display:grid;place-items:center;padding:24px;background:rgba(3,7,9,.96)}
.onboarding-shell[hidden]{display:none}.onboarding-panel{display:flex;width:min(880px,100%);max-height:min(760px,calc(100dvh - 48px));min-height:560px;flex-direction:column;overflow:hidden;background:linear-gradient(150deg,#0b171c,#060d10 72%);box-shadow:0 38px 90px rgba(0,0,0,.66)}
.onboarding-head{display:flex;min-height:66px;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line)}.onboarding-identity{display:flex;align-items:center;gap:12px}.onboarding-identity strong{font-family:var(--display);font-size:1.35rem;font-weight:400;letter-spacing:.16em}.onboarding-demo,.onboarding-back,.onboarding-add-class{min-height:40px;border:0;background:transparent;color:var(--soft);cursor:pointer}.onboarding-demo:hover,.onboarding-back:hover,.onboarding-add-class:hover{color:var(--cyan-strong);text-decoration:underline;text-underline-offset:4px}
.onboarding-progress{display:grid;height:2px;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 30px;background:transparent}.onboarding-progress i{background:rgba(203,236,240,.12);transition:background var(--motion-control) var(--ease)}.onboarding-progress i.is-active{background:var(--cyan)}
.onboarding-step{flex:1;min-height:0;padding:46px 54px 28px;overflow:auto}.onboarding-step h1{max-width:20ch;margin:0 0 10px;color:var(--ink);font-family:var(--display);font-size:clamp(2.1rem,5vw,3.6rem);font-weight:400;line-height:.96;text-wrap:balance}.onboarding-step>p{max-width:65ch;margin:0 0 30px;color:var(--soft);line-height:1.6}.onboarding-fields{display:grid;gap:20px 24px}.onboarding-fields.two-column{grid-template-columns:1fr 1fr}.onboarding-fields label,.onboarding-class-row label,.capture-field{display:grid;gap:7px;min-width:0}.onboarding-fields label>span:first-child,.onboarding-class-row label>span,.capture-field>span{color:var(--amber-soft);font-family:var(--display);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}.onboarding-fields input,.onboarding-fields select,.onboarding-class-row input,.capture-field input,.capture-field select,.capture-field textarea{width:100%;min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-sm);outline:0;background:#071014;color:var(--ink)}.onboarding-fields input:focus,.onboarding-fields select:focus,.onboarding-class-row input:focus,.capture-field input:focus,.capture-field select:focus,.capture-field textarea:focus{border-color:var(--cyan);box-shadow:0 12px 28px rgba(0,0,0,.26)}.field-with-unit{display:grid!important;grid-template-columns:1fr auto;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);background:#071014}.field-with-unit input{border:0;background:transparent;box-shadow:none!important}.field-with-unit em{padding-right:12px;color:var(--dim);font-size:.72rem;font-style:normal}.onboarding-note{margin:24px 0 0!important;padding-top:15px;border-top:1px solid var(--line);color:var(--dim)!important;font-size:.72rem}
.onboarding-classes{display:grid}.onboarding-class-row{display:grid;grid-template-columns:minmax(150px,1.4fr) minmax(110px,.65fr) minmax(120px,.8fr) minmax(140px,1fr) auto;align-items:end;gap:10px;margin:0;padding:12px 0;border:0;border-top:1px solid var(--line)}.onboarding-class-row legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.onboarding-class-row button{height:44px;padding:0 10px;border:0;background:transparent;color:var(--dim);cursor:pointer}.onboarding-class-row button:hover{color:var(--coral)}.onboarding-add-class{justify-self:start;margin-top:10px;color:var(--cyan)}
.onboarding-footer{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:18px;min-height:78px;padding:12px 30px;border-top:1px solid var(--line);background:#071014}.onboarding-back{justify-self:start}.onboarding-error{margin:0;color:var(--coral);font-size:.74rem;text-align:right}.onboarding-next{min-width:130px;min-height:44px;padding:0 18px;border:1px solid rgba(140,234,242,.46);border-radius:var(--radius-control);background:rgba(140,234,242,.08);color:var(--cyan-strong);cursor:pointer}.onboarding-next:hover{background:rgba(140,234,242,.14)}.onboarding-next:disabled{cursor:wait;opacity:.55}

.data-foundation{display:grid;gap:18px}.data-foundation-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.data-foundation-summary>div{display:grid;gap:2px;padding:12px;background:#071014}.data-foundation-summary span,.source-row span,.conflict-row span{color:var(--dim);font-size:.61rem;letter-spacing:.06em;text-transform:uppercase}.data-foundation-summary strong{color:var(--ink);font-family:var(--display);font-size:1.35rem;font-weight:400}.data-primary-actions{display:flex;flex-wrap:wrap;gap:8px}.data-primary-actions .tab-action{margin-top:0}.source-health,.conflict-list{display:grid}.source-row,.conflict-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:10px 0;border-top:1px solid rgba(203,236,240,.1)}.source-row strong,.conflict-row strong{color:var(--ink);font-size:.75rem;font-weight:500}.source-row em,.conflict-row em{grid-column:2;grid-row:1 / 3;align-self:center;color:var(--mint);font-size:.68rem;font-style:normal}.source-row em.is-stale,.conflict-row em{color:var(--amber)}.source-row small,.conflict-row small{color:var(--dim);font-size:.64rem}.data-advanced{border-top:1px solid var(--line)}.data-advanced summary{min-height:44px;padding:12px 0;color:var(--soft);cursor:pointer}.data-advanced[open] summary{color:var(--cyan-strong)}

.capture-workbench{display:grid;gap:18px}.capture-intake{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px}.capture-field textarea{height:112px;padding:11px 12px;resize:vertical;line-height:1.5}.capture-intake .tab-action{min-height:44px;margin:0}.capture-evidence{display:grid;gap:4px;padding:11px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--dim);font-size:.68rem}.capture-evidence strong{color:var(--soft);font-weight:500}.capture-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.capture-grid .capture-wide{grid-column:1 / -1}.capture-attachment{display:flex;align-items:center;gap:12px;min-height:44px}.capture-attachment small{color:var(--dim)}.capture-ambiguities{margin:0;padding:0;list-style:none}.capture-ambiguities li{padding:7px 0;border-top:1px solid rgba(203,236,240,.1);color:var(--amber);font-size:.7rem}.capture-result{min-height:1.5em;margin:0;color:var(--mint);font-size:.72rem}.capture-result.is-error{color:var(--coral)}

.section-kicker{display:block;padding:2px 0 7px;color:var(--amber-soft);font-family:var(--display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}.capture-confirm{display:flex;align-items:center;gap:10px;color:var(--soft);font-size:.7rem;cursor:pointer}.capture-confirm input{width:17px;height:17px;accent-color:var(--cyan)}.preferences-form{display:grid;gap:18px}.preferences-form .capture-grid{padding-bottom:5px}.check-field>label{display:flex;align-items:center;gap:8px;min-height:22px;color:var(--soft);font-size:.7rem}.check-field input{width:16px;height:16px;accent-color:var(--cyan)}.class-context{display:flex;justify-content:space-between;gap:12px;margin:0;padding:9px 0;border-block:1px solid rgba(203,236,240,.1);color:var(--dim);font-size:.65rem}.class-context strong{color:var(--soft);font-weight:500}.is-onboarding{overflow:hidden}
.alert-ledger small{display:block;margin-top:4px;color:var(--dim);font-size:.63rem;line-height:1.45}

@media(max-width:720px){.onboarding-shell{padding:0}.onboarding-panel{width:100%;max-height:none;min-height:100dvh}.onboarding-head{padding-inline:18px}.onboarding-progress{margin-inline:18px}.onboarding-step{padding:30px 18px 24px}.onboarding-fields.two-column{grid-template-columns:1fr}.onboarding-class-row{grid-template-columns:1fr 1fr}.onboarding-class-row label:first-of-type{grid-column:1 / -1}.onboarding-class-row button{justify-self:start}.onboarding-footer{grid-template-columns:auto 1fr;padding-inline:18px}.onboarding-error{grid-column:1 / -1;grid-row:1;text-align:left}.onboarding-back{grid-row:2}.onboarding-next{grid-row:2;grid-column:2;justify-self:end}.data-foundation-summary{grid-template-columns:1fr}.capture-intake,.capture-grid{grid-template-columns:1fr}.capture-grid .capture-wide{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.onboarding-progress i{transition:none}}

/* Layer 3 — the calm Home cockpit and the centered-to-companion work transition. */
.home-layout{grid-template-columns:minmax(270px,.92fr) minmax(240px,.78fr) minmax(360px,1.3fr);grid-template-rows:1fr .76fr;gap:14px clamp(30px,4.6vw,72px);padding-block:22px 16px}
.now-zone{grid-column:1;grid-row:1;align-self:end;padding-right:20px}.radar-zone{grid-column:1;grid-row:2;align-self:start;padding-right:20px}.homework-zone{grid-column:3;grid-row:1 / 3;align-self:center;min-height:410px;padding-left:12px}.jarvis-presence{position:relative;z-index:62;grid-column:2;grid-row:1 / 3;will-change:transform}.home-zone::before{border-bottom-color:rgba(203,236,240,.1)}
.home-mode{position:static;display:flex;align-items:center;gap:7px;margin-bottom:14px}.home-mode label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.home-mode select{min-height:34px;padding:0 26px 0 9px;border:1px solid rgba(203,236,240,.14);border-radius:8px;background:#071014;color:var(--dim);font-size:.63rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}.home-mode select:hover,.home-mode select:focus{border-color:var(--line-strong);color:var(--soft)}
.mini-planner{display:none}.countdown-track{height:1px;border:0;border-radius:0;background:linear-gradient(90deg,rgba(152,231,191,.7),rgba(152,231,191,.08))}.countdown-track::before{display:none}.countdown-track i{top:-3px;right:auto;bottom:auto;left:18%;width:7px;height:7px;border:0;border-radius:50%;background:var(--mint);box-shadow:0 0 10px rgba(152,231,191,.48);transform:none}
.companion-label{display:none;color:var(--cyan-strong);font-family:var(--display);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}.home-task-toggle{display:flex;gap:2px;padding:2px;border:1px solid rgba(203,236,240,.14);border-radius:9px;background:rgba(4,9,12,.45)}.home-task-toggle button{min-height:32px;padding:0 9px;border:0;border-radius:6px;background:transparent;color:var(--dim);font-size:.65rem;cursor:pointer}.home-task-toggle button.is-active{background:rgba(140,234,242,.1);color:var(--cyan-strong)}.home-task-toggle button:focus-visible{outline-offset:2px}.home-lane-summary,.radar-summary{margin:-5px 0 5px;color:var(--dim);font-size:.64rem}.task-list button{min-height:68px}.task-list small{white-space:normal;line-height:1.35}.subject-icon.is-priority{border-color:rgba(233,174,85,.55);color:var(--amber-soft);box-shadow:inset 0 0 12px rgba(233,174,85,.06)}.alert-line{grid-template-columns:57px minmax(0,1fr);row-gap:1px}.alert-line time{grid-column:2;color:var(--dim);font-size:.58rem}.alert-line strong{align-self:end}
.summon-connection{opacity:0!important;visibility:hidden;transition:opacity .42s var(--ease),visibility 0s linear .42s}.summon-connection.is-active{opacity:.86!important;visibility:visible;transition:opacity .14s ease-out,visibility 0s}.summon-connection.is-active .signal-packet{animation:signal-packet-travel .72s linear infinite}
.app.is-work-session .jarvis-presence{position:fixed;z-index:98;right:18px;bottom:188px;width:96px;min-height:96px;grid-column:auto;grid-row:auto;padding:4px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.62))}.app.is-work-session .jarvis-presence .home-mode,.app.is-work-session .jarvis-presence .greeting{display:none}.app.is-work-session .jarvis-presence .orb{width:64px}.app.is-work-session .jarvis-presence .orb-status{bottom:-6px;font-size:.5rem}.app.is-work-session .jarvis-presence .jarvis-thought{display:none}.app.is-work-session .companion-label{display:block;margin-top:9px;font-size:.5rem;white-space:nowrap}.app.is-work-session .orb:hover{transform:scale(1.04)}
.class-rail{height:92px}.rail-track{position:relative;display:flex;max-width:1500px;overflow-x:auto;scrollbar-width:none}.rail-track::-webkit-scrollbar{display:none}.rail-track::before{content:"";position:absolute;top:18px;right:0;left:0;height:1px;background:rgba(203,236,240,.16)}.rail-class{flex:1 0 150px;grid-template-columns:16px minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;column-gap:8px;min-width:0;padding:22px 15px 8px}.rail-class>i{position:relative;z-index:1;grid-row:1 / 3;align-self:start;width:7px;height:7px;margin:1px 0 0 4px;border:1px solid var(--dim);border-radius:50%;background:#060b0e}.rail-class>span{grid-row:2;align-self:end;color:var(--dim);font-size:.68rem;letter-spacing:.07em}.rail-class strong{overflow:hidden;align-self:end;color:var(--soft);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.rail-class time{align-self:end;color:var(--ink);font-size:.72rem;font-variant-numeric:tabular-nums}.rail-class em{grid-column:2 / 4;overflow:hidden;color:var(--dim);font-size:.58rem;text-overflow:ellipsis;white-space:nowrap}.rail-class.is-current{background:linear-gradient(180deg,rgba(140,234,242,.08),transparent)}.rail-class.is-current>i{border-color:var(--cyan-strong);background:var(--cyan);box-shadow:0 0 12px rgba(140,234,242,.55)}.rail-class.is-current strong,.rail-class.is-current>span{color:var(--cyan-strong)}.rail-class.is-past{opacity:.46}.rail-class.is-upcoming>i{border-color:rgba(215,252,255,.38)}
@media(max-width:1080px){.home-layout{grid-template-columns:minmax(230px,.95fr) 190px minmax(300px,1.25fr);gap:12px 25px}.homework-zone{padding-left:0}.app.is-work-session .jarvis-presence{right:16px}}
@media(max-width:820px){.home-layout{display:flex}.jarvis-presence{position:relative;order:-1;min-height:175px}.jarvis-presence .orb{width:126px}.jarvis-presence .greeting{margin-bottom:5px;font-size:1.45rem}.jarvis-presence .jarvis-thought{display:none}.now-zone{order:1}.homework-zone{order:2;min-height:0}.radar-zone{order:3}.app.is-work-session .jarvis-presence{position:fixed;right:10px;bottom:166px;width:82px;min-height:82px;padding:4px}.app.is-work-session .jarvis-presence .orb{width:54px}.app.is-work-session .companion-label{margin-top:7px;font-size:.45rem}.reset-home{display:none}.app.is-work-session .reset-home{display:flex}.class-rail{height:78px}.rail-class{flex:0 0 140px;padding:19px 11px 6px}.rail-track::before{top:15px}}
@media(max-width:520px){.home-task-toggle button{padding-inline:7px}.homework-zone{padding-left:0}.task-list button{min-height:62px}.app.is-work-session .jarvis-presence{bottom:160px}.radar-summary{margin-bottom:2px}.alert-line{grid-template-columns:54px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.summon-connection{display:none!important}.jarvis-presence{will-change:auto}}

/* Layer 3 finish: keep the schedule readable and reserve a clear JARVIS companion zone. */
.rail-class.is-past{opacity:1}
.rail-class.is-past strong,.rail-class.is-past>span,.rail-class.is-past em{color:var(--dim)}
.rail-class.is-past time{color:var(--soft)}
.rail-class.is-past>i{border-color:rgba(182,197,200,.56);background:rgba(182,197,200,.12)}
.reset-home{display:flex;visibility:hidden;opacity:0;pointer-events:none}
.app.is-work-session .reset-home{display:flex;visibility:visible;opacity:1;pointer-events:auto}
.app.is-work-session .toast{right:140px}
.tab-tools button{width:var(--target-compact);height:var(--target-compact)}
@media(min-width:821px){.spatial-tab{min-width:min(460px,calc(100vw - 40px))}}
@media(max-width:820px){.reset-home{display:none;visibility:hidden;opacity:0;pointer-events:none}.app.is-work-session .reset-home{display:flex;visibility:visible;opacity:1;pointer-events:auto}.app.is-work-session .toast{top:114px;right:12px;bottom:auto}.spatial-tab{min-width:0}}

/* Layer 4 — intelligence receipts, mode state, memory boundaries, and voice control. */
.command-state{display:grid;min-width:136px;min-height:40px;justify-items:end;align-content:center;gap:1px;margin:0;padding:4px 0;border:0;background:transparent;color:var(--dim);cursor:pointer}.command-state span{font-size:.56rem;letter-spacing:.11em;text-transform:uppercase}.command-state strong{color:var(--soft);font-size:.67rem;font-weight:500;letter-spacing:.04em;text-transform:none}.command-state:not(:disabled):hover strong,.command-state:not(:disabled):focus-visible strong{color:var(--cyan-strong)}.command-state:disabled{cursor:default}.mic-button[aria-pressed=true]{color:var(--cyan-strong);filter:drop-shadow(0 0 7px rgba(140,234,242,.45))}.app[data-assistance-mode=focus] .command-state span,.app[data-assistance-mode=quiet] .command-state span{color:var(--mint)}.app[data-assistance-mode=teach] .command-state span,.app[data-assistance-mode=project] .command-state span,.app[data-assistance-mode=review] .command-state span{color:var(--amber-soft)}
.intelligence-response{display:grid;gap:18px}.intelligence-answer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}.intelligence-answer>div:first-child>strong{display:block;color:var(--ink);font-family:var(--display);font-size:1.75rem;font-weight:400;letter-spacing:.035em}.intelligence-answer p{max-width:68ch;margin:6px 0 0;color:var(--soft)}.intent-confidence{display:grid;justify-items:end}.intent-confidence strong{color:var(--cyan-strong);font-family:var(--display);font-size:2.2rem;font-weight:400;font-variant-numeric:tabular-nums}.intent-confidence span{color:var(--dim);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase}.intent-route{display:grid;grid-template-columns:minmax(0,1.5fr) 32px minmax(90px,.7fr) 32px minmax(70px,.55fr) 32px minmax(84px,.65fr);align-items:center;gap:5px}.intent-route>div{min-width:0}.intent-route span{display:block;color:var(--dim);font-size:.57rem;letter-spacing:.09em;text-transform:uppercase}.intent-route strong{display:block;overflow:hidden;margin-top:3px;color:var(--ink);font-size:.75rem;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.intent-route i{height:1px;background:linear-gradient(90deg,rgba(140,234,242,.45),rgba(140,234,242,.08));position:relative}.intent-route i::after{content:"";position:absolute;right:-1px;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.clarification-line{display:grid;gap:12px;padding:14px 0;border-block:1px solid rgba(233,174,85,.26)}.clarification-line>strong{color:var(--amber-soft);font-size:1rem;font-weight:500}.clarification-line>div{display:flex;flex-wrap:wrap;gap:8px}.clarification-line button{min-height:40px;padding:8px 12px;border:1px solid rgba(233,174,85,.28);border-radius:8px;background:rgba(233,174,85,.06);color:var(--ink);cursor:pointer}.clarification-line button:hover{border-color:rgba(233,174,85,.62)}
.response-ledger{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);gap:26px}.response-ledger section+section{padding-left:24px;border-left:1px solid var(--line)}.response-ledger h3{margin:0 0 9px;color:var(--ink);font-family:var(--display);font-size:1.05rem;font-weight:400;letter-spacing:.06em}.evidence-record{display:grid;grid-template-columns:90px minmax(0,1fr);gap:2px 10px;padding:9px 0;border-top:1px solid rgba(203,236,240,.1)}.evidence-record>span{grid-row:1 / 3;color:var(--dim);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase}.evidence-record>strong{color:var(--ink);font-size:.74rem;font-weight:500}.evidence-record>p{margin:0;color:var(--soft);font-size:.7rem}.evidence-record>small{grid-column:2;color:var(--dim);line-height:1.45}.evidence-record.is-calculated>span{color:var(--cyan)}.evidence-record.is-suggestion>span,.evidence-record.is-inference>span{color:var(--amber)}.response-ledger section:last-child>p{display:grid;grid-template-columns:78px 1fr;gap:9px;margin:0;padding:8px 0;border-top:1px solid rgba(203,236,240,.1);color:var(--soft);font-size:.7rem}.response-ledger section:last-child>p span{color:var(--dim);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase}.context-manifest{padding-block:10px;border-block:1px solid var(--line)}.context-manifest summary{min-height:40px;display:flex;align-items:center;color:var(--cyan-strong);cursor:pointer}.context-manifest>p{color:var(--soft)}.context-manifest dl{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0 0}.context-manifest dl div{border-top:1px solid rgba(203,236,240,.12);padding-top:8px}.context-manifest dt{color:var(--dim);font-size:.58rem;text-transform:uppercase}.context-manifest dd{margin:3px 0 0;color:var(--ink);font-variant-numeric:tabular-nums}.response-policy{display:flex;align-items:center;justify-content:space-between;gap:14px}.response-policy p{margin:0;color:var(--dim);font-size:.65rem}
.memory-control,.model-status{display:grid;gap:18px}.memory-control header,.model-status header{padding-bottom:15px;border-bottom:1px solid var(--line)}.memory-control header strong,.model-status header strong{color:var(--ink);font-family:var(--display);font-size:1.65rem;font-weight:400}.memory-control header p,.model-status header p{max-width:68ch;margin:6px 0 0;color:var(--soft)}.memory-stream{display:grid}.memory-stream>div,.provider-line{display:grid;grid-template-columns:150px minmax(0,1fr);gap:3px 16px;padding:12px 0;border-top:1px solid rgba(203,236,240,.11)}.memory-stream span,.provider-line span{grid-row:1 / 3;color:var(--dim);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase}.memory-stream strong,.provider-line strong{color:var(--ink);font-weight:500}.memory-stream p,.provider-line p{margin:0;color:var(--soft);font-size:.72rem}.memory-result{min-height:20px;margin:0;color:var(--mint)}.provider-line.is-available span{color:var(--mint)}.provider-boundary{padding-top:14px;border-top:1px solid rgba(233,174,85,.28)}.provider-boundary strong{color:var(--amber-soft);font-weight:500}.provider-boundary p{margin:5px 0 0;color:var(--soft)}
@media(max-width:820px){.command-state{position:absolute;top:-30px;right:14px;min-width:112px;min-height:30px}.command-state strong{font-size:.61rem}.intelligence-answer{grid-template-columns:1fr}.intent-confidence{justify-items:start}.intent-route{grid-template-columns:1fr 1fr;gap:0;border-block:1px solid var(--line)}.intent-route>div{min-height:58px;padding:10px 9px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.intent-route>div:nth-of-type(2n){border-right:0}.intent-route>div:nth-of-type(n+3){border-bottom:0}.intent-route i{display:none}.intent-route strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.response-ledger{grid-template-columns:1fr}.response-ledger section+section{padding-left:0;border-left:0}.context-manifest dl{grid-template-columns:1fr 1fr}.response-policy{align-items:flex-start;flex-direction:column}.memory-stream>div,.provider-line{grid-template-columns:1fr}.memory-stream span,.provider-line span{grid-row:auto}.intelligence-answer>div:first-child>strong{font-size:1.45rem}}

/* ============================================================================
   Layer 5.2 — WebGL spatial layer (spatial.js)

   These rules only take effect once spatial.js has successfully created a WebGL
   context and set `#app[data-spatial="webgl"]`. Every CSS presentation below is
   left completely intact underneath, so no-WebGL, a failed vendor load, and an
   explicit dispose() all fall back to the original visual system with no gaps.

   Nothing here transforms, scales, blurs, or filters semantic content: the canvases
   are siblings behind the content, never wrappers around it.
   ============================================================================ */

.jarvis-world-canvas{position:absolute;z-index:-2;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.jarvis-core-canvas{position:absolute;inset:-18%;width:136%;height:136%;pointer-events:none;display:block}
.jarvis-shell-canvas{position:absolute;z-index:0;inset:0;width:100%;height:100%;pointer-events:none;display:block}

/* The room photograph and the five CSS motes are superseded by the real volume. */
[data-spatial="webgl"] .ambient-room{opacity:.1;filter:saturate(.5) brightness(.5) blur(3px)}
[data-spatial="webgl"] .atmosphere{display:none}
[data-spatial="webgl"] #orb-canvas{display:none}

/* The orb's own CSS rings and radial wash would double up on the 3D core. Keep the
   status label — it is the non-visual state cue the accessibility contract requires. */
[data-spatial="webgl"] .orb{background:none;filter:none}
[data-spatial="webgl"] .orb:hover{filter:none}
[data-spatial="webgl"] .orb-ring{display:none}

/* The 3D shell replaces the CSS depth shell. `.tab-content-plane` is untouched:
   it keeps its own opaque background, whole-pixel position, and `transform:none`. */
[data-spatial="webgl"] .tab-depth-shell{display:none}
[data-spatial="webgl"] .spatial-tab{box-shadow:none}

/* Reduced motion: the WebGL layer renders exactly one static frame and parks. It
   stays visible because a still image of depth is still depth — what is removed is
   the motion, not the dimension. */
@media (prefers-reduced-motion: reduce){
  [data-spatial="webgl"] .jarvis-world-canvas{opacity:.55}
}

/* Layer 8.5 — WebGL rover (rover3d.js). The CSS rover stays in the DOM untouched and
   simply hides when a real model is present, so no-WebGL keeps a working inspector. */
.jarvis-rover-canvas{position:absolute;z-index:2;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.jarvis-rover-canvas:active{cursor:grabbing}
.model-stage.has-webgl-rover .rover,
.model-stage.has-webgl-rover .model-axis{display:none}
/* Hotspot labels and the attitude readout stay above the canvas. */
.model-stage.has-webgl-rover .model-label,
.model-stage.has-webgl-rover .part-inspector,
.model-stage.has-webgl-rover .model-attitude,
.model-stage.has-webgl-rover .model-tools,
.model-stage.has-webgl-rover .drag-hint{z-index:3}

/* Capability notice — shown only when the browser is withholding features because the
   connection is not secure. Informational, dismissible, never blocking. */
.capability-notice{position:fixed;z-index:400;right:0;bottom:184px;left:0;display:flex;justify-content:center;align-items:center;gap:14px;padding:9px 18px;border-top:1px solid rgba(233,174,85,.22);border-bottom:1px solid rgba(233,174,85,.22);background:linear-gradient(180deg,rgba(26,21,12,.95),rgba(11,14,16,.96));color:var(--soft);font-size:.82rem;line-height:1.45;text-align:center}
.capability-notice strong{color:var(--amber-soft);font-weight:600}
.capability-notice button{flex:0 0 auto;min-height:32px;padding:5px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:transparent;color:var(--ink);cursor:pointer;font-size:.8rem}
.capability-notice button:hover{border-color:var(--cyan);background:rgba(140,234,242,.08)}
@media (max-width:820px){.capability-notice{bottom:auto;top:56px;flex-direction:column;gap:8px;text-align:center}}

/* A control that cannot work says so before it is pressed. */
[data-voice="no"] .mic-button[data-unavailable]{opacity:.32;cursor:not-allowed}
[data-voice="no"] .mic-button[data-unavailable]:hover{background:transparent}

/* Model settings — a real configuration surface, not a status readout. */
.model-tier{margin:0 0 16px;padding:14px 15px;border:1px solid var(--line);border-radius:var(--radius-medium);background:rgba(9,17,22,.5)}
.model-tier legend{padding:0 6px;color:var(--ink);font-family:var(--display);font-size:1.02rem;letter-spacing:.01em}
.model-tier-purpose{margin:0 0 11px;color:var(--dim);font-size:.82rem;line-height:1.5}
.model-tier-state{display:grid;gap:2px;margin:0 0 13px;padding:9px 11px;border-left:2px solid var(--line-strong);background:rgba(140,234,242,.04);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.model-tier-state span{color:var(--dim);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase}
.model-tier-state span.is-live{color:var(--mint)}
.model-tier-state strong{color:var(--ink);font-size:.92rem}
.model-tier-state small{color:var(--dim);font-size:.78rem}
.model-key-note{margin:8px 0 11px;min-height:1em;color:var(--dim);font-size:.78rem}
.model-tier .field-with-unit{display:flex;gap:6px;align-items:stretch}
.model-tier .field-with-unit input{flex:1 1 auto;min-width:0}
.model-tier .field-with-unit .tab-action{flex:0 0 auto;padding:0 12px}
.model-status .capture-result.is-good{color:var(--mint)}
.provider-boundary p+p{margin-top:8px}

/* ============================================================================
   Class rail, rebuilt as a timeline.

   The previous rail was six equal-weight bordered boxes, each showing code, name,
   time and room. Everything shouted at the same volume, so a glance told you nothing
   — which is the opposite of what a bar on every screen is for, and it cost 78-92px
   of vertical space on a 768px Chromebook to do it.

   Now it is a line with your position on it. Detail appears only where detail is
   useful: the class you are in, and the one you are heading to. Past classes collapse
   to a dim tick, because they are context, not information. Nothing leaves the
   accessibility tree — each button keeps the full aria-label it always had.

   The tick is a GRID ITEM, not an absolutely positioned one. An earlier rule in this
   file positions it relatively inside the grid, and out-specifying that from here
   produced a tick that drifted onto the label at some widths and not others. Letting
   the grid place it removes the whole class of bug: row one owns the tick, the code
   and the name, and the connecting line is drawn at that row's centre.
   ============================================================================ */

/* --- geometry, in one place so the line and the ticks cannot disagree --- */
.class-rail{
  --rail-pad-top:10px;      /* space above the timeline band        */
  --rail-band:12px;         /* the band the ticks and line live in  */
  --rail-axis:16px;         /* = pad-top + band/2. One source of truth
                               for where the line and every tick sit. */
  height:62px;padding:0 clamp(12px,2.4vw,40px) max(4px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(4,8,10,.72),rgba(4,8,10,.95));
  border-top:1px solid rgba(203,236,240,.1);
}

.rail-track{position:relative;display:flex;align-items:stretch;justify-content:space-between;gap:0;max-width:1500px;height:100%;margin:auto;padding:0;overflow-x:auto;scrollbar-width:none}
.rail-track::-webkit-scrollbar{display:none}

/* the day, as one line — and how far through it you are */
.rail-track::before{content:"";position:absolute;top:var(--rail-axis);right:0;left:0;height:1px;background:rgba(203,236,240,.13)}
.rail-track::after{content:"";position:absolute;top:var(--rail-axis);left:0;width:var(--rail-progress,0%);height:1px;background:linear-gradient(90deg,rgba(43,117,128,.5),var(--cyan));box-shadow:0 0 10px rgba(140,234,242,.35);transition:width .6s var(--ease)}
.rail-track[data-day-state="future"]::after{display:none}

.rail-class{
  position:relative;display:grid;flex:0 0 auto;
  /* Row one is the timeline band; the labels live beneath it, so the connecting
     line never crosses a word. The first attempt put the ticks on the same row as
     the text and the line struck straight through "ENG English". */
  grid-template-columns:11px auto minmax(0,1fr);
  grid-template-rows:var(--rail-band) 17px 13px;
  align-content:start;column-gap:7px;row-gap:2px;
  min-width:0;height:100%;padding:var(--rail-pad-top) 13px 4px;
  border:0;background:transparent;text-align:left;cursor:pointer;line-height:1.15;
  transition:opacity .3s var(--ease);
}
.rail-class:hover{background:rgba(140,234,242,.045)}
.rail-class:focus-visible{outline:2px solid var(--cyan-strong);outline-offset:-2px;border-radius:var(--radius-xs)}

/* the tick, placed by the grid so it sits on the axis by construction */
.rail-class>i{position:relative;z-index:1;grid-column:1;grid-row:1 / -1;align-self:start;justify-self:center;margin-top:2px;width:7px;height:7px;margin:0;border:1px solid var(--dim);border-radius:50%;background:#060b0e;transition:all .3s var(--ease)}

.rail-class>span{grid-column:2;grid-row:2;align-self:center;color:var(--soft);font-family:var(--display);font-size:.86rem;line-height:1;letter-spacing:.04em}
.rail-class strong{grid-column:3;grid-row:2;align-self:center;overflow:hidden;color:var(--ink);font-size:.78rem;line-height:1;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.rail-class time{grid-column:2;grid-row:3;align-self:center;color:var(--dim);font-size:.64rem;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.rail-class em{grid-column:3;grid-row:3;align-self:center;justify-self:start;overflow:hidden;color:var(--dim);font-size:.64rem;line-height:1;font-style:normal;text-overflow:ellipsis;white-space:nowrap}

/* PAST — context only. A tick and a code, nothing more. */
.rail-class.is-past{padding-right:5px;padding-left:11px;opacity:.4}
.rail-class.is-past strong,.rail-class.is-past em,.rail-class.is-past time{display:none}
.rail-class.is-past>span{font-size:.74rem}
.rail-class.is-past>i{width:5px;height:5px;margin-top:3px;border-color:rgba(203,236,240,.32);background:rgba(203,236,240,.32)}
.rail-class.is-past:hover{opacity:.75}

/* UPCOMING — code and time. Enough to plan by, not enough to distract. */
.rail-class.is-upcoming{opacity:.78}
.rail-class.is-upcoming strong,.rail-class.is-upcoming em{display:none}
.rail-class.is-upcoming:hover{opacity:1}

/* NEXT — where you are heading. Room matters here. */
.rail-class.is-next{max-width:220px;opacity:1;padding-right:15px}
.rail-class.is-next strong{display:block}
.rail-class.is-next em{display:block}
.rail-class.is-next>i{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(140,234,242,.1)}

/* CURRENT — the only class allowed to take space. */
.rail-class.is-current{min-width:172px;max-width:270px;padding-right:18px;background:linear-gradient(180deg,rgba(140,234,242,.06),transparent 72%);border-radius:var(--radius-sm)}
.rail-class.is-current strong{display:block;color:var(--ink)}
.rail-class.is-current em{display:block;color:var(--soft)}
.rail-class.is-current>span{color:var(--cyan)}
.rail-class.is-current>i{width:9px;height:9px;margin-top:1px;border-color:var(--cyan-strong);background:var(--cyan);box-shadow:0 0 11px rgba(140,234,242,.7),0 0 0 4px rgba(140,234,242,.12)}
.rail-class.is-current::after{content:none}

.rail-empty{align-self:center;margin:0;padding-inline:16px;color:var(--dim);font-size:.74rem}

/* Compact viewports: the current class keeps its detail, everything else is a tick. */
@media (max-width:820px){
  .class-rail{--rail-pad-top:8px;--rail-axis:14px;height:56px;padding-inline:8px}
  .rail-class{padding:var(--rail-pad-top) 9px 4px}
  .rail-class.is-next strong,.rail-class.is-next em{display:none}
  .rail-class.is-current{min-width:146px;max-width:210px}
}

/* The progress line is decoration; where each tick sits is not. */
@media (prefers-reduced-motion:reduce){
  .rail-track::after,.rail-class{transition:none}
}

/* ============================================================================
   Generative surfaces (surface.js)

   Every panel used to be a hand-written HTML template, which is a hard ceiling on
   "ask it anything". Surfaces are now typed data rendered by one component, so a
   deterministic tool and a model can both answer visually through the same door.

   Chart colors are set in surface.js, not here: they were validated against this
   dark surface with the palette checks (lightness band, chroma floor, CVD
   separation, normal-vision floor, contrast) and must stay in one place so a CSS
   tweak cannot silently break a check.
   ============================================================================ */

.surface{display:flex;flex-direction:column;gap:19px}
.surface-lead{margin:0;color:var(--soft);font-size:.88rem;line-height:1.55;max-width:62ch}
.surface-block{display:flex;flex-direction:column;gap:11px}
.surface-block-title{margin:0;color:var(--ink);font-family:var(--display);font-size:1.02rem;font-weight:600;letter-spacing:.01em}
.surface-empty{margin:0;color:var(--dim);font-size:.85rem}

/* truth chips — a calculation and a guess must never look alike */
.surface-truth{display:inline-block;padding:2px 6px;border-radius:3px;font-family:var(--display);font-size:.62rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;vertical-align:1px}
.surface-truth.is-fact{color:var(--mint);background:rgba(152,231,191,.11)}
.surface-truth.is-calc{color:var(--cyan);background:rgba(140,234,242,.11)}
.surface-truth.is-inference{color:var(--amber);background:rgba(233,174,85,.11)}
.surface-truth.is-suggestion{color:#b79bf0;background:rgba(183,155,240,.12)}
.surface-truth.is-unknown{color:var(--coral);background:rgba(255,143,126,.11)}

/* hero — a single headline number, not a one-bar chart */
.surface-hero{display:flex;flex-direction:column;gap:5px}
.surface-hero-figure{display:flex;align-items:baseline;gap:5px}
.surface-hero-figure strong{color:var(--ink);font-family:var(--display);font-size:3.1rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.surface-hero-unit{color:var(--soft);font-family:var(--display);font-size:1.3rem}
.surface-hero-label{margin:0;color:var(--soft);font-size:.9rem}
.surface-hero-detail{margin:0;color:var(--dim);font-size:.79rem}
.surface-hero .surface-truth{align-self:flex-start;margin-top:3px}

/* stat row */
.surface-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px}
.surface-stat{position:relative;display:flex;flex-direction:column;gap:3px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(140,234,242,.03)}
.surface-stat-label{color:var(--dim);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase}
.surface-stat-value{color:var(--ink);font-family:var(--display);font-size:1.5rem;font-weight:600;line-height:1.05;font-variant-numeric:tabular-nums}
.surface-stat-detail{color:var(--dim);font-size:.74rem}
.surface-stat-status{position:absolute;top:11px;right:11px;width:7px;height:7px;border-radius:50%}
.surface-stat-status.is-good{background:var(--mint)}
.surface-stat-status.is-warning{background:var(--amber)}
.surface-stat-status.is-critical{background:var(--coral)}
.surface-stat-statusword{color:var(--dim);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase}

/* meter */
.surface-meter{display:flex;flex-direction:column;gap:7px}
.surface-meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.surface-meter-head span{color:var(--soft);font-size:.83rem}
.surface-meter-head strong{color:var(--ink);font-family:var(--display);font-size:1.05rem;font-variant-numeric:tabular-nums}
.surface-meter-track{position:relative;height:8px;border-radius:4px;background:rgba(203,236,240,.09);overflow:visible}
.surface-meter-fill{display:block;height:100%;border-radius:4px;background:var(--cyan)}
.surface-meter-target{position:absolute;top:-3px;width:2px;height:14px;background:var(--amber-soft);border-radius:1px}
.surface-meter-detail{margin:0;color:var(--dim);font-size:.78rem}

/* charts */
.surface-chart{margin:0;display:flex;flex-direction:column;gap:9px}
.surface-svg{display:block;width:100%;height:auto;overflow:visible}
.surface-svg .surface-axis{fill:var(--dim);font-family:var(--ui);font-size:10px;font-variant-numeric:tabular-nums}
.surface-svg .surface-point-label{fill:var(--ink);font-family:var(--display);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.surface-svg .surface-threshold-label{fill:var(--amber-soft);font-family:var(--display);font-size:10.5px;letter-spacing:.05em}
.surface-legend{display:flex;flex-wrap:wrap;gap:7px 15px}
.surface-legend-item{display:inline-flex;align-items:center;gap:6px;color:var(--soft);font-size:.77rem}
.surface-legend-item.is-context{color:var(--dim)}
.surface-legend-item i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.surface-caption{margin:0;color:var(--dim);font-size:.76rem}

/* bars — <=24px thick, rounded data end, 2px surface gap between rows */
.surface-bars{display:flex;flex-direction:column;gap:2px}
.surface-bar-row{display:grid;grid-template-columns:minmax(90px,.9fr) minmax(0,2fr) auto;align-items:center;gap:11px;padding:4px 0}
.surface-bar-label{overflow:hidden;color:var(--soft);font-size:.79rem;text-overflow:ellipsis;white-space:nowrap}
.surface-bar-track{height:14px;border-radius:2px;background:rgba(203,236,240,.055)}
.surface-bar-fill{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--cyan-deep)}
.surface-bar-value{color:var(--ink);font-family:var(--display);font-size:.85rem;font-variant-numeric:tabular-nums}

/* table — also the accessible view of every chart */
.surface-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
.surface-table{width:100%;border-collapse:collapse;font-size:.79rem}
.surface-table th{padding:7px 10px;border-bottom:1px solid var(--line);background:rgba(140,234,242,.04);color:var(--dim);font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.09em;text-align:left;text-transform:uppercase}
.surface-table td{padding:6px 10px;border-bottom:1px solid rgba(203,236,240,.06);color:var(--soft);font-variant-numeric:tabular-nums}
.surface-table tr:last-child td{border-bottom:0}
.surface-datatable summary{color:var(--dim);font-size:.76rem;cursor:pointer;padding:2px 0}
.surface-datatable summary:hover{color:var(--cyan)}
.surface-datatable[open] summary{margin-bottom:7px}

/* steps */
.surface-steps{display:flex;flex-direction:column;gap:8px;margin:0;padding-left:19px}
.surface-steps li{color:var(--soft);font-size:.83rem}
.surface-steps strong{display:block;color:var(--ink);font-size:.86rem;font-weight:500}
.surface-steps em{color:var(--dim);font-size:.75rem;font-style:normal}

/* notes */
.surface-note{margin:0;padding:10px 12px;border-left:2px solid var(--line-strong);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:rgba(140,234,242,.035);color:var(--soft);font-size:.83rem;line-height:1.55}
.surface-note.is-unknown{border-left-color:var(--coral);background:rgba(255,143,126,.05)}
.surface-note.is-inference{border-left-color:var(--amber);background:rgba(233,174,85,.05)}
.surface-note.is-calc{border-left-color:var(--cyan)}

.surface-actions{display:flex;flex-wrap:wrap;gap:8px}

/* evidence ledger — required by the constitution, not decoration */
.surface-ledger{display:flex;flex-direction:column;gap:6px;margin-top:3px;padding:12px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(9,17,22,.5)}
.surface-ledger-title{color:var(--dim);font-family:var(--display);font-size:.67rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.surface-ledger-line{margin:0;color:var(--soft);font-size:.79rem;line-height:1.5}

@media (max-width:820px){
  .surface-hero-figure strong{font-size:2.4rem}
  .surface-bar-row{grid-template-columns:minmax(70px,1fr) minmax(0,1.4fr) auto;gap:8px}
}

/* Link blocks — a real destination from the allowlist, opened in a new tab. */
.surface-links{display:flex;flex-wrap:wrap;gap:8px}
.surface-link{display:inline-flex;flex-direction:column;gap:1px;min-height:var(--target-compact);justify-content:center;padding:7px 13px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:rgba(140,234,242,.05);color:var(--ink);font-size:.84rem;text-decoration:none}
.surface-link:hover{border-color:var(--cyan);background:rgba(140,234,242,.11)}
.surface-link small{color:var(--dim);font-size:.68rem}

/* Batch capture — review before anything is saved. */
.batch-capture{display:flex;flex-direction:column;gap:14px}
.batch-capture textarea{min-height:118px;resize:vertical;font-family:var(--ui);line-height:1.5}
.batch-status{align-self:center;color:var(--dim);font-size:.8rem}
.batch-status.is-good{color:var(--mint)}
.batch-status.is-error{color:var(--coral)}
.batch-results{display:flex;flex-direction:column;gap:12px}
.batch-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.batch-summary strong{color:var(--ink);font-family:var(--display);font-size:1.02rem}
.batch-summary span{color:var(--dim);font-size:.78rem}
.batch-empty{margin:0;color:var(--dim);font-size:.84rem}
.batch-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.batch-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(140,234,242,.025);transition:opacity .2s var(--ease),border-color .2s var(--ease)}
.batch-row.is-uncertain{border-color:rgba(233,174,85,.3)}
.batch-row.is-blocked{opacity:.72;border-style:dashed}
.batch-row.is-saved{opacity:.45;border-color:rgba(152,231,191,.4)}
.batch-include{display:flex;align-items:flex-start;padding-top:6px}
.batch-include input{width:17px;height:17px;accent-color:var(--cyan)}
.batch-fields{display:flex;flex-direction:column;gap:7px;min-width:0}
.batch-title{width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:var(--radius-xs);background:rgba(4,9,12,.6);color:var(--ink);font-size:.87rem}
.batch-meta{display:flex;flex-wrap:wrap;gap:7px}
.batch-meta select,.batch-meta input{padding:5px 8px;border:1px solid var(--line);border-radius:var(--radius-xs);background:rgba(4,9,12,.6);color:var(--soft);font-size:.78rem}
.batch-meta select{min-width:118px}
.batch-source summary{color:var(--dim);font-size:.72rem;cursor:pointer}
.batch-source blockquote{margin:6px 0 0;padding:7px 10px;border-left:2px solid var(--cyan-deep);color:var(--soft);font-size:.78rem;line-height:1.5}
.batch-uncertain{display:flex;flex-direction:column;gap:2px;margin:0;padding-left:15px;color:var(--amber);font-size:.74rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.batch-nosource{margin:0;color:var(--amber);font-size:.74rem}

/* Draft blocks — text the student sends as themselves. JARVIS cannot send it. */
.surface-draft{display:flex;flex-direction:column;gap:8px;padding:13px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:rgba(9,17,22,.6)}
.surface-draft-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.surface-draft-label{color:var(--amber);font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.surface-draft-copy{min-height:32px;padding:5px 13px;border:1px solid var(--line-strong);border-radius:var(--radius-xs);background:transparent;color:var(--ink);cursor:pointer;font-size:.78rem}
.surface-draft-copy:hover{border-color:var(--cyan);background:rgba(140,234,242,.09)}
.surface-draft-subject{margin:0;color:var(--soft);font-size:.83rem}
.surface-draft-subject span{color:var(--dim);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;margin-right:6px}
.surface-draft-body{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-xs);background:rgba(4,9,12,.7);color:var(--ink);font-family:var(--ui);font-size:.86rem;line-height:1.6;resize:vertical}
.surface-draft-detail{margin:0;color:var(--dim);font-size:.76rem}

/* Teacher message composer */
.teacher-message{display:flex;flex-direction:column;gap:13px}
.tm-reasons{margin:0;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.tm-reasons legend{padding:0 6px;color:var(--soft);font-family:var(--display);font-size:.9rem}
.tm-reasons label{display:flex;align-items:flex-start;gap:8px;padding:4px 0;color:var(--soft);font-size:.83rem;cursor:pointer}
.tm-reasons input{margin-top:2px;width:15px;height:15px;accent-color:var(--cyan)}

/* --- Layer 7: practice -------------------------------------------------------
   A practice card is the one surface in JARVIS that should have almost nothing on
   it. Everything competing with the question competes with recall, so the card is
   a question, one row of choices, and nothing else — no progress bars, no streaks,
   no badges. The only decoration that earns its place is the line from his own
   notes shown on reveal, because that is the claim the whole layer rests on. */
.practice{display:flex;flex-direction:column;gap:var(--space-standard)}
/* `hidden` loses to an explicit display, so the show/hide state uses a class the
   stylesheet cannot silently ignore. Without this the intake form and a live
   question render on top of one another. */
.practice .is-away{display:none}
/* While a question is on screen the tab holds nothing else. On a 768px Chromebook
   the lead paragraph and the intake panel were pushing the grading buttons below
   the fold, which made a student scroll to answer — the one interaction in this
   layer that has to be instant. */
.practice.is-practising>.tab-lead,.practice.is-practising>.practice-panels{display:none}
.practice-panels{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:var(--space-standard);align-items:start}
@media (max-width:640px){.practice-panels{grid-template-columns:minmax(0,1fr)}}

.practice-queue{display:flex;flex-direction:column;gap:var(--space-compact);padding:var(--space-control);border:1px solid var(--line);border-radius:var(--radius-group);background:rgba(140,234,242,.025)}
.practice-upcoming{margin:0 0 var(--space-micro);padding-bottom:var(--space-tight);border-bottom:1px solid var(--line);color:var(--soft);font-size:.79rem;line-height:1.4}
.practice-upcoming.is-urgent{color:var(--amber-soft)}
.practice-count{display:flex;align-items:baseline;gap:7px}
.practice-count b{font-family:var(--display);font-size:1.9rem;line-height:1;color:var(--cyan-strong)}
.practice-count span{color:var(--dim);font-size:.78rem}
.practice-start{width:100%}
.practice-materials{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none;border-top:1px solid var(--line);padding-top:var(--space-compact)}
.practice-materials li{display:flex;justify-content:space-between;gap:10px;font-size:.79rem}
.practice-materials i{min-width:1.4em;text-align:right}
.practice-materials span{color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.practice-materials i{color:var(--dim);font-style:normal;flex:none}
.practice-empty{margin:0;color:var(--dim);font-size:.8rem}

.practice-add{border:1px solid var(--line);border-radius:var(--radius-group);padding:var(--space-control)}
.practice-add>summary{cursor:pointer;color:var(--soft);font-size:.84rem;list-style:none}
.practice-add>summary::-webkit-details-marker{display:none}
.practice-add>summary::before{content:"+ ";color:var(--cyan-deep)}
.practice-add[open]>summary{margin-bottom:var(--space-control)}
.practice-add[open]>summary::before{content:"\2212 "}
.practice-add textarea{resize:vertical;min-height:120px}

/* The stage takes the whole tab while a session runs: one question, nothing else. */
.practice-stage{display:flex;flex-direction:column;gap:var(--space-standard)}
.practice-card{display:flex;flex-direction:column;gap:var(--space-control);padding:var(--space-standard);border:1px solid var(--line);border-radius:var(--radius-group);background:linear-gradient(180deg,rgba(140,234,242,.04),rgba(10,17,22,.2))}
.practice-meta{display:flex;justify-content:space-between;gap:12px;color:var(--dim);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase}
.practice-prompt{margin:0;font-family:var(--display);font-size:1.4rem;line-height:1.28;color:var(--ink);max-width:var(--measure-readable)}
.practice-legend{display:block;color:var(--dim);font-size:.78rem}
.practice-confidence{display:flex;flex-direction:column;gap:var(--space-tight)}
.practice-chips{display:flex;flex-wrap:wrap;gap:var(--space-tight)}
.practice-chips button{min-height:var(--target-compact);padding:0 var(--space-control);border:1px solid var(--line);border-radius:var(--radius-control);background:transparent;color:var(--soft);font-size:.84rem;cursor:pointer;transition:border-color var(--motion-control) var(--ease),color var(--motion-control) var(--ease),background var(--motion-control) var(--ease)}
.practice-chips button:hover{border-color:var(--line-strong);color:var(--ink);background:rgba(140,234,242,.06)}
.practice-body{display:flex;flex-direction:column;gap:var(--space-control);flex:1}
.practice-foot{margin-top:auto;padding-top:var(--space-tight);border-top:1px solid var(--line)}
.practice-reveal{display:flex;flex-direction:column;gap:var(--space-compact);border-top:1px solid var(--line);padding-top:var(--space-control);animation:practice-reveal var(--motion-control) var(--ease)}
@keyframes practice-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.practice-reveal{animation:none}}
.practice-answer{margin:0;color:var(--cyan-strong);font-size:1.05rem;line-height:1.45;max-width:var(--measure-readable)}
/* The receipt. Quoted, indented, and labelled as his — not JARVIS's paraphrase. */
.practice-source{margin:0;padding:var(--space-compact) var(--space-control);border-left:2px solid var(--cyan-deep);background:rgba(140,234,242,.03);color:var(--soft);font-size:.85rem;line-height:1.5;max-width:var(--measure-readable)}
.practice-source span{display:block;margin-bottom:3px;color:var(--dim);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.practice-quit{align-self:flex-start;padding:0;border:0;background:none;color:var(--dim);font-size:.78rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.practice-quit:hover{color:var(--soft)}

/* Layer 5.6 — the causal connector moved into the shells WebGL scene. The SVG stays
   in the DOM as the fallback for tier 0 and for machines with no WebGL at all, so a
   tier drop restores it without rebuilding anything. spatial.js owns this flag. */
#app[data-connectors="webgl"] .summon-connection{display:none}

/* Present to assistive technology, absent from the screen. Not display:none, which
   would take it out of the accessibility tree along with everything inside it. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- Layer 5.10: machine check ----------------------------------------------
   The one tab whose entire job is to replace guessed numbers with measured ones,
   so it is laid out as a readout rather than a dashboard: no gauges, no score. */
.diagnostics{display:flex;flex-direction:column;gap:var(--space-standard)}
.diag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-tight) var(--space-standard)}
.diag-grid>div{display:flex;flex-direction:column;gap:2px;padding-bottom:var(--space-tight);border-bottom:1px solid var(--line)}
.diag-grid span{color:var(--dim);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase}
.diag-grid strong{color:var(--ink);font-size:.86rem;font-weight:500;overflow-wrap:anywhere}
.diag-warning{margin:0;padding:var(--space-compact) var(--space-control);border-left:2px solid var(--amber);background:rgba(233,174,85,.06);color:var(--amber-soft);font-size:.82rem;line-height:1.45}
.diag-note{margin:0;color:var(--dim);font-size:.78rem;line-height:1.45}
.diag-report{width:100%;min-height:150px;margin-top:var(--space-control);padding:var(--space-compact);border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(5,8,10,.6);color:var(--soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;line-height:1.5;resize:vertical}

/* --- Layer 6.9: closing the day ---------------------------------------------
   A reconciliation he does every evening has to be faster than skipping it. Each
   row is a real fieldset with real radios — right for a screen reader, and right
   for a thumb — styled down to chips so the whole list reads as one short form
   rather than as a stack of questions. */
.shutdown{display:flex;flex-direction:column;gap:var(--space-standard)}
.shutdown-list{display:flex;flex-direction:column;gap:var(--space-compact)}
.shutdown-row{margin:0;padding:var(--space-compact) var(--space-control);border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(140,234,242,.02)}
.shutdown-row legend{display:flex;flex-direction:column;gap:1px;padding:0;margin-bottom:var(--space-tight)}
.shutdown-row legend strong{color:var(--ink);font-size:.92rem;font-weight:500}
.shutdown-row legend span{color:var(--dim);font-size:.74rem}
.shutdown-choices{display:flex;flex-wrap:wrap;gap:var(--space-micro)}
.shutdown-choices label{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 var(--space-compact);border:1px solid var(--line);border-radius:var(--radius-control);color:var(--soft);font-size:.8rem;cursor:pointer;transition:border-color var(--motion-control) var(--ease),color var(--motion-control) var(--ease),background var(--motion-control) var(--ease)}
.shutdown-choices label:hover{border-color:var(--line-strong);color:var(--ink)}
.shutdown-choices input{accent-color:var(--cyan);margin:0}
.shutdown-choices label:has(input:checked){border-color:var(--cyan-deep);background:rgba(140,234,242,.07);color:var(--ink)}
.shutdown-choices label:focus-within{outline:2px solid var(--cyan-strong);outline-offset:2px}
.shutdown-minutes{display:flex;flex-direction:column;gap:4px;margin-top:var(--space-tight);padding-top:var(--space-tight);border-top:1px solid var(--line)}
.shutdown-minutes>span:first-child{color:var(--dim);font-size:.74rem}
.shutdown-minutes input{width:92px}
.shutdown-minutes small{color:var(--dim);font-size:.7rem}
.shutdown-clear{margin:0;color:var(--soft);font-size:.85rem;line-height:1.5}

/* --- Layer 10: earlier versions ---------------------------------------------
   Someone on this screen has already lost something, so the row where a count
   drops is marked rather than left to be spotted. Amber, plus a sentence — never
   colour alone. */
.history{display:flex;flex-direction:column;gap:var(--space-standard)}
.history-list{display:flex;flex-direction:column;gap:var(--space-micro)}
.history-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-control);padding:var(--space-compact) var(--space-control);border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(140,234,242,.02)}
.history-row>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.history-row strong{color:var(--ink);font-size:.88rem;font-weight:500}
.history-row span{color:var(--dim);font-size:.75rem;overflow-wrap:anywhere}
.history-row b{color:var(--amber-soft);font-size:.75rem;font-weight:400}
.history-row em{color:var(--mint);font-size:.74rem;font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.history-row.is-current{border-color:var(--line-strong);background:rgba(152,231,191,.04)}
.history-row.is-loss{border-color:rgba(233,174,85,.34);background:rgba(233,174,85,.045)}

/* --- Layer 8: the build workbench -------------------------------------------
   The parts list is the control surface and the 3D view is the picture. They sit
   side by side at that priority: the list keeps working when WebGL does not, and
   everything the canvas can do can be done from the list. */
.workbench{display:flex;flex-direction:column;gap:var(--space-control)}
.workbench-head{display:flex;align-items:flex-end;gap:var(--space-control);flex-wrap:wrap}
.workbench-head .capture-field{min-width:180px}
.workbench-caveat{margin:0;padding:var(--space-tight) var(--space-control);border-left:2px solid var(--amber);background:rgba(233,174,85,.06);color:var(--amber-soft);font-size:.78rem;line-height:1.45}
.workbench-body{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--space-control);align-items:start}
@media (max-width:720px){.workbench-body{grid-template-columns:minmax(0,1fr)}}

.part-list{display:flex;flex-direction:column;gap:3px;margin:0 0 var(--space-tight);padding:0;list-style:none;max-height:280px;overflow-y:auto}
.part-list button{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;width:100%;padding:7px 9px;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;text-align:left;cursor:pointer}
.part-list button:hover{border-color:var(--line);background:rgba(140,234,242,.04)}
.part-list button[aria-current]{border-color:var(--cyan-deep);background:rgba(140,234,242,.08)}
.part-list button.is-conflict{border-color:rgba(255,143,126,.42)}
.part-list strong{display:block;color:var(--ink);font-size:.85rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.part-list small{display:block;color:var(--dim);font-size:.72rem}
.part-empty{color:var(--dim);font-size:.8rem;padding:7px 9px}
/* Colour matches the 3D view so the list and the picture name parts the same way —
   and it is never the only signal: every row carries its measurements as text. */
.part-swatch{width:9px;height:9px;border-radius:2px;background:var(--cyan)}
.part-swatch[data-kind=structure]{background:#2b7580}
.part-swatch[data-kind=drive]{background:#7d6df2}
.part-swatch[data-kind=power]{background:#e9ae55}
.part-swatch[data-kind=compute]{background:#1c9fb2}
.part-swatch[data-kind=sensor]{background:#98e7bf}
.part-swatch[data-kind=fastener]{background:#83969b}

.workbench-view{display:flex;flex-direction:column;gap:var(--space-tight)}
.build-stage{position:relative;height:340px;border:1px solid var(--line);border-radius:var(--radius-group);background:radial-gradient(circle at 50% 45%,rgba(140,234,242,.05),transparent 62%);overflow:hidden;touch-action:none}
.build-stage canvas{display:block;width:100%;height:100%}
.build-stage p{margin:0;padding:var(--space-control)}
.build-explode{display:flex;align-items:center;gap:var(--space-compact)}
.build-explode span{color:var(--dim);font-size:.74rem;white-space:nowrap}
.build-explode input{flex:1;accent-color:var(--cyan)}

.part-form{display:flex;flex-direction:column;gap:var(--space-compact);padding:var(--space-control);border:1px solid var(--line);border-radius:var(--radius-group);background:rgba(140,234,242,.02)}
.part-axes{margin:0;padding:var(--space-tight) var(--space-control) var(--space-control);border:1px solid var(--line);border-radius:var(--radius-sm)}
.part-axes legend{padding:0 5px;color:var(--dim);font-size:.72rem}
.part-axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--space-tight) var(--space-control)}
.part-axes legend{grid-column:1/-1}

/* --- Phone: a different composition, not a squeezed desktop -----------------
 *
 * Looked at on a 390px screen, the shell was fighting the content: the presence
 * orb kept its desktop position:fixed and floated over the open panel, its three
 * status labels stacked on top of one another and on top of the text beneath,
 * "Reset" sat across a sentence, and the class rail showed through everything at a
 * size nobody could read.
 *
 * The panel content itself was already good — big type, clear hierarchy — so the
 * fix is not to redesign it. It is to make the shell get out of its way. On a phone
 * an open panel IS the screen, and everything decorative steps back.
 */
@media (max-width: 820px) {
  /* An open panel takes the whole stage. No floating window, no Home bleeding
     through behind it, nothing overlapping its edges. */
  .spatial-layer { inset: 106px 0 158px; }
  .spatial-tab {
    inset: 0 !important;
    width: auto !important; height: auto !important;
    max-height: none; border-radius: 0;
    box-shadow: none;
  }
  .spatial-tab .tab-content-plane { border-radius: 0; }
  .tab-depth-shell { display: none; }

  /* The orb is presence, not information. While he is reading something it is in
     the way, and its three stacked labels were unreadable even when it was not. */
  .app.is-work-session .jarvis-presence { display: none; }
  .companion-label { display: none; }
  .jarvis-presence .orb-status { position: static; margin-top: 6px; }

  /* The schedule strip is worth keeping on Home and worth nothing underneath a
     panel, where it only shows through. */
  .app.is-work-session .class-rail { display: none; }
  .class-rail { height: 72px; }
  .rail-class { flex: 0 0 128px; }
  .rail-class strong { font-size: .82rem; }
  .rail-class span, .rail-class time, .rail-class em { font-size: .7rem; }

  /* It was sitting 34px above its own container, which put it on top of whatever
     was behind. */
  .reset-home { position: static; margin-right: 10px; }
  .command-deck { grid-template-columns: auto 1fr; gap: 8px; align-items: center; }

  /* Thumb-sized. 27 controls were under 40px, which on a phone means missing them. */
  .tab-tools button, .text-action, .tab-action, .rail-class,
  .task-list button, .alert-line, .view-button { min-height: 44px; }
  .tab-tools button { min-width: 44px; }

  /* Nothing on a phone may be smaller than this. The smallest text in use was
     7.2px, which is not small text, it is a decorative texture. */
  small, .tab-meta span, .surface-stat-label, .part-list small,
  .history-row span, .diag-grid span { font-size: .74rem !important; }
}

@media (max-width: 520px) {
  .spatial-layer { inset: 100px 0 152px; }
  /* Two actions per row rather than a stack of single buttons down the side. */
  .task-list button { grid-template-columns: 30px minmax(0, 1fr); }
  .plan-row { grid-template-columns: minmax(0, 1fr); }
  .core-actions { flex-wrap: wrap; }
  .core-actions .tab-action { flex: 1 1 auto; }
}

/* --- Phone, second pass: what the first pass got wrong ----------------------
   Found by looking at it again rather than by reasoning about it. */
@media (max-width: 820px) {
  /* 1. The panel controls disappeared. Forcing 44px onto every tool pushed the row
        wider than the header could hold and it clipped out of sight — a minimum tap
        size that removes the target is worse than a small one. Four of the seven are
        already hidden on phone, so the three that remain get the room instead. */
  .tab-tools { gap: 4px; flex: 0 0 auto; }
  .tab-tools button { width: 40px; height: 40px; min-width: 0; }
  .tab-head { align-items: flex-start; gap: 10px; }
  .tab-title { min-width: 0; }

  /* 2. Home kept scrolling behind an open panel, so the bottom of the screen showed
        another screen's headings underneath the one being read. A panel on a phone is
        the whole surface; there is nothing behind it to scroll. */
  .app[data-panels]:not([data-panels="0"]) .main-stage { height: calc(100dvh - 106px); overflow: hidden; padding-bottom: 0; }
  .app[data-panels]:not([data-panels="0"]) .view-scene { min-height: 0; }

  /* 3. The toast landed across the panel's own title.
        Two reasons, and the second is the one that cost the time. A fixed element
        given both `top` and `bottom` resolves to the top, so setting only `bottom`
        left the earlier rule in force. And that earlier rule is
        `.app.is-work-session .toast` — two classes and a descendant, which outranks a
        bare `.toast` however late it appears in the file. Matching its specificity is
        the fix; adding !important would have been the shortcut that hides the reason.

        A notice belongs near the thing that raised it, which on a phone is the
        command line at the bottom, not the title of whatever he is reading. */
  .app .toast,
  .app.is-work-session .toast,
  .app[data-panels]:not([data-panels="0"]) .toast {
    top: auto; bottom: 170px; right: 12px; left: 12px; max-width: none;
  }

  /* 4. Six tools in a 390px header. Move, dock, depth and resize all describe a
        floating window, and on a phone a panel is not a window — it is the screen.
        Minimize, pin and close are the three that still mean something. */
  .tab-tools [data-tool="move"], .tab-tools [data-tool="dock"],
  .tab-tools [data-tool="depth"], .tab-tools [data-tool="resize"] { display: none; }

  /* 5. The floor on text size. 8px is not small text, it is a texture, and these are
        labels he is meant to read: which data he is looking at, which class is next. */
  .synthetic, .orb-status, .home-lane-summary, .zone-heading .text-action,
  .alert-kind, .tab-meta span, .model-assumption { font-size: .72rem !important; }
  .view-button { font-size: .88rem; }

  /* 6. Thumb-sized where it counts: the controls he uses standing up in a corridor. */
  .view-switcher { height: auto; padding: 2px 0; }
  .view-button, .add-view { height: 44px; min-height: 44px; }
  .task-list button, .alert-line { min-height: 52px; }
  .mic-button, .command-field button { width: 44px; height: 44px; }
}

/* --- The brief: one question, everything ------------------------------------
   Built to be read standing up, one-handed, in about four seconds. Big first
   line, tappable rows, and the limits of what JARVIS knows at the bottom where
   they cannot be mistaken for small print. */
.brief{display:flex;flex-direction:column;gap:var(--space-standard)}
.brief-now{display:flex;flex-direction:column;gap:2px;margin:0}
.brief-now span{color:var(--dim);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.brief-now strong{font-family:var(--display);font-size:1.6rem;line-height:1.15;color:var(--ink);font-weight:500}
.brief-now em{color:var(--soft);font-size:.86rem;font-style:normal}
.brief-heading{margin:0;font-family:var(--display);font-size:1.05rem;font-weight:500;color:var(--ink)}
.brief-list{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}
.brief-list button{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;width:100%;min-height:56px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(140,234,242,.02);text-align:left;cursor:pointer}
.brief-list button:hover{border-color:var(--line-strong);background:rgba(140,234,242,.06)}
.brief-list strong{display:block;color:var(--ink);font-size:.92rem;font-weight:500}
.brief-list small{display:block;color:var(--dim);font-size:.76rem}
/* The tag carries the urgency as a word, so colour is never the only signal. */
.brief-tag{flex:none;padding:3px 8px;border-radius:20px;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--line);color:var(--soft)}
.brief-tag.is-overdue{border-color:rgba(255,143,126,.5);color:var(--coral)}
.brief-tag.is-due-today{border-color:rgba(233,174,85,.5);color:var(--amber-soft)}
.brief-tag.is-conflict{border-color:rgba(233,174,85,.5);color:var(--amber-soft)}
.brief-more{margin:0;color:var(--dim);font-size:.8rem;line-height:1.5}
.brief-study{margin:0;padding:var(--space-compact) var(--space-control);border-left:2px solid var(--cyan-deep);background:rgba(140,234,242,.04);color:var(--soft);font-size:.85rem;line-height:1.5}
/* Not small print. This is part of the answer: "nothing needs you" is only true
   alongside the list of places JARVIS cannot look. */
.brief-blind{padding:var(--space-control);border:1px solid var(--line);border-radius:var(--radius-group);background:rgba(233,174,85,.03)}
.brief-blind h3{margin:0 0 var(--space-tight);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.brief-blind ul{display:flex;flex-direction:column;gap:6px;margin:0;padding:0 0 0 16px}
.brief-blind li{color:var(--soft);font-size:.82rem;line-height:1.5}

/* --- The presence carries state ---------------------------------------------
   Colour is never the only signal: .orb-status says the same thing in words, the
   aria-label says it in a sentence, and under reduced motion the WebGL core holds
   a single frame where the text is all there is. */
#app[data-attention="soon"] .orb-status { color: var(--amber-soft); }
#app[data-attention="urgent"] .orb-status { color: var(--coral); }
#app[data-attention="soon"] .orb-ring-one { border-color: rgba(233,174,85,.45); }
#app[data-attention="urgent"] .orb-ring-one { border-color: rgba(255,143,126,.5); }
/* The CSS fallback orb, for machines with no WebGL at all — the signal must survive
   the graphics tier dropping to nothing. */
#app[data-attention="urgent"] .orb::after { box-shadow: 0 0 34px rgba(255,143,126,.28); }

/* --- Notifications: the rules are the feature -------------------------------
   The list of what will NOT reach him is as prominent as the list of what will,
   because the promise being made is restraint. A settings screen that only shows
   what a system can do is a settings screen you cannot trust. */
.notify{display:flex;flex-direction:column;gap:var(--space-standard)}
.notify-rules{padding:var(--space-control);border:1px solid var(--line);border-radius:var(--radius-group);background:rgba(140,234,242,.02)}
.notify-rules h3{margin:0 0 var(--space-tight);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.notify-rules h3+ul{margin-bottom:var(--space-control)}
.notify-rules ul{display:flex;flex-direction:column;gap:6px;margin:0;padding:0 0 0 16px}
.notify-rules li{color:var(--soft);font-size:.84rem;line-height:1.5}
.notify-rules li strong{color:var(--ink);font-weight:500}
.notify-rules h3:nth-of-type(2){color:var(--amber)}

/* --- Phone: a panel is the whole screen -------------------------------------
   The command deck is deliberately translucent at its top edge on a desktop, where
   the blurred home view behind it reads as depth. On a phone the panel above it is
   full-bleed, so the same gradient stops reading as depth and starts reading as
   half a sentence bleeding through from a view he cannot see or scroll. */
@media(max-width:820px){
  .app.is-work-session .command-deck{background:linear-gradient(180deg,rgba(5,9,11,.97),rgb(5,9,11))}
  /* The rail is 93% opaque, which reads as depth over a home view you can also see.
     Under a full-bleed panel there is no home view to see — the 7% is just a sentence
     from a screen he cannot scroll, showing through as a ghost. */
  .app.is-work-session .class-rail{background:rgb(4,8,10)}
  /* And the home view itself. A full-bleed panel covers all of it, so anything still
     visible is a fragment showing through a gap in the chrome — half a sentence he
     cannot scroll to, which reads as the panel being broken rather than as depth.
     It comes straight back when the panel closes, because is-work-session does. */
  .app.is-work-session .home-scene > .home-layout{visibility:hidden}
}

/* The tab shelf (minimised panels, undo close) floats over the workspace on a
   desktop, where there is empty space for it to float in. On a phone the panel is
   the screen, so the shelf becomes a strip above it and the panel starts below. */
@media(max-width:820px){
  .tab-shelf{top:0;right:0;bottom:auto;left:0;max-width:none;padding:5px 8px;border-top:0;border-bottom:1px solid rgba(208,244,247,.18);background:rgb(6,11,14)}
  .app.has-shelf .spatial-tab{top:45px!important}
}

/* Changes held on a device the Mac has not seen. Loud on purpose: two versions of
   the record exist and only he can say which one wins. */
.held-offline{display:flex;flex-direction:column;gap:9px;margin-bottom:14px;padding:14px 15px;border:1px solid var(--amber-soft,#c9a227);border-left-width:3px;border-radius:var(--radius-sm);background:rgba(201,162,39,.07)}
.held-offline.is-unsafe{border-color:#d9534f;background:rgba(217,83,79,.08)}
.held-offline strong{color:var(--ink);font-family:var(--display);font-size:1.02rem}
.held-offline p{margin:0;color:var(--soft);font-size:.86rem;line-height:1.55}

/* The answer, sitting above the evidence it was counted from. */
.answer-band{display:flex;flex-direction:column;gap:7px;margin:0 0 14px;padding:13px 15px;border:1px solid var(--line-strong);border-left:3px solid var(--cyan);border-radius:var(--radius-sm);background:rgba(140,234,242,.06)}
.answer-question{margin:0;color:var(--dim);font-family:var(--display);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase}
.answer-headline{margin:0;color:var(--ink);font-family:var(--display);font-size:1.18rem;line-height:1.35;font-weight:600}
.answer-caveats{margin:2px 0 0;padding-left:16px;color:var(--soft);font-size:.82rem;line-height:1.5}
.answer-caveats li+li{margin-top:4px}
.answer-basis{margin:0;color:var(--dim);font-size:.74rem}

/* --- Compact: the school Chromebook -----------------------------------------
   A Dell 3100 is 1366×768, and after the Chrome OS shelf and the browser's own
   chrome that leaves about 657px of page. The desktop layout assumes a monitor:
   .main-stage carries min-height:620px and .homework-zone min-height:410px, so the
   page grew past the window and the alerts zone plus half the homework list sat
   behind the command bar — on the one screen he says matters most, on the one device
   he will actually carry.

   Floating panels fail harder. Three restored tabs overlapped each other and the home
   columns, all of them clipped. Windows that float need somewhere to float.

   Triggered by little vertical room OR a narrow laptop, and guarded with min-width so
   the phone rules above keep their own tier. */
@media (min-width:821px) and (max-height:820px),
       (min-width:821px) and (max-width:1180px){

  /* Fit the window instead of forcing a scroll. dvh so the Chrome OS on-screen
     keyboard does not push the whole layout up when he types in the command bar. */
  /* The fixed chrome was taking 174px of a 657px window for a command bar and a row
     of class chips. Shrinking both gives the content back about 40px, which is the
     difference between "STARTS IN" having a countdown under it and being a label with
     nothing beneath it. Chrome loses room before content does. */
  .command-deck{bottom:70px;height:70px}
  .class-rail{height:70px}
  .main-stage{height:calc(100dvh - 72px);min-height:0;padding-bottom:146px}
  /* minmax(0,...) so a row is allowed to be smaller than its content instead of
     bleeding out of the grid. Without it the first row kept its natural height and
     the overflow went UPWARDS — "Friday · Algebra I" was clipped off the top of the
     screen, which reads as the app being broken rather than as a full column. */
  /* Row one carries where he is going, when, and what to bring — the three things he
     opens this for. It gets the larger share. */
  .home-layout{height:100%;padding-block:12px 6px;gap:6px clamp(20px,3vw,52px);
    grid-template-rows:minmax(0,1.32fr) minmax(0,.78fr)}
  /* stretch, not start. With align-self:start the box takes its CONTENT height and
     simply sits on top of the zone below it — "Changes & alerts" was drawn straight
     through "Starts in 11h 23m". Stretched, the box is exactly the row and
     overflow:hidden actually has something to clip; content still reads from the top,
     so what is lost when space runs out is the last line rather than the heading. */
  .now-zone{align-self:stretch;min-height:0;overflow:hidden}
  .radar-zone{align-self:stretch}

  /* This column is sized for a monitor: a 41px class name and a 39px countdown. On a
     657px window that costs 86px more than the column has, and what falls off the
     bottom is the countdown and the "Bring: Chromebook, Notebook, Pencil" line —
     which is precisely what he opens this screen for. Smaller type that he can read
     beats larger type he cannot see. */
  .now-zone .current-class{padding-block:2px}
  .now-zone .current-class span{font-size:1.72rem;line-height:1.12}
  .now-zone .current-class strong{font-size:1.18rem}
  .now-zone .zone-heading{margin-bottom:7px}
  .now-zone .countdown-row{margin:8px 0;gap:12px}
  .now-zone .countdown-row strong{font-size:1.62rem;line-height:1.1}
  .now-zone .bring-line{margin-bottom:0}

  /* The orb is decoration, and on a short screen it is decoration standing where the
     homework list needs to be. */
  .jarvis-presence{align-self:center}
  .jarvis-presence .orb{width:min(148px,21vh)}
  .jarvis-presence .greeting{margin-bottom:4px;font-size:1.42rem}
  .jarvis-presence .jarvis-thought{display:none}

  /* A long list scrolls inside its own zone. Overflowing the page instead put the
     fourth assignment behind the command bar, where nothing suggested it existed. */
  .home-zone{min-height:0;padding-block:10px}
  .homework-zone{min-height:0;overflow:hidden;display:flex;flex-direction:column}
  .homework-zone .task-list{min-height:0;overflow-y:auto;scrollbar-width:thin}
  .radar-zone{min-height:0;overflow:hidden}
  .radar-zone .alert-ledger,.radar-zone .task-list{min-height:0;overflow-y:auto;scrollbar-width:thin}

  /* Panels fill the stage rather than floating over it. Same reasoning as the phone:
     with this little room a window is not a window, it is a thing covering the thing
     underneath it. */
  /* Top 0, not 72. .main-stage carries perspective:1500px, and a perspective creates
     a containing block for position:fixed — so these insets resolve against the stage,
     which already begins below the top bar, not against the window. Counting the top
     bar again left a 72px dead strip above every panel and shrank it to 367px of a
     439px area. The phone tier does not hit this because it sets perspective:none. */
  .spatial-layer{position:fixed;z-index:95;inset:0 0 146px;pointer-events:none}
  .spatial-tab{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;max-width:none;min-width:0;max-height:none;border-radius:0;resize:none;transform:none!important}
  .tab-shelf{top:0;right:0;bottom:auto;left:0;max-width:none;padding:5px 10px;border-top:0;border-bottom:1px solid rgba(208,244,247,.18);background:rgb(6,11,14)}
  .app.has-shelf .spatial-tab{top:45px!important}

  /* Nothing behind a full-area panel is readable, so anything still showing is a
     fragment leaking through a gap in the chrome. */
  .app.is-work-session .home-scene > .home-layout{visibility:hidden}
  .app.is-work-session .command-deck{background:linear-gradient(180deg,rgba(5,9,11,.97),rgb(5,9,11))}
  .app.is-work-session .class-rail{background:rgb(4,8,10)}
}

/* --- The school day, with the work on it ------------------------------------
   Middle column of Home. This is the view he has instead of a phone between the
   first bell and the last, so it is built to be scanned in about two seconds:
   time on the left as a fixed spine, class next, and anything that costs him
   something called out underneath in a colour that means what it says. */
.timeline-zone{display:flex;flex-direction:column;min-height:0}
.timeline-zone .jarvis-presence{flex:0 0 auto;grid-column:auto;grid-row:auto;margin-bottom:6px}
.timeline-zone .zone-heading{flex:0 0 auto}

/* flex:1 with min-height:0 so the list is the part that scrolls. Without it the zone
   clipped instead and the World History test — the single most important row on the
   screen — was simply not drawn, with nothing to say it existed. */
.day-timeline{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;margin:0;padding:0;overflow-y:auto;list-style:none;scrollbar-width:thin}
.timeline-period{display:grid;grid-template-columns:62px 1fr;align-items:start;gap:10px;padding:7px 4px 7px 0;border-bottom:1px solid rgba(203,236,240,.07);cursor:pointer}
.timeline-period:last-child{border-bottom:0}
.timeline-period:hover,.timeline-period:focus-visible{background:rgba(140,234,242,.05);outline:none}
.timeline-period:focus-visible{box-shadow:inset 2px 0 0 var(--cyan)}
.timeline-period>time{color:var(--dim);font-family:var(--display);font-size:.78rem;font-variant-numeric:tabular-nums;line-height:1.5;white-space:nowrap}
.timeline-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.timeline-body strong{color:var(--soft);font-size:.92rem;font-weight:500;line-height:1.25}
.timeline-body em{color:var(--dim);font-size:.7rem;font-style:normal}
.timeline-marks{display:flex;flex-direction:column;gap:3px;margin-top:3px}
.timeline-mark{overflow:hidden;padding:2px 7px;border-radius:3px;font-size:.72rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
/* A test and an assignment are different kinds of trouble and must not look alike. */
.timeline-mark.is-test{border-left:2px solid var(--amber-soft,#c9a227);background:rgba(201,162,39,.12);color:#f0d98a}
.timeline-mark.is-due{border-left:2px solid var(--cyan-deep,#2b7580);background:rgba(140,234,242,.09);color:var(--soft)}

/* Now, behind, and ahead — legible without reading a single word. */
.timeline-period.is-past{opacity:.42}
.timeline-period.is-current{background:rgba(140,234,242,.07);box-shadow:inset 2px 0 0 var(--cyan)}
.timeline-period.is-current .timeline-body strong,.timeline-period.is-current>time{color:var(--ink)}
.timeline-period.is-next .timeline-body strong{color:var(--ink)}
.timeline-period.is-elsewhere{opacity:.85;border-top:1px dashed rgba(203,236,240,.14)}
.timeline-empty,.test-empty{padding:10px 2px;color:var(--dim);font-size:.82rem;line-height:1.5;list-style:none}
.timeline-gaps{flex:0 0 auto;margin:6px 0 0;color:var(--dim);font-size:.72rem;line-height:1.45}

/* Tests, soonest first. "What test do I have when" in his own words, and the one
   thing on this screen he cannot reconstruct from anywhere else during the day. */
.tests-zone{display:flex;flex-direction:column;min-height:0}
.test-list{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;margin:0;padding:0;overflow-y:auto;list-style:none;scrollbar-width:thin}
.test-row{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid rgba(203,236,240,.07)}
.test-row:last-child{border-bottom:0}
.test-when{color:var(--amber-soft,#c9a227);font-family:var(--display);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase}
.test-row.is-imminent .test-when{color:#f0b429}
.test-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.test-body strong{overflow:hidden;color:var(--soft);font-size:.88rem;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.test-body small{color:var(--dim);font-size:.7rem}

/* Grid placement for the two new zones. Column two is the day; column three splits
   into what is due and what is coming. */
.timeline-zone{grid-column:2;grid-row:1 / 3}
.homework-zone{grid-column:3;grid-row:1;align-self:stretch;min-height:0}
.tests-zone{grid-column:3;grid-row:2;align-self:stretch}

/* The orb keeps its place in the interface and gives up its monopoly on the middle
   column. It was 260px of decoration standing exactly where the school day needed to
   be — and on a Chromebook the school day is the whole reason the screen is open. */
.timeline-zone .jarvis-presence{flex-direction:row;align-items:center;gap:12px;text-align:left;min-height:0}
.timeline-zone .jarvis-presence .orb{width:74px;flex:0 0 auto}
.timeline-zone .jarvis-presence .greeting{margin:0;font-size:1.06rem;line-height:1.25;text-align:left}
.timeline-zone .jarvis-presence .companion-label,
.timeline-zone .jarvis-presence .jarvis-thought{display:none}
.timeline-zone .home-mode{order:3;margin-left:auto}
.timeline-zone .home-mode label{display:none}

/* The middle column holds the school day now, so it stops being the narrowest one.
   It was sized when it held an orb, and an orb does not need to fit six class names,
   two rooms and a test title without wrapping. */
@media (min-width:821px){
  .home-layout{grid-template-columns:minmax(230px,.82fr) minmax(310px,1.18fr) minmax(300px,1.06fr)}
}
@media (min-width:821px) and (max-height:820px),
       (min-width:821px) and (max-width:1180px){
  /* Home mode is a power-user override and costs a whole row of the presence strip.
     It stays available in settings; it does not need to be on the home screen of a
     device where every pixel is spoken for. */
  .timeline-zone .home-mode{display:none}
  .timeline-zone .jarvis-presence .greeting{overflow:hidden;font-size:1rem;text-overflow:ellipsis;white-space:nowrap}
  .timeline-zone .jarvis-presence .orb{width:56px}
  .timeline-zone .jarvis-presence{margin-bottom:2px}
  .timeline-zone .zone-heading{margin-bottom:2px}
  .timeline-period{padding:5px 4px 5px 0}
}

@media (min-width:821px) and (max-height:820px),
       (min-width:821px) and (max-width:1180px){
  /* The bottom rail and the timeline now say the same six things, and the timeline
     says them better — it carries the work as well as the times, and each row opens
     the class. Two copies of the day cost 70px of a 657px window, on the screen that
     replaced his phone. The rail goes; the timeline keeps the current-period
     highlight that was the rail's other job. */
  .class-rail{display:none}
  .command-deck{bottom:0}
  .main-stage{padding-bottom:78px}
  /* .view-scene is absolutely positioned with inset:0 0 184px — the desktop chrome
     height, hardcoded. Shrinking the stage's padding alone changed nothing, because
     the scene never looked at it: the columns stopped 114px short of the command bar
     and the reclaimed space just sat there empty. */
  .view-scene{inset:0 0 78px}
  .spatial-layer{inset:0 0 78px}
  .app.is-work-session .jarvis-presence{bottom:92px}
  .toast{bottom:92px}
}

@media(max-width:820px){
  /* The phone column is ordered explicitly, and the two new zones had no order at
     all — so they defaulted to 0 and jumped ahead of "Where next", which is the
     first thing anyone opens this for. Order is stated for every zone now, so the
     next one added cannot silently land at the top. */
  .now-zone{order:1}
  .timeline-zone{order:2;grid-column:auto;grid-row:auto}
  .homework-zone{order:3;grid-column:auto;grid-row:auto}
  .tests-zone{order:4;grid-column:auto;grid-row:auto}
  .radar-zone{order:5}
  /* On a phone the page scrolls, so these lists do not need their own scrollbars —
     a scroll region inside a scrolling page is a trap for a thumb. */
  .day-timeline,.test-list{overflow:visible;max-height:none}
  .timeline-zone .jarvis-presence{flex-direction:row;gap:12px}
  .timeline-zone .home-mode{display:none}
}

/* --- The thread ---------------------------------------------------------------
   The line on Home is the only channel that works during school hours, so it is
   built to be read without being opened. */
.timeline-zone>.jarvis-says{flex:0 0 auto}
.jarvis-says{display:flex;align-items:flex-start;gap:8px;width:100%;margin:2px 0 6px;padding:8px 10px;border:1px solid rgba(201,162,39,.4);border-left:3px solid var(--amber-soft,#c9a227);border-radius:var(--radius-sm);background:rgba(201,162,39,.09);color:var(--soft);font-size:.8rem;line-height:1.4;text-align:left;cursor:pointer}
.jarvis-says:hover{border-color:var(--amber-soft,#c9a227);background:rgba(201,162,39,.14)}
.says-count{flex:0 0 auto;min-width:19px;height:19px;border-radius:10px;background:var(--amber-soft,#c9a227);color:#0b0f12;font-family:var(--display);font-size:.7rem;font-weight:600;line-height:19px;text-align:center}
.says-body{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}

.thread{display:flex;flex-direction:column;min-height:0;height:100%;gap:10px}
.thread-list{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;min-height:0;margin:0;padding:0 2px;overflow-y:auto;list-style:none;scrollbar-width:thin}
.thread-line{display:flex;flex-direction:column;gap:3px;max-width:88%}
.thread-line.is-you{align-self:flex-end;align-items:flex-end}
.thread-bubble{padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(9,17,22,.6)}
.thread-line.is-you .thread-bubble{border-color:var(--line-strong);background:rgba(140,234,242,.07)}
.thread-line.is-unread .thread-bubble{border-left:3px solid var(--amber-soft,#c9a227)}
.thread-bubble p{margin:0;color:var(--ink);font-size:.88rem;line-height:1.5}
/* The reason travels with the words. A message with no basis is an opinion. */
.thread-basis{display:block;margin-top:5px;color:var(--dim);font-size:.72rem;line-height:1.4}
.thread-when{color:var(--dim);font-family:var(--display);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase}
.thread-empty{padding:14px 2px;color:var(--dim);font-size:.85rem;line-height:1.5;list-style:none}
.thread-compose{flex:0 0 auto;display:flex;gap:8px}
.thread-compose input{flex:1 1 auto;min-width:0;padding:9px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:rgba(6,11,14,.8);color:var(--ink);font-size:.88rem}

/* Paste-your-schedule, inside setup. */
.onboarding-paste{margin-bottom:14px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:rgba(140,234,242,.04)}
.onboarding-paste summary{color:var(--ink);font-family:var(--display);font-size:.92rem;cursor:pointer}
.onboarding-paste p{margin:8px 0 9px;color:var(--soft);font-size:.82rem;line-height:1.5}
.onboarding-paste textarea{width:100%;padding:9px 11px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:rgba(6,11,14,.75);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;line-height:1.5;resize:vertical}
.onboarding-paste-actions{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}

/* Text-message setup, inside the notifications panel. */
.sms-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:10px 0}
.sms-fields label{display:flex;flex-direction:column;gap:4px}
.sms-fields span{color:var(--dim);font-family:var(--display);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.sms-fields input,.sms-fields select{padding:8px 10px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:rgba(6,11,14,.8);color:var(--ink);font-size:.86rem}

/* --- School email ---------------------------------------------------------
   The digest is a decision surface, not a reading surface: he is choosing which
   of three or four things become real work, and the original text is one click
   away rather than filling the panel. */
.mail-panel .mail-setup{border:1px solid var(--line,rgba(255,255,255,.14));border-radius:10px;padding:.6rem .8rem;margin:.6rem 0}
.mail-panel .mail-setup summary{cursor:pointer;font-weight:600;letter-spacing:.02em}
.mail-panel h3{margin:1rem 0 .35rem;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.mail-panel .mail-why{margin:0 0 .35rem;font-size:.85rem;opacity:.85}
.mail-panel .mail-why strong{text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;opacity:.9}
.mail-panel .mail-from{margin:.3rem 0 0;font-size:.78rem;opacity:.65}
.mail-panel .mail-original{margin-top:.4rem}
.mail-panel .mail-original summary{cursor:pointer;font-size:.8rem;opacity:.7}
.mail-panel .mail-original pre{white-space:pre-wrap;word-break:break-word;font-size:.8rem;line-height:1.45;max-height:14rem;overflow:auto;margin:.4rem 0 0;padding:.5rem .6rem;border-radius:8px;background:rgba(0,0,0,.25)}
.mail-panel .mail-notes{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.4rem}
.mail-panel .mail-notes li{display:grid;gap:.15rem;padding:.5rem .6rem;border-radius:8px;background:rgba(255,255,255,.04)}
.mail-panel .mail-notes span{font-size:.8rem;opacity:.7}
.mail-panel .batch-row.is-saved{opacity:.55}