/* NearSite — product styles on top of the Marketplace token system (styles.css). Every colour, size,
   space, radius and shadow is a token; dark theme remaps the semantic aliases only. */
:root {
  --surface-nav: var(--blue-900);           /* dark navy chrome, both themes */
  --text-on-nav: var(--charcoal-0);
  --text-on-nav-muted: var(--blue-100);
  --verdict-yes-bg: var(--feedback-success-bg); --verdict-yes-dot: var(--green-600);
  --verdict-no-bg: var(--feedback-danger-bg);   --verdict-no-dot: var(--red-600);
  --verdict-maybe-bg: var(--feedback-warning-bg); --verdict-maybe-dot: var(--amber-600);
  --verdict-pending-bg: var(--feedback-info-bg);  --verdict-pending-dot: var(--blue-600);
  --chip-fg: var(--charcoal-900);
  --map-land: var(--charcoal-100);
  --content-max: 1180px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: var(--charcoal-900);
  --surface-sunken: var(--charcoal-950);
  --surface-card: var(--charcoal-800);
  --surface-inverse: var(--charcoal-0);
  --surface-brand-soft: var(--yellow-900);
  --text-primary: var(--charcoal-50);
  --text-secondary: var(--charcoal-300);
  --text-inverse: var(--charcoal-900);
  --text-link: var(--blue-300);
  --text-link-hover: var(--blue-200);
  --border-subtle: var(--charcoal-700);
  --border-default: var(--charcoal-600);
  --border-strong: var(--charcoal-400);
  --action-secondary-bg: var(--charcoal-0);
  --action-secondary-bg-hover: var(--charcoal-100);
  --action-secondary-bg-active: var(--charcoal-200);
  --action-secondary-fg: var(--charcoal-900);
  --action-tertiary-bg-hover: var(--charcoal-700);
  --action-tertiary-fg: var(--charcoal-50);
  --map-land: var(--charcoal-700);
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; }
.icon-sm { width: 16px; height: 16px; }
.wrap { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-5); }
.stack { display: grid; gap: var(--space-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.between { justify-content: space-between; }
.muted { color: var(--text-secondary); }
.small { font-size: var(--text-sm); }
.eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--yellow-700); }
:root[data-theme="dark"] .eyebrow { color: var(--yellow-300); }
.money { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.tabular { font-variant-numeric: tabular-nums; }
.mono { font: var(--type-mono-sm); }
h1 { font: var(--type-display-lg); letter-spacing: var(--tracking-tight); }
h2 { font: var(--type-display-md); letter-spacing: var(--tracking-tight); }
h3 { font: var(--type-heading-md); }
p { margin: 0; }

/* ── Chrome ─────────────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--surface-nav); color: var(--text-on-nav); border-bottom: 1px solid var(--blue-800); }
.topbar .wrap { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; }
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--text-on-nav); text-decoration: none; font: var(--type-heading-md); font-family: var(--font-logo); letter-spacing: var(--tracking-tight); }
.brand:hover { color: var(--text-on-nav); text-decoration: none; }
.brand img { height: 32px; width: 32px; }
.nav { display: flex; gap: var(--space-1); margin-left: auto; align-items: center; }
.nav a, .nav button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--text-on-nav-muted); text-decoration: none; background: transparent; border: 0; cursor: pointer; font-weight: var(--weight-medium); }
.nav a:hover, .nav button:hover { color: var(--text-on-nav); background: var(--blue-800); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text-on-nav); background: var(--blue-800); }
.topbar .nav-toggle { display: none; }
@media (max-width: 860px) {
  .topbar .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; background: var(--surface-nav); padding: var(--space-3) var(--space-5) var(--space-5); border-bottom: 1px solid var(--blue-800); }
  .nav.open { display: flex; }
  .nav a, .nav button { justify-content: flex-start; }
}
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--blue-700); background: transparent; color: var(--text-on-nav); cursor: pointer; }
.theme-toggle:hover { background: var(--blue-800); }

main { flex: 1; }
.page { padding: var(--space-8) 0 var(--space-16); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-head p { color: var(--text-secondary); max-width: 62ch; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; color: var(--charcoal-0); background: var(--blue-900) url('/assets/stock-1.webp') center/cover no-repeat; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 21, 48, 0.94) 0%, rgba(10, 21, 48, 0.82) 55%, rgba(20, 22, 26, 0.6) 100%); z-index: -1; }
.hero .wrap { padding-top: var(--space-16); padding-bottom: var(--space-16); display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; }
.hero h1 { font: var(--type-display-hero); font-size: clamp(3rem, 6vw, 4.5rem); color: var(--charcoal-0); max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--yellow-400); }
.hero p.lede { font: var(--type-body-lg); color: var(--blue-100); max-width: 52ch; }
.hero .eyebrow { color: var(--yellow-300); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-card { background: rgba(20, 22, 26, 0.72); border: 1px solid var(--blue-700); border-radius: var(--radius-lg); padding: var(--space-6); backdrop-filter: blur(6px); display: grid; gap: var(--space-4); }
.hero-card h3 { color: var(--charcoal-0); }
.hero-stat { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--blue-800); color: var(--blue-100); }
.hero-stat:first-of-type { border-top: 0; }
.hero-stat strong { color: var(--charcoal-0); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; padding-top: var(--space-12); padding-bottom: var(--space-12); } }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { padding: var(--space-16) 0; }
.section.alt { background: var(--surface-sunken); }
.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); max-width: 64ch; }
.section-head p { color: var(--text-secondary); font: var(--type-body-lg); }
.grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-2 { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr !important; } }
pre { overflow-x: auto; max-width: 100%; }
.card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.card.flat { background: var(--surface-page); }
.card h3 { font: var(--type-heading-md); }
.card p { color: var(--text-secondary); }
.card .price-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); margin-top: auto; }
.card .price-line .money { font: var(--type-heading-lg); font-family: var(--font-display); white-space: nowrap; }
.card .price-line .cadence { color: var(--text-secondary); font-size: var(--text-sm); }
.photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-sunken); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); align-items: start; }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--yellow-400); color: var(--charcoal-900); font: var(--type-heading-md); font-family: var(--font-display); }

.footer { background: var(--surface-nav); color: var(--text-on-nav-muted); padding: var(--space-12) 0 var(--space-8); margin-top: auto; }
.footer .wrap { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.footer h4 { color: var(--text-on-nav); font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-3); }
.footer a { color: var(--text-on-nav); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--blue-800); padding-top: var(--space-5); font-size: var(--text-sm); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }
.trust { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.trust span { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--blue-700); border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--text-on-nav); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent; font-weight: var(--weight-semibold); cursor: pointer; text-decoration: none; transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.btn-primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.btn-primary:hover { background: var(--action-primary-bg-hover); color: var(--action-primary-fg); }
.btn-secondary { background: var(--action-secondary-bg); color: var(--action-secondary-fg); }
.btn-secondary:hover { background: var(--action-secondary-bg-hover); color: var(--action-secondary-fg); }
.btn-ghost { background: var(--action-tertiary-bg); color: var(--action-tertiary-fg); border-color: var(--border-default); }
.btn-ghost:hover { background: var(--action-tertiary-bg-hover); color: var(--action-tertiary-fg); }
.btn-danger { background: var(--red-600); color: var(--charcoal-0); }
.btn-danger:hover { background: var(--red-400); color: var(--charcoal-900); }
.btn-sm { min-height: 44px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn-lg { min-height: 52px; padding: 0 var(--space-6); font-size: var(--text-lg); }
.hero .btn-ghost { color: var(--charcoal-0); border-color: var(--blue-300); }
.hero .btn-ghost:hover { background: var(--blue-800); color: var(--charcoal-0); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { display: grid; gap: var(--space-2); min-width: 0; }
.field label { font: var(--type-label); color: var(--text-primary); }
.field .hint { font-size: var(--text-sm); color: var(--text-secondary); }
.field .error { font-size: var(--text-sm); color: var(--feedback-danger-fg); }
:root[data-theme="dark"] .field .error { color: var(--red-400); }
.input, .select, .textarea { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-page); color: var(--text-primary); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); outline: none; }
.input[aria-invalid="true"] { border-color: var(--red-600); }
.textarea { min-height: 96px; resize: vertical; }
.form-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.error-summary { border: 1px solid var(--red-600); background: var(--feedback-danger-bg); color: var(--charcoal-900); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.check { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--yellow-500); }
.file-drop { border: 2px dashed var(--border-default); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; display: grid; gap: var(--space-3); justify-items: center; background: var(--surface-page); }
.file-drop.over { border-color: var(--yellow-500); background: var(--surface-brand-soft); }

/* Address type-ahead */
.typeahead { position: relative; }
.suggestions { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md); list-style: none; margin: 0; padding: var(--space-1); max-height: 320px; overflow: auto; }
.suggestions li button { display: block; width: 100%; text-align: left; min-height: 44px; padding: var(--space-2) var(--space-3); border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-primary); }
.suggestions li button:hover, .suggestions li button:focus-visible { background: var(--action-tertiary-bg-hover); }
.suggestions .sub { display: block; color: var(--text-secondary); font-size: var(--text-sm); }
.captured { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); margin: 0; }
.captured dt { color: var(--text-secondary); }
.captured dd { margin: 0; }

