/* cybee v3 · css/product-surfaces.css (Task 19, spec 8.2). The product surfaces: the menu bar card on frost, the chat card on paper and the
   levels plate. Linked only on pages whose body carries data-cy-surface (tools/build_site.py BLOCK_CSS; the landing: tools/assemble.py).
   The 24 tokens below are copied from DS 5.4 (ds-pack/tokens.css), not added to the vendored ds/tokens/, which stay byte identical.
   One change from the DS: --radius-control-compact is 10px, not 8px (owner decision K19; radii allowed: 0 6 10 14 22 999).
   Weights 400 and 500 only. The surface rules themselves arrive with Tasks 20 and 21. The chat card rules (.cc-*, Task 30) moved here from components.css on
   19 Oct 2026 (Task 35) so the landing, which does not load components.css, draws the same card in the hero and in s3. */
:root {
  --menubar-card-width: 340px;
  --menubar-card-inset: 14px;
  --first-run-width: 640px;
  --first-run-height: 548px;
  --chat-card-max-width: 720px;
  --chat-card-padding: 16px;
  --control-compact-height: 30px;
  --cell-mark: 6px;
  --cell-seal: 13px;
  --font-host-system: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius-control-compact: 10px;
}
:root, :root[data-appearance="light"] {
  --signal-press: #1F49AD;
  --s-card-host: #FFFFFF;
  --s-raised-host: #F5F5F7;
  --s-inset-host: #EDEDF0;
  --s-line-host: rgba(0,0,0,.08);
  --s-line-2-host: rgba(0,0,0,.14);
  --s-fill-box: rgba(0,0,0,.04);
  --s-fill-control: rgba(0,0,0,.06);
  --s-fill-control-strong: rgba(0,0,0,.09);
  --s-meter-track: rgba(0,0,0,.075);
  --s-meter-fill: rgba(0,0,0,.34);
  --s-cell-done: #A8A8AB;
  --s-focus-halo: 0 0 0 3px rgba(39,87,201,.25);
}
:root[data-appearance="dark"], :root[data-theme="dark"]:not([data-appearance="light"]) {
  --signal-press: #1F49AD;
  --s-card-host: #1F1F22;
  --s-raised-host: rgba(255,255,255,.04);
  --s-inset-host: rgba(255,255,255,.07);
  --s-line-host: rgba(255,255,255,.10);
  --s-line-2-host: rgba(255,255,255,.16);
  --s-fill-box: rgba(255,255,255,.04);
  --s-fill-control: rgba(255,255,255,.06);
  --s-fill-control-strong: rgba(255,255,255,.10);
  --s-meter-track: rgba(255,255,255,.075);
  --s-meter-fill: rgba(255,255,255,.34);
  --s-focus-halo: 0 0 0 3px rgba(133,167,255,.35);
}

/* ---- the menu bar card (Task 20, spec 4.1 and 4.2; pages/_includes/menubar-card.html) ------------------------------------------
   The real capture (340 pt, 2x) on a frost stage under a menu bar strip that holds only the Cybee icon. One state shows: the one
   data-state names. A switcher (data-cy-switch, the home s5) swaps data-state through js/product-surfaces.js; without JavaScript the
   buttons stay hidden and the state the page was built with shows. Phones (599px and less): full bleed, 16px gutter, no strip; the
   card is never narrower than 289px. 600 to 899px: centred in the one column stage. */
