/* Dashboard + public pages. Layout only: every value comes from theme.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--text);line-height:1.5}
a{color:var(--link)}
h1,h2,h3{line-height:1.2;margin:0}
p{margin:0 0 var(--space-3)}
button,input,select,textarea{font:inherit;color:inherit}
.ic{flex:none;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}.small{font-size:var(--text-sm)}.xs{font-size:var(--text-xs)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hidden{display:none!important}

/* ---------- Shell (AMIC pattern: left nav, top bar, main column) ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;transition:grid-template-columns .2s ease}
.app.is-collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr}
.app.no-nav{grid-template-columns:1fr}
.app.no-nav .sidebar{display:none}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:16px 12px;border-right:1px solid var(--border);background:var(--bg);overflow-y:auto;z-index:30}
.brand{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 20px}
.logo{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.logo-mark{width:28px;height:28px;border-radius:9px;background:var(--grad);display:grid;place-items:center;color:var(--on-brand)}
.collapse-btn{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:transform .2s}
.app.is-collapsed .collapse-btn{transform:rotate(180deg)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-link{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--radius-sm);color:var(--ink-2);text-decoration:none;font-weight:600;font-size:var(--text-sm);white-space:nowrap;overflow:hidden}
.nav-link:hover{background:var(--panel)}
.nav-link.is-active{background:var(--grad-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border)}
.nav-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:var(--pill);background:var(--bad);color:var(--on-brand);font-size:12px;font-weight:800;display:grid;place-items:center}
.app.is-collapsed .nav-count{position:absolute;margin:0 0 18px 18px;min-width:16px;height:16px;font-size:10px}

.nav-spacer{flex:1}
.account-menu{position:relative;border-top:1px solid var(--border);padding-top:10px;margin-top:10px}
.account-btn{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;background:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left}
.account-btn:hover{background:var(--panel)}
.account-text{display:flex;flex-direction:column;min-width:0}
.account-name{font-weight:700;font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-plan{font-size:var(--text-xs);color:var(--muted)}
.menu{position:absolute;bottom:calc(100% + 6px);left:0;right:0;padding:6px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:60}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:8px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:var(--text-sm);cursor:pointer}
.menu a:hover,.menu button:hover{background:var(--panel)}
.app.is-collapsed .nav-label,.app.is-collapsed .logo-word,.app.is-collapsed .sidebar .account-text,.app.is-collapsed .step-dot{display:none}
.app.is-collapsed .nav-link{justify-content:center;padding:10px}
.app.is-collapsed .brand{flex-direction:column}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;height:var(--topbar-h);padding:0 28px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.topbar .site-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .date{margin-left:auto;color:var(--muted);font-size:var(--text-sm);white-space:nowrap}
.mobile-menu{display:none;border:0;background:none;padding:6px;cursor:pointer;color:var(--ink)}
.status{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:var(--pill);font-size:var(--text-xs);font-weight:700;background:var(--panel);color:var(--muted);white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--idle)}
.status.is-live{background:var(--good-bg);color:var(--good-ink)}
.status.is-live::before{background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 25%,transparent)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--grad-avatar);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border);display:grid;place-items:center;font-weight:800;font-size:14px;overflow:hidden;flex:none;border:0;cursor:pointer;padding:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.content{width:100%;max-width:var(--content-max);margin:0 auto;padding:28px 28px 64px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:var(--text-2xl);letter-spacing:-.02em}
.page-head p{margin:6px 0 0;color:var(--muted)}

/* ---------- Panels, settings, switches ---------- */
.panel{background:var(--panel);border-radius:var(--radius-lg);padding:22px;margin-bottom:18px}
.panel-head{margin-bottom:14px}
.panel-head h2{font-size:var(--text-lg)}
.panel-desc{margin:4px 0 0;color:var(--muted);font-size:var(--text-sm)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer}
.setting:last-child{border-bottom:0}
.setting-text{display:flex;flex-direction:column}
.setting-label{font-weight:600}
.setting-desc{color:var(--muted);font-size:var(--text-sm)}
.switch{position:relative;flex:none}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch-track{display:block;width:44px;height:26px;border-radius:var(--pill);background:var(--switch-off);transition:background .18s}
.switch-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--switch-thumb);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.switch input:checked+.switch-track{background:var(--switch-on)}
.switch input:checked+.switch-track .switch-thumb{transform:translateX(18px)}
.switch input:focus-visible+.switch-track{outline:2px solid var(--brand-1);outline-offset:2px}
.switch input:disabled+.switch-track{opacity:.45}
.locked{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:var(--pill);background:var(--panel-2);font-size:12px;font-weight:700;color:var(--ink-2)}

/* ---------- Buttons and forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:var(--pill);border:0;background:var(--ink);color:var(--bg);font-weight:700;font-size:var(--text-sm);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{filter:brightness(1.15)}
.btn-grad{background:var(--grad);color:var(--on-brand)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--border-strong)}
.btn-ghost:hover{background:var(--panel)}
.btn-sm{padding:7px 14px;font-size:var(--text-xs)}
.btn-lg{padding:15px 28px;font-size:var(--text)}
.btn[disabled]{opacity:.5;cursor:default}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field[hidden]{display:none}   /* V8.4.7.1 SMALL: the hidden attribute wins over the flex above */
.field label{font-weight:600;font-size:var(--text-sm)}
/* FIRST-LAST: first and last name side by side; stacked on a phone */
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.field-pair > .field{min-width:0}
@media (max-width:520px){.field-pair{grid-template-columns:1fr}}
.input,select.input,textarea.input{width:100%;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--card);font-size:var(--text)}
.input:focus{outline:2px solid color-mix(in srgb,var(--brand-1) 50%,transparent);border-color:var(--brand-1)}
textarea.input{min-height:110px;resize:vertical}
.code{font-family:var(--font-mono);font-size:13px}
.notice{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--radius);margin-bottom:18px;font-size:var(--text-sm);background:var(--info-bg);color:var(--ink)}
.notice b{font-weight:700}
.notice .btn{margin-left:auto}
.notice-good{background:var(--good-bg)}.notice-warn{background:var(--warn-bg)}.notice-bad{background:var(--bad-bg)}
.flash{padding:12px 16px;border-radius:var(--radius-sm);background:var(--good-bg);margin-bottom:16px;font-size:var(--text-sm)}
.flash.is-error{background:var(--bad-bg)}
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.table th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}

/* ---------- Step counter + three-step panel ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.step{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius);background:var(--panel);text-decoration:none;color:var(--ink-2);font-size:var(--text-sm);font-weight:600}
.step-num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1.5px solid var(--border-strong);font-weight:800;font-size:13px;flex:none}
.step.is-done .step-num{background:var(--good);border-color:var(--good);color:var(--on-brand)}
.step.is-current{background:var(--card);box-shadow:inset 0 0 0 2px var(--brand-1);color:var(--ink)}
.step.is-current .step-num{border-color:var(--brand-1);color:var(--brand-1)}
.step-counter{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:var(--pill);background:var(--info-bg);color:var(--brand-1);font-weight:700;font-size:var(--text-xs);margin-bottom:12px}

/* ---------- Score dial + questions ---------- */
.score-row{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:24px;align-items:center}
.dial{display:flex;flex-direction:column;align-items:center;width:100%;max-width:280px;margin:0 auto}
/* the lead-magnet report's gauge (assets-v2/audit.css .ck-gauge): same artwork, needle and sweep */
.gauge{position:relative;width:260px;max-width:100%;aspect-ratio:574/308;background:url('rev-counter.png') no-repeat center/contain}
.gauge-needle{position:absolute;left:50%;bottom:4px;width:12px;height:85px;background:linear-gradient(to bottom,var(--needle) 0%,var(--needle-mid) 63%,var(--needle) 100%);
  transform-origin:50% 100%;transform:translateX(-50%) rotate(-90deg);clip-path:polygon(33% 6%,67% 6%,100% 100%,0% 100%);border-radius:50px;
  will-change:transform;transition:transform 2.4s cubic-bezier(.33,1,.3,1)}
.dial-score{margin-top:12px;font-size:60px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.dial-outof{font-size:24px;font-weight:600;color:var(--score-outof);letter-spacing:0}
.dial-label{margin-top:6px;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion:reduce){.gauge-needle{transition:none}}
.score-text h1{font-size:var(--text-2xl);letter-spacing:-.02em;margin-bottom:8px}
.score-text p{color:var(--ink-2)}
.qlist{list-style:none;margin:0;padding:0}
.q{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)}
.q:last-child{border-bottom:0}
.q-mark{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px}
.q-mark .ic{width:15px;height:15px}
.q-yes .q-mark{background:var(--good-bg);color:var(--good)}
.q-ami .q-mark{background:var(--grad);color:var(--on-brand)}
.q-part .q-mark{background:var(--warn-bg);color:var(--warn)}
.q-no .q-mark{background:var(--bad-bg);color:var(--bad)}
.q-na .q-mark{background:var(--panel-2);color:var(--muted)}
.q-body{flex:1;min-width:0}
.q-text{font-weight:600}
.q-quote{margin-top:4px;color:var(--muted);font-size:var(--text-sm);font-style:italic}
.q-tag{font-size:var(--text-xs);font-weight:700;color:var(--muted);white-space:nowrap;margin-top:4px}
.q-ami .q-tag{color:var(--link)}
.q-hint{margin-top:4px;font-size:var(--text-xs)}
details.breakdown summary{cursor:pointer;font-weight:700;padding:6px 0;list-style:none}
details.breakdown summary::-webkit-details-marker{display:none}
details.breakdown summary::after{content:" +";color:var(--muted)}
details.breakdown[open] summary::after{content:" –"}

/* ---------- Preview (FR-30..35) ---------- */
.preview-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-radius:var(--radius) var(--radius) 0 0;background:var(--ink);color:var(--bg)}
.preview-banner p{margin:0;font-weight:600;font-size:var(--text-sm)}
.preview-banner .btn{margin-left:auto;background:var(--grad);color:var(--on-brand)}
.preview-frame{display:block;width:100%;height:640px;border:1px solid var(--border);border-top:0;border-radius:0 0 var(--radius) var(--radius);background:var(--frame-bg)}
.device-switch{display:inline-flex;gap:4px;padding:3px;border-radius:var(--pill);background:var(--panel-2);margin-left:auto}
.device-switch button{border:0;background:none;padding:5px 12px;border-radius:var(--pill);font-size:var(--text-xs);font-weight:700;cursor:pointer;color:var(--muted)}
.device-switch button.is-on{background:var(--card);color:var(--ink)}
.preview-wrap.is-phone .preview-frame{max-width:390px;margin:0 auto;height:720px}

/* ---------- Usage bars ---------- */
.usage{display:flex;flex-direction:column;gap:6px}
.usage-top{display:flex;justify-content:space-between;gap:12px;font-size:var(--text-sm)}
.usage-top b{font-weight:700}
.bar{height:10px;border-radius:var(--pill);background:var(--panel-2);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:var(--pill);background:var(--grad);transition:width .6s}
.bar.is-warn>span{background:var(--warn)}
.bar.is-full>span{background:var(--bad)}
.bar-sm{height:6px}
.stat{display:flex;flex-direction:column;gap:2px}
.stat-num{font-size:var(--text-xl);font-weight:800;letter-spacing:-.02em}
.stat-label{font-size:var(--text-xs);color:var(--muted);font-weight:600}

/* ---------- Install ---------- */
.snippet{position:relative;padding:16px 18px;border-radius:var(--radius);background:var(--code-bg);color:var(--code-ink);font-family:var(--font-mono);font-size:13px;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.snippet .btn{position:absolute;top:10px;right:10px}
.help-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.door{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);text-decoration:none;color:var(--ink)}
.door .ic{color:var(--brand-1)}
.door b{font-weight:700}
.door span{color:var(--muted);font-size:var(--text-sm)}
.founder{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border)}
.founder img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--panel-2)}
.founder p{margin:0;font-size:var(--text-sm)}

/* ---------- Slide-in panel + upgrade layer (FR-94, FR-101) ---------- */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(11,12,15,.45);display:flex;justify-content:flex-end;animation:fade .15s}
.overlay[hidden]{display:none}
.overlay.is-center{justify-content:center;align-items:flex-start;padding:5vh 16px;overflow-y:auto}
.sheet{width:min(460px,100%);height:100%;background:var(--bg);box-shadow:var(--shadow-lg);padding:24px;overflow-y:auto;animation:slide .22s ease-out}
.overlay.is-center .sheet{width:min(1040px,100%);height:auto;border-radius:var(--radius-lg);animation:none}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.sheet-head h2{font-size:var(--text-xl)}
.x-btn{border:0;background:var(--panel);width:34px;height:34px;border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:none;color:var(--ink)}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.choice{padding:18px;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--card)}
.choice h3{font-size:var(--text-lg);margin-bottom:6px}
.choice p{color:var(--muted);font-size:var(--text-sm)}
.card-form{display:flex;flex-direction:column;gap:12px}
.card-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fake-note{font-size:var(--text-xs);color:var(--muted);padding:8px 10px;border-radius:8px;background:var(--panel)}
@keyframes fade{from{opacity:0}}
@keyframes slide{from{transform:translateX(30px);opacity:0}}

/* ---------- Picker (step two) ---------- */
.pages-list{display:flex;flex-direction:column;gap:8px}
.page-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:10px 14px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--border)}
.page-row .url{font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-row .url b{display:block;color:var(--ink);font-weight:600}
.mini-switch{display:flex;align-items:center;gap:8px;font-size:var(--text-xs);color:var(--muted);font-weight:600}

/* ---------- Public pages (scan landing, sign-in) ---------- */
.public{min-height:100vh;display:flex;flex-direction:column}
.public-head{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;max-width:1180px;width:100%;margin:0 auto}
.public-main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:24px 28px 64px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:24px 0 40px}
.hero h1{font-size:clamp(32px,5vw,54px);letter-spacing:-.03em;line-height:1.05;margin-bottom:16px}
.hero .lede{font-size:var(--text-lg);color:var(--ink-2);margin-bottom:24px}
.form-card{padding:26px;border-radius:var(--radius-lg);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}
.form-card h2{font-size:var(--text-lg);margin-bottom:14px}
.form-note{font-size:var(--text-xs);color:var(--muted);margin-top:10px}
.bullets{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.bullets li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2)}
.bullets .ic{color:var(--good);margin-top:3px}
.loader{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 16px;text-align:center}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--panel-2);border-top-color:var(--brand-1);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress-list{list-style:none;padding:0;margin:0;display:grid;gap:6px;color:var(--muted);font-size:var(--text-sm)}
.progress-list li.is-done{color:var(--good)}
.progress-list li.is-on{color:var(--ink);font-weight:600}
.endings{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.finding{display:flex;gap:12px;padding:14px 16px;border-radius:var(--radius);background:var(--warn-bg);margin-bottom:12px;font-size:var(--text-sm)}
.finding.is-bad{background:var(--bad-bg)}
.finding b{display:block;margin-bottom:2px}
.adspend{padding:20px;border-radius:var(--radius-lg);background:var(--ink);color:var(--bg)}
.adspend h2{color:inherit;margin-bottom:6px}
.adspend .num{font-size:var(--text-2xl);font-weight:800}

/* ---------- Mobile (DL-12, FR-26) ---------- */
@media (max-width:860px){
  .app,.app.is-collapsed{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(280px,84vw);transform:translateX(-102%);transition:transform .2s;box-shadow:var(--shadow-lg)}
  .app.nav-open .sidebar{transform:none}
  .app.is-collapsed .nav-label,.app.is-collapsed .logo-word,.app.is-collapsed .account-text{display:initial}
  .app.is-collapsed .nav-link{justify-content:flex-start;padding:9px 12px}
  .collapse-btn{display:none}
  .mobile-menu{display:block}
  .app.no-nav .mobile-menu{display:none}
  .topbar{padding:0 14px;gap:10px}
  .topbar .date{display:none}
  .content{padding:18px 14px 48px}
  .score-row{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:6px}
  .hero{grid-template-columns:1fr;gap:24px}
  .public-head,.public-main{padding-left:16px;padding-right:16px}
  .choice-row{grid-template-columns:1fr}
  .page-row{grid-template-columns:1fr;gap:6px}
  .preview-frame{height:560px}
  .panel{padding:16px}
  .page-head h1{font-size:var(--text-xl)}
}

/* ---------- Conversations / live inbox ---------- */
.nav-link{position:relative}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:16px}
.filters label{display:flex;flex-direction:column;gap:2px}
.filters .input{padding:8px 10px;font-size:var(--text-sm);width:auto}
.filter-search{flex:1 1 220px;position:relative;flex-direction:row!important;align-items:center}
.filters input[type=date]{width:150px}
.filters select.input{max-width:180px}
.filters input[name=page]{width:140px}
.filter-search .ic{position:absolute;left:10px;color:var(--muted)}
.filter-search .input{width:100%;padding-left:32px}
.inbox{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:16px;align-items:start}
.inbox-list{display:flex;flex-direction:column;gap:8px}
.convo{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);text-decoration:none;color:var(--ink)}
.convo:hover{border-color:var(--border-strong)}
.convo.is-open{box-shadow:inset 0 0 0 2px var(--brand-1);border-color:transparent}
.convo.is-waiting{border-left:4px solid var(--bad)}
.convo-top{display:flex;justify-content:space-between;gap:10px}
.convo-top b{font-weight:600;font-size:var(--text-sm)}
/* V8.4.2 SUMMARY: the chat's one-line summary under its question, and at the top of the open chat */
.convo-sum{font-size:var(--text-sm);color:var(--ink-2);line-height:1.35}
.conv-summary{margin:8px 0 0;padding:8px 12px;border-radius:var(--radius);background:var(--panel-2);color:var(--ink);font-size:var(--text-sm);line-height:1.4}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
/* V8.4.8 NEWCHAT: the "Flow answers" box in an open chat */
.flow-answers{margin:0 0 12px;padding:8px 12px;border-radius:var(--radius);background:var(--panel-2);font-size:var(--text-sm)}
.flow-answers>summary{cursor:pointer;font-weight:600}
.fa-run{margin-top:8px}.fa-run+.fa-run{padding-top:8px;border-top:1px solid var(--border)}
.fa-head{margin:0 0 4px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.fa-list{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;margin:0}.fa-list dt{color:var(--ink-2)}.fa-list dd{margin:0;overflow-wrap:anywhere}
.fa-none{margin:0}
@media (max-width:640px){.fa-list{grid-template-columns:1fr}}
.tag{display:inline-block;padding:1px 8px;border-radius:var(--pill);font-size:12px;font-weight:700;background:var(--panel-2);color:var(--ink-2)}
.tag-good{background:var(--good-bg);color:var(--good-ink)}.tag-bad{background:var(--bad);color:var(--on-brand)}
.tag-warn{background:var(--warn-bg);color:var(--warn-ink)}.tag-info{background:var(--info-bg);color:var(--link)}
.inbox-open{position:sticky;top:calc(var(--topbar-h) + 12px)}
.transcript-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.transcript-head h2{font-size:var(--text-lg)}
.transcript{display:flex;flex-direction:column;gap:10px;max-height:56vh;overflow-y:auto;padding:4px 2px}
.msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:var(--text-sm);background:var(--card);border:1px solid var(--border)}
.msg.is-target{box-shadow:0 0 0 2px var(--ink);outline:0;scroll-margin:160px 0 24px}   /* V8.3: the message a link opened the chat at (Feedback, Reporting) */
.msg-shopper{align-self:flex-end;background:var(--panel-2);border-color:transparent}
.msg-agent{background:var(--info-bg);border-color:transparent}
.msg-system{align-self:center;background:none;border:0;color:var(--muted);font-size:var(--text-xs);text-align:center;padding:2px}
.msg-who{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:2px}
.msg-rating{display:inline-flex;align-items:center;gap:4px;margin-left:8px;color:var(--muted);font-size:var(--text-xs)}
.msg-tag{display:inline-block;margin-left:8px;vertical-align:middle}
.reply{display:flex;gap:8px;margin-top:12px;align-items:flex-end}
.reply textarea{min-height:48px;flex:1}
.back-link{display:none;margin-bottom:8px;text-decoration:none}
@media (max-width:860px){
  .inbox{grid-template-columns:1fr}
  .inbox.has-open .inbox-list{display:none}
  .inbox:not(.has-open) .inbox-open{display:none}
  .back-link{display:inline-block}
  .inbox-open{position:static}
  .filters label:not(.filter-search){flex:1 1 45%}
  .filters .input{width:100%}
}

