/* ==========================================================================
   fig-sentiment — the Michigan index, the comparison strip and the poll
   readings. Colour logic: sentiment is the page's closing highlight
   (--c-accent), prices are --c-inflation, real wages are --c-real, and the
   two historic comparison points are --c-muted context.
   ========================================================================== */

.readout--sentiment { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

/* ---- panel A: the index -------------------------------------------------- */

.sent__line { stroke: var(--c-accent); stroke-width: 2.6px; }

.sent__shock { fill: var(--c-inflation); opacity: .08; }
.band--dark .sent__shock { opacity: .14; }
.band--dark .sent__mode { opacity: .1; }
.sent__shock-label {
  fill: var(--c-inflation);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .04em;
}

.sent__mode {
  fill: var(--ink-3);
  opacity: .075;
}
.sent__mode-edge {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: .55;
}
.sent__mode-label {
  fill: var(--ink-3);
  font-size: 10.5px;
  letter-spacing: .02em;
}

.sw-marker.sent__low-rule line { stroke: var(--c-loss); stroke-dasharray: 5 4; opacity: .8; }
.sw-marker.sent__low-rule text { fill: var(--c-loss); font-weight: 600; }

.sent__dot { stroke: var(--card); stroke-width: 2; }
.sent__dot.is-past { fill: var(--c-muted); }
.sent__dot.is-low { fill: var(--c-loss); }
.sent__ann-value.is-past { fill: var(--ink-2); }
.sent__ann-value.is-low { fill: var(--c-loss); }
.sent__ann-sub { fill: var(--ink-3); }

.sent__cursor {
  stroke: var(--ink-3);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.sent__cursor-dot {
  fill: var(--c-accent);
  stroke: var(--card);
  stroke-width: 2;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.sw-layer--cursor.is-on .sent__cursor,
.sw-layer--cursor.is-on .sent__cursor-dot { opacity: 1; }

/* ---- the transcription-slip flag, on the page, not in a footnote --------- */

.sent__flag {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.band--dark .sent__flag { background: color-mix(in srgb, var(--dark-3) 55%, transparent); }
.sent__flag-key {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 620;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .2rem;
}

/* ---- panel B: the comparison strip --------------------------------------- */

.sent-compare {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule-soft);
}
.sent-compare__title {
  font-size: 1.05rem;
  line-height: var(--lh-snug);
  margin: 0 0 .3rem;
}
.sent-compare__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 var(--sp-3);
  max-width: 42rem;
}

.sent__infl { stroke: var(--c-inflation); }
.sent__gap { stroke: var(--c-real); stroke-width: 2.3px; }
.sent__gapfill { fill: var(--c-loss); opacity: .13; }
.sent__end--infl { fill: var(--c-inflation); }
.sent__end--gap { fill: var(--c-real); }
.sent__end { font-size: 12px; }
.sent__end-sub { fill: var(--ink-3); }

/* ---- panel C: the poll readings ------------------------------------------ */

.sent-polls {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule-soft);
}
.sent-polls__title {
  font-size: 1.05rem;
  line-height: var(--lh-snug);
  margin: 0 0 .3rem;
}
.sent-polls__sub {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 var(--sp-4);
  max-width: 42rem;
}

.sent-polls__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--sp-5) var(--sp-6);
  align-items: start;
}

.sent-poll__q {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 620;
  line-height: 1.4;
  margin: 0 0 .2rem;
  color: var(--ink);
  letter-spacing: 0;
}
.sent-poll__meta,
.sent-poll__note {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--ink-3);
  margin: 0 0 var(--sp-3);
}
.sent-poll__note { margin: .2rem 0 0; }

.poll__bar { fill: var(--c-inflation); opacity: .9; }
.poll__bar.is-avg { fill: var(--c-muted); opacity: .75; }
.poll__more { fill: var(--c-inflation); opacity: .55; }
.poll__whisker { stroke: var(--c-muted); stroke-width: 1.4; stroke-dasharray: 3 3; }
.poll__whisker-end { stroke: var(--c-muted); stroke-width: 1.6; }
.poll__label { fill: var(--ink-2); font-size: 12px; }
.poll__value { fill: var(--ink); font-size: 12.5px; }

@media (max-width: 520px) {
  .readout--sentiment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poll__label { font-size: 11px; }
  .poll__value { font-size: 11.5px; }
}