/* HelloSuey: parts the 03 mockup did not have (place, trade and fixed pages, breadcrumbs,
   forms, dev notices). Built from the same tokens and type roles as site.css. */

.h-m { font-size: var(--t-m); font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; }

/* ---------- Copy still to write (dev and production; the production gate fails on it) ---------- */
.missing-copy {
  background: var(--lit); color: var(--ink);
  outline: 2px dashed var(--ink); outline-offset: 1px;
  font: 600 0.8125rem/1.3 var(--f); letter-spacing: 0; text-transform: none;
  padding: 0.1em 0.35em; white-space: normal; overflow-wrap: anywhere;
}

/* ---------- Dev notices (never in production) ---------- */
.dev-notices {
  position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 60;
  display: grid; gap: 0.5rem; max-width: min(36rem, calc(100% - var(--gutter) * 2));
  pointer-events: none;
}
.floor-notice {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.6rem 0.9rem; border-radius: 0.75rem;
  background: var(--ink); color: var(--porch); font-size: var(--t-xs); line-height: 1.35;
  box-shadow: 0 0 0 2px var(--porch);

  & .fa-solid { margin-top: 0.15em; }
  & span { color: var(--muted-night); }
  &.is-data { background: var(--lit); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
  &.is-data span { color: var(--muted-porch); }
}

/* ---------- Breadcrumbs ---------- */
.crumbs {
  font-size: var(--t-s); font-weight: 600;

  & ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.4rem; }
  & li { display: inline-flex; align-items: center; gap: 0.4rem; }
  & li + li::before { content: '/'; color: var(--fg-muted); font-weight: 450; }
  & a { display: inline-flex; align-items: center; min-height: 2rem; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
  & [aria-current='page'] { color: var(--fg-muted); }
  .place-hero & { position: absolute; top: calc(var(--header-h) + 0.75rem); left: var(--gutter); right: var(--gutter); z-index: 2; }
  .page-hero & { padding-inline: var(--gutter); margin-bottom: clamp(1.5rem, 4vw, 3rem); }
}

/* Place, Chicago and trade heroes leave room for the breadcrumbs above the greeting. */
.place-hero { --hero-top: calc(var(--header-h) + 3.25rem + clamp(0.5rem, 3svh, 2.5rem)); }
.lost-hero { --hero-top: calc(var(--header-h) + clamp(1.25rem, 5svh, 4rem)); }
.count-num.is-suppressed { font-size: var(--t-l); }
@media (max-width: 767.98px) {
  .place-hero { --hero-top: calc(var(--header-h) + 3rem); }
}
/* The place line shares its row with the intro (columns 8 to 12), so from tablet up a long
   name fits into columns 1 to 7 (DESIGN.md, Chicago hero). "Chicago." keeps the full row. */
@media (min-width: 768px) {
  .place-hero:not(.chicago-hero) .greeting-place .place-line {
    max-width: calc((100% - 11 * var(--gutter)) * 7 / 12 + 6 * var(--gutter));
  }
}
/* A long button label (or a missing-copy marker) never pushes the page sideways. */
.btn { max-width: 100%; }
/* No clip here: the label's own box (.letters) clips, with room for the ink on every side. */
.btn > [data-letters-text] { min-width: 0; max-width: 100%; display: inline-flex; }
.btn .fa-solid { flex: 0 0 auto; }
/* Without script the server-rendered place line wraps instead of clipping. */
@media (scripting: none) {
  .place-line { height: auto; overflow: visible; }
  .place-line .roll-text { position: static; white-space: normal; }
}

/* ---------- Section layout shared by place, trade and fixed pages ----------
   Heading on the first hanging line (columns 1 to 4), chart or body on the second (6 to 12). */
:is(.place-weekly, .place-price, .place-buyers, .place-cities, .place-split, .trade-places, .form-section) {
  padding-block: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--line);

  & .grid { align-items: start; row-gap: 2rem; }
}
.section-head {
  grid-column: 1 / span 4;

  & .h-l, & .h-xl { margin-bottom: 1rem; }
  & .caption { max-width: 36ch; }
}
.section-chart { grid-column: 6 / -1; min-width: 0; }
.section-figure { margin-block: 1.5rem; }
.big-figure { display: block; font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.chart-note { margin-top: 0.5rem; font-size: var(--t-xs); color: var(--fg-muted); }
.chart-label-second { margin-top: 2.5rem; }

/* Columns variants: 26 weekly bars, money labels, short charts */
.columns.is-dense {
  height: clamp(12rem, 22vw, 18rem);

  & .column-bar { width: min(14px, 70%); border-radius: 3px 3px 0 0; }
  & .column-value { font-size: 0.6875rem; }
}
.columns.is-money .column-value { font-size: 0.6875rem; }
.columns.is-short { height: clamp(9rem, 16vw, 12rem); }
.column.is-suppressed .column-bar { height: 3px; background: transparent; border-top: 2px dotted var(--fg-muted); border-radius: 0; }
.column-axis span { white-space: nowrap; overflow: visible; }
.decade.is-suppressed .decade-bar { height: 3px; background: transparent; border-top: 2px dotted var(--fg-muted); border-radius: 0; }
@media (max-width: 767.98px) {
  .decade.is-suppressed .decade-bar { width: 1.5rem; height: 0.9rem; border-top: 0; border-left: 2px dotted var(--fg-muted); }
}

/* Company share: one bar, companies in ink, people in the light ramp step */
.buyer-bar {
  display: flex; height: 2.25rem; border-radius: 999px; overflow: clip; margin-top: 0.5rem;

  & .buyer-part { display: block; height: 100%; transform-origin: 0 50%; }
  & .is-companies { width: calc(var(--v, 0) * 100%); background: var(--fg); }
  & .is-people { flex: 1 1 auto; background: var(--dot-off); }
}
.buyer-key {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-top: 0.85rem; font-size: var(--t-s); color: var(--fg-muted);

  & li { display: inline-flex; align-items: center; gap: 0.45rem; }
  & strong { color: var(--fg); font-variant-numeric: tabular-nums; }
}
.swatch-dot {
  width: 0.75rem; height: 0.75rem; border-radius: 50%; flex: 0 0 auto;

  &.is-companies { background: var(--fg); }
  &.is-people { background: var(--dot-off); }
}

/* Ages on place pages: caption and the houses-versus-condos field */
.ages-caption { grid-column: 1 / span 7; margin-top: 1rem; max-width: 52ch; }
.homes-split {
  grid-column: 1 / -1; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--line);

  & .h-m { margin-bottom: 1rem; }
}

