/* DeepSeeIn — calm paper, sky-to-deep blue (from the brand film), warm amber for Gyan Ghar. */
:root {
  --brand: #123F63; --brand-2: #1F78B8; --brand-3: #E4F1FA;
  --accent: #F2A541; --coral: #E4572E; --ok: #1F8A5B; --no: #C2412D;
  --bg: #FCFAF5; --wall: #F3EFE6; --panel: #FFFFFF; --panel-2: #F8F4EA; --line: #E6E0D2;
  --ink: #0F1E26; --ink-2: #4A5A63; --muted: #6B7880;
  --in: #FFFFFF; --out: #DDEEF9; --sys: #FFF6E5;
  --shadow: 0 1px 1.5px rgba(16, 36, 42, .13);
  --room-class: #FFF4E2; --room-cabin: #E6F3F1; --room-audit: #EEEBFA;
  --r: 14px; --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; --sf: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 40l14-11 14 11v14H20z'/%3E%3Ccircle cx='130' cy='30' r='8'/%3E%3Cpath d='M130 14v4M130 42v4M114 30h4M142 30h4'/%3E%3Cpath d='M70 90c6-6 12 6 18 0s12 6 18 0'/%3E%3Cpath d='M70 100c6-6 12 6 18 0s12 6 18 0'/%3E%3Crect x='135' y='105' width='8' height='26' rx='4'/%3E%3Ccircle cx='139' cy='136' r='6'/%3E%3Cpath d='M30 140c10-18 30-18 30 0-10 6-20 6-30 0z'/%3E%3Cpath d='M30 140l30 0'/%3E%3Cpath d='M95 150v-14l6-4v18M108 150v-20M115 150v-12'/%3E%3Cpath d='M10 95h10M10 102h16'/%3E%3C/svg%3E");
  color-scheme: light only;
}
* { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--brand-2); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.ic { width: 22px; height: 22px; flex: none; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }

/* ---------- Buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .08s, background .15s; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--brand-2); color: #fff; }
.btn.primary:hover { background: var(--brand); }
.btn.ghost { background: transparent; color: var(--brand-2); border: 0; }
.btn.block { width: 100%; }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: wait; }
.icon-btn { background: none; border: 0; color: inherit; padding: 8px; border-radius: 50%; cursor: pointer; display: inline-grid; place-items: center; text-decoration: none; }
.icon-btn:hover { background: rgba(255,255,255,.12); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.chip { border: 0; background: var(--panel); color: var(--brand-2); border-radius: 999px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.chip:hover { background: var(--brand-3); }
.chip.ghost { ; color: var(--ink); font-weight: 600; text-align: left; }
.chip.ghost.on, .chip.on { background: var(--brand-2); color: #fff; box-shadow: inset 0 0 0 2px var(--brand-2); }
.chip.sm { padding: 5px 11px; font-size: 13px; }
.badge { background: var(--accent); color: #2b1c00; font-weight: 800; font-size: 11px; border-radius: 999px; padding: 2px 8px; letter-spacing: .02em; }
.badge.soft { background: var(--brand-3); color: var(--brand-2); }

/* ---------- Gate ---------- */
.gate-wrap { min-height: 100%; background: var(--bg) var(--doodle); }
.gate { max-width: 1040px; margin: 0 auto; padding: 18px 16px 8px; }
.gate-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand img { width: 44px; height: 44px; }
.brand b { font-family: var(--display); font-size: 1.45rem; letter-spacing: -.01em; display: block; line-height: 1.1; }
.brand small { color: var(--muted); font-weight: 600; font-size: 12px; }
.brand.sm img { width: 36px; height: 36px; background: #fff; border-radius: 50%; padding: 2px; } .brand.sm b { font-size: 1.15rem; color: #fff; } .brand.sm small { color: rgba(255,255,255,.75); }
.vv-link { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.vv-link img { width: 30px; height: 30px; }
.gate-hero { text-align: center; padding: 26px 8px 18px; }
.gate-hero h1 { font-family: var(--display); font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.12; margin: 0 0 10px; letter-spacing: -.02em; }
.gate-hero h1 span { color: var(--brand-2); font-style: italic; }
.gate-hero p { color: var(--ink-2); max-width: 620px; margin: 0 auto; }
.windows { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.window-box { text-align: left; border: 0; background: var(--panel); border-radius: 22px; padding: 20px; cursor: pointer; box-shadow: 0 6px 22px rgba(18,63,99,.10); display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .15s; position: relative; overflow: hidden; }
.window-box.train { background: var(--room-class); }
.window-box.consult { background: var(--room-cabin); }
.window-box.audit { background: var(--room-audit); }
.window-box.audit::after { background: #DCD6F5; }
.window-box.audit .wb-top { color: #5B57C9; }
.wb-pro { margin-left: auto; font-size: 12px; font-weight: 500; letter-spacing: 0; background: #5B57C9; color: #fff; border-radius: 999px; padding: 3px 10px; }
.windows.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1060px) { .windows.three { grid-template-columns: 1fr 1fr; } .windows.three > :last-child { grid-column: 1 / -1; } }
.window-box::after { content: ''; position: absolute; inset: auto -40px -60px auto; width: 160px; height: 160px; border-radius: 50%; background: var(--brand-3); z-index: 0; }
.window-box > * { position: relative; z-index: 1; }
.window-box.train::after { background: #FBE2B8; }
.window-box.consult::after { background: #CDE8E4; }
.window-box:hover { transform: translateY(-2px); }
.window-box.on { box-shadow: 0 0 0 3px var(--accent), 0 6px 22px rgba(18,63,99,.10); }
.window-box h2 { font-family: var(--display); margin: 0; font-size: 1.5rem; }
.window-box p { margin: 0; color: var(--ink-2); }
.wb-top { display: flex; justify-content: space-between; align-items: center; color: var(--brand-2); }
.window-box.train .wb-top { color: #B36B00; }
.wb-kicker { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.wb-go { margin-top: auto; font-weight: 800; color: var(--brand-2); }
.faces { display: flex; }
.faces img { width: 46px; height: 46px; border-radius: 50%; border: 0; margin-right: -10px; object-fit: cover; }
.wb-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.wb-badges span { background: var(--panel-2); border: 0; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 700; }
.auth { max-width: 460px; margin: 18px auto 0; }
.auth-form, .card-form { background: var(--panel); border-radius: 20px; padding: 20px; box-shadow: 0 6px 22px rgba(18,63,99,.10); display: grid; gap: 12px; }
.auth-form h3 { margin: 0; font-family: var(--display); font-size: 1.3rem; }
.auth-form h3 small { font-family: var(--font); font-size: 13px; color: var(--muted); font-weight: 600; }
label { display: grid; gap: 5px; font-weight: 600; font-size: 14px; }
input, select, textarea { width: 100%; border: 0; border-radius: 12px; padding: 11px 12px; background: var(--panel); font-weight: 500; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { ; outline: none; }
.hint, .demo-note { font-size: 12.5px; color: var(--muted); }
.demo-note { background: var(--sys); border-radius: 10px; padding: 8px 10px; color: var(--ink-2); }
.consent { grid-template-columns: auto 1fr; align-items: start; font-weight: 500; font-size: 13.5px; color: var(--ink-2); }
.consent input { width: 18px; height: 18px; margin-top: 3px; }
.auth-msg { color: var(--no); font-weight: 600; min-height: 1px; font-size: 14px; }
.auth-links { display: flex; justify-content: space-between; font-size: 14px; }
.gate-team { margin: 30px 0 8px; text-align: center; }
.gate-team h3 { font-family: var(--display); font-size: 1.3rem; margin: 0 0 12px; }
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tm { border: 0; font: inherit; color: inherit; text-align: center; background: var(--panel); border-radius: 18px; padding: 10px; display: grid; gap: 2px; align-content: start; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tm:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(18,63,99,.14); }
.tm .tm-more { font-size: 12px; font-weight: 700; color: var(--brand-2); margin-top: 4px; }
.tm img { border-radius: 12px; aspect-ratio: 1; object-fit: cover; object-position: top; }
.tm b { margin-top: 6px; } .tm small { color: var(--muted); font-weight: 600; } .tm em { font-size: 12px; color: var(--ink-2); }
.app-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; padding: 16px 8px; color: var(--muted); font-size: 12px; }
.app-foot a { color: var(--muted); }

/* Onboarding */
.onb .card-form { max-width: 640px; margin: 14px auto; }
.onb-intro { display: flex; gap: 10px; align-items: flex-start; }
.onb-intro img { width: 44px; height: 44px; border-radius: 50%; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.lab { font-weight: 600; font-size: 14px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg-b { border: 0; background: var(--panel); border-radius: 12px; padding: 10px; display: grid; text-align: left; cursor: pointer; }
.seg-b small { color: var(--muted); }
.seg-b.on { box-shadow: inset 0 0 0 2px var(--brand-2); background: var(--brand-3); }
.goal-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Shell ---------- */
.shell-wrap { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; height: 100dvh; max-width: 1500px; margin: 0 auto; background: var(--panel); box-shadow: 0 0 40px rgba(0,0,0,.08); }
.side { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; background: var(--panel); }
.bar { background: var(--brand); color: #fff; padding: 12px 12px 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.room-name { display: flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; padding: 0 16px 8px; font-family: var(--display); font-size: 1.15rem; }
.room-name .ic { color: var(--accent); }
.room-cabin .room-name .ic { color: #8FD3CF; }
.bar .icon-btn { color: #fff; }
.bar .brand { margin-right: auto; }
.tabs { display: flex; background: var(--brand); padding: 0 6px; }
.tab { flex: 1; display: flex; gap: 6px; align-items: center; justify-content: center; color: rgba(255,255,255,.72); text-decoration: none; padding: 10px 4px 11px; font-weight: 700; font-size: 14px; border-bottom: 3px solid transparent; }
.tab.on { color: #fff; border-bottom-color: var(--accent); }
.tab .ic { width: 19px; height: 19px; }
.list { flex: 1; overflow-y: auto; }
.row { display: flex; gap: 12px; padding: 10px 14px; text-decoration: none; color: inherit; align-items: center; border-bottom: 1px solid var(--line); }
.row:hover, .row.on { background: var(--panel-2); }
.row.locked { opacity: .55; }
.av-wrap { position: relative; flex: none; }
.av { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.av.plus { background: var(--brand-2); color: #fff; } .av.plus.soft { background: var(--brand-3); color: var(--brand-2); }
.num { position: absolute; right: -3px; bottom: -3px; color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; min-width: 21px; height: 21px; display: grid; place-items: center; border: 0; padding: 0 4px; }
.row-t { min-width: 0; flex: 1; }
.row-1 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.row-1 b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-2 { color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; flex: none; }
.st .ic { width: 15px; height: 15px; }
.st.ok { color: var(--ok); font-weight: 800; }
.course-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.course-head b { display: block; } .course-head small { color: var(--muted); font-size: 12.5px; }
.ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--brand-2) calc(var(--p) * 1%), var(--line) 0); flex: none; }
.ring span { background: var(--panel-2); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.cert-banner { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: #FCEBD0; color: #6b4300; text-decoration: none; font-weight: 700; }
.cert-banner span { flex: 1; display: grid; } .cert-banner small { font-weight: 500; }
.group-av { display: flex; flex: none; }
.group-av img { width: 30px; height: 30px; border-radius: 50%; border: 0; margin-right: -10px; object-fit: cover; }
.group-av.mini img { width: 25px; height: 25px; ; margin-right: -9px; }
.group-av.mini { width: 50px; flex-wrap: wrap; row-gap: 0; }
.panel-strip { display: flex; justify-content: space-around; padding: 12px 6px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.ps { display: grid; justify-items: center; gap: 3px; }
.ps img { width: 46px; height: 46px; border-radius: 50%; border: 0; object-fit: cover; }
.ps small { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.ai-off { margin: 10px 12px; background: var(--sys); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; color: var(--ink-2); }
.prof-card { padding: 18px 16px; display: grid; justify-items: center; gap: 6px; border-bottom: 1px solid var(--line); }
.prof-card .kv { width: 100%; }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-2); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13.5px; margin: 8px 0; }
.kv span { color: var(--muted); }
.menu { display: grid; }
.menu-i { display: flex; justify-content: space-between; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 14px 16px; text-align: left; cursor: pointer; font-weight: 600; }
.menu-i:hover { background: var(--panel-2); }
.about { display: flex; gap: 10px; align-items: center; padding: 14px 16px; font-size: 12.5px; color: var(--muted); }
.about img { width: 40px; }
.devkey { margin: 12px; padding: 12px; border: 0; border-radius: 12px; display: grid; gap: 8px; font-size: 13px; }
.devkey small { color: var(--muted); }

/* ---------- Main / chat ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--wall) var(--doodle); position: relative; }
.empty-main { margin: auto; text-align: center; color: var(--ink-2); display: grid; justify-items: center; gap: 4px; padding: 20px; }
.empty-main img { width: 86px; border-radius: 22px; opacity: .9; }
.empty-main h2 { font-family: var(--display); margin: 8px 0 0; }
.center { text-align: center; color: var(--muted); }
.chat-head { background: var(--brand); color: #fff; display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 60px; }
.chat-head .back { display: none; color: #fff; }
.ch-t { flex: 1; min-width: 0; display: grid; }
.ch-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-t small { color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.ch-t small.typing { color: var(--accent); font-weight: 700; }
.chat { flex: 1; overflow-y: auto; padding: 14px clamp(10px, 4vw, 64px) 18px; display: flex; flex-direction: column; gap: 4px; scroll-padding-bottom: 20px; }
.foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--panel-2); border-top: 1px solid var(--line); min-height: 58px; }
.composer { display: flex; gap: 8px; align-items: center; }
.fake-input { flex: 1; background: var(--panel); border-radius: 999px; padding: 10px 16px; color: var(--muted); font-size: 14px; }
.composer.real textarea { border-radius: 22px; padding: 10px 14px; min-height: 44px; max-height: 140px; }
.send { background: var(--brand-2); color: #fff; width: 44px; height: 44px; }
.send:hover { background: var(--brand); }
.sys-chip, .date-chip { align-self: center; background: var(--sys); color: var(--ink-2); font-size: 12px; border-radius: 8px; padding: 5px 10px; margin: 6px 0; text-align: center; max-width: 90%; box-shadow: var(--shadow); }
.date-chip { background: var(--panel); font-weight: 700; }
.date-chip.section { background: var(--brand-3); color: var(--brand-2); margin-top: 14px; }

.msg { position: relative; max-width: min(78%, 620px); padding: 7px 10px 6px; border-radius: 10px; box-shadow: var(--shadow); word-wrap: break-word; animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }
.msg.in { align-self: flex-start; background: var(--in); border-top-left-radius: 10px; }
.msg.in.first { border-top-left-radius: 0; margin-top: 6px; }
.msg.in.first::before { content: ''; position: absolute; left: -8px; top: 0; border: 8px solid transparent; border-top-color: var(--in); border-right-color: var(--in); border-width: 0 8px 10px 0; border-color: transparent var(--in) transparent transparent; }
.msg.out { align-self: flex-end; background: var(--out); border-top-right-radius: 0; margin-top: 6px; }
.msg.out::after { content: ''; position: absolute; right: -8px; top: 0; border-style: solid; border-width: 0 0 10px 8px; border-color: transparent transparent transparent var(--out); }
.msg.sys { align-self: center; background: var(--sys); max-width: min(92%, 720px); }
.msg.wide { max-width: min(92%, 720px); width: 100%; }
.msg .txt { white-space: normal; }
.who { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: var(--who, var(--brand-2)); margin-bottom: 3px; }
.who small { color: var(--muted); font-weight: 600; }
.who-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.meta { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-top: 3px; flex-wrap: wrap; }
.ticks { color: #3BA3B3; font-weight: 800; letter-spacing: -3px; margin-right: 2px; }
.vn { background: var(--brand-3); color: var(--brand-2); border: 0; border-radius: 999px; font-size: 10px; padding: 2px 8px; cursor: pointer; }
.vn.playing { background: var(--accent); color: #2b1c00; }
.ref-tag { background: none; border: 0; color: var(--ink-2); border-radius: 999px; font-size: 11px; padding: 1px 8px; cursor: pointer; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foryou { font-size: 11.5px; font-weight: 700; color: #9a5b00; margin-top: 4px; }
.bubble-head { margin-bottom: 6px; }
.tag-q { display: inline-block; background: var(--accent); color: #2b1c00; font-size: 12px; font-weight: 500; border-radius: 6px; padding: 2px 8px; letter-spacing: 0; }
.typing { display: flex; gap: 4px; padding: 12px 14px; width: 62px; }
.typing span { width: 7px; height: 7px; background: var(--muted); border-radius: 50%; animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.md-h { display: block; margin-top: 4px; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 5px; font-size: .92em; }

/* Cards inside bubbles */
.card-lab { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--brand-2); margin-bottom: 3px; }
.card-title { font-weight: 800; font-size: 1.02rem; margin-bottom: 4px; }
.card-stat { font-family: var(--display); font-size: 2rem; color: var(--brand-2); line-height: 1.1; margin: 2px 0 6px; }
.card { padding-left: 0; }
.card.k-caution { ; } .card.k-caution .card-lab { color: var(--coral); }
.card.k-research { ; } .card.k-research .card-lab { color: #9a5b00; }
.card.k-stat .card-stat { color: var(--coral); }
.casefile { display: grid; gap: 8px; }
.cf-top { background: var(--brand); color: #fff; margin: -7px -10px 2px; padding: 10px 12px; border-radius: 10px 10px 0 0; }
.msg.in.first .cf-top { border-top-left-radius: 0; }
.cf-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; background: var(--accent); color: #2b1c00; padding: 1px 6px; border-radius: 4px; }
.cf-title { font-weight: 800; font-size: 1.05rem; margin-top: 4px; }
.cf-cite { font-size: 12px; opacity: .8; }
.cf-row { display: grid; gap: 1px; } .cf-row b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cf-row.lesson { background: var(--brand-3); padding: 8px 10px; border-radius: 8px; }
.tbl-wrap { overflow-x: auto; }
.tbl { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.tbl th, .tbl td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.tbl th { background: var(--panel-2); font-size: 12px; }
.summary ul { margin: 4px 0 8px; padding-left: 18px; }
.refs ol { padding-left: 18px; font-size: 12.5px; color: var(--ink-2); margin: 4px 0; }
.refs li { margin-bottom: 3px; }

/* Interactive */
.poll-q { font-weight: 700; margin-bottom: 4px; }
.poll-sub { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.opt { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: var(--panel-2); border: 0; border-radius: 10px; padding: 9px 10px; margin: 5px 0; cursor: pointer; }
.opt:hover:not(:disabled) { ; }
.opt:disabled { cursor: default; }
.radio, .check { width: 18px; height: 18px; border: 0; border-radius: 50%; flex: none; margin-top: 2px; }
.check { border-radius: 5px; }
.opt.picked { box-shadow: inset 0 0 0 2px var(--brand-2); background: var(--brand-3); }
.opt.picked .radio, .opt.picked .check { background: var(--brand-2); box-shadow: inset 0 0 0 2px var(--brand-2); box-shadow: inset 0 0 0 3px var(--brand-3); }
.opt.right { box-shadow: inset 0 0 0 2px var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--panel)); }
.opt.wrong { box-shadow: inset 0 0 0 2px var(--no); background: color-mix(in srgb, var(--no) 10%, var(--panel)); }
.fb { display: none; margin-top: 8px; padding: 9px 11px; border-radius: 10px; font-size: 14px; }
.fb.show { display: block; }
.fb.ok { background: color-mix(in srgb, var(--ok) 12%, var(--panel)); }
.fb.no { background: color-mix(in srgb, var(--coral) 12%, var(--panel)); }
.est { display: flex; gap: 12px; align-items: center; margin: 6px 0; }
.est input { flex: 1; accent-color: var(--brand-2); border: 0; padding: 0; }
.est-val { font-family: var(--display); font-size: 1.4rem; color: var(--brand-2); min-width: 110px; text-align: right; }
.myth-item { border-radius: 10px; padding: 8px 10px; margin-top: 6px; background: color-mix(in srgb, var(--ok) 10%, var(--panel)); }
.myth-item.no { background: color-mix(in srgb, var(--coral) 10%, var(--panel)); }
.myth-v { font-weight: 800; font-size: 12px; margin: 2px 0; }
.myth-why { font-size: 13.5px; color: var(--ink-2); }
.myth-ask { margin-top: 8px; padding: 8px 10px; background: var(--sys); border-radius: 10px; }
.ord-ans { padding-left: 22px; margin: 6px 0; }
.ord-li { background: var(--brand-3); border-radius: 8px; padding: 6px 8px; margin: 4px 0; cursor: pointer; }
.ord-li.right { background: color-mix(in srgb, var(--ok) 16%, var(--panel)); } .ord-li.wrong { background: color-mix(in srgb, var(--no) 14%, var(--panel)); }
.ord-src { display: flex; flex-wrap: wrap; gap: 6px; }
.m-row, .sort-row { display: grid; grid-template-columns: 1fr minmax(150px, 46%); gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.m-row.right, .sort-row.right { background: color-mix(in srgb, var(--ok) 8%, transparent); }
.m-row.wrong, .sort-row.wrong { background: color-mix(in srgb, var(--no) 8%, transparent); }
.m-correct { grid-column: 1 / -1; font-size: 12.5px; color: var(--ok); font-weight: 700; }
.m-row select { padding: 7px 8px; font-size: 13.5px; }
.sort-b { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.scen { }
.scen-head { }
.scen-fb.good { background: color-mix(in srgb, var(--ok) 9%, var(--in)); } .scen-fb.bad { background: color-mix(in srgb, var(--coral) 9%, var(--in)); }
.scen-end { background: var(--sys); }
.reflect textarea { margin-top: 6px; }
.flash-card { width: 100%; min-height: 120px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; padding: 16px; cursor: pointer; text-align: left; font-size: 15px; }
.flash-card.flipped { background: var(--panel-2); color: var(--ink); border: 0; }
.fc-front { font-family: var(--display); font-size: 1.3rem; } .fc-hint { opacity: .7; font-size: 12px; margin-top: 10px; }
.calc { display: grid; gap: 10px; margin-top: 6px; }
.calc-inputs { display: grid; gap: 6px; }
.calc-row { grid-template-columns: minmax(110px, 34%) 1fr minmax(70px, auto); align-items: center; font-size: 13px; }
.calc-row input[type=range] { accent-color: var(--brand-2); border: 0; padding: 0; }
.calc-row select { padding: 6px 8px; font-size: 13px; grid-column: 2 / 4; }
.calc-row output { font-weight: 800; text-align: right; color: var(--brand-2); }
.calc-res { background: var(--brand-3); border-radius: 10px; padding: 10px 12px; }
.calc-res small { color: var(--ink-2); }
.calc-note { font-size: 11.5px; color: var(--muted); }
.done-card, .result { }
.result.pass { background: color-mix(in srgb, var(--ok) 9%, var(--in)); } .result.fail { background: color-mix(in srgb, var(--coral) 9%, var(--in)); }

.quiz .qz { padding: 8px 0; border-bottom: 1px dashed var(--line); }

/* Mentor side-chat */
.mentor-sheet { position: fixed; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 32px)); background: var(--wall) var(--doodle); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; z-index: 50; }
.mentor-sheet header { background: var(--brand); color: #fff; display: flex; gap: 10px; align-items: center; padding: 10px 12px; }
.mentor-sheet header img { width: 38px; height: 38px; border-radius: 50%; }
.mentor-sheet header div { flex: 1; display: grid; } .mentor-sheet header small { opacity: .8; }
.mentor-sheet header .btn.ghost { color: #fff; }
.m-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.m-in { display: flex; gap: 8px; padding: 10px; background: var(--panel-2); align-items: center; }
.m-in textarea { border-radius: 20px; }

/* Consultancy */
.steps { display: flex; gap: 4px; overflow-x: auto; padding: 8px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.steps span { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.steps span.done { background: var(--brand-3); color: var(--brand-2); }
.steps span.on { background: var(--accent); color: #2b1c00; }

.cite { text-decoration: none; color: var(--brand-2); font-size: .82em; font-weight: 700; cursor: help; }
.form-chat .intake { background: var(--panel); border-radius: 14px; padding: 16px; display: grid; gap: 10px; box-shadow: var(--shadow); max-width: 760px; width: 100%; align-self: flex-start; }
.qa-card label { margin-top: 8px; } .qa-card small { color: var(--muted); font-weight: 500; }
.who-pick { display: flex; gap: 4px; }
.wp { border: 0; background: none; border-radius: 50%; padding: 0; cursor: pointer; opacity: .55; }
.wp img { width: 34px; height: 34px; border-radius: 50%; display: block; }
.wp.on { box-shadow: inset 0 0 0 2px var(--brand-2); opacity: 1; }
.report-card { }
.err { color: var(--no); font-weight: 600; font-size: 13.5px; }

/* Report overlay */
.report-wrap { position: fixed; inset: 0; background: var(--bg); overflow-y: auto; z-index: 60; padding: 0 0 40px; }
.rep-bar { position: sticky; top: 0; display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--brand); z-index: 2; }
.rep-bar .btn.ghost { color: #fff; }
.rep-bar .btn.primary { background: var(--accent); color: #2b1c00; }
.report { max-width: 980px; margin: 18px auto; background: #fff; color: #18242A; border-radius: 16px; padding: clamp(18px, 4vw, 44px); box-shadow: 0 8px 30px rgba(0,0,0,.1); }
.rep-top { display: flex; align-items: center; gap: 12px; border-bottom: 3px solid #123F63; padding-bottom: 12px; }
.rep-top > img { width: 48px; } .rep-top div { flex: 1; display: grid; } .rep-top small { color: #7A868B; }
.report h1 { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); margin: 16px 0 8px; }
.report h2 { font-size: 1.05rem; letter-spacing: 0; color: #123F63; border-bottom: 1px solid #E2DDD3; padding-bottom: 4px; margin: 22px 0 10px; }
.rep-panel { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-panel span, .rep-panel button { display: flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 3px 10px 3px 3px; font-weight: 700; font-size: 13px; }
.rep-panel img { width: 26px; height: 26px; border-radius: 50%; } .rep-panel small { color: #7A868B; font-weight: 500; }
.rc { display: grid; gap: 10px; }
.rc-i { border: 0; border-radius: 10px; padding: 10px 12px; background: #FBFAF7; }
.rc-i.high .conf { color: #C2412D; } .rc-i.medium .conf { color: #B36B00; }
.rc-h { display: flex; justify-content: space-between; gap: 10px; } .conf { font-size: 12px; font-weight: 500; color: #7A868B; }
.rc-i p { margin: 4px 0; }
.callout { background: #E4F1FA; border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
.callout.warn { background: #FDEBE5; } .callout.ok { background: #E5F4EC; }
.rep-tbl td ul { margin: 0; padding-left: 16px; }
.rep-tbl { font-size: 12.5px; }
.report .muted, .muted { color: #7A868B; font-size: .92em; }
.rep-refs { font-size: 13px; }
.disclaimer { font-size: 12px; color: #7A868B; border-top: 1px solid #E2DDD3; padding-top: 10px; margin-top: 24px; }

/* Certificate */
.cert-wrap { flex: 1; overflow: auto; padding: 18px; }
.cert { background: #FFFDF8; color: #18242A; max-width: 980px; margin: 0 auto; aspect-ratio: 1.414; border: 10px solid #123F63; outline: 2px solid #F2A541; outline-offset: -18px; padding: clamp(18px, 4vw, 44px); display: flex; flex-direction: column; text-align: center; gap: 6px; position: relative; }
.cert-top { display: flex; align-items: center; gap: 10px; text-align: left; }
.cert-top > img { width: 56px; }
.cert-top div { display: grid; } .cert-top b { font-family: var(--display); font-size: 1.3rem; } .cert-top small { color: #7A868B; }
.cert-kicker { margin-top: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1F78B8; font-size: 13px; }
.cert-this { margin: 6px 0 0; color: #4B5A61; }
.cert h1 { font-family: var(--display); font-size: clamp(1.8rem, 4.5vw, 3rem); margin: 0; color: #123F63; }
.cert-text { max-width: 720px; margin: 4px auto; color: #4B5A61; font-size: 14px; }
.cert h2 { font-family: var(--display); color: #B36B00; margin: 0; font-size: clamp(1.2rem, 3vw, 1.7rem); }
.cert-mods { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: 10.5px; color: #7A868B; max-width: 820px; margin: 6px auto; }
.cert-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.sigs { display: flex; gap: 26px; }
.sig { display: grid; text-align: left; } .sig i { font-family: var(--display); font-size: 1.15rem; color: #123F63; border-bottom: 1px solid #4B5A61; padding-bottom: 2px; }
.sig small { color: #7A868B; }
.cert-meta { display: flex; gap: 10px; align-items: center; text-align: left; font-size: 12px; }
.cert-meta div { display: grid; } .cert-meta small { color: #7A868B; }
.cert-org { font-size: 11px; color: #7A868B; }

/* Modal, toast */
.modal-wrap { position: fixed; inset: 0; background: rgba(10,20,24,.5); display: grid; place-items: center; z-index: 80; padding: 16px; }
.modal { background: var(--panel); border-radius: 18px; padding: 18px; width: min(560px, 100%); max-height: 86dvh; overflow: auto; display: grid; gap: 10px; }
.modal h3 { margin: 0; font-family: var(--display); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #18242A; color: #fff; padding: 10px 16px; border-radius: 12px; opacity: 0; transition: .25s; z-index: 90; max-width: calc(100vw - 32px); font-size: 14px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--no); }

/* Verify page */
.verify { max-width: 620px; margin: 30px auto; }
.verify h1 { font-family: var(--display); margin: 0; }
.row-form { display: flex; gap: 8px; }

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
  .shell-wrap { grid-template-columns: 1fr; }
  .shell-wrap .main { display: none; }
  .shell-wrap.show-main .side { display: none; }
  .shell-wrap.show-main .main { display: flex; height: 100dvh; }
  .chat-head .back { display: inline-grid; }
  .msg { max-width: 88%; }
  .msg.wide { max-width: 100%; }
  .windows, .team { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr 1fr; }
  .two, .three, .seg { grid-template-columns: 1fr; }
  .calc-row { grid-template-columns: 1fr auto; } .calc-row input[type=range] { grid-column: 1 / -1; grid-row: 2; } .calc-row select { grid-column: 1 / -1; }
  .m-row, .sort-row { grid-template-columns: 1fr; }
  .sort-b { justify-content: flex-start; }
  .cert { aspect-ratio: auto; }
  .cert-foot { flex-direction: column; align-items: center; }
  .sigs { flex-direction: column; gap: 10px; }
  .mentor-sheet { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
}

/* ---------- Print: certificate and report only ---------- */
@media print {
  @page { size: A4; margin: 12mm; }
  @page cert { size: A4 landscape; margin: 8mm; }
  body { background: #fff; }
  .side, .chat-head, .foot, .steps, .rep-bar, .toast, .mentor-sheet { display: none !important; }
  .shell-wrap { display: block; height: auto; box-shadow: none; }
  .main { background: #fff; display: block !important; }
  .cert-wrap { padding: 0; }
  .cert { border-width: 8px; aspect-ratio: auto; min-height: 170mm; break-inside: avoid; page: cert; }
  .report-wrap { position: static; padding: 0; background: #fff; }
  body:has(.report-wrap) #app { display: none; }
  .report { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  .report section { break-inside: avoid-page; }
}

/* Legal pages */
.doc { max-width: 760px; margin: 0 auto; padding: 28px 16px 60px; }
.doc h1 { font-family: var(--display); margin: 18px 0 4px; }
.doc h2 { font-size: 1.1rem; margin: 24px 0 6px; color: var(--brand-2); }
.doc p, .doc li { line-height: 1.65; }

/* ---------- IEQ Compass field lab ---------- */
.compass-head small { display: block; }
.compass-av { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #2b1c00; display: grid; place-items: center; flex: none; }
.lab-badge { min-width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: #fff; background: var(--line); }
.av.lab { color: #fff; font-weight: 800; font-size: 1.4rem; border-radius: 12px; }
.step-b { border: 0; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.step-b.on { background: var(--accent); color: #2b1c00; }
.compass-body { gap: 10px; }
.compass-body > * { max-width: 900px; width: 100%; align-self: center; }
.compass-body .msg.intro { align-self: center; }
.cp-card { background: var(--panel); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); display: grid; gap: 10px; }
.cp-card h3 { margin: 0; font-size: 1rem; }
.proto { }
.proto summary { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-wrap: wrap; color: var(--who); }
.proto summary b { color: var(--ink); }
.proto summary small { color: var(--muted); font-weight: 500; width: 100%; padding-left: 30px; }
.proto-steps { margin: 4px 0; padding-left: 20px; font-size: 14px; color: var(--ink-2); }
.proto-steps li { margin: 4px 0; }
.cp-progress { align-self: center; background: var(--sys); border-radius: 999px; padding: 5px 14px; font-size: 13px; position: sticky; top: 0; z-index: 2; box-shadow: var(--shadow); width: auto !important; }
.prm { gap: 8px; }
.prm .code, .dz-row .code { background: color-mix(in srgb, var(--who) 16%, var(--panel)); color: var(--who); }
.prm-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.prm-h small { color: var(--muted); margin-left: auto; }
.code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 800; background: var(--panel-2); border-radius: 6px; padding: 1px 6px; color: var(--ink-2); }
.look { font-size: 13.5px; color: var(--ink-2); }
.sug { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; background: var(--brand-3); border-radius: 10px; padding: 6px 10px; color: var(--ink); }
.sug .ic { width: 18px; height: 18px; color: var(--brand-2); }
.sc-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sc-b { width: 46px; height: 40px; border-radius: 10px; border: 0; background: var(--panel-2); font-weight: 800; cursor: pointer; }
.sc-b.on { background: var(--who); box-shadow: inset 0 0 0 2px var(--who); color: #fff; }
.rubric { margin-left: auto; font-size: 13px; }
.rubric summary { cursor: pointer; color: var(--brand-2); font-weight: 700; }
.rubric table { margin-top: 6px; }
.cp-meaning { font-size: 13.5px; background: var(--panel-2); border-radius: 10px; padding: 8px 10px; }
.cp-result { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; align-items: start; }
.cp-result .cp-card:last-child { place-items: center; color: var(--ink); }
.big-label { grid-template-columns: auto 1fr; align-items: center; }
.big-label .epc { grid-column: 1 / -1; }
.big-l { width: 84px; height: 84px; border-radius: 18px; color: #fff; font-family: var(--display); font-size: 3rem; display: grid; place-items: center; font-weight: 700; }
.big-label small { display: block; color: var(--muted); }
.warn-t { color: var(--coral); font-size: 13px; margin: 4px 0 0; }
.epc { display: grid; gap: 3px; }
.epc-row { display: flex; align-items: center; gap: 8px; }
.epc-bar { width: var(--w); background: color-mix(in srgb, var(--c) 40%, #fff); color: #18242A; font-weight: 800; padding: 2px 10px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); display: flex; justify-content: space-between; font-size: 13px; }
.epc-bar small { font-weight: 600; opacity: .9; padding-right: 10px; }
.epc-row.on .epc-bar { background: var(--c); color: #fff; padding-top: 5px; padding-bottom: 5px; }
.epc-arrow { font-weight: 800; font-size: 13px; }
.mini-l { display: inline-grid; place-items: center; width: 26px; height: 22px; border-radius: 6px; color: #fff; font-weight: 800; }
.dz-row { display: grid; grid-template-columns: auto 1fr auto auto 2fr; gap: 8px; align-items: center; background: var(--panel); border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow); }
.dz-t small { color: var(--muted); }
.dz-row select { width: auto; padding: 6px 8px; }
.dz-row input:not([type=checkbox]) { padding: 7px 10px; }
.lock { display: flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 800; }
.lock input { width: 16px; height: 16px; }
.label-change { margin-top: 8px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.tbl tr.tot td { font-weight: 800; }
.cp-next { margin: 4px 0 20px; }
@media (max-width: 820px) {
  .cp-result { grid-template-columns: 1fr; }
  .dz-row { grid-template-columns: auto 1fr auto; }
  .dz-row select, .dz-row input:not([type=checkbox]) { grid-column: 1 / -1; }
  .rubric { margin-left: 0; width: 100%; }
}
@media print { .report .epc-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .big-l, .mini-l { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ---------- Expert profile sheet ---------- */
.xp-wrap { position: fixed; inset: 0; background: rgba(10,20,24,.55); z-index: 85; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.xp { position: relative; background: var(--panel); border-radius: 22px; width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px 22px 22px; display: grid; gap: 12px; }
.xp-close { position: absolute; right: 10px; top: 10px; font-size: 18px; color: var(--ink-2); }
.xp-head { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center; }
.xp-head img { width: 104px; height: 104px; border-radius: 50%; border: 0; object-fit: cover; object-position: top; background: color-mix(in srgb, var(--who) 12%, var(--panel)); }
.xp-head h2 { font-family: var(--display); margin: 0; font-size: 1.6rem; color: var(--who); }
.xp-role { font-weight: 800; }
.xp-tag { color: var(--ink-2); font-size: 14px; }
.xp-note { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: 2px 10px; }
.xp-bio { margin: 0; font-size: 15px; }
.xp-q { margin: 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--who) 10%, var(--panel)); font-family: var(--display); font-size: 1.05rem; }
.xp h3 { margin: 6px 0 4px; font-size: 12px; letter-spacing: 0; color: var(--who); }
.xp ul { margin: 0; padding-left: 18px; font-size: 14px; } .xp li { margin: 3px 0; }
.xp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-chips span { background: var(--panel-2); border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 700; }
.xp-papers { font-size: 13px; }
.ps { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.who-click { cursor: pointer; }
@media (max-width: 600px) { .xp-head { grid-template-columns: 90px 1fr; } .xp-head img { width: 90px; height: 90px; } }
button.who-click { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
button.who-click:hover span { text-decoration: underline; }
.xp .code { font-weight: 800; color: var(--who); font-size: 12px; }
.xp .btn.block { margin-top: 4px; }

/* ---------- Paywall ---------- */
.pw-page { padding: 18px; overflow-y: auto; height: 100%; display: grid; place-items: start center; }
.paywall { background: var(--panel); border-radius: 20px; padding: 20px 22px; width: min(520px, 100%); display: grid; gap: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.pw-class { background: linear-gradient(180deg, var(--room-class) 0, var(--panel) 140px); }
.pw-audit { background: linear-gradient(180deg, var(--room-audit) 0, var(--panel) 140px); }
.pw-cabin { background: linear-gradient(180deg, var(--room-cabin) 0, var(--panel) 140px); }
.pw-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.pw-head h3 { margin: 0; font-family: var(--display); font-size: 1.35rem; }
.pw-head p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.pw-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-2); color: #fff; }
.pw-ic svg { width: 26px; height: 26px; }
.pw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.pw-list svg { width: 16px; height: 16px; color: var(--ok); vertical-align: -3px; }
.pw-amt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pw-amt b { font-size: 2rem; font-family: var(--display); }
.pw-amt s { color: var(--muted); font-size: 1.1rem; }
.pw-amt small { color: var(--ink-2); flex-basis: 100%; }
.pw-promo { color: var(--ok); font-weight: 800; font-size: 14px; }
.pw-promo svg { width: 15px; height: 15px; vertical-align: -2px; }
.pw-code { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.pw-code input { letter-spacing: 0; }
.pw-msg { font-size: 14px; min-height: 1em; } .pw-msg.bad { color: var(--no); } .pw-msg.ok { color: var(--ok); }
.pw-fine { color: var(--muted); font-size: 12px; }
.unlock-banner { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 8px 10px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--room-class); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.unlock-banner b { display: block; } .unlock-banner small { color: var(--ink-2); }
.unlock-banner svg { width: 22px; height: 22px; color: var(--brand-2); }
.pass-line { display: flex; gap: 8px; align-items: center; margin: 6px 12px; padding: 8px 12px; border-radius: 12px; background: var(--room-cabin); font-size: 13px; font-weight: 700; }
.pass-line.none { color: var(--ink-2); font-weight: 600; }
.pass-line svg { width: 18px; height: 18px; }
.feed-btn { margin: 6px 12px; width: auto; }
.access-kv { margin-top: 4px; }
.rep-panel button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.cite.vv { text-decoration-color: var(--accent); }

/* ---------- Research library ---------- */
.rs-filter { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px; }
.rs-filter .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; font-size: 13px; text-decoration: none; }
.rs-filter .chip:first-child { padding-left: 12px; }
.rs-filter img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.av.code-av { display: grid; place-items: center; font-weight: 800; font-size: 12px; background: var(--brand-3); color: var(--brand-2); }
.rs-who { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.rs-who img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.rs-who span { margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.rs-x { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 8px; border-radius: 14px; border: 0; background: var(--panel); font: inherit; color: inherit; cursor: pointer; }
.rs-x img { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.rs-x small { color: var(--ink-2); font-size: 12px; }
.rs-x.on { box-shadow: inset 0 0 0 2px var(--who); background: color-mix(in srgb, var(--who) 10%, var(--panel)); }
.rs-drop { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; border: 0; border-radius: 14px; background: var(--panel-2); }
.rs-drop svg { width: 22px; height: 22px; color: var(--brand-2); }
.rs-intro h3 { margin-top: 0; display: flex; gap: 8px; align-items: center; }
.rs-intro svg { width: 20px; height: 20px; }
.rs-detail { display: grid; gap: 10px; }
.muted.pad { padding: 10px 14px; }
.priv-toggle { margin-top: 10px; }
.pw-page { gap: 10px; align-content: start; }
.pw-back { justify-self: start; }
@media (min-width: 821px) { .pw-back { display: none; } }
@media (max-width: 820px) { .windows.three { grid-template-columns: 1fr; } }

/* =================== v1.4 public site =================== */
body.no-scroll { overflow: hidden; }
.gate.wide { max-width: 1120px; }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 10px max(16px, calc((100vw - 1120px) / 2)); background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.tb-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.tb-brand img { width: 34px; height: 34px; }
.tb-brand b { font-family: var(--display); font-size: 1.3rem; }
.tb-nav { display: flex; gap: 2px; flex: 1; justify-content: center; flex-wrap: wrap; }
.tb-nav button { background: none; border: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-2); padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.tb-nav button:hover { background: var(--brand-3); color: var(--brand-2); }
.tb-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tb-right svg, .btn svg { width: 16px; height: 16px; vertical-align: -3px; }
.btn.lg { padding: 14px 22px; font-size: 1.02rem; }
.brand-link { text-decoration: none; color: inherit; }

.hero2 { text-align: center; padding: 34px 0 10px; }
.hero-kicker { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--brand-2); background: var(--brand-3); padding: 5px 12px; border-radius: 999px; }
.hero2 h1 { font-family: var(--display); font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.06; margin: 14px auto 12px; max-width: 980px; letter-spacing: -.01em; }
.hero2 h1 span { color: var(--brand-2); font-style: italic; }
.hero-lead { font-size: 1.12rem; color: var(--ink-2); max-width: 760px; margin: 0 auto; }
.kw { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 20px 0; }
.kw span { display: inline-flex; gap: 6px; align-items: center; background: var(--panel); border: 0; padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: 14px; }
.kw svg { width: 18px; height: 18px; color: var(--brand-2); }
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 6px 0 4px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 26px 0 6px; text-align: left; }
.stat { background: var(--brand); color: #fff; border-radius: 18px; padding: 16px; }
.stat b { font-family: var(--display); font-size: 2rem; display: block; color: #FFD58A; }
.stat p { margin: 6px 0; font-size: 14px; color: #E7F2F3; }
.stat small, .stat small a, .stat abbr { color: #A9CBD0; font-size: 12px; text-decoration: none; }

.band { margin: 34px 0; }
.band > h2 { font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin: 0 0 6px; }
.band-lead { color: var(--ink-2); margin: 0 0 16px; max-width: 760px; }
.small { font-size: 12.5px; }
.stake-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stake { background: var(--panel); border-radius: 18px; padding: 16px; }
.stake-h { display: flex; gap: 8px; align-items: center; font-size: 1.05rem; }
.stake-h svg { width: 22px; height: 22px; color: var(--coral); }
.stake p { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.stake .lose { color: var(--ink); font-weight: 700; }
.stake .lose span { color: var(--coral); font-size: 12px; letter-spacing: 0; }
.myth-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mythc { background: var(--panel); border-radius: 16px; padding: 14px 16px; }
.mythc summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.mythc summary::-webkit-details-marker { display: none; }
.m-tag, .f-tag { font-size: 11px; font-weight: 900; letter-spacing: .08em; padding: 3px 8px; border-radius: 6px; color: #fff; background: var(--coral); }
.f-tag { background: var(--ok); }
.m-open { font-size: 13px; color: var(--brand-2); font-weight: 800; white-space: nowrap; }
.mythc[open] .m-open { visibility: hidden; }
.mythc p { margin: 10px 0 6px; }
.mythc small { color: var(--muted); font-size: 12px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.newsc { background: var(--panel); border-radius: 16px; padding: 14px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.newsc:hover { box-shadow: 0 4px 16px rgba(18,63,99,.12); }
.newsc small { color: var(--muted); font-weight: 700; font-size: 12px; }
.newsc p { margin: 0; color: var(--ink-2); font-size: 14px; flex: 1; }
.newsc span { color: var(--brand-2); font-weight: 800; font-size: 13px; }
.check-banner { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin: 30px 0; padding: 18px 20px; border-radius: 20px; background: linear-gradient(90deg, #FCEBD0, #FFF4E2); color: var(--ink); text-decoration: none; }
.check-banner > svg { width: 40px; height: 40px; color: #B36B00; }
.check-banner b { display: block; font-family: var(--display); font-size: 1.25rem; }
.check-banner div span { color: var(--ink-2); font-size: 14px; }

.cv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cv { background: var(--panel); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.cv-head { display: flex; gap: 10px; align-items: center; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cv-head img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 0; flex: none; }
.cv-head b { display: block; font-size: 1.02rem; color: var(--who); }
.cv-head span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cv dl { margin: 4px 0 0; font-size: 13px; }
.cv dt { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: 8px; }
.cv dd { margin: 2px 0 0; color: var(--ink); }
.cv-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cv-chips span { background: color-mix(in srgb, var(--who) 12%, var(--panel)); border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.link-btn { margin-top: auto; padding-top: 8px; background: none; border: 0; font: inherit; color: var(--brand-2); font-weight: 800; font-size: 13px; text-align: left; cursor: pointer; }

.how-steps { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.how-steps li { background: var(--panel); border-radius: 16px; padding: 14px; display: grid; gap: 6px; align-content: start; }
.how-steps .n { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #2b1c00; font-weight: 900; display: grid; place-items: center; }
.how-steps p { margin: 0; font-size: 13px; color: var(--ink-2); }
.how-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.how-facts > div { background: var(--brand-3); border-radius: 16px; padding: 14px; }
.how-facts p { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pricec { background: var(--panel); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.pricec.class { background: linear-gradient(180deg, var(--room-class), var(--panel) 120px); }
.pricec.audit { background: linear-gradient(180deg, var(--room-audit), var(--panel) 120px); }
.pricec.cabin { background: linear-gradient(180deg, var(--room-cabin), var(--panel) 120px); }
.pricec h3 { margin: 0; font-family: var(--display); font-size: 1.3rem; }
.pc-price b { font-family: var(--display); font-size: 2.2rem; }
.pc-price small { display: block; color: var(--ink-2); }
.pc-offer { background: #FCEBD0; color: #6b4300; border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.pricec ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; font-size: 14px; flex: 1; }
.pricec li svg { width: 15px; height: 15px; color: var(--ok); vertical-align: -2px; }

.realestate { background: var(--brand); color: #fff; border-radius: 26px; padding: 26px; }
.realestate h2, .realestate h3 { color: #fff; }
.realestate .band-lead { color: #CFE3E6; }
.re-head { display: flex; gap: 14px; align-items: center; }
.re-head > svg { width: 46px; height: 46px; color: #FFD58A; flex: none; }
.re-head h2 { font-family: var(--display); margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.re-cols { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin: 14px 0; }
.re-needs li { margin: 6px 0; color: #E7F2F3; }
.re-offer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.re-offer > div { background: rgba(255,255,255,.08); border-radius: 14px; padding: 12px; }
.re-offer b { color: #FFD58A; }
.re-offer p { margin: 4px 0 0; font-size: 13.5px; color: #E7F2F3; }
.realestate .btn.ghost { color: #fff; }

/* Auth as a sheet */
.auth-sheet { position: fixed; inset: 0; z-index: 80; background: rgba(10,20,24,.55); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.auth-sheet[hidden] { display: none; }
.auth-card { position: relative; background: var(--panel); border-radius: 22px; width: min(460px, 100%); padding: 8px 6px 6px; }
.auth-card .auth { margin: 0; }
.auth-x { position: absolute; right: 8px; top: 8px; z-index: 2; }

/* Healthy Home Check */
.hc { max-width: 820px; margin: 0 auto; }
.hc-intro h1 { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 22px 0 6px; }
.hc-intro p { color: var(--ink-2); }
.hc-prog { position: sticky; top: 58px; z-index: 5; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 12px 0; }
.hc-prog span { display: block; height: 100%; width: 0; background: var(--brand-2); transition: width .2s; }
.hc-list { display: grid; gap: 10px; }
.hc-q { background: var(--panel); border-radius: 16px; padding: 14px 16px; }
.hc-h { display: flex; gap: 6px; align-items: center; color: var(--who); font-weight: 800; }
.hc-h svg { width: 16px; height: 16px; }
.hc-n { width: 22px; height: 22px; border-radius: 50%; background: var(--who); color: #fff; display: grid; place-items: center; font-size: 12px; }
.hc-q > b { display: block; margin: 6px 0 8px; font-size: 1.02rem; }
.hc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hc-opt { text-align: left; background: var(--panel-2); border: 0; border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.hc-opt.on { box-shadow: inset 0 0 0 2px var(--who); background: color-mix(in srgb, var(--who) 12%, var(--panel)); font-weight: 700; }
.hc-go { text-align: center; margin: 16px 0; }
.hc-result:empty { display: none; }
.hc-result { background: var(--panel); border-radius: 20px; padding: 18px; display: grid; gap: 14px; margin-bottom: 20px; scroll-margin-top: 70px; }
.hc-score { display: flex; gap: 16px; align-items: center; }
.hc-score b { font-family: var(--display); font-size: 2.2rem; }
.hc-score p { margin: 4px 0 0; color: var(--ink-2); }
.hc-bars { display: grid; gap: 6px; }
.hc-bar { display: grid; grid-template-columns: 170px 1fr 36px; gap: 8px; align-items: center; font-size: 14px; }
.hc-bar span { display: flex; gap: 6px; align-items: center; } .hc-bar svg { width: 16px; height: 16px; }
.hc-bar .track { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.hc-bar i { display: block; height: 100%; border-radius: 999px; }
.hc-fixes h3 { margin: 0 0 6px; }
.hc-fixes li { margin: 6px 0; }
.hc-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hc-next > div { background: var(--panel-2); border-radius: 14px; padding: 12px; display: grid; gap: 6px; align-content: start; }
.hc-next p { margin: 0; font-size: 13px; color: var(--ink-2); }

/* Report: diagnostic work-up */
.workup h3 { font-size: 1rem; margin: 14px 0 6px; }
.isnot th:first-child { width: 80px; }
.dom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dom { background: var(--panel-2); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; }
.dom span { font-size: 12px; font-weight: 500; }
.dom.implicated span { color: var(--no); } .dom.possible span { color: #B36B00; } .dom.ruled-out span { color: var(--muted); }
.dom small { color: var(--ink-2); }
.fishbone { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; }
.bone { border-top: 0; background: var(--panel-2); border-radius: 0 0 10px 10px; padding: 8px 10px; font-size: 13px; }
.bone ul { margin: 4px 0 0; padding-left: 16px; }
.hstat { font-weight: 500; font-size: 12px; }
.hstat.supported { color: var(--no); } .hstat.open { color: #B36B00; } .hstat.ruled-out { color: var(--muted); text-decoration: line-through; }
.whys li { margin: 3px 0; } .whys li:last-child { font-weight: 800; }
.role-pill { display: inline-block; margin: 6px 0; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); }
.role-pill.admin { background: #FCEBD0; color: #6b4300; }

@media (max-width: 980px) {
  .stats, .how-facts { grid-template-columns: 1fr 1fr; }
  .stake-grid, .news-grid, .cv-grid, .price-grid { grid-template-columns: 1fr 1fr; }
  .how-steps { grid-template-columns: 1fr 1fr; }
  .tb-nav { display: none; }
}
@media (max-width: 640px) {
  .stats, .stake-grid, .news-grid, .cv-grid, .price-grid, .myth-grid, .how-steps, .how-facts, .re-cols, .re-offer, .hc-opts, .hc-next, .dom-grid, .fishbone { grid-template-columns: 1fr; }
  .hc-bar { grid-template-columns: 120px 1fr 30px; }
  .check-banner { grid-template-columns: 1fr; text-align: left; }
  .realestate { padding: 18px; border-radius: 18px; }
  .topbar { padding: 8px 12px; }
  .tb-brand b { font-size: 1.1rem; }
}
@media print { .workup .bone, .workup .dom { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

.xp-how { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.xp-how p { margin: 4px 0; }

/* =================== v1.4.1 home page strips =================== */
.art { width: 100%; height: 100%; color: var(--brand); }
.art .f1 { fill: #F2A541; } .art .f2 { fill: color-mix(in srgb, var(--brand-2) 14%, transparent); } .art .f3 { fill: #E4572E; }
.art .f3-line { stroke: #E4572E; } .art .f1-line { stroke: #F2A541; } .art .cross { stroke: #E4572E; }
.art .smoke, .art .wave { stroke: #8A9BA0; stroke-dasharray: 4 5; animation: drift 3s linear infinite; }
@keyframes drift { to { stroke-dashoffset: -18; } }

/* carousel */
.carousel { position: relative; }
.car-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 3); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 6px; }
.car-track::-webkit-scrollbar { display: none; }
.car-track > * { scroll-snap-align: start; }
.car-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.car-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: var(--line); cursor: pointer; transition: width .25s, background .25s; }
.car-dot.on { width: 22px; border-radius: 999px; background: var(--brand-2); }
.car-nav { position: absolute; top: calc(50% - 26px); z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--panel); box-shadow: 0 2px 10px rgba(0,0,0,.15); font-size: 22px; line-height: 1; color: var(--brand-2); cursor: pointer; }
.car-nav.prev { left: -14px; } .car-nav.next { right: -14px; }

/* stakes */
.stake2 { background: var(--panel); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.st-art { height: 130px; background: linear-gradient(135deg, var(--brand-3), #FFF4E2); padding: 14px 30px; }
.st-body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.st-who { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--coral); }
.st-lose { font-family: var(--display); font-size: 1.2rem; line-height: 1.25; }
.st-body p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* news ticker + cards */
.ticker { display: flex; align-items: stretch; background: #0B2F38; color: #fff; border-radius: 12px; overflow: hidden; margin: 6px 0 14px; }
.tk-label { flex: none; display: flex; align-items: center; gap: 8px; background: #C2412D; padding: 10px 14px; font-weight: 900; letter-spacing: .08em; font-size: 13px; }
.tk-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.tk-viewport { overflow: hidden; flex: 1; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tk-run { display: flex; gap: 46px; white-space: nowrap; animation: tick 48s linear infinite; padding-left: 20px; }
.ticker:hover .tk-run { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.tk-item { font-size: 14px; } .tk-item b { color: #FFD58A; } .tk-item i { color: #A9CBD0; font-style: normal; }
.news2c { background: var(--panel); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.nc-art { position: relative; height: 120px; background: linear-gradient(135deg, #123F63, #1F78B8); padding: 12px 40px; }
.nc-art .art { color: #E7F2F3; } .nc-art .art .f2 { fill: rgba(255,255,255,.12); }
.nc-date { position: absolute; left: 10px; top: 10px; background: #C2412D; color: #fff; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.nc-body { padding: 12px 14px 14px; display: grid; gap: 6px; flex: 1; }
.nc-body small { color: var(--muted); font-weight: 500; font-size: 12px; letter-spacing: 0; }
.nc-body p { margin: 0; font-size: 14px; color: var(--ink-2); }
.nc-read { color: var(--brand-2); font-weight: 800; font-size: 13px; margin-top: auto; }

/* AI lab: monitor + console */
.ai-lab { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; align-items: start; margin-bottom: 14px; }
.ai-monitor { background: #08222A; border-radius: 18px; padding: 12px; box-shadow: 0 0 0 3px #1D4566, 0 18px 40px rgba(8,34,42,.35); }
.mon-stand { width: 30%; height: 12px; margin: 10px auto -4px; border-radius: 0 0 10px 10px; background: #1D4566; }
.ai-net { position: relative; }
.ai-net .net { display: block; width: 100%; height: auto; }
.ai-net img { position: absolute; width: 13%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 0; background: #0B2F38; object-fit: cover; }
.ai-core { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); font: 800 11px ui-monospace, Menlo, monospace; color: #6FF3E8; letter-spacing: .08em; }
.net .link { stroke-dasharray: 6 6; animation: flow 1.6s linear infinite; opacity: .45; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.ai-net[data-step="1"] .link, .ai-net[data-step="3"] .link { opacity: 1; stroke-width: 3.4; }
.ai-net[data-step="2"] .link.l0, .ai-net[data-step="2"] .link.l3 { opacity: 1; }
.console { background: #0A1C22; color: #D6F5F2; border-radius: 16px; overflow: hidden; border: 1px solid #1D4566; }
.con-bar { display: flex; gap: 6px; align-items: center; padding: 9px 12px; background: #11303A; font: 12px ui-monospace, Menlo, monospace; color: #8FB9C0; }
.con-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E4572E; } .con-bar i:nth-child(2) { background: #F2A541; } .con-bar i:nth-child(3) { background: #3CB371; }
.con-bar span { margin-left: 8px; }
.con-list { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 4px; }
.con-step { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 9px 10px; border-radius: 10px; opacity: .55; transition: opacity .4s, background .4s; }
.con-step.on { opacity: 1; background: rgba(111,243,232,.08); box-shadow: inset 3px 0 0 #6FF3E8; }
.con-n { font: 800 13px ui-monospace, Menlo, monospace; color: #6FF3E8; }
.con-step b { color: #fff; } .con-step p { margin: 3px 0 0; font-size: 13.5px; color: #B7D6DA; }
.con-foot { padding: 9px 14px 12px; font: 12px ui-monospace, Menlo, monospace; color: #6FF3E8; border-top: 1px solid #1D4566; }
.caret { display: inline-block; width: 8px; height: 14px; background: #6FF3E8; margin-right: 8px; vertical-align: -2px; animation: blink 1s steps(1) infinite; }

/* billboard */
.billboard-wrap { margin-top: 40px; }
.billboard { position: relative; background: linear-gradient(135deg, #123F63 0%, #12343B 60%, #0B2F38 100%); color: #fff; border-radius: 22px; padding: 26px 28px 24px; border: 6px solid #1F3E58; box-shadow: 0 0 0 2px #0B2F38, 0 22px 50px rgba(8,34,42,.35); overflow: hidden; }
.billboard::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 60px); pointer-events: none; }
.bb-tag { display: inline-block; background: #F2A541; color: #2b1c00; font-weight: 500; font-size: 12px; letter-spacing: 0; padding: 5px 12px; border-radius: 999px; }
.bb-main { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: center; }
.bb-copy h2 { font-family: var(--display); font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1; margin: 14px 0 10px; color: #fff; }
.bb-copy p { font-size: 1.15rem; color: #CFE3E6; margin: 0 0 14px; max-width: 520px; }
.bb-pains { display: flex; gap: 8px; flex-wrap: wrap; }
.bb-pains span { border: 2px solid #FFD58A; color: #FFD58A; border-radius: 8px; padding: 4px 12px; font-weight: 500; font-size: 13px; letter-spacing: 0; }
.bb-art { height: 190px; } .bb-art .art { color: #E7F2F3; } .bb-art .art .f2 { fill: rgba(255,255,255,.12); }
.bb-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 20px 0 18px; }
.bb-tile { background: rgba(255,255,255,.07); border-radius: 14px; padding: 10px 8px 12px; text-align: center; display: grid; gap: 2px; }
.bb-ic { height: 56px; } .bb-ic .art { color: #E7F2F3; } .bb-ic .art .f2 { fill: rgba(255,255,255,.12); }
.bb-tile b { font-size: 14px; color: #FFD58A; } .bb-tile small { color: #CFE3E6; font-size: 12px; }
.bb-cta { background: #F2A541; color: #2b1c00; font-weight: 900; }
.bb-legs { display: flex; justify-content: space-around; padding: 0 22%; } .bb-legs i { width: 14px; height: 26px; background: #1F3E58; border-radius: 0 0 4px 4px; }

@media (max-width: 980px) {
  .car-track { grid-auto-columns: calc((100% - 12px) / 2); }
  .ai-lab { grid-template-columns: 1fr; }
  .bb-tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .car-track { grid-auto-columns: 86%; }
  .car-nav { display: none; }
  .bb-main { grid-template-columns: 1fr; } .bb-art { height: 120px; }
  .bb-tiles { grid-template-columns: repeat(2, 1fr); }
  .billboard { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .tk-run, .net .link, .art .smoke, .art .wave { animation: none; } }

/* research page for members */
.rs-admin pre.rs-sql { white-space: pre-wrap; word-break: break-all; background: var(--panel-2); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; }
.rs-intro, .rs-admin { margin-bottom: 12px; }
.card.rs-intro, .card.rs-admin, .card.rs-detail { background: var(--panel); border-radius: 18px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(18,63,99,.06); }
.rs-admin h3 { margin: 0 0 6px; }
.art-img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ===================== v1.4.5 ===================== */
/* Rooms use the full window; home + sign-out sit together */
.shell-wrap { max-width: none; grid-template-columns: clamp(300px, 26vw, 380px) 1fr; box-shadow: none; }
.bar { justify-content: flex-start; gap: 8px; }
.bar .brand-link { margin-right: auto; min-width: 0; text-decoration: none; color: inherit; }
.bar-acts { display: flex; gap: 2px; background: rgba(255,255,255,.1); border-radius: 999px; padding: 2px; }
.bar-acts .icon-btn { padding: 7px; }
.chat { padding-inline: max(14px, calc((100% - 1120px) / 2)); }
.form-chat .intake, .form-chat .rs-intro { max-width: 900px; }

.room-dash { flex: 1; overflow-y: auto; padding: clamp(18px, 3vw, 40px) max(18px, calc((100% - 1120px) / 2)); display: flex; flex-direction: column; gap: 18px; }
.dash-hero { display: flex; gap: 18px; align-items: center; padding: clamp(18px, 3vw, 30px); border-radius: 24px; background: var(--brand); color: #fff; position: relative; overflow: hidden; }
.room-class .dash-hero { background: linear-gradient(120deg, #8A5A12, #C88A2E); }
.room-audit .dash-hero { background: linear-gradient(120deg, #3E3483, #6A5BC2); }
.room-cabin .dash-hero { background: linear-gradient(120deg, #123F63, #1F8A8A); }
.dash-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.08); }
.dh-ic { flex: none; width: 64px; height: 64px; border-radius: 20px; background: rgba(255,255,255,.16); display: grid; place-items: center; }
.dh-ic .ic { width: 34px; height: 34px; }
.dash-hero small { opacity: .8; font-weight: 500; letter-spacing: 0; font-size: 12px; }
.dash-hero h2 { font-family: var(--display); margin: 2px 0 6px; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.dash-hero p { margin: 0; max-width: 760px; opacity: .92; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dash-kpis > div { background: var(--panel); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); display: grid; }
.dash-kpis b { font-size: 1.6rem; font-family: var(--display); } .dash-kpis small { color: var(--muted); }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.dash-tile { position: relative; display: grid; gap: 4px; align-content: start; background: var(--panel); border-radius: 20px; padding: 18px 40px 18px 18px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); border: 0; transition: transform .15s, box-shadow .15s; }
.dash-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,36,42,.12); }
.dash-tile.hot { background: var(--brand-2); color: #fff; ; }
.dash-tile.hot small { color: rgba(255,255,255,.85); }
.dt-ic { width: 42px; height: 42px; border-radius: 14px; background: var(--brand-3); color: var(--brand-2); display: grid; place-items: center; margin-bottom: 6px; }
.dash-tile.hot .dt-ic { background: rgba(255,255,255,.18); color: #fff; }
.dash-tile b { font-size: 1.05rem; } .dash-tile small { color: var(--muted); }
.dt-go { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 26px; opacity: .5; }
.dash-sec h3 { margin: 6px 0 10px; font-family: var(--display); }
.dash-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dp { display: grid; justify-items: center; gap: 4px; padding: 16px 10px; background: var(--panel); border: 0; border-radius: 20px; cursor: pointer; text-align: center; }
.dp img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 0; }
.dp small { color: var(--muted); font-size: 12.5px; }
.dash-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-chips span { background: var(--panel); border: 0; border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13.5px; }
.dash-ver { color: var(--muted); text-align: center; margin-top: auto; }
.rs-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; max-width: 900px; width: 100%; }
.rs-shelf-i { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 14px 10px; border-radius: 18px; background: var(--panel); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.rs-shelf-i img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 0; }
.rs-shelf-i small { color: var(--muted); font-size: 12px; } .rs-shelf-i span { margin-top: 4px; font-weight: 800; color: var(--brand-2); font-size: 13px; }
@media (max-width: 1100px) { .dash-panel { grid-template-columns: repeat(2, 1fr); } }

/* ---------- In the news: vintage TV ---------- */
.news3 .tv { max-width: 980px; margin: 30px auto 6px; position: relative; }
.tv-ants { position: relative; height: 40px; }
.tv-ants i { position: absolute; bottom: 0; left: 50%; width: 3px; height: 74px; background: linear-gradient(#ccc, #777); border-radius: 2px; transform-origin: bottom center; }
.tv-ants i:first-child { transform: translateX(-22px) rotate(-32deg); } .tv-ants i:nth-child(2) { transform: translateX(18px) rotate(28deg); }
.tv-ants b { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 70px; height: 20px; border-radius: 40px 40px 6px 6px; background: linear-gradient(#3a2416, #1e130b); }
.tv-cab { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 120px; gap: 16px; padding: 22px; border-radius: 34px;
  background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 30%), repeating-linear-gradient(92deg, #6b3d20 0 3px, #7a4626 3px 7px, #5f351b 7px 9px, #73421f 9px 14px);
  box-shadow: inset 0 0 0 3px #3b2112, inset 0 6px 14px rgba(255,255,255,.15), inset 0 -10px 18px rgba(0,0,0,.35), 0 26px 50px rgba(0,0,0,.35); }
.tv-bezel { padding: 16px; border-radius: 26px; background: linear-gradient(145deg, #d8c39a, #a88c5c 45%, #6f5a36); box-shadow: inset 0 2px 3px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.4); }
.tv-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 22px / 26px; overflow: hidden; background: radial-gradient(ellipse at center, #10303a 0, #061a20 70%, #020a0c 100%); color: #EAF6F7;
  box-shadow: inset 0 0 40px rgba(0,0,0,.85), inset 0 0 0 4px #1a1a1a, 0 0 0 3px #2b2418; display: flex; flex-direction: column; }
.tv-bug { position: absolute; z-index: 3; top: 12px; left: 14px; display: flex; align-items: center; gap: 8px; font: 800 13px/1 var(--font); letter-spacing: .06em; }
.tv-live { background: #E0262B; color: #fff; padding: 4px 7px; border-radius: 3px; font-size: 11px; animation: blink 1.4s infinite; }
.tv-bug b { background: rgba(255,255,255,.12); padding: 4px 8px; border-radius: 3px; }
.tv-date { position: absolute; z-index: 3; top: 13px; right: 16px; font: 700 12px/1 ui-monospace, Menlo, monospace; color: #FFD58A; }
.tv-slot { flex: 1; min-height: 0; display: flex; }
.tv-story { flex: 1; display: grid; grid-template-columns: 38% 1fr; gap: 18px; align-items: center; padding: 46px 26px 8px; color: inherit; text-decoration: none; }
.tv-art { height: 100%; max-height: 190px; } .tv-art .art { color: #E7F2F3; } .tv-art .art .f2 { fill: rgba(255,255,255,.12); }
.tv-copy { display: grid; gap: 6px; }
.tv-copy small { color: #8FD3CF; font-weight: 500; letter-spacing: 0; font-size: 12px; }
.tv-copy b { font-family: var(--display); font-size: clamp(1.15rem, 2.2vw, 1.7rem); line-height: 1.15; }
.tv-copy p { margin: 0; color: #C8DDE0; font-size: 14.5px; }
.tv-read { color: #FFD58A; font-weight: 800; font-size: 13px; }
.tv-lower { position: relative; z-index: 3; display: flex; align-items: stretch; margin: 0 16px; font-weight: 800; font-size: 14px; }
.tv-brk { background: #E0262B; color: #fff; padding: 7px 10px; letter-spacing: .08em; font-size: 12px; display: flex; align-items: center; }
.tv-lt { flex: 1; background: rgba(255,255,255,.94); color: #0B2F38; padding: 7px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-crawl { position: relative; z-index: 3; display: flex; align-items: center; background: #0B2F38; margin: 0 16px 14px; font-size: 13px; }
.tv-crawl > b { background: #FFD58A; color: #2b1c00; padding: 5px 8px; font-size: 11px; letter-spacing: .08em; flex: none; }
.tv-crawl .tk-run { padding: 5px 0 5px 16px; }
.tv-lines { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: repeating-linear-gradient(rgba(0,0,0,.22) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; animation: tvroll 8s linear infinite; }
@keyframes tvroll { from { background-position: 0 0; } to { background-position: 0 120px; } }
.tv-glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: radial-gradient(120% 70% at 25% 0%, rgba(255,255,255,.16), transparent 45%), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.55) 100%); }
.tv-static { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tv-screen.zap .tv-static { animation: tvzap .45s steps(6) both; }
.tv-screen.zap .tv-story { animation: tvon .5s ease-out both; }
@keyframes tvzap { 0% { opacity: .95; background-position: 0 0; } 50% { opacity: .7; background-position: 40px 70px; } 100% { opacity: 0; background-position: 90px 20px; } }
@keyframes tvon { 0% { opacity: 0; transform: scaleY(.02); filter: brightness(3); } 60% { opacity: 1; transform: scaleY(1.02); } 100% { transform: none; filter: none; } }
.tv-side { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 6px; border-radius: 18px; background: linear-gradient(#2a1a10, #1a0f08); box-shadow: inset 0 2px 6px rgba(0,0,0,.6); color: #e8d6b0; }
.tv-brand { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 14px; color: #E9C77A; }
.tv-knobs { display: grid; justify-items: center; gap: 10px; }
.tv-knob { display: block; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(from 20deg, #f6e3b4, #a8854a, #f6e3b4, #8a6a35, #f6e3b4); box-shadow: 0 3px 6px rgba(0,0,0,.6), inset 0 0 0 6px rgba(0,0,0,.18); position: relative; }
.tv-knob::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 14px; background: #3b2a14; transform: translateX(-50%); border-radius: 2px; }
.tv-knob.sm { width: 38px; height: 38px; }
.tv-chl { font-size: 12px; letter-spacing: 0; color: #bfa577; }
.tv-chans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.tv-ch, .tv-next { width: 28px; height: 24px; border: 0; border-radius: 5px; background: linear-gradient(#f0e2c0, #c4a774); color: #3b2a14; font: 800 12px/1 var(--font); cursor: pointer; box-shadow: 0 2px 0 #5e4524; }
.tv-ch.on { background: linear-gradient(#ffd58a, #e9a93a); box-shadow: 0 0 0 2px #fff3, 0 0 10px #ffd58a; transform: translateY(1px); }
.tv-next { width: 60px; }
.tv-grille { flex: 1; width: 80%; min-height: 40px; border-radius: 10px; background: repeating-linear-gradient(#0d0805 0 3px, #3a2616 3px 6px); }
.tv-feet { display: flex; justify-content: space-between; padding: 0 12%; }
.tv-feet i { width: 18px; height: 34px; background: linear-gradient(90deg, #3b2112, #6b3d20, #3b2112); clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }

/* ---------- Real estate: a real-life hoarding ---------- */
.band.hoard-scene { position: relative; overflow: hidden; border-radius: 26px; padding: clamp(26px, 4vw, 46px) clamp(14px, 4vw, 54px) 22px; margin-top: 30px; background: linear-gradient(180deg, #0D1B36 0%, #26386A 38%, #6B5C8E 62%, #E48A5C 84%, #F7B267 100%); }
.hs-sky { position: absolute; inset: 0; pointer-events: none; }
.hs-sun { position: absolute; left: 12%; bottom: 17%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #FFE3A3 0, #FFB866 45%, rgba(255,184,102,0) 70%); }
.hs-city { position: absolute; left: 0; right: 0; bottom: 64px; height: 30%; opacity: .92; }
.hs-city svg { width: 100%; height: 100%; display: block; fill: #1A1730; }
.hs-city svg .w { fill: #FFD58A; opacity: .75; }
.hoarding { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }
@media (min-width: 900px) { .hoarding { transform: perspective(1800px) rotateY(-4deg); transform-origin: 30% 50%; } }
.hd-lamps { position: relative; display: flex; justify-content: space-around; padding: 0 12%; height: 36px; }
.hd-lamp { position: relative; width: 4px; height: 36px; background: linear-gradient(90deg, #555, #aaa, #555); }
.hd-lamp::before { content: ''; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%) rotate(180deg); width: 34px; height: 14px; background: linear-gradient(#444, #222); border-radius: 0 0 10px 10px; box-shadow: 0 -4px 12px rgba(255,230,160,.9); }
.hd-frame { position: relative; padding: 12px; border-radius: 6px; background: linear-gradient(180deg, #9aa3a8, #59636a 45%, #3a4247); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.4), 0 30px 50px rgba(5,10,30,.55); }
.hd-vinyl.billboard { border-radius: 2px; border: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 60px rgba(0,0,0,.35);
  background: radial-gradient(70% 90% at 80% 30%, #1d7c7a 0, transparent 60%), linear-gradient(120deg, #0B3A47 0%, #123F63 45%, #12343B 100%); padding: 24px 28px 16px; }
.hd-vinyl.billboard::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.hd-seams { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(0,0,0,.28) calc(25% - 1px) 25%); }
.hd-light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 55% at 22% 0, rgba(255,236,190,.28), transparent 70%), radial-gradient(40% 55% at 50% 0, rgba(255,236,190,.28), transparent 70%), radial-gradient(40% 55% at 78% 0, rgba(255,236,190,.28), transparent 70%), linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%); mix-blend-mode: screen; }
.hd-url { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; border-top: 2px solid rgba(255,213,138,.5); padding-top: 10px; }
.hd-url b { font-size: 1.25rem; color: #fff; letter-spacing: .02em; } .hd-url span { color: #FFD58A; font-weight: 500; font-size: 12px; letter-spacing: 0; }
.hd-catwalk { height: 16px; margin: 0 -10px; background: repeating-linear-gradient(90deg, #2c3338 0 3px, #5a646b 3px 7px); border-top: 3px solid #7b858c; box-shadow: 0 6px 10px rgba(0,0,0,.35); position: relative; }
.hd-catwalk::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; border-top: 2px solid #8a949b; background: repeating-linear-gradient(90deg, #6b757c 0 2px, transparent 2px 46px); opacity: .9; }
.hd-posts { display: flex; justify-content: space-between; padding: 0 20%; height: clamp(70px, 12vw, 130px); }
.hd-posts i { width: 26px; background: linear-gradient(90deg, #2f363b, #8e989f 35%, #4d565c 60%, #262c30); box-shadow: 10px 0 18px rgba(0,0,0,.35); }
.hs-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(#2b2836, #17151f); }
.hs-ground::before { content: ''; position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 60%; height: 18px; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.6), transparent 70%); }
.hs-cta { position: relative; z-index: 2; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.hs-ghost { background: rgba(255,255,255,.12); color: #fff; border: 0; }

@media (max-width: 900px) {
  .tv-cab { grid-template-columns: 1fr; padding: 14px; border-radius: 24px; }
  .tv-side { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 8px; }
  .tv-knobs { display: flex; } .tv-knob { width: 34px; height: 34px; } .tv-knob.sm { width: 26px; height: 26px; }
  .tv-chans { grid-template-columns: repeat(5, 1fr); } .tv-grille { display: none; } .tv-chl { display: none; }
}
@media (max-width: 820px) {
  .room-dash { padding: 16px; }
  .dash-kpis { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .dash-kpis b { font-size: 1.2rem; }
}
@media (max-width: 640px) {
  .tv-bezel { padding: 8px; border-radius: 18px; }
  .tv-screen { aspect-ratio: 4 / 5; }
  .tv-story { grid-template-columns: 1fr; padding: 40px 14px 6px; gap: 6px; align-content: start; }
  .tv-art { max-height: 92px; }
  .tv-copy p { font-size: 13px; }
  .tv-lower, .tv-crawl { margin-inline: 8px; } .tv-crawl { margin-bottom: 10px; }
  .hd-frame { padding: 7px; } .hd-vinyl.billboard { padding: 16px 14px 12px; }
  .hd-posts { padding: 0 16%; } .hd-posts i { width: 16px; }
  .hd-lamps { height: 26px; } .hd-lamp { height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .tv-lines, .kw-run { animation: none; } }
/* keep the long ticker from widening the TV */
.tv-cab > *, .tv-bezel, .tv-screen, .tv-slot, .tv-story, .tv-copy { min-width: 0; }
.tv-crawl, .tv-lower { overflow: hidden; min-width: 0; } .tv-crawl .tk-viewport { min-width: 0; }

/* ===================== v1.4.6 ===================== */
/* Hero: one line with the check button and the six IEQ domains as round icons */
.hero-row { display: flex; align-items: center; gap: 18px; margin: 22px auto 6px; max-width: 1100px; }
.hero-check { flex: none; display: inline-flex; align-items: center; gap: 10px; text-align: left; padding: 12px 20px; }
.hero-check span { display: grid; line-height: 1.2; } .hero-check b { font-size: 1.05rem; } .hero-check small { font-weight: 600; opacity: .85; font-size: 12.5px; }
.kw-strip { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.kw-run { display: flex; gap: 18px; width: max-content; animation: kwrun 26s linear infinite; padding: 4px 0; }
.kw-strip:hover .kw-run { animation-play-state: paused; }
@keyframes kwrun { to { transform: translateX(calc(-50% - 9px)); } }
.kwc { display: grid; justify-items: center; gap: 6px; width: 92px; text-align: center; }
.kwc i { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 0; box-shadow: 0 4px 12px rgba(16,36,42,.08); color: var(--brand-2); }
.kwc i .ic { width: 26px; height: 26px; }
.kwc small { font-size: 12px; font-weight: 700; color: var(--ink-2); line-height: 1.2; }

/* Bad air sends the bill later: evidence tiles + audience cards */
.stakes3 h2 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -.01em; }
.stakes3 .stats { margin: 16px 0 18px; }
.stake3 { background: var(--panel); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; border: 0; }
.st3-art { height: 130px; background: linear-gradient(135deg, var(--brand-3), #F4EFE6); padding: 14px 40px; color: var(--brand); }
.st3-body { padding: 14px 16px 16px; display: grid; gap: 8px; flex: 1; align-content: start; }
.st3-who { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--brand-2); }
.st3-body h3 { margin: 0; font-family: var(--display); font-size: 1.3rem; line-height: 1.2; }
.st3-body p { margin: 0; font-size: 14px; color: var(--ink-2); }
.st3-lose { background: #FFF4E2; border-radius: 12px; padding: 8px 12px; display: grid; }
.st3-lose small { font-size: 12px; font-weight: 500; letter-spacing: 0; color: #9A5B00; }
.st3-lose b { font-size: 14px; }
.st3-tag { font-style: normal; font-weight: 800; color: var(--brand); }

/* How our AI panel works: compact bar */
.band.howbar { background: var(--brand-3); border-radius: 22px; padding: 18px 20px; display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 18px; align-items: center; }
.hb-head { display: flex; gap: 12px; align-items: center; }
.hb-head h2 { margin: 0 0 2px; font-size: 1.35rem; }
.hb-head small { color: var(--ink-2); font-size: 12.5px; }
.hb-faces { display: flex; flex: none; }
.hb-faces img { width: 36px; height: 36px; border-radius: 50%; border: 0; object-fit: cover; margin-left: -10px; background: var(--panel); }
.hb-faces img:first-child { margin-left: 0; }
.hb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; counter-reset: s; }
.hb-steps li { position: relative; display: flex; gap: 8px; align-items: flex-start; background: var(--panel); border-radius: 14px; padding: 10px; }
.hb-steps li:not(:last-child)::after { content: '›'; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); color: var(--brand-2); font-weight: 900; z-index: 1; }
.hb-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-2); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.hb-steps b { display: block; font-size: 13.5px; line-height: 1.25; } .hb-steps small { color: var(--muted); font-size: 12px; line-height: 1.3; display: block; }

/* Hoarding: stronger perspective, board depth, billboard typography, no web address */
@media (min-width: 900px) { .hoarding { transform: perspective(1500px) rotateY(-11deg) rotateX(2deg); transform-origin: 15% 55%; } }
@media (max-width: 899px) { .hoarding { transform: perspective(900px) rotateY(-6deg); transform-origin: 10% 50%; } }
.hd-frame { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.4), 12px 4px 0 #2a3035, 12px 4px 0 1px #1d2226, 30px 40px 50px rgba(5,10,30,.55); }
.hd-vinyl .bb-copy h2 { font-family: var(--font); font-weight: 800; font-size: clamp(2.3rem, 6vw, 4.6rem); line-height: .95; letter-spacing: -.035em; margin: 16px 0 12px; text-shadow: 0 3px 0 rgba(0,0,0,.18); }
.hd-vinyl .bb-copy h2 span { color: #FFC24B; display: inline-block; }
.hd-vinyl .bb-copy p { font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.25rem); color: #E6F1F2; }
.hd-vinyl .bb-pains span { font-weight: 800; letter-spacing: .12em; }
.hd-vinyl .bb-tile b { font-weight: 800; letter-spacing: -.01em; }
.hd-vinyl .bb-tiles { margin-bottom: 4px; }
.hs-ground::before { width: 70%; left: 48%; transform: translateX(-50%) skewX(-30deg); }

@media (max-width: 900px) {
  .band.howbar { grid-template-columns: 1fr; }
  .hb-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
  .hb-steps li { scroll-snap-align: start; } .hb-steps li::after { display: none; }
}
@media (max-width: 760px) {
  .hero-row { flex-direction: column; align-items: stretch; }
  .hero-check { justify-content: center; }
  .stakes3 .stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hd-vinyl .bb-tiles { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .hd-vinyl .bb-tile small { display: none; }
  .hd-vinyl .bb-tile { padding: 8px 4px; } .hd-vinyl .bb-ic { height: 36px; } .hd-vinyl .bb-tile b { font-size: 11.5px; }
  .hd-vinyl .bb-main { grid-template-columns: 1.4fr 1fr; } .hd-vinyl .bb-art { height: 100px; }
  .stat b { font-size: 1.5rem; } .stat p { font-size: 13px; }
}
.hoarding { max-width: 920px; }
@media (min-width: 900px) { .hoarding { transform: perspective(1600px) rotateY(-10deg) rotateX(2deg); transform-origin: 85% 55%; } }
.band.howbar { grid-template-columns: minmax(300px, 380px) 1fr; }
@media (max-width: 640px) {
  .hd-vinyl .bb-main { grid-template-columns: 1fr; } .hd-vinyl .bb-art { height: 84px; order: -1; justify-self: end; margin-bottom: -40px; }
  .hd-vinyl .bb-pains { gap: 5px; } .hd-vinyl .bb-pains span { font-size: 10.5px; padding: 3px 7px; letter-spacing: .06em; }
  .hd-vinyl .bb-tag { font-size: 10px; }
}

/* ===================== v1.4.7 ===================== */
.tb-rooms { margin-right: 4px; }
/* Situation room (signed-in lobby) */
.band.sitroom { position: relative; overflow: hidden; border-radius: 26px; padding: 20px clamp(14px, 3vw, 30px) 0;
  background: linear-gradient(180deg, #E8EEF0 0%, #DCE6E8 62%, #C9D3D6 62.2%, #B7C2C6 100%); border: 0; }
.sitroom::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 62%; background: repeating-linear-gradient(90deg, transparent 0 119px, rgba(18,63,99,.05) 119px 120px); pointer-events: none; }
.sr-head { position: relative; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sr-head h2 { margin: 0; } .sr-head small { color: var(--ink-2); font-size: 12.5px; }
.sr-room { position: relative; }
.sr-board { position: relative; max-width: 1040px; margin: 0 auto; background: linear-gradient(160deg, #FFFFFF, #F3F7F8); border: 10px solid #2F3D43; border-radius: 10px; padding: 12px 14px 16px; box-shadow: 0 14px 30px rgba(16,36,42,.22), inset 0 0 0 1px #fff; }
.sr-board::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -24px; height: 14px; background: #2F3D43; border-radius: 0 0 6px 6px; opacity: .85; }
.sr-board-h { display: flex; align-items: center; justify-content: space-between; font: 800 12px/1 var(--font); letter-spacing: .14em; color: #2F3D43; margin-bottom: 10px; }
.sr-board-h span:last-child { letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.sr-pin { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a73, #C2412D); box-shadow: 0 2px 3px rgba(0,0,0,.3); }
.sr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.sr-step { position: relative; display: grid; gap: 4px; align-content: start; background: #FFF9E8; border: 0; border-radius: 6px; padding: 10px 10px 12px; transform: rotate(-.6deg); box-shadow: 0 2px 4px rgba(0,0,0,.08); transition: transform .3s, background .3s, box-shadow .3s; }
.sr-step:nth-child(even) { transform: rotate(.7deg); }
.sr-step:not(:last-child)::after { content: '➜'; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: #2F3D43; font-size: 14px; }
.sr-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #2F3D43; color: #fff; font-size: 12px; font-weight: 800; }
.sr-step b { font-size: 14.5px; } .sr-step small { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.sr-step.done { background: #EAF6EF; box-shadow: inset 0 0 0 2px #BFE3CC; } .sr-step.done .sr-n { background: var(--ok); }
.sr-step.on { background: var(--brand-2); box-shadow: inset 0 0 0 2px var(--brand-2); color: #fff; transform: rotate(0) scale(1.05); box-shadow: 0 10px 22px rgba(31,120,184,.35); z-index: 1; }
.sr-step.on small { color: rgba(255,255,255,.88); } .sr-step.on .sr-n { background: #FFD58A; color: #2b1c00; }
.sr-crowd { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 900px; margin: 70px auto 0; padding: 0 2%; }
.sr-p { margin: 0; display: grid; justify-items: center; transition: transform .35s; }
.sr-fig { width: min(170px, 92%); aspect-ratio: 47 / 45; border-radius: 48% 48% 14px 14px / 42% 42% 14px 14px; overflow: hidden; border: 0; background: #fff; box-shadow: 0 8px 18px rgba(16,36,42,.18); transition: border-color .3s, box-shadow .3s; }
.sr-fig img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.sr-p.talk { transform: translateY(-8px); } .sr-p.talk .sr-fig { ; box-shadow: 0 0 0 5px color-mix(in srgb, var(--who) 25%, transparent), 0 14px 26px rgba(16,36,42,.25); }
.sr-bubble { position: absolute; left: var(--x, 12.5%); top: -58px; transform: translateX(-50%); max-width: min(300px, 70vw); background: #fff; color: var(--ink); border-radius: 14px; padding: 8px 12px; font-size: 13.5px; font-weight: 600; line-height: 1.35; box-shadow: 0 8px 20px rgba(16,36,42,.18); transition: left .45s cubic-bezier(.2,.8,.2,1); z-index: 3; text-align: center; }
.sr-bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
.sr-table { position: relative; z-index: 2; margin: -34px -4% 0; padding: 16px 6% 18px; background: linear-gradient(180deg, #5A4636, #3E2F24); clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,.12); }
.sr-plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 900px; margin: 0 auto; }
.sr-plate { justify-self: center; display: grid; text-align: center; background: linear-gradient(#F4EBD8, #D9C8A6); border-radius: 6px; padding: 5px 10px; box-shadow: 0 3px 0 #2a2019; border-top: 0; }
.sr-plate b { font-size: 13px; color: #2b1c00; } .sr-plate small { font-size: 11px; color: #5b4630; }
.sr-plate.talk { background: linear-gradient(#FFF6E0, #F2DFB6); }
@media (max-width: 900px) {
  .sr-steps { grid-template-columns: 1fr 1fr; gap: 10px; } .sr-step::after { display: none; } .sr-step:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sr-crowd { margin-top: 74px; gap: 4px; } .sr-bubble { font-size: 12.5px; top: -64px; }
  .sr-plate { padding: 4px 4px; } .sr-plate b { font-size: 10.5px; } .sr-plate small { display: none; }
  .sr-table { margin-top: -22px; }
}
@media (prefers-reduced-motion: reduce) { .sr-p, .sr-step, .sr-bubble { transition: none; } }
.sr-bubble { left: clamp(min(150px, 35vw), var(--x, 12.5%), calc(100% - min(150px, 35vw))); }

/* ===================== v1.4.8 ===================== */
/* Round profile button next to Sign out */
.pdot { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--accent); color: #2b1c00; font-weight: 800; font-size: 13px; text-decoration: none; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.15); }
.pdot svg { width: 18px; height: 18px; }
.bar-acts { align-items: center; } .bar-acts .pdot { width: 32px; height: 32px; margin: 0 2px; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
/* Bad air (1/3) beside the TV (2/3) */
.gate.wide { max-width: 1240px; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; align-items: start; margin: 34px 0; }
.duo > .band { margin: 0; min-width: 0; }
.duo .stakes3 h2, .duo .news3 h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.duo .stakes3 .car-track { grid-auto-columns: 100%; }
.duo .stakes3 .car-nav { display: none; }
.duo .stakes3 .band-lead { font-size: 14.5px; }
.duo .news3 .tv { margin: 4px 0 6px; max-width: none; }
.duo .tv-cab { grid-template-columns: 1fr 104px; padding: 18px; }
@media (max-width: 1000px) { .duo { grid-template-columns: 1fr; gap: 10px; } .duo .stakes3 .car-track { grid-auto-columns: calc((100% - 12px) / 2); } }
@media (max-width: 640px) { .duo .stakes3 .car-track { grid-auto-columns: 88%; } .duo .tv-cab { grid-template-columns: 1fr; padding: 12px; } }
/* IEQ icon pop-ups */
button.kwc { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: inherit; }
button.kwc:hover i, button.kwc:focus-visible i { ; transform: translateY(-2px); }
button.kwc i { transition: transform .2s, border-color .2s; }
.dom-pop { display: grid; gap: 10px; }
.dp-h { display: flex; gap: 12px; align-items: flex-start; } .dp-h p { margin: 0; color: var(--ink-2); }
.dp-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-3); color: var(--brand-2); }
.dom-pop h4 { margin: 4px 0 0; font-size: 13px; letter-spacing: 0; color: var(--brand-2); }
.dp-src { margin: 0; padding-left: 22px; display: grid; gap: 5px; } .dp-src li { padding-left: 2px; }
.dp-src li::marker { color: var(--brand-2); font-weight: 800; }
/* Bulk research upload */
.bulk { display: grid; gap: 8px; padding: 12px; border: 0; border-radius: 14px; background: var(--brand-3); }
.bulk .lab { margin: 0; }
.bulk-q { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
.bulk-q li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--panel); font-size: 13px; }
.bq-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bq-st { flex: none; color: var(--muted); font-weight: 700; max-width: 55%; text-align: right; }
.bulk-q li.busy .bq-st { color: var(--brand-2); } .bulk-q li.done .bq-st { color: var(--ok); } .bulk-q li.fail .bq-st { color: var(--no); } .bulk-q li.skip .bq-st { color: #9A5B00; }
.kw-strip:active .kw-run, .kw-strip:focus-within .kw-run { animation-play-state: paused; }

/* ===================== v1.4.9 ===================== */
.pdot { overflow: hidden; } .pdot img { width: 100%; height: 100%; object-fit: cover; }
/* Profile page */
.prof-page { padding-top: 14px; }
.pf-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 20px; margin: 14px 0 30px; align-items: start; }
.pf-card { background: var(--panel); border-radius: 22px; padding: 22px; display: grid; gap: 10px; justify-items: center; text-align: center; box-shadow: var(--shadow); }
.pf-card h2 { margin: 4px 0 0; font-family: var(--display); }
.pf-card .kv { width: 100%; text-align: left; }
.pf-face { display: grid; justify-items: center; gap: 10px; }
.pf-photo { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 0; box-shadow: 0 6px 18px rgba(16,36,42,.15); }
.pf-photo.ini { display: grid; place-items: center; background: var(--brand-2); color: #fff; font-size: 2.6rem; font-weight: 800; }
.pf-photo-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pf-side { display: grid; gap: 16px; }
.pf-sec { background: var(--panel); border-radius: 22px; padding: 18px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.pf-sec h3 { margin: 0; font-family: var(--display); }
.pf-subs { display: grid; gap: 10px; }
.pf-sub { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; border: 0; }
.pf-sub.class { background: var(--room-class); } .pf-sub.audit { background: var(--room-audit); } .pf-sub.cabin { background: var(--room-cabin); }
.pf-sub small { display: block; color: var(--ink-2); }
.pf-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--panel); display: grid; place-items: center; color: var(--brand-2); }
.pf-sub-acts { display: flex; gap: 6px; }
.pf-sec .menu { border-radius: 14px; overflow: hidden; border: 0; }
@media (max-width: 820px) { .pf-grid { grid-template-columns: 1fr; } .pf-sub { grid-template-columns: auto 1fr; } .pf-sub-acts { grid-column: 1 / -1; justify-content: flex-end; } }

/* Intake: drop-down quick picks + free text */
.pk-field { display: grid; gap: 6px; }
.pk-lab { font-weight: 700; font-size: 14px; }
.pk-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pk { position: relative; }
.pk summary { list-style: none; cursor: pointer; padding: 8px 34px 8px 12px; border: 0; border-radius: 10px; background: var(--panel); font-weight: 700; font-size: 14px; position: relative; min-width: 150px; }
.pk summary::-webkit-details-marker { display: none; }
.pk summary::after { content: '▾'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--brand-2); }
.pk[open] summary { ; }
.pk-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: min(380px, 86vw); max-height: 300px; overflow-y: auto; background: var(--panel); border: 0; border-radius: 12px; box-shadow: 0 12px 30px rgba(16,36,42,.18); padding: 6px; display: grid; }
.pk-o { display: flex; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.pk-o:hover { background: var(--brand-3); } .pk-o input { width: 18px; height: 18px; accent-color: var(--brand-2); }
.pk-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.pk-tag { border: 0; background: var(--brand-3); color: var(--brand); border-radius: 999px; padding: 4px 10px; font: 700 12.5px var(--font); cursor: pointer; }
/* Map location picker */
.pp-wrap { display: grid; gap: 6px; }
.pp { display: grid; gap: 8px; }
.pp-bar { display: flex; gap: 6px; flex-wrap: wrap; } .pp-bar input { flex: 1; min-width: 180px; }
.pp-map { height: 300px; border-radius: 14px; overflow: hidden; border: 0; background: #dfe7e9; z-index: 0; }
.pp-status { font-size: 13px; color: var(--ink-2); }
.pp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pp-card { background: var(--panel-2); border: 0; border-radius: 12px; padding: 10px; display: grid; gap: 3px; font-size: 12.5px; color: var(--ink-2); }
.pp-card b { color: var(--ink); font-size: 13px; display: flex; gap: 5px; align-items: center; } .pp-card b .ic { width: 16px; height: 16px; color: var(--brand-2); }
.pp-card.wait { opacity: .6; } .pp-card.warn { ; background: #FFF6E2; } .pp-card.bad { box-shadow: inset 0 0 0 2px #D9634A; background: #FDEDEA; }
@media (max-width: 900px) { .pp-cards { grid-template-columns: 1fr 1fr; } .pp-map { height: 240px; } }

/* Healthy Home Check report */
.hcr-wrap { position: fixed; inset: 0; z-index: 70; background: var(--bg); overflow-y: auto; padding-bottom: 40px; }
.hcr-bar { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; align-items: center; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.hcr-bar span { flex: 1; }
.hcr { max-width: 800px; margin: 20px auto; background: #fff; color: #18242A; border-radius: 14px; padding: 30px 34px; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.hcr-h { display: flex; gap: 12px; align-items: center; border-bottom: 3px solid #123F63; padding-bottom: 12px; margin-bottom: 16px; }
.hcr-h img { width: 46px; } .hcr-h b { font-size: 1.25rem; display: block; } .hcr-h small { color: #5b6a70; }
.hcr-score { display: flex; gap: 16px; align-items: center; } .hcr-score b { font-size: 1.8rem; } .hcr-score p { margin: 4px 0 0; }
.hcr h3 { margin: 22px 0 8px; font-family: var(--display); color: #123F63; }
.hcr-t, .hcr-a { width: 100%; border-collapse: collapse; font-size: 14px; }
.hcr-t td { padding: 5px 6px; } .hcr-t td:first-child { width: 34%; } .hcr-t td.n { width: 40px; text-align: right; font-weight: 800; }
.hcr-t .bar { background: #EEF2F3; border-radius: 6px; padding: 0; } .hcr-t .bar i { display: block; height: 12px; border-radius: 6px; }
.hcr-a td { padding: 6px 8px; border-bottom: 1px solid #E6EAEB; vertical-align: top; } .hcr-a td:first-child { width: 55%; color: #4B5A61; }
.hcr-a tr.s0 td:last-child, .hcr-a tr.s1 td:last-child { color: #B4472F; font-weight: 700; }
.hcr-fine { font-size: 12px; color: #6b787d; border-top: 1px solid #E6EAEB; padding-top: 10px; margin-top: 20px; }
@media (max-width: 640px) { .hcr { padding: 18px; margin: 10px; } .hcr-a td:first-child { width: 50%; } }
@media print {
  body:has(.hcr-wrap) #app, body:has(.hcr-wrap) .toast { display: none !important; }
  .hcr-wrap { position: static; background: #fff; padding: 0; overflow: visible; }
  .hcr-bar { display: none; }
  .hcr { box-shadow: none; margin: 0; max-width: none; padding: 0; border-radius: 0; }
  .hcr-t .bar i, .big-l { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===================== v1.5.0 ===================== */
.duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.duo .tv-cab { grid-template-columns: 1fr 92px; padding: 16px; }
.duo .tv-chans { grid-template-columns: repeat(2, 1fr); }
.duo .tv-story { grid-template-columns: 34% 1fr; padding: 42px 18px 8px; gap: 12px; }
.duo .tv-copy b { font-size: clamp(1rem, 1.6vw, 1.35rem); } .duo .tv-copy p { font-size: 13.5px; }
@media (max-width: 1000px) { .duo { grid-template-columns: 1fr; } }
.send-txt { border-radius: 999px; padding: 10px 22px; }
.chips.end { justify-content: flex-end; }
.hd-vinyl .bb-copy h2 { font-size: clamp(2.1rem, 5.2vw, 4.1rem); }
.hd-vinyl .bb-art { height: 210px; }
/* TV in a half-width column: controls move under the screen, screen gets a classic 4:3 shape */
.duo .tv-cab { grid-template-columns: 1fr; padding: 14px; gap: 10px; }
.duo .tv-screen { aspect-ratio: 4 / 3; }
.duo .tv-side { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; padding: 8px 10px; gap: 10px; }
.duo .tv-knobs { display: flex; } .duo .tv-knob { width: 34px; height: 34px; } .duo .tv-knob.sm { width: 26px; height: 26px; }
.duo .tv-chans { grid-template-columns: repeat(10, auto); } .duo .tv-chl { display: none; }
.duo .tv-grille { flex: 0 0 90px; min-height: 26px; }
.duo .tv-story { grid-template-columns: 1fr; align-content: center; padding: 44px 22px 8px; gap: 8px; }
.duo .tv-art { max-height: 110px; }
.duo .st3-art { height: 190px; } .duo .stake3 { min-height: 520px; }

/* ===================== v1.5.1 — phones (desktop unchanged) ===================== */
.mnav, .fab { display: none; }
@media (max-width: 820px) {
  /* WhatsApp-style bottom navigation, hidden inside an open chat/lesson/audit */
  body.has-mnav { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  body.has-mnav.in-chat { padding-bottom: 0; }
  .mnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--panel); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(16,36,42,.06); }
  body.in-chat .mnav { display: none; }
  .mn-i { display: grid; justify-items: center; gap: 2px; text-decoration: none; color: var(--ink-2); font-size: 11px; font-weight: 700; }
  .mn-ic { width: 54px; height: 30px; border-radius: 999px; display: grid; place-items: center; transition: background .2s; }
  .mn-ic .ic { width: 22px; height: 22px; }
  .mn-i.on { color: var(--brand); } .mn-i.on .mn-ic { background: var(--brand-3); }
  .mn-ic img, .mn-ini { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--accent); color: #2b1c00; font-size: 11px; }
  /* Room shells: chat list fills the screen above the bottom bar, like WhatsApp */
  .shell-wrap { height: calc(100dvh - 62px - env(safe-area-inset-bottom)); }
  body.in-chat .shell-wrap, body.in-chat .shell-wrap.show-main .main { height: 100dvh; }
  .shell-wrap .side { height: 100%; }
  .shell-wrap .side .app-foot { display: none; }
  .bar { padding: 10px 12px 6px; }
  .bar .brand b { font-size: 1.25rem; }
  .bar-acts { background: none; } .bar-acts a.icon-btn[href="#/lobby"] { display: none; }
  .room-name { padding: 0 14px 6px; font-size: 1rem; }
  .tab { font-size: 14.5px; padding: 11px 4px 12px; }
  .side .list { position: relative; }
  .fab { display: grid; place-items: center; position: absolute; right: 16px; bottom: 16px; z-index: 5; width: 56px; height: 56px; border-radius: 18px; background: var(--brand-2); color: #fff; box-shadow: 0 6px 18px rgba(16,36,42,.28); }
  .fab .ic { width: 26px; height: 26px; }
  .side { position: relative; }
  .row { padding: 10px 14px; } .row .av, .row .av-wrap img { width: 50px; height: 50px; }
  /* Chat headers: compact overlapping avatars so the title has room */
  .chat-head { min-height: 56px; padding: 6px 8px; gap: 6px; }
  .chat-head .group-av img { width: 26px; height: 26px; margin-right: -14px; }
  .chat-head .group-av { padding-right: 14px; }
  .chat-head .group-av img:nth-child(n+3) { display: none; }
  .chat { padding: 10px 10px 14px; }
  .msg { max-width: 92%; }
  .foot { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .foot .chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .foot .chips::-webkit-scrollbar { display: none; }
  .foot .chips.end { justify-content: flex-end; }
  /* Filter chips scroll sideways (WhatsApp: All · Unread · Groups) */
  .rs-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rs-filter::-webkit-scrollbar { display: none; }
  .rs-filter .chip { flex: none; }
  /* Forms: comfortable touch targets, no iOS zoom on focus */
  input, select, textarea { font-size: 16px; }
  .pk-field textarea { min-height: 64px; }
  .pk summary { padding: 10px 34px 10px 12px; }
  .pk-list { width: calc(100vw - 48px); }
  .two, .three { grid-template-columns: 1fr; }
  /* Top bar: icon buttons instead of words */
  .topbar { padding: 8px 12px; }
  .tb-lbl { display: none; }
  .tb-right .btn.sm { padding: 8px; width: 38px; height: 38px; border-radius: 50%; justify-content: center; display: inline-grid; place-items: center; }
  .tb-right .tb-signin { width: auto; padding: 8px 14px; border-radius: 999px; }
  .tb-right .tb-signin .tb-lbl { display: inline; }
  .tb-brand b { font-size: 1.15rem; }
  /* Room cards → chat-list style rows on phones */
  .windows { gap: 8px; }
  .window-box { display: grid; grid-template-columns: 48px 1fr; column-gap: 12px; row-gap: 2px; padding: 14px; border-radius: 18px; align-items: center; }
  .window-box::after { display: none; }
  .window-box .wb-top { grid-row: 1 / span 3; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.7); display: grid; place-items: center; align-self: start; margin: 0; }
  .window-box .wb-top .wb-pro { display: none; }
  .window-box h2 { font-size: 1.15rem; margin: 0; }
  .window-box > p { margin: 0; font-size: 13.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .window-box .wb-badges, .window-box .faces { display: none; }
  .window-box .wb-go { grid-column: 2; font-size: 13.5px; }
  .gate-hero h1 { font-size: 1.7rem; margin: 6px 0 2px; }
  /* Meet the panel: contact-list cards; details stay one tap away */
  .cv { padding: 12px 14px; }
  .cv dl { display: none; }
  .cv .cv-head img { width: 54px; height: 54px; }
  .cv .link-btn { padding: 0; }
  /* Room dashboards are not used on phones (the list is the home screen) */
  .pf-page { padding-bottom: 20px; }
  .hero2 { padding-top: 18px; }
  .hero2 h1 { font-size: 1.85rem; }
  .hero-lead { font-size: 15px; }
  .band { margin: 26px 0; }
  .sr-board { padding: 10px; border-width: 7px; }
  .modal { max-height: 88dvh; overflow-y: auto; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.in-chat .toast { bottom: 90px; }
}

/* ===================== v1.6.0 — elegant, light-only typography and layout ===================== */
/* Type: Fraunces (500, tight tracking, italic accents) for headings; the system sans for text. */
body { font-size: 16px; line-height: 1.6; background: var(--bg); }
.gate-wrap { background: var(--bg); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; line-height: 1.12; }
.eyebrow { display: inline-block; font-family: var(--font); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--brand-2); }
.gate { padding-top: 8px; }
.gate.wide { max-width: 1200px; padding-left: 24px; padding-right: 24px; }
.band { margin: 88px 0; }
.band > h2, .tv-head h2 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 700; letter-spacing: -.02em; margin: 10px 0 12px; }
.band > h2 em, .tv-head h2 em { font-style: italic; font-weight: 400; color: var(--brand-2); }
.band-lead { font-size: 18px; color: var(--muted); max-width: 720px; margin-bottom: 28px; }
.btn { font-weight: 600; padding: 12px 22px; letter-spacing: 0; }
.btn.lg { padding: 15px 26px; font-size: 16px; }
.btn.sm { padding: 9px 16px; font-size: 14px; }
.btn.ghost {  ; color: var(--brand); background: #fff; }
.btn.ghost:hover { ; }
.chip { font-weight: 600; }

/* Header */
.topbar { padding: 14px max(24px, calc((100vw - 1200px) / 2)); background: rgba(252,250,245,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); box-shadow: none; }
.tb-brand img { width: 40px; height: 40px; }
.tb-brand b { font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; }
.tb-nav { gap: 22px; }
.tb-nav button { font-size: 15px; font-weight: 500; color: var(--brand); padding: 6px 2px; border-radius: 0; }
.tb-nav button:hover { background: none; color: var(--accent); }
.tb-signin { white-space: nowrap; padding: 10px 20px; }
.tb-burger { display: none; background: none; border: 0; color: var(--brand); padding: 6px; cursor: pointer; }

/* Hero */
.hero2 { padding: 64px 0 20px; }
.hero2 h1 { font-size: clamp(40px, 5.4vw, 72px); font-weight: 700; letter-spacing: -.025em; line-height: 1.04; max-width: 1000px; }
.hero2 h1 span { font-weight: 400; }
.hero-lead { font-size: 19px; color: var(--muted); max-width: 720px; margin: 0 auto; }
.hero-row { margin-top: 36px; }
.hero-check b { font-weight: 600; }
.kwc small { font-weight: 600; color: var(--ink-2); }
.kwc i {  ; box-shadow: none; }

/* Cards: thin borders, soft shadows */
.window-box, .cv, .pricec, .pf-card, .pf-sec, .dash-tile, .stake3 { box-shadow: 0 1px 2px rgba(6,18,42,.05), 0 12px 32px -14px rgba(6,18,42,.18); }
.window-box h2, .pricec h3, .cv-head b { font-family: var(--display); font-weight: 700; }
.wb-go { font-weight: 600; }

/* ---------- IEQ TV: modern LED screen ---------- */
.tvband { text-align: center; }
.tv-head { max-width: 760px; margin: 0 auto 22px; }
.tv-head .band-lead { margin: 0 auto; }
.led-ch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; border: 0; margin: 6px auto 22px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.led-ch::-webkit-scrollbar { display: none; }
.led-ch button { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 9px 16px; border-radius: 999px; font: 600 14px var(--font); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.led-ch button.on { background: var(--brand); color: #fff; }
.lc-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; }
.led-ch button.on .lc-dot { background: #FF5A4E; opacity: 1; box-shadow: 0 0 0 3px rgba(255,90,78,.25); }
.lc-short { display: none; }
.ledtv { max-width: 1040px; margin: 0 auto; }
.led-frame { position: relative; padding: 10px 10px 0; border-radius: 22px; background: linear-gradient(160deg, #2a2f35, #0b0d10 40%, #15181c); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.12), 0 40px 80px -30px rgba(6,18,42,.55); }
.led-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; text-align: left; color: #fff;
  background: radial-gradient(120% 90% at 85% 10%, #1f6f7c 0, transparent 55%), radial-gradient(90% 80% at 0% 100%, #2a2350 0, transparent 60%), linear-gradient(160deg, #0b2a35, #08141c); display: flex; flex-direction: column; }
.led-screen[data-ch="stakes"] { background: radial-gradient(120% 90% at 85% 10%, #7a4c12 0, transparent 55%), radial-gradient(90% 80% at 0% 100%, #3a1e2e 0, transparent 60%), linear-gradient(160deg, #241812, #0e0b0a); }
.led-screen[data-ch="myths"] { background: radial-gradient(120% 90% at 85% 10%, #6b1e2a 0, transparent 55%), radial-gradient(90% 80% at 0% 100%, #123F63 0, transparent 60%), linear-gradient(160deg, #1a1220, #0a0c12); }
.led-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px 0; font: 700 12px var(--font); letter-spacing: .14em; color: rgba(255,255,255,.8); }
.led-bug { display: inline-flex; gap: 8px; align-items: center; }
.led-live { background: #E0262B; color: #fff; padding: 3px 7px; border-radius: 4px; letter-spacing: .1em; font-size: 10.5px; }
.led-meta { letter-spacing: .04em; color: #FFD58A; font-weight: 600; }
.led-slot { flex: 1; min-height: 0; display: flex; }
.led-item { flex: 1; display: grid; grid-template-columns: 36% 1fr; gap: 28px; align-items: center; padding: 18px 40px 26px; color: inherit; text-decoration: none; animation: ledin .55s ease both; }
@keyframes ledin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.led-art { height: 100%; max-height: 240px; } .led-art .art { color: #EAF4F5; } .led-art .art .f2 { fill: rgba(255,255,255,.1); }
.led-copy { display: grid; gap: 10px; align-content: center; }
.led-eyebrow { font: 500 12px var(--font); letter-spacing: 0; color: #8FD3CF; }
.led-screen[data-ch="stakes"] .led-eyebrow { color: #FFC24B; }
.led-copy h3 { margin: 0; font-size: clamp(22px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: #fff; }
.led-copy p { margin: 0; color: rgba(255,255,255,.78); font-size: 15.5px; line-height: 1.55; max-width: 560px; }
.led-link { color: #FFD58A; font-weight: 600; font-size: 14px; }
.led-stake { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.08); border: 0; max-width: 520px; }
.led-stake small { font: 500 12px var(--font); letter-spacing: 0; color: #FFC24B; } .led-stake b { font-weight: 600; font-size: 15px; }
.led-tag { font-family: var(--display); font-style: italic; font-size: 18px; color: #FFE3A8; }
.led-item.myths { grid-template-columns: 1fr 1fr; gap: 0; padding: 18px 26px 26px; }
.led-myth, .led-fact { display: grid; gap: 12px; align-content: center; padding: 10px 24px; }
.led-fact { border-left: 1px solid rgba(255,255,255,.14); }
.led-myth h3 { margin: 0; font-size: clamp(22px, 2.8vw, 38px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; text-decoration: line-through; text-decoration-color: rgba(255,90,78,.75); text-decoration-thickness: 2px; }
.led-fact p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.9); }
.led-fact small { color: rgba(255,255,255,.55); font-size: 12px; }
.mf { justify-self: start; font: 500 11.5px var(--font); letter-spacing: 0; padding: 5px 10px; border-radius: 6px; }
.mf.m { background: #E0262B; color: #fff; } .mf.f { background: #8FD3CF; color: #0B2F38; }
.led-progress { height: 3px; background: rgba(255,255,255,.08); }
.led-bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFD58A, #F2A541); animation: ledbar 8s linear forwards; }
@keyframes ledbar { to { width: 100%; } }
.ledtv:hover .led-bar, .ledtv:focus-within .led-bar { animation-play-state: paused; }
.led-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.07) 0, rgba(255,255,255,0) 32%); }
.led-chin { display: flex; justify-content: center; align-items: center; gap: 10px; height: 26px; font: 700 9.5px var(--font); letter-spacing: .32em; color: rgba(255,255,255,.4); position: relative; }
.led-power { position: absolute; right: 18px; width: 5px; height: 5px; border-radius: 50%; background: #5DE08A; box-shadow: 0 0 6px #5DE08A; }
.led-stand { display: grid; justify-items: center; }
.led-stand i { width: 70px; height: 36px; background: linear-gradient(90deg, #1b1f24, #3a4048 50%, #1b1f24); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.led-stand b { width: min(380px, 48%); height: 10px; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(#3a4048, #121519); box-shadow: 0 14px 22px -8px rgba(6,18,42,.5); }
.led-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 16px; }
.led-arrow { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; font-size: 22px; line-height: 1; color: var(--brand); cursor: pointer; }
.led-count { font: 600 13px var(--font); color: var(--muted); min-width: 52px; }
.tv-note { margin-top: 14px; }
.duo { display: block; }

@media (max-width: 1000px) { .led-item { grid-template-columns: 30% 1fr; padding: 14px 24px 20px; gap: 18px; } .led-copy p { font-size: 14.5px; } }

/* ---------- Phones ---------- */
@media (max-width: 820px) {
  .shell-wrap { grid-template-columns: minmax(0, 1fr) !important; max-width: none; }
  .shell-wrap .side, .shell-wrap .main { min-width: 0; }
  .shell-wrap .side { width: 100%; }
  body { font-size: 16px; }
  .gate.wide { padding-left: 16px; padding-right: 16px; }
  .band { margin: 56px 0; }
  .band > h2, .tv-head h2 { font-size: 32px; }
  .band-lead { font-size: 16.5px; }
  .topbar { padding: 10px 16px; gap: 10px; flex-wrap: wrap; }
  .tb-brand b { font-size: 1.3rem; }
  .tb-burger { display: inline-grid; place-items: center; order: 3; }
  .tb-nav { display: none; order: 4; flex-basis: 100%; flex-direction: column; gap: 0; padding: 6px 0 10px; }
  .topbar.open .tb-nav { display: flex; }
  .tb-nav button { text-align: left; padding: 13px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
  .tb-right .btn.sm.tb-signin { display: inline-flex; width: auto; height: auto; padding: 9px 16px; border-radius: 999px; font-size: 14.5px; }
  .hero2 { padding: 36px 0 6px; text-align: left; }
  .hero2 h1 { font-size: 40px; letter-spacing: -.025em; margin: 0 0 16px; }
  .hero-lead { font-size: 17px; margin: 0; text-align: left; }
  .hero-row { margin-top: 26px; }
  .hero-check { width: 100%; justify-content: center; padding: 15px 20px; }
  .kw-strip { margin: 0 -16px; }
  /* TV on a phone: same LED set, content stacks inside a taller screen */
  .led-ch { display: flex; width: 100%; }
  .led-ch button { flex: 1; justify-content: center; padding: 9px 10px; }
  .lc-long { display: none; } .lc-short { display: inline; }
  .led-frame { padding: 6px 6px 0; border-radius: 16px; }
  .led-screen { aspect-ratio: auto; min-height: 520px; border-radius: 10px; }
  .led-top { padding: 12px 14px 0; font-size: 10.5px; }
  .led-item, .led-item.myths { grid-template-columns: 1fr; padding: 12px 18px 18px; gap: 12px; align-content: start; }
  .led-art { max-height: 120px; height: 120px; }
  .led-copy h3 { font-size: 24px; }
  .led-copy p { font-size: 14.5px; }
  .led-myth, .led-fact { padding: 8px 2px; }
  .led-fact { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 16px; }
  .led-myth h3 { font-size: 26px; }
  .led-fact p { font-size: 15px; }
  .led-chin { height: 20px; }
  .led-stand i { width: 46px; height: 22px; } .led-stand b { height: 8px; }
}
/* Research library: section headers and built-in references */
.rs-sec { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; font-size: 12px; letter-spacing: 0; color: var(--muted); border-top: 1px solid var(--line); }
.rs-sec b { font-weight: 700; } .rs-sec span { background: var(--panel-2); border-radius: 999px; padding: 1px 8px; letter-spacing: 0; }
button.row.rs-ref { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.av.code-av.k-standard { background: #E4EBF7; color: #12306a; } .av.code-av.k-guideline { background: #E4F1FA; color: #123F63; }
.av.code-av.k-vv { background: #FFF1D6; color: #8A5A12; } .av.code-av.k-study { background: #F1ECF9; color: #4B3B8F; }
.rs-refpop { display: grid; gap: 10px; } .rs-refpop p { margin: 0; line-height: 1.55; }
@media (max-width: 820px) {
  .band.howbar { padding: 18px; }
  .hb-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hs-cta .btn { width: 100%; }
}

/* ===================== v1.6.1 — smooth scrolling everywhere (iPhone) ===================== */
.topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: #FCFAF5; }
.list, .chat, .pk-list, .modal, .hcr-wrap, .report-wrap, .xp-sheet { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.list, .chat { min-height: 0; }
@media (max-width: 820px) {
  /* Room lists scroll with the page itself (one scroller = no stuck gestures on iPhone) */
  .shell-wrap { height: auto; min-height: calc(100dvh - 62px - env(safe-area-inset-bottom)); display: block; }
  .shell-wrap .side { height: auto; min-height: inherit; border-right: 0; }
  .shell-wrap .side .list { overflow: visible; flex: none; }
  .shell-wrap .bar { position: sticky; top: 0; z-index: 6; }
  .fab { position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* An open chat, lesson or audit is a full-screen layer with its own scroller */
  .shell-wrap.show-main .side { display: none; }
  .shell-wrap.show-main .main { display: flex; position: fixed; inset: 0; height: auto; z-index: 30; }
  body.in-chat { overflow: hidden; }
  .kw-strip { -webkit-mask-image: none; mask-image: none; }
}
/* Lobby: at-a-glance tiles */
.lobby-hero { text-align: left; padding: 28px 0 6px; }
.lobby-hero h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 700; letter-spacing: -.025em; margin: 6px 0 4px; }
.lobby-hero p { color: var(--muted); font-size: 17px; margin: 0; }
.lobby-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 16px; }
.ls { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: #fff; border: 0; text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(6,18,42,.04); }
.ls b { display: block; font-weight: 600; font-size: 15px; } .ls small { color: var(--muted); font-size: 13px; }
.ls-ring { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(closest-side, #fff 78%, transparent 80%), conic-gradient(var(--brand-2) calc(var(--p) * 1%), var(--brand-3) 0); }
.ls-ring b { font-family: var(--display); font-size: 20px; line-height: 1; } .ls-ring small { font-size: 10px; line-height: 1; }
.ls-num { flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--panel-2); display: grid; place-items: center; align-content: center; }
.ls-num b { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1; } .ls-num small { font-size: 10px; }
@media (max-width: 820px) {
  .lobby-stats { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
  .ls { padding: 12px 14px; }
  .lobby-hero { padding-top: 16px; } .lobby-hero h1 { font-size: 34px; }
}
@media (max-width: 820px) {
  .lobby-stats { grid-template-columns: repeat(3, 1fr); }
  .ls { flex-direction: column; text-align: center; gap: 8px; padding: 14px 8px; }
  .ls b { font-size: 13px; } .ls > div:last-child small { display: none; }
}
body.in-chat .fab, .shell-wrap.show-main .fab { display: none !important; }

/* ===================== v1.6.2 ===================== */
/* How our AI panel works: a clickable bar with proper arrows between the steps */
.band.howbar { cursor: pointer; transition: box-shadow .2s, transform .2s; position: relative; }
.band.howbar:hover { box-shadow: 0 14px 34px -16px rgba(6,18,42,.3); transform: translateY(-1px); }
.hb-steps { gap: 22px; }
.hb-steps li:not(:last-child)::after { content: none; }
.hb-arrow { position: absolute; right: -20px; top: 50%; transform: translateY(-50%); z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-2); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 3px var(--brand-3); }
.hb-more { grid-column: 1 / -1; justify-self: end; font-weight: 600; font-size: 14px; color: var(--brand-2); }
/* Situation room as a full-screen sheet */
.sr-sheet { position: fixed; inset: 0; z-index: 90; background: rgba(10,20,24,.55); display: grid; place-items: center; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sr-sheet-in { position: relative; width: min(1100px, 100%); }
.sr-sheet .band.sitroom { margin: 0; }
.sr-close { position: absolute; z-index: 5; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: 16px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
/* Lobby tiles: the number sits alone in its box, labels underneath */
.ls-num b { font-size: 24px; }
.ls-ring small { font-size: 11px; }
@media (max-width: 900px) {
  .hb-steps { gap: 10px; }
  .hb-arrow { display: none; }
}
@media (max-width: 820px) {
  .sr-sheet { padding: 0; place-items: start stretch; }
  .sr-sheet-in { width: 100%; min-height: 100%; background: var(--bg); }
  .sr-sheet .band.sitroom { border-radius: 0; min-height: 100dvh; padding-top: 56px; }
  .ls { padding: 12px 6px; }
  .ls b { font-size: 13.5px; line-height: 1.25; }
  .ls-ring, .ls-num { width: 52px; height: 52px; }
  .ls-num b { font-size: 21px; }
}
.row.rs-ref.hidden-ref { opacity: .5; } .rs-edit { display: grid; gap: 10px; } .rs-edit label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; } .rs-edit textarea, .rs-edit input[type=url] { width: 100%; }

/* ---------- v1.6.4: How our AI panel works, pitched as our method ---------- */
.band.howbar { align-items: start; }
.hb-head .eyebrow { font-size: 11px; margin-bottom: 2px; }
.hb-head h2 em { font-style: italic; color: var(--brand-2); }
.hb-lead { margin: 4px 0 6px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.hb-found { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(18,63,99,.12); padding-top: 12px; }
.hb-found-l { flex: none; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--brand-2); }
.hb-found ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hb-found li { background: var(--panel); border: 0; border-radius: 999px; padding: 5px 12px; display: flex; gap: 6px; align-items: baseline; }
.hb-found li b { font-family: var(--display); font-weight: 700; font-size: 14px; }
.hb-found li small { color: var(--muted); font-size: 12px; }
@media (max-width: 820px) {
  .hb-found { flex-direction: column; align-items: flex-start; }
  .hb-found ul { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; padding-bottom: 2px; }
  .hb-found li { flex: none; }
  .hb-lead { font-size: 14px; }
}
.band.pm { background: var(--bg); border-radius: 26px; margin-top: 14px; padding: clamp(20px, 4vw, 44px); display: grid; gap: 34px; }
.pm-hero { max-width: 820px; }
.pm-hero h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.12; margin: 8px 0 12px; }
.pm-hero h2 em { color: var(--brand-2); }
.pm-lead { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; }
.pm-usp { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-usp span { display: inline-flex; gap: 6px; align-items: center; background: var(--brand-3); color: var(--brand); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; }
.pm-usp svg { width: 14px; height: 14px; }
.pm-sec h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; font-size: 1.45rem; margin: 0 0 4px; }
.pm-sec > p.muted { margin: 0 0 16px; max-width: 760px; line-height: 1.55; }
.pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.pm-card { background: var(--panel); border: 0; border-radius: 18px; padding: 18px; box-shadow: 0 1px 2px rgba(6,18,42,.04); }
.pm-card-h { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.pm-n { font-family: var(--display); font-size: 1.6rem; color: var(--brand-2); line-height: 1; }
.pm-card-h b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.pm-card-h small { color: var(--muted); font-size: 12.5px; }
.pm-card p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.pm-asks { color: var(--ink-2) !important; }
.pm-tag { font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--brand-2); }
.pm-tools { list-style: none; counter-reset: t; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pm-tools li { counter-increment: t; background: var(--panel); border: 0; border-radius: 14px; padding: 10px 12px 10px 42px; position: relative; }
.pm-tools li::before { content: counter(t); position: absolute; left: 12px; top: 11px; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-3); color: var(--brand-2); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.pm-tools b { display: block; font-size: 14px; } .pm-tools small { color: var(--muted); font-size: 12.5px; }
.pm-vs { border: 0; border-radius: 18px; overflow: hidden; background: var(--panel); }
.pm-vs-r { display: grid; grid-template-columns: 180px 1fr 1.3fr; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; align-items: start; }
.pm-vs-h { border-top: 0; background: var(--panel-2); font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.pm-vs-h span:last-child { color: var(--brand-2); }
.pm-a { color: var(--muted); }
.pm-b { display: flex; gap: 6px; color: var(--ink); } .pm-b svg { flex: none; width: 16px; height: 16px; color: var(--ok); margin-top: 2px; }
.pm-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pm-uses > div { background: var(--panel); border: 0; border-radius: 16px; padding: 14px; display: grid; gap: 2px; }
.pm-ic { width: 36px; height: 36px; border-radius: 12px; background: var(--brand-3); color: var(--brand-2); display: grid; place-items: center; margin-bottom: 6px; }
.pm-ic svg { width: 20px; height: 20px; }
.pm-uses small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.pm-note { margin: 0; border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 720px) {
  .sr-sheet .band.pm { border-radius: 0; margin-top: 0; }
  .pm-vs-r { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .pm-vs-r > b { grid-column: 1 / -1; }
  .pm-vs-h span:first-child { display: none; }
  .pm-lead { font-size: 16px; }
}
@media (max-width: 900px) {
  .band.howbar { grid-template-columns: minmax(0, 1fr); }
  .hb-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
}
@media (max-width: 720px) { .pm-tools { grid-template-columns: 1fr 1fr; gap: 8px; } .pm-tools li { padding: 8px 8px 8px 36px; } .pm-tools li::before { left: 8px; top: 9px; } .pm-tools b { font-size: 13px; } .pm-tools small { font-size: 11.5px; } }

/* ---------- v1.6.5: phone — panel band fully visible, no sideways scrolling ---------- */
@media (max-width: 900px) {
  .hb-steps { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; scroll-snap-type: none; gap: 0; position: relative; }
  .hb-steps::before { content: ''; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: rgba(31,120,184,.25); }
  .hb-steps li { background: transparent; padding: 7px 0 7px 8px; align-items: center; gap: 12px; border-radius: 0; }
  .hb-steps li .hb-n { position: relative; z-index: 1; width: 28px; height: 28px; box-shadow: 0 0 0 4px var(--brand-3); }
  .hb-steps li b { font-size: 15px; } .hb-steps li small { font-size: 13.5px; }
  .hb-arrow { display: none !important; }
  .hb-found ul { flex-wrap: wrap; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .hb-found li { flex-direction: column; align-items: flex-start; gap: 0; border-radius: 14px; padding: 8px 12px; }
  .hb-found li b { font-size: 15px; line-height: 1.2; } .hb-found li small { font-size: 12.5px; }
  .hb-more { justify-self: stretch; text-align: center; background: var(--brand-2); color: #fff; border-radius: 999px; padding: 12px 16px; font-size: 15px; }
}

/* ---------- v1.6.6: consultation intake as six short guided steps ---------- */
.iz [hidden] { display: none !important; }
.form-chat .intake.iz { gap: 16px; padding: 18px; }
.iz-prog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.iz-prog button { width: 100%; border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 4px; cursor: pointer; font: inherit; color: var(--muted); }
.iz-prog span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--panel-2); border: 0; }
.iz-prog small { font-size: 11.5px; text-align: center; line-height: 1.2; }
.iz-prog li.done span { background: var(--brand-3); box-shadow: inset 0 0 0 2px var(--brand-3); color: var(--brand-2); }
.iz-prog li.on span { background: var(--brand-2); box-shadow: inset 0 0 0 2px var(--brand-2); color: #fff; } .iz-prog li.on small { color: var(--ink); font-weight: 600; }
.iz-step { display: grid; gap: 14px; }
.iz-ask { margin: 0 !important; max-width: 100% !important; }
.iz-body { display: grid; gap: 18px; }
.iz-q { display: grid; gap: 8px; } .iz-q > b { font-size: 15.5px; } .iz-q > small { color: var(--muted); font-size: 13px; margin-top: -4px; }
.iz-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.iz-tiles.small { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.iz-tile { text-align: left; display: grid; gap: 3px; align-content: start; border: 0; background: var(--panel); border-radius: 16px; padding: 12px; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s, background .15s; position: relative; }
.iz-tile:hover { ; }
.iz-tile b { font-size: 14.5px; line-height: 1.25; } .iz-tile small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.iz-tile.on { box-shadow: inset 0 0 0 2px var(--brand-2); background: var(--brand-3); }
.iz-tile.on::after { content: '✓'; position: absolute; top: 8px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-2); color: #fff; font-size: 12px; display: grid; place-items: center; }
.iz-ic { width: 34px; height: 34px; border-radius: 11px; background: var(--brand-3); color: var(--brand-2); display: grid; place-items: center; margin-bottom: 4px; }
.iz-tile.on .iz-ic { background: #fff; } .iz-ic svg { width: 19px; height: 19px; }
.iz-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.iz-chip { border: 0; background: var(--panel); color: var(--ink); border-radius: 999px; padding: 7px 13px; font: 500 14px var(--font); cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.iz-chip:hover { ; }
.iz-chip.on { background: var(--brand-2); box-shadow: inset 0 0 0 2px var(--brand-2); color: #fff; } .iz-chip svg { width: 14px; height: 14px; }
.iz-add { justify-self: start; border: 0; background: none; color: var(--brand-2); font: 600 13.5px var(--font); padding: 2px 0; cursor: pointer; }
.iz-note textarea, .iz-q > textarea { width: 100%; }
.iz-count { color: var(--muted); font-size: 12.5px; }
.iz-sub { display: grid; gap: 8px; padding: 10px 12px; border-left: 0; }
.iz-more summary { cursor: pointer; color: var(--brand-2); font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.iz-sum { background: var(--panel-2); border-radius: 12px; padding: 12px 14px; font-size: 14px; max-height: 320px; overflow-y: auto; }
.iz-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; position: sticky; bottom: 0; background: var(--panel); }
.iz-gap { flex: 1; }
@media (max-width: 720px) {
  .form-chat .intake.iz { padding: 14px; border-radius: 0; box-shadow: none; }
  .iz-prog small { display: none; } .iz-prog li.on small { display: block; }
  .iz-tiles { grid-template-columns: 1fr 1fr; gap: 8px; } .iz-tiles.small { grid-template-columns: 1fr 1fr; }
  .iz-tile { padding: 10px; } .iz-tile small { display: none; } .iz-tile b { font-size: 13.5px; }
  .iz-nav { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .iz-nav .btn { padding-left: 14px; padding-right: 14px; }
}

/* ---------- v1.6.6: question flags and Question health ---------- */
.qz-flag { margin-top: 6px; border: 0; background: none; color: var(--muted); font: 500 12.5px var(--font); text-decoration: underline; cursor: pointer; padding: 0; }
.qz-flag.done { text-decoration: none; color: var(--ok); display: block; }
.qf { display: grid; gap: 10px; } .qf-opts { display: grid; gap: 6px; } .qf-o { display: flex; gap: 8px; align-items: center; font-size: 14.5px; } .qf textarea { width: 100%; }
.qh { gap: 14px; }
.qh-intro { background: var(--panel); border-radius: 16px; padding: 16px; display: grid; gap: 12px; max-width: 900px; width: 100%; }
.qh-intro p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.qh-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qh-kpis div { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; } .qh-kpis b { font-family: var(--display); font-size: 1.5rem; font-weight: 700; display: block; } .qh-kpis small { color: var(--muted); }
.qh-kpis .warn { background: #FFF1E0; }
.qh-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; max-width: 900px; width: 100%; } .qh-filters select { max-width: 280px; }
.qh-card { background: var(--panel); border: 0; border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; max-width: 900px; width: 100%; }
.qh-card.retired { opacity: .6; }
.qh-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .qh-id { font-weight: 700; color: var(--brand-2); letter-spacing: .03em; }
.qh-q { font-weight: 600; } .qh-q p { margin: 0; }
.qh-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.qh-opts li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--panel-2); overflow: hidden; font-size: 14px; }
.qh-opts li.key { outline: 1.5px solid var(--ok); } .qh-opts li.key .qh-o::before { content: '✓ '; color: var(--ok); font-weight: 700; }
.qh-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(31,120,184,.12); z-index: 0; } .qh-o, .qh-opts small { position: relative; z-index: 1; } .qh-o p { margin: 0; display: inline; }
.qh-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.qh-tag { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--panel-2); color: var(--ink-2); }
.qh-tag.flag, .qh-tag.hard { background: #FDE7E2; color: var(--no); } .qh-tag.dead, .qh-tag.easy { background: #FFF1E0; color: #8A5A0B; } .qh-tag.edited { background: var(--brand-3); color: var(--brand-2); }
.qh-flags { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.qh-act { display: flex; justify-content: flex-end; }
.qe { display: grid; gap: 10px; } .qe label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 600; } .qe textarea, .qe input:not([type]) { width: 100%; }
.qe-opts { display: grid; gap: 6px; } .qe-opts > span { font-size: 13.5px; font-weight: 600; }
.qe-o { display: flex !important; grid-template-columns: none; flex-direction: row; gap: 8px; align-items: center; } .qe-o input[type=radio] { flex: none; width: 18px; height: 18px; accent-color: var(--ok); }
.qe .consent { display: flex; flex-direction: row; font-weight: 400; }

/* ---------- v1.6.7: phones — no auto-zoom, no sideways drift; readable buttons on dark headers ---------- */
html, body { max-width: 100%; overflow-x: clip; overscroll-behavior-x: none; touch-action: manipulation; }
img, svg, video, canvas, iframe, table { max-width: 100%; }
@media (max-width: 900px) {
  /* iPhones zoom into any field whose text is smaller than 16px; keep every field at 16px. */
  input, select, textarea, .fake-input { font-size: 16px !important; }
}
.mentor-sheet header .btn.ghost, .rep-bar .btn.ghost, .realestate .btn.ghost { background: transparent; color: #fff; border: 0; }
.mentor-sheet header .btn.ghost:hover, .rep-bar .btn.ghost:hover, .realestate .btn.ghost:hover { background: rgba(255,255,255,.12); ; }

/* ---------- v1.6.8: long answers and drop-downs read in full, everywhere ---------- */
/* Pills keep their pill shape on one line and become rounded boxes when the text wraps (never ovals). */
.chip, .iz-chip, .pk-tag, .btn, .qh-tag, .pm-usp span, .hb-found li { border-radius: 20px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.chip, .iz-chip { line-height: 1.3; }
/* Answer choices at the foot of lessons, consultations and audits: wrap, never squash. */
.foot .chips { flex-wrap: wrap !important; overflow: visible !important; max-height: 46dvh; overflow-y: auto !important; }
.foot .chip { flex: 0 1 auto; min-width: 0; }
.foot .chips.stack { flex-direction: column; align-items: stretch; flex-wrap: nowrap !important; }
.foot .chips.stack .chip { width: 100%; text-align: left; padding: 11px 16px; border-radius: 16px; }
@media (min-width: 901px) { .foot .chips.stack { flex-direction: row; flex-wrap: wrap !important; align-items: center; justify-content: flex-end; } .foot .chips.stack .chip { width: auto; max-width: min(100%, 520px); } }
/* Drop-downs: a wrapping face shows the whole choice; the real select sits invisibly on top. */
.sel-wrap { position: relative; display: block; width: 100%; min-width: 0; }
.sel-face { display: block; width: 100%; min-height: 46px; border: 0; border-radius: 12px; padding: 11px 40px 11px 12px; background: var(--panel) no-repeat right 12px center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317707F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); font-weight: 500; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; text-align: left; color: var(--ink); }
.sel-wrap > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.sel-wrap.focus .sel-face { box-shadow: inset 0 0 0 2px var(--brand-2); }
.sel-wrap.dis .sel-face { background-color: var(--panel-2); color: var(--ink-2); }
.sel-wrap.dis > select { cursor: default; }
.m-row .sel-face { padding: 8px 36px 8px 10px; min-height: 40px; }
.calc-row .sel-wrap { grid-column: 2 / 4; } .calc-row .sel-face { padding: 6px 32px 6px 8px; min-height: 36px; }
.dz-row .sel-wrap { width: auto; } .dz-row .sel-face { padding: 6px 32px 6px 8px; min-height: 36px; }
.qh-filters .sel-wrap { max-width: 280px; }
@media (max-width: 820px) { .calc-row .sel-wrap { grid-column: 1 / -1; } }
@media print { .sel-wrap > select { display: none; } }
/* Chat headers: the title may use two lines instead of being cut off. */
.ch-t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; overflow: hidden; }
/* Reference chips show the whole citation (wrapping) instead of cutting it off. */
.ref-tag { white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; border-radius: 10px; text-align: left; line-height: 1.35; padding: 3px 9px; }
/* Phones: rows of filter chips and step pills wrap onto a second line instead of running off the edge. */
@media (max-width: 900px) {
  .rs-filter, .steps { flex-wrap: wrap !important; overflow: visible !important; white-space: normal; }
  .steps > span, .step-b { flex: none; }
}
.btn { border-radius: 24px; }
@media (min-width: 901px) { .hero-check { border-radius: 999px; } }

/* ---------- v1.6.9: phone top bar — "Sign out" in words; the open menu shows ✕ ---------- */
@media (max-width: 900px) {
  .tb-right .btn.sm.tb-out { display: inline-flex; width: auto; height: auto; padding: 8px 14px; border-radius: 999px; font-size: 14.5px; gap: 0; }
  .tb-right .tb-out svg { display: none; }
  .tb-right .tb-out .tb-lbl { display: inline; }
  .tb-right { gap: 8px; }
  .tb-burger[aria-expanded="true"] { color: var(--ink); }
  .topbar.open { box-shadow: 0 14px 30px -18px rgba(6,18,42,.35); }
}
@media (max-width: 380px) { .tb-brand b { font-size: 1.1rem; } .tb-right .btn.sm.tb-out { padding: 7px 11px; font-size: 13.5px; } }
/* Signed in on the home page: the bottom bar already has "Rooms", so the top bar keeps only Sign out, profile and menu. */
@media (max-width: 600px) { .tb-right .tb-rooms { display: none !important; } }
/* Rooms: "Sign out" in words in the dark bar. */
.bar-out { border: 0; background: transparent; color: #fff; border-radius: 999px; padding: 6px 12px; font: 600 13.5px var(--font); cursor: pointer; white-space: nowrap; }
.bar-out:hover { background: rgba(255,255,255,.12); ; }

/* ---------- v1.7.0: Sleep-onset check ---------- */
.hero-ctas { flex: none; display: grid; gap: 10px; }
.hero-sleep { background: #1E2A4A; color: #fff; border: 0; }
.hero-sleep:hover { background: #2A3A63; color: #fff; }
.hero-sleep svg { color: #F2D27A; }
.sleepc .hc-intro .eyebrow { display: inline-flex; gap: 6px; align-items: center; }
.sleepc .hc-intro h1 em { color: #2F4C8F; }
.sl-onset { display: flex; gap: 6px; align-items: center; font-weight: 600; color: #2F4C8F; margin: 4px 0; }
.sl-ref { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.sl-lib { background: var(--panel); border: 0; border-radius: 16px; padding: 14px 16px; margin: 14px 0; }
.sl-lib h3 { margin: 0 0 2px; } .sl-lib ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.sl-lib li b { display: block; font-size: 14.5px; } .sl-lib li small { color: var(--muted); font-size: 12.5px; } .sl-lib li p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.sl-admin { background: #EEF1FA; border-radius: 22px; padding: 20px; display: grid; gap: 10px; }
.sl-admin h2 { margin: 0; font-size: 1.5rem; }
.sl-draft { display: grid; gap: 10px; } .sl-changes { margin: 0; padding-left: 18px; font-size: 14px; }
.sleepc.preview { border: 0; border-radius: 18px; padding: 12px; background: var(--bg); }
@media (max-width: 900px) { .hero-ctas { width: 100%; } }
.hc-score .big-l { flex: none; }
.sl-cap { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--brand-2); }

/* ---------- v1.7.1: Research centre room ---------- */
:root { --room-research: #EEF3E6; }
.window-box.research { background: var(--room-research); }
.wb-free { margin-left: auto; font-size: 12px; font-weight: 500; letter-spacing: 0; background: #4E7A2E; color: #fff; border-radius: 999px; padding: 3px 10px; }
.windows.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1240px) { .windows.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .windows.four { grid-template-columns: 1fr; } .window-box .wb-top .wb-free { display: none; } }
.room-research .room-name .ic { color: #B9D99A; }
.rc { gap: 16px; }
.rc-hero { background: var(--panel); border-radius: 18px; padding: 18px 20px; max-width: 980px; width: 100%; }
.rc-hero h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 6px 0 8px; } .rc-hero h2 em { color: var(--brand-2); }
.rc-hero p { color: var(--ink-2); line-height: 1.55; margin: 0 0 12px; }
.rc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rc-kpis div { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; } .rc-kpis b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.5rem; } .rc-kpis small { color: var(--muted); }
.rc-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; max-width: 980px; width: 100%; }
.rc-use { background: var(--panel); border: 0; border-radius: 16px; padding: 14px; display: grid; gap: 6px; align-content: start; }
.rc-use-h { display: flex; gap: 10px; align-items: center; } .rc-use-h b { display: block; } .rc-use-h small { color: var(--muted); }
.rc-use p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.rc-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--brand-3); color: var(--brand-2); display: grid; place-items: center; } .rc-ic svg { width: 18px; height: 18px; }
.rc-where { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.rc-used { display: flex; gap: 10px; align-items: flex-start; } .rc-used b { display: block; font-size: 14.5px; } .rc-used small { font-size: 13px; color: var(--ink-2); }
.rc-used ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; } .rc-used.none { opacity: .55; }
.rs-uses { display: flex; gap: 6px; align-items: center; } .rs-uses svg { width: 14px; height: 14px; color: var(--brand-2); }
.rs-filter .chip svg { width: 14px; height: 14px; }
.cp-research { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .cp-research b { display: block; font-size: 14.5px; } .cp-research small { color: var(--muted); font-size: 12.5px; } .cp-research p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
/* Phone bottom bar now has six items. */
@media (max-width: 900px) { .mnav small { font-size: 10.5px; letter-spacing: 0; } .mn-i { min-width: 0; } }
@media (max-width: 900px) { .mnav { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-left: 2px; padding-right: 2px; } .mn-i small { white-space: nowrap; overflow: visible; } }

/* =================== v1.8.0 — Building Intelligence =================== */
.gate.bi { max-width: 1180px; }
/* Screen 1: need → fix */
.bi-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; min-height: calc(100dvh - 140px); padding: 28px 0 20px; }
.bi-copy h1 { font-family: var(--display); font-weight: 700; letter-spacing: -.025em; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.04; margin: 10px 0 14px; }
.bi-copy h1 em { color: var(--brand-2); }
.bi-lead { font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 0 0 18px; max-width: 520px; }
.bi-faces { display: flex; gap: 14px; margin: 0 0 20px; flex-wrap: wrap; }
.bi-faces figure { margin: 0; display: flex; gap: 8px; align-items: center; }
.bi-faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 0; background: var(--panel); }
.bi-faces figcaption { font-size: 13px; font-weight: 600; line-height: 1.15; } .bi-faces figcaption small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; }
.bi-ctas { display: flex; gap: 8px; flex-wrap: wrap; } .bi-ctas .btn { display: inline-flex; gap: 6px; align-items: center; }
.sim { background: var(--panel); border: 0; border-radius: 24px; padding: 18px; box-shadow: 0 30px 60px -36px rgba(6,18,42,.35); display: grid; gap: 10px; }
.sim-h { display: flex; justify-content: space-between; align-items: baseline; } .sim-h b { font-family: var(--display); font-weight: 700; font-size: 1.35rem; }
.sim-row { display: grid; grid-template-columns: 78px 1fr; gap: 8px; align-items: center; } .sim-lab { font-size: 12.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.sim-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sim-chip { border: 0; background: var(--panel); border-radius: 20px; padding: 6px 11px; font: 600 13px var(--font); cursor: pointer; color: var(--ink); }
.sim-chip.on { background: var(--brand-2); box-shadow: inset 0 0 0 2px var(--brand-2); color: #fff; }
.sim-chart svg { width: 100%; height: auto; display: block; }
.sim-chart text { font: 600 10.5px var(--font); fill: var(--muted); } .sim-chart text.zone { fill: rgba(15,30,38,.38); letter-spacing: 0; }
.sim-chart .b-ok { fill: #E6F4EC; } .sim-chart .b-mid { fill: #FFF3DC; } .sim-chart .b-bad { fill: #FDE6E1; }
.sim-chart path.now { fill: none; stroke: #C2412D; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: simdraw 1.6s ease forwards; }
.sim-chart path.now.dim { stroke: rgba(194,65,45,.35); stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.sim-chart path.fix { fill: none; stroke: #1F8A5B; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: simdraw 1.2s ease forwards; }
.sim-chart .dot { fill: var(--ink); }
@keyframes simdraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sim-chart path { animation: none !important; stroke-dashoffset: 0 !important; } }
.sim-read p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.sim-big { font-family: var(--display); font-weight: 700; font-size: 1.7rem; } .sim-big.stale { color: #C2412D; } .sim-big.stuffy { color: #B27310; } .sim-big.fresh { color: #1F8A5B; }
.sim-read > span { color: var(--muted); font-size: 13px; }
.sim-fix { justify-self: start; display: inline-flex; gap: 6px; align-items: center; }
.sim-after { display: grid; gap: 10px; }
.sim-win { background: #E6F4EC; border-radius: 14px; padding: 10px 12px; font-size: 14.5px; } .sim-win b { color: #1F6B47; font-size: 1.1rem; }
.sim-next { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .sim-next > span { flex-basis: 100%; font-weight: 600; font-size: 14px; }
.sim-note { color: var(--muted); font-size: 11.5px; }
/* Screen 2: the agents */
.bi-agents { padding: 30px 0 10px; display: grid; gap: 18px; }
.bi-ag-head h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 6px 0 6px; } .bi-ag-head h2 em { color: var(--brand-2); }
.bi-ag-head p { margin: 0; color: var(--ink-2); max-width: 720px; }
.bi-ag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bi-ag { background: var(--panel); border: 0; border-top: 0; border-radius: 18px; padding: 14px; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; }
.bi-ag img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; object-position: top; }
.bi-ag b { display: block; } .bi-role { color: var(--who); font-weight: 700; font-size: 12.5px; } .bi-ag p { margin: 6px 0 4px; font-size: 14px; line-height: 1.4; } .bi-ag .muted { font-size: 12px; line-height: 1.35; display: block; }
.bi-edge { display: flex; flex-wrap: wrap; gap: 8px; } .bi-edge span { display: inline-flex; gap: 6px; align-items: center; background: var(--brand-3); color: var(--brand); border-radius: 20px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; } .bi-edge svg { width: 14px; height: 14px; }
.bi-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .bi-stats div { background: var(--panel-2); border-radius: 14px; padding: 10px 12px; } .bi-stats b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.6rem; } .bi-stats small { color: var(--muted); }
.bi-links { display: flex; gap: 18px; flex-wrap: wrap; }
.bi-try { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bi-t { position: relative; display: grid; gap: 4px; align-content: start; text-decoration: none; color: var(--ink); background: var(--panel); border: 0; border-radius: 18px; padding: 14px; transition: transform .15s, box-shadow .15s; }
.bi-t:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(6,18,42,.4); }
.bi-t-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-3); color: var(--brand-2); margin-bottom: 4px; } .bi-t-ic svg { width: 20px; height: 20px; }
.bi-t b { font-size: 15.5px; } .bi-t small { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; } .bi-t-go { margin-top: 6px; font-weight: 700; color: var(--brand-2); font-size: 14px; }
.bi-t-detective { background: #1E2A4A; color: #fff; ; } .bi-t-detective small { color: rgba(255,255,255,.8); } .bi-t-detective .bi-t-go { color: #F2D27A; } .bi-t-detective .bi-t-ic { background: rgba(255,255,255,.12); color: #F2D27A; }
.bi-t-daily { background: #FFF4E2; ; } .bi-t-daily .bi-t-ic { background: #FFE2B0; color: #9A5B00; }
.bi-streak { justify-self: start; background: #F2A541; color: #3A2400; font-weight: 800; font-size: 12px; border-radius: 20px; padding: 3px 10px; }
.bi-rooms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bi-room { display: flex; gap: 8px; align-items: center; border: 0; background: var(--panel); border-radius: 14px; padding: 10px 12px; font: 600 14px var(--font); color: var(--ink); cursor: pointer; } .bi-room span { flex: 1; text-align: left; } .bi-room svg { width: 18px; height: 18px; color: var(--brand-2); }
.sr-sheet-in.plain { background: var(--bg); border-radius: 22px; padding: 24px clamp(14px, 3vw, 30px); }
@media (max-width: 1000px) { .bi-ag-grid, .bi-try { grid-template-columns: 1fr 1fr; } .bi-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .bi-hero { grid-template-columns: 1fr; min-height: 0; gap: 18px; padding-top: 14px; }
  .bi-copy h1 { font-size: 34px; } .bi-lead { font-size: 16px; }
  .bi-faces { gap: 10px; } .bi-faces figcaption { display: none; } .bi-faces img { width: 46px; height: 46px; }
  .bi-ctas .btn { flex: 1 1 auto; justify-content: center; }
  .sim { padding: 14px; border-radius: 20px; } .sim-row { grid-template-columns: 1fr; gap: 4px; }
  .bi-ag-grid { grid-template-columns: 1fr; } .bi-try { grid-template-columns: 1fr 1fr; gap: 8px; } .bi-t small { font-size: 12.5px; }
  .bi-stats { grid-template-columns: 1fr 1fr 1fr; } .bi-stats b { font-size: 1.3rem; } .bi-rooms { grid-template-columns: 1fr 1fr; }
  .sr-sheet-in.plain { border-radius: 0; min-height: 100dvh; padding-top: 56px; }
}
@media (max-width: 420px) { .bi-try { grid-template-columns: 1fr; } }

/* Daily IEQ */
.dl { max-width: 680px; margin: 18px auto; display: grid; gap: 14px; }
.dl-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; background: var(--panel); border: 0; border-radius: 20px; padding: 14px 16px; }
.dl-head > .btn, .dl-head > small { grid-column: 1 / -1; justify-self: start; }
.dl-flame b { font-family: var(--display); font-weight: 700; font-size: 2.2rem; line-height: 1; display: block; } .dl-flame small { color: var(--muted); font-weight: 600; }
.dl-goal small { color: var(--ink-2); font-size: 13px; }
.dl-track { height: 10px; background: var(--panel-2); border-radius: 10px; overflow: hidden; margin-bottom: 4px; } .dl-track span { display: block; height: 100%; background: linear-gradient(90deg, #F2A541, #E4572E); border-radius: 10px; }
.dl-cal { display: grid; grid-template-columns: repeat(7, 14px); gap: 4px; margin-top: 8px; } .dl-cal i { width: 14px; height: 14px; border-radius: 4px; background: var(--panel-2); } .dl-cal i.on { background: #F2A541; } .dl-cal i.today { outline: 2px solid var(--brand-2); }
.dl-card { background: var(--panel); border: 0; border-radius: 22px; padding: 18px; display: grid; gap: 14px; }
.dl-theme b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin-top: 2px; }
.dl-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .dl-bar i { height: 8px; border-radius: 8px; background: var(--panel-2); } .dl-bar i.done { background: #1F8A5B; } .dl-bar i.on { background: var(--brand-2); }
.dl-q small { color: var(--muted); font-weight: 700; } .dl-q h3 { margin: 4px 0 0; font-size: 1.2rem; line-height: 1.35; }
.dl-opts { display: grid; gap: 8px; }
.dl-opt { text-align: left; border: 0;  background: var(--panel); border-radius: 16px; padding: 13px 14px; font: 600 15.5px var(--font); color: var(--ink); cursor: pointer; }
.dl-opt:hover:not(:disabled) { ; }
.dl-opt.right { box-shadow: inset 0 0 0 2px #1F8A5B; background: #E6F4EC; } .dl-opt.wrong { box-shadow: inset 0 0 0 2px #C2412D; background: #FDE6E1; }
.dl-fb { display: none; border-radius: 14px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; } .dl-fb.show { display: block; } .dl-fb.ok { background: #E6F4EC; } .dl-fb.no { background: #FDE6E1; } .dl-fb p { display: inline; margin: 0; }
.dl-ref { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.dl-done, .dl-rest { text-align: center; justify-items: center; }
.dl-score { font-family: var(--display); font-size: 3rem; font-weight: 700; color: var(--brand-2); line-height: 1; }
.dl-fire { font-weight: 800; font-size: 1.1rem; color: #C2410C; }
.dl-reward { background: #FFF4E2; border: 0; border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; text-align: left; width: 100%; }
.dl-code { display: flex; gap: 10px; align-items: center; font: 800 1.3rem ui-monospace, Menlo, monospace; letter-spacing: .05em; }
.dl-a2hs { display: flex; gap: 10px; align-items: center; background: var(--brand-3); border-radius: 14px; padding: 10px 12px; font-size: 13.5px; } .dl-a2hs svg { flex: none; width: 18px; height: 18px; color: var(--brand-2); }
.daily-strip { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); background: linear-gradient(90deg, #FFF4E2, #FFE9C7); border: 0; border-radius: 18px; padding: 12px 16px; margin: 0 0 14px; }
.daily-strip .ds-flame b { font-family: var(--display); font-weight: 700; font-size: 1.6rem; } .daily-strip > div { flex: 1; } .daily-strip > div b { display: block; } .daily-strip small { color: var(--ink-2); }
.daily-strip .ds-go { font-weight: 800; color: #9A5B00; white-space: nowrap; } .daily-strip.done { background: var(--panel); }
.lobby-faces { display: flex; margin-top: 10px; } .lobby-faces img { width: 38px; height: 38px; border-radius: 50%; border: 0; margin-right: -8px; object-fit: cover; background: var(--panel); }

/* Building Detective */
.dt { max-width: 920px; margin: 14px auto; display: grid; gap: 14px; }
.dt-intro h1 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 6px 0; } .dt-intro h1 em { color: var(--brand-2); } .dt-intro p { margin: 0; color: var(--ink-2); } .dt-intro .eyebrow { display: inline-flex; gap: 6px; align-items: center; }
.dt-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.dt-board { display: grid; gap: 12px; }
.dt-case { background: #1E2A4A; color: #fff; border-radius: 20px; padding: 16px 18px; } .dt-case h2 { margin: 2px 0 6px; font-family: var(--display); font-weight: 700; } .dt-case p { margin: 0; color: rgba(255,255,255,.88); line-height: 1.5; } .dt-set { color: #F2D27A; font-weight: 500; letter-spacing: 0; font-size: 11.5px; }
.dt-left { font-weight: 600; } .dt-left b { color: #C2410C; font-size: 1.2rem; }
.dt-clues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dt-clue { text-align: left; border: 0; background: var(--panel-2); border-radius: 16px; padding: 12px; cursor: pointer; font: inherit; color: var(--ink); min-height: 96px; display: grid; gap: 6px; align-content: start; }
.dt-clue.open { border-style: solid; ; background: var(--panel); cursor: default; } .dt-clue.locked { opacity: .4; cursor: not-allowed; } .dt-clue.key { box-shadow: 0 0 0 3px #F2A541; }
.dt-clue p { margin: 0; font-size: 14px; line-height: 1.45; }
.dt-who { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; } .dt-who img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.dt-tap { color: var(--muted); font-size: 12.5px; }
.dt-q { margin: 6px 0 0; } .dt-suss { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dt-sus { text-align: left; border: 0; background: var(--panel); border-radius: 14px; padding: 12px; font: 600 14.5px var(--font); color: var(--ink); cursor: pointer; }
.dt-sus.on { box-shadow: inset 0 0 0 2px var(--brand-2); background: var(--brand-3); } .dt-sus.right { box-shadow: inset 0 0 0 2px #1F8A5B; background: #E6F4EC; } .dt-sus.wrong { box-shadow: inset 0 0 0 2px #C2412D; background: #FDE6E1; }
.dt-result { display: grid; gap: 12px; }
.dt-verdict { border-radius: 16px; padding: 12px 14px; } .dt-verdict.ok { background: #E6F4EC; } .dt-verdict.no { background: #FDE6E1; } .dt-verdict b { font-size: 1.1rem; }
.dt-sol { background: var(--panel); border: 0; border-radius: 18px; padding: 14px 16px; } .dt-sol h3 { margin: 0 0 6px; } .dt-sol p { margin: 6px 0; line-height: 1.5; }
.dt-four { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; } .dt-four > div { display: flex; gap: 8px; align-items: flex-start; border-left: 0; padding-left: 8px; } .dt-four img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .dt-four b { display: block; font-size: 13.5px; } .dt-four small { font-size: 13px; color: var(--ink-2); }
.dt-ab { display: grid; gap: 10px; } .dt-ab h2 { font-family: var(--display); font-weight: 700; margin: 4px 0; } .dt-ab h2 em { color: var(--brand-2); }
.dt-ab-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dt-ab-col { border-radius: 18px; padding: 14px; border: 0; background: var(--panel); } .dt-ab-col.method { border: 0; } .dt-ab-col > small { display: block; color: var(--muted); margin-bottom: 6px; }
.dt-ab-txt { font-size: 14px; line-height: 1.55; max-height: 460px; overflow-y: auto; }
.dt-ab-admin { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .dt-clues { grid-template-columns: 1fr 1fr; } .dt-suss, .dt-four, .dt-ab-cols { grid-template-columns: 1fr; } }

/* LinkedIn-style profile */
.li .li-top { background: var(--panel); border: 0; border-radius: 20px; overflow: hidden; margin-top: 10px; }
.li-cover { height: 150px; background: linear-gradient(120deg, #123F63, #1F78B8 55%, #F2A541); position: relative; }
.li-cover::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 60px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 60px); }
.li-id { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; padding: 0 20px 14px; align-items: end; }
.li-face { position: relative; margin-top: -64px; }
.li-face .pf-photo { width: 132px; height: 132px; border-radius: 50%; border: 0; object-fit: cover; background: var(--brand-2); color: #fff; display: grid; place-items: center; font-size: 2.6rem; font-weight: 700; }
.li-cam { position: absolute; right: 6px; bottom: 6px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--panel); box-shadow: 0 2px 8px rgba(0,0,0,.2); display: grid; place-items: center; cursor: pointer; color: var(--brand-2); }
.li-name h1 { font-family: var(--display); font-weight: 700; font-size: 1.9rem; margin: 10px 0 2px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.li-badge { font: 500 12px var(--font); letter-spacing: 0; background: var(--brand-3); color: var(--brand-2); border-radius: 20px; padding: 3px 10px; }
.li-head { margin: 0 0 2px; font-size: 16px; color: var(--ink); }
.li-acts { display: flex; gap: 8px; }
.li-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.li-stat { padding: 12px 20px; border-right: 1px solid var(--line); } .li-stat:last-child { border-right: 0; } .li-stat b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.5rem; } .li-stat small { color: var(--muted); }
.li-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.li-main, .li-side { display: grid; gap: 14px; }
.li-sec { background: var(--panel); border: 0; border-radius: 18px; padding: 16px 18px; display: grid; gap: 10px; } .li-sec h3 { margin: 0; font-size: 1.1rem; }
.li-learn { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; height: 90px; align-items: end; }
.li-mod { position: relative; height: 100%; background: var(--panel-2); border-radius: 8px; display: flex; align-items: flex-end; overflow: hidden; text-decoration: none; }
.li-mod i { display: block; width: 100%; border-radius: 8px; opacity: .85; } .li-mod span { position: absolute; top: 4px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-2); z-index: 1; }
.li-cert { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); background: #FFF4E2; border-radius: 14px; padding: 10px 12px; } .li-cert div { flex: 1; } .li-cert b { display: block; } .li-cert small { color: var(--ink-2); }
.li-activity { display: grid; gap: 8px; } .li-act { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); } .li-act b { display: block; font-size: 14.5px; } .li-act small { color: var(--muted); }
@media (max-width: 900px) {
  .li-cover { height: 100px; } .li-id { grid-template-columns: 1fr; gap: 6px; padding: 0 16px 12px; }
  .li-face { margin-top: -52px; } .li-face .pf-photo { width: 104px; height: 104px; font-size: 2rem; }
  .li-name h1 { font-size: 1.5rem; margin-top: 2px; } .li-stats { grid-template-columns: 1fr 1fr; } .li-stat { border-bottom: 1px solid var(--line); padding: 10px 16px; } .li-stat:nth-child(2) { border-right: 0; }
  .li-grid { grid-template-columns: 1fr; } .li-learn { height: 70px; gap: 4px; }
}
.auth-form .consent.stay { font-weight: 500; font-size: 13px; color: var(--ink-2); }
/* Phones: the landing stays short — the demo first, then the agents in a compact grid. */
@media (max-width: 900px) {
  .bi-hero .bi-ctas { display: none; }
  .bi-faces { margin-bottom: 4px; }
  .sim-row { grid-template-columns: 70px 1fr; align-items: center; } .sim-chip small { display: none; } .sim-chip { padding: 5px 10px; font-size: 12.5px; }
  .sim-h b { font-size: 1.15rem; }
  .bi-agents { gap: 12px; padding-top: 18px; }
  .bi-ag-head p { font-size: 14.5px; }
  .bi-ag-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bi-ag { grid-template-columns: 1fr; padding: 10px; gap: 6px; } .bi-ag img { width: 52px; height: 52px; border-radius: 14px; }
  .bi-ag p { font-size: 13px; margin: 2px 0 0; } .bi-ag .muted { display: none; }
  .bi-edge { gap: 6px; } .bi-edge span { font-size: 12px; padding: 4px 9px; }
  .bi-try { grid-template-columns: 1fr 1fr !important; } .bi-t { padding: 12px; } .bi-t small { display: none; } .bi-t-daily .bi-streak { font-size: 11px; }
  .bi-rooms { display: none; }
}

/* =================== v1.8.1 — landing polish =================== */
.bi-offer { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; background: #1E2A4A; color: #fff; border-radius: 14px; padding: 9px 14px; margin: 14px 0 0; font-size: 14px; text-align: center; }
.bi-offer[hidden] { display: none; }
.bi-offer-tag { background: #F2A541; color: #3A2400; font-weight: 500; font-size: 12px; letter-spacing: 0; border-radius: 20px; padding: 3px 10px; }
.bi-offer b { color: #F2D27A; letter-spacing: .04em; }
.bi-offer-go { border: 0; background: none; color: #fff; font: 700 14px var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bi-hero { min-height: calc(100dvh - 170px); }
.bi-ctas .btn.lg { padding: 14px 24px; }
.bi-assure { display: flex; gap: 6px; align-items: center; margin-top: 12px; color: var(--muted); font-size: 13px; } .bi-assure svg { width: 14px; height: 14px; color: #1F8A5B; }
.demo { gap: 12px; }
.demo-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.demo-tabs { display: flex; gap: 4px; background: var(--panel-2); border-radius: 20px; padding: 3px; }
.demo-tab { border: 0; background: none; border-radius: 16px; padding: 6px 12px; font: 600 13px var(--font); color: var(--ink-2); cursor: pointer; }
.demo-tab.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(6,18,42,.12); }
.demo-body { display: grid; gap: 10px; min-height: 470px; align-content: start; }
.demo .sim-h small { color: var(--muted); font-weight: 600; }
.demo-dots { display: flex; justify-content: center; gap: 6px; } .demo-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); } .demo-dots i.on { background: var(--brand-2); width: 18px; border-radius: 6px; }
.sim-chart .b-ok { fill: #E6F4EC; } .sim-chart .b-mid { fill: #FFF3DC; } .sim-chart .b-bad { fill: #FDE6E1; }
.sim-big.ok { color: #1F8A5B; } .sim-big.mid { color: #B27310; } .sim-big.bad { color: #C2412D; }
.sim-next { display: flex; gap: 8px; flex-wrap: wrap; }
/* Promise grid: six provable promises, elegant and scannable */
.bi-promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--panel); border: 0; border-radius: 20px; overflow: hidden; }
.bi-pr { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bi-pr:nth-child(3n) { border-right: 0; } .bi-pr:nth-last-child(-n+3) { border-bottom: 0; }
.bi-pr-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-3); color: var(--brand-2); } .bi-pr-ic svg { width: 18px; height: 18px; }
.bi-pr b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; margin-bottom: 2px; }
.bi-pr small { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; display: block; }
.bi-proof { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .bi-proof .bi-stats { flex: 1; grid-template-columns: repeat(4, 1fr); } .bi-proof > .btn { display: inline-flex; gap: 6px; align-items: center; }
.bi-ag .bi-base { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.bi-ag .bi-role { color: var(--who); font-weight: 700; font-size: 12.5px; }
/* Daily IEQ, highlighted, with a phone preview; then the two free checks */
.bi-habit { display: grid; gap: 14px; padding: 18px 0 8px; }
.bi-daily { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; background: linear-gradient(135deg, #FFF4E2 0%, #FFE6BF 100%); border: 0; border-radius: 26px; padding: 26px 30px; overflow: hidden; }
.bi-badge { display: inline-block; background: #F2A541; color: #3A2400; font-weight: 800; font-size: 12px; letter-spacing: .04em; border-radius: 20px; padding: 4px 12px; }
.bi-daily h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.12; margin: 10px 0 8px; } .bi-daily h2 em { color: #B5520E; }
.bi-daily p { margin: 0 0 14px; color: #4A3A22; line-height: 1.55; max-width: 520px; }
.bi-daily-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .bi-daily-acts small { color: #6B5530; }
.bi-phone { justify-self: center; width: 230px; height: 330px; border-radius: 34px; background: #14202B; padding: 10px; box-shadow: 0 30px 50px -30px rgba(60,30,0,.55); transform: rotate(2.5deg); }
.bi-phone-in { height: 100%; border-radius: 26px; background: var(--bg); padding: 16px 14px; display: grid; gap: 8px; align-content: start; overflow: hidden; }
.bp-top { display: grid; grid-template-columns: auto 1fr; gap: 0 6px; align-items: center; } .bp-top b { font-size: 1.1rem; } .bp-top small { color: var(--muted); font-size: 11px; } .bp-track { grid-column: 1 / -1; height: 6px; background: var(--panel-2); border-radius: 6px; overflow: hidden; margin-top: 4px; } .bp-track i { display: block; height: 100%; background: linear-gradient(90deg, #F2A541, #E4572E); }
.bp-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; } .bp-bar i { height: 5px; border-radius: 5px; background: var(--panel-2); } .bp-bar i.done { background: #1F8A5B; }
.bp-n { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.bp-q { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bp-opt { border: 0;  border-radius: 10px; padding: 6px 8px; font-size: 11.5px; font-weight: 600; background: var(--panel); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bp-opt.right { box-shadow: inset 0 0 0 2px #1F8A5B; background: #E6F4EC; }
.bi-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bi-check { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); background: var(--panel); border: 0; border-radius: 18px; padding: 14px 16px; transition: transform .15s, box-shadow .15s; }
.bi-check:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(6,18,42,.4); }
.bi-check > div { flex: 1; } .bi-check b { display: block; } .bi-check small { color: var(--ink-2); }
.bi-ck-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-3); color: var(--brand-2); } .bi-ck-ic svg { width: 20px; height: 20px; }
.bi-ck-go { font-size: 1.4rem; color: var(--brand-2); }
@media (max-width: 1000px) { .bi-promise { grid-template-columns: 1fr 1fr; } .bi-pr:nth-child(3n) { border-right: 1px solid var(--line); } .bi-pr:nth-child(2n) { border-right: 0; } .bi-pr:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } .bi-pr:nth-last-child(-n+2) { border-bottom: 0; } }
@media (max-width: 900px) {
  .bi-offer { font-size: 13px; margin-top: 10px; }
  .bi-hero .bi-ctas { display: flex; } .bi-ctas .btn.lg { padding: 12px 16px; flex: 1 1 auto; }
  .demo-tabs { width: 100%; } .demo-tab { flex: 1; padding: 6px 4px; font-size: 12px; }
  .demo-body { min-height: 0; }
  .bi-promise { grid-template-columns: 1fr; } .bi-pr { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 12px 14px; } .bi-pr:last-child { border-bottom: 0 !important; }
  .bi-proof .bi-stats { grid-template-columns: 1fr 1fr; } .bi-proof > .btn { width: 100%; justify-content: center; }
  .bi-daily { grid-template-columns: 1fr; padding: 20px; } .bi-phone { display: none; }
  .bi-checks { grid-template-columns: 1fr; }
  .bi-ag .bi-base { display: none; }
}
.bi-faces { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 14px; }
.bi-faces figcaption { font-size: 12.5px; white-space: nowrap; }
.bi-proof .bi-stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .bi-faces { grid-template-columns: repeat(4, auto); }
  .bi-promise { grid-template-columns: 1fr 1fr; } .bi-pr { flex-direction: column; gap: 6px; padding: 12px; border-right: 1px solid var(--line) !important; }
  .bi-pr:nth-child(2n) { border-right: 0 !important; } .bi-pr:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .bi-pr small { display: none; } .bi-pr b { font-size: 1rem; } .bi-pr-ic { width: 30px; height: 30px; }
  .bi-proof .bi-stats { grid-template-columns: repeat(3, 1fr); } .bi-stats div { padding: 8px 10px; } .bi-stats small { font-size: 11.5px; line-height: 1.25; display: block; }
  .bi-ag-head p { display: none; }
  .bi-lead { font-size: 15.5px; }
}
.sim-lab { white-space: nowrap; }
@media (max-width: 900px) { .daily-strip { padding: 10px 12px; gap: 10px; } .daily-strip small { font-size: 12.5px; line-height: 1.3; display: block; } .daily-strip .ds-go { font-size: 13.5px; } }
.dl-goal small { display: block; }

/* ---------- v1.8.2: Daily IEQ room card with a FREE ribbon, Research strip, learning path ---------- */
.window-box.daily { background: linear-gradient(160deg, #FFF3E3, #FFE7CC); }
.window-box.daily::after { background: #FFD3A1; }
.window-box.daily .wb-top { color: #C2410C; }
.window-box > .wb-ribbon { position: absolute; z-index: 3; top: 20px; right: -42px; width: 160px; transform: rotate(45deg); text-align: center;
  background: #4E7A2E; color: #fff; font: 800 11.5px var(--font); letter-spacing: .16em; text-transform: uppercase; padding: 6px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.18); pointer-events: none; }
.wb-live { font-weight: 700; color: #9A3412; font-size: 14.5px; }
.research-strip { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); background: linear-gradient(90deg, #EEF4E8, #E2EDD8); border: 0; border-radius: 18px; padding: 12px 16px; margin: 0 0 14px; }
.research-strip > div { flex: 1; min-width: 0; } .research-strip > div > b { display: flex; gap: 8px; align-items: center; } .research-strip small { color: var(--ink-2); display: block; }
.research-strip .rs-ic { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #4E7A2E; flex: none; }
.research-strip .rs-ic svg { width: 20px; height: 20px; }
.research-strip .wb-free { margin: 0; font-size: 10px; padding: 2px 8px; }
.research-strip .ds-go { font-weight: 800; color: #3F6A22; white-space: nowrap; }
@media (max-width: 900px) {
  .window-box > .wb-ribbon { top: 12px; right: -48px; width: 150px; font-size: 10px; padding: 4px 0; }
  .window-box .wb-live { grid-column: 2; font-size: 13px; }
  .research-strip { padding: 10px 12px; gap: 10px; } .research-strip small { font-size: 12.5px; line-height: 1.3; } .research-strip .ds-go { font-size: 13.5px; }
}

/* Daily IEQ page */
.dl { max-width: 720px; }
.dl-head { grid-template-columns: auto auto 1fr; gap: 12px 22px; align-items: center; }
.dl-stat { display: grid; justify-items: center; gap: 4px; }
.dl-ring { position: relative; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(#F2A541 calc(var(--p, 0) * 1%), var(--panel-2) 0); display: grid; place-content: center; text-align: center; }
.dl-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--panel); }
.dl-ring > * { position: relative; } .dl-ring b { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; } .dl-ring small { font-size: 11px; color: var(--muted); font-weight: 700; }
.dl-ring.full { background: conic-gradient(#1F8A5B 100%, #1F8A5B 0); }
.dl-ring-l { font-size: 12px; color: var(--muted); font-weight: 700; }
.dl-goal { display: grid; gap: 6px; min-width: 0; }
.dl-goal .dl-cal { margin-top: 2px; }
.dl-goalsel { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; color: var(--ink-2); } .dl-goalsel .sel-wrap, .dl-goalsel select { flex: 1; min-width: 0; max-width: 240px; }
.dl-goal > .btn { justify-self: start; }
.dl-today { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.dl-today h2 { font-family: var(--display); font-weight: 700; margin: 2px 0; font-size: 1.45rem; }
.dl-today.done { justify-content: flex-start; background: #F1F8F3; box-shadow: inset 0 0 0 2px #CDE7D6; flex-wrap: wrap; }
.dl-today.done > div:nth-child(2) { flex: 1; min-width: 200px; } .dl-today.done b { display: block; font-size: 1.05rem; } .dl-today.done small { color: var(--ink-2); }
.dl-tick { width: 44px; height: 44px; border-radius: 50%; background: #1F8A5B; color: #fff; display: grid; place-items: center; flex: none; } .dl-tick svg { width: 22px; height: 22px; }
.dl-path h2 { font-family: var(--display); font-weight: 700; margin: 2px 0 4px; font-size: 1.6rem; } .dl-path h2 em { font-style: italic; color: var(--brand-2); }
.dl-path > div > p { margin: 0; }
.dl-rec { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; background: var(--panel-2); border-left: 0; border-radius: 16px; padding: 12px 14px; }
.dl-rec small { font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); } .dl-rec b { display: block; font-size: 1.1rem; } .dl-rec p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.lu-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--u); color: #fff; display: grid; place-items: center; flex: none; } .lu-ic svg { width: 22px; height: 22px; }
.dl-miss { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; background: #FDF0EC; border-radius: 16px; padding: 12px 14px; font: inherit; color: var(--ink); cursor: pointer; }
.dl-miss > svg { width: 22px; height: 22px; color: #C2412D; flex: none; } .dl-miss > span:nth-child(2) { flex: 1; } .dl-miss b, .dl-miss small { display: block; } .dl-miss small { color: var(--ink-2); }
.dl-units { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lu { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; border: 0; background: var(--panel); border-radius: 16px; padding: 10px 12px; font: inherit; color: var(--ink); cursor: pointer; }
.lu:hover { ; }
.lu b { display: block; font-size: 14.5px; } .lu small { color: var(--muted); font-size: 12.5px; }
.lu-track { height: 6px; background: var(--panel-2); border-radius: 6px; overflow: hidden; margin-top: 5px; } .lu-track span { display: block; height: 100%; background: var(--u); border-radius: 6px; }
.lu-go { font-weight: 800; color: var(--brand-2); font-size: 1.1rem; }
.dl-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.lx-top { display: flex; gap: 12px; align-items: center; }
.lx-bar { flex: 1; height: 12px; background: var(--panel-2); border-radius: 12px; overflow: hidden; } .lx-bar span { display: block; height: 100%; width: 0; background: #1F8A5B; border-radius: 12px; transition: width .35s ease; }
.lx-xp { color: #B36B00; white-space: nowrap; font-size: 14px; }
.lx-title { color: var(--muted); font-weight: 700; margin-top: -6px; }
.lx-body { display: grid; gap: 12px; }
.dl-q h3 { margin: 4px 0 2px; }
.dl-opt { display: flex; gap: 12px; align-items: center; }
.dl-opt kbd { flex: none; width: 24px; height: 24px; border: 0; border-radius: 7px; display: grid; place-items: center; font: 700 12px var(--font); color: var(--muted); background: var(--panel-2); }
.dl-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.dl-sum > div { background: var(--panel-2); border-radius: 14px; padding: 10px 6px; } .dl-sum b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.4rem; } .dl-sum small { color: var(--muted); font-size: 12px; }
.dl-done .chips { justify-content: center; }
.dl-admin { background: var(--panel); border: 0; border-radius: 18px; padding: 12px 16px; }
.dl-admin summary { cursor: pointer; font-weight: 800; display: flex; gap: 6px; align-items: center; } .dl-admin summary svg { width: 18px; height: 18px; }
.dl-admin-body { display: grid; gap: 10px; margin-top: 10px; font-size: 14px; }
.dl-worst, .dl-packs { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 6px; } .dl-worst small { color: var(--muted); }
.dl-packs li { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.dl-draft { border: 0; border-radius: 16px; padding: 12px 14px; display: grid; gap: 10px; }
.dl-pack ol { padding-left: 20px; margin: 4px 0 0; display: grid; gap: 8px; } .dl-pack li small { display: block; }
@media (max-width: 900px) {
  .dl-head { grid-template-columns: auto auto; justify-content: start; }
  .dl-head .dl-goal { grid-column: 1 / -1; }
  .dl-today { flex-direction: column; align-items: stretch; } .dl-today.done { flex-direction: row; align-items: center; }
  .dl-today > .btn { width: 100%; }
  .dl-rec { grid-template-columns: 44px minmax(0, 1fr); } .dl-rec > .btn { grid-column: 1 / -1; width: 100%; }
  .dl-units { grid-template-columns: minmax(0, 1fr); }
  .dl-opt kbd { display: none; }
  .dl-path h2 { font-size: 1.35rem; }
}
.dl-done p { margin: 0; }

/* ---------- v1.8.3: Myths and facts across India (tile map) ---------- */
.in { max-width: 1080px; margin: 18px auto; display: grid; gap: 18px; }
.in-intro h1 { font-family: var(--display); font-weight: 700; margin: 4px 0 6px; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15; } .in-intro h1 em { font-style: italic; color: var(--brand-2); }
.in-intro p { margin: 0; color: var(--ink-2); max-width: 760px; }
.in-grid { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 24px; align-items: start; }
.in-left { position: sticky; top: 86px; display: grid; gap: 10px; justify-items: start; background: var(--panel); border: 0; border-radius: 22px; padding: 16px; }
.in-map { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; width: 100%; max-width: 420px; }
.in-tile { aspect-ratio: 1; min-width: 0; border: 0; padding: 0; border-radius: 9px; cursor: pointer; font: 800 11.5px var(--font); letter-spacing: .02em;
  background: var(--panel-2); background: color-mix(in srgb, var(--rg) 18%, #fff); color: var(--rg); transition: transform .12s, background .12s; }
.in-tile:hover { background: color-mix(in srgb, var(--rg) 32%, #fff); }
.in-tile.on { background: var(--rg); color: #fff; transform: scale(1.12); box-shadow: 0 4px 12px rgba(0,0,0,.18); position: relative; z-index: 1; }
.in-map.compact { max-width: 300px; gap: 3px; margin: 0 auto; } .in-map.compact .in-tile { border-radius: 6px; font-size: 9.5px; }
.in-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.in-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--rg); margin-right: 5px; vertical-align: -1px; }
.in-panel { display: grid; gap: 12px; scroll-margin-top: 80px; }
.in-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .in-ph h2 { font-family: var(--display); font-weight: 700; margin: 0; font-size: 1.7rem; flex: 1 1 auto; }
.in-reg { background: var(--rg); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 0; border-radius: 999px; padding: 3px 10px; }
.in-score { color: var(--muted); font-weight: 700; }
.in-card { background: var(--panel); border: 0; border-radius: 18px; padding: 14px 16px; display: grid; gap: 8px; }
.in-card.open { ; }
.in-head { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; } .in-head b { font-size: 1.02rem; }
.in-tag { flex: none; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: 3px 9px; }
.in-claim { margin: 0; font-family: var(--display); font-style: italic; font-size: 1.06rem; line-height: 1.45; color: var(--ink); }
.in-body { display: grid; gap: 8px; }
.in-ask { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.in-guess { display: flex; flex-wrap: wrap; gap: 8px; }
.in-g { border: 0;  background: var(--panel); color: var(--ink); border-radius: 999px; padding: 8px 16px; font: 700 14px var(--font); cursor: pointer; }
.in-g:hover { ; }
.in-verdict b { display: inline-block; border-radius: 999px; padding: 3px 12px; color: #fff; font-size: 13px; letter-spacing: .03em; }
.in-verdict.fact b { background: #1F8A5B; } .in-verdict.myth b { background: #C2412D; } .in-verdict.part b { background: #B7791F; }
.in-verdict span { color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.in-why { margin: 0; line-height: 1.55; font-size: 14.5px; }
.in-tip { margin: 0; display: flex; gap: 8px; align-items: flex-start; background: #F1F8F3; border-radius: 12px; padding: 8px 10px; font-size: 14px; line-height: 1.45; }
.in-tip svg { flex: none; width: 18px; height: 18px; color: #1F8A5B; margin-top: 1px; }
.in-ref { color: var(--muted); font-size: 12px; }
.in-cta { display: flex; gap: 14px; align-items: center; justify-content: space-between; background: linear-gradient(90deg, #FFF3E3, #FFE7CC); border-radius: 18px; padding: 14px 16px; }
.in-cta b { display: block; } .in-cta small { color: var(--ink-2); }
.in-note { margin: 0; color: var(--muted); font-size: 12.5px; }
.in-demo-st { display: flex; gap: 8px; align-items: center; justify-content: center; } .in-demo-st b { font-size: 1.02rem; }
.demo .in-card { box-shadow: none; }
.dl-map { text-decoration: none; background: #FFF6EC; ; } .dl-map > svg { color: #9C4A1A; }
@media (max-width: 900px) {
  .in-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .in-left { position: static; padding: 12px; }
  .in-tile { border-radius: 7px; font-size: 10px; }
  .in-map { gap: 3px; max-width: none; }
  .in-cta { flex-direction: column; align-items: stretch; } .in-cta .btn { width: 100%; }
  .in-ph h2 { font-size: 1.4rem; }
  .in-map.compact { max-width: 280px; }
}
.in-more { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) { .demo .in-map.compact { max-width: 236px; } .demo .in-claim { font-size: 1rem; } .demo .in-why { font-size: 14px; } }

/* ---------- v1.8.4: no border lines on boxes. Cards float on soft shadows; controls are gently filled. ---------- */
:root { --soft: 0 1px 2px rgba(6,18,42,.05), 0 10px 28px -14px rgba(6,18,42,.20); --fill: #F4EFE3; --fill-2: #ECE5D5; }
.dl-head, .dl-card, .in-left, .in-card, .ls, .dash-tile, .dp, .stake3, .band.sitroom, .pf-sub, .pk-list, .pp-map, .pp-card, .pm-card, .pm-vs, .pm-uses > div,
.qh-card, .sl-lib, .rc-use, .sim, .bi-ag, .bi-t, .bi-room, .dt-sol, .dt-ab-col, .li .li-top, .li-sec, .bi-promise, .bi-check, .rc-i, .led-ch, .led-arrow,
.pf-sec .menu, .dl-admin, .window-box, .cv, .pricec, .pf-card, .pf-sec { border: 0; box-shadow: var(--soft); }
.dl-card .dl-card, .sim .in-card, .demo .in-card { box-shadow: none; background: var(--panel-2); }
input, select, textarea, .sel-face { border: 0; background: var(--fill); box-shadow: none; }
input:focus, select:focus, textarea:focus, .sel-face:focus-within { outline: none; box-shadow: 0 0 0 2px var(--brand-2); background: #fff; }
input[type=checkbox], input[type=radio] { background: none; }
.lu, .dl-opt, .in-g, .opt, .sim-chip, .iz-chip, .iz-tile, .bp-opt, .dt-sus, .seg-b, .sc-b, .kw span, .pk summary, .ref-tag, .dash-chips span, .pm-tools li,
.iz-prog span, .dt-clue, .rs-x, .rs-drop, .devkey, .dl-opt kbd, .sleepc.preview, .hc-opt, .dl-gc { border: 0; background: var(--fill); }
.lu:hover, .dl-opt:hover:not(:disabled), .in-g:hover, .opt:hover, .sim-chip:hover, .iz-chip:hover, .iz-tile:hover, .bp-opt:hover, .dt-sus:hover, .dl-gc:hover { background: var(--fill-2); }
.dl-opt { box-shadow: 0 3px 0 rgba(6,18,42,.07); }
.dl-opt.right { background: #DDF1E5; box-shadow: none; } .dl-opt.wrong { background: #FBE0DA; box-shadow: none; }
.wb-badges span { border: 0; background: rgba(255,255,255,.72); }
.btn.ghost { border: 0; background: var(--brand-3); color: var(--brand); } .btn.ghost:hover { background: #D2E7F5; }
.mentor-sheet header .btn.ghost, .rep-bar .btn.ghost, .realestate .btn.ghost { border: 0; background: rgba(255,255,255,.16); color: #fff; }
.chip { border: 0; background: var(--brand-3); color: var(--brand); } .chip.ghost { background: var(--fill); color: var(--ink); }
.chip.ghost.on, .chip.on { background: var(--brand-2); color: #fff; box-shadow: none; }
.dl-reward { border: 0; background: #FFF1DA; } .dl-draft { border: 0; background: var(--brand-3); }
.daily-strip, .research-strip, .dl-miss, .bi-daily { border: 0; }
.dl-rec { border: 0; }
.dt-ab-col.method { box-shadow: var(--soft); background: var(--brand-3); }
.flash-card.flipped { border: 0; }

/* Daily IEQ head (v1.8.4): streak and goal ring, this week, the reward track, and goal cards */
.dl-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; }
.dl-top { display: flex; justify-content: space-around; align-items: center; gap: 12px; }
.dl-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 420px; width: 100%; justify-self: center; }
.dl-wd { display: grid; justify-items: center; gap: 4px; } .dl-wd i { width: 34px; height: 34px; border-radius: 50%; background: var(--fill, #F4EFE3); display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff; font-size: 15px; }
.dl-wd.on i { background: linear-gradient(135deg, #F2A541, #E4572E); } .dl-wd.today i { box-shadow: 0 0 0 2px var(--brand-2); } .dl-wd small { color: var(--muted); font-weight: 700; font-size: 12px; }
.dl-goal { gap: 6px; }
.dl-goalpick { display: grid; gap: 8px; } .dl-gl { color: var(--muted); font-weight: 500; font-size: 11.5px; letter-spacing: 0; }
.dl-goals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dl-gc { display: grid; justify-items: center; gap: 2px; padding: 10px 6px 9px; border-radius: 16px; cursor: pointer; font: inherit; color: var(--ink); transition: background .15s, transform .1s; }
.dl-gc:active { transform: scale(.97); }
.dl-gc .dl-gi { font-size: 22px; line-height: 1.1; } .dl-gc b { font-size: 14px; } .dl-gc small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.dl-gc.on { background: var(--brand); color: #fff; } .dl-gc.on small { color: rgba(255,255,255,.8); } .dl-gc.on:hover { background: var(--brand); }
.dl-meta { text-align: center; } .dl-head > .btn { justify-self: center; }
@media (max-width: 900px) { .dl-head { grid-template-columns: minmax(0, 1fr); } .dl-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dl-wd i { width: 30px; height: 30px; } }

/* India outline map (v1.8.4) */
.in-map { display: block; width: 100%; max-width: 420px; }
.in-svg { display: block; width: 100%; height: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.in-st { fill: #EFE7D8; fill: color-mix(in srgb, var(--rg) 30%, #fff); stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; cursor: pointer; outline: none; transition: fill .15s; }
.in-st:hover, .in-st:focus-visible { fill: color-mix(in srgb, var(--rg) 45%, #fff); }
.in-st.on { fill: var(--rg); stroke-width: 3.5; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
.in-dot { cursor: pointer; outline: none; } .in-dot .hit { fill: transparent; } .in-dot .pip { fill: var(--rg); stroke: #fff; stroke-width: 4; transition: r .15s; }
.in-dot text { font: 800 26px var(--font); fill: var(--rg); paint-order: stroke; stroke: #fff; stroke-width: 6px; }
.in-dot.on .pip { r: 16; } .in-dot.on text { fill: var(--ink); } .in-dot:focus-visible .pip { stroke: var(--brand-2); }
.in-cap { text-align: center; font-size: 14px; color: var(--ink-2); margin-top: 6px; min-height: 20px; } .in-cap b { color: var(--ink); }
.in-left { justify-items: center; } .in-left .in-legend { justify-content: center; }
.in-map.compact { max-width: 250px; margin: 0 auto; } .in-map.compact .in-cap { display: none; }
@media (max-width: 900px) { .in-map { max-width: 400px; margin: 0 auto; } .demo .in-map.compact { max-width: 210px; } }

/* ---------- v1.8.5: Gyan Ghar (the daily IEQ habit) ---------- */
/* Bottom bar: five places, Gyan Ghar raised in the centre; the profile lives bottom right on phones. */
@media (max-width: 900px) {
  .mnav { grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 0; overflow: visible; }
  .mn-gg { position: relative; }
  .mn-ggb { width: 58px; height: 58px; margin-top: -28px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, #F2A541, #E4572E); box-shadow: 0 6px 16px rgba(228,87,46,.38), 0 0 0 5px var(--panel); transition: transform .12s; }
  .mn-ggb .ic, .mn-ggb svg { width: 28px; height: 28px; }
  .mn-gg:active .mn-ggb { transform: scale(.94); }
  .mn-gg small { color: #B8461F; font-weight: 800; }
  .mn-gg.on .mn-ggb { box-shadow: 0 6px 16px rgba(228,87,46,.38), 0 0 0 5px var(--panel), 0 0 0 7px #F2A541; }
  body.has-mnav .topbar .pdot, body.has-mnav .topbar .tb-gg { display: none; }
  /* Room cards: the round icon sits centred beside its text */
  .window-box .wb-top { grid-row: 1 / span 4; align-self: center; }
}
.tb-gg { background: linear-gradient(135deg, #FFE7C2, #FFD6B0); color: #9A3412; font-weight: 700; }
.tb-gg:hover { background: linear-gradient(135deg, #FFDDB0, #FFC99A); }

/* The page */
.dl { max-width: 560px; gap: 18px; }
.gg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gg-name h1 { font-family: var(--display); font-weight: 700; font-size: 1.9rem; margin: 0; line-height: 1.05; }
.gg-name small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.gg-pills { display: flex; gap: 8px; flex: none; }
.gg-pill { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--panel); box-shadow: var(--soft); border-radius: 999px; padding: 8px 12px; font: inherit; color: var(--ink); cursor: pointer; }
.gg-pill b { font-size: 1.05rem; } .gg-pill small { color: var(--muted); font-weight: 700; font-size: 11.5px; }
.gg-pill.hot b { color: #C2410C; }
.gg-mini { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(#F2A541 calc(var(--p) * 1%), var(--fill, #F4EFE3) 0); -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
.gg-mini.full { background: #1F8A5B; }
.gg-hero { background: linear-gradient(160deg, #FFF3E3, #FFE2C4); border-radius: 26px; padding: 22px 20px; display: grid; gap: 8px; text-align: center; justify-items: center; }
.gg-hero h2 { font-family: var(--display); font-weight: 700; font-size: 1.7rem; margin: 0; line-height: 1.15; } .gg-hero h2 em { font-style: italic; color: #B8461F; }
.gg-hero p { margin: 0; color: var(--ink-2); }
.gg-hero.done { background: linear-gradient(160deg, #EAF5EF, #D9EFE3); } .gg-hero.done h2 em { color: #1F7A50; }
.gg-go { max-width: 320px; margin-top: 6px; font-size: 1.05rem; box-shadow: 0 4px 0 #0B3152; }
.gg-go:active { transform: translateY(2px); box-shadow: 0 2px 0 #0B3152; }
.gg-fix { display: inline-flex; align-items: center; gap: 6px; border: 0; background: rgba(255,255,255,.7); color: #A23A1F; font: 700 14px var(--font); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.gg-fix svg { width: 16px; height: 16px; }
.gg-path { display: grid; gap: 6px; justify-items: center; }
.gg-trail { display: grid; gap: 18px; justify-items: center; width: 100%; padding: 10px 0 6px; }
.gg-node { position: relative; display: grid; justify-items: center; gap: 2px; transform: translateX(calc(var(--x) * 46px)); text-align: center; }
.gg-btn { position: relative; width: 78px; height: 78px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: conic-gradient(var(--u) calc(var(--m) * 1%), #EDE6D8 0); transition: transform .12s; }
.gg-btn:active { transform: scale(.95); }
.gg-ic { width: 62px; height: 62px; border-radius: 50%; background: var(--u); color: #fff; display: grid; place-items: center; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.gg-ic svg { width: 28px; height: 28px; }
.gg-node b { font-size: 13.5px; max-width: 150px; line-height: 1.25; margin-top: 4px; } .gg-node small { color: var(--muted); font-size: 12px; }
.gg-node.rec .gg-btn { width: 92px; height: 92px; } .gg-node.rec .gg-ic { width: 74px; height: 74px; }
.gg-node.gold .gg-ic { background: linear-gradient(135deg, #F5C451, #E59E1C); }
.gg-bubble { position: absolute; top: -30px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 0; border-radius: 10px; padding: 4px 10px; animation: gg-bob 1.6s ease-in-out infinite; z-index: 1; }
.gg-bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-bottom: 0; border-top-color: var(--brand); }
@keyframes gg-bob { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .gg-bubble { animation: none; } }
.gg-node.rec { margin-top: 18px; }
.gg-maplink { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #9C4A1A; text-decoration: none; background: #FFF1E2; border-radius: 999px; padding: 3px 10px; }
.gg-maplink svg { width: 14px; height: 14px; }
.gg-save { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--panel); box-shadow: var(--soft); border-radius: 18px; padding: 12px 14px; font-size: 14px; color: var(--ink-2); }
.gg-sheet { display: grid; gap: 12px; } .gg-sheet p { margin: 0; }
.gg-done-acts { display: grid; gap: 8px; width: 100%; max-width: 320px; justify-items: center; }
@media (max-width: 900px) { .gg-node { transform: translateX(calc(var(--x) * 30px)); } .gg-name h1 { font-size: 1.6rem; } .gg-pill { padding: 7px 10px; } }
.windows.four + .research-strip { margin: 14px 0 0; }

/* ---------- v1.8.6: light controls — round icon buttons, dots, swipes; lighter text buttons ---------- */
.btn { padding: 9px 16px; font-size: 14.5px; font-weight: 600; }
.btn.lg { padding: 11px 20px; font-size: 15px; }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.rb { display: inline-grid; justify-items: center; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; text-decoration: none; font: inherit; -webkit-tap-highlight-color: transparent; }
.rb[hidden] { display: none; }
.rb-c { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-3); color: var(--brand); transition: transform .1s, background .15s; }
.rb-c svg { width: 22px; height: 22px; stroke-width: 2.2; }
.rb:hover .rb-c { background: #D2E7F5; } .rb:active .rb-c { transform: scale(.92); }
.rb:focus-visible { outline: none; } .rb:focus-visible .rb-c { box-shadow: 0 0 0 3px rgba(31,120,184,.35); }
.rb.primary .rb-c { background: var(--brand-2); color: #fff; box-shadow: 0 4px 12px rgba(31,120,184,.28); } .rb.primary:hover .rb-c { background: var(--brand); }
.rb.warm .rb-c { background: linear-gradient(135deg, #F2A541, #E4572E); color: #fff; box-shadow: 0 4px 12px rgba(228,87,46,.3); }
.rb.lg .rb-c { width: 64px; height: 64px; } .rb.lg .rb-c svg { width: 28px; height: 28px; }
.rb.sm .rb-c { width: 38px; height: 38px; } .rb.sm .rb-c svg { width: 18px; height: 18px; }
.rb.xs .rb-c { width: 32px; height: 32px; } .rb.xs .rb-c svg { width: 16px; height: 16px; }
.rb-l { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.dots { display: flex; gap: 6px; justify-content: center; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: #DDD5C4; cursor: pointer; transition: width .2s, background .2s; }
.dot.on { width: 22px; background: var(--brand-2); }
.navrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo-nav { margin-top: 10px; }
.swipeable { touch-action: pan-y; }
.linkbtn { border: 0; background: none; color: var(--brand-2); font: 600 13.5px var(--font); cursor: pointer; padding: 6px 4px; }
.chips.go-right { justify-content: flex-end; }

/* Demo: a before/after switch instead of a big button */
.sim-sw { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 0; font: 700 14.5px var(--font); color: var(--ink); cursor: pointer; justify-self: start; }
.sw-track { width: 54px; height: 30px; border-radius: 999px; background: #E2DACB; position: relative; transition: background .2s; flex: none; }
.sw-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); display: grid; place-items: center; color: #B7791F; transition: left .2s; }
.sw-knob svg { width: 14px; height: 14px; }
.sim-sw.on .sw-track { background: #1F8A5B; } .sim-sw.on .sw-knob { left: 27px; color: #1F8A5B; } .sim-sw.on { color: #1F7A50; }

/* Gyan Ghar: the hero card is the button; a round play sits inside it */
.gg-hero.tap { cursor: pointer; transition: transform .12s; } .gg-hero.tap:active { transform: scale(.99); }
.gg-hero .gg-go { margin-top: 4px; box-shadow: none; max-width: none; }
.gg-hero .gg-go .rb-c { width: 68px; height: 68px; box-shadow: 0 5px 0 #0B3152, 0 8px 18px rgba(31,120,184,.3); }
.gg-hero .gg-go:active .rb-c { transform: translateY(3px); box-shadow: 0 2px 0 #0B3152; }
.lx-body .dl-next { justify-self: end; }
.gg-done-acts { display: flex; gap: 22px; align-items: flex-end; justify-content: center; max-width: none; }

/* India */
.in-cta { text-decoration: none; color: var(--ink); }
.in-ph .rb { margin-left: 2px; }
.in-ph h2 { flex: 0 1 auto; margin-right: auto; }
.in-demo-st { gap: 8px; } .in-demo-st .rb:first-of-type { margin-left: 4px; }

/* ---------- v1.8.7: Gyan Ghar as a home · Apple-inspired calm · colour tiles in the bottom bar ---------- */
:root { --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; }
.gg { font-family: var(--sf); max-width: 1040px; gap: 22px; color: #1D1D1F; }
.gg .gg-top { align-items: center; }
.gg .gg-top h1 { font: 700 clamp(1.9rem, 4vw, 2.6rem) var(--sf); letter-spacing: -.025em; margin: 0; }
.gg .gg-pill { background: rgba(255,255,255,.8); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); font-family: var(--sf); }
.gg .gg-pill.fix { color: #C2412D; } .gg .gg-pill.fix svg { width: 16px; height: 16px; }
.gg-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.gg-side { display: grid; gap: 14px; position: sticky; top: 84px; }
.gg-plan { background: linear-gradient(180deg, #FFFFFF, #F5F5F7); border-radius: 28px; padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 40px -22px rgba(0,0,0,.25); }

/* The cartoon floor plan */
.hp { display: block; width: 100%; height: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hp-room { cursor: pointer; outline: none; }
.hp-floor { fill: color-mix(in srgb, var(--u) 16%, #FFFDF8); transition: fill .2s; }
.hp-room:hover .hp-floor, .hp-room:focus-visible .hp-floor { fill: color-mix(in srgb, var(--u) 28%, #FFFDF8); }
.hp-room.on .hp-floor { fill: color-mix(in srgb, var(--u) 34%, #FFFDF8); }
.hp-room.locked { cursor: pointer; } .hp-room.locked .hp-floor { fill: #EFEDE8; } .hp-room.locked .hp-prop { opacity: .28; filter: grayscale(1); }
.hp-room.locked .hp-name { fill: #9A9A9F; }
.hp-name { font: 600 12.5px var(--sf); fill: #1D1D1F; letter-spacing: -.01em; pointer-events: none; }
.hp-bar { fill: rgba(0,0,0,.08); } .hp-fill { fill: var(--u); }
.hp-lock rect { fill: #8E8E93; } .hp-lock path { stroke: #8E8E93; stroke-width: 3; }
.hp-walls { fill: none; stroke: #3A3A3C; stroke-width: 4; stroke-linejoin: round; pointer-events: none; }
.hp-outer { fill: none; stroke: #1D1D1F; stroke-width: 8; pointer-events: none; }
.hp-win { stroke: #8ECDF0; stroke-width: 6; stroke-linecap: round; pointer-events: none; }
.hp-prop { pointer-events: none; }
.hp-pin circle { fill: var(--u); } .hp-pin path { fill: #fff; }
.hp-room.next .hp-pin { animation: hpPulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hp-room.next .hp-floor { animation: hpGlow 2.2s ease-in-out infinite; }
@keyframes hpPulse { 50% { opacity: .55; } }
@keyframes hpGlow { 50% { fill: color-mix(in srgb, var(--u) 30%, #FFFDF8); } }
@media (prefers-reduced-motion: reduce) { .hp-room.next .hp-pin, .hp-room.next .hp-floor { animation: none; } }

/* Today's five: one slim row */
.gg-today { display: grid; grid-template-columns: 52px minmax(0, 1fr) 44px; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #FFF3E3, #FFE2C4); border-radius: 22px; padding: 12px 14px; font: inherit; color: #1D1D1F; }
.gg-today.done { cursor: default; background: linear-gradient(135deg, #EEF7F1, #DCF0E4); }
.gg-cal { width: 52px; height: 52px; border-radius: 14px; background: #fff; display: grid; place-content: center; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.gg-cal small { font: 500 12px var(--sf); color: #E4572E; letter-spacing: 0; } .gg-cal b { font: 700 20px var(--sf); line-height: 1; }
.gg-tt { display: grid; min-width: 0; } .gg-tt small { font: 600 12px var(--sf); color: #6E6E73; } .gg-tt b { font: 650 16px var(--sf); letter-spacing: -.01em; overflow-wrap: anywhere; }
.gg-tgo { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #1F78B8; box-shadow: 0 4px 12px rgba(31,120,184,.3); }
.gg-tgo svg { width: 20px; height: 20px; } .gg-today.done .gg-tgo { background: #1F8A5B; box-shadow: none; }

/* One room: its levels */
.gg-room { background: #fff; border-radius: 22px; padding: 16px; display: grid; gap: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 30px -20px rgba(0,0,0,.25); scroll-margin-top: 80px; }
.gg-rh { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.gg-rh b { display: block; font: 700 19px var(--sf); letter-spacing: -.015em; } .gg-rh small { color: #6E6E73; font-size: 13px; }
.gg-ric { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--u) 75%, #fff), var(--u)); }
.gg-ric svg { width: 22px; height: 22px; }
.gg-lvs { display: flex; flex-wrap: wrap; gap: 10px; }
.gg-lv { width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; font: 700 15px var(--sf); transition: transform .1s; }
.gg-lv svg { width: 20px; height: 20px; }
.gg-lv.done { background: var(--u); color: #fff; }
.gg-lv.cur { width: 58px; height: 58px; background: #1F78B8; color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--u) 25%, #fff), 0 6px 16px rgba(31,120,184,.3); }
.gg-lv.cur svg { width: 24px; height: 24px; }
.gg-lv.lock { background: #F2F2F4; color: #AEAEB2; cursor: default; }
.gg-lv.soon { background: linear-gradient(135deg, #FFF3E3, #F6E3FF); color: #B8461F; animation: hpPulse 1.6s ease-in-out infinite; }
.gg-lv:active:not(:disabled) { transform: scale(.93); }
.gg-rbar { height: 6px; border-radius: 6px; background: #F2F2F4; overflow: hidden; } .gg-rbar span { display: block; height: 100%; background: var(--u); border-radius: 6px; }
.gg-room.locked .gg-ric { background: #C7C7CC; }
.gg-lockline { display: flex; align-items: center; gap: 8px; color: #6E6E73; font-size: 14.5px; } .gg-lockline svg { width: 18px; height: 18px; }
.gg-roomlink { border: 0; background: #F2F2F4; border-radius: 999px; padding: 5px 12px; font: 600 14px var(--sf); color: #1D1D1F; cursor: pointer; }
.gg-save { font-family: var(--sf); }

/* Lessons and results in the same calm style */
.gg .lx { animation: lxIn .32s cubic-bezier(.2,.8,.2,1); font-family: var(--sf); }
@keyframes lxIn { from { opacity: 0; transform: scale(.92) translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .gg .lx { animation: none; } }
.gg .dl-q h3 { font: 650 1.25rem var(--sf); letter-spacing: -.015em; }
.gg .dl-done { font-family: var(--sf); }
.gg .dl-score { font: 700 2.6rem var(--sf); letter-spacing: -.03em; color: #1D1D1F; }
.gg-stars { display: flex; gap: 6px; justify-content: center; font-size: 34px; line-height: 1; } .gg-stars span { color: #E5E5EA; } .gg-stars span.on { color: #F5B71A; }
.dl-sum.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gg-opened { display: inline-flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--u) 12%, #fff); border-radius: 999px; padding: 6px 14px 6px 6px; }
.gg-opened .gg-ric { width: 32px; height: 32px; border-radius: 50%; } .gg-opened .gg-ric svg { width: 16px; height: 16px; }

/* Bottom bar: frosted glass, colour tiles, a smaller house button */
@media (max-width: 900px) {
  .mnav { background: rgba(255,255,255,.78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -1px 0 rgba(0,0,0,.06); }
  .mn-i { font-family: var(--sf); color: #6E6E73; }
  .mn-ic.tile { width: 32px; height: 32px; border-radius: 9px; color: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
  .mn-ic.tile .ic, .mn-ic.tile svg { width: 18px; height: 18px; stroke-width: 2.1; }
  .mn-ic.t-rooms { background: linear-gradient(135deg, #7D7AFF, #5E5CE6); }
  .mn-ic.t-class { background: linear-gradient(135deg, #FFC34D, #FF9F0A); }
  .mn-ic.t-cabin { background: linear-gradient(135deg, #5AD3E6, #30B0C7); }
  .mn-i.on .mn-ic.tile { background-blend-mode: normal; box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
  .mn-i.on { color: #1D1D1F; } .mn-i.on .mn-ic:not(.tile) { background: none; }
  .mn-ggb { width: 50px; height: 50px; margin-top: -20px; box-shadow: 0 6px 14px rgba(228,87,46,.35), 0 0 0 4px rgba(255,255,255,.9); }
  .mn-ggb .ic, .mn-ggb svg { width: 26px; height: 26px; stroke-width: 2; }
  .mn-gg.on .mn-ggb { box-shadow: 0 6px 14px rgba(228,87,46,.35), 0 0 0 4px #fff, 0 0 0 6px #F2A541; }
  .gg-main { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .gg-side { position: static; order: -1; display: contents; }
  .gg-today { order: -2; } .gg-plan { order: -1; padding: 8px; border-radius: 22px; } .gg-room { order: 0; }
  .gg .gg-top h1 { font-size: 1.9rem; }
  .gg-lv { width: 44px; height: 44px; } .gg-lv.cur { width: 54px; height: 54px; }
}

/* ---------- v1.8.9: DeepSeeIn brand, in the DeepSeeGo family style ---------- */
/* Wordmark as in DeepSeeGo: Arial bold, tight; "DeepSee" in deep blue, the suffix in signal orange. Logo: Vinamravigyan. */
.ds-word { font-family: Arial, Helvetica, sans-serif !important; font-weight: 700 !important; letter-spacing: -.5px; white-space: nowrap; }
.ds-word .ds-see { color: var(--brand-stem, #123F63); } .ds-word .ds-in { color: #E4572E; }
/* v1.87.0: brand switch (see js/brand.js). The stem colour of the wordmark and the primary buttons follow the brand. */
html[data-brand="me"] { --brand: #5B2A86; --brand-2: #7B4BB0; --brand-3: #EFE6F7; }
html[data-brand="bit"] { --brand: #7A4A12; --brand-2: #A4661C; --brand-3: #F6ECDD; }
html[data-brand="me"] .tb-brand img, html[data-brand="bit"] .tb-brand img { filter: none; }
.brand.sm .ds-word .ds-see, .bar .ds-word .ds-see { color: #fff; }
.rep-top .ds-word, .hcr-h .ds-word { font-size: inherit; }
.ds-by { display: block; font: 500 12px/1.2 Arial, Helvetica, sans-serif; letter-spacing: 0; color: #1D1D1F; margin-top: 2px; white-space: nowrap; }
.ds-by i { font-weight: 500; text-transform: lowercase; }
.tb-brand { gap: 10px; } .tb-brand > span { display: grid; line-height: 1.05; }
.tb-brand img, .brand img, .rep-top img, .hcr-h img { border-radius: 50%; object-fit: contain; }
.brand.sm img { background: #fff; padding: 2px; border-radius: 50%; }
.tb-brand b.ds-word { font-size: 26px; }
@media (max-width: 900px) { .tb-brand b.ds-word { font-size: 22px; } .tb-brand .ds-by { display: none; } }
/* The welcome film at the top of the sign-in card */
.auth-hero { margin: -6px -6px 6px; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: #E9E5D4 url(../assets/brand/deepseein-film.jpg) center / cover no-repeat; }
.auth-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- v1.8.9: the welcome film (from the brand GIF) at the top of the hero ---------- */
.bi-film { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; margin: 0 0 16px; background: #E9E5D4 url(../assets/brand/deepseein-film.jpg) center / cover no-repeat;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 26px 50px -30px rgba(18,63,99,.45); cursor: pointer; }
.bi-film video, .bi-film img { width: 100%; height: 100%; object-fit: cover; display: block; }  /* the 16:9 brand film, uncropped */
@media (max-width: 900px) { .bi-film { border-radius: 18px; margin-bottom: 14px; } }

/* ---------- v1.8.9: Gyan Ghar in 3D (house3d.js) ---------- */
.h3 { display: block; width: 100%; height: auto; overflow: visible; -webkit-tap-highlight-color: transparent; }
.h3-solids, .h3-labels, .h3-ground, .h3-shadow { pointer-events: none; }
.h3-room { cursor: pointer; outline: none; }
.h3-floor { transition: filter .2s; }
.h3-room:hover .h3-floor, .h3-room:focus-visible .h3-floor { filter: brightness(.96) saturate(1.3); }
.h3-room.on .h3-floor { filter: brightness(.92) saturate(1.6); }
.h3-room.next .h3-floor { animation: h3glow 2.4s ease-in-out infinite; }
@keyframes h3glow { 50% { filter: brightness(.95) saturate(1.7); } }
.h3-name { font: 700 11px var(--sf, -apple-system, "SF Pro Text", "Segoe UI", sans-serif); fill: rgba(29,29,31,.72); letter-spacing: .01em; }
.h3-name.locked { fill: rgba(29,29,31,.32); }
.h3-lk { opacity: .38; filter: grayscale(1); }
.t3 { cursor: pointer; }
.t3-sh { fill: rgba(30,40,50,.16); transform-box: fill-box; transform-origin: center; }
.t3:not(.locked) .t3-b { animation: t3bob 3.2s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.t3:not(.locked) .t3-sh { animation: t3sh 3.2s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes t3bob { 50% { transform: translateY(-5px); } }
@keyframes t3sh { 50% { transform: scale(.8); opacity: .7; } }
.t3-track { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 3; }
.t3-prog { fill: none; stroke: var(--u); stroke-width: 3; stroke-linecap: round; }
.t3-halo { fill: var(--u); opacity: .18; transform-box: fill-box; transform-origin: center; animation: t3halo 1.8s ease-out infinite; }
@keyframes t3halo { 0% { transform: scale(.75); opacity: .35; } 100% { transform: scale(1.35); opacity: 0; } }
.t3-play circle { fill: #FF9500; stroke: #fff; stroke-width: 2; } .t3-play path { fill: #fff; }
.t3-lv circle { fill: #fff; } .t3-lv text { font: 700 9.5px var(--sf, -apple-system, sans-serif); fill: #1D1D1F; }
.t3.on .t3-track { stroke: #1D1D1F; stroke-opacity: .25; }
.t3:hover .t3-b, .t3.on .t3-b { filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) { .t3 .t3-b, .t3 .t3-sh, .t3-halo, .h3-room.next .h3-floor { animation: none !important; } }
.gg-plan:has(.h3) { padding: 6px 4px; background: radial-gradient(120% 90% at 50% 20%, #FFFFFF 0%, #F3F6F1 70%, #ECF1E8 100%); }
/* Landing: Gyan Ghar shown as it looks in the app (3D home with sample progress) */
.bi-daily { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.bi-gg { display: block; text-decoration: none; color: inherit; background: radial-gradient(120% 90% at 50% 20%, #FFFFFF 0%, #F3F6F1 70%, #ECF1E8 100%); border-radius: 26px; padding: 12px 10px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 30px 60px -32px rgba(90,50,0,.45); transform: perspective(1200px) rotateY(-4deg) rotateX(2deg); transition: transform .4s ease; }
.bi-gg:hover { transform: none; }
.bi-gg-top { display: flex; align-items: center; gap: 8px; padding: 2px 8px 0; font: 600 13px var(--sf, -apple-system, sans-serif); }
.bi-gg-top b { font-size: 17px; letter-spacing: -.02em; margin-right: auto; }
.bi-gg-top span { background: #fff; border-radius: 999px; padding: 4px 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.bi-gg-cap { display: flex; align-items: center; justify-content: center; gap: 8px; color: #6E6E73; font: 500 12.5px var(--sf, -apple-system, sans-serif); }
.bi-gg-dot { width: 8px; height: 8px; border-radius: 50%; }
@media (max-width: 900px) {
  .bi-daily { grid-template-columns: 1fr; }
  .bi-gg { transform: none; margin: 0 -6px; padding: 10px 4px; }
}
@media (max-width: 600px) { .gg-plan:has(.h3) { margin-left: -10px; margin-right: -10px; padding: 2px 0; border-radius: 18px; } }

/* ---------- v1.9.0: Gyan Ghar in real 3D (house3gl.js) ---------- */
.g3-wrap { position: relative; min-height: 120px; }
.g3-wrap.loading { aspect-ratio: 1.62; border-radius: 20px; background: linear-gradient(100deg, rgba(0,0,0,.03) 30%, rgba(0,0,0,.06) 50%, rgba(0,0,0,.03) 70%) 0 0 / 200% 100%; animation: g3load 1.2s linear infinite; }
@keyframes g3load { to { background-position: -200% 0; } }
.g3 { position: relative; width: 100%; -webkit-tap-highlight-color: transparent; }
.g3 canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.g3-layer { position: absolute; inset: 0; pointer-events: none; }
.t3h { --s: 44px; position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.t3h.next { --s: 54px; } .t3h.locked { --s: 30px; }
.t3h-sh { position: absolute; left: 50%; top: calc(50% + var(--drop, 30px)); width: calc(var(--s) * .9); height: calc(var(--s) * .3); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(25,35,45,.32), rgba(25,35,45,0)); }
.t3h-b { position: absolute; inset: 0; display: grid; place-items: center; }
.t3h-coin { width: 76%; height: 76%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--u) 45%, #fff) 0%, var(--u) 46%, color-mix(in srgb, var(--u) 72%, #000) 100%);
  box-shadow: 0 2.5px 0 color-mix(in srgb, var(--u) 62%, #000), 0 4px 0 color-mix(in srgb, var(--u) 50%, #000), 0 10px 18px -6px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.55); }
.t3h-coin svg { width: 54%; height: 54%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.t3h.locked .t3h-coin { width: 100%; height: 100%; box-shadow: 0 2px 0 #8E8E93, 0 6px 12px -5px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.6); }
.t3h-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.t3h-track { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 3.4; }
.t3h-prog { fill: none; stroke-width: 3.4; stroke-linecap: round; }
.t3h-play, .t3h-lv { position: absolute; right: -3px; top: -3px; min-width: 19px; height: 19px; border-radius: 10px; display: grid; place-items: center; font: 700 11px/1 var(--sf, -apple-system, sans-serif); font-style: normal; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.t3h-play { background: #FF9500; border: 2px solid #fff; width: 22px; height: 22px; } .t3h-play svg { width: 12px; height: 12px; }
.t3h-lv { background: #fff; color: #1D1D1F; padding: 0 5px; }
.t3h:not(.locked) .t3h-b { animation: t3bob 3.2s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.t3h:not(.locked) .t3h-sh { animation: t3hsh 3.2s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes t3hsh { 50% { transform: translate(-50%, -50%) scale(.82); opacity: .75; } }
.t3h.next .t3h-coin::after { content: ''; position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: var(--u); opacity: .3; z-index: -1; animation: t3halo2 1.8s ease-out infinite; }
.t3h.next .t3h-b::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: var(--u); opacity: .25; animation: t3halo2 1.8s ease-out infinite; }
@keyframes t3halo2 { 0% { transform: scale(.7); opacity: .4; } 100% { transform: scale(1.35); opacity: 0; } }
.t3h.on .t3h-coin { outline: 3px solid rgba(255,255,255,.95); outline-offset: 2px; }
.t3h:focus-visible { outline: none; } .t3h:focus-visible .t3h-coin { outline: 3px solid #0A84FF; outline-offset: 3px; }
.t3h:hover .t3h-coin { filter: brightness(1.07); }
@media (max-width: 600px) { .t3h { --s: 36px; } .t3h.next { --s: 46px; } .t3h.locked { --s: 26px; } .t3h-play, .t3h-lv { transform: scale(.85); } }
@media (prefers-reduced-motion: reduce) { .t3h .t3h-b, .t3h .t3h-sh, .t3h.next .t3h-b::before { animation: none !important; } }
.gg-plan:has(.g3) { padding: 4px 2px; background: radial-gradient(120% 90% at 50% 20%, #FFFFFF 0%, #F3F6F1 70%, #ECF1E8 100%); }
@media (max-width: 600px) { .gg-plan:has(.g3) { margin-left: -10px; margin-right: -10px; border-radius: 18px; } }
.bi-gg-shot { display: block; width: 100%; height: auto; border-radius: 18px; }
.bi-gg { padding: 12px 10px; }

/* ---------- v1.9.1: SleepPrint (#/sleep) ---------- */
.sp { --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; max-width: 760px; margin: 0 auto; padding: 8px 0 30px; font-family: var(--sf); }
.sp .eyebrow { display: inline-flex; gap: 6px; align-items: center; }
.sp-intro { text-align: center; padding: 28px 0 10px; display: grid; gap: 12px; justify-items: center; }
.sp-intro h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.02em; margin: 0; }
.sp-intro h1 em { color: #5B5BD6; }
.sp-intro p { margin: 0; max-width: 560px; color: var(--ink-2); font-size: 1.05rem; line-height: 1.5; }
.sp-five { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 6px 0; }
.sp-five span { display: grid; justify-items: center; gap: 5px; width: 84px; }
.sp-five i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--c) 55%, #fff); }
.sp-five i svg { width: 20px; height: 20px; }
.sp-five small { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sp-start { display: grid; justify-items: center; gap: 8px; margin-top: 4px; } .sp-start small { color: var(--muted); font-size: 12.5px; }
/* Player */
.sp-play { display: grid; gap: 14px; padding-top: 14px; scroll-margin-top: 70px; }
.sp-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sp-seg { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 6px auto; gap: 5px 6px; align-items: center; color: var(--muted); }
.sp-seg > i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--c); display: block; position: relative; transition: width .3s; max-width: 100%; }
.sp-seg { position: relative; } .sp-seg::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 6px; background: rgba(0,0,0,.07); }
.sp-seg > i { z-index: 1; }
.sp-seg b { display: grid; } .sp-seg b svg { width: 14px; height: 14px; }
.sp-seg small { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-seg.on, .sp-seg.done { color: var(--c); }
.sp-card { background: #fff; border-radius: 26px; padding: 22px 20px 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 50px -30px color-mix(in srgb, var(--c) 60%, transparent); display: grid; gap: 16px; min-height: 300px; align-content: start; }
.sp-card.in { animation: spIn .28s ease both; }
@keyframes spIn { from { opacity: 0; transform: translateX(18px); } }
.sp-q { display: grid; justify-items: center; text-align: center; gap: 8px; }
.sp-emoji { font-size: 44px; line-height: 1; }
.sp-q b { font-size: 1.22rem; line-height: 1.35; letter-spacing: -.01em; max-width: 520px; }
.sp-cls { font-size: 11.5px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); border-radius: 999px; padding: 3px 10px; }
.sp-row { display: grid; gap: 7px; } .sp-row > small { font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: center; }
.sp-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.sp-pill, .sp-opt { border: 0; border-radius: 16px; padding: 13px 12px; font: 600 14.5px/1.25 var(--sf); color: #1D1D1F; background: #F2F2F5; cursor: pointer; transition: transform .12s, background .15s, box-shadow .15s; }
.sp-pill:hover, .sp-opt:hover { background: #EAEAEE; }
.sp-pill:active, .sp-opt:active { transform: scale(.97); }
.sp-pill.on, .sp-opt.on { background: color-mix(in srgb, var(--c) 16%, #fff); box-shadow: inset 0 0 0 2px var(--c); color: color-mix(in srgb, var(--c) 80%, #000); }
.sp-pill.f0 { color: #3A7D44; }
.sp-str { animation: spIn .22s ease both; }
.sp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-foot { display: flex; justify-content: space-between; align-items: center; }
.sp-count { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Result */
.sp-result:empty { display: none; }
.sp-result { display: grid; gap: 16px; padding-top: 14px; scroll-margin-top: 70px; }
.sp-rh { text-align: center; } .sp-rh h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 8px 0 0; letter-spacing: -.02em; }
.sp-rings { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sp-ring { border: 0; background: #fff; border-radius: 20px; padding: 12px 6px; display: grid; justify-items: center; gap: 4px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04); font: inherit; color: inherit; }
.sp-ring.on { box-shadow: inset 0 0 0 2px var(--c), 0 10px 24px -16px var(--c); }
.sp-ring b { font-size: 13px; }
.sp-rep { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-align: center; }
.sp-rep.good { background: #E4F4EA; color: #237A45; } .sp-rep.fair { background: #FFF2D9; color: #8A5A00; } .sp-rep.poor { background: #FDE7E4; color: #A63222; }
.sp-detail { background: #fff; border-radius: 20px; padding: 14px 16px; box-shadow: inset 4px 0 0 var(--c); }
.sp-detail ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.sp-detail li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 14.5px; }
.sp-e { font-size: 22px; }
.sp-badge { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.sp-badge.acute { background: #EEF0FF; color: #4446B8; } .sp-badge.short { background: #FFF1DC; color: #8A5A00; } .sp-badge.chronic { background: #F3E8FF; color: #6B3FA0; }
.sp-fixes { display: grid; gap: 10px; } .sp-fixes h3 { margin: 0; }
.sp-fix { display: grid; grid-template-columns: auto 1fr; gap: 12px; background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.sp-fix p { margin: 6px 0 0; line-height: 1.5; }
.sp-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sp-kind { font-style: normal; font-size: 11px; font-weight: 700; background: #F2F2F5; border-radius: 999px; padding: 3px 8px; }
.sp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sp-room { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 18px; padding: 14px 16px; }
.sp-room small { display: block; color: var(--muted); }
.sp-how { background: #fff; border-radius: 18px; padding: 12px 16px; } .sp-how summary { cursor: pointer; font-weight: 700; } .sp-how p { line-height: 1.55; }
.sp-next { display: grid; gap: 8px; }
.sp-go { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; border: 0; background: #fff; border-radius: 18px; padding: 12px 16px; font: inherit; color: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.sp-go > span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #EEF0FF; color: #4446B8; } .sp-go > span svg { width: 20px; height: 20px; }
.sp-go small { display: block; color: var(--muted); } .sp-go > i { font-style: normal; font-size: 22px; color: var(--muted); }
.sp-go:hover { background: #FAFAFC; }
.sp-mini svg { width: 26px; height: 26px; }
@media (max-width: 600px) {
  .sp-rail small { display: none; } .sp-seg { grid-template-columns: 1fr; justify-items: center; }
  .sp-card { padding: 18px 14px; border-radius: 22px; min-height: 0; }
  .sp-q b { font-size: 1.08rem; } .sp-emoji { font-size: 38px; }
  .sp-pills { grid-template-columns: 1fr 1fr; } .sp-opts { grid-template-columns: 1fr; }
  .sp-rings { grid-template-columns: repeat(3, 1fr); } .sp-ring svg { width: 62px; height: 62px; }
  .sp-five span { width: 62px; }
}
@media (prefers-reduced-motion: reduce) { .sp-card.in, .sp-str { animation: none; } }

/* ---------- v1.9.2: desktop top bar on one line; the 3D door in the phone bar ---------- */
@media (min-width: 901px) {
  .topbar { flex-wrap: nowrap; gap: 18px; }
  .tb-brand { flex: none; }
  .tb-nav { flex: 1 1 auto; flex-wrap: nowrap; justify-content: center; gap: clamp(12px, 1.6vw, 26px); min-width: 0; }
  .tb-nav button { white-space: nowrap; }
  .tb-right { flex: none; flex-wrap: nowrap; }
  .tb-right .btn { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1719px) { .tb-brand .ds-by { display: none; } }
@media (min-width: 901px) { .topbar { padding-left: max(24px, calc((100vw - 1360px) / 2)); padding-right: max(24px, calc((100vw - 1360px) / 2)); } }
@media (min-width: 901px) and (max-width: 1279px) { .tb-right .tb-lbl { display: none; } .tb-right .btn.sm { padding: 9px 12px; } .tb-nav button { font-size: 14.5px; } }

/* The door: closed on the landing page (tap to enter the rooms), open inside (tap to go back to the landing page). */
.mn-door { width: 32px; height: 34px; display: grid; place-items: end center; perspective: 70px; }
.d3 { position: relative; width: 26px; height: 32px; border-radius: 7px 7px 3px 3px; background: linear-gradient(160deg, #7D7AFF, #4B48C9); box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 0 0 1.5px rgba(255,255,255,.25); transform-style: preserve-3d; }
.d3-in { position: absolute; inset: 3px 3px 0; border-radius: 4px 4px 0 0; background: radial-gradient(120% 90% at 50% 100%, #FFE29A 0%, #FFB547 45%, #F2843A 100%); box-shadow: inset 0 0 6px rgba(120,50,0,.35); }
.d3-leaf { position: absolute; inset: 3px 3px 0; border-radius: 4px 4px 0 0; transform-origin: 0 50%; transition: transform .45s cubic-bezier(.3,.7,.2,1), box-shadow .45s; backface-visibility: hidden;
  background: linear-gradient(90deg, #EFEFFF 0%, #DCDBFF 100%); box-shadow: inset 0 0 0 1px rgba(75,72,201,.18); }
.d3-leaf::before { content: ''; position: absolute; left: 3px; right: 3px; top: 3px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1.2px rgba(75,72,201,.35); }
.d3-leaf::after { content: ''; position: absolute; left: 3px; right: 3px; top: 15px; bottom: 3px; border-radius: 2px; box-shadow: inset 0 0 0 1.2px rgba(75,72,201,.35); }
.d3-knob { position: absolute; right: 3px; top: 52%; width: 3px; height: 3px; border-radius: 50%; background: #F2B13B; z-index: 1; }
.mn-doorlink.open .d3-leaf, .mn-doorlink.opening .d3-leaf { transform: rotateY(-68deg); box-shadow: 6px 0 8px -4px rgba(0,0,0,.35), inset 0 0 0 1px rgba(75,72,201,.18); }
.mn-doorlink.closing .d3-leaf { transform: rotateY(0deg); }
.mn-doorlink:not(.open):hover .d3-leaf { transform: rotateY(-18deg); }
.mn-doorlink.open .d3-in, .mn-doorlink.opening .d3-in { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .d3-leaf { transition: none; } }

/* ---------- v1.9.3: three windows on the landing page (Gyan Ghar · SleepPrint · Healthy Home Check) ---------- */
.bi-wins { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; outline: none; }
.bi-wins::-webkit-scrollbar { display: none; }
.bi-win { position: relative; scroll-snap-align: start; overflow: hidden; min-height: 560px; }
.bi-win.sp { background: linear-gradient(135deg, #F1F1FF 0%, #E1E2FF 100%); } .bi-win.sp h2 em { color: #4446B8; } .bi-win.sp p { color: #2E2F5A; } .bi-win.sp .bi-daily-acts small { color: #4B4D7A; }
.bi-win.sp .bi-badge { background: #DAD9FF; color: #3B3DA6; }
.bi-win.hc { background: linear-gradient(135deg, #EAF6EE 0%, #D8EEDF 100%); } .bi-win.hc h2 em { color: #237A45; } .bi-win.hc p { color: #213A2A; } .bi-win.hc .bi-daily-acts small { color: #3E5A47; }
.bi-win.hc .bi-badge { background: #CDEBD6; color: #1F6B3C; }
.bi-ribbon { position: absolute; z-index: 3; top: 22px; right: -44px; width: 170px; transform: rotate(45deg); text-align: center; pointer-events: none;
  font: 800 11.5px var(--font); letter-spacing: .18em; text-transform: uppercase; padding: 6px 0; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); background: #C2410C; }
.bi-win.sp .bi-ribbon { background: #4446B8; } .bi-win.hc .bi-ribbon { background: #2E7D4A; }
.bi-win .bi-gg { transform: none; }
.bi-wnav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.bi-dots { display: flex; gap: 8px; }
.bi-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(0,0,0,.18); cursor: pointer; transition: width .2s, background .2s; }
.bi-dots button.on { width: 26px; border-radius: 6px; background: #1D1D1F; }
@media (max-width: 900px) {
  .bi-win { min-height: 0; } .bi-wins { gap: 12px; }
  .bi-ribbon { top: 14px; right: -50px; width: 160px; font-size: 10px; padding: 4px 0; }
  .bi-wnav .rb { display: none; }
}
/* SleepPrint: the share offer */
.sp-offer { position: relative; overflow: hidden; background: linear-gradient(135deg, #FFF6E5, #FFE9C7); border-radius: 22px; padding: 18px 18px 16px; display: grid; gap: 12px; }
.sp-offer .sp-ribbon { position: absolute; top: 14px; right: -42px; width: 150px; transform: rotate(45deg); text-align: center; background: #C2410C; color: #fff; font: 800 10.5px var(--sf); letter-spacing: .18em; text-transform: uppercase; padding: 4px 0; }
.sp-of-h { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding-right: 54px; }
.sp-of-h b { display: block; font-size: 1.05rem; } .sp-of-h small { color: #6B5530; }
.sp-of-ic { font-size: 30px; }
.sp-of-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.sp-of-form input { border: 0; border-radius: 14px; padding: 12px 14px; font: 500 15px var(--sf); background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); min-width: 0; }
.sp-of-form input:focus { outline: none; box-shadow: inset 0 0 0 2px #E0A526; }
.sp-of-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.sp-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #6B5530; line-height: 1.4; } .sp-consent input { margin-top: 2px; }
.sp-code { font: 700 20px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; background: #fff; border-radius: 12px; padding: 8px 14px; flex: 1; text-align: center; }
@media (max-width: 600px) { .sp-of-form { grid-template-columns: 1fr auto; } .sp-of-form input[type=text] { grid-column: 1 / -1; } }
.sp-offer label.sp-consent { display: flex; flex-direction: row; gap: 8px; align-items: flex-start; font-weight: 500; margin: 0; }
.sp-offer label.sp-consent input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; padding: 0; accent-color: #C2410C; }
.sp-offer label.sp-consent span { flex: 1; }
.bi-win .bi-gg { display: grid; gap: 8px; align-content: center; }
.bi-win .bi-gg-shot { width: 100%; height: auto; max-height: 440px; object-fit: contain; border-radius: 14px; }
@media (max-width: 900px) { .bi-win .bi-gg-shot { max-height: none; } }
.bi-wins > .bi-win { width: 100%; max-width: none; margin: 0; justify-self: stretch; box-sizing: border-box; }
@media (min-width: 901px) { .bi-wins > .bi-win { padding: 30px 64px 30px 34px; } }

/* ---------- v1.9.4: panel on the server, mind map, fact check ---------- */
.run-note { display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; color: var(--muted); font-size: 13px; padding: 8px 12px; }
.run-note svg { width: 16px; height: 16px; flex: none; }
.run-fail { align-items: center; gap: 12px; }
.mm-card { margin: 8px 0; background: #fff; border-radius: 14px; padding: 4px; }
.mm-card svg, .mm-wrap svg { display: block; width: 100%; height: auto; }
.mm-wrap { background: #FAFAF7; border-radius: 16px; padding: 6px; }
.mm-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
.mm-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.vchk { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.vchk.verified { background: #E4F4EA; color: #237A45; } .vchk.plausible { background: #FFF2D9; color: #8A5A00; } .vchk.unverifiable { background: #EFEFEF; color: #555; } .vchk.disputed { background: #FDE7E4; color: #A63222; }
@media print { .mm-wrap { break-inside: avoid; } }
.mm-list { display: none; gap: 8px; }
.mm-c { font-weight: 800; background: #1D1D1F; color: #fff; border-radius: 999px; padding: 8px 14px; text-align: center; }
.mm-b { background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: inset 4px 0 0 var(--c); }
.mm-b b { display: block; color: var(--c); font-size: 13px; margin-bottom: 6px; }
.mm-b div { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-n { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.mm-n.root-cause { font-weight: 800; } .mm-n.ruled-out { text-decoration: line-through; }

/* ---------- SleepPrint 3 (v1.9.5) ---------- */
.sp-rail { grid-template-columns: repeat(var(--n, 6), 1fr); }
.sp-seg b { font-size: 13px; line-height: 1; }
.sp-chap { font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--c); }
.sp-card .sp-row + .sp-row { margin-top: 2px; }
.sp-pills.wide { grid-template-columns: 1fr 1fr; }
.sp-opts.three { grid-template-columns: repeat(3, 1fr); }
.sp-know { justify-self: center; border: 0; background: none; color: var(--c); font: 600 13.5px var(--sf); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; padding: 6px 10px; border-radius: 999px; }
.sp-know svg { width: 16px; height: 16px; } .sp-know:hover { background: color-mix(in srgb, var(--c) 8%, #fff); }
.sp-meter { display: flex; gap: 12px; align-items: center; justify-content: center; animation: spIn .22s ease both; }
.sp-meter .rb-c b { font-size: 22px; line-height: 1; }
.sp-val { font: 700 1.6rem/1 var(--sf); min-width: 92px; text-align: center; font-variant-numeric: tabular-nums; }
.sp-rings { grid-template-columns: repeat(7, 1fr); }
.sp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-kpis > div { background: #fff; border-radius: 20px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.sp-kpis > div > b { font: 700 2rem/1 var(--sf); color: #123F63; min-width: 52px; display: grid; place-items: center; }
.sp-kpis > div > b.big-l { width: 48px; height: 48px; min-width: 48px; border-radius: 14px; color: #fff; font-size: 1.5rem; }
.sp-kpis small { color: var(--ink-2); font-weight: 600; font-size: 13px; line-height: 1.35; }
.sp-dl { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 20px; padding: 12px 16px; }
.sp-dl small { color: var(--ink-2); line-height: 1.45; }
.sp-cite { font-size: 10.5px; color: #2F4C8F; font-weight: 700; margin-left: 2px; }
.sp-env, .sp-plan, .sp-india { display: grid; gap: 10px; } .sp-env h3, .sp-plan h3, .sp-india h3 { margin: 0; }
.sp-env-l { display: grid; gap: 8px; }
.sp-env-r { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; background: #fff; border-radius: 18px; padding: 12px 14px; }
.sp-env-r b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.sp-env-r small { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.sp-st { font-style: normal; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.sp-env-r.ok .sp-st { background: #E4F4EA; color: #237A45; } .sp-env-r.edge .sp-st { background: #FFF2D9; color: #8A5A00; } .sp-env-r.out .sp-st { background: #FDE7E4; color: #A63222; }
.sp-plan ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-plan li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; background: #fff; border-radius: 16px; padding: 11px 14px; font-size: 14px; line-height: 1.45; }
.sp-plan li b { color: #123F63; } .sp-plan li.you { background: #FFF4E0; } .sp-plan li.you b { color: #C2410C; }
.sp-india { background: #fff; border-radius: 18px; padding: 14px 16px; } .sp-india p { margin: 0; line-height: 1.5; }
.sp-refs { background: #fff; border-radius: 18px; padding: 12px 16px; } .sp-refs summary { cursor: pointer; font-weight: 700; }
.sp-refs ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.sp-refs a { text-decoration: none; }
@media (max-width: 720px) {
  .sp-rings { grid-template-columns: repeat(4, 1fr); }
  .sp-kpis { grid-template-columns: 1fr; }
  .sp-opts.three { grid-template-columns: 1fr 1fr; }
  .sp-pills.wide { grid-template-columns: 1fr; }
  .sp-plan li { grid-template-columns: 1fr; gap: 2px; }
  .sp-dl { flex-direction: row; }
}

/* ---------- v1.9.5: offer windows as a reel — each fits one phone screen, the next one peeks in ---------- */
.bi-count { font: 700 12.5px var(--sf); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; }
@media (max-width: 900px) {
  .bi-habit { padding-top: 10px; }
  .bi-wins { grid-auto-columns: 86%; gap: 12px; scroll-padding-inline: 0; padding-bottom: 6px; }
  .bi-wins > .bi-win { display: grid; grid-template-columns: 1fr; align-content: start; gap: 10px; padding: 16px 16px 14px; border-radius: 22px;
    max-height: calc(100svh - 150px); min-height: 0; box-shadow: 0 14px 30px -24px rgba(0,0,0,.35); }
  .bi-win .bi-daily-copy { display: contents; }
  .bi-win .bi-badge { justify-self: start; font-size: 11px; padding: 3px 10px; order: 1; }
  .bi-win h2 { order: 2; font-size: 1.32rem; line-height: 1.15; margin: 0; padding-right: 34px; }
  .bi-win .bi-gg { order: 3; margin: 0; padding: 6px; border-radius: 18px; }
  .bi-win .bi-gg-top { display: none; }
  .bi-win .bi-gg-cap { display: none; }
  .bi-win .bi-gg-shot { max-height: 31svh; width: 100%; object-fit: cover; object-position: top center; border-radius: 13px; }
  .bi-win p { order: 4; margin: 0; font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .bi-win .bi-daily-acts { order: 5; gap: 8px; }
  .bi-win .bi-daily-acts .btn.lg { padding: 11px 18px; font-size: 15px; }
  .bi-win .bi-daily-acts small { display: none; }
  .bi-wnav { gap: 10px; }
}
@media (max-width: 900px) and (max-height: 640px) { .bi-win p { -webkit-line-clamp: 2; } .bi-win .bi-gg-shot { max-height: 26svh; } }
/* v1.9.5: the room-card icon sits in the middle of its round badge (the hidden labels no longer push it left). */
@media (max-width: 820px) {
  .window-box .wb-top { display: grid; place-items: center; justify-content: center; padding: 0; }
  .window-box .wb-top > svg { grid-area: 1 / 1; margin: 0; }
  .window-box .wb-top > .wb-pro, .window-box .wb-top > .wb-free { display: none; }
}
/* v1.9.5: Back, bottom left of the phone bar (members), or a small round button (visitors). */
.mn-back { border: 0; background: none; font: inherit; cursor: pointer; padding: 0; }
.mn-ic.t-back { background: linear-gradient(135deg, #AEB4C2, #7C8496) !important; }
.vback { display: none; }
@media (max-width: 820px) {
  .mnav.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vback { display: grid; place-items: center; position: fixed; left: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; width: 46px; height: 46px; border-radius: 50%; border: 0;
    background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 6px 18px rgba(0,0,0,.16); color: #1D1D1F; cursor: pointer; }
  .vback svg { width: 22px; height: 22px; }
  body.in-chat .vback { display: none; }
}

/* v1.9.5: mind map — full size on phones in a box that scrolls both ways; scaled to fit on wide screens. */
.mm-scroll { overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 12px; outline: none; }
.mm-scroll svg { display: block; width: 100%; height: auto; }
.mm-hint { display: none; text-align: center; color: var(--muted); font-size: 12px; font-weight: 600; margin-top: 6px; }
@media (max-width: 900px) {
  .mm-scroll { max-height: 72svh; background: #FAFAF7; }
  .mm-scroll svg { width: 860px; max-width: none; }
  .mm-hint { display: block; }
}
@media print { .mm-scroll { overflow: visible; max-height: none; } .mm-scroll svg { width: 100% !important; } .mm-hint { display: none !important; } }
/* v1.9.5: the panel at work (replaces the "…" bubble) */
.pl-live { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; background: #fff; border-radius: 22px; padding: 14px 18px 14px 14px; margin: 6px 0; max-width: 560px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 40px -30px rgba(18,63,99,.5); }
.pl-table { position: relative; width: 132px; height: 112px; }
.pl-top { position: absolute; left: 30px; top: 30px; width: 72px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F6EEDD, #E4D6B8); box-shadow: inset 0 -4px 0 rgba(0,0,0,.06); }
.pl-seat { position: absolute; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; transition: transform .25s; }
.pl-seat img, .pl-seat .pl-mod { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #F2F2F5; box-shadow: 0 0 0 2px #fff; filter: saturate(.55); opacity: .75; transition: filter .25s, opacity .25s; }
.pl-seat .pl-mod { display: grid; place-items: center; color: #6E6E73; } .pl-seat .pl-mod svg { width: 16px; height: 16px; }
.pl-seat.s0 { left: 47px; top: -2px; } .pl-seat.s1 { left: 0; top: 18px; } .pl-seat.s2 { left: 94px; top: 18px; } .pl-seat.s3 { left: 10px; top: 72px; } .pl-seat.s4 { left: 84px; top: 72px; }
.pl-seat.on { transform: scale(1.12); z-index: 2; }
.pl-seat.on img, .pl-seat.on .pl-mod { filter: none; opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--who); animation: plPulse 1.4s ease-in-out infinite; }
.pl-wave { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); display: none; gap: 2px; align-items: flex-end; height: 9px; }
.pl-seat.on .pl-wave { display: flex; }
.pl-wave em { width: 3px; border-radius: 2px; background: var(--who); animation: plWave .9s ease-in-out infinite; }
.pl-wave em:nth-child(2) { animation-delay: .15s; } .pl-wave em:nth-child(3) { animation-delay: .3s; }
@keyframes plWave { 0%, 100% { height: 3px; } 50% { height: 9px; } }
@keyframes plPulse { 0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--who); } 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 8px color-mix(in srgb, var(--who) 35%, transparent); } }
.pl-info { display: grid; gap: 5px; min-width: 0; }
.pl-stage { font-size: 12px; letter-spacing: 0; color: #123F63; }
.pl-who { font-weight: 700; font-size: 15px; }
.pl-bar { height: 7px; border-radius: 7px; background: #EEF0F4; overflow: hidden; }
.pl-bar i { display: block; height: 100%; width: 0; border-radius: 7px; background: linear-gradient(90deg, #E4572E, #123F63); transition: width .8s ease; }
.pl-row { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.pl-tick { color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pl-tick.in { animation: plTick .45s ease both; }
@keyframes plTick { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pl-pct { font: 800 13px var(--sf); color: #123F63; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .pl-live { grid-template-columns: 104px 1fr; gap: 10px; padding: 12px; } .pl-table { transform: scale(.8); transform-origin: left center; width: 104px; } }
@media (prefers-reduced-motion: reduce) { .pl-seat.on img, .pl-wave em, .pl-tick.in { animation: none; } }
.sp-said { display: block; color: var(--ink-2); margin-top: 2px; }
@media (max-width: 720px) { .sp-kpis { grid-template-columns: 1fr 1fr; } .sp-kpis > div { padding: 12px; gap: 10px; } .sp-kpis > div > b { font-size: 1.6rem; min-width: 40px; } .sp-kpis > div > b.big-l { width: 40px; height: 40px; min-width: 40px; font-size: 1.2rem; } .sp-kpis small { font-size: 12px; } }
.sp-fix-t { display: block; margin-top: 8px; font-size: 14.5px; }
.sp-min { display: block; margin-top: 6px; font-weight: 700; color: #123F63; font-size: 13px; }
.sp-ev summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #2F4C8F; margin-top: 6px; }
.sp-ev p { font-size: 13px; color: var(--ink-2); margin: 6px 0 0; }
/* v1.9.5b: the landing film cropped to the brand text (source 640×360 → x 160–612, y 70–324, still 16:9); the empty wall is cut off. */
.bi-film { aspect-ratio: 16 / 9; background-size: 141.6% 141.7%; background-position: 85.1% 66%; }
.bi-film video, .bi-film img { position: absolute; width: 141.6%; height: 141.7%; left: -35.4%; top: -27.6%; max-width: none; object-fit: fill; }
/* v1.9.5: report bar — Back | Download PDF · Print */
.rep-bar { align-items: center; } .rep-bar .btn.primary { margin-left: auto; } .rep-bar .icon-btn { color: #fff; background: rgba(255,255,255,.14); }

/* ---------- v1.9.9: the bottom bar as a calm tab bar (inspired by iOS and WhatsApp, drawn for DeepSeeIn) ---------- */
@media (max-width: 820px) {
  .mnav.tabbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 0; padding: 7px 6px calc(5px + env(safe-area-inset-bottom));
    background: rgba(250, 250, 252, .82); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
    border-top: 0; box-shadow: 0 -0.5px 0 rgba(0, 0, 0, .14); overflow: visible; }
  .tb-i { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none;
    color: #8A8A8F; font: 600 10.5px/1.1 var(--sf, -apple-system, system-ui, sans-serif); letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; }
  .tb-i small { font: inherit; white-space: nowrap; }
  .tb-ic { width: 56px; height: 30px; border-radius: 15px; display: grid; place-items: center; transition: background-color .25s ease, transform .15s ease; }
  .tb-ic .ic { width: 24px; height: 24px; stroke-width: 1.6; transition: stroke-width .2s; }
  .tb-i:active .tb-ic { transform: scale(.9); }
  .tb-i.on { color: #123F63; }
  .tb-i.on small { font-weight: 700; }
  .tb-i.on .tb-ic { background: rgba(18, 63, 99, .09); }
  .tb-i.on .tb-ic .ic { stroke-width: 2; }
  .tb-gg.on { color: #D9480F; } .tb-gg.on .tb-ic { background: rgba(228, 87, 46, .11); }
  .tb-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #E6E8EE; color: #3A3F4A; font: 700 10.5px var(--sf, system-ui); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
  .tb-me.on .tb-av { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #123F63; }
  .tb-me.on .tb-ic { background: none; }
  @media (prefers-reduced-motion: reduce) { .tb-ic, .tb-ic .ic { transition: none; } }
}
@media (max-width: 820px) { .mnav.tabbar { background: rgba(250, 250, 252, .88); } }
@media (max-width: 380px) { .tb-i { font-size: 9.5px; } .tb-ic { width: 48px; } }

/* ---------- v1.9.10: promises and numbers in one swipe strip ---------- */
.bi-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  padding: 4px 2px 10px; margin: 18px 0 4px; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 28px), transparent); }
.bi-strip::-webkit-scrollbar { display: none; }
.bi-chip { flex: 0 0 auto; scroll-snap-align: start; min-width: 148px; max-width: 190px; display: grid; align-content: start; gap: 3px; text-align: left;
  background: #fff; border: 0; border-radius: 18px; padding: 14px 16px 13px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 24px -20px rgba(18,63,99,.45); font: inherit; color: inherit; }
.bi-chip-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #EAF1F8; color: #123F63; margin-bottom: 6px; }
.bi-chip-ic .ic { width: 17px; height: 17px; }
.bi-chip b { font: 700 15px/1.2 var(--sf, system-ui); letter-spacing: -.01em; color: #1D1D1F; }
.bi-chip small { font: 500 12.5px/1.35 var(--sf, system-ui); color: #6E6E73; }
.bi-chip.num { min-width: 118px; background: #F6F3EC; box-shadow: none; }
.bi-chip.num b { font: 600 30px/1 var(--display, Georgia, serif); color: #123F63; margin: 4px 0 6px; }
.bi-chip.go { cursor: pointer; background: #123F63; } .bi-chip.go b { color: #fff; } .bi-chip.go small { color: rgba(255,255,255,.75); }
.bi-chip.go .bi-chip-ic { background: rgba(255,255,255,.14); color: #fff; }
.bi-chip.go:active { transform: scale(.97); }
@media (min-width: 901px) { .bi-chip { min-width: 168px; } }
@media (max-width: 900px) {
  .bi-strip { gap: 8px; margin-top: 14px; }
  .bi-chip { min-width: 0; width: 136px; max-width: none; padding: 12px 13px 11px; border-radius: 16px; }
  .bi-chip b { font-size: 14px; } .bi-chip small { font-size: 12px; }
  .bi-chip-ic { width: 28px; height: 28px; margin-bottom: 4px; }
  .bi-chip.num { width: 112px; } .bi-chip.num b { font-size: 26px; }
}
.bi-strip-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
@media (max-width: 900px) { .bi-strip-nav { display: none; } }
/* v1.9.12: the swipe strip must never widen the section (it pushed the expert cards and heading off screen). */
.bi-agents { min-width: 0; max-width: 100%; }
.bi-agents > *, .bi-strip-wrap { min-width: 0; max-width: 100%; }
.bi-strip-wrap { width: 100%; overflow: hidden; }
.bi-strip { width: 100%; max-width: 100%; }

/* ---------- v1.9.13: phone fixes in the Cabin ---------- */
/* The mind map fits its frame (the whole picture at once); people pinch to zoom. */
.mm-fit { background: #FAFAF7; border-radius: 12px; overflow: hidden; }
.mm-fit svg { display: block; width: 100%; height: auto; max-width: 100%; }
.mm-card .mm-fit, .mm-wrap .mm-fit { padding: 4px; }
/* Inputs at 16px so iPhones do not zoom the page in when you start typing. */
@media (max-width: 820px) { input, textarea, select { font-size: 16px !important; } }
/* The send button stays a circle; the composer gives the text box the room. */
.composer .send, .composer.real .send { flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; aspect-ratio: 1; }
.composer .send svg { width: 20px; height: 20px; }
.composer.real textarea { flex: 1 1 auto; min-width: 0; }
@media (max-width: 600px) {
  .composer.real { gap: 6px; }
  .who-pick { flex: none; gap: 0; }
  .who-pick .wp { margin-left: -8px; } .who-pick .wp:first-child { margin-left: 0; }
  .wp img { width: 30px; height: 30px; box-shadow: 0 0 0 2px #fff; }
  .wp.on { position: relative; z-index: 1; }
  /* The stage chips stay on one line that scrolls, instead of taking two rows. */
  .steps { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
}
/* A follow-up answer shows who is answering, not a progress bar. */
.pl-live.fu .pl-bar, .pl-live.fu .pl-pct { display: none; }
.pl-pct { flex: none; }
.chat-head .ch-t { min-width: 0; }
.chat-head .ch-t small.status { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer.real textarea { resize: none; line-height: 1.35; }

/* ---------- v1.10.0: RoomTrace ---------- */
.rt { max-width: 760px; margin: 0 auto; display: grid; gap: 16px; padding-bottom: 24px; scroll-margin-top: 70px; }
.rt-intro { text-align: center; display: grid; gap: 10px; justify-items: center; padding-top: 22px; }
.rt-intro .eyebrow { display: inline-flex; gap: 6px; align-items: center; } .rt-intro .eyebrow svg { width: 16px; height: 16px; }
.rt-intro h1 { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 4.6vw, 2.7rem); line-height: 1.12; letter-spacing: -.02em; margin: 0; } .rt-intro h1 em { color: #2E7D6B; }
.rt-intro p { margin: 0; max-width: 580px; color: var(--ink-2); line-height: 1.55; }
.rt-rail { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.rt-rail span { display: grid; gap: 4px; } .rt-rail i { height: 5px; border-radius: 5px; background: rgba(0,0,0,.08); }
.rt-rail span.done i { background: #2E7D6B; } .rt-rail span.on i { background: #E4572E; }
.rt-rail small { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rt-rail span.on small { color: #1D1D1F; }
.rt-stage { background: #fff; border-radius: 24px; padding: 20px; display: grid; gap: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 22px 46px -32px rgba(18,63,99,.45); }
.rt-stage.in { animation: spIn .28s ease both; }
.rt-q b { display: block; font-size: 1.18rem; line-height: 1.35; letter-spacing: -.01em; } .rt-q small { display: block; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.rt-stage textarea { width: 100%; border: 0; border-radius: 16px; background: #F4F4F7; padding: 12px 14px; font: 500 16px/1.45 var(--sf); resize: vertical; min-height: 90px; box-sizing: border-box; }
.rt-stage textarea:focus { outline: none; box-shadow: inset 0 0 0 2px #2E7D6B; }
.rt-hint { color: var(--muted); font-weight: 600; }
.rt-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.rt-chip { border: 0; border-radius: 999px; padding: 9px 13px; background: #F2F2F5; font: 600 14px/1.2 var(--sf); color: #1D1D1F; cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s; text-align: left; }
.rt-chip:active { transform: scale(.97); }
.rt-chip.on, .rt-chip.yes { background: #E3F2EE; color: #1E5E50; box-shadow: inset 0 0 0 1.5px #2E7D6B; }
.rt-chip.yes::before { content: '✓ '; font-weight: 800; }
.rt-chip.no { background: #F6F6F8; color: #A0A0A6; text-decoration: line-through; }
.rt-row { display: grid; gap: 7px; } .rt-row > small { font-weight: 700; color: var(--muted); font-size: 12.5px; }
.rt-group { display: grid; gap: 8px; } .rt-group > b { font-size: 14px; }
.rt-legend { display: flex; gap: 6px; flex-wrap: wrap; } .rt-legend .rt-chip { cursor: default; font-size: 12px; padding: 5px 10px; }
.rt-list { display: grid; gap: 8px; }
.rt-opt { border: 0; border-radius: 16px; padding: 14px 16px; background: #F2F2F5; font: 600 15px/1.3 var(--sf); text-align: left; cursor: pointer; color: #1D1D1F; }
.rt-opt:hover { background: #EAEAEE; } .rt-opt.warn { background: #FDF0EE; color: #8A2A1C; } .rt-opt.ok { background: #E3F2EE; color: #1E5E50; }
.rt-qn { font-weight: 500; letter-spacing: 0; font-size: 11.5px; color: #2E7D6B; }
.rt-why { margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; } .rt-why svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #2E7D6B; }
.rt-skip { justify-self: start; border: 0; background: none; color: var(--muted); font: 600 13px var(--sf); cursor: pointer; padding: 4px 0; text-decoration: underline; }
.rt-foot { display: flex; justify-content: space-between; align-items: center; }
.rt-count { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.rt-foot .rb[disabled] { opacity: .35; pointer-events: none; }
.rt-report { display: grid; gap: 14px; }
.rt-rh h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2rem); margin: 6px 0 4px; letter-spacing: -.02em; }
.rt-said { margin: 0; color: var(--ink-2); font-style: italic; line-height: 1.5; } .rt-said small { font-style: normal; color: var(--muted); }
.rt-mapbox { background: #FAFAF7; border-radius: 16px; padding: 6px; overflow: hidden; } .rt-mapbox svg { display: block; width: 100%; height: auto; }
.rt-key { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); } .rt-key i { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 5px; vertical-align: -1px; }
.rt-report h3 { margin: 6px 0 0; }
.rt-paths { display: grid; gap: 10px; }
.rt-path { background: #FBFBFC; border-radius: 18px; padding: 14px 16px; display: grid; gap: 9px; box-shadow: inset 4px 0 0 var(--c); }
.rt-ph { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rt-n { width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 12.5px; }
.rt-st { font-weight: 700; color: var(--c); font-size: 13.5px; } .rt-ord { margin-left: auto; color: var(--muted); font-weight: 600; }
.rt-chain { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rt-node { border-radius: 999px; padding: 5px 10px; font-size: 13px; font-weight: 600; line-height: 1.25; }
.rt-node.src, .rt-node.ctl { background: #fff; box-shadow: inset 0 0 0 1px #D5D7DD; } .rt-node.state { background: var(--d); color: #fff; } .rt-node.exp { background: #1D1D1F; color: #fff; }
.rt-arrow { font-style: normal; color: var(--muted); }
.rt-path details summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #2F4C8F; }
.rt-links { margin: 6px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.5; display: grid; gap: 4px; }
.rt-test { display: flex; gap: 6px; align-items: flex-start; color: #1E5E50; font-weight: 600; line-height: 1.45; } .rt-test svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.rt-out summary { cursor: pointer; font-weight: 700; } .rt-out ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); display: grid; gap: 4px; }
.rt-scen { display: grid; gap: 8px; }
.rt-sc { display: grid; grid-template-columns: auto 1fr; gap: 12px; background: #FBFBFC; border-radius: 18px; padding: 14px 16px; }
.rt-sc-e { font-size: 26px; } .rt-sc b { display: block; font-size: 15px; }
.rt-acts-on { display: block; color: var(--muted); margin-top: 3px; }
.rt-cost { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: #8A4B00; display: grid; gap: 3px; }
.rt-obs { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; color: var(--ink-2); } .rt-obs svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.rt-layers p { margin: 6px 0 0; line-height: 1.5; }
.rt-dl { display: flex; justify-content: center; }
.rt-stop p { margin: 6px 0; }
@media (max-width: 600px) {
  .rt-stage { padding: 16px 14px; border-radius: 20px; }
  .rt-rail small { display: none; }
  .rt-chip { font-size: 13.5px; padding: 8px 12px; }
}

/* ---------- v1.10.1: RoomTrace swipe deck ---------- */
.rt-dtop { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.rt-dbar { height: 6px; border-radius: 6px; background: rgba(0,0,0,.07); overflow: hidden; } .rt-dbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2E7D6B, #5BB89F); border-radius: 6px; transition: width .3s ease; }
.rt-dcount { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.rt-dtop .rb .rb-c { width: 36px; height: 36px; } .rt-dtop .rb svg { width: 18px; height: 18px; }
.rt-deck { position: relative; height: 330px; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.rt-deck.q { height: auto; min-height: 260px; touch-action: pan-y; }
.rt-card { position: absolute; inset: 6px 4px; border-radius: 26px; background: #fff; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 26px 22px; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 40px -22px rgba(18,63,99,.45); transition: transform .25s ease, opacity .25s ease; --yes: 0; --no: 0; cursor: grab; }
.rt-card:not(.top) { transform: translateY(12px) scale(.95); opacity: .7; pointer-events: none; }
.rt-card:not(.top):nth-last-child(3) { transform: translateY(22px) scale(.9); opacity: .4; }
.rt-card.top.enter { animation: rtIn .22s ease both; }
@keyframes rtIn { from { transform: translateY(12px) scale(.95); opacity: .7; } to { transform: none; opacity: 1; } }
.rt-card.drag { transition: none; cursor: grabbing; }
.rt-card.fly-r { transform: translate(140%, -10px) rotate(18deg) !important; opacity: 0; }
.rt-card.fly-l { transform: translate(-140%, -10px) rotate(-18deg) !important; opacity: 0; }
.rt-card.fly-u { transform: translate(0, -120%) !important; opacity: 0; }
.rt-card.solo { position: relative; inset: auto; width: 100%; box-sizing: border-box; }
.rt-card.done { position: relative; inset: auto; width: 100%; box-sizing: border-box; cursor: default; background: linear-gradient(160deg, #F2FBF8, #E3F2EE); }
.rt-big { font-size: 64px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.08)); }
.rt-card > b { font-size: 1.3rem; line-height: 1.3; letter-spacing: -.01em; max-width: 420px; }
.rt-card > small { color: var(--muted); font-size: 14px; line-height: 1.45; max-width: 420px; }
.rt-lead { font-style: normal; font-size: 12.5px; font-weight: 700; color: #2E7D6B; background: #E9F5F1; border-radius: 999px; padding: 4px 10px; }
.rt-stamp { position: absolute; top: 18px; font-style: normal; font: 500 15px var(--sf); letter-spacing: 0; border-radius: 10px; padding: 4px 10px; pointer-events: none; }
.rt-stamp.yes { left: 18px; color: #1E7D5A; box-shadow: inset 0 0 0 2.5px #1E7D5A; transform: rotate(-12deg); opacity: var(--yes); }
.rt-stamp.no { right: 18px; color: #B3261E; box-shadow: inset 0 0 0 2.5px #B3261E; transform: rotate(12deg); opacity: var(--no); }
.rt-card.q { cursor: default; } .rt-card.q .rt-list { width: 100%; } .rt-card.q .rt-why { justify-content: center; text-align: left; max-width: 440px; }
.rt-swbtns { display: flex; justify-content: center; gap: 26px; }
.rt-swbtns .rb .rb-c { width: 58px; height: 58px; font-size: 24px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.35); }
.rt-swbtns .rb.rt-no .rb-c { background: #fff; color: #B3261E; } .rt-swbtns .rb.rt-yes .rb-c { background: #fff; color: #1E7D5A; }
.rt-swbtns .rb.rt-maybe .rb-c { width: 46px; height: 46px; margin-top: 6px; background: #fff; color: #6E6E73; font-size: 19px; }
.rt-swbtns .rb .rb-l { font-size: 11.5px; font-weight: 700; color: var(--muted); }
@media (max-width: 600px) { .rt-deck { height: 300px; } .rt-big { font-size: 56px; } .rt-card > b { font-size: 1.18rem; } }
@media (prefers-reduced-motion: reduce) { .rt-card, .rt-card.top.enter { transition: none; animation: none; } }
.rt-card .rt-said { font-style: normal; font-size: 12.5px; font-weight: 700; color: #8A4B00; background: #FFF2DC; border-radius: 999px; padding: 4px 10px; }

/* ---------- v1.10.1: RoomTrace as a detective case ---------- */
.rt-guide { display: flex; gap: 10px; align-items: flex-end; }
.rt-guide img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #5B57C9; }
.rt-guide > div { display: grid; gap: 3px; min-width: 0; }
.rt-guide small { font-size: 11.5px; font-weight: 700; color: #5B57C9; letter-spacing: .02em; }
.rt-bubble { position: relative; background: #fff; border-radius: 16px 16px 16px 4px; padding: 9px 13px; font-size: 14px; line-height: 1.45; color: #1D1D1F; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 22px -16px rgba(18,63,99,.5); }
.rt-bubble.pop { animation: rtPop .3s ease both; }
@keyframes rtPop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.rt-board { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: #F4F1FB; border-radius: 14px; padding: 8px 10px; font-size: 13px; }
.rt-board > b { font-size: 12.5px; margin-right: 2px; } .rt-board > small { margin-left: auto; color: var(--muted); font-weight: 600; }
.rt-sus { background: #fff; border-radius: 999px; padding: 4px 10px 4px 8px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: rtPop .3s ease both; }
.rt-sus::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.rt-closed { display: inline-block; margin: 2px 0 6px; background: #FFF4E0; color: #8A4B00; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .rt-bubble.pop, .rt-sus { animation: none; } }
.rt-deck.pick { height: auto; touch-action: auto; }
.rt-card.pick { cursor: default; gap: 12px; } .rt-card.pick .rt-chips { justify-content: center; }
.rt-pick-go { display: grid; gap: 6px; justify-items: center; }
.rt-pick-go .btn[disabled] { opacity: .45; }

/* ---------- v1.10.2: RoomTrace as a small role-play case ---------- */
.rp { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; padding-bottom: 24px; scroll-margin-top: 70px; min-width: 0; }
.rp-intro h1 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.12; letter-spacing: -.02em; margin: 6px 0 6px; }
.rp-intro h1 em { color: #E4572E; font-style: italic; }
.rp-intro p { margin: 0; color: var(--ink-2); line-height: 1.5; }
/* the scene rail */
.rp-rail { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.rp-rail::-webkit-scrollbar { display: none; }
.rp-rail span { flex: 1 0 auto; min-width: 44px; display: grid; justify-items: center; gap: 3px; position: relative; }
.rp-rail span:not(:last-child)::after { content: ''; position: absolute; top: 17px; left: calc(50% + 19px); right: calc(-50% + 19px); height: 2px; border-radius: 2px; background: rgba(0,0,0,.08); }
.rp-rail span.done:not(:last-child)::after { background: #2E7D6B; }
.rp-rail b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: #F1F1F4; color: #fff; filter: grayscale(.9); opacity: .7; transition: all .25s ease; }
.rp-rail span.done b { background: #2E7D6B; filter: none; opacity: 1; font-size: 15px; font-weight: 800; }
.rp-rail span.on b { background: #FFF1EA; filter: none; opacity: 1; transform: scale(1.12); box-shadow: 0 0 0 3px #E4572E; }
.rp-rail small { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.rp-rail span.on small { color: #1D1D1F; font-weight: 700; }
/* the partner */
.rp-npc { display: flex; gap: 10px; align-items: flex-end; min-width: 0; }
.rp-npc img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #5B57C9; }
.rp-npc > div { display: grid; gap: 3px; min-width: 0; flex: 1; }
.rp-npc small { font-size: 11.5px; font-weight: 700; color: #5B57C9; letter-spacing: .02em; }
.rp-say { background: #fff; border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-size: 14.5px; line-height: 1.45; color: #1D1D1F; min-height: 1.45em;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 22px -16px rgba(18,63,99,.5); }
.rp-say.pop { animation: rtPop .3s ease both; }
/* the suspects board */
.rp-board { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: #F4F1FB; border-radius: 14px; padding: 8px 10px; font-size: 13px; }
.rp-board[hidden] { display: none; }
.rp-board > b { font-size: 12.5px; margin-right: 2px; } .rp-board > small { margin-left: auto; color: var(--muted); font-weight: 600; }
.rp-sus { background: #fff; border-radius: 999px; padding: 4px 10px 4px 8px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: rtPop .3s ease both; }
.rp-sus::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
/* the stage */
.rp-stage { display: grid; gap: 12px; min-width: 0; }
.rp-stage.rp-in { animation: spIn .28s ease both; }
.rp-card { background: #fff; border-radius: 24px; padding: 18px; display: grid; gap: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 22px 46px -32px rgba(18,63,99,.45); }
.rp-card.c { justify-items: center; text-align: center; } .rp-card.c small { color: var(--muted); }
.rp-big { font-size: 56px; line-height: 1; }
.rp-q { font-size: 1.15rem; line-height: 1.35; letter-spacing: -.01em; }
.rp-lab { font-weight: 500; letter-spacing: 0; font-size: 11.5px; color: #2E7D6B; }
.rp-hint { color: var(--muted); font-size: 13px; } .rp-hint.c { text-align: center; display: block; font-weight: 600; }
.rp-card textarea { width: 100%; border: 0; border-radius: 16px; background: #F4F4F7; padding: 12px 14px; font: 500 16px/1.45 var(--font); resize: vertical; min-height: 84px; box-sizing: border-box; }
.rp-card textarea:focus { outline: none; box-shadow: inset 0 0 0 2px #2E7D6B; }
.rp-tags, .rp-choices { display: flex; gap: 7px; flex-wrap: wrap; }
.rp-choices.col { display: grid; gap: 8px; }
.rp-tag, .rp-choice { border: 0; border-radius: 999px; padding: 9px 14px; background: #F2F2F5; font: 600 14px/1.25 var(--font); color: #1D1D1F; cursor: pointer; transition: transform .12s ease, background .15s ease; }
.rp-tag:active, .rp-choice:active { transform: scale(.96); }
.rp-tag.on, .rp-choice.on { background: #2E7D6B; color: #fff; }
.rp-choices.col .rp-choice { border-radius: 16px; padding: 13px 16px; text-align: left; font-size: 15px; position: relative; padding-right: 36px; }
.rp-choices.col .rp-choice::after { content: '›'; position: absolute; right: 14px; top: 50%; transform: translateY(-52%); font-size: 20px; color: var(--muted); }
.rp-choice.warn { background: #FDF0EE; color: #8A2A1C; } .rp-choice.ok { background: #E3F2EE; color: #1E5E50; }
.rp-skip { justify-self: start; border: 0; background: none; color: var(--muted); font: 600 13px var(--font); cursor: pointer; padding: 4px 0; text-decoration: underline; }
.rp-foot { display: flex; justify-content: space-between; align-items: center; min-height: 52px; }
.rp-count { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-foot .rb[disabled] { opacity: .35; pointer-events: none; }
/* the illustrated room */
.rp-room { position: relative; width: 100%; align-self: start; justify-self: stretch; height: auto; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: #F3EEE6; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 24px 48px -30px rgba(60,40,20,.5); user-select: none; -webkit-user-select: none; }
.rp-wall { position: absolute; inset: 0 0 38% 0; background: linear-gradient(180deg, #FBF6EE 0%, #F2E9DC 100%); }
.rp-wall::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 15%; background: linear-gradient(180deg, #FFFFFF, #F7F1E8); }
.rp-floor { position: absolute; inset: 62% 0 0 0; background: repeating-linear-gradient(90deg, #E2CDB0 0 11%, #DCC5A6 11% 11.4%), #E2CDB0; }
.rp-floor::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4%; background: #CDB491; }
.rp-floor::after { content: ''; position: absolute; left: 34%; right: 30%; top: 30%; height: 46%; border-radius: 50%; background: radial-gradient(#D98C6E 0 38%, #E6A487 39% 60%, #D98C6E 61%); opacity: .5; }
.rp-sky { position: absolute; left: 12%; top: 19%; width: 26%; height: 25%; border-radius: 10px; background: linear-gradient(180deg, #BFE3F7, #E7F5FC); box-shadow: inset 0 0 0 5px #fff, 0 6px 14px -8px rgba(0,0,0,.25); }
.rp-sky::after { content: ''; position: absolute; left: 50%; top: 5px; bottom: 5px; width: 4px; margin-left: -2px; background: #fff; }
.rp-spot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 1px; cursor: pointer; z-index: 1; -webkit-tap-highlight-color: transparent; }
.rp-spot .rp-e { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 25px; line-height: 1; background: rgba(255,255,255,.7); transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease; }
.rp-spot small { font: 700 10px/1.15 var(--font); color: #3B2E22; background: rgba(255,255,255,.85); border-radius: 999px; padding: 2px 6px; max-width: 92px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-spot:disabled { cursor: default; }
.rp-spot.idle .rp-e { opacity: .35; filter: grayscale(.6); background: transparent; transform: scale(.82); }
.rp-spot.clue .rp-e { background: #fff; box-shadow: 0 0 0 3px #F2A33A, 0 0 0 0 rgba(242,163,58,.55); animation: rpGlow 1.8s ease-out infinite; }
.rp-spot.done .rp-e { background: #fff; box-shadow: 0 0 0 3px #2E7D6B; }
.rp-spot.on .rp-e { background: #FFF6D6; box-shadow: 0 0 0 3px #E8A300, 0 0 22px 4px rgba(255,200,60,.7); }
.rp-spot.off .rp-e { background: #E9E9EE; box-shadow: 0 0 0 3px #8E8E96; filter: grayscale(1); opacity: .8; }
.rp-spot:not(:disabled):active .rp-e { transform: scale(.9); }
.rp-spot.spin .rp-e { animation: rpSpin 1s linear infinite; }
.rp-badge { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: 800 10px/18px var(--font); font-style: normal; color: #fff; background: #F2A33A; box-sizing: border-box; }
.rp-spot.done .rp-badge { background: #2E7D6B; } .rp-spot.on .rp-badge { background: #E8A300; } .rp-spot.off .rp-badge { background: #8E8E96; }
@keyframes rpGlow { 0% { box-shadow: 0 0 0 3px #F2A33A, 0 0 0 0 rgba(242,163,58,.55); } 100% { box-shadow: 0 0 0 3px #F2A33A, 0 0 0 14px rgba(242,163,58,0); } }
@keyframes rpSpin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .rp-room { aspect-ratio: 3 / 4; border-radius: 22px; }
  .rp-spot { left: var(--px); top: var(--py); }
  .rp-wall { inset: 0 0 44% 0; } .rp-floor { inset: 56% 0 0 0; }
  .rp-sky { left: 3%; top: 18%; width: 45%; height: 19%; }
  .rp-board { font-size: 12.5px; padding: 7px 9px; }
  .rp-spot .rp-e { width: 40px; height: 40px; font-size: 21px; }
  .rp-spot small { font-size: 9.5px; max-width: 74px; }
  .rp-card { padding: 16px 14px; border-radius: 20px; }
  .rp-rail small { display: none; } .rp-rail span.on small { display: block; }
}
/* the inspect sheet */
.rp-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(15,30,38,.32); display: grid; align-items: end; justify-items: center; animation: rpFade .2s ease both; }
.rp-sheet-in { width: min(560px, 100%); box-sizing: border-box; background: #fff; border-radius: 26px 26px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 12px; max-height: 82vh; overflow: auto; animation: rpUp .26s cubic-bezier(.2,.8,.2,1) both; }
.rp-sheet-in::before { content: ''; justify-self: center; width: 38px; height: 5px; border-radius: 3px; background: #DADADF; }
.rp-sheet-t { font-size: 1.1rem; }
.rp-rows { display: grid; gap: 10px; }
.rp-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; background: #F7F7F9; border-radius: 16px; padding: 10px 12px; }
.rp-row-e { font-size: 24px; grid-row: span 2; } .rp-row b { font-size: 14.5px; line-height: 1.3; }
.rp-seg { display: flex; background: #EBEBEF; border-radius: 12px; padding: 3px; gap: 2px; }
.rp-seg button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 7px 4px; font: 600 13px var(--font); color: #3A3A3F; cursor: pointer; }
.rp-seg button.on { background: #fff; color: #1D1D1F; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
@keyframes rpFade { from { opacity: 0; } } @keyframes rpUp { from { transform: translateY(100%); } }
/* the case board: line-up */
.rp-lineup { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rp-lineup::-webkit-scrollbar { display: none; }
.rp-mug { flex: none; width: 128px; scroll-snap-align: start; position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 14px 10px 12px; border-radius: 20px;
  background: repeating-linear-gradient(180deg, #F7F7FA 0 14px, #EFEFF4 14px 15px); box-shadow: inset 0 4px 0 var(--c, #C9CCD3); }
.rp-mug b { font-size: 13px; line-height: 1.25; }
.rp-mug-n { position: absolute; top: 8px; left: 10px; font: 800 11px var(--font); color: var(--c); }
.rp-mug-e { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 28px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.3); }
.rp-stamp { font-style: normal; font: 500 12px var(--font); letter-spacing: 0; color: var(--c); box-shadow: inset 0 0 0 2px var(--c); border-radius: 7px; padding: 3px 7px; transform: rotate(-6deg); }
.rp-mug.out { --c: #9A9AA2; opacity: .75; } .rp-mug.out b { text-decoration: line-through; color: var(--muted); } .rp-mug.out .rp-mug-e { filter: grayscale(1); }
/* the case board: lane map */
.rp-map { display: grid; grid-template-columns: 24px minmax(120px, 190px) minmax(0, 1fr) minmax(110px, 160px); gap: 8px 10px; align-items: center; background: #FAFAF7; border-radius: 18px; padding: 14px; }
.rp-ln { display: contents; }
.rp-ln > * { grid-row: var(--row); }
.rp-ln-n { grid-column: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 12px; }
.rp-ln-s { grid-column: 2; background: #fff; border-radius: 12px; padding: 7px 10px; font-size: 13px; font-weight: 600; line-height: 1.25; display: flex; gap: 6px; align-items: center; box-shadow: inset 0 0 0 1px #DDDFE4; }
.rp-ln-s i { font-style: normal; font-size: 16px; }
.rp-ln-m { grid-column: 3; display: grid; grid-template-columns: repeat(var(--m), minmax(0, 1fr)); gap: 8px; align-items: center; justify-items: center; align-self: stretch; min-width: 0;
  background: linear-gradient(var(--c), var(--c)) center / 100% 2px no-repeat; }
.rp-ln.weak .rp-ln-m { background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 11px) center / 100% 2px no-repeat; opacity: .7; }
.rp-ln.strong .rp-ln-m { background-size: 100% 3px; }
.rp-ln-st { background: var(--d); color: #fff; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; max-width: 100%; box-sizing: border-box; grid-row: 1; }
.rp-ln-x { display: none; }
.rp-ln-X { grid-column: 4; align-self: stretch; display: grid; place-items: center; text-align: center; background: #1D1D1F; color: #fff; border-radius: 14px; padding: 8px 10px; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
@media (max-width: 620px) {
  .rp-map { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; }
  .rp-ln { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px 8px; align-items: start; background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
  .rp-ln > * { grid-row: auto; }
  .rp-ln-n { grid-column: 1; width: 22px; height: 22px; font-size: 11px; }
  .rp-ln-s { grid-column: 2; box-shadow: none; padding: 0; background: none; font-size: 13.5px; }
  .rp-ln-m, .rp-ln-x { grid-column: 2; }
  .rp-ln-m { display: flex; flex-wrap: wrap; justify-content: flex-start; background: none !important; gap: 4px; opacity: 1 !important; }
  .rp-ln-st { max-width: none; font-size: 11.5px; padding: 4px 9px; }
  .rp-ln-st::before, .rp-ln-x::before { content: '→ '; }
  .rp-ln-m:empty { display: none; }
  .rp-ln-x { display: inline-block; justify-self: start; background: #1D1D1F; color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 700; }
  .rp-ln-X { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rp-say.pop, .rp-sus, .rp-spot.clue .rp-e, .rp-spot.spin .rp-e, .rp-sheet, .rp-sheet-in { animation: none; } }
.rp-sheet-say { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); background: #F4F1FB; border-radius: 14px; padding: 9px 11px; }
.rp-sheet-say img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }

/* ---------- v1.11.0: streak +1, the moment the daily goal is reached ---------- */
.lx { position: relative; }
.gg-up { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 18px 16px 14px; border-radius: 24px;
  background: linear-gradient(160deg, #FFF6E5, #FFE7D6); box-shadow: 0 24px 50px -24px rgba(180,80,20,.55); animation: ggUp .45s cubic-bezier(.2,1.4,.4,1) both; }
.gg-up.in { position: static; animation: ggUp .45s cubic-bezier(.2,1.4,.4,1) both; box-shadow: none; }
.gg-up-fire { font-size: 54px; line-height: 1; animation: ggFire 1.2s ease-in-out infinite alternate; }
.gg-up b { font-size: 1.25rem; letter-spacing: -.01em; } .gg-up small { color: #8A4B00; font-weight: 600; }
.gg-up-acts { display: flex; gap: 26px; justify-content: center; margin-top: 4px; }
@keyframes ggUp { from { opacity: 0; transform: translateY(24px) scale(.92); } }
@keyframes ggFire { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.12) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .gg-up, .gg-up-fire { animation: none; } }

/* ---------- v1.11.0: the promo film in the hero ---------- */
.bi-promo { display: block; position: relative; border-radius: 28px; overflow: hidden; background: #0E1B2B; aspect-ratio: 1 / 1; max-width: 560px; width: 100%; justify-self: center;
  box-shadow: 0 30px 60px -34px rgba(18,63,99,.55); }
.bi-promo video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- v1.11.0: Our Products ---------- */
.op { display: grid; gap: 14px; padding: 18px 0 8px; scroll-margin-top: 80px; min-width: 0; }
.op-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.op-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 4.4vw, 2.6rem); letter-spacing: -.02em; margin: 0; }
.op-nav { display: flex; gap: 8px; }
.op-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 340px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; scrollbar-width: none; min-width: 0; }
.op-track::-webkit-scrollbar { display: none; }
.op-card { position: relative; overflow: hidden; scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; background: #fff; border-radius: 28px; color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 46px -32px rgba(18,63,99,.5); transition: transform .2s ease, box-shadow .2s ease; }
.op-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 30px 54px -30px rgba(18,63,99,.55); }
.op-ribbon { position: absolute; z-index: 3; top: 20px; right: -42px; width: 150px; transform: rotate(45deg); text-align: center; pointer-events: none;
  font: 800 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: #fff; padding: 6px 0; box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); }
.op-ribbon.free { background: #1E8A5A; } .op-ribbon.paid { background: #C2410C; }
.op-stage { background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--c) 22%, #fff) 0%, var(--t) 55%, #fff 100%); padding: 22px 0 0; display: grid; justify-items: center; height: 300px; overflow: hidden; }
.op-phone { width: 178px; padding: 7px; border-radius: 30px; background: #15171C; box-shadow: 0 22px 40px -18px rgba(0,0,0,.45); }
.op-phone img { display: block; width: 100%; height: auto; border-radius: 24px; }
.op-copy { padding: 16px 18px 18px; display: grid; gap: 10px; align-content: start; position: relative; }
.op-name { display: flex; gap: 10px; align-items: center; }
.op-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--c); color: #fff; flex: none; }
.op-ic .ic { width: 22px; height: 22px; }
.op-name b { display: block; font-size: 1.08rem; letter-spacing: -.01em; } .op-name small { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.op-copy p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.op-for { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.op-for li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; font-weight: 600; color: #1D1D1F; line-height: 1.35; }
.op-for li::before { content: '✓'; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--c); margin-top: 1px; }
.op-go { position: absolute; right: 16px; bottom: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--t); color: var(--c); }
.op-go .ic { width: 18px; height: 18px; }
@media (max-width: 600px) {
  .op-track { grid-auto-columns: 84%; gap: 12px; }
  .op-nav { display: none; }
  .op-stage { height: 270px; } .op-phone { width: 160px; }
}

/* ---------- v1.11.0: My Products ---------- */
.mp { display: grid; gap: 22px; padding: 26px 0 30px; max-width: 880px; margin: 0 auto; }
.mp-head h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 6vw, 2.8rem); letter-spacing: -.02em; margin: 4px 0 6px; }
.mp-head p { margin: 0; color: var(--ink-2); }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 18px; }
.mp-app { display: grid; justify-items: center; gap: 6px; text-align: center; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.mp-ic { position: relative; width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c)); box-shadow: 0 16px 28px -16px var(--c), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .15s ease; }
.mp-ic .ic { width: 46px; height: 46px; stroke-width: 1.5; }
.mp-app:active .mp-ic { transform: scale(.93); } .mp-app:hover .mp-ic { transform: translateY(-2px); }
.mp-app b { font-size: 15px; letter-spacing: -.01em; } .mp-app small { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.mp-badge { position: absolute; top: -6px; right: -8px; min-width: 26px; height: 26px; padding: 0 7px; box-sizing: border-box; border-radius: 13px; display: grid; place-items: center;
  font: 800 12px/1 var(--font); font-style: normal; background: #fff; color: #1D1D1F; box-shadow: 0 4px 10px -4px rgba(0,0,0,.35); }
.mp-badge.hot { color: #C2410C; } .mp-badge.paused { color: #5B57C9; }
.mp-app.admin .mp-ic { box-shadow: 0 16px 28px -16px #475569; }
@media (max-width: 600px) {
  .mp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 10px; }
  .mp-ic { width: 76px; height: 76px; border-radius: 22px; } .mp-ic .ic { width: 36px; height: 36px; }
  .mp-app b { font-size: 13px; } .mp-app small { font-size: 11.5px; }
}

/* ---------- v1.11.0: the bottom bar with three places ---------- */
@media (max-width: 820px) {
  .mnav.tabbar.tb3 { grid-template-columns: 1fr 1fr 1fr; padding-top: 6px; }
  .tb3 .tb-mine .tb-ic { width: 52px; height: 52px; border-radius: 18px; margin-top: -20px; color: #fff; background: linear-gradient(150deg, #2F86C9, #123F63); box-shadow: 0 10px 22px -10px rgba(18,63,99,.7); }
  .tb3 .tb-mine .tb-ic .ic { width: 26px; height: 26px; stroke-width: 1.8; }
  .tb3 .tb-mine.on { color: #123F63; } .tb3 .tb-mine.on .tb-ic { background: linear-gradient(150deg, #2F86C9, #123F63); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #2F86C9; }
  .tb3 .tb-exit { color: #B3261E; }
  .vback { display: none !important; }
}
body.has-mnav .topbar .tb-rooms { display: none; }
@media (min-width: 821px) { body.has-mnav .topbar .tb-rooms { display: inline-flex; } }

/* ---------- v1.11.0: IEQ Pulse (news and real estate in one) ---------- */
.pl { display: grid; gap: 14px; }
.pl h2 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -.02em; } .pl h2 em { color: #2F86C9; }
.pl-tabs { display: flex; gap: 6px; background: #EEEEF2; border-radius: 14px; padding: 4px; width: max-content; max-width: 100%; overflow-x: auto; }
.pl-tab { border: 0; background: none; border-radius: 11px; padding: 8px 14px; font: 600 14px var(--font); color: #3A3A3F; cursor: pointer; white-space: nowrap; }
.pl-tab.on { background: #fff; color: #1D1D1F; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ---------- v1.11.0: the live demo inside Gyan Ghar ---------- */
.gg-demo { display: grid; gap: 12px; margin-top: 22px; }
.gg-demo-h h2 { font-family: var(--display); font-weight: 700; margin: 2px 0 0; letter-spacing: -.02em; } .gg-demo-h h2 em { color: #E8711A; }
.gg-demo .sim.demo { max-width: 640px; }
.mp-badge .ic { width: 13px; height: 13px; stroke-width: 2.6; }

/* ---------- v1.12.0: SleepAdvisor, the sleep game ---------- */
.eh { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; padding: 10px 0 28px; min-width: 0; --c: #5B57C9; }
.eh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eh-brand b { font: 900 1.7rem/1 var(--font); letter-spacing: -.03em; color: #28306B; } .eh-brand b span { color: #E4577A; }
.eh-brand small { display: block; color: var(--muted); font-weight: 600; margin-top: 2px; }
.eh-hud { display: flex; gap: 6px; }
.eh-hud > span { background: #fff; border-radius: 999px; padding: 6px 11px; font-weight: 800; font-size: 14px; box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.eh-coins.pop { animation: ehPop .4s ease; } @keyframes ehPop { 40% { transform: scale(1.25); } }
.eh-stars { color: #C98500; }
/* Nindi */
.nd { display: inline-grid; flex: none; } .nd svg { display: block; width: 56px; height: 56px; }
.nd.sm svg { width: 44px; height: 44px; } .nd.xs svg { width: 30px; height: 30px; }
.nd .nd-eyes { transform-origin: 32px 29px; animation: ndBlink 4.5s infinite; }
@keyframes ndBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.eh-say { display: flex; gap: 10px; align-items: flex-end; }
.eh-say p, .eh-bubble { margin: 0; background: #fff; border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-size: 14.5px; line-height: 1.45; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 24px -18px rgba(18,63,99,.5); flex: 1; min-width: 0; }
.eh-bubble.pop { animation: rtPop .3s ease both; }
/* The world map: morning at the top, night lower down, the Lab at dawn */
.eh-path { list-style: none; margin: 0; padding: 26px 12px 30px; border-radius: 30px; display: grid; gap: 4px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FFF3D6 0%, #FFE2B8 22%, #FFC9A0 42%, #8E7BD1 62%, #2C2F6E 82%, #1B2350 100%); }
.eh-path::before { content: ''; position: absolute; left: 50%; top: 40px; bottom: 40px; width: 6px; margin-left: -3px; border-radius: 3px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.7) 0 10px, transparent 10px 20px); }
.eh-stop { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: 92px; }
.eh-stop:nth-child(odd) .eh-node { grid-column: 2; transform: translateX(-46px); } .eh-stop:nth-child(even) .eh-node { grid-column: 2; transform: translateX(46px); }
.eh-stop:nth-child(odd) .eh-node-t { grid-column: 3; grid-row: 1; } .eh-stop:nth-child(even) .eh-node-t { grid-column: 1; grid-row: 1; text-align: right; }
.eh-node { position: relative; width: 72px; height: 72px; border-radius: 24px; border: 0; cursor: pointer; display: grid; place-items: center; font-size: 34px; background: var(--c);
  box-shadow: inset 0 -7px 0 rgba(0,0,0,.22), inset 0 3px 0 rgba(255,255,255,.3), 0 10px 18px -8px rgba(0,0,0,.45); transition: transform .15s ease; }
.eh-node:active { transform: translateY(3px) scale(.96) !important; }
.eh-stop.locked .eh-node { background: #B9B6C9; cursor: default; filter: grayscale(.6); font-size: 26px; }
.eh-stop.here .eh-node { animation: ehBob 1.6s ease-in-out infinite; box-shadow: inset 0 -7px 0 rgba(0,0,0,.22), inset 0 3px 0 rgba(255,255,255,.3), 0 0 0 6px rgba(255,255,255,.55), 0 14px 22px -8px rgba(0,0,0,.5); }
@keyframes ehBob { 50% { margin-top: -6px; } }
.eh-node-e { line-height: 1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.18)); }
.eh-me { position: absolute; top: -26px; right: -18px; font-size: 30px; animation: ehBob 1s ease-in-out infinite; }
.eh-node-t { display: grid; gap: 1px; min-width: 0; } .eh-node-t b { font-size: 15px; } .eh-node-t small { font-size: 12px; opacity: .8; font-weight: 600; }
.eh-stop:nth-child(n+5) .eh-node-t { color: #fff; }
.eh-st { color: #FFC21A; letter-spacing: 1px; font-size: 13px; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.eh-map-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); }
.eh-reset { border: 0; background: none; color: var(--muted); text-decoration: underline; font: 600 13px var(--font); cursor: pointer; }
/* A level */
.eh-lhead { display: flex; align-items: center; gap: 10px; } .eh-lt { flex: 1; display: flex; gap: 8px; align-items: center; font-size: 17px; } .eh-lt span { font-size: 24px; }
.eh-say.lv .eh-bubble { font-size: 14px; }
.eh-stage { display: grid; gap: 12px; min-width: 0; }
.eh-prog { display: flex; gap: 4px; } .eh-prog i { flex: 1; height: 7px; border-radius: 4px; background: rgba(0,0,0,.08); } .eh-prog i.on { background: var(--c); } .eh-prog i.now { background: color-mix(in srgb, var(--c) 45%, #fff); }
.eh-card { background: #fff; border-radius: 26px; padding: 18px; display: grid; gap: 12px; box-shadow: 0 4px 0 rgba(0,0,0,.06), 0 24px 46px -32px rgba(18,63,99,.45); }
.eh-card.eh-in { animation: spIn .25s ease both; }
.eh-q { display: grid; gap: 4px; justify-items: start; } .eh-q b { font-size: 1.18rem; line-height: 1.3; letter-spacing: -.01em; } .eh-q small { color: var(--muted); }
.eh-qe { font-size: 34px; line-height: 1; }
.eh-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.eh-opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .eh-opts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .eh-opts.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eh-opts.col { grid-template-columns: 1fr; }
.eh-opt { border: 0; border-radius: 16px; padding: 12px 8px 14px; background: #F3F2F8; cursor: pointer; display: grid; justify-items: center; gap: 4px; text-align: center; font: 700 13.5px/1.25 var(--font); color: #1D1D1F;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); transition: transform .1s ease, background .15s ease; }
.eh-opt.row { grid-template-columns: auto 1fr; justify-items: start; text-align: left; padding: 13px 14px 15px; font-size: 14.5px; align-items: center; gap: 10px; }
.eh-opt:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); }
.eh-opt.on { background: var(--c); color: #fff; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25); }
.eh-oe { font-size: 22px; line-height: 1; }
.eh-sub { display: grid; gap: 8px; } .eh-sub small, .eh-sublab { font-weight: 500; color: var(--muted); font-size: 12px; letter-spacing: 0; }
.eh-cfoot { display: flex; justify-content: space-between; align-items: center; } .eh-count { color: var(--muted); font-weight: 700; }
.eh-done { display: flex; justify-content: center; }
.eh-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.eh-tile { border: 0; border-radius: 16px; padding: 12px 6px; background: #F3F2F8; display: grid; gap: 4px; justify-items: center; cursor: pointer; font: 600 12.5px/1.25 var(--font); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); }
.eh-tile span { font-size: 26px; } .eh-tile.on { background: var(--c); color: #fff; }
.eh-know { justify-self: start; border: 0; background: none; color: #2F4C8F; font: 700 13px var(--font); cursor: pointer; display: inline-flex; gap: 4px; align-items: center; } .eh-know svg { width: 16px; height: 16px; }
.eh-meter { display: flex; gap: 10px; align-items: center; justify-content: center; } .eh-val { font-size: 1.4rem; min-width: 80px; text-align: center; }
/* Level clear */
.eh-clear { position: fixed; inset: 0; z-index: 70; background: rgba(15,20,50,.55); display: grid; place-items: center; padding: 16px; animation: rpFade .2s ease both; }
.eh-clear-in { background: #fff; border-radius: 30px; padding: 26px 22px 20px; width: min(380px, 100%); display: grid; gap: 8px; justify-items: center; text-align: center; animation: ggUp .45s cubic-bezier(.2,1.4,.4,1) both; position: relative; }
.eh-clear-in small { font-weight: 500; letter-spacing: 0; color: #E4577A; } .eh-clear-in h2 { margin: 0; font-size: 1.4rem; } .eh-clear-in p { margin: 0; color: var(--ink-2); }
.eh-burst { position: absolute; top: -26px; font-size: 44px; animation: ndBlink 2s infinite; }
.eh-big-stars { display: flex; gap: 6px; font-size: 44px; color: #E3E1EA; } .eh-big-stars .on { color: #FFC21A; animation: ehStar .5s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--d) * .15s); text-shadow: 0 3px 0 #D99A00; }
@keyframes ehStar { from { transform: scale(0) rotate(-90deg); } }
.eh-clear-acts { display: flex; gap: 26px; margin-top: 6px; }
/* Base camp */
.eh-search { width: 100%; box-sizing: border-box; border: 0; border-radius: 16px; background: #F3F2F8; padding: 14px 16px; font: 600 16px var(--font); box-shadow: inset 0 2px 0 rgba(0,0,0,.05); }
.eh-search:focus { outline: none; box-shadow: inset 0 0 0 2px var(--c); } .eh-search.sm { padding: 10px 14px; font-size: 15px; }
.eh-geo { display: grid; gap: 4px; } .eh-geo-i { border: 0; background: #fff; border-radius: 12px; padding: 10px 12px; text-align: left; cursor: pointer; display: grid; font: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.eh-geo-i small { color: var(--muted); } .eh-geo-i:hover { background: #F7F6FC; }
.eh-loading { display: grid; justify-items: center; gap: 6px; padding: 18px; } .eh-spin { font-size: 44px; animation: ehSpin 2s linear infinite; } @keyframes ehSpin { to { transform: rotate(360deg); } }
.eh-climate { background: #fff; border-radius: 26px; padding: 18px; display: grid; gap: 12px; box-shadow: 0 4px 0 rgba(0,0,0,.06); }
.eh-climate.eh-in { animation: ggUp .45s cubic-bezier(.2,1.2,.4,1) both; }
.eh-cl-top { display: grid; gap: 2px; } .eh-cl-top b { font-size: 1.4rem; } .eh-cl-top small { color: var(--muted); }
.eh-zone { justify-self: start; background: #2E7D6B; color: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 12.5px; letter-spacing: .03em; }
.eh-tonight { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; background: linear-gradient(135deg, #28306B, #4C4FA8); color: #fff; border-radius: 18px; padding: 12px 14px; }
.eh-tonight span { grid-row: span 2; font-weight: 800; align-self: center; } .eh-tonight small { opacity: .85; }
.eh-chart svg { display: block; } .eh-src { color: var(--muted); font-size: 12px; }
/* The bedroom */
.eh-rtools { display: flex; gap: 8px; flex-wrap: wrap; }
.eh-tool { border: 0; border-radius: 999px; padding: 8px 14px; background: #fff; font: 700 13.5px var(--font); cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.eh-room { position: relative; border-radius: 28px; overflow: hidden; background: radial-gradient(120% 90% at 50% 10%, #FFFFFF, #EAE4F6); aspect-ratio: 4 / 3; min-height: 280px; }
.eh-room.flat { aspect-ratio: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; }
@media (max-width: 600px) { .eh-room { aspect-ratio: 3 / 4; } }
.eh-fspot { border: 0; border-radius: 16px; background: #fff; padding: 12px 6px; display: grid; gap: 4px; justify-items: center; cursor: pointer; font: 600 12.5px var(--font); box-shadow: 0 0 0 3px #F2A33A; }
.eh-fspot span { font-size: 26px; } .eh-fspot.done { box-shadow: 0 0 0 3px #2E7D6B; }
.eh-rcount { text-align: center; color: var(--muted); font-weight: 700; }
.b3 { position: absolute; inset: 0; } .b3-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.b3-marks { position: absolute; inset: 0; pointer-events: none; }
.b3-mk { position: absolute; left: 0; top: 0; pointer-events: auto; border: 0; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 22px; cursor: pointer; padding: 0;
  box-shadow: 0 0 0 3px #F2A33A, 0 6px 14px -6px rgba(0,0,0,.4); will-change: transform; -webkit-tap-highlight-color: transparent; }
.b3-mk.clue { animation: b3Glow 1.8s ease-out infinite; }
.b3-mk.done { box-shadow: 0 0 0 3px #2E7D6B, 0 6px 14px -6px rgba(0,0,0,.4); } .b3-mk.done span { opacity: .55; }
.b3-mk.ai { box-shadow: 0 0 0 3px #8E44AD, 0 0 0 10px rgba(142,68,173,.25); }
.b3-mk i { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; font: 800 10px/18px var(--font); font-style: normal; color: #fff; background: #F2A33A; }
.b3-mk.done i { background: #2E7D6B; } .b3-mk.ai i { background: #8E44AD; }
@keyframes b3Glow { 0% { box-shadow: 0 0 0 3px #F2A33A, 0 0 0 0 rgba(242,163,58,.6); } 100% { box-shadow: 0 0 0 3px #F2A33A, 0 0 0 16px rgba(242,163,58,0); } }
.eh-photo { display: grid; gap: 8px; background: #fff; border-radius: 22px; padding: 10px; }
.eh-photo img { width: 100%; max-height: 360px; object-fit: contain; border-radius: 14px; background: #F3F2F8; }
.eh-photo-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .eh-photo-bar small { flex: 1; min-width: 180px; color: var(--ink-2); }
.eh-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(15,30,38,.32); display: grid; align-items: end; justify-items: center; animation: rpFade .2s ease both; }
.eh-sheet-in { width: min(600px, 100%); box-sizing: border-box; background: #fff; border-radius: 28px 28px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 12px; max-height: 86vh; overflow: auto; animation: rpUp .26s cubic-bezier(.2,.8,.2,1) both; }
.eh-sheet-in::before { content: ''; justify-self: center; width: 38px; height: 5px; border-radius: 3px; background: #DADADF; }
.eh-sh-h { display: flex; gap: 8px; align-items: center; font-size: 1.2rem; } .eh-sh-h span { font-size: 28px; }
.eh-lore { display: flex; gap: 8px; align-items: center; background: #F4F1FB; border-radius: 14px; padding: 8px 12px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.eh-rows { display: grid; gap: 10px; }
.eh-row { display: grid; gap: 8px; background: #F8F8FA; border-radius: 16px; padding: 12px; } .eh-row > b { font-size: 14.5px; line-height: 1.3; }
.eh-inline { display: grid; gap: 10px; } .eh-inline .eh-q b { font-size: 14.5px; } .eh-inline .eh-qe { font-size: 22px; }
.eh-seg { display: flex; background: #EBEBEF; border-radius: 12px; padding: 3px; gap: 2px; }
.eh-seg button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 8px 4px; font: 700 13px var(--font); color: #3A3A3F; cursor: pointer; }
.eh-seg button.on { background: #fff; color: #1D1D1F; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.eh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.eh-chip { border: 0; border-radius: 999px; padding: 8px 12px; background: #fff; font: 600 13px var(--font); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.eh-chip.on { background: #0F766E; color: #fff; } .eh-chip.ai { box-shadow: 0 0 0 2px #8E44AD; }
.eh-ai { color: #6B2F8A; font-weight: 700; }
@media (max-width: 600px) {
  .eh-opts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eh-stop:nth-child(odd) .eh-node { transform: translateX(-30px); } .eh-stop:nth-child(even) .eh-node { transform: translateX(30px); }
  .eh-node { width: 64px; height: 64px; font-size: 30px; }
  .eh-card { padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .eh-stop.here .eh-node, .eh-me, .b3-mk.clue, .eh-spin, .nd .nd-eyes, .eh-big-stars .on { animation: none; } }

/* ---------- The Lab (the SleepAdvisor report) ---------- */
.lb { display: grid; gap: 18px; }
.lb-hero { background: #fff; border-radius: 28px; padding: 20px; display: grid; gap: 16px; box-shadow: 0 4px 0 rgba(0,0,0,.05); }
.lb-score { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .lb-score > div { display: grid; gap: 2px; }
.lb-word { font-size: 1.6rem; letter-spacing: -.02em; } .lb-word::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--s); margin-right: 8px; vertical-align: 2px; }
.lb-type { display: flex; gap: 12px; align-items: center; background: linear-gradient(135deg, #EFEEFB, #FBEFF4); border-radius: 20px; padding: 14px; }
.lb-type-e { font-size: 44px; } .lb-type small { font-weight: 500; color: #5B57C9; letter-spacing: 0; font-size: 11.5px; } .lb-type b { display: block; font-size: 1.25rem; } .lb-type p { margin: 2px 0 0; color: var(--ink-2); }
.lb-scope { background: linear-gradient(160deg, #1B2350, #3B3F8F); color: #fff; border-radius: 22px; padding: 14px 16px; display: grid; gap: 8px; }
.lb-scope-h { display: flex; gap: 10px; align-items: center; } .lb-scope-h small { display: block; opacity: .75; font-size: 11.5px; }
.lb-scope ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.lb-sec { background: #fff; border-radius: 28px; padding: 20px; display: grid; gap: 14px; box-shadow: 0 4px 0 rgba(0,0,0,.05); min-width: 0; }
.lb-sec h2 { margin: 0; display: flex; gap: 10px; align-items: center; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.lb-sec h2 span { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; background: #28306B; color: #fff; font: 800 15px var(--font); }
.lb-sec h3 { margin: 4px 0 0; } .lb-lead, .lb-note { margin: 0; color: var(--ink-2); line-height: 1.5; } .lb-note { font-size: 13px; }
.lb-rings { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.lb-ring { display: grid; justify-items: center; gap: 2px; text-align: center; } .lb-ring b { font-size: 13px; } .lb-ring small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.lb-night { display: grid; gap: 6px; } .lb-svg svg { display: block; max-width: 100%; }
.lb-insl { display: grid; gap: 12px; }
.lb-ins { background: #F8F7FC; border-radius: 22px; padding: 16px; display: grid; gap: 10px; }
.lb-ins-h { display: flex; gap: 10px; align-items: center; } .lb-ins-e { font-size: 30px; } .lb-ins-h b { font-size: 1.08rem; line-height: 1.3; }
.lb-ins p { margin: 0; line-height: 1.5; font-size: 14px; } .lb-act { display: flex; gap: 6px; align-items: flex-start; color: #1E5E50; font-weight: 600; } .lb-act svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.lb-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 2px; align-items: center; counter-reset: ch; }
.lb-chain li { background: #ECEBFA; color: #28306B; border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.lb-chain li:last-child { background: #5B57C9; color: #fff; }
.lb-chain li:not(:last-child)::after { content: ' →'; opacity: .8; }
.lb-more summary, .lb-refs summary { cursor: pointer; font-weight: 700; color: #2F4C8F; }
.lb-paths { display: grid; gap: 8px; margin-top: 8px; } .lb-path { background: #FAFAFC; border-radius: 14px; padding: 10px 12px; display: grid; gap: 6px; }
.lb-p-st { font-size: 12px; font-weight: 800; color: var(--muted); } .lb-p-st.strong { color: #0A7A0A; }
.lb-p-ch { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .lb-p-ch span { background: #fff; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px #E1E1E6; }
.lb-p-ch span.st { background: var(--d); color: #fff; box-shadow: none; } .lb-p-ch i { font-style: normal; color: var(--muted); } .lb-path small { color: var(--ink-2); }
.lb-bars { display: grid; gap: 14px; }
.lb-bar { display: grid; gap: 6px; } .lb-bar-h { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .lb-bar-h b { font-size: 14.5px; }
.lb-min { background: #E7F5EC; color: #136B3A; border-radius: 999px; padding: 2px 9px; font-weight: 700; font-size: 11.5px; }
.lb-track { height: 10px; border-radius: 5px; background: #F0EFF5; overflow: hidden; } .lb-track i { display: block; height: 100%; border-radius: 4px; background: #5B57C9; }
.lb-bar p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.lb-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lb-plan li { display: grid; grid-template-columns: 112px 1fr; gap: 2px 12px; padding: 10px 12px; border-radius: 14px; background: #FAFAFC; font-size: 13.5px; line-height: 1.45; }
.lb-plan li.you { background: #FFF4E0; } .lb-plan li small { grid-column: 2; color: #8A4B00; font-weight: 700; }
.lb-fc { display: grid; gap: 10px; }
.lb-fc-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; } .lb-fc-n b { display: block; font-size: 14px; } .lb-fc-n small { color: var(--muted); font-size: 11.5px; }
.lb-fc-cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.lb-fc-c { border-radius: 8px; background: color-mix(in srgb, var(--s) 22%, #fff); display: grid; justify-items: center; padding: 4px 0; cursor: help; }
.lb-fc-c small { font-size: 10px; color: var(--muted); font-weight: 700; } .lb-fc-c i { font-style: normal; font-weight: 900; font-size: 13px; color: #1D1D1F; }
.lb-fc-c.now { box-shadow: 0 0 0 2px #1D1D1F; }
.lb-fc-add { display: grid; gap: 6px; }
.lb-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .lb-tips li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; } .lb-tips li span { font-size: 20px; }
.lb-zone { background: #F3FAF7; border-radius: 18px; padding: 12px 14px; } .lb-zone p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; }
.lb-refs ol { font-size: 12.5px; line-height: 1.5; display: grid; gap: 4px; padding-left: 22px; } .lb-cite { color: #2F4C8F; font-weight: 700; }
.lb-acts { display: grid; gap: 14px; justify-items: center; } .lb-acts > .sp-offer, .lb-acts > .sp-next { width: 100%; }
@media (max-width: 600px) {
  .lb-sec, .lb-hero { padding: 16px 14px; border-radius: 22px; }
  .lb-fc-row { grid-template-columns: 1fr; gap: 4px; }
  .lb-plan li { grid-template-columns: 1fr; } .lb-plan li small { grid-column: 1; }
}

.lb-how summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: #2F4C8F; } .lb-how p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.lb-night .lb-svg, .lb-sec .eh-chart { max-width: 560px; } .lb-rings { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }

/* ---------- v1.13.0: SleepAdvisor as a game ---------- */
.eh-hud > span.eh-dexn { color: #5B57C9; }
.eh-combo { flex: none; font: 900 13px var(--font); color: #E4572E; opacity: 0; transform: scale(.6); transition: all .2s ease; align-self: center; }
.eh-combo.on { opacity: 1; transform: scale(1); animation: ehPop .4s ease; }
.eh-dexrow { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 26px; background: #fff; border-radius: 999px; padding: 6px 12px; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.eh-stop.boss .eh-node { background: radial-gradient(circle at 50% 35%, #FF7A59, #B3261E); }
.eh-play { min-height: 380px; display: grid; align-content: start; gap: 12px; }
/* Swipe deck */
.dk-stack { position: relative; height: 300px; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.dk-card { position: absolute; inset: 6px 10px; border-radius: 28px; background: #fff; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 22px 20px; text-align: center;
  box-shadow: 0 6px 0 rgba(0,0,0,.07), 0 26px 44px -26px rgba(18,63,99,.5); transition: transform .22s ease, opacity .22s ease; --y: 0; --n: 0; --s: 0; cursor: grab; }
.dk-card.under { transform: translateY(14px) scale(.94); opacity: .55; pointer-events: none; }
.dk-card.top { animation: dkIn .25s cubic-bezier(.2,1.2,.4,1) both; } @keyframes dkIn { from { transform: translateY(14px) scale(.94); opacity: .5; } }
.dk-card.drag { transition: none; cursor: grabbing; }
.dk-card.fly-yes { transform: translate(140%, -20px) rotate(20deg) !important; opacity: 0; }
.dk-card.fly-no { transform: translate(-140%, -20px) rotate(-20deg) !important; opacity: 0; }
.dk-card.fly-ns { transform: translate(0, 120%) !important; opacity: 0; }
.dk-card.flip { animation: dkFlip .35s ease both; cursor: default; align-content: start; } @keyframes dkFlip { from { transform: rotateY(90deg); } }
.dk-e { font-size: 76px; line-height: 1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.12)); } .dk-e.sm { font-size: 40px; }
.dk-card > b { font-size: 1.28rem; line-height: 1.3; letter-spacing: -.01em; max-width: 320px; } .dk-card > small { color: var(--muted); font-weight: 600; }
.dk-ai { font-size: 12.5px; font-weight: 800; color: #6B2F8A; background: #F3E8FA; border-radius: 999px; padding: 4px 10px; }
.dk-stamp { position: absolute; top: 18px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 900 28px var(--font); color: #fff; pointer-events: none; }
.dk-stamp.yes { right: 18px; background: #0CA30C; opacity: var(--y); transform: scale(calc(.5 + var(--y) * .5)); }
.dk-stamp.no { left: 18px; background: #D03B3B; opacity: var(--n); transform: scale(calc(.5 + var(--n) * .5)); }
.dk-stamp.ns { left: 50%; margin-left: -27px; top: auto; bottom: 14px; background: #8A8A8F; opacity: var(--s); }
.dk-btns { display: flex; justify-content: center; gap: 22px; align-items: center; }
.dk-b { width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; font: 900 28px var(--font); background: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.08), 0 14px 22px -12px rgba(0,0,0,.35); transition: transform .1s ease; }
.dk-b:active { transform: translateY(3px) scale(.95); }
.dk-b.yes { color: #0CA30C; } .dk-b.no { color: #D03B3B; } .dk-b.ns { width: 48px; height: 48px; font-size: 20px; color: #8A8A8F; }
.dk-left { text-align: center; color: var(--muted); font-weight: 700; }
.dk-row { display: grid; gap: 6px; width: 100%; } .dk-row small { font-weight: 500; color: var(--muted); font-size: 11.5px; letter-spacing: 0; }
.dk-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dk-pick button { border: 0; border-radius: 14px; padding: 10px 4px; background: #F3F2F8; display: grid; gap: 2px; justify-items: center; cursor: pointer; box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); font: 600 11.5px/1.2 var(--font); }
.dk-pick button span { font-size: 20px; } .dk-pick button i { font-style: normal; }
.dk-pick button.on { background: var(--c); color: #fff; }
/* Tiles and faces */
.eh-tiles2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; width: 100%; }
.eh-tile2 { border: 0; border-radius: 18px; padding: 14px 6px 12px; background: #F3F2F8; display: grid; gap: 6px; justify-items: center; cursor: pointer; text-align: center; font: 700 12.5px/1.25 var(--font); color: #1D1D1F; box-shadow: inset 0 -5px 0 rgba(0,0,0,.08); transition: transform .1s ease; }
.eh-tile2 span { font-size: 34px; line-height: 1; } .eh-tile2:active { transform: translateY(2px); } .eh-tile2.on { background: var(--c); color: #fff; }
.eh-faces { display: grid; gap: 8px; width: 100%; }
.eh-face { border: 0; border-radius: 18px; padding: 10px 14px; background: #F3F2F8; display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; text-align: left; cursor: pointer; font: 700 14px/1.3 var(--font); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); }
.eh-face span { font-size: 32px; } .eh-face.on { background: var(--c); color: #fff; }
.eh-face.l3:hover { background: #E7F5EC; } .eh-face.l0:hover { background: #FBE7E7; }
.eh-card { justify-items: center; text-align: center; } .eh-card .eh-q { justify-items: center; }
/* Visual sliders */
.gx { display: grid; gap: 10px; width: 100%; justify-items: center; }
.gx-val { font-size: 1.1rem; } .gx-val.big { font-size: 2rem; letter-spacing: -.02em; }
.gx-hint { color: var(--muted); font-weight: 600; }
.gx-range { width: 100%; max-width: 420px; accent-color: var(--c); height: 34px; }
.gx-sky { position: relative; width: 100%; height: 150px; border-radius: 22px; overflow: hidden; --d: .5;
  background: linear-gradient(180deg, color-mix(in srgb, #0E1240 calc(40% + var(--d) * 60%), #F28C5A), color-mix(in srgb, #28306B calc(30% + var(--d) * 70%), #FFC48A)); }
.gx-moon { position: absolute; font-size: 44px; transform: translate(-50%, -50%); transition: left .2s ease, top .2s ease; filter: drop-shadow(0 0 14px rgba(255,240,180,.8)); }
.gx-stars { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent), radial-gradient(1px 1px at 45% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 55%, #fff, transparent), radial-gradient(1px 1px at 10% 70%, #fff, transparent); opacity: var(--d); }
.gx-thermo { display: flex; gap: 18px; align-items: center; }
.gx-tube { position: relative; width: 26px; height: 170px; border-radius: 13px; background: #EEEDF3; overflow: hidden; box-shadow: inset 0 0 0 3px #fff; }
.gx-merc { position: absolute; left: 6px; right: 6px; bottom: 6px; border-radius: 8px; transition: height .15s ease, background .2s ease; }
.gx-band { position: absolute; left: 0; right: 0; background: rgba(12,163,12,.18); }
.gx-thermo > div:last-child { display: grid; gap: 4px; } .gx-face { font-size: 42px; } .gx-thermo small { color: var(--muted); font-weight: 700; }
.gx-room { position: relative; width: 100%; height: 160px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #F4EEE4, #E2CDB0); --o: .5; }
.gx-bed { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 72px; }
.gx-shade { position: absolute; inset: 0; background: #070A1C; transition: opacity .2s ease; }
.gx-room[data-v="0"] .gx-shade { opacity: .96; } .gx-room[data-v="1"] .gx-shade { opacity: .82; } .gx-room[data-v="2"] .gx-shade { opacity: .55; } .gx-room[data-v="3"] .gx-shade { opacity: .18; }
.gx-led { position: absolute; z-index: 2; right: 22%; bottom: 40%; width: 6px; height: 6px; border-radius: 50%; background: #39FF6A; box-shadow: 0 0 8px #39FF6A; opacity: 0; }
.gx-street { position: absolute; z-index: 1; left: 10%; top: 12%; width: 60px; height: 70px; border-radius: 6px; background: radial-gradient(circle at 50% 20%, #FFD98A, rgba(255,217,138,.1)); opacity: 0; }
.gx-tv { position: absolute; z-index: 2; right: 8%; bottom: 18px; font-size: 34px; font-style: normal; opacity: 0; }
.gx-room[data-v="1"] .gx-led, .gx-room[data-v="2"] .gx-led, .gx-room[data-v="2"] .gx-street, .gx-room[data-v="3"] .gx-street, .gx-room[data-v="3"] .gx-tv { opacity: 1; }
.gx-lamp { width: 100%; height: 150px; border-radius: 22px; display: grid; place-items: center; font-size: 60px; transition: background .2s ease;
  background: radial-gradient(circle at 50% 45%, var(--l) 0%, color-mix(in srgb, var(--l) calc(var(--g) * 100%), #1B2350) 55%, #1B2350 100%); }
.gx-day { position: relative; width: 100%; height: 140px; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, #8CCBF2 calc(var(--h) * 100%), #DDE3EA), #F7F3EA); --h: .5; }
.gx-day span { position: absolute; left: 50%; font-size: calc(36px + var(--h) * 34px); transform: translate(-50%, -50%); top: calc(85% - var(--h) * 55%); transition: all .2s ease; filter: drop-shadow(0 0 calc(var(--h) * 24px) #FFD54A); }
/* Thief appears */
.eh-thief-pop { position: fixed; z-index: 80; left: 50%; top: 84px; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 22px; padding: 12px 18px 12px 12px; min-width: 240px;
  box-shadow: 0 0 0 3px var(--r), 0 22px 40px -16px rgba(0,0,0,.45); animation: tpIn .5s cubic-bezier(.2,1.5,.4,1) both; }
.eh-thief-pop.out { animation: tpOut .4s ease both; }
@keyframes tpIn { from { transform: translate(-50%, -40px) scale(.6); opacity: 0; } } @keyframes tpOut { to { transform: translate(-50%, -30px); opacity: 0; } }
.eh-tp-e { font-size: 48px; animation: ehBob 1s ease-in-out infinite; } .eh-thief-pop small { display: block; font-weight: 800; color: var(--muted); } .eh-thief-pop b { display: block; font-size: 1.1rem; }
.eh-thief-pop i { font-style: normal; font: 500 12px var(--font); letter-spacing: 0; color: var(--r); }
.eh-clear-dex { display: grid; gap: 4px; justify-items: center; } .eh-clear-dex small { font-weight: 800; color: #5B57C9; } .eh-clear-dex div { font-size: 28px; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.eh-sh-h { position: relative; } .eh-sh-x { margin-left: auto; border: 0; background: #F3F2F8; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 15px; }
.eh-sh-play { min-height: 300px; display: grid; align-content: start; gap: 10px; }
.eh-sh-play .eh-card { box-shadow: none; padding: 6px 4px; }
.eh-sh-done { display: grid; justify-items: center; gap: 6px; padding: 40px 0; font-size: 1.1rem; } .eh-sh-done span { font-size: 54px; animation: ehStar .5s cubic-bezier(.2,1.6,.4,1) both; }
@media (max-width: 600px) { .dk-stack { height: 280px; } .dk-e { font-size: 64px; } }
@media (prefers-reduced-motion: reduce) { .dk-card, .dk-card.top, .eh-thief-pop, .eh-tp-e, .eh-combo.on { animation: none; transition: none; } }

/* ---------- v1.13.0: the Lab ---------- */
.lb-sec h2 span { width: auto; height: auto; background: none; font-size: 22px; }
.lb-cap { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.lb-svg.narrow svg { max-width: 360px; margin: 0 auto; }
.lb-boss { background: linear-gradient(160deg, #1B2350, #3B2F6E 60%, #6E2F4A); color: #fff; border-radius: 30px; padding: 20px; display: grid; gap: 12px; box-shadow: 0 6px 0 rgba(0,0,0,.12); }
.lb-boss .lb-cap, .lb-boss .muted { color: rgba(255,255,255,.75); }
.lb-boss-h { display: flex; gap: 14px; align-items: center; } .lb-boss-e { font-size: 72px; line-height: 1; animation: ehBob 1.6s ease-in-out infinite; filter: drop-shadow(0 8px 12px rgba(0,0,0,.35)); }
.lb-boss-h small { font: 500 12px var(--font); letter-spacing: 0; } .lb-boss-h b { display: block; font-size: 1.5rem; letter-spacing: -.02em; } .lb-boss-h span:last-child { opacity: .8; font-size: 13px; }
.lb-boss.won .lb-boss-e { animation: bossDown .8s ease both; } @keyframes bossDown { to { transform: rotate(90deg) translateY(10px); opacity: .4; filter: grayscale(1); } }
.lb-hp { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; } .lb-hp small { font-weight: 800; }
.lb-hp-bar { height: 16px; border-radius: 8px; background: rgba(255,255,255,.15); overflow: hidden; } .lb-hp-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #FF5A5A, #FFB347); transition: width .5s cubic-bezier(.2,1,.4,1); }
.lb-hp > b { min-width: 72px; text-align: right; }
.lb-fixes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.lb-fix { position: relative; border: 0; border-radius: 18px; padding: 10px 6px; background: rgba(255,255,255,.1); color: #fff; display: grid; gap: 4px; justify-items: center; cursor: pointer; font: 700 12px/1.25 var(--font); text-align: center; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2); }
.lb-fix span { font-size: 26px; } .lb-fix i { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 11px; }
.lb-fix.on { background: #FFC21A; color: #1D1D1F; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), 0 0 0 3px #fff; }
.lb-boss-score { display: flex; justify-content: center; align-items: center; gap: 10px; background: #fff; border-radius: 22px; padding: 10px; color: #1D1D1F; }
.lb-delta { font-size: 1.8rem; color: #0A7A0A; min-width: 50px; }
.lb-gauge svg { display: block; }
.lb-mini { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.lb-chip { display: inline-flex; gap: 6px; align-items: center; background: #F3F2F8; border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 700; } .lb-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--s); }
.lb-legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.lb-legend span::before { content: ''; display: inline-block; width: 16px; height: 3px; background: var(--c); margin-right: 6px; vertical-align: 3px; border-radius: 2px; }
.lb-legend span.dash::before { background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 8px); }
.lb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
.lb-donut { display: flex; gap: 12px; align-items: center; } .lb-donut ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1; min-width: 0; }
.lb-donut li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: 13px; } .lb-donut li i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); } .lb-donut li b { font-variant-numeric: tabular-nums; }
.lb-verd { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lb-verd li { display: grid; grid-template-columns: 28px 1fr; gap: 0 8px; padding: 10px 12px; border-radius: 14px; background: #FAFAFC; } .lb-verd li span { grid-row: span 2; font-size: 20px; } .lb-verd li small { color: var(--ink-2); }
.lb-verd li.explained { background: #FFF1EA; } .lb-verd li.unexplained { background: #F4F1FB; }
.lb-dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.lb-tc { border: 0; border-radius: 20px; padding: 10px 8px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--r) 14%, #fff), #fff); display: grid; gap: 4px; justify-items: center; cursor: pointer; text-align: center;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--r) 45%, transparent), 0 4px 0 rgba(0,0,0,.06); font: inherit; transition: transform .12s ease; }
.lb-tc:active { transform: scale(.96); } .lb-tc.on { box-shadow: inset 0 0 0 3px var(--r), 0 8px 18px -8px var(--r); transform: translateY(-2px); }
.lb-tc small { font: 500 12px var(--font); letter-spacing: 0; color: var(--r); } .lb-tc-e { font-size: 40px; } .lb-tc b { font-size: 12.5px; line-height: 1.2; }
.lb-tc-p { width: 100%; height: 6px; border-radius: 3px; background: #EEEDF3; overflow: hidden; } .lb-tc-p i { display: block; height: 100%; background: var(--r); }
.lb-dex-d { margin-top: 10px; } .lb-dd { background: #F8F7FC; border-radius: 22px; padding: 14px; display: grid; gap: 10px; }
.lb-dd-h { display: flex; gap: 10px; align-items: center; } .lb-dd-h span { font-size: 34px; } .lb-dd-h small { color: var(--muted); margin-left: auto; }
.lb-chainline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .lb-ci { width: 36px; height: 36px; border-radius: 12px; background: #fff; display: grid; place-items: center; font-size: 18px; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.lb-chainline > i { font-style: normal; color: var(--muted); } .lb-chainline small { flex: 1; min-width: 140px; font-weight: 700; font-size: 12.5px; }
.lb-dd .lb-ins { background: #fff; } .lb-dd details summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: #2F4C8F; } .lb-dd details p { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.lb-clockw { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 14px; align-items: center; }
.lb-plan2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lb-plan2 li { display: grid; grid-template-columns: 30px 1fr; gap: 0 8px; font-size: 13px; padding: 6px 10px; border-radius: 12px; } .lb-plan2 li span { grid-row: span 2; font-size: 20px; } .lb-plan2 li small { color: var(--ink-2); }
.lb-plan2 li.you { background: #FFF4D6; }
.lb-fc-row.head .lb-fc-cells small { text-align: center; font-size: 10px; color: var(--muted); font-weight: 700; }
.lb-fc-c { background: color-mix(in srgb, var(--s) calc(var(--a) * 100%), #fff); min-height: 30px; place-items: center; }
.lb-fc-c i { color: #1D1D1F; }
.lb-small { gap: 8px; } .lb-small details summary { cursor: pointer; font-weight: 700; } .lb-small details p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 640px) { .lb-two, .lb-clockw { grid-template-columns: 1fr; } .lb-donut { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .lb-boss-e { animation: none; } }
@media (max-width: 480px) {
  .eh-lhead .eh-lt b { font-size: 15px; line-height: 1.15; } .eh-lhead .eh-lt span { font-size: 20px; }
  .eh-hud { gap: 4px; } .eh-hud > span { padding: 5px 8px; font-size: 12.5px; }
  .eh-thief-pop { top: 64px; }
}
.lb-legend.dots span::before { width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; }

/* ---------- v1.14.0: SleepAdvisor, your sleep twin in 3D ---------- */
.eh * { box-sizing: border-box; }
.eh-home, .eh-build, .eh-sim, .eh-lab { --c: #5B57C9; }
/* Home: the goal at a glance */
.eh-goal { background: linear-gradient(135deg, #28306B, #4C4FA8); color: #fff; border-radius: 24px; padding: 16px 18px; display: grid; gap: 8px; }
.eh-goal > small { font-weight: 500; letter-spacing: 0; font-size: 11.5px; opacity: .85; }
.eh-goal ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.eh-goal li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; font-size: 15px; }
.eh-gs { font-size: 22px; color: rgba(255,255,255,.35); line-height: 1; } .eh-goal li.on .eh-gs { color: #FFC21A; }
.eh-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.eh-how li { display: grid; grid-template-columns: 28px 34px minmax(0, 1fr); gap: 10px; align-items: center; background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 2px 0 rgba(0,0,0,.05); }
.eh-how li.now { box-shadow: 0 0 0 2px var(--c), 0 2px 0 rgba(0,0,0,.05); }
.eh-how-n { width: 26px; height: 26px; border-radius: 50%; background: #EFEEFB; color: var(--c); display: grid; place-items: center; font-weight: 900; font-size: 13px; }
.eh-how li.done .eh-how-n { background: #0CA30C; color: #fff; }
.eh-how-e { font-size: 26px; text-align: center; } .eh-how b { display: block; font-size: 15px; } .eh-how small { color: var(--muted); font-size: 12.5px; line-height: 1.35; display: block; }
.eh-cta { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; padding-top: 4px; }
.eh-fine { margin: 0; text-align: center; color: var(--muted); font-size: 12.5px; }
/* The twin builder */
.eh-bhead { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.eh-bhead small { color: var(--muted); font-weight: 700; font-size: 12px; } .eh-bhead b { display: block; font-size: 17px; line-height: 1.25; }
.eh-ring { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 360deg), #E6E5F0 0); position: relative; }
.eh-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.eh-ring span { position: relative; font-weight: 900; font-size: 12.5px; color: var(--c); }
.eh-build .eh-card { justify-items: stretch; text-align: left; gap: 10px; min-width: 0; }
.eh-build .eh-row { min-width: 0; }
.eh-build .eh-row > small, .eh-sheet .eh-row > small { font-weight: 700; color: #3A3A3F; font-size: 13px; line-height: 1.35; }
.eh-seg.wrap { flex-wrap: wrap; } .eh-seg.wrap button { flex: 1 1 calc(50% - 2px); }
.eh-seg button { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.eh-nav { display: flex; justify-content: space-between; align-items: flex-start; padding: 2px 6px; }
.eh-nav .rb[disabled] { opacity: .35; pointer-events: none; }
.eh-nav .rb.ready .rb-c { animation: b3Glow 1.8s ease-out infinite; }
.eh-build .eh-faces .eh-face { grid-template-columns: 36px minmax(0, 1fr); padding: 8px 12px; font-size: 13.5px; } .eh-build .eh-face span { font-size: 26px; }
.eh-kit { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.eh-kit button { border: 0; border-radius: 14px; background: #EBEBEF; padding: 10px 2px 8px; display: grid; gap: 4px; justify-items: center; cursor: pointer; font: 700 11.5px/1.2 var(--font); color: #3A3A3F; min-width: 0; }
.eh-kit button span { font-size: 24px; } .eh-kit button.on { background: var(--c); color: #fff; }
.eh-use { display: grid; gap: 8px; }
.eh-stepper { display: flex; align-items: center; gap: 14px; justify-content: center; }
.eh-stepper button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; font: 800 20px var(--font); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.eh-stepper b { min-width: 70px; text-align: center; font-size: 18px; }
.eh-build .gx-sky { height: 130px; }
.gx-sunr { position: absolute; bottom: 4px; font-size: 26px; transform: translateX(-50%); transition: left .2s ease; }
.eh-build .eh-row > b { font-size: 16px; }
.eh-inbed { text-align: center; color: var(--ink-2); font-weight: 700; }
.eh-sl-v { display: flex; gap: 8px; align-items: center; min-width: 0; } .eh-sl-v b { font-size: 14.5px; line-height: 1.3; min-width: 0; } .eh-sl-e { font-size: 26px; flex: none; }
.eh-sl .gx-range { max-width: none; }
.eh-know { justify-self: start; border: 0; background: none; color: var(--c); font: 700 13px var(--font); padding: 4px 0; cursor: pointer; }
.eh-build .dk-stack { height: 270px; }
.eh-build .eh-climate { box-shadow: none; padding: 0; }
.eh-tonight > div { min-width: 0; } .eh-tonight b, .eh-tonight small { display: block; }
.eh-reveal { background: #fff; border-radius: 28px; padding: 26px 18px 20px; display: grid; gap: 12px; justify-items: center; text-align: center; position: relative; margin-top: 18px; }
.eh-reveal > small { font-weight: 500; letter-spacing: 0; color: #E4577A; } .eh-reveal h2 { margin: 0; font-size: 1.35rem; } .eh-reveal p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.eh-reveal .eh-nbar { width: 100%; }
/* The night bar */
.eh-nbar { display: grid; gap: 6px; min-width: 0; }
.eh-nbar-c { font-weight: 700; color: var(--muted); }
.eh-nbar-b { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #EEE; }
.eh-nbar-b i { display: block; height: 100%; } .eh-nbar-b .sol { background: #F2A33A; } .eh-nbar-b .tst { background: #5B57C9; } .eh-nbar-b .waso { background: #D03B3B; }
.eh-nbar-k { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-2); }
.eh-nbar-k span { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; } .eh-nbar-k i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.eh-nbar-k .sol i { background: #F2A33A; } .eh-nbar-k .tst i { background: #5B57C9; } .eh-nbar-k .waso i { background: #D03B3B; }
.eh-stars3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.eh-stars3 > div { display: grid; justify-items: center; gap: 2px; } .eh-stars3 span { font-size: 26px; color: #E3E1EA; line-height: 1; } .eh-stars3 small { font-size: 11.5px; color: var(--muted); font-weight: 700; text-align: center; }
.eh-stars3 .on span { color: #FFC21A; text-shadow: 0 2px 0 #D99A00; } .eh-stars3.big span { font-size: 40px; }
/* The simulator */
.eh-sim { max-width: 1100px; }
.eh-hstars { display: flex; gap: 2px; font-size: 22px; color: #E3E1EA; } .eh-hstars .on { color: #FFC21A; text-shadow: 0 2px 0 #D99A00; }
.eh-simgrid { display: grid; gap: 12px; min-width: 0; }
.eh-left, .eh-right { display: grid; gap: 10px; align-content: start; min-width: 0; }
.eh-stage3d { position: relative; border-radius: 26px; overflow: hidden; background: radial-gradient(120% 90% at 50% 10%, #3A3F7A, #1B2350); aspect-ratio: 1 / 1; max-height: 58vh; width: 100%; }
.eh-stage3d.flat { aspect-ratio: auto; min-height: 80px; display: grid; place-items: center; padding: 16px; background: #F3F2F8; }
.eh-hint { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.eh-chip { border: 0; background: #fff; border-radius: 999px; padding: 6px 12px; font: 700 12.5px var(--font); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.eh-objs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.eh-objs button { border: 0; background: #fff; border-radius: 14px; padding: 8px 2px 6px; display: grid; gap: 2px; justify-items: center; cursor: pointer; font: 700 11px/1.2 var(--font); color: #3A3A3F; box-shadow: 0 1px 2px rgba(0,0,0,.06); min-width: 0; }
.eh-objs button span { font-size: 22px; } .eh-objs button.on { background: var(--c); color: #fff; }
.b3-mk { width: 34px; height: 34px; font-size: 18px; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 4px 10px -4px rgba(0,0,0,.45); background: rgba(255,255,255,.92); }
.b3-mk.on { box-shadow: 0 0 0 3px #FFC21A, 0 4px 10px -4px rgba(0,0,0,.45); }
.b3-mk.hit { animation: ehPop .4s ease; }
.eh-goals { background: #fff; border-radius: 22px; padding: 14px 16px; display: grid; gap: 10px; box-shadow: 0 2px 0 rgba(0,0,0,.05); }
.eh-goals-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.eh-score { font-weight: 900; color: var(--s); white-space: nowrap; } .eh-score i { font-style: normal; font-size: 13px; } .eh-score i.up { color: #0CA30C; } .eh-score i.down { color: #D03B3B; }
.eh-gl { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.eh-gl-s { font-size: 22px; color: #E3E1EA; line-height: 1; } .eh-gl.on .eh-gl-s { color: #FFC21A; text-shadow: 0 2px 0 #D99A00; }
.eh-gl-t { display: grid; gap: 5px; min-width: 0; } .eh-gl-t small { font-size: 12.5px; font-weight: 700; color: #3A3A3F; line-height: 1.3; }
.eh-gl-bar { position: relative; height: 8px; border-radius: 4px; background: #EEEDF3; }
.eh-gl-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #D03B3B; transition: width .3s ease; } .eh-gl.on .eh-gl-bar i { background: #0CA30C; }
.eh-gl-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #1D1D1F; border-radius: 1px; }
.eh-gl-v { text-align: right; display: grid; } .eh-gl-v b { font-size: 15px; white-space: nowrap; } .eh-gl-v small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.eh-rs { background: #fff; border-radius: 22px; padding: 14px 16px; display: grid; gap: 10px; box-shadow: 0 2px 0 rgba(0,0,0,.05); }
.eh-rs-h { font-size: 15px; }
.eh-rs-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.eh-rs-i { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; align-items: start; background: #F8F8FA; border-radius: 14px; padding: 8px 10px; box-shadow: inset 4px 0 0 var(--s); min-width: 0; }
.eh-rs-i > span { font-size: 18px; } .eh-rs-i div { display: grid; min-width: 0; }
.eh-rs-i small { font-size: 11px; color: var(--muted); font-weight: 700; } .eh-rs-i b { font-size: 14px; white-space: nowrap; } .eh-rs-i i { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--s); }
.eh-acts { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 4px 0; }
.eh-ctl { display: grid; gap: 8px; }
.eh-row-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .eh-row-h small { font-weight: 700; font-size: 13px; }
.eh-cost { font-style: normal; color: var(--muted); font-weight: 600; }
.eh-diff { background: #F3F2F8; border-radius: 16px; padding: 10px 12px; }
.eh-diff-h { display: flex; justify-content: space-between; gap: 8px; align-items: center; } .eh-diff-h small { color: var(--muted); font-weight: 700; }
.eh-diff-h b.up { color: #0A7A0A; } .eh-diff-h b.down { color: #B02A2A; }
.eh-dcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.eh-dc { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 9px; white-space: nowrap; } .eh-dc.good { background: #E3F4E3; color: #0A6A0A; } .eh-dc.bad { background: #FBE4E4; color: #9A2323; }
.eh-sh-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.eh-sh-foot:has(> .rb:only-child) { justify-content: center; }
.eh-sh-p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.eh-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: pl; }
.eh-plan li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #F8F8FA; border-radius: 14px; padding: 8px 12px; }
.eh-pl-e { font-size: 22px; } .eh-plan b { display: block; font-size: 14px; } .eh-plan small { color: var(--muted); font-size: 12.5px; }
.eh-pl-d { font-weight: 900; color: #0A7A0A; } .eh-pl-sum { font-weight: 800; font-size: 13.5px; }
@media (min-width: 860px) {
  .eh-simgrid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); align-items: start; }
  .eh-stage3d { aspect-ratio: 4 / 3.4; max-height: 70vh; }
}
@media (max-width: 380px) { .eh-rs-g { grid-template-columns: minmax(0, 1fr); } .eh-kit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Results */
.eh-lab { max-width: 820px; }
.lb-hero2 { background: #fff; border-radius: 28px; padding: 18px; display: grid; gap: 14px; }
.lb-h2-top { display: flex; gap: 10px; align-items: flex-end; } .lb-h2-top p { margin: 0; background: #F3F2F8; border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: 14.5px; line-height: 1.45; flex: 1; min-width: 0; }
.lb-vs { display: grid; gap: 10px; }
@media (min-width: 640px) { .lb-vs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lb-nc { background: #F8F8FA; border-radius: 20px; padding: 14px; display: grid; gap: 10px; min-width: 0; } .lb-nc.tuned { background: #EFEEFB; }
.lb-nc-h { display: flex; justify-content: space-between; gap: 8px; align-items: center; } .lb-nc-h b { font-size: 14.5px; }
.lb-nc-s { font-weight: 900; font-size: 22px; color: var(--s); display: grid; justify-items: end; line-height: 1; } .lb-nc-s small { font-size: 11px; font-weight: 800; }
.lb-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); }
.lb-key span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .lb-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lb-key .sol i { background: #F2A33A; } .lb-key .waso i { background: #D03B3B; } .lb-key .left i { width: 3px; height: 12px; background: #1D1D1F; border-radius: 1px; }
.lb-key .g i { background: #0CA30C; border-radius: 50%; } .lb-key .b i { background: #D03B3B; border-radius: 50%; } .lb-key .mine i { background: #EFEEFB; box-shadow: inset 0 0 0 2px #5B57C9; }
.lb-key .u i { background: #C9C8D3; } .lb-key .t i { background: #5B57C9; } .lb-key .note { font-weight: 800; color: #5B57C9; margin-left: auto; }
.lb-th { display: grid; gap: 8px; }
.lb-th-r { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 56px; gap: 10px; align-items: center; }
.lb-th-l { font-size: 13px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } .lb-th-r.you .lb-th-l { color: var(--muted); }
.lb-th-b { position: relative; height: 14px; display: flex; background: #F3F2F8; border-radius: 4px; }
.lb-th-b i { display: block; height: 100%; } .lb-th-b i.sol { background: #F2A33A; border-radius: 4px 0 0 4px; } .lb-th-b i.waso { background: #D03B3B; }
.lb-th-r.you .lb-th-b i { opacity: .4; }
.lb-th-b b.left { position: absolute; top: -3px; bottom: -3px; width: 3px; background: #1D1D1F; border-radius: 1px; transform: translateX(-1px); }
.lb-th-v { text-align: right; font-size: 13px; font-weight: 800; white-space: nowrap; }
.lb-bl { display: grid; gap: 14px; }
.lb-bl-r { display: grid; gap: 6px; }
.lb-bl-h { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; font-size: 13.5px; }
.lb-bl-h span { font-weight: 700; min-width: 0; } .lb-bl-h b { white-space: nowrap; } .lb-bl-h i { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--s); white-space: nowrap; }
.lb-bl-t { position: relative; height: 12px; background: #F0EFF5; border-radius: 6px; margin: 0 7px; }
.lb-bl-t .band { position: absolute; top: 0; bottom: 0; background: rgba(12,163,12,.22); border-radius: 6px; }
.lb-bl-t b { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); }
.lb-bl-t b.u { background: #fff; box-shadow: inset 0 0 0 2.5px #8A8A8F; } .lb-bl-t b.t { background: var(--s); box-shadow: 0 0 0 2px #fff; }
.lb-bl-k { color: var(--muted); font-size: 11.5px; }
.lb-ip { display: grid; gap: 4px; }
.lb-ip-r { display: grid; grid-template-columns: minmax(0, 1fr) repeat(7, 25px); gap: 2px; align-items: center; padding: 6px 4px; border-radius: 12px; }
.lb-ip-r.head { padding-bottom: 2px; } .lb-ip-r.head .lb-ip-c { font-size: 15px; }
.lb-ip-r.mine { background: #EFEEFB; }
.lb-ip-l { display: grid; min-width: 0; padding-right: 4px; } .lb-ip-l b { font-size: 12.5px; line-height: 1.25; overflow-wrap: anywhere; } .lb-ip-l small { font-size: 11px; color: var(--muted); line-height: 1.25; overflow-wrap: anywhere; }
.lb-ip-c { display: grid; place-items: center; height: 26px; }
.lb-ip-c i { width: calc(19px * var(--m)); height: calc(19px * var(--m)); border-radius: 50%; display: block; } .lb-ip-c i.g { background: #0CA30C; } .lb-ip-c i.b { background: #D03B3B; }
.lb-yr { display: grid; gap: 10px; }
.lb-yr-g { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; }
.lb-yr-ax { display: flex; flex-direction: column; justify-content: space-between; height: 140px; text-align: right; } .lb-yr-ax small { font-size: 10px; color: var(--muted); line-height: 1; }
.lb-yr-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.lb-yr-c { display: grid; gap: 4px; justify-items: center; min-width: 0; }
.lb-yr-bars { height: 140px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; background: linear-gradient(#F0EFF5 1px, transparent 1px) 0 0 / 100% 50%; border-bottom: 1px solid #DDD; }
.lb-yr-bars i { width: 40%; max-width: 12px; border-radius: 3px 3px 0 0; display: block; } .lb-yr-bars i.u { background: #C9C8D3; } .lb-yr-bars i.t { background: #5B57C9; }
.lb-yr-c small { font-size: 10.5px; color: var(--muted); font-weight: 700; display: grid; justify-items: center; line-height: 1.1; } .lb-yr-c small b { color: #E8A300; font-size: 10px; }
.lb-yr-c.now small { color: #1D1D1F; } .lb-yr-c.now .lb-yr-bars { background-color: #FFF8E6; }
.lb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lb-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: #F8F8FA; border-radius: 14px; padding: 8px 12px; }
.lb-st-e { font-size: 22px; } .lb-steps b { display: block; font-size: 14px; } .lb-steps small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.lb-st-d { font-weight: 900; white-space: nowrap; } .lb-st-d.up { color: #0A7A0A; } .lb-st-d.down { color: #B02A2A; }
.lb-tn { background: linear-gradient(135deg, #28306B, #4C4FA8); color: #fff; border-radius: 20px; padding: 14px 16px; display: grid; gap: 8px; }
.lb-tn-h { display: flex; gap: 8px; align-items: center; } .lb-tn ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; }
.lb-coef { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; } .lb-coef td { padding: 5px 6px; vertical-align: top; border-top: 1px solid #F0EFF5; } .lb-coef td:first-child { font-weight: 800; white-space: nowrap; color: #5B57C9; width: 52px; }
.eh-photo2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.eh-photo2 label.eh-chip { cursor: pointer; }
.eh-photo2 img { width: 84px; height: 84px; object-fit: cover; border-radius: 14px; flex: none; }
.eh-photo2-a { display: grid; gap: 6px; min-width: 0; flex: 1; } .eh-photo2-a div { display: flex; gap: 6px; flex-wrap: wrap; }
.eh-build .dk-left { justify-self: center; }
/* v1.15: a flipped habit card grows with its content instead of spilling out of the stack */
.dk-stack:has(.dk-card.flip), .eh-build .dk-stack:has(.dk-card.flip) { height: auto; display: block; }
.dk-card.flip { position: relative; inset: auto; width: 100%; margin: 6px 0; padding: 18px 14px; }
.dk-stack:has(.dk-card.flip) .dk-card.under { display: none; }
.dk-pick button { min-width: 0; overflow-wrap: anywhere; }

/* v1.15: list rows wrap to two lines instead of cutting words off */
.row-1 { align-items: flex-start; }
.row-1 b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; min-width: 0; }
.row-1 > :not(b) { flex: none; }
.row-2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }

/* ===================== v1.18.0: ThermoLab (ThermoTwin + JOS-3 Studio) inside DeepSeeIn ===================== */
.tl-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 8px; }
.tl-page > *, .tl-body { min-width: 0; }
.tl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding-top: 6px; }
.tl-brand b { font: 900 1.7rem/1 var(--font); letter-spacing: -.03em; color: #7A2A26; } .tl-brand b span { color: #D0544A; }
.tl-brand small { display: block; color: var(--muted); font-weight: 600; margin-top: 3px; }
.tl-switch { display: inline-flex; background: #EFEDF2; border-radius: 999px; padding: 3px; gap: 2px; }
.tl-switch a { text-decoration: none; color: var(--ink-2); font-weight: 700; font-size: 14px; padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.tl-switch a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,36,42,.14); }
.tl-wait { color: var(--muted); padding: 40px 0; text-align: center; } .tl-wait.bad { color: var(--no); }
.tl-studio { display: block; min-height: 60vh; min-width: 0; max-width: 100%; }

/* ThermoTwin */
.tt-card { background: var(--panel); border-radius: 20px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(16,36,42,.05), 0 10px 26px -14px rgba(30,40,80,.18); min-width: 0; }
.tt-h { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tt-h h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.12rem; }
.tt-h small { color: var(--muted); font-weight: 600; font-size: 12.5px; }

.tt-feel { --vc: #8A94A0; min-height: 86px; }
.tt-verdict { background: var(--panel); border-radius: 20px; padding: 12px 16px; box-shadow: 0 1px 2px rgba(16,36,42,.05); }
.tt-verdict p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.tt-verdict small { color: var(--muted); font-size: 12px; display: block; margin-top: 4px; }
.tt-verdict.bad b { color: var(--no); }
.tt-vrow { display: flex; align-items: center; gap: 10px; }
.tt-vrow b { font-family: var(--display); font-size: 1.7rem; font-weight: 600; line-height: 1.1; color: var(--vc); }
.tt-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--vc); flex: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--vc) 18%, transparent); }
.tt-upd { margin: 0 0 0 auto !important; font-weight: 700; color: var(--muted); visibility: hidden; }
.tt-feel.busy .tt-upd { visibility: visible; animation: ttPulse 1s ease-in-out infinite; }
@keyframes ttPulse { 50% { opacity: .35; } }
.tt-after { color: var(--muted); white-space: nowrap; }
.tt-verdict.wait b { font-family: var(--display); font-size: 1.3rem; }

.tt-stage { position: relative; height: min(58vh, 560px); min-height: 320px; border-radius: 24px; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 38%, #FFFFFF 0%, #F3F2F7 62%, #E9E8EF 100%); }
.tw3 { position: absolute; inset: 0; }
.tw3-canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; }
.tt-stage.flat { height: auto; min-height: 0; padding: 12px; }
.tt-flat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 13px; }
.tt-flat div { display: flex; align-items: center; gap: 8px; min-width: 0; } .tt-flat i { width: 14px; height: 14px; border-radius: 4px; flex: none; } .tt-flat b { margin-left: auto; font-variant-numeric: tabular-nums; }

.tt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-chip { border: 0; background: #EFEDF2; color: var(--ink-2); border-radius: 999px; padding: 7px 13px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.tt-chip.on { background: var(--brand); color: #fff; }
.tt-legend { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.tt-legend i { height: 8px; border-radius: 6px; }
.tt-time { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.tt-time b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-part { margin: 0; font-size: 13.5px; color: var(--ink-2); min-height: 20px; } .tt-part small { color: var(--muted); font-size: 12.5px; }

.tt-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tt-stat { background: var(--panel); border-radius: 18px; padding: 11px 14px; display: grid; gap: 1px; box-shadow: 0 1px 2px rgba(16,36,42,.05); min-width: 0; }
.tt-stat small { color: var(--muted); font-weight: 700; font-size: 12px; }
.tt-stat b { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tt-stat b em { font-style: normal; font-family: var(--font); font-size: 13px; color: var(--ink-2); font-weight: 600; }
.tt-stat span { font-size: 12px; color: var(--ink-2); }

.tt-quick { display: grid; gap: 12px; }
.tt-q { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tt-q > span { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tt-q > span b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; padding: 0; cursor: pointer; touch-action: pan-y; }
.tt-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: #E6E4EC; }
.tt-range::-moz-range-track { height: 6px; border-radius: 6px; background: #E6E4EC; }
.tt-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.28); }
.tt-range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.28); }
.tt-range:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: 8px; }
.tt-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.tt-link input { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; }

.tt-profiles { padding-bottom: 6px; }
.tt-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 14px; gap: 10px; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 11px 2px; cursor: pointer; border-top: 1px solid #EFEDF2; color: var(--ink); }
.tt-row:first-of-type { border-top: 0; }
.tt-row-k { color: var(--muted); font-weight: 700; font-size: 13px; }
.tt-row-v { display: grid; min-width: 0; } .tt-row-v b { font-size: 15px; overflow-wrap: anywhere; } .tt-row-v small { color: var(--ink-2); font-size: 12.5px; overflow-wrap: anywhere; }
.tt-row i { font-style: normal; color: var(--muted); font-size: 20px; font-weight: 600; }

.tt-mrow { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-mom { border: 0; background: var(--panel); border-radius: 999px; padding: 8px 13px; font-weight: 600; font-size: 13.5px; color: var(--ink-2); cursor: pointer; box-shadow: 0 1px 2px rgba(16,36,42,.08); display: inline-flex; gap: 6px; align-items: center; text-align: left; }
.tt-mom.on { background: var(--brand); color: #fff; }
.tt-charts { display: grid; gap: 14px; }
.tt-story ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-2); font-size: 14px; }
.tt-story b { color: var(--ink); }
.tt-note { font-size: 12.5px; color: var(--muted); margin: 0; }

/* profile sheets: a bottom sheet on phones, a centred card on desktop */
.tt-sheet-wrap { position: fixed; inset: 0; z-index: 90; background: rgba(14,20,30,.38); display: flex; align-items: flex-end; justify-content: center; animation: ttFade .15s ease; }
@keyframes ttFade { from { opacity: 0; } }
.tt-sheet { background: var(--bg); width: 100%; max-width: 560px; max-height: 88dvh; overflow: auto; border-radius: 22px 22px 0 0; padding: 6px 16px calc(18px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.tt-sheet-h { position: sticky; top: 0; z-index: 1; background: var(--bg); display: flex; justify-content: space-between; align-items: center; padding: 10px 0 8px; }
.tt-sheet-h h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.tt-done { border: 0; background: none; color: var(--brand-2); font-weight: 800; font-size: 16px; cursor: pointer; padding: 6px 4px; }
.tt-sheet-b { display: grid; gap: 14px; }
.tt-list { background: var(--panel); border-radius: 16px; overflow: hidden; }
.tt-pick { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 11px 14px; text-align: left; cursor: pointer; border-top: 1px solid #EFEDF2; color: var(--ink); }
.tt-pick:first-child { border-top: 0; }
.tt-pick span { display: grid; min-width: 0; } .tt-pick b { font-size: 15px; } .tt-pick small { color: var(--muted); font-size: 12.5px; }
.tt-pick i { font-style: normal; color: var(--brand-2); font-weight: 800; width: 16px; flex: none; }
.tt-form { background: var(--panel); border-radius: 16px; padding: 12px 14px; display: grid; gap: 12px; }
.tt-step { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-2); font-size: 14px; flex-wrap: wrap; }
.tt-step em { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 5px; }
.tt-step > div { display: flex; align-items: center; gap: 6px; }
.tt-step button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #EFEDF2; font-size: 20px; font-weight: 700; color: var(--ink); cursor: pointer; line-height: 1; }
.tt-step input { width: 76px; text-align: center; border: 0; border-radius: 10px; background: #F4F3F7; padding: 8px 6px; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; }
.tt-name { display: grid; gap: 5px; font-weight: 600; color: var(--ink-2); font-size: 14px; }
.tt-name input { border: 0; border-radius: 10px; background: #F4F3F7; padding: 10px 12px; font-weight: 600; font-size: 15px; }
.tt-seg { display: flex; flex-wrap: wrap; background: #EFEDF2; border-radius: 12px; padding: 3px; gap: 3px; }
.tt-seg button { flex: 1 1 auto; border: 0; background: none; border-radius: 9px; padding: 8px 10px; font-weight: 700; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.tt-seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16,36,42,.15); }
.tt-sub { margin: 0; color: var(--muted); font-size: 12.5px; }
.tt-sheet-f { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
.tt-link-b { border: 0; background: none; padding: 4px 0; color: var(--brand-2); font-weight: 700; cursor: pointer; }

/* charts (ThermoTwin) */
.tc { margin: 0; display: grid; gap: 6px; min-width: 0; }
.tc figcaption { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .tc figcaption b { font-size: 14px; } .tc figcaption small { color: var(--muted); font-weight: 700; }
.tc-leg, .tc-read { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-2); align-items: center; }
.tc-leg span, .tc-read span { display: inline-flex; align-items: center; gap: 5px; } .tc-leg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; } .tc-read i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tc-read { min-height: 18px; } .tc-read small { color: var(--muted); }
.tc-svg svg { display: block; touch-action: pan-y; }
.tc-phases { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); }

@media (min-width: 700px) { .tt-sheet-wrap { align-items: center; padding: 16px; } .tt-sheet { border-radius: 22px; max-height: 84vh; } }
@media (max-width: 420px) { .tl-switch a { padding: 7px 12px; font-size: 13.5px; } .tt-stat b { font-size: 1.4rem; } }

/* v1.18.0 · ThermoTwin cockpit: the twin stays pinned while the controls sit around it */
.tt { display: grid; gap: 16px; --tt-top: 60px; }
.tt-cockpit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.tt-pin { position: sticky; top: var(--tt-top); z-index: 6; display: grid; gap: 8px; background: var(--bg); padding: 8px 0 10px; margin: -8px 0 0; }
.tt-ctl, .tt-out { display: grid; gap: 12px; min-width: 0; }
.tt-ctl:empty { display: none; }
.tt-more { display: grid; gap: 14px; }
.tt-stage { height: clamp(220px, 36vh, 360px); min-height: 0; }
.tt-feel { min-height: 0; }
.tt-verdict { padding: 9px 14px; }
.tt-verdict p { font-size: 13px; }
.tt-vrow { flex-wrap: wrap; row-gap: 2px; }
.tt-vrow b { font-size: 1.35rem; }
.tt-mini { font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tt-verdict.wait p, .tt-verdict.wait small { display: block; }
.tt-quick { gap: 8px; padding: 10px 12px; }
.tt-qtabs { display: flex; flex-wrap: wrap; gap: 5px; }
.tt-qtab { border: 0; background: #EFEDF2; color: var(--ink-2); border-radius: 999px; padding: 6px 11px; font-weight: 700; font-size: 13px; cursor: pointer; font-variant-numeric: tabular-nums; }
.tt-qtab.on { background: var(--brand); color: #fff; }
.tt-qp { display: none; }
.tt-qp.on { display: grid; gap: 8px; }
.tt-quick.all .tt-qtabs { display: none; }
.tt-quick.all .tt-qp { display: grid; gap: 8px; }
.tt-quick:not(.all) .tt-qh { display: none; }
.tt-sl { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 8px; align-items: center; }
.tt-nb { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #EFEDF2; font-size: 19px; font-weight: 700; color: var(--ink); cursor: pointer; line-height: 1; }
.tt-viewcard { display: grid; gap: 8px; }
.tt-viewcard .tt-h { margin-bottom: 0; }
.tt-part { margin: 0; }
@media (max-width: 699px) {
  .tt-verdict p { display: none; }
  .tt-verdict.wait p { display: block; }
  .tt-legend { font-size: 11px; }
  .tt-part { font-size: 12.5px; }
}
/* tablets: twin (with the controls) on the left, pinned; the rest on the right */
@media (min-width: 700px) {
  .tt-cockpit { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
  .tt-cockpit .tt-ctl { display: none; }
  .tt-pin { grid-column: 1; grid-row: 1 / span 2; padding-top: 12px; }
  .tt-out { grid-column: 2; }
  .tt-stage { height: clamp(300px, calc(100vh - var(--tt-top) - 330px), 560px); }
  .tt-more { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .tt-more .tt-note { grid-column: 1 / -1; }
}
/* wide screens: controls | twin | numbers */
@media (min-width: 1100px) {
  .tt-cockpit.wide { grid-template-columns: 300px minmax(0, 1fr) 290px; }
  .tt-cockpit.wide .tt-ctl { display: grid; grid-column: 1; grid-row: 1; }
  .tt-cockpit.wide .tt-pin { grid-column: 2; grid-row: 1; }
  .tt-cockpit.wide .tt-out { grid-column: 3; grid-row: 1; }
  .tt-cockpit.wide .tt-stage { height: clamp(360px, calc(100vh - var(--tt-top) - 190px), 640px); }
  .tt-cockpit.wide .tt-nums { grid-template-columns: minmax(0, 1fr); }
}

.tt-qtab em { font-style: normal; font-weight: 600; opacity: .8; margin-left: 5px; }
@media (max-width: 699px) {
  .tt-pin { gap: 6px; padding: 6px 0 8px; }
  .tt-verdict { padding: 7px 12px; position: relative; }
  .tt-vrow { flex-wrap: nowrap; gap: 8px; }
  .tt-vrow b { font-size: 1.15rem; white-space: nowrap; }
  .tt-dot { width: 10px; height: 10px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--vc) 18%, transparent); }
  .tt-mini { font-size: 12.5px; white-space: nowrap; margin-left: auto; }
  .tt-upd { position: absolute; right: 12px; top: -9px; background: var(--bg); padding: 0 6px; border-radius: 6px; font-size: 11px; }
  .tt-stage { height: clamp(200px, 30vh, 300px); border-radius: 20px; }
  .tt-part.hint { display: none; }
  .tt-quick { padding: 8px 10px; gap: 6px; }
  .tt-qtabs { flex-wrap: nowrap; justify-content: space-between; gap: 4px; }
  .tt-qtab { padding: 6px 9px; flex: 1 1 auto; }
  .tt-qtab em { display: none; }
  .tt-quick .tt-q { gap: 4px; }
}

/* v1.20.0 · ThermoTwin: icons, view rail, tiles, layer and vessel legends */
.tt-ic { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; }
.tt-ic svg { width: 100%; height: 100%; }
.tt-stage { position: relative; }
.tt-rail { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; gap: 4px; background: rgba(255,255,255,.72); padding: 4px; border-radius: 16px; box-shadow: 0 1px 3px rgba(16,36,42,.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tt-rail.flat { position: static; display: flex; flex-wrap: wrap; margin-bottom: 8px; background: none; box-shadow: none; }
.tt-rb { width: 36px; height: 36px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.tt-rb.on { background: var(--brand); color: #fff; }
.tt-rb:hover:not(.on) { background: #EFEDF2; }
.tt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; grid-template-columns: none; }
.tt-grad { flex: 1 1 200px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.tt-grad i { height: 8px; border-radius: 6px; }
.tt-keys { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tt-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.tt-key > i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.tt-key .tt-ic { width: 16px; height: 16px; color: #2F7FC1; }
.tt-segstep { display: inline-flex; align-items: center; gap: 8px; }
.tt-segstep b { min-width: 110px; text-align: center; font-size: 14px; }
.tt-nb { display: inline-grid; place-items: center; }
.tt-nb .tt-ic { width: 18px; height: 18px; }
.tt-what { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.tt-qtab { display: inline-flex; align-items: center; gap: 6px; }
.tt-qtab .tt-ic { width: 18px; height: 18px; }
.tt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; }
.tt-tile { border: 0; background: #F4F3F7; border-radius: 14px; padding: 8px 6px; display: grid; justify-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); cursor: pointer; text-align: center; }
.tt-tile .tt-ic { width: 24px; height: 24px; }
.tt-tile.on { background: var(--brand); color: #fff; }
.tt-row { grid-template-columns: 96px minmax(0, 1fr) 18px; }
.tt-row-k { display: inline-flex; align-items: center; gap: 7px; }
.tt-row-k .tt-ic { width: 19px; height: 19px; color: var(--brand-2); }
.tt-chev { width: 18px; height: 18px; color: var(--muted); }
.tt-mom .tt-ic { width: 18px; height: 18px; color: #D0544A; }
.tt-mom.on .tt-ic { color: #fff; }
@media (max-width: 699px) {
  .tt-rail { top: 8px; right: 8px; gap: 2px; padding: 3px; border-radius: 14px; }
  .tt-rb { width: 31px; height: 30px; border-radius: 10px; }
  .tt-rb .tt-ic { width: 18px; height: 18px; }
  .tt-qtab { flex-direction: column; gap: 1px; padding: 5px 2px; font-size: 10.5px; border-radius: 12px; min-width: 0; flex: 1 1 0; }
  .tt-qtab .tt-ic { width: 19px; height: 19px; }
  .tt-qtabs { gap: 3px; }
  .tt-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .tt-tile { padding: 6px 2px; font-size: 11px; border-radius: 12px; }
  .tt-tile .tt-ic { width: 20px; height: 20px; }
  .tt-stage { height: clamp(230px, 32vh, 310px); }
  .tt-row { grid-template-columns: 92px minmax(0, 1fr) 18px; }
}

.tl-credit { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* ===================== v1.21.0 · Type: the Apple system font (SF Pro) everywhere, Inter where SF is not available ===================== */
/* Headlines: SF Pro Display, semibold, tight tracking. Text: SF Pro Text. No serif, no italics for emphasis. */
:root { --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; --sf: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; }
html, body, button, input, select, textarea { font-family: var(--font); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: -.011em; }
h1, h2, h3, h4, .tt-h h3, .tt-stat b, .tt-vrow b, .tl-brand b, .eh-brand b { font-family: var(--display); font-weight: 600; letter-spacing: -.022em; }
h1 { letter-spacing: -.028em; }
em, .band > h2 em, .tv-head h2 em, h1 span, h2 span { font-style: normal; }
.tt-stat b { font-weight: 600; letter-spacing: -.02em; }
.tt-vrow b { font-weight: 650; }

/* v1.21.0 · ThermoTwin: a part's insides in a pop-up */
.tt-pop { max-width: 640px; display: grid; gap: 10px; }
.tt-pop .tt-sheet-h > div:first-child { display: grid; }
.tt-pop .tt-sheet-h small { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.tt-pop-nav { display: inline-flex; align-items: center; gap: 6px; }
.tt-pop-stage { position: relative; height: clamp(260px, 44vh, 400px); border-radius: 20px; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 40%, #FFFFFF 0%, #F3F2F7 62%, #E9E8EF 100%); }
.tt-pop-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tt-pop-facts div { background: var(--panel); border-radius: 14px; padding: 8px 10px; display: grid; gap: 1px; min-width: 0; }
.tt-pop-facts small { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.tt-pop-facts b { font-size: 14.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 520px) { .tt-pop-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt-pop-stage { height: clamp(240px, 38vh, 320px); } }
@media (max-width: 699px) { .tt-pin .tt-part { display: none; } }

/* ---------- RespiDose (inside ThermoRespiDose) ---------- */
.tt-tile:disabled { opacity: .38; cursor: not-allowed; }
.rd-sum { min-width: 0; }
.rd-hint { display: block; color: var(--muted); font-size: 11.5px; margin-top: 4px; line-height: 1.35; }
.rd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; min-width: 0; }
.rd-row + .rd-row { box-shadow: inset 0 1px 0 rgba(0,0,0,.05); }
.rd-row span { min-width: 0; color: var(--ink-2); font-size: 14px; }
.rd-row small { display: block; color: var(--muted); font-size: 11.5px; }
.rd-row b { font-variant-numeric: tabular-nums; font-size: 14.5px; white-space: nowrap; }
.rd-flaglist { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.rd-flaglist li { background: #FFF6E5; color: #6B4A00; border-radius: 12px; padding: 8px 10px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.rd-flaglist li.ok { background: #EAF6EE; color: #1F5B33; }
.rd-bars { display: grid; gap: 4px; margin-top: 6px; }
.rd-bar { display: grid; grid-template-columns: minmax(84px, 150px) minmax(0, 1fr) minmax(0, auto); align-items: center; gap: 10px; border: 0; background: none; padding: 6px 4px; border-radius: 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.rd-bar:hover { background: #F4F3F7; }
.rd-bar-x { cursor: default; }
.rd-bar-x:hover { background: none; }
.rd-bar-l { font-size: 13px; font-weight: 600; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.rd-bar-t { height: 10px; background: #F0EFF4; border-radius: 6px; overflow: hidden; min-width: 0; }
.rd-bar-t i { display: block; height: 100%; border-radius: 6px; }
.rd-bar-v { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; min-width: 0; }
.rd-bar-v small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; }
@media (max-width: 560px) {
  .rd-bar { grid-template-columns: minmax(0, 1fr) minmax(0, auto); row-gap: 4px; }
  .rd-bar-t { grid-column: 1 / -1; grid-row: 2; }
}
.rd-eqlist { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: thin; }
.rd-eqb { flex: 0 0 auto; border: 0; background: #F4F3F7; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.rd-eqb.on { background: var(--brand); color: #fff; }
.rd-formula { background: #F7F6FA; border-radius: 16px; padding: 12px 14px; display: grid; gap: 4px; min-width: 0; }
.rd-formula code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.rd-formula small { color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.rd-eqbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 0 6px; }
.rd-eqtable { max-height: 420px; overflow: auto; }
.rd-eqtable tr.upper th, .rd-eqtable tr.upper td.rg { color: #8A5A00; }
.rd-eqtable tr.tree th, .rd-eqtable tr.tree td.rg { color: #1D5FA8; }
.rd-eqtable td.res { font-weight: 700; }
.rd-eqtable td, .rd-eqtable th { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-sweep svg { width: 100%; height: auto; display: block; }
@media (min-width: 1100px) { .tt-cockpit .rd-stage { height: clamp(360px, calc(100vh - var(--tt-top) - 300px), 600px); } }

/* ==========================================================================
   v1.23.0 · Type and rhythm across the whole app
   Wix Madefor (SIL OFL, self-hosted in assets/fonts): Display for headings, bold and tightly tracked,
   Text for reading. One spacing scale, so text and buttons never touch.
   ========================================================================== */
@font-face { font-family: 'Wix Madefor Display'; src: url('../assets/fonts/WixMadeforDisplay.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Wix Madefor Text'; src: url('../assets/fonts/WixMadeforText.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
:root {
  --font: 'Wix Madefor Text', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Wix Madefor Display', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --sf: var(--font);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
}
body { font-family: var(--font); letter-spacing: 0; word-spacing: .02em; line-height: 1.55; }
p, li { line-height: 1.6; }
h1, h2, h3, h4, .tt-h h3, .tl-brand b, .eh-brand b, .brand b { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; word-spacing: .04em; text-wrap: balance; }
h1 { font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
h2 { line-height: 1.14; letter-spacing: -.025em; }
h3, h4 { line-height: 1.22; letter-spacing: -.012em; }
h1 + p, h2 + p { margin-top: var(--s2); }
.tt-stat b, .tt-vrow b, .card-stat, .est-val { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
small, .muted { letter-spacing: .005em; }
button, .btn, .pill, .chip, input, select, textarea { font-family: var(--font); letter-spacing: 0; }
.btn, button.btn, a.btn { font-weight: 650; line-height: 1.2; }
/* text never runs into a neighbour */
h1, h2, h3, h4, p, li { overflow-wrap: break-word; }

/* ---------- v1.23.0 · the phone bar: four even places (Home, Back, Products, Profile) ---------- */
@media (max-width: 820px) {
  .mnav.tabbar.tb4 { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; padding: 6px max(10px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)); gap: 4px;
    background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -0.5px 0 rgba(0, 0, 0, .12); }
  .tb4 .tb-i { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 50px; padding: 4px 0; border-radius: 14px; color: #6E6E73; font: 600 11px/1.1 var(--font); letter-spacing: 0; }
  .tb4 .tb-ic { width: 44px; height: 28px; border-radius: 14px; margin: 0; background: none; box-shadow: none; color: inherit; }
  .tb4 .tb-ic .ic { width: 23px; height: 23px; stroke-width: 1.7; }
  .tb4 .tb-i.on { color: #123F63; }
  .tb4 .tb-i.on .tb-ic { background: rgba(18, 63, 99, .1); }
  .tb4 .tb-i.on small { font-weight: 750; }
  .tb4 .tb-me .tb-av { width: 24px; height: 24px; font-size: 10px; }
  .tb4 .tb-me.on .tb-ic { background: rgba(18, 63, 99, .1); }
  .tb4 .tb-me.on .tb-av { box-shadow: 0 0 0 2px #123F63; }
  body.has-mnav { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}
@media (max-width: 820px) { body.has-mnav .topbar .tb-home { display: none; } }
.fx-line { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; font-weight: 500; margin-top: 4px; }
.fx-line:empty { display: none; }
.fx-line span { color: #8E8E93; }
@media (min-width: 1000px) { .price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   v1.23.0 · ThermoRespiDose (free): body heat and breath on one screen
   ========================================================================== */
.tl-pro { font-size: 13.5px; font-weight: 650; color: #1F6FB2; text-decoration: none; background: #EAF2FB; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.tl-pro:hover { background: #DCEAF8; }
.tl-switch.three a { padding: 7px 13px; }
.rf { display: grid; gap: 12px; min-width: 0; --rf-top: 68px; }
.rf-places { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rf-places::-webkit-scrollbar { display: none; }
.rf-places button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: #F2F1F6; color: var(--ink-2); border-radius: 999px; padding: 7px 13px 7px 10px; font: 600 13px/1.2 var(--font); cursor: pointer; white-space: nowrap; }
.rf-places button .tt-ic { width: 18px; height: 18px; }
.rf-places button.on { background: #123F63; color: #fff; }
.rf-grid { display: grid; gap: 12px; min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "stages" "out" "in"; }
.rf-stages { grid-area: stages; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; min-width: 0; }
.rf-out { grid-area: out; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; min-width: 0; align-content: start; }
.rf-in { grid-area: in; min-width: 0; background: #fff; border-radius: 20px; padding: 12px; box-shadow: 0 1px 2px rgba(16, 36, 42, .05); }
.rf-switch { display: none; }
.rf-st { position: relative; background: radial-gradient(ellipse 70% 60% at 50% 40%, #FFFFFF 0%, #F3F2F7 65%, #E9E8EF 100%); border-radius: 22px; overflow: hidden; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.rf-stage { position: relative; min-height: 0; height: clamp(300px, 46vh, 520px); }
.rf-stage .tw3, .rf-stage .aw3 { position: absolute; inset: 0; }
.rf-cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px 0; min-height: 34px; position: relative; z-index: 2; }
.rf-cap b { font: 700 1.05rem/1.2 var(--display); letter-spacing: -.015em; color: var(--vc, var(--ink)); }
.rf-cap small { color: var(--muted); font-size: 12.5px; }
.rf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vc, #9AA3AD); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vc, #9AA3AD) 18%, transparent); flex: 0 0 auto; }
.rf-leg { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 0 14px 10px; font-size: 12px; color: var(--muted); position: relative; z-index: 2; }
.rf-grad { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rf-grad i { display: block; width: 110px; height: 7px; border-radius: 4px; }
.rf-no3d { padding: 16px; color: var(--muted); }
.rf-bad { color: #B3261E; }
.rf.busy .rf-cap small::after { content: ' · updating'; color: #8E8E93; }
.rf-card { background: #fff; border-radius: 20px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(16, 36, 42, .05); min-width: 0; display: grid; gap: 8px; align-content: start; }
.rf-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rf-h .tt-ic { width: 20px; height: 20px; color: #123F63; }
.rf-h h3 { margin: 0; font-size: 1.05rem; flex: 1; }
.rf-h small { font-weight: 650; font-size: 12.5px; color: var(--muted); }
.rf-line { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.rf-ks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.rf-k { background: #F7F6FA; border-radius: 14px; padding: 8px 10px; display: grid; gap: 1px; min-width: 0; }
.rf-k small { font-size: 11.5px; color: var(--muted); font-weight: 600; line-height: 1.25; }
.rf-k b { font: 700 1.3rem/1.15 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rf-k b em { font: 600 12px var(--font); font-style: normal; color: var(--muted); letter-spacing: 0; }
.rf-k span { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.rf-split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #EEEDF2; }
.rf-split i { display: block; height: 100%; }
.rf-split i.out, .rf-keys i.out { background: #C9CDD3; }
.rf-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-2); }
.rf-keys span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.rf-keys i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.rf-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.rf-tabs::-webkit-scrollbar { display: none; }
.rf-tabs button { flex: 0 0 auto; border: 0; background: none; display: grid; justify-items: center; gap: 1px; min-width: 64px; padding: 6px 6px; border-radius: 14px; color: var(--muted); font: 600 11.5px/1.15 var(--font); cursor: pointer; }
.rf-tabs button .tt-ic { width: 22px; height: 22px; }
.rf-tabs button em { font-style: normal; font-weight: 700; color: var(--ink-2); font-size: 11.5px; white-space: nowrap; max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
.rf-tabs button.on { background: #EAF0F7; color: #123F63; }
.rf-rows { display: grid; gap: 10px; }
.rf-row { display: none; gap: 6px; min-width: 0; }
.rf-row.on { display: grid; }
.rf-row h4 { margin: 0; font: 700 13px/1.2 var(--font); letter-spacing: 0; color: var(--ink-2); }
.rf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-chips button { border: 0; background: #F2F1F6; color: var(--ink-2); border-radius: 12px; padding: 8px 12px; font: 600 13px/1.2 var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rf-chips button.on { background: #123F63; color: #fff; }
.rf-chips.rf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.rf-chips.rf-tiles button { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; font-size: 12px; text-align: center; }
.rf-chips.rf-tiles button .tt-ic { width: 22px; height: 22px; }
.rf-stack { display: grid; gap: 8px; }
.rf-row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rf-row2 small { color: var(--muted); font-size: 12px; flex: 1 1 160px; }
.rf-sl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
.rf-sl b { font: 700 1rem var(--display); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.rf-note { margin: 0; font-size: 12px; color: var(--muted); }
.rf-note a { color: #1F6FB2; font-weight: 650; }

/* wide screens: inputs | the two 3D stages | the results, nearly one screen */
@media (min-width: 1100px) {
  .rf-grid { grid-template-columns: 300px minmax(0, 1fr) 290px; grid-template-areas: "in stages out"; align-items: start; }
  .rf-out { grid-template-columns: minmax(0, 1fr); }
  .rf-stage { height: clamp(330px, calc(100vh - var(--rf-top) - 350px), 580px); }
  .rf-tabs { display: none; }
  .rf-rows { gap: 12px; }
  .rf-row { display: grid; }
  .rf-in { padding: 14px; max-height: calc(100vh - var(--rf-top) - 170px); overflow-y: auto; scrollbar-width: thin; }
  .rf-chips.rf-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .rf-chips.rf-tiles button { padding: 7px 2px; font-size: 11.5px; }
  .rf-places { flex-wrap: wrap; overflow: visible; }
}
/* phones: one stage at a time, its results under it, then the inputs */
@media (max-width: 699px) {
  .rf-stages { grid-template-columns: minmax(0, 1fr); }
  .rf-switch { display: flex; gap: 4px; background: #EFEDF2; border-radius: 999px; padding: 3px; justify-self: start; }
  .rf-switch button { border: 0; background: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font: 650 13px var(--font); color: var(--ink-2); cursor: pointer; }
  .rf-switch button .tt-ic { width: 17px; height: 17px; }
  .rf-switch button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(16, 36, 42, .14); }
  .rf[data-view="body"] .rf-st-air, .rf[data-view="air"] .rf-st-body { display: none; }
  .rf[data-view="body"] .rf-k-air, .rf[data-view="air"] .rf-k-body { display: none; }
  .rf-out { grid-template-columns: minmax(0, 1fr); }
  .rf-stage { height: clamp(250px, 36vh, 330px); }
  .rf-ks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .rf-k { padding: 7px 9px; } .rf-k b { font-size: 1.15rem; }
  .rf-line { display: none; }
  .rf-in { padding: 8px 10px 10px; }
  .rf-stages { position: relative; }
  .rf-switch { position: absolute; top: 8px; right: 8px; z-index: 3; padding: 2px; }
  .rf-switch button { padding: 5px 10px; font-size: 12.5px; }
  .rf-switch button span:not(.tt-ic) { display: none; }
  .rf-switch button.on span:not(.tt-ic) { display: inline; }
  .rf-cap { padding: 10px 12px 0; max-width: calc(100% - 150px); row-gap: 0; }
  .rf-cap b { font-size: 1rem; }
  .rf-cap small { flex-basis: 100%; padding-left: 18px; font-size: 12px; }
  .rf-stage { height: clamp(220px, 31vh, 280px); }
  .rf-leg { padding: 0 12px 8px; font-size: 11.5px; }
  .rf-grad i { width: 80px; }
  .rf-card { padding: 8px; gap: 6px; border-radius: 18px; }
  .rf-card .rf-h { display: none; }
  .rf-ks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .rf-k { padding: 6px 7px; border-radius: 12px; }
  .rf-k b { font-size: 1.02rem; } .rf-k b em { font-size: 10.5px; }
  .rf-k small { font-size: 10.5px; } .rf-k span { display: none; }
  .rf-keys { font-size: 11px; gap: 2px 9px; }
  .rf-split { height: 9px; }
  .trd-free .tl-brand small { display: none; }
  .trd-free .tl-head { flex-wrap: nowrap; padding-top: 0; }
  .trd-free .tl-brand b { font-size: 1.45rem; }
  .tl-pro { font-size: 12px; padding: 6px 10px; }
  .tl-pro > span { display: none; }
  .rf-places button { padding: 6px 11px 6px 9px; font-size: 12.5px; }
  .rf-tabs button { min-width: 58px; padding: 5px 4px; }
  .rf-note { font-size: 11.5px; }
  .rf-row h4 { display: none; }
  .rf-switch { background: rgba(239, 237, 242, .92); }
}

/* ---------- v1.23.0 · RespiDose in ThermoRespiDose R: files, typed values, your graphs ---------- */
.rd-files { padding: 10px 14px; }
.rd-fbar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.rd-namebox { display: grid; gap: 1px; min-width: 0; flex: 1 1 200px; }
.rd-namebox small { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.rd-name { border: 0; background: #F4F3F7; border-radius: 10px; padding: 7px 10px; font: 700 15px var(--display); color: var(--ink); min-width: 0; width: 100%; max-width: 360px; }
.rd-fbs { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-fb { border: 0; background: #F2F1F6; color: var(--ink-2); border-radius: 12px; padding: 7px 11px; display: inline-flex; align-items: center; gap: 6px; font: 650 13px var(--font); cursor: pointer; }
.rd-fb .tt-ic { width: 17px; height: 17px; }
.rd-fb:hover:not(:disabled) { background: #E8E6EE; }
.rd-fb:disabled { opacity: .45; cursor: default; }
.rd-alert { display: block; color: #B3261E; font-size: 12px; margin-top: 4px; }
.rd-alert:empty { display: none; }
.rd-val { display: inline-flex; align-items: baseline; gap: 4px; }
.rd-val em { font-style: normal; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.rd-num { width: 84px; border: 0; background: #F4F3F7; border-radius: 8px; padding: 4px 6px; font: 700 14px var(--display); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.rd-num::-webkit-outer-spin-button, .rd-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rd-graphs-list { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .rd-graphs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rd-graph { display: grid; gap: 8px; background: #FAFAFC; border-radius: 16px; padding: 10px; min-width: 0; }
.rd-gh { display: flex; justify-content: space-between; align-items: center; }
.rd-add { margin-top: 8px; }
.tl-lock { display: grid; gap: 14px; max-width: 760px; }
.tl-lock h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.tl-lock-lead { margin: 0; color: var(--ink-2); font-size: 16px; }
.tl-lock-price b { font: 800 1.9rem var(--display); letter-spacing: -.02em; }
.tl-lock-price span { color: var(--muted); font-weight: 600; }
.tl-lock-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tl-lock-list li { background: #fff; border-radius: 16px; padding: 12px 14px; display: grid; gap: 3px; box-shadow: 0 1px 2px rgba(16, 36, 42, .05); }
.tl-lock-list li b { font: 700 15px var(--display); }
.tl-lock-list li span { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.tl-lock-go { display: flex; gap: 10px; flex-wrap: wrap; }
.tl-lock .pw-card, .tl-lock > .pw { max-width: 520px; }
@media (max-width: 699px) {
  .rd-files { padding: 8px 10px; }
  .rd-fbar { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: 6px; }
  .rd-namebox { flex: 0 0 auto; }
  .rd-namebox small { display: none; }
  .rd-name { font-size: 14px; padding: 6px 9px; max-width: none; }
  .rd-fbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .rd-fbs::-webkit-scrollbar { display: none; }
  .rd-fb { flex: 0 0 auto; padding: 6px 10px; font-size: 12.5px; }
}
.band > h2, .band h2, .sheet h2, .pl h2, .op h2 { font-weight: 700; letter-spacing: -.025em; }
/* v1.23.1: the brand banner replaces the welcome film */
.ds-banner { aspect-ratio: 1820 / 600 !important; background: #F1ECDD !important; cursor: default !important; height: auto !important; }
.ds-banner picture, .ds-banner img { display: block; position: static !important; left: auto !important; top: auto !important; width: 100% !important; height: 100% !important; max-width: 100%; object-fit: cover !important; }

/* ---------- v1.23.1 · ThermoRespiDose: buttons on the 3D, particle sizes, air sliders under the 3D ---------- */
.rf-rail { position: absolute; right: 10px; top: 48px; z-index: 3; display: grid; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 3px rgba(16, 36, 42, .12); }
.rf-rail button { width: 34px; height: 34px; border: 0; border-radius: 11px; background: none; color: #5C6670; display: grid; place-items: center; cursor: pointer; padding: 0; }
.rf-rail button .tt-ic { width: 19px; height: 19px; }
.rf-rail button.on { background: #123F63; color: #fff; }
.rf-rail button.lay { color: #A0A7AF; }
.rf-rail button.lay.on { background: #EAF0F7; color: #123F63; }
.rf-rail-sep { display: block; height: 1px; background: rgba(0, 0, 0, .08); margin: 2px 4px; }
.rf-sizes { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.rf-sizes button { border: 0; background: rgba(255, 255, 255, .8); color: var(--ink-2); border-radius: 999px; padding: 4px 9px; font: 600 11.5px/1.2 var(--font); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.rf-sizes button i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rf-sizes button em { font-style: normal; color: var(--muted); font-weight: 600; }
.rf-sizes button.on { background: #123F63; color: #fff; }
.rf-sizes button.on em { color: rgba(255, 255, 255, .75); }
.rf-env { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 18px; background: #fff; border-radius: 18px; padding: 8px 14px; box-shadow: 0 1px 2px rgba(16, 36, 42, .05); }
.rf-envr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.rf-envr > span { display: inline-flex; align-items: center; gap: 5px; font: 650 13px var(--font); color: var(--ink-2); }
.rf-envr > span .tt-ic { width: 18px; height: 18px; color: #123F63; }
.rf-envr b { font: 700 14px var(--display); min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 699px) {
  .rf-rail { top: 46px; right: 8px; gap: 2px; padding: 3px; }
  .rf-rail button { width: 30px; height: 30px; }
  .rf-rail button .tt-ic { width: 17px; height: 17px; }
  .rf-env { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 6px 10px; }
  .rf-envr { gap: 6px; }
  .rf-envr > span { font-size: 0; gap: 0; }
  .rf-envr b { min-width: 0; font-size: 12.5px; }
  .rf-sizes button { padding: 3px 7px; font-size: 10.5px; }
  .rf-sizes button em { display: none; }
}
.rd-sizes { gap: 4px 10px; font-size: 11.5px; color: var(--ink-2); }
.rd-sz { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rd-sz i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rd-sz em { font-style: normal; color: var(--muted); }
.tt-rail .rd-lay { opacity: .55; } .tt-rail .rd-lay.on { opacity: 1; background: #EAF0F7; color: #123F63; }

/* ---------- v1.24.0 · ThermoRespiDose (free): one stage, real anatomy, the wardrobe, lungs and health ---------- */
.tq { --tq-top: 64px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "stage side" "out side" "refs refs" "note note"; gap: 14px 18px; align-items: start; min-width: 0; }
.tq-stage { grid-area: stage; position: relative; min-width: 0; }
.tq-side { grid-area: side; display: grid; gap: 12px; min-width: 0; position: sticky; top: calc(var(--tq-top) + 8px); max-height: calc(100vh - var(--tq-top) - 20px); overflow: auto; scrollbar-width: thin; padding: 2px 2px 8px; }
.tq-out { grid-area: out; min-width: 0; }
.tq-refbox { grid-area: refs; } .tq-note { grid-area: note; margin: 0; color: var(--muted); font-size: 12px; }
.tq-stages { position: relative; height: clamp(440px, calc(100vh - var(--tq-top) - 140px), 760px); border-radius: 22px; overflow: hidden; background: #F3F1EC; }
.tq-st { position: absolute; inset: 0; }
.tq[data-view="body"] .tq-st-air, .tq[data-view="air"] .tq-st-body { visibility: hidden; pointer-events: none; }
.tq[data-view="body"] .tq-k-air, .tq[data-view="air"] .tq-k-body { display: none; }
.tq-canvas, .tq-canvas .tw3 { position: absolute; inset: 0; }
.tq-canvas canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.tq-st-body .tw3 { background: linear-gradient(180deg, var(--sky0, #F7F1E8), var(--sky1, #E9DDCB)); }
.tq-st-air .tw3 { background: radial-gradient(120% 90% at 50% 35%, #FFFFFF 0%, #F1EFF5 60%, #E5E2EC 100%); }
.tq-no3d { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); margin: 0; }
/* the switch: big and clear, on the stage */
.tq-switch { position: absolute; z-index: 6; top: 12px; left: 12px; display: inline-flex; gap: 4px; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 18px -10px rgba(10,20,40,.35); }
.tq-switch button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink-2); font: 700 14px/1 var(--font); padding: 10px 16px 10px 12px; border-radius: 12px; cursor: pointer; }
.tq-switch button .tt-ic { width: 22px; height: 22px; }
.tq-switch button.on { background: #123F63; color: #fff; }
.tq[data-view="air"] .tq-switch button.on { background: #1F6F8B; }
/* caption: how the body feels, how the lungs are */
.tq-cap { position: absolute; z-index: 5; top: 14px; right: 82px; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 8px 14px; border-radius: 14px; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); max-width: 46%; }
.tq-cap b { font: 700 17px/1.15 var(--display); color: var(--vc, var(--ink)); } .tq-cap small { grid-column: 2; color: var(--muted); font-size: 12px; }
.tq-cap .tq-dot { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--vc, #9AA0A6); }
.tq-cap.calc b { color: #6B7280; } .tq-cap.calc .tq-dot { animation: tqpulse 1s ease-in-out infinite; }
@keyframes tqpulse { 50% { opacity: .25; transform: scale(.7); } }
.tq-busy { position: absolute; z-index: 7; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(15,30,38,.82); color: #fff; font: 600 13px/1 var(--font); }
.tq-busy[hidden] { display: none; }
.tq-busy i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: tqspin .8s linear infinite; }
@keyframes tqspin { to { transform: rotate(360deg); } }
/* the rail: layers and views, icon over a word */
.tq-rail { position: absolute; z-index: 5; top: 12px; right: 12px; bottom: 12px; width: 62px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; scrollbar-width: none; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tq-rail::-webkit-scrollbar { display: none; }
.tq-rail button { flex: none; display: grid; justify-items: center; gap: 2px; border: 0; background: transparent; color: var(--ink-2); border-radius: 11px; padding: 6px 2px 5px; font: 600 10.5px/1.1 var(--font); cursor: pointer; }
.tq-rail button .tt-ic { width: 21px; height: 21px; }
.tq-rail button span { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-rail button.on { background: #123F63; color: #fff; }
.tq-rail button.lay { color: #A0A6AD; } .tq-rail button.lay.on { background: #E4F1FA; color: #123F63; }
.tq-rail button.tq-sub.on { background: #FCE4EC; color: #A3154F; }
.tq-rail-sep { flex: none; height: 1px; margin: 4px 8px; background: #E1DED8; }
/* legend and size chips, bottom left */
.tq-leg { position: absolute; z-index: 5; left: 12px; right: 86px; bottom: 12px; display: grid; gap: 6px; justify-items: start; pointer-events: none; }
.tq-leg > * { pointer-events: auto; }
.tq-leg small { max-width: 520px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.86); color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.tq-leg small em { color: var(--muted); font-style: normal; }
.tq-grad { display: inline-grid; grid-template-columns: auto 150px auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.86); font-size: 12px; color: var(--ink-2); }
.tq-grad i { height: 9px; border-radius: 9px; }
.tq-sizes { display: flex; flex-wrap: wrap; gap: 5px; }
.tq-sizes button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 6px 10px; background: rgba(255,255,255,.9); color: var(--ink-2); font: 600 12px/1 var(--font); cursor: pointer; }
.tq-sizes button i { width: 10px; height: 10px; border-radius: 50%; } .tq-sizes button em { font-style: normal; color: var(--muted); font-weight: 500; }
.tq-sizes button.on { background: #123F63; color: #fff; } .tq-sizes button.on em { color: #CFE3F2; }
/* labels on the airway */
.aw3-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.aw3-tag { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: center; margin: -14px 0 0 14px; padding: 4px 9px 4px 7px; border-radius: 10px; background: rgba(255,255,255,.9); box-shadow: 0 4px 12px -8px rgba(0,0,0,.4); white-space: nowrap; }
.aw3-tag.left { margin-left: -14px; translate: -100% 0; }
.aw3-tag i { grid-row: span 2; width: 9px; height: 9px; border-radius: 50%; } .aw3-tag b { font: 700 12px/1.1 var(--font); } .aw3-tag small { font-size: 11px; color: var(--ink-2); }
.aw3-tag::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 1px; background: rgba(15,30,38,.45); }
.aw3-tag.left::before { left: auto; right: -14px; }
/* pop-up: inside a body part, or a part of the airway */
.tq-pop { position: absolute; z-index: 6; left: 12px; top: 72px; width: min(330px, calc(100% - 100px)); padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.95); box-shadow: 0 12px 30px -16px rgba(10,20,40,.45); display: grid; gap: 8px; }
.tq-pop[hidden] { display: none; }
.tq-pop-h { display: flex; justify-content: space-between; align-items: center; } .tq-pop-h b { font: 700 15px/1.2 var(--display); }
.tq-pop small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.tq-pop-big { margin: 0; color: var(--ink-2); font-size: 13px; } .tq-pop-big b { font: 700 22px/1 var(--display); color: var(--ink); }
.tq-x { border: 0; background: #F2F1EE; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); flex: none; }
.tq-x .tt-ic { width: 16px; height: 16px; }
.tq-inside { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center; }
.tq-xs svg { width: 112px; height: 112px; display: block; }
.tq-inside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.tq-inside li { display: grid; grid-template-columns: 12px 1fr auto; gap: 7px; align-items: center; } .tq-inside li i { width: 11px; height: 11px; border-radius: 50%; } .tq-inside li b { font-variant-numeric: tabular-nums; }
/* drop target for the wardrobe */
.tq-drop { position: absolute; z-index: 8; inset: 10px; border-radius: 18px; border: 2px dashed rgba(194,24,91,.55); background: rgba(252,228,236,.35); display: none; place-content: center; justify-items: center; gap: 6px; color: #A3154F; font-size: 15px; pointer-events: none; }
.tq-drop .tt-ic { width: 40px; height: 40px; }
.tq.dragging .tq-st-body .tq-drop { display: grid; } .tq-st-body.over .tq-drop { background: rgba(252,228,236,.7); border-style: solid; }
.tq-ghost { position: fixed; left: 0; top: 0; z-index: 1000; width: 56px; height: 56px; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -10px rgba(0,0,0,.45); display: grid; place-items: center; pointer-events: none; }
.tq-ghost .tt-ic { width: 36px; height: 36px; }
/* air sliders, with words and colours */
.tq-env { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--panel); box-shadow: var(--soft); }
.tq-envr label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; font-size: 14px; }
.tq-envr label span { display: inline-flex; align-items: center; gap: 6px; } .tq-envr label .tt-ic { width: 18px; height: 18px; color: var(--ink-2); }
.tq-envr label b { font: 700 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.tq-range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 4px 0 2px; background: transparent; padding: 0; box-shadow: none !important; }
.tq-range::-webkit-slider-runnable-track { height: 10px; border-radius: 10px; background: var(--track); }
.tq-range::-moz-range-track { height: 10px; border-radius: 10px; background: var(--track); }
.tq-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -8px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.3), inset 0 0 0 7px #fff, inset 0 0 0 26px var(--thumb, #123F63); }
.tq-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--thumb, #123F63); border: 6px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.tq-range:disabled { opacity: .45; }
.tq-prose { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.35; } .tq-prose b { color: var(--ink); }
/* five groups of inputs: coloured, labelled */
.tq-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tq-cats button { display: grid; justify-items: center; gap: 3px; border: 0; padding: 9px 4px 8px; border-radius: 14px; background: color-mix(in srgb, var(--cc) 9%, #fff); color: var(--cc); font: 700 12.5px/1.1 var(--font); cursor: pointer; min-width: 0; }
.tq-cats button .tt-ic { width: 22px; height: 22px; }
.tq-cats button em { font: 500 10.5px/1.2 var(--font); font-style: normal; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-cats button.on { background: var(--cc); color: #fff; } .tq-cats button.on em { color: rgba(255,255,255,.85); }
.tq-panel { display: grid; gap: 12px; padding: 14px; border-radius: 18px; background: var(--panel); box-shadow: var(--soft); min-width: 0; }
.tq-sec { display: grid; gap: 8px; min-width: 0; } .tq-sec h4 { margin: 0; font: 700 13px/1.2 var(--font); color: var(--ink-2); text-transform: none; } .tq-sec h4 small { font-weight: 500; color: var(--muted); }
.tq-hint { margin: 0; font-size: 12px; color: var(--muted); }
.tq-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.tq-tiles.wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .tq-tiles.small { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.tq-tiles button { display: flex; align-items: center; gap: 8px; text-align: left; border: 0; border-radius: 12px; padding: 9px 10px; background: #F4F2EE; color: var(--ink); font: 600 13px/1.2 var(--font); cursor: pointer; min-width: 0; }
.tq-tiles.small button { justify-content: center; }
.tq-tiles button .tt-ic { width: 20px; height: 20px; flex: none; color: var(--ink-2); }
.tq-tiles button span { min-width: 0; } .tq-tiles button small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
.tq-tiles button.on { background: #123F63; color: #fff; } .tq-tiles button.on .tt-ic, .tq-tiles button.on small { color: #CFE3F2; }
.tq.busy .tq-side button:disabled, .tq.busy .tq-rail button:disabled, .tq.busy .tq-switch button:disabled { opacity: .45; cursor: progress; }
/* the wardrobe */
.tq-ward { display: grid; gap: 12px; }
.tq-worn { display: flex; flex-wrap: wrap; gap: 6px; }
.tq-wi { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: #F4F2EE; } .tq-wi.on { background: #FCE4EC; }
.tq-wb { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 3px 6px; font: 600 12.5px/1 var(--font); color: var(--ink); cursor: pointer; }
.tq-wi .tq-x { width: 24px; height: 24px; background: transparent; } .tq-wi .tq-x .tt-ic { width: 13px; height: 13px; }
.tq-gic { width: 26px; height: 26px; } .tq-gic svg { width: 100%; height: 100%; }
.tq-sw { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.tq-sw button { width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.tq-sw button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #C2185B; }
.tq-slots { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tq-slots::-webkit-scrollbar { display: none; }
.tq-slots button { flex: none; border: 0; background: transparent; color: var(--muted); font: 700 12.5px/1 var(--font); padding: 7px 10px; border-radius: 999px; cursor: pointer; }
.tq-slots button.on { background: #FCE4EC; color: #A3154F; }
.tq-rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.tq-gar { display: grid; justify-items: center; gap: 3px; border: 0; border-radius: 14px; padding: 10px 4px 8px; background: #F7F5F1; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; font: 600 12px/1.15 var(--font); color: var(--ink); text-align: center; }
.tq-gar .tq-gic { width: 34px; height: 34px; } .tq-gar em { font: 500 10.5px/1 var(--font); font-style: normal; color: var(--muted); }
.tq-gar.worn { background: #FCE4EC; } .tq-gar:active { cursor: grabbing; }
/* the cards */
.tq-card { display: grid; gap: 12px; padding: 16px 18px; border-radius: 20px; background: var(--panel); box-shadow: var(--soft); min-width: 0; }
.tq-h { display: flex; align-items: center; gap: 10px; } .tq-h .tt-ic { width: 26px; height: 26px; color: var(--ink-2); } .tq-h h3 { margin: 0; font: 700 18px/1.2 var(--display); flex: 1; }
.tq-badge { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--vc) 14%, #fff); color: var(--vc); font: 700 13px/1 var(--font); white-space: nowrap; }
.tq-line { margin: 0; color: var(--ink-2); font-size: 14px; }
.tq-tip { margin: 0; color: var(--muted); font-size: 12.5px; }
.tq-wait { margin: 0; color: var(--muted); }
.tq-ks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tq-k { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: #F6F4F0; }
.tq-k small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; } .tq-k small .tt-ic { width: 15px; height: 15px; }
.tq-k b { font: 700 22px/1.1 var(--display); font-variant-numeric: tabular-nums; } .tq-k b em { font: 600 13px/1 var(--font); font-style: normal; color: var(--ink-2); }
.tq-k span { font-size: 12px; color: var(--ink-2); }
.tq.busy .tq-card .tq-k b, .tq.busy .tq-card .tq-badge, .tq.busy .tq-flow b, .tq.busy .tq-deep b { opacity: .35; }
.tq-flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tq-flags li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #F6F4F0; }
.tq-flags li .tt-ic { width: 22px; height: 22px; margin-top: 1px; }
.tq-flags li.lv1 { background: #F2F7EC; } .tq-flags li.lv1 .tt-ic { color: #6BA539; }
.tq-flags li.lv2 { background: #FFF6E3; } .tq-flags li.lv2 .tt-ic { color: #C98A0E; }
.tq-flags li.lv3 { background: #FFEFE3; } .tq-flags li.lv3 .tt-ic { color: #E8711A; }
.tq-flags li.lv4, .tq-flags li.lv5 { background: #FCEAEA; } .tq-flags li.lv4 .tt-ic, .tq-flags li.lv5 .tt-ic { color: #C9302C; }
.tq-flags b { display: block; font-size: 14px; } .tq-flags span { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.tq-flags sup a, .tq-deep sup a { text-decoration: none; font-size: 10px; margin-left: 2px; }
.tq-good { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 14px; background: #EAF6EA; color: #1E6B2E; font-size: 14px; } .tq-good .tt-ic { width: 22px; height: 22px; }
.tq-sub-h { margin: 4px 0 0; font: 700 14px/1.2 var(--font); color: var(--ink-2); }
.tq-flow { display: grid; grid-template-columns: 1fr 22px 1fr 1fr; gap: 8px; align-items: center; }
.tq-flow > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: #F6F4F0; }
.tq-flow > div.stay { background: #FDF0E8; } .tq-flow > div.out { background: #EEF1F4; }
.tq-flow b { font: 700 20px/1.1 var(--display); font-variant-numeric: tabular-nums; } .tq-flow b em { font: 600 12px/1 var(--font); font-style: normal; color: var(--ink-2); }
.tq-flow span { font-size: 12px; color: var(--ink-2); }
.tq-flow .arr { height: 2px; background: #C9C3B8; position: relative; } .tq-flow .arr::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: #C9C3B8; }
.tq-split { display: flex; height: 14px; border-radius: 14px; overflow: hidden; background: #EEE; } .tq-split.thin { height: 10px; }
.tq-split i { display: block; height: 100%; } .tq-split i.out { background: #CDD3DA; }
.tq-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--ink-2); }
.tq-keys span { display: inline-flex; align-items: center; gap: 6px; } .tq-keys i { width: 10px; height: 10px; border-radius: 3px; } .tq-keys i.out { background: #CDD3DA; }
.tq-deep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tq-deep > div { display: grid; gap: 3px; align-content: start; padding: 12px; border-radius: 14px; background: #EAF5F0; }
.tq-deep > div:nth-child(2) { background: #F6EFEA; } .tq-deep > div:nth-child(3) { background: #EEF2F8; }
.tq-deep small { display: flex; align-items: center; gap: 5px; font: 600 12px/1.2 var(--font); color: var(--ink-2); } .tq-deep small .tt-ic { width: 16px; height: 16px; }
.tq-deep b { font: 700 24px/1.1 var(--display); font-variant-numeric: tabular-nums; } .tq-deep b em { font: 600 12.5px/1 var(--font); font-style: normal; color: var(--ink-2); }
.tq-deep span { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.tq-refbox summary { cursor: pointer; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tq-refs { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 11px; color: var(--muted); line-height: 1.45; }
.tq-refs a { word-break: break-word; }
.tq-bad { color: var(--no); }
@media (max-width: 1100px) { .tq { grid-template-columns: minmax(0, 1fr) 340px; } .tq-deep { grid-template-columns: 1fr; } }
/* phone and small tablet: the stage stays put at the top; everything else scrolls under it */
@media (max-width: 820px) {
  .tq { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "side" "out" "refs" "note"; gap: 12px; }
  .tq-stage { position: sticky; top: var(--tq-top); z-index: 20; margin: 0 -12px; padding: 0 0 6px; background: var(--bg); }
  .tq-stages { height: min(50vh, 500px); border-radius: 0 0 20px 20px; }
  .tq-side { position: static; max-height: none; overflow: visible; padding: 0; }
  .tq-switch { left: 50%; transform: translateX(-50%); top: 8px; }
  .tq-switch button { padding: 11px 18px 11px 14px; font-size: 15px; }
  .tq-cap { top: 64px; left: 10px; right: auto; max-width: 60%; padding: 6px 11px; } .tq-cap b { font-size: 15px; }
  .tq-rail { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: 58px; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 4px; }
  .tq-rail button { min-width: 56px; }
  .tq-rail-sep { width: 1px; height: auto; margin: 6px 3px; }
  .tq-leg { left: 8px; right: 8px; bottom: 72px; }
  .tq-leg small { font-size: 11px; padding: 5px 8px; }
  .tq-grad { grid-template-columns: auto 110px auto; font-size: 11px; }
  .tq-sizes button { padding: 5px 8px; font-size: 11px; } .tq-sizes button em { display: none; }
  .tq-pop { top: 108px; left: 8px; width: calc(100% - 16px); max-height: calc(100% - 190px); overflow: auto; }
  .tq-busy { bottom: auto; top: 64px; left: auto; right: 10px; transform: none; padding: 6px 11px; font-size: 12px; }
  .tq-cats button em { display: none; }
  .tq-cats { position: sticky; top: calc(var(--tq-top) + min(50vh, 500px) + 6px); z-index: 15; background: var(--bg); padding: 4px 0; }
  .tq-flow { grid-template-columns: 1fr 1fr 1fr; } .tq-flow .arr { display: none; }
  .tq-card { padding: 14px; }
  .aw3-tag { padding: 3px 7px 3px 6px; } .aw3-tag b { font-size: 11px; } .aw3-tag small { font-size: 10px; }
}
@media (max-width: 420px) { .tq-tiles.wide { grid-template-columns: 1fr 1fr; } .tq-tiles { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } .tq-deep { grid-template-columns: 1fr; } .tq-ks { grid-template-columns: 1fr 1fr; } }
.tl-inner { display: inline-flex; gap: 4px; justify-self: start; }
.tl-inner a { text-decoration: none; color: var(--muted); font: 700 13px/1 var(--font); padding: 8px 12px; border-radius: 999px; }
.tl-inner a.on { background: #E4F1FA; color: #123F63; }
.tq-switch button span { white-space: nowrap; }
@media (max-width: 820px) {
  .tq-switch button { padding: 10px 14px 10px 11px; font-size: 14.5px; gap: 6px; }
  .tq-leg small { display: none; }
  .tq-sizes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .tq-sizes::-webkit-scrollbar { display: none; }
  .tq-sizes button { flex: none; }
}
@media (max-width: 820px) {
  .tq-cats button { padding: 6px 2px 5px; font-size: 11.5px; gap: 2px; border-radius: 12px; } .tq-cats button .tt-ic { width: 19px; height: 19px; }
  .tq-panel { padding: 12px; }
}
.rd .tt-rail { max-height: calc(100% - 20px); overflow-y: auto; scrollbar-width: none; } .rd .tt-rail::-webkit-scrollbar { display: none; }

/* ---------- v1.24.1 · ThermoRespiDose: lighter labels, values on the body, phones: a strip and a see-through drawer ---------- */
.aw3-tag { background: rgba(255,255,255,.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: none; padding: 3px 8px 3px 6px; }
.aw3-tag b { font-size: 11.5px; } .aw3-tag small { font-size: 10.5px; }
.b3-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.b3-tag { position: absolute; left: 0; top: 0; padding: 1px 5px; border-radius: 6px; background: rgba(15,30,38,.55); color: #fff; font: 700 10.5px/1.3 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b3-tag[hidden] { display: none; }
.tq-busy { display: none !important; }
.tq-drawer[hidden] { display: none; }
.tq:not(.phone) .tq-drawer { display: none; }
.tq.phone { display: block; }
.tq.phone .tq-side { display: none; }
.tq.phone .tq-stage { position: sticky; top: var(--tq-top); z-index: 20; margin: 0 -12px 12px; padding: 0; background: var(--bg); }
.tq.phone .tq-stages { height: calc(100dvh - var(--tq-top) - 84px); min-height: 420px; border-radius: 0 0 22px 22px; }
.tq.phone .tq-switch { top: 8px; left: 50%; transform: translateX(-50%); }
/* the strip: every input group and the results, down the left edge of the figure */
.tq.phone .tq-cats { position: absolute; z-index: 9; left: 8px; top: 64px; display: flex; flex-direction: column; gap: 4px; width: 60px; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); grid-template-columns: none; }
.tq.phone .tq-cats button { padding: 7px 2px 6px; border-radius: 12px; font-size: 10.5px; gap: 2px; background: transparent; color: var(--cc); }
.tq.phone .tq-cats button .tt-ic { width: 21px; height: 21px; }
.tq.phone .tq-cats button.on { background: var(--cc); color: #fff; }
.tq.phone .tq-cats button em { display: none; }
/* the drawer: opens beside the strip, see-through, so the figure stays in view */
.tq.phone .tq-drawer { position: absolute; z-index: 8; left: 74px; top: 64px; bottom: 82px; width: min(300px, calc(100% - 86px)); border-radius: 18px; background: rgba(255,255,255,.78); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 14px 34px -18px rgba(10,20,40,.5); display: block; }
.tq-dbody { position: absolute; inset: 0; overflow-y: auto; padding: 12px 12px 14px; display: grid; gap: 10px; align-content: start; overscroll-behavior: contain; }
.tq-dx { position: absolute; z-index: 2; right: 8px; top: 8px; width: 28px; height: 28px; background: rgba(255,255,255,.9); }
.tq-dbody .tq-panel, .tq-dbody .tq-env { background: transparent; box-shadow: none; padding: 0; }
.tq-dbody .tq-sec h4 { padding-right: 34px; }
.tq-dbody .tq-tiles { grid-template-columns: 1fr 1fr; } .tq-dbody .tq-tiles.small { grid-template-columns: repeat(3, 1fr); } .tq-dbody .tq-tiles.wide { grid-template-columns: 1fr; }
.tq-dbody .tq-tiles button { background: rgba(255,255,255,.7); padding: 8px; font-size: 12.5px; }
.tq-dbody .tq-tiles button.on { background: #123F63; }
.tq-dbody .tq-rack { grid-template-columns: repeat(3, 1fr); } .tq-dbody .tq-gar { background: rgba(255,255,255,.7); }
.tq-dbody .tq-out .tq-card { background: rgba(255,255,255,.55); box-shadow: none; padding: 10px; }
.tq-dbody .tq-out .tq-ks, .tq-dbody .tq-deep { grid-template-columns: 1fr; }
.tq-dbody .tq-flow { grid-template-columns: 1fr; } .tq-dbody .tq-flow .arr { display: none; }
.tq.phone .tq-out { display: block; }
.tq.phone > .tq-out { margin-top: 12px; }
.tq.phone .tq-cap { top: 64px; left: auto; right: 10px; max-width: 46%; }
.tq.phone.drawer-open .tq-cap, .tq.phone.drawer-open .tq-pop { display: none; }
.tq.phone .tq-leg { left: 76px; right: 8px; bottom: 76px; }
.tq.phone .tq-pop { left: 76px; width: calc(100% - 84px); top: 120px; }
.tq.phone .tq-rail { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; height: 60px; flex-direction: row; overflow-x: auto; overflow-y: hidden; }

/* ---------- v1.24.2 · ThermoRespiDose: one stage with everything around its edges (a game-style screen) ---------- */
.tq.hx { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "stage out" "refs out" "note out"; gap: 14px 18px; align-items: start; }
.hx-stage { grid-area: stage; position: relative; height: var(--hx-h, 720px); border-radius: 22px; overflow: hidden; background: #F3F1EC; min-width: 0; }
.hx .tq-stages { position: absolute; inset: 0; height: auto; border-radius: 0; }
.hx-out { grid-area: out; display: grid; gap: 12px; min-width: 0; position: sticky; top: calc(var(--hx-top, 64px) + 8px); max-height: calc(100vh - var(--hx-top, 64px) - 20px); overflow: auto; scrollbar-width: thin; }
.hx[data-view="body"] .hx-out .tq-k-air, .hx[data-view="air"] .hx-out .tq-k-body { display: none; }
.hx .tq-refbox { grid-area: refs; } .hx .tq-note { grid-area: note; }
/* glass: every control floats over the picture and lets it show through */
.hx-switch, .hx-cap, .hx-strip, .hx-rail, .hx-env, .hx-leg > *, .hx-drawer, .hx-pop { background: rgba(255,255,255,.62); backdrop-filter: blur(8px) saturate(1.15); -webkit-backdrop-filter: blur(8px) saturate(1.15); box-shadow: 0 6px 20px -14px rgba(10,20,40,.45); }
/* top centre: the switch */
.hx-switch { position: absolute; z-index: 7; top: 10px; left: 50%; transform: translateX(-50%); display: inline-flex; gap: 4px; padding: 4px; border-radius: 16px; }
.hx-switch button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--ink-2); font: 700 14px/1 var(--font); padding: 9px 14px 9px 10px; border-radius: 12px; cursor: pointer; white-space: nowrap; }
.hx-switch button .tt-ic { width: 21px; height: 21px; }
.hx-switch button.on { background: #123F63; color: #fff; } .hx[data-view="air"] .hx-switch button.on { background: #1F6F8B; }
/* status: under the switch, centred */
.hx-cap { position: absolute; z-index: 5; top: 62px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; max-width: calc(100% - 170px); }
.hx-cap b { font: 700 14px/1.1 var(--display); color: var(--vc, var(--ink)); } .hx-cap small { color: var(--ink-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.hx-cap .tq-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vc, #9AA0A6); flex: none; }
.hx-cap.calc .tq-dot { animation: tqpulse 1s ease-in-out infinite; } .hx-cap.calc b { color: #6B7280; }
/* left: the inputs; right: the layers. Both are vertical strips that stay inside the stage */
.hx-strip, .hx-rail { position: absolute; z-index: 6; top: 62px; bottom: 150px; width: 62px; display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 16px; overflow-y: auto; scrollbar-width: none; }
.hx-strip::-webkit-scrollbar, .hx-rail::-webkit-scrollbar { display: none; }
.hx-strip { left: 10px; } .hx-rail { right: 10px; }
.hx-strip button, .hx-rail button { flex: none; display: grid; justify-items: center; gap: 2px; border: 0; background: transparent; border-radius: 12px; padding: 7px 2px 6px; font: 600 10.5px/1.1 var(--font); cursor: pointer; color: var(--ink-2); }
.hx-strip button { color: var(--cc); }
.hx-strip button .tt-ic, .hx-rail button .tt-ic { width: 22px; height: 22px; }
.hx-strip button span, .hx-rail button span { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-strip button.on { background: var(--cc); color: #fff; }
.hx-rail button.on { background: #123F63; color: #fff; }
.hx-rail button.lay { color: #9AA0A6; } .hx-rail button.lay.on { background: rgba(228,241,250,.95); color: #123F63; }
.hx-sep { flex: none; height: 1px; margin: 3px 8px; background: rgba(0,0,0,.12); }
/* bottom: air temperature and humidity, always in view */
.hx-env { position: absolute; z-index: 6; left: 10px; right: 10px; bottom: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 8px 12px 6px; border-radius: 16px; }
.hx-envr { min-width: 0; }
.hx-envr label { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.hx-envr label .tt-ic { width: 16px; height: 16px; align-self: center; }
.hx-envr label b { font: 700 16px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.hx-envr label em { font-style: normal; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.hx-envr .tq-range { height: 24px; margin: 2px 0 0; }
/* the legend: just above the sliders, between the strips */
.hx-leg { position: absolute; z-index: 5; left: 82px; right: 82px; bottom: 82px; display: grid; gap: 4px; justify-items: center; pointer-events: none; }
.hx-leg > * { pointer-events: auto; border-radius: 12px; }
.hx-leg small { padding: 4px 9px; font-size: 11.5px; line-height: 1.35; color: var(--ink-2); max-width: 520px; text-align: center; }
.hx-leg .tq-grad { background: transparent; padding: 4px 9px; }
.hx-legrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; padding: 3px; }
.hx-legrow .tq-grad { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hx-chip { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 999px; padding: 6px 10px; background: rgba(255,255,255,.7); color: var(--ink-2); font: 600 12px/1 var(--font); cursor: pointer; }
.hx-chip .tt-ic { width: 15px; height: 15px; } .hx-chip.on { background: #123F63; color: #fff; }
.hx-steps { display: flex; align-items: center; gap: 6px; padding: 4px 6px; } .hx-steps b { font: 700 13px/1 var(--font); min-width: 96px; text-align: center; }
.hx-nb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.8); display: grid; place-items: center; cursor: pointer; } .hx-nb .tt-ic { width: 16px; height: 16px; }
.hx-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 5px 10px; font-size: 12px; color: var(--ink-2); justify-content: center; }
.hx-key { display: inline-flex; align-items: center; gap: 5px; } .hx-key i { width: 10px; height: 10px; border-radius: 50%; }
.hx-leg .tq-sizes { padding: 3px; flex-wrap: wrap; justify-content: center; }
.hx-leg .tq-sizes button { background: rgba(255,255,255,.75); } .hx-leg .tq-sizes button.on { background: #123F63; color: #fff; }
/* the drawer: opens from the strip, see-through, the picture stays in view */
.hx-drawer { position: absolute; z-index: 8; left: 80px; top: 62px; bottom: 82px; width: min(360px, calc(100% - 160px)); border-radius: 18px; background: rgba(255,255,255,.5); }
.hx-drawer[hidden] { display: none; }
.hx-panel { position: absolute; inset: 0; overflow-y: auto; padding: 12px 12px 14px; display: grid; gap: 10px; align-content: start; overscroll-behavior: contain; }
.hx-dx { position: absolute; z-index: 2; right: 8px; top: 8px; width: 28px; height: 28px; background: rgba(255,255,255,.85); }
.hx-panel .tq-sec h4 { padding-right: 34px; }
.hx-panel .tq-tiles { grid-template-columns: 1fr 1fr; } .hx-panel .tq-tiles.small { grid-template-columns: repeat(3, 1fr); } .hx-panel .tq-tiles.wide { grid-template-columns: 1fr; }
.hx-panel .tq-tiles button { background: rgba(255,255,255,.66); padding: 8px; font-size: 12.5px; }
.hx-panel .tq-tiles button.on { background: #123F63; }
.hx-panel .tq-rack { grid-template-columns: repeat(3, 1fr); } .hx-panel .tq-gar, .hx-panel .tq-wi { background: rgba(255,255,255,.66); }
.hx-panel .tq-card { background: rgba(255,255,255,.55); box-shadow: none; padding: 10px; }
.hx-panel .tq-ks, .hx-panel .tq-deep, .hx-panel .tq-flow { grid-template-columns: 1fr; } .hx-panel .tq-flow .arr { display: none; }
.hx.drawer-open .hx-leg { visibility: hidden; }
.hx-pop { position: absolute; z-index: 7; left: 80px; right: 80px; top: 104px; padding: 12px 14px; border-radius: 16px; display: grid; gap: 8px; }
.hx-pop[hidden] { display: none; }
.hx .aw3-tag { background: rgba(255,255,255,.55); }
.hx .tq-drop { inset: 60px 80px 150px; }
@media (max-width: 1100px) { .tq.hx { grid-template-columns: minmax(0, 1fr) 340px; } }
/* phones: the stage fills the screen between the bars; the results follow below and in the drawer */
@media (max-width: 820px) {
  .trd-free > .tl-head { display: none; }
  .tq.hx { display: block; }
  .hx-stage { margin: 0 -12px 12px; border-radius: 0; position: sticky; top: var(--hx-top, 56px); z-index: 20; }
  .hx-out { position: static; max-height: none; overflow: visible; }
  .hx-switch { top: 8px; } .hx-switch button { padding: 8px 12px 8px 9px; font-size: 13.5px; }
  .hx-cap { top: 56px; padding: 5px 10px; } .hx-cap b { font-size: 13px; } .hx-cap small { font-size: 11px; }
  .hx-strip, .hx-rail { top: 96px; bottom: 132px; width: 56px; } .hx-strip { left: 6px; } .hx-rail { right: 6px; }
  .hx-strip button, .hx-rail button { padding: 6px 1px 5px; font-size: 10px; } .hx-strip button .tt-ic, .hx-rail button .tt-ic { width: 20px; height: 20px; }
  .hx-env { left: 6px; right: 6px; bottom: 6px; padding: 6px 10px 4px; gap: 4px 10px; }
  .hx-envr label b { font-size: 14.5px; } .hx-envr label { font-size: 11px; }
  .hx-leg { left: 66px; right: 66px; bottom: 74px; }
  .hx-leg small { font-size: 10.5px; padding: 3px 7px; }
  .hx-leg .tq-grad { grid-template-columns: auto 80px auto; font-size: 10.5px; }
  .hx-leg .tq-sizes button { padding: 4px 7px; font-size: 10.5px; } .hx-leg .tq-sizes button em { display: none; }
  .hx-drawer { left: 68px; right: 68px; width: auto; top: 96px; bottom: 74px; }
  .hx-pop { left: 66px; right: 66px; top: 96px; }
  .hx .tq-drop { inset: 96px 66px 132px; }
}

/* ---------- v1.24.3 · air quality slider with a pie of particle sizes ---------- */
.hx-env { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-aq label b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.hx-pie { flex: none; width: 20px; height: 20px; border: 0; padding: 0; border-radius: 50%; margin-left: auto; align-self: center; cursor: pointer; -webkit-mask: radial-gradient(circle, transparent 4px, #000 4.5px); mask: radial-gradient(circle, transparent 4px, #000 4.5px); }
.hx-piebox { display: flex; align-items: center; gap: 14px; }
.hx-bigpie { flex: none; width: 92px; height: 92px; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 24px, #000 25px); mask: radial-gradient(circle, transparent 24px, #000 25px); }
.hx-pieleg { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; flex: 1; }
.hx-pieleg li { display: grid; grid-template-columns: 10px 1fr auto; gap: 6px; align-items: center; } .hx-pieleg i { width: 10px; height: 10px; border-radius: 50%; } .hx-pieleg b { font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  .hx-env { gap: 2px 8px; padding: 6px 8px 4px; }
  .hx-envr label { gap: 4px; } .hx-envr label em { display: none; } .hx-aq label b, .hx-envr label b { font-size: 13px; }
  .hx-envr label .tt-ic { width: 14px; height: 14px; }
}

/* ---------- v1.24.4 · rollers (drag a tape under a marker) and the particle-size chart on the stage ---------- */
.rl { display: grid; grid-template-columns: 22px minmax(0, 1fr) 22px; align-items: center; gap: 2px; margin-top: 2px; }
.rl.off { opacity: .45; pointer-events: none; }
.rl-btn { width: 22px; height: 30px; border: 0; padding: 0; border-radius: 8px; background: rgba(255,255,255,.55); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.rl-btn .tt-ic { width: 14px; height: 14px; }
.rl-win { position: relative; height: 34px; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.55); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline-offset: 1px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.rl-win:active { cursor: grabbing; }
.rl-tape { position: absolute; left: 0; top: 0; bottom: 0; will-change: transform; }
.rl-tape.snap { transition: transform .15s ease-out; }
.rl-grad { position: absolute; left: 0; bottom: 4px; height: 5px; border-radius: 5px; opacity: .9; }
.rl-ticks { position: absolute; left: 0; top: 0; bottom: 9px; background: repeating-linear-gradient(90deg, rgba(15,30,38,.35) 0 1px, transparent 1px var(--px)); background-size: var(--px) 7px; background-repeat: repeat-x; background-position: 0 100%; }
.rl-lab { position: absolute; top: 3px; transform: translateX(-50%); font: 600 10.5px/1 var(--font); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rl-lab::after { content: ""; position: absolute; left: 50%; top: 13px; width: 1px; height: 11px; background: rgba(15,30,38,.55); }
.rl-named .rl-lab { font-size: 10px; } .rl-named .rl-ticks { background: none; }
.rl-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #C2185B; border-radius: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,.7); pointer-events: none; }
.hx-envr label span { font-size: 12px; }
/* particle sizes: a small chart at the lower left of the picture */
.hx-sizes { position: absolute; z-index: 6; left: 10px; bottom: 98px; width: 128px; display: grid; gap: 3px; padding: 7px 8px 6px; border: 0; border-radius: 14px; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px -14px rgba(10,20,40,.45); color: var(--ink); }
.hx-sizes > b { font: 700 11px/1.1 var(--font); }
.hx-sizes small { font-size: 9.5px; color: var(--muted); }
.hx-sz { display: grid; grid-template-columns: 40px 1fr; gap: 6px; align-items: center; }
.hx-ring { width: 40px; height: 40px; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 10px, #000 10.5px); mask: radial-gradient(circle, transparent 10px, #000 10.5px); }
.hx-sz ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; font-size: 9.5px; line-height: 1.25; }
.hx-sz li { display: grid; grid-template-columns: 7px 1fr auto; gap: 4px; align-items: center; } .hx-sz li.nil { opacity: .4; }
.hx-sz li i { width: 7px; height: 7px; border-radius: 50%; } .hx-sz li em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.hx-strip { bottom: auto; max-height: calc(100% - 62px - 260px); }
.hx.drawer-open .hx-sizes { display: none; }
.hx-leg { left: 150px; }
@media (max-width: 820px) {
  .hx-env { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-envr label span { display: none; }
  .rl { grid-template-columns: minmax(0, 1fr); } .rl-btn { display: none; }
  .rl-win { height: 36px; }
  .hx-sizes { left: 6px; bottom: 84px; width: 118px; }
  .hx-strip { max-height: calc(100% - 96px - 236px); }
  .hx-leg { left: 130px; right: 66px; }
}
.hx-sizes { width: 142px; } .hx-sz li span { white-space: nowrap; }
@media (max-width: 820px) { .hx-sizes { width: 132px; } .hx-leg { left: 144px; } }

/* ---------- v1.24.5 · exposure clock, time-lapse, results ticker, floating menus ---------- */
.hx-clock, .hx-play { position: absolute; z-index: 7; top: 10px; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 0; border-radius: 14px; cursor: pointer; color: var(--ink);
  background: rgba(255,255,255,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px -14px rgba(10,20,40,.45); font: 700 13px/1 var(--font); white-space: nowrap; }
.hx-clock { left: 10px; } .hx-play { right: 10px; }
.hx-clock .tt-ic, .hx-play .tt-ic { width: 20px; height: 20px; } .hx-clock small { font-weight: 500; color: var(--muted); font-size: 11px; }
.hx-play { background: linear-gradient(90deg, rgba(194,24,91,.18) var(--p, 0%), rgba(255,255,255,.62) var(--p, 0%)); }
.hx-play.on { color: #A3154F; }
/* the results: a strip of small cards along the bottom, scrolling slowly on its own */
.hx-ticker { position: absolute; z-index: 6; left: 10px; right: 10px; bottom: 88px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  -webkit-mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.hx-ticker::-webkit-scrollbar { display: none; }
.hx-track { display: flex; gap: 6px; padding: 2px 24px; width: max-content; }
.hx-tc { flex: none; display: grid; align-content: center; gap: 1px; min-width: 96px; max-width: 290px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11.5px; color: var(--ink-2); line-height: 1.3; }
.hx-tc small { font-size: 10.5px; color: var(--muted); white-space: nowrap; } .hx-tc b { font: 700 14px/1.15 var(--display); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hx-tc span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hx-tc.st { grid-template-columns: 10px auto; column-gap: 7px; max-width: 300px; } .hx-tc.st i { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; align-self: center; } .hx-tc.st span { grid-column: 2; }
.hx-tc.wide { max-width: 330px; } .hx-tc.note { max-width: 340px; background: rgba(228,241,250,.8); color: var(--ink); }
.hx-tc.flag b { font-size: 12.5px; white-space: normal; } .hx-tc.flag.lv2 { background: rgba(255,246,227,.85); } .hx-tc.flag.lv3 { background: rgba(255,239,227,.88); } .hx-tc.flag.lv4, .hx-tc.flag.lv5 { background: rgba(252,234,234,.9); }
.hx-tc.sg b { font-size: 13px; }
.tq-refbox { display: grid; gap: 8px; }
.hx-leg { bottom: 150px; }
.hx-sizes { bottom: 150px; }
/* the menus float: a handle on top to drag them, or push them off the edge */
.hx-strip, .hx-rail { transition: transform .22s ease; } .hx-strip.dragging, .hx-rail.dragging { transition: none; }
.hx-grip { flex: none; display: grid; gap: 3px; justify-items: center; align-content: center; height: 18px; border: 0; background: transparent; cursor: grab; touch-action: none; padding: 0 !important; }
.hx-grip i { display: block; width: 22px; height: 2px; border-radius: 2px; background: rgba(15,30,38,.35); }
.hx-strip.tucked, .hx-rail.tucked { overflow: hidden; }
.hx-strip.tucked > :not(.hx-grip), .hx-rail.tucked > :not(.hx-grip) { opacity: .25; pointer-events: none; }
.hx-strip.tucked .hx-grip { position: absolute; right: 2px; top: 6px; } .hx-rail.tucked .hx-grip { position: absolute; left: 2px; top: 6px; }
.hx-strip.tucked .hx-grip, .hx-rail.tucked .hx-grip { width: 14px; height: 40px; } .hx-strip.tucked .hx-grip i, .hx-rail.tucked .hx-grip i { width: 2px; height: 16px; }
.hx-strip.tucked .hx-grip, .hx-rail.tucked .hx-grip { grid-auto-flow: column; }
@media (max-width: 820px) {
  .hx-clock, .hx-play { top: 8px; height: 40px; padding: 0 9px; font-size: 12px; } .hx-play > span:not(.tt-ic) { display: none; } .hx-clock small { display: none; }
  .hx-switch { max-width: calc(100% - 150px); } .hx-switch button { padding: 8px 9px 8px 7px; font-size: 12.5px; gap: 5px; } .hx-switch button .tt-ic { width: 18px; height: 18px; }
  .hx-ticker { left: 6px; right: 6px; bottom: 76px; } .hx-tc { max-width: 240px; } .hx-tc.wide, .hx-tc.note { max-width: 260px; }
  .hx-leg { bottom: 136px; } .hx-sizes { bottom: 136px; }
  .hx-strip, .hx-rail { bottom: auto; max-height: calc(100% - 96px - 236px); }
  .hx-drawer { bottom: 136px; }
}
@media (max-width: 820px) { .hx-strip button { padding: 4px 1px 4px; } .hx-strip button .tt-ic { width: 18px; height: 18px; } }

/* ---------- v1.25.0 · ThermoRespiDose in two stages: 1 build the scene, 2 run "what if" and watch ---------- */
.hx-btitle, .hx-airnow, .hx-tray, .hx-run, .hx-edit, .hx-scrub, .hx-busybig { position: absolute; z-index: 7; }
.hx[data-stage="build"] .hx-switch, .hx[data-stage="build"] .hx-clock, .hx[data-stage="build"] .hx-play, .hx[data-stage="build"] .hx-strip, .hx[data-stage="build"] .hx-rail,
.hx[data-stage="build"] .hx-ticker, .hx[data-stage="build"] .hx-env, .hx[data-stage="build"] .hx-sizes, .hx[data-stage="build"] .hx-leg, .hx[data-stage="build"] .hx-edit,
.hx[data-stage="build"] .hx-scrub, .hx[data-stage="build"] .hx-cap, .hx[data-stage="build"] .hx-busybig { display: none !important; }
.hx[data-stage="watch"] .hx-btitle, .hx[data-stage="watch"] .hx-airnow, .hx[data-stage="watch"] .hx-tray, .hx[data-stage="watch"] .hx-run,
.hx[data-stage="watch"] .hx-strip, .hx[data-stage="watch"] .hx-env, .hx[data-stage="watch"] .hx-sizes { display: none !important; }
.tq.hx[data-stage="build"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "refs" "note"; }
.hx[data-stage="build"] .hx-out { display: none; }
.hx-btitle, .hx-airnow, .hx-tray, .hx-run, .hx-edit { background: rgba(255,255,255,.66); backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); box-shadow: 0 6px 20px -14px rgba(10,20,40,.45); }
/* stage 1: title, the air here, the tray, the big button */
.hx-btitle { left: 12px; top: 12px; padding: 8px 14px; border-radius: 14px; display: grid; gap: 2px; } .hx-btitle b { font: 700 16px/1.1 var(--display); } .hx-btitle small { font-size: 12px; color: var(--ink-2); }
.hx-airnow { right: 12px; top: 12px; width: 270px; padding: 10px 12px; border: 0; border-radius: 16px; display: grid; gap: 4px; text-align: left; cursor: pointer; color: var(--ink); }
.hx-anh { display: flex; justify-content: space-between; align-items: baseline; } .hx-anh b { font: 700 13px/1 var(--font); } .hx-anh small { font-size: 11px; color: var(--muted); }
.hx-an { display: grid; grid-template-columns: 18px auto 1fr; column-gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); }
.hx-an .tt-ic { width: 16px; height: 16px; } .hx-an b { justify-self: end; font: 700 15px/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.hx-an em { grid-column: 2 / 4; font-style: normal; font-size: 11px; color: var(--muted); text-align: right; margin-top: -2px; }
.hx-an.dust { grid-template-columns: 18px auto 1fr; } .hx-an.dust .hx-ring { width: 18px; height: 18px; -webkit-mask: radial-gradient(circle, transparent 4px, #000 4.5px); mask: radial-gradient(circle, transparent 4px, #000 4.5px); }
.hx-tray { left: 10px; right: 10px; bottom: 10px; border-radius: 18px; padding: 6px; display: grid; gap: 6px; }
.hx-ttabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .hx-ttabs::-webkit-scrollbar { display: none; }
.hx-ttabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 12px; padding: 7px 11px; background: transparent; color: var(--cc); font: 700 12.5px/1 var(--font); cursor: pointer; }
.hx-ttabs button .tt-ic { width: 18px; height: 18px; } .hx-ttabs button.on { background: var(--cc); color: #fff; }
.hx-titems { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 2px 2px 4px; align-items: stretch; min-height: 78px; }
.hx-it { flex: none; display: grid; justify-items: center; align-content: center; gap: 3px; width: 96px; min-height: 74px; padding: 8px 6px; border: 0; border-radius: 14px; background: rgba(255,255,255,.75); color: var(--ink); cursor: pointer; text-align: center; }
.hx-it .tt-ic { width: 24px; height: 24px; color: var(--ink-2); } .hx-it b { font: 700 12px/1.15 var(--font); } .hx-it small { font-size: 10.5px; color: var(--muted); line-height: 1.2; }
.hx-it.on { background: #123F63; color: #fff; } .hx-it.on .tt-ic, .hx-it.on small { color: #CFE3F2; }
.hx-it.cyc::after { content: "tap to change"; font-size: 9px; color: var(--muted); opacity: .8; } .hx-it.cyc.on::after { color: #CFE3F2; }
.hx-tsep { flex: none; align-self: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 500 12px/1 var(--font); font-style: normal; color: var(--muted); letter-spacing: 0; padding: 0 2px; }
.hx-tnote { align-self: center; padding: 0 10px; color: var(--ink-2); font-size: 12.5px; }
.hx-tune { flex: none; width: 230px; display: grid; gap: 2px; padding: 6px 8px; border-radius: 14px; background: rgba(255,255,255,.75); }
.hx-tune label { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--ink-2); } .hx-tune label b { font: 700 14px/1 var(--display); color: var(--ink); } .hx-tune label em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--muted); }
.hx-tune.set { box-shadow: inset 0 0 0 2px #C2185B; } .hx-tune.set label em { color: #C2185B; }
.hx-run { right: 18px; bottom: 182px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px; border: 0; border-radius: 999px; background: #C2185B; color: #fff; cursor: pointer; box-shadow: 0 12px 28px -12px rgba(194,24,91,.7); }
.hx-run .tt-ic { width: 26px; height: 26px; } .hx-run span { display: grid; text-align: left; } .hx-run b { font: 800 18px/1 var(--display); } .hx-run small { font-size: 11.5px; opacity: .9; }
.hx-run.fresh { animation: hxpulse 2.4s ease-in-out infinite; }
@keyframes hxpulse { 50% { box-shadow: 0 12px 28px -12px rgba(194,24,91,.7), 0 0 0 10px rgba(194,24,91,.12); } }
.hx[data-stage="build"] .hx-drawer { left: 12px; top: 74px; bottom: 182px; }
/* stage 2: edit, the timeline, the big "running" note */
.hx-edit { left: 10px; top: 10px; height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 14px; font: 700 13px/1 var(--font); color: var(--ink); cursor: pointer; }
.hx-edit .tt-ic { width: 18px; height: 18px; }
.hx[data-stage="watch"] .hx-clock { top: 62px; left: 10px; }
.hx-scrub { left: 14px; width: calc(100% - 28px); bottom: 78px; -webkit-appearance: none; appearance: none; height: 22px; background: transparent; box-shadow: none !important; padding: 0; }
.hx-scrub::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #EFE9E4, #2A2222); opacity: .75; }
.hx-scrub::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #EFE9E4, #2A2222); }
.hx-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 5px #C2185B; }
.hx-scrub::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 5px solid #C2185B; }
.hx[data-stage="watch"] .hx-ticker { bottom: 10px; }
.hx[data-stage="watch"] .hx-leg { bottom: 104px; left: 70px; }
.hx[data-stage="watch"] .hx-rail { bottom: auto; max-height: calc(100% - 62px - 120px); }
.hx-busybig { left: 50%; top: 45%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; padding: 18px 24px; border-radius: 20px; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: center; }
.hx-busybig[hidden] { display: none !important; }
.hx-busybig i { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(194,24,91,.25); border-top-color: #C2185B; animation: tqspin .8s linear infinite; }
.hx-busybig b { font: 700 16px/1.1 var(--display); } .hx-busybig small { font-size: 12px; color: var(--ink-2); }
.hx[data-stage="watch"].busy .hx-cap { visibility: hidden; }
@media (max-width: 820px) {
  .hx-btitle { left: 6px; top: 6px; padding: 6px 10px; } .hx-btitle b { font-size: 14px; } .hx-btitle small { font-size: 11px; }
  .hx-airnow { left: 6px; right: 6px; top: 54px; width: auto; grid-template-columns: 1fr 1fr; gap: 3px 10px; padding: 7px 10px; }
  .hx-anh { grid-column: 1 / 3; } .hx-an { font-size: 11px; } .hx-an b { font-size: 13px; } .hx-an em { display: none; }
  .hx-tray { left: 4px; right: 4px; bottom: 4px; padding: 4px; gap: 4px; } .hx-ttabs button { padding: 6px 9px; font-size: 11.5px; } .hx-ttabs button .tt-ic { width: 16px; height: 16px; }
  .hx-it { width: 84px; min-height: 66px; padding: 6px 4px; } .hx-it .tt-ic { width: 21px; height: 21px; } .hx-it b { font-size: 11px; } .hx-titems { min-height: 70px; }
  .hx-tune { width: 210px; }
  .hx-run { right: 10px; bottom: 140px; padding: 10px 16px 10px 12px; } .hx-run b { font-size: 16px; }
  .hx[data-stage="build"] .hx-drawer { left: 6px; right: 6px; width: auto; top: 140px; bottom: 140px; }
  .hx-edit { top: 8px; left: 6px; height: 40px; padding: 0 9px; font-size: 12px; } .hx-edit > span:not(.tt-ic) { font-size: 0; } .hx-edit > span:not(.tt-ic)::after { content: 'Journey'; font-size: 12px; }
  .hx[data-stage="watch"] .hx-switch { left: 50%; } .hx[data-stage="watch"] .hx-clock { top: 56px; left: 6px; }
  .hx-scrub { left: 8px; width: calc(100% - 16px); bottom: 70px; }
  .hx[data-stage="watch"] .hx-ticker { bottom: 6px; } .hx[data-stage="watch"] .hx-leg { bottom: 96px; left: 10px; right: 66px; }
}

/* ---------- v1.25.1 · over time: each layer's temperature and the sweat, part by part ---------- */
.hx-trendbtn { position: absolute; z-index: 7; left: 10px; top: 114px; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 14px; cursor: pointer; color: var(--ink);
  background: rgba(255,255,255,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 20px -14px rgba(10,20,40,.45); font: 700 13px/1 var(--font); white-space: nowrap; }
.hx-trendbtn .tt-ic { width: 19px; height: 19px; } .hx-trendbtn.on { background: #1E3A52; color: #fff; }
.hx[data-stage="build"] .hx-trendbtn, .hx[data-stage="build"] .hx-trend, .hx[data-view="air"] .hx-trendbtn, .hx[data-view="air"] .hx-trend { display: none !important; }
.hx-trend { position: absolute; z-index: 8; left: 10px; top: 162px; bottom: 108px; width: min(440px, calc(100% - 110px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-radius: 16px; background: rgba(255,255,255,.8); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 10px 30px -18px rgba(10,20,40,.5); }
.hx-trend[hidden] { display: none; } .hx-trend > * { flex: none; }
.hx-th { display: flex; align-items: center; gap: 8px; } .hx-th b { font: 700 14px/1.2 var(--display); color: var(--ink); } .hx-th small { color: var(--muted); font-size: 11.5px; margin-right: auto; font-variant-numeric: tabular-nums; }
.hx-th .tq-x { width: 28px; height: 28px; background: rgba(0,0,0,.05); }
.hx-tparts { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .hx-tparts::-webkit-scrollbar { display: none; }
.hx-tparts button { flex: none; border: 0; background: rgba(0,0,0,.05); color: var(--ink-2); border-radius: 999px; padding: 6px 10px; font: 600 11.5px/1 var(--font); cursor: pointer; white-space: nowrap; }
.hx-tparts button.on { background: #1E3A52; color: #fff; }
.hx-chart { width: 100%; height: auto; display: block; overflow: visible; }
.hx-chart text { font: 500 9.5px var(--font); fill: #6B7378; font-variant-numeric: tabular-nums; } .hx-chart text.un { font-weight: 700; }
.hx-chart .gl { stroke: rgba(0,0,0,.07); stroke-width: 1; } .hx-chart .cur { stroke: #C2185B; stroke-width: 1.2; stroke-dasharray: 3 3; }
.hx-tleg { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.hx-tleg button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: rgba(0,0,0,.04); border-radius: 999px; padding: 5px 9px 5px 7px; font: 500 11.5px/1 var(--font); color: var(--ink-2); cursor: pointer; }
.hx-tleg button i, .hx-tsub i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; } .hx-tleg button b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.hx-tleg button.off { opacity: .4; } .hx-tleg button.off b { display: none; }
.hx-tsub { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--ink-2); margin-top: 2px; } .hx-tsub span { display: inline-flex; align-items: center; gap: 5px; } .hx-tsub b { color: var(--ink); font-variant-numeric: tabular-nums; }
.hx-tpair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hx-tnote2 { color: var(--muted); font-size: 11px; line-height: 1.35; }
@media (max-width: 820px) {
  .hx-trendbtn { top: 104px; left: 6px; height: 38px; padding: 0 9px; font-size: 12px; }
  .hx-trend { left: 6px; right: 64px; width: auto; top: 148px; bottom: 98px; padding: 8px 10px 10px; }
}

/* ---------- v1.26.0 · ThermoRespiDose as a journey on a map ---------- */
.jm-map { position: absolute; inset: 0; z-index: 1; background: #E8E6E1; }
.hx[data-stage="watch"] .jm-map, .hx[data-stage="watch"] .jm-search, .hx[data-stage="watch"] .jm-hits, .hx[data-stage="watch"] .jm-pin, .hx[data-stage="watch"] .jm-sheet { display: none !important; }
.hx[data-stage="build"] .tq-stages { visibility: hidden; }
.hx[data-stage="build"] .jm-mask, .hx[data-stage="build"] .jm-bar, .hx[data-stage="build"] .jm-cmpbtn, .hx[data-stage="build"] .jm-cmp { display: none !important; }
.jm-map .leaflet-control-attribution { font: 10px/1.3 var(--font); background: rgba(255,255,255,.75); border-radius: 8px 0 0 0; }
.jm-map .leaflet-control-zoom { border: 0; box-shadow: 0 6px 18px -10px rgba(10,20,40,.5); border-radius: 12px; overflow: hidden; }
.jm-map .leaflet-control-zoom a { border: 0; color: var(--ink); }
.jm-mk-w { background: none; border: 0; }
.jm-mk { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1E3A52; color: #fff; font: 800 13px/1 var(--display); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0,0,0,.3); }
.jm-mk.home { background: #2F7D5B; } .jm-mk.new { width: 22px; height: 22px; background: #C2185B; }
/* search, like a maps app */
.jm-search { position: absolute; z-index: 6; top: 10px; left: 10px; width: min(380px, calc(100% - 20px)); display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 6px 0 14px; border-radius: 999px; background: #fff; box-shadow: 0 8px 24px -12px rgba(10,20,40,.45); color: var(--muted); }
.jm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 15px/1 var(--font); color: var(--ink); height: 100%; }
.jm-search input::-webkit-search-cancel-button { opacity: .5; }
.jm-loc { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #EEF3F7; color: #1E5A86; cursor: pointer; } .jm-loc.busy { animation: jmPulse 1s infinite; }
@keyframes jmPulse { 50% { opacity: .4; } }
.jm-hits { position: absolute; z-index: 8; top: 64px; left: 10px; width: min(380px, calc(100% - 20px)); max-height: 50%; overflow: auto; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px -14px rgba(10,20,40,.5); padding: 6px; display: grid; }
.jm-hits[hidden] { display: none; }
.jm-hits button { display: flex; gap: 10px; align-items: center; border: 0; background: transparent; text-align: left; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--ink); } .jm-hits button:hover { background: #F3F5F7; }
.jm-hits button span { display: grid; } .jm-hits b { font-weight: 600; font-size: 14px; } .jm-hits small { color: var(--muted); font-size: 12px; }
.jm-wait { margin: 8px 10px; color: var(--muted); font-size: 13px; }
/* the place you tapped */
.jm-pin { position: absolute; z-index: 7; top: 10px; left: 404px; width: 320px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 30px -14px rgba(10,20,40,.5); display: grid; gap: 8px; }
.jm-pin[hidden] { display: none; }
.jm-pin-h { display: flex; align-items: center; gap: 8px; } .jm-pin-h b { flex: 1; font: 700 15px/1.2 var(--display); color: var(--ink); } .jm-pin-h .tt-ic { color: #C2185B; }
.jm-pin-air { margin: 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.jm-pin-b { display: flex; flex-wrap: wrap; gap: 8px; }
.jm-go, .jm-sec { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; font: 700 13px/1 var(--font); cursor: pointer; background: #EEF1F4; color: var(--ink); }
.jm-go { background: #1E3A52; color: #fff; } .jm-go:disabled, .jm-sec:disabled { opacity: .45; cursor: default; }
.jm-go .tt-ic, .jm-sec .tt-ic { width: 18px; height: 18px; }
/* the journey sheet */
.jm-sheet { position: absolute; z-index: 5; left: 10px; top: 68px; bottom: 10px; width: 380px; display: flex; flex-direction: column; border-radius: 20px; background: rgba(255,255,255,.93); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 34px -18px rgba(10,20,40,.5); overflow: hidden; }
.jm-sh-h { flex: none; display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 8px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink); position: relative; }
.jm-sh-h b { font: 800 17px/1.1 var(--display); } .jm-sh-h small { color: var(--muted); font-size: 12.5px; }
.jm-grab { display: none; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: rgba(0,0,0,.18); }
.jm-sh-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 84px; display: grid; align-content: start; gap: 12px; }
.jm-stops { list-style: none; margin: 0; padding: 0; display: grid; }
.jm-stop, .jm-leg { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; }
.jm-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #1E3A52; color: #fff; font: 800 12.5px/1 var(--display); font-style: normal; margin-top: 2px; z-index: 1; }
.jm-stop.home .jm-dot { background: #2F7D5B; } .jm-dot .tt-ic { width: 16px; height: 16px; }
.jm-line { justify-self: center; width: 2px; background: repeating-linear-gradient(#9AA5AE 0 5px, transparent 5px 9px); }
.jm-leg { padding: 2px 0; } .jm-leg .jm-st { padding: 8px 10px; border-radius: 14px; background: rgba(30,58,82,.05); margin: 4px 0; }
.jm-leg.add { min-height: 34px; } .jm-addleg { align-self: center; justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #1E5A86; font: 600 12.5px/1 var(--font); cursor: pointer; padding: 6px 0; } .jm-addleg .tt-ic { width: 15px; height: 15px; }
.jm-st { display: grid; gap: 6px; min-width: 0; padding: 2px 0 12px; }
.jm-st-h { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .jm-st-h b { font: 700 14.5px/1.25 var(--display); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-st-h small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: auto; } .jm-st-h > .tt-ic { width: 17px; height: 17px; color: #1E5A86; align-self: center; }
.jm-ic { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; align-self: center; } .jm-ic:hover { background: rgba(0,0,0,.05); } .jm-ic .tt-ic { width: 16px; height: 16px; }
.jm-air { margin: 0; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.jm-chips { display: flex; flex-wrap: wrap; gap: 5px; } .jm-chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -4px; } .jm-chips.scroll::-webkit-scrollbar { display: none; }
.jm-chips button { flex: none; display: inline-flex; align-items: center; gap: 5px; border: 0; background: rgba(0,0,0,.05); color: var(--ink-2); border-radius: 999px; padding: 6px 10px 6px 8px; font: 600 12px/1 var(--font); cursor: pointer; white-space: nowrap; }
.jm-chips button .tt-ic { width: 15px; height: 15px; } .jm-chips button.on { background: #1E3A52; color: #fff; }
.jm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .jm-row small { color: var(--muted); font-size: 11.5px; }
.jm-dur { display: inline-flex; align-items: center; gap: 2px; background: rgba(0,0,0,.05); border-radius: 999px; padding: 2px; }
.jm-dur button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ink); } .jm-dur button:disabled { opacity: .35; } .jm-dur .tt-ic { width: 15px; height: 15px; }
.jm-dur b { min-width: 74px; text-align: center; font: 700 13px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.jm-link { border: 0; background: transparent; color: #1E5A86; font: 600 12.5px/1 var(--font); cursor: pointer; padding: 4px 0; }
.jm-empty { display: grid; gap: 10px; justify-items: start; padding: 12px; border-radius: 16px; background: rgba(194,24,91,.06); } .jm-empty p { margin: 0; font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.jm-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.jm-person { display: grid; gap: 6px; } .jm-person h4 { margin: 4px 0 0; font: 500 12px/1 var(--font); color: var(--muted); letter-spacing: 0; }
.jm-clothes { display: flex; align-items: center; gap: 10px; border: 0; background: rgba(0,0,0,.04); border-radius: 14px; padding: 10px 12px; text-align: left; cursor: pointer; color: var(--ink); }
.jm-clothes > span { display: grid; min-width: 0; } .jm-clothes b { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jm-clothes small { color: var(--muted); font-size: 11.5px; }
.hx[data-stage="build"] .hx-run { right: 16px; bottom: 18px; } .hx-run:disabled { background: #B9BEC4; box-shadow: none; cursor: default; animation: none; }
.hx[data-stage="build"] .hx-drawer { left: 400px; top: 68px; bottom: 90px; z-index: 9; }
/* stage 2: the journey along the time line, the mask, the stops side by side */
.jm-bar { position: absolute; z-index: 6; left: 14px; right: 14px; bottom: 100px; display: flex; gap: 3px; height: 28px; }
.jm-bar button { position: relative; min-width: 28px; flex-basis: 0; display: flex; align-items: center; gap: 4px; padding: 0 7px; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; color: var(--ink-2); font: 600 11px/1 var(--font);
  background: linear-gradient(90deg, rgba(30,58,82,.22) var(--p, 0%), rgba(255,255,255,.7) var(--p, 0%)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.jm-bar button.move { background: linear-gradient(90deg, rgba(194,24,91,.22) var(--p, 0%), rgba(255,240,245,.75) var(--p, 0%)); }
.jm-bar button.on { box-shadow: inset 0 0 0 2px #1E3A52; color: var(--ink); }
.jm-bar button .tt-ic { flex: none; width: 15px; height: 15px; } .jm-bar button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx[data-stage="watch"] .hx-scrub { bottom: 74px; }
.hx[data-stage="watch"] .hx-leg { bottom: 136px; }
.hx[data-stage="watch"][data-view="air"] .hx-leg { bottom: 172px; }
.jm-mask { position: absolute; z-index: 7; left: 50%; transform: translateX(-50%); bottom: 134px; max-width: calc(100% - 28px); display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 999px; background: rgba(255,255,255,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 18px -12px rgba(10,20,40,.45); overflow-x: auto; scrollbar-width: none; }
.jm-mask::-webkit-scrollbar { display: none; } .jm-mask > .tt-ic { flex: none; width: 18px; height: 18px; color: #1E5A86; margin-right: 2px; }
.jm-mask button { flex: none; border: 0; background: transparent; border-radius: 999px; padding: 6px 10px; font: 600 12px/1 var(--font); color: var(--ink-2); cursor: pointer; white-space: nowrap; } .jm-mask button.on { background: #1E3A52; color: #fff; }
.hx[data-view="body"] .jm-mask { display: none; }
.jm-cmpbtn { top: 166px; } .hx[data-view="air"] .jm-cmpbtn { top: 114px; }
.hx[data-stage="watch"][data-view="air"] .jm-cmpbtn { display: inline-flex !important; }
.hx.phone .hx-trend, .hx .hx-trend { bottom: 136px; }
.jm-cmp { position: absolute; z-index: 9; left: 10px; right: 90px; top: 62px; bottom: 136px; overflow: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 10px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.93); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 12px 30px -16px rgba(10,20,40,.5); }
.jm-cmp[hidden] { display: none; } .jm-cmpx { position: absolute; right: 10px; top: 10px; }
.jm-sum { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.jm-gridw { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.jm-grid { display: grid; gap: 0; font-size: 12.5px; min-width: max-content; }
.jm-grid > * { padding: 6px 8px; border-bottom: 1px solid rgba(0,0,0,.06); }
.jm-rl { color: var(--muted); font-size: 12px; align-self: center; position: sticky; left: 0; background: inherit; }
.jm-sec-h { grid-column: 1 / -1; font: 500 11.5px/1 var(--font); color: #1E5A86; letter-spacing: 0; padding-top: 12px; border-bottom: 0; }
.jm-ch { display: grid; justify-items: start; gap: 2px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink); border-radius: 10px; padding: 6px 8px; }
.jm-ch .tt-ic { width: 17px; height: 17px; color: #1E5A86; } .jm-ch b { font: 700 13px/1.15 var(--display); } .jm-ch small { color: var(--muted); font-size: 11px; } .jm-ch.on { background: rgba(30,58,82,.08); }
.jm-cell { display: grid; align-content: center; gap: 1px; } .jm-cell b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .jm-cell small { color: var(--muted); font-size: 11px; }
.jm-cell em { font-style: normal; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .jm-cell em.up { color: #C0392B; } .jm-cell em.dn { color: #1E6FB8; }
.jm-v { display: inline-flex; align-items: center; gap: 6px; } .jm-v i { width: 9px; height: 9px; border-radius: 50%; background: var(--vc); }
.jm-foot { color: var(--muted); font-size: 11px; line-height: 1.35; }
.jm-cmpcard .jm-grid { font-size: 12px; }
@media (min-width: 821px) { .jm-cmpbtn { display: none !important; } }
@media (max-width: 820px) {
  .jm-search { left: 8px; right: 8px; width: auto; top: 8px; height: 46px; }
  .jm-hits { left: 8px; right: 8px; width: auto; top: 60px; }
  .jm-pin { left: 8px; right: 8px; width: auto; top: 60px; }
  .jm-map .leaflet-control-zoom { display: none; }
  .jm-map .leaflet-top.leaflet-right { top: 56px; }
  .jm-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 58%; border-radius: 22px 22px 0 0; }
  .jm-sheet.min .jm-sh-b { display: none; } .jm-sheet.min { padding-bottom: 68px; }
  .jm-grab { display: block; } .jm-sh-h { padding-top: 18px; }
  .hx[data-stage="build"] .hx-run { right: 10px; bottom: 10px; }
  .hx[data-stage="build"] .hx-drawer { left: 6px; right: 6px; top: 60px; bottom: 80px; width: auto; }
  .jm-bar { left: 8px; right: 8px; bottom: 94px; height: 26px; } .jm-bar button span { display: none; } .jm-bar button.on span { display: inline; }
  .hx[data-stage="watch"] .hx-scrub { bottom: 68px; }
  .jm-mask { bottom: 126px; } .hx[data-stage="watch"] .hx-leg { bottom: 126px; } .hx[data-stage="watch"][data-view="air"] .hx-leg { bottom: 162px; }
  .hx-trendbtn { top: 104px; } .jm-cmpbtn { top: 152px; } .hx[data-view="air"] .jm-cmpbtn { top: 104px; }
  .jm-cmp { left: 6px; right: 6px; top: 52px; bottom: 126px; padding: 10px; }
  .hx.phone .hx-trend, .hx .hx-trend { bottom: 126px; }
}

.hx[data-stage="watch"] .hx-rail { max-height: calc(100% - 62px - 190px); }
@media (max-width: 820px) { .hx[data-stage="watch"] .hx-rail { max-height: calc(100% - 56px - 200px); } }
.tq.hx { grid-template-areas: "stage out" "cmp out" "refs out" "note out"; } .jm-cmpcard { grid-area: cmp; }
.tq.hx[data-stage="build"] .jm-cmpcard { display: none; }
@media (max-width: 820px) { .jm-cmpcard { display: none; } }
.jm-rl { background: rgba(255,255,255,.97); z-index: 1; }
@media (max-width: 820px) { .jm-cmp .jm-grid { --rl: 66px; --cw: 82px; font-size: 12px; } .jm-cmp .jm-grid > * { padding: 5px 5px; } .jm-cmp .jm-rl { font-size: 11px; } }
.hx-chart .mk { stroke: rgba(30,58,82,.35); stroke-width: 1; }

/* ---------- v1.27.0 · ThermoRespiDose: indoors or travel, a maps-style sheet, a dock, results in order ---------- */
.tq.hx { grid-template-areas: "stage out" "cmp out" "note out"; }
.hx-under { grid-area: cmp; display: grid; gap: 14px; min-width: 0; }
.hx-out { display: grid; gap: 12px; align-content: start; }
.tq.hx[data-stage="build"], .tq.hx[data-stage="choose"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "note"; }
.tq.hx[data-stage="build"] .hx-out, .tq.hx[data-stage="build"] .hx-under, .tq.hx[data-stage="choose"] .hx-out, .tq.hx[data-stage="choose"] .hx-under { display: none; }
/* what shows at each step */
.hx[data-stage="choose"] .tq-stages, .hx[data-stage="choose"] .jm-map, .hx[data-stage="choose"] .hx-switch, .hx[data-stage="choose"] .hx-back, .hx[data-stage="choose"] .rm-air,
.hx[data-stage="choose"] .jm-search, .hx[data-stage="choose"] .jm-hits, .hx[data-stage="choose"] .jm-pin, .hx[data-stage="choose"] .mk, .hx[data-stage="choose"] .sh { display: none !important; }
.hx:not([data-stage="choose"]) .ch { display: none; }
.hx[data-stage="build"] .hx-switch, .hx[data-stage="build"] .hx-back, .hx[data-stage="build"] .mk, .hx[data-stage="build"] .dk { display: none !important; }
.hx[data-stage="build"][data-mode="indoor"] .tq-stages { visibility: visible; }
.hx[data-stage="build"][data-mode="indoor"] .jm-map, .hx[data-stage="build"][data-mode="indoor"] .jm-search, .hx[data-stage="build"][data-mode="indoor"] .jm-hits, .hx[data-stage="build"][data-mode="indoor"] .jm-pin { display: none !important; }
.hx:not([data-mode="indoor"]) .rm-air, .hx[data-stage="watch"] .rm-air { display: none !important; }
.hx[data-stage="watch"] .jm-map, .hx[data-stage="watch"] .jm-search, .hx[data-stage="watch"] .jm-hits, .hx[data-stage="watch"] .jm-pin { display: none !important; }
.hx[data-view="body"] .mk { display: none; }
/* the first question */
.ch { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; padding: 16px; background: radial-gradient(120% 90% at 50% 0%, #FBF7F1 0%, #EFE8DE 60%, #E6DED2 100%); }
.ch-c { width: min(640px, 100%); display: grid; gap: 16px; text-align: center; }
.ch-c h3 { margin: 0; font: 800 22px/1.2 var(--display); color: var(--ink); }
.ch-os { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ch-o { display: grid; justify-items: center; gap: 8px; padding: 24px 18px; border: 0; border-radius: 22px; background: rgba(255,255,255,.85); box-shadow: 0 16px 36px -22px rgba(10,20,40,.55); cursor: pointer; color: var(--ink); text-align: center; transition: transform .15s ease, box-shadow .15s ease; }
.ch-o:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -22px rgba(10,20,40,.6); }
.ch-o.last { box-shadow: 0 0 0 2px #1E3A52, 0 16px 36px -22px rgba(10,20,40,.55); }
.ch-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #EEF3F7; color: #1E5A86; } .ch-ic .tt-ic { width: 32px; height: 32px; }
.ch-o b { font: 800 19px/1.1 var(--display); } .ch-o span { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 560px) { .ch-os { grid-template-columns: 1fr; } .ch-o { padding: 16px; grid-template-columns: 52px 1fr; justify-items: start; text-align: left; column-gap: 12px; } .ch-ic { grid-row: span 2; width: 52px; height: 52px; } }
/* the corners: back (top left, while watching) and about (top right) */
.hx-back, .hx-info { position: absolute; z-index: 9; top: 10px; display: inline-flex; align-items: center; gap: 6px; height: 40px; border: 0; cursor: pointer; color: var(--ink); background: rgba(255,255,255,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 18px -12px rgba(10,20,40,.45); }
.hx-back { left: 10px; padding: 0 14px 0 10px; border-radius: 14px; font: 700 13px/1 var(--font); } .hx-back .tt-ic { width: 18px; height: 18px; }
.hx-info { right: 10px; width: 40px; justify-content: center; border-radius: 50%; } .hx-info b { font: italic 800 17px/1 Georgia, 'Times New Roman', serif; color: #1E5A86; }
.hx-rail { top: 60px !important; }
/* the sheet */
.sh { position: absolute; left: 0; right: 0; top: 0; z-index: 8; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; background: rgba(255,255,255,.95); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 -10px 30px -18px rgba(10,20,40,.45); will-change: transform; }
.sh[hidden] { display: none; }
.sh.anim { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.sh-grab { flex: none; height: 20px; border: 0; background: transparent; cursor: grab; display: grid; place-items: center; touch-action: none; }
.sh-grab i { width: 38px; height: 5px; border-radius: 5px; background: rgba(0,0,0,.18); }
.sh-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px 10px; touch-action: none; min-width: 0; }
.sh-body { overflow-y: auto; overscroll-behavior: contain; padding: 2px 14px 28px; display: grid; align-content: start; gap: 12px; -webkit-overflow-scrolling: touch; }
.sh-title { flex: 1; min-width: 0; display: grid; } .sh-title b { font: 800 18px/1.15 var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-title small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-back { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0,0,0,.05); display: grid; place-items: center; cursor: pointer; color: var(--ink); } .sh-back .tt-ic { width: 18px; height: 18px; }
.sh-go { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px 0 14px; border: 0; border-radius: 999px; background: #C2185B; color: #fff; font: 800 15px/1 var(--display); cursor: pointer; box-shadow: 0 10px 22px -12px rgba(194,24,91,.8); }
.sh-go .tt-ic { width: 20px; height: 20px; } .sh-go:disabled { background: #C3C8CE; box-shadow: none; cursor: default; }
.sh-go.fresh { animation: shGo 2.2s ease-in-out infinite; } @keyframes shGo { 50% { box-shadow: 0 0 0 7px rgba(194,24,91,.14), 0 10px 22px -12px rgba(194,24,91,.8); } }
.sh.side { left: 10px; right: auto; top: 10px; bottom: 10px; width: 380px; height: auto !important; transform: none !important; border-radius: 20px; box-shadow: 0 14px 34px -18px rgba(10,20,40,.5); }
.sh.side .sh-grab { display: none; } .sh.side .sh-head { padding-top: 14px; } .sh.side .sh-body { flex: 1; min-height: 0; height: auto !important; }
/* the travel controls beside the sheet on computers */
.hx:not(.phone)[data-stage="build"] .jm-search { left: 404px; width: min(360px, calc(100% - 470px)); }
.hx:not(.phone)[data-stage="build"] .jm-hits, .hx:not(.phone)[data-stage="build"] .jm-pin { left: 404px; }
.hx:not(.phone)[data-stage="build"] .jm-pin { top: 66px; }
.hx.phone .jm-search { right: 58px; }
.hx.phone .jm-pin, .hx.phone .jm-hits { top: 60px; }
.jm-stops { margin-top: 2px; }
/* indoors: the air of the room, in one line */
.rm-air { position: absolute; z-index: 6; top: 10px; left: calc(50% + 200px); transform: translateX(-50%); display: inline-flex; gap: 12px; align-items: center; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 18px -12px rgba(10,20,40,.45); cursor: pointer; color: var(--ink); white-space: nowrap; }
.rm-air span { display: inline-flex; align-items: center; gap: 4px; } .rm-air .tt-ic { width: 16px; height: 16px; color: var(--muted); } .rm-air b { font: 700 13.5px/1 var(--font); font-variant-numeric: tabular-nums; } .rm-air small { font-size: 11px; color: var(--muted); }
.hx.phone .rm-air { left: 50%; top: 10px; gap: 9px; padding: 7px 11px; max-width: calc(100% - 70px); } .hx.phone .rm-air b { font-size: 12.5px; }
.rm-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; position: sticky; top: -2px; z-index: 1; padding: 4px 0 6px; background: linear-gradient(rgba(255,255,255,.98) 80%, rgba(255,255,255,0)); } .rm-tabs::-webkit-scrollbar { display: none; }
.rm-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: rgba(0,0,0,.05); color: var(--ink-2); font: 700 12.5px/1 var(--font); padding: 8px 12px 8px 9px; cursor: pointer; } .rm-tabs button .tt-ic { width: 16px; height: 16px; }
.rm-tabs button.on { background: #1E3A52; color: #fff; }
.rm-pane { display: grid; gap: 8px; }
.rm-h { margin: 6px 0 0; font: 500 11.5px/1.2 var(--font); color: var(--muted); letter-spacing: 0; }
.rm-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.rm-t { display: grid; justify-items: center; gap: 3px; padding: 10px 6px 9px; border: 0; border-radius: 14px; background: rgba(0,0,0,.04); color: var(--ink); cursor: pointer; text-align: center; min-height: 74px; align-content: center; }
.rm-t .tt-ic { width: 22px; height: 22px; color: #1E5A86; } .rm-t b { font: 700 12.5px/1.15 var(--font); } .rm-t small { font-size: 11px; color: var(--muted); }
.rm-t.on { background: #1E3A52; color: #fff; } .rm-t.on .tt-ic, .rm-t.on small { color: #CFE3F2; }
.rm-note { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.rm-tune { display: grid; gap: 4px; padding: 8px 10px; border-radius: 14px; background: rgba(0,0,0,.035); } .rm-tune label { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; } .rm-tune label span { flex: 1; color: var(--ink-2); } .rm-tune em { font-style: normal; font-size: 11px; color: var(--muted); } .rm-tune.set em { color: #C2185B; }
/* the dock: play, the time line, the time */
.dk { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }
.hx:not(.phone) .dk { position: absolute; z-index: 7; left: 14px; right: 90px; bottom: 14px; width: auto; padding: 8px 12px 8px 8px; border-radius: 18px; background: rgba(255,255,255,.84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 26px -16px rgba(10,20,40,.5); }
.dk-play { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #1E3A52; color: #fff; display: grid; place-items: center; cursor: pointer; } .dk-play .tt-ic { width: 20px; height: 20px; } .dk-play.on { background: #C2185B; }
.dk-track { position: relative; flex: 1; min-width: 0; height: 34px; }
.dk .jm-bar { position: absolute; inset: 0; left: 0; right: 0; bottom: auto; height: 100%; gap: 3px; }
.dk .jm-bar button { height: 100%; }
.dk-scrub { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; }
.dk-scrub::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.dk-scrub::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 6px; height: 40px; margin-top: -3px; border-radius: 3px; background: #C2185B; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.3); cursor: ew-resize; }
.dk-scrub::-moz-range-thumb { pointer-events: auto; width: 6px; height: 40px; border: 0; border-radius: 3px; background: #C2185B; box-shadow: 0 0 0 2px #fff; }
.dk-t { flex: none; display: grid; justify-items: end; min-width: 64px; } .dk-t b { font: 800 14px/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; } .dk-t small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.hx.phone .sh-head .dk { padding: 0; }
/* the legends sit above the dock or the sheet */
.hx[data-stage="watch"] .hx-leg { bottom: 78px !important; }
.hx.phone[data-stage="watch"] .hx-leg { bottom: calc(var(--shh, 100px) + 10px) !important; left: 8px; right: 66px; }
.hx[data-stage="watch"] .hx-rail { max-height: calc(100% - 60px - 140px) !important; }
.hx.phone[data-stage="watch"] .hx-rail { max-height: calc(100% - 60px - var(--shh, 100px) - 70px) !important; }
/* the mask: a pill with its drawing; tap to roll through the others */
.mk { position: absolute; z-index: 9; left: 10px; top: 60px; }
.hx.phone .mk { top: 56px; left: 8px; }
.mk-pill { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 8px; border: 0; border-radius: 16px; background: rgba(255,255,255,.84); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 18px -12px rgba(10,20,40,.45); cursor: pointer; color: var(--ink); }
.mk-pill > span:last-child { display: grid; text-align: left; } .mk-pill small { font-size: 10.5px; color: var(--muted); } .mk-pill b { font: 700 13px/1.1 var(--font); }
.mk-ic { display: inline-block; width: 50px; height: 30px; } .mk-ic svg { width: 100%; height: 100%; display: block; } .mk-ic.lg { width: 150px; height: 90px; }
.mk-pop { position: absolute; top: 54px; left: 0; width: min(320px, calc(100vw - 30px)); display: grid; justify-items: center; gap: 8px; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 34px -16px rgba(10,20,40,.5); }
.mk-pop[hidden] { display: none; } .mk-pop .rl { width: 100%; } .mk-note { margin: 0; font-size: 12px; color: var(--ink-2); text-align: center; line-height: 1.4; }
/* about */
.if { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 14px; background: rgba(20,24,30,.28); }
.if[hidden] { display: none; }
.if-c { width: min(620px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px -24px rgba(0,0,0,.5); overflow: hidden; }
.if-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.06); } .if-h b { flex: 1; font: 800 17px/1.2 var(--display); }
.if-b { overflow-y: auto; padding: 4px 18px 18px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.if-b h4 { margin: 14px 0 4px; font: 700 13px/1.2 var(--font); color: #1E5A86; } .if-b p { margin: 0 0 6px; } .if-b .tq-refs { margin: 0; padding-left: 18px; font-size: 12px; }
/* the results */
.rs-at { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.rs-sub { margin: 10px 0 2px; font: 500 12px/1.2 var(--font); color: #1E5A86; letter-spacing: 0; }
.rs-now { margin: 0; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rs-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.rs-k { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 6px; border-radius: 999px; background: rgba(0,0,0,.04); font-size: 11.5px; color: var(--ink-2); } .rs-k i { width: 12px; height: 3px; border-radius: 2px; } .rs-k b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rs-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rs-tab th, .rs-tab td { padding: 6px 6px; text-align: right; border-bottom: 1px solid rgba(0,0,0,.06); white-space: nowrap; } .rs-tab th:first-child { text-align: left; font-weight: 600; color: var(--ink); white-space: normal; } .rs-tab thead th { font-size: 11px; color: var(--muted); font-weight: 600; text-align: right; } .rs-tab thead th:first-child { text-align: left; color: var(--muted); }
.rs-tab small { color: var(--muted); font-weight: 400; font-size: 10.5px; }
.hx-trend, .br-trend { position: static !important; display: grid !important; gap: 8px; width: auto !important; max-height: none !important; box-shadow: none; background: #fff; backdrop-filter: none; }
.sh-body .tq-card { padding: 12px; border-radius: 16px; box-shadow: none; background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.05); }
.hx.phone .jm-cmpcard { display: block; }
.hx-busybig { z-index: 20; }

.hx.phone .hx-back { width: 40px; padding: 0; justify-content: center; } .hx.phone .hx-back > span:not(.tt-ic) { display: none; }
.hx.phone .mk { top: 104px; }
.hx.phone[data-stage="watch"] .hx-switch { left: calc(50% - 4px); }
.sh { z-index: 10; }
.sh-body > * { grid-area: auto !important; grid-column: 1 / -1; min-width: 0; }
.sh-body .jm-gridw { margin: 0 -4px; }
.hx.phone .jm-grid { --rl: 66px; --cw: 84px; font-size: 12px; } .hx.phone .jm-grid > * { padding: 5px 5px; } .hx.phone .jm-rl { font-size: 11px; }
.tq.hx[data-stage="watch"] .hx-trend { display: grid !important; }
.rm-air b { color: var(--ink) !important; }
.rm-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hx-under > * { width: 100% !important; max-width: none !important; justify-self: stretch !important; box-sizing: border-box; }

/* ---------- v1.28.0 · ThermoRespiDose: buttons that open windows; a layers button; a tidy list ---------- */
.tq.hx, .tq.hx[data-stage="watch"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "note"; }
.hx-out, .hx-under { display: none !important; }
/* the window */
.pw { position: absolute; z-index: 14; right: 12px; top: 60px; width: min(440px, calc(100% - 24px)); max-height: calc(100% - 160px); display: flex; flex-direction: column; border-radius: 20px; background: rgba(255,255,255,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 22px 50px -22px rgba(10,20,40,.55); overflow: hidden; animation: pwIn .18s ease-out; }
.pw[hidden] { display: none; }
@keyframes pwIn { from { opacity: 0; transform: translateY(8px); } }
.pw-h { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 16px; border-bottom: 1px solid rgba(0,0,0,.06); }
.pw-h b { flex: 1; font: 800 16px/1.2 var(--display); color: var(--ink); } .pw-grab { display: none; }
.pw-b { overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 16px; display: grid; gap: 10px; align-content: start; }
.pw-b > .tq-card { padding: 0; box-shadow: none; background: transparent; border: 0; margin: 0; }
.pw-b > .tq-card > .tq-h:first-child { display: none; }
.hx[data-stage="build"] .pw { left: 404px; right: auto; top: 10px; max-height: calc(100% - 20px); width: min(400px, calc(100% - 420px)); }
.hx.phone .pw { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 72%; border-radius: 22px 22px 0 0; animation: pwUp .22s ease-out; }
.hx.phone[data-stage="build"] .pw { left: 0; right: 0; width: auto; max-height: 78%; top: auto; bottom: 0; }
.hx.phone .pw-h { padding-top: 16px; position: relative; } .hx.phone .pw-grab { display: block; position: absolute; left: 50%; top: 6px; width: 38px; height: 5px; margin-left: -19px; border-radius: 5px; background: rgba(0,0,0,.16); }
@keyframes pwUp { from { transform: translateY(40px); opacity: .4; } }
/* the results buttons, above the time line */
.rc.cd-modes { /* v1.52.0: scoped, it was also moving the Research centre pages */  position: absolute; z-index: 8; left: 12px; right: 12px; bottom: 78px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; justify-content: center; padding: 2px; }
.rc.cd-modes::-webkit-scrollbar { display: none; }
.hx[data-stage="build"] .rc, .hx[data-stage="choose"] .rc { display: none; }
.rc-b { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); font: 700 12.5px/1 var(--font); cursor: pointer; box-shadow: 0 6px 16px -10px rgba(10,20,40,.5); white-space: nowrap; }
.rc-b .tt-ic { width: 17px; height: 17px; color: #1E5A86; } .rc-b .mk-ic.sm { width: 30px; height: 18px; }
.rc-b.on { background: #1E3A52; color: #fff; } .rc-b.on .tt-ic { color: #CFE3F2; }
.hx.phone .rc { justify-content: flex-start; left: 8px; right: 8px; bottom: 72px; }
.hx:not(.phone) .dk, .hx .dk { position: absolute; z-index: 7; left: 12px; right: 12px; bottom: 12px; width: auto; padding: 7px 12px 7px 7px; border-radius: 18px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 26px -16px rgba(10,20,40,.5); }
.hx.phone .dk { left: 8px; right: 8px; bottom: 8px; } .hx.phone .dk-play { width: 40px; height: 40px; }
.hx[data-stage="watch"] .hx-leg { bottom: 124px !important; left: 12px; right: 12px; }
.hx.phone[data-stage="watch"] .hx-leg { bottom: 118px !important; left: 8px; right: 8px; }
/* the layers: one button, a grid that opens */
.hx-laybtn { position: absolute; z-index: 9; top: 58px; right: 10px; display: grid; justify-items: center; gap: 2px; width: 58px; padding: 7px 0 6px; border: 0; border-radius: 14px; background: rgba(255,255,255,.88); box-shadow: 0 6px 18px -12px rgba(10,20,40,.45); cursor: pointer; color: var(--ink); }
.hx-laybtn .tt-ic { width: 22px; height: 22px; color: #1E5A86; } .hx-laybtn span { font: 700 10.5px/1.1 var(--font); max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx.lay-open .hx-laybtn { background: #1E3A52; color: #fff; } .hx.lay-open .hx-laybtn .tt-ic { color: #CFE3F2; }
.hx[data-stage="build"] .hx-laybtn, .hx[data-stage="choose"] .hx-laybtn, .hx[data-stage="build"] .hx-laypop, .hx[data-stage="choose"] .hx-laypop { display: none !important; }
.hx-laypop { position: absolute; z-index: 13; top: 58px; right: 76px; width: min(330px, calc(100% - 96px)); max-height: calc(100% - 200px); overflow-y: auto; padding: 10px; border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 20px 44px -22px rgba(10,20,40,.55); display: none; }
.hx.lay-open .hx-laypop { display: block; animation: pwIn .15s ease-out; }
.hx-laypop .hx-rail { position: static !important; display: none; width: auto !important; max-height: none !important; transform: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; overflow: visible !important; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hx[data-view="body"] .hx-laypop .hx-rail:first-child, .hx[data-view="air"] .hx-laypop .hx-rail:last-child { display: grid; }
.hx-laypop .hx-rail button { display: grid !important; justify-items: center; gap: 4px; width: auto !important; height: auto !important; min-height: 64px; padding: 9px 4px !important; border-radius: 14px !important; background: rgba(0,0,0,.04) !important; color: var(--ink) !important; font: 700 11.5px/1.1 var(--font) !important; }
.hx-laypop .hx-rail button .tt-ic { width: 22px !important; height: 22px !important; color: #1E5A86; } .hx-laypop .hx-rail button.on { background: #1E3A52 !important; color: #fff !important; } .hx-laypop .hx-rail button.on .tt-ic { color: #CFE3F2; }
.hx-laypop .hx-rail button.lay { min-height: 52px; background: rgba(30,90,134,.06) !important; } .hx-laypop .hx-rail button.lay:not(.on) { opacity: .55; } .hx-laypop .hx-rail button.lay.on { background: rgba(30,90,134,.16) !important; color: var(--ink) !important; } .hx-laypop .hx-rail button.lay.on .tt-ic { color: #1E5A86; }
.hx-laypop .hx-rail .hx-sep { grid-column: 1 / -1; height: 1px; background: rgba(0,0,0,.08); margin: 2px 0; display: block; }
.hx-laypop .hx-grip { display: none !important; }
.hx.phone .hx-laypop { right: 8px; top: 112px; width: calc(100% - 16px); }
.hx .tq-st > .hx-rail { display: none !important; }
/* the X-ray */
.xr { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; border-radius: inherit; }
.xr[hidden] { display: none; }
.hx[data-view="air"] .hx-cap { z-index: 6; }
.xr-leg { display: grid; gap: 4px; padding: 8px 12px; border-radius: 14px; background: rgba(12,14,16,.75); color: #E7EAEE; font-size: 12px; max-width: 520px; margin: 0 auto; }
.xr-leg span { display: inline-flex; align-items: center; gap: 7px; } .xr-leg small { color: #A9B0B7; font-size: 10.5px; line-height: 1.35; }
.xr-dot { width: 8px; height: 8px; border-radius: 50%; background: #F4F6F7; box-shadow: 0 0 6px #fff; } .xr-line { width: 16px; height: 3px; border-radius: 2px; background: #DDE2E6; }
/* the build list: what is set, one line each */
.ls { display: grid; gap: 2px; }
.ls-r { display: grid; grid-template-columns: 36px 1fr 18px; align-items: center; gap: 10px; padding: 10px 6px 10px 4px; border: 0; border-radius: 14px; background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.ls-r:hover, .ls-r.on { background: rgba(30,58,82,.07); }
.ls-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #EEF3F7; color: #1E5A86; } .ls-ic .tt-ic { width: 18px; height: 18px; }
.ls-r > span { display: grid; min-width: 0; } .ls-r b { font: 700 14px/1.2 var(--font); } .ls-r small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-r > .tt-ic { width: 16px; height: 16px; color: var(--muted); }
.jm-stb, .jm-legb { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink); border-radius: 12px; padding: 6px 6px 10px 2px; min-width: 0; }
.jm-stb:hover, .jm-stb.on, .jm-legb:hover, .jm-legb.on { background: rgba(30,58,82,.07); }
.jm-stb > span { flex: 1; display: grid; min-width: 0; } .jm-stb b { font: 700 14.5px/1.25 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jm-stb small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-stb em, .jm-legb small { font-style: normal; font-weight: 700; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; } .jm-stb > .tt-ic:last-child, .jm-legb > .tt-ic:last-child { width: 15px; height: 15px; color: var(--muted); flex: none; }
.jm-legb { padding: 8px 8px; margin: 2px 0; background: rgba(30,58,82,.05); } .jm-legb > .tt-ic:first-child { width: 18px; height: 18px; color: #1E5A86; } .jm-legb > span { flex: 1; font: 600 13px/1.2 var(--font); }
.jm-link.danger { color: #B3261E; justify-self: start; }
.mk-big { display: grid; place-items: center; padding: 4px 0; } .mk-res { margin: 0; font-size: 12.5px; color: var(--ink); text-align: center; }
.pw-b .rl { width: 100%; }
.hx-laypop { z-index: 15; }
.hx.phone[data-stage="watch"] .pw { bottom: 118px; left: 6px; right: 6px; max-height: calc(100% - 230px); border-radius: 20px; }
.hx:not(.phone)[data-stage="watch"] .pw { max-height: calc(100% - 196px); }
.hx:not(.phone)[data-stage="watch"] .pw { right: 80px; top: 58px; }
/* ---------- v1.29.0 · ThermoRespiDose: one deck at the bottom, laid out like a camera; quiet windows ---------- */
.tq.hx > .tq-note { display: none; }
.hx[data-stage="watch"] .rc, .hx .cd .rc { position: static; }
/* the deck */
.hx .dk.cd, .hx:not(.phone) .dk.cd { position: absolute; z-index: 12; left: 50%; right: auto; bottom: 12px; transform: translateX(-50%); width: min(620px, calc(100% - 24px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 14px 10px; border-radius: 24px; background: rgba(255,255,255,.94); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 14px 34px -18px rgba(10,20,40,.5); }
.hx.phone .dk.cd { left: 0; right: 0; bottom: 0; transform: none; width: auto; border-radius: 22px 22px 0 0; padding: 10px 12px 8px; box-shadow: 0 -8px 26px -18px rgba(10,20,40,.45); }
.hx[data-stage="build"] .dk.cd, .hx[data-stage="choose"] .dk.cd { display: none !important; }
.cd .dk-track { height: 26px; flex: none; }
.cd .jm-bar button { border-radius: 7px; font-size: 10.5px; }
.cd .dk-scrub { pointer-events: auto; cursor: pointer; touch-action: none; }
.cd .dk-scrub::-webkit-slider-thumb { width: 8px; height: 32px; margin-top: -3px; border-radius: 4px; background: #C2185B; box-shadow: 0 0 0 2.5px #fff, 0 2px 8px rgba(0,0,0,.35); }
.cd .dk-scrub::-moz-range-thumb { width: 8px; height: 32px; border-radius: 4px; background: #C2185B; box-shadow: 0 0 0 2.5px #fff; }
.cd-times { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; }
.cd .dk-t { display: block; min-width: 0; } .cd .dk-t b { font: 700 12px/1 var(--font); color: var(--ink); }
.cd-end { font: 600 12px/1 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
/* the results, as words (like the modes of a camera) */
.cd .cd-modes { display: flex; justify-content: center; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 0; }
.cd .cd-modes::-webkit-scrollbar { display: none; }
.cd .cd-modes .rc-b { flex: none; height: 30px; padding: 0 11px; border-radius: 999px; background: transparent; box-shadow: none; color: var(--ink-2); font: 700 12.5px/1 var(--font); letter-spacing: .01em; }
.cd .cd-modes .rc-b.on { background: rgba(30,58,82,.1); color: #1E3A52; }
.cd .cd-modes .rc-b:active { background: rgba(30,58,82,.08); }
/* the camera row: side, skip back, play, skip on, layers */
.cd-row { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 6px; padding-top: 2px; }
.cd-side { justify-self: start; display: grid; justify-items: center; gap: 3px; min-width: 64px; max-width: 96px; padding: 2px 4px; border: 0; background: transparent; cursor: pointer; color: var(--ink); }
.cd-row > .cd-side:last-child { justify-self: end; }
.cd-side .cd-o { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #EEF3F7; color: #1E5A86; transition: background .15s; }
.cd-side .cd-o .tt-ic { width: 21px; height: 21px; } .cd-side .cd-o .mk-ic.sm { width: 32px; height: 20px; }
.cd-side .cd-o.mk-o.set { background: #E3EEF8; box-shadow: inset 0 0 0 2px #1E5A86; }
.cd-side > span { font: 700 10.5px/1.1 var(--font); max-width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.cd-side.on .cd-o, .hx.lay-open .cd-side.hx-laybtn .cd-o { background: #1E3A52; color: #fff; }
.hx .cd .hx-laybtn { position: static; width: auto; padding: 2px 4px; border-radius: 0; background: transparent; box-shadow: none; }
.hx.lay-open .cd .hx-laybtn { background: transparent; color: var(--ink); }
.hx .cd .hx-laybtn span { font: 700 10.5px/1.1 var(--font); max-width: 92px; }
.cd-skip { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #1E3A52; display: grid; place-items: center; cursor: pointer; }
.cd-skip .tt-ic { width: 22px; height: 22px; fill: currentColor; } .cd-skip:active { background: rgba(30,58,82,.08); }
.cd .dk-play { width: 60px; height: 60px; background: #1E3A52; box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(30,58,82,.18); } .cd .dk-play .tt-ic { width: 26px; height: 26px; fill: currentColor; }
.cd .dk-play.on { background: #C2185B; }
.cd button:disabled { opacity: .45; cursor: default; }
/* the layers: a grid above the layers button */
.hx .hx-laypop, .hx.phone .hx-laypop { top: auto; right: 12px; bottom: calc(var(--cdh, 170px) + 4px); width: min(340px, calc(100% - 24px)); max-height: calc(100% - var(--cdh, 170px) - 70px); z-index: 15; }
.hx:not(.phone) .hx-laypop { right: calc(50% - min(310px, 50% - 12px)); }
.hx-sizebox:empty { display: none; } .hx[data-view="body"] .hx-sizebox { display: none; }
.hx-sizebox { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.08); }
.hx-sizebox h5 { margin: 0 0 6px; font: 500 12px/1 var(--font); letter-spacing: 0; color: var(--muted); }
.hx-sizebox .tq-sizes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; background: none; box-shadow: none; }
.hx-sizebox .tq-sizes button { height: 32px; border: 0; border-radius: 999px; padding: 0 10px; background: rgba(0,0,0,.05); font: 600 12px/1 var(--font); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--ink); }
.hx-sizebox .tq-sizes button.on { background: #1E3A52; color: #fff; } .hx-sizebox .tq-sizes i { width: 9px; height: 9px; border-radius: 50%; } .hx-sizebox .tq-sizes em { font-style: normal; color: inherit; opacity: .7; }
/* the small switches under (i) */
.hx-togs { position: absolute; z-index: 9; top: 58px; right: 10px; display: grid; gap: 8px; }
.hx-togs[hidden], .hx[data-stage="build"] .hx-togs, .hx[data-stage="choose"] .hx-togs, .hx[data-view="air"] .hx-togs { display: none; }
.hx-tog { width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.88); color: #1E5A86; box-shadow: 0 6px 18px -12px rgba(10,20,40,.45); cursor: pointer; }
.hx-tog[hidden] { display: none; } .hx-tog .tt-ic { width: 19px; height: 19px; } .hx-tog.on { background: #1E3A52; color: #fff; } .hx-tog:disabled { opacity: .4; }
/* the legend: one quiet line under the state, at the top */
.hx[data-stage="watch"] .hx-leg, .hx.phone[data-stage="watch"] .hx-leg { top: 100px; bottom: auto !important; left: 60px; right: 60px; }
.hx[data-stage="watch"] .hx-leg > * { background: rgba(255,255,255,.7); }
.hx[data-stage="watch"] .hx-leg .tq-grad { padding: 3px 10px; font-size: 11px; }
.hx[data-stage="watch"] .xr-leg { background: rgba(12,14,16,.7); padding: 6px 10px; gap: 2px; font-size: 11.5px; }
/* the windows: above the deck (phones), at the right (computers); the fine print waits behind (i) */
.hx:not(.phone)[data-stage="watch"] .pw { right: 60px; top: 58px; bottom: auto; max-height: calc(100% - var(--cdh, 170px) - 70px); }
.hx.phone[data-stage="watch"] .pw { left: 6px; right: 6px; top: auto; bottom: calc(var(--cdh, 170px) - 6px); max-height: calc(100% - var(--cdh, 170px) - 96px); border-radius: 22px; }
.pw-i { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.05); cursor: pointer; }
.pw-i b { font: italic 800 15px/1 Georgia, 'Times New Roman', serif; color: #1E5A86; } .pw-i.on { background: #1E3A52; } .pw-i.on b { color: #fff; }
.pw:not(.more) :is(.hx-tnote2, .rs-note, .mk-fine, .hx-trend > small, .tq-card > small) { display: none !important; }
.pw.more :is(.hx-tnote2, .rs-note, .mk-fine) { display: block; padding: 8px 10px; border-radius: 12px; background: rgba(30,90,134,.06); color: var(--ink-2); font-size: 12px; line-height: 1.45; }
/* the mask window: tiles, one number */
.mk-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mk-t { display: grid; justify-items: center; gap: 4px; padding: 8px 2px 7px; border: 0; border-radius: 14px; background: rgba(0,0,0,.04); cursor: pointer; color: var(--ink); min-width: 0; }
.mk-t .mk-ic { width: 46px; height: 28px; } .mk-t .mk-ic svg { width: 100%; height: 100%; }
.mk-t span { font: 700 11px/1.1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mk-t.on { background: #1E3A52; color: #fff; } .mk-t.on .mk-ic { filter: drop-shadow(0 0 1px rgba(255,255,255,.6)); }
.mk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.mk-stat { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(30,90,134,.06); }
.mk-stat b { font: 800 24px/1.1 var(--display); color: #1E3A52; font-variant-numeric: tabular-nums; } .mk-stat.sm b { font-size: 18px; }
.mk-stat span { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .pw, .hx-laypop { animation: none !important; } }
.hx[data-view="air"] .hx-laypop .hx-rail:last-child { display: none; }
.hx[data-view="body"] .hx-laypop .hx-rail:nth-child(1), .hx[data-view="air"] .hx-laypop .hx-rail:nth-child(2) { display: grid; }
.cd-side .mk-o:not(.set) svg path { stroke: #5F7C93; }
.cd .jm-bar button { background: linear-gradient(90deg, rgba(30,58,82,.26) var(--p, 0%), #E7ECF0 var(--p, 0%)); backdrop-filter: none; -webkit-backdrop-filter: none; }
.cd .jm-bar button.move { background: linear-gradient(90deg, rgba(194,24,91,.26) var(--p, 0%), #F6E7ED var(--p, 0%)); }
.cd .jm-bar button span { display: inline; min-width: 0; }
.hx.win-open:not(.phone)[data-stage="watch"] .hx-cap { left: calc((100% - min(500px, 45%)) / 2); max-width: calc(100% - min(500px, 45%) - 120px); }
.hx.win-open:not(.phone)[data-stage="watch"] .hx-leg { right: calc(min(500px, 45%) + 10px); }
.hx:not(.phone)[data-stage="watch"] .pw { width: min(440px, calc(45% - 60px)); min-width: 320px; }
.mk-t:first-child svg path, .mk-t:first-child svg circle { stroke: #6F8698; }
/* ---------- v1.30.0 · ThermoRespiDose results, in the manner of a maps app ---------- */
.hx { --g-blue: #1A73E8; --g-blue-bg: #E8F0FE; --g-ink: #202124; --g-mute: #5F6368; --g-line: #E8EAED; --g-sh: 0 1px 2px rgba(60,64,67,.28), 0 2px 6px 2px rgba(60,64,67,.12); }
.hx[data-stage="watch"] :is(.hx-switch, .hx-cap, .hx-togs, .dk, .hx-laypop, .hx-laybtn, .rc) { display: none !important; }
.mx-chips, .mx-stack, .mx-zoom { display: none; }
.hx[data-stage="watch"] .mx-chips:not([hidden]), .hx[data-stage="watch"] .mx-stack { display: flex; }
.hx[data-stage="watch"] .mx-zoom { display: grid; }
/* the picture, the map */
.hx[data-stage="watch"][data-view="map"] .jm-map { display: block !important; }
.hx[data-stage="watch"][data-view="map"] .tq-stages { visibility: hidden; }
.hx[data-stage="watch"] .jm-map .leaflet-control-zoom { display: none; }
.hx[data-stage="watch"] .tq-st-body, .hx[data-stage="watch"] .tq-st-air { background: linear-gradient(180deg, #F7F8FA, #ECEEF1); }
/* back and (i): round, like a maps app */
.hx[data-stage="watch"] .hx-back { top: 10px; left: 10px; height: 44px; padding: 0 16px 0 12px; border-radius: 22px; background: #fff; box-shadow: var(--g-sh); color: var(--g-ink); }
.hx:not(.phone)[data-stage="watch"] .hx-back { left: var(--mxl, 400px); }
.hx.phone[data-stage="watch"] .hx-back { width: 44px; padding: 0; justify-content: center; } .hx.phone[data-stage="watch"] .hx-back > span:not(.tt-ic) { display: none; }
.hx[data-stage="watch"] .hx-info { width: 44px; height: 44px; background: #fff; box-shadow: var(--g-sh); }
/* the views: chips along the top */
.mx-chips { position: absolute; z-index: 9; top: 10px; left: 62px; right: 62px; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; }
.mx-chips::-webkit-scrollbar { display: none; }
.hx:not(.phone) .mx-chips { left: calc(var(--mxl, 400px) + 186px); right: 64px; }
.mx-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 11px; border: 0; border-radius: 18px; background: #fff; box-shadow: var(--g-sh); color: var(--g-ink); font: 600 13.5px/1 var(--font); cursor: pointer; white-space: nowrap; }
.mx-chip .tt-ic { width: 17px; height: 17px; color: var(--g-mute); }
.mx-chip.on { background: var(--g-blue-bg); color: #174EA6; } .mx-chip.on .tt-ic { color: var(--g-blue); }
/* the switch and the side button, at the right */
.mx-stack { position: absolute; z-index: 9; top: 64px; right: 10px; flex-direction: column; align-items: center; gap: 10px; }
.mx-seg { display: grid; gap: 2px; padding: 4px; border-radius: 26px; background: #fff; box-shadow: var(--g-sh); }
.mx-seg button, .mx-fab { width: 46px; display: grid; justify-items: center; gap: 2px; padding: 7px 0 6px; border: 0; border-radius: 20px; background: transparent; color: var(--g-mute); cursor: pointer; }
.mx-seg .tt-ic, .mx-fab .tt-ic { width: 21px; height: 21px; } .mx-seg span, .mx-fab > span { font: 700 9.5px/1 var(--font); letter-spacing: .01em; }
.mx-seg button.on { background: var(--g-blue-bg); color: var(--g-blue); }
.mx-fab { width: 54px; border-radius: 18px; background: #fff; box-shadow: var(--g-sh); color: var(--g-ink); }
.mx-fab .mk-ic.sm { width: 34px; height: 21px; } .mx-fab.on { background: var(--g-blue-bg); color: #174EA6; } .mx-fab.on .tt-ic { color: var(--g-blue); }
/* zoom, at the bottom right */
.mx-zoom { position: absolute; z-index: 9; right: 10px; bottom: calc(var(--mxb, 16px) + 6px); gap: 0; border-radius: 22px; background: #fff; box-shadow: var(--g-sh); overflow: hidden; transition: bottom .2s; }
.mx-zb { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--g-mute); cursor: pointer; } .mx-zb + .mx-zb { box-shadow: 0 -1px 0 var(--g-line); }
.mx-zb .tt-ic { width: 20px; height: 20px; } .mx-zb:active { background: #F1F3F4; }
.hx.phone .mx-zb:not(:last-child) { display: none; }
/* the legend: one small line at the bottom left, like a map's traffic key */
.hx[data-stage="watch"] .hx-leg, .hx.phone[data-stage="watch"] .hx-leg { top: auto; bottom: calc(var(--mxb, 16px) + 8px) !important; left: calc(var(--mxl, 8px) + 4px); right: auto; max-width: min(360px, calc(100% - var(--mxl, 8px) - 70px)); justify-items: start; transition: bottom .2s; }
.hx[data-stage="watch"] .hx-leg > * { background: #fff; box-shadow: var(--g-sh); border-radius: 14px; }
.hx[data-stage="watch"] .hx-leg:has(.xr-leg) { top: 62px; bottom: auto !important; }
.hx[data-stage="watch"] .xr-leg { background: rgba(10,12,14,.72) !important; box-shadow: none !important; color: #E8EAED; gap: 3px; padding: 8px 12px; font-size: 11.5px; }
.xr-leg b { font: 700 12.5px/1.2 var(--font); color: #fff; } .xr-dot.s { width: 10px; height: 10px; }
.hx[data-stage="watch"] .tq-st-air .hx-pop { z-index: 10; }
.hx[data-stage="watch"] .hx-busybig { display: none !important; }
/* the sheet's head: the place, how it went, the time line */
.mh { flex: 1; min-width: 0; display: grid; gap: 8px; }
.mh-t { display: grid; min-width: 0; } .mh-t b { font: 800 20px/1.2 var(--display); color: var(--g-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mh-t small { color: var(--g-mute); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-v { display: flex; gap: 8px; flex-wrap: wrap; min-height: 30px; align-items: center; }
.mx-vb { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border: 0; border-radius: 15px; background: #F1F3F4; cursor: pointer; }
.mx-vb small { color: var(--g-mute); font-size: 11.5px; }
.mx-v { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--font); color: var(--vc, var(--g-ink)); }
.mx-v > i { width: 9px; height: 9px; border-radius: 50%; background: var(--vc, #9AA0A6); flex: none; }
.mh-busy { display: inline-flex; gap: 5px; padding: 8px 2px; } .mh-busy i { width: 7px; height: 7px; border-radius: 50%; background: var(--g-blue); animation: mxDot 1s ease-in-out infinite; } .mh-busy i:nth-child(2) { animation-delay: .15s; } .mh-busy i:nth-child(3) { animation-delay: .3s; }
@keyframes mxDot { 50% { opacity: .25; transform: translateY(-3px); } }
/* the time line: a small play button, a slim bar, a round handle (like a weather map) */
.tl { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; }
.tl[hidden] { display: none; }
.tl .dk-play { width: 34px; height: 34px; border-radius: 50%; background: #F1F3F4; color: var(--g-ink); box-shadow: none; } .tl .dk-play .tt-ic { width: 16px; height: 16px; fill: currentColor; } .tl .dk-play.on { background: var(--g-blue-bg); color: var(--g-blue); }
.tl-track { position: relative; height: 30px; min-width: 0; }
.tl .jm-bar { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; bottom: auto; gap: 3px; pointer-events: none; }
.tl .jm-bar button { height: 6px; min-width: 6px; padding: 0; border-radius: 3px; background: linear-gradient(90deg, var(--g-blue) var(--p, 0%), #DADCE0 var(--p, 0%)) !important; box-shadow: none !important; backdrop-filter: none; }
.tl .jm-bar button.move { background: linear-gradient(90deg, #8AB4F8 var(--p, 0%), #E8EAED var(--p, 0%)) !important; }
.tl .jm-bar button span, .tl .jm-bar button .tt-ic { display: none !important; }
.tl .dk-scrub { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; pointer-events: auto; cursor: pointer; touch-action: none; }
.tl .dk-scrub::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.tl .dk-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: 4px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 2px var(--g-blue), 0 1px 4px rgba(60,64,67,.45); cursor: grab; }
.tl .dk-scrub::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 2px var(--g-blue), 0 1px 4px rgba(60,64,67,.45); }
.tl .dk-t { min-width: 0; } .tl .dk-t b { font: 700 12.5px/1 var(--font); color: var(--g-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the sheet in the results */
.hx[data-stage="watch"] .sh { background: #fff; }
.hx[data-stage="watch"] .sh-head { padding: 2px 16px 12px; }
.hx[data-stage="watch"] .sh-body { padding: 0 16px 28px; gap: 14px; }
.hx[data-stage="watch"] .sh.side .sh-head { padding-top: 16px; }
.mx-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; margin: 0 -16px; padding: 0 12px; background: #fff; box-shadow: 0 1px 0 var(--g-line); overflow-x: auto; scrollbar-width: none; }
.mx-tabs::-webkit-scrollbar { display: none; }
.mx-tabs button { flex: none; height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--g-mute); font: 600 14px/1 var(--font); cursor: pointer; box-shadow: inset 0 -3px 0 transparent; }
.mx-tabs button.on { color: var(--g-blue); box-shadow: inset 0 -3px 0 var(--g-blue); }
.mx-panel { display: grid; gap: 14px; padding-top: 4px; }
.mx-svg { display: inline-grid; place-items: center; } .mx-svg svg { display: block; height: auto; }
.mx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mx-tile { display: grid; gap: 8px; justify-items: center; padding: 14px 10px 12px; border: 0; border-radius: 18px; background: linear-gradient(180deg, #F8F9FA, #F1F3F4); cursor: pointer; color: var(--g-ink); }
.mx-tile .mx-pic { height: 128px; display: grid; place-items: center; } .mx-tile .mx-tt { display: grid; justify-items: center; gap: 4px; } .mx-tile .mx-tt b { font: 700 15px/1 var(--display); }
.mx-tile:active { background: #E8EAED; }
.mx-list { display: grid; }
.mx-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; padding: 10px 2px; border: 0; background: transparent; text-align: left; color: var(--g-ink); box-shadow: 0 1px 0 var(--g-line); }
button.mx-row { cursor: pointer; } button.mx-row:hover { background: #F8F9FA; }
.mx-row:last-child { box-shadow: none; }
.mx-ri { width: 32px; height: 32px; display: grid; place-items: center; color: var(--g-blue); } .mx-ri .tt-ic { width: 20px; height: 20px; }
.mx-row > span { display: grid; gap: 2px; min-width: 0; } .mx-row b { font: 600 14px/1.3 var(--font); } .mx-row small { color: var(--g-mute); font-size: 12.5px; line-height: 1.35; }
.mx-row > .tt-ic { width: 16px; height: 16px; color: var(--g-mute); }
.mx-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mx-fig { display: grid; justify-items: center; gap: 4px; padding: 12px 4px 10px; border: 0; border-radius: 16px; background: #F8F9FA; cursor: pointer; color: var(--g-ink); }
.mx-fig b { font: 700 13.5px/1 var(--display); } .mx-fig small { color: var(--g-mute); font-size: 11.5px; }
.mx-fig.on { background: var(--g-blue-bg); } .mx-fig.on b { color: #174EA6; }
.mx-legs { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.mx-grad { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--g-mute); } .mx-grad i { width: 96px; height: 7px; border-radius: 4px; }
.hx[data-stage="watch"] .hx-leg .tq-grad { padding: 6px 12px; font-size: 11.5px; }
.mx-seg2 { display: flex; padding: 3px; border-radius: 12px; background: #F1F3F4; } .mx-seg2 button { flex: 1; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--g-mute); font: 600 13px/1 var(--font); cursor: pointer; }
.mx-seg2 button.on { background: #fff; color: var(--g-ink); box-shadow: 0 1px 3px rgba(60,64,67,.25); }
.mx-lungbig { display: grid; place-items: center; padding: 6px 0; } .mx-lungbig svg { width: 100%; max-width: 340px; }
.lg .lgl text { font: 600 8.5px var(--font, sans-serif); fill: #3C4043; }
.mx-say { margin: 0; color: var(--g-mute); font-size: 13px; line-height: 1.45; }
.mx-h { margin: 4px 0 -4px; font: 700 13px/1 var(--display); color: var(--g-ink); }
.mx-flags { display: flex; flex-wrap: wrap; gap: 6px; } .mx-flags span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 14px; background: #FEF7E0; color: #8A5A00; font-size: 12px; } .mx-flags span.lv3, .mx-flags span.lv2 { background: #FCE8E6; color: #A50E0E; } .mx-flags .tt-ic { width: 14px; height: 14px; }
.mx-cards { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; scroll-snap-type: x proximity; }
.mx-cards::-webkit-scrollbar { display: none; }
.mx-card { flex: none; width: 138px; display: grid; gap: 5px; justify-items: start; padding: 12px; border: 0; border-radius: 16px; background: #F8F9FA; text-align: left; cursor: pointer; color: var(--g-ink); scroll-snap-align: start; }
.mx-card.on { background: var(--g-blue-bg); box-shadow: inset 0 0 0 2px var(--g-blue); }
.mx-cpics { display: flex; align-items: flex-end; gap: 6px; height: 90px; } .mx-card b { display: flex; align-items: center; gap: 5px; font: 700 13.5px/1.2 var(--display); max-width: 100%; } .mx-card b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mx-card b .tt-ic { width: 15px; height: 15px; flex: none; color: var(--g-mute); }
.mx-card small { color: var(--g-mute); font-size: 12px; } .mx-card .mx-v { font-size: 12px; }
.mx-panel .mk-tiles { gap: 6px; } .mx-panel .mk-t { background: #F8F9FA; } .mx-panel .mk-t.on { background: var(--g-blue-bg); color: #174EA6; box-shadow: inset 0 0 0 2px var(--g-blue); }
/* the pins on the map */
.rp-w { background: transparent; border: 0; }
.rp { position: relative; display: block; width: 74px; height: 70px; }
.rp-c { position: absolute; left: 3px; top: 3px; width: 68px; height: 56px; display: flex; align-items: center; justify-content: center; gap: 2px; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(60,64,67,.35); }
.rp-c svg { height: 48px; width: auto; }
.rp-t { position: absolute; left: 31px; top: 54px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); box-shadow: 2px 2px 3px rgba(60,64,67,.2); }
.rp-n { position: absolute; left: -2px; top: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; color: #fff; font: 800 11px/20px var(--font); text-align: center; box-shadow: 0 0 0 2px #fff; }
.rp.on .rp-c { box-shadow: 0 0 0 3px var(--g-blue), 0 4px 12px rgba(26,115,232,.45); } .rp.on { z-index: 2; transform: scale(1.08); transform-origin: 50% 100%; }
.rp-leg { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--g-blue); box-shadow: 0 1px 4px rgba(60,64,67,.4); } .rp-leg .tt-ic { width: 17px; height: 17px; } .rp-leg.on { background: var(--g-blue); color: #fff; }
.mx-tabs, .mx-panel { flex: none; }
.hx[data-stage="watch"] .sh-body { grid-auto-rows: max-content; } .mx-tabs { min-height: 44px; }
.hx[data-stage="watch"] .jm-map .leaflet-top.leaflet-right { top: auto; bottom: calc(var(--mxb, 16px) + 2px); right: 60px; }
.hx:not(.phone)[data-stage="watch"] .jm-map .leaflet-top.leaflet-right { bottom: 4px; }
/* v1.30.1: the time handle sits on the line; the region card sits in the free space, clear of the sheet */
.tl .dk-scrub { top: 0; bottom: auto; height: 30px; }
.tl .dk-scrub::-webkit-slider-runnable-track { height: 30px; }
.tl .dk-scrub::-webkit-slider-thumb { margin-top: 4px; }
.tl .dk-scrub::-moz-range-track { height: 30px; background: transparent; }
.hx[data-stage="watch"] .tq-st-air .hx-pop { left: calc(var(--mxl, 8px) + 8px); right: 70px; top: 62px; max-height: calc(100% - var(--mxb, 16px) - 76px); overflow-y: auto; background: #fff; box-shadow: var(--g-sh); }
.hx.phone[data-stage="watch"] .tq-st-air .hx-pop { left: 8px; right: 62px; }
/* v1.30.1 · the time line's round handle sits on the line; the region card stays clear of the side panel */
.tl .dk-scrub { inset: auto 0 auto 0; top: 50%; height: 24px; margin: -12px 0 0; }
.tl .dk-scrub::-webkit-slider-runnable-track { height: 24px; background: transparent; border: 0; }
.tl .dk-scrub::-webkit-slider-thumb { margin-top: 1px; width: 22px; height: 22px; }
.tl .dk-scrub::-moz-range-track { height: 24px; background: transparent; border: 0; }
.tl .dk-scrub::-moz-range-thumb { width: 22px; height: 22px; }
.sh-head:has(> .mdsw) { flex-wrap: wrap; }
.mdsw { flex: 1 0 100%; display: flex; gap: 2px; padding: 3px; margin: 0 0 4px; border-radius: 12px; background: #F1F3F4; }
.mdsw button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: #5F6368; font: 600 13px/1 var(--font); cursor: pointer; }
.mdsw button .tt-ic { width: 16px; height: 16px; }
.mdsw button.on { background: #fff; color: #1A73E8; box-shadow: 0 1px 3px rgba(60,64,67,.25); }
.hx.phone[data-stage="watch"] .mdsw { display: none; }
.hx[data-stage="watch"] .sh-head:has(> .mdsw) { row-gap: 6px; }
.hx.phone[data-stage="watch"]:is([data-snap="half"], [data-snap="full"]) .hx-leg { visibility: hidden; }

/* ---------- v1.31.0 · Bonda the Builder ---------- */
.gate.bd-host { max-width: none; padding: 6px 12px 8px; }
.bd-page { --bd-blue: #1A73E8; --bd-blue-bg: #E8F0FE; --bd-ink: #1F2328; --bd-mute: #5F6368; --bd-line: #E8EAED; --bd-glass: rgba(255,255,255,.86); --bd-sh: 0 1px 2px rgba(60,64,67,.2), 0 8px 24px -12px rgba(30,60,120,.28); --bd-gold: #F4B400;
  font-family: var(--font); color: var(--bd-ink); }
.bd-wait { color: var(--bd-mute); padding: 40px 0; text-align: center; } .bd-wait.bad { color: #C5221F; }
/* Bonda himself */
.bonda-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bonda-svg .ab { fill: none; stroke-width: 42; stroke-linecap: round; }
.bonda-svg .ah { fill: none; stroke: #c48a55; stroke-opacity: .5; stroke-width: 9; stroke-linecap: round; transform: translate(-5px, -6px); }
.bonda-svg .hf { fill: #7a4520; stroke: #3a1d08; stroke-width: 3; } .bonda-svg .hh { fill: #fff; opacity: .22; }
.bonda-svg .hl { stroke: #3a1d08; stroke-width: 3; stroke-linecap: round; fill: none; opacity: .55; }
.bonda-svg .brow { fill: none; stroke: #2a1205; stroke-width: 15; stroke-linecap: round; }
.bonda-svg .bf-tint { mix-blend-mode: soft-light; transition: opacity .7s ease, fill .7s ease; } .bonda-svg .bf-cheeks { transition: opacity .7s ease; }
.bonda-svg .drip { fill: #fbf2df; stroke: #e9d8b6; stroke-width: 3; }
.boing .bonda-svg { animation: bdBoing .55s ease-out; }
@keyframes bdBoing { 30% { transform: scale(1.06, .94); } 55% { transform: scale(.97, 1.04) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .boing .bonda-svg { animation: none; } }
/* before sign-in */
.bd-land { max-width: 1080px; margin: 0 auto; padding: 12px 4px 24px; display: grid; gap: 22px; }
.bd-hero { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center; padding: 22px; border-radius: 28px; background: radial-gradient(120% 140% at 0% 0%, #FFF6DC 0%, #FFFFFF 46%, #EAF2FF 100%); box-shadow: var(--bd-sh); }
.bd-hero-fig { height: 300px; }
.bd-hero-t small { font: 500 12px/1 var(--font); letter-spacing: 0; color: #B7791F; }
.bd-hero-t h1 { margin: 8px 0 6px; font: 800 clamp(30px, 4.6vw, 52px)/1.05 var(--display); letter-spacing: -.02em; }
.bd-hero-t p { margin: 0 0 14px; color: var(--bd-mute); font-size: 17px; line-height: 1.5; max-width: 560px; }
.bd-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 16px; } .bd-price b { font: 800 30px/1 var(--display); } .bd-price span { color: var(--bd-mute); }
.bd-price em { flex-basis: 100%; font-style: normal; font-weight: 700; color: #B7791F; }
.bd-steps6 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bd-steps6 li { display: grid; gap: 6px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: var(--bd-sh); counter-increment: s; }
.bd-steps6 li i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bd-blue-bg); color: var(--bd-blue); } .bd-steps6 .tt-ic { width: 22px; height: 22px; }
.bd-steps6 b { font: 700 16px/1.2 var(--display); } .bd-steps6 span { color: var(--bd-mute); font-size: 14px; line-height: 1.45; }
.bd-fine { color: var(--bd-mute); font-size: 12.5px; text-align: center; margin: 0; }
/* your projects */
.bd-home { max-width: 980px; margin: 0 auto; padding: 8px 4px 24px; }
.bd-home-top { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 26px; background: radial-gradient(120% 140% at 0% 0%, #FFF6DC 0%, #fff 50%, #EAF2FF 100%); box-shadow: var(--bd-sh); }
.bd-home-fig { width: 150px; height: 150px; flex: none; } .bd-home-top h1 { margin: 0 0 4px; font: 800 30px/1.1 var(--display); } .bd-home-top p { margin: 0; color: var(--bd-mute); }
.bd-h3 { margin: 22px 4px 10px; font: 700 15px/1 var(--display); color: var(--bd-mute); letter-spacing: .02em; }
.bd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.bd-card { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center; padding: 14px; border-radius: 18px; background: #fff; box-shadow: var(--bd-sh); color: var(--bd-ink); text-decoration: none; }
.bd-card i { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #FFF6DC; color: #B7791F; } .bd-card b { font: 700 15px/1.2 var(--display); } .bd-card small { color: var(--bd-mute); }
.bd-new { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .bd-new input { flex: 1 1 280px; height: 46px; border: 0; border-radius: 14px; padding: 0 14px; background: #fff; box-shadow: var(--bd-sh); font: 500 15px var(--font); }
.bd-new small { flex-basis: 100%; color: var(--bd-mute); } .bd-pay { max-width: 520px; }
/* the studio */
.bd-ws { --bd-h: 720px; height: var(--bd-h); display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-areas: "chat canvas"; gap: 12px; }
.bd-chat { grid-area: chat; min-height: 0; display: flex; flex-direction: column; border-radius: 26px; background: var(--bd-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--bd-sh); overflow: hidden; }
.bd-canvas { grid-area: canvas; min-height: 0; position: relative; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; box-shadow: var(--bd-sh);
  background-color: #F7F9FC; background-image: linear-gradient(rgba(26,115,232,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(26,115,232,.055) 1px, transparent 1px); background-size: 24px 24px; }
.bd-chat-h { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px 8px; background: linear-gradient(180deg, #FFF8E4, rgba(255,255,255,0)); }
.bd-fig { width: 84px; height: 76px; flex: none; margin: -4px -4px -6px -2px; }
.bd-chat-t { flex: 1; min-width: 0; display: grid; } .bd-kicker { font: 500 12px/1.2 var(--font); letter-spacing: 0; color: #B7791F; }
.bd-chat-t b { font: 800 17px/1.25 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bd-chat-t small { color: var(--bd-mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-ib { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--bd-mute); cursor: pointer; text-decoration: none; }
.bd-ib:hover { background: #F1F3F4; } .bd-ib .tt-ic { width: 20px; height: 20px; } .bd-ib:disabled { opacity: .4; cursor: default; }
.bd-msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 10px; }
.bd-m { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; word-wrap: break-word; }
.bd-m.bonda { align-self: flex-start; background: #fff; border-top-left-radius: 6px; box-shadow: 0 1px 2px rgba(60,64,67,.16); }
.bd-m.user { align-self: flex-end; background: var(--bd-blue); color: #fff; border-top-right-radius: 6px; }
.bd-m .bd-md > :first-child { margin-top: 0; } .bd-m .bd-md > :last-child { margin-bottom: 0; } .bd-m p { margin: 0 0 8px; } .bd-m ul, .bd-m ol { margin: 4px 0 8px; padding-left: 20px; } .bd-m h4 { margin: 8px 0 4px; font: 700 14px var(--display); }
.bd-m table { border-collapse: collapse; font-size: 12.5px; margin: 6px 0; } .bd-m th, .bd-m td { padding: 4px 8px; border-bottom: 1px solid var(--bd-line); text-align: left; } .bd-m code { background: #F1F3F4; border-radius: 6px; padding: 0 4px; }
.bd-m-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .bd-m-files span { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; opacity: .9; } .bd-m-files .tt-ic { width: 14px; height: 14px; }
.bd-m.typing { display: inline-flex; gap: 5px; padding: 14px 16px; } .bd-m.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--bd-gold); animation: bdDot 1s ease-in-out infinite; } .bd-m.typing i:nth-child(2) { animation-delay: .15s; } .bd-m.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bdDot { 50% { transform: translateY(-4px); opacity: .4; } }
.bd-note { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #F1F3F4; color: var(--bd-mute); font-size: 12px; } .bd-note .tt-ic { width: 14px; height: 14px; }
.bd-chips { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; } .bd-chips:empty { display: none; }
.bd-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px; border: 0; border-radius: 999px; background: var(--bd-blue-bg); color: #174EA6; font: 600 13px/1.2 var(--font); cursor: pointer; text-align: left; }
.bd-chip:hover { background: #D2E3FC; } .bd-chip.on { background: var(--bd-blue); color: #fff; } .bd-chip.go { background: var(--bd-blue); color: #fff; } .bd-chip .tt-ic { width: 16px; height: 16px; }
.bd-comp { flex: none; padding: 8px 10px 10px; } .bd-comp-row { display: flex; align-items: flex-end; gap: 6px; padding: 6px; border-radius: 22px; background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.25); }
.bd-comp textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; padding: 9px 4px; font: 400 15px/1.4 var(--font); background: transparent; max-height: 140px; }
.bd-send { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--bd-blue); color: #fff; cursor: pointer; } .bd-send .tt-ic { width: 19px; height: 19px; }
.bd-send.stop { background: #5F6368; } .bd-send.stop .tt-ic svg { display: none; } .bd-send.stop .tt-ic::after { content: ''; display: block; width: 12px; height: 12px; margin: 3.5px; border-radius: 2px; background: #fff; } .bd-send:disabled { opacity: .4; }
.bd-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 6px; } .bd-files:empty { display: none; }
.bd-file { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: #F1F3F4; font-size: 12.5px; } .bd-file .tt-ic { width: 15px; height: 15px; } .bd-file button { border: 0; background: none; cursor: pointer; padding: 2px; display: grid; }
/* the drawing board */
.bd-stagebar { flex: none; display: flex; gap: 4px; padding: 10px 12px 0; overflow-x: auto; scrollbar-width: none; } .bd-stagebar::-webkit-scrollbar { display: none; }
.bd-step { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 5px; border: 0; border-radius: 999px; background: rgba(255,255,255,.8); color: var(--bd-mute); font: 600 13px/1 var(--font); cursor: pointer; box-shadow: 0 1px 2px rgba(60,64,67,.15); }
.bd-step i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #F1F3F4; } .bd-step .tt-ic { width: 14px; height: 14px; }
.bd-step.done { color: var(--bd-ink); } .bd-step.done i { background: #E6F4EA; color: #188038; }
.bd-step.now { background: var(--bd-ink); color: #fff; } .bd-step.now i { background: var(--bd-gold); color: #3a2a00; box-shadow: 0 0 0 4px rgba(244,180,0,.25); }
.bd-views { position: absolute; z-index: 3; top: 54px; right: 12px; display: flex; padding: 3px; gap: 2px; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: var(--bd-sh); }
.bd-views button { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; color: var(--bd-mute); font: 600 12.5px/1 var(--font); cursor: pointer; }
.bd-views button.on { background: var(--bd-blue-bg); color: #174EA6; } .bd-views .tt-ic { width: 16px; height: 16px; }
.bd-canvas-in { flex: 1; min-height: 0; position: relative; display: flex; gap: 12px; padding: 50px 12px 12px; overflow: hidden; }
.bd-empty { margin: auto; max-width: 380px; display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--bd-mute); }
.bd-empty > i { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: #fff; color: var(--bd-blue); box-shadow: var(--bd-sh); } .bd-empty > i .tt-ic { width: 30px; height: 30px; }
.bd-empty b { font: 700 18px var(--display); color: var(--bd-ink); } .bd-empty p { margin: 0; } .bd-empty-go { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
/* map */
.bd-map { position: absolute; inset: 0; z-index: 0; }
.bd-ctx { position: absolute; z-index: 2; left: 12px; top: 54px; width: min(330px, calc(100% - 24px)); max-height: calc(100% - 66px); overflow-y: auto; display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: var(--bd-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--bd-sh); }
.bd-ctx-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bd-ctx-h .tt-ic { width: 18px; height: 18px; color: var(--bd-blue); } .bd-ctx-h b { font: 700 15px var(--display); } .bd-ctx-h small { color: var(--bd-mute); font-size: 12px; flex-basis: 100%; padding-left: 26px; }
.bd-ctx p { margin: 0; color: var(--bd-mute); font-size: 13.5px; }
.bd-kv { display: grid; grid-template-columns: 110px 1fr; gap: 0 10px; font-size: 13px; } .bd-kv span { color: var(--bd-mute); } .bd-kv b { font-weight: 600; } .bd-kv small { grid-column: 2; color: var(--bd-mute); font-size: 11.5px; }
.bd-zone { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 14px; background: #FEF7E0; } .bd-zone b { font: 800 16px var(--display); } .bd-zone span { color: var(--bd-mute); font-size: 12px; }
.bd-zone.z-warm-humid { background: #E6F4EA; } .bd-zone.z-hot-dry { background: #FCE8E6; } .bd-zone.z-composite { background: #FEF7E0; } .bd-zone.z-temperate { background: #E8F0FE; } .bd-zone.z-cold { background: #E8EAED; }
.bd-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; align-items: end; height: 64px; }
.bd-months span { display: grid; justify-items: center; align-content: end; gap: 2px; height: 100%; } .bd-months i { width: 100%; border-radius: 4px 4px 2px 2px; } .bd-months small { font-size: 10px; color: var(--bd-mute); }
.bd-rules { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--bd-line); } .bd-rgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.bd-rgrid > span { display: grid; padding: 6px 8px; border-radius: 10px; background: #F8F9FA; } .bd-rgrid small { color: var(--bd-mute); font-size: 11px; } .bd-rgrid b { font: 700 14px var(--display); }
.bd-src { color: var(--bd-mute); font-size: 11.5px; line-height: 1.4; } .cf-high { color: #188038; } .cf-medium { color: #B06000; } .cf-low { color: #C5221F; }
.bd-pin-w { background: none; border: 0; } .bd-pin { position: relative; display: block; width: 34px; height: 44px; }
.bd-pin::before { content: ''; position: absolute; left: 3px; top: 0; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--bd-gold); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.bd-pin i { position: absolute; left: 12px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
/* plan */
.bd-plan-w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bd-plan-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bd-floors { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(60,64,67,.15); }
.bd-floors button { height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--bd-mute); font: 600 12.5px var(--font); cursor: pointer; } .bd-floors button.on { background: var(--bd-ink); color: #fff; }
.bd-stats { display: flex; flex-wrap: wrap; gap: 6px; } .bd-stats span { display: grid; padding: 4px 10px; border-radius: 10px; background: rgba(255,255,255,.9); } .bd-stats small { color: var(--bd-mute); font-size: 10.5px; } .bd-stats b { font: 700 13px var(--display); }
.bd-plan { flex: 1; min-height: 0; display: grid; place-items: center; } .bd-plan svg { width: 100%; height: 100%; max-height: 100%; }
.pl-plot { fill: #fff; stroke: #5F6368; stroke-width: 1.5; } .pl-sb { fill: none; stroke: #EA4335; stroke-width: 1.4; stroke-dasharray: 8 6; opacity: .7; }
.pl-below { fill: none; stroke: #9AA0A6; stroke-width: 1; stroke-dasharray: 4 4; }
.pl-room { stroke: none; cursor: pointer; } .pl-room.open { fill-opacity: .6; } .pl-room.sel { fill: #D2E3FC !important; } .pl-room.bad { fill: #FCE8E6 !important; }
.pl-wall { fill: none; stroke: #2B2F33; stroke-width: 7; pointer-events: none; } .pl-open { fill: none; stroke: #80868B; stroke-width: 2; stroke-dasharray: 6 5; pointer-events: none; }
.pl-winbg { stroke: #fff; stroke-width: 9; } .pl-win { stroke: #4FC3F7; stroke-width: 3.5; }
.pl-step { stroke: #9AA0A6; stroke-width: 1; }
.pl-name { font: 700 15px var(--font); fill: #202124; text-anchor: middle; pointer-events: none; } .pl-size { font: 500 12.5px var(--font); fill: #5F6368; text-anchor: middle; pointer-events: none; }
.pl-name.sm { font-size: 12px; } .pl-size.sm { font-size: 10.5px; }
.pl-road { font: 700 13px var(--font); fill: #5F6368; text-anchor: middle; letter-spacing: .06em; } .pl-dim { font: 600 13px var(--font); fill: #5F6368; text-anchor: middle; }
.pl-north circle { fill: #fff; stroke: #DADCE0; } .pl-north path { fill: #EA4335; } .pl-north text { font: 800 13px var(--font); text-anchor: middle; fill: #202124; }
.pl-scale rect { fill: #202124; } .pl-scale rect.w { fill: #fff; stroke: #202124; } .pl-scale text { font: 600 11px var(--font); fill: #5F6368; text-anchor: middle; }
.bd-checks { flex: none; width: 300px; max-height: 100%; overflow-y: auto; display: grid; align-content: start; gap: 6px; padding: 12px; border-radius: 18px; background: var(--bd-glass); box-shadow: var(--bd-sh); }
.bd-ck-h { display: flex; align-items: baseline; justify-content: space-between; } .bd-ck-h b { font: 700 15px var(--display); } .bd-ck-h small { color: var(--bd-mute); }
.bd-ck { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start; padding: 8px 6px; border: 0; border-radius: 12px; background: transparent; text-align: left; cursor: pointer; color: var(--bd-ink); }
.bd-ck:hover { background: #F8F9FA; } .bd-ck > i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; } .bd-ck.fail > i { background: #EA4335; } .bd-ck.warn > i { background: #F9AB00; }
.bd-ck span { display: grid; gap: 2px; } .bd-ck b { font-weight: 600; font-size: 13px; line-height: 1.3; } .bd-ck small { color: var(--bd-mute); font-size: 11.5px; line-height: 1.35; }
/* massing */
.bd-mass { flex: 1; display: grid; place-items: center; } .bd-mass svg { width: 100%; height: 100%; }
.ms-plot { fill: #E6F4EA; stroke: #81C995; stroke-width: 2; }
.ms-t { fill: var(--c); stroke: #3C4043; stroke-width: 1.2; } .ms-f { fill: color-mix(in srgb, var(--c) 70%, #5F6368); stroke: #3C4043; stroke-width: 1.2; } .ms-l { fill: color-mix(in srgb, var(--c) 55%, #3C4043); stroke: #3C4043; stroke-width: 1.2; }
.ms-box.open polygon { fill-opacity: .45; stroke-dasharray: 4 3; } .ms-box.dim { opacity: .35; }
/* build */
.bd-mats { flex: 1; align-self: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; overflow-y: auto; max-height: 100%; }
.bd-mat { display: grid; gap: 3px; justify-items: start; padding: 14px; border: 0; border-radius: 18px; background: var(--bd-glass); box-shadow: var(--bd-sh); text-align: left; cursor: pointer; color: var(--bd-ink); }
.bd-mat > i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #FFF6DC; color: #B7791F; margin-bottom: 4px; } .bd-mat > i .tt-ic { width: 19px; height: 19px; }
.bd-mat small { color: var(--bd-mute); font-size: 11.5px; letter-spacing: 0; font-weight: 500; } .bd-mat b { font: 700 14.5px/1.3 var(--display); } .bd-mat span { color: var(--bd-mute); font-size: 12.5px; }
.bd-wwr { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--bd-glass); box-shadow: var(--bd-sh); } .bd-wwr > small { color: var(--bd-mute); font-size: 11.5px; letter-spacing: 0; font-weight: 500; }
.bd-compass { position: relative; width: 140px; height: 140px; margin: 0 auto; } .bd-compass > i { position: absolute; inset: 42px; border-radius: 10px; background: #F1F3F4; box-shadow: inset 0 0 0 2px #DADCE0; }
.bd-compass span { position: absolute; display: grid; justify-items: center; } .bd-compass b { font: 800 16px var(--display); } .bd-compass small { font-size: 10px; color: var(--bd-mute); }
.bd-compass .c-N { top: 0; left: 50%; transform: translateX(-50%); } .bd-compass .c-S { bottom: 0; left: 50%; transform: translateX(-50%); } .bd-compass .c-E { right: 0; top: 50%; transform: translateY(-50%); } .bd-compass .c-W { left: 0; top: 50%; transform: translateY(-50%); }
/* diagnostics */
.bd-diag { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; align-content: start; }
.bd-dg { display: grid; gap: 6px; padding: 14px; border-radius: 18px; background: var(--bd-glass); box-shadow: var(--bd-sh); } .bd-dg h4 { margin: 0 0 4px; font: 700 14px var(--display); }
.bd-warns, .bd-ok { grid-column: 1 / -1; display: grid; gap: 6px; padding: 12px 14px; border-radius: 18px; background: #FEF7E0; } .bd-ok { background: #E6F4EA; display: flex; align-items: center; gap: 8px; }
.bd-warns div { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: 13px; line-height: 1.4; } .bd-warns .tt-ic { width: 18px; height: 18px; color: #B06000; }
.bd-diag-go { grid-column: 1 / -1; display: flex; justify-content: center; padding: 6px; }
/* results */
.bd-res { flex: 1; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
.bd-hero3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .bd-hero3 > div { display: grid; gap: 2px; padding: 16px; border-radius: 20px; background: var(--bd-glass); box-shadow: var(--bd-sh); }
.bd-hero3 small { color: var(--bd-mute); font-size: 12px; font-weight: 600; } .bd-hero3 b { font: 800 30px/1.1 var(--display); letter-spacing: -.01em; } .bd-hero3 span { color: var(--bd-mute); font-size: 12.5px; }
.bd-eng { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--bd-mute); font-size: 12px; box-shadow: 0 1px 2px rgba(60,64,67,.15); } .bd-eng .tt-ic { width: 14px; height: 14px; color: var(--bd-gold); }
.bd-uses { display: grid; gap: 8px; padding: 14px; border-radius: 20px; background: var(--bd-glass); box-shadow: var(--bd-sh); }
.bd-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; } .bd-bar i { display: block; }
.bd-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--bd-mute); } .bd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.bd-monthly { display: grid; gap: 6px; padding: 14px; border-radius: 20px; background: var(--bd-glass); box-shadow: var(--bd-sh); } .bd-monthly > small { color: var(--bd-mute); font-size: 12px; font-weight: 600; }
.bd-mbars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 120px; align-items: end; }
.bd-mbars span { display: grid; grid-template-rows: 1fr auto; justify-items: center; height: 100%; gap: 2px; } .bd-mbars span i { align-self: end; width: 100%; max-width: 30px; border-radius: 6px 6px 3px 3px; background: #D2E3FC; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.bd-mbars em { display: block; width: 100%; background: var(--bd-blue); } .bd-mbars small { font-size: 10.5px; color: var(--bd-mute); }
.bd-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.bd-room { display: grid; grid-template-columns: 12px 1fr; gap: 2px 10px; padding: 12px; border-radius: 16px; background: var(--bd-glass); box-shadow: var(--bd-sh); } .bd-room > i { grid-row: span 3; width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; }
.bd-room b { font: 700 14px var(--display); } .bd-room span { font-size: 13px; } .bd-room small { color: var(--bd-mute); font-size: 11.5px; }
.bd-cmp { display: grid; gap: 8px; padding: 14px; border-radius: 20px; background: var(--bd-glass); box-shadow: var(--bd-sh); } .bd-cmp h4 { margin: 0; font: 700 15px var(--display); }
.bd-cmp-r { display: grid; grid-template-columns: 150px 1fr 90px; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; } .bd-cmp-r b { font-size: 13px; font-weight: 600; }
.bd-cmp-bar { height: 12px; border-radius: 6px; background: #F1F3F4; overflow: hidden; } .bd-cmp-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #8AB4F8, var(--bd-blue)); }
.bd-cmp-r.base .bd-cmp-bar i { background: #9AA0A6; } .bd-cmp-r span { font: 700 13px var(--display); text-align: right; } .bd-cmp-r small { grid-column: 2 / -1; color: var(--bd-mute); font-size: 11.5px; }
/* phones */
@media (max-width: 820px) {
  .gate.bd-host { padding: 4px 6px 6px; }
  .bd-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 16px; } .bd-hero-fig { height: 220px; width: 240px; } .bd-price { justify-content: center; } .bd-hero-t p { margin-left: auto; margin-right: auto; }
  .bd-steps6 { grid-template-columns: 1fr; } .bd-home-top { flex-direction: column; text-align: center; } .bd-home-fig { width: 130px; height: 130px; }
  .bd-ws { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 50fr) minmax(0, 50fr); grid-template-areas: "canvas" "chat"; gap: 8px; }
  .bd-canvas, .bd-chat { border-radius: 22px; }
  .bd-fig { width: 62px; height: 56px; } .bd-chat-h { padding: 6px 8px 4px 4px; } .bd-chat-t b { font-size: 15px; }
  .bd-views { top: 48px; right: 8px; width: max-content; max-width: calc(100% - 16px); } .bd-views span:not(.tt-ic) { display: none; } .bd-views button { padding: 0 9px; flex: none; } .bd-views .tt-ic { flex: none; }
  .bd-stagebar { padding: 8px 8px 0; } .bd-step { height: 30px; font-size: 12px; } .bd-step:not(.now) span:not(.tt-ic) { display: none; } .bd-step:not(.now) { padding: 0 3px; }
  .bd-canvas-in { padding: 44px 8px 8px; flex-direction: column; overflow-y: auto; }
  .bd-checks { width: auto; max-height: none; } .bd-plan { min-height: 260px; }
  .bd-ctx { top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: 48%; }
  .bd-hero3 { grid-template-columns: 1fr 1fr; } .bd-hero3 > div:first-child { grid-column: 1 / -1; } .bd-hero3 b { font-size: 24px; }
  .bd-cmp-r { grid-template-columns: 100px 1fr 70px; }
  .bd-m { font-size: 14px; }
}

/* v1.31.1 · delete a Bonda project */
.bd-card-w { position: relative; } .bd-card-w .bd-card { padding-right: 52px; height: 100%; box-sizing: border-box; }
.bd-del { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; color: var(--bd-mute); font: 600 12.5px/1 var(--font); cursor: pointer; }
.bd-del:hover { background: #FCE8E6; color: #C5221F; } .bd-del .tt-ic { width: 17px; height: 17px; flex: none; }
.bd-card-w.arm .bd-del { background: #C5221F; color: #fff; } .bd-card-w.arm .bd-card { box-shadow: 0 0 0 2px #F6AEA9, var(--bd-sh); } .bd-card-w.arm .bd-card small { color: #C5221F; font-weight: 600; }
.bd-card b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-del-note { display: block; margin-top: 8px; color: var(--bd-mute); font-size: 12.5px; }

/* ---------- v1.32.0 · Bonda: verified rules, setup document, 3D site, results on the plan ---------- */
.bd-rgrid > a, .bd-rgrid > span { position: relative; display: grid; padding: 6px 8px; border-radius: 10px; background: #F8F9FA; text-decoration: none; color: inherit; }
.bd-rgrid > a { background: #E6F4EA; } .bd-rgrid > a small { padding-right: 12px; } .bd-rgrid a:hover { background: #CEEAD6; } .bd-rgrid a .tt-ic { position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; color: #188038; }
.bd-rgrid > span.unv { background: #FEF7E0; } .bd-rgrid em { font-style: normal; font-size: 10px; color: #B06000; }
.bd-docs { display: grid; gap: 4px; } .bd-docs a, .bd-docs div { display: grid; grid-template-columns: 18px 1fr 14px; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 10px; background: #fff; color: inherit; text-decoration: none; }
.bd-docs a:hover { background: var(--bd-blue-bg); } .bd-docs .tt-ic { width: 16px; height: 16px; color: var(--bd-blue); } .bd-docs b { display: block; font: 600 12.5px/1.3 var(--font); } .bd-docs small { display: block; color: var(--bd-mute); font-size: 11px; overflow-wrap: anywhere; }
.bd-docs div.unv .tt-ic { color: #B06000; } .bd-rules .bd-fine { text-align: left; font-size: 11px; }
/* the setup document */
.bd-doc { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 18px; background: #fff; box-shadow: var(--bd-sh); overflow: hidden; }
.bd-doc-h { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 14px 16px 10px; border-bottom: 1px solid var(--bd-line); }
.bd-doc-h > div:first-child { display: grid; gap: 3px; } .bd-doc-h small { color: var(--bd-mute); font-size: 11.5px; letter-spacing: .02em; } .bd-doc-h b { font: 800 17px/1.2 var(--display); }
.bd-pill { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 3px 10px 3px 6px; border-radius: 999px; font: 600 12px var(--font); } .bd-pill .tt-ic { width: 15px; height: 15px; }
.bd-pill.ok { background: #E6F4EA; color: #137333; } .bd-pill.wait { background: #FEF7E0; color: #B06000; }
.bd-doc-dl { display: flex; gap: 6px; flex-wrap: wrap; }
.bd-doc-b { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; }
.bd-doc-s { padding: 12px 0; border-bottom: 1px solid var(--bd-line); } .bd-doc-s h4 { margin: 0 0 6px; font: 700 14px var(--display); color: #123F63; }
.bd-doc-s.warn h4 { color: #B06000; } .bd-doc-s ul { margin: 0; padding-left: 18px; color: #7A4A00; font-size: 13px; line-height: 1.5; }
.bd-doc-n { margin: 0 0 6px; color: var(--bd-mute); font-size: 12px; line-height: 1.45; }
.bd-doc-kv { display: grid; gap: 2px; } .bd-doc-kv div { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 10px; padding: 3px 0; font-size: 13px; line-height: 1.45; }
.bd-doc-kv span { color: var(--bd-mute); } .bd-doc-kv b { font-weight: 500; overflow-wrap: anywhere; }
.bd-doc-t { overflow-x: auto; margin-top: 6px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--bd-line); }
.bd-doc-t table { border-collapse: collapse; width: 100%; font-size: 12px; } .bd-doc-t th { position: sticky; top: 0; background: #F1F3F4; text-align: left; font-weight: 600; color: var(--bd-mute); padding: 6px 8px; white-space: nowrap; }
.bd-doc-t td { padding: 5px 8px; border-top: 1px solid var(--bd-line); vertical-align: top; } .bd-doc-t td:first-child { font-weight: 600; white-space: nowrap; }
.bd-doc-f { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--bd-line); background: #FAFBFC; }
.bd-doc-f label { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; } .bd-doc-f label input { width: 18px; height: 18px; accent-color: var(--bd-blue); }
.bd-doc-f > span { color: var(--bd-mute); font-size: 13px; } .bd-doc-f .btn .tt-ic { width: 18px; height: 18px; vertical-align: -3px; }
.bd-run { background: linear-gradient(135deg, #1A73E8, #0B57D0); }
/* 3D */
.bd-3d { position: relative; flex: 1; min-height: 0; border-radius: 18px; overflow: hidden; background: #EEF2F6; }
.bd-3d-c { position: absolute; inset: 0; } .bd-3d-c canvas { display: block; cursor: grab; } .bd-3d-c canvas:active { cursor: grabbing; }
.bd-3d-top { position: absolute; left: 10px; top: 10px; right: 470px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; pointer-events: none; }
.bd-3d-top > * { pointer-events: auto; }
.bd-3d-time { display: grid; gap: 6px; padding: 8px 10px; border-radius: 16px; background: var(--bd-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--bd-sh); max-width: 100%; }
.bd-3d-mon { display: flex; gap: 1px; } .bd-3d-mon button { width: 22px; height: 24px; border: 0; border-radius: 7px; background: transparent; color: var(--bd-mute); font: 600 11.5px var(--font); cursor: pointer; padding: 0; }
.bd-3d-mon button.on { background: var(--bd-ink); color: #fff; }
.bd-3d-hr { display: flex; align-items: center; gap: 8px; } .bd-3d-hr .tt-ic { width: 16px; height: 16px; color: #F29900; flex: none; } .bd-3d-hr input { flex: 1; min-width: 120px; accent-color: #F29900; } .bd-3d-hr b { font: 700 13px var(--display); min-width: 40px; }
.bd-3d-sun { color: var(--bd-mute); font-size: 11.5px; }
.bd-3d-res { display: grid; gap: 6px; } .bd-3d-res > small { padding: 6px 10px; border-radius: 12px; background: var(--bd-glass); color: var(--bd-mute); font-size: 12px; box-shadow: var(--bd-sh); }
.bd-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(60,64,67,.15); width: fit-content; align-items: center; }
.bd-seg button { height: 28px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--bd-mute); font: 600 12px var(--font); cursor: pointer; white-space: nowrap; } .bd-seg button.on { background: var(--bd-blue); color: #fff; }
.bd-seg.sm span { padding: 0 6px 0 8px; color: var(--bd-mute); font-size: 11.5px; }
.bd-3d-tools { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bd-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--bd-sh); }
.bd-tg { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--bd-mute); font: 600 12px var(--font); cursor: pointer; }
.bd-tg .tt-ic { width: 17px; height: 17px; flex: none; } .bd-tg.on { color: #174EA6; background: var(--bd-blue-bg); }
.bd-3d-rose { position: absolute; left: 10px; bottom: 30px; z-index: 2; display: grid; justify-items: center; gap: 2px; padding: 6px 8px 6px; border-radius: 16px; background: var(--bd-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--bd-sh); }
.bd-3d-rose:empty { display: none; } .bd-rose-svg { width: 132px; height: 132px; transition: transform .08s linear; } .bd-rose-svg svg { display: block; }
.bd-rose-t { border: 0; background: transparent; font: 600 11.5px var(--font); color: var(--bd-ink); cursor: pointer; display: grid; justify-items: center; } .bd-rose-t small { color: var(--bd-mute); font-weight: 500; font-size: 10.5px; }
.bd-3d-leg, .bd-plan-leg { display: grid; gap: 4px; padding: 8px 10px; border-radius: 14px; background: var(--bd-glass); box-shadow: var(--bd-sh); font-size: 11.5px; }
.bd-3d-leg { position: absolute; z-index: 2; right: 150px; bottom: 10px; width: min(300px, calc(100% - 330px)); } .bd-3d-leg b { font-weight: 600; font-size: 11.5px; }
.bd-3d-bar { height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgb(48,18,140), rgb(40,90,220) 15%, rgb(24,180,220) 32%, rgb(40,200,120) 48%, rgb(170,220,50) 62%, rgb(250,200,40) 75%, rgb(245,110,30) 88%, rgb(190,20,30)); }
.bd-3d-lh { display: flex; justify-content: space-between; color: var(--bd-mute); }
.bd-3d-tip { position: absolute; z-index: 3; left: 50%; bottom: 12px; transform: translateX(-50%); display: grid; gap: 2px; max-width: min(360px, calc(100% - 24px)); padding: 8px 12px; border-radius: 14px; background: #fff; box-shadow: var(--bd-sh); font-size: 12.5px; }
.bd-3d-tip b { font: 700 13px var(--display); } .bd-3d-tip span { color: var(--bd-mute); }
.bd-3d-src { position: absolute; z-index: 1; left: 12px; bottom: 8px; color: var(--bd-mute); font-size: 10.5px; max-width: calc(100% - 180px); pointer-events: none; }
.bd-mini { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 1px 2px rgba(60,64,67,.15); border: 0; font: inherit; color: inherit; text-align: left; }
.bd-mini span { display: grid; padding: 4px 10px; border-radius: 10px; background: #F8F9FA; } .bd-mini small { color: var(--bd-mute); font-size: 10.5px; } .bd-mini b { font: 700 13px var(--display); }
.bd-3d-mini { position: absolute; z-index: 2; top: 54px; right: 10px; cursor: pointer; } .bd-3d-mini:hover { box-shadow: var(--bd-sh); }
/* the plan with results */
.bd-plan-time { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(60,64,67,.15); }
.bd-plan-time select { border: 0; background: transparent; font: 600 12.5px var(--font); color: var(--bd-ink); } .bd-plan-time input { width: 140px; accent-color: #F29900; } .bd-plan-time b { font: 700 12.5px var(--display); }
.bd-plan-leg { width: min(340px, 100%); box-shadow: none; background: rgba(255,255,255,.9); }
.pl-size.val { font-weight: 700; fill: #1F2328; }
.bd-res-act { display: flex; flex-wrap: wrap; gap: 6px; } .bd-res-act > small { color: var(--bd-mute); align-self: center; font-size: 12px; }
@media (max-width: 1180px) { .bd-3d-top { right: 10px; top: 46px; } }
@media (max-width: 820px) {
  .bd-3d-top { right: 8px; left: 8px; top: 42px; } .bd-3d-time { padding: 6px 8px; } .bd-3d-mon button { width: 20px; }
  .bd-3d-tools { flex-direction: row; right: 8px; bottom: 8px; } .bd-tg span:not(.tt-ic) { display: none; } .bd-tg { padding: 0 8px; }
  .bd-3d-rose { left: 8px; bottom: 50px; transform: scale(.78); transform-origin: left bottom; }
  .bd-3d-leg { right: 8px; left: auto; bottom: 52px; width: min(240px, 60%); }
  .bd-3d-mini { top: auto; bottom: 52px; right: auto; left: 50%; transform: translateX(-50%); display: none; }
  .bd-3d-src { display: none; }
  .bd-doc-kv div { grid-template-columns: 1fr; gap: 0; } .bd-doc-h { padding: 12px; } .bd-doc-b { padding: 0 12px 12px; }
}

/* v1.32.0 · phones: enlarge the board */
.bd-views .bd-xp { display: none; }
.bd-3d-rose[hidden] { display: none; }
@media (max-width: 820px) {
  .bd-views .bd-xp { display: inline-flex; }
  .bd-ws.big { grid-template-rows: minmax(0, 1fr) auto; }
  .bd-ws.big .bd-chat-h, .bd-ws.big .bd-msgs, .bd-ws.big .bd-chips { display: none; }
  .bd-ws.big .bd-chat { border-radius: 18px; }
  .bd-3d-time { width: 100%; box-sizing: border-box; } .bd-3d-mon { justify-content: space-between; }
  .bd-3d-res { width: 100%; } .bd-3d-res .bd-seg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .bd-3d-leg { left: 8px; right: auto; bottom: 52px; width: min(250px, calc(100% - 16px)); }
  .bd-3d-tools { padding: 3px; gap: 2px; } .bd-tg { height: 34px; }
}
.bd-rgrid .tt-ic { padding: 0; background: none; }
.bd-links { display: grid; gap: 4px; margin-top: 8px; } .bd-links a { display: grid; grid-template-columns: 16px 1fr 12px; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 10px; background: #E6F4EA; color: #137333; text-decoration: none; font-size: 12.5px; }
.bd-links a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-links .tt-ic { width: 14px; height: 14px; }

/* ---------- v1.33.0 · Vinamra (rig from Wegaway) ---------- */
.vn-fig { position: relative; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.vn-body { position: absolute; inset: 0; transform-origin: 50% 100%; }
.vn-fig.idle .vn-body { animation: vnBreath 3.6s ease-in-out infinite; } .vn-fig.busy .vn-body { animation: vnBob 1.1s ease-in-out infinite; } .vn-fig.boing .vn-body { animation: vnBoing .5s cubic-bezier(.3,1.6,.5,1); }
.vn-body img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity .18s ease; filter: drop-shadow(0 6px 8px rgba(30,41,59,.25)); }
.vn-body img.on { opacity: 1; }
.vn-sd, .vn-pony { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); pointer-events: none; display: none; }
.vn-sd { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .vn-sd.on, .vn-pony.on { display: block; }
.vn-pony svg { display: block; animation: vnSway 3.4s ease-in-out infinite; } .vn-fig.busy .vn-pony svg { animation-duration: 1.2s; }
.vn-shadow { position: absolute; left: 50%; bottom: -4px; width: 56%; height: 8px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(rgba(15,23,42,.26), rgba(15,23,42,0) 70%); }
@keyframes vnSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes vnBreath { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-2px) scale(1.012, .988); } }
@keyframes vnBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-2deg); } }
@keyframes vnBoing { 0% { transform: scale(1, 1); } 30% { transform: scale(1.08, .9); } 60% { transform: scale(.96, 1.05); } 100% { transform: scale(1, 1); } }
@media (prefers-reduced-motion: reduce) { .vn-body, .vn-pony svg { animation: none !important; } }
/* Vinamra's studio */
.vn-wrap { flex: 1; min-height: 0; display: flex; position: relative; }
.vn-off { position: fixed; left: -20000px; top: 0; width: 1536px; height: 1024px; pointer-events: none; }
.vn-studio { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 12px; }
.vn-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: var(--bd-sh); }
.vn-head { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: end; }
.vn-figbox { width: 92px; height: 132px; } .vn-head small { color: #1D4ED8; font: 500 11.5px var(--font); letter-spacing: 0; }
.vn-bub { position: relative; margin-top: 4px; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: #1D4ED8; color: #fff; font-size: 13.5px; line-height: 1.4; min-height: 38px; }
.vn-body-w { display: grid; gap: 8px; } .vn-body-w h4 { margin: 8px 0 0; font: 700 12.5px var(--display); color: var(--bd-mute); letter-spacing: .02em; }
.vn-seg { flex-wrap: wrap; } .vn-seg button { display: inline-flex; align-items: center; gap: 5px; } .vn-seg .tt-ic { width: 15px; height: 15px; }
.vn-rooms { display: flex; flex-wrap: wrap; gap: 6px; } .vn-range { display: grid; gap: 4px; } .vn-range input { accent-color: #1D4ED8; } .vn-range b { font: 600 12.5px var(--font); }
.vn-body-w textarea { width: 100%; box-sizing: border-box; border: 0; border-radius: 12px; padding: 9px 11px; background: #F1F3F4; font: 14px/1.4 var(--font); resize: vertical; }
.vn-go { justify-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(135deg, #1D4ED8, #2563EB); } .vn-go .tt-ic { width: 18px; height: 18px; }
.vn-fine { color: var(--bd-mute); font-size: 11.5px; line-height: 1.4; }
.vn-main { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.vn-refbox { position: relative; border-radius: 18px; overflow: hidden; background: #EEF2F6; box-shadow: var(--bd-sh); aspect-ratio: 3 / 2; flex: none; }
.vn-ref { width: 100%; height: 100%; object-fit: cover; display: block; } .vn-refbox small { position: absolute; left: 10px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--bd-mute); font-size: 11.5px; }
.vn-gal h4 { margin: 4px 2px 8px; font: 700 13px var(--display); color: var(--bd-mute); }
.vn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.vn-tile { display: grid; gap: 2px; padding: 0 0 8px; border: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--bd-sh); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.vn-tile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #EEF2F6; } .vn-tile span { display: flex; gap: 4px; align-items: center; padding: 4px 10px 0; font: 600 13px var(--font); } .vn-tile span .tt-ic { width: 14px; height: 14px; color: #1D4ED8; } .vn-tile small { padding: 0 10px; color: var(--bd-mute); font-size: 11px; }
.vn-empty { color: var(--bd-mute); font-size: 13px; text-align: center; padding: 18px; }
.vn-view { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgba(15,23,42,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 18px; }
.vn-view-in { position: relative; display: grid; gap: 8px; width: min(100% - 20px, 1100px); max-height: calc(100% - 20px); padding: 10px; border-radius: 18px; background: #fff; box-shadow: var(--bd-sh); overflow-y: auto; }
.vn-view-in > img { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 12px; background: #EEF2F6; transition: opacity .25s; } .vn-view-in > img.fade { opacity: .35; }
.vn-x { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.92) !important; z-index: 1; }
.vn-cap { display: grid; } .vn-cap b { font: 700 15px var(--display); } .vn-cap small { color: var(--bd-mute); font-size: 12px; }
.vn-nav { display: flex; justify-content: center; gap: 8px; } .vn-nav .bd-ib { background: #F1F3F4; } .vn-nav .bd-ib:first-child .tt-ic { transform: rotate(180deg); }
.vn-act { display: flex; gap: 6px; flex-wrap: wrap; } .vn-var { display: flex; gap: 6px; } .vn-var input { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 0 14px; height: 36px; background: #F1F3F4; font: 14px var(--font); }
@media (max-width: 820px) {
  .vn-studio { grid-template-columns: 1fr; overflow-y: auto; align-content: start; } .vn-side, .vn-main { overflow: visible; min-height: auto; flex: none; }
  .vn-head { grid-template-columns: 72px 1fr; } .vn-figbox { width: 72px; height: 104px; }
  .vn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- v1.34.0 · interactive results ---------- */
.bd-rs { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 12px; }
.bd-rs-pic { position: relative; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.bd-rs-tb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bd-rs-area { position: relative; flex: 1; min-height: 280px; display: flex; flex-direction: column; gap: 8px; }
.bd-rs-plan { flex: 1; min-height: 0; } .bd-rs-plan [data-room] { cursor: pointer; } .bd-rs-plan [data-room]:hover { filter: brightness(.95); }
.bd-rs-3d { flex: 1; min-height: 300px; } .bd-rs-cut { position: absolute; z-index: 2; left: 10px; top: 10px; }
.bd-rs-hint { position: absolute; z-index: 2; right: 8px; bottom: 6px; color: var(--bd-mute); font-size: 11px; pointer-events: none; }
.bd-rs-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.bd-rs-side.solo { flex: 1; max-width: 640px; margin: 0 auto; }
.bd-rs-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bd-rs-kpi > div { display: grid; gap: 2px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: var(--bd-sh); }
.bd-rs-kpi small { color: var(--bd-mute); font-size: 11px; } .bd-rs-kpi b { font: 800 17px/1.15 var(--display); white-space: nowrap; } .bd-rs-kpi span { color: var(--bd-mute); font-size: 11px; }
.bd-rs-side .bd-uses, .bd-rs-side .bd-monthly { padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: var(--bd-sh); }
.bd-rs-side .bd-mbars { height: 90px; }
.bd-cmp-n { color: var(--bd-mute); font-size: 12.5px; }
.bd-pop { position: absolute; z-index: 6; width: 300px; max-height: calc(100% - 60px); overflow-y: auto; display: grid; gap: 6px; padding: 12px 12px 10px; border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 2px 6px rgba(60,64,67,.2), 0 16px 40px -12px rgba(30,60,120,.4); }
.bd-pop[hidden] { display: none; }
.bd-pop-x { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; }
.bd-pop-t { font: 800 15px/1.25 var(--display); padding-right: 28px; } .bd-pop-sub { color: var(--bd-mute); font-size: 11.5px; overflow-wrap: anywhere; }
.bd-pop-h { color: var(--bd-mute); font: 600 11px var(--font); letter-spacing: .02em; margin-top: 2px; }
.bd-pop-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .bd-pop-kv > div { display: grid; padding: 5px 8px; border-radius: 10px; background: #F8F9FA; } .bd-pop-kv small { color: var(--bd-mute); font-size: 10.5px; } .bd-pop-kv b { font: 700 13px var(--display); }
.bd-pop-chart svg { display: block; } .bd-pop-lg { display: flex; flex-wrap: wrap; gap: 8px; color: var(--bd-mute); font-size: 10.5px; } .bd-pop-lg span { display: inline-flex; align-items: center; gap: 4px; } .bd-pop-lg i { width: 10px; height: 3px; border-radius: 2px; }
.bd-pop-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .bd-pop-act .bd-chip { min-height: 30px; padding: 4px 11px; font-size: 12.5px; }
@media (max-width: 1180px) { .bd-rs { grid-template-columns: 1fr; overflow-y: auto; align-content: start; } .bd-rs-pic, .bd-rs-side { min-height: auto; overflow: visible; } .bd-rs-area { min-height: 420px; } }
@media (max-width: 820px) {
  .bd-rs-area { min-height: 360px; }
  .bd-pop { position: fixed; left: 8px !important; right: 8px; top: auto !important; bottom: 76px; width: auto; max-height: 60vh; }
}

/* v1.35.0 · phones: the month row folds away (the sun button opens it), so the model stays in view */
.bd-3d-sb { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; color: inherit; font: 600 12px var(--font); cursor: pointer; }
.bd-3d-ml { display: none; }
@media (max-width: 820px) {
  .bd-3d-time:not(.open) .bd-3d-mon, .bd-3d-time:not(.open) .bd-3d-sun { display: none; }
  .bd-3d-time:not(.open) .bd-3d-ml { display: inline; }
  .bd-3d-sb { min-height: 32px; padding: 0 8px; border-radius: 10px; background: rgba(242,153,0,.12); }
}
/* v1.35.0 · the card's arrow never sits on the last "for" line */
.op-copy { padding-bottom: 64px; }

/* v1.36.0 · the plot on the map: which is your plot, the outline, its checks, moving it, confirming it */
.bd-pk { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: #E8F0FE; }
.bd-pk.ok { background: #E6F4EA; } .bd-pk.bad { background: #FCE8E6; }
.bd-pk > p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--bd-ink, #1F2328); }
.bd-pk-warn { display: flex; gap: 8px; align-items: flex-start; color: #A50E0E !important; font-weight: 600; }
.bd-pk-warn .tt-ic { flex: none; color: #D93025; }
.bd-pk-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bd-pk-ck li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.bd-pk-ck li .tt-ic { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.bd-pk-ck li.ok .tt-ic { color: #188038; } .bd-pk-ck li.no { color: #A50E0E; font-weight: 600; } .bd-pk-ck li.no .tt-ic { color: #D93025; }
.bd-pk-mv { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bd-pk-mv > span { font: 600 12.5px var(--font); color: var(--bd-mute, #5F6368); margin-right: auto; }
.bd-pk-mv .bd-ib { width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 0; display: grid; place-items: center; cursor: pointer; }
.bd-pk-yes { justify-self: start; min-height: 44px; }
.bd-pk-yes:disabled { opacity: .55; }
.bd-plot-lab span { display: inline-block; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.92); font: 700 12px var(--font); color: #1F2328; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.bd-3d-place { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 3; display: inline-flex; gap: 6px; align-items: center; border: 0; border-radius: 999px; padding: 8px 14px; background: #1A73E8; color: #fff; font: 600 13px var(--font); box-shadow: 0 2px 8px rgba(26,115,232,.35); cursor: pointer; white-space: nowrap; }
.bd-3d-place.bad { background: #D93025; box-shadow: 0 2px 8px rgba(217,48,37,.35); }
@media (max-width: 820px) { .bd-3d-place { top: auto; bottom: 56px; font-size: 12px; padding: 7px 12px; } }

/* v1.37.0 · doors on the plan */
.pl-dgap { stroke: #FFFFFF; stroke-width: 9; stroke-linecap: butt; pointer-events: none; }
.pl-leaf { stroke: #2B2F33; stroke-width: 3; stroke-linecap: round; pointer-events: none; } .pl-leaf.main { stroke: #8A4B12; stroke-width: 4; }
.pl-swing { fill: none; stroke: #80868B; stroke-width: 1.6; stroke-dasharray: 5 4; pointer-events: none; }
.pl-jamb { stroke: #2B2F33; stroke-width: 4; pointer-events: none; }
/* v1.37.0 · stages and views that Bonda has not reached yet */
.bd-step.off, .bd-views button.off { opacity: .38; cursor: not-allowed; box-shadow: none; }
.bd-step.off i { background: #F1F3F4; color: #9AA0A6; }
/* v1.37.0 · Vinamra's live 3D view: turn, pan and zoom to frame the picture */
.vn-live { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.vn-live:active { cursor: grabbing; }
.vn-refbox small { pointer-events: none; max-width: calc(100% - 150px); }
.vn-reset { position: absolute; right: 10px; bottom: 8px; min-height: 32px; background: rgba(255,255,255,.92) !important; }
.vn-view-in img.zoomable { touch-action: none; cursor: zoom-in; transform-origin: 0 0; will-change: transform; }
.vn-view-in img.zoomed { cursor: grab; }
.vn-zoom { position: relative; overflow: hidden; border-radius: 12px; background: #EEF2F6; touch-action: none; }
.vn-zoom > img { display: block; width: 100%; max-height: 62vh; object-fit: contain; transition: opacity .25s; } .vn-zoom > img.fade { opacity: .35; }
.vn-ztip { color: var(--bd-mute); font-size: 12px; }
.bd-ck-gate { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: #FCE8E6; color: #A50E0E; font-size: 13px; line-height: 1.4; font-weight: 600; }
.bd-ck-gate.user { background: #FEF7E0; color: #8A5300; } .bd-ck-gate .tt-ic { flex: none; width: 18px; height: 18px; }
/* v1.37.0 · phones: the live 3D view first (under Vinamra's greeting), then the choices, then the pictures */
@media (max-width: 820px) {
  .vn-studio { display: flex; flex-direction: column; }
  .vn-main { display: contents; }
  .vn-refbox { order: -1; } .vn-gal { order: 2; }
}

/* v1.38.0 · Vinamra's studio, laid out like a map app: the live model fills the board, chips on top, one card below */
.vn-studio.vn-mapui { position: relative; display: block; flex: 1; min-height: 0; border-radius: 18px; overflow: hidden; background: #EEF2F6; }
.vn-mapui .vn-refbox { position: absolute; inset: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.vn-mapui .vn-live { position: absolute; inset: 0; }
.vn-topw { position: absolute; left: 12px; right: 12px; top: 10px; display: grid; gap: 8px; pointer-events: none; z-index: 2; }
.vn-topw > * { pointer-events: auto; }
.vn-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.vn-chips::-webkit-scrollbar { display: none; }
.vn-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: #3C4043; font: 600 13px var(--font); cursor: pointer; box-shadow: 0 1px 3px rgba(60,64,67,.3); white-space: nowrap; }
.vn-chip .tt-ic { width: 17px; height: 17px; }
.vn-chip.on { background: #E8F0FE; color: #174EA6; box-shadow: 0 1px 3px rgba(26,115,232,.35); }
.vn-chip.sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.vn-sheet .vn-chip { box-shadow: none; background: #F1F3F4; } .vn-sheet .vn-chip.on { background: #E8F0FE; }
.vn-pill { display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; padding: 6px 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.3); font-size: 12.5px; }
.vn-pill input[type=range] { width: 180px; accent-color: #1A73E8; } .vn-pill .tt-ic { width: 16px; height: 16px; color: #5F6368; }
.vn-fabs { position: absolute; right: 12px; bottom: 12px; display: grid; gap: 10px; z-index: 2; }
.vn-fab { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #3C4043; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(60,64,67,.35); position: relative; }
.vn-fab .tt-ic { width: 20px; height: 20px; }
.vn-galb b { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #1A73E8; color: #fff; font: 700 11px/18px var(--font); }
.vn-galb b:empty { display: none; }
.vn-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 1; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.88); color: #5F6368; font-size: 12px; pointer-events: none; white-space: nowrap; }
.vn-sheet { position: absolute; left: 12px; bottom: 12px; z-index: 2; width: min(340px, calc(100% - 24px)); max-height: calc(100% - 120px); overflow-y: auto; display: grid; gap: 10px; padding: 12px 14px 14px; border-radius: 20px; background: #fff; box-shadow: 0 2px 10px rgba(60,64,67,.28); }
.vn-mapui .vn-head { grid-template-columns: 52px 1fr; gap: 10px; align-items: center; }
.vn-mapui .vn-figbox { width: 52px; height: 74px; }
.vn-said small { color: #1D4ED8; font: 500 12px var(--font); letter-spacing: 0; }
.vn-mapui .vn-bub { margin-top: 2px; padding: 0; min-height: 0; border-radius: 0; background: none; color: #3C4043; font-size: 13.5px; line-height: 1.4; }
.vn-mapui .vn-body-w { display: grid; gap: 8px; }
.vn-light { display: flex; align-items: center; gap: 8px; } .vn-light .tt-ic { flex: none; width: 18px; height: 18px; color: #F29900; }
.vn-light input[type=range] { flex: 1; min-width: 0; accent-color: #F29900; }
.vn-mon { border: 0; border-radius: 999px; background: #F1F3F4; padding: 6px 10px; font: 600 12.5px var(--font); color: #3C4043; }
.vn-time { font: 700 13px var(--display); min-width: 42px; text-align: right; } .vn-sun { color: #5F6368; font-size: 12px; margin-top: -4px; }
.vn-more summary { cursor: pointer; color: #1A73E8; font: 600 12.5px var(--font); list-style: none; } .vn-more summary::-webkit-details-marker { display: none; }
.vn-more-b { display: grid; gap: 8px; margin-top: 8px; }
.vn-mapui .vn-go { width: 100%; min-height: 46px; justify-content: center; }
.vn-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; width: min(320px, 100%); display: grid; grid-template-rows: auto 1fr; background: #fff; box-shadow: -2px 0 10px rgba(60,64,67,.2); transform: translateX(105%); transition: transform .25s ease; }
.vn-panel.open { transform: none; }
.vn-panel-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 6px 16px; } .vn-panel-h b { font: 700 15px var(--display); }
.vn-panel .vn-gal { overflow-y: auto; padding: 0 12px 12px; } .vn-panel .vn-gal h4 { display: none; }
.vn-panel .vn-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) {
  .vn-studio.vn-mapui { min-height: 70vh; flex: none; height: 74vh; }
  .vn-sheet { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 52%; }
  .vn-fabs { right: 10px; bottom: auto; top: 96px; } .vn-hint { display: none; }
  .vn-topw { left: 8px; right: 8px; top: 8px; }
  .vn-mapui .vn-figbox { width: 42px; height: 60px; } .vn-mapui .vn-head { grid-template-columns: 42px 1fr; }
}
.bd-3d-src .bd-src-retry { pointer-events: auto; border: 0; background: none; color: #1A73E8; font: 600 12px var(--font); cursor: pointer; padding: 0 2px; }
.bd-3d-src.err { pointer-events: auto; color: #A50E0E; font-size: 12px; background: rgba(255,255,255,.9); padding: 4px 10px; border-radius: 10px; }
@media (max-width: 820px) { .bd-3d-src.err { display: block; left: 8px; right: 8px; max-width: none; bottom: 56px; } }

/* v1.38.0 · the conversation keeps everything: saving status, replies, result cards */
.bd-sync { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font: 600 10.5px/1.6 var(--font); letter-spacing: 0; text-transform: none; color: #188038; background: #E6F4EA; vertical-align: middle; }
.bd-sync.saving { color: #5F6368; background: #F1F3F4; } .bd-sync.offline, .bd-sync.retry { color: #8A5300; background: #FEF7E0; } .bd-sync.local, .bd-sync.expired { color: #5F6368; background: #F1F3F4; }
.bd-m { position: relative; }
.bd-m .bd-reply { position: absolute; top: 2px; width: 28px; height: 28px; opacity: 0; transition: opacity .15s; background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.25); color: #5F6368; }
.bd-m.bonda .bd-reply { right: -34px; } .bd-m.user .bd-reply { left: -34px; }
.bd-m:hover .bd-reply, .bd-m:focus-within .bd-reply { opacity: 1; }
@media (hover: none) { .bd-m .bd-reply { opacity: .7; } }
.bd-m .bd-reply .tt-ic { width: 15px; height: 15px; }
.bd-quote { display: grid; gap: 1px; width: 100%; margin: -2px 0 6px; padding: 5px 9px; border: 0; border-left: 3px solid #1A73E8; border-radius: 8px; background: rgba(26,115,232,.08); text-align: left; font: 12px/1.35 var(--font); color: inherit; cursor: pointer; }
.bd-m.user .bd-quote { background: rgba(255,255,255,.18); border-left-color: #fff; }
.bd-quote b { font-size: 11.5px; } .bd-quote span { opacity: .85; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bd-m.flash, .bd-cardm.flash { box-shadow: 0 0 0 3px #FBBC04; }
.bd-replybar { display: flex; align-items: center; gap: 8px; margin: 0 4px 6px; padding: 6px 6px 6px 10px; border-radius: 12px; background: #E8F0FE; }
.bd-replybar[hidden] { display: none; }
.bd-replybar > .tt-ic { flex: none; width: 16px; height: 16px; color: #1A73E8; }
.bd-replybar > span { flex: 1; min-width: 0; display: grid; } .bd-replybar b { font-size: 12px; color: #174EA6; } .bd-replybar small { font-size: 12px; color: #3C4043; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-cardm { align-self: stretch; display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.2); border-left: 4px solid #B7791F; }
.bd-cardm.results { border-left-color: #188038; } .bd-cardm.render { border-left-color: #1D4ED8; } .bd-cardm.setup { border-left-color: #5F6368; } .bd-cardm.plot { border-left-color: #1A73E8; }
.bd-cardm-h { display: flex; align-items: flex-start; gap: 8px; } .bd-cardm-h > .tt-ic { flex: none; width: 18px; height: 18px; color: #5F6368; margin-top: 2px; }
.bd-cardm-h > span { flex: 1; min-width: 0; display: grid; } .bd-cardm-h b { font: 700 13.5px var(--display); } .bd-cardm-h small { color: #5F6368; font-size: 12px; } .bd-cardm-h time { color: #9AA0A6; font-size: 11px; white-space: nowrap; }
.bd-cardm-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.bd-cardm-kv span { display: grid; padding: 6px 8px; border-radius: 10px; background: #F8F9FA; } .bd-cardm-kv small { color: #5F6368; font-size: 11px; } .bd-cardm-kv b { font: 700 13px var(--display); }
.bd-card-img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; background: #EEF2F6; }
.bd-cardm-a { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .bd-cardm-a .bd-reply { margin-left: auto; width: 30px; height: 30px; }
.bd-note.warn { background: #FEF7E0; color: #8A5300; }
.bd-m-files button { border: 0; background: rgba(255,255,255,.2); color: inherit; font: inherit; border-radius: 8px; padding: 2px 8px; display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.vn-mon { flex: none; width: auto !important; height: 32px; min-height: 0; margin: 0; border: 0 !important; box-shadow: none !important; appearance: auto; }
.vn-hint { left: auto; right: 68px; transform: none; bottom: 22px; }
@media (max-width: 1100px) { .vn-hint { display: none; } }
/* v1.38.0 · phones: the model on top (half the screen), the card below it, the pictures in a sheet from the bottom */
@media (max-width: 820px) {
  .vn-wrap { flex-direction: column; }
  .vn-studio.vn-mapui { display: flex; flex-direction: column; width: 100%; flex: 1 1 auto; height: auto; min-height: 0; overflow: visible; background: none; border-radius: 0; }
  .vn-mapui .vn-refbox { position: relative; inset: auto; flex: none; height: 46vh; border-radius: 16px; overflow: hidden; background: #EEF2F6; }
  .vn-topw { top: 8px; }
  .vn-fabs { top: calc(46vh - 104px); bottom: auto; }
  .vn-sheet { position: relative; left: auto; right: auto; bottom: auto; width: auto; max-height: none; margin-top: 8px; }
  .vn-panel { position: fixed; z-index: 60; top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 72vh; border-radius: 20px 20px 0 0; transform: translateY(105%); }
  .vn-panel.open { transform: none; }
}
.vn-light select.vn-mon { padding: 0 8px !important; height: 30px !important; min-height: 0 !important; line-height: 30px; background: #F1F3F4 !important; border-radius: 999px !important; font: 600 12.5px var(--font) !important; color: #3C4043; }

/* v1.39.0 · Bonda's chat floats over the board: move it, resize it, hide it */
.bd-ws.float { display: block; position: relative; }
.bd-ws.float .bd-canvas { position: absolute; inset: 0; }
.bd-ws.float .bd-chat { position: absolute; z-index: 30; right: 12px; top: 64px; width: 380px; height: calc(100% - 76px); min-width: 300px; min-height: 280px; max-width: calc(100% - 24px); max-height: calc(100% - 16px); resize: both; background: rgba(255,255,255,.97); box-shadow: 0 8px 28px rgba(60,64,67,.28), 0 1px 3px rgba(60,64,67,.2); }
.bd-ws.float .bd-chat[style*="left"] { right: auto; }
.bd-ws.float .bd-chat-h { cursor: grab; touch-action: none; user-select: none; }
.bd-ws.float .bd-chat.moving { opacity: .92; } .bd-ws.float .bd-chat.moving .bd-chat-h { cursor: grabbing; }
.bd-ws.float.chat-off .bd-chat { display: none; }
.bd-ws.float .bd-xp { display: none !important; }
.bd-hide .tt-ic { width: 18px; height: 18px; }
.bd-fab { position: absolute; z-index: 31; right: 18px; bottom: 18px; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: #FFF6DC; box-shadow: 0 4px 14px rgba(60,64,67,.35); cursor: pointer; display: none; overflow: visible; }
.bd-fab img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.bd-ws.chat-off .bd-fab { display: block; }
.bd-fab-n { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #D93025; color: #fff; font: 700 11.5px/20px var(--font); }
.bd-fab-n:empty { display: none; }
.bd-fab-tip { position: absolute; z-index: 31; right: 92px; bottom: 26px; max-width: min(320px, 60%); padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: #fff; box-shadow: 0 4px 14px rgba(60,64,67,.3); font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.bd-ws:not(.chat-off) .bd-fab-tip { display: none; }
/* the board's right-hand controls make room for the chat when it sits on the right */
.bd-ws.float.chat-r:not(.chat-off) :is(.bd-views, .bd-3d-top, .bd-3d-mini, .bd-3d-tools, .vn-fabs, .vn-hint, .leaflet-bottom.leaflet-right) { right: calc(var(--cw, 380px) + 24px) !important; }
.bd-ws.float.chat-r:not(.chat-off) .bd-canvas-in.bd-docv { padding-right: calc(var(--cw, 380px) + 24px); }
.bd-ws.float.chat-r:not(.chat-off) .vn-panel { right: calc(var(--cw, 380px) + 24px); }
@media (max-width: 820px) {
  .bd-ws.float .bd-chat { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto !important; height: 50% !important; min-width: 0; resize: none; border-radius: 22px 22px 0 0; }
  .bd-ws.float .bd-chat-h { cursor: default; }
  .bd-ws.float.chat-r:not(.chat-off) .bd-canvas-in.bd-docv { padding-right: 8px; }
  .bd-ws.float:not(.chat-off) .bd-canvas-in { padding-bottom: calc(var(--bd-h, 700px) * .5 + 8px); }
  .bd-fab { right: 12px; bottom: 12px; width: 58px; height: 58px; }
  .bd-fab-tip { right: 80px; bottom: 18px; }
}
/* v1.39.0 · suggested answers are choices: tap several, add words, then Send */
.bd-chips .bd-chip .bd-tick { display: none; width: 16px; height: 16px; margin-right: 2px; }
.bd-chips .bd-chip.on { background: #1A73E8; color: #fff; } .bd-chips .bd-chip.on .bd-tick { display: inline-grid; place-items: center; } .bd-chips .bd-chip.on .bd-tick .tt-ic { width: 15px; height: 15px; }
.bd-chip-hint { flex-basis: 100%; color: var(--bd-mute); font-size: 11.5px; padding: 0 4px; }
.bd-send.ready { box-shadow: 0 0 0 4px rgba(26,115,232,.25); animation: bdPulse 1.6s ease-in-out infinite; }
@keyframes bdPulse { 50% { box-shadow: 0 0 0 7px rgba(26,115,232,.12); } }
@media (prefers-reduced-motion: reduce) { .bd-send.ready { animation: none; } }

/* ===== v1.40.0: Bonda and Vinamra stand on the board; their windows float (left by default); the board makes room ===== */
.bd-ws.float { --il: 0px; --ir: 0px; display: block; position: relative; }
.bd-ws.float .bd-canvas { position: absolute; inset: 0; }
.bd-fab, .bd-fab-tip, .bd-stagebar, .bd-ws .bd-xp { display: none !important; }
.bd-ws.float .bd-panel { position: absolute; z-index: 30; min-width: 300px; min-height: 300px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); resize: both; right: auto;
  background: rgba(255,255,255,.97); box-shadow: 0 8px 28px rgba(60,64,67,.26), 0 1px 3px rgba(60,64,67,.18); }
.bd-ws.float .bd-panel[hidden] { display: none; }
.bd-ws.float .bd-panel .bd-chat-h { cursor: grab; touch-action: none; user-select: none; padding-left: 16px; }
.bd-ws.float .bd-panel.moving { opacity: .93; } .bd-ws.float .bd-panel.moving .bd-chat-h { cursor: grabbing; }
.bd-panel.vin .bd-chat-h { background: linear-gradient(180deg, #EAF1FE, rgba(255,255,255,0)); }
.bd-kicker.vin { color: #1D4ED8; }
.bd-panel.vin .bd-m.bonda, .bd-m.vin { border-top-left-radius: 6px; }
.bd-panel.vin .bd-m.user, .bd-panel.vin .bd-chip.on { background: #1D4ED8; }
.bd-panel.vin .bd-chip { background: #EAF1FE; color: #1D4ED8; }
.bd-send.vin { background: #1D4ED8; }
.bd-save.done { color: #188038; background: #E6F4EA; }
/* the two figures */
.bd-mascot { position: absolute; z-index: 32; width: 104px; height: 96px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none;
  border-radius: 28px; transition: left .22s ease, top .22s ease, transform .15s ease, filter .15s ease; filter: drop-shadow(0 4px 8px rgba(60,64,67,.28)); }
.bd-mascot[hidden] { display: none; }
.bd-mascot.dragging { cursor: grabbing; transition: none; transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 12px 18px rgba(60,64,67,.35)); }
.bd-mascot:hover { transform: translateY(-2px); } .bd-mascot:focus-visible { box-shadow: 0 0 0 3px rgba(26,115,232,.5); }
.bd-mascot .bd-fig, .bd-mascot .bd-vfig { width: 100%; height: 100%; margin: 0; pointer-events: none; }
.bd-mascot::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: -2px; height: 4px; border-radius: 4px; background: transparent; transition: background .2s; }
.bd-mascot.on::after { background: var(--bd-gold); } .bd-mascot.vin.on::after { background: #1D4ED8; }
.bd-badge { position: absolute; top: 2px; right: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #D93025; color: #fff; font: 700 11.5px/20px var(--font); text-align: center; pointer-events: none; }
.bd-badge:empty { display: none; }
.bd-tip { position: absolute; bottom: calc(100% + 4px); left: 0; width: max-content; max-width: 280px; padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: 0 4px 14px rgba(60,64,67,.28); font-size: 13px; line-height: 1.4; color: var(--bd-ink); cursor: pointer; }
.bd-tip[hidden] { display: none; }
/* the board's own panels keep out of the open window */
.bd-ws.float .bd-canvas-in { padding-top: 58px; }
.bd-ws.float .bd-views { top: 10px; right: auto; left: calc(var(--il) + (100% - var(--il) - var(--ir)) / 2); transform: translateX(-50%); max-width: calc(100% - var(--il) - var(--ir) - 24px); overflow-x: auto; scrollbar-width: none; }
.bd-ws.float .bd-views::-webkit-scrollbar { display: none; }
.bd-views button { flex: none; } .bd-views button.done { color: var(--bd-ink); }
.bd-vdone { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: #E6F4EA; color: #188038; } .bd-vdone .tt-ic { width: 12px; height: 12px; }
.bd-views button.on .bd-vdone { background: #fff; }
.bd-ws.float :is(.bd-ctx, .bd-3d-rose, .bd-3d-src, .vn-sheet) { left: calc(var(--il) + 12px); }
.bd-ws.float .bd-ctx { top: 58px; width: min(330px, calc(100% - var(--il) - var(--ir) - 24px)); }
.bd-ws.float .bd-3d-top { left: calc(var(--il) + 12px); right: calc(var(--ir) + 12px); top: 58px; }
.bd-ws.float .vn-topw { left: calc(var(--il) + 12px); right: calc(var(--ir) + 12px); top: 58px; }
.bd-ws.float :is(.bd-3d-tools, .vn-fabs, .vn-panel) { right: calc(var(--ir) + 12px); }
.bd-ws.float .bd-3d-mini { right: calc(var(--ir) + 12px); top: 58px; }
.bd-ws.float .bd-3d-leg { right: calc(var(--ir) + 150px); }
.bd-ws.float .vn-hint { left: calc(var(--il) + (100% - var(--il) - var(--ir)) / 2); }
.bd-ws.float .leaflet-left { left: var(--il); } .bd-ws.float .leaflet-right { right: var(--ir); }
.bd-ws.float .bd-canvas-in.bd-docv { padding-left: calc(var(--il) + 12px); padding-right: calc(var(--ir) + 12px); }
/* progress bars: top centre of the free space, a cross to stop */
.bd-progs { position: absolute; z-index: 25; top: 56px; left: calc(var(--il) + (100% - var(--il) - var(--ir)) / 2); transform: translateX(-50%); width: min(420px, calc(100% - var(--il) - var(--ir) - 24px)); display: grid; gap: 8px; pointer-events: none; }
.bd-progs:empty { display: none; }
.bd-prog { pointer-events: auto; padding: 10px 12px 10px 14px; border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: 0 4px 16px rgba(60,64,67,.25); transition: opacity .4s; }
.bd-prog.end { opacity: 0; }
.bd-prog-t { display: flex; align-items: center; gap: 8px; } .bd-prog-t b { flex: 1; min-width: 0; font: 600 13px/1.3 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-prog-t small { flex: none; color: var(--bd-mute); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.bd-prog-s { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #D2E3FC; border-top-color: var(--bd-blue); animation: bdSpin .9s linear infinite; }
.bd-prog-x { flex: none; width: 30px; height: 30px; margin: -4px -6px -4px 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: #F1F3F4; color: var(--bd-ink); cursor: pointer; }
.bd-prog-x:hover { background: #FCE8E6; color: #C5221F; } .bd-prog-x .tt-ic { width: 16px; height: 16px; }
.bd-prog-bar { margin-top: 8px; height: 5px; border-radius: 3px; background: #E8F0FE; overflow: hidden; } .bd-prog-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--bd-blue); transition: width .5s ease; }
.bd-prog.ind .bd-prog-bar i { width: 35%; animation: bdInd 1.3s ease-in-out infinite; }
@keyframes bdSpin { to { transform: rotate(360deg); } }
@keyframes bdInd { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
/* zoom buttons on drawings */
.bd-zoom { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: grid; gap: 2px; padding: 3px; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: var(--bd-sh); }
.bd-zoom button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 11px; background: transparent; color: var(--bd-ink); cursor: pointer; font: 600 18px/1 var(--font); }
.bd-zoom button:hover { background: #F1F3F4; } .bd-zoom .tt-ic { width: 18px; height: 18px; }
.bd-zoomable { position: relative; overflow: hidden; touch-action: none; cursor: grab; } .bd-zoomable.panning { cursor: grabbing; }
.bd-zoomable > .bd-zin { transform-origin: 0 0; will-change: transform; }
@media (max-width: 820px) {
  .bd-ws.float .bd-panel { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto !important; height: 52% !important; min-width: 0; min-height: 0; max-width: none; resize: none; border-radius: 22px 22px 0 0; }
  .bd-ws.float .bd-panel .bd-chat-h { cursor: default; }
  .bd-ws.float.panel-on .bd-canvas-in { padding-bottom: calc(var(--bd-h, 700px) * .52 + 8px); }
  .bd-mascot { width: 70px; height: 64px; border-radius: 20px; }
  .bd-tip { max-width: 220px; font-size: 12.5px; }
  .bd-ws.float .bd-views { top: 8px; }
  .bd-ws.float .bd-canvas-in { padding-top: 50px; }
  .bd-ws.float :is(.bd-ctx, .bd-3d-top, .vn-topw) { top: 50px; }
  .bd-ws.float .bd-ctx { bottom: auto; left: 8px; right: 8px; width: auto; max-height: 34%; }
  .bd-ws.float.panel-on .bd-canvas-in { padding-bottom: calc(var(--bd-h, 700px) * .52 + 74px); }
  .bd-ws.float:not(.panel-on) .bd-canvas-in { padding-bottom: 80px; }
  .bd-progs { top: 50px; }
}
.bd-rform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bd-rform label { display: grid; gap: 3px; } .bd-rform small { color: var(--bd-mute); font-size: 11.5px; }
.bd-rform input { height: 40px; border: 0; border-radius: 12px; padding: 0 10px; background: #F1F3F4; font: 500 14.5px var(--font); min-width: 0; } .bd-rform input:focus { outline: 2px solid var(--bd-blue); background: #fff; }
.bd-rgrid .mine em { color: #1D4ED8; font-style: normal; font-size: 10.5px; }
.bd-rules .bd-ctx-h .bd-ib { width: 32px; height: 32px; margin-left: auto; }
.bd-zoomwrap { position: relative; flex: 1; min-height: 240px; overflow: hidden; touch-action: none; border-radius: 16px; }
.bd-zoomwrap > .bd-plan { position: absolute; inset: 0; transform-origin: 0 0; min-height: 0; }
.bd-zoomwrap.zoomed { cursor: grab; } .bd-zoomwrap.panning { cursor: grabbing; }
.bd-zoomwrap .bd-zoom { right: 8px; bottom: 8px; }
.bd-pop { overscroll-behavior: contain; }
@media (max-width: 820px) { .bd-ws.float .bd-pop { position: absolute; left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; max-height: min(60vh, calc(100% - 16px)) !important; } }
/* the results bar, in labelled groups */
.bd-rs-tb { gap: 8px 12px; align-items: flex-end; }
.bd-tbg { display: grid; gap: 3px; } .bd-tbg > small { padding-left: 4px; color: var(--bd-mute); font: 600 12px/1 var(--font); letter-spacing: 0; }
.bd-tbg .bd-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.bd-sec-r { width: 140px; accent-color: var(--bd-blue); }
.bd-res-grp { display: grid; gap: 6px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: var(--bd-sh); }
.bd-res-grp h4 { margin: 0; font: 700 13px var(--display); color: var(--bd-mute); }

@media (min-width: 1000px) { .price-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }   /* v1.40.0: five cards */
/* v1.40.0: the results fold into one column when the free part of the board is narrow */
.bd-ws.float .bd-canvas-in.bd-docv { container-type: inline-size; }
@container (max-width: 880px) {
  .bd-rs { grid-template-columns: minmax(0, 1fr); overflow-y: auto; align-content: start; }
  .bd-rs-pic, .bd-rs-side { min-height: auto; overflow: visible; }
  .bd-rs-area { min-height: 440px; }
}
@media (max-width: 820px) { .bd-zoomwrap { min-height: 100px; } .bd-ws.float.panel-on .bd-plan { min-height: 0; } .bd-ws:not(.panel-on) .bd-plan-w > .bd-zoomwrap { min-height: 320px; } .bd-zoomwrap .bd-zoom { grid-auto-flow: column; } }   /* v1.54.0: phones keep the plan large and the zoom buttons in a row */

/* ===== v1.42.0: the results, top-down ===== */
.bd-rp-side { gap: 10px; }
.bd-rp-top { display: grid; gap: 10px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: var(--bd-sh); }
.bd-rp-h { display: grid; gap: 2px; } .bd-rp-h b { font: 800 17px/1.2 var(--display); } .bd-rp-h small { color: var(--bd-mute); font-size: 12px; }
.bd-rp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.bd-rp-card { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; padding: 10px; border: 0; border-radius: 14px; background: #F8F9FA; color: var(--bd-ink); text-align: left; cursor: pointer; font: inherit; }
.bd-rp-card:hover { background: #F1F3F4; }
.bd-rp-card i { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #E8F0FE; color: #1A73E8; } .bd-rp-card i .tt-ic { width: 16px; height: 16px; }
.bd-rp-card.ok i { background: #E6F4EA; color: #188038; } .bd-rp-card.no i { background: #FCE8E6; color: #C5221F; }
.bd-rp-card b { font: 700 13.5px/1.25 var(--font); } .bd-rp-card small { color: var(--bd-mute); font-size: 11px; line-height: 1.3; }
.bd-rp-note { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; padding: 8px 10px; border-radius: 12px; background: #FEF7E0; color: #8A5300; font-size: 12px; } .bd-rp-note .tt-ic { width: 16px; height: 16px; } .bd-rp-note span { flex: 1 1 200px; }
.bd-rp { border-radius: 16px; background: #fff; box-shadow: var(--bd-sh); overflow: hidden; }
.bd-rp > summary { list-style: none; display: grid; gap: 2px; padding: 11px 36px 11px 14px; cursor: pointer; position: relative; }
.bd-rp > summary::-webkit-details-marker { display: none; }
.bd-rp > summary::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--bd-mute); border-bottom: 2px solid var(--bd-mute); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.bd-rp[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.bd-rp > summary b { font: 700 14px/1.3 var(--display); } .bd-rp > summary small { color: var(--bd-mute); font-size: 11.5px; }
.bd-rp > :not(summary) { margin: 0 12px 12px; }
.bd-rp .bd-rp { box-shadow: none; background: #F8F9FA; margin: 0 0 6px; } .bd-rp .bd-rp > summary { padding: 8px 32px 8px 10px; } .bd-rp .bd-rp > summary b { font: 600 13px var(--font); }
.bd-rp-g { margin: 10px 2px 4px; font: 500 12px var(--font); letter-spacing: 0; color: var(--bd-mute); }
.bd-rp-tw { overflow-x: auto; }
.bd-rp-t { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bd-rp-t th { text-align: right; font: 600 11px var(--font); color: var(--bd-mute); padding: 4px 6px; white-space: nowrap; } .bd-rp-t th:first-child { text-align: left; }
.bd-rp-t td { text-align: right; padding: 6px; border-top: 1px solid #F1F3F4; white-space: nowrap; } .bd-rp-t td:first-child { text-align: left; white-space: normal; }
.bd-rp-t td:first-child b { display: block; font-weight: 600; } .bd-rp-t td:first-child small { color: var(--bd-mute); font-size: 11px; }
.bd-rp-row { cursor: pointer; } .bd-rp-row:hover, .bd-rp-row.on { background: #F1F6FE; }
.bd-rp-det > td { background: #FAFBFD; padding: 8px !important; white-space: normal !important; }
.bd-rp-mt { overflow-x: auto; } .bd-rp-mt table { border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; width: 100%; }
.bd-rp-mt th, .bd-rp-mt td { padding: 3px 4px; text-align: right; white-space: nowrap; } .bd-rp-mt tbody th { text-align: left; font-weight: 600; color: var(--bd-ink); } .bd-rp-mt thead th { color: var(--bd-mute); font-weight: 600; }
.bd-rp-mt td.u { color: var(--bd-mute); text-align: left; }
.bd-rp-n { color: var(--bd-mute); font-size: 12px; }
.bd-rp-side .bd-rs-kpi > div { box-shadow: none; background: #F8F9FA; }
/* the rating spans the top of the results, above the drawing and the report */
.bd-rs.bd-rs3 { grid-template-rows: auto minmax(0, 1fr); }
.bd-rs3 > .bd-rp-topw { grid-column: 1 / -1; }
.bd-rp-topw .bd-rp-cards { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@container (max-width: 880px) { .bd-rs.bd-rs3 { grid-template-rows: none; } }
@media (max-width: 1180px) { .bd-rs.bd-rs3 { grid-template-rows: none; } }
/* v1.42.0 · phones: with a chat open the board ends above the figures, so nothing it holds slips under the chat */
@media (max-width: 820px) {
  .bd-ws.float.panel-on .bd-canvas-in { padding-bottom: 8px; flex: none; height: calc(var(--bd-h, 700px) * .48 - 76px); }
  .bd-ws.float.panel-on .bd-canvas-in.bd-docv { overflow-y: auto; }
}
@media (max-width: 820px) { .bd-ws.float.panel-on .bd-docv .bd-plan-w { flex: none; min-height: auto; } .bd-ws.float.panel-on .bd-docv .bd-zoomwrap { flex: none; height: 280px; } }
@media (max-width: 820px) { .bd-ws.float .bd-pop { position: fixed; z-index: 45; left: 8px !important; right: 8px; top: 70px !important; bottom: auto; width: auto; max-height: min(64vh, calc(100vh - 160px)) !important; } }
.bd-rp-side > * { flex: none; }   /* the report scrolls; its sections never squeeze */
.bd-rp-t td:first-child { min-width: 118px; }

/* ===== v1.43.0 ===== */
/* the studio never scrolls the page: only its own panels scroll */
html.bd-lock, body.bd-lock { overflow: hidden; overscroll-behavior: none; height: 100%; }
body.bd-lock .gate.bd-host > .app-foot { display: none; }
/* the site and rules card: a close button, and a pill to open it again */
.bd-ctx-in { display: grid; gap: 10px; min-width: 0; }
.bd-ctx-x { position: sticky; top: 0; justify-self: end; margin: -6px -6px -34px 0; width: 32px; height: 32px; z-index: 1; background: rgba(255,255,255,.9); }
.bd-ctx[hidden], .bd-ctx-pill[hidden] { display: none !important; }
.bd-ctx-pill { position: absolute; z-index: 2; top: 58px; left: calc(var(--il, 0px) + 12px); display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.96); color: var(--bd-ink); box-shadow: var(--bd-sh); font: 600 13px var(--font); cursor: pointer; }
.bd-ctx-pill .tt-ic { width: 18px; height: 18px; color: var(--bd-blue); }
@media (max-width: 820px) { .bd-ctx-pill { top: 50px; left: 8px; } }
/* Exit in the top bar */
.tb-exit .tt-ic, .tb-exit svg { width: 18px; height: 18px; }
.bd-ctx-in > :first-child { padding-right: 34px; }

/* ===== v1.44.0: results laid out like a map app ===== */
.bd-rsm { position: relative; flex: 1; min-width: 0; min-height: 0; --sw: 400px; }
.bd-mapv { position: absolute; inset: 44px 0 0 0; border-radius: 18px; overflow: hidden; background: #EEF2F6; }
.bd-mapv .bd-rs-area { position: absolute; inset: 0; min-height: 0; gap: 0; }
.bd-mapv .bd-rs-3d { position: absolute; inset: 0; min-height: 0; border-radius: 0; }
.bd-mapv .bd-zoomwrap { position: absolute; inset: 0; border-radius: 0; background: #fff; }
.bd-mapv .bd-plan-leg { position: absolute; z-index: 3; left: 10px; bottom: 10px; width: min(300px, calc(100% - 90px)); box-shadow: var(--bd-sh); }
.bd-mapv.time-on .bd-plan-leg { bottom: 64px; }
.bd-mhint { position: absolute; z-index: 3; top: 10px; left: 50%; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: rgba(32,33,36,.78); color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none; transition: opacity .6s; }
.bd-mhint.fade { opacity: 0; }
/* the rating row */
.bd-rstrip { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 38px; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.bd-rstrip::-webkit-scrollbar { display: none; }
.bd-rstrip-l { flex: none; font: 500 12px var(--font); letter-spacing: 0; color: var(--bd-mute); padding: 0 4px 0 6px; }
.bd-rchip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.22); color: var(--bd-ink); font: 600 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.bd-rchip:hover { background: #F8F9FA; }
.bd-rchip i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #E8F0FE; color: #1A73E8; } .bd-rchip i .tt-ic { width: 14px; height: 14px; }
.bd-rchip.ok i { background: #E6F4EA; color: #188038; } .bd-rchip.no i { background: #FCE8E6; color: #C5221F; } .bd-rchip.warn { background: #FEF7E0; color: #8A5300; } .bd-rchip.warn i { background: #FDE293; color: #8A5300; }
/* the square buttons */
.bd-mtools { position: absolute; z-index: 5; top: 10px; right: 10px; display: grid; gap: 8px; justify-items: end; transition: right .2s; }
.bd-mt { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 10px; background: #fff; color: #3C4043; box-shadow: 0 1px 4px rgba(60,64,67,.3); cursor: pointer; }
.bd-mt:hover { background: #F8F9FA; } .bd-mt.on { background: #E8F0FE; color: #1967D2; } .bd-mt .tt-ic { width: 20px; height: 20px; } .bd-mt b { font: 800 13px var(--display); }
.bd-mt-floors { display: grid; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(60,64,67,.3); }
.bd-mt-floors button { width: 42px; height: 34px; border: 0; background: transparent; font: 700 12.5px var(--font); color: #3C4043; cursor: pointer; } .bd-mt-floors button.on { background: #1A73E8; color: #fff; }
.bd-mpop { position: absolute; z-index: 6; top: 10px; right: 62px; width: 250px; max-height: calc(100% - 20px); overflow-y: auto; display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(60,64,67,.28); transition: right .2s; }
.bd-mpop-x { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; }
.bd-mpop-s { display: grid; gap: 4px; } .bd-mpop-s > small { font: 500 12px var(--font); letter-spacing: 0; color: var(--bd-mute); padding-right: 28px; }
.bd-mpop-o { display: grid; gap: 2px; }
.bd-mpop-o button { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--bd-ink); font: 500 13px var(--font); text-align: left; cursor: pointer; }
.bd-mpop-o button:hover { background: #F1F3F4; } .bd-mpop-o button.on { background: #E8F0FE; color: #1967D2; font-weight: 600; }
.bd-mpop .bd-sec-r { width: 100%; }
/* the time scale along the bottom */
.bd-mtime { position: absolute; z-index: 4; left: 50%; bottom: 10px; transform: translateX(-50%); width: min(560px, calc(100% - 20px)); display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: 0 2px 8px rgba(60,64,67,.25); }
.bd-mtime > .tt-ic { flex: none; width: 18px; height: 18px; color: #F29900; }
.bd-mtime-m { flex: none; display: flex; gap: 1px; } .bd-mtime-m button { width: 20px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; font: 600 11px var(--font); color: var(--bd-mute); cursor: pointer; } .bd-mtime-m button.on { background: #202124; color: #fff; }
.bd-mtime input[type=range] { flex: 1; min-width: 60px; accent-color: #F29900; }
.bd-mtime > b { flex: none; font: 700 12px var(--font); white-space: nowrap; }
/* the report sheet */
.bd-rsheet { position: absolute; z-index: 7; top: 44px; right: 0; bottom: 0; width: var(--sw); max-width: calc(100% - 70px); display: flex; flex-direction: column; border-radius: 18px; background: #F8F9FA; box-shadow: -2px 0 14px rgba(60,64,67,.22); overflow: hidden; }
.bd-rsheet[hidden] { display: none; }
.bd-rsheet-h { flex: none; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 10px 8px 8px 14px; background: #fff; }
.bd-rsheet-h b { font: 800 16px var(--display); } .bd-rsheet-h small { grid-column: 1; color: var(--bd-mute); font-size: 11.5px; } .bd-rsheet-h .bd-ib { grid-row: 1 / span 2; grid-column: 2; }
.bd-rsheet .bd-rp-side { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.bd-rsm.sheet-on .bd-mtools { right: calc(var(--sw) + 10px); }
.bd-rsm.sheet-on .bd-mpop { right: calc(var(--sw) + 62px); }
.bd-rsm.sheet-on .bd-mtime { left: calc((100% - var(--sw)) / 2); width: min(520px, calc(100% - var(--sw) - 20px)); }
@media (max-width: 820px) {
  .bd-mapv { inset: 42px 0 0 0; border-radius: 14px; }
  .bd-mt { width: 38px; height: 38px; } .bd-mt-floors button { width: 38px; }
  .bd-mpop { right: 56px; width: min(240px, calc(100% - 70px)); }
  .bd-rsheet { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: 55%; border-radius: 18px 18px 0 0; }
  .bd-rsm.sheet-on .bd-mtools { right: 10px; } .bd-rsm.sheet-on .bd-mpop { right: 56px; } .bd-rsm.sheet-on .bd-mtime { left: 50%; width: calc(100% - 20px); }
  .bd-mtime { gap: 6px; padding: 6px 8px; flex-wrap: wrap; } .bd-mtime-m button { width: 18px; }
  .bd-mapv.time-on .bd-plan-leg { bottom: 92px; }
}
/* the render card: a close button, and a Render button on the board to open it again */
.vn-sheet[hidden], .vn-openb[hidden] { display: none !important; }
.vn-head { position: relative; } .vn-min { position: absolute; top: -4px; right: -6px; width: 32px; height: 32px; }
.vn-openb { background: #1D4ED8 !important; color: #fff !important; }
/* the month and the hour sit on one level line */
.vn-sheet .vn-light { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.vn-sheet .vn-light select.vn-mon { -webkit-appearance: none; appearance: none; position: static !important; transform: none !important; flex: none; height: 32px !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px !important; line-height: 32px !important; border: 0 !important; border-radius: 999px !important; background: #F1F3F4 !important; box-shadow: none !important; font: 600 12.5px var(--font) !important; color: #3C4043; width: auto !important; vertical-align: middle; }
.vn-sheet .vn-sun { display: block; margin-top: -2px; }
.vn-sheet .vn-figbox { width: 70px; height: 100px; } .vn-sheet .vn-head { grid-template-columns: 70px 1fr; }
.bd-zone-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -4px; }
.bd-zone-pick small { flex: 1 1 140px; color: var(--bd-mute); font-size: 11.5px; }
.bd-zone-pick select { height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: #F1F3F4; font: 600 12.5px var(--font); color: var(--bd-ink); }
/* drawing the site boundary */
.bd-vtx { width: 16px !important; height: 16px !important; border-radius: 50%; background: #fff; border: 3px solid #1A73E8; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: grab; }
.bd-vmid { display: grid; place-items: center; width: 18px !important; height: 18px !important; border-radius: 50%; background: rgba(26,115,232,.85); color: #fff; font: 700 13px/1 var(--font); cursor: copy; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.bd-pk-col { display: grid; gap: 8px; }
.bd-mapv .bd-pop { z-index: 9; }
.bd-mapv .bd-mhint { right: auto; bottom: auto; width: auto; height: auto; color: #fff; }
.bd-zone-pick select { width: auto; flex: none; }
@media (max-width: 820px) { .bd-ws.float .bd-pop { top: 118px !important; max-height: calc(100vh - 220px) !important; } }

/* ===== v1.45.0 ===== */
/* Bonda and Vinamra float on a layer above everything, with no line under them */
.bd-mascot { z-index: 60; }
.bd-mascot::after, .bd-mascot.on::after, .bd-mascot.vin.on::after { display: none !important; content: none !important; }
.bd-mascot.on { filter: drop-shadow(0 6px 12px rgba(26,115,232,.35)); }
/* the ratings as seals on the drawing; the drawing takes the whole board */
.bd-mapv { inset: 0 !important; }
.bd-rsheet { top: 0 !important; }
.bd-rstrip { top: 10px; left: 10px; right: 70px; height: auto; align-items: flex-start; gap: 4px; overflow-x: auto; overflow-y: visible; padding-bottom: 4px; pointer-events: none; }
.bd-rstrip > * { pointer-events: auto; }
.bd-rsm.sheet-on .bd-rstrip { right: calc(var(--sw) + 64px); }
.bd-seal { flex: none; width: 82px; display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; color: #1A73E8; }
.bd-seal.ok { color: #188038; } .bd-seal.no { color: #C5221F; } .bd-seal.warn { color: #B06000; }
.bd-seal-g { position: relative; width: 58px; height: 58px; display: grid; place-items: center; filter: drop-shadow(0 2px 3px rgba(60,64,67,.35)); transition: transform .15s; }
.bd-seal:hover .bd-seal-g { transform: scale(1.06) rotate(-4deg); }
.bd-seal-g svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-seal-g b { position: relative; font: 800 13px/1 var(--display); color: currentColor; letter-spacing: -.01em; text-align: center; max-width: 40px; }
.bd-seal-g b.sm { font-size: 9.5px; line-height: 1.05; }
.bd-seal-g .tt-ic { position: relative; width: 20px; height: 20px; }
.bd-seal small { max-width: 82px; padding: 2px 6px; border-radius: 8px; background: rgba(255,255,255,.92); color: var(--bd-ink); font: 600 10px/1.2 var(--font); text-align: center; box-shadow: 0 1px 2px rgba(60,64,67,.2); }
.bd-mapv .bd-mhint { top: auto; bottom: 64px; }
@media (max-width: 820px) { .bd-seal { width: 64px; } .bd-seal-g { width: 46px; height: 46px; } .bd-seal-g b { font-size: 11px; max-width: 32px; } .bd-seal-g b.sm { font-size: 8px; } .bd-seal small { font-size: 9px; max-width: 64px; } .bd-rstrip { right: 56px; } }

/* v1.46.0 · Bonda's next-step guide, above the suggested answers */
.bd-next { flex: none; display: grid; gap: 6px; margin: 0 12px 8px; padding: 8px 12px; background: #F1F6FE; border-radius: 14px; }
.bd-next[hidden] { display: none; }
.bd-next-t { display: grid; gap: 2px; }
.bd-next-t small { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0; color: #5F6B7A; font-weight: 600; }
.bd-next-t > span { font-size: 12.5px; line-height: 1.35; color: #1F2933; }
.bd-next-a { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-next-a .bd-chip { background: #fff; padding-top: 6px; padding-bottom: 6px; }
.bd-next-p { flex: 1; height: 4px; border-radius: 2px; background: #DCE6F5; overflow: hidden; }
.bd-next-p i { display: block; height: 100%; background: #1A73E8; border-radius: 2px; transition: width .3s ease; }
.bd-ws.big .bd-next { display: none; }

/* v1.48.0 · travel: change a place like the start and destination fields of a maps app */
.jm-edit { display: grid; gap: 8px; margin: 2px 0 10px; }
.jm-efield { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 6px 0 10px; border-radius: 24px; background: #F1F3F4; }
.jm-efield:focus-within { background: #fff; box-shadow: 0 0 0 2px #1A73E8 inset; }
.jm-efield input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 15px/1 var(--font); color: var(--ink); height: 100%; }
.jm-efield .jm-dot.sm { position: static; width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #1A73E8; color: #fff; }
.jm-efield .jm-dot.sm svg { width: 15px; height: 15px; }
.jm-eb { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: #1A73E8; display: grid; place-items: center; cursor: pointer; }
.jm-eb:hover { background: #E8F0FE; } .jm-eb svg { width: 20px; height: 20px; }
.jm-ehits { display: grid; gap: 2px; } .jm-ehits:empty { display: none; }
.jm-ehits button { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 0; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.jm-ehits button:hover { background: #F1F3F4; } .jm-ehits button svg { width: 18px; height: 18px; flex: none; color: #5F6368; margin-top: 2px; }
.jm-ehits span { display: grid; gap: 2px; } .jm-ehits b { font-weight: 600; font-size: 14px; } .jm-ehits small { color: #5F6368; font-size: 12px; }
.jm-eacts { display: flex; flex-wrap: wrap; gap: 8px; }
.jm-chipb { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: #E8F0FE; color: #1A73E8; font: 600 13px/1 var(--font); cursor: pointer; }
.jm-chipb svg { width: 16px; height: 16px; }

/* v1.48.0 · the scorecard: ratings, embodied carbon and energy, cost, in the bottom-left corner of the drawing */
.bd-rstrip { display: none !important; }
.bd-score-dock { position: absolute; z-index: 6; left: 10px; bottom: 10px; pointer-events: none; max-width: calc(100% - 80px); }
.bd-score-dock > * { pointer-events: auto; }
.bd-mapv.time-on ~ .bd-score-dock, .bd-rsm:has(.bd-mapv.time-on) .bd-score-dock { bottom: 64px; }
.bd-mapv .bd-plan-leg { left: auto; right: 64px; }
.bd-score { width: 330px; max-width: 100%; display: grid; gap: 8px; padding: 10px 12px 12px; border-radius: 20px; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--bd-sh); }
.bd-score.min { width: auto; padding: 6px 8px 6px 12px; gap: 4px; }
.bd-sc-h { display: flex; align-items: center; gap: 8px; } .bd-sc-h b { font: 700 13px var(--display); letter-spacing: .02em; color: var(--bd-ink); }
.bd-sc-h small { flex: 1; color: var(--bd-mute); font-size: 11px; } .bd-score.min .bd-sc-h b { flex: 1; } .bd-sc-h .bd-ib { width: 30px; height: 30px; } .bd-sc-h .bd-ib svg { width: 16px; height: 16px; }
.bd-sc-seals { display: flex; gap: 2px; justify-content: space-between; }
.bd-sc-seals .bd-seal { width: 62px; } .bd-sc-seals .bd-seal-g { width: 48px; height: 48px; } .bd-sc-seals .bd-seal-g b { font-size: 11.5px; } .bd-sc-seals .bd-seal-g b.sm { font-size: 8.5px; }
.bd-sc-seals .bd-seal small { font-size: 9.5px; line-height: 1.15; color: var(--bd-ink); text-align: center; }
.bd-score.min .bd-sc-seals .bd-seal { width: 44px; } .bd-score.min .bd-sc-seals .bd-seal-g { width: 40px; height: 40px; } .bd-score.min .bd-sc-seals .bd-seal small { display: none; }
.bd-sc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bd-sc-t { display: grid; gap: 4px; justify-items: start; padding: 8px; border: 0; border-radius: 14px; background: #F4F6F9; cursor: pointer; text-align: left; font: inherit; color: var(--bd-ink); transition: background .15s; }
.bd-sc-t:hover { background: #E8F0FE; }
.bd-sc-t i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: #fff; } .bd-sc-t i svg { width: 15px; height: 15px; }
.bd-sc-t.co2 i { background: #188038; } .bd-sc-t.mj i { background: #E37400; } .bd-sc-t.cost i { background: #1A73E8; }
.bd-sc-t span { display: grid; gap: 1px; } .bd-sc-t small { font-size: 10px; color: var(--bd-mute); } .bd-sc-t b { font: 700 13.5px/1.15 var(--display); } .bd-sc-t em { font-style: normal; font-size: 10px; color: var(--bd-mute); }
.bd-sc-a { display: flex; flex-wrap: wrap; gap: 6px; } .bd-sc-a .bd-chip { min-height: 30px; padding: 4px 10px; font-size: 12px; } .bd-sc-a .bd-chip svg { width: 15px; height: 15px; }
.bd-sc-time { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #174EA6; font-weight: 600; } .bd-sc-time svg { width: 14px; height: 14px; }
/* how a badge was rated, and bars of what weighs most */
.bd-how { display: grid; gap: 4px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #F4F6F9; }
.bd-how b { font-size: 12px; } .bd-how ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12px; line-height: 1.4; color: #3C4043; }
.bd-bars { display: grid; gap: 5px; margin: 8px 0 2px; } .bd-bars > div { display: grid; grid-template-columns: 120px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.bd-bars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bd-bars i { height: 8px; border-radius: 4px; background: #1A73E8; } .bd-bars b { font-size: 12px; }
/* a big window over the board */
.bd-big { position: absolute; z-index: 65; inset: 12px; display: flex; flex-direction: column; border-radius: 22px; background: #fff; box-shadow: 0 2px 6px rgba(60,64,67,.2), 0 24px 60px -16px rgba(30,60,120,.4); overflow: hidden; }
.bd-big-h { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 12px 10px 20px; }
.bd-big-h > div:first-child { flex: 1; min-width: 0; display: grid; } .bd-big-h b { font: 700 17px var(--display); } .bd-big-h small { color: var(--bd-mute); font-size: 12px; }
.bd-big-a { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.bd-big-b { flex: 1; min-height: 0; overflow: auto; padding: 0 20px 20px; }
.bd-boq-set { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 8px; }
.bd-boq-set label { display: grid; gap: 3px; } .bd-boq-set small { font-size: 11px; color: var(--bd-mute); }
.bd-boq-set input { height: 38px; border: 0; border-radius: 10px; padding: 0 10px; background: #F1F3F4; font: 500 13.5px var(--font); min-width: 0; width: 230px; }
.bd-boq-basis { display: block; margin: 4px 0 10px; color: var(--bd-mute); font-size: 12px; }
.bd-boq-t table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bd-boq-t th { position: sticky; top: 0; background: #fff; text-align: left; font-size: 11px; color: var(--bd-mute); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--bd-line); }
.bd-boq-t td { padding: 7px 6px; border-bottom: 1px solid #F1F3F4; vertical-align: top; } .bd-boq-t td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-boq-t td.it { display: grid; gap: 2px; min-width: 260px; } .bd-boq-t td.it small { color: var(--bd-mute); font-size: 11px; } .bd-boq-t td.it em { font-style: normal; font-size: 11px; color: #80868B; }
.bd-boq-t input { width: 96px; height: 30px; border: 0; border-radius: 8px; padding: 0 8px; background: #F1F3F4; text-align: right; font: 600 12.5px var(--font); }
.bd-boq-t tr.src-local td:first-child, .bd-boq-t tr.src-user td:first-child { box-shadow: inset 3px 0 #1A73E8; } .bd-boq-t tr.src-local input, .bd-boq-t tr.src-user input { background: #E8F0FE; color: #174EA6; }
.bd-boq-t tr.src-est td.it small { color: #B06000; }
.bd-boq-t tfoot td { border-top: 2px solid var(--bd-line); padding-top: 10px; }
/* drawings */
.bd-dwg { display: grid; grid-template-columns: 230px 1fr; gap: 14px; padding-bottom: 14px; }
.bd-dwg-l { display: grid; gap: 4px; align-content: start; } .bd-dwg-l button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 12px; background: none; text-align: left; font: 500 13.5px var(--font); color: var(--bd-ink); cursor: pointer; }
.bd-dwg-l button:hover { background: #F1F3F4; } .bd-dwg-l button.on { background: #E8F0FE; color: #174EA6; font-weight: 600; } .bd-dwg-l svg { width: 18px; height: 18px; flex: none; }
.bd-dwg-v { position: relative; min-height: 0; border-radius: 16px; background: #F4F6F9; overflow: hidden; }
.bd-dwg-v .bd-zoomwrap { position: absolute; inset: 0; background: #fff; }
.bd-dwg-svg { position: absolute; inset: 0; box-sizing: border-box; padding: 14px 64px 14px 14px; transform-origin: 0 0; }
.bd-dwg-svg svg { display: block; width: 100%; height: 100%; }
.bd-sec-dwg { margin-top: 8px; }
@media (max-width: 820px) {
  .bd-score-dock { left: 8px; bottom: 8px; max-width: calc(100% - 64px); }
  .bd-score { width: 300px; } .bd-sc-tiles { grid-template-columns: 1fr 1fr 1fr; } .bd-sc-t b { font-size: 12px; }
  .bd-big { inset: 0; border-radius: 0; z-index: 70; } .bd-big-h { flex-wrap: wrap; } .bd-big-b { padding: 0 12px 16px; }
  .bd-dwg { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .bd-dwg-l { grid-auto-flow: column; overflow-x: auto; } .bd-dwg-l button { white-space: nowrap; }
  .bd-mapv .bd-plan-leg { right: 56px; width: min(220px, calc(100% - 120px)); }
  .bd-mapv.time-on ~ .bd-score-dock { bottom: 92px; }
}
.bd-speed { display: flex; align-items: center; gap: 14px; margin: 16px 0 4px; padding: 16px 20px; border-radius: 22px; background: linear-gradient(100deg, #E8F0FE, #FFF6DC); box-shadow: var(--bd-sh); }
.bd-speed i { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: #1A73E8; color: #fff; } .bd-speed i svg { width: 24px; height: 24px; }
.bd-speed span { display: grid; gap: 2px; } .bd-speed b { font: 700 18px/1.25 var(--display); color: #123F63; } .bd-speed small { color: #3C4043; font-size: 13px; }

/* v1.48.0 · a compact scorecard */
.bd-score { width: 316px; gap: 6px; padding: 8px 10px 10px; }
.bd-sc-t { grid-template-columns: 20px 1fr; gap: 2px 6px; align-items: center; padding: 6px 7px; border-radius: 12px; }
.bd-sc-t i { width: 20px; height: 20px; border-radius: 6px; } .bd-sc-t i svg { width: 12px; height: 12px; }
.bd-sc-t span { display: contents; } .bd-sc-t small { font-size: 9.5px; line-height: 1.1; } .bd-sc-t b { grid-column: 1 / -1; font-size: 13px; } .bd-sc-t em { grid-column: 1 / -1; font-size: 9.5px; line-height: 1.15; }
.bd-sc-a { flex-wrap: nowrap; } .bd-sc-a .bd-chip { min-height: 28px; padding: 3px 9px; font-size: 11.5px; white-space: nowrap; }
.bd-sc-seals .bd-seal { width: 58px; } .bd-sc-seals .bd-seal-g { width: 44px; height: 44px; } .bd-sc-seals .bd-seal small { font-size: 9px; }
.bd-sc-time { font-size: 11px; }
.jm-efield input, .jm-efield input:focus { border: 0 !important; box-shadow: none !important; outline: 0 !important; padding: 0 !important; background: transparent !important; }
@media (max-width: 820px) {
  .bd-mapv.time-on ~ .bd-score-dock { bottom: 152px; }
  .bd-score-dock { bottom: 70px; }
  .bd-score.min .bd-sc-h b { font-size: 12px; }
}
.bd-score-dock { z-index: 4; }
@media (max-width: 820px) {
  .bd-big-h { padding: 12px 10px 8px 14px; }
  .bd-big-h > div:first-child { flex: 1 1 100%; }
  .bd-big-h small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bd-big-a { flex: 1 1 100%; justify-content: flex-start; }
  .bd-big-a > .bd-ib:last-child { position: absolute; top: 8px; right: 8px; }
  .bd-big-h { position: relative; padding-right: 52px; }
  .bd-dwg-v { min-height: 60vh; }
}
@media (max-width: 820px) {
  .bd-boq-set label { flex: 1 1 44%; } .bd-boq-set input { width: 100%; }
  .bd-boq-t th:nth-child(1), .bd-boq-t td:nth-child(1), .bd-boq-t th:nth-child(7), .bd-boq-t td:nth-child(7) { display: none; }
  .bd-boq-t td.it { min-width: 140px; } .bd-boq-t td.it em { display: none; } .bd-boq-t input { width: 70px; }
  .bd-boq-t table { font-size: 12px; } .bd-boq-t td, .bd-boq-t th { padding: 6px 4px; }
}

/* v1.49.0 · Structure: the frame on the left, the report on the right */
.bd-st { position: relative; flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: 1fr 380px; gap: 12px; }
.bd-st-pic { position: relative; min-height: 0; border-radius: 18px; background: #F4F6F9; overflow: hidden; }
.bd-st-svg, .bd-st-pic > svg { position: absolute; inset: 48px 8px 44px; width: calc(100% - 16px); height: calc(100% - 92px); }
.bd-st-m { cursor: pointer; } .bd-st-m:hover { stroke-width: .16; }
.bd-st-chips { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.bd-st-chips .bd-chip { flex: none; background: rgba(255,255,255,.95); box-shadow: var(--bd-sh); } .bd-st-chips .bd-chip.on { background: #1A73E8; color: #fff; }
.bd-st-leg { position: absolute; z-index: 3; left: 10px; bottom: 10px; display: grid; gap: 4px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.95); box-shadow: var(--bd-sh); font-size: 11.5px; }
.bd-st-leg small { color: var(--bd-mute); } .bd-st-lg { display: flex; gap: 10px; } .bd-st-lg span { display: inline-flex; align-items: center; gap: 5px; } .bd-st-lg i { width: 18px; height: 5px; border-radius: 3px; }
.bd-st-pop { position: absolute; z-index: 9; width: 310px; max-height: calc(100% - 20px); overflow: auto; }
.bd-st-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 4px 12px 2px; } .bd-st-side > * { flex: none; }
.bd-st-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bd-st-card { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: var(--bd-sh); }
.bd-st-card small { font-size: 11px; color: var(--bd-mute); } .bd-st-card b { font: 700 17px var(--display); } .bd-st-card span { font-size: 11px; color: #5F6368; }
.bd-st-card.bad b { color: #C5221F; }
.bd-st-side tr.bad td, .bd-st-side tr.bad th { color: #C5221F; } .bd-st-side td.u { font-weight: 700; } .bd-st-side tbody tr { cursor: pointer; }
.bd-st-warn { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: #FFF4E5; color: #7A4100; font-size: 12.5px; line-height: 1.4; } .bd-st-warn svg { width: 18px; height: 18px; flex: none; }
.bd-st-sug { display: flex; gap: 6px; align-items: center; margin: 6px 0 0; color: #B06000; font-weight: 600; font-size: 13px; } .bd-st-sug svg { width: 16px; height: 16px; }
.bd-st-intro { display: grid; align-content: start; gap: 14px; padding: 18px; border-radius: 20px; background: #fff; box-shadow: var(--bd-sh); overflow-y: auto; }
.bd-st-h { display: grid; gap: 6px; } .bd-st-h small { font: 500 12px var(--font); letter-spacing: 0; color: #B7791F; } .bd-st-h b { font: 700 20px var(--display); } .bd-st-h p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #3C4043; }
.bd-st-form { display: flex; flex-wrap: wrap; gap: 10px; } .bd-st-form label { display: grid; gap: 4px; } .bd-st-form small { font-size: 11px; color: var(--bd-mute); }
.bd-st-form input, .bd-st-form select { height: 40px; border: 0; border-radius: 10px; padding: 0 10px; background: #F1F3F4; font: 500 14px var(--font); width: 150px; }
.bd-st:has(.bd-st-intro) { grid-template-columns: minmax(300px, 440px) 1fr; }
@media (max-width: 820px) {
  .bd-st, .bd-st:has(.bd-st-intro) { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 52vh) auto; overflow-y: auto; }
  .bd-st:has(.bd-st-intro) { grid-template-rows: auto 300px; }
  .bd-st-side { overflow: visible; } .bd-st-pop { left: 8px !important; right: 8px; width: auto; top: 54px !important; }
}
@container (max-width: 760px) { .bd-st, .bd-st:has(.bd-st-intro) { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 55vh) auto; overflow-y: auto; } .bd-st-side { overflow: visible; } }
/* v1.50.0 · the IEQ view and the SuQ score */
.bd-iq { grid-template-columns: 1fr 400px; }
.bd-iq-pic { overflow-y: auto; }
.bd-iq-body { position: relative; display: grid; gap: 12px; padding: 58px 16px 16px; align-content: start; }
.bd-iq-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bd-iq-pick select { height: 40px; border: 0; border-radius: 12px; padding: 0 12px; background: #fff; box-shadow: var(--bd-sh); font: 600 14px var(--font); max-width: 100%; }
.bd-iq-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: #fff; box-shadow: var(--bd-sh); }
.bd-iq-seg button { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: none; font: 600 13px var(--font); color: #3C4043; cursor: pointer; }
.bd-iq-seg button .tt-ic { width: 16px; height: 16px; } .bd-iq-seg button.on { background: #1A73E8; color: #fff; }
.bd-iq-heat { background: #fff; border-radius: 16px; padding: 10px; box-shadow: var(--bd-sh); }
.bd-iq-heat svg { display: block; width: 100%; height: auto; } .bd-iq-heat rect { cursor: default; }
.bd-iq-cap { margin: 0; font-size: 13px; line-height: 1.5; color: #3C4043; }
.bd-iq-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #3C4043; }
.bd-iq-leg span { display: inline-flex; align-items: center; gap: 6px; } .bd-iq-leg i { width: 14px; height: 14px; border-radius: 4px; }
.bd-iq-suq { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: #fff; box-shadow: var(--bd-sh); }
.bd-iq-suq > div:last-child { display: grid; gap: 2px; min-width: 0; } .bd-iq-suq small { font-size: 11.5px; color: var(--bd-mute); } .bd-iq-suq b { font: 700 24px var(--display); } .bd-iq-suq span { font-size: 12px; color: #5F6368; }
.bd-iq-badge { flex: none; width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; align-content: center; color: #fff; }
.bd-iq-badge b { font: 800 30px/1 var(--display); color: #fff !important; } .bd-iq-badge small { font: 700 11px/1 var(--font); letter-spacing: .08em; color: rgba(255,255,255,.9) !important; }
.bd-iq-card { border: 0; text-align: left; cursor: pointer; font: inherit; } .bd-iq-card:hover { box-shadow: 0 2px 10px rgba(60,64,67,.22); }
.bd-iq-how { position: relative; }
.bd-iq-how p { margin: 6px 0; font-size: 13px; line-height: 1.5; }
.bd-iq tbody tr { cursor: pointer; }
.bd-iq-form { display: grid; gap: 12px; }
.bd-iq-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bd-iq-n { display: grid; gap: 4px; } .bd-iq-n small { font-size: 11px; color: var(--bd-mute); }
.bd-iq-n > div { display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 6px 0 10px; border-radius: 12px; background: #F1F3F4; }
.bd-iq-n .tt-ic { width: 20px; height: 20px; color: #5F6368; flex: none; }
.bd-iq-n input { width: 100%; min-width: 0; border: 0; background: none; text-align: center; font: 700 17px var(--display); -moz-appearance: textfield; } .bd-iq-n input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bd-iq-n button { flex: none; width: 34px; height: 34px; border: 0; border-radius: 10px; background: #fff; font: 700 18px/1 var(--font); cursor: pointer; box-shadow: 0 1px 2px rgba(60,64,67,.2); }
.bd-iq-togs { display: grid; gap: 8px; }
.bd-iq-t { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; } .bd-iq-t input { width: 20px; height: 20px; accent-color: #1A73E8; }
.bd-iq-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 18px; }
.bd-iq-tile { display: grid; gap: 6px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: var(--bd-sh); }
.bd-iq-tile i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #E6F4EA; color: #137333; } .bd-iq-tile .tt-ic { width: 22px; height: 22px; }
.bd-iq-tile b { font: 700 16px var(--display); } .bd-iq-tile span { font-size: 13px; line-height: 1.45; color: #5F6368; }
@media (max-width: 820px) {
  .bd-iq { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; }
  .bd-iq-pic { overflow: visible; } .bd-iq-body { padding: 54px 8px 10px; }
  .bd-iq-heat { padding: 6px; } .bd-iq-seg button { padding: 0 8px; }
}
@container (max-width: 760px) { .bd-iq { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; } .bd-iq-pic { overflow: visible; } }
.bd-iq .bd-iq-pick select { width: auto; flex: 0 1 auto; min-width: 0; }
.bd-st.bd-iq { grid-template-columns: minmax(0, 1fr) 400px; }
.bd-iq > * { min-width: 0; }
@media (max-width: 820px) {
  .bd-st.bd-iq { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overflow-x: hidden; }
  .bd-st.bd-iq > .bd-iq-pic { flex: none; min-height: 0; overflow: visible; }
  .bd-st.bd-iq > .bd-st-side { flex: none; overflow: visible; }
  .bd-iq .bd-st-chips { right: 8px; }
}
@container (max-width: 760px) {
  .bd-st.bd-iq { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overflow-x: hidden; }
  .bd-st.bd-iq > .bd-iq-pic { flex: none; min-height: 0; overflow: visible; }
  .bd-st.bd-iq > .bd-st-side { flex: none; overflow: visible; }
}
@media (max-width: 820px) {
  .bd-st.bd-iq-in { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overflow-x: hidden; }
  .bd-st.bd-iq-in > * { flex: none; overflow: visible; min-height: 0; }
}
@container (max-width: 760px) {
  .bd-st.bd-iq-in { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; overflow-x: hidden; }
  .bd-st.bd-iq-in > * { flex: none; overflow: visible; min-height: 0; }
}
/* v1.51.0 · the IEQ results on the plan and in 3D */
.bd-iq-modes button .tt-ic { width: 16px; height: 16px; }
.bd-iq-stage { position: relative; height: clamp(320px, 56vh, 640px); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--bd-sh); }
.bd-iq-stage > .bd-zoomwrap, .bd-iq-stage > .bd-3d { position: absolute; inset: 0; border-radius: 16px; }
.bd-iq-time { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; border-radius: 14px; background: #fff; box-shadow: var(--bd-sh); }
.bd-iq-time > .tt-ic { flex: none; width: 18px; height: 18px; color: #F29900; }
.bd-iq-mon { flex: none; display: flex; gap: 1px; } .bd-iq-mon button { width: 22px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; font: 600 11.5px var(--font); color: var(--bd-mute); cursor: pointer; } .bd-iq-mon button.on { background: #202124; color: #fff; }
.bd-iq-time input[type=range] { flex: 1; min-width: 60px; width: auto; padding: 0; background: none; accent-color: #F29900; }
.bd-iq-time > b { flex: none; font: 700 12.5px var(--font); white-space: nowrap; }
@media (max-width: 820px) {
  .bd-iq-stage { height: 62vh; }
  .bd-iq-time { flex-wrap: wrap; gap: 6px; padding: 8px; } .bd-iq-mon { flex: 1 1 100%; justify-content: space-between; } .bd-iq-mon button { width: auto; flex: 1; }
}
.bd-iq .bd-rp-mt thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.bd-iq .bd-rp-mt tbody th { white-space: normal; min-width: 92px; }
/* v1.51.0: report tables fit the side sheet (headers wrap, tighter cells) */
.bd-rp-t th { white-space: normal; vertical-align: bottom; line-height: 1.2; padding: 4px; }
.bd-rp-t td { padding: 6px 4px; }
.bd-rp-t td:first-child { min-width: 92px; }
/* v1.51.0: the structure view's chips wrap onto two rows instead of running off the edge */
@media (min-width: 821px) {
  .bd-st:not(.bd-iq) .bd-st-chips { flex-wrap: wrap; overflow: visible; }
  .bd-st:not(.bd-iq) .bd-st-svg, .bd-st:not(.bd-iq) .bd-st-pic > svg { inset: 96px 8px 44px; height: calc(100% - 140px); }
}
/* v1.51.0: the project's address under its name wraps to a second line instead of being cut */
.bd-chat-t small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
/* v1.51.0: the IEQ topic chips sit above the picture and wrap: none is cut off at the edge */
.bd-iq .bd-iq-pic > .bd-st-chips { position: static; flex-wrap: wrap; overflow: visible; padding: 12px 16px 0; }
.bd-iq .bd-iq-body { padding-top: 12px; }
@media (max-width: 820px) { .bd-iq .bd-iq-pic > .bd-st-chips { padding: 10px 8px 0; } .bd-iq .bd-iq-body { padding-top: 10px; } }
@media (max-width: 820px) {
  .bd-score-dock { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .bd-score-dock > .bd-plan-leg.in-dock { position: static; width: min(300px, calc(100vw - 96px)); pointer-events: auto; box-shadow: var(--bd-sh); }
}

/* v1.51.0: on a phone the results plan sits above the legend and scorecard dock */
@media (max-width: 820px) { .bd-rsm .bd-mapv .bd-zoomwrap > .bd-plan { bottom: var(--dockh, 0px); } }
@media (max-width: 820px) { .bd-rsm .bd-mapv .bd-mhint { bottom: var(--dockh, 64px); } }

/* v1.52.0 · Research centre: Skills */
.sk-st { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.sk-st.ok { background: #E6F4EA; color: #137333; } .sk-st.off { background: #FCE8E6; color: #A50E0E; } .sk-st.draft { background: #FEF7E0; color: #8A5A00; }
.sk-anon { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #E8F0FE; color: #1A56C4; }
.sk-detail { display: grid; gap: 10px; } .sk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sk-uses { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sk-sec { border-radius: 12px; background: var(--panel-2); padding: 10px 12px; margin: 6px 0; }
.sk-sec > summary { cursor: pointer; list-style: none; display: grid; gap: 2px; } .sk-sec > summary::-webkit-details-marker { display: none; }
.sk-sec > summary b { font-size: 14px; line-height: 1.35; } .sk-sec > summary small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.sk-notes { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin-top: 8px; overflow-wrap: anywhere; }
.sk-nums { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; table-layout: fixed; }
.sk-nums td { padding: 4px 6px; vertical-align: top; overflow-wrap: anywhere; } .sk-nums td:nth-child(2) { width: 30%; font-weight: 600; } .sk-nums td:nth-child(3) { width: 14%; color: var(--muted); text-align: right; }
.sk-nums tr + tr td { border-top: 1px solid rgba(0,0,0,.06); }
.sk-rulelist, .sk-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sk-rule { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: 14px; line-height: 1.45; }
.sk-rule input { margin-top: 3px; } .sk-rule > div { display: grid; gap: 3px; min-width: 0; } .sk-rule small { color: var(--muted); font-size: 12px; }
.sk-ck { justify-self: start; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #E6F4EA; color: #137333; overflow-wrap: anywhere; }
.sk-rules li { padding: 8px 10px; border-radius: 10px; background: var(--panel-2); font-size: 14px; } .sk-rules small { color: var(--muted); }
.sk-ask { max-width: 980px; width: 100%; } .sk-ask-row { display: flex; gap: 8px; } .sk-ask-row input { flex: 1; min-width: 0; }
.sk-ask-out { display: grid; gap: 6px; margin-top: 8px; }
.sk-bar { height: 6px; border-radius: 6px; background: var(--panel-2); overflow: hidden; } .sk-bar i { display: block; height: 100%; width: 0; background: var(--brand-2); transition: width .4s; }
.rs-form select { width: 100%; }
@media (max-width: 600px) { .sk-ask-row { flex-direction: column; } .sk-nums td:nth-child(2) { width: 34%; } }
.sk-ask { background: var(--panel); border-radius: 18px; padding: 16px 18px; display: grid; gap: 8px; }
.sk-ask h3 { margin: 0; display: flex; align-items: center; gap: 8px; } .sk-ask h3 svg { width: 18px; height: 18px; color: var(--brand-2); } .sk-ask p { margin: 0; }
.form-chat .card h3 { display: flex; align-items: center; gap: 8px; }
.sk-detail textarea { width: 100%; box-sizing: border-box; min-height: 96px; background: var(--fill); border: 0; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink); resize: vertical; }
.sk-detail .chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* v1.53.0 · the likely range of the results */
.bd-seal.unc { color: #5F6368; }
.bd-unc-rows { display: grid; gap: 8px; margin: 10px 0 4px; }
.bd-unc-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(70px, 1fr) auto; grid-template-areas: 't bar v' 't bar r'; column-gap: 10px; align-items: center; font-size: 13px; }
.bd-unc-row > span { grid-area: t; color: var(--bd-ink, #202124); } .bd-unc-row > .bd-eb { grid-area: bar; } .bd-unc-row > b { grid-area: v; text-align: right; } .bd-unc-row > small { grid-area: r; text-align: right; color: var(--bd-mute, #5F6368); font-size: 11.5px; white-space: nowrap; }
.bd-eb { position: relative; height: 14px; display: block; }
.bd-eb::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: rgba(60,64,67,.12); }
.bd-eb-l { position: absolute; top: 5px; height: 4px; border-radius: 4px; background: rgba(26,115,232,.35); }
.bd-eb-c { position: absolute; top: 2px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: #1A73E8; }
.bd-eb-v { position: absolute; top: 3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #174EA6; box-shadow: 0 0 0 2px #fff; }
.bd-unc-why { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.45; display: grid; gap: 4px; }
.bd-unc-line { display: flex; gap: 8px; align-items: flex-start; text-align: left; width: 100%; border: 0; border-radius: 12px; padding: 8px 10px; margin-top: 6px; background: #E8F0FE; color: #174EA6; font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer; }
.bd-unc-line svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }

/* v1.53.0 · Design: the plan or the 3D model, and the element panels beside it */
.bd-dz { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 12px; }
.bd-dz-stage { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.bd-dz-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bd-dz-hint { color: var(--bd-mute, #5F6368); font-size: 12px; }
.bd-dz-3d { flex: 1; min-height: 240px; }
.bd-dz-plan { position: relative; flex: 1; min-height: 240px; display: flex; border-radius: 18px; overflow: hidden; background: #fff; }
.bd-dz-plan .bd-zoomwrap { flex: 1; }
.bd-dz-side { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.bd-dz-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.bd-dz-tabs button { border: 0; border-radius: 999px; padding: 6px 10px; background: rgba(60,64,67,.06); color: var(--bd-ink, #202124); font: inherit; font-size: 12.5px; cursor: pointer; }
.bd-dz-tabs button.on { background: #1A73E8; color: #fff; } .bd-dz-tabs button.done:not(.on)::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: #1E8E3E; vertical-align: middle; }
.bd-dz-tabs button.bad:not(.on)::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: #D93025; vertical-align: middle; }
.bd-dz-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 10px; align-content: start; padding-bottom: 8px; }
.bd-dz-card { background: #fff; border-radius: 16px; padding: 12px 14px; display: grid; gap: 8px; box-shadow: 0 1px 2px rgba(60,64,67,.08); min-width: 0; }
.bd-dz-h { display: grid; gap: 2px; } .bd-dz-h b { font-size: 14.5px; } .bd-dz-h small { color: var(--bd-mute, #5F6368); font-size: 12px; line-height: 1.4; }
.bd-dz-lab { font-size: 11.5px; letter-spacing: 0; color: var(--bd-mute, #5F6368); margin-top: 2px; }
.bd-dz-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-dz-seg button { border: 0; border-radius: 10px; padding: 7px 10px; background: rgba(60,64,67,.06); color: var(--bd-ink, #202124); font: inherit; font-size: 13px; line-height: 1.3; cursor: pointer; text-align: left; }
.bd-dz-seg button.on { background: #E8F0FE; color: #174EA6; box-shadow: inset 0 0 0 1.5px #1A73E8; }
.bd-dz-seg.col { display: grid; } .bd-dz-seg.sm button { padding: 5px 9px; font-size: 12.5px; }
.bd-dz-rng { display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px; gap: 8px; align-items: center; font-size: 13px; } .bd-dz-rng input { width: 100%; } .bd-dz-rng b { text-align: right; font-weight: 600; }
.bd-dz-tog { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.bd-dz-note { color: var(--bd-mute, #5F6368); font-size: 12px; line-height: 1.45; }
.bd-dz-p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--bd-ink, #3C4043); }
.bd-dz-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-dz-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bd-dz-part { border: 0; border-radius: 12px; padding: 9px 10px; text-align: left; background: rgba(60,64,67,.05); font: inherit; cursor: pointer; display: grid; gap: 2px; }
.bd-dz-part b { font-size: 13.5px; } .bd-dz-part small { font-size: 11.5px; color: var(--bd-mute, #5F6368); }
.bd-dz-part.designed { background: #E6F4EA; } .bd-dz-part.designed small { color: #137333; } .bd-dz-part.bad { background: #FCE8E6; } .bd-dz-part.bad small { color: #A50E0E; }
.bd-dz-feat, .bd-dz-why { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; line-height: 1.45; }
.bd-dz-why li small { display: block; color: var(--bd-mute, #5F6368); font-size: 11.5px; }
.bd-dz-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bd-dz-ck li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; line-height: 1.4; }
.bd-dz-ck li i svg { width: 16px; height: 16px; } .bd-dz-ck li.ok i { color: #1E8E3E; } .bd-dz-ck li.warn i { color: #E37400; } .bd-dz-ck li.fail i { color: #D93025; }
.bd-dz-ck li span { display: grid; gap: 2px; min-width: 0; } .bd-dz-ck li small { color: var(--bd-mute, #5F6368); font-size: 12px; }
.bd-dz-dw { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bd-dz-dw li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; font-size: 13px; padding: 7px 9px; border-radius: 10px; background: rgba(60,64,67,.04); }
.bd-dz-dw li small { grid-column: 1 / -1; color: var(--bd-mute, #5F6368); font-size: 11.5px; }
.bd-dz-dw .st { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: #F1F3F4; align-self: start; }
.bd-dz-dw li.ready .st { background: #E6F4EA; color: #137333; } .bd-dz-dw li.partial .st { background: #FEF7E0; color: #8A5A00; } .bd-dz-dw li.missing .st { background: #FCE8E6; color: #A50E0E; }
.bd-dz-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.bd-dz-tab th, .bd-dz-tab td { padding: 5px 4px; text-align: left; vertical-align: top; overflow-wrap: anywhere; } .bd-dz-tab th { color: var(--bd-mute, #5F6368); font-weight: 600; font-size: 11.5px; }
.bd-dz-tab tbody tr + tr td { border-top: 1px solid rgba(0,0,0,.06); } .bd-dz-tab td:first-child, .bd-dz-tab th:first-child { width: 42px; } .bd-dz-tab td:last-child, .bd-dz-tab th:last-child { width: 34px; text-align: right; }
@media (max-width: 820px) {
  .bd-dz { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 46vh) auto; overflow-y: auto; }
  .bd-dz-side { min-height: auto; } .bd-dz-body { overflow: visible; }
  .bd-dz-rng { grid-template-columns: 90px minmax(0, 1fr) 58px; }
}
/* v1.53.0: six seals (the likely range joins the ratings) share the scorecard's width */
.bd-sc-seals .bd-seal { flex: 1 1 0; min-width: 0; width: auto; }
.bd-sc-seals .bd-seal-g { width: 46px; height: 46px; }
.bd-score.min .bd-sc-seals .bd-seal { flex: 0 0 auto; width: 42px; } .bd-score.min .bd-sc-seals .bd-seal-g { width: 40px; height: 40px; }
@media (max-width: 820px) {
  /* v1.53.0: a card that is open sits above the mascots */
  .bd-ws.float .bd-pop { z-index: 66; }
  /* the Design view on a phone: the picture first, at a fixed height, then the panels below it */
  .bd-dz { grid-template-rows: auto auto; align-content: start; }
  .bd-dz-stage { height: 50vh; min-height: 300px; }
  .bd-dz-3d, .bd-dz-plan { min-height: 0; }
}

/* ---------- v1.55.0: signature architects, the critique and the debate ---------- */
.bd-ar { display: grid; gap: 8px; min-width: 0; }
.bd-ar-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; } .bd-ar-h small { color: var(--bd-mute, #5F6368); font-size: 12px; }
.bd-ar-lvl { justify-self: start; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #F1F3F4; color: #5F6368; }
.bd-ar-lvl.strong { background: #E6F4EA; color: #137333; } .bd-ar-lvl.good { background: #E8F0FE; color: #1967D2; } .bd-ar-lvl.early { background: #FEF7E0; color: #8A5A00; }
.bd-ar-pr { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bd-ar-pr li { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; gap: 4px 10px; align-items: center; font-size: 13px; line-height: 1.4; }
.bd-ar-pr li > span { grid-column: 1 / -1; } .bd-ar-pr li small { color: var(--bd-mute, #5F6368); font-size: 11.5px; grid-column: 3; }
.bd-ar-bar { grid-column: 1 / 3; display: block; height: 4px; border-radius: 4px; background: #E8EAED; overflow: hidden; } .bd-ar-bar > i { display: block; height: 100%; background: #1A73E8; border-radius: 4px; }
.bd-ar-note { color: var(--bd-mute, #5F6368); font-size: 11.5px; line-height: 1.4; }
.bd-cr, .bd-db { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bd-cr li, .bd-db li { display: grid; gap: 5px; padding: 10px 12px; border-radius: 12px; background: #F8F9FA; min-width: 0; }
.bd-cr li p, .bd-db li p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bd-ink, #3C4043); }
.bd-cr li small { color: var(--bd-mute, #5F6368); font-size: 11.5px; line-height: 1.4; }
.bd-cr li .bd-chip { justify-self: start; }
.bd-cr-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .bd-cr-h b { font-size: 13.5px; line-height: 1.35; min-width: 0; }
.bd-cr-v { flex: none; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #F1F3F4; color: #5F6368; }
.bd-cr-v.ok { background: #E6F4EA; color: #137333; } .bd-cr-v.mid { background: #FEF7E0; color: #8A5A00; } .bd-cr-v.bad { background: #FCE8E6; color: #A50E0E; }
.bd-cr-s { display: grid !important; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; align-items: start; color: #1967D2 !important; }
.bd-cr-s svg { width: 15px; height: 15px; margin-top: 2px; }
.bd-db-u, .bd-db-b { display: grid !important; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; }
.bd-db-u small, .bd-db-b small { font-size: 11px; font-weight: 600; color: var(--bd-mute, #5F6368); padding-top: 2px; } .bd-db-b small { color: #1967D2; }
/* Research centre · Architects */
.ar-lvl { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.ar-lvl.strong { background: #E6F4EA; color: #137333; } .ar-lvl.good { background: #E8F0FE; color: #1967D2; } .ar-lvl.early { background: #FEF7E0; color: #8A5A00; }
.ar-pr { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ar-pr > li { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); font-size: 14px; line-height: 1.45; min-width: 0; }
.ar-pr-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.ar-pr-m { display: grid; grid-template-columns: auto minmax(60px, 160px) auto; gap: 10px; align-items: center; } .ar-pr-m small { color: var(--muted); font-size: 12px; }
.ar-th { font-size: 11.5px; font-weight: 600; color: var(--brand-2); }
.ar-bar { display: block; height: 5px; border-radius: 5px; background: var(--fill); overflow: hidden; } .ar-bar > i { display: block; height: 100%; background: var(--brand-2); }
.ar-pr details summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.ar-ev { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; color: var(--ink-2); }
.ar-chips { display: flex; flex-wrap: wrap; gap: 6px; } .ar-chips span { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); } .ar-chips small { color: var(--muted); }
.ar-mv td:nth-child(3) { color: var(--muted); font-size: 12.5px; }
@media (max-width: 600px) { .ar-pr-m { grid-template-columns: auto minmax(40px, 1fr); } .ar-pr-m small { grid-column: 1 / -1; } }
.ar-pr .icon-btn { width: 28px; height: 28px; min-width: 28px; } .ar-pr .icon-btn svg { width: 15px; height: 15px; }

/* ---------- v1.56.0: the three editions of Buonda ---------- */
.bd-eds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.bd-ed { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 10px; align-items: start; text-align: left; padding: 12px 14px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--bd-sh); color: var(--bd-ink); cursor: pointer; font: inherit; }
.bd-ed i { grid-row: span 2; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #F1F3F4; color: #5F6368; } .bd-ed i svg { width: 20px; height: 20px; }
.bd-ed b { font: 700 14.5px/1.25 var(--display); } .bd-ed small { color: var(--bd-mute); font-size: 12.5px; line-height: 1.4; }
.bd-ed.on { box-shadow: 0 0 0 2px #1A73E8, var(--bd-sh); } .bd-ed.on i { background: #E8F0FE; color: #1A73E8; }
.bd-ed-tag { font-style: normal; font-size: 11px; font-weight: 600; color: #1967D2; background: #E8F0FE; border-radius: 999px; padding: 1px 8px; justify-self: start; }
.bd-card:has(.bd-ed-tag) i { grid-row: span 3; }
@media (max-width: 700px) { .bd-eds { grid-template-columns: 1fr; } }

/* ---------- v1.56.0: Buonda for Government (bg-) and for Banks (bk-) ---------- */
.bg { display: grid; grid-template-rows: auto 1fr; gap: 10px; min-height: calc(100vh - 140px); color: var(--bd-ink); }
.bg-head { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.bg-ttl { display: grid; min-width: 0; flex: 1; } .bg-ttl b { font: 700 18px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bg-ttl small { color: var(--bd-mute); font-size: 12.5px; }
.bg-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 12px; min-height: 0; }
.bg-mapw { position: relative; min-height: 420px; border-radius: 18px; overflow: hidden; box-shadow: var(--bd-sh); background: #EEF1F4; }
.bg-map { position: absolute; inset: 0; }
.bg-pinbar { position: absolute; z-index: 500; left: 12px; right: 12px; top: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.96); box-shadow: var(--bd-sh); font-size: 13.5px; }
.bg-pinbar span { flex: 1; } .bg-pinbar svg { width: 18px; height: 18px; color: #1A73E8; }
.bg-side { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-height: 0; max-height: calc(100vh - 150px); }
.bg-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .bg-tabs button { border: 0; border-radius: 999px; padding: 7px 14px; background: #fff; box-shadow: 0 1px 2px rgba(60,64,67,.12); font: 600 13px var(--font); color: var(--bd-ink); cursor: pointer; }
.bg-tabs button.on { background: #1A73E8; color: #fff; } .bg-tabs button.off, .bg-tabs button:disabled { opacity: .45; cursor: default; }
.bg-body { overflow: auto; display: grid; align-content: start; gap: 10px; padding: 2px 2px 12px; min-height: 0; }
.bg-card, .bg-kpi, .bg-empty { background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(60,64,67,.08); display: grid; gap: 8px; min-width: 0; }
.bg-card > b { font: 700 14.5px/1.3 var(--display); } .bg-card > p, .bg-empty p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--bd-mute); }
.bg-empty { justify-items: start; } .bg-empty b { font: 700 15px var(--display); }
.bg-k { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .bg-k div { display: grid; } .bg-k b { font: 700 18px var(--display); } .bg-k small { font-size: 11px; color: var(--bd-mute); line-height: 1.2; }
.bg-bar { display: flex; height: 8px; border-radius: 8px; overflow: hidden; gap: 2px; } .bg-bar i { display: block; min-width: 4px; }
.bg-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--bd-mute); } .bg-leg span { display: inline-flex; align-items: center; gap: 5px; } .bg-leg i { width: 8px; height: 8px; border-radius: 50%; }
.bg-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bg-note { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; margin: 0; font-size: 13px; line-height: 1.45; color: #8A5A00; background: #FEF7E0; border-radius: 12px; padding: 8px 10px; } .bg-note svg { width: 16px; height: 16px; margin-top: 2px; }
.bg-note:not(:has(svg)) { grid-template-columns: 1fr; }
.bg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bg-row { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(60,64,67,.08); }
.bg-row-h { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.bg-g { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 14px var(--display); font-style: normal; }
.bg-g.wait { background: #F1F3F4; color: #5F6368; } .bg-g.bad { background: #FCE8E6; color: #C5221F; } .bg-g.pin { background: #E8F0FE; color: #1A73E8; } .bg-g svg { width: 16px; height: 16px; }
.bg-row-t { display: grid; min-width: 0; } .bg-row-t b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bg-row-t small { color: var(--bd-mute); font-size: 12px; line-height: 1.35; }
.bg-steps { display: flex; gap: 3px; } .bg-steps i { width: 6px; height: 6px; border-radius: 50%; background: #E8EAED; } .bg-steps i.on { background: #1E8E3E; } .bg-steps i.bad { background: #D93025; }
.bg-row-b { display: grid; gap: 8px; padding: 0 12px 12px; }
.bg-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.bg-chip { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; background: #F8F9FA; min-width: 0; } .bg-chip small { font-size: 11px; color: var(--bd-mute); line-height: 1.25; } .bg-chip b { font-size: 13px; line-height: 1.3; }
.bg-chip.ok { background: #E6F4EA; } .bg-chip.ok b { color: #137333; } .bg-chip.no { background: #FCE8E6; } .bg-chip.no b { color: #A50E0E; }
.bg-why { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 12.5px; line-height: 1.45; color: #3C4043; }
.bg-meta { color: var(--bd-mute); font-size: 11.5px; line-height: 1.45; }
.bg-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px; border-radius: 12px; background: #F1F3F4; font-size: 13.5px; cursor: pointer; } .bg-drop svg { width: 18px; height: 18px; color: #1A73E8; }
.bg-drop input { flex-basis: 100%; font-size: 12.5px; min-width: 0; max-width: 100%; } .bg-drop.sm { padding: 8px 10px; }
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; }
.bg-f { display: grid; gap: 4px; min-width: 0; } .bg-f > span { font-size: 11.5px; font-weight: 600; color: var(--bd-mute); }
.bg-f input, .bg-f select, .bg-f textarea, .bk-row input { width: 100%; box-sizing: border-box; height: 38px; border: 0; border-radius: 10px; padding: 0 10px; background: #F1F3F4; font: 500 13.5px var(--font); color: var(--bd-ink); }
.bg-f textarea { height: auto; padding: 8px 10px; line-height: 1.45; resize: vertical; }
.bg-layers { display: grid; gap: 6px; } .bg-lay { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: #F8F9FA; }
.bg-lay span { display: grid; min-width: 0; } .bg-lay b { font-size: 13px; } .bg-lay small { color: var(--bd-mute); font-size: 11.5px; }
.bg-up { display: grid; gap: 8px; padding-top: 6px; }
.bk { grid-template-rows: auto auto 1fr; }
.bk-tabs { margin: 0 2px; } .bk-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; align-content: start; padding-bottom: 20px; }
.bk-body > .bg-acts { grid-column: 1 / -1; }
.bk-head { grid-column: 1 / -1; }
.bk-big { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .bk-big > div { display: grid; gap: 1px; padding: 10px 12px; border-radius: 12px; background: #F8F9FA; min-width: 0; }
.bk-big small { font-size: 11.5px; color: var(--bd-mute); } .bk-big b { font: 700 17px/1.25 var(--display); } .bk-big span { font-size: 11.5px; color: var(--bd-mute); line-height: 1.3; }
.bk-big > .main { background: #E8F0FE; } .bk-big > .main b { color: #174EA6; font-size: 19px; }
.bk-row { display: flex; gap: 8px; align-items: center; } .bk-row input { flex: 1; }
.bk-tw { overflow-x: auto; } .bk-t { width: 100%; border-collapse: collapse; font-size: 12.5px; } .bk-t th, .bk-t td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #F1F3F4; white-space: nowrap; } .bk-t td:first-child { white-space: normal; min-width: 160px; }
.bk-t th { font-size: 11.5px; color: var(--bd-mute); font-weight: 600; } .bk-t .n { text-align: right; font-variant-numeric: tabular-nums; } .bk-t tfoot th { color: var(--bd-ink); font-size: 13px; }
.bk-comp input { width: 100%; min-width: 70px; box-sizing: border-box; height: 32px; border: 0; border-radius: 8px; padding: 0 8px; background: #F1F3F4; font: 500 12.5px var(--font); }
.bk-comp td:first-child input { min-width: 150px; }
.bk-planw { display: grid; gap: 6px; } .bk-plan { background: #FAFAFA; border-radius: 12px; overflow: hidden; } .bk-plan svg { display: block; width: 100%; height: auto; max-height: 420px; }
.bk-src { display: grid; gap: 8px; }
.bk-frame { width: 100%; height: 70vh; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #E8EAED; }
.bk-body > .bg-card:has(.bk-frame) { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .bg-main { grid-template-columns: 1fr; } .bg-mapw { min-height: 46vh; } .bg-side { max-height: none; } .bg-body { overflow: visible; }
  .bg-k { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
}
.bg-card, .bg-kpi, .bg-empty { align-content: start; }
.bg .bg-f select { height: 38px; padding: 0 10px; background-color: #F1F3F4; border: 0; border-radius: 10px; font: 500 13.5px var(--font); color: var(--bd-ink); box-shadow: none; }
.bg .sel-face { min-height: 38px; padding: 9px 34px 9px 10px; border-radius: 10px; background-color: #F1F3F4; font: 500 13.5px/1.4 var(--font); color: var(--bd-ink); }
.bd-eds-line { font-size: 14px; color: var(--bd-mute); margin-top: -4px; }


/* v1.59.0: Buonda as three products */
.bd-h1-for { display: block; font-size: .5em; font-weight: 700; line-height: 1.2; color: var(--bd-mute); margin-top: 4px; letter-spacing: 0; }
.bd-hero-ic { display: grid; place-items: center; }
.bd-hero-ic svg { width: 62%; height: 62%; max-width: 190px; max-height: 190px; stroke-width: 1.1; }
.bd-land-gov .bd-hero-ic, .bd-home-gov .bd-hero-ic { color: #2F5D8A; }
.bd-land-bank .bd-hero-ic, .bd-home-bank .bd-hero-ic { color: #2E6B4F; }
.bd-land-gov .bd-hero { background: radial-gradient(120% 140% at 0% 0%, #E8F0F8 0%, #FFFFFF 50%, #EEF3FA 100%); }
.bd-land-bank .bd-hero { background: radial-gradient(120% 140% at 0% 0%, #E6F3EC 0%, #FFFFFF 50%, #EEF6F1 100%); }
.bd-home-fig.bd-hero-ic { border-radius: 50%; background: #F4F7FB; }
.bd-home-bank .bd-home-fig.bd-hero-ic { background: #EEF6F1; }
.bd-home-prod { display: block; font-weight: 700; font-size: 13px; color: var(--bd-mute); margin-bottom: 2px; }
.bd-eds-line a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bd-home > .bd-eds-line { margin-top: 18px; }
.bd-land-gov .bd-hero-t small { color: #2F5D8A; } .bd-land-bank .bd-hero-t small { color: #2E6B4F; }
.bd-home-gov .bd-home-top { background: radial-gradient(120% 140% at 0% 0%, #E8F0F8 0%, #fff 50%, #EEF3FA 100%); }
.bd-home-bank .bd-home-top { background: radial-gradient(120% 140% at 0% 0%, #E6F3EC 0%, #fff 50%, #EEF6F1 100%); }
.bd-home-gov .bd-card i { background: #E8F0F8; color: #2F5D8A; } .bd-home-bank .bd-card i { background: #E6F3EC; color: #2E6B4F; }
.pf-sub.bonda { background: #FFF6DC; } .pf-sub.bondagov { background: #E8F0F8; } .pf-sub.bondabank { background: #E6F3EC; }
.pricec.bonda { background: linear-gradient(180deg, #FFF6DC, var(--panel) 120px); }
.pricec.bondagov { background: linear-gradient(180deg, #E8F0F8, var(--panel) 120px); }
.pricec.bondabank { background: linear-gradient(180deg, #E6F3EC, var(--panel) 120px); }

/* ---------- v1.60.0: SleepAdvisor's main screen: your day and night, with tonight and tomorrow above ---------- */
.eh.sa { max-width: 1260px; margin: 0 auto; padding: 6px 16px 40px; display: grid; gap: 14px; min-width: 0; }
.sa > * { min-width: 0; }
.sa .sa-i { width: 18px; height: 18px; flex: none; }
.sa-wait { padding: 60px 0; text-align: center; color: var(--muted); }
.sa-head { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding-top: 4px; }
.sa-brand { display: flex; align-items: center; gap: 10px; }
.sa-brand .nd svg { width: 44px; height: 44px; }
.sa-brand b { font: 900 1.55rem/1 var(--display); letter-spacing: -.03em; color: #28306B; } .sa-brand b span { color: #E4577A; }
.sa-brand small { display: block; color: var(--muted); font-weight: 600; font-size: 13px; margin-top: 3px; }
.sa-acts { display: flex; gap: 10px; }
.sa-acts .rb-c { width: 44px; height: 44px; background: #EEF0FB; color: #28306B; } .sa-acts .rb:hover .rb-c { background: #E1E4F7; }
.sa-acts .rb-c svg { width: 20px; height: 20px; } .sa-acts .rb-l { font-size: 11.5px; font-weight: 600; color: #3C4043; }

/* the results, above the strip, always in view */
.sa-top { position: sticky; z-index: 20; padding: 6px 0 8px; margin: 0 -4px; padding-left: 4px; padding-right: 4px; background: linear-gradient(var(--bg) 88%, rgba(252,250,245,0)); }
.sa-impact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.35fr); gap: 12px; }
.sa-t { position: relative; background: #fff; border-radius: 20px; padding: 13px 16px 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(40,48,107,.07); min-width: 0; }
.sa-t > small { display: block; font: 500 11.5px/1.2 var(--font); letter-spacing: 0; color: #6B7280; }
.sa-big { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 4px 0 2px; }
.sa-big b { font: 800 40px/1 var(--display); letter-spacing: -.03em; color: var(--c, #1E8E3E); font-variant-numeric: tabular-nums; transition: color .2s; }
.sa-t-day .sa-big b { color: #1E8E3E; }
.sa-big > span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.sa em { font-style: normal; font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa em.ok { background: #E6F4EA; color: #137333; } .sa em.no { background: #FCE8E6; color: #B3261E; } .sa em.eq { background: #F1F3F4; color: #80868B; }
.sa-ring { position: absolute; right: 14px; top: 14px; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), #EEF0F4 0); -webkit-mask: radial-gradient(circle, transparent 15px, #000 16px); mask: radial-gradient(circle, transparent 15px, #000 16px); transition: background .2s; }
.sa-vs { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.sa-when { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font: 700 12px/1 var(--font); color: #28306B; background: #EEF0FB; padding: 5px 9px; border-radius: 999px; }
.sa-when .sa-i { width: 14px; height: 14px; }
.sa-mini { display: none; }
.sa-t-night { display: grid; gap: 8px; align-content: center; }
.sa-m { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 58px; grid-template-areas: "s l v d" "s g v d"; align-items: center; column-gap: 8px; }
.sa-m-s { grid-area: s; font-size: 17px; color: #DADCE0; line-height: 1; } .sa-m.on .sa-m-s { color: #F5A623; }
.sa-m small { grid-area: l; font-size: 12.5px; font-weight: 700; color: #3C4043; }
.sa-m i { grid-area: g; font-style: normal; font-size: 11px; color: #9AA0A6; }
.sa-m b { grid-area: v; font: 800 17px/1 var(--display); color: #1F2937; font-variant-numeric: tabular-nums; }
.sa-m em { grid-area: d; justify-self: end; }
.sa-spark { margin: 2px 0 2px; } .sa-spark svg { width: 100%; height: 64px; display: block; overflow: visible; } .sa-spark text { font: 600 9px var(--font); fill: #9AA0A6; }
.sa-last { margin-top: 8px; min-height: 32px; }
.sa-last-in { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: #EEF0FB; color: #28306B; font: 600 13px/1.3 var(--font); max-width: 100%; }
.sa-last-in > span { overflow: hidden; text-overflow: ellipsis; }
.sa-last-in.good { background: #E6F4EA; color: #0D652D; } .sa-last-in.bad { background: #FCE8E6; color: #A50E0E; }
.sa-last-in .sa-i { width: 16px; height: 16px; }
.sa-undo { display: inline-flex; align-items: center; gap: 4px; border: 0; background: #fff; color: inherit; font: 700 12px/1 var(--font); padding: 6px 10px; border-radius: 999px; cursor: pointer; flex: none; }
.sa-undo .sa-i { width: 14px; height: 14px; }

/* the strip and the tray */
.sa-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.sa-main { background: #fff; border-radius: 22px; padding: 14px 14px 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(40,48,107,.06); min-width: 0; }
.sa-trayh { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sa-trayh b { font: 800 16px/1.2 var(--display); color: #1F2937; } .sa-trayh small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.sa-zoom { display: flex; gap: 6px; flex: none; }
.sa-zoom button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #F1F3F7; color: #28306B; display: grid; place-items: center; cursor: pointer; } .sa-zoom .sa-i { width: 16px; height: 16px; }
.sa-tray { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.sa-tk { display: grid; justify-items: center; gap: 4px; width: 66px; padding: 8px 2px 7px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--c) 9%, #fff); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .12s, background .15s; font: inherit; }
.sa-tk:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--c) 15%, #fff); } .sa-tk:active { cursor: grabbing; }
.sa-tk.dragging { opacity: .35; }
.sa-tk-i { width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px color-mix(in srgb, var(--c) 35%, transparent); }
.sa-tk-i .sa-i { width: 19px; height: 19px; }
.sa-tk small { font: 600 11px/1.15 var(--font); color: #3C4043; text-align: center; }
.sa-ghost { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; display: grid; justify-items: center; gap: 4px; }
.sa-ghost > .sa-i { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.25); transition: transform .12s; }
.sa-ghost.in > .sa-i { transform: scale(1.1); }
.sa-ghost small { background: #28306B; color: #fff; font: 700 11px/1.4 var(--font); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sa-scroll { overflow-x: auto; border-radius: 14px; background: #FAFBFD; overscroll-behavior-x: contain; scrollbar-width: thin; }
.sa-grid { position: relative; }
.sa-row { display: flex; min-height: 46px; }
.sa-rrow { min-height: 56px; }
.sa-lab, .sa-corner { position: sticky; left: 0; z-index: 3; width: var(--lab); flex: none; background: #fff; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 10px; box-shadow: 6px 0 10px -8px rgba(16,24,40,.12); }
.sa-lab > span:not(.sa-lab-i) { display: grid; min-width: 0; }
.sa-lab b { font: 700 12.5px/1.2 var(--font); color: #1F2937; }
.sa-lab small { font-size: 10.5px; line-height: 1.25; color: #6B7280; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sa-lab.res { background: #F7F8FE; } .sa-lab.res b { color: #28306B; }
.sa-lab .lb { width: 20px; height: 20px; color: #5B57C9; }
.sa-lab-i { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; } .sa-lab-i .sa-i { width: 15px; height: 15px; }
.sa-eff { margin-left: auto; flex: none; }
.sa-cell { position: relative; flex: 1; }
.sa-track { position: relative; height: 100%; min-height: 46px; background-image: linear-gradient(to right, rgba(16,24,40,.045) 1px, transparent 1px); background-size: var(--h) 100%; }
.sa-track:not(.ro) { cursor: copy; } .sa-track:not(.ro):hover { background-color: color-mix(in srgb, var(--c) 5%, transparent); }
.sa-track.res { min-height: 52px; background-color: #F7F8FE; }
.sa-svg { position: absolute; left: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.sa-nb { position: absolute; top: 0; bottom: 0; background: rgba(40,48,107,.07); pointer-events: none; }
.sa-ruler { position: relative; height: 56px; }
.sa-part { position: absolute; top: 4px; display: inline-flex; align-items: center; gap: 4px; font: 800 11px/1 var(--font); color: #28306B; white-space: nowrap; } .sa-part .sa-i { width: 14px; height: 14px; color: #5B57C9; }
.sa-tick { position: absolute; top: 40px; transform: translateX(-50%); font: 600 10.5px/1 var(--font); color: #9AA0A6; white-space: nowrap; }
.sa-tick:empty { width: 1px; height: 5px; top: 44px; background: #DADCE0; transform: none; }
.sa-tick.mj { color: #5F6368; }
.sa-mk { position: absolute; top: 18px; transform: translateX(-50%); z-index: 2; cursor: ew-resize; touch-action: none; user-select: none; }
.sa-mk > span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; background: #28306B; color: #fff; box-shadow: 0 2px 6px rgba(40,48,107,.3); }
.sa-mk.wake > span { background: #E37400; box-shadow: 0 2px 6px rgba(227,116,0,.3); }
.sa-mk b { font: 700 11.5px/1.2 var(--font); font-variant-numeric: tabular-nums; } .sa-mk .sa-i { width: 13px; height: 13px; }
.sa-mk:focus-visible > span { outline: 3px solid #A8B0F0; }
.sa-blk { position: absolute; top: 8px; bottom: 8px; border-radius: 9px; background: var(--c); color: #fff; display: flex; align-items: center; gap: 4px; padding: 0 6px; cursor: grab; touch-action: none; user-select: none; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.18); z-index: 1; }
.sa-blk .sa-i { width: 16px; height: 16px; }
.sa-blk small { font: 700 10.5px/1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-blk.dose { width: 30px; height: 30px; top: calc(50% - 15px); bottom: auto; margin-left: -15px; padding: 0; justify-content: center; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(0,0,0,.2); }
.sa-blk.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c), 0 2px 8px rgba(0,0,0,.2); z-index: 2; }
.sa-blk.off { background: #B3261E !important; opacity: .75; }
.sa-blk:focus-visible { outline: 3px solid #A8B0F0; outline-offset: 1px; }
.sa-h { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; } .sa-h.l { left: 0; } .sa-h.r { right: 0; }
.sa-h::after { content: ''; position: absolute; top: calc(50% - 6px); left: 4px; width: 2px; height: 12px; border-radius: 2px; background: rgba(255,255,255,.75); }
.sa-guide { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #28306B; z-index: 4; pointer-events: none; }
.sa-guide span { position: absolute; top: 2px; left: 6px; background: #28306B; color: #fff; padding: 2px 8px; border-radius: 999px; font: 700 11px/1.4 var(--font); white-space: nowrap; }
.sa-sec { padding: 12px 0 4px; } .sa-sec > span, .sa-sec > button { position: sticky; left: 10px; display: inline-flex; }
.sa-sec > span { font: 500 12px/1 var(--font); letter-spacing: 0; color: #6B7280; }
.sa-tog { align-items: center; gap: 6px; border: 0; background: #F1F3F7; color: #28306B; font: 600 12px/1 var(--font); padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.sa-tog .sa-i { width: 15px; height: 15px; } .sa-tog .sa-i.up { transform: rotate(180deg); }
.sa-x { border: 0; background: transparent; color: #80868B; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex: none; margin-left: auto; font-size: 14px; }
.sa-x:hover { background: #F1F3F4; } .sa-x .sa-i { width: 15px; height: 15px; }
.sa-sel { margin-top: 12px; background: #F7F8FC; border-radius: 16px; padding: 12px 14px; display: grid; gap: 10px; }
.sa-sel-h { display: flex; align-items: center; gap: 10px; } .sa-sel-h b { font: 700 14px/1.2 var(--font); } .sa-sel-h small { display: block; font-size: 12px; color: var(--muted); }
.sa-sel-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; background: #fff; color: #28306B; font: 600 12.5px/1 var(--font); padding: 8px 12px; border-radius: 999px; cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,.1); white-space: nowrap; }
.sa-chip:hover { background: #F3F4FB; } .sa-chip .sa-i { width: 14px; height: 14px; }
.sa-chip.bad { color: #B3261E; } .sa-chip.try { background: #28306B; color: #fff; box-shadow: none; } .sa-chip.try:hover { background: #3A438A; }

/* beside the strip */
.sa-aside { display: grid; gap: 14px; min-width: 0; }
.sa-card { background: #fff; border-radius: 20px; padding: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(40,48,107,.06); min-width: 0; }
.sa-card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; } .sa-card-h b { font: 800 14px/1.25 var(--display); color: #1F2937; }
.sa-card p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.sa-stage { height: 200px; border-radius: 14px; overflow: hidden; background: #1B1F3B; position: relative; } .sa-stage.flat { display: none; }
.sa-stage .b3 { position: absolute; inset: 0; }
.sa-rs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.sa-rs-i { background: #F7F8FC; border-radius: 12px; padding: 8px 10px; display: grid; }
.sa-rs-i small { font-size: 10.5px; color: #6B7280; } .sa-rs-i b { font: 800 14px/1.3 var(--display); color: #1F2937; } .sa-rs-i i { font-style: normal; font-size: 10.5px; font-weight: 700; }
.sa-rs-i.good i { color: #137333; } .sa-rs-i.fair i { color: #B06000; } .sa-rs-i.poor i { color: #B3261E; }
.sa-meas { color: #28306B !important; background: #EEF0FB; padding: 8px 10px; border-radius: 12px; }
.sa-note { color: #A50E0E !important; }

/* what to change */
.sa-adv h3 { margin: 6px 0 10px; font: 800 19px/1.2 var(--display); color: #1F2937; }
.sa-advg { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.sa-card.adv { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.sa-card.adv > div { display: grid; gap: 5px; justify-items: start; }
.sa-n { width: 26px; height: 26px; border-radius: 50%; background: #EEF0FB; color: #28306B; display: grid; place-items: center; font: 800 12.5px/1 var(--font); }
.sa-card.adv b { font: 700 14px/1.35 var(--font); color: #1F2937; } .sa-card.adv p { margin: 0; font-size: 13px; color: #3C4043; } .sa-card.adv .sa-why { color: #6B7280; }
.sa-card.adv small { font-size: 11.5px; color: #80868B; } .sa-card.adv .sa-chip { margin-top: 4px; }
.sa-fine { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: #80868B; }

@media (max-width: 980px) { .sa-body { grid-template-columns: minmax(0, 1fr); } .sa-aside { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (max-width: 760px) {
  .eh.sa { padding: 4px 12px 32px; gap: 10px; }
  .sa-brand small { display: none; } .sa-brand .nd svg { width: 36px; height: 36px; } .sa-brand b { font-size: 1.3rem; }
  .sa-acts { gap: 6px; } .sa-acts .rb-c { width: 40px; height: 40px; } .sa-acts .rb-l { font-size: 10.5px; }
  .sa-impact { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sa-t { padding: 10px 12px; border-radius: 16px; } .sa-t-night, .sa-ring, .sa-when, .sa-t .sa-vs { display: none; }
  .sa-mini { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
  .sa-big { margin: 2px 0 0; } .sa-big b { font-size: 30px; } .sa-big > span { font-size: 11px; }
  .sa-spark svg { height: 38px; } .sa-spark text { display: none; }
  .sa-last { margin-top: 6px; min-height: 0; } .sa-last-in { font-size: 12px; border-radius: 14px; }
  .sa-main { padding: 12px 10px 10px; border-radius: 18px; }
  .sa-tk { width: calc((100% - 32px) / 5); min-width: 56px; } .sa-tk small { font-size: 10px; }
  .sa-lab { padding-left: 8px; gap: 6px; } .sa-lab b { font-size: 11.5px; } .sa-lab small { font-size: 9.5px; } .sa-lab-i { width: 22px; height: 22px; } .sa-eff { display: none; }
  .sa-advg { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 761px) {
  .sa-tray { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: thin; }
  .sa-tk { width: 58px; flex: none; padding: 7px 2px 6px; } .sa-tk-i { width: 32px; height: 32px; } .sa-tk small { font-size: 10.5px; }
}
.sa-narrow { display: none !important; }
.sa-grid { user-select: none; -webkit-user-select: none; }
@media (max-width: 760px) {
  .sa-wide { display: none !important; } .sa-narrow { display: block !important; }
  .sa-head { flex-wrap: nowrap; } .sa-brand .nd { display: none; }
  .sa-acts .rb-l { display: none; } .sa-acts .rb-c { width: 38px; height: 38px; } .sa-acts .rb-c svg { width: 18px; height: 18px; }
  .sa-tray { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 10px 0; }
  .sa-tk { width: auto; min-width: 0; padding: 6px 0 5px; border-radius: 12px; gap: 3px; } .sa-tk-i { width: 30px; height: 30px; } .sa-tk-i .sa-i { width: 17px; height: 17px; }
  .sa-tk small { font-size: 9px; letter-spacing: -.01em; }
  .sa-trayh b { font-size: 15px; } .sa-zoom button { width: 30px; height: 30px; }
}

/* ---------- v1.61.0: the landing page ---------- */
.bi-eyebrow b { color: #E4572E; font-weight: 900; }
.bi-copy h1 { font-size: clamp(2rem, 4.3vw, 3.4rem); }
@media (max-width: 900px) { .bi-copy h1 { font-size: 31px; } }
/* IEQ Pulse on a screen: one item at a time, a slow cross-fade, legible */
.iqp { margin: 0 0 18px; }
.iqp-frame { background: #1A1D24; border-radius: 18px; padding: 8px; box-shadow: 0 18px 40px -22px rgba(15,30,38,.55); }
.iqp-screen { position: relative; border-radius: 12px; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, #17324A 0%, #0E1B2A 60%, #0B1420 100%); color: #EAF2F8; padding: 12px 16px 10px; min-height: 178px; display: grid; grid-template-rows: auto 1fr auto; }
.iqp-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%); pointer-events: none; }
.iqp-top { display: flex; justify-content: space-between; align-items: center; }
.iqp-brand { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--font); letter-spacing: 0; color: #9CC4E4; }
.iqp-brand i { width: 8px; height: 8px; border-radius: 50%; background: #E4572E; box-shadow: 0 0 0 3px rgba(228,87,46,.25); animation: psBlink 2.4s ease-in-out infinite; }
@keyframes psBlink { 50% { opacity: .35; } }
.iqp-dots { display: flex; gap: 5px; } .iqp-dots i { width: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); } .iqp-dots i.on { background: #E4572E; }
.iqp-slot { position: relative; min-height: 112px; }
.iqp-item { position: absolute; inset: 0; display: grid; align-content: center; gap: 6px; opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; color: inherit; text-decoration: none; }
.iqp-item.in { opacity: 1; transform: none; } .iqp-item.out { opacity: 0; transform: translateY(-6px); }
.iqp-tag { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1 var(--font); color: #9CC4E4; }
.iqp-tag b { font-size: 9.5px; letter-spacing: .08em; background: #E4572E; color: #fff; padding: 2px 5px; border-radius: 4px; }
.iqp-a { margin: 0; font: 700 clamp(15px, 1.35vw, 18px)/1.3 var(--display); color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.iqp-b { margin: 0; font-size: 13px; line-height: 1.45; color: #C6D6E3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.iqp-a em, .iqp-b em { font-style: normal; font-weight: 800; color: #FFB199; } .iqp-b em { color: #8FE3B0; }
.iqp-item.news:hover .iqp-a { text-decoration: underline; text-underline-offset: 3px; }
.iqp-nav { display: flex; gap: 6px; align-items: center; position: relative; z-index: 1; }
.iqp-nav button { border: 0; background: rgba(255,255,255,.08); color: #DDE8F2; width: 26px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; }
.iqp-nav .iqp-more { width: auto; margin-left: auto; padding: 0 10px; font: 700 11.5px/1 var(--font); }
.iqp-nav button:hover { background: rgba(255,255,255,.16); }
.iqp-stand { width: 22%; height: 10px; margin: 0 auto; background: linear-gradient(#2A2E36, #1A1D24); border-radius: 0 0 10px 10px; }
@media (prefers-reduced-motion: reduce) { .iqp-item { transition: none; } .iqp-brand i { animation: none; } }
.bi-copy .iqp { width: 100%; max-width: 580px; justify-self: start; align-self: start; }
.bi-qual { display: block; margin-top: 6px; font: 600 13px/1.4 var(--font); color: var(--ink-2); }
.bi-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.bi-five .bi-chip { width: auto; min-width: 0; }
@media (max-width: 900px) { .bi-five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .bi-five .bi-chip small { display: none; } .bi-five .bi-chip b { font-size: 11.5px; } .bi-five .bi-chip { padding: 10px 6px; text-align: center; justify-items: center; } }
/* Our Products, by category (v1.61.0) */
.op-cat, .op-dl { margin-top: 26px; }
.op-cat-h { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.op-cat-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #EEF3F8; color: var(--brand); flex: none; } .op-cat-ic svg { width: 21px; height: 21px; }
.op-cat-h h3 { margin: 0; font: 800 1.35rem/1.15 var(--display); letter-spacing: -.01em; } .op-cat-h p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.op-grid .op-card { width: auto; min-width: 0; height: auto; display: flex; flex-direction: column; }
.op-grid .op-stage { position: relative; height: 230px; display: block; padding: 18px 18px 0; overflow: hidden; background: linear-gradient(180deg, var(--t), #fff); }
.op-lap { position: absolute; left: 18px; right: 18px; top: 22px; }
.op-dm .op-lap { right: 82px; }
.op-lap-scr { border-radius: 10px 10px 0 0; background: #1F2329; padding: 6px 6px 0; box-shadow: 0 14px 30px -18px rgba(15,30,38,.55); }
.op-lap-scr img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 4px 4px 0 0; background: #fff; }
.op-lap-base { display: block; height: 9px; margin: 0 -14px; border-radius: 0 0 10px 10px; background: linear-gradient(#D9DDE3, #B9BFC8); }
.op-grid .op-phone { position: absolute; right: 16px; top: 52px; width: 92px; transform: none; margin: 0; }
.op-grid .op-phone img { width: 100%; height: auto; }
.op-grid .op-copy { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.op-grid .op-copy p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.op-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.op-dev { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font); color: var(--muted); background: #F3F5F8; padding: 6px 10px; border-radius: 999px; } .op-dev svg { width: 16px; height: 16px; }
.op-grid .op-go { position: static; }
.op-dl-i { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 14px 16px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(15,30,38,.06); }
.op-dl-i > div { flex: 1; min-width: 0; display: grid; gap: 2px; } .op-dl-i b { font: 700 15px/1.25 var(--display); } .op-dl-i small { color: var(--muted); font-size: 13px; }
.op-dl-i .op-ic { background: var(--t); color: var(--c); }
.op-ribbon-s { font: 700 11px/1 var(--font); padding: 5px 9px; border-radius: 999px; background: #FDECE5; color: #B4381A; }
@media (max-width: 700px) { .op-grid { grid-template-columns: minmax(0, 1fr); } .op-grid .op-stage { height: 210px; } .op-dl-i small { display: none; } }
.op-grid .op-phone { padding: 4px; border-radius: 16px; box-shadow: 0 14px 28px -14px rgba(0,0,0,.5); } .op-grid .op-phone img { border-radius: 12px; }
.op-grid .op-card { min-height: 0 !important; height: auto !important; display: flex !important; }
.op-grid .op-stage { height: 236px; padding: 0; }
.op-lap { left: 50%; right: auto; top: 22px; width: 300px; transform: translateX(-50%); }
.op-dm .op-lap { left: 18px; transform: none; width: 268px; right: auto; }
.op-grid .op-phone { right: 18px; top: 46px; width: 88px; }
.op-grid .op-copy { padding: 16px 18px 16px; }
@media (max-width: 420px) { .op-lap { width: 270px; } .op-dm .op-lap { width: 236px; left: 12px; } .op-grid .op-phone { right: 10px; width: 80px; } }
.op-lap-scr img { height: auto !important; }
@media (max-width: 700px) { .op-grid .op-stage { height: 196px; } }
/* DeepSeeIn Brain Centre (v1.61.0) */
.bc-hero { background: linear-gradient(120deg, #2B3550 0%, #3E4A6E 55%, #5B57C9 120%) !important; color: #fff; }
.bc-hero h2, .bc-hero p, .bc-hero small { color: #fff !important; } .bc-hero p { opacity: .88; }
.bc-hero .dh-ic { background: rgba(255,255,255,.14) !important; color: #fff !important; }
.bc-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.bc-uses { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.bc-use { background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(15,30,38,.06); display: grid; gap: 8px; align-content: start; }
.bc-use-h { display: flex; gap: 10px; align-items: center; } .bc-use-h b { display: block; font-size: 14.5px; } .bc-use-h small { color: var(--muted); font-size: 12px; }
.bc-use p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 700px) { .bc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.room-dash > * { flex-shrink: 0; }
.room-research .main { background-image: none !important; background-color: #F6F7FA !important; }
/* ThermoRespiDose travel, as a maps app's directions (v1.61.0) */
.gd-modes { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 2px 0 10px; padding-bottom: 2px; }
.gd-modes::-webkit-scrollbar { display: none; }
.gd-modes button { flex: none; display: grid; justify-items: center; gap: 3px; min-width: 56px; padding: 7px 6px 6px; border: 0; border-radius: 14px; background: transparent; color: #5F6368; cursor: pointer; font: inherit; }
.gd-modes button svg { width: 21px; height: 21px; } .gd-modes button small { font: 600 10.5px/1 var(--font); }
.gd-modes button:hover { background: #F1F3F4; } .gd-modes button.on { background: #E8F0FE; color: #1A73E8; }
.gd-dirs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 6px; align-items: center; background: #fff; border-radius: 16px; padding: 8px 6px 6px 4px; box-shadow: 0 1px 3px rgba(60,64,67,.18); margin-bottom: 12px; }
.gd-fields { position: relative; display: grid; gap: 6px; }
.gd-rail { position: absolute; left: 15px; top: 24px; bottom: 24px; border-left: 2px dotted #BDC1C6; pointer-events: none; }
.gd-row { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; z-index: 1; }
.gd-row.empty input { background: #F8F9FA; }
.gd-dot { width: 32px; display: grid; place-items: center; font-style: normal; }
.gd-dot.start::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid #5F6368; background: #fff; }
.gd-dot.dest { color: #EA4335; } .gd-dot.dest svg { width: 19px; height: 19px; }
.gd-dot.mid { font: 700 11px/1 var(--font); color: #fff; } .gd-dot.mid::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #5F6368; z-index: -1; }
.gd-in { position: relative; min-width: 0; }
.gd-in input { width: 100%; box-sizing: border-box; border: 1px solid #DADCE0; border-radius: 10px; padding: 9px 12px; font: 500 14px/1.2 var(--font); background: #fff; color: #202124; }
.gd-in input:focus { outline: none; border-color: #1A73E8; box-shadow: 0 0 0 1px #1A73E8; }
.gd-hits { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: #fff; border-radius: 12px; box-shadow: 0 6px 20px rgba(60,64,67,.28); padding: 6px; display: grid; max-height: 300px; overflow-y: auto; }
.gd-hits button { display: flex; align-items: flex-start; gap: 10px; text-align: left; border: 0; background: none; padding: 8px 8px; border-radius: 8px; cursor: pointer; font: inherit; color: #202124; }
.gd-hits button:hover { background: #F1F3F4; } .gd-hits button svg { width: 18px; height: 18px; color: #5F6368; flex: none; margin-top: 1px; }
.gd-hits b { display: block; font-size: 13.5px; } .gd-hits small { display: block; font-size: 12px; color: #5F6368; }
.gd-x { border: 0; background: none; color: #5F6368; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; } .gd-x:hover { background: #F1F3F4; } .gd-x svg { width: 16px; height: 16px; }
.gd-swap { border: 0; background: none; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; color: #5F6368; cursor: pointer; } .gd-swap:hover { background: #F1F3F4; }
.gd-add { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 0 4px; border: 0; background: none; color: #1A73E8; font: 600 13.5px/1 var(--font); padding: 8px 8px; border-radius: 8px; cursor: pointer; }
.gd-add:hover { background: #E8F0FE; } .gd-add svg { width: 18px; height: 18px; }
.gd-hint { color: #5F6368; font-size: 13px; margin: 2px 4px 12px; }
.gd-route { list-style: none; margin: 0 0 12px; padding: 0; display: grid; }
.gd-place { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px; align-items: start; }
.gd-pdot { width: 22px; height: 22px; margin: 10px 0 0 5px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--font); font-style: normal; color: #fff; background: #5F6368; }
.gd-place.start .gd-pdot { background: #fff; border: 3px solid #5F6368; width: 16px; height: 16px; margin: 12px 0 0 8px; }
.gd-place.dest .gd-pdot { background: none; color: #EA4335; } .gd-place.dest .gd-pdot svg { width: 22px; height: 22px; }
.gd-pbody { background: #fff; border-radius: 14px; padding: 8px 10px 10px; box-shadow: 0 1px 3px rgba(60,64,67,.16); display: grid; gap: 8px; min-width: 0; }
.gd-pname { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 6px; border: 0; background: none; padding: 2px; text-align: left; cursor: pointer; font: inherit; color: #202124; }
.gd-pname b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-pname small { grid-row: 2; font-size: 12px; color: #5F6368; } .gd-pname svg { grid-row: 1 / span 2; grid-column: 2; width: 16px; height: 16px; color: #9AA0A6; }
.gd-icons { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.gd-grp { display: flex; gap: 4px; background: #F1F3F4; border-radius: 12px; padding: 3px; }
.gd-ic { display: grid; justify-items: center; gap: 2px; min-width: 52px; border: 0; background: none; border-radius: 9px; padding: 5px 4px 4px; cursor: pointer; color: #5F6368; font: inherit; }
.gd-ic svg { width: 19px; height: 19px; } .gd-ic small { font: 600 10px/1 var(--font); }
.gd-ic.on { background: #fff; color: #1A73E8; box-shadow: 0 1px 3px rgba(60,64,67,.25); }
.gd-stay { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.gd-stay small { font: 700 11px/1 var(--font); color: #5F6368; margin-right: 4px; }
.gd-stay button { border: 0; background: #F1F3F4; color: #3C4043; border-radius: 999px; padding: 6px 10px; font: 600 12px/1 var(--font); cursor: pointer; }
.gd-stay button.on { background: #1A73E8; color: #fff; } .gd-stay em { font: 700 12px/1 var(--font); color: #1A73E8; font-style: normal; margin-left: 4px; }
.gd-leg { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 46px; }
.gd-legline { justify-self: center; width: 0; height: 100%; min-height: 46px; border-left: 3px dotted #9AA0A6; }
.gd-legb { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 6px 4px; border-radius: 10px; cursor: pointer; text-align: left; font: inherit; color: #202124; }
.gd-legb:hover { background: #F1F3F4; } .gd-legb svg { width: 20px; height: 20px; color: #1A73E8; flex: none; }
.gd-legb b { display: block; font-size: 13.5px; } .gd-legb small { display: block; font-size: 12px; color: #5F6368; }
.gd-alt { border: 0; background: #F1F3F4; color: #3C4043; font: 600 11.5px/1 var(--font); padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.gd-legadd { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: #1A73E8; font: 600 12.5px/1 var(--font); padding: 6px 4px; cursor: pointer; } .gd-legadd svg { width: 16px; height: 16px; }
.gd-more { margin: 4px 8px; font-size: 11.5px; color: #80868B; }
.gd-row:focus-within { z-index: 6; } .gd-dirs { z-index: 4; }
.gd-modes { min-height: 58px; flex-shrink: 0; overflow-y: hidden; } .gd-dirs, .gd-route { flex-shrink: 0; min-height: min-content; } .gd-modes button .ic, .gd-modes button svg { display: block; width: 21px; height: 21px; }
.sh-body { grid-auto-rows: max-content; }

/* v1.62.0: the case board is a plain card with a neat border (no screen frame, no red pin, no stand) */
.sr-board { border: 1px solid rgba(18,63,99,.16) !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 10px 28px -18px rgba(16,36,42,.25) !important; padding: 14px 16px 16px !important; }
.sr-board::after { display: none !important; }

/* ---------- v1.62.0: the landing page ---------- */
.bi-copy h1 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.08; }
@media (max-width: 900px) { .bi-copy h1 { font-size: 27px; } }
/* IEQ Pulse headlines: a plain card with a neat border, one line at a time */
.iqh { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 14px; margin: 0 0 22px; padding: 14px 18px 14px; background: #FFFFFF; border: 1px solid rgba(18,63,99,.16); border-radius: 18px; max-width: 640px; }
.iqh-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.iqh-top > b { font: 500 12px/1 var(--font); letter-spacing: 0; color: var(--brand-2); }
.iqh-n { font: 600 12px/1 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.iqh-nav { margin-left: auto; display: flex; gap: 6px; }
.iqh-nav button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #F1F4F7; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.iqh-nav button svg { width: 15px; height: 15px; }
.iqh-nav button:hover { background: #E4EAF0; }
.iqh .iqh-body { min-width: 0; display: block; margin: 0; padding: 0; gap: 0; }
.iqh-body.in { animation: iqhIn .5s ease both; }
@keyframes iqhIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.iqh-tag { display: block; font: 700 12px/1.3 var(--font); color: #E4572E; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iqh-line { margin: 0; font: 600 17px/1.35 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iqh-more { border: 0; background: none; color: var(--brand-2); font: 700 14px/1 var(--font); padding: 6px 0; cursor: pointer; white-space: nowrap; }
.iqh-more:hover { text-decoration: underline; }
@media (max-width: 600px) { .iqh { padding: 12px 14px; } .iqh-line { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .iqh-body.in { animation: none; } }
.iqh-sheet .sr-sheet-in { max-width: 560px; }
.iqh-pop { display: grid; gap: 10px; padding: 8px 4px 4px; }
.iqh-pop h3 { margin: 0; font: 700 22px/1.25 var(--display); }
.iqh-pop p { margin: 0; color: var(--ink); line-height: 1.55; }
.iqh-pop small { color: var(--muted); }
.iqh-pop .btn { justify-self: start; }
/* Downloads sheet */
.dl { display: grid; gap: 16px; }
.dl h2 { margin: 0; }
.dl-i { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: center; padding: 18px; border-radius: 22px; background: var(--t); }
.dl-shot .op-phone { width: 150px; margin: 0 auto; }
.dl-copy { display: grid; gap: 10px; min-width: 0; }
.dl-copy p { margin: 0; line-height: 1.5; }
.dl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.dl-price { font: 700 13px/1 var(--font); color: #fff; background: #C2410C; padding: 6px 10px; border-radius: 999px; }
.dl-foot .btn { margin-left: auto; }
@media (max-width: 600px) { .dl-i { grid-template-columns: 1fr; } .dl-shot .op-phone { width: 130px; } .dl-foot .btn { margin-left: 0; } }
/* Sign-up (two fields) and the profile editor's tabs (v1.62.0) */
.onb-short .card-form { max-width: 520px; margin-inline: auto; }
.onb-short h2 { margin: 0; }
.seg.seg3 { grid-template-columns: repeat(3, 1fr); }
.seg.seg3 .seg-b { justify-content: center; text-align: center; padding: 14px 10px; }
.pe-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px; background: #F1EEE4; border-radius: 14px; }
.pe-tab { flex: 1 1 auto; border: 0; background: none; padding: 10px 14px; border-radius: 10px; font: 600 15px/1.2 var(--font); color: var(--muted); cursor: pointer; }
.pe-tab.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.pe-pane { display: grid; gap: 14px; }
.li-bio { margin: 0 0 10px; line-height: 1.55; }
.li-links { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.li-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand-2); }
.li-links svg { width: 16px; height: 16px; }
/* My Products, by category (v1.62.0) */
.mp-cat { margin-top: 26px; }
.mp-cat-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 20px/1.2 var(--display); color: var(--ink); }
.mp-cat-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #EEF3F8; color: var(--brand-2); }
.mp-cat-ic svg { width: 18px; height: 18px; }
/* ThermoRespiDose indoors: icons floating on the room's objects (v1.62.0) */
.t3-spots { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.t3-spot { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: center; gap: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); }
.t3-spot > i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.94); box-shadow: 0 6px 16px -6px rgba(16,36,42,.45), 0 0 0 1px rgba(18,63,99,.10); color: #475569; transition: transform .15s ease, background .15s; animation: t3bob 3.2s ease-in-out infinite; }
.t3-spot > i svg { width: 19px; height: 19px; }
.t3-spot.on > i { background: #B4235B; color: #fff; }
.t3-spot.sel > i { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #B4235B; }
.t3-spot:hover > i, .t3-spot:focus-visible > i { transform: scale(1.12); }
.t3-spot > span { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); display: none; white-space: nowrap; background: rgba(15,30,38,.88); color: #fff; padding: 5px 9px; border-radius: 9px; font: 600 12px/1.25 var(--font); text-align: center; }
.t3-spot > span b { display: block; font-weight: 700; } .t3-spot > span small { display: block; opacity: .85; font-size: 11px; }
.t3-spot:hover > span, .t3-spot:focus-visible > span, .t3-spot.sel > span { display: block; }
@keyframes t3bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) { .t3-spot > i { animation: none; } }
@media (max-width: 700px) { .t3-spot > i { width: 32px; height: 32px; } .t3-spot > i svg { width: 16px; height: 16px; } }
.t3-hint { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.92); box-shadow: 0 4px 14px -6px rgba(16,36,42,.35); font: 600 13px/1.2 var(--font); color: var(--ink); pointer-events: none; }
.t3-hint svg { width: 16px; height: 16px; color: #B4235B; }
@media (max-width: 700px) { .t3-hint { display: none; } }
.onb .card-form > .btn.ghost.sm { justify-self: start; width: auto; }
@media (hover: none) { .t3-spot:hover > span { display: none; } .t3-spot.sel > span { display: block; } }

/* ---------- v1.63.0: ThermoRespiDose indoors: scene selector, buttons on the scene, Simulate and What-if ---------- */
.sh-runs { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; order: 10; }
.sh-runs .sh-go { justify-content: center; }
.sh-wi { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #F1E4EA; color: #8E1846; font: 800 15px/1 var(--display); cursor: pointer; }
.sh-wi .tt-ic { width: 20px; height: 20px; } .sh-wi:disabled { background: #EEF0F2; color: #A3AAB2; cursor: default; }
.sh-wi.on { background: #8E1846; color: #fff; }
.mh ~ .sh-wi { height: 36px; padding: 0 12px; font-size: 13px; flex: none; }
.rs { display: grid; gap: 10px; padding: 4px 2px 8px; }
.rs-h { margin: 4px 4px 0; font: 500 12px/1 var(--font); letter-spacing: 0; color: var(--muted); }
.rs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rs-t { display: grid; justify-items: center; gap: 8px; padding: 16px 8px 14px; border: 0; border-radius: 16px; background: #F4F1EC; color: var(--ink); cursor: pointer; font: 600 14px/1.2 var(--font); transition: background .15s, transform .15s; }
.rs-t i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: #B4235B; }
.rs-t i svg { width: 22px; height: 22px; }
.rs-t:hover { background: #EDE7DE; } .rs-t:active { transform: scale(.98); }
.rs-t.on { background: #1E3A4C; color: #fff; } .rs-t.on i { background: rgba(255,255,255,.14); color: #fff; }
@media (min-width: 1100px) { .rs-grid { grid-template-columns: repeat(3, 1fr); } }
.wi-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #F6E9EF; color: #6E1236; }
.wi-note > svg { width: 20px; height: 20px; flex: none; } .wi-note span { flex: 1; min-width: 0; display: grid; } .wi-note small { color: #8E5A6E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* labelled buttons floating on the scene */
.t3-pill { position: absolute; left: 0; top: 0; pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 0; border-radius: 999px; background: rgba(255,255,255,.95); box-shadow: 0 8px 20px -10px rgba(16,36,42,.5), 0 0 0 1px rgba(18,63,99,.08); color: var(--ink); cursor: pointer; font: inherit; text-align: left; white-space: nowrap; transition: transform .15s; }
.t3-pill > i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #B4235B; color: #fff; flex: none; }
.t3-pill > i svg { width: 16px; height: 16px; }
.t3-pill b { display: block; font: 700 13px/1.15 var(--font); } .t3-pill small { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; font: 500 11.5px/1.2 var(--font); color: var(--muted); }
.t3-pill:hover { transform: translateY(-1px) scale(1.03); }
.t3-pill.sel { box-shadow: 0 0 0 2px #B4235B, 0 8px 20px -10px rgba(16,36,42,.5); }
.t3-pill.p-time { translate: 50% 0; } .t3-pill.p-outdoors > i { background: #E3A21A; } .t3-pill.p-tune > i { background: #2F7FC1; } .t3-pill.p-person > i { background: #1E3A4C; }
@media (max-width: 700px) { .t3-pill { padding: 4px; } .t3-pill > span { display: none; } .t3-pill > i { width: 30px; height: 30px; } .t3-pill.sel > span { display: block; padding-right: 8px; } }
/* What-if, beside the result */
.wi-card { display: grid; gap: 10px; padding: 14px; margin-bottom: 12px; border-radius: 18px; background: #FBF4F7; }
.wi-h { display: flex; align-items: center; gap: 8px; color: #8E1846; } .wi-h svg { width: 18px; height: 18px; } .wi-h b { flex: 1; font: 800 15px/1 var(--display); }
.wi-s { display: grid; gap: 2px; } .wi-s small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wi-g { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 6px 8px; align-items: baseline; font-size: 13px; }
.wi-g > small { color: var(--muted); font-size: 12px; letter-spacing: 0; }
.wi-r { display: contents; } .wi-r span { color: var(--ink); } .wi-r b { font-weight: 700; font-variant-numeric: tabular-nums; } .wi-r em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.wi-r em.good { color: #1E8A5A; } .wi-r em.bad { color: #C0392B; }
.sh-head:has(.sh-runs) { flex-wrap: wrap; row-gap: 10px; }
@media (max-width: 820px) { .rs-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .rs-t { padding: 10px 4px; gap: 6px; font-size: 12.5px; } .rs-t i { width: 34px; height: 34px; border-radius: 11px; } .rs-t i svg { width: 18px; height: 18px; } .sh-runs .sh-go, .sh-wi { height: 40px; } }

/* ---------- v1.64.0: the hero column matches the film: prose and experts at the top, IEQ Pulse at the bottom ---------- */
@media (min-width: 901px) {
  .bi-hero { align-items: stretch; }
  .bi-hero > .bi-promo { align-self: center; }
  .bi-copy.bi-copy3 { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; align-self: center; min-height: var(--film-h, 0px); }
  .bi-copy3 .bi-prose > .eyebrow { margin-top: 0; }
  .bi-copy3 .bi-faces { margin: 22px 0 0; }
  .bi-copy3 .iqh { margin: 0; max-width: none; }
}
@media (max-width: 900px) { .bi-copy3 .iqh { margin: 18px 0 0; } }
@media (min-width: 901px) { .bi-copy3 .bi-prose { margin-top: -4px; } }
@media (min-width: 901px) { .bi-hero > .bi-promo { max-width: 470px; } .bi-copy3 .bi-faces { margin-top: 26px; } .bi-copy3 .iqh { padding: 16px 20px; } }

/* v1.64.0: maps keep their layers to themselves, so dialogs and sheets always sit above them (the Exit dialog was hidden behind the Government map) */
.leaflet-container { isolation: isolate; z-index: 0; }
.modal-wrap { z-index: 5000; }

/* v1.66.0: trusted devices */
.dv-list { display: grid; gap: 8px; }
.dv-i { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #F6F4EF; }
.dv-i > svg { width: 22px; height: 22px; color: var(--brand-2); justify-self: center; }
.dv-i b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; } .dv-i small { color: var(--muted); font-size: 12px; }
.dv-tag { font: 700 11px/1 var(--font); padding: 4px 8px; border-radius: 999px; background: #E7F0F9; color: var(--brand-2); } .dv-tag.on { background: #E3F4EC; color: #1E8A5A; }
.dv-note { display: block; margin-top: 2px; }
.modal .dv-list { margin: 10px 0; }
.modal-actions { flex-wrap: wrap; justify-content: flex-end; } .modal-actions .btn { white-space: nowrap; }

/* v1.67.0: AI cost controls (administrators) and My AI use */
.ac { max-width: 1040px; gap: 14px; padding-bottom: 90px; }
.ac-head h1 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.5rem, 3vw, 2rem); margin: 6px 0 4px; }
.ac-head p { margin: 0; color: var(--ink-2); }
.ac-card { background: var(--panel); border-radius: 18px; padding: 16px 18px; display: grid; gap: 12px; box-shadow: var(--shadow); min-width: 0; }
.ac-card > header { display: flex; gap: 12px; align-items: flex-start; }
.ac-card h3 { margin: 0; font-size: 1.05rem; } .ac-card header p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.ac-card h4 { margin: 4px 0 6px; font-size: 13px; color: var(--ink-2); letter-spacing: 0; }
.ac-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--brand-3); color: var(--brand-2); display: grid; place-items: center; } .ac-ic svg { width: 18px; height: 18px; }
.ac-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ac-kpis > div { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.ac-kpis small { display: block; color: var(--muted); font-size: 12px; } .ac-kpis b { display: block; font-family: var(--display); font-size: 1.45rem; font-weight: 700; }
.ac-kpis span { font-size: 12.5px; color: var(--ink-2); } .ac-kpis .bad b, .ac-kpis .bad span { color: var(--no); }
.ac-meter { position: relative; height: 10px; border-radius: 999px; background: #EEE9DE; overflow: visible; }
.ac-meter i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--ok); transition: width .4s; }
.ac-meter.warn i { background: var(--accent); } .ac-meter.bad i { background: var(--no); }
.ac-meter b { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--ink-2); opacity: .5; }
.ac-chart { width: 100%; height: auto; display: block; } .ac-chart rect { fill: var(--brand-2); opacity: .85; } .ac-chart rect:hover { opacity: 1; }
.ac-chart text { font: 10px var(--font); fill: var(--muted); }
.ac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ac-grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ac-f { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ac-f > span { font-size: 13.5px; font-weight: 600; } .ac-f > span small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.ac-in { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: #fff; }
.ac-in input { border: 0; outline: 0; background: transparent; min-width: 0; flex: 1; padding: 9px 0; font: inherit; }
.ac-in i { font-style: normal; color: var(--muted); font-size: 13px; white-space: nowrap; }
.ac-f select { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; font: inherit; background: #fff; min-width: 0; width: 100%; }
.ac-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ac-preset { text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 12px 14px; display: grid; gap: 3px; cursor: pointer; font: inherit; color: inherit; }
.ac-preset b { font-size: 15px; } .ac-preset small { color: var(--muted); } .ac-preset span { font-size: 12.5px; color: var(--ink-2); }
.ac-preset.on { border-color: var(--brand-2); background: #F3F8FD; }
.ac-est { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ac-est > div { background: var(--panel-2); border-radius: 12px; padding: 8px 12px; } .ac-est small { display: block; color: var(--muted); font-size: 12px; } .ac-est b { font-size: 1.05rem; }
.ac-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ac-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ac-switch i { flex: none; width: 46px; height: 28px; border-radius: 999px; background: #D9D4C8; position: relative; transition: background .2s; }
.ac-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s; }
.ac-switch input:checked + i { background: var(--ok); } .ac-switch input:checked + i::after { left: 21px; }
.ac-switch input:focus-visible + i { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.ac-switch b { display: block; } .ac-switch small { color: var(--muted); font-size: 13px; }
.ac-tbl td, .ac-tbl th { white-space: nowrap; } .ac-prices input { width: 90px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; }
.ac-save { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%); z-index: 900; display: flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border-radius: 999px; padding: 8px 8px 8px 18px; box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: transform .25s; max-width: calc(100vw - 32px); }
.ac-save { visibility: hidden; } .ac-save.show { transform: translate(-50%, 0); visibility: visible; } .ac-save span { font-size: 14px; white-space: nowrap; } .ac-save .btn.ghost { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; }
@media (max-width: 700px) {
  .ac-kpis, .ac-est { grid-template-columns: 1fr 1fr; } .ac-kpis > div:last-child, .ac-est > div:last-child { grid-column: 1 / -1; }
  .ac-presets { grid-template-columns: 1fr; } .ac-grid.two { grid-template-columns: 1fr; }
  .ac-save { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
.ai-use { display: grid; gap: 8px; }
.au-r { display: grid; grid-template-columns: 86px 1fr 64px; align-items: center; gap: 10px; font-size: 13.5px; } .au-r b { text-align: right; font-size: 13px; }
.au-m { height: 8px; border-radius: 999px; background: #EEE9DE; overflow: hidden; } .au-m i { display: block; height: 100%; background: var(--brand-2); border-radius: 999px; } .au-m.hi i { background: var(--accent); }
.ac > * { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .ac > a.btn { width: auto; justify-self: start; align-self: flex-start; }
@media (max-width: 700px) { .ac-card { padding: 14px; } .ac-chart text { font-size: 11px; } }
.ac-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .ac-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.ac-grid > *, .ac-card > * { min-width: 0; }
@media (max-width: 700px) { .ac-grid:not(.two) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .ac-prices input { width: 64px; } .ac-in { padding: 0 8px; } }
.ac-f { grid-template-rows: 1fr auto; } .ac-f > span { align-self: start; }

/* ===================== v1.68.0: the landing page — the DeepSeeIn TV, compact products, six experts ===================== */
.bi-hero.tvh { grid-template-columns: minmax(280px, .78fr) 1.5fr; gap: clamp(24px, 3.5vw, 52px); align-items: center; min-height: 0; padding: clamp(18px, 3vh, 40px) 0 clamp(14px, 2.5vh, 30px); }
.tvh-copy { display: grid; gap: 4px; align-content: center; }
.tvh-copy h1 { font-family: var(--display); font-weight: 700; letter-spacing: -.025em; font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1.07; margin: 8px 0 18px; }
.tvh-copy h1 em { color: var(--brand-2); font-style: normal; }
.tvh-acts { display: flex; gap: 10px; flex-wrap: wrap; }
/* the set: a slim black panel with a soft shadow on the wall */
.dtv { position: relative; width: 100%; max-width: 860px; justify-self: end; }
.dtv-frame { position: relative; background: linear-gradient(180deg, #1C1F24, #0B0D10); border-radius: 14px; padding: 9px 9px 20px; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 48px -18px rgba(15,30,38,.45), 0 4px 12px rgba(15,30,38,.12); }
.dtv-logo { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font: 600 12px/1 var(--font); letter-spacing: 0; color: rgba(255,255,255,.38); }
.dtv-shadow { display: block; height: 14px; margin: 0 12%; background: radial-gradient(50% 100% at 50% 0, rgba(15,30,38,.18), transparent 70%); }
.dtv-scr { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 5px; background: #0B1A26; color: #fff; isolation: isolate; }
.dtv-scr::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: linear-gradient(115deg, rgba(255,255,255,.07), transparent 32%); }
.dtv-ch { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }
.dtv-ch.on { opacity: 1; visibility: visible; transition: opacity .6s; }
.dtv-chip { display: inline-block; align-self: start; justify-self: start; font: 500 12px/1 var(--font); letter-spacing: 0; color: #8FE3C8; background: rgba(143,227,200,.12); border: 1px solid rgba(143,227,200,.35); padding: 5px 8px; border-radius: 999px; }
.dtv-btn { justify-self: start; align-self: start; font: 600 13px/1 var(--font); color: #0B1A26; background: #fff; border: 0; border-radius: 999px; padding: 8px 13px; text-decoration: none; cursor: pointer; }
.dtv-btn:hover { background: #E7F3FF; }
/* the film: the square film on the right, the title on the left over a blurred copy */
.dtv-film-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(26px) saturate(1.2) brightness(.55); }
.dtv-film-v { position: absolute; top: 0; bottom: 0; right: 0; aspect-ratio: 1; } .dtv-film-v video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dtv-film-v::before { content: ''; position: absolute; inset: 0 auto 0 -1px; width: 28%; background: linear-gradient(90deg, rgba(11,26,38,.85), transparent); z-index: 1; pointer-events: none; }
.dtv-film-copy { position: absolute; left: 5%; top: 9%; width: 36%; display: grid; gap: 8px; z-index: 2; }
.dtv-film-copy b { font: 700 clamp(17px, 2vw, 26px)/1.15 var(--display); letter-spacing: -.01em; }
.dtv-film-copy small { color: rgba(255,255,255,.72); font-size: 13px; }
/* IEQ Pulse */
.dtv-pulse { background: radial-gradient(120% 90% at 85% 10%, #1E5A7A 0, #0E2F44 45%, #0A1C29 100%); padding: 5% 6% 0; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 8px; }
.dtv-pulse-top { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0; }
.dtv-pulse-top b { color: #8FE3C8; } .dtv-n { color: rgba(255,255,255,.55); letter-spacing: 0; }
.dtv-nav { margin-left: auto; display: flex; gap: 6px; }
.dtv-nav button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; } .dtv-nav .ic { width: 15px; height: 15px; }
.dtv-pulse-body { display: grid; gap: 10px; align-content: start; max-width: 88%; }
.dtv-pulse-body h3 { margin: 0; font: 700 clamp(17px, 2.2vw, 28px)/1.2 var(--display); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dtv-pulse-body small { color: rgba(255,255,255,.6); font-size: 12.5px; }
.dtv-pulse > .dtv-btn { position: absolute; left: 6%; bottom: calc(var(--rail-h, 92px) + 14px); }
.dtv-pulse-body.in, .dtv-new-copy.in { animation: tvIn .5s ease both; }
@keyframes tvIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* what's new */
.dtv-new { background: linear-gradient(90deg, #0B1A26 0, #0B1A26 34%, transparent 62%), #0B1A26; }
.dtv-new-pic { position: absolute; inset: 0 0 0 30%; }
.dtv-new-pic img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.dtv-new-pic::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0B1A26 0, rgba(11,26,38,.75) 22%, rgba(11,26,38,0) 55%), linear-gradient(0deg, rgba(11,26,38,.9) 0, transparent 40%); }
.dtv-new-copy { position: absolute; left: 5%; top: 9%; width: 42%; display: grid; gap: 8px; z-index: 2; }
.dtv-new-copy b { font: 700 clamp(17px, 2vw, 25px)/1.15 var(--display); border-left: 3px solid var(--c, #8FE3C8); padding-left: 10px; }
.dtv-new-copy p { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.8); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dtv-dots { position: absolute; right: 4%; top: 7%; display: flex; gap: 5px; z-index: 2; } .dtv-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35); } .dtv-dots i.on { background: #fff; }
/* offer */
.dtv-offer { background: radial-gradient(100% 100% at 80% 20%, #6B3A10 0, #2A1606 60%, #160B03 100%); }
.dtv-offer-copy { position: absolute; left: 6%; top: 9%; display: grid; gap: 8px; }
.dtv-offer-copy .dtv-chip { color: #FFD08A; border-color: rgba(255,208,138,.4); background: rgba(255,208,138,.1); }
.dtv-offer-copy b { font: 800 clamp(30px, 4.5vw, 56px)/1 var(--display); } .dtv-offer-copy p { margin: 0; font-size: 15px; } .dtv-offer-copy small { color: rgba(255,255,255,.7); }
/* the channel rail along the bottom of the screen */
.dtv-rail { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; gap: 8px; padding: 26px 3% 3.2%; background: linear-gradient(0deg, rgba(5,14,22,.92) 0, rgba(5,14,22,.6) 60%, transparent); }
.dtv-tile { position: relative; flex: 1 1 0; min-width: 0; height: clamp(44px, 6.4vw, 66px); border-radius: 9px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08) var(--art, none) center / cover; color: #fff; display: flex; align-items: flex-end; gap: 6px; padding: 7px 9px; font: 600 12.5px/1.1 var(--font); text-align: left; cursor: pointer; overflow: hidden; }
.dtv-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,14,22,.85), rgba(5,14,22,.25)); z-index: 0; }
.dtv-tile > * { position: relative; z-index: 1; } .dtv-tile > span:not(.dtv-tile-ic) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtv-tile-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); flex: none; } .dtv-tile-ic .ic { width: 13px; height: 13px; }
.dtv-tile.on { border-color: #8FE3C8; box-shadow: 0 0 0 1px #8FE3C8; }
.dtv-tile:focus-visible { outline: 2px solid #8FE3C8; outline-offset: 2px; }
.dtv-prog { position: absolute !important; left: 0; bottom: 0; height: 2px; width: 0; background: #8FE3C8; }
.dtv-tile:not(.on) .dtv-prog { width: 0 !important; transition: none !important; }

/* Our Products: three groups side by side */
.pg { padding: clamp(18px, 3vh, 34px) 0 6px; display: grid; gap: 14px; scroll-margin-top: 70px; }
.pg-head h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0; }
.pg-tabs { display: none; }
.pg-cats { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 14px; align-items: start; }
.pg-cat { background: var(--panel); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); display: grid; gap: 10px; min-width: 0; align-self: stretch; align-content: start; }
.pg-cat-h { display: flex; align-items: center; gap: 9px; padding: 0 2px; }
.pg-cat-h h3 { margin: 0; font-size: 15.5px; letter-spacing: -.01em; } .pg-cat-h small { margin-left: auto; color: var(--muted); font-size: 12px; }
.pg-cat-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-3); color: var(--brand-2); } .pg-cat-ic .ic { width: 16px; height: 16px; }
.pg-list { display: grid; gap: 8px; } .pg-cat.wide .pg-list { grid-template-columns: 1fr 1fr; }
.pg-card { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 11px; row-gap: 6px; align-items: center; padding: 11px 12px; border-radius: 13px; background: #FAF8F3; border: 1px solid transparent; color: inherit; text-decoration: none; transition: border-color .15s, background .15s, transform .15s; min-height: 84px; }
.pg-card:hover { background: var(--t); border-color: color-mix(in srgb, var(--c) 30%, transparent); }
.pg-card:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.pg-ic { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--t); color: var(--c); align-self: start; } .pg-ic .ic { width: 21px; height: 21px; }
.pg-txt { min-width: 0; padding-right: 22px; } .pg-txt b { display: block; font-size: 14.5px; line-height: 1.2; letter-spacing: -.01em; } .pg-txt small { display: block; color: var(--ink-2); font-size: 12.5px; line-height: 1.3; margin-top: 2px; }
.pg-meta { display: flex; align-items: center; gap: 8px; }
.pg-price { font: 500 12px/1 var(--font); letter-spacing: 0; padding: 4px 7px; border-radius: 999px; background: #EDEAE2; color: var(--ink-2); } .pg-price.free { background: #E3F4EC; color: #1E8A5A; }
.pg-dev { color: var(--muted); display: inline-flex; } .pg-dev .ic { width: 16px; height: 16px; }
.pg-go { position: absolute; right: 11px; top: 12px; color: var(--c); opacity: .55; transition: opacity .15s, transform .15s; } .pg-go .ic { width: 16px; height: 16px; }
.pg-card:hover .pg-go { opacity: 1; transform: translateX(2px); }

/* the six experts */
.ag6 { gap: 14px; padding-top: clamp(18px, 3vh, 34px); }
.ag6 .bi-ag-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin: 4px 0 0; }
.ag6-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ag6-i { background: var(--panel); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: start; min-width: 0; }
.ag6-face { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--who) 14%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--who) 40%, #fff); }
.ag6-face img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.ag6-i.art .ag6-face img { object-fit: contain; object-position: center; transform: scale(1.12); }
.ag6-i b { display: block; font-size: 14px; } .ag6-i .bi-role { display: block; color: var(--who); font-size: 12px; font-weight: 600; } .ag6-i .bi-qual { display: block; color: var(--ink-2); font-size: 11.5px; line-height: 1.35; margin-top: 3px; }

@media (max-width: 1180px) {
  .ag6-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .bi-hero.tvh { grid-template-columns: 1fr; gap: 16px; }
  .dtv { justify-self: stretch; max-width: none; }
  .pg-cats { grid-template-columns: 1fr 1fr; } .pg-cat.wide { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 700px) {
  .tvh-copy h1 { font-size: 27px; margin-bottom: 12px; } .tvh-acts .btn { flex: 1 1 0; justify-content: center; }
  .dtv-frame { padding: 6px 6px 14px; border-radius: 12px; } .dtv-logo { font-size: 7px; bottom: 3px; }
  /* on a phone the channel tiles sit under the picture, inside the frame */
  .dtv-scr { aspect-ratio: auto; overflow: visible; background: transparent; display: grid; }
  .dtv-scr > .dtv-ch { position: relative; grid-area: 1 / 1; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 5px; }
  .dtv-scr::after { display: none; }
  .dtv-rail { position: static; grid-area: 2 / 1; padding: 6px 0 0; background: none; gap: 5px; }
  .dtv-tile { height: 40px; padding: 5px 6px; font-size: 11px; gap: 4px; } .dtv-tile-ic { width: 18px; height: 18px; } .dtv-tile-ic .ic { width: 11px; height: 11px; }
  .dtv-pulse > .dtv-btn { bottom: 12px; } .dtv-pulse { --rail-h: 0px; padding-top: 4%; }
  .dtv-film-copy, .dtv-new-copy { width: 52%; top: 7%; gap: 6px; } .dtv-film-copy small { display: none; } .dtv-btn { font-size: 12px; padding: 7px 10px; }
  .dtv-new-copy p { font-size: 12px; -webkit-line-clamp: 3; } .dtv-new-pic { left: 40%; }
  .dtv-pulse-body h3 { font-size: 17px; } .dtv-nav button { width: 26px; height: 26px; }
  .pg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #EEEAE0; padding: 4px; border-radius: 12px; }
  .pg-tabs button { border: 0; background: transparent; border-radius: 9px; padding: 8px 4px; font: 600 13px/1 var(--font); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
  .pg-tabs button .ic { width: 15px; height: 15px; } .pg-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
  .pg-cats { grid-template-columns: 1fr; }
  .pg-cats[data-on="learn"] .pg-cat:not(.learn), .pg-cats[data-on="consult"] .pg-cat:not(.consult), .pg-cats[data-on="research"] .pg-cat:not(.research) { display: none; }
  .pg-cat { padding: 8px; box-shadow: none; background: transparent; } .pg-cat-h { display: none; }
  .pg-cat.wide .pg-list { grid-template-columns: 1fr; }
  .pg-card { min-height: 0; background: var(--panel); box-shadow: var(--shadow); padding: 10px 12px; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-rows: auto; }
  .pg-ic { grid-row: auto; width: 38px; height: 38px; align-self: center; } .pg-meta { flex-direction: column; align-items: flex-end; gap: 5px; } .pg-txt { padding-right: 0; } .pg-go { display: none; }
  .ag6-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ag6-i { padding: 10px; grid-template-columns: 40px minmax(0, 1fr); } .ag6-face { width: 40px; height: 40px; }
}
.dtv-film-v { top: 0; right: 0; bottom: auto; height: 100%; width: auto; aspect-ratio: 1 / 1; }
.dtv-ch b, .dtv-ch h3, .dtv-ch p { color: #fff; } .dtv-film-copy { width: 40%; } .dtv-film-copy .dtv-btn, .dtv-new-copy .dtv-btn { white-space: nowrap; }
.pg-cat { align-self: start; }
.ag6 .bi-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .ag6 .bi-chip { max-width: none; min-width: 0; }
@media (max-width: 900px) { .ag6 .bi-five { display: flex; } .ag6 .bi-chip { min-width: 148px; } }
.dtv-film-bg { filter: blur(30px) saturate(1.1) brightness(.32); }
.dtv-film-v::before { width: 30%; background: linear-gradient(90deg, rgba(10,20,28,.95), rgba(10,20,28,0)); }
.dtv-tile { height: clamp(42px, 5.2vw, 56px); }
@media (max-width: 700px) {
  .dtv-film-copy { display: none; } .dtv-film-v { left: 0; right: 0; margin: 0 auto; }
  .dtv-film-v::before { display: none; }
  .ag6-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ag6-i { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 6px; padding: 10px 6px; }
  .ag6-face { width: 52px; height: 52px; } .ag6-i b { font-size: 13px; } .ag6-i .bi-role { font-size: 11.5px; line-height: 1.25; } .ag6-i .bi-qual { display: none; }
}
.dtv-pulse-body { margin: 0; padding: 0; justify-self: start; } .dtv-pulse-top { justify-self: stretch; }
.tvh-copy h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); } .dtv { max-width: 820px; } .pg-card { min-height: 0; }

/* ===================== v1.69.0: the TV in a drawn living room; product tiles in the app-catalogue style ===================== */
.bi-hero.tvh { grid-template-columns: 1fr; gap: 6px; padding: clamp(10px, 2vh, 22px) 0 4px; justify-items: center; }
.tvh-copy { text-align: center; justify-items: center; }
.tvh-copy h1 { font-size: clamp(1.6rem, 2.5vw, 2.3rem); margin: 6px 0 0; max-width: 980px; }
.dtv.room { width: min(100%, 1320px, calc((100dvh - 200px) * 1.777)); max-width: none; justify-self: center; position: relative; }
.room-view { position: relative; }
.room-art { position: relative; aspect-ratio: 1672 / 941; }
.room-art picture, .room-art img { display: block; width: 100%; height: 100%; }
/* the drawing's edges fade into the page */
.room-art img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 86%, transparent 100%); mask-composite: intersect; }
/* the screen, exactly on the drawn TV (x 355–1239, y 105–540 of 1672 × 941) */
.room .dtv-scr { position: absolute; left: 21.17%; top: 11.06%; width: 52.99%; height: 46.44%; aspect-ratio: auto; border-radius: 2px; background: #080E14; }
.room .dtv-scr::after { background: linear-gradient(115deg, rgba(255,255,255,.06), transparent 30%); }
/* the film fills the screen */
.dtv-film-v { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; } .dtv-film-v::before { display: none; }
.dtv-film-v video { width: 100%; height: 100%; object-fit: cover; }
/* the channel buttons along the bottom; they step aside while the film plays */
.room .dtv-rail { padding: 18px 2.5% 2.4%; gap: 6px; transition: opacity .5s, transform .5s; }
.room.quiet .dtv-rail { opacity: 0; transform: translateY(8px); pointer-events: none; }
.room .dtv-tile { height: clamp(34px, 3.6vw, 48px); font-size: clamp(11px, 1vw, 13px); border-radius: 7px; padding: 5px 8px; }
.room .dtv-tile-ic { width: 20px; height: 20px; }
.room .dtv-pulse > .dtv-btn { bottom: calc(clamp(34px, 3.6vw, 48px) + 22px); }
.room .dtv-pulse-body h3 { font-size: clamp(15px, 1.7vw, 24px); }
.room .dtv-new-copy b { font-size: clamp(15px, 1.6vw, 22px); } .room .dtv-new-copy p { font-size: clamp(11.5px, 1vw, 13.5px); -webkit-line-clamp: 3; }
.room .dtv-pulse { padding: 4% 5% 0; }

/* products: white tiles with solid app icons */
.pg-cat { background: transparent; box-shadow: none; padding: 0; gap: 10px; }
.pg-cat-h { padding: 0 2px 8px; border-bottom: 1px solid var(--line); }
.pg-cat-h h3 { font-size: 16px; font-weight: 700; }
.pg-card { background: #fff; border: 1px solid #ECE6DA; grid-template-columns: 52px minmax(0, 1fr); column-gap: 13px; padding: 13px 14px; box-shadow: 0 1px 2px rgba(15,30,38,.04); }
.pg-card:hover { background: #fff; border-color: color-mix(in srgb, var(--c) 45%, #ECE6DA); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--c) 45%, transparent); transform: translateY(-1px); }
.pg-ic { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 4px 10px -4px color-mix(in srgb, var(--c) 70%, transparent); }
.pg-ic .ic { width: 27px; height: 27px; stroke-width: 1.9; }

@media (max-width: 980px) { .dtv.room { width: 100%; } }
@media (max-width: 700px) {
  .tvh-copy h1 { font-size: 24px; }
  /* the room cropped around the TV, edge to edge */
  .dtv.room { margin: 0 -16px; width: calc(100% + 32px); }
  .room-view { overflow: hidden; aspect-ratio: 100 / 66; }
  .room-art { width: 177.8%; margin-left: -34.6%; margin-top: -4.6%; }
  .room-art img { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%); }
  .room-view { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
  .room > .dtv-rail { position: static; display: flex; padding: 0 16px; margin-top: -4px; background: none; gap: 6px; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .room > .dtv-rail .dtv-tile { height: 40px; font-size: 12px; background: #13202B; justify-content: center; align-items: center; }
  .room > .dtv-rail .dtv-tile::before { display: none; }
  .room .dtv-scr > .dtv-ch { position: absolute; aspect-ratio: auto; border-radius: 0; }
  .room .dtv-scr { display: block; overflow: hidden; }
  .room .dtv-new-copy { width: 54%; top: 6%; gap: 4px; } .room .dtv-new-copy .dtv-chip { display: none; } .room .dtv-new-copy p { -webkit-line-clamp: 2; font-size: 11px; }
  .room .dtv-new-copy b { font-size: 14px; } .room .dtv-btn { font-size: 11px; padding: 6px 9px; }
  .room .dtv-pulse { padding: 3.5% 5% 0; gap: 4px; } .room .dtv-pulse-top { font-size: 10px; } .room .dtv-nav button { width: 22px; height: 22px; }
  .room .dtv-pulse-body { gap: 5px; } .room .dtv-pulse-body h3 { font-size: 14px; -webkit-line-clamp: 2; } .room .dtv-pulse-body small { font-size: 10.5px; }
  .room .dtv-pulse > .dtv-btn { bottom: 8px; left: 5%; } .room .dtv-pulse-body .dtv-chip { font-size: 9px; padding: 3px 6px; }
  .room .dtv-dots { top: 5%; }
  .pg-card { grid-template-columns: 46px minmax(0, 1fr) auto; } .pg-ic { width: 46px; height: 46px; border-radius: 12px; } .pg-ic .ic { width: 24px; height: 24px; }
  .pg-tabs button { gap: 0; }
}
.room .dtv-new-pic { left: 44%; } .room .dtv-new-pic::before { background: linear-gradient(90deg, #0B1A26 0, rgba(11,26,38,.6) 16%, rgba(11,26,38,0) 45%), linear-gradient(0deg, rgba(11,26,38,.85) 0, transparent 38%); }
.room .dtv-new-copy { width: 40%; } .room .dtv-new-copy b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .room-view { aspect-ratio: 100 / 74; }
  .room-art { width: 151%; margin-left: -22%; margin-top: -5.4%; }
  .room .dtv-new-pic { left: 46%; } .room .dtv-new-copy { width: 48%; }
}

/* ===================== v1.70.0: landing — no nav links on desktop, Pricing button, round channel buttons ===================== */
@media (min-width: 901px) { .topbar .tb-nav { display: none; } .topbar .tb-right { margin-left: auto; } }
.tb-price { gap: 4px; } .tb-price .ic { width: 16px; height: 16px; }
@media (max-width: 900px) { .tb-price { display: none; } }
/* the channel buttons: small circles with a ring that fills as the channel plays */
.room .dtv-rail { display: flex; justify-content: center; gap: clamp(14px, 2vw, 26px); padding: 26px 0 2.6%; background: linear-gradient(0deg, rgba(5,14,22,.55), transparent); }
.dtv-dot { background: none; border: 0; padding: 0; display: grid; justify-items: center; gap: 4px; color: #fff; cursor: pointer; font: 600 11.5px/1 var(--font); }
.dtv-dot small { font: inherit; opacity: .85; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.dtv-ring { --p: 0; width: clamp(34px, 3.1vw, 44px); height: clamp(34px, 3.1vw, 44px); border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.28); transition: transform .2s; }
.dtv-dot.on .dtv-ring { background: conic-gradient(#8FE3C8 calc(var(--p) * 360deg), rgba(255,255,255,.25) 0); }
.dtv-dot-ic { width: calc(100% - 5px); height: calc(100% - 5px); border-radius: 50%; display: grid; place-items: center; background: rgba(10,22,32,.82); backdrop-filter: blur(6px); }
.dtv-dot-ic .ic { width: 45%; height: 45%; }
.dtv-dot:hover .dtv-ring { transform: scale(1.07); } .dtv-dot.on small { opacity: 1; font-weight: 700; }
.dtv-dot:focus-visible { outline: none; } .dtv-dot:focus-visible .dtv-ring { box-shadow: 0 0 0 2px #8FE3C8; }
/* news: More sits under the text */
.dtv-pulse-body .dtv-more { position: static; margin-top: 2px; }
.room .dtv-pulse > .dtv-btn { display: none; }
.room .dtv-pulse-body h3 { -webkit-line-clamp: 2; }
/* latest: the picture fills the screen, one line on top */
.room .dtv-new-pic { inset: 0; left: 0; } .room .dtv-new-pic::before { background: linear-gradient(180deg, rgba(8,16,24,.82) 0, rgba(8,16,24,.25) 22%, transparent 40%), linear-gradient(0deg, rgba(8,16,24,.55) 0, transparent 30%); }
.room .dtv-new-pic img { object-position: center; }
.room .dtv-new-copy { left: 3.5%; right: 12%; top: 5%; width: auto; display: flex; align-items: center; gap: 12px; }
.dtv-new-line { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(12px, 1.15vw, 15px); color: #fff; }
.dtv-new-line b { font-weight: 700; } .dtv-new-line span { opacity: .85; }
.room .dtv-new-copy b { border: 0; padding: 0; font: inherit; font-weight: 700; display: inline; white-space: nowrap; }
.dtv-new-go { flex: none; color: #8FE3C8; font: 700 clamp(12px, 1.1vw, 14px)/1 var(--font); text-decoration: none; }
.room .dtv-dots { top: auto; bottom: 4%; right: 3.5%; }
/* "How the agents think" in place of "One method" */
.bi-chip-go { cursor: pointer; border: 0; font: inherit; text-align: left; background: #1F6FB2 !important; color: #fff; }
.bi-chip-go b, .bi-chip-go small { color: #fff !important; } .bi-chip-go .bi-chip-ic { background: rgba(255,255,255,.18); color: #fff; }
.bi-chip-go:hover { background: #185C95 !important; }
@media (max-width: 900px) {
  .ag6 .bi-five { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
  .ag6 .bi-five::-webkit-scrollbar { display: none; }
  .ag6 .bi-chip { flex: 0 0 auto; scroll-snap-align: start; }
}
@media (max-width: 700px) {
  .room > .dtv-rail { justify-content: center; gap: 22px; margin-top: 2px; padding: 0; }
  .room > .dtv-rail .dtv-dot { color: var(--ink); } .room > .dtv-rail .dtv-dot small { text-shadow: none; opacity: .8; }
  .room > .dtv-rail .dtv-ring { width: 36px; height: 36px; background: #D9D3C6; }
  .room > .dtv-rail .dtv-dot.on .dtv-ring { background: conic-gradient(#1F6FB2 calc(var(--p) * 360deg), #D9D3C6 0); }
  .room > .dtv-rail .dtv-dot-ic { background: #13202B; }
  .room .dtv-new-copy { top: 6%; gap: 8px; } .dtv-new-line span { display: none; }
}
.dtv-dot-ic { color: #fff; }
.room .dtv-new-pic::before { background: linear-gradient(180deg, rgba(8,16,24,.94) 0, rgba(8,16,24,.8) 11%, rgba(8,16,24,0) 26%), linear-gradient(0deg, rgba(8,16,24,.6) 0, transparent 30%); }
.room .dtv-new-copy { top: 3.2%; }
@media (max-width: 700px) { .room .dtv-new-copy { top: 3%; } .room .dtv-new-pic::before { background: linear-gradient(180deg, rgba(8,16,24,.94) 0, rgba(8,16,24,.8) 14%, rgba(8,16,24,0) 32%); } }

/* ===================== v1.70.0: Buonda — Design stage in groups, style match, drawing set, panes that move ===================== */
.bd-dz { grid-template-columns: minmax(0, 1fr) minmax(320px, 390px); }
.bd-dz-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(60,64,67,.07); }
.bd-dz-groups button { display: grid; justify-items: center; gap: 2px; padding: 7px 4px 6px; border: 0; border-radius: 11px; background: transparent; color: var(--bd-mute); font: 600 12px/1.1 var(--font); cursor: pointer; position: relative; }
.bd-dz-groups button .tt-ic { width: 18px; height: 18px; } .bd-dz-groups button small { font: 600 10px/1 var(--font); color: inherit; opacity: .75; }
.bd-dz-groups button:hover { color: var(--bd-ink); } .bd-dz-groups button.on { background: #fff; color: #174EA6; box-shadow: 0 1px 3px rgba(60,64,67,.18); }
.bd-dz-groups button.bad::after { content: ''; position: absolute; top: 6px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: #D93025; }
.bd-dz-tabs { gap: 4px; } .bd-dz-tabs button { padding: 5px 11px; }
/* the signature architect dropdown */
.bd-ar-sel { display: grid; gap: 4px; } .bd-ar-sel > span:first-child { font-size: 11.5px; color: var(--bd-mute); letter-spacing: 0; }
.bd-ar-sel .sel-face { text-transform: none; letter-spacing: 0; background-color: #fff; min-height: 42px; padding-top: 9px; padding-bottom: 9px; border: 1px solid #DADCE0; border-radius: 10px; font: 500 14px var(--font); color: #1F2328; }
.bd-ar-sel select { width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--bd-line, #E8EAED); background: #fff; font: 500 14px var(--font); color: var(--bd-ink); }
/* at a glance */
.bd-gl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bd-gl-c { background: #F6F8FB; border-radius: 12px; padding: 8px 10px; display: grid; gap: 1px; } .bd-gl-c small { color: var(--bd-mute); font-size: 11px; } .bd-gl-c b { font: 700 16px var(--display); } .bd-gl-c em { font-style: normal; font-size: 11px; color: var(--bd-mute); }
.bd-gl-c.bad { background: #FCE8E6; } .bd-gl-c.bad b, .bd-gl-c.bad em { color: #C5221F; }
.bd-dz-moves { display: flex; flex-wrap: wrap; gap: 6px; } .bd-dz-moves .bd-chip { min-height: 30px; padding: 4px 11px; font-size: 12.5px; }
/* the style match beside the model */
.bd-dzm { position: absolute; z-index: 5; right: 12px; top: 56px; width: 250px; display: grid; gap: 6px; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--bd-sh); }
.bd-dzm-h { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 6px; } .bd-dzm-h b { font: 800 14px var(--display); } .bd-dzm-h small { grid-column: 1; color: var(--bd-mute); font-size: 11px; } .bd-dzm-h .bd-ib { grid-row: 1 / span 2; grid-column: 2; width: 28px; height: 28px; }
.bd-dzm.min .bd-dzm-b, .bd-dzm.min > .bd-dz-p { display: none; } .bd-dzm.min { width: auto; }
.bd-dzm-b { display: grid; gap: 4px; } .bd-dzm-b .bd-dz-lab { margin-top: 4px; } .bd-dzm-b .bd-chip { justify-self: start; min-height: 28px; padding: 3px 10px; font-size: 12px; margin-top: 4px; }
.bd-dzm-r { display: grid; grid-template-columns: minmax(0, 1fr) 60px 36px; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 2px; border-radius: 8px; cursor: pointer; font: 500 13px var(--font); color: var(--bd-ink); text-align: left; }
.bd-dzm-r:hover { background: #F1F3F4; } .bd-dzm-r span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bd-dzm-r b { font-size: 12.5px; text-align: right; }
.bd-dzm-bar { display: block; height: 6px; border-radius: 999px; background: #E8EAED; overflow: hidden; } .bd-dzm-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8AB4F8, #1A73E8); }
/* the style match list */
.bd-sm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bd-sm-i { border-radius: 12px; background: #F8F9FA; } .bd-sm-i.open { background: #fff; box-shadow: 0 0 0 1px #D2E3FC; }
.bd-sm-h { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 70px 40px; align-items: center; gap: 8px; padding: 9px 10px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.bd-sm-h span { display: grid; min-width: 0; } .bd-sm-h span b { font-size: 13.5px; } .bd-sm-h span small { color: var(--bd-mute); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-sm-p { text-align: right; font-size: 13px; } .bd-sm-i.opp .bd-dzm-bar i { background: linear-gradient(90deg, #F6AEA9, #D93025); }
.bd-sm-d { display: grid; gap: 6px; padding: 0 10px 10px; }
.bd-sm-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .bd-sm-l li { display: grid; grid-template-columns: 16px 1fr; gap: 6px; font-size: 12.5px; line-height: 1.4; } .bd-sm-l .tt-ic { width: 14px; height: 14px; margin-top: 2px; }
.bd-sm-l.ok .tt-ic { color: #1E8E3E; } .bd-sm-l.mid .tt-ic { color: #E37400; } .bd-sm-l.bad .tt-ic { color: #D93025; }
/* the drawing set */
.bd-dws { display: grid; gap: 10px; } .bd-dws-g { display: grid; gap: 4px; }
.bd-dws-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.bd-dws-i { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid #E8EAED; border-radius: 10px; background: #fff; font: 500 12.5px/1.2 var(--font); color: var(--bd-ink); text-align: left; cursor: pointer; min-width: 0; }
.bd-dws-i:hover { border-color: #AECBFA; background: #F8FBFF; } .bd-dws-i .tt-ic { width: 16px; height: 16px; flex: none; color: #1A73E8; } .bd-dws-i span { min-width: 0; }
.bd-dwg-g { padding: 8px 12px 2px; font-size: 12px; letter-spacing: 0; color: var(--bd-mute); }
.bd-dwg-l { overflow-y: auto; max-height: 100%; }
@media (max-width: 820px) { .bd-dwg-g { display: none; } .bd-dzm { top: 50px; right: 8px; width: 210px; } }
/* panes that move */
.bd-grip { position: absolute; z-index: 2; top: 6px; left: 4px; width: 16px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #9AA0A6; cursor: grab; padding: 0; touch-action: none; }
.bd-grip:hover { background: rgba(60,64,67,.08); color: #5F6368; } .bd-float.dragging { opacity: .92; box-shadow: 0 12px 32px -8px rgba(30,60,120,.45) !important; } .bd-float.dragging .bd-grip { cursor: grabbing; }
.bd-float { position: relative; } .bd-mtools.bd-float, .bd-score-dock.bd-float, .bd-rsheet.bd-float, .bd-plan-leg.bd-float, .bd-mtime.bd-float, .bd-mpop.bd-float, .bd-dzm.bd-float { position: absolute; }
.bd-mtools.bd-float { padding-top: 22px; } .bd-mtools.bd-float > .bd-grip { left: 50%; transform: translateX(-50%); top: 0; width: 26px; height: 18px; background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.25); }
.bd-score-dock.bd-float > .bd-grip { top: 8px; left: 6px; z-index: 3; } .bd-score-dock.bd-float .bd-sc-h { padding-left: 14px; }
.bd-rsheet.bd-float > .bd-grip { top: 12px; left: 4px; } .bd-rsheet.bd-float .bd-rsheet-h { padding-left: 22px; } .bd-rsheet.moved { resize: both; min-width: 300px; min-height: 240px; }
.bd-plan-leg.bd-float { padding-left: 22px; } .bd-mtime.bd-float { padding-left: 24px; } .bd-mpop.bd-float { padding-left: 22px; } .bd-dzm.bd-float { padding-left: 22px; }
.bd-ar-sel select { text-transform: none; letter-spacing: 0; font: 500 14px/1.3 var(--font); background: #fff; border: 1px solid #DADCE0; height: 40px; appearance: auto; }
.bd-dz-card .bd-ar-sel select { text-transform: none !important; letter-spacing: 0 !important; background: #fff !important; color: #1F2328 !important; border: 1px solid #DADCE0 !important; border-radius: 10px !important; height: 40px; padding: 0 10px; font: 500 14px var(--font) !important; }
@media (max-width: 820px) { .bd-dz { grid-template-columns: minmax(0, 1fr); } }
.room .dtv-rail { pointer-events: none; } .room .dtv-rail .dtv-dot { pointer-events: auto; } .room.quiet .dtv-rail .dtv-dot { pointer-events: none; }

/* v1.71.0 · TRD blood flow: flow per part, L/min */
.b3-ftags[hidden] { display: none; }
.b3-ftag { display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 7px; border-radius: 8px; background: rgba(255,255,255,.92); color: #1d1d1f; font: 500 10.5px/1.25 var(--font); box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.b3-ftag b { font-weight: 700; font-size: 12px; color: #B42326; }
.b3-ftag i { font-style: normal; color: #6e6e73; margin-left: 4px; }
.b3-ftag.co b { color: #1d1d1f; }
.hx-flowkey { display: flex; align-items: center; gap: 8px; padding: 0 10px 6px; font-size: 11.5px; color: var(--ink-2); justify-content: center; text-align: left; }
.hx-pulse { position: relative; flex: 0 0 42px; height: 6px; border-radius: 3px; background: #D7383A; overflow: hidden; }
.hx-pulse i { position: absolute; top: 0; bottom: 0; width: 12px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95)); animation: hxPulse 1.4s linear infinite; }
@keyframes hxPulse { from { left: -12px; } to { left: 42px; } }
@media (prefers-reduced-motion: reduce) { .hx-pulse i { animation: none; left: 15px; } }
/* v1.71.0 · Architects: what users see */
.ar-names h3 { margin: 0 0 8px; font-size: 15px; }
.ar-nms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-bottom: 10px; }
.ar-nm { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line, #e5e5ea); border-radius: 12px; cursor: pointer; }
.ar-nm.on { border-color: #0071e3; background: rgba(0,113,227,.05); }
.ar-nm input { margin-top: 3px; }
.ar-nm span { display: grid; gap: 2px; } .ar-nm small { color: var(--ink-2); line-height: 1.35; }

/* v1.72.0 · Buonda: the collective */
.bd-col { display: grid; gap: 12px; }
.bd-cat { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.bd-cat-c { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #f2f2f5; color: #1d1d1f; font-size: 12.5px; }
.bd-cat-c b { font-weight: 600; } .bd-cat-c small { color: #6e6e73; font-variant-numeric: tabular-nums; }
.bd-cat-c.on { background: #e8f1fd; color: #0a4ea8; } .bd-cat-c.on small { color: #0a4ea8; }
.bd-cv { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid #eee; }
.bd-cv:first-of-type { border-top: 0; }
.bd-cv-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.bd-cv-h b { font-size: 13px; } .bd-cv-h small { color: #6e6e73; font-size: 11.5px; flex: 1 1 auto; min-width: 0; }
.bd-cv-ok { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: #1a7f37; }
.bd-cv-ok svg { width: 13px; height: 13px; }
.bd-cv-r { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 3.2em; align-items: center; gap: 8px; font-size: 12.5px; color: #3a3a3c; }
.bd-cv-r > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-cv-r > b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bd-cv-bar { position: relative; height: 8px; border-radius: 4px; background: #f0f0f3; overflow: hidden; }
.bd-cv-pm { position: absolute; top: 0; bottom: 0; background: rgba(0,113,227,.13); }
.bd-cv-p { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #9cb7d8; }
.bd-cv-r.top .bd-cv-p { background: #0071e3; }
.bd-cv-r.mine > span { font-weight: 600; color: #1d1d1f; }
.bd-cv-r.mine > span::after { content: ' · yours'; font-weight: 400; color: #6e6e73; }
.bd-dzm-ag { display: grid; grid-template-columns: minmax(0, 1fr) 60px 3em; gap: 6px; align-items: center; font-size: 12px; margin: 4px 0; }
.bd-dzm-ag b { text-align: right; }
/* v1.73.0 · the library at work */
.bd-ev-warn { color: #9a5b00; background: #fff6e5; border-radius: 8px; padding: 6px 10px; }
.bd-ev-l li { font-size: 12.5px; }
.bd-ev-note { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }

/* v1.74.0 · the site overlaps an existing building */
.bd-pk-ask { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: #fff6e5; border: 1px solid #f5d9a6; display: grid; gap: 6px; }
.bd-pk-ask p { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 13px; }
.bd-pk-ask p svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: #b06000; }
.bd-pk-ask .bd-pk-q { font-weight: 600; }
.bd-pk-ask.ok { background: #e9f6ee; border-color: #b9e0c6; } .bd-pk-ask.ok p svg { color: #188038; }
.bd-pk-ask.bad { background: #fdecea; border-color: #f5c2bd; }

/* v1.74.0 · studio tools on the 3D model */
.bd-st-sep { display: block; height: 1px; margin: 3px 6px; background: rgba(60,64,67,.18); }
.bd-st-pop { position: absolute; right: 150px; bottom: 10px; z-index: 3; width: min(320px, calc(100% - 180px)); max-height: 60%; overflow: auto; padding: 12px 14px; border-radius: 14px; background: var(--bd-glass, rgba(255,255,255,.9)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--bd-sh, 0 6px 24px rgba(0,0,0,.12)); display: grid; gap: 8px; font-size: 13px; }
.bd-st-pop[hidden], .bd-st-pad[hidden] { display: none; }
.bd-st-pop > b { font-size: 14px; } .bd-st-pop p { margin: 0; color: var(--ink-2); line-height: 1.4; }
.bd-st-pop input[type=text] { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid #d2d2d7; font: inherit; }
.bd-st-read { font-weight: 600; color: #b3261e !important; }
.bd-st-rng { display: grid; grid-template-columns: minmax(0, 1fr) 4em; gap: 8px; align-items: center; } .bd-st-rng b { text-align: right; }
.bd-st-vs { display: grid; gap: 4px; } .bd-st-v { display: flex; gap: 6px; align-items: center; } .bd-st-v .bd-chip { flex: 1 1 auto; justify-content: flex-start; }
.bd-st-ns { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.bd-st-ns li { display: flex; gap: 6px; align-items: flex-start; justify-content: space-between; padding: 6px 8px; border-radius: 10px; background: rgba(26,115,232,.06); }
.bd-st-ns li.done { opacity: .55; text-decoration: line-through; }
.bd-st-ns small { color: var(--ink-2); } .bd-st-na { display: flex; gap: 2px; flex: 0 0 auto; }
.bd-st-pad { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; padding: 8px; border-radius: 16px; background: var(--bd-glass, rgba(255,255,255,.9)); box-shadow: var(--bd-sh, 0 6px 24px rgba(0,0,0,.12)); }
.bd-st-pad button { width: 46px; height: 46px; border-radius: 12px; border: 0; background: #fff; font-size: 18px; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0,0,0,.12); touch-action: none; }
@media (max-width: 820px) { .bd-st-pop { right: 8px; left: 8px; width: auto; bottom: 64px; } .bd-st-sep { width: 1px; height: auto; margin: 6px 2px; } .bd-st-pad { bottom: 120px; } }

/* v1.75.0 · editing the plan by hand */
.bd-pe-bar { display: grid; gap: 6px; margin: 4px 0 8px; }
.bd-pe-tools, .bd-pe-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bd-pe-tools .bd-chip.on { background: #0071e3; color: #fff; }
.bd-pe-sep { width: 1px; height: 22px; background: #d2d2d7; margin: 0 2px; }
.bd-pe-acts select, .bd-pe-name { height: 32px; border-radius: 10px; border: 1px solid #d2d2d7; padding: 0 8px; font: inherit; font-size: 13px; background: #fff; max-width: 220px; }
.bd-pe-hint { color: var(--ink-2); font-size: 12px; }
svg.pe-on { touch-action: none; }
svg.pe-rooms .pl-room { cursor: move; }
.pe-ghost rect { fill: rgba(0,113,227,.12); stroke: #0071e3; stroke-width: 2; stroke-dasharray: 6 4; }
.pe-lab text { font: 600 12px var(--font, system-ui); fill: #fff; text-anchor: middle; } .pe-lab rect { fill: #1d1d1f; opacity: .85; }
.pe-lab.big text { font-size: 14px; }
.pe-fi rect { fill: rgba(181,138,99,.28); stroke: #7b5a3e; stroke-width: 1.5; cursor: move; }
.pe-fi.sel rect { fill: rgba(0,113,227,.2); stroke: #0071e3; stroke-width: 2.5; }
.pe-fi text { font: 500 10px var(--font, system-ui); fill: #3c2a1d; text-anchor: middle; pointer-events: none; }
.pe-meas line { stroke: #d93025; stroke-width: 2; } .pe-meas circle { fill: #d93025; }
.pe-meas .pe-area { fill: rgba(217,48,37,.1); stroke: #d93025; stroke-width: 2; }
svg.pe-measure, svg.pe-area { cursor: crosshair; }
.bd-pe-acts .sel-wrap { width: auto; flex: 0 1 auto; } .bd-pe-acts .sel-wrap select { max-width: 240px; }

/* v1.76.0 · moodboard and variations */
.vn-mood { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vn-mood img { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; }
.vn-mood .vn-sw { display: flex; gap: 3px; } .vn-mood .vn-sw i { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.vn-mood input[type=text] { flex: 1 1 120px; min-width: 0; height: 30px; border: 1px solid #d2d2d7; border-radius: 8px; padding: 0 8px; font: inherit; font-size: 12.5px; }
.vn-var { display: flex; align-items: center; gap: 8px; } .vn-var small { color: var(--ink-2); }
.bd-st-v.on .bd-chip { font-weight: 600; } .bd-st-cost { color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-pano { position: fixed; inset: 0; z-index: 9999; background: #000; }
.bd-pano-v { position: absolute; inset: 0; }
.bd-pano-bar { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 6px 24px rgba(0,0,0,.3); max-width: calc(100% - 24px); flex-wrap: wrap; }
.bd-pano-bar small { color: var(--ink-2); }

/* v1.77.0 · recording and sharing */
.bd-rec { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.95); box-shadow: 0 4px 16px rgba(0,0,0,.15); font-size: 13px; }
.bd-rec[hidden] { display: none; }
.bd-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #d93025; animation: recp 1s infinite; }
@keyframes recp { 50% { opacity: .3; } }
/* v1.77.0: the public design tour */
.tour-body { margin: 0; background: #F5F5F7; }
.bd-page.tour { display: flex; flex-direction: column; height: 100vh; height: 100dvh; font-family: var(--font); color: #1d1d1f; }
.tour-head { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: rgba(255,255,255,.9); border-bottom: 1px solid #e5e5ea; min-width: 0; }
.tour-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; flex: none; }
.tour-brand img { width: 30px; height: 30px; }
.tour-t { display: grid; min-width: 0; } .tour-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tour-t small { color: #6e6e73; font-size: 12px; }
.tour-stage { position: relative; flex: 1; min-height: 0; margin: 10px 16px; border-radius: 18px; overflow: hidden; background: #EEF2F6; }
.tour-3d { position: absolute; inset: 0; } .tour-3d canvas { width: 100% !important; height: 100% !important; display: block; }
.tour-foot { padding: 0 16px 10px; color: #86868b; font-size: 11.5px; }
.tour-notes { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.4; }
.tour-msg { max-width: 420px; margin: 18vh auto 0; padding: 0 16px; display: grid; gap: 12px; justify-items: start; }
.tour-msg h1 { margin: 6px 0 0; font-size: 24px; } .tour-msg p { margin: 0; color: #6e6e73; line-height: 1.45; }
@media (max-width: 640px) {
  .tour-stage { margin: 0; border-radius: 0; }
  .tour-tools { flex-direction: row; right: 8px; left: 8px; bottom: 8px; justify-content: space-between; overflow-x: auto; }
  .tour-tools .bd-tg span:not(.tt-ic) { display: none; }
  .tour-pop { right: 8px; left: 8px; top: auto; bottom: 60px; width: auto; max-height: 50%; align-content: start; }
  .tour .bd-st-pad { bottom: 112px; }
  .tour-foot { display: none; }
}
.bd-chip .bd-rec-dot { animation: none; width: 9px; height: 9px; flex: none; }
.tour-pop { align-content: start; } .tour-pop .bd-seg { justify-self: start; }
/* v1.77.0: the studio pop on the 3D model and the tour sizes to its content on phones too (an older rule pinned its top) */
.bd-3d > .bd-st-pop, .tour .tour-pop { align-content: start; }
@media (max-width: 820px) { .bd-3d > .bd-st-pop { bottom: auto; } .tour .tour-pop { top: 8px !important; bottom: auto; } }
/* v1.78.0: Think creative */
.bd-cr { display: grid; gap: 6px; }
.bd-cr-r { display: grid; grid-template-columns: minmax(90px, 130px) 1fr; column-gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 12px; background: #F6F3FF; }
.bd-cr-r > span { color: var(--bd-mute, #5F6368); font-size: 12px; } .bd-cr-r > b { font-size: 14px; color: #4527A0; }
.bd-cr-r > small { grid-column: 2; color: var(--bd-mute, #5F6368); font-size: 11.5px; }
.bd-ck-ok { display: flex; gap: 8px; align-items: center; margin: 4px 0 0; color: #137333; font-weight: 600; font-size: 13px; } .bd-ck-ok .tt-ic, .bd-ck-ok svg { width: 16px; height: 16px; flex: none; }
.vn-cr.on { background: #4527A0; color: #fff; }
@media (max-width: 520px) { .bd-cr-r { grid-template-columns: 1fr; } .bd-cr-r > small { grid-column: 1; } }
/* v1.78.0: feasibility and massing */
.bd-fz { display: grid; gap: 14px; align-content: start; overflow-y: auto; padding: 4px 2px 16px; }
.bd-fz-t { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.bd-fz-t label { display: grid; gap: 4px; } .bd-fz-t small { color: var(--bd-mute); font-size: 11.5px; }
.bd-fz-t input { height: 36px; width: 150px; padding: 0 10px; border: 1px solid #DADCE0; border-radius: 10px; font: 500 14px var(--font); }
.bd-fz-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.bd-fz-c { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--bd-sh); border: 2px solid transparent; }
.bd-fz-c.best { border-color: #1A73E8; } .bd-fz-c.no { opacity: .72; }
.bd-fz-h { display: flex; align-items: center; gap: 8px; } .bd-fz-h b { font-size: 15px; }
.bd-fz-tag { font: 600 11px var(--font); padding: 2px 8px; border-radius: 999px; background: #E8F0FE; color: #174EA6; } .bd-fz-tag.no { background: #FCE8E6; color: #B3261E; }
.bd-fz-svg svg { width: 100%; height: auto; max-height: 190px; display: block; }
.bd-fz-r { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; } .bd-fz-r b { white-space: normal; } .bd-fz-r span { color: var(--bd-mute); } .bd-fz-r b { text-align: right; }
.bd-fz-c > small { color: var(--bd-mute); font-size: 11.5px; line-height: 1.35; } .bd-fz-c > small.bd-fz-why { color: #B3261E; }
/* v1.78.0: layout options */
.bd-lo { display: grid; gap: 12px; align-content: start; overflow-y: auto; padding: 4px 2px 16px; }
.bd-lo-scroll { overflow-x: auto; }
.bd-lo-t { border-collapse: collapse; width: auto; font-size: 13px; }
.bd-lo-t td, .bd-lo-t thead th:not(:first-child) { min-width: 130px; }
.bd-lo-t th, .bd-lo-t td { padding: 8px 10px; border-bottom: 1px solid #EEF0F2; text-align: left; white-space: nowrap; }
.bd-lo-t thead th { vertical-align: bottom; } .bd-lo-t thead th b { display: block; font-size: 14px; } .bd-lo-t thead th small { color: #137333; font-weight: 600; }
.bd-lo-t thead th.on { background: #E8F0FE; border-radius: 10px 10px 0 0; }
.bd-lo-t tbody th { color: var(--bd-mute); font-weight: 500; }
.bd-lo-t td.best { color: #137333; font-weight: 700; }
/* v1.78.0: daylight on the plan */
.bd-dl-leg { display: grid; gap: 6px; margin-top: 8px; } .bd-dl-leg small { color: var(--bd-mute); font-size: 11.5px; }
.bd-dl-leg > span { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; }
.bd-dl-leg i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; } .bd-dl-leg i::before { content: ''; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); }
.bd-dl-leg i.dl-good::before { background: #CDEBD3; } .bd-dl-leg i.dl-fair::before { background: #FCE8B2; } .bd-dl-leg i.dl-low::before { background: #F8C9C4; }
.bd-dl-leg .bd-chip { justify-self: start; }
@media (max-width: 640px) { .bd-fz-l { grid-template-columns: 1fr; } .bd-fz-t input { width: 120px; } }
@media (min-width: 900px) { .bd-fz > .bd-gl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* v1.79.0: the plan editor: handles, guides, gaps, clashes, hover, doors */
.pe-ghost rect.bad { fill: rgba(217,48,37,.14); stroke: #D93025; }
.pe-guides line { stroke: #1A73E8; stroke-width: 1; stroke-dasharray: 4 4; opacity: .8; pointer-events: none; }
.pe-gap { stroke: #E37400; stroke-width: 1.4; marker-start: none; }
.pe-lab.gap rect { fill: #E37400; opacity: 1; } .pe-lab.gap text { font-size: 11px; }
.pe-lab.dim rect { fill: #1A73E8; opacity: 1; } .pe-lab.dim text { font-size: 11px; }
.pe-sel-box { fill: rgba(26,115,232,.06); stroke: #1A73E8; stroke-width: 2; pointer-events: none; }
.pe-h { fill: #fff; stroke: #1A73E8; stroke-width: 2; } .pe-h:hover { fill: #1A73E8; }
.pe-hov line { stroke: #1A73E8; stroke-width: 5; stroke-linecap: round; opacity: .45; pointer-events: none; }
.pe-hov rect { fill: rgba(26,115,232,.05); stroke: #1A73E8; stroke-width: 1; pointer-events: none; }
.pe-door rect { fill: rgba(26,115,232,.12); stroke: #1A73E8; stroke-width: 1.5; cursor: grab; }
.pe-door.sel rect { fill: rgba(26,115,232,.35); stroke-width: 2.5; }
svg.pe-doors { cursor: copy; }
.bd-pe-num { display: inline-grid; gap: 2px; } .bd-pe-num small { font-size: 10.5px; color: var(--bd-mute, #5F6368); }
.bd-pe-num input { width: 72px; height: 32px; padding: 0 8px; border: 1px solid #DADCE0; border-radius: 9px; font: 500 13px var(--font); }
.bd-pe-num select { height: 32px; }
@media (hover: none) { .pe-h { transform-box: fill-box; transform-origin: center; transform: scale(1.5); } }
/* v1.79.0: the Design tab: Ideas | Details, and the idea studio */
.bd-dz.ideas { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); }
.bd-dz-sw { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #F1F3F4; flex: none; }
.bd-dz-sw button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 0; border-radius: 9px; background: transparent; font: 600 13px var(--font); color: var(--bd-mute, #5F6368); cursor: pointer; }
.bd-dz-sw button .tt-ic { width: 16px; height: 16px; } .bd-dz-sw button.on { background: #fff; color: #1F2328; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.bd-ideas-side { overflow-y: auto; padding-right: 2px; }
.bd-is { display: grid; gap: 12px; align-content: start; padding-bottom: 16px; }
.bd-is section { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: var(--bd-sh); }
.bd-is-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .bd-is-h b { font: 700 15px var(--display, var(--font)); } .bd-is-h small { color: var(--bd-mute, #5F6368); font-size: 11.5px; }
.bd-is-cap textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 78px; padding: 10px 12px; border: 1px solid #E3E5E8; border-radius: 12px; font: 400 14.5px/1.45 var(--font); background: #FBFBFD; }
.bd-is-cap textarea:focus { outline: 2px solid #1A73E8; outline-offset: 0; background: #fff; }
.bd-is-feel { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-is-tag { height: 28px; padding: 0 11px; border: 1px solid #E3E5E8; border-radius: 999px; background: #fff; font: 500 12.5px var(--font); color: #3C4043; cursor: pointer; }
.bd-is-tag.on { background: #1F2328; border-color: #1F2328; color: #fff; }
.bd-is-att { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bd-is-thumb { position: relative; width: 56px; height: 42px; border-radius: 8px; overflow: hidden; border: 1px solid #E3E5E8; }
.bd-is-thumb img { width: 100%; height: 100%; object-fit: cover; } .bd-is-thumb .bd-ib { position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; min-width: 0; padding: 0; background: rgba(255,255,255,.9); }
.bd-is-go { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.bd-is-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity; }
.bd-is-th { position: relative; flex: 0 0 168px; display: grid; gap: 4px; align-content: start; padding: 10px; border-radius: 14px; background: #F6F7F9; border: 2px solid transparent; cursor: pointer; scroll-snap-align: start; }
.bd-is-th.on { border-color: #1A73E8; background: #EEF4FE; }
.bd-is-th img { width: 100%; height: 70px; object-fit: cover; border-radius: 8px; background: #fff; }
.bd-is-th > span:not(.bd-is-th-a) { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bd-is-th > small { color: var(--bd-mute, #5F6368); font-size: 11px; }
.bd-is-th-a { display: flex; gap: 2px; justify-content: flex-end; } .bd-is-th-a .bd-ib { width: 26px; height: 26px; min-width: 0; }
.bd-is-lad { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.bd-is-lad button { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: #F1F3F4; font: 600 12px var(--font); color: #3C4043; cursor: pointer; }
.bd-is-lad button i { font-style: normal; width: 17px; height: 17px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 10px; color: #5F6368; }
.bd-is-lad button small { font-size: 11px; color: #1A73E8; } .bd-is-lad button.none { opacity: .55; }
.bd-is-lad button.on { background: #1F2328; color: #fff; } .bd-is-lad button.on i { background: #3C4043; color: #fff; } .bd-is-lad button.on small { color: #8AB4F8; }
.bd-is-cards { display: grid; gap: 8px; }
.bd-is-card { display: grid; gap: 5px; padding: 12px; border-radius: 14px; background: #FBFBFD; border: 1px solid #ECEEF1; border-left: 4px solid var(--lv, #9AA0A6); }
.bd-is-card.kept { background: #FFFBEB; } .bd-is-card.picked { box-shadow: 0 0 0 2px #1A73E8; }
.bd-is-card > b { font-size: 14px; } .bd-is-card > p { margin: 0; font-size: 13px; line-height: 1.45; color: #3C4043; } .bd-is-card > small { font-size: 11.5px; color: var(--bd-mute, #5F6368); }
.bd-is-ch { display: flex; gap: 6px; align-items: center; } .bd-is-lv { font: 500 12px var(--font); letter-spacing: 0; color: var(--lv, #5F6368); }
.bd-is-st { font: 600 10.5px var(--font); padding: 1px 7px; border-radius: 999px; background: #E8F0FE; color: #174EA6; } .bd-is-st.k { background: #FEF3C7; color: #92400E; }
.bd-is-ca { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 2px; } .bd-is-ca .bd-chip { min-height: 30px; padding: 4px 11px; font-size: 12.5px; } .bd-is-ca .bd-ib { margin-left: auto; }
.lv-remember { --lv: #6B7280; } .lv-understand { --lv: #0E7490; } .lv-apply { --lv: #15803D; } .lv-analyse { --lv: #B45309; } .lv-evaluate { --lv: #B91C1C; } .lv-create { --lv: #6D28D9; }
.bd-is-comb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: #EEF4FE; font-size: 12.5px; font-weight: 600; }
.bd-is-empty { padding: 16px 6px; text-align: center; color: var(--bd-mute, #5F6368); } .bd-is-empty b { color: #1F2328; } .bd-is-empty p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
.bd-is-more { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; border-top: 1px solid #EEF0F2; }
/* the sketch pad */
.bd-sk { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(32,33,36,.45); }
.bd-sk-in { width: min(940px, 100%); display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.bd-sk-h { display: flex; align-items: baseline; gap: 10px; } .bd-sk-h b { font-size: 16px; } .bd-sk-h small { color: var(--bd-mute, #5F6368); }
.bd-sk-c { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 12px; border: 1px solid #E3E5E8; touch-action: none; cursor: crosshair; background: #fff; }
.bd-sk-t { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .bd-sk-sp { flex: 1; } .bd-sk-t .bd-chip.on { background: #1F2328; color: #fff; }
@media (max-width: 900px) { .bd-dz.ideas { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; overflow-y: auto; } .bd-dz.ideas .bd-dz-stage { height: 38vh; min-height: 240px; } .bd-ideas-side { overflow: visible; } }
/* ===================== v1.80.0: the workspace as a console =====================
   rail of stages (left) · the board with one header (centre) · the chat docked (right). On phones: the board, a
   bottom bar of stages, and the chat as a sheet. Everything sits on one 8 px grid; nothing floats over the board
   except each view's own tools. */
.bd-ws.float.rail { display: grid; grid-template-columns: 76px minmax(0, 1fr) 0; grid-template-rows: minmax(0, 1fr); gap: 0; background: #F6F7F9; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px #E6E8EB; transition: grid-template-columns .22s ease; }
.bd-ws.float.rail.dock-on { grid-template-columns: 76px minmax(0, 1fr) min(400px, 34vw); }
.bd-ws.rail .bd-rail { grid-column: 1; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 6px; background: #fff; border-right: 1px solid #E6E8EB; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.bd-ws.rail .bd-rail::-webkit-scrollbar { display: none; }
.bd-ws.float.rail .bd-views { position: static; transform: none; left: auto; right: auto; top: auto; max-width: none; display: flex; flex-direction: column; gap: 2px; padding: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.bd-ws.rail .bd-views button { position: relative; flex-direction: column; justify-content: center; gap: 3px; height: 56px; width: 100%; padding: 0 2px; border-radius: 12px; font: 600 10.5px/1.1 var(--font); color: #5F6368; }
.bd-ws.rail .bd-views button .tt-ic { width: 20px; height: 20px; }
.bd-ws.rail .bd-views button span:not(.tt-ic) { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bd-ws.rail .bd-views button:hover:not(:disabled) { background: #F1F3F4; color: #1F2328; }
.bd-ws.rail .bd-views button.on { background: #E8F0FE; color: #174EA6; }
.bd-ws.rail .bd-views button.on::before { content: ''; position: absolute; left: -6px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: #1A73E8; }
.bd-ws.rail .bd-views button.off { opacity: .38; cursor: not-allowed; }
.bd-ws.rail .bd-views .bd-vdone { position: absolute; top: 6px; right: 10px; width: 14px; height: 14px; border-radius: 50%; background: #E6F4EA; color: #137333; display: grid; place-items: center; }
.bd-ws.rail .bd-views .bd-vdone .tt-ic { width: 10px; height: 10px; }
.bd-ws.rail .bd-views button.done:not(.on) > .tt-ic:first-child { color: #1F2328; }
.bd-ws.rail .bd-rail-sp { flex: 1; min-height: 8px; }
.bd-ws.rail .bd-rail-ai { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid #EEF0F2; }
.bd-ws.rail .bd-mascot { position: relative; inset: auto; z-index: 2; width: 64px; height: 70px; margin: 0 auto; border-radius: 14px; cursor: pointer; display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 4px 0 2px; transform: none; }
.bd-ws.rail .bd-mascot:hover { background: #F1F3F4; transform: none; }
.bd-ws.rail .bd-mascot.on { background: #FFF6DA; } .bd-ws.rail .bd-mascot.vin.on { background: #E8F0FE; }
.bd-ws.rail .bd-mascot::after { display: none; }
.bd-ws.rail .bd-mascot .bd-fig, .bd-ws.rail .bd-mascot .bd-vfig { width: 52px; height: 48px; }
.bd-ws.rail .bd-ai-l { font: 600 10.5px var(--font); color: #3C4043; }
.bd-ws.rail .bd-badge { top: 0; right: 2px; }
.bd-ws.rail .bd-tip { bottom: auto; top: 6px; left: calc(100% + 10px); z-index: 60; border-radius: 4px 16px 16px 16px; }
.bd-ai-l { display: none; } .bd-ws.rail .bd-ai-l { display: block; }
/* the board and its header */
.bd-ws.rail .bd-stagebox { grid-column: 2; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.bd-stagehead { display: none; }
.bd-ws.rail .bd-stagehead { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 10px; background: #fff; border-bottom: 1px solid #E6E8EB; min-width: 0; }
.bd-ws.rail .bd-sh-t { display: grid; min-width: 0; line-height: 1.2; }
.bd-ws.rail .bd-sh-l1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bd-ws.rail .bd-sh-l1 > b { font: 700 15px var(--display, var(--font)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-ws.rail .bd-sh-stage { flex: none; font: 600 11.5px var(--font); color: #174EA6; background: #E8F0FE; padding: 2px 8px; border-radius: 999px; }
.bd-ws.rail .bd-sh-t > small { font-size: 11.5px; color: #5F6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-ws.rail .bd-sh-sp { flex: 1; }
.bd-ws.rail .bd-stagecv { position: relative; min-width: 0; min-height: 0; }
.bd-ws.float.rail .bd-canvas { position: absolute; inset: 0; border-radius: 0; }
.bd-ws.float.rail .bd-canvas-in { padding-top: 12px; }
.bd-ws.float.rail :is(.bd-ctx, .bd-3d-top, .vn-topw, .bd-3d-mini) { top: 12px; }
/* the dock */
.bd-ws.rail .bd-dock { grid-column: 3; min-width: 0; min-height: 0; overflow: hidden; background: #fff; border-left: 1px solid #E6E8EB; position: relative; }
.bd-ws.float.rail .bd-dock .bd-panel { position: absolute; inset: 0; width: auto !important; height: auto !important; min-width: 0; min-height: 0; max-width: none; max-height: none; resize: none; border-radius: 0; box-shadow: none; background: #fff; }
.bd-ws.float.rail .bd-dock .bd-panel .bd-chat-h { cursor: default; padding: 12px 10px 10px 16px; border-bottom: 1px solid #F1F3F4; background: #fff; }
.bd-ws.rail .bd-chat-t { display: grid; } .bd-ws.rail .bd-chat-t small { color: #5F6368; font-size: 11.5px; }
@media (max-width: 820px) {
  .bd-ws.float.rail, .bd-ws.float.rail.dock-on { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; border-radius: 0; box-shadow: none; }
  .bd-ws.rail .bd-stagebox { grid-column: 1; grid-row: 1; }
  .bd-ws.rail .bd-rail { grid-column: 1; grid-row: 2; flex-direction: row; align-items: center; gap: 2px; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid #E6E8EB; overflow-x: auto; overflow-y: hidden; }
  .bd-ws.float.rail .bd-views { flex-direction: row; gap: 2px; }
  .bd-ws.rail .bd-views button { width: 58px; height: 50px; flex: none; }
  .bd-ws.rail .bd-views button.on::before { left: 14px; right: 14px; top: auto; bottom: -4px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .bd-ws.rail .bd-rail-sp { flex: 0 0 4px; min-height: 0; }
  .bd-ws.rail .bd-rail-ai { display: flex; gap: 2px; padding: 0 0 0 6px; border-top: 0; border-left: 1px solid #EEF0F2; }
  .bd-ws.rail .bd-mascot { width: 54px; height: 50px; padding: 0; }
  .bd-ws.rail .bd-mascot .bd-fig, .bd-ws.rail .bd-mascot .bd-vfig { width: 38px; height: 34px; }
  .bd-ws.rail .bd-tip { left: auto; right: 0; top: auto; bottom: calc(100% + 8px); border-radius: 16px 16px 4px 16px; }
  .bd-ws.rail .bd-dock { position: absolute; inset: 0 0 62px 0; pointer-events: none; overflow: visible; background: none; border: 0; z-index: 40; }
  .bd-ws.float.rail .bd-dock .bd-panel { pointer-events: auto; inset: auto 0 0 0; height: 62% !important; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.18); }
  .bd-ws.rail .bd-stagehead { height: 46px; padding: 0 8px; }
  .bd-ws.rail .bd-sh-t > small { display: none; }
  .bd-ws.float.rail.panel-on .bd-canvas-in { padding-bottom: 8px; }
}
@media (max-width: 820px) {
  .bd-ws.rail .bd-rail { overflow: hidden; padding-right: 4px; }
  .bd-ws.float.rail .bd-views { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .bd-ws.float.rail .bd-views::-webkit-scrollbar { display: none; }
  .bd-ws.rail .bd-rail-sp { display: none; }
  .bd-ws.rail .bd-rail-ai { flex: none; box-shadow: -10px 0 10px -8px rgba(0,0,0,.12); background: #fff; }
}
@media (max-width: 820px) { .bd-ws.float.rail .vn-sheet { left: auto; right: auto; } }
/* v1.80.0: Results: the scorecard in its own column beside the plan or model, never over it */
@media (min-width: 1000px) {
  .bd-ws.rail .bd-rsm { display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); gap: 12px; }
  .bd-ws.rail .bd-rsm > .bd-score-dock { grid-column: 1; grid-row: 1; position: relative; left: auto; bottom: auto; max-width: none; min-height: 0; overflow-y: auto; pointer-events: auto; display: grid; align-content: start; gap: 10px; }
  .bd-ws.rail .bd-rsm > .bd-rs-pic { grid-column: 2; grid-row: 1; }
  .bd-ws.rail .bd-rsm > .bd-score-dock > .bd-grip { display: none; }
}
@media (min-width: 1000px) { .bd-ws.rail .bd-mapv .bd-mhint { top: 12px; bottom: auto; } }
.bd-ws.rail .bd-stagecv { overflow: hidden; }
@media (min-width: 1181px) { .bd-ws.float.rail .bd-3d-top { right: 270px; } }
@media (min-width: 821px) and (max-height: 880px) {
  .bd-ws.rail .bd-views button { height: 48px; gap: 2px; }
  .bd-ws.rail .bd-views button.on::before { top: 9px; bottom: 9px; }
  .bd-ws.rail .bd-mascot { height: 58px; width: 60px; }
  .bd-ws.rail .bd-mascot .bd-fig, .bd-ws.rail .bd-mascot .bd-vfig { width: 42px; height: 38px; }
  .bd-ws.rail .bd-rail { padding: 8px 6px; }
}
@media (min-width: 821px) and (max-height: 760px) {
  .bd-ws.rail .bd-views button { height: 42px; } .bd-ws.rail .bd-views button span:not(.tt-ic) { font-size: 9.5px; }
  .bd-ws.rail .bd-views button .tt-ic { width: 18px; height: 18px; }
}
@media (min-width: 821px) and (max-width: 1400px) { .bd-ws.dock-on .bd-dz.ideas { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); } }
@media (max-width: 820px) { .vn-mapui .vn-sheet { flex: none; overflow: visible; } .bd-canvas-in > .vn-wrap { flex: none; min-height: auto; } }
/* v1.80.0: small fixes from the review */
.bd-sc-seals .bd-seal small { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.pl-name.inv, .pl-size.inv { fill: #fff; }
.bd-seal-g b.sm { max-width: 46px; overflow-wrap: normal; }
.bd-sc-seals { flex-wrap: wrap; row-gap: 8px; } .bd-sc-seals .bd-seal { width: 66px; } .bd-sc-seals .bd-seal-g b.sm { max-width: 40px; }
.bd-is-lad { flex-wrap: wrap; overflow: visible; }
@media (min-width: 1000px) { .bd-ws.rail .bd-rsm .bd-rs-pic .bd-zoomwrap { padding-right: 58px; box-sizing: border-box; } }
@media (max-width: 820px) { .bd-ws.float.rail .bd-views { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }
/* v1.80.0: inside the studio on a phone the stage bar is the navigation (the project list is in the header): one bottom bar, not two */
@media (max-width: 820px) { body.bd-lock .mnav { display: none; } body.bd-lock.has-mnav { padding-bottom: 0; } }

/* ===================== v1.81.0 ===================== */
/* chat windows laid out like a messaging app */
.bd-ws.rail .bd-chat-h { gap: 10px; padding: 10px 10px 10px 12px; background: #fff; border-bottom: 1px solid #EEF0F2; }
.bd-av { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #FFF4D6; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.bd-av.vin { background: #E0EAFF; }
.bd-ws.rail .bd-chat-t b.bd-chat-n { font: 700 15.5px/1.25 var(--font); color: #111B21; }
.bd-ws.rail .bd-chat-t small.bd-chat-st { font-size: 12px; color: #667781; -webkit-line-clamp: 1; }
.bd-ws.rail .bd-chat-t small.bd-chat-st.live { color: #188038; font-weight: 600; }
.bd-msgw { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bd-ws.rail .bd-msgs { flex: 1; gap: 2px; padding: 10px 12px 12px; background-color: #F3EFE8;
  background-image: radial-gradient(rgba(120,100,70,.07) 1px, transparent 1.4px), radial-gradient(rgba(120,100,70,.05) 1px, transparent 1.4px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px; }
.bd-ws.rail .bd-m { position: relative; max-width: 84%; margin-top: 8px; padding: 7px 10px 8px; border-radius: 10px; font-size: 14.2px; line-height: 1.45; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.bd-ws.rail .bd-m.cont { margin-top: 2px; }
.bd-ws.rail .bd-m.bonda { background: #fff; color: #111B21; border-top-left-radius: 0; }
.bd-ws.rail .bd-m.user { background: #DCEBFF; color: #0B2545; border-top-right-radius: 0; }
.bd-ws.rail .bd-panel.vin .bd-m.user { background: #E3E6FF; }
.bd-ws.rail .bd-m.bonda:not(.cont):not(.typing)::before, .bd-ws.rail .bd-m.user:not(.cont)::before { content: ''; position: absolute; top: 0; width: 8px; height: 12px; }
.bd-ws.rail .bd-m.bonda:not(.cont):not(.typing)::before { left: -7px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bd-ws.rail .bd-m.user:not(.cont)::before { right: -7px; background: #DCEBFF; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bd-ws.rail .bd-panel.vin .bd-m.user:not(.cont)::before { background: #E3E6FF; }
.bd-ws.rail .bd-m.cont { border-radius: 10px; }
.bd-mstamp { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin: 2px -2px -3px 12px; font-size: 11px; line-height: 1; color: #667781; white-space: nowrap; user-select: none; }
.bd-m.user .bd-mstamp { color: #5B6B80; }
.bd-tk .tt-ic { width: 16px; height: 16px; } .bd-tk { display: inline-grid; color: #8696A0; } .bd-tk.read { color: #34B7F1; }
.bd-day { align-self: center; margin: 12px 0 4px; } .bd-day span { display: inline-block; padding: 5px 12px; border-radius: 8px; background: rgba(255,255,255,.95); color: #54656F; font: 600 12px/1.2 var(--font); box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.bd-ws.rail .bd-note { margin: 8px auto 0; max-width: 88%; padding: 6px 12px; border-radius: 8px; background: #FFF6D5; color: #54656F; font-size: 12.5px; text-align: center; box-shadow: 0 1px .5px rgba(11,20,26,.1); }
.bd-ws.rail .bd-note.warn { background: #FEF3E2; color: #8A5300; }
.bd-ws.rail .bd-cardm { margin-top: 8px; }
.bd-ws.rail .bd-m.typing { padding: 12px 14px; margin-top: 8px; }
.bd-ws.rail .bd-m.typing i { background: #8696A0; }
.bd-tobot { position: absolute; right: 14px; bottom: 12px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #54656F; box-shadow: 0 2px 6px rgba(11,20,26,.25); cursor: pointer; }
.bd-tobot[hidden] { display: none; } .bd-tobot .tt-ic { width: 22px; height: 22px; }
/* suggested replies: one row that scrolls sideways; a picked one leaves the row */
.bd-ws.rail .bd-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 12px 4px; background: #F3EFE8; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.bd-ws.rail .bd-chips::-webkit-scrollbar { display: none; }
.bd-ws.rail .bd-chips .bd-chip { flex: none; background: #fff; color: #0B57D0; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.bd-ws.rail .bd-chips .bd-chip.act { background: #0B57D0; color: #fff; }
.bd-chips .bd-chip[hidden], .bd-next-a .bd-chip[hidden] { display: none; }
.bd-ws.rail .bd-comp { background: #F3EFE8; padding: 6px 10px 10px; }
.bd-ws.rail .bd-comp-row { border-radius: 24px; box-shadow: 0 1px 2px rgba(11,20,26,.12); }
.bd-ws.rail .bd-next { margin: 0; border-radius: 0; background: #F3EFE8; padding: 6px 12px 2px; }
@media (max-width: 820px) { .bd-ws.rail .bd-m { max-width: 90%; } }
/* the AI credits meter */
.bd-aim { flex: none; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 7px 14px 8px; background: #fff; border-bottom: 1px solid #EEF0F2; }
.bd-aim[hidden] { display: none; }
.bd-aim-l { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: #54656F; white-space: nowrap; overflow: hidden; }
.bd-aim-l b { color: #111B21; font-weight: 700; } .bd-aim-l .tt-ic { width: 16px; height: 16px; color: #B7791F; flex: none; }
.bd-aim-l small { overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.bd-aim-bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: #E9EDEF; overflow: hidden; }
.bd-aim-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #1E8E3E, #34A853); transition: width .4s ease; }
.bd-aim.low .bd-aim-bar i { background: linear-gradient(90deg, #E37400, #F9AB00); } .bd-aim.out .bd-aim-bar i { background: #D93025; }
.bd-aim.out .bd-aim-l small { color: #B3261E; font-weight: 600; }
.bd-aim.admin { grid-template-columns: 1fr; }
.bd-aim-go { grid-row: 1; grid-column: 2; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: #0B57D0; color: #fff; font: 600 12.5px var(--font); cursor: pointer; white-space: nowrap; }
.bd-aim.low .bd-aim-go { background: #FFF3D6; color: #8A5300; }
.bd-rch p { margin: 0 0 10px; } .bd-rch-l { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.bd-rch-l li { display: flex; align-items: center; gap: 8px; } .bd-rch-l .tt-ic { width: 20px; height: 20px; color: #B7791F; }
.bd-rch-p b { font: 800 26px var(--display); } .bd-rch-p small { color: var(--bd-mute); }
/* the next-step panel while Bonda works: a moving bar until the next step is ready */
.bd-next.wait .bd-next-p.ind { position: relative; } .bd-next.wait .bd-next-p.ind i { position: absolute; width: 40% !important; animation: bdInd 1.3s ease-in-out infinite; }
@keyframes bdInd { 0% { left: -40%; } 100% { left: 100%; } }
.bd-next-w { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: #1F2933; }
.bd-spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #C8D7F2; border-top-color: #1A73E8; animation: bdSpin .8s linear infinite; display: inline-block; }
@keyframes bdSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bd-next.wait .bd-next-p.ind i, .bd-spin { animation-duration: 3s; } }
/* panels that can be sent back to their stage on the rail */
.bd-pctl { display: flex; gap: 2px; align-items: center; }
.bd-pctl .bd-ib { width: 32px; height: 32px; }
.bd-ctx > .bd-pctl { position: sticky; top: 0; justify-self: end; margin: -6px -6px -34px 0; z-index: 2; padding: 2px; border-radius: 12px; background: rgba(255,255,255,.92); }
.bd-ctx > .bd-pctl .bd-ctx-x { position: static; margin: 0; background: transparent; }
.bd-st-pop > .bd-pctl { float: right; margin: -6px -8px 2px 8px; }
.bd-pctl.in { margin-left: auto; }
.vn-head > .bd-pctl.in { position: absolute; top: -4px; right: -6px; } .vn-head > .bd-pctl .vn-min { position: static; }
.bd-sc-h { display: flex; align-items: center; gap: 6px; }
.bd-tuck .tt-ic { width: 18px; height: 18px; }
.bd-ws.rail .bd-views button.tucked::after { content: ''; position: absolute; top: 7px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #1A73E8; box-shadow: 0 0 0 2px #fff; }
@media (max-width: 820px) { .bd-ws.rail .bd-views button.tucked::after { top: 4px; right: 14px; } }
/* the site card: which side the road is on, for a plot drawn without the map of the roads */
.bd-side .bd-seg { box-shadow: none; background: #F1F3F4; } .bd-side .bd-seg button { min-width: 34px; }
/* no text selection while dragging the 3D model */
.bd-3d, .bd-3d-c, .bd-st-side, .bd-3d-top, .bd-mtools { -webkit-user-select: none; user-select: none; }
.bd-st-pop { -webkit-user-select: text; user-select: text; }
/* board progress bars sit at the foot of the board, clear of the cards at the top */
.bd-ws.rail .bd-progs { top: auto; bottom: 18px; }
@media (max-width: 820px) { .bd-ws.rail .bd-progs { top: auto; bottom: 12px; } }
.pl-stair-ln { stroke: #5F6368; stroke-width: 1; fill: none; } .pl-stair-mid { stroke: #3C4043; stroke-width: 1.6; } .pl-stair-ar { fill: #3C4043; stroke: none; }
/* room names stay readable over the stair treads and the furniture */
.pl-name, .pl-size { paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 3px; stroke-linejoin: round; }
.pl-name.inv, .pl-size.inv { stroke: rgba(0,0,0,.25); stroke-width: 2px; }
.bd-pk-note { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; color: #3C4043; }
/* phones: the map-service note sits above the "mark your plot" button, never under it */
@media (max-width: 820px) { .bd-3d .bd-3d-place ~ .bd-3d-src.err, .bd-3d:has(.bd-3d-place) .bd-3d-src.err { bottom: 100px; } }
@media (max-width: 820px) { .bd-ws.float .bd-ctx { max-height: 46%; } .bd-bnd-go { position: sticky; bottom: -14px; z-index: 1; background: #EAF1FB; padding: 6px 0; } }

/* ===================== v1.82.0 ===================== */
/* every floating panel: send back to the rail, close */
.bd-dockable[hidden] { display: none !important; }
.bd-dockable { position: relative; }
.bd-3d-top.bd-dockable, .bd-3d-rose.bd-dockable, .bd-3d-tools.bd-dockable, .bd-3d-mini.bd-dockable, .bd-plan-leg.bd-dockable, .vn-topw.bd-dockable { position: absolute; }
.bd-checks.bd-dockable { position: relative; }
.bd-pctl-f { position: absolute; top: 4px; right: 4px; z-index: 4; display: flex; gap: 0; padding: 1px; border-radius: 10px; background: rgba(255,255,255,.92); box-shadow: 0 1px 3px rgba(60,64,67,.18); }
.bd-pctl-f .bd-ib { width: 26px; height: 26px; } .bd-pctl-f .tt-ic { width: 15px; height: 15px; }
.bd-3d-tools > .bd-pctl-f { position: static; margin: 0 auto 4px; width: max-content; box-shadow: none; background: transparent; }
.bd-3d-tools.bd-st > .bd-pctl-f { order: -1; }
.bd-3d-mini > .bd-pctl-f { top: -12px; right: -8px; }
.vn-topw > .bd-pctl-f { position: static; flex: none; align-self: center; }
.bd-checks > .bd-pctl-f { top: 8px; right: 8px; }
.bd-checks .bd-ck-h { padding-right: 64px; }
.bd-plan-leg > .bd-pctl-f { top: -14px; right: -6px; }
.bd-3d-top > .bd-pctl-f { top: -10px; right: -8px; }
.bd-3d-rose > .bd-pctl-f { top: -10px; right: -8px; }
.bd-3d-tip { position: absolute; } .bd-tip-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; }
.bd-3d-tip { padding-right: 34px !important; }
.vn-topw.bd-dockable { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.vn-topw.bd-dockable > .bd-pctl-f { grid-column: 2; grid-row: 1; position: static; }
.vn-topw.bd-dockable > :not(.bd-pctl-f) { grid-column: 1; }
/* progress bars in the stage header: compact, one line each, never over the board */
.bd-stagehead .bd-progs { position: static; transform: none; width: auto; max-width: min(360px, 40%); flex: 0 1 360px; display: grid; gap: 3px; top: auto; bottom: auto; left: auto; }
.bd-stagehead .bd-prog { padding: 4px 8px 5px 10px; border-radius: 10px; box-shadow: none; background: #F1F6FE; }
.bd-stagehead .bd-prog-t b { font-size: 12px; } .bd-stagehead .bd-prog-t small { font-size: 10.5px; }
.bd-stagehead .bd-prog-bar { margin-top: 3px; height: 3px; }
.bd-stagehead .bd-prog-x { width: 22px; height: 22px; margin: -2px -4px -2px 0; }
@media (max-width: 820px) { .bd-stagehead .bd-progs { max-width: 46%; } .bd-stagehead .bd-prog-t small { display: none; } }
.bd-3d-time.bd-dockable { position: relative; } .bd-3d-time > .bd-pctl-f { top: -10px; right: -10px; }
.bd-3d-res.bd-dockable { position: relative; } .bd-3d-res > .bd-pctl-f { top: -10px; right: -10px; }
.bd-stagehead .bd-progs:empty { display: none; }
.bd-ws.rail .bd-stagehead .bd-sh-t { flex: 1 1 auto; min-width: 72px; }

/* ===================== v1.83.0: Architecture then Engineering; the Brief and the thinking loop ===================== */
/* the rail, in two phases */
.bd-ws.rail .bd-views button { height: 50px; }
.bd-phase { display: flex; align-items: center; gap: 6px; margin: 6px 2px 2px; color: #80868B; font: 500 12px/1 var(--font); letter-spacing: 0; }
.bd-phase::after { content: ''; flex: 1; height: 1px; background: #E6E8EB; }
.bd-phase span { white-space: nowrap; }
.bd-phase.arch { margin-top: 0; color: #B06000; } .bd-phase.eng { color: #1967D2; margin-top: 10px; }
@media (min-width: 821px) { .bd-ws.rail .bd-phase { justify-content: center; } .bd-ws.rail .bd-phase::after { display: none; } .bd-ws.rail .bd-phase span { font-size: 8.5px; letter-spacing: .06em; } }
@media (max-width: 820px) {
  .bd-phase { flex-direction: column; justify-content: center; align-self: stretch; margin: 0 2px; padding: 0 2px; border-left: 1px solid #E6E8EB; }
  .bd-phase.arch { border-left: 0; } .bd-phase::after { display: none; }
  .bd-phase span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 8.5px; letter-spacing: .08em; }
}
@media (min-width: 821px) and (max-height: 820px) { .bd-ws.rail .bd-views button { height: 44px; gap: 2px; } .bd-ws.rail .bd-views button .tt-ic { width: 18px; height: 18px; } .bd-ws.rail .bd-views button span:not(.tt-ic) { font-size: 10px; } }
/* the phase in the stage header */
.bd-sh-phase { display: inline-block; margin: 0 2px 0 8px; padding: 2px 8px; border-radius: 999px; font: 500 12px/1.5 var(--font); letter-spacing: 0; background: #FEF3E2; color: #8A4B00; }
.bd-sh-phase.eng { background: #E8F0FE; color: #174EA6; }
@media (max-width: 820px) { .bd-sh-phase { margin-left: 4px; padding: 1px 6px; font-size: 9.5px; } }
/* the Brief */
.bd-brief { height: 100%; overflow-y: auto; padding: 18px 20px 28px; display: grid; gap: 14px; align-content: start; box-sizing: border-box; background: #F8F9FA; }
.bd-brief-h h2 { margin: 2px 0 4px; font: 800 22px/1.2 var(--display); color: #1F2328; }
.bd-brief-h p { margin: 0; max-width: 760px; color: #5F6368; font-size: 13.5px; line-height: 1.5; }
.bd-kick { color: #B06000; font: 500 12px var(--font); letter-spacing: 0; }
.bd-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 6px; align-items: stretch; }
.bd-tl-s button { width: 100%; height: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #E6E8EB; border-radius: 14px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.bd-tl-s button:hover { border-color: #C6D3E6; }
.bd-tl-s i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 12.5px var(--display); font-style: normal; background: #F1F3F4; color: #5F6368; }
.bd-tl-s i .tt-ic { width: 15px; height: 15px; }
.bd-tl-s span { display: grid; min-width: 0; } .bd-tl-s b { font: 700 13px/1.25 var(--font); color: #1F2328; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bd-tl-s small { font-size: 11px; color: #80868B; }
.bd-tl-s.done i { background: #E6F4EA; color: #137333; } .bd-tl-s.partial i { background: #FEF3E2; color: #8A4B00; }
.bd-tl-s.sel button { border-color: #1A73E8; box-shadow: 0 0 0 2px rgba(26,115,232,.18); }
.bd-tl-loop { display: grid; justify-items: center; align-content: center; padding: 0 6px; color: #80868B; } .bd-tl-loop .tt-ic { width: 18px; height: 18px; } .bd-tl-loop small { font-size: 10.5px; white-space: nowrap; }
.bd-tl-d { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #E6E8EB; }
.bd-tl-dh { display: grid; gap: 2px; } .bd-tl-dh b { font: 800 16px/1.3 var(--display); } .bd-tl-dh small { color: #B06000; font-size: 13px; font-style: italic; }
.bd-tl-does { margin: 0; color: #5F6368; font-size: 13px; } .bd-tl-sum { margin: 0; font-size: 13.5px; font-weight: 600; color: #1F2328; }
.bd-tl-items { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; color: #3C4043; } .bd-tl-items li.no { color: #B3261E; } .bd-tl-items li.ok { color: #137333; }
.bd-bub { margin: 4px 0 0; display: grid; gap: 6px; } .bd-bub svg { width: 100%; max-width: 520px; height: auto; display: block; background: #FBFBFC; border-radius: 12px; border: 1px solid #EEF0F2; }
.bd-bub figcaption { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: #5F6368; }
.bd-bub .k::before { content: ''; display: inline-block; width: 18px; height: 0; margin-right: 5px; vertical-align: middle; border-top: 2px solid #3C4043; }
.bd-bub .k.near::before { border-top: 1.5px dashed #3C4043; } .bd-bub .k.apart::before { border-top: 1.5px dotted #9AA0A6; } .bd-bub .k.bad::before { border-top-color: #D93025; }
.bd-bub .k.z::before { width: 10px; height: 10px; border: 1.5px solid; border-radius: 50%; }
.bd-bub .k.pub::before { background: #E8F0FE; border-color: #1A73E8; } .bd-bub .k.pri::before { background: #F3E8FD; border-color: #8430CE; } .bd-bub .k.ser::before { background: #FEF7E0; border-color: #B06000; }
.bd-srcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.bd-brief { container-type: inline-size; flex: 1 1 auto; width: 100%; min-width: 0; }
@container (max-width: 1060px) { .bd-srcs { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .bd-src.auto { grid-column: 2; } .bd-src.user { grid-row: span 2; } }
@container (max-width: 640px) { .bd-srcs { grid-template-columns: minmax(0, 1fr); } .bd-src.auto { grid-column: auto; } .bd-src.user { grid-row: auto; } .bd-tl { grid-template-columns: repeat(5, minmax(118px, 1fr)) auto; overflow-x: auto; padding-bottom: 4px; } }
@media (max-width: 820px) { .bd-brief { padding: 12px 10px 20px; } }
.bd-bub svg { max-width: 460px; max-height: 330px; }
.bd-src { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #E6E8EB; align-content: start; }
.bd-src > header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bd-src > header .tt-ic { width: 18px; height: 18px; } .bd-src > header b { font: 700 14.5px var(--display); } .bd-src > header small { flex-basis: 100%; color: #80868B; font-size: 12px; }
.bd-src.user > header .tt-ic { color: #B06000; } .bd-src.agency > header .tt-ic { color: #1967D2; } .bd-src.auto > header .tt-ic { color: #188038; }
.bd-src-l { margin: 0; display: grid; gap: 0; }
.bd-src-r { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid #F1F3F4; font-size: 12.5px; }
.bd-src-r:last-child { border-bottom: 0; } .bd-src-r dt { color: #5F6368; } .bd-src-r dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #1F2328; min-width: 0; } .bd-src-r dd > span:first-child { overflow-wrap: anywhere; }
.bd-src-st { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; } .bd-src-st.found { background: #E6F4EA; color: #137333; } .bd-src-st.confirmed { background: #E8F0FE; color: #174EA6; } .bd-src-st.assumed { background: #FEF3E2; color: #8A4B00; } .bd-src-st.missing { background: #F1F3F4; color: #80868B; }
.bd-src-a { color: #1A73E8; display: inline-grid; } .bd-src-a .tt-ic { width: 14px; height: 14px; }
.bd-bf { display: grid; gap: 4px; } .bd-bf > span { font-size: 12px; font-weight: 600; color: #3C4043; }
.bd-bf-in { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #DADCE0; border-radius: 10px; font: 400 13.5px/1.4 var(--font); background: #fff; color: #1F2328; resize: vertical; }
.bd-bf-in:focus { outline: none; border-color: #1A73E8; box-shadow: 0 0 0 3px rgba(26,115,232,.15); }
.bd-bf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bd-bf-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .bd-bf-chips .bd-bf-in { flex: 1 1 160px; width: auto; }
.bd-bf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 999px; background: #FEF3E2; color: #5C3A00; font-size: 12.5px; }
.bd-bf-chip button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; } .bd-bf-chip .tt-ic { width: 12px; height: 12px; }
.bd-bf-prh, .bd-bf-pr { display: grid; grid-template-columns: minmax(0, 1fr) 70px 76px 34px; gap: 6px; align-items: center; } .bd-bf-prh small { font-size: 11px; color: #80868B; }
.bd-bf-prog { display: grid; gap: 6px; justify-items: start; } .bd-bf-prog .bd-bf-pr { width: 100%; } .bd-bf-in.n { padding: 8px 6px; }
.bd-loops { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px dashed #DADCE0; } .bd-loops ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: #3C4043; }
.bd-hand { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #EEF3FD; color: #174EA6; } .bd-hand > .tt-ic { width: 22px; height: 22px; flex: none; }
.bd-hand span { flex: 1; display: grid; } .bd-hand b { font-size: 13.5px; } .bd-hand small { font-size: 12.5px; color: #3C4043; } .bd-hand.ready { background: #E6F4EA; color: #137333; }
.bd-brief { display: flex; flex-direction: column; } .bd-brief > * { flex: none; }
.bd-tl { min-height: max-content; }
@media (max-width: 820px) { .bd-phase { flex: none; width: 16px; min-width: 16px; overflow: hidden; align-items: center; } .bd-phase span { display: block; line-height: 16px; } }
@media (max-width: 820px) { .bd-phase span { display: none; } .bd-phase::before { content: attr(data-s); writing-mode: vertical-rl; transform: rotate(180deg); font: 500 8.5px/16px var(--font); letter-spacing: 0; } }

/* v1.83.0: a finished stage keeps its icon; the tick sits on its corner */
.bd-views button { position: relative; }
.bd-views button > .bd-vdone { position: absolute; top: 4px; right: 8px; width: 14px; height: 14px; }
.bd-views button > .bd-vdone .tt-ic { width: 10px; height: 10px; }

/* ===================== v1.84.0 ===================== */
/* two sub-rails: Architecture and Engineering, each a tinted group with its name along its spine */
.bd-sub { display: flex; min-width: 0; border-radius: 14px; }
.bd-sub.arch { background: #FFF7EC; box-shadow: inset 0 0 0 1px #F6E3C6; } .bd-sub.eng { background: #F1F5FE; box-shadow: inset 0 0 0 1px #D9E4FB; }
.bd-sub-h { display: flex; align-items: center; justify-content: center; flex: none; }
.bd-sub-h span { white-space: nowrap; font: 500 8.5px/1 var(--font); letter-spacing: 0; }
.bd-sub.arch .bd-sub-h span { color: #9A5200; } .bd-sub.eng .bd-sub-h span { color: #1967D2; }
.bd-sub-b { display: flex; min-width: 0; gap: 2px; }
.bd-ws.rail .bd-sub .bd-views button, .bd-ws.rail .bd-sub button { background: transparent; }
.bd-ws.rail .bd-sub button.on { background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.18); }
.bd-ws.rail .bd-sub.arch button.on { color: #8A4B00; } .bd-ws.rail .bd-sub.eng button.on { color: #174EA6; }
.bd-ws.rail .bd-sub button:hover:not(:disabled):not(.on) { background: rgba(255,255,255,.7); }
.bd-ws.rail .bd-sub button.on::before { display: none; }
@media (min-width: 821px) {
  .bd-ws.float.rail { grid-template-columns: 88px minmax(0, 1fr) 0; }
  .bd-ws.float.rail.dock-on { grid-template-columns: 88px minmax(0, 1fr) min(400px, 34vw); }
  .bd-ws.float.rail .bd-views { gap: 8px; }
  .bd-sub { flex-direction: row; padding: 4px 3px 4px 0; }
  .bd-sub-h { width: 15px; }
  .bd-sub-h span { writing-mode: vertical-rl; transform: rotate(180deg); }
  .bd-sub-b { flex: 1; flex-direction: column; }
  .bd-ws.rail .bd-sub button { width: 100%; }
}
/* phones: one bottom bar with two segments; each segment's name sits above its own buttons */
@media (max-width: 820px) {
  .bd-ws.float.rail .bd-views { gap: 6px; align-items: stretch; }
  .bd-sub { flex: none; flex-direction: column; padding: 2px 3px 3px; }
  .bd-sub-h { height: 12px; justify-content: flex-start; padding-left: 6px; }
  .bd-sub-h span { font-size: 8px; }
  .bd-sub-b { flex-direction: row; }
  .bd-ws.rail .bd-sub button { width: 56px; height: 44px; }
}
@media (max-width: 820px) { .bd-ws.rail .bd-dock { inset: 0 0 70px 0; } }
.bd-ws.rail .bd-views .bd-sub-h span { display: block !important; }
/* the Brief, v1.84.0: one step at a time, written by the architect; a save bar at the foot */
.bd-brief { padding-bottom: 0; }
.bd-brief-h p { font-size: 13px; }
.bd-tl.six { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; }
.bd-tl.six .bd-tl-s:first-child i { background: #FEF3E2; color: #8A4B00; } .bd-tl.six .bd-tl-s.done:first-child i { background: #E6F4EA; color: #137333; }
.bd-bw { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #E6E8EB; }
.bd-bw-h { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.bd-bw-h > div:first-child { flex: 1 1 300px; display: grid; gap: 2px; min-width: 0; }
.bd-bw-h b { font: 800 17px/1.3 var(--display); color: #1F2328; } .bd-bw-h small { color: #B06000; font-size: 13px; font-style: italic; } .bd-bw-h p { margin: 2px 0 0; color: #5F6368; font-size: 13px; line-height: 1.45; }
.bd-bw-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bd-ask { background: #F3E8FD; color: #6B21A8; } .bd-ask:hover { background: #EBD9FC; }
.bd-bw-sum { margin: 0; padding: 8px 12px; border-radius: 10px; background: #F8F9FA; font-size: 13px; font-weight: 600; color: #3C4043; }
.bd-cards { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.bd-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bd-bcard { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #E6E8EB; align-content: start; min-width: 0; }
.bd-bcard.wide { grid-column: 1 / -1; }
.bd-bcard > header, .bd-bcard > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-bcard > header .tt-ic, .bd-bcard > summary .tt-ic { width: 18px; height: 18px; color: #B06000; } .bd-bcard > header b, .bd-bcard > summary b { font: 700 14.5px var(--display); }
.bd-bcard > header small { flex-basis: 100%; color: #80868B; font-size: 12px; } .bd-bcard > summary small { color: #80868B; font-size: 12px; }
.bd-bcard > summary { cursor: pointer; list-style: none; } .bd-bcard > summary::-webkit-details-marker { display: none; }
details.bd-bcard:not([open]) { gap: 0; }
@container (max-width: 760px) { .bd-cards.two { grid-template-columns: minmax(0, 1fr); } .bd-tl.six { grid-template-columns: repeat(6, minmax(112px, 1fr)) auto; overflow-x: auto; padding-bottom: 4px; } }
/* rows the architect adds and edits */
.bd-le { display: grid; gap: 6px; }
.bd-le-h, .bd-le-r { display: grid; grid-template-columns: var(--le); gap: 6px; align-items: center; }
.bd-le-h small { font-size: 11px; color: #80868B; font-weight: 600; }
.bd-le-c { min-width: 0; } .bd-le-c > .bd-bf-in { padding: 7px 9px; font-size: 13px; }
.bd-le-empty { margin: 0; font-size: 12.5px; }
.bd-le-add { display: flex; flex-wrap: wrap; gap: 6px; }
.bd-le-v { font-size: 12px; color: #5F6368; }
.bd-tk-b { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #F1F3F4; color: #5F6368; white-space: nowrap; }
.bd-tk-b .tt-ic { width: 12px; height: 12px; } .bd-tk-b.ok { background: #E6F4EA; color: #137333; } .bd-tk-b.no { background: #FCE8E6; color: #B3261E; }
@container (max-width: 640px) {
  .bd-le-h { display: none; }
  .bd-le-r { grid-template-columns: minmax(0, 1fr) 34px; padding: 8px; border-radius: 12px; background: #F8F9FA; }
  .bd-le-r > .bd-le-c { grid-column: 1; } .bd-le-r > .bd-ib { grid-column: 2; grid-row: 1; }
  .bd-le-c[data-h]:not([data-h=""])::before { content: attr(data-h); display: block; margin: 0 0 2px; font-size: 10.5px; color: #80868B; font-weight: 600; }
  .bd-le.prog .bd-le-r { grid-template-columns: minmax(0, 1fr) 72px 78px 34px; padding: 0; background: none; } .bd-le.prog .bd-le-r > .bd-le-c { grid-column: auto; } .bd-le.prog .bd-le-r > .bd-ib { grid-column: auto; grid-row: auto; }
  .bd-le.prog .bd-le-c::before { display: none !important; } .bd-le.prog .bd-le-h { display: grid; }
}
/* the site, chosen in the Brief */
.bd-sf { display: grid; gap: 8px; }
.bd-sf-q { display: flex; gap: 6px; } .bd-sf-q .bd-bf-in { flex: 1; min-width: 0; } .bd-sf-q .btn { flex: none; }
.bd-sf-res { display: grid; gap: 4px; } .bd-sf-res:empty { display: none; }
.bd-sf-hit { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid #E6E8EB; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.bd-sf-hit:hover { border-color: #1A73E8; background: #F8FAFF; } .bd-sf-hit .tt-ic { width: 16px; height: 16px; color: #1A73E8; flex: none; margin-top: 2px; }
.bd-sf-hit span { display: grid; min-width: 0; } .bd-sf-hit b { font-size: 13px; } .bd-sf-hit small { font-size: 12px; color: #5F6368; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-sf-wait { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: #5F6368; }
.bd-sf-now { display: grid; gap: 2px; } .bd-sf-now b { font: 700 15px var(--display); } .bd-sf-now small { color: #5F6368; font-size: 12.5px; }
.bd-sf-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.bd-sf-ck li { display: flex; align-items: center; gap: 6px; } .bd-sf-ck .tt-ic { width: 14px; height: 14px; } .bd-sf-ck li.ok .tt-ic { color: #188038; } .bd-sf-ck li.no { color: #8A4B00; } .bd-sf-ck li.no .tt-ic { color: #E37400; }
/* rules and site data: one table, editable */
.bd-dt { display: grid; }
.bd-dt-g { display: flex; align-items: center; gap: 6px; margin: 10px 0 2px; font: 700 12px var(--font); color: #3C4043; } .bd-dt-g:first-child { margin-top: 0; } .bd-dt-g .tt-ic { width: 15px; height: 15px; color: #1967D2; }
.bd-dt-r { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 1.6fr) 118px 20px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid #F1F3F4; }
.bd-dt-k { font-size: 12.5px; color: #3C4043; } .bd-dt-k small { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #E8F0FE; color: #174EA6; font-size: 10.5px; font-weight: 700; }
.bd-dt-v { display: flex; gap: 4px; align-items: center; min-width: 0; } .bd-dt-v .bd-bf-in { padding: 6px 9px; font-size: 13px; }
.bd-dt-r > select.bd-bf-in { padding: 6px 6px; font-size: 12px; font-weight: 600; }
.bd-dt-r.found > select { color: #137333; } .bd-dt-r.confirmed > select { color: #174EA6; } .bd-dt-r.assumed > select { color: #8A4B00; } .bd-dt-r.missing > select { color: #80868B; }
.bd-dt-r.missing .bd-dt-k { color: #80868B; }
@container (max-width: 640px) { .bd-dt-r { grid-template-columns: minmax(0, 1fr) 108px 20px; } .bd-dt-k { grid-column: 1 / -1; font-weight: 600; } }
/* the save bar */
.bd-bbar { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 0 -20px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); background: rgba(248,249,250,.94); backdrop-filter: blur(6px); border-top: 1px solid #E6E8EB; }
.bd-bbar-t { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #188038; } .bd-bbar-t .tt-ic { width: 15px; height: 15px; } .bd-bbar-t.dirty { color: #B06000; font-weight: 600; }
.bd-bbar-sp { flex: 1; }
@media (max-width: 820px) { .bd-bbar { margin: 0 -10px; padding: 8px 10px; } }
.bd-ws.rail .bd-views button.unsaved::after { content: ''; position: absolute; top: 7px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #E37400; box-shadow: 0 0 0 2px #fff; }
.bd-brief select.bd-bf-in { -webkit-appearance: menulist; appearance: auto; width: 100%; min-width: 0; height: auto; padding: 6px 8px; border: 1px solid #DADCE0; border-radius: 10px; background: #fff; box-shadow: none; font: 600 12.5px/1.3 var(--font); color: #1F2328; white-space: nowrap; text-overflow: ellipsis; }
.bd-tl.six .bd-tl-s button { padding: 8px 8px; gap: 7px; } .bd-tl.six .bd-tl-s i { width: 24px; height: 24px; font-size: 12px; }
.bd-tl.six .bd-tl-s b { white-space: normal; font-size: 12.5px; line-height: 1.2; overflow-wrap: normal; }
.bd-ws.rail .bd-canvas-in:has(> .bd-brief) { padding-bottom: 0 !important; }
@media (max-width: 820px) {
  .bd-ws.rail .bd-sh-phase { display: none; }   /* the bottom bar names the phase on a phone */
  .bd-bbar { gap: 6px; } .bd-bbar-t { white-space: nowrap; font-size: 12px; } .bd-bbar .btn { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
  .bd-hide-s { display: none; }
}
.bd-tl.six .bd-tl-s button { padding: 8px 6px; gap: 6px; } .bd-tl.six .bd-tl-s i { width: 20px; height: 20px; font-size: 11px; } .bd-tl.six .bd-tl-s i .tt-ic { width: 13px; height: 13px; } .bd-tl.six .bd-tl-s b { font-size: 12px; text-overflow: clip; }

/* ===================== v1.85.0: the Idea Room ===================== */
.bd-ir { gap: 10px; padding-top: 12px; }
.bd-ir-top { display: flex; align-items: center; gap: 10px; flex: none; }
.bd-ir-top .bd-tl { flex: 1; min-width: 0; }
.bd-tl.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bd-tl.six .bd-tl-s button { padding: 7px 8px; gap: 7px; border-radius: 12px; }
.bd-tl.six .bd-tl-s i { width: 24px; height: 24px; background: #F1F3F4; color: #5F6368; } .bd-tl.six .bd-tl-s i .tt-ic { width: 14px; height: 14px; }
.bd-tl.six .bd-tl-s:first-child i { background: #F1F3F4; color: #5F6368; }
.bd-tl.six .bd-tl-s.partial i { background: #FEF3E2; color: #8A4B00; } .bd-tl.six .bd-tl-s.done i { background: #E6F4EA; color: #137333; }
.bd-tl.six .bd-tl-s b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-ir-leg { flex: none; display: grid; gap: 3px; font-size: 10.5px; color: #5F6368; }
.bd-ir-leg .k { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bd-ir-leg .k::before { content: ''; width: 12px; height: 12px; border-radius: 4px; border: 1px solid #DADCE0; background: #fff; flex: none; }
.bd-ir-leg .k.auto::before { display: none; } .bd-ir-leg .k.auto .tt-ic { width: 12px; height: 12px; padding: 1px; border-radius: 4px; background: #F3ECFD; color: #7B3FC4; box-sizing: content-box; }
.bd-ir-leg .k.over::before { border: 0; border-left: 3px solid #E37400; background: #FFF8EF; }
.bd-bw { padding: 12px 14px 14px; gap: 10px; }
.bd-bw-h { align-items: center; }
.bd-bw-h > div:first-child { flex: 1 1 260px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bd-bw-h b { font-size: 16px; } .bd-bw-h small { font-style: normal; color: #80868B; font-size: 12.5px; }
.bd-bw-act { gap: 8px; }
.bd-ir-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 11px; background: #F1F3F4; }
.bd-ir-seg button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 5px 10px; border-radius: 9px; font: 600 12.5px var(--font); color: #5F6368; cursor: pointer; white-space: nowrap; }
.bd-ir-seg button.on { background: #fff; color: #1F2328; box-shadow: 0 1px 2px rgba(60,64,67,.2); }
.bd-ir-seg button small { font-size: 10.5px; color: #80868B; font-weight: 600; }
.bd-ir-seg.sm button { padding: 4px 8px; font-size: 12px; }
.bd-ir-seg.col { display: grid; grid-template-columns: 1fr 1fr; }
.bd-ir-seg button i { width: 16px; height: 0; border-top: 2px solid #3C4043; }
.bd-ir-seg .r-near i { border-top-style: dashed; } .bd-ir-seg .r-apart i { border-top: 2px dotted #9AA0A6; } .bd-ir-seg .r-see i { border-top: 2px dotted #1A73E8; }
.bd-ir-b { display: grid; gap: 10px; min-width: 0; }
.bd-cards.three { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.2fr); }
@container (max-width: 1100px) { .bd-cards.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bd-cards.three > .bd-bcard:last-child { grid-column: 1 / -1; } }
@container (max-width: 700px) { .bd-cards.three, .bd-cards.two { grid-template-columns: minmax(0, 1fr); } .bd-ir-top { flex-direction: column; align-items: stretch; } .bd-ir-leg { display: flex; gap: 10px; } .bd-tl.six { grid-template-columns: repeat(6, minmax(104px, 1fr)); overflow-x: auto; padding-bottom: 2px; } }
.bd-bcard { padding: 12px; gap: 8px; }
.bd-bcard > header { gap: 8px; } .bd-bcard > header .bd-ir-seg { margin-left: auto; }
/* what Bonda (or the search) filled in, and what the architect changed */
.bd-pv { position: relative; display: block; }
.bd-pv .bd-pv-i { display: none; position: absolute; top: 7px; right: 8px; color: #7B3FC4; pointer-events: none; } .bd-pv .bd-pv-i .tt-ic { width: 13px; height: 13px; }
.bd-pv.auto .bd-bf-in { background: #FAF6FF; border-color: #E6D8FA; padding-right: 28px; } .bd-pv.auto .bd-pv-i { display: block; }
.bd-pv.over .bd-bf-in { border-left: 3px solid #E37400; padding-right: 30px; }
.bd-pv-b { display: none; position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: #FFF3E0; color: #B06000; cursor: pointer; place-items: center; }
.bd-pv-b .tt-ic { width: 14px; height: 14px; } .bd-pv.over .bd-pv-b { display: grid; }
.bd-pv-b.r { display: grid; position: static; flex: none; }
.bd-bf-chip.auto { background: #F3ECFD; color: #4A2380; } .bd-bf-chip.auto > .tt-ic { width: 12px; height: 12px; }
.bd-le-r.auto .bd-bf-in { background: #FAF6FF; border-color: #E6D8FA; }
.bd-le-r.over .bd-le-c:first-child .bd-bf-in { border-left: 3px solid #E37400; }
.bd-le-h, .bd-le-r { grid-template-columns: var(--le); } .bd-le-r:has(> .bd-pv-b) { grid-template-columns: var(--le) 26px; } .bd-le-r > .bd-pv-b { grid-column: auto; }
.bd-dt-r.auto .bd-bf-in { background: #FAF6FF; border-color: #E6D8FA; } .bd-dt-r.over .bd-bf-in { border-left: 3px solid #E37400; }
.bd-dt-r { grid-template-columns: minmax(110px, .8fr) minmax(0, 1.5fr) 104px 18px; gap: 6px; padding: 4px 0; }
.bd-dt-miss { margin-top: 6px; } .bd-dt-miss > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 0; font-size: 12.5px; color: #5F6368; list-style: none; } .bd-dt-miss > summary::-webkit-details-marker { display: none; }
.bd-dt-miss > summary::before { content: '›'; font-size: 16px; transition: transform .15s; } .bd-dt-miss[open] > summary::before { transform: rotate(90deg); }
.bd-chip.auto { background: #F3ECFD; color: #6B21A8; }
.bd-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; } .bd-tag .tt-ic { width: 11px; height: 11px; } .bd-tag.auto { background: #F3ECFD; color: #6B21A8; }
/* the design workspace and its cards, inside the Idea Room */
.bd-ir-dz { height: clamp(460px, calc(100vh - 250px), 860px); min-height: 0; display: flex; }
.bd-ir-dz > .bd-dz { height: 100%; flex: 1; }
.bd-ir-dz > .bd-dz.noplan { grid-template-columns: minmax(0, 1fr); } .bd-ir-dz > .bd-dz.noplan .bd-dz-side { max-width: 860px; }
.bd-ir-dzb { display: grid; gap: 10px; align-content: start; min-width: 0; } .bd-ir-dzb.wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
.bd-ir-col { display: grid; gap: 10px; align-content: start; }
.bd-ir-kpi { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: #F8F9FA; border: 1px solid #E6E8EB; } .bd-ir-kpi b { font: 800 20px var(--display); } .bd-ir-kpi small { color: #5F6368; font-size: 12px; }
.bd-ir-kpi.ok { background: #F1F8F3; border-color: #CDE9D6; } .bd-ir-kpi.bad { background: #FDF3F2; border-color: #F6D2CE; } .bd-ir-kpi .bd-chip { justify-self: start; margin-top: 4px; }
@media (max-width: 820px) { .bd-ir-dz { height: auto; display: block; } .bd-ir-dz > .bd-dz { height: auto; overflow: visible; } }
/* the relationship diagram */
.bd-tb { display: grid; gap: 8px; }
.bd-tb-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bd-tb-tl { font-size: 12px; color: #5F6368; font-weight: 600; } .bd-tb-sp { flex: 1; } .bd-tb-t > .bd-bf-in { width: 180px; padding: 6px 10px; }
.bd-tb-m { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 10px; align-items: start; }
@container (max-width: 760px) { .bd-tb-m { grid-template-columns: minmax(0, 1fr); } .bd-tb-t > .bd-bf-in { width: 100%; } }
.bd-tb-c { border-radius: 14px; overflow: hidden; border: 1px solid #E6E8EB; background: #fff; }
.bd-tb-svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; font-family: var(--font); }
.bd-tb-band { stroke: none; } .bd-tb-band.private { fill: #FBF7FF; } .bd-tb-band.service { fill: #FFFBF2; } .bd-tb-band.public { fill: #F5F9FF; } .bd-tb-band.none { fill: #F8F9FA; }
.bd-tb-bl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; fill: #9AA0A6; } .bd-tb-bl.private { fill: #8430CE; } .bd-tb-bl.service { fill: #B06000; } .bd-tb-bl.public { fill: #1A73E8; }
.bd-tb-street { font-size: 10.5px; fill: #9AA0A6; letter-spacing: .3em; text-transform: uppercase; }
.bd-tb-wind line { stroke: #188038; stroke-width: 2; } .bd-tb-wind path { fill: #188038; }
.bd-tb-l { cursor: pointer; } .bd-tb-l .hit { stroke: transparent; stroke-width: 14; } .bd-tb-l .v { stroke: #3C4043; stroke-width: 2.4; pointer-events: none; }
.bd-tb-l.r-near .v { stroke-dasharray: 7 5; stroke-width: 1.8; } .bd-tb-l.r-apart .v { stroke: #9AA0A6; stroke-dasharray: 2 5; stroke-width: 1.8; } .bd-tb-l.r-see .v { stroke: #1A73E8; stroke-dasharray: 1 4; stroke-width: 2; stroke-linecap: round; }
.bd-tb-l.bad .v { stroke: #D93025; } .bd-tb-l.sel .v { stroke-width: 4; } .bd-tb-l:hover .v { stroke-width: 3.4; }
.bd-tb-n { cursor: grab; } .bd-tb-n text { font-size: 11px; font-weight: 600; fill: #202124; paint-order: stroke; stroke: #fff; stroke-width: 3px; pointer-events: none; }
.bd-tb-n .ring { fill: none; stroke: transparent; stroke-width: 3; } .bd-tb-n.sel .ring { stroke: #1A73E8; } .bd-tb-n:hover .ring { stroke: #AECBFA; }
.bd-tb .pv.auto { fill: #8E5CD9; stroke: #fff; stroke-width: 1.5; } .bd-tb .pv.over { fill: #E37400; stroke: #fff; stroke-width: 1.5; }
.bd-tb-empty { font-size: 13px; fill: #80868B; }
.bd-tb-i { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 14px; background: #F8F9FA; border: 1px solid #E6E8EB; min-height: 120px; }
.bd-tb-ih { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bd-tb-ih b { font-size: 13.5px; }
.bd-tb-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #5F6368; } .bd-tb-row .bd-bf-in { width: 90px; }
.bd-tb-ia { display: flex; gap: 6px; flex-wrap: wrap; }
.bd-tb-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .bd-tb-links button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 4px 2px; font: 500 12.5px var(--font); color: #3C4043; cursor: pointer; text-align: left; border-radius: 6px; } .bd-tb-links button:hover { background: #fff; }
.bd-tb-links i { width: 16px; border-top: 2px solid #3C4043; } .bd-tb-links i.r-near { border-top-style: dashed; } .bd-tb-links i.r-apart { border-top: 2px dotted #9AA0A6; } .bd-tb-links i.r-see { border-top: 2px dotted #1A73E8; }
.bd-tb-help { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12.5px; color: #3C4043; } .bd-tb-help li { display: flex; align-items: center; gap: 8px; } .bd-tb-help .tt-ic { width: 16px; height: 16px; color: #1A73E8; flex: none; }
.bd-tb-sum { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; } .bd-tb-sum b { font: 800 18px var(--display); } .bd-tb-sum b.ok { color: #137333; } .bd-tb-sum b.no { color: #B3261E; } .bd-tb-sum small { color: #5F6368; font-size: 12px; margin-right: 8px; }
.bd-ir-seg .z-private.on { color: #8430CE; } .bd-ir-seg .z-service.on { color: #B06000; } .bd-ir-seg .z-public.on { color: #1A73E8; }
.bd-bbar[hidden] { display: none; }
.bd-ws.rail .bd-sub button span:not(.tt-ic) { white-space: normal !important; text-align: center; line-height: 1.05; overflow: visible; text-overflow: clip; }
.bd-tl.six .bd-tl-s b { white-space: normal; font-size: 12px; line-height: 1.15; overflow: visible; text-overflow: clip; }
.bd-tl.six .bd-tl-s button { min-height: 46px; }
.bd-bw > .bd-ir-leg { display: flex; justify-content: flex-end; gap: 14px; margin-top: -2px; }
.bd-ir .bd-bbar { margin-top: auto; }
.bd-tb-band.none { fill: #fff; } .bd-tb-div { stroke: #E3E5E8; stroke-dasharray: 4 4; }
.bd-tb-svg.narrow .bd-tb-n text { font-size: 12.5px; } .bd-tb-svg.narrow .bd-tb-bl { font-size: 12px; }
@media (max-width: 820px) { .bd-bw-h small { display: none; } }

/* ===================== v1.86.0: the Idea Room, quick and visual ===================== */
@keyframes bdIn { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bdPop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes bdGlow { 0% { box-shadow: 0 0 0 0 rgba(142,92,217,.45); } 100% { box-shadow: 0 0 0 10px rgba(142,92,217,0); } }
.tt-ic.flip { transform: rotate(180deg); }
.bd-tl.eight { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.bd-tl.eight .bd-tl-s button { padding: 6px 6px; gap: 6px; min-height: 44px; border-radius: 12px; }
.bd-tl.eight .bd-tl-s i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #F1F3F4; color: #5F6368; flex: none; position: relative; }
.bd-tl.eight .bd-tl-s i .tt-ic { width: 14px; height: 14px; }
.bd-tl.eight .bd-tl-s b { font-size: 11.5px; line-height: 1.15; white-space: normal; overflow: visible; }
.bd-tl.eight .bd-tl-s.done i { background: #E6F4EA; color: #137333; } .bd-tl.eight .bd-tl-s.partial i { background: #FEF3E2; color: #8A4B00; }
.bd-tl.eight .bd-tl-s.review i { background: #F3ECFD; color: #6B21A8; } .bd-tl.eight .bd-tl-s.review i::after { content: ''; position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: #8E5CD9; box-shadow: 0 0 0 2px #fff; }
.bd-tl-s.pop i { animation: bdPop .45s ease; }
@container (max-width: 900px) { .bd-tl.eight { grid-template-columns: repeat(8, minmax(96px, 1fr)); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } }
/* the clean slate */
.bd-ir.start .bd-bw { border: 0; background: transparent; padding: 4px 0; }
.bd-brief-c { max-width: 880px; width: 100%; margin: 4vh auto 0; display: grid; gap: 12px; }
.bd-brief-c h2 { margin: 0; font: 800 clamp(22px, 3vw, 30px)/1.2 var(--display); color: #1F2328; }
.bd-brief-c > p { margin: 0; color: #5F6368; font-size: 14px; line-height: 1.5; }
.bd-brief-ta { width: 100%; box-sizing: border-box; min-height: 190px; padding: 16px 18px; border: 1px solid #DADCE0; border-radius: 18px; background: #fff; font: 400 15.5px/1.6 var(--font); color: #1F2328; resize: vertical; box-shadow: 0 1px 3px rgba(60,64,67,.08); }
.bd-brief-ta::placeholder { color: #A0A4A8; }
.bd-brief-ta:focus { outline: none; border-color: #1A73E8; box-shadow: 0 0 0 4px rgba(26,115,232,.12); }
.bd-found { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.bd-fnd { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px; background: #F3ECFD; color: #4A2380; font-size: 12.5px; font-weight: 600; animation: bdIn .35s ease both; animation-delay: calc(var(--i, 0) * 45ms); }
.bd-fnd .tt-ic { width: 15px; height: 15px; color: #7B3FC4; }
.bd-ir-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.bd-ir-sp { flex: 1; }
.bd-link { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 6px 4px; font: 600 13px var(--font); color: #1A73E8; cursor: pointer; } .bd-link .tt-ic { width: 15px; height: 15px; } .bd-link:hover { text-decoration: underline; }
.btn.bd-ok { padding: 11px 20px; border-radius: 999px; font-size: 14.5px; }
.bd-ir-foot .bd-ir-leg { display: flex; gap: 12px; }
/* tiles: people, spaces, moods, characters */
.bd-tiles { display: grid; gap: 8px; }
.bd-tiles.ppl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bd-tiles.sp { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.bd-tiles.mood { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.bd-tiles.char { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.bd-tile { position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; padding: 10px 8px 9px; border: 1.5px solid #E6E8EB; border-radius: 16px; background: #fff; font: inherit; color: #1F2328; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .12s, box-shadow .15s; animation: bdIn .3s ease both; }
.bd-tile:hover:not(:disabled):not(.ro) { border-color: #C6D3E6; box-shadow: 0 2px 8px rgba(60,64,67,.08); } .bd-tile:active:not(.ro) { transform: scale(.97); } .bd-tile.ro { cursor: default; }
.bd-tile b { font-size: 12.5px; font-weight: 700; line-height: 1.2; } .bd-tile small { font-size: 11px; color: #80868B; }
.bd-tile-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #F1F3F4; color: #3C4043; } .bd-tile-ic .tt-ic { width: 22px; height: 22px; }
.bd-tile.on { border-color: #1A73E8; background: #F5F9FF; } .bd-tile.on .bd-tile-ic { background: #1A73E8; color: #fff; }
.bd-tile.auto { border-color: #D9C6F6; background: #FBF8FF; } .bd-tile.auto.on { border-color: #8E5CD9; } .bd-tile.auto.on .bd-tile-ic { background: #8E5CD9; }
.bd-tile-a { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #F3ECFD; color: #7B3FC4; } .bd-tile-a .tt-ic { width: 11px; height: 11px; }
.bd-tile.sp.auto::after { content: ''; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: #8E5CD9; }
.bd-tile.assumed { border-style: dashed; }
.bd-tile.new { animation: bdIn .3s ease, bdGlow .9s ease .2s; }
.bd-tile.pop { animation: bdPop .3s ease; }
.bd-tile-x { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: #9AA0A6; cursor: pointer; opacity: 0; transition: opacity .15s; } .bd-tile-x .tt-ic { width: 12px; height: 12px; }
.bd-tile:hover .bd-tile-x, .bd-tile:focus-within .bd-tile-x { opacity: 1; } @media (hover: none) { .bd-tile-x { opacity: .7; } }
.bd-tile-m { display: inline-flex; align-items: center; gap: 3px; } .bd-tile-m small { font-size: 11px; }
.bd-tile-ar { width: 52px; padding: 3px 5px; border: 1px solid transparent; border-radius: 8px; background: #F8F9FA; font: 600 12px var(--font); text-align: center; color: #3C4043; } .bd-tile-ar:focus { outline: none; border-color: #1A73E8; background: #fff; }
.bd-tile-pic { display: block; width: 100%; } .bd-tile-pic svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.bd-tiles.char .bd-tile { padding: 6px 6px 8px; } .bd-tiles.char .bd-tile.on { box-shadow: 0 0 0 3px rgba(26,115,232,.15); }
.bd-step-n { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: #F1F3F4; }
.bd-step-n button { width: 26px; height: 26px; border: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #3C4043; cursor: pointer; box-shadow: 0 1px 2px rgba(60,64,67,.15); } .bd-step-n button .tt-ic { width: 13px; height: 13px; }
.bd-step-n b { min-width: 22px; text-align: center; font: 800 14px var(--display); } .bd-step-n b.pop { animation: bdPop .3s ease; }
.bd-pal { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 6px; border-top: 1px dashed #E6E8EB; }
.bd-pal-b { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 7px; border: 1px solid #E6E8EB; border-radius: 999px; background: #fff; font: 600 12px var(--font); color: #3C4043; cursor: pointer; transition: transform .12s, border-color .12s; }
.bd-pal-b::before { content: '+'; color: #1A73E8; font-weight: 800; } .bd-pal-b .tt-ic { width: 14px; height: 14px; color: #5F6368; } .bd-pal-b:hover { border-color: #1A73E8; } .bd-pal-b:active { transform: scale(.95); }
.bd-pal .bd-bf-in { width: 150px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; }
.bd-sp-sum { margin: 0; font-size: 12.5px; color: #5F6368; } .bd-sp-sum:empty { display: none; }
.bd-sl { display: grid; gap: 4px; } .bd-sl > span { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: #3C4043; } .bd-sl > span b { font: 800 14px var(--display); color: #1F2328; }
.bd-sl input[type=range] { width: 100%; accent-color: #1A73E8; } .bd-sl.auto > span b { color: #6B21A8; } .bd-sl.auto > span b::after { content: ' ✦'; font-size: 11px; color: #8E5CD9; } .bd-sl.over > span b { color: #B06000; }
.bd-more { border-top: 1px solid #F1F3F4; padding-top: 6px; } .bd-more > summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600; color: #1A73E8; padding: 4px 0; } .bd-more > summary::-webkit-details-marker { display: none; }
.bd-more > summary::before { content: '+ '; } .bd-more[open] > summary::before { content: '− '; } .bd-more[open] { display: grid; gap: 8px; }
.bd-her { display: grid; gap: 4px; } .bd-her small { font-size: 11.5px; font-weight: 600; color: #5F6368; }
.bd-sf-sug { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: #FBF8FF; border: 1px solid #E6D8FA; } .bd-sf-sug > small { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #6B21A8; font-size: 12px; } .bd-sf-sug .tt-ic { width: 13px; height: 13px; }
.bd-sitesk { border-radius: 14px; overflow: hidden; border: 1px solid #E6E8EB; } .bd-sitesk svg { display: block; width: 100%; height: auto; }
/* the relationship diagram on the site */
.bd-tb-ground { fill: #F4F1EA; } .bd-tb-road { fill: #FFFFFF; stroke: #D5D9DD; } .bd-tb-plot { fill: #fff; } .bd-tb-plot.line { fill: none; stroke: #188038; stroke-width: 2.2; }
.bd-tb-sb { fill: none; stroke: #9AA0A6; stroke-dasharray: 5 4; } .bd-tb-dim { font-size: 10.5px; fill: #5F6368; font-weight: 600; }
.bd-tb-north path { fill: #3C4043; } .bd-tb-north text { font-size: 10px; font-weight: 800; fill: #3C4043; }
/* icons always centred in their buttons and badges */
.tt-ic { display: inline-grid; place-items: center; flex: none; } .tt-ic svg { display: block; width: 100%; height: 100%; }
.bd-av, .bd-mascot img { object-fit: cover; object-position: center; }
.bd-bcard, .bd-bw, .bd-ir-b { grid-template-columns: minmax(0, 1fr); }
.bd-bcard > * { min-width: 0; }
.bd-pal.short .bd-pal-b.x { display: none; }
.bd-tiles.mood { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; } .bd-tiles.mood .bd-tile { padding: 7px 4px 6px; gap: 3px; border-radius: 13px; } .bd-tiles.mood .bd-tile-ic { width: 30px; height: 30px; border-radius: 10px; } .bd-tiles.mood .bd-tile-ic .tt-ic { width: 17px; height: 17px; } .bd-tiles.mood .bd-tile b { font-size: 11.5px; }
/* the chat: like a messaging app, the next-step bar stays short so the messages keep the room */
.bd-ws.rail .bd-next > span, .bd-ws.rail .bd-next .bd-next-t + span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-ws.rail .bd-next-a { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; } .bd-ws.rail .bd-next-a::-webkit-scrollbar { display: none; } .bd-ws.rail .bd-next-a .bd-chip { flex: none; }
.bd-brief.bd-ir { scroll-padding-bottom: 80px; }
.bd-bbar.nobar { display: none !important; }

/* ---------- v1.88.0: brand home (deepseeme.com / deepseebit.com) ---------- */
.bh-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 36px 0 12px; }
.bh-copy { display: grid; gap: 14px; justify-items: start; }
.bh-word .ds-word { font-size: clamp(40px, 6vw, 64px); }
.bh-hero h1 { font-family: var(--display); font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.02em; margin: 0; }
.bh-lead { margin: 0; text-align: left; max-width: 620px; }
.bh-cta { justify-content: flex-start; margin: 4px 0 0; }
.bh-pillars { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.bh-pillars span { display: inline-flex; align-items: center; gap: 6px; } .bh-pillars i { display: inline-block; width: 3px; height: 12px; border-radius: 1px; }
.bh-shot { border-radius: 22px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(6,18,42,.05), 0 12px 32px -14px rgba(6,18,42,.18); display: flex; align-items: center; justify-content: center; }
.bh-shot img { display: block; max-width: 100%; height: auto; max-height: 440px; object-fit: contain; }
.bh-products .bh-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bh-pil, .bh-fam { padding: 28px 0 8px; display: grid; gap: 12px; }
.bh-pil h2, .bh-fam h2 { font-family: var(--display); font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; margin: 0; }
.bh-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 6px; }
.bh-col { background: var(--panel); border-radius: 22px; padding: 20px 22px; display: grid; gap: 10px; align-content: start; box-shadow: 0 1px 2px rgba(6,18,42,.05), 0 12px 32px -14px rgba(6,18,42,.18); }
.bh-col-h { display: flex; align-items: center; gap: 10px; } .bh-col-h i { display: block; width: 5px; height: 24px; border-radius: 3px; } .bh-col-h h3 { margin: 0; font-family: var(--display); font-size: 20px; }
.bh-col ul { margin: 0; padding-left: 16px; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.bh-src { display: grid; gap: 8px; margin-top: 8px; } .bh-src > div { display: flex; flex-wrap: wrap; gap: 6px; } .chip.sm { padding: 4px 10px; font-size: 12.5px; }
.bh-fam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.bh-fam-card { display: grid; gap: 6px; text-decoration: none; color: var(--ink); background: var(--panel); border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(6,18,42,.05), 0 12px 32px -14px rgba(6,18,42,.18); }
.bh-fam-card b { font-size: 20px; } .bh-fam-card b.ds-word .ds-in { color: #E4572E; } .bh-fam-card small { color: var(--ink-2); line-height: 1.35; }
.bh-fam-card.you { outline: 2px solid var(--brand-2); outline-offset: -2px; }
@media (max-width: 820px) { .bh-hero { grid-template-columns: 1fr; gap: 20px; padding-top: 16px; } }

/* ---------- v1.89.0: Google sign-in ---------- */
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 2px 0; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.btn.google { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); gap: 10px; }
.btn.google:hover { background: #F7F9FC; }

/* v1.90.0: the mark and the wordmark are two links */
.tb-brand .tb-vv, .tb-brand .tb-word { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.tb-brand .tb-vv img { display: block; }

/* v26.10.30.01.00.00: the common sign-in window */
.auth-form.common { position: relative; overflow: hidden; }
.auth-head { position: relative; margin: -20px -20px 4px; padding: 22px 20px 14px; text-align: center; background: linear-gradient(180deg, #F5F2EA, var(--panel)); border-bottom: 1px solid var(--line); overflow: hidden; }
.auth-head img { position: relative; height: 54px; width: auto; display: block; margin: 0 auto 8px; }
.auth-co { position: relative; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--brand); letter-spacing: -.01em; }
.auth-one { position: relative; font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 600; }
.auth-one i { font-style: normal; color: var(--coral); }
.auth-bg { position: absolute; inset: 0; pointer-events: none; }
.auth-wm { position: absolute; font-family: var(--display); font-weight: 700; font-size: 22px; opacity: .09; white-space: nowrap; letter-spacing: -.02em;
  left: calc((var(--i) * 37%) - 10%); top: calc((var(--i) * 23%) - 4%); transform: rotate(calc(-14deg + var(--i) * 5deg)); }
.auth-wm i { font-style: normal; color: var(--coral); }
.auth-wm.wm-go { color: #0B5A49; } .auth-wm.wm-in { color: #123F63; } .auth-wm.wm-me { color: #5B2A86; } .auth-wm.wm-bit { color: #7A4A12; }
.auth-wm:nth-child(n+6) { left: calc(((var(--i) - 5) * 29%) + 4%); top: calc(((var(--i) - 5) * 19%) + 48%); font-size: 18px; }

/* ---------- v26.11.01.01.00.04: unslop pass on the gate (top bar, landing, products, experts, sign-in card) ---------- */
.btn { border-radius: 10px; font-weight: 500; }
.btn.sm { border-radius: 8px; }
.btn.primary { background: var(--brand); } .btn.primary:hover { background: var(--brand-2); }
.chip, .chip.ghost { font-weight: 500; }
.badge { font-weight: 500; letter-spacing: 0; }
.tb-nav button { font-weight: 500; }
.topbar .tb-price, .topbar .tb-rooms { background: none; color: var(--brand); padding: 6px 8px; box-shadow: none; }
.topbar .tb-price:hover, .topbar .tb-rooms:hover { background: var(--brand-3); color: var(--brand); }
.tb-brand b { font-weight: 600; }
.eyebrow, .led-eyebrow, .wb-kicker, .hero-kicker, .pm-tag, .pm-vs-h, .bi-eyebrow { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.hero-kicker { background: none; padding: 0; }
.eyebrow b, .bi-eyebrow b { font-weight: 500; color: var(--coral); }
.band > h2, .tv-head h2, .tvh-copy h1, .gate-hero h1, .pg-head h2, .ag6 .bi-ag-head h2 { font-weight: 500; letter-spacing: -.01em; }
.band > h2 em, .tv-head h2 em, .tvh-copy h1 em, .gate-hero h1 span { font-style: normal; font-weight: 500; }
.pg-price, .wb-free, .wb-pro, .in-tag, .bi-offer-tag, .tag-q, .bb-tag { font: 500 12px/1 var(--font); letter-spacing: 0; text-transform: none; border-radius: 6px; padding: 3px 8px; }
.pg-card { border-radius: 12px; } .pg-cat { border-radius: 16px; box-shadow: none; border: 1px solid var(--line); }
.pg-ic { border-radius: 8px; } .pg-cat-ic { border-radius: 8px; }
.pg-card:hover .pg-go { transform: none; }
.ag6-i { border-radius: 16px; box-shadow: none; border: 1px solid var(--line); }
.tm { border-radius: 16px; transition: box-shadow .15s; } .tm:hover { transform: none; box-shadow: 0 0 0 1px var(--line); }
.tm .tm-more { font-weight: 500; } .tm small { font-weight: 500; }
.how-steps .n { font-weight: 600; }
.band.howbar { border-radius: 16px; } .band.howbar:hover { transform: none; box-shadow: none; }
.pricec { border-radius: 16px; }
.auth-card { border-radius: 16px; }
.auth-form, .card-form { border-radius: 16px; box-shadow: 0 8px 24px rgba(18,63,99,.08); }
.auth-form h3 { font-weight: 600; } .auth-form h3 small { font-weight: 500; }
.auth-msg { font-weight: 500; }
.auth-head { background: var(--panel-2); border-radius: 16px 16px 0 0; }
.auth-co { font-weight: 600; letter-spacing: 0; }
.auth-one { font-weight: 400; font-size: 13px; }
.auth-wm { letter-spacing: 0; }
.auth-form .consent.stay { font-weight: 400; }
.auth-form .consent.stay b { font-weight: 500; }
.auth-form label > input:not([type=checkbox]) { border-radius: 8px; }
.tv-copy small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.tv-read, .tv-lower { font-weight: 600; }
.pdot { font-weight: 600; }
.app-foot { padding: 24px 8px; }