/**
 * COMPONENTS — buttons, spec tables, cards, badges, corner marks,
 * accordions, forms, gallery filters. Reusable across every page.
 */

/* ---- Eyebrow / label -------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--size-label);
  color: var(--division-accent, var(--volt));
  font-weight: 700;
}
.eyebrow::before { content: "/"; }
.eyebrow--on-light { color: var(--text-on-light); }
.eyebrow--on-light::before { color: var(--division-accent-deep, var(--volt-deep)); }

/* ---- Stencil / decal headline treatments -------------------------------- */
.stencil {
  font-family: var(--font-display);
  text-transform: uppercase;
}
.stencil--outline {
  color: transparent;
  -webkit-text-stroke: 2px currentColor;
  color: var(--void-3);
}
@supports not (-webkit-text-stroke: 1px black) {
  .stencil--outline { color: var(--void-3); -webkit-text-stroke: 0; }
}
.stencil--bleed {
  margin-inline: calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  overflow: hidden;
}

/* ---- Buttons: yellow slab CTA -------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: 1.05rem;
  line-height: 1;
  padding: 1.05em 1.5em .95em;
  border: none;
  border-radius: var(--radius);
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-snap) linear, box-shadow var(--dur-snap) linear;
}
.btn--primary {
  background: var(--volt);
  color: var(--void);
  box-shadow: var(--shadow-slab);
}
.btn--primary:hover { background: var(--volt-deep); }
.btn--primary:active,
.btn--primary.is-pressed {
  transform: translate(4px, 4px);
  box-shadow: var(--shadow-slab-press);
}
.btn--inverted {
  background: var(--void);
  color: var(--volt);
  box-shadow: var(--shadow-slab-light);
}
.btn--inverted:hover { background: var(--void-2); }
.btn--inverted:active, .btn--inverted.is-pressed { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--void); }
.btn--ghost {
  background: transparent;
  color: currentColor;
  border: var(--border-w) solid currentColor;
}
.btn--ghost:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.btn--block { width: 100%; }
.btn--sm { font-size: 0.85rem; padding: .8em 1.1em .7em; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }

/* ---- Corner registration marks ------------------------------------------ */
.panel {
  position: relative;
  background: var(--void-2);
  border: var(--border-w) solid var(--border-dark);
  padding: var(--sp-6);
}
.panel--reticle::before, .panel--reticle::after,
.panel--reticle .reticle-br, .panel--reticle .reticle-bl {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--volt);
  opacity: .8;
}
.panel--reticle::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.panel--reticle::after { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.panel--reticle .reticle-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.panel--reticle .reticle-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.panel--light { background: var(--concrete); color: var(--text-on-light); border-color: var(--concrete-2); }
.panel--light.panel--reticle::before,
.panel--light.panel--reticle::after,
.panel--light.panel--reticle .reticle-bl,
.panel--light.panel--reticle .reticle-br { border-color: var(--division-accent-deep, var(--volt-deep)); }

/* ---- Cards (used inside .hard-grid, so no radius/shadow/gap of their own) - */
.card {
  background: var(--void-2);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
}
.card:hover { background: var(--void-3); }
.card__index { font-family: var(--font-mono); color: var(--volt); font-size: var(--size-label); letter-spacing: .12em; }
.card__title { font-size: 1.35rem; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card p { color: var(--text-on-dark); opacity: .92; }
.card__art { aspect-ratio: 4/3; background: var(--void); border: var(--border-w) solid var(--border-dark); }
.card--light { background: var(--concrete); color: var(--text-on-light); }
.card--light:hover { background: var(--concrete-2); }
.card--light p { color: var(--text-on-light-muted); opacity: 1; }

/* ---- Spec table: two-column mono, dotted leader ------------------------- */
.spec-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.9rem; }
.spec-table caption { text-align: left; margin-bottom: var(--sp-3); }
.spec-table tr { border-bottom: 1px dashed var(--border-dark); }
.spec-table th, .spec-table td { padding-block: var(--sp-3); text-align: left; vertical-align: top; }
.spec-table th {
  font-weight: 400;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: .08em;
  width: 40%;
  padding-right: var(--sp-4);
}
/* Short spec labels ("HOURS", "VA LICENSE") look best unwrapped, but the
   FAQ variant puts whole questions in the label column — nowrap there blew
   the table past the viewport. Keep it opt-in, and stack on small screens. */
.spec-table--compact th { white-space: nowrap; }
@media (max-width: 40rem) {
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td {
    display: block;
    width: auto;
  }
  .spec-table th { white-space: normal; padding-right: 0; padding-block: var(--sp-3) 0; }
  .spec-table td { padding-block: var(--sp-1) var(--sp-3); }
}
.spec-table td { font-weight: 700; }
.spec-table--light tr { border-bottom-color: var(--concrete-2); }
.spec-table--light th { color: var(--text-on-light-muted); }

.spec-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding-block: var(--sp-2);
  border-bottom: 1px dashed var(--border-dark);
}
.spec-row__label { color: var(--steel); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.spec-row__leader { flex: 1; border-bottom: 1px dotted var(--border-dark); height: 0; transform: translateY(-4px); }
.spec-row__value { font-weight: 700; white-space: nowrap; }

/* ---- Numeric / stat blocks ------------------------------------------------ */
.stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.stat__value { font-family: var(--font-mono); font-weight: 700; font-size: var(--size-stat); line-height: 1; color: var(--volt); }
.stat__label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: var(--size-label); color: var(--steel); }
.stat--on-light .stat__value { color: var(--text-on-light); }

