/* ============================================================================
   Future Office landing - mock.css: the product UI kit
   ----------------------------------------------------------------------------
   Rebuilds the product's own parts from its real CSS (iso.css, plan.css) so a
   screenshot-mock looks exactly like the app. Product class names are kept where
   the product has them; everything else is `m-`. Every colour is a token from
   tokens.css. Load order on a page: tokens.css, mock.css, landing.css.

   INDEX (class - usage - required markup). Icons: see the KIT SAMPLER in
   landing/_feature-template.html for copy-paste markup of every item.

   FRAMES
   .m-window        App window for a screenshot. Floor background, 16px radius,
                    big soft shadow, container queries. Children: optional
                    .m-window-bar, then .m-window-body.
     .m-window-bar  Fake title bar: <div class="m-window-bar"><i></i><i></i><i></i>
                    <span class="m-window-url">office.northwind.co</span></div>
                    The three <i> are macOS traffic lights (red, yellow, green; colour
                    only, same in both themes; --mac-close/-minimise/-expand).
     .m-window-body The floor. Put .iso-hdr, .m-plan, .iso-dock.m-dock-float in it.
     .m-window.is-short  Shorter body (min-height 340 instead of 520).
   .m-mock          Rounded section-mock frame with the floor background.
                    .m-mock.is-plain = paper-2 background instead of the floor.
                    .m-mock.is-pad0 = no padding.
   .m-floor / .plan-floor  The floor background on any box (48px grid + radial
                    ground + inset vignette), exactly plan.css.
   .m-opt           Hidden when the enclosing .m-window/.m-mock is under 620px.
   .m-stage         Always-Night dark media surface (theater stage, players).

   TOP BAR (iso.css HEADER)
   .iso-hdr         Row wrapping the two floating cards (space-between).
   .iso-hdr-card    One floating card (paper, line, r-lg, sh-md, 44px tall).
   .hdr-actions     Add to the right-hand card.
   .iso-brand       Left group: .m-logo + .iso-brand-name + .iso-live-dot + .iso-room-chip.
   .m-logo          22px logo mark: <img class="m-logo" src="../assets/img/logo.svg" alt="">
   .iso-brand-name  Org name ("Northwind"), display font 900/19 (16 in a mock).
   .iso-live-dot    9px live dot (cyan). .off = grey.
   .iso-room-chip   "In {room}" pill: <span class="iso-room-chip">{door-open svg}<span class="rn">In Lounge</span></span>
   .elevator        Floor tabs group; .floor-tab buttons with <span class="fnum">1</span>,
                    selected = aria-selected="true".
   .act             34px header action; .act.icon-only = square icon button.
                    data-tip="Search people" gives the product's tooltip.
   .act-sep         1px vertical separator.
   .iso-status-chip Your status chip: <span class="iso-status-chip"><i class="pip is-available"></i>Available</span>
   .you-chip        Account chip: <span class="you-chip"><span class="you-av">ZA</span>Zayn</span>

   THE FLOOR
   .m-plan          Grid of tiles. style="--cols:4" (default 4). Drops to 2 columns
                    under 620px. .m-plan.m-rise = tiles rise in (stagger via style="--i:N").
   .span-c2/.span-c3/.span-c4  Tile spans 2/3/4 columns. .span-r2 spans 2 rows.
   .plan-tile       A room. Children in order: .plan-nm, .plan-line (x1-2),
                    optional .plan-sub, .plan-who. Light levels (one at a time):
                      (none) unlit | .lit-full someone in | .lit-pilot open shared room |
                      .lit-edge owner online elsewhere | .lit-dark stepped out |
                      .lit-dark.cold offline (dimmest)
                    Modifiers: .dashed (AI office) | .shuttered (do not disturb,
                    red stripes; combine with .lit-full) | .breathing (2+ people,
                    swelling lamp) | .interactive (hover lift) | .ai.off (backend down)
                    | .m-lamp (+ .is-on) animated lamp turn-on | .spotlight (white ring).
   .plan-nm         Name row: <span class="plan-nm"><i class="plan-dot is-available"></i>
                    <span class="plan-nm-txt">Ada Okafor</span></span>
   .plan-dot        7px status dot; colour from a status class (below) or style="--d:...".
   .plan-line       11px status line. .plan-line.q = quieter second line.
   .plan-sub        Amber chip inside a tile (e.g. "2 new notices"): <span class="plan-sub"><i></i>2 new</span>
   .plan-who        Avatar row at the tile bottom; holds .m-av (22px) items.
   .tag             Small pill in a name row. .tag.live (red outline LIVE, with
                    <i class="tdot"></i>), .tag.count, .tag.todo, .tag.notices,
                    .tag.speak (cyan).
   .youtag          "You" badge, top-right of a tile: <span class="youtag">You</span>
   .knocking-pill   "Knocking..." pill, top-right of a tile.

   STATUS (sets --d, read by dots, avatar rings, pips)
   .is-available #67e3f5 | .is-meeting #f59e0b | .is-dnd #ef4444 |
   .is-ooo #6b7280 (stepped out) | .is-offline #4b5563

   AVATARS
   .m-av            22px initials disc, 1.5px status ring. Initials as text, optional
                    photo on top: <span class="m-av is-available">AO<img src="../assets/media/ada.jpg"
                    alt="Ada Okafor" data-fallback></span>. A failed photo hides
                    (landing.js) and the initials show.
   .m-av-32/.m-av-48/.m-av-96  Larger sizes (2px / 2px / 3px ring).
   .m-av.is-ai      Agent avatar: the orb's dark glass sphere, static, no initials.
   .m-av-stack      Overlapping avatar group.
   .pin             Alias of .m-av (the product's name for a tile avatar).

   DOCK (iso.css floating dock)
   .iso-dock        Glass pill (blur 14, dock-bg, r 20, padding 8). Inline by default;
                    .iso-dock.m-dock-float = absolute, bottom-centre of its frame.
   .dbtn            66px icon-over-label button: <button class="dbtn">{svg}<span class="dl">Mic</span></button>
                    .primary (lamp, "My office") | .muted (lamp, mic muted) |
                    .leave (red) | .is-active (pressed) | .is-off / :disabled (grey)
   .dock-sep        Separator before Leave.

   GENERIC PRODUCT UI
   .m-panel         Card (paper, 1px line, r 16, sh-md). .m-panel-h header row
                    (.m-panel-t title + right-side items), .m-panel-b body, .m-panel-f footer.
   .m-chip          24px pill. .is-lamp | .is-cyan | .is-coral | .is-red | .is-solid.
   .m-btn           34px button. .m-btn-primary (lamp) | .m-btn-ghost | .m-btn-danger | .m-btn-sm.
   .m-toggle        Switch: <span class="m-toggle is-on" role="switch" aria-checked="true"></span>
   .m-input         34px text field (div or input). .m-field = icon + .m-input row.
   .m-tabs/.m-tab   Pill tabs; selected = .is-active or aria-selected="true".
   .m-badge         Coral count (e.g. 3). .m-badge.is-corner = pinned top-right of a relative parent.
   .m-toast         Notification card: .m-toast-ic (icon circle) + .m-toast-txt
                    (.m-toast-t title, .m-toast-b body) + optional .m-toast-actions.
                    .m-toast.is-knock = lamp accent; .m-pop = slides in.
   .m-kbd           Keyboard key.  .m-row / .m-col-stack: flex helpers. .m-tnum tabular numbers.
   .m-rec           Red recording pill: <span class="m-rec"><i></i>REC <span data-tick data-format="ms">0:00</span></span>
   .m-countdown     Big 3-2-1 number disc (clips countdown).

   VIDEO (always Night)
   .m-video         16:9 tile, r 12. Children: <video ... data-fallback>, .m-video-off
                    (camera-off layer with a big .m-av, always present under the video),
                    .m-video-name label, optional .m-video-mic (mic-off badge),
                    optional .m-video-hand (raised hand).
                    .is-speaking cyan ring | .cam-off camera off | .no-video set by JS |
                    .is-portrait 9:16 | .is-square 1:1 | .is-round circle (clip bubble).
   .m-video-grid    2-column grid of tiles (.is-3 = 3 columns).
   .m-share         Screen-share frame: <div class="m-share"><div class="m-share-bar">..</div>..</div>

   CHAT
   .m-chat          Column of messages.
   .m-msg           Message row: .m-av (32) + .m-msg-body (.m-msg-meta with <b>name</b>
                    <time>, then .m-bubble). .m-msg.is-own = right side, lamp bubble.
   .m-typing        Three animated dots (inside a .m-bubble or alone).
   .m-reacts/.m-react  Reaction pills row: <span class="m-react is-mine">👍 <b>3</b></span>
   .m-voice         Voice note: .m-voice-play button + .m-wave (spans, style="--h:.6") + time.
   .m-attach        File chip: icon + .m-attach-name + .m-attach-size.
   .m-thread        "3 replies" link with a small avatar stack.
   .m-pinned        Pinned-message bar at the top of a chat.
   .m-taskref       #task chip: <span class="m-taskref">#42 Ship the notice wall</span>
   .m-composer      Input row: icon buttons + .m-input-ghost text + send button.
   .m-forward       "Forwarded" label above a bubble.

   TASKS
   .m-board/.m-board-col/.m-board-h  Kanban columns (title + .m-board-n count).
   .m-task          Task card. Children: .m-task-title, .m-task-meta row, optional
                    .m-budget, .m-steps, .m-pause-reason, .m-task-foot (assignee +
                    .m-timer / .m-done-tag). .m-task.is-paused dims the timer.
   .m-prio          Priority: <span class="m-prio is-high"><i></i>High</span> (.is-med .is-low).
   .m-due           Due date (.is-late = red).
   .m-budget        <div class="m-budget" style="--pct:.62"><span>3h 06m of 5h</span><i></i></div> (.is-over = red).
   .m-timer         Running timer pill: <span class="m-timer"><i></i><span data-tick data-start="6120">1:42:00</span></span>
                    .is-paused = paused look.
   .m-steps         <div class="m-steps" style="--done:2;--total:5"><span>2/5 steps</span><i></i></div>
   .m-done-tag      "Done today" tag.
   .m-pause-reason  Quoted pause reason under a paused task.

   AGENT
   .m-orb           The product's AI voice orb: a waveform on a canvas inside a dark
                    glass sphere, animated by landing.js (a port of AgentOrb.tsx).
                    <span class="m-orb" data-orb="speaking" style="--orb: 96px"><i></i></span>
                    Size: --orb (default 48px; .m-orb-sm 22px, .m-orb-lg 96px; clamp()
                    works, the engine measures the rendered box).
                    data-orb         idle | listening | hearing | thinking | speaking
                                     (default listening; .is-speaking alone = speaking).
                    data-orb-steps   "listening,hearing,thinking,speaking": one state per
                                     step-N of the closest [data-scene] (entry N; past the
                                     end = last entry). Reduced motion = the rest step.
                                     Prefer ONE orb with steps over m-from/m-until pairs.
                    data-orb-variant hero | chip. Absent: width < 40px = chip, else hero.
                                     Hero adds the halo (lit when not idle) and floor glow,
                                     repaints every frame; chip repaints every 50 ms.
                    data-orb-color   "#rrggbb" agent colour (default: the seeded AI
                                     Accountant's #EAB308, see landing.js ORB_AGENT_HEX).
                    No JS: the <i> is the same sphere, static.
   .m-caption       Caption bubble for spoken words (.m-caption.is-ai has an orb tail).

   MOTION PIECES
   .m-knock         Wrap an avatar/door: pulsing lamp rings around it.
   .m-reactions     Absolute layer; each .m-float child is an emoji that rises and
                    fades, style="--x:30%;--delay:.4s".
   .m-lamp          Tile lamp turn-on: unlit until .is-on (or a scene step) then the
                    lamp fades in. Use with .plan-tile.
   .m-caret         Blinking caret after typed text.
   .m-pulse         Gentle pulse for any small dot.

   CHARTS (inline SVG; put pathLength="1" on lines you want drawn in)
   .m-chart         <svg class="m-chart" viewBox="0 0 320 140">..</svg>
   .m-axis (text)  .m-gridline (line)  .m-threshold (dashed coral line)
   .m-area-cyan .m-area-lamp (fills)  .m-line-cyan .m-line-lamp (strokes)
   .m-bar-cyan .m-bar-lamp .m-bar-muted (rects)  .m-dot-lamp .m-dot-cyan (circles)
   .m-draw          On a stroke: draws in when an ancestor .reveal gets .is-in.

   ICONS
   .m-ic            Lucide inline SVG (24 viewBox, stroke currentColor, 2px). 16px;
                    .m-ic-13 .m-ic-18 .m-ic-21 .m-ic-24 sizes.

   SCENES (landing.js cycles step-1..step-N on any [data-scene])
   .m-from-N        Hidden until the scene reaches step N (N = 1..8), then stays.
   .m-until-N       Visible up to step N, hidden after.
   .m-only-N        Visible only at step N.
   .m-lamp-from-N   A .m-lamp tile that lights at step N.
   ========================================================================== */

