/* Jaz real estate group: tokens from design/palette.json (light, then dark). */
:root {
  --canvas:#fbfaf7; --surface:#ffffff; --raised:#eaefee; --text:#1a1a1a; --text-dim:#696867;
  --brand:#2f5d50; --brand-wash:#e6ecea; --line-strong:#929190; --brand-ink:#ffffff;
  --ok-wash:#ddebe2; --ok:#1e773b; --warn-wash:#ede6d9; --warn:#8a5a00; --bad-wash:#f4dedd; --bad:#b3261e;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas:#121414; --surface:#1b1e1e; --raised:#192623; --text:#f2f2ee; --text-dim:#a4a4a2;
    --brand:#7c9990; --brand-wash:#252b2a; --line-strong:#777876; --brand-ink:#111111;
    --ok-wash:#2b3530; --ok:#84b694; --warn-wash:#34322b; --warn:#bfa473; --bad-wash:#372e2d; --bad:#d58883;
  }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; background:var(--canvas); color:var(--text); font:17px/1.5 var(--sans); overflow-x:clip; }
.wrap { max-width:46rem; margin:0 auto; padding:0 1rem; padding-left:max(1rem, env(safe-area-inset-left)); padding-right:max(1rem, env(safe-area-inset-right)); }
h1, h2, h3 { font-family:var(--serif); font-weight:600; line-height:1.2; margin:1.25rem 0 .5rem; }
h1 { font-size:1.75rem; } h2 { font-size:1.3rem; } h3 { font-size:1.1rem; }
p { margin:.5rem 0; }
a { color:var(--brand); text-underline-offset:3px; }
:focus-visible { outline:3px solid var(--text); outline-offset:2px; }
.skip { position:absolute; left:-999px; top:0; }
.skip:focus { left:1rem; background:var(--surface); padding:.75rem; z-index:2; }
.top { background:var(--surface); border-bottom:2px solid var(--brand); }
.top-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:56px; }
.mark { font-family:var(--serif); font-size:1.15rem; font-weight:700; color:var(--text); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; min-width:0; overflow-wrap:anywhere; }
.staff-nav { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; padding-bottom:.25rem; }
.staff-nav a { min-height:44px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:.9rem; color:var(--text); text-decoration:none; border-bottom:3px solid transparent; padding:0 .25rem; }
.staff-nav a[aria-current="page"] { border-bottom-color:var(--brand); font-weight:700; }
@media (min-width:40rem) { .staff-nav { grid-template-columns:repeat(6, minmax(0,1fr)); } }
.foot { margin-top:3rem; border-top:1px solid var(--line-strong); padding-bottom:env(safe-area-inset-bottom); }
.foot-row { display:flex; flex-wrap:wrap; gap:0 1.5rem; }
.foot a { min-height:44px; min-width:44px; justify-content:center; display:inline-flex; align-items:center; color:var(--text); }
.inline { display:inline; margin:0; }
.link-btn { background:none; border:0; color:var(--brand); font:inherit; text-decoration:underline; min-height:44px; min-width:44px; cursor:pointer; padding:0 .25rem; }
.btn, button.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; min-width:44px; padding:.5rem 1.1rem; background:var(--brand); color:var(--brand-ink); border:2px solid var(--brand); border-radius:4px; font:600 1rem var(--sans); text-decoration:none; cursor:pointer; }
.btn.secondary { background:var(--surface); color:var(--text); border-color:var(--line-strong); }
.btn.small { min-height:44px; padding:.25rem .75rem; }
.btn.wide { width:100%; }
.notice { padding:.75rem 1rem; border-left:6px solid; border-radius:2px; margin:1rem 0; }
.notice.ok { background:var(--ok-wash); border-color:var(--ok); }
.notice.warn { background:var(--warn-wash); border-color:var(--warn); }
.notice.bad { background:var(--bad-wash); border-color:var(--bad); }
.field { margin:1rem 0; }
.field label, legend { display:block; font-weight:600; margin-bottom:.25rem; }
fieldset { border:0; padding:0; margin:1rem 0; min-width:0; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=datetime-local], select, textarea {
  width:100%; min-height:48px; padding:.6rem .7rem; font:16px/1.4 var(--sans); color:var(--text); background:var(--surface); border:2px solid var(--line-strong); border-radius:4px; }
textarea { min-height:6rem; }
.has-error input, .has-error select, .has-error textarea, [aria-invalid="true"] { border-color:var(--bad); }
.error { color:var(--bad); font-weight:600; margin:.25rem 0; }
.help { color:var(--text-dim); font-size:.95rem; margin:.1rem 0 .3rem; }
/* Radios and checkboxes: the real input covers the whole row (a full-width thumb target); the box is drawn. */
.choice { position:relative; display:flex; align-items:center; min-height:52px; padding:.5rem .75rem; margin:.4rem 0; border:2px solid var(--line-strong); border-radius:4px; background:var(--surface); font-weight:400; cursor:pointer; }
.choice input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; font-size:16px; }
.choice span { min-width:0; overflow-wrap:anywhere; display:flex; align-items:center; gap:.75rem; }
.choice span::before { content:""; flex:none; width:22px; height:22px; border:2px solid var(--text); background:var(--surface); }
.choice input[type=radio] + span::before { border-radius:50%; }
.choice input:checked + span::before { background:var(--brand); box-shadow:inset 0 0 0 3px var(--surface); }
.choice input:checked + span { font-weight:700; }
.choice:has(input:checked) { border-color:var(--brand); background:var(--brand-wash); }
.choice input:focus-visible + span { outline:3px solid var(--text); outline-offset:4px; }
input, select, textarea, button { font-size:16px; }
.sym { font-weight:700; }
/* Particulars: a listing reads like a property sheet with its reference number */
.particulars { list-style:none; padding:0; margin:0; }
.particulars > li { border-top:1px solid var(--line-strong); padding:.9rem 0; display:grid; gap:.2rem; min-width:0; }
.ref { font-family:var(--mono); font-size:.85rem; letter-spacing:.04em; color:var(--text-dim); }
.price { font-family:var(--serif); font-size:1.25rem; font-weight:700; }
.row-title { font-weight:600; overflow-wrap:anywhere; min-width:0; }
.row-title a { display:inline-flex; align-items:center; min-height:44px; }
.meta { color:var(--text-dim); font-size:.95rem; overflow-wrap:anywhere; }
.tag { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.02em; padding:.1rem .4rem; border:1.5px solid var(--line-strong); border-radius:2px; background:var(--raised); color:var(--text); }
.tag.ok { border-color:var(--ok); background:var(--ok-wash); }
.tag.warn { border-color:var(--warn); background:var(--warn-wash); }
.tag.bad { border-color:var(--bad); background:var(--bad-wash); }
.tag.demo { border-style:dashed; }
/* The viewing slip: a confirmed time printed like a counterfoil */
.slip { background:var(--surface); border:2px dashed var(--brand); padding:1rem; margin:1rem 0; }
.slip .when { font-family:var(--serif); font-size:1.4rem; font-weight:700; }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }
.section-count { font-family:var(--mono); color:var(--text-dim); font-size:.95rem; }
.empty { color:var(--text-dim); padding:.75rem 0; border-top:1px solid var(--line-strong); }
dl.facts { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.25rem 1rem; }
dl.facts dt { color:var(--text-dim); } dl.facts dd { margin:0; overflow-wrap:anywhere; }
table { width:100%; border-collapse:collapse; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.solo, .skip { display:inline-flex; align-items:center; min-height:44px; }
.field label.choice { display:flex; font-weight:400; margin:.4rem 0; }