/* ---- Symptom checklist ----------------------------------------------------- */
.checklist { list-style: none; padding: 0; display: flex; flex-direction: column; }
.checklist li {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding-block: var(--sp-4);
  border-bottom: var(--border-w) solid var(--border-dark);
  font-size: var(--size-lede);
}
.checklist li:first-child { border-top: var(--border-w) solid var(--border-dark); }
.checklist__mark {
  flex: none;
  width: 1.4em; height: 1.4em;
  border: 2px solid var(--volt);
  display: grid;
  place-items: center;
  margin-top: .1em;
  font-family: var(--font-mono);
  color: var(--volt);
  font-size: .85rem;
}

/* ---- Badges / pills -------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .45em .9em;
  border-radius: var(--radius-pill);
  border: var(--border-w) solid currentColor;
}
.badge--urgent { background: var(--alert); color: var(--void); border-color: var(--alert); font-weight: 700; }
.badge--volt { background: var(--volt); color: var(--void); border-color: var(--volt); font-weight: 700; }

/* ---- Accordion (details/summary — no JS required) -------------------------- */
.accordion-group { border-top: var(--border-w) solid var(--border-dark); }
.accordion {
  border-bottom: var(--border-w) solid var(--border-dark);
}
.accordion > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--volt);
  flex: none;
  line-height: 1;
}
.accordion[open] > summary::after { content: "\2212"; }
.accordion__body { padding-bottom: var(--sp-5); max-width: 66ch; }
.accordion__body p + p { margin-top: var(--sp-3); }

