/* some time with — visitor frontend styles (v0.7.0).
 * Base ported from design/reference/screens.css (the class contract);
 * colors/fonts/radii/motion come ONLY from tokens.css via var(--stw-*):
 * no hex values and no font-family names live in this file.
 * Two fixes vs screens.css while porting:
 *   - .voice--sassy uses var(--stw-rose-tint)/var(--stw-rose-text)
 *     (screens.css hard-coded those two hex values).
 *   - .row--head uses var(--stw-subtle) (screens.css used a hex with
 *     no token).
 * The screens.css :root token block and its P-bot motion block are
 * NOT repeated here — tokens.css (loaded first) defines both.
 * The reference's .m (mobile column) rules are converted into the
 * @media (max-width: 899px) block below for the single-DOM layout.
 */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--stw-cream);color:var(--stw-ink);font-family:var(--stw-font-ui);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font-family:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--stw-green);outline-offset:3px}
.on-ink :focus-visible{outline-color:var(--stw-mint)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* v0.7.1 (F1/F8): the hidden attribute always wins. Several
 * components set display:flex on the very elements JS toggles
 * via hidden (intake-form branch fields, previous-booking
 * details, the booked view's invite row), and an author
 * display rule beats the UA's [hidden] rule — so those
 * elements stayed visible in a real browser no matter what
 * the JS did: both form branches showed at once, collapsed
 * previous-booking details never collapsed, and tapping a
 * card header appeared to do nothing. One central rule, per
 * the change protocol, instead of per-screen patches. */
[hidden]{display:none!important}
.pbot{display:block;flex:0 0 auto}

/* ---- type ---- */
.prefix{font-family:var(--stw-font-prefix);font-style:italic;font-weight:400;letter-spacing:0}
.name{font-family:var(--stw-font-display);font-weight:700;letter-spacing:-.045em}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--stw-graphite);margin:0}
.on-ink .eyebrow{color:var(--stw-mist)}
.h1{margin:0;font-family:var(--stw-font-display);font-size:44px;font-weight:700;letter-spacing:-.045em;line-height:1}
.h2{margin:0;font-family:var(--stw-font-display);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.h3{margin:0;font-family:var(--stw-font-display);font-size:18px;font-weight:700;letter-spacing:-.02em}
.time{font-family:var(--stw-font-display);font-weight:700;letter-spacing:-.04em;line-height:1}
.body{font-size:16px;line-height:1.5;font-weight:500}
.small{font-size:13px;line-height:1.45;font-weight:500;color:var(--stw-graphite)}
.on-ink .small{color:var(--stw-mist)}
.dot{color:var(--stw-green)} .on-ink .dot{color:var(--stw-mint)}

/* ---- lockup (live text version for UI; use SVG files for marketing) ---- */
.lockup{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.lockup .prefix{font-size:20px;color:var(--stw-text-secondary)}
.lockup .name{font-size:22px;margin-left:5px}
.on-ink .lockup .prefix{color:var(--stw-mist)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--stw-radius-pill);border:0;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.btn:hover{opacity:.9}
.btn--primary{background:var(--stw-ink);color:var(--stw-white)}
.on-ink .btn--primary{background:var(--stw-cream);color:var(--stw-ink)}
.btn--secondary{background:transparent;color:var(--stw-ink);border:1.5px solid var(--stw-ink)}
.btn--mint{background:var(--stw-mint);color:var(--stw-ink)}
.btn--quiet{background:transparent;color:var(--stw-text-secondary);font-weight:600;text-decoration:underline;text-underline-offset:4px;padding:0 10px}
.btn--soft{background:var(--stw-subtle);color:var(--stw-text-secondary);font-weight:600}
.btn--sm{min-height:38px;padding:0 14px;font-size:13px}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;cursor:default}
.icon-btn{width:56px;height:56px;border-radius:50%;border:0;background:var(--stw-ink);color:var(--stw-white);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.icon-btn:hover{opacity:.9}
.icon-btn[hidden]{display:none}

/* ---- chips ---- */
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--stw-radius-pill);font-size:12px;font-weight:700;white-space:nowrap;border:0}
.chip i{width:7px;height:7px;border-radius:50%;display:inline-block}
.chip--amber{background:var(--stw-amber-tint);color:var(--stw-amber-text)} .chip--amber i{background:var(--stw-amber-dark)}
.chip--green{background:var(--stw-green-tint);color:var(--stw-green-text)} .chip--green i{background:var(--stw-green)}
.chip--coral{background:var(--stw-coral-tint);color:var(--stw-coral-text)} .chip--coral i{background:var(--stw-coral-dark)}
.chip--subtle{background:var(--stw-subtle);color:var(--stw-text-secondary)}
.tier--vip{background:var(--stw-ink);color:var(--stw-cream)}
.tier--friend{background:var(--stw-green-tint);color:var(--stw-green-text)}
.tier--colleague{background:var(--stw-violet-tint);color:var(--stw-violet-text)}
.tier--new{background:var(--stw-subtle);color:var(--stw-text-secondary)}
.voice--professional{background:var(--stw-subtle);color:var(--stw-text-secondary)}
.voice--casual{background:var(--stw-mint);color:var(--stw-ink)}
.voice--sassy{background:var(--stw-rose-tint);color:var(--stw-rose-text)}
.voice--flirty{background:var(--stw-ink);color:var(--stw-cream)}
.status-pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:var(--stw-radius-pill);font-size:12px;font-weight:600;white-space:nowrap}
.status-pill i{width:8px;height:8px;border-radius:50%;background:var(--stw-mint)}
.status-pill .pill-dot--mint{background:var(--stw-mint)}
.status-pill .pill-dot--amber{background:var(--stw-amber)}
.status-pill .pill-dot--coral{background:var(--stw-coral)}
.on-ink .status-pill{background:var(--stw-panel);border:1px solid var(--stw-panel-line);color:var(--stw-cream)}

