/* Dwellio — components on top of the design system (styles.css). Every value is a token. */
:root{
  --text-subtle:var(--teal-500);
  --success-fg:var(--glow-800);
  --surface-brand:var(--brand-primary);
  --surface-brand-hover:var(--brand-primary-hover);
  --border-brand:var(--brand-primary);
  --text-link:var(--teal-700);
  --nav-h:var(--site-header-h);
}
[data-theme="dark"]{
  --surface-page:var(--brand-charcoal-deep);
  --surface-page-alt:var(--brand-navy-deep);
  --surface-card:var(--brand-charcoal);
  --surface-sunken:var(--brand-navy-deep);
  --surface-soft:var(--brand-charcoal-soft);
  --surface-hover:var(--brand-charcoal-soft);
  --surface-selected:var(--brand-charcoal-soft);
  --surface-disabled:var(--brand-charcoal-soft);
  --surface-inverse:var(--brand-navy-deep);
  --surface-inverse-alt:var(--brand-charcoal);
  --surface-brand:var(--teal-500);
  --surface-brand-hover:var(--teal-600);
  --text-heading:#F3F6FA;
  --text-body:#D5DCE6;
  --text-muted:#A9B4C4;
  --text-subtle:#A9B4C4;
  --text-disabled:#6C778A;
  --text-link:#9BD3D6;
  --text-link-hover:#D1E0E0;
  --text-success:var(--glow-300);
  --text-warning:#F3C46B;
  --text-danger:#F2A59B;
  --border-subtle:#2B3546;
  --border-default:#3A465C;
  --border-strong:#5B6A85;
  --success-bg:rgba(59,237,139,.14);--success-border:rgba(59,237,139,.35);--success-fg:var(--glow-300);
  --warning-bg:rgba(217,150,43,.16);--warning-border:rgba(217,150,43,.4);--warning-fg:#F3C46B;
  --danger-bg:rgba(194,75,63,.18);--danger-border:rgba(194,75,63,.45);--danger-fg:#F2A59B;
  --info-bg:rgba(147,175,176,.14);--info-border:rgba(147,175,176,.35);--info-fg:#B4C9C9;
  --overlay-glass:rgba(20,26,36,.82);
  --chart-grid:#2B3546;
  --shadow-md:0 2px 4px rgba(0,0,0,.3),0 6px 16px rgba(0,0,0,.35);
  --shadow-lg:0 4px 8px rgba(0,0,0,.35),0 16px 40px rgba(0,0,0,.45);
  color-scheme:dark;
}
html{scroll-behavior:smooth}
body{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.icon-sm{width:14px;height:14px}.icon-lg{width:28px;height:28px}
.container{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-20)}
@media(min-width:768px){.container{padding:0 var(--gutter-page)}}
.stack{display:flex;flex-direction:column;gap:var(--stack)}
.stack-tight{gap:var(--stack-tight)}.stack-loose{gap:var(--stack-loose)}
.row{display:flex;align-items:center;gap:var(--inline-gap);flex-wrap:wrap}
.between{justify-content:space-between}
.muted{color:var(--text-muted)}
.small{font:var(--type-body-sm)}
.caption{font:var(--type-caption);color:var(--text-muted)}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted)}
.money{white-space:nowrap;font-variant-numeric:var(--numeric-tabular);font-feature-settings:"tnum" 1;font-weight:var(--weight-semibold);color:var(--text-heading)}
.num{font-variant-numeric:var(--numeric-tabular);text-align:right;white-space:nowrap}
.grid{display:grid;gap:var(--grid-gap)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}

