/* ═══════════════════════════════════════════════════════════════════════════
   US Stock Market Risk Monitor — Dark Dashboard Theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard tokens ────────────────────────────────────────────────────── */
.cr-dashboard {
  --cr-bg:          #080c14;
  --cr-surface:     #0f1623;
  --cr-card-bg:     #111c2e;
  --cr-border:      rgba(255,255,255,.08);
  --cr-border-glow: rgba(255,255,255,.16);

  --cr-calm:    #22c55e;
  --cr-watch:   #eab308;
  --cr-elev:    #f97316;
  --cr-danger:  #ef4444;
  --cr-crash:   #dc2626;

  --cr-text-1:  #e8edf4;
  --cr-text-2:  #94a3b8;
  --cr-text-3:  #64748b;

  --cr-spark:   rgba(148,163,184,.7);
  --cr-transition: 350ms ease;
  --cr-radius:  12px;
}

/* Override the site's calculator-card for this tool */
.calculator-card:has(.cr-dashboard),
.calculator-card .cr-dashboard ~ * {
  background: transparent;
  border: none;
}

/* Direct child of .calculator-card when it contains our dashboard */
.cr-dashboard {
  background:    var(--cr-bg);
  border-radius: var(--cr-radius);
  border:        1px solid var(--cr-border);
  color:         var(--cr-text-1);
  font-family:   var(--font-sans);
  padding:       1.5rem 1.25rem 2rem;
  display:       flex;
  flex-direction:column;
  gap:           1.5rem;
}

/* ── Top status bar ──────────────────────────────────────────────────────── */
.cr-topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             .5rem .75rem;
  border-bottom:   1px solid var(--cr-border);
  padding-bottom:  1rem;
}

.cr-topbar__left {
  display:     flex;
  align-items: center;
  gap:         1rem;
  flex-wrap:   wrap;
}

.cr-topbar__title {
  font-size:   1.125rem;
  font-weight: 700;
  letter-spacing: .01em;
  color:       var(--cr-text-1);
}

.cr-topbar__right {
  display:     flex;
  align-items: center;
  gap:         .6rem;
  flex-wrap:   wrap;
}

.cr-topbar__updated {
  font-size:  .75rem;
  color:      var(--cr-text-3);
}

.cr-topbar__market {
  display:     flex;
  align-items: center;
  gap:         .35rem;
  font-size:   .8rem;
  color:       var(--cr-text-2);
}

.cr-market-dot {
  width:  8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cr-text-3);
  display: inline-block;
  transition: background .3s;
}
.cr-market-dot--open  { background: var(--cr-calm);   box-shadow: 0 0 6px var(--cr-calm); }
.cr-market-dot--closed { background: var(--cr-text-3); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.cr-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           .3rem;
  padding:       .15rem .5rem;
  border-radius: 4px;
  font-size:     .7rem;
  font-weight:   700;
  letter-spacing:.05em;
  text-transform: uppercase;
  background:    rgba(255,255,255,.08);
  color:         var(--cr-text-2);
  border:        1px solid var(--cr-border);
}

.cr-badge[data-mode="live"],
.cr-badge[data-freshness="live"] {
  background: rgba(34,197,94,.15);
  color:      var(--cr-calm);
  border-color: rgba(34,197,94,.3);
}
.cr-badge[data-mode="live"]::before,
.cr-badge[data-freshness="live"]::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cr-calm);
  animation: cr-pulse 2s infinite;
}

.cr-badge[data-freshness="daily"] {
  background:   rgba(99,102,241,.15);
  color:        #818cf8;
  border-color: rgba(99,102,241,.3);
}

.cr-badge[data-freshness="cached"] {
  background:   rgba(234,179,8,.12);
  color:        var(--cr-watch);
  border-color: rgba(234,179,8,.3);
}

.cr-badge[data-freshness="stale"],
.cr-badge[data-freshness="unavailable"] {
  background:   rgba(239,68,68,.12);
  color:        var(--cr-danger);
  border-color: rgba(239,68,68,.3);
}

.cr-badge[data-mode="mock"] {
  background:   rgba(239,68,68,.2);
  color:        var(--cr-crash);
  border-color: rgba(239,68,68,.4);
  animation:    cr-pulse 1.5s infinite;
}

.cr-connection-badge {
  font-size:   .72rem;
  color:       var(--cr-watch);
  background:  rgba(234,179,8,.12);
  border:      1px solid rgba(234,179,8,.3);
  border-radius: 4px;
  padding:     .15rem .5rem;
  animation:   cr-pulse 1.5s infinite;
}

@keyframes cr-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

/* ── Gauge section ───────────────────────────────────────────────────────── */
.cr-gauge-section {
  display:         flex;
  align-items:     flex-start;
  gap:             2rem;
  flex-wrap:       wrap;
  justify-content: center;
}

