/* Referral dashboard (/data/dashboard/) and its admin page. Builds on data.css + guide.css. */

/* ---------- Theme tokens. Dark is the default; light applies when the head script sets
   data-theme="light" on <html>. This file loads only on the two dashboard pages, and every
   light rule sits under html[data-theme="light"], so no other page of the site changes. ---------- */
html {
  --d-side: #0c0c0d; --d-card: #151517; --d-sticky: #18181a; --d-option: #1c1c1e; --d-av: #2a2836;
  --d-fill: rgba(255,255,255,.03); --d-hover: rgba(255,255,255,.05); --d-hover-2: rgba(255,255,255,.08); --d-hover-line: rgba(255,255,255,.26);
  --d-ink: #ececec; --d-ink-hover: #fff; --d-on-ink: #111; --d-strong: #fff;
  --d-tile: #2a2a2d; --d-tile-2: #1f1f22; --d-tile-line: var(--line-2); /* logo tiles stay dark in both themes: several marks are white */
  --d-ok: #9fe0b4; --d-ok-2: #7bd88f; --d-ok-bar: #7fd1a5; --d-ok-line: rgba(127,209,165,.38); --d-ok-bg: rgba(127,209,165,.075);
  --d-warn: #ecd08a; --d-warn-line: rgba(231,196,107,.35); --d-warn-bg: rgba(231,196,107,.06);
  --d-vio: #c9c1ff; --d-vio-line: rgba(139,124,246,.42); --d-vio-bg: rgba(139,124,246,.1);
  --d-err: #f0a3a0; --d-err-line: rgba(233,138,135,.4);
  --d-amber: #e7a46b; --d-amber-line: rgba(231,164,107,.35);
  --d-art-bg: linear-gradient(180deg, #1d1c26 0%, #15141b 55%, #121212 100%);
  --d-glass: rgba(18,18,20,.82); --d-toast: rgba(16,24,18,.92); --d-dot: rgba(255,255,255,.16);
  --d-shadow: 0 30px 80px rgba(0,0,0,.45); --d-shadow-2: 0 16px 40px rgba(0,0,0,.4);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #fafafa; --bg-2: #ffffff; --bg-3: #f2f2f2;
  --line: rgba(17,17,17,.09); --line-2: rgba(17,17,17,.16);
  --fg: #111111; --fg-2: #505050; --fg-3: #6b6b6b;
  --green: #1a7f43; --violet: #5b46d6;
  --d-side: #ffffff; --d-card: #ffffff; --d-sticky: #ffffff; --d-option: #ffffff; --d-av: #ecebf5;
  --d-fill: #ffffff; --d-hover: rgba(17,17,17,.045); --d-hover-2: rgba(17,17,17,.07); --d-hover-line: rgba(17,17,17,.3);
  --d-ink: #111111; --d-ink-hover: #2b2b2b; --d-on-ink: #ffffff; --d-strong: #000;
  --d-tile: #1c1c1f; --d-tile-2: #1c1c1f; --d-tile-line: #1c1c1f;
  --d-ok: #1a7f43; --d-ok-2: #1a7f43; --d-ok-bar: #2e9e5e; --d-ok-line: rgba(26,127,67,.35); --d-ok-bg: rgba(26,127,67,.07);
  --d-warn: #8a5a00; --d-warn-line: rgba(160,110,0,.38); --d-warn-bg: rgba(200,150,20,.08);
  --d-vio: #5b46d6; --d-vio-line: rgba(91,70,214,.35); --d-vio-bg: rgba(91,70,214,.07);
  --d-err: #b42318; --d-err-line: rgba(180,35,24,.35);
  --d-amber: #a1520f; --d-amber-line: rgba(161,82,15,.35);
  --d-art-bg: linear-gradient(180deg, #e9e7f2 0%, #f0eff5 55%, #fafafa 100%);
  --d-glass: rgba(255,255,255,.86); --d-toast: rgba(255,255,255,.96); --d-dot: rgba(17,17,17,.14);
  --d-shadow: 0 30px 70px rgba(30,28,50,.14); --d-shadow-2: 0 14px 34px rgba(30,28,50,.14);
}
/* body.tint-twilight sets --amber on <body>, so the light value has to sit there too */
html[data-theme="light"] body { --amber: #a1520f; }

.dash-sec { padding-top: 0; margin-top: clamp(-110px, -8vw, -60px); position: relative; z-index: 1; }
.dash-wrap { max-width: 960px; }
.dash-top { padding: 120px 0 0; }
.dash-top .h3 { font-weight: 300; }
.dash-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.dash-bar p { margin: 0; color: var(--fg-2); font-size: 14px; }
.dash-bar b { color: var(--fg); font-weight: 500; }
.dash-h { margin: 10px 0 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 300; letter-spacing: -.02em; line-height: 1.2; }
.dash-copy p { margin: 14px 0 0; font-size: 16px; line-height: 1.7; color: var(--fg-2); }
.dash-copy h2 { margin: 48px 0 0; font-size: clamp(22px, 2.3vw, 28px); font-weight: 400; letter-spacing: -.02em; line-height: 1.25; }
.dash-copy a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.dash-fine { font-size: 13px; line-height: 1.6; color: var(--fg-2); margin: 18px 0 0; }
[hidden] { display: none !important; }

/* small text buttons and plain buttons */
.lnk { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lnk:hover { color: var(--d-strong); }
.dbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--d-fill); color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; transition: background-color .2s, border-color .2s; }
.dbtn:hover { background: var(--d-hover-2); border-color: var(--d-hover-line); }
.dbtn.primary { background: var(--d-ink); border-color: var(--d-ink); color: var(--d-on-ink); font-weight: 500; }
.dbtn.primary:hover { background: var(--d-ink-hover); border-color: var(--d-ink-hover); }
.dbtn[disabled], .dbtn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.dbtn svg { flex: none; }

/* text inputs, selects (same underline style as the estimator's numbers) */
.dfields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.dfield { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.dfield label, .dfield .lbl { font-size: 15px; color: var(--fg); }
.dfield label small { color: var(--fg-3); font-size: 13px; margin-left: 6px; }
.dfield input, .dfield select, .dash-in { width: 100%; font: inherit; font-size: 17px; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 4px 0 8px; }
.dfield select, select.dash-in { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23a3a3a3' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 2px center; }
html[data-theme="light"] .dfield select, html[data-theme="light"] select.dash-in { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E"); }
.dfield select option, select.dash-in option { background: var(--d-option); color: var(--fg); }
.dfield input:focus-visible, .dfield select:focus-visible, .dash-in:focus-visible { outline: none; border-bottom-color: var(--fg-2); }
.dfield input::placeholder { color: var(--fg-3); }
.gnums.three { grid-template-columns: 1fr 1fr 1fr; }
.gopts.checks span::before { content: ""; width: 10px; height: 10px; margin-right: 8px; border: 1px solid var(--fg-3); border-radius: 3px; }
.gopts.checks input:checked + span::before { background: var(--d-on-ink); border-color: var(--d-on-ink); }
@media (max-width: 760px) { .dfields, .gnums.three { grid-template-columns: 1fr; } .gnums.three .gnum + .gnum { border-top: 1px solid var(--line); } }

/* auth box */
.auth { max-width: 520px; }
.auth-tabs { display: flex; gap: 6px; margin-top: 18px; }
.auth-tabs button { height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); background: none; color: var(--fg-2); font: inherit; font-size: 13px; cursor: pointer; }
.auth-tabs button[aria-selected="true"] { background: var(--d-ink); border-color: var(--d-ink); color: var(--d-on-ink); }
.auth .row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.msg { display: block; padding: 0; border: 0; margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.msg.err { color: var(--d-err); }
.msg.ok { color: var(--d-ok); }

/* landing: how it works */
.dash-land { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .dash-land { grid-template-columns: 1fr; } }
.dash-land .gslot { margin-top: 0; }
.gcards.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 860px) { .gcards.three { grid-template-columns: 1fr; } }

/* settings summary */
.dash-settings > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dash-settings > summary::-webkit-details-marker { display: none; }
.dash-settings > summary .sum { margin: 8px 0 0; font-size: 15px; color: var(--fg-2); }
.dash-settings > summary .lnk { flex: none; }
.dash-settings[open] > summary .lnk .when-closed, .dash-settings:not([open]) > summary .lnk .when-open { display: none; }
.dash-save { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.dash-save .msg { margin: 0; }
/* The save status stays in view at the bottom of the screen while the long profile form scrolls (phones especially). */
.app-main .dash-save { position: sticky; bottom: 0; z-index: 3; margin: 22px 0 0; padding: 12px 0; border-top: 1px solid var(--line); background: var(--bg); }
html[data-theme="light"] .app-main .dash-save { background: #ffffff; }
/* desktop: the panel scrolls inside itself and its 48px bottom padding would leave a gap under the bar */
@media (min-width: 901px) { .app-main .dash-save { bottom: -48px; } }
.app-main .dash-save .msg.err { font-weight: 500; }
/* Phones: the chat button (chat.css .tcc-launch) floats over the bottom 50px; the status sits above it. */
@media (max-width: 899px) { .app-main .dash-save { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } }
/* An entry the profile can't save as typed (dashboard.js fieldError). */
.invalid .fmw input, .invalid .fmw select { border-color: var(--d-err); }
.ferr { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--d-err); }

/* progress */
.prog { margin-top: 22px; }
.prog-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--fg-2); }
.prog-top b { color: var(--fg); font-weight: 500; }
.prog-bar { margin-top: 8px; height: 6px; border-radius: 6px; background: var(--line-2); overflow: hidden; }
.prog-bar i { display: block; height: 100%; width: 0; background: var(--d-ok-bar); border-radius: 6px; transition: width .4s var(--ease); }

/* buyer cards */
.buyers { display: grid; gap: 14px; margin-top: 22px; }
.buyer { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 22px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-2); }
.buyer.locked { opacity: .78; }
.buyer .logo { width: 56px; height: 56px; border-radius: 12px; background: var(--d-tile); border: 1px solid var(--d-tile-line); display: grid; place-items: center; padding: 8px; overflow: hidden; }
.buyer .logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.buyer-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.buyer-h h3 { font-size: 20px; font-weight: 500; letter-spacing: -.01em; margin: 0 6px 0 0; }
.buyer-h h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.buyer .sum { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.badge.fit-good { color: var(--d-ok); border-color: var(--d-ok-line); background: var(--d-ok-bg); }
.badge.fit-possible { color: var(--d-warn); border-color: var(--d-warn-line); background: var(--d-warn-bg); }
.badge.spec { color: var(--d-vio); border-color: var(--d-vio-line); background: var(--d-vio-bg); }
.badge.hid { color: var(--d-err); border-color: var(--d-err-line); }
.buyer dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 14px 0 0; font-size: 14px; }
.buyer dt { color: var(--fg-2); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding-top: 3px; }
.buyer dd { margin: 0; color: var(--fg); line-height: 1.55; }
.buyer ol { margin: 0; padding-left: 18px; }
.buyer ol li + li { margin-top: 2px; }
.buyer .note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.buyer .note b { color: var(--fg); font-weight: 500; }
.buyer .note.warn { border-color: var(--d-warn-line); background: var(--d-warn-bg); }
.buyer-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.buyer-act .grow { flex: 1 1 auto; }
.buyer-act .st { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); }
.buyer-act .st select { width: auto; min-width: 150px; font-size: 14px; padding: 6px 22px 6px 0; }
.consent { display: flex; gap: 10px; align-items: flex-start; flex-basis: 100%; font-size: 14px; line-height: 1.5; color: var(--fg-2); cursor: pointer; }
.consent input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--d-ink); flex: none; }
.done-note { font-size: 14px; color: var(--d-ok); }
@media (max-width: 560px) {
  .buyer { grid-template-columns: 1fr; padding: 18px; }
  .buyer dl { grid-template-columns: 1fr; gap: 2px; }
  .buyer dd + dt { margin-top: 8px; }
  .buyer-act .dbtn { width: 100%; }
  .buyer-act .st { width: 100%; justify-content: space-between; }
}

/* groups */
.group-h { margin: 40px 0 0; font-size: 20px; font-weight: 400; letter-spacing: -.01em; }
.group-sub { margin: 6px 0 0; font-size: 15px; color: var(--fg-2); max-width: 64ch; }
.notfit { margin-top: 40px; border-top: 1px solid var(--line); }
.notfit > summary { list-style: none; cursor: pointer; padding: 18px 0; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; }
.notfit > summary::-webkit-details-marker { display: none; }
.notfit > summary span { color: var(--fg-2); font-size: 14px; }
.notfit ul { list-style: none; margin: 0; padding: 0 0 8px; }
.notfit li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-2); }
.notfit li img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: var(--d-tile); padding: 3px; flex: none; }
.notfit li b { color: var(--fg); font-weight: 500; min-width: 120px; }
.empty { margin: 22px 0 0; padding: 18px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--fg-2); font-size: 15px; line-height: 1.6; }

