/*
 * île — Observatory Design System
 * WP-01 FIX ROUND — direct port of the original accepted prototype
 * `index (3)(1).html` as the golden visual/interaction source.
 *
 * SOURCE-OF-TRUTH ORDER:
 *   1. Accepted D33-P2 / Akib corrections — explicit semantic changes
 *   2. Original prototype — visual appearance, geometry, timing, motion
 *   3. Dependency work packages — when functionality becomes real
 *
 * Values below are copied verbatim from the prototype's <style> block
 * wherever a rule survives into production. Deviations are limited to
 * the authorized-difference list in verify_wp01_frontend.js §PROTOTYPE-FIDELITY.
 *
 * Removed from the prototype (obsolete / not authorized):
 *   .step-wrap / .step-item / .step-sep / .step-dot   (obsolete Session Arc bar)
 *   .tm-option.experiment / .tm-create-*  / .tm-premium (Experiment, Create your own, Premium)
 *   .draft-panel / .draft-inner / .draft-lbl / .draft-suggestion / .draft-use (duplicates Companion "Help me reply")
 */

/* ─── Google Fonts (prototype: Spectral 200/300/400 + DM Sans 200/300/400/500) ── */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;1,200;1,300;1,400&family=DM+Sans:wght@200;300;400;500&display=swap');

/* ─── Reset (prototype exact) ───────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
textarea{-webkit-appearance:none;appearance:none;outline:none !important;border:none !important;box-shadow:none !important;resize:none}
/* FIX 1 (WP-01 FINAL): the prototype's blanket `*:focus{outline:none !important}`
   suppressed the keyboard focus ring even where :focus-visible later tried to
   restore it — !important on the unconditional rule always won. Narrowed here
   to apply only when focus is NOT visibly keyboard-driven, so pointer-focus
   keeps the prototype's normal (no-outline) look and keyboard focus reliably
   gets the accessibility outline below. No other component styling changed. */
*:focus:not(:focus-visible){outline:none;box-shadow:none}
/* ATMOSPHERE CORRECTION — FIX 4: the app/html/body foundation still carried
   the older brown #232220 base while the Classroom stage had already moved
   to deep graphite #0F0F0E, so the two visually disagreed. Unified around
   the same warm-black family (not pure #000); the topbar gets its own
   slightly lighter graphite below so it stays visually distinct from both
   the app shell and the Classroom stage, not indistinguishable from either. */