/* ---- surfaces ---- */
.card{background:var(--stw-white);border:1px solid var(--stw-stone);border-radius:var(--stw-radius-card);padding:24px}
.card--sm{border-radius:var(--stw-radius-card-sm);padding:16px 18px}
.on-ink .card,.card--ink{background:var(--stw-panel);border-color:var(--stw-panel-line);color:var(--stw-cream)}
.note{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:var(--stw-radius-card-sm);background:var(--stw-ink);color:var(--stw-cream)}
.note p{margin:0;font-size:15px;line-height:1.5;font-weight:500}

/* ---- chat ---- */
.chat{display:flex;flex-direction:column;gap:12px}
.msg{display:flex;align-items:flex-end;gap:10px;max-width:82%}
.bubble{padding:13px 18px;font-size:16px;line-height:1.5;font-weight:500;border-radius:22px 22px 22px 6px;background:var(--stw-cream);word-break:break-word}
.bubble--me{align-self:flex-end;border-radius:22px 22px 6px 22px;background:var(--stw-ink);color:var(--stw-white);font-weight:600;max-width:82%}
.bubble--wide{display:flex;flex-direction:column;gap:14px;max-width:640px}
.quick{display:flex;flex-wrap:wrap;gap:8px;padding-left:42px}
.composer{display:flex;gap:10px;align-items:center}
.composer input{flex:1;min-width:0;height:56px;padding:0 22px;border-radius:var(--stw-radius-pill);border:1.5px solid var(--stw-stone);background:var(--stw-white);font-size:16px;font-weight:500}
.composer input::placeholder{color:var(--stw-graphite)}

/* ---- slots ---- */
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.slot{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:72px;padding:12px 14px;border-radius:var(--stw-radius-slot);text-align:left;background:var(--stw-white);border:1.5px solid var(--stw-stone)}
.slot .d{font-size:12px;font-weight:600;color:var(--stw-graphite)}
.slot .time{font-size:20px}
.slot[aria-pressed="true"]{background:var(--stw-ink);border-color:var(--stw-ink);color:var(--stw-white)}
.slot[aria-pressed="true"] .d{color:var(--stw-mist)}
.slot .flag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--stw-amber-text)}
.slot .flag i{width:7px;height:7px;border-radius:50%;background:var(--stw-amber)}

