/*
  shared/demo-shell.css
  T016 rebuild: this is now a faithful structural/CSS clone of root index.html's
  actual app shell (the --brand-* token system, the phone-frame `.device`,
  the desktop `.sidebar` nav, appbar/lang-switcher, home hero + quick-action
  tiles, screens, and tabbar) — see
  docs/goals/tenant-demos-ccc-anybabycan/notes/T016-visual-rebuild-receipt.md
  for what changed and why. Root index.html itself is never read-modified;
  the class names below intentionally match root's so the visual pattern is
  reused 1:1, with only tenant color tokens and tenant-specific markup/copy
  changing per demos/<slug>/index.html. Whitman-only features (explainer
  walkthroughs, voice/realtime panel, life-sim, benefit-pass, mobile test
  mode) are intentionally NOT cloned — out of scope for this
  goal and not needed for visual fidelity of the core app shell. The
  demo-control dock is cloned from root: Brand Color, Appearance, Scenario,
  View, and Add to Home Screen.

  T019: removed the palm-leaf watermark (`.device` background image and the
  inline `.lf` SVG accents) — that motif is Whitman-specific brand decor, not
  generic texture, and root keeps its own copy untouched. Also added a
  faithful CSS clone of root's "See how it helps" `.exstage` panel (see the
  section below); unlike root's real audio-narrated explainer, each row here
  is a plain functional nav link (`data-nav`, same mechanism as the sidebar)
  — there is no produced per-language voiceover for these synthetic tenants.
*/

:root{
  /* Neutral fallback palette (used only if no data-theme preset matches). */
  --brand-ivory:#F7F4EF;
  --brand-stone:#ECE6DE;
  --brand-ink:#171513;
  --brand-gold:#8A6526;
  --brand-green:#2F4A35;
  --brand-sage:#DCE4DA;
  --brand-soft-gold:#E6D2A7;
  --brand-mist-gray:#B9B3AC;
  --brand-pine:#23362A;
  --brand-green-strong:#1f5135;
  --brand-on-dark:#cfe0d3;
  --brand-on-dark-2:#a9c3b3;
  --frame-bg:#E4E0DA;

  --ivory:var(--brand-ivory);--green:var(--brand-green);--green2:var(--brand-pine);
  --sage:var(--brand-sage);--gold:var(--brand-gold);--ink:var(--brand-ink);
  --mut:#5f5b55;--mut2:#827b73;--line:rgba(23,21,19,.10);--card:#fffefa;
  --cardline:var(--brand-stone);--surface:var(--brand-stone);--quiet:var(--brand-sage);
	  --gold-soft:var(--brand-soft-gold);--success:var(--brand-green);--cta:var(--brand-gold);

  /* Derived tints. The component rules below used to hardcode Whitman's warm
     green/gold hexes (#9a8a63 labels, #eef2e9 panels, #f4f0e6 hovers, a dark
     green toast, a gold orb), which every non-Whitman tenant then inherited —
     a steel-blue or red brand wearing another brand's tints is what made the
     shell read as off. These recompute per tenant (and in dark mode) because
     custom properties resolve at point of use. */
  --label:color-mix(in srgb,var(--brand-gold) 58%,var(--mut));
  --hover-tint:color-mix(in srgb,var(--brand-sage) 55%,var(--card));
  --panel-tint:color-mix(in srgb,var(--brand-sage) 60%,var(--brand-ivory));
  --panel-line:color-mix(in srgb,var(--brand-sage) 78%,var(--brand-mist-gray));
  --gold-tint:color-mix(in srgb,var(--brand-soft-gold) 45%,var(--card));
  --gold-ink:color-mix(in srgb,var(--brand-gold) 78%,var(--brand-ink));
  --strip-bg:color-mix(in srgb,var(--brand-soft-gold) 30%,var(--brand-ivory));
  --muted-line:color-mix(in srgb,var(--brand-mist-gray) 40%,var(--brand-stone));
  --shadow-tint:rgba(15,18,22,.05);
}

:root[data-theme="mono"]{
  --brand-ivory:#F6F4F1;--brand-stone:#E4E0D9;--brand-ink:#1A1714;
  --brand-gold:#2C2A26;--brand-green:#2C2A26;--brand-sage:#E8E5E0;
  --brand-soft-gold:#E7E3DC;--brand-mist-gray:#B9B3AC;--brand-pine:#15120F;
  --brand-green-strong:#2C2A26;--brand-on-dark:#D7D3CC;--brand-on-dark-2:#B4AFA7;
  --frame-bg:#E4E0DA;
}

:root[data-theme="green"]{
  --brand-ivory:#F7F4EF;--brand-stone:#ECE6DE;--brand-ink:#171513;
  --brand-gold:#8A6526;--brand-green:#2F4A35;--brand-sage:#DCE4DA;
  --brand-soft-gold:#E6D2A7;--brand-mist-gray:#B9B3AC;--brand-pine:#23362A;
  --brand-green-strong:#1f5135;--brand-on-dark:#cfe0d3;--brand-on-dark-2:#a9c3b3;
  --frame-bg:#E4E0DA;
}

