/* ============================================================
   HAUS — BLACK HOUSE design system.
   Dark luxury / private creative club / cinematic / architectural.
   Obsidian ground, Graphite surfaces, Warm White text, Muted Gold
   accent used sparingly (~10% or less — borders, labels, hover,
   selected states — never large fills).
   ============================================================ */

:root {
  --obsidian: #0a0a0a;
  --graphite: #1a1a1a;
  --graphite-raised: #201f1c;
  --warm-white: #f2f0eb;
  --warm-white-dim: #b8b4a8;
  --muted: #8a8578;
  --line: rgba(242, 240, 235, 0.12);
  --line-strong: rgba(242, 240, 235, 0.22);
  --gold: #b8a06a;
  --gold-ink: #0a0a0a;
  --ok: #8fbf9a;
  --ok-bg: rgba(143, 191, 154, 0.12);
  --warn: #d8b979;
  --warn-bg: rgba(216, 185, 121, 0.12);
  --err: #d98f86;
  --err-bg: rgba(217, 143, 134, 0.12);
  --shadow: 0 1px 0 rgba(242,240,235,0.04), 0 20px 50px rgba(0,0,0,0.5);
  --radius: 3px;
  --radius-sm: 2px;
  --max-width: 1180px;
}

/* Deliberate single dark identity — BLACK HOUSE does not flip to a light
   theme for a system light-mode preference; the obsidian ground IS the
   brand, on every device, every time. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--warm-white);
  font-family: "Archivo", "Noto Sans Thai", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Subtle film-grain texture — pure CSS, no image asset, no dependency.
   Fixed, pointer-events:none, extremely low opacity: felt, not seen. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }

.brandmark {
  font-family: "Anton", "Archivo Black", "Noto Sans Thai", "Noto Sans SC", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.eyebrow, .label {
  font-family: "Archivo", "Noto Sans Thai", "Noto Sans SC", sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold);
}

/* ---- Top navigation ---- */
header.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,10,10,0.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px 24px; max-width: var(--max-width); margin: 0 auto;
}
.site-header .logo {
  font-size: 20px; color: var(--warm-white);
  display: flex; align-items: baseline; gap: 10px;
}
.site-header .logo .eyebrow { display: none; }
@media (min-width: 700px) { .site-header .logo .eyebrow { display: inline; } }

.site-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.site-nav a {
  font-family: "Archivo", "Noto Sans Thai", "Noto Sans SC", sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--warm-white-dim);
  padding: 10px 14px; border-radius: var(--radius-sm); transition: color 0.2s ease;
  position: relative;
}
.site-nav a:hover { color: var(--warm-white); }
.site-nav a[aria-current="page"] { color: var(--gold); }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: var(--gold);
}
.site-nav .cta {
  border: 1px solid var(--warm-white); color: var(--warm-white);
  padding: 10px 18px; border-radius: var(--radius-sm); margin-left: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.site-nav .cta:hover { background: var(--warm-white); color: var(--obsidian); }
.site-nav .cta .arrow { color: var(--gold); transition: transform 0.2s ease; }
.site-nav .cta:hover .arrow { transform: translateX(3px); }

.lang-switch { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px; margin-left: 4px; }
.lang-switch button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  padding: 6px 9px; border-radius: 1px;
}
.lang-switch button[aria-current="true"] { background: var(--graphite-raised); color: var(--gold); }

.mobile-nav-toggle { display: none; background: none; border: 0; color: var(--warm-white); font-size: 22px; cursor: pointer; }

@media (max-width: 860px) {
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--obsidian); flex-direction: column; align-items: stretch; padding: 8px 16px 20px; border-bottom: 1px solid var(--line); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 10px; }
  .site-nav .cta { justify-content: center; margin: 8px 0 0; }
  .mobile-nav-toggle { display: block; }
}

