/* ============================================================================
   experience.css — the approved drill-down experience (Home + Read zoom axis).
   ============================================================================
   The CSS + DOM here are lifted as-literally-as-practical from the approved
   design file (design-handoff/reference-app/Home Drilldown Concept.html): the
   top chrome, Home (greeting · orb · doors), and the Read zoom-axis shell.

   Two things differ from the design file, both forced and intentional:
     • the orb is NOT the design's re-drawn CSS sphere — it's the existing shared
       easy-button (styles/easy-button.css), which is the production Brain Purge
       trigger + its locked animation. We only place it.
     • the design file's demo tokens live under :root; here they're scoped to
       .mbx-app so they don't disturb the rest of the app. Values are copied
       verbatim from the design file.
   All rules are scoped under .mbx-app so nothing collides with existing views.
   ============================================================================ */

/* ---- design tokens (verbatim from the design file :root), scoped ----------- */
/* TRACKED FOLLOW-UP · token convergence — this scoped block is TEMPORARY. It
   exists only because legacy views still read the old global tokens.css values
   while the new surfaces need the design values. As surfaces migrate (PR2–PR7),
   global tokens.css converges to the design values and THIS block is deleted —
   likely in PR7 or a dedicated convergence PR. Do not let it become permanent. */
.mbx-app{
  --forest:#141A15; --card:#12180F; --moss:#3A5043;
  --pistachio:#BFE89A; --pistachio-deep:#9BBE86; --citron:#CFE3A6;
  --bp-logo:#3FB417; --bp-dot:#7C4DD6;
  --info:#AEBAC0; --care:#D8B9A8; --gold:#D4AF5C; --warn:#CBB07E; --me:#A8969E;
  /* --ink --border --euc --sage --cream --body --muted --hint --violet + fonts
     already exist globally with identical values — inherited, not re-declared. */

  min-height:100vh; display:flex; flex-direction:column;
  width:100%; max-width:620px; margin:0 auto; padding:22px 22px 40px;
  transition:max-width .25s ease;
}
.mbx-app.wide{max-width:940px;}

/* cinematic glow — soft warmth wrapping the scene (design's body::before), scoped */
.mbx-app::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 20% 8%, rgba(226,186,104,0.16), rgba(212,175,92,0.05) 42%, transparent 70%),
    radial-gradient(110% 85% at 88% 100%, rgba(190,142,58,0.12), transparent 64%),
    radial-gradient(140% 120% at 50% 46%, transparent 52%, rgba(0,0,0,0.42) 100%);
  animation:mbxPageGlow 11s ease-in-out infinite;}
@keyframes mbxPageGlow{0%,100%{opacity:.82;}50%{opacity:1;}}
.mbx-app > .top, .mbx-app > .view{position:relative; z-index:1;}
/* the shared #view slot: drop shell.css's rail-era padding; let Home/Read fill */
.mbx-app > .view{flex:1; min-width:0; padding:0; display:flex; flex-direction:column;}

/* ---------- top chrome ---------- */
/* The ONE header spans the SAME viewport-centered full width the wide Week/Month grids use
   (min(960px,94vw)), on EVERY zoom surface — so the logo's left edge sits flush with the
   first day card, and the header is identical on Today / Week / Month / Ahead. The grids
   keep their own full-viewport breathing room (untouched). (2026-07-29 — replaces the
   reverted attempt that narrowed the grids into the container.) */
.mbx-app .top{position:relative; left:50%; transform:translateX(-50%); width:min(960px,94vw);
  display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px;}
/* THE BRAND IS THE HOME AFFORDANCE. The joystick + wordmark + family line are one
   real <button data-action="go-home"> — the SAME action the "← home" button emits,
   routed by the shell's existing delegated handler. A real button (not a div with
   role/tabindex) is what keeps click AND keyboard native, so no new key handling
   exists anywhere. These declarations only strip the UA button chrome so the brand
   renders byte-identically to the former <div>; the layout rules below are unchanged. */
.mbx-app .fam{display:flex; flex-direction:row; align-items:center; gap:10px;
  background:none; border:0; padding:0; margin:0; font:inherit; color:inherit;
  text-align:left; cursor:pointer; -webkit-appearance:none; appearance:none;}