.cr-gauge-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  min-width:      260px;
  max-width:      340px;
  flex:           1;
}

#cr-gauge-svg {
  width:  100%;
  max-width: 340px;
  filter: drop-shadow(0 0 24px rgba(34,197,94,.12));
  overflow: visible;
}

.cr-arc-track {
  stroke: #1e2a3a;
}

.cr-arc-score {
  transition: stroke-dasharray 600ms ease, stroke 400ms ease;
}

.cr-zone-label {
  font-size:   11px;
  fill:        var(--cr-text-3);
  font-family: var(--font-mono);
}

.cr-zone-label--mid { font-size: 10px; }

#cr-needle-group {
  transform-origin: 150px 150px;
  transition: transform 600ms cubic-bezier(.4,0,.2,1);
}

.cr-needle-hub {
  filter: drop-shadow(0 0 4px rgba(255,255,255,.6));
}

/* Score numbers */
.cr-score-display {
  margin-top: -.5rem;
  display:    flex;
  align-items: baseline;
  gap:        .2rem;
}

.cr-score-value {
  font-size:   3.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color:       var(--cr-text-1);
  transition:  color var(--cr-transition);
  font-variant-numeric: tabular-nums;
}

.cr-score-sep, .cr-score-max {
  font-size:   1.5rem;
  color:       var(--cr-text-3);
  font-weight: 400;
}

.cr-regime-label {
  margin-top:  .3rem;
  font-size:   .875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:       var(--cr-text-2);
  transition:  color var(--cr-transition);
}

.cr-score-meta {
  margin-top: .55rem;
  display:    flex;
  gap:        .5rem;
  font-size:  .78rem;
  color:      var(--cr-text-3);
}

.cr-score-meta__sep { opacity: .4; }

/* Score history chart wrapper */
.cr-score-chart {
  width:      100%;
  margin-top: 1.1rem;
  padding-top: .65rem;
  border-top: 1px solid var(--cr-border);
}

.cr-chart-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .35rem;
}

.cr-chart-title {
  font-size:      .72rem;
  font-weight:    600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--cr-text-3);
}

.cr-period-btns {
  display: flex;
  gap:     .2rem;
}

.cr-period-btn {
  font-size:      .65rem;
  font-weight:    700;
  letter-spacing: .06em;
  padding:        .15rem .45rem;
  border-radius:  3px;
  border:         1px solid var(--cr-border);
  background:     transparent;
  color:          var(--cr-text-3);
  cursor:         pointer;
  transition:     background .12s, color .12s, border-color .12s;
  line-height:    1.4;
}

.cr-period-btn:hover {
  background: rgba(255,255,255,.06);
  color:      var(--cr-text-1);
}

.cr-period-btn--active {
  background:   rgba(240,160,48,.12);
  color:        #f0a030;
  border-color: rgba(240,160,48,.45);
}

.cr-intraday {
  width: 100%;
}

.cr-intraday__svg {
  overflow: visible;
}

/* Summary panel */
.cr-summary-panel {
  flex:        1;
  min-width:   220px;
  max-width:   400px;
  background:  var(--cr-surface);
  border:      1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  padding:     1.25rem 1.5rem;
}

.cr-summary-heading {
  font-size:    .75rem;
  font-weight:  700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:        var(--cr-text-3);
  margin-bottom: .75rem;
}

.cr-summary {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        .6rem;
}

.cr-summary li {
  font-size:   .875rem;
  color:       var(--cr-text-2);
  padding-left: 1rem;
  position:    relative;
  line-height: 1.5;
}

.cr-summary li::before {
  content:    '›';
  position:   absolute;
  left:       0;
  color:      var(--cr-calm);
}

.cr-summary__loading {
  color: var(--cr-text-3);
  font-style: italic;
}

/* ── Regime colour theming ───────────────────────────────────────────────── */
[data-regime="Calm"]          .cr-regime-label,
[data-regime="Calm"]          .cr-score-value { color: var(--cr-calm); }
[data-regime="Watchful"]      .cr-regime-label,
[data-regime="Watchful"]      .cr-score-value { color: var(--cr-watch); }
[data-regime="Elevated Risk"] .cr-regime-label,
[data-regime="Elevated Risk"] .cr-score-value { color: var(--cr-elev); }
[data-regime="Danger"]        .cr-regime-label,
[data-regime="Danger"]        .cr-score-value { color: var(--cr-danger); }
[data-regime="Crash Mode"]    .cr-regime-label,
[data-regime="Crash Mode"]    .cr-score-value { color: var(--cr-crash); }

