/* ==========================================================================
   Guide page — production styles
   Notes:
   - Keeps all original class names so JS keeps working
   - Improves spacing, containment, alignment, and responsiveness
   - Adds small utility classes (.hidden, .container, stacks, clusters)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Colors */
  --g-bg: var(--clr-bg, #ffffff);
  --g-surface: var(--clr-surface, #ffffff);
  --g-text: var(--clr-text, #0f172a);
  --g-muted: var(--clr-muted, #64748b);
  --g-border: var(--clr-border, #e5e7eb);
  --g-primary: var(--clr-primary, #1d4ed8);
  --g-primary-contrast: #ffffff;

  /* Radii & Shadows */
  --g-radius: var(--radius-lg, 16px);
  --g-rad-md: var(--radius-md, 12px);
  --g-rad-sm: 10px;
  --g-shadow: var(--shadow-lg, 0 10px 25px rgba(2,6,23,.08));
  --g-focus: 0 0 0 3px rgba(29,78,216,.35);

  /* Spacing scale (8px base) */
  --sp-0: 0;
  --sp-1: .25rem; /* 4px  */
  --sp-2: .5rem;  /* 8px  */
  --sp-3: .75rem; /* 12px */
  --sp-4: 1rem;   /* 16px */
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3rem;

  /* Layout */
  --container-w: 1100px;
  --container-pad: clamp(16px, 3vw, 28px);

  /* Typography */
  --font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --lh: 1.55;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { height: 100%; color-scheme: light dark; }
body {
  min-height: 100%;
  margin: 0;
  font-family: var(--font-family);
  line-height: var(--lh);
  color: var(--g-text);
  background: var(--g-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--g-focus);
  border-radius: 8px;
}

.hidden { display: none !important; }

/* Visually hidden (kept for a11y) */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:active { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }

/* ---------- Layout helpers ---------- */
.container,
.guide-container {
  width: min(var(--container-w), 100%);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.stack > * + * { margin-top: var(--sp-4); }
.cluster {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
}
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min, 240px), 1fr));
  gap: var(--sp-4);
}

/* ---------- Typography rhythm ---------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 .4em; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.25rem); }
p { margin: 0 0 1em; }
.muted { color: var(--g-muted); }

/* ---------- Hero ---------- */
.guide-hero {
  background: linear-gradient(180deg, rgba(29,78,216,.08), transparent 55%);
  padding-block: var(--sp-8) var(--sp-5);
}
.guide-hero__title { font-size: clamp(1.7rem, 2.5vw, 2.4rem); margin: 0 0 .25rem; }
.guide-hero__subtitle { color: var(--g-muted); margin: 0; }
.guide-hero__actions { display:flex; gap:var(--sp-2); margin-top: var(--sp-3); flex-wrap:wrap; }

/* ---------- Search ---------- */
.guide-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
  align-items: center;
  margin-block: var(--sp-4) var(--sp-3);
}
.guide-search input {
  padding: .9rem 1rem;
  border: 1px solid var(--g-border);
  border-radius: var(--g-rad-md);
  background: var(--g-surface);
  width: 100%;
}
.guide-search__buttons { display:flex; gap:var(--sp-2); align-items:center; }
.guide-search .btn[disabled] { opacity: .6; cursor: not-allowed; }

@media (max-width: 640px) {
  .guide-search { grid-template-columns: 1fr; }
  .guide-search__buttons { justify-content: flex-start; }
}

/* ---------- Toolbar ---------- */
.guide-toolbar {
  display: grid;
  gap: var(--sp-2);
  margin: .25rem 0 var(--sp-4);
}

/* Two-column shell that adapts cleanly without overlap */
.toolbar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
  align-items: center;

  background: var(--g-surface);
  border: 1px solid var(--g-border);
  border-radius: var(--g-rad-md);
  padding: var(--sp-2) var(--sp-3);
  box-shadow: var(--g-shadow);
}

/* Left stack: wraps gracefully on narrow viewports */
.toolbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-width: 0; /* prevent overflow from long labels */
}

