/* ============================================================================
   Summit session console — 2026 Indiana Workforce Summit, Oct 14
   Invest Hamilton County with the Indiana Business Research Center.

   Built for a projector first and a phone second. Every figure carries its
   source and vintage inline, because the session's argument is verification
   and a console that asserts numbers without provenance argues against itself.

   Tokens only, from /styles/tokens.css. No hardcoded brand color anywhere.
   ============================================================================ */

.su-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-purple); color: #fff;
  padding: var(--sp-3) var(--sp-5); z-index: 100;
  font-family: var(--font-ui); font-weight: var(--fw-semibold);
  border-radius: 0 0 var(--radius) 0;
}
.su-skip:focus { left: 0; }

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-wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-5); }

/* ---- Compact masthead. Full heroes are for entry pages; this is a tool. ---- */
.su-masthead {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky; top: 0; z-index: 50;
}
.su-masthead-inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: var(--sp-3) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-5);
  flex-wrap: wrap;
}
.su-lockup { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.su-mark img { display: block; }
.su-wordmark {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-lg); color: var(--color-purple); letter-spacing: var(--tracking-tight);
}
.su-rule { width: 1px; height: 28px; background: var(--color-border-strong); }
.su-ihc { display: block; }
.su-eyebrow {
  margin-left: auto;
  font-family: var(--font-ui); font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--color-muted);
}

/* ---- The spine statement ---- */
.su-spine { padding: var(--sp-8) 0 var(--sp-6); border-bottom: 1px solid var(--color-border); }
.su-kicker {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--color-red); margin: 0 0 var(--sp-4);
}
.su-h1 {
  font-family: var(--font-heading); font-weight: var(--fw-black);
  font-size: clamp(2rem, 5.2vw, var(--fs-3xl));
  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight);
  color: var(--color-purple); margin: 0 0 var(--sp-5); max-width: 22ch;
}
.su-lede { font-size: var(--fs-md); max-width: 62ch; margin: 0 0 var(--sp-5); color: var(--color-charcoal); }
.su-lede strong { color: var(--color-ink); font-weight: var(--fw-bold); }

/* ---- Demo navigator. Number keys 1 to 5 on stage. ---- */
.su-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.su-nav a {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-decoration: none; color: var(--color-ink);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.su-nav a:hover, .su-nav a:focus-visible {
  background: var(--color-purple-10); border-color: var(--color-purple);
}
.su-nav .su-num {
  font-size: var(--fs-2xs); color: var(--color-purple);
  font-weight: var(--fw-black); letter-spacing: var(--tracking-wider);
}

/* ---- Demo panels ---- */
.su-demo { padding: var(--sp-8) 0; border-bottom: 1px solid var(--color-border); scroll-margin-top: 84px; }
.su-demo-head { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.su-demo-num {
  font-family: var(--font-heading); font-weight: var(--fw-black);
  font-size: var(--fs-2xl); color: var(--color-purple-33); line-height: 1;
}
.su-h2 {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 3.4vw, var(--fs-2xl)); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); color: var(--color-ink); margin: 0; max-width: 26ch;
}
.su-question {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-muted); margin: 0 0 var(--sp-2);
}

.su-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); margin: var(--sp-5) 0; }

.su-stat {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--sp-5); background: var(--color-surface-alt);
  break-inside: avoid;
}
.su-stat-value {
  font-family: var(--font-heading); font-weight: var(--fw-black);
  font-size: var(--fs-2xl); line-height: 1; color: var(--color-purple);
  letter-spacing: var(--tracking-tight); display: block; margin-bottom: var(--sp-2);
}
.su-stat-value.is-negative { color: var(--color-red); }
.su-stat-label {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--color-ink); display: block; margin-bottom: var(--sp-3); line-height: var(--lh-snug);
}
.su-srcline {
  font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--color-muted);
  line-height: var(--lh-snug); display: block;
}

.su-note {
  border-left: 3px solid var(--color-gold);
  background: var(--color-surface);
  padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fs-sm); color: var(--color-charcoal);
}
.su-note strong { color: var(--color-ink); }
.su-note.is-method { border-left-color: var(--color-blue); }

.su-transition {
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--fs-md); color: var(--color-purple);
  margin: var(--sp-6) 0 0; padding-top: var(--sp-5);
  border-top: 1px dashed var(--color-purple-33);
}

/* ---- Doors to the live surfaces ---- */
.su-doors { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.su-door {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-decoration: none; border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-purple); color: #fff;
  transition: background var(--duration) var(--ease);
}
.su-door:hover, .su-door:focus-visible { background: var(--color-ink); }
.su-door.is-quiet { background: transparent; color: var(--color-purple); border: 1px solid var(--color-purple-33); }
.su-door.is-quiet:hover, .su-door.is-quiet:focus-visible { background: var(--color-purple-10); }
.su-gate {
  font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--color-muted);
  align-self: center;
}

/* ---- 988, first in the DOM of the health panel, never cropped ---- */
.su-crisis {
  border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-purple);
  border-radius: var(--radius); background: var(--color-bg);
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
  font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--color-ink);
}
.su-crisis a { color: var(--color-purple); font-weight: var(--fw-semibold); }

/* ---- Table ---- */
.su-table { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; font-size: var(--fs-sm); }
.su-table th, .su-table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border); }
.su-table th {
  font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted);
}
.su-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-ui); }
.su-table caption { text-align: left; font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--color-muted); padding-bottom: var(--sp-3); }

/* ---- Close ---- */
.su-close { padding: var(--sp-8) 0 var(--sp-9); }
.su-tagline {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-lg); color: var(--color-purple); margin: var(--sp-6) 0 0;
}
.su-foot {
  border-top: 1px solid var(--color-border); padding: var(--sp-6) 0 var(--sp-8);
  font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--color-muted); line-height: var(--lh-relaxed);
}

@media (max-width: 640px) {
  .su-wrap { padding: 0 var(--sp-4); }
  .su-masthead-inner { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .su-eyebrow { margin-left: 0; width: 100%; }
  .su-demo { padding: var(--sp-7) 0; }
}

@media print {
  .su-masthead, .su-nav, .su-doors { display: none; }
  .su-demo { break-inside: avoid; border-bottom: 1px solid #ccc; }
  .su-stat { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- Companion surfaces. Added 2026-09-20 with /aim: the console had linked
   none of its four sibling pages, which meant each was reachable only by
   typing the path. ---- */
.su-surfaces {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.su-surfaces a {
  display: flex; flex-direction: column; gap: var(--sp-2); height: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--color-border); border-left: 4px solid var(--color-purple-33);
  border-radius: var(--radius); background: var(--color-bg);
  text-decoration: none; color: inherit;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.su-surfaces a:hover, .su-surfaces a:focus-visible {
  border-left-color: var(--color-purple); box-shadow: var(--shadow-sm);
}
.su-surface-kicker {
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-muted);
}
.su-surface-title {
  font-family: var(--font-heading); font-size: var(--fs-md); font-weight: var(--fw-bold);
  line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--color-purple);
}
.su-surfaces a:hover .su-surface-title { color: var(--color-ink); }
.su-surface-note { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--color-charcoal); }