/* ============================================================
   English Opera · 美国口音地图 — Swiss light theme
   Replaces the source dark theme. Uses the main site's
   --cl-* tokens (defined in ../assets/css/swiss.css) so it
   matches the rest of the site: white paper, ink text,
   single red accent, flat, no rounding, no shadow.
   Functionally distinct dialect-region colors are preserved
   for the map (they encode meaning, not decoration).
   ============================================================ */

:root{
  --r-new-england:#e06c75;
  --r-north:#61afef;
  --r-midland:#e5c07b;
  --r-south:#98c379;
  --r-west:#c678dd;
  --r-canada:#56b6c2;
  --r-none:#cfcfca; /* no-data gray (Swiss-muted) */
}

* { box-sizing: border-box; }

/* ============================================================
   Main-site chrome — matches vocabulary.html exactly
   (v-hero / v-main / v-footer / section), with ~50px outer
   padding so content never sticks to the page edge.
   ============================================================ */
.v-hero{
  text-align:center;
  padding:clamp(60px,10vw,110px) 20px 50px;
  background:var(--cl-bg);
}
.v-hero__eyebrow{font-family:var(--font-cn);letter-spacing:3px;color:var(--cl-accent);font-size:.82rem;font-weight:700}
.v-hero__title{font-family:var(--font-cn);font-weight:700;font-size:clamp(2rem,6vw,3.4rem);margin:14px 0 18px;color:var(--cl-text);}
.v-hero__sub{max-width:680px;margin:0 auto;color:var(--cl-text-dim);font-size:1.02rem}
.v-hero__hint{margin-top:16px;color:var(--cl-text-dim);font-size:.95rem}

.v-main{max-width:var(--maxw);margin:0 auto;padding:0 50px}
@media (max-width:760px){ .v-main{padding:0 20px} }

.v-footer{text-align:center;padding:70px 20px 56px;border-top:1px solid var(--cl-border);background:var(--cl-bg-2)}
.v-footer p:first-child{font-family:var(--font-cn);font-size:1.1rem;color:var(--cl-text)}
.v-footer__sub{font-family:var(--font-cn);color:var(--cl-text-dim);margin-top:12px;font-size:.86rem}

.section{padding:clamp(56px,8vw,96px) 0;border-top:1px solid var(--cl-border)}
.section .section__head{text-align:center;margin:0 0 36px}
.section .section__no{display:inline-block;font-family:var(--font-cn);letter-spacing:2px;color:var(--cl-accent);font-size:.78rem;font-weight:700;margin-bottom:10px;text-align:center;border-radius:0}
.section .section__title{font-family:var(--font-cn);font-weight:700;font-size:clamp(1.5rem,4vw,2.2rem);color:var(--cl-text);margin:0 0 12px;line-height:1.2;text-align:center}
.section .section__lead{color:var(--cl-text-dim);font-size:1rem;line-height:1.7;margin:0 auto;max-width:720px;text-align:center}

/* ---------- Hero toolbar (legend + lang toggle) ---------- */
.eo-accent-hero{ padding-bottom: 18px; }
.eo-accent-hero .v-hero__hint{ margin-top: 10px; }
.eo-accent-toolbar{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:14px; margin-top:18px;
  padding-top:14px; border-top:1px solid var(--cl-border);
}
.eo-accent-toolbar__label{
  font-size:13px; color:var(--cl-text-dim); letter-spacing:.2px;
}
.eo-accent-lang{ font-size:13px; }

/* ---------- Region filter nav ---------- */
.region-nav{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:16px 0 4px;
  border-bottom:1px solid var(--cl-border);
}
.nav-btn{
  border:1px solid var(--cl-border);
  background:var(--cl-muted-bg);
  color:var(--cl-text-dim);
  padding:7px 14px;
  font-size:13px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--eo-grotesk);
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.nav-btn .dot{ width:9px; height:9px; background:var(--c, var(--cl-text-dim)); flex:none; }
.nav-btn:hover{ border-color:var(--cl-accent); color:var(--cl-text); }
.nav-btn.active{
  color:#fff; background:var(--c, var(--cl-accent));
  border-color:var(--c, var(--cl-accent)); font-weight:600;
}

/* ---------- Layout: map full row, then 2-col below ---------- */
.layout{ display:block; padding:22px 0; }
.map-panel--full{ width:100%; }
.layout-bottom{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  padding-top:22px; align-items:start;
}
@media (max-width: 900px){ .layout-bottom{ grid-template-columns:1fr; } }