/* ============================ BASE ============================ */
.m-window,
.m-mock,
.m-stage {
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-align: left;
}
.m-window *,
.m-mock * {
  box-sizing: border-box;
}
.dbtn,
.act,
.floor-tab,
.m-btn,
.m-tab,
.m-toggle,
.m-voice-play,
.m-composer button {
  font: inherit;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  margin: 0;
}
.m-ic {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.m-ic-13 {
  width: 13px;
  height: 13px;
}
.m-ic-18 {
  width: 18px;
  height: 18px;
}
.m-ic-21 {
  width: 21px;
  height: 21px;
}
.m-ic-24 {
  width: 24px;
  height: 24px;
}
.m-tnum,
[data-tick] {
  font-variant-numeric: tabular-nums;
}
.m-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.m-col-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.m-muted {
  color: var(--ink-muted);
}
/* Shared focus ring: the lamp, as on the night floor (plan.css focus rule). */
.m-window :focus-visible,
.m-mock :focus-visible,
.dbtn:focus-visible,
.act:focus-visible,
.m-btn:focus-visible,
.m-tab:focus-visible,
.plan-tile:focus-visible {
  outline: 2.5px solid var(--lamp);
  outline-offset: 2px;
}

/* status -> --d */
.is-available {
  --d: var(--st-available);
}
.is-meeting {
  --d: var(--st-meeting);
}
.is-dnd {
  --d: var(--st-dnd);
}
.is-ooo {
  --d: var(--st-ooo);
}
.is-offline {
  --d: var(--st-offline);
}

/* ============================ FRAMES ============================ */
.m-floor,
.plan-floor,
.m-window-body,
.m-mock {
  position: relative;
  background:
    repeating-linear-gradient(0deg, var(--floor-line) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--floor-line) 0 1px, transparent 1px 48px),
    radial-gradient(120% 90% at 50% 0%, var(--floor-hi) 0%, var(--plan-ground) 52%, var(--floor-lo) 100%);
}
.m-floor::after,
.plan-floor::after,
.m-window-body::after,
.m-mock::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: var(--floor-vignette);
  z-index: 0;
}
:where(.m-window-body, .m-mock, .m-floor, .plan-floor) > * {
  position: relative;
  z-index: 1;
}
.m-window {
  position: relative;
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  overflow: hidden;
  background: var(--plan-ground);
  box-shadow: var(--sh-window);
  container-type: inline-size;
  container-name: mock;
}
.m-window-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
/* macOS traffic lights (close, minimise, expand), in that order. These are the
   OS window controls, not a product colour, so they are the only raw hexes here
   and are the same in Night and Day. Colour only: no hover glyph, no click.
   On :root so page-local app bars (features/clips.html, partials/clips.html) reuse them. */