/* Permits on Chicago ZIP pages: roof and HVAC side by side */
.place-permits {
  border-top: 1px solid var(--line);

  & .grid { row-gap: 1.25rem; }
}
.permit-block {
  grid-column: span 6; min-width: 0;

  & .permit-field { margin-block: 0.75rem; }
}
.permit-block-title { font-size: var(--t-s); font-weight: 750; }
.permit-total { grid-column: 1 / -1; }

/* ZIP page map (static: the ZIP this page is about is lit) */
.place-map { border-top: 1px solid var(--line); }
.place-map .map-figure svg { max-height: min(40rem, calc(var(--stage-h) - 8rem)); }

/* County pages: the cities table */
.city-table {
  & td:first-child { font-weight: 650; }
  & thead th { top: 0; }
}
html:not(.frame-away) .city-table thead th { top: var(--header-h); }

.split-list {
  display: grid; gap: 0;

  & li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.6rem; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
  & li:first-child { border-top: 1px solid var(--line); }
}

/* ---------- Links at the end of every place page ---------- */
.place-links {
  padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line);

  & .grid { row-gap: 2rem; align-items: start; }
}
.links-title { grid-column: 1 / span 4; }
.link-group {
  grid-column: 6 / -1;

  & + .link-group { grid-column: 6 / -1; }
}
.link-group-title { font-size: var(--t-s); font-weight: 750; margin-bottom: 0.75rem; color: var(--fg-muted); }
.zips-title { margin-top: 2.5rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; padding: 0.45em 1.05em;
  border-radius: 999px; border: 2px solid var(--fg); font-weight: 650; font-size: 0.975rem;
  transition: background-color 0.3s var(--soft), color 0.3s var(--soft);

  & .fa-solid { font-size: 0.75em; transition: translate 0.45s var(--roll); }
  &:focus-visible { background: var(--fg); color: var(--ground); }
}
.chip-count { font-weight: 450; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .chip:hover { background: var(--fg); color: var(--ground); }
  .chip:hover .chip-count { color: var(--ground); }
  .chip:hover .fa-solid { translate: 3px 0; }
}