/* ---------- Map ---------- */
.map-panel{
  background:var(--cl-muted-bg);
  border:1px solid var(--cl-border);
  padding:10px;
}
.map{ width:100%; }
.map svg{ width:100%; height:auto; display:block; }
.state{
  stroke:#ffffff; stroke-width:.6; cursor:pointer;
  transition:opacity .15s ease, fill .15s ease;
}
.state:hover{ opacity:.82; }
.state.dim{ opacity:.25; }
.state.selected{ stroke:var(--cl-text); stroke-width:1.6; }

/* ---------- Side panel ---------- */
.side-panel{ display:flex; flex-direction:column; gap:18px; }
.detail-card, .list-block{
  background:var(--cl-muted-bg);
  border:1px solid var(--cl-border);
  padding:18px;
}
.detail-empty{ text-align:center; color:var(--cl-text-dim); padding:26px 10px; }
.detail-empty .big{ font-size:34px; display:block; margin-bottom:8px; }

.detail-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.region-dot{ width:14px; height:14px; background:var(--cl-text-dim); flex:none; }
.detail-head h2{ margin:0; font-size:19px; color:var(--cl-text); }
.detail-region{ margin:2px 0 0; font-size:12.5px; color:var(--cl-text-dim); }

.audio-block h3, .feature-block h3, .list-block h3{
  margin:0 0 10px; font-size:13px;
  text-transform:uppercase; letter-spacing:1px; color:var(--cl-text-dim);
  font-weight:700;
}
.audio-block{ margin-bottom:18px; }
#dAudio{ width:100%; }
.audio-note{ margin:8px 0 0; font-size:12.5px; color:var(--cl-text-dim); }

.feature-list{ margin:0; padding-left:18px; }
.feature-list li{ margin-bottom:7px; font-size:13.5px; color:var(--cl-text); }

/* ---------- State list ---------- */
.region-group{ margin-bottom:16px; }
.region-group:last-child{ margin-bottom:0; }
.region-group-head{
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; margin-bottom:8px; color:var(--cl-text);
}
.region-group-head .dot{ width:10px; height:10px; flex:none; }
.state-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.state-chip{
  border:1px solid var(--cl-border);
  background:var(--cl-bg);
  color:var(--cl-text-dim);
  padding:5px 10px; font-size:12.5px; cursor:pointer;
  font-family:var(--eo-grotesk);
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.state-chip:hover{ color:var(--cl-text); border-color:var(--cl-accent); }
.state-chip.active{ background:var(--cl-accent); color:#fff; border-color:var(--cl-accent); font-weight:600; }

/* ============================================================
   About section (what / why / how) — Swiss card grid
   ============================================================ */
.about-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
@media (max-width: 860px){ .about-grid{ grid-template-columns:1fr; } }
.about-card{
  background:var(--cl-muted-bg);
  border:1px solid var(--cl-border);
  padding:24px 22px;
}
.about-card h3{
  margin:0 0 12px; font-size:1.05rem; color:var(--cl-text);
  font-family:var(--font-cn); font-weight:700;
  padding-bottom:10px; border-bottom:2px solid var(--cl-accent);
  display:inline-block;
}
.about-card p{ margin:0; font-size:.95rem; line-height:1.75; color:var(--cl-text-dim); }
.about-card strong{ color:var(--cl-text); }

/* ============================================================
   Dialect comparison table (23 North American English varieties)
   Swiss style: flat, single red rule, no rounding/shadow.
   ============================================================ */
/* ---------- Dialect comparison: grouped by direction (Swiss) ---------- */
.dt-groups{ margin-top:6px; }
.dt-group{
  border-top:2px solid var(--cl-accent);
  padding-top:15px; margin-bottom:30px;
}
.dt-group:last-child{ margin-bottom:0; }
.dt-dir{
  font-family:var(--font-cn); font-weight:700;
  font-size:1.12rem; color:var(--cl-text);
  margin:0 0 12px;
}
.dt-list{ list-style:none; margin:0; padding:0; }
.dt-item{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:18px; padding:10px 0;
  border-bottom:1px solid var(--cl-border);
}
.dt-item:last-child{ border-bottom:none; }
.dt-name{ font-style:italic; font-size:.98rem; color:var(--cl-text); }
.dt-area{ flex:none; font-size:.9rem; color:var(--cl-text-dim); text-align:right; }