/* ── Day-over-day delta ──────────────────────────────────────────────────── */
.cr-score-delta {
  align-self:    center;
  margin-left:   .5rem;
  padding:       .12rem .4rem;
  border-radius: 5px;
  font-size:     .78rem;
  font-weight:   700;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  white-space:   nowrap;
}
/* Score up = more risk = red; score down = less risk = green. */
.cr-score-delta[data-dir="up"]   { color: var(--cr-danger); background: rgba(239,68,68,.13); }
.cr-score-delta[data-dir="down"] { color: var(--cr-calm);   background: rgba(34,197,94,.13); }
.cr-score-delta[data-dir="flat"] { color: var(--cr-text-3); background: rgba(255,255,255,.05); }

/* ── Plain-language verdict + 1-year context ─────────────────────────────── */
/*
 * The verdict is a one-line elaboration beneath the score-meta row.
 * It gets a left-border accent in the regime colour so it reads as a
 * designed status statement rather than an orphaned sentence.
 * DOM order: regime-label → score-meta → verdict → context.
 */
.cr-verdict {
  margin:        1rem 0 0;
  padding:       .35rem .65rem;
  border-left:   2px solid var(--cr-verdict-border, var(--cr-text-3));
  background:    var(--cr-verdict-bg, transparent);
  border-radius: 0 var(--cr-radius) var(--cr-radius) 0;
  max-width:     36ch;
  font-size:     .8rem;
  font-weight:   500;
  line-height:   1.45;
  color:         var(--cr-text-2);
  letter-spacing: .01em;
  transition:    border-color var(--cr-transition), background var(--cr-transition), color var(--cr-transition);
}

/* Verdict border + tint driven by regime — mirrors the glow system */
[data-regime="Calm"]          .cr-verdict {
  --cr-verdict-border: var(--cr-calm);
  --cr-verdict-bg:     rgba(34,197,94,.06);
  color: var(--cr-text-1);
}
[data-regime="Watchful"]      .cr-verdict {
  --cr-verdict-border: var(--cr-watch);
  --cr-verdict-bg:     rgba(234,179,8,.06);
  color: var(--cr-text-1);
}
[data-regime="Elevated Risk"] .cr-verdict {
  --cr-verdict-border: var(--cr-elev);
  --cr-verdict-bg:     rgba(249,115,22,.07);
  color: var(--cr-text-1);
}
[data-regime="Danger"]        .cr-verdict {
  --cr-verdict-border: var(--cr-danger);
  --cr-verdict-bg:     rgba(239,68,68,.08);
  color: var(--cr-text-1);
}
[data-regime="Crash Mode"]    .cr-verdict {
  --cr-verdict-border: var(--cr-crash);
  --cr-verdict-bg:     rgba(220,38,38,.10);
  color: var(--cr-text-1);
}

.cr-context {
  margin:    .45rem 0 0;
  font-size: .72rem;
  color:     var(--cr-text-3);
  letter-spacing: .015em;
}