html,body{width:100%;height:100%;overflow:hidden;background:#0F0F0E;font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* Accessibility: focus-visible ring — now reliably wins the cascade (see FIX 1 above) */
*:focus-visible{
  outline:2px solid #EAE0C4;
  outline-offset:2px;
  border-radius:3px;
}

/* Skip nav — off-screen until focused; does not alter normal-state appearance */
.skip-nav{
  position:fixed;top:-100%;left:16px;z-index:200;
  padding:8px 16px;background:#141311;color:#EAE0C4;
  border:1px solid rgba(234,224,196,.35);border-radius:4px;
  font-family:'DM Sans',sans-serif;font-size:12px;text-decoration:none;
  transition:top .15s;
}
.skip-nav:focus{top:16px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ─── APP SHELL (prototype exact) ───────────────────────────────────────────── */
/* ATMOSPHERE CORRECTION — FIX 4: matches the unified deep-graphite html/body
   foundation above. */
.app{position:fixed;inset:0;background:#0F0F0E;display:flex;flex-direction:column}

/* ─── TOP BAR (prototype exact) ─────────────────────────────────────────────── */
/* ATMOSPHERE CORRECTION — FIX 4: topbar is now a hair lighter than the
   #0F0F0E app/Classroom foundation — a small solid lift (not a translucent
   layer, so the tab-strip fade gradient below can match it exactly) —
   keeping the required hierarchy: app/body = deep graphite, topbar =
   slightly elevated graphite, Classroom = deep graphite again. */
.topbar{
  position:relative;z-index:100;
  min-height:44px;flex-shrink:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:0 20px;
  background:#141311;
  border-bottom:0.5px solid rgba(255,255,255,.055)
}
/* FIX 5 (WP-01 FINAL): topbar-left must be able to shrink below its content's
   intrinsic width so the tab strip scrolls internally on narrow screens
   instead of the whole topbar overflowing the viewport. Tab appearance itself
   is untouched. */
.topbar-left{display:flex;align-items:center;gap:20px;flex:1 1 auto;min-width:0}
/* D-11: keeps a one-line topbar exactly 44px now that .topbar is min-height (the 0.5px bottom border is included in the 44px; verified by verify_d11_topbar_layout) */
.topbar > .topbar-left{min-height:43px}

/* ── île animated logo (prototype exact) ── */
.logo{
  display:flex;align-items:center;
  position:relative;flex-shrink:0;
  gap:7px
}

.logo-cursor{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  opacity:0;
  animation:logoCursorIn .4s ease .1s forwards
}
.logo-cursor-dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(234,224,196,.85);
  box-shadow:0 0 8px rgba(234,224,196,.45);
  animation:logoAccentPulse 4s ease-in-out 1.2s infinite
}
.logo-cursor-bar{
  width:1.5px;height:0;
  background:linear-gradient(to bottom,rgba(234,224,196,.7),rgba(234,224,196,.0));
  animation:logoCursorBarGrow .45s cubic-bezier(.22,1,.36,1) .45s forwards
}

.logo-word{
  display:flex;align-items:baseline;gap:0;
  position:relative
}
.logo-i,.logo-l,.logo-e{
  font-family:'Spectral',serif;font-weight:200;font-style:italic;
  font-size:17px;line-height:1;
  color:rgba(234,224,196,.0);
  display:inline-block;
}
/* VISUAL POLISH ROUND — Section 7: no custom accent element anymore — the
   circumflex is part of the real "î" glyph in .logo-i's own text content
   (see index.html). .logo-i needs no special positioning role any more. */
.logo-i{ animation:logoLetterIn .8s cubic-bezier(.22,1,.36,1) .65s forwards }
.logo-l{ animation:logoLetterIn .8s cubic-bezier(.22,1,.36,1) .8s forwards }
.logo-e{ animation:logoLetterIn .8s cubic-bezier(.22,1,.36,1) .93s forwards }

@keyframes logoCursorIn{0%{opacity:0}100%{opacity:1}}
@keyframes logoCursorBarGrow{0%{height:0}100%{height:15px}}
@keyframes logoLetterIn{
  0%{color:rgba(234,224,196,.0);transform:translateX(-4px)}
  100%{color:rgba(234,224,196,.88);transform:translateX(0)}
}
/* logoAccentPulse: still used by .logo-cursor-dot's own restrained glow
   below — retained for that, even though the old SVG accent that also used
   it is gone. */
@keyframes logoAccentPulse{
  0%,100%{opacity:.88;filter:drop-shadow(0 0 0px rgba(234,224,196,.0))}
  50%{opacity:1;filter:drop-shadow(0 0 3px rgba(234,224,196,.5))}
}

/* ── Nav tabs — prototype visual restored (Patch 2) ──
   Rendered as <button class="tab"> for ARIA/keyboard reasons;
   CSS below is the prototype's .tab rule verbatim so the reset
   removes default button chrome and the result is visually identical. */
.tabs{display:flex;align-items:center;gap:2px}
.tab{
  font-family:'DM Sans',sans-serif;font-size:10px;font-weight:400;
  letter-spacing:.07em;text-transform:uppercase;
  /* READABILITY ROUND: resting color raised .28→.44 (Section 3 "inactive
     tabs too dim"). ATMOSPHERE CORRECTION — FIX 5: one further modest pass,
     .44→.5 — active tab (.82) stays clearly dominant; geometry, uppercase
     treatment, spacing and rounded-active styling untouched. */
  color:rgba(230,226,220,.5);
  padding:4px 10px;border-radius:6px;cursor:pointer;
  transition:color .2s,background .2s;white-space:nowrap;
  background:none;border:none;
  min-height:28px;
}
.tab:hover{color:rgba(230,226,220,.65);background:rgba(255,255,255,.04)}
.tab.active,
.tab[aria-selected="true"]{color:rgba(234,224,196,.82);background:rgba(234,224,196,.10)}

/* Tab strip: flex:1 1 auto + min-width:0 lets it shrink inside .topbar-left (FIX 5). */
.tabs-wrapper{ min-width:0; flex:1 1 auto; overflow:hidden; position:relative; }

/* Topbar right (prototype exact) — flex-shrink:0 so Account/session-mode never
   get squeezed as the tab strip shrinks (FIX 5) */
/* D-11: flex-wrap on .topbar lets the right group drop to its own right-aligned line when a long server-driven status
   ("… a suggestion is waiting for your response") cannot share the row with the tab strip; with normal text it never wraps. */
.topbar-right{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:auto;padding:4px 0}
.session-mode{
  display:flex;align-items:center;gap:5px;
  font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(234,224,196,.38)
}
.mode-dot{width:5px;height:5px;border-radius:50%;background:rgba(234,224,196,.5);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}

/* FIX 2 (WP-01 FINAL): WP-01 has no authoritative active Classroom session,
   so the UI must not visually assert a session mode ("Active learning",
   "Active"/"Side talk" selection). CSS/geometry for these elements is fully
   preserved for WP-05 (Classroom/WWA real state) and WP-06 (Side Talk
   lifecycle) to un-hide once they supply real state — nothing here is
   deleted, only not rendered yet. */
.state-pending{ display:none; }

/* Account control — accepted production addition, integrated quietly (Patch 4) */
.account-btn{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:rgba(234,224,196,.04);
  border:0.5px solid rgba(234,224,196,.10);
  color:rgba(230,226,220,.35);
  font-family:'DM Sans',sans-serif;font-size:9px;font-weight:500;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.account-btn:hover{
  background:rgba(234,224,196,.08);
  border-color:rgba(234,224,196,.22);
  color:rgba(234,224,196,.75);
}

/* D-11 (layout only, Akib 2026-10-05): below 768px the single 44px row could not hold logo + six tabs + the
   session-mode text + Account. The tab strip was squeezed to whatever was left (162px at 390, 92px at 320), so
   "Curriculum" was cut mid-word right against "Active learning". The topbar now regroups as a grid:
     row 1:  logo | session-mode (wraps, right-aligned)
     row 2:  the tab strip (wraps onto further lines if needed) | Account
   Account stays AFTER the tabs, matching the DOM/tab order (logo, tabs, Account).
   .topbar-left / .topbar-right become display:contents so their children place into that one grid (they carry no
   role or name; the banner role stays on .topbar and the tabs keep their own nav). Nothing is hidden, clipped or
   scrolled; tab order is unchanged (logo, tabs, Account). ≥768px is untouched. */
@media (max-width:767px){
  .topbar{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:14px;
    padding:0 16px
  }
  .topbar-left,.topbar-right{display:contents}
  .logo{grid-row:1;grid-column:1;min-height:44px}
  .session-mode{grid-row:1;grid-column:2 / -1;justify-self:end;text-align:right;min-width:0;padding:4px 0}
  .account-btn{grid-row:2;grid-column:3;align-self:start;margin:2px 0 0 10px}
  .tabs-wrapper{grid-row:2;grid-column:1 / 3;padding:2px 2px 8px;
    /* FIX 5's horizontal scroll is kept only as a safety net (e.g. very large text); with wrapping nothing overflows */
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
  .tabs-wrapper::-webkit-scrollbar{display:none}
  /* Phone navigation (UI campaign, Akib 2026-10-10): the tab strip is ONE row that scrolls sideways, so adding tabs never
     makes the topbar taller. The right edge fades to show there is more; the trailing padding lets the last tab scroll
     clear of that fade. app.js scrolls the open tab into view. */
  .tabs-wrapper{overflow-y:hidden;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .tabs{flex-wrap:nowrap;width:max-content;min-width:100%;padding-right:32px}
  .tab{flex-shrink:0;min-height:34px}
}

/* ── STAGE (prototype exact) ── */
main{ position:relative; flex:1; overflow:hidden; }
.surface-panel{ position:absolute; inset:0; display:none; }
.surface-panel.active{ display:block; }

/* VISUAL POLISH ROUND — Section 1: deep graphite/near-black foundation
   (Akib's rendered-review preference), warm atmosphere layered subtly above
   it via the orbs below. Not pure #000 — a warm near-black. Immersion's own
   warmer register (.stage--immersion) is untouched (a separate, previously
   accepted surface variant, not the Classroom foundation this section names). */
.stage{position:relative;width:100%;height:100%;overflow:hidden;background:#0F0F0E}

.g{position:absolute;inset:0;pointer-events:none}
/* VISUAL POLISH ROUND — Section 2: the prior solid-color + blur(90px) orbs
   left a visible circular/elliptical shadow boundary, especially against
   the deeper #0F0F0E foundation (higher contrast makes the blur falloff
   ring more visible, not less). Fix: each orb's own color now decays to
   fully transparent by ~68-70% of its radius via radial-gradient (so there
   is no hard-edged disc for the blur to leave a ring around), peak alpha
   lowered substantially, and blur increased .90px→150px. Geometry (size,
   position) and the slow ambient d1/d2 drift animations are unchanged —
   same ambient-orb concept, just genuinely soft instead of visibly circular. */
/* ATMOSPHERE CORRECTION — FIX 2: even soft-falloff o1/o2 still traced a
   visible disc edge in Akib's resting screenshots. Root cause: too much of
   each shape's own radius sat inside the viewport. Pushed further off-
   screen (o1/o2 corner offsets roughly doubled — most of each shape now
   sits outside the visible stage), peak alpha lowered again, blur widened
   150px→190px so what remains reads as ambient warmth, not a traceable
   circular edge. Size and the slow d1/d2 drift animations are unchanged. */
.orb{position:absolute;border-radius:50%;filter:blur(190px);transition:all 1.4s ease}
.o1{width:500px;height:500px;top:-220px;right:-220px;background:radial-gradient(circle, rgba(160,138,90,.055) 0%, rgba(160,138,90,0) 68%);animation:d1 20s ease-in-out infinite alternate}
.o2{width:400px;height:400px;bottom:-200px;left:-180px;background:radial-gradient(circle, rgba(140,118,80,.045) 0%, rgba(140,118,80,0) 68%);animation:d2 26s ease-in-out infinite alternate}
/* ATMOSPHERE CORRECTION — FIX 1: .o3 no longer renders in Classroom (see
   index.html's Classroom .g block) — the central ellipse it produced was
   identifiable as an oval against the deep graphite foundation even at
   low alpha. The rule itself is left defined and unchanged for the other
   surfaces (Curriculum/Taskboard/Explore/Immersion) that still reuse it
   structurally, per FIX 1's explicit allowance. */
.o3{width:600px;height:400px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse, rgba(180,160,110,.075) 0%, rgba(180,160,110,0) 65%);filter:blur(160px);pointer-events:none}
@keyframes d1{to{transform:translate(16px,10px)}}
@keyframes d2{to{transform:translate(-12px,-16px)}}

/* Notebook: ground still — accepted surface register (design record Dimension 8) */
.stage--notebook .orb{ animation:none !important; }
/* Immersion: slightly warmer ground — accepted surface register */
.stage--immersion{ background:#2d2820; }

/* ── TEACHING STYLE OBJECT (prototype exact geometry; FIX 3 — WP-01 FINAL) ──
   The prototype's top-centre object opened a panel of three teaching-style
   options on hover. That panel is neither the final accepted Teaching Style
   UI nor WP-16's real implementation (six styles, twenty shapes, six dials),
   so WP-01 must not reveal it — showing a partial feature would be worse
   than showing none. What's preserved: the object's position, dimensions,
   materials, and "wake" character (it still visibly brightens on hover,
   exactly like every other orbital object in the Observatory system) — it
   just never opens anything. The .tm-panel/.tm-option rules below stay
   defined, dormant and unused by WP-01, so WP-16 can reuse the exact
   prototype geometry/materials when it implements the real picker. */
.state-lbl{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  z-index:20;pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;
}
.tm-pill{
  display:flex;align-items:center;gap:7px;
  padding:5px 14px 5px 11px;border-radius:20px;
  border:0.5px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  cursor:default;white-space:nowrap;
  transition:border-color .45s cubic-bezier(.34,1.1,.64,1),background .45s,box-shadow .45s,transform .45s cubic-bezier(.34,1.1,.64,1);
}
/* Wake-on-hover only — same values the prototype used for its open state,
   now triggered by pure :hover instead of a panel-open state, since no
   panel opens in WP-01. */
.tm-pill:hover,
.tm-pill:focus-visible{
  border-color:rgba(234,224,196,.22);background:rgba(234,224,196,.05);
  box-shadow:0 0 28px rgba(234,224,196,.1);transform:scale(1.06);
}
.tm-pill-dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(234,224,196,.28);flex-shrink:0;transition:background .4s;
}
.tm-pill-dot.streaming{animation:pulse 1.5s ease-in-out infinite}
.tm-pill:hover .tm-pill-dot,
.tm-pill:focus-visible .tm-pill-dot{background:rgba(234,224,196,.75)}
.tm-pill-label{
  font-family:'DM Sans',sans-serif;font-size:8px;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(230,226,220,.25);transition:color .4s;
}
.tm-pill:hover .tm-pill-label,
.tm-pill:focus-visible .tm-pill-label{color:rgba(234,224,196,.9)}
.tm-pill-chevron{
  font-size:7px;color:rgba(230,226,220,.14);margin-left:1px;line-height:1;
  transition:transform .45s cubic-bezier(.34,1.1,.64,1),color .4s;
}
/* Dormant — kept for WP-16; never toggled visible in WP-01 (no .tm-open class is ever applied) */
.tm-panel{
  position:absolute;top:calc(100% + 10px);
  width:280px;
  background:rgba(22,21,18,.98);
  border:0.5px solid rgba(234,224,196,.1);
  border-radius:12px;
  backdrop-filter:blur(32px);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  overflow:hidden;
  opacity:0;transform:translateY(-12px) scale(.95);
  pointer-events:none;
  transition:opacity .4s cubic-bezier(.34,1.1,.64,1),transform .4s cubic-bezier(.34,1.1,.64,1);
}
.state-lbl.tm-open .tm-panel{
  opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
}
.tm-panel-head{
  padding:14px 18px 10px;
  font-family:'DM Sans',sans-serif;font-size:7px;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(234,224,196,.22);
  border-bottom:0.5px solid rgba(255,255,255,.05);
}
/* Options are display-only in WP-01 (Teaching Style is not functional until WP-16) */
.tm-option{
  display:flex;align-items:center;gap:13px;
  padding:13px 18px;
  border-bottom:0.5px solid rgba(255,255,255,.04);
  position:relative;cursor:default;
}
.tm-option:last-of-type{border-bottom:none}
.tm-option.active{background:rgba(234,224,196,.06)}
.tm-option.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:1.5px;background:rgba(234,224,196,.45);border-radius:1px;
}
.tm-opt-dot{
  width:5px;height:5px;border-radius:50%;flex-shrink:0;
  border:0.5px solid rgba(255,255,255,.12);background:transparent;
}
.tm-option.active .tm-opt-dot{
  background:rgba(234,224,196,.6);border-color:rgba(234,224,196,.6);
  box-shadow:0 0 8px rgba(234,224,196,.25);
}
.tm-opt-text{flex:1}
.tm-opt-name{
  font-family:'DM Sans',sans-serif;font-size:12px;
  color:rgba(230,226,220,.4);margin-bottom:2px;
}
.tm-option.active .tm-opt-name{color:rgba(234,224,196,.95)}
.tm-opt-desc{
  font-family:'Spectral',serif;font-weight:300;font-style:italic;
  font-size:11px;color:rgba(230,226,220,.18);line-height:1.45;
}
.tm-option.active .tm-opt-desc{color:rgba(234,224,196,.36)}

/* ── WP-16: Teaching Style panel — same materials as the dormant prototype .tm-panel above.
      Only additions: interactive affordance, scrolling for the progressive-disclosure
      sections, and section/dial rows in the existing type + colour language. The pill's
      geometry, typography and wake are unchanged. ─────────────────────────────────── */
.tm-pill.tm-pill--live{cursor:pointer}
.tm-panel--live{max-height:min(72vh,540px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.tm-panel--live::-webkit-scrollbar{display:none}
.tm-panel--live .tm-option{width:100%;border:0;border-bottom:0.5px solid rgba(255,255,255,.04);background:transparent;text-align:left;font:inherit;cursor:pointer}
.tm-panel--live .tm-option:hover{background:rgba(234,224,196,.03)}
.tm-panel--live .tm-opt-text{display:block}
.tm-panel--live .tm-opt-name,.tm-panel--live .tm-opt-desc{display:block}
.tm-panel--live .tm-off{cursor:default;opacity:.45}
.tm-panel--live .tm-option.tm-off:hover{background:transparent}
.tm-sec-head{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:11px 18px;border:0;border-top:0.5px solid rgba(255,255,255,.05);background:transparent;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:7px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(234,224,196,.32);transition:color .3s;
}
.tm-sec-head:hover,.tm-sec-head:focus-visible{color:rgba(234,224,196,.75)}
.tm-sec-chev{font-size:7px}
.tm-shapes{display:flex;flex-wrap:wrap;gap:6px;padding:4px 18px 14px}
.tm-shape{
  border:0.5px solid rgba(255,255,255,.08);background:transparent;border-radius:14px;padding:5px 10px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:11px;color:rgba(230,226,220,.4);transition:color .3s,border-color .3s,background .3s;
}
.tm-shape:hover:not(.tm-off){color:rgba(234,224,196,.8);border-color:rgba(234,224,196,.22)}
.tm-shape.active{color:rgba(234,224,196,.95);border-color:rgba(234,224,196,.45);background:rgba(234,224,196,.06)}
.tm-dials{padding:4px 18px 14px;display:flex;flex-direction:column;gap:12px}
.tm-dial-label{font-family:'DM Sans',sans-serif;font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:rgba(234,224,196,.28);margin-bottom:5px}
.tm-seg{display:flex;gap:4px}
.tm-seg-opt{
  flex:1;border:0.5px solid rgba(255,255,255,.08);background:transparent;border-radius:10px;padding:5px 4px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:10px;color:rgba(230,226,220,.38);transition:color .3s,border-color .3s,background .3s;
}
.tm-seg-opt:hover:not(.tm-off){color:rgba(234,224,196,.8);border-color:rgba(234,224,196,.22)}
.tm-seg-opt.active{color:rgba(234,224,196,.95);border-color:rgba(234,224,196,.45);background:rgba(234,224,196,.06)}
.tm-note{
  padding:10px 18px 14px;border-top:0.5px solid rgba(255,255,255,.05);
  font-family:'Spectral',serif;font-weight:300;font-style:italic;font-size:11px;line-height:1.45;color:rgba(234,224,196,.4);
}

/* ── TEACHING FIELD (prototype exact) ── */
.teaching{
  position:absolute;
  left:0;right:152px;      /* left sidebar removed: the conversation takes its space */
  top:0;bottom:0;
  display:flex;flex-direction:column;
  transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.1,.64,1),filter .5s ease
}
/* VISUAL POLISH ROUND — Section 3: the previous radial-gradient mask made
   this plane read as a large visible ellipse rather than disappearing
   behind the content. Fix: no mask at all — a plain, modestly-rounded
   rectangle at low opacity. Still a generated ::before (paints behind
   .convo/.bwrap automatically, no z-index/markup change), still translucent
   charcoal (not solid black), still blurred for separation — but with no
   border and no box-shadow, and a much smaller border-radius than before,
   it reads as "this is the learning focus," not a dashboard card or a
   circle. Fades/scales with .teaching's existing compose/drift/hover
   states for free, since it is one of that element's own descendants. */
.teaching::before{
  content:'';
  position:absolute;
  left:8px;right:8px;top:4px;bottom:4px;
  background:rgba(10,10,9,.22);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:18px;
  pointer-events:none;
}
.teaching.compose{opacity:.75;transform:scale(.992)}
.teaching.drift{opacity:.5;transform:scale(.975) translateY(5px)}
.teaching.right-hover{
  opacity:.45;
  transform:scale(.97) translateX(-18px);
  filter:blur(0.6px)
}

/* ── CONVERSATION (prototype exact typography) ── */
.convo{
  position:absolute;left:0;right:0;
  top:20px;bottom:88px;
  display:flex;flex-direction:column;gap:20px;
  overflow-y:auto;
  padding:32px 32px 16px 32px;
  mask-image:linear-gradient(to bottom, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);
  transition:opacity .6s ease,transform .6s ease,bottom .55s cubic-bezier(.34,1.1,.64,1);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent
}
.convo::-webkit-scrollbar{width:2px}
.convo::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:1px}

.ap{font-family:'Spectral',serif;font-weight:300;line-height:1.95}
.ap.distant{font-size:14px;color:rgba(230,226,220,.32)}
.ap.old{font-size:15px;color:rgba(230,226,220,.82)}
.ap.now{font-size:18px;color:rgba(240,236,230,.97)}

/* Block-to-Visible-Text Segment Mapping: .ap-segment inherits .ap's font/
   color/size entirely via inheritance (font-family/weight/line-height and
   color are all inheritable) — this rule only resets the default <p> UA
   margin to the same visual rhythm a blank-line-separated plain-text
   response already had. No new visual language; segments render inside
   the same .ap element as before. Absent mapping: unchanged single-node
   textContent render, no .ap-segment involved at all. */
.ap-segment{margin:0 0 .85em 0}
.ap-segment:last-child{margin-bottom:0}

/* Permitted teaching-text markup (AICOMM-01 §4.2 subset: bold, bullet and
   numbered lists). Same Spectral face and colour as the surrounding .ap;
   bold uses the already-loaded 400 weight (no synthesized bold, no new font
   request). Spacing reuses the .ap-segment rhythm. */
.ap strong{font-weight:400}
.ap-para{margin:0 0 .85em 0}
.ap-para:last-child{margin-bottom:0}
.ap-list{margin:0 0 .85em 0;padding-left:1.3em}
.ap-list:last-child{margin-bottom:0}
.ap-list li{margin:0 0 .35em 0}
.ap-list li:last-child{margin-bottom:0}

.at{font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.at.distant{color:rgba(230,226,220,.14)}
.at.old{color:rgba(230,226,220,.32)}
.at.now{color:rgba(230,226,220,.42)}

.cur{display:inline-block;width:1.5px;height:.85em;background:#EAE0C4;vertical-align:middle;margin-left:1px;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.lr{
  font-family:'Spectral',serif;font-weight:300;font-style:italic;
  font-size:15px;line-height:1.85;color:rgba(230,226,220,.62);
  padding-left:14px;border-left:1px solid rgba(234,224,196,.22)
}

/* Neutral shell prose — WP-01 has no session, no fake AI turn.
   READABILITY ROUND: color raised .34→.42 (Section 3 "empty Classroom
   copy") — still clearly quieter than real teaching content (.ap.now is
   .97); this value is not to be reused for actual current île messages. */
.shell-prose{
  font-family:'Spectral',serif;font-weight:300;font-style:italic;
  font-size:18px;line-height:1.95;color:rgba(230,226,220,.42);
  text-align:center;margin:auto;max-width:420px;
}

/* ── BUBBLE COMPOSER (prototype exact) ── */
.bwrap{
  position:absolute;left:0;right:0;
  bottom:0;height:80px;
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:18px;
  z-index:30
}

.bubble{
  position:relative;
  width:220px;
  background:rgba(255,255,255,.042);
  border:0.5px solid rgba(255,255,255,.1);
  border-radius:40px;
  cursor:text;overflow:hidden;
  backdrop-filter:blur(24px);
  transition:
    width .58s cubic-bezier(.34,1.1,.64,1),
    border-radius .58s cubic-bezier(.34,1.1,.64,1),
    background .4s ease,
    border-color .4s ease,
    box-shadow .4s ease
}
.bubble.open{
  width:100%;border-radius:22px;
  background:rgba(255,255,255,.052);
  border-color:rgba(234,224,196,.16);
  box-shadow:0 0 0 3px rgba(234,224,196,.04),0 8px 40px rgba(0,0,0,.25);
  overflow:visible;cursor:default
}

.b-rest{
  display:flex;align-items:center;justify-content:center;
  padding:10px 20px;gap:8px;
  transition:opacity .25s ease
}
.b-rest.hidden{opacity:0;pointer-events:none;height:0;padding:0;overflow:hidden}
.b-dot{width:4px;height:4px;border-radius:50%;background:rgba(234,224,196,.28);animation:dp 3.5s ease-in-out infinite}
.b-dot:last-child{animation-delay:.6s}
@keyframes dp{0%,100%{opacity:.28}50%{opacity:.65}}
/* READABILITY ROUND: resting hint color raised .38→.50 (Section 3
   "composer" — the resting invite is a primary interaction and should be
   immediately discoverable without reading as an active notification). */
.b-hint{font-family:'DM Sans',sans-serif;font-size:11px;color:rgba(230,226,220,.50);white-space:nowrap}

.acc{
  position:absolute;bottom:calc(100% + 10px);left:14px;
  display:flex;gap:2px;flex-wrap:wrap;max-width:250px;
  background:rgba(26,25,23,.97);
  border:0.5px solid rgba(234,224,196,.14);
  border-radius:10px;padding:6px 8px;
  backdrop-filter:blur(24px);
  opacity:0;pointer-events:none;
  transition:opacity .18s;z-index:40;
  box-shadow:0 6px 28px rgba(0,0,0,.5)
}
.acc.show{opacity:1;pointer-events:all}
.ac{
  font-family:'Spectral',serif;font-weight:300;font-size:14px;
  color:rgba(234,224,196,.7);padding:3px 7px;border-radius:6px;
  cursor:pointer;transition:all .12s;min-width:26px;text-align:center;
  -webkit-user-select:none;user-select:none
}
.ac:hover{background:rgba(234,224,196,.12);color:rgba(234,224,196,1)}

.b-open{opacity:0;pointer-events:none;height:0;overflow:hidden;transition:opacity .28s ease}
.b-open.show{opacity:1;pointer-events:all;height:auto;overflow:visible}

.b-ta{
  display:block;width:100%;
  background:transparent !important;
  border:none !important;outline:none !important;
  box-shadow:none !important;-webkit-box-shadow:none !important;
  resize:none !important;
  font-family:'Spectral',serif;font-weight:300;
  font-size:15px;line-height:2;
  color:#E6E2DC;-webkit-text-fill-color:#E6E2DC;
  caret-color:rgba(234,224,196,.9);
  padding:4px 16px 8px;
  min-height:34px;max-height:140px;overflow-y:auto
}
.b-ta::placeholder{color:rgba(230,226,220,.22) !important;font-style:italic;-webkit-text-fill-color:rgba(230,226,220,.22)}
.b-ta::-webkit-scrollbar{width:2px}
.b-ta::-webkit-scrollbar-thumb{background:rgba(234,224,196,.1);border-radius:1px}

.b-sep{height:0.5px;background:rgba(255,255,255,.055);margin:0 14px}
.b-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;padding:8px 14px 12px}
.b-tools{display:flex;gap:4px;flex-wrap:wrap}

.btool{
  font-family:'DM Sans',sans-serif;font-size:10px;
  padding:3px 10px;border-radius:20px;
  background:rgba(255,255,255,.03);
  border:0.5px solid rgba(255,255,255,.06);
  color:rgba(230,226,220,.32);cursor:pointer;
  transition:all .25s cubic-bezier(.34,1.2,.64,1);white-space:nowrap;
  -webkit-user-select:none;user-select:none
}
.btool:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:rgba(230,226,220,.7);transform:translateY(-1px)}
.btool.on{background:rgba(234,224,196,.08);border-color:rgba(234,224,196,.22);color:rgba(234,224,196,.82)}

.b-right{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px 10px}
.b-char{font-family:'DM Sans',sans-serif;font-size:9px;color:rgba(230,226,220,.18);min-width:20px;text-align:right;transition:color .2s}
.b-char.has{color:rgba(230,226,220,.3)}
.b-send{
  font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;
  padding:5px 16px;border-radius:20px;cursor:pointer;
  background:rgba(234,224,196,.05);
  border:0.5px solid rgba(234,224,196,.1);
  color:rgba(234,224,196,.3);
  transition:all .3s;-webkit-user-select:none;user-select:none
}
.b-send.ready{background:rgba(234,224,196,.1);border-color:rgba(234,224,196,.28);color:rgba(234,224,196,.78)}
.b-send.ready:hover{background:rgba(234,224,196,.17);border-color:rgba(234,224,196,.45);color:rgba(234,224,196,1);transform:translateY(-1px);box-shadow:0 4px 14px rgba(234,224,196,.07)}

/* ── RIGHT PANEL — WHERE WE ARE + LEARNING TOOLS ── */
/* VISUAL POLISH ROUND — Sections 4 & 5: width is
   a constant 152px (matches .teaching{right:152px}, so no collision);
   opacity is permanently 1 (no parent-opacity multiplication); the only
   wake motion left is the small translateX approach. */
.right-col{
  position:absolute;right:0;top:0;bottom:0;
  width:152px;
  display:flex;flex-direction:column;
  padding:22px 0 0;
  z-index:20;
  opacity:1;transform:translateX(4px);
  transition:transform .45s cubic-bezier(.34,1.1,.64,1)
}
.right-col.panel-open{
  transform:translateX(0);
}

.wwa-zone{ position:relative; flex-shrink:0 }
.w-inner{ display:flex;flex-direction:column;gap:2px;width:100% }

/* ATMOSPHERE CORRECTION — FIX 5: resting label color raised .65→.72, a
   modest step (Secondary tier), still well below Primary teaching content. */
.wwa-lbl{
  font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(234,224,196,.72);padding-left:12px;margin-bottom:7px;
  text-shadow:0 0 12px rgba(234,224,196,.35);
  transition:color .35s,text-shadow .35s
}
.wwa-zone:hover .wwa-lbl{color:rgba(234,224,196,.88);text-shadow:0 0 16px rgba(234,224,196,.5)}

.wl{border-left:.75px solid rgba(255,255,255,.08);padding:6px 0 6px 12px;transition:border-color .3s}
.wl.now{border-left-color:rgba(234,224,196,.3)}
.wwa-zone:hover .wl{border-left-color:rgba(255,255,255,.14)}
.wwa-zone:hover .wl.now{border-left-color:rgba(234,224,196,.38)}

/* READABILITY ROUND — Section 3 "right orbital region": resting label/value
   colors raised (.wt .22→.32, .wv .48→.56) so Last/Now/Next are readable at
   rest, not just on hover; hover states raised to keep visible headroom
   above the new resting values, preserving the wake contrast step. */
/* ATMOSPHERE CORRECTION — FIX 5: resting label color raised .32→.38, a
   modest step, keeping headroom below the hover (.42) and .wv value colors. */
.wt{font-family:'DM Sans',sans-serif;font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:rgba(230,226,220,.38);margin-bottom:2px}
.wwa-zone:hover .wt{color:rgba(230,226,220,.48)}
.wv{font-family:'DM Sans',sans-serif;font-size:13px;color:rgba(230,226,220,.56);line-height:1.3}
.wv.now{color:rgba(234,224,196,.7);font-weight:500}
.wwa-zone:hover .wv{color:rgba(230,226,220,.68)}
.wwa-zone:hover .wv.now{color:rgba(234,224,196,.88);font-weight:500}

.wdiv{height:.5px;background:rgba(255,255,255,.05);margin:3px 10px}
.wwa-zone:hover .wdiv{background:rgba(255,255,255,.08)}

/* Sticky mode: ONE toggle beside Send (Akib decision 2026-09-30). Shows the current mode; press to switch. */
.mode-toggle{
  font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.04em;white-space:nowrap;
  padding:6px 14px;border-radius:20px;cursor:pointer;
  background:rgba(234,224,196,.06);
  border:0.5px solid rgba(234,224,196,.28);
  color:rgba(234,224,196,.85);
  transition:background .15s,border-color .15s,color .15s
}
.mode-toggle[hidden]{display:none}
.mode-toggle:hover:not(:disabled){background:rgba(234,224,196,.12);border-color:rgba(234,224,196,.45)}
.mode-toggle.is-side{background:rgba(160,190,220,.10);border-color:rgba(160,190,220,.4);color:rgba(190,212,235,.92)}
.mode-toggle:disabled{opacity:.45;cursor:default}
.b-right .mode-toggle{margin-right:8px}

/* Free step movement (Akib 2026-10-05): five learner-chosen step controls in the thin band above the conversation.
   The current step comes from the server; nothing here is disabled because another step was or was not done. */
/* D-2 (layout only, Akib 2026-10-05): the step controls live in the composer footer, beside the Active/Side-talk toggle.
   .step-toggle shows the current step; it opens #stepBar as a short list that grows upward out of the footer.
   The old top-band placement overlapped the Teaching Style pill at every width. */
.step-pick{position:relative;display:inline-flex}
.step-pick[hidden]{display:none}
.step-toggle{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.04em;white-space:nowrap;
  padding:6px 12px;border-radius:20px;cursor:pointer;
  background:transparent;border:0.5px solid rgba(255,255,255,.14);color:rgba(230,226,220,.6);
  transition:background .15s,border-color .15s,color .15s
}
.step-toggle:hover:not(:disabled),.step-pick.is-open .step-toggle{background:rgba(234,224,196,.08);border-color:rgba(234,224,196,.3);color:rgba(234,224,196,.9)}
.step-toggle:disabled{opacity:.45;cursor:default}
.step-chev{font-size:9px;line-height:1;transition:transform .15s}
.step-pick.is-open .step-chev{transform:rotate(180deg)}
.step-bar{
  position:absolute;left:0;bottom:calc(100% + 8px);z-index:40;
  display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:140px;max-width:calc(100vw - 24px);
  padding:6px;border-radius:14px;
  background:rgba(22,22,20,.97);border:0.5px solid rgba(234,224,196,.2);box-shadow:0 10px 30px rgba(0,0,0,.45)
}
.step-bar[hidden],.step-pick:not(.is-open) .step-bar{display:none}
.step-btn{
  pointer-events:auto;
  font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:.04em;line-height:16px;white-space:nowrap;
  padding:6px 12px;border-radius:10px;cursor:pointer;text-align:left;
  background:transparent;
  border:0.5px solid transparent;
  color:rgba(230,226,220,.5);
  transition:background .15s,border-color .15s,color .15s
}
.step-btn:hover:not(:disabled){background:rgba(234,224,196,.08);border-color:rgba(234,224,196,.3);color:rgba(234,224,196,.8)}
.step-btn.is-current{background:rgba(234,224,196,.10);border-color:rgba(234,224,196,.4);color:rgba(234,224,196,.92)}
.step-btn:disabled{opacity:.45;cursor:default}

.r-div{height:.5px;background:rgba(255,255,255,.05);margin:20px 12px 0}

.comp-zone{ position:relative; margin-top:0; flex-shrink:0 }
.comp-inner{ display:flex;flex-direction:column;gap:0;width:100% }

.comp-pill-rest{ display:flex;align-items:center;gap:6px; padding:6px 12px; }
.comp-rest-dot{
  width:3px;height:3px;border-radius:50%;
  background:rgba(234,224,196,.35);
  animation:dp 3.5s ease-in-out infinite
}
/* ATMOSPHERE CORRECTION — FIX 5: resting label color raised .65→.72, matching
   the same modest step applied to .wwa-lbl above (Secondary tier). */
.comp-rest-lbl{
  font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(234,224,196,.72);
  text-shadow:0 0 12px rgba(234,224,196,.35);
  transition:color .35s,text-shadow .35s
}
.comp-zone:hover .comp-rest-lbl{color:rgba(234,224,196,.88);text-shadow:0 0 16px rgba(234,224,196,.5)}

.comp-expand{
  max-height:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.34,1.1,.64,1),opacity .28s ease
}
.comp-zone:hover .comp-expand,
.comp-zone:focus-within .comp-expand{ max-height:220px; }

.comp-card{
  margin:0 12px;
  background:rgba(234,224,196,.03);
  border:0.5px solid rgba(234,224,196,.12);
  border-left:1px solid rgba(234,224,196,.28);
  border-radius:6px;
  padding:10px 12px 12px;
  backdrop-filter:blur(16px);
  position:relative;
  overflow:hidden;
  animation:comp-breathe 4s ease-in-out infinite
}
.comp-card::before{
  content:'';
  position:absolute;
  top:-100%;left:0;right:0;height:60%;
  background:linear-gradient(to bottom, rgba(234,224,196,.0), rgba(234,224,196,.04), rgba(234,224,196,.0));
  animation:comp-shimmer 5s ease-in-out infinite;
  pointer-events:none
}
@keyframes comp-breathe{
  0%,100%{border-left-color:rgba(234,224,196,.22);box-shadow:none}
  50%{border-left-color:rgba(234,224,196,.45);box-shadow:0 0 18px rgba(234,224,196,.06),inset 0 0 20px rgba(234,224,196,.02)}
}
@keyframes comp-shimmer{
  0%{top:-100%}
  60%,100%{top:200%}
}
/* READABILITY ROUND: resting color raised .25→.34 — a meaningful label
   (Section 12 contrast check: "Companion label/actions"). */
.comp-lbl{
  font-family:'DM Sans',sans-serif;font-size:7px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(230,226,220,.34);margin-bottom:8px
}

.comp-btns{display:flex;flex-direction:column;gap:0}
/* READABILITY ROUND: color raised .5→.58 (Section 12 "Companion actions") */
.comp-btn{
  font-family:'DM Sans',sans-serif;font-size:12px;
  color:rgba(230,226,220,.58);
  padding:6px 0;
  border-bottom:0.5px solid rgba(255,255,255,.04);
  line-height:1.4;
  width:100%;text-align:left;background:none;border-left:none;border-right:none;border-top:none;
  cursor:pointer;
  transition:color .2s;
}
.comp-btn:last-child{border-bottom:none}
.comp-btn:hover{color:rgba(234,224,196,.92)}
.comp-btn:focus-visible{outline:1px solid rgba(234,224,196,.6);outline-offset:2px;color:rgba(234,224,196,.92)}

/* ── LEARNING TOOLS panel (My Notes / Listen) — an overlay on the stage; never replaces the conversation or composer ── */
.lt-mobile-btn{
  display:none;position:absolute;top:44px;right:8px;z-index:25;   /* below the Teaching Style pill row at every phone width */
  font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.04em;
  padding:6px 12px;border-radius:20px;cursor:pointer;
  background:rgba(26,25,22,.7);border:0.5px solid rgba(234,224,196,.25);color:rgba(234,224,196,.8);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
}
.lt-mobile-btn:hover,.lt-mobile-btn[aria-expanded="true"]{background:rgba(234,224,196,.1);color:rgba(234,224,196,.95)}
.lt-mobile-btn:focus-visible,.lt-tab:focus-visible,.lt-close:focus-visible,.lt-btn:focus-visible,.lt-ta:focus-visible,.lt-select:focus-visible{outline:1px solid rgba(234,224,196,.7);outline-offset:2px}
.lt-panel{
  position:absolute;z-index:30;right:160px;top:56px;width:340px;max-height:calc(100% - 190px);
  display:flex;flex-direction:column;overflow:hidden;
  padding:14px 16px 16px;border-radius:14px;
  background:rgba(22,22,20,.96);border:0.5px solid rgba(234,224,196,.2);box-shadow:0 14px 40px rgba(0,0,0,.5);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  font-family:'DM Sans',sans-serif;color:rgba(230,226,220,.8)
}
.lt-panel[hidden],.lt-body[hidden]{display:none}
.lt-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;flex-shrink:0}
.lt-tabs{display:flex;gap:4px}
.lt-tab{
  font:inherit;font-size:11px;letter-spacing:.04em;padding:5px 12px;border-radius:20px;cursor:pointer;
  background:transparent;border:0.5px solid rgba(255,255,255,.12);color:rgba(230,226,220,.55)
}
.lt-tab[aria-pressed="true"]{background:rgba(234,224,196,.1);border-color:rgba(234,224,196,.35);color:rgba(234,224,196,.95)}
.lt-close{font:inherit;font-size:10px;letter-spacing:.06em;text-transform:uppercase;background:none;border:none;color:rgba(230,226,220,.5);cursor:pointer;padding:4px 2px}
.lt-close:hover{color:rgba(230,226,220,.9)}
.lt-body{display:flex;flex-direction:column;gap:8px;min-height:0;overflow-y:auto}
.lt-lbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(230,226,220,.5)}
.lt-ta{
  width:100%;box-sizing:border-box;resize:vertical;min-height:70px;max-height:200px;
  font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.5;color:rgba(240,236,228,.95);
  background:rgba(255,255,255,.04);border:0.5px solid rgba(255,255,255,.14);border-radius:8px;padding:8px 10px
}
.lt-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.lt-speed{gap:8px}
.lt-btn{
  font:inherit;font-size:12px;letter-spacing:.03em;padding:6px 14px;border-radius:20px;cursor:pointer;
  background:transparent;border:0.5px solid rgba(255,255,255,.18);color:rgba(230,226,220,.75)
}
.lt-btn:hover:not(:disabled){border-color:rgba(234,224,196,.45);color:rgba(234,224,196,.95)}
.lt-btn:disabled{opacity:.4;cursor:default}
.lt-btn[hidden]{display:none}
.lt-primary{background:rgba(234,224,196,.1);border-color:rgba(234,224,196,.35);color:rgba(234,224,196,.92)}
.lt-select{font:inherit;font-size:12px;color:rgba(230,226,220,.85);background:rgba(255,255,255,.05);border:0.5px solid rgba(255,255,255,.18);border-radius:8px;padding:4px 8px}
.lt-select option{background:#1c1b18;color:#e6e2dc}
.lt-status{min-height:16px;font-size:12px;line-height:1.4;color:rgba(230,226,220,.65)}
.lt-status.is-error{color:rgba(240,160,150,.95)}
.lt-lblrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.note-more{display:flex;justify-content:center;padding:4px 0 2px}
.note-list{list-style:none;margin:4px 0 0;padding:0 2px 0 0;display:flex;flex-direction:column;gap:8px;max-height:min(46vh,340px);overflow-y:auto;overscroll-behavior:contain} /* the editor and Save stay put; only the list scrolls */
.note-item{padding:9px 10px;border-radius:8px;background:rgba(255,255,255,.03);border:0.5px solid rgba(255,255,255,.08)}
.note-item.is-editing{border-color:rgba(234,224,196,.4)}
.note-text{font-size:13px;line-height:1.5;color:rgba(235,231,224,.9);white-space:pre-wrap;overflow-wrap:anywhere}
.note-text.is-clamped{max-height:7.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.note-meta{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:10.5px;color:rgba(230,226,220,.42)}
.note-act{font:inherit;font-size:11px;background:none;border:none;padding:2px 0;cursor:pointer;color:rgba(234,224,196,.75)}
.note-act:hover{color:rgba(234,224,196,1);text-decoration:underline}
.note-act.is-danger{color:rgba(240,160,150,.85)}
.note-empty{font-size:12px;color:rgba(230,226,220,.45);font-style:italic}

/* ── Responsive: mobile (<768px) — accepted responsive adaptation ── */
@media (max-width:767px){
  .teaching{ left:0; right:0; }
  .right-col{ display:none; }
  .lt-mobile-btn{ display:block; }
  .lt-panel{ left:8px; right:8px; top:78px; width:auto; max-height:calc(100% - 180px); }
  .bwrap{ padding-bottom:calc(18px + env(safe-area-inset-bottom,0px)); }
  .convo{ bottom:calc(88px + env(safe-area-inset-bottom,0px)); }
}

/* ── Responsive: tablet (768–1199px) — accepted responsive adaptation ──
   VISUAL POLISH ROUND: tablet rail widths are likewise constant now (no
   .panel-open width bump), matching .teaching's inset exactly — same fix
   as desktop, same reason (no width animation → no pill reflow). */
@media (min-width:768px) and (max-width:1199px){
  .teaching{ left:0; right:130px; }
  .right-col{ width:130px; }
  .lt-panel{ right:138px; }
}

/* ── State display (unknown-state recovery) — accepted production addition ── */
.state-loading{
  display:flex;align-items:center;gap:8px;
  color:rgba(230,226,220,.5);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:300;
}
.state-error{ display:flex;flex-direction:column;align-items:flex-start;gap:10px; }
.state-error-message{
  color:rgba(230,226,220,.5);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:300;
}
.state-error-retry{
  display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:20px;
  background:rgba(255,255,255,.05);border:0.5px solid rgba(255,255,255,.1);
  color:rgba(230,226,220,.7);
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:400;
  cursor:pointer;transition:background .2s,border-color .2s;
  min-height:32px;
}
.state-error-retry:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18); }