/* ---------- Sales, feedback, goals ---------- */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--radius-sm);background:var(--panel);border:1px solid var(--border)}
.seg a{padding:6px 12px;border-radius:8px;font-size:var(--text-xs);font-weight:700;color:var(--muted);text-decoration:none}
.seg a.is-on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.stat-tile{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:var(--radius);background:var(--panel)}
.stat-tile .stat-label{display:flex;align-items:center;gap:6px}
.ranked{margin:0;padding-left:20px;display:grid;gap:8px}
.ranked li{font-size:var(--text-sm)}.ranked li span:first-child{font-weight:600;margin-right:8px}
.ratio{display:flex;gap:2px;height:10px;margin:-6px 0 18px;border-radius:var(--pill);overflow:hidden}
.ratio-up{background:var(--good)}.ratio-down{background:var(--bad)}
.feedback-list{list-style:none;margin:0;padding:0}
.fb{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.fb:last-child{border-bottom:0}
.fb-mark{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none}
.fb-up .fb-mark{background:var(--good-bg);color:var(--good)}.fb-down .fb-mark{background:var(--bad-bg);color:var(--bad)}
.fb-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.fb-comment{font-style:italic;font-size:var(--text-sm)}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tpl{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border)}
.tpl .btn{align-self:flex-start;margin-top:auto}.tpl .input{padding:8px 10px;font-size:var(--text-sm)}
.topic-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.radio{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-weight:400!important;cursor:pointer}
.radio input{margin-top:4px}
.oc-field,.vs-field{display:none}.oc-field.is-on,.vs-field.is-on{display:flex}

/* ---------- Training space bar graph ---------- */
.space-top{display:flex;justify-content:space-between;gap:12px;font-size:var(--text-sm);margin-bottom:8px}
.space-warn{color:var(--warn);font-weight:700}
.space-bar{position:relative;display:flex;gap:2px;height:22px;padding:0;border-radius:6px;background:var(--panel-2);overflow:visible}
.seg-fill{position:relative;display:block;height:100%;min-width:3px;border-radius:2px;outline:none}
.seg-fill:first-child{border-radius:4px 2px 2px 4px}
.seg-fill:hover,.seg-fill:focus-visible{filter:brightness(1.08);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.seg-fill[data-tip]:hover::after,.seg-fill[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:0;white-space:nowrap;padding:6px 10px;border-radius:8px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;z-index:5;pointer-events:none}
.s1{background:var(--series-1)}.s2{background:var(--series-2)}.s3{background:var(--series-3)}.s4{background:var(--series-4)}
.space-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;padding:0;font-size:var(--text-sm);color:var(--ink-2)}
.space-legend li{display:flex;align-items:center;gap:6px}.space-legend b{color:var(--ink)}
.key{width:12px;height:12px;border-radius:3px;display:inline-block}.key-free{background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--border-strong)}
.mini-bar{display:block;width:100px;height:6px;margin-top:4px;border-radius:3px;background:var(--panel-2);overflow:hidden}
.mini-bar span{display:block;height:100%;border-radius:3px}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.mini-stats a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--border);text-decoration:none;color:var(--ink)}
.mini-stats b{font-size:var(--text-lg)}

/* ---------- Where Ami appears ---------- */
.rules{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.rule{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;padding:10px 14px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--border)}
.rule.is-picking{box-shadow:inset 0 0 0 2px var(--brand-1)}
.rule-what{display:flex;flex-direction:column;min-width:0}
.rule .input{padding:7px 10px;font-size:var(--text-sm)}
.add-rule{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px;border-radius:var(--radius-sm);border:1px dashed var(--border-strong)}
.add-rule .input{width:auto;flex:1 1 180px;padding:8px 10px;font-size:var(--text-sm)}
.radio-inline{display:inline-flex;gap:6px;align-items:center;font-size:var(--text-sm)}
@media (max-width:860px){.rule{grid-template-columns:1fr 1fr}.rule-what{grid-column:1/-1}}

/* ---------- Lead generation preview ---------- */
.note-preview{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding:18px;border-radius:var(--radius);background:var(--panel-2)}
.note-mock{position:relative;max-width:300px;padding:12px 34px 12px 14px;border-radius:14px;background:var(--b-note,var(--card));color:var(--b-note-text,var(--ink));box-shadow:var(--shadow);font-weight:600;font-size:var(--text-sm)}
.note-mock span{position:absolute;top:6px;right:8px;color:inherit;opacity:.7}
.launch-mock{display:flex;align-items:center;gap:8px;padding:14px 18px;border-radius:var(--pill);background:var(--b-accent,var(--ink));color:var(--b-accent-text,var(--bg));font-weight:700;font-size:var(--text-sm)}

/* ---------- Team, two-step sign-in ---------- */
.invite-form{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.invite-form .input{flex:1 1 180px;width:auto}
.invite-form select.input{flex:0 1 160px}
.roles-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 16px;margin:0;font-size:var(--text-sm)}
.roles-key dt{font-weight:700}.roles-key dd{margin:0;color:var(--muted)}
.twofa-row{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.qr{width:184px;height:184px;padding:12px;border-radius:var(--radius-sm);background:var(--frame-bg);flex:none}
.qr img,.qr canvas{width:160px!important;height:160px!important;display:block}

/* ---------- Guided setup (/app/setup): one step at a time, a short title, one line, one button ---------- */
.nav-count.is-setup{background:var(--grad);min-width:30px}
.setup{max-width:600px;margin:8px auto 40px;text-align:center}
.setup-progress-wrap{margin:0 0 28px}
.setup-progress{height:6px;border-radius:var(--pill);background:var(--panel-2);overflow:hidden}
.setup-progress span{display:block;height:100%;border-radius:var(--pill);background:var(--grad);transition:width .6s ease}
.setup-marks{display:flex;justify-content:space-between;list-style:none;margin:12px 0 0;padding:0}
.setup-marks li,.setup-marks a{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);font-weight:600;color:var(--muted);text-decoration:none}
.setup-marks .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:12px;font-weight:800;background:var(--card);border:1.5px solid var(--border-strong)}
.setup-marks .is-done .dot{background:var(--good);border-color:var(--good);color:var(--on-brand)}
.setup-marks .is-done a:hover{color:var(--ink)}
.setup-marks .is-current{color:var(--ink)}.setup-marks .is-current .dot{border-color:var(--brand-1);color:var(--brand-1)}
.setup-marks .is-shown .lbl{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.setup-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.setup-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px 36px 32px;box-shadow:var(--shadow)}
.setup-card h1{font-size:var(--text-2xl);line-height:1.15;margin:0 0 10px;letter-spacing:-.01em}
.setup-mark{width:56px;height:56px;margin:0 auto 18px;border-radius:16px;display:grid;place-items:center;background:var(--grad-soft);color:var(--brand-1)}
.setup-mark.is-good{background:var(--good-bg);color:var(--good);border-radius:50%}
.setup-line{margin:0 auto 24px;max-width:420px;font-size:var(--text-lg);color:var(--ink-2)}
.setup-alt{margin:18px 0 0;font-size:var(--text-sm);color:var(--muted)}
.setup-alt a{color:var(--ink-2)}
.setup-recap{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px;padding:6px 12px;border-radius:var(--pill);background:var(--good-bg);color:var(--ink-2);font-size:var(--text-xs);font-weight:600}
.setup-recap .ic{color:var(--good)}
.setup-recap a{color:var(--ink-2)}
.setup-foot{margin:16px 0 0;font-size:var(--text-xs);color:var(--muted);font-weight:600}
.setup .quotes{margin-top:16px;text-align:left}
#crawl-result:not(:empty){margin-top:14px}
.manual-pick{margin-top:18px;text-align:left}
.manual-pick > summary{cursor:pointer;font-size:var(--text-sm);font-weight:600;color:var(--ink-2);text-align:center;list-style:none}
.manual-pick > summary::-webkit-details-marker{display:none}
.manual-pick > summary:hover{color:var(--ink)}
.manual-pick[open] > summary{margin-bottom:12px}
.manual-pick form > * + *{margin-top:12px}
.pick-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;max-height:340px;overflow-y:auto}
.pick{display:flex;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--border);cursor:pointer;font-size:var(--text-sm)}
.pick:first-child{border-top:0}
.pick:hover{background:var(--panel)}
.pick.is-fixed{cursor:default;background:var(--panel)}
.pick input{width:18px;height:18px;accent-color:var(--brand-1);flex:none}
.pick > span{flex:1;min-width:0;display:flex;flex-direction:column}
.pick .xs{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setup-snippet{position:relative;text-align:left}
.setup-snippet .snippet{padding-right:96px;white-space:pre-wrap;word-break:break-all;margin:0}
.setup-snippet .btn{position:absolute;top:10px;right:10px}
.platforms{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:18px 0 8px}
.plat{font:inherit;font-size:var(--text-sm);font-weight:600;padding:6px 12px;border-radius:var(--pill);border:1px solid var(--border);background:var(--card);color:var(--ink-2);cursor:pointer}
.plat.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.plat-how{margin:0;font-size:var(--text-sm);color:var(--ink-2)}
.sstep-wait{display:flex;justify-content:center;align-items:center;gap:10px;margin:22px 0 0}
.sstep-wait .status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--warn);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.link-btn{font:inherit;font-size:var(--text-sm);background:none;border:0;padding:0;color:var(--ink-2);text-decoration:underline;cursor:pointer}
.auto-summary{display:grid;grid-template-columns:1fr 1fr;gap:20px;text-align:left;margin-top:4px}
.auto-summary h4{margin:0 0 8px;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.auto-picks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--text-sm)}
.auto-picks li{display:flex;gap:8px;align-items:flex-start}
.auto-picks .ic{flex:none;color:var(--brand-1);margin-top:3px}
.auto-picks li.is-off .ic{color:var(--muted)}
.setup-live .btn{margin-bottom:8px}
.setup-next{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}
.setup-next a{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:600;color:var(--ink-2);text-decoration:none}
.setup-next a:hover{color:var(--ink)}.setup-next .ic{color:var(--brand-1)}
@media (max-width:640px){
  .setup-card{padding:28px 18px 24px}
  .setup-card h1{font-size:var(--text-xl)}
  .setup-line{font-size:var(--text)}
  .setup-marks .lbl{display:none}
  .auto-summary{grid-template-columns:1fr}
}

/* ---------- The setup banner on other pages ---------- */
.setup-banner{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;margin-bottom:18px;border-radius:var(--radius);background:var(--grad-soft);border:1px solid var(--border);color:var(--ink);text-decoration:none;font-size:var(--text-sm)}
.setup-banner:hover{border-color:var(--brand-1)}
.setup-banner-text{flex:1;min-width:0}
.setup-banner-bar{width:96px;height:6px;border-radius:var(--pill);background:var(--panel-2);overflow:hidden;flex:none}
.setup-banner-bar span{display:block;height:100%;border-radius:var(--pill);background:var(--grad)}
@media (max-width:640px){.setup-banner-bar{display:none}}

/* ---------- Client quotes, and the upgrade layer's reassurance ---------- */
.quotes{display:flex;flex-direction:column;gap:12px}
.quote{margin:0;padding:16px 18px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border)}
.quote-sample{display:inline-block;margin-bottom:8px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--pill);background:var(--warn-bg);color:var(--warn)}
.quote-result{margin:0 0 6px;font-weight:800;font-size:var(--text);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.quote blockquote{margin:0;font-size:var(--text-sm);line-height:1.55;color:var(--ink)}
.quote figcaption{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:var(--text-xs);color:var(--muted)}
.quote figcaption img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.quote figcaption b{display:block;color:var(--ink);font-size:var(--text-sm)}
.quotes.is-compact .quote{background:var(--panel);border:0}
.reassure{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;margin:16px 0 0;color:var(--ink-2);font-weight:600}
.reassure .ic{color:var(--good);margin-right:-8px}

/* ---------- Quieter pages: link notices, fixes folded away ---------- */
.notice-link{text-decoration:none;color:var(--ink)}
.notice-link:hover{filter:brightness(.98)}
details.fix{margin-top:4px}
details.fix > summary{cursor:pointer;font-size:var(--text-xs);font-weight:700;color:var(--brand-1);list-style:none}
details.fix > summary::-webkit-details-marker{display:none}
details.fix[open] > summary{margin-bottom:6px}
.inline-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.inline-form .input{flex:1;min-width:200px}
.inline-form label{width:100%}

/* ---------- Local / Stage label (never on live) ---------- */
.env-flag{position:fixed;left:50%;top:0;transform:translateX(-50%);z-index:9999;padding:2px 12px 3px;border-radius:0 0 8px 8px;font:700 11px/1.4 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--on-brand);background:var(--muted);pointer-events:none}
.env-flag.is-stage{background:var(--warn)}

/* ---------- Readability fixes from the UX quality retest ---------- */
details.fix > summary,.setup-alt a,.link-btn{color:var(--link)}
details.fix > summary{display:inline-flex;align-items:center;min-height:24px}
.xs a,a.xs{display:inline-flex;align-items:center;min-height:24px}
.setting-label[style*="--bad"]{color:var(--bad-ink)!important}
.quote-sample{color:var(--warn-ink)}
.pill-tag{font-size:12px}
.notice-warn{color:var(--ink)}
#app summary{min-height:24px;display:flex;align-items:center;gap:6px}
#app details.fix > summary{display:inline-flex}

/* ---------- Navigation groups ---------- */
.nav-group{margin:14px 12px 4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.nav-group:empty{display:none}
.nav .nav-link{padding-top:7px;padding-bottom:7px}
.app.is-collapsed .nav-group{height:1px;margin:10px 14px;padding:0;overflow:hidden;color:transparent;background:var(--border)}
html.nav-collapsed .nav-group{height:1px;margin:10px 14px;overflow:hidden;color:transparent;background:var(--border)}

/* ---------- The first-visit guide ---------- */
.tour-shade{position:fixed;z-index:200;border-radius:var(--radius);box-shadow:0 0 0 9999px rgba(11,12,15,.45);pointer-events:none;transition:all .25s ease}
.tour-card{position:fixed;z-index:201;width:min(320px,calc(100vw - 32px));padding:18px 18px 14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-lg);color:var(--ink)}
.tour-card.is-free{left:16px;right:16px;bottom:16px;width:auto;margin:0 auto;max-width:420px}
.tour-card h2{margin:2px 0 6px;font-size:var(--text-lg)}
.tour-card p{margin:0;font-size:var(--text-sm);color:var(--ink-2)}
.tour-card .tour-count{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tour-actions{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:14px}
@media (prefers-reduced-motion:reduce){.tour-shade{transition:none}}

/* =====================================================================
   Design refresh (October 2026, from the Claude Design canvas "Ami dashboard
   refresh"): simple and clean. No pill shapes, no grey slabs: white page,
   thin rules, solid black buttons with a small radius, coloured words only
   where they carry meaning. The gradient stays on the logo and the score dial.
   ===================================================================== */
:root{--pill:6px;--radius:8px;--radius-lg:10px;--radius-sm:6px}
.switch-track{border-radius:999px}.switch-thumb{border-radius:50%}
.btn{border-radius:6px;font-weight:600}
.btn-grad,.btn-grad:hover{background:var(--ink);color:var(--bg)}
.btn-ghost{box-shadow:inset 0 0 0 1px var(--border-strong)}
h1,h2,h3{font-weight:700}
.page-head h1{font-size:26px;letter-spacing:-.01em}
.page-head{margin-bottom:28px}
.panel{background:transparent;border-radius:0;border-top:1px solid var(--border);padding:24px 0 8px;margin-bottom:16px}
.panel-head h2{font-size:16px;font-weight:600}
.panel-desc{font-size:var(--text-sm)}
.grid-2{gap:40px}
/* labels: words, not badges */
.status,.status.is-live,.tag,.tag-good,.tag-warn,.tag-info,.tag-bad,.pill-tag,.pill-tag.is-reco,.locked{background:none!important;padding:0;border-radius:0;font-weight:600}
.status{font-size:var(--text-sm)}
.tag-bad{color:var(--bad-ink)}
.locked{margin-left:8px;color:var(--muted);font-size:12px}
.q-tag{font-weight:600}
.status.is-live::before{box-shadow:none}
/* navigation */
.nav-link{font-weight:500}
.nav-link.is-active{background:var(--grad-soft);box-shadow:inset 0 0 0 1px var(--border);font-weight:600}
.nav-group{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
.nav-count{border-radius:6px;background:var(--ink);color:var(--bg)}
.nav-count.is-setup{background:none;color:var(--muted);font-weight:500}
/* notices: quiet bars */
.notice{border-radius:8px}
.setup-banner{border-radius:8px}
.setup-progress span{background:var(--ink)}
/* numbers and tiles: no boxes */
.stat-tile{background:none;border-radius:0;border-top:1px solid var(--border);padding:16px 0}
.mini-stats a{border-radius:0;border:0;border-top:1px solid var(--border);padding:12px 0;background:none}
.door,.founder,.quote,.auto-card{border-radius:8px}
.finding{border-radius:8px}
/* setup: left-aligned, no card, black button */
.setup{text-align:left;max-width:480px;margin-top:40px}
.setup-card{background:none;border:0;box-shadow:none;padding:0}
.setup-card h1{font-size:32px;letter-spacing:-.02em}
.setup-mark{display:none}
.setup-line{margin:12px 0 28px;max-width:none;font-size:17px}
.setup-progress-wrap{margin-bottom:48px}
.setup-progress{display:none}
.setup-marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.setup-marks li{display:block;padding-top:10px;border-top:2px solid var(--border-strong);font-weight:500}
.setup-marks li.is-done,.setup-marks li.is-current{border-top-color:var(--ink)}
.setup-marks .dot{display:none}
.setup-marks a{display:inline}
.setup-alt,.manual-pick > summary,.setup-next{text-align:left;justify-content:flex-start}
.manual-pick > summary{justify-content:flex-start}
.setup-recap{background:none;padding:0;font-size:var(--text-sm)}
.setup-foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--border);font-weight:400}
.platforms{justify-content:flex-start}
.plat{border-radius:6px}
.sstep-wait{justify-content:flex-start}
.setup-live{text-align:left}
.auto-summary{margin-top:20px}
/* account menu, top right; the left menu fits without scrolling */
.topbar .account-menu{position:relative;border:0;margin:0 0 0 auto;padding:0}
.topbar .account-btn{width:auto;gap:12px;padding:4px 4px 4px 12px;border-radius:8px}
.topbar .account-btn.is-active,.topbar .account-btn:hover{background:var(--panel)}
.topbar .account-text{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.topbar .account-name{font-weight:600;font-size:var(--text-sm);color:var(--ink)}
.topbar .account-plan{font-size:12px;color:var(--muted)}
.topbar .menu{top:calc(100% + 8px);bottom:auto;left:auto;right:0;min-width:270px}
.menu-who{display:flex;flex-direction:column;gap:2px;margin:0 0 6px;padding:8px 10px 12px;border-bottom:1px solid var(--border);font-size:var(--text-sm)}
.menu-who span{font-size:12px;color:var(--muted)}
.menu a[aria-current="page"]{background:var(--panel);color:var(--ink)}
.sidebar .nav-out{margin-top:auto;border-top:1px solid var(--border);border-radius:0;padding-top:14px}
.topbar .date{margin-left:auto}
@media (max-width:860px){.topbar .account-text{display:none}.topbar .account-btn{padding:2px}}
/* the real Ami logo (from AMIC); the bars alone when the menu is collapsed */
.logo{display:flex;align-items:center}
.logo-full{display:block;height:24px;width:auto}
.logo-icon{display:none;height:24px;width:auto}
.app.is-collapsed .logo-full,html.nav-collapsed .logo-full{display:none}
.app.is-collapsed .logo-icon,html.nav-collapsed .logo-icon{display:block}
[data-theme="dark"] .logo-full{filter:brightness(1.6)}
.step-counter{background:none;padding:0;border-radius:0;color:var(--muted);font-weight:600}
/* Plan and billing: cards and the add-card form, in the page */
.card-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:12px 0;border-top:1px solid var(--border)}
.card-row .card-what{flex:1 1 260px}
.card-row .tag{margin-left:8px}
.add-card{margin-top:16px}
.add-card > summary{list-style:none;display:inline-flex}
.add-card > summary::-webkit-details-marker{display:none}
.add-card[open] > summary{margin-bottom:14px}
.add-card .card-form{max-width:420px;display:flex;flex-direction:column;gap:12px}
#app .add-card > summary{display:inline-flex;width:auto}
/* price cards inside the dashboard: no pill labels (the public pricing page keeps its own look) */
.content .ami-pr-badge{position:static;display:block;margin:0 0 10px;padding:0;border-radius:0;background:none;color:var(--ink);font-size:12px;font-weight:600}
.content .ami-pr-soon{padding:0;border-radius:0;background:none;color:var(--muted)}
.content .ami-pr-card{border-radius:8px}
/* billing bar: running out of answers, or a failed payment - on every page */
.billing-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 12px 12px 16px;margin-bottom:18px;border-radius:8px;background:var(--warn-bg);font-size:var(--text-sm)}
.billing-bar.is-bad{background:var(--bad-bg)}
.billing-bar > span{flex:1 1 300px}
.billing-bar .btn{margin-left:auto}
.sheet-narrow{max-width:460px}
.overlay.is-center .sheet.sheet-narrow{width:min(460px,100%)}
/* buyer questions: one large, clear tick or cross; the question; one short line */
.q{align-items:center;gap:16px;padding:14px 0}
.q-mark{width:auto;height:auto;border-radius:0;background:none!important;margin:0}
.q-mark .ic{width:26px;height:26px;stroke-width:2.6}
.q-yes .q-mark,.q-ami .q-mark{color:var(--good)}
.q-no .q-mark{color:var(--bad)}
.q-part .q-mark{color:var(--warn)}
.q-na .q-mark{color:var(--muted)}
.q-text{font-weight:600;font-size:var(--text)}
.q-line{margin-top:2px;font-size:var(--text-sm);color:var(--muted)}
.q-no .q-line{color:var(--bad-ink)}
/* leads: alerts and webhook; page-head action group */
.head-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hook-info{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.hook-info code{font-size:12px;word-break:break-all}
.panel-head .btn{margin-top:8px}
/* write the right answer, under a reply Ami missed */
.fix{margin-top:8px}
.fix summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--text);text-decoration:underline;text-underline-offset:2px;min-height:24px;display:inline-flex;align-items:center}
.fix form{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.msg-fixed{display:block;margin-top:6px;font-size:13px;color:var(--good-ink)}
/* public footer and the trust page */
.public-foot{display:flex;gap:20px;justify-content:center;padding:32px 16px;font-size:13px}
.public-foot a{color:var(--muted)}
.trust{max-width:760px;margin:0 auto;padding:8px 0 40px}
.trust h1{font-size:32px;letter-spacing:-.02em;margin:0 0 8px}
.trust .lead{font-size:17px;color:var(--muted);margin:0 0 28px}
.trust h2{font-size:18px;margin:32px 0 10px}
.trust ul{padding-left:20px;margin:0}.trust li{margin:6px 0}
/* sales: chatted or didn't */
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.compare>div{display:flex;flex-direction:column;gap:4px;padding:16px 0}
.compare>div+div{padding-left:20px;border-left:1px solid var(--border)}
/* log out is a button styled like the links around it */
.nav-out-form{margin:0}
.nav-out-form button.nav-link{width:100%;background:none;border:0;font:inherit;text-align:left;cursor:pointer}
.menu-out{margin:0}
.menu-out button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:6px}
.menu-out button:hover,.menu-out button:focus-visible{background:var(--panel-2)}
/* the plan chosen on the pricing page, above the start form */
.plan-chosen{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;padding:10px 14px;border:1px solid var(--border);border-radius:6px;font-size:14px}
.dial-sub{margin:10px 0 0;font-size:14px;color:var(--ink-2);text-align:center}

