/* Landing page, sign-up, account and guided onboarding (feature: signup).
   Loaded after app.css (and admin.css on form pages). No external assets. */

/* ---- Landing page ---------------------------------------------------- */
.landing-hero { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; padding-block: 1.5rem 2rem; }
.landing-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1rem; }
.landing-hero .lead { font-size: 1.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.25rem; }
.hero-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.hero-card h2 { margin-top: 0; font-size: 1.1rem; }
.money-compare { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.money-compare li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
.money-compare .amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.money-compare .up { color: var(--success-ink); }
.landing-section { padding-block: 1.25rem; }
.landing-section > h2 { margin-top: 0; }
.feature-grid, .how-grid, .price-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.feature-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.how-grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); counter-reset: how; }
.how-grid li { counter-increment: how; position: relative; padding-left: 2.6rem; }
.how-grid li::before { content: counter(how); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-weight: 700; }
.feature-grid h3, .how-grid h3 { margin-bottom: .35rem; }
.price-grid { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.price-card { background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.price-card.featured { border-color: var(--primary); }
.price-card h3 { margin: 0 0 .25rem; font-size: 1.25rem; }
.price { font-size: 2rem; font-weight: 700; margin: 0 0 .5rem; }
.price small { font-size: .95rem; font-weight: 400; color: var(--ink-muted); }
.price-card ul { padding-left: 1.2rem; }
.cta-band { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-block: 1.5rem; }
.cta-band p { margin: 0; font-size: 1.1rem; font-weight: 600; }
.center-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.pill-note { display: inline-block; font-size: .8rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--info-bg); color: var(--info-ink); vertical-align: middle; }

/* ---- Sign-up ---------------------------------------------------------- */
.signup-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.signup-card fieldset { background: var(--paper); }
.signup-aside { padding-top: 1rem; }
.signup-aside h2 { margin-top: 0; }
.steps-list { padding-left: 1.3rem; }
.steps-list li { margin-bottom: .5rem; }
.signup-fine { margin-top: .75rem; }
/* Honeypot: off-screen for people, still in the form for bots. */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- Onboarding wizard ------------------------------------------------ */
.wizard { display: grid; gap: 1.5rem; grid-template-columns: 16rem minmax(0, 1fr); align-items: start; }
.wizard-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.wizard-steps a, .wizard-steps span.step-link { display: flex; gap: .6rem; align-items: center; padding: .5rem .6rem; border-radius: 6px; text-decoration: none; color: var(--ink); }
.wizard-steps a:hover { background: var(--surface-3); }
.wizard-steps a[aria-current="step"] { background: var(--info-bg); font-weight: 700; }
/* design-v2-c: quiet markers: a muted number on a ring to do, a small filled tick when done. */
.step-num { flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-2xs); font-weight: 600;
  border: 1.5px solid var(--line-strong); color: var(--ink-muted); background: var(--paper); font-variant-numeric: tabular-nums; }