/* ── Score drivers ───────────────────────────────────────────────────────── */
.cr-drivers-heading {
  margin-top:    1.1rem;
  padding-top:   .85rem;
  border-top:    1px solid var(--cr-border);
  margin-bottom: .65rem;
  font-size:     .75rem;
  font-weight:   700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:         var(--cr-text-3);
}
.cr-drivers {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        .6rem;
  counter-reset: drv;
}
.cr-driver { font-size: .8rem; }
.cr-driver__top {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             .5rem;
  margin-bottom:   .28rem;
}
.cr-driver__name { color: var(--cr-text-2); font-weight: 600; }
.cr-driver__name::before {
  counter-increment: drv;
  content: counter(drv) ". ";
  color:   var(--cr-text-3);
  font-weight: 700;
}
.cr-driver__pts {
  color:       var(--cr-text-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cr-driver__max { color: var(--cr-text-3); font-weight: 400; font-size: .85em; }
.cr-driver__bar {
  height:        5px;
  border-radius: 3px;
  background:    rgba(255,255,255,.06);
  overflow:      hidden;
}
.cr-driver__bar > span {
  display:       block;
  height:        100%;
  border-radius: 3px;
  transition:    width .5s ease;
}

/* ── Visual WOW: regime glow, flash, banner, gauge pulse ─────────────────── */
@property --cr-glow {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

.cr-dashboard {
  --cr-glow:      rgba(34,197,94,0);
  --cr-flash-col: rgba(255,255,255,.4);
  position:   relative;
  background:
    radial-gradient(135% 75% at 50% -12%, var(--cr-glow), transparent 55%),
    var(--cr-bg);
  transition: --cr-glow .9s ease, background .9s ease;
}
.cr-dashboard[data-regime="Calm"]          { --cr-glow: rgba(34,197,94,.10);  --cr-flash-col: var(--cr-calm); }
.cr-dashboard[data-regime="Watchful"]      { --cr-glow: rgba(234,179,8,.12);  --cr-flash-col: var(--cr-watch); }
.cr-dashboard[data-regime="Elevated Risk"] { --cr-glow: rgba(249,115,22,.14); --cr-flash-col: var(--cr-elev); }
.cr-dashboard[data-regime="Danger"]        { --cr-glow: rgba(239,68,68,.18);  --cr-flash-col: var(--cr-danger); }
.cr-dashboard[data-regime="Crash Mode"]    { --cr-glow: rgba(220,38,38,.24);  --cr-flash-col: var(--cr-crash); }

@keyframes cr-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  18%      { box-shadow: 0 0 0 2px var(--cr-flash-col), 0 0 48px -4px var(--cr-flash-col); }
}
.cr-dashboard.cr-flash { animation: cr-flash 2.4s ease; }

@keyframes cr-pulse { 0%, 100% { opacity: .9; } 50% { opacity: .4; } }
.cr-dashboard[data-regime="Danger"]     #cr-score-arc,
.cr-dashboard[data-regime="Crash Mode"] #cr-score-arc {
  animation: cr-pulse 1.8s ease-in-out infinite;
}

.cr-regime-banner {
  position:      fixed;
  left:          50%;
  bottom:        1.5rem;
  transform:     translate(-50%, 220%);
  max-width:     90vw;
  padding:       .65rem 1.1rem;
  border-radius: 8px;
  border:        1px solid var(--cr-border);
  border-left:   3px solid var(--cr-watch);
  background:    var(--cr-card-bg);
  color:         var(--cr-text-1);
  font-size:     .85rem;
  font-weight:   600;
  box-shadow:    0 10px 34px rgba(0,0,0,.55);
  z-index:       1000;
  transition:    transform .45s cubic-bezier(.2,.8,.2,1);
}
.cr-regime-banner--show { transform: translate(-50%, 0); }
.cr-regime-banner[data-regime-key="elevated"] { border-left-color: var(--cr-elev); }
.cr-regime-banner[data-regime-key="danger"]   { border-left-color: var(--cr-danger); }
.cr-regime-banner[data-regime-key="crash"]    { border-left-color: var(--cr-crash); }
.cr-regime-banner[data-regime-key="calm"]     { border-left-color: var(--cr-calm); }

@media (prefers-reduced-motion: reduce) {
  .cr-dashboard, .cr-dashboard.cr-flash,
  .cr-dashboard[data-regime] #cr-score-arc,
  .cr-regime-banner { transition: none; animation: none; }
}

/* ── Full-width 1-year crisis chart ──────────────────────────────────────── */
.cr-bigchart {
  margin:        1.75rem 0;
  background:    var(--cr-surface);
  border:        1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  padding:       1.35rem 1.6rem 1.1rem;
}

.cr-bigchart__header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             1.25rem;
  flex-wrap:       wrap;
  margin-bottom:   1rem;
}

.cr-bigchart__heading { min-width: 0; }

.cr-bigchart__title {
  margin:         0;
  font-size:      1.05rem;
  font-weight:    700;
  letter-spacing: -.01em;
  color:          var(--cr-text-1);
}

.cr-bigchart__sub {
  margin:      .3rem 0 0;
  max-width:   56ch;
  font-size:   .8rem;
  line-height: 1.45;
  color:       var(--cr-text-3);
}

.cr-bigchart__legend {
  display:     flex;
  align-items: center;
  gap:         1rem;
  flex-shrink: 0;
}

.cr-bigchart__legend-item {
  display:        inline-flex;
  align-items:    center;
  gap:            .45rem;
  font-size:      .72rem;
  font-weight:    600;
  letter-spacing: .02em;
  color:          var(--cr-text-2);
}

.cr-bigchart__legend-line {
  width:      22px;
  height:     0;
  flex-shrink: 0;
  border-top: 2px dashed var(--cr-crash);
}

.cr-bigchart__body { width: 100%; }

.cr-bigchart__svg { overflow: visible; }

@media (max-width: 640px) {
  .cr-bigchart { padding: 1.1rem 1rem .9rem; }
  .cr-bigchart__sub { font-size: .75rem; }
}

/* ── Historical crash list ───────────────────────────────────────────────── */
.cr-crashlist {
  margin:        1.75rem 0;
  background:    var(--cr-surface);
  border:        1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  padding:       1.35rem 1.6rem 1.4rem;
}

.cr-crashlist__header { margin-bottom: 1.1rem; }

.cr-crashlist__title {
  margin:         0;
  font-size:      1.05rem;
  font-weight:    700;
  letter-spacing: -.01em;
  color:          var(--cr-text-1);
}

.cr-crashlist__intro {
  margin:      .35rem 0 0;
  max-width:   80ch;
  font-size:   .82rem;
  line-height: 1.55;
  color:       var(--cr-text-3);
}

.cr-crashlist__items {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    grid;
  gap:        .15rem;
}

.cr-crashlist__item {
  padding:    .9rem 0;
  border-top: 1px solid var(--cr-border);
}
.cr-crashlist__item:first-child { border-top: none; padding-top: .2rem; }

