/* 3:16 Quote Desk — brand tokens from 316constructionid.com styles.css */
@font-face { font-family: "Anton"; src: url("/assets/fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --ink:#070f1a; --navy:#0d2238; --navy-2:#12314d; --gold:#f5b72a; --gold-2:#c89520; --paper:#f6f3ec;
  --text:#e9eef5; --muted:#a9b6c6; --dark-text:#0b1624; --dark-muted:#4c5a6b;
  --card:#fff; --line-d:#e4dfd3; --r:16px; --r-s:10px;
  --display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ok:#1e7a4f; --ok-bg:#e3f3ea; --warn:#8a5a00; --warn-bg:#fff4d6; --bad:#a3302a; --bad-bg:#fbe7e5; --info:#1f4f7a; --info-bg:#e5eef7;
  --shadow:0 1px 2px rgba(7,15,26,.06),0 6px 20px rgba(7,15,26,.06);
  --nav-h:64px;
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--sans); color:var(--dark-text); background:var(--paper); font-size:16px; line-height:1.45; }
a { color:var(--navy-2); }
button, input, select, textarea { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.boot { padding:40vh 0 0; text-align:center; color:var(--dark-muted); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Login ---------- */
.login { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px; background:radial-gradient(120% 80% at 50% 0%, var(--navy-2), var(--navy) 55%, var(--ink)); color:var(--text); }
.login-card { width:100%; max-width:380px; text-align:center; }
.login-badge { width:96px; height:96px; border-radius:22px; object-fit:cover; box-shadow:0 10px 30px rgba(0,0,0,.35); border:2px solid rgba(245,183,42,.5); }
.login h1 { font-family:var(--display); font-weight:400; letter-spacing:.02em; font-size:34px; margin:18px 0 4px; text-transform:uppercase; }
.login h1 span { color:var(--gold); }
.login p.sub { color:var(--muted); margin:0 0 26px; }
.login form { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:20px; text-align:left; }
.login label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; color:var(--text); }
.login input { width:100%; padding:14px; border-radius:var(--r-s); border:1px solid rgba(255,255,255,.25); background:rgba(7,15,26,.5); color:#fff; font-size:17px; }
.login .btn { width:100%; margin-top:14px; }
.login .err { color:#ffb4ab; font-size:14px; min-height:20px; margin-top:10px; }
.login .fine { color:var(--muted); font-size:13px; margin-top:18px; }

/* ---------- Shell ---------- */
.top { position:sticky; top:0; z-index:20; background:var(--navy); color:var(--text); border-bottom:3px solid var(--gold); padding-top:env(safe-area-inset-top); }
.top-in { max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:10px 16px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex:1 1 auto; min-width:0; }
.brand img { width:38px; height:38px; border-radius:9px; object-fit:cover; flex:none; }
.brand b { font-family:var(--display); font-weight:400; font-size:21px; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; }
.brand b span { color:var(--gold); }
.brand small { display:block; color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.tabs-top { display:none; gap:4px; }
.tabs-top a, .tabs-bottom a { text-decoration:none; color:var(--muted); font-weight:600; }
.tabs-top a { padding:9px 14px; border-radius:999px; font-size:15px; }
.tabs-top a[aria-current="page"] { background:rgba(245,183,42,.16); color:var(--gold); }
.tabs-top a:hover { color:#fff; }
.signout { background:none; border:1px solid rgba(255,255,255,.2); color:var(--text); border-radius:999px; padding:7px 12px; font-size:13px; cursor:pointer; flex:none; }
.tabs-bottom { position:fixed; z-index:30; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(4,1fr); background:var(--navy); border-top:1px solid rgba(255,255,255,.1); padding-bottom:env(safe-area-inset-bottom); }
.tabs-bottom a { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11.5px; padding:9px 0 10px; min-height:var(--nav-h); justify-content:center; }
.tabs-bottom a svg { width:22px; height:22px; }
.tabs-bottom a[aria-current="page"] { color:var(--gold); }
.badge-dot { background:var(--gold); color:var(--ink); border-radius:999px; font-size:10.5px; font-weight:800; padding:0 6px; margin-left:4px; }
main.view { max-width:1180px; margin:0 auto; padding:16px 14px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); }
h2.page { font-family:var(--display); font-weight:400; font-size:30px; letter-spacing:.015em; text-transform:uppercase; margin:6px 0 2px; color:var(--navy); }
p.lede { margin:0 0 16px; color:var(--dark-muted); }

/* ---------- Bits ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 18px; border-radius:var(--r-s); border:0; cursor:pointer; font-weight:700; text-decoration:none; }
.btn-gold { background:var(--gold); color:var(--ink); }
.btn-gold:hover { background:#ffc642; }
.btn-navy { background:var(--navy); color:#fff; }
.btn-ghost { background:transparent; border:1.5px solid var(--line-d); color:var(--navy); }
.btn-sm { min-height:36px; padding:6px 12px; font-size:14px; }
.btn[disabled] { opacity:.55; cursor:default; }
.card { background:var(--card); border:1px solid var(--line-d); border-radius:var(--r); box-shadow:var(--shadow); padding:16px; margin-bottom:14px; min-width:0; }
.card h3 { margin:0 0 10px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--dark-muted); }
.pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:3px 10px; font-size:12.5px; font-weight:700; white-space:nowrap; }
.pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.st-new { background:#fff1c9; color:#7a5200; }
.st-reviewed { background:var(--info-bg); color:var(--info); }
.st-quoted { background:#ece6fb; color:#5a3c9e; }
.st-won { background:var(--ok-bg); color:var(--ok); }
.st-lost { background:#eceae5; color:#5f5a50; }
.chip { display:inline-block; border-radius:6px; padding:2px 8px; font-size:12.5px; font-weight:600; background:#efe9dc; color:#4a4030; margin:0 4px 4px 0; }
.chip-urgent { background:var(--bad-bg); color:var(--bad); }
.chip-soon { background:var(--warn-bg); color:var(--warn); }
.tag-example { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.08em; padding:2px 6px; border-radius:4px; background:var(--warn-bg); color:var(--warn); border:1px dashed #d9a400; vertical-align:middle; }
.alert { border-radius:var(--r-s); padding:12px 14px; margin-bottom:14px; font-size:14.5px; border:1px solid; }
.alert b { display:block; margin-bottom:2px; }
.alert ul { margin:6px 0 0; padding-left:18px; }
.alert-warn { background:var(--warn-bg); border-color:#f0d48a; color:#5c3d00; }
.alert-bad { background:var(--bad-bg); border-color:#efc1bc; color:#6f1f1a; }
.alert-info { background:var(--info-bg); border-color:#c3d6ea; color:#173a5c; }
.disclaimer { display:flex; gap:10px; align-items:flex-start; background:var(--navy); color:var(--text); border-left:5px solid var(--gold); border-radius:var(--r-s); padding:12px 14px; margin-bottom:14px; font-size:14px; }
.disclaimer strong { color:var(--gold); text-transform:uppercase; letter-spacing:.04em; font-size:13px; display:block; }
.muted { color:var(--dark-muted); }
.small { font-size:13.5px; }
.empty { text-align:center; padding:40px 16px; color:var(--dark-muted); }

/* ---------- Inbox ---------- */
.toolbar { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.filters { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.filters::-webkit-scrollbar { display:none; }
.filters button { flex:none; border:1.5px solid var(--line-d); background:#fff; border-radius:999px; padding:7px 13px; font-size:14px; font-weight:600; cursor:pointer; color:var(--dark-muted); }
.filters button[aria-pressed="true"] { background:var(--navy); border-color:var(--navy); color:#fff; }
.filters button .n { opacity:.7; margin-left:4px; font-weight:500; }
.search { width:100%; padding:12px 14px; border-radius:var(--r-s); border:1.5px solid var(--line-d); background:#fff; }
.req-list { display:grid; gap:10px; }
.req { display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line-d); border-radius:var(--r); padding:14px; box-shadow:var(--shadow); position:relative; }
.req:hover { border-color:var(--gold-2); }
.req.is-new { border-left:5px solid var(--gold); }
.req-top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.req-name { font-weight:800; font-size:17px; }
.req-meta { color:var(--dark-muted); font-size:13.5px; margin:2px 0 8px; }
.req-bottom { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; margin-top:6px; }
.req-est { font-weight:800; font-size:17px; color:var(--navy); white-space:nowrap; }
.req-est.na { font-weight:700; font-size:13.5px; color:var(--warn); white-space:normal; text-align:right; }
.req-est small { display:block; font-weight:600; font-size:11.5px; color:var(--dark-muted); text-align:right; }

/* ---------- Detail ---------- */
.back { display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-weight:700; color:var(--navy-2); margin:4px 0 8px; }
.detail-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:flex-end; margin-bottom:12px; }
.detail-head h2 { margin:0; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:0 16px; }
.big-range { font-family:var(--display); font-weight:400; font-size:40px; color:var(--navy); letter-spacing:.01em; line-height:1.05; }
.big-range.na { font-size:28px; color:var(--warn); }
.range-sub { color:var(--dark-muted); font-size:13.5px; margin:4px 0 12px; }
table.lines { width:100%; border-collapse:collapse; font-size:14.5px; }
table.lines th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--dark-muted); font-weight:700; padding:6px 4px; border-bottom:2px solid var(--line-d); }
table.lines td { padding:10px 4px; border-bottom:1px solid var(--line-d); vertical-align:top; }
table.lines td.num, table.lines th.num { text-align:right; white-space:nowrap; }
table.lines tr.total td { font-weight:800; border-bottom:0; border-top:2px solid var(--navy); }
.line-label { font-weight:700; }
.line-sub { font-size:12.5px; color:var(--dark-muted); }
.line-flag { font-size:12.5px; font-weight:700; }
.flag-measure { color:var(--warn); }
.flag-rate { color:var(--bad); }
.flag-visit { color:var(--info); }
.measure { display:flex; gap:6px; margin-top:6px; align-items:center; flex-wrap:wrap; }
.measure input { width:110px; padding:8px 10px; border:1.5px solid #e2c169; border-radius:8px; background:#fffaf0; }
.measure span { font-size:13px; color:var(--dark-muted); }
ul.assume { margin:10px 0 0; padding-left:18px; color:var(--dark-muted); font-size:13.5px; }
dl.kv { display:grid; grid-template-columns:minmax(96px,auto) minmax(0,1fr); gap:6px 12px; margin:0; font-size:15px; }
dl.kv dt { color:var(--dark-muted); font-size:13.5px; padding-top:1px; }
dl.kv dd { margin:0; overflow-wrap:anywhere; }
.contact-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.message { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--paper); border-radius:var(--r-s); padding:12px; font-size:15px; border:1px solid var(--line-d); }
.ai-sum { font-size:15.5px; margin:0 0 10px; }
.sec-label { font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--navy-2); margin:14px 0 6px; }
ul.tidy { margin:0; padding-left:18px; }
ul.tidy li { margin:3px 0; }
ol.qs { margin:0; padding-left:20px; }
ol.qs li { margin:6px 0; }
.status-row { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.status-row button { padding:10px 2px; border-radius:9px; border:1.5px solid var(--line-d); background:#fff; font-weight:700; font-size:13px; cursor:pointer; text-transform:capitalize; }
.status-row button[aria-pressed="true"] { background:var(--navy); color:#fff; border-color:var(--navy); }
textarea.notes { width:100%; min-height:110px; padding:12px; border-radius:var(--r-s); border:1.5px solid var(--line-d); resize:vertical; }
.row-end { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; flex-wrap:wrap; }
.pending { display:flex; align-items:center; gap:10px; color:var(--dark-muted); }
.spinner { width:18px; height:18px; border:3px solid #e6dfcf; border-top-color:var(--gold-2); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Overview ---------- */
.stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.stat { background:#fff; border:1px solid var(--line-d); border-radius:var(--r); padding:14px; box-shadow:var(--shadow); min-width:0; }
.stat .k { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--dark-muted); font-weight:700; }
.stat .v { font-family:var(--display); font-weight:400; font-size:30px; color:var(--navy); line-height:1.15; margin-top:4px; overflow-wrap:anywhere; }
.stat .v.sm { font-size:22px; }
.stat .s { font-size:12.5px; color:var(--dark-muted); }
.stat.hero { grid-column:1 / -1; background:var(--navy); color:var(--text); border-color:var(--navy); }
.stat.hero .k { color:var(--muted); }
.stat.hero .v { color:var(--gold); font-size:34px; }
.stat.hero .s { color:var(--muted); }
.bars { display:grid; gap:9px; }
.bar { display:grid; grid-template-columns:110px minmax(0,1fr) 34px; gap:10px; align-items:center; font-size:14px; }
.bar .lbl { text-transform:capitalize; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar .track { height:12px; background:#efe9dc; border-radius:999px; overflow:hidden; }
.bar .fill { height:100%; border-radius:999px; background:var(--gold-2); min-width:4px; }
.bar .fill.f-new { background:var(--gold); }
.bar .fill.f-reviewed { background:#3d77ad; }
.bar .fill.f-quoted { background:#7b5cc4; }
.bar .fill.f-won { background:var(--ok); }
.bar .fill.f-lost { background:#a39d91; }
.bar .cnt { text-align:right; font-weight:800; }
.ov-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:0 14px; }

/* ---------- Settings ---------- */
.set-sec { margin-bottom:14px; }
.rate-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 10px; padding:12px 0; border-bottom:1px solid var(--line-d); }
.rate-row:last-child { border-bottom:0; }
.rate-name { grid-column:1 / -1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:700; }
.rate-name .u { font-weight:500; color:var(--dark-muted); font-size:13.5px; }
.rate-name .unset { font-size:11.5px; font-weight:800; color:var(--bad); background:var(--bad-bg); border-radius:4px; padding:2px 6px; letter-spacing:.04em; }
.field label { display:block; font-size:12.5px; font-weight:600; color:var(--dark-muted); margin-bottom:4px; }
.money { position:relative; }
.money input, .field input, .field select { width:100%; padding:11px 12px; border:1.5px solid var(--line-d); border-radius:9px; background:#fff; font-size:16px; }
.money.pre input { padding-left:24px; }
.money.pre::before { content:"$"; position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--dark-muted); font-weight:600; }
.money.suf input { padding-right:30px; }
.money.suf::after { content:"%"; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--dark-muted); font-weight:600; }
.money input.is-example { border-style:dashed; border-color:#d9a400; background:#fffaf0; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.field .hint { font-size:12px; color:var(--dark-muted); margin-top:4px; }
.town-row, .custom-row { display:grid; gap:8px; align-items:end; padding:10px 0; border-bottom:1px solid var(--line-d); }
.town-row { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto; }
.custom-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.custom-row .full { grid-column:1 / -1; }
.icon-btn { width:40px; height:44px; border-radius:9px; border:1.5px solid var(--line-d); background:#fff; cursor:pointer; color:var(--bad); font-size:20px; line-height:1; }
.savebar { position:sticky; bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px); z-index:10; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--navy); color:var(--text); border-radius:var(--r); padding:10px 10px 10px 16px; box-shadow:0 10px 30px rgba(7,15,26,.25); }
.savebar span { font-size:14px; }
.confirm-row { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }

/* ---------- Log ---------- */
.log { list-style:none; margin:0; padding:0; }
.log li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:10px 0; border-bottom:1px solid var(--line-d); font-size:14px; }
.log .act { font-weight:700; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.log .when { color:var(--dark-muted); font-size:12.5px; white-space:nowrap; }
.log .det { grid-column:1 / -1; color:var(--dark-muted); font-size:13px; overflow-wrap:anywhere; }

#toast { position:fixed; left:50%; bottom:calc(var(--nav-h) + 20px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); background:var(--ink); color:#fff; padding:11px 16px; border-radius:999px; font-weight:600; font-size:14px; opacity:0; pointer-events:none; transition:.2s; z-index:50; max-width:90vw; }
#toast.show { opacity:1; transform:translate(-50%,0); }
.notfound { padding:20vh 20px; text-align:center; }

/* ---------- Desktop ---------- */
@media (min-width: 820px) {
  :root { --nav-h:0px; }
  .tabs-bottom { display:none; }
  .tabs-top { display:flex; }
  .brand { flex:0 1 auto; margin-right:auto; }
  main.view { padding:24px 24px 48px; }
  h2.page { font-size:36px; }
  .toolbar { flex-direction:row; align-items:center; justify-content:space-between; }
  .search { max-width:320px; }
  .req-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; }
  .stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .stat.hero { grid-column:span 2; }
  .ov-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rate-row { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); align-items:end; }
  .rate-name { grid-column:auto; align-self:center; }
  .field-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .custom-row { grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto; }
  .custom-row .full { grid-column:auto; }
  .set-cols { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:0 16px; align-items:start; }
  .savebar { bottom:16px; }
  #toast { bottom:28px; }
}
@media (min-width: 1100px) { .req-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation:none; } #toast { transition:none; } }

/* ---------- First-login tour ---------- */
#tour-root { position:static; }
.tour-card { position:fixed; z-index:80; left:12px; right:12px; bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); background:#fff; color:var(--dark-text); border:1px solid var(--line-d); border-top:4px solid var(--gold); border-radius:var(--r); box-shadow:0 16px 50px rgba(7,15,26,.28); padding:14px 16px 14px; max-height:min(48vh, 380px); overflow:auto; }
.tour-card:focus, .tour-card:focus-visible { outline:none; }
.tour-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.tour-step { margin:0; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dark-muted); }
.tour-skip { background:none; border:0; color:var(--dark-muted); font-weight:700; font-size:14px; cursor:pointer; padding:6px 4px; }
.tour-skip:hover { color:var(--navy); }
.tour-card h3 { margin:0 0 6px; font-family:var(--display); font-weight:400; font-size:26px; letter-spacing:.02em; text-transform:uppercase; color:var(--navy); }
.tour-card p#tour-body { margin:0 0 12px; font-size:15px; color:var(--dark-text); }
.tour-dots { display:flex; gap:6px; justify-content:center; align-items:center; margin:0 0 12px; }
.tour-dots span { width:7px; height:7px; border-radius:50%; background:#d9d2c3; }
.tour-dots span.done { background:#c8b98a; }
.tour-dots span.on { width:16px; border-radius:99px; background:var(--navy); }
.tour-actions { display:flex; justify-content:flex-end; gap:8px; }
.tour-spotlight { position:relative; z-index:25; outline:3px solid var(--gold); outline-offset:3px; box-shadow:0 0 0 8px rgba(245,183,42,.32), var(--shadow); border-radius:var(--r-s); }
header.top .tour-spotlight, .signout.tour-spotlight { outline-color:var(--gold); box-shadow:0 0 0 6px rgba(245,183,42,.45); border-radius:999px; }
tr.tour-spotlight { outline-offset:0; background:#fffaf0; }
.tour-ex-wrap { display:grid; gap:6px; }
.tour-ex-label { margin:8px 0 0; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--warn); }
.req.is-example { border-style:dashed; border-color:#d9a400; background:#fffaf0; }
.tour-replay { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; background:#fff; border:1px dashed var(--line-d); border-radius:var(--r-s); padding:10px 12px; margin-bottom:14px; }
.tour-replay p { margin:0; }
body.tour-on { overflow:hidden; }
body.tour-on #app { pointer-events:none; }
body.tour-on .savebar { visibility:hidden; }
body.tour-on #tour-root, body.tour-on .tour-card { pointer-events:auto; }
body.tour-on main.view { padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 320px); }
.tour-spotlight { scroll-margin-top:88px; scroll-margin-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 300px); }
@media (min-width: 820px) {
  .tour-card { left:50%; right:auto; width:420px; bottom:28px; transform:translateX(-50%); max-height:min(46vh, 400px); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-spotlight { transition:none; }
}