/* Keyboard focus was impossible on the old div — this ADDS the ring, removes nothing. */
.mbx-app .fam:focus-visible{outline:2px solid var(--euc); outline-offset:4px; border-radius:12px;}
.mbx-app .fam .brandmark{width:34px;height:34px;flex:none;}
.mbx-app .fam .famtx{display:flex;flex-direction:column;gap:5px;}
.mbx-app .fam .who{font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--body);}
.mbx-app .fam .brand{font-family:var(--display); font-weight:800; font-size:21px; color:var(--cream); letter-spacing:-.01em;}
.mbx-app .fam .brand .brn{color:var(--pistachio);}
.mbx-app .fam .brand .ci{position:relative;}
.mbx-app .fam .brand .ci::before{content:""; position:absolute; left:50%; top:-.02em; width:.17em; height:.17em; border-radius:50%; background:var(--bp-dot); transform:translateX(-50%);}
.mbx-app .backbtn{border:1px solid var(--border); background:var(--forest); color:var(--body); font-family:var(--mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:8px 12px; border-radius:99px; cursor:pointer;
  display:none; align-items:center; gap:7px; transition:.18s;}
.mbx-app .backbtn:hover{border-color:var(--euc); color:var(--cream);}
.mbx-app[data-screen="read"] .backbtn{display:inline-flex;}
/* desktop-only Search control — replaces go-home on desktop; reuses the search
   glyph + the Home door's "coming soon" treatment; disabled + inert (no route,
   no handler). Mobile keeps the go-home button exactly as-is. */
.mbx-app .searchbtn{display:none; align-items:center; gap:8px; height:38px; border:1px solid var(--border); background:var(--forest); color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:0 13px; border-radius:99px; cursor:default;}
.mbx-app .searchbtn svg{width:14px; height:14px; flex:none;}
.mbx-app .searchbtn .soon{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--euc); border:1px solid var(--border); border-radius:99px; padding:3px 7px; flex:none;}
@media(min-width:768px){
  .mbx-app[data-screen="read"] .backbtn{display:none;}
  .mbx-app[data-screen="read"] .searchbtn{display:inline-flex;}
}
.mbx-app .topright{display:flex;align-items:center;gap:9px;}
.mbx-app .adminbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--forest);color:var(--body);cursor:pointer;display:grid;place-items:center;transition:.16s;}
.mbx-app .adminbtn:hover{border-color:var(--euc);color:var(--cream);}
.mbx-app .adminbtn svg{width:18px;height:18px;}
/* persistent top-level doorways (Calendar / People) + the "Add something" Direct Entry
   action. Calendar/People route via the .navitem data-view seam; Add is a chrome action
   (data-action), so it shares the treatment but not .navitem. More specific than the
   unscoped .navitem, so it wins. */
.mbx-app .peoplebtn,
.mbx-app .addbtn,
.mbx-app .calbtn{display:inline-flex;align-items:center;gap:8px;height:38px;border:1px solid var(--border);background:var(--forest);color:var(--body);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:0 14px;border-radius:99px;cursor:pointer;transition:.16s;}
.mbx-app .peoplebtn:hover,
.mbx-app .addbtn:hover,
.mbx-app .calbtn:hover{border-color:var(--euc);color:var(--cream);}
.mbx-app .peoplebtn.on,
.mbx-app .calbtn.on{border-color:var(--euc);color:var(--cream);background:var(--raised);}
.mbx-app .addbtn .add-plus{font-size:16px;line-height:1;font-weight:600;}
/* Canonical top-nav icon size (2026-07-25). The icons are shared.icon() <img class="mb-ic">,
   not inline <svg> — the old `svg` selector never matched, so both buttons fell back to the
   base .mb-ic 1em (~11px) and read undersized. Target the actual icon element so Home and
   People share one 15px sizing contract (no per-button CSS, no SVG scaling). */
.mbx-app .peoplebtn .mb-ic,
.mbx-app .calbtn .mb-ic{width:15px;height:15px;flex:none;}

/* ============ HOME ============ */
.mbx-app .home{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; text-align:center; padding-bottom:24px;}
.mbx-app .home .hi{font-family:var(--rounded); font-weight:600; font-size:16px; color:var(--pistachio); text-transform:lowercase; margin-bottom:26px; letter-spacing:.01em;}
/* orb placement — the design's .orb-wrap slot, but hosting the shared easy-button */
.mbx-app .orb-slot{margin:0 auto 8px; display:flex; justify-content:center;}
.mbx-app .orb-cap{font-family:var(--rounded); font-weight:500; font-size:13.5px; color:var(--muted); margin:18px 0 34px;}

/* the two calmer doors */
.mbx-app .doors{width:100%; max-width:420px; display:flex; flex-direction:column; gap:12px;}
.mbx-app .door{display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:var(--forest); border:1px solid var(--border); border-radius:16px; padding:15px 18px; transition:.18s;}
.mbx-app .door:hover{border-color:var(--euc); background:#171e18; transform:translateY(-1px);}
.mbx-app .door .ic{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--card);border:1px solid var(--border);color:var(--pistachio);}
.mbx-app .door .ic svg{width:20px;height:20px;}
.mbx-app .door .ic.todayglyph{background:transparent;border-color:transparent;}
.mbx-app .door .ic.todayglyph svg{width:34px;height:34px;}
.mbx-app .door .tx{flex:1;display:flex;flex-direction:column;}
.mbx-app .door .tx .t{display:block;font-family:var(--display);font-weight:700;font-size:16px;color:var(--cream);}
.mbx-app .door .tx .s{display:block;font-size:13px;color:var(--muted);margin-top:1px;}
.mbx-app .door .arw{color:var(--hint);font-size:18px;}
.mbx-app .door.search{cursor:default;}
.mbx-app .door.search .tx .t{font-weight:500;color:var(--hint);font-family:var(--sans);font-size:15px;}
.mbx-app .door.search .ic{color:var(--muted);}
/* Search isn't wired yet — kept in its designed place, marked coming soon */
.mbx-app .door.search .soon{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--euc);border:1px solid var(--border);border-radius:99px;padding:3px 8px;flex:none;}

/* ============ READ (zoom axis) ============ */
.mbx-app .read{flex:1; display:flex; flex-direction:column; gap:0;}
.mbx-app .zoom{display:flex; gap:6px; background:var(--forest); border:1px solid var(--border); border-radius:14px; padding:5px; margin:6px 0 4px;}
.mbx-app .zoom button{flex:1; border:0; background:transparent; color:var(--muted); font-family:var(--display); font-weight:600; font-size:13.5px;
  padding:9px 6px; border-radius:10px; cursor:pointer; transition:.16s; letter-spacing:.01em;}