.cr-crashlist__top {
  display:     flex;
  align-items: baseline;
  gap:         .65rem;
  flex-wrap:   wrap;
}

.cr-crashlist__years {
  flex-shrink:    0;
  min-width:      5.5rem;
  font-family:    var(--font-mono);
  font-size:      .8rem;
  font-weight:    600;
  letter-spacing: .01em;
  color:          var(--cr-text-3);
}

.cr-crashlist__name {
  font-size:   .95rem;
  font-weight: 700;
  color:       var(--cr-text-1);
}

.cr-crashlist__pct {
  margin-left:    auto;
  flex-shrink:    0;
  font-family:    var(--font-mono);
  font-size:      .82rem;
  font-weight:    700;
  color:          var(--cr-crash);
  white-space:    nowrap;
}

.cr-crashlist__desc {
  margin:      .4rem 0 0;
  max-width:   88ch;
  font-size:   .85rem;
  line-height: 1.55;
  color:       var(--cr-text-2);
}

.cr-crashlist__note {
  margin:        1.2rem 0 0;
  padding-top:   .9rem;
  border-top:    1px solid var(--cr-border);
  font-size:     .72rem;
  line-height:   1.5;
  color:         var(--cr-text-3);
  font-style:    italic;
}

@media (max-width: 640px) {
  .cr-crashlist { padding: 1.1rem 1rem 1.2rem; }
  .cr-crashlist__years { min-width: 0; }
  .cr-crashlist__pct { margin-left: 0; width: 100%; }
}

/* ── Metric cards ────────────────────────────────────────────────────────── */
.cr-cards {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1rem;
}

/* Inside the cards-row, always 2 columns to leave room for news sidebar */
.cr-cards-row .cr-cards {
  grid-template-columns: repeat(2, 1fr);
}

.cr-card {
  background:    var(--cr-card-bg);
  border:        1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  padding:       1.1rem 1rem 1rem;
  display:       flex;
  flex-direction: column;
  gap:           .5rem;
  transition:    border-color var(--cr-transition), box-shadow var(--cr-transition);
  position:      relative;
  overflow:      hidden;
}

.cr-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cr-border-glow);
  transition: background var(--cr-transition);
}

.cr-card[data-status="Calm"]::before,
.cr-card[data-status="Healthy"]::before,
.cr-card[data-status="Strong"]::before,
.cr-card[data-status="Risk-On"]::before { background: var(--cr-calm); }

.cr-card[data-status="Low Stress"]::before,
.cr-card[data-status="Positive"]::before,
.cr-card[data-status="Normal"]::before  { background: rgba(34,197,94,.4); }

.cr-card[data-status="Mixed"]::before,
.cr-card[data-status="Narrowing"]::before,
.cr-card[data-status="Elevated"]::before,
.cr-card[data-status="Weakening"]::before { background: var(--cr-elev); }

.cr-card[data-status="High Stress"]::before,
.cr-card[data-status="Weak"]::before,
.cr-card[data-status="Breakdown"]::before,
.cr-card[data-status="Risk-Off"]::before { background: var(--cr-danger); }

.cr-card[data-status="Extreme"]::before,
.cr-card[data-status="Crisis"]::before,
.cr-card[data-status="Collapse"]::before { background: var(--cr-crash); }

.cr-card__header {
  display:     flex;
  align-items: center;
  gap:         .4rem;
}

.cr-card__num {
  font-size:   .75rem;
  color:       var(--cr-text-3);
  font-weight: 600;
}

.cr-card__name {
  font-size:   .85rem;
  font-weight: 600;
  color:       var(--cr-text-2);
  flex:        1;
}

.cr-card__badge {
  flex-shrink: 0;
}

.cr-card__value {
  font-size:   1.3rem;
  font-weight: 700;
  color:       var(--cr-text-1);
  font-variant-numeric: tabular-nums;
  min-height:  1.6rem;
}

/* Score bar */
.cr-card__score-row {
  display:     flex;
  align-items: center;
  gap:         .5rem;
}

.cr-score-bar-wrap {
  flex:         1;
  height:       5px;
  background:   rgba(255,255,255,.06);
  border-radius: 3px;
  overflow:     hidden;
}

.cr-score-bar {
  height:       100%;
  background:   var(--cr-calm);
  border-radius: 3px;
  transition:   width 500ms ease, background 400ms ease;
  min-width:    0;
  max-width:    100%;
}