/* ---- forms ---- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.label{font-size:13px;font-weight:700}
.field .hint{font-weight:500;color:var(--stw-graphite)}
.input{height:48px;padding:0 14px;border-radius:var(--stw-radius-control);border:1.5px solid var(--stw-stone);background:var(--stw-white);font-size:15px;font-weight:500;width:100%}
textarea.input{height:auto;padding:12px 14px;line-height:1.5;resize:vertical}
.input::placeholder{color:var(--stw-graphite)}
input::placeholder,textarea::placeholder{color:var(--stw-graphite);opacity:1}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{height:38px;padding:0 14px;border-radius:var(--stw-radius-pill);border:1.5px solid var(--stw-stone);background:var(--stw-white);font-size:13px;font-weight:600;color:var(--stw-text-secondary)}
.seg button[aria-pressed="true"]{background:var(--stw-ink);border-color:var(--stw-ink);color:var(--stw-white);font-weight:700}
.tabs{display:flex;gap:4px;padding:4px;border-radius:var(--stw-radius-pill);background:var(--stw-white);border:1px solid var(--stw-stone)}
.tabs button{height:40px;padding:0 18px;border-radius:var(--stw-radius-pill);border:0;background:transparent;font-size:14px;font-weight:600;color:var(--stw-text-secondary)}
.tabs button[aria-selected="true"]{background:var(--stw-ink);color:var(--stw-white);font-weight:700}

/* ---- admin shell (desktop) — ported primitives, shared contract ---- */
.admin{display:flex;min-height:100vh}
.side{flex:0 0 272px;background:var(--stw-ink);color:var(--stw-cream);padding:28px 18px;display:flex;flex-direction:column;gap:28px}
.side .lockup{padding:0 8px;white-space:nowrap}
.side .lockup .prefix{font-size:17px}
.side .lockup .name{font-size:20px}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 14px;border-radius:var(--stw-radius-control);color:var(--stw-mist);text-decoration:none;font-size:15px;font-weight:600}
.nav a[aria-current="page"]{background:var(--stw-cream);color:var(--stw-ink);font-weight:700}
.badge{min-width:22px;height:22px;padding:0 6px;border-radius:var(--stw-radius-pill);background:var(--stw-amber);color:var(--stw-ink);font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.side .status{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;background:var(--stw-panel);border:1px solid var(--stw-panel-line)}
.side .status a{font-size:13px;font-weight:700;color:var(--stw-mint);text-decoration:none}
.main{flex:1;min-width:0;padding:40px 48px;display:flex;flex-direction:column;gap:24px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px}
.page-head .lead{display:flex;flex-direction:column;gap:8px}
.page-head .aside{max-width:380px;font-size:14px;line-height:1.5;font-weight:500;color:var(--stw-graphite)}

/* request card */
.req{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.req .when{flex:0 0 150px;display:flex;flex-direction:column;gap:3px}
.req .when .time{font-size:34px}
.req .what{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:8px}
.req .acts{display:flex;align-items:center;gap:8px}
.list{border-radius:var(--stw-radius-card-sm);background:var(--stw-white);border:1px solid var(--stw-stone);overflow:hidden}
.row{display:grid;gap:16px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--stw-divider);font-size:14px}
.row:last-child{border-bottom:0}
.row--head{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--stw-graphite);padding-top:12px;padding-bottom:12px;background:var(--stw-subtle)}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.initial{width:34px;height:34px;border-radius:50%;background:var(--stw-subtle);display:inline-flex;align-items:center;justify-content:center;font-family:var(--stw-font-display);font-weight:700;font-size:14px;flex:0 0 auto}
.who b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who div span{display:block;font-size:12px;color:var(--stw-graphite);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv{display:flex;flex-direction:column;gap:2px}
.kv .k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stw-graphite)}
.kv .v{font-size:15px;font-weight:700}
.keywords{display:flex;flex-wrap:wrap;gap:6px}
.kw{height:28px;padding:0 10px;border-radius:var(--stw-radius-pill);background:var(--stw-subtle);font-size:12px;font-weight:600;display:inline-flex;align-items:center}
.asks{display:flex;flex-direction:column;gap:6px}
.asks span{font-size:14px;font-weight:500;padding-left:14px;position:relative}
.asks span::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--stw-green)}
.bar{position:relative;height:10px;border-radius:5px;background:var(--stw-subtle)}
.bar span{position:absolute;top:0;bottom:0;border-radius:5px;background:var(--stw-ink)}
.voices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.voice-sample{padding:12px 14px;border-radius:16px;font-size:13px;line-height:1.45;font-weight:500}
.setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--stw-divider)}
.setting:last-child{border-bottom:0}

