/* Hallmark · macrostructure: Catalogue / regional directory · tone: calm, practical
 * design-system: design.md · designed-as-app · existing topic palettes / Figtree
 * Audience: local customers; task: choose a city. Existing N6/Ft1 chrome.
 * Enrichment: none; native search and disclosures, no added motion.
 * Pre-emit critique: P5 H5 E5 S5 R5 V4. */
body.aigenforums-directory .af-dir[data-af-directory-view="state"] > .af-dir__frame { max-width: 74rem; }
body.aigenforums-directory .af-dir[data-af-directory-view="state"] .af-state-directory {
  --state-rail: 22rem;
  --state-radius: 1rem;
  --state-action-radius: .75rem;
  --state-inset: clamp(1.25rem,2.5vw,2rem);
  --text-state-name: clamp(2rem,3.5vw,2.75rem);
  display: grid; gap: var(--space-xl); min-width: 0; color: var(--color-ink); font-family: var(--font-publication-body);
  :is(h1,h2,h3,p,ul,ol) { margin: 0; }
  :is(h1,h2,h3) { min-width: 0; color: var(--color-ink); font-style: normal; overflow-wrap: anywhere; }
  h1 { max-width: none; font: 600 var(--text-state-name)/1.12 var(--font-publication-body) !important; letter-spacing: -.035em; }
  h2 { font: 600 var(--text-xl)/1.3 var(--font-publication-body) !important; letter-spacing: -.015em; }
  h3 { font: 600 var(--text-md)/1.4 var(--font-publication-body) !important; }
  :is(a,button,input,summary):focus-visible { outline: var(--rule-strong) solid var(--color-accent) !important; outline-offset: var(--space-3xs); }
  [hidden] { display: none !important; }
  .af-state-header { display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: var(--space-lg); padding-block: var(--space-sm); }
  .af-state-intro { display: grid; gap: var(--space-sm); min-width: 0; }
  .af-state-back a { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--control-height); color: var(--color-accent); font-size: var(--text-sm); text-decoration: none; }
  .af-state-intro p { max-width: 48ch; color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.65; }
  .af-provider-finder { min-width: 0; margin: 0 !important; padding: var(--state-inset) !important; border: 0 !important; border-radius: var(--state-radius); background: var(--color-accent-soft) !important; }
  .af-provider-finder h2 { margin: 0 0 var(--space-md) !important; font-size: var(--text-lg) !important; }
  .af-provider-finder form { margin: 0; }
  .af-provider-finder label { margin-bottom: var(--space-2xs); color: var(--color-ink) !important; font: 400 var(--text-xs)/1.5 var(--font-publication-body) !important; }
  .af-provider-finder__controls { display: grid !important; grid-template-columns: minmax(0,1fr); gap: var(--space-xs) !important; }
  .af-provider-finder__city { min-width: 0; }
  .af-provider-finder input[type="search"] { width: 100%; height: 3rem; min-height: 3rem; padding: var(--space-xs) var(--space-sm) !important; border: var(--rule-hair) solid var(--color-rule) !important; border-radius: var(--state-action-radius) !important; background: var(--color-surface) !important; color: var(--color-ink) !important; font: 400 var(--text-sm)/1.4 var(--font-publication-body) !important; box-shadow: none !important; }
  .af-provider-finder input::placeholder { color: var(--color-muted); opacity: 1; }
  .af-provider-finder button { display: flex !important; align-items: center; justify-content: center !important; gap: var(--space-xs); min-height: 3rem; padding: var(--space-xs) var(--space-sm) !important; border: 0 !important; border-radius: var(--state-action-radius) !important; background: var(--color-ink) !important; color: var(--color-accent-ink) !important; font: 600 var(--text-sm)/1.4 var(--font-publication-body) !important; white-space: nowrap; box-shadow: none !important; }
  .af-provider-finder button:active { background: var(--color-accent-hover) !important; }
  .af-provider-finder button:disabled { opacity: .55; cursor: not-allowed; }
  .af-provider-finder input:disabled { opacity: .55; cursor: not-allowed; background: var(--color-surface-subtle) !important; }
  .af-provider-finder input:user-invalid { border-color: var(--color-error) !important; }
  .af-provider-search-popup { border-radius: var(--state-action-radius); }
  .af-state-layout { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; gap: var(--space-lg); }
  :is(.af-state-cities,.af-state-navigation,.af-profile-reading) { display: grid; align-content: start; gap: var(--space-md); min-width: 0; padding: var(--state-inset); border: 0; border-radius: var(--state-radius); background: var(--color-surface-subtle); }
  .af-state-cities > p { color: var(--color-ink-2); line-height: 1.6; }
  .af-state-city-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-sm); padding: 0; list-style: none; }
  .af-state-city-grid li { min-width: 0; }
  .af-state-city { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); height: 100%; min-height: var(--control-height); padding: var(--space-md); border-radius: var(--state-action-radius); background: var(--color-surface); color: var(--color-ink); text-decoration: none; }
  .af-state-city-copy { display: grid; gap: var(--space-xs); min-width: 0; overflow-wrap: anywhere; }
  .af-state-city-copy strong { color: var(--color-ink); font: 600 var(--text-lg)/1.4 var(--font-publication-body); }
  .af-state-city-copy small { color: var(--color-ink-2); font: 400 var(--text-sm)/1.5 var(--font-publication-body); }
  .af-state-city-arrow { flex: 0 0 auto; color: var(--color-accent); font-size: var(--text-xl); }
  .af-state-navigation { gap: var(--space-md); background: var(--color-accent-soft); }
  .af-state-navigation ul { display: grid; gap: var(--space-xs); padding: 0; list-style: none; }
  .af-state-navigation h3 { margin-bottom: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm) !important; font-weight: 400 !important; }
  .af-state-navigation a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); min-height: var(--control-height); color: var(--color-accent); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
  .af-state-text-link { display: inline-flex; align-items: center; justify-self: start; gap: var(--space-xs); min-height: var(--control-height); color: var(--color-accent); font-size: var(--text-sm); white-space: nowrap; }
  .af-profile-reading { gap: var(--space-lg); }
  .af-platform-providers { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0; background: var(--color-transparent); }
  .af-platform-providers[data-load-state="empty"] { display: none; }
  .af-platform-section-head { margin: 0 0 var(--space-md); padding: 0; border: 0; }
  .af-platform-section-head p { margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }
  :is(.af-state-city,.af-state-navigation a):active { background: var(--color-accent-soft); }
}
@media (min-width: 40rem) {
  body.aigenforums-directory .af-dir[data-af-directory-view="state"] .af-state-directory {
    .af-state-city-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .af-state-city-grid > li:only-child { grid-column: 1 / -1; }
  }
}
@media (min-width: 60rem) {
  body.aigenforums-directory .af-dir[data-af-directory-view="state"] .af-state-directory {
    .af-state-header,.af-state-layout { grid-template-columns: minmax(0,1fr) var(--state-rail); column-gap: var(--space-lg); }
    .af-state-header { padding-block: var(--space-md); }
  }
}
@media (hover: hover) {
  body.aigenforums-directory .af-dir[data-af-directory-view="state"] .af-state-directory {
    .af-provider-finder button:hover { background: var(--color-accent-hover) !important; }
    :is(.af-state-city,.af-state-navigation a):hover { background: var(--color-accent-soft); }
    :is(.af-state-back a,.af-state-text-link):hover { text-decoration: underline; text-underline-offset: .2em; }
  }
}