.cr-card__score-num {
  font-size:   .75rem;
  color:       var(--cr-text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width:   3.2rem;
  text-align:  right;
}

/* Status label */
.cr-status {
  font-size:   .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:       var(--cr-text-3);
}

/* Status colours */
.cr-card[data-status="Calm"]         .cr-status,
.cr-card[data-status="Healthy"]      .cr-status,
.cr-card[data-status="Strong"]       .cr-status,
.cr-card[data-status="Risk-On"]      .cr-status { color: var(--cr-calm); }

.cr-card[data-status="Low Stress"]   .cr-status,
.cr-card[data-status="Positive"]     .cr-status,
.cr-card[data-status="Normal"]       .cr-status { color: #4ade80; }

.cr-card[data-status="Mixed"]        .cr-status,
.cr-card[data-status="Narrowing"]    .cr-status,
.cr-card[data-status="Elevated"]     .cr-status,
.cr-card[data-status="Weakening"]    .cr-status { color: var(--cr-elev); }

.cr-card[data-status="High Stress"]  .cr-status,
.cr-card[data-status="Weak"]         .cr-status,
.cr-card[data-status="Breakdown"]    .cr-status,
.cr-card[data-status="Risk-Off"]     .cr-status { color: var(--cr-danger); }

.cr-card[data-status="Extreme"]      .cr-status,
.cr-card[data-status="Crisis"]       .cr-status,
.cr-card[data-status="Collapse"]     .cr-status { color: var(--cr-crash); }

/* Score bar colours to match status */
.cr-card[data-status="Calm"]         .cr-score-bar,
.cr-card[data-status="Healthy"]      .cr-score-bar,
.cr-card[data-status="Strong"]       .cr-score-bar,
.cr-card[data-status="Risk-On"]      .cr-score-bar { background: var(--cr-calm); }

.cr-card[data-status="Low Stress"]   .cr-score-bar,
.cr-card[data-status="Positive"]     .cr-score-bar,
.cr-card[data-status="Normal"]       .cr-score-bar { background: #4ade80; }

.cr-card[data-status="Mixed"]        .cr-score-bar,
.cr-card[data-status="Narrowing"]    .cr-score-bar,
.cr-card[data-status="Elevated"]     .cr-score-bar,
.cr-card[data-status="Weakening"]    .cr-score-bar { background: var(--cr-elev); }

.cr-card[data-status="High Stress"]  .cr-score-bar,
.cr-card[data-status="Weak"]         .cr-score-bar,
.cr-card[data-status="Breakdown"]    .cr-score-bar,
.cr-card[data-status="Risk-Off"]     .cr-score-bar { background: var(--cr-danger); }

.cr-card[data-status="Extreme"]      .cr-score-bar,
.cr-card[data-status="Crisis"]       .cr-score-bar,
.cr-card[data-status="Collapse"]     .cr-score-bar { background: var(--cr-crash); }

/* Sparkline */
.cr-sparkline {
  width:   100%;
  height:  30px;
  display: block;
  overflow: visible;
}

.cr-sparkline polyline {
  stroke: var(--cr-spark);
  fill:   none;
  vector-effect: non-scaling-stroke;
}

.cr-card__explanation {
  font-size:   .78rem;
  color:       var(--cr-text-3);
  line-height: 1.5;
  flex:        1;
}

.cr-card__meta {
  font-size:  .7rem;
  color:      var(--cr-text-3);
  opacity:    .7;
}

/* ── Structural Fragility ────────────────────────────────────────────────── */
.cr-fragility {
  background:    var(--cr-card-bg);
  border:        1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  padding:       1.1rem 1.25rem 1.25rem;
}

.cr-fragility__header {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  margin-bottom: .75rem;
}

.cr-fragility__note {
  font-size:  .72rem;
  color:      var(--cr-text-3);
  font-style: italic;
  margin-left: auto;
}

.cr-fragility__body {
  display:   flex;
  flex-wrap: wrap;
  gap:       .75rem;
  align-items: flex-start;
}

.cr-fragility__status {
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--cr-danger);
  min-width:   90px;
}

.cr-fragility__explanation {
  font-size:   .82rem;
  color:       var(--cr-text-3);
  line-height: 1.55;
  flex:        1;
  min-width:   180px;
}

.cr-fragility__metrics {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-wrap:  wrap;
  gap:        .5rem 1.5rem;
}

.cr-fragility__metrics li {
  font-size:  .78rem;
  color:      var(--cr-text-3);
}

.cr-fragility__metrics li strong {
  color: var(--cr-text-2);
}

/* ── Zone legend ─────────────────────────────────────────────────────────── */
.cr-legend {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  flex-wrap:   wrap;
}

.cr-legend__title {
  font-size:   .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:       var(--cr-text-3);
}

.cr-legend__items {
  display:  flex;
  flex-wrap: wrap;
  gap:      .4rem;
}

.cr-legend__item {
  font-size:   .72rem;
  font-weight: 600;
  padding:     .2rem .55rem;
  border-radius: 4px;
  border:      1px solid transparent;
}

.cr-legend__item--calm     { color: var(--cr-calm);   border-color: rgba(34,197,94,.3);  background: rgba(34,197,94,.08);  }
.cr-legend__item--watchful { color: var(--cr-watch);  border-color: rgba(234,179,8,.3);  background: rgba(234,179,8,.08);  }
.cr-legend__item--elevated { color: var(--cr-elev);   border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.08); }
.cr-legend__item--danger   { color: var(--cr-danger); border-color: rgba(239,68,68,.3);  background: rgba(239,68,68,.08);  }
.cr-legend__item--crash    { color: var(--cr-crash);  border-color: rgba(220,38,38,.4);  background: rgba(220,38,38,.1);   }

/* ── Provider status ─────────────────────────────────────────────────────── */
.cr-providers {
  display:     flex;
  align-items: flex-start;
  flex-wrap:   wrap;
  gap:         .6rem;
  border-top:  1px solid var(--cr-border);
  padding-top: 1rem;
}

.cr-providers__title {
  font-size:   .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:       var(--cr-text-3);
  margin-right: .25rem;
  line-height: 22px;
}

.cr-providers__list {
  display:  flex;
  flex-wrap: wrap;
  gap:      .5rem;
  flex:     1;
}

.cr-provider-dot {
  display:     flex;
  align-items: center;
  gap:         .3rem;
  font-size:   .75rem;
  color:       var(--cr-text-3);
}

.cr-provider-dot__dot {
  width:  8px; height: 8px;
  border-radius: 50%;
  background: var(--cr-text-3);
  transition: background .3s, box-shadow .3s;
  flex-shrink: 0;
}

.cr-provider-dot[data-status="ok"]       .cr-provider-dot__dot { background: var(--cr-calm);   box-shadow: 0 0 5px var(--cr-calm); }
.cr-provider-dot[data-status="fallback"] .cr-provider-dot__dot { background: var(--cr-watch);  }
.cr-provider-dot[data-status="error"]    .cr-provider-dot__dot { background: var(--cr-danger); }
.cr-provider-dot[data-status="missing"]  .cr-provider-dot__dot { background: var(--cr-text-3); }

.cr-warnings {
  width:    100%;
  font-size:.75rem;
  color:    var(--cr-elev);
  display:  flex;
  flex-direction: column;
  gap:      .25rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cr-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .cr-gauge-section {
    flex-direction: column;
    align-items:    center;
  }
  .cr-summary-panel {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .cr-cards {
    grid-template-columns: 1fr;
  }
  .cr-score-value {
    font-size: 2.8rem;
  }
  .cr-topbar {
    flex-direction: column;
    align-items:    flex-start;
  }
  .cr-dashboard {
    padding: 1rem .875rem 1.5rem;
    gap:     1.25rem;
  }
  .cr-gauge-wrap {
    min-width: unset;
    width: 100%;
  }
  .cr-fragility__note {
    display: none;
  }
}

/* ── Layout overrides for the dashboard tool ─────────────────────────────── */

/* Widen the narrow container to full width for crash-risk dashboard */
.calculator-card[data-calculator-name="crash-risk"] {
  background:    transparent !important;
  border:        none        !important;
  box-shadow:    none        !important;
  padding:       0           !important;
  border-radius: 0           !important;
  /* Break out of the narrow container's max-width */
  max-width:     none;
}

/* Force the container--narrow wider when it wraps our card */
.tool-calculator:has([data-calculator-name="crash-risk"]) .container--narrow {
  max-width: var(--container-max, 1200px);
}

/* Give the tool-calculator section a matching dark background */
.tool-calculator:has([data-calculator-name="crash-risk"]) {
  background: #080c14;
  padding-top:    1.5rem;
  padding-bottom: 2.5rem;
}

/* Disclaimer text below the card */
.tool-calculator:has([data-calculator-name="crash-risk"]) .calculator-disclaimer {
  color: rgba(148,163,184,.5);
}

/* ── Cards + news row ───────────────────────────────────────────────────── */
.cr-cards-row {
  display:     flex;
  gap:         1rem;
  align-items: flex-start;
}

.cr-cards-row .cr-cards {
  flex: 1;
  min-width: 0; /* prevent overflow */
}

.cr-cards-row .cr-news {
  width:       260px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .cr-cards-row {
    flex-direction: column;
  }
  .cr-cards-row .cr-news {
    width: 100%;
  }
}

/* ── Macro indicators ───────────────────────────────────────────────────── */
.cr-macro {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1rem;
}

.cr-macro__card {
  background:    var(--cr-card-bg);
  border:        1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  padding:       .9rem 1rem;
  display:       flex;
  flex-direction: column;
  gap:           .25rem;
  position:      relative;
  overflow:      hidden;
}

.cr-macro__card::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: var(--cr-border-glow);
  transition: background var(--cr-transition);
}

/* Yield curve colour: green = normal, red = inverted */
.cr-macro__card[data-state="normal"]   ::before,
.cr-macro__card[data-state="normal"]::before   { background: var(--cr-calm); }
.cr-macro__card[data-state="inverted"]::before { background: var(--cr-danger); }
.cr-macro__card[data-state="flat"]::before     { background: var(--cr-watch); }
.cr-macro__card[data-state="fear"]::before     { background: var(--cr-danger); }
.cr-macro__card[data-state="greed"]::before    { background: var(--cr-elev); }
.cr-macro__card[data-state="neutral"]::before  { background: var(--cr-border-glow); }
.cr-macro__card[data-state="high"]::before     { background: var(--cr-elev); }
.cr-macro__card[data-state="low"]::before      { background: var(--cr-calm); }

.cr-macro__label {
  font-size:   .75rem;
  font-weight: 600;
  color:       var(--cr-text-2);
  display:     flex;
  align-items: baseline;
  gap:         .35rem;
}

.cr-macro__sub {
  font-size:   .68rem;
  font-weight: 400;
  color:       var(--cr-text-3);
}

.cr-macro__value {
  font-size:   1.4rem;
  font-weight: 700;
  color:       var(--cr-text-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.cr-macro__status {
  font-size:   .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:       var(--cr-text-3);
}

.cr-macro__card[data-state="normal"]   .cr-macro__status { color: var(--cr-calm); }
.cr-macro__card[data-state="inverted"] .cr-macro__status { color: var(--cr-danger); }
.cr-macro__card[data-state="flat"]     .cr-macro__status { color: var(--cr-watch); }
.cr-macro__card[data-state="fear"]     .cr-macro__status { color: var(--cr-danger); }
.cr-macro__card[data-state="greed"]    .cr-macro__status { color: var(--cr-elev); }
.cr-macro__card[data-state="high"]     .cr-macro__status { color: var(--cr-elev); }
.cr-macro__card[data-state="low"]      .cr-macro__status { color: var(--cr-calm); }

.cr-macro__note {
  font-size:  .68rem;
  color:      var(--cr-text-3);
  margin-top: auto;
}

@media (max-width: 560px) {
  .cr-macro { grid-template-columns: 1fr; }
}

/* ── Market news panel ───────────────────────────────────────────────────── */
.cr-news {
  background:    var(--cr-card-bg);
  border:        1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  padding:       1rem 1.25rem 1.25rem;
  position:      relative;
  overflow:      hidden;
}

.cr-news::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: var(--cr-border-glow);
  transition: background var(--cr-transition);
}

[data-regime="Calm"]          .cr-news::before { background: var(--cr-calm); }
[data-regime="Watchful"]      .cr-news::before { background: var(--cr-watch); }
[data-regime="Elevated Risk"] .cr-news::before { background: var(--cr-elev); }
[data-regime="Danger"]        .cr-news::before { background: var(--cr-danger); }
[data-regime="Crash Mode"]    .cr-news::before { background: var(--cr-crash); }

.cr-news__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   .75rem;
}

.cr-news__title {
  font-size:   .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:       var(--cr-text-3);
}

.cr-news__age {
  font-size:  .7rem;
  color:      var(--cr-text-3);
}

.cr-news__list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        .6rem;
}