/* ---- Footer ---- */
footer.site-footer { background: var(--obsidian); color: var(--warm-white-dim); margin-top: 96px; border-top: 1px solid var(--line); }
footer.site-footer .wrap { padding: 56px 24px 40px; display: grid; gap: 32px; grid-template-columns: 1.3fr 1fr 1fr; }
footer.site-footer h3.label { color: var(--gold); margin: 0 0 16px; }
footer.site-footer a { color: var(--warm-white-dim); font-size: 13.5px; display: block; padding: 5px 0; transition: color 0.2s ease; }
footer.site-footer a:hover { color: var(--warm-white); }
footer.site-footer .bottom { border-top: 1px solid var(--line); font-size: 11.5px; letter-spacing: 0.05em; color: var(--muted); padding: 18px 24px; text-align: center; }
@media (max-width: 700px) { footer.site-footer .wrap { grid-template-columns: 1fr; } }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "Archivo", "Noto Sans Thai", "Noto Sans SC", sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 15px 26px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn .arrow { transition: transform 0.2s ease; color: var(--gold); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary { background: var(--warm-white); color: var(--obsidian); border-color: var(--warm-white); }
.btn-primary:hover { background: var(--graphite-raised); color: var(--warm-white); border-color: var(--line-strong); }
.btn-outline { background: transparent; border-color: var(--warm-white); color: var(--warm-white); }
.btn-outline:hover { background: var(--warm-white); color: var(--obsidian); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--warm-white-dim); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---- Cards / surfaces ---- */
.card {
  background: var(--graphite); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px;
}
.card + .card { margin-top: 16px; }
.card:hover { border-color: var(--line-strong); }

.pill { display: inline-block; font-family: "Archivo", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; border: 1px solid transparent; }
.pill-ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(143,191,154,0.3); }
.pill-warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(216,185,121,0.3); }
.pill-err { background: var(--err-bg); color: var(--err); border-color: rgba(217,143,134,0.3); }
.pill-muted { background: var(--graphite-raised); color: var(--muted); border-color: var(--line); }
.pill-gold { background: rgba(184,160,106,0.12); color: var(--gold); border-color: rgba(184,160,106,0.35); }

/* ---- Hero ---- */
.hero { padding: 120px 0 80px; }
.hero.center { text-align: center; }
.hero .eyebrow { display: block; margin-bottom: 24px; }
.hero h1 {
  font-size: clamp(48px, 11vw, 132px); line-height: 0.92; margin: 0 0 28px;
  text-wrap: balance;
}
.hero h1 .line { display: block; }
.hero h1 .line-gold { color: var(--gold); }
.hero p.lede { font-size: 17px; color: var(--warm-white-dim); max-width: 520px; margin: 0 0 36px; }
.hero.center p.lede { margin-left: auto; margin-right: auto; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero.center .actions { justify-content: center; }

/* ---- Section ---- */
section.block { padding: 72px 0; }
section.block.divider { border-top: 1px solid var(--line); }
section.block h2 { font-size: clamp(28px, 4.4vw, 48px); line-height: 1.05; margin: 0 0 14px; text-wrap: balance; text-transform: uppercase; letter-spacing: 0.01em; }
section.block p.section-lede { color: var(--warm-white-dim); max-width: 560px; margin: 0 0 40px; font-size: 15.5px; }

.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid > * { background: var(--graphite); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }
.grid .card { border: 0; border-radius: 0; box-shadow: none; }

/* ---- Resource / studio cards ---- */
.resource-card { display: flex; flex-direction: column; gap: 14px; }
.resource-card h2, .resource-card h3 { text-transform: uppercase; letter-spacing: 0.01em; }
.resource-card .price { font-family: "Anton", "Noto Sans Thai", "Noto Sans SC", sans-serif; font-size: 40px; font-variant-numeric: tabular-nums; color: var(--warm-white); }
.resource-card .price small { font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-left: 4px; }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-family: "Archivo", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-white-dim); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; padding: 13px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--graphite-raised); color: var(--warm-white);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field .hint { font-size: 12px; color: var(--muted); }
.field .error { font-size: 12.5px; color: var(--err); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.form-card { max-width: 480px; margin: 0 auto; }

/* ---- Alerts / states ---- */
.alert { border-radius: var(--radius-sm); border: 1px solid; padding: 13px 15px; font-size: 13.5px; margin-bottom: 18px; }
.alert-ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(143,191,154,0.3); }
.alert-err { background: var(--err-bg); color: var(--err); border-color: rgba(217,143,134,0.3); }
.alert-warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(216,185,121,0.3); }
.alert-muted { background: var(--graphite-raised); color: var(--warm-white-dim); border-color: var(--line); }