.place-cta {
  padding-block: clamp(5rem, 10vw, 9rem);

  & .grid { row-gap: 1.5rem; }
}
.cta-title { grid-column: 1 / span 9; }
.cta-body { grid-column: 1 / span 6; }
.cta-actions { grid-column: 1 / -1; margin-top: 1rem; }

/* ---------- Trade pages ---------- */
.trade-detail .trade-name { color: var(--fg); }
.trade-places .city-table td .small { margin-left: 0.4rem; font-weight: 450; }

/* ---------- Fixed pages ---------- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(1rem, 3vw, 2rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);

  & .grid { row-gap: 1.5rem; }
}
.page-title { grid-column: 1 / span 10; font-size: clamp(3rem, 1.2rem + 7vw, 9rem); line-height: 0.92; letter-spacing: -0.045em; font-weight: 800; }
.page-intro { grid-column: 1 / span 7; max-width: 40ch; }

.fact-strip {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 1.5rem;
}
.fact-list { row-gap: 1rem; }
.fact {
  grid-column: span 3;

  & dt { font-size: var(--t-xs); color: var(--fg-muted); font-weight: 600; }
  & dd { margin: 0; font-size: var(--t-m); font-weight: 750; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
}

.steps-section {
  padding-block: clamp(4rem, 8vw, 7rem);

  & .grid { row-gap: 2.5rem; }
}
.steps-title { grid-column: 1 / span 8; }
.step-list {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem var(--gutter);
  counter-reset: none;
}
/* align-content: start keeps each step's text under its title when a taller step stretches the row. */
.step {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 0.75rem; align-items: start; align-content: start;
  padding-top: 1.25rem; border-top: 2px solid var(--fg);

  & .step-num {
    grid-row: 1 / span 2; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: var(--fg); color: var(--ground); font-weight: 800; font-variant-numeric: tabular-nums;
  }
  & .step-title { font-size: var(--t-m); font-weight: 760; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.5rem; padding-top: 0.2rem; }
  & p { grid-column: 2; max-width: 40ch; }
}

.prose-section {
  padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line);

  & .grid { row-gap: 1.5rem; align-items: start; }
}
.prose-title { grid-column: 1 / span 4; }
.prose-body {
  grid-column: 6 / -1; max-width: 62ch; display: grid; gap: 1rem;

  & a { text-decoration: underline; text-underline-offset: 0.2em; }
}
.filter-list {
  list-style: decimal; padding-left: 1.5rem; display: grid; gap: 0.5rem;

  & li::marker { font-weight: 750; font-variant-numeric: tabular-nums; }
}
/* The number column is as wide as the widest number (a three-digit floor ran into its text at a fixed 4rem); each row
   shares it through subgrid, so the numbers stay in one column. */
.rule-list {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1rem; row-gap: 0;

  & li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; padding-block: 1rem; border-top: 1px solid var(--line); }
  & strong { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
}

.source {
  padding-top: 1.25rem; border-top: 1px solid var(--line);

  & .source-name { font-size: var(--t-m); font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 0.75rem; }
  & .source-name a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
  & .source-name .fa-solid { font-size: 0.6em; margin-left: 0.45em; vertical-align: 0.2em; }
  & a { text-decoration: underline; text-underline-offset: 0.2em; }
}
.source-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem 1.5rem; font-size: var(--t-s);

  & dt { color: var(--fg-muted); font-size: var(--t-xs); font-weight: 600; }
  & dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
}
/* Inline text links get a little height so each one is a 24px target. */
:is(.source, .prose-body) a { padding-block: 0.25rem; }
.source-quote {
  margin-block: 1rem 0.5rem; padding-left: 1rem; border-left: 3px solid var(--fg);
  font-size: var(--t-s); line-height: 1.5;
}
.merge-table { max-width: none; }
.change-list-title { margin-top: 1rem; font-size: var(--t-s); font-weight: 750; }
.change-list-title + .data-table-toggle { margin-top: -0.5rem; }
.merge-list {
  display: grid; gap: 0; margin-top: 0.5rem; font-size: var(--t-s);

  & li { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr); gap: 1rem; align-items: start; padding-block: 0.4rem; border-bottom: 1px solid var(--line); }
  & span { color: var(--fg-muted); overflow-wrap: anywhere; }
}
.field-list {
  display: flex; flex-wrap: wrap; gap: 0.5rem;

  & li { padding: 0.35em 0.8em; border: 1px solid var(--line); font-size: var(--t-s); font-weight: 600; }
}