/* Sign in and Start (Oct 2026): a big heading, Continue with Google / Microsoft,
   "or continue with email", then the email form. No card around it. */
.auth{max-width:400px;margin:32px auto 0}
.auth .plan-chosen{margin-bottom:28px}
.auth-title{font-size:32px;line-height:1.15;letter-spacing:-.02em;margin:0 0 8px}
.auth-sub{color:var(--muted);font-size:var(--text-sm);margin:0 0 28px}
.auth-sub a{color:var(--link);font-weight:600}
.auth-lede{margin:-16px 0 24px}
.auth .flash{margin-bottom:20px}
.social{display:flex;flex-direction:column;gap:12px}
.social-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:44px;padding:10px 16px;border-radius:6px;
  background:var(--social-bg);color:var(--social-ink);box-shadow:inset 0 0 0 1px var(--social-line);font-weight:600;font-size:var(--text);text-decoration:none;line-height:1.2}
.social-btn:hover{background:var(--social-bg-hover);text-decoration:none}
.social-btn:focus-visible{outline:2px solid var(--brand-1);outline-offset:2px}
.social-btn svg{flex:none;display:block}
.auth-or{display:flex;align-items:center;gap:12px;margin:24px 0;color:var(--muted);font-size:var(--text-xs)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border)}
.auth .field label{text-transform:uppercase;letter-spacing:.06em;font-size:var(--text-xs);font-weight:600;color:var(--ink-2)}
.auth-submit{width:100%;margin-top:4px}
@media (max-width:520px){.auth{margin-top:8px}.auth-title{font-size:28px}}

/* "Book a call": Calendly in a full-screen layer (book-call.js) */
.book-layer{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;flex-direction:column;animation:fade .15s}
.book-head{display:flex;align-items:center;gap:16px;padding:12px 16px 12px 24px;border-bottom:1px solid var(--border)}
.book-head h2{font-size:var(--text-lg);margin:0;flex:1;min-width:0}
.book-tab{font-size:var(--text-sm);color:var(--muted);white-space:nowrap}
.book-body{position:relative;flex:1;min-height:0}
.book-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.book-wait{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--muted);font-size:var(--text-sm)}
.book-layer.is-loaded .book-wait{display:none}
.book-edge{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:520px){.book-head{padding:10px 12px 10px 16px}.book-head h2{font-size:16px}.book-tab{display:none}}
/* ---- Ask Ami: a chat about the site's own data ---------------------------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ask{max-width:780px;margin:0 auto;display:flex;flex-direction:column;min-height:calc(100vh - var(--topbar-h) - 96px)}
.ask-head{align-items:flex-start}
.ask-head h1{overflow-wrap:anywhere}
.ask-head-actions{display:flex;gap:8px;align-items:center}
.ask-history{position:relative}
.ask-history summary{list-style:none;cursor:pointer}
.ask-history summary::-webkit-details-marker{display:none}
.ask-history-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(360px,calc(100vw - 32px));max-height:60vh;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(11,12,15,.12);padding:6px}
.ask-history-row{display:flex;align-items:center;gap:4px;border-radius:8px}
.ask-history-row:hover,.ask-history-row.is-current{background:var(--panel)}
.ask-history-row a{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:8px 10px;color:var(--ink);text-decoration:none;font-size:var(--text-sm)}
.ask-history-row a span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ask-delete{border:0;background:none;color:var(--muted);padding:8px;border-radius:8px;cursor:pointer;display:grid;place-items:center}
.ask-delete:hover,.ask-delete:focus-visible{color:var(--bad-ink);background:var(--bad-bg)}
.ask-thread{display:flex;flex-direction:column;gap:22px;padding:8px 0 16px}
.ask-empty{text-align:center;padding:28px 8px 8px}
.ask-empty-mark{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--grad-soft);color:var(--brand-1);margin-bottom:14px}
.ask-empty h2{font-size:var(--text-xl);margin:0 0 8px}
.ask-empty p{max-width:520px;margin:0 auto 22px}
.ask-suggest,.ask-follow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ask-follow{justify-content:flex-start;margin:-6px 0 8px 44px}
.ask-follow:empty{display:none}
.ask-chip{border:1px solid var(--border);background:var(--card);color:var(--ink-2);border-radius:var(--pill);padding:8px 14px;font:inherit;font-size:var(--text-sm);cursor:pointer;text-align:left;transition:background .16s,border-color .16s,color .16s}
.ask-chip:hover,.ask-chip:focus-visible{background:var(--grad-soft);border-color:var(--border-strong);color:var(--ink)}
.ask-chip[disabled]{opacity:.5;cursor:default}
.ask-msg{display:flex;gap:12px;align-items:flex-start}
.ask-msg.is-owner{justify-content:flex-end}
.ask-bubble{max-width:80%;background:var(--panel);border-radius:18px 18px 4px 18px;padding:10px 16px;line-height:1.5;overflow-wrap:anywhere}
.ask-mark{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--grad-soft);color:var(--brand-1)}
.ask-body{flex:1;min-width:0;padding-top:4px}
.ask-text{overflow-wrap:anywhere}
.ask-text p{margin:0 0 10px;line-height:1.6}
.ask-text ul{margin:0 0 10px;padding-left:20px;line-height:1.6}
.ask-text li{margin:4px 0}
.ask-text b{font-weight:700}
.ask-cite{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin:0 2px;border-radius:9px;background:var(--panel-2);color:var(--ink-2);font-size:11px;font-weight:700;line-height:1;text-decoration:none;vertical-align:1px}
a.ask-cite:hover,a.ask-cite:focus-visible{background:var(--grad-soft);color:var(--ink)}
.ask-sources{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:2px}
.ask-sources-label{font-size:var(--text-xs);color:var(--muted);margin-right:2px}
.ask-sources a{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 10px 3px 3px;border:1px solid var(--border);border-radius:var(--pill);font-size:var(--text-xs);color:var(--ink-2);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-sources a:hover,.ask-sources a:focus-visible{border-color:var(--border-strong);background:var(--grad-soft)}
.ask-sources a .ask-cite{margin:0;flex:none}
.ask-wait{margin:0;padding-top:2px}
.ask-wait-text{background:linear-gradient(90deg,var(--muted) 0%,var(--muted) 30%,var(--brand-1) 45%,var(--brand-2) 55%,var(--muted) 70%,var(--muted) 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ask-shimmer 2.4s linear infinite}
@keyframes ask-shimmer{from{background-position:100% 0}to{background-position:0 0}}
.is-thinking .ask-mark{animation:pulse 1.6s ease-in-out infinite}
.ask-error{margin:0 0 10px;color:var(--bad-ink)}
.ask-foot{position:sticky;bottom:0;z-index:5;margin-top:auto;padding:18px 0 14px;background:linear-gradient(to bottom,transparent,var(--bg) 18px)}
.ask-composer{display:flex;align-items:flex-end;gap:8px;background:var(--card);border:1px solid var(--border-strong);border-radius:20px;padding:7px 7px 7px 18px;box-shadow:0 8px 28px rgba(11,12,15,.08);transition:border-color .16s,box-shadow .16s}
.ask-composer:focus-within{border-color:var(--brand-1);box-shadow:0 8px 28px rgba(11,12,15,.08),0 0 0 3px rgba(39,114,249,.14)}
.ask-composer textarea{flex:1;min-width:0;border:0;background:none;resize:none;font:inherit;font-size:var(--text);color:var(--ink);padding:9px 0;max-height:200px;outline:none;line-height:1.45}
.ask-composer textarea::placeholder{color:var(--faint)}
.ask-send{flex:none;width:38px;height:38px;border:0;border-radius:50%;background:var(--grad);color:var(--on-brand);display:grid;place-items:center;cursor:pointer;transition:filter .16s}
.ask-send:hover{filter:brightness(1.08)}
.ask-send[disabled]{opacity:.45;cursor:default;filter:none}
.ask-note{text-align:center;margin:10px 0 0}
@media (max-width:640px){.ask-bubble{max-width:90%}.ask-follow{margin-left:0}.ask-foot{padding-bottom:10px}.ask-empty{padding-top:12px}}
@media (prefers-reduced-motion:reduce){.ask-wait-text{animation:none;color:var(--muted);background:none}.is-thinking .ask-mark{animation:none}.ask-chip,.ask-composer,.ask-send{transition:none}}
[data-theme="dark"] .ask-composer,[data-theme="dark"] .ask-history-menu{box-shadow:0 8px 28px rgba(0,0,0,.45)}
.ask-text a.ask-page,.ask-text a.ask-guide{color:var(--link);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.ask-text a.ask-page:hover,.ask-text a.ask-guide:hover{text-decoration-thickness:2px}
.ask-home{display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:7px 7px 7px 10px;border:1px solid var(--border-strong);border-radius:20px;background:var(--card);transition:border-color .16s,box-shadow .16s}
.ask-home:focus-within{border-color:var(--brand-1);box-shadow:0 0 0 3px rgba(39,114,249,.14)}
.ask-home input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:var(--text);color:var(--ink);padding:8px 0;outline:none}
.ask-home input::placeholder{color:var(--faint)}
@media (max-width:640px){.ask-home input::placeholder{font-size:var(--text-sm)}}

/* Language support: a chat's language, and the original / English switch in Conversations */
.lang-label{display:inline-block;padding:0 5px;border:1px solid var(--border);border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.04em;line-height:16px;color:var(--ink-2);vertical-align:1px}
.convo-top .lang-label{margin-right:6px}
.lang-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:var(--text-sm)}
.msg-tr{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--border);font-size:13px;color:var(--ink-2)}
.msg-tr-label{display:inline-block;margin-right:4px;padding:0 6px;border-radius:var(--pill);background:var(--panel-2);color:var(--muted);font-size:12px;font-weight:700;vertical-align:1px}
.lang-cost{max-width:420px}
.lead-lang{margin-top:4px;color:var(--muted)}

/* ---- Messages (14 Oct): one place at the top of the screen, over the page, never pushing it down ----
   ok: a short note that fades; busy: until the answer; error: until closed; confirm: a decision, until answered.
   The soft Ami tint for every message; a decision or a problem also gets the Ami gradient edge. */
.toasts{position:fixed;top:calc(var(--topbar-h) + 12px);left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:min(560px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 10px 10px 16px;border:1px solid var(--border);border-radius:12px;background-color:var(--card);background-image:var(--grad-soft);box-shadow:0 10px 30px rgba(11,12,15,.10);color:var(--ink);font-size:var(--text-sm);line-height:1.45;animation:toast-in .2s ease-out}
.toast-text{flex:1;min-width:0;margin:0;padding:4px 0;overflow-wrap:anywhere}
.toast.is-ok .toast-text::before{content:"";display:inline-block;width:14px;height:8px;margin:0 10px 3px 0;border-left:2px solid var(--brand-1);border-bottom:2px solid var(--brand-2);transform:rotate(-45deg)}
.toast.is-busy .toast-text::before,.toast.is-error .toast-text::before{content:"";display:inline-block;width:8px;height:8px;margin:0 10px 1px 2px;border-radius:50%;vertical-align:1px}
.toast.is-busy .toast-text::before{background:var(--grad);animation:pulse 1.4s ease-in-out infinite}
.toast.is-error .toast-text::before{background:var(--bad-ink)}
.toast.is-error,.toast.is-confirm{border:1.5px solid transparent;background-image:var(--grad-soft),linear-gradient(var(--card),var(--card)),var(--grad);background-origin:border-box;background-clip:padding-box,padding-box,border-box}
.toast.is-confirm{padding:12px 12px 12px 18px;box-shadow:0 14px 40px rgba(11,12,15,.16)}
.toast-actions{display:flex;gap:8px;margin-left:auto;flex:none}
.toast-close{flex:none;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.toast-close:hover,.toast-close:focus-visible{background:var(--panel);color:var(--ink)}
.toast.is-leaving{opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
[data-theme="dark"] .toast{box-shadow:0 10px 30px rgba(0,0,0,.45)}
@media (max-width:640px){.toasts{top:calc(var(--topbar-h) + 8px)}.toast-actions{width:100%;justify-content:flex-end}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}.toast.is-busy .toast-text::before{animation:none}.toast.is-leaving{transition:none}}

/* Banners that describe the page (Finish setup, You're live, a warning): the same soft Ami tint;
   one that needs attention (warn, bad) also gets the Ami gradient edge. */
.notice{background-color:var(--card);background-image:var(--grad-soft);border:1px solid var(--border);color:var(--ink)}
.notice-good svg{color:var(--good-ink)}
.notice-warn,.notice-bad{border:1.5px solid transparent;background-image:var(--grad-soft),linear-gradient(var(--card),var(--card)),var(--grad);background-origin:border-box;background-clip:padding-box,padding-box,border-box}
.notice-warn svg{color:var(--warn-ink)}
.notice-bad svg{color:var(--bad-ink)}
/* Observation */
.steps-list{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.steps-list li{padding:14px 16px;border-radius:12px;background:var(--panel-2)}
.steps-list li.is-done{opacity:.75}.steps-list li.is-current{box-shadow:inset 0 0 0 2px var(--brand-1)}
.steps-list p{margin:4px 0 8px}
.big-line{font-size:var(--text-lg);line-height:1.5}

/* ---- The customer's page in a browser frame (14 Oct): the report's "See your page with Ami" ----
   An address bar on desktop, a phone frame on Phone; Today / With Ami on the preview, with an
   "Added by Ami" flag on the box (drawn inside the page by app.js) and "See what Ami added". */
.sf-eyebrow{margin:0 0 6px;font-size:var(--text-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--link)}   /* v8.1: the text-safe blue (brand-1 was 4.0:1 on the grey) */
.sf-title{margin:0 0 14px;font-size:clamp(20px,2.4vw,28px);line-height:1.2;letter-spacing:-.01em}
.preview-banner.sf-note{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:14px;padding:10px 12px 10px 16px;border:1px solid var(--border);border-radius:12px;background-color:var(--card);background-image:var(--grad-soft);color:var(--ink)}
.sf-note p{margin:0;font-size:var(--text-sm);font-weight:500}
.sf-note .btn{margin-left:auto}
.sf-bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.sf-seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--pill);background:var(--panel-2)}
.sf-seg--end{margin-left:auto}
.sf-seg button{border:0;background:none;padding:8px 18px;border-radius:var(--pill);font:inherit;font-size:var(--text-sm);font-weight:600;color:var(--muted);cursor:pointer;transition:background .16s,color .16s}
.sf-seg button:hover{color:var(--ink)}
.sf-seg button.is-on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(11,12,15,.12)}
.sf-seg--ami button.is-on[data-view="ami"]{background:var(--grad);color:var(--on-brand)}
.sf-device{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--frame-bg);box-shadow:0 12px 40px rgba(11,12,15,.08)}
.sf-chrome{display:flex;align-items:center;gap:16px;height:44px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--panel)}
.sf-dots{display:flex;gap:7px;flex:none}
.sf-dots i{width:11px;height:11px;border-radius:50%;background:var(--border-strong)}
.sf-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--muted)}
.sf-view{position:relative}
.sf-frame{display:block;width:100%;height:640px;border:0;background:var(--frame-bg)}
.sf-jump{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:12px 22px;border:0;border-radius:var(--pill);background:var(--grad);color:var(--on-brand);font:inherit;font-size:var(--text-sm);font-weight:700;white-space:nowrap;box-shadow:0 10px 28px rgba(255,37,133,.28);cursor:pointer;animation:toast-in .2s ease-out}
.sf-jump[hidden]{display:none}
.sf.is-phone .sf-device{width:min(418px,100%);margin:0 auto;border:14px solid var(--device);border-radius:46px;box-shadow:0 18px 50px rgba(11,12,15,.18)}
.sf.is-phone .sf-chrome{display:none}
.sf.is-phone .sf-frame{height:740px}
[data-theme="dark"] .sf-device{box-shadow:0 12px 40px rgba(0,0,0,.45)}
@media (max-width:640px){.sf-frame{height:560px}.sf.is-phone .sf-frame{height:620px}.sf.is-phone .sf-device{border-width:10px;border-radius:36px}.sf-seg button{padding:7px 12px}.sf-chrome{gap:10px;padding:0 12px}}
@media (prefers-reduced-motion:reduce){.sf-jump{animation:none}.sf-seg button{transition:none}}
/* EXAMPLE-PAGE: "Try it on an example page" on the Test page */
.ex-tpl{flex-wrap:wrap;max-width:100%}
.sf-bar .btn .ic{vertical-align:-3px}
.ex-note{margin:10px 0 0}
.sf-seg button:focus-visible{outline:2px solid var(--brand-1);outline-offset:2px}