:root {
  --mac-close: #ff5f57;
  --mac-minimise: #febc2e;
  --mac-expand: #28c840;
}
.m-window-bar > i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}
.m-window-bar > i:nth-child(1) {
  background: var(--mac-close);
}
.m-window-bar > i:nth-child(2) {
  background: var(--mac-minimise);
}
.m-window-bar > i:nth-child(3) {
  background: var(--mac-expand);
}
.m-window-url {
  margin: 0 auto;
  transform: translateX(-24px);
  height: 22px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--wash);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.m-window-body {
  min-height: 520px;
  padding: 12px 16px 104px;
}
.m-window.is-short .m-window-body {
  min-height: 340px;
}
.m-mock {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  padding: 16px;
  overflow: hidden;
  box-shadow: var(--sh-lg);
  container-type: inline-size;
  container-name: mock;
}
.m-mock.is-plain {
  background: var(--paper-2);
}
.m-mock.is-plain::after {
  display: none;
}
.m-mock.is-pad0 {
  padding: 0;
}
.m-stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, rgb(var(--lamp-rgb) / 0.14), transparent 70%),
    var(--surface-base);
  color: var(--ink);
}
@container mock (max-width: 620px) {
  .m-opt {
    display: none !important;
  }
  .m-window-body {
    min-height: 420px;
    padding: 10px 10px 96px;
  }
}

/* ============================ TOP BAR ============================ */
.iso-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px var(--s4);
  margin: 0 0 14px;
}
.iso-hdr-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px var(--s3);
  min-width: 0;
  min-height: 44px;
  padding: 4px var(--s3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
.iso-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.m-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: none;
  display: block;
}
.iso-brand-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.iso-live-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--on);
  box-shadow: 0 0 0 0 rgb(var(--cyan-rgb) / 0.5);
  animation: m-live 2.4s ease-out infinite;
}
.iso-live-dot.off {
  background: var(--ink-32);
  animation: none;
}
@keyframes m-live {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--cyan-rgb) / 0.45);
  }
  70%,
  100% {
    box-shadow: 0 0 0 7px rgb(var(--cyan-rgb) / 0);
  }
}
.iso-room-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.iso-room-chip .m-ic {
  width: 13px;
  height: 13px;
  color: var(--ink-32);
}
.iso-room-chip .rn {
  overflow: hidden;
  text-overflow: ellipsis;
}
.elevator {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
}
.floor-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink-muted);
  transition: all 0.18s ease;
  white-space: nowrap;
}
.floor-tab .fnum {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 11px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink-70);
  border: 1px solid var(--line);
}
.floor-tab:hover {
  color: var(--ink);
}
.floor-tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}
.floor-tab[aria-selected="true"] .fnum {
  background: var(--coral);
  color: var(--white);
  border-color: transparent;
}
.hdr-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.act {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-md);
  color: var(--ink-70);
  font-weight: 600;
  font-size: 13px;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.12s ease;
}
.act:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.act:active {
  transform: translateY(1px);
}
.act.icon-only {
  width: 34px;
  padding: 0;
  gap: 0;
  justify-content: center;
}
.act[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--sh-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s ease;
}
.act[data-tip]:hover::after,
.act[data-tip]:focus-visible::after {
  opacity: 1;
}
.act-sep {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 6px;
}
.iso-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-70);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  transition:
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.iso-status-chip:hover {
  background: var(--paper);
  box-shadow: var(--sh-sm);
}
.iso-status-chip .pip,
.pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--d, var(--st-available));
}
.you-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 12px 0 4px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.you-av {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--coral-deep);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  box-shadow: 0 0 0 2px var(--paper);
}
.you-av img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================ THE FLOOR GRID ============================ */
.m-plan {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  grid-auto-rows: minmax(var(--row, 118px), auto);
  gap: 10px;
}
.span-c2 {
  grid-column: span 2;
}
.span-c3 {
  grid-column: span 3;
}
.span-c4 {
  grid-column: span 4;
}
.span-r2 {
  grid-row: span 2;
}
@container mock (max-width: 620px) {
  .m-plan {
    --cols: 2 !important;
    grid-auto-rows: minmax(104px, auto);
  }
  .m-plan .span-c3,
  .m-plan .span-c4 {
    grid-column: span 2;
  }
}
.m-plan.m-rise > * {
  animation: m-rise 0.7s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}