/* Right stack: keyboard hint + Reset live here */
.toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  justify-self: end;
  min-width: 0;
}

/* Controls */
.toolbar__select,
.toolbar-row select {
  padding: .6rem .9rem;
  border: 1px solid var(--g-border);
  border-radius: var(--g-rad-sm);
  background: var(--g-surface);
  min-width: 9rem;
  max-width: 100%;
}

/* Checkbox label aligns nicely with selects */
.toolbar__check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}

.toolbar__kbd-hint {
  font-size: .9rem;
  color: var(--g-muted);
  white-space: nowrap;
}

/* Make sure Reset never overlaps other controls */
#resetFilters {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;                 /* stays above internal borders if needed */
}

/* Tags facet */
.toolbar-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.tag-chip {
  border:1px solid var(--g-border);
  background:#f3f4f6;
  padding:.4rem .7rem;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  font-size:.92rem;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, outline-color .15s ease;
  text-transform: capitalize;
}
.tag-chip:hover { transform: translateY(-1px); }
.tag-chip.is-active { background:#eef2ff; border-color:var(--g-primary); outline: 2px solid rgba(29,78,216,.14); }
.tag-chip.is-hidden { display:none; }
.tag-chip--ghost { background: transparent; }
.tag-more { display: inline-flex; gap: .4rem; align-items: center; }

/* Alpha bar */
.toolbar-alpha { display:flex; flex-wrap:wrap; gap:.35rem; }
.alpha-btn {
  border:1px dashed var(--g-border);
  background: transparent;
  padding:.3rem .6rem;
  border-radius: 8px;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.alpha-btn.is-active { background:#eef2ff; border-style: solid; border-color: var(--g-primary); }

/* Responsive refinement */
@media (max-width: 800px) {
  .toolbar-row { grid-template-columns: 1fr; }
  .toolbar-right { justify-self: start; }
  .toolbar__kbd-hint { display: none; }         /* save space on small screens */
  .toolbar__select { min-width: 8.25rem; }
}

/* ---------- Chips row (content filters) ---------- */
.chip-row { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.chip {
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid var(--g-border); background: #f3f4f6;
  padding: .5rem .8rem; border-radius: 999px; cursor: pointer; user-select: none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.chip:hover { transform: translateY(-1px); }
.chip.is-active { border-color: var(--g-primary); outline: 2px solid rgba(29,78,216,.14); background: #eef2ff; }
.chip__count { color: var(--g-muted); margin-left:.15rem; }

/* ---------- Main grid ---------- */
.guide-grid {
  display:grid;
  gap: var(--sp-7);
  padding-block: var(--sp-5) var(--sp-9);
}
.guide-aside .toc { position: sticky; top: var(--sp-4); }
.toc__title { font-size: .95rem; margin: 0 0 .5rem; color: var(--g-muted); }
.toc__list {
  list-style: decimal;
  padding-left: 1.1rem;
  display:grid;
  gap:.35rem;
}
.toc__list a {
  color: inherit; text-decoration: none;
  border-left: 2px solid transparent; padding-left: .5rem; border-radius: 6px;
}
.toc__list a:focus-visible { background: rgba(29,78,216,.08); }
.toc__list a.is-active { color: var(--g-primary); border-color: var(--g-primary); }

/* Sections */
.guide-section { margin-bottom: var(--sp-7); }
.guide-section__title { display:flex; align-items:center; gap:.6rem; margin: 0 0 1rem; scroll-margin-top: 84px; }

/* ---------- Q&A ---------- */
.qa {
  border:1px solid var(--g-border); border-radius: var(--g-rad-md); background: var(--g-surface);
  margin-bottom: .75rem; box-shadow: var(--g-shadow); overflow: clip;
}
.qa__summary {
  cursor: pointer; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding: .9rem 1rem;
}
.qa__q { font-weight: 600; }
.qa__anchor { opacity:.65; }
.qa__a { padding: .25rem 1rem 1rem; color: var(--g-text); }
.qa[open] .qa__summary { border-bottom: 1px dashed var(--g-border); }

/* ---------- Glossary ---------- */
.glossary-grid { display:grid; grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) ); gap: var(--sp-3); }
.glossary-card {
  border:1px solid var(--g-border); border-radius: var(--g-rad-md); background: var(--g-surface); padding: 1rem;
  box-shadow: var(--g-shadow);
  display: grid; align-content: start; gap: .35rem;
}
.glossary-card__term { margin:0; font-size:1.05rem; }

/* ---------- Equipment ---------- */
.equip-grid { display:grid; grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) ); gap: var(--sp-4); }
.equip-card {
  border:1px solid var(--g-border); border-radius: var(--g-rad-md); background: var(--g-surface);
  padding: 1rem; box-shadow: var(--g-shadow);
  display: grid; gap: .5rem; align-content: start;
}
.equip-card__header { display:flex; align-items:center; justify-content:space-between; gap: .75rem; }
.equip-card__tips { margin:.25rem 0 0 1.1rem; }
.equip-card a.copy-link { opacity:.7; }
.equip-card a.copy-link:hover { opacity: 1; }

/* ---------- Industry ---------- */
.industry-card {
  border:1px solid var(--g-border); border-radius: var(--g-rad-md); background: var(--g-surface);
  padding: 1rem; box-shadow: var(--g-shadow); margin-bottom: var(--sp-3);
}
.industry-card__header { display:flex; align-items:center; justify-content:space-between; gap: .75rem; }

/* ---------- Compliance: form & results ---------- */
.compliance-form {
  display:grid; grid-template-columns: repeat(4, 1fr); gap:var(--sp-3); align-items:end;
  background: var(--g-surface); border:1px solid var(--g-border); border-radius: var(--g-radius);
  padding:var(--sp-4); box-shadow: var(--g-shadow); margin-bottom:var(--sp-4);
}
.compliance-form label { font-weight:600; font-size:.95rem; }
.compliance-form select,
.compliance-form input[type="text"] {
  width:100%; padding:.7rem .8rem; border:1px solid var(--g-border); border-radius: var(--g-rad-md); background: var(--g-surface);
}
.compliance-form .btn { width:100%; }

@media (max-width: 1100px) {
  .compliance-form { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .compliance-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .compliance-form { grid-template-columns: 1fr; }
}

/* Compliance result card */
.compliance-card {
  border:1px solid var(--g-border); border-radius: var(--g-radius);
  box-shadow: var(--g-shadow); background: var(--g-surface);
  padding: 0; overflow:hidden;
}
.compliance-card__header {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1rem 1rem .85rem; border-bottom:1px solid var(--g-border);
  background: linear-gradient(180deg, rgba(29,78,216,.08), transparent);
}
.compliance-card__titles h3 { margin:.1rem 0; }
.compliance-card__titles .muted { color: var(--g-muted); margin:0; }
.compliance-card__actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.compliance-card__actions .btn[disabled] { opacity:.6; cursor:not-allowed; }
.compliance-grid {
  display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; padding:1rem;
}
.comp-block { border:1px solid var(--g-border); border-radius: var(--g-rad-md); padding: .75rem .9rem; }
.comp-block h4 { display:flex; align-items:center; gap:.5rem; margin:.1rem 0 .4rem; }
.comp-block ul { margin:0; padding-left:1.15rem; }
.comp-block p { margin: .35rem 0 0; }
.cities-grid .city-item p { word-break: break-word; }
.compliance-footer { border-top:1px dashed var(--g-border); padding: .8rem 1rem; background: rgba(148,163,184,.08); }

/* City links inside compliance */
.city-links {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: .25rem 0 .5rem;
}
.city-links a {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--g-border); border-radius: 999px;
  padding: .35rem .6rem; text-decoration: none; background: #f3f4f6;
}

/* ---------- Utilities ---------- */
.results-meta {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin: .5rem 0 .25rem; font-size:.95rem; opacity:.9;
}
.no-results {
  text-align:center; border:1px dashed var(--g-border); border-radius: var(--g-rad-md);
  padding: 2rem; color: var(--g-muted);
}
.no-results i { font-size: 1.5rem; display:block; margin-bottom:.4rem; }

/* Back to top */
.back-to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 20;
  border:none; border-radius: 999px; padding:.7rem .8rem;
  background: var(--g-primary); color: var(--g-primary-contrast);
  box-shadow: var(--g-shadow); cursor:pointer; display:none;
}

/* Buttons (fallbacks if site styles not loaded) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border:1px solid var(--g-border); background: #f9fafb;
  padding:.6rem .9rem; border-radius: var(--g-rad-sm); cursor: pointer;
  font: inherit;
}
.btn i { font-size: .95em; }
.btn--primary { background: var(--g-primary); color: var(--g-primary-contrast); border-color: var(--g-primary); }
.btn--secondary { background: #eef2ff; color: #1e3a8a; border-color: #c7d2fe; }
.btn:disabled { opacity:.6; cursor:not-allowed; }

/* Copy-link anchors consistency */
.copy-link {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
}

/* Focus offset for anchor targets under sticky headers */
[id] { scroll-margin-top: 84px; }

/* ---------- Responsive: collapse TOC ---------- */
@media (max-width: 960px){
  .guide-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .guide-aside .toc { position: static; }
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --g-bg: #0b1020;
    --g-surface: #121833;
    --g-text: #e5e7eb;
    --g-muted: #a5b4fc;
    --g-border: #263055;
    --g-primary: #60a5fa;
    --g-primary-contrast: #0b1020;
    --g-shadow: 0 10px 25px rgba(0,0,0,.35);
  }
  .chip, .tag-chip { background: #1f2a57; border-color: var(--g-border); color: var(--g-text); }
  .guide-hero { background: linear-gradient(180deg, rgba(96,165,250,.12), transparent 55%); }
  .city-links a { background: #1f2a57; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  .chip, .tag-chip, .alpha-btn { transition: none; }
}

/* ---------- Print ---------- */
@media print {
  header.nav, .guide-hero__actions, .chip-row, .guide-toolbar, .compliance-form, .back-to-top { display: none !important; }
  .guide-container { width: 100%; padding-inline: 0; }
  .qa { break-inside: avoid; }
  details.qa[open] .qa__summary { border-bottom: none; }
}

/* ---------- Subtle polish (appended) ---------- */
.toolbar__select:focus-visible { border-color: var(--g-primary); box-shadow: var(--g-focus); }
#resetFilters:hover { transform: translateY(-1px); transition: transform .08s ease; }
@media (max-width: 420px) {
  #resetFilters .btn__label { display: none; }
}

/* =========================================
   Q&A: fix list/bullet overlap + readable rhythm
   (append at end of guide.css)
   ========================================= */

/* Safer clipping than `overflow: clip` (prevents marker paint issues) */
.qa { overflow: hidden; }

/* Rich text inside expanded answers */
.qa__a {
  --li-gap: .45rem;
  --li-indent: 1.15rem;
  overflow-wrap: anywhere;      /* long URLs/terms won't crash layout */
  word-break: normal;
}

/* Trim stray spacing at the edges of the answer */
.qa__a > :first-child { margin-top: 0; }
.qa__a > :last-child  { margin-bottom: 0; }

/* Lists inside answers: clear, non-overlapping bullets */
.qa__a ul,
.qa__a ol {
  margin: .55rem 0 .8rem;
  padding-left: var(--li-indent);
  list-style-position: inside;  /* keeps markers inside container so they can't be clipped */
}

.qa__a ul { list-style-type: disc; }
.qa__a ol { list-style-type: decimal; }

.qa__a li { margin: 0 0 var(--li-gap); }
.qa__a li::marker { color: var(--g-muted); }

/* Nested lists get a touch more breathing room */
.qa__a li ul,
.qa__a li ol { margin-top: .35rem; }

/* Consistent rhythm for any lists within guide content (without touching city chips) */
.guide-main ul:not(.city-links),
.guide-main ol:not(.city-links) {
  margin: .55rem 0 .85rem;
  padding-left: 1.15rem;
}
.guide-main li + li { margin-top: .35rem; }

/* Tighten paragraph-to-list and list-to-paragraph transitions */
.qa__a p + ul,
.qa__a p + ol,
.qa__a ul + p,
.qa__a ol + p { margin-top: .45rem; }

/* Small-screen refinement */
@media (max-width: 560px) {
  .qa__a { --li-indent: 1rem; }
}

/* =========================================
   State & County form: robust, responsive layout
   (append at end of guide.css)
   ========================================= */

/* Inner grid wrapper (the <div> inside #stateForm) */
#stateForm > div {
  /* Override the inline grid safely */
  display: grid !important;
  grid-template-columns: minmax(200px, 260px) minmax(240px, 1fr) max-content max-content !important;
  gap: var(--sp-2) !important;
  align-items: end !important;
}

/* Field groups (the two <div> that hold label+control) */
#stateForm > div > div {
  display: grid;
  gap: .4rem;
  min-width: 0; /* allow shrinking without overflow */
}

