@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root { --accent-ink: var(--accent); }
:root {
  --washi: #F4F1EA;
  --sumi: #16202A;
  --indigo: #2E4FA3;
  --bg: var(--washi);
  --surface: #FBFAF6;
  --text: var(--sumi);
  --muted: #5C6670;
  --line: #DDD7CB;
  --accent: var(--indigo);
  --accent-text: #FFFFFF;
  --user-bubble: #E7E2D7;
  --error: #A33A2E;
  --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--sumi);
    --surface: #1D2934;
    --text: #ECE8DF;
    --muted: #9AA4AE;
    --line: #2E3B47;
    --accent: #7D99E0;
    --accent-text: #0F1720;
    --user-bubble: #26333F;
    --error: #E58A7E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--sumi); --surface: #1D2934; --text: #ECE8DF; --muted: #9AA4AE; --line: #2E3B47;
  --accent: #7D99E0; --accent-text: #0F1720; --user-bubble: #26333F; --error: #E58A7E; color-scheme: dark;
}

* { box-sizing: border-box; }
.pwa-install { min-height: 48px; width: 100%; }
.pwa-status { margin: 12px 16px; white-space: normal; overflow-wrap: anywhere; }
html, body { height: 100%; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Header */
.top {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; }
.brand img { border-radius: 8px; }
.wordmark { font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.chip {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 6px 12px; font-size: 14px; cursor: pointer; color: var(--muted);
}
.chip:hover { color: var(--text); }
.head-right { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Questions from a Buy For You run */
.ask { border: 1px solid var(--accent); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.ask .answer { font-size: 15px; }
.ask .answer > :first-child { margin-top: 0; }
.ask .answer > :last-child { margin-bottom: 0; }
.ask-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ask-actions button { border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 600; border: 1px solid var(--line); background: var(--bg); }
.ask-actions .primary { border-color: transparent; }
.ask .hint { font-size: 13px; color: var(--muted); margin-top: 8px; }
.ask.answered { border-color: var(--line); }
.ask.answered .ask-actions, .ask.answered .hint { display: none; }
.buy-btn { align-self: flex-start; border: 1px solid var(--accent); color: var(--accent-ink); background: var(--surface); border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 600; }
.buy-btn:hover { background: var(--accent); color: var(--accent-text); }
.ask .reply { margin-top: 8px; font-size: 14px; color: var(--muted); }

/* Chat */
main { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 18px; }
main > * { width: 100%; max-width: 760px; margin-inline: auto; }

.empty { margin-top: 8vh; }
.empty h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; }
.empty p { color: var(--muted); margin: 0 0 20px; max-width: 56ch; }
.examples { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.example {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; font-size: 15px;
}
.example:hover { border-color: var(--accent); }
.fine { font-size: 13px; color: var(--muted); }

.msg.user { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.msg.user .bubble {
  background: var(--user-bubble); border-radius: var(--radius) var(--radius) 4px var(--radius);
  padding: 10px 14px; max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg.user img { max-width: 180px; max-height: 180px; border-radius: 10px; object-fit: cover; }

.msg.bot { display: flex; flex-direction: column; gap: 10px; }
.progress {
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 12px 14px;
}
.progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.progress-head .status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.progress-head .timer { color: var(--muted); font-variant-numeric: tabular-nums; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.progress.done .dot { animation: none; background: var(--muted); }
@keyframes pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }
.steps { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.steps li { display: flex; gap: 8px; overflow-wrap: anywhere; }
.steps li::before { content: "–"; color: var(--line); }
.steps li.thought { font-style: italic; }
.progress.done .steps { display: none; }
.progress.done.open .steps { display: flex; }
.toggle-steps { background: none; border: 0; padding: 0; color: var(--muted); font-size: 13px; cursor: pointer; text-decoration: underline; }
.live { margin-top: 10px; font-size: 14px; }
.live a { color: var(--accent-ink); }
.live iframe { width: 100%; aspect-ratio: 1366 / 900; border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; background: #000; }

.answer { overflow-wrap: anywhere; }
.answer h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 20px 0 8px; font-weight: 600; }
.answer p { margin: 8px 0; }
.answer a { color: var(--accent-ink); }
.answer em { color: var(--muted); font-size: 13px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.answer table { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.answer th, .answer td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.answer th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.answer tr:last-child td { border-bottom: 0; }
.answer tbody tr:first-child td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.stats { font-size: 12px; color: var(--muted); }
.error-msg { color: var(--error); font-size: 14px; }

/* Composer */
.composer {
  position: sticky; bottom: 0;
  padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line);
}
.composer .row, .attachments { max-width: 760px; margin-inline: auto; }
.composer .row {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 6px;
}
.composer .row:focus-within { border-color: var(--accent); }
textarea {
  flex: 1; border: 0; background: transparent; resize: none; outline: none;
  padding: 8px 4px; max-height: 160px; min-width: 0;
}
.icon-btn, .send {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 0;
}
.icon-btn { color: var(--muted); background: transparent; }
.icon-btn:hover { color: var(--text); }
.send { background: var(--accent); color: var(--accent-text); }
.send:disabled { opacity: 0.4; cursor: default; }
.send.stop { background: var(--text); color: var(--bg); }
.attachments { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.attachments[hidden] { display: none; }
.attachment { position: relative; display: inline-block; }
.attachment img { height: 64px; border-radius: 8px; display: block; }
.attachment button {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: var(--text); color: var(--bg); cursor: pointer; line-height: 1;
}

/* Dialogs */
dialog {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text);
  padding: 0; width: min(420px, calc(100vw - 32px));
}
dialog::backdrop { background: rgb(22 32 42 / 0.45); }
.sheet { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.sheet h2 { margin: 0; font-size: 20px; font-weight: 600; }
.sheet p { margin: 0; }
.sheet label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
.sheet select, .sheet input {
  padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text);
}
.actions { display: flex; justify-content: flex-end; }
.primary { background: var(--accent); color: var(--accent-text); border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer; font-weight: 600; }
.error { color: var(--error); font-size: 14px; }

/* Sign-in, Account and My orders */
.link { background: none; border: 0; padding: 0; color: var(--accent-ink); cursor: pointer; font-size: 14px; text-decoration: underline; }
.actions.spread { justify-content: space-between; align-items: center; margin-top: 8px; }
.actions .fine { margin-right: auto; align-self: center; }
.sheet input:disabled { opacity: 0.6; }
#signinCode { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; font-size: 20px; text-align: center; }
dialog.tall { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet h3 { margin: 12px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid .wide { grid-column: 1 / -1; }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } }
.orders { display: flex; flex-direction: column; gap: 10px; }
.order { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); }
.order-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.order ul { margin: 6px 0; padding-left: 18px; font-size: 14px; }
.order ul a { color: var(--accent-ink); overflow-wrap: anywhere; }
.order p { margin: 4px 0 0; }
.status { font-size: 12px; border-radius: 999px; padding: 2px 10px; background: var(--user-bubble); color: var(--text); }
.status.s-invoiced, .status.s-shipping_invoiced { background: var(--accent); color: var(--accent-text); }
.status.s-cancelled { color: var(--muted); }
.invoice { border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-size: 14px; }
.invoice.open { border: 1px solid var(--accent); }
.invoice.paid { color: var(--muted); }
.invoice pre { margin: 6px 0 0; white-space: pre-wrap; font: inherit; font-size: 13px; }
.head-right .chip { white-space: nowrap; }
#whereLabel { display: inline-block; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
#openAccount.needs::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; }
.primary, .btn { white-space: nowrap; }

/* Chat scrolling: the newest question is pinned to the top; offsetTop is measured against main. */
main { position: relative; overflow-anchor: none; }
.spacer { flex: none; padding: 0; margin-top: -18px; }
.msg.user .photos { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 85%; }
.msg.user .photos img { width: 120px; height: 120px; }
.msg.user .photos img:only-child { width: auto; height: auto; max-width: 220px; max-height: 220px; }

/* Photos: drop target and small notices */
body.dropping .composer .row { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
body.dropping main::after {
  content: "Drop photos to add them"; position: fixed; inset: auto 0 96px 0; margin: auto; width: max-content;
  background: var(--accent); color: var(--accent-text); padding: 8px 16px; border-radius: 999px; font-size: 14px; pointer-events: none;
}
.flash { position: absolute; left: 50%; transform: translateX(-50%); top: -36px; background: var(--text); color: var(--bg); padding: 6px 14px; border-radius: 999px; font-size: 13px; white-space: nowrap; }

/* ====== Chat, Shop-style: question headings, assistant steps, result cards, floating follow-up bar ====== */
:root { --card: #FFFFFF; --tile: #EFECE4; --shadow: 0 1px 2px rgb(22 32 42 / 0.06), 0 8px 24px rgb(22 32 42 / 0.06); --r-card: 20px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --card: #1D2934; --tile: #26333F; --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25); } }
:root[data-theme="dark"] { --card: #1D2934; --tile: #26333F; --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25); }

main { gap: 14px; padding-bottom: 8px; }

/* The question is the heading of its turn */
.msg.user { align-items: flex-start; gap: 10px; margin-top: 18px; }
.msg.user:first-of-type { margin-top: 0; }
.msg.user .q { margin: 0; font-size: clamp(22px, 5vw, 28px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.msg.user .photos { justify-content: flex-start; max-width: 100%; }
.msg.user .photos img { width: 64px; height: 64px; border-radius: 12px; }
.msg.user .photos img:only-child { width: 88px; height: 88px; max-width: none; max-height: none; }

/* Assistant steps */
.progress { border: 0; background: transparent; padding: 0; }
.progress-head {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 0; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--muted); width: auto;
}
.progress-head:disabled { cursor: default; }
.progress-head .status { font-weight: 600; color: var(--text); }
.progress.done .progress-head .status { color: var(--muted); font-weight: 500; }
.progress-head .chev { display: inline-flex; transition: transform 0.15s; }
.progress.open .progress-head .chev { transform: rotate(180deg); }
.progress.done .progress-head .timer { display: none; }
.progress .steps { list-style: none; margin: 6px 0 0 2px; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: none; flex-direction: column; gap: 10px; }
.progress.open .steps { display: flex; }
.progress.done.open .steps { display: flex; }
.steps li { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: start; font-size: 14px; color: var(--muted); }
.steps li::before { content: none; }
.steps .s-icon { color: var(--muted); display: inline-flex; margin-top: 2px; }
.steps .s-text { color: var(--text); }
.steps .pills { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pill { display: inline-flex; align-items: center; gap: 5px; background: var(--tile); color: var(--text); border-radius: 999px; padding: 4px 10px; font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps li.thought .s-text { color: var(--muted); font-style: italic; }

/* The answer */
.result { display: flex; flex-direction: column; gap: 14px; }
.answer-text p { margin: 0 0 6px; line-height: 1.5; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

.best {
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 14px;
  display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center;
}
.best-media { width: 112px; height: 112px; border-radius: 16px; background: var(--tile); display: grid; place-items: center; overflow: hidden; }
.best-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.best-media .shop-badge { width: 56px; height: 56px; font-size: 24px; }
.best-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.best-price { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.best-local { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.best-shop { color: var(--text); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.best-shop:hover { text-decoration: underline; }
.save-pill { align-self: flex-start; margin-top: 4px; background: var(--accent); color: var(--accent-text); border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 600; }
.save-pill.quiet { background: var(--tile); color: var(--text); font-weight: 500; }
.best-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-primary, .btn-dark {
  display: inline-flex; justify-content: center; align-items: center; height: 44px; border-radius: 999px; font: inherit; font-weight: 600;
  font-size: 15px; cursor: pointer; text-decoration: none; border: 0; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-dark { background: var(--text); color: var(--bg); }
.btn-primary:hover, .btn-dark:hover { filter: brightness(1.08); }

.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

.sellers { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.sellers.muted { opacity: 0.85; }
.seller { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 0; border-bottom: 1px solid var(--line); }
.seller:last-child { border-bottom: 0; }
.seller-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 0 12px 14px; color: inherit; text-decoration: none; }
.seller-main:hover .seller-name { text-decoration: underline; }
.shop-badge {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 16px;
  background: hsl(var(--h, 220) 45% 92%); color: hsl(var(--h, 220) 45% 30%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shop-badge { background: hsl(var(--h, 220) 30% 25%); color: hsl(var(--h, 220) 60% 85%); } }
.seller-info { min-width: 0; }
.seller-name { font-weight: 600; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seller-name .tag { background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; }
.seller-meta { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seller-price { text-align: right; font-variant-numeric: tabular-nums; }
.seller-price .p { font-weight: 700; }
.seller-price .l { color: var(--muted); font-size: 12px; }
.seller-buy { flex: none; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.seller-buy:hover { border-color: var(--accent); color: var(--accent-ink); }

.fine-print { font-size: 12px; color: var(--muted); }
.fine-print summary { cursor: pointer; list-style: none; }
.fine-print summary::-webkit-details-marker { display: none; }
.fine-print:not(.plain) summary::after { content: " · details"; text-decoration: underline; }
.fine-print.plain summary { cursor: default; pointer-events: none; }
.fine-print p { margin: 6px 0 0; overflow-wrap: anywhere; }

.suggest { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.chip-suggest { border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; padding: 7px 2px; cursor: pointer; text-align: left; }
.chip-suggest span { color: var(--muted); margin-right: 4px; }
.chip-suggest:hover { color: var(--accent-ink); }
.stats { margin-top: -4px; }

/* Floating "Ask a follow-up" bar */
.composer { background: linear-gradient(to top, var(--bg) 70%, transparent); border-top: 0; padding-top: 16px; }
.composer .row { background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); padding: 6px 6px 6px 8px; align-items: center; }
.composer .row:focus-within { border-color: var(--accent); }
.composer textarea { padding: 9px 4px; }

/* Seller rows, compact: Buy is a small link under the price */
.seller { padding: 0; }
.seller-main { padding: 12px 14px; grid-template-columns: 40px minmax(0, 1fr) auto; }
.seller-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.seller-buy { border: 0; background: none; padding: 2px 0; color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.seller-buy:hover { text-decoration: underline; color: var(--accent-ink); }
.seller-name { display: block; }
.seller-name .tag { margin-left: 6px; vertical-align: 1px; }
.seller-main { cursor: pointer; }
.seller-name a { color: inherit; text-decoration: none; }
.seller-main:hover .seller-name a { text-decoration: underline; }
/* Product photos are shot on white: in dark mode give them a light tile instead of blending them into a dark one. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .best-media:has(img) { background: #F1EFE9; } :root:not([data-theme="light"]) .best-media img { mix-blend-mode: normal; } }
:root[data-theme="dark"] .best-media:has(img) { background: #F1EFE9; }
:root[data-theme="dark"] .best-media img { mix-blend-mode: normal; }

/* ====== Welcome screen: greeting, starter cards, three steps ====== */
.empty { margin-top: auto; margin-bottom: auto; padding: 4vh 0 2vh; display: flex; flex-direction: column; gap: 20px; }
.empty[hidden] { display: none; }
.hello h1 { font-size: clamp(30px, 7vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 10px; }
.hello p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.45; max-width: 42ch; }

.starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.starter {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center;
  text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; cursor: pointer;
  font: inherit; color: var(--text); box-shadow: var(--shadow); transition: transform 0.12s, border-color 0.12s;
}
.starter:hover { border-color: var(--accent); transform: translateY(-1px); }
.starter:active { transform: translateY(0); }
.starter-icon { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tile); color: var(--accent-ink); }
.starter-title { font-weight: 600; font-size: 15px; }
.starter-sub { color: var(--muted); font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) {
  .starter { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 4px; padding: 12px; }
  .starter-icon { grid-row: auto; width: 36px; height: 36px; margin-bottom: 6px; }
  .starter-sub { white-space: normal; }
}

.how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.how li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.how li span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); font-size: 12px; font-weight: 700; }
.empty .fine { margin: 0; }
.starter { align-content: start; } @media (max-width: 420px) { .starter { align-items: start; } }

/* Composer: a fixed corner radius (a 999px pill turns into an oval once the text wraps), buttons pinned to the
   bottom line, and the text area scrolling inside after ~6 lines. */
.composer .row { border-radius: 24px; align-items: flex-end; padding: 6px; }
.composer textarea { line-height: 1.45; padding: 7px 4px; min-height: 36px; max-height: 160px; overflow-y: auto; align-self: center; }
.composer .row.multi textarea { align-self: stretch; }
.composer .icon-btn, .composer .send { margin: 0; }
/* Clarifying question chips, good-to-know, shortfall */
.options { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-option { border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 15px; cursor: pointer; box-shadow: var(--shadow); }
.chip-option:hover { border-color: var(--accent); color: var(--accent-ink); }
.good-to-know { background: var(--tile); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.good-to-know p { margin: 0; font-size: 14px; line-height: 1.45; }
.fine-line { margin: -4px 0 0; font-size: 13px; color: var(--muted); }

/* Bottom tab bar: Chat / Wishlist. The composer floats just above it. */
.composer { padding-bottom: 8px; }
.tabbar {
  position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: center; gap: 4px;
  background: var(--bg); border-top: 1px solid var(--line);
  padding: 6px 16px; padding-bottom: max(6px, env(safe-area-inset-bottom));
}
.tab {
  flex: 0 1 160px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; border-radius: 12px; padding: 6px 8px; cursor: pointer;
  color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
}
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--accent-ink); }
.tab[aria-current="page"] svg path { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Wishlist: a catalogue grid of every product checked */
.wishlist { flex: 1; overflow-y: auto; padding: 20px 16px 24px; }
.wl-inner { max-width: 960px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; }
.wl-head h1 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; }
.wl-head .fine { margin: 4px 0 0; }
.wl-search {
  display: flex; align-items: center; gap: 8px; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; box-shadow: var(--shadow);
}
.wl-search:focus-within { border-color: var(--accent); }
.wl-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 11px 0; outline: none; font-size: 16px; color: var(--text); }
.wl-search[hidden] { display: none; }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
@media (max-width: 520px) { .wl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.wl-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow);
}
.wl-card.skeleton { aspect-ratio: 3 / 4; background: var(--tile); box-shadow: none; animation: pulse 1.4s ease-in-out infinite; }
.wl-img {
  position: relative; aspect-ratio: 1; background: #FFFFFF; display: grid; place-items: center;
  border-bottom: 1px solid var(--line);
}
.wl-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }
.wl-img.none {
  --h: 220; background: hsl(var(--h) 40% 92%); color: hsl(var(--h) 35% 35%);
  font-size: 44px; font-weight: 700;
}
.wl-del {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: rgb(255 255 255 / 0.92); color: var(--sumi); box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
  opacity: 0; transition: opacity 0.15s;
}
.wl-card:hover .wl-del, .wl-del:focus-visible { opacity: 1; }
@media (hover: none) { .wl-del { opacity: 1; } }
.wl-body { display: flex; flex-direction: column; gap: 2px; padding: 12px; flex: 1; }
.wl-body > .wl-again { margin-top: auto; }
.wl-name {
  margin: 0 0 4px; font-size: 14px; line-height: 1.35; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wl-price { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 17px; }
.wl-price.muted { color: var(--muted); font-size: 14px; }
.wl-store { margin: 0; font-size: 13px; color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.wl-store:hover { color: var(--accent-ink); text-decoration: underline; }
.wl-when { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.wl-again {
  margin-top: 10px; align-self: stretch;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  border-radius: 999px; padding: 7px 10px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.wl-again:hover { border-color: var(--accent); color: var(--accent-ink); }
.wl-price .tag { background: var(--tile); color: var(--muted); font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; }
.wl-empty { text-align: center; padding: 40px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wl-empty p { margin: 0; max-width: 40ch; }
.wl-empty .buy-btn { margin-top: 12px; align-self: center; }

/* Shop logos: the favicon on white in the same circle; the coloured initial stays when there's no logo. */
.shop-badge { overflow: hidden; flex: none; }
.shop-badge.has-logo { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.shop-badge.has-logo img { width: 62%; height: 62%; object-fit: contain; border-radius: 4px; }
.best-shop { display: inline-flex; align-items: center; gap: 6px; }
.mini-logo { width: 16px; height: 16px; border-radius: 4px; flex: none; background: #FFFFFF; }

/* The saving: the headline of the best-price card. */
:root { --save: #1C7A4A; --save-bg: #E6F3EA; --save-track: #D3E8DA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --save: #6FD39B; --save-bg: #183327; --save-track: #24493A; } }
:root[data-theme="dark"] { --save: #6FD39B; --save-bg: #183327; --save-track: #24493A; }
.save { grid-column: 1 / -1; background: var(--save-bg); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.save-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.save-amt { color: var(--save); font-size: 24px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.save-pct { color: var(--save); background: var(--card); border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.save-sub { margin: 0 0 10px; font-size: 14px; color: var(--text); }
.save-bars { display: flex; flex-direction: column; gap: 8px; }
.save-row { display: grid; grid-template-columns: minmax(0, 7.5em) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.save-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.save-track { height: 10px; border-radius: 999px; background: var(--save-track); overflow: hidden; }
.save-fill { height: 100%; border-radius: 999px; }
.is-best .save-fill { background: var(--save); }
.is-other .save-fill { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.is-best .save-label, .is-best .save-val { color: var(--text); font-weight: 600; }
.save-val { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 5.5em; text-align: right; }
.save-note { grid-column: 1 / -1; color: var(--save); font-size: 14px; font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shop-badge.has-logo { background: #FFFFFF; } }
:root[data-theme="dark"] .shop-badge.has-logo { background: #FFFFFF; }

/* Account panel (Shop-style): a full-height sheet on phones, a tall card on desktop. */
dialog.panel {
  width: min(480px, 100vw); height: min(820px, calc(100dvh - 48px)); max-height: none; max-width: none;
  border: 0; border-radius: 24px; background: var(--bg); overflow: hidden; box-shadow: 0 24px 60px rgb(0 0 0 / 0.25);
}
dialog.panel[open] { display: flex; flex-direction: column; }
@media (max-width: 560px) {
  dialog.panel { width: 100vw; height: 100dvh; margin: 0; border-radius: 0; inset: 0; }
}
.panel-head {
  display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px;
  padding: 12px 12px; padding-top: max(12px, env(safe-area-inset-top));
}
.panel-head h2 { margin: 0; text-align: center; font-size: 17px; font-weight: 700; }
.panel-head #closeAccount { grid-column: 3; }
.round-btn {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 0; background: var(--tile); color: var(--text);
}
.round-btn:hover { filter: brightness(0.96); }
.round-btn[hidden] { display: grid !important; visibility: hidden; }
.panel-body { flex: 1; overflow-y: auto; padding: 4px 16px 28px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.acc-page { display: flex; flex-direction: column; gap: 16px; }
.page-lead { margin: 0; color: var(--muted); font-size: 14px; }

.acc-hero {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 0; border-radius: 20px; padding: 16px; box-shadow: var(--shadow); color: var(--text);
}
.avatar {
  --h: 220; width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: hsl(var(--h) 45% 88%); color: hsl(var(--h) 45% 28%); font-size: 24px; font-weight: 700;
}
.acc-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acc-name { font-size: 19px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-name.placeholder { color: var(--accent-ink); font-size: 17px; }
.acc-email { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { color: var(--muted); flex: none; }

.acc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: var(--card); border: 0; border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); color: var(--text); font: inherit;
}
button.stat { cursor: pointer; }
button.stat:hover { box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.stat-n { font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-l { font-size: 12px; color: var(--muted); line-height: 1.25; }

.pay-due-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: var(--accent); color: var(--accent-text); border: 0; border-radius: 18px; padding: 14px 16px;
}
.pay-due-btn .row-sub { color: inherit; opacity: 0.85; }
.pay-due-cta { background: var(--accent-text); color: var(--accent-ink); border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: 14px; }

.group { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.group-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 4px; font-size: 15px; font-weight: 700; }
.see-all { border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; }
#account .row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 16px; text-align: left;
  background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; text-decoration: none; position: relative;
}
#account .row + .row::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; border-top: 1px solid var(--line); }
#account .row:hover { background: color-mix(in srgb, var(--tile) 60%, transparent); }
#account .row.empty-row { cursor: default; }
#account .row.empty-row:hover { background: none; }
.row-icon { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--tile); color: var(--text); }
#account .row .shop-badge { width: 36px; height: 36px; font-size: 14px; }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub.warn { color: var(--accent-ink); font-weight: 600; }
.row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.row-amt { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
#account .row.danger, #account .row.danger .row-icon { color: var(--error); }

/* Sub-page forms: inputs grouped in cards, label above value, like the Shop app's address form */
.fields { display: flex; flex-direction: column; gap: 14px; }
.field-card { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.field { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; position: relative; cursor: text; }
.field + .field::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--line); }
.field span { font-size: 12px; font-weight: 600; color: var(--muted); }
.field input { border: 0; background: none; padding: 2px 0 4px; font-size: 16px; color: var(--text); outline: none; min-width: 0; }
.field:focus-within span { color: var(--accent-ink); }
.field input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.form-msg { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--muted); text-align: center; }
.btn-primary.block { width: 100%; height: 50px; font-size: 16px; }

/* Orders page inside the panel */
#account .orders { gap: 12px; }
#account .order { background: var(--card); border: 0; border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px; }
.panel-head h2:focus { outline: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avatar { background: hsl(var(--h) 30% 28%); color: hsl(var(--h) 60% 86%); } }
:root[data-theme="dark"] .avatar { background: hsl(var(--h) 30% 28%); color: hsl(var(--h) 60% 86%); }

/* Composer: one line of text is exactly button height (22px line + 7px padding x2 = 36px), so the placeholder, the
   camera button and Send share one centre line; longer text grows upward with the buttons on the last line. */
.composer .row { align-items: flex-end; }
.composer textarea { line-height: 22px; padding: 7px 4px; min-height: 36px; align-self: flex-end; }
.composer .row.multi textarea { align-self: stretch; }

/* Camera button menu */
.photo-pick { position: relative; flex: none; }
.photo-menu {
  position: absolute; left: -2px; bottom: calc(100% + 12px); z-index: 5; min-width: 196px;
  background: var(--card); border-radius: 16px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.08), 0 12px 32px rgb(22 32 42 / 0.18);
  padding: 6px; display: flex; flex-direction: column; transform-origin: bottom left; animation: menu-in 0.14s ease-out;
}
.photo-menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(6px) scale(0.97); } }
.photo-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.photo-menu button:hover, .photo-menu button:focus-visible { background: var(--tile); outline: none; }
.photo-menu svg { color: var(--muted); flex: none; }

/* Desktop camera sheet */
dialog.camera { width: min(640px, calc(100vw - 32px)); border: 0; border-radius: 20px; background: var(--card); padding: 12px; }
dialog.camera[open] { display: flex; flex-direction: column; gap: 12px; }
dialog.camera video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: #000; }
.cam-msg { margin: 8px 4px; color: var(--muted); }
.cam-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cam-actions button:disabled { opacity: 0.5; cursor: default; }

/* Header: the account is its avatar (the same initial circle as the Account sheet) */
.avatar-btn { position: relative; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; display: grid; }
.avatar-btn .avatar { width: 35px; height: 35px; font-size: 15px; }
.avatar-btn:hover .avatar { filter: brightness(0.96); }
.avatar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#openAccount.needs::after { position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; margin: 0; border: 2px solid var(--bg); }

/* Seller rows open in place */
.seller { display: block; }
.seller-main {
  width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px;
}
.seller-main:hover { background: color-mix(in srgb, var(--tile) 50%, transparent); }
.seller-main:hover .seller-name { text-decoration: none; }
.seller-info { display: flex; flex-direction: column; min-width: 0; }
.seller-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seller-price { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.seller-chev { color: var(--muted); display: grid; transition: transform 0.18s ease; }
.seller.open .seller-chev { transform: rotate(180deg); }
.seller.open { background: color-mix(in srgb, var(--tile) 35%, transparent); }
.seller-more { padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 12px; animation: menu-in 0.16s ease-out; }
.seller-more[hidden] { display: none; }
.more-top { display: flex; gap: 12px; align-items: flex-start; }
.more-img { width: 84px; height: 84px; flex: none; border-radius: 12px; background: #FFFFFF; overflow: hidden; display: grid; place-items: center; }
.more-img img { width: 100%; height: 100%; object-fit: contain; }
.more-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; font-size: 13px; flex: 1; min-width: 0; }
.more-facts dt { color: var(--muted); }
.more-facts dd { margin: 0; overflow-wrap: anywhere; }
.more-save { margin: 0; border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 600; }
.more-save.up { background: var(--save-bg); color: var(--save); }
.more-save.down { background: var(--tile); color: var(--muted); }
.more-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.more-actions.single { grid-template-columns: 1fr; }
.seller-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.seller-store { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seller-name .tag { flex: none; margin: 0; }

/* Question card: model, colour and size in one place */
.qcard { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.qgroup { display: flex; flex-direction: column; gap: 8px; }
.qlabel { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.chip-option[aria-pressed="true"], .chip-option[aria-checked="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.qsize { display: flex; gap: 8px; }
.qselect { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: 12px;
  padding: 10px 34px 10px 14px; font: inherit; font-size: 15px; cursor: pointer; min-width: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%235C6670' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.qselect.sys { flex: none; }
.qselect:not(.sys) { flex: 1; }
.qhint { margin: 0; font-size: 13px; color: var(--muted); }
.qremember { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; }
.qremember input { width: 16px; height: 16px; accent-color: var(--accent); }
.qcard .btn-primary:disabled { opacity: 0.45; cursor: default; }
/* Colour choices with the shop's own photo: a square picture over the name, in a grid that wraps on a phone. The
   picture's box is fixed (no jump while it loads); the picked one is filled like a text chip and ringed. */
.options.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.chip-option.swatch { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0;
  padding: 5px 5px 7px; border-radius: 14px; font-size: 12.5px; line-height: 1.25; text-align: center; }
.chip-option.swatch img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #FFFFFF; }
.swatch-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; min-height: 2.5em; }
.chip-option.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
.chip-option.swatch[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--text); color: var(--card); box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); }

/* My sizes page */
.field-row { cursor: default; }
.inline-pair { display: flex; gap: 10px; align-items: center; }
.inline-pair select { border: 0; background: var(--tile); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 15px; color: var(--text); }
.inline-pair input { flex: 1; }
.options.compact { gap: 6px; padding: 4px 0 6px; }
.options.compact .chip-option { padding: 6px 12px; font-size: 14px; box-shadow: none; }

/* Hotel-style totals: the price you pay, with the breakdown one tap away */
.price-details { font-size: 13px; color: var(--muted); }
.price-details summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.price-details summary::-webkit-details-marker { display: none; }
.price-details summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; transition: transform 0.15s; }
.price-details[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.price-details[open] { grid-column: 1 / -1; }
.fees { margin-top: 8px; background: var(--tile); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.fee-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.fee-line span:first-child { color: var(--muted); }
.fee-line.total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; font-weight: 700; font-size: 14px; }
.fee-line.total span:first-child { color: var(--text); }
.fee-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
.seller-price-col { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.seller-price-col .incl { font-size: 11px; color: var(--muted); margin-right: 22px; }
.seller-more .fees { margin-top: 0; }
.best > .price-details { grid-column: 1 / -1; margin-top: -4px; }
.best > .price-details summary { font-weight: 600; color: var(--accent-ink); }

/* My sizes: shoe size switch and chips */
.size-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.seg-switch { display: inline-flex; background: var(--tile); border-radius: 999px; padding: 3px; gap: 2px; }
.seg-switch button { border: 0; background: none; border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg-switch button[aria-checked="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.size-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
.size-scroll::-webkit-scrollbar { display: none; }
.size-chip { flex: none; min-width: 48px; height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; scroll-snap-align: center; font-variant-numeric: tabular-nums; }
.size-chip:hover { border-color: var(--accent); }
.size-chip[aria-checked="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Question titles: links as chips, long questions smaller, buy requests as an item card */
/* While a check works its question shimmers; then the heading morphs into the product's name (app.js morphTitle). */
.msg.user .q.thinking {
  background: linear-gradient(100deg, var(--text) 0 40%, var(--accent) 50%, var(--text) 60% 100%);
  background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: q-shimmer 2.2s linear infinite;
}
.msg.user .q.morphing { color: var(--accent); -webkit-text-fill-color: currentColor; }
.msg.user .q.thinking.morphing { -webkit-text-fill-color: transparent; }
@keyframes q-shimmer { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.msg.user .q-asked { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .msg.user .q.thinking { animation: none; background: none; color: var(--text); } }
.msg.user .q.long { font-size: 19px; line-height: 1.35; letter-spacing: -0.01em; }
.link-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px 3px 8px; margin: 2px 0;
  font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.buy-item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 10px;
  background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 10px 14px 10px 10px; color: var(--text); text-decoration: none;
}
.buy-pic { width: 56px; height: 56px; border-radius: 12px; background: #FFFFFF; display: grid; place-items: center; overflow: hidden; }
.buy-pic img { width: 100%; height: 100%; object-fit: contain; }
.buy-text { display: flex; flex-direction: column; min-width: 0; }
.buy-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buy-shop { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buy-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.buy-item { width: 100%; box-sizing: border-box; }
.link-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Choices in an agent question */
.ask-options { margin: 10px 0 4px; }
.ask-options .chip-option { min-width: 56px; justify-content: center; }
.chip-option.unavailable { opacity: 0.45; text-decoration: line-through; cursor: not-allowed; box-shadow: none; }
.ask.answered .ask-options .chip-option:not([aria-pressed="true"]) { opacity: 0.4; pointer-events: none; }
.retry-btn { margin-top: 10px; }
.best-actions.single { grid-template-columns: 1fr; }
.more-note { margin: 0; font-size: 13px; color: var(--muted); background: var(--tile); border-radius: 12px; padding: 8px 12px; }

/* Home (Shop-style): white cards, a dark "Jump back in" tile row, a grid of example searches, start rows */
.empty { gap: 16px; padding-top: 3vh; }
.hello h1 { font-size: clamp(28px, 7vw, 38px); }
.hello p { font-size: 16px; }
.home-card { background: var(--card); border-radius: 24px; box-shadow: var(--shadow); padding: 18px 16px 12px; }
.home-title { margin: 0 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.try-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-bottom: 4px; }
.try {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: var(--text); font: inherit; font-size: 14px; font-weight: 500;
}
.try svg { color: var(--muted); flex: none; }
.try span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.try:hover { border-color: var(--accent); }
.start-list { display: flex; flex-direction: column; }
.start-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--text); font: inherit; width: 100%; }
.start-row + .start-row { border-top: 1px solid var(--line); }
.start-icon { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--accent-text); }
.start-row:nth-child(2) .start-icon { background: #C2603A; }
.start-row:nth-child(3) .start-icon { background: #2F7A5B; }
.start-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.start-title { font-weight: 700; font-size: 16px; }
.start-sub { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-row:hover .start-title { color: var(--accent-ink); }
.home-fine { text-align: center; }

.jump { background: #16202A; color: #FFFFFF; border-radius: 24px; padding: 14px 0 12px; box-shadow: var(--shadow); overflow: hidden; }
.jump[hidden] { display: none; }
.jump-head { padding: 0 16px 10px; font-size: 13px; color: rgb(255 255 255 / 0.75); }
.jump-tiles { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 4px; scroll-snap-type: x proximity; scrollbar-width: none; }
.jump-tiles::-webkit-scrollbar { display: none; }
.jump-tile { flex: none; width: 128px; display: flex; flex-direction: column; gap: 6px; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; scroll-snap-align: start; }
.jump-pic { position: relative; width: 128px; height: 128px; border-radius: 16px; background: #FFFFFF; display: grid; place-items: center; overflow: hidden; color: #16202A; font-size: 36px; font-weight: 700; }
.jump-pic img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.jump-price { position: absolute; top: 8px; left: 8px; background: rgb(22 32 42 / 0.72); color: #FFFFFF; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jump-name { font-size: 13px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jump-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px 2px; background: none; border: 0; color: #FFFFFF; font: inherit; font-size: 22px; font-weight: 700; cursor: pointer; }
.jump-arrow { width: 32px; height: 32px; border-radius: 50%; background: rgb(255 255 255 / 0.16); display: grid; place-items: center; font-size: 16px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jump { background: #0E161E; border: 1px solid var(--line); } }
.start-row { border-radius: 0; position: relative; }
.start-row + .start-row { border-top: 0; }
.start-row + .start-row::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; border-top: 1px solid var(--line); }

/* Approve and submit: solid green so the one action that places the order is unmistakable */
:root { --go: #1C7A4A; --go-text: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --go: #3FA06D; --go-text: #FFFFFF; } }
:root[data-theme="dark"] { --go: #3FA06D; --go-text: #FFFFFF; }
.ask-actions .primary { background: var(--go); color: var(--go-text); border-color: transparent; }
.ask-actions .primary:hover { filter: brightness(1.08); }
.ask.answered .ask-actions .primary { opacity: 0.5; }

/* Order card */
.order-card { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
/* The order a WhatsApp link opened (/orders/<ref>). */
.order-card.spotlight { animation: spotlight 2.4s ease-out both; }
@keyframes spotlight { 0%, 40% { box-shadow: 0 0 0 3px var(--accent), var(--shadow); } 100% { box-shadow: var(--shadow); } }
.oc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oc-shop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.oc-shop .shop-badge { width: 36px; height: 36px; font-size: 14px; }
.oc-shop-text { display: flex; flex-direction: column; min-width: 0; }
.oc-shop-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-shop-sub { font-size: 12px; color: var(--muted); }
.order-card .status { flex: none; font-size: 12px; font-weight: 600; text-align: right; }
.oc-item { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; background: var(--bg); border-radius: 14px; padding: 8px; }
.oc-pic { width: 64px; height: 64px; flex: none; border-radius: 12px; background: #FFFFFF; overflow: hidden; display: grid; place-items: center; }
.oc-pic img { width: 100%; height: 100%; object-fit: contain; }
.oc-pic.small { width: 36px; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.oc-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oc-item-name { font-weight: 600; font-size: 15px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.oc-item-sub { font-size: 13px; color: var(--muted); }
.oc-item-price { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; flex: none; }
a.oc-item:hover .oc-item-name { color: var(--accent-ink); }
.oc-track { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; counter-reset: step; }
.oc-track li { position: relative; padding-top: 14px; font-size: 10.5px; line-height: 1.2; color: var(--muted); text-align: center; }
.oc-track li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 999px; background: var(--tile); }
.oc-track li.done::before { background: var(--go); }
.oc-track li.now::before { background: linear-gradient(90deg, var(--go) 50%, var(--tile) 50%); }
.oc-track li.now { color: var(--text); font-weight: 700; }
.oc-due { border-radius: 14px; background: color-mix(in srgb, var(--accent) 10%, var(--card)); border: 1px solid var(--accent); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.oc-due-kind { font-size: 12px; color: var(--muted); }
.oc-code { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--go); border: 1px dashed var(--go); border-radius: 999px; padding: 3px 10px; }
.oc-due-lines { margin: 6px 0 2px; padding: 0; list-style: none; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.oc-due-lines li { display: flex; justify-content: space-between; gap: 12px; }
.oc-due-note { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.oc-due-lines .amt { white-space: nowrap; color: var(--text, inherit); font-variant-numeric: tabular-nums; }
.oc-due pre { margin: 4px 0 0; white-space: pre-wrap; font: inherit; font-size: 13px; }
.pay-card { margin-top: 12px; max-width: 520px; }
.pay-card.pay-done { border-color: var(--line, var(--accent)); }
.oc-pay { margin-top: 6px; align-self: stretch; text-align: center; background: var(--accent); color: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 15px; text-decoration: none; }
.oc-paid { font-size: 13px; color: var(--muted); }
.oc-next { margin: 0; font-size: 13px; color: var(--muted); }
.oc-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; font-variant-numeric: tabular-nums; }
.oc-shop { flex: 1 1 auto; }
.order-card .status { max-width: 46%; white-space: normal; line-height: 1.25; padding: 4px 10px; border-radius: 12px; }
/* History cards open their conversation */
.wl-card { cursor: pointer; transition: transform 0.12s ease; }
.wl-card:hover { transform: translateY(-2px); }
.wl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wl-again { display: block; text-align: center; }
.tab[aria-current="page"] svg circle { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.thread-summary { display: flex; flex-direction: column; gap: 10px; }
.thread-summary .buy-item { margin-top: 0; }
.thread-summary .buy-btn { align-self: flex-start; }
.wl-img { overflow: hidden; }
.wl-img img { position: absolute; inset: 0; }
.save-note.home-cheaper { color: var(--text); background: var(--tile); border-radius: 12px; padding: 8px 12px; font-weight: 500; font-size: 14px; }

/* Progress: collapsed by default, showing only the latest step on one line */
.progress .latest { position: relative; height: 22px; overflow: hidden; margin: 6px 0 0 2px; }
.progress.open .latest, .progress.done .latest { display: none; }
.latest-line { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); white-space: nowrap; animation: line-in 0.28s cubic-bezier(.2,.8,.2,1); }
.latest-line .s-icon { color: var(--muted); display: inline-flex; flex: none; }
.latest-line .l-text { overflow: hidden; text-overflow: ellipsis; min-width: 0;
  background: linear-gradient(90deg, var(--text) 0%, var(--text) 40%, var(--muted) 50%, var(--text) 60%, var(--text) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer-text 2.2s linear infinite; }
.latest-line.out { animation: line-out 0.26s ease forwards; }
@keyframes line-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes line-out { to { transform: translateY(-100%); opacity: 0; } }
@keyframes shimmer-text { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ---------- Micro-interactions ---------- */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); }

/* Arrivals: new messages, then the parts of an answer one after another */
.msg.enter { animation: rise 0.42s var(--ease-out) both; }
.msg.enter .result > * { animation: rise 0.48s var(--ease-out) both; }
.msg.enter .result > *:nth-child(2) { animation-delay: 60ms; }
.msg.enter .result > *:nth-child(3) { animation-delay: 120ms; }
.msg.enter .result > *:nth-child(4) { animation-delay: 180ms; }
.msg.enter .result > *:nth-child(n+5) { animation-delay: 240ms; }
.msg.enter .sellers .seller { animation: rise 0.4s var(--ease-out) both; }
.msg.enter .sellers .seller:nth-child(1) { animation-delay: 220ms; }
.msg.enter .sellers .seller:nth-child(2) { animation-delay: 270ms; }
.msg.enter .sellers .seller:nth-child(3) { animation-delay: 320ms; }
.msg.enter .sellers .seller:nth-child(4) { animation-delay: 370ms; }
.msg.enter .sellers .seller:nth-child(n+5) { animation-delay: 420ms; }
.msg.enter .best { animation: pop-in 0.5s var(--spring) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }

/* Savings bars grow in */
.save-fill { transition: width 0.9s var(--ease-out) 0.15s; }

/* Steps slide in as they arrive when the list is open */
.progress.open .steps li:last-child { animation: rise 0.3s var(--ease-out); }

/* Press feedback */
button, .chip-option, .try, .start-row, .wl-card, .jump-tile, .link-chip, .buy-item, .oc-item, .btn-primary, .btn-dark { transition: transform 0.14s var(--ease-out), background-color 0.15s, border-color 0.15s, box-shadow 0.2s, color 0.15s, opacity 0.2s; }
button:active:not(:disabled), .chip-option:active, .btn-primary:active, .btn-dark:active, .link-chip:active, .buy-item:active, .oc-item:active { transform: scale(0.97); }
.try:hover, .jump-tile:hover .jump-pic { transform: translateY(-2px); }
.jump-pic { transition: transform 0.2s var(--ease-out); }
.wl-card:active, .jump-tile:active { transform: scale(0.98); }
.chip-option[aria-pressed="true"], .chip-option[aria-checked="true"], .size-chip[aria-checked="true"], .seg button[aria-selected="true"] { animation: pick 0.32s var(--spring); }
@keyframes pick { 0% { transform: scale(0.92); } 100% { transform: scale(1); } }

/* Tabs: the icon bounces when its tab opens */
.tab[aria-current="page"] svg { animation: tab-bounce 0.45s var(--spring); }
@keyframes tab-bounce { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-3px) scale(1.12); } 100% { transform: none; } }

/* Send: the arrow lifts off */
.send.launch svg { animation: launch 0.45s var(--ease-out); }
@keyframes launch { 0% { transform: none; } 45% { transform: translateY(-14px); opacity: 0; } 46% { transform: translateY(12px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Expanding pieces */
.seller-chev, .price-details summary::after { transition: transform 0.22s var(--ease-out); }
.price-details[open] .fees { animation: rise 0.28s var(--ease-out); }
.photo-menu { animation: menu-in 0.18s var(--spring); }

/* History and home cards arrive in turn */
.wl-grid .wl-card { animation: rise 0.4s var(--ease-out) both; }
.wl-grid .wl-card:nth-child(2) { animation-delay: 40ms; } .wl-grid .wl-card:nth-child(3) { animation-delay: 80ms; }
.wl-grid .wl-card:nth-child(4) { animation-delay: 120ms; } .wl-grid .wl-card:nth-child(n+5) { animation-delay: 160ms; }
.empty:not([hidden]) > * { animation: rise 0.5s var(--ease-out) both; }
.empty > *:nth-child(2) { animation-delay: 60ms; } .empty > *:nth-child(3) { animation-delay: 120ms; } .empty > *:nth-child(4) { animation-delay: 180ms; } .empty > *:nth-child(5) { animation-delay: 240ms; }
.jump-tile { animation: rise 0.4s var(--ease-out) both; }
.jump-tile:nth-child(2) { animation-delay: 50ms; } .jump-tile:nth-child(3) { animation-delay: 100ms; } .jump-tile:nth-child(n+4) { animation-delay: 150ms; }

/* Toast */
.flash { animation: toast 2.6s var(--ease-out) both; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 8px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }

/* Confetti (order approved) and sparkles (a big saving) */
.confetti, .sparkle { position: fixed; z-index: 100; pointer-events: none; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; animation: fly 0.9s var(--ease-out) forwards; }
.sparkle { width: 6px; height: 6px; border-radius: 50%; }
@keyframes fly { 0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(var(--rot)) scale(0.6); opacity: 0; } }

/* Skeleton shimmer */
.wl-card.skeleton { background: linear-gradient(100deg, var(--tile) 30%, color-mix(in srgb, var(--tile) 50%, var(--card)) 50%, var(--tile) 70%); background-size: 200% 100%; animation: sheen 1.2s linear infinite; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Shop rows: details open and close with the same height + fade animation */
.seller-more-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease-out); }
.seller.open .seller-more-wrap { grid-template-rows: 1fr; }
.seller-more-wrap > .seller-more { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: opacity 0.22s ease, transform 0.3s var(--ease-out), padding 0.3s var(--ease-out); padding-top: 0; padding-bottom: 0; animation: none; }
.seller.open .seller-more-wrap > .seller-more { opacity: 1; transform: none; padding-top: 2px; padding-bottom: 14px; }
.seller { transition: background-color 0.25s; }
.seller-main:focus { outline: none; }
.seller-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 12px; }

/* Jump back in: an endless left-moving row when there are 3+ products */
.jump-tiles.marquee { overflow: hidden; padding: 0 0 4px 16px; scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.jump-track { display: flex; gap: 10px; width: max-content; animation: marquee var(--dur, 16s) linear infinite; }
.jump-track .jump-tile { animation: none; }
.jump-tiles.marquee:hover .jump-track, .jump-tiles.marquee:focus-within .jump-track, .jump-tiles.marquee:active .jump-track { animation-play-state: paused; }
/* Moves by exactly one copy (half the track, including the gap that joins the copies) so the loop is seamless. */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 5px)); } }
@media (prefers-reduced-motion: reduce) {
  .jump-tiles.marquee { overflow-x: auto; }
  .jump-track { animation: none !important; }
  .jump-track .jump-tile[aria-hidden="true"] { display: none; }
}

/* Sign-up: first and last name side by side */
.name-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.name-pair[hidden] { display: none; }
.name-pair input { padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); min-width: 0; font: inherit; }
#signin .sheet > * { animation: rise 0.3s var(--ease-out) both; }


/* ======================================================================================================
   Acid Mode (brand direction, 18 Oct 2026, docs/branding): a dark navy app, cobalt for actions, neon lime for
   savings. One layer over everything above: the tokens, then the few components that had their own colours.
   ====================================================================================================== */
@font-face { font-family: "Instrument Sans"; src: url("/fonts/InstrumentSans.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
:root:root:root {
  --canvas: #10172B; --soft: #202944; --raised: #26304F; --lime: #B6FF00; --on-lime: #182300; --cobalt: #2348FF;
  --bg: var(--canvas); --surface: #172038; --card: var(--soft); --tile: #2A3457; --user-bubble: #2A3457;
  --text: #F2F5FF; --muted: #B6C1DC; --line: #394360; --error: #FF8A7A;
  --accent: var(--cobalt); --accent-text: #FFFFFF; --accent-ink: #9AB2EF;
  --save: var(--lime); --save-bg: var(--lime); --save-track: rgb(24 35 0 / 0.16);
  --go: var(--lime); --go-text: var(--on-lime);
  --shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 10px 30px rgb(0 0 0 / 0.28);
  --r-card: 20px; --radius: 14px;
  color-scheme: dark;
}
body { background: var(--canvas); }
::selection { background: var(--lime); color: var(--on-lime); }

/* Header: the two-tone mark (lime half-sun on a cobalt horizon) and a bold wordmark */
.top { background: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgb(255 255 255 / 0.06); }
.brand .mark { width: 34px; height: 18px; }
.wordmark { font-weight: 700; letter-spacing: -0.04em; font-size: 21px; color: var(--text); }
.chip { background: var(--soft); border-color: var(--line); color: var(--text); }

/* Text links and accents read on navy */
a, .link, .see-all, .price-details summary, .row-sub.warn, .acc-name.placeholder { color: #9AB2EF; }
.answer a { color: #9AB2EF; }

/* Savings in the spotlight: lime panel, dark ink */
.save { background: var(--lime); color: var(--on-lime); }
.save .save-amt, .save .save-pct, .save .save-sub, .save .save-label, .save .save-val { color: var(--on-lime); }
.save .save-pct { background: rgb(24 35 0 / 0.12); }
.save .is-best .save-fill { background: var(--on-lime); }
.save .is-other .save-fill { background: rgb(24 35 0 / 0.35); }
.save .is-other .save-label, .save .is-other .save-val { opacity: 0.7; }
.save-note { color: var(--lime); }
.save-note.home-cheaper { background: var(--raised); color: var(--text); }
.more-save.up { background: var(--lime); color: var(--on-lime); }
.more-save.down { background: var(--raised); color: var(--muted); }
.jump-price { background: var(--lime); color: var(--on-lime); font-weight: 700; }
.oc-track li.done::before { background: var(--lime); }
.oc-track li.now::before { background: linear-gradient(90deg, var(--lime) 50%, var(--tile) 50%); }
.seller-name .tag, .tag { background: var(--lime); color: var(--on-lime); }

/* Buttons: cobalt primary, light secondary, lime for the approve step */
.btn-primary, .primary, .send, .buy-btn { background: var(--cobalt); color: #FFFFFF; border-color: transparent; }
.btn-dark { background: var(--text); color: var(--canvas); }
.buy-btn:hover { background: #3A5BFF; color: #FFFFFF; }
.ask-actions .primary { background: var(--lime); color: var(--on-lime); }
.chip-option, .try, .seg button, .size-chip { background: var(--soft); border-color: var(--line); color: var(--text); }
.chip-option[aria-pressed="true"], .chip-option[aria-checked="true"], .size-chip[aria-checked="true"], .seg button[aria-selected="true"] { background: var(--text); color: var(--canvas); border-color: var(--text); }
.seg-switch button[aria-checked="true"] { background: var(--cobalt); color: #FFFFFF; }

/* Cards, inputs and sheets on navy */
.composer { background: linear-gradient(to top, var(--canvas) 70%, transparent); }
.composer .row { background: var(--soft); border-color: var(--line); }
.composer .row:focus-within { border-color: #9AB2EF; }
.tabbar { background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top-color: rgb(255 255 255 / 0.06); }
.tab[aria-current="page"] { color: var(--lime); }
.tab[aria-current="page"] svg path, .tab[aria-current="page"] svg circle { fill: rgb(182 255 0 / 0.14); }
dialog { background: var(--surface); border-color: var(--line); color: var(--text); }
dialog::backdrop { background: rgb(5 8 18 / 0.66); }
dialog.panel { background: var(--canvas); }
.round-btn { background: var(--soft); color: var(--text); }
.sheet input, .sheet select, .field input, .wl-search input, .name-pair input, .qselect, textarea { color: var(--text); }
.sheet input, .sheet select, .name-pair input, .qselect { background: var(--canvas); border-color: var(--line); }
.progress .steps { border-left-color: var(--line); }
.pill { background: var(--soft); }
.fees, .good-to-know, .more-note { background: var(--raised); }
.oc-item { background: var(--surface); }
.status { background: var(--raised); color: var(--text); }
.status.s-invoiced, .status.s-shipping_invoiced { background: var(--lime); color: var(--on-lime); }
.photo-menu { background: var(--raised); }
.photo-menu button:hover, .photo-menu button:focus-visible { background: var(--soft); }
.flash { background: var(--lime); color: var(--on-lime); }

/* "Jump back in": the brand's cobalt campaign card */
.jump { background: var(--cobalt); border: 0; }
.jump-head { color: rgb(255 255 255 / 0.8); }
.jump-arrow { background: rgb(255 255 255 / 0.18); }
.start-icon { background: var(--cobalt); }
.start-row:nth-child(2) .start-icon { background: #FF6A3D; }
.start-row:nth-child(3) .start-icon { background: var(--lime); color: var(--on-lime); }

/* Initials and logos: tinted on navy; product photos stay on white */
.shop-badge { background: hsl(var(--h, 220) 35% 26%); color: hsl(var(--h, 220) 70% 86%); }
.avatar { background: hsl(var(--h, 220) 35% 30%); color: hsl(var(--h, 220) 70% 88%); }
.shop-badge.has-logo { background: #FFFFFF; }
.best-media:has(img), .best-media { background: #F3F4F8; }
.best-media img { mix-blend-mode: normal; }
.wl-img.none { background: hsl(var(--h) 35% 26%); color: hsl(var(--h) 70% 86%); }
.wl-del { background: rgb(16 23 43 / 0.82); color: #FFFFFF; }
.skeleton, .wl-card.skeleton { --tile: #232C4A; }

/* Sign in (Shop-style): a full sheet, centred mark and title, pill fields, one big Continue, six code boxes */
dialog.auth { width: min(440px, 100vw); max-width: none; height: fit-content; border: 0; border-radius: 28px; background: var(--canvas); padding: 0; box-shadow: 0 30px 80px rgb(0 0 0 / 0.5); }
@media (max-width: 560px) { dialog.auth { width: 100vw; height: 100dvh; max-height: none; margin: 0; inset: 0; border-radius: 0; } }
.auth-sheet { display: flex; flex-direction: column; gap: 12px; padding: 18px 24px 28px; padding-top: max(18px, env(safe-area-inset-top)); box-sizing: border-box; }
@media (max-width: 560px) { .auth-sheet { min-height: 100dvh; } }
.auth-top { display: flex; justify-content: center; padding: 4px 0 8px; }
.auth-site { font-weight: 700; letter-spacing: -0.04em; font-size: 15px; color: var(--muted); }
.auth-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin: 22px 0 14px; }
.auth-mark { width: 72px; height: 38px; margin-bottom: 14px; animation: sunrise 0.8s var(--spring) both; }
@keyframes sunrise { from { transform: translateY(10px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
.auth-hero h2 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.035em; color: var(--text); }
.auth-sub { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.45; }
.auth-sub strong { color: var(--text); font-weight: 600; }
.pill-input { width: 100%; box-sizing: border-box; height: 54px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--soft); color: var(--text); font: inherit; font-size: 17px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.pill-input::placeholder { color: var(--muted); }
.pill-input:focus { border-color: #9AB2EF; box-shadow: 0 0 0 4px rgb(35 72 255 / 0.25); }
.pill-input:disabled { opacity: 0.7; }
.name-pair { gap: 10px; }
.auth-btn { height: 54px; border: 0; border-radius: 999px; background: var(--cobalt); color: #FFFFFF; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; margin-top: 4px; }
.auth-btn:hover { background: #3A5BFF; }
.auth-btn:disabled { opacity: 0.6; cursor: default; }
.auth-btn[hidden] { display: none; }
/* WhatsApp sign-in: "or", the outlined WhatsApp button, and the country code + mobile number row. */
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; margin: 2px 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-or[hidden] { display: none; }
.auth-btn.auth-alt { margin-top: 0; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--soft); color: var(--text); border: 1.5px solid var(--line); }
.auth-btn.auth-alt:hover { background: var(--soft); border-color: #25D366; }
.auth-btn.auth-alt[hidden] { display: none; }
a.auth-btn { text-decoration: none; box-sizing: border-box; }
.phone-row { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.phone-row[hidden] { display: none; }
.phone-row .pill-input { min-width: 0; }
.cc-select { width: auto; padding: 0 14px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.auth-fine a { color: var(--text); font-weight: 600; }
.auth-link { align-self: center; color: var(--text); font-weight: 600; text-decoration: none; font-size: 15px; padding: 6px; }
.auth-link:hover { text-decoration: underline; }
.auth-fine { margin: 6px 0 0; text-align: center; font-size: 13px; line-height: 1.45; color: var(--muted); }
.auth-fine[hidden] { display: none; }
#signinError { text-align: center; color: var(--error); margin: 0; }
/* Six boxes over one real input */
.otp { position: relative; display: flex; justify-content: center; margin: 6px 0 4px; cursor: text; }
.otp[hidden] { display: none; }
.otp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; caret-color: transparent; }
.otp-boxes { display: flex; align-items: center; gap: 8px; pointer-events: none; }
.otp-boxes i { width: 8px; height: 2px; background: var(--line); border-radius: 2px; }
.otp-boxes span { width: 46px; height: 56px; border-radius: 14px; background: var(--soft); border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 24px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; transition: border-color 0.15s, transform 0.15s var(--spring); }
.otp-boxes span.filled { border-color: #9AB2EF; animation: pick 0.25s var(--spring); }
.otp-boxes span.caret { border-color: var(--lime); box-shadow: 0 0 0 3px rgb(182 255 0 / 0.18); }
.otp.shake { animation: shake 0.4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (max-width: 360px) { .otp-boxes span { width: 40px; height: 50px; } }
/* Signing you in */
.name-pair input.pill-input { height: 54px; padding: 0 20px; border-radius: 999px; background: var(--soft); border: 1.5px solid var(--line); font-size: 17px; }

/* Appearance: light version of Acid Mode (Account > Settings > Appearance: Light, or Auto on a light system) */
:root:root:root[data-theme="light"] {
  --canvas: #F7F8FC; --soft: #FFFFFF; --raised: #EEF1FA; --surface: #FFFFFF; --card: #FFFFFF; --tile: #E9EDF8; --user-bubble: #E9EDF8;
  --text: #10172B; --muted: #5A6482; --line: #DDE2EF; --error: #C2412D; --accent-ink: #2348FF;
  --shadow: 0 1px 2px rgb(16 23 43 / 0.06), 0 10px 28px rgb(16 23 43 / 0.08);
  color-scheme: light;
}
:root[data-theme="light"] .top { border-bottom-color: var(--line); }
:root[data-theme="light"] .tabbar { border-top-color: var(--line); }
:root[data-theme="light"] .shop-badge, :root[data-theme="light"] .wl-img.none { background: hsl(var(--h, 220) 60% 92%); color: hsl(var(--h, 220) 45% 32%); }
:root[data-theme="light"] .avatar { background: hsl(var(--h, 220) 60% 90%); color: hsl(var(--h, 220) 45% 30%); }
:root[data-theme="light"] .shop-badge.has-logo { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="light"] .tab[aria-current="page"] { color: var(--cobalt); }
:root[data-theme="light"] .tab[aria-current="page"] svg path, :root[data-theme="light"] .tab[aria-current="page"] svg circle { fill: rgb(35 72 255 / 0.12); }
:root[data-theme="light"] .flash { background: var(--text); color: #FFFFFF; }
:root[data-theme="light"] .save-note { color: #2D7A00; }
:root[data-theme="light"] .pill-input:focus, :root[data-theme="light"] .composer .row:focus-within { border-color: var(--cobalt); }
:root[data-theme="light"] dialog::backdrop { background: rgb(16 23 43 / 0.4); }
:root[data-theme="light"] .otp-boxes span.caret { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgb(35 72 255 / 0.18); }
:root[data-theme="light"] .jump-head { color: rgb(255 255 255 / 0.85); }
@media (prefers-color-scheme: light) {
  :root:root:root[data-theme="system"] {
  --canvas: #F7F8FC; --soft: #FFFFFF; --raised: #EEF1FA; --surface: #FFFFFF; --card: #FFFFFF; --tile: #E9EDF8; --user-bubble: #E9EDF8;
  --text: #10172B; --muted: #5A6482; --line: #DDE2EF; --error: #C2412D; --accent-ink: #2348FF;
  --shadow: 0 1px 2px rgb(16 23 43 / 0.06), 0 10px 28px rgb(16 23 43 / 0.08);
  color-scheme: light;
  }
:root[data-theme="system"] .top { border-bottom-color: var(--line); }
:root[data-theme="system"] .tabbar { border-top-color: var(--line); }
:root[data-theme="system"] .shop-badge, :root[data-theme="system"] .wl-img.none { background: hsl(var(--h, 220) 60% 92%); color: hsl(var(--h, 220) 45% 32%); }
:root[data-theme="system"] .avatar { background: hsl(var(--h, 220) 60% 90%); color: hsl(var(--h, 220) 45% 30%); }
:root[data-theme="system"] .shop-badge.has-logo { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="system"] .tab[aria-current="page"] { color: var(--cobalt); }
:root[data-theme="system"] .tab[aria-current="page"] svg path, :root[data-theme="system"] .tab[aria-current="page"] svg circle { fill: rgb(35 72 255 / 0.12); }
:root[data-theme="system"] .flash { background: var(--text); color: #FFFFFF; }
:root[data-theme="system"] .save-note { color: #2D7A00; }
:root[data-theme="system"] .pill-input:focus, :root[data-theme="system"] .composer .row:focus-within { border-color: var(--cobalt); }
:root[data-theme="system"] dialog::backdrop { background: rgb(16 23 43 / 0.4); }
:root[data-theme="system"] .otp-boxes span.caret { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgb(35 72 255 / 0.18); }
:root[data-theme="system"] .jump-head { color: rgb(255 255 255 / 0.85); }
}
.appearance-row { cursor: default; }
.appearance-row:hover { background: none !important; }
.appearance-row .seg-switch button { padding: 6px 10px; }

/* Nav bar: Chat, History, Region (round flag + currency), Account (avatar) */
.tabbar { justify-content: space-around; gap: 0; padding-left: 8px; padding-right: 8px; }
.tab { flex: 1 1 0; max-width: 120px; }
.flag-circle { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none;
  box-shadow: 0 0 0 1.5px var(--line); background: var(--soft); }
.flag-circle img { width: 100%; height: 100%; object-fit: cover; }
.flag-circle.emoji { font-size: 22px; line-height: 1; }
.flag-circle svg { width: 24px; height: 24px; }
#openSettings:hover .flag-circle { box-shadow: 0 0 0 2px var(--accent-ink); }
#whereLabel { max-width: none; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tab.avatar-btn { position: relative; display: flex; border-radius: 12px; }
.tab.avatar-btn .avatar { width: 24px; height: 24px; font-size: 11px; }
#openAccount.needs::after { top: 3px; right: calc(50% - 16px); width: 9px; height: 9px; border: 2px solid var(--canvas); }
.tab.avatar-btn[hidden] { display: none; }

/* Guests: the Account tab is "Sign in"; the sign-in sheet can be closed */
.tab.avatar-btn.guest .avatar { background: var(--soft); color: var(--text); box-shadow: 0 0 0 1.5px var(--line); }
.auth-top { position: relative; }
.auth-close { position: absolute; left: 0; top: -2px; }
.auth-close[hidden] { display: none; }

/* Region sheet and the list picker (Shop-style, replaces dropdowns) */
dialog.region-sheet { width: min(440px, calc(100vw - 24px)); border: 0; border-radius: 24px; background: var(--canvas); }
dialog.region-sheet .sheet { gap: 14px; padding: 20px; }
.sheet-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-title-row h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.pick-group { background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.pick-row, .picker-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; position: relative; }
.pick-row + .pick-row::before, .picker-row + .picker-row::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; border-top: 1px solid var(--line); }
.pick-row:hover, .picker-row:hover { background: color-mix(in srgb, var(--tile) 60%, transparent); }
.pick-row .flag-circle, .picker-row .flag-circle { width: 32px; height: 32px; }
.pick-row .flag-circle.emoji, .picker-row .flag-circle.emoji { font-size: 28px; }
.pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick-label { font-size: 13px; color: var(--muted); }
.pick-value { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row .pick-label { order: -1; }
.ccy-badge { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--tile); color: var(--text); font-size: 13px; font-weight: 700; }
.pick-check { color: var(--accent-ink); display: grid; }
.picker-row[aria-selected="true"] .pick-value { color: var(--accent-ink); }
dialog.picker { width: min(440px, 100vw); height: min(640px, calc(100dvh - 48px)); max-height: none; border: 0; border-radius: 24px; background: var(--canvas); padding: 0; }
dialog.picker[open] { display: flex; flex-direction: column; animation: sheet-up 0.28s var(--ease-out); }
@media (max-width: 560px) { dialog.picker { width: 100vw; height: 86dvh; margin: auto 0 0; border-radius: 24px 24px 0 0; } }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.picker-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 14px 14px 8px; }
.picker-head h2 { margin: 0; text-align: center; font-size: 17px; font-weight: 700; }
.picker-search { margin: 4px 16px 10px; }
.picker-search[hidden] { display: none; }
.picker-list { flex: 1; overflow-y: auto; margin: 0 12px 16px; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); }
.picker-empty { padding: 16px; text-align: center; }

/* Question card size: switch in the label row, chips below (no dropdowns) */
.qlabel.with-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qlabel .seg-switch { text-transform: none; letter-spacing: 0; }
.qsizes .size-chip[aria-pressed="true"] { background: var(--text); color: var(--canvas); border-color: var(--text); animation: pick 0.3s var(--spring); }
.sheet-title-row h2:focus { outline: none; }
dialog.picker { max-width: none; max-height: none; }

/* Nav bar: every tab has the same 24px icon box, gap and padding (the account tab no longer inherits the old
   header-button reset), so labels line up. */
.tabbar .tab { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 6px 8px; border-radius: 12px; }
.tabbar .tab > svg, .tabbar .tab > .flag-circle, .tabbar .tab > .avatar { width: 24px; height: 24px; flex: none; }
.tabbar .tab > svg { padding: 1px; box-sizing: border-box; }
.tabbar .tab > span:last-of-type { line-height: 16px; }
.tab.avatar-btn { padding: 6px 8px; border-radius: 12px; display: flex; }
.tab.avatar-btn .avatar { width: 24px; height: 24px; font-size: 11px; display: grid; place-items: center; }
.tab.avatar-btn.guest .avatar svg { width: 14px; height: 14px; }
#openAccount.needs::after { top: 4px; right: calc(50% - 15px); }

/* Switches instead of checkboxes */
input.switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--tile); position: relative; cursor: pointer; flex: none; margin: 0; transition: background-color 0.2s; box-shadow: inset 0 0 0 1px var(--line); }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform 0.22s var(--spring); }
input.switch:checked { background: var(--cobalt); box-shadow: none; }
input.switch:checked::after { transform: translateX(18px); }
input.switch:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.qremember { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text); }

/* Any remaining dropdown (admin filters): the same pill style as the rest, no browser look */
select { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background-color: var(--soft); color: var(--text); border-radius: 999px;
  padding: 8px 36px 8px 14px; font: inherit; font-size: 14px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%238A94B0' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
select:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* "Hot in Hong Kong" */
.home-title { display: flex; align-items: center; gap: 8px; }
.hot-pill { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--lime); color: var(--on-lime); border-radius: 999px; padding: 3px 8px; }
.hot-pill[hidden] { display: none; }

/* Install row on the home screen */
.start-row.get-app .start-icon { background: var(--text); color: var(--canvas); }
.start-row.get-app[hidden] { display: none; }
.start-list .pwa-status { margin: 4px 0 8px 58px; }
.haptics-row { cursor: pointer; }
.haptics-row:hover { background: none !important; }

/* iPhone "Add to Home Screen" card (Safari has no install prompt) */
.ios-install { position: fixed; left: 12px; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 12px;
  background: var(--card); color: var(--text); border-radius: 18px; padding: 12px 12px 12px 14px; box-shadow: 0 14px 40px rgb(0 0 0 / 0.35);
  max-width: 480px; margin: 0 auto; animation: sheet-up 0.35s var(--ease-out); }
.ios-install img { border-radius: 10px; flex: none; }
.ios-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.ios-install-text strong { color: var(--text); font-size: 15px; }
.ios-install-text svg { vertical-align: -3px; color: var(--accent-ink); }
.ios-install button { border: 0; background: var(--tile); color: var(--text); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; flex: none; }

/* App shell pinned to the whole page area: the chat scrolls inside <main>, the tab bar keeps its safe-area padding.
   The installed iPhone app's bottom gap came from the see-through status bar, not from this (see index.html). */
body:has(#tabbar) { position: fixed; inset: 0; height: auto; min-height: 0; overflow: hidden; overscroll-behavior: none; }
.tabbar { padding-bottom: max(8px, env(safe-area-inset-bottom)); }

/* "Add your address first" note when a purchase is waiting for it */
.page-lead.callout { background: var(--lime); color: var(--on-lime); border-radius: 14px; padding: 12px 14px; font-weight: 600; }

/* "Where should we send it?" card in the chat */
.addr-card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.addr-head { display: flex; gap: 12px; align-items: flex-start; }
.addr-head h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.addr-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.addr-pin { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--lime); color: var(--on-lime); }
.addr-card .field-card { box-shadow: none; background: var(--surface); border: 1px solid var(--line); }
.addr-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.addr-actions button { height: 48px; }
.addr-error { margin: 0; }
.addr-done { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); background: var(--card); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); animation: pop-in 0.35s var(--spring); }
.addr-done .addr-pin { width: 28px; height: 28px; }
.msg.leaving { animation: line-out 0.25s ease forwards; }

/* ======================================================================================================
   Alive: tab changes slide, a pill follows the current tab, sheets glide in and out, the sun rises.
   ====================================================================================================== */
.tabbar { position: sticky; view-transition-name: tabbar; }
.tab:active > svg, .tab:active > .flag-circle, .tab:active > .avatar { transform: scale(0.88); transition: transform 0.1s; }

/* Chat <-> History. View transitions where the browser has them (the tab bar stays put), a slide-in otherwise. */
#chat, #wishlist { view-transition-name: pane; }
.composer { view-transition-name: composer; }
.top { view-transition-name: top; }
::view-transition-old(tabbar) { display: none; }
::view-transition-new(tabbar) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; }
::view-transition-old(pane) { animation: pane-out 0.22s var(--ease-out) both; }
::view-transition-new(pane) { animation: pane-in 0.36s var(--ease-out) both; }
html[data-dir="back"]::view-transition-old(pane) { animation-name: pane-out-back; }
html[data-dir="back"]::view-transition-new(pane) { animation-name: pane-in-back; }
::view-transition-old(composer) { animation: composer-out 0.18s ease both; }
@keyframes composer-out { to { opacity: 0; transform: translateY(12px); } }
::view-transition-new(composer) { animation: rise 0.3s var(--ease-out) both; }
@keyframes pane-out { to { opacity: 0; transform: translateX(-28px); } }
@keyframes pane-in { from { opacity: 0; transform: translateX(36px); } }
@keyframes pane-out-back { to { opacity: 0; transform: translateX(28px); } }
@keyframes pane-in-back { from { opacity: 0; transform: translateX(-36px); } }
.pane-enter { animation: pane-in 0.36s var(--ease-out); }
html[data-dir="back"] .pane-enter { animation-name: pane-in-back; }

/* Sheets and panels glide in and out, the backdrop fades. */
dialog { transition: opacity 0.22s ease, transform 0.32s var(--ease-out), overlay 0.32s allow-discrete, display 0.32s allow-discrete; }
dialog:not([open]) { opacity: 0; transform: translateY(28px) scale(0.98); }
@starting-style { dialog[open] { opacity: 0; transform: translateY(28px) scale(0.98); } }
dialog.picker[open] { animation: none; }
@media (max-width: 560px) {
  dialog.panel:not([open]) { transform: translateX(40px); }
  @starting-style { dialog.panel[open] { transform: translateX(40px); } }
}
dialog::backdrop { opacity: 0; transition: opacity 0.25s ease, overlay 0.32s allow-discrete, display 0.32s allow-discrete; }
dialog[open]::backdrop { opacity: 1; }
@starting-style { dialog[open]::backdrop { opacity: 0; } }

/* The logo's sun rises on load (while a check runs it swaps for the Swell loop, under Logo motion). */
.brand .mark path:first-child { transform-box: fill-box; transform-origin: 50% 100%; animation: sun-up 0.9s var(--spring) 0.1s both; }
@keyframes sun-up { from { transform: translateY(90%); } to { transform: none; } }
.brand .wordmark { animation: rise 0.5s var(--ease-out) 0.25s both; }

/* Send wakes up when there's text; the hint in the empty composer fades between products. */
.composer .send { transition: transform 0.25s var(--spring), opacity 0.2s, box-shadow 0.3s; }
.composer:not(.ready) .send:not(.stop) { opacity: 0.55; transform: scale(0.92); }
.composer.ready .send:not(.stop) { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cobalt) 25%, transparent); }
#input::placeholder { transition: opacity 0.22s ease; }
#input.hint-out::placeholder { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .brand .mark path:first-child, .brand .wordmark { animation: none !important; }
}
:root[data-theme="light"] .wl-card.skeleton { --tile: #E4E8F2; }
@media (prefers-color-scheme: light) { :root[data-theme="system"] .wl-card.skeleton, :root:not([data-theme]) .wl-card.skeleton { --tile: #E4E8F2; } }
.order-card .status { max-width: none; white-space: nowrap; line-height: 1.3; border-radius: 999px; }
.oc-head > .oc-shop { min-width: 0; }

/* Placing an order: the progress line sparkles instead of listing browser steps. */
.msg.magic .progress-head .dot { background: var(--lime); box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 60%, transparent); animation: magic-glow 1.6s ease-out infinite; }
.msg.magic .latest-line .s-icon { color: var(--lime); animation: twinkle 1.4s ease-in-out infinite; }
:root[data-theme="light"] .msg.magic .latest-line .s-icon { color: var(--cobalt); }
.msg.magic .latest-line .l-text {
  background: linear-gradient(90deg, var(--text) 0%, var(--text) 40%, var(--lime) 50%, var(--text) 60%, var(--text) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer-text 2.4s linear infinite; }
:root[data-theme="light"] .msg.magic .latest-line .l-text { background-image: linear-gradient(90deg, var(--text) 0%, var(--text) 40%, var(--cobalt) 50%, var(--text) 60%, var(--text) 100%); }
.msg.magic .steps .s-icon { color: var(--lime); }
@keyframes magic-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.25) rotate(20deg); opacity: 0.7; } }
@keyframes shimmer-text { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .msg.magic .latest-line .l-text { animation: none; color: var(--text); background: none; } }

/* iPhone haptics: a see-through label for one hidden switch over every tappable thing (see haptics in app.js).
   The host keeps its own position if it has one, and contains the cover's stacking so it never covers anything else. */
#hapticSwitch { position: fixed; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0.01; pointer-events: none; z-index: -1; }
:where(.has-haptic) { position: relative; isolation: isolate; }
.haptic-cover { position: absolute; inset: 0; z-index: 5; border-radius: inherit; cursor: inherit; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.no-haptics .haptic-cover, :disabled > .haptic-cover { display: none; }
/* With the haptic covers, a tap doesn't focus the button, so a closing picker hands focus back to the sheet itself:
   no ring on the sheet container (controls inside keep theirs). */
dialog:focus, dialog:focus-visible { outline: none; }
/* History refreshed or filtered in place: no second entrance animation */
.wl-grid.quiet .wl-card { animation: none; }

/* Staff trying a draft playbook version in the chat */
.try-banner { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 50; background: var(--lime); color: var(--on-lime);
  border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 13px; font-weight: 600; display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow); white-space: nowrap; }
.try-banner button { border: 0; border-radius: 999px; padding: 4px 10px; background: var(--on-lime); color: var(--lime); font: inherit; cursor: pointer; }

/* Desktop: the tabs float as a liquid-glass pill on the left side, over the page (the window keeps the phone layout's
   header, chat and composer, centred). The glass: a blurred, saturated see-through fill, a bright rim and top
   highlight, a soft sheen across it and a shadow under it. The selected tab is coloured, never filled. */
:root { --glass-fill: rgb(40 50 80 / 0.42); --glass-rim: rgb(255 255 255 / 0.22); --glass-low: rgb(255 255 255 / 0.08);
  --glass-shadow: 0 18px 40px rgb(0 0 0 / 0.45), 0 3px 10px rgb(0 0 0 / 0.3); --glass-hover: rgb(255 255 255 / 0.1); }
/* Light (Appearance: Light, or Auto on a light system): a brighter, frostier glass. */
:root:root:root[data-theme="light"] { --glass-fill: rgb(255 255 255 / 0.52); --glass-rim: rgb(255 255 255 / 0.75); --glass-low: rgb(255 255 255 / 0.3);
  --glass-shadow: 0 18px 40px rgb(16 23 43 / 0.14), 0 3px 10px rgb(16 23 43 / 0.08); --glass-hover: rgb(255 255 255 / 0.45); }
@media (prefers-color-scheme: light) { :root:root:root[data-theme="system"] { --glass-fill: rgb(255 255 255 / 0.52); --glass-rim: rgb(255 255 255 / 0.75);
  --glass-low: rgb(255 255 255 / 0.3); --glass-shadow: 0 18px 40px rgb(16 23 43 / 0.14), 0 3px 10px rgb(16 23 43 / 0.08); --glass-hover: rgb(255 255 255 / 0.45); } }
@media (min-width: 1024px) {
  .top { border-bottom-color: transparent; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .tabbar {
    position: fixed; left: 20px; top: 50%; bottom: auto; transform: translateY(-50%); z-index: 20;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; width: 78px; padding: 10px 7px;
    border: 0; border-radius: 40px; background: var(--glass-fill);
    backdrop-filter: blur(22px) saturate(185%); -webkit-backdrop-filter: blur(22px) saturate(185%);
    box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 0 0 1px var(--glass-low), inset 0 -10px 18px -12px var(--glass-rim), var(--glass-shadow);
  }
  .tabbar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(155deg, rgb(255 255 255 / 0.5) 0%, rgb(255 255 255 / 0) 34%, rgb(255 255 255 / 0) 72%, rgb(255 255 255 / 0.16) 100%); opacity: 0.8; }
  .tabbar .tab { position: relative; flex: none; max-width: none; padding: 10px 2px 8px; border-radius: 30px; font-size: 11px; gap: 4px;
    transition: background 0.2s, color 0.2s, transform 0.25s var(--spring, ease); }
  .tabbar .tab:hover { background: var(--glass-hover); }
  .tabbar .tab:active { transform: scale(0.94); }
  .tabbar .tab > span:last-of-type { line-height: 14px; }
  .tabbar #openSettings { margin-top: 10px; }
  .tabbar #openSettings::before { content: ""; position: absolute; top: -7px; left: 14px; right: 14px; height: 1px; background: var(--glass-low); }
  main#chat, .wishlist { padding-left: 120px; padding-right: 120px; }
  .composer { padding-left: 120px; padding-right: 120px; padding-bottom: 24px; }
  main#chat > *, .composer .row, .attachments { max-width: 820px; }
  .msg.user .q { font-size: 32px; }
  .msg.user .q.long { font-size: 22px; }
}

/* Answered questions fold to the choice made: one line, the question muted and the answer as a pill with a tick. */
.ask.answered { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-color: var(--line); animation: fold-in 0.28s var(--ease-out); }
.ask.answered .answer { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); }
.ask.answered .answer > * { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask.answered .answer > :not(:first-child), .ask.answered .ask-options, .ask.answered .ask-sizes { display: none; }
.ask.answered .reply, .answered-pill { flex: none; margin: 0; display: inline-flex; align-items: center; gap: 6px; max-width: 60%;
  padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ask.answered .reply::before, .answered-pill::before { content: "✓"; font-size: 12px; opacity: 0.8; }
.answered-line { display: flex; margin-top: 4px; animation: fold-in 0.28s var(--ease-out); }
.answered-pill { max-width: 100%; }
@keyframes fold-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .ask.answered, .answered-line { animation: none; } }

/* The logo sits in the middle of the header on every screen. */
.top { justify-content: center; padding-left: 16px; padding-right: 16px; }

/* A calm aura behind everything: soft lime, cobalt and sky light drifting slowly (about 20 s a sweep), so the page
   feels alive without moving anything you read. While a check runs (body.busy) a gentle glow breathes in the middle,
   and fades away when the answer lands. */
:root { --aura-a: rgb(35 72 255 / 0.30); --aura-b: rgb(182 255 0 / 0.09); --aura-c: rgb(0 190 255 / 0.13); --aura-busy: rgb(120 150 255 / 0.20); }
:root:root:root[data-theme="light"] { --aura-a: rgb(35 72 255 / 0.17); --aura-b: rgb(182 255 0 / 0.40); --aura-c: rgb(0 190 255 / 0.20); --aura-busy: rgb(35 72 255 / 0.13); }
@media (prefers-color-scheme: light) { :root:root:root[data-theme="system"] { --aura-a: rgb(35 72 255 / 0.17); --aura-b: rgb(182 255 0 / 0.40); --aura-c: rgb(0 190 255 / 0.20); --aura-busy: rgb(35 72 255 / 0.13); } }
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
body::before {
  inset: -30vmax;
  background:
    radial-gradient(30vmax 26vmax at 30% 32%, var(--aura-a), transparent 70%),
    radial-gradient(26vmax 28vmax at 72% 26%, var(--aura-c), transparent 70%),
    radial-gradient(32vmax 24vmax at 58% 76%, var(--aura-b), transparent 70%);
  animation: aura-drift 60s ease-in-out infinite;
}
body::after {
  inset: 0; opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(42vmax 30vmax at 50% 42%, var(--aura-busy), transparent 72%);
  animation: aura-breathe 5s ease-in-out infinite;
}
body.busy::after { opacity: 1; }
/* The layer is far bigger than the screen, so a small turn swings the light a long way across it. */
@keyframes aura-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  33% { transform: translate3d(7%, -5%, 0) rotate(28deg) scale(1.12); }
  66% { transform: translate3d(-6%, 5%, 0) rotate(-22deg) scale(0.96); }
}
@keyframes aura-breathe { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }
/* The bars let the aura show through (frosted), instead of covering it with flat colour. */
.composer { background: linear-gradient(to top, color-mix(in srgb, var(--canvas) 80%, transparent) 45%, transparent); }
/* The header is frosted at every width, and the panes scroll up behind it: they start under the header and pad
   their content down by its height (--top-h, measured in app.js), so what scrolls past is blurred, not cut off. */
:root { --top-h: 57px; }
main#chat { margin-top: calc(-1 * var(--top-h)); padding-top: calc(var(--top-h) + 16px); scroll-padding-top: var(--top-h); }
.wishlist { margin-top: calc(-1 * var(--top-h)); padding-top: calc(var(--top-h) + 20px); scroll-padding-top: var(--top-h); }
/* The bar is solid: bluer at the top, deepening to navy. Below it, a soft band (blurred and fading out) lets content
   dissolve as it scrolls up, so the fade sits under the bar instead of over the logo. No divider line. */
.top {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cobalt) 34%, var(--canvas)) 0%, color-mix(in srgb, var(--cobalt) 12%, var(--canvas)) 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 0; background-repeat: no-repeat;
}
.top::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cobalt) 12%, var(--canvas)) 0%, transparent 100%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

/* ======================================================================================================
   Logo motion: looping SVGs in /motion (made by scripts/make-logo-motion.py, all shown in docs/branding/motion.html).
   Each rests on the plain mark between moves and freezes on it with Reduce Motion; the swaps below fall back too.
   ====================================================================================================== */
/* Header: the sun bobs on a rolling horizon while a check runs. */
.brand .mark-live { display: none; width: 34px; height: 19px; border-radius: 0; }
body.busy .brand .mark-live { display: block; }
body.busy .brand .mark { display: none; }
/* Home: the tide goes out over the greeting. History, empty: rings sound for prices. */
.hello-mark { display: block; width: 90px; height: 48px; margin: 0 0 16px; }
.wl-sonar { width: 132px; height: 75px; margin-bottom: 6px; }
/* Progress line: the sun's reflection glints while it looks (an order keeps its lime sparkle). */
.progress-head .glint { flex: none; width: 22px; height: 16px; }
.progress:not(.done) .dot { display: none; }
.progress.done .glint, .msg.magic .glint { display: none; }
.msg.magic .progress:not(.done) .dot { display: block; }
/* Savings: the one-colour mark hops once on a fresh result. */
.save-lead { display: inline-flex; align-items: center; gap: 8px; }
.save-mark { flex: none; width: 30px; height: 26px; object-fit: contain; object-position: 50% 100%; margin-top: -6px; }
/* Signing in: the sun sets and rises. */
.auth-rise { display: none; width: 72px; height: 38px; margin-bottom: 14px; }
dialog.auth.busy .auth-rise { display: block; }
dialog.auth.busy .auth-mark { display: none; }
@media (prefers-reduced-motion: reduce) {
  body.busy .brand .mark-live, .progress-head .glint, dialog.auth.busy .auth-rise { display: none; }
  body.busy .brand .mark, dialog.auth.busy .auth-mark { display: block; }
  .progress:not(.done) .dot { display: block; }
}