/* Platbook — a cyanotype plat sheet.
   Deep Prussian-blue ink printed on warm drafting paper, faint survey gridlines behind
   the title block, and every statute quote set in drafting monospace so the law reads
   like a surveyor's note rather than an app.
   Every colour lives in the one :root block below. Change a token, restyle the site. */
:root {
  /* paper */
  --bg-primary: #f3ebdc;          /* warm drafting paper */
  --bg-secondary: #ece1cd;        /* a shade deeper, for wells and panes */
  --bg-card: #fbf6ec;             /* the sheet a card is printed on */
  /* ink */
  --accent: #0b3550;              /* deep cyanotype: the only accent */
  --accent-muted: #35607f;        /* the same ink, washed out by light */
  --accent-wash: rgba(11, 53, 80, .08);
  --text-primary: #10222f;        /* ink, never pure black */
  --text-secondary: #4a5863;      /* pencil */
  --border: #cbb99c;              /* drafting rule */
  --border-strong: #a9926f;
  --shadow: 0 1px 0 rgba(16, 34, 47, .06), 0 12px 28px rgba(11, 53, 80, .09);
  --shadow-lift: 0 2px 0 rgba(16, 34, 47, .07), 0 18px 40px rgba(11, 53, 80, .16);
  --on-ink: #f6f1e6;              /* text printed on top of the ink */

  /* status */
  --warn: #8a4b23;                /* drafting sepia, used for anything unverified */
  --warn-bg: #f6e7d6;
  --ok: #2f6b53;

  /* sale types: three blues, one sepia, one verdigris. Nothing outside the palette. */
  --t-lien: #0b3550;
  --t-deed: #336d90;
  --t-hybrid: #8a5a3c;
  --t-redeemable: #2e6f5e;
  --t-other: #6b6458;
  --t-none: #cbb99c;

  --radius: 4px;                  /* drafted corners, not app bubbles */
  --radius-lg: 6px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --head: 'Fraunces', 'Hoefler Text', Georgia, serif;
  --body: 'Public Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --mono: 'Space Mono', 'Consolas', 'Courier New', monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0; color: var(--text-primary); font: 16px/1.65 var(--body);
  background-color: var(--bg-primary);
  /* paper tooth: a single inline grain, never a flat fill */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  overflow-x: hidden;
}
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--text-primary); }
h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: -.01em; line-height: 1.08; margin: 0 0 .4em; }
h1 { font-size: clamp(2.1rem, 6.4vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--accent); }
h3 { font-size: 1.25rem; margin-top: 1.4em; }
small { display: block; color: var(--text-secondary); font-size: .82em; }
code { font-family: var(--mono); background: var(--bg-secondary); padding: 0 .3em; border-radius: var(--radius); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-ink); padding: .6em 1em; z-index: 50; border-radius: 0 0 var(--radius) 0; }
.skip:focus { left: 8px; top: 8px; }
.muted { color: var(--text-secondary); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* header / footer — the title block of the sheet */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid var(--border-strong); position: sticky; top: 0; z-index: 20; background: var(--bg-primary); background: color-mix(in srgb, var(--bg-primary) 92%, transparent); backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--text-primary); text-decoration: none; font-weight: 700; min-height: 44px; min-width: 0; letter-spacing: .01em; }
.brand em { display: none; font-style: normal; color: var(--text-secondary); font-weight: 400; font-size: .92em; }
.brand-mark { flex: none; width: 32px; height: 32px; border-radius: var(--radius); display: grid; place-items: center; background: var(--accent); color: var(--on-ink); font-family: var(--mono); font-size: 1rem; font-weight: 700; box-shadow: var(--shadow); }
.top nav { display: flex; gap: .2rem; flex: none; }
.top nav a { color: var(--text-secondary); text-decoration: none; padding: .6rem .7rem; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
.top nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.foot { border-top: 1px solid var(--border-strong); margin-top: 4rem; padding: 2rem clamp(1rem, 4vw, 2.5rem) 5rem; color: var(--text-secondary); font-size: .92rem; background: var(--bg-secondary); }
.foot p { max-width: 70ch; }
.disclaimer { color: var(--text-primary); font-weight: 700; }
.disclaimer-line { color: var(--text-secondary); font-size: .92rem; border-left: 3px solid var(--accent); padding-left: .7rem; }

main { padding: 0 clamp(1rem, 4vw, 2.5rem); max-width: 1320px; margin: 0 auto; }

/* hero — survey gridlines behind the title, the way a plat is drawn up */
.hero { position: relative; padding: clamp(2rem, 7vw, 4.5rem) 0 1.5rem; animation: rise .6s var(--ease) both; }
.hero::before {
  content: ""; position: absolute; inset: -1rem 0 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--accent-wash) 1px, transparent 1px), linear-gradient(90deg, var(--accent-wash) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.eyebrow { color: var(--accent-muted); text-transform: uppercase; letter-spacing: .18em; font-family: var(--mono); font-size: .72rem; font-weight: 700; margin: 0 0 .8rem; }
.lede { color: var(--text-secondary); max-width: 60ch; font-size: 1.08rem; }
.search { position: relative; max-width: 560px; margin-top: 1.4rem; }
.search input, .filter { width: 100%; min-height: 48px; padding: .7rem 1rem; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); font: inherit; box-shadow: inset 0 1px 2px rgba(16, 34, 47, .05); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.search input:focus, .filter:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-wash); }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: .3rem; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); z-index: 30; box-shadow: var(--shadow-lift); }
.results a { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .8rem; min-height: 44px; color: var(--text-primary); text-decoration: none; border-radius: var(--radius); }
.results a:hover, .results a:focus { background: var(--accent-wash); }
.results .muted { font-size: .85rem; }

