/* License List — the whole visual system, in one file.
 *
 * This is the answer to "how hard is it to change the font across 10,000
 * towns". Every color, typeface, size and space on every generated page reads
 * from a token below. Change a value here, rebuild, and every page in every
 * state changes together.
 *
 * The rule that keeps it that way: page templates use these class names and
 * these tokens. No inline styles, no per-page overrides, no exceptions. The
 * moment one town's page carries its own colors, the "change one file" promise
 * is gone for that town and quietly for the ones that copy it.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  /* type — three faces, each with a job */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --step--1: 0.8125rem;   /* 13px — captions, footnotes */
  --step-0: 1rem;         /* 16px — body */
  --step-1: 1.125rem;     /* 18px — listing names */
  --step-2: 1.5rem;       /* 24px — section heads */
  --step-3: 2.125rem;     /* 34px — page title */
  --step-4: 2.75rem;      /* 44px — hero */
  --label: 0.6875rem;     /* 11px — the floor; nothing informational goes below */

  /* space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --measure: 66ch;
  --page: 1120px;

  /* color — light */
  --ground: #F4F6F8;
  --surface: #FFFFFF;
  --sunk: #EDF1F4;
  --ink: #0E1620;
  --ink-soft: #4E5B66;
  --ink-faint: #64707C;
  --rule: #D8DFE6;
  --rule-strong: #B9C4CE;
  --navy: #143349;
  --navy-ink: #EAF1F6;
  --navy-soft: #A9C0D2;
  --stamp: #0B6E4F;
  --stamp-bg: #E4F1EB;
  --stamp-line: #A8D5C0;
  --ochre: #8F6614;
  --ochre-bg: #F7EEDA;
  --ochre-line: #D3B57C;
  --shadow: 0 1px 2px rgba(14, 22, 32, .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B1118;
    --surface: #121B24;
    --sunk: #0E1720;
    --ink: #E4EBF2;
    --ink-soft: #A3B2BF;
    --ink-faint: #8595A3;
    --rule: #22303C;
    --rule-strong: #33475A;
    --navy: #0D2231;
    --navy-ink: #DCE8F0;
    --navy-soft: #8FA9BD;
    --stamp: #45BE8B;
    --stamp-bg: #10281F;
    --stamp-line: #22503C;
    --ochre: #D6A63F;
    --ochre-bg: #2A2113;
    --ochre-line: #4E3E1C;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  --ground: #0B1118;
  --surface: #121B24;
  --sunk: #0E1720;
  --ink: #E4EBF2;
  --ink-soft: #A3B2BF;
  --ink-faint: #8595A3;
  --rule: #22303C;
  --rule-strong: #33475A;
  --navy: #0D2231;
  --navy-ink: #DCE8F0;
  --navy-soft: #8FA9BD;
  --stamp: #45BE8B;
  --stamp-bg: #10281F;
  --stamp-line: #22503C;
  --ochre: #D6A63F;
  --ochre-bg: #2A2113;
  --ochre-line: #4E3E1C;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

/* ------------------------------------------------------------ structure */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--s-5); }
a { color: var(--stamp); text-decoration-color: var(--rule-strong); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------- header */

.masthead { background: var(--navy); color: var(--navy-ink); }
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); padding-top: var(--s-3); padding-bottom: var(--s-3);
}
.wordmark { display: flex; flex-direction: column; gap: 1px; text-decoration: none; }
.wordmark b {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  letter-spacing: .11em; color: var(--navy-ink);
}
.wordmark span {
  font-family: var(--font-mono); font-size: var(--label);
  letter-spacing: .22em; color: var(--navy-soft);
}
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: 0.875rem;
  color: var(--navy); background: var(--navy-ink);
  padding: 14px 18px; text-decoration: none; border-radius: 2px;
  display: inline-block;
}
.btn:hover { color: var(--navy); background: #FFFFFF; }

.pagehead {
  background: var(--navy); color: var(--navy-ink);
  border-bottom: 3px solid var(--stamp);
}
.pagehead .wrap {
  padding-top: var(--s-6); padding-bottom: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.eyebrow {
  font-family: var(--font-mono); font-size: var(--label);
  letter-spacing: .16em; text-transform: uppercase; color: var(--navy-soft); margin: 0;
}
.pagehead h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 4vw, var(--step-3));
  line-height: 1.07; letter-spacing: -.024em; margin: 0;
  max-width: 20ch; text-wrap: balance;
}
.standfirst { margin: 0; font-size: var(--step-1); color: #C4D6E3; max-width: 58ch; }

/* ---------------------------------------------------------------- facts */

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule);
}
.fact { background: var(--surface); padding: var(--s-4) var(--s-5); }
.fact dt {
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--s-1);
}
.fact dd {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-2); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.fact dd small {
  display: block; font-family: var(--font-body); font-weight: 400;
  font-size: var(--step--1); color: var(--ink-soft); letter-spacing: 0; margin-top: 2px;
}