/* Forms. The free week's is still a stub with a disabled button; the opt-out form posts to the site Worker. */
.field-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.stub-form {
  grid-column: 6 / span 6; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; max-width: 34rem;

  & .btn { white-space: normal; text-align: center; justify-content: center; }
}
.field {
  display: grid; gap: 0.4rem;

  & label { font-weight: 700; font-size: var(--t-s); }
  & input:not([type='checkbox']), & select {
    width: 100%; min-height: 3rem; padding: 0.6rem 0.85rem;
    font: inherit; color: var(--ink); background: var(--lit);
    border: 2px solid var(--ink); border-radius: 0;
  }
  & :is(input, select):focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
}
.night .field :is(input:not([type='checkbox']), select) { border-color: var(--porch); }
.field-check {
  grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 0.75rem;

  & input { width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; accent-color: var(--ink); }
  & label { font-weight: 550; }
}
.night .field-check input { accent-color: var(--porch); }

/* The cost calculator's workings on any guide that renders it (trade-parts.njk, calcInputs and calcResults; script:
   assets/js/cost-calculator.js). How the calculator looks is each trade's own stylesheet; these rules are what the
   script needs from any design. The boxes and an empty result stay hidden whatever display a design gives them. The
   example's tag and the prompt hold their room from the start (visibility, not display), so the hand-over moves
   nothing. The demo's cursor is absolute in the calculator's section and takes the ground's colors. */
.calc-inputs[hidden], .calc-value[hidden] { display: none; }
.calc-example, .calc-prompt {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s var(--soft), visibility 0s linear 0.4s;

  &.is-shown { visibility: visible; opacity: 1; transition: opacity 0.4s var(--soft); }
}
.calc-go.is-demo-press { scale: 0.97; }
/* The box looks focused while the demo types, without taking the reader's focus. */
.calc-field input.is-demo-typing { outline: 3px solid var(--fg); outline-offset: 2px; }
.calc-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--fg);
  filter: drop-shadow(0 0 1px var(--ground)) drop-shadow(1px 2px 0 var(--ground));

  & .fa-solid { display: block; margin: -0.08em 0 0 -0.2em; }
  &::after {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: -0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--fg);
    border-radius: 50%;
    opacity: 0;
  }
  &.is-clicking::after { animation: calc-click 0.45s var(--soft); }
}
@keyframes calc-click {
  from { opacity: 1; scale: 0.3; }
  to { opacity: 0; scale: 1.5; }
}
html.reduced :is(.calc-example, .calc-prompt, .calc-go) { transition: none; }

/* Pricing: a plan without a button (Partner) keeps its words in the first column. */
.pricing-plans .plan > :not(.btn) { grid-column: 1; }
.plan-price { white-space: nowrap; }
.plan-unit { font-size: 0.45em; font-weight: 650; letter-spacing: -0.01em; color: var(--fg-muted); white-space: nowrap; }
.btn[disabled] { opacity: 1; cursor: not-allowed; background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
.form-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: var(--t-s); color: var(--fg-muted);

  & .fa-solid { margin-top: 0.25em; color: var(--fg); }
}

/* Drafts pending lawyer review (blocker L6) */
.draft-notice {
  padding-block: 1.25rem; background: var(--ink); color: var(--porch);

  & p { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-weight: 600; }
}
.draft-chip {
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.3em 0.9em; border-radius: 999px;
  background: var(--porch); color: var(--ink); font-size: var(--t-xs); font-weight: 800;
}

