/* Dwellio component kit — every value from the tokens; no raw hex, no raw px. */
html{scroll-behavior:smooth}
body{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
main{flex:1}
[hidden]{display:none !important}
.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:var(--space-20);height:var(--space-20);flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.icon-sm{width:var(--space-16);height:var(--space-16)}
.icon-lg{width:var(--space-32);height:var(--space-32)}

/* layout */
.container{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-20)}
.container-narrow{max-width:var(--container-md)}
.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}
.row-between{justify-content:space-between}
.grid{display:grid;gap:var(--grid-gap)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}.grid-auto{grid-template-columns:minmax(0,1fr)}}
.section{padding:var(--section-y-compact) 0}
.section-tight{padding:var(--space-40) 0}
.section-alt{background:var(--surface-page-alt)}
.section-head{display:flex;flex-direction:column;gap:var(--space-8);margin-bottom:var(--space-32)}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted)}
.lead{font:var(--type-body-lg);color:var(--text-muted);max-width:var(--measure-prose)}
.muted{color:var(--text-muted)}
.small{font:var(--type-body-sm)}
.caption{font:var(--type-caption);color:var(--text-muted)}
.page-title{display:flex;flex-direction:column;gap:var(--space-8);margin-bottom:var(--space-24)}
.page-title h1{font:var(--type-h2)}
.figure,.money,.num{font-variant-numeric:var(--numeric-tabular);font-feature-settings:"tnum" 1}
.money,.price{white-space:nowrap}
.price{font:var(--weight-bold) var(--text-xl)/1 var(--font-core);color:var(--text-heading)}
.price-lg{font:var(--weight-bold) var(--text-3xl)/1 var(--font-core)}
.price small,.price .per{font:var(--type-caption);color:var(--text-muted);margin-left:var(--space-4)}

/* surfaces */
.card{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-card);padding:var(--gutter-card);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:var(--space-16);min-width:0}
.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-brand{background:var(--surface-inverse);color:var(--text-on-inverse);border-color:transparent}
.card-brand h2,.card-brand h3,.card-brand .price{color:var(--text-on-inverse)}
.card-brand .muted,.card-brand .caption{color:var(--text-on-inverse-muted)}
.panel{background:var(--surface-sunken);border-radius:var(--radius-panel);padding:var(--gutter-card)}
.divider{border-top:var(--divider)}
.kpi{display:flex;flex-direction:column;gap:var(--space-6)}
.kpi-label{font:var(--type-label);color:var(--text-muted)}
.kpi-value{font:var(--weight-bold) var(--text-3xl)/1 var(--font-core);color:var(--text-heading);white-space:nowrap;font-variant-numeric:var(--numeric-tabular)}
.kpi-note{font:var(--type-caption);color:var(--text-muted)}

/* chips and badges */
.chip{display:inline-flex;align-items:center;gap:var(--space-6);padding:var(--space-4) var(--space-12);border-radius:var(--radius-badge);font:var(--type-label);border:var(--border-width-hairline) solid transparent;white-space:nowrap;line-height:1.3}
.chip-ok{background:var(--success-bg);color:var(--success-fg);border-color:var(--success-border)}
.chip-warn{background:var(--warning-bg);color:var(--warning-fg);border-color:var(--warning-border)}
.chip-danger{background:var(--danger-bg);color:var(--danger-fg);border-color:var(--danger-border)}
.chip-info{background:var(--info-bg);color:var(--info-fg);border-color:var(--info-border)}
.chip-neutral{background:var(--surface-sunken);color:var(--text-body);border-color:var(--border-subtle)}
.chip-brand{background:var(--surface-inverse);color:var(--text-on-inverse)}
.chip-promoted{background:var(--surface-highlight);color:var(--text-on-highlight);font-weight:var(--weight-semibold)}
.badge-list{display:flex;flex-wrap:wrap;gap:var(--space-8)}

