:root {
  --history-panel: rgba(11, 22, 32, 0.92);
  --history-panel-strong: #0c1822;
  --history-line: rgba(111, 160, 181, 0.22);
  --history-muted: #91a1ad;
  --history-red: #ff3e4d;
  --history-orange: #ff7a1a;
  --history-yellow: #e7bf3d;
  --history-green: #35c56f;
  --history-blue: #42a5ff;
}

.history-main {
  padding: 42px 0 64px;
  color: #eef4f7;
}

.history-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.history-heading h1 {
  margin: 5px 0 6px;
  font-family: var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.history-heading p {
  margin: 0;
  color: var(--history-muted);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.6;
}

.history-controls {
  display: grid;
  justify-items: end;
  gap: 14px;
}

.history-updated {
  color: var(--history-muted);
  font-size: 13px !important;
  font-family: var(--mono, "JetBrains Mono Variable", monospace);
}

.info-dot {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #7d8f9c;
  border-radius: 50%;
  color: #b9c6cd;
  font: 700 11px/1 var(--mono, "JetBrains Mono Variable", monospace);
  vertical-align: 1px;
}

.period-switcher {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.period-button {
  min-width: 66px;
  min-height: 43px;
  padding: 8px 15px;
  border: 1px solid #294151;
  border-radius: 9px;
  background: rgba(5, 14, 21, 0.7);
  color: #d9e1e6;
  font: 700 14px/1 var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}

.period-button:hover,
.period-button:focus-visible {
  border-color: #61bfd0;
  outline: none;
}

.period-button.active {
  border-color: rgba(255, 86, 96, .8);
  background: linear-gradient(145deg, rgba(133, 34, 45, .82), rgba(86, 25, 35, .88));
  color: #ffd9dc;
  box-shadow: 0 0 14px rgba(255, 62, 77, .12), inset 0 1px 0 rgba(255, 214, 218, .08);
}

.history-notice {
  margin: 0 0 16px;
  padding: 11px 16px;
  border: 1px solid rgba(231, 191, 61, .32);
  border-left: 3px solid var(--history-yellow);
  background: rgba(231, 191, 61, .06);
  color: #d8c778;
  font-size: 14px;
}

/* Two real cards: score + regional chart. The former third legend track is
   gone (the legend now lives inside the chart card), so no empty column is
   left at any desktop width. */
.history-overview {
  display: grid;
  grid-template-columns: minmax(190px, 235px) minmax(0, 1fr);
  gap: 14px;
}

/* The per-target trend card is a desktop-only addition. Keeping it closed in
   the base rule means tablets and phones keep the exact page they render
   today; the min-width block at the end of this file turns it back on. */
.history-trend { display: none; }

.history-card,
.history-method-strip,
.history-fatal {
  position: relative;
  border: 1px solid var(--history-line);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0, rgba(25, 78, 110, .1), transparent 34%),
    var(--history-panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}

/* Every card heading is a 12px section label (defined once at the end of this
   file); only the reset below is still needed so h2 keeps no UA margins. */
.history-card h2 { margin: 0; }

.score-card {
  min-height: 500px;
  padding: 28px 25px;
}

.score-primary {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 12px;
}

.score-content-group {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  width: max-content;
  max-width: 100%;
}

.score-caption-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: max-content;
  max-width: 100%;
}

.score-caption-row .score-kicker { margin: 0; }
.score-caption-row .score-level { margin: 0; padding: 5px 10px; font-size: 13px; }
.score-caption-row .score-level::before { width: 8px; height: 8px; }

.score-content-group .score-kicker { margin-top: 0; }
.score-content-group .score-main-row { width: max-content; max-width: 100%; justify-content: center; }

.score-kicker,
.score-range,
.period-change-kicker {
  color: #9aaab4;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
}

.score-kicker { margin-top: 16px; }

.score-main-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.score-main-row .history-score { margin: 0; }

.score-range {
  color: #aebdc4;
  font-family: var(--mono, "JetBrains Mono Variable", monospace);
  letter-spacing: -.02em;
  display: none;
}

.history-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 30px 0 10px;
}

.history-score strong {
  color: var(--history-orange);
  font: 700 clamp(58px, 5vw, 78px)/.9 var(--mono, "JetBrains Mono Variable", monospace);
  letter-spacing: -.055em;
}

.history-score span {
  color: #b5c1c8;
  font: 700 22px/1 var(--mono, "JetBrains Mono Variable", monospace);
}

.score-level {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 122, 26, .14);
  color: #ff9953;
  font-weight: 800;
  justify-self: start;
  margin-top: 2px;
}

.score-level::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

.period-change-group {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  margin-top: 34px;
  padding: 15px 0 0;
}

.period-change-value {
  display: grid;
  gap: 12px;
  align-content: center;
  justify-items: center;
}

.period-change-label {
  color: #ccd6dc;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
}

.period-change-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.period-change-value > strong,
.period-change-hero > strong {
  color: var(--history-red);
  font: 700 46px/.95 var(--mono, "JetBrains Mono Variable", monospace);
  letter-spacing: -.045em;
  white-space: nowrap;
}

.period-change-arrow {
  display: inline-grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid rgba(53, 197, 111, .38);
  border-radius: 50%;
  background: rgba(53, 197, 111, .08);
  color: var(--history-green);
  font: 700 46px/1 var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
}

.period-change-value > p {
  margin: 0;
  padding: 0;
  color: #aebdc4;
  font: 650 15px/1.3 var(--mono, "JetBrains Mono Variable", monospace);
  letter-spacing: -.02em;
}

.period-comparison {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  width: min(100%, 430px);
  gap: 14px;
  margin-top: 10px;
}

.period-comparison-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px 18px;
  border: 1px solid #294151;
  border-radius: 9px;
  background: rgba(5, 14, 21, .36);
  text-align: center;
}

.period-comparison-card span {
  color: #9aaab4;
  font-size: 14px;
  font-weight: 650;
}

.period-comparison-card strong {
  color: #eef4f7;
  font: 700 28px/1 var(--mono, "JetBrains Mono Variable", monospace);
}

.period-comparison-arrow {
  color: #aebdc4;
  font: 700 30px/1 var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
}

.period-comparison-note {
  margin: 0;
  color: #aebdc4;
  font-size: 14px;
  line-height: 1.4;
}

.period-change-caption {
  color: #82949e;
  font: 650 12px/1.25 var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
  letter-spacing: -.01em;
  white-space: nowrap;
}

.bubble-card {
  min-width: 0;
  min-height: 500px;
  padding: 22px 22px 14px;
}

.bubble-chart-shell {
  position: relative;
  min-height: 420px;
  margin-top: 10px;
}

#bubbleChart {
  display: block;
  width: 100%;
  height: 420px;
  overflow: visible;
}

.chart-grid line {
  stroke: rgba(103, 151, 172, .38);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
}

.chart-axis {
  stroke: #9aaeb8;
  stroke-width: 1.5;
}

.chart-label {
  fill: #d0dde1;
  font: 750 15px var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
}

.chart-sublabel {
  fill: #93a7b0;
  font: 650 13px var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
}

.chart-axis-title {
  fill: #b8c4ca;
  font: 800 22px var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
}

.chart-vertical-axis-title {
  letter-spacing: -.025em;
}

.chart-bubble {
  cursor: pointer;
  outline: none;
}

.chart-bubble .bubble-halo {
  opacity: .3;
  filter: blur(9px);
}

.chart-bubble .bubble-core {
  fill-opacity: .88;
  stroke-width: 2.25;
}

.chart-bubble:hover .bubble-core,
.chart-bubble:focus .bubble-core {
  fill-opacity: .95;
  stroke-width: 3;
}

.bubble-name,
.bubble-score {
  fill: #fff;
  text-anchor: middle;
  pointer-events: none;
  font-family: var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(4, 10, 15, .55);
  stroke-width: 2px;
}

.bubble-name { font-size: 19px; }
.bubble-score { font: 800 26px var(--mono, "JetBrains Mono Variable", monospace); }

.impact-pending-band {
  fill: rgba(231, 191, 61, .045);
  stroke: rgba(231, 191, 61, .25);
  stroke-dasharray: 5 5;
}

.chart-tooltip {
  position: absolute;
  z-index: 8;
  max-width: 245px;
  padding: 12px 14px;
  border: 1px solid #36505f;
  border-radius: 8px;
  background: rgba(4, 12, 18, .97);
  color: #e8eef2;
  box-shadow: 0 12px 35px rgba(0,0,0,.45);
  font-size: 13px;
  pointer-events: none;
}

.chart-tooltip strong { display: block; margin-bottom: 5px; font-size: 15px; }
.chart-tooltip span { color: #9dacb5; }

.chart-axis-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  color: #b8c4ca;
  font-size: 13px;
}

.chart-reading-guide { display: none; }

.legend-card {
  min-height: 500px;
  padding: 28px 24px;
}

.risk-legend {
  display: grid;
  gap: 22px;
  margin: 34px 0 28px;
}

.legend-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  color: #d8e0e4;
  font-size: 14px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--legend-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--legend-color), transparent 30%);
}

.legend-range {
  color: #9babb4;
  font-family: var(--mono, "JetBrains Mono Variable", monospace);
}

.legend-card ul {
  margin: 0;
  padding-left: 19px;
  color: var(--history-muted);
  font-size: 13px;
  line-height: 1.8;
}

.history-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.detail-card {
  min-height: 300px;
  padding: 24px;
}

.change-list,
.turning-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.change-list li {
  display: grid;
  grid-template-columns: 22px minmax(90px, 1fr) minmax(70px, 1.7fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  color: #d9e2e6;
  font-size: 14px;
}

.change-index {
  color: #a8b5bc;
  font-family: var(--mono, "JetBrains Mono Variable", monospace);
}

.change-track {
  height: 10px;
  border-radius: 999px;
  background: #17232b;
  overflow: hidden;
}

.change-track i {
  display: block;
  height: 100%;
  width: var(--change-width);
  border-radius: inherit;
  background: var(--change-color);
}

.change-value {
  font: 700 14px var(--mono, "JetBrains Mono Variable", monospace);
}

.turning-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(111, 160, 181, .24);
}

.turning-summary-accent {
  width: 5px;
  height: 39px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--history-red);
  box-shadow: 0 0 12px rgba(255, 62, 77, .28);
}

.turning-summary-date {
  color: #edf3f6;
  font: 750 28px/1 var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
  letter-spacing: -.035em;
  white-space: nowrap;
}

.turning-summary-count {
  color: #93a4ae;
  font-size: 18px;
  font-weight: 650;
  white-space: nowrap;
}

.turning-list li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 24px;
  gap: 16px;
  align-items: start;
  min-height: 86px;
  padding: 18px 12px;
  color: #d5dfe4;
  font-size: 17px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(111, 160, 181, .18);
}

.turning-list li:first-child {
  background: rgba(24, 49, 66, .48);
}

.turning-index {
  align-self: center;
  color: #aab7be;
  font: 700 24px/1 var(--mono, "JetBrains Mono Variable", monospace);
  letter-spacing: -.04em;
}

.turning-arrow {
  align-self: center;
  color: #aebbc3;
  font: 400 34px/.8 var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
  text-align: right;
}

.turning-title {
  display: -webkit-box;
  overflow: hidden;
  color: #d9e4e8;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.55;
  letter-spacing: -.012em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-decoration: none;
  text-decoration-thickness: 0;
  text-underline-offset: 0;
  transition: color .2s, background-color .2s;
}

.turning-title:hover {
  color: #7ad4df;
}