/* ---- Enterprise (14 Oct): how Ami's parts connect, in the dashboard's light design ----
   Inputs left, the store in the middle, what changes on the site right, MCP on top. app.js draws the
   lines from where the boxes are; a line's dashes move (and bubbles run along the input and feedback
   lines) only when something went along it this week. */
.ent-head{display:flex;align-items:flex-start;flex-wrap:wrap;gap:16px}
.ent-head .sf-seg{margin-left:auto}
.ent-map{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:". mcp ." "hes store live" "hl store upd" "emb store fb";grid-template-rows:auto auto auto auto;column-gap:clamp(48px,5.5vw,96px);row-gap:22px;padding:8px 0 24px}
.ent-lines{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ent-box{position:relative;z-index:1;padding:18px 20px;border:1.5px solid var(--border);border-radius:16px;background:var(--card);box-shadow:0 6px 20px rgba(11,12,15,.05)}
.ent-box header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ent-box header>:nth-child(2){margin-left:auto}
.ent-box header .ent-switch{flex:none}
.ent-box h2{margin:0;font-size:17px;font-weight:700}
.ent-box p{margin:0 0 6px;color:var(--ink-2);font-size:var(--text-sm);line-height:1.45}
.ent-box p.ent-num{margin:4px 0;color:var(--ink);font-size:28px;font-weight:800;letter-spacing:-.01em}
.ent-box p.ent-meta{color:var(--muted)}
.ent-box p.ent-quote{font-style:italic}
.ent-box .btn{margin-top:8px}
.ent-box--mcp{grid-area:mcp}.ent-box--hes{grid-area:hes}.ent-box--hl{grid-area:hl}.ent-box--emb{grid-area:emb}
.ent-box--store{grid-area:store}.ent-box--live{grid-area:live}.ent-box--upd{grid-area:upd}.ent-box--fb{grid-area:fb}
.ent-box--hes{border-color:color-mix(in srgb,var(--warn-ink) 40%,var(--border))}
.ent-box--hl{border-color:color-mix(in srgb,var(--brand-1) 35%,var(--border))}
.ent-box--emb{border-color:color-mix(in srgb,var(--brand-2) 35%,var(--border))}
.ent-box--live{border-color:color-mix(in srgb,var(--good-ink) 40%,var(--border))}
.ent-box--upd{border-color:color-mix(in srgb,var(--brand-2) 40%,var(--border))}
.ent-box--fb{border-color:color-mix(in srgb,var(--brand-1) 40%,var(--border))}
.ent-box--store,.ent-box--mcp{border:2px solid transparent;background-image:var(--grad-soft),linear-gradient(var(--card),var(--card)),var(--grad);background-origin:border-box;background-clip:padding-box,padding-box,border-box}
.ent-box--store{align-self:center;margin-top:0;padding:26px 24px;box-shadow:0 14px 40px rgba(39,114,249,.10)}
.ent-box--mcp{align-self:start;margin-bottom:12px}
.ent-box--store h2{font-size:20px;margin-bottom:6px}
.ent-stats{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px}
.ent-stats b{display:block;color:var(--ink);font-size:clamp(18px,1.55vw,24px);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ent-stats span{color:var(--muted);font-size:var(--text-xs)}
.ent-chips span{display:inline-block;margin:4px 6px 0 0;padding:3px 10px;border-radius:var(--pill);background:var(--panel-2);color:var(--ink);font-size:var(--text-xs);font-weight:700}
.ent-badge{padding:2px 10px;border-radius:var(--pill);background-image:var(--grad-soft);color:var(--brand-1);font-size:var(--text-xs);font-weight:700;white-space:nowrap}
.ent-badge--good{background:var(--good-bg);color:var(--good-ink)}
.ent-on{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--pill);background:var(--good-bg);color:var(--good-ink);font-size:var(--text-xs);font-weight:700}
.ent-on::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ent-on.is-off{background:var(--panel-2);color:var(--muted)}
.ent-line{fill:none;stroke:var(--muted);stroke-width:1.75;stroke-dasharray:6 6;opacity:.7}
.ent-line--emb-in,.ent-line--emb-out{stroke:var(--brand-2);opacity:.75}
.ent-line--fb-in,.ent-line--fb-out{stroke:var(--brand-1);opacity:.75}
.ent-line--mcp{stroke:var(--brand-1);opacity:.5}
.ent-line.is-moving{animation:ent-dash 1.4s linear infinite}
@keyframes ent-dash{to{stroke-dashoffset:-12}}
.ent-arrowhead{fill:var(--muted)}
.ent-bubble{fill:var(--brand-1);filter:drop-shadow(0 0 4px rgba(39,114,249,.55))}
.ent-bubble--emb-in{fill:var(--brand-2);filter:drop-shadow(0 0 4px rgba(255,37,133,.5))}
@media (max-width:900px){.ent-map{grid-template-columns:minmax(0,1fr);grid-template-areas:"mcp" "hes" "hl" "emb" "store" "live" "upd" "fb"}.ent-lines{display:none}}
@media (prefers-reduced-motion:reduce){.ent-line.is-moving{animation:none}}
.ent-map.is-example .ent-on.is-off{background:var(--good-bg);color:var(--good-ink)}
.ent-box.is-paused{opacity:.55}
.ent-box.is-paused .ent-num{color:var(--muted)}
.ent-switch input:disabled{cursor:default}
.ent-switch input:disabled+.switch-track{opacity:.85}
.ent-map [data-key].is-bump{animation:ent-bump .6s ease-out}
@keyframes ent-bump{0%{color:var(--brand-1)}100%{color:inherit}}
@media (prefers-reduced-motion:reduce){.ent-map [data-key].is-bump{animation:none}}

/* ---- Questions for optimisation (14 Oct): the latest questions, most asked first, for the AEO strategy ---- */
.qx-head{display:flex;align-items:flex-start;flex-wrap:wrap;gap:16px 28px}
.qx-head>div:first-child{flex:1 1 420px;min-width:0}
.qx-head .muted{max-width:640px}
.qx-head-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-left:auto}
.qx-date{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 14px;border:1px solid var(--border);border-radius:var(--pill);background-color:var(--card);background-image:var(--grad-soft);color:var(--ink);font-size:var(--text-sm);font-weight:600;white-space:nowrap}
.qx-dot{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 0 rgba(39,114,249,.45);animation:qx-pulse 2.4s ease-out infinite}
@keyframes qx-pulse{0%{box-shadow:0 0 0 0 rgba(39,114,249,.45)}70%{box-shadow:0 0 0 8px rgba(39,114,249,0)}100%{box-shadow:0 0 0 0 rgba(39,114,249,0)}}
.qx-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:4px 0 18px}
.qx-tile{padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.qx-tile b{display:block;color:var(--ink);font-size:28px;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.qx-tile b.qx-tile-text{font-size:19px;padding:5px 0 3px}
.qx-tile span{color:var(--muted);font-size:var(--text-sm)}
.qx-tile.is-gap{border:1.5px solid transparent;background-image:var(--grad-soft),linear-gradient(var(--card),var(--card)),var(--grad);background-origin:border-box;background-clip:padding-box,padding-box,border-box}
.qx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.qx-chip{border:1px solid var(--border);background:var(--card);color:var(--ink-2);border-radius:var(--pill);padding:6px 12px;font:inherit;font-size:var(--text-xs);font-weight:600;cursor:pointer;transition:background .16s,border-color .16s}
.qx-chip span{margin-left:4px;color:var(--muted);font-weight:500}
.qx-chip:hover,.qx-chip:focus-visible{background:var(--grad-soft);border-color:var(--border-strong);color:var(--ink)}
.qx-chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.qx-chip.is-on span{color:inherit;opacity:.7}
.qx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.qx-item{border:1px solid var(--border);border-radius:14px;background:var(--card);transition:background .16s,border-color .16s,box-shadow .16s;animation:toast-in .25s ease-out}
.qx-item summary{display:flex;align-items:center;gap:16px;padding:14px 18px;cursor:pointer;list-style:none;border-radius:14px}
.qx-item summary::-webkit-details-marker{display:none}
.qx-item summary:focus-visible{outline:2px solid var(--brand-1);outline-offset:2px}
.qx-item:has(details[open]){border-color:var(--border-strong);box-shadow:0 8px 24px rgba(11,12,15,.07)}
.qx-chev{width:9px;height:9px;margin:0 4px 0 6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .18s}
details[open] .qx-chev{transform:rotate(225deg) translate(-2px,0)}
.qx-typed{margin:0 18px 16px 68px;padding:12px 16px;border-radius:12px;background-image:var(--grad-soft);animation:toast-in .2s ease-out}
.qx-typed-label{margin:0 0 8px;color:var(--muted);font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.qx-typed ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.qx-typed li{color:var(--ink-2);font-size:var(--text-sm);font-style:italic}
.qx-typed .btn{margin-top:12px}
.qx-item:hover{background-image:var(--grad-soft);border-color:var(--border-strong);box-shadow:0 6px 18px rgba(11,12,15,.06)}
.qx-rank{flex:none;width:34px;text-align:right;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.qx-body{flex:1;min-width:0}
.qx-q{display:block;margin:0 0 4px;color:var(--ink);font-size:16px;font-weight:650;line-height:1.35}
.qx-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;color:var(--muted);font-size:var(--text-xs)}
.qx-body{display:block}
.qx-chip--new{display:inline-flex;align-items:center;gap:6px}
.qx-new-dot{width:7px;height:7px;border-radius:50%;background:var(--grad)}
.qx-chip--new.is-on .qx-new-dot{background:var(--bg)}
.qx-chips-sep{width:1px;align-self:stretch;margin:2px 4px;background:var(--border)}
.qx-new{color:var(--brand-1);font-weight:700}
.qx-side{display:flex;align-items:center;gap:10px;flex:none}
.qx-status{padding:4px 10px;border-radius:var(--pill);font-size:var(--text-xs);font-weight:700;white-space:nowrap}
.qx-status.is-ok{background:var(--good-bg);color:var(--good-ink)}
.qx-status.is-gap{background-image:var(--grad-soft);color:var(--ink)}
.qx-more{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 6px}
.qx-sentinel{height:1px}
.qx-empty{padding:40px 24px;border:1px dashed var(--border-strong);border-radius:14px;text-align:center}
@media (max-width:700px){.qx-head-side{align-items:flex-start;margin-left:0;max-width:100%}.qx-date{white-space:normal}.qx-item summary{flex-wrap:wrap;gap:8px 12px;padding:12px 14px}.qx-rank{width:auto;text-align:left}.qx-side{width:100%;padding-left:0;justify-content:space-between}.qx-q{font-size:15px}.qx-typed{margin:0 14px 14px}}
@media (prefers-reduced-motion:reduce){.qx-dot,.qx-item{animation:none}}

/* ---- The left menu's scrollbar (14 Oct): thin and quiet, only while the pointer is over the menu ---- */
.sidebar{scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-gutter:stable}
.sidebar:hover,.sidebar:focus-within{scrollbar-color:var(--border-strong) transparent}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{border-radius:6px;background:transparent}
.sidebar:hover::-webkit-scrollbar-thumb{background:var(--border-strong)}

/* ---- Finish setup (14 Oct): the three steps as arrows - done in the Ami gradient, the next one outlined, the rest waiting ---- */
.setup-steps{display:flex;align-items:center;flex:none;margin-left:auto}
.setup-step{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 16px 0 22px;margin-left:-6px;background:var(--panel-2);color:var(--muted);font-size:var(--text-xs);font-weight:700;white-space:nowrap;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%)}
.setup-step:first-child{margin-left:0;padding-left:14px;border-radius:8px 0 0 8px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}
.setup-step i{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--card);color:var(--muted);font-style:normal;font-size:11px}
.setup-step.is-done{background:var(--grad);color:var(--on-brand)}
.setup-step.is-done i{background:rgba(255,255,255,.25);color:var(--on-brand)}
.setup-step.is-now{background-color:var(--card);background-image:var(--grad-soft);color:var(--ink)}
.setup-step.is-now i{background:var(--grad);color:var(--on-brand)}
.setup-banner .btn{margin-left:14px}
@media (max-width:900px){.setup-step-label{display:none}.setup-step{padding:0 14px 0 20px}.setup-step:first-child{padding-left:12px}}
@media (max-width:640px){.setup-steps{display:none}}
/* a step still to do: an outline in the arrow's own shape (a border can't follow the clipped shape, so two layers) */
.setup-step.is-todo,.setup-step.is-now{position:relative;isolation:isolate;background:none}
.setup-step.is-todo::before,.setup-step.is-now::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--border-strong);clip-path:inherit}
.setup-step.is-todo::after,.setup-step.is-now::after{content:"";position:absolute;inset:1.5px 1.5px 1.5px 2.5px;z-index:-1;background:var(--card);clip-path:inherit}
.setup-step.is-now::before{background:var(--grad)}
.setup-step.is-now::after{background-color:var(--card);background-image:var(--grad-soft)}
.setup-step.is-todo{color:var(--ink-2)}
/* Stage (or local): a small label centred under the date in the top bar, not pinned to the window's centre */
.topbar .date{display:inline-flex;flex-direction:column;align-items:center;gap:3px;line-height:1.2}
.env-pill{padding:1px 10px 2px;border-radius:var(--pill);background:var(--warn);color:var(--on-brand);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:640px){.topbar .date{display:inline-flex}.topbar .date{font-size:0}.topbar .date .env-pill{font-size:10px}}
.home-sets-bar{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:0 0 6px}

/* ---- The question list (14 Oct): clear and confident - a tinted badge, the question, what Ami does about it,
   and the status in words on the right ---- */
.qlist{display:flex;flex-direction:column;gap:10px}
.qlist .q{display:flex;align-items:center;gap:16px;padding:14px 18px;border:1px solid var(--border);border-radius:14px;background:var(--card);transition:border-color .16s,box-shadow .16s}
.qlist .q:hover{border-color:var(--border-strong);box-shadow:0 6px 18px rgba(11,12,15,.05)}
.qlist .q-mark{display:grid;place-items:center;flex:none;width:40px;height:40px;margin:0;border-radius:12px}
.qlist .q-mark svg{display:block;width:24px;height:24px}
.qlist .q-no .q-mark{background:var(--bad-bg)!important;color:var(--bad-ink)}
.qlist .q-part .q-mark{background:var(--warn-bg)!important;color:var(--warn-ink)}
.qlist .q-yes .q-mark{background:var(--good-bg)!important;color:var(--good-ink)}
.qlist .q-ami .q-mark{background:var(--grad)!important;color:var(--on-brand)}
.qlist .q-na .q-mark{background:var(--panel-2)!important;color:var(--muted)}
.qlist .q-text{color:var(--ink);font-size:16px;font-weight:650;line-height:1.35}
.qlist .q-line{display:flex;align-items:center;gap:6px;margin-top:3px;color:var(--muted);font-size:var(--text-sm)}
.qlist .q-no .q-line,.qlist .q-part .q-line{color:var(--ink-2)}
.qlist .q-spark{display:inline-grid;place-items:center;color:var(--brand-2)}
.qlist .q-pill{flex:none;margin-left:auto;padding:4px 12px;border-radius:var(--pill);font-size:var(--text-xs);font-weight:700;white-space:nowrap}
.qlist .q-no .q-pill{background:var(--bad-bg);color:var(--bad-ink)}
.qlist .q-part .q-pill{background:var(--warn-bg);color:var(--warn-ink)}
.qlist .q-yes .q-pill,.qlist .q-ami .q-pill{background:var(--good-bg);color:var(--good-ink)}
.qlist .q-na .q-pill{background:var(--panel-2);color:var(--muted)}
@media (max-width:640px){.qlist .q{flex-wrap:wrap;gap:10px 14px;padding:12px 14px}.qlist .q-body{flex:1 1 calc(100% - 60px)}.qlist .q-pill{margin-left:54px}.qlist .q-text{font-size:15px}}
.q-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.q-count{margin-left:auto;padding:4px 12px;border-radius:var(--pill);background-image:var(--grad-soft);color:var(--ink);font-size:var(--text-xs);font-weight:700}

/* ---- Side panel page: the animated example (panel-setup.js plays it) ---------------------------
   A picture of a shop's page: the assist offers "Ask a question", the page slides over and the
   chat opens beside it with the bar across the top; a sheet from the bottom on the phone. The
   owner's colours come in as --b-* (Brand), so it follows the pickers below. */