/* ================= visitor app layout ================= */
.front{display:flex;height:100dvh;min-height:0}
.hero{flex:0 0 520px;background:var(--stw-ink);color:var(--stw-cream);padding:32px 48px 40px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;overflow:hidden}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero-url{font-size:13px;line-height:1.45;font-weight:600;color:var(--stw-mist)}
.hero-mid{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.hero-bot{display:flex}
.hero-title{margin:0;display:flex;flex-direction:column}
.hero-title .prefix{font-size:52px;line-height:1;color:var(--stw-mist)}
.hero-title .name{font-size:clamp(72px,8vw,118px);letter-spacing:-.055em;line-height:.9;color:var(--stw-cream)}
.hero-intro{margin:0;max-width:400px;font-size:18px;line-height:1.5;font-weight:500;color:var(--stw-mist)}
.hero-made{font-size:13px;line-height:1.45;font-weight:500;color:var(--stw-mist-2)}
.hero-made .prefix{font-size:15px;color:var(--stw-mist)}
.hero .lockup{display:none}
.convo{flex:1;min-width:0;min-height:0;padding:32px 40px;display:flex;flex-direction:column;gap:16px;overflow:hidden}

/* summary / panel card */
.panel-card{display:flex;flex-direction:column;gap:12px}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.panel-head .h3{margin-right:auto}
.panel-head .chip{height:32px;padding:0 12px}
.panel-head .chip[hidden]{display:none}
.lockup-bot{display:flex}
.chat-head>span:first-child{display:flex}
.summary-rows{margin:0;display:flex;flex-wrap:wrap;gap:12px 28px}
.summary-rows>div{display:flex;flex-direction:column;gap:2px}
.summary-rows dt{font-size:12px;font-weight:600;color:var(--stw-graphite)}
.summary-rows dd{margin:0;font-size:15px;font-weight:700;word-break:break-word}
.summary-edit{align-self:flex-start}
.panel-slot{font-size:15px;font-weight:700}
.panel-slot:empty,.panel-status:empty{display:none}
.panel-status{font-size:13px;line-height:1.45;font-weight:500;color:var(--stw-graphite)}
.panel[hidden]{display:none}

/* previous bookings (inside the summary card) */
.sidebar-previous{max-height:22rem;overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px}
.sidebar-previous-heading{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--stw-graphite)}
.sidebar-prev-card{max-width:100%;width:100%}
.sidebar-prev-header{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;cursor:pointer;padding:0;font:inherit;text-align:left;min-height:44px}
.sidebar-prev-title{font-family:var(--stw-font-display);font-size:18px;font-weight:700;letter-spacing:-.02em}
.sidebar-prev-status{margin-left:auto}
.sidebar-prev-chevron{font-weight:700;color:var(--stw-graphite)}
.sidebar-prev-basic{font-size:13px;line-height:1.45;font-weight:500;color:var(--stw-graphite)}
.sidebar-prev-details{display:flex;flex-direction:column;gap:4px}

/* chat card */
.chat-card{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:28px;padding:28px}
.chat-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--stw-divider)}
.chat-head .small{color:var(--stw-graphite)}
.thread{flex:1;min-height:0;overflow-y:auto;padding-top:16px}
.msg.bot,.msg.user{width:100%}
.msg.bot{align-self:flex-start}
.msg.user{align-self:flex-end;justify-content:flex-end}
.msg-avatar{flex:0 0 auto;display:flex}
.msg .bubble a{font-weight:700}
.bubble--error{background:var(--stw-coral-tint);color:var(--stw-coral-text)}
.waiting-status .bubble{color:var(--stw-graphite);font-size:13px}
.typing-dots{letter-spacing:.2em;color:var(--stw-graphite)}
.slot-offer{max-width:100%}
.slot-lead{font-size:16px;line-height:1.5;font-weight:500}
.slot-buttons{display:contents}
.confirm-card,.ui-field,.ui-form-block{align-self:flex-start;width:100%;max-width:640px}
.chips,.quick-row{display:flex;flex-wrap:wrap;gap:8px}
.chips:empty,.quick-row:empty{display:none}
.gate-chip,.choice-chip{min-height:44px;height:auto;padding:8px 16px;font-size:13px}
.summary-strip{display:flex;align-items:center;justify-content:space-between;gap:12px}
.summary-strip[hidden]{display:none}
.not-name-wrap:empty{display:none}
.tz-note{margin:0}