.turning-title:focus-visible {
  outline: 2px solid #61bfd0;
  outline-offset: 3px;
  border-radius: 2px;
}

.summary-card > p {
  margin: 22px 0;
  color: #c1ccd2;
  font-size: 15px;
  line-height: 1.75;
}

.summary-counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.summary-counts div {
  min-width: 0;
  padding: 16px 7px;
  border: 1px solid rgba(86, 124, 142, .16);
  border-radius: 8px;
  background: rgba(5, 14, 20, .38);
  text-align: center;
}

.summary-counts span {
  display: block;
  color: #a8b6be;
  font-size: 12px;
}

.summary-counts strong {
  display: block;
  margin-top: 8px;
  font: 800 27px var(--mono, "JetBrains Mono Variable", monospace);
}

.summary-counts div:nth-child(1) strong { color: var(--history-red); }
.summary-counts div:nth-child(2) strong { color: var(--history-orange); }
.summary-counts div:nth-child(3) strong { color: var(--history-green); }

.empty-state {
  margin: 28px 0 0;
  padding: 18px;
  border: 1px dashed rgba(103, 142, 160, .27);
  color: #8fa0aa;
  text-align: center;
  line-height: 1.6;
}

.history-method-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  padding: 17px 22px;
  color: #91a1aa;
  font-size: 13px;
}