#panel-how .panel-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pnx-seg{margin-left:auto}
.pnx-wrap{position:relative;--pe:cubic-bezier(.2,0,0,1);--pd:.44s}
.pnx{container-type:inline-size;max-width:920px;margin:0 auto;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--shop-bg);box-shadow:0 12px 40px rgba(11,12,15,.08)}
.pnx-chrome{display:flex;align-items:center;gap:12px;height:34px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--border)}
.pnx-url{flex:1;max-width:340px;margin:0 auto;padding:3px 12px;border-radius:999px;background:var(--card);color:var(--muted);font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnx-screen{position:relative;aspect-ratio:16/8.6;overflow:hidden;background:var(--shop-bg);color:var(--shop-ink);font-family:var(--b-font,var(--font))}
.pnx-page{position:absolute;inset:0;padding:0;transition:left var(--pd) var(--pe),top var(--pd) var(--pe)}
.pnx-site{display:flex;align-items:center;gap:3cqw;height:6cqw;padding:0 3cqw;border-bottom:1px solid var(--shop-rule);font-size:max(12px,1.6cqw)}
.pnx-site span{width:7cqw;height:.9cqw;border-radius:2px;background:var(--shop-line-2)}
.pnx-site b{margin-right:auto;font-weight:800;color:var(--shop-brand)}
.pnx-product{display:grid;grid-template-columns:1.1fr .9fr;gap:3cqw;padding:3cqw}
.pnx-photo{aspect-ratio:1/1;max-height:40cqw;border-radius:6px;background:linear-gradient(135deg,var(--shop-ph-1),var(--shop-ph-2))}
.pnx-info{display:flex;flex-direction:column;gap:1.2cqw;min-width:0}
.pnx-info i{display:block;height:1cqw;border-radius:2px;background:var(--shop-bar)}
.pnx-info i.t{height:2.4cqw;width:85%;background:var(--shop-bar-2)}.pnx-info i.t2{height:2.4cqw;width:55%;background:var(--shop-bar-2)}
.pnx-info i.pr{height:2.2cqw;width:30%;margin:.6cqw 0;background:var(--shop-bar-3)}.pnx-info i.s{width:70%}
.pnx-buy{display:block;padding:1.3cqw;border-radius:4px;background:var(--shop-brand);color:var(--shop-bg);text-align:center;font-weight:700;font-size:max(12px,1.4cqw)}
.pnx-assist{margin-top:.6cqw;padding:1.4cqw 1.6cqw;border:1px solid var(--shop-line-2);border-radius:10px;background:var(--shop-bg);box-shadow:0 8px 24px rgba(16,24,40,.14);font-size:max(12px,1.35cqw);opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s var(--pe)}
.pnx-assist b{display:block;margin-bottom:1cqw}
.pnx-a-btns{display:flex;gap:1cqw;flex-wrap:wrap}
.pnx-a-btns span{padding:.6cqw 1.4cqw;border-radius:999px;background:var(--b-accent);color:var(--b-accent-text);font-weight:700;white-space:nowrap}
.pnx-a-btns .pnx-ask{background:transparent;color:var(--shop-ink);box-shadow:inset 0 0 0 1.5px var(--shop-bar-3);transition:transform .12s,box-shadow .12s}
.pnx-bar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:1.4cqw;height:5cqw;padding:0 2cqw;background:var(--b-head);color:var(--b-head-text);font-size:max(12px,1.4cqw);transform:translateY(-101%);transition:transform var(--pd) var(--pe)}
.pnx-bar b{width:22cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnx-sub{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnx-close{white-space:nowrap}
.pnx-logo{display:inline-flex;align-items:center;flex:none}
.pnx-logo img{height:2.4cqw;min-height:14px;max-width:12cqw;object-fit:contain}
.pnx-panel{position:absolute;left:0;top:5cqw;bottom:0;width:28cqw;z-index:2;display:flex;flex-direction:column;gap:1.2cqw;padding:2cqw 1.8cqw;background:var(--shop-panel);border-right:1px solid var(--shop-line);font-size:max(12px,1.3cqw);transform:translateX(-101%);transition:transform var(--pd) var(--pe)}
.pnx-msg{max-width:94%;padding:1.1cqw 1.5cqw;border-radius:12px 12px 12px 4px;background:var(--shop-bg);border:1px solid var(--shop-line);line-height:1.4}
.pnx-hi{font-weight:600}
.pnx-q{align-self:flex-end;border-radius:12px 12px 4px 12px;border-color:transparent;background:color-mix(in srgb,var(--b-accent) 10%,var(--shop-bg));font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--pe)}
.pnx-chip{align-self:flex-start;max-height:7cqw;overflow:hidden;padding:.7cqw 1.4cqw;border-radius:999px;background:var(--b-accent);color:var(--b-accent-text);font-weight:600;white-space:nowrap;transition:opacity .2s,transform .2s,max-height .3s var(--pe) .1s,padding .3s var(--pe) .1s,margin .3s var(--pe) .1s}
.pnx-dots{display:flex;gap:4px;padding:1.2cqw 1.5cqw;width:max-content;border-radius:12px 12px 12px 4px;background:var(--shop-bg);border:1px solid var(--shop-line);opacity:0;transition:opacity .2s}
.pnx-dots i{width:6px;height:6px;border-radius:50%;background:var(--shop-dot);animation:pnx-dot 1s infinite}.pnx-dots i:nth-child(2){animation-delay:.15s}.pnx-dots i:nth-child(3){animation-delay:.3s}
@keyframes pnx-dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
.pnx-a{display:none}.pnx-a span{opacity:0;transition:opacity .45s ease}
.pnx-input{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:.5cqw .5cqw .5cqw 1.6cqw;border-radius:999px;background:var(--shop-bg);border:1.5px solid var(--shop-line);color:var(--shop-muted)}
.pnx-input i{width:3cqw;height:3cqw;min-width:20px;min-height:20px;border-radius:50%;background:var(--b-accent)}
.pnx-cursor{position:absolute;z-index:5;left:var(--cx,92%);top:var(--cy,96%);color:var(--shop-cursor);opacity:0;transform:translate(-30%,-10%);transition:left .7s var(--pe),top .7s var(--pe),opacity .25s,transform .12s;filter:drop-shadow(0 1px 1px rgba(255,255,255,.9))}
/* the moments of the loop */
.pnx-wrap.is-assist .pnx-assist{opacity:1;transform:none}
.pnx-wrap.is-cursor .pnx-cursor{opacity:1;left:var(--tx,60%);top:var(--ty,60%)}
.pnx-wrap.is-press .pnx-ask{transform:scale(.94);box-shadow:inset 0 0 0 1.5px var(--b-accent)}
.pnx-wrap.is-open .pnx-page{left:28cqw;top:5cqw}
.pnx-wrap.is-open .pnx-bar,.pnx-wrap.is-open .pnx-panel{transform:none}
.pnx-wrap.is-asked .pnx-chip{opacity:0;transform:scale(.96);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:-1.2cqw}
.pnx--phone .pnx-chip{max-height:30px}.pnx-wrap.is-asked .pnx--phone .pnx-chip{max-height:0;margin-bottom:-8px}
.pnx-wrap.is-asked .pnx-q{opacity:1;transform:none}
.pnx-wrap.is-typing .pnx-dots{opacity:1}
.pnx-wrap.is-answered .pnx-dots{display:none}
.pnx-wrap.is-answered .pnx-a{display:block}
.pnx-wrap.is-answered .pnx-a span{opacity:1}.pnx-wrap.is-answered .pnx-a span+span{transition-delay:.35s}
.pnx-wrap:not(.is-answered) .pnx-a span{transition:none}
/* the phone */
.pnx--phone{width:300px;max-width:100%;border:10px solid var(--shop-ink);border-radius:36px;box-shadow:0 18px 50px rgba(11,12,15,.18)}
.pnx--phone .pnx-screen{aspect-ratio:9/18}
.pnx--phone .pnx-site{height:auto;padding:12px 14px;font-size:13px}
.pnx--phone .pnx-photo{margin:12px 14px;max-height:none;height:150px;aspect-ratio:auto}
.pnx--phone .pnx-info{padding:0 14px;gap:7px}.pnx--phone .pnx-info i{height:6px}.pnx--phone .pnx-info i.t{height:14px}.pnx--phone .pnx-info i.pr{height:12px;margin:4px 0}
.pnx--phone .pnx-buy{padding:9px;font-size:12px}
.pnx--phone .pnx-assist{padding:9px 10px;font-size:12px}.pnx--phone .pnx-assist b{margin-bottom:6px}
.pnx--phone .pnx-a-btns{gap:6px}.pnx--phone .pnx-a-btns span{padding:4px 9px}
.pnx-scrim{position:absolute;inset:0;z-index:2;background:rgba(11,12,15,.42);opacity:0;transition:opacity var(--pd) ease}
.pnx--phone .pnx-panel{top:auto;left:0;right:0;width:auto;height:86%;gap:8px;padding:0 12px 12px;border-right:0;border-radius:16px 16px 0 0;font-size:12px;transform:translateY(102%);box-shadow:0 -10px 30px rgba(11,12,15,.25)}
.pnx-head{position:relative;display:flex;align-items:center;gap:7px;margin:0 -12px 4px;padding:18px 12px 10px;border-radius:16px 16px 0 0;background:var(--b-head);color:var(--b-head-text)}
.pnx-head b{flex:1}.pnx-grab{position:absolute;top:6px;left:50%;width:34px;height:4px;margin-left:-17px;border-radius:2px;background:currentColor;opacity:.4}
.pnx--phone .pnx-msg{padding:7px 10px}.pnx--phone .pnx-chip{padding:5px 10px}.pnx--phone .pnx-input{padding:4px 4px 4px 12px}
.pnx-cursor--tap{width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(11,12,15,.18);border:2px solid rgba(255,255,255,.9)}
.pnx-wrap.is-open .pnx--phone .pnx-page{left:0;top:0}
.pnx-wrap.is-open .pnx--phone .pnx-panel{transform:none}
.pnx-wrap.is-open .pnx--phone .pnx-scrim{opacity:1}
.pnx-pause{position:absolute;right:10px;bottom:10px;z-index:6;padding:6px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--ink);font:600 12px var(--font);cursor:pointer;opacity:.85}
.pnx-pause:hover,.pnx-pause:focus-visible{opacity:1}
.pnx-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 24px;margin:18px 0 0;padding:0;list-style:none;counter-reset:pnx}
.pnx-steps li{position:relative;padding-left:34px;font-size:var(--text-sm);color:var(--ink-2);counter-increment:pnx}
.pnx-steps li::before{content:counter(pnx);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--grad-soft);color:var(--ink);font-weight:700;font-size:12px}
.pnx-steps b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.pnx-wrap *{transition:none!important;animation:none!important}}