:root[data-theme="blue"]{
  --brand-ivory:#F5F7FA;--brand-stone:#E2E6EC;--brand-ink:#16181C;
  --brand-gold:#2563A8;--brand-green:#1E3A5F;--brand-sage:#DCE6F2;
  --brand-soft-gold:#DBE7F4;--brand-mist-gray:#AEB6C0;--brand-pine:#14283F;
  --brand-green-strong:#1B3F6B;--brand-on-dark:#CDE0F2;--brand-on-dark-2:#A9C0DC;
  --frame-bg:#E2E6EC;
}

:root[data-theme="red"]{
  --brand-ivory:#FAF6F5;--brand-stone:#ECE2E0;--brand-ink:#1C1614;
  --brand-gold:#B0413B;--brand-green:#7E2A28;--brand-sage:#F2DEDC;
  --brand-soft-gold:#F4E2E0;--brand-mist-gray:#C2B3B1;--brand-pine:#5E1E1C;
  --brand-green-strong:#7E2A28;--brand-on-dark:#F2D6D3;--brand-on-dark-2:#DDB3AF;
  --frame-bg:#ECE2E0;
}

/* CCC Group: REAL brand colors (T018, operator-approved 2026-06-30), sampled
   from the real logo at https://www.cccgroupinc.com/ -- primary #CC1824
   (red), secondary #485454 (slate). --brand-green carries the literal
   primary red (used for header/wordmark text and the hero/promo gradient
   start); --brand-pine/--brand-green-strong are a darker derived red for the
   gradient end and for readable text-on-light-sage; --brand-mist-gray is the
   literal secondary slate; --brand-ivory/--brand-stone are warm light
   neutrals that complement red without using red as a background tint. See
   tenants/ccc-group.json (brand.*) for the matching runtime-applied subset. */
:root[data-theme="ccc-group"]{
  --brand-ivory:#F4F1F0;--brand-stone:#E3E0DF;--brand-ink:#1C1F1F;
  --brand-gold:#C2811F;--brand-green:#CC1824;--brand-sage:#E2E5E5;
  --brand-soft-gold:#E9C99A;--brand-mist-gray:#485454;--brand-pine:#7A0F17;
  --brand-green-strong:#7A0F17;--brand-on-dark:#F4D6D4;--brand-on-dark-2:#E3B3B0;
  --frame-bg:#E3E0DF;
}

/* Any Baby Can: REAL brand colors (T018, operator-approved 2026-06-30),
   sampled from the real logo at https://anybabycan.org/ -- primary #0090CC
   (blue), secondary #B4D8F0 (light blue). --brand-green carries the literal
   primary blue (header/wordmark text, hero/promo gradient start);
   --brand-pine/--brand-green-strong are a darker derived blue for the
   gradient end and readable text-on-light-sage; --brand-stone/--frame-bg use
   the literal secondary light blue directly as the light surface tint;
   --brand-ivory is a near-white cool neutral. See tenants/any-baby-can.json
   (brand.*) for the matching runtime-applied subset. */
:root[data-theme="any-baby-can"]{
  --brand-ivory:#F3F9FC;--brand-stone:#B4D8F0;--brand-ink:#15232B;
  --brand-gold:#E2962B;--brand-green:#0090CC;--brand-sage:#DCEEF8;
  --brand-soft-gold:#F2D2A8;--brand-mist-gray:#7FA9C2;--brand-pine:#045A82;
  --brand-green-strong:#045A82;--brand-on-dark:#CDEAF8;--brand-on-dark-2:#A9D3EA;
  --frame-bg:#B4D8F0;
}

/* Quality Fence & Welding: REAL brand colors sampled from the real logo at
   https://saqualityfence.com/ (QF_Blue_Logo.jpg) -- a black wordmark plus a
   steel slate-blue mark/bar, literal #919DAD. The literal slate is too light
   for readable text, so --brand-green (header/wordmark text, hero/promo
   gradient start) carries a darker steel blue DERIVED from the slate;
   --brand-mist-gray is the literal slate; --brand-pine/--brand-green-strong
   are a deeper steel for the gradient end and text-on-light-sage;
   --brand-gold is an industrial safety-amber accent (same pairing logic as
   CCC Group). See tenants/sa-quality-fence.json (brand.*) for the
   matching runtime-applied subset. */
:root[data-theme="sa-quality-fence"]{
  --brand-ivory:#F4F5F7;--brand-stone:#E1E4E9;--brand-ink:#16181B;
  --brand-gold:#B8791C;--brand-green:#333E4D;--brand-sage:#E4E8ED;
  --brand-soft-gold:#E9CF9E;--brand-mist-gray:#919DAD;--brand-pine:#1E2836;
  --brand-green-strong:#1E2836;--brand-on-dark:#D5DDE7;--brand-on-dark-2:#AEBACA;
  --frame-bg:#E1E4E9;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--ivory);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  display:flex;align-items:center;justify-content:center}
.serif{font-family:Georgia,"Times New Roman",serif}

/* ---- phone-frame device (T019: palm-leaf watermark removed, clean solid background — that motif is Whitman-specific, root keeps its own copy) ---- */
.device{position:relative;width:min(480px,100vw);height:100dvh;background:var(--ivory);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,.10)}
@media(min-width:480px){.device{border-radius:26px}}