/* Non-classroom surface shells — accepted production addition (WP-01 neutral placeholder) */
.surface-shell{ position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; }
.surface-shell-inner{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:32px; user-select:none; }
.surface-shell-name{
  font-family:'Spectral',serif; font-size:22px; font-weight:300; font-style:italic;
  color:rgba(230,226,220,.22); letter-spacing:.02em;
}
.surface-shell-body{
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:300;
  color:rgba(230,226,220,.18); letter-spacing:.02em;
}

/* ══════════════════════════════════════════════════════════════════════════
   WP-02 — Authentication + Account Lifecycle
   Additive only. Reuses existing tokens (deep graphite / #141311 glass /
   cream #EAE0C4 accent / warm-white rgba(230,226,220,X) body / Spectral
   italic display type / DM Sans uppercase micro-labels / pill controls /
   the same cubic-bezier(.34,1.1,.64,1) wake motion). Nothing above this
   block is touched.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Boot/restoration state (Critic fix round 4) — full-screen, same
   foundation as .auth-gate/.app. Visible by default, before any script
   runs, so page load never flashes the gate or the shell. Transient UI
   only; owns no authority. auth.js hides it once it has determined
   whether authentication is actually required. ── */
.boot-state{
  position:fixed;inset:0;z-index:500;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:#0F0F0E;
}
.boot-state[hidden]{ display:none; }

