/* FlexSpace.direct — the door's pages (home, browse, listing, list, help).
   The family's Prairie Ink scheme (direct-standards DESIGN-STANDARD.md):
   one amber action per screen with an Ink label, prices in Ink by weight,
   the RENT family's Dusk Blue tint (the door's primary engine is ForRent)
   on the hero band and empty-state grounds only. The header and the
   OnePlace band are the family's own files, never styled here. */
:root {
  --primary: #1C2B3A; --accent: #E8A33D; --paper: #FAF7F2; --card: #FFFFFF;
  --ink: #23201B; --muted: #6E675C; --line: #E5DFD3; --go: #2E7D4F; --stop: #B3402E;
  --tint: #E1EAF1; --band: #F3EEE3;
  --wrap: 1120px; --radius: 10px; --shadow: 0 1px 2px rgba(35,32,27,.06), 0 8px 22px -14px rgba(35,32,27,.28);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.door { margin: 0; font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.55; font-variant-numeric: tabular-nums; }
body.door a { color: var(--primary); }
/* The family footer (master v2.0.0) colors its own links; the rule above would outrank them and
   leave the dark bar's link unreadable, so the footer's own colors are kept here. */
body.door .ff-cols a { color: var(--ff-ink); }
body.door .ff-family a { color: var(--ff-primary); }
body.door .ff-bar a { color: #fff; }
.door .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.door h1, .door h2, .door h3 { color: var(--primary); letter-spacing: -.01em; line-height: 1.2; }
.door h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; margin: 0 0 12px; }
.door h2 { font-size: 26px; font-weight: 700; margin: 0 0 10px; }
.door h3 { font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.door .small { font-size: 14px; }
.door .muted { color: var(--muted); }
.door .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons: primary (amber, Ink label, one per screen) · secondary (outline) · quiet (text) */
.door .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; gap: 6px; font: inherit; font-weight: 700; font-size: 15px; padding: 10px 18px; border-radius: 8px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; background: var(--accent); color: var(--ink); }
.door .btn.secondary { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }
.door .btn.quiet { background: none; color: var(--primary); padding: 10px 6px; text-decoration: underline; }
.door .btn:focus-visible, .door button:focus-visible, .door a:focus-visible, .door input:focus-visible, .door select:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* THE LOCATION BAND — the locked drawing (LOCKED-HEADER-BAND.html, preview 3) */
.band { background: var(--band); border-bottom: 1px solid var(--line); }
.band-in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 20px; max-width: var(--wrap); margin: 0 auto; }
.band .placed { font-size: 15px; font-weight: 600; margin-right: 6px; }
.band button { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 40px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; }
.band .notsharing { flex-basis: 100%; font-size: 15px; font-weight: 600; padding: 2px 0 4px; margin: 0; }
.band input { font: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; min-width: 260px; background: #fff; color: var(--ink); }
.band button.go { background: var(--accent); color: var(--primary); border: 0; font-weight: 700; }
.band .help { flex-basis: 100%; font-size: 14.5px; padding: 2px 0 4px; margin: 0; }
.band .help a { color: var(--primary); font-weight: 700; }
@media (max-width: 640px) { .band input { min-width: 0; width: 100%; } }

/* the hero (AMENDMENTS-2026-11-10 item 22): words and search on the left; with
   two categories the door runs one large photo in the tiles' space */
.hero { background: var(--tint); }
.hero-grid { display: grid; grid-template-columns: minmax(400px, 1fr) minmax(0, 620px); gap: 36px; align-items: stretch; max-width: calc(var(--wrap) + 160px); margin: 0 auto; padding: 36px 28px 36px 20px; }
.hero-left { align-self: center; padding: 8px 0; }
.hero-sub { font-size: 18px; color: var(--ink); margin: 0 0 18px; max-width: 34em; }
.cats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.cats a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--primary); font-weight: 600; text-decoration: none; }
.cats a:hover { border-color: var(--primary); }
.searchrow { display: flex; gap: 8px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: var(--shadow); max-width: 640px; }
.searchrow input, .searchrow select { font: inherit; font-size: 16px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: #fff; color: var(--ink); }
.searchrow input { flex: 1 1 220px; min-width: 0; }
.searchrow select { flex: 0 1 170px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.badges span { font-size: 14px; font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; color: var(--ink); }
/* the photo takes the words' height, never more (item 22, point 3) */
.hero-photo { position: relative; margin: 0; border-radius: 14px; overflow: hidden; min-height: 300px; background: #d9d4c9; box-shadow: var(--shadow); }
.hero-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; padding: 24px 20px; }
  .hero-photo { min-height: 0; aspect-ratio: 16 / 9; }
}

/* sections */
.section { padding: 34px 0; }
.section + .section { border-top: 1px solid var(--line); }
.market { font-weight: 600; padding: 14px 0 0; }
.side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.side-head h2 { margin: 0; }

/* the one card language: 4:3 photo, white card, one soft shadow */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.card:hover { border-color: var(--primary); }
.card .ph { aspect-ratio: 4 / 3; background: #e9e4da; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.card .price { font-size: 20px; font-weight: 700; color: var(--ink); }
.card .title { font-weight: 600; color: var(--primary); }
.card .facts { font-size: 14px; color: var(--muted); }
.card .dist { font-size: 14px; color: var(--ink); }
.tag { display: inline-block; font-size: 12.5px; font-weight: 600; background: #EEE9DF; color: var(--ink); border-radius: 6px; padding: 2px 8px; align-self: flex-start; }

/* honest zero */
.zero { background: var(--tint); border-radius: var(--radius); padding: 20px 22px; }
.cards > .zero, .cards > p { grid-column: 1 / -1; }
.zero p { margin: 6px 0 0; }
.zero .btn { margin-top: 12px; }

/* the industrial-development section, kept */
.develop { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.develop .kicker { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.develop ul { margin: 10px 0 0; padding-left: 20px; }
.develop .links { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 760px) { .develop { grid-template-columns: 1fr; } }

/* list-your-space choices */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.choice { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.choice ol { padding-left: 20px; margin: 10px 0 14px; }

/* browse */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 14px; }
.tabs button { font: inherit; font-weight: 700; font-size: 15px; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--primary); cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; }
.tools label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.tools input, .tools select { font: inherit; font-size: 15px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; color: var(--ink); width: 170px; }
.viewswitch { margin-left: auto; display: flex; gap: 6px; }
.viewswitch button { font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--primary); cursor: pointer; }
.viewswitch button[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.countline { font-weight: 600; margin: 4px 0 14px; }
.mapbox { position: relative; height: 560px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #e9e4da; }
.mapbox #map { position: absolute; inset: 0; }
.mapbox .searcharea { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 500; display: none; }
.pin { background: #fff; color: var(--ink); border: 2px solid var(--primary); border-radius: 999px; padding: 2px 8px; font-weight: 700; font-size: 13px; white-space: nowrap; box-shadow: 0 0 0 3px var(--tint); }
@media (max-width: 640px) { .mapbox { height: 70vh; } .viewswitch { margin-left: 0; } }

/* a listing */
.crumbs { font-size: 14px; margin: 18px 0 8px; }
.listing-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 30px; }
.gallery { display: grid; gap: 8px; }
.gallery img { width: 100%; border-radius: var(--radius); display: block; aspect-ratio: 4 / 3; object-fit: cover; background: #e9e4da; }
.facts-table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.facts-table th, .facts-table td { text-align: left; padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.facts-table th { width: 42%; color: var(--muted); font-weight: 600; }
.ask { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.ask label { display: block; font-size: 14px; font-weight: 600; margin: 10px 0 4px; }
.ask input, .ask textarea { width: 100%; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; color: var(--ink); }
.ask textarea { min-height: 110px; resize: vertical; }
.ask .help { font-size: 13.5px; color: var(--muted); margin: 3px 0 0; }
.ask .msg { margin-top: 10px; font-weight: 600; }
.ask .msg.err { color: var(--stop); }
.ask .msg.ok { color: var(--go); }
@media (max-width: 860px) { .listing-grid { grid-template-columns: 1fr; } }

/* plain pages (help, 404) */
.plain { max-width: 760px; margin: 32px auto 60px; padding: 0 20px; }
.plain .cardbox { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; }
.plain ol { padding-left: 22px; }
.plain li { margin-bottom: 8px; }

.door-foot { border-top: 1px solid var(--line); padding: 20px 0 28px; font-size: 14px; color: var(--muted); }
.door-foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; }
.door-foot a { color: var(--primary); }
@media print { .band, .searchrow, .ask { display: none; } }

/* My flex spaces (/my/): the owner's own flex listings from both engines */
.my-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 26px 0 6px; }
.my-head h1 { margin: 0; }
.my-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.my-sub { color: var(--muted); margin: 0 0 8px; }
.my-side { margin: 26px 0 10px; display: flex; align-items: baseline; gap: 10px; }
.my-side h2 { margin: 0; font-size: 22px; }
.my-side .n { color: var(--muted); font-weight: 600; }
.rows { display: grid; gap: 12px; }
.row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
.row .ph { width: 150px; aspect-ratio: 4 / 3; border-radius: 8px; background: #e9e4da; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; overflow: hidden; }
.row .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row .t { font-weight: 700; color: var(--primary); font-size: 17px; }
.row .p { font-weight: 700; font-size: 18px; color: var(--ink); }
.row .f { font-size: 14px; color: var(--muted); }
.row .s { font-size: 14px; margin-top: 4px; }
.chip { display: inline-block; font-size: 12.5px; font-weight: 700; border-radius: 6px; padding: 2px 8px; margin-right: 6px; }
.chip.live { background: #E3F1E8; color: var(--go); }
.chip.off { background: #EEE9DF; color: var(--muted); }
.row .acts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 190px; }
.row .acts .btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.my-note { font-size: 14px; color: var(--muted); margin: 22px 0 34px; }
@media (max-width: 760px) {
  .row { grid-template-columns: 96px minmax(0, 1fr); }
  .row .ph { width: 96px; }
  .row .acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
}

/* ——— Print sheet (direct-standards AMENDMENTS-2026-11-12) ——— */
#print-sheet{display:none}
.qr-takeaway{display:flex;gap:12px;align-items:center;margin:16px 0}
.qr-takeaway svg{width:96px;height:96px;flex:none}
.qr-takeaway p{margin:0;font-size:14px}
.print-chooser{border:1px solid var(--line,#E5DFD3);border-radius:10px;padding:14px 16px;margin:14px 0;background:#fff}
.print-chooser h3{margin:0 0 8px;font-size:16px}
.pc-opt{display:flex;gap:8px;align-items:flex-start;margin:8px 0;font-size:14.5px;cursor:pointer}
.pc-opt input{margin-top:3px}
.pc-picker{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pc-thumb{position:relative;cursor:pointer;line-height:0}
.pc-thumb img{width:96px;height:72px;object-fit:cover;border-radius:6px}
.pc-thumb input{position:absolute;top:6px;left:6px;width:18px;height:18px;cursor:pointer}
.pc-thumb.off img{opacity:.4}
.pc-bar{flex:0 0 100%;margin-top:4px;font-size:14px}
@media print{
  @page{margin:14mm}
  body{background:#fff !important;color:#000}
  body>*{display:none !important}
  body>#print-sheet{display:block !important;font-family:inherit;color:#000}
  #print-sheet .ps-door{font-size:15px;font-weight:700;border-bottom:2px solid #000;padding-bottom:6px}
  #print-sheet h1{font-size:24px;line-height:1.2;margin:12px 0 2px}
  #print-sheet .ps-badge{font-size:12px;border:1.5px solid #000;border-radius:999px;padding:1px 8px;vertical-align:middle;font-weight:700}
  #print-sheet .ps-addr{font-size:15px;margin:0 0 10px}
  #print-sheet .ps-facts{font-size:14.5px;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:4px 18px}
  #print-sheet .ps-main{width:100%;height:78mm;object-fit:cover;display:block}
  #print-sheet .ps-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
  #print-sheet .ps-row img{flex:1;min-width:0;height:38mm;object-fit:cover;display:block}
  #print-sheet .ps-row img.ps-extra{display:none}
  #print-sheet.ps-all .ps-row img.ps-extra{display:block;flex:0 0 calc(33.333% - 6px)}
  #print-sheet .ps-about{font-size:13.5px;line-height:1.45;margin:12px 0 0;white-space:pre-wrap}
  #print-sheet .ps-contact{font-size:15px;font-weight:600;margin:12px 0 0}
  #print-sheet .ps-foot{display:flex;gap:16px;align-items:center;margin-top:14px;border-top:1px solid #000;padding-top:12px}
  #print-sheet .ps-foot svg{width:32mm;height:32mm;flex:none}
  #print-sheet .ps-scan{font-size:14px;font-weight:700}
  #print-sheet .ps-url{font-size:13px;word-break:break-all}
  #print-sheet .ps-printed{font-size:12.5px;margin-top:4px}
}