/* ── site header ── */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--overlay-glass);backdrop-filter:var(--blur-glass);border-bottom:var(--border-hairline)}
.site-header .container{height:var(--nav-h);display:flex;align-items:center;gap:var(--space-16)}
.brand{display:flex;align-items:center;gap:var(--space-12);text-decoration:none;color:var(--text-heading);font:var(--type-wordmark);letter-spacing:var(--tracking-tight)}
.brand img{height:32px;width:auto}
.site-footer .brand img,.admin-sidebar .brand img,[data-theme="dark"] .brand img{filter:brightness(0) invert(1)}
.nav{display:none;align-items:center;gap:var(--space-4);margin-left:auto}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap-target-min);padding:0 var(--space-12);border-radius:var(--radius-control);color:var(--text-body);text-decoration:none;font:var(--type-label)}
.nav a:hover{background:var(--surface-hover);color:var(--text-heading)}
.nav a[aria-current="page"]{color:var(--text-heading);box-shadow:inset 0 -2px 0 var(--df-meadow-glow)}
.header-actions{display:flex;align-items:center;gap:var(--space-8);margin-left:auto}
@media(min-width:960px){.nav{display:flex}.header-actions{margin-left:0}.nav-toggle{display:none}}
.mobile-nav{display:none;flex-direction:column;padding:var(--space-8) var(--space-20) var(--space-16);border-bottom:var(--border-hairline);background:var(--surface-card)}
.mobile-nav[data-open="true"]{display:flex}
.mobile-nav a{display:flex;align-items:center;min-height:var(--tap-target-min);padding:0 var(--space-12);border-radius:var(--radius-control);color:var(--text-body);text-decoration:none;font:var(--type-label)}
.mobile-nav a[aria-current="page"]{background:var(--surface-selected);color:var(--text-heading)}
@media(min-width:960px){.mobile-nav{display:none !important}}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:var(--tap-target-min);padding:0 var(--control-pad-x-md);border-radius:var(--radius-control);border:var(--border-width-hairline) solid transparent;font:var(--type-button);cursor:pointer;text-decoration:none;transition:var(--transition-control);white-space:nowrap}
.btn:hover{transform:var(--lift-hover)}
.btn:active{transform:scale(var(--press-scale))}
.btn[disabled],.btn[aria-busy="true"]{opacity:.6;cursor:not-allowed;transform:none}
.btn-primary{background:var(--surface-brand);color:var(--text-on-brand)}
.btn-primary:hover{background:var(--surface-brand-hover)}
.btn-highlight{background:var(--surface-highlight);color:var(--text-on-highlight)}
.btn-highlight:hover{background:var(--surface-highlight-hover)}
.btn-ghost{background:transparent;color:var(--text-body);border-color:var(--border-default)}
.btn-ghost:hover{background:var(--surface-hover);color:var(--text-heading)}
.btn-danger{background:var(--danger-bg);color:var(--danger-fg);border-color:var(--danger-border)}
.btn-link{background:none;border:0;color:var(--text-link);padding:0 var(--space-8);min-height:var(--tap-target-min)}
.btn-icon{width:var(--tap-target-min);padding:0}
.btn-lg{min-height:var(--control-h-lg);padding:0 var(--control-pad-x-lg);font-size:var(--text-md)}
.btn-sm{min-height:36px;padding:0 var(--control-pad-x-sm)}
.btn-block{width:100%}

/* ── cards ── */
.card{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-card);padding:var(--gutter-card);box-shadow:var(--shadow-xs)}
.card-compact{padding:var(--gutter-card-compact)}
.card-hover{transition:var(--transition-surface)}
.card-hover:hover{box-shadow:var(--shadow-md);transform:var(--lift-hover)}
.card h3{margin-bottom:var(--space-4)}
.sunken{background:var(--surface-sunken);border-radius:var(--radius-panel);padding:var(--gutter-card)}

/* ── chips / badges ── */
.chip{display:inline-flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-8);border-radius:var(--radius-badge);border:var(--border-width-hairline) solid var(--border-default);font:var(--type-eyebrow);letter-spacing:var(--tracking-wide);text-transform:uppercase;white-space:nowrap;color:var(--text-body);background:var(--surface-sunken)}
.chip-ok{background:var(--success-bg);border-color:var(--success-border);color:var(--success-fg)}
.chip-warn{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-fg)}
.chip-danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-fg)}
.chip-info{background:var(--info-bg);border-color:var(--info-border);color:var(--info-fg)}
.chip-promoted{background:var(--surface-highlight);border-color:var(--surface-highlight);color:var(--text-on-highlight)}

