/*
 * Components for the pages built from rules.json: rule tables, summary
 * strips, tier labels, "being confirmed" notes, the illustrative box,
 * numbered sources, lot diagrams, scenario and service cards, the county
 * timeline, the start chooser and the intake form. Uses the tokens defined
 * in site.css.
 */

.boco-h1 { max-width: 24ch; }
.boco-h2 { max-width: 34ch; }
.boco-lead { margin-top: 1.5rem; max-width: 42rem; font-size: 1.125rem; line-height: 1.6; color: var(--text-muted); }
.boco-lead + .boco-lead { margin-top: 1rem; font-size: 1rem; }
.boco-reviewed { margin-top: 1.25rem; color: var(--text-subtle); }
.boco-intro { margin-top: 1rem; max-width: 46rem; color: var(--text-muted); }
.boco-intro p + p, .boco-prose p + p { margin-top: .9rem; }
.boco-intro-text { max-width: 46rem; color: var(--text-muted); }
.boco-prose { max-width: 46rem; color: var(--text-muted); line-height: 1.65; }
.boco-prose h3 { margin-top: 2rem; color: var(--navy); }
.boco-prose ul, .boco-prose ol, .boco-list { margin-top: .75rem; padding-left: 1.25rem; list-style: disc; }
.boco-prose ol { list-style: decimal; }
.boco-prose li + li, .boco-list li + li { margin-top: .4rem; }
.boco-prose a, .boco-intro a, .boco-intro-text a, .boco-card a:not(.boco-btn), .boco-held-note a, .boco-observed-note a, .boco-sources a, .boco-note a, .boco-service-card a:not(.boco-btn) { color: var(--blue-mid); text-decoration: underline; text-underline-offset: 2px; }
.boco-disclaimer { margin-top: 1.5rem; max-width: 46rem; color: var(--text-subtle); }
.boco-grid { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 768px) {
	.boco-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.boco-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Facts and tier labels */
.boco-fact { overflow-wrap: anywhere; }
.boco-ref { font-size: .7em; margin-left: .1em; }
.boco-ref a { color: var(--blue-mid); text-decoration: none; }
.boco-ref a:hover { text-decoration: underline; }
.boco-pill { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: .05rem .55rem; font-size: .75rem; font-weight: 600; line-height: 1.5; letter-spacing: .01em; vertical-align: .1em; white-space: nowrap; }
.boco-pill-held { border-color: var(--amber); color: var(--amber-ink); background: #fbeee8; }
.boco-pill-observed { border-color: #b9c7a9; color: var(--pine); background: #eef2e7; }
.boco-pill-official { border-color: #b7c7d4; color: #24506c; background: #eaf0f5; }
.boco-pill-illustrative { border-color: var(--line); color: var(--text-subtle); background: var(--paper); }
.boco-held-note, .boco-observed-note { font-size: .875rem; color: var(--text-subtle); }
.boco-held .boco-held-note { display: inline; }
.boco-cond { display: block; margin-top: .35rem; font-size: .875rem; color: var(--text-subtle); }
.boco-eff { font-size: .875rem; color: var(--text-subtle); }

/* Rule tables */
.boco-rules { margin-top: 2.25rem; }
.boco-rules + .boco-rules { margin-top: 2.5rem; }
.boco-rules h3 { margin-bottom: .75rem; }
/* position: relative keeps the screen-reader caption (absolutely positioned)
   inside the scroll box, so a wide table never widens the page on phones. */
.boco-table-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); }
.boco-table { width: 100%; min-width: 36rem; border-collapse: collapse; text-align: left; }
.boco-table thead th { padding: .75rem 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); border-bottom: 1px solid var(--line); }
.boco-table thead th:first-child { width: 30%; }
.boco-table thead th:last-child { width: 22%; }
.boco-table tbody tr + tr { border-top: 1px solid var(--line); }
.boco-table tbody th { padding: 1rem; vertical-align: top; font-size: 15px; font-weight: 600; color: var(--navy); }
.boco-table tbody td { padding: 1rem; vertical-align: top; color: var(--text-muted); }
.boco-table .boco-value { color: var(--navy); }
.boco-src a { font-size: .875rem; color: var(--blue-mid); text-decoration: underline; text-underline-offset: 2px; }
.boco-src .boco-section, .boco-src .boco-checked { display: block; margin-top: .2rem; font-size: .8125rem; color: var(--text-subtle); }
.boco-src .boco-srcnum { display: inline-block; margin-top: .2rem; font-size: .75rem; text-decoration: none; color: var(--text-subtle); }

/* Summary strip */
.boco-strip { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 640px) { .boco-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .boco-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .boco-strip.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.boco-strip-item { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 1.1rem 1.1rem 1.25rem; }
.boco-icon { width: 28px; height: 28px; color: var(--amber-ink); }
.boco-strip-label { margin-top: .6rem; font-size: .875rem; font-weight: 600; color: var(--text-subtle); }
.boco-strip-value { margin-top: .3rem; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.35; color: var(--navy); }
.boco-strip-value .boco-held-note { display: block; margin-top: .3rem; font-family: var(--font-sans); }

/* Cards */
.boco-card { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 1.35rem; color: var(--text-muted); }
.boco-card h3 { color: var(--navy); }
.boco-card p + p, .boco-card p + ul, .boco-card ul + p { margin-top: .6rem; }
.boco-card.is-alt { background: var(--paper-alt); }
.boco-card .boco-kicker { font-size: .875rem; font-weight: 600; color: var(--text-subtle); }
.boco-dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; margin-top: .75rem; }
.boco-dl dt { color: var(--text-muted); }
.boco-dl dd { text-align: right; color: var(--navy); font-weight: 600; }
.boco-dl .boco-dl-total { border-top: 1px solid var(--line); padding-top: .35rem; }
.boco-dl dd .boco-observed-note { display: none; }
.boco-muted { color: var(--text-subtle); }

/* Illustrative box */
.boco-illustrative { margin-top: 2rem; border: 2px dashed var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 1.35rem; color: var(--text-muted); }
.boco-illustrative-title { font-family: var(--font-display); font-size: 1.25rem; color: var(--navy); }
.boco-illustrative table { width: 100%; margin-top: 1rem; border-collapse: collapse; }
.boco-illustrative th, .boco-illustrative td { padding: .5rem .25rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.boco-illustrative th { font-weight: 600; color: var(--navy); }
.boco-illustrative .boco-calc { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-subtle); }
.boco-illustrative .boco-amount { text-align: right; white-space: nowrap; color: var(--navy); font-weight: 600; }
.boco-illustrative tr.is-total th, .boco-illustrative tr.is-total td { border-top: 2px solid var(--navy); }
.boco-built-on { margin-top: 1rem; font-weight: 600; color: var(--navy); }
.boco-built-list { margin-top: .5rem; padding-left: 1.25rem; list-style: disc; font-size: .9375rem; }
.boco-built-list li + li { margin-top: .3rem; }

/* Sources */
.boco-sources { margin-top: 1.25rem; max-width: 52rem; padding-left: 1.5rem; list-style: decimal; color: var(--text-muted); }
.boco-sources li + li { margin-top: .6rem; }
.boco-sources li:target { background: #fbeee8; }
.boco-src-url { display: block; font-size: .8125rem; color: var(--text-subtle); overflow-wrap: anywhere; }
.boco-sources .boco-section, .boco-sources .boco-checked { font-size: .875rem; color: var(--text-subtle); }

/* Diagrams */
.boco-diagram-row { display: grid; gap: 1.5rem; margin-top: 2rem; align-items: start; }
@media (min-width: 900px) { .boco-diagram-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.boco-figure { border: 1px solid var(--line); border-radius: var(--radius-card); background: #fafbfa; padding: 1rem; }
.boco-figure svg { display: block; width: 100%; height: auto; }
.boco-figure figcaption { margin-top: .6rem; font-size: .875rem; color: var(--text-subtle); }

/* Timeline (county rewrite) */
.boco-timeline { margin-top: 2rem; border-left: 2px solid var(--line); padding-left: 1.5rem; }
.boco-timeline li { position: relative; padding-bottom: 1.5rem; }
.boco-timeline li::before { content: ""; position: absolute; left: calc(-1.5rem - 7px); top: .35rem; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--navy); background: var(--paper); }
.boco-timeline li.is-done::before { background: var(--navy); }
.boco-timeline li.is-est::before { border-style: dashed; border-color: var(--amber-ink); }
.boco-timeline .boco-when { font-weight: 600; color: var(--navy); }
.boco-timeline .boco-what { margin-top: .2rem; color: var(--text-muted); }

/* Permit stages */
.boco-steps { counter-reset: step; display: grid; gap: 1rem; margin-top: 2rem; }
.boco-steps > li { counter-increment: step; position: relative; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 1.1rem 1.1rem 1.1rem 3.5rem; color: var(--text-muted); }
.boco-steps > li::before { content: counter(step); position: absolute; left: 1rem; top: 1rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--navy); color: var(--paper); font-weight: 700; text-align: center; line-height: 1.75rem; font-size: .875rem; }
.boco-steps h3 { color: var(--navy); }
.boco-steps p { margin-top: .35rem; }

/* Buttons and CTAs */
.boco-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.boco-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.25rem; border-radius: var(--radius-control); background: var(--orange); color: #fff; font-weight: 600; text-decoration: none; transition: background .2s; }
.boco-btn:hover { background: var(--orange-hover); }
.boco-btn-quiet { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.boco-btn-quiet:hover { background: var(--paper-alt); }
.boco-signup-row { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .boco-signup-row.has-side { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.boco-service-card { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 1.5rem; color: var(--text-muted); }
.boco-service-card p { margin-top: .6rem; }
.boco-next { border-top: 1px solid var(--line); }
.boco-next-label { font-size: .875rem; font-weight: 600; color: var(--text-subtle); }
.boco-next-link { margin-top: .25rem; font-family: var(--font-display); font-size: 1.35rem; }
.boco-next-link a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.boco-next-why { margin-top: .25rem; color: var(--text-subtle); }
.boco-note { margin-top: 1.25rem; max-width: 46rem; border-left: 3px solid var(--amber); padding: .6rem 1rem; background: #fdf3ee; color: var(--text-muted); }

/* Start chooser */
.boco-choices { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 900px) { .boco-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.boco-choice { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); padding: 1.5rem; color: var(--text-muted); }
.boco-choice h2 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; color: var(--navy); }
.boco-choice p { margin-top: .6rem; }
.boco-choice .boco-actions { margin-top: auto; padding-top: 1rem; }
.boco-choice select { width: 100%; margin-top: .4rem; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--paper); padding: 0 .75rem; color: var(--navy); }

/* Updates log */
.boco-log { margin-top: 2rem; }
.boco-log > li { display: grid; gap: .75rem; border-top: 1px solid var(--line); padding: 1.5rem 0; }
.boco-log > li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .boco-log > li { grid-template-columns: 11rem minmax(0, 1fr); } }
.boco-log .boco-when { font-weight: 600; color: var(--navy); font-size: .9375rem; }
.boco-log .boco-where { font-size: .875rem; color: var(--text-subtle); }
.boco-log h2 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; color: var(--navy); }
.boco-log p { margin-top: .35rem; color: var(--text-muted); }
.boco-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.boco-filter a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--paper); color: var(--text-muted); font-weight: 500; text-decoration: none; }
.boco-filter a[aria-current="true"] { border-color: var(--navy); color: var(--navy); font-weight: 600; }