.skeleton { background: linear-gradient(90deg, var(--graphite) 25%, var(--graphite-raised) 50%, var(--graphite) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- Table (transactions / bookings list) ---- */
table.tx { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tx th { text-align: left; font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 12px; border-bottom: 1px solid var(--line); }
table.tx td { padding: 14px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* ---- Dashboard quick actions ---- */
.quick-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.quick-actions a.btn { flex: 1 1 160px; }

/* ---- Utility ---- */
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.muted { color: var(--warm-white-dim); }
.center { text-align: center; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
[hidden] { display: none !important; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* ============================================================
   Beta Phase E — restrained motion layer. Cinematic/architectural, not
   template-flashy: opacity + a small vertical rise, nothing else moves
   on its own. motion.js adds/removes [data-motion] and toggles
   .in-view; this file owns the actual transition so JS never hardcodes
   timing values. Every rule here is neutralized under
   prefers-reduced-motion at the bottom — see there for the one place
   that guarantee lives.
   ============================================================ */

/* Progressive enhancement, deliberately: [data-motion] elements are
   fully visible by DEFAULT. The hidden-until-scrolled-into-view state
   only exists once html.js-motion-ready is present, which motion.js
   sets in its very first line, before it does anything else — and only
   once it has confirmed IntersectionObserver exists and the visitor
   hasn't asked for reduced motion. If the script fails to load, throws,
   is blocked, or the visitor has JS disabled, content simply renders
   normally. A scroll-reveal effect must never be the reason real content
   stays invisible. */
html.js-motion-ready [data-motion] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-motion-ready [data-motion].in-view { opacity: 1; transform: translateY(0); }

/* Hero headline — reveal line by line, the gold line landing slightly
   after the rest (a beat of emphasis, not a gimmick). Same progressive-
   enhancement guard: only animates once js-motion-ready is confirmed. */
html.js-motion-ready .hero h1 .line {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1), transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-motion-ready .hero.in-view h1 .line { opacity: 1; transform: translateY(0); }
html.js-motion-ready .hero.in-view h1 .line:nth-child(1) { transition-delay: 60ms; }
html.js-motion-ready .hero.in-view h1 .line:nth-child(2) { transition-delay: 180ms; }
html.js-motion-ready .hero.in-view h1 .line:nth-child(3) { transition-delay: 340ms; }
html.js-motion-ready .hero .eyebrow { opacity: 0; transition: opacity 400ms ease 0ms; }
html.js-motion-ready .hero.in-view .eyebrow { opacity: 1; }
html.js-motion-ready .hero.in-view p.lede,
html.js-motion-ready .hero.in-view .actions {
  animation: haus-fade-up 550ms cubic-bezier(0.16, 1, 0.3, 1) 460ms both;
}
@keyframes haus-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* Navigation — underline slide instead of a hard cut, mobile menu reveal. */
.site-nav a { transition: color 0.2s ease; }
.site-nav a::after { transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease; transform: scaleX(0); transform-origin: left; opacity: 0; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); opacity: 1; }
.site-nav a:hover::after { transform: scaleX(1); opacity: 0.5; }
.site-nav.open { animation: haus-menu-reveal 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes haus-menu-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* Cards — a restrained lift, never a jump. No fabricated room photography
   exists to scale, so the equivalent treatment here is the card surface
   itself: border warms toward gold and it lifts 2px, nothing snaps. */
.card { transition: border-color 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease; }
.room-option:hover, .resource-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.grid .card:hover { border-color: var(--line-strong); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skeleton { animation: none; }
  .btn .arrow, .site-nav .cta .arrow { transition: none; }
  /* The one guarantee that matters: motion off means motion OFF, not
     "faster." Every animated/transitioned element in this file resolves
     to its final, fully-visible state immediately, with nothing to opt
     back into. */
  [data-motion], .hero h1 .line, .hero .eyebrow {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .hero.in-view p.lede, .hero.in-view .actions, .site-nav.open { animation: none !important; }
  .site-nav a::after { transition: none !important; }
  .card { transition: none !important; }
  .room-option:hover, .resource-card:hover, .grid .card:hover { transform: none !important; }
}

/* ============================================================
   HAUS WEB — PRODUCTION COMPONENT LAYER  (Track: Web Speed / UI)
   ------------------------------------------------------------
   Appended, not interleaved, so this whole block stays a clean
   merge unit. Extends — never overrides — the BLACK HOUSE system
   above. Same tokens (--obsidian / --graphite / --gold / --ok /
   --warn / --err), same restraint: gold is an accent, never a fill.

   Covers the W1 foundation checklist:
   typography scale · spacing scale · buttons (sizes) · forms
   (validation, checkbox/radio, file upload) · cards · badges ·
   status chips (availability + approval, kept distinct) · modals ·
   tables (responsive) · loading / empty / error states ·
   mobile navigation (bottom bar) · dashboard shell · tabs ·
   lock map grid · a11y baseline.
   ============================================================ */

:root {
  /* Spacing scale — 4px base. Use these instead of magic numbers. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Type scale — matches the cadence already used ad-hoc in the pages. */
  --fs-eyebrow: 11.5px;
  --fs-caption: 12.5px;
  --fs-body-sm: 13.5px;
  --fs-body: 15px;
  --fs-body-lg: 17px;
  --fs-h3: 22px;
  --fs-h2: clamp(28px, 4.4vw, 48px);
  --fs-h1: clamp(36px, 7vw, 72px);

  --z-header: 50;
  --z-bottomnav: 60;
  --z-modal: 200;
  --duration: 200ms;
}

/* ---- Typography helpers ---- */
.h1, section.block .h1 { font-size: var(--fs-h1); line-height: 1.02; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 var(--sp-4); text-wrap: balance; }
.h2, section.block .h2 { font-size: var(--fs-h2); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 var(--sp-3); text-wrap: balance; }
/* `section.block h2` in the base sheet is (0,1,2); the paired selector here
   is (0,2,1) so the .h3 utility still wins inside a content section. */
.h3, section.block .h3 { font-size: var(--fs-h3); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 var(--sp-3); }
.text-sm { font-size: var(--fs-body-sm); }
.text-lg { font-size: var(--fs-body-lg); }
.tabular { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Long-form Thai/Chinese blocks: a touch more leading, no uppercasing
   (Thai has no case; forcing it just adds tracking noise). */
:lang(th), :lang(zh) { line-height: 1.75; }
:lang(th) .h1, :lang(th) .h2, :lang(th) .h3,
:lang(zh) .h1, :lang(zh) .h2, :lang(zh) .h3,
:lang(th) section.block h2, :lang(zh) section.block h2 { text-transform: none; letter-spacing: 0; }

/* ---- Button sizes / variants (extends .btn) ---- */
.btn-sm { padding: 9px 15px; font-size: 11px; }
.btn-lg { padding: 18px 32px; font-size: 13px; }
.btn-danger { background: var(--err-bg); border-color: rgba(217,143,134,0.4); color: var(--err); }
.btn-danger:hover { background: var(--err); color: var(--obsidian); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.btn-gold:hover { background: transparent; color: var(--gold); }
.btn-group { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; }
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 15px; height: 15px; top: calc(50% - 8px); left: calc(50% - 8px);
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: haus-spin 0.7s linear infinite; color: var(--obsidian);
}
.btn-outline[aria-busy="true"]::after, .btn-ghost[aria-busy="true"]::after, .btn-danger[aria-busy="true"]::after { color: var(--warm-white); }
@keyframes haus-spin { to { transform: rotate(360deg); } }

/* ---- Forms: validation, checkbox/radio, file upload ---- */
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--err); }
.field.is-valid input, .field.is-valid select { border-color: rgba(143,191,154,0.5); }
.field-inline { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.field-inline input[type="checkbox"], .field-inline input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 20px; height: 20px; margin-top: 2px; border: 1px solid var(--line-strong);
  background: var(--graphite-raised); cursor: pointer; border-radius: var(--radius-sm);
}
.field-inline input[type="radio"] { border-radius: 50%; }
.field-inline input:checked { border-color: var(--gold); background: var(--gold); }
.field-inline input[type="checkbox"]:checked::after {
  content: "✓"; display: block; color: var(--gold-ink); font-size: 13px; line-height: 18px; text-align: center; font-weight: 700;
}
.field-inline input[type="radio"]:checked::after {
  content: ""; display: block; width: 8px; height: 8px; margin: 5px; border-radius: 50%; background: var(--gold-ink);
}
.field-inline label { font-size: var(--fs-body-sm); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--warm-white-dim); cursor: pointer; }

.file-drop {
  border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--graphite-raised);
  padding: var(--sp-5); text-align: center; cursor: pointer; transition: border-color var(--duration) ease, background var(--duration) ease;
}
.file-drop:hover, .file-drop.is-dragover { border-color: var(--gold); background: rgba(184,160,106,0.06); }
.file-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-drop .file-drop-hint { font-size: var(--fs-body-sm); color: var(--muted); }
.file-drop .file-drop-title { font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-white-dim); margin-bottom: var(--sp-1); }
.file-thumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.file-thumb { position: relative; width: 76px; height: 76px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--graphite); }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-thumb button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(10,10,10,0.8); color: var(--warm-white); font-size: 12px; line-height: 1; cursor: pointer; }

/* ---- Badges (semantic label) vs status chips (lifecycle state) ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "Archivo", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--warm-white-dim); background: var(--graphite-raised);
}
.badge-gold { color: var(--gold); border-color: rgba(184,160,106,0.35); background: rgba(184,160,106,0.1); }
.badge-new { color: var(--ok); border-color: rgba(143,191,154,0.35); background: var(--ok-bg); }

/* Status chip — a dot + label. TWO independent axes, deliberately styled
   so they never read as the same thing (founder requirement: availability
   is not approval). Availability chips carry .chip-avail; approval /
   lifecycle chips carry .chip-flow and use a short leading rule instead
   of a dot. */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Archivo", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 5px 11px 5px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--warm-white-dim); background: var(--graphite);
  white-space: nowrap;
}
.chip::before { content: ""; flex: 0 0 auto; }
.chip-avail::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-flow { border-radius: var(--radius-sm); }
.chip-flow::before { width: 10px; height: 2px; background: currentColor; }