/* ── Chips / verdicts ───────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); min-height: 28px; border-radius: var(--radius-pill); font: var(--type-label); color: var(--chip-fg); background: var(--charcoal-100); white-space: nowrap; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--charcoal-500); }
.chip-yes { background: var(--verdict-yes-bg); } .chip-yes::before { background: var(--verdict-yes-dot); }
.chip-no { background: var(--verdict-no-bg); } .chip-no::before { background: var(--verdict-no-dot); }
.chip-maybe { background: var(--verdict-maybe-bg); } .chip-maybe::before { background: var(--verdict-maybe-dot); }
.chip-pending { background: var(--verdict-pending-bg); } .chip-pending::before { background: var(--verdict-pending-dot); }
.chip-plain::before { display: none; }
.chip-brand { background: var(--yellow-400); } .chip-brand::before { display: none; }
.verdict-hero { display: grid; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-lg); border: 2px solid var(--border-default); background: var(--surface-card); }
.verdict-hero.yes { border-color: var(--green-600); } .verdict-hero.no { border-color: var(--red-600); } .verdict-hero.maybe { border-color: var(--amber-600); } .verdict-hero.pending { border-color: var(--blue-500); }
.verdict-hero .big { font: var(--type-display-md); font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-tight); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
th { position: sticky; top: 0; background: var(--surface-sunken); color: var(--text-secondary); font: var(--type-label); text-transform: uppercase; letter-spacing: var(--tracking-wide); white-space: nowrap; z-index: 1; }
th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); min-height: 24px; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-sunken); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-tools { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.table-tools .input { max-width: 320px; }
.pager { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); justify-content: flex-end; font-size: var(--text-sm); }

/* ── States ─────────────────────────────────────────────────────────────── */
.skeleton { display: grid; gap: var(--space-3); }
.skeleton span { display: block; height: 16px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--border-subtle), var(--surface-sunken), var(--border-subtle)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty, .error-state { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-8); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); color: var(--text-secondary); }
.error-state { border-color: var(--red-600); }