/* admin */
.adm-sec { margin-top: 28px; }
.adm-table-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-table th, .adm-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.adm-table th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); font-weight: 400; white-space: nowrap; }
.adm-table td { color: var(--fg); }
.adm-table td small { display: block; color: var(--fg-2); font-size: 12.5px; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table input[type=text], .adm-table input[type=url], .adm-table textarea, .adm-table select { width: 100%; min-width: 160px; font: inherit; font-size: 13px; color: var(--fg); background: var(--bg); border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 8px; }
.adm-table textarea { min-height: 64px; min-width: 220px; resize: vertical; }
.adm-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--d-ink); }
.adm-pre { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.adm-pre select { max-width: 360px; }
.dash-callout { padding: 18px 22px 20px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-2); }
.dash-callout .k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); margin: 0; }
.dash-callout p:not(.k) { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--fg); }
.hero .lede a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(237,237,237,.4); }
.adm-table select { appearance: none; -webkit-appearance: none; min-width: 96px; padding-right: 24px; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23a3a3a3' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 8px center; }
#adm-vendors th:first-child, #adm-vendors td:first-child { position: sticky; left: 0; z-index: 1; background: var(--d-sticky); min-width: 130px; box-shadow: 1px 0 0 var(--line); }

/* ---------- Signed out: 40/60 split (sign up left, binary art + product preview right) ---------- */
.auth-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); min-height: 100svh; }
.auth-left { display: flex; align-items: center; justify-content: center; padding: 120px clamp(24px, 4vw, 64px) 56px; background: var(--d-side); border-right: 1px solid var(--line); }
.auth-box { width: 100%; max-width: 380px; }
.auth-h { margin: 12px 0 0; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.05; font-weight: 300; letter-spacing: -.03em; }
.auth-sub { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--fg-2); }
.auth-box .auth-tabs { margin-top: 28px; }
.auth-box form { margin-top: 22px; }
.auth-google { width: 100%; height: 46px; margin-top: 28px; gap: 10px; font-size: 15px; font-weight: 500; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; font-size: 12.5px; color: var(--fg-3); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-or + form { margin-top: 4px; }
.auth-go { width: 100%; height: 46px; margin-top: 22px; font-size: 15px; }
.auth-magic { display: block; margin: 16px auto 0; font-size: 14px; color: var(--fg-2); text-decoration: none; }
.auth-magic u { color: var(--fg); text-underline-offset: 3px; }
.auth-magic:hover u { color: var(--d-strong); }
.auth-box .dash-fine { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; }

.auth-right { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 120px clamp(24px, 5vw, 80px) 56px; background: var(--d-art-bg); }
.auth-right canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; pointer-events: none; }
.auth-cap { position: relative; margin: 0; width: 100%; max-width: 46ch; text-align: center; font-size: 14px; line-height: 1.6; color: var(--fg-2); }

/* the product preview */
.mock { position: relative; width: 100%; max-width: 520px; }
.mock-win { border: 1px solid var(--line-2); border-radius: 16px; background: var(--d-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--d-shadow); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--d-dot); }
.mock-bar span { margin-left: 10px; font-family: var(--mono); font-size: 11px; color: var(--fg-3); }
.mock-body { padding: 20px 20px 16px; }
.mock-k { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--fg-2); }
.mock-h { margin: 8px 0 0; font-size: 22px; font-weight: 300; letter-spacing: -.02em; }
.mock-prog { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; font-size: 12px; color: var(--fg-2); }
.mock-prog b { flex: 1; height: 4px; border-radius: 4px; background: var(--d-hover-2); overflow: hidden; }
.mock-prog b i { display: block; height: 100%; width: 60%; background: var(--fg); border-radius: 4px; animation: mock-fill 1.4s cubic-bezier(.2,.7,.2,1) .4s both; }
.mock-list { list-style: none; margin: 10px 0 0; padding: 0; }
.mock-list li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); animation: mock-in .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.25s + var(--i) * .09s); }
.ma-logo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--d-tile-2); border: 1px solid var(--d-tile-line); }
.ma-logo img { width: 22px; height: 22px; object-fit: contain; }
.ma-name { font-size: 14.5px; color: var(--fg); line-height: 1.25; }
.ma-name small { display: block; font-size: 12px; color: var(--fg-2); }
.ma-st { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-2); white-space: nowrap; }
.ma-st.st-offer { color: var(--d-ok-2); border-color: var(--d-ok-line); background: var(--d-ok-bg); }
.ma-st.st-call { color: var(--d-vio); border-color: var(--d-vio-line); background: var(--d-vio-bg); }
.ma-st.st-applied { color: var(--fg); }
.ma-st.st-go { background: var(--d-ink); border-color: var(--d-ink); color: var(--d-on-ink); }
.mock-more { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg-3); }
.mock-toast { position: absolute; right: -22px; bottom: -18px; padding: 11px 15px; border-radius: 12px; border: 1px solid var(--d-ok-line); background: var(--d-toast); font-size: 13px; color: var(--fg-2); box-shadow: var(--d-shadow-2); animation: mock-in .7s cubic-bezier(.2,.7,.2,1) 1.1s both; }
.mock-toast b { display: block; color: var(--d-ok-2); font-weight: 500; font-size: 12px; font-family: var(--mono); letter-spacing: .04em; }
@keyframes mock-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mock-fill { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .mock-list li, .mock-toast, .mock-prog b i { animation: none; } }

@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; min-height: 0; }
  .auth-left { padding-top: 112px; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-right { padding: 48px 20px 64px; gap: 40px; justify-content: flex-start; height: auto; min-height: 0; }
  .auth-right > .auth-cap { flex: none; }
  .mock-toast { right: 10px; bottom: -22px; }
}

/* ---------- Signed in: app shell (left sidebar + views) ---------- */
body.in-app > header.nav, body.in-app > .mobile-menu, body.in-app > footer.foot { display: none !important; }
body.in-app { background: var(--bg); }
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100svh; }
.app-side { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; gap: 28px; padding: 22px 14px 16px; background: var(--d-side); border-right: 1px solid var(--line); }
.app-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px; font-size: 15px; font-weight: 500; color: var(--fg); }
.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav button, .app-nav a { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--fg-2); font: inherit; font-size: 14px; text-align: left; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s; }
.app-nav button:hover, .app-nav a:hover { background: var(--d-hover); color: var(--fg); }
.app-nav [aria-current="page"] { background: var(--d-hover-2); color: var(--fg); }
.app-nav span { flex: 1; }
.app-nav em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--fg-2); background: var(--d-hover-2); border-radius: 999px; padding: 2px 8px; }
.app-nav em:empty { display: none; }
.app-me { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 4px; }
.me-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.me-btn:hover { background: var(--d-hover); }
.me-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--d-av); border: 1px solid var(--line-2); font-size: 12px; font-weight: 500; color: var(--fg); }
.me-tx { min-width: 0; display: grid; }
.me-tx b { font-size: 13.5px; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-tx small { font-size: 12px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-out { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--fg-2); font: inherit; font-size: 13.5px; cursor: pointer; }
.me-out:hover { background: var(--d-hover); color: var(--fg); }

.app-main { min-width: 0; padding: 40px clamp(20px, 4vw, 56px) 48px; }
.app-main > .view, .app-fine { max-width: 980px; }
.view-h h1 { margin: 6px 0 0; font-size: clamp(28px, 3vw, 38px); font-weight: 300; letter-spacing: -.025em; line-height: 1.1; }
.view-h .gslot-k { margin: 0; }
.view-note { margin: 14px 0 0; font-size: 14.5px; color: var(--fg-2); }
.app-fine { margin-top: 40px; }
.app-main .dash-settings { margin-top: 24px; }
.dash-save .msg { flex: 1 1 260px; }
.app-empty { margin-top: 28px; padding: 28px; border: 1px dashed var(--line-2); border-radius: 14px; }
.app-empty p { margin: 0 0 16px; color: var(--fg-2); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); gap: 1px; margin-top: 24px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.stats > div { background: var(--d-card); padding: 16px 18px; display: grid; gap: 4px; align-content: start; }
.stats b { font-size: 26px; font-weight: 300; letter-spacing: -.02em; color: var(--fg); }
.stats span { font-size: 12.5px; color: var(--fg-2); }
.stats .st-prog { align-content: center; gap: 10px; }
.stats .st-prog span { display: flex; justify-content: space-between; }
.stats .st-prog b { font-size: 12.5px; font-weight: 500; letter-spacing: 0; }

/* all buyers */
.allb { list-style: none; margin: 20px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.allb li { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 200px) 112px; align-items: center; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--d-card); }
.allb li:first-child { border-top: 0; }
.allb .ma-logo { width: 36px; height: 36px; }
.allb-tx { min-width: 0; display: grid; gap: 2px; }
.allb-tx b { font-size: 15px; font-weight: 500; color: var(--fg); }
.allb-tx span { font-size: 13px; color: var(--fg-2); line-height: 1.45; }
.allb-tx em { font-style: normal; font-size: 12.5px; color: var(--d-amber); }
.allb-pay { font-size: 13px; color: var(--fg); line-height: 1.4; }
.pill { justify-self: end; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-2); white-space: nowrap; }
.pill.yes { color: var(--d-ok-2); border-color: var(--d-ok-line); background: var(--d-ok-bg); }
.pill.no { color: var(--d-amber); border-color: var(--d-amber-line); }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .app-side { position: sticky; top: 0; z-index: 5; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 8px 12px; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .app-brand span, .app-brand { font-size: 14px; }
  .app-side { min-width: 0; }
  .app-nav { order: 3; flex-direction: row; width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .app-nav button, .app-nav a { width: auto; flex: none; height: 34px; font-size: 13px; }
  .app-nav svg { display: none; }
  .app-me { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; }
  .me-tx, .me-out span { display: none; }
  .me-btn, .me-out { padding: 4px; }
  .app-main { padding-top: 24px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stats .st-prog { grid-column: 1 / -1; }
  .allb li { grid-template-columns: 36px minmax(0, 1fr); }
  .allb-pay { grid-column: 2; }
  .pill { grid-column: 2; justify-self: start; }
}

/* profile view: form on the page background + estimate panel on the right */
.app-main > .view[data-view="profile"] { max-width: 1240px; }
.prof-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 3vw, 44px); align-items: start; margin-top: 18px; }
.prof-grid .dash-settings { margin-top: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.est-panel { position: sticky; top: 32px; }
.est-panel .gresult { margin-top: 0; background: var(--d-side); border-color: var(--line-2); }
.est-panel .gresult .v { font-size: clamp(28px, 2.6vw, 36px); }
.est-panel .gresult[data-pending] .v { font-size: 20px; color: var(--fg-2); }
.est-panel .gresult[data-tone="no"] .v { font-size: 20px; }
.est-panel .refresh { margin: 10px 0 0; font-size: 13px; color: var(--fg-2); line-height: 1.5; }
.est-panel .refresh b { display: block; color: var(--green); font-weight: 500; font-size: 15px; }
.est-rows { margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.est-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.est-rows dt { color: var(--fg-2); }
.est-rows dd { margin: 0; color: var(--fg); text-align: right; }
.est-panel .why { font-size: 13.5px; }
.est-see { width: 100%; margin-top: 16px; }
.est-note { margin: 12px 4px 0; font-size: 12px; line-height: 1.55; color: var(--fg-3); }
.est-note a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) {
  .prof-grid { grid-template-columns: 1fr; }
  .est-panel { position: static; order: -1; }
}

/* admin in the sidebar shell */
.adm-main #adm-app .view { max-width: 1280px; }
.adm-main .gslot-sub { margin: 12px 0 0; max-width: 80ch; font-size: 14.5px; color: var(--fg-2); }
.adm-main .adm-table-wrap, .adm-main .adm-pre { margin-top: 22px; }

/* ---------- Theme switch (Light / Dark / System) ---------- */
.theme-sw { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--d-fill); }
.theme-sw button { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--fg-2); cursor: pointer; transition: background-color .15s, color .15s; }
.theme-sw button:hover { color: var(--fg); background: var(--d-hover); }
.theme-sw button[aria-pressed="true"] { color: var(--fg); background: var(--d-hover-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.theme-sw button:focus-visible { outline-offset: 1px; }
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--fg-2); }
.app-me .theme-row { padding: 2px 10px 8px; }
.auth-theme { margin-top: 18px; }
@media (max-width: 900px) {
  .app-me { align-items: center; gap: 6px; }
  .app-me .theme-row { padding: 0; }
  .app-me .theme-row > span { display: none; }
  .theme-sw button { width: 28px; height: 26px; }
}