.js .reveal:not(.is-in) .m-rise > * {
  animation-play-state: paused;
}
@keyframes m-rise {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ============================ A TILE (plan.css A TILE) ============================ */
.plan-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  padding: 8px;
  border-radius: var(--r-md);
  --tile-edge: var(--tile-line);
  border: 1px solid var(--tile-edge);
  background: var(--room-unlit);
  --tile-pool: 0 0 0 transparent;
  --tile-glow: 0 0 0 transparent;
  box-shadow: var(--tile-float), var(--tile-e1), var(--tile-pool), var(--tile-glow);
  color: var(--tile-muted);
  --g: 30%;
  font-family: var(--font-ui);
  text-decoration: none;
  transition:
    transform 0.22s var(--ease-out),
    box-shadow 0.22s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.plan-tile.dashed {
  border-style: dashed;
  --tile-edge: color-mix(in srgb, rgb(var(--lamp-rgb)) 28%, var(--tile-line));
}
.plan-tile.lit-full {
  background:
    radial-gradient(120% 130% at 50% 24%, color-mix(in srgb, rgb(var(--lamp-rgb)) var(--g), transparent), transparent 72%),
    var(--room-lit);
  --tile-edge: color-mix(in srgb, rgb(var(--lamp-rgb)) 50%, var(--tile-line));
  --tile-pool: var(--lit-pool);
  --tile-glow: var(--lit-spill), var(--lit-inner);
  color: var(--lamp-ink);
}
.plan-tile.lit-pilot {
  background:
    radial-gradient(120% 130% at 50% 24%, color-mix(in srgb, rgb(var(--lamp-rgb)) 16%, transparent), transparent 72%),
    var(--room-lit);
  --tile-edge: color-mix(in srgb, rgb(var(--lamp-rgb)) 36%, var(--tile-line));
  --tile-pool: var(--lit-pool-soft);
  --tile-glow: inset 0 0 40px -18px rgb(var(--lamp-rgb) / 0.6);
}
.plan-tile.lit-edge {
  background:
    radial-gradient(120% 130% at 50% 24%, color-mix(in srgb, rgb(var(--lamp-rgb)) 9%, transparent), transparent 72%),
    var(--room-cold);
  --tile-edge: rgb(var(--lamp-rgb) / 0.45);
  --tile-glow: inset 0 0 0 1px rgb(var(--lamp-rgb) / 0.14);
}
.plan-tile.lit-dark {
  background:
    radial-gradient(120% 130% at 50% 24%, color-mix(in srgb, rgb(var(--lamp-rgb)) 6%, transparent), transparent 72%),
    var(--room-cold);
  --tile-edge: var(--tile-line);
  filter: saturate(0.85);
}
.plan-tile.cold {
  background:
    radial-gradient(120% 130% at 50% 24%, color-mix(in srgb, rgb(var(--lamp-rgb)) 4%, transparent), transparent 72%),
    var(--room-colder);
  --tile-edge: var(--tile-line-cold);
  filter: saturate(0.85);
}
/* Day: unlit levels flat, lit levels flatter (plan.css "day" blocks) */
[data-theme="light"] .plan-tile.lit-edge,
[data-theme="light"] .plan-tile.lit-dark,
[data-theme="light"] .plan-tile.cold {
  background: var(--room-cold);
}
[data-theme="light"] .plan-tile.lit-dark {
  filter: saturate(0.7);
}
[data-theme="light"] .plan-tile.cold {
  filter: saturate(0.72);
}
[data-theme="light"] .plan-tile.lit-full:not(.shuttered) {
  --tile-edge: color-mix(in srgb, rgb(var(--lamp-rgb)) 34%, var(--tile-line));
}
[data-theme="light"] .plan-tile.lit-pilot {
  background:
    radial-gradient(120% 130% at 50% 24%, color-mix(in srgb, rgb(var(--lamp-rgb)) 10%, transparent), transparent 72%),
    var(--room-lit);
  --tile-edge: color-mix(in srgb, rgb(var(--lamp-rgb)) 28%, var(--tile-line));
  --tile-glow: inset 0 0 40px -18px rgb(var(--lamp-rgb) / 0.45);
}
[data-theme="light"] .plan-tile.lit-edge {
  --tile-glow: inset 0 0 0 1px rgb(var(--lamp-rgb) / 0.1);
  --tile-edge: rgb(var(--lamp-rgb) / 0.34);
}
.plan-tile.ai.off {
  opacity: 0.6;
  filter: saturate(0.72);
}
/* do not disturb */
.plan-tile.shuttered {
  --tile-edge: rgb(var(--dnd-rgb) / 0.45);
}
.plan-tile.shuttered::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.5;
  background: repeating-linear-gradient(180deg, transparent 0 5px, rgb(var(--dnd-rgb) / 0.22) 5px 6px);
}
.plan-tile.shuttered.lit-full {
  background:
    radial-gradient(120% 130% at 50% 24%, rgb(var(--dnd-rgb) / 0.26), transparent 72%),
    var(--room-lit);
  --tile-edge: color-mix(in srgb, rgb(var(--dnd-rgb)) 42%, var(--tile-line));
  --tile-pool: var(--dnd-pool);
  --tile-glow: 0 0 26px -10px rgb(var(--dnd-rgb) / 0.5), var(--lit-inner);
}
[data-theme="light"] .plan-tile.lit-full {
  background: var(--room-lit);
}
/* a conversation */
.plan-tile.breathing {
  --g: 44%;
}
.plan-tile.breathing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(70% 70% at 50% 40%, rgb(var(--lamp-rgb) / 0.26), transparent 70%);
  animation: plan-breathe 4.2s ease-in-out infinite;
}
@keyframes plan-breathe {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
:where(.plan-tile) > * {
  position: relative;
  z-index: 1;
}
.plan-tile.interactive {
  cursor: pointer;
}
.plan-tile.interactive:hover,
.plan-tile.interactive:focus-visible {
  transform: translateY(-6px);
  --tile-edge: var(--tile-line-hi);
  box-shadow: var(--tile-float-hi), var(--tile-e2), var(--tile-pool), var(--tile-glow), var(--lit-spill);
}
.plan-tile.interactive:active {
  transform: translateY(-1px);
}
.plan-tile.spotlight {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 1px;
}
/* name row */
.plan-nm {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--tile-name);
}
.plan-tile.lit-full .plan-nm,
.plan-tile.lit-pilot .plan-nm {
  color: var(--tile-ink);
}
.plan-tile.you .plan-nm {
  padding-right: 40px;
}
.plan-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--d, var(--st-ooo));
}
.plan-nm-txt {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.plan-line {
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--tile-muted);
  opacity: 0.9;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.plan-line.q {
  opacity: 0.62;
}
.plan-tile.lit-full .plan-line {
  color: var(--lamp-ink);
}
.plan-line b {
  font-weight: 700;
  color: var(--tile-ink);
}
.plan-sub {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  gap: 6px;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--st-meeting) 40%, transparent);
  background: color-mix(in srgb, var(--st-meeting) 12%, transparent);
  color: var(--st-meeting);
}
[data-theme="light"] .plan-sub {
  border-color: color-mix(in srgb, var(--lamp) 40%, transparent);
  background: color-mix(in srgb, var(--lamp) 12%, transparent);
  color: var(--lamp);
}
.plan-sub i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.plan-who {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}
.plan-who:empty {
  display: none;
}
/* chips */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: var(--paper-2);
  color: var(--ink-70);
}
.plan-tile .tag {
  height: 18px;
  padding: 0 6px;
  font-size: 9.5px;
}
.tag .tdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dnd);
  animation: m-blink 1.6s ease-in-out infinite;
}
.tag.live {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--dnd);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 9px;
}
.tag.todo,
.tag.notices {
  gap: 3px;
  background: rgb(var(--lamp-rgb) / 0.16);
  color: var(--lamp);
}
.tag.speak {
  background: rgb(var(--cyan-rgb) / 0.14);
  color: var(--cyan-ink);
}
.youtag,
.knocking-pill {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.youtag {
  background: var(--paper);
  border: 1px solid rgb(var(--lamp-rgb) / 0.35);
  color: var(--lamp);
}
.knocking-pill {
  background: rgb(var(--lamp-rgb) / 0.18);
  color: var(--lamp);
  animation: m-blink 1.2s ease-in-out infinite;
}

/* ============================ AVATARS ============================ */
.m-av,
.pin {
  --av: 22px;
  --ring: 1.5px;
  position: relative;
  flex: none;
  width: var(--av);
  height: var(--av);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: var(--tile-av-bg);
  color: var(--tile-ink);
  border: var(--ring) solid var(--d, var(--st-available));
  font-family: var(--font-display);
  font-size: calc(var(--av) * 0.43);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  user-select: none;
}
.m-av img,
.pin img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* a broken photo must never show alt text over the initials */
  color: transparent;
  font-size: 0;
}
.m-av-32 {
  --av: 32px;
  --ring: 2px;
}
.m-av-48 {
  --av: 48px;
  --ring: 2px;
}
.m-av-96 {
  --av: 96px;
  --ring: 3px;
  font-weight: 800;
}
/* An agent's avatar: the orb's dark glass sphere, static (the glass and body
   layers of .m-orb, index.css .agent-orb-glass / -body). */
.m-av.is-ai {
  border-color: rgba(190, 210, 255, 0.16);
  background:
    radial-gradient(
      58% 42% at 32% 20%,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.06) 52%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(30% 18% at 72% 84%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%),
    radial-gradient(120% 120% at 30% 22%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 46%),
    radial-gradient(100% 100% at 50% 50%, rgba(18, 22, 34, 0.86), rgba(8, 10, 16, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(226, 236, 255, 0.3),
    inset 0 -10px 26px rgba(140, 90, 220, 0.14);
}
.m-av-stack {
  display: inline-flex;
  align-items: center;
}
.m-av-stack > .m-av {
  box-shadow: 0 0 0 2px var(--paper);
}
.m-av-stack > .m-av + .m-av {
  margin-left: calc(var(--av) * -0.3);
}

/* ============================ DOCK ============================ */
.iso-dock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 20px;
  background: var(--dock-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--dock-border);
  box-shadow: var(--sh-lg);
  max-width: 100%;
}
.iso-dock.m-dock-float {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5;
}
.dbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 66px;
  padding: 8px 4px 6px;
  border-radius: var(--r-md);
  color: var(--ink-70);
  transition:
    background 0.18s ease,
    transform 0.12s ease,
    color 0.18s;
}
.dbtn .m-ic {
  width: 21px;
  height: 21px;
}
.dbtn .dl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.dbtn:hover {
  background: var(--wash);
  color: var(--ink);
  transform: translateY(-2px);
}
.dbtn:active {
  transform: translateY(0);
}
.dbtn.is-active {
  background: var(--wash-2);
  color: var(--ink);
}
.dbtn:disabled,
.dbtn.is-off {
  color: var(--ink-32);
  cursor: default;
}
.dbtn:disabled:hover,
.dbtn.is-off:hover {
  background: none;
  transform: none;
}
.dbtn.muted,
.dbtn.primary {
  color: var(--lamp);
}
.dbtn.leave {
  color: var(--dnd);
}
.dbtn.leave:hover {
  background: rgb(var(--dnd-rgb) / 0.12);
  color: var(--dnd);
}
.dock-sep {
  width: 1px;
  height: 34px;
  background: var(--line);
  margin: 0 4px;
}
@container mock (max-width: 620px) {
  .dbtn {
    width: 50px;
    padding: 7px 2px 5px;
  }
  .dbtn .dl {
    font-size: 9.5px;
  }
  .dbtn .m-ic {
    width: 18px;
    height: 18px;
  }
  .iso-dock {
    gap: 2px;
    padding: 6px;
  }
}