/* --------------------------------------------------- local context block */

/* Census facts about the town, above the listings. Deliberately quiet: it is
   context for the list, not a headline competing with it. */
.local {
  margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5);
  background: var(--surface); border-left: 3px solid var(--rule-strong);
}
.local h2 {
  margin: 0 0 var(--s-2); font-size: var(--label); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft);
}
.local p { margin: 0; max-width: 68ch; }
.local .src {
  margin-top: var(--s-2); font-size: var(--step--1); color: var(--ink-soft);
}

/* ------------------------------------------------------------- controls */

.controls {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin: 0 0 var(--s-4);
}
.controls label { font-size: 0.9375rem; color: var(--ink-soft); }
.controls select {
  font: inherit; font-size: 0.9375rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: 2px; padding: 11px 13px;
}
.controls .count {
  font-family: var(--font-mono); font-size: var(--label);
  color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-left: auto;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- records */

main { padding: var(--s-6) 0 var(--s-8); }
.records { display: flex; flex-direction: column; gap: var(--s-3); }

.record {
  display: grid; grid-template-columns: 132px 1fr;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 2px; box-shadow: var(--shadow);
}
.record.has-photos { grid-template-columns: 132px 1fr 176px; }
.record.promoted { border-color: var(--ochre); background: var(--ochre-bg); }

.stamp {
  border-right: 1px solid var(--rule); background: var(--sunk);
  padding: var(--s-4) 14px; display: flex; flex-direction: column; gap: var(--s-2);
}
.record.promoted .stamp { background: transparent; border-right-color: var(--ochre-line); }
.stamp-mark {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--stamp);
}
.stamp-mark svg { width: 12px; height: 12px; flex: none; }
.stamp-no {
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500;
  word-break: break-all;
}
.stamp-meta {
  font-family: var(--font-mono); font-size: var(--label); line-height: 1.5;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}

.record-body { padding: var(--s-4) var(--s-4); min-width: 0; }
.record-body h2 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
  letter-spacing: -.005em; line-height: 1.25; margin: 0 0 var(--s-1);
  text-wrap: balance;
}
.record-body h2 a { color: inherit; text-decoration: none; }
.record-body h2 a:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); }
.record-meta { margin: 0 0 var(--s-3); font-size: 0.9375rem; color: var(--ink-soft); }
.record-meta a { color: inherit; }
.sep { color: var(--ink-faint); padding: 0 7px; }

/* ------------------------------------------------------- license status
   The green shield is reserved for a current license and never appears on
   anything else. A business whose license is expired, revoked or terminated
   gets a plain slate band carrying the state's own word, with no colour
   judgement attached -- "revoked" is the state's finding, and dressing it in
   red would be us adding an opinion to it. */

.status-band {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  background: var(--sunk); border: 1px solid var(--rule-strong);
  border-radius: 2px; padding: 10px 14px;
}
.status-band .word {
  font-family: var(--mono); font-size: var(--label); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink);
}
.status-band .said { font-size: 0.9375rem; color: var(--ink-soft); }
.record.not-current { background: var(--sunk); }
.record.not-current .stamp { background: transparent; }
.stamp-mark.lapsed { color: var(--ink-faint); }

/* ------------------------------------------------------------- shortlist */

.pick { display: flex; align-items: center; gap: 7px; margin-top: var(--s-3);
        font-size: 0.9375rem; color: var(--ink-soft); cursor: pointer;
        width: max-content; padding: 6px 0; }
.pick input { width: 18px; height: 18px; accent-color: var(--stamp); }

.sharebar {
  position: sticky; bottom: 0; z-index: 6;
  background: var(--navy); color: var(--navy-ink);
  border-top: 3px solid var(--stamp);
  padding: var(--s-3) 0; margin-top: var(--s-4);
}
/* Any rule that sets `display` beats the browser's own `[hidden]{display:none}`,
   because that default is a plain element rule and ours are class rules. That
   bit the website-offer tick box on the claim page: the script set `hidden`
   correctly and `.field { display: flex }` kept it on screen anyway. One rule
   here rather than a `[hidden]` variant beside every component that grows a
   `display` later. */
