/* R10: extracted verbatim from app/index.html's two inline <style> blocks
   (same order, so the cascade is unchanged). */
/* Otto loading / thinking bubble (rotating status lines while Otto works) */
.msg.otto-loading{display:flex;align-items:center;gap:9px;opacity:.92;font-style:italic;}
.otto-dot{width:9px;height:9px;border-radius:50%;background:var(--accent,#7C83FF);flex:none;animation:ottopulse 1s ease-in-out infinite;}
@keyframes ottopulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.7);opacity:.45;}}
:root{
  /* --accent / --accent2 are themed at boot from /vertical.json (see boot()).
     Default to field-service green; the legacy --green-l aliases --accent. */
  --accent:#3FA85F;--accent2:#C4A882;
  /* Otto light/warm palette — cohesive with relax.business (cream/peach/indigo). */
  --cream:#FFF8F0;--white:#FFFFFF;--cream2:#FFE8D6;
  --ink:#2B2750;--ink2:#5B567E;--ink3:#8B86A8;
  --green:#2F7D3E;--green-l:var(--accent);--green-bg:#EAF3EA;
  --gold:#A87F1F;--gold-l:#C99A2E;--gold-bg:#F6EAD0;
  --red:#C0392B;--red-bg:#F7E4E1;--line:#ECE6F5;--line2:#DAD3EC;
  /* Former "dark" tokens are now LIGHT/warm so the theme:dark screens (home/ask)
     read as Otto-light, cohesive with the rest. (--d* names kept for back-compat.) */
  --dbg:#FFF8F0;--dcard:#FFFFFF;--dcard2:#FFF1E6;--dline:#EDE7F6;--dlinew:#DAD3EC;--dtx:#2B2750;--dim:#5B567E;--faint:#9089AB;--dl:var(--accent);--dgold:#A87F1F;
  /* v338: the app is a designed-light theme. "only light" opts out of Chrome/
     WebView Auto-Dark, which force-inverted the white chip cards into empty-
     looking grey bars on phones with "Darken websites" on (Chris's HQ bug). */
  color-scheme:only light;
}
/* Otto brand headings (Fredoka), cohesive with the marketing site. */
.brand b,.hdr h2,.login .wm,.login h2,.doc .num,.payhero .amt,.cprofile .nm,.mcard .v,.pill .pv,.tot .v{font-family:'Fredoka','Inter',sans-serif;letter-spacing:-.3px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--cream);color:var(--ink);overscroll-behavior:none}
input,textarea,button{font-family:inherit}
.app{position:fixed;inset:0;max-width:480px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden;background:var(--cream)}
.body{flex:1;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
.body::-webkit-scrollbar{display:none}
/* v364 (TDCHROME) — a screen taller than the viewport must SCROLL, never get
   SQUEEZED. .body is a flex column, so every direct child inherits
   flex-shrink:1: when the content overflows, flexbox compresses the children
   instead of letting the container scroll. Two families lose badly:
     * a child that is itself a scroll container (overflow-x:auto — the
       Multi-Business entity switcher, chip rows) has an automatic minimum size
       of ZERO, so it absorbs the whole overflow and collapses to a 12px sliver
       (the reported "the businesses row is a 4px line" bug);
     * grid rows (.stats) squeeze until the wrapped card labels are cut by the
       card edge (the reported "COLLECTED · … is clipped" bug).
   This is the general form of the v338 .chiprow fix — do it once, for every
   screen, instead of per-element whack-a-mole. Inline `style="flex:1"` spacers
   and .center keep their own shrink (they carry no content to lose). */
.body>*{flex-shrink:0}
.body.dark{background:radial-gradient(900px 480px at 50% -6%,#FFEFE2 0%,transparent 60%),radial-gradient(700px 420px at 50% 112%,#ECEDFF 0%,transparent 60%),var(--cream)}
.body.light{background:var(--cream)}
/* P-UI(B) desktop: on wide screens, stop rendering a lonely full-height phone strip.
   Present the app as a centered, intentional "device" card on a calm desktop backdrop.
   .login is position:absolute inset:0 inside .app, so it fills the card too. */
/* NEW-27 (2026-07-07 go-live): widen that phone card into a comfortable desktop
   layout — a wider frame + a centred content measure so list rows, invoice docs
   and forms use the space, and the summary grids (money cards, home stats) go
   multi-column. The body KEEPS its flex-column + sticky-.askfoot behaviour
   byte-for-byte (padding on the scroll container, never a grid/wrapper, so the
   `<div style="flex:1">` spacer still pins the ask bar to the bottom). Everything
   below 900px is completely untouched — the mobile card is the primary surface. */
@media (min-width:900px){
  html,body{background:radial-gradient(1200px 760px at 50% -8%,#FFEAD8 0%,transparent 60%),radial-gradient(1000px 640px at 50% 116%,#E7E8FF 0%,transparent 62%),#F2EDF7}
  .app{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(960px,96vw);max-width:none;height:min(880px,94vh);border-radius:26px;box-shadow:0 40px 90px -34px rgba(43,39,80,.55),0 0 0 1px var(--line2);overflow:hidden}
  /* Header + tab bar breathe wider across the desktop card. */
  .hdr{padding-left:26px;padding-right:26px}
  .tabs{padding-left:24px;padding-right:24px}
  /* Centre the scrolling content in a ~760px measure so wide list rows, invoice
     docs and forms don't stretch edge-to-edge. Padding lives on the scroll
     container itself (not a wrapper element) so the flex-column layout and the
     sticky .askfoot are unchanged — the ask footer spans the same measure and
     stays pinned to the bottom exactly as on mobile. */
  .body{padding-inline:max(18px,calc((100% - 760px)/2))}
  /* Summary/KPI card grids spend the extra width responsively: auto-fit fills
     as many columns as fit and collapses empty tracks, so a 2-card summary stays
     a wide 2-up while a many-card dashboard (e.g. admin) goes 3–4 across — never
     leaving dangling empty columns. */
  .mcards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  /* Chat + inline plan previews keep a readable line length rather than
     ballooning to the full 760px measure. */
  .chat .msg{max-width:580px}
  .chat .planCard{max-width:580px}
}

.hdr{background:rgba(255,248,240,.92);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--dline);padding:calc(13px + env(safe-area-inset-top)) 14px 11px;display:flex;align-items:center;gap:10px;flex-shrink:0;min-height:54px}
.brand{display:flex;align-items:center;gap:9px}
.brand b{font-size:15px;font-weight:700;color:var(--dtx);letter-spacing:-.4px;display:block;line-height:1}
.brand .t{font-size:7px;font-weight:600;letter-spacing:1.5px;color:var(--dl);margin-top:3px}
.hdr h2{font-size:17px;font-weight:700;color:var(--dtx);letter-spacing:-.3px}
.hdr .sp{margin-left:auto;display:flex;gap:7px}
.dicon,.back{width:34px;height:34px;border-radius:9px;background:var(--dcard);border:1px solid var(--dline);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;color:var(--dim);flex-shrink:0}
.back{color:var(--dtx);font-size:17px}.dicon:active,.back:active{transform:scale(.93)}

.tabs{display:grid;grid-template-columns:repeat(4,1fr);background:var(--dbg);border-top:1px solid var(--dline);padding:9px 6px calc(11px + env(safe-area-inset-bottom));flex-shrink:0}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--faint);font:inherit;font-size:10px;cursor:pointer}
.tab i{font-size:19px}.tab.on{color:var(--dl)}.tab:active{transform:scale(.92)}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 16px 4px}
.pill{background:var(--dcard);border:1px solid var(--dline);border-radius:13px;padding:9px 12px;cursor:pointer;text-align:left}
.pill .pl{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint)}
.pill .pv{font-size:17px;font-weight:700;margin-top:1px;color:var(--dtx)}
.pill.warn{border-color:var(--gold);background:linear-gradient(180deg,rgba(201,154,46,.10),var(--dcard))}.pill.warn .pv{color:var(--dgold)}
.dsec{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--faint);padding:14px 16px 6px;display:flex;justify-content:space-between}
.dsec a{color:var(--dl);text-transform:none;letter-spacing:0;font-size:12px;cursor:pointer}
.drow{display:flex;align-items:center;gap:11px;background:var(--dcard);border:1px solid var(--dline);border-radius:14px;padding:11px 13px;margin:6px 12px;cursor:pointer}
.drow:active{border-color:var(--dlinew)}
.dico{width:34px;height:34px;border-radius:9px;background:var(--dcard2);display:flex;align-items:center;justify-content:center;color:var(--dl);font-size:16px;flex-shrink:0}.dico.gold{color:var(--dgold)}.dico.red{color:#e98}
.drt{font-size:13px;font-weight:600;color:var(--dtx)}.drs{font-size:11px;color:var(--dim);margin-top:1px}
.dramt{margin-left:auto;text-align:right}.dramt .v{font-size:13px;font-weight:700;color:var(--dtx)}
/* Sticky chat footer: chip row + ask bar pinned to the bottom of the scroll
   area so the suggestion chips are ALWAYS reachable (never scroll away behind
   the ask bar). Cream backdrop matches .hdr so messages don't bleed through. */
/* Sticky ask footer sits directly above the fixed .tabs, which already reserve the
   bottom safe-area — so no safe-area padding here (it was pushing the ask bar down
   over the nav on gesture-bar phones). .body has padding-bottom for clean separation. */
.askfoot{position:sticky;bottom:0;z-index:5;background:var(--dbg);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-top:1px solid var(--dline)}
/* v332 fix: the sticky footer pinned ABOVE .body's 8px bottom padding, leaving a
   see-through strip where scrolled list rows peeked out under the composer and ran
   into the tab bar. Drop the body's bottom padding on screens that END with the
   composer (the -8px margin above keeps the flow height identical), so the footer
   pins flush to the true bottom and nothing can show through. */
.body:has(> .askfoot:last-child){padding-bottom:0}
/* flex-shrink:0 is load-bearing (v338): overflow-x:auto zeroes the row's
   automatic min-height, so inside the flex-column .body a tall screen (HQ)
   collapsed chip rows into clipped empty bars. Never let them shrink. */
.chiprow{display:flex;gap:7px;padding:8px 14px 4px;overflow-x:auto;scrollbar-width:none;flex-shrink:0}.chiprow::-webkit-scrollbar{display:none}
.qchip{flex-shrink:0;background:var(--dcard);border:1px solid var(--dline);border-radius:16px;color:var(--dim);font:inherit;font-size:12px;padding:7px 12px;white-space:nowrap;cursor:pointer}
.qchip:active{border-color:var(--green-l);color:var(--dl)}
/* v333 — home chip edit mode (long-press): wiggle + ✕ + drag + Done */
.chiprow.editing{padding-top:13px}
@keyframes qwiggle{0%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}100%{transform:rotate(-1.6deg)}}
.qchip.qedit{position:relative;animation:qwiggle .4s ease-in-out infinite;user-select:none;-webkit-user-select:none;touch-action:none}
.qchip.qedit.qlock{animation:none;opacity:.55;cursor:default}
.qchip.dragging{animation:none;transform:scale(1.07);opacity:.9;border-color:var(--accent);z-index:5}
.qx{position:absolute;top:-8px;right:-8px;width:17px;height:17px;border-radius:50%;background:var(--red,#C0392B);color:#fff;font-size:10px;line-height:17px;text-align:center;cursor:pointer}
.qchip.qadd{border-style:dashed;color:var(--accent)}
.qdone{position:fixed;right:14px;bottom:150px;z-index:59;background:var(--accent);color:#fff;border:none;border-radius:18px;padding:9px 18px;font:inherit;font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:pointer}
@media (prefers-reduced-motion: reduce){.qchip.qedit{animation:none}}
/* v333 — Books filter pills (light theme) */
.fbar{flex-wrap:wrap;align-items:center;padding:6px 14px 2px}
.fpill{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;background:var(--cream2);border:1px solid var(--accent);border-radius:14px;color:var(--ink);font-size:11.5px;padding:5px 10px;cursor:pointer}
.fpill b{font-weight:700;opacity:.6}
.fpill.fclear{border-color:var(--line);color:var(--ink2)}
.fcount{font-size:11px;color:var(--ink3);margin-left:auto}
.askbar{display:flex;align-items:center;gap:8px;margin:6px 14px 12px;background:var(--dcard);border:1px solid var(--dline);border-radius:20px;padding:8px 8px 8px 15px}
.askbar input,.askbar textarea{flex:1;background:none;border:none;color:var(--dtx);font:inherit;font-size:14px;outline:none;min-width:0}.askbar input::placeholder,.askbar textarea::placeholder{color:var(--faint)}
/* Multiline ask/chat composer: grows with the message (JS sets height), caps
   at ~5 lines then scrolls inside itself — text always wraps, never runs off
   the right edge under the mic/send buttons. */
.askbar textarea{resize:none;overflow-y:auto;max-height:108px;line-height:1.45;padding:0;margin:9px 0;scrollbar-width:none}
/* v332 fix: the composer textarea's auto scrollbar painted as a stray grey pill
   inside the ask row, left of the mic (house style hides scrollbars everywhere). */
.askbar textarea::-webkit-scrollbar{display:none}
.ab{width:38px;height:38px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;cursor:pointer}
/* v363 (audit P2): the send button derives from the EDITION ACCENT — it was
   hardcoded Field-Service green and showed green in the blue Multi-Business app. */
.ab.mic{background:var(--dcard2);color:var(--dl)}.ab.send{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 78%,#000));color:#fff}.ab:active{transform:scale(.9)}
.ab.rec{background:var(--red);color:#fff;animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.chat{display:flex;flex-direction:column;gap:10px;padding:14px 14px 4px}
.msg{max-width:84%;padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.45}
.msg.u{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.msg.a{align-self:flex-start;background:var(--dcard);border:1px solid var(--dline);border-bottom-left-radius:5px;color:var(--dtx);white-space:pre-wrap}
/* D1: inline site-plan preview card in chat (tap → full-screen studio). */
.planCard{align-self:flex-start;width:84%;max-width:84%;margin-top:-2px;border:1px solid var(--dline);border-radius:16px;overflow:hidden;background:var(--dcard);cursor:pointer;box-shadow:0 10px 24px -18px rgba(43,39,80,.5);transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease}
.planCard:active{transform:scale(.99)}.planCard:hover{border-color:var(--accent);box-shadow:0 16px 30px -18px rgba(43,39,80,.55)}
.planCardImg{background:var(--white);display:flex;align-items:center;justify-content:center;min-height:120px;max-height:260px;overflow:hidden}
.planCardImg svg{width:100%;height:auto;max-height:260px;display:block}
.planCardLoad{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:12.5px;font-style:italic;padding:22px}
.planCardBar{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:12px;font-weight:600;color:var(--dl);border-top:1px solid var(--dline)}
.planCardBar span{flex:1}.planCardBar i{font-size:15px}

.bd{font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;display:inline-block;margin-top:2px}
.dark .bd.paid{background:rgba(63,168,95,.16);color:var(--dl)}.dark .bd.due{background:rgba(201,154,46,.16);color:var(--dgold)}.dark .bd.over{background:rgba(212,69,69,.16);color:#ec8}.dark .bd.draft{background:var(--dcard2);color:var(--dim)}
.light .bd.paid{background:var(--green-bg);color:var(--green)}.light .bd.due{background:var(--gold-bg);color:var(--gold)}.light .bd.over{background:var(--red-bg);color:var(--red)}.light .bd.draft{background:var(--cream2);color:var(--ink3)}

.seg{display:flex;gap:6px;padding:12px 16px 4px}
.seg div{flex:1;text-align:center;padding:8px;border-radius:10px;font-size:13px;font-weight:600;color:var(--ink2);background:var(--cream2);cursor:pointer}.seg div.on{background:var(--accent);color:#fff}
.totbar{display:flex;gap:10px;padding:8px 16px}
.tot{flex:1;background:var(--white);border:1px solid var(--line);border-radius:13px;padding:11px 13px}
.tot .l{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink3)}.tot .v{font-size:18px;font-weight:700;color:var(--ink);margin-top:2px}
.tot.warn{background:var(--gold-bg);border-color:#e7d3a3}.tot.warn .v{color:var(--gold)}
.lsec{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink3);padding:14px 16px 4px;display:flex;justify-content:space-between}
.lsec a{color:var(--accent);text-transform:none;letter-spacing:0;font-size:12px;cursor:pointer}
.lrow{display:flex;align-items:center;gap:11px;background:var(--white);border:1px solid var(--line);border-radius:13px;padding:11px 13px;margin:6px 14px;cursor:pointer}.lrow:active{border-color:var(--line2)}
.lico{width:33px;height:33px;border-radius:9px;background:var(--green-bg);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:15px;flex-shrink:0}.lico.gold{background:var(--gold-bg);color:var(--gold)}
.lt{font-size:13px;font-weight:600;color:var(--ink)}.ls{font-size:11px;color:var(--ink3);margin-top:1px}
.lamt{margin-left:auto;text-align:right}.lamt .v{font-size:13px;font-weight:700;color:var(--ink)}
.lsearch{margin:12px 14px 2px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:11px 14px;display:flex;align-items:center;gap:9px;color:var(--ink3);font-size:14px}
.lsearch input{flex:1;border:none;outline:none;background:none;color:var(--ink);font:inherit;font-size:14px}
.crow{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.av{width:38px;height:38px;border-radius:50%;background:var(--green-bg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--green);flex-shrink:0}
.cn{font-size:14px;font-weight:600;color:var(--ink)}.cm{font-size:11.5px;color:var(--ink3);margin-top:1px}.cbal{margin-left:auto;text-align:right;font-size:12px}
.mcards{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px 6px}
.mcard{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:13px}.mcard .l{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink3)}.mcard .v{font-size:21px;font-weight:700;color:var(--ink);margin-top:3px}.mcard .d{font-size:11px;margin-top:3px;color:var(--green)}.mcard.warn .v{color:var(--gold)}
.chartcard{background:var(--white);border:1px solid var(--line);border-radius:16px;margin:6px 14px;padding:14px}.chartcard .ct{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:12px;display:flex;justify-content:space-between}.chartcard .ct span{color:var(--ink3);font-weight:400}
.bars{display:flex;align-items:flex-end;gap:8px;height:100px}.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}.bar .col{width:100%;background:var(--green-l);border-radius:5px 5px 0 0;min-height:3px}.bar .col.dim{background:var(--green-bg)}.bar .bl{font-size:9px;color:var(--ink3)}
.syncrow{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:13px;padding:12px 13px;margin:8px 14px}.syncrow .dot{width:9px;height:9px;border-radius:50%;background:var(--green-l)}.syncrow .st{font-size:13px;font-weight:600;color:var(--ink)}.syncrow .ss{font-size:11px;color:var(--ink3)}
.doc{background:var(--white);border:1px solid var(--line);border-radius:16px;margin:10px 14px;padding:16px}
.doc .dh{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.doc .num{font-size:19px;font-weight:700;color:var(--ink)}.doc .meta{font-size:11px;color:var(--ink3);margin-top:2px}
.doc .to{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--ink3)}.doc .ton{font-size:14px;font-weight:600;color:var(--ink);margin-top:2px}
.li{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px solid #efe7d4;color:var(--ink)}.li .q{color:var(--ink3);font-size:11px}
.pp{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);padding:4px 0}
.tt{display:flex;justify-content:space-between;font-size:15px;font-weight:700;padding-top:10px;color:var(--ink)}.tt .g{color:var(--gold)}
.btnrow{display:flex;gap:8px;padding:8px 14px}
.btn{flex:1;border:none;border-radius:12px;padding:12px;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.btn.pri{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 78%,#000));color:#fff}.btn.sec{background:var(--white);border:1px solid var(--line);color:var(--ink)}.btn.gold{background:linear-gradient(180deg,#e0b352,var(--gold));color:#3a2a06}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.55}
.note{padding:4px 18px 12px;font-size:11.5px;color:var(--ink3);line-height:1.5}
.cprofile{display:flex;align-items:center;gap:13px;padding:18px 16px 10px}
.cav{width:56px;height:56px;border-radius:50%;background:var(--green-bg);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:var(--green);flex-shrink:0}
.cprofile .nm{font-size:18px;font-weight:700;color:var(--ink)}.cprofile .sb{font-size:12px;color:var(--ink3);margin-top:2px}
.contacts{display:flex;gap:8px;padding:6px 14px}
.cc{flex:1;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--green);font-size:11px;cursor:pointer}.cc i{font-size:18px}.cc span{color:var(--ink2)}
.balcard{background:var(--gold-bg);border:1px solid #e7d3a3;border-radius:14px;margin:10px 14px 2px;padding:14px;display:flex;justify-content:space-between;align-items:center}
.balcard .l{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--gold)}.balcard .v{font-size:23px;font-weight:700;color:var(--gold)}.balcard .s2{font-size:11px;color:var(--ink3)}
.field{margin:8px 14px}.field label{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink3);display:block;margin-bottom:5px}
/* Inline error row for the counsel in-app forms (replaces window.prompt flows).
   Hidden until a validation/server rejection sets its text. */
.ferr{margin:2px 18px 6px;font-size:12.5px;color:var(--red);line-height:1.45;display:none}.ferr.show{display:block}
.fhint{margin:2px 18px 8px;font-size:11.5px;color:var(--ink3);line-height:1.45}
.field input,.field select,.field textarea{width:100%;background:var(--white);border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:14px;color:var(--ink);outline:none}
.inp{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:14px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.lineitem{display:flex;gap:8px;align-items:center;margin:6px 14px;position:relative}
/* v328 books usability: price-book autocomplete dropdown under a line item's
   description input. Spans the whole row so it never overflows at 375px. */
.pbdrop{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--white);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px -14px rgba(20,26,15,.35);
  z-index:40;max-height:224px;overflow-y:auto}
.pbopt{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 13px;font-size:13.5px;color:var(--ink);cursor:pointer}
.pbopt+.pbopt{border-top:1px solid var(--line)}
.pbopt:hover,.pbopt:active{background:var(--cream2)}
.pbopt .pbp{color:var(--ink3);white-space:nowrap;font-weight:600}
.li-d{flex:1;background:var(--white);border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:13px;color:var(--ink);outline:none}.li-n{width:62px;background:var(--white);border:1px solid var(--line);border-radius:11px;padding:11px 6px;font-size:13px;text-align:center;color:var(--ink2);outline:none}
.addline{margin:8px 14px;color:var(--green);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:600}
.totcard{background:var(--white);border:1px solid var(--line);border-radius:14px;margin:8px 14px;padding:14px}.totrow{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2);padding:3px 0}.totrow.big{font-size:16px;font-weight:700;color:var(--ink);border-top:1px solid var(--line);margin-top:6px;padding-top:10px}.totrow.big .g{color:var(--gold)}
.payhero{text-align:center;padding:20px 16px 6px}.payhero .l{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ink3)}.payhero .amt{font-size:38px;font-weight:800;color:var(--ink);letter-spacing:-1px;margin-top:4px}.payhero .who{font-size:13px;color:var(--ink2);margin-top:2px}
.method{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:13px;margin:7px 14px;cursor:pointer}.method.best{border:2px solid var(--green-l)}
.method .mi{width:38px;height:38px;border-radius:10px;background:var(--green-bg);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:19px}
.method .mt{font-size:14px;font-weight:700;color:var(--ink)}.method .ms{font-size:11.5px;color:var(--ink3);margin-top:1px}
.method .pick{margin-left:auto;font-size:11px;font-weight:700;color:var(--green);background:var(--green-bg);padding:3px 9px;border-radius:8px}.method .fee{margin-left:auto;font-size:12px;color:var(--ink3)}
.srow{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:13px;padding:13px;margin:7px 14px}
.srow .si{width:34px;height:34px;border-radius:9px;background:var(--green-bg);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:16px}
.srow .stt{font-size:13.5px;font-weight:600;color:var(--ink)}.srow .sss{font-size:11px;color:var(--ink3);margin-top:1px}
.srow .sv{margin-left:auto;font-size:12px;color:var(--ink3)}
.tog{margin-left:auto;width:42px;height:25px;border-radius:13px;background:var(--line2);position:relative;cursor:pointer;flex-shrink:0}
.tog.on{background:var(--green-l)}.tog::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.18s}.tog.on::after{left:20px}

.muted{color:var(--ink3);text-align:center;padding:24px;font-size:13px}.muted.d{color:var(--dim)}
/* App-shell (light-theme) versions of the form/button/card classes the Website
   Builder, Proposals and Draw screens use — previously defined ONLY inside
   .login, so those flagship AI screens rendered as unstyled browser defaults
   (2026-07-02 audit F4). Scoped under .body so the .login variants win there. */
.body .wrap{padding:14px 16px 24px;display:flex;flex-direction:column;gap:12px}
.body .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 4px 14px -8px rgba(43,39,80,.12)}
.body .card h3{margin:0 0 6px;font-size:15px}
.body .card .muted{text-align:left;padding:0}
.body .f{width:100%;background:var(--cream2,#faf7f2);border:1px solid var(--line);border-radius:11px;padding:12px 14px;font:inherit;font-size:14px;outline:none;box-sizing:border-box}
.body textarea.f{resize:vertical;min-height:64px}
.body .go,.gsheet .go{width:100%;background:linear-gradient(180deg,var(--green-l,#4a7a3a),var(--green,#2d5a1b));color:#fff;border:none;border-radius:11px;padding:12px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.body .go:disabled{opacity:.6}
.body .ghostbtn{background:none;border:1px solid var(--line);border-radius:9px;color:var(--ink2,#444);font:inherit;font-size:12.5px;padding:6px 12px;cursor:pointer}
.body .err{color:var(--red);font-size:12.5px;margin-top:8px;line-height:1.45;min-height:1em}
/* Offline truthfulness (audit F3): a persistent banner instead of fake $0 data. */
.offbar{display:none;position:fixed;top:0;left:0;right:0;z-index:99;background:#8a4b18;color:#fff;font-size:12.5px;text-align:center;padding:7px 12px;font-weight:600}
.offbar.on{display:block}
.center{flex:1;display:flex;align-items:center;justify-content:center}

.login{position:absolute;inset:0;z-index:20;background:radial-gradient(900px 600px at 50% 14%,#FFEFE2 0%,transparent 58%),radial-gradient(800px 520px at 50% 122%,#ECEDFF 0%,transparent 60%),var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 30px}
.login .wm{font-size:33px;font-weight:700;letter-spacing:-1.4px;margin-top:12px;color:var(--dtx)}
.login .tg{font-size:9px;font-weight:600;letter-spacing:2.8px;color:var(--dl);margin-top:4px;text-align:center;text-wrap:balance;padding:0 18px}
.login h2{font-size:17px;font-weight:600;margin-top:20px;color:var(--dtx);text-align:center}
.login p{font-size:13px;color:var(--dim);text-align:center;line-height:1.5;max-width:280px;margin-top:4px}
/* The auth/onboarding step container: center EVERYTHING (headings, fields,
   buttons, pills) as one column — fields keep their 320px cap and center. */
.login #lgStep{width:100%;display:flex;flex-direction:column;align-items:center}
.login .f{width:100%;max-width:320px;background:var(--dcard);border:1px solid var(--dline);border-radius:12px;padding:14px 16px;color:var(--dtx);font:inherit;font-size:15px;margin-top:14px;outline:none}
.login .f::placeholder{color:var(--faint)}
.login .f.code{text-align:center;letter-spacing:8px;font-size:20px}
.login .go{width:100%;max-width:320px;background:linear-gradient(180deg,var(--green-l),var(--green));color:#fff;border:none;border-radius:12px;padding:14px;font:inherit;font-weight:700;font-size:15px;margin-top:10px;cursor:pointer}
.login .go:disabled{opacity:.6}
.login .ghostbtn{background:none;border:none;color:var(--dl);font:inherit;font-size:13px;margin-top:14px;cursor:pointer}
.login .fine{font-size:11px;color:var(--faint);text-align:center;margin-top:14px;line-height:1.5;max-width:300px}
.login .err{color:var(--red);font-size:12.5px;margin-top:12px;text-align:center;max-width:300px;line-height:1.45}

/* ── Otto Draw fullscreen studio ─────────────────────────────────────────── */
.studio{position:absolute;inset:0;z-index:16;background:#f3efe4;display:flex;flex-direction:column}
.stbar{display:flex;align-items:center;gap:10px;padding:calc(9px + env(safe-area-inset-top)) 12px 9px;background:rgba(255,248,240,.96);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--dline);flex-shrink:0}
.stbar .sttitle{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--dtx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stbar .stgridlbl{font-size:11px;color:var(--dim);display:flex;align-items:center;gap:5px;flex-shrink:0}
.stbar select{background:var(--dcard);border:1px solid var(--dline);border-radius:8px;color:var(--dtx);font:inherit;font-size:12px;padding:6px 7px}
.stbtn{background:var(--dcard);border:1px solid var(--dline);border-radius:9px;color:var(--dtx);font:inherit;font-size:13px;font-weight:600;padding:7px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
.stbtn:active{transform:scale(.95)}
.stcanvas{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:flex-start;justify-content:center;padding:14px;position:relative}
.stcanvas svg{max-width:100%;height:auto;user-select:none}
.st-handle{cursor:pointer}
.sthint{position:absolute;left:12px;right:12px;bottom:8px;text-align:center;font-size:11px;color:var(--dim);background:rgba(255,248,240,.75);border-radius:10px;padding:5px;pointer-events:none;transition:opacity .3s}
.stfab{position:absolute;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:linear-gradient(180deg,var(--green-l),var(--green));box-shadow:0 14px 30px -10px rgba(43,39,80,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:26;touch-action:none}
.stfab:active{transform:scale(.93)}
.stfab.dragging{transition:none;cursor:grabbing;box-shadow:0 22px 44px -10px rgba(43,39,80,.72)}
.stfab.rec{animation:pulse 1.1s infinite;box-shadow:0 0 0 4px rgba(63,168,95,.28),0 14px 30px -10px rgba(43,39,80,.6)}
.stfab svg{width:44px;height:44px;pointer-events:none}
/* Otto voice bubble — floats above the dock, shows transcript + reply, auto-hides. */
.stbubble{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(150px + env(safe-area-inset-bottom));max-width:82%;background:var(--dcard);border:1px solid var(--dline);border-radius:16px;padding:10px 14px;font-size:13px;line-height:1.42;color:var(--dtx);box-shadow:0 18px 44px -16px rgba(43,39,80,.6);z-index:26;animation:svacIn .18s ease both}
.stbubble.otto{border-color:var(--accent)}
.stbubble.user{color:var(--dim);font-style:italic}
.stbubble.live{color:var(--dl);font-weight:600}
.stchat{position:absolute;left:10px;right:10px;bottom:calc(14px + env(safe-area-inset-bottom));max-height:66%;background:rgba(255,248,240,.98);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border:1px solid var(--dline);border-radius:20px;box-shadow:0 24px 60px -18px rgba(43,39,80,.6);z-index:27;display:flex;flex-direction:column;overflow:hidden}
.stchat .sthead{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--dline);color:var(--dtx);font-size:14px}
.stchat .sthead svg{width:26px;height:26px}
.stchat .stlog{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px;min-height:70px;scrollbar-width:none}
.stchat .stlog::-webkit-scrollbar{display:none}
.stchat .stbar2{display:flex;gap:8px;align-items:center;padding:10px 11px}
.stchat .stbar2 input{flex:1;background:var(--dcard);border:1px solid var(--dline);border-radius:18px;padding:10px 14px;color:var(--dtx);font:inherit;font-size:14px;outline:none}
.stchat .stbar2 input::placeholder{color:var(--faint)}
.stvoice{font-size:11.5px;color:var(--dl);text-align:center;padding:0 12px 11px}
.stvoice b{color:var(--green);cursor:pointer;text-decoration:underline;margin-left:4px}
/* self-serve: vertical picker cards + signup affordances (additive; only used when self_serve) */
.login .pcards{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin-top:16px}
.login .pcard{display:flex;align-items:center;gap:13px;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;font:inherit;width:100%;box-shadow:0 10px 24px -18px rgba(43,39,80,.5)}
.login .pcard:active{transform:scale(.99)}
.login .pcard .pdot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.login .pcard .plogo{flex-shrink:0;line-height:0}
.login .pcard .ptxt{flex:1;min-width:0;display:flex;flex-direction:column}
.login .pcard .pnm{display:block;font-size:15px;font-weight:700;color:var(--dtx)}
.login .pcard .paud{display:block;font-size:11px;font-weight:600;margin-top:2px;letter-spacing:.2px}
.login .pcard .ptg{display:block;font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.35}
.login .pcard .pchev{margin-left:auto;color:var(--faint);font-size:16px;flex-shrink:0}
/* P-UI(C) survey/first-run motion — smooth step transitions matching the marketing site. */
@keyframes svIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes ottoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sv-enter{animation:svIn .42s cubic-bezier(.22,.85,.3,1) both}
.sv-bob{animation:ottoBob 3.2s ease-in-out infinite}
.login .pcard{transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease}
.login .pcard:hover{transform:translateY(-1px);box-shadow:0 16px 30px -18px rgba(43,39,80,.55)}
/* Survey v2 — type-to-filter business picker (matches the marketing-site motion). */
.svac{position:relative;width:100%;max-width:320px;margin:14px auto 0;text-align:left}
.svac-in{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:14px;background:var(--white);color:var(--ink);font:inherit;font-size:15px;font-weight:500;outline:none;transition:border-color .18s ease,box-shadow .18s ease;box-shadow:0 10px 24px -18px rgba(43,39,80,.5)}
.svac-in::placeholder{color:var(--faint);font-weight:400}
.svac-in:focus{border-color:var(--accent);box-shadow:0 12px 28px -18px rgba(43,39,80,.55)}
/* min-height pins the layout: filtering 7 suggestions down to 1 must NOT
   re-center the column and slide the input the user is typing in (TEST-2 P1). */
.svac-list{margin-top:8px;display:flex;flex-direction:column;gap:6px;min-height:min(44vh,300px);max-height:44vh;overflow-y:auto;scrollbar-width:none}
.svac-list::-webkit-scrollbar{display:none}
.svac-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--dtx);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left;animation:svacIn .16s ease both}
.svac-item>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svac-item i{color:var(--faint);font-size:16px;flex:none}
.svac-item:active{transform:scale(.985)}
.svac-item:hover{border-color:var(--accent);color:var(--accent)}
.svac-item:hover i{color:var(--accent)}
.svac-free{background:var(--cream2);border-style:dashed;color:var(--ink2)}
@keyframes svacIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.login .svchip,.login .svopt{transition:transform .12s ease,background .18s ease,border-color .18s ease,color .18s ease}
.login .svchip:active,.login .svopt:active{transform:scale(.96)}
.svdots{display:flex;gap:6px;justify-content:center;margin:4px auto 24px}
.svdots i{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:background .25s,transform .25s}
.svdots i.on{background:var(--accent);transform:scale(1.18)}
@media (prefers-reduced-motion:reduce){.sv-enter,.sv-bob{animation:none}.login .pcard:hover{transform:none}}
/* "Here's your Otto" reveal: hide the shell's platform Otto mark so the top reads
   "Relax.Business" and only ONE Otto shows — the persona for the survey result. */
.login.lg-reveal>.lgmark{display:none}
/* Welcome screen (Chris 2026-07-02): the body has its OWN floating Otto, so hide
   the entire shell header (top otto + Relax.Business wordmark + "Meet Otto" line)
   — no repetition. Child selectors so the body's own .lgmark stays visible. */
.login.lg-solo>.lgmark,.login.lg-solo>.wm,.login.lg-solo>.tg{display:none}
.login .changev{background:none;border:none;color:var(--dl);font:inherit;font-size:12px;margin-top:14px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.login .backpick{display:inline-flex;align-items:center;gap:5px;background:var(--white);border:1px solid var(--line);color:var(--ink2);font:inherit;font-size:13px;font-weight:600;padding:8px 14px 8px 11px;border-radius:999px;cursor:pointer}
.login .backpick:active{transform:scale(.97)}
.login .backpick i{font-size:16px}
.login .picked{font-size:12px;color:var(--dim);margin-top:6px;display:inline-flex;align-items:center;gap:7px}
.login .picked .pdot{width:10px;height:10px;border-radius:50%;display:inline-block}
svg{display:block}
.toast{position:fixed;bottom:calc(78px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(20px);background:#2B2750;border:1px solid var(--accent);color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:99;max-width:90%;box-shadow:0 14px 34px -16px rgba(43,39,80,.6)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.toast.err{border-color:var(--red);background:#5A1E1A}.toast b{color:var(--accent)}

/* ── Otto nudge & feedback engine (HANDOFF §5B) — home-screen chrome only ── */
.ncard{position:relative;display:flex;gap:10px;align-items:flex-start;background:var(--dcard);border:1px solid var(--dline);border-radius:14px;padding:12px 32px 12px 12px;margin:8px 12px 0}
.ncard .nico{flex-shrink:0;line-height:0;margin-top:1px}
.ncard .nbody{flex:1;min-width:0}
.ncard .nline{font-size:13px;line-height:1.45;color:var(--dtx);font-weight:600}
.ncard .nact{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
/* v363: accent-derived like .ab.send — the brief's primary button showed
   Field-Service green inside the blue Multi-Business app (same defect class). */
.nbtn{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 78%,#000));border:none;color:#fff;font:inherit;font-size:12.5px;font-weight:700;padding:8px 13px;border-radius:999px;cursor:pointer}
.nbtn:active{transform:scale(.96)}.nbtn:disabled{opacity:.6}
.nghost{background:none;border:none;color:var(--dim);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:8px 6px}
.nx{position:absolute;top:5px;right:5px;width:26px;height:26px;border:none;background:none;color:var(--faint);font-size:16px;line-height:1;cursor:pointer;border-radius:8px}
.nx:active{background:var(--dcard2)}
.npulse{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12px;color:var(--dim);font-weight:600;flex-wrap:wrap}
.ncard .nline+.nact+.npulse{border-top:1px solid var(--dline);padding-top:9px}
.nface{background:var(--dcard2);border:1px solid var(--dline);border-radius:999px;width:34px;height:34px;font-size:16px;cursor:pointer;line-height:1}
.nface:active{transform:scale(.92)}
.nthanks{font-size:12.5px;color:var(--dim);font-weight:600}
@keyframes nudgeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.nudge-in{animation:nudgeIn .38s cubic-bezier(.22,.85,.3,1) both}
.nudge-out{transition:opacity .18s ease,transform .18s ease;opacity:0;transform:translateY(4px);pointer-events:none}
/* end-of-week survey overlay (bottom sheet on phones, centered card on wide) */
.svy{position:fixed;inset:0;z-index:60;background:rgba(43,39,80,.45);display:flex;align-items:flex-end;justify-content:center}
.svysheet{width:100%;max-width:440px;max-height:86vh;overflow-y:auto;background:var(--cream);border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));animation:nudgeIn .32s cubic-bezier(.22,.85,.3,1) both}
@media(min-width:600px){.svy{align-items:center}.svysheet{border-radius:22px;padding-bottom:18px}}
.svysheet h3{font-family:'Fredoka','Inter',sans-serif;font-size:18px;color:var(--ink);letter-spacing:-.3px}
.svysheet .sub{font-size:12.5px;color:var(--ink3);margin-top:3px}
.svysheet .lbl{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);margin-top:14px}
.svystars{display:flex;gap:6px;margin-top:8px}
.svystar{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--white);font-size:19px;color:var(--line2);cursor:pointer}
.svystar.on{color:#C99A2E;border-color:#e7d3a3;background:var(--gold-bg)}
.svyrow{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-top:7px}
.svyrow .fl{flex:1;font-size:13px;font-weight:600;color:var(--ink)}
.svyth{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--white);font-size:15px;cursor:pointer}
.svyth.on.up{background:var(--green-bg);border-color:var(--green-l)}
.svyth.on.dn{background:var(--red-bg);border-color:var(--red)}
.svysheet textarea{width:100%;min-height:74px;margin-top:12px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;font-size:13px;color:var(--ink);outline:none;resize:vertical}
@media (prefers-reduced-motion:reduce){.nudge-in,.svysheet{animation:none}.nudge-out{transition:none}}

/* ══════════════════════════════════════════════════════════════════════════
   Draw Studio v2 (Lane C, 2026-07-04) — ADDITIVE ONLY. Everything below is
   new studio-v2 chrome (dock, library sheet, context bar, mode bar, prompt
   sheet, queue badge, dimension pill) + edit-canvas layout overrides scoped
   to .st-editmode / .st-sheetview. Nothing above this line was touched.
   ══════════════════════════════════════════════════════════════════════════ */
.studio .stbar{flex-wrap:wrap}
/* Edit canvas fills the studio; camera lives on a root <g> transform. */
.stcanvas.st-editmode{padding:0;overflow:hidden;display:block}
.stcanvas.st-editmode>svg{display:block;width:100%;height:100%;max-width:none;user-select:none;-webkit-user-select:none;touch-action:none}
.st-selbox,.st-cal{pointer-events:none}
/* Existing chrome lifted above the new dock */
.studio .sthint{bottom:calc(78px + env(safe-area-inset-bottom))}
.studio .stfab{bottom:calc(148px + env(safe-area-inset-bottom));width:52px;height:52px}
.studio .stfab svg{width:38px;height:38px}
.studio .stchat{bottom:calc(78px + env(safe-area-inset-bottom))}
/* Bottom dock — 5 tools + undo/redo/fit, 48px thumb targets */
.stdock{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));display:flex;gap:2px;align-items:center;background:rgba(255,248,240,.97);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border:1px solid var(--dline);border-radius:18px;padding:5px;box-shadow:0 14px 34px -14px rgba(43,39,80,.5);z-index:24;max-width:calc(100% - 12px)}
.stdockbtn{min-width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;background:none;color:var(--dim);font:inherit;font-size:9px;font-weight:600;border-radius:13px;cursor:pointer;padding:0 4px}
.stdockbtn i{font-size:19px}
.stdockbtn.on{background:var(--dcard2);color:var(--dl)}
.stdockbtn.sm{min-width:38px}
.stdockbtn:disabled{opacity:.35}
.stdockbtn:active:not(:disabled){transform:scale(.93)}
.stdocksep{width:1px;height:30px;background:var(--dline);margin:0 2px;flex-shrink:0}
/* Library / takeoff bottom sheet (≤40% height, big tiles) */
.stlib{position:absolute;left:0;right:0;bottom:0;max-height:40%;background:rgba(255,248,240,.98);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-top:1px solid var(--dline);border-radius:20px 20px 0 0;box-shadow:0 -18px 44px -20px rgba(43,39,80,.55);z-index:25;display:flex;flex-direction:column;overflow:hidden}
.stlibhead{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--dline);color:var(--dtx);flex-shrink:0}
.stlibtabs{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none}
.stlibtabs::-webkit-scrollbar{display:none}
.st-cattab{flex-shrink:0;background:var(--dcard);border:1px solid var(--dline);border-radius:14px;color:var(--dim);font:inherit;font-size:11.5px;font-weight:600;padding:6px 11px;cursor:pointer}
.st-cattab.on{background:var(--dcard2);color:var(--dl);border-color:var(--dl)}
.stlibgrid{overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
.st-tile{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--dcard);border:1px solid var(--dline);border-radius:12px;padding:9px 6px;min-height:78px;cursor:pointer;font:inherit}
.st-tile:active{transform:scale(.96);border-color:var(--dl)}
.st-tile svg{width:44px;height:32px;display:block}
.st-tlbl{font-size:10.5px;font-weight:600;color:var(--dtx);text-align:center;line-height:1.2}
.st-tsub{font-size:9px;color:var(--faint)}
.st-tkbody{overflow-y:auto;padding:8px 14px}
.st-tkrow{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--dtx);padding:7px 0;border-bottom:1px solid var(--dline)}
/* Floating selection context bar (Duplicate · Label · Delete) */
.stctx{position:absolute;z-index:24;display:flex;gap:2px;background:#2B2750;border-radius:13px;padding:4px;box-shadow:0 14px 30px -12px rgba(43,39,80,.7)}
.stctx button{background:none;border:none;color:#fff;font:inherit;font-size:12px;font-weight:600;padding:9px 11px;border-radius:9px;display:flex;align-items:center;gap:5px;min-height:40px;cursor:pointer;white-space:nowrap}
.stctx button i{font-size:15px}
.stctx button:active{background:rgba(255,255,255,.14)}
/* Tool/stamp/calibration mode bar above the dock */
.stmode{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(70px + env(safe-area-inset-bottom));z-index:24;display:flex;gap:8px;align-items:center;background:rgba(255,248,240,.97);border:1px solid var(--dline);border-radius:12px;padding:6px 10px;font-size:12px;color:var(--dtx);max-width:calc(100% - 16px);box-shadow:0 10px 24px -14px rgba(43,39,80,.5)}
.stmode span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Live dimension pill (never under the finger) */
.stdim{position:absolute;z-index:26;background:#2B2750;color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:9px;pointer-events:none;white-space:nowrap;box-shadow:0 8px 20px -10px rgba(43,39,80,.6)}
/* Offline / saving queue badge */
.stqueue{position:absolute;top:calc(56px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:24;background:#8a4b18;color:#fff;font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:999px;box-shadow:0 8px 20px -10px rgba(43,39,80,.5);pointer-events:none;white-space:nowrap}
/* Post-delete action toast with Undo */
.sttoasta{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(122px + env(safe-area-inset-bottom));z-index:26;background:#2B2750;color:#fff;border-radius:12px;padding:10px 14px;display:flex;gap:14px;align-items:center;font-size:13px;box-shadow:0 14px 34px -16px rgba(43,39,80,.6);white-space:nowrap}
.sttoasta button{background:none;border:none;color:var(--accent);font:inherit;font-weight:700;font-size:13px;cursor:pointer;padding:2px 4px}
/* Inline prompt sheet (labels, note text, calibration distance) */
.stprompt{position:absolute;inset:0;z-index:30;background:rgba(43,39,80,.42);display:flex;align-items:flex-end;justify-content:center}
.stpromptcard{width:100%;max-width:440px;background:var(--cream);border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;color:var(--dtx)}
.stpromptcard input{width:100%;background:var(--white);border:1px solid var(--line);border-radius:11px;padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);outline:none}
.stbtn.st-pri{background:linear-gradient(180deg,var(--green-l),var(--green));color:#fff;border:none}
/* Sheet view keeps the classic scroll/fit behavior; hide edit chrome */
.studio.st-sheetview .stdock,.studio.st-sheetview .stmode,.studio.st-sheetview .stctx,.studio.st-sheetview .stdim{display:none!important}

/* ══════════════════════════════════════════════════════════════════════════
   MOTION-1 (2026-07-12) — house motion tokens, screen transitions, and the
   glide sheet (sheet.js). Tokens formalize the de-facto language already in
   this file (entry = decel ease-out + small rise; micro = 120-180ms).
   Rules: animate transform/opacity ONLY; every enter has a faster exit;
   everything dies under prefers-reduced-motion (block at the end).
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --mo-quick:150ms; --mo-standard:250ms; --mo-emphasis:340ms; --mo-exit:200ms;
  --ease-glide:cubic-bezier(.22,.85,.3,1);      /* the house decel */
  --ease-enter:cubic-bezier(.05,.7,.1,1);       /* things arriving  */
  --ease-exit:cubic-bezier(.3,0,.8,.15);        /* things leaving   */
  /* spring with ~2% overshoot-and-settle — the sheet's "glide" feel */
  --ease-spring:linear(0,.0069 2.2%,.0637 3.6%,.297 9.2%,.596 15.6%,.849 21.7%,
    .989 26.9%,1.046 31.2%,1.064 36%,1.03 47%,1.01 54.8%,1 62.5%,.9964 70%,1);
}
/* Screen entry — shell.js re-triggers .scr-in after each final body paint.
   .body is a plain flex child (never transform-centered), so translateY is
   safe here; .askfoot is sticky (works inside a transformed ancestor). */
@keyframes bodyIn{from{opacity:0;transform:translateY(8px)}}
.body.scr-in{animation:bodyIn 220ms var(--ease-enter) both}
/* Tactile press: :active snap stays instant; the RELEASE now relaxes over
   150ms instead of teleporting back. Only elements with :active transforms;
   .planCard/.login .pcard keep their own richer transitions. */
.dicon,.back,.tab,.ab,.btn,.nbtn,.nface,.qchip,.svac-item,.stbtn,.stdockbtn,.st-tile{
  transition:transform var(--mo-quick) var(--ease-glide)}

/* ── The glide sheet (sheet.js): drag-handle bottom sheet on phones,
      centered card ≥600px. z-index 60/61 = peer of .svy. ── */
.gscrim{position:fixed;inset:0;z-index:60;background:rgba(43,39,80,.45);
  opacity:0;pointer-events:none;transition:opacity var(--mo-standard) ease}
.gscrim.on{opacity:1;pointer-events:auto}
.gsheet{position:fixed;left:50%;bottom:0;z-index:61;width:100%;max-width:440px;
  max-height:86dvh;display:flex;flex-direction:column;background:var(--cream);
  border-radius:22px 22px 0 0;box-shadow:0 -12px 40px -18px rgba(43,39,80,.5);
  transform:translate(-50%,105%);will-change:transform}
.gsheet.settle{transition:transform var(--gs-ms,340ms) var(--ease-spring)}
.gsheet.open{transform:translate(-50%,0)}
.gsheet .gs-grab{flex-shrink:0;padding:12px 0 8px;display:flex;justify-content:center;
  cursor:grab;touch-action:none}                /* full-width ≥44px drag strip */
.gsheet .gs-pill{width:36px;height:4px;border-radius:2px;background:var(--line2)}
.gsheet .gs-hd{display:flex;align-items:center;gap:8px;padding:0 16px 10px;touch-action:none}
.gsheet .gs-ttl{flex:1;font-family:'Fredoka','Inter',sans-serif;font-size:17px;
  color:var(--ink);letter-spacing:-.3px}
.gsheet .gs-x{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:var(--white);color:var(--ink2);font-size:15px;cursor:pointer;flex-shrink:0}
.gsheet .gs-x:active{transform:scale(.93)}
.gsheet .gs-body{overflow-y:auto;padding:0 12px calc(16px + env(safe-area-inset-bottom));
  overscroll-behavior:contain}
@media(min-width:600px){
  .gsheet{bottom:auto;top:50%;border-radius:22px;opacity:0;
    transform:translate(-50%,-46%) scale(.97);
    transition:opacity var(--mo-standard) ease,transform var(--mo-standard) var(--ease-enter)}
  .gsheet.open{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .gsheet.closing{opacity:0;transform:translate(-50%,-46%) scale(.97);
    transition-duration:var(--mo-exit)}
}
@media (prefers-reduced-motion:reduce){
  .body.scr-in{animation:none}
  .gsheet,.gsheet.settle,.gscrim{transition:none}
  .dicon,.back,.tab,.ab,.btn,.nbtn,.nface,.qchip,.svac-item,.stbtn,.stdockbtn,.st-tile{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP-1 shell (2026-07-12) — at >=1024px the phone-in-a-frame becomes a
   real desktop app: the bottom tab bar turns into a LEFT RAIL and the frame
   widens. Scoped entirely to this media block — every width below 1024px is
   byte-for-byte untouched (the 900px card block above still governs 900-1023).
   Mechanics: shell.js sets tabsEl inline display:grid, so the rail keeps
   display:grid and just re-templates to a single column (no JS change).
   #login/#studio are absolute inset:0 inside .app and overlay rail + content
   exactly as they overlaid the phone card. Per-screen two-column layouts are
   the NEXT wave (see docs/superpowers/specs/2026-07-12-platform-kernels.md §5).
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  .app{
    width:min(1280px,96vw);height:min(900px,94vh);
    display:grid;
    grid-template-columns:216px 1fr;
    grid-template-rows:auto 1fr;
    grid-template-areas:"rail hdr" "rail body";
  }
  .hdr{grid-area:hdr;padding-left:28px;padding-right:28px}
  .body{grid-area:body;padding-inline:max(28px,calc((100% - 820px)/2))}
  /* The rail (was the bottom tab bar). Inline display:grid survives — only
     the template changes. !important: renderTabs() (law / multi_business)
     writes an INLINE grid-template-columns:repeat(n,1fr) for the phone bar,
     which would otherwise beat this rule and lay the rail out as a clipped
     4-across row (only Home+Board visible at 1280 — v359 fix). */
  .tabs{
    grid-area:rail;
    grid-template-columns:1fr !important;grid-auto-rows:min-content;align-content:start;
    gap:4px;padding:16px 12px;
    border-top:none;border-right:1px solid var(--dline);
  }
  .tab{
    flex-direction:row;justify-content:flex-start;gap:12px;
    padding:11px 13px;border-radius:12px;font-size:13.5px;font-weight:600;
    width:100%;text-align:left;
  }
  .tab i{font-size:19px}
  .tab:hover{background:var(--dcard);color:var(--dtx)}
  .tab.on{background:var(--dcard);color:var(--dl);box-shadow:inset 3px 0 0 var(--dl)}
  .tab:active{transform:none}
  /* Wider content measure: KPI grids and chat keep readable bounds. */
  .chat .msg,.chat .planCard{max-width:640px}
}

/* ── EXT-E: home two-column + form save-attach + knowledge grid (>=1024) ──
   .hgrid is display:contents below 1024 — mobile/tablet render EXACTLY as
   before (children participate in the flex column as if unwrapped). */
.hgrid{display:contents}
@media (min-width:1024px){
  .hgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-items:start}
  .hgrid .hcol{min-width:0}
  /* Forms: the flex spacer used to pin Save to the far bottom of a tall
     desktop column, detaching it from the Total it commits. Attach instead. */
  .formgap{display:none}
  /* Knowledge guides: two-up cards instead of a lonely single column. */
  .kbgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
  .kbgrid .lrow{margin-inline:0}
}

/* ── Marsh full-design idiom (v360 FULLDESIGN) — additive, used by the
   Multi-Business tool screens; classes mirror the 2026-07-22 prototype. ── */
.wasnow{display:flex;align-items:center;gap:8px;font-size:11.5px;line-height:1.35;padding:8px 12px;border-radius:11px;background:var(--cream2);border:1px solid var(--line);margin:6px 16px 0}
.wasnow .was{color:var(--ink3);text-decoration:line-through;text-decoration-color:rgba(192,57,43,.55)}
.wasnow .arr{color:var(--accent);font-weight:800;flex:none}
.wasnow .now{color:var(--ink);font-weight:700}
.kwrap{display:flex;flex-direction:column;gap:10px;padding:10px 16px 16px}
.kcol{background:var(--cream2);border:1px solid var(--line);border-radius:14px;padding:9px}
.kcol .kh{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);padding:2px 4px 8px;display:flex;justify-content:space-between}
.kcard{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:10px 11px;margin-bottom:8px;cursor:pointer;box-shadow:0 4px 14px -8px rgba(43,39,80,.12)}
.kcard:active{transform:scale(.97)}
.kcard .kt{font-size:13px;font-weight:700;color:var(--ink)}
.kcard .ks{font-size:11px;color:var(--ink3);margin-top:3px;line-height:1.35}
@media(min-width:760px){.kwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}}
.cap-transcript{margin:10px 16px 0;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:13px 14px;font-size:13.5px;line-height:1.55;color:var(--ink);min-height:88px;width:auto;resize:vertical;font-family:inherit}
.cap-transcript:focus{outline:2px solid var(--accent)}
.capbtns{display:flex;gap:8px;padding:10px 16px 0}
.capbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--white);border:1px solid var(--line);border-radius:13px;padding:12px 6px;font:inherit;font-size:11px;font-weight:700;color:var(--ink);cursor:pointer}
.capbtn i{font-size:19px;color:var(--accent)}
.capbtn:active{transform:scale(.95)}
.capbtn.rec{background:var(--red);border-color:var(--red);color:#fff;animation:dlpulse 1.4s infinite}
.capbtn.rec i{color:#fff}
.shotrow{display:flex;gap:8px;overflow-x:auto;padding:10px 16px 0;scrollbar-width:none}
.shotrow::-webkit-scrollbar{display:none}
.shot{flex:none;width:104px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--white)}
.shot .img{height:66px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;background:linear-gradient(140deg,#8B86A8,#5B567E)}
.shot .cap{font-size:9.5px;line-height:1.3;color:var(--ink2);padding:6px 7px}
.shot .cap b{display:block;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.mapcard{margin:10px 16px 0;border-radius:16px;border:1px solid var(--line);overflow:hidden;position:relative;height:190px;background:linear-gradient(160deg,#EFEAE0,#E4E9E2 55%,#DFE4EF)}
.mapcard .rd{position:absolute;background:rgba(43,39,80,.10)}
.mappin{position:absolute;width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #fff;box-shadow:0 3px 8px rgba(43,39,80,.3);cursor:pointer}
.mappin i{transform:rotate(45deg);color:#fff;font-size:11px;display:block;margin:2px 0 0 3px}
.maplegend{display:flex;flex-wrap:wrap;gap:10px;padding:9px 18px 0;font-size:10.5px;color:var(--ink3)}
.maplegend span{display:flex;align-items:center;gap:5px}
.maplegend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.ba{margin:10px 16px 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr}
.ba>div{height:120px;display:flex;align-items:flex-end;padding:8px;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.frow{display:flex;align-items:center;gap:11px;margin:6px 16px 0;background:var(--white);border:1px solid var(--line);border-radius:13px;padding:11px 13px}
.frow .fl{width:64px;font-size:12.5px;font-weight:700;color:var(--ink)}
.frow .bar{flex:1;height:8px;border-radius:99px;background:var(--cream2);overflow:hidden}
.frow .bar i{display:block;height:100%;border-radius:99px}
.frow .fv{width:34px;text-align:right;font-size:13px;font-weight:800;font-family:'Fredoka','Inter',sans-serif;color:var(--ink)}
.hoff{margin:12px 16px 0;border:1.5px dashed color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 6%,var(--white));border-radius:14px;padding:11px 13px}
.hoff .ht{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.hoff .hs{font-size:12px;color:var(--ink2);margin-top:3px;line-height:1.4}
.hoff .hrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.hoff .hbtn{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font:inherit;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:5px}
.hoff .hbtn i{color:var(--accent);font-size:14px}
.hoff .hbtn:active{transform:scale(.95)}
.tbtn{background:var(--cream2);border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:10px 16px;cursor:pointer}
.tbtn:active{transform:scale(.97)}