/* ---------- Light theme: shared site parts these pages reuse (data.css / guide.css) ---------- */
html[data-theme="light"] body ::selection { background: #d9d4f7; color: #111; }
html[data-theme="light"] .gopts input:checked + span { background: var(--d-ink); border-color: var(--d-ink); color: var(--d-on-ink); }
html[data-theme="light"] .gopts span { background: #fff; }
html[data-theme="light"] .gresult li.ok::before { background: var(--d-ok-bar); }
html[data-theme="light"] .gresult li.near::before { background: #c08a00; }
html[data-theme="light"] .gresult li.no::before { background: var(--d-err); }
html[data-theme="light"] .gresult[data-tone="ok"] { border-color: var(--d-ok-line); }
html[data-theme="light"] .gresult[data-tone="near"] { border-color: var(--d-warn-line); }
html[data-theme="light"] .gresult[data-tone="no"] { border-color: var(--d-err-line); }
html[data-theme="light"] .adm-table select { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E"); }
html[data-theme="light"] .adm-table input[type=text], html[data-theme="light"] .adm-table input[type=url], html[data-theme="light"] .adm-table textarea { background: #fff; }
html[data-theme="light"] .adm-table-wrap, html[data-theme="light"] .allb, html[data-theme="light"] .buyer { background: #fff; }
html[data-theme="light"] .buyer { border-color: var(--line); box-shadow: 0 1px 2px rgba(17,17,17,.04); }
/* the site nav over the signed-out split */
html[data-theme="light"] .nav[data-scrolled="true"] .nav-in { background: rgba(255,255,255,.82); }
html[data-theme="light"] .nav-links [aria-current="page"] { background: rgba(17,17,17,.06); }
html[data-theme="light"] .dd-menu { background: rgba(255,255,255,.98); box-shadow: 0 24px 60px rgba(17,17,17,.12); }
html[data-theme="light"] .dd-menu a:hover { background: rgba(17,17,17,.045); }
html[data-theme="light"] .dd-menu span.d { color: var(--fg-2); }
html[data-theme="light"] .btn-light { background: #111; color: #fff; box-shadow: none; }
html[data-theme="light"] .btn-light:hover { background: #2b2b2b; }
html[data-theme="light"] .btn-light .chip { background: #fff; color: #111; }
html[data-theme="light"] .mobile-menu.open { background: rgba(255,255,255,.98); box-shadow: 0 24px 60px rgba(17,17,17,.12); }
/* the binary art draws light, photo-tinted digits; inverting keeps each digit's hue but makes it ink on paper */
html[data-theme="light"] .auth-right canvas { filter: invert(1) hue-rotate(180deg) saturate(1.2); opacity: .5; }

/* The site's scroll drift (binary-image.js) slides text over binary art; the preview panel
   must stay put or its caption slides out of the panel. */
.auth-right > .mock, .auth-right > .auth-cap { translate: none !important; }

/* ---------- November 2026 compact layout: wider views, boxed inputs, one-line buyer rows
   with the apply button on the right and details in a dropdown. Overrides the rules above. ---------- */
.app-main > .view, .app-main > .view[data-view="profile"], .app-fine { max-width: 1560px; }

/* section and table titles */
.tbl-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 32px 0 10px; }
.tbl-h h2 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--fg); }
.tbl-h h2 span { margin-left: 6px; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--fg-3); }
.tbl-h p { margin: 0; font-size: 13px; color: var(--fg-2); }
.group-sub { margin: -4px 0 12px; font-size: 13px; }
.fsec { margin: 32px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; letter-spacing: -.005em; color: var(--fg); }
.fsec:first-child { margin-top: 0; }

/* inputs: one box per field, no row underlines */
.dfields { gap: 16px 20px; }
.dfield, .gnum { padding: 0; border-bottom: 0; gap: 6px; }
.gnums, .gnums.three { gap: 16px 20px; border-bottom: 0; }
.gq { margin-top: 0; border-top: 0; gap: 20px; }
.gq fieldset { padding: 0; border-bottom: 0; }
.dfield label, .gnum label, .gq legend { font-size: 13.5px; color: var(--fg-2); }
.gq legend { margin-bottom: 8px; }
.dfield input, .dfield select, .gnum input[type=number], .dash-in {
  height: 40px; padding: 0 12px; font-size: 15px; font-weight: 400; letter-spacing: 0;
  border: 1px solid var(--line-2); border-radius: 8px; background-color: var(--d-fill); }
.dfield select, select.dash-in { padding-right: 32px; background-position: right 12px center; }
.dfield input:focus-visible, .dfield select:focus-visible, .gnum input[type=number]:focus-visible, .dash-in:focus-visible { border-color: var(--fg-2); }
.gnum-hint { font-size: 12.5px; }
@media (max-width: 760px) { .gnums.three .gnum + .gnum { border-top: 0; } }

/* profile: the estimate panel takes the full right column */
@media (min-width: 1101px) { .prof-grid { grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); } }
.est-h { margin: 20px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.est-rows { margin-top: 8px; }

/* your buyers: one table of rows */
.buyers { gap: 0; margin-top: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.buyer { display: block; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--d-card); }
.buyer:first-child { border-top: 0; }
.brow, .bhead { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(150px, 230px) 170px 200px 32px;
  grid-template-areas: "logo tx pay st act more"; align-items: center; gap: 16px; }
.brow { padding: 14px 16px; }
.bhead { padding: 0 16px 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.brow > .logo { grid-area: logo; width: 36px; height: 36px; padding: 5px; border-radius: 9px; }
.btx { grid-area: tx; min-width: 0; }
.bpay { grid-area: pay; font-size: 13.5px; line-height: 1.4; color: var(--fg); }
.bpay small { display: block; margin-top: 2px; font-size: 12px; color: var(--fg-3); }
.bst { grid-area: st; }
.bst select { width: 100%; height: 34px; font-size: 13px; }
.bact { grid-area: act; display: flex; justify-content: flex-end; gap: 8px; }
.bact .dbtn, .dbtn.sm { min-height: 34px; padding: 0 14px; font-size: 13.5px; white-space: nowrap; }
.brow > .more-t { grid-area: more; }
.buyer-h { gap: 6px 8px; }
.buyer-h h3 { font-size: 15.5px; margin: 0 4px 0 0; }
.brow .badge { height: 20px; padding: 0 7px; font-size: 10.5px; }
.buyer .sum, .allb-tx span { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--fg-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.act-note { font-size: 12.5px; color: var(--fg-2); white-space: nowrap; }
.act-note.ok { color: var(--d-ok); }

/* dropdown toggle + body (both buyer tables) */
.more-t { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--fg-2); cursor: pointer; }
.more-t:hover { background: var(--d-hover); border-color: var(--line-2); color: var(--fg); }
.more-t svg { transition: transform .2s; }
.more-t[aria-expanded="true"] svg { transform: rotate(180deg); }
.bmore { padding: 2px 64px 18px 68px; }
.bmore dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 22px; margin: 0; font-size: 13.5px; }
.bmore dt { padding-top: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
/* keep lines to a readable length (about 70 characters) instead of the full card width */
.bmore dd { margin: 0; max-width: 70ch; line-height: 1.6; color: var(--fg); }
.bmore .mut { color: var(--fg-2); }
.bmore ol { margin: 0; padding-left: 18px; }
.bmore ul.notes { list-style: none; margin: 0; padding: 0; color: var(--fg-2); }
.bmore ul.notes li + li { margin-top: 8px; }
.bmore ul.notes b { color: var(--fg); font-weight: 500; }
.bmore ul.notes li.warn b { color: var(--d-warn); }
.more-note { max-width: 70ch; margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }
.more-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* all buyers: one titled table per group */
.allg .tbl-h { margin-top: 28px; }
.allb { margin: 0; border-radius: 12px; }
.allb-line, .allb-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(160px, 280px) 150px 32px;
  grid-template-areas: "logo tx pay act more"; align-items: center; gap: 16px; padding: 12px 16px; }
.allb-head { padding: 9px 16px; background: var(--d-side); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.allb-row { background: var(--d-card); border-top: 1px solid var(--line); }
.allb-head + .allb-row { border-top: 0; }
.allb-line > .ma-logo { grid-area: logo; }
.allb-tx { grid-area: tx; }
.allb-pay { grid-area: pay; }
.allb-act { grid-area: act; display: flex; justify-content: flex-end; }
.allb-line > .more-t { grid-area: more; }

@media (max-width: 1200px) {
  .brow, .bhead { grid-template-columns: 36px minmax(0, 1fr) 150px 190px 32px; grid-template-areas: "logo tx st act more"; }
  .bpay, .bhead span:nth-child(3) { display: none; }
}
@media (max-width: 900px) {
  .bhead, .allb-head { display: none; }
  .brow, .allb-line { grid-template-columns: 36px minmax(0, 1fr) 32px; gap: 10px 14px; }
  .brow { grid-template-areas: "logo tx more" ". pay pay" ". st st" ". act act"; }
  .allb-line { grid-template-areas: "logo tx more" ". pay pay" ". act act"; }
  .bpay { display: block; }
  .bact, .allb-act { justify-content: flex-start; }
  .bmore { padding: 0 16px 16px 66px; }
  .bmore dl { grid-template-columns: 1fr; gap: 2px; }
  .bmore dd + dt { margin-top: 8px; }
}
@media (max-width: 560px) { .bmore { padding-left: 16px; } }

html[data-theme="light"] .buyer { box-shadow: none; }
html[data-theme="light"] .buyers, html[data-theme="light"] .allb-row { background: #fff; }
html[data-theme="light"] .dfield input, html[data-theme="light"] .dfield select, html[data-theme="light"] .gnum input[type=number], html[data-theme="light"] .dash-in { background-color: #fff; }
.allb .bmore li { display: list-item; padding: 0; border: 0; background: none; }
.gnum { align-content: start; }

/* status chips: sans text, soft tint, a coloured dot; no outline */
.app .badge, .app .pill, .adm-main .badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px;
  border: 0; border-radius: 6px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0;
  color: var(--fg-2); background: var(--d-hover); white-space: nowrap; }
.app .badge::before, .app .pill::before, .adm-main .badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.app .badge.fit-good, .app .pill.yes, .adm-main .badge.fit-good { color: var(--d-ok); background: var(--d-ok-bg); }
.app .badge.fit-possible, .adm-main .badge.fit-possible { color: var(--d-warn); background: var(--d-warn-bg); }
.app .badge.spec, .adm-main .badge.spec { color: var(--d-vio); background: var(--d-vio-bg); }
.app .badge.spec::before, .adm-main .badge.spec::before { display: none; }
.app .badge.hid, .adm-main .badge.hid { color: var(--d-err); background: rgba(233,138,135,.08); }
.app .pill.soon { color: var(--fg-2); }
.app .pill.soon::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.app .pill.no { color: var(--d-amber); background: rgba(231,164,107,.08); }

/* profile: fields and option buttons on one even grid */
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; align-items: start; }
.fgrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fgrid > .full { grid-column: 1 / -1; }
.fgrid > .span2 { grid-column: span 2; }
.gopts.even { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px 16px; }
.gopts.even.sys { gap: 8px; }
.gopts.even label { display: block; min-width: 0; }
.gopts.even span { display: flex; width: 100%; height: auto; min-height: 40px; padding: 6px 10px; justify-content: center; text-align: center; white-space: normal; line-height: 1.25; }
.gopts.checks span::before { flex: none; }
.gopts.even.checks span { justify-content: flex-start; padding: 6px 12px; text-align: left; }
.fgrid > .newrow { grid-column-start: 1; }
.dfields { column-gap: 16px; }
/* columns follow the form's own width (it shares the row with the estimate panel) */
.dash-settings { container-type: inline-size; }
@container (max-width: 900px) { .gopts.even.sys { --n: 4 !important; } }
@container (max-width: 640px) {
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gopts.even.sys, .gopts.even.c6 { --n: 3 !important; }
}
@container (max-width: 440px) {
  .fgrid, .fgrid.two, .dfields { grid-template-columns: minmax(0, 1fr); }
  .gopts.even.sys { --n: 2 !important; }
}
@media (max-width: 420px) { .gopts.even[style*="--n:3"] span { font-size: 12px; padding: 6px; } }

/* buyer rows: name with its tags underneath; description lives in the dropdown */
.buyer-h { display: grid; gap: 6px; justify-items: start; }
.buyer-h h3 { margin: 0; }
.buyer-h .badges { display: flex; flex-wrap: wrap; gap: 6px; }
.app .badge, .app .pill, .adm-main .badge { border: 1px solid var(--line-2); border-radius: 999px; height: 22px; padding: 0 10px 0 8px; }
.app .badge.fit-good, .app .pill.yes, .adm-main .badge.fit-good { border-color: var(--d-ok-line); }
.app .badge.fit-possible, .adm-main .badge.fit-possible { border-color: var(--d-warn-line); }
.app .badge.spec, .adm-main .badge.spec { border-color: var(--d-vio-line); padding: 0 10px; }
.app .badge.hid, .adm-main .badge.hid { border-color: var(--d-err-line); }
.app .pill.no { border-color: var(--d-amber-line); }
.allb-tx em { margin-top: 2px; }
/* smaller progress dropdown */
.brow, .bhead { grid-template-columns: 36px minmax(0, 1fr) minmax(150px, 240px) 136px 200px 32px; }
.bst select { height: 30px; padding: 0 26px 0 10px; font-size: 12.5px; border-radius: 7px; background-position: right 9px center; }
@media (max-width: 1200px) { .brow, .bhead { grid-template-columns: 36px minmax(0, 1fr) 136px 190px 32px; } }
@media (max-width: 900px) { .brow, .allb-line { grid-template-columns: 36px minmax(0, 1fr) 32px; } .bst select { width: auto; min-width: 150px; } }

/* Fit column: the fit tags get their own cell between the buyer and the pay */
.brow, .bhead { grid-template-columns: 36px minmax(120px, 1fr) minmax(190px, 1.1fr) minmax(150px, 230px) 136px 200px 32px;
  grid-template-areas: "logo tx fit pay st act more"; }
.bfit { grid-area: fit; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
@media (max-width: 1200px) {
  .brow, .bhead { grid-template-columns: 36px minmax(110px, 1fr) minmax(150px, 1fr) 136px 190px 32px; grid-template-areas: "logo tx fit st act more"; }
  .bpay, .bhead span:nth-child(4) { display: none; }
  .bhead span:nth-child(3) { display: block; }
}
@media (max-width: 900px) {
  .brow { grid-template-columns: 36px minmax(0, 1fr) 32px; grid-template-areas: "logo tx more" ". fit fit" ". pay pay" ". st st" ". act act"; }
}

/* admin: companies table */
.adm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.adm-bar #adm-co-q { flex: 0 1 340px; height: 36px; font-size: 13.5px; }
.adm-bar #adm-co-st, .adm-bar #adm-co-chk { width: auto; min-width: 150px; height: 36px; font-size: 13.5px; }
.adm-bar-n { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); }
.adm-main .adm-bar + .adm-table-wrap { margin-top: 12px; }
.adm-co th { padding: 11px 14px; font-size: 10.5px; color: var(--fg-3); background: var(--d-side); }
.adm-co td { padding: 14px; vertical-align: middle; white-space: nowrap; }
.adm-co td b { font-weight: 500; }
.adm-co td small { margin-top: 2px; font-size: 12px; }
.adm-co .num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-co .tgl { width: 44px; padding: 8px; }
.adm-co tr.co-row:hover td { background: var(--d-fill); }
.adm-co tr.co-row:has(+ .co-more:not([hidden])) td { border-bottom-color: transparent; }
.adm-co .lnk { color: var(--fg-2); text-decoration: none; }
.adm-co .lnk:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.adm-none { color: var(--fg-2); padding: 18px 14px; }
.co-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.co-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: 12px; font-weight: 500; color: var(--fg-2); background: var(--d-fill); white-space: nowrap; }
.co-chip.ok { color: var(--d-ok); border-color: var(--d-ok-line); background: var(--d-ok-bg); }
.co-chip.warn { color: var(--d-warn); border-color: var(--d-warn-line); background: var(--d-warn-bg); }
.co-chip.vio { color: var(--d-vio); border-color: var(--d-vio-line); background: var(--d-vio-bg); }
.co-chip.mute { color: var(--fg-3); }
.co-fit { margin-right: 4px; font-size: 13px; color: var(--fg); }
.co-chips small { margin: 0 !important; }
.adm-main #adm-app .view { max-width: 1560px; }
.adm-co td:nth-child(8) { white-space: normal; min-width: 220px; }
.adm-co tr.co-more td { padding: 4px 14px 20px 14px; white-space: normal; background: var(--d-fill); }
.adm-co tr.co-more dl { max-width: 1000px; }
.adm-co tr.co-more .co-chips { margin-top: 0; }
.co-prog { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.co-prog li { display: flex; align-items: center; gap: 10px; }
.co-prog b { font-weight: 500; min-width: 120px; }

/* row actions: copy-code / I agree beside the main button, with a one-line hint under them */
.bact, .allb-act { flex-direction: column; align-items: flex-end; gap: 4px; }
.act-btns { display: flex; gap: 6px; justify-content: flex-end; }
.act-hint { font-size: 11.5px; color: var(--fg-3); text-align: right; white-space: nowrap; }
.act-hint.flash { color: var(--d-warn); animation: hint-shake .35s; }
@keyframes hint-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .act-hint.flash { animation: none; } }
.dbtn.code { gap: 8px; padding: 0 12px; }
.dbtn.code .mono { font-size: 12.5px; letter-spacing: .04em; }
.dbtn.code.done { color: var(--d-ok); border-color: var(--d-ok-line); }
.dbtn.agree { gap: 8px; padding: 0 12px; }
.dbtn.agree i { width: 14px; height: 14px; border: 1.5px solid var(--fg-3); border-radius: 4px; display: grid; place-items: center; }
.dbtn.agree[aria-pressed="true"] { color: var(--d-ok); border-color: var(--d-ok-line); }
.dbtn.agree[aria-pressed="true"] i { border-color: currentColor; background: currentColor; box-shadow: inset 0 0 0 2px var(--d-card); }
a.dbtn[aria-disabled="true"], .dbtn.primary[disabled] { opacity: .38; cursor: not-allowed; }
/* whole row opens the details */
.brow, .allb-line, .adm-co tr.co-row { cursor: pointer; }
.brow:hover, .allb-line:hover { background: var(--d-fill); }
/* progress: small round select */
.bst select { height: 28px; padding: 0 26px 0 12px; font-size: 12px; border-radius: 999px; background-position: right 10px center; }
.brow, .bhead { grid-template-columns: 36px minmax(120px, 1fr) minmax(190px, 1.1fr) minmax(150px, 230px) 128px 250px 32px; }
.allb-line, .allb-head { grid-template-columns: 36px minmax(0, 1fr) minmax(160px, 280px) 250px 32px; }
@media (max-width: 1200px) { .brow, .bhead { grid-template-columns: 36px minmax(110px, 1fr) minmax(150px, 1fr) 128px 240px 32px; } }
@media (max-width: 900px) {
  .brow, .allb-line { grid-template-columns: 36px minmax(0, 1fr) 32px; }
  .bact, .allb-act { align-items: flex-start; }
  .act-btns { justify-content: flex-start; }
  .act-hint { text-align: left; }
}

/* ---------- each buyer is its own card ---------- */
.buyers { display: grid; gap: 10px; border: 0; border-radius: 0; overflow: visible; background: none; }
.buyer, .buyer:first-child { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--d-card);
  transition: border-color .2s, box-shadow .2s; }
.buyer:hover, .buyer.is-open { border-color: var(--line-2); }
.buyer.is-open { box-shadow: var(--d-shadow-2); }
.brow:hover { background: none; }
.allb { display: grid; gap: 10px; border: 0; border-radius: 0; overflow: visible; background: none; }
.allb-head { padding: 0 16px 2px; background: none; border: 0; }
.allb-row, .allb-head + .allb-row { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--d-card); transition: border-color .2s, box-shadow .2s; }
.allb-row:hover, .allb-row.is-open { border-color: var(--line-2); }
.allb-row.is-open { box-shadow: var(--d-shadow-2); }
.allb-line:hover { background: none; }
html[data-theme="light"] .buyers, html[data-theme="light"] .allb { background: none; }
html[data-theme="light"] .buyer, html[data-theme="light"] .allb-row { background: #fff; }
html[data-theme="light"] .buyer.is-open, html[data-theme="light"] .allb-row.is-open { box-shadow: 0 8px 24px rgba(17,17,17,.06); }

/* ---------- motion: views fade in, lists rise in once, skeleton while loading ---------- */
@keyframes tc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tc-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.app-main > .view:not([hidden]), .adm-main #adm-app .view:not([hidden]) { animation: tc-fade .28s ease both; }
.rise .buyer, .rise .notfit, .rise .allb-row, .rise tr.co-row { animation: tc-rise .42s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.stats .st { animation: tc-rise .42s cubic-bezier(.2,.7,.2,1) both; }
.stats .st:nth-child(2) { animation-delay: 40ms; } .stats .st:nth-child(3) { animation-delay: 80ms; } .stats .st:nth-child(4) { animation-delay: 120ms; }
.skel { display: grid; gap: 10px; margin-top: 32px; }
.skel i { display: block; height: 64px; border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--d-fill) 0%, var(--d-hover-2) 50%, var(--d-fill) 100%) 0 0 / 200% 100%; animation: tc-shimmer 1.4s linear infinite; }
.skel i:nth-child(2) { opacity: .8; } .skel i:nth-child(3) { opacity: .6; } .skel i:nth-child(4) { opacity: .4; }
.prog-bar i { transition: width .6s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .app-main > .view:not([hidden]), .adm-main #adm-app .view:not([hidden]), .rise .buyer, .rise .notfit, .rise .allb-row, .rise tr.co-row, .stats .st, .skel i { animation: none; }
}

/* ---------- stats: four separate cards ---------- */
.stats { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 12px; background: none; border: 0; border-radius: 0; overflow: visible; }
.stats > .st { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--d-card); }
.stats .st-k { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--fg-2); }
.stats .st-k em { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); }
.stats .st b { font-size: 30px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; color: var(--fg); }
.stats .st small { font-size: 12px; color: var(--fg-3); }
.stats .st-prog b { font-size: 20px; margin-top: 4px; }
.stats .st-prog .prog-bar { height: 6px; margin-top: auto; }
html[data-theme="light"] .stats > .st { background: #fff; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stats .st-prog { grid-column: 1 / -1; } .stats .st small { display: none; } }

/* ---------- theme switch: only the current choice shows until clicked ---------- */
.app .theme-sw { gap: 0; }
.app .theme-sw button { transition: width .28s cubic-bezier(.2,.7,.2,1), opacity .2s, margin .28s, background-color .2s, color .2s; }
.app .theme-sw:not(.open) button:not([aria-pressed="true"]) { width: 0; opacity: 0; margin: 0; pointer-events: none; overflow: hidden; }
.app .theme-sw.open button + button { margin-left: 2px; }
.app .theme-sw:not(.open) button[aria-pressed="true"] { box-shadow: none; background: none; }

/* ---------- profile: plain background (no guide-card tint behind the form) ---------- */
.prof-grid .dash-settings, html[data-theme="light"] .prof-grid .dash-settings { background: none; }
html[data-theme] .est-panel .gresult .refresh b { color: var(--green); }

/* ---------- Your buyers header: one slim line of stats, no boxes ---------- */
.app-main > .view[data-view="buyers"] .view-h h1 { font-size: clamp(26px, 2.4vw, 32px); }
.stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin-top: 18px; padding: 0; }
.stats > .st { flex-direction: row; align-items: baseline; gap: 8px; padding: 0 22px; border: 0; border-left: 1px solid var(--line-2); border-radius: 0; background: none; }
.stats > .st:first-child { padding-left: 0; border-left: 0; }
html[data-theme="light"] .stats > .st { background: none; }
.stats .st b { order: -1; font-size: 20px; font-weight: 400; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats .st .st-k { font-size: 13px; color: var(--fg-2); }
.stats .st small { display: none; }
.stats .st-prog { flex: 1 1 260px; max-width: 420px; align-items: center; gap: 12px; }
.stats .st-prog .st-k { order: 3; font-family: var(--mono); font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.stats .st-prog .st-k em { margin: 0; }
.stats .st-prog b { order: 2; font-size: 13px; font-weight: 400; color: var(--fg-2); white-space: nowrap; }
.stats .st-prog .prog-bar { order: 1; flex: 1; height: 3px; margin: 0; }
.view[data-view="buyers"] .view-note { margin-top: 12px; font-size: 13px; color: var(--fg-3); }
@media (max-width: 900px) {
  .stats { display: flex; }
  .stats .st-prog { flex-basis: 100%; max-width: none; padding-left: 0; border-left: 0; }
}

/* ---------- phones: app-style buyer cards ---------- */
@media (max-width: 640px) {
  .app-main { padding: 18px 14px 40px; }
  .tbl-h { margin: 24px 0 10px; }
  .tbl-h h2 { font-size: 16px; }
  .tbl-h p { font-size: 12.5px; }
  .buyers, .allb { gap: 8px; }
  .buyer, .allb-row, .allb-head + .allb-row { border-radius: 14px; }
  .brow { grid-template-columns: 40px minmax(0, 1fr) auto 28px; gap: 4px 12px; padding: 14px;
    grid-template-areas: "logo tx tx more" "logo fit fit more" "pay pay st st" "act act act act"; }
  .brow > .logo { width: 40px; height: 40px; border-radius: 10px; padding: 6px; align-self: start; }
  .btx { align-self: end; }
  .buyer-h h3 { font-size: 15.5px; line-height: 1.25; }
  .bfit { align-self: start; gap: 4px; }
  .brow .badge { height: 20px; padding: 0 8px 0 7px; font-size: 11px; }
  .brow .badge.spec { padding: 0 8px; }
  .brow > .more-t { width: 28px; height: 28px; align-self: start; margin-top: 6px; }
  .bpay { align-self: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
  .bpay small { font-size: 11.5px; }
  .bst { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .bst select { width: auto; min-width: 0; height: 30px; font-size: 12.5px; }
  .bact, .allb-act { align-items: stretch; margin-top: 10px; }
  .act-btns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; width: 100%; }
  .act-btns .dbtn, .bact > .dbtn, .allb-act > .dbtn { width: 100%; min-height: 42px; font-size: 14px; border-radius: 10px; }
  .act-hint { margin-top: 2px; text-align: center; font-size: 11.5px; }
  .act-note { display: block; text-align: center; padding: 8px 0 2px; }
  .bmore { padding: 0 14px 16px; }
  .bmore dl { grid-template-columns: 1fr; gap: 2px; font-size: 13px; }
  .bmore dd + dt { margin-top: 10px; }
  .more-intro { flex-direction: column; align-items: stretch; }
  /* all buyers */
  .allb-line { grid-template-columns: 40px minmax(0, 1fr) 28px; gap: 4px 12px; padding: 14px;
    grid-template-areas: "logo tx more" "pay pay pay" "act act act"; }
  .allb-line > .ma-logo { width: 40px; height: 40px; border-radius: 10px; }
  .allb-line > .ma-logo img { width: 26px; height: 26px; }
  .allb-tx { align-self: center; }
  .allb-tx b { font-size: 15.5px; }
  .allb-pay { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
  .allb-act .pill { align-self: flex-start; }
}
@media (max-width: 900px) { .bpay { display: block; } }
@media (max-width: 640px) { .bst { margin-left: -12px; padding-left: 12px; } }

/* ---------- Your buyers header: title, one quiet line, compact progress on the right ---------- */
.view-h.bh { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 32px; }
.view-h.bh h1 { margin: 0; }
.bh-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--fg-3); }
.bh-stats { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--fg-3); padding-bottom: 3px; }
.bh-stats[hidden] { display: none; }
.bh-stats b { font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; margin-right: 2px; }
.bh-prog { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-2); white-space: nowrap; }
.bh-prog .prog-bar { width: 120px; height: 4px; margin: 0; border-radius: 4px; background: var(--line-2); overflow: hidden; display: block; }
.bh-prog .prog-bar i { display: block; height: 100%; border-radius: 4px; background: var(--d-ok-bar); }
#dash-buyers > #dash-list > .tbl-h:first-child, #dash-list > .tbl-h:first-child { margin-top: 28px; }
@media (max-width: 640px) {
  .view-h.bh { align-items: flex-start; }
  .bh-stats { width: 100%; flex-wrap: wrap; gap: 10px 14px; }
  .bh-prog { margin-left: auto; }
  .bh-prog .prog-bar { width: 72px; }
}
/* a little more air between buyer cards */
.buyers, .allb { gap: 14px; }
@media (max-width: 640px) { .buyers, .allb { gap: 12px; } }
/* theme.css (loaded after this file) resets --bg on <html>; set the dashboard's light background on <body> so it wins */
html[data-theme="light"] body { --bg: #fafafa; --bg-3: #f2f2f2; background: #fafafa; }

/* equal row heights: every buyer row is the same height on desktop, whatever sits in it
   (a hint under the buttons, a not-a-fit reason); all row buttons share one size */
@media (min-width: 641px) {
  .brow, .allb-line { min-height: 84px; padding-top: 12px; padding-bottom: 12px; box-sizing: border-box; align-items: center; }
  .bact .dbtn, .allb-act .dbtn, .dbtn.sm { min-height: 36px; height: 36px; padding: 0 14px; font-size: 13.5px; }
  .act-hint { line-height: 1.2; }
  .allb-tx em { line-height: 1.3; }
}

/* fit meter: five short bars + label */
.fitm { display: inline-flex; align-items: center; gap: 8px; height: 22px; font-size: 12.5px; font-weight: 500; color: var(--fg-2); white-space: nowrap; cursor: help; }
.fitm-bars { display: inline-flex; gap: 3px; }
.fitm-bars i { width: 6px; height: 14px; border-radius: 2px; background: var(--line-2); }
.fitm.s5 .on, .fitm.s4 .on { background: var(--d-ok-bar); }
.fitm.s3 .on, .fitm.s2 .on { background: #e7c46b; }
.fitm.s1 .on { background: var(--d-amber); }
.fitm.s5 .fitm-l, .fitm.s4 .fitm-l { color: var(--d-ok); }
.fitm.s3 .fitm-l, .fitm.s2 .fitm-l { color: var(--d-warn); }
html[data-theme="light"] .fitm.s3 .on, html[data-theme="light"] .fitm.s2 .on { background: #d4a72c; }
.bfit { align-items: center; gap: 6px 12px; }
/* consent box flashes when "Review & agree" opens it */
.consent.flash { animation: consent-flash 1.2s ease; border-radius: 8px; }
@keyframes consent-flash { 0%, 60% { background: var(--d-warn-bg); box-shadow: 0 0 0 6px var(--d-warn-bg); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .consent.flash { animation: none; } }
.dbtn.agree[aria-pressed="true"]::before { content: ""; width: 10px; height: 6px; margin: -3px 2px 0 0; border: solid currentColor; border-width: 0 0 1.8px 1.8px; transform: rotate(-45deg); }
@media (min-width: 1441px) {
  .brow, .bhead { grid-template-columns: 36px minmax(110px, 1fr) minmax(170px, 1fr) minmax(150px, 220px) 128px 300px 32px; }
}
@media (min-width: 1201px) and (max-width: 1440px) {
  .brow, .bhead { grid-template-columns: 36px minmax(100px, 1fr) 70px minmax(130px, 200px) 118px 280px 32px; gap: 14px; }
  .fitm-l, .bfit .badge.spec { display: none; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  /* mid widths: the fit meter keeps its bars (label in the tooltip) so the buttons fit */
  .brow, .bhead { grid-template-columns: 36px minmax(100px, 1fr) 70px 118px 270px 32px; gap: 14px; }
  .fitm-l { display: none; }
  .bfit .badge.spec { display: none; }
}

/* narrow laptops: each row wraps onto two lines (name, fit, progress / pay, actions) */
@media (min-width: 901px) and (max-width: 1080px) {
  .bhead { display: none; }
  .brow { grid-template-columns: 36px minmax(0, 1fr) 70px 128px 32px; row-gap: 10px;
    grid-template-areas: "logo tx fit st more" ". pay act act act"; }
  .bpay { display: block; align-self: center; }
  .bact { align-items: flex-end; }
}
@media (min-width: 901px) and (max-width: 1080px) { .brow { min-height: 124px; } }

/* sign-in screen: the nav's logo sits on the sign-up form's left edge (the form is a 380px column
   centred in the left 2/5 panel); theme.css handles the default nav alignment */
@media (min-width: 901px) {
  body:has(#dash-out:not([hidden])) .nav:not([data-scrolled="true"]) { padding-left: max(clamp(24px, 4vw, 64px), calc(20vw - 190px)); padding-right: clamp(24px, 5vw, 80px); }
  body:has(#dash-out:not([hidden])) .nav:not([data-scrolled="true"]) .nav-in { max-width: none; }
}

/* ---------- Framed layout: the left column sits on the page, and the right side is an inset,
   rounded panel (sign-in screen, buyer dashboard and admin). Matches the estimator sheet
   (.yr-embed in your-range.css), which has its own rules. ---------- */
html { --d-frame: #0c0c0d; }
html[data-theme="light"] { --d-frame: #f3f3f1; }
.auth-split:not(.yr-split), .app { background: var(--d-frame); }
/* sign-in screen, light theme: plain white page around the panel */
html[data-theme="light"] .auth-split:not(.yr-split) { background: #fff; }
body.in-app { background: var(--d-frame); }
.auth-split:not(.yr-split) .auth-left { background: transparent; border-right: 0; }
.auth-split:not(.yr-split) .auth-right { margin: 16px 16px 16px 0; border: 1px solid var(--line); border-radius: 20px; }
.app-side { background: transparent; border-right: 0; }
/* light mode: the caption sits over dark digits, so give it full-strength ink */
html[data-theme="light"] .auth-split:not(.yr-split) .auth-cap { color: var(--fg); font-weight: 500; }
html[data-theme="light"] .auth-split:not(.yr-split) .auth-right canvas { opacity: .28; }
.app-main { margin: 12px 12px 12px 0; min-height: calc(100svh - 24px); background: var(--bg); border: 1px solid var(--line); border-radius: 18px; }
html[data-theme="light"] .app-main { background: #ffffff; }
@media (max-width: 900px) {
  .auth-split:not(.yr-split) .auth-left { border-bottom: 0; }
  .auth-split:not(.yr-split) .auth-right { margin: 0 10px 10px; border-radius: 18px; }
  .app-side { background: var(--d-frame); border-bottom: 0; }
  .app-main { margin: 0 10px 10px; min-height: 0; border-radius: 16px; }
}
/* desktop: the panel is a fixed height and its contents scroll inside it */
@media (min-width: 901px) {
  .app { height: 100svh; overflow: hidden; }
  .app-main { height: calc(100svh - 24px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
}

/* referral-code popup (code buyers): shown before the buyer's form opens */
.refdlg { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--d-card); color: var(--fg); box-shadow: var(--d-shadow); overflow: auto; }
.refdlg[open] { animation: refdlg-in .22s cubic-bezier(.2,.8,.2,1); }
.refdlg::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.refdlg[open]::backdrop { animation: refdlg-fade .22s ease-out; }
html[data-theme="light"] .refdlg::backdrop { background: rgba(20,20,24,.32); }
@keyframes refdlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes refdlg-fade { from { opacity: 0; } }
.refdlg-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--fg-3); cursor: pointer; }
.refdlg-x:hover { background: var(--d-hover); color: var(--fg); }
.refdlg-k { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.refdlg h2 { margin: 0 32px 10px 0; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.refdlg-p, .refdlg-why { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.refdlg-why { margin-top: 16px; font-size: 13px; }
.refdlg-why b { color: var(--fg); font-weight: 500; }
.refdlg-code { width: 100%; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 16px 0 18px; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--d-fill); color: var(--fg); font: inherit; cursor: pointer; transition: border-color .2s, background-color .2s; }
.refdlg-code:hover { border-color: var(--d-hover-line); background: var(--d-hover); }
.refdlg-code .mono { font-family: var(--mono); font-size: 18px; letter-spacing: .08em; user-select: all; }
.refdlg-cl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-2); }
.refdlg-code.done { border-style: solid; border-color: var(--d-ok-line); background: var(--d-ok-bg); }
.refdlg-code.done .refdlg-cl { color: var(--d-ok); }
.refdlg-code.flash { border-color: var(--d-warn-line); animation: hint-shake .35s; }
.refdlg-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.refdlg-acts .dbtn.primary { min-width: 0; }
@media (max-width: 480px) {
  .refdlg { padding: 22px 18px 18px; }
  .refdlg-acts { flex-direction: column-reverse; }
  .refdlg-acts .dbtn { width: 100%; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .refdlg[open], .refdlg[open]::backdrop, .refdlg-code.flash { animation: none; } }
.bmore dd.why-no { color: var(--d-amber); }
/* buyers-tab disclosure: a narrow footnote, not a full-width line (full width on phones) */
.app-fine { max-width: 50%; }
@media (max-width: 640px) { .app-fine { max-width: none; } }

/* systems you use: a ticked system gets a bright outline and a ticked box, not a filled background */
html .gopts.checks input:checked + span,
html[data-theme="light"] .gopts.checks input:checked + span { background: var(--d-fill); border-color: var(--fg); color: var(--fg); }
.gopts.checks span::before { width: 14px; height: 14px; border-radius: 4px; border-color: var(--fg-3); background: transparent center / 10px no-repeat; transition: background-color .15s, border-color .15s; }
html .gopts.checks input:checked + span::before { background-color: var(--fg); border-color: var(--fg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-theme="light"] .gopts.checks input:checked + span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.gopts.checks input:focus-visible + span { outline: 2px solid var(--fg-2); outline-offset: 2px; }
/* a two-column field must not add a column to the one-column phone grid */
@container (max-width: 440px) { .fgrid > .span2 { grid-column: 1 / -1; } }
@container (max-width: 640px) { .fgrid > .span2 { grid-column: 1 / -1; } }

/* field status marks, inside each field on the left (matches the estimator on /data/your-range/):
   green check once answered, orange ring on a required field that's still empty, nothing on an empty optional one */
.fmw { position: relative; display: block; }
.fmw > input, .fmw > select { transition: padding-left .2s; }
.fmw.marked > input, .fmw.marked > select { padding-left: 42px !important; }
.fmk { position: absolute; z-index: 2; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; box-sizing: border-box; pointer-events: none;
  border: 1.5px solid transparent; transition: border-color .2s, opacity .2s, transform .2s cubic-bezier(.2,.8,.2,1); opacity: 0; transform: scale(.7); }
.fmk::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: transparent; }
.fmk.need { opacity: 1; transform: none; border-color: #e8a53d; }
.fmk.need::after { background: #e8a53d; }
.fmk.ok { opacity: 1; transform: none; border-color: var(--d-ok-2); }
.fmk.ok::after { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 0; background: var(--d-ok-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.2 4.2l1.8 1.8L6.8 2' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.2 4.2l1.8 1.8L6.8 2' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) { .fmk, .fmw > input, .fmw > select { transition: none; } }

/* systems you use: a group per tile, with a row of example logos under its name */
.gopts.even.checks .sysg span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 7px; min-height: 64px; padding: 11px 14px; }
.gopts.checks .sysg span::before { margin: 0; }
.sysg b { font-weight: 400; font-size: 14px; color: inherit; min-width: 0; }
.sys-ex { grid-column: 2; display: flex; align-items: center; gap: 9px; min-width: 0; font-style: normal; color: var(--fg-3); transition: color .2s; }
.sys-ex.txt { display: block; font-size: 11.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl { flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.sysg input:checked + span .sys-ex { color: var(--fg-2); }
.sysg:hover .sys-ex { color: var(--fg-2); }
/* every tile in a row the same height; text examples may take two lines */
.gopts.even.sys .sysg { display: flex; }
.gopts.even.checks .sysg span { flex: 1; align-content: start; }
.sys-ex.txt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gopts.checks .sysg span::before { align-self: start; margin-top: 2px; }
.gopts.checks .sysg b { align-self: start; }
/* logos in brand colour; a "+" after them says the group isn't limited to these */
.tl { background: var(--c, var(--fg)); }
.sys-more { font-style: normal; font-size: 14px; line-height: 1; color: var(--fg-3); }

/* bigger example logos in the systems tiles */
.tl, .tli { width: 20px; height: 20px; }
.tli { flex: none; display: block; object-fit: contain; border-radius: 5px; }
.sys-ex { gap: 10px; }
.sys-more { font-size: 16px; }
/* hovering a tile's logos names them in a small tooltip just below */
.sys-ex[data-tip] { position: relative; }
.sys-ex[data-tip]::after { content: attr(data-tip); position: absolute; left: -6px; top: calc(100% + 8px); z-index: 5; width: max-content; max-width: 240px;
  padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--d-sticky); box-shadow: var(--d-shadow-2);
  font-size: 12px; line-height: 1.35; color: var(--fg-2); white-space: normal; pointer-events: none;
  opacity: 0; transform: translateY(-3px); transition: opacity .15s, transform .15s; }
.sys-ex[data-tip]:hover::after { opacity: 1; transform: none; transition-delay: .12s; }
@media (hover: none), (max-width: 640px) { .sys-ex[data-tip]::after { display: none; } } /* hidden tips would still widen a phone-width page */
@media (prefers-reduced-motion: reduce) { .sys-ex[data-tip]::after { transition: opacity .15s; transform: none; } }
/* All buyers uses the Your buyers rows; not-a-fit rows and the no-profile fit note */
.fit-na { font-size: 12.5px; color: var(--fg-3); }
.bfit .pill { justify-self: start; }
.buyer.nofit .brow > .logo, .buyer.nofit .btx, .buyer.nofit .bpay { opacity: .7; }

/* All buyers before a profile is saved: matched from the estimator's answers, with a nudge to finish the profile */
.all-nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--d-fill, rgba(255,255,255,.03)); }
.all-nudge[hidden] { display: none; }
.all-nudge p { margin: 0; font-size: 14px; color: var(--fg-2); }

/* "Update your profile" note on Your buyers, after a profile was made from the estimate */
.app-nudge { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 12px 12px 12px 18px; border: 1px solid var(--line-2); border-radius: 12px; background: color-mix(in srgb, var(--fg) 3%, transparent); }
.app-nudge[hidden] { display: none; }
.app-nudge p { flex: 1; margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.app-nudge p b { font-weight: 500; color: var(--fg); }
.app-nudge .dbtn { flex: none; }
.nudge-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--fg-3); cursor: pointer; }
.nudge-x:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
@media (max-width: 640px) { .app-nudge { flex-wrap: wrap; } .app-nudge p { flex-basis: calc(100% - 46px); } .app-nudge .dbtn { order: 3; } }

/* the sign-in page's picture panel is the same scene as the /data/estimate/ card and its popup: night sky, gold
   and blue digits (hero-low.webp), the homepage grain on the sky. Light theme keeps it (binary-image.js data-keep-dark),
   a little brighter; the form and the preview window stay light. Keep in step with your-range.css. */
.auth-split:not(.yr-split) .auth-right { background: linear-gradient(180deg, #353d48 0%, #2a3039 34%, #1b1d21 62%, #121212 100%); border-color: transparent; }
.auth-split:not(.yr-split) .auth-right > canvas.auth-scene { inset: auto 0 0; top: 8%; height: 92%; opacity: 1; z-index: 0; }
.auth-split:not(.yr-split) .auth-right > .mock, .auth-split:not(.yr-split) .auth-right > .auth-cap { position: relative; z-index: 1; }
.auth-split:not(.yr-split) .auth-right::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; mix-blend-mode: overlay;
  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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 85%); }
html[data-theme="light"] .auth-split:not(.yr-split) .auth-right { background: linear-gradient(180deg, #46505d 0%, #363e49 34%, #262a30 62%, #1c1d20 100%); }
html[data-theme="light"] .auth-split:not(.yr-split) .auth-right > canvas.auth-scene { filter: brightness(1.35); opacity: 1; }
html[data-theme="light"] .auth-split:not(.yr-split) .auth-cap { color: #ededed; }

/* sign-in page on wide screens: the picture panel starts below the menu (the same 80px band as /data/estimate/),
   so the menu sits on the page, not on the panel */
@media (min-width: 901px) {
  .auth-split:not(.yr-split) .auth-right { margin: 80px 16px 16px 0; }
}

/* Estimated payout, first item in the Your buyers stats row (opens the profile), with an "i" tip */
.bh-estw { position: relative; display: inline-flex; align-items: center; gap: 8px; padding-right: 18px; border-right: 1px solid var(--line-2); }
.bh-estw[hidden] { display: none; }
.bh-est { display: inline-flex; align-items: baseline; gap: 5px; padding: 0; margin: 0; border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--fg); cursor: pointer; white-space: nowrap; }
.bh-est b { font-size: 17px; color: var(--d-ok); }
.bh-est:hover b { text-decoration: underline; text-decoration-color: var(--d-ok-line); text-underline-offset: 4px; }
.bh-i { display: inline-grid; place-items: center; width: 17px; height: 17px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--fg-2); font: italic 600 10.5px/1 var(--serif, Georgia, serif); cursor: help; }
.bh-i:hover, .bh-i:focus-visible { color: var(--fg); border-color: var(--fg-3); }
.bh-i:focus-visible, select[data-status]:focus-visible { outline: 2px solid var(--fg-3); outline-offset: 2px; }
.bh-tip { position: absolute; z-index: 20; right: 0; top: calc(100% + 10px); width: min(320px, 80vw); padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2, #1c1c1e); box-shadow: 0 16px 40px rgba(0,0,0,.35); font-size: 13px; line-height: 1.5; color: var(--fg-2); white-space: normal; text-align: left; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.bh-i:hover + .bh-tip, .bh-i:focus-visible + .bh-tip { opacity: 1; visibility: visible; transform: none; }

/* sign-in box: "Forgot password?" and "Email me a sign-in link" under the main button */
.auth-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 10px 0 0; }
.auth-alt .lnk { font-size: 13.5px; color: var(--fg-2); text-underline-offset: 3px; }
.auth-alt .lnk:hover { color: var(--fg); }
.auth-alt .lnk[hidden] { display: none; }
.auth-alt .lnk:disabled { color: var(--fg-3); text-decoration: none; cursor: default; }
/* after a password-reset link: only the "Choose a new password" form shows */
#dash-auth.resetting > :not(.auth-reset):not(.gslot-k) { display: none; }
.auth-reset[hidden] { display: none; }
.auth-reset .auth-h { margin-top: 0; }
.auth-reset .auth-sub { margin-bottom: 22px; }
/* "We couldn't load…" with a Try again button */
.load-err[hidden] { display: none; }
.app-main > .load-err { margin: 0 0 24px; }
/* Esc closes the estimate's "i" tip until the pointer leaves (after the :hover rule so it wins) */
.bh-estw.tip-off .bh-tip { opacity: 0; visibility: hidden; }
/* phones: the stats row wraps and the payout takes its own line, so it needs no divider */
@media (max-width: 640px) { .bh-estw { flex-basis: 100%; padding-right: 0; border-right: 0; } }

/* Intro popup (dash-core introDialog): the consent box sits in a bordered panel, like the code box */
.refdlg-consent { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); }
.refdlg-consent:has(input:checked) { border-color: var(--d-ok-line); background: var(--d-ok-bg); }
.refdlg-consent input:focus-visible { outline: 2px solid var(--fg-3); outline-offset: 2px; }
.refdlg-err { margin: 12px 0 0; font-size: 13px; color: var(--d-warn); }
.refdlg-err[hidden] { display: none; }

/* ---------- loading: ghost placeholders on every tab until the data arrives (dashboard.js loading()) ---------- */
.skel-tbl { margin-top: 32px; }
.sk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skel-tbl i, .bh-ghost i, .app.is-loading .gh {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, var(--d-hover) 0%, var(--d-hover-2) 50%, var(--d-hover) 100%) 0 0 / 200% 100%;
  animation: tc-shimmer 1.4s linear infinite; }
.sk-title { width: 220px; height: 14px; margin: 0 0 14px; }
.sk-box { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--d-card); }
.sk-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(150px, 230px) 170px 200px; align-items: center; gap: 16px; padding: 14px 16px; }
.sk-row + .sk-row { border-top: 1px solid var(--line); }
.sk-row:nth-child(2) { opacity: .8; } .sk-row:nth-child(3) { opacity: .6; } .sk-row:nth-child(n+4) { opacity: .4; }
.skel-tbl .sk-logo { width: 36px; height: 36px; border-radius: 9px; }
.sk-tx { display: grid; gap: 7px; }
.sk-tx i:first-child { width: 42%; height: 12px; } .sk-tx i:last-child { width: 72%; height: 10px; }
.sk-pay { width: 70%; height: 12px; }
.skel-tbl .sk-pill { width: 110px; height: 26px; border-radius: 999px; }
.skel-tbl .sk-btn { width: 100%; height: 36px; border-radius: 8px; }
@media (max-width: 900px) {
  .sk-row { grid-template-columns: 36px minmax(0, 1fr) 96px; }
  .skel-tbl .sk-pay, .skel-tbl .sk-pill { display: none; }
}
/* Your buyers header: ghost stats while the list loads */
.bh-ghost { display: none; align-items: center; gap: 18px; padding-bottom: 3px; }
.bh-ghost i { width: 64px; height: 12px; } .bh-ghost i:first-child { width: 150px; height: 16px; } .bh-ghost i:last-child { width: 120px; }
.view[data-view="buyers"]:has(#dash-buyers:not([hidden]) #dash-list > .skel-tbl) .bh-ghost { display: flex; }
.view[data-view="buyers"]:has(#dash-buyers:not([hidden]) #dash-list > .skel-tbl) #dash-stats { display: none; }
@media (max-width: 760px) { .bh-ghost i:first-child { display: none; } }
/* before the profile arrives: summary line, sidebar name, profile fields and estimate panel */
.app.is-loading #dash-sum:empty { display: block; width: 260px; max-width: 70%; height: 12px; margin-top: 10px; border-radius: 6px;
  background: linear-gradient(90deg, var(--d-hover) 0%, var(--d-hover-2) 50%, var(--d-hover) 100%) 0 0 / 200% 100%; animation: tc-shimmer 1.4s linear infinite; }
.app.is-loading #me-name, .app.is-loading #me-av, .app.is-loading #est-v, .app.is-loading #est-why,
.app.is-loading .dash-settings :is(input:not([type=checkbox]), select), .app.is-loading .dash-settings .gopts span {
  color: transparent !important; border-color: var(--line) !important; pointer-events: none; user-select: none;
  background: linear-gradient(90deg, var(--d-hover) 0%, var(--d-hover-2) 50%, var(--d-hover) 100%) 0 0 / 200% 100% !important;
  animation: tc-shimmer 1.4s linear infinite; }
.app.is-loading #me-name, .app.is-loading #est-v, .app.is-loading #est-why { border-radius: 6px; width: max-content; max-width: 100%; }
.app.is-loading .dash-settings ::placeholder { color: transparent; }
.app.is-loading .dash-settings .gopts span::before, .app.is-loading .dash-settings .fmk, .app.is-loading #dash-save-msg { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .skel-tbl i, .bh-ghost i, .app.is-loading #dash-sum:empty, .app.is-loading #me-name, .app.is-loading #me-av, .app.is-loading #est-v, .app.is-loading #est-why,
  .app.is-loading .dash-settings :is(input:not([type=checkbox]), select), .app.is-loading .dash-settings .gopts span { animation: none; }
}

/* company profile tiles are narrow: show each group's three leading products (the tooltip and the estimator's dropdown list them all) */
.gopts.sys:not(.yr-sys) .sys-ex > :nth-child(n+4):not(.sys-more) { display: none; }

/* ---------- AI agents tab: the prompt on the left, where to open it and what it includes on the right ---------- */
.ag-sub { max-width: 62ch; line-height: 1.55; }
.ag-grid { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 1101px) { .ag-grid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; } .ag-side { position: sticky; top: 24px; } }
.ag-grid[hidden] { display: none; }
.ag-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ag-meta { margin: 0; font-size: 13px; color: var(--fg-3); }
.ag-pre { margin: 0; min-height: 320px; max-height: 64vh; overflow: auto; padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--d-card);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--fg-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ag-pre:focus-visible { outline: 2px solid var(--fg-3); outline-offset: 2px; }
.ag-pre[aria-busy="true"] { color: transparent; background: linear-gradient(90deg, var(--d-hover) 0%, var(--d-hover-2) 50%, var(--d-hover) 100%) 0 0 / 200% 100%; animation: tc-shimmer 1.4s linear infinite; }
.ag-side .fsec { margin: 30px 0 12px; } .ag-side .fsec:first-child { margin-top: 0; }
.ag-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ag-apps .dbtn { justify-content: space-between; }
.ag-app { display: inline-flex; align-items: center; gap: 10px; }
.ag-ico { flex: none; }
.ag-hint { min-height: 1.5em; margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--d-ok); }
.ag-check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--fg); cursor: pointer; }
.ag-check input { margin: 3px 0 0; accent-color: var(--fg); width: 15px; height: 15px; flex: none; }
.ag-check > span { flex: 1; min-width: 0; }
.ag-logo { flex: none; width: 32px; height: 32px; padding: 4px; border-radius: 8px; background: var(--d-tile); border: 1px solid var(--d-tile-line); display: grid; place-items: center; overflow: hidden; }
.ag-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ag-check small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fg-3); }
.ag-buyers { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.ag-p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--fg-2); }
@media (max-width: 1100px) { .ag-pre { max-height: 46vh; min-height: 220px; } }
@media (prefers-reduced-motion: reduce) { .ag-pre[aria-busy="true"] { animation: none; } }

/* Buyer rows follow the main column's own width, not the window's, so a narrow column (the chat
   drawer open, a small laptop) never pushes Apply off the row. Desktop only; phones keep their layout.
   Steps as the column narrows: one row without the pay column, then two rows, then the phone stack. */
.app-main { container: dmain / inline-size; }
@media (min-width: 901px) {
  @container dmain (max-width: 1040px) {
    .brow, .bhead { grid-template-columns: 36px minmax(110px, 1fr) minmax(130px, 1fr) 136px auto 32px; grid-template-areas: "logo tx fit st act more"; }
    .bpay, .bhead span:nth-child(4) { display: none; }
    .bhead span:nth-child(3) { display: block; }
    .bh-stats { flex-wrap: wrap; row-gap: 8px; min-width: 0; }
  }
  @container dmain (max-width: 820px) {
    /* two rows: name, progress and Apply on top; fit and pay underneath (the fit column sizes to its bars and label) */
    .bhead { display: none; }
    .brow { grid-template-columns: 36px max-content minmax(0, 1fr) 140px auto 32px; gap: 8px 18px;
      grid-template-areas: "logo tx tx st act more" ". fit pay pay pay ."; }
    .bfit { flex-wrap: nowrap; }
    .bpay { display: block; }
    .bh-stats { width: 100%; }
    .bh-prog .prog-bar { width: 72px; }
  }
  @container dmain (max-width: 620px) {
    .allb-head { display: none; }
    .allb-line { grid-template-columns: 36px minmax(0, 1fr) 32px; gap: 10px 14px; grid-template-areas: "logo tx more" ". pay pay" ". act act"; }
    .allb-act { justify-content: flex-start; }
  }
  @container dmain (max-width: 520px) {
    .brow { grid-template-columns: 36px minmax(0, 1fr) 32px; gap: 10px 14px; grid-template-areas: "logo tx more" ". fit fit" ". pay pay" ". st st" ". act act"; }
    .bact { justify-content: flex-start; }
    .bmore { padding: 0 16px 16px 66px; }
    .bmore dl { grid-template-columns: 1fr; gap: 2px; }
    .bmore dd + dt { margin-top: 8px; }
  }
}
/* chat drawer in the dashboard: no divider line on its left edge (the main site keeps it) */
html:has(.app-main) .tcc { border-left: 0; }
/* and the same solid grey as the sidebar (--d-frame), instead of frosted glass over the page */
html:has(.app-main) .tcc { --tcc-sheet: var(--d-frame); background: var(--d-frame); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* buyer logos: fill the tile's inner box and stay centred (the img's height attribute used to push it out the bottom) */
.buyer .logo img, .allb-row .ma-logo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
/* "Last used" pill on the Google button (dash-core.js, tc_last_login cookie); your-range.css loads this file too */
[data-google] { position: relative; }
[data-google] .last-used { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg); color: var(--fg-2); font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; pointer-events: none; }
[data-google]:has(.last-used) { padding-left: 76px; padding-right: 76px; }
@media (max-width: 400px) { [data-google]:has(.last-used) { padding-left: 16px; padding-right: 16px; } [data-google] .last-used { position: static; transform: none; } }