/* pending-confirmation card (in-thread) */
.confirm-card{flex-direction:column;align-items:stretch;gap:8px;background:var(--stw-white);border:1px solid var(--stw-stone);border-radius:var(--stw-radius-card-sm);padding:16px 18px}
.confirm-title{font-family:var(--stw-font-display);font-size:18px;font-weight:700;letter-spacing:-.02em}
.confirm-row{display:flex;gap:12px;font-size:15px;line-height:1.45}
.confirm-key{flex:0 0 88px;font-weight:700;color:var(--stw-graphite)}
.confirm-value{font-weight:500;word-break:break-word}
.confirm-prompt{font-weight:700;margin-top:4px;font-size:15px;line-height:1.5}
.confirm-note{font-size:13px;line-height:1.45;color:var(--stw-graphite)}
.confirm-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.confirm-yes,.confirm-no{min-height:44px;height:auto;padding:8px 16px;font-size:13px}
.confirm-yes{background:var(--stw-mint);color:var(--stw-ink)}
.confirm-no{background:var(--stw-subtle);color:var(--stw-text-secondary)}

/* intake / event forms + validated field (in-thread) */
.ui-field,.ui-form-block{flex-direction:column;align-items:stretch;gap:12px;background:var(--stw-white);border:1px solid var(--stw-stone);border-radius:var(--stw-radius-card-sm);padding:16px 18px}
.ui-field-label,.ui-form-label{font-size:13px;font-weight:700}
.ui-field-form{display:flex;gap:8px;align-items:center}
.ui-field-input{flex:1;min-width:0}
.ui-field-error{margin:0;font-size:13px;line-height:1.45;font-weight:500;color:var(--stw-coral-text)}
.ui-form{display:flex;flex-direction:column;gap:16px;width:100%}
.ui-form-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ui-form-hint{font-size:13px;line-height:1.45;font-weight:500;color:var(--stw-graphite)}
.ui-form-input{height:48px;padding:0 14px;border-radius:var(--stw-radius-control);border:1.5px solid var(--stw-stone);background:var(--stw-white);font-size:15px;font-weight:500;width:100%}
.ui-form-submit,.ui-field-submit{align-self:flex-start}
.ui-form-options{position:relative;display:flex;flex-wrap:wrap;gap:6px}
/* v0.7.1 (F5): the visually-hidden radios are anchored to the
 * TOP-LEFT of their own options group (the group is now
 * position:relative and the radios carry explicit top/left).
 * Before, they were position:absolute with no positioned
 * ancestor and no coordinates, so the box a browser used for
 * focus-scroll on a label tap was detached from the visible
 * pill — tapping Virtual, then Google Meet, in the
 * book-another form could scroll the thread to that detached
 * box and leave a blank screen. Anchored here, focus-scroll
 * lands on the options group itself, beside the pills. */
.ui-form-options input[type="radio"]{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.ui-form-option{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--stw-radius-pill);border:1.5px solid var(--stw-stone);background:var(--stw-white);font-size:13px;font-weight:600;color:var(--stw-text-secondary);cursor:pointer}
.ui-form-options input[type="radio"]:checked+.ui-form-option{background:var(--stw-ink);border-color:var(--stw-ink);color:var(--stw-white);font-weight:700}
.ui-form-options input[type="radio"]:focus-visible+.ui-form-option{outline:2px solid var(--stw-green);outline-offset:3px}
.places-list{display:flex;flex-direction:column;gap:4px}
.places-list:empty{display:none}
.places-list button{border:1.5px solid var(--stw-stone);cursor:pointer;text-align:left;min-height: 44px;font-size:15px;font-weight:500;color:var(--stw-ink);padding:8px 14px;border-radius:var(--stw-radius-control);background:var(--stw-green-tint)}