.history-method-strip p { margin: 0; }
.history-method-strip a { color: #d8e2e7; font-weight: 700; text-decoration: none; white-space: nowrap; }
.history-method-strip a:hover { color: #7ad4df; }

.history-fatal {
  margin-top: 20px;
  padding: 36px;
  text-align: center;
}

.history-fatal p { color: var(--history-muted); }
.history-fatal button { padding: 11px 18px; border: 1px solid #3a5968; background: #10212b; color: white; cursor: pointer; }

@media (max-width: 1180px) {
  .history-overview { grid-template-columns: 210px minmax(0, 1fr); }
  .legend-card { grid-column: 1 / -1; min-height: auto; }
  .risk-legend { grid-template-columns: repeat(4, 1fr); }
  .history-detail-grid { grid-template-columns: 1fr 1fr; }
  .summary-card { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .history-main { padding-top: 25px; }
  .history-heading { display: grid; align-items: start; }
  .history-heading h1 { font-size: 24px; }
  .history-heading p { font-size: 15px; line-height: 1.7; }
  .history-controls { justify-items: start; width: 100%; }
  .period-switcher { justify-content: flex-start; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; }
  .period-button { min-width: 62px; }
  .history-overview { grid-template-columns: 1fr; }
  .score-card,
  .bubble-card,
  .legend-card { min-height: auto; }
  .score-card { padding: 22px; }
  .score-primary { gap: 10px; }
  .score-kicker { margin-top: 12px; }
  .score-main-row { gap: 16px; }
  .history-score { margin-top: 22px; }
  .period-change-group { margin-top: 26px; padding-top: 12px; }
  .period-change-kicker { margin-top: 2px; }
  .period-change-hero { gap: 16px; }
  .period-change-arrow { width: 56px; height: 56px; font-size: 38px; }
  .period-comparison { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; width: 100%; }
  .period-comparison-card { padding: 10px 8px; }
  .period-comparison-card strong { font-size: 23px; }
  .period-comparison-arrow { font-size: 24px; }
  .bubble-card { padding: 18px 12px 12px; overflow: hidden; }
  .bubble-chart-shell { min-height: 355px; overflow: hidden; }
  #bubbleChart { width: 100%; min-width: 0; height: 355px; }
  .bubble-name { font-size: 18px; }
  .bubble-score { font-size: 24px; }
  .chart-axis-note { padding: 0 8px; }
  .legend-card { padding: 20px; }
  .risk-legend { grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
  .history-detail-grid { grid-template-columns: 1fr; }
  .summary-card { grid-column: auto; }
  .detail-card { min-height: auto; padding: 20px; }
  .change-list li { grid-template-columns: 20px minmax(90px, 1fr) 80px auto; }
  .history-method-strip { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .history-heading h1 { font-size: 24px; }
  .history-heading p { font-size: 15px; }
  .history-updated { font-size: 12px !important; }
  .history-score strong { font-size: 64px; }
  .score-main-row { align-items: flex-end; gap: 12px; }
  .score-main-row .score-level { margin-bottom: 6px; }
  .period-change-value > strong,
  .period-change-hero > strong { font-size: 42px; }
  .risk-legend { grid-template-columns: 1fr; }
  .change-list li { grid-template-columns: 18px minmax(100px, 1fr) auto; }
  .change-track { display: none; }
  .summary-counts { gap: 5px; }
  .summary-counts div { padding: 13px 4px; }
  .summary-counts span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (max-width: 768px) {
  .history-main { padding-top: 20px; }
  .history-heading { margin-right: var(--mobile-app-gutter); margin-left: var(--mobile-app-gutter); }
  .history-notice, .history-card, .history-method-strip, .history-fatal { border-right-width: 0; border-left-width: 0; border-radius: 0; }
}

@media (max-width: 768px) {
  .history-overview, .history-detail-grid { gap: 0; }
  .history-card, .history-method-strip, .history-fatal { margin-top: 0; border-top: 1px solid var(--history-line); box-shadow: none; background: #07111a; }
}

/* Mobile history is read as one continuous briefing.  Leave chart marks in
   place, but remove the stacked structural rules that repeated the same
   separation between the guide, legend and following cards. */
@media (max-width: 768px) {
  .history-card,
  .history-method-strip,
  .history-fatal,
  .chart-reading-guide,
  .bubble-legend,
  .bubble-legend ul,
  .bubble-legend .legend-row {
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
  }

  .chart-reading-guide {
    margin-top: 12px;
    padding-top: 12px;
  }

  .bubble-legend {
    padding-top: 12px;
  }
}

/* Mobile full-bleed: data panels use the viewport width without crowding headings. */
@media (max-width: 760px) {
  .history-heading { margin-right: 11px; margin-left: 11px; }
  .history-notice,
  .history-card,
  .history-method-strip,
  .history-fatal {
    border-right-width: 0;
    border-left-width: 0;
    border-radius: 0;
  }
}

/* Mobile bubble map: use the full card height and keep every label readable. */
@media (max-width: 620px) {
  .bubble-card { padding: 28px 20px 32px; }
  .bubble-card h2 { font-size: 24px; line-height: 1.15; letter-spacing: -.035em; }
  .bubble-card .info-dot { width: 28px; height: 28px; font-size: 16px; }
  .bubble-chart-shell { min-height: 355px; margin-top: 18px; overflow: visible; }
  #bubbleChart { height: 355px; overflow: visible; }
  .chart-label { font-size: 26px; }
  .chart-axis-title { font-size: 29px; }
  .bubble-name { font-size: 32px; stroke-width: 3px; }
  .bubble-score { font-size: 46px; stroke-width: 3px; }
  .chart-axis-note { display: none; }
  .chart-reading-guide { display: grid; gap: 24px; margin-top: 22px; padding-top: 24px; border-top: 1px solid rgba(126, 157, 175, .34); }
  .chart-reading-guide > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; align-items: start; }
  .chart-reading-guide > div > span { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(125, 158, 177, .5); border-radius: 50%; color: #39d8de; font-size: 37px; line-height: 1; }
  .chart-reading-guide p { margin: 0; }
  .chart-reading-guide strong { display: block; color: #e9f0f2; font-size: 21px; line-height: 1.35; }
  .chart-reading-guide small { display: block; margin-top: 5px; color: #aebdc3; font-size: 16px; font-weight: 560; line-height: 1.55; }
}

/* Keep the score unit attached to the value instead of wrapping “/ 10”. */
.history-score {
  flex-wrap: nowrap;
  gap: 5px;
}

.history-score span {
  flex: 0 0 auto;
  display: inline-block;
  white-space: nowrap;
}

/* Desktop legend: let the card hug its content and group each level for quick scanning. */
@media (min-width: 769px) {
  .legend-card {
    align-self: start;
    min-height: 0;
    padding: 24px 22px;
  }

  .legend-card h2 { margin-bottom: 2px; }

  .legend-card .risk-legend {
    gap: 0;
    margin: 18px 0 22px;
  }

  .legend-card .legend-row {
    min-height: 44px;
    padding: 9px 0;
    gap: 11px;
    border: 0;
    border-bottom: 1px solid rgba(111, 160, 181, .16);
    border-radius: 0;
    background: transparent;
  }

  .legend-card .legend-row:last-child {
    border-bottom: 0;
  }

  .legend-card .legend-range {
    color: #b0bec5;
    font-weight: 650;
  }

  .legend-card ul {
    padding-left: 17px;
    color: #9eafb8;
    font-size: 12px;
    line-height: 1.65;
  }
}



/* Two real cards only: the score stays compact while the bubble chart owns
   the dominant track. */
@media (min-width: 1181px) {
  .history-overview {
    grid-template-columns: minmax(210px, .62fr) minmax(460px, 1.68fr);
  }

  .history-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .history-detail-grid > .detail-card {
    border-color: rgba(111, 160, 181, .16);
    background: rgba(8, 18, 27, .84);
  }
}

/* Wide desktop: the regional bubble map is the hero — a full-width chart row
   first, then the score and analysis in a quieter row underneath. */
@media (min-width: 1401px) {
  .history-main {
    /* Full-width split: the figure owns the left 7 columns, the right 3
       carry the global score card. Both cards share the one content row,
       so stretching them yields identical heights. */
    --figure-height: 640px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 14px;
    grid-template-areas:
      "heading"
      "notice"
      "trend"
      "summary"
      "method";
    /* The content row is pinned — figure height plus each card's 1px top and
       bottom border — so the plot's height is fixed and the score card can
       only match it, never inflate it: change --figure-height to resize both
       cards together. */
    grid-template-rows: auto auto auto auto auto;
  }

  .history-heading,
  .history-notice,
  .history-method-strip,
  .history-trend,
  .history-detail-grid {
    margin-top: 0;
  }

  .history-heading { grid-area: heading; margin-bottom: 4px; }
  .history-notice { grid-area: notice; margin-bottom: 0; }
  .history-trend { grid-area: trend; }
  .history-detail-grid { display: contents; }
  .history-detail-grid > .summary-card { grid-area: summary; }
  .history-method-strip { grid-area: method; }

  .score-card {
    min-height: 0;
    padding: 22px 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 28px;
    align-items: stretch;
    justify-items: stretch;
    text-align: left;
  }

  .score-card .score-primary {
    grid-column: 1;
    grid-row: 1;
    align-content: center;
    padding: 0 26px;
  }

  .score-card .score-primary h2 { margin: 0; text-align: left; font-size: clamp(26px, 2.2vw, 44px); line-height: 1.15; }
  .score-card .score-primary h2 .info-dot { width: clamp(22px, 1.7vw, 34px); height: clamp(22px, 1.7vw, 34px); font-size: clamp(13px, .95vw, 19px); }
  .score-card .score-kicker { margin-top: 28px; font-size: clamp(18px, 1.45vw, 30px); }
  .score-card .score-main-row { justify-content: flex-start; flex-wrap: nowrap; gap: clamp(12px, 1.6vw, 32px); }
  .score-card .history-score { margin: 0; }
  .score-card .history-score strong { font-size: clamp(76px, 5.8vw, 118px); }
  .score-card .history-score span { font-size: clamp(26px, 2.2vw, 48px); }
  .score-card .score-level { flex: 0 0 auto; white-space: nowrap; padding: 11px 18px; font-size: clamp(16px, 1.25vw, 25px); }
  .score-card .score-level::before { width: 12px; height: 12px; }
  .score-card .score-range { text-align: left; font-size: clamp(17px, 1.35vw, 28px); }
  .score-card .period-change-group {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    align-content: stretch;
    justify-items: stretch;
    margin: 0;
    padding: 0 28px;
    border-left: 1px solid rgba(111, 160, 181, .22);
    text-align: center;
  }

  .score-card .period-change-group .period-change-label { justify-self: start; text-align: left; font-size: clamp(26px, 2.2vw, 44px); line-height: 1.15; }
  .score-card .period-change-kicker { justify-self: start; margin-top: 16px; font-size: clamp(18px, 1.45vw, 30px); }
  .score-card .period-change-value { width: 100%; align-content: center; justify-items: center; text-align: center; }
  .score-card .period-change-hero { gap: clamp(14px, 1.4vw, 26px); }
  .score-card .period-change-hero > strong { font-size: clamp(58px, 4.6vw, 96px); }
  .score-card .period-change-arrow { flex: 0 0 auto; width: clamp(62px, 3.6vw, 78px); height: clamp(62px, 3.6vw, 78px); font-size: clamp(44px, 2.8vw, 62px); }
  .score-card .period-comparison { width: min(100%, 520px); gap: clamp(10px, 1.2vw, 22px); }
  .score-card .period-comparison-card { padding: 16px 22px; }
  .score-card .period-comparison-card span { font-size: clamp(15px, 1.2vw, 24px); }
  .score-card .period-comparison-card strong { font-size: clamp(30px, 2.2vw, 46px); }
  .score-card .period-comparison-arrow { font-size: clamp(30px, 2.5vw, 52px); }

  .history-detail-grid > .detail-card { min-height: 0; }
  .summary-card { padding: 24px 22px; }

  /* Hero chart: give the map real presence instead of the old 320px strip. */
  .bubble-card { min-height: 0; padding: 26px 28px 20px; }
  .bubble-chart-shell { min-height: var(--figure-height); }
  #bubbleChart { height: var(--figure-height); }
}

/* Keep the reference score composition intact on compact desktop viewports.
   The score and level badge stay on one line without crossing the divider. */
@media (min-width: 1401px) and (max-width: 1550px) {
  .score-card {
    grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
    column-gap: 20px;
  }

  .score-card .score-primary { padding: 0 12px; }
  .score-card .score-primary h2 { font-size: clamp(22px, 1.65vw, 32px); }
  .score-card .score-kicker { margin-top: 20px; font-size: clamp(14px, 1.05vw, 20px); }
  .score-card .score-main-row { gap: 14px; }
  .score-card .history-score strong { font-size: clamp(64px, 4.8vw, 96px); }
  .score-card .history-score span { font-size: clamp(20px, 1.6vw, 32px); }
  .score-card .score-level { padding: 9px 14px; font-size: clamp(14px, 1.05vw, 20px); }
  .score-card .score-level::before { width: 10px; height: 10px; }
  .score-card .period-change-group { padding-right: 18px; padding-left: 18px; }
  .score-card .period-change-group .period-change-label { font-size: clamp(22px, 1.65vw, 32px); }
  .score-card .period-change-kicker { margin-top: 10px; font-size: clamp(14px, 1.05vw, 20px); }
  .score-card .period-change-hero { gap: 14px; }
  .score-card .period-change-hero > strong { font-size: clamp(48px, 3.8vw, 78px); }
  .score-card .period-change-arrow {
    width: clamp(56px, 3.2vw, 70px);
    height: clamp(56px, 3.2vw, 70px);
    font-size: clamp(40px, 2.5vw, 56px);
  }
  .score-card .period-comparison { gap: 10px; }
  .score-card .period-comparison-card { padding: 12px 14px; }
  .score-card .period-comparison-card span { font-size: clamp(14px, 1vw, 20px); }
  .score-card .period-comparison-card strong { font-size: clamp(26px, 1.8vw, 38px); }
}

/* Embed risk levels in the regional chart card instead of a separate outer card. */
.bubble-card-layout {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.bubble-chart-content,
.bubble-legend {
  min-width: 0;
}

.bubble-legend {
  padding: 18px 0 0;
  border-top: 1px solid rgba(111, 160, 181, .18);
}

.bubble-legend h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.bubble-legend .risk-legend {
  gap: 0;
  margin: 16px 0 18px;
}

.bubble-legend .legend-row {
  min-height: 42px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid rgba(111, 160, 181, .14);
  border-radius: 0;
  background: transparent;
}

.bubble-legend .legend-row:last-child { border-bottom: 1px solid rgba(111, 160, 181, .14); }

.bubble-legend .legend-range {
  color: #b0bec5;
  font-weight: 650;
}

.bubble-legend ul {
  margin: 0;
  padding: 14px 0 0 17px;
  border-top: 0;
  color: #9eafb8;
  font-size: 12px;
  line-height: 1.65;
}

/* Hero chart layout at 1401px+: full-width map first, legend as a quiet strip. */
@media (min-width: 1401px) {
  .bubble-card-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .bubble-legend {
    padding: 14px 0 0;
    border-top: 1px solid rgba(111, 160, 181, .2);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .bubble-card-layout { gap: 20px; }
  .bubble-legend { padding-top: 18px; }
  .bubble-legend .risk-legend {
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }
}

/* Match every history card to the current-global-risk card surface. */
.history-main .history-card {
  background:
    radial-gradient(circle at 100% 0, rgba(25, 78, 110, .1), transparent 34%),
    var(--history-panel);
}

/* Keep every desktop card heading, including the period-change label, on one type scale. */
@media (min-width: 769px) {
  .history-main .history-card h2,
  .history-main .period-change-label,
  .history-main .bubble-legend h2 {
    color: #dce7eb;
    font-family: var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
    font-size: 22px;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -.025em;
  }
}

/* Keep the score card proportions stable on very wide monitors as well. */
@media (min-width: 1551px) {
  .score-card .score-primary h2 { font-size: clamp(24px, 1.8vw, 36px); }
  .score-card .score-kicker { margin-top: 22px; font-size: clamp(15px, 1.18vw, 24px); }
  .score-card .history-score strong { font-size: clamp(70px, 5.4vw, 108px); }
  .score-card .history-score span { font-size: clamp(22px, 1.8vw, 40px); }
  .score-card .score-level { padding: 10px 16px; font-size: clamp(15px, 1.05vw, 22px); }
  .score-card .score-level::before { width: 10px; height: 10px; }
  .score-card .score-range { font-size: clamp(16px, 1.18vw, 24px); }
  .score-card .period-change-group .period-change-label { font-size: clamp(24px, 1.8vw, 36px); }
  .score-card .period-change-kicker { margin-top: 12px; font-size: clamp(15px, 1.18vw, 24px); }
  .score-card .period-change-hero > strong { font-size: clamp(52px, 4.2vw, 86px); }
  .score-card .period-change-arrow {
    width: clamp(58px, 3.4vw, 72px);
    height: clamp(58px, 3.4vw, 72px);
    font-size: clamp(40px, 2.6vw, 56px);
  }
  .score-card .period-comparison-card { padding: 14px 18px; }
  .score-card .period-comparison-card span { font-size: clamp(14px, 1vw, 20px); }
  .score-card .period-comparison-card strong { font-size: clamp(28px, 1.9vw, 40px); }
}

@media (min-width: 1401px) {
  .history-main .turning-card {
    padding: 28px 34px;
  }

  .history-main .turning-card h2 {
    font-size: clamp(24px, 1.9vw, 38px);
    line-height: 1.2;
  }

  .turning-summary {
    gap: 18px;
    margin-top: 30px;
    padding-bottom: 22px;
  }

  .turning-summary-accent { width: 6px; height: 46px; }
  .turning-summary-date { font-size: clamp(18px, 1.15vw, 23px); }
  .turning-summary-count { font-size: clamp(13px, .8vw, 16px); }
  .turning-list { margin-top: 0; }
  .turning-list li {
    grid-template-columns: 80px minmax(0, 1fr) 30px;
    gap: 20px;
    min-height: 72px;
    padding: 14px 16px;
  }
  .turning-index { font-size: clamp(16px, .9vw, 19px); }
  .turning-title { font-size: clamp(14px, .8vw, 16px); line-height: 1.4; }
  .turning-arrow { font-size: clamp(22px, 1.15vw, 27px); }
}

@media (max-width: 760px) {
  .turning-summary { gap: 10px; margin-top: 18px; padding-bottom: 14px; }
  .turning-summary-accent { width: 4px; height: 30px; }
  .turning-summary-date { font-size: 20px; }
  .turning-summary-count { font-size: 13px; }
  .turning-list { margin-top: 0; }
  .turning-list li {
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    gap: 10px;
    min-height: 68px;
    padding: 14px 4px;
  }
  .turning-index { font-size: 17px; }
  .turning-title { font-size: 15px; line-height: 1.45; }
  .turning-arrow { font-size: 28px; }
}

/* Compact the before/current comparison without sacrificing legibility. */
@media (min-width: 1401px) {
  .score-caption-row { gap: 12px; }
  .score-card .score-kicker,
  .score-card .period-change-kicker {
    font-size: clamp(13px, .85vw, 18px);
  }
  .score-card .period-change-kicker {
    justify-self: center;
    text-align: center;
  }
  .score-caption-row .score-level {
    padding: 5px 10px;
    font-size: clamp(11px, .7vw, 15px);
  }
  .score-caption-row .score-level::before { width: 8px; height: 8px; }
  .score-card .period-change-arrow {
    width: clamp(48px, 2.4vw, 56px);
    height: clamp(48px, 2.4vw, 56px);
    font-size: clamp(34px, 2vw, 44px);
  }
}

@media (max-width: 760px) {
  .score-caption-row { gap: 9px; }
  .score-caption-row .score-level { padding: 4px 8px; font-size: 12px; }
  .score-caption-row .score-level::before { width: 7px; height: 7px; }
}

@media (min-width: 1401px) {
  .score-card .period-comparison {
    width: min(100%, 400px);
    gap: 8px;
    margin-top: 6px;
  }
  .score-card .period-comparison-card { padding: 9px 12px; gap: 4px; }
  .score-card .period-comparison-card span { font-size: clamp(12px, .75vw, 16px); }
  .score-card .period-comparison-card strong { font-size: clamp(22px, 1.4vw, 30px); }
  .score-card .period-comparison-arrow { font-size: clamp(22px, 1.6vw, 34px); }
}

/* Align the two score-card titles with the analysis-summary heading on desktop. */
@media (min-width: 1401px) {
  .score-card .score-primary { position: relative; }
  .score-card .score-primary h2 {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    transform: none;
  }
  .score-card .score-primary h2 .info-dot {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
  .score-card .period-change-group .period-change-label {
    font-size: 22px;
    line-height: 1.25;
  }
  .history-main .turning-card h2 {
    font-size: 22px;
    line-height: 1.25;
  }
}

/* Refine the desktop score composition: keep both halves balanced and center
   the score metadata with the value instead of letting the caption hug its
   own content width. */
@media (min-width: 1401px) {
  .score-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
  }

  .score-card .score-primary {
    padding: 0 18px;
    align-content: center;
  }

  .score-card .score-content-group {
    width: min(100%, 430px);
    max-width: 100%;
    justify-self: center;
    gap: 10px;
  }

  .score-card .score-caption-row,
  .score-card .score-main-row {
    width: 100%;
    max-width: none;
    justify-content: center;
  }

  .score-card .period-change-group {
    padding-left: 20px;
    padding-right: 20px;
  }

  .score-card .period-change-value {
    align-content: center;
  }
}

/* Mobile score card: use one shared center line so the metadata, score and
   period-change block read as a single composed unit. */
@media (max-width: 760px) {
  .score-card {
    padding: 20px 16px 24px;
  }

  .score-card .score-primary {
    gap: 8px;
  }

  .score-card .score-content-group {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    gap: 8px;
  }

  .score-card .score-caption-row,
  .score-card .score-main-row {
    width: 100%;
    max-width: none;
    justify-content: center;
  }

  .score-card .score-caption-row {
    gap: 10px;
  }

  .score-card .history-score {
    margin-top: 8px;
  }

  .score-card .period-change-group {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid rgba(111, 160, 181, .18);
  }

  .score-card .period-change-group .period-change-label,
  .score-card .period-change-kicker {
    justify-self: center;
    text-align: center;
  }

  .score-card .period-change-group .period-change-label {
    font-size: 20px;
  }

  .score-card .period-change-kicker {
    margin-top: 0;
  }

  .score-card .period-change-value {
    width: 100%;
  }

  .score-card .period-comparison {
    width: 100%;
    margin-top: 14px;
  }
}

/* Scale the chart reading guide to the mobile card instead of letting the
   explanatory copy dominate the chart. */
@media (max-width: 620px) {
  .chart-reading-guide {
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
  }

  .chart-reading-guide > div {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
  }

  .chart-reading-guide > div > span {
    width: 48px;
    height: 48px;
    font-size: 30px;
  }

  .chart-reading-guide strong {
    font-size: 18px;
    line-height: 1.35;
  }

  .chart-reading-guide small {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
  }
}

/* The page-level bottom padding creates a large dead zone before the mobile
   footer. Let the footer follow the method note directly. */
@media (max-width: 620px) {
  .history-main {
    padding-bottom: 0;
  }
}

/* Make partial-history messaging read like a live system warning rather than
   a decorative callout. */
.history-notice {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(231, 191, 61, .42);
  border-left: 3px solid var(--history-yellow);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(120, 94, 20, .14), rgba(12, 22, 27, .86));
  box-shadow: inset 0 1px 0 rgba(255, 231, 142, .06), inset 0 -1px 0 rgba(0, 0, 0, .22);
  color: #dfcd83;
  font: 650 13px/1.55 var(--mono, "JetBrains Mono Variable", monospace);
  letter-spacing: -.015em;
}

.history-notice::before {
  content: "!";
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: var(--history-yellow);
  font: 800 13px/1 var(--mono, "JetBrains Mono Variable", monospace);
}

.history-notice[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .history-notice {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 9px;
    margin-bottom: 12px;
    padding: 11px 14px;
    border-radius: 0;
    font-size: 12px;
    line-height: 1.55;
  }

  .history-notice::before {
    width: 18px;
    height: 18px;
    font-size: 12px;
  }
}

/* Use a red severity treatment for the active system warning only. */
.history-notice {
  border-color: rgba(255, 62, 77, .48);
  border-left-color: var(--history-red);
  background: linear-gradient(90deg, rgba(126, 27, 38, .2), rgba(18, 17, 24, .9));
  box-shadow: inset 0 1px 0 rgba(255, 151, 158, .08), inset 0 -1px 0 rgba(0, 0, 0, .24);
  color: #ffc4c8;
}

.history-notice::before {
  color: var(--history-red);
}

/* Overview labels use the same quiet cyan hierarchy as briefing sections. */
.history-overview > .score-card .score-primary > h2,
.history-overview > .bubble-card .bubble-chart-content > h2,
.history-overview > .bubble-card .bubble-legend > h2,
.history-detail-grid > .summary-card > h2 {
  color: #57c8c1;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: .015em;
}

/* One concise legend is enough; removing the former guide lets the next
   content begin immediately below the chart. */
.chart-axis-note {
  display: block;
  margin: 4px 0 0;
  color: #91a8af;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 620px) {
  .chart-axis-note {
    display: block;
    padding: 0;
    font-size: 11px;
    white-space: nowrap;
  }
  .bubble-card { padding-bottom: 16px; }
}

/* Desktop hero hierarchy: the regional map leads the page, while the score
   and the analysis cards stay quiet next to it. Scoped to 769px and up so
   none of the mobile layouts above are touched. */
@media (min-width: 769px) {
  .score-card {
    min-height: 0;
    align-self: start;
  }

  .history-main .score-card,
  .history-main .history-detail-grid > .detail-card {
    background: rgba(8, 16, 24, .66);
    box-shadow: none;
  }

  /* The chart reads as a frameless figure: no card fill, no border, no glow. */
  .history-main .bubble-card {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  /* The frameless figure reaches the main column's edges: with no visible
     border or side padding, the graph spans exactly the same width as the
     heading, notice and method strip (main's full content box). */
  .history-main .bubble-card {
    padding-left: 0;
    padding-right: 0;
    border-left-width: 0;
    border-right-width: 0;
  }

  /* Grid lines read as continuous rules instead of dashes, and the map no
     longer repeats its section title above the plot. */
  .chart-grid line {
    stroke: rgba(103, 151, 172, .18);
    stroke-dasharray: none;
  }

  .history-overview > .bubble-card .bubble-chart-content > h2 {
    display: none;
  }

  /* Bubbles lose their glowing rim: no halo, no bright stroke — only the
     flat risk fill. The score reads as a small caption below each circle. */
  .chart-bubble .bubble-halo {
    display: none;
  }

  .chart-bubble .bubble-core {
    stroke-width: 0;
  }

  .chart-bubble:hover .bubble-core,
  .chart-bubble:focus .bubble-core {
    stroke-width: 0;
  }

  .bubble-score {
    font: 700 13px var(--mono, "JetBrains Mono Variable", monospace);
    fill: #9fb2bb;
    stroke: rgba(4, 10, 15, 0);
    stroke-width: 0;
    paint-order: stroke;
  }

  /* Axis captions live inside the plot as background text: small, dim, and
     never competing with the bubbles. */
  .chart-quiet-label {
    fill: #7f939d;
    font-family: var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .01em;
  }

  /* The HTML axis note is replaced by the in-figure caption drawn at the
     bottom of the plot by history.js. */
  .chart-axis-note {
    display: none;
  }

  .chart-note-label {
    fill: #6d818b;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .005em;
  }

  /* The left and bottom axis rules take the global-risk card's background
     colour (#0c1d26 = rgb(12,29,38), the gradient's first stop), so the L
     frame ties into the score panel it runs into at column-gap 0. 2px keeps
     it solid; base and mobile keep #9aaeb8 at 1.5px. */
  .chart-axis {
    stroke: #0c1d26;
    stroke-width: 2;
  }

  /* The chart itself always spans the card's full horizontal width. */
  .bubble-chart-content,
  .bubble-chart-shell,
  #bubbleChart {
    width: 100%;
    max-width: 100%;
  }

  /* The figure stands taller on desktop — width already fills the card, so only
     the vertical box grows, and history.js reads it back for the viewBox. */
  .bubble-chart-shell {
    min-height: 480px;
  }

  #bubbleChart {
    height: 480px;
  }

  /* The whole heading row steps aside on desktop: no title, no intro, no
     "data as of" stamp.  history.js relocates the period selector onto the
     plot's bottom-right corner, so nothing from this row is needed. */
  .history-heading {
    display: none;
  }

  /* Period selector overlays the plot itself: bottom-right, just above the
     bottom axis rule.  It is taken out of flow so the figure keeps its box. */
  .bubble-chart-content {
    position: relative;
  }

  /* Bubbles breathe: a slow scale pulse on the disc and the region name it
     carries — score captions and hit targets stay put.  history.js offsets
     each bubble's phase through --breathe-delay on the group. */
  .chart-bubble .bubble-core,
  .chart-bubble .bubble-name {
    transform-box: fill-box;
    transform-origin: center;
    animation: history-bubble-breathe 4.6s ease-in-out infinite;
    animation-delay: var(--breathe-delay, 0s);
  }

  @keyframes history-bubble-breathe {
    0%, 100% { transform: scale(.975); }
    50% { transform: scale(1.05); }
  }

  @media (prefers-reduced-motion: reduce) {
    .chart-bubble .bubble-core,
    .chart-bubble .bubble-name {
      animation: none;
      transform: none;
    }
  }

  /* Coverage notice: one plain red line dropped below the colour strip —
     anchored under the figure so it can never sit on top of the legend.
     No box, no icon, no fill. */
  .history-notice {
    position: absolute;
    right: 18px;
    top: calc(100% + 14px);
    bottom: auto;
    display: block;
    grid-template-columns: none;
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--history-red);
    font: 600 12px/1.5 var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
    letter-spacing: 0;
    text-align: right;
    max-width: calc(100% - 36px);
  }

  .history-notice::before {
    content: none;
  }

  .period-switcher {
    position: absolute;
    right: 18px;
    bottom: 16px;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 4px 6px;
    width: auto;
    max-width: calc(100% - 36px);
    margin-top: 0;
    z-index: 3;
  }

  .period-button {
    min-width: 0;
    min-height: 30px;
    padding: 5px 11px;
    border-color: transparent;
    background: transparent;
    color: #8fa1ab;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
  }

  .period-button:hover,
  .period-button:focus-visible {
    border-color: transparent;
    background: transparent;
    color: #dfe9ec;
  }

  .period-button.active {
    border-color: transparent;
    background: transparent;
    color: #f2f7f8;
    font-weight: 700;
    box-shadow: none;
  }

  /* Both score headers join the same quiet 12px label scale as the cards. */
  .history-overview > .score-card .period-change-group > .period-change-label {
    color: #57c8c1;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: .015em;
  }

  .history-overview > .score-card .period-change-group > .period-change-kicker {
    color: #8b9ba6;
    font-size: 12px;
    font-weight: 650;
  }

  /* The colour scale reads as a horizontal strip below the figure, centred on
     the plot.  history.js publishes the bottom margin, so the strip hangs right
     under the axis line — outside the grid area, where it cannot be mistaken
     for part of the data. */
  .bubble-card-layout {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
  }

  .bubble-legend {
    position: absolute;
    top: calc(100% - var(--plot-inset-bottom, 0px));
    left: 50%;
    width: min(420px, 100%);
    transform: translateX(-50%);
    /* Breathing room between the axis line and the strip. */
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-top: 0;
    border-left: 0;
    pointer-events: none;
  }

  .bubble-chart-content {
    grid-column: 1;
    grid-row: 1;
  }

  .history-overview > .bubble-card .bubble-legend > h2 {
    display: none;
  }

  .bubble-legend .risk-legend {
    display: block;
    margin: 0;
    gap: 0;
  }

  /* The two explanatory lines stay out of the desktop stage. */
  .bubble-legend ul {
    display: none;
  }

  /* Horizontal risk scale: the 0–10 ruler runs along the top, the threshold
     colours follow left to right, and each level name sits under its own
     segment.  Segment widths match the ruler ticks exactly. */
  .risk-scale {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }

  .risk-scale__ruler {
    position: relative;
    height: 11px;
  }

  .risk-scale__ruler span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    color: #7f939d;
    font-family: var(--mono, "JetBrains Mono Variable", monospace);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
  }

  /* Endpoints stay inside the bar's width: "0" begins at the left edge and
     "10" ends at the right edge instead of centring across them. */
  .risk-scale__ruler span:first-child {
    transform: translateX(0);
  }

  .risk-scale__ruler span:last-child {
    transform: translateX(-100%);
  }

  .risk-scale__bar {
    display: flex;
    flex-direction: row;
    height: 8px;
    border-radius: 3px;
    overflow: hidden;
  }

  .risk-scale__chunk {
    flex-basis: 0;
    min-width: 0;
    background: var(--scale-color);
    opacity: .82;
  }

  .risk-scale__names {
    display: flex;
    flex-direction: row;
  }

  .risk-scale__name {
    flex-basis: 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #9fb2bb;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  /* The footer strip retires on desktop: the source note and its duplicate
     methodology link disappear together with the panel itself. */
  .history-method-strip { display: none; }
}

/* Wide desktop: the hero figure gains more vertical room, and supporting
   numbers stay calm so the chart keeps the stage. */
@media (min-width: 1401px) {
  .bubble-chart-shell { min-height: var(--figure-height); }
  #bubbleChart { height: var(--figure-height); }

  .score-card .history-score strong { font-size: clamp(54px, 4.2vw, 82px); }
  .score-card .history-score span { font-size: clamp(20px, 1.6vw, 30px); }
  .score-card .score-level { padding: 8px 14px; font-size: clamp(13px, .95vw, 17px); }
  .score-card .score-level::before { width: 9px; height: 9px; }
  .score-card .period-change-hero > strong { font-size: clamp(40px, 3.2vw, 58px); }
  .score-card .period-change-arrow {
    width: clamp(46px, 3vw, 58px);
    height: clamp(46px, 3vw, 58px);
    font-size: clamp(32px, 2.2vw, 44px);
  }
  .score-card .period-comparison-card { padding: 10px 14px; }
  .score-card .period-comparison-card span { font-size: clamp(13px, .95vw, 16px); }
  .score-card .period-comparison-card strong { font-size: clamp(22px, 1.6vw, 30px); }
  .score-card .period-comparison-arrow { font-size: clamp(22px, 1.7vw, 30px); }
  .summary-counts strong { font-size: 24px; }

  /* Beside the figure the summary reads top-to-bottom: heading, the 7-day
     reading, then the rising/steady/falling counts as a stack. */
  .history-main .summary-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 20px;
  }

  .history-main .summary-card > h2 { margin: 0; }

  .history-main .summary-card > p {
    margin: 14px 0;
    max-width: 64ch;
    font-size: 14px;
    line-height: 1.6;
  }

  .history-main .summary-counts {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .history-main .summary-counts div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border: 0;
    background: none;
    text-align: left;
  }

  .history-main .summary-counts span { font-size: 12px; }
  .history-main .summary-counts strong { margin-top: 0; font-size: 20px; }

  /* The score card owns the whole right-hand column beside the figure: it
     fills the shared content row (the ≥769 rule pins it to start), so its
     height matches the chart card exactly — score block top, period-change
     section bottom. */
  .history-main .score-card {
    grid-template-columns: minmax(0, 1fr);
    /* The top/bottom divider (period-change-group's border-top) sits at
       4:6: the score section owns the top 40% of the card, the period-change
       section the bottom 60%. auto auto let content heights decide, so the
       line drifted with the copy; fr tracks pin the ratio. fr still honours
       a section's content as its floor, so taller copy grows its own track
       instead of spilling across the line. */
    grid-template-rows: 4fr 6fr;
    row-gap: 16px;
    padding: 20px 22px;
    align-self: stretch;
    align-content: space-between;
  }

  .history-main .score-card .score-primary {
    grid-column: 1;
    grid-row: 1;
    /* The score sits on this section's centre line both ways.  Only the
       value group is in flow here (the heading is absolute at the top-left
       corner and .score-range is display:none), so these two alignments on
       the section itself are what place "8.0 / 10": align-content centres
       the row top-to-bottom, justify-items centres its grid area
       left-to-right.  Replaces the old align-content:start that pinned the
       number to the top of the section. */
    align-content: center;
    justify-items: center;
    gap: 8px;
    padding: 0;
  }

  .history-main .score-card .score-content-group { justify-items: start; }
  .history-main .score-card .score-caption-row { justify-content: flex-start; }

  /* position: relative makes this section the containing block for the
     absolute value block below, so the numbers can centre on the section's
     own box instead of only on the strip left under the labels.  The labels
     keep flowing in rows 1-2 at the top-left. */
  .history-main .score-card .period-change-group {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(111, 160, 181, .22);
    border-left: 0;
    text-align: left;
    justify-items: start;
  }

  /* The numbers leave the flow and cover the whole section (inset: 0), so
     they sit on the section's centre line both ways: align-content centres
     the hero/comparison/note rows top-to-bottom, justify-items and
     text-align centre them across.  In flow they were pinned left
     (justify-items/text-align start) and vertically centred only inside the
     1fr row below the label+kicker, which left them ~28px low.  The label
     and kicker keep their top-left slot because they still own rows 1-2. */
  .history-main .score-card .period-change-value {
    position: absolute;
    inset: 0;
    align-content: center;
    justify-items: center;
    text-align: center;
  }
  .history-main .score-card .period-change-hero { justify-content: center; gap: clamp(12px, 1.2vw, 20px); }
  .history-main .score-card .period-comparison {
    justify-content: center;
    /* The base row floors its side columns at 120px (~288px of tracks plus
       gaps) while the narrow right column affords only ~270px — the tracks
       overflowed the card and collided with its edge.  Let both cards flex
       with the column instead. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  /* The figure fills the left column: card → layout → content → shell form
     a flex chain and the SVG takes the shell's height, so the plot grows
     with the stacked right column instead of leaving a gap below it. */
  .history-main .bubble-card { display: flex; flex-direction: column; }
  .history-main .bubble-card-layout { display: flex; flex: 1 1 auto; flex-direction: column; }
  .history-main .bubble-chart-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  .history-main .bubble-chart-shell { flex: 1 1 auto; }
  #bubbleChart { height: 100%; }

  /* No dead space inside the frameless figure: the card's vertical padding
     and the shell's top margin sat between the grid row and the drawn plot,
     inflating the shared row (and with it the stretched score card) while
     the plot still ended short of the card edges.  Removed, the row drops
     to the plot's own box — the score card shrinks to match and history.js
     sizes the viewBox to that same box, so plot and panel run edge to
     edge.  The legend strip is absolute and already tuned to end exactly at
     the shell's bottom (14px gap + 41px ruler = the 55px axis inset), so it
     still lands inside the card. */
  .history-main .bubble-card { padding-top: 0; padding-bottom: 0; }
  .history-main .bubble-chart-shell { margin-top: 0; }

  /* Compact score card: every figure steps down a size for the narrow right
     column, and the level chip pins to the card's top-right corner next to
     the heading (its old caption row stays as a zero-height placeholder). */
  /* Both section headers share one quiet label scale — the right side is
     already pinned to 12px by the ≥769 rule, which outranks this block for
     .period-change-label, so the heading follows it instead of fighting it:
     same size, weight and rhythm across both halves of the card. */
  .history-main .score-card .score-primary h2 {
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: .015em;
  }
  .history-main .score-card .score-primary h2 .info-dot {
    width: 14px;
    height: 14px;
    font-size: 10px;
  }

  .history-main .score-card .score-content-group { gap: 0; }
  .history-main .score-card .score-level {
    position: absolute;
    top: 20px;
    right: 22px;
    padding: 6px 10px;
    font-size: clamp(11px, .8vw, 14px);
  }
  .history-main .score-card .score-level::before { width: 7px; height: 7px; }

  .history-main .score-card .history-score strong { font-size: clamp(38px, 2.8vw, 52px); }
  .history-main .score-card .history-score span { font-size: clamp(14px, 1vw, 18px); }
  .history-main .score-card .score-range { font-size: clamp(13px, .95vw, 16px); }

  .history-main .score-card .period-change-label { font-size: clamp(18px, 1.3vw, 22px); }
  .history-main .score-card .period-change-kicker { margin-top: 10px; font-size: clamp(13px, .95vw, 16px); }
  .history-main .score-card .period-change-hero > strong { font-size: clamp(30px, 2.2vw, 40px); }
  .history-main .score-card .period-change-arrow {
    width: clamp(34px, 2.2vw, 42px);
    height: clamp(34px, 2.2vw, 42px);
    font-size: clamp(24px, 1.6vw, 30px);
  }
  .history-main .score-card .period-comparison-card { padding: 8px 12px; }
  .history-main .score-card .period-comparison-card span { font-size: clamp(11px, .8vw, 13px); }
  .history-main .score-card .period-comparison-card strong { font-size: clamp(16px, 1.1vw, 20px); }
  .history-main .score-card .period-comparison-arrow { font-size: clamp(15px, 1.1vw, 18px); }
  .history-main .score-card .period-comparison-note { font-size: clamp(11px, .8vw, 13px); }
}

/* Desktop keeps the coverage notice outside the figure: it stays in its own
   document row above the chart card, right-aligned to the figure's right
   edge (grid placement applies on the full-width layout, whose grid defines
   the "notice" row) instead of hanging below the plot. */
@media (min-width: 769px) {
  .history-main .history-notice {
    position: static;
    grid-column: 1;
    grid-row: notice;
    justify-self: end;
    text-align: right;
  }

  /* The analysis summary card is retired on desktop: the score card now
     owns the full right-hand column beside the figure.  Its wrapper only
     ever holds that one card, so hiding the wrapper (this rule sits after
     the 1401px `display: contents` rule, so it wins there too) also avoids
     the empty section's stray top margin.  Tablet/mobile keep the card. */
  .history-detail-grid { display: none; }

  /* The global-risk card wears the daily report's judgment-card skin: the
     same teal border, 8px corners, blue-black gradient and drop shadow that
     frame 오늘의 판단 on /daily/latest/.  Sits after the 769px rule that
     painted the card flat rgba(8,16,24,.66) with no shadow, so it wins. */
  .history-main .score-card {
    border: 1px solid rgba(58, 103, 116, .54);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(12, 29, 38, .94), rgba(7, 17, 24, .97));
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
  }
}

/* The figure and the score merge into ONE card.  The overview stops
   dissolving into main's grid (display: contents) and becomes the single
   bordered box spanning the pinned chart row, so the judgment-card skin —
   border, radius, gradient, shadow — exists exactly once: no seam gap, no
   double borders, no split drop shadow.  The two panels inside keep their
   roles (figure left, score right, explicit placement because the area
   names chart/score now belong to the overview's own template) and lose
   their skins, stretching to the row's fixed height — the plot does not
   resize.  This block is last in the file, so it beats the contents rule,
   the frameless rule and the score card's own skin.  Tablet/mobile are
   untouched (they never used display: contents). */
@media (min-width: 1401px) {
  .history-main .history-overview {
    display: grid;
    grid-area: chart-start / 1 / chart-end / -1;
    grid-template-columns: minmax(0, 7fr) minmax(0, 2.3fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
    min-height: 0;
    border: 1px solid rgba(58, 103, 116, .54);
    border-radius: 8px;
    /* The outline and shadow still span the whole merged box, but the fill
       is emptied here and restored on the score panel only: the figure sits
       straight on the page background, so nothing paints behind the plot. */
    background: transparent;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
  }

  .history-main .bubble-card {
    grid-column: 1;
    grid-row: 1;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .history-main .score-card {
    grid-column: 2;
    grid-row: 1;
    border: 0;
    /* Only the right corners round (8px outer − 1px border), so the fill
       hugs the card's inner curve instead of poking past it. */
    border-radius: 0 7px 7px 0;
    background: linear-gradient(145deg, rgba(12, 29, 38, .94), rgba(7, 17, 24, .97));
    box-shadow: none;
  }
}

/* The period comparison ("7 day ago" -> "current") reads as plain figures
   rather than boxed chips: drop the outline around each card while keeping
   its tinted fill and 9px rounding. Desktop only, so the mobile rules that
   tune these cards stay untouched. */
@media (min-width: 769px) {
  .history-main .score-card .period-comparison-card { border: 0; }
}

/* Per-target risk trend card: one line for the selected observation target,
   its period stats, the data-gap state, and the selectable turning points.
   The base rule near the top of this file keeps the whole card closed below
   769px, so no tablet or phone rule above is touched. ASCII comments only. */
@media (min-width: 769px) {
  .history-trend {
    display: block;
    margin-top: 14px;
  }

  .history-trend[hidden] { display: none; }

  .trend-card { padding: 22px 24px 26px; }

  .trend-card .trend-card__intro > h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dfe9ec;
    font-family: var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
    font-size: 16px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: -.015em;
  }

  .trend-card .trend-card__intro > h2::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #57c8c1;
    box-shadow: 0 0 10px rgba(87, 200, 193, .5);
  }

  .trend-card__description {
    margin: 6px 0 0;
    color: #9aabb3;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.6;
  }

  .trend-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 26px;
  }

  .trend-card__note {
    display: none;
  }

  .trend-card__targets {
    display: grid;
    justify-items: end;
    gap: 8px;
    flex: 0 0 auto;
  }

  .trend-card__targets-label {
    color: var(--history-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .trend-target-switcher { max-width: 660px; }

  .trend-target-switcher .period-button {
    min-width: 0;
    min-height: 34px;
    padding: 7px 13px;
    font-size: 13px;
  }

  .trend-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 4px;
  }

  .trend-stats > div {
    display: grid;
    gap: 4px;
    min-width: 152px;
    padding: 10px 15px;
    border: 1px solid rgba(111, 160, 181, .16);
    border-radius: 8px;
    background: rgba(6, 15, 23, .62);
  }

  .trend-stats small {
    color: var(--history-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
  }

  .trend-stats strong {
    font: 700 24px/1 var(--mono, "JetBrains Mono Variable", monospace);
    letter-spacing: -.02em;
  }

  .trend-plot {
    position: relative;
    height: 306px;
    margin-top: 8px;
  }

  .trend-chart {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .trend-grid line {
    stroke: rgba(111, 160, 181, .14);
    stroke-width: 1;
  }

  .trend-axis {
    stroke: rgba(111, 160, 181, .4);
    stroke-width: 1;
  }

  .trend-axis-label {
    fill: #91a8af;
    font: 600 11px/1 var(--mono, "JetBrains Mono Variable", monospace);
  }

  .trend-axis-title {
    fill: #57c8c1;
    font: 750 11px/1 var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
    letter-spacing: .1em;
  }

  .trend-line {
    fill: none;
    stroke: var(--history-blue);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 10px rgba(66, 165, 255, .32));
  }

  .trend-dot {
    fill: #07131d;
    stroke: var(--history-blue);
    stroke-width: 2;
  }

  .trend-dot--latest {
    fill: var(--history-blue);
    stroke: #07131d;
    stroke-width: 2.5;
  }

  .trend-latest-label {
    fill: #eaf3f7;
    font: 700 15px/1 var(--mono, "JetBrains Mono Variable", monospace);
  }

  .trend-turn-marker { cursor: pointer; }

  .trend-turn-guide {
    stroke: rgba(231, 191, 61, .42);
    stroke-width: 1;
    stroke-dasharray: 4 5;
  }

  .trend-turn-diamond {
    fill: #07131d;
    stroke: var(--history-yellow);
    stroke-width: 2;
    transition: fill .18s;
  }

  .trend-turn-marker.is-active .trend-turn-diamond,
  .trend-turn-marker:hover .trend-turn-diamond,
  .trend-turn-marker:focus-visible .trend-turn-diamond {
    fill: var(--history-yellow);
    outline: none;
  }

  .trend-turn-marker:focus-visible .trend-turn-guide,
  .trend-turn-marker:hover .trend-turn-guide {
    stroke: rgba(231, 191, 61, .85);
  }

  /* Wide hover strip laid over each marker. It paints nothing until the
     pointer enters, then tints, so the enlarged hit area stays discoverable
     without changing the resting look of the plot. */
  .trend-turn-hit {
    fill: transparent;
    stroke: none;
    pointer-events: all;
    transition: fill .18s;
  }

  .trend-turn-marker:hover .trend-turn-hit,
  .trend-turn-marker:focus-visible .trend-turn-hit {
    fill: rgba(231, 191, 61, .09);
  }

  .trend-empty {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 9px;
    padding: 24px;
    border: 1px dashed rgba(111, 160, 181, .34);
    border-radius: 10px;
    background: rgba(6, 15, 23, .5);
    text-align: center;
  }

  .trend-empty[hidden] { display: none; }

  .trend-empty strong {
    color: var(--history-yellow);
    font-size: 15px;
    font-weight: 750;
  }

  .trend-empty p {
    margin: 0;
    max-width: 66ch;
    color: #9db0b8;
    font-size: 13px;
    line-height: 1.65;
  }

  .trend-empty .trend-empty__known {
    color: #cfd9de;
    font: 700 13px/1.5 var(--mono, "JetBrains Mono Variable", monospace);
  }

  .trend-turns {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(111, 160, 181, .16);
  }

  .trend-turns__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }

  .trend-turns__head h3 {
    margin: 0;
    color: #57c8c1;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .015em;
  }

  .trend-turns__count {
    color: var(--history-muted);
    font: 700 12px/1 var(--mono, "JetBrains Mono Variable", monospace);
  }

  .trend-turn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .trend-turn-chip {
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid #294151;
    border-radius: 999px;
    background: rgba(5, 14, 21, .7);
    color: #d9e1e6;
    font: 700 13px/1 var(--mono, "JetBrains Mono Variable", monospace);
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
  }

  .trend-turn-chip:hover,
  .trend-turn-chip:focus-visible {
    border-color: var(--history-yellow);
    outline: none;
  }

  .trend-turn-chip.active {
    border-color: rgba(231, 191, 61, .8);
    background: rgba(90, 73, 20, .55);
    color: #ffe9a8;
  }

  .trend-turn-detail {
    margin-top: 14px;
    padding: 14px 16px;
    border-left: 3px solid var(--history-yellow);
    background: rgba(231, 191, 61, .06);
  }

  .trend-turn-detail[hidden] { display: none; }

  .trend-turn-detail__date {
    margin: 0 0 9px;
    color: var(--history-yellow);
    font: 700 12px/1 var(--mono, "JetBrains Mono Variable", monospace);
    letter-spacing: .04em;
  }

  .trend-turn-detail__items {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .trend-turn-detail__items li { display: grid; gap: 4px; }

  /* Title of a turning-point record: the one line meant to be read first,
     so it sits above the mono date/source lines that stay small on purpose. */
  .trend-turn-detail__items strong {
    color: #eef4f7;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.6;
  }

  .trend-turn-detail__source {
    color: var(--history-muted);
    font-size: 12px;
    line-height: 1.5;
  }

  .trend-turn-detail__source a {
    color: #7fc7ff;
    text-decoration: none;
  }

  .trend-turn-detail__source a:hover,
  .trend-turn-detail__source a:focus-visible { text-decoration: underline; }

  .trend-turns__none {
    margin: 12px 0 0;
    color: var(--history-muted);
    font-size: 13px;
    line-height: 1.6;
  }

  .trend-turns__none[hidden] { display: none; }
}

/* Trend card controls: history.js parks the period selector here on desktop,
   so it drops the old plot-overlay positioning and sits beside the observation
   targets. The coverage notice returns to normal flow because the figure it
   used to hang under is gone. Desktop only - nothing below 769px changes. */
@media (min-width: 769px) {
  /* On desktop, turning-point context stays with the plotted marker. The
     document list remains intact for mobile, where hover is unavailable. */
  .history-main .trend-turns { display: none; }

  .history-main .trend-plot { position: relative; }

  .history-main .trend-turn-tooltip {
    position: absolute;
    z-index: 8;
    width: min(280px, calc(100% - 24px));
    padding: 11px 13px 12px;
    border: 1px solid rgba(231, 191, 61, .54);
    border-left: 3px solid var(--history-yellow);
    border-radius: 4px;
    background: rgba(5, 16, 24, .96);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .34);
    pointer-events: none;
  }

  .history-main .trend-turn-tooltip[hidden] { display: none; }

  .history-main .trend-turn-tooltip__date {
    margin: 0 0 6px;
    color: var(--history-yellow);
    font: 700 11px/1 var(--mono, "JetBrains Mono Variable", monospace);
    letter-spacing: .04em;
  }

  .history-main .trend-turn-tooltip__title {
    display: block;
    color: #f0f6f8;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    word-break: keep-all;
  }

  .history-main .trend-turn-tooltip__meta {
    display: block;
    margin-top: 7px;
    color: #aebfc8;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.4;
  }

  /* Hover reveals only a compact evidence tag. No label remains on the graph
     at rest, so a long time range cannot turn into overlapping text. */
  .history-main .trend-turn-tooltip[data-mode="compact"] {
    width: auto;
    max-width: min(340px, calc(100% - 24px));
    padding: 7px 10px 8px;
    border-color: rgba(86, 200, 193, .42);
    border-left-color: #57c8c1;
    background: rgba(5, 16, 24, .94);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  }

  .history-main .trend-turn-tooltip[data-mode="compact"] .trend-turn-tooltip__date,
  .history-main .trend-turn-tooltip[data-mode="compact"] .trend-turn-tooltip__meta {
    display: none;
  }

  .history-main .trend-turn-tooltip[data-mode="compact"] .trend-turn-tooltip__title {
    color: #85d8d3;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  /* JavaScript hangs this against the marker that opened it and clamps it inside
     the figure (placeTurningDetail), so a click no longer drops it in one fixed
     corner. The values below remain as the fallback spacing for the edges and
     for the case where there is no marker left to hug. */
  .history-main .trend-turn-detail-panel {
    position: absolute;
    z-index: 9;
    top: 14px;
    right: 14px;
    width: min(326px, calc(100% - 28px));
    max-height: calc(100% - 28px);
    overflow: auto;
    padding: 14px 40px 14px 16px;
    border: 1px solid rgba(231, 191, 61, .54);
    border-left: 3px solid var(--history-yellow);
    border-radius: 4px;
    background: rgba(5, 16, 24, .97);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .38);
  }

  .history-main .trend-turn-detail-panel[hidden] { display: none; }

  .history-main .trend-turn-detail-panel__close {
    position: absolute;
    top: 8px;
    right: 9px;
    display: grid;
    width: 26px;
    height: 26px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 3px;
    color: #b7c8cf;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  .history-main .trend-turn-detail-panel__close:hover,
  .history-main .trend-turn-detail-panel__close:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    outline: none;
  }

  .history-main .trend-turn-detail-panel__date {
    margin: 0 0 10px;
    color: var(--history-yellow);
    font: 700 11px/1 var(--mono, "JetBrains Mono Variable", monospace);
    letter-spacing: .04em;
  }

  .history-main .trend-turn-detail-panel__items {
    display: grid;
    gap: 12px;
  }

  .history-main .trend-turn-detail-panel__item + .trend-turn-detail-panel__item {
    padding-top: 12px;
    border-top: 1px solid rgba(111, 160, 181, .18);
  }

  /* Only the record itself grows. The date above it and the change/source
     line below it keep their small mono scale, so the panel still reads as
     title → context. */
  .history-main .trend-turn-detail-panel__item strong {
    display: block;
    color: #f0f6f8;
    font-size: 15px;
    line-height: 1.55;
  }

  .history-main .trend-turn-detail-panel__item p {
    margin: 6px 0 0;
    color: #b7c8cf;
    font-size: 14px;
    line-height: 1.6;
  }

  .history-main .trend-turn-detail-panel__item span {
    display: block;
    margin-top: 7px;
    color: #91a8b3;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.45;
  }

  .history-trend { margin-top: 0; }

  .history-notice {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    margin-bottom: 12px;
    max-width: none;
  }

  .trend-card__targets {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: flex-end;
    gap: 14px 24px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .trend-control {
    display: grid;
    justify-items: end;
    gap: 8px;
    min-width: 0;
  }

  .trend-card__periods {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  /* Both switchers live in the card header now, so neither may keep the old
     plot-overlay absolute positioning from the .period-switcher rule. */
  .trend-card__periods .period-switcher,
  .trend-target-switcher {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: auto;
    max-width: none;
    margin-top: 0;
    gap: 8px;
    z-index: auto;
  }

  .trend-card__periods .period-button {
    min-width: 0;
    min-height: 34px;
    padding: 7px 13px;
    font-size: 13px;
  }
}

/* Desktop risk history is a dedicated data canvas. Keep the shared topbar,
   then let the selected trend use the entire remaining viewport. Phones keep
   the ordinary stacked report below the breakpoint. */
@media (min-width: 769px) {
  body[data-page="history"] .app-shell {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  /* The graph is intentionally full-bleed, but shared navigation keeps the
     exact same content width as every other desktop page. */
  body[data-page="history"] .topbar {
    width: min(1544px, calc(100% - 56px));
    margin: 0 auto;
  }

  body[data-page="history"] .history-main {
    min-height: calc(100svh - 88px);
    padding: 0;
  }

  body[data-page="history"] .history-notice,
  body[data-page="history"] .history-overview,
  body[data-page="history"] .history-detail-grid,
  body[data-page="history"] .history-method-strip {
    display: none !important;
  }

  body[data-page="history"] .history-trend {
    display: block;
    height: calc(100svh - 88px);
    margin: 0;
  }

  body[data-page="history"] .trend-card {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    padding: 16px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Controls and summary figures follow the shared topbar track, while the
     plotted data itself can still extend all the way across the viewport. */
  body[data-page="history"] .trend-card__head,
  body[data-page="history"] .trend-stats {
    width: min(1544px, calc(100% - 56px));
    margin-right: auto;
    margin-left: auto;
  }

  body[data-page="history"] .trend-stats { margin-top: 14px; margin-bottom: 6px; }

  body[data-page="history"] .trend-plot {
    height: auto;
    min-height: 0;
    margin-top: 0;
  }
}

/* The history graph shares the same desktop track as the global topbar.
   It can fill the remaining height, but it never extends wider than navigation. */
@media (min-width: 769px) {
  body[data-page="history"] .app-shell {
    width: min(1600px, 100%);
    max-width: none;
    padding: 0 28px;
  }

  body[data-page="history"] .topbar {
    width: auto;
    margin: 0;
  }

  body[data-page="history"] .trend-card__head,
  body[data-page="history"] .trend-stats { width: 100%; }
}

@media (min-width: 769px) {
  /* Keep a readable chart proportion instead of stretching the graph across
     the entire browser height on tall desktop displays. */
  body[data-page="history"] .history-main { min-height: 0; }

  body[data-page="history"] .history-trend {
    height: min(680px, calc(100svh - 72px));
  }

  /* Observation target is one native select. The header used to lay six region
     buttons out in a row even though only the chosen series is ever drawn. */
  .trend-target-select {
    min-width: 210px;
    max-width: 100%;
    min-height: 38px;
    padding: 9px 34px 9px 13px;
    border: 1px solid #294151;
    border-radius: 9px;
    background-color: rgba(5, 14, 21, .7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238fa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    color: #d9e1e6;
    font: 700 15px/1.2 var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .2s, background-color .2s, color .2s;
  }

  .trend-target-select:hover,
  .trend-target-select:focus-visible {
    border-color: #61bfd0;
    outline: none;
  }

  .trend-target-select option {
    background: #050e15;
    color: #d9e1e6;
  }

  /* Period pills get their own row directly above the plot, aligned to the
     plot's right edge. They used to overlay the canvas and sit flush against
     the chart, so the row now keeps a visible margin before the graph starts. */
  body[data-page="history"] .trend-control--period {
    justify-items: end;
    margin-top: 8px;
    margin-bottom: 16px;
  }

  body[data-page="history"] .trend-control--period .trend-card__periods {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
}

/* The phone renders the same risk-trend canvas as the PC page. Everything
   below matches 768px and narrower only, so no shared, tablet or desktop rule
   above is touched. The old phone stub (analysis summary + methodology strip)
   retires in favour of the chart card, mirroring the desktop composition.
   ASCII comments only. */
/* The mobile-only card headline stays out of the desktop composition, where
   the 12px section label already names the figure. */
.trend-card__mobile-title { display: none; }

/* The curve fills the space under it at every width: the stroke's own blue,
   fading out at the axis, so the grid keeps reading through the tint. The fill
   takes no pointer events, so the markers own every hit target in the plot. */
.trend-area { pointer-events: none; }

.trend-area-stop--top { stop-color: var(--history-blue); stop-opacity: .32; }

.trend-area-stop--bottom { stop-color: var(--history-blue); stop-opacity: 0; }

/* The figure owns its own touch gestures: the page keeps vertical scrolling,
   and the browser's pinch never competes with the chart's. */
.trend-plot { touch-action: pan-y; }

/* A window narrower than the series offers one way back to the full range.
   The [hidden] rule has to out-rank the display above it. */
.trend-zoom-reset {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 9;
  padding: 6px 12px;
  border: 1px solid rgba(66, 165, 255, .42);
  border-radius: 999px;
  background: rgba(7, 17, 26, .9);
  color: #cfe6f5;
  font: 650 12px/1.2 var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
  cursor: pointer;
}

.trend-zoom-reset[hidden] { display: none; }

.trend-zoom-reset:hover,
.trend-zoom-reset:focus-visible {
  border-color: var(--history-blue);
  color: #fff;
}

/* The phone opens straight on the canvas: the page title row and its
   data-as-of line retire, so the chart card owns the first screen. */
@media (max-width: 768px) {
  .history-heading { display: none; }

  .history-detail-grid,
  .history-method-strip { display: none; }

  /* The ticker bar ends in its own hairline, so the card sits flush under it:
     the page-coloured band that used to sit between them is gone. */
  .history-main { padding-top: 0; }

  .history-trend { display: block; margin-top: 0; }
  .history-trend[hidden] { display: none; }

  .trend-card { padding: 16px 14px 18px; }

  .trend-card__head {
    display: grid;
    gap: 12px;
  }

  /* The desktop intro heading and its observation note retire here: the phone
     reads one headline, then the short description, then the target select. */
  .trend-card__intro > h2,
  .trend-card__note { display: none; }

  /* The description is written once for both compositions; on the phone it
     sits right under the headline, so it drops its own top margin and keeps
     the muted weight that separates it from the heading. */
  .trend-card__description {
    margin: 0;
    color: #9aabb3;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.6;
    word-break: keep-all;
  }

  /* Quiet by design: soft white type at heading weight, flush with the card's
     left edge, so the headline reads as a calm label rather than a banner. */
  .trend-card__mobile-title {
    display: block;
    justify-self: start;
    margin: 0;
    color: #e4edf1;
    font: 700 16.5px/1.25 var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
    letter-spacing: -.015em;
  }

  .trend-card__targets { display: grid; gap: 8px; }

  /* One native select, full width: the six region buttons would not fit. */
  .trend-target-select {
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    padding: 9px 34px 9px 13px;
    border: 1px solid #294151;
    border-radius: 9px;
    background-color: rgba(5, 14, 21, .7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238fa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    color: #d9e1e6;
    font: 700 15px/1.2 var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  .trend-target-select:hover,
  .trend-target-select:focus-visible {
    border-color: #61bfd0;
    outline: none;
  }

  .trend-target-select option {
    background: #050e15;
    color: #d9e1e6;
  }

  /* Three compact stat tiles fit a phone row without wrapping. */
  .trend-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 4px;
  }

  .trend-stats > div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(111, 160, 181, .16);
    border-radius: 8px;
    background: rgba(6, 15, 23, .62);
  }

  .trend-stats small {
    color: var(--history-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
  }

  .trend-stats strong {
    font: 700 19px/1 var(--mono, "JetBrains Mono Variable", monospace);
    letter-spacing: -.02em;
  }

  /* Period pills sit above the plot and scroll sideways when they overflow. */
  .trend-control--period {
    display: grid;
    margin-top: 14px;
    margin-bottom: 6px;
  }

  .trend-card__periods { display: flex; min-width: 0; }

  .trend-card__periods .period-switcher {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding-bottom: 3px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    z-index: auto;
  }

  .trend-card__periods .period-button {
    min-width: 0;
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12.5px;
    white-space: nowrap;
  }

  .history-main .trend-plot { position: relative; }

  /* The record moved below the figure, so the figure gives the page back its
     height: 200px is the tightest the axis, its labels and the markers still
     read at, and history.js keeps its viewBox floor in step with it. */
  .trend-plot {
    height: 200px;
    margin-top: 6px;
  }

  .trend-chart {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .trend-grid line {
    stroke: rgba(111, 160, 181, .14);
    stroke-width: 1;
  }

  .trend-axis {
    stroke: rgba(111, 160, 181, .4);
    stroke-width: 1;
  }

  .trend-axis-label {
    fill: #91a8af;
    font: 600 11px/1 var(--mono, "JetBrains Mono Variable", monospace);
  }

  .trend-axis-title {
    fill: #57c8c1;
    font: 750 11px/1 var(--sans, "Pretendard Variable", "Pretendard", sans-serif);
    letter-spacing: .1em;
  }

  .trend-line {
    fill: none;
    stroke: var(--history-blue);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 10px rgba(66, 165, 255, .32));
  }

  .trend-dot {
    fill: #07131d;
    stroke: var(--history-blue);
    stroke-width: 2;
  }

  .trend-dot--latest {
    fill: var(--history-blue);
    stroke: #07131d;
    stroke-width: 2.5;
  }

  .trend-latest-label {
    fill: #eaf3f7;
    font: 700 15px/1 var(--mono, "JetBrains Mono Variable", monospace);
  }

  /* The reset pill stays out of the way of the score label in the corner. */
  .trend-zoom-reset {
    top: 6px;
    right: 6px;
    padding: 5px 10px;
    font-size: 11.5px;
  }

  /* Tapping a marker is the phone's hover: the strip below is the hit area. */
  .trend-turn-marker { cursor: pointer; }

  .trend-turn-guide {
    stroke: rgba(231, 191, 61, .42);
    stroke-width: 1;
    stroke-dasharray: 4 5;
  }

  .trend-turn-diamond {
    fill: #07131d;
    stroke: var(--history-yellow);
    stroke-width: 2;
    transition: fill .18s;
  }

  .trend-turn-marker.is-active .trend-turn-diamond,
  .trend-turn-marker:hover .trend-turn-diamond,
  .trend-turn-marker:focus-visible .trend-turn-diamond {
    fill: var(--history-yellow);
    outline: none;
  }

  .trend-turn-marker:focus-visible .trend-turn-guide,
  .trend-turn-marker:hover .trend-turn-guide {
    stroke: rgba(231, 191, 61, .85);
  }

  .trend-turn-hit {
    fill: transparent;
    stroke: none;
    pointer-events: all;
    transition: fill .18s;
  }

  .trend-turn-marker:hover .trend-turn-hit,
  .trend-turn-marker:focus-visible .trend-turn-hit {
    fill: rgba(231, 191, 61, .09);
  }

  .trend-empty {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 9px;
    padding: 24px;
    border: 1px dashed rgba(111, 160, 181, .34);
    border-radius: 10px;
    background: rgba(6, 15, 23, .5);
    text-align: center;
  }

  .trend-empty[hidden] { display: none; }

  .trend-empty strong {
    color: var(--history-yellow);
    font-size: 15px;
    font-weight: 750;
  }

  .trend-empty p {
    margin: 0;
    max-width: 66ch;
    color: #9db0b8;
    font-size: 13px;
    line-height: 1.65;
    word-break: keep-all;
  }

  .trend-empty .trend-empty__known {
    color: #cfd9de;
    font: 700 13px/1.5 var(--mono, "JetBrains Mono Variable", monospace);
  }

  /* The record lives in the document under the figure on a phone. An overlay
     inside the plot would sit under a downward finger swipe and chain that
     gesture into the browser's page reload, so this block replaces it: it
     opens on the newest date and repaints in place when a marker is tapped. */
  .history-main .trend-turns {
    display: block;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(111, 160, 181, .16);
  }

  .history-main .trend-turns__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }

  .history-main .trend-turns__head h3 {
    margin: 0;
    color: #57c8c1;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .015em;
  }

  .history-main .trend-turns__count {
    color: var(--history-muted);
    font: 700 12px/1 var(--mono, "JetBrains Mono Variable", monospace);
  }

  /* No pill row: the date line below already names the record, and pills were
     the only part of this block that could stretch one row per extra date. */
  .history-main .trend-turn-chips { display: none; }

  .history-main .trend-turn-detail {
    margin-top: 12px;
    padding: 13px 14px;
    border-left: 3px solid var(--history-yellow);
    background: rgba(231, 191, 61, .06);
  }

  .history-main .trend-turn-detail[hidden] { display: none; }

  .history-main .trend-turn-detail__date {
    margin: 0 0 9px;
    color: var(--history-yellow);
    font: 700 11px/1.4 var(--mono, "JetBrains Mono Variable", monospace);
    letter-spacing: .04em;
  }

  .history-main .trend-turn-detail__items {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .history-main .trend-turn-detail__items li {
    display: grid;
    gap: 6px;
  }

  /* Same scale as the record the desktop panel shows: date and source stay
     small, the title and its text carry the reading. */
  .history-main .trend-turn-detail__items strong {
    color: #eef4f7;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.6;
    word-break: keep-all;
  }

  .history-main .trend-turn-detail__source {
    color: var(--history-muted);
    font-size: 12px;
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .history-main .trend-turn-detail__source a {
    color: #7fc7ff;
    text-decoration: none;
  }

  .history-main .trend-turns__none {
    margin: 10px 0 0;
    color: var(--history-muted);
    font-size: 13px;
    line-height: 1.6;
    word-break: keep-all;
  }

  .history-main .trend-turns__none[hidden] { display: none; }

  .history-main .trend-turn-tooltip {
    position: absolute;
    z-index: 8;
    width: min(280px, calc(100% - 24px));
    padding: 11px 13px 12px;
    border: 1px solid rgba(231, 191, 61, .54);
    border-left: 3px solid var(--history-yellow);
    border-radius: 4px;
    background: rgba(5, 16, 24, .96);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .34);
    pointer-events: none;
  }

  .history-main .trend-turn-tooltip[hidden] { display: none; }

  .history-main .trend-turn-tooltip__date {
    margin: 0 0 6px;
    color: var(--history-yellow);
    font: 700 11px/1 var(--mono, "JetBrains Mono Variable", monospace);
    letter-spacing: .04em;
  }

  .history-main .trend-turn-tooltip__title {
    display: block;
    color: #f0f6f8;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    word-break: keep-all;
  }

  .history-main .trend-turn-tooltip__meta {
    display: block;
    margin-top: 7px;
    color: #aebfc8;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.4;
  }

  .history-main .trend-turn-tooltip[data-mode="compact"] {
    width: auto;
    max-width: min(340px, calc(100% - 24px));
    padding: 7px 10px 8px;
    border-color: rgba(86, 200, 193, .42);
    border-left-color: #57c8c1;
    background: rgba(5, 16, 24, .94);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  }

  .history-main .trend-turn-tooltip[data-mode="compact"] .trend-turn-tooltip__date,
  .history-main .trend-turn-tooltip[data-mode="compact"] .trend-turn-tooltip__meta {
    display: none;
  }

  .history-main .trend-turn-tooltip[data-mode="compact"] .trend-turn-tooltip__title {
    color: #85d8d3;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: .01em;
    white-space: nowrap;
  }

  /* The plot-corner overlay is desktop-only. On a phone a downward swipe that
     starts on it chains into the browser's page reload, and the same record is
     already painted below the figure, so nothing may open over the chart. */
  .history-main .trend-turn-detail-panel {
    display: none;
    position: absolute;
    z-index: 9;
    top: 14px;
    right: 14px;
    width: min(326px, calc(100% - 28px));
    max-height: calc(100% - 28px);
    overflow: auto;
    padding: 14px 40px 14px 16px;
    border: 1px solid rgba(231, 191, 61, .54);
    border-left: 3px solid var(--history-yellow);
    border-radius: 4px;
    background: rgba(5, 16, 24, .97);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .38);
  }

  .history-main .trend-turn-detail-panel[hidden] { display: none; }

  .history-main .trend-turn-detail-panel__close {
    position: absolute;
    top: 8px;
    right: 9px;
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 3px;
    color: #b7c8cf;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  .history-main .trend-turn-detail-panel__close:hover,
  .history-main .trend-turn-detail-panel__close:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    outline: none;
  }

  .history-main .trend-turn-detail-panel__date {
    margin: 0 0 10px;
    color: var(--history-yellow);
    font: 700 11px/1 var(--mono, "JetBrains Mono Variable", monospace);
    letter-spacing: .04em;
  }

  .history-main .trend-turn-detail-panel__items {
    display: grid;
    gap: 12px;
  }

  .history-main .trend-turn-detail-panel__item + .trend-turn-detail-panel__item {
    padding-top: 12px;
    border-top: 1px solid rgba(111, 160, 181, .18);
  }

  .history-main .trend-turn-detail-panel__item strong {
    display: block;
    color: #f0f6f8;
    font-size: 15px;
    line-height: 1.55;
    word-break: keep-all;
  }

  .history-main .trend-turn-detail-panel__item p {
    margin: 6px 0 0;
    color: #b7c8cf;
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
  }

  .history-main .trend-turn-detail-panel__item span {
    display: block;
    margin-top: 7px;
    color: #91a8b3;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.45;
    word-break: keep-all;
  }
}

/* Desktop history follows the existing main dashboard. Mobile retains the
   pre-design stylesheet above and its unchanged mobile-history-guide layer. */
@media (min-width: 851px) {
  body[data-page="history"] {
    --history-muted: #93a7bd;
    --history-blue: #86a4ca;
    --history-line: rgba(140,165,195,.16);
    --history-panel-strong: #131c2a;
    color: #cbd5e0;
    background: #0a101c;
  }
  body[data-page="history"]::before,
  body[data-page="history"] .ambient-grid { display: none; }
  body[data-page="history"] .history-main {
    width: 100%; max-width: none; min-width: 0;
    padding: 16px 0 24px;
    color: #cbd5e0; font-family: var(--sans);
    row-gap: 12px;
  }
  body[data-page="history"] .history-main :is(.history-card,.history-fatal,.history-method-strip) {
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
  body[data-page="history"] .history-main .history-card::before,
  body[data-page="history"] .history-main .history-card::after { content: none; }
  body[data-page="history"] .history-heading { display: flex; margin-bottom: 16px; }
  body[data-page="history"] .history-heading h1 {
    margin: 0; color: #e0e7ef; font: 650 28px/1.45 var(--sans); letter-spacing: -.02em;
  }
  body[data-page="history"] .history-updated { color: var(--history-muted); font: 400 12px/1.5 var(--sans); }
  body[data-page="history"] .history-trend { height: auto; }
  body[data-page="history"] .trend-card { display: flex; flex-direction: column; height: auto; padding: 0; }
  body[data-page="history"] .trend-card__intro h2,
  body[data-page="history"] .trend-turns__head h3 {
    color: var(--history-muted); font: 600 16px/1.5 var(--sans); letter-spacing: 0;
  }
  body[data-page="history"] .trend-card__description { color: #cbd5e0; font: 400 14px/1.6 var(--sans); }
  body[data-page="history"] .trend-card__note { color: var(--history-muted); font: 400 12px/1.5 var(--sans); }
  body[data-page="history"] .trend-stats { gap: 16px 32px; margin: 18px 0; text-align: left; }
  body[data-page="history"] .trend-stats > div { padding: 0; border: 0; background: none; text-align: left; gap: 4px; }
  body[data-page="history"] .trend-stats small { color: var(--history-muted); font: 400 12px/1.5 var(--sans); }
  body[data-page="history"] .trend-stats strong { color: #cbd5e0; font: 600 20px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
  body[data-page="history"] #trendLatest { color: #e0e7ef !important; font-size: 32px; }
  body[data-page="history"] #trendWindow { font: 400 13px/1.5 var(--sans); }
  body[data-page="history"] .trend-control--period { margin: 0 0 12px; }
  body[data-page="history"] :is(.period-button,.trend-target-select,.trend-zoom-reset) {
    min-height: 36px; border: 0; border-radius: 6px; box-shadow: none;
    background: transparent; color: var(--history-muted); font: 500 13px/1.5 var(--sans);
  }
  body[data-page="history"] .trend-target-select { background: #131c2a; color: #cbd5e0; }
  body[data-page="history"] .trend-target-select option { background: #131c2a; }
  body[data-page="history"] .period-button.active,
  body[data-page="history"] .period-button:hover { background: #213040; color: #e0e7ef; box-shadow: none; }
  body[data-page="history"] :is(button,select,a):focus-visible { outline: 2px solid #86a4ca; outline-offset: 2px; }
  body[data-page="history"] .trend-plot { height: clamp(300px,40vh,420px); min-height: 300px; border: 0; background: transparent; }
  body[data-page="history"] .trend-line { stroke: var(--history-blue); filter: none; }
  body[data-page="history"] .trend-dot { filter: none; }
  body[data-page="history"] .trend-area-stop--top { stop-color: var(--history-blue); stop-opacity: .12; }
  body[data-page="history"] .trend-area-stop--bottom { stop-color: var(--history-blue); stop-opacity: 0; }
  body[data-page="history"] .trend-axis-label { fill: var(--history-muted); font-family: var(--sans); }
  body[data-page="history"] .trend-turns { border: 0; padding-top: 0; margin-top: 16px; }
  body[data-page="history"] .trend-turn-detail { border: 0; background: transparent; }
  body[data-page="history"] :is(.trend-turn-detail-panel,.trend-turn-tooltip,.trend-empty) {
    border: 0; border-radius: 6px; background: #131c2a; box-shadow: none;
  }
  body[data-page="history"] .trend-turn-detail-panel { padding-right: 58px; }
  body[data-page="history"] .trend-turn-detail-panel__close { min-width: 44px; min-height: 44px; }
  body[data-page="history"] .history-method-strip { padding: 12px 0; }
  body[data-page="history"] .history-notice { border: 0; border-radius: 0; box-shadow: none; }
}