/* home */
.home-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
.map-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow); }
.map { width: 100%; height: auto; display: block; }
.map path { stroke: var(--bg-card); stroke-width: .6; transition: opacity .2s var(--ease), filter .2s var(--ease); }
.map a:hover path, .map path[data-i]:hover, .map path.sel { filter: brightness(1.2) saturate(1.2); }
.county-map path { stroke-width: .5; }
.county-map path[data-i] { cursor: pointer; }
.map path.dim { opacity: .18; }
.t-lien { fill: var(--t-lien); --c: var(--t-lien); }
.t-deed { fill: var(--t-deed); --c: var(--t-deed); }
.t-hybrid { fill: var(--t-hybrid); --c: var(--t-hybrid); }
.t-redeemable { fill: var(--t-redeemable); --c: var(--t-redeemable); }
.t-other { fill: var(--t-other); --c: var(--t-other); }
.t-none { fill: var(--t-none); --c: var(--t-none); }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0; margin: .8rem 0 0; font-size: .85rem; color: var(--text-secondary); }
.legend li { display: flex; align-items: center; gap: .4rem; }
.sw { width: 12px; height: 12px; border-radius: 2px; background: var(--c); }
/* Wrap rather than scroll sideways: the row used to run off the right edge with its
   scrollbar hidden, so the last filters were unreachable without knowing to swipe. */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: .4rem; }
.chip { flex: 0 1 auto; min-height: 44px; padding: 0 1rem; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); font: inherit; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip span { color: var(--text-secondary); font-family: var(--mono); font-size: .85em; }
.chip.on { background: var(--accent); color: var(--on-ink); border-color: var(--accent); }
.chip.on span { color: var(--on-ink); }
.cards { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.card { min-width: 0; }
.card a { display: flex; flex-direction: column; gap: .35rem; height: 100%; min-width: 0; padding: 1rem; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); text-decoration: none; box-shadow: var(--shadow); transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.card a:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-width: 0; }
.code { font-family: var(--mono); font-weight: 700; font-size: 1.1rem; letter-spacing: .06em; color: var(--accent); flex: none; }
.card-name { font-family: var(--head); font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.card-facts { display: grid; gap: .15rem; font-size: .9rem; color: var(--text-secondary); min-width: 0; }
.card-facts span { overflow-wrap: anywhere; }
.card-facts b { color: var(--text-primary); font-weight: 700; }
.card-foot { margin-top: auto; padding-top: .3rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .02em; color: var(--text-secondary); }
/* The badge carries the short sale type only. A long audited sentence here used to force
   the card wider than its grid column, push the page sideways and print on top of the
   state code: the badge is now capped and clipped so no string can do that again. */
.pill { display: inline-block; max-width: 100%; padding: .2rem .55rem; border-radius: var(--radius); font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--on-ink); background: var(--c, var(--t-other)); overflow-wrap: anywhere; min-width: 0; }
/* Only the two places a badge sits beside something else are clipped. On a state page the
   sale type is the audited sentence itself and must be readable in full, never cut off. */