/* booked view */
.booked-view{display:flex;flex-direction:column;gap:12px}
.booked-view[hidden]{display:none}
.booked-card{display:flex;flex-direction:column;gap:8px}
.booked-date{font-size:34px}
.booked-time{font-size:22px;color:var(--stw-text-secondary)}
.booked-rows{border-top:1px solid var(--stw-divider);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.booked-row{display:flex;justify-content:space-between;gap:16px;font-size:14px}
.booked-row b{font-weight:700;text-align:right;word-break:break-word}
.booked-actions{display:flex;flex-direction:column;gap:8px}
.error-banner{background:var(--stw-coral-tint);color:var(--stw-coral-text);border-radius:var(--stw-radius-card-sm);padding:16px 18px;font-size:15px;line-height:1.5;font-weight:500}
.error-banner[hidden]{display:none}

/* composer */
#honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0}
#send[hidden]{display:none}

/* ---- mobile: converted from the reference .m rules ---- */
@media (max-width:899px){
  .front{flex-direction:column}
  .hero{flex:0 0 auto;padding:18px 20px 22px;border-radius:0 0 28px 28px;gap:16px}
  .hero-url{display:none}
  .hero .lockup{display:flex}
  .hero .lockup .prefix{font-size:17px}
  .hero .lockup .name{font-size:19px}
  .hero-mid{flex-direction:row;align-items:flex-end;gap:14px}
  .hero-title{display:none}
  .hero-intro{font-size:15px}
  .hero-made{display:none}
  .hero-bot .pbot{width:63px;height:64px}
  .convo{padding:18px 14px 12px;gap:12px}
  .chat-card{border:0;padding:0;background:transparent;border-radius:0}
  .chat-head{display:none}
  .thread{padding-top:0}
  .bubble{font-size:15px;padding:11px 15px;background:var(--stw-white);border:1px solid var(--stw-stone)}
  .bubble--me{background:var(--stw-ink);border:0}
  .msg{max-width:88%}
  .bubble--me{max-width:88%}
  .quick{padding-left:40px}
  .composer{padding:10px 0 16px}
  .composer input{height:52px;font-size:15px}
  .icon-btn{width:52px;height:52px}
  .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h1{font-size:36px}
  .btn{min-height:48px}
  .panel-card{padding:16px 18px}
  /* v0.7.1 (F8) phone-width pass at ~390px:
   * (a) Cut-off after the identity step: .convo is a
   *     fixed-height (100dvh), overflow:hidden flex column,
   *     and the summary panel is one of its items. The panel
   *     could not shrink below its content height — summary
   *     rows plus a Previous Bookings region up to 22rem —
   *     so once recognition unhid it, it pushed the chat,
   *     the gate chips and the composer past the clipped
   *     bottom edge, with no page scroll to recover them:
   *     the visitor could not proceed at all. The panel (and
   *     the booked view, same shape) now shrink and scroll
   *     INTERNALLY (plain overflow:auto — the thread stays
   *     the page's one vertical-auto scroll region), the previous
   *     list gets a shorter cap, and everything the visitor
   *     must be able to reach is flex-none so it can never
   *     be squeezed or clipped away.
   * (b) The panel's Edit button sits in that same panel: with
   *     the chat squeezed to zero height / off the clipped
   *     edge, tapping Edit sent its chat turn into an
   *     invisible conversation and appeared to do nothing.
   *     Keeping the panel capped and the chat + composer
   *     always on screen (plus the [hidden] fix above, which
   *     makes the previous-card header toggle actually
   *     collapse/expand) makes Edit's effect visible again.
   *     The button itself is pinned flex-none with a full
   *     48px mobile touch height. */
  .panel-card{flex:0 1 auto;min-height:0;max-height:44dvh;overflow:auto}
  .sidebar-previous{max-height:10rem}
  .booked-view{flex:0 1 auto;min-height:0;max-height:56dvh;overflow:auto}
  .chat-card{flex:1 1 auto;min-height:0}
  .composer,.chips,.quick,.summary-strip,.not-name-wrap,.tz-note{flex:0 0 auto}
  .panel-head .summary-edit{flex:0 0 auto}
  #summary-strip-text{min-width:0;overflow-wrap:anywhere}
  .hero-top{flex-wrap:wrap}
}
/* tab bar + mobile admin helpers (from the reference .m rules) */
.tabbar{margin:0 10px 14px;padding:6px;border-radius:22px;background:var(--stw-ink);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.tabbar a{height:52px;border-radius:16px;color:var(--stw-mist);text-decoration:none;font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative}
.tabbar a[aria-current="page"]{background:var(--stw-cream);color:var(--stw-ink);font-weight:700}
.tabbar svg{width:18px;height:18px}
.tabbar .badge{position:absolute;top:4px;right:14px;min-width:18px;height:18px;font-size:11px}
.m-card{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:var(--stw-radius-card);background:var(--stw-white);border:1px solid var(--stw-stone)}
.m-acts{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}
.m-acts .btn{min-height:48px;padding:0 10px}
@media (min-width:900px) and (max-width:1100px){
  .hero{flex-basis:440px}
}
/* No animation is defined in this file beyond tokens.css pb-* classes
 * (which tokens.css itself stops under prefers-reduced-motion). */