/* Vendored from polling-interface-redesign/project/_ds/industry-<id>/styles.css — tokens only, no dead component CSS. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

:root {
  --color-bg: #f2f2f3;
  --color-text: #1d1f20;

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-heading); margin: 0; }
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-300); }

/* blueprint corner marks — see .dc.html prototype */
.blueprint { position: relative; }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* exercise selector — Team chip on the dark header */
#ex-select {
  appearance: none; -webkit-appearance: none; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.4);
  color: #fff; font-family: var(--font-heading); font-size: 14px; font-weight: 600; letter-spacing: .05em; cursor: pointer;
  padding: 0 2px 1px;
}
#ex-select option { color: var(--color-text); }

nav a:hover { color: var(--color-accent-700); }

#content { transition: opacity .15s; }
#content.is-loading { opacity: .4; pointer-events: none; }

/* page chrome stays hidden until a token resolves — see token-modal in index.html */
.pre-auth-hidden { display: none !important; }

#wave-buttons button, .navbtn { appearance: none; font-family: inherit; }
#wave-buttons { scrollbar-width: thin; }

.mode-switch { display:inline-flex; flex:0 0 auto; border:1px solid var(--color-neutral-400); background:#fff; }
.mode-switch button {
  appearance:none; border:0; border-right:1px solid var(--color-neutral-300); background:#fff;
  color:var(--color-neutral-600); padding:6px 10px; cursor:pointer; font-family:var(--font-heading);
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.mode-switch button:last-child { border-right:0; }
.mode-switch button.is-active { background:var(--color-accent-800); color:#fff; }
.trend-actions { display:flex; flex:0 0 auto; gap:4px; }
.trend-actions[hidden], .trend-content[hidden], .trend-workspace[hidden], #section-nav[hidden], #app-tail[hidden], #wave-prev[hidden], #wave-next[hidden] { display:none !important; }
.toolbar-btn {
  appearance:none; border:1px solid var(--color-neutral-300); background:#fff; color:var(--color-accent-800);
  padding:5px 7px; cursor:pointer; font-family:var(--font-heading); font-size:10.5px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
}
.toolbar-btn:hover { border-color:var(--color-accent-700); }

.segment-mode-bar {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:8px 28px;
  background:#fff; border-bottom:1px solid var(--color-neutral-300);
}
.segment-mode-control { display:flex; align-items:center; gap:8px; }
.segment-mode-control span { color:var(--color-neutral-600); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.segment-mode-control select {
  border:1px solid var(--color-neutral-400); background:#fff; color:var(--color-neutral-800);
  padding:6px 8px; font:inherit; font-size:12px; max-width:100%;
}
.segment-mode-bar p { flex:1 1 360px; margin:0; color:var(--color-neutral-700); font-size:11px; line-height:1.5; }
#content [id], #sec-method { scroll-margin-top:190px !important; }

.trend-content { display:flex; flex-direction:column; gap:18px; }
.trend-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.trend-heading h2 { font-size:28px; font-weight:600; letter-spacing:.02em; }
.trend-heading p { max-width:82ch; margin:6px 0 0; color:var(--color-neutral-700); font-size:12px; line-height:1.55; }
.eyebrow, .trend-panel-label {
  color:var(--color-accent-700); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.trend-selection-summary {
  color:var(--color-neutral-700); font-family:var(--font-heading); font-size:15px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.trend-status {
  display:none; border:1px dashed var(--color-neutral-400); padding:28px; background:rgba(255,255,255,.45);
  color:var(--color-neutral-700); font-size:13px; text-align:center;
}
.trend-status.is-visible { display:block; }
.trend-workspace { display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr); gap:16px; align-items:start; }
.trend-question-panel, .trend-detail { border:1px solid var(--color-neutral-400); background:rgba(255,255,255,.35); padding:18px; }
.trend-question-panel { position:sticky; top:190px; max-height:calc(100vh - 214px); overflow:auto; }
.trend-question-list { display:flex; flex-direction:column; margin-top:10px; }
.trend-question-group {
  padding:12px 8px 5px; color:var(--color-neutral-500); font-size:9.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--color-neutral-300);
}
.trend-question-button {
  appearance:none; width:100%; border:0; border-bottom:1px solid var(--color-neutral-200); background:transparent;
  color:var(--color-neutral-800); padding:9px 8px; cursor:pointer; text-align:left;
}
.trend-question-button:hover { background:var(--color-accent-100); }
.trend-question-button.is-active { background:var(--color-accent-800); color:#fff; }
.trend-question-button strong {
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-heading);
  font-size:13px; font-weight:600; letter-spacing:.02em;
}
.trend-question-button span { display:block; margin-top:3px; font-size:9.5px; opacity:.75; font-variant-numeric:tabular-nums; }
.trend-detail { min-width:0; }
.trend-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.trend-detail-head h3 { margin-top:3px; font-size:22px; font-weight:600; letter-spacing:.02em; }
.trend-detail-head p { max-width:90ch; margin:5px 0 0; color:var(--color-neutral-700); font-size:11.5px; line-height:1.5; }
.trend-segment-control { display:flex; flex-direction:column; gap:4px; flex:0 0 170px; }
.trend-segment-control span { color:var(--color-neutral-500); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; }
.trend-segment-control select {
  width:100%; border:1px solid var(--color-neutral-400); background:#fff; color:var(--color-neutral-800);
  padding:6px 8px; font:inherit; font-size:11.5px;
}
.trend-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0 12px; }
.trend-summary-card { border:1px solid var(--color-neutral-300); padding:10px 12px; min-height:60px; }
.trend-summary-card span { display:block; color:var(--color-neutral-500); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; }
.trend-summary-card strong {
  display:block; margin-top:4px; color:var(--color-accent-800); font-family:var(--font-heading);
  font-size:20px; font-weight:600; font-variant-numeric:tabular-nums;
}
.trend-summary-card small { display:block; margin-top:2px; color:var(--color-neutral-600); font-size:9.5px; }
.trend-chart { width:100%; min-height:300px; border:1px solid var(--color-neutral-300); background:#fff; overflow-x:auto; }
.trend-chart svg { display:block; width:100%; min-width:620px; height:auto; }
.trend-distribution-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:18px 0 7px; }
.trend-distribution-head h4 { margin:0; font-family:var(--font-heading); font-size:16px; letter-spacing:.02em; }
.trend-distribution-head span { color:var(--color-neutral-600); font-size:9.5px; }
.trend-distributions { display:flex; flex-direction:column; border-top:1px solid var(--color-neutral-300); }
.trend-distribution-row {
  display:grid; grid-template-columns:126px minmax(180px,1fr) 180px; gap:10px; align-items:center;
  min-height:40px; border-bottom:1px solid var(--color-neutral-200);
}
.trend-distribution-wave strong { display:block; color:var(--color-accent-800); font-family:var(--font-heading); font-size:12px; }
.trend-distribution-wave span { display:block; color:var(--color-neutral-500); font-size:9px; }
.trend-stack { display:flex; position:relative; height:18px; overflow:hidden; background:var(--color-neutral-200); }
.trend-stack > span { display:block; height:100%; min-width:0; }
.trend-distribution-values { color:var(--color-neutral-700); font-size:9.5px; line-height:1.35; }
.trend-missing { color:var(--color-neutral-500); font-size:10.5px; font-style:italic; }
.trend-caveat { margin:12px 0 0; color:var(--color-neutral-600); font-size:10px; line-height:1.5; }

@media (max-width: 950px) {
  .trend-workspace { grid-template-columns:1fr; }
  .trend-question-panel { position:static; max-height:280px; }
  .trend-summary { grid-template-columns:1fr; }
  .trend-distribution-row { grid-template-columns:100px minmax(150px,1fr); }
  .trend-distribution-values { grid-column:2; padding-bottom:6px; }
}