/* Keep buttons tidy and aligned */
#showComplianceBtn,
#clearComplianceBtn {
  align-self: end;
  white-space: nowrap;
  min-height: 44px;                /* comfortable tap target */
  padding: .6rem .9rem;
}

/* Controls — consistent height & overflow safety */
#stateForm select,
#stateForm input[type="text"] {
  min-height: 44px;
  line-height: 1.2;
  width: 100%;
  min-width: 0;                    /* prevents overflow in grid cells */
  text-overflow: ellipsis;
}

/* Label polish */
#stateForm label {
  font-weight: 600;
  font-size: .95rem;
}

/* Placeholder readability */
#stateForm ::placeholder { color: var(--g-muted); }

/* --- Breakpoints --- */

/* Medium: two columns (fields) + full-width buttons below */
@media (max-width: 960px) {
  #stateForm > div {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: auto;
  }
  #showComplianceBtn,
  #clearComplianceBtn {
    grid-column: 1 / -1;      /* buttons span full width */
    width: 100%;
  }
}

/* Small: single column, perfectly stacked */
@media (max-width: 560px) {
  #stateForm > div {
    grid-template-columns: 1fr !important;
  }
}

/* Prevent any weird overlap if fonts scale up or translations get long */
#stateForm > div > * { min-width: 0; }