.mbx-app .zoom button:hover{color:var(--cream);}
.mbx-app .zoom button.on{background:var(--pistachio); color:var(--ink);}
.mbx-app .zoom button[data-soon]{color:var(--hint);}
.mbx-app .horizon-head{display:flex; align-items:center; justify-content:space-between; gap:24px; margin:24px 2px 18px;}
/* ── THE SHARED READ FRAME (2026-08-04) ────────────────────────────────────────
   Today, Week, Month and Ahead all render readFrame(), so the title block, the
   date row and the orb occupy IDENTICAL positions and nothing bounces on tab
   switch. Geometry lives here only — no per-view margins. The head is a fixed
   two-column row (title left, orb right) whose height is the orb's, so a one-line
   title + subtitle and a two-line greeting both centre in the same band. */
.mbx-app .rframe-head{display:flex;align-items:center;justify-content:space-between;
  gap:24px;margin:0 2px;min-height:var(--rframe-orb,160px);}
.mbx-app .rframe-head .hh-tx{display:flex;flex-direction:column;min-width:0;}
/* THE ORB SITS LOWER THAN ITS BAND (2026-08-10, founder). The dome is 160px but its
   HALO reaches far past that, so centred in the head it bled up over the Today/Week/
   Month/Ahead tabs on every view. Nudged down visually with `top` rather than margin so
   the band's height, the title's position and everything below it are untouched — the
   right-hand column is empty beneath the head on all four views, so it has room to fall
   into. One number to tune. */
.mbx-app .rframe-head > .eb-rig{position:relative;top:44px;}
/* the date row: arrows grouped left, the date/range immediately to their right */
.mbx-app .rframe-nav{margin:0 2px var(--s4);gap:10px;}
.mbx-app .rframe-nav .mtitle{margin-left:4px;}
.mbx-app .horizon-head .hh-tx{display:flex; flex-direction:column; min-width:0;}   /* title + subtitle as one left text block; the orb is the hero action on the right — both in flow, so nothing overlaps the date nav below */
.mbx-app .horizon-head h2{font-family:var(--display); font-weight:800; font-size:var(--fs-title); color:var(--cream); letter-spacing:-.02em;}
.mbx-app .horizon-head .rng{font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.mbx-app .horizon-sub{font-family:var(--rounded); font-weight:500; font-size:13.5px; color:var(--pistachio); margin:4px 0 0; text-transform:lowercase;}
.mbx-app .list{display:flex; flex-direction:column; gap:11px; padding-bottom:20px;}
.mbx-app .empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:64px 20px 72px; gap:4px;}
.mbx-app .empty-ic{color:var(--pistachio); opacity:.9;}
.mbx-app .empty-ic svg{width:52px; height:52px; display:block; animation:sproutSway 6s ease-in-out infinite; transform-origin:50% 100%;}
@keyframes sproutSway{0%,100%{transform:rotate(-2.5deg);}50%{transform:rotate(2.5deg);}}
.mbx-app .empty-t{font-family:var(--display); font-weight:700; font-size:18px; color:var(--cream); margin-top:14px; letter-spacing:-.01em;}
.mbx-app .empty-s{font-family:var(--rounded); font-weight:500; font-size:13px; color:var(--muted); max-width:280px; line-height:1.5;}

/* ============ TODAY — coverage, not facts (PR2) ============================
   Lifted from the approved design (Home Drilldown Concept.html, the Today block),
   scoped under .mbx-app. Only the WIRED surfaces are included — kid lanes, the
   by-person/by-time toggle, the chronological list, the day-nav. The design's
   coverage BANNERS (.shift/.cover/.clash/.handled/.crewsync/.avail) are omitted:
   they are unwired even in the design and need detection logic MamaBrain does not
   have yet (approved scope boundary). ============================================ */

/* day-nav */
/* THE VIEWER-AWARE HOME (Unit 4) — the greeting is the front-door welcome above the date nav; the
   time-of-day neutral voice reads lowercase, a named greeting reads as a warm heading. */
.mbx-app .mgreet{font-family:var(--display);font-weight:800;font-size:var(--fs-title);color:var(--cream);letter-spacing:-.02em;margin:8px 2px 2px;}
/* THE FRONT DOOR NARRATES THE DAY — the intro is one calm conversational block: greeting, the
   date-nav, where the family is, and the day's shape. It orients Mom to the day she's walking
   into; it never narrates the UI. */
/* HERO RHYTHM — TWO moments, not four groups (founder, 2026-08-04). The greeting is
   its own beat; everything under it — date, context, travel pill, the focal card — is
   ONE daily briefing that closes ranks. So the gap after the greeting is the largest
   in the hero (--s6, --s8 on desktop) and every step inside the briefing is smaller
   than it, which is what makes the briefing read as a single block rather than a list.
   Steps come from the existing --s scale in tokens.css. */