/* ============================ GENERIC PRODUCT UI ============================ */
.m-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
}
.m-panel-h {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
.m-panel-t {
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.m-panel-b {
  padding: 14px;
}
.m-panel-f {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.m-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.m-chip .m-ic {
  width: 13px;
  height: 13px;
}
.m-chip.is-lamp {
  background: rgb(var(--lamp-rgb) / 0.14);
  border-color: rgb(var(--lamp-rgb) / 0.3);
  color: var(--lamp);
}
.m-chip.is-cyan {
  background: rgb(var(--cyan-rgb) / 0.12);
  border-color: rgb(var(--cyan-rgb) / 0.3);
  color: var(--cyan-ink);
}
.m-chip.is-coral {
  background: var(--coral-wash);
  border-color: transparent;
  color: var(--coral-ink);
}
.m-chip.is-red {
  background: rgb(var(--dnd-rgb) / 0.12);
  border-color: rgb(var(--dnd-rgb) / 0.3);
  color: var(--dnd);
}
.m-chip.is-solid {
  background: var(--ink);
  border-color: transparent;
  color: var(--paper);
}
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  text-decoration: none;
  transition:
    background 0.18s ease,
    filter 0.18s ease,
    transform 0.12s ease,
    border-color 0.18s ease;
}
.m-btn:hover {
  background: var(--wash-2);
}
.m-btn:active {
  transform: translateY(1px);
}
.m-btn-primary {
  background: var(--lamp);
  color: var(--on-lamp);
  border-color: transparent;
}
.m-btn-primary:hover {
  background: var(--lamp);
  filter: brightness(1.06);
}
.m-btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-70);
}
.m-btn-ghost:hover {
  background: var(--wash);
  color: var(--ink);
}
.m-btn-danger {
  background: rgb(var(--dnd-rgb) / 0.12);
  border-color: rgb(var(--dnd-rgb) / 0.3);
  color: var(--dnd);
}
.m-btn-danger:hover {
  background: rgb(var(--dnd-rgb) / 0.2);
}
.m-btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--r-sm);
}
.m-toggle {
  position: relative;
  display: inline-block;
  flex: none;
  width: 32px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background 0.2s ease;
  vertical-align: middle;
}
.m-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--sh-sm);
  transition: transform 0.2s var(--ease-out);
}
.m-toggle.is-on,
.m-toggle[aria-checked="true"] {
  background: var(--lamp);
}
.m-toggle.is-on::after,
.m-toggle[aria-checked="true"]::after {
  transform: translateX(14px);
}
.m-input {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  /* one line, clipped at the pill edge: typed text never wraps out of the field */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.m-input > :not(svg, .m-ic) {
  min-width: 0;
}
.m-input::placeholder,
.m-input .m-ph {
  color: var(--ink-muted);
}
.m-input:focus,
.m-input.is-focus {
  outline: none;
  border-color: rgb(var(--lamp-rgb) / 0.6);
  box-shadow: 0 0 0 3px rgb(var(--lamp-rgb) / 0.16);
}
.m-field {
  position: relative;
  display: flex;
  align-items: center;
}
.m-field > .m-ic {
  position: absolute;
  left: 11px;
  color: var(--ink-muted);
  z-index: 1;
}
.m-field > .m-input {
  padding-left: 34px;
}
.m-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  max-width: 100%;
  overflow: hidden;
}
.m-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink-muted);
  white-space: nowrap;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
.m-tab:hover {
  color: var(--ink);
}
.m-tab.is-active,
.m-tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
}
.m-badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--coral-deep);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.m-badge.is-corner {
  position: absolute;
  top: -4px;
  right: -4px;
  box-shadow: 0 0 0 2px var(--paper);
}
.m-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  color: var(--ink);
}
.m-toast-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--ink-70);
}
.m-toast.is-knock .m-toast-ic {
  background: rgb(var(--lamp-rgb) / 0.16);
  color: var(--lamp);
}
.m-toast.is-knock {
  border-color: rgb(var(--lamp-rgb) / 0.35);
}
.m-toast-txt {
  min-width: 0;
  flex: 1;
}
.m-toast-t {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}
.m-toast-b {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.4;
}
.m-toast-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.m-pop {
  animation: m-pop 0.5s var(--ease-out) both;
}
@keyframes m-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.m-kbd {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 1px 5px;
  background: var(--paper);
  font-family: var(--font-ui);
}
.m-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: rgb(var(--dnd-rgb) / 0.14);
  color: var(--dnd);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.m-rec > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dnd);
  animation: m-blink 1.2s ease-in-out infinite;
}
.m-countdown {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgb(var(--surface-base-rgb) / 0.7);
  border: 2px solid rgb(var(--lamp-rgb) / 0.5);
  color: var(--lamp);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 56px;
  box-shadow: 0 0 60px -10px rgb(var(--lamp-rgb) / 0.5);
}