[hidden] { display: none !important; }
.sharebar[hidden] { display: none !important; }
.sharebar .wrap { display: flex; align-items: center; gap: var(--s-3);
                  flex-wrap: wrap; }
.sharebar .n { font-family: var(--mono); font-size: 0.875rem; }
.sharebar button {
  font-family: var(--display); font-weight: 600; font-size: 0.875rem;
  background: var(--navy-ink); color: var(--navy); border: none;
  border-radius: 2px; padding: 13px 18px; cursor: pointer;
}
.sharebar button.ghost { background: transparent; color: var(--navy-soft);
                         border: 1px solid var(--navy-soft); }
.sharebar .said { font-size: 0.9375rem; color: var(--navy-soft); margin-left: auto; }

.picked-note {
  background: var(--stamp-bg); border: 1px solid var(--stamp-line);
  border-radius: 2px; padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4);
}
.picked-note p { margin: 0; color: var(--ink-soft); }
.picked-note b { font-family: var(--display); color: var(--ink); }

/* ---------------------------------------------------------------- chips */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .05em;
  padding: 4px 8px; border-radius: 2px; border: 1px solid transparent;
  white-space: nowrap;
}
/* the three states, and they must never converge — see docs/commitments.md #5 */
.chip.verified { background: var(--stamp-bg); color: var(--stamp); border-color: var(--stamp-line); }
.chip.claimed  { color: var(--ink-soft); border-color: var(--rule-strong); }
.chip.empty    { color: var(--ink-faint); border: 1px dashed var(--rule-strong); }
.chip.promoted { background: var(--ochre); color: #FFFFFF; border-color: var(--ochre); }

/* ------------------------------------------------------------- gallery */

.thumbs {
  border-left: 1px solid var(--rule); padding: var(--s-4) 14px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; align-content: center;
}
.thumbs .shot, .thumbs .slot { width: 100%; aspect-ratio: 4 / 3; border-radius: 2px; }
.thumbs .shot { position: relative; overflow: hidden; display: block; }
.thumbs .shot img { width: 100%; height: 100%; object-fit: cover; display: block;
                    filter: saturate(.72) contrast(1.04) brightness(1.02); }
.thumbs .shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 51, 73, .10) 0%, rgba(20, 51, 73, .02) 55%, rgba(20, 51, 73, .12) 100%);
}
.thumbs .slot { border: 1px dashed var(--rule-strong); background: var(--sunk); }
.thumbs .slot-label {
  grid-column: 1 / -1; font-family: var(--font-mono); font-size: var(--label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  text-align: center; margin-top: 2px;
}

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: 2px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
               filter: saturate(.72) contrast(1.04) brightness(1.02); }

/* ----------------------------------------------------------- detail page */

.sheet {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 2px; box-shadow: var(--shadow);
}
.crumb {
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .06em;
  color: var(--ink-faint); margin: 0 0 var(--s-3);
}
.crumb a { color: inherit; }
.sheet-head { padding: var(--s-5); border-bottom: 1px solid var(--rule);
              display: flex; flex-direction: column; gap: var(--s-3); }
.sheet-head h1 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3);
  line-height: 1.08; letter-spacing: -.024em; margin: 0; text-wrap: balance;
}
.license-badge {
  display: inline-flex; align-items: center; gap: 7px; width: max-content;
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .08em;
  text-transform: uppercase; color: var(--stamp); background: var(--stamp-bg);
  border: 1px solid var(--stamp-line); border-radius: 2px; padding: 6px 10px;
}
.license-badge svg { width: 13px; height: 13px; }

.section { padding: var(--s-5); border-bottom: 1px solid var(--rule);
           display: flex; flex-direction: column; gap: var(--s-3); }