.cy-stage{margin:0;display:grid;gap:12px;min-width:0}
.cy-stage__screen{position:relative;overflow:hidden;border-radius:14px;background:#EBEBEE;box-shadow:inset 0 0 0 1px var(--s-line-host)}
.cy-stage__bar{display:flex;justify-content:flex-end;align-items:center;height:28px;padding:0 14px;background:rgba(255,255,255,.72);
  box-shadow:inset 0 -1px 0 var(--s-line-host)}
.cy-stage__glyph{position:relative;display:grid;place-items:center;width:30px;height:22px;border-radius:6px;background:rgba(0,0,0,.09)}
.cy-stage__glyph .cybee-emblem{--cy-emblem-height:13px;--wordmark:#151515}
.cy-stage__badge{position:absolute;top:2px;right:3px;width:7px;height:7px;border-radius:999px;background:transparent}
.cy-stage[data-state="needs"] .cy-stage__badge{background:#FF6B2B;box-shadow:0 0 0 1.5px #EBEBEE}
.cy-stage__card{display:grid;justify-items:end;padding:10px 40px 32px 24px}
.cy-stage__card picture{display:block;width:340px;max-width:100%}
.cy-stage__card img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 12px 32px rgba(0,0,0,.12)}
.cy-stage__cap{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font-size:15px;line-height:1.5;color:var(--s-ink-2)}
.cy-stage__label{color:var(--s-ink-3)}
.cy-stage[data-state="protected"] [data-for]:not([data-for="protected"]),
.cy-stage[data-state="scanning"] [data-for]:not([data-for="scanning"]),
.cy-stage[data-state="needs"] [data-for]:not([data-for="needs"]),
.cy-stage[data-state="offline"] [data-for]:not([data-for="offline"]){display:none}
[data-cy-switch] [hidden]{display:none}
/* the switcher (Task 20 review I5): every state sits in one grid cell, the inactive ones hidden with visibility, so the stage keeps the
   tallest state's height and the buttons never move. [data-for][data-for] lifts these rules over the display:none ones above. */
[data-cy-switch] .cy-stage__card{grid-template-areas:"c";align-items:start}
[data-cy-switch] .cy-stage__card>picture{grid-area:c}
[data-cy-switch] .cy-stage__cap{display:grid;grid-template-areas:"t" "l"}
[data-cy-switch] .cy-stage__cap>[data-for]{grid-area:t}
[data-cy-switch] .cy-stage__cap>.cy-stage__label{grid-area:l}
[data-cy-switch] .cy-stage[data-state] [data-for][data-for]{display:block;visibility:hidden}
[data-cy-switch] .cy-stage[data-state="protected"] [data-for="protected"][data-for],
[data-cy-switch] .cy-stage[data-state="scanning"] [data-for="scanning"][data-for],
[data-cy-switch] .cy-stage[data-state="needs"] [data-for="needs"][data-for],
[data-cy-switch] .cy-stage[data-state="offline"] [data-for="offline"][data-for]{visibility:visible}
@media (max-width:899px){.cy-stage__card{justify-items:center;padding:24px 24px 32px}}
@media (max-width:599px){
  .cy-stage__screen{margin-inline:calc(50% - 50vw);border-radius:0;box-shadow:none}
  .cy-stage__bar{display:none}
  .cy-stage__card{padding:24px 16px}
  .cy-stage__card picture{width:min(340px,100%);min-width:289px}
}

/* the state buttons of the switcher (Task 22: moved from sections/s5-mac.css so /product/menu-bar uses the same ones as the home) */
.cy-mb__states{display:grid;gap:10px}
.cy-mb__states-l{font-family:var(--font-mono);font-size:12px;font-weight:500;line-height:1.4;color:var(--s-ink-3)}
.cy-mb__list{display:flex;flex-wrap:wrap;gap:8px}
.cy-mb__state{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:6px;background:transparent;box-shadow:inset 0 0 0 1px var(--pg-rule);
  font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1;color:var(--s-ink-2);white-space:nowrap;cursor:pointer;
  transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.cy-mb__state .cy-hex,.cy-mb__state .cy-sq{--hex-w:12px;width:12px}
.cy-mb__state .cy-sq{height:10px;width:10px}
.cy-mb__state[aria-pressed="true"]{background:var(--s-raised);color:var(--s-ink);box-shadow:inset 0 0 0 1px var(--s-ink)}
.cy-mb__state:focus-visible{outline:3px solid #2757C9;outline-offset:2px}
@media (any-hover:hover){.cy-mb__state[aria-pressed="false"]:hover{color:var(--s-ink);box-shadow:inset 0 0 0 1px var(--s-ink-3)}}
.cy-mb__state--static{cursor:default;box-shadow:none;padding:0 6px;color:var(--s-ink-3)}
.cy-mb__scan{--hex-w:12px;display:inline-block;width:12px;aspect-ratio:1/.866;background:var(--s-ink-3);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,12.4% 50%,31.2% 87.6%,68.8% 87.6%,87.6% 50%,68.8% 12.4%,31.2% 12.4%,12.4% 50%,0 50%)}

/* ---- the first run window (Task 25, spec 4.1 and 4.2; pages/_includes/firstrun-window.html) ---------------------------------------
   The real capture (640 or 720 wide, at most --first-run-width by --first-run-height) on the same frost stage, under a title bar with
   the three dots and no desktop. Never upscaled. A phone cannot hold 85 percent of a 640 window, so below 600px the window takes the
   column (full bleed stage, 16px gutter) and the page's own sentence beside it says what the window says. */
.cy-stage--firstrun .cy-stage__card{justify-items:center;padding:32px 24px}
.cy-frwin{width:min(var(--first-run-width),100%);max-width:100%;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 12px 32px rgba(0,0,0,.12)}
.cy-stage--firstrun .cy-frwin picture{display:block;width:100%;min-width:0}
.cy-stage--firstrun .cy-frwin img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none}
.cy-frwin__bar{display:flex;align-items:center;gap:6px;height:24px;margin:0;padding:0 12px;background:#FBFBFC;border-bottom:1px solid #EEF0F3}
.cy-frwin__bar i{display:block;width:8px;height:8px;border-radius:999px;background:#DBDEE4}
@media (max-width:599px){.cy-stage--firstrun .cy-stage__card{padding:20px 16px}}

/* ===== chat card (Task 30; pages/_includes/chatcard.html): tier 2, the DS 5.4 ChatCard on paper, host system font, every control inert ===== */
.cc-root{padding:24px;background:var(--s-raised);color:var(--s-ink);font:400 14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;
  --cc-raised:color-mix(in srgb,var(--s-ink) 4.5%,var(--s-card));--cc-line:var(--s-line);box-shadow:inset 0 0 0 1px var(--s-line)}
.cc-root *{box-sizing:border-box}
.cc-ask{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:0 0 12px;font-size:13px;color:var(--s-ink-2)}
.cc-ask q{quotes:none;color:var(--s-ink);padding:6px 12px;border-radius:14px;background:var(--s-card);box-shadow:0 0 0 1px var(--cc-line)}
.cc-tool{margin:0 0 8px;justify-self:start;display:inline-block;padding:2px 7px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--s-line);font:11px var(--font-mono);color:var(--s-ink-3)}
.cc-card{background:var(--s-card);border-radius:var(--radius-card,14px);box-shadow:0 0 0 1px var(--cc-line);overflow:hidden}
.cc-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:12px 16px;border-bottom:1px solid var(--cc-line)}
.cc-emblem{--cy-emblem-height:13px;flex:none}
.cc-brand{font-size:13px;font-weight:500}
.cc-meta{margin-left:auto;font:11px var(--font-mono);color:var(--s-ink-3);overflow-wrap:anywhere}
.cc-body{padding:16px;display:grid;gap:14px}
.cc-eyebrow{font-size:12px;font-weight:500;color:#6938EF}
.cc-verdict{margin:0;font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.005em}
.cc-sub{display:block;margin-top:3px;font-size:13px;font-weight:400;color:var(--s-ink-2)}
.cc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;margin:0}
.cc-stat{padding:10px 12px;border-radius:10px;background:var(--cc-raised);display:grid;gap:2px}
.cc-stat .k{font-size:11px;color:var(--s-ink-3)}
.cc-stat .v{margin:0;font-size:15px;font-weight:500}
.cc-stat .v small{font-size:12px;font-weight:400;color:var(--s-ink-3)}
.cc-kv{display:grid;gap:4px;margin:0;font-size:13px}
.cc-kv>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px}
.cc-kv dt{color:var(--s-ink-3)}.cc-kv dd{margin:0}
.cc-label{margin:0 0 -6px;font-size:11px;color:var(--s-ink-3)}
.cc-items{display:grid;border-top:1px solid var(--cc-line)}
.cc-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--cc-line);min-width:0}
.cc-rule{width:14px;height:3px;background:var(--ember);flex:none}
.cc-rule--info{background:var(--s-line-2)}  /* ember means only "a person decides" (DS 5.4); information rows carry a neutral rule */
.cc-txt{display:grid;gap:1px;min-width:0}
.cc-what{font-size:13px;font-weight:500}
.cc-where{font-size:12px;color:var(--s-ink-2)}
.cc-act{margin-left:auto;flex:none}
.cc-btn{display:inline-flex;align-items:center;height:30px;padding:0 14px;border:0;border-radius:10px;font:500 13px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--s-ink);background:none;box-shadow:inset 0 0 0 1px var(--s-line-2);white-space:nowrap}
.cc-btn.pri{background:var(--blue);box-shadow:none;color:#FFFFFF}
.cc-link{font-size:13px;font-weight:500;color:var(--blue);white-space:nowrap}
.cc-scope{display:grid;gap:4px;font-size:12px;color:var(--s-ink-2)}.cc-scope p{margin:0}.cc-scope strong{font-weight:500;color:var(--s-ink)}
.cc-seal{display:grid;gap:6px;padding:14px;background:color-mix(in srgb,#6938EF 10%,var(--s-card));border-left:3px solid #6938EF;font-size:13px;color:var(--s-ink-2)}
.cc-seal p{margin:0}.cc-seal-head{font-weight:500;color:var(--s-ink)}
.cc-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.cc-acts{display:flex;align-items:center;gap:14px;margin-left:auto;flex-wrap:wrap}
.cc-mono{font:11px var(--font-mono);color:var(--s-ink-3)}
@media (max-width:519px){.cc-root{padding:12px}.cc-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.cc-stat{padding:8px}.cc-kv>div{grid-template-columns:1fr;gap:0}}