/* 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;background:var(--surface-sunken);color:var(--text-heading)}
.btn:hover{background:var(--surface-soft)}
.btn:active{transform:scale(var(--press-scale))}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;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-accent{background:var(--surface-highlight);color:var(--text-on-highlight)}
.btn-accent:hover{background:var(--surface-highlight-hover)}
.btn-ghost{background:transparent;border-color:var(--border-default);color:var(--text-heading)}
.btn-ghost:hover{background:var(--surface-hover)}
.btn-link{background:transparent;color:var(--text-link);padding:0 var(--space-8);min-height:var(--tap-target-min)}
.btn-link:hover{color:var(--text-link-hover);background:transparent;text-decoration:underline}
.btn-danger{background:var(--danger-solid);color:var(--df-white)}
.btn-danger:hover{background:var(--rust-700)}
.btn-lg{min-height:var(--control-h-lg);padding:0 var(--control-pad-x-lg);font-size:var(--text-md)}
.btn-sm{min-height:var(--tap-target-min);padding:0 var(--control-pad-x-sm)}
.btn-icon{padding:0;width:var(--tap-target-min)}
.btn-block{width:100%}
.btn.busy{position:relative;color:transparent}
.btn.busy::after{content:"";position:absolute;width:var(--space-16);height:var(--space-16);border:2px solid currentColor;border-color:var(--text-on-brand) transparent var(--text-on-brand) transparent;border-radius:var(--radius-pill);animation:tmp-spin .8s linear infinite;color:var(--text-on-brand)}
.btn-ghost.busy::after,.btn.busy.btn-ghost::after{border-color:var(--text-heading) transparent var(--text-heading) transparent}
.btn-inverse{background:var(--df-white);color:var(--brand-primary-strong)}
.btn-inverse:hover{background:var(--teal-50)}

/* forms */
.field{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}
.field label,.field .label{font:var(--type-label);color:var(--text-heading)}
.field .hint{font:var(--type-caption);color:var(--text-muted)}
.field .error{font:var(--type-caption);color:var(--text-danger)}
.input,.select,.textarea{width:100%;min-height:var(--tap-target-min);padding:var(--space-8) var(--control-pad-x-md);border:var(--border-control);border-radius:var(--radius-input);background:var(--surface-card);color:var(--text-body);font:var(--type-body);transition:var(--transition-control)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--border-brand);box-shadow:var(--ring-focus);outline:none}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger-solid)}
.textarea{min-height:120px;resize:vertical}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--space-40)}
.check{display:flex;align-items:flex-start;gap:var(--space-12);font:var(--type-body-sm);min-height:var(--tap-target-min);cursor:pointer}
.check input{width:var(--space-20);height:var(--space-20);margin-top:var(--space-2);accent-color:var(--brand-primary);flex:none}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}
.form-grid .span-2{grid-column:span 2}
@media (max-width:640px){.form-grid{grid-template-columns:minmax(0,1fr)}.form-grid .span-2{grid-column:span 1}}
.form-summary{background:var(--danger-bg);border:var(--border-width-hairline) solid var(--danger-border);color:var(--danger-fg);border-radius:var(--radius-md);padding:var(--space-12) var(--space-16);font:var(--type-body-sm)}
.form-summary ul{margin:var(--space-6) 0 0;padding-left:var(--space-20)}
.option-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-8)}
.option{display:flex;align-items:center;justify-content:center;min-height:var(--tap-target-min);padding:var(--space-8) var(--space-12);border:var(--border-control);border-radius:var(--radius-control);cursor:pointer;font:var(--type-label);background:var(--surface-card);color:var(--text-body);text-align:center}
.option input{position:absolute;opacity:0;width:1px;height:1px}
.option:has(input:checked){background:var(--surface-selected);border-color:var(--border-brand);color:var(--text-heading);box-shadow:var(--ring-selected)}
.option:has(input:focus-visible){outline:2px solid var(--border-focus);outline-offset:2px}
.stars{display:inline-flex;gap:var(--space-4)}
::placeholder{color:var(--text-muted)}
.stars button{background:none;border:0;padding:0;width:var(--tap-target-min);height:var(--tap-target-min);cursor:pointer;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md)}
.stars button.on{color:var(--amber-400)}
.stars button:hover{color:var(--amber-400)}
.star-row{display:inline-flex;gap:var(--space-2);color:var(--amber-400)}
.star-row .icon{width:var(--space-16);height:var(--space-16)}
.star-row .off{color:var(--text-muted)}

/* notices */
.notice{display:flex;gap:var(--space-12);align-items:flex-start;padding:var(--space-12) var(--space-16);border-radius:var(--radius-md);border:var(--border-width-hairline) solid var(--info-border);background:var(--info-bg);color:var(--info-fg);font:var(--type-body-sm)}
.notice .icon{margin-top:var(--space-2)}
.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)}
.notice a{color:inherit;font-weight:var(--weight-semibold)}

/* tables */
.table-wrap{overflow-x:auto;border:var(--border-card);border-radius:var(--radius-card);background:var(--surface-card);-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:640px}
.table-wrap thead th{position:sticky;top:0;background:var(--surface-sunken);z-index:var(--z-raised);white-space:nowrap}
.table-wrap th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-4);font:inherit;color:inherit;min-height:var(--space-32)}
.table-wrap th button:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.table-wrap tbody tr:hover{background:var(--surface-hover)}
.table-wrap td.num,.table-wrap th.num{text-align:right}
.table-tools{display:flex;gap:var(--space-12);align-items:center;flex-wrap:wrap;justify-content:space-between;margin-bottom:var(--space-12)}
.table-tools .input{max-width:320px}
.pager{display:flex;align-items:center;gap:var(--space-8);justify-content:flex-end;padding:var(--space-12) var(--space-16);border-top:var(--divider);font:var(--type-body-sm);color:var(--text-muted)}

