/* Building Alerts (early access). Loaded only by the homepage and /building-alerts/.
   Uses the foundation tokens; adds no new colour. Light, ruled, no card shadows. */

/* ---- Homepage strip, above the masthead ---- */
.ba-strip {
  background: var(--tint-teal);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.35;
}
.ba-strip-inner {
  /* same content edge as the masthead below it at every width */
  width: min(94rem, 100% - var(--gutter) * 2);
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  padding-block: 0.5rem;
}
.ba-strip-label {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: 0.01em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.ba-strip-label::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--ember);
  flex: none;
}
.ba-stage {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--ember-ink);
  background: var(--ember-wash);
  border: 1px solid #F3D3B2;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}
.ba-strip-text { margin: 0; color: var(--body); flex: 1 1 22rem; }
.ba-strip-link {
  color: var(--action-deep);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.ba-strip-link:hover { color: var(--ink); }
.ba-strip-link:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 640px) {
  .ba-strip { font-size: 0.82rem; }
  .ba-strip-text { display: none; }
  .ba-strip-inner { flex-wrap: nowrap; justify-content: space-between; gap: 0.5rem; padding-block: 0; }
  .ba-strip-label { gap: 0.35rem; white-space: nowrap; }
  .ba-stage { font-size: 0.7rem; padding-inline: 0.4rem; white-space: nowrap; }
  .ba-strip-label::before { display: none; }
}