.mbx-app .dayintro{margin:0 2px var(--s6);}
.mbx-app .dayintro .mgreet{margin:0 0 var(--s4);}
/* TWO BEATS. Each line is its own block at the SAME size/weight/colour — the greeting
   gains presence from its own mass, not from a new type size. Because that mass now
   carries the pause, the margin beneath it came DOWN (--s6/--s8 -> --s4/--s5): the gap
   only has to separate, not to create the moment. It stays larger than every step
   inside the briefing (max --s3), so the two-moment read survives. line-height 1.15 is the
   value .di-date already uses for a display heading, so the two lines read as ONE
   block rather than a wrapped sentence. A neutral (unnamed) greeting has no .mgreet-l
   and is untouched — still a single line. */
.mbx-app .mgreet-l{display:block;}
/* the greeting now shares its band with the orb, so it is bounded away from it. Short
   two-line greeting + right-aligned orb: this only ever bites on very narrow screens. */
.mbx-app .dayintro .mgreet{max-width:calc(100% - 132px);}
.mbx-app .dayintro .mgreet{line-height:1.15;}
.mbx-app .di-datebar{margin:0 0 var(--s2);}
/* THE DATE IS THE ANCHOR. The fixed fact leads; the relative word trails as a small
   tag in the annotation dialect the product already speaks (.pill-tag / the eyebrow):
   mono, uppercase, metadata size, accent. No new tokens. */
.mbx-app .di-date{font-family:var(--display);font-weight:800;font-size:var(--fs-title);color:var(--cream);letter-spacing:-.02em;line-height:1.15;}
.mbx-app .di-daytag{font-family:var(--mono);font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--pistachio);margin-left:9px;vertical-align:.22em;white-space:nowrap;}
.mbx-app .di-loc{font-family:var(--sans);font-size:15.5px;color:var(--muted);letter-spacing:.01em;margin:0 0 var(--s1);}
.mbx-app .di-shape{font-family:var(--rounded);font-weight:500;font-size:15.5px;color:var(--pistachio);margin:var(--s1) 0 0;}
/* the AWAY / all-day pills belong with the context they describe — who is gone today —
   so they sit in the hero block, not below the view toggle (where they also vanished
   entirely in the By-person view). */
.mbx-app .dayintro .allday-pills{margin:var(--s2) 0 0;}
/* THE DAY KNOWS WHAT I'M ON — the viewer's own assignments, imperative voice, after the day-shape
   line and before the view selector. Rendered only when the bound viewer has ≥1 assignment (no
   empty state in v1). Each row opens its event through the shared row-open path. */
/* THE FOCAL POINT. What Mom is personally on the hook for is the one thing that
   should stop the eye, so it becomes a surfaced CARD with an accent rail rather than
   a run of text in the intro. Same markup, same rows — weight, not new structure. */
.mbx-app .di-on{margin:var(--s5) 0 0;background:var(--forest);border:1px solid var(--border);
  border-left:3px solid var(--pistachio);border-radius:var(--r-card);padding:var(--s4) var(--s4) var(--s3);}
.mbx-app .di-on-head{font-family:var(--mono);font-weight:400;font-size:var(--fs-meta);color:var(--pistachio);
  letter-spacing:.18em;text-transform:uppercase;margin:0 0 var(--s2);}
.mbx-app .di-on-row{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s2) var(--s2);
  margin:0 calc(var(--s2) * -1);border-radius:10px;cursor:pointer;transition:background .14s;}
.mbx-app .di-on-row:hover{background:color-mix(in srgb,var(--pistachio) 10%,transparent);}
/* the time is the operational anchor of the card — it carries the weight the old
   heading used to. */
/* THREE STABLE COLUMNS — the SAME recipe .tlrow (By time) already uses: a fixed time
   column, a flexible min-width:0 text column, a non-shrinking Directions button. The card
   had only the third: the time was `flex:none` with NO width, so the column sized to its
   own content and "9am" and "10:45am" started their sentences at different x; and the text
   had `min-width:0` with NO `flex:1`, so it never claimed the free space and wrapped early
   while Directions was pushed right by margin. Both are fixed here, and nowhere else —
   .tlrow is untouched. A wrapped line still aligns under the sentence (the text is its own
   flex item), and `align-items:baseline` keeps the first line on the time's baseline. */
.mbx-app .di-on-time{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--pistachio);
  flex:0 0 100px;width:100px;text-align:left;white-space:nowrap;line-height:1.1;letter-spacing:-.01em;}
.mbx-app .di-on-dash{display:none;}   /* the column gap separates them now */
.mbx-app .di-on-do{font-family:var(--sans);font-size:1.0625rem;color:var(--cream);flex:1;min-width:0;
  line-height:1.35;overflow-wrap:anywhere;}
.mbx-app .di-on-row .tldirs{flex:none;margin-left:auto;padding-left:12px;}
/* Today keeps the Brain Purge orb but no horizon title/subtitle — the orb sits alone, right-aligned. */
/* TOP OF PAGE = the orb + the hero, read as ONE unit (founder, 2026-08-04). The orb's
   halo bleeds ~24% of its diameter OUTSIDE its box (easy-button .eb-collar inset), so a
   margin here stacks on top of light that already reads as space — which is what made the
   button feel marooned. The gap beneath it closes to 0 and the hero rises into that glow.
   The hero's OWN rhythm is untouched; only what sits above it moves. */