/* ---- Colours and logo (Brand), with a preview that follows the pickers ---- */
.brand-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
@media (max-width:900px){.brand-grid{grid-template-columns:1fr}}
.brand-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.brand-pick{display:flex;align-items:center;gap:8px}
.brand-pick input[type=color]{flex:none;width:44px;height:40px;padding:3px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--card);cursor:pointer}
.brand-pick .input{min-width:0;text-transform:lowercase}
.brand-warn p{margin:0 0 8px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--warn-bg);color:var(--warn-ink);font-size:var(--text-sm)}
.brand-warn button{margin-left:6px}
.brand-logo{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.brand-logo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand-logo-box{display:grid;place-items:center;min-width:120px;height:52px;padding:6px 12px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);background:var(--panel)}
.brand-logo-box img{max-height:38px;max-width:180px;object-fit:contain}
.brand-logo-row .input{flex:1;min-width:200px}
.brand-preview{position:sticky;top:84px;padding:18px;border-radius:var(--radius);background:var(--panel-2)}
.bp-stage{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;font-family:var(--b-font,var(--font))}
.bp-chat{width:250px;border-radius:16px;background:var(--shop-bg);box-shadow:0 14px 40px rgba(16,24,40,.18);overflow:hidden;color:var(--shop-ink);font-size:calc(13px * var(--lk-scale,1))}
.bp-top{display:flex;align-items:center;gap:8px;padding:11px 12px;background:var(--b-head);color:var(--b-head-text)}
.bp-top b{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-logo{display:inline-flex;align-items:center}.bp-logo img{height:20px;max-width:90px;object-fit:contain}
.bp-body{display:flex;flex-direction:column;gap:8px;padding:12px}
.bp-q{align-self:flex-end;padding:6px 10px;border-radius:12px 12px 4px 12px;background:var(--shop-chip);font-weight:600}
.bp-a{padding:8px 10px;border-radius:12px 12px 12px 4px;border:1px solid var(--shop-line-2);line-height:1.4}
.bp-form{display:flex;align-items:center;justify-content:space-between;margin:0 10px 10px;padding:4px 4px 4px 12px;border-radius:var(--lk-r-btn,999px);background:var(--shop-chip);color:var(--shop-muted-2)}
.bp-form i{box-sizing:border-box;width:26px;height:26px;border-radius:var(--lk-r-send,50%);background:var(--lk-btn-bg,var(--b-accent));border:var(--lk-btn-bd,0);box-shadow:var(--lk-shadow,none)}
.bp-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.bp-note{position:relative;max-width:210px;padding:10px 26px 10px 12px;border-radius:var(--lk-r-box,12px);background:var(--b-note);color:var(--b-note-text);box-shadow:0 8px 24px rgba(16,24,40,.16);font-weight:600;font-size:13px;line-height:1.4}
.bp-note span{position:absolute;top:4px;right:8px;opacity:.7}
.bp-launch{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:var(--lk-r-btn,999px);background:var(--lk-btn-bg,var(--b-accent));color:var(--lk-btn-fg,var(--b-accent-text));border:var(--lk-btn-bd,0);font-weight:700;font-size:calc(13px * var(--lk-scale,1));box-shadow:var(--lk-launch-shadow,0 8px 24px rgba(16,24,40,.22))}
.bp-launch--img{padding:0;background:none;border:0;border-radius:0;box-shadow:none}.bp-launch--img img{display:block;object-fit:contain}
/* V8.4.8 ICON: Look > Chat button */
.ci-grid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;align-items:start}
@media (max-width:760px){.ci-grid{grid-template-columns:1fr}}
.ci-size{display:flex;align-items:center;gap:12px}.ci-size input{flex:1;max-width:260px}.ci-size output{min-width:80px;font-weight:600}
.ci-msg:empty{display:none}.ci-msg.is-bad{color:var(--bad-ink);font-weight:600}
.ci-preview{padding:18px;border-radius:var(--radius);background:var(--panel-2)}
.ci-corner{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;height:140px;padding:12px;border-radius:var(--radius-sm);background:var(--panel);border:1px dashed var(--border-strong)}
.ci-img{display:block;object-fit:contain}.ci-img[hidden],.ci-normal[hidden]{display:none}
.ci-normal{background:var(--device);color:var(--on-brand)}
.bp-btn{align-self:flex-start;display:inline-block;padding:6px 12px;border-radius:var(--lk-r-btn,999px);background:var(--lk-btn-bg,var(--b-accent));color:var(--lk-btn-fg,var(--b-accent-text));border:var(--lk-btn-bd,0);font-weight:700;box-shadow:var(--lk-shadow,none)}
.bp-stage--panel{display:block;border-radius:12px;overflow:hidden;background:var(--shop-bg);box-shadow:0 14px 40px rgba(16,24,40,.14);color:var(--shop-ink);font-size:calc(12.5px * var(--lk-scale,1))}
.bp-bar{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:var(--b-head);color:var(--b-head-text)}
.bp-bar b{width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bp-sub{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-close{white-space:nowrap}
.bp-split{display:grid;grid-template-columns:168px 1fr;min-height:190px}
.bp-panel{display:flex;flex-direction:column;gap:7px;padding:10px;background:var(--shop-panel);border-right:1px solid var(--shop-line)}
.bp-panel .bp-q{background:color-mix(in srgb,var(--b-accent) 10%,var(--shop-bg))}.bp-panel .bp-a{background:var(--shop-bg)}
.bp-chip{align-self:flex-start;padding:4px 10px;border:var(--lk-chip-bd,1.5px solid color-mix(in srgb,var(--b-accent) 45%,var(--shop-bg)));border-radius:var(--lk-r-btn,999px);background:var(--lk-chip-bg,var(--shop-bg));color:var(--lk-chip-fg,inherit);font-weight:600;box-shadow:var(--lk-shadow,none)}
.bp-panel .bp-btn{margin-top:2px}.bp-panel .bp-form{margin:auto 0 0;background:var(--shop-bg);border:1.5px solid var(--shop-line)}
.bp-page{display:flex;flex-direction:column;gap:8px;padding:14px}
.bp-page i{display:block;height:8px;border-radius:2px;background:var(--shop-bar)}.bp-page i:first-child{height:60px;background:linear-gradient(135deg,var(--shop-ph-1),var(--shop-ph-2))}.bp-page i.s{width:60%}
.bp-buy{display:block;height:22px;border-radius:3px;background:var(--shop-brand)}

/* the widget style (Look): where to start from, and each option as a row of choices */
.look-form{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.look-h{font-size:var(--text-lg);margin:0 0 4px}
.look-desc{margin:0 0 12px}
.look-src{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 8px;padding:0;border:0}
.look-src legend,.look-opt legend{padding:0;margin:0 0 6px;font-weight:600;font-size:var(--text-sm)}
.look-card{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);cursor:pointer;font-weight:400}
.look-card:has(input:checked){border-color:var(--brand-1);box-shadow:inset 0 0 0 1px var(--brand-1)}
.look-card input{margin-top:3px;accent-color:var(--brand-1)}
.look-card > span{display:flex;flex-direction:column;gap:2px}
.look-legacy{margin:0 0 8px}
.look-reread{margin:0 0 14px}
.look-opts{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.look-opt{margin:0;padding:0;border:0;min-width:0}
.look-seg{display:flex;flex-wrap:wrap;gap:6px}
.look-seg label{position:relative;display:inline-flex;cursor:pointer;font-weight:400}
.look-seg input{position:absolute;opacity:0;width:1px;height:1px}
.look-seg span{display:inline-block;padding:6px 12px;border:1px solid var(--border-strong);border-radius:var(--pill);background:var(--card);color:var(--ink);font-size:var(--text-sm)}
.look-seg input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}
.look-seg input:focus-visible + span{outline:2px solid var(--brand-1);outline-offset:2px}
/* V8.4.7 LOOK: "Chat button position": the side and the height from the bottom, side by side; the preview follows the side */
.look-pos-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.look-pos .field{margin:0}
.look-pos p{margin:6px 0 0}
.look-px{display:flex;align-items:center;gap:6px}
.look-px .input{max-width:110px}
.brand-preview[data-side=left] .bp-side{order:-1;align-items:flex-start}
.look-team{margin-top:18px;padding:14px;border:1px dashed var(--border-strong);border-radius:var(--radius-sm);background:var(--panel)}
@media (max-width:600px){.look-src,.look-pos-row{grid-template-columns:1fr}}

/* ---- Draft and Publish: the bar, Review, the Test page, page rules, the checklist, versions ---- */
.publish-bar{position:sticky;top:8px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px 10px 16px;margin-bottom:18px;border-radius:8px;border:1px solid var(--border);background-color:var(--card);background-image:var(--grad-soft);box-shadow:var(--shadow);font-size:var(--text-sm)}
.publish-bar[hidden]{display:none}
.publish-text{flex:1 1 260px}
.publish-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.publish-who{padding:0 4px}
.review-list{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.review-list li{padding:10px 12px;border-radius:8px;background:var(--panel);font-size:var(--text-sm);line-height:1.45}
.review-list li b{display:block}
.review-acts{display:flex;flex-wrap:wrap;gap:8px}
.change-from{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--border-strong)}
.change-to{font-weight:600}
.test-state{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 16px;margin-bottom:18px;border-radius:8px;background:var(--panel);font-size:var(--text-sm)}
.test-state > span{flex:1 1 280px}
.test-state.has-drafts{background:var(--grad-soft)}
.test-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.test-form .input{width:auto}
.test-pick{flex:1 1 220px}.test-pick .input{width:100%}
.test-url{flex:2 1 260px}.test-url .input{width:100%}
.test-popup{margin:10px 0 0}
.test-result{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
.test-result-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:6px}
.test-source{display:inline-block;padding:3px 10px;border-radius:6px;font-weight:700;font-size:var(--text-xs);background:var(--info-bg);color:var(--link)}
.test-source.is-example{background:var(--warn-bg);color:var(--warn-ink)}
.test-source.is-real{background:var(--good-bg);color:var(--good-ink)}
.test-learn{margin:0 0 12px;color:var(--muted)}
.test-questions{margin-top:18px}
.test-questions h3{font-size:var(--text)}
.test-questions ol{margin:8px 0 0;padding-left:20px;font-size:var(--text-sm);line-height:1.6}
.where-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.where-row{display:grid;grid-template-columns:160px 1fr auto;gap:10px;align-items:center;padding:10px 14px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--border)}
.check-page{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.check-url{flex:1 1 260px}.check-url .input{width:100%}
.check-out{margin-top:12px}
.check-out[hidden]{display:none}
.check-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);background:var(--card);border-radius:var(--radius-sm);overflow:hidden}
.check-table th,.check-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.check-table thead th{font-size:var(--text-xs);color:var(--muted);font-weight:700}
.check-table tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
.check-table tbody tr:last-child > *{border-bottom:0}
.check-yes{color:var(--good-ink);font-weight:700}.check-no{color:var(--bad-ink);font-weight:700}
.check-details{margin-top:14px}.check-details summary{cursor:pointer;font-weight:700}
.check-details .check-page{margin-top:10px}
.rules-form{display:flex;flex-direction:column;gap:12px}
.rules-mode{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;border:0;margin:0;padding:0}
.rules-mode legend{margin-bottom:6px;float:left;width:100%}
.rules-list{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.rules-list[hidden]{display:none}
.rules-row{display:flex;gap:8px;align-items:center;width:100%;flex-wrap:wrap}
.rules-row select.input{width:auto;padding:8px 10px;font-size:var(--text-sm)}
.rules-value{flex:1 1 200px}.rules-value .input{padding:8px 10px;font-size:var(--text-sm)}
.rules-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.checks{display:flex;flex-direction:column;gap:8px}
.check-row{display:grid;grid-template-columns:24px minmax(180px,1.2fr) minmax(160px,1fr) auto;gap:10px 14px;align-items:center;padding:12px 14px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--border)}
.check-mark{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--border-strong);color:var(--on-brand)}
.check-row.is-passed .check-mark{background:var(--good);box-shadow:none}
.check-row.is-retest{border-color:var(--warn)}
.check-row.is-retest .check-mark{box-shadow:inset 0 0 0 2px var(--warn)}
.check-row.is-off{opacity:.65}
.check-what{display:flex;flex-direction:column;min-width:0}
.check-status{color:var(--muted)}
.check-row.is-retest .check-status{color:var(--warn-ink)}
.check-acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.version-mini{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:var(--text-sm)}
.version-mini li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.versions{display:flex;flex-direction:column}
.version-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.version-head h2{font-size:var(--text-lg)}
#result,#checklist,#page-rules,#where,#versions,.version{scroll-margin-top:84px}
.test-widgets{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px;padding:0;list-style:none;font-size:var(--text-sm)}
.test-widgets li{display:flex;gap:6px;align-items:baseline}
.test-widgets .check-yes,.test-widgets .check-no{white-space:nowrap}
.change-list{margin:0;padding-left:18px;font-size:var(--text-sm);line-height:1.7}
@media (max-width:860px){
  .publish-bar{top:4px}
  .where-row{grid-template-columns:1fr auto}.where-row .small{grid-column:1 / -1;grid-row:2}
  .check-row{grid-template-columns:24px 1fr}
  .check-status,.check-acts{grid-column:2}
  .check-acts{justify-content:flex-start}
  .test-or{display:none}
}
/* A/B test page (Ami team only) */
.ab-fields{border:0;padding:0;margin:0;min-width:0}
.ab-fields[disabled]{opacity:.7}
.ab-split{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ab-presets{display:flex;gap:6px;flex-wrap:wrap}
.ab-estimate{margin-top:6px;padding:14px 16px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}
.ab-estimate .field{margin-bottom:10px}
.ab-preview{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.ab-verdict{margin:0 0 14px;padding:12px 14px;border-radius:8px;font-weight:600;background:var(--panel-2)}
.ab-verdict.is-b_better{background:var(--good-bg);color:var(--good-ink)}
.ab-verdict.is-a_better{background:var(--warn-bg);color:var(--warn-ink)}
#ab-history .table{min-width:680px}
/* ---- Custom agents (Ami team only): the list and the editor ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.btn-danger{background:var(--bad);color:var(--on-brand);box-shadow:none}
.btn-danger:hover{filter:brightness(.95)}
.agent-state{display:inline-block;padding:2px 10px;border-radius:var(--pill);font-size:var(--text-xs);font-weight:700;background:var(--panel-2);color:var(--ink-2)}
.agent-state.is-live{background:var(--good-bg);color:var(--good-ink)}
.agent-state.is-draft{background:var(--info-bg);color:var(--link)}
.agent-state.is-off{background:var(--panel-2);color:var(--muted)}
.agent-state.is-stopped{background:var(--bad-bg);color:var(--bad-ink)}
.agent-bad{color:var(--bad-ink);font-weight:600}
.agents-note .code{word-break:break-all}
.agents-changes{margin:0;padding:0 0 0 18px;font-size:var(--text-sm);line-height:1.7}
.agents-test{margin:12px 0}
.agents-actions{white-space:nowrap;text-align:right}
.agents-actions .btn{margin-left:6px}
.agents-table td{vertical-align:middle}
.agent-back{margin:0 0 6px}
.agent-back a{color:var(--muted);text-decoration:none;font-size:var(--text-sm)}
.agent-head{align-items:flex-start;gap:16px}
.agent-title{flex:1;min-width:240px}
.agent-name{font-size:var(--text-xl);font-weight:700;padding:8px 12px;width:100%}
.agent-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0}
.agent-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.agent-side .panel{margin-bottom:14px}
.agent-side .panel-head{margin-bottom:8px}
.agent-kind{display:inline-flex;gap:2px;padding:3px;margin-bottom:10px;border-radius:var(--radius-sm);background:var(--panel);border:1px solid var(--border)}
.agent-kind label{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:var(--text-sm);font-weight:600;color:var(--muted);cursor:pointer}
.agent-kind label:has(input:checked){background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.agent-toolbar{display:flex;min-width:0;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
.agent-size{margin-left:auto}
.agent-code{width:100%;min-height:420px}
.agent-cm.CodeMirror{height:calc(100vh - 290px);min-height:420px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:13px;line-height:1.5;background:var(--card);color:var(--ink)}
.agent-cm.CodeMirror .CodeMirror-gutters{background:var(--panel);border-right:1px solid var(--border)}
.agent-cm.CodeMirror .CodeMirror-linenumber{color:var(--faint)}
.agent-cm.CodeMirror .CodeMirror-cursor{border-left-color:var(--ink)}
.agent-cm.CodeMirror .CodeMirror-activeline-background{background:var(--panel)}
.agent-cm.CodeMirror .CodeMirror-selected,.agent-cm.CodeMirror-focused .CodeMirror-selected{background:var(--info-bg)}
.agent-cm.CodeMirror .cm-keyword{color:var(--brand-2)}
.agent-cm.CodeMirror .cm-def,.agent-cm .cm-variable-2{color:var(--link)}
.agent-cm.CodeMirror .cm-string,.agent-cm .cm-string-2{color:var(--good-ink)}
.agent-cm.CodeMirror .cm-number,.agent-cm .cm-atom{color:var(--warn-ink)}
.agent-cm.CodeMirror .cm-comment{color:var(--muted);font-style:italic}
.agent-cm.CodeMirror .cm-property,.agent-cm .cm-variable{color:var(--ink)}
.agent-cm.CodeMirror .cm-operator{color:var(--ink-2)}
.agent-cm.CodeMirror .cm-searching{background:var(--warn-bg)}
.agent-cm.CodeMirror .CodeMirror-matchingbracket{color:var(--ink);background:var(--info-bg)}
.agent-cm.CodeMirror .CodeMirror-dialog{background:var(--card);color:var(--ink);border-color:var(--border)}
.agent-cm.CodeMirror .CodeMirror-dialog input{color:var(--ink)}
.agent-gutter{width:16px}
.agent-gutter-mark{color:var(--bad);font-size:12px;cursor:default}
.agent-err{text-decoration:underline wavy var(--bad);background:var(--bad-bg)}
.agent-syntax{min-height:20px;margin:8px 0 0;font-size:var(--text-sm)}
.agent-syntax.is-ok{color:var(--good-ink)}
.agent-syntax.is-bad{color:var(--bad-ink)}
.agent-warnings{margin-top:10px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--warn-bg);font-size:var(--text-sm)}
.agent-warnings p{margin:0 0 6px}
.agent-warnings ul{margin:0;padding-left:18px;max-height:200px;overflow:auto}
.agent-warnings .code{word-break:break-all}
.agent-rule-row{display:flex;gap:6px;align-items:center;margin:8px 0}
.agent-rule-row select{width:auto;flex:0 0 auto;max-width:150px}
.agent-rule-row .input{min-width:0}
.agent-home{display:flex;gap:8px;align-items:center;margin:10px 0 4px;font-size:var(--text-sm)}
.agent-rules .radio-inline{flex-wrap:wrap;gap:12px}
.agent-pre{margin:0 0 8px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--code-bg);color:var(--code-ink);font:12px/1.5 var(--font-mono);overflow-x:auto;white-space:pre}
.agent-help p{margin:0 0 8px}
.agent-delete{color:var(--bad-ink)}
@media (max-width:980px){.agent-grid{grid-template-columns:minmax(0,1fr)}.agent-main{min-width:0}.agent-cm.CodeMirror{height:70vh}}
.agent-cm.CodeMirror .cm-variable-3,.agent-cm.CodeMirror .cm-type{color:var(--link)}
.agent-cm.CodeMirror .cm-qualifier,.agent-cm.CodeMirror .cm-meta,.agent-cm.CodeMirror .cm-tag{color:var(--ink-2)}
.agent-cm.CodeMirror .cm-error{color:var(--bad-ink)}
.agent-main{min-width:0}
/* Accessibility on the Agent page (A11y): the always-on line, what it covers, the statement to copy */
.a11y-on{display:flex;gap:8px;align-items:center;margin:0 0 10px;padding:10px 14px;border-radius:var(--radius);background:var(--good-bg);color:var(--good-ink);font-size:var(--text-sm)}
.a11y-on b{color:var(--ink)}
.a11y-covers{margin:0 0 14px;font-size:var(--text-sm)}
.a11y-statement-box{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.a11y-h{margin:0 0 4px;font-size:var(--text);font-weight:700}
.a11y-statement{margin:8px 0 10px;padding:14px 16px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);color:var(--ink-2);font-size:var(--text-sm);line-height:1.6}
.brand-adjusted{margin-left:6px;padding:1px 8px;border-radius:var(--pill);background:var(--good-bg);color:var(--good-ink);font-weight:600}
.read-form{display:flex;flex-direction:column;gap:12px}
.read-mode{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;border:0;margin:0;padding:0}
.read-mode legend{margin-bottom:6px;float:left;width:100%}
.read-form [hidden]{display:none}
.read-ticks{display:flex;flex-wrap:wrap;gap:8px 22px}
.check-inline{display:inline-flex;gap:8px;align-items:center;font-size:var(--text-sm)}
.check-inline input{width:18px;height:18px;accent-color:var(--brand-1);flex:none}
.read-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.read-box{padding:16px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--border);min-width:0}
.read-box + .read-box,.read-grid + .read-box{margin-top:16px}
.read-grid .read-box + .read-box{margin-top:0}
.read-box h3{font-size:var(--text);margin-bottom:6px}
.read-box > p{margin-bottom:10px}
.read-add{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.read-add .input{flex:1 1 200px;width:auto}
.read-add select.input{flex:0 1 auto}
.read-paste{margin-top:10px}.read-paste summary{cursor:pointer;font-weight:600}
.read-paste form{display:flex;flex-direction:column;gap:8px;margin-top:8px;align-items:flex-start}
.read-paste textarea{width:100%}
.read-suggest{width:100%}
.read-out{margin-top:12px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--panel)}
.read-out[hidden]{display:none}
.read-out .yes{color:var(--good-ink);font-weight:700}.read-out .no{color:var(--bad-ink);font-weight:700}
.read-estimate{margin-top:12px}
.read-est-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.linkish{border:0;background:none;padding:0;color:var(--link);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
.read-hosts{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.read-host{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.read-host-name{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
.read-host select.input{width:auto;padding:7px 10px;font-size:var(--text-sm)}
.read-list-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:10px}
.read-list-head h3{margin:0}
.read-search{margin-left:auto;flex:0 1 220px}.read-search .input{padding:7px 10px;font-size:var(--text-sm)}
.read-page{min-width:0;max-width:420px}
.read-page b{display:block;font-weight:600;overflow-wrap:anywhere}
.read-page .xs{display:block;overflow-wrap:anywhere}
.read-actions{white-space:nowrap}
.read-actions .btn + .btn{margin-left:6px}
/* v8.2 PAGES: why a page couldn't be read, "tried …", the Ami team's details, the main page's note */
.read-why{display:block;margin-top:4px;max-width:340px;line-height:1.4}
.read-tried{display:block}
.read-tech{margin-top:4px;max-width:340px}
.read-tech summary{cursor:pointer;color:var(--muted)}
.read-tech .xs{display:block;overflow-wrap:anywhere}
.read-tech-line{display:block;margin-top:4px;overflow-wrap:anywhere}
.appear-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:14px}
@media (max-width:860px){
  .read-grid{grid-template-columns:1fr}
  .read-row{padding-bottom:8px;border-bottom:1px solid var(--border)}
  .read-search{margin-left:0;flex:1 1 100%}
  .read-table thead{display:none}
  .read-table tr{display:block;padding:10px 0;border-bottom:1px solid var(--border)}
  .read-table td{display:block;border:0;padding:3px 0}
  .read-actions{white-space:normal}
}
.appear-sub{font-size:var(--text);margin:18px 0 4px}
.read-table tr[hidden]{display:none}

/* ---- The prompt library (Ami team only): Admin > Prompts and the site's Prompts page ---- */
.pl-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.pl-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}
.pl-side .panel{margin:0}
.pl-sec{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px}
.pl-sec.is-data{background:var(--panel)}
.pl-sec.is-flag{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn) inset}
.pl-sec-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pl-sec-head h3{font-size:var(--text);margin:0}
.pl-sec-head .pl-acts{margin-left:auto;display:flex;gap:6px}
.pl-text{width:100%;min-height:90px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font:13px/1.55 var(--font-mono);resize:vertical;white-space:pre-wrap}
.pl-text:focus{outline:2px solid color-mix(in srgb,var(--brand-1) 50%,transparent);border-color:var(--brand-1)}
.pl-pre{margin:0;padding:12px 14px;border-radius:var(--radius-sm);background:var(--panel);font:13px/1.55 var(--font-mono);white-space:pre-wrap;word-break:break-word;color:var(--ink-2);max-height:340px;overflow:auto}
.pl-pre mark,.pl-text-ph{background:var(--info-bg);color:var(--link);border-radius:4px;padding:0 2px}
/* V8.2 NOTES: the team's /@ ... @/ notes, green (never sent to the model); in a box, drawn on a copy behind the text */
.pl-note,.pl-pre .pl-note{background:var(--good-bg);color:var(--good-ink);border-radius:4px;padding:0 2px}
.pl-hl-wrap{position:relative;background:var(--card);border-radius:var(--radius-sm)}
.pl-hl-wrap>.pl-text{position:relative;z-index:1;background:transparent}
.pl-hl{position:absolute;inset:0;padding:12px 14px;border:1px solid transparent;font:13px/1.55 var(--font-mono);white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;color:transparent;overflow:hidden;pointer-events:none}
.pl-hl mark.pl-note{color:transparent;padding:0;border-radius:3px}
/* V8.2 ROUTES: the answer routes editor */
.pl-route{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px}
.pl-route .pl-sec-head{margin-bottom:10px}
.pl-route.is-off{opacity:.65}
.pl-onoff{display:inline-flex;align-items:center;gap:8px;cursor:pointer;margin-right:4px}
.pl-onoff .pl-onoff-word{min-width:2.2em}
.pl-checks{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:var(--text-sm)}
.pl-checks label{display:inline-flex;gap:6px;align-items:center}
/* V8.2 WHY: the Ami team's "Why?" on Ami's messages (Conversations) */
.why-box{margin-top:6px}
.why-box>summary.why-btn{display:inline-block;cursor:pointer;font-size:12px;font-weight:600;color:var(--link);padding:2px 8px;border:1px solid var(--border-strong);border-radius:999px;list-style:none}
.why-box>summary.why-btn::-webkit-details-marker{display:none}
.why-box[open]>summary.why-btn{background:var(--info-bg)}
.why-body{margin-top:8px}
.why{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--card);padding:12px 14px;font-size:13px;color:var(--ink)}
.why-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.why-facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:0}
.why-facts dt{font-weight:600;color:var(--ink-2)}.why-facts dd{margin:0;overflow-wrap:anywhere}
.why-sec{margin-top:10px;border-top:1px solid var(--border);padding-top:8px}
.why-sec>summary{cursor:pointer;display:list-item}
.why-list{margin:6px 0 0;padding-left:18px}
.why-pre{max-height:320px;font-size:12px}
.why-table td,.why-table th{padding:4px 8px}
@media (max-width:640px){.why-facts{grid-template-columns:1fr}}
/* V8.3 WHY: the Test page's "Why? for test replies" (the Ami team only) */
.why-tests-list{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:10px}
.why-test{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;min-width:0}
.why-test p{margin:4px 0 0;font-size:13px;overflow-wrap:anywhere}
.why-test .why-box>summary.why-btn{width:max-content}
/* V8.3 DRIFT: answer routes in the drift report */
.pl-route-chg{display:block;margin:2px 0}
.pl-warn{color:var(--bad-ink);font-size:var(--text-xs);margin-top:6px}
.pl-warn:empty{display:none}
.pl-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.pl-row .field{margin:0;flex:1;min-width:160px}
.pl-mode{display:inline-flex;gap:2px;padding:3px;border-radius:var(--radius-sm);background:var(--panel);border:1px solid var(--border);margin-bottom:10px;flex-wrap:wrap}
.pl-mode label{padding:6px 12px;border-radius:8px;font-size:var(--text-sm);font-weight:600;color:var(--ink-2);cursor:pointer}
.pl-mode input{position:absolute;opacity:0;pointer-events:none}
.pl-mode input:checked+span{color:var(--ink)}
.pl-mode label:has(input:checked){background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pl-mode input:focus-visible+span{outline:2px solid var(--brand-1);outline-offset:3px;border-radius:4px}
.pl-chips{display:flex;flex-wrap:wrap;gap:6px}
.pl-chip{border:1px solid var(--border);background:var(--card);border-radius:var(--pill);padding:3px 10px;font:12px var(--font-mono);color:var(--ink-2);cursor:pointer}
.pl-chip:hover{border-color:var(--brand-1);color:var(--link)}
.pl-ph-list{margin:0;padding:0;list-style:none;font-size:var(--text-xs)}
.pl-ph-list li{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-top:1px solid var(--border)}
.pl-ph-list li:first-child{border-top:0}
.pl-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--border)}
.pl-tabs a{padding:9px 14px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:var(--text-sm);border-bottom:2px solid transparent;margin-bottom:-1px}
.pl-tabs a.is-on{color:var(--ink);border-bottom-color:var(--brand-1)}
.pl-tabs a .tag{margin-left:6px}
.pl-diff{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;font:12.5px/1.5 var(--font-mono);background:var(--card)}
.pl-diff>div{padding:3px 10px;white-space:pre-wrap;word-break:break-word;border-top:1px solid var(--border)}
.pl-diff .pl-dh{font:600 var(--text-xs) var(--font);color:var(--muted);background:var(--panel);border-top:0}
.pl-diff .is-del{background:var(--bad-bg)}.pl-diff .is-add{background:var(--good-bg)}
.pl-diff .is-empty{background:var(--panel)}
.pl-runs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:14px}
.pl-run{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;min-width:0}
.pl-run h4{margin:0 0 4px;font-size:var(--text)}
.pl-run .pl-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:var(--text-xs);color:var(--muted);margin-bottom:10px}
.pl-run .pl-answer{font-size:var(--text);line-height:1.5;margin:0 0 10px}
.pl-run .pl-err{color:var(--bad-ink);font-weight:600}
.pl-run pre{max-height:260px}
.pl-flows [hidden]{display:none}   /* V8.4.2 TRYFLOWS: the button keeps its own display, so hidden needs saying */
.pl-hours{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.pl-hours th,.pl-hours td{padding:6px 8px;text-align:left;border-top:1px solid var(--border)}
.pl-hours th{font-weight:600;color:var(--muted);font-size:var(--text-xs)}
.pl-hours input{padding:7px 10px;font-size:var(--text-sm);min-width:120px}
.pl-now{display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:var(--radius-sm);background:var(--info-bg);font-size:var(--text-sm);margin:12px 0}
.pl-stage-list{display:grid;gap:12px}
.pl-stage{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center}
.pl-stage h3{margin:0;font-size:var(--text)}
.pl-stage p{margin:0;color:var(--muted);font-size:var(--text-sm)}
.pl-stage .pl-tags{display:flex;gap:6px;flex-wrap:wrap;grid-column:1}
.pl-stage .pl-go{grid-column:2;grid-row:1 / span 3}
/* V8.4.2 FINAL: the stage cards stay one column of text however many lines a card has (the merge's "line" made it four:
   h3, line, description, tags, and the new layout hides Open, which left them flowing into two columns). On a phone
   the Open button goes under the text. */
.pl-stage>:not(.pl-go){grid-column:1;min-width:0}
.pl-stage .pl-go{grid-row:1 / span 4}
@media (max-width:640px){.pl-stage{grid-template-columns:minmax(0,1fr);padding:14px}.pl-stage .pl-go{grid-column:1;grid-row:auto;justify-self:start}}
.pl-models td input.input,.pl-models td select.input{padding:7px 9px;font-size:13px}
.pl-models td input[type=checkbox]{width:18px;height:18px}
.pl-status{font-size:var(--text-sm);min-height:20px;margin-top:8px}
.pl-status.is-ok{color:var(--good-ink)}.pl-status.is-bad{color:var(--bad-ink)}
.pl-shared{background:var(--warn-bg);border-radius:var(--radius-sm);padding:12px 14px;margin-top:10px;font-size:var(--text-sm)}
@media (max-width:980px){.pl-grid{grid-template-columns:1fr}.pl-side{position:static}.pl-diff{grid-template-columns:1fr}}
.pl-run summary,.pl-sent summary,.pl-sec details summary,#pl-ph-h~details summary{cursor:pointer;color:var(--link);list-style:revert}
.pl-run summary:hover,.pl-sent summary:hover{text-decoration:underline}
/* AGENCY (agency-access): "You're working on" and the client switcher */
.working-on{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;margin-bottom:16px;border:1px solid var(--border);border-left:4px solid var(--brand-1);border-radius:var(--radius-sm);background:var(--card);font-size:var(--text-sm);color:var(--ink-2)}
.working-on b{color:var(--ink)}
.menu .menu-hint{margin-left:auto;font-weight:500;color:var(--muted);font-size:var(--text-xs)}
.client-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:min(60vh,520px);overflow-y:auto}
.client-list li[hidden]{display:none}
.client-item form{margin:0}
.client-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.client-btn:hover,.client-btn:focus-visible{background:var(--panel);border-color:var(--ink-2)}
.client-item.is-current .client-btn{cursor:default;border-color:var(--brand-1);background:var(--panel)}
.client-main,.client-side{display:flex;flex-direction:column;gap:2px;min-width:0}
.client-side{align-items:flex-end;text-align:right;flex-shrink:0}
.client-name{overflow-wrap:anywhere}
.client-meta,.client-via,.client-opened{font-size:var(--text-xs);color:var(--muted)}
.client-tag{font-weight:600}.client-tag.is-live{color:var(--good-ink)}
.client-search-form{display:flex;gap:8px;margin:0 0 4px}
.client-none{margin-top:12px}
.page .client-list,.wrap .client-list{max-height:none}
@media (max-width:560px){.client-btn{flex-direction:column;align-items:flex-start}.client-side{align-items:flex-start;text-align:left}}