/* Focus & disabled polish (inherit existing tokens) */
#stateForm .btn[disabled] { opacity: .65; cursor: not-allowed; }
#stateForm select:focus-visible,
#stateForm input[type="text"]:focus-visible {
  border-color: var(--g-primary);
  box-shadow: var(--g-focus);
  outline: none;
}

/* =========================================
   State Compliance — mobile refinements
   One-container-per-row, clean stacking
   ========================================= */

/* --- FORM: stack to a single column sooner --- */
@media (max-width: 720px) {
  /* Inner grid of #stateForm */
  #stateForm > div {
    grid-template-columns: 1fr !important;
    gap: var(--sp-2) !important;
  }
  /* Buttons go full width underneath */
  #showComplianceBtn,
  #clearComplianceBtn {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 46px;
  }
  /* Keep long state/county names from overflowing */
  #stateForm select,
  #stateForm input[type="text"] {
    min-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --- RESULT CARD: single-column containers on mobile --- */
@media (max-width: 780px) {
  /* Stack header; buttons become full-width rows */
  .compliance-card__header {
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
    padding: .9rem .9rem .75rem;
  }
  .compliance-card__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .compliance-card__actions .btn {
    width: 100%;
  }

  /* Core grid -> 1 container per row */
  .compliance-grid {
    grid-template-columns: 1fr !important;
    gap: .75rem;
    padding: .85rem;
  }

  /* Each block: tighten padding; keep headings readable */
  .comp-block {
    padding: .75rem .85rem;
  }
  .comp-block h4 {
    font-size: 1rem;
    margin: .1rem 0 .35rem;
  }

  /* Lists inside blocks: crisp, never overflow */
  .comp-block ul,
  .comp-block ol {
    margin: .5rem 0 .75rem;
    padding-left: 1.15rem;
  }
  .comp-block li + li { margin-top: .3rem; }

  /* City list: explicit single column */
  .cities-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: .6rem;
  }

  /* Long tokens/URLs won’t break layout */
  #stateGuide,
  #stateGuide * {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* Slightly larger phones/phablets: keep single-column grid */