/* ---- app bar ---- */
.appbar{position:relative;z-index:5;display:flex;align-items:center;gap:8px;padding:calc(12px + env(safe-area-inset-top)) 16px 9px;background:var(--ivory);border-bottom:1px solid var(--line)}
.back{width:34px;height:34px;border-radius:50%;border:1px solid var(--cardline);background:#fff;display:none;align-items:center;justify-content:center;flex:0 0 auto}
.back svg{width:17px;height:17px;fill:none;stroke:var(--green);stroke-width:2}
.barttl{flex:1;min-width:0}
.barttl .mk{font-family:Georgia,serif;font-size:15px;color:var(--green);line-height:1}
.barttl .mk small{display:block;font-size:7px;letter-spacing:2px;text-transform:uppercase;color:var(--brand-gold);margin-top:2px}
.barttl .pg{display:none;font-family:Georgia,serif;font-size:17px;color:var(--green)}
.lang{display:flex;border:1px solid var(--muted-line);border-radius:18px;overflow:hidden;font-size:11px;flex:0 0 auto;cursor:pointer}
.lang span{padding:6px 10px;color:var(--mut)}.lang .a{background:var(--green);color:#fff}
.demostrip{font-size:9.5px;color:var(--gold-ink);background:var(--strip-bg);text-align:center;padding:4px 10px;border-bottom:1px solid var(--muted-line)}

/* ---- screens ---- */
.screens{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:78px;position:relative}
.screen{display:none;animation:fade .22s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- generic building blocks (1:1 with root index.html) ---- */
h1.t{margin:0;padding:15px 18px 2px;font-size:23px;color:var(--green);font-weight:500}
.sub{padding:0 18px;font-size:12.5px;color:var(--mut);margin:4px 0 0;line-height:1.4}
.sec{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--label);font-weight:700;margin:16px 18px 8px}
.card{margin:13px 14px;background:var(--card);border:1px solid var(--cardline);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px var(--shadow-tint)}
.row{display:flex;align-items:center;gap:11px;padding:12px 14px;border-top:1px solid var(--line);cursor:default}
.row.tap{cursor:pointer}.row:first-child{border-top:none}.row.tap:active{background:var(--hover-tint)}
.row .ct{flex:1;min-width:0}.row .ct b{font-size:13px;color:var(--ink);display:block}.row .ct small{font-size:10.5px;color:var(--mut2);display:block;line-height:1.35}
.row .v{font-size:12.5px;font-weight:700;color:var(--green)}.row .v.mask{letter-spacing:2px;color:#9aa399}
.ic{width:32px;height:32px;border-radius:9px;background:var(--sage);color:var(--green);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}.ic.gold{background:var(--gold-tint);color:var(--gold-ink)}.ic.sage{background:var(--sage);color:var(--brand-green-strong)}
.chev{color:#c4ccc1;flex:0 0 auto}.chev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.pill{font-size:8.5px;font-weight:700;border-radius:10px;padding:3px 8px;flex:0 0 auto}
.pill.ok{background:var(--sage);color:var(--brand-green-strong)}.pill.dark{background:var(--green);color:#fff}.pill.wait{background:var(--strip-bg);color:var(--gold-ink)}.pill.free{background:var(--gold-tint);color:var(--gold-ink)}
.btn{display:block;text-align:center;background:var(--cta);color:#fff;font-size:13px;font-weight:600;border-radius:24px;padding:14px;margin:12px 14px 2px;cursor:pointer}
.btn.s{background:var(--card);border:1px solid var(--muted-line);color:var(--green)}
.acts{display:flex;gap:8px;margin:12px 14px 2px}.acts .b{flex:1;text-align:center;font-size:12.5px;font-weight:600;border-radius:22px;padding:13px 4px;cursor:pointer}
.acts .p{background:var(--cta);color:#fff}.acts .s{background:var(--card);border:1px solid var(--muted-line);color:var(--green)}
.foot{font-size:10px;color:var(--mut2);text-align:center;padding:10px 22px 18px;line-height:1.45}
.src{display:flex;align-items:center;gap:7px;margin:13px 14px 0;font-size:10.5px;color:var(--brand-green-strong);background:var(--panel-tint);border-radius:11px;padding:9px 11px;line-height:1.35}
.src svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;flex:0 0 auto}
.todo-pill{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7a4b06;background:var(--brand-soft-gold);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle}

/* ---- home ---- */
.hello{padding:16px 18px 2px}.hello .e{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--label);font-weight:700}
.hello h2{font-family:Georgia,serif;font-size:26px;color:var(--green);margin:6px 0 0;font-weight:500}
.askbar{display:flex;align-items:center;gap:10px;margin:13px 14px 0;background:#fff;border:1px solid var(--cardline);border-radius:26px;padding:13px 16px;cursor:pointer;box-shadow:0 2px 8px var(--shadow-tint)}
.askbar svg{width:18px;height:18px;fill:none;stroke:var(--green);stroke-width:1.8;flex:0 0 auto}.askbar span{font-size:13px;color:var(--mut2)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:0 14px}
/* an odd last tile would dangle in the 2-col grid; let it breathe full-width */
.tiles .tile:last-child:nth-child(odd){grid-column:1/-1}
.tile{background:var(--card);border:1px solid var(--cardline);border-radius:16px;padding:14px 13px;cursor:pointer;box-shadow:0 1px 2px var(--shadow-tint)}
.tile:active{background:var(--hover-tint)}
.tile .ti{width:34px;height:34px;border-radius:10px;background:var(--sage);color:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:9px}
.tile .ti svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
.tile b{font-size:13px;color:var(--ink);display:block}.tile small{font-size:10px;color:var(--mut2)}
.promo{margin:13px 14px;background:linear-gradient(150deg,var(--green),var(--green2));color:#fff;border-radius:16px;padding:15px 16px;position:relative;overflow:hidden;cursor:pointer;box-shadow:0 8px 20px color-mix(in srgb,var(--brand-pine) 24%,transparent)}
.promo .tag{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold);background:#fff;border-radius:11px;padding:2px 8px;display:inline-block}
.promo b{font-family:Georgia,serif;font-size:18px;display:block;margin-top:9px}.promo p{font-size:11.5px;color:var(--brand-on-dark);margin:5px 0 0;line-height:1.4}
#home .promo.sc-oe,#home .promo.sc-new{display:none}
body[data-scenario="openenroll"] #home .promo.sc-regular,
body[data-scenario="newhire"] #home .promo.sc-regular{display:none}
body[data-scenario="openenroll"] #home .promo.sc-oe,
body[data-scenario="newhire"] #home .promo.sc-new{display:block}
.newhire-plan{display:none}
body[data-scenario="newhire"] .newhire-plan{display:block}

/* ---- hero amounts / id ---- */
.hero{margin:13px 14px;background:linear-gradient(150deg,var(--green),var(--green2));color:#fff;border-radius:16px;padding:16px 17px;position:relative;overflow:hidden;box-shadow:0 8px 20px color-mix(in srgb,var(--brand-pine) 24%,transparent)}
.hero small{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--brand-on-dark-2)}
.hero .amt{font-family:Georgia,serif;font-size:30px;letter-spacing:2px;margin-top:6px}
.hero .when{font-size:11.5px;color:var(--brand-on-dark);margin-top:4px}
.idc .gr{display:flex;gap:16px;margin-top:11px;flex-wrap:wrap}.idc .gr div small{font-size:8px;letter-spacing:.5px;text-transform:uppercase;color:var(--brand-on-dark-2);display:block}.idc .gr div b{font-size:13px}
.idc .barcode{height:30px;margin-top:13px;border-radius:6px;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 3px,#fff 3px 4px,transparent 4px 7px);opacity:.92}

/* ---- chips / privacy / toast ---- */
.chips{display:flex;gap:7px;flex-wrap:wrap;padding:0 14px}.chip{font-size:11px;padding:7px 12px;border-radius:16px;background:#fff;border:1px solid var(--muted-line);color:var(--mut);cursor:pointer}.chip.on{background:var(--green);color:#fff;border-color:var(--green)}
.priv{display:flex;align-items:flex-start;gap:9px;margin:13px 14px 0;background:var(--panel-tint);border:1px solid var(--panel-line);border-radius:13px;padding:11px 12px;font-size:10.5px;color:var(--brand-green-strong);line-height:1.45}
.priv svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;flex:0 0 auto;margin-top:1px}.priv b{font-weight:700}
.toast{position:absolute;left:18px;right:18px;bottom:74px;z-index:20;background:color-mix(in srgb,var(--brand-pine) 96%,transparent);color:#fff;border-radius:15px;padding:12px 14px;font-size:12px;line-height:1.35;text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.22);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.toast.show{opacity:1;transform:translateY(0)}

/* ---- tab bar (mobile) ---- */
/* Inverted (solid brand-color) tab bar, on purpose -- stands out against the
   ivory/light-tint screens instead of blending into them. */
.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;background:var(--green);box-shadow:0 -4px 16px rgba(0,0,0,.16);padding:7px 6px calc(7px + env(safe-area-inset-bottom))}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;color:rgba(255,255,255,.58);cursor:pointer;font-size:9.5px;font-weight:600;background:none;border:none;font-family:inherit}
.tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}
.tab.on{color:#fff}

/* ---- sidebar nav (desktop only) ---- */
.sidebar{display:none}
.snav{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--mut);cursor:pointer;font-size:13px;font-weight:600}
.snav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;flex:0 0 auto}
.snav:hover{background:var(--hover-tint)}
.snav.on{background:var(--sage);color:var(--green)}

/* ---- "See how it helps" panel (T019) ----
   Visually matches root index.html's .exstage/.exhead/.exsub/.exmenu/
   .exrow/.exn/.ext/.play classes and styling. SCOPE NOTE: root's real
   version is an audio-narrated walkthrough with produced per-language
   voiceover MP3 files, which do not exist for these synthetic tenants.
   Each row here is instead a real, working nav link (data-nav — the same
   mechanism the sidebar/tiles already use) that jumps straight to the
   matching screen. It sits beside the phone mockup only in wide-screen Phone
   view, matching root's desktop phone-preview composition. */
.exstage{display:none;flex-direction:column;width:min(540px,46vw);margin-right:46px;align-self:center}
body.is-mobile .exstage{display:none!important}
@media(min-width:900px){
  body[data-view="phone"] .exstage{display:flex}
}
.exlogo{max-height:40px;max-width:210px;margin-bottom:22px}
.exhead{font-family:Georgia,serif;font-size:29px;color:var(--green);line-height:1.12;margin:0 0 7px}
.exsub{font-size:13px;color:var(--mut);margin:0 0 22px;line-height:1.5;max-width:46ch}
/* One composed list, not five identical floating cards — matches the phone's
   own .card/.row vocabulary and reads as a single "tour" object. */
.exmenu{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--cardline);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px var(--shadow-tint)}
.exrow{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding:14px 18px;cursor:pointer;transition:background .15s}
.exrow:first-child{border-top:none}
.exrow:hover{background:var(--hover-tint)}
.exrow .exn{width:20px;color:var(--brand-mist-gray);font-family:Georgia,serif;font-size:16px;text-align:center;flex:0 0 auto}
.exrow .ext{flex:1;min-width:0}.exrow .ext b{display:block;font-size:13.5px;color:var(--ink)}.exrow .ext small{font-size:11px;color:var(--mut2)}
.exrow .play{width:30px;height:30px;border-radius:50%;background:var(--sage);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .15s}
.exrow .play svg{width:13px;height:13px;fill:var(--green);margin-left:2px;transition:fill .15s}
.exrow:hover .play{background:var(--green)}
.exrow:hover .play svg{fill:#fff}

/* ---- narrated tour playback (audio + on-screen action), 1:1 with root's
   startExplainer engine — desktop-only here, since these tenant demos have
   no separate mobile fullscreen tour surface (root's #mTour/#mLyrics) to
   also clone; the desktop .exstage panel is the only place this plays. ---- */
.explay{display:none;flex-direction:column;height:min(82vh,720px)}
.exstage.playing .exmenu,.exstage.playing .exhead,.exstage.playing .exsub,.exstage.playing .exlogo{display:none}
.exstage.playing .explay{display:flex}
.exeyebrow{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--label);font-weight:700;margin-bottom:16px}
.exflow{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;overflow:hidden}
.exline{font-family:Georgia,serif;font-size:34px;line-height:1.18;color:var(--green);opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease,font-size .6s ease,color .6s ease;margin:0}
.exline.show{opacity:1;transform:none}
.exline.past{opacity:.28;font-size:20px;color:var(--mut);line-height:1.3}
.exprog{height:3px;background:var(--cardline);border-radius:2px;margin-top:16px;overflow:hidden}
.exprog i{display:block;height:100%;width:0;background:var(--green);transition:width .12s linear}
.exctl{display:flex;align-items:center;gap:9px;margin-top:16px}
.exctl .exbtn{display:flex;align-items:center;gap:7px;background:var(--cta);color:#fff;border:none;border-radius:20px;padding:9px 15px;font-size:12.5px;font-weight:600;cursor:pointer}
.exctl .exbtn svg{fill:#fff}
.exctl .exbtn.ghost{background:transparent;color:var(--mut);border:1px solid var(--cardline)}
.exlang{display:flex;border:1px solid var(--cardline);border-radius:16px;overflow:hidden;margin-left:auto}
.exlang button{background:var(--card);border:none;color:var(--mut);font-size:11px;padding:7px 11px;cursor:pointer}
.exlang button.on{background:var(--green);color:#fff}
/* glowing orb finger */
.orb{position:fixed;left:0;top:0;width:132px;height:132px;border-radius:50%;pointer-events:none;z-index:113;opacity:0;transform:translate(-50%,-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-gold) 32%,transparent) 0%,color-mix(in srgb,var(--brand-gold) 12%,transparent) 42%,transparent 70%);
  filter:blur(8px);
  transition:left .85s cubic-bezier(.4,0,.2,1),top .85s cubic-bezier(.4,0,.2,1),opacity .55s}
.orb.show{opacity:1}
.ex-active{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-gold) 50%,transparent),0 0 22px 6px color-mix(in srgb,var(--brand-gold) 30%,transparent)!important;transition:box-shadow .5s ease;position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){
  .orb{display:none!important}.ex-active{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-gold) 55%,transparent)!important}
}

/* ---- responsive desktop: phone frame becomes a full app with left nav (1:1 with root) ---- */
@media(min-width:900px){
  body[data-view="desktop"]{align-items:stretch;justify-content:flex-start}
  body[data-view="desktop"] .sidebar{display:flex;flex-direction:column;width:252px;flex:0 0 252px;height:100vh;background:var(--ivory);border-right:1px solid var(--line);padding:20px 14px;overflow-y:auto;gap:3px}
  body[data-view="desktop"] .sidebar .brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:6px 12px 16px}
  body[data-view="desktop"] .sidebar .brand small{display:block;font-family:Georgia,serif;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--brand-gold)}
  body[data-view="desktop"] .sidebar .sfoot{margin-top:auto;font-size:9.5px;color:var(--mut2);padding:14px 12px 2px;line-height:1.45;border-top:1px solid var(--line)}
  body[data-view="desktop"] .device{width:auto;flex:1;height:100vh;max-width:none;border:none;border-radius:0;box-shadow:none}
  body[data-view="desktop"] .tabbar{display:none}
  body[data-view="desktop"] .back{display:none!important}
  /* T020: the sidebar is the single brand-identity source in desktop mode --
     suppress the in-content .barttl .mk wordmark/logo here so it doesn't
     duplicate the sidebar's brand block. NOTE: shared/demo-shell.js's
     syncHeaderBrand() also sets #brandMk's inline style.display per-screen
     (block on the home screen) -- a plain stylesheet rule like this one can
     never win a cascade fight against an inline style, so syncHeaderBrand()
     was updated to never set 'block' while data-view="desktop" is active;
     this CSS rule is the belt-and-suspenders/declarative half of that fix
     (and is what actually applies whenever JS hasn't run yet, e.g. no-JS
     fallback). Phone-frame/mobile view is untouched (no sidebar there), so
     .barttl .mk still renders normally and the JS still sets it to 'block'
     on the home screen there. */
  body[data-view="desktop"] .barttl .mk{display:none}
  body[data-view="desktop"] .appbar{padding:18px 32px 13px}
  body[data-view="desktop"] .screens{padding-bottom:36px}
  body[data-view="desktop"] .screen{max-width:1120px;margin:0 auto;width:100%;padding:30px 36px 18px}
  body[data-view="desktop"] .screen.active{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);gap:16px 20px;align-items:start}
  body[data-view="desktop"] .screen>h1.t{grid-column:1/-1;padding:0;margin:0;font-size:30px;line-height:1.08}
  body[data-view="desktop"] .screen>.sub{grid-column:1/-1;padding:0;margin:-10px 0 3px;max-width:680px;font-size:13px;line-height:1.45}
  body[data-view="desktop"] .screen>.hello{grid-column:1/-1;padding:0;margin:0}
  body[data-view="desktop"] .hello h2{font-size:31px}
  body[data-view="desktop"] .screen>.sec{grid-column:1/-1;margin:4px 0 -6px;letter-spacing:1.3px}
  body[data-view="desktop"] .screen>.card,
  body[data-view="desktop"] .screen>.src,
  body[data-view="desktop"] .screen>.priv,
  body[data-view="desktop"] .screen>.promo,
  body[data-view="desktop"] .screen>.hero,
  body[data-view="desktop"] .screen>.askbar,
  body[data-view="desktop"] .screen>.acts,
  body[data-view="desktop"] .screen>.btn,
  body[data-view="desktop"] .screen>.foot{margin:0}
  body[data-view="desktop"] .screen>.card,
  body[data-view="desktop"] .screen>.src,
  body[data-view="desktop"] .screen>.priv{break-inside:avoid;margin:0 0 13px}
  body[data-view="desktop"] .card{border-radius:14px}
  body[data-view="desktop"] .row{padding:13px 16px}
  body[data-view="desktop"] .askbar{min-height:52px;padding:14px 17px}
  body[data-view="desktop"] .src,
  body[data-view="desktop"] .priv{padding:11px 13px}
  body[data-view="desktop"] .foot{text-align:left;padding:2px 0 0}
  body[data-view="desktop"] #home.screen.active{grid-template-columns:minmax(0,1fr) minmax(360px,.85fr)}
  body[data-view="desktop"] #home>.askbar,
  body[data-view="desktop"] #home>.promo,
  body[data-view="desktop"] #home>.card,
  body[data-view="desktop"] #home>.tiles,
  body[data-view="desktop"] #home>.foot{grid-column:1/-1}
  body[data-view="desktop"] #home>.tiles{padding:0;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  body[data-view="desktop"] #benefits>.card,
  body[data-view="desktop"] #benefits>.src,
  body[data-view="desktop"] #benefits>.foot,
  body[data-view="desktop"] #hr>.card,
  body[data-view="desktop"] #hr>.priv,
  body[data-view="desktop"] #hr>.foot,
  body[data-view="desktop"] #wellness>.priv,
  body[data-view="desktop"] #wellness>.foot,
  body[data-view="desktop"] #doctor>.card,
  body[data-view="desktop"] #doctor>.foot{grid-column:1/-1}
  body[data-view="desktop"] #idcard.screen.active{grid-template-columns:minmax(360px,620px) minmax(0,1fr)}
  body[data-view="desktop"] #idcard>.hero,
  body[data-view="desktop"] #idcard>.acts{max-width:620px;width:100%}
  /* .active is load-bearing: the ID selector outranks .screen{display:none},
     so an unqualified `#ask{display:block}` kept the chat visible on EVERY
     desktop-view screen. Only the active Ask screen may take these styles. */
  /* Keep the base #ask.active flex column (block here left the chat input
     floating mid-page over a dead zone); size it to the viewport minus the
     appbar+demostrip so the input bar pins to the bottom like a real chat. */
  body[data-view="desktop"] #ask.active{display:flex;flex-direction:column;min-height:calc(100vh - 140px);width:100%;max-width:920px;margin:0 auto;padding:28px 36px 18px}
  body[data-view="desktop"] #ask .chatwrap{max-width:760px;width:100%;margin:0 auto}
  /* Phone-frame preview view: mobile app inside a device mockup */
  body[data-view="phone"]{align-items:center;justify-content:center;background:var(--frame-bg);overflow:hidden}
  body[data-view="phone"] .sidebar{display:none}
  body[data-view="phone"] .device{width:390px;height:844px;max-width:none;flex:0 0 auto;border-radius:46px;border:11px solid #1b1b1d;box-shadow:0 30px 80px rgba(0,0,0,.4);transform-origin:center center}
  body[data-view="phone"] .tabbar{display:flex}
}
body.is-mobile{align-items:stretch;justify-content:flex-start;overflow:hidden;background:var(--ivory)}
body.is-mobile .sidebar{display:none}
body.is-mobile .device{width:100vw;height:100dvh;max-width:none;flex:1 1 auto;border:0;border-radius:0;box-shadow:none;transform:none}
body.is-mobile .screens{padding-bottom:calc(108px + env(safe-area-inset-bottom))}