.mbx-app .mnav{display:flex;align-items:center;gap:10px;margin:8px 0 14px;}
.mbx-app .mnav .arr{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:var(--forest);color:var(--body);font-size:16px;cursor:pointer;display:grid;place-items:center;transition:.16s;}
.mbx-app .mnav .arr:hover{border-color:var(--euc);color:var(--cream);}
.mbx-app .mnav .mtitle{font-family:var(--display);font-weight:800;font-size:var(--fs-title);color:var(--cream);letter-spacing:-.02em;}
/* the title BLOCK: the big date + its base-context subtitle share one column that takes the
   flex space. The subtitle hangs under the date. */
.mbx-app .mnav .mttl{flex:1;min-width:0;display:flex;flex-direction:column;}
/* (.today-btn retired 2026-08-05 — the visible Today pill is gone from Week and Month, as it
   already was from Today. The arrows, titles and every nav handler are unchanged; the rules
   here had no remaining consumer once the two markup sites were removed.) */

/* by person / by time toggle */
.mbx-app .tview{display:flex;gap:5px;background:var(--forest);border:1px solid var(--border);border-radius:11px;padding:4px;margin:2px 0 14px;width:max-content;}
.mbx-app .tview button{border:0;background:transparent;color:var(--muted);font-family:var(--display);font-weight:600;font-size:13px;padding:7px 15px;border-radius:8px;cursor:pointer;transition:.15s;}
.mbx-app .tview button:hover{color:var(--cream);}
.mbx-app .tview button.on{background:var(--pistachio);color:var(--ink);}

/* a kid lane — the whole person's day at a glance */
.mbx-app .kid{background:var(--forest);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.16s;}
.mbx-app .kid + .kid{margin-top:11px;}
.mbx-app .kid:hover{border-color:var(--euc);}
.mbx-app .kid.away{opacity:.62;}
.mbx-app .kid .khead{display:flex;align-items:center;gap:12px;padding:13px 16px 11px;}
/* the day-card Person avatar is the canonical circle (personPill size:avatar); size it to 37px here (2026-07-24 reconnection). */
.mbx-app .kid .khead .mb-person--avatar{--mb-av:37px;flex:none;}
.mbx-app .kid .kmeta{flex:1;min-width:0;display:flex;flex-direction:column;}
.mbx-app .kid .kn{font-family:var(--display);font-weight:700;font-size:var(--fs-event);color:var(--cream);}
.mbx-app .kid .kn small{font-weight:600;font-size:12px;color:var(--muted);margin-left:6px;letter-spacing:.02em;}
.mbx-app .kid .ks{font-size:12.5px;color:var(--muted);margin-top:1px;}
.mbx-app .kid .presence{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:99px;flex:none;}
.mbx-app .kid .presence.here{--pc:var(--pistachio);color:var(--pc);background:color-mix(in srgb,var(--pc) 18%,transparent);border:1px solid color-mix(in srgb,var(--pc) 42%,var(--border));}
.mbx-app .kid .presence.away{color:var(--hint);background:transparent;border:1px solid var(--border);}
.mbx-app .kid .kbody{padding:0 16px 14px;}
.mbx-app .kid .tl{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent);cursor:pointer;transition:.14s;}
.mbx-app .kid .tl:hover .ta{color:var(--cream);}
.mbx-app .kid .tl .tm{font-family:var(--sans);font-size:var(--fs-event);font-weight:700;color:var(--cream);width:64px;flex:none;}
.mbx-app .kid .tl .ta{font-size:var(--fs-op);color:var(--body);flex:1;min-width:0;}
.mbx-app .kid .tl .ta b{color:var(--cream);font-weight:400;}
.mbx-app .kid .tl .tw{font-family:var(--display);font-weight:700;font-size:11.5px;padding:4px 10px;border-radius:99px;flex:none;white-space:nowrap;}
.mbx-app .kid .tl .tw.clash{color:#141A15;background:var(--care);}
.mbx-app .kid .tl .tw.gap{color:var(--care);background:transparent;border:1px dashed var(--care);}
.mbx-app .kid .tl .tw.who{color:var(--pc);background:color-mix(in srgb,var(--pc) 18%,transparent);border:1px solid color-mix(in srgb,var(--pc) 42%,var(--border));display:inline-flex;align-items:center;gap:6px;}
.mbx-app .kid .tl .tw.who .wdot{width:6px;height:6px;border-radius:50%;background:var(--pc);}
.mbx-app .kid .tl .tw.none{color:var(--hint);background:transparent;border:1px solid var(--border);}
.mbx-app .kid .pack{display:flex;flex-wrap:wrap;gap:7px;padding-top:12px;}
.mbx-app .kid .pk{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid color-mix(in srgb,var(--warn) 26%,var(--border));border-radius:8px;padding:5px 10px;}
.mbx-app .kid .pk i{font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--warn);opacity:.75;}

/* chronological (by time) list */
/* all-day PILLS (holidays, travel, out-of-the-ordinary school days) above the timeline — colored pills, not rows */
.mbx-app .allday-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
/* first-class PILLS: capsule chips that read as ambient context (like weather),
   never mini event cards. Full pill radius is the defining signal; lightweight
   tinted fill (unchanged), glanceable. Size/shape only — color/behavior unchanged. */