/* ============================ VIDEO ============================ */
.m-video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(80% 80% at 50% 30%, var(--room-lit), var(--surface-base));
  border: 1px solid var(--line);
  color: var(--ink);
  isolation: isolate;
  container-type: inline-size;
  transition: box-shadow 0.25s ease;
}
.m-video.is-portrait {
  aspect-ratio: 9 / 16;
}
.m-video.is-square {
  aspect-ratio: 1 / 1;
}
.m-video.is-round {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 3px solid var(--paper);
  box-shadow: var(--sh-lg);
}
.m-video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  background: transparent;
}
.m-video.no-video > video,
.m-video.cam-off > video {
  display: none;
}
.m-video-off {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 0;
}
.m-video-off .m-av {
  --av: clamp(36px, 28cqi, 96px);
  --ring: 2px;
}
.m-video.is-portrait .m-video-off .m-av,
.m-video.is-square .m-video-off .m-av,
.m-video.is-round .m-video-off .m-av {
  --av: clamp(36px, 42cqi, 96px);
}
.m-video-name {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  /* block, not inline-flex: text-overflow never renders on a flex container's text */
  display: block;
  max-width: calc(100% - 16px);
  height: 22px;
  line-height: 22px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  background: rgb(var(--surface-base-rgb) / 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-video-name .m-ic {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: -2px;
}
.m-video-mic,
.m-video-hand {
  position: absolute;
  top: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.m-video-mic {
  right: 8px;
  background: rgb(var(--dnd-rgb) / 0.9);
  color: var(--ink);
}
.m-video-mic .m-ic,
.m-video-hand .m-ic {
  width: 13px;
  height: 13px;
}
.m-video-hand {
  left: 8px;
  background: var(--lamp);
  color: var(--on-lamp);
  animation: m-wave-hand 1.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes m-wave-hand {
  0%,
  60%,
  100% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(-14deg);
  }
  30% {
    transform: rotate(10deg);
  }
  45% {
    transform: rotate(-6deg);
  }
}
.m-video.is-speaking {
  box-shadow:
    0 0 0 2px var(--cyan),
    0 0 24px -4px rgb(var(--cyan-rgb) / 0.6);
  animation: m-speak 1.4s ease-in-out infinite;
}
@keyframes m-speak {
  50% {
    box-shadow:
      0 0 0 2px var(--cyan),
      0 0 34px 0 rgb(var(--cyan-rgb) / 0.35);
  }
}
.m-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.m-video-grid.is-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@container mock (max-width: 420px) {
  .m-video-grid.is-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.m-share {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  aspect-ratio: 16 / 10;
}
.m-share-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cyan-ink);
  background: rgb(var(--cyan-rgb) / 0.1);
  border-bottom: 1px solid rgb(var(--cyan-rgb) / 0.25);
}
.m-share-bar .m-ic {
  width: 13px;
  height: 13px;
}

/* ============================ CHAT ============================ */
.m-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.m-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  max-width: 92%;
}
.m-msg > .m-av {
  --av: 32px;
  --ring: 2px;
}
.m-msg-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.m-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-muted);
}
.m-msg-meta b {
  color: var(--ink);
  font-weight: 700;
}
.m-msg-meta time {
  font-size: 11px;
}
.m-bubble {
  padding: 8px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.m-msg.is-own {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.m-msg.is-own .m-msg-body {
  align-items: flex-end;
}
.m-msg.is-own .m-bubble {
  border-radius: 14px 4px 14px 14px;
  background: rgb(var(--lamp-rgb) / 0.14);
  border-color: rgb(var(--lamp-rgb) / 0.28);
}
.m-forward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-muted);
}
.m-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
}
.m-typing > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-50);
  animation: m-typing 1.2s ease-in-out infinite;
}
.m-typing > i:nth-child(2) {
  animation-delay: 0.15s;
}
.m-typing > i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes m-typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
.m-reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.m-react {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: 12px;
}
.m-react b {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-70);
}
.m-react.is-mine {
  background: rgb(var(--lamp-rgb) / 0.14);
  border-color: rgb(var(--lamp-rgb) / 0.4);
}
.m-voice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  max-width: 100%;
  padding: 6px 12px 6px 6px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.m-voice-play {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lamp);
  color: var(--on-lamp);
}
.m-voice-play .m-ic {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.m-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  min-width: 0;
}
.m-wave > span {
  flex: 1;
  max-width: 3px;
  min-width: 2px;
  height: calc(var(--h, 0.5) * 100%);
  border-radius: 2px;
  background: var(--ink-50);
}
.m-voice.is-playing .m-wave > span {
  animation: m-bar 1s ease-in-out infinite;
  animation-delay: calc(var(--h, 0.5) * -1s);
}
.m-voice.is-playing .m-wave > span:nth-child(-n + 9) {
  background: var(--lamp);
}
@keyframes m-bar {
  50% {
    transform: scaleY(0.55);
  }
}
.m-voice time {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.m-attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 12px 8px 8px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  font-size: 12px;
}
.m-attach > .m-ic {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: var(--r-sm);
  background: rgb(var(--cyan-rgb) / 0.12);
  color: var(--cyan-ink);
}
.m-attach-name {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.m-attach-size {
  color: var(--ink-muted);
  font-size: 11px;
  white-space: nowrap;
}
.m-thread {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan-ink);
}
.m-thread .m-av {
  --av: 18px;
  --ring: 1.5px;
}
.m-pinned {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: rgb(var(--lamp-rgb) / 0.08);
  border: 1px solid rgb(var(--lamp-rgb) / 0.22);
  font-size: 12px;
  color: var(--ink-70);
  min-width: 0;
}
.m-pinned .m-ic {
  color: var(--lamp);
  width: 14px;
  height: 14px;
}
.m-pinned span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-taskref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-sm);
  background: rgb(var(--lamp-rgb) / 0.14);
  color: var(--lamp);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.m-composer {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 4px 4px 4px 8px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
}
.m-composer button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  flex: none;
}
.m-composer button:hover {
  background: var(--wash);
  color: var(--ink);
}
.m-composer .m-send {
  background: var(--lamp);
  color: var(--on-lamp);
}
.m-composer .m-send:hover {
  background: var(--lamp);
  filter: brightness(1.06);
}
.m-input-ghost {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-input-ghost.is-typed {
  color: var(--ink);
}

/* ============================ TASKS ============================ */
.m-board {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
@container mock (max-width: 620px) {
  .m-board {
    grid-template-columns: minmax(0, 1fr);
  }
}
.m-board-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: var(--r-lg);
  background: var(--wash);
  border: 1px solid var(--line);
  min-width: 0;
}
.m-board-h {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-70);
}
.m-board-n {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.m-task {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  min-width: 0;
  color: var(--ink);
  transition:
    transform 0.2s var(--ease-out),
    box-shadow 0.2s ease;
}
.m-task:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.m-task-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.m-task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 11.5px;
  color: var(--ink-muted);
}
.m-prio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
}
.m-prio > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.m-prio.is-high {
  color: var(--dnd);
}
.m-prio.is-med {
  color: var(--st-meeting);
}
.m-prio.is-low {
  color: var(--cyan-ink);
}
.m-due {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.m-due .m-ic {
  width: 12px;
  height: 12px;
}
.m-due.is-late {
  color: var(--dnd);
  font-weight: 600;
}
.m-budget,
.m-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-muted);
}
.m-budget > i,
.m-steps > i {
  position: relative;
  display: block;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--wash-2);
  overflow: hidden;
}
.m-budget > i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--pct, 0.5) * 100%);
  border-radius: inherit;
  background: var(--lamp);
  transition: width 0.8s var(--ease-out);
}
.m-budget.is-over > i::after {
  width: 100%;
  background: var(--dnd);
}
.m-budget.is-over {
  color: var(--dnd);
}
.m-steps > i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--done, 1) / var(--total, 4) * 100%);
  border-radius: inherit;
  background: var(--cyan);
  transition: width 0.8s var(--ease-out);
}
.m-task-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}
.m-task-foot > :last-child {
  margin-left: auto;
}
.m-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: rgb(var(--lamp-rgb) / 0.14);
  color: var(--lamp);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.m-timer > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: m-blink 1.6s ease-in-out infinite;
}
.m-timer.is-paused,
.m-task.is-paused .m-timer {
  background: var(--wash-2);
  color: var(--ink-muted);
}
.m-timer.is-paused > i,
.m-task.is-paused .m-timer > i {
  animation: none;
  border-radius: 1px;
  width: 6px;
  height: 7px;
  background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px);
}
.m-done-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: rgb(var(--cyan-rgb) / 0.12);
  color: var(--cyan-ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.m-done-tag .m-ic {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}
.m-pause-reason {
  padding: 6px 10px;
  border-left: 2px solid var(--st-meeting);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--st-meeting) 10%, transparent);
  font-size: 12px;
  color: var(--ink-70);
  font-style: italic;
}

/* ============================ AGENT ============================
   The AI orb, ported from the product (apps/web/src/index.css .agent-orb*, the
   DOM of agent/AgentOrb.tsx): a waveform on a canvas inside a dark glass sphere.
   landing.js (AI orb) swaps the <i> for the product's layers:
     .m-orb-halo     ambient glow, lit only while data-live="1" (hero only)
     .m-orb-body     the sphere; clips the canvas to the circle
       .m-orb-canvas the wave (painted by landing.js)
       .m-orb-glass  rim light + specular, ON TOP of the canvas
     .m-orb-floor    the glow's puddle under the ball (hero only)
   and sets --orb-glow (the agent's "R G B"), data-live and .is-hero / .is-chip.
   Without JS (or before it runs) the <i> alone is the same sphere, static: the
   body and glass layers merged into one element.
   The orb is dark glass in both themes (the product renders it .keep-dark), so
   the colours here are the product's own rgba literals, not theme tokens. The
   one animation the product's CSS has is the halo's 0.5s fade; the wave itself
   is a canvas, so reduced motion is handled in landing.js. */