/* ── Auth gate — full-screen, same foundation as .app, shown only once the
   client has determined a sign-in is actually required (WP-02 objective:
   unauthenticated → sign in/up → authenticated shell). Hidden by default;
   hidden again once a session is established. ── */
.auth-gate{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  background:#0F0F0E;
  padding:24px;
}
.auth-gate[hidden]{ display:none; }

.auth-card{
  width:100%;max-width:360px;
  background:rgba(26,25,22,.88);
  border:0.5px solid rgba(255,255,255,.08);
  border-radius:12px;
  backdrop-filter:blur(28px);
  padding:32px 28px 28px;
  opacity:0;transform:translateY(6px);
  animation:authCardIn .5s cubic-bezier(.22,1,.36,1) .05s forwards;
}
@keyframes authCardIn{ to{ opacity:1; transform:translateY(0); } }

.auth-card-brand{
  display:flex;align-items:baseline;gap:0;justify-content:center;margin-bottom:22px;
  font-family:'Spectral',serif;font-weight:200;font-style:italic;font-size:22px;
  color:rgba(234,224,196,.88);
}

.auth-tabs[hidden]{ display:none; }
.auth-tabs{ display:flex;gap:4px;margin-bottom:20px;background:rgba(255,255,255,.03);border-radius:20px;padding:3px; }
.auth-tab{
  flex:1;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;
  padding:7px 0;border-radius:16px;cursor:pointer;text-align:center;
  background:none;border:none;color:rgba(230,226,220,.4);
  transition:color .2s,background .2s;
}
.auth-tab[aria-pressed="true"]{ color:rgba(234,224,196,.85); background:rgba(234,224,196,.10); }