/* Availability axis — market lock physical/booking state.
   active · reserved · available · maintenance · blocked · retired */
.chip.is-available { color: var(--ok); border-color: rgba(143,191,154,0.3); background: var(--ok-bg); }
.chip.is-reserved  { color: var(--warn); border-color: rgba(216,185,121,0.3); background: var(--warn-bg); }
.chip.is-active    { color: var(--gold); border-color: rgba(184,160,106,0.35); background: rgba(184,160,106,0.1); }
.chip.is-maintenance { color: var(--warm-white-dim); border-color: var(--line-strong); background: var(--graphite-raised); }
.chip.is-maintenance::before { background: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 4px); border-radius: 0; }
.chip.is-blocked   { color: var(--err); border-color: rgba(217,143,134,0.3); background: var(--err-bg); }
.chip.is-retired   { color: var(--muted); border-color: var(--line); background: transparent; opacity: 0.75; }
.chip.is-retired::before { background: var(--muted); box-shadow: 0 0 0 3px transparent; opacity: 0.5; }

/* Approval / application axis — a separate visual family (rule, not dot).
   draft · submitted · in_review · changes_requested · approved · rejected */
.chip.flow-draft   { color: var(--muted); }
.chip.flow-submitted { color: var(--warm-white-dim); border-color: var(--line-strong); }
.chip.flow-in-review { color: var(--warn); border-color: rgba(216,185,121,0.3); background: var(--warn-bg); }
.chip.flow-changes { color: var(--gold); border-color: rgba(184,160,106,0.35); background: rgba(184,160,106,0.1); }
.chip.flow-approved { color: var(--ok); border-color: rgba(143,191,154,0.3); background: var(--ok-bg); }
.chip.flow-rejected { color: var(--err); border-color: rgba(217,143,134,0.3); background: var(--err-bg); }