/* ── KPI / admin ────────────────────────────────────────────────────────── */
.kpis { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.kpi { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); display: grid; gap: var(--space-1); }
.kpi .label { font: var(--type-label); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.kpi .value { font: var(--type-display-md); font-family: var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sidebar { background: var(--surface-nav); color: var(--text-on-nav); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-6); position: sticky; top: 0; height: 100vh; overflow: auto; }
.sidebar nav { display: grid; gap: var(--space-1); }
.sidebar nav a { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--text-on-nav-muted); text-decoration: none; font-weight: var(--weight-medium); }
.sidebar nav a:hover, .sidebar nav a[aria-current="page"] { background: var(--blue-800); color: var(--text-on-nav); text-decoration: none; }
.sidebar .who { margin-top: auto; font-size: var(--text-sm); color: var(--text-on-nav-muted); display: grid; gap: var(--space-2); word-break: break-all; }
.admin-main { min-width: 0; background: var(--surface-sunken); }
.admin-top { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: 0 var(--space-6); background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: 20; }
.admin-top h1 { font: var(--type-heading-lg); }
.admin-top .spacer { flex: 1; }
.admin-top .theme-toggle { color: var(--text-primary); border-color: var(--border-default); }
.admin-top .theme-toggle:hover { background: var(--action-tertiary-bg-hover); }
.admin-body { padding: var(--space-6); display: grid; gap: var(--space-6); }
.admin-menu-toggle { display: none; }
@media (max-width: 960px) {
  .admin { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform var(--duration-base) var(--ease-standard); z-index: 50; }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .admin-menu-toggle { display: inline-flex; }
  .admin-body { padding: var(--space-4); }
}
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--text-secondary); font-size: 11px; font-family: var(--font-body); }
.chart .bar { fill: var(--blue-500); } .chart .bar.yes { fill: var(--yellow-500); }
.chart .axis { stroke: var(--border-default); }