.mbx-app .allday-pills .mpill,
.mbx-app .wkpills .mpill{font-size:12.5px;line-height:1.2;padding:6px 14px;border-radius:999px;}
.mbx-app .allday-pills .mpill .pill-eff,
.mbx-app .wkpills .mpill .pill-eff{font-size:11px;line-height:1.2;}
.mbx-app .tlist{background:var(--forest);border:1px solid var(--border);border-radius:16px;overflow:hidden;}
.mbx-app .tlrow{display:flex;align-items:center;gap:26px;padding:14px 20px;cursor:pointer;transition:background .14s;}
.mbx-app .tlrow:hover{background:color-mix(in srgb,var(--euc) 8%,transparent);}
.mbx-app .tlrow + .tlrow{border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent);}
/* ORIENTATION LENS (Unit 4): the VIEWER's own legs, emphasized in place — a quiet pistachio
   accent + tint. Emphasis only; the row keeps its chronological position and is never filtered. */
.mbx-app .tlrow.mine{background:color-mix(in srgb,var(--pistachio) 9%,transparent);box-shadow:inset 3px 0 0 var(--pistachio);}
.mbx-app .tlrow.mine:hover{background:color-mix(in srgb,var(--pistachio) 14%,transparent);}
.mbx-app .tlrow .tt{font-family:var(--sans);font-size:var(--fs-event);font-weight:700;color:var(--cream);width:70px;flex:none;text-align:left;letter-spacing:-.02em;}
.mbx-app .tlrow .ta{flex:1;min-width:0;font-size:var(--fs-op);line-height:1.5;color:var(--body);}
.mbx-app .tlrow .tldirs{flex:none;margin-left:auto;padding-left:12px;}
.mbx-app .tlrow .ta .doer{font-family:var(--display);font-weight:700;color:var(--cream);}
/* A22 DETAIL LINE — the one line of specifics under a short title (opponent, series).
   Quieter than the title on purpose: it is the thing she reads second. ONE line, ellipsed
   rather than wrapped, so a long note can never push a row to three lines and cost her the
   scan the short title just bought. The drawer keeps the full text. */