/* ---- The condition-to-building chain (homepage section and /building-alerts/) ---- */
.ba-band .section-open { max-width: none; }
.ba-head { max-width: var(--measure); }
.ba-chain {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  max-width: none;
}
.ba-chain > li {
  padding: 1.25rem 1.5rem 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.ba-chain > li + li { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
.ba-chain .ba-condition {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 650;
  color: var(--ink);
  margin: 0 0 1rem;
}
.ba-steps { margin: 0; }
.ba-steps > div { padding: 0.6rem 0 0.6rem 1rem; border-left: 3px solid var(--logo-mist); }
.ba-steps > div + div { margin-top: 0.35rem; }
.ba-steps > div:last-child { border-left-color: var(--action); }
.ba-steps dt { font-size: 0.8rem; font-weight: 650; color: var(--muted); margin: 0 0 0.15rem; }
.ba-steps dd { margin: 0; color: var(--body); }
.ba-note { margin-top: 1.5rem; color: var(--muted); max-width: var(--measure); }
.ba-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.5rem; }
@media (max-width: 860px) {
  .ba-chain { grid-template-columns: 1fr; }
  /* stays below the section heading, which drops to 1.35rem at narrow widths */
  .ba-chain .ba-condition { font-size: 1.15rem; margin-bottom: 0.75rem; }
  .ba-chain > li, .ba-chain > li + li { padding: 1.25rem 0; border-left: 0; }
}

/* ---- /building-alerts/ page ---- */
.ba-page-sub { max-width: 60ch; }
.ba-status {
  display: inline-flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin: 1rem 0 0; padding: 0.6rem 0.9rem;
  /* ICI teal, not the tan/ember wash (founder correction, 27 September 2026) */
  background: var(--tint-teal); border-left: 3px solid var(--logo-teal); color: var(--ink);
}
.ba-contents { list-style: none; padding: 0; margin: 1.25rem 0 0; max-width: var(--measure); }
.ba-contents li { padding: 0.65rem 0; border-top: 1px solid var(--rule); }
.ba-contents li:last-child { border-bottom: 1px solid var(--rule); }
.ba-tools {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 2rem;
}
.ba-tools li { padding: 1rem 0; border-top: 1px solid var(--rule); }
.ba-tools a { font-weight: 650; color: var(--action-deep); }
.ba-tools p { margin: 0.3rem 0 0; color: var(--body); }
.ba-join { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem 3rem; align-items: start; }
.ba-join-intro p { max-width: 46ch; }
.ba-form { display: grid; gap: 1rem; }
.ba-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ba-limits { max-width: var(--measure); padding-left: 1.1rem; }
.ba-limits li + li { margin-top: 0.4rem; }
@media (max-width: 860px) {
  .ba-join, .ba-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .ba-strip-inner { flex-wrap: wrap; row-gap: 0; }
}

/* ---- confirmation and stop pages (Phase A) ---- */
.ba-stop { max-width: 46rem; }
.ba-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

/* ---- /building-alerts/ page (founder correction, 27 September 2026): signup first, ICI neutral surface, no tan ---- */
.ba-page .ba-hero { background: var(--paper); border-bottom: 1px solid var(--rule); padding: clamp(1.25rem, 3vw, 2.25rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.ba-page .ba-hero-copy { max-width: 46rem; }
.ba-page .ba-hero .res-head h1 { margin-bottom: 0.35rem; }
.ba-page .ba-page-sub { margin: 0 0 0.6rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--body); }
.ba-page .ba-status { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; margin: 0 0 1.25rem; padding: 0.35rem 0.8rem;
  font-size: 0.875rem; color: var(--ink); background: var(--tint-teal); border-radius: 999px; }
.ba-signup { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--logo-teal); border-radius: var(--radius);
  padding: clamp(1rem, 2.2vw, 1.5rem); box-shadow: 0 1px 2px rgba(10, 42, 66, 0.06); }
.ba-signup-head h2 { margin: 0 0 0.25rem; font-size: 1.2rem; }
.ba-signup-lede { margin: 0 0 1rem; font-size: 0.875rem; color: var(--muted); max-width: 60ch; }
.ba-signup .lead-capture { padding: 0; margin: 0; background: none; border: 0; }
.ba-form .ba-fields { display: grid; gap: 0.75rem 1rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
.ba-form .ba-fields .field { margin: 0; }
.ba-form .ba-fields input, .ba-form .ba-fields select { width: 100%; min-height: 44px; }
.ba-form .ba-field-place .field-hint { display: block; margin-top: 0.25rem; font-size: 0.75rem; }
.ba-form .ba-permission { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
.ba-form .ba-permission-legend { font-weight: 650; font-size: 0.875rem; color: var(--ink); padding: 0; margin-bottom: 0.4rem; }
.ba-form .ba-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; align-items: start; cursor: pointer; }
.ba-form .ba-consent input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--action); }
.ba-form .ba-consent-body { display: grid; gap: 0.15rem; }
.ba-form .ba-consent-title { font-weight: 650; color: var(--ink); }
.ba-form .ba-consent-note { font-size: 0.8125rem; line-height: 1.5; color: var(--body); max-width: 78ch; }
.ba-form .ba-identification { margin: 0.5rem 0 0 1.9rem; font-size: 0.75rem; line-height: 1.45; color: var(--muted); max-width: 78ch; }
.ba-form .ba-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1rem; }
.ba-form .ba-submit { min-width: 12rem; }
.ba-form .ba-details { margin: 0; border: 0; padding: 0; font-size: 0.8125rem; }
.ba-form .ba-details > summary { cursor: pointer; color: var(--action); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.ba-form .ba-details[open] { flex-basis: 100%; }
.ba-form .ba-details p { margin: 0.3rem 0; max-width: 78ch; }
.ba-form [data-ba-error]:empty, .ba-form [data-ba-status]:empty { display: none; }
.ba-form [data-ba-error] { margin: 0.75rem 0 0; }
.ba-success { border-left: 4px solid var(--ev-documented); background: var(--tint-teal); border-radius: var(--radius); padding: 1rem 1.15rem; }
.ba-success:focus { outline: 3px solid var(--action); outline-offset: 2px; }
.ba-success p { margin: 0 0 0.25rem; }
.ba-success-title { font-family: var(--font-display); font-weight: 650; font-size: 1.15rem; color: var(--ink); }
.ba-success-fine { font-size: 0.875rem; color: var(--muted); }
.ba-page .ba-section { padding-block: clamp(1.75rem, 4vw, 3rem); }
.ba-page .ba-section-alt { background: var(--wash); }
.ba-page .ba-section h2 { margin: 0 0 0.75rem; font-size: 1.3rem; }
.ba-how { list-style: none; counter-reset: ba; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ba-how li { counter-increment: ba; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.8rem 0.9rem; font-size: 0.9rem; }
.ba-how li::before { content: counter(ba); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: 0.4rem; border-radius: 50%;
  background: var(--logo-teal); color: #fff; font-size: 0.75rem; font-weight: 700; }
.ba-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ba-examples li { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--logo-teal); border-radius: var(--radius); padding: 0.8rem 0.9rem; }
.ba-examples .ba-condition { margin: 0 0 0.4rem; font-size: 1rem; }
.ba-examples p { margin: 0 0 0.35rem; font-size: 0.875rem; }
.ba-examples .ba-k { display: block; font-size: 0.75rem; font-weight: 650; color: var(--muted); }
.ba-two { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ba-page .ba-contents, .ba-page .ba-limits { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; display: grid; gap: 0.3rem; }
.ba-page .ba-tools { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ba-page .ba-tools li { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.6rem 0.8rem; }
.ba-page .ba-tools a { font-weight: 600; }
.ba-page .ba-tools p { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 56rem) {
  .ba-form .ba-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ba-form .ba-field-email { grid-column: 1 / -1; }
  .ba-how, .ba-examples, .ba-page .ba-tools { grid-template-columns: minmax(0, 1fr); }
  .ba-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
  .ba-form .ba-fields { grid-template-columns: minmax(0, 1fr); }
  .ba-form .ba-submit { width: 100%; }
  .ba-form .ba-identification { margin-left: 0; }
}
/* Specificity above the foundation's main[class] form rules, so the compact permission reads as designed. */
main[class] .ba-form .ba-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.65rem; font-weight: 400; }
main[class] .ba-form .ba-consent input { align-self: start; margin-top: 0.2rem; }
main[class] .ba-form .ba-consent-title { font-size: 0.9375rem; font-weight: 650; color: var(--ink); }
main[class] .ba-form .ba-consent-note { font-size: 0.8125rem; font-weight: 400; line-height: 1.5; color: var(--body); }
main[class] .ba-form .ba-identification { font-size: 0.75rem; line-height: 1.45; color: var(--muted); margin: 0.5rem 0 0 1.9rem; }
main[class] .ba-page .ba-status, main.ba-page .ba-status { border-left: 0; }
@media (max-width: 30rem) { main[class] .ba-form .ba-identification { margin-left: 0; } }
.ba-page .ba-status { border-radius: 12px; }
/* Four fields on desktop (founder ruling, 27 September 2026): First name, Email, Country, Province. */
main[class] .ba-form .ba-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.1fr); }
main[class] .ba-form .ba-permission { margin: 1rem 0 0; }
main[class] .ba-form .ba-consent-summary { font-size: 0.875rem; font-weight: 400; color: var(--body); line-height: 1.45; }
main[class] .ba-form .ba-agree { margin: 0.35rem 0 0 1.9rem; }
main[class] .ba-form .ba-agree > summary { min-height: 32px; font-size: 0.8125rem; }
main[class] .ba-form .ba-agree[open] { background: var(--wash); border-radius: 8px; padding: 0.5rem 0.75rem 0.25rem; }
main[class] .ba-form .ba-agree .ba-identification { margin-left: 0; }
@media (max-width: 56rem) { main[class] .ba-form .ba-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } main[class] .ba-form .ba-field-email { grid-column: auto; } }
@media (max-width: 30rem) { main[class] .ba-form .ba-fields { grid-template-columns: minmax(0, 1fr); } main[class] .ba-form .ba-agree { margin-left: 0; } }
/* Compact permission (founder correction, 27 September 2026): checkbox, one line, one legal line, then the button. */
main[class] .ba-form .ba-legal { margin: 0.4rem 0 0 1.9rem; font-size: 0.75rem; line-height: 1.45; color: var(--muted); }
main[class] .ba-form .ba-legal a { color: var(--action); }
main[class] .ba-form .ba-actions { margin-top: 0.75rem; }
@media (max-width: 30rem) { main[class] .ba-form .ba-legal { margin-left: 1.9rem; } }
main[class] .ba-form .ba-contact { margin-top: 0.15rem; }
/* Consent metadata (founder ruling, 27 September 2026): the identification and contact lines read as quiet metadata
   attached to the consent. A narrowly scoped exception to the mobile body-text floor, for these two lines only, on this
   form only (the selector outranks main#main p). Still comfortably readable: 14px on phones, 12.5px on desktop. */
main#main .ba-form .ba-consent-body { gap: 0.1rem; }
main#main .ba-form p.ba-legal { font-size: 0.78125rem; line-height: 1.4; color: var(--muted); margin: 0.3rem 0 0 1.9rem; max-width: 62ch; }
main#main .ba-form p.ba-legal.ba-contact { margin-top: 0.1rem; }
main#main .ba-form p.ba-legal a { color: var(--action); }
main#main .ba-form .ba-actions { margin-top: 0.7rem; }
@media (max-width: 40rem) {
  main#main .ba-form p.ba-legal { font-size: 0.875rem; line-height: 1.4; margin-left: 1.9rem; }
  /* keep the hierarchy on phones: label, then summary, then the smaller metadata */
  main#main .ba-form .ba-consent-title { font-size: 1rem; }
  main#main .ba-form .ba-consent-summary { font-size: 0.9375rem; }
}