.m-orb {
  --orb: 48px;
  position: relative;
  flex: none;
  display: inline-block;
  vertical-align: middle;
  width: var(--orb);
  height: var(--orb);
  border-radius: 50%;
  isolation: isolate;
}
.m-orb-sm {
  --orb: 22px;
}
.m-orb-lg {
  --orb: 96px;
}
/* The sphere (index.css .agent-orb-body). */
.m-orb-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 46%),
    radial-gradient(100% 100% at 50% 50%, rgba(18, 22, 34, 0.86), rgba(8, 10, 16, 0.96));
  box-shadow:
    inset 0 0 40px rgba(120, 160, 255, 0.1),
    inset 0 -18px 40px rgba(90, 40, 160, 0.18),
    0 0 0 1px rgba(190, 210, 255, 0.16),
    0 0 44px rgba(90, 120, 255, 0.1);
}
/* The collapsed icon (index.css .agent-orb-chip .agent-orb-body): the hero's
   shadows are quoted for a 128px ball, so a chip gets them at chip scale, tinted
   by the agent, plus the white ring that lifts it off a light surface. */
.m-orb.is-chip .m-orb-body {
  box-shadow:
    inset 0 0 14px rgb(var(--orb-glow, 90 120 255) / 0.16),
    inset 0 -6px 14px rgba(10, 12, 20, 0.5),
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 16px 2px rgb(var(--orb-glow, 90 120 255) / 0.5),
    0 6px 12px -4px rgba(15, 23, 42, 0.45);
}
.m-orb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.m-orb-glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(
      58% 42% at 32% 20%,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.06) 52%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(30% 18% at 72% 84%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%);
  box-shadow:
    inset 0 0 0 1px rgba(226, 236, 255, 0.3),
    inset 0 2px 18px rgba(255, 255, 255, 0.1),
    inset 0 -10px 26px rgba(140, 90, 220, 0.14);
}
.m-orb-halo {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgb(var(--orb-glow, 90 120 255) / 0.2),
    rgba(0, 0, 0, 0) 70%
  );
  opacity: 0; /* idle is unlit: the orb is awake, not working */
  transition: opacity 0.5s ease;
}
.m-orb[data-live="1"] > .m-orb-halo {
  opacity: 1;
}
.m-orb-floor {
  position: absolute;
  left: 50%;
  bottom: -14%;
  translate: -50% 0;
  width: 62%;
  height: 14%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgb(var(--orb-glow, 90 120 255) / 0.3),
    rgba(0, 0, 0, 0) 72%
  );
  filter: blur(6px);
  opacity: 0.8;
}
/* The halo and floor are hero furniture: a chip's surface draws its own glow. */
.m-orb.is-chip > .m-orb-halo,
.m-orb.is-chip > .m-orb-floor {
  display: none;
}
/* No JS yet: the <i> is the body and the glass in one layer (glass on top). */
.m-orb > i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      58% 42% at 32% 20%,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0.06) 52%,
      rgba(255, 255, 255, 0) 70%
    ),
    radial-gradient(30% 18% at 72% 84%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%),
    radial-gradient(120% 120% at 30% 22%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 46%),
    radial-gradient(100% 100% at 50% 50%, rgba(18, 22, 34, 0.86), rgba(8, 10, 16, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(226, 236, 255, 0.3),
    inset 0 2px 18px rgba(255, 255, 255, 0.1),
    inset 0 -10px 26px rgba(140, 90, 220, 0.14),
    inset 0 0 40px rgba(120, 160, 255, 0.1),
    inset 0 -18px 40px rgba(90, 40, 160, 0.18),
    0 0 0 1px rgba(190, 210, 255, 0.16),
    0 0 44px rgba(90, 120, 255, 0.1);
}
.m-orb-sm > i,
.m-orb[data-orb-variant="chip"] > i {
  box-shadow:
    inset 0 0 0 1px rgba(226, 236, 255, 0.3),
    inset 0 2px 18px rgba(255, 255, 255, 0.1),
    inset 0 0 14px rgb(var(--orb-glow, 90 120 255) / 0.16),
    inset 0 -6px 14px rgba(10, 12, 20, 0.5),
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 16px 2px rgb(var(--orb-glow, 90 120 255) / 0.5),
    0 6px 12px -4px rgba(15, 23, 42, 0.45);
}
/* Shared pulse ring (no longer used by the orb; .m-knock still uses it). */
@keyframes m-ring {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
.m-caption {
  position: relative;
  display: inline-block;
  max-width: 320px;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-md);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}
.m-caption.is-ai {
  border-color: rgb(var(--cyan-rgb) / 0.35);
}
.m-caption.is-ai::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 14px;
  width: 10px;
  height: 10px;
  background: inherit;
  border-left: 1px solid rgb(var(--cyan-rgb) / 0.35);
  border-bottom: 1px solid rgb(var(--cyan-rgb) / 0.35);
  transform: rotate(45deg);
}

/* ============================ MOTION PIECES ============================ */
.m-knock {
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
}
.m-knock::before,
.m-knock::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgb(var(--lamp-rgb) / 0.7);
  z-index: -1;
  animation: m-ring 1.6s ease-out infinite;
}
.m-knock::after {
  animation-delay: 0.8s;
}
.m-knock.is-square::before,
.m-knock.is-square::after {
  border-radius: var(--r-md);
}
.m-reactions {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}
.m-float {
  position: absolute;
  left: var(--x, 50%);
  bottom: 12%;
  font-size: 26px;
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  animation: m-float 2.6s ease-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes m-float {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translateY(-14px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-140px) scale(1) rotate(8deg);
  }
}
/* Lamp turn-on. The lit look fades in on a pseudo layer because gradients do
   not transition. Unlit by default; lit with .is-on or .m-lamp-from-N. */
.plan-tile.m-lamp {
  background: var(--room-unlit);
}
.plan-tile.m-lamp::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 130% at 50% 24%, color-mix(in srgb, rgb(var(--lamp-rgb)) var(--g), transparent), transparent 72%),
    var(--room-lit);
  opacity: 0;
  transition: opacity 0.9s ease;
}
[data-theme="light"] .plan-tile.m-lamp::after {
  background: var(--room-lit);
}
.plan-tile.m-lamp.is-on::after {
  opacity: 1;
}
.plan-tile.m-lamp.is-on {
  --tile-edge: color-mix(in srgb, rgb(var(--lamp-rgb)) 50%, var(--tile-line));
  --tile-pool: var(--lit-pool);
  --tile-glow: var(--lit-spill), var(--lit-inner);
  transition:
    box-shadow 0.9s ease,
    border-color 0.9s ease;
}
.plan-tile.m-lamp.is-on .plan-nm {
  color: var(--tile-ink);
}
.plan-tile.m-lamp.is-on .plan-line {
  color: var(--lamp-ink);
}
/* the caret takes NO layout width (2px + 2px margin - 4px), so dropping it never narrows a bubble */
.m-caret::after,
.m-caret .m-typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  margin-right: -4px;
  vertical-align: -0.12em;
  background: var(--lamp);
  animation: m-caret 1s steps(1) infinite;
}
/* typer markup: <span class="m-typed"> grows, <span class="m-type-rest"> is the unwritten
   remainder; hidden but laid out, so the bubble keeps its final wrap from the first letter.
   With a .m-typed child the caret sits after the typed part, not after the hidden rest. */
.m-type-rest {
  visibility: hidden;
}
.m-caret:has(> .m-typed)::after {
  content: none;
}
@keyframes m-caret {
  50% {
    opacity: 0;
  }
}
.m-pulse {
  animation: m-blink 1.6s ease-in-out infinite;
}
@keyframes m-blink {
  50% {
    opacity: 0.35;
  }
}

