/* ============================================================================
   Indiana workforce panel — 2026 Indiana Workforce Summit
   Invest Hamilton County with the Indiana Business Research Center

   Built for a chamber director on a phone, not a referee with a monitor.
   Plain names, ranks instead of coefficients, statistics available but not in
   the way. Tokens only, no hex outside the ramp declarations below.
   ============================================================================ */

/* Choropleth ramps live here so the brand system owns them and the JS reads
   them. The sequential ramp interpolates the published purple tints up to the
   primary; the diverging ramp runs brand red through neutral to brand purple,
   used only for a genuinely signed measure. Never for health data. */
:root {
  --sd-seq-1: var(--color-purple-10);
  --sd-seq-2: #ddd9ec;
  --sd-seq-3: var(--color-purple-33);
  --sd-seq-4: #a79ecb;
  --sd-seq-5: var(--color-purple-66);
  --sd-seq-6: var(--color-purple);

  --sd-div-1: var(--color-red);
  --sd-div-2: #ef8b87;
  --sd-div-3: #f7d9d7;
  --sd-div-4: #dcd8ee;
  --sd-div-5: var(--color-purple-66);
  --sd-div-6: var(--color-purple);

  --sd-nodata-bg: #f2f2f5;
  --sd-nodata-line: var(--color-border-strong);
}

/* ---- the headline, in words ---- */
.sd-big {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: clamp(1.25rem, 3.2vw, var(--fs-xl)); line-height: var(--lh-snug);
  color: var(--color-ink); margin: 0 0 var(--sp-4); max-width: 34ch;
}
.sd-big strong { color: var(--color-red); }

/* ---- mode toggle + picker: the first thing on the page ---- */
.sd-chooser {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-end;
}
.sd-chooser .sd-grow { flex: 1 1 260px; min-width: 0; }
.sd-lab {
  display: block; font-family: var(--font-ui); font-size: var(--fs-2xs);
  font-weight: var(--fw-bold); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--sp-2);
}
.sd-seg { display: inline-flex; border: 1px solid var(--color-purple); border-radius: var(--radius); overflow: hidden; }
.sd-seg button {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  padding: var(--sp-3) var(--sp-5); border: 0; background: var(--color-bg);
  color: var(--color-purple); cursor: pointer; min-height: 44px;
}
.sd-seg button + button { border-left: 1px solid var(--color-purple); }
/* Selected state keys off BOTH the class and the accessible attribute. The class
   was the only hook, so a toggle that correctly set aria-pressed and nothing else
   rendered with no selected state at all: both halves looked identical and the
   control read as decorative. Honouring the attribute means the styling and the
   screen-reader state cannot drift apart. */
.sd-seg button.is-on,
.sd-seg button[aria-pressed="true"] { background: var(--color-purple); color: #fff; }
.sd-seg button:focus-visible { outline: 2px solid var(--color-ink); outline-offset: -2px; }

.sd-select {
  width: 100%; font-family: var(--font-ui); font-size: var(--fs-md);
  font-weight: var(--fw-semibold); padding: var(--sp-3) var(--sp-4); min-height: 44px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  background: var(--color-bg); color: var(--color-ink);
}
.sd-select:focus-visible { outline: 2px solid var(--color-purple); outline-offset: 1px; }

/* ---- profile ---- */
.sd-place {
  font-family: var(--font-heading); font-weight: var(--fw-black);
  font-size: clamp(1.6rem, 4.4vw, var(--fs-2xl)); line-height: var(--lh-tight);
  color: var(--color-purple); margin: var(--sp-7) 0 var(--sp-1);
}
.sd-place-sub {
  font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--color-muted);
  margin: 0 0 var(--sp-5); line-height: var(--lh-snug);
}
.sd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: var(--sp-4); }
.sd-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--sp-5); background: var(--color-surface-alt); break-inside: avoid;
  display: flex; flex-direction: column;
}
.sd-card-q {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--color-charcoal); margin: 0 0 var(--sp-3); line-height: var(--lh-snug);
}
.sd-card-v {
  font-family: var(--font-heading); font-weight: var(--fw-black);
  font-size: var(--fs-2xl); line-height: 1; color: var(--color-purple);
  margin: 0 0 var(--sp-3); letter-spacing: var(--tracking-tight);
}
.sd-card-v span {
  display: block; font-family: var(--font-ui); font-size: var(--fs-2xs);
  font-weight: var(--fw-medium); color: var(--color-muted);
  letter-spacing: var(--tracking-normal); margin-top: var(--sp-2);
}
.sd-card-rank { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--color-charcoal); margin: 0 0 var(--sp-3); }
.sd-card-rank strong { color: var(--color-ink); font-size: var(--fs-sm); }
.sd-meter { height: 8px; border-radius: 4px; background: var(--color-border); overflow: hidden; margin-bottom: var(--sp-3); }
.sd-meter i { display: block; height: 100%; background: var(--color-purple); border-radius: 4px; }
.sd-card-read { font-size: var(--fs-sm); color: var(--color-ink); margin: 0 0 var(--sp-3); line-height: var(--lh-normal); flex: 1; }
.sd-card-src { font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--color-muted); margin: 0; line-height: var(--lh-snug); }