/* ---- Modal / dialog ---- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(5,5,5,0.72); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
@media (min-width: 640px) { .modal-backdrop { align-items: center; padding: var(--sp-5); } }
.modal-backdrop[hidden] { display: none !important; }
.modal {
  background: var(--graphite); border: 1px solid var(--line-strong);
  border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow);
  width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  animation: haus-modal-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 640px) { .modal { border-radius: var(--radius); } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.modal-head h2 { font-size: var(--fs-h3); text-transform: uppercase; margin: 0; }
.modal-body { padding: 0 var(--sp-5) var(--sp-4); color: var(--warm-white-dim); font-size: var(--fs-body); }
.modal-foot { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; padding: var(--sp-3) var(--sp-5) var(--sp-5); }
.modal-close { background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0; }
.modal-close:hover { color: var(--warm-white); }
@keyframes haus-modal-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Tables (responsive: collapse to cards under 640px) ---- */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.data-table th { text-align: left; font-family: "Archivo", sans-serif; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: var(--sp-3); border-bottom: 1px solid var(--line-strong); }
.data-table td { padding: var(--sp-3); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.data-table tbody tr:hover { background: var(--graphite-raised); }
.data-table .num { text-align: right; }
@media (max-width: 640px) {
  .data-table.stack-mobile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table.stack-mobile tr { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: var(--sp-2); padding: var(--sp-2); }
  .data-table.stack-mobile td { display: flex; justify-content: space-between; gap: var(--sp-4); border: 0; padding: var(--sp-2); }
  .data-table.stack-mobile td::before { content: attr(data-label); font-family: "Archivo", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .data-table.stack-mobile .num { text-align: left; }
}

/* ---- State blocks: loading / empty / error ---- */
.state {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--graphite);
  padding: var(--sp-7) var(--sp-5); text-align: center;
}
.state .state-icon { font-size: 26px; opacity: 0.5; margin-bottom: var(--sp-3); }
.state h3 { font-size: var(--fs-h3); text-transform: uppercase; margin: 0 0 var(--sp-2); }
.state p { color: var(--warm-white-dim); font-size: var(--fs-body-sm); max-width: 380px; margin: 0 auto var(--sp-4); }
.state.state-error { border-color: rgba(217,143,134,0.25); }
.state.state-error h3 { color: var(--err); }
.state-inline { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); color: var(--warm-white-dim); font-size: var(--fs-body-sm); }
.spinner { width: 16px; height: 16px; border: 2px solid var(--line-strong); border-right-color: var(--gold); border-radius: 50%; animation: haus-spin 0.7s linear infinite; flex: 0 0 auto; }