.auth-form{ display:flex;flex-direction:column;gap:12px; }
.auth-form[hidden]{ display:none; }

.auth-field{ display:flex;flex-direction:column;gap:5px; }
.auth-field[hidden]{ display:none; }   /* the hidden attribute must win over display:flex (teacher-only sign-up fields) */
.auth-field label{
  font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(230,226,220,.35);
}
.auth-field input,.auth-field textarea{
  font-family:'DM Sans',sans-serif;font-size:13px;color:rgba(230,226,220,.9);
  background:rgba(255,255,255,.03);border:0.5px solid rgba(255,255,255,.09);
  border-radius:8px;padding:10px 12px;outline:none;
  transition:border-color .2s,background .2s;
}
.auth-field textarea{ resize:vertical;line-height:1.4; }
.auth-field input:focus,.auth-field textarea:focus{ border-color:rgba(234,224,196,.35); background:rgba(255,255,255,.045); }
.auth-field input::placeholder,.auth-field textarea::placeholder{ color:rgba(230,226,220,.22); }
/* Browser/password-manager autofill (including a suggested strong password) paints the field white. Keep it on the dark card. */
.auth-field input:-webkit-autofill,.auth-field input:-webkit-autofill:hover,.auth-field input:-webkit-autofill:focus{
  -webkit-text-fill-color:rgba(230,226,220,.9);caret-color:rgba(230,226,220,.9);
  transition:background-color 600000s 0s,color 600000s 0s;
}

