/*
  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, theme dock, 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.

  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);
}

/* 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;
}

*{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 #d8e0d4;border-radius:18px;overflow:hidden;font-size:11px;flex:0 0 auto;cursor:pointer}
.lang span{padding:6px 10px;color:#5b6b5e}.lang .a{background:var(--green);color:#fff}
.demostrip{font-size:9.5px;color:#8a6d1f;background:#f6efdc;text-align:center;padding:4px 10px;border-bottom:1px solid #ecdfbc}

/* ---- 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:#9a8a63;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 rgba(22,61,44,.05)}
.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:#f4f0e6}
.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:#f3e9d2;color:#8a6526}.ic.sage{background:#dde6d6;color:#46603f}
.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:#f6efdc;color:#8a6d1f}.pill.free{background:#f3e9d2;color:#8a6526}
.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 #cdd9c6;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 #cdd9c6;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:#eef2e9;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:#9a8a63;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 #d8e0d4;border-radius:26px;padding:13px 16px;cursor:pointer;box-shadow:0 2px 8px rgba(22,61,44,.06)}
.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:#7a857c}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:0 14px}
.tile{background:var(--card);border:1px solid var(--cardline);border-radius:16px;padding:14px 13px;cursor:pointer;box-shadow:0 1px 2px rgba(22,61,44,.05)}
.tile:active{background:#f4f0e6}
.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 rgba(22,61,44,.22)}
.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}

/* ---- 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 rgba(22,61,44,.22)}
.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 #e4ded0;color:#5b6b5e;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:#eef2e9;border:1px solid #d7e2d0;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:rgba(22,61,44,.96);color:#fff;border-radius:15px;padding:12px 14px;font-size:12px;line-height:1.35;text-align:center;box-shadow:0 12px 28px rgba(22,61,44,.25);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) ---- */
.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;background:rgba(250,248,242,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);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:#9aa399;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:var(--green)}

/* ---- sidebar nav (desktop only) ---- */
.sidebar{display:none}
.snav{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:#5b6b5e;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:#f1ede2}
.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 in the DOM as a sibling of .sidebar and
   .device, shown in the desktop dashboard layout alongside the sidebar
   (these tenant demos have no phone-mockup-at-desktop-width state like
   root, so the panel is wired to the desktop view instead). */
.exstage{display:none}
body.is-mobile .exstage{display:none!important}
@media(min-width:900px){
  body[data-view="desktop"] .exstage{display:flex;flex-direction:column;width:300px;flex:0 0 300px;height:100vh;padding:26px 20px;overflow-y:auto;border-right:1px solid var(--line);background:var(--ivory)}
}
.exlogo{max-height:30px;max-width:170px;margin-bottom:16px}
.exhead{font-family:Georgia,serif;font-size:22px;color:var(--green);line-height:1.15;margin:0 0 5px}
.exsub{font-size:12.5px;color:var(--mut);margin:0 0 18px;line-height:1.5}
.exmenu{display:flex;flex-direction:column;gap:9px}
.exrow{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--cardline);border-radius:14px;padding:13px 15px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.exrow:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(0,0,0,.09)}
.exrow .exn{width:30px;height:30px;border-radius:9px;background:var(--sage);color:var(--green);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:14px;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 svg{width:22px;height:22px;fill:var(--green)}

/* ---- 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{font-family:Georgia,serif;font-size:19px;color:var(--green);padding:4px 12px 14px;line-height:1.1}
  body[data-view="desktop"] .sidebar .brand small{display:block;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--brand-gold);margin-top:3px}
  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%}
  body[data-view="desktop"] #ask{display:block;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)}
  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}
body.is-mobile .screens{padding-bottom:calc(108px + env(safe-area-inset-bottom))}

/* Logo / wordmark. Text wordmark stays as a fallback/companion label; T018
   adds the real per-tenant raster logo image (demos/<slug>/assets/logo.jpg,
   see tenants/<slug>.json logo.path) next to it, capped with max-height so a
   wide horizontal logo never breaks the sidebar or phone-frame appbar. */
.wordmark{display:block;font-family:Georgia,serif;line-height:1.1}
.sidebar .brand .wordmark{font-size:19px;color:var(--green)}
.barttl .mk .wordmark{font-size:15px;color:var(--green)}
.brand-logo{display:block;max-width:100%;object-fit:contain}
.sidebar .brand{display:flex;align-items:center;gap:10px}
.sidebar .brand .brand-logo{max-height:34px;max-width:170px}
.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) ---- */
#ask.active{display:flex;flex-direction:column;padding:0;animation:fade .22s ease}
.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(--ivory);border:1px solid var(--brand-gold);color:var(--green);border-radius:999px;padding:8px 14px;font-size:12.5px;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}
.chatbar input:focus{border-color:var(--brand-gold)}
.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}
.ai-boundary{font-size:11px;line-height:1.45;color:var(--brand-green-strong);background:var(--sage);border-radius:10px;padding:9px 12px;margin:0 16px 0}

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}
}