@media (min-width: 781px) and (max-width: 960px) {
  .compliance-grid { grid-template-columns: 1fr 1fr; }
}
/* Below 780px we’re already at 1 column (see rule above) */
/* =========================================
   State selector alignment polish
   ========================================= */

/* --- GUIDE (guide.html) -------------------------------------------------- */
#stateForm > div {
  /* Override inline grid + ensure tidy alignment */
  display: grid !important;
  grid-template-columns: minmax(220px, 300px) minmax(240px, 1fr) max-content max-content !important;
  gap: var(--sp-2, .5rem) !important;
  align-items: end !important;
}

#stateForm label { font-weight: 600; font-size: .95rem; }

#stateForm select,
#stateForm input[type="text"] {
  height: 44px;                   /* consistent control height */
  line-height: 1.2;
  width: 100%;
  min-width: 0;
  padding: .6rem .9rem;
  border: 1px solid var(--g-border, #e5e7eb);
  border-radius: var(--g-rad-md, 12px);
  background: var(--g-surface, #fff);
  text-overflow: ellipsis;
}

/* Nice chevron for selects (cross-browser) */
#stateForm select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%, 0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
  padding-right: 2.2rem;          /* room for chevron */
}

#stateForm .btn {
  height: 44px;
  padding: .6rem .9rem;
  white-space: nowrap;
}

