/* regulation-guide.css — layout for the municipal STR guides (/regulations/…),
   rendered by scripts/build-regulation-guides.mjs. Families come from main.css
   (.card, .kicker, .table, .disclosure, .ending, .links-onward, .btn,
   .page-hero); this sheet only lays them out for the instrument register
   (design constitution §8): the At a glance rows, status labels ("chips" here are
   labels, not controls), the office instruction line, the frame pages' tables and
   the typed-claim notes. The two-readings grid is gone with sources_disagree (v2.2).
   Tokens only; no new palette, face or control family. Visual design is Claude
   Design's call — this is the structural first pass. */

.guide-col { max-width: 50rem; }
.guide-hero .guide-col { display: grid; gap: var(--space-sm); }
.guide-body { display: flex; flex-direction: column; gap: var(--space-md); padding-bottom: var(--space-xl); }
.guide-body > h2 { margin: var(--space-lg) 0 0; font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 500; line-height: var(--leading-snug); color: var(--color-charcoal); scroll-margin-top: var(--space-20); }
.guide-body > p, .guide-body > ul, .guide-body > ol { margin: 0; max-width: 68ch; line-height: var(--leading-relaxed); }
.guide-body--after { padding-top: var(--space-xl); }
.guide-body [id] { scroll-margin-top: var(--space-20); }

/* breadcrumb + credibility (under the H1) */
.guide-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-gray-600); }
.guide-crumbs li + li::before { content: "\203A"; margin-right: var(--space-1-5); color: var(--color-text-light); }
.guide-crumbs a { color: var(--color-primary-dark); }
.guide-credibility { max-width: 62ch; margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-gray-600); }
.guide-credibility a { color: var(--color-primary-dark); font-weight: 600; }

/* status labels: typed claims (fact / reported / under review / stale) */
.guide-chip {
  display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; padding: var(--space-0-5) var(--space-2);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-white);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text); white-space: nowrap;
}
.guide-chip--yes { border-color: var(--color-border-accent); background: var(--color-bg-accent); color: var(--color-primary-dark); }
.guide-chip--maybe { background: var(--color-bg-alt); }
.guide-chip--no { border-color: var(--color-charcoal); }
.guide-chip--review, .guide-chip--reported { border-style: dashed; color: var(--color-gray-600); }
.guide-note, .guide-asof { font-size: var(--text-sm); color: var(--color-gray-600); }
.guide-meta { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-gray-600); }
.guide-meta a { color: var(--color-primary-dark); }

/* At a glance */
.guide-glance { display: grid; gap: var(--space-sm); padding: var(--space-md); margin-top: var(--space-sm); }
.guide-glance .kicker { margin: 0; }
.guide-verdict { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--color-charcoal); }
.guide-glance__rows { display: grid; margin: 0; border-top: 1px solid var(--color-border); }
.guide-glance__row { display: grid; gap: var(--space-1-5); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.guide-glance__row dt { font-weight: 700; color: var(--color-text); }
.guide-glance__row dd { display: flex; flex-direction: column; gap: var(--space-1-5); margin: 0; line-height: var(--leading-normal); }
.guide-lines { display: grid; gap: var(--space-1-5); margin: 0; padding: 0; list-style: none; }
.guide-jump { align-self: flex-start; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark); }
.guide-glance__foot { margin: 0; font-size: var(--text-sm); color: var(--color-gray-600); }
.guide-glance__foot a { color: var(--color-primary-dark); font-weight: 600; }
@media (min-width: 768px) {
  .guide-glance { padding: var(--space-lg); }
  .guide-glance__row { grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--space-md); }
}

.guide-outcomes, .guide-caps, .guide-collectors, .guide-open, .guide-quotes, .guide-contacts, .guide-changes { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.guide-outcomes li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5) var(--space-2); }
.guide-audience { font-weight: 600; }
.guide-scope { flex-basis: 100%; color: var(--color-gray-600); }
.guide-collectors li, .guide-open li, .guide-quotes li, .guide-changes li { padding-left: var(--space-3); border-left: 2px solid var(--color-border); }

/* rule, step and box cards */
.guide-rules, .guide-steps-cards { display: grid; gap: var(--space-sm); }
.guide-rule, .guide-step, .guide-box, .guide-alert { display: grid; gap: var(--space-2); padding: var(--space-md); }
.guide-rule .kicker, .guide-step .kicker, .guide-box .kicker { margin: 0; }
.guide-step h3, .guide-h3 { margin: var(--space-xs) 0 0; font-family: var(--font-body); font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-snug); }
.guide-dl { display: grid; gap: var(--space-2); margin: 0; }
.guide-dl > div { display: grid; gap: var(--space-0-5); }
.guide-dl dt { font-size: var(--text-sm); font-weight: 700; color: var(--color-gray-600); }
.guide-dl dd { margin: 0; }
.guide-dl ul { margin: 0; padding-left: var(--space-md); }
@media (min-width: 768px) { .guide-dl > div { grid-template-columns: 10rem minmax(0, 1fr); column-gap: var(--space-md); } }
.guide-quote { margin: 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-border-accent); background: var(--color-bg); }
.guide-quote p { margin: 0; font-style: italic; }
.guide-steplist { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-md); }
.guide-contact__office { font-weight: 600; }
.guide-caption { padding: var(--space-3) var(--space-2) 0; caption-side: top; text-align: left; font-weight: 700; }
.guide-costs td, .guide-sources td { vertical-align: top; }
.guide-notcovered { padding: var(--space-md) 0; border-top: 1px solid var(--color-border); }
.guide-notcovered .kicker { margin-bottom: var(--space-xs); }
.guide-notcovered p { margin: 0; color: var(--color-gray-600); }
.guide-related { margin-top: 0; }