/* Intake form */
.boco-form { display: grid; gap: 1.1rem; margin-top: 1.5rem; max-width: 40rem; }
.boco-form label, .boco-form legend { display: block; margin-bottom: .35rem; font-size: .9375rem; font-weight: 600; color: var(--navy); }
.boco-form input[type="text"], .boco-form input[type="email"], .boco-form select, .boco-form textarea { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--paper); padding: .55rem .75rem; font-size: 16px; color: var(--navy); }
.boco-form .boco-check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; color: var(--text-muted); }
.boco-form .boco-check input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex: none; }
.boco-form .boco-help { font-size: .875rem; color: var(--text-subtle); margin-top: .3rem; }
.boco-form button { justify-self: start; min-height: 44px; padding: 0 1.5rem; border-radius: var(--radius-control); background: var(--navy); color: var(--paper); font-weight: 600; }
.boco-alert { margin-top: 1rem; border: 1px solid var(--amber-ink); border-radius: var(--radius-control); padding: .75rem 1rem; color: var(--amber-ink); background: #fdf3ee; }
.boco-ok { margin-top: 1rem; border: 1px solid var(--pine); border-radius: var(--radius-control); padding: .75rem 1rem; color: var(--pine); background: #eef2e7; }

/* Small screens */
@media (max-width: 639px) {
	.boco-table { min-width: 32rem; }
	.boco-next-link { font-size: 1.15rem; }
}

/* site.css orders .tap after .justify-start in the same layer, which centered
   the updates-form radio labels; restore the intended alignment. */
.tap.justify-start { justify-content: flex-start; }
.boco-lead a { color: var(--blue-mid); text-decoration: underline; text-underline-offset: 2px; }
.boco-h2 + * { margin-top: 1.25rem; }

/* Site header (parts/site-header.php). The logo is forest green; the one
   orange button stays in the bar from 370px up and moves into the menu
   below that, so nothing overflows at 320px. */
html { scroll-padding-top: 6.5rem; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header-bar { display: flex; align-items: center; gap: 1.75rem; height: 80px; }
.site-brand { display: inline-flex; flex: none; align-items: center; gap: .65rem; color: var(--navy); }
.site-brand-mark { width: 40px; flex: none; }
.site-brand-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.site-nav { display: none; margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: 1.75rem; }
.site-nav a { font-size: 15px; font-weight: 600; color: var(--navy); }
.site-nav a:hover { color: var(--orange); }
.site-header-cta { margin-left: auto; flex: none; min-height: 48px; font-size: 15px; }
.site-nav + .site-header-cta { margin-left: 0; }
.site-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--navy); }
.site-menu-toggle svg { width: 20px; height: 20px; }
.site-menu { position: absolute; left: 0; right: 0; top: 100%; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); background: var(--paper); }
.site-menu ul { display: grid; gap: .25rem; padding-block: 1rem; }
.site-menu a:not(.boco-btn) { display: flex; align-items: center; min-height: 44px; border-radius: var(--radius-control); padding-inline: .75rem; font-weight: 600; color: var(--navy); }
.site-menu a:not(.boco-btn):hover { background: var(--paper-alt); }
.site-menu-cta { margin-top: .5rem; }
.site-menu-cta .boco-btn { justify-content: center; width: 100%; }
@media (max-width: 899px) {
	.site-header-bar { height: 72px; gap: .6rem; }
	.site-brand { gap: .5rem; }
	.site-brand-mark { width: 30px; }
	.site-brand-name { font-size: 1.2rem; }
	.site-header-cta { min-height: 44px; padding-inline: .7rem; font-size: 13px; }
}
@media (max-width: 369px) {
	.site-header-cta { display: none; }
	.site-menu-wrap { margin-left: auto; }
}
@media (min-width: 900px) {
	.site-nav { display: block; }
	.site-menu-wrap { display: none; }
}
@media (min-width: 1100px) {
	.site-nav ul { gap: 2rem; }
}