.cr-news__item {
  display:     flex;
  gap:         .6rem;
  align-items: flex-start;
  padding-bottom: .6rem;
  border-bottom:  1px solid var(--cr-border);
}

.cr-news__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cr-news__sym {
  flex-shrink:  0;
  font-size:    .65rem;
  font-weight:  700;
  padding:      .1rem .35rem;
  border-radius: 3px;
  background:   rgba(255,255,255,.07);
  color:        var(--cr-text-3);
  margin-top:   .15rem;
  letter-spacing: .03em;
}

.cr-news__body { flex: 1; min-width: 0; }

.cr-news__headline {
  font-size:   .82rem;
  color:       var(--cr-text-1);
  line-height: 1.4;
  text-decoration: none;
  display:     block;
}

.cr-news__headline:hover { color: var(--cr-calm); }

.cr-news__meta {
  margin-top:  .25rem;
  font-size:   .7rem;
  color:       var(--cr-text-3);
  display:     flex;
  gap:         .4rem;
}

.cr-news__skeleton {
  display:       flex;
  flex-direction: column;
  gap:           .4rem;
  padding-bottom: .6rem;
  border-bottom:  1px solid var(--cr-border);
}
.cr-news__skeleton:last-child { border-bottom: none; padding-bottom: 0; }

.cr-news__skeleton span {
  display:       block;
  border-radius: 3px;
  background:    linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation:     cr-shimmer 1.6s infinite;
}
.cr-news__skeleton span:first-child  { height: 12px; width: 90%; }
.cr-news__skeleton span:last-child   { height: 10px; width: 50%; }

@keyframes cr-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}