/* states */
.skeleton{display:flex;flex-direction:column;gap:var(--space-12)}
.skeleton .bone{height:var(--space-16);border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--skeleton-a),var(--skeleton-b),var(--skeleton-a));background-size:200% 100%;animation:tmp-shimmer 1.4s ease-in-out infinite}
.skeleton .bone.tall{height:var(--space-96)}
.skeleton .bone.w-60{width:60%}.skeleton .bone.w-40{width:40%}.skeleton .bone.w-80{width:80%}
@keyframes tmp-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty,.errorstate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-12);padding:var(--space-40) var(--space-24);border:var(--border-width-hairline) dashed var(--border-default);border-radius:var(--radius-card);color:var(--text-muted)}
.empty .icon-lg,.errorstate .icon-lg{color:var(--text-muted)}
.errorstate{border-style:solid;border-color:var(--danger-border);color:var(--danger-fg);background:var(--danger-bg)}

/* toasts */
.toasts{position:fixed;left:50%;bottom:var(--space-24);transform:translateX(-50%);display:flex;flex-direction:column;gap:var(--space-8);z-index:var(--z-toast);width:min(92vw,480px)}
.toast{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);border-radius:var(--radius-panel);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 .icon{flex:none}
.toast-msg{flex:1;font:var(--type-body-sm);color:inherit}
.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 .btn{color:var(--text-on-inverse);background:transparent}
.toast .btn:hover{background:var(--surface-inverse-hover)}

/* dialog */
dialog.dlg{border:0;border-radius:var(--radius-dialog);padding:0;background:var(--surface-card);color:var(--text-body);box-shadow:var(--shadow-xl);width:min(94vw,560px);max-height:90vh}
dialog.dlg::backdrop{background:var(--overlay-scrim);backdrop-filter:var(--blur-scrim)}
.dlg-body{padding:var(--gutter-card);display:flex;flex-direction:column;gap:var(--space-16);overflow:auto;max-height:90vh}
.dlg-actions{display:flex;justify-content:flex-end;gap:var(--space-8);flex-wrap:wrap}

/* misc */
.tabs{display:flex;gap:var(--space-4);border-bottom:var(--divider);overflow-x:auto}
.tabs button{all:unset;cursor:pointer;padding:var(--space-12) var(--space-16);min-height:var(--tap-target-min);font:var(--type-label);color:var(--text-muted);border-bottom:var(--border-width-thick) solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--text-heading);border-bottom-color:var(--brand-primary)}
.tabs button:focus-visible{outline:2px solid var(--border-focus);outline-offset:-2px}
.steps{display:flex;gap:var(--space-8);flex-wrap:wrap}
.step{display:flex;align-items:center;gap:var(--space-8);font:var(--type-label);color:var(--text-muted)}
.step .n{width:var(--space-24);height:var(--space-24);border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--surface-sunken);font:var(--type-caption);color:var(--text-heading)}
.step.done .n{background:var(--surface-highlight);color:var(--text-on-highlight)}
.step.current{color:var(--text-heading)}
.progress{height:var(--space-8);background:var(--surface-sunken);border-radius:var(--radius-pill);overflow:hidden}
.progress > span{display:block;height:100%;background:var(--surface-brand);border-radius:var(--radius-pill);transition:width var(--duration-slow) var(--ease-standard)}
.progress.ok > span{background:var(--glow-500)}
.score-ring{width:var(--space-96);height:var(--space-96)}
.timeline{display:flex;flex-direction:column;gap:var(--space-12);padding-left:var(--space-16);border-left:var(--border-width-thick) solid var(--border-subtle)}
.timeline li{list-style:none;position:relative;font:var(--type-body-sm)}
.timeline li::before{content:"";position:absolute;left:calc(-1 * var(--space-24) + 1px);top:var(--space-6);width:var(--space-8);height:var(--space-8);border-radius:var(--radius-pill);background:var(--brand-primary)}
.dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-6) var(--space-16);font:var(--type-body-sm)}
.dl dt{color:var(--text-muted)}
.dl dd{margin:0;color:var(--text-body)}
.photo-thumb{width:var(--space-64);height:var(--space-64);object-fit:cover;border-radius:var(--radius-md);border:var(--border-card)}
.sealed{display:flex;align-items:center;gap:var(--space-8);padding:var(--space-12);background:var(--surface-sunken);border-radius:var(--radius-md);color:var(--text-muted);font:var(--type-body-sm)}
.text-ok{color:var(--text-success)}
.text-warn{color:var(--text-warning)}
.text-danger{color:var(--text-danger)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mono{font-family:var(--font-mono);font-size:var(--text-xs)}