/* Hallmark · macrostructure: Workbench · tone: utilitarian · audience: Thai agents 35+ · use: list and manage property ads · theme: Cobalt (cool-light / grotesk-sans / cool accent) · nav: N13 · footer: Ft4 · contrast: pass (40–41) · slop: pass (42–49) · mobile: pass (34, 49, 50–57) */
@import url('tokens.css');
*{box-sizing:border-box}html,body{margin:0;min-width:0;overflow-x:clip;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:16px;line-height:1.6}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.skip{position:absolute;inset-inline-start:var(--space-md);inset-block-start:var(--space-md);transform:translateY(-200%);background:var(--color-graphite);color:var(--color-on-dark);padding:var(--space-sm);z-index:var(--z-toast)}.skip:focus{transform:none}.nav{position:sticky;top:0;z-index:var(--z-sticky);min-height:4.5rem;display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) clamp(var(--space-md),4vw,var(--space-2xl));background:var(--color-paper);border-bottom:1px solid var(--color-rule)}.brand{font:600 var(--text-lg)/1 var(--font-display);letter-spacing:-.03em;color:var(--color-ink);text-decoration:none;white-space:nowrap}.brand span{color:var(--color-accent)}.search-pill{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);min-height:2.75rem;max-width:34rem;flex:1;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding-inline:var(--space-md);color:var(--color-muted);text-align:left}.search-pill kbd,.mono{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em}.search-pill kbd{border:1px solid var(--color-rule);padding-inline:var(--space-xs);white-space:nowrap}.nav-actions{display:flex;gap:var(--space-sm);align-items:center}.text-button,.back{background:transparent;border:0;color:var(--color-ink);padding:var(--space-sm);white-space:nowrap}.button{min-height:2.75rem;border:1px solid var(--color-ink);border-radius:var(--radius-sm);padding:0 var(--space-md);font-weight:700;white-space:nowrap;transition:transform var(--dur-micro) var(--ease-out),background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out)}.button:active{transform:translateY(1px)}.primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}.outline{background:transparent;color:var(--color-ink);border-color:var(--color-rule)}.light{background:var(--color-on-dark);border-color:var(--color-on-dark);color:var(--color-graphite)}.full{width:100%}.auth-strip{display:flex;justify-content:space-between;gap:var(--space-md);padding:var(--space-md) clamp(var(--space-md),4vw,var(--space-2xl));background:var(--color-paper-2);border-bottom:1px solid var(--color-rule)}.auth-strip div{display:grid;gap:var(--space-3xs)}.auth-strip span,.helper,small{color:var(--color-muted);font-size:var(--text-sm)}main{max-width:92rem;margin-inline:auto}.view{display:none}.view.is-active{display:block}.intro{display:grid;gap:var(--space-xl);padding:var(--space-2xl) clamp(var(--space-md),4vw,var(--space-2xl));grid-template-columns:minmax(0,1fr)}.intro p:not(.mono){max-width:54ch;color:var(--color-ink-2);font-size:var(--text-md)}.mono{margin:0;color:var(--color-muted);text-transform:uppercase}/* Thai: no negative tracking, and a taller line so upper vowels and tone marks never touch the line above. */
h1,h2,h3{font-family:var(--font-display);font-style:normal;letter-spacing:0;line-height:1.3;margin:0;overflow-wrap:anywhere;min-width:0}h1{font-size:var(--text-display)}h2{font-size:var(--text-xl)}.activity{border:1px solid var(--color-rule);padding:var(--space-lg);align-self:end;display:grid;gap:var(--space-xs)}.activity strong{font-family:var(--font-display);font-size:var(--text-lg)}.workspace-grid{display:grid;gap:var(--space-lg);padding:0 clamp(var(--space-md),4vw,var(--space-2xl)) var(--space-3xl);grid-template-columns:minmax(0,1fr)}.panel{border:1px solid var(--color-rule);background:var(--color-paper)}.panel-head{display:flex;gap:var(--space-md);justify-content:space-between;align-items:start;padding:var(--space-lg);border-bottom:1px solid var(--color-rule)}.panel-head p{margin:var(--space-xs) 0 0;color:var(--color-muted)}.filters{display:grid;gap:var(--space-sm);padding:var(--space-md);background:var(--color-paper-2);grid-template-columns:minmax(0,1fr)}label{display:grid;gap:var(--space-xs);font-weight:600}input,textarea,select{width:100%;min-height:2.75rem;border:1px solid var(--color-rule);outline:2px solid transparent;outline-offset:1px;border-radius:var(--radius-sm);background:var(--color-paper);color:var(--color-ink);padding:var(--space-sm);transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out)}textarea{min-height:8rem;resize:vertical}input:hover,textarea:hover,select:hover{background:var(--color-paper-2)}input:disabled{opacity:.55;cursor:not-allowed}.listing-list{display:grid}.listing{display:grid;gap:var(--space-sm);padding:var(--space-lg);border-top:1px solid var(--color-rule)}.listing:first-child{border-top:0}.listing-top{display:flex;gap:var(--space-sm);justify-content:space-between;align-items:start}.listing h3{font-size:var(--text-md)}.listing p{margin:0;color:var(--color-muted)}.status{font:500 var(--text-xs)/1 var(--font-mono);padding:var(--space-xs);border:1px solid var(--color-rule);white-space:nowrap}.status.published{color:var(--color-success);border-color:var(--color-success)}.status.frozen{color:var(--color-error);border-color:var(--color-error)}.listing-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}.listing-actions button{background:transparent;border:0;color:var(--color-accent);padding:var(--space-xs);font-weight:700}.side-panel{padding:var(--space-lg);display:grid;gap:var(--space-md);height:max-content}.metric{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--color-rule);padding-bottom:var(--space-sm)}.metric strong{font:600 var(--text-xl)/1 var(--font-display);font-variant-numeric:tabular-nums}.notice{padding:var(--space-md);background:var(--color-paper-2);border:1px solid var(--color-rule)}.notice p{margin-bottom:0;font-size:var(--text-sm)}.dark-band{background:var(--color-graphite);color:var(--color-on-dark);padding:var(--space-2xl) clamp(var(--space-md),4vw,var(--space-2xl));display:grid;gap:var(--space-xl);align-items:end}.dark-band .mono{color:var(--color-paper-3)}.dark-band p:not(.mono){color:var(--color-paper-3);max-width:55ch}.listing-form{border:1px solid var(--color-rule)}fieldset{border:0;border-top:1px solid var(--color-rule);padding:var(--space-lg);margin:0;display:grid;gap:var(--space-md)}fieldset:first-child{border-top:0}legend{font:600 var(--text-lg)/1.2 var(--font-display);padding:0}.choice-row{display:flex;gap:var(--space-sm);flex-wrap:wrap}.two-col{display:grid;gap:var(--space-md);grid-template-columns:minmax(0,1fr)}.icon-action{width:2.75rem;min-height:2.75rem;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-sm);color:var(--color-ink)}.package-grid{display:grid;gap:var(--space-sm);grid-template-columns:minmax(0,1fr)}.birthday-note{margin:0;color:var(--color-accent);font-size:var(--text-sm);font-weight:600}dialog{border:0;padding:0;background:transparent;max-width:min(34rem,calc(100% - 2rem));width:100%}dialog::backdrop{background:var(--color-graphite)}.modal{position:relative;background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-rule);padding:var(--space-xl);display:grid;gap:var(--space-md)}.modal-close{position:absolute;inset-inline-end:var(--space-sm);inset-block-start:var(--space-sm);width:2.75rem;min-height:2.75rem;border:0;background:transparent;font-size:var(--text-xl);color:var(--color-ink)}.auth-method{display:grid;gap:var(--space-xs);padding:var(--space-md);background:var(--color-paper-2);border:1px solid var(--color-rule);text-align:left;color:var(--color-ink)}.auth-method span{color:var(--color-muted);font-size:var(--text-sm)}#otp-area{display:grid;gap:var(--space-sm)}.counter-grid{display:grid;gap:var(--space-sm);grid-template-columns:repeat(3,minmax(0,1fr))}.counter-grid div{border:1px solid var(--color-rule);padding:var(--space-sm);display:grid;gap:var(--space-xs)}.counter-grid strong{font:600 var(--text-xl)/1 var(--font-display);font-variant-numeric:tabular-nums}.payment-result{padding:var(--space-md);border:1px dashed var(--color-accent);display:grid;gap:var(--space-xs);color:var(--color-accent)}#toast{position:fixed;inset-inline-end:var(--space-md);inset-block-end:var(--space-md);z-index:var(--z-toast);background:var(--color-graphite);color:var(--color-on-dark);padding:var(--space-md);transform:translateY(160%);transition:transform var(--dur-long) var(--ease-out);max-width:min(26rem,calc(100% - 2rem))}#toast.is-visible{transform:none}@media (min-width:40rem){.intro{grid-template-columns:minmax(0,1.5fr) minmax(16rem,.6fr)}.filters{grid-template-columns:minmax(0,1fr) minmax(10rem,.4fr)}.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}.package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dark-band{grid-template-columns:minmax(0,1fr) auto}}@media (min-width:60rem){.workspace-grid{grid-template-columns:minmax(0,1.5fr) minmax(18rem,.5fr)}}@media (max-width:39.99rem){.nav{gap:var(--space-xs)}.nav .text-button{display:none}.search-pill{min-width:0}.search-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-pill kbd{display:none}.auth-strip{align-items:end;flex-direction:column}.auth-strip .button{width:100%}.panel-head{flex-direction:column}.panel-head .button{width:100%}}@media (hover:hover) and (pointer:fine){.button:hover{transform:translateY(-1px)}.search-pill:hover,.photo-item:hover,.tile:hover,.chip-check:hover,.chip:hover{border-color:var(--color-accent)}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:150ms!important;transition-duration:150ms!important}}
/* Amenity picker: compact scan-and-select workflow for agents. */
.preset-row{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.preset{min-height:2.75rem;padding-inline:var(--space-md);background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-sm);color:var(--color-ink);font-weight:700;white-space:nowrap}.amenity-summary{display:block;padding:var(--space-sm) var(--space-md);background:var(--color-paper-2);border:1px solid var(--color-rule);color:var(--color-ink-2);font-size:var(--text-sm)}.amenity-picker{display:grid;gap:var(--space-sm)}.amenity-group{display:grid;gap:var(--space-sm);padding:var(--space-md);border:1px solid var(--color-rule)}.amenity-group h2{font-size:var(--text-md)}.amenity-group h2 span{display:block;margin-top:var(--space-3xs);font:400 var(--text-sm)/1.4 var(--font-body);color:var(--color-muted)}.amenity-options{display:flex;flex-wrap:wrap;gap:var(--space-xs)}@media (hover:hover) and (pointer:fine){.preset:hover{border-color:var(--color-accent);color:var(--color-accent)}}
/* Public home: search-first, then browsing, before agent-only tools. */
.home-filter-row{display:grid;gap:var(--space-md);grid-template-columns:minmax(0,1fr)}.home-listings{padding:var(--space-2xl) clamp(var(--space-md),5vw,var(--space-3xl))}.home-listings-head{display:flex;justify-content:space-between;gap:var(--space-md);align-items:end;margin-bottom:var(--space-lg)}.home-listings-head p{margin:var(--space-xs) 0 0;color:var(--color-muted)}.public-listing-grid{display:grid;gap:var(--space-md);grid-template-columns:minmax(0,1fr)}.public-listing{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-paper);overflow:hidden}.public-listing-photo{position:relative;aspect-ratio:4/3;display:grid;place-items:center;background:var(--color-paper-3);font:600 var(--text-md)/1 var(--font-display);color:var(--color-muted)}.badge{position:absolute;inset-block-start:var(--space-sm);inset-inline-start:var(--space-sm);padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-sm);background:var(--color-accent);color:var(--color-accent-ink);font:700 var(--text-sm)/1.4 var(--font-body)}.public-listing-body{display:grid;gap:var(--space-2xs);align-content:start;padding:var(--space-md)}.public-listing .price{font:700 var(--text-xl)/1.15 var(--font-display);font-variant-numeric:tabular-nums}.price small{font:500 var(--text-base)/1 var(--font-body);color:var(--color-muted)}.public-listing :is(h2,h3){font:600 var(--text-md)/1.35 var(--font-body);letter-spacing:0}.public-listing p{margin:0}.specs{font-weight:600;color:var(--color-ink-2)}.where{color:var(--color-muted)}.public-listing .text-button{justify-self:start;min-height:2.75rem;padding-inline:0;color:var(--color-accent);font-weight:700}.empty-public{padding:var(--space-xl);border:1px solid var(--color-rule);background:var(--color-paper-2)}.agent-cta{display:grid;gap:var(--space-lg);padding:var(--space-xl) clamp(var(--space-md),5vw,var(--space-3xl)) var(--space-3xl);background:var(--color-graphite);color:var(--color-on-dark)}.agent-cta p{color:var(--color-paper-3);max-width:60ch}.agent-cta .outline{border-color:var(--color-on-dark);color:var(--color-on-dark)}@media (min-width:40rem){.home-filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}.public-listing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.agent-cta{grid-template-columns:minmax(0,1fr) auto;align-items:end}}@media (min-width:60rem){.public-listing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:39.99rem){.home-listings-head{align-items:start;flex-direction:column}}
/* Native hidden state must win over component display declarations. */
[hidden]{display:none!important}
/* Results: filter bar, active-filter chips, card grid. */
.filter-bar{display:grid;gap:var(--space-sm);grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--space-md) clamp(var(--space-md),5vw,var(--space-3xl));background:var(--color-paper-2);border-bottom:1px solid var(--color-rule)}.filter-keyword{grid-column:1/-1}.results-head{display:grid;gap:var(--space-sm);padding:var(--space-xl) clamp(var(--space-md),5vw,var(--space-3xl)) var(--space-md)}.results-head h1{font-size:var(--text-xl)}.results-head p{margin:var(--space-2xs) 0 0;color:var(--color-muted)}#results-list{padding:0 clamp(var(--space-md),5vw,var(--space-3xl)) var(--space-3xl)}.chip-row{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center}.chip{min-height:2.75rem;display:inline-flex;align-items:center;gap:var(--space-xs);padding-inline:var(--space-md);border:1px solid var(--color-accent);border-radius:999px;background:var(--color-paper);color:var(--color-accent);font-weight:600;white-space:nowrap}.chip-row .text-button{min-height:2.75rem;color:var(--color-accent);font-weight:700}.empty-public{display:grid;gap:var(--space-sm);justify-items:start;grid-column:1/-1}.empty-public p{margin:0;color:var(--color-muted)}
@media (min-width:60rem){.filter-bar{position:sticky;top:4.5rem;z-index:var(--z-raised);grid-template-columns:minmax(0,2fr) repeat(5,minmax(0,1fr));align-items:end}.filter-keyword{grid-column:auto}.results-head{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
/* Listing editor: one step at a time with a fixed action bar. */
.editor-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--space-sm) clamp(var(--space-md),4vw,var(--space-2xl));border-bottom:1px solid var(--color-rule)}.editor-top .helper{margin:0;flex:1;min-width:0;text-align:center}.editor-head{display:grid;gap:var(--space-sm);max-width:52rem;margin-inline:auto;padding:var(--space-xl) var(--space-md) var(--space-md)}.editor-head h1{font-size:var(--text-xl)}.stepper{list-style:none;margin:var(--space-sm) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2xs);counter-reset:step}.stepper li{counter-increment:step;display:grid;gap:var(--space-2xs);font-size:var(--text-sm);color:var(--color-muted);min-width:0}.stepper li::before{content:"";height:.375rem;border-radius:999px;background:var(--color-paper-3)}.stepper li.is-done::before,.stepper li[aria-current]::before{background:var(--color-accent)}.stepper li[aria-current]{color:var(--color-ink);font-weight:700}
.listing-form{max-width:52rem;margin-inline:auto;border:0}.listing-form .step{padding:var(--space-md) var(--space-md) var(--space-xl);border:0}.step:focus{outline:none}.step legend{font-size:var(--text-xl);margin-bottom:var(--space-sm)}.field-label{margin:0;font-weight:600}.three-col{display:grid;gap:var(--space-md);grid-template-columns:repeat(3,minmax(0,1fr))}
.choice-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:var(--space-sm)}.tile,.chip-check{position:relative;display:flex;align-items:center;gap:var(--space-xs);border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-paper);font-weight:600;cursor:pointer;transition:border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}.tile{min-height:3.5rem;padding:var(--space-sm) var(--space-md);font-size:var(--text-md)}.tile input,.chip-check input,.upload-button input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}.tile:has(:checked),.chip-check:has(:checked){border-color:var(--color-accent);background:var(--color-paper-2);box-shadow:inset 0 0 0 1px var(--color-accent)}.tile:has(:focus-visible),.chip-check:has(:focus-visible),.upload-button:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}.chip-check{min-height:2.75rem;padding-inline:var(--space-md);border-radius:999px;font-weight:500}.chip-check:has(:checked){font-weight:700}.chip-check:has(:checked) span::before{content:"✓ ";color:var(--color-accent)}
.package-grid .tile span{display:grid;gap:var(--space-3xs)}.package-grid small{font-weight:400}
.plan-select{max-width:22rem}.dropzone{display:grid;justify-items:center;gap:var(--space-xs);padding:var(--space-xl) var(--space-md);border:2px dashed var(--color-rule);border-radius:var(--radius-md);background:var(--color-paper-2);text-align:center}.dropzone.is-over{border-color:var(--color-accent);background:var(--color-paper-3)}.dropzone strong{font-size:var(--text-md)}.upload-button{position:relative;display:inline-flex;align-items:center;font-weight:700;cursor:pointer}.photo-status{margin:0;font-weight:600}.photo-grid{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-sm);grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}.photo-item{display:grid;gap:var(--space-2xs);padding:var(--space-2xs);border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-paper);cursor:grab}.photo-thumb{position:relative;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;border-radius:var(--radius-sm);background:var(--color-paper-3);font-size:var(--text-xs);color:var(--color-muted);text-align:center}.photo-thumb img{width:100%;height:100%;object-fit:cover}.photo-thumb>span:first-child{padding:var(--space-xs);overflow-wrap:anywhere}.cover-badge,.photo-num{position:absolute;inset-block-start:var(--space-2xs);inset-inline-start:var(--space-2xs);padding:0 var(--space-xs);border-radius:var(--radius-sm);background:var(--color-graphite);color:var(--color-on-dark);font:600 var(--text-xs)/1.8 var(--font-body)}.photo-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2xs)}.photo-buttons .icon-action{width:auto}.icon-action:disabled{opacity:.4;cursor:not-allowed}
.form-actions{position:sticky;bottom:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));background:var(--color-paper);border-top:1px solid var(--color-rule)}.step-count{flex:1;text-align:center;color:var(--color-muted);font-size:var(--text-sm);white-space:nowrap}#step-back[hidden]+.step-count{text-align:start}
@media (max-width:39.99rem){.three-col{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-top .helper{order:3;flex-basis:100%;text-align:start}.stepper li{font-size:0}.stepper li[aria-current]{font-size:var(--text-xs)}.form-actions .button{flex:1}}
/* Listing detail: gallery, key facts, evidence-grouped amenities, contact card. */
.detail{max-width:72rem;margin-inline:auto;padding:var(--space-sm) clamp(var(--space-md),4vw,var(--space-2xl)) var(--space-3xl);display:grid;gap:var(--space-lg)}.detail .back{justify-self:start;min-height:2.75rem;padding-inline:0;font-weight:600}.gallery{position:relative;display:grid;gap:var(--space-xs);grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:2/1;border-radius:var(--radius-md);overflow:hidden}.gallery.is-single{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);aspect-ratio:auto;height:clamp(10rem,28vw,24rem)}.gallery-tile{display:grid;place-items:center;min-height:0;background:var(--color-paper-3);color:var(--color-muted);font:600 var(--text-lg)/1 var(--font-display)}.gallery-tile img{width:100%;height:100%;object-fit:cover}.gallery:not(.is-single) .is-main{grid-column:span 2;grid-row:span 2}.photo-count{position:absolute;inset-block-end:var(--space-sm);inset-inline-end:var(--space-sm);padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-sm);background:var(--color-graphite);color:var(--color-on-dark);font-size:var(--text-sm);font-weight:600}
.detail-grid{display:grid;gap:var(--space-xl)}.detail-main{display:grid;gap:var(--space-xl);min-width:0}.detail-head{display:grid;gap:var(--space-2xs)}.detail-head p{margin:0}.intent-tag{justify-self:start;padding:var(--space-2xs) var(--space-sm);border-radius:999px;background:var(--color-paper-2);border:1px solid var(--color-rule);font-weight:600;font-size:var(--text-sm)}.detail-price{font:700 var(--text-2xl)/1.1 var(--font-display);font-variant-numeric:tabular-nums}.detail-price small{font:500 var(--text-md)/1 var(--font-body);color:var(--color-muted)}.detail-head h1{font-size:var(--text-xl)}.key-facts{display:flex;flex-wrap:wrap;gap:var(--space-xl);margin:0;padding-block:var(--space-md);border-block:1px solid var(--color-rule)}.key-facts div{display:flex;flex-direction:column-reverse}.key-facts dd{margin:0;font:700 var(--text-xl)/1.1 var(--font-display);font-variant-numeric:tabular-nums}.key-facts dt{color:var(--color-muted)}.fact-grid{display:grid;gap:var(--space-xs);grid-template-columns:repeat(2,minmax(0,1fr));margin:0}.fact-grid div{padding:var(--space-sm) var(--space-md);background:var(--color-paper-2);border-radius:var(--radius-sm)}.fact-grid dt{font-size:var(--text-sm);color:var(--color-muted)}.fact-grid dd{margin:0;font-weight:700}.detail-main h2{font-size:var(--text-lg);margin-bottom:var(--space-sm)}.detail-text{margin:0;max-width:65ch;white-space:pre-line;font-size:var(--text-md);color:var(--color-ink-2)}.amenity-view{margin-top:var(--space-md)}.amenity-view h3{font:600 var(--text-base)/1.4 var(--font-body);letter-spacing:0;color:var(--color-muted)}.amenity-view ul{list-style:none;margin:var(--space-xs) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-xs)}.amenity-view li{padding:var(--space-xs) var(--space-md);border:1px solid var(--color-rule);border-radius:999px;background:var(--color-paper)}.amenity-view li::before{content:"✓ ";color:var(--color-success);font-weight:700}
.contact-card{display:grid;gap:var(--space-sm);align-content:start;padding:var(--space-lg);border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-paper)}.contact-card .detail-price{font-size:var(--text-xl)}
@media (min-width:60rem){.detail-grid{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}.contact-card{position:sticky;top:6rem}}
@media (max-width:39.99rem){.gallery,.gallery.is-single{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);aspect-ratio:4/3;height:auto;margin-inline:calc(-1 * var(--space-md));border-radius:0}.gallery-tile:not(.is-main){display:none}.detail-price{font-size:var(--text-xl)}.contact-card{position:sticky;bottom:0;z-index:var(--z-sticky);grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:calc(-1 * var(--space-md));padding:var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));border-radius:0;border-inline:0;border-bottom:0}.contact-card .mono,.contact-card .detail-price{display:none}.contact-card small{grid-column:1/-1;text-align:center}}
/* BBULB AI Box slot: same footprint as the real loader iframe (360px tall, max 640px wide) so going live causes no layout shift. */
.aibox-section{min-width:0}.aibox-placeholder{display:grid;grid-template-rows:auto auto 1fr auto auto;gap:var(--space-sm);height:360px;max-width:640px;padding:var(--space-md);border:1px dashed var(--color-accent);border-radius:var(--radius-md);background:var(--color-paper-2);overflow:hidden}.aibox-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm)}.aibox-head strong{font-size:var(--text-md)}.aibox-chips{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.aibox-chips span{padding:var(--space-2xs) var(--space-sm);border:1px solid var(--color-rule);border-radius:999px;background:var(--color-paper);font-size:var(--text-sm)}.aibox-sponsored{align-self:end;padding:var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper);color:var(--color-muted);font-size:var(--text-sm)}.aibox-input{min-height:2.75rem;display:flex;align-items:center;padding-inline:var(--space-sm);border:1px solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper);color:var(--color-muted)}.aibox-note{margin:0;font-size:var(--text-xs);color:var(--color-muted)}
/* Links that look like buttons (server-rendered pages), real cover photos, the article wrapper on /listing/<id>. */
a.button,a.search-pill,.listing-actions a{text-decoration:none}a.button{display:inline-flex;align-items:center;justify-content:center}.listing-actions a{padding:var(--space-xs);color:var(--color-accent);font-weight:700}.public-listing-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.detail-article{display:grid;gap:var(--space-xl);min-width:0}
/* Home hero: the system's graphite band at full strength, search as the bright focal panel, rooftops along the base. */
.icon{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.icon-line{width:1.4em;height:1.4em;flex:none}.icon-line rect{fill:var(--color-line)}.icon-line path{fill:var(--color-paper)}.button:has(svg){display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs)}
.home-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:var(--space-xl);align-items:center;padding:16rem clamp(var(--space-md),5vw,var(--space-3xl)) var(--space-3xl);background:var(--color-graphite);color:var(--color-on-dark)}.home-hero-copy{display:grid;gap:var(--space-lg);align-content:start}.home-hero h1{font-size:var(--text-display);letter-spacing:0;line-height:1.25;text-wrap:balance}.home-hero-copy>p{margin:0;max-width:40ch;color:var(--color-paper-3);font-size:var(--text-md)}
.type-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-xs);max-width:38rem}.type-shortcuts span{font-size:var(--text-sm);line-height:1.3;text-align:center}.type-shortcuts button{display:grid;justify-items:center;align-content:center;gap:var(--space-xs);min-height:5rem;padding:var(--space-sm) var(--space-2xs);border:1px solid var(--color-graphite-2);border-radius:var(--radius-md);background:var(--color-graphite-2);color:var(--color-on-dark);font-weight:700;font-size:var(--text-md);transition:background-color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),transform var(--dur-micro) var(--ease-out)}.type-shortcuts .icon{width:1.75rem;height:1.75rem;stroke-width:1.75}.type-shortcuts button:active{transform:translateY(1px)}
.home-search{position:relative;display:grid;gap:var(--space-md);padding:var(--space-lg);background:var(--color-paper);color:var(--color-ink);border-radius:var(--radius-md);box-shadow:0 1.5rem 3rem -1rem oklch(10% 0.02 260 / .55)}.search-submit{min-height:3.25rem;font-size:var(--text-md)}.area-shortcuts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);padding-top:var(--space-sm);border-top:1px solid var(--color-rule)}.area-shortcuts span{color:var(--color-muted);font-size:var(--text-sm);margin-inline-end:var(--space-2xs)}.area-shortcuts button{min-height:2.75rem;padding-inline:var(--space-md);border:1px solid var(--color-rule);border-radius:999px;background:var(--color-paper-2);color:var(--color-ink);font-weight:600}
/* Real listing photo: right side on desktop, top band on phones, fading into the graphite so text and search stay legible. */
.home-hero-photo{position:absolute;z-index:-1;margin:0;inset:0 0 auto 0;height:17rem;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}.home-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%}.home-hero-photo figcaption{position:absolute;inset-block-start:var(--space-sm);inset-inline-end:var(--space-sm);padding:var(--space-3xs) var(--space-sm);border-radius:var(--radius-sm);background:var(--color-graphite);color:var(--color-paper-3);font-size:var(--text-xs)}
/* Banner slot: fixed footprint (970×250, phones 320×100), clearly labelled as advertising. */
.ad-slot{display:grid;gap:var(--space-2xs);width:min(970px,100% - 2 * clamp(var(--space-md),5vw,var(--space-3xl)));margin:var(--space-xl) auto 0}.ad-label{font-size:var(--text-xs);color:var(--color-muted);letter-spacing:.02em}.ad-placeholder{aspect-ratio:970/250;display:grid;place-content:center;justify-items:center;gap:var(--space-2xs);padding:var(--space-md);border:1px dashed var(--color-rule);border-radius:var(--radius-md);background:var(--color-paper-2);text-align:center}.ad-placeholder strong{font-size:var(--text-md)}.ad-placeholder span{color:var(--color-muted);font-size:var(--text-sm)}
@media (min-width:60rem){.home-hero{grid-template-columns:minmax(0,1.15fr) minmax(22rem,.85fr);min-height:36rem;padding-top:var(--space-3xl)}.home-hero-photo{inset:0 0 0 auto;width:58%;height:auto;-webkit-mask-image:linear-gradient(to right,transparent,#000 35%);mask-image:linear-gradient(to right,transparent,#000 35%)}.home-hero-photo figcaption{inset-block:auto var(--space-sm)}}
@media (max-width:39.99rem){.home-hero{padding-top:14rem;padding-bottom:var(--space-2xl)}.home-hero-photo{height:15rem}.type-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}.type-shortcuts button{grid-auto-flow:column;justify-content:start;min-height:3.25rem;padding-inline:var(--space-sm)}.type-shortcuts .icon{width:1.5rem;height:1.5rem}.ad-placeholder{aspect-ratio:320/100}.ad-placeholder span{display:none}}
@media (hover:hover) and (pointer:fine){.type-shortcuts button:hover{border-color:var(--color-accent);background:var(--color-graphite)}.area-shortcuts button:hover{border-color:var(--color-accent);color:var(--color-accent)}}
.type-choices{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}.type-choices .tile{font-size:var(--text-base)}
/* Nearest rail station: an optional sub-group inside step 2, and a compact line on cards and the listing page. */
.station-field{display:grid;gap:var(--space-sm);margin:0;padding:var(--space-md);border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-paper-2)}.station-field legend{padding-inline:var(--space-2xs);font:600 var(--text-base)/1.4 var(--font-body)}.station-field legend span{font-weight:400;font-size:var(--text-sm);color:var(--color-muted)}.dist-choices .tile{min-height:2.75rem;font-size:var(--text-base)}.station-line{display:flex;align-items:center;gap:var(--space-2xs);margin:0;color:var(--color-accent);font-weight:600}
/* Address picker: one search box, large tappable results (two lines: subdistrict, then district · province). */
.address-field{display:grid;gap:var(--space-xs)}.address-field>label:first-child{font-weight:600}.address-field .helper{margin:0}.combo{position:relative}.combo-list{position:absolute;inset-inline:0;top:calc(100% + var(--space-2xs));z-index:var(--z-dropdown);list-style:none;margin:0;padding:var(--space-2xs);max-height:22rem;overflow:auto;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-md);box-shadow:0 .75rem 1.5rem -.5rem oklch(20% 0.02 260 / .25)}.combo-list [role=option]{display:grid;gap:var(--space-3xs);min-height:3.25rem;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);cursor:pointer}.combo-list [role=option] strong{font-size:var(--text-md)}.combo-list [role=option] span{color:var(--color-muted);font-size:var(--text-sm)}.combo-list [aria-selected=true],.combo-list [role=option]:hover{background:var(--color-paper-2);box-shadow:inset 0 0 0 1px var(--color-accent)}.combo-empty{padding:var(--space-sm);color:var(--color-muted)}.price-field{max-width:24rem}
/* New listing start: paste an existing ad (AI fills the form) or fill in by hand. */
.start-panel{display:grid;gap:var(--space-lg);max-width:52rem;margin-inline:auto;padding:var(--space-xl) var(--space-md) var(--space-3xl)}.start-panel h1{font-size:var(--text-2xl);text-wrap:balance}.start-lede{margin:0;max-width:52ch;font-size:var(--text-md);color:var(--color-ink-2)}
.draft-resume{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);background:var(--color-paper-2);border:1px solid var(--color-rule);font-weight:600}.draft-resume span{flex:1;min-width:10rem}
.start-choices{display:grid;gap:var(--space-sm);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.start-choice{display:grid;gap:var(--space-2xs);justify-items:start;align-content:start;min-height:7.5rem;padding:var(--space-lg);border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-paper);color:var(--color-ink);text-align:left;transition:border-color var(--dur-short) var(--ease-out),background-color var(--dur-short) var(--ease-out)}.start-choice .icon{width:2rem;height:2rem;stroke-width:1.75;color:var(--color-accent)}.start-choice strong{font-size:var(--text-lg);font-family:var(--font-display)}.start-choice span{color:var(--color-muted)}.start-choice.is-primary{border-color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent)}.start-choice[aria-expanded=true]{background:var(--color-paper-2)}
.paste-box{display:grid;gap:var(--space-sm);padding:var(--space-lg);border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-paper-2)}.paste-box>label{font-size:var(--text-md)}.paste-box .helper{margin:0}.paste-box textarea{min-height:14rem;font-size:var(--text-md);line-height:1.7}.paste-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-sm)}.run-parse{min-height:3.25rem;font-size:var(--text-md)}.run-parse:disabled{opacity:.7;cursor:progress}.paste-box .text-button{justify-self:start;min-height:2.75rem;padding-inline:0;color:var(--color-accent);font-weight:600}
.parse-progress{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2xs)}.parse-progress li{padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-sm);color:var(--color-muted)}.parse-progress li.is-current{background:var(--color-paper);color:var(--color-ink);font-weight:700;box-shadow:inset 0 0 0 1px var(--color-accent)}.parse-progress li.is-current::after{content:" …"}
@media (prefers-reduced-motion:no-preference){.parse-progress li.is-current{animation:pulse-soft 1.6s var(--ease-in-out) infinite}@keyframes pulse-soft{50%{background:var(--color-paper-2)}}}
/* AI fill results: a summary above the form and a status tag on each field. */
.ai-summary{max-width:52rem;margin:0 auto var(--space-md);padding:var(--space-md);border-radius:var(--radius-md);background:var(--color-paper-2);border:1px solid var(--color-rule)}.ai-summary p{margin:0}.ai-summary ul{margin:var(--space-xs) 0 0;padding-inline-start:1.25rem;color:var(--color-ink-2)}.ai-summary .ai-rule{margin-top:var(--space-xs);font-size:var(--text-sm);color:var(--color-muted)}
.ai-tag{display:inline-block;justify-self:start;align-self:start;margin-inline:0;padding:0 var(--space-xs);border-radius:999px;font-size:var(--text-xs);font-weight:700;line-height:1.7;vertical-align:middle;white-space:nowrap}.ai-tag.is-ai{background:var(--color-paper-2);color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent)}.ai-tag.is-check{background:var(--color-warning-bg);color:var(--color-warning);box-shadow:inset 0 0 0 1px var(--color-warning)}.ai-tag.is-missing{background:var(--color-paper-2);color:var(--color-muted);box-shadow:inset 0 0 0 1px var(--color-rule)}
input.needs-check,textarea.needs-check,select.needs-check{border-color:var(--color-warning);box-shadow:inset 0 0 0 1px var(--color-warning)}
@media (max-width:39.99rem){.start-panel h1{font-size:var(--text-xl)}.start-choice{min-height:6rem;padding:var(--space-md)}}
/* Login dialog and the dashboard account box. */
a.button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.admin-key{color:var(--color-muted);font-size:var(--text-sm)}.admin-key summary{min-height:2.75rem;display:flex;align-items:center;cursor:pointer}.admin-key[open]{display:grid;gap:var(--space-sm)}.account{display:grid;gap:var(--space-sm);padding-bottom:var(--space-md);border-bottom:1px solid var(--color-rule)}.account-name{margin:0;font-weight:700}.account form{display:grid;gap:var(--space-sm)}.account .text-button{justify-self:start;min-height:2.75rem;color:var(--color-muted)}
/* The Latin brand name is wider than the old Thai one; keep room for the search pill on phones. */
@media (max-width:39.99rem){.brand{font-size:var(--text-md)}}
/* Short search label until the full one fits on one line. */
@media (max-width:59.99rem){.search-pill span{display:none}.search-pill::before{content:"ค้นหา"}}
/* Results use h2 for cards and empty states (h1 is the page title); home uses h3 under its section h2. */
.empty-public :is(h2,h3){font-size:var(--text-lg)}
/* Phones: keyword stays, the other filters fold behind one button. */
.filter-toggle{grid-column:1/-1}.filter-toggle[aria-expanded="true"]{border-color:var(--color-accent);color:var(--color-accent)}
@media (max-width:39.99rem){.filter-bar:not(.is-open)>label:not(.filter-keyword){display:none}}
@media (min-width:40rem){.filter-toggle{display:none}}