/* ── forms ── */
.field{display:flex;flex-direction:column;gap:var(--space-6)}
.field label,.legend{font:var(--type-label);color:var(--text-heading)}
.input,select.input,textarea.input{min-height:var(--tap-target-min);padding:var(--space-8) var(--space-12);border:var(--border-control);border-radius:var(--radius-input);background:var(--surface-card);color:var(--text-body);width:100%;transition:var(--transition-control)}
.input:focus{border-color:var(--border-focus);box-shadow:var(--ring-focus);outline:none}
textarea.input{min-height:96px;resize:vertical}
.input[aria-invalid="true"]{border-color:var(--danger-solid);box-shadow:var(--ring-danger)}
.hint{font:var(--type-caption);color:var(--text-muted)}
.error{font:var(--type-caption);color:var(--text-danger)}
.check{display:flex;align-items:flex-start;gap:var(--space-12);min-height:var(--tap-target-min);cursor:pointer}
.check input{width:22px;height:22px;margin:var(--space-2) 0 0;accent-color:var(--df-dark-teal);flex:none}
.rating{display:flex;gap:var(--space-4)}
.rating button{width:var(--tap-target-min);height:var(--tap-target-min);border-radius:var(--radius-control);border:var(--border-control);background:var(--surface-card);color:var(--text-muted);cursor:pointer}
.rating button[aria-pressed="true"]{background:var(--surface-brand);color:var(--text-on-brand);border-color:var(--surface-brand)}
.form-summary{padding:var(--space-12) var(--space-16);border-radius:var(--radius-card);background:var(--danger-bg);border:var(--border-width-hairline) solid var(--danger-border);color:var(--danger-fg);font:var(--type-body-sm)}
.notice{display:flex;gap:var(--space-12);align-items:flex-start;padding:var(--space-12) var(--space-16);border-radius:var(--radius-card);border:var(--border-width-hairline) solid var(--info-border);background:var(--info-bg);color:var(--info-fg);font:var(--type-body-sm)}
.notice-ok{background:var(--success-bg);border-color:var(--success-border);color:var(--success-fg)}
.notice-warn{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-fg)}
.notice-danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-fg)}

/* ── tables ── */
.table-wrap{overflow-x:auto;border:var(--border-card);border-radius:var(--radius-card);background:var(--surface-card)}
.table-wrap table{min-width:560px}
.table-wrap thead th{position:sticky;top:0;background:var(--surface-sunken);z-index:var(--z-raised)}
.table-wrap th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-4);min-height:var(--tap-target-min);font:var(--type-label);color:var(--text-muted)}
.table-wrap tbody tr:hover{background:var(--surface-hover)}
.table-toolbar{display:flex;gap:var(--space-12);align-items:center;flex-wrap:wrap;padding:var(--space-12);border-bottom:var(--divider)}
.table-toolbar .input{max-width:320px}
.pager{display:flex;align-items:center;gap:var(--space-8);padding:var(--space-12);justify-content:flex-end;font:var(--type-body-sm);color:var(--text-muted)}

/* ── states ── */
.skeleton{display:flex;flex-direction:column;gap:var(--space-12)}
.skeleton span{display:block;height:16px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--surface-sunken),var(--surface-soft),var(--surface-sunken));background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-12);padding:var(--space-40) var(--space-20);color:var(--text-muted)}
.state .icon-lg{color:var(--text-subtle)}