.card-top .pill, .county .pill { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill.t-none { color: var(--text-primary); }

/* state page */
.crumbs { padding-top: 1.2rem; font-size: .9rem; color: var(--text-secondary); }
.crumbs a { display: inline-flex; min-height: 44px; align-items: center; }
.state-head { animation: rise .5s var(--ease) both; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lang { display: flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; flex: none; }
.lang button { min-width: 48px; min-height: 44px; background: transparent; color: var(--text-secondary); border: 0; font: inherit; font-weight: 700; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.lang button:hover { color: var(--accent); }
.lang button[aria-pressed="true"] { background: var(--accent); color: var(--on-ink); }
.fresh { font-size: .95rem; margin: .2rem 0 .6rem; }
.fresh.ok { color: var(--ok); }
.fresh.flag { color: var(--warn); background: var(--warn-bg); display: inline-block; padding: .3rem .8rem; border-radius: var(--radius); font-weight: 700; border: 1px solid var(--warn); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .7rem; margin: 1.2rem 0; align-items: start; }
.fact { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); padding: .8rem 1rem; min-width: 0; box-shadow: var(--shadow); }
.fact dt { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-secondary); }
.fact dd { margin: .25rem 0 0; font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.callout { border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); background: var(--bg-card); border-radius: var(--radius-lg); padding: .8rem 1rem; margin: 1rem 0; }
.callout ul { margin: .3rem 0 0; padding-left: 1.2rem; }

.counties-sec { margin-top: 2rem; }
.sec-head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: .8rem; }
.sec-head .legend { margin: 0 0 .6rem; }
.count { font-size: .6em; color: var(--text-secondary); font-family: var(--mono); }
.split { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.map-pane { display: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .8rem; box-shadow: var(--shadow); }
.show-map .map-pane { display: block; }
.show-map .list-pane { display: none; }
.county-list { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .4rem; }
.county { min-width: 0; }
.county button { width: 100%; min-width: 0; min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n t" "p t"; align-items: center; gap: 0 .8rem; padding: .5rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.county button:hover, .county button:focus-visible, .county.sel button { border-color: var(--accent); background: var(--accent-wash); }
.cn { grid-area: n; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.cp { grid-area: p; font-size: .82rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.county .pill { grid-area: t; }
.map-pill { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 25; min-height: 48px; padding: 0 1.6rem; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-ink); font: 700 1rem var(--body); box-shadow: var(--shadow-lift); cursor: pointer; }

.drawer { position: fixed; left: 0; right: 0; bottom: 0; top: 18vh; z-index: 40; background: var(--bg-card); border-top: 2px solid var(--accent); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -20px 60px rgba(11, 53, 80, .25); overflow-y: auto; overscroll-behavior: contain; animation: up .3s var(--ease) both; }
.drawer[hidden] { display: none; }
.drawer-inner { padding: 1.2rem 1.2rem 3rem; position: relative; }
.drawer-close { position: sticky; top: 0; float: right; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-secondary); color: var(--text-primary); font-size: 1.5rem; cursor: pointer; }
.drawer h2 { margin-right: 3rem; }

.prose { max-width: 820px; margin-top: 2.5rem; }
.prose.narrow { margin-inline: auto; padding-top: 2rem; }
.prose.center { text-align: center; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin: .25rem 0; }
.kv { display: grid; gap: .1rem; margin: .6rem 0; }
.kv > div { display: grid; gap: .1rem; padding: .5rem 0; border-bottom: 1px solid var(--border); min-width: 0; }
.kv dt { color: var(--text-secondary); font-size: .85rem; }
.kv dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.kv-nested { margin: .2rem 0 0; padding-left: .8rem; border-left: 1px solid var(--border); }
.kv-nested > div { border-bottom: 0; padding: .2rem 0; }
.mini-states { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.mini-states a { display: inline-grid; place-items: center; width: 48px; height: 44px; border: 1px solid var(--border-strong); border-radius: var(--radius); text-decoration: none; font-family: var(--mono); background: var(--bg-card); transition: background .2s var(--ease), border-color .2s var(--ease); }
.mini-states a:hover { background: var(--accent); color: var(--on-ink); border-color: var(--accent); }

[data-lang="es"] { display: none; }
.lang-es [data-lang="es"] { display: block; }
.lang-es [data-lang="en"] { display: none; }

/* extras */
.extras-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.2rem; margin: 1rem 0; box-shadow: var(--shadow); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; border-radius: var(--radius); background: var(--accent); color: var(--on-ink); font-weight: 700; text-decoration: none; border: 0; font: 700 1rem var(--body); cursor: pointer; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn:hover { color: var(--on-ink); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); box-shadow: none; }
.btn.ghost:hover { color: var(--accent); background: var(--accent-wash); }
.field { width: 100%; min-height: 48px; padding: .6rem .9rem; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); font: inherit; margin: .4rem 0; }

/* debug */
.debug { position: fixed; right: 8px; bottom: 8px; z-index: 60; background: var(--text-primary); color: var(--bg-primary); font: 12px/1.4 var(--mono); padding: .6rem; border: 1px solid var(--accent); border-radius: var(--radius); max-width: 280px; }
.debug button { font: inherit; margin: .2rem .2rem 0 0; min-height: 32px; }
.preview { position: fixed; inset: 0; z-index: 59; background: rgba(16, 34, 47, .85); display: grid; place-items: center; }
.preview iframe { background: var(--bg-primary); border: 1px solid var(--accent); height: 90vh; }

@media (min-width: 640px) {
  .brand em { display: inline; }
}
@media (min-width: 900px) {
  .home-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .map-wrap { position: sticky; top: 80px; }
  .split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
  .map-pane, .show-map .map-pane { display: block; position: sticky; top: 80px; }
  .show-map .list-pane { display: block; }
  .map-pill { display: none; }
  .drawer { left: auto; top: 64px; width: min(460px, 40vw); border-radius: var(--radius-lg) 0 0 0; border-left: 2px solid var(--accent); animation-name: side; }
  .kv > div { grid-template-columns: 200px minmax(0, 1fr); gap: 1rem; }
  .kv-nested > div { grid-template-columns: 160px minmax(0, 1fr); }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@keyframes side { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.claim-flag { color: var(--warn); font-style: normal; font-size: .9em; }

/* Statute text behind every audited claim. Free to read: the paid sheet sells the
   compilation, never the law itself. Collapsed so the plain English stays first, and set
   in drafting monospace, because these are the statute's own words and not ours. */
.quote { margin: .35rem 0 .5rem; font-size: .9rem; }
.quote > summary { cursor: pointer; color: var(--text-secondary); font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; list-style: none; display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border: 1px solid var(--border-strong); border-radius: var(--radius); transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.quote > summary::-webkit-details-marker { display: none; }
.quote > summary::before { content: "\201C\201D"; color: var(--accent-muted); font-weight: 700; line-height: 1; }
.quote > summary:hover, .quote[open] > summary { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.quote blockquote { margin: .4rem 0 0; padding: .6rem .8rem; background: var(--bg-card); border-left: 3px solid var(--accent-muted); border-radius: 0 var(--radius) var(--radius) 0; }
.quote blockquote p { margin: 0; color: var(--text-primary); font-family: var(--mono); font-size: .82rem; line-height: 1.7; overflow-wrap: anywhere; }
.quote blockquote footer { margin-top: .45rem; color: var(--text-secondary); font-family: var(--mono); font-size: .72rem; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .quote > summary { transition: none; } }

/* Verification pending: a state whose official source Platbook has not been able to
   read. The page states no law for it, so the notice has to say that plainly. */
.pending { margin: .6rem 0 .8rem; padding: .8rem .9rem; background: var(--warn-bg); border: 1px solid var(--warn); border-left-width: 3px; border-radius: var(--radius-lg); }
.pending p { margin: 0; }
.pending p + p { margin-top: .4rem; }
.pending b { color: var(--warn); }
/* An audited field whose claim the audit removed and could not replace. Never a blank cell. */
.unverified { color: var(--text-secondary); font-style: normal; }