/* end CTA (one per page) */
.guide-cta__checker { margin: 0; }
.guide-cta__checker a { font-weight: 600; color: var(--color-primary-dark); }
.guide-cta .guide-locations { grid-column: 1 / -1; }

/* rule-change alert: unwired placeholder (fieldset disabled until the mailer exists) */
.guide-alert__title { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; }
.guide-alert__form fieldset { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.guide-alert__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guide-alert__field { display: grid; gap: var(--space-1); font-weight: 600; }
.guide-alert__field input { min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font: inherit; font-size: var(--text-base); font-weight: 400; }
.guide-alert__consent { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 44px; padding: var(--space-2) 0; font-size: var(--text-sm); cursor: pointer; }
.guide-alert__consent input { flex: none; width: var(--space-6); height: var(--space-6); margin-top: 0; font-size: var(--text-base); }
.guide-alert__sender { margin: 0; font-size: var(--text-sm); color: var(--color-gray-600); }
.guide-alert fieldset[disabled] { opacity: 0.7; }
.guide-alert .btn { justify-self: start; }

/* collapsed reference sections */
.guide-collapse { max-width: none; }
.guide-faq { display: grid; gap: var(--space-md); }
.guide-faq__item h3 { margin: 0 0 var(--space-1); font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; color: var(--color-text); }
.guide-faq__item p { margin: 0; }
.guide-date { font-family: var(--font-mono); font-size: var(--text-sm); }
.guide-disclaimer { padding-top: var(--space-md); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-gray-600); }
.guide-disclaimer p { margin: 0 0 var(--space-xs); }
.guide-disclaimer a { color: var(--color-primary-dark); font-weight: 600; }

/* hub rows (staged; the /regulations/ hub renders them between its markers at 3b) */
.guide-hub-region h2 { margin: var(--space-lg) 0 0; font-family: var(--font-display); font-size: var(--text-display-md); font-weight: 500; }
.guide-hub-checker { display: inline-block; margin-left: var(--space-2); font-size: var(--text-sm); }

/* v2.2 (TEMPLATE 2.2.0 §6.2-6.8): a field waiting on an office shows the office
   instruction ("Ask <office> …") in the value's place, in the running text colour */
.guide-instruction { color: var(--color-text); font-weight: 500; }
.guide-instruction a { color: var(--color-primary-dark); font-weight: 600; }

/* jump links and table links meet the 44px touch floor (WCAG 2.5.8; the table
   links are controls in a cell, not running text) */
.guide-jump { display: inline-flex; align-items: center; min-height: var(--touch-target-min); }
.guide-page .table td a, .guide-cta__checker a { display: inline-flex; align-items: center; min-height: var(--touch-target-min); }
.guide-page .table tbody th { vertical-align: top; }
.guide-tel { white-space: nowrap; }

/* the phone hint under every guide table shows on phones; main.css shows it only
   where js marks the box .is-overflowing, and the guides load no table script */
@media (max-width: 699px) { .guide-page .table + .table__hint { display: block; } }
.guide-page .table + .table__hint { margin-top: var(--space-2); }

/* frame pages: the hub's finder and tables, the levy comparison's stacked cell */
.guide-finder { display: grid; gap: var(--space-2); max-width: 32rem; }
.guide-finder__field { display: grid; gap: var(--space-1); font-weight: 600; }
.guide-finder__field input { min-height: var(--touch-target-min); padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font: inherit; font-size: var(--text-base); }
.guide-finder .btn { justify-self: start; min-height: var(--touch-target-min); }
.guide-cell-list { display: grid; gap: 0; margin: 0 0 var(--space-1); padding: 0; list-style: none; }
.guide-levies tbody th { width: 42%; }
.guide-levy-rate { display: block; margin-top: var(--space-1); font-weight: 400; font-size: var(--text-sm); color: var(--color-gray-600); }
.guide-levies td { font-size: var(--text-sm); }
.guide-hub-table table { min-width: 40rem; }
.guide-hub-table th[scope="row"] { min-width: 9rem; }
.guide-levies td, .guide-hub-table td, .guide-plan-areas td, .guide-legend td { vertical-align: top; }
.guide-gazetteer__unit h3 { margin: var(--space-lg) 0 var(--space-1); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; }
.guide-gazetteer__unit .table { margin-top: var(--space-2); }
.guide-lineage { display: grid; gap: var(--space-1); }
.guide-lineage p { margin: 0; }
.guide-checker { margin-top: var(--space-sm); }
.guide-noscript-list { columns: 2; margin: var(--space-2) 0 0; padding-left: var(--space-md); }
.guide-checklist li { line-height: var(--leading-relaxed); }