.is-done .step-num { background: var(--success-ink); border-color: var(--success-ink); color: var(--paper); }
.is-skipped .step-num { border-style: dashed; color: var(--ink-muted); border-color: var(--ink-muted); }
.step-state { display: block; font-size: .8rem; font-weight: 400; color: var(--ink-muted); }
.wizard-main > h1 { margin-bottom: .35rem; }
.wizard-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.25rem; }
.wizard-actions .skip { margin-left: auto; }
.explain { background: var(--info-bg); color: var(--info-ink); border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 1.25rem; }
.explain h2, .explain h3 { margin-top: 0; font-size: 1.05rem; }
.explain p:last-child { margin-bottom: 0; }
.sample-quote { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.sample-quote table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sample-quote th, .sample-quote td { text-align: left; padding: .25rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sample-quote td.num, .sample-quote th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sample-quote tfoot th, .sample-quote tfoot td { font-weight: 700; border-bottom: 0; }
.uplift { font-weight: 700; color: var(--success-ink); }
.rate-rows { display: grid; gap: 0 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.days-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.time-row { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.time-row .field input { max-width: 10rem; }
.doc-text { font-family: var(--mono); font-size: .9rem; min-height: 18rem; }
.live-links dt { font-weight: 700; margin-top: .75rem; }
.live-links dd { margin: .2rem 0 0; }
.copy-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.copy-row textarea, .copy-row input { flex: 1 1 20rem; font-family: var(--mono); font-size: .88rem; }
.progress-line { margin: 0 0 1rem; }
.time-left { margin: 0 0 1rem; }
/* Spaces step: one row per space (name, type, capacity); stacks on phones. */
.space-rows { display: grid; gap: .25rem; }
.space-row { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; padding-block: .25rem; border-bottom: 1px solid var(--line); }
.space-row:last-child { border-bottom: 0; }
/* Prices step: one fieldset per space, then the other renter types as a share of the resident price. */
.price-space { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; }
.price-space legend { font-weight: 700; padding-inline: .25rem; }
.share-row { display: grid; gap: 0 1.25rem; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }

/* ---- Account and platform view ---------------------------------------- */
.danger-zone { border: 2px solid var(--error-ink); border-radius: var(--radius); padding: 1.25rem; background: var(--paper); }
.danger-zone h2 { margin-top: 0; color: var(--error-ink); }
.signup-table td, .signup-table th { white-space: nowrap; }
.funnel-table td, .funnel-table th { white-space: nowrap; }
.funnel-bar { display: inline-block; vertical-align: middle; width: 5rem; height: .6rem; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.funnel-bar > span { display: block; height: 100%; background: var(--primary); }

@media (max-width: 52rem) {
  .landing-hero, .signup-grid, .wizard, .space-row, .share-row { grid-template-columns: 1fr; }
}

/* ---- First run (first-run-1, ARCHITECTURE 37). Tokens only; one box deep; 44 px targets on touch. ---- */
.signup-form .btn-block { width: 100%; margin-top: var(--sp-2); }
.slug-check { margin: .35rem 0 0; font-size: var(--text-xs); min-height: 1.25rem; overflow-wrap: anywhere; }
.slug-ok, .slug-bad { display: inline; }
.slug-ok { color: var(--success-ink); }
.slug-bad { color: var(--error-ink); }
.slug-mark { font-weight: 800; }
.slug-edit { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--text-sm); }
.slug-edit > summary { cursor: pointer; color: var(--primary); font-weight: 550; min-height: 2rem; display: inline-flex; align-items: center; }
/* The form's default (Enter) button: present for implicit submission, out of sight and out of the tab order. */
.default-submit { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.first-h { margin-top: 0; }
.group-divided { border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-3); }

/* Overview: one list, no step menu beside it. */
.wizard.wizard-overview { grid-template-columns: minmax(0, 46rem); }
.step-rows-once > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .25rem .75rem; }
.step-rows-once .step-body { display: grid; gap: .1rem; }
.step-rows-once .step-sum { flex-basis: auto; }
.step-rows-once .step-meta { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; align-items: center; }
.step-rows-once .is-done .step-title { color: var(--ink-muted); }

/* Tiles: radio buttons inside their labels (kind of center; rentals, programs or both). */
.tile-set { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
.tile-set > legend { font-weight: 650; font-size: 1rem; margin-bottom: var(--sp-3); padding: 0; }
.tile-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin-bottom: var(--sp-2); }
.tile-grid-3 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.tile { position: relative; display: grid; gap: .25rem; align-content: start; padding: var(--sp-4) var(--sp-4) var(--sp-4) 2.75rem; min-height: 5.5rem;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; }
.tile-small { min-height: 4.5rem; }
.tile input[type="radio"] { position: absolute; left: var(--sp-4); top: calc(var(--sp-4) + .15rem); width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--primary); }
.tile-title { font-weight: 650; }
.tile-line { font-size: var(--text-xs); color: var(--ink-muted); }
.tile:hover { border-color: var(--primary); }
.tile:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-soft); }
.tile:has(input:focus-visible) { outline: 2px solid var(--focus-ring, var(--primary)); outline-offset: 2px; }