.skeleton-text { height: 12px; border-radius: 2px; margin: 6px 0; }
.skeleton-line { background: linear-gradient(90deg, var(--graphite) 25%, var(--graphite-raised) 50%, var(--graphite) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.skeleton-card { height: 120px; border-radius: var(--radius-sm); }

/* ---- Skip link + a11y baseline ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--gold-ink); padding: 10px 16px;
  font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- Mobile bottom navigation (app-shell pattern for signed-in areas) ---- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottomnav);
  display: none; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(10,10,10,0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px 8px;
  font-family: "Archivo", sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); min-height: 52px; justify-content: center;
}
.bottom-nav a .ico { font-size: 17px; line-height: 1; }
.bottom-nav a[aria-current="page"] { color: var(--gold); }
@media (max-width: 860px) {
  .has-bottom-nav .bottom-nav { display: grid; }
  .has-bottom-nav main { padding-bottom: 72px; }
}

/* ---- Dashboard shell ---- */
.dash { display: grid; gap: var(--sp-5); grid-template-columns: 220px 1fr; align-items: start; }
.dash-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; }
.dash-side a {
  display: flex; align-items: center; gap: var(--sp-3); padding: 11px 13px; border-radius: var(--radius-sm);
  font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--warm-white-dim); border: 1px solid transparent;
}
.dash-side a:hover { color: var(--warm-white); background: var(--graphite); }
.dash-side a[aria-current="page"] { color: var(--gold); border-color: var(--line); background: var(--graphite); }
.dash-main { min-width: 0; }
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.stat-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { background: var(--graphite); padding: var(--sp-4) var(--sp-5); }
.stat .stat-label { font-family: "Archivo", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.stat .stat-value { font-family: "Anton", "Noto Sans Thai", sans-serif; font-size: 32px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat .stat-sub { font-size: var(--fs-caption); color: var(--muted); margin-top: 2px; }
.dash-side { min-width: 0; }
@media (max-width: 860px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash-side { position: static; flex-direction: row; overflow-x: auto; gap: var(--sp-2); padding-bottom: var(--sp-2); -webkit-overflow-scrolling: touch; }
  .dash-side a { white-space: nowrap; border: 1px solid var(--line); }
}

/* Safety net for very narrow screens (320px): a header row with a
   long-label button, and any button whose text would exceed the column. */
.btn { max-width: 100%; }
@media (max-width: 520px) {
  .between { flex-wrap: wrap; }
  section.block .between .btn, section.block .between .btn-ghost { width: 100%; }
}

/* Inline code in body copy / notices must wrap, never widen the page. */
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; overflow-wrap: anywhere; word-break: break-word; }
.notice code, .state code { background: rgba(242,240,235,0.06); padding: 1px 4px; border-radius: 2px; }

/* ---- Tabs ---- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); overflow-x: auto; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  font-family: "Archivo", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 12px 14px;
}
.tabs button[aria-selected="true"] { color: var(--warm-white); border-bottom-color: var(--gold); }
.tabpanel[hidden] { display: none !important; }

/* ---- Lock map grid (market floor plan) ---- */
.lock-map {
  display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
.lock-cell {
  position: relative; aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--graphite-raised); color: var(--warm-white-dim);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: "Archivo", sans-serif; font-size: 11px; font-weight: 700; cursor: pointer;
  transition: border-color var(--duration) ease, transform var(--duration) ease;
}
.lock-cell .lock-price { font-size: 9px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.lock-cell:hover:not([disabled]) { transform: translateY(-1px); border-color: var(--gold); }
.lock-cell[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold); }
.lock-cell[disabled] { cursor: not-allowed; }
.lock-cell::after { content: ""; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; }
.lock-cell.is-available::after { background: var(--ok); }
.lock-cell.is-available { border-color: rgba(143,191,154,0.35); }
.lock-cell.is-reserved::after { background: var(--warn); }
.lock-cell.is-active::after { background: var(--gold); }
.lock-cell.is-maintenance::after { background: var(--warm-white-dim); }
.lock-cell.is-maintenance { opacity: 0.6; background: repeating-linear-gradient(45deg, var(--graphite-raised) 0 6px, var(--graphite) 6px 12px); }
.lock-cell.is-blocked::after { background: var(--err); }
.lock-cell.is-blocked { opacity: 0.55; }
.lock-cell.is-retired { opacity: 0.3; pointer-events: none; }
.lock-cell.is-retired::after { background: var(--muted); }
.lock-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); }
.lock-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--warm-white-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.lock-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.lock-legend .lg-available::before { background: var(--ok); }
.lock-legend .lg-reserved::before { background: var(--warn); }
.lock-legend .lg-active::before { background: var(--gold); }
.lock-legend .lg-maintenance::before { background: var(--warm-white-dim); }
.lock-legend .lg-blocked::before { background: var(--err); }
.lock-legend .lg-retired::before { background: var(--muted); }