.auth-submit{
  margin-top:6px;
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:.03em;
  padding:11px 0;border-radius:20px;cursor:pointer;text-align:center;
  background:rgba(234,224,196,.1);border:0.5px solid rgba(234,224,196,.28);color:rgba(234,224,196,.85);
  transition:all .25s cubic-bezier(.34,1.1,.64,1);
}
.auth-submit:hover:not(:disabled){ background:rgba(234,224,196,.17);border-color:rgba(234,224,196,.45);color:rgba(234,224,196,1); }
.auth-submit:disabled{ opacity:.45;cursor:default; }

.auth-message{
  min-height:14px;
  font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:300;line-height:1.5;
}
.auth-message.is-error{ color:rgba(217,150,140,.85); }
.auth-message.is-info{ color:rgba(230,226,220,.5); }

.auth-hint{
  margin:0;
  font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:300;line-height:1.5;color:rgba(230,226,220,.5);
}
.auth-link{
  align-self:center;background:none;border:0;padding:6px 8px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:400;letter-spacing:.02em;
  color:rgba(234,224,196,.6);text-decoration:underline;text-underline-offset:3px;
}
.auth-link:hover{ color:rgba(234,224,196,.95); }

/* ── Account modal — same glass language as .comp-card,
   centered dialog rather than a side rail (Account is a global, not a
   Classroom-scoped, control). ── */
