/* ============================================================================
   The Loom — national capability time-lapse, 2001 to 2023
   Invest Hamilton County with the Indiana Business Research Center.

   Tokens only, from /styles/tokens.css. No hex literal belongs in this file.

   ⚠ THE LAYOUT IS THE CAVEAT. The mix panel sits to the LEFT of the readout and
   the readout is never shown without it, because the capability numbers are
   derived from that mix rather than measured independently. A viewer who can
   watch the mix move and the bars follow understands the relationship without
   reading a disclaimer. Do not reorder these two, and do not add a view that
   shows the readout alone.
   ============================================================================ */

/* ⚠ Set the background and colour explicitly on body. This page loads tokens.css
   and this file, NOT summit.css, so nothing else defines body. Without it the page
   inherits whatever colour scheme the browser is in, and on a machine set to dark
   the whole thing rendered black with dark body text on it: headings survived
   because they carry their own colour, body copy did not. A projector at a
   conference is the worst place to discover that. */
body.su-body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
.su-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-purple); color: var(--color-bg);
  padding: var(--sp-3) var(--sp-5); z-index: 100;
  font-family: var(--font-ui); font-weight: var(--fw-semibold);
}
.su-skip:focus { left: 0; }

.lm-top {
  display: flex; align-items: baseline; gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-border);
}
.lm-brand { font-family: var(--font-heading); font-weight: var(--fw-bold); }
.lm-brand [data-alex-brand-mark] { color: var(--color-purple); font-size: var(--fs-lg); }
.lm-brand [data-alex-brand-wording] {
  color: var(--color-muted); font-size: var(--fs-sm); margin-left: var(--sp-2);
  font-weight: var(--fw-medium);
}
.lm-kicker {
  margin: 0 0 0 auto; font-family: var(--font-ui); font-size: var(--fs-2xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted);
}

main { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-5) var(--sp-8); }

.lm-head { padding: var(--sp-6) 0 var(--sp-4); }
.lm-head h1 {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-3xl); line-height: 1.12; color: var(--color-purple);
  margin: 0 0 var(--sp-3); max-width: 22ch;
}
.lm-lede {
  font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.6;
  color: var(--color-ink); max-width: 62ch; margin: 0;
}

/* ---- the dial trio. Its whole job is to say which input carries the year. ---- */
.lm-dials {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: stretch;
  margin: var(--sp-5) 0; padding: var(--sp-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.dial {
  min-width: 9.5rem; padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius); display: flex; flex-direction: column; gap: 2px;
}
.dial.moving { border-color: var(--color-purple); border-width: 2px; }
.dial .dl {
  font-family: var(--font-ui); font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: .09em; color: var(--color-muted);
}
.dial .dv {
  font-family: var(--font-heading); font-size: var(--fs-xl);
  font-weight: var(--fw-bold); color: var(--color-ink); font-variant-numeric: tabular-nums;
}
.dial.moving .dv { color: var(--color-purple); }
.dial .dt {
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .08em;
}
.dial.moving .dt { color: var(--color-purple); }
.dial.held .dt { color: var(--color-muted); }

.lm-play { display: flex; align-items: center; gap: var(--sp-4); flex: 1 1 22rem; }
.btn-play {
  font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius);
  background: var(--color-purple); color: var(--color-bg); border: none; cursor: pointer;
  white-space: nowrap;
}
.btn-play:hover { background: var(--color-ink); }
.btn-play:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }
.scrub { flex: 1; display: flex; }
.scrub input { width: 100%; accent-color: var(--color-purple); }
.lm-mark {
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  color: var(--color-red); min-width: 10rem;
}
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- picker ---- */
.lm-picker { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.lm-picker label {
  font-family: var(--font-ui); font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--color-muted);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.lm-picker select {
  font-family: var(--font-ui); font-size: var(--fs-sm); text-transform: none;
  letter-spacing: 0; color: var(--color-ink); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  background: var(--color-bg); min-width: 13rem;
}

/* ---- the two halves ---- */
.lm-grid { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--sp-6); }
.lm-grid h2 {
  font-family: var(--font-heading); font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--color-ink); margin: 0 0 var(--sp-3);
}
.lm-note {
  font-family: var(--font-ui); font-size: var(--fs-2xs); line-height: 1.5;
  color: var(--color-muted); margin: var(--sp-3) 0 0;
}

/* ---- attribution strip. Fixed, never a floating tooltip: a projector cannot
        show a tooltip and a room cannot read one. ---- */
.lm-attr {
  margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5);
  background: var(--color-purple-10); border-left: 5px solid var(--color-purple);
  border-radius: 0 var(--radius) var(--radius) 0; min-height: 5.5rem;
}
.lm-attr p { margin: 0 0 var(--sp-2); font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.55; }
.lm-attr .eq {
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--color-charcoal);
}
.lm-attr .hd {
  font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--color-purple);
}
.lm-attr-hint { color: var(--color-muted); font-style: italic; }
.lm-stamps { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.lm-stamp {
  font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--color-charcoal);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 2px var(--sp-2);
}
.lm-stamp b { color: var(--color-ink); font-variant-numeric: tabular-nums; }

.lm-blind {
  margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5);
  border-left: 5px solid var(--color-gold); background: var(--color-surface);
}
.lm-blind h3 {
  font-family: var(--font-heading); font-size: var(--fs-sm); margin: 0 0 var(--sp-2);
  text-transform: uppercase; letter-spacing: .06em; color: var(--color-charcoal);
}
.lm-blind p { margin: 0; font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.6; max-width: 76ch; }

.lm-drift { margin-top: var(--sp-8); }
.lm-drift h2 {
  font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--color-purple);
  margin: 0 0 var(--sp-4);
}

.lm-foot {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--color-muted);
  line-height: 1.6;
}
.lm-foot a { color: var(--color-purple); }

/* ---- svg ---- */
svg { display: block; width: 100%; height: auto; }
.row-hit { cursor: pointer; }
.row-hit:focus-visible { outline: 2px solid var(--color-gold); }

@media (max-width: 960px) {
  .lm-grid { grid-template-columns: 1fr; }
  .lm-head h1 { font-size: var(--fs-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}