/* PROFILES: the Assistants pages (Ami team only) and the Test page's assistant choice */
.pf-msg{outline:none}.pf-msg:focus-visible{outline:2px solid var(--brand-1);outline-offset:2px}
.pf-how{margin:0 0 18px}.pf-how summary{cursor:pointer}.pf-how ol{margin:8px 0;padding-left:20px;line-height:1.7}
.pf-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}.pf-actions form{margin:0}
.pf-inline{display:inline-block}.pf-inline summary{list-style:none}.pf-inline summary::-webkit-details-marker{display:none}.pf-inline[open] summary{display:none}
.pf-inline-form{display:flex;gap:6px;align-items:center}.pf-inline-form .input{width:180px}
.pf-publish-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px}.pf-note{display:flex;flex-direction:column;gap:4px;flex:1 1 260px}
.pf-add-form .input{max-width:320px}
.pf-toc{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 16px;font-size:var(--text-sm)}
.pf-toc a{padding:2px 0}
#where,#widgets,#reads,#flows,#look,#prompt,#notes,#more{margin-bottom:20px;scroll-margin-top:16px}
.pf-fieldset{border:0;padding:0;margin:0 0 12px;min-width:0}.pf-fieldset legend{margin-bottom:8px}
.pf-radio{margin-right:14px}
.pf-flowlist{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto}
.pf-check{display:flex;gap:8px;align-items:baseline;font-size:var(--text-sm)}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 16px}
.pf-grid .field span{font-weight:600;font-size:var(--text-sm)}
.pf-wide{grid-column:1/-1}.pf-grid-foot{grid-column:1/-1}
.pf-sec{border-top:1px solid var(--border);padding:10px 0}.pf-sec>summary{cursor:pointer;padding:4px 0}
.pf-site-text{margin:8px 0}.pf-site-text pre{white-space:pre-wrap;max-height:240px;overflow:auto;background:var(--panel-2);padding:10px;border-radius:var(--radius-sm)}
.pf-sec-form{margin-top:8px}
.pf-more-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}.pf-more-actions form{margin:0}
.test-profile{display:flex;flex-direction:column;gap:2px;flex:1 1 200px}.test-profile .input{width:100%}
.test-assistant{margin:8px 0}
@media (max-width:560px){.pf-actions{justify-content:flex-start}.pf-inline-form .input{width:140px}}

/* HELP-CENTRE: the "?" beside a page or panel heading, opening the matching help.meetami.ai article in a new tab (Help::link) */
.help-link{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:8px;border-radius:999px;border:1.5px solid var(--border-strong);color:var(--muted);font-size:13px;font-weight:700;line-height:1;text-decoration:none;vertical-align:middle;flex:none}
.help-link:hover,.help-link:focus-visible{color:var(--link);border-color:var(--link)}
.page-head h1:has(+ .help-link),.panel-head h2:has(+ .help-link){display:inline-block;vertical-align:middle}

/* HELP-CENTRE: the help panel (help-panel.js). Wide screens: docked on the right, the dashboard
   narrows beside it (nothing is covered). Phones: a sheet from the bottom that minimises to a tab. */
:root{--help-w:400px}
html.help-docked .app{margin-right:var(--help-w)}
.help-panel{position:fixed;z-index:60;display:flex;flex-direction:column;background:var(--bg);color:var(--ink)}
.help-panel[hidden],.help-tab[hidden]{display:none}
.help-panel.is-docked{top:0;right:0;bottom:0;width:var(--help-w);border-left:1px solid var(--border)}
.help-panel.is-sheet{left:0;right:0;bottom:0;height:70vh;height:70dvh;border-top:1px solid var(--border);border-radius:18px 18px 0 0;box-shadow:var(--shadow-lg)}
/* Expand: twice as wide on a computer (the dashboard still beside it), the whole screen on a phone */
html.help-big{--help-w:min(800px,62vw)}
.help-panel.is-sheet.is-big{top:0;height:auto;border-radius:0;border-top:0;padding-top:env(safe-area-inset-top,0px)}
.is-sheet.is-big .hp-bar::before{display:none}
@media (prefers-reduced-motion:no-preference){.help-panel.is-docked,html.help-docked .app{transition:width .18s ease-out,margin-right .18s ease-out}}
.hp-bar{display:flex;align-items:center;gap:4px;padding:8px 8px 8px 10px;border-bottom:1px solid var(--border);flex:none}
.is-sheet .hp-bar{padding-top:14px;position:relative}
.is-sheet .hp-bar::before{content:"";position:absolute;top:5px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:4px;background:var(--border-strong)}
.hp-title{flex:1;min-width:0;margin:0 4px;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-title:focus{outline:none}
.hp-title:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:4px}
.hp-btn{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:10px;background:transparent;color:var(--ink-2);cursor:pointer;text-decoration:none}
.hp-btn:hover{background:var(--panel)}
.hp-btn:disabled{opacity:.35;cursor:default;background:transparent}
.hp-btn[hidden]{display:none}
.hp-body{position:relative;flex:1;min-height:0}
.hp-frame{display:block;width:100%;height:100%;border:0;background:var(--bg)}
.hp-frame[hidden]{display:none}
.hp-fail{padding:24px 20px}
.hp-fail p{margin:0 0 12px;color:var(--ink-2)}
.help-tab{position:fixed;z-index:60;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid var(--border-strong);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-weight:600;box-shadow:var(--shadow-lg);cursor:pointer}
.help-tab:hover{background:var(--panel)}
@media (max-width:1180px){:root{--help-w:360px}}
@media (prefers-reduced-motion:no-preference){.help-panel.is-sheet{animation:hp-up .18s ease-out}@keyframes hp-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}}
@media print{.help-panel,.help-tab{display:none}html.help-docked .app{margin-right:0}}
/* INPAGE-CHAT: the in-page agent's look on the Look page (_inpage_look.php) */
.ip-sec{margin:0 0 16px;padding:0;border:0;min-width:0}
.ip-sec legend{padding:0;margin:0 0 8px;font-weight:700}
.ip-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px 14px}
.ip-fields .field{margin:0;min-width:0}
.ip-fields .ip-text{grid-column:1/-1}
.ip-text-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.ip-text-row .input{flex:1;min-width:180px}
.ip-stage{display:flex;flex-direction:column;gap:6px}
.ip-cap{margin:8px 0 0}
.ip-wide,.ip-narrow{min-width:0;background:var(--shop-bg);border-radius:10px;padding:2px 10px}
.ip-narrow{max-width:340px}