.account-modal{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  background:rgba(9,9,8,.6);
  padding:20px;
}
.account-modal[hidden]{ display:none; }

.account-modal-card{
  width:100%;max-width:380px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:rgba(26,25,22,.92);
  border:0.5px solid rgba(255,255,255,.08);
  border-radius:12px;
  backdrop-filter:blur(28px);
  padding:24px 22px;
  opacity:0;transform:translateY(6px);
  animation:authCardIn .38s cubic-bezier(.22,1,.36,1) forwards;
}

.account-modal-head{ display:flex;align-items:center;justify-content:space-between;margin-bottom:18px; }
.account-modal-title{
  font-family:'Spectral',serif;font-weight:300;font-style:italic;font-size:16px;
  color:rgba(230,226,220,.85);
}
.account-modal-close{
  font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(230,226,220,.3);cursor:pointer;background:none;border:none;padding:4px;
  transition:color .2s;
}
.account-modal-close:hover{ color:rgba(230,226,220,.65); }

.account-section{ margin-bottom:18px; }
.account-section:last-child{ margin-bottom:0; }
.account-section-lbl{
  font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(230,226,220,.3);margin-bottom:8px;
}
.account-email{
  font-family:'DM Sans',sans-serif;font-size:12.5px;color:rgba(230,226,220,.65);
  word-break:break-word;
}
.account-status-line{
  font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:300;color:rgba(230,226,220,.55);
  line-height:1.5;margin-bottom:10px;
}