/* ---- Gallery filters --------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
}
.filter-chip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .6em 1.1em;
  background: transparent;
  border: var(--border-w) solid var(--border-dark);
  color: var(--text-on-dark);
  min-height: 44px;
}
.filter-chip:hover { border-color: var(--volt); }
.filter-chip[aria-pressed="true"] { background: var(--volt); color: var(--void); border-color: var(--volt); font-weight: 700; }
.gallery-item[hidden] { display: none; }
.gallery-item__meta { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; }

/* ---- Forms ------------------------------------------------------------------- */
.form-shell { max-width: 42rem; }
.field-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-block-end: var(--sp-5); }
.field-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 0.78rem;
  color: var(--steel);
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
}
.field-label .req { color: var(--volt); }
.field-hint { font-size: 0.82rem; color: var(--steel); }
.field-input, .field-select, .field-textarea {
  background: var(--void-2);
  border: var(--border-w) solid var(--border-dark);
  color: var(--text-on-dark);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: 1rem;
  border-radius: var(--radius);
  min-height: 44px;
  width: 100%;
  /* An <input> carries an intrinsic min-content width from its default
     size=20 (~336px here). Inside a grid/flex track with the default
     min-width:auto that floor propagates upward and forces the whole form
     wider than a 390px viewport. min-width:0 lets it actually shrink. */
  min-width: 0;
}
.field-textarea { min-height: 9rem; resize: vertical; }
.field-input:focus-visible, .field-select:focus-visible, .field-textarea:focus-visible {
  outline: 3px solid var(--volt);
  outline-offset: 0;
  border-color: var(--volt);
}
.field-input[aria-invalid="true"], .field-select[aria-invalid="true"], .field-textarea[aria-invalid="true"] {
  border-color: var(--alert-on-dark);
}
.field-error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--alert-on-dark);
  font-size: 0.85rem;
  font-family: var(--font-mono);
}
.field-error::before { content: "!"; display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border: 2px solid var(--alert-on-dark); border-radius: 50%; flex: none; font-weight: 700; font-size: .8em; }
.field-error:empty { display: none; }
/* Progressive enhancement: tint the label when its field is invalid.
   Browsers without :has() just skip it — the error text + aria-invalid
   + red border already carry the same information. */
.field-group:has([aria-invalid="true"]) .field-label { color: var(--alert-on-dark); }

fieldset { border: var(--border-w) solid var(--border-dark); padding: var(--sp-5); margin: 0 0 var(--sp-5); }
legend { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: 0.78rem; color: var(--steel); padding-inline: var(--sp-2); }
.check-row, .radio-row { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-2); min-height: 44px; }
.check-row input, .radio-row input { width: 1.2em; height: 1.2em; accent-color: var(--volt); flex: none; }
/* flex:1 so the label — not just the small native control — fills the
   row and is the real ≥44px touch target; clicking anywhere on the row's
   text toggles the input via the for/id association. */
.check-row label, .radio-row label { cursor: pointer; flex: 1; padding-block: var(--sp-2); }
.check-grid, .radio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.error-summary {
  background: var(--void-2);
  border: 2px solid var(--alert-on-dark);
  padding: var(--sp-5);
  margin-block-end: var(--sp-6);
}
.error-summary h2 { font-size: 1.1rem; color: var(--alert-on-dark); margin-bottom: var(--sp-3); }
.error-summary ul { padding-left: 1.2em; }
.error-summary a { color: var(--concrete); }

.form-success {
  background: var(--void-2);
  border: var(--border-w) solid var(--live);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.form-success__badge { color: var(--live); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: var(--size-label); }
.form-note {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--steel);
  border-left: 3px solid var(--volt);
  padding-left: var(--sp-3);
}
.form-note--preview { color: var(--alert-on-dark); border-left-color: var(--alert-on-dark); }

[data-form][hidden], .form-success[hidden] { display: none; }

/* conditional subcontractor fields — hidden visually + genuinely disabled */
.reveal-fields[hidden] { display: none; }

/* ---- Map/list combo (service area) -------------------------------------- */
.town-grid { columns: 2; column-gap: var(--sp-6); }
@media (min-width: 40rem) { .town-grid { columns: 3; } }
.town-grid li { break-inside: avoid; padding-block: var(--sp-2); border-bottom: 1px dashed var(--border-dark); font-family: var(--font-mono); }

/* ---- Crew plate ------------------------------------------------------------ */
.crew-plate { display: flex; flex-direction: column; }
.crew-plate__art { aspect-ratio: 1; background: var(--void); border-bottom: var(--border-w) solid var(--border-dark); }
.crew-plate__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); }
.crew-plate__name { font-family: var(--font-display); font-size: 1.3rem; }
.crew-plate__role { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--volt); }
.crew-plate__note { font-size: 0.92rem; color: var(--text-on-dark); opacity: .85; }

/* ---- Misc utility --------------------------------------------------------- */
.text-center { text-align: center; }
.mono { font-family: var(--font-mono); }
.mt-0 { margin-top: 0; }
.max-measure { max-width: 66ch; }
.lede { font-size: var(--size-lede); }
.divider { border: none; border-top: var(--border-w) solid var(--border-dark); }