@media (max-width: 960px) {
  #stateForm > div {
    grid-template-columns: 1fr 1fr !important;
  }
  #showComplianceBtn, #clearComplianceBtn {
    grid-column: 1 / -1;
    width: 100%;
  }
}
@media (max-width: 560px) {
  #stateForm > div { grid-template-columns: 1fr !important; }
}

/* --- HOME TAB (index.html) ---------------------------------------------- */
.state-form {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(220px, 1fr) max-content;
  gap: var(--sp-2, .5rem);
  align-items: end;
  background: var(--g-surface, var(--clr-surface, #fff));
  border: 1px solid var(--g-border, var(--clr-border, #e5e7eb));
  border-radius: var(--g-radius, 16px);
  padding: var(--sp-3, 1rem);
}

.state-form select {
  height: 44px;
  line-height: 1.2;
  width: 100%;
  min-width: 0;
  padding: .6rem 2.2rem .6rem .9rem;
  border: 1px solid var(--g-border, var(--clr-border, #e5e7eb));
  border-radius: var(--g-rad-md, 12px);
  background: var(--g-surface, var(--clr-surface, #fff));
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%, 0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
}

.state-form .btn {
  height: 44px;
  white-space: nowrap;
  padding: .6rem .9rem;
}

@media (max-width: 960px) {
  .state-form { grid-template-columns: 1fr 1fr; }
  .state-form .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}
@media (max-width: 560px) {
  .state-form { grid-template-columns: 1fr; }
}