/* Logo. T018 added the real per-tenant raster logo image
   (demos/<slug>/assets/logo.jpg, see tenants/<slug>.json logo.path).
   `mix-blend-mode:multiply` drops each JPG's baked-in white background into
   the sidebar/appbar's own tinted surface instead of showing as a hard-edged
   white box — the logo art already carries the brand name, so the sidebar
   pairs it with a single-line caption (.sidebar .brand small) instead of a
   second, redundant text wordmark (removed here; see
   docs/goals/tenant-demos-ccc-anybabycan/notes/T023-brand-corner-cleanup-receipt.md). */
.brand-logo{display:block;max-width:100%;object-fit:contain;mix-blend-mode:multiply}
.sidebar .brand{display:flex;align-items:center;gap:10px}
.sidebar .brand .brand-logo{max-height:38px;max-width:100%}
.barttl .mk{display:flex;align-items:center;gap:8px}
.barttl .mk .brand-logo{max-height:24px;max-width:120px}

/* ---- ask / chat (text-only; no realtime voice in this tranche) ---- */
/* min-height:100% of the .screens scroll container so .chatwrap{flex:1} can
   push the input bar down to sit just above the tab bar instead of floating
   under the chips. */
#ask.active{display:flex;flex-direction:column;padding:0;animation:fade .22s ease;min-height:100%}
.chatwrap{flex:1;display:flex;flex-direction:column;min-height:0}
.chatlog{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 6px;display:flex;flex-direction:column;gap:11px}
.cbub{max-width:84%;padding:11px 14px;border-radius:17px;font-size:14.5px;line-height:1.42;animation:cbIn .34s cubic-bezier(.2,.7,.2,1)}
@keyframes cbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cbub.bot{align-self:flex-start;background:var(--card);border:1px solid var(--cardline);color:var(--ink);border-bottom-left-radius:5px}
.cbub.me{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:5px}
.cbub.intro{background:var(--sage);border:1px solid var(--cardline)}
.ctyping{align-self:flex-start;display:flex;gap:4px;padding:14px 16px;background:var(--card);border:1px solid var(--cardline);border-radius:17px;border-bottom-left-radius:5px}
.ctyping i{width:7px;height:7px;border-radius:50%;background:var(--mut2);animation:ctp 1s infinite}
.ctyping i:nth-child(2){animation-delay:.15s}.ctyping i:nth-child(3){animation-delay:.3s}
@keyframes ctp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chatsug{display:flex;flex-wrap:wrap;gap:8px;padding:3px 16px 8px}
.sugchip{background:var(--card);border:1px solid var(--muted-line);color:var(--green);border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:600;cursor:pointer;transition:transform .12s,background .12s;animation:cbIn .3s ease}
.sugchip:active,.sugchip:hover{transform:translateY(-1px);background:var(--sage)}
.chatbar{display:flex;align-items:center;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--ivory)}
.chatbar input{flex:1;border:1px solid var(--cardline);background:var(--card);border-radius:999px;padding:11px 16px;font-size:14px;color:var(--ink);outline:none;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.chatbar input:focus{border-color:color-mix(in srgb,var(--brand-green) 55%,var(--cardline));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-green) 12%,transparent)}
.sendbtn{width:42px;height:42px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;background:var(--green)}
.sendbtn svg{width:18px;height:18px;fill:#fff}
/* Quiet caption, not a third disclaimer box — the demostrip directly above
   and the bot's own intro already carry the synthetic-demo framing. */
.ai-boundary{font-size:10.5px;line-height:1.45;color:var(--mut2);text-align:center;padding:10px 24px 0;margin:0}

/* ---- Demo control dock (ported from root index.html's #themeDock; see
   shared/demo-shell.js buildDock()/handleDockClick() for the JS half) ---- */
.themedock{position:fixed;right:14px;top:calc(90px + env(safe-area-inset-top));z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
@media(min-width:900px){.themedock{top:auto;bottom:20px;right:20px}}
.themedock .panel{display:none;flex-direction:column;gap:5px;background:#fffefa;border:1px solid var(--cardline);border-radius:15px;padding:9px;box-shadow:0 10px 30px rgba(0,0,0,.2);min-width:152px;max-height:74vh;overflow:auto}
.themedock.open .panel{display:flex}
.themedock .ph{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--label);font-weight:700;padding:2px 6px 5px}
.themedock .pl{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--label);font-weight:700;padding:7px 6px 3px}
.themedock .div{height:1px;background:var(--line);margin:5px 2px}
.themedock .sw{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:12.5px;color:var(--ink);padding:6px;border-radius:10px;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.themedock .sw:hover{background:var(--hover-tint)}
.themedock .dot{width:18px;height:18px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.themedock .sw.on{font-weight:700}
.themedock .sw.on .dot{box-shadow:0 0 0 2px var(--ink)}
.themedock .seg{display:flex;gap:5px;padding:5px 4px 2px}
.themedock .sgi{flex:1;font-size:11.5px;padding:7px 4px;border-radius:9px;border:1px solid var(--cardline);background:var(--card);color:var(--ink);cursor:pointer;font-weight:600;font-family:inherit}
.themedock .sgi.on{background:var(--green);color:#fff;border-color:var(--green)}
.themedock .scn{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px;color:var(--ink);padding:6px;border-radius:10px;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.themedock .scn:hover{background:var(--hover-tint)}
.themedock .scn .ci{width:15px;height:15px;border-radius:50%;border:2px solid var(--brand-mist-gray);flex:0 0 auto}
.themedock .scn.on{font-weight:700}
.themedock .scn.on .ci{border-color:var(--green);box-shadow:inset 0 0 0 3px var(--green)}
.themedock .a2row{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px;color:var(--green);font-weight:600;padding:6px;border-radius:10px;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.themedock .a2row:hover{background:var(--hover-tint)}
.themedock .a2row svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;flex:0 0 auto}
.themedock .fab{width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.28);cursor:pointer}
.themedock .fab svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7}
body.is-mobile .themedock{top:calc(98px + env(safe-area-inset-top));right:12px}
body.is-mobile .themedock .fab{width:40px;height:40px}
body.is-mobile #viewSeg,body.is-mobile #viewSegLabel{display:none}

/* ---- Dark mode (layers on top of whichever tenant brand palette is active
   via data-theme; mirrors root index.html's :root[data-mode="dark"] approach
   of overriding --brand-* tokens directly rather than the --ivory/--ink
   aliases, so anything reading --brand-on-dark/--brand-on-dark-2/etc. stays
   correct too. Root also brightens --brand-green/--brand-gold per theme for
   contrast on dark backgrounds — skipped here since tenant brand colors are
   arbitrary hexes with no precomputed bright variant; if a given tenant's
   primary color reads poorly in dark mode, add a
   :root[data-mode="dark"][data-theme="<slug>"] override in that tenant's
   block above.) ---- */
html:root[data-mode="dark"]{
  --brand-ivory:#15140F;--brand-ink:#F2EFE9;--brand-stone:#2C2A23;
  --card:#1E1C16;--cardline:#322F27;--line:rgba(255,255,255,.085);
  --mut:#B5AFA4;--mut2:#948E84;--frame-bg:#0B0A08;--brand-sage:#2A2C26;
  --brand-on-dark:#DAD6CF;--brand-on-dark-2:#B6B1A8;--brand-green-strong:#D2CDC2;
}
html:root[data-mode="dark"] .demostrip{background:#241F16;color:#CBA75C;border-bottom-color:#39301c}
html:root[data-mode="dark"] .askbar{background:var(--card);border-color:var(--cardline)}
html:root[data-mode="dark"] .chip{background:var(--card);border-color:var(--cardline);color:var(--mut)}
html:root[data-mode="dark"] .back{background:var(--card);border-color:var(--cardline)}
html:root[data-mode="dark"] .lang{border-color:var(--cardline)}
html:root[data-mode="dark"] .lang span{color:var(--mut)}
html:root[data-mode="dark"] .tabbar{background:rgba(16,14,10,.96)}
html:root[data-mode="dark"] .themedock .panel{background:var(--card)}
html:root[data-mode="dark"] .src,html:root[data-mode="dark"] .priv{background:#20231C;border-color:#2f342a}
html:root[data-mode="dark"] .cbub.bot,html:root[data-mode="dark"] .ctyping{background:var(--card);border-color:var(--cardline)}
html:root[data-mode="dark"] .sugchip{background:var(--ivory)}
html:root[data-mode="dark"] .chatbar{background:var(--ivory)}
html:root[data-mode="dark"] .chatbar input{background:var(--card);border-color:var(--cardline)}

button:focus-visible,input:focus-visible,[role="button"]:focus-visible{outline:3px solid var(--brand-gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

@media (max-width:480px){
  .device{border-radius:0}
}