@font-face{
  font-family:"Instrument Sans";
  src:url("/fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("/fonts/InstrumentSans-Italic-Variable.woff2") format("woff2");
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
}
:root{
  color-scheme:light;
  /* Composition contract. The contrasting outer canvas is a wide-screen
     frame, not a device-specific gutter. It collapses into the workspace
     whenever two intentional 40px rails no longer fit. */
  --workspace-max-width:1160px;--minimum-outer-rail:40px;
  --outer-canvas-bg:#07111e;--workspace-bg:#f7f9fc;
  /* Compatibility aliases for component styles authored before the canvas
     and workspace concepts were named explicitly. */
  --gutter:var(--outer-canvas-bg);--workspace:var(--workspace-bg);
  --canvas-feather:rgba(var(--elev-shade),.18);
  --bg:#e9eff6; --surface:#ffffff; --panel:#ffffff; --panel2:#edf3f9;
  --line:#cdd8e5; --line-strong:#9eb1c7; --rule-strong:#152237; --text:#152237; --dim:#5f7084;
  --accent:#276dcc; --accent-strong:#246fd3; --accent-soft:#e6f0ff; --focus:#76a9ee;
  --navy:#07111e; --navy-panel:#13223a; --navy-line:#2a3c56;
  --header-bg:#121c29;--header-text:#eef3f9;--header-muted:#a9b8ca;
  --header-control-bg:#13223a;--header-control-line:#2a3c56;--header-control-text:#ffffff;
  --header-focus:color-mix(in srgb,#eef3f9 76%,transparent);
  --app-header-height:68px;--app-sticky-obstruction:68px;--sticky-content-gap:8px;
  --content-sticky-top:calc(var(--app-sticky-obstruction) + var(--sticky-content-gap));
  --catalog-reading-line-gap:43px;
  --good:#14764f; --bad:#b53e4a; --warn:#8a6617; --radius:7px;
  --correct-bg:#dff5e9; --correct-border:#178355; --correct-text:#0b5136;
  --incorrect-bg:#fde4e7; --incorrect-border:#c74753; --incorrect-text:#81222d;
  /* Compatibility aliases are part of the theme contract. Newer assessment,
     review, and verification surfaces use these semantic names; keeping them
     mapped here prevents invalid declarations and light-only fallbacks. */
  --fg:var(--text);--muted:var(--dim);--card:var(--surface);--soft:var(--panel2);
  --border:var(--line);--surface-soft:var(--panel2);
  --surface-subtle:color-mix(in srgb,var(--panel2) 42%,var(--surface));
  --shadow:none;
  --shadow-sm:none;--chip:var(--panel2);--ink:var(--navy);--paper:#f7f9fc;--serif:"Instrument Sans",system-ui,sans-serif;
  /* One quiet physical grammar for every bounded action. Marketing, primary,
     secondary, destructive, compact, and shell buttons keep their own color
     and geometry; these tokens make their response to the hand consistent. */
  /* ELEVATION CARRIES A HUE, AND IT HAS TO BE THE THEME'S HUE.
     Every raised control casts two shadows: a neutral contact shadow and a
     tinted ambient glow. Those were hardcoded blue, so after dark mode went
     gold every button still sat in a blue haze -- at rest, not just on hover.
     Fills alone were never the whole of the accent; the light it throws is
     part of it. These are raw "r,g,b" triples so alpha stays per-shadow. */
  --elev-tint:39,109,204;--elev-shade:7,17,30;
  /* Text that sits ON the accent fill. Blue takes white; gold takes ink. */
  --on-accent:#ffffff;
  --action-rest-duration:150ms;--action-hover-duration:120ms;--action-press-duration:80ms;
  --action-ease:cubic-bezier(.22,.61,.36,1);
}
/* overflow-x:clip (not hidden): hidden creates a scroll container on the
   root elements, which silently disables position:sticky everywhere. */
*{box-sizing:border-box} html{background:var(--outer-canvas-bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;transition:background-color var(--theme-paint-duration,.2s) ease}
/* Theme identity is an atomic application-state commit. Paint transitions use
   this inherited clock; transforms, layout motion, and activity animations do
   not, so a theme change cannot create mixed-theme frames or cancel unrelated
   interaction feedback. The runtime holds this value for two painted frames. */
html.theme-commit{--theme-paint-duration:0s}
/* Theme state itself still commits in one frame. These compositor snapshots
   put back a restrained sense of continuity without reviving independent
   component transition clocks. The switch thumb is its own captured element,
   so it travels once instead of appearing in both full-page snapshots. */
@keyframes workspace-theme-fade-out{to{opacity:0}}
@keyframes workspace-theme-fade-in{from{opacity:0}}
::view-transition-old(root){animation:workspace-theme-fade-out 200ms cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:workspace-theme-fade-in 200ms cubic-bezier(.4,0,.2,1) both}
::view-transition-group(theme-chip){animation-duration:200ms;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-old(theme-chip),::view-transition-new(theme-chip){animation-duration:200ms;mix-blend-mode:normal}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),
  ::view-transition-group(theme-chip),::view-transition-old(theme-chip),::view-transition-new(theme-chip){animation:none}
}
/* Dark mode is EDGE TO EDGE. The dark reaches the rails, so the page is one
   field from the header down. The rails used to invert -- pale #e9eff6 rails
   framing a dark column -- which made the brightest surface on the screen the
   chrome, in the periphery, in the theme chosen specifically to emit less
   light. The frame is never brighter than what it frames.

   Light mode keeps its rails, and that asymmetry is deliberate: each theme
   extends whichever colour serves it. Dark extends the dark; light contains
   the white, where the navy rails cut the bright area of the screen from 88%
   to 69%. VISUAL_IDENTITY_CONSTITUTION 5.2.

   The ground is Eclipse, not navy -- see the palette section. */
html.workspace-dark{--outer-canvas-bg:var(--workspace-bg);--workspace-bg:#0f0f0f;
  --gutter:var(--outer-canvas-bg);--workspace:var(--workspace-bg);
  /* Rails and workspace are the same surface now, so there is no seam to feather. */
  --canvas-feather:transparent;
  /* The header joins the field. It is lifted off the ground rather than matched
     to it, so it still reads as a bar instead of dissolving, and --header-edge
     finishes it: navy's luminance is 0.0054 against the ground's 0.0048, so a
     fill alone would leave any bar here floating.

     The header therefore DOES move between themes, which is what cost us the
     logo and the switch when it last moved -- to a pale #e9eff6. The rule that
     stops that recurring is directional, not fixed: THE HEADER MAY FOLLOW THE
     THEME DOWNWARD, NEVER UPWARD. Darker than the content it sits above is
     allowed; brighter is not, in either theme.
     VISUAL_IDENTITY_CONSTITUTION 5.2. */
  --header-bg:#1a1a1c;--header-text:#f1f5f9;--header-muted:#a9adb2;
  --header-control-bg:#262727;--header-control-line:#3a3a3c;--header-control-text:#f1f5f9;
  --header-focus:#8dbcf5;--header-edge:#2b2c2e;
  /* Gold light, and a true black contact shadow: on a #0f0f0f ground a navy
     shade reads as a blue bruise under every control. */
  --elev-tint:233,185,104;--elev-shade:0,0,0;--on-accent:#1b1405;
  /* The switch was drawn as a groove cut into navy. On a neutral bar its blue
     chip would be the only hue left in the header, so it goes neutral too. */
  --switch-track:#070707;--switch-chip-top:#3a3b3d;--switch-chip-bottom:#242526;
  /* The ground the arrival bloom opens to. Same surface as the workspace. */
  --arrival-canvas:#0f0f0f}
[hidden]{display:none!important}
.route-pending{min-height:42vh;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--dim);text-align:center}
.route-pending p{margin:0;font-weight:650}
.route-pending-indicator{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:route-spin .7s linear infinite}
@keyframes route-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.route-pending-indicator{animation:none;border-top-color:var(--line);background:var(--accent)}}
.route-destination-skeleton{min-height:58vh;padding-top:42px;overflow:hidden}
.route-destination-skeleton .skeleton-heading,.route-destination-skeleton .skeleton-copy,
.route-destination-skeleton .skeleton-grid i,.route-destination-skeleton .skeleton-rows i{
  display:block;border-radius:7px;background:linear-gradient(90deg,var(--panel2) 25%,var(--surface) 50%,var(--panel2) 75%);
  background-size:220% 100%;animation:skeleton-shimmer 1.4s ease-in-out infinite}
.route-destination-skeleton .skeleton-heading{width:min(430px,62%);height:42px;margin-bottom:18px}
.route-destination-skeleton .skeleton-copy{width:min(680px,90%);height:18px;margin-bottom:48px}
.route-destination-skeleton .skeleton-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:42px}
.route-destination-skeleton .skeleton-grid i{height:112px}
.route-destination-skeleton .skeleton-rows{display:grid;gap:13px}
.route-destination-skeleton .skeleton-rows i{height:54px}
@keyframes skeleton-shimmer{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){.route-destination-skeleton *{animation:none!important}}
.bootstrap-arrival-hold{min-height:calc(100dvh - 167px);display:grid;place-content:center;justify-items:center;gap:24px;
  color:color-mix(in srgb,#79adf3 74%,transparent)}
.bootstrap-arrival-hold img{width:72px;height:72px}
main[data-bootstrap-shell="true"]{background-color:var(--outer-canvas-bg)}
.route-update-failure{display:flex;align-items:center;gap:12px;padding:12px 0 16px;margin-bottom:16px;border-bottom:1px solid var(--bad);color:var(--bad)}
.route-update-failure span{color:var(--dim)}.route-update-failure button{margin-left:auto}
.route-updating{padding:8px 12px;margin-bottom:12px;border:1px solid var(--line);background:var(--accent-soft);color:var(--dim);font-size:13px;font-weight:650}
main[inert]{user-select:none}
body{margin:0;min-height:100dvh;position:relative;isolation:isolate;background:var(--outer-canvas-bg);color:var(--text);overflow-x:clip;
  font-family:"Instrument Sans",system-ui,sans-serif;font-size:15px;line-height:1.52;
  font-synthesis:none;transition:background-color var(--theme-paint-duration,.2s) ease}
body:before{display:none}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4{font-family:inherit;font-weight:680;letter-spacing:-.018em}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:12px;top:8px;z-index:20;padding:10px 14px;border-radius:8px;background:var(--accent);color:#06101f;font-weight:700;transform:translateY(-160%)}
.skip-link:focus{transform:none}
header{display:flex;align-items:center;gap:14px;padding:14px 22px;
  border-bottom:1px solid var(--header-control-line);position:sticky;top:0;
  background:var(--header-bg);color:var(--header-text);z-index:5;
  transition:background-color var(--theme-paint-duration,.2s) ease,color var(--theme-paint-duration,.2s) ease,border-color var(--theme-paint-duration,.2s) ease}
/* Keep rapid taps on the mobile navigation controls from triggering iOS
   WebView double-tap zoom. Pinch zoom remains available everywhere. */
body>header{border-bottom:0}
body>header{min-height:var(--app-header-height)}
body>header,body>header a,body>header button{touch-action:manipulation}
/* The header is chrome, not content. Dragging across Today / Calendar / Study
   Areas selects them like body text, which is a thing no native app does and
   which mostly happens by accident -- an overshot double-click leaves the nav
   sitting there highlighted.

   Scoped to body>header deliberately: `main header` is a real in-page heading
   (study area titles, breadcrumbs) and that text stays selectable, because
   people copy it. Right-click, keyboard focus and the context menu are all
   untouched; this only stops drag-to-select. The brand mark also stops being
   draggable, so the logo cannot be pulled out of the page as an image. */
body>header{-webkit-user-select:none;user-select:none}
body>header .brand-mark{-webkit-user-drag:none}
header .brand{display:flex;align-items:center;gap:0;flex:0 0 auto;color:var(--header-text);text-decoration:none;border-radius:8px;padding:5px 7px;margin:-5px -7px}
header .brand-mark{display:block;width:31px;height:31px;object-fit:contain;flex:0 0 31px}

/* ============================================================================
   THE LIFT — a hover primitive with two clocks and a row
   Ported from Vetrra's GalleryCardPainted and WishlistSurface:
     "Strategy Gamma: Hybrid Compositing Architecture"
       -- Vetrra Poster Hover Motion Re-engineering, 2026-03-21
     "Gravitational Asymmetric Easing"
       -- Poster Card Fidelity, Cinematic Choreography, and State-of-the-Art
          Hover/Click Microinteractions, 2026-03-15
     neighbour handoff settle, 150ms row / 185ms soft
       -- Vetrra Wishlist Hover Spike Elimination Research Report

   It is not an animation. It is a set of effects on clocks that deliberately
   disagree with each other, and the disagreement is the illusion.

     Clock A — scale     1 → --lift-scale       in 320ms, out 200ms
     Clock B — tilt      0 → --lift-tilt        in 360ms, out 200ms
       ...and riding clock B: the shadow's asymmetry, and the sheen.

   The row adds no clock of its own. It only decides how long the SETTLE of the
   object you just left is allowed to take -- see THE ROW IS ONE OBJECT in
   study-icons.js, and 11.11 for the displacement channel that was rejected.

   WHY TWO CLOCKS FOR ONE OBJECT. Vetrra's first attempt ran one perspective
   transform over the whole widget and failed: "a visual impossibility: a
   shadow that narrows as it falls away from the object." The fix was to stop
   transforming the shadow with the object. The object barely tilts (a degree
   or two is below the threshold where edges start to degrade); the SHADOW
   behaves as though it tilted much harder. On a flat screen the brain has no
   stereo disparity to argue with, so it believes the lighting and ignores the
   geometry.

     "A pure geometric tilt without a corresponding localized shadow expansion
      and surface sheen gradient will consistently fail to produce a believable
      physical interaction."

   GRAVITY IS NOT A REVERSAL. The way up and the way down are different
   physical events, so they get different curves and different durations. Up is
   320ms on cubic-bezier(.17,.89,.32,1.15): an explosive break from resting
   inertia, then hang-time, and the terminal 1.15 overshoots so the object
   micro-bounces as its kinetic energy transfers at the peak. Down is 200ms on
   cubic-bezier(.55,.08,.68,.53): gravity accelerates it and the table stops it
   abruptly. An exit that eases IN, as a naive reversal does, reads as the
   object FLOATING down, which is the one thing a solid object never does.

   Only the scale overshoots. The tilt must not: an oscillating perspective
   "causes a highly disruptive flickering effect along the vertical edges", so
   clock B and the shadow keep curves that approach their target from one side.

   WHAT LIFTS IS NOT WHAT MEASURES. Vetrra keeps its hit-test rectangle
   axis-aligned and un-tilted so the layout engine and anchored overlays see a
   plain rectangle: "The poster must occupy the exact same two-dimensional
   footprint in the layout engine as it would with a pure flat scale."
   Transforms do not affect layout in CSS, so this holds for free -- but it is
   why the lift must never be expressed as width, margin or top.

   Every channel is a custom property. A surface retunes the primitive by
   overriding tokens, never by writing new keyframes: a 31px brand mark needs
   far more relative scale than a 150px poster to read as the same gesture.
   ============================================================================ */
/* ---- SILHOUETTE OBJECTS ---------------------------------------------------
   The primitive above assumes the object IS its box. For a poster that is true
   -- the superellipse card and its bounding rectangle are the same shape -- so
   a box-shadow happens to be a correct shadow, and a gradient over the box
   happens to fall on the artwork.

   For a glyph it is false, and the whole effect inverts: a box-shadow behind a
   transparent mark is not a shadow, it is a visible rectangle hovering behind
   the letter, and a gradient over the box lights the empty air around it. The
   object appears to rise while a separate rectangle does the emoting. That is
   the difference between "the icon lifts" and "something under the icon lifts".

   Vetrra never has this problem because every lighting layer is clipped to the
   poster's own path -- `painter.setClipPath(path)` before the sheen,
   `setClipPath(clip_path)` before the contact AO. The light is ON the object.
   The web equivalents for a shape that is not a rectangle:

     shadow  ->  filter: drop-shadow()   follows the ALPHA silhouette
     sheen   ->  mask-image: <the mark>  the light lands only on the glyph
     contact ->  an ellipse pooled beneath the shape, not a bar on a box edge

   ONE MECHANISM, MANY SURFACES. Everything below is written once and adopted by
   setting tokens. `data-lift` marks the hover host -- the element you point at,
   which is usually bigger than the object being lit. Nothing is ever painted on
   the host: it may be padded, and in a grid it may stretch, and a shadow
   attached to a stretched host draws a bar across the page.
   VISUAL_IDENTITY_CONSTITUTION 11.8, 11.9. */
[data-lift]{
  --lift-scale:1.06;
  --lift-tilt:6deg;
  --lift-perspective:320px;
  /* Up and down are different events. See GRAVITY IS NOT A REVERSAL above. */
  --lift-in:320ms;
  --lift-out:200ms;
  --lift-in-ease:cubic-bezier(.17,.89,.32,1.15);   /* shipped scale curve; the
                                                      1.15 is the micro-bounce */
  --lift-in-ease-safe:cubic-bezier(.215,.61,.355,1); /* for channels that must
                                                      not overshoot */
  --lift-out-ease:cubic-bezier(.55,.08,.68,.53);   /* gravity, then the table */
  --lift-tilt-in:360ms;
  --lift-tilt-ease:cubic-bezier(.645,.045,.355,1);

  --lift-glow:136ms;                 /* motion_combo_duration_ms, brand papers */
  --lift-shadow-tint:var(--elev-shade);
  /* Shadow: two layers. Blur and offset grow while alpha FALLS -- a shadow
     spread over more area is a fainter shadow (11.3). */
  --lift-rest-shadow:
    drop-shadow(0 1px 2px rgba(var(--lift-shadow-tint),.42))
    drop-shadow(0 3px 6px rgba(var(--lift-shadow-tint),.30));
  --lift-hover-shadow:
    drop-shadow(0 3px 5px rgba(var(--lift-shadow-tint),.30))
    drop-shadow(0 10px 18px rgba(var(--lift-shadow-tint),.22));
  --lift-pool-left:14%;
  --lift-pool-right:14%;
  --lift-pool-bottom:-1px;
  --lift-pool-height:5px;
  --lift-pool-a:.55;
}
/* The object's own box. Separate from the hover host on purpose: a host may be
   padded for a comfortable target, and in a grid it may stretch to its column.
   Perspective and the contact pool belong to the OBJECT, or the pool draws a
   bar the width of whatever you happened to make clickable. */
/* The stage does not move. Vetrra's neighbours are displaced a few pixels by
   a lifting poster; ported to a row of words that reads as the page reflowing
   under the pointer rather than as air being pushed aside, so this surface has
   no displacement channel at all. VISUAL_IDENTITY_CONSTITUTION 11.11. */
.lift-mark{position:relative;perspective:var(--lift-perspective)}
/* Clock A: scale. It carries the shadow, because a drop-shadow must grow with
   the thing it belongs to but must NOT be tilted with it -- the same decoupling
   the poster gets by painting its shadow before the perspective matrix. */
.lift-rise{
  display:flex;align-items:center;gap:inherit;
  transform:scale(1);
  transform-origin:50% 78%;          /* pivot low: the object grows from its feet */
  filter:var(--lift-rest-shadow);
  transition:transform var(--lift-out) var(--lift-out-ease),
    filter var(--lift-out) var(--lift-out-ease);
}
/* Clock B: tilt. The object itself contorts, bottom edge forward. */
.lift-plane{
  display:flex;align-items:center;gap:inherit;
  transform:rotateX(0deg);
  transform-origin:50% 50%;
  backface-visibility:hidden;
  transition:transform var(--lift-out) var(--lift-out-ease);
}
/* The pool it sits in. A shape with no bottom edge cannot darken one, so the
   contact cue is the shadow pooled beneath it: tight and dark at rest, wider
   and fainter once it is off the ground -- the same release Vetrra performs
   when it drops contact AO from 150 alpha to 72. */
.lift-mark::after{
  content:"";
  position:absolute;
  left:var(--lift-pool-left);right:var(--lift-pool-right);
  bottom:var(--lift-pool-bottom);height:var(--lift-pool-height);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(0,0,0,var(--lift-pool-a)) 0%,
    rgba(0,0,0,calc(var(--lift-pool-a) * .5)) 45%,
    rgba(0,0,0,0) 100%);
  pointer-events:none;
  transition:transform var(--lift-tilt-in) var(--lift-tilt-ease),
    opacity var(--lift-tilt-in) var(--lift-tilt-ease);
}
/* ---- lifted -------------------------------------------------------------- */
[data-lift]:hover .lift-rise,[data-lift]:focus-visible .lift-rise,
[data-lift].is-lifted .lift-rise{
  transform:scale(var(--lift-scale));
  filter:var(--lift-hover-shadow);
  transition-duration:var(--lift-in);
  /* transform overshoots; filter must not -- a blur radius driven past its
     target has nowhere to go but clamp, which stutters the shadow. */
  transition-timing-function:var(--lift-in-ease),var(--lift-in-ease-safe);
}
[data-lift]:hover .lift-plane,[data-lift]:focus-visible .lift-plane,
[data-lift].is-lifted .lift-plane{
  transform:rotateX(var(--lift-tilt));
  transition-duration:var(--lift-tilt-in);
  transition-timing-function:var(--lift-tilt-ease);
}
[data-lift]:hover .lift-mark::after,[data-lift]:focus-visible .lift-mark::after,
[data-lift].is-lifted .lift-mark::after,
.lift-mark[data-lift]:hover::after,.lift-mark[data-lift]:focus-visible::after,
.lift-mark[data-lift].is-lifted::after{
  transform:translateY(2px) scaleX(1.35) scaleY(1.5);
  opacity:.42;
}
@media (prefers-reduced-motion:reduce){
  .lift-rise,.lift-plane,.lift-mark::after{transition:none}
  [data-lift]:hover .lift-rise,[data-lift]:focus-visible .lift-rise,[data-lift].is-lifted .lift-rise,
  [data-lift]:hover .lift-plane,[data-lift]:focus-visible .lift-plane,[data-lift].is-lifted .lift-plane{
    transform:none}
}

/* ---- SURFACE: the brand mark (the demo bench) ----------------------------
   Kept deliberately separate from every other surface. It is the first place a
   change to this motion gets tried, so it must be free to diverge without
   dragging the activity rows with it -- and the brand papers give it one rule
   the others do not have: "the badge's response must be purely luminous."  */
header .brand{
  --lift-scale:1.085;
  --lift-tilt:7deg;              /* a glyph has no straight edges to converge,
                                    so the tilt has to be legible on its own */
  --lift-perspective:150px;
  --mark:url("/brand/pharmrecall-mark.svg");
}
header .brand .lift-rise,header .brand .lift-plane{display:block;width:100%;height:100%}
header .brand .lift-mark{display:block;width:31px;height:31px;flex:0 0 31px}
header .brand .brand-mark{
  background:var(--mark) center/contain no-repeat;
  transition:transform var(--lift-out) var(--lift-out-ease),
    filter var(--lift-glow) var(--lift-out-ease);
  -webkit-user-drag:none;
}
/* The sheen, masked to the glyph so the light falls ON the letter. */
header .brand .brand-mark::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,rgba(255,255,255,0) 52%,
    rgba(255,255,255,.35) 78%,rgba(255,255,255,1) 96%,rgba(255,255,255,.4) 100%);
  -webkit-mask:var(--mark) center/contain no-repeat;
  mask:var(--mark) center/contain no-repeat;
  mix-blend-mode:plus-lighter;
  opacity:0;pointer-events:none;
  transition:opacity var(--lift-tilt-in) var(--lift-tilt-ease);
}
header .brand:hover .brand-mark,header .brand:focus-visible .brand-mark{
  filter:brightness(1.06) drop-shadow(0 0 5px rgba(var(--elev-tint),.5));
  transition-duration:var(--lift-tilt-in),var(--lift-glow);
  transition-timing-function:var(--lift-tilt-ease),cubic-bezier(.215,.61,.355,1);
}
header .brand:hover .brand-mark::after,header .brand:focus-visible .brand-mark::after{opacity:.5}
@media (prefers-reduced-motion:reduce){
  header .brand .brand-mark{transition:none}
  header .brand:hover .brand-mark,header .brand:focus-visible .brand-mark{filter:none}
  header .brand:hover .brand-mark::after,header .brand:focus-visible .brand-mark::after{opacity:0}
}

nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
body.landing-environment header nav:empty{display:none}
body.landing-environment header #account{margin-left:auto}
/* On roomy desktop canvases the primary destinations belong to the viewport,
   not to the leftover gap between the brand and account utilities. Absolute
   centering keeps their midpoint exact; the theme control takes over the flex
   spacer so Dark and the account menu remain anchored to the right. Below the
   collision-safe threshold, the established responsive flow remains in use. */
@media(min-width:1020px){
  body>header #nav{position:absolute;left:50%;margin-left:0;transform:translateX(-50%)}
  body>header .theme-toggle{margin-left:auto}
}
nav button,nav a{background:none;border:1px solid transparent;color:var(--header-muted);padding:7px 13px;
  border-radius:8px;cursor:pointer;font-size:14px;text-decoration:none;display:inline-block;line-height:1.35}
/* High-contrast hover belongs only to the site header. A bare "nav" selector
   here used to bleed into the workspace's light-background mode tabs. */
/* The current page must outrank the utility controls (theme, account),
   which share the same themed pill: an accent underline marks it uniquely. */
header nav button.active,header nav a.active:not(.app-nav-action){color:var(--header-text);background:var(--header-control-bg);border-color:var(--header-control-line);font-weight:650;box-shadow:inset 0 -2px 0 #5c96e8}
header nav button:hover,header nav a:hover{color:var(--header-text)}
/* Premium primary navigation ----------------------------------------------
   One gold source travels beneath Today, Calendar, Study Areas, and Progress.
   The core filament is deliberately bright and narrow; its directional wash
   uses a soft Gaussian-like falloff so the header reads as illuminated
   material rather than four boxed tabs. */
header nav#nav{
  --nav-light-gold:#e9b968;--nav-light-hot:#f5cf8a;--nav-light-deep:#d9a44a;
  position:relative;isolation:isolate;overflow:visible;
}
/* The spotlight needs a positioned host at every size, but wide navigation
   must remain centered against the viewport rather than the flex leftovers. */
@media(min-width:1020px){
  body>header #nav{position:absolute;left:50%;margin-left:0;transform:translateX(-50%)}
}
header nav .app-nav-action{
  --nav-action-focus:var(--header-focus);
  position:relative;z-index:2;isolation:isolate;overflow:visible;transform:translateY(0) scale(1);
  transform-origin:center;background:transparent;border-color:transparent;box-shadow:none;
  filter:saturate(1) brightness(1);text-shadow:none;
  transition:transform var(--action-rest-duration) var(--action-ease),
    filter var(--action-rest-duration) ease-out,color var(--theme-paint-duration,var(--action-rest-duration)) ease-out,
    text-shadow 220ms ease-out;
}
header nav .app-nav-action.active{
  color:var(--header-text);background:transparent;border-color:transparent;font-weight:650;box-shadow:none;
  text-shadow:0 1px 0 rgba(0,0,0,.38),0 0 13px rgba(233,185,104,.24);
}
header nav .app-nav-label{display:inline-block}
.app-nav-spotlight{
  --nav-spotlight-x:0px;--nav-spotlight-y:0px;--nav-spotlight-width:0px;--nav-spotlight-height:0px;
  position:absolute;z-index:1;left:0;top:0;width:var(--nav-spotlight-width);
  height:var(--nav-spotlight-height);pointer-events:none;opacity:0;
  transform:translate3d(var(--nav-spotlight-x),var(--nav-spotlight-y),0);
  transform-origin:50% 100%;will-change:transform,width,height,opacity;
  transition:transform 520ms cubic-bezier(.2,.78,.2,1),width 440ms cubic-bezier(.2,.72,.2,1),
    height 360ms ease-out,opacity 180ms ease-out;
}
.app-nav-spotlight.is-positioned.is-visible{opacity:1}
.app-nav-spotlight.is-immediate{transition:none}
.app-nav-spotlight-cone,.app-nav-spotlight-pool,.app-nav-spotlight-filament{
  position:absolute;display:block;pointer-events:none;
}
.app-nav-spotlight-cone{
  left:-13%;right:-13%;top:-12px;bottom:1px;
  clip-path:polygon(7% 0,93% 0,56% 100%,44% 100%);
  background:linear-gradient(180deg,rgba(233,185,104,.008) 0%,rgba(233,185,104,.028) 34%,
    rgba(233,185,104,.075) 68%,rgba(245,207,138,.16) 100%);
  filter:blur(3.5px);opacity:.82;transform-origin:50% 100%;
}
.app-nav-spotlight-pool{
  left:-35%;right:-35%;top:-17px;bottom:-7px;
  background:radial-gradient(ellipse 58% 72% at 50% 91%,rgba(245,207,138,.20) 0%,
    rgba(233,185,104,.09) 26%,rgba(217,164,74,.035) 51%,rgba(217,164,74,0) 78%);
  filter:blur(2.5px);opacity:.88;transform-origin:50% 88%;
}
.app-nav-spotlight-filament{
  left:24%;right:24%;bottom:0;height:1px;border-radius:999px;
  background:linear-gradient(90deg,transparent 0%,var(--nav-light-deep) 18%,
    var(--nav-light-hot) 50%,var(--nav-light-deep) 82%,transparent 100%);
  box-shadow:0 0 3px rgba(245,207,138,.94),0 0 9px rgba(233,185,104,.52),
    0 -5px 18px rgba(233,185,104,.18);
}
.app-nav-spotlight.is-igniting .app-nav-spotlight-cone{animation:nav-light-cone-arrive 520ms cubic-bezier(.2,.72,.2,1) 120ms both}
.app-nav-spotlight.is-igniting .app-nav-spotlight-pool{animation:nav-light-pool-arrive 560ms cubic-bezier(.2,.72,.2,1) 100ms both}
.app-nav-spotlight.is-igniting .app-nav-spotlight-filament{animation:nav-light-filament-arrive 430ms cubic-bezier(.16,1,.3,1) 150ms both}
@keyframes nav-light-cone-arrive{0%{opacity:.28;transform:scaleX(.48) scaleY(.62)}55%{opacity:1;transform:scaleX(1.06) scaleY(1.04)}100%{opacity:.82;transform:none}}
@keyframes nav-light-pool-arrive{0%{opacity:.22;transform:scale(.54)}58%{opacity:1;transform:scale(1.08)}100%{opacity:.88;transform:none}}
@keyframes nav-light-filament-arrive{0%{opacity:.3;transform:scaleX(.32)}62%{opacity:1;transform:scaleX(1.08)}100%{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){
  header nav .app-nav-action:hover:not([aria-busy="true"]){
    transform:translateY(-2px) scale(1.015);filter:saturate(1.025) brightness(1.07);
    text-shadow:0 1px 0 rgba(0,0,0,.32),0 0 10px rgba(238,243,249,.12);
    transition-duration:var(--action-hover-duration);
  }
  header nav .app-nav-action.active:hover{
    text-shadow:0 1px 0 rgba(0,0,0,.36),0 0 16px rgba(233,185,104,.32);
  }
}
header nav .app-nav-action:active:not([aria-busy="true"]){
  transform:translateY(1px) scale(.988);filter:saturate(1.02) brightness(.96);
  text-shadow:0 1px 1px rgba(0,0,0,.45);transition-duration:var(--action-press-duration);
}
header nav .app-nav-action[data-action-owned="true"]{
  transform:translateY(1px) scale(.988);filter:saturate(1.02) brightness(.96);
  text-shadow:0 1px 1px rgba(0,0,0,.45);transition-duration:var(--action-press-duration);
}
header nav .app-nav-action:focus-visible{outline:2px solid var(--nav-action-focus);outline-offset:2px}
header nav .app-nav-action[aria-busy="true"]{color:transparent!important;pointer-events:none;cursor:progress;transform:none;filter:none}
header nav .app-nav-action[aria-busy="true"]::after{
  content:"";position:absolute;z-index:2;left:50%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
  border:2px solid color-mix(in srgb,var(--header-text) 34%,transparent);border-top-color:var(--header-text);border-radius:50%;
  animation:action-button-spin .62s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  header nav .app-nav-action,.app-nav-spotlight{transition:none}
  header nav .app-nav-action:hover,header nav .app-nav-action:active{transform:none}
  header nav .app-nav-action[data-action-owned="true"]{outline:2px solid currentColor;outline-offset:3px;transform:none;filter:none}
  .app-nav-spotlight.is-igniting .app-nav-spotlight-cone,
  .app-nav-spotlight.is-igniting .app-nav-spotlight-pool,
  .app-nav-spotlight.is-igniting .app-nav-spotlight-filament{animation:none}
  header nav .app-nav-action[aria-busy="true"]::after{animation:none}
}
@media (forced-colors:active){
  header nav .app-nav-action{box-shadow:none;filter:none}
  .app-nav-spotlight{display:none}
  header nav .app-nav-action.active{border-color:Highlight;color:HighlightText}
  header nav .app-nav-action[data-action-owned="true"]{outline:2px solid Highlight;outline-offset:3px;transform:none;filter:none}
}
.mobile-menu{display:none;background:var(--header-control-bg);border:1px solid var(--header-control-line);color:var(--header-control-text);
  border-radius:8px;padding:8px 11px;font-size:18px;line-height:1;cursor:pointer}
header button.ghost,header a.ghost{background:var(--header-control-bg);border:1px solid var(--header-control-line);color:var(--header-control-text);
  padding:9px 15px;border-radius:6px;font-size:14px;text-decoration:none;display:inline-block;cursor:pointer}
header button.ghost:hover,header a.ghost:hover{border-color:var(--header-focus)}
#account{position:relative;flex:0 0 auto}
.account-menu-trigger{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header button.account-menu-trigger:hover{border-color:transparent}
.account-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:12;display:grid;min-width:190px;
  padding:6px;border:1px solid #304966;border-radius:9px;background:#111f31;
  box-shadow:0 14px 34px rgba(0,0,0,.3)}
.account-menu[hidden]{display:none}
.account-menu a,.account-menu button{display:block;width:100%;min-height:40px;padding:9px 11px;border:0;
  border-radius:6px;background:transparent;color:#eef3f9;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.account-menu a:hover,.account-menu button:hover,.account-menu a:focus-visible,.account-menu button:focus-visible{
  outline:none;background:#20344d;color:#fff}
.account-menu button:last-child{color:#f2c2c7}
/* The menu hangs off the header, so it belongs to whatever the header is:
   navy in light mode, the Eclipse bar in dark. */
html.workspace-dark .account-menu{border-color:#3a3a3c;background:#1a1a1c}
html.workspace-dark .account-menu a,html.workspace-dark .account-menu button{color:#f1f5f9}
html.workspace-dark .account-menu a:hover,html.workspace-dark .account-menu button:hover,
html.workspace-dark .account-menu a:focus-visible,html.workspace-dark .account-menu button:focus-visible{background:#2b2c2e}
html.workspace-dark .account-menu-dot{background:#e9b968}
/* The theme control is a two-position switch --------------------------------
   A single button has to say both where you are and where you would go with
   one glyph, so somebody has to choose which -- and the first pass chose the
   current state while every word on it named the action, putting a sun beside
   the word "Dark". A switch cannot make that mistake: both options are on
   screen, the raised chip marks the one in force, the other is the offer.
   VISUAL_IDENTITY_CONSTITUTION 4.9.

   The physics: the track is a dark instrument housing inset into either header
   field, and the chip is a key riding in it. A hard shadow under the top lip
   and a faint light line off the far wall keep the same control legible when
   the header is brand navy or the neutral Eclipse bar.

   The alternative reading -- two rocker keys, the active one pressed in -- was
   drawn and rejected: on a dark ground the raised key is the bright one, so the
   option you did NOT choose is the one the eye lands on. */
.theme-toggle{position:relative;display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;
  padding:3px;border-radius:999px;background:var(--switch-track,#040a13);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9),inset 0 2px 5px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(255,255,255,.06)}
.theme-chip{position:absolute;z-index:1;top:3px;left:3px;width:32px;height:28px;border-radius:999px;
  background:linear-gradient(var(--switch-chip-top,#2b4568),var(--switch-chip-bottom,#1a2c45));
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 3px 7px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .3s cubic-bezier(.4,0,.2,1);view-transition-name:theme-chip}
/* The chip travels; the icons never change identity. A sun that morphed into a
   moon would put us back to one glyph doing two jobs. */
.theme-toggle[data-theme="dark"] .theme-chip{transform:translateX(34px)}
.theme-seg{position:relative;z-index:2;display:grid;place-items:center;width:32px;height:28px;
  padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer}
.theme-glyph{width:17px;height:17px;overflow:visible}
.theme-glyph .disc{fill:#7d95b4;transition:fill var(--theme-paint-duration,.28s) ease}
.theme-glyph .rays{transition:opacity .28s ease}
.theme-glyph .rays line{stroke:#7d95b4;stroke-width:2.1;stroke-linecap:round;transition:stroke var(--theme-paint-duration,.28s) ease}
.theme-seg:hover .theme-glyph .disc{fill:#9db4d0}
.theme-seg:hover .theme-glyph .rays line{stroke:#9db4d0}
/* Colour and elevation agree: the icon on the chip is the one in force. */
.theme-seg[aria-pressed="true"] .theme-glyph .disc{fill:#E9B968}
.theme-seg[aria-pressed="true"] .theme-glyph .rays line{stroke:#E9B968}
.theme-seg[data-sets-theme="dark"][aria-pressed="true"] .theme-glyph .disc{fill:#C6DAF3}
@media (prefers-reduced-motion: reduce){
  .theme-chip,.theme-glyph .disc,.theme-glyph .rays,.theme-glyph .rays line{transition:none}
}
main{max-width:var(--workspace-max-width);min-height:calc(100dvh - 116px);margin:0 auto;padding:28px 28px 48px;background:var(--workspace);animation:pageIn .18s ease both;transition:background-color var(--theme-paint-duration,.2s) ease,color var(--theme-paint-duration,.2s) ease}
.workspace-edge-veil{
  position:fixed;z-index:4;left:50%;bottom:0;width:min(100%,var(--workspace-max-width));
  height:clamp(64px,9vh,92px);pointer-events:none;visibility:hidden;opacity:0;
  transform:translateX(-50%);background:linear-gradient(180deg,
    transparent 0%,color-mix(in srgb,var(--workspace-bg) 18%,transparent) 34%,
    color-mix(in srgb,var(--workspace-bg) 72%,transparent) 72%,var(--workspace-bg) 100%);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 38%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 38%,#000 100%);
  transition:opacity 120ms ease-out,visibility 0s linear 120ms;
}
body.workspace-environment.workspace-edge-veil-active .workspace-edge-veil{
  visibility:visible;opacity:1;transition:opacity 120ms ease-out,visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .workspace-edge-veil,
  body.workspace-environment.workspace-edge-veil-active .workspace-edge-veil{transition:none}
}
main header{position:static;top:auto;display:flex;grid-template-columns:none;grid-template-areas:none;
  padding:0;background:transparent;color:var(--text);border:0;z-index:auto}
.study-breadcrumb{display:block;margin:0 0 14px;color:var(--dim);font-size:13px}
.study-breadcrumb ol{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
.study-breadcrumb li{display:flex;align-items:center;gap:8px;min-width:0}
.study-breadcrumb li+li:before{content:"/";color:var(--line-strong)}
.study-breadcrumb a,.study-breadcrumb button{display:inline;background:none;border:0;border-radius:0;padding:0;color:var(--dim);
  font-size:inherit;font-weight:620;line-height:inherit;text-decoration:none;box-shadow:none;cursor:pointer}
.study-breadcrumb a:hover,.study-breadcrumb button:hover{color:var(--accent);text-decoration:underline}
.study-breadcrumb [aria-current="page"]{color:var(--text);font-weight:650}
.conversion-mode-nav{margin:0 0 14px}

/* The central canvas and outer environment deliberately invert: light mode
   presents an illuminated workspace inside dark application rails; dark mode
   presents a near-ink workspace inside pale environmental rails. */
body.workspace-dark.public-content-environment main,
body.workspace-dark.workspace-environment main,
body.workspace-dark .calendar-dialog,
body.workspace-dark .announcement-dialog,
body.workspace-dark .announcement-history,
body.workspace-dark .announcement-note{
  color-scheme:dark;
  /* ECLIPSE. The dark ground carries no hue.
     Adapted from the Vetrra palette of the same name: base #0f0f0f -- a black
     held ten levels off the floor, because #000 switches OLED pixels off,
     which shimmers under scrolling text and leaves nothing darker for a
     shadow to be -- with every surface above it mixed 4% toward the cool grey
     #7d848d. At the base that mix is below the 8-bit floor and the ground is
     dead neutral; by the card tier it appears (blue one step above red). The
     hue lives in the RISE, not in the ground, which is how an unlit surface
     behaves as it catches light. Text keeps that cool cast deliberately.

     Why not navy: a navy ground drags every warm hue on top of it toward grey
     by simultaneous contrast, and gold is the worst case because gold is
     navy's near-complement. The study-area icons and the nav filament are the
     things this app is made of, so the ground lets go of them. The swap costs
     no brightness at all -- Eclipse's luminance is 0.0048 against navy's
     0.0054. Only the cast is gone. */
  --bg:#0f0f0f;--workspace-bg:#0f0f0f;--workspace:var(--workspace-bg);--surface:#1d1e1e;--panel:#1d1e1e;--panel2:#262727;
  --line:#363637;--line-strong:#585959;--rule-strong:#4e4e4f;--text:#f1f5f9;--dim:#a9adb2;
  /* GOLD IS THE DARK-MODE ACTION COLOUR.
     Light mode is blue on white; dark mode is gold on black. The landing page
     already runs black and gold in its dark sections, so this makes the app
     agree with the marketing rather than inventing a second identity. It is
     also the pairing the ground was chosen for: gold is what suffered most on
     navy, being its near-complement, and on a neutral black it is at full
     strength.

     --warn moves off gold and onto orange. When the primary action and the
     warning state are the same colour, neither means anything. */
  --accent:#e9b968;--accent-strong:#d9a44a;--accent-soft:#3a2e17;--focus:#f5cf8a;
  --good:#68cda4;--bad:#f08e98;--warn:#e8934a;
  --correct-bg:#17392f;--correct-border:#4a9b7b;--correct-text:#c5f1df;
  --incorrect-bg:#47262d;--incorrect-border:#a85d68;--incorrect-text:#ffd0d5;
  background:var(--workspace);color:var(--text);
}
/* Links retain their authored role in dark mode. A former blanket anchor
   override turned neutral card titles, breadcrumbs, tabs, and ghost buttons
   blue simply because their container was an <a>. Real text links already
   receive --accent from the base anchor rule. */
body.workspace-dark.workspace-environment main .badge.safe,
body.workspace-dark.workspace-environment main .opts button.correct,
body.workspace-dark.workspace-environment main .answer-correct,
body.workspace-dark.workspace-environment main .result.good,
body.workspace-dark.workspace-environment main .vizblock.filled,
body.workspace-dark.workspace-environment main .matchgrid button.done,
body.workspace-dark.workspace-environment main .matchgrid button.reuse-hit,
body.workspace-dark.workspace-environment main .match-activity-correct .row,
body.workspace-dark.workspace-environment main .match-activity-correct select{background:#17392f;color:#b9ead6;border-color:#397c64}
body.workspace-dark.workspace-environment main .badge.unsafe,
body.workspace-dark.workspace-environment main .opts button.wrong,
body.workspace-dark.workspace-environment main .answer-wrong,
body.workspace-dark.workspace-environment main .result.bad,
body.workspace-dark.workspace-environment main .matchgrid button.flash,
body.workspace-dark.workspace-environment main .match-activity-wrong .row,
body.workspace-dark.workspace-environment main .match-activity-wrong select{background:#47262d;color:#ffc0c6;border-color:#92505a}
body.workspace-dark.workspace-environment main .badge.uncertain,
body.workspace-dark.workspace-environment main .result.close,
body.workspace-dark.workspace-environment main .safety,
body.workspace-dark.workspace-environment main .calendar-warning{background:#40361f;color:#f3d891;border-color:#7f6a34}
body.workspace-dark.workspace-environment main .badge.cat,
body.workspace-dark.workspace-environment main .opts button.sel,
body.workspace-dark.workspace-environment main .chips button.on,
body.workspace-dark.workspace-environment main .vizblock,
body.workspace-dark.workspace-environment main .vizladder .node{background:#203d61;color:#c8ddf8}
body.workspace-dark.workspace-environment main .multi-help{color:#c0d5ed}
body.workspace-dark.workspace-environment main .opts button.sel:after,
body.workspace-dark.workspace-environment main .match-pep b{color:#b9d5ff}
body.workspace-dark.workspace-environment main .latin,
body.workspace-dark.workspace-environment main .source-note a{color:#8dbcf5}
body.workspace-dark.workspace-environment main .rxcard,
body.workspace-dark.workspace-environment main .calc-workspace{background:#1c1d1d;color:var(--text)}
/* Dark mode preserves badge SEMANTICS, not just contrast: not-started=slate,
   introduced=blue, in-progress/reviewed=amber, complete/mastered=green.
   In-progress must never share the introduced blue. */
body.workspace-dark.workspace-environment main .state-badge.not-started{background:#2b2c2e;color:#bac6d4}
body.workspace-dark.workspace-environment main .state-badge.introduced{background:#203d61;color:#c8ddf8}
body.workspace-dark.workspace-environment main .state-badge.in-progress,
body.workspace-dark.workspace-environment main .state-badge.reviewed{background:#45391d;color:#f2d486}
body.workspace-dark.workspace-environment main .state-badge.lesson-complete,
body.workspace-dark.workspace-environment main .state-badge.independent,
body.workspace-dark.workspace-environment main .state-badge.mastered{background:#17392f;color:#b9ead6}
body.workspace-dark.workspace-environment main .status-in-progress,
body.workspace-dark.workspace-environment main .status-reviewed{border-left-color:#d3a843}
body.workspace-dark.workspace-environment main .status-lesson-complete,
body.workspace-dark.workspace-environment main .status-independent{border-left-color:#5b9df0}
body.workspace-dark.workspace-environment main .status-mastered{border-left-color:#8f80ea}
/* Quiet the dark month grid: many faint lines beat few loud ones. Cell
   borders sit below --line so the grid stops being a dominant object. */
body.workspace-dark.workspace-environment main .calendar-day{border-color:#2b2c2e}
body.workspace-dark.workspace-environment main .weekday-row{border-color:#2b2c2e}
body.workspace-dark.workspace-environment main .calendar-day.outside{background:#141414;color:#8b8d8f}
body.workspace-dark.workspace-environment main .calendar-day.selected{background:#262727}
body.workspace-dark.workspace-environment main .calendar-event{background:#262727;color:#e4e5e7}
body.workspace-dark.workspace-environment main .calendar-warning{background:#40361f;color:#f6dfa0;border-color:#94803f}
body.workspace-dark.workspace-environment main .course-filters button{background:var(--panel)}
body.workspace-dark.workspace-environment main .course-filters button.on{background:#2b2c2e;color:var(--text)}
body.workspace-dark.workspace-environment main .completion-check{background:#1d1e1e;color:#fff}
body.workspace-dark.workspace-environment main .release-item{background:#1d1e1e}
body.workspace-dark.workspace-environment main .reset-description,
body.workspace-dark.workspace-environment main .reset-confirm{background:#3b242a}
body.workspace-dark.workspace-environment main .danger-zone{border-color:#81505a}
body.workspace-dark.workspace-environment main button.danger{background:#3b242a;color:#ffb0b8;border-color:#81505a}
body.workspace-dark.workspace-environment main button.danger:hover:not(:disabled){background:#4a2931;border-color:#a96772}
body.workspace-dark.workspace-environment main .status-verified{color:#b9ead6;background:#17392f}
body.workspace-dark.workspace-environment main .status-pending{color:#f2d486;background:#45391d}
body.workspace-dark .calendar-dialog{background:var(--surface);color:var(--text)}
body.workspace-dark .calendar-dialog .agenda-meta,
body.workspace-dark .calendar-dialog .editor-intro,
body.workspace-dark .calendar-dialog .editor-source{color:var(--dim)}
body.workspace-dark .calendar-dialog .calendar-form label>span{color:#c4d0de}
body.workspace-dark .calendar-dialog .calendar-form input,
body.workspace-dark .calendar-dialog .calendar-form select,
body.workspace-dark .calendar-dialog .calendar-form textarea{background:var(--panel2);border-color:var(--line);color:var(--text)}
body.workspace-dark .calendar-dialog dl div,
body.workspace-dark .calendar-dialog .editor-source{border-color:var(--line)}
.connection-state{position:sticky;top:var(--app-header-height);z-index:4;padding:8px 16px;text-align:center;background:#4a3113;color:#ffe2a1;border-bottom:1px solid #7b5525;font-weight:700}
.request-progress{position:fixed;top:0;left:0;z-index:30;width:100%;height:3px;pointer-events:none;opacity:0;background:var(--accent);transition:opacity .12s ease}
.request-progress.active{opacity:1;animation:requestPulse 1s ease-in-out infinite alternate}
.card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;
  padding:20px 0;margin-bottom:16px;box-shadow:none;transition:border-color var(--theme-paint-duration,.16s) ease}
.card.interactive:hover{border-color:var(--accent)}
.grid{display:grid;gap:12px}
.grid.stats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.stat{background:transparent;border-right:1px solid var(--line);border-radius:0;padding:12px 16px;text-align:left}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:26px;font-weight:680;letter-spacing:-.02em}
.stat span{color:var(--dim);font-size:12.5px}
h2{font-size:16px;margin:0 0 12px}
h3{font-size:14px;margin:16px 0 8px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px}
select,input[type=text]{background:var(--panel2);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:9px 12px;font-size:15px;min-height:44px}
input[type=password]{min-height:44px}
input[type=text]{width:100%}
/* Navigation actions render as real anchors so right-click / middle-click
   "open in new tab" works; they share the button look exactly. */
main a.primary,main a.ghost{text-decoration:none;display:inline-flex;align-items:center;
  justify-content:center;text-align:center;line-height:1.35}
button.primary,main a.primary{background:var(--accent-strong);border:1px solid #4d8be6;color:#fff;padding:10px 18px;
  border-radius:6px;font-size:14px;cursor:pointer;font-weight:650;
  box-shadow:none;transition:background var(--theme-paint-duration,.16s) ease,border-color var(--theme-paint-duration,.16s) ease}
button.ghost,main a.ghost{background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:9px 15px;border-radius:6px;font-size:14px;cursor:pointer}
button.primary:hover,main a.primary:hover{background:#397bd8;border-color:#6aa3f2}
/* Neutral actions communicate hover through elevation, not a competing blue
   perimeter. Header controls keep their separately authored header treatment. */
button.danger{background:#fff4f5;border:1px solid #d58a92;color:#992f3b;padding:9px 15px;border-radius:9px;font-size:14px;font-weight:680;cursor:pointer}
button.danger:hover:not(:disabled){background:#fde7ea;border-color:#bd5965}button.danger:disabled{opacity:.45}
/* KEYBOARD FOCUS. Not a mode and not optional: it is the only thing telling
   someone navigating by Tab which control they are on, and WCAG 2.4.7 (AA) is
   what institutional buyers check for. It never appears on a mouse click --
   :focus-visible, not :focus -- so it costs a pointer user nothing.

   What it must not be is the browser default look. A 3px slab floating 4px off
   the control reads as an error state. Two pixels, hugging the shape, in the
   theme's own accent: the same ring the design would have drawn on purpose. */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.62}
/* An enabled primary action must never read as disabled: keep the fill
   saturated and the label fully white in both themes. Disabled primaries
   drop the accent entirely instead of dimming a blue fill into an
   ambiguous middle state. */
/* A gold fill carries dark text, exactly as the landing page's "Try for free"
   does. White on gold is the one combination this palette must never make. */
body.workspace-dark.workspace-environment main button.primary,body.workspace-dark.workspace-environment main a.primary{background:#e9b968;border-color:#f0cc8d;color:#1b1405}
body.workspace-dark.workspace-environment main button.primary:hover:not(:disabled),body.workspace-dark.workspace-environment main a.primary:hover{background:#f2c87f;border-color:#f7dcae}
button.primary:disabled{background:var(--panel2);border-color:var(--line);color:var(--dim);opacity:1}
[data-answer-state]:disabled{opacity:1}

/* Premium bounded actions -------------------------------------------------
   The landing CTA established the product's authored material model: a clear
   light source, contact and ambient depth, a short lift, a faster press, an
   intentional focus ring, stable disabled geometry, and an in-place busy
   state. Apply that model to actions only. Tabs, filters, answer options,
   calendar cells, navigation, and text controls deliberately do not match
   this selector because selection is not physical elevation. */
:is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label){
  --action-highlight-opacity:.25;
  --action-contact-shadow:0 2px 3px rgba(var(--elev-shade),.16);
  --action-ambient-shadow:0 7px 16px rgba(var(--elev-tint),.12);
  --action-hover-shadow:0 3px 4px rgba(var(--elev-shade),.18),0 11px 22px rgba(var(--elev-tint),.16);
  --action-pressed-shadow:0 1px 2px rgba(var(--elev-shade),.2),0 3px 7px rgba(var(--elev-tint),.1);
  --action-hover-y:-2px;--action-hover-scale:1.015;
  --action-press-y:1px;--action-press-scale:.988;
  --action-busy-color:currentColor;
  --action-focus-ring:color-mix(in srgb,var(--text) 76%,transparent);
  position:relative;isolation:isolate;overflow:hidden;transform:translateY(0) scale(1);
  transform-origin:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),
    var(--action-contact-shadow),var(--action-ambient-shadow);
  filter:saturate(1) brightness(1);
  transition:transform var(--action-rest-duration) var(--action-ease),
    box-shadow var(--theme-paint-duration,var(--action-rest-duration)) ease-out,filter var(--action-rest-duration) ease-out,
    background-color var(--theme-paint-duration,var(--action-rest-duration)) ease-out,border-color var(--theme-paint-duration,var(--action-rest-duration)) ease-out,
    color var(--theme-paint-duration,var(--action-rest-duration)) ease-out;
}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label)::before{
  content:"";position:absolute;z-index:0;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.07) 25%,transparent 49%);
  opacity:var(--action-highlight-opacity);transition:opacity var(--action-rest-duration) ease-out;
}
/* Primary depth is cobalt, danger depth is red, and neutral controls retain
   slate depth. The color hierarchy therefore stays exactly where it belongs. */
:is(button.primary:not(.landing-cta),main a.primary,.announcement-cta){
  --action-highlight-opacity:.3;--action-busy-color:#fff;
  --action-ambient-shadow:0 7px 16px rgba(var(--elev-tint),.2);
  --action-hover-shadow:0 3px 4px rgba(var(--elev-shade),.2),0 11px 22px rgba(var(--elev-tint),.27);
  --action-pressed-shadow:0 1px 2px rgba(var(--elev-shade),.22),0 3px 7px rgba(var(--elev-tint),.15);
}
:is(button.danger,main a.danger){
  --action-highlight-opacity:.42;--action-busy-color:var(--bad);
  --action-ambient-shadow:0 7px 16px rgba(181,62,74,.13);
  --action-hover-shadow:0 3px 4px rgba(var(--elev-shade),.16),0 10px 20px rgba(181,62,74,.2);
  --action-pressed-shadow:0 1px 2px rgba(var(--elev-shade),.18),0 3px 7px rgba(181,62,74,.12);
}
:is(header button.ghost,header a.ghost,.theme-seg,.mobile-menu,.provider-button){
  --action-highlight-opacity:.16;--action-busy-color:#fff;
  --action-contact-shadow:0 2px 3px rgba(0,0,0,.24);
  --action-ambient-shadow:0 7px 16px rgba(0,0,0,.18);
  --action-hover-shadow:0 3px 4px rgba(0,0,0,.28),0 10px 20px rgba(0,0,0,.24);
  --action-pressed-shadow:0 1px 2px rgba(0,0,0,.3),0 3px 7px rgba(0,0,0,.2);
}
header :is(button.ghost,a.ghost,.theme-seg,.mobile-menu){--action-focus-ring:var(--focus);--action-busy-color:var(--header-control-text)}
header button.account-menu-trigger{--action-focus-ring:var(--header-focus)}
:is(button.compact,main a.compact){
  --action-hover-y:-1px;--action-hover-scale:1.01;
  --action-press-y:.5px;--action-press-scale:.992;
}
@media (hover:hover) and (pointer:fine){
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]){
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),var(--action-hover-shadow);
    filter:saturate(1.025) brightness(1.025);
    transform:translateY(var(--action-hover-y)) scale(var(--action-hover-scale));
    transition-duration:var(--action-hover-duration);
  }
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):hover::before{opacity:calc(var(--action-highlight-opacity) + .18)}
}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]){
  box-shadow:inset 0 1px 2px rgba(var(--elev-shade),.2),var(--action-pressed-shadow);
  filter:saturate(1.02) brightness(.97);
  transform:translateY(var(--action-press-y)) scale(var(--action-press-scale));
  transition-duration:var(--action-press-duration);
}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):active::before{opacity:.1;transition-duration:var(--action-press-duration)}
/* A physical press ends on mouse-up. An owned action does not. Reuse the
   exact pressed geometry while its destination, scene, processing command,
   dialog, sheet, menu, or popover is still unresolved. */
:is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):is([data-action-owned="true"],[data-surface-open="true"]):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]){
  box-shadow:inset 0 1px 2px rgba(var(--elev-shade),.2),var(--action-pressed-shadow);
  filter:saturate(1.02) brightness(.97);
  transform:translateY(var(--action-press-y)) scale(var(--action-press-scale));
  transition-duration:var(--action-press-duration);
}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):is([data-action-owned="true"],[data-surface-open="true"])::before{opacity:.1;transition-duration:var(--action-press-duration)}
/* Custom calendar rows and native menu summaries are real surface owners but
   intentionally are not styled as bounded CTA buttons. They still communicate
   engagement through the same down-and-in geometry. */
:where(button,[role="button"],summary,label.ghost):is([data-action-owned="true"],[data-surface-open="true"]){
  transform:translateY(var(--action-press-y,1px)) scale(var(--action-press-scale,.988));
  filter:saturate(1.02) brightness(.97);
}
:is(.reference-menu,.study-area-actions)>summary{
  transform:translateY(0) scale(1);transform-origin:center;
  transition:transform var(--action-rest-duration) var(--action-ease),
    box-shadow var(--theme-paint-duration,var(--action-rest-duration)) ease-out,filter var(--action-rest-duration) ease-out;
}
:is(.reference-menu,.study-area-actions)>summary[data-surface-open="true"]{
  box-shadow:inset 0 1px 2px rgba(var(--elev-shade),.2),0 1px 2px rgba(var(--elev-shade),.18);
}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):focus-visible{outline:2px solid var(--action-focus-ring);outline-offset:2px}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):disabled,
:is(main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta)[aria-disabled="true"]{
  box-shadow:none;filter:none;transform:none;cursor:not-allowed;
}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):disabled::before,
:is(main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta)[aria-disabled="true"]::before{
  opacity:.12
}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label)[aria-busy="true"]{
  color:transparent!important;pointer-events:none;cursor:progress;box-shadow:none;filter:none;transform:none
}
/* A committed command may be disabled to prevent duplication, but its owner
   still has an unresolved visible consequence and must retain pressed depth. */
:is(button.primary:not(.landing-cta),button.ghost,button.danger)[data-action-owned="true"]:is(:disabled,[aria-busy="true"]){
  box-shadow:inset 0 1px 2px rgba(var(--elev-shade),.2),var(--action-pressed-shadow);filter:saturate(1.02) brightness(.97);
  transform:translateY(var(--action-press-y)) scale(var(--action-press-scale));
}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label)[aria-busy="true"]>*{opacity:0}
:is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label)[aria-busy="true"]::after{
  content:"";position:absolute;z-index:2;left:50%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
  border:2px solid color-mix(in srgb,var(--action-busy-color) 34%,transparent);
  border-top-color:var(--action-busy-color);border-radius:50%;animation:action-button-spin .62s linear infinite
}
@keyframes action-button-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label),
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label)::before{transition:none}
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):hover,
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label):active{transform:none}
  :where(button,[role="button"],summary,label.ghost)[data-action-owned="true"]{
    outline:2px solid currentColor;outline-offset:2px;transform:none;box-shadow:none;filter:none;
  }
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label)[aria-busy="true"]::after{animation:none}
}
@media (forced-colors:active){
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label){box-shadow:none;filter:none}
  :is(button.primary:not(.landing-cta),button.ghost,button.danger,main a.primary,main a.ghost,main a.danger,header a.ghost,.announcement-cta,.provider-button,.theme-seg,.mobile-menu,label.ghost.library-file-label)::before{display:none}
  :where(button,[role="button"],summary,label.ghost)[data-action-owned="true"]{
    outline:2px solid Highlight;outline-offset:2px;transform:none;box-shadow:none;filter:none;
  }
}
/* THE CARD AT REST.
   Same card, same mark, same place on the page as a running question -- with
   nothing on it that is not true yet. No counter, no progress, no End session,
   no scope line: a session has not begun, and chrome that describes one is a
   lie the page tells on the way in. VISUAL_IDENTITY_CONSTITUTION 7.6. */
.activity-ready .stage-brow{border-bottom:0;padding-bottom:0}
.activity-ready .stage-ask{margin-top:16px}
.ready-options{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 26px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line)}
.ready-option{display:grid;gap:6px;font-size:12.5px;color:var(--dim)}
.ready-option-wide{align-items:flex-start}
.ready-option>span{font-weight:650}
.ready-option input[type="number"]{width:92px;height:44px;padding:0 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--workspace);color:var(--text);font:inherit;font-size:15px;
  font-variant-numeric:tabular-nums}
.ready-option small{color:var(--dim);font-size:11.5px}
.ready-option .scope-picker{margin:0}
.ready-go{margin-top:24px}
.ready-go .primary{min-height:48px;padding:0 26px;font-size:15px}
@media(max-width:560px){
  .ready-options{gap:14px}
  .ready-option,.ready-option-wide{width:100%}
  .ready-go .primary{width:100%}
}
.ready-conditional-slot{display:contents}
/* The deeper workspaces sit under the activity. While a session is running they
   quieten with the rest of the setup chrome -- three "Open" buttons beneath a
   live question compete with the one thing on the page that matters. They stay
   reachable: hover or keyboard focus brings them back to full weight. */
.workspace-deeper{margin-top:34px;padding-top:8px}
body.activity-in-play .workspace-deeper{opacity:.55;transition:opacity .2s ease}
body.activity-in-play .workspace-deeper:hover,
body.activity-in-play .workspace-deeper:focus-within{opacity:1}
/* Matching wears the same stage. The colour key was a bordered aside at the
   top of the card -- a panel inside a panel -- which is a lot of chrome to
   name one hue. It reads as a quiet line under the instruction instead. */
.match-group-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:14px 0 0;padding:0;border:0;background:transparent}
.match-group-legend-title{font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim)}
.match-group-legend>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.activity-stage .matchgrid{margin-top:20px}
/* The message line is feedback now, not the instruction: the ask moved above
   the board where it is read before you act, not after. */
.activity-stage #mMsg{text-align:center;color:var(--dim);font-size:13px}
.activity-stage #mMsg:empty{display:none}
/* Matching's own measure of progress is elapsed time; it rides in the rail
   beside the counter rather than floating over the board. */
.stage-rail-count#mClock{font-variant-numeric:tabular-nums}
/* SETUP IS NOT PLAY.
   The mode chips and the scope selector are decisions you make ONCE, before a
   question exists. Leaving them on screen through all eight questions meant
   the page never left setup: the card had to compete for attention with the
   controls that configured it, which is most of why the landing page's demo
   read as cleaner than the real screen it was advertising.

   They do not disappear -- disappearing controls are their own bug -- they
   quieten to a strip that stays reachable, and the card takes the weight.
   VISUAL_IDENTITY_CONSTITUTION 7.1. */
body.activity-in-play .session-bar{
  opacity:.62;transition:opacity .2s ease}
body.activity-in-play .session-bar:hover,
body.activity-in-play .session-bar:focus-within{opacity:1}
body.activity-in-play .mode-switcher .mode-chip:not(.is-active){font-weight:600}
/* THE ACTIVITY STAGE -------------------------------------------------------
   An activity screen has four jobs: say where you are, present one prompt,
   take the answer, give the verdict. The old screen gave all four the same
   weight and stacked the session's configuration on top, so the question had
   to compete with the controls that set it up. Here the card is the only
   object with elevation on the page: the eye has exactly one place to land.

   The rule that keeps it clean: ANYTHING CONSTANT ACROSS THE SESSION BELONGS
   TO THE RAIL; THE CARD CARRIES ONLY WHAT CHANGES.
   VISUAL_IDENTITY_CONSTITUTION 7.1. */
.stage-rail{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 0}
.stage-rail-scope{font-size:12px;font-weight:600;color:var(--dim);letter-spacing:.01em}
.stage-rail-end{margin-left:auto;display:flex;align-items:center;gap:14px}
.stage-rail-count{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.stage-exit{border:0;background:transparent;color:var(--dim);font:inherit;font-size:12.5px;
  padding:4px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line)}
.stage-exit:hover{color:var(--text)}
.stage-exit:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}

/* Segments, not a bar. A bar says how far; segments say how it is going. */
.stage-segments{display:flex;gap:4px;margin:13px 0 24px}
.stage-seg{flex:1;height:3px;border-radius:2px;background:var(--line);
  transition:background var(--theme-paint-duration,.35s) ease}
.stage-seg.is-done{background:var(--good)}
.stage-seg.is-miss{background:var(--bad)}
.stage-seg.is-here{background:var(--accent)}

.activity-stage{position:relative;overflow:hidden;
  transition:height .34s cubic-bezier(.4,0,.2,1)}
/* A prompt card is a reading-and-response surface, not a page-sized canvas.
   Keeping its measure close to the controls prevents a short question from
   producing a large, vacant right-hand panel on wide screens. Activities that
   genuinely spend horizontal space opt into one of the wider variants below. */
.card:is([data-activity-stage],[data-activity-ready]){
  width:100%;max-width:760px;margin-left:auto;margin-right:auto;border:0
}
.card:is([data-activity-stage],[data-activity-ready]).activity-stage-standard{max-width:900px}
.card:is([data-activity-stage],[data-activity-ready]).activity-stage-wide{max-width:none}
.activity-stage .stage-scene{animation:stageEnter .34s cubic-bezier(.2,.7,.3,1) both}
.activity-stage .stage-scene.is-leaving{animation:stageLeave .2s cubic-bezier(.4,0,1,1) both}
@keyframes stageEnter{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes stageLeave{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-22px)}}

/* The eyebrow: what KIND of question, before you read the question. */
.stage-brow{display:flex;align-items:center;gap:10px;padding-bottom:15px;
  border-bottom:1px solid var(--line)}
.activity-mark{display:inline-flex;flex:0 0 auto;width:30px;height:30px}
.activity-mark .study-glyph{width:100%;height:100%;display:block}
.stage-brow-label{font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.stage-brow-count{margin-left:auto;font-size:11px;font-weight:650;letter-spacing:.09em;
  color:var(--dim);font-variant-numeric:tabular-nums}

/* The subject is the poster. It is the largest thing on the screen because it
   is what the question is ABOUT; the ask is a caption under it. */
.stage-ask{margin:24px 0 0}
.stage-subject{margin:0;font-size:clamp(31px,5vw,44px);font-weight:600;
  letter-spacing:-.032em;line-height:1.03;text-wrap:balance}
.stage-instruction{margin:10px 0 0;font-size:13.5px;color:var(--dim)}
/* The field starts where the subject starts. The shared .answerbox centres
   itself in a 520px column, which on the stage left it floating inboard of the
   drug name it belongs to -- the two read as unrelated objects. */
.activity-stage .answerbox{margin:20px 0 0;max-width:560px}
.activity-stage .answerbox input{flex:1;min-width:0}
.stage-after:empty{display:none}
.stage-after{margin-top:18px}
.stage-brow-step{margin-left:auto;font-size:11px;font-weight:650;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);font-variant-numeric:tabular-nums}

/* THE VIGNETTE.
   A case has no subject to enlarge -- "A fictional patient presents with a
   condition the course lists as 'Fungal Infection'." is a sentence, and set in
   display weight and centred it read as a headline nobody wrote. It gets
   reading measure, reading weight, and the ask beneath it in the same
   instruction voice every other activity uses. VISUAL_IDENTITY_CONSTITUTION 7.7. */
.stage-vignette{margin:0;font-size:clamp(19px,2.4vw,23px);font-weight:450;
  line-height:1.42;letter-spacing:-.008em;max-width:34em;color:var(--text);text-wrap:pretty}
.stage-ask-vignette .stage-instruction{margin-top:14px;font-size:14px;font-weight:600;
  color:var(--text)}
/* What the subject IS, when the name alone does not say it. */
.stage-subject-note{margin:7px 0 0;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.stage-subject-note+.stage-instruction{margin-top:18px;font-size:14.5px;color:var(--text)}
/* The rule of this board -- how many are right, or that nothing is revealed
   until you submit. It is not the ask, so it does not compete with it. */
.stage-note{margin:10px 0 0;font-size:12px;color:var(--dim)}
.stage-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.stage-rail-note{margin:8px 0 0;font-size:12px;color:var(--dim)}

/* The ready card's own furniture ----------------------------------------- */
.ready-option-row{flex:1 1 100%}
/* A full-width row that still reads at a comfortable measure: the cap goes on
   the text, not on the flex item, or the next control wraps up beside it. */
.ready-hint{flex:1 1 100%;margin:2px 0 0;font-size:12.5px;color:var(--dim)}
.ready-hint>span{display:block;max-width:52em}
/* The long tail always sorts after the decisions it is the tail of. */
.ready-more{order:5}
.ready-note{margin:20px 0 0;font-size:12px;color:var(--dim);max-width:46em}
.ready-more{flex:1 1 100%;margin-top:4px}
.ready-more>summary{cursor:pointer;font-size:12.5px;font-weight:650;color:var(--dim);
  padding:6px 0;list-style:none;display:inline-flex;align-items:center;gap:8px}
.ready-more>summary::-webkit-details-marker{display:none}
.ready-more>summary::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .16s ease}
.ready-more[open]>summary::before{transform:rotate(45deg)}
.ready-more>summary:hover{color:var(--text)}
.ready-more-row{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:14px}
.ready-more-row label{display:grid;gap:6px;font-size:12.5px;color:var(--dim)}
.ready-more-row label>span{font-weight:650}
.ready-options .session-tool-chips{display:flex;flex-wrap:wrap;gap:8px}
.ready-option-wide .session-tool-chips{margin-top:2px}
.ready-options .mode-chip[disabled]{opacity:.42;cursor:not-allowed}

/* CALCULATION'S SCOPE BROWSER ---------------------------------------------
   Drug Mastery scopes to one of ~30 interchangeable weeks, so one select is
   honest there. A calculation lesson is not interchangeable with another, and
   there are 29 of them across 11 topics, each carrying its own mastery state.
   So the scope is browsed: topics first, each showing what it holds and how
   far in you are, opening to its own lessons only when you want one. */
.calc-scope{gap:10px}
/* Wide enough for the names the curriculum actually uses. At 232px these sat
   six to a row and spent most of each row on the count, the cells and the
   caret, leaving about 76px for the label -- so "Dose, Stock Strength &
   Measurable Volume" and "Pediatric Calculation Mathematics" both ellipsised
   away. A browser whose labels cannot be read is not a browser. */
.calc-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:6px;width:100%;margin-top:2px}
.calc-topic{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;
  gap:10px;width:100%;text-align:left;font:inherit;font-size:13.5px;color:var(--text);
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;cursor:pointer;transition:border-color var(--theme-paint-duration,.14s),background var(--theme-paint-duration,.14s)}
.calc-topic:hover{border-color:var(--line-strong)}
.calc-topic.is-chosen{border-color:var(--accent);background:var(--accent-soft)}
/* Wrapping, not ellipsis: a long name loses nothing, it takes a second line,
   and the grid keeps every row in a band the same height. */
.calc-topic-name{min-width:0;font-weight:600;text-wrap:balance}
.calc-topic-count{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.calc-topic-cells{display:flex;gap:2px}
.calc-topic-caret{width:6px;height:6px;border-right:1.5px solid var(--dim);
  border-bottom:1.5px solid var(--dim);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .16s ease}
.calc-topic.is-open .calc-topic-caret{transform:rotate(225deg) translate(-2px,-2px)}

/* One cell per lesson: the state ramp runs from an empty outline to a filled
   mark, so a topic's progress reads before any of its words do. */
.calc-cell{display:block;width:9px;height:9px;border-radius:2px;
  border:1px solid var(--line-strong);background:transparent}
.calc-cell.in-progress{background:linear-gradient(90deg,var(--accent) 60%,transparent 60%);
  border-color:var(--accent)}
.calc-cell.lesson-complete{background:var(--accent-soft);border-color:var(--accent)}
.calc-cell.independent{background:var(--accent);border-color:var(--accent)}
.calc-cell.mastered{background:var(--accent);border-color:var(--text);box-shadow:inset 0 0 0 1px var(--accent-soft)}

.calc-lesson-picks{display:flex;flex-direction:column;gap:1px;width:100%;margin-top:2px;
  background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.calc-lesson-pick{display:grid;grid-template-columns:1fr auto auto;align-items:center;
  gap:14px;width:100%;text-align:left;font:inherit;font-size:13.5px;color:var(--text);
  background:var(--surface);border:0;padding:9px 12px;cursor:pointer}
.calc-lesson-pick:hover{background:var(--panel2)}
.calc-lesson-pick.is-chosen{background:var(--accent-soft)}
.calc-lesson-all{font-weight:650}
.calc-lesson-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc-lesson-ops{font-size:12px;color:var(--dim);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.calc-lesson-state{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--dim);white-space:nowrap}
.calc-lesson-state i{width:8px;height:8px;border-radius:2px;flex:none;
  border:1px solid var(--line-strong)}
.calc-lesson-state.in-progress i{background:linear-gradient(90deg,var(--accent) 60%,transparent 60%);border-color:var(--accent)}
.calc-lesson-state.independent i{background:var(--accent);border-color:var(--accent)}
.calc-lesson-state.lesson-complete i{background:var(--accent-soft);border-color:var(--accent)}
.calc-lesson-state.mastered i{background:var(--accent);border-color:var(--text)}

.chip-count{opacity:.62;font-weight:400;font-variant-numeric:tabular-nums}
.mode-chip.is-active .chip-count{opacity:.75}

/* The Start button says which session you are about to enter, not just that
   one will begin. */
.calc-go-detail{margin:10px 0 0;font-size:12.5px;color:var(--dim)}
.calc-go-detail b{color:var(--text);font-weight:650}

.calc-coverage-grid{display:flex;flex-wrap:wrap;gap:12px 24px}
.calc-coverage-topic{display:flex;flex-direction:column;gap:5px}
.calc-coverage-topic span{font-size:11.5px;color:var(--dim)}
.calc-coverage-cells{display:flex;gap:3px}
.calc-coverage-cells .calc-cell{width:13px;height:13px;border-radius:3px}
.calc-key-row{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;font-size:12px;
  color:var(--dim)}
.calc-key{display:inline-flex;align-items:center;gap:6px}
.calc-key i{width:9px;height:9px;border-radius:2px;border:1px solid var(--line-strong)}
.calc-key.independent i{background:var(--accent);border-color:var(--accent)}
.calc-key.in-progress i{background:linear-gradient(90deg,var(--accent) 60%,transparent 60%);border-color:var(--accent)}
@media (max-width:640px){
  .calc-topics{grid-template-columns:1fr}
  .calc-topic-cells{display:none}
}

/* A choice owns a region, and the region needs an identity to be redrawn on
   its own -- but .ready-options lays its children out as flex items, so the
   wrapper must not become one itself. */
.calc-slot{display:contents}

/* The evidence ledger beneath the card. */
.calc-evidence table{width:100%;border-collapse:collapse;margin-top:4px}
.calc-evidence th{text-align:left;font-size:11px;font-weight:660;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dim);padding:0 12px 6px 0;font-weight:650}
.calc-evidence td{padding:7px 12px 7px 0;font-size:13px;vertical-align:middle;
  border-top:1px solid var(--line)}
.calc-evidence td:last-child{width:38%;padding-right:0}
.calc-evidence-count{font-variant-numeric:tabular-nums;color:var(--dim);white-space:nowrap}
.calc-evidence-note{display:block;font-size:11.5px;color:var(--dim);margin-top:1px}
.calc-evidence .muted.small{margin-top:14px;font-size:12px;max-width:56em}

/* An activity's own record, under the card rather than in front of it. */
.ready-aside{margin-top:30px}
.ready-aside-line{margin:0 0 14px;font-size:13px;color:var(--dim);display:flex;
  flex-wrap:wrap;gap:4px 10px}
.ready-aside-line b{color:var(--text)}
.ready-aside table{width:100%;border-collapse:collapse;font-size:13px}
.ready-aside th{text-align:left;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);font-weight:700;padding:0 0 8px}
.ready-aside td{padding:9px 0;border-top:1px solid var(--line);color:var(--text)}
.ready-aside .muted.small{font-size:12px;margin-top:10px}

/* The map's board sits on the stage, so its bays follow the stage's column. */
.activity-stage .dispatch-bays{margin-top:20px;max-width:640px}
.activity-stage .sr-matrix-wrap{margin-top:20px;overflow-x:auto}

@media (prefers-reduced-motion:reduce){
  .activity-stage,.stage-seg{transition:none}
  .activity-stage .stage-scene,.activity-stage .stage-scene.is-leaving{animation:none}
}
@media(max-width:560px){
  .stage-brow-count,.stage-brow-step{font-size:10.5px}
}
/* Quiet header utilities --------------------------------------------------
   The theme switch, the account menu, and the landing Sign in action remain
   premium controls, but their resting shape
   comes from fill and spacing rather than a visible rim. Motion and elevation
   still answer hover/press; borders, bevels, and directional edge light do not. */
body>header button.account-menu-trigger.account-menu-trigger,
body.landing-environment>header button.landing-sign-in.landing-sign-in{
  --action-highlight-opacity:0;border-color:transparent;box-shadow:none
}
body.landing-environment>header button.landing-sign-in.landing-sign-in{
  --action-focus-ring:var(--header-focus)
}
body>header button.account-menu-trigger.account-menu-trigger::before,
body.landing-environment>header button.landing-sign-in.landing-sign-in::before{display:none}
@media (hover:hover) and (pointer:fine){
  body>header button.account-menu-trigger.account-menu-trigger:hover:not(:disabled):not([aria-busy="true"]),
  body.landing-environment>header button.landing-sign-in.landing-sign-in:hover:not(:disabled):not([aria-busy="true"]){
    border-color:transparent;box-shadow:0 3px 4px rgba(0,0,0,.25),0 10px 20px rgba(0,0,0,.21)
  }
}
body>header button.account-menu-trigger.account-menu-trigger:active:not(:disabled):not([aria-busy="true"]),
body.landing-environment>header button.landing-sign-in.landing-sign-in:active:not(:disabled):not([aria-busy="true"]){
  border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.26),0 3px 7px rgba(0,0,0,.15)
}
/* The switch segments sit inside the groove, so every scrap of elevation
   belongs to the chip. A segment is a transparent window: the action model's
   hover treatment -- an inset white edge light plus a lift -- draws a bright
   arc cast by nothing and jogs the icon, which is exactly what it looked like
   before this block existed.

   These selectors carry the extra .theme-toggle class deliberately. The shared
   rules are wrapped in :is(), and :is() takes the specificity of its most
   specific argument -- label.ghost.library-file-label, at two classes -- so a
   plain doubled-class override loses to them. Anything overriding the action
   model from outside needs to clear that bar, not the bar the short selectors
   in the list suggest.

   The segments keep the parts of the model that are behaviour rather than
   material: focus ring, busy, disabled, reduced motion, forced colours. */
body>header .theme-toggle .theme-seg.theme-seg{
  --action-highlight-opacity:0;border-color:transparent;background:transparent;
  box-shadow:none;filter:none;transform:none;
  /* header :is(...) sets --action-focus-ring:var(--focus), but the action
     model's own default sits on a higher-specificity :is() list and wins, so
     the ring resolves to near-black #152237 -- invisible on the navy header.
     A wordless two-target control cannot afford an invisible focus ring, so it
     is set here where the specificity actually holds. */
  --action-focus-ring:var(--focus)
}
body>header .theme-toggle .theme-seg.theme-seg::before{display:none}
body>header .theme-toggle .theme-seg.theme-seg:hover:not(:disabled):not([aria-busy="true"]),
body>header .theme-toggle .theme-seg.theme-seg:active:not(:disabled):not([aria-busy="true"]),
body>header .theme-toggle .theme-seg.theme-seg[data-action-owned="true"],
body>header .theme-toggle .theme-seg.theme-seg[data-surface-open="true"]{
  border-color:transparent;background:transparent;box-shadow:none;filter:none;transform:none
}
body>header button.account-menu-trigger.account-menu-trigger[data-surface-open="true"]:not(:disabled):not([aria-busy="true"]){
  border-color:transparent;box-shadow:0 1px 2px rgba(0,0,0,.26),0 3px 7px rgba(0,0,0,.15)
}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600}
.badge.safe{background:#e2f4ec;color:var(--good)}
.badge.unsafe{background:#fde7e9;color:var(--bad)}
.badge.uncertain{background:#fff3d7;color:var(--warn)}
.badge.cat{background:#e4edfb;color:#285d9f}
.prompt{font-size:34px;font-weight:680;letter-spacing:-.025em;text-align:center;margin:22px 0 6px}
.prompt.small{font-size:22px}
.sub{color:var(--dim);text-align:center;margin-bottom:18px}
.opts{display:grid;gap:9px;max-width:520px;margin:0 auto}
/* On the stage the field starts where the subject starts. Centring itself in a
   520px column left the answers floating inboard of the question they answer;
   this is geometry only -- .opts stays outside the bounded-action model. */
.activity-stage .opts{margin:22px 0 0;max-width:620px}
.answer-elimination-row{position:relative;display:block}
.answer-elimination-row>.answer-elimination-choice{min-width:0;width:100%;margin:0}
.opts .answer-elimination-row>button.answer-elimination-choice,
.answer-elimination-row>label.answer-elimination-choice{padding-right:58px}
.answer-elimination-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:44px;height:44px;
  border:0;border-radius:9px;background:transparent;color:var(--dim);
  cursor:pointer;transition:border-color var(--theme-paint-duration,.16s) ease,background var(--theme-paint-duration,.16s) ease,color var(--theme-paint-duration,.16s) ease,opacity .16s ease}
.answer-elimination-toggle:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--text)}
.answer-elimination-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.answer-elimination-toggle[aria-disabled="true"]{cursor:not-allowed;opacity:.5}
[data-answer-elimination][data-answer-elimination-locked="true"] .answer-elimination-toggle{display:none}
.answer-elimination-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.answer-elimination-toggle .eye-slash{opacity:0;transition:opacity .16s ease}
.answer-elimination-row.is-eliminated>.answer-elimination-choice{opacity:.42;text-decoration:line-through;
  text-decoration-thickness:1.5px;filter:saturate(.25)}
.answer-elimination-row.is-eliminated>.answer-elimination-toggle{background:color-mix(in srgb,var(--panel) 82%,transparent);color:var(--muted)}
.answer-elimination-row.is-eliminated>.answer-elimination-toggle .eye-slash{opacity:1}
.opts button{background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:12px;border-radius:10px;font-size:15px;cursor:pointer;text-align:left}
.opts button:hover{border-color:var(--accent)}
.opts button.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 4px 0 0 var(--accent);transform:translateY(-1px)}
.opts button.sel:after{content:"Selected  ✓";float:right;margin-left:12px;color:var(--accent-strong);font-size:11px;font-weight:750;letter-spacing:.01em}
.opts button.correct,.answer-correct{
  border-color:var(--correct-border)!important;background:var(--correct-bg)!important;
  color:var(--correct-text)!important;box-shadow:inset 4px 0 0 var(--correct-border)!important
}
.opts button.wrong,.answer-wrong{
  border-color:var(--incorrect-border)!important;background:var(--incorrect-bg)!important;
  color:var(--incorrect-text)!important;box-shadow:inset 4px 0 0 var(--incorrect-border)!important
}
input.answer-correct,textarea.answer-correct,select.answer-correct,
input.answer-wrong,textarea.answer-wrong,select.answer-wrong{border-width:2px!important}
.answer-correct,.answer-wrong{transition:background-color var(--theme-paint-duration,.18s) ease,border-color var(--theme-paint-duration,.18s) ease,color var(--theme-paint-duration,.18s) ease,box-shadow var(--theme-paint-duration,.18s) ease}
.opts button.sel.correct:after{content:"Selected  ✓";color:var(--good)}
.opts button.sel.wrong:after{content:"Your selection  ✕";color:var(--bad)}
.order-options button{display:flex;align-items:center;gap:12px}
.order-options button.sel:after{display:none}
.order-choice-label{min-width:0;flex:1}
.order-pick-badge,.order-position-number{display:inline-grid;place-items:center;flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;font-size:12px;font-weight:800}
.order-pick-badge:empty{display:none}
.order-pick-badge{order:-1;background:var(--accent);color:var(--panel)}
.order-comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;
  margin:14px 0;text-align:left}
.order-comparison section{min-width:0}
.order-comparison h3{margin:0 0 9px;font-size:14px;letter-spacing:.02em}
.order-review-list,.order-correct-list{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.order-position,.order-correct-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;gap:9px;padding:10px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel2)}
.order-position{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"number label mark" "number note note"}
.order-position-number{grid-area:number;width:24px;height:24px;background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--text)}
.order-position-label{grid-area:label;font-weight:650}
.order-position-mark{grid-area:mark;font-weight:850}
.order-position-note{grid-area:note;font-size:12px;color:var(--muted)}
.order-position.is-correct{border-color:var(--correct-border);background:var(--correct-bg);color:var(--correct-text)}
.order-position.is-correct .order-position-number{background:var(--correct-border);color:white}
.order-position.is-correct .order-position-mark{color:var(--good)}
.order-position.is-incorrect{border-color:var(--incorrect-border);background:var(--incorrect-bg);color:var(--incorrect-text)}
.order-position.is-incorrect .order-position-number{background:var(--incorrect-border);color:white}
.order-position.is-incorrect .order-position-mark{color:var(--bad)}
.order-correct-list li{grid-template-columns:28px minmax(0,1fr);border-color:var(--correct-border)}
.order-correct-list .order-position-number{grid-area:auto;background:var(--correct-border);color:white}
@media(max-width:700px){.order-comparison{grid-template-columns:1fr}}
.multi-help{max-width:520px;margin:0 auto 10px;padding:9px 12px;border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;background:var(--accent-soft);color:#35516f;font-size:13px}
.answerbox{max-width:520px;margin:0 auto;display:flex;gap:8px}
.result{max-width:560px;margin:14px auto;padding:13px 16px;border-radius:10px;font-size:15px}
.result.good{background:#e2f4ec;border:1px solid #8fcab0}
.result.bad{background:#fde7e9;border:1px solid #dda0a6}
.result.close{background:#fff3d7;border:1px solid #d8bc78}
.safety{max-width:560px;margin:10px auto;padding:11px 14px;border-radius:10px;
  background:#fff7e4;border:1px solid #dbc58f;font-size:14px}
.center{text-align:center}
.matchgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:640px;margin:0 auto}
.matchcol{display:grid;align-content:start;gap:9px}
.matchcol:first-child button{--match-select-pull:-12px;--match-resolve-slide:10px}
.matchcol:last-child button{--match-select-pull:12px;--match-resolve-slide:-10px}
.matchgrid button{background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:11px;border-radius:10px;cursor:pointer;font-size:14px;min-height:52px;position:relative;
  transition:transform .18s ease,border-color var(--theme-paint-duration,.18s) ease,background var(--theme-paint-duration,.18s) ease,box-shadow var(--theme-paint-duration,.18s) ease,opacity .28s ease}
.matchgrid button.sel{z-index:2;border-color:var(--accent);background:var(--tg-soft,var(--accent-soft));
  transform:translateX(var(--match-select-pull)) scale(1.025);
  box-shadow:0 0 0 3px rgba(var(--elev-tint),.2),0 9px 20px rgba(var(--elev-tint),.22);
  animation:matchSelectedSignal .72s ease-in-out infinite alternate}
.matchgrid button.done{pointer-events:none;color:#124c36;border-color:#29966a;background:#e1f5ea;
  animation:matchLockIn 1.05s cubic-bezier(.2,.85,.3,1) both}
.matchgrid button.done:after{content:"✓";position:absolute;right:-7px;top:-9px;display:grid;place-items:center;
  width:25px;height:25px;border-radius:50%;background:#188259;color:white;border:2px solid var(--bg);
  font-size:14px;font-weight:800;animation:matchCheckIn .58s .08s cubic-bezier(.2,1.5,.35,1) both}
.matchgrid button.reuse-hit{color:#124c36;border-color:#29966a;background:#e1f5ea;animation:matchReusableHit .8s cubic-bezier(.2,1.3,.35,1)}
.matchgrid button.reuse-hit:after{content:"✓";position:absolute;right:-7px;top:-9px;display:grid;place-items:center;width:25px;height:25px;
  border-radius:50%;background:#188259;color:white;border:2px solid var(--bg);font-size:14px;font-weight:800;
  animation:matchCheckIn .58s cubic-bezier(.2,1.5,.35,1) both}
.matchgrid button.flash{color:#74232d;border-color:#cf4352;background:#fde3e6;animation:matchNope .62s ease both}
#mBody{position:relative}
.match-pep{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid var(--line-strong);
  border-radius:999px;background:var(--accent-soft);animation:matchPepIn .38s cubic-bezier(.2,1.25,.35,1)}
.match-pep b{color:#285d9f}.match-pep span{font-size:12px}
.match-round-win{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;max-width:500px;margin:0 auto;
  padding:13px 15px;border:1px solid var(--line-strong);border-radius:13px;background:var(--accent-soft);
  overflow:hidden;animation:matchRoundIn .68s cubic-bezier(.2,1.25,.35,1)}
.match-round-win>span:nth-child(2){display:grid;text-align:left;line-height:1.25}.match-round-win small{color:var(--dim)}
.match-round-win button{margin-left:auto}.match-win-mark{display:grid;place-items:center;flex:0 0 38px;height:38px;
  border-radius:50%;background:var(--accent-strong);color:white;font-size:21px;font-weight:800}
.match-win-stars{position:absolute;inset:0;pointer-events:none}.match-win-stars i{position:absolute;left:50%;top:50%;width:6px;height:6px;
  border-radius:50%;background:#b9d5ff;animation:matchWinStar 1s ease-out both;animation-delay:calc(var(--i)*55ms)}
.activity-success{animation:activitySuccess .72s cubic-bezier(.2,1.2,.35,1)}
.activity-success .row,.activity-success button,.activity-success select{animation:activityItemSuccess .5s cubic-bezier(.2,1.25,.35,1) both;
  animation-delay:var(--success-delay,0ms);border-color:var(--accent)!important}
.latin{font-style:italic;color:#315f98}
.muted{color:var(--dim)} .right{margin-left:auto}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.learncard{max-width:560px;margin:0 auto;text-align:center}
textarea{width:100%;min-height:150px;background:var(--panel2);color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:10px;font:13px monospace}
.pill{font-size:12px;color:var(--dim)}
a{color:var(--accent)}
.rxcard{background:#fdfaf2;color:#1c2030;border-radius:10px;padding:18px 22px;
  max-width:520px;margin:14px auto;font-family:Georgia,'Times New Roman',serif;
  border:1px solid #d8d2bd;box-shadow:0 2px 10px rgba(0,0,0,.35);white-space:pre-line}
.rxcard .rxhead{font-weight:700;font-size:17px;border-bottom:1px solid #d8d2bd;
  padding-bottom:6px;margin-bottom:8px}
.decode{max-width:560px;margin:12px auto;font-size:14px}
.decode td:first-child{font-family:Georgia,serif;font-weight:700;white-space:nowrap}
.decode .st-correct{color:var(--good)} .decode .st-wrong{color:var(--bad)}
.decode .st-missing{color:var(--warn)} .decode .st-skipped{color:var(--dim)}
.notice{font-size:12px;color:var(--dim);max-width:640px;margin:18px auto 0;
  text-align:center;border-top:1px solid var(--line);padding-top:10px}
textarea.rxans{min-height:70px;font:inherit;max-width:560px;display:block;
  margin:0 auto}
.setuprow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.setuprow label{min-width:150px;color:var(--dim)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:7px 13px;border-radius:20px;cursor:pointer;font-size:14px}
.chips button.on{border-color:var(--accent);background:#dceafe}
.vizwrap{max-width:640px;margin:0 auto}
.vizrow{display:flex;gap:4px;margin:8px 0;min-height:56px;max-width:100%;overflow-wrap:anywhere}
.vizblock{flex:1 1 0;background:#dceafe;border:2px solid var(--accent);border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--text);
  font-size:13px;text-align:center;padding:4px;position:relative;transition:flex-grow .35s ease}
.vizblock.filled{background:#e2f4ec;border-color:var(--good)}
.vizblock.ghost{background:var(--panel2);border-style:dashed;border-color:var(--line);color:var(--dim)}
.vizblock.hatch{background-image:repeating-linear-gradient(45deg,#dceafe,#dceafe 6px,#c9ddf8 6px,#c9ddf8 12px)}
.reduce .vizblock{transition:none}
.vizeq{text-align:center;font-size:17px;margin:12px 0;font-weight:600}
.vizladder{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin:14px 0}
.vizladder .node{background:#dceafe;border:2px solid var(--accent);border-radius:8px;padding:10px 14px;font-weight:600}
.vizladder .arrow{color:var(--dim);font-size:13px;text-align:center}
.vizruler{display:flex;border:2px solid var(--accent);border-radius:6px;overflow:hidden;margin:14px 0}
.vizruler .tick{flex:1 1 0;border-right:1px solid var(--line);text-align:center;padding:10px 2px;font-size:12px}
.vizruler .tick:last-child{border-right:none}
.viznote{font-size:11.5px;color:var(--dim);text-align:center;margin-top:6px;font-style:italic}
.vizctl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.support-note{font-size:12px;color:var(--warn);text-align:center}
.meter{height:8px;background:var(--panel2);border-radius:999px;overflow:hidden;min-width:90px;box-shadow:inset 0 0 0 1px var(--line)}
body.workspace-dark.workspace-environment main .meter{background:#262727}
.meter span{display:block;height:100%;background:var(--accent);border-radius:999px}
.hero{padding:4px 0 22px;background:transparent;border:0;border-bottom:1px solid var(--line);position:relative;overflow:visible}
.eyebrow{color:var(--accent);text-transform:none;letter-spacing:0;font-weight:650;font-size:13px}
.hero h2{font-size:clamp(22px,3vw,30px);line-height:1.2;margin:6px 0 8px;max-width:760px}
.hero p{max-width:680px;font-size:15px;color:var(--dim)}
/* Overview-only arrival bands. These are intentionally calmer and shallower
   than the cinematic exam heroes: one dark, desaturated identity color is
   enough to orient the user before the rest of the page returns to neutral. */
.study-area-identity{--area-hero-start:#19345c;--area-hero-end:#2d5e96;--area-hero-muted:#cedcf0;--area-hero-shadow:rgba(18,43,78,.18);
  position:relative;overflow:hidden;margin:0 0 20px;padding:22px 24px 24px;border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:linear-gradient(135deg,var(--area-hero-start),var(--area-hero-end));color:#f8fbff;box-shadow:0 12px 30px var(--area-hero-shadow)}
.study-area-identity::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.045),transparent 44%)}
.study-area-identity-abbr{--area-hero-start:#172f52;--area-hero-end:#2d5b90;--area-hero-muted:#cedcf0;--area-hero-shadow:rgba(18,43,78,.18)}
.study-area-identity-rx{--area-hero-start:#153635;--area-hero-end:#2c6662;--area-hero-muted:#cbe1df;--area-hero-shadow:rgba(17,58,56,.18)}
.study-area-identity-conv{--area-hero-start:#303449;--area-hero-end:#59617f;--area-hero-muted:#d6d9e7;--area-hero-shadow:rgba(42,47,72,.18)}
.study-area-identity-calc{--area-hero-start:#40321f;--area-hero-end:#725633;--area-hero-muted:#e4d8c5;--area-hero-shadow:rgba(62,46,27,.18)}
.study-area-identity-drugs{--area-hero-start:#40242c;--area-hero-end:#724151;--area-hero-muted:#e5d1d7;--area-hero-shadow:rgba(62,32,43,.18)}
.study-area-identity-amino{--area-hero-start:#1b3529;--area-hero-end:#3a664e;--area-hero-muted:#cee0d5;--area-hero-shadow:rgba(21,52,39,.18)}
.study-area-identity-eyebrow{position:relative;z-index:1;display:block;color:var(--area-hero-muted);font-size:11.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase}
.study-area-identity h1{position:relative;z-index:1;max-width:820px;margin:5px 0 8px;color:#fff;font-size:clamp(25px,3.4vw,35px);font-weight:680;line-height:1.12;letter-spacing:-.025em}
.study-area-identity p{position:relative;z-index:1;max-width:780px;margin:0;color:var(--area-hero-muted);font-size:14.5px;line-height:1.5}
.study-area-identity-actions{position:relative;z-index:1;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:17px}
.study-area-identity button.primary,.study-area-identity a.primary{background:#f6f9fc;border-color:rgba(255,255,255,.72);color:#172337;
  --action-contact-shadow:0 1px 2px rgba(var(--elev-shade),.16);--action-ambient-shadow:0 8px 18px rgba(var(--elev-shade),.12)}
.study-area-identity button.primary:hover,.study-area-identity a.primary:hover{background:#fff;border-color:#fff;color:#0f1c2e}
.study-area-identity button.ghost,.study-area-identity a.ghost{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.34);color:#f7faff}
.study-area-identity button.ghost:hover,.study-area-identity a.ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.58);color:#fff}
body.workspace-dark.workspace-environment main .study-area-identity{border-color:rgba(255,255,255,.16);box-shadow:0 14px 34px rgba(0,0,0,.28)}
body.workspace-dark.workspace-environment main .study-area-identity button.primary,body.workspace-dark.workspace-environment main .study-area-identity a.primary{background:#f6f9fc;border-color:rgba(255,255,255,.72);color:#172337}
body.workspace-dark.workspace-environment main .study-area-identity button.primary:hover,body.workspace-dark.workspace-environment main .study-area-identity a.primary:hover{background:#fff;border-color:#fff;color:#0f1c2e}
body.workspace-dark.workspace-environment main .study-area-identity button.ghost,body.workspace-dark.workspace-environment main .study-area-identity a.ghost{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.34);color:#f7faff}
.subject-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.aa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.aa-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:start}
.aa-code{display:grid;place-items:center;min-height:68px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.aa-code b{font-size:28px;color:var(--accent)}.aa-code span{font-weight:700;color:var(--text)}
.aa-card h3,.aa-group h3{margin-top:0}.aa-card p:last-child,.aa-group p:last-child{margin-bottom:0}
.study-launcher-section>h2,.study-curriculum-section>h2{display:inline-flex;align-items:center;margin:0 0 10px;padding:3px 8px;border-radius:5px;background:var(--panel2);color:var(--dim);font-size:11px;font-weight:720;letter-spacing:.07em;text-transform:uppercase}
.study-launcher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.study-curriculum-section{margin:24px -14px 0;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--accent) 3%,var(--workspace))}
.study-curriculum-section>h2{background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:color-mix(in srgb,var(--accent) 76%,var(--text))}
/* The card is an anchor so browser link behaviors work; it must therefore
   explicitly cancel default link color/underline and stay a flex block. */
main a.study-area-card,.study-area-card{position:relative;overflow:hidden;min-height:190px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:16px 16px 13px;display:flex;flex-direction:column;gap:6px;cursor:pointer;
  color:var(--text);text-decoration:none;
  box-shadow:0 1px 2px rgba(var(--elev-tint),.05);
  --hold-progress:0;--hold-return-ms:180ms;
  transition:background var(--theme-paint-duration,.16s),border-color var(--theme-paint-duration,.16s),transform .16s cubic-bezier(.2,.75,.25,1),box-shadow var(--theme-paint-duration,.16s)}
/* Study areas share one interaction language. Category color is deliberately
   limited to a quiet hairline and icon marker; links, focus, hover, and depth
   belong to the PharmRecall brand rather than forming a rainbow matrix. */
.study-area-card{--study-accent:#315f9f;--study-ink:#294f84;--study-shadow:rgba(var(--elev-shade),.10)}
.study-area-card::before,.curriculum-card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--study-accent);opacity:.56;transition:opacity .16s}
.study-abbr{--study-accent:#315f9f;--study-ink:#294f84}
.study-rx{--study-accent:#397c78;--study-ink:#2c6662}
.study-conv{--study-accent:#5d668c;--study-ink:#4f587c}
.study-calc{--study-accent:#8a6838;--study-ink:#73552b}
.study-drugs{--study-accent:#824b5b;--study-ink:#6f3d4c}
.study-amino{--study-accent:#3f715b;--study-ink:#315e49}
.study-courses{--study-accent:#555f8d;--study-ink:#465078}
.study-area-card,.study-area-card *{text-decoration:none}
.study-title{color:var(--text);font-size:16px;font-weight:650;margin:4px 0 0;transition:color var(--theme-paint-duration,.15s)}
.study-desc{color:var(--dim);font-size:13.5px;line-height:1.45}
.study-area-card:active,.curriculum-card:active{transform:translateY(0) scale(.995)}
.study-area-card::after,.curriculum-card::after,.catalog-entry-row.study-hold-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--elev-tint),.20),rgba(var(--elev-tint),.08));
  transform:scaleX(var(--hold-progress));transform-origin:left;transition:transform var(--hold-return-ms) cubic-bezier(.16,.72,.28,1)}
.study-area-card.holding::after,.curriculum-card.holding::after,.catalog-entry-row.study-hold-card.holding::after{transition:none}
.study-area-card.hold-complete::after,.curriculum-card.hold-complete::after,.catalog-entry-row.study-hold-card.hold-complete::after{background:linear-gradient(90deg,rgba(var(--elev-tint),.24),rgba(var(--elev-tint),.12))}
.study-area-card.holding .study-open i,.curriculum-card.holding .curriculum-action i,
.study-area-card.hold-complete .study-open i,.curriculum-card.hold-complete .curriculum-action i,
.catalog-entry-row.holding .catalog-entry-arrow,.catalog-entry-row.hold-complete .catalog-entry-arrow{transform:translateX(6px)}
.study-hold-card{touch-action:pan-y;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
/* Reduced motion: the switch still changes, the chip just does not travel.
   (The old one-button glyph animated a masked "bite" across a disc; that
   element is gone with the button it belonged to.) */
@media (prefers-reduced-motion:reduce){
  .theme-chip,.theme-glyph,.theme-glyph .disc,.theme-glyph .rays,
  .theme-glyph .rays line{transition:none}
}
@media (prefers-reduced-motion: reduce){
  .study-area-card,.study-area-card h2,.study-open i,.curriculum-card,.curriculum-action i,.study-mark{transition:none!important}
  .study-area-card:hover,.study-area-card:focus-visible,.curriculum-card:hover,.curriculum-card:focus-visible{transform:none}
  .study-area-card::after,.curriculum-card::after,.catalog-entry-row.study-hold-card::after{transform:none;opacity:var(--hold-progress);transition:none;background:rgba(var(--elev-tint),.13)}
}
.study-area-card:hover,.study-area-card:focus-visible{background:color-mix(in srgb,var(--accent) 3%,var(--surface));border-color:color-mix(in srgb,var(--accent) 38%,var(--line));
  transform:translateY(-2px);box-shadow:0 8px 22px var(--study-shadow)}
.study-area-card:hover::before,.study-area-card:focus-visible::before,.curriculum-card:hover::before,.curriculum-card:focus-visible::before{opacity:.82}
.study-area-card:focus-visible,.curriculum-card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.study-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;
  background:color-mix(in srgb,var(--study-accent) 9%,var(--surface));color:var(--study-ink);font-weight:700;font-size:13px;transition:background var(--theme-paint-duration,.16s),transform .16s}
.study-area-card:hover .study-mark,.study-area-card:focus-visible .study-mark{background:color-mix(in srgb,var(--study-accent) 13%,var(--surface));transform:scale(1.025)}
/* Study-area marks are objects on transparency, not badges. No tile, no
   background, no ring -- a container would read as the icon and reduce the
   drawing to a hole punched in it. The drawings carry their own colour, so
   they are identical in both themes, exactly like an app icon. */
.study-mark-icon{background:none;box-shadow:none;border-radius:0;
  width:38px;height:38px;overflow:visible}
.study-glyph{width:100%;height:100%;display:block;overflow:visible}
.study-area-card:hover .study-mark-icon,.study-area-card:focus-visible .study-mark-icon{
  background:none;transform:scale(1.07) rotate(-3deg)}
.catalog-entry-row .study-mark-icon,.curriculum-card .study-mark-icon{width:38px;height:38px}
.study-area-card,.study-area-card *{text-decoration:none}
.study-title{color:var(--text);font-size:16px;font-weight:650;margin:4px 0 0;transition:color var(--theme-paint-duration,.15s)}
.study-desc{color:var(--dim);font-size:13.5px;line-height:1.45}
.study-area-card:active,.curriculum-card:active{transform:translateY(0) scale(.995)}
.study-area-card h2,.study-area-card .study-title{font-size:16px;margin:4px 0 0;transition:color var(--theme-paint-duration,.15s)}
.study-area-card p,.study-area-card .study-desc{color:var(--dim);margin:0;font-size:13.5px;line-height:1.45}
.study-card-foot{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;width:100%}
.study-meta{font-size:12px;font-weight:680;color:var(--dim)}
.study-meta.due{border:1px solid transparent;border-radius:20px;padding:2px 9px;font-variant-numeric:tabular-nums}
.study-meta.due-low{color:#7a5b12;background:#fff4d6}
.study-meta.due-medium{color:#96500b;background:#ffead0;border-color:#f4d19c}
.study-meta.due-high{color:#a43630;background:#fde3df;border-color:#f2beb8}
.study-meta.clear{color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--surface));border-radius:20px;padding:2px 9px}
.study-open{font-size:13px;font-weight:650;color:var(--accent)}
.study-open i{font-style:normal;display:inline-block;transition:transform .15s}
.study-area-card:hover .study-open i,.study-area-card:focus-visible .study-open i{transform:translateX(3px)}
body.workspace-dark.workspace-environment main .study-area-card,body.workspace-dark.workspace-environment main .curriculum-card{--study-shadow:rgba(0,0,0,.28)}
body.workspace-dark.workspace-environment main .study-abbr{--study-accent:#486789;--study-ink:#8daacb}body.workspace-dark.workspace-environment main .study-rx{--study-accent:#3f716f;--study-ink:#85b8b4}body.workspace-dark.workspace-environment main .study-conv{--study-accent:#5c6384;--study-ink:#a4aaca}body.workspace-dark.workspace-environment main .study-calc{--study-accent:#806744;--study-ink:#c7a979}body.workspace-dark.workspace-environment main .study-drugs{--study-accent:#77515d;--study-ink:#c49aa6}body.workspace-dark.workspace-environment main .study-amino{--study-accent:#456a59;--study-ink:#91b9a4}body.workspace-dark.workspace-environment main .study-courses{--study-accent:#565d83;--study-ink:#a8aecf}
body.workspace-dark.workspace-environment main .study-area-card::before,body.workspace-dark.workspace-environment main .curriculum-card::before{opacity:.58}
body.workspace-dark.workspace-environment main .study-area-card:hover,body.workspace-dark.workspace-environment main .study-area-card:focus-visible,
body.workspace-dark.workspace-environment main .curriculum-card:hover,body.workspace-dark.workspace-environment main .curriculum-card:focus-visible{background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
body.workspace-dark.workspace-environment main .study-area-card:hover::before,body.workspace-dark.workspace-environment main .study-area-card:focus-visible::before,body.workspace-dark.workspace-environment main .curriculum-card:hover::before,body.workspace-dark.workspace-environment main .curriculum-card:focus-visible::before{opacity:.82}
body.workspace-dark.workspace-environment main .study-meta.due-low{color:#f0cf83;background:#3b331d}
body.workspace-dark.workspace-environment main .study-meta.due-medium{color:#f4b965;background:#49311e;border-color:#67462b}
body.workspace-dark.workspace-environment main .study-meta.due-high{color:#ffaaa3;background:#4a2929;border-color:#70403f}
body.workspace-dark.workspace-environment main .study-curriculum-section{background:color-mix(in srgb,var(--accent) 4%,var(--workspace))}
.curriculum-card{position:relative;overflow:hidden;--hold-progress:0;--hold-return-ms:180ms;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;width:100%;min-height:116px;padding:19px 20px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:0 1px 2px rgba(var(--elev-tint),.05);transition:background var(--theme-paint-duration,.16s),border-color var(--theme-paint-duration,.16s),transform .16s cubic-bezier(.2,.75,.25,1),box-shadow var(--theme-paint-duration,.16s)}
.curriculum-card *{text-decoration:none}.curriculum-card:hover,.curriculum-card:focus-visible{background:color-mix(in srgb,var(--accent) 3%,var(--surface));border-color:color-mix(in srgb,var(--accent) 38%,var(--line));transform:translateY(-2px);box-shadow:0 8px 22px var(--study-shadow)}
.curriculum-mark{width:42px;height:42px}.curriculum-copy{display:grid;min-width:0}.curriculum-institution{color:var(--dim);font-size:12.5px;font-weight:620}.curriculum-title{color:var(--text);font-size:18px;font-weight:680;line-height:1.35}.curriculum-summary{margin-top:3px;color:var(--dim);font-size:13px}.curriculum-action{color:var(--accent);font-size:13px;font-weight:650;white-space:nowrap}.curriculum-action i{display:inline-block;font-style:normal;transition:transform .15s}.curriculum-card:hover .curriculum-action i,.curriculum-card:focus-visible .curriculum-action i{transform:translateX(3px)}
@media(max-width:980px){.study-launcher{grid-template-columns:repeat(2,minmax(0,1fr))}}
.catalog-heading{max-width:760px;margin:0 0 24px}.catalog-eyebrow,.catalog-section-kicker{display:block;margin-bottom:5px;color:var(--accent);font-size:11px;font-weight:760;letter-spacing:.09em;text-transform:uppercase}.catalog-heading h1{margin:0 0 8px;font-size:clamp(29px,4vw,42px);line-height:1.08;letter-spacing:-.035em}.catalog-heading p{margin:0;color:var(--dim);font-size:15px;line-height:1.55}.catalog-featured,.catalog-library{margin-top:30px}.catalog-featured>header,.catalog-library>header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:13px;padding-bottom:12px;border-bottom:1px solid var(--line)}.catalog-featured>header h2,.catalog-library>header h2{margin:0;font-size:22px;letter-spacing:-.015em}.catalog-featured>header p,.catalog-library>header p{max-width:430px;margin:0;color:var(--dim);font-size:13px;text-align:right}.catalog-featured-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.catalog-featured-card{min-height:210px}.catalog-featured-card.study-drug-mastery{--study-accent:#824b5b;--study-ink:#6f3d4c}.catalog-featured-card.study-calculation{--study-accent:#8a6838;--study-ink:#73552b}.catalog-entry-type{margin-top:3px;color:var(--dim);font-size:11px;font-weight:720;letter-spacing:.06em;text-transform:uppercase}.catalog-domain{margin-top:25px}.catalog-domain>header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 2px 9px}.catalog-domain>header h2{margin:0;font-size:15px}.catalog-domain>header span{color:var(--dim);font-size:12px}.catalog-entry-list{border-top:1px solid var(--line)}main a.catalog-entry-row,.catalog-entry-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;min-height:82px;padding:13px 8px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;transition:background var(--theme-paint-duration,.14s),padding .14s}.catalog-entry-row:hover,.catalog-entry-row:focus-visible{padding-left:13px;background:color-mix(in srgb,var(--accent) 3%,var(--surface))}.catalog-entry-row:focus-visible{outline:2px solid var(--focus);outline-offset:1px}.catalog-entry-copy{display:grid;gap:2px;min-width:0}.catalog-entry-row .study-title{margin:0;font-size:15px}.catalog-entry-row .study-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}.catalog-entry-scope{margin-top:3px;color:var(--dim);font-size:11.5px;font-weight:650}.catalog-status{display:inline-flex;align-items:center;width:max-content;padding:3px 8px;border-radius:20px;background:var(--panel2);color:var(--dim);font-size:11.5px;font-weight:680;white-space:nowrap}.catalog-status-current{background:color-mix(in srgb,var(--good) 10%,var(--surface));color:var(--good)}.catalog-status-in_progress{background:#fff4d6;color:#7a5b12}.catalog-entry-arrow{color:var(--accent);font-size:17px;transition:transform .14s}.catalog-entry-row:hover .catalog-entry-arrow,.catalog-entry-row:focus-visible .catalog-entry-arrow{transform:translateX(3px)}.catalog-search-results>h2{margin:0 0 12px;font-size:19px}.catalog-empty{padding:48px 20px;text-align:center;border:1px dashed var(--line);border-radius:12px;background:var(--surface)}.catalog-empty h2{margin:0 0 6px}.catalog-empty p{margin:0;color:var(--dim)}.catalog-loading{min-height:420px;border-radius:12px;background:linear-gradient(100deg,var(--panel2) 25%,var(--surface) 45%,var(--panel2) 65%);background-size:240% 100%;animation:catalogLoading 1.2s ease-in-out infinite}@keyframes catalogLoading{to{background-position:-150% 0}}body.workspace-dark.workspace-environment main .catalog-featured-card.study-drug-mastery{--study-accent:#77515d;--study-ink:#c49aa6}body.workspace-dark.workspace-environment main .catalog-featured-card.study-calculation{--study-accent:#806744;--study-ink:#c7a979}body.workspace-dark.workspace-environment main .catalog-status-in_progress{color:#f0cf83;background:#3b331d}@media(max-width:760px){.catalog-featured-grid{grid-template-columns:1fr}.catalog-featured>header,.catalog-library>header{display:block}.catalog-featured>header p,.catalog-library>header p{margin-top:6px;text-align:left}.catalog-entry-row{grid-template-columns:auto minmax(0,1fr) auto}.catalog-entry-row>.catalog-status{grid-column:2}.catalog-entry-arrow{grid-column:3;grid-row:1/3}.catalog-entry-row .study-desc{white-space:normal}}@media(max-width:460px){.catalog-entry-row{gap:10px;padding-left:2px;padding-right:2px}.catalog-entry-row:hover,.catalog-entry-row:focus-visible{padding-left:6px}.catalog-entry-row .study-mark{width:31px;height:31px}.catalog-heading h1{font-size:29px}}
.catalog-entry-row.study-hold-card{position:relative;overflow:hidden;--hold-progress:0;--hold-return-ms:180ms}
.catalog-entry-row.study-hold-card>*{position:relative;z-index:1}
.catalog-entry-row.study-hold-card::after{z-index:0}
.catalog-entry-row>.catalog-status{grid-column:3;grid-row:1;transition:opacity .1s}
.catalog-entry-hold-label{grid-column:3;grid-row:1;justify-self:end;color:var(--accent);font-size:11.5px;font-weight:720;white-space:nowrap;opacity:0;transition:opacity .1s}
.catalog-entry-row>.catalog-entry-arrow{grid-column:4;grid-row:1}
.catalog-entry-row.holding .catalog-status,.catalog-entry-row.hold-complete .catalog-status,.catalog-entry-row.hold-returning .catalog-status{opacity:0}
.catalog-entry-row.holding .catalog-entry-hold-label,.catalog-entry-row.hold-complete .catalog-entry-hold-label,.catalog-entry-row.hold-returning .catalog-entry-hold-label{opacity:1}
@media(max-width:760px){.catalog-entry-row>.catalog-status,.catalog-entry-hold-label{grid-column:2;grid-row:2;justify-self:start}.catalog-entry-row>.catalog-entry-arrow{grid-column:3;grid-row:1/3}}
@media(prefers-reduced-motion:reduce){.catalog-loading{animation:none}.catalog-entry-row,.catalog-entry-arrow,.catalog-entry-hold-label,.catalog-status{transition:none}}
.learn-path-section,.learn-tools-section{margin-top:24px}.lesson-overview-list,.learning-tool-list{border-top:1px solid var(--line)}.lesson-overview-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:18px 6px;border-bottom:1px solid var(--line)}.lesson-overview-copy h3{margin:3px 0 4px;font-size:18px}.lesson-overview-copy p{margin:0;color:var(--dim)}.lesson-overview-copy .calc-method-line{margin-top:7px;color:var(--text);font-size:12.5px}.lesson-overview-action{display:grid;justify-items:end;gap:7px;min-width:140px}.learning-tool-list a{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px;padding:13px 8px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none}.learning-tool-list a:hover,.learning-tool-list a:focus-visible{background:color-mix(in srgb,var(--accent) 3%,var(--surface))}.learning-tool-list span{display:grid;gap:3px}.learning-tool-list small{color:var(--dim);font-size:12.5px}.learning-tool-list i{color:var(--accent);font-style:normal}@media(max-width:650px){.lesson-overview-row{grid-template-columns:1fr;gap:12px}.lesson-overview-action{grid-auto-flow:column;justify-content:space-between;justify-items:start;align-items:center}}
.abbreviation-lesson-list .lesson-overview-row{grid-template-columns:42px minmax(0,1fr) auto}.lesson-sequence{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;color:var(--dim);font:700 12px/1 var(--mono)}.abbr-teaching-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 92px}.abbr-teaching-card{padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.abbr-teaching-card header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.abbr-teaching-card h3{margin:4px 0 0;font-size:27px}.safety-state{padding:5px 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}.safety-state.safe{color:var(--good);background:color-mix(in srgb,var(--good) 10%,transparent)}.safety-state.caution{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}.abbr-teaching-meaning{display:grid;gap:4px;margin-top:22px}.abbr-teaching-meaning span,.preferred-wording span{color:var(--dim);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.abbr-teaching-meaning strong{font-size:17px}.abbr-teaching-meaning small{color:var(--dim)}.preferred-wording{display:grid;gap:4px;margin-top:16px;padding:12px;border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 5%,transparent)}.teaching-note{margin:15px 0 0;color:var(--dim);font-size:13px}@media(max-width:760px){.abbr-teaching-grid{grid-template-columns:1fr}.abbreviation-lesson-list .lesson-overview-row{grid-template-columns:34px minmax(0,1fr)}.abbreviation-lesson-list .lesson-overview-action{grid-column:2}}
.prescription-lesson-list .lesson-overview-row{grid-template-columns:42px minmax(0,1fr) auto}.content-notice{margin:22px 0;color:var(--dim);font-size:12px}.rx-lesson-intro{display:flex;justify-content:space-between;gap:24px;align-items:end;padding:22px 0;border-bottom:1px solid var(--line)}.rx-lesson-intro h2{max-width:760px;margin:6px 0 0}.rx-lesson-intro>p{max-width:280px;color:var(--dim);text-align:right}.rx-anatomy{margin:28px 0}.rx-anatomy ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0;list-style:none}.rx-anatomy li{display:flex;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.rx-anatomy li>span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:var(--chip);font-weight:800}.rx-anatomy p{margin:5px 0 0;color:var(--dim);font-size:13px}.rx-rule-panel{display:grid;grid-template-columns:minmax(220px,.7fr) 1.3fr;gap:36px;padding:26px;border-radius:18px;background:var(--ink);color:var(--paper)}.rx-rule-panel h2{margin:6px 0 0}.rx-rule-panel ul{display:grid;gap:12px;margin:0;padding-left:20px}.rx-example-section{margin:32px 0}.rx-worked-example{margin:14px 0;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}.rx-worked-example>header{display:flex;justify-content:space-between;color:var(--dim);font-size:12px}.rx-worked-example pre{overflow:auto;margin:18px 0;padding:16px;border-radius:12px;background:var(--chip);color:var(--text);font:700 15px/1.6 var(--mono);white-space:pre-wrap}.rx-component-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}.rx-component-track div{display:grid;gap:4px;padding:10px;border-left:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 3%,transparent)}.rx-component-track span{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.rx-component-track small{color:var(--dim)}.rx-translation{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.rx-translation span{color:var(--dim);font-size:11px;font-weight:700;text-transform:uppercase}.rx-translation p{margin:5px 0 0;font-size:18px}.rx-contrast{margin:26px 0;padding:22px;border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));border-radius:16px}.rx-contrast>div{display:flex;gap:14px;align-items:center;font:800 20px/1 var(--mono)}.rx-contrast i{color:var(--warn);font-style:normal}.rx-contrast p{margin:12px 0 0;color:var(--dim)}.rx-changed-surface{margin-bottom:94px}@media(max-width:820px){.rx-anatomy ol{grid-template-columns:repeat(2,minmax(0,1fr))}.rx-rule-panel{grid-template-columns:1fr}.rx-lesson-intro{align-items:start;flex-direction:column}.rx-lesson-intro>p{text-align:left}.prescription-lesson-list .lesson-overview-row{grid-template-columns:34px minmax(0,1fr)}.prescription-lesson-list .lesson-overview-action{grid-column:2}}@media(max-width:520px){.rx-anatomy ol{grid-template-columns:1fr}}
.catalog-entry-row-shell{position:relative;border-bottom:1px solid var(--line)}.catalog-entry-row-shell .catalog-entry-row{border-bottom:0;padding-right:112px}.catalog-add-plan{position:absolute;right:44px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--accent);font-weight:700;cursor:pointer}.catalog-add-plan:hover,.catalog-add-plan:focus-visible{text-decoration:underline}.study-plans-catalog{margin-top:34px;padding:24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 5%,var(--surface)),var(--surface))}.study-plans-catalog>header{position:static;padding:0;border:0;background:transparent;color:var(--text)}.study-plans-catalog>p{max-width:720px;color:var(--dim)}.study-plan-preview{display:grid;gap:1px;margin:18px 0;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}.study-plan-preview>a{display:flex;align-items:center;justify-content:space-between;min-height:62px;padding:12px 15px;background:var(--surface);color:var(--text);text-decoration:none}.study-plan-preview span,.study-plan-row span{display:grid;gap:2px}.study-plan-preview small,.study-plan-row small{color:var(--dim)}.study-plan-empty{display:grid;gap:3px;padding:18px;background:var(--surface)}.study-plan-empty span{color:var(--dim)}.study-plan-list,.study-plan-items{display:grid;gap:10px}.study-plan-row{display:flex;justify-content:space-between;align-items:center;min-height:74px;padding:15px 18px;border:1px solid var(--line);border-radius:13px;background:var(--surface);color:var(--text);text-decoration:none}.study-plan-row:hover,.study-plan-row:focus-visible{border-color:var(--accent)}.study-plan-truth{padding:14px 16px;border-left:3px solid var(--accent);background:var(--accent-soft);color:var(--dim)}.study-plan-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.study-plan-order{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--panel2);font-weight:800}.study-plan-item>a{display:grid;gap:3px;color:var(--text);text-decoration:none}.study-plan-item>a small{color:var(--dim)}.study-plan-item-actions{display:flex;align-items:center;gap:6px}.danger-text{color:var(--bad)}@media(max-width:650px){.catalog-entry-row-shell .catalog-entry-row{padding-right:8px;padding-bottom:48px}.catalog-add-plan{left:66px;right:auto;top:auto;bottom:14px;transform:none}.study-plan-item{grid-template-columns:34px minmax(0,1fr)}.study-plan-item-actions{grid-column:2;justify-content:flex-start}}
.lesson-method{margin:18px 0 26px}.lesson-method>p:not(.eyebrow){max-width:820px;color:var(--dim);line-height:1.55}.amino-lesson-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0 0;padding:0;list-style:none;counter-reset:none}.amino-lesson-stages li{display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--workspace)}.amino-lesson-stages li>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--panel2);color:var(--accent);font-size:12px;font-weight:760}.amino-lesson-stages p{margin:2px 0;color:var(--text);font-size:12.5px;line-height:1.45}.amino-teaching-group{margin:28px 0}.amino-teaching-group>h3{padding-bottom:9px;border-bottom:1px solid var(--line);font-size:17px;text-transform:capitalize}.lesson-completion-bar{position:sticky;bottom:14px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:30px 0 10px;padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 8px 30px rgba(var(--elev-shade),.12);backdrop-filter:blur(12px)}.lesson-completion-bar span{color:var(--dim);font-size:12.5px}@media(max-width:760px){.amino-lesson-stages{grid-template-columns:1fr}.lesson-completion-bar{align-items:stretch;flex-direction:column}.lesson-completion-bar button{width:100%}}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:24px 2px 12px}
.section-title h2{font-size:19px;margin:0}.section-title p{margin:0;color:var(--dim)}
.mode-nav{display:flex;gap:22px;flex-wrap:wrap;margin:0 0 26px;padding:0 0 10px;background:var(--workspace);
  border:0;border-bottom:1px solid var(--line);border-radius:0;position:sticky;top:64px;z-index:3}
.mode-nav button,.mode-nav a{background:transparent;border:0;border-bottom:2px solid transparent;color:var(--dim);padding:9px 0 8px;border-radius:0;cursor:pointer;transition:color var(--theme-paint-duration,.12s);text-decoration:none;font-size:15px;display:inline-block}
.mode-nav button.on,.mode-nav a.on{background:transparent;border-color:var(--accent);color:var(--text)}
/* Theme-aware hover: darkens in light mode, lightens in dark mode. */
.mode-nav button:hover:not(.on),.mode-nav a:hover:not(.on){color:var(--text)}
.recommendation{display:flex;align-items:center;gap:14px}
.progress-list{display:grid}.progress-row{display:grid;grid-template-columns:minmax(190px,1fr) 2fr auto;gap:18px;align-items:center;
  padding:15px 0;background:transparent;border-bottom:1px solid var(--line);border-radius:0}
.progress-row:last-child{border-bottom:0}
.progress-copy{display:grid;gap:2px}.progress-copy small{color:var(--dim)}
.state-badge{display:inline-flex;align-items:center;width:max-content;padding:2px 7px;border-radius:4px;
  font-size:11px;font-weight:650;text-transform:none;letter-spacing:0;border:1px solid currentColor}
.state-badge.not-started{background:#eef1f5;color:#5f6e80}.state-badge.introduced{background:#e3edfb;color:#315f98}
.state-badge.in-progress{background:#fff4d6;color:#765411}.state-badge.reviewed{background:#ffefd2;color:#79530b}
.state-badge.lesson-complete{background:#e2f4ec;color:var(--good)}
.state-badge.independent{background:#dff3f1;color:#0e6e65}.state-badge.mastered{background:#d7f2e5;color:#0b6844}
.class-progress{display:grid;gap:3px;width:max-content;max-width:100%}.class-progress-detail{color:var(--dim);font-size:11px;line-height:1.3}
.status-in-progress,.status-reviewed{border-left:3px solid #d8ad42!important;padding-left:13px!important}
.status-lesson-complete{border-left:3px solid #2f9a70!important;padding-left:13px!important}
.status-independent{border-left:3px solid #2f7fd8!important;padding-left:13px!important}
.status-mastered{border-left:3px solid #6b5bd6!important;padding-left:13px!important}
.lesson-status-key{display:grid;gap:7px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
.lesson-status-key span{display:flex;align-items:center;gap:7px}.status-dot{width:8px;height:8px;border-radius:50%;background:#9aa7b5}
.status-dot.complete{background:#2f9a70}.status-dot.active{background:#d8ad42}.status-dot.proven{background:#2f7fd8}.status-dot.retained{background:#6b5bd6}
.checkline{display:flex;gap:10px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.checkline input{width:18px;height:18px;accent-color:var(--accent)}
@keyframes pageIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes correctPop{50%{transform:scale(1.025)}}
@keyframes matchSelectedSignal{from{box-shadow:0 0 0 3px rgba(var(--elev-tint),.18),0 8px 18px rgba(var(--elev-tint),.18)}to{box-shadow:0 0 0 5px rgba(var(--elev-tint),.26),0 12px 24px rgba(var(--elev-tint),.28)}}
@keyframes matchLockIn{0%{opacity:1;transform:translateX(0) scale(1)}28%{opacity:1;transform:translateX(var(--match-resolve-slide)) scale(1.045);box-shadow:0 0 0 5px rgba(20,118,79,.2),0 0 28px rgba(20,118,79,.4)}58%{opacity:1;transform:translateX(var(--match-resolve-slide)) scale(1)}100%{opacity:0;transform:translateX(var(--match-resolve-slide)) scale(.94);box-shadow:0 0 0 1px rgba(20,118,79,0)}}
@keyframes matchCheckIn{from{opacity:0;transform:scale(.2) rotate(-28deg)}70%{opacity:1;transform:scale(1.16) rotate(5deg)}to{opacity:1;transform:none}}
@keyframes matchReusableHit{0%{transform:scale(1)}45%{transform:translateY(-5px) scale(1.045);box-shadow:0 0 0 4px rgba(20,118,79,.16),0 0 24px rgba(20,118,79,.32)}100%{transform:none;box-shadow:0 0 0 1px rgba(20,118,79,.12)}}
@keyframes matchPepIn{from{opacity:0;transform:translateY(5px) scale(.92)}to{opacity:1;transform:none}}
@keyframes matchRoundIn{0%{opacity:0;transform:translateY(8px) scale(.94)}55%{opacity:1;transform:translateY(-2px) scale(1.025)}100%{transform:none}}
@keyframes matchWinStar{0%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--i)*72deg)) translateX(0) scale(.3)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--i)*72deg)) translateX(64px) scale(1.25)}}
@keyframes matchNope{0%,100%{transform:translateX(0);box-shadow:0 0 0 0 rgba(181,62,74,0)}16%{transform:translateX(-7px);box-shadow:0 0 0 5px rgba(181,62,74,.2),0 0 28px rgba(181,62,74,.46)}36%{transform:translateX(7px)}56%{transform:translateX(-5px);box-shadow:0 0 0 5px rgba(181,62,74,.2),0 0 28px rgba(181,62,74,.46)}76%{transform:translateX(4px)}}
@keyframes activitySuccess{45%{transform:scale(1.012);filter:brightness(1.12)}100%{transform:none;filter:none}}
@keyframes activityItemSuccess{from{transform:translateY(4px);box-shadow:none}55%{transform:translateY(-3px);box-shadow:0 6px 16px rgba(var(--elev-tint),.22)}to{transform:none;box-shadow:none}}
.match-activity-correct .row{background:#e1f5ea;border:1px solid #29966a;border-radius:7px;padding:9px 11px;
  animation:matchLockIn .78s cubic-bezier(.2,1.35,.35,1) both;animation-delay:var(--success-delay,0ms)}
.match-activity-correct select{background:#f3fcf7;border-color:#29966a;color:#124c36}
.match-activity-wrong .row{background:#fde3e6;border:1px solid #cf4352;border-radius:7px;padding:9px 11px;
  animation:matchNope .48s ease both;animation-delay:var(--success-delay,0ms)}
.match-activity-wrong select{background:#fff3f4;border-color:#cf4352;color:#74232d}
@keyframes requestPulse{from{opacity:.35}to{opacity:1}}
.result.good{animation:correctPop .3s ease}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;
  transition-duration:.01ms!important;scroll-behavior:auto!important}
  .matchgrid button.sel{animation:none!important}
  .matchgrid button.done{animation:none!important;opacity:.35}}
.auth-card{max-width:430px;margin:9vh auto;padding:26px}
.auth-card>p{margin:0 0 20px}
.auth-card .safety{max-width:none;margin:0 0 18px}
.auth-form{display:grid;gap:16px}
.auth-field{display:grid;gap:6px}
.auth-field label{color:var(--dim);font-size:13px;font-weight:600}
.auth-field input{display:block;width:100%;min-height:44px;background:var(--panel2);
  color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font:inherit;outline:none}
.auth-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--elev-tint),.16)}
.password-input{position:relative}
.password-input input{padding-right:52px}
.password-toggle{position:absolute;right:2px;top:50%;transform:translateY(-50%);display:grid;
  place-items:center;width:44px;min-height:40px;padding:0;border:0;border-radius:7px;
  background:transparent;color:var(--dim);cursor:pointer}
.password-toggle:hover{background:var(--accent-soft);color:var(--accent)}
.password-toggle:focus-visible{outline-offset:0}
.password-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.password-toggle .password-hide-mark{display:none}
.password-toggle[aria-pressed="true"] .password-hide-mark{display:block}
.auth-actions{display:flex;align-items:center;gap:12px;margin-top:2px}
.auth-actions .muted{font-size:13px;color:var(--bad)}
.provider-sign-in{display:grid;gap:10px}
.provider-sign-in:empty{display:none}
.provider-sign-in>div:first-child{min-height:44px}
.provider-button{width:100%;min-height:44px;border-radius:7px;border:1px solid #222;
  background:#111;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.provider-button:hover{background:#202020}
.provider-button span{margin-right:9px}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:13px}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--line);flex:1}
.status-verified,.status-pending{display:inline-block;margin-left:8px;padding:2px 7px;
  border-radius:999px;font-size:11px;font-weight:700}
.status-verified{color:#176442;background:#dff5e8}
.status-pending{color:#75520b;background:#fff1c7}
.table-scroll{overflow-x:auto}
.site-footer{max-width:var(--workspace-max-width);margin:0 auto;min-height:51px;padding:15px 28px calc(15px + env(safe-area-inset-bottom));
  display:flex;justify-content:flex-end;gap:20px;border-top:1px solid var(--line);background:var(--workspace);
  color:var(--dim);font-size:13px;transition:background-color var(--theme-paint-duration,.2s) ease,color var(--theme-paint-duration,.2s) ease}
.site-footer a{color:var(--dim);text-decoration:none}.site-footer a:hover{text-decoration:underline;color:var(--accent)}
body.workspace-dark .site-footer{background:#0f0f0f;color:#a9adb2;border-color:#2b2c2e}
body.workspace-dark .site-footer a{color:#a9adb2}
/* On wide canvases, gently diffuse the hard gutter/workspace seam. The
   darker surface always feathers onto the lighter one: inward onto the light
   workspace in light mode, outward onto the pale rails in dark mode. */
@media(min-width:1241px){
  main,.site-footer{background-image:linear-gradient(90deg,var(--canvas-feather),transparent 18px),linear-gradient(270deg,var(--canvas-feather),transparent 18px);background-position:left,right;background-repeat:no-repeat;background-size:18px 100%}
  html.workspace-dark main,html.workspace-dark .site-footer{position:relative;background-image:none}
  html.workspace-dark main::before,html.workspace-dark main::after,html.workspace-dark .site-footer::before,html.workspace-dark .site-footer::after{content:"";position:absolute;top:0;bottom:0;width:18px;pointer-events:none}
  html.workspace-dark main::before,html.workspace-dark .site-footer::before{left:-18px;background:linear-gradient(90deg,transparent,var(--canvas-feather))}
  html.workspace-dark main::after,html.workspace-dark .site-footer::after{right:-18px;background:linear-gradient(270deg,transparent,var(--canvas-feather))}
}
.button-link{text-decoration:none}.legal-note{color:var(--dim);font-size:13px}
.legal-page{max-width:780px;margin:0 auto}.legal-page>header{padding-bottom:18px;border-bottom:1px solid var(--line)}
.legal-page>header h1{margin:0}.legal-page>header p{margin:4px 0 0;color:var(--dim)}
.legal-page h2{margin:30px 0 8px;font-size:20px}.legal-page p,.legal-page li{max-width:75ch}
.legal-page li+li{margin-top:7px}
.support-page{max-width:820px;margin:0 auto}.support-form{display:grid;gap:18px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.support-form label{display:grid;gap:6px}.support-form label>span{color:var(--dim);font-size:13px;font-weight:650}
.support-form input,.support-form select,.support-form textarea{width:100%;background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:6px;padding:11px 12px;font:inherit}
.support-form textarea{resize:vertical}.support-form input:focus,.support-form select:focus,.support-form textarea:focus{outline:3px solid color-mix(in srgb,var(--focus) 35%,transparent);border-color:var(--accent)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.support-request-list{display:grid;gap:10px}.support-request{padding:12px 0;border-top:1px solid var(--line)}
.support-request p{margin:7px 0;white-space:pre-wrap}.support-request small{color:var(--dim);margin-right:10px}
.support-request.resolved{opacity:.65}
.course-answer-correction{margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:12px;text-align:left;background:var(--panel2)}
.course-answer-correction p{margin:7px 0 0}
@media(max-width:640px){
  .study-area-identity{padding:19px 18px 20px;border-radius:14px}
  .study-area-identity h1{font-size:25px}
  .study-area-identity-actions{align-items:stretch;flex-direction:column}
  .study-area-identity-actions button,.study-area-identity-actions a{width:100%}
  header{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;
    grid-template-areas:"brand theme account menu" "nav nav nav nav";gap:9px;
    padding:calc(10px + env(safe-area-inset-top)) 12px 10px}
  header .brand{grid-area:brand;min-width:0;gap:8px}
  header .rx{font-size:20px}
  #account{grid-area:account}
  /* Touch wants both halves reachable without aiming, so the segments grow to
     a 40x36 target and the chip grows and travels with them. */
  .theme-toggle{grid-area:theme;justify-content:center}
  .theme-seg{width:40px;height:36px}
  .theme-chip{width:40px;height:36px}
  .theme-toggle[data-theme="dark"] .theme-chip{transform:translateX(42px)}
  #accountMenuButton{max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    padding:7px 10px}
  .account-menu{position:fixed;right:12px;top:calc(64px + env(safe-area-inset-top));min-width:210px}
  .mobile-menu{display:block;grid-area:menu}
  header nav{grid-area:nav;display:grid;margin:0;padding:0;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:0;
    overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-8px);transform-origin:top;
    transition:max-height .42s cubic-bezier(.22,1,.36,1),opacity .22s ease,
      transform .32s cubic-bezier(.22,1,.36,1),padding .32s ease,
      visibility 0s linear .42s;will-change:max-height,opacity,transform}
  header.nav-open nav{max-height:55vh;padding:8px 0 2px;overflow-y:auto;
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
    transition-delay:0s}
  header nav button{width:100%;text-align:left;padding:10px 12px;font-size:14px;background:var(--header-control-bg);
    border-color:var(--header-control-line);color:var(--header-muted)}
  main{padding:14px 12px;max-width:100%}
  .site-footer{padding-inline:14px;justify-content:flex-start}
  .form-grid{grid-template-columns:1fr}
  .study-breadcrumb ol{display:block}
  .study-breadcrumb li{display:none}
  .study-breadcrumb li:nth-last-child(2){display:block}
  .study-breadcrumb li:nth-last-child(2):before{content:"←";margin-right:7px;color:currentColor}
  .study-breadcrumb a,.study-breadcrumb button{display:inline-flex;align-items:center;min-height:36px}
  .card{padding:14px;margin-bottom:12px}
  .grid.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .aa-grid{grid-template-columns:1fr}
  .aa-card{grid-template-columns:58px minmax(0,1fr);gap:12px}.aa-code{min-height:58px}
  .study-launcher{grid-template-columns:1fr}
  main a.study-area-card,.study-area-card{min-height:176px}
  .curriculum-card{grid-template-columns:auto minmax(0,1fr);padding:16px;gap:12px}
  .curriculum-action{grid-column:2;justify-self:start;margin-top:4px}
  .study-area-card:hover,.study-area-card:focus-visible,.curriculum-card:hover,.curriculum-card:focus-visible{transform:none}
  .hero{padding:17px}.hero h2{font-size:25px}
  .mode-nav{top:68px;overflow:visible;flex-wrap:wrap}.mode-nav button,.mode-nav a{flex:1 1 calc(33.333% - 7px);white-space:normal}
  .progress-row{grid-template-columns:1fr auto}.progress-row .meter{grid-column:1/-1;grid-row:2}
  .stat{padding:11px 8px}.stat b{font-size:23px}
  .prompt{font-size:25px;overflow-wrap:anywhere;margin-top:15px}
  .prompt.small{font-size:20px}
  .matchgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px}
  .matchgrid button{padding:9px 7px;font-size:13px;overflow-wrap:anywhere}
  .answerbox{flex-direction:column}.answerbox button{width:100%}
  .setuprow{align-items:flex-start}.setuprow label{min-width:100%;margin-bottom:2px}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  select,input[type=text],input[type=password],textarea{font-size:16px;max-width:100%}
  .rxcard{padding:14px;max-width:100%;overflow-wrap:anywhere}
  .auth-card{margin:5vh auto;padding:20px 16px}
  .auth-actions{align-items:stretch;flex-direction:column}
  .auth-actions button{width:100%}
  button,.chips button,.mode-nav button,.mobile-menu{min-height:44px}
  .row>.primary,.row>.ghost{min-height:44px}
  .vizladder{font-size:12px}.vizladder .node{padding:8px 9px}
  .vizrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));min-height:0}
  .vizblock{min-height:52px;min-width:0}
  .vizruler{overflow-x:auto}.vizruler .tick{min-width:44px}
  .decode{display:grid}.decode tbody{display:grid;gap:9px}.decode tr{display:grid;padding:10px;background:var(--panel2);border-radius:9px}.decode td{display:block;border:0;padding:2px 0;white-space:normal!important}
}

.system-state{max-width:620px;margin:8vh auto;text-align:center}.system-state .row{justify-content:center}

/* Calculation Practice keeps complete word problems and method work visually distinct. */
.calc-stats{margin-bottom:20px}.calc-topic-card{min-height:175px;display:flex;flex-direction:column}
.calc-topic-card .row{margin-top:auto;margin-bottom:0}.source-bank-state{border-style:dashed}
.calc-workbook{align-items:start}.calc-rail-heading{margin-top:24px}.calc-assigned-link{margin-top:20px;width:auto}
.calc-lesson-list{display:grid;gap:18px}
.calc-module-list{display:grid}.calc-module-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,230px);gap:24px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}
.calc-module-row:last-child{border-bottom:0}.calc-module-copy h3{margin:3px 0 5px;font-size:19px}.calc-module-copy>p{margin:0;color:var(--dim);font-size:13px;line-height:1.45}
.calc-module-copy .calc-method-line{margin-top:7px;color:var(--text);font-size:12px}.calc-module-action{display:grid;justify-items:end;gap:9px;text-align:right}
.calc-module-action .primary{width:auto;min-width:124px;min-height:40px;padding:8px 14px}.calc-module-action .class-progress{justify-items:end}
.calc-direction-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}.calc-direction-list span{padding:10px 12px;border-left:3px solid var(--accent);background:var(--accent-soft);font-size:13px;font-weight:650}
.calc-worked-examples{display:grid;gap:18px}.calc-worked-examples>section{padding:17px;border:1px solid var(--line);border-radius:9px;background:var(--panel2)}
.calc-worked-examples h3{font-size:17px;line-height:1.35;margin:6px 0 12px}
.calc-lesson{max-width:760px;margin:0 auto}.solution-steps{display:grid;gap:8px;padding-left:24px}
.solution-steps li{padding-left:4px}.calc-missing-step{margin:18px 0;padding:15px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 9px 9px 0}
.calc-question{max-width:880px;margin:0 auto}.calc-question>h2{font-size:clamp(20px,3vw,28px);line-height:1.28;margin:14px 0 18px}
.calc-source{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.calc-givens{display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,1fr);gap:12px;margin:12px 0 18px}
.calc-givens>div{padding:14px;background:var(--panel2);border-radius:10px}.calc-givens h3{margin-top:0}
.calc-givens ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}.calc-givens li{display:flex;justify-content:space-between;gap:16px}.calc-givens li span{color:var(--dim);text-align:right}
.calc-workspace{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:#f7f9fc}
.calc-workspace-head{display:flex;align-items:start;justify-content:space-between;gap:16px}.calc-workspace-head h3{margin-top:0}.calc-workspace-head p{margin:0 0 12px}
.calc-workspace input,.calc-answer input{min-width:0;min-height:44px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:16px}
.ratio-builder{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;margin:12px 0}
.ratio-side{display:grid;gap:7px}.ratio-side>div{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.ratio-side>div:last-child{border:0;padding-bottom:0}.ratio-equals{font-size:24px;color:var(--dim)}.ratio-x{font-size:18px;font-weight:700}
.da-builder{display:grid;gap:10px;margin:12px 0}.da-start{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-width:360px}
#daFactors{display:flex;gap:10px;flex-wrap:wrap}.da-factor{display:flex;align-items:center;gap:8px;min-width:225px}.da-factor>div{display:grid;gap:5px}
.da-factor>div>div{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding-bottom:5px;border-bottom:1px solid var(--line)}.da-factor>div>div:last-child{border:0}
.calc-answer{margin-top:18px}.calc-answer h3{margin-top:0}.calc-answerbox{max-width:none;margin:0;display:grid;grid-template-columns:minmax(110px,1fr) minmax(90px,.7fr) auto}
.calc-hints{display:grid;gap:9px;margin-top:14px}.calc-hint{padding:13px 15px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:9px;background:var(--accent-soft)}
.calc-hint p{margin:5px 0}.calc-review-item{padding:16px 0;border-bottom:1px solid var(--line)}.calc-review-item:last-child{border:0}
.assigned-document-card{min-height:190px;display:flex;flex-direction:column}.assigned-document-card .row{margin-top:auto}
.assigned-problem-list{display:grid;gap:10px}.assigned-problem-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;margin:0;padding:16px 18px}
.assigned-preview{margin:9px 0 0;color:var(--dim);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.assigned-question textarea,.assigned-study textarea,.assigned-session-builder textarea{width:100%;min-height:96px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:12px;font-size:16px;resize:vertical}
.assigned-question .calc-answer{display:grid;gap:10px}.assigned-question .calc-answer .primary{justify-self:start}
.assigned-reference{margin:16px 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.assigned-reference summary{cursor:pointer;font-weight:700}.assigned-reference ul{display:grid;gap:8px;margin-bottom:0;padding-left:22px}.assigned-study h2,.assigned-question>h2{white-space:pre-line}
@media(max-width:640px){
  .calc-givens{grid-template-columns:1fr}.calc-givens li{display:grid;gap:2px}.calc-givens li span{text-align:left}
  .calc-workspace{padding:12px}.calc-workspace-head{display:grid}.calc-workspace-head select{width:100%}
  .ratio-builder{grid-template-columns:1fr}.ratio-equals{text-align:center;line-height:1}
  #daFactors{display:grid}.da-factor{min-width:0;width:100%}.calc-answerbox{grid-template-columns:1fr}.calc-answerbox button{width:100%}
  .calc-question>h2{font-size:21px}.calc-topic-card{min-height:0}
  .assigned-problem-row{grid-template-columns:1fr}.assigned-problem-row button{width:100%}.assigned-document-card{min-height:0}
}

/* Assignment calendar */
.today-calendar h2{margin-bottom:10px}.today-assignment-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
.today-assignment-tabs button{position:relative;display:grid;justify-items:start;gap:1px;min-width:0;min-height:62px;padding:10px 8px;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;color:var(--dim);box-shadow:none;cursor:pointer;text-align:left;transition:background var(--theme-paint-duration,.16s) ease,color var(--theme-paint-duration,.16s) ease}.today-assignment-tabs button:last-child{border-right:0}.today-assignment-tabs button::after{content:"";position:absolute;inset:auto 8px -1px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}.today-assignment-tabs button:hover{background:var(--panel2);color:var(--text)}.today-assignment-tabs button.on{background:var(--accent-soft);color:var(--text)}.today-assignment-tabs button.on::after{transform:scaleX(1)}.today-assignment-tabs button:focus-visible{z-index:1;outline:2px solid var(--focus);outline-offset:-2px}.today-assignment-tabs b{font-size:21px;line-height:1;color:var(--text)}.today-assignment-tabs span{overflow:hidden;max-width:100%;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.today-assignment-tabs .has-overdue b{color:var(--bad)}
.today-assignment-panel{display:grid}.today-assignment-row{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:10px;overflow:hidden;max-height:var(--assignment-row-height,110px);padding:11px 0;border-bottom:1px solid var(--line);opacity:1;transform:translateY(0);transition:max-height .3s ease,padding .3s ease,border-color var(--theme-paint-duration,.2s) ease,opacity .22s ease,transform .3s ease}.today-assignment-check{display:grid;place-items:center;width:22px;height:22px;min-height:22px;margin-top:1px;padding:0;border:1.5px solid var(--line-strong);border-radius:50%;background:transparent;color:#fff;box-shadow:none;cursor:pointer;transition:background var(--theme-paint-duration,.18s) ease,border-color var(--theme-paint-duration,.18s) ease,transform .14s ease}.today-assignment-check span{opacity:0;transform:scale(.45);font-size:13px;font-weight:800;line-height:1;transition:opacity .15s ease,transform .2s cubic-bezier(.2,.8,.2,1.25)}.today-assignment-check:hover,.today-assignment-check:focus-visible{border-color:var(--accent);background:var(--accent-soft)}.today-assignment-check:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.today-assignment-check:active,.today-assignment-check[data-action-owned="true"]{transform:scale(.88)}.today-assignment-copy{display:grid;gap:2px;min-width:0}.today-assignment-copy small{color:var(--dim);font-size:11.5px}.today-assignment-copy b{position:relative;width:fit-content;max-width:100%;font-size:13px;line-height:1.3}.today-assignment-copy b::after{content:"";position:absolute;left:0;right:0;top:52%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}.today-assignment-row.is-completing .today-assignment-check{border-color:var(--accent);background:var(--accent)}.today-assignment-row.is-completing .today-assignment-check span{opacity:1;transform:scale(1)}.today-assignment-row.is-completing .today-assignment-copy{color:var(--dim)}.today-assignment-row.is-completing .today-assignment-copy b::after{transform:scaleX(1)}.today-assignment-row.is-leaving{max-height:0;padding-block:0;border-color:transparent;opacity:0;transform:translateY(-5px);pointer-events:none}
.today-assignment-empty{margin:0;padding:18px 2px;color:var(--dim);font-size:12.5px}.today-assignment-more{justify-self:start;margin:9px 0 0;padding:2px 0;border:0;background:transparent;color:var(--accent);box-shadow:none;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer}.today-assignment-more:hover,.today-assignment-more:focus-visible{text-decoration:underline;text-underline-offset:3px}.today-assignment-more:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.today-assignment-undo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:9px 10px;border-radius:8px;background:var(--panel2);color:var(--dim);font-size:12px}.today-assignment-undo button{min-height:0;padding:2px;border:0;background:transparent;color:var(--accent);box-shadow:none;font-weight:750;cursor:pointer}.today-assignment-undo button:hover,.today-assignment-undo button:focus-visible{text-decoration:underline}.today-assignment-undo button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.today-assignment-tabs button,.today-assignment-tabs button::after,.today-assignment-row,.today-assignment-check,.today-assignment-check span,.today-assignment-copy b::after{transition:none}.today-assignment-check[data-action-owned="true"]{outline:2px solid currentColor;outline-offset:2px;transform:none;filter:none}}
@media (forced-colors:active){.today-assignment-tabs button.on{outline:2px solid ButtonText;outline-offset:-3px}.today-assignment-check{border:1px solid ButtonText}.today-assignment-check[data-action-owned="true"]{outline:2px solid Highlight;outline-offset:2px;transform:none;filter:none}.today-assignment-row.is-completing .today-assignment-check{background:Highlight;color:HighlightText}}
.rail-divider{height:1px;background:var(--line);margin:20px 0}
.text-link{display:inline-block;color:var(--accent);padding:10px 0;font-weight:650;text-decoration:none}.text-link:hover,.text-link:focus-visible{text-decoration:underline;text-underline-offset:3px}
.calendar-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.calendar-heading h1{font-size:32px;margin:0}.calendar-heading p{margin:3px 0 0;color:var(--dim)}
.calendar-heading-actions{display:flex;align-items:center;gap:16px}
.calendar-view-toggle{display:flex;border-bottom:1px solid var(--line)}.calendar-view-toggle button{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--dim);padding:8px 12px;cursor:pointer}
.calendar-view-toggle button.on{color:var(--text);border-color:var(--accent)}
.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px}
.calendar-paging{display:flex;align-items:center;gap:7px}.calendar-paging h2{font-size:17px;margin:0 0 0 8px;min-width:150px}
.course-filters{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.course-filters button{border:0;background:var(--surface);color:var(--dim);padding:6px 9px 6px 13px;border-radius:5px;cursor:pointer;font-size:12px}
.course-filters button.on{background:var(--accent-soft);color:var(--text);font-weight:650}
/* Course-name tooltip: pure CSS from data-course-name, so it works on
   hover AND keyboard focus, shows one at a time, and dismisses itself on
   blur/mouse-out with no JS timers. The chip keeps its compact code; the
   short reveal delay stops tooltips firing while the pointer crosses the
   row. Right-anchored so chips at the screen edge never overflow. */
.course-filters button{position:relative}
.course-filters button::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;border-radius:5px 0 0 5px;background:var(--course)}
.course-filters button[data-course-name]::after{
  content:attr(data-course-name);position:absolute;right:0;bottom:calc(100% + 7px);z-index:6;
  width:max-content;max-width:270px;padding:8px 11px;border-radius:7px;text-align:left;
  background:var(--surface);color:var(--text);border:1px solid var(--line-strong);
  border-left:3px solid var(--course);box-shadow:0 8px 22px rgba(var(--elev-shade),.28);
  font-size:12.5px;font-weight:600;line-height:1.4;white-space:normal;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(3px);
  transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s}
.course-filters button[data-course-name]:hover::after,
.course-filters button[data-course-name]:focus-visible::after{
  opacity:1;visibility:visible;transform:none;transition-delay:.28s}
@media (prefers-reduced-motion: reduce){
  .course-filters button[data-course-name]::after{transition:none}}
.calendar-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}
.month-calendar{border:0;background:var(--surface)}.weekday-row,.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.weekday-row{border-bottom:1px solid var(--line);background:var(--panel2)}.weekday-row span{padding:8px 9px;color:var(--dim);font-size:12px;font-weight:650}
.weekday-row i{font-style:normal}.weekday-row .wd-short{display:none}
.calendar-day{min-height:116px;padding:6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.calendar-day:nth-child(7n){border-right:0}.calendar-day.outside{background:#f5f7fa;color:#8b99a9}.calendar-day.today{box-shadow:inset 0 0 0 2px var(--accent)}
.calendar-day:nth-last-child(-n+7){border-bottom:0}
.calendar-day.selected{background:#f1f6fd}.day-number{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.calendar-day.today .day-number{background:var(--accent);color:#fff}.day-events{display:grid;gap:3px;margin-top:3px}
.calendar-event{display:block;width:100%;padding:3px 5px;border:0;border-left:3px solid var(--course);border-radius:2px;background:#edf2f7;color:var(--text);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;cursor:pointer}
.calendar-event span{font-weight:700;margin-right:4px}
/* Completed history de-emphasizes through exactly two mechanisms —
   strikethrough plus a moderate opacity drop. Anything fainter reads as
   disabled placeholder text on dark cells. */
.calendar-event.completed{text-decoration:line-through;opacity:.72}.more-events{border:0;background:transparent;color:var(--accent);font-size:11px;text-align:left;cursor:pointer}
.release-count{border:0;background:transparent;color:var(--dim);font-size:10.5px;text-align:left;padding:2px 4px;cursor:pointer}
.calendar-detail{position:sticky;top:95px;border-left:1px solid var(--line);padding-left:20px}.calendar-detail>h2{font-size:18px}
.agenda-list{max-width:850px}.agenda-day{margin-bottom:26px}.agenda-day>header{display:flex;align-items:center;gap:10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.agenda-day>header h2{font-size:17px;margin:0}.agenda-day>header span{font-size:12px;color:var(--accent);font-weight:700}
.agenda-item{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:start;gap:10px;padding:13px 4px;border-bottom:1px solid var(--line);border-left:3px solid var(--course)}
.completion-check{display:grid;place-items:center;width:24px;height:24px;border-radius:4px;border:1px solid var(--line-strong);background:#fff;color:#fff;cursor:pointer}
.completion-check[aria-pressed=true]{background:var(--good);border-color:var(--good)}.agenda-copy{display:grid;gap:2px;border:0;background:transparent;color:var(--text);padding:0;text-align:left;cursor:pointer}
.release-marker{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line-strong);color:var(--accent);font-size:11px;font-weight:750}.release-item{background:#f7f9fc}
.agenda-copy>b{font-size:14px}.agenda-copy>span:last-child,.agenda-meta{color:var(--dim);font-size:12px}.agenda-item.completed .agenda-copy{text-decoration:line-through;opacity:.72}
.calendar-warning{align-self:center;padding:3px 6px;border:1px solid #d8bc78;background:#fff3d7;color:#6f5315;font-size:11px}
.calendar-empty{padding:36px 0;border-block:1px solid var(--line)}.calendar-empty h2{font-size:18px}.calendar-empty p{color:var(--dim)}
.calendar-onboarding{margin:28px 0;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--panel);text-align:center}.calendar-onboarding h2{margin:0 0 8px}.calendar-onboarding p{color:var(--dim);margin:0 auto 18px;max-width:580px}.calendar-onboarding>div{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dialog-open{overflow:hidden}
.app-dialog-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;
  background:rgba(var(--elev-shade),0);overscroll-behavior:contain;opacity:0;transition:opacity .18s ease,background-color var(--theme-paint-duration,.18s) ease}
.app-dialog-backdrop.is-open{opacity:1;background:rgba(var(--elev-shade),.58)}
.app-dialog{animation:dialogEnter .22s cubic-bezier(.2,.82,.28,1) both;transform-origin:50% 35%}
.app-dialog-backdrop.is-closing{opacity:0;background:rgba(var(--elev-shade),0)}
.app-dialog-backdrop.is-closing .app-dialog{animation:dialogExit .16s ease both}
@keyframes dialogEnter{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dialogExit{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px) scale(.99)}}
.activity-stage-enter{opacity:.35;transform:translateY(8px);transition:height .28s cubic-bezier(.2,.75,.25,1),opacity .2s ease,transform .24s ease}
.activity-stage-enter.activity-stage-enter-active{opacity:1;transform:none}
.calendar-dialog-backdrop{z-index:20}
.calendar-dialog{position:relative;width:min(560px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:var(--surface);padding:26px;border:1px solid var(--line);border-radius:7px}
.calendar-dialog h2{font-size:24px}.dialog-close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:25px;color:var(--dim);cursor:pointer}
.calendar-dialog dl{margin:20px 0}.calendar-dialog dl div{display:grid;grid-template-columns:105px 1fr;padding:8px 0;border-top:1px solid var(--line)}.calendar-dialog dt{color:var(--dim);font-size:12px;font-weight:650}.calendar-dialog dd{margin:0}
.calendar-dialog-actions{display:flex;gap:8px;justify-content:flex-end}.calendar-editor{width:min(720px,100%)}.editor-intro{color:var(--dim);margin:-4px 0 18px}
.calendar-form{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}.calendar-form label{display:grid;align-content:start;gap:5px}.calendar-form label.wide{grid-column:1/-1}
.calendar-form label>span{font-size:12.5px;font-weight:650;color:#3f5269}.calendar-form small{font-weight:400;color:var(--dim)}
.calendar-form input,.calendar-form select,.calendar-form textarea{width:100%;min-width:0;min-height:43px;padding:9px 10px;border:1px solid var(--line);border-radius:5px;background:var(--panel2);color:var(--text);font:inherit}
.calendar-form textarea{resize:vertical}.editor-source{padding:10px 0;margin:15px 0 0;border-top:1px solid var(--line);color:var(--dim);font-size:12px}.editor-error{min-height:22px;margin:4px 0;color:var(--bad);font-size:13px}
@media(max-width:900px){.calendar-layout{grid-template-columns:1fr}.calendar-detail{position:static;border:0;border-top:1px solid var(--line);padding:18px 0 0}}
@media(max-width:760px){.calendar-heading,.calendar-toolbar{align-items:stretch;flex-direction:column}.calendar-heading-actions{justify-content:space-between}.calendar-view-toggle{align-self:flex-start}.course-filters{justify-content:flex-start}.calendar-layout{display:block}.calendar-detail{border:0;padding:0}.calendar-toolbar{gap:12px}.calendar-paging{flex-wrap:wrap}.calendar-paging h2{order:-1;width:100%;margin:0 0 4px}.agenda-item{grid-template-columns:30px minmax(0,1fr)}.calendar-warning{grid-column:2}.calendar-heading h1{font-size:27px}.calendar-dialog{padding:22px 18px}.calendar-dialog dl div{grid-template-columns:1fr;gap:2px}.calendar-form{grid-template-columns:1fr}.calendar-form label.wide{grid-column:auto}}
/* ===== Calendar mobile recomposition =====
   One shared state model (calendar.js) with two presentations. Desktop
   keeps the wide chip row, side-panel agenda, and two-column editor.
   Phones get a calendar-first composition: minimal chrome, the month
   grid owning the remaining viewport, course filters and the selected
   day in bottom sheets, and a compact full-screen editor. */
.calendar-add-glyph{display:none}
.calendar-filter-button{display:none}
.editor-more{margin:12px 0 0;border:0;padding:0}
.editor-more>summary{cursor:pointer;font-weight:650;font-size:13px;color:var(--dim);padding:8px 0}
.editor-more>summary:hover{color:var(--text)}
.editor-more>.calendar-form{margin-top:6px}
.sheet-handle{display:none}
.course-sheet-list{display:grid;gap:6px}
.course-sheet-row{display:flex;align-items:stretch;gap:12px;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);color:var(--text);cursor:pointer;text-align:left;font-size:14px}
.course-sheet-row i{flex:0 0 5px;border-radius:3px;background:var(--course)}
.course-sheet-row span{display:grid;min-width:0;align-content:center}
.course-sheet-row small{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course-sheet-row em{margin-left:auto;align-self:center;font-style:normal;color:var(--accent);font-weight:800;min-width:20px;text-align:center}
.course-sheet-row.on{border-color:var(--course);background:var(--accent-soft)}
.calendar-organizer{width:min(880px,100%)}.calendar-organizer-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.calendar-organizer-grid section>header,.organizer-sources>header{position:static;top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;padding:0;background:transparent;color:var(--text);border:0;z-index:auto}.calendar-organizer-grid h3{margin:0}.organizer-list{display:grid;gap:7px;max-height:48vh;overflow:auto}.organizer-list article{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}.organizer-list article>i{width:5px;align-self:stretch;border-radius:4px;background:var(--course)}.organizer-list article>div{display:grid;min-width:0;margin-right:auto}.organizer-list small{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.organizer-list article.archived{opacity:.58}/* Imported calendars sit under the organizer grid: the same list shape as terms and courses, one section wider, because a source line carries a date range and a count. */.organizer-sources{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.organizer-sources h3{margin:0}.organizer-sources .organizer-list{max-height:30vh}.organizer-sources>p.muted{margin-top:10px;font-size:13px;color:var(--dim)}.calendar-remove-modified{display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}.calendar-remove-modified input{width:auto;margin-top:2px}.calendar-small-editor{width:min(600px,100%)}.archive-toggle{display:flex;align-items:center;gap:8px;margin-top:16px}.archive-toggle input{width:auto}.calendar-import{width:min(620px,100%)}.calendar-file-picker{display:grid;gap:8px;padding:20px;margin-top:18px;border:1px dashed var(--accent);border-radius:12px;background:var(--accent-soft)}.calendar-import-busy{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--dim);font-size:13.5px}.calendar-import-busy .route-pending-indicator{width:16px;height:16px;border-width:2px;flex:0 0 auto}.calendar-import-preview{width:min(900px,100%);max-height:min(90vh,900px);overflow:auto}.import-summary{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 16px}.import-summary span{padding:7px 10px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);font-size:13px}.import-warnings{margin-bottom:14px;padding:10px;border:1px solid #b97918;border-radius:10px}.import-warnings ul{max-height:150px;overflow:auto}.import-event-list{display:grid;gap:10px}.import-event{padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--panel2)}.import-event.update{border-color:var(--accent)}.import-event.probable_duplicate{border-color:#b97918}.import-event.duplicate{opacity:.65}.import-event-choice{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}.import-event-choice input{width:auto}.import-event-choice span{display:grid}.import-event-choice small{color:var(--dim)}.import-event-choice em{font-style:normal;font-size:12px;font-weight:700;color:var(--dim)}.import-event>label:not(.import-event-choice){display:grid;gap:5px;margin-top:10px}.import-overlap{color:var(--dim);font-size:13px}.import-new-course{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:8px}.import-event .calendar-warning{display:block;margin:8px 0 0}
@media(max-width:760px){
  /* -- Compact shell: the month label is the screen title. The page
     heading and count copy are desktop luxuries; Add item becomes a
     square "+" (accessible name unchanged); the chip row collapses to
     one "Courses · N" control that opens the filter sheet. -- */
  .calendar-heading-copy{display:none}
  .calendar-heading{margin-bottom:6px}
  .calendar-heading-actions{flex-direction:row;justify-content:space-between;width:100%}
  .calendar-add{order:2;min-width:46px;min-height:44px;padding:6px 12px}
  .calendar-add-glyph{display:block;font-size:22px;line-height:1}
  .calendar-add-text{display:none}
  .calendar-toolbar{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
  .calendar-paging{flex-wrap:wrap;flex:1}
  .calendar-paging h2{order:-1;width:100%;margin:0 0 6px;font-size:24px;letter-spacing:-.02em}
  .calendar-paging .ghost{min-height:40px;padding:6px 12px}
  .course-filters{display:none}
  .calendar-filter-button{display:inline-flex;align-items:center;min-height:40px;padding:6px 12px;font-size:13px}
  /* -- Viewport-owned month canvas: the grid stretches to fill what the
     compact chrome leaves, weeks sharing the space evenly (five-week
     months get taller rows than six-week months via --week-count). The
     below-grid day list is replaced by the day sheet. -- */
  /* No box: the container border and the closing bottom edge go, and the
     grid bleeds to the screen edges (negative margin cancels the page
     padding). Only the interior separators between days, and the line
     under the weekday labels, remain. */
  .month-calendar{display:flex;flex-direction:column;touch-action:pan-y;
    border:0;background:transparent;margin-inline:-28px;
    height:calc(100dvh - 248px - env(safe-area-inset-bottom));min-height:340px}
  .calendar-day:nth-last-child(-n+7){border-bottom:0}
  .weekday-row{flex:0 0 auto;background:transparent}
  .weekday-row span{padding:6px 2px;font-size:11px;text-align:center}
  .weekday-row .wd-long{display:none}
  .weekday-row .wd-short{display:inline}
  .month-grid{flex:1;min-height:0;grid-template-rows:repeat(var(--week-count,5),minmax(0,1fr))}
  .calendar-day{min-height:0;padding:3px 2px;position:relative;overflow:hidden}
  /* min-height:0 beats the global 44px mobile button minimum that was
     stretching the 24px disc into an oval. The tap target is unharmed:
     the ::after overlay makes the whole cell clickable. */
  .calendar-day .day-number{width:24px;height:24px;min-height:0;aspect-ratio:1;margin:0 auto;font-size:12px}
  .calendar-day .day-number::after{content:"";position:absolute;inset:0}
  /* One selection language: today = outlined number, selected = filled
     number, nothing else. The heavy cell outline competed with both. */
  .calendar-day.today{box-shadow:none}
  .calendar-day.today .day-number{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);font-weight:700}
  .calendar-day.selected{background:transparent}
  .calendar-day.selected .day-number{background:var(--accent);color:#fff;box-shadow:none}
  .calendar-day.today.selected .day-number{background:var(--accent);color:#fff}
  /* -- Mini event chips: course strip + first characters of the title.
     Completion at this size shows as reduced emphasis only; adding
     strikethrough to 9px text just makes noise. Chips are decorative —
     the whole cell is the tap target; details live in the day sheet. -- */
  .day-events{pointer-events:none;display:grid;gap:2px;margin-top:3px}
  .day-events .calendar-event{width:100%;min-height:0;padding:1px 3px;border:0;border-left:2px solid var(--course);border-radius:3px;font-size:9px;line-height:1.3;font-weight:600}
  .day-events .calendar-event.completed{opacity:.45;text-decoration:none}
  .day-events .calendar-event span{display:none}
  .day-events .more-events{font-size:9.5px;padding:0 3px;line-height:1.2}
  .day-events .release-count{display:none}
  .calendar-layout .calendar-detail{display:none}
  /* -- Bottom sheets (day agenda, course filters): the month stays
     visible behind; content scrolls inside the sheet, not the page. -- */
  .calendar-sheet-backdrop{place-items:end stretch;padding:0}
  .calendar-sheet{width:100%;max-width:none;max-height:72dvh;display:flex;flex-direction:column;
    border-radius:16px 16px 0 0;border-bottom:0;margin:0;
    padding:8px 16px calc(14px + env(safe-area-inset-bottom))}
  .calendar-sheet .sheet-handle{display:block;flex:0 0 auto;width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:4px auto 10px}
  .calendar-sheet h2{font-size:18px;margin:0 0 10px}
  .sheet-scroll{overflow-y:auto;min-height:0;flex:1;overscroll-behavior:contain}
  .calendar-sheet .calendar-dialog-actions{flex:0 0 auto;padding-top:12px}
  /* -- Mobile editor: full-height sheet, required fields on the first
     screen, Save always reachable via the sticky action row. -- */
  /* Full-screen overlays bypass the app header, so they must reserve the
     device safe area (status bar / notch) themselves — pages never crossed
     that plane only because the header's own safe-area padding did it. */
  /* Overlays scroll on one axis only: vertical. overflow-x kills any
     stray horizontal overflow, touch-action:pan-y stops sideways pans,
     and overscroll-behavior prevents the loose rubber-band chaining. */
  .calendar-sheet,.calendar-editor{overflow-x:hidden;overflow-y:auto;
    touch-action:pan-y;overscroll-behavior:contain}
  .calendar-editor{width:100%;height:100dvh;max-height:100dvh;border-radius:0;
    display:flex;flex-direction:column;
    padding:calc(14px + env(safe-area-inset-top,0px)) 14px 0}
  .calendar-editor .calendar-form input,.calendar-editor .calendar-form select,
  .calendar-editor .calendar-form textarea{max-width:100%}
  /* iOS date inputs have an intrinsic width and ignore width:100% until
     the native appearance is stripped — this was the horizontal-overflow
     source. Also left-align their value to match the other fields. */
  .calendar-form input[type=date]{display:block;width:100%;min-width:0;
    -webkit-appearance:none;appearance:none;text-align:left}
  .calendar-form input[type=date]::-webkit-date-and-time-value{text-align:left}
  .calendar-editor .dialog-close{top:calc(10px + env(safe-area-inset-top,0px))}
  .calendar-editor>.calendar-form,.calendar-editor .editor-more{flex:0 0 auto}
  .calendar-editor .calendar-dialog-actions{position:sticky;bottom:0;margin-top:auto;
    background:var(--surface);border-top:1px solid var(--line);
    padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
  .calendar-editor-backdrop{padding:0}
}
@media(max-width:640px){
  /* Page side padding shrinks to 14px at this width; match the bleed. */
  .month-calendar{margin-inline:-14px}
}
.state-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;border-radius:50%;background:var(--accent-soft);font-size:24px;font-weight:700}
.empty-state{text-align:center;padding:28px 18px}.empty-state h2{font-size:20px}
.session-progress{display:flex;align-items:center;gap:10px}.session-progress .meter{flex:1}
.field-error{color:var(--bad);font-weight:700;margin-top:7px}
.retry-panel{border-left:3px solid var(--warn);padding-left:14px;text-align:left;max-width:640px;margin:14px auto}
/* ---- account settings ---------------------------------------------------
   Structure comes from alignment, not from rules. Every section is a label in
   a fixed left column and its content in the right one, so the eye finds the
   next section by the column edge instead of a horizontal line -- and the
   right half of the workspace stops sitting empty. One rule survives, above
   the destructive group, where a line still means something. */
.account-settings{max-width:900px;margin-top:6px}
.account-settings .settings-block{display:grid;grid-template-columns:210px minmax(0,1fr);
  align-items:start;gap:9px 40px;padding:15px 0}
.account-settings .settings-block>*{grid-column:2;margin:0}
.account-settings h2,.account-settings .settings-block>h2{grid-column:1;grid-row:1;margin:3px 0 0;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
/* The name is not a section label -- it sits in the content column with
   everything else, so the left rail carries labels and nothing but labels. */
.account-settings .settings-identity{padding:0 0 20px}
.account-settings .settings-identity>h2{grid-column:2;grid-row:auto;margin:0;font-size:21px;
  font-weight:680;letter-spacing:-.02em;text-transform:none;color:var(--text)}
.account-settings .settings-identity p.muted{margin:0}
.account-settings .settings-heading{display:contents}
.account-settings .settings-heading>button{grid-column:2;justify-self:end;grid-row:1;margin:0}
.account-settings .settings-value{display:flex;align-items:center;gap:8px;font-size:15px}
.account-settings .settings-value b{font-weight:650}
.account-settings .settings-value .status-verified,
.account-settings .settings-value .status-pending{margin-left:0}
.account-settings p.muted{font-size:13.5px;line-height:1.55}
.account-settings .settings-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.account-settings .settings-row input,.account-settings .settings-row select{flex:1 1 240px;min-width:0;max-width:340px}
.account-settings .settings-item{display:flex;align-items:center;gap:12px;padding:7px 0}
.account-settings .settings-item+.settings-item{border-top:1px solid var(--line)}
.account-settings .settings-item>div{display:grid;gap:1px;margin-right:auto;min-width:0}
.account-settings .settings-item-name{display:flex;align-items:center;gap:7px;color:var(--text);font-size:14.5px}
.account-settings .settings-item>div>span:last-child{color:var(--dim);font-size:12.5px}
.account-settings .settings-danger{margin-top:16px;padding-top:4px;border-top:1px solid var(--line-strong)}
.account-settings .institution-membership{margin:0 0 10px}
.account-settings .verification-code-panel{margin-top:4px}
.owner-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.owner-tool{display:grid;gap:5px;padding:15px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);text-decoration:none}
.owner-tool:hover,.owner-tool:focus-visible{border-color:var(--accent);background:var(--accent-soft)}
.owner-tool span{color:var(--dim);font-size:13px;line-height:1.45}
@media(max-width:720px){
  .account-settings .settings-block{grid-template-columns:1fr;gap:8px;padding:15px 0;
    border-top:1px solid var(--line)}
  .account-settings .settings-block>*{grid-column:1}
  .account-settings h2{grid-column:1;margin-bottom:1px}
  .account-settings .settings-heading>button{grid-column:1;justify-self:start}
  .account-settings .settings-identity{border-top:0}
  .account-settings .settings-row input,.account-settings .settings-row select{flex-basis:100%;max-width:none}
  .owner-tool-grid{grid-template-columns:1fr}
}
.danger-zone{border-color:#d8a0a6}.reset-description{display:grid;gap:2px;margin:10px 0 16px;padding:12px 14px;border-left:3px solid var(--bad);background:#fff4f5;border-radius:0 9px 9px 0}.reset-description span{color:var(--dim);font-size:13px}.reset-confirm{margin-top:16px;padding:16px;border:1px solid #d8a0a6;border-radius:10px;background:#fff8f8}.reset-confirm label{display:block;color:var(--dim);font-size:13px;font-weight:650;margin-bottom:5px}.reset-confirm input{width:100%;max-width:320px;margin-bottom:12px}
.course-match-grid{grid-template-columns:1fr 1fr;gap:16px}
.course-match-grid .row{padding:9px 11px;border:1px solid var(--line);border-radius:7px}
.course-match-grid select{max-width:100%}
@media(max-width:640px){.course-match-grid{grid-template-columns:1fr}.course-match-grid .row{align-items:stretch}.course-match-grid select{width:100%;margin-left:0!important}}
@media(max-width:480px){.match-round-win{display:grid;grid-template-columns:auto 1fr}.match-round-win button{grid-column:1/-1;width:100%;margin:0}}

/* Drug Mastery curriculum, catalog, and staged lessons */
.drug-hero{border-left:3px solid var(--accent);padding-block:22px}.drug-hero h1{max-width:850px}
.scope-picker{display:grid;gap:4px;min-width:min(100%,300px);color:var(--dim);font-size:12px;font-weight:700}
.scope-picker select{min-width:240px;color:var(--text)}
.scope-explanation{display:flex;align-items:baseline;gap:12px;padding:10px 0 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
.scope-explanation b{color:var(--text)}.scope-explanation span{color:var(--dim);font-size:13px}
.course-map{display:grid;gap:10px}.course-map-group{border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.course-map-group>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;font-weight:750}
.course-map-group[open]>summary{border-bottom:1px solid var(--line)}
.course-map-classes{display:grid;padding:8px 18px}.course-map-class{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.course-map-class:last-child{border-bottom:0}.course-map-class h3,.catalog-row h3{margin:3px 0}.course-map-class p{margin:5px 0}
.drug-class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.drug-class-card{display:flex;flex-direction:column}.drug-class-card .row{margin-top:auto}
.catalog-filters{display:grid;grid-template-columns:minmax(220px,2fr) 1fr 1fr auto;gap:10px;align-items:end}.catalog-filters label{display:grid;gap:5px;color:var(--dim);font-weight:700;font-size:12px}
.catalog-list{display:grid;gap:10px}.catalog-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:17px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.catalog-row p{margin:4px 0}
.pagination{display:flex;justify-content:center;align-items:center;gap:14px;margin:18px}
.drug-lesson-card{max-width:1040px;margin:14px auto}.mode-nav button,.lesson-checkpoints button{min-height:44px}.lesson-summary{font-size:18px;color:var(--dim);max-width:760px}.concept-definition{padding:16px;border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0;margin:18px 0}
.concept-parts,.member-grid,.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:16px 0}.concept-part,.member-card{padding:15px;background:var(--panel2);border:1px solid var(--line);border-radius:10px}.concept-part h3,.member-card h3{margin-top:0}
.exact-name-study{display:grid;gap:5px;margin:20px 0;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.exact-name-study span{color:var(--dim);font-size:12px}.exact-name-study strong{font-size:clamp(25px,4vw,38px);letter-spacing:.015em;overflow-wrap:anywhere}.exact-name-study p{margin:0;color:var(--dim)}
.drug-set-options{max-width:760px;margin-inline:auto}.drug-set-options button.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--text);box-shadow:inset 3px 0 0 var(--accent)}
.component-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.component-line span{padding:5px 9px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent);font-weight:700}.component-line b{color:var(--dim)}
.product-detail{margin-top:18px}.source-note{color:var(--dim);font-size:12px}.source-note a{color:#2f6eb8}.lesson-actions{justify-content:flex-end;margin-top:20px}
.lesson-actions .lesson-action-spacer{flex:1}
.lesson-checkpoints{max-width:1040px;margin:12px auto 0;padding-bottom:10px;border-bottom:1px solid var(--line)}
.checkpoint-heading{display:block;margin-bottom:7px;color:var(--dim);font-size:12px;font-weight:700}
.lesson-checkpoints ol{display:flex;gap:6px;overflow-x:auto;list-style:none;margin:0;padding:0 0 5px;scrollbar-width:thin}
.lesson-checkpoint{display:flex;align-items:center;gap:7px;min-height:38px;padding:6px 10px;white-space:nowrap;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--dim);font-size:12px}
.lesson-checkpoint:not(:disabled):hover{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}
.lesson-checkpoint.completed{color:var(--text);border-color:#aac4e4}
.lesson-checkpoint.current{color:#fff;background:var(--accent);border-color:var(--accent);font-weight:700}
.lesson-checkpoint.upcoming{opacity:.55}.lesson-checkpoint:disabled{cursor:not-allowed}
.checkpoint-number{display:grid;place-items:center;min-width:20px;height:20px;border:1px solid currentColor;border-radius:50%;font-variant-numeric:tabular-nums;font-size:10px}
.reviewing-label{padding:5px 8px;border-left:2px solid var(--accent);color:var(--accent);font-size:12px;font-weight:700}

/* Therapeutic-group color is a persistent learning scaffold. Every cue retains
   a written label, and independent Practice/Review questions do not receive
   these category surfaces. */
.tg-surface{--tg-accent:#718096;--tg-soft:#eef2f6;--tg-ink:#405064;--tg-line:#c8d1dc}
.tg-cns-pain{--tg-accent:#4f83bf;--tg-soft:#e7f0fa;--tg-ink:#285786;--tg-line:#b9cfe7}
.tg-respiratory-allergy{--tg-accent:#b68a22;--tg-soft:#fff5d8;--tg-ink:#765813;--tg-line:#e4cd8a}
.tg-derm-ent{--tg-accent:#826ba8;--tg-soft:#f0ebf7;--tg-ink:#594477;--tg-line:#cdbfe0}
.tg-endocrine-metabolic{--tg-accent:#378c85;--tg-soft:#e1f2ef;--tg-ink:#25635e;--tg-line:#add7d1}
.tg-gastrointestinal{--tg-accent:#bd7444;--tg-soft:#faede4;--tg-ink:#7d4725;--tg-line:#e1c0a9}
.tg-cardiovascular{--tg-accent:#b65b72;--tg-soft:#f8e8ed;--tg-ink:#7a3649;--tg-line:#dfb7c3}
.tg-infectious-disease{--tg-accent:#568c5f;--tg-soft:#e8f2e8;--tg-ink:#37643e;--tg-line:#bdd5c0}
.tg-immunology-oncology{--tg-accent:#986387;--tg-soft:#f3e9ef;--tg-ink:#693f5e;--tg-line:#d9bdcf}
.tg-genitourinary{--tg-accent:#6679b8;--tg-soft:#e9edf8;--tg-ink:#43558e;--tg-line:#c1cae4}
.therapeutic-group-label{display:inline-flex;align-items:center;gap:8px;color:var(--tg-ink);font-size:12px;font-weight:700;line-height:1.35}
.therapeutic-group-label i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--tg-accent);border:1px solid color-mix(in srgb,var(--tg-accent),#000 12%)}
.therapeutic-lesson-list{display:grid;gap:28px}
.therapeutic-lesson-section{border-top:3px solid var(--tg-accent)}
.therapeutic-lesson-section>header{display:block;padding:13px 0 8px;border-bottom:1px solid var(--tg-line)}
.therapeutic-lesson-section>header p{margin:3px 0 0;color:var(--dim);font-size:12px}
.class-course-context{color:var(--dim);font-size:11px}
.therapeutic-context{max-width:1040px;margin:0 auto 12px;display:grid;grid-template-columns:minmax(180px,auto) minmax(0,1fr);align-items:center;gap:12px;padding:9px 12px;background:var(--tg-soft);border-left:3px solid var(--tg-accent);border-bottom:1px solid var(--tg-line)}
.therapeutic-context>span{min-width:0;color:var(--text);font-size:12px;overflow-wrap:anywhere}
.drug-lesson-card.tg-surface{border-top:3px solid var(--tg-accent)}
.member-card.tg-surface{background:var(--tg-soft);border-color:var(--tg-line)}
.match-group-legend{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:0 0 13px;border-bottom:1px solid var(--line)}
.match-group-legend-title{flex:0 0 auto;color:var(--dim);font-size:11px;font-weight:700}
.match-group-legend>div{display:flex;flex-wrap:wrap;gap:8px 16px}
.match-group-legend .therapeutic-group-label{font-size:11px}
.matchgrid button.tg-surface{display:grid;align-content:center;background:var(--tg-soft);border-color:var(--tg-line);box-shadow:inset 3px 0 0 var(--tg-accent)}
.match-cues-off .matchgrid button.tg-surface{background:var(--panel2);border-color:var(--line);box-shadow:none}
.matchgrid button.tg-surface.sel,.match-cues-off .matchgrid button.tg-surface.sel{
  background:var(--tg-soft,var(--accent-soft));border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--elev-tint),.2),0 9px 20px rgba(var(--elev-tint),.22)}
.match-cues-off .matchgrid button.tg-surface.sel{background:var(--accent-soft)}
.matchgrid button.tg-surface.done,.matchgrid button.tg-surface.reuse-hit{
  color:#124c36;border-color:#29966a;background:#e1f5ea}
.matchgrid button.tg-surface.flash{
  color:#74232d;border-color:#cf4352;background:#fde3e6}
body.workspace-dark.workspace-environment main .tg-surface{--tg-soft:#1d1e1e;--tg-ink:#ced9e7;--tg-line:#41536a}
body.workspace-dark.workspace-environment main .tg-cns-pain{--tg-accent:#77a9df;--tg-soft:#1c3249;--tg-ink:#b9d8f5;--tg-line:#395d7f}
body.workspace-dark.workspace-environment main .tg-respiratory-allergy{--tg-accent:#d7b65a;--tg-soft:#39331f;--tg-ink:#f0d98e;--tg-line:#6d5d2e}
body.workspace-dark.workspace-environment main .tg-derm-ent{--tg-accent:#ad92d2;--tg-soft:#302a40;--tg-ink:#d9c8ec;--tg-line:#5b4c74}
body.workspace-dark.workspace-environment main .tg-endocrine-metabolic{--tg-accent:#65b6ad;--tg-soft:#1d3838;--tg-ink:#b6e1dc;--tg-line:#356661}
body.workspace-dark.workspace-environment main .tg-gastrointestinal{--tg-accent:#dc9669;--tg-soft:#3c2d25;--tg-ink:#f0c7ad;--tg-line:#704d39}
body.workspace-dark.workspace-environment main .tg-cardiovascular{--tg-accent:#d98499;--tg-soft:#3c2730;--tg-ink:#f0b9c7;--tg-line:#704555}
body.workspace-dark.workspace-environment main .tg-infectious-disease{--tg-accent:#83b88a;--tg-soft:#243728;--tg-ink:#c0dfc3;--tg-line:#49664d}
body.workspace-dark.workspace-environment main .tg-immunology-oncology{--tg-accent:#c18aac;--tg-soft:#3a2935;--tg-ink:#e7bfd8;--tg-line:#6b4b61}
body.workspace-dark.workspace-environment main .tg-genitourinary{--tg-accent:#93a6df;--tg-soft:#272f49;--tg-ink:#cbd5f1;--tg-line:#4b587d}
@media(max-width:760px){.drug-class-grid{grid-template-columns:1fr}.catalog-filters{grid-template-columns:1fr 1fr}.catalog-filters label:first-child{grid-column:1/-1}.catalog-filters button{width:100%}}
@media(max-width:640px){.course-map-group>summary{align-items:flex-start}.course-map-class,.catalog-row{grid-template-columns:1fr}.course-map-class button,.catalog-row button{width:100%}.catalog-filters{grid-template-columns:1fr}.catalog-filters label:first-child{grid-column:auto}.scope-picker,.scope-picker select{width:100%;min-width:0}.scope-explanation{display:grid;gap:3px}.drug-lesson-card{padding:16px}.therapeutic-context{grid-template-columns:1fr;gap:4px}.match-group-legend{align-items:flex-start}.match-group-legend>div{display:grid;gap:6px}.session-progress{flex-wrap:wrap}.session-progress .meter{min-width:55%}.lesson-checkpoints{margin-top:8px}.lesson-actions{display:grid;grid-template-columns:1fr 1fr}.lesson-actions .lesson-action-spacer{display:none}.lesson-actions button{width:100%}.lesson-actions>.lesson-action-spacer:first-child+button{grid-column:1/-1}}

/* Purpose-built academic layout */
.card:has(.prompt),.card:has(.opts),.card:has(.answerbox),.card:has(.matchgrid),
/* .activity-stage is on this list because THE STAGE is the surface, whichever
   activity is standing on it. The question card only ever got its panel via
   .drug-lesson-card, so the ready card -- same component, no lesson class --
   came out transparent and edgeless, floating on the page with no boundary. */
.learncard,#learnBody,#revBody,#mBody,.drug-lesson-card,.activity-stage,.calc-question,.assigned-question,
.assigned-study,.assigned-session-builder,.auth-card,.system-state,.empty-state,.review-builder{
  background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:22px;
}
/* Course questions use the companion's dimensional blue light model in the
   light workspace: a soft crown reflection, a deeper lower edge, and the
   under-eye blue as the central tone. Answer controls keep their own panel fill
   so the response field remains distinct from the stage that contains it. */
.card.course-question-stage{
  background-color:#4a75cc;
  background-image:
    radial-gradient(ellipse at 88% 4%,rgba(147,184,245,.42),transparent 46%),
    radial-gradient(ellipse at 0% 100%,rgba(47,85,161,.52),transparent 58%),
    linear-gradient(135deg,#638cde 0%,#557fd4 34%,#4a75cc 64%,#355ca9 100%);
  color:#f7fbff;border:0
}
/* Course answer choices use fill and the existing inset status bar for state.
   Their perimeter stays quiet in idle, hover, selected, and graded states. */
.course-question-stage .opts button{border-color:transparent}
.course-question-stage .opts button.correct,
.course-question-stage .opts button.wrong{border-color:transparent!important}
.course-question-stage .muted,
.course-question-stage .pill,
.course-question-stage .sr-atoms tr.sr-neutral td{color:#f2f8ff}
/* The prompt sits across the card's illuminated crown, while verdicts sit on
   pale semantic panels. Both need the companion's outline ink, not the white
   used for unboxed explanation copy over the deeper blue below. */
.course-question-stage .prompt,
.course-question-stage .calc-prompt,
.course-question-stage .result{color:#0e1c3a}
body.workspace-dark.workspace-environment main .course-question-stage{
  background:var(--panel);color:var(--text);border:0
}
body.workspace-dark.workspace-environment main .course-question-stage .prompt,
body.workspace-dark.workspace-environment main .course-question-stage .calc-prompt{color:var(--text)}
body.workspace-dark.workspace-environment main .course-question-stage .muted,
body.workspace-dark.workspace-environment main .course-question-stage .pill,
body.workspace-dark.workspace-environment main .course-question-stage .sr-atoms tr.sr-neutral td{color:var(--dim)}
body.workspace-dark.workspace-environment main .course-question-stage .sr-atoms tr.sr-neutral td:first-child{color:var(--line-strong)}
/* ===================== Authentication environment =====================
   The sign-in screen is a threshold, not a workspace, so it deliberately does
   NOT take part in the rails/workspace inversion: it stays navy in both themes
   and only the card re-tones. Inverting it would mean a *brighter* screen in
   dark mode, and it would break the hand-off into the arrival intro, which
   opens on exactly this colour.

   --outer-canvas-bg is overridden on <html> as well as <body>, because <html> paints
   the page canvas. Scoping it to body alone left the pale dark-mode gutter
   showing beyond the body box: a navy slab floating on pale rails. */
html.auth-environment,html.auth-environment.workspace-dark,
body.auth-environment,body.auth-environment.workspace-dark{
  --outer-canvas-bg:#07111e;--gutter:var(--outer-canvas-bg);
  /* The stored workspace preference remains on <html>, but this environment
     owns its own rail. These values terminate inherited workspace chrome at
     the signed-out boundary rather than changing or restoring preference
     state during authentication. */
  --header-bg:#07111e;--header-text:#eef3f9;--header-muted:#a9b8ca;
  --header-control-bg:#13223a;--header-control-line:#2a3c56;--header-control-text:#ffffff;
  --header-focus:color-mix(in srgb,#eef3f9 76%,transparent);
  --elev-tint:39,109,204;--elev-shade:7,17,30;--on-accent:#ffffff;
  /* A threshold screen has no workspace to light, so the bloom is the
     environment. Without this the arrival blooms to the workspace ground --
     #f7f9fc in light, Eclipse #0f0f0f in dark -- and then pops back to navy
     when the veils drop, revealing a destination that was never lit. */
  --arrival-canvas:#07111e
}
/* Landing and authentication are one signed-out environment. The header is
   part of its navy field, not a workspace bar placed above it. */
body.auth-environment>header{background:transparent;border:0;box-shadow:none}

/* --- sign-in backdrop -------------------------------------------------
   A field of points, each one a memory decaying along a forgetting curve and
   renewing on a lengthening interval. See static/auth-backdrop.js. Colours
   live here as raw RGB triples so the canvas can read them rather than
   hard-coding brand values in script. */
body.auth-environment{
  --auth-backdrop-ink:226,238,252;
  --auth-backdrop-pulse:121,173,243
}
.auth-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;display:block}
/* main and the footer must not paint over the canvas. They were opaque only to
   cover the light workspace colour; body already carries the same navy, so
   going transparent composites identically and lets the field through. The
   header stays opaque at z-index 5, which keeps the rail clean. */
body.auth-environment main,body.auth-environment .site-footer{
  position:relative;z-index:1;background-color:transparent}
/* The theme control has nothing left to act on here: the auth environment is
   navy in both themes by design, so the toggle would change one card's tone on
   a screen with nothing else on it. The preference still persists and applies
   inside the product. */
body.auth-environment .theme-toggle{display:none}
/* Optically centred. The card used to hang from a top margin inside a tall
   min-height, leaving ~184px above it and ~440px below. */
body.auth-environment main{
  max-width:none;background-image:none;
  display:grid;align-content:center;
  padding:clamp(20px,5vh,60px) 28px clamp(60px,13vh,150px)}
/* Legal links stay quietly at the foot of the shared environment. */
body.auth-environment .site-footer{
  max-width:none;border-top:0;background-image:none;
  color:#8ea2b8;padding-right:28px}
body.auth-environment .site-footer a{color:#8ea2b8}
body.auth-environment .site-footer a:hover{color:#8bb9f6}
.card.auth-card.auth-login-card{
  width:min(100%,448px);max-width:448px;margin:clamp(42px,8vh,92px) auto;padding:32px 34px 30px;
  background:#edf3fa;border:1px solid #bfd1e5;border-radius:16px;
  box-shadow:0 16px 38px rgba(var(--elev-shade),.09),0 2px 6px rgba(var(--elev-shade),.05)
}
body.auth-environment .card.auth-card{
  width:min(100%,448px);max-width:448px;
  margin:0 auto
}
.auth-login-card>h2{margin:0 0 22px;font-size:28px;line-height:1.12;letter-spacing:-.035em;font-weight:760}
.auth-login-card .auth-form{gap:15px}
.auth-login-card .auth-field{gap:7px}
.auth-login-card .auth-field label{font-size:14px;color:var(--text);font-weight:650}
.auth-login-card .auth-field input{min-height:48px;background:#fff;border-color:#b9c9da;border-radius:9px}
.auth-login-card .auth-field input:focus{border-color:#2f79d7;box-shadow:0 0 0 3px rgba(var(--elev-tint),.17)}
.auth-login-card .auth-actions{display:grid;gap:8px;margin-top:2px}
.auth-login-card .auth-actions .primary{width:100%;min-height:48px;font-size:15px}
.auth-login-card .auth-actions .primary[aria-busy="true"]{cursor:wait}
.auth-error-slot{display:block;min-height:18px;color:var(--bad)!important;font-size:12.5px;line-height:1.35}
.auth-recovery-link{justify-self:end;margin-top:-4px;font-size:13.5px;font-weight:600}
.auth-switch{display:flex;align-items:baseline;justify-content:center;gap:5px;margin:2px 0 0;color:#667a91;font-size:13.5px}
.auth-switch-link{appearance:none;border:0!important;background:transparent!important;box-shadow:none!important;color:#256fca!important;padding:0!important;min-height:0!important;font:inherit;font-weight:700;line-height:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.auth-switch-link:hover{color:#174f96!important}
.auth-intro{margin:-7px 0 19px;color:#667a91;line-height:1.45;font-size:14px}
.auth-registration-card{padding-top:29px;padding-bottom:24px}
.auth-registration-card>h2{margin-bottom:18px}
.auth-registration-card .auth-form{gap:12px}
.auth-password-guidance{margin:-3px 0 0;color:#667a91;font-size:12.5px;line-height:1.35}
.auth-registration-card .legal-note{margin:2px 0 0;color:#6b7f95;font-size:11.5px;line-height:1.42;text-align:center}
/* Auth keeps its blue palette regardless of the saved workspace theme.
   The column supplies the surface; the form itself stays transparent. */
body.auth-environment main .card.auth-card{--text:#edf4ff;--dim:#a9bcd2;--bad:#ffadb5;--line:#435973;--panel2:#20334b;--surface:#14263c;--accent:#8bbcff;background:transparent;color:var(--text);border:0;box-shadow:none}
body.auth-environment main .auth-login-card .auth-field input{background:rgba(7,17,30,.45);color:#edf4ff;border-color:#526983}
body.auth-environment main .auth-switch{color:#a9bcd2}
body.auth-environment main .auth-switch-link{color:#99c5ff!important}
body.auth-environment main .auth-intro,body.auth-environment main .auth-password-guidance,
body.auth-environment main .auth-registration-card .legal-note{color:#a9bcd2}
@media(max-height:820px) and (min-width:761px){
  body.auth-environment main{padding-top:18px;padding-bottom:58px}
  .card.auth-card.auth-login-card{padding-top:27px;padding-bottom:24px}
  .auth-login-card>h2{margin-bottom:18px}
  .auth-login-card .auth-form{gap:12px}
  .auth-registration-card .auth-field input{min-height:44px}
  .auth-registration-card .auth-intro{margin-bottom:14px}
}
@media(max-width:760px){
  body.auth-environment .card.auth-card{margin-left:auto;margin-right:auto}
  body.auth-environment main{padding-bottom:clamp(40px,9vh,90px)}
  /* Wrap as whole links rather than breaking mid-word, which four flex items
     do at 390px. */
  body.auth-environment .site-footer{
    justify-content:flex-start;padding-inline:14px;flex-wrap:wrap;gap:10px 18px}
}
@media(max-width:640px){
  .card.auth-card.auth-login-card{padding:26px 20px 28px;border-radius:12px}
  .auth-login-card>h2{margin-bottom:22px;font-size:25px}
  .auth-switch{flex-wrap:wrap}
}
/* The form belongs to a quiet left column in the shared star field. Keep the
   surface outside the animated form so switching auth steps does not move it. */
body.auth-environment:not(.landing-environment){--auth-column:clamp(420px,36vw,580px)}
body.auth-environment:not(.landing-environment)::before{
  content:"";display:block;position:fixed;inset:0 auto 0 0;width:var(--auth-column);z-index:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(33,54,79,.96),rgba(23,42,64,.92) 70%,rgba(20,37,57,.86));
  border-right:1px solid rgba(148,186,230,.12)}
body.auth-environment:not(.landing-environment)::after{
  content:"";position:fixed;inset:0 0 0 var(--auth-column);z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 60% 46%,rgba(47,106,183,.15),transparent 66%)}
body.auth-environment:not(.landing-environment) main{
  width:var(--auth-column);min-height:calc(100svh - var(--app-header-height) - 70px);
  margin:0;padding:48px clamp(28px,3.5vw,64px) 72px}
body.auth-environment:not(.landing-environment) main .card.auth-card{
  width:100%;max-width:370px;margin:0 auto;padding:0;border-radius:0}
body.auth-environment:not(.landing-environment) .auth-login-card>h2{
  font-size:32px;letter-spacing:-.035em;margin-bottom:30px}
body.auth-environment:not(.landing-environment) .auth-form{gap:19px}
body.auth-environment:not(.landing-environment) .auth-field input{min-height:50px;color-scheme:dark}
body.auth-environment:not(.landing-environment) .auth-recovery-link{color:#a4ccff}
body.auth-environment:not(.landing-environment) .password-toggle{color:#b4c9e1}
body.auth-environment:not(.landing-environment) .auth-error-slot{color:var(--bad)!important}
body.auth-environment:not(.landing-environment) .auth-switch{margin-top:10px;font-size:13px}
body.auth-environment:not(.landing-environment) .legal-note a{color:#a4ccff}
body.auth-environment:not(.landing-environment) .site-footer{position:relative;z-index:1}
@media(max-width:760px){
  body.auth-environment:not(.landing-environment){--auth-column:100%}
  body.auth-environment:not(.landing-environment)::before{border:0;background:
    radial-gradient(circle at 86% 12%,#7fa9d4 0 1px,transparent 2px),
    radial-gradient(circle at 72% 7%,#557597 0 1px,transparent 2px),
    radial-gradient(circle at 92% 80%,#557597 0 1px,transparent 2px),
    radial-gradient(circle at 9% 90%,#7fa9d4 0 1px,transparent 2px),
    linear-gradient(145deg,#1d334e,#0b192b)}
  body.auth-environment:not(.landing-environment) main{padding:38px 26px 54px}
  body.auth-environment:not(.landing-environment) .site-footer{justify-content:center;padding:18px 20px}
}
@media(max-height:740px) and (min-width:761px){
  body.auth-environment:not(.landing-environment) main{padding-top:26px;padding-bottom:34px}
  body.auth-environment:not(.landing-environment) .auth-form{gap:13px}
}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:4px 0 22px;border-bottom:1px solid var(--line);margin-bottom:24px}
.page-heading h1{font-size:clamp(27px,4vw,39px);line-height:1.08;max-width:760px;margin:0 0 9px;letter-spacing:-.03em}
.page-heading h2{font-size:clamp(24px,3.5vw,34px);line-height:1.12;margin:0 0 8px}
.page-heading p{max-width:680px;color:var(--dim);margin:0}.page-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;padding-bottom:9px;border-bottom:1px solid var(--line);margin:28px 0 0}
.section-heading h2{font-size:18px;margin:0}.section-heading p{margin:0;color:var(--dim)}
main h1[tabindex="-1"]:focus,main h2[tabindex="-1"]:focus{outline:none}

.study-status{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border-block:1px solid var(--line);margin:18px 0 28px}
.study-status>div{padding:13px 16px;border-right:1px solid var(--line)}
.study-status>div:last-child{border-right:0}.study-status b{display:block;font-size:23px;line-height:1.1}.study-status span{display:block;color:var(--dim);font-size:12px;margin-top:4px}

.planner-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,320px);gap:46px;align-items:start}
.planner-kicker{display:block;color:var(--dim);font-size:12px;font-weight:680;letter-spacing:.025em;margin-bottom:8px}
.planner-title{font-size:clamp(30px,4vw,42px);line-height:1.06;margin:0;letter-spacing:-.035em}
.today-heading{display:block;padding:4px 0 24px;border-bottom:1px solid var(--line)}
.today-section{margin-top:38px}.today-section>header{position:static;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0;border:0;background:transparent;color:var(--text)}
.today-section>header h2{margin:0;font-size:21px;letter-spacing:-.015em}.today-section>header p{margin:4px 0 0;color:var(--dim);font-size:13px}.today-section>header>a{color:var(--accent);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}.today-section>header>a:hover,.today-section>header>a:focus-visible{text-decoration:underline}
.today-continue-list{display:grid;gap:10px;margin-top:14px}.today-continue-item{--today-card-shadow:0 3px 10px rgba(var(--elev-shade),.045);--today-card-hover-shadow:0 4px 6px rgba(var(--elev-shade),.08),0 11px 24px rgba(var(--elev-tint),.12);position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:82px;padding:15px 18px;border:0;border-radius:13px;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:var(--today-card-shadow);transform:translateY(0) scale(1);transition:transform var(--action-rest-duration) var(--action-ease),box-shadow var(--theme-paint-duration,var(--action-rest-duration)) ease-out,background-color var(--theme-paint-duration,var(--action-rest-duration)) ease-out}
.today-continue-item::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.3),transparent 42%),linear-gradient(100deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 72%);opacity:.22;transition:opacity var(--action-rest-duration) ease-out}.today-continue-item>span{position:relative;z-index:1}.today-continue-identity{display:flex;align-items:center;gap:14px;min-width:0}.today-continue-copy{display:grid;gap:3px;min-width:0}.today-continue-mark{flex:0 0 auto;width:42px;height:42px}.today-continue-item small{color:var(--dim);font-size:11.5px}.today-continue-item b{font-size:15px}.today-continue-action{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:12.5px;font-weight:720;white-space:nowrap}.today-continue-action i{display:inline-block;font-style:normal;transition:transform var(--action-rest-duration) var(--action-ease)}
.today-continue-item.is-primary{--today-card-shadow:0 3px 5px rgba(var(--elev-shade),.07),0 9px 20px rgba(var(--elev-tint),.11);--today-card-hover-shadow:0 4px 6px rgba(var(--elev-shade),.1),0 14px 28px rgba(var(--elev-tint),.2);background:linear-gradient(118deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface) 62%)}.today-continue-item.is-primary .today-continue-action{padding:6px 10px;border-radius:999px;background:var(--accent);color:var(--on-accent,#fff);box-shadow:0 3px 9px rgba(var(--elev-tint),.18)}
@media (hover:hover) and (pointer:fine){.today-continue-item:hover{box-shadow:var(--today-card-hover-shadow);transform:translateY(-2px) scale(1.004)}.today-continue-item:hover::before{opacity:.58}}
.today-continue-item:focus-visible{outline:2px solid var(--focus);outline-offset:2px;box-shadow:var(--today-card-hover-shadow);transform:translateY(-2px) scale(1.004)}.today-continue-item:focus-visible::before{opacity:.58}.today-continue-item:hover .today-continue-action i,.today-continue-item:focus-visible .today-continue-action i{transform:translateX(3px)}.today-continue-item:active{box-shadow:0 1px 2px rgba(var(--elev-shade),.14),0 3px 7px rgba(var(--elev-tint),.08);transform:translateY(1px) scale(.994);transition-duration:var(--action-press-duration)}
.today-continue-item[data-action-owned="true"],.learning-tool-list a[data-action-owned="true"],.study-plan-preview>a[data-action-owned="true"],.study-plan-row[data-action-owned="true"],.catalog-entry-row[data-action-owned="true"]{transform:translateY(1px) scale(.994);box-shadow:0 1px 2px rgba(var(--elev-shade),.14),0 3px 7px rgba(var(--elev-tint),.08);transition-duration:var(--action-press-duration)}
@media (prefers-reduced-motion:reduce){.today-continue-item,.today-continue-item::before,.today-continue-action i{transition:none}.today-continue-item:hover,.today-continue-item:focus-visible,.today-continue-item:active{transform:none}.today-continue-item[data-action-owned="true"]{outline:2px solid currentColor;outline-offset:2px;transform:none;box-shadow:none;filter:none}}
@media (forced-colors:active){.today-continue-item{box-shadow:none}.today-continue-item::before{display:none}.today-continue-item[data-action-owned="true"]{outline:2px solid Highlight;outline-offset:2px;transform:none;filter:none}.today-continue-item.is-primary .today-continue-action{border:1px solid ButtonText;box-shadow:none}}
.today-recent-link{justify-self:start;color:var(--accent);font-size:12.5px;font-weight:700;text-decoration:none}.today-recent-link:hover,.today-recent-link:focus-visible{text-decoration:underline}
.today-study-gateway{display:grid;justify-items:start;gap:9px;margin-top:38px;padding:0}.today-study-gateway h2{margin:0;font-size:17px}.today-study-action{display:inline-flex;align-items:center;gap:7px;padding:2px 0;color:var(--accent);font-size:12.5px;font-weight:750;text-decoration:none;transform:scale(1);transform-origin:center;transition:transform var(--action-rest-duration) var(--action-ease)}.today-study-action:hover{text-decoration:underline}.today-study-action:focus-visible{border-radius:3px;outline:2px solid var(--focus);outline-offset:3px;text-decoration:underline}.today-study-action:active,.today-study-action[data-action-owned="true"]{transform:scale(.99)}.today-study-action span{display:inline-block;transition:transform var(--action-rest-duration) var(--action-ease)}.today-study-action:hover span,.today-study-action:focus-visible span{transform:translateX(3px)}@media (prefers-reduced-motion:reduce){.today-study-action,.today-study-action span{transition:none}.today-study-action:active,.today-study-action[data-action-owned="true"]{outline:2px solid currentColor;outline-offset:2px;transform:none;filter:none}}@media (forced-colors:active){.today-study-action[data-action-owned="true"]{outline:2px solid Highlight;outline-offset:2px;transform:none;filter:none}}
.today-activity-list{display:grid;margin-top:14px}.today-activity-list article{padding:15px 4px;border-bottom:1px solid var(--line)}.today-activity-list h3{margin:0 0 3px;color:var(--text);font-size:14px;letter-spacing:0;text-transform:none}.today-activity-list p{margin:0;color:var(--dim);font-size:12.5px}.today-empty{margin:14px 0 0;padding:16px;border-radius:10px;background:var(--panel2);color:var(--dim);font-size:13px;line-height:1.5}
.today-data-slot[aria-busy="true"]{pointer-events:none}.today-loading-list i{display:block;min-height:82px;border:1px solid var(--line);border-radius:13px;background:var(--panel2);opacity:.62}.today-loading-line{display:block;height:52px;margin-top:14px;border-radius:10px;background:var(--panel2);opacity:.62}.today-assignments-loading[aria-busy="true"]{display:grid;gap:10px}.today-assignments-loading[aria-busy="true"] span{display:block;height:48px;border-radius:8px;background:var(--panel2);opacity:.62}.today-assignments-loading[aria-busy="true"] span:first-child{height:72px;border-radius:0}
.due-ledger{border-top:1px solid var(--line)}
.due-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.due-row span{color:var(--dim)}.due-row b{font-size:20px;font-variant-numeric:tabular-nums}.due-row.is-due b{color:var(--accent)}
.planner-rail{border-left:1px solid var(--line);padding-left:27px;position:sticky;top:105px}.planner-rail h2{font-size:18px;margin:0 0 10px}
/* The dark sidebar gets a slight surface lift (~3% luminance) so the rail
   reads as its own region rather than relying on a lone vertical rule. */
body.workspace-dark.workspace-environment main .planner-rail{background:#1d1e1e;border:0;border-radius:12px;padding:20px 22px;box-shadow:0 11px 28px rgba(0,0,0,.18)}
body.workspace-dark.workspace-environment main .today-continue-item{--today-card-shadow:0 4px 13px rgba(0,0,0,.14);--today-card-hover-shadow:0 5px 8px rgba(0,0,0,.2),0 14px 28px rgba(0,0,0,.24)}
body.workspace-dark.workspace-environment main .today-continue-item.is-primary{background:linear-gradient(118deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface) 64%)}

/* Strong section rules use --rule-strong, never --text: in dark mode a
   text-colored rule is nearly white and outshouts real content. */
.report-header{padding-bottom:20px;border-bottom:2px solid var(--rule-strong);margin-bottom:8px}.report-header h1{font-size:34px;margin:0 0 7px}.report-header p{color:var(--dim);max-width:760px;margin:0}
.report-section{margin-top:30px}.report-section>header{position:static;background:transparent;border:0;border-bottom:1px solid var(--line);padding:0 0 8px;margin-bottom:0}
.report-section>header h2{font-size:17px;margin:0}.report-section>header p{color:var(--dim);margin:0 0 0 auto;font-size:13px}

/* Progress v2 uses domain-native measures and an exclusive objective
   distribution. Fixed order, labels, counts, and symbols carry meaning in
   addition to color. */
main{--progress-mastered:#23865f;--progress-developing:#4f82bd;--progress-weak:#bf5a54;--progress-unassessed:#a8b0ba}
body.workspace-dark.workspace-environment main{--progress-mastered:#57b992;--progress-developing:#73a6dc;--progress-weak:#e0837d;--progress-unassessed:#718093}
.progress-processing{margin:16px 0;padding:12px 14px;border-left:3px solid var(--warn);background:var(--panel2);color:var(--dim)}
.progress-processing b{color:var(--text)}
.progress-snapshot{display:grid;grid-template-columns:1fr;gap:28px;margin-top:22px;padding:20px 0;border-bottom:1px solid var(--line)}
.progress-snapshot>h2{grid-column:1/-1;font-size:17px;margin:0}.progress-snapshot-curriculum{display:grid;gap:13px}.progress-snapshot-curriculum>div:first-child{display:grid;gap:3px}.progress-snapshot-curriculum>div:first-child>b{font-size:20px}
.progress-core-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:transparent;border:0;margin-top:14px}
.progress-core-card{background:var(--panel);padding:18px;min-width:0}.progress-core-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:15px}.progress-core-card h3{font-size:16px;margin:0 0 5px}.evidence-badge,.progress-availability{font-size:11px;color:var(--dim)}.evidence-early{color:var(--warn)}.progress-availability{padding:2px 6px;border:1px solid var(--line);border-radius:4px}
.progress-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}.progress-metric{display:grid;gap:1px;min-width:0}.progress-metric b{font-size:18px;font-variant-numeric:tabular-nums}.progress-metric span{color:var(--dim);font-size:11px;line-height:1.25}
.scalar-measure{display:grid;gap:5px;margin-top:15px;padding-top:12px;border-top:1px solid var(--line)}.scalar-label{display:flex;justify-content:space-between;gap:10px;color:var(--dim);font-size:12px}.scalar-label b{color:var(--text)}
.objective-distribution{display:grid;gap:8px;min-width:0}.distribution-track{display:flex;width:100%;height:10px;overflow:hidden;border:1px solid var(--line);border-radius:2px;background:var(--panel2)}.distribution-track .segment{display:block;height:100%;border-right:1px solid color-mix(in srgb,var(--panel) 65%,transparent)}.segment-mastered{background:var(--progress-mastered)}.segment-provisional,.segment-learning{background:var(--progress-developing)}.segment-weak{background:var(--progress-weak)}.segment-unassessed{background:var(--progress-unassessed)}
.distribution-legend{display:flex;gap:7px 14px;flex-wrap:wrap;color:var(--dim);font-size:10.5px}.distribution-legend span{display:flex;align-items:center;gap:4px}.distribution-legend i{width:8px;height:8px;border-radius:50%;background:var(--progress-developing)}.distribution-legend .legend-mastered{background:var(--progress-mastered)}.distribution-legend .legend-weak{background:var(--progress-weak);border-radius:1px;transform:rotate(45deg)}.distribution-legend .legend-unassessed{background:transparent;border:1px solid var(--progress-unassessed)}.distribution-legend b{color:var(--text);font-variant-numeric:tabular-nums}
.progress-attention ol{list-style-position:inside;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}.progress-attention li{padding:14px 2px;border-bottom:1px solid var(--line)}.progress-attention li>div{display:inline-flex;gap:8px;align-items:baseline}.progress-attention li span,.progress-attention p{color:var(--dim);font-size:12px}.progress-attention p{margin:4px 0 0 23px}
.progress-course-list{display:grid;margin-top:8px;border-top:1px solid var(--line)}.progress-course{border-bottom:1px solid var(--line)}.progress-course-summary{display:grid;grid-template-columns:minmax(0,1fr) auto 22px;gap:18px;align-items:center;width:100%;padding:17px 2px;border:0;background:transparent;color:var(--text);text-align:left;border-radius:0}.progress-course-summary:hover{background:var(--panel2)}.progress-course-summary>span:first-child,.course-mastery{display:grid;gap:2px}.progress-course-summary small{color:var(--dim);font-weight:400}.course-mastery{text-align:right}.course-mastery>b{font-size:18px}.disclosure-icon{font-size:20px;transition:transform .16s ease}.progress-course-summary[aria-expanded="true"] .disclosure-icon{transform:rotate(180deg)}
.progress-course-overview{padding:0 2px 16px}.progress-course-panel{padding:0 18px 7px 28px;border-top:1px solid var(--line)}.progress-study-area{padding:18px 0;border-bottom:1px solid var(--line)}.progress-study-area:last-child{border-bottom:0}.study-area-heading{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:11px}.study-area-heading h3{font-size:14px;margin:0}.study-area-heading span{color:var(--dim);font-size:11px}.study-area-heading a{font-size:12px;white-space:nowrap}.study-area-due{margin:8px 0 0;color:var(--warn);font-size:11px}
@media(prefers-reduced-motion:reduce){.disclosure-icon{transition:none}}
@media(max-width:900px){.progress-core-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.progress-snapshot{grid-template-columns:1fr}.progress-core-grid{grid-template-columns:1fr}.progress-course-summary{grid-template-columns:minmax(0,1fr) auto 18px;gap:9px}.course-mastery small{max-width:80px}.progress-course-panel{padding-left:12px;padding-right:8px}.study-area-heading{display:grid;gap:6px}.distribution-legend{gap:6px 10px}}

.academic-split{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:44px;align-items:start}
.academic-rail{border-left:1px solid var(--line);padding-left:22px;position:sticky;top:106px}.academic-rail h2{font-size:15px;margin:0 0 9px}.academic-rail p{color:var(--dim);font-size:13px}.academic-rail .row{display:grid;align-items:stretch}.academic-rail button{width:100%}
.workbook-layout{display:grid;grid-template-columns:minmax(0,264px) minmax(0,1fr);gap:42px;align-items:start}.workbook-layout>*{min-width:0}.workbook-rail{min-width:0;position:sticky;top:106px;border-right:1px solid var(--line);padding-right:22px}.workbook-rail .scope-picker,.workbook-rail .scope-picker select{width:100%;min-width:0;max-width:100%}.workbook-rail h2{font-size:15px}.workbook-rail p{color:var(--dim);font-size:13px}
.workbook-main>.section-heading{margin-top:0}.drug-class-grid{grid-template-columns:1fr;gap:0}
.drug-class-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:26px;padding:20px 0;border-top:0;border-bottom:1px solid var(--line);margin:0}
.drug-class-card h2{font-size:19px;margin:4px 0 6px}.drug-class-card>p{max-width:760px;margin:5px 0}.drug-class-card .row{grid-column:2;grid-row:1/5;align-self:center;display:grid;justify-items:end;margin:0}.drug-class-card .class-progress{order:2;margin-top:8px;text-align:right;justify-items:end}
.class-report-list{display:grid}.class-report-row{display:grid;grid-template-columns:minmax(280px,1.25fr) minmax(230px,.85fr) auto;gap:24px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}
.class-report-row:last-child{border-bottom:0}.class-report-row h3{font-size:16px;margin:2px 0 7px;color:var(--text);text-transform:none;letter-spacing:0}.class-report-context{display:block;margin-top:3px;color:var(--dim);font-size:11px}
.class-report-measure{display:grid;gap:6px;color:var(--dim);font-size:12px}.class-report-measure .meter{width:100%}

.practice-intro{max-width:720px;padding:2px 0 20px;border-bottom:1px solid var(--line)}.practice-intro h1{font-size:32px;margin:0 0 8px}.practice-intro p{color:var(--dim);margin:0}
.practice-start{padding:20px 0 28px;border-bottom:1px solid var(--line)}
.practice-start h2{font-size:18px;margin:0 0 6px;text-transform:none;letter-spacing:0;color:var(--text)}
.practice-start>p{color:var(--dim);margin:0 0 20px;max-width:560px}
.practice-start-button{font-size:15px;padding:12px 30px}
.practice-start-modes{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:20px}
.practice-start-modes>span{color:var(--dim);font-size:13px;margin-right:2px}
.session-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0 4px}
.session-bar .mode-switcher{padding:0}
.session-bar-scope .scope-picker{margin:0}
.session-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:10px 0 12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.session-tool-chips{display:flex;flex-wrap:wrap;gap:8px}
.session-tool-chips .mode-chip{font-size:12px;padding:5px 13px}
.session-toggle{display:inline-flex;align-items:center;gap:8px;color:var(--dim);font-size:13px;cursor:pointer}
.session-toggle input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}
.mode-switcher{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 4px}
.mode-chip{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 15px 6px 9px;font-size:13px;color:var(--text);cursor:pointer;line-height:1.2}
.mode-chip:hover{border-color:var(--dim)}
/* An activity is a thing, so its chip carries the thing. Same mark the card's
   eyebrow shows once you are inside, so picking an activity and being in one
   are one picture rather than two. */
.mode-chip .activity-mark{width:20px;height:20px}
.mode-chip:not(:has(.activity-mark)){padding-left:15px}

/* THE ACTIVITY ROW IS A SET OF OBJECTS, NOT A SET OF BUTTONS.
   Every activity owns a drawn mark, and the mark is the thing a student
   recognises -- but it was set at 20px inside an outlined pill, so the pill was
   louder than the drawing it contained, and six pills in a row read as a
   toolbar. The outline comes off, the mark grows to the size it is drawn for,
   and the row becomes six objects you choose between.

   SELECTION IS A HEIGHT, NOT A COLOUR.
   These are objects on a table, so the language of choosing is the language of
   picking something up. Three states, one ladder:

     resting    flat, grey, its shadow tight underneath
     hovering   lifted and lit -- a PREVIEW of being chosen
     chosen     lifted higher and left standing

   While you hover a different activity, two are off the table: the one you have
   and the one you are considering, at different heights. Clicking settles the
   old one and leaves the new one up, so the click does not introduce a new
   visual idea -- it just decides which of the two stays.

   The lift itself is the shared silhouette mechanism (11.8/11.9); only the
   tokens are local. Scoped to .mode-switcher because the same .mode-chip class
   is an OPTION control elsewhere -- pair kind, round, board size, validation,
   bank layout -- and a setting is not a thing you can pick up.
   VISUAL_IDENTITY_CONSTITUTION 7.14, 11.10. */
.mode-switcher{gap:4px 10px;padding:12px 0 10px}
.mode-switcher .mode-chip{
  --lift-scale:1.055;
  --lift-tilt:5deg;
  --lift-perspective:340px;
  --lift-pool-left:9px;
  --lift-pool-right:auto;
  --lift-pool-bottom:1px;
  --lift-pool-height:6px;
  /* A resting object still touches the table, but the cue is CONTACT, not
     shadow: a soft dark shape under a greyed mark on a near-black ground reads
     as dirt rather than depth. So at rest the pool is a hairline and the drop
     shadow is barely there; both arrive with the lift. */
  --lift-pool-a:.2;
  --lift-rest-shadow:drop-shadow(0 1px 1px rgba(var(--lift-shadow-tint),.26));
  border:0;background:transparent;border-radius:11px;
  padding:9px 13px 11px 10px;gap:11px;font-size:13.5px;color:var(--dim);
  transition:color var(--theme-paint-duration,var(--action-rest-duration,150ms)) ease}
/* The pool sits under the MARK, which is the part with mass. The word is its
   label and travels with it. */
.mode-switcher .mode-chip::after{width:34px;opacity:.55;transform:scaleX(.72)}
.mode-switcher .mode-chip:hover::after,.mode-switcher .mode-chip:focus-visible::after,
.mode-switcher .mode-chip.is-active::after{opacity:.42}
.mode-switcher .mode-chip .lift-rise,
.mode-switcher .mode-chip .lift-plane{gap:11px}
.mode-switcher .mode-chip .activity-mark{width:34px;height:34px;
  filter:grayscale(1);opacity:.45;
  transition:filter var(--action-rest-duration,150ms) ease,
    opacity var(--action-rest-duration,150ms) ease}
.mode-switcher .mode-chip .chip-label{white-space:nowrap}
.mode-switcher .mode-chip:hover{color:var(--text)}
/* A PREVIEW warms; it does not arrive. Full colour is what being chosen looks
   like, so hovering may only travel part of the way there -- if the pointer
   could produce the chosen appearance, hovering a neighbour would read as
   having switched to it. The ladder has to be monotonic on every channel it
   uses. VISUAL_IDENTITY_CONSTITUTION 11.10. */
.mode-switcher .mode-chip:hover .activity-mark,
.mode-switcher .mode-chip:focus-visible .activity-mark{filter:grayscale(.5);opacity:.82}
.mode-switcher .mode-chip:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* Chosen: the same lift, held, and a touch higher than a hovered preview so the
   two are never the same height at the same moment. */
.mode-switcher .mode-chip.is-active{
  --lift-scale:1.085;
  --lift-hover-shadow:
    drop-shadow(0 4px 6px rgba(var(--lift-shadow-tint),.32))
    drop-shadow(0 13px 22px rgba(var(--lift-shadow-tint),.24));
  background:transparent;border-color:transparent;
  color:var(--text);font-weight:700}
.mode-switcher .mode-chip.is-active .activity-mark{filter:none;opacity:1}
.mode-switcher .mode-chip.is-active .lift-rise{
  transform:scale(var(--lift-scale));filter:var(--lift-hover-shadow)}
.mode-switcher .mode-chip.is-active .lift-plane{transform:rotateX(var(--lift-tilt))}
.mode-switcher .mode-chip.is-active::after{
  transform:translateY(2px) scaleX(1.35) scaleY(1.5);opacity:.42}
@media (prefers-reduced-motion:reduce){
  .mode-switcher .mode-chip.is-active .lift-rise,
  .mode-switcher .mode-chip.is-active .lift-plane{transform:none}
}
body.workspace-dark.workspace-environment main .mode-switcher .mode-chip .activity-mark{
  filter:grayscale(1) brightness(1.5);opacity:.5}
body.workspace-dark.workspace-environment main .mode-switcher .mode-chip:hover .activity-mark,
body.workspace-dark.workspace-environment main .mode-switcher .mode-chip:focus-visible .activity-mark{
  filter:grayscale(.55) brightness(1.12);opacity:.82}
body.workspace-dark.workspace-environment main .mode-switcher .mode-chip.is-active .activity-mark{
  filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .mode-switcher .mode-chip,.mode-switcher .mode-chip .activity-mark{transition:none}
}
@media(max-width:760px){
  .mode-switcher .mode-chip{padding:7px 9px;font-size:12.5px;gap:8px}
  .mode-switcher .mode-chip .activity-mark{width:28px;height:28px}
}
/* THE SELECTED ACTIVITY SPEAKS THE THEME'S LANGUAGE.
   This was background:var(--text) -- a near-white pill in dark mode, which
   reads as disabled rather than chosen, and made the one control whose whole
   job is saying "you are here" the only one not using the accent. It is the
   soft accent, not the full fill: the gold fill belongs to the primary action,
   and a mode chip must not compete with the button that submits an answer. */
.mode-chip.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--text);font-weight:700}
.mode-chip.is-active:hover{border-color:var(--accent)}
.shelf-heading{font-size:18px;letter-spacing:0;text-transform:none;color:var(--text);margin:26px 0 4px}
.workspace-shelf{display:grid}
.workspace-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line)}
.workspace-row:last-child{border-bottom:0}
.workspace-row h3{font-size:16px;margin:0 0 4px;color:var(--text);text-transform:none;letter-spacing:0}
.workspace-mark{display:inline-flex;flex:0 0 auto;width:34px;height:34px}
.workspace-mark .activity-mark{width:100%;height:100%}
.workspace-state{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:650;
  letter-spacing:.02em;color:var(--accent-strong)}
.workspace-row p{color:var(--dim);margin:0;font-size:13px}

.scenario-setup h2{margin-top:22px}
.scenario-setup .setuprow select{max-width:min(430px,100%);text-overflow:ellipsis}
.scenario-checks{display:grid;gap:8px;margin:10px 0}
.scenario-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.scenario-check input{margin-top:3px}
.scenario-check span{display:grid}.scenario-check small{color:var(--dim)}
.scenario-check.unavailable{opacity:.45;cursor:not-allowed}
.scenario-context .pill{white-space:nowrap}
.scenario-explanation{border-left:3px solid var(--line);padding-left:14px;margin:16px auto;max-width:640px;text-align:left}
.scenario-explanation h2{font-size:15px;margin:0 0 6px}.scenario-explanation h3{font-size:13px;margin:12px 0 4px}
.scenario-explanation .why-others{margin:4px 0;padding-left:18px}.scenario-explanation .why-others li{margin:4px 0;color:var(--dim)}
.scenario-explanation .why-others li b{color:var(--text)}
.scenario-explanation .fact-grid{margin-top:10px}
.scenario-finish{max-width:760px}
.scenario-finish .pill{margin-right:6px}
.scenario-review{margin:14px 0}.scenario-review summary{cursor:pointer;font-weight:600;padding:6px 0}
.scenario-review-item{border-left:3px solid var(--line);padding:8px 0 8px 14px;margin:12px 0}
.scenario-review-item.good{border-left-color:var(--good)}
.scenario-review-item.bad{border-left-color:var(--bad)}
.scenario-review-item .scenario-explanation{margin:8px 0 0;border-left:0;padding-left:0}

/* Drug Landscape Builder */
/* ---- Drug landscape: a table you play on, with a tray you draw from -------
   The bank used to be a 300px column beside the map: it cost the map a third of
   the canvas, forced the class grid into three narrow columns, and still ran
   past the fold, so the button that scores your work was reached by scrolling a
   sidebar. VISUAL_IDENTITY_CONSTITUTION 7.12. */
.ls-layout{display:block;margin-top:4px}
.ls-sync-slot{display:contents}
.ls-map{display:grid;gap:14px}
.activity-stage .ls-map{margin-top:20px}
/* The dock pins to the bottom of the viewport, so mid-scroll it sits OVER the
   table. At full scroll it reaches its own place in the flow and the table's
   last row is clear, so this is breathing room, not a reservation the height of
   the tray -- which on a short map would be a void the size of the dock. */
.ls-table{padding-bottom:40px}

.activity-dock{position:sticky;bottom:0;z-index:6;margin:18px 0 0;
  padding:12px 15px 13px;border:0;border-radius:12px 12px 0 0;
  background:color-mix(in srgb,var(--surface) 95%,transparent);
  box-shadow:0 -10px 30px rgba(var(--elev-shade),.14);backdrop-filter:blur(12px)}
.dock-head{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.dock-title{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim)}
.dock-count{font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.dock-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dock-actions button{min-height:36px;padding:0 14px;font-size:13px}
.dock-head .session-tool-chips{display:flex;gap:6px;flex-wrap:wrap}
.dock-head .mode-chip{min-height:30px;padding:0 12px;font-size:12.5px}
/* The tray: full width, so a bank that showed one card per row now shows a
   handful, and only scrolls when it is genuinely deep. */
.dock-rail{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;
  margin:10px 0 0;max-height:124px;overflow-y:auto;overflow-x:hidden}
.activity-dock.is-tall .dock-rail{max-height:46vh}
.dock-note{margin:9px 0 0;font-size:12.5px;color:var(--dim)}
.activity-dock .ls-stage,.activity-dock .ls-bank-tabs,
.activity-dock .ls-expert-note{margin:9px 0 0}
.activity-dock .ls-stage{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px}
.activity-dock .ls-stage .meter{flex:1;min-width:160px}
.activity-dock .ls-selected-panel{margin:9px 0 0}
@media(max-width:760px){
  .activity-dock{padding:10px 12px}
  .dock-actions{margin-left:0;width:100%}
  .dock-rail{max-height:34vh}
}
@media (prefers-reduced-motion:reduce){.activity-dock{backdrop-filter:none}}
.ls-bank h2{font-size:16px;margin:0}
.ls-bank-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.ls-bank-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0}
.ls-bank-tabs button{background:var(--panel2);border:1px solid var(--line);border-radius:7px;
  padding:5px 10px;font-size:12.5px;font-weight:600;color:var(--dim);cursor:pointer}
.ls-bank-tabs button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.ls-stage{margin:8px 0;display:grid;gap:4px;font-size:13px}
.ls-stage .meter{width:100%}
.ls-expert-note{margin:6px 0;font-size:12.5px}
.ls-selected-panel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;padding:8px 10px;
  border:2px solid var(--accent);border-radius:8px;background:var(--accent-soft);font-size:13px}
.ls-selected-panel button{padding:3px 10px;min-height:0;font-size:12px}
/* One column: drug names are long unbreakable words, so narrow columns
   force overflow. Extra columns appear only when the bank is expanded. */
.ls-bank-tools button,.ls-mode-copy{font-size:12.5px}
.ls-bank-tools button{padding:5px 10px;min-height:0}
.ls-card{display:flex;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);
  padding:6px 10px;font-size:13px;font-weight:600;cursor:grab;user-select:none;min-width:0;max-width:100%;
  transition:transform .12s,box-shadow var(--theme-paint-duration,.12s),border-color var(--theme-paint-duration,.12s),background var(--theme-paint-duration,.12s)}
.ls-card .ls-label{min-width:0;overflow-wrap:anywhere}
.ls-tag{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;flex-shrink:0;
  padding:1px 5px;border-radius:4px;background:var(--panel2);color:var(--dim)}
.ls-card:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(var(--elev-tint),.12);border-color:var(--accent)}
.ls-card.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--focus)}
.ls-card.is-drag-source{cursor:grabbing;color:transparent!important;background:color-mix(in srgb,var(--workspace) 84%,#000);
  border-color:var(--line);box-shadow:inset 0 2px 7px rgba(var(--elev-shade),.24);transform:none}
.ls-card.is-drag-source>*{visibility:hidden}
.ls-drag-proxy{position:fixed;z-index:30;left:0;top:0;margin:0;box-sizing:border-box;pointer-events:none;
  cursor:grabbing;opacity:1;transform-origin:top left;transition:none!important;
  box-shadow:0 10px 24px rgba(var(--elev-shade),.28);will-change:transform}
.ls-drag-proxy.is-pending-placement{cursor:progress;box-shadow:0 6px 18px rgba(var(--elev-shade),.22);
  animation:ls-pending-placement .8s ease-in-out infinite alternate}
.ls-drag-proxy.is-rejected{border-color:var(--incorrect-border);animation:none}
.ls-drag-proxy.is-returning{animation:none}
.is-landscape-dragging,.is-landscape-dragging *{cursor:grabbing!important}
.ls-card.locked{cursor:default;border-color:var(--correct-border);background:var(--correct-bg);color:var(--correct-text)}
.ls-card.locked.settling{animation:ls-settle .18s ease-out}
.ls-card.locked .ls-tag{background:transparent;color:inherit;opacity:.7}
.ls-card.bad{border-color:var(--incorrect-border);background:var(--incorrect-bg);color:var(--incorrect-text)}
.ls-card.bad.shaking{animation:ls-shake .25s}
.ls-card.fixed{cursor:default;background:var(--panel2);border-color:var(--line)}
/* Restrained type colors: labels and shape carry the meaning; color only
   reinforces it. Never red/yellow/green — those mean wrong/due/correct. */
.ls-card.kind-class{border-radius:5px;background:var(--panel2);border-color:var(--line-strong)}
.ls-card.kind-class .ls-tag{background:var(--panel);color:var(--dim)}
.ls-card.kind-product{background:var(--accent-soft);border-color:var(--accent)}
.ls-card.kind-product .ls-tag{background:var(--panel);color:var(--dim)}
.ls-card.kind-brand{border-radius:18px;background:var(--panel);border-color:var(--rule-strong);font-weight:500;font-style:italic}
.ls-card.kind-brand .ls-tag{background:var(--panel2);color:var(--dim);font-style:normal}
/* Progressive completion compression: a finished branch folds into one
   compact relationship row and stops competing for space. */
.ls-map-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px;font-size:13px}
.ls-map-tools .ghost{padding:5px 10px;min-height:0;font-size:12.5px}
.ls-auto-collapse{display:flex;align-items:center;gap:6px;color:var(--dim);cursor:pointer;font-weight:600}
.ls-done-row{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  border:1px solid var(--correct-border);border-radius:8px;background:var(--correct-bg);color:var(--correct-text);
  padding:7px 12px;font-size:13.5px;margin:4px 0;transform-origin:top}
.ls-done-row.folding{animation:ls-fold .3s ease-out}
.ls-done-row:hover,.ls-done-row:focus-visible{filter:brightness(.97)}
.ls-done-row .ls-done-chain{min-width:0;overflow-wrap:anywhere}
.ls-done-row .ls-done-chain i{font-style:normal;opacity:.6;padding:0 2px}
.ls-done-row b{flex-shrink:0}
.ls-done-count{font-weight:400;opacity:.8;padding-left:6px}
.ls-done-class{font-weight:600}
.ls-done-group{padding:10px 14px;font-size:14px}
button.ls-fold{background:transparent;border:1px solid var(--correct-border);color:var(--correct-text);
  border-radius:6px;font-size:11.5px;padding:2px 8px;cursor:pointer;margin-left:8px;vertical-align:middle;
  --action-busy-color:var(--correct-text);
  --action-ambient-shadow:0 6px 14px color-mix(in srgb,var(--good) 16%,transparent);
  --action-hover-shadow:0 2px 3px rgba(var(--elev-shade),.16),0 8px 17px color-mix(in srgb,var(--good) 22%,transparent);
  --action-pressed-shadow:0 1px 2px rgba(var(--elev-shade),.18),0 3px 6px color-mix(in srgb,var(--good) 13%,transparent)}
@keyframes ls-fold{from{opacity:0;transform:scaleY(.6)}to{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion: reduce){.ls-done-row{animation:none}}
/* Selecting a card highlights every drop area of the matching level. */
.selecting-class .ls-classes,.selecting-product .ls-products,.selecting-brand .ls-brands{
  border-color:var(--accent);border-style:solid}
@keyframes ls-settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes ls-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes ls-pending-placement{from{filter:brightness(1)}to{filter:brightness(.88)}}
.ls-map{display:grid;gap:14px}
.ls-group{border:0;border-radius:10px;padding:12px 14px;background:var(--surface)}
.ls-group summary{cursor:pointer;font-weight:600;margin-bottom:8px}
.ls-class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px;margin-top:10px}
.ls-class{border:0;border-radius:8px;padding:10px;background:var(--workspace)}
.ls-class h3{margin:0 0 8px;font-size:14px;color:var(--text);text-transform:none;letter-spacing:0;font-weight:650}
.ls-dropzone{min-height:44px;border:1.5px dashed var(--line-strong);border-radius:8px;padding:7px;
  display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;cursor:pointer;transition:border-color var(--theme-paint-duration,.12s),background var(--theme-paint-duration,.12s)}
.ls-dropzone small{width:100%;color:var(--dim)}
.ls-dropzone.over,.ls-dropzone:hover{border-color:var(--accent);background:var(--accent-soft)}
.ls-dropzone.is-drag-over{border-color:var(--accent);border-style:solid;background:var(--accent-soft);
  box-shadow:0 0 0 2px var(--focus)}
.ls-dropzone.hinted{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--focus)}
.ls-brands{min-height:36px;margin-top:6px}
@media (prefers-reduced-motion:reduce){.ls-drag-proxy,.ls-drag-proxy.is-pending-placement{
  transition:none!important;animation:none!important}}
.ls-product{margin:2px 0;width:100%}
.ls-placed-class{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--workspace)}
.ls-actions{flex-wrap:wrap}
.ls-feedback{min-height:20px;color:var(--dim);font-size:13px}
.ls-wrong-list li{margin:6px 0}
@media (max-width: 900px){
  .ls-layout{grid-template-columns:1fr}
  .ls-bank{position:static;max-height:none}
}

.reference-header{position:static;display:flex;justify-content:space-between;align-items:end;gap:24px;padding:0 0 18px;background:transparent;border:0;border-bottom:2px solid var(--rule-strong)}.reference-header h1{font-size:32px;margin:0 0 5px}.reference-header p{color:var(--dim);margin:0}
.reference-tools{position:sticky;top:105px;z-index:2;background:var(--workspace);padding:14px 0;border-bottom:1px solid var(--line)}
.catalog-list{gap:0}.catalog-row{display:block;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0}
.catalog-row-summary{display:grid;grid-template-columns:minmax(240px,1fr) minmax(280px,1.15fr) auto;align-items:center;gap:18px;padding:16px 0}
.catalog-row h3{font-size:16px;color:var(--text);text-transform:none;letter-spacing:0;margin:0 0 3px}.catalog-row p{font-size:13px;margin:2px 0}.catalog-row .eyebrow{font-size:11px;color:var(--dim)}
.catalog-row .class-progress{margin-top:6px}.catalog-row .class-progress-detail{display:none}
.catalog-details{margin:0 0 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.catalog-details>summary{display:flex;justify-content:space-between;align-items:center;gap:18px;cursor:pointer;padding:12px 14px;color:var(--accent);list-style-position:inside}
.catalog-details>summary:hover{background:var(--panel2)}.catalog-details>summary span:first-child{display:inline-flex;align-items:baseline;gap:10px}.catalog-details>summary small{color:var(--dim);font-weight:500}
.catalog-detail-hint{font-size:12px;color:var(--dim);text-align:right}
.catalog-details[open]>summary{border-bottom:1px solid var(--line);background:var(--accent-soft)}
.catalog-reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;padding:16px 18px 10px}
.catalog-fact{padding:4px 0 14px}.catalog-fact h4{margin:0 0 7px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.catalog-fact ul{margin:0;padding-left:19px}.catalog-fact li{margin:4px 0;line-height:1.4}.catalog-fact p{font-size:14px;line-height:1.45;margin:0 0 7px}
.catalog-routes,.catalog-class-reference{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px}
.catalog-routes ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;list-style:none;padding:0}
.catalog-routes li{display:grid;gap:2px}.catalog-routes li span,.catalog-routes li small{color:var(--dim)}
.catalog-sources a{display:inline}.catalog-reference-note{margin:0!important;padding:10px 18px 13px;border-top:1px solid var(--line);color:var(--dim);font-size:12px!important}
.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;color:var(--dim);font-size:12px}.catalog-toolbar>div{display:flex;gap:8px}

.course-map{gap:0;border-top:1px solid var(--line)}.course-map-group{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
.course-map-group>summary{padding:14px 0}.course-map-group[open]>summary{border-bottom:1px solid var(--line)}
.course-map-classes{padding:0 0 0 18px}.course-map-class{padding:16px 0}.course-map-class h3{color:var(--text);font-size:15px;text-transform:none;letter-spacing:0}

.review-builder{max-width:720px;margin-top:26px}.review-builder h2{font-size:18px}
.drug-lesson-card{max-width:900px}.concept-part,.member-card{border-radius:6px}.component-line span{border-radius:4px}
.route-variant-map{margin:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.route-variant-map>h2{margin:20px 0 4px}.route-variant-map>p{color:var(--dim);margin:0 0 10px}.route-variant-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.55fr);gap:24px;padding:16px 0;border-top:1px solid var(--line)}.route-variant-row p{color:var(--dim);margin:4px 0 0}.route-variant-row>div:last-child{display:grid;align-content:start;gap:3px}.route-variant-row span{color:var(--dim);font-size:12px}
.pill{font-size:12px;color:var(--dim)}.badge{border-radius:4px}

@media(max-width:820px){
  .planner-layout,.academic-split,.workbook-layout{grid-template-columns:1fr;gap:28px}
  .planner-rail,.academic-rail{position:static;border-left:0;border-top:1px solid var(--line);padding:22px 0 0}
  body.workspace-dark.workspace-environment main .planner-rail{border-radius:12px;padding:20px 22px}
  .workbook-rail{position:static;border-right:0;border-bottom:1px solid var(--line);padding:0 0 18px}
  .page-heading{align-items:flex-start;display:grid}.page-heading-actions{justify-content:flex-start}
}
@media(max-width:640px){
  main{padding:18px 14px 38px}.page-heading h1,.planner-title{font-size:29px}.report-header h1,.practice-intro h1,.reference-header h1{font-size:27px}
  .today-heading{padding-bottom:20px}.today-section{margin-top:28px}.today-section>header{align-items:flex-start}.today-continue-item{align-items:flex-start;display:grid}
  .mode-nav{top:70px;gap:0;display:flex;flex-wrap:wrap;overflow:visible}.mode-nav button,.mode-nav a{flex:1 1 82px;min-height:44px;padding-inline:4px;font-size:12px;text-align:center}
  .study-status{grid-template-columns:repeat(2,minmax(0,1fr))}.study-status>div{border-bottom:1px solid var(--line)}.study-status>div:nth-child(2n){border-right:0}
  .drug-class-card{grid-template-columns:1fr}.drug-class-card .row{grid-column:1;grid-row:auto;justify-items:start;margin-top:12px}.drug-class-card .row button{width:100%}
  .drug-class-card .class-progress{justify-items:start;text-align:left}.class-report-row{grid-template-columns:1fr;gap:12px}.class-report-row button{width:100%}
  .route-variant-row{grid-template-columns:1fr;gap:10px}
  .workspace-row{grid-template-columns:auto minmax(0,1fr);gap:7px 14px}.workspace-row a{width:100%;text-align:center;margin-top:5px;grid-column:1/-1}.practice-start-button{width:100%}
  .reference-header{display:grid;grid-template-columns:1fr;grid-template-areas:none;align-items:start}.reference-header button{width:100%}.reference-tools{top:115px}.catalog-row-summary{grid-template-columns:1fr}.catalog-row h3{grid-row:auto}.catalog-row-summary>button{width:100%}.catalog-reference-grid{grid-template-columns:1fr}.catalog-routes,.catalog-class-reference{grid-column:auto}.catalog-routes ul{grid-template-columns:1fr}.catalog-details>summary{align-items:flex-start}.catalog-details>summary span:first-child{display:grid;gap:2px}.catalog-detail-hint{display:none}.catalog-toolbar{align-items:flex-start}.catalog-toolbar>div{display:grid}
  .report-section>header{display:grid;grid-template-columns:1fr;gap:3px}.report-section>header p{margin:0}
  .assess-actions button{flex:1 1 100%}.assess-question-map .section-title{display:grid;gap:10px}.assess-question-map .section-title button{width:100%}
  .checklist-item{grid-template-columns:auto 1fr}
}

/* ---- course navigator: nested, persistent disclosures ---- */
.courses-toolbar{display:flex;align-items:center;border-bottom:1px solid var(--line);margin-bottom:10px}
.courses-toolbar .mode-nav{margin-right:auto}.courses-collapse-all{border:0;background:transparent;color:var(--dim);padding:8px 2px;cursor:pointer;font-size:13px;font-weight:650}
.courses-collapse-all:hover{color:var(--accent)}
.course-disclosure{border-top:1px solid var(--line);transition:background-color var(--theme-paint-duration,.2s) ease,border-color var(--theme-paint-duration,.2s) ease}
.course-disclosure:last-child{border-bottom:1px solid var(--line)}
.course-disclosure.is-open{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 3%,transparent),transparent 68%)}
main .course-disclosure-header{display:flex;align-items:center;gap:12px;padding:0;background:transparent;color:var(--text);border:0}
.course-disclosure-toggle,.course-section-toggle{display:flex;align-items:center;gap:14px;min-width:0;border:0;background:transparent;color:var(--text);cursor:pointer;text-align:left}
.course-disclosure-toggle{flex:1;padding:18px 2px}
.course-heading-copy,.course-section-toggle>span:last-child,.course-study-copy{display:grid;min-width:0}
.course-title{font-size:17px;font-weight:640;letter-spacing:-.014em;line-height:1.32}
.course-heading-copy small,.course-section-toggle small,.course-study-copy small{color:var(--dim);font-size:12.5px;font-weight:520;line-height:1.4}
.disclosure-chevron{flex:0 0 9px;width:9px;height:9px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(-45deg);transition:transform .21s cubic-bezier(.2,.75,.25,1),border-color var(--theme-paint-duration,.16s) ease}
.course-disclosure-toggle:hover .disclosure-chevron,.course-section-toggle:hover .disclosure-chevron{border-color:var(--accent)}
.is-open>.course-disclosure-header .disclosure-chevron,.course-section-disclosure.is-open>.course-section-header .disclosure-chevron{transform:rotate(45deg)}
.course-disclosure-panel,.course-section-panel{display:grid;grid-template-rows:minmax(0,0fr);overflow:hidden;opacity:.35;transition:grid-template-rows .22s cubic-bezier(.2,.75,.25,1),opacity .16s ease}
.course-disclosure.is-open>.course-disclosure-panel,.course-section-disclosure.is-open>.course-section-panel{grid-template-rows:minmax(0,1fr);opacity:1}
.course-disclosure-panel>div,.course-section-panel>div{min-height:0;overflow:hidden}
.course-disclosure-panel>div{padding:0 2px 14px 25px}
.course-description{margin:0 0 12px;color:var(--dim);font-size:14px}
.course-section-disclosure{border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
.course-section-toggle{flex:1;padding:14px 3px;text-transform:none}
.course-section-toggle b{font-size:14px;text-transform:uppercase;letter-spacing:.055em;color:var(--dim)}
.course-section-toggle small{display:block;margin-top:2px;text-transform:none;letter-spacing:0}
.course-section-panel>div{padding:0 0 9px 24px}
/* Exam header: the checklist sits at the exam's level, carried by a readiness
   bar, so nothing in the lecture list below competes with it. No border box --
   the tinted pill is the only surface. */
.course-section-header{display:flex;align-items:center;gap:16px}
.exam-readiness-link{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;min-height:36px;padding:7px 13px 7px 15px;border:0;border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent);font-size:13px;font-weight:680;box-shadow:none;cursor:pointer;transition:background-color var(--theme-paint-duration,.14s) ease}
.exam-readiness-link:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.exam-readiness-bar{display:flex;width:92px;height:6px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--line) 90%,transparent)}
.exam-readiness-bar i{display:block;width:0;height:100%;transition:width .55s cubic-bezier(.2,.75,.25,1)}
.exam-readiness-bar .is-green{background:var(--good)}.exam-readiness-bar .is-yellow{background:var(--warn)}.exam-readiness-bar .is-red{background:var(--bad)}
.exam-readiness-bar.is-wide{width:100%;height:8px;margin:12px 0 4px}
.exam-readiness-label{display:inline-flex;align-items:center;gap:5px}
.exam-readiness-label::after{content:"›";font-size:19px;font-weight:500;line-height:1;transform:translateY(-1px);transition:transform .14s ease}
.exam-readiness-link:hover .exam-readiness-label::after{transform:translate(2px,-1px)}
.course-study-row{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;padding:9px 11px;border:0;border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent);border-radius:0;background:transparent;color:var(--text);cursor:pointer;text-align:left;text-decoration:none;transition:background-color var(--theme-paint-duration,.14s) ease,padding .14s ease}
.course-study-row:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);padding-left:14px}
.course-study-row:last-child{border-bottom:0}.course-study-copy{margin-right:auto}
.course-study-copy b{font-size:14px;line-height:1.35}.course-study-arrow{color:var(--accent);font-size:24px;line-height:1;transform:translateX(-3px);transition:transform .14s ease}
.course-study-row:hover .course-study-arrow{transform:translateX(1px)}
.exam-row{min-height:57px;margin:0;padding:8px 11px;border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent);align-items:center}
.exam-row .primary{padding:8px 13px}.practice-review-entry,.pre-exam-entry{margin:6px 0;border-bottom:0}
.exam-calculation-entry{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.exam-calc-hero .stats{margin:18px 0}.exam-calc-hero .row{margin-top:16px}
.exam-calc-plan{display:grid;gap:0}.exam-calc-todo{display:flex;align-items:flex-start;gap:12px;padding:12px 4px;border-top:1px solid var(--line);cursor:pointer}
.exam-calc-todo input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent)}.exam-calc-todo span,.exam-calc-resource-row>div:first-child{display:grid;gap:3px}.exam-calc-todo small,.exam-calc-resource-row small{color:var(--muted)}
.exam-calc-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}.exam-calc-topic{margin:0}.exam-calc-topic h2,.exam-calc-foundation h2{margin-bottom:7px}.exam-calc-topic h3,.exam-calc-foundation h3{margin:18px 0 8px;font-size:.93rem}.exam-calc-topic ul,.exam-calc-exclusions ul{padding-left:21px}
.exam-calc-resources{margin-top:auto}.exam-calc-resource-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}.exam-calc-resource-row .row{flex:0 0 auto}.exam-calc-resource-row .compact{padding:7px 10px}
.exam-calc-foundation,.exam-calc-exclusions{margin-top:16px}
@media(max-width:760px){.exam-calc-topic-grid{grid-template-columns:1fr}.exam-calc-resource-row{align-items:flex-start;flex-direction:column}.exam-calc-resource-row .row{width:100%}.exam-calc-resource-row .row button{flex:1}}
.course-ungrouped-list{border-top:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
@media(max-width:640px){
  .calc-module-row{grid-template-columns:1fr;gap:12px}.calc-module-action{justify-items:start;text-align:left}.calc-module-action .class-progress{justify-items:start}.calc-direction-list{grid-template-columns:1fr}
  .course-disclosure-header{align-items:stretch!important}.course-disclosure-toggle{padding:16px 0}
  .course-title{font-size:15px}.course-heading-copy small{font-size:11.5px}.course-disclosure-panel>div{padding-left:12px}
  .checklist-section .course-section-panel>div{padding-left:12px}
  .checklist-section .course-section-header{flex-wrap:wrap;gap:0}
  .checklist-section>.course-section-header>.course-section-toggle{flex-basis:100%}
  .exam-readiness-bar.is-section{width:100%;margin:0 0 10px 23px}
  .checklist-section-practice{margin:0 0 12px 23px}
  .course-section-panel>div{padding-left:12px}.course-section-header{flex-wrap:wrap;gap:0}.course-section-header>.course-section-toggle{flex-basis:100%}.exam-readiness-link{margin:-4px 0 14px 23px}.exam-row{align-items:stretch}.exam-row .right{display:none}.exam-row .primary{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .course-disclosure,.course-disclosure-panel,.course-section-panel,.disclosure-chevron,.course-study-row,.course-study-arrow,.exam-readiness-bar i,.exam-readiness-label::after{transition:none!important}
}
/* ---- lecture objectives: recommendation + contextual disclosures ---- */
.objective-recommendation{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:0 0 18px;padding:20px 22px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));border-radius:12px;background:linear-gradient(105deg,color-mix(in srgb,var(--accent) 11%,var(--surface)),var(--surface) 72%);box-shadow:0 8px 24px rgba(var(--elev-tint),.08)}
.objective-recommendation>div{display:grid;gap:4px;min-width:0}.objective-recommendation h2{margin:0;font-size:18px}.objective-recommendation p{margin:0;color:var(--dim);font-size:13.5px}.objective-recommendation small{color:var(--dim);font-size:12px;font-weight:650}.objective-recommendation .primary{flex:0 0 auto;min-width:150px}.objective-recommendation-complete{border-color:var(--line);background:color-mix(in srgb,var(--good) 5%,var(--surface));box-shadow:none}
.objective-list{border-top:1px solid var(--line)}.objective-disclosure{border-bottom:1px solid var(--line);transition:background-color var(--theme-paint-duration,.2s) ease,border-color var(--theme-paint-duration,.2s) ease}.objective-disclosure.is-open{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent 76%);border-bottom-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
.objective-disclosure-toggle{display:flex;align-items:center;gap:14px;width:100%;min-width:0;padding:16px 8px;border:0;background:transparent;color:var(--text);cursor:pointer;text-align:left}.objective-disclosure-toggle:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}.objective-disclosure-toggle:hover .disclosure-chevron{border-color:var(--accent)}.objective-disclosure.is-open>.objective-disclosure-toggle .disclosure-chevron{transform:rotate(45deg)}
.objective-heading-copy{display:grid;gap:5px;min-width:0}.objective-heading-copy>b{font-size:14.5px;line-height:1.4}.objective-heading-copy small{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:var(--dim);font-size:12px}.objective-heading-copy .badge{text-transform:none}
.objective-disclosure-panel{display:grid;grid-template-rows:minmax(0,0fr);overflow:hidden;opacity:.25;transition:grid-template-rows .22s cubic-bezier(.2,.75,.25,1),opacity .16s ease}.objective-disclosure.is-open>.objective-disclosure-panel{grid-template-rows:minmax(0,1fr);opacity:1}.objective-disclosure-panel>div{min-height:0;overflow:hidden}.objective-detail-content{margin:0 8px 16px 31px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:10px;background:var(--panel2)}
.objective-detail-summary{display:flex;align-items:baseline;gap:10px;margin-bottom:15px}.objective-detail-summary span{color:var(--dim);font-size:12.5px}.objective-detail-content h3{margin:0 0 7px;font-size:12px}.objective-knowledge-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.objective-knowledge-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:10px 2px;border-bottom:1px solid var(--line);line-height:1.42}.objective-knowledge-meta{display:flex;align-items:center;justify-content:flex-end;gap:10px}.objective-knowledge-meta small{min-width:72px;color:var(--dim);font-size:11.5px;text-align:right}
.objective-detail-action{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px}.objective-detail-action>div{display:grid;gap:3px}.objective-detail-action small{max-width:650px;color:var(--dim);font-size:12px;line-height:1.45}.objective-detail-action button{flex:0 0 auto}.objective-detail-loading,.objective-detail-error{display:flex;align-items:center;gap:11px;min-height:72px;color:var(--dim)}.objective-detail-spinner{width:18px;height:18px;border:2px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;animation:route-spin .7s linear infinite}.objective-detail-error{justify-content:space-between;color:var(--bad)}.objective-detail-error>div{display:grid;gap:2px}.objective-detail-error small{color:var(--dim)}.objective-unavailable{display:flex;justify-content:space-between;gap:18px;padding:16px 8px;border-bottom:1px solid var(--line)}
@media(max-width:640px){
  .objective-recommendation{align-items:stretch;flex-direction:column;gap:15px;padding:17px}.objective-recommendation .primary{width:100%}
  .objective-disclosure-toggle{align-items:flex-start;padding:15px 2px}.objective-heading-copy>b{font-size:14px}.objective-heading-copy small{align-items:flex-start;display:grid;gap:5px}
  .objective-detail-content{margin:0 0 13px 0;padding:14px}.objective-detail-summary{display:grid;gap:1px}.objective-knowledge-row{grid-template-columns:1fr;gap:7px}.objective-knowledge-meta{justify-content:flex-start}.objective-knowledge-meta small{text-align:left}.objective-detail-action{align-items:stretch;flex-direction:column;gap:13px}.objective-detail-action button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .objective-disclosure,.objective-disclosure-panel,.objective-disclosure-toggle,.objective-detail-spinner{transition:none!important;animation:none!important}
}
.checklist-sub{margin:16px 0 6px;font-size:14px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.checklist-item{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;
  padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer;line-height:1.45}
.checklist-item:last-child{border-bottom:0}
.checklist-item input[type=checkbox]{width:18px;height:18px;margin-top:2px;accent-color:var(--accent);cursor:pointer}
.checklist-item.done>span{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.checklist-card p.muted{font-size:12px}
.pdf-viewer{display:block;margin-top:6px;background:var(--panel2)}

/* ---- exam readiness workspace ---- */
.rdy-summary{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 2px}
.rdy-count{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.rdot{display:inline-block;width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.15)}
.rdot-green{background:var(--good)}
.rdot-yellow{background:var(--warn)}
.rdot-red{background:var(--bad)}
.rdot-gray{background:var(--line-strong)}
/* checklist sections reuse the courses navigator's disclosure language:
   restrained chevron, hierarchy through indentation, summary still legible
   while the contents are hidden. */
.checklist-toolbar{display:flex;gap:18px;align-items:center;margin:18px 2px 0}
.checklist-section .course-section-toggle b{font-size:15px;text-transform:none;letter-spacing:0;color:var(--text)}
.checklist-section .course-section-toggle small{margin-top:3px}
.checklist-section .course-section-header{gap:14px}
.exam-readiness-bar.is-section{flex:0 0 auto;width:84px;height:6px}
.checklist-section .checklist-section-practice{flex:0 0 auto;font-size:12.5px;font-weight:640;text-decoration:none}
.checklist-section .checklist-section-practice:hover{text-decoration:underline}
.checklist-section .course-section-panel>div{padding:2px 0 12px 25px}
.checklist-empty{margin:10px 0;font-size:13px}
/* filter chips: the readiness tally IS the filter, so the page states each
   count once and lets it be acted on. */
.checklist-filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 2px}
.checklist-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--dim);font:inherit;font-size:12.5px;
  font-weight:620;cursor:pointer;transition:border-color .14s ease,color .14s ease,background-color .14s ease}
.checklist-chip:hover{color:var(--text);border-color:var(--line-strong)}
.checklist-chip.is-active{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.checklist-chip-count{font-variant-numeric:tabular-nums;color:var(--dim)}
.checklist-chip.is-active .checklist-chip-count{color:var(--accent)}
.checklist-chip.is-secondary{border-style:dashed}
/* objective rows: status dot, the professor's sentence, and nothing else
   until the row is opened. */
.rdy-item{border-bottom:1px solid var(--line);line-height:1.45}
.rdy-item:last-child{border-bottom:0}
.rdy-row-toggle{display:flex;align-items:flex-start;gap:11px;width:100%;padding:11px 4px 11px 0;
  border:0;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.rdy-row-toggle:hover{color:var(--accent)}
.rdy-row-toggle:hover .disclosure-chevron{border-color:var(--accent)}
.rdy-row-text{flex:1;min-width:0}
.rdy-item .rdot{margin-top:5px;width:12px;height:12px}
.rdy-row-toggle .disclosure-chevron{margin-top:6px}
.rdy-item.is-open>.rdy-row-toggle .disclosure-chevron{transform:rotate(45deg)}
.rdy-reviewed-mark{flex:0 0 auto;margin-top:1px;color:var(--good);font-size:13px;font-weight:700}
.rdy-item.is-reviewed .rdy-row-text{color:var(--dim)}
.rdy-row-panel{padding:0 4px 12px 23px}
.rdy-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:2px}
.rdy-meta .ghost{padding:5px 12px;font-size:12.5px}
.rdy-reviewed{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--dim);cursor:pointer}
.rdy-reviewed input{width:15px;height:15px;accent-color:var(--accent)}
.linklike{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:13px;
  cursor:pointer;text-decoration:underline}
.linklike:hover{color:var(--accent-strong)}
.rdy-why{margin-top:8px}
.rdy-whybox{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.rdy-whybox table{width:100%}
.rdy-whybox td,.rdy-whybox th{padding:5px 6px;vertical-align:top}
.rdy-flash{animation:rdyflash 1.6s ease-out}
@keyframes rdyflash{0%{background:var(--accent-soft)}100%{background:transparent}}
/* reference cards (equation sheets, classification tables, usage notes) */
.rdy-reflist{margin:4px 0 0;padding-left:20px}
.rdy-reflist li{margin:5px 0;line-height:1.5}
.checklist-reference-block{padding:14px 0;border-top:1px solid var(--line)}
.checklist-reference-block:first-child{border-top:0;padding-top:4px}
.checklist-reference-block h3{font-size:14.5px}
.rdy-ref-warn h3{color:var(--warn)}
.rdy-ref-warn .rdy-reflist li{color:var(--fg)}

/* ---- review of previously answered quiz questions ---- */
.review-opts button{cursor:default;opacity:1}
.review-opts button:hover{border-color:var(--line)}
.review-opts button.correct:hover{border-color:var(--good)}
.review-opts button.wrong:hover{border-color:var(--bad)}
.review-tag{float:right;margin-left:12px;font-size:11px;font-weight:750;color:var(--dim)}

/* ---- Structured Recall ---- */
.sr-gate{text-align:center;padding:18px 8px}
.sr-gate-note{margin:0 0 6px;color:var(--dim);font-size:14px}
.sr-count{margin:0 0 14px;font-size:13px;color:var(--dim)}
.sr-matrix-wrap{overflow-x:auto;margin-top:10px}
.sr-matrix{width:100%;border-collapse:collapse;font-size:14px}
.sr-matrix th,.sr-matrix td{border:1px solid var(--line);padding:8px 10px;text-align:center}
.sr-matrix thead th{background:var(--panel2);font-size:12px;letter-spacing:.02em}
.sr-matrix tbody th{text-align:left;font-weight:500;line-height:1.4;max-width:340px}
.sr-cell{display:flex;align-items:center;justify-content:center;cursor:pointer;min-height:30px;margin:0}
.sr-cell input{width:18px;height:18px;accent-color:var(--accent);cursor:pointer}
.sr-progress{text-align:center;font-size:12px;margin:10px 0}
.sr-progress.sr-need{color:var(--bad);font-weight:700}
.sr-feedback{margin:10px 0;text-align:left}
.sr-score{margin:0 0 8px}
.sr-atoms{width:100%;border-collapse:collapse;font-size:13px}
.sr-atoms td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.sr-atoms td:first-child{width:22px;font-weight:800}
.sr-atoms tr.sr-ok td:first-child{color:var(--good)}
.sr-atoms tr.sr-miss td:first-child{color:var(--bad)}
.sr-atoms tr.sr-miss{background:color-mix(in srgb,var(--bad) 7%,transparent)}
/* a false statement correctly left out is neutral — never a green "you had this" */
.sr-atoms tr.sr-neutral td{color:var(--dim)}
.sr-atoms tr.sr-neutral td:first-child{color:var(--line-strong)}
.sr-atoms tr.sr-neutral td:nth-child(2){text-decoration:line-through;
  text-decoration-color:var(--line-strong)}
.sr-note{font-size:12px;margin:8px 0 0}
/* select-all options marked by their own truth, not the overall verdict */
.opts button.missed{border-color:var(--warn);border-style:dashed;
  background:color-mix(in srgb,var(--warn) 14%,transparent)}
.opts button.missed:after{content:"Missed";float:right;margin-left:12px;
  font-size:11px;font-weight:750;color:var(--warn)}
.opts button.left-out{opacity:.62}

/* ---- calculation questions: instruction, equation, given, find ---- */
.calc-panel{max-width:920px;margin:0 auto;text-align:left}
.calc-eyebrow{margin:0 0 4px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);font-weight:750}
.calc-prompt{margin:0 0 20px;font-size:21px;font-weight:650;line-height:1.35}
.calc-equation{display:flex;align-items:center;justify-content:center;gap:12px;
  padding:20px 16px;margin:0 0 22px;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;overflow-x:auto;
  font-size:23px;line-height:1.3}
.calc-lhs{font-weight:650}
.calc-eq{color:var(--dim)}
.calc-expr{white-space:nowrap}
.calc-frac{display:inline-flex;flex-direction:column;align-items:center;
  vertical-align:middle;white-space:nowrap}
.calc-frac .calc-num{padding:0 10px 4px}
.calc-frac .calc-den{padding:4px 10px 0;border-top:2px solid currentColor}
.calc-columns{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:26px;align-items:start}
.calc-label{margin:0 0 8px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);font-weight:750}
.calc-givens{margin:0;display:grid;gap:2px}
.calc-given{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:14px;
  align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line)}
.calc-given:last-child{border-bottom:0}
.calc-given dt,.calc-given dd{margin:0}
.calc-symbol{font-size:18px;font-weight:650}
.calc-desc{display:block;font-size:12px;color:var(--dim);font-weight:400}
.calc-value{font-size:18px;font-variant-numeric:tabular-nums}
.calc-unit{font-size:14px;color:var(--dim)}
.calc-find p{margin:0;padding:10px 12px;background:var(--accent-soft);
  border-radius:8px}
.calc-find .calc-unit{display:block;margin-top:2px}
@media (max-width:760px){
  .calc-columns{grid-template-columns:1fr;gap:18px}
  .calc-equation{font-size:19px;justify-content:flex-start}
  .calc-prompt{font-size:18px}
}

/* ---- owner-only practice exam remediation ---- */
.practice-review-entry{background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:12px;padding:10px}
.practice-review-entry small{display:block;color:var(--muted);margin-top:3px}
.pre-exam-entry{background:color-mix(in srgb,#7653d6 8%,transparent);border-radius:12px;padding:10px}
.pre-exam-entry small{display:block;color:var(--muted);margin-top:3px}
.practice-review-hero{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;margin:14px 0 18px;padding:28px;border-radius:22px;background:linear-gradient(135deg,#102b2b,#16423d 55%,#255f50);color:#f4fffb;box-shadow:0 18px 46px rgba(12,42,38,.2)}
.practice-review-hero h1{font-size:clamp(26px,4vw,42px);line-height:1.05;margin:10px 0 8px;max-width:760px}
.practice-review-hero p{color:#cde4dc;margin:0;max-width:720px}
.practice-review-private{display:inline-flex;border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.practice-review-score{min-width:150px;text-align:right}
.practice-review-score strong{display:block;font-size:38px;line-height:1}
.practice-review-score span{display:block;color:#cde4dc;font-size:12px;margin-top:6px}
.practice-review-audit{display:flex;gap:24px;align-items:center;justify-content:space-between}
.practice-review-audit>div:first-child{max-width:680px}
.practice-review-audit strong,.practice-review-audit span{display:block}
.practice-review-audit>div:first-child span{color:var(--muted);margin-top:5px;line-height:1.45}
.practice-review-audit-stats{display:flex;gap:18px;text-align:center}
.practice-review-audit-stats span{font-size:12px;color:var(--muted)}
.practice-review-audit-stats b{display:block;color:var(--text);font-size:22px}
.practice-review-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start;margin-top:18px}
.practice-review-nav{position:sticky;top:82px;padding:8px;max-height:calc(100vh - 100px);overflow:auto}
.practice-review-nav-item{display:block;width:100%;border:0;background:transparent;color:var(--text);text-align:left;border-radius:10px;padding:10px;cursor:pointer}
.practice-review-nav-item+ .practice-review-nav-item{margin-top:3px}
.practice-review-nav-item span,.practice-review-nav-item small{display:block}
.practice-review-nav-item span{font-weight:800}
.practice-review-nav-item small{color:var(--muted);line-height:1.25;margin-top:3px}
.practice-review-nav-item:hover{background:var(--soft)}
.practice-review-nav-item.active{background:color-mix(in srgb,var(--accent) 14%,var(--card));box-shadow:inset 3px 0 0 var(--accent)}
.practice-review-content{min-width:0}
.practice-review-lesson>.card{margin-bottom:18px}
.practice-review-question{border-top:4px solid var(--accent)}
.practice-review-number,.practice-review-example{display:inline-flex;align-items:center;border-radius:999px;background:var(--accent);color:white;font-size:12px;font-weight:800;padding:5px 10px}
.practice-review-question h2{margin-bottom:8px}
.practice-review-prompt{font-size:18px;line-height:1.55;font-weight:650}
.practice-review-choices{display:grid;gap:7px;padding-left:30px}
.practice-review-choices li{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--soft)}
.practice-review-answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.practice-review-answer-grid>div{padding:13px;border:1px solid var(--line);border-radius:11px}
.practice-review-answer-grid span,.practice-review-answer-grid strong{display:block}
.practice-review-answer-grid span{color:var(--muted);font-size:12px;margin-bottom:4px}
.practice-review-wrong{color:var(--bad)}
.practice-review-correct{color:var(--good)}
.practice-review-kicker{margin:0 0 5px;color:var(--accent);font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.practice-review-steps{list-style:none;padding:0;margin:18px 0;display:grid;gap:11px}
.practice-review-steps li{display:grid;grid-template-columns:30px 1fr;gap:11px;align-items:start}
.practice-review-steps li>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--accent) 14%,var(--card));color:var(--accent);font-weight:850}
.practice-review-steps p{margin:2px 0;line-height:1.55}
.practice-review-callouts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.practice-review-callouts>div{padding:14px;border-radius:11px;border:1px solid var(--line)}
.practice-review-callouts p{margin:5px 0 0;line-height:1.45}
.practice-review-trap{background:color-mix(in srgb,var(--warn) 9%,var(--card))}
.practice-review-note{background:color-mix(in srgb,var(--accent) 9%,var(--card))}
.practice-review-practice-list{display:grid;gap:16px;margin-top:16px}
.practice-review-practice{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--soft)}
.practice-review-practice h3{font-size:17px;line-height:1.45;margin:12px 0}
.practice-review-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.practice-review-option{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:11px;background:var(--card);cursor:pointer}
.practice-review-option:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
.practice-review-option input{margin-top:3px}
.practice-review-actions{margin-top:13px}
.practice-review-hints{margin:12px 0 0;padding:13px 13px 13px 32px;border-radius:10px;background:color-mix(in srgb,var(--warn) 9%,var(--card))}
.practice-review-hints li+li{margin-top:7px}
.practice-review-feedback{margin-top:12px;border-radius:10px;padding:13px}
.practice-review-feedback p{margin:5px 0 0}
.practice-review-feedback.correct{background:color-mix(in srgb,var(--good) 12%,var(--card));border:1px solid color-mix(in srgb,var(--good) 40%,var(--line))}
.practice-review-feedback.incorrect{background:color-mix(in srgb,var(--bad) 9%,var(--card));border:1px solid color-mix(in srgb,var(--bad) 35%,var(--line))}
.practice-review-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 34px}
.practice-review-pager span{color:var(--muted);font-size:12px}
@media(max-width:820px){
  .practice-review-hero{align-items:flex-start;flex-direction:column;padding:21px}
  .practice-review-score{text-align:left}
  .practice-review-audit{align-items:flex-start;flex-direction:column}
  .practice-review-audit-stats{width:100%;justify-content:space-between}
  .practice-review-layout{grid-template-columns:1fr}
  .practice-review-nav{position:static;display:flex;gap:5px;overflow-x:auto;max-height:none}
  .practice-review-nav-item{min-width:145px}
  .practice-review-callouts,.practice-review-options{grid-template-columns:1fr}
}
@media(max-width:520px){
  .practice-review-answer-grid{grid-template-columns:1fr}
  .practice-review-audit-stats{flex-wrap:wrap;text-align:left}
  .practice-review-pager{align-items:stretch;flex-direction:column}
  .practice-review-pager span{text-align:center;order:-1}
}

/* ---- owner-only PHAR 510 exam simulation ---- */
.pre-exam-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:14px 0 18px;padding:30px;border-radius:22px;background:linear-gradient(135deg,#201747,#3c2875 58%,#6649b7);color:#fff;box-shadow:0 18px 46px rgba(34,22,76,.22)}
.pre-exam-hero h1{font-size:clamp(32px,5vw,52px);line-height:1;margin:8px 0 10px}
.pre-exam-hero p{max-width:760px;color:#ded5fb;margin:0}
.pre-exam-eyebrow{text-transform:uppercase;letter-spacing:.1em;font-weight:800;font-size:12px;margin-top:14px!important}
.pre-exam-hero-count{text-align:right;min-width:130px}
.pre-exam-hero-count strong,.pre-exam-hero-count span{display:block}
.pre-exam-hero-count strong{font-size:50px;line-height:1}
.pre-exam-hero-count span{color:#ded5fb}
.pre-exam-intro-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:18px}
.pre-exam-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}
.pre-exam-rules>div{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--soft)}
.pre-exam-rules b,.pre-exam-rules span{display:block}
.pre-exam-rules span{color:var(--muted);font-size:12px;margin-top:4px}
.pre-exam-start{font-size:16px;padding:12px 22px}
.pre-exam-blueprint h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 0 7px}
.pre-exam-blueprint ul,.pre-exam-domain-results ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.pre-exam-blueprint li,.pre-exam-domain-results li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.pre-exam-shell{margin-top:14px}
.pre-exam-toolbar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;background:#201747;color:white;position:sticky;top:68px;z-index:5;box-shadow:0 8px 20px rgba(23,17,49,.15)}
.pre-exam-toolbar>div{min-width:92px}
.pre-exam-toolbar span,.pre-exam-toolbar strong{display:block}
.pre-exam-toolbar span{font-size:11px;color:#cfc5ee;text-transform:uppercase;letter-spacing:.05em}
.pre-exam-toolbar strong{font-size:17px}
.pre-exam-toolbar button{margin-left:auto;color:white;border-color:rgba(255,255,255,.28)}
.pre-exam-toolbar button.on{background:#f6c85f;color:#241b12;border-color:#f6c85f}
.pre-exam-body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:start;margin-top:18px}
.pre-exam-navigator{position:sticky;top:145px}
.pre-exam-navigator h2,.pre-exam-review-nav h2{font-size:15px;margin-top:0}
.pre-exam-navigator>div,.pre-exam-review-nav>div{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.pre-exam-navigator>div button,.pre-exam-review-nav>div button{position:relative;min-height:34px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--text);font-weight:750;cursor:pointer}
.pre-exam-navigator>div button.answered{background:color-mix(in srgb,var(--accent) 14%,var(--card));border-color:var(--accent)}
.pre-exam-navigator>div button.flagged:after{content:"";position:absolute;right:3px;top:3px;width:6px;height:6px;border-radius:50%;background:#e7a72f}
.pre-exam-navigator>div button.current,.pre-exam-review-nav>div button.current{box-shadow:0 0 0 2px var(--accent)}
.pre-exam-navigator>p{font-size:11px;color:var(--muted);line-height:2;margin:11px 0}
.pre-exam-key{display:inline-block!important;width:9px;height:9px;border-radius:3px;margin-left:5px}
.pre-exam-key.answered{background:color-mix(in srgb,var(--accent) 35%,var(--card))}
.pre-exam-key.flagged{background:#e7a72f}
.pre-exam-navigator>button{width:100%}
.pre-exam-question{min-height:520px;border-top:4px solid #6649b7}
.pre-exam-domain{margin:24px 0 6px;color:#6649b7;font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.pre-exam-question h1{font-size:clamp(21px,3vw,30px);line-height:1.35;max-width:900px}
.pre-exam-select-note{font-weight:800;color:var(--warn)}
.pre-exam-options{display:grid;gap:9px;margin:22px 0}
.pre-exam-option{display:grid;grid-template-columns:22px 31px 1fr;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:13px;background:var(--soft);cursor:pointer}
.pre-exam-option:hover{border-color:color-mix(in srgb,#6649b7 55%,var(--line))}
.pre-exam-option:has(input:checked){border-color:#6649b7;background:color-mix(in srgb,#6649b7 8%,var(--card));box-shadow:0 0 0 2px color-mix(in srgb,#6649b7 18%,transparent)}
.pre-exam-letter{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--card);border:1px solid var(--line);font-weight:850}
.pre-exam-question-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}
.pre-exam-submit{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;border:2px solid #6649b7}
.pre-exam-submit h2,.pre-exam-submit p{margin:4px 0}
.pre-exam-results-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px 0 18px;padding:25px 28px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.pre-exam-results-hero h1{font-size:42px;margin:5px 0}
.pre-exam-result-mark{display:grid;place-items:center;width:108px;height:108px;border-radius:50%;font-size:26px;font-weight:900}
.pre-exam-result-mark.strong{background:color-mix(in srgb,var(--good) 17%,var(--card));color:var(--good)}
.pre-exam-result-mark.developing{background:color-mix(in srgb,var(--warn) 16%,var(--card));color:var(--warn)}
.pre-exam-result-mark.repair{background:color-mix(in srgb,var(--bad) 13%,var(--card));color:var(--bad)}
.pre-exam-results-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;margin-bottom:18px}
.pre-exam-domain-results .row{margin-top:14px}
.pre-exam-review-nav>div{grid-template-columns:repeat(10,1fr)}
.pre-exam-review-nav>div button.correct{background:color-mix(in srgb,var(--good) 15%,var(--card));border-color:color-mix(in srgb,var(--good) 50%,var(--line))}
.pre-exam-review-nav>div button.incorrect{background:color-mix(in srgb,var(--bad) 12%,var(--card));border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
.pre-exam-rationale{border-top:4px solid var(--line)}
.pre-exam-rationale.correct{border-top-color:var(--good)}
.pre-exam-rationale.incorrect{border-top-color:var(--bad)}
.pre-exam-rationale h2{font-size:22px;line-height:1.4;margin-top:22px}
.pre-exam-explanation{margin-top:14px;padding:15px;border-radius:11px;background:var(--soft)}
.pre-exam-explanation p{margin:5px 0 0;line-height:1.55}
@media(max-width:850px){
  .pre-exam-intro-grid,.pre-exam-body,.pre-exam-results-grid{grid-template-columns:1fr}
  .pre-exam-navigator{position:static;order:2}
  .pre-exam-question{order:1;min-height:auto}
  .pre-exam-toolbar{top:62px;overflow-x:auto}
  .pre-exam-toolbar>div{min-width:78px}
  .pre-exam-navigator>div{grid-template-columns:repeat(10,1fr)}
}
@media(max-width:560px){
  .pre-exam-hero{align-items:flex-start;flex-direction:column;padding:21px}
  .pre-exam-hero-count{text-align:left}
  .pre-exam-rules{grid-template-columns:1fr}
  .pre-exam-toolbar{gap:14px}
  .pre-exam-toolbar>div:nth-child(2){display:none}
  .pre-exam-toolbar button{min-width:105px}
  .pre-exam-option{grid-template-columns:20px 28px 1fr;padding:11px}
  .pre-exam-submit{align-items:stretch;flex-direction:column}
  .pre-exam-submit .row{justify-content:flex-end}
  .pre-exam-results-hero{align-items:flex-start}
  .pre-exam-result-mark{width:80px;height:80px;font-size:20px}
  .pre-exam-results-hero h1{font-size:30px}
  .pre-exam-review-nav>div{grid-template-columns:repeat(5,1fr)}
}

/* ---- owner usage analytics ---- */
.usage-table-wrap{overflow:auto;margin-top:10px}
.usage-table{width:100%;border-collapse:collapse;font-size:13px}
.usage-table th{text-align:left;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--dim);padding:6px 10px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--workspace)}
.usage-table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.usage-num{text-align:right;font-variant-numeric:tabular-nums}
.usage-row{cursor:pointer}
.usage-row:hover{background:var(--panel2)}
.usage-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.usage-spark{display:inline-flex;gap:2px;align-items:flex-end;height:20px}
.usage-spark i{width:5px;height:100%;border-radius:2px;background:var(--line);display:block}
.usage-spark i.lv0{background:var(--line);opacity:.45}
.usage-spark i.lv1{background:color-mix(in srgb,var(--accent) 35%,transparent)}
.usage-spark i.lv2{background:color-mix(in srgb,var(--accent) 55%,transparent)}
.usage-spark i.lv3{background:color-mix(in srgb,var(--accent) 75%,transparent)}
.usage-spark i.lv4{background:var(--accent)}
.usage-spark-large .usage-spark{height:34px}
.usage-spark-large .usage-spark i{width:9px}
.grid.two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:820px){.grid.two-column{grid-template-columns:1fr}
  .usage-table{font-size:12px}.usage-table td,.usage-table th{padding:6px}}
@media (max-width:720px){.sr-matrix{font-size:12.5px}.sr-matrix th,.sr-matrix td{padding:6px}}
.sr-weak{margin-top:10px;padding:10px 12px;border-left:3px solid var(--bad);background:color-mix(in srgb,var(--bad) 6%,transparent);border-radius:0 6px 6px 0}
.sr-weak-title{margin:0 0 6px;font-weight:700;font-size:13px}
.sr-weak ul{margin:0;padding-left:18px;font-size:13px;line-height:1.5}

/* ---- Therapeutic Dispatch ---- */
.dispatch-anchor{text-align:center;font-size:19px;padding:10px 0 14px}
.dispatch-anchor .muted{font-size:13px;display:block;margin-top:2px}
.dispatch-bays button{position:relative}
.dispatch-bays button.sel{border-color:var(--accent);background:var(--accent-soft);
  box-shadow:inset 4px 0 0 var(--accent)}
.dispatch-bays button.correct,.dispatch-cell.correct{border-color:var(--good);
  background:color-mix(in srgb,var(--good) 16%,transparent)}
.dispatch-bays button.wrong,.dispatch-cell.wrong{border-color:var(--bad);
  background:color-mix(in srgb,var(--bad) 16%,transparent)}
.dispatch-bays button.missed,.dispatch-cell.missed{border-color:var(--warn);
  background:color-mix(in srgb,var(--warn) 18%,transparent);
  border-style:dashed}
.dispatch-grid th[scope=row]{max-width:230px}
.dispatch-class{display:block;font-size:11px;font-weight:400}
.dispatch-cell{width:100%;min-height:34px;border:1px solid var(--line);border-radius:6px;
  background:var(--panel2);cursor:pointer}
.dispatch-cell:hover{border-color:var(--accent)}
.dispatch-cell.sel{border-color:var(--accent);background:var(--accent-soft)}
.dispatch-cell.sel:after{content:"✓";color:var(--accent);font-weight:800}
.dispatch-cell.correct:after{content:"✓";color:var(--good);font-weight:800}
.dispatch-cell.wrong:after{content:"✗";color:var(--bad);font-weight:800}
.dispatch-cell.missed:after{content:"·";color:var(--warn);font-weight:800}
.bounce{animation:dispatchBounce .55s ease}
@keyframes dispatchBounce{0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.dispatch-explain{margin:10px 0;padding:10px 12px;border-left:3px solid var(--accent);
  background:var(--panel2);border-radius:0 6px 6px 0;text-align:left}
.dispatch-explain p{margin:4px 0;font-size:13px}
@media(max-width:760px){.calendar-heading-actions{flex-wrap:wrap;justify-content:flex-start;gap:8px}.calendar-view-toggle{width:100%;order:5}.calendar-organizer-grid{grid-template-columns:1fr}.organizer-list{max-height:32vh}.calendar-import-preview{width:100%;height:100dvh;max-height:100dvh;border-radius:0}.import-event-choice{grid-template-columns:auto minmax(0,1fr)}.import-event-choice em{grid-column:2}.import-new-course{grid-template-columns:1fr}}

/* guided course lesson */
.lesson-steps{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.lesson-step{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;
  background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.lesson-step.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.lesson-step.done{color:var(--good)}
.lesson-step.done::before{content:"✓ "}
.lesson-answer{margin-top:10px;padding:12px 14px;border-left:4px solid var(--accent);
  background:var(--panel2);border-radius:0 6px 6px 0;text-align:left}
.lesson-your-answer{margin-top:10px;padding:10px 12px;border:1px dashed var(--line);
  border-radius:6px;background:var(--panel2);white-space:pre-wrap;text-align:left}
.lesson-scenario{margin-top:8px;padding:12px 14px;border-left:4px solid var(--warn);
  background:var(--panel2);border-radius:0 6px 6px 0;text-align:left}
.lesson-elements{display:block}
.lesson-element{display:flex;gap:8px;align-items:flex-start;text-align:left;
  padding:9px 11px;margin:6px 0;border:1px solid var(--line);border-radius:8px;
  background:var(--panel2);cursor:pointer;font-size:13.5px}
.lesson-element:hover{border-color:var(--accent)}
.lesson-element input{margin-top:3px;flex:0 0 auto}

.lesson-confidence{display:flex;gap:8px;margin-top:12px}
.lesson-confidence button{flex:1;font-size:18px;font-weight:600;padding:14px 0}
/* A step whose request is in flight says so. Silence after a click is what a
   broken button looks like. */
.lesson-step-error{margin-top:14px}
[data-lesson-busy]{position:relative}
[data-lesson-busy] button{cursor:progress}
[data-lesson-busy]::after{content:"Saving…";position:absolute;top:10px;right:14px;
  font-size:11.5px;font-weight:600;color:var(--muted)}

/* ---- shared assessment kernel: builder, sparse runner, and results ---- */
.assess-launch-head,.assess-builder-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:30px 0 22px}.assess-launch-head h1,.assess-builder-head h1,.assess-confirm h1{margin:4px 0 7px;font-size:clamp(28px,4vw,42px);line-height:1.08}.assess-launch-head p,.assess-builder-head p{margin:0;color:var(--muted);max-width:650px}.assess-head-actions{display:flex;align-items:center;gap:16px;flex:none}.assess-head-actions a,.text-action{border:0;background:transparent;color:var(--accent);font:inherit;font-weight:650;padding:8px 2px;cursor:pointer;text-decoration:none}.assess-head-actions a:hover,.text-action:hover{text-decoration:underline}
.assess-scope-bar{display:grid;grid-template-columns:180px minmax(260px,1fr);align-items:center;gap:20px;padding:18px 22px;margin-bottom:22px;background:var(--panel2)}.assess-scope-bar>span{font-size:11.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}.assess-scope-bar select{max-width:560px;font-weight:650}.assess-scope-bar div{display:flex;flex-direction:column;gap:3px}.assess-scope-bar small{color:var(--muted)}
.assess-launch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}.assess-launch-card{display:flex;flex-direction:column;min-height:290px;padding:22px;text-align:left}.assess-launch-card.featured{grid-column:1/-1;border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}.assess-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.assess-card-heading h3{margin:4px 0 0;font-size:20px}
.assess-contract-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 14px}.assess-contract-grid .wide{grid-column:1/-1}.assess-contract-grid dt,.assess-builder-summary dt,.assess-confirm-grid dt{font-size:10.5px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}.assess-contract-grid dd,.assess-builder-summary dd,.assess-confirm-grid dd{margin:4px 0 0;font-weight:700}.assess-contract-grid small,.assess-confirm-grid small{display:block;margin-top:3px;color:var(--muted);font-weight:450}.assess-card-description{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 18px}.assess-card-actions{display:flex;align-items:center;gap:18px;margin-top:auto}.assess-custom-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:26px 0;padding:22px 4px;border-top:1px solid var(--line)}.assess-custom-foot p{margin:4px 0 0;color:var(--muted)}
.assess-builder-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:20px}.assess-builder-main{display:grid;gap:16px}.assess-builder-section{padding:22px}.assess-builder-section>header{display:flex;gap:13px;align-items:flex-start;margin-bottom:20px}.assess-builder-section>header>span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:999px;background:var(--accent);color:white;font-weight:750}.assess-builder-section header h2{font-size:18px;margin:2px 0 3px}.assess-builder-section header p{font-size:13px;margin:0;color:var(--muted)}.assess-builder-section .setuprow{margin:13px 0}.assess-advanced{margin:14px 0}.assess-advanced>summary{cursor:pointer;font-weight:650;color:var(--accent);padding:8px 0}.assess-advanced[open]>summary{margin-bottom:8px}.assess-builder-note,.assess-contract-copy{font-size:12.5px;color:var(--muted);margin:14px 0 0}.assess-time-control{display:flex;align-items:center;gap:9px}.assess-time-control input{max-width:110px}.assess-time-control span{color:var(--muted)}
.assess-builder-summary{position:sticky;top:94px;padding:22px}.assess-builder-summary h2{font-size:20px;margin:6px 0 18px}.assess-builder-summary dl{display:grid;gap:14px;margin:0 0 20px}.assess-builder-summary dd{font-size:14px}.assess-builder-summary .primary{width:100%}.assess-builder-summary>p{font-size:11.5px;color:var(--muted);line-height:1.4;margin:10px 0 0}
.assess-confirm{max-width:850px;margin:34px auto;text-align:left}.assess-confirm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0;overflow:hidden}.assess-confirm-grid>div{min-height:110px;padding:20px 22px;border-bottom:1px solid var(--line)}.assess-confirm-grid>div:nth-child(odd){border-right:1px solid var(--line)}.assess-confirm-grid>div:nth-last-child(-n+2){border-bottom:0}.assess-confirm-grid dd{font-size:17px}.assess-scope-assurance,.assess-clock-note{color:var(--muted);font-size:13px}.assess-rules{margin:16px 0}.assess-rules summary{cursor:pointer;color:var(--accent);font-weight:650}.assess-rules ul{margin:10px 0 0;padding-left:22px;color:var(--muted)}
.assess-builder{display:flex;flex-direction:column;gap:14px;text-align:left}
.assess-fieldset{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0}
.assess-fieldset legend{font-weight:600;font-size:13.5px;padding:0 6px}
.assess-checks{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.assess-check{display:flex;gap:8px;align-items:flex-start;font-size:13.5px}
.assess-weight{align-items:center}
.assess-weight input{max-width:96px}
.assess-untimed{display:flex;gap:8px;align-items:center;font-size:13.5px}
.assess-kind h3{margin:0 0 6px}
.assess-attempt-row{display:flex;gap:14px;align-items:center;justify-content:space-between}
.assess-attempt-list,.assess-open-list{display:grid;gap:10px}

/* A locked Exam stays sparse. A reviewable Test receives a compact map and
   flags, but correctness remains unavailable until submission. */
.assess-runner-head{display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin:0 0 18px}
.assess-progress{font-weight:600}
.assess-clock{font-variant-numeric:tabular-nums;font-weight:700;color:var(--dim)}
.assess-clock.urgent{color:var(--bad)}
.assess-question{max-width:720px;margin:0 auto;text-align:left}
.assess-answer{margin:20px 0 10px}
.assess-actions{justify-content:flex-start}
.assess-consequence{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.assess-abandon{justify-content:center;margin-top:22px}
.assess-question-map{max-width:720px;margin:16px auto 0;text-align:left}
.assess-question-map .section-title{margin:0 0 12px;align-items:center}
.assess-map-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:7px}
.assess-map-buttons button{min-height:42px;padding:7px;border:1px solid var(--line);background:var(--panel2);color:var(--dim)}
.assess-map-buttons button.answered{border-color:var(--good);color:var(--text)}
.assess-map-buttons button.flagged{box-shadow:inset 0 -3px 0 var(--warn)}
.assess-map-buttons button.current{outline:2px solid var(--accent);outline-offset:1px}
.assess-ratio,.assess-percent{display:flex;gap:8px;align-items:center;max-width:420px}
.assess-ratio input,.assess-percent input{max-width:130px}
.assess-colon{font-size:22px;font-weight:700}
.assess-options{border:0;padding:0;margin:0;display:grid;gap:8px}
.assess-options .answer-elimination-row>.assess-option{height:100%}
.assess-option{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel2);cursor:pointer}
.assess-option:hover{border-color:var(--accent)}
.assess-domains{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.assess-domain{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.assess-review{display:grid;gap:12px}
.assess-review-item{border:1px solid var(--line);border-left-width:4px;border-radius:8px;
  padding:13px 15px;text-align:left;background:var(--panel2)}
.assess-review-item.good{border-left-color:var(--good)}
.assess-review-item.bad{border-left-color:var(--bad)}
.assess-review-head{display:flex;gap:12px;align-items:center;justify-content:space-between}
.assess-review-head h3{margin:0;font-size:14px}
.assess-review-prompt{margin:8px 0}
.assess-review-answers{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:8px 0}
.assess-review-answers dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.assess-review-answers dd{margin:2px 0 0;font-weight:600}
.assess-review-why{font-size:13px;color:var(--dim);margin:6px 0}
.assess-repair-list{margin:8px 0 14px;padding-left:20px}
.assess-shortcut{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.assess-rules li{margin:6px 0}
@media(max-width:640px){
  .assess-launch-head,.assess-builder-head,.assess-custom-foot{display:grid;align-items:start}.assess-head-actions{flex-wrap:wrap}.assess-scope-bar{grid-template-columns:1fr;gap:8px}.assess-launch-grid,.assess-builder-layout{grid-template-columns:1fr}.assess-launch-card.featured{grid-column:auto}.assess-builder-summary{position:static;order:-1}.assess-confirm-grid{grid-template-columns:1fr}.assess-confirm-grid>div,.assess-confirm-grid>div:nth-child(odd){border-right:0;border-bottom:1px solid var(--line)}.assess-confirm-grid>div:last-child{border-bottom:0}
  .assess-attempt-row{display:grid;grid-template-columns:1fr auto}
  .assess-attempt-row button{grid-column:1/-1;width:100%}
}

/* School-agnostic Drug Library control plane */
.library-tabs{display:flex;gap:4px;margin:16px 0;border-bottom:1px solid var(--line);overflow:auto}.library-tabs button{border:0;border-bottom:3px solid transparent;background:transparent;color:var(--dim);padding:11px 15px;white-space:nowrap}.library-tabs button.active,.library-tabs button[aria-current=page]{border-bottom-color:var(--accent);color:var(--text);font-weight:800}.library-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.library-file-label{position:relative;overflow:hidden;cursor:pointer}.library-file-label input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.library-publish-bar{position:sticky;bottom:12px;z-index:8;display:flex;justify-content:space-between;align-items:center;gap:16px;margin:20px 0 4px;padding:12px 15px;border:1px solid var(--accent);border-radius:12px;background:var(--panel);box-shadow:0 8px 28px rgba(0,0,0,.18)}.library-publish-bar>div{display:flex;gap:8px}.library-editor{width:min(760px,calc(100% - 24px));border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);padding:0}.library-editor::backdrop{background:rgba(5,10,18,.68)}.library-editor form>header,.library-editor form>footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line)}.library-editor form>footer{border-top:1px solid var(--line);border-bottom:0;justify-content:flex-end}.library-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:20px}.library-editor-grid label{display:grid;gap:6px;font-weight:700}.library-editor-grid .wide{grid-column:1/-1}.library-editor textarea{min-height:90px;resize:vertical}.library-editor #drugLibrarySaveStatus{padding:0 20px}.curriculum-node-list,.readiness-list,.revision-list{display:grid;gap:0}.curriculum-node,.readiness-activity,.revision-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}.curriculum-node:last-child,.readiness-activity:last-child,.revision-row:last-child{border-bottom:0}.curriculum-node h3,.readiness-activity h3,.revision-row h3{margin:3px 0}.curriculum-node p,.readiness-activity p,.revision-row p{margin:3px 0;color:var(--dim)}
.editor-tabs{display:flex;gap:2px;padding:0 16px;border-bottom:1px solid var(--line);overflow:auto}.editor-tabs button{border:0;border-bottom:3px solid transparent;background:transparent;color:var(--dim);padding:11px 10px;white-space:nowrap}.editor-tabs button.active{border-bottom-color:var(--accent);color:var(--text);font-weight:800}.key-value-list{display:grid;grid-template-columns:max-content 1fr;gap:8px 16px}.key-value-list dt{font-weight:800;color:var(--dim)}.key-value-list dd{margin:0;min-width:0;overflow-wrap:anywhere}.token-list{display:flex;gap:7px;flex-wrap:wrap}.curriculum-node-expanded{display:block}.curriculum-node-expanded>header{display:flex;align-items:center;justify-content:space-between;gap:16px}.curriculum-members{display:grid;gap:6px;margin:12px 0}.curriculum-member{display:grid;grid-template-columns:minmax(160px,1fr) minmax(140px,220px) repeat(5,auto);align-items:center;gap:6px;padding:8px;border:1px solid var(--line);border-radius:9px}.curriculum-member span,.curriculum-member small{display:block}.curriculum-assign{display:grid;gap:7px;justify-content:stretch;margin-top:16px}.curriculum-assign>label{font-weight:800}.curriculum-assign>.row{justify-content:flex-end}.curriculum-assign input{min-width:min(360px,100%)}.curriculum-assign>small{color:var(--dim);text-align:right}.scope-builder-intro{border-left:4px solid var(--accent)}.scope-builder-intro h2{margin-top:0}.scope-source-summary{margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}.scope-source-summary h4{margin:0 0 9px}.scope-source-pills{display:flex;flex-wrap:wrap;gap:7px}.scope-source-grid{display:grid;gap:7px;max-height:48vh;overflow:auto;padding:4px}.scope-source-option{grid-template-columns:auto 1fr!important;align-items:start;gap:10px!important;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2)}.scope-source-option input{margin-top:3px}.scope-source-option span,.scope-source-option small{display:block}.scope-source-option small{margin-top:3px;color:var(--dim);font-weight:500}.import-review{width:min(980px,calc(100% - 24px))}.import-review-body{padding:20px;display:grid;gap:16px;max-height:65vh;overflow:auto}.import-mapping-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.import-mapping-grid label,.import-review-body>label,.import-row label{display:grid;gap:5px;font-weight:700}.import-row-list{display:grid;gap:8px}.import-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(130px,180px) minmax(180px,1fr);gap:12px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:10px}.import-row small{display:block;color:var(--dim);margin-top:4px}
@media(max-width:760px){.curriculum-node-expanded>header,.library-publish-bar,.curriculum-node,.readiness-activity,.revision-row{align-items:stretch;flex-direction:column}.library-publish-bar>div,.library-publish-bar button,.curriculum-node button,.revision-row button{width:100%}.library-editor-grid,.import-mapping-grid{grid-template-columns:1fr}.library-editor-grid .wide{grid-column:auto}.library-row-actions{display:grid;grid-template-columns:1fr 1fr}.library-row-actions .primary{grid-column:1/-1}.curriculum-member,.import-row{grid-template-columns:1fr}.curriculum-member button,.curriculum-member select,.curriculum-assign,.curriculum-assign select,.curriculum-assign button{width:100%}.curriculum-assign{display:grid}}
.verification-code-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border, #d8e2ee);
  border-radius: .75rem;
  background: var(--surface-subtle, #f8fafc);
}
.otp-code {
  max-width: 10rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-align: center;
}
.institution-membership {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--border, #d8e2ee);
  border-radius: .75rem;
}
.institution-membership.verified { border-color: #79b99a; }
.verification-timeline {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 18rem;
  overflow: auto;
  background: var(--surface-soft);
  border-radius: 10px;
  padding: 0;
  margin-top: 12px;
}
.verification-timeline:not(:empty) { padding: 12px; }
.institution-verification-start { margin-top: 1.25rem; }

/* Course Pathway Builder */
.course-pathway-offer{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--panel)),var(--panel) 58%)}
.course-pathway-offer h2{margin:5px 0 7px}.course-pathway-offer p{color:var(--dim);max-width:780px}
.pb-heading{align-items:center}.pb-step-count,.pb-progress-ring{flex:0 0 auto;display:grid;place-items:center;align-content:center;width:86px;height:86px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,var(--panel));box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--accent) 5%,transparent)}
.pb-step-count b,.pb-progress-ring b{font-size:25px;line-height:1;color:var(--accent)}.pb-step-count span,.pb-progress-ring span{font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
.pb-setup{max-width:960px;margin-inline:auto}.pb-layer-checks{grid-template-columns:repeat(2,minmax(0,1fr))}.pb-setup-note{margin:16px 0;padding:12px 14px;border-left:3px solid var(--accent);border-radius:7px;background:color-mix(in srgb,var(--accent) 7%,var(--panel2));color:var(--dim)}
.pb-toolbar{position:sticky;top:8px;z-index:12;display:flex;align-items:center;gap:12px;margin:10px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 8px 28px rgba(0,0,0,.1);backdrop-filter:blur(10px)}
.pb-toolbar>div{display:grid}.pb-toolbar>div span{font-size:12px;color:var(--muted)}
.pb-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,340px);gap:16px;align-items:start}.pb-board{display:grid;gap:0;min-width:0}.pb-phase{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:15px;padding:9px 14px;border:1px solid var(--line);border-radius:10px 10px 0 0;text-transform:uppercase;letter-spacing:.045em}.pb-phase b{font-size:12px}.pb-phase span{font-size:11px;color:var(--dim);text-align:right}
.pb-phase.phase-entry{background:color-mix(in srgb,#638bd7 12%,var(--panel))}.pb-phase.phase-decarboxylation{background:color-mix(in srgb,#d26a54 12%,var(--panel))}.pb-phase.phase-regeneration{background:color-mix(in srgb,#4f9a6d 12%,var(--panel))}
.pb-step{display:grid;grid-template-columns:58px minmax(0,1fr);border:1px solid var(--line);border-top:0;background:var(--panel);min-height:105px}.pb-step:last-of-type{border-radius:0 0 10px 10px}.pb-step-number{display:grid;place-items:center;align-content:center;gap:2px;border-right:1px solid var(--line);background:var(--panel2)}.pb-step-number span{font-size:9px;letter-spacing:.12em;color:var(--muted)}.pb-step-number b{font-size:25px}.phase-entry .pb-step-number b{color:#638bd7}.phase-decarboxylation .pb-step-number b{color:#c65741}.phase-regeneration .pb-step-number b{color:#3d8c5c}
.pb-step-body{padding:11px;min-width:0}.pb-fixed-reaction{display:grid;gap:3px;margin-bottom:9px}.pb-fixed-reaction small,.pb-slot>small{font-size:10px;text-transform:uppercase;letter-spacing:.055em;color:var(--muted)}.pb-fixed-reaction b{font-size:14px;font-weight:700}.pb-step-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.pb-slot{min-height:68px;display:grid;align-content:start;gap:6px;padding:8px;border:1px dashed color-mix(in srgb,var(--accent) 48%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--accent) 3%,var(--panel2));cursor:pointer;transition:border-color var(--theme-paint-duration,.15s),background var(--theme-paint-duration,.15s),transform .15s}.pb-slot:hover,.pb-slot.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--panel2));transform:translateY(-1px)}.pb-slot.filled{border-style:solid}.pb-slot-empty{align-self:center;color:var(--muted);font-size:12px}
.pb-bank{position:sticky;top:78px;max-height:calc(100vh - 95px);overflow:auto;border:1px solid var(--line);border-radius:13px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.11)}.pb-bank-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px 9px;background:var(--panel)}.pb-bank-head h2{margin:2px 0 0;font-size:17px}.pb-bank-tabs{display:flex;gap:4px;padding:0 10px 9px;overflow:auto;border-bottom:1px solid var(--line)}.pb-bank-tabs button{padding:6px 8px;border:0;border-radius:7px;background:transparent;color:var(--dim);font-size:11px;white-space:nowrap}.pb-bank-tabs button.on{background:color-mix(in srgb,var(--accent) 13%,var(--panel2));color:var(--accent);font-weight:800}.pb-bank-cards{display:grid;gap:7px;padding:10px}.pb-bank-empty{padding:18px 8px;text-align:center;color:var(--muted)}
.pb-card{width:100%;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--text);text-align:left;font-size:12.5px;line-height:1.3;cursor:grab;overflow-wrap:anywhere}.pb-card:hover{border-color:var(--accent)}.pb-card.selected{outline:2px solid var(--accent);outline-offset:1px}.pb-card.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 7%,var(--panel2))}.pb-card.locked{border-color:color-mix(in srgb,var(--good) 60%,var(--line));background:color-mix(in srgb,var(--good) 8%,var(--panel2));cursor:default;opacity:1}.pb-card.placed{padding:6px 7px;font-size:12px}.pb-card-tag{display:inline-grid;place-items:center;min-width:31px;padding:3px 5px;border-radius:5px;background:color-mix(in srgb,var(--accent) 13%,var(--panel));color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.05em}.pb-card.kind-enzyme .pb-card-tag{color:#7b59c4;background:color-mix(in srgb,#7b59c4 13%,var(--panel))}.pb-card.kind-cofactor .pb-card-tag{color:#a06c05;background:color-mix(in srgb,#d99b20 14%,var(--panel))}.pb-card.kind-key_fact .pb-card-tag{color:#b84f3a;background:color-mix(in srgb,#d8624b 13%,var(--panel))}
.pb-result-score{display:grid;margin:14px auto 20px}.pb-result-score b{font-size:44px;color:var(--accent)}.pb-result-score span{color:var(--muted)}.pb-results table{max-width:620px;margin:0 auto 18px;text-align:left}
@media(max-width:900px){.pb-layout{grid-template-columns:1fr}.pb-bank{position:static;max-height:none;order:-1}.pb-bank-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.pb-toolbar{top:4px}}
@media(max-width:620px){.pb-heading{align-items:flex-start}.pb-step-count,.pb-progress-ring{width:66px;height:66px}.pb-layer-checks,.pb-bank-cards{grid-template-columns:1fr}.pb-step{grid-template-columns:45px minmax(0,1fr)}.pb-step-body{padding:8px}.pb-step-slots{grid-template-columns:1fr}.pb-toolbar{display:grid;grid-template-columns:1fr 1fr}.pb-toolbar .right{display:none}.pb-toolbar button,.pb-toolbar>span{width:100%}.pb-phase{display:grid;gap:3px}.pb-phase span{text-align:left}}

/* ===================== Arrival intro ("First Light") =====================
   Plays on the first resolved render, including Sign in.

   The overlay never blocks: pointer-events:none throughout, and the real
   page hydrates underneath it the entire time. See static/arrival-intro.js. */

/* --workspace is redefined only on `main`. The overlay is a sibling of main,
   not a descendant, so it would resolve the LIGHT canvas color in dark mode
   and light up a white column over a near-ink page. This mirrors the canvas
   color at a scope the overlay can actually see. */
:root{--arrival-canvas:#f7f9fc}
/* The dark and signed-out values of this token are NOT declared here. They are
   declared in the environment token blocks alongside --outer-canvas-bg, which
   is the only place an environment token may be set. Declaring the dark value
   here as `body.workspace-dark` and the signed-out value as
   `body.auth-environment` gave the two identical specificity, so the tie was
   broken by which line came later in the file -- and the workspace value did,
   which is why every signed-out reload in dark mode bloomed Eclipse #0f0f0f
   inside the navy field. Specificity now decides it, not source order.
   Enforced by tests/environment_token_boundary.test.js. */

/* The veil opens from the real environment ground. Signed-out cold arrivals
   extend it over their transparent header; authenticated arrivals and
   hand-offs begin below the raised rail. Light mode opens from its navy outer
   canvas, while dark mode defines the outer canvas as the Eclipse workspace
   itself. Keeping this tied to the canvas token avoids reconciliation fades,
   theme exceptions, and fallback colours. */
:root{--arrival-field:var(--outer-canvas-bg)}

/* z-index 40 places the arrival above the header (5). The controller chooses
   whether the field starts at the viewport edge or below the measured rail. */
.arrival{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
/* No background-color transition. Theme and environment tokens are applied
   before the arrival is raised; animating the field itself would reintroduce
   the colour reconciliation this layer exists to avoid. */
.arrival-veil{position:absolute;left:0;right:0;background:var(--arrival-field)}
.arrival-canvas{top:64px;bottom:0}
.arrival-clip{position:absolute;left:50%;top:64px;bottom:0;width:min(var(--workspace-max-width),100%);
  transform:translateX(-50%);overflow:hidden;pointer-events:none}
.arrival-bloom{position:absolute;left:50%;top:50%;width:140vmax;height:140vmax;
  margin:-70vmax 0 0 -70vmax;border-radius:50%;opacity:0;
  background:radial-gradient(circle,var(--arrival-canvas) 0%,var(--arrival-canvas) 42%,
    color-mix(in srgb,var(--arrival-canvas) 55%,transparent) 62%,transparent 74%);
  transform:scale(.1);will-change:transform,opacity}
/* `top` is set in JS from the mark's measured box. Anchoring it to the
   viewport instead puts it on top of the mark, because the mark is centred
   in the canvas area below the header, not in the viewport. */
/* transform-origin:0 0 is load-bearing. With the default 50% 50%, the
   translate()+scale() pair that carries the mark to the header lands it
   offset by half the size difference — about 20px low and 20px right. */
.arrival-mark{position:absolute;left:0;top:0;opacity:0;transform-origin:0 0;
  will-change:transform,opacity,filter}

/* pageIn suppression, half one of two. Routing REPLACES the #main element
   partway through the arrival — measured at ~170ms on the sign-in hand-off —
   so an inline style set on the main that existed when the arrival was raised
   is discarded with it and the replacement runs pageIn from scratch. This rule
   covers whatever main exists at any point during the arrival.

   Half two lives in arrivalTeardown(), which re-applies the inline
   `animation:none` to the surviving main BEFORE removing this class. Without
   that, dropping the class does not resume pageIn, it restarts it: the settled
   page blanks to opacity 0 and rises back through translateY(7px). That was
   the reported flicker, and it is why this rule alone is not enough. */
body.arrival-active main{animation:none}

@media (prefers-reduced-motion:reduce){
  .arrival-bloom,.arrival-mark{transition:none!important}
}

/* ---- public marketing overview ---------------------------------------
   The signed-out front door. It shares the sign-in environment -- same ink,
   same header, same decay-and-renewal backdrop -- so the deck in
   static/landing.js can slide between the overview and the auth card without
   the environment appearing to move.

   Three corrections govern this pass:

   1. ONE HUE IS NOT A PALETTE. The first version was Recall blue on navy and
      nothing else, which is why it read as unfinished rather than restrained.
      A warm gold now carries every call to action and every point of emphasis,
      and the six study areas each own a tint expressed through their glyph and
      their rules. The tints never touch body copy; they are accent only, so
      the page gains colour without losing its ink.
   2. CONTENT NEVER SITS ON THE MOVING FIELD. Bands carry their own ground.
   3. TYPE HAS TO HAVE A VOICE. Instrument Sans is the brand face and stays the
      brand face -- the range comes from its italic (used for the one word each
      heading turns on), from real weight and scale contrast, and from tracked
      micro-labels, rather than from importing a second family. */
body.auth-environment.landing-environment{
  --l-ink:#060e19; --l-band:#0a1524; --l-band-alt:#08111e;
  --l-panel:#0d1c2e; --l-panel-2:#112438;
  --l-line:#1b2f47; --l-line-soft:#152740;
  --l-text:#c6d6e8; --l-text-dim:#8ea5be; --l-head:#f4f8fd;
  --l-blue:#7fb0f0; --l-gold:#e9b968; --l-gold-deep:#d9a44a;
  --l-mint:#6fd0aa; --l-violet:#a68ce8; --l-coral:#ef8f7a; --l-cyan:#5fc4d8;
  --cta-primary-surface:linear-gradient(180deg,#f2c77d 0%,#e8b462 58%,#dca248 100%);
  --cta-primary-surface-pressed:linear-gradient(180deg,#e3ae57 0%,#d59a3d 100%);
  --cta-primary-surface-disabled:linear-gradient(180deg,#b8a17b,#9e8967);
  --cta-primary-edge:#edc170;--cta-primary-edge-hover:#f3cd82;
  --cta-primary-edge-pressed:#d89b3e;--cta-primary-edge-disabled:#9f8966;
  --cta-primary-text:#1d160b;--cta-primary-text-disabled:#524936;
  --cta-primary-contact-shadow:0 2px 3px rgba(3,10,18,.3);
  --cta-primary-ambient-shadow:0 8px 18px rgba(217,164,74,.18);
  --cta-primary-shadow-hover:0 3px 4px rgba(3,10,18,.3),0 12px 24px rgba(217,164,74,.24);
  --cta-primary-shadow-pressed:0 1px 2px rgba(3,10,18,.28),0 3px 8px rgba(217,164,74,.14);
  --cta-primary-focus:rgba(127,176,240,.78);
  --landing-orbit-arc-depth:72px;
  --tint:var(--l-blue)}
[data-tint="blue"]{--tint:var(--l-blue)}
[data-tint="gold"]{--tint:var(--l-gold)}
[data-tint="mint"]{--tint:var(--l-mint)}
[data-tint="violet"]{--tint:var(--l-violet)}
[data-tint="coral"]{--tint:var(--l-coral)}
[data-tint="cyan"]{--tint:var(--l-cyan)}

body.auth-environment.landing-environment main{
  display:block;align-content:normal;max-width:none;margin:0;padding:0}
body.auth-environment.landing-environment .site-footer{padding-right:28px}
/* The landing header stays available across the whole conversion story. It
   uses the same cool white paper as the light landing sections so it reads as
   a distinct, calm navigation surface rather than another navy content band. */
body.landing-environment>header{position:fixed;inset:0 0 auto;width:100%;isolation:isolate;
  --landing-header-phase:0;--landing-header-surface-mix:0%;
  --header-text:#152237;--header-muted:#62758c;--header-control-bg:#13223a;
  --header-control-line:#2a3c56;--header-control-text:#ffffff;
  --header-focus:color-mix(in srgb,#276dcc 72%,transparent);
  background:var(--paper);
  border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background-color var(--theme-paint-duration,.08s) linear}
body.landing-environment>header.is-scrolled{
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
body.landing-environment>header:before{content:"";position:absolute;z-index:1;
  left:6%;right:6%;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--l-blue) 8%,transparent) 50%,transparent);
  opacity:var(--landing-header-phase)}
body.landing-environment>header:after{content:"";position:absolute;z-index:-1;
  left:0;right:0;top:calc(100% - 1px);height:24px;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--l-ink) 22%,transparent) 0%,
    color-mix(in srgb,var(--l-ink) 7%,transparent) 42%,transparent 100%);
  opacity:var(--landing-header-phase)}
body.landing-environment header nav button{font-size:14px}
body.landing-environment header nav button:hover{color:var(--l-gold)}
body.landing-environment #account button.ghost{
  border-color:transparent;font-weight:640}
body.landing-environment #account button.ghost:hover{
  border-color:transparent;color:var(--l-gold)}
body.landing-environment>header .landing-header-actions{display:flex;align-items:center;gap:10px}
body.landing-environment>header .landing-header-actions .landing-header-cta{
  width:auto;min-height:40px;padding:0 18px;border-radius:12px;font-size:14px}

.landing{color:var(--l-text);display:block}
.landing p{margin:0}
/* The one word each heading turns on. Italic is the brand face's own italic,
   not a synthesised slant -- body has font-synthesis:none, so a real file has
   to exist, and it does. */
.landing h1 em,.landing h2 em{font-style:italic;color:var(--l-gold);font-weight:640}
.landing h2{color:var(--l-head);font-size:clamp(25px,3.2vw,37px);line-height:1.1;
  letter-spacing:-.03em;margin:0 0 14px;text-wrap:balance}
.landing h3{color:var(--l-head);font-size:16.5px;margin:0 0 8px;letter-spacing:-.014em}

.landing-icon{width:100%;height:100%;display:block}

/* Full-bleed bands flow into one another. Spacing and tonal shifts establish
   the major sections without hard page-wide rules between them. */
.landing-section,.landing-hero{
  padding-left:max(28px,calc((100vw - var(--workspace-max-width))/2));
  padding-right:max(28px,calc((100vw - var(--workspace-max-width))/2))}
.landing-section{padding-top:clamp(56px,7.4vh,92px);padding-bottom:clamp(56px,7.4vh,92px);
  position:relative;background:var(--l-band)}
.landing-why-section,.landing-faq{background:var(--l-band-alt)}

/* Two marketing environments, both already owned by the product. Dark carries
   the promise and the retention story; the authenticated workspace's cool
   paper surface carries product demonstration, social proof, and questions. */
.landing-drills-section,.landing-testimonials,.landing-faq{
  --l-band:var(--paper);--l-band-alt:var(--paper);
  --l-panel:#ffffff;--l-panel-2:#edf3f9;
  --l-line:#cdd8e5;--l-line-soft:#e6ecf3;
  --l-text:#354a63;--l-text-dim:#62758c;--l-head:#152237;
  --l-blue:#276dcc;--l-gold:#a86c10;--l-mint:#168b69;
  --l-violet:#7256bf;--l-coral:#c35c4d;--l-cyan:#16849a;
  background:var(--paper);color:var(--l-text)}
.landing-drills-section,.landing-testimonials{
  background:linear-gradient(180deg,#eef3f8 0,var(--paper) 88px)}

/* One signature boundary breaks the stacked-band rhythm. The retention field
   reaches into the light practice chapter as one enormous off-centre ellipse,
   borrowing the hero's orbital geometry without introducing a decorative wave. */
.landing-drills-section{padding-bottom:clamp(96px,11vh,132px);overflow:hidden;isolation:isolate}
.landing-drills-section>.landing-narrative-beat,.landing-drills-section>.landing-drills{
  position:relative;z-index:1}
/* A measured duplicate of the hero's two working rings occupies the exact
   same page-space after the white canvas begins. Its pale ink and radial mask
   make it an atmospheric continuation on the far right, never illustration
   behind the practice controls. */
.landing-practice-orbit{position:absolute;z-index:0;pointer-events:none;
  left:var(--practice-orbit-left,72%);top:var(--practice-orbit-top,-390px);
  width:var(--practice-orbit-width,730px);height:var(--practice-orbit-height,730px);
  overflow:visible;opacity:.3;filter:saturate(.54) brightness(1.08);
  -webkit-mask-image:radial-gradient(ellipse at 82% 4%,#000 0%,rgba(0,0,0,.72) 38%,transparent 76%);
  mask-image:radial-gradient(ellipse at 82% 4%,#000 0%,rgba(0,0,0,.72) 38%,transparent 76%)}
.landing-practice-orbit .landing-orbit-node-ghost{opacity:.42}
.landing-practice-orbit .landing-orbit-node-ghost.is-swapping{opacity:0}
.landing-why-section{isolation:isolate;padding-top:clamp(76px,9vh,108px)}
.landing-why-section:before{content:"";position:absolute;z-index:0;
  top:calc(-1 * var(--landing-orbit-arc-depth));right:-28vw;
  width:110vw;height:calc(var(--landing-orbit-arc-depth) * 2.12);
  border-radius:50% 50% 0 0/100% 100% 0 0;background:var(--l-band-alt);
  pointer-events:none}
.landing-why-section>*{position:relative;z-index:1}

/* The section stamp: gold ordinal, rule, label. The page's only repeating
   ornament, and what turns six stacked bands into one numbered argument. */
.landing-section-head{max-width:660px;margin-bottom:clamp(30px,4.2vh,44px)}
.landing-narrative-beat{max-width:900px;margin:0 auto clamp(46px,6.4vh,72px);
  text-align:center}
.landing-narrative-beat h2{font-size:clamp(30px,4.1vw,49px);line-height:1.08;
  letter-spacing:-.038em;margin:0;text-wrap:balance}
.landing-ordinal{display:flex;align-items:center;gap:11px;margin:0 0 16px!important;
  font-size:11px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;
  color:var(--l-gold)}
.landing-ordinal span{font-variant-numeric:tabular-nums}
.landing-ordinal i{flex:0 0 34px;height:1px;background:linear-gradient(90deg,var(--l-gold),transparent)}
.landing-section-lede{color:var(--l-text-dim);font-size:15.5px;line-height:1.58}

/* --- hero --------------------------------------------------------------- */
.landing-hero{display:grid;gap:clamp(28px,4vw,68px);align-items:center;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  padding-top:calc(var(--app-header-height) + clamp(44px,8.5vh,100px));
  padding-bottom:clamp(48px,8vh,96px);
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(118% 128% at 16% 32%,
      rgba(6,14,25,.92) 0%, rgba(6,14,25,.78) 30%,
      rgba(6,14,25,.20) 56%, rgba(6,14,25,0) 82%),
    linear-gradient(180deg, rgba(6,14,25,.16) 0%, rgba(6,14,25,0) 55%,
      rgba(10,21,36,.65) 100%)}
.landing-hero-copy{max-width:660px;position:relative;z-index:2}
.landing-eyebrow{display:inline-flex;align-items:center;gap:9px;
  margin:0 0 18px!important;padding:5px 12px 5px 11px;border-radius:999px;
  border:1px solid rgba(233,185,104,.34);background:rgba(233,185,104,.08);
  font-size:11px;font-weight:750;letter-spacing:.15em;text-transform:uppercase;
  color:var(--l-gold)}
.landing-hero h1{color:#fbfdff;font-size:clamp(33px,4.5vw,55px);line-height:1.03;
  letter-spacing:-.038em;margin:0 0 22px;text-wrap:balance;font-weight:700}
.landing-lede{font-size:clamp(15.5px,1.35vw,18px);line-height:1.58;
  color:var(--l-text-dim);max-width:530px}
.landing-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px;align-items:center}

/* The primary CTA is a material system rather than a gold fill with a shadow.
   Its proportions come from the label and padding; a top-left light source,
   contact shadow and ambient shadow give every state the same physical logic. */
.landing .landing-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:53px;padding:0 30px;overflow:hidden;isolation:isolate;
  border-radius:16px;font-size:16.5px;font-weight:720;line-height:1;
  letter-spacing:-.012em;background:var(--cta-primary-surface)!important;
  border:1px solid var(--cta-primary-edge)!important;color:var(--cta-primary-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
    var(--cta-primary-contact-shadow),var(--cta-primary-ambient-shadow);
  filter:saturate(1) brightness(1);transform:translateY(0) scale(1);transform-origin:center;
  transition:transform 150ms cubic-bezier(.22,.61,.36,1),box-shadow var(--theme-paint-duration,150ms) ease-out,
    filter 150ms ease-out,border-color var(--theme-paint-duration,150ms) ease-out}
.landing .landing-cta:before{content:"";position:absolute;z-index:-1;inset:0;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,.08) 24%,transparent 48%);
  opacity:.58;transition:opacity 150ms ease-out}
.landing-cta-label{position:relative;z-index:1;transform:translateY(-.5px);
  transition:opacity 90ms ease}
.landing .landing-cta:hover{border-color:var(--cta-primary-edge-hover)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),var(--cta-primary-shadow-hover);
  filter:saturate(1.025) brightness(1.025);transform:translateY(-2px) scale(1.015);
  transition-duration:120ms}
.landing .landing-cta:hover:before{opacity:.78;transition-duration:120ms}
.landing .landing-cta:active{background:var(--cta-primary-surface-pressed)!important;
  border-color:var(--cta-primary-edge-pressed)!important;filter:saturate(1.02) brightness(.97);
  transform:translateY(1px) scale(.988);
  box-shadow:inset 0 1px 2px rgba(92,54,4,.2),var(--cta-primary-shadow-pressed);
  transition-duration:80ms}
.landing .landing-cta:active:before{opacity:.18;transition-duration:80ms}
.landing .landing-cta[data-action-owned="true"]{background:var(--cta-primary-surface-pressed)!important;
  border-color:var(--cta-primary-edge-pressed)!important;filter:saturate(1.02) brightness(.97);
  transform:translateY(1px) scale(.988);
  box-shadow:inset 0 1px 2px rgba(92,54,4,.2),var(--cta-primary-shadow-pressed);
  transition-duration:80ms}
.landing .landing-cta[data-action-owned="true"]:before{opacity:.18;transition-duration:80ms}
.landing .landing-cta:focus-visible{outline:2px solid var(--cta-primary-focus);outline-offset:2px}
.landing .landing-cta:disabled{background:var(--cta-primary-surface-disabled)!important;
  border-color:var(--cta-primary-edge-disabled)!important;color:var(--cta-primary-text-disabled)!important;
  box-shadow:none;filter:none;transform:none;cursor:not-allowed;opacity:1}
.landing .landing-cta:disabled:before{opacity:.2}
.landing .landing-cta[aria-busy="true"]{cursor:progress;pointer-events:none}
.landing .landing-cta[aria-busy="true"] .landing-cta-label{opacity:0}
.landing .landing-cta[aria-busy="true"]:after{content:"";position:absolute;z-index:2;
  width:15px;height:15px;border:2px solid rgba(29,22,11,.35);border-right-color:#1d160b;
  border-radius:50%;animation:landingCtaBusy .65s linear infinite}
@keyframes landingCtaBusy{to{transform:rotate(360deg)}}
.landing-price-line{display:grid;gap:2px;margin-top:16px!important;color:var(--l-text-dim)}
.landing-price-status{font-size:16px;line-height:1.4;color:var(--l-text)}
.landing-price-status b{color:var(--l-gold);font-weight:750}
.landing-price-status span{font-size:14px;color:var(--l-text-dim)}
.landing-price-future{font-size:14px;line-height:1.45;color:var(--l-text-dim)}
.landing-price-future b{color:#dce8f7;font-weight:720;font-variant-numeric:tabular-nums}
.landing-price-note{margin-top:2px;font-size:12px;line-height:1.45;color:#7187a0}
/* The motif: rings whose gaps widen outward -- the review schedule itself. */
.landing-hero-demo{position:relative;justify-self:end;width:100%;max-width:436px;z-index:2}
/* Large enough to occupy the hero's lower right, which was dead space, and
   bright enough to actually be seen against near-black ink. The gold arcs and
   their markers step outward on the same widening rhythm the schedule uses. */
.landing-hero-motif{position:absolute;z-index:-1;width:min(168%,730px);height:auto;
  left:50%;top:50%;transform:translate(-40%,-47%);pointer-events:none}

/* --- the playable demo -------------------------------------------------- */
.landing-demo{background:linear-gradient(168deg,#f7fafd,#e9f0f8);
  border:1px solid #ccd9e8;border-radius:16px;padding:22px 22px 20px;color:var(--text);
  box-shadow:0 28px 70px rgba(0,0,0,.44),0 2px 8px rgba(0,0,0,.22);
  border-top:3px solid var(--tint)}
.landing-demo-eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 12px!important;
  font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--tint) 62%,#33465e)}
.landing-demo-eyebrow svg{width:17px;height:17px;flex:0 0 17px}
.landing-demo-eyebrow .study-glyph{width:22px;height:22px;flex:0 0 22px}
.landing-demo-stem{margin:0 0 18px!important;font-size:clamp(20px,2.1vw,26px);
  font-weight:700;letter-spacing:-.026em;line-height:1.24;color:#101d2f}
.landing-demo-ask{display:block;font-size:13.5px;font-weight:660;color:#26364c;margin-bottom:8px}
/* The hero's closing argument, shown only after the visitor has answered. */
/* Before the visitor answers, the hero has nothing to report -- so it does not
   draw a panel to say so. The panel appears with the verdict. */
.landing-demo-result.is-idle{background:none;border:0;padding:6px 0 0;min-height:0}
.landing-demo-contrast{margin-top:2px;color:#3d4f66;font-size:13px;line-height:1.5;font-weight:620}
/* The drills card wears the product's session chrome, so the section's claim --
   "the actual interaction, not a screenshot of it" -- is literally true. */
.landing-demo-session{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:13px}
.landing-demo-modes{display:inline-flex;align-items:center;gap:9px;font-size:12px}
.landing-demo-modes b{color:#12233a;font-weight:750;border-bottom:2px solid #2f6fd0;padding-bottom:2px}
.landing-demo-modes i{color:#7d8da8;font-style:normal}
.landing-demo-count{margin-left:auto;color:#5c6c82;font-size:12px;font-weight:680;
  font-variant-numeric:tabular-nums}
.landing-demo-meter{flex:1 0 100%;height:4px;border-radius:2px;background:#d8e2ee;overflow:hidden}
.landing-demo-meter i{display:block;height:100%;border-radius:2px;background:#2f6fd0}
/* Orbit bodies.

   Each body travels its ring, and counter-rotates about its own centre at the
   same period so the object stays upright instead of tumbling. The two run at
   different speeds in opposite directions, so the pair never locks into step.
   Origins are in view-box units, which is why transform-box is set. */
@keyframes landingOrbitCW{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes landingOrbitCCW{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
.landing-orbit-path{transform-box:view-box;transform-origin:230px 230px}
.landing-orbit-path.is-a{animation:landingOrbitCW 44s linear infinite}
.landing-orbit-path.is-b{animation:landingOrbitCCW 71s linear infinite}
.landing-orbit-node{overflow:visible;opacity:1;transition:opacity .3s ease;transform-box:view-box}
.landing-orbit-node.is-a{transform-origin:364px 230px;animation:landingOrbitCCW 44s linear infinite}
.landing-orbit-node.is-b{transform-origin:426px 230px;animation:landingOrbitCW 71s linear infinite}
.landing-orbit-node.is-swapping{opacity:0}
@media (prefers-reduced-motion: reduce){
  .landing-orbit-path,.landing-orbit-node{animation:none}
  .landing-orbit-node{transition:none}
}
.landing-demo-entry{display:flex;gap:8px}
.landing-demo-entry input{flex:1;min-width:0;min-height:46px;padding:0 13px;background:#fff;
  border:1px solid #b6c7da;border-radius:10px;font-size:15px;color:var(--text)}
.landing-demo-entry input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--accent)}
.landing-demo-entry .primary{min-height:46px;padding:0 18px;border-radius:10px;font-weight:680}
.landing-demo-result{margin-top:14px;min-height:58px;display:grid;gap:4px;padding:11px 13px;
  border-radius:10px;background:#e5edf6;border:1px solid #cddaea;
  font-size:13.5px;line-height:1.45}
.landing-demo-result b{font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.landing-demo-answer{font-size:17.5px;font-weight:700;letter-spacing:-.018em;color:#101d2f}
.landing-demo-lesson{color:var(--dim);font-size:13px;line-height:1.48;font-style:italic}
.landing-demo-hint{color:var(--dim);font-size:13px}
/* The grading vocabulary is the product's own. A near miss is not a failure
   state and must not be coloured like one. */
.landing-demo-result.is-correct{background:#dcf3e7;border-color:#1c8a5c}
.landing-demo-result.is-correct b{color:#0b5136}
.landing-demo-result.is-near{background:#fdf0d6;border-color:#d9a44a}
.landing-demo-result.is-near b{color:#7d5a10}
.landing-demo-result.is-miss{background:#fbe3e6;border-color:#c74753}
.landing-demo-result.is-miss b{color:#81222d}
/* --- study areas -------------------------------------------------------- */
.landing-drills{display:grid;gap:22px;grid-template-columns:minmax(0,306px) minmax(0,1fr);
  align-items:start}
.landing-drill-tabs{display:grid;gap:0;background:none;border:0;overflow:visible}
.landing-drill-tab{display:flex;align-items:center;gap:13px;text-align:left;
  background:transparent;border:0;border-bottom:1px solid var(--l-line-soft);
  padding:14px 16px;cursor:pointer;color:var(--l-text);
  border-left:3px solid transparent;transition:background var(--theme-paint-duration,.14s) ease}
.landing-drill-tab:last-child{border-bottom:0}
.landing-drill-tab:hover{background:var(--l-panel-2)}
.landing-drill-tab.is-active{background:var(--l-panel-2);border-left-color:var(--tint)}
/* No tile behind a study-area mark here either: the drawings are objects, and
   a tinted bordered square would read as the icon. Sized larger than the old
   monoline glyphs because an object with no container needs the room. */
.landing-drill-icon{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;color:var(--tint)}
.landing-drill-icon svg{width:19px;height:19px}
.landing-drill-icon .study-glyph{width:32px;height:32px}
.landing-drill-text{display:grid;gap:1px;min-width:0}
.landing-drill-name{font-size:14.5px;font-weight:660;color:var(--l-head)}
.landing-drill-cue{font-size:12px;color:var(--l-text-dim)}
.landing-drill-panel{display:grid;gap:22px;
  grid-template-columns:minmax(0,336px) minmax(0,1fr);align-items:start;
  background:transparent;border:0;padding:0;position:relative;overflow:visible}
/* A large, very quiet copy of the subject's glyph. It gives the panel a
   subject identity you register before reading a word of it. */
.landing-drill-panel:before{content:"";position:absolute;inset:auto -60px -70px auto;
  width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--tint) 13%,transparent),transparent 68%);
  pointer-events:none}
.landing-drill-detail{position:relative;z-index:1}
.landing-drill-detail p{color:var(--l-text-dim);font-size:14px;line-height:1.58}
.landing-drill-covers{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.landing-drill-covers li{position:relative;padding-left:22px;font-size:13.5px;
  line-height:1.5;color:var(--l-text)}
.landing-drill-covers li:before{content:"";position:absolute;left:2px;top:.52em;
  width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--tint);opacity:.8}
.landing-drill-panel .landing-demo{box-shadow:0 16px 38px rgba(0,0,0,.34);position:relative;z-index:1}
.landing-drills-section .landing-drill-panel .landing-demo{
  border-color:#c8d5e4;box-shadow:0 18px 42px rgba(21,49,79,.15),0 2px 8px rgba(21,49,79,.08)}

/* --- the method --------------------------------------------------------- */
.landing-why{display:grid;gap:clamp(40px,5vw,72px);max-width:1120px;margin:0 auto;
  grid-template-columns:minmax(0,500px) minmax(0,460px);justify-content:center;align-items:start}
.landing-why-figure{margin:0;background:transparent;border:0;padding:0}
.landing-curve{width:100%;height:auto;display:block}
.landing-why-figure figcaption{margin-top:12px;color:var(--l-text-dim);font-size:13px;
  line-height:1.52;font-style:italic}
.landing-reasons{list-style:none;margin:0;padding:0;display:grid;gap:0;
  background:none;border:0;overflow:visible}
.landing-reason{display:flex;gap:15px;background:transparent;padding:18px 0;
  border-bottom:0;position:relative}
.landing-reason:not(:last-child):after{content:"";position:absolute;left:57px;bottom:0;
  width:min(280px,65%);height:1px;background:var(--l-line-soft)}
.landing-reason:first-child{padding-top:0}
.landing-reason:last-child{padding-bottom:0;border-bottom:0}
/* Object, not badge -- see .study-mark-icon. No tint, no ring, no tile. */
.landing-reason-icon{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;color:var(--tint)}
.landing-reason-icon svg{width:21px;height:21px}
.landing-reason-icon .study-glyph{width:42px;height:42px}
.landing-reason p{color:var(--l-text-dim);font-size:14px;line-height:1.56}

/* --- student proof ------------------------------------------------------ */
/* The next hand-off is deliberately quieter: on wide screens the featured
   quote crosses the dark/light boundary by only 28px while the heading remains
   on the light canvas beside it. This is content overlap, not a second divider. */
.landing-testimonials{padding-top:72px}
.landing-testimonials .landing-section-head{max-width:1120px;margin:0 auto 30px}
.landing-testimonials .landing-section-head h2{max-width:280px;margin-bottom:0}
.landing-testimonial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;max-width:1120px;margin:-211px auto 0}
.landing-testimonial-card{position:relative;display:flex;flex-direction:column;min-height:245px;
  margin:0;padding:clamp(26px,3vw,36px);overflow:hidden;
  border:1px solid #1b3652;border-radius:16px;
  background:linear-gradient(145deg,#11283f,#0d1c2e);
  box-shadow:0 18px 46px rgba(var(--elev-shade),.2);
  transform:translateY(0);filter:brightness(1) saturate(1);
  transition:transform 160ms cubic-bezier(.22,.61,.36,1),
    box-shadow var(--theme-paint-duration,160ms) ease-out,filter 160ms ease-out,border-color var(--theme-paint-duration,160ms) ease-out}
.landing-testimonial-card.is-featured{grid-column:1/-1;min-height:280px;
  margin-left:320px;
  background:
    radial-gradient(circle at 88% 14%,rgba(233,185,104,.09),transparent 32%),
    linear-gradient(145deg,#12263a,#0d1c2e)}
.landing-testimonial-quote-mark{position:absolute;top:14px;right:26px;color:#e9b968;
  font-size:76px;font-weight:700;line-height:1;opacity:.22;transform:translateY(0);
  transition:transform 160ms ease-out,opacity 160ms ease-out}
.landing-testimonial-card>p{max-width:720px;margin:clamp(30px,4vw,48px) 0 32px!important;
  color:#f4f8fd;font-size:clamp(18px,2vw,23px);font-weight:620;
  letter-spacing:-.018em;line-height:1.48;text-wrap:balance}
.landing-testimonial-card.is-featured>p{font-size:clamp(22px,2.7vw,31px);line-height:1.38}
.landing-testimonial-person{display:grid;gap:4px;margin-top:auto}
.landing-testimonial-person cite{color:#f4f8fd;font-size:15px;font-style:normal;font-weight:720}
.landing-testimonial-person small{color:#93a9c2;font-size:13px}

/* Credibility motion: one entrance in reading order, then stable prose. The
   cards never auto-slide. On a precise pointing device only, depth answers the
   visitor locally without shifting the composition laterally. */
.landing-testimonials.is-motion-ready .landing-section-head,
.landing-testimonials.is-motion-ready .landing-testimonial-card{
  opacity:0;transform:translateY(18px);filter:blur(2px)}
.landing-testimonials.is-motion-ready.is-revealed .landing-section-head,
.landing-testimonials.is-motion-ready.is-revealed .landing-testimonial-card{
  opacity:1;transform:translateY(0);filter:none}
.landing-testimonials.is-motion-ready .landing-section-head{
  transition:opacity 240ms ease-out,transform 260ms cubic-bezier(.22,.61,.36,1),filter 240ms ease-out}
.landing-testimonials.is-motion-ready .landing-testimonial-card{
  transition:opacity 280ms ease-out,transform 300ms cubic-bezier(.22,.61,.36,1),
    filter 280ms ease-out,box-shadow var(--theme-paint-duration,160ms) ease-out,border-color var(--theme-paint-duration,160ms) ease-out}
.landing-testimonials.is-motion-ready .landing-testimonial-card.is-featured{transition-delay:65ms}
.landing-testimonials.is-motion-ready .landing-testimonial-card:nth-child(2){transition-delay:135ms}
.landing-testimonials.is-motion-ready .landing-testimonial-card:nth-child(3){transition-delay:185ms}
@media (hover:hover) and (pointer:fine){
  .landing-testimonials.is-revealed .landing-testimonial-card:hover{
    transform:translateY(-4px);filter:brightness(1.025) saturate(1.025);
    border-color:#2b4b69;box-shadow:0 24px 56px rgba(var(--elev-shade),.27)}
  .landing-testimonial-card:hover .landing-testimonial-quote-mark{
    opacity:.34;transform:translateY(-3px)}
}

/* --- questions ---------------------------------------------------------- */
.landing-faq-list{display:grid;gap:0;background:none;border:0;overflow:visible;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.landing-faq-item{background:transparent;border-top:1px solid var(--l-line-soft)}
.landing-faq-item:nth-child(-n+2){border-top:0}
.landing-faq-item:nth-child(even){border-left:1px solid var(--l-line-soft)}
.landing-faq-item summary{cursor:pointer;list-style:none;padding:17px 19px;font-weight:660;
  color:var(--l-head);font-size:14.5px;display:flex;align-items:flex-start;gap:12px}
.landing-faq-item summary::-webkit-details-marker{display:none}
.landing-faq-mark{position:relative;flex:0 0 13px;height:13px;margin-top:4px}
.landing-faq-mark:before,.landing-faq-mark:after{content:"";position:absolute;
  background:var(--l-gold);border-radius:1px;transition:transform .18s ease}
.landing-faq-mark:before{left:0;top:6px;width:13px;height:1.8px}
.landing-faq-mark:after{left:5.6px;top:0;width:1.8px;height:13px}
.landing-faq-item[open] .landing-faq-mark:after{transform:scaleY(0)}
.landing-faq-item summary:hover{background:var(--l-panel-2)}
.landing-faq-item p{padding:0 19px 19px 43px;color:var(--l-text-dim);font-size:14px;line-height:1.58}
.landing-faq .landing-section-head a{color:var(--l-gold)}

/* The route back to the overview from any auth pane. */
.auth-overview-link{justify-self:center;font-size:13.5px;font-weight:600;color:var(--dim)}
.auth-overview-link:hover{color:var(--accent)}
body.workspace-dark.workspace-environment main .auth-overview-link{color:#8ea2b8}
.landing-plan-pending{display:block;margin-top:-8px}

@media(max-width:1080px){
  .landing-drills{grid-template-columns:minmax(0,254px) minmax(0,1fr)}
  .landing-drill-panel{grid-template-columns:minmax(0,1fr)}
  .landing-why{grid-template-columns:minmax(0,1fr)}
  .landing-testimonials{padding-top:clamp(56px,7.4vh,92px)}
  .landing-testimonials .landing-section-head{max-width:660px;margin:0 0 clamp(24px,3vh,34px)}
  .landing-testimonials .landing-section-head h2{max-width:none}
  .landing-testimonial-grid{margin-top:0}
  .landing-testimonial-card.is-featured{margin-left:0}
}
@media(max-width:900px){
  .landing-hero{grid-template-columns:minmax(0,1fr);
    background:linear-gradient(180deg,rgba(6,14,25,.95) 0%,rgba(6,14,25,.74) 58%,rgba(10,21,36,.94) 100%)}
  .landing-hero-demo{justify-self:stretch;max-width:none}
  .landing-hero-motif{display:none}
  .landing-practice-orbit{display:none}
  .landing-testimonial-grid{grid-template-columns:minmax(0,1fr)}
  .landing-testimonial-card.is-featured{grid-column:auto}
  .landing-faq-list{grid-template-columns:minmax(0,1fr)}
  .landing-faq-item:nth-child(n){border-left:0}
  .landing-faq-item:nth-child(n+2){border-top:1px solid var(--l-line-soft)}
  .landing-break{display:none}
  .landing .landing-cta{min-height:51px;padding:0 28px;border-radius:16px;font-size:16px}
}
@media(max-width:760px){
  body.auth-environment.landing-environment{--landing-orbit-arc-depth:44px}
  .landing-section,.landing-hero{padding-left:20px;padding-right:20px}
  .landing-drills-section{padding-bottom:88px}
  .landing-why-section{padding-top:68px}
  .landing-why-section:before{right:-55vw;width:155vw}
  .landing-narrative-beat{margin-bottom:clamp(38px,6vh,52px)}
  .landing-narrative-beat h2{font-size:clamp(28px,8.5vw,38px)}
  .landing-testimonial-card,.landing-testimonial-card.is-featured{min-height:0;padding:24px}
  .landing-testimonial-card>p,.landing-testimonial-card.is-featured>p{
    font-size:19px;line-height:1.48;margin:30px 0 28px!important}
  .landing-drills{grid-template-columns:minmax(0,1fr)}
  .landing-drill-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .landing-drill-tab{border-left:0;border-top:3px solid transparent}
  .landing-drill-tab:nth-last-child(-n+2){border-bottom:0}
  .landing-drill-tab:nth-child(odd){border-right:1px solid var(--l-line-soft)}
  .landing-drill-tab.is-active{border-left:0;border-top-color:var(--tint)}
  .landing .landing-cta{width:auto;min-height:49px;padding:0 26px;border-radius:15px;
    font-size:15.5px}
  .landing-demo-entry{flex-wrap:wrap}
  .landing-demo-entry input,.landing-demo-entry .primary{width:100%}
}
@media(max-width:420px){
  body.landing-environment>header .landing-header-actions{gap:6px}
  body.landing-environment>header .landing-sign-in{padding:8px 9px}
  body.landing-environment>header .landing-header-actions .landing-header-cta{
    min-height:38px;padding:0 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .landing-drill-tab,.landing-faq-mark:before,.landing-faq-mark:after,
  .landing .landing-cta,.landing .landing-cta:before,.landing-cta-label{transition:none}
  .landing .landing-cta:hover,.landing .landing-cta:active{transform:none}
  .landing .landing-cta[data-action-owned="true"]{outline:2px solid currentColor;outline-offset:3px;transform:none;filter:none}
  .landing .landing-cta[aria-busy="true"]:after{animation:none}
  .landing-testimonials .landing-section-head,.landing-testimonials .landing-testimonial-card{
    opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .landing-testimonial-quote-mark{transform:none!important;transition:none!important}
}
@media (forced-colors:active){
  .landing .landing-cta[data-action-owned="true"]{outline:2px solid Highlight;outline-offset:3px;transform:none;filter:none;box-shadow:none}
}

/* ---- announcements ------------------------------------------------------
   One channel, three weights. The quiet card is the default: docked, not
   modal, and never in the way of the workspace. The dialog is reserved for
   news the student has to see, and reuses the shared app dialog so focus,
   inertness, and reduced motion behave exactly as they do everywhere else. */
.announcement-eyebrow{margin:0 0 6px;color:var(--dim);font-size:11px;font-weight:680;
  letter-spacing:.09em;text-transform:uppercase}
.announcement-actions{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px}
.announcement-cta{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;
  border:1px solid #4d8be6;border-radius:6px;background:var(--accent-strong);color:#fff;
  font-size:14px;font-weight:650;text-decoration:none;line-height:1.35}
.announcement-cta:hover{background:var(--accent-strong);border-color:var(--accent);color:var(--on-accent)}
.announcement-link{color:var(--accent);font-weight:650;text-decoration:none}
.announcement-link:hover{text-decoration:underline}

.announcement-dialog{position:relative;width:min(520px,100%);max-height:calc(100dvh - 40px);overflow:auto;
  padding:26px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);
  box-shadow:0 26px 60px rgba(var(--elev-shade),.34)}
.announcement-dialog h2{margin:0 0 12px;font-size:22px;line-height:1.2}
.announcement-dialog p{margin:0 0 10px;color:var(--dim);line-height:1.65}
.announcement-dialog p.announcement-eyebrow{color:var(--dim)}
.announcement-dialog.is-critical{border-color:var(--line-strong);border-top:3px solid var(--warn)}

/* The quiet card. Docked bottom-right on a workspace-width screen, and a
   full-width sheet once the workspace loses its rails. */
.announcement-note{position:fixed;right:22px;bottom:22px;z-index:19;display:flex;gap:10px;
  width:min(380px,calc(100vw - 44px));padding:18px 18px 16px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);color:var(--text);
  box-shadow:0 20px 46px rgba(var(--elev-shade),.26);
  opacity:0;transform:translateY(14px);transition:opacity .26s ease,transform .3s cubic-bezier(.2,.82,.28,1)}
.announcement-note.is-open{opacity:1;transform:none}
.announcement-note.is-closing{opacity:0;transform:translateY(8px)}
.announcement-note-content{min-width:0}
.announcement-note h2{margin:0 0 6px;font-size:16px;line-height:1.25}
.announcement-note p{margin:0 0 8px;color:var(--dim);font-size:13.5px;line-height:1.6}
.announcement-note p:last-child{margin-bottom:0}
.announcement-note-actions{margin-top:10px}
.announcement-note-close{flex:0 0 auto;align-self:flex-start;margin:-4px -4px 0 0;border:0;background:transparent;
  color:var(--dim);font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.announcement-note-close:hover{color:var(--text);background:var(--panel2)}

.announcement-history{width:min(560px,100%);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;
  padding:26px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);
  box-shadow:0 26px 60px rgba(var(--elev-shade),.34)}
.announcement-history h2{margin:0 0 16px;font-size:22px}
.announcement-history-list{overflow:auto;margin:0 -4px;padding:0 4px}
.announcement-entry{padding:16px 0;border-top:1px solid var(--line)}
.announcement-entry:first-child{border-top:0;padding-top:0}
.announcement-entry h3{margin:0 0 6px;font-size:15px;line-height:1.3}
.announcement-entry p{margin:0 0 8px;color:var(--dim);font-size:13.5px;line-height:1.6}
.announcement-entry p:last-child{margin-bottom:0}
.announcement-entry-meta{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:12px}
.announcement-entry.is-unread h3{position:relative}
.announcement-entry.is-unread h3:before{content:"";position:absolute;left:-13px;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
.announcement-chip{padding:2px 8px;border:1px solid var(--line);border-radius:999px;
  color:var(--dim);font-size:11px;font-weight:680;letter-spacing:.04em}
.announcement-chip.is-critical{border-color:var(--warn);color:var(--warn)}
.announcement-empty{margin:0;color:var(--dim);line-height:1.6}

/* The indicator: a dot on the account control, and one beside the entry that
   opens the record. Nothing counts down, nothing pulses. */
.account-menu-news{display:flex;align-items:center;justify-content:space-between;gap:8px}
.account-menu-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.account-menu-dot[hidden]{display:none}
.account-menu-trigger.has-announcement{position:relative}
.account-menu-trigger.has-announcement:after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--navy-panel)}
@media(max-width:720px){
  .announcement-note{right:12px;left:12px;bottom:12px;width:auto;
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  .announcement-note{transition:opacity .12s linear}
  .announcement-note.is-open{transform:none}
}

/* Course -> Section -> Drugs: the learner-facing curriculum surface. */
.course-card-list{display:grid;gap:10px}
button.course-card{display:flex;align-items:center;justify-content:flex-start;gap:14px;
  width:100%;text-align:left;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);color:inherit;font:inherit;cursor:pointer}
.course-card-body{display:flex;flex-direction:column;gap:4px}
.course-card-body b{font-size:17px}
.course-card-body small,.course-section-open small{color:var(--dim)}
.pill.supplied{color:var(--accent)}
.course-section-list{display:grid;gap:8px}
.course-section-row{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.course-section-open{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left;
  background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.course-section-open:hover b{color:var(--accent)}
.course-study-bar{align-items:center;gap:12px;margin-top:16px}
.course-study-bar small{color:var(--dim)}
.course-drug-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.course-drug-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;
  border-bottom:1px solid var(--line)}
.course-drug-list li>span{display:grid;gap:2px}.course-drug-list small{color:var(--dim)}
.course-source-note{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.course-source-note small{color:var(--dim);text-align:right}
.course-population-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.course-population-card{display:grid;gap:6px;min-height:118px;padding:18px;text-align:left;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);color:inherit;font:inherit;cursor:pointer}
.course-population-card:hover:not(:disabled){border-color:var(--accent);background:var(--panel2)}
.course-population-card:disabled{cursor:not-allowed;opacity:.55}.course-population-card b{font-size:16px}
.course-population-card small,.course-source-summary small{color:var(--dim);line-height:1.45}
.course-population-later{justify-content:flex-end;margin-top:14px}
.course-source-summary{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 4px;background:var(--panel);border-top:1px solid var(--line)}
.course-saved-bar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:16px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel)}

.picker-list{max-height:min(60vh,620px);overflow:auto;display:grid;gap:18px}
.picker-group header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  position:sticky;top:0;background:var(--panel);padding:6px 0;border-bottom:1px solid var(--line)}
.picker-group h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)}
.picker-row{display:flex;align-items:center;gap:10px;padding:8px 4px;cursor:pointer}
.picker-row:hover{background:var(--hover,rgba(127,127,127,.08))}
.picker-row span{display:flex;flex-direction:column}
.picker-row small{color:var(--dim)}
.picker-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;
  padding:12px 0;background:var(--bg)}
@media(max-width:650px){.course-population-options{grid-template-columns:1fr}.course-source-note{display:grid}.course-source-note small{text-align:left}}
.add-course-body{display:grid;gap:14px;max-height:60vh;overflow:auto}
.add-course-group h3{margin:0 0 6px;font-size:13px;color:var(--dim)}

/* In-app dialogs replace prompt/confirm/alert everywhere. */
.ui-dialog{border:1px solid var(--line);border-radius:14px;padding:0;background:var(--panel);
  color:inherit;max-width:min(440px,92vw);width:100%;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.ui-dialog::backdrop{background:rgba(8,10,16,.55);backdrop-filter:blur(2px)}
.ui-dialog form{display:grid;gap:14px;padding:22px 24px}
.ui-dialog-title{margin:0;font-size:19px;line-height:1.3}
.ui-dialog-message{margin:0;color:var(--dim);line-height:1.5}
.ui-dialog-field{display:grid;gap:6px}
.ui-dialog-field span{font-size:13px;color:var(--dim)}
.ui-dialog-field input{width:100%;padding:10px 12px;font-size:15px}
.ui-dialog-hint{margin:-6px 0 0;font-size:13px;color:var(--dim)}
.ui-dialog-error{margin:0;font-size:13px;color:var(--bad,#e5484d)}
.ui-dialog footer{display:flex;justify-content:flex-end;gap:10px;margin-top:2px}
.course-section-name{flex:1;display:block}

.mode-nav-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mode-nav-tools{display:flex;gap:8px}
.study-area-shell-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.study-area-shell-heading .study-breadcrumb{min-width:0}
.study-area-shell-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.area-local-row{display:flex;align-items:center;gap:12px;min-height:20px;margin-bottom:8px}
.area-local-back{display:inline-flex;align-items:center;border:0;background:none;padding:0;color:var(--dim);
  font:inherit;font-size:13px;text-decoration:none;cursor:pointer}
.area-local-back:hover{color:var(--accent)}
.lesson-status-key{display:grid;gap:6px}

/* One header block per page.

   The trail's first step is the way out of the area, so "where am I" and "how
   do I leave" are one line instead of two competing rows. No background band:
   a page header is part of the page, not a toolbar dropped on top of it. */
.area-header{margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--line)}
.area-sibling{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--dim);
  cursor:pointer;white-space:nowrap;text-decoration:none}
.area-sibling:hover{color:var(--accent)}
.area-title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.area-identity{display:flex;align-items:baseline;gap:10px;min-width:0}
.area-identity h1{margin:0;font-size:26px;line-height:1.15}
.area-count{color:var(--dim);font-size:13px;white-space:nowrap}
.area-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:1 1 auto;
  justify-content:flex-end;min-width:0}
/* Persistent controls are a sibling of page identity, never part of it. The
   shell publishes only global obstruction; each learning surface measures and
   composes its own utility height locally. */
.learning-utility-surface{--learning-utility-height:0px;
  --learning-content-sticky-top:calc(var(--content-sticky-top) + var(--learning-utility-height) + var(--sticky-content-gap))}
.learning-utility-bar{position:sticky;top:var(--content-sticky-top);z-index:20;margin:0 0 14px;padding:8px 0 9px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 88%,transparent);
  background:color-mix(in srgb,var(--workspace) 91%,transparent);box-shadow:0 8px 18px rgba(var(--elev-shade),.07);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);backdrop-filter:blur(14px) saturate(1.08)}
.learning-utility-controls{display:flex;align-items:center;gap:10px;min-width:0}
.learning-utility-controls>.search-field{display:grid;grid-template-columns:minmax(180px,1fr) auto;
  grid-template-areas:"control status";align-items:center;gap:10px;flex:1 1 720px;max-width:720px;min-width:0}
.learning-utility-controls>.search-field .search-field-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.learning-utility-controls>.search-field .search-field-control {grid-area:control}
.learning-utility-controls>.search-field .search-field-status{grid-area:status;min-height:0;white-space:nowrap}
.learning-utility-controls>.reference-menu{margin-left:0}
/* Drug reference: dense rows, letter groups, A-Z rail. */
.reference-page{display:block}

.reference-menu{position:relative;flex:0 0 auto}
.reference-menu summary{list-style:none;cursor:pointer;padding:6px 10px;border:1px solid var(--line);
  border-radius:8px;font-size:16px;line-height:1;user-select:none}
.reference-menu summary::-webkit-details-marker{display:none}
.reference-menu-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;gap:6px;
  min-width:210px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  box-shadow:0 16px 40px rgba(0,0,0,.28)}
.reference-menu-panel hr{border:0;border-top:1px solid var(--line);margin:2px 0;width:100%}
.reference-menu-panel .ghost{text-align:left;width:100%}
.reference-filter{display:grid;gap:4px;font-size:13px;color:var(--dim)}
.reference-filter select{width:100%;padding:6px 8px}
.reference-body{display:flex;align-items:flex-start;gap:10px}
.reference-list{flex:1;min-width:0}
.reference-letter-group,.drug-letter-group{scroll-margin-top:calc(var(--app-sticky-obstruction) + 24px)}
.reference-letter-heading,.drug-letter-heading{position:sticky;top:var(--app-sticky-obstruction);z-index:10;margin:0;padding:8px 0 4px;
  font-size:12px;letter-spacing:.14em;color:var(--dim);background:var(--workspace);
  border-bottom:1px solid var(--line)}
.reference-row{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(110px,.6fr)
  minmax(145px,.8fr) auto;gap:14px;align-items:center;padding:10px 8px;border-bottom:1px solid var(--line)}
.reference-row:hover{background:var(--panel2)}
.reference-row-copy{display:grid;gap:2px;min-width:0}
.reference-row-copy>span,.reference-row-copy>small{color:var(--dim);font-size:13px}
.reference-row-actions{display:flex;gap:10px;justify-content:flex-end;white-space:nowrap}
.reference-rail,.drug-rail{position:sticky;top:var(--content-sticky-top);display:flex;flex-direction:column;gap:1px;
  flex:0 0 26px;align-items:center;padding:4px 0;max-height:calc(100dvh - var(--content-sticky-top) - 8px)}
.reference-rail button,.reference-rail span{background:none;border:0;padding:0;width:22px;height:16px;
  font:inherit;font-size:11px;line-height:16px;text-align:center;border-radius:4px}
.reference-rail button{color:var(--dim);cursor:pointer}
.reference-rail button:hover{background:var(--panel2);color:inherit}
.reference-rail button.on{background:var(--accent);color:#fff;font-weight:700}
.reference-rail span{color:var(--line);cursor:default}
.learning-utility-surface :is(.reference-letter-group,.drug-letter-group){scroll-margin-top:calc(var(--learning-content-sticky-top) + 16px)}
.learning-utility-surface :is(.reference-letter-heading,.drug-letter-heading){top:var(--learning-content-sticky-top)}
.learning-utility-surface :is(.reference-rail,.drug-rail){top:var(--learning-content-sticky-top);
  max-height:calc(100dvh - var(--learning-content-sticky-top) - 8px)}
.study-mode-intro{max-width:760px;color:var(--dim);margin:12px 0 18px}
.drug-list{flex:1;min-width:0}
.drug-row{border-bottom:1px solid var(--line)}
.drug-row-main{display:grid;grid-template-columns:minmax(180px,1.1fr) minmax(120px,1fr) minmax(140px,1fr);
  gap:16px;align-items:baseline;width:100%;text-align:left;background:none;border:0;
  padding:9px 8px;color:inherit;font:inherit;cursor:pointer}
.drug-row-main:hover{background:var(--panel2)}
.drug-row-name{font-weight:600}
.drug-row-brands,.drug-row-class{color:var(--dim);font-size:14px}
.drug-row.is-open{background:var(--panel2)}
.drug-row.is-open .drug-row-name{color:var(--accent)}
.monograph{padding:4px 14px 18px}
.monograph-actions{display:flex;gap:8px;margin-top:14px}
.terminology-reference-row{border-bottom:1px solid var(--line)}
.terminology-index-summary{margin:2px 0 12px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel2);color:var(--dim);font-size:13px}
.terminology-reference-page .reference-menu-panel{width:min(420px,calc(100vw - 28px));max-height:min(680px,75dvh);
  overflow:auto;gap:14px;padding:14px}
.terminology-filter-group{display:grid;gap:7px}
.terminology-filter-group h3{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.terminology-filter-group p{display:none;margin:0;color:var(--dim);font-size:12px}
.terminology-filter-group.is-disabled p{display:block}
.terminology-filter-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.terminology-filter-option{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;
  padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);
  font:inherit;font-size:12px;text-align:left;cursor:pointer;text-transform:capitalize}
.terminology-filter-option span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.terminology-filter-option small{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.terminology-filter-option:hover{border-color:var(--accent);background:var(--panel2)}
.terminology-filter-option.is-selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.terminology-filter-option:disabled{opacity:.42;cursor:not-allowed}
.terminology-row-main{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(280px,1.7fr) minmax(150px,.7fr);
  gap:16px;align-items:baseline;width:100%;padding:10px 8px;border:0;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer;white-space:normal}
.terminology-row-main:hover{background:var(--panel2)}
.terminology-row-name{font-weight:650}
.terminology-row-definition{color:var(--dim);font-size:14px;line-height:1.4}
.terminology-row-meta{display:grid;gap:2px;color:var(--dim);font-size:12px;text-transform:capitalize}
.terminology-row-meta small{font-size:11px}
.terminology-reference-row.is-open{background:var(--panel2)}
.terminology-reference-row.is-open .terminology-row-name{color:var(--accent)}
.terminology-reference-detail{padding:5px 14px 18px;color:var(--dim)}
.terminology-reference-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 24px;
  padding-top:14px;border-top:1px solid var(--line)}
.terminology-reference-grid section{min-width:0}
.terminology-reference-grid h4{margin:0 0 5px;color:var(--text);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.terminology-reference-grid p{margin:0;line-height:1.5}
.terminology-facts{display:grid;gap:5px;margin:0;padding-left:18px}
.terminology-facts li span{margin-right:8px;color:var(--dim)}
.terminology-facts li b{margin-right:8px;color:var(--text)}
.conversion-index-summary{margin:2px 0 12px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel2);color:var(--dim);font-size:13px}
.conversion-reference-page .reference-menu-panel{width:min(440px,calc(100vw - 28px));gap:14px;padding:14px}
.conversion-filter-group{display:grid;gap:7px}
.conversion-filter-group h3{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.conversion-filter-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.conversion-filter-option{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;
  padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);
  font:inherit;font-size:12px;text-align:left;cursor:pointer}
.conversion-filter-option span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conversion-filter-option small{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.conversion-filter-option:hover{border-color:var(--accent);background:var(--panel2)}
.conversion-filter-option.is-selected{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.conversion-reference-row{border-bottom:1px solid var(--line)}
.conversion-row-main{display:grid;grid-template-columns:minmax(210px,1.05fr) minmax(260px,1.4fr) minmax(155px,.72fr);
  gap:16px;align-items:baseline;width:100%;padding:10px 8px;border:0;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer;white-space:normal}
.conversion-row-main:hover{background:var(--panel2)}
.conversion-row-name{font-weight:650;font-variant-numeric:tabular-nums}
.conversion-row-note{color:var(--dim);font-size:14px;line-height:1.4}
.conversion-row-meta{display:grid;gap:2px;color:var(--dim);font-size:12px}
.conversion-row-meta small{font-size:11px}
.conversion-reference-row.is-open{background:var(--panel2)}
.conversion-reference-row.is-open .conversion-row-name{color:var(--accent)}
.conversion-reference-detail{padding:5px 14px 18px;color:var(--dim)}
.conversion-reference-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px 24px;
  padding-top:14px;border-top:1px solid var(--line)}
.conversion-reference-grid h4{margin:0 0 5px;color:var(--text);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.conversion-reference-grid p{margin:0;line-height:1.5}
.conversion-reference-note{grid-column:1/-1}
.conversion-rail{flex-basis:42px;gap:3px}
.conversion-rail button{width:40px;height:22px;line-height:22px}
.drug-rail button,.drug-rail span{background:none;border:0;padding:0;width:22px;height:16px;
  font:inherit;font-size:11px;line-height:16px;text-align:center;border-radius:4px}
.drug-rail button{color:var(--dim);cursor:pointer}
.drug-rail button:hover{background:var(--panel2);color:inherit}
.drug-rail button.on{background:var(--accent);color:#fff;font-weight:700}
.drug-rail span{color:var(--line);cursor:default}
@media (max-width:1100px){
  .terminology-row-main{grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr)}
  .terminology-row-meta{grid-column:2;display:flex;gap:8px;align-items:baseline}
  .conversion-row-main{grid-template-columns:minmax(190px,.8fr) minmax(0,1.2fr)}
  .conversion-row-meta{grid-column:2;display:flex;gap:8px;align-items:baseline}
}
@media (max-width:720px){
  .drug-row-main{grid-template-columns:1fr;gap:2px}
  .terminology-row-main{grid-template-columns:1fr;gap:3px}
  .terminology-row-meta{grid-column:1}
  .conversion-row-main{grid-template-columns:1fr;gap:3px}
  .conversion-row-meta{grid-column:1}
  .drug-rail,.reference-rail{display:none}
  .reference-row{grid-template-columns:1fr;gap:6px}
  .reference-row-actions{justify-content:flex-start;flex-wrap:wrap}
}
@media (max-width:520px){
  .learning-utility-bar{padding-block:6px 7px}
  .learning-utility-controls>.search-field{display:block}
  .learning-utility-controls>.search-field .search-field-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

/* .card draws its own top rule, so a page header directly above it would
   double the line. One separator, not two. */
.area-header+.card{border-top:0;padding-top:2px}
.catalog-row-shell{position:relative;border-bottom:1px solid var(--line)}
.catalog-row-shell .catalog-entry-row{border-bottom:0;padding-right:112px}
.course-canonical-link{display:flex;align-items:center;justify-content:space-between;margin:14px 0;padding:14px 17px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:13px;background:var(--accent-soft);color:var(--text);text-decoration:none}.course-canonical-link span{display:grid}.course-canonical-link small{color:var(--dim)}.course-canonical-link i{color:var(--accent);font-style:normal}
.lesson-focus{outline:2px solid color-mix(in srgb,var(--focus) 45%,transparent);outline-offset:2px;background:color-mix(in srgb,var(--accent) 4%,transparent)}
@media(max-width:650px){.catalog-row-shell .catalog-entry-row{padding-right:8px;padding-bottom:48px}}

/* Search is identified by its label, icon, and surface rather than an outline. */
.search-field{display:grid;gap:5px;min-width:0;color:var(--text)}
.search-field--reference,.search-field--catalog{--search-field-height:46px}
.search-field--compact{--search-field-height:42px}
.area-actions>.search-field--reference{flex:0 1 320px;min-width:180px}
.card>.search-field--compact{margin-bottom:14px}
.search-field-label{font-size:13px;font-weight:650;color:var(--dim)}
.search-field-control{position:relative;display:flex;align-items:center;height:var(--search-field-height);min-height:var(--search-field-height);overflow:visible;
  border:0;border-radius:13px;background:var(--surface);color:var(--text);
  transition:background-color var(--theme-paint-duration,.15s) ease}
.search-field-control:focus-within{background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.search-field-control:focus-within .search-field-icon{color:var(--accent)}
.search-field-icon{position:relative;z-index:1;flex:0 0 auto;width:19px;height:19px;margin-left:13px;color:var(--dim);fill:currentColor}
.search-field input{position:relative;z-index:1;min-width:0;flex:1;width:100%;height:var(--search-field-height);border:0;
  outline:0;background:transparent;color:var(--text);font:inherit;font-size:15px;padding:0 8px}
.search-field input::placeholder{color:var(--dim);opacity:.9}
.search-field-clear{position:relative;z-index:1;min-width:34px;min-height:34px;margin-right:5px;border:0;border-radius:8px;
  background:transparent;color:var(--dim);font:inherit;font-size:13px;cursor:pointer;transition:color var(--theme-paint-duration,.15s) ease,background-color var(--theme-paint-duration,.15s) ease}
.search-field-clear:hover{background:var(--panel2);color:var(--text)}
.search-field-clear:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.search-field:not(.is-populated) .search-field-clear{visibility:hidden;pointer-events:none}
.search-field-status{display:flex;justify-content:space-between;gap:10px;min-height:18px;margin:0;color:var(--dim);font-size:13px;line-height:18px}
.search-field-message:empty,.search-field-count:empty{display:none}
html.workspace-dark .search-field-control{background:var(--navy-panel)}
@media(max-width:650px){.search-field-clear{position:absolute;right:1px;top:50%;width:44px;min-width:44px;height:44px;min-height:44px;
  margin:0;transform:translateY(-50%)}.search-field input{padding-right:49px}}
@media(prefers-reduced-motion:reduce){.search-field-control,.search-field-clear{transition:none}}

/* Study Areas.

   The page is a list of places to go. It does not need a hero question, a
   kicker above every heading, a sentence explaining each section, or a count
   of its own rows. Borders are load-bearing or they are noise: one hairline
   between rows, one outline per card, and never a bordered box inside another
   bordered box. */
.catalog-page{display:block}
.catalog-title{margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--line)}
.catalog-title h1{margin:0;font-size:26px;line-height:1.15;letter-spacing:-.02em}

.catalog-count{margin:0;color:var(--dim);font-size:13px;flex:0 0 auto}
.catalog-count:empty{display:none}

/* The plans block is a section of the page, not a card floating on one. */
.study-plans-catalog{margin-top:34px;padding:0;border:0;border-radius:0;background:none}
.study-plan-preview{border:0}

.catalog-featured,.catalog-domain,.study-plans-catalog{margin:0 0 30px}
main a.catalog-featured-card,.catalog-featured-card{border:0}
.catalog-featured-card::before{display:none}
.catalog-featured h2,.catalog-domain h2,.study-plans-catalog h2{
  margin:0 0 12px;font-size:15px;font-weight:650;letter-spacing:-.01em}
.study-plans-catalog>header{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:12px}
.study-plans-catalog>header h2{margin:0}
.catalog-domain h2{color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase}
.catalog-entry-list{border-top:1px solid var(--line)}
.plan-picker{display:grid;gap:2px;max-height:52vh;overflow:auto;margin:4px 0 2px}
.plan-picker-row{display:flex;align-items:center;gap:10px;padding:8px 4px;cursor:pointer;
  border-bottom:1px solid var(--line)}
.plan-picker-row:hover{background:var(--panel2)}
.plan-picker-row span{display:flex;flex-direction:column}
.plan-picker-row small{color:var(--dim);font-size:12px}

/* Your curriculum is a section like any other: a plain heading over a row.
   Moving it up the page only helps if it stops looking like a different app. */
.study-curriculum-section{margin:0 0 30px;padding:0;border:0;border-radius:0;background:none}
.study-curriculum-section>h2{display:block;margin:0 0 12px;padding:0;border-radius:0;
  background:none;color:var(--text);font-size:15px;font-weight:650;letter-spacing:-.01em;
  text-transform:none}
body.workspace-dark.workspace-environment main .study-curriculum-section{background:none}
.study-curriculum-section .curriculum-card{min-height:0;padding:14px 6px;gap:14px;
  border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0;background:none;box-shadow:none}
.study-curriculum-section .curriculum-card:hover{background:var(--panel2)}

/* Study-plan request state changes inside one permanent catalog slot. */
.study-plan-loading{display:grid;gap:9px;min-height:62px;padding:15px;background:var(--surface)}
.study-plan-loading span{display:block;height:12px;border-radius:999px;
  background:linear-gradient(90deg,var(--panel2),color-mix(in srgb,var(--panel2) 55%,var(--surface)),var(--panel2));
  background-size:200% 100%;animation:study-plan-loading 1.2s ease-in-out infinite}
.study-plan-loading span:first-child{width:38%}.study-plan-loading span:last-child{width:22%}
.study-plan-error{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:62px;padding:12px 15px;background:var(--surface)}
.study-plan-error>span{display:grid;gap:2px}.catalog-status-unavailable{color:var(--dim)}
@keyframes study-plan-loading{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.study-plan-loading span{animation:none}}
@media(max-width:650px){.study-plan-error{align-items:flex-start;flex-direction:column}}
.study-plan-lifecycle-row{color:var(--text)}
.study-plan-row-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-width:650px){.study-plan-lifecycle-row{align-items:flex-start;flex-direction:column}.study-plan-row-actions{width:100%}}


/* ============================================================================
   THE STUDY COMPANION

   A rig, not a sprite sheet. Every pose below is a transform on a grouped SVG
   node. It paints itself (Constitution 3.1) -- nothing here supplies colour.

   TWO THINGS THIS FILE IS BUILT AROUND.

   First, the ambient layer is almost empty. An earlier version offered a hop, a
   march, a stretch and a glance on a rolling clock, and that is a fidget rather
   than a companion. What is left running on its own is a one percent breath and
   a blink. Everything with personality in it happens because the learner
   brought their pointer to the character.

   Second, the greeting is a bounded performance. Three hops, then still --
   while the pointer is still on it. That restraint is the entire difference
   between something that noticed you and something that reacts to your cursor,
   and the latch that enforces it lives in the JS.

   The drawing is constructed in quarter view, so the near arm is larger and in
   front, the far arm smaller and behind, and the legs are unequal. Drag direction
   mirrors the completed drawing as one object; nothing inside the rig mirrors
   independently, so that authored asymmetry stays coherent in either direction.

   See docs/architecture/COMPANION_MOTION_SPECIFICATION.md and
   COMPANION_REFERENCE_TEARDOWN.md.
   ========================================================================= */
.study-companion{
  --companion-x:12px;--companion-y:12px;
  --companion-facing:1;
  --companion-lean:0deg;--companion-drag-sx:1;--companion-drag-sy:1;
  position:fixed;left:0;top:0;width:120px;height:120px;z-index:18;
  transform:translate3d(var(--companion-x),var(--companion-y),0);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:opacity .5s ease,filter .5s ease;
}
.study-companion.is-held{cursor:grabbing}
/* THE STABLE HIT REGION. The box is fixed at 120px and the drawing takes no
   pointer events, so the region cannot move while the character is mid-hop. A
   hit area that tracked the artwork would let the character hop out from under
   the cursor, fire a leave, re-arm, land back under it, fire an enter, and hop
   again -- forever. */
.study-companion .companion-art{
  display:block;width:100%;height:100%;overflow:visible;pointer-events:none;
  transform:scaleX(var(--companion-facing));transform-origin:center;
}

/* --- the rig ------------------------------------------------------------- */
/* Every group that scales or rotates declares `transform-box:fill-box`. Without
   it a percentage origin resolves against the 48x48 viewport instead of the
   element, and every origin below would silently be wrong. */
/* Groups whose pivot is a proportion of themselves use fill-box. The LIMBS do
   not appear here: their origin is a joint, an absolute coordinate written onto
   the element from COMPANION_JOINTS, and overriding it from CSS is exactly the
   drift this architecture exists to prevent. The contract test enforces that. */
.companion-world,.companion-tilt,.companion-lean,.companion-project,.companion-turn,.companion-face,.companion-mark,
.companion-eyes-rest,.companion-eyes-active{transform-box:fill-box}

.companion-world{transform-origin:50% 100%}
.companion-body{transform-box:fill-box;transform-origin:50% 96%}
.companion-lean{transform-origin:50% 100%;
  transform:rotate(var(--companion-lean,0deg))
            scale(var(--companion-drag-sx,1),var(--companion-drag-sy,1))}
/* The projection layer. A turn is not a rotation of a flat drawing -- it is the
   far side of a solid compressing toward the near side. Scaling X about an
   origin set over the NEAR shoulder does exactly that, which is why the origin
   below is at 76% and not at the middle. */
.companion-project{transform-origin:76% 55%}
/* The support point, not the centre. A centre-origin squash moves the top and
   the bottom together, so the feet appear to sink through the floor. */
.companion-turn{transform-origin:50% 50%}
.companion-face{transform-origin:50% 50%}
.companion-shadow{transform-origin:center;transform-box:fill-box}
/* The knees rest slightly bent. A leg locked at a straight zero reads as a
   mannequin, leaves landing recovery nowhere to go, and lets interpolation
   wander into hyperextension. The artwork still reads as one continuous stub. */
.j-kneeNear,.j-kneeFar{transform:rotate(-5deg)}
.companion-eyes-active{opacity:0}

/* --- rest ---------------------------------------------------------------- */
/* Seven tenths of a percent over 4.6s. The ceiling is an absolute excursion in
   screen pixels rather than a percentage of the character, so growing the
   drawing means shrinking the fraction -- the learner's periphery does not care
   how big the thing breathing in it is. The shadow does not join in: a ground shadow that
   pulses with a pair of lungs is the clearest possible tell that this is a
   drawing rather than a body. Breathing sits on its own node above the deform
   so a hop multiplies with it instead of restarting it from phase zero. */
.companion-breathe{animation:companion-breathe 4.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes companion-breathe{
  0%,100%{transform:scale(1,1)}
  42%{transform:scale(1.007,.993)}
}
.companion-head{animation:companion-breathe-head 4.6s cubic-bezier(.45,0,.55,1) infinite;
  animation-delay:.06s}
@keyframes companion-breathe-head{
  0%,100%{transform:translateY(0)}
  42%{transform:translateY(-.056px)}
}

/* A blink is 165ms of eyelid, not a six-second metronome eased across its whole
   period. The interval is randomised in JS as a renewal process, because a
   fixed cadence is recognised as a loop inside a minute. */
.study-companion.is-blink .companion-eyes-rest{animation:companion-blink .165s both}
@keyframes companion-blink{
  0%{transform:scaleY(1);animation-timing-function:cubic-bezier(.4,0,1,1)}
  33%{transform:scaleY(.12);animation-timing-function:linear}
  48%{transform:scaleY(.12);animation-timing-function:cubic-bezier(0,0,.2,1)}
  100%{transform:scaleY(1)}
}

/* --- the greeting -------------------------------------------------------- */
/* THREE HOPS, AND THE LEGS FOLD.

   Every leg now has a knee, so the tuck is a real fold rather than a rotation
   plus a vertical squash. Hip flexion is negative on screen for both legs and
   knee flexion positive for both -- the two sides differ in magnitude, never in
   sign, because both motions are sagittal. Arms are the opposite: lifting is
   lateral, so the near arm rises on negative and the far arm on positive.

   The order is proximal to distal, which is how a body actually leaves the
   ground: the pelvis lowers, hips and knees load, hips extend first, knees
   follow, and only then does contact release. Landing runs it backwards -- the
   leg tips arrive, knees and hips flex beneath the body's continuing momentum,
   the torso compresses, and the head arrives last.

   Timed off the reference recording rather than invented: 683ms hop to hop, of
   which 417ms is action and 267ms is rest. It rises in 117ms, HANGS for 133ms,
   and comes down over 167ms -- fast up, long float, unhurried landing. The
   earlier 760ms continuous version was nearly twice as slow with no rest
   between reps, which is why it read as laboured rather than buoyant.

   Every channel starts at a different moment:
   hips at +20ms, spine at +30, knees at +50, head at +60, clavicles at +70,
   shoulders at +90. The hierarchy gives spatial inheritance for free. It gives
   temporal overlap for nothing -- that has to be authored, and this is it.

   Angles are stylised recommendations bounded by the hard limits in
   COMPANION_RIG, and the contract test samples the whole interpolation rather
   than the keyframes alone. */
.study-companion.is-hop .companion-world{animation:companion-hop-world .65s 3 both}
.study-companion.is-hop .companion-torso{
  animation:companion-hop-torso .65s 3 both;animation-delay:.04s}
.study-companion.is-hop .companion-shadow{animation:companion-hop-shadow .65s 3 both}
.study-companion.is-hop .j-hipNear{animation:companion-hop-hipNear .65s 3 both;animation-delay:.02s}
.study-companion.is-hop .j-hipFar{animation:companion-hop-hipFar .65s 3 both;animation-delay:.02s}
.study-companion.is-hop .j-kneeNear{animation:companion-hop-kneeNear .65s 3 both;animation-delay:.05s}
.study-companion.is-hop .j-kneeFar{animation:companion-hop-kneeFar .65s 3 both;animation-delay:.05s}
.study-companion.is-hop .j-spine{animation:companion-hop-spine .65s 3 both;animation-delay:.03s}
.study-companion.is-hop .j-neck{animation:companion-hop-neck .65s 3 both;animation-delay:.06s}
.study-companion.is-hop .j-clavicleNear{
  animation:companion-hop-clavicleNear .65s 3 both;animation-delay:.07s}
.study-companion.is-hop .j-clavicleFar{
  animation:companion-hop-clavicleFar .65s 3 both;animation-delay:.07s}
.study-companion.is-hop .j-shoulderNear{
  animation:companion-hop-shoulderNear .65s 3 both;animation-delay:.09s}
.study-companion.is-hop .j-shoulderFar{
  animation:companion-hop-shoulderFar .65s 3 both;animation-delay:.09s}

@keyframes companion-hop-world{
  0%{transform:translateY(0px)}
  2%{transform:translateY(-0.6px)}
  4.6%{transform:translateY(-3.5px)}
  10%{transform:translateY(-6.2px)}
  18%{transform:translateY(-7.6px)}
  28%{transform:translateY(-7.6px)}
  38.5%{transform:translateY(-5.5px)}
  52%{transform:translateY(-2.5px)}
  64%{transform:translateY(0px)}
  70%{transform:translateY(0.9px)}
  78%{transform:translateY(0.2px)}
  100%{transform:translateY(0px)}
}
@keyframes companion-hop-hipNear{
  0%{transform:rotate(3deg)}
  2%{transform:rotate(5deg)}
  4.6%{transform:rotate(10deg)}
  10%{transform:rotate(14deg)}
  18%{transform:rotate(16deg)}
  28%{transform:rotate(16deg)}
  38.5%{transform:rotate(14deg)}
  52%{transform:rotate(8deg)}
  64%{transform:rotate(4deg)}
  70%{transform:rotate(10deg)}
  78%{transform:rotate(6deg)}
  100%{transform:rotate(3deg)}
}
@keyframes companion-hop-kneeNear{
  0%{transform:rotate(-5deg)}
  2%{transform:rotate(-16deg)}
  4.6%{transform:rotate(-45deg)}
  10%{transform:rotate(-85deg)}
  18%{transform:rotate(-105deg)}
  28%{transform:rotate(-105deg)}
  38.5%{transform:rotate(-92deg)}
  52%{transform:rotate(-55deg)}
  64%{transform:rotate(-20deg)}
  70%{transform:rotate(-46deg)}
  78%{transform:rotate(-26deg)}
  100%{transform:rotate(-5deg)}
}
@keyframes companion-hop-hipFar{
  0%{transform:rotate(3deg)}
  2%{transform:rotate(4deg)}
  4.6%{transform:rotate(8deg)}
  10%{transform:rotate(12deg)}
  18%{transform:rotate(13deg)}
  28%{transform:rotate(13deg)}
  38.5%{transform:rotate(11deg)}
  52%{transform:rotate(7deg)}
  64%{transform:rotate(3deg)}
  70%{transform:rotate(8deg)}
  78%{transform:rotate(5deg)}
  100%{transform:rotate(3deg)}
}
@keyframes companion-hop-kneeFar{
  0%{transform:rotate(-5deg)}
  2%{transform:rotate(-15deg)}
  4.6%{transform:rotate(-40deg)}
  10%{transform:rotate(-78deg)}
  18%{transform:rotate(-98deg)}
  28%{transform:rotate(-98deg)}
  38.5%{transform:rotate(-86deg)}
  52%{transform:rotate(-50deg)}
  64%{transform:rotate(-18deg)}
  70%{transform:rotate(-42deg)}
  78%{transform:rotate(-24deg)}
  100%{transform:rotate(-5deg)}
}
@keyframes companion-hop-spine{
  0%{transform:rotate(0deg)}
  2%{transform:rotate(1deg)}
  4.6%{transform:rotate(0deg)}
  10%{transform:rotate(0.5deg)}
  18%{transform:rotate(1.5deg)}
  28%{transform:rotate(1.5deg)}
  38.5%{transform:rotate(1deg)}
  52%{transform:rotate(0deg)}
  64%{transform:rotate(2deg)}
  70%{transform:rotate(4deg)}
  78%{transform:rotate(1deg)}
  100%{transform:rotate(0deg)}
}
@keyframes companion-hop-neck{
  0%{transform:rotate(0deg)}
  2%{transform:rotate(0.5deg)}
  4.6%{transform:rotate(1.2deg)}
  10%{transform:rotate(0deg)}
  18%{transform:rotate(-1deg)}
  28%{transform:rotate(-1deg)}
  38.5%{transform:rotate(-0.5deg)}
  52%{transform:rotate(0.5deg)}
  64%{transform:rotate(1.5deg)}
  70%{transform:rotate(2.5deg)}
  78%{transform:rotate(1deg)}
  100%{transform:rotate(0deg)}
}
@keyframes companion-hop-shoulderNear{
  0%{transform:rotate(0deg)}
  2%{transform:rotate(2deg)}
  4.6%{transform:rotate(-12deg)}
  10%{transform:rotate(-32deg)}
  18%{transform:rotate(-45deg)}
  28%{transform:rotate(-45deg)}
  38.5%{transform:rotate(-38deg)}
  52%{transform:rotate(-18deg)}
  64%{transform:rotate(-2deg)}
  70%{transform:rotate(5deg)}
  78%{transform:rotate(2deg)}
  100%{transform:rotate(0deg)}
}
@keyframes companion-hop-shoulderFar{
  0%{transform:rotate(0deg)}
  2%{transform:rotate(-2deg)}
  4.6%{transform:rotate(11deg)}
  10%{transform:rotate(30deg)}
  18%{transform:rotate(42deg)}
  28%{transform:rotate(42deg)}
  38.5%{transform:rotate(35deg)}
  52%{transform:rotate(16deg)}
  64%{transform:rotate(2deg)}
  70%{transform:rotate(-4deg)}
  78%{transform:rotate(-2deg)}
  100%{transform:rotate(0deg)}
}
@keyframes companion-hop-clavicleNear{
  0%{transform:rotate(0deg)}
  2%{transform:rotate(0deg)}
  4.6%{transform:rotate(1deg)}
  10%{transform:rotate(4deg)}
  18%{transform:rotate(7deg)}
  28%{transform:rotate(7deg)}
  38.5%{transform:rotate(6deg)}
  52%{transform:rotate(3deg)}
  64%{transform:rotate(0deg)}
  70%{transform:rotate(0deg)}
  78%{transform:rotate(0deg)}
  100%{transform:rotate(0deg)}
}
@keyframes companion-hop-clavicleFar{
  0%{transform:rotate(0deg)}
  2%{transform:rotate(0deg)}
  4.6%{transform:rotate(-1deg)}
  10%{transform:rotate(-4deg)}
  18%{transform:rotate(-7deg)}
  28%{transform:rotate(-7deg)}
  38.5%{transform:rotate(-6deg)}
  52%{transform:rotate(-3deg)}
  64%{transform:rotate(0deg)}
  70%{transform:rotate(0deg)}
  78%{transform:rotate(0deg)}
  100%{transform:rotate(0deg)}
}
@keyframes companion-hop-torso{
  0%{transform:scale(1,1)}
  2%{transform:scale(1.02,0.98)}
  4.6%{transform:scale(0.97,1.031)}
  10%{transform:scale(0.985,1.015)}
  18%{transform:scale(0.99,1.01)}
  28%{transform:scale(0.99,1.01)}
  38.5%{transform:scale(0.99,1.01)}
  52%{transform:scale(1.01,0.99)}
  64%{transform:scale(1.06,0.943)}
  70%{transform:scale(1.08,0.926)}
  78%{transform:scale(0.99,1.01)}
  100%{transform:scale(1,1)}
}
@keyframes companion-hop-shadow{
  0%{transform:scaleX(1);opacity:0.26}
  2%{transform:scaleX(0.99);opacity:0.26}
  4.6%{transform:scaleX(0.9);opacity:0.24}
  10%{transform:scaleX(0.8);opacity:0.21}
  18%{transform:scaleX(0.74);opacity:0.2}
  28%{transform:scaleX(0.74);opacity:0.2}
  38.5%{transform:scaleX(0.8);opacity:0.21}
  52%{transform:scaleX(0.9);opacity:0.24}
  64%{transform:scaleX(1.03);opacity:0.27}
  70%{transform:scaleX(1.05);opacity:0.27}
  78%{transform:scaleX(1);opacity:0.26}
  100%{transform:scaleX(1);opacity:0.26}
}

/* THE EXTRA TURN. Not a rotate() -- the far side of a solid compressing toward
   the near side is what a body actually does when it turns away from you. It
   runs once across the whole performance rather than per hop: the character
   leans into the greeting, holds that engagement, and releases at the end. */
.study-companion.is-hop .companion-project{
  animation:companion-project 1.95s cubic-bezier(.4,0,.3,1) both}
.study-companion.is-hop .companion-turn{
  animation:companion-project-face 1.95s cubic-bezier(.4,0,.3,1) both}
.study-companion.is-hop .companion-mark{
  animation:companion-project-mark 1.95s cubic-bezier(.4,0,.3,1) both}
@keyframes companion-project{
  0%{transform:scaleX(1)}10%,86%{transform:scaleX(.978)}100%{transform:scaleX(1)}
}
@keyframes companion-project-face{
  0%{transform:translateX(0)}10%,86%{transform:translateX(.75px)}100%{transform:translateX(0)}
}
@keyframes companion-project-mark{
  0%{transform:translateX(0)}10%,86%{transform:translateX(.45px)}100%{transform:translateX(0)}
}

/* THE EXPRESSION SWAP. At rest the face is an asymmetric pair of capsules --
   quiet, and the only pharmacy in the whole drawing. During the greeting it
   becomes two closed curved eyes, and the creature stops being a readout and
   starts being a character. Rest is identity; this is emotion. */
.study-companion.is-hop .companion-eyes-rest{animation:companion-eyes-out 1.95s both}
.study-companion.is-hop .companion-eyes-active{animation:companion-eyes-in 1.95s both}
@keyframes companion-eyes-out{0%{opacity:1}5%,92%{opacity:0}100%{opacity:1}}
@keyframes companion-eyes-in{0%{opacity:0}5%,92%{opacity:1}100%{opacity:0}}

/* Dozing: the breath halves again and the eyes close most of the way. No snore,
   no twitch -- a periodic flourish on a sleeping character is motion onset in a
   learner's periphery, which is the one thing the attention evidence is
   unambiguous about. */
.study-companion.is-doze .companion-breathe{
  animation:companion-doze 6s cubic-bezier(.45,0,.55,1) infinite}
.study-companion.is-doze .companion-head{animation:none;transform:none}
.study-companion.is-doze .companion-eyes-rest{opacity:0}
.study-companion.is-doze .companion-eyes-active{opacity:1}
.study-companion.is-doze{opacity:.72}
@keyframes companion-doze{
  0%,100%{transform:scale(1,1)}
  42%{transform:scale(1.006,.994)}
}


/* RULE ONE. A live activity owns the learner's attention completely.

   An earlier version paused every animation here. That was the right intent and
   the wrong mechanism: pausing freezes the character mid-keyframe in a pose
   nobody designed -- a half-blink, an arm caught mid-swing. The problem was
   never stillness. It was stillness in an undesigned pose.

   So the character SNAPS to a waiting pose instead, reached without a
   transition, because a settle animating next to a freshly painted question is
   motion onset in the periphery. Hover is dead here too: a cursor drifting over
   the companion mid-question must do nothing at all. */
body.activity-in-play .study-companion{
  opacity:.55;filter:saturate(.6);pointer-events:none;
}
body.activity-in-play .study-companion *{animation:none !important;transition:none !important}
body.activity-in-play .companion-world,
body.activity-in-play .companion-project,
body.activity-in-play .companion-breathe,
body.activity-in-play .companion-torso,
body.activity-in-play .companion-head,
body.activity-in-play .companion-turn,
body.activity-in-play .companion-face,
body.activity-in-play .companion-mark,
body.activity-in-play .companion-body,
body.activity-in-play .companion-pelvis,
body.activity-in-play .companion-lean{transform:none !important}
/* The waiting pose is designed, and the knees keep their neutral bend: a leg
   snapped to a locked zero reads as a mannequin, and that is the pose a learner
   stares at for the whole question. */
body.activity-in-play .companion-pose{transform:none !important}
body.activity-in-play .j-kneeNear,
body.activity-in-play .j-kneeFar{transform:rotate(-5deg) !important}
body.activity-in-play .companion-eyes-rest{opacity:1 !important}
body.activity-in-play .companion-eyes-active{opacity:0 !important}
body.activity-in-play .companion-shadow{transform:none !important;opacity:.26 !important}

/* Reduced motion is prevented, not shortened -- but the greeting is not simply
   deleted. The eyes still close and the body still gives a couple of percent of
   compression, so the character acknowledges the learner without travelling
   through space. Dragging still repositions it, because that is functional and
   directly controlled; every decorative consequence of the drag goes. */
@media (prefers-reduced-motion:reduce){
  .study-companion *{animation:none !important;transition:none !important}
  .study-companion{transition:none}
  .companion-lean{transform:none}
  .study-companion.is-hop .companion-torso{
    animation:companion-greet-quiet 1.2s ease-in-out !important}
  .study-companion.is-hop .companion-eyes-rest{opacity:0}
  .study-companion.is-hop .companion-eyes-active{opacity:1}
}
@keyframes companion-greet-quiet{
  0%,100%{transform:scale(1,1)}
  30%,60%{transform:scale(1.02,.9804)}
}

/* The reduced-motion acknowledgement, and it is a real reply rather than the
   absence of one: the eyes close, the body gives two percent of compression,
   and nothing travels through space. Someone who asked for less motion still
   gets greeted. */
.study-companion.is-quiet .companion-torso{
  animation:companion-greet-quiet .7s ease-in-out both}
.study-companion.is-quiet .companion-eyes-rest{opacity:0}
.study-companion.is-quiet .companion-eyes-active{opacity:1}
/* "Still" keeps the character and stops the clocks. */
.study-companion.is-still .companion-world,
.study-companion.is-still .companion-breathe,
.study-companion.is-still .companion-head{animation:none}

@media (max-width:640px){
  /* On a phone the workspace is the whole screen; a character wandering over
     it costs more than it gives. */
  .study-companion{display:none}
}

.companion-motion-settings{display:flex;flex-wrap:wrap;gap:10px 18px;margin:12px 0 14px;
  padding:0;border:0}.companion-motion-settings legend{font-size:12px;font-weight:750;
  color:var(--dim);margin-bottom:8px}.companion-motion-settings label{display:inline-flex;
  align-items:center;gap:6px;font-size:13px;font-weight:650;cursor:pointer}
/* PHAR 520 Lab Final performance curriculum */
.lab-final-entry{border-left:3px solid var(--accent,#6f5bd3)}
/* One border per box. A bordered card inside a bordered card reads as
   template output, so every list on these screens is separated by rules and
   spacing instead. */
.lab-final-hero,.lab-mock-boundary,.lab-attempt-boundary{border-top:4px solid var(--accent,#6f5bd3)}
.lab-stack{display:grid;gap:0}
.lab-row{padding:16px 0;border-bottom:1px solid var(--line)}
.lab-row:first-of-type{padding-top:4px}
.lab-row:last-child{border-bottom:0;padding-bottom:0}
.lab-row>p{margin:6px 0 0;line-height:1.5}
.lab-row>ol,.lab-row>ul{margin:8px 0 0;padding-left:1.15rem;line-height:1.55}
.lab-row-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lab-row-name b{font-size:1.02rem}
.lab-row .meter{margin:10px 0 0}
.lab-method{display:grid;gap:0;list-style:none;padding:0;margin:1rem 0 0}
.lab-method li{display:grid;grid-template-columns:2rem 1fr;gap:.8rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--line)}
.lab-method li:last-child{border-bottom:0}
.lab-method li b{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:#fff;font-size:.85rem}
.lab-tags{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0}
.lab-learn-hero,.lab-learn-stage,.lab-form-tabs{max-width:920px;margin-left:auto;margin-right:auto}
.lab-learn-hero{border-top:4px solid var(--accent);padding:28px 32px}
.lab-learn-hero h1{margin:8px 0 6px;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.035em}
.lab-learn-hero>p{max-width:720px;line-height:1.55}
.lab-learn-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0 14px}
.lab-learn-flow span{display:flex;align-items:center;gap:7px;padding:10px 12px;border:1px solid var(--line);border-radius:999px;font-size:.84rem}
.lab-learn-flow span::first-letter{color:var(--accent)}
.lab-learn-reference{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.lab-learn-reference>summary,.lab-grammar-reference>summary{cursor:pointer;font-weight:700;color:var(--text)}
.lab-form-tabs{display:flex;flex-wrap:nowrap;gap:6px;margin-top:18px;margin-bottom:12px;padding:4px;overflow-x:auto;scrollbar-width:thin}
.lab-form-tabs button{flex:0 0 auto;padding:9px 13px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--dim);font:inherit;font-size:.82rem;font-weight:650;cursor:pointer}
.lab-form-tabs button:hover{color:var(--text);background:var(--panel2)}
.lab-form-tabs button.on{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.lab-learn-stage{padding:30px 34px}
.lab-learn-stage>h2{margin:7px 0 8px;font-size:clamp(1.7rem,3vw,2.35rem);letter-spacing:-.025em}
.lab-stage-lede{max-width:760px;margin:0;line-height:1.6;color:var(--dim)}
.lab-key-distinction{margin:20px 0 16px;padding:12px 16px;border-left:3px solid var(--accent);background:var(--panel2);color:var(--text)}
.lab-key-distinction p{margin:3px 0 0;line-height:1.5;color:inherit}
.lab-grammar-reference{margin:18px 0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lab-case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:16px 0 24px}
.lab-case-card{margin:0;display:flex;flex-direction:column;gap:4px}
.lab-case-card h3{margin:0}
.lab-case-card .row{margin-top:auto;padding-top:12px}
.lab-marks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 10px;margin:12px 0 0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lab-mark{display:grid;gap:2px;min-width:0;font-size:.75rem;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.lab-mark small{font-weight:500;font-size:.68rem;color:var(--muted,#666);overflow-wrap:anywhere}
.lab-mark.is-sourced{color:var(--accent,#6f5bd3)}
.lab-mark.is-off{opacity:.45}
.lab-rx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:18px 0 0}
.lab-rx div{padding:10px 0;border-bottom:1px solid var(--line)}
.lab-rx dt{text-transform:capitalize;color:var(--muted,#666);font-size:.78rem;font-weight:700;letter-spacing:.02em}
.lab-rx dd{margin:4px 0 0;font-weight:600;line-height:1.45}
.lab-rx dd ul{margin:0;padding-left:1.05rem;font-weight:500}
.lab-answer-sheet{display:grid;gap:22px}
.lab-answer-sheet label{display:grid;gap:8px}
.lab-answer-sheet textarea{width:100%;box-sizing:border-box;resize:vertical;line-height:1.5}
.lab-response-review{white-space:pre-wrap;margin:8px 0 0;line-height:1.55}
.lab-checklist{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}
.lab-checklist li{display:grid;gap:2px;padding-left:1.35rem;position:relative;line-height:1.45}
.lab-checklist li small{color:var(--muted,#666);font-size:.82rem}
.lab-checklist li::before{position:absolute;left:0;top:0;font-weight:700}
.lab-checklist li.is-hit::before{content:"\2713";color:var(--ok,#2e7d5b)}
.lab-checklist li.is-miss::before{content:"\2715";color:var(--warn,#b3451f)}
.lab-checklist li.is-miss{color:var(--warn,#b3451f)}
.lab-checklist li.is-critical::before{content:"!";color:var(--danger,#b3261e)}
.lab-checklist li.is-critical{color:var(--danger,#b3261e);font-weight:600}
.lab-checklist.is-prompt li::before{content:"\2022";color:var(--muted,#666)}
.lab-mock-sheet{margin-top:20px}
.lab-review-domains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:12px 0}
.lab-review-domains section{padding:12px 0;border-bottom:1px solid var(--line)}
.lab-review-domains h4{margin:0 0 8px}
@media(max-width:760px){.lab-case-grid,.lab-rx,.lab-review-domains{grid-template-columns:1fr}
  .lab-marks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lab-grammar-steps{margin:6px 0 0;line-height:1.6}
.lab-worked{margin-top:10px;padding:0 0 0 14px;border-left:2px solid var(--line)}
.lab-worked summary{cursor:pointer;font-weight:600;font-size:.9rem;padding:4px 0}
.lab-worked[open] summary{margin-bottom:4px}
.lab-worked p{margin:8px 0 0;line-height:1.55}
.lab-worked-head{margin-top:12px}
.lab-worked .ghost.compact{margin-top:4px}
.lab-worked-focus{margin:24px 0 0;padding:0;border:0}
.lab-worked-focus>summary{padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:1rem}
.lab-worked-focus>summary span{display:grid;gap:2px}
.lab-worked-focus>summary small{color:var(--accent);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.lab-givens{margin:0;padding:24px 0;border-bottom:1px solid var(--line)}
.lab-givens .eyebrow{display:block;margin-bottom:12px}
.lab-givens dl{display:grid;gap:9px;margin:0}
.lab-givens dl>div{display:grid;grid-template-columns:minmax(105px,135px) 1fr;gap:10px}
.lab-givens dt{font-weight:650;color:var(--muted)}
.lab-givens dd{margin:0}
.lab-givens-list{display:grid;grid-template-columns:minmax(105px,135px) 1fr;gap:10px;margin-top:12px}
.lab-givens ul{margin:0;padding-left:1.1rem}
/* The answer sheet: what goes on the blank prescription, at a glance.
   Procedure and BUD are scanned, not read -- the lines are short, the type is
   a size up from body copy, and nothing sits between them and the eye. The
   reasoning lives in .lab-why underneath, closed by default. */
.lab-write-this{margin:16px 0 0}
.lab-write-this .eyebrow{display:block;margin-bottom:10px}
.lab-answer-lines{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:lab-line;
  border-top:1px solid var(--line)}
.lab-answer-lines li{counter-increment:lab-line;position:relative;
  padding:11px 0 11px 40px;border-bottom:1px solid var(--line);
  font-size:1.02rem;line-height:1.45;color:var(--text)}
ol.lab-answer-lines li::before{content:counter(lab-line) ".";position:absolute;left:0;top:11px;
  width:28px;text-align:right;color:var(--dim);font-variant-numeric:tabular-nums;font-weight:700}
ul.lab-answer-lines li::before{content:"";position:absolute;left:11px;top:20px;
  width:5px;height:5px;border-radius:50%;background:var(--accent)}
ul.lab-answer-lines li:first-child{font-weight:700}
.lab-why{margin-top:16px}
.lab-why>summary{cursor:pointer;color:var(--dim);font-size:.85rem;font-weight:650}
.lab-why[open]>summary{color:var(--text)}
.lab-why .lab-teaching-steps{margin-top:12px}
.lab-teaching-steps{display:grid;gap:16px;margin:16px 0 0;padding:0;list-style:none;counter-reset:lab-teach}
.lab-teaching-steps li{counter-increment:lab-teach;position:relative;padding-left:38px;line-height:1.5}
.lab-teaching-steps li::before{content:counter(lab-teach);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--line-strong);border-radius:50%;color:var(--accent);font-size:.75rem;font-weight:750}
.lab-teaching-steps p{margin:4px 0 0}
.lab-equation{padding:10px 12px;border-left:2px solid var(--accent);background:var(--panel2);color:var(--text)!important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem;overflow-wrap:anywhere}
.lab-worked-block{padding:28px 0}
.lab-worked-block+.lab-worked-block{margin:0;border-top:1px solid var(--line)}
.lab-worked-head{display:flex;align-items:center;gap:11px;margin:0}
.lab-worked-head h3{margin:1px 0 0;font-size:1.3rem}
.lab-worked-head small{display:block;color:var(--dim);font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.lab-domain-index{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:.82rem;font-weight:800}
.lab-worked-answer{padding:12px 0;color:var(--text)}
.lab-worked-action{padding:22px 0 4px;border-top:1px solid var(--line)}
.lab-label-preview{max-width:820px;margin:18px auto 4px;padding:20px 22px;border:2px solid #222;border-radius:2px;background:#fff;color:#111;box-shadow:0 8px 26px rgba(0,0,0,.12)}
.lab-label-preview p{color:#111}
.lab-label-top{display:flex;justify-content:space-between;gap:20px;font-size:1.08rem}
.lab-label-patient{margin-top:8px!important;font-size:1.08rem}
.lab-label-product{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;margin-top:34px;font-size:1.12rem}
.lab-label-directions{margin-top:24px!important;font-size:1.13rem;font-weight:700;line-height:1.5!important}
.lab-label-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin-top:22px}
.lab-label-meta p{margin:5px 0!important}
.lab-label-blank{display:inline-block;min-width:96px;border-bottom:1px solid #111;color:transparent}
.lab-label-aux{margin-top:22px;padding-top:14px;border-top:2px solid #111;text-align:center}
.lab-label-aux>ul{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:9px 0 0;padding:0;list-style:none}
.lab-label-aux li{padding:6px 9px;border:1px solid #333;border-radius:4px;font-weight:650}
.lab-bud-date-note{max-width:820px;margin:12px auto 0!important;padding:11px 13px;border-left:3px solid var(--accent);background:var(--panel2);color:var(--text)!important}
@media(max-width:600px){
  .lab-learn-hero,.lab-learn-stage{padding:22px 18px}
  .lab-learn-flow{grid-template-columns:repeat(2,1fr)}
  .lab-givens dl>div{grid-template-columns:1fr;gap:1px}
  .lab-givens-list{grid-template-columns:1fr;gap:4px}
  .lab-label-preview{padding:14px}
  .lab-label-top,.lab-label-product{align-items:start;flex-direction:column;display:flex;gap:6px}
  .lab-label-product{margin-top:24px}
  .lab-label-directions{font-size:1rem}
  .lab-label-meta{grid-template-columns:1fr}
}


/* --- Sign-in environment: Eclipse ground, drawn plane, metal action --------
   The threshold screen leaves navy. Its ground is Eclipse -- #0e0f10, the
   base #0a0a0a lifted 4% toward the blue-grey #75849f, relative luminance
   0.0047 against the workspace Eclipse's 0.0048 -- so the signed-out and
   signed-in sides of the product are finally one material.

   Everything here is scoped to :not(.landing-environment). The landing pane
   shares body.auth-environment and keeps its navy until that page is redrawn;
   the class is mirrored onto <html> in landing.js for exactly this reason.

   The left column and the right wash were painted with CSS gradients. They are
   drawn on the backdrop canvas now, because the plane belongs to the picture
   rather than to the layout. See static/auth-backdrop.js. */
html.auth-environment:not(.landing-environment),
html.auth-environment.workspace-dark:not(.landing-environment),
body.auth-environment:not(.landing-environment),
body.auth-environment.workspace-dark:not(.landing-environment){
  --outer-canvas-bg:#0e0f10;--gutter:var(--outer-canvas-bg);
  --header-bg:#0e0f10;--header-text:#e8ecf9;--header-muted:#a3abbc;
  --header-control-bg:#18181a;--header-control-line:#2d2d2e;--header-control-text:#e8ecf9;
  --header-focus:color-mix(in srgb,#e9b968 76%,transparent);
  --elev-tint:143,178,228;--elev-shade:11,12,13;
  --arrival-canvas:#0e0f10;
  --auth-backdrop-ink:208,212,220;
  --auth-backdrop-pulse:143,178,228
}
/* the column and the wash are canvas work now */
body.auth-environment:not(.landing-environment)::before,
body.auth-environment:not(.landing-environment)::after{
  content:none;display:none;background:none;border:0}

/* The form: Eclipse tiers, no navy. */
body.auth-environment:not(.landing-environment) main .card.auth-card{
  --text:#e8ecf9;--dim:#a3abbc;--bad:#ffadb5;--line:#2d2d2e;
  --panel2:#1e1f20;--surface:#18181a;--accent:#e9b968}
/* §4.9: a groove on a near-black surface is drawn with light, not with fill --
   a hard shadow under the top lip and a faint light line off the far wall. */
body.auth-environment:not(.landing-environment) main .auth-field input{
  background:#0d0e0f;border-color:#232324;color:#e8ecf9;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.85), inset 0 -1px 0 rgba(232,236,249,.055)}
body.auth-environment:not(.landing-environment) main .auth-field input:focus{
  border-color:#8a6232;box-shadow:inset 0 1px 0 rgba(0,0,0,.85),0 0 0 3px rgba(233,185,104,.22)}
body.auth-environment:not(.landing-environment) main .auth-field label{color:#a3abbc}

/* Gold owns the primary action here, and it is a metal: the body sits at the
   strong tier, the brightest gold appears only as the lit top rim, and the
   label is #1b1405 because white on gold is unreachable at this chroma. */
body.auth-environment:not(.landing-environment) main button.primary,
body.auth-environment:not(.landing-environment) main a.primary{
  background:linear-gradient(180deg,#cf9c54,#b9853f);border:1px solid #8a6232;
  color:#1b1405;
  box-shadow:inset 0 1px 0 rgba(246,234,209,.55),inset 0 -1px 0 rgba(0,0,0,.42),
             0 1px 0 rgba(0,0,0,.6)}
@media(hover:hover){
  body.auth-environment:not(.landing-environment) main button.primary:hover:not(:disabled):not([aria-busy="true"]){
    background:linear-gradient(180deg,#e0ab5e,#c69048);border-color:#a0743c}
}
body.auth-environment:not(.landing-environment) main button.primary:disabled{
  background:#1e1f20;border-color:#2d2d2e;color:#7d8699;box-shadow:none}

/* Secondary actions are neutral. Blue owns brand and environment, gold owns
   the primary action, neutrals own everything else -- so no blue text. */
body.auth-environment:not(.landing-environment) main .auth-switch{color:#7d8699}
body.auth-environment:not(.landing-environment) main .auth-switch-link{
  color:#e8ecf9!important;text-decoration:none;
  border-bottom:1px solid rgba(233,185,104,.42);padding-bottom:1px!important}
body.auth-environment:not(.landing-environment) main .auth-switch-link:hover{
  color:#f0d39f!important;border-bottom-color:#e9b968}
body.auth-environment:not(.landing-environment) .auth-recovery-link{color:#a3abbc}
body.auth-environment:not(.landing-environment) .auth-recovery-link:hover{color:#e8ecf9}
body.auth-environment:not(.landing-environment) .password-toggle{color:#a3abbc}
body.auth-environment:not(.landing-environment) .legal-note a{color:#a3abbc}
body.auth-environment:not(.landing-environment) main .auth-intro,
body.auth-environment:not(.landing-environment) main .auth-password-guidance,
body.auth-environment:not(.landing-environment) main .auth-registration-card .legal-note{color:#a3abbc}
body.auth-environment:not(.landing-environment) .site-footer,
body.auth-environment:not(.landing-environment) .site-footer a{color:#7d8699}
body.auth-environment:not(.landing-environment) .site-footer a:hover{color:#a3abbc}

/* The form and the plane are one composition. The plane is centred on the
   viewport, so the sign-in column centres with it -- a centred body with the
   card still pinned to the left edge is two unrelated objects sharing a
   screen, which is exactly what it looked like. */
body.auth-environment:not(.landing-environment) main{margin-inline:auto}
body.auth-environment:not(.landing-environment) .site-footer{justify-content:center}
.client-continuity-notice{position:sticky;top:0;z-index:10000;display:flex;align-items:center;justify-content:center;gap:24px;padding:14px 20px;border-bottom:1px solid color-mix(in srgb,var(--warn) 55%,var(--line));background:var(--surface);box-shadow:var(--shadow-sm);color:var(--text)}
.client-continuity-notice div{max-width:720px}.client-continuity-notice p{margin:3px 0 0;color:var(--dim);font-size:13px}.client-continuity-notice button{flex:0 0 auto}@media(max-width:620px){.client-continuity-notice{align-items:stretch;flex-direction:column;gap:10px}.client-continuity-notice button{width:100%}}