/* ---------- Footer: nav, counties and trades, then the words ---------- */
.footer-lists {
  grid-column: 4 / span 4; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem var(--gutter); align-content: start;
}
.footer-list {
  & ul { display: grid; gap: 0; }
  & a { display: inline-flex; align-items: center; min-height: 2.25rem; font-size: var(--t-s); font-weight: 600; }
}
.footer-list-title { font-size: var(--t-xs); color: var(--fg-muted); font-weight: 650; margin-bottom: 0.35rem; }
.footer-nav { grid-row: 2; }
.footer-words {
  grid-column: 8 / -1; grid-row: 2; display: grid; gap: 1rem; align-content: start;

  & .footer-credit, & .footer-legal { grid-column: auto; margin-top: 0; }
}
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.source-credits {
  display: grid; gap: 0.35rem; color: var(--fg-muted);

  & a { color: var(--fg); text-decoration: underline; text-underline-offset: 0.2em; display: inline-flex; min-height: 1.5rem; align-items: center; }
}
/* The City of Chicago's required disclaimer, quoted word for word on every page. */
.required-notice {
  grid-column: 1 / -1; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line);
  max-width: 90ch;

  & blockquote { margin: 0; padding-left: 1rem; border-left: 3px solid var(--fg); }
  & blockquote p { color: var(--fg); }
  & figcaption { margin-top: 0.5rem; font-size: var(--t-xs); }
  & a { text-decoration: underline; text-underline-offset: 0.2em; display: inline-flex; align-items: center; min-height: 1.5rem; }
}
.section-note { margin-top: 1rem; max-width: 36ch; font-weight: 560; }
.zip-table-wrap .zip-caption { margin-top: -0.75rem; margin-bottom: 1.25rem; }

/* Key and legend markers sit beside the first line when a label wraps (house rule). */
:is(.trade-key, .permit-key, .buyer-key, .legend) li { align-items: flex-start; line-height: 1.5; }
:is(.trade-key, .permit-key) li > .dot { flex: 0 0 auto; margin-top: calc((1.5em - 8px) / 2); }
.buyer-key li > .swatch-dot { margin-top: calc((1.5em - 0.75rem) / 2); }
.legend li > .swatch { flex: 0 0 auto; margin-top: calc((1.5em - 0.75rem) / 2); }
@media (hover: hover) {
  .footer-list a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
}

/* ---------- Phone ---------- */
@media (max-width: 767.98px) {
  .section-head, .section-chart, .links-title, .link-group, .link-group + .link-group,
  .cta-title, .cta-body, .page-title, .page-intro, .steps-title, .prose-title, .prose-body,
  .stub-form, .ages-caption, .permit-block { grid-column: 1 / -1; }
  .fact { grid-column: span 2; }
  .footer-lists { grid-column: 1 / -1; grid-row: auto; margin-top: 1.5rem; }
  .footer-nav { grid-row: auto; }
  .footer-words { grid-column: 1 / -1; grid-row: auto; margin-top: 1.5rem; }
  .columns.is-dense .column-bar { width: min(8px, 80%); border-radius: 2px 2px 0 0; }
  .crumbs { font-size: var(--t-xs); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .section-head { grid-column: 1 / -1; }
  .section-chart { grid-column: 1 / -1; }
  .prose-title { grid-column: 1 / span 5; }
  .prose-body { grid-column: 6 / -1; }
  .stub-form { grid-column: 1 / span 8; }
  .footer-lists { grid-column: 4 / span 5; }
  .footer-words { grid-column: 9 / -1; }
  .fact { grid-column: span 6; }
}

/* ---------- Trade pages: the compact hero and the big month chart, shared by the six designs ---------- */
.tight-hero {
  padding: calc(var(--header-h) + clamp(0.75rem, 2svh, 1.5rem)) var(--gutter) clamp(2rem, 4vw, 3.5rem);

  & .tight-hero-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: clamp(1.25rem, 3vw, 2rem);
    align-items: end;
    margin-top: clamp(0.75rem, 2vw, 1.5rem);
  }

  & .tight-greeting { grid-column: 1 / span 8; font-family: var(--f-head); font-size: var(--t-mega); letter-spacing: -0.045em; line-height: 0.96; }
  & .tight-greeting-hello { display: block; font-weight: 460; }
  & .tight-greeting-place { display: block; font-weight: 800; }

  & .tight-count {
    grid-column: 9 / -1;
    align-self: end;
    padding-bottom: 0.5rem;
  }

  & .tight-count-label { font-weight: 650; font-size: 1rem; line-height: 1.2; }
  & .tight-count-num { font-family: var(--f-head); font-weight: 800; font-size: clamp(3rem, 2rem + 4vw, 5.5rem); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
  & .tight-count-unit { color: var(--fg-muted); font-size: var(--t-s); }

  & .tight-headline { grid-column: 1 / span 7; font-size: clamp(1.35rem, 1rem + 1vw, 2.1rem); font-weight: var(--w-head); line-height: 1.08; letter-spacing: -0.02em; }
  & .tight-actions { grid-column: 9 / -1; }
}

@media (max-width: 767px) {
  .tight-hero .tight-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .tight-hero :is(.tight-greeting, .tight-count, .tight-headline, .tight-actions) { grid-column: 1 / -1; }
  .tight-hero .tight-greeting { font-size: clamp(3rem, 16vw, 4.5rem); }
}

/* The big month chart: month and count sit right on top of each bar, and the whole chart fits one screen.
   Bar heights come from the site's own q-NNN classes (--v). On a phone it turns into labeled rows. */
.big-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(0.25rem, 0.9vw, 0.875rem);
  align-items: end;
  height: clamp(17rem, 46svh, 27rem);
  border-bottom: 2px solid var(--fg);

  & .big-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
  & .big-col-month { font-family: var(--f-head); font-weight: 750; font-size: var(--t-s); line-height: 1.1; letter-spacing: -0.01em; }
  & .big-col-value { margin-bottom: 0.35rem; color: var(--fg-muted); font-size: var(--t-xs); line-height: 1.2; font-variant-numeric: tabular-nums; }
  & .big-col-bar { height: calc(var(--v, 0) * 74%); background: var(--bar-off); }
  & .big-col.is-key .big-col-bar { background: var(--fg); }
  & .big-col:is(.is-key, .is-low) .big-col-value { color: var(--fg); font-weight: 750; }
}

