/* /connect demo stage: tokens. Base = public/sign/demo/tokens.css (itself public/products/index.html :root, verbatim)
   + the Connect product accent, the demo business's sun accent, and the website / browser / widget geometry.
   Colour roles: navy = ground + ink, orange = Book-a-demo + focus + "waiting", green = YDO Connect,
   sun = Sunshine Gardening Co (the fictional business), never confused with Connect's green.
   THIS FILE IS THE ONLY PLACE A RAW HEX MAY STAND (fixtures' tenant brand and team.css's third-party skins excepted). */
:root{
  /* products tokens, verbatim */
  --navy:#0B1D3A; --navy-2:#132B4F; --navy-line:#26364E; --navy-ctl:#5A6B85; --navy-meta:#8A97AB; --navy-body:#B9C2D0;
  --orange:#FF7A1A; --orange-hover:#E56800; --orange-ink:#B4510A; --orange-soft:#FFB37A; --orange-tint:#FFF1E5; --orange-tint-line:#FFD3AB;
  --teal:#14B8A6; --teal-ink:#0E7568; --teal-bright:#2DD4BF; --teal-tint:#F0FBF9; --teal-tint-line:#99E0D6; --teal-ink-hover:#0B5F55;
  --ok:#157A4B; --ok-tint:#E6F4EC; --ok-line:#BBE7C9; --error:#DC2626;
  --recall:#8A6410; --recall-tint:#FEF6E7; --recall-line:#F5DFAE;
  --ground:#FAFAFB; --ground-2:#F3F5F8; --surface:#fff; --surface-2:#F6F8FA;
  --line:#E5E8EE; --line-2:#F1F3F5; --ctl-line:#7B8BA1; --track:#E9EDF2; --mute:#CBD5E1;
  --body:#3D4C63; --meta:#566274;   /* demo: products has #64748B (4.36:1 on the app canvas); #566274 = 5.66:1 there, 6.19:1 on white */
  --r-pill:99px; --r-widget:22px; --r-chassis:16px; --r-card:14px; --r-small:10px; --r-control:8px; --r-nested:6px; --r-bar:4px;
  --sh-raised:0 1px 2px rgba(11,29,58,.04),0 8px 24px rgba(11,29,58,.06);
  --sh-float:0 12px 32px rgba(11,29,58,.16);
  --sh-lift-dark:0 24px 56px rgba(0,0,0,.45);

  /* YDO Connect: the product accent (Concept 15 — Connect owns green, as Sign owns teal).
     White text is NEVER set on --connect: navy on green, or green-ink on white. */
  --connect:#22C55E; --connect-ink:#157A4B; --connect-ink-hover:#0F5F3A; --connect-bright:#4ADE80;
  --connect-tint:#EAF8EF; --connect-tint-line:#BBE7C9;

  /* Sunshine Gardening Co — the fictional business's own brand (the Sign demo's tenant navy + a sun accent) */
  --tenant:var(--navy); --tenant-2:var(--navy-2);
  --sun:#F5B400; --sun-ink:#7A5A00; --sun-tint:#FFF6DB; --sun-tint-line:#F5DE9A;

  /* the product's own standardised colours (public/widget.js + the widget templates), so the demo draws them as the product does */
  --std-pill:#2563EB;        /* every question pill: blue border + text on white, inverting on hover (standardised 2026-08-29) */
  --std-pill-ink:#fff;
  --std-badge:#EF4444;       /* the unread "1" on the bubble */

  /* stage */
  --stage:var(--navy);                 /* the one ground; never changes between scenes */
  --nav-h:56px; --band-h:72px;         /* 1440: nav + headline band = 128px, constant in every scene */
  --stage-gutter:max(32px, calc((100vw - 1280px)/2));
  --chassis-max-w:1280px;
  --stage-max-w:1680px;                /* the bar, band, stage and footer share one width: the stage fills a large window (owner, 2026-10-01: "cant this be bigger") */
  --chassis-h:calc(100svh - var(--nav-h) - var(--band-h) - 24px);   /* 748 at 900 tall; floor 560 */
  --chassis-edge:0 0 0 1px rgba(255,255,255,.10);                    /* hairline on navy */
  --sh-chassis:var(--chassis-edge), 0 24px 56px rgba(0,0,0,.35);
  --paper-edge:0 0 0 1px var(--line), 0 1px 2px rgba(11,29,58,.06);

  /* product-inside canvases (the product's own grounds, recoloured) */
  --app-canvas:var(--ground-2);        /* portal (the record) canvas */
  --app-line:var(--line);
  --app-ph:var(--meta);                /* placeholder text */
  --sign-canvas:#EEF1F5;               /* Sign's signing page ground (kept: "Next: the contract, signed") */
  --mail-canvas:#F3F4F6;               /* email shell ground */

  /* Sign tokens kept verbatim (status chips, editor, signing overlays) so a shared surface never meets an undefined var */
  --st-sent-fg:var(--navy);      --st-sent-bg:#EEF1F6;       --st-sent-dot:var(--navy);
  --st-viewed-fg:var(--teal-ink);--st-viewed-bg:var(--teal-tint); --st-viewed-dot:var(--teal-bright);
  --st-part-fg:var(--orange-ink);--st-part-bg:var(--orange-tint); --st-part-dot:var(--orange);
  --st-signed-fg:var(--teal-ink);--st-signed-bg:var(--teal-tint); --st-signed-dot:var(--teal);
  --st-declined-fg:#B91C1C;      --st-declined-bg:#FEF2F2;    --st-declined-dot:var(--error);
  --st-voided-fg:var(--meta);    --st-voided-bg:var(--line-2); --st-voided-dot:var(--mute);
  --pin-fill:rgba(20,184,166,.10); --pin-edge:var(--teal-ink); --pin-label:var(--teal-ink);
  --signer-1:var(--navy); --signer-2:var(--orange-ink); --signer-3:#BE3455; --signer-4:#475569;
  --sel-ring:var(--orange);
  --guide:var(--error);
  --sig-overlay:var(--navy); --sig-ink:var(--navy); --sig-miss:var(--error);
  --site-canvas:#fff;                  /* the business's website page */
  --site-band:var(--sun-tint);         /* the website's hero band: light, so the tenant-navy launcher and widget are the darkest objects in the browser (c2-02) */
  --site-foot:var(--surface-2);        /* the website's footer ground: light, navy ink (c1-07) */
  --site-foot-line:var(--line);
  --site-head-h:65px;                  /* the website's own header (64 + its hairline): the open widget's top never crosses it (c2-09) */

  /* the browser chassis around the business's website (the Website pane): the tab strip, then the toolbar */
  --browser-tabs-h:34px;               /* traffic lights + the two tabs (the page; the portal's Dashboard from the record) */
  --browser-bar-h:38px;                /* back / forward / reload glyphs + the address field */
  --browser-r:var(--r-chassis);
  --browser-bar-bg:var(--surface-2);
  --browser-url-h:28px;
  --browser-dot:10px;

  /* the widget, at the product's own desktop geometry (public/widget.js DESKTOP_CONTAINER_CSS + widget-desktop.html) */
  --widget-w:420px;                    /* branding.widget_width default */
  --widget-max-h:700px;                /* branding.widget_height default */
  /* spec §9: anchored above the bubble inside the viewport, its top never over the site's header (c2-09), unless the
     window is so short that would leave less than 440px of widget (c2r2-02: a 380px floor left a 246px log at 1440x900):
     then it climbs over the header and covers it, its top 8px under the address bar (the clamp() is 0 below 439px of
     header-clear widget and swamps the term above it), so its edge never slices through the site's nav labels
     (finisher, seen at 1440x900 and in the share image). 1673 and 1920 are unchanged (the header-clear term wins). */
  --widget-h:min(var(--widget-max-h), max(calc(100% - 106px - var(--site-head-h) - 8px), calc(100% - 114px - clamp(0px, (100% - 106px - var(--site-head-h) - 8px - 439px) * 1000, 4000px))));
  --widget-r:25px;                     /* .chat-container / the iframe border-radius */
  --widget-right:20px;                 /* container right:20px */
  --widget-bottom:90px;                /* container bottom:90px = bubble 60 + gap 10 + offset 20 */
  --widget-head-min-h:100px;           /* .chat-header min-height */
  --widget-pad:25px;                   /* .chat-messages padding / .chat-header side padding */
  --widget-avatar:50px;                /* .message-avatar */
  --widget-bubble-r:20px;              /* .message-content radius */
  --widget-fs:14px;                    /* .message-content font-size (line-height 1.6) */
  --widget-shadow:0 15px 40px rgba(0,0,0,0.12);
  --widget-travel:12px;                /* open / close travel (opacity + 12px, 200ms) */

  /* the launcher: bubble, tooltip pill, notification card, unread badge (public/widget.js) */
  --bubble:60px;                       /* #chatbot-toggle-btn 60 x 60 */
  --bubble-right:20px;                 /* #chatbot-widget-wrapper right:20px */
  --bubble-bottom:20px;                /* #chatbot-widget-wrapper bottom:20px */
  /* the bubble's own right inset, where the embed's centred wrapper puts it while the pill shows: the wrapper's 20 + half of
     what the widest pill ("Welcome back!", 121 wide) overhangs the 60px bubble, rounded up; the open widget stands flush on it */
  --bubble-inset:calc(var(--bubble-right) + 30px);
  /* the site's scrollbar (the page's head script sets the platform's width before the first paint; 0 where scrollbars
     overlay): the launcher and the widget stand that much further in, as a fixed embed stands clear of a page's */
  --dc-sb:0px;
  --bubble-icon:28px;
  --tip-r:20px; --tip-fs:14px; --tip-gap:10px;   /* the "Need Support?" pill: radius 20, 14px 600, 10px above the bubble */
  --card-w:300px; --card-r:14px; --card-gap:12px; /* the notification card: 300 wide, radius 14, 12px above */
  --badge:18px;                        /* the unread "1": min-width + height 18, radius 9 */

  /* type */
  --ff:'Lato',sans-serif;
  --fs-display:36px; --lh-display:1.12; --ls-display:-0.024em;   /* headline band, 1440 */
  --fs-rail:13px; --fs-ui:14px; --fs-ui-s:12.5px; --fs-cap:11.5px;

  /* motion */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-std:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-hover:150ms;      /* colour/border only */
  --t-state:140ms;      /* a button filling, a chip changing */
  --t-fade:160ms;       /* panel opacity */
  --t-enter:200ms;      /* row rise 8px */
  --t-spring:220ms;     /* send arrow scale .4 -> 1 */
  --t-draw:240ms;       /* rail indicator */
  --t-scene-out:200ms;  /* opacity only */
  --t-scene-in:360ms;   /* opacity + 24px travel */
  --t-object:480ms;     /* a shared object crossing between scenes */
  --t-count:780ms;      /* number count-up, 70ms stagger */
  --t-type:32ms;        /* per character; +140ms after , . ; (Sign's token, verbatim — the JS typing runs F.T.typeChar) */
  --t-caret:1060ms; --t-think:1400ms;
  --t-widget:200ms;     /* the widget opening / closing */
  --t-notif:280ms;      /* a notification sliding onto the lock screen */
}
@media (max-width:700px){
  :root{ --nav-h:52px; --band-h:auto; --fs-display:26px; --lh-display:1.15; --stage-gutter:16px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-delay:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* type: self-hosted from /fonts/ (SIL Open Font License 1.1, licence files beside them). Lato is the UI. */
@font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/lato-400.woff2) format('woff2'); }
@font-face { font-family:'Lato'; font-style:italic; font-weight:400; font-display:swap; src:url(/fonts/lato-400-italic.woff2) format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/lato-700.woff2) format('woff2'); }
@font-face { font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap; src:url(/fonts/lato-900.woff2) format('woff2'); }

/* base */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--stage); color:#fff; font-family:var(--ff); font-size:var(--fs-ui); line-height:1.45; -webkit-font-smoothing:antialiased; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
/* on the light product surfaces the ring is the orange INK (5.09:1 on white, 4.66:1 on the canvas) */
#dc-web :focus-visible, #dc-record :focus-visible, .dc-phone-screen :focus-visible, #dc-phone :focus-visible, #pageBook :focus-visible { outline-color:var(--orange-ink); }
.dc-sr{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.dc-num{ font-variant-numeric:tabular-nums; }

/* shared motion classes (YD.motion.rise / YD.motion.spring in core.js): opacity + transform only */
.dc-rise{ opacity:0; transform:translateY(8px); transition:opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); }
.dc-rise.dc-in{ opacity:1; transform:none; }
.dc-spring{ animation:dc-spring var(--t-spring) var(--ease-spring) both; }
@keyframes dc-spring{ from{ transform:scale(.4); } to{ transform:scale(1); } }