.section:last-child { border-bottom: none; }
.section h2 {
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0; font-weight: 400;
}
.section p { margin: 0; color: var(--ink-soft); max-width: var(--measure); }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: var(--s-4) var(--s-5); margin: 0; }
.kv dt {
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-1);
}
.kv dd { margin: 0; font-family: var(--font-display); font-weight: 600;
         font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.kv dd.plain { font-family: var(--font-body); font-weight: 400; color: var(--ink-soft); }
.kv dd small { display: block; margin-top: 2px; font-family: var(--font-body);
               font-weight: 400; font-size: var(--step--1); color: var(--ink-faint); }

/* ------------------------------------- verified, measured, claimed, blank
   Commitment #5: a state-register fact and a fact the business told us about
   itself must never look the same. The whole product is that difference, so it
   is carried by the left rule, the heading colour and the ground -- three
   signals, not one, because a single colour cue dies the moment somebody
   prints the page or reads it with a colour vision deficiency.

   Verified  solid green rule, tinted ground, shield in the heading
   Measured  solid navy rule -- ours, counted, not the state's
   Claimed   dashed grey rule, plain ground, and a sentence saying who said it
   Blank     dashed faint rule, nothing filled in, no accusation           */

.verified-block { border-left: 3px solid var(--stamp); background: var(--stamp-bg); }
.verified-block h2 { color: var(--stamp); display: flex; align-items: center; gap: 6px; }
.verified-block h2 svg { width: 13px; height: 13px; }
.verified-block .kv dt { color: var(--stamp); opacity: .85; }

/* A lapsed licence keeps the block -- those are still the state's facts -- and
   loses the green and the shield. Colour is read long before the status word,
   and green on this site means one thing only: the state says it is current. */
.verified-block.not-current { border-left-color: var(--rule-strong);
                              background: var(--surface); }
.verified-block.not-current h2,
.verified-block.not-current .kv dt { color: var(--ink-faint); }

.measured-block { border-left: 3px solid var(--navy); }
.measured-block h2 { color: var(--navy); }

.claimed-block { border-left: 3px dashed var(--rule-strong); }
.claimed-site { margin: 0; }
.claimed-site small { display: block; margin-top: 2px; font-size: var(--step--1);
                      color: var(--ink-faint); }
.claimed-note { margin: 0; color: var(--ink-soft); max-width: var(--measure); }

.gaps-block { border-left: 3px dashed var(--rule); background: var(--sunk); }

.also-block a.chip { text-decoration: none; }
.also-block a.chip:hover { border-color: var(--stamp); }

.free-note { background: var(--sunk); }
.free-note p { font-size: var(--step--1); color: var(--ink-faint); }

.section .said { font-size: var(--step--1); color: var(--ink-faint);
                 max-width: var(--measure); margin: 0; }
.check-it { font-size: var(--step--1); color: var(--ink-soft); margin: 0;
            max-width: var(--measure); }

@media print {
  /* Colour is the first thing a printer throws away, so the two blocks keep
     their rules in black and white too. */
  .verified-block, .measured-block { border-left: 3px solid #000; }
  .claimed-block, .gaps-block { border-left: 3px dashed #666; }
}

/* ------------------------------------------------------- trade groups
   Residential leads; commercial sits below in a quieter block. Nothing is
   hidden -- the second group is simply not where a homeowner's eye lands. */

.group { margin: 0 0 var(--s-6); }
.group-head { margin: 0 0 var(--s-3); }
.group-head h2 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-2);
  letter-spacing: -.018em; margin: 0 0 3px;
}
.group-head p { margin: 0; color: var(--ink-soft); max-width: var(--measure); }

.group.secondary { padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.group.secondary .group-head h2 { font-size: var(--step-1); color: var(--ink-soft); }
.group.secondary .group-head p { font-size: 0.9375rem; }
.group.secondary .tile b { font-weight: 500; }

/* ----------------------------------------------------- tiles and cards */

.prose { max-width: var(--measure); margin: var(--s-6) 0 var(--s-4); }
.prose h2 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-2);
  letter-spacing: -.018em; margin: 0; text-wrap: balance;
}

.tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 2px;
}
.tile {
  background: var(--surface); padding: var(--s-4) var(--s-5); text-decoration: none;
  display: flex; flex-direction: column; gap: 3px; min-height: 76px;
  justify-content: center;
}
.tile:hover { background: var(--sunk); }
.tile b {
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem;
  color: var(--ink); letter-spacing: -.005em;
}
.tile span {
  font-family: var(--font-mono); font-size: var(--label); color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.tiles.compact { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tiles.compact .tile { padding: var(--s-3) var(--s-4); min-height: 58px; }

/* --------------------------------------------------------- the claim page
   A contractor filling this in is standing in a van with a phone. Big targets,
   one column, nothing clever -- and the whole thing works without the script:
   the button is already a mailto carrying the four questions. */

.claim-form { gap: var(--s-5); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > label {
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem;
  color: var(--ink);
}
.field input {
  font: inherit; font-size: var(--step-0); padding: 10px var(--s-3);
  border: 1px solid var(--rule-strong); border-radius: 2px;
  background: var(--surface); color: var(--ink); max-width: 32rem;
}
.field input:focus-visible { outline: 2px solid var(--stamp); outline-offset: 1px; }

.ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
         gap: var(--s-2); }
.tick {
  display: flex; align-items: center; gap: var(--s-2); padding: 9px var(--s-3);
  border: 1px solid var(--rule); border-radius: 2px; background: var(--surface);
  font-size: 0.9375rem; cursor: pointer; min-height: 44px;
}
.tick:hover { border-color: var(--rule-strong); }
.tick input { width: 17px; height: 17px; accent-color: var(--stamp); flex: none; }

.claim-prompt { background: var(--sunk); }
.claim-prompt h2 { color: var(--ink-soft); }

.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4); margin-bottom: var(--s-6);
}
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--stamp); border-radius: 2px;
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2);
}
.card .kicker {
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--stamp); margin: 0;
}
.card h3 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
  letter-spacing: -.01em; margin: 0; line-height: 1.25;
}
.card p { margin: 0; color: var(--ink-soft); }

/* ---------------------------------------------------------------- offers
   Contractor-facing only. See render/offers.py — the consumer-surface ban is
   enforced in code, not by remembering. */

.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
              gap: var(--s-3); }
.offer {
  border: 1px solid var(--rule); border-radius: 2px; padding: var(--s-4);
  text-decoration: none; display: flex; flex-direction: column; gap: 3px;
  background: var(--surface);
}
.offer:hover { border-color: var(--rule-strong); }
.offer b { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem;
           color: var(--ink); }
.offer span { font-size: 0.875rem; color: var(--ink-soft); }
.disclosure { font-size: var(--step--1); color: var(--ink-faint); margin: 0; }

/* ------------------------------------------------------------- ad slots */

.ad-slot {
  border: 1px dashed var(--rule-strong); border-radius: 2px;
  background: var(--sunk); padding: var(--s-5); text-align: center;
  margin: var(--s-4) 0;
}
.ad-slot p {
  margin: 0; font-family: var(--font-mono); font-size: var(--label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}

/* ------------------------------------------------------------ data page */

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 2px;
              background: var(--surface); margin-bottom: var(--s-6); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
table.data th, table.data td {
  text-align: left; padding: 11px var(--s-4); border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.data th {
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 400;
  background: var(--sunk);
}
table.data td:not(:first-child) { font-variant-numeric: tabular-nums; }
table.data tr:last-child td { border-bottom: none; }

.cite { background: var(--surface); border: 1px solid var(--rule);
        border-left: 3px solid var(--stamp); border-radius: 2px;
        padding: var(--s-5); }
.cite h2 { font-family: var(--font-display); font-weight: 600;
           font-size: var(--step-1); margin: 0 0 var(--s-3); letter-spacing: -.01em; }
.cite p { margin: 0 0 var(--s-3); color: var(--ink-soft); max-width: var(--measure); }
.cite blockquote {
  margin: 0 0 var(--s-3); padding: var(--s-4); background: var(--sunk);
  border-radius: 2px; font-size: 0.9375rem; color: var(--ink);
}
.btn-green {
  display: inline-block; background: var(--stamp); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem;
  padding: 14px 20px; border-radius: 2px; text-decoration: none;
}
.btn-green:hover { color: #fff; opacity: .9; }

pre.code {
  background: var(--sunk); border: 1px solid var(--rule); border-radius: 2px;
  padding: var(--s-4); overflow-x: auto; font-family: var(--font-mono);
  font-size: 0.8125rem; line-height: 1.6; color: var(--ink); margin: 0;
}

.footer-links { margin-top: var(--s-3); }
.footer-links a { margin-right: 4px; }

/* --------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--rule); padding: var(--s-5) 0 var(--s-8);
               color: var(--ink-faint); font-size: var(--step--1); }
.site-footer p { margin: 0 0 var(--s-2); max-width: 78ch; }
.site-footer a { color: var(--ink-soft); }

/* ---------------------------------------------------------------- small */

@media (max-width: 820px) {
  .record, .record.has-photos { grid-template-columns: 132px 1fr; }
  .thumbs { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--rule);
            grid-template-columns: repeat(6, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .record, .record.has-photos { grid-template-columns: 1fr; }
  .stamp { border-right: none; border-bottom: 1px solid var(--rule);
           flex-direction: row; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
}