@media (max-width: 767px) {
  .big-chart { display: block; height: auto; border-bottom: 0; }
  .big-chart .big-col {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 3.25rem; column-gap: 0.5rem; align-items: center;
    height: auto; padding-block: 0.2rem;
  }
  .big-chart .big-col-month { grid-column: 1; grid-row: 1; }
  .big-chart .big-col-bar { grid-column: 2; grid-row: 1; height: 1.1rem; width: calc(var(--v, 0) * 100%); }
  .big-chart .big-col-value { grid-column: 3; grid-row: 1; margin: 0; text-align: right; }
}

/* ---------- Coverage page: one section per covered state ----------
   The state's name heads the first hanging line (columns 1 to 4); its counties, what a row carries there and each
   trade's page for it run down the second (6 to 12), the row ledger ruled like the trade guides' lists. */
.coverage-market {
  padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line);

  & .grid { align-items: start; row-gap: 2rem; }
}
.coverage-state {
  font-size: clamp(3rem, 1.2rem + 6vw, 7.5rem); line-height: 0.92; letter-spacing: -0.045em; font-weight: 800;

  & a { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.1em; }
}
.coverage-body { grid-column: 6 / -1; min-width: 0; display: grid; gap: clamp(2.25rem, 4.5vw, 3.5rem); }
.coverage-rows {
  border-top: 2px solid var(--fg); border-bottom: 2px solid var(--fg);

  & > li {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0.6rem var(--gutter); align-items: start;
    padding-block: 1.1rem;
  }
  & > li + li { border-top: 1px solid var(--line); }
}
.coverage-field { grid-column: 1; font-size: var(--t-m); font-weight: 650; line-height: 1.3; max-width: 40ch; }
.coverage-where {
  grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem;
  font-family: var(--f-head); font-size: var(--t-m); font-weight: 750; letter-spacing: -0.015em; line-height: 1.25;

  & a { display: inline-flex; align-items: center; min-height: 1.75rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
}
.coverage-kinds {
  grid-column: 1; display: flex; flex-wrap: wrap; gap: 0.4rem;

  & li { padding: 0.3em 0.75em; border: 1px solid var(--line); font-size: var(--t-s); font-weight: 600; }
}
/* A county or trade page this build doesn't have yet (production leaves drafts out): the chip's shape, no link. */
.coverage-plain {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.45em 1.05em;
  border-radius: 999px; border: 2px dashed var(--line); font-weight: 650; font-size: 0.975rem; color: var(--fg-muted);
}
/* What permit records miss (owner's rule, blocker D11), under the permit row, across both columns. */
.coverage-miss {
  grid-column: 1 / -1; margin-top: 0.4rem; padding-top: 0.75rem; border-top: 1px dashed var(--line);
  font-size: var(--t-s); line-height: 1.45; color: var(--fg-muted); max-width: 64ch;
}
@media (max-width: 991.98px) {
  .coverage-body { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .coverage-rows > li { grid-template-columns: minmax(0, 1fr); }
  .coverage-where { grid-column: 1; grid-row: auto; }
}

/* ---------- Header on phones: the national nav's Coverage link ----------
   "Coverage" runs wider than the hub's name, which pushed the Free week button off a 375px screen. Where the nav holds
   that link (national pages; the market pages' nav doesn't change), its gaps and the button's sides close up a little,
   so any label up to that length fits at 375 and 390. */
@media (max-width: 420px) {
  .site-header:has(.nav-coverage) { gap: 0.75rem; }
  .site-nav:has(.nav-coverage) { gap: 0.6rem; }
  .site-nav:has(.nav-coverage) .btn-compact { padding-inline: 0.8em; }
}

/* ---------- Sources page: the national sources, then one section per covered state ----------
   As on the Coverage page, the section's name heads the first hanging line (columns 1 to 4). Its sources run down the
   second (6 to 12). In a state, each agency is ruled off like a ledger: the agency's name, its data sets under a caption
   for each role (property records, a map) with their facts and what HelloSuey changes, then the agency's terms and
   notices, quoted, and the state's law on using its data, where it has one, under the agency whose data it covers.
   The national section lists
   its sources the same way, without agencies: each source's facts, the figures it gives and the guides that show them. */
.sources-market {
  padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line);

  & .grid { align-items: start; row-gap: 2rem; }
}
.sources-state { font-size: clamp(3rem, 1.2rem + 6vw, 7.5rem); line-height: 0.92; letter-spacing: -0.045em; font-weight: 800; }
/* The national section's heading is a phrase, not a name, so it takes the section title size. A word longer than its
   column (a long state name, or the national heading's) breaks rather than spilling past the column. */
:is(.sources-state, .sources-national-title) { hyphens: auto; overflow-wrap: break-word; }
.sources-body { grid-column: 6 / -1; min-width: 0; display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
.sources-agency {
  display: grid; gap: 1.5rem; padding-top: 1.1rem; border-top: 2px solid var(--fg); min-width: 0;
}
.sources-agency-name {
  font-family: var(--f-head); font-size: var(--t-l); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12;
  overflow-wrap: anywhere;
}
.sources-sets { display: grid; gap: 2rem; }
.sources-set .source-name { overflow-wrap: anywhere; }
/* A role's caption sits on the agency's rule like a small label, then its data sets; roles stack with room between. */
.sources-role { display: grid; gap: 0.75rem; min-width: 0; }
.sources-role + .sources-role { margin-top: 0.75rem; }
.sources-role-caption { max-width: 62ch; }
.sources-guides {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem;

  & a { font-weight: 600; }
}
.sources-change {
  display: grid; gap: 0.5rem; margin-top: 1.25rem; max-width: 62ch; font-size: var(--t-s); line-height: 1.5;

  & .change-list-title { margin-top: 0.5rem; }
  & .change-list-title:first-child { margin-top: 0; }
  & .filter-list { font-size: var(--t-s); }
  & .sources-figure { font-size: var(--t-l); font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
  & .sources-figure + p { margin-top: -0.25rem; }
}
.sources-quote {
  margin: 0; max-width: 68ch; min-width: 0;

  & .source-quote { margin-block: 0.5rem; }
  & a { text-decoration: underline; text-underline-offset: 0.2em; display: inline-flex; align-items: center; min-height: 1.5rem; }
}
/* The law sits with its agency's terms and notices, so its lead-in takes the quotes' size. */
.sources-law-body { max-width: 62ch; margin-top: 0.5rem; font-size: var(--t-s); line-height: 1.5; }
/* Side by side, the agencies run far longer than the state's name, so the name and its line stay in view beside them. */
@media (min-width: 992px) {
  .sources-market .section-head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}
@media (max-width: 991.98px) {
  .sources-body { grid-column: 1 / -1; }
}