/* ── toast / dialog ── */
.toasts{position:fixed;left:var(--space-16);right:var(--space-16);bottom:var(--space-16);display:flex;flex-direction:column;gap:var(--space-8);z-index:var(--z-toast);pointer-events:none}
@media(min-width:640px){.toasts{left:auto;width:380px}}
.toast{pointer-events:auto;display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);border-radius:var(--radius-card);background:var(--surface-inverse);color:var(--text-on-inverse);box-shadow:var(--shadow-lg);border-left:var(--border-width-accent) solid var(--info-solid);animation:tmp-rise-in var(--duration-base) var(--ease-out)}
.toast-ok{border-left-color:var(--glow-400)}.toast-warn{border-left-color:var(--amber-400)}.toast-danger{border-left-color:var(--rust-400)}
.toast-msg{flex:1;font:var(--type-body-sm)}
.toast .btn-ghost{color:var(--text-on-inverse);border-color:var(--border-inverse)}
.toast .btn-link{color:var(--glow-300)}
.dialog{border:0;padding:0;border-radius:var(--radius-dialog);background:var(--surface-card);color:var(--text-body);box-shadow:var(--shadow-xl);width:min(92vw,520px)}
.dialog::backdrop{background:var(--overlay-scrim);backdrop-filter:var(--blur-scrim)}
.dialog-body{padding:var(--gutter-card);display:flex;flex-direction:column;gap:var(--space-16)}
.dialog-actions{display:flex;gap:var(--space-8);justify-content:flex-end;flex-wrap:wrap}

/* ── hero and sections ── */
.hero{position:relative;color:var(--df-white);background:var(--brand-navy-deep) url('/assets/hero-generated.webp') center/cover no-repeat;min-height:min(78vh,720px);display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,23,41,.92) 0%,rgba(15,23,41,.78) 45%,rgba(15,23,41,.42) 100%)}
.hero .container{position:relative;padding-top:var(--space-64);padding-bottom:var(--space-64)}
.hero h1{color:var(--df-white);font-size:clamp(3rem,6vw,4.5rem);line-height:var(--leading-tight);letter-spacing:var(--tracking-tightest);max-width:14ch}
.hero p{color:var(--teal-100);font:var(--type-body-lg);max-width:var(--measure-narrow)}
.hero .eyebrow{color:var(--glow-300)}
.hero-search{background:var(--surface-card);color:var(--text-body);border-radius:var(--radius-panel);padding:var(--space-16);display:grid;gap:var(--space-12);grid-template-columns:1fr;box-shadow:var(--shadow-xl);margin-top:var(--space-32);max-width:920px}
@media(min-width:768px){.hero-search{grid-template-columns:2fr 1fr 1fr auto;align-items:end}}
.section{padding:var(--section-y-compact) 0}
@media(min-width:768px){.section{padding:var(--section-y) 0}}
.section-alt{background:var(--surface-page-alt)}
.section-head{display:flex;flex-direction:column;gap:var(--space-8);margin-bottom:var(--space-32);max-width:var(--measure-prose)}
.stat{display:flex;flex-direction:column;gap:var(--space-4)}
.stat strong{font:var(--type-h2);color:var(--text-heading);white-space:nowrap}
.steps-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-16);counter-reset:step}
.steps-list li{display:flex;gap:var(--space-16);align-items:flex-start;counter-increment:step}
.steps-list li::before{content:counter(step);flex:none;width:40px;height:40px;border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--surface-brand);color:var(--text-on-brand);font:var(--type-label)}

/* ── listing cards ── */
.listing-card{display:flex;flex-direction:column;gap:var(--space-12);text-decoration:none;color:inherit;height:100%}
.listing-media{aspect-ratio:16/10;border-radius:var(--radius-media);background:var(--surface-inverse) url('/assets/hero-generated.webp') center/cover;position:relative;overflow:hidden}
.listing-media .chip{position:absolute;top:var(--space-12);left:var(--space-12)}
.listing-card .price-line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-12)}
.listing-card .price-line .money{font-size:var(--text-xl)}
.listing-card h3{font:var(--type-h3)}
.facts{display:flex;gap:var(--space-12);flex-wrap:wrap;color:var(--text-muted);font:var(--type-body-sm)}

/* ── steps (flow) ── */
.steps{list-style:none;display:flex;gap:var(--space-8);padding:0;margin:0;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:var(--space-8);padding:var(--space-8) var(--space-12);border-radius:var(--radius-pill);border:var(--border-control);font:var(--type-label);color:var(--text-muted)}
.steps li[aria-current="step"]{border-color:var(--surface-brand);color:var(--text-heading);background:var(--surface-selected)}
.steps li[data-done="true"]{color:var(--success-fg);border-color:var(--success-border);background:var(--success-bg)}