/* Spaces: an add-row list. */
.space-set { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
.space-set > legend { font-weight: 650; padding: 0; margin-bottom: var(--sp-2); }
.space-list { display: grid; }
.space-head, .space-row { display: grid; gap: .5rem .75rem; grid-template-columns: minmax(0, 2.2fr) minmax(9rem, 1.2fr) 11rem 5.5rem; align-items: start; }
.space-head { font-size: var(--text-xs); color: var(--ink-muted); font-weight: 600; padding-bottom: .25rem; }
.space-row { padding: .4rem 0; border-top: 1px solid var(--line); }
.space-row .field { margin: 0; }
.space-row .row-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kind-chip { border-radius: var(--radius-pill); background: var(--surface-2); font-weight: 550; }
.stepper { display: flex; align-items: stretch; gap: .25rem; }
.stepper input { width: 5rem; text-align: center; }
.stepper-btn { min-width: 2.25rem; padding-inline: .5rem; font-weight: 700; }
.add-row { margin: var(--sp-2) 0 0; }
@media (max-width: 40rem) {
  .space-head { display: none; }
  .space-row { grid-template-columns: minmax(0, 1fr) auto; padding: var(--sp-3) 0; }
  .space-row .sr-name { grid-column: 1 / -1; }
  .space-row .row-label { position: static; width: auto; height: auto; clip: auto; font-size: var(--text-xs); color: var(--ink-muted); }
  .space-row .sr-remove { grid-column: 1 / -1; }
  .stepper-btn { min-width: 2.75rem; }
}

/* Prices: the form left, the sample quote right (sticky); on a phone a summary bar sticks to the bottom. */
.rates-layout { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); align-items: start; }
.quote-side { position: sticky; top: var(--sp-4); max-height: calc(100vh - 2rem); overflow: auto; }
.quote-side .sample-quote { grid-template-columns: 1fr; gap: var(--sp-3); }
.sq-case h3 { margin: 0 0 .25rem; }
.sample-quote .line-why { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--ink-muted); }
.sample-quote .sq-quiet th, .sample-quote .sq-quiet td { font-weight: 400; color: var(--ink-muted); }
.mode-switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 2px; margin-bottom: var(--sp-2); }
.mode-opt { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .8rem; min-height: 2rem; border-radius: var(--radius-pill); cursor: pointer; font-size: var(--text-sm); }
.mode-opt:has(input:checked) { background: var(--primary-soft); font-weight: 650; }
.mode-opt:has(input:focus-visible) { outline: 2px solid var(--focus-ring, var(--primary)); outline-offset: 1px; }
.price-space:has(input[value="hourly"]:checked) .mode-flat,
.price-space:has(input[value="flat"]:checked) .mode-hourly { display: none; }
.price-space .rate-rows { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.quote-bar { display: none; }
@media (max-width: 52rem) {
  .rates-layout { grid-template-columns: 1fr; }
  .quote-side { position: static; max-height: none; }
  html:has(.quote-bar) { scroll-padding-bottom: 5rem; }
  .quote-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; justify-content: space-between; align-items: center;
    gap: var(--sp-3); padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--paper);
    border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(0, 0, 0, .08); }
  .quote-bar-text strong { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
  body:has(.quote-bar) { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (pointer: coarse), (max-width: 40rem) { .mode-opt { min-height: 2.75rem; } }

/* Agreement and waiver: a summary per document; the full text behind "Edit full text". */
.doc-card { display: grid; gap: var(--sp-2); }
.doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); align-items: center; }
.doc-head h2 { margin: 0; }
.summary-label { margin: 0; font-weight: 600; color: var(--ink-muted); }
.doc-outline { margin: 0 0 var(--sp-2); padding-left: 1.2rem; font-size: var(--text-sm); }
.doc-edit textarea { width: 100%; }
.renter-preview .doc-preview { white-space: pre-wrap; font-family: inherit; font-size: .95rem; background: var(--surface-2); padding: var(--sp-4); border-radius: var(--radius-sm); max-height: 32rem; overflow: auto; }

/* Payments: verifying offered right beside the disabled Connect button. */
.verify-inline { margin-top: var(--sp-2); }
.verify-inline .verify-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 0; }

/* The live screen: a calm moment (CSS only, none under reduced motion), the link first, a QR, a preview. */
.live-hero { display: flex; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-4); padding: .75rem 0 0 .75rem; }
.live-hero h1 { margin: 0; font-size: 1.75rem; }
.live-hero .lead { margin: .25rem 0 0; }
.live-burst { position: relative; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--success-bg); color: var(--success-ink); font-size: 1.6rem; font-weight: 800; }
.live-burst::before, .live-burst::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--success-ink); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .live-hero.is-new .live-check { animation: live-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
  .live-hero.is-new .live-burst::before { animation: live-ring 1.1s ease-out .15s both; }
  .live-hero.is-new .live-burst::after { animation: live-ring 1.1s ease-out .45s both; }
  .live-hero.is-new h1 { animation: live-rise .5s ease-out .1s both; }
}
@keyframes live-pop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes live-ring { from { transform: scale(.8); opacity: .7; } to { transform: scale(1.35); opacity: 0; } }
@keyframes live-rise { from { transform: translateY(.4rem); opacity: 0; } to { transform: none; opacity: 1; } }
.live-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; margin-bottom: var(--sp-4); }
.copy-row-main { flex-wrap: nowrap; }
.copy-row-main .btn { white-space: nowrap; }
.copy-row-main input { min-width: 0; }
.live-qr { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }
.live-qr .qr-svg { flex: none; width: 8.5rem; height: auto; border-radius: var(--radius-sm); }
.preview-card { display: grid; gap: .35rem; text-decoration: none; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.preview-card:hover { border-color: var(--primary); }
.pc-bar { display: flex; gap: .3rem; align-items: center; padding: .4rem .6rem; background: var(--surface-3); font-size: var(--text-xs); color: var(--ink-muted); }
.pc-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line-strong); }
.pc-url { margin-left: .4rem; font-family: var(--mono); }
.pc-head { background: var(--brand); color: var(--brand-ink); font-weight: 700; padding: .75rem 1rem; margin-top: -.35rem; }
.pc-sub { padding: 0 1rem; font-size: var(--text-xs); color: var(--ink-muted); }
.pc-row { display: flex; justify-content: space-between; gap: var(--sp-2); padding: .4rem 1rem; border-top: 1px solid var(--line); font-size: var(--text-sm); }
.pc-price { font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.pc-cta { padding: .5rem 1rem .75rem; color: var(--primary); font-weight: 600; font-size: var(--text-sm); }
.add-site > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; color: var(--ink); min-height: 2.75rem; }
.add-site > summary .h4 { color: var(--primary); margin: 0; }
.next-links { padding-left: 1.2rem; }
@media (max-width: 52rem) {
  .live-grid { grid-template-columns: 1fr; }
  .copy-row-main { flex-wrap: wrap; }
  .copy-row-main input { flex-basis: 100%; }
}