/* ---- Segmented control (period selector: daily / weekly / monthly) ---- */
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.segmented button {
  background: transparent; border: 0; cursor: pointer; padding: 10px 18px;
  font-family: "Archivo", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--warm-white-dim); border-right: 1px solid var(--line);
}
.segmented button:last-child { border-right: 0; }
.segmented button[aria-pressed="true"] { background: var(--graphite-raised); color: var(--gold); }

/* ---- Directory / listing cards ---- */
.listing-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.listing {
  display: flex; flex-direction: column; background: var(--graphite); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; transition: border-color var(--duration) ease, transform var(--duration) ease;
}
.listing:hover { border-color: var(--gold); transform: translateY(-2px); }
.listing .listing-media { aspect-ratio: 4 / 3; background: var(--graphite-raised); object-fit: cover; width: 100%; }
.listing .listing-media.is-placeholder { display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: "Anton", sans-serif; font-size: 34px; opacity: 0.4; }
.listing .listing-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.listing .listing-title { font-size: 16px; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; }
.listing .listing-meta { font-size: var(--fs-caption); color: var(--muted); }
.rating { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); color: var(--gold); font-variant-numeric: tabular-nums; }

/* Footer grew a fourth column (creators & vendors). Keep it graceful
   across widths without touching the base footer rule above. */
footer.site-footer .wrap { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 960px) { footer.site-footer .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer.site-footer .wrap { grid-template-columns: 1fr; } }

/* ---- Notice banner (backend-pending / adapter-stub disclosure) ---- */
.notice {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--graphite-raised);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 18px);
  font-size: var(--fs-caption); color: var(--warm-white-dim);
  position: relative; overflow-wrap: anywhere;
}
.notice::before { content: "◇"; color: var(--gold); position: absolute; left: var(--sp-4); top: var(--sp-3); }

/* ---- Utility ---- */
.grid-3 > *, .grid-2 > * { min-width: 0; }
.gap-2 { gap: var(--sp-2); } .gap-4 { gap: var(--sp-4); }
.mt-8 { margin-top: var(--sp-2); } .mt-16 { margin-top: var(--sp-4); } .mt-32 { margin-top: var(--sp-6); }
.mb-16 { margin-bottom: var(--sp-4); } .mb-24 { margin-bottom: var(--sp-5); }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--sp-5); }
.flex-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.divider-top { border-top: 1px solid var(--line); padding-top: var(--sp-5); margin-top: var(--sp-5); }

@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::after, .spinner, .skeleton-line, .lock-cell, .listing, .modal { animation: none !important; transition: none !important; }
}