.mbx-app .tlrow .ta .tldetail{font-size:var(--fs-meta,13px);color:var(--muted);line-height:1.35;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* LEG-SENTENCE TYPOGRAPHY (2026-07-29) — the WHO (.doer), RIDERS (.kidn) and DESTINATION
   (.dest) render bolder; connectives (takes / picks up / to / from) stay regular. Rendered
   from the composer's structured fields, one treatment on every surface showing leg sentences. */
.mbx-app .ta .kidn, .mbx-app .kbody .kidn, .mbx-app .gq-title .kidn{font-weight:700;color:var(--cream);}
.mbx-app .ta .dest, .mbx-app .gq-title .dest{font-weight:700;color:var(--cream);}
/* UNCOVERED CALLOUT (2026-07-29) — one amber/attention all-caps call-out for a covered:false
   leg, visually distinct from covered rows. Same class on Today, By-person, and Ahead's gap cards. */
.mbx-app .needs-grownup{font-family:var(--mono);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold,#E2BA68);border:1px solid color-mix(in srgb,var(--gold,#E2BA68) 48%,transparent);
  background:color-mix(in srgb,var(--gold,#E2BA68) 12%,transparent);border-radius:6px;padding:2px 8px;white-space:nowrap;}
/* BASE-CONTEXT CHIP (2026-07-29) — the quiet "In Mystic" day-context signal that restores what
   the retired family-wide AWAY pill carried, its LOOK included: the muted --me pill, minus the
   AWAY tag. ONE pill component (.mpill.basectx) on all three surfaces (Today, Week heads, Month
   cells) — never a bare-text variant. Informational only (no away, no availability effect). */
.mbx-app .mpill.basectx{--pc:var(--me);}
/* SETTING, NOT AN ITEM — the base context is the day's setting, so it renders UNDER the date as
   a subtitle, subordinate and with air, per each surface's geometry. Same pill component on all
   three; only the surrounding layout differs. */
/* Today: the date's subtitle — flush under the big heading, before the toggles. */
.mbx-app .basectx-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
/* Week + Month: the SAME pill on its OWN line below the day-number row, left-aligned with the
   cell content edge, a small breathing margin — never inline beside the number. */
.mbx-app .basectx-mini{display:flex;flex-wrap:wrap;gap:4px;}
.mbx-app .basectx-mini .mpill.basectx{max-width:100%;}
.mbx-app .wkcol > .basectx-mini{margin:-2px 0 0;padding:0 2px;}
.mbx-app .mcell .basectx-mini{margin:2px 0 0;}
/* D3: a multi-person timeline row leads with the canonical layered stack (peopleStack)
   then the title. The avatars sit inline, sized to the operational line. */
.mbx-app .tlrow .ta .tlwho{display:inline-flex;vertical-align:middle;margin-right:8px;}
.mbx-app .tlrow .ta .tlwho .mb-person--avatar{--mb-av:20px;flex:none;}
.mbx-app .tlrow .ta .kidn{font-weight:400;}
.mbx-app .tldir{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--pistachio);text-decoration:none;border:1px solid color-mix(in srgb,var(--pistachio) 32%,var(--border));border-radius:7px;padding:1px 7px 1px 5px;white-space:nowrap;transition:.14s;vertical-align:middle;background:color-mix(in srgb,var(--pistachio) 8%,transparent);}
.mbx-app .tldir:hover{border-color:var(--pistachio);background:color-mix(in srgb,var(--pistachio) 16%,transparent);}
.mbx-app .tldir svg{width:12px;height:12px;}

/* ============ THE FRONT DOOR BREATHES (2026-08-02) =========================
   Presentation pass on the Today front door. ONE renderer, ONE semantic tree:
   the BASE rules are the mobile reading rhythm; @media(min-width:768px) adds
   desktop breathing room. The content breakpoint is 768, independent of the
   shell's 880 collapse (founder). No new renderer, no mobile fork. */

/* — introduction: each concept stands alone, with air — */
.mbx-app .dayintro{margin:0 2px var(--s6);}
.mbx-app .dayintro .mgreet{margin:0 0 var(--s4);}
.mbx-app .di-glyph{font-size:.92em;opacity:.85;margin-right:1px;}
/* where / who: two separate lines everywhere — different ideas, breathe apart */
.mbx-app .di-loc{font-family:var(--sans);font-size:15.5px;color:var(--body);letter-spacing:.01em;margin:0 0 var(--s1);}
.mbx-app .di-company{font-family:var(--sans);font-size:15.5px;color:var(--muted);letter-spacing:.01em;margin:0 0 var(--s2);}
.mbx-app .di-shape{margin:0;}

/* — day navigation: obvious, comfortably tappable, brackets the date — */
.mbx-app .di-datebar{gap:10px;margin:0 0 var(--s2);}
.mbx-app .di-datebar .arr{width:var(--tap-min);height:var(--tap-min);border-radius:12px;font-size:21px;line-height:1;
  color:var(--cream);background:var(--raised);border:1px solid var(--border);}
.mbx-app .di-datebar .arr:hover{border-color:var(--euc);background:color-mix(in srgb,var(--euc) 12%,transparent);}
.mbx-app .di-datebar .di-date{flex:1;text-align:center;}

/* — view selector: lighter, so it doesn't wall off the first event — */
.mbx-app .tview{background:transparent;border:0;padding:0;gap:6px;margin:2px 0 12px;width:auto;}
.mbx-app .tview button{color:var(--muted);border:1px solid transparent;border-radius:99px;padding:6px 14px;min-height:var(--tap-min);}
.mbx-app .tview button.on{background:color-mix(in srgb,var(--pistachio) 14%,transparent);color:var(--cream);
  border-color:color-mix(in srgb,var(--pistachio) 34%,var(--border));}

/* — event rows: mobile reflow. time brackets the left; content wraps to its own
     space; Directions drops to its own comfortable tap target. — */
.mbx-app .tlrow{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"time content" "time dirs";
  column-gap:14px;row-gap:0;align-items:start;padding:14px 16px;}
.mbx-app .tlrow .tt{grid-area:time;width:auto;}
.mbx-app .tlrow .ta{grid-area:content;min-width:0;}
.mbx-app .tlrow .tldirs{grid-area:dirs;justify-self:end;margin:8px 0 0;padding:0;}

/* — Brain Purge orb: primary on both, but sized so mobile day content isn't
     pushed below the fold (override the inline --eb-d; the orb owner is untouched) — */
.mbx-app .horizon-head.bare .eb-rig{--eb-d:116px !important;}

@media(min-width:768px){
  /* desktop breathing room: the intro spreads, rows return to one calm line */
  .mbx-app .dayintro{margin:0 2px var(--s8);}
  .mbx-app .dayintro .mgreet{margin:0 0 var(--s5);}
  .mbx-app .di-datebar .di-date{flex:0 1 auto;text-align:left;}
  .mbx-app .tlrow{display:flex;align-items:center;gap:22px;padding:15px 22px;}
  .mbx-app .tlrow .tt{width:70px;flex:none;}
  .mbx-app .tlrow .ta{flex:1;}
  .mbx-app .tlrow .tldirs{margin:0 0 0 auto;padding-left:12px;}
  .mbx-app .horizon-head.bare .eb-rig{--eb-d:160px !important;}
}

/* ============ WEEK — the load map (PR3) =====================================
   Lifted from the approved design (Home Drilldown Concept.html, the WEEK block),
   scoped under .mbx-app. 7-column grid rendered from the same Mission Control
   week data (buildDayModel + pillsForDay per day). Tap a card → the existing
   drawer (not the design's .evd/.ausheet sheets). Columns use minmax(0,1fr) so
   the grid fits the container width. ========================================= */
.mbx-app .wksub{font-family:var(--rounded);font-weight:500;font-size:13.5px;color:var(--muted);margin:-6px 2px 16px;}
.mbx-app .wkgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;align-items:start;}
.mbx-app .wkcol{border:1px solid var(--border);border-radius:16px;background:var(--forest);padding:11px 9px;min-height:220px;display:flex;flex-direction:column;gap:8px;}
.mbx-app .wkcol.today{border-color:var(--pistachio);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pistachio) 32%,transparent);}
.mbx-app .wkcol .wkh{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px 4px;}
.mbx-app .wkcol .wkh .dw{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);}
.mbx-app .wkcol .wkh .dnum{font-family:var(--display);font-weight:800;font-size:17px;color:var(--cream);}
.mbx-app .wkcol.today .wkh .dw,.mbx-app .wkcol.today .wkh .dnum{color:var(--pistachio);}
.mbx-app .wkcards{display:flex;flex-direction:column;gap:7px;}
/* all-day PILLS above a week column's event cards — colored pills, not cards */
.mbx-app .wkpills{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:2px;}
.mbx-app .wkcard{position:relative;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--tc,var(--euc));border-radius:10px;padding:8px 9px;cursor:pointer;transition:.14s;}
.mbx-app .wkcard:hover{border-color:var(--euc);transform:translateY(-1px);}
.mbx-app .wkcard .wkwho{display:flex;width:100%;justify-content:flex-start;align-items:center;gap:4px;}
.mbx-app .wkcard .wct{display:block;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--cream);letter-spacing:.02em;white-space:nowrap;margin-top:2px;}
/* the week-card Person avatar is the canonical circle (personPill size:avatar); size it to 19px here (2026-07-24 reconnection). */
.mbx-app .wkcard .wkwho .mb-person--avatar{--mb-av:19px;flex:none;}
.mbx-app .wkcard .wcn{font-family:var(--display);font-weight:400;font-size:12.5px;color:var(--body);margin-top:2px;line-height:1.3;}
/* Week & Month widen to a viewport-centered band (the design widens the app for
   week/month). ONE shared rule for both zooms — identical treatment, so Week's
   appearance is unchanged and Month reuses it (not a separate mechanism). Scoped
   to .read.zoom-wide, re-rendered inside #view every paint, so it can never leak
   onto Home/other views — no .mbx-app or router change. The month weekday header
   (.mwk) widens with .mgrid so their 7 columns stay aligned. */