/* Map */
.map { width: 100%; aspect-ratio: 16 / 10; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.map svg { width: 100%; height: 100%; display: block; }
.map .land { fill: var(--map-land); stroke: var(--border-default); }
.map .area { fill: var(--blue-500); fill-opacity: 0.28; stroke: var(--blue-500); stroke-width: 1.5; }
.map .site { fill: var(--yellow-500); stroke: var(--charcoal-900); stroke-width: 1; }
.map .pt-yes { fill: var(--green-600); } .map .pt-no { fill: var(--red-600); } .map .pt-maybe { fill: var(--amber-600); } .map .pt-pending { fill: var(--blue-600); }
.map .pt { stroke: var(--charcoal-0); stroke-width: 1; cursor: pointer; }
.map .label { font-size: 10px; fill: var(--text-primary); font-family: var(--font-body); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-sm); }
.legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

/* ── Toast & dialog ─────────────────────────────────────────────────────── */
.toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); display: grid; gap: var(--space-2); z-index: 100; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--charcoal-900); color: var(--charcoal-0); border-left: 4px solid var(--blue-400); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: flex; gap: var(--space-3); align-items: flex-start; }
.toast.ok { border-left-color: var(--green-400); } .toast.err { border-left-color: var(--red-400); }
.toast button { all: unset; cursor: pointer; margin-left: auto; min-width: 44px; min-height: 28px; text-align: center; color: var(--charcoal-300); }
dialog.modal { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 0; background: var(--surface-card); color: var(--text-primary); width: min(560px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); }
dialog.modal::backdrop { background: var(--surface-overlay); }
dialog.modal .modal-body { padding: var(--space-6); display: grid; gap: var(--space-4); }

/* Quote sheet */
.quote-lines { display: grid; gap: var(--space-3); }
.quote-line { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-page); }
.quote-line .qty { width: 72px; }
.totals { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); }
.totals div { display: flex; justify-content: space-between; gap: var(--space-4); }
.totals .grand { font: var(--type-heading-lg); font-family: var(--font-display); border-top: 1px solid var(--border-default); padding-top: var(--space-2); }
@media (max-width: 600px) { .quote-line { grid-template-columns: 1fr auto; } .quote-line .money { grid-column: 1 / -1; } }

/* Sign-in */
.signin { max-width: 440px; margin: var(--space-16) auto; }
.progress { height: 8px; border-radius: var(--radius-pill); background: var(--border-subtle); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--yellow-500); transition: width var(--duration-base) var(--ease-standard); }