/* Unified buyer shell — the one stylesheet, served hashed and immutable.
   Externalized from buyer-shell.js so the page CSP can drop style-src
   'unsafe-inline' (only the tiny per-project accent variable stays inline,
   allowed by its own sha256 hash). */
:root { color-scheme: light dark; }
* { margin: 0; box-sizing: border-box; }
body { font: 16px/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif; background: #14121f; color: #eee9f5; min-height: 100vh; display: flex; flex-direction: column; }
header { padding: 18px clamp(16px, 5vw, 48px); border-bottom: 1px solid rgba(255,255,255,.12); display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
header b { font-size: 1.15rem; letter-spacing: .02em; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a { color: inherit; text-decoration: none; padding: 6px 12px; border-radius: 999px; opacity: .78; }
nav a:hover { opacity: 1; background: rgba(255,255,255,.08); }
nav a.on { opacity: 1; background: var(--accent, #c9a86a); color: #17141f; font-weight: 600; }
main { flex: 1; display: flex; flex-direction: column; }
.wrap { padding: clamp(20px, 5vw, 56px); max-width: 1080px; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.15; }
.tagline { color: var(--accent, #c9a86a); margin-top: 6px; font-size: 1.05rem; }
.desc { margin-top: 16px; max-width: 64ch; opacity: .9; }
.kicker { margin: 28px 0 10px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips span { border: 1px solid rgba(255,255,255,.2); padding: 5px 12px; border-radius: 999px; font-size: .9rem; }
.claims { font-size: .8rem; opacity: .55; margin-top: 10px; }
table { border-collapse: collapse; margin-top: 8px; }
td { padding: 5px 16px 5px 0; vertical-align: top; }
td:first-child { opacity: .65; white-space: nowrap; }
iframe.exp { flex: 1; width: 100%; border: 0; min-height: 78vh; background: #0c0b12; }
.enq a { color: var(--accent, #c9a86a); }
footer { padding: 14px clamp(16px, 5vw, 48px); border-top: 1px solid rgba(255,255,255,.1); font-size: .78rem; opacity: .55; }
.nf { flex: 1; display: grid; place-items: center; text-align: center; padding: 40px; }
.nf h1 { font-size: 1.6rem; }
.nf a { color: #c9a86a; }
.nf p { opacity: .7; margin-top: 10px; }
.dim { opacity: .7; }
.gap-top { margin-top: 14px; }
.enq-lg { margin-top: 16px; font-size: 1.1rem; }

/* ------------------------------------- single-solution immersive mode --- */
/* One product experience published → it IS the page: the frame fills the
   viewport and NOTHING of the shell renders over it (owner, 20/08 — every
   product already carries its own brand, navigation rail and credit, so a
   second floating label only duplicated them). The wake button, when voice
   is published, keeps its usual place. */
body.bare { display: block; overflow: hidden; }
iframe.exp.full { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: #0c0b12; }

/* ------------------------------------------------ AI Assistant (voice) --- */
/* Present only when the publication manifest enables buyer-voice. Nothing
   here activates a microphone — the bundle waits for an explicit tap. */
/* THE VOICE ORB. A microphone mark that reads as "speak to me" instantly,
   with the assistant's own name beside it where there is room and tucked
   behind it on a phone. The breathing ring invites the first tap without
   ever moving the page, and it stops for anyone who asks for less motion. */
#xv-launch.xv-orb {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  border: 0; border-radius: 999px; padding: 12px 20px 12px 14px;
  font: 600 14.5px/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--accent, #c9a86a); color: #17141f; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
#xv-launch.xv-orb:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0,0,0,.5); }
#xv-launch.xv-orb:active { transform: translateY(0); }
#xv-launch.xv-orb:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.xv-orb-mic { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.xv-orb-label { white-space: nowrap; }
/* the ring sits UNDER the orb and never changes its box, so nothing reflows */
.xv-orb-pulse {
  position: absolute; left: 8px; top: 50%; width: 38px; height: 38px; margin-top: -19px;
  border-radius: 50%; background: var(--accent, #c9a86a); opacity: .55; z-index: -1;
  animation: xv-orb-breathe 2.8s ease-out infinite;
}
@keyframes xv-orb-breathe {
  0% { transform: scale(1); opacity: .5; }
  70% { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .xv-orb-pulse { animation: none; opacity: 0; } }
/* on a phone the name steps aside and the orb becomes a clean circle */
@media (max-width: 560px) {
  #xv-launch.xv-orb { padding: 0; width: 58px; height: 58px; justify-content: center; gap: 0; right: 14px; bottom: 14px; }
  .xv-orb-label { display: none; }
  .xv-orb-pulse { left: 50%; margin-left: -19px; }
}
#xv-panel { position: fixed; right: 14px; bottom: 76px; z-index: 41; width: min(380px, calc(100vw - 28px)); background: #1c1930; color: #eee9f5; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; box-shadow: 0 18px 60px rgba(0,0,0,.55); display: none; flex-direction: column; overflow: hidden; }
#xv-panel.open { display: flex; }
.xv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.xv-head b { flex: 1; font-size: .95rem; }
.xv-head select { background: #14121f; color: inherit; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 4px 8px; font-size: .85rem; }
.xv-head button { background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; font-size: 1.1rem; }
.xv-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.xv-answer { background: rgba(255,255,255,.06); border-radius: 12px; padding: 12px 14px; font-size: .92rem; white-space: pre-wrap; }
.xv-note { font-size: .78rem; opacity: .6; }
.xv-review { font-size: .82rem; color: #eec98a; }
.xv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.xv-actions a, .xv-actions button.xv-chip { border: 1px solid rgba(255,255,255,.25); background: none; color: inherit; text-decoration: none; padding: 5px 12px; border-radius: 999px; font-size: .82rem; cursor: pointer; }
.xv-row { display: flex; gap: 8px; align-items: flex-end; }
.xv-row textarea { flex: 1; resize: none; background: #14121f; color: inherit; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 9px 11px; font: inherit; font-size: .9rem; min-height: 42px; }
.xv-mic { border: 0; border-radius: 999px; width: 46px; height: 46px; font-size: 1.15rem; cursor: pointer; background: rgba(255,255,255,.1); color: inherit; flex: none; }
.xv-mic.listening { background: #b33a3a; animation: xv-pulse 1.2s infinite; }
@keyframes xv-pulse { 50% { box-shadow: 0 0 0 8px rgba(179,58,58,.25); } }
.xv-send { border: 0; border-radius: 10px; padding: 11px 16px; font: 600 14px/1 system-ui, sans-serif; background: var(--accent, #c9a86a); color: #17141f; cursor: pointer; flex: none; }
.xv-send[disabled], .xv-mic[disabled] { opacity: .45; cursor: default; }
.xv-status { font-size: .8rem; opacity: .65; min-height: 1.2em; }
.xv-voice { display: flex; gap: 8px; flex-wrap: wrap; }
.xv-voice button { border: 1px solid rgba(255,255,255,.25); background: none; color: inherit; border-radius: 999px; padding: 4px 12px; font-size: .8rem; cursor: pointer; }
.xv-state { font-size: .78rem; font-weight: 600; letter-spacing: .02em; min-height: 1.1em; opacity: .8; }
.xv-state.live { color: #e8907e; }
.xv-partial { font-size: .9rem; font-style: italic; opacity: .75; border-left: 2px solid rgba(255,255,255,.3); padding-left: 10px; }
.xv-evidence { font-size: .74rem; opacity: .6; }
/* Kernel §54 — the text channel shows the structure the engine computed */
.xv-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.xv-card { display: flex; flex-direction: column; gap: 2px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 9px 11px; font-size: .8rem; text-align: left; color: inherit; cursor: pointer; }
.xv-card b { font-size: .86rem; }
.xv-card .xv-card-status { font-size: .72rem; opacity: .7; text-transform: capitalize; }
.xv-options-more { grid-column: 1 / -1; font-size: .74rem; opacity: .6; }
.xv-next { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.xv-next button { border: 1px solid var(--accent, #c9a86a); background: none; color: inherit; border-radius: 999px; padding: 5px 12px; font-size: .82rem; cursor: pointer; }
.xv-conv { display: flex; gap: 8px; align-items: flex-start; font-size: .74rem; opacity: .7; cursor: pointer; }
.xv-conv input { width: auto; margin-top: 2px; }
.xv-handoff { display: flex; flex-direction: column; gap: 8px; background: rgba(255,255,255,.05); border-radius: 12px; padding: 12px 14px; }
.xv-handoff input, .xv-handoff select { background: #14121f; color: inherit; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: .88rem; }
.xv-consent { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; opacity: .85; cursor: pointer; }
.xv-consent input { width: auto; margin-top: 2px; }
.xv-tiny { font-size: .76rem; opacity: .65; margin: 0; }