/* ---------- EXAMPLE-DATA (v7.7): example figures on empty pages, labelled ---------- */
.ex-badge{display:inline-flex;align-items:center;vertical-align:middle;padding:2px 9px;margin-left:6px;border-radius:var(--pill);border:1px dashed var(--border-strong);background:var(--panel);color:var(--ink-2);font-size:var(--text-xs);font-weight:700;letter-spacing:.01em;line-height:1.5;white-space:nowrap}
.ex-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;margin:0 0 18px;border-radius:var(--radius);border:1px dashed var(--border-strong);background-color:var(--card);background-image:var(--grad-soft);color:var(--ink)}
.ex-banner-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--grad);color:var(--on-brand);flex:none}
.ex-banner-text{margin:0;flex:1 1 240px;font-size:var(--text-sm);font-weight:600}
.ex-banner-btn{flex:none}
.rp-body.is-example .rp-panel>.ex-badge{float:right;margin:0 0 8px 12px}
.rp-body.is-example .rp-kpis>.ex-badge{grid-column:1/-1;justify-self:start;margin:0}
.stats-row.is-example{flex-wrap:wrap}
.stats-row.is-example>.ex-badge{flex-basis:100%;width:max-content;max-width:max-content;margin:0 0 4px}
.ex-list-head{margin:0 0 10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ex-list-head .ex-badge{margin-left:0}
.ex-home{margin:22px 0}
.ex-home-h{font-size:var(--text-lg);margin:0 0 12px}
.ex-home .ln-figures{margin-bottom:16px}
.ex-chats{list-style:none;margin:0;padding:0}
.ex-chat>summary{list-style:none;cursor:pointer}
.ex-chat>summary::-webkit-details-marker{display:none}
.ex-chat>summary:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.ex-transcript{display:flex;flex-direction:column;gap:8px;padding:10px 4px 14px}
.ex-msg{max-width:min(560px,92%);padding:9px 12px;border-radius:14px;background:var(--panel);overflow-wrap:anywhere}
.ex-msg p{margin:2px 0 0;font-size:var(--text-sm)}
.ex-msg.is-shopper{align-self:flex-end;background:var(--info-bg)}
.ex-who{font-size:var(--text-xs);font-weight:700;color:var(--muted)}
.ex-note{margin:4px 0 0}
.ex-setup{flex-wrap:wrap}
/* how the thumbs work: a few seconds, on a loop; still for people who prefer less motion */
.ex-how h2{font-size:var(--text-lg);margin:0 0 12px}
.ex-how-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;align-items:center}
.ex-how-demo{position:relative;padding:16px;border-radius:var(--radius);background:var(--panel);overflow:hidden;min-height:150px}
.ex-how-q{margin-left:auto;width:max-content;max-width:90%;padding:7px 11px;border-radius:12px;background:var(--info-bg);font-size:var(--text-sm);margin-bottom:8px}
.ex-how-a{padding:9px 12px;border-radius:12px;background:var(--card);font-size:var(--text-sm);box-shadow:inset 0 0 0 1px var(--border)}
.ex-how-rate{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--muted);font-size:var(--text-xs)}
.ex-how-rate i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--border-strong);color:var(--ink-2)}
.ex-how-thanks{margin-top:6px;font-size:var(--text-xs);font-weight:700;color:var(--good-ink);opacity:0}
.ex-how-demo{--ex-up-x:133px;--ex-up-y:124px}
.ex-how-pointer{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--ink);opacity:.55;left:85%;top:85%}
.ex-how-steps{margin:0;padding-left:20px;font-size:var(--text-sm)}
.ex-how-steps li{margin-bottom:6px}
@media (prefers-reduced-motion:no-preference){
  .ex-how-pointer{animation:ex-how-move 6s ease-in-out infinite}
  .ex-how-up{animation:ex-how-press 6s ease-in-out infinite}
  .ex-how-thanks{animation:ex-how-thanks 6s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){.ex-how-up{background:var(--good-bg);color:var(--good-ink)}.ex-how-thanks{opacity:1}.ex-how-pointer{display:none}}
@keyframes ex-how-move{0%,15%{left:85%;top:85%;transform:scale(1)}40%{left:var(--ex-up-x,152px);top:var(--ex-up-y,112px);transform:scale(1)}46%{transform:scale(.7)}52%,85%{left:var(--ex-up-x,152px);top:var(--ex-up-y,112px);transform:scale(1)}100%{left:85%;top:85%}}
@keyframes ex-how-press{0%,44%{background:transparent;color:var(--ink-2)}48%,92%{background:var(--good-bg);color:var(--good-ink)}100%{background:transparent}}
@keyframes ex-how-thanks{0%,50%{opacity:0}56%,92%{opacity:1}100%{opacity:0}}
@media (max-width:700px){.ex-how-grid{grid-template-columns:1fr}.rp-body.is-example .rp-panel>.ex-badge{float:none;display:inline-flex;margin:0 0 8px}}

/* LIVECHAT (reports/livechat.md): "Available for live chat" in the top bar, the live chat toast, Notifications and the Team page's switches */
.live-avail{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:6px 8px;border:0;border-radius:8px;background:none;color:var(--muted);font:inherit;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
.live-avail ~ .date{margin-left:0}
.live-avail:hover{background:var(--panel);color:var(--ink)}
.live-avail:focus-visible{outline:2px solid var(--brand-1);outline-offset:2px}
.live-avail.is-on{color:var(--ink)}
.live-track{position:relative;width:28px;height:16px;border-radius:999px;background:var(--switch-off);transition:background .15s;flex:none}
.live-track span{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--switch-thumb);transition:transform .15s}
.live-avail.is-on .live-track{background:var(--good)}
.live-avail.is-on .live-track span{transform:translateX(12px)}
@media (max-width:900px){.live-avail-more{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.tips-switch ~ .live-avail{margin-left:0}   /* the new layout: Help tips already takes the free space */
/* v7.7 phones and the docked side panel: the switch as a compact chat icon with a presence dot (filled green when
   available, a hollow ring when away, so not colour alone), a 44px target, the same name ("Available for live chat",
   read from the hidden words) and state (role=switch, aria-checked). The top bar is a size container, so this follows
   the room the bar has, not the window (a 1440px window with the panel docked can have less room than a tablet). */
.live-ic{display:none;position:relative;line-height:0}
.live-ic::after{content:"";position:absolute;right:-3px;bottom:-3px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;border:2px solid var(--muted);background:var(--bg);box-shadow:0 0 0 2px var(--bg)}
.layout-new .live-ic::after{background:var(--ln-card);box-shadow:0 0 0 2px var(--ln-card)}
.live-avail.is-on .live-ic::after{border-color:var(--good);background:var(--good)}
.topbar{container:topbar/inline-size}
@container topbar (max-width:900px){.live-avail-more{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@container topbar (max-width:860px){.topbar .date{font-size:0}.topbar .date .env-pill{font-size:10px}.topbar .date:not(:has(.env-pill)){display:none}}
@container topbar (max-width:720px){
  .live-avail{position:relative;min-width:44px;min-height:44px;padding:0;justify-content:center}
  .live-avail .live-track{display:none}
  .live-avail .live-ic{display:block}
  .live-avail-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .topbar .jump-btn .jump-word,.topbar .tips-word,.topbar .account-text{display:none}
  .topbar .account-btn{padding:2px}
}
@container topbar (max-width:560px){.topbar .jump-btn kbd,.topbar .tips-btn .ic{display:none}.topbar .tips-btn{padding:6px 4px}}
/* v7.7.1: at 1024-1440px (panel docked or not) the bar's words go compact, a step at a time, before the site name is
   cut: the date's words, then the name menu's words, then "for live chat", Help tips' word and Jump to's word. Only the
   site name may shrink, and "Jump to" never wraps. The new layout has Help tips too, so its steps come a little sooner.
   (Container widths are the bar's content box; step 431 measures them.) */
.topbar > :not(.site-name){flex-shrink:0}
.topbar .jump-btn{white-space:nowrap}
@container topbar (max-width:1080px){.topbar .date{font-size:0}.topbar .date .env-pill{font-size:10px}.topbar .date:not(:has(.env-pill)){display:none}}
@container topbar (max-width:940px){.topbar .account-text{display:none}.topbar .account-btn{padding:2px}}
@container topbar (max-width:860px){.live-avail-more{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@container topbar (max-width:760px){.topbar .jump-btn .jump-word{display:none}}
@container topbar (max-width:1230px){.layout-new .topbar .date{font-size:0}.layout-new .topbar .date .env-pill{font-size:10px}.layout-new .topbar .date:not(:has(.env-pill)){display:none}}
@container topbar (max-width:1100px){.layout-new .topbar .account-text{display:none}.layout-new .topbar .account-btn{padding:2px}}
@container topbar (max-width:960px){.layout-new .live-avail-more{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@container topbar (max-width:880px){.layout-new .topbar .tips-word{display:none}}
@container topbar (max-width:820px){.layout-new .topbar .jump-btn .jump-word{display:none}}
/* the same where size containers aren't supported (phones only) */
@supports not (container-type:inline-size){@media (max-width:640px){
  .live-avail{position:relative;min-width:44px;min-height:44px;padding:0;justify-content:center}
  .live-avail .live-track{display:none}
  .live-avail .live-ic{display:block}
  .live-avail-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .topbar .jump-btn kbd{display:none}
}}
@media (max-width:640px){.topbar{gap:8px}}
@media (max-width:1180px){html.help-docked .topbar{gap:10px;padding:0 16px}}
html.help-big.help-docked .topbar{gap:10px;padding:0 16px}
.toast.is-live{border:1.5px solid transparent;background-image:var(--grad-soft),linear-gradient(var(--card),var(--card)),var(--grad);background-origin:border-box;background-clip:padding-box,padding-box,border-box;box-shadow:0 14px 40px rgba(11,12,15,.16)}
.toast.is-live .toast-text::before{content:"";display:inline-block;width:8px;height:8px;margin:0 10px 1px 2px;border-radius:50%;background:var(--good);vertical-align:1px}
.live-team-now{align-self:center}
.live-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.live-perm{margin:4px 0 14px}
.live-team-table form{margin:0}
@media (prefers-reduced-motion:reduce){.live-track,.live-track span{transition:none}}

/* ASK-PANEL (v7.7): the side panel's two tabs, "Ask Ami" and "Help" (help-panel.js, for the people who may use Ask Ami),
   the Ask Ami tab's compact chat, and its ways in (the top bar's "Ask Ami", "Open in side panel" beside the menu's Ask Ami) */
.has-tabs .hp-bar{gap:2px;padding:6px 8px}
.is-sheet.has-tabs .hp-bar{padding-top:14px}
.hp-tabs{flex:1;min-width:0;display:flex;gap:4px}
.hp-tab{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink-2);font:inherit;font-size:var(--text-sm);font-weight:600;cursor:pointer;white-space:nowrap}
.hp-tab:hover{background:var(--panel)}
.hp-tab[aria-selected="true"]{background:var(--grad-soft);color:var(--ink);border-color:var(--border)}
.hp-tab:focus-visible{outline:2px solid var(--link);outline-offset:1px}
.hp-pane{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.hp-pane[hidden]{display:none}
.hp-sub{display:flex;align-items:center;gap:4px;padding:4px 8px 4px 10px;border-bottom:1px solid var(--border);flex:none}
.hp-pane-help .hp-title{font-size:14px}
.ap-sub{gap:6px;padding:6px 8px 6px 12px}
.ap-gap{flex:1}
.ap-new{display:inline-flex;align-items:center;gap:6px}
.ap-history .ask-history-menu{left:0;right:auto;width:min(340px,calc(var(--help-w) - 24px),calc(100vw - 24px));max-height:50vh}
.ap-history[hidden]{display:none}
.ap-thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:16px;padding:14px 14px 10px}
.ap-thread .ask-msg{gap:8px}
.ap-thread .ask-mark{width:26px;height:26px;border-radius:8px}
.ap-thread .ask-bubble{max-width:88%;padding:8px 12px;border-radius:14px 14px 4px 14px;font-size:var(--text-sm)}
.ap-thread .ask-text{font-size:var(--text-sm)}
.ap-thread .ask-text p,.ap-thread .ask-text ul{line-height:1.5;margin-bottom:8px}
.ap-thread .ask-body{padding-top:2px}
.ap-empty{padding:4px 0}
.ap-empty-title{margin:0 0 6px;font-weight:700;font-size:var(--text)}
.ap-empty p.xs{margin:0 0 14px}
.ap-suggest{display:flex;flex-wrap:wrap;gap:6px}
.hp-pane-ask .ask-chip{padding:6px 12px;font-size:13px}
.ap-follow{margin:0;padding:0 14px 8px 48px;flex:none}
.ap-form{margin:0 10px;border-radius:16px;padding:5px 5px 5px 14px;box-shadow:none;flex:none}
.ap-form textarea{font-size:var(--text-sm);padding:7px 0;max-height:140px}
.ap-form .ask-send{width:34px;height:34px}
.ap-note{margin:6px 12px 10px;text-align:center;flex:none}
.ap-loading{margin:0}
@media (max-width:640px){.ap-follow{padding-left:14px}.ap-note:not(.is-staff){display:none}.ap-form{margin-bottom:10px}}
/* the top bar's "Ask Ami" (beside Jump to) */
.ask-top{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink-2);font:inherit;font-size:var(--text-sm);font-weight:600;cursor:pointer;white-space:nowrap}
.ask-top svg{color:var(--brand-1)}
.ask-top:hover{background:var(--panel);color:var(--ink)}
.ask-top:focus-visible{outline:2px solid var(--link);outline-offset:2px}
@media (max-width:640px){.ask-top{padding:4px 8px}.ask-top-word{display:none}}
@media (max-width:380px){.ask-top{display:none}}   /* the narrowest phones: no room in the top bar (the menu's "Open in side panel" is the way in) */
html.help-docked .ask-top{display:none}   /* the panel is open beside (its Ask Ami tab is right there), and the top bar has less room */
/* "Open Ask Ami in the side panel" beside the menu's Ask Ami */
.nav-split{position:relative}
.nav-split .nav-link{padding-right:40px}
.nav-side-btn{position:absolute;top:50%;right:4px;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;opacity:0;transition:opacity .12s}
.nav-split:hover .nav-side-btn,.nav-side-btn:focus-visible,.nav-split .nav-link.is-active + .nav-side-btn{opacity:1}
.nav-side-btn:hover{background:var(--panel-2);color:var(--ink)}
.nav-side-btn:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
@media (hover:none){.nav-side-btn{opacity:1}}
.app.is-collapsed .nav-side-btn,html.nav-collapsed .nav-side-btn{display:none}
.app.is-collapsed .nav-split .nav-link,html.nav-collapsed .nav-split .nav-link{padding-right:10px}
@media (max-width:860px){.app.is-collapsed .nav-side-btn,html.nav-collapsed .nav-side-btn{display:grid}.app.is-collapsed .nav-split .nav-link,html.nav-collapsed .nav-split .nav-link{padding-right:40px}}
@media (prefers-reduced-motion:reduce){.nav-side-btn{transition:none}}
@media print{.ask-top,.nav-side-btn{display:none}}

/* ---- v8.1 Home: the Ami Buyer Framework, as on the audit report's top (audit.css .bf__*) ----
   The score card's wording beside the dial, then "How we got your score": a real table that
   scrolls sideways inside its own box on a phone (width:0 + min-width:100% keeps it from
   widening the page), With Ami / Ami fully set up tinted, the totals in the brand gradient. */
.bf-card .score-text h1{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:12px;text-wrap:balance}
.bf-card .score-text p{font-size:17px;line-height:1.5;margin:0 0 12px}
.bf-card .score-text p.bf-fw{font-size:var(--text-sm);color:var(--muted);margin:0}
.bf-card .bf-fw strong{color:var(--ink-2)}
.bf-note{margin:-8px 0 14px;font-size:13px;color:var(--muted)}
.bf-scroll{width:0;min-width:100%;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);-webkit-overflow-scrolling:touch}
.bf-scroll:focus-visible{outline:3px solid var(--brand-1);outline-offset:2px}
.bf-table{width:100%;min-width:620px;border-collapse:collapse;font-size:15px}
.bf-table th,.bf-table td{padding:12px 16px;text-align:left;border-top:1px solid var(--border);vertical-align:middle}
.bf-table thead th{border-top:0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--panel)}
.bf-table .bf-num{text-align:center;font-weight:800;font-variant-numeric:tabular-nums;width:110px}
.bf-table thead .bf-num{font-weight:700}
.bf-table .bf-ami{background:var(--bf-ami-bg)}
.bf-table .bf-full{background:var(--bf-full-bg)}
.bf-table thead .bf-ami,.bf-table thead .bf-full,.bf-table td.is-up{color:var(--bf-ami-ink)}
.bf-type{font-weight:700;color:var(--ink)}
.bf-table tbody .bf-type{min-width:200px}
.panel.bf-how .panel-head h2{font-size:17px;font-weight:800}
.dial-sub b{white-space:nowrap}
.bf-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;margin-right:8px;border-radius:6px;background:var(--bf-n-bg);font-size:12px;font-weight:700;color:var(--ink-2)}
.bf-badge{display:inline-block;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;white-space:nowrap}
.bf-badge.is-yes{background:var(--good-bg);color:var(--good-ink)}
.bf-badge.is-part{background:var(--warn-bg);color:var(--warn-ink)}
.bf-badge.is-no{background:var(--bad-bg);color:var(--bad-ink)}
.bf-table tfoot tr{background:var(--bf-total-bg)}
.bf-table tfoot th,.bf-table tfoot td{background:transparent;font-size:18px}
.bf-total{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bf-explain{margin:14px 0 0;font-size:var(--text-sm);line-height:1.55;color:var(--ink-2)}
details.bf-how > summary + .bf-note{margin-top:14px}
@media (max-width:860px){
  .bf-card .score-text{text-align:center}
  .bf-card .score-text h1{font-size:23px}
  .bf-card .score-text p{font-size:16px}
  .bf-table th,.bf-table td{padding:10px 12px}
  .bf-table .bf-num{width:96px}
}
/* v8.1 TEAM: Admin > Accounts > an account > People (both layouts; phone first, 44px targets) */
.ppl-h{font-size:var(--text);margin:0 0 8px}
.ppl-invite{border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;margin:0 0 16px;background:var(--panel)}
.ppl-fields{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ppl-field{display:flex;flex-direction:column;gap:4px;flex:1 1 140px;min-width:0;font-size:var(--text-sm);font-weight:600}
.ppl-field.is-wide{flex:2 1 220px}
.ppl-field .input{width:100%;height:46px}
.ppl .input,.ppl .btn,.ppl .lc-confirm summary{min-height:44px;box-sizing:border-box}
.ppl .btn,.ppl .lc-confirm summary{display:inline-flex;align-items:center;justify-content:center}
.ppl-help{margin:8px 0 0}
.ppl-list{list-style:none;margin:0 0 16px;padding:0}
.ppl-row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start;justify-content:space-between;padding:12px 0;border-top:1px solid var(--border)}
.ppl-row:first-child{border-top:0}
.ppl-who{flex:1 1 240px;min-width:0;overflow-wrap:anywhere}
.ppl-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;margin-top:4px}
.ppl-level{font-weight:600}
.ppl-fixed{margin:4px 0 0}
.ppl-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ppl-role{display:flex;gap:6px;align-items:center;margin:0}
.ppl-role select.input{width:auto}
@media (max-width:600px){.ppl-acts{width:100%}.ppl-role{flex:1 1 100%}.ppl-role select.input{flex:1 1 auto}.ppl-fields .btn{flex:1 1 100%}}
/* ---- Setup v8.1 (Lawrence's 18 Oct canvas: Setup-Answers, Setup-GoLive, Setup-Live). One header on every step
   ("Set up Ami on {host}", the score, three square-ish step tags: done ticked, current dark, to do outlined), white
   cards, two columns on a desktop and stacked on a phone. Black buttons with a small radius; the gradient only on
   score numbers. Both layouts share it (the new layout's tokens make the cards white on the light grey page). ---- */
.setup.su{max-width:1080px;margin:8px auto 40px;text-align:left}
.su-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin:0 0 24px}
.su-eyebrow{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.su-score{margin:2px 0 0;font-size:var(--text-sm);color:var(--ink-2)}
.su-score b{font-weight:800;color:var(--ink)}
.su-score b.grad-text{color:transparent}
.su .setup-progress-wrap{margin:0}
.su .setup-progress{display:none}
.su .setup-marks{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.su .setup-marks li{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--border-strong);border-radius:6px;background:var(--card);color:var(--ink-2);font-size:var(--text-sm);font-weight:700}
.su .setup-marks li.is-done{background:var(--good-bg);border-color:var(--good-bg);color:var(--good-ink)}
.su .setup-marks li.is-done.is-shown{border-color:var(--good-ink)}
.su .setup-marks li.is-current{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.su .setup-marks a{display:flex;align-items:center;gap:8px;min-height:44px;color:inherit;text-decoration:none}
.su .setup-marks .dot{display:grid;place-items:center;width:18px;height:18px;border:0;border-radius:4px;font-size:11px;font-weight:800;background:var(--panel-2);color:var(--ink-2)}
.su .setup-marks .is-done .dot{background:none;color:var(--good-ink)}
.su .setup-marks .is-current .dot{background:var(--bg);color:var(--ink)}
.su .setup-marks .lbl{display:inline;text-decoration:none}
.su .setup-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:32px;box-shadow:none;text-align:left}
.su .setup-card h1{margin:0 0 8px;font-size:32px;line-height:1.15;letter-spacing:-.02em;font-weight:800}
.su .setup-line{margin:0 0 24px;max-width:none;font-size:17px;line-height:1.5;color:var(--ink-2)}
.su .btn-lg{min-height:48px}
.su-cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.su-main{flex:999 1 560px;min-width:0}
.su-side{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:14px}
.su-h3{margin:0;font-size:16px;font-weight:700;line-height:1.3}
.su-h4{margin:0 0 8px;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.su-link{font-size:var(--text-sm);font-weight:600}
.su-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.su-actions .link-btn{min-height:44px;font-size:15px;font-weight:600}
.su-msg{margin:0}
.su-msg:empty{display:none}
/* step 1 looked back at: the 10 types on the page */
.su-types{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 24px}
.su-types li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:var(--text-sm)}
.su-types li > span:first-of-type{flex:1;min-width:0}
.su-types .su-state{font-size:12px;font-weight:600;color:var(--muted)}
.su-types .is-yes .ic{color:var(--good)}
.su-types .is-part .ic{color:var(--warn-ink)}
.su-types .is-no .ic{color:var(--bad-ink)}
/* step 2: learning the website, then the gaps form */
.su-progress{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:12px}
.su-progress li{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--muted)}
.su-progress li.is-now{color:var(--ink);font-weight:600}
.su-progress li.is-done{color:var(--ink-2)}
.su-spin{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--border-strong)}
.su-progress li.is-now .su-spin{border-top-color:var(--ink);animation:spin .8s linear infinite}
.su-progress li.is-done .su-spin{background:var(--good);border-color:var(--good)}
.su .auto-summary{margin:0 0 20px}
.su-why{display:block;font-size:12px}
.su-answered{margin:0 0 4px}
.su-form{display:flex;flex-direction:column;gap:14px}
.su-gap{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border:1px solid var(--border);border-radius:10px}
.su-gap-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px}
.su-gap-head label{font-size:17px;font-weight:700}
.su-ask{font-size:13px;color:var(--muted)}
.su-gap textarea{width:100%;min-height:64px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--card);font-size:15px;line-height:1.5;resize:vertical}
.su-gap textarea:disabled{background:var(--panel);color:var(--muted)}
.su-na{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;font-size:var(--text-sm);color:var(--ink-2);cursor:pointer}
.su-na input{width:18px;height:18px;margin:0}
.su-dark,.su .su-dark.setup-recap{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;margin:0;padding:22px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:var(--text-sm);font-weight:400}
.su-dark .su-h3{color:var(--bg)}
.su-dark-text{margin:0;font-size:14px;line-height:1.5;color:var(--bg)}
.su-dark a,.su .su-dark.setup-recap a{color:var(--bg);font-size:14px;font-weight:700}
.su-big{display:flex;align-items:baseline;gap:10px;margin:0;line-height:1}
.su-was,.su-now{font-size:44px;font-weight:800}
.su-arrow{font-size:20px}
.su-box{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:12px;background:var(--card);border:1px solid var(--border)}
.su-box a{font-size:14px;font-weight:700}
.su-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.su-ticks li{display:flex;align-items:flex-start;gap:8px}
.su-ticks .ic{color:var(--good);margin-top:3px}
/* step 3: four numbered parts, the ways to get help beside them */
.su-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:28px}
.su-steps > li{display:flex;gap:16px}
.su-n{flex:0 0 32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:15px;font-weight:800}
.su-step-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:12px;padding-top:4px}
.su .su-plats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.su .su-plats .plat{min-height:52px;padding:0 8px;border:1px solid var(--border-strong);border-radius:8px;background:var(--card);color:var(--ink);font-size:16px;font-weight:700}
.su .su-plats .plat.is-on{border:2px solid var(--ink);background:var(--panel);color:var(--ink)}
.su-code{display:flex;align-items:stretch;border:1px solid var(--border-strong);border-radius:10px;overflow:hidden}
.su .su-code .snippet{flex:1 1 auto;min-width:0;margin:0;padding:14px 16px;border:0;border-radius:0;white-space:pre-wrap;word-break:break-all}
.su .su-code .btn{position:static;flex:none;min-height:48px;border-radius:0}
.su .plat-how{display:flex;flex-direction:column;gap:12px;margin:0;font-size:inherit}
.su .plat-how[hidden],.su [hidden]{display:none}
.su-how{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.su-how code{padding:1px 6px;border-radius:4px;background:var(--panel);font-family:var(--font-mono);font-size:.9em}
.su-check{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:16px 18px;border:1px solid var(--border);border-radius:10px;background:var(--warn-bg)}
.su-pulse{flex:none;width:12px;height:12px;border-radius:50%;background:var(--warn);animation:pulse 1.6s ease-in-out infinite}
.su-check-text{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.su-check-text b{font-size:16px;color:var(--ink)}
.su-check-text span{font-size:14px;color:var(--ink-2)}
.su-check .btn{min-height:44px;background:var(--card)}
.su-side-h{margin:4px 4px 0;font-size:15px;font-weight:800;color:var(--ink-2)}
.su-door{display:flex;align-items:flex-start;gap:14px;padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--ink);text-decoration:none}
.su-door:hover{border-color:var(--border-strong)}
.su-door-ic{flex:0 0 40px;height:40px;border-radius:10px;background:var(--panel);color:var(--ink);display:grid;place-items:center}
.su-door-text{display:flex;flex-direction:column;gap:4px}
.su-door-text b{font-size:16px}
.su-door-text span{font-size:14px;line-height:1.45;color:var(--ink-2)}
/* done: Ami is live */
.su .su-done{max-width:760px;margin:24px auto 0;padding:40px 40px 32px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.su .su-done .setup-line{margin:0;max-width:560px}
.su-tick{width:64px;height:64px;margin:0;border-radius:50%;background:var(--good-bg);color:var(--good);display:grid;place-items:center}
.su-done .su-big{padding:8px 0}
.su-done .su-was{font-size:40px;color:var(--muted)}
.su-done .su-arrow{color:var(--muted)}
.su-done .su-now{font-size:56px}
.su .su-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;margin:12px 0 0;padding:0;border:0}
.su .su-next a{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border:1px solid var(--border);border-radius:10px;color:var(--ink);text-align:left;text-decoration:none}
.su .su-next a:hover{border-color:var(--border-strong)}
.su .su-next b{font-size:15px}
.su .su-next span{font-size:13px;font-weight:400;color:var(--muted)}
@media (max-width:640px){
  .su .setup-card{padding:22px 16px}
  .su .setup-card h1{font-size:26px}
  .su .setup-line{font-size:16px}
  .su .su-done{padding:28px 16px 24px}
  .su .su-next{grid-template-columns:1fr}
  .su .su-plats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .su-gap{padding:14px}
  .su-steps > li{gap:12px}
  .su .setup-marks li{padding:0 10px}
  .su-code{flex-direction:column}
  .su .su-code .btn{min-height:44px}
}

/* V8.3 SEARCH: the team's Search and replace (/app/search, /admin/search): existing panels, fields, tags, .pl-pre snippets and the .test-state bar */
.sr-line{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}
.sr-line .field{margin:0}
.sr-q{flex:1 1 280px;min-width:0}.sr-q .input,.sr-scope .input,.sr-site .input{width:100%}
.sr-scope,.sr-site{flex:0 1 260px;min-width:0}
.sr-site[hidden],.sr-done[hidden],.sr-applybar[hidden]{display:none}
.sr-opts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 14px;font-size:var(--text-sm)}
.sr-opts label{display:inline-flex;gap:6px;align-items:center}
.sr-replace{padding-top:12px;border-top:1px solid var(--border)}
.sr-group{margin-top:16px}
.sr-rows{list-style:none;margin:8px 0 0;padding:0}
.sr-row{border-top:1px solid var(--border);padding:10px 0;min-width:0}
.sr-row:first-child{border-top:0}
.sr-where{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:var(--text-sm);min-width:0}
.sr-where a,.sr-where .sr-link{font-weight:600;overflow-wrap:anywhere;min-width:0}
.sr-row .pl-pre{margin-top:6px;max-height:none}
.sr-row .pl-pre mark{background:var(--warn-bg);color:var(--warn-ink);border-radius:3px;padding:0 2px}
.sr-row .pl-pre.sr-after{background:var(--good-bg)}
.sr-row .pl-pre.sr-after mark{background:var(--good-bg);color:var(--good-ink);font-weight:700;text-decoration:underline}
.sr-row p.xs{margin:4px 0 0}
.sr-ro{color:var(--warn-ink)}.sr-res.is-ok{color:var(--good-ink);font-weight:600}.sr-res.is-bad{color:var(--bad-ink);font-weight:600}
.sr-pager{display:flex;gap:10px;align-items:center;margin-top:8px}
.sr-applybar{position:sticky;bottom:0;z-index:5;margin:16px 0 0}
/* v8.3 UX: Setup's step tags: every step reached opens (both ways); one not reached yet says why on hover or focus */
.su .setup-marks a:hover .lbl,.su .setup-marks a:focus-visible .lbl{text-decoration:underline;text-underline-offset:3px}
.su .setup-marks .su-locked{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;cursor:not-allowed;border-radius:4px}
.su .setup-marks .su-locked:focus-visible{outline:2px solid var(--brand-1);outline-offset:4px}
.su .setup-marks .su-why{display:none;position:absolute;left:-12px;top:calc(100% + 4px);z-index:5;width:max-content;max-width:240px;padding:8px 10px;border-radius:6px;background:var(--ink);color:var(--bg);font-size:var(--text-sm);font-weight:600;line-height:1.35;white-space:normal}
.su .setup-marks .su-locked:hover .su-why,.su .setup-marks .su-locked:focus .su-why{display:block}
.su .setup-marks li:last-child .su-why{left:auto;right:-12px}
.su .setup-marks .su-locked.is-quiet .su-why{display:none}
/* v8.3 UX: Go live's "Something else": what the site is built on */
.su-other{margin:14px 0 0;display:grid;gap:6px}
.su-other[hidden]{display:none}
.su-other label{font-size:var(--text-sm);font-weight:700;color:var(--ink)}
.su-other-row{display:flex;gap:8px;flex-wrap:wrap}
.su-other-row .input{flex:1 1 220px;min-width:0;min-height:44px}
.su-other-row .btn{min-height:44px}
/* v8.3 UX: Home's Example breakdown shows the page's words under each question */
.q-quote{margin:2px 0 4px;font-size:var(--text-sm);font-style:italic;color:var(--ink-2)}
/* v8.3 UX: Conversations' "Only suggested questions" / "Only typed questions" (one at a time) and "Live chat status" */
.filter-asked{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:0;padding:0;border:0;min-width:0}
.filter-asked legend{float:left;padding:0;margin:0 0 4px;width:100%}
.filter-asked .check-inline{flex:none;flex-direction:row;max-width:none;min-height:38px;white-space:nowrap}
.ln-filters-body .filter-asked{flex:1 1 100%}
/* v8.3 UX: "Go to live chats" beside the availability switch; on a phone the top bar has no room, and Live chat is in the menu */
@media (max-width:600px){.live-go{display:none}}
/* the label only where the top bar has room (it squeezed the site name at 1024-1440px); the icon keeps its title */
.live-go .live-avail-more{display:none}
@media (min-width:1600px){.live-go .live-avail-more{display:inline}}
/* with the help panel docked beside the dashboard (1024-1279px) there's no room for even the icon: Live chat is in the menu */
@media (max-width:1279px){html.help-docked .live-go{display:none}}
/* V8.3 LEADS: one lead open (its forms and timeline), the Leads filters, incomplete leads */
.lead-detail .lead-form{margin:0 0 14px;padding:12px 0 0;border-top:1px solid var(--border)}
.lead-detail .lead-form .field{margin-bottom:8px}
.lead-log{list-style:none;margin:12px 0 0;padding:0}
.lead-log li{padding:8px 0;border-top:1px solid var(--border)}
.lead-log .lead-note{white-space:normal;overflow-wrap:anywhere}
.lead-filters{flex-wrap:wrap}
.ln-lead-filters .ln-filters-body{flex-wrap:wrap}
.incomplete-table form{margin:6px 0 0}