/* First-run-1 audit: the link as text (no JavaScript needed to see it), phones' step menu folded to one line. */
.live-url { margin: 0 0 var(--sp-2); font-weight: 600; overflow-wrap: anywhere; }
.live-share, .live-preview, .live-grid > * { min-width: 0; }
.wizard-nav-phone { display: none; }
.wizard-nav-phone > summary { cursor: pointer; display: flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--primary); }
.wizard-nav-phone > summary::after { content: "\25B8"; margin-left: .4rem; }
.wizard-nav-phone[open] > summary::after { content: "\25BE"; }
.suggestion-list dt { font-weight: 650; margin-top: var(--sp-3); }
.suggestion-list dd { margin: .2rem 0 0; }
@media (max-width: 40rem) {  /* term above its description on a phone */
  .suggestion-list { display: block; }
  .suggestion-list dt, .suggestion-list dd { display: block; width: auto; margin-left: 0; float: none; }
}
@media (max-width: 52rem) {
  .wizard-nav-wide, .step-of { display: none; }  /* the folded menu's line already says "Step N of M" */
  .wizard-nav-phone { display: block; margin-bottom: var(--sp-2); }
  .live-hero { padding-left: .5rem; }
  .live-hero h1 { font-size: 1.5rem; }
  .live-qr { flex-wrap: wrap; }
}
/* The pricing mode is a fieldset; its legend names the group for screen readers only (a legend needs float to
   leave the fieldset's border box, so the usual visually-hidden class isn't enough on it). */
fieldset.checks.mode-switch { display: inline-flex; max-width: 100%; min-width: 0; margin: 0 0 var(--sp-2); padding: 2px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); }
fieldset.checks.mode-switch > legend.visually-hidden { float: left; position: static !important; width: 1px !important;
  height: 1px; margin: 0 !important; padding: 0; overflow: hidden; clip-path: inset(50%); }
/* Grid children may shrink below their content on phones (no sideways scroll on the prices step). */
.wizard > *, .rates-layout > * { min-width: 0; }
@media (max-width: 52rem) { .wizard { grid-template-columns: minmax(0, 1fr); } }

/* ---- design-v2-c: the overview's progress ring and one "N steps left" line; the spaces step's preview ---- */
.ob-progress { display: flex; align-items: center; gap: .875rem; margin: var(--sp-4) 0 var(--sp-3); }
.ob-progress .progress-line { margin: 0; display: block; }
.ob-left { display: block; font-size: var(--text-sm); color: var(--ink-muted); }
.step-rows-once .tag-done { background: none; color: var(--ink-subtle); font-weight: 450; }
.ob-ring { flex: none; width: 2.75rem; height: 2.75rem; transform: rotate(-90deg); }
.ob-ring circle { fill: none; stroke-width: 3.5; }
.ob-ring-track { stroke: var(--surface-3); }
.ob-ring-fill { stroke: var(--success-ink); stroke-linecap: round; }
@media (forced-colors: active) { .ob-ring-track { stroke: GrayText; } .ob-ring-fill { stroke: Highlight; } }
.step-rows-once .step-title { color: var(--ink); text-decoration: none; font-weight: 550; }
.step-rows-once .step-title:hover { text-decoration: underline; }
.step-rows-once .is-todo .step-title { color: var(--ink); }
.space-preview { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: .5rem; }
.space-preview li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .75rem; align-items: center; padding: .5rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.spv-photo { width: 3.5rem; height: 2.625rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); }
.spv-body { display: grid; min-width: 0; }
.spv-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spv-meta { font-size: var(--text-xs); color: var(--ink-subtle); }
/* The preview sits beside the rows only where both fit (the rows need about 40rem); below them otherwise, as a
   row of cards. */
.space-layout { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.space-layout > * { min-width: 0; }
.space-preview-side .space-preview { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
@media (min-width: 100rem) {
  .space-layout { grid-template-columns: minmax(0, 1fr) 18rem; }
  .space-preview-side { position: sticky; top: var(--sp-4); }
  .space-preview-side .space-preview { grid-template-columns: minmax(0, 1fr); }
}