/* ============================ CHARTS ============================ */
.m-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-ui);
}
.m-axis {
  fill: var(--ink-muted);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.m-gridline {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.m-threshold {
  stroke: var(--coral);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  fill: none;
}
.m-area-cyan {
  fill: rgb(var(--cyan-rgb) / 0.18);
  stroke: none;
}
.m-area-lamp {
  fill: rgb(var(--lamp-rgb) / 0.2);
  stroke: none;
}
.m-line-cyan,
.m-line-lamp {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.m-line-cyan {
  stroke: var(--cyan);
}
.m-line-lamp {
  stroke: var(--lamp);
}
.m-bar-cyan {
  fill: var(--cyan);
}
.m-bar-lamp {
  fill: var(--lamp);
}
.m-bar-muted {
  fill: var(--wash-2);
}
.m-dot-lamp {
  fill: var(--lamp);
  stroke: var(--paper);
  stroke-width: 2;
}
.m-dot-cyan {
  fill: var(--cyan);
  stroke: var(--paper);
  stroke-width: 2;
}
.m-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.js .reveal:not(.is-in) .m-draw {
  stroke-dashoffset: 1;
}
.js .reveal.is-in .m-draw {
  transition: stroke-dashoffset 1.6s var(--ease-out) 0.2s;
}
.js .reveal:not(.is-in) .m-bar-grow {
  transform: scaleY(0);
}
.m-bar-grow {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms + 200ms);
}

/* ============================ SCENES ============================
   landing.js puts step-1..step-N (and data-step="N") on [data-scene]. These
   helpers fade parts in and out by step. Generated for N = 1..8. */
[data-scene] :is(.m-from-1, .m-from-2, .m-from-3, .m-from-4, .m-from-5, .m-from-6, .m-from-7, .m-from-8,
  .m-until-1, .m-until-2, .m-until-3, .m-until-4, .m-until-5, .m-until-6, .m-until-7,
  .m-only-1, .m-only-2, .m-only-3, .m-only-4, .m-only-5, .m-only-6, .m-only-7, .m-only-8) {
  transition:
    opacity 0.45s ease,
    transform 0.45s var(--ease-out),
    visibility 0s linear 0s;
}
/* hidden states (only once JS has started the scene, so a no-JS page shows everything) */
.js [data-scene] .m-from-1,
.js [data-scene] .m-only-1,
.js [data-scene] .m-from-2,
.js [data-scene] .m-only-2,
.js [data-scene] .m-from-3,
.js [data-scene] .m-only-3,
.js [data-scene] .m-from-4,
.js [data-scene] .m-only-4,
.js [data-scene] .m-from-5,
.js [data-scene] .m-only-5,
.js [data-scene] .m-from-6,
.js [data-scene] .m-only-6,
.js [data-scene] .m-from-7,
.js [data-scene] .m-only-7,
.js [data-scene] .m-from-8,
.js [data-scene] .m-only-8 {
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.45s var(--ease-out),
    visibility 0s linear 0.45s;
}
.js [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .m-from-1,
.js [data-scene].step-1 .m-only-1,
.js [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .m-from-2,
.js [data-scene].step-2 .m-only-2,
.js [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .m-from-3,
.js [data-scene].step-3 .m-only-3,
.js [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .m-from-4,
.js [data-scene].step-4 .m-only-4,
.js [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .m-from-5,
.js [data-scene].step-5 .m-only-5,
.js [data-scene]:is(.step-6, .step-7, .step-8) .m-from-6,
.js [data-scene].step-6 .m-only-6,
.js [data-scene]:is(.step-7, .step-8) .m-from-7,
.js [data-scene].step-7 .m-only-7,
.js [data-scene]:is(.step-8) .m-from-8,
.js [data-scene].step-8 .m-only-8 {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.45s ease,
    transform 0.45s var(--ease-out),
    visibility 0s linear 0s;
}
.js [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .m-until-1,
.js [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .m-until-2,
.js [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .m-until-3,
.js [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .m-until-4,
.js [data-scene]:is(.step-6, .step-7, .step-8) .m-until-5,
.js [data-scene]:is(.step-7, .step-8) .m-until-6,
.js [data-scene]:is(.step-8) .m-until-7 {
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.45s var(--ease-out),
    visibility 0s linear 0.45s;
}
/* .m-lamp-from-N: a .plan-tile.m-lamp that lights at step N */
.js [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-1::after,
.js [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-2::after,
.js [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-3::after,
.js [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-4::after,
.js [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-5::after,
.js [data-scene]:is(.step-6, .step-7, .step-8) .plan-tile.m-lamp-from-6::after,
.js [data-scene]:is(.step-7, .step-8) .plan-tile.m-lamp-from-7::after,
.js [data-scene]:is(.step-8) .plan-tile.m-lamp-from-8::after {
  opacity: 1;
}
.js [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-1,
.js [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-2,
.js [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-3,
.js [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-4,
.js [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-5,
.js [data-scene]:is(.step-6, .step-7, .step-8) .plan-tile.m-lamp-from-6,
.js [data-scene]:is(.step-7, .step-8) .plan-tile.m-lamp-from-7,
.js [data-scene]:is(.step-8) .plan-tile.m-lamp-from-8 {
  --tile-edge: color-mix(in srgb, rgb(var(--lamp-rgb)) 50%, var(--tile-line));
  --tile-pool: var(--lit-pool);
  --tile-glow: var(--lit-spill), var(--lit-inner);
  transition:
    box-shadow 0.9s ease,
    border-color 0.9s ease;
}
.js [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-1 .plan-nm,
.js [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-2 .plan-nm,
.js [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-3 .plan-nm,
.js [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-4 .plan-nm,
.js [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-5 .plan-nm,
.js [data-scene]:is(.step-6, .step-7, .step-8) .plan-tile.m-lamp-from-6 .plan-nm,
.js [data-scene]:is(.step-7, .step-8) .plan-tile.m-lamp-from-7 .plan-nm,
.js [data-scene]:is(.step-8) .plan-tile.m-lamp-from-8 .plan-nm {
  color: var(--tile-ink);
}
.js [data-scene]:is(.step-1, .step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-1 .plan-line,
.js [data-scene]:is(.step-2, .step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-2 .plan-line,
.js [data-scene]:is(.step-3, .step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-3 .plan-line,
.js [data-scene]:is(.step-4, .step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-4 .plan-line,
.js [data-scene]:is(.step-5, .step-6, .step-7, .step-8) .plan-tile.m-lamp-from-5 .plan-line,
.js [data-scene]:is(.step-6, .step-7, .step-8) .plan-tile.m-lamp-from-6 .plan-line,
.js [data-scene]:is(.step-7, .step-8) .plan-tile.m-lamp-from-7 .plan-line,
.js [data-scene]:is(.step-8) .plan-tile.m-lamp-from-8 .plan-line {
  color: var(--lamp-ink);
}

/* ============================ REDUCED MOTION ============================
   Everything settles: loops stop, entrances are already done. Scenes are pinned
   to their rest step by landing.js. The orb's wave is a canvas: landing.js paints
   one still frame (t=1.7, the rest step's state) and runs no loop; here only its
   halo fade is stopped. */
@media (prefers-reduced-motion: reduce) {
  [data-scene],
  [data-scene] *,
  .m-window *,
  .m-mock *,
  .m-stage *,
  .m-window,
  .m-mock,
  .iso-live-dot,
  .plan-tile,
  .plan-tile::after,
  .plan-tile::before,
  .m-orb-halo,
  .m-knock::before,
  .m-knock::after,
  .m-float,
  .m-typing > i,
  .m-wave > span,
  .m-timer > i,
  .m-rec > i,
  .tag .tdot,
  .knocking-pill,
  .m-video,
  .m-video-hand,
  .m-caret::after,
  .m-caret .m-typed::after,
  .m-pulse,
  .m-pop,
  .m-plan.m-rise > * {
    animation: none !important;
    transition: none !important;
  }
  .m-float {
    opacity: 0.9;
    transform: translateY(-40px);
  }
  .m-knock::before {
    transform: scale(1.35);
    opacity: 0.45;
  }
  .js .reveal:not(.is-in) .m-draw {
    stroke-dashoffset: 0;
  }
  .js .reveal:not(.is-in) .m-bar-grow {
    transform: none;
  }
}