/* ── ledger ── */
.ledger{display:grid;gap:var(--space-8)}
.ledger-row{display:grid;grid-template-columns:1fr auto;gap:var(--space-8) var(--space-16);align-items:center;padding:var(--space-12) var(--space-16);border:var(--border-card);border-radius:var(--radius-card);background:var(--surface-card)}
@media(min-width:640px){.ledger-row{grid-template-columns:110px 1fr auto auto}}
.kpis{display:grid;gap:var(--space-16);grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.kpi{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-card);padding:var(--space-16);display:flex;flex-direction:column;gap:var(--space-4)}
.kpi strong{font:var(--type-h2);font-size:var(--text-2xl);color:var(--text-heading);white-space:nowrap;font-variant-numeric:var(--numeric-tabular);overflow:hidden;text-overflow:ellipsis}
.stat strong{font-size:var(--text-2xl);overflow:hidden;text-overflow:ellipsis}
.score-ring{display:grid;place-items:center;width:96px;height:96px;border-radius:var(--radius-pill);background:conic-gradient(var(--df-meadow-glow) calc(var(--pct)*1%),var(--surface-soft) 0);position:relative;flex:none}
.score-ring::before{content:"";position:absolute;inset:8px;border-radius:inherit;background:var(--surface-card)}
.score-ring span{position:relative;font:var(--type-h3);color:var(--text-heading)}
.room{display:grid;gap:var(--space-12);padding:var(--space-16);border:var(--border-card);border-radius:var(--radius-card);background:var(--surface-card)}
.photos{display:flex;gap:var(--space-8);flex-wrap:wrap}
.photos img{width:88px;height:88px;object-fit:cover;border-radius:var(--radius-media);border:var(--border-card)}
.seg{display:inline-flex;border:var(--border-control);border-radius:var(--radius-control);overflow:hidden}
.seg button{all:unset;cursor:pointer;min-height:var(--tap-target-min);padding:0 var(--space-16);font:var(--type-label);color:var(--text-muted);background:var(--surface-card)}
.seg button[aria-pressed="true"]{background:var(--surface-brand);color:var(--text-on-brand)}

/* ── footer ── */
.site-footer{margin-top:auto;background:var(--surface-inverse);color:var(--text-on-inverse-muted);padding:var(--space-48) 0 var(--space-32)}
.site-footer h4{color:var(--text-on-inverse)}
.site-footer a{color:var(--text-on-inverse)}
.site-footer .brand{color:var(--text-on-inverse)}
.trust-marks{display:flex;flex-wrap:wrap;gap:var(--space-16);font:var(--type-body-sm)}
.trust-marks span{display:inline-flex;align-items:center;gap:var(--space-8)}
.foot-bottom{margin-top:var(--space-32);padding-top:var(--space-16);border-top:var(--border-width-hairline) solid var(--border-inverse);font:var(--type-caption);display:flex;justify-content:space-between;gap:var(--space-12);flex-wrap:wrap}
.pwa-banner{display:none;gap:var(--space-12);align-items:center;justify-content:space-between;padding:var(--space-12) var(--space-20);background:var(--surface-soft);color:var(--text-heading);font:var(--type-body-sm)}
.pwa-banner[data-show="true"]{display:flex}
main{flex:1}
.page{padding:var(--space-32) 0 var(--space-64)}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-16);flex-wrap:wrap;margin-bottom:var(--space-24)}
.page-head h1{font-size:var(--text-4xl)}
@media(max-width:480px){.page-head h1{font-size:var(--text-3xl)}}
.two-col{display:grid;gap:var(--space-24);grid-template-columns:1fr}
@media(min-width:960px){.two-col{grid-template-columns:2fr 1fr;align-items:start}}
.sticky-aside{position:sticky;top:calc(var(--nav-h) + var(--space-16))}
pre.terms{white-space:pre-wrap;font:var(--type-body-sm);font-family:var(--font-core);background:var(--surface-sunken);padding:var(--space-16);border-radius:var(--radius-card);max-height:360px;overflow:auto;color:var(--text-body)}
.divider{border-top:var(--divider)}