/* business checks (dashboard.js verify()): the note above Your buyers, the waiting Apply area, the pop-up */
.vbox { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 12px 12px 12px 18px; border: 1px solid var(--line-2); border-radius: 12px; background: color-mix(in srgb, var(--fg) 3%, transparent); }
.vbox[hidden] { display: none; }
.vbox p { flex: 1; margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.vbox p b { font-weight: 500; color: var(--fg); }
.vbox .dbtn { flex: none; }
.vbox[data-tone="ok"] { border-color: var(--d-ok-line); background: var(--d-ok-bg); }
.vbox[data-tone="ask"], .vbox[data-tone="wait"] { border-color: var(--d-warn-line); background: var(--d-warn-bg); }
.vbox[data-tone="no"] { border-color: var(--d-err-line); }
@media (max-width: 640px) { .vbox { flex-wrap: wrap; } .vbox p { flex-basis: calc(100% - 40px); } }
.vspin { flex: none; width: 14px; height: 14px; border: 1.6px solid var(--fg-3); border-top-color: transparent; border-radius: 50%; animation: vspin .8s linear infinite; }
.act-note.vbusy { display: inline-flex; align-items: center; gap: 8px; }
.act-note.vbusy .vspin { width: 11px; height: 11px; }
@keyframes vspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vspin { animation-duration: 2.4s; } }
.prof-vbox { margin: 14px 0 22px; }
.fsec-note { margin: -4px 0 16px; max-width: 68ch; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }
#auth-email-hint { margin: 6px 0 12px; }
[data-auth-mode="signin"] #auth-email-hint { display: none; }
.vbox .vok, .vdone .vok { flex: none; color: var(--d-ok, #3fa66b); }
.vdone { margin-bottom: 10px; }
.vdone .vok { width: 34px; height: 34px; }
.vdlg [data-v-go] .vspin { display: inline-block; vertical-align: -2px; margin-right: 8px; border-color: currentColor; border-top-color: transparent; }
/* Fields the business check points at: "doesn't match the records" (held) or "add this" (a missing detail). */
.mismatch .fmw input, .mismatch .fmw select, .needed .fmw input, .needed .fmw select { border-color: var(--d-warn-line); box-shadow: 0 0 0 3px var(--d-warn-bg); }
.fflag { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--d-warn, #b7791f); }
.vdlg form { margin-top: 18px; display: grid; gap: 14px; }
.vdlg .dfield { display: grid; gap: 6px; }
.vdlg .dfield label { font-size: 13px; color: var(--fg-2); }
.vdlg .dfield input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--d-fill); color: var(--fg); font: inherit; font-size: 14px; }
.vdlg .dfield input:focus { outline: none; border-color: var(--d-hover-line); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 8%, transparent); }
.vdlg .dfield small { font-size: 12px; color: var(--fg-3); }
.vdlg .refdlg-err { margin: 0; }
.vdlg .refdlg-acts { margin-top: 6px; }
/* admin: business check reasons */
.ck-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; line-height: 1.45; color: var(--fg-2); }
.ck-list li { display: grid; grid-template-columns: 16px 1fr; gap: 6px; }
.ck-list .ck-ok span { color: var(--d-ok); } .ck-list .ck-warn span { color: var(--d-warn); } .ck-list .ck-bad span, .ck-list .ck-bad { color: var(--d-err); }
.ck-asks { margin: 8px 0 0; font-size: 13px; color: var(--fg-2); }
.ck-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.co-row .co-ck { display: block; margin-top: 6px; }
.app-nav em.warn { color: var(--d-warn); background: var(--d-warn-bg); box-shadow: inset 0 0 0 1px var(--d-warn-line); }
/* buyers hidden while a person reviews the company (dashboard.js masked()) */
.is-masked { position: relative; }
/* dashboard.js maskWrap also sets inert and aria-hidden on these, so the keyboard and screen readers skip them. */
.is-masked > :not(.mask-note) { filter: blur(7px); opacity: .7; pointer-events: none; user-select: none; }
.mask-note { position: sticky; top: 40%; z-index: 2; width: fit-content; max-width: min(460px, 90%); margin: 0 auto -64px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--d-card); box-shadow: var(--d-shadow); font-size: 14px; line-height: 1.5; color: var(--fg-2); text-align: center; transform: translateY(80px); }
.mask-note b { display: block; font-weight: 500; color: var(--fg); }
.mask-note .dbtn { display: flex; margin: 10px auto 0; }
@media (prefers-reduced-motion: reduce) { .is-masked > :not(.mask-note) { transition: none; } }