/* ---- map ---- */
.sd-split { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
@media (max-width: 860px) { .sd-split { grid-template-columns: 1fr; } }
.sd-map { width: 100%; height: auto; display: block; }
.sd-map path.county { stroke: var(--color-bg); stroke-width: 0.6; transition: opacity var(--duration) var(--ease); }
.sd-map path.county:hover { opacity: 0.72; }
.sd-map path.county:focus-visible { outline: none; stroke: var(--color-ink); stroke-width: 2; }
.sd-map path.county.is-selected { stroke: var(--color-ink); stroke-width: 2.4; }
.sd-map path.county.no-data { fill: url(#sd-hatch); }
.sd-legend { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: var(--sp-4); }
.sd-chip { width: 26px; height: 11px; border-radius: 2px; display: inline-block; }
.sd-scaleend { font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--color-muted); margin: 0 var(--sp-2); }

/* ---- capabilities ---- */
.sd-caps-lede { font-size: var(--fs-md); margin: 0 0 var(--sp-5); max-width: 60ch; }
.sd-caplist { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.sd-caprow {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px 40px 52px;
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--color-border);
}
.sd-capname b { display: block; font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-ink); }
.sd-capname em { display: block; font-family: var(--font-ui); font-size: var(--fs-2xs); font-style: normal; color: var(--color-muted); margin-top: 1px; }
.sd-capgauge { position: relative; height: 14px; background: var(--color-border); border-radius: 3px; }
.sd-capgauge i { position: absolute; top: 0; left: 0; height: 14px; border-radius: 3px; display: block; }
.sd-capgauge i.pos { background: var(--color-purple); }
.sd-capgauge i.neg { background: var(--color-red); }
/* the Indiana middle, as a tick rather than a second bar */
.sd-capgauge u { position: absolute; top: -3px; width: 2px; height: 20px; background: var(--color-ink); text-decoration: none; }
.sd-caplvl { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: right; color: var(--color-charcoal); font-variant-numeric: tabular-nums; }
.sd-cappay { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-align: right; color: var(--color-purple); font-variant-numeric: tabular-nums; }
.sd-cappay.is-neg { color: var(--color-red); }
.sd-caps-key { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: var(--sp-4) 0 var(--sp-5); font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--color-muted); }
.sd-key { display: inline-flex; align-items: center; gap: var(--sp-2); }
.sd-key i { width: 20px; height: 10px; border-radius: 2px; background: var(--color-purple); display: inline-block; }
.sd-key u { width: 2px; height: 14px; background: var(--color-ink); display: inline-block; text-decoration: none; }
@media (max-width: 640px) {
  .sd-caprow { grid-template-columns: minmax(0, 1fr) 40px 52px; }
  .sd-capgauge { grid-column: 1 / -1; order: 3; }
}

/* ---- table ---- */
.sd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--sp-5) 0; max-height: 540px; overflow-y: auto; }
.sd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 620px; }
.sd-table th, .sd-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border); text-align: left; }
.sd-table th {
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted);
  cursor: pointer; white-space: nowrap; position: sticky; top: 0; background: var(--color-bg); z-index: 2;
}
.sd-table th.is-sorted { color: var(--color-purple); }
.sd-table th.is-sorted::after { content: " \25BE"; }
.sd-table td.is-num { text-align: right; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.sd-table tbody tr { cursor: pointer; }
.sd-table tbody tr:hover { background: var(--color-purple-10); }
.sd-table tbody tr.is-selected { background: var(--color-purple-10); box-shadow: inset 3px 0 0 var(--color-purple); }

.sd-badge {
  display: inline-block; font-family: var(--font-ui); font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide);
  padding: 1px var(--sp-2); border-radius: var(--radius-sm); vertical-align: middle;
}
.sd-badge.is-measured { background: var(--color-green); color: #14320a; }
.sd-badge.is-modelled { background: var(--color-gold); color: #3d2f00; }

details.sd-more { border-top: 1px solid var(--color-border); padding-top: var(--sp-4); margin-top: var(--sp-5); }
details.sd-more > summary {
  cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); color: var(--color-purple); list-style: none;
  padding: var(--sp-3) 0; min-height: 44px; display: flex; align-items: center;
}
details.sd-more > summary:focus-visible { outline: 2px solid var(--color-purple); outline-offset: 2px; }
details.sd-more > summary::-webkit-details-marker { display: none; }
details.sd-more > summary::before { content: "\25B8 "; }
details.sd-more[open] > summary::before { content: "\25BE "; }

@media print {
  .sd-chooser, .sd-table-wrap { break-inside: avoid; }
  details.sd-more { display: block; }
  details.sd-more > summary { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sd-map path.county { transition: none; } }

/* The capability-basis toggle: every industry, or only what the place
   specialises in. Belongs here because summit.html loads this stylesheet and
   not summit-deal.css; putting it there left the toggle unstyled. */
.sd-capbasis { margin: 0 0 .6rem; }
.sd-capbasis-note { margin: 0 0 .9rem; }

/* Deviation against the national baseline: the readable sentence, above the bars. */
.sd-devbox { margin: 0 0 1rem; padding: .9rem 1rem; border-radius: 10px;
             background: var(--color-purple-06, #f4f2fa); }
.sd-dev-lede { margin: 0 0 .35rem; font: 400 .95rem/1.5 var(--font-body, Georgia, serif); }
.sd-devlist { list-style: none; margin: 0 0 .6rem; padding: 0;
              display: flex; flex-wrap: wrap; gap: .4rem .6rem; }
.sd-devlist li { display: inline-flex; align-items: baseline; gap: .35rem;
                 padding: .28rem .6rem; border-radius: 999px; background: #fff;
                 font: 600 .88rem var(--font-heading, system-ui); }
.sd-dev { font-variant-numeric: tabular-nums; font-size: .82rem; }
.sd-dev.up { color: #2f7d4f; }
.sd-dev.down { color: #b4632a; }