.account-btn-row{ display:flex;flex-direction:column;gap:8px; }
.account-action{
  font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:400;
  padding:9px 14px;border-radius:20px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.04);border:0.5px solid rgba(255,255,255,.09);
  color:rgba(230,226,220,.68);
  transition:background .2s,border-color .2s,color .2s;
}
.account-action:hover:not(:disabled){ background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:rgba(230,226,220,.9); }
.account-action:disabled{ opacity:.4;cursor:default; }
.account-action.is-danger{ border-color:rgba(217,150,140,.25);color:rgba(217,150,140,.75); }
.account-action.is-danger:hover:not(:disabled){ background:rgba(217,150,140,.08);border-color:rgba(217,150,140,.4);color:rgba(217,150,140,.95); }

.account-divider{ height:0.5px;background:rgba(255,255,255,.07);margin:16px 0; }

/* WP-05 — Classroom home primary action. Spacing/centering only — the
   button itself is the existing .account-action pill material (same
   glass/blur/typography language as the Account modal), not a new
   component family (Permanent UI Fidelity Rule §1/§4). */
.classroom-cta{
  display:block;margin:20px auto 0;text-align:center;
}

@media (prefers-reduced-motion:reduce){
  .auth-card,.account-modal-card{ animation:none;opacity:1;transform:none; }
}
.task-panel .task-answer{display:block;width:100%;box-sizing:border-box;margin:.85em 0;padding:.6em .8em;font:inherit;color:inherit;background:transparent;border:1px solid currentColor;border-radius:8px;opacity:.9;resize:vertical}
.task-panel .task-note{opacity:.8}
.ap-say{color:inherit;display:inline-block;width:1em;height:1em;margin:0 .35em 0 .3em;padding:0;vertical-align:-.1em;border:0;background:currentColor;opacity:.4;cursor:pointer;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E") center/contain no-repeat}
.ap-say:hover,.ap-say:focus-visible{opacity:.85;outline:none}

/* Core cue (AICOMM-01 §9.4): the "Write this down:" line, shown as a gold-ruled note.
   Distinct by rule weight and tint, not colour alone. Display only. */
.ap-cue{margin:1.1em 0;padding:.7em 1em .75em 1.1em;border-radius:0 10px 10px 0}
.ap-cue:first-child{margin-top:0}
.ap-cue:last-child{margin-bottom:0}
.ap-cue-label{display:block;margin-bottom:.5em;font:500 11px/1 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.ap-cue-body{display:block}
.ap-cue-core{border-left:3px solid #A08A5A;background:rgba(160,138,90,.10)}
.ap-cue-core .ap-cue-label{color:#A08A5A}

/* End chapter: a section inside the Account modal (uses .account-* material). */
#endChapter[hidden],#endChapterDiv[hidden],#endConfirm[hidden]{display:none}
.end-confirm-msg{margin:0 0 8px;font:400 12px/1.45 'DM Sans',sans-serif;color:rgba(230,226,220,.8)}
#endYes{border-color:rgba(160,138,90,.5);background:rgba(160,138,90,.16)}
#endConfirm{margin-bottom:8px}

/* My Notes — expanded writing area: the panel widens (it is anchored on the right, so it grows leftwards over the conversation) and the box grows. */
.lt-panel.is-expanded{width:min(620px,calc(100% - 200px))}
.lt-panel.is-expanded .lt-ta#noteText{min-height:260px;max-height:none}
.lt-panel.is-expanded .note-list{max-height:min(30vh,240px)}
@media (max-width:767px){
  .lt-panel.is-expanded{width:auto}
  .lt-panel.is-expanded .lt-ta#noteText{min-height:34vh}
  .lt-panel.is-expanded .note-list{max-height:min(26vh,200px)}
}