/* sign-in art: buyers other than micro1 are blurred until the company signs in */
.auth-right .ma-logo.ma-blur-tile { overflow: hidden; padding: 0; }
.auth-right .ma-logo img.ma-blur-img { width: 100%; height: 100%; object-fit: cover; filter: blur(2.2px); transform: scale(1.2); }
.auth-right .ma-blur { display: inline-block; filter: blur(4.5px); user-select: none; -webkit-user-select: none; }

/* sign-in art, light theme: the estimator's golden look (warm sky, brown digits on paper) */
html[data-theme="light"] body.tint-golden .auth-split:not(.yr-split) .auth-right { background: linear-gradient(180deg, #ebe3d8 0%, #efeae2 40%, #f3f1ed 75%, var(--bg) 100%); border-color: var(--line); }
html[data-theme="light"] body.tint-golden .auth-split:not(.yr-split) .auth-right > canvas.auth-scene { filter: none; opacity: 1; }
html[data-theme="light"] body.tint-golden .auth-split:not(.yr-split) .auth-right::before { mix-blend-mode: multiply; opacity: .16; }
html[data-theme="light"] body.tint-golden .auth-split:not(.yr-split) .auth-cap { color: var(--fg); }
/* desktop: the caption sits over the digits, so a faint glow of the sky keeps it readable */
@media (min-width: 861px) { html[data-theme="light"] body.tint-golden .auth-split:not(.yr-split) .auth-cap { text-shadow: 0 0 8px #f3f1ed; } }
@media (min-width: 861px) { html:not([data-theme="light"]) .auth-split:not(.yr-split) .auth-cap { color: #ededed; text-shadow: 0 0 8px #17181b; } }

/* ============ Admin: Analytics and AI assistant tabs (dashboard-insights.js) ============ */
/* chart colours: validated for colour-blind separation and contrast on both surfaces */
.adm-main { --viz-1: #3987e5; --viz-2: #d95926; --viz-track: rgba(255,255,255,.06); }
html[data-theme="light"] .adm-main { --viz-1: #2a78d6; --viz-2: #eb6834; --viz-track: rgba(17,17,17,.06); }
.ins-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 22px; }
.ins-filters select.dash-in { width: auto; min-width: 150px; height: 36px; font-size: 13.5px; }
.ins-filters .ins-team { flex-basis: auto; margin: 0; font-size: 13.5px; color: var(--fg-2); }
.ins-filters .ins-refresh { height: 36px; }
.ins-seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--d-fill); }
.ins-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--fg-2); font: inherit; font-size: 13px; cursor: pointer; }
.ins-seg button:hover { color: var(--fg); }
.ins-seg button[aria-pressed="true"] { background: var(--d-hover-2); color: var(--fg); }
.ins-subs { display: flex; gap: 4px; margin-top: 22px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ins-subs button { flex: none; padding: 10px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--fg-2); font: inherit; font-size: 14px; cursor: pointer; }
.ins-subs button:hover { color: var(--fg); }
.ins-subs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--d-ink); }
[data-ins-body].ins-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }
.ins-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
@media (max-width: 1100px) { .ins-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ins-tile, .ins-card { border: 1px solid var(--line); border-radius: 12px; background: var(--d-fill); }
html[data-theme="light"] .ins-tile, html[data-theme="light"] .ins-card { background: #fff; }
.ins-tile { padding: 16px 18px; min-width: 0; }
.ins-k { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.ins-v { margin: 8px 0 0; font-size: 28px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; color: var(--fg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ins-s { margin: 6px 0 0; font-size: 12.5px; color: var(--fg-2); }
.ins-card { margin-top: 16px; padding: 20px 22px 22px; min-width: 0; }
/* data.css sizes every h2 inside <main> with !important; card titles need the same weight to stay small */
main h2.ins-h:not(#tcc-h):not(.fsec), .ins-j h2 { margin: 0; font-size: 16px !important; font-weight: 500 !important; letter-spacing: -.01em !important; line-height: 1.3 !important; color: var(--fg); }
.ins-h3 { margin: 22px 0 0; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.ins-note { margin: 6px 0 0; max-width: 80ch; font-size: 13px; color: var(--fg-2); }
.ins-none { margin: 14px 0 0; font-size: 13.5px; color: var(--fg-2); list-style: none; }
.ins-empty { margin-top: 22px; padding: 28px; border: 1px dashed var(--line-2); border-radius: 12px; }
.ins-empty b { font-weight: 500; color: var(--fg); }
.ins-empty p { margin: 8px 0 0; max-width: 72ch; font-size: 14px; color: var(--fg-2); }
.ins-grid2, .ins-grid3 { display: grid; gap: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ins-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ins-grid2, .ins-grid3 { grid-template-columns: minmax(0, 1fr); } }
.ins-mono { font-family: var(--mono); font-size: 12px; color: var(--fg-2); overflow-wrap: anywhere; }
/* labelled bars */
.ins-bars { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ins-bars { gap: 12px; }
.ins-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 5px 12px; font-size: 13.5px; }
.ins-bars .ins-bt { grid-column: 1 / -1; grid-row: 2; }
.ins-bl { color: var(--fg); overflow-wrap: anywhere; }
.ins-bt, .ins-ft { height: 8px; border-radius: 4px; background: var(--viz-track); overflow: hidden; }
.ins-bt i, .ins-ft i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--viz-1); }
.ins-bars li:hover .ins-bt i { filter: brightness(1.15); }
.ins-bv { min-width: 34px; text-align: right; color: var(--fg); font-variant-numeric: tabular-nums; }
.ins-bv small { margin-left: 8px; font-size: 12px; color: var(--fg-2); }
/* funnels */
.ins-funnel { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.ins-fh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.ins-fl { color: var(--fg); }
.ins-fv { flex: none; color: var(--fg-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.ins-fv b { font-weight: 500; color: var(--fg); }
.ins-ft { height: 12px; margin-top: 6px; }
.ins-fd { margin: 5px 0 0; font-size: 12.5px; color: var(--d-warn); }
.ins-fd.up { color: var(--fg-2); }
/* tables */
.ins-tw { margin-top: 14px !important; max-height: 640px; overflow: auto; }
.ins-table th { position: sticky; top: 0; z-index: 1; padding: 0; background: var(--d-side); }
.ins-table th button { width: 100%; padding: 10px 12px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; white-space: nowrap; cursor: pointer; }
.ins-table th button:hover { color: var(--fg); }
.ins-table .num, .ins-table th.num button { text-align: right; font-variant-numeric: tabular-nums; }
.ins-table td small { display: inline !important; margin-left: 4px; }
.ins-table td { vertical-align: middle; }
.ins-table tbody tr:hover td { background: var(--d-fill); }
/* line chart */
.ins-chart { margin-top: 12px; }
.ins-legend { display: flex; gap: 18px; margin: 0 0 6px; font-size: 13px; color: var(--fg-2); }
.ins-legend span, .ins-tip span { display: flex; align-items: center; gap: 7px; }
.ins-legend i, .ins-tip i { width: 14px; height: 2px; border-radius: 1px; background: var(--viz-1); }
.ins-legend i.s2, .ins-tip i.s2 { background: var(--viz-2); }
.ins-plot { position: relative; }
.ins-plot svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.ins-plot svg:focus-visible { outline: 2px solid var(--d-vio); outline-offset: 4px; border-radius: 6px; }
.ins-grid { stroke: var(--line); stroke-width: 1; }
.ins-ax { fill: var(--fg-2); font-family: var(--mono); font-size: 10.5px; }
.ins-line { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ins-dot { fill: var(--viz-1); stroke: var(--d-card); stroke-width: 2; }
.ins-line.s2 { stroke: var(--viz-2); } .ins-dot.s2 { fill: var(--viz-2); }
.ins-cross { stroke: var(--fg-3); stroke-width: 1; }
.ins-tip { position: absolute; top: 6px; z-index: 2; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--d-card); box-shadow: var(--d-shadow-2); font-size: 12.5px; color: var(--fg-2); white-space: nowrap; pointer-events: none; }
.ins-tip[hidden] { display: none; }
.ins-tip b { font-weight: 500; color: var(--fg); }
.ins-tip strong { font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.ins-asTable { margin-top: 10px; font-size: 13px; color: var(--fg-2); }
.ins-asTable summary, .ins-how summary { cursor: pointer; width: fit-content; }
.ins-asTable summary:hover, .ins-how summary:hover { color: var(--fg); }
/* conversations */
.ins-convs .adm-bar { margin-top: 14px; }
.ins-convs #ins-chat-q { flex: 0 1 340px; height: 36px; font-size: 13.5px; }
.ins-convs #ins-chat-st { width: auto; min-width: 220px; height: 36px; font-size: 13.5px; }
.ins-split { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 0; margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-height: 420px; }
.ins-clist { list-style: none; margin: 0; padding: 6px; max-height: 760px; overflow-y: auto; border-right: 1px solid var(--line); }
.ins-clist button { display: grid; gap: 5px; width: 100%; padding: 11px 12px; border: 0; border-radius: 8px; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.ins-clist button:hover { background: var(--d-hover); }
.ins-clist button[aria-current="true"] { background: var(--d-hover-2); }
.ins-clist b { font-weight: 500; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ins-cm { font-size: 12px; color: var(--fg-2); }
.ins-thread { padding: 18px 22px 26px; max-height: 760px; overflow-y: auto; min-width: 0; }
.ins-th { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ins-tm { margin: 6px 0 0; font-size: 13px; color: var(--fg-2); }
.ins-turn { padding: 18px 0; border-bottom: 1px solid var(--line); }
.ins-turn:last-child { border-bottom: 0; }
.ins-where { margin: 0 0 10px; font-size: 12.5px; color: var(--fg-2); }
.ins-q { margin-left: auto; width: fit-content; max-width: 78%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--d-hover-2); color: var(--fg); font-size: 14.5px; line-height: 1.5; }
.ins-q p, .ins-a p { margin: 0; overflow-wrap: anywhere; }
.ins-files { margin-top: 8px !important; display: flex; flex-wrap: wrap; gap: 6px; }
.ins-a { margin-top: 12px; max-width: 86%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; color: var(--fg); font-size: 14.5px; line-height: 1.55; }
.ins-a.bad { border-color: var(--d-err-line); }
.ins-a p + p, .ins-a ul, .ins-a ol { margin: 8px 0 0; }
.ins-a ul, .ins-a ol { padding-left: 20px; }
.ins-a li + li { margin-top: 4px; }
.ins-err { color: var(--d-err); font-family: var(--mono); font-size: 12px; }
.ins-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.co-chip.err { color: var(--d-err); border-color: var(--d-err-line); }
.ins-how { margin-top: 10px; font-size: 13px; color: var(--fg-2); }
.ins-how dl { margin: 10px 0 0; display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 8px 16px; }
.ins-how dt { color: var(--fg-2); } .ins-how dd { margin: 0; color: var(--fg); }
.ins-how ul { margin: 0; padding-left: 18px; }
@media (max-width: 900px) {
  .ins-split { grid-template-columns: minmax(0, 1fr); }
  .ins-clist { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ins-q, .ins-a { max-width: 100%; }
  .ins-how dl { grid-template-columns: minmax(0, 1fr); }
}
/* one visit, step by step */
.refdlg.ins-jdlg { width: min(760px, calc(100vw - 32px)); padding: 0; }
.ins-j header { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); background: var(--d-card); }
.ins-j-body { padding: 6px 24px 26px; }
.ins-j-meta { margin: 14px 0 0; font-size: 13px; color: var(--fg-2); }
.ins-tl { list-style: none; margin: 12px 0 0; padding: 0 0 0 14px; border-left: 1px solid var(--line-2); display: grid; gap: 10px; }
.ins-tl li { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; font-size: 13.5px; color: var(--fg-2); }
.ins-tl li::before { content: ""; position: absolute; left: -18px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3); }
.ins-tl li.pv::before { background: var(--viz-1); }
.ins-tl li.good::before { background: var(--d-ok-bar); }
.ins-tl li.bad::before { background: var(--d-err); }
.ins-tl li.pv { color: var(--fg); }
.ins-tl time { font-family: var(--mono); font-size: 11.5px; color: var(--fg-2); padding-top: 2px; }
.ins-tl b { font-weight: 500; color: var(--fg); }
.ins-tl small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fg-2); overflow-wrap: anywhere; }

/* People on this account (dashboard.js, api/team.py) */
.team-asks { display: grid; gap: 10px; margin-top: 22px; }
.team-asks[hidden] { display: none; }
.team-ask { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 18px; border: 1px solid var(--d-warn-line); border-radius: 12px; background: var(--d-warn-bg); }
.team-ask p { flex: 1; margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.team-ask p b { font-weight: 500; color: var(--fg); overflow-wrap: anywhere; }
.team-acts { display: flex; flex: none; gap: 8px; }
.team-list { list-style: none; margin: 0 0 22px; padding: 0; }
.team-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.team-who { min-width: 0; font-size: 15px; color: var(--fg); }
.team-who b { font-weight: 500; overflow-wrap: anywhere; }
.team-who i { font-style: normal; font-size: 12px; color: var(--fg-2); border: 1px solid var(--line-2); border-radius: 99px; padding: 1px 8px; margin-left: 6px; }
.team-who small { display: block; margin-top: 2px; font-size: 13px; color: var(--fg-2); }
.team-invite { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.team-invite .dfield { flex: 1 1 260px; margin: 0; }
.team-invite .msg { flex-basis: 100%; margin: 0; }
@media (max-width: 640px) { .team-ask, .team-list li { flex-wrap: wrap; } .team-ask p { flex-basis: 100%; } }

.team { max-width: 760px; margin-top: 18px; }
.team-status { max-width: 760px; margin-top: 22px; }
.team-status[hidden] { display: none; }
.team-status p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.team-status.err { padding: 22px; border: 1px dashed var(--line-2); border-radius: 14px; }
.prof-grid[hidden] { display: none; }

/* ---- admin: Emails tab (dashboard-insights.js, /api/mailreport) ---- */
main h2.ins-sec:not(#tcc-h):not(.fsec) { margin: 34px 0 0 !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 500 !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--fg-3) !important; font-family: "Geist Mono", ui-monospace, monospace !important; }
.ins-flow .ins-h .co-chip { margin-left: 8px; vertical-align: 2px; }
.ins-mn { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px 18px; margin: 14px 0 0; }
.ins-mn div { min-width: 0; }
.ins-mn dt { font-size: 12px; color: var(--fg-3); }
.ins-mn dd { margin: 2px 0 0; font-size: 14.5px; color: var(--fg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ins-mn.ins-props { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ins-fd2 { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.ins-fd2 summary { cursor: pointer; font-size: 13.5px; color: var(--fg-2); }
.ins-fd2 summary:hover { color: var(--fg); }
.ins-fsl { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.ins-fs { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; color: var(--fg-2); }
.ins-fs.k-email { border-color: var(--line-2); background: var(--bg-2, transparent); }
.ins-fs.k-wait, .ins-fs.k-end { border-style: dashed; }
.ins-fs-b { flex: none; min-width: 30px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); padding-top: 2px; }
.ins-fs-t { margin: 0; }
.ins-fs-t b { font-weight: 500; color: var(--fg); }
.ins-fs-s { margin: 4px 0 0; font-size: 13px; color: var(--fg-2); }
.ins-fs-mail { flex: 1; min-width: 0; }
.ins-fs-mail .dbtn { margin-top: 12px; height: 32px; font-size: 13px; }
.ins-warn { color: var(--d-warn) !important; }
.ins-mute { color: var(--fg-3); }
.ins-who { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.ins-find { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ins-find .dash-in { flex: 1 1 240px; max-width: 360px; height: 38px; }
.ins-mailframe { width: 100%; height: min(70vh, 760px); margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; background: #0e0e0e; }

/* the pay under the name and the form time under Apply are phone-only copies (see the block below) */
.bsub, .bmin { display: none; }
/* phones: logo, name with pay under it and the details arrow on top, then a line; fit and progress
   on the left, Apply with the form time under it on the right */
@media (max-width: 640px) {
  .buyer .brow { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 0 12px; padding: 16px;
    grid-template-areas: "logo tx more" "fit fit act" "st st act"; align-items: center; }
  .buyer .brow > .logo { width: 48px; height: 48px; border-radius: 12px; padding: 7px; align-self: center; }
  .buyer .btx { align-self: center; }
  .buyer .bsub { display: block; margin-top: 2px; font-size: 13px; color: var(--fg-3); }
  .buyer .bpay { display: none; }
  .buyer .brow > .more-t { align-self: center; justify-self: end; margin-top: 0; }
  .buyer .bfit { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-end; gap: 6px 10px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  .buyer .bst { justify-content: flex-start; align-self: start; margin: 8px 0 0; padding: 0; border-top: 0; }
  .buyer .bact { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px;
    margin: 14px 0 0 -12px; padding: 14px 0 0 12px; border-top: 1px solid var(--line); }
  .buyer .bmin { display: block; font-size: 12px; color: var(--fg-3); padding-right: 14px; }
  .buyer .act-btns { display: flex; width: auto; }
  .buyer .act-btns .dbtn, .buyer .bact > .dbtn { width: auto; min-height: 40px; padding: 0 18px; border-radius: 999px; }
  .buyer .act-hint, .buyer .act-note { text-align: right; }
  /* dark theme: cards a step lighter than the panel behind them */
  html:not([data-theme="light"]) .buyer { background: #202023; border-color: rgba(255,255,255,.1); }
  /* light theme: a soft gray card on the white panel */
  html[data-theme="light"] .buyer { background: #f3f3f4; border-color: rgba(17,17,17,.08); }
}