/* LBCI launch interface (Local Building Conditions Index 1.0). Presentation only: the page, the method page and the
   "Your area" section of a building result. Builds on ici-foundation.css tokens; never changes a number. */

/* page frame */
.lbc-page .lbc-hero { padding-block: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 1.75rem); }
.lbc-page .lbc-hero h1 { max-width: 22ch; margin: 0; }
.lbc-page .lbc-hero .lead { margin: 0.75rem 0 0; }
.lbc-page .lbc-tool { padding-block: 0 clamp(2rem, 4vw, 3rem); }
.lbc-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1rem, 2.5vw, 1.5rem); box-shadow: 0 1px 2px rgba(10, 42, 66, 0.05); }
.lbc-panel .lbc-search { margin: 0; }
.lbc-search > div { flex: 1 1 14rem; min-width: 0; }
.lbc-search input, .lbc-search select { width: 100%; min-width: 0; }
.lbc-search .btn { flex: 0 0 auto; }
.lbc-try { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.75rem 0 0; font-size: 0.88rem; color: var(--muted); }
.lbc-try button { font: 600 0.85rem/1 var(--font-body); color: var(--action); background: var(--wash); border: 1px solid var(--rule); border-radius: 999px; padding: 0.4rem 0.7rem; cursor: pointer; }
.lbc-try button:hover { border-color: var(--action); }
.lbc-try button:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.lbc-privacy { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); }
#lbc-result:not(:empty) { margin-top: 1.5rem; }

/* explainer shown before any lookup */
.lbc-explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0 0; }
.lbc-explain > div { border-top: 2px solid var(--ink); padding-top: 0.75rem; min-width: 0; }
.lbc-explain h2 { font-size: 1.02rem; margin: 0 0 0.35rem; }
.lbc-explain p, .lbc-explain ul { margin: 0; font-size: 0.92rem; }
.lbc-explain ul { padding-left: 1.1rem; }

/* method status, shown on every result */
.lbc-status { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; font: 600 0.8rem/1.3 var(--font-body); color: var(--ember-ink); background: var(--ember-wash); border: 1px solid rgba(163, 71, 0, 0.25); border-radius: 999px; padding: 0.3rem 0.75rem; max-width: 100%; }
.lbc-status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ember-bar); flex: 0 0 auto; }

/* headline */
.lbc-top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
@media (max-width: 47.99rem) { .lbc-top { grid-template-columns: 1fr; } }
.lbc-score .lbc-big { font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); }
.lbc-reading { margin: 0.6rem 0 0; font-size: 0.98rem; color: var(--body); max-width: var(--measure); }
.lbc-range-short { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--muted); }
.lbc-scale { margin: 0.75rem 0 0; }
.lbc-scale-svg { display: block; width: 100%; height: 12px; overflow: visible; }
.lbc-scale-track { fill: #D7E4E9; }
.lbc-scale-range { fill: rgba(0, 96, 122, 0.3); }
.lbc-scale-mark { fill: var(--ink); }
.lbc-scale-ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.35rem; font-size: 0.75rem; color: var(--muted); }
.lbc-cov-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.88rem; }
.lbc-cov-list li { display: flex; align-items: center; gap: 0.45rem; }
.lbc-cov-list li span[aria-hidden] { width: 0.65rem; height: 0.65rem; border-radius: 2px; border: 1.5px solid var(--logo-teal); flex: 0 0 auto; }
.lbc-cov-list li.is-on span[aria-hidden] { background: var(--logo-teal); }
.lbc-cov-list li.is-off { color: var(--muted); }
.lbc-cov-list li.is-off span[aria-hidden] { border-color: var(--logo-slate); border-style: dashed; }
.lbc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* geography */
.lbc-geo { background: var(--wash); border-radius: var(--radius); padding: 0.75rem 1rem; max-width: none; }
.lbc-geo p { margin: 0.15rem 0; max-width: var(--measure); }

/* components */
.lbc-comp-scale { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--muted); }
.lbc-weight { display: inline-block; font-weight: 600; color: var(--logo-slate-text); }
.lbc-comp-note { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--muted); }
.lbc-comp-na { border-style: dashed; }

/* calculation */
.lbc-calc { margin: 1rem 0 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 0.7rem 1rem; }
.lbc-calc summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.lbc-calc ol { margin: 0.6rem 0 0; padding-left: 1.2rem; font-size: 0.92rem; display: grid; gap: 0.3rem; }
.lbc-calc .lbc-expl, .lbc-calc .lbc-range { font-size: 0.86rem; color: var(--muted); max-width: var(--measure); }

/* reading guidance */
.lbc-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.lbc-uses > div { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.8rem 1rem; background: var(--surface); min-width: 0; }
.lbc-uses > div:last-child { background: var(--wash); }
.lbc-uses ul { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; display: grid; gap: 0.25rem; }

/* method page */
.lbc-method-page .lbc-steps { counter-reset: s; list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.6rem; max-width: var(--measure); }
.lbc-method-page .lbc-steps li { counter-increment: s; position: relative; padding-left: 2.2rem; }
.lbc-method-page .lbc-steps li::before { content: counter(s); position: absolute; left: 0; top: 0.05rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ink); color: var(--white, #fff); font: 700 0.8rem/1.5rem var(--font-body); text-align: center; }
.lbc-review { border-left: 3px solid var(--ember-bar); background: var(--ember-wash); padding: 0.8rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; max-width: var(--measure); }
.lbc-review p { margin: 0.25rem 0; }

@media print {
  .site-header, .site-footer, .lbc-panel form, .lbc-try, .lbc-explain, .skip-link { display: none !important; }
  .lbc-calc { break-inside: avoid; } .lbc-calc[open] summary, .lbc-calc summary { list-style: none; }
  .lbc-calc > *:not(summary) { display: block !important; }
  .lbc-status { border: 1px solid #999; }
  .lbc-comp { break-inside: avoid; }
}
.lbc-uses .lbc-k, .lbc-geo .lbc-k { color: var(--ink); }

/* component bars are SVG (no inline styles under the site CSP) */
svg.lbc-bar { display: block; width: 100%; height: 6px; background: none; border-radius: 3px; margin: 0.45rem 0 0.4rem; }
.lbc-bar-track { fill: var(--wash); }
.lbc-bar-fill { fill: var(--logo-teal); }
.lbc-page .lbc-status-hero { margin-top: 1rem; }
.lbc-page .btn-row { margin-top: 1.25rem; }

/* spacing utilities for the method page (inline style attributes are blocked by the site CSP) */
.lbc-mt-s { margin-top: 0.75rem; } .lbc-mt-m { margin-top: 1.25rem; } .lbc-mt-l { margin-top: 1.75rem; } .lbc-mt-xl { margin-top: 2.5rem; }
h1.lbc-h1-narrow { max-width: 22ch; }