.mbx-app .read.zoom-wide .wkgrid,
.mbx-app .read.zoom-wide .mgrid,
.mbx-app .read.zoom-wide .mwk{position:relative;left:50%;transform:translateX(-50%);width:min(960px,94vw);}
.mbx-app .wkcard.shift{display:block;border-left-color:var(--gold);background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 12%,transparent),color-mix(in srgb,var(--gold) 3%,transparent));}
.mbx-app .wkcard.shift .wct{color:var(--gold);font-weight:700;}
.mbx-app .wkcard.shift .wcn{color:color-mix(in srgb,var(--gold) 78%,#fff 22%);}
.mbx-app .wkclear{font-family:var(--rounded);font-size:12px;color:var(--hint);padding:6px 2px;}

/* ============ MONTH — the calendar grid (PR4) ==============================
   Lifted from the approved design (Home Drilldown Concept.html, the MONTH block),
   scoped under .mbx-app. Cells = pillsForDay per day (the ONE reader). Only the
   pill variants a canonical pill can emit are styled — base (holiday/theme/
   birthday), .warn (disruptor), .me (away). No .care/.shift (not emittable → no
   unused CSS). .mnav is already scoped; width comes from the shared .read.zoom-wide
   rule above. ========================================================= */
.mbx-app .mwk{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
.mbx-app .mwk span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;}
.mbx-app .mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.mbx-app .mcell{min-height:74px;border:1px solid var(--border);border-radius:11px;background:var(--forest);padding:7px 6px 6px;display:flex;flex-direction:column;gap:4px;overflow:hidden;cursor:pointer;}
.mbx-app .mcell.dim{background:transparent;border-color:color-mix(in srgb,var(--border) 45%,transparent);}
.mbx-app .mcell.dim .dn{color:var(--hint);}
.mbx-app .mcell.today{border-color:var(--pistachio);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pistachio) 40%,transparent);}
.mbx-app .mcell .dn{font-family:var(--display);font-weight:700;font-size:14px;color:var(--cream);line-height:1;}
.mbx-app .mcell.today .dn{color:var(--pistachio);}
/* ONE PILL RECIPE, ONE VARIABLE (2026-08-04). Every variant used to restate the same
   three declarations with a different color; now the recipe is parameterized on --pc
   exactly as .tw.who (the driver chip) already proved, so a variant is ONE line and a
   caller can hand a pill its own color inline (a person's canonical avatar color) with
   no new class, map, or per-view rule. Slightly richer than before — fill 12%→18%,
   border 30%→42% — so the accents feel alive while staying calm. Text stays the pure
   pigment; the text ladder is untouched. */
.mbx-app .mpill{--pc:var(--pistachio);cursor:pointer;font-family:var(--sans);font-weight:600;font-size:10px;line-height:1.25;color:var(--pc);background:color-mix(in srgb,var(--pc) 18%,transparent);border:1px solid color-mix(in srgb,var(--pc) 42%,var(--border));border-radius:6px;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.14s;}
.mbx-app .mpill:hover{filter:brightness(1.25);}
/* the shared pill kind→tag marker (shared/pill-tag.js), e.g. "School" on a school
   disruptor — universal across Week/Month/Today, matching Mission Control. */
.mbx-app .mpill .pill-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:0.08em;text-transform:uppercase;opacity:.82;margin-left:5px;}
.mbx-app .mpill.warn{--pc:var(--warn);}
/* Holiday Visualization — the school-specific effect ("No Classes") shown BENEATH
   a pill's canonical identity ("Labor Day"). One event, both meanings; reused by
   Week card, Month chip, and the Today all-day rows. */
.mbx-app .pill-eff{display:block;font-weight:500;font-size:11.5px;opacity:.82;margin-top:1px;}
.mbx-app .mpill .pill-eff{font-size:9px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mbx-app .tlrow .ta .pill-eff{font-size:13.5px;color:var(--muted);opacity:1;font-weight:500;margin-top:2px;}
.mbx-app .mpill.me{--pc:var(--me);}
.mbx-app .mcell .more{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:auto;}