/* The sample sites' shared layer on top of agentrix.css (Agentrix tokens) and kit.css
   (WebAgent components, --wa-* host tokens). Real pages, not concept frames: the rail and
   sheets are fixed to the viewport. Account, bag and order pages use the class names W6's
   account pages use (acct, btn, field, note, …), styled here from the host tokens. */

html, body { margin: 0; }
body.site { min-height: 100vh; background: var(--wa-soft); color: var(--wa-ink); font-family: var(--wa-font); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.rail { position: fixed; height: 100vh; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--wa-ink); color: var(--wa-bg); font-weight: 700; }
.skip:focus { top: 8px; }

/* Sample band (S-7) */
.s-band { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 7px 16px; background: #1f1d3d; color: #fff; font: 600 12.5px/1.3 var(--font-text); text-align: center; }
.s-band b { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: #de4060; color: #fff; font: 800 11px/1 var(--font-text); letter-spacing: .06em; text-transform: uppercase; }
.s-band a { color: #fff; }

/* Header account chip and bag */
.s-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px 0 4px; border-radius: 999px; border: 1px solid var(--wa-line); background: var(--wa-bg); color: var(--wa-ink); font: 600 13.5px/1 var(--font-text); text-decoration: none; white-space: nowrap; }
.s-chip .ph { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--wa-ink); color: var(--wa-bg); font: 800 13px/1 var(--font-text); }
.s-chip.signin { padding: 0 14px; }
.s-bag { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--wa-line); background: var(--wa-bg); color: var(--wa-ink); text-decoration: none; }
.s-bag svg { width: 20px; height: 20px; }
.s-bag i { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--wa-accent); color: var(--wa-on-accent); font: 800 11px/18px var(--font-text); font-style: normal; text-align: center; }

/* Footer (S-5) */
.s-foot { border-top: 1px solid var(--wa-line); padding: 22px 0 110px; display: grid; gap: 12px; font-size: 13px; color: var(--wa-ink-2); }
.s-foot .row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.s-foot a { color: inherit; }
.s-foot .ai { font-weight: 600; color: var(--wa-ink); }

/* Flash and notes */
.note { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: var(--wa-bg); border: 1px solid var(--wa-line); color: var(--wa-ink-2); font-size: 14px; line-height: 1.5; }
.note b { color: var(--wa-ink); }
.note.ok { background: #eef6ee; border-color: #cfe5cf; color: #24512c; }
.note.warn { background: #fff4dd; border-color: #f0dcae; color: #6d4200; }
.note.risk { background: #fdecea; border-color: #f2c7c2; color: #7d221c; }
.small { font-size: 12.5px; color: var(--wa-ink-2); }
.link { color: var(--wa-accent); font-weight: 700; }

/* Pages that are forms and lists: account, bag, checkout, orders */
.acct { max-width: 640px; margin: 0 auto; padding: clamp(22px, 4vw, 40px) 0 20px; }
.acct.wide { max-width: 980px; }
.acct-h { font: 800 clamp(26px, 3.4vw, 36px)/1.1 var(--wa-display); color: var(--wa-ink); letter-spacing: -.01em; margin: 0; }
.acct-why { margin-top: 8px; color: var(--wa-ink-2); font-size: 15.5px; line-height: 1.5; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: var(--wa-btn-radius, 12px); border: 0; background: var(--wa-accent); color: var(--wa-on-accent); font: 700 14.5px/1 var(--font-text); cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(.92); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; }
.btn.ghost { background: transparent; color: var(--wa-ink); border: 1.5px solid var(--wa-ink); }
.btn.wide { width: 100%; }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.field { display: grid; gap: 6px; margin-top: 14px; font: 600 13.5px/1.3 var(--font-text); color: var(--wa-ink); }
.field input, .field select, .field textarea { width: 100%; box-sizing: border-box; min-height: 46px; border: 1.5px solid var(--wa-line); border-radius: 12px; padding: 10px 12px; font: 500 15px/1.3 var(--font-text); background: var(--wa-bg); color: var(--wa-ink); }
.field textarea { min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--wa-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-accent) 22%, transparent); }
.field .hint { font-weight: 500; font-size: 12.5px; color: var(--wa-ink-2); }
.code { letter-spacing: .4em; font: 700 24px/1 var(--font-mono) !important; text-align: center; }
.card { background: var(--wa-bg); border: 1px solid var(--wa-line); border-radius: var(--wa-radius); padding: 16px; }
.card + .card { margin-top: 12px; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--wa-line); }
.list > li:first-child { border-top: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--wa-soft); color: var(--wa-ink-2); font: 700 12px/1 var(--font-text); white-space: nowrap; }
.pill.new, .pill.ok { background: #e9f3e7; color: #2c6a2a; }
.pill.wait { background: #fff4dd; color: #8a5300; }
.pill.risk { background: #fdecea; color: #a3302a; }
.pill.mute { background: var(--wa-soft); color: var(--wa-ink-2); }

/* The rest of W6's account pages (choices, recovery codes, passkeys, receipts), in the host's
   look. Scoped to .acct so the shop's own lists, cards and keeps above keep their look. */
.acct { display: grid; gap: 16px; align-content: start; }
.acct > div { display: grid; gap: 8px; }
.acct > div > p { margin: 0; }
.acct h2 { margin: 8px 0 0; font: 700 18px/1.25 var(--wa-display); color: var(--wa-ink); }
.acct .field { margin-top: 0; }
.acct-form { display: grid; gap: 12px; }
.acct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acct .note { margin: 0; }
.acct .note p { margin: 0 0 8px; }
.acct .card { display: grid; gap: 10px; }
.acct .card + .card { margin-top: 0; }
.acct .mono { font-family: var(--font-mono); letter-spacing: .1em; }
.acct .btn.danger { background: #a3261a; color: #fff; }
.acct .keeps { list-style: none; margin: 0; padding: 0; display: grid; font-size: 13px; }
.acct .keeps li { display: grid; gap: 2px; padding: 9px 0; border-top: 1px dashed var(--wa-line); }
.acct .keeps li:first-child { border-top: 0; }
.acct .keeps b { font-size: 14px; color: var(--wa-ink); }
.acct .keeps .kept { font-weight: 600; color: var(--wa-ink); }
.acct .codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.acct .codes li { padding: 9px; border: 1px solid var(--wa-line); border-radius: 10px; background: var(--wa-bg); text-align: center; font: 600 14px/1 var(--font-mono); }
.acct .list { display: grid; gap: 8px; }
.acct .list > li { align-items: center; padding: 10px 12px; border: 1px solid var(--wa-line); border-radius: 12px; background: var(--wa-bg); }
.acct .list > li > span { display: grid; gap: 2px; min-width: 0; font-size: 13px; color: var(--wa-ink-2); }
.acct .list li b { font-size: 14px; color: var(--wa-ink); }
.choices { display: grid; gap: 8px; }
.choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--wa-line); border-radius: var(--wa-radius, 14px); background: var(--wa-bg); }
.choice .t { display: grid; gap: 3px; min-width: 0; }
.choice .t span { font-size: 13px; line-height: 1.45; color: var(--wa-ink-2); }
.choice .adult { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--wa-ink-2); }
.switch-wrap { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--font-text); color: var(--wa-ink-2); }
.switch { position: relative; display: inline-block; width: 46px; height: 28px; }
.switch input { appearance: none; -webkit-appearance: none; display: block; margin: 0; width: 100%; height: 100%; border-radius: 999px; border: 1.5px solid var(--wa-ink-2); background: var(--wa-soft); cursor: pointer; }
.switch input:checked { background: var(--wa-accent); border-color: var(--wa-accent); }
.switch input:disabled { cursor: not-allowed; opacity: .6; }
.switch input:focus-visible { outline: 3px solid var(--wa-accent); outline-offset: 2px; }
.switch i { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--wa-ink-2); pointer-events: none; transition: transform .2s ease; }
.switch input:checked + i { transform: translateX(18px); background: var(--wa-on-accent, #fff); }
.receipts { display: grid; gap: 10px; }
.receipt { display: grid; gap: 10px; padding: 14px; border: 1.5px dashed var(--wa-ink-2); border-radius: var(--wa-radius, 14px); background: var(--wa-bg); }
.receipt header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.receipt h3 { margin: 0; font-size: 16px; }
.receipt dl { margin: 0; display: grid; grid-template-columns: minmax(0, 7.2em) minmax(0, 1fr); gap: 6px 12px; font-size: 13px; }
.receipt dl > div { display: contents; }
.receipt dt { font-weight: 700; }
.receipt dd { margin: 0; color: var(--wa-ink-2); overflow-wrap: anywhere; }
.receipt .sig { margin: 0; padding-top: 8px; border-top: 1px dashed var(--wa-line); font: 600 11.5px/1.45 var(--font-mono); color: var(--wa-ink-2); overflow-wrap: anywhere; }
@media (max-width: 420px) { .receipt dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .receipt dd { margin-bottom: 6px; } }
@media (prefers-reduced-motion: reduce) { .switch i { transition: none; } }
.k-src { display: block; margin-top: 3px; font: 500 11.5px/1.35 var(--font-text); color: var(--wa-ink-2); }
.k-src b { font-weight: 700; }
code.rule { font: 600 11px/1 var(--font-mono); padding: 2px 5px; border-radius: 5px; background: var(--wa-soft); color: var(--wa-ink-2); }
.lines { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.lines td { padding: 10px 0; border-top: 1px solid var(--wa-line); vertical-align: top; }
.lines td:last-child { text-align: right; white-space: nowrap; font-weight: 700; }
.lines tr.total td { font: 800 17px/1.2 var(--wa-display); border-top: 2px solid var(--wa-ink); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 8px; }
.slots label { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px solid var(--wa-line); border-radius: 12px; background: var(--wa-bg); font: 600 13.5px/1.3 var(--font-text); cursor: pointer; }
.slots label:has(input:checked) { border-color: var(--wa-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--wa-accent) 25%, transparent); }
.slots label.full { opacity: .5; cursor: not-allowed; }
.slots label small { display: block; font-weight: 500; color: var(--wa-ink-2); }
.timeline { list-style: none; margin: 10px 0 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 14px 26px; font-size: 14px; color: var(--wa-ink-2); }
.timeline li::before { content: ""; position: absolute; left: 6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--wa-line); }
.timeline li::after { content: ""; position: absolute; left: 10px; top: 16px; bottom: 0; width: 2px; background: var(--wa-line); }
.timeline li:last-child::after { display: none; }
.timeline li.done::before { background: var(--wa-ok, #2f6b3a); }
.timeline li.now::before { background: var(--wa-wait, #b26b00); box-shadow: 0 0 0 4px #fff4dd; }
.timeline li b { display: block; color: var(--wa-ink); font-size: 14.5px; }
.grid2 { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.spread { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; gap: 4px; }
.qty button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--wa-line); background: var(--wa-bg); color: var(--wa-ink); font: 700 16px/1 var(--font-text); cursor: pointer; }
.qty span { min-width: 22px; text-align: center; font-weight: 700; }
.keeps { margin: 10px 0 0; padding-left: 18px; color: var(--wa-ink-2); font-size: 14px; line-height: 1.55; }
.provider { margin-top: 14px; padding: 16px; border-radius: 14px; border: 1.5px dashed var(--wa-line); background: var(--wa-bg); }
.provider b { display: block; font-size: 15px; }

/* Living mark used inline (S-6) */
.wa-living { display: inline-flex; flex: none; vertical-align: middle; }
/* ---------- The living mark (ADR-031; motion values from 06 §4.3) ---------- */
.j-mark { display: inline-flex; flex: none; vertical-align: middle; }
.wa { display: block; overflow: visible; flex: none; }
.wa .wa-halo { opacity: 0; transform-box: fill-box; transform-origin: center; }
.wa .wa-trace { opacity: 0; stroke-dasharray: 22 120; }
.wa .wa-dot { opacity: 0; }
.wa .wa-sig { transform-box: fill-box; transform-origin: center; }
.wa .wa-core, .wa { transition: filter .4s ease, opacity .4s ease; }
.wa[data-state="listening"] .wa-halo { animation: wa-breathe 2.2s ease-in-out infinite; }
.wa[data-state="answering"] .wa-halo { opacity: .45; }
.wa[data-state="speaking"] .wa-halo { opacity: calc(.2 + var(--lvl, .4) * .6); transform: scale(calc(.97 + var(--lvl, .4) * .11)); }
.wa[data-state="working"] .wa-trace { opacity: 1; animation: wa-trace 1s linear infinite; }
.wa[data-state="working"][data-motion="spin"] .wa-sig { animation: wa-spin 16s linear infinite; }
.wa[data-state="working"][data-motion="drift"] .wa-drift { animation: wa-drift 2.6s linear infinite; }
.wa[data-state="waiting"] .wa-dot { opacity: 1; }
.wa[data-state="resting"] { filter: grayscale(1); opacity: .55; }
.wa[data-state="asleep"] { filter: saturate(.2); opacity: .72; }
.wa[data-state="paused"], .wa[data-state="frozen"] { filter: grayscale(1); opacity: .82; }
.wa .chief-dot { transform-box: fill-box; transform-origin: center; }
.wa .chief-dot.busy { animation: wa-pulse 1.4s ease-in-out infinite; }
/* Motion settles after 5 s in one state: the reduced-motion look, label kept. */
.wa[data-settled], .wa[data-settled] * { animation: none !important; }
.wa[data-settled][data-state="listening"] .wa-halo { opacity: .35; }
.wa[data-settled][data-state="working"] .wa-trace { stroke-dasharray: none; opacity: .8; }
@keyframes wa-breathe { 0%, 100% { opacity: 0; transform: scale(.96); } 50% { opacity: .55; transform: scale(1.04); } }
@keyframes wa-trace { from { stroke-dashoffset: 142; } to { stroke-dashoffset: 0; } }
@keyframes wa-spin { to { transform: rotate(360deg); } }
@keyframes wa-drift { from { transform: translateX(0); } to { transform: translateX(var(--p)); } }
@keyframes wa-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) {
  .wa *, .wa { animation: none !important; transition: none !important; }
  .wa[data-state="listening"] .wa-halo { opacity: .35; }
  .wa[data-state="working"] .wa-trace { stroke-dasharray: none; opacity: .8; }
}


[hidden] { display: none !important; }

/* Pictures from the media library: generated sample images carry their label (01a §1.5). */
.pic { position: relative; overflow: hidden; }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rtag { position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(20, 16, 12, .72); color: #fff; font: 600 10.5px/1.2 var(--font-text); letter-spacing: .01em; pointer-events: none; }
figure.b-art { margin: 0; }

.starter small { text-transform: uppercase; }

.s-visits { align-items: center; }
.link-btn { border: 0; background: none; padding: 4px 0; color: var(--wa-accent); font: 700 12.5px/1.3 var(--font-text); text-decoration: underline; cursor: pointer; }