:root {
  --expect-page: #070b14;
  --expect-panel: #0a1423;
  --expect-panel-soft: #101a2b;
  --expect-line: rgba(85, 230, 255, 0.19);
  --expect-cyan: #55e6ff;
  --expect-violet: #9b75ff;
  --expect-green: #45e59b;
  --expect-yellow: #ffbd36;
  --expect-red: #ff667d;
  --expect-text: #f5f7ff;
  --expect-muted: #8e9ab0;
}

body[data-page="league-expectations"] { background: var(--expect-page); }

.expectations-page {
  display: grid;
  gap: 20px;
  padding: clamp(18px, 2.5vw, 36px);
  min-width: 0;
}

.expectations-eyebrow {
  color: var(--expect-cyan);
  font: 900 0.68rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.15em;
}

.expectations-card {
  padding: clamp(15px, 2vw, 22px);
  border: 1px solid var(--expect-line);
  border-radius: 18px;
  background: var(--expect-panel);
  color: var(--expect-text);
  box-shadow: 0 18px 55px rgba(0,0,0,0.28);
}

.card-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 14px;
}
.card-heading h1 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.8rem); }
.card-heading p { max-width: 580px; margin: 0; color: var(--expect-muted); font-size: 0.76rem; line-height: 1.45; text-align: right; }

.cockpit-card { background: radial-gradient(circle at 95% 0, rgba(155,117,255,0.11), transparent 32%), var(--expect-panel); }
.cockpit-weather { margin-bottom: 14px; }
.cockpit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.cockpit-main,
.pressure-panel { padding: 16px; border: 1px solid var(--expect-line); border-radius: 14px; background: rgba(5,14,26,0.72); }

.cockpit-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.metric { min-width: 0; padding: 13px; border: 1px solid rgba(142,154,176,0.16); border-radius: 10px; background: var(--expect-panel-soft); }
.metric small { display: block; color: var(--expect-muted); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; }
.metric strong { display: block; margin-top: 7px; font-size: clamp(1.1rem,2.2vw,1.65rem); }
.metric em { display: block; margin-top: 5px; color: var(--expect-green); font-size: 0.58rem; font-style: normal; }
.metric em[data-direction="up"] { color: var(--expect-red); }

.difficulty-chart { margin-top: 12px; padding: 12px 10px 5px; border-top: 1px solid rgba(142,154,176,0.14); }
.difficulty-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 26px; padding: 0 4px; color: #74839a; font: 800 0.58rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: 0.08em; }
.difficulty-chart-head output { color: var(--expect-cyan); font: 900 0.68rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: 0; text-align: right; }
.difficulty-chart svg { display: block; width: 100%; height: 238px; overflow: visible; touch-action: pan-y; outline: none; }
.difficulty-chart svg:focus-visible { border-radius: 8px; box-shadow: 0 0 0 2px rgba(85,230,255,0.38); }
.difficulty-axis-label { fill: #78879d; font: 700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.difficulty-marker-line { stroke: rgba(255,189,54,0.62); stroke-width: 1; stroke-dasharray: 3 4; pointer-events: none; }
.difficulty-marker-dot { fill: #ffbd36; stroke: #07101d; stroke-width: 2; pointer-events: none; }
.difficulty-tooltip { pointer-events: none; filter: drop-shadow(0 6px 13px rgba(0,0,0,0.48)); }
.difficulty-tooltip rect { fill: #0b1727; stroke: rgba(85,230,255,0.45); stroke-width: 1; }
.difficulty-tooltip-date { fill: #8e9ab0; font: 700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.difficulty-tooltip-value { fill: #55e6ff; font: 900 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.difficulty-tooltip-income { fill: #8e9ab0; font: 800 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.difficulty-tooltip-income.is-positive { fill: var(--expect-green); }
.difficulty-tooltip-income.is-negative { fill: var(--expect-red); }
.difficulty-tooltip-income.is-neutral { fill: var(--expect-yellow); }
.chart-labels { display: flex; justify-content: space-between; color: #637188; font-size: 0.58rem; }

.pressure-panel { display: grid; gap: 10px; align-content: start; }
.signal-row { display: grid; grid-template-columns: 68px minmax(30px,1fr) auto; align-items: center; gap: 8px; min-height: 34px; color: #cbd4e4; font-size: 0.65rem; }
.signal-row i { overflow: hidden; height: 4px; border-radius: 99px; background: #1a2740; }
.signal-row i b { display: block; width: 50%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--expect-cyan),var(--expect-violet)); transition: width 280ms ease; }
.signal-row strong { color: var(--expect-text); font-size: 0.65rem; }
.retarget-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin-top: 3px; padding: 11px; border-radius: 10px; background: #101a2a; font-size: 0.68rem; }
.retarget-row span { color: var(--expect-muted); }
.retarget-row strong { color: var(--expect-yellow); }
.retarget-row small { grid-column: 1/-1; color: #718097; }

.weather-card { background: linear-gradient(145deg,rgba(14,35,50,0.96),rgba(11,18,32,0.98)); }
.weather-banner { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 20px; padding: clamp(16px,2.5vw,26px); border: 1px solid rgba(85,230,255,0.2); border-radius: 15px; background: linear-gradient(115deg,#0d2630,#12182d); }
.weather-icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: rgba(85,230,255,0.09); font-size: 3rem; box-shadow: inset 0 0 0 1px rgba(85,230,255,0.2); }
.weather-copy h3 { margin: 6px 0 5px; font-size: clamp(1.35rem,2.7vw,2.2rem); }
.weather-copy p { margin: 0; color: #9dabc0; line-height: 1.5; }
.expectation-rule {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  margin-top: 10px;
  padding: 6px 9px;
  border: 1px solid rgba(69,229,155,0.27);
  border-radius: 999px;
  background: rgba(5,18,24,0.58);
  color: #9dabc0;
  font-size: 0.65rem;
  line-height: 1.3;
}
.expectation-rule strong { color: var(--expect-green); }
.expectation-rule span { color: var(--expect-yellow); font-weight: 900; }
.weather-index { display: grid; place-items: center; min-width: 154px; min-height: 106px; border: 1px solid rgba(69,229,155,0.28); border-radius: 13px; background: rgba(5,18,24,0.74); }
.weather-index small { color: #7f8ca1; font-size: 0.58rem; letter-spacing: 0.1em; }
.weather-index strong { color: var(--expect-green); font-size: 2.6rem; }
.weather-index span { max-width: 130px; color: var(--expect-green); text-align: center; font-size: 0.56rem; font-weight: 850; line-height: 1.3; }

.model-boundary { display: flex; gap: 12px; padding: 13px 15px; border: 1px dashed rgba(255,189,54,0.28); border-radius: 12px; background: rgba(255,189,54,0.04); color: #8f9bb0; font-size: 0.68rem; line-height: 1.5; }
.model-boundary strong { flex: 0 0 auto; color: var(--expect-yellow); }

@media (max-width: 1050px) {
  .cockpit-layout { grid-template-columns: 1fr; }
  .pressure-panel { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .retarget-row { grid-column: 1/-1; }
}

@media (max-width: 760px) {
  .card-heading { display: grid; }
  .card-heading p { text-align: left; }
  .cockpit-kpis { grid-template-columns: 1fr; }
  .pressure-panel { display: grid; grid-template-columns: 1fr; }
  .retarget-row { grid-column: auto; }
  .weather-banner { grid-template-columns: auto 1fr; }
  .weather-index { grid-column: 1/-1; min-height: 80px; }
  .model-boundary { display: grid; }
}

@media (max-width: 480px) {
  .expectations-page { padding: 14px 10px 24px; }
  .expectations-card { padding: 11px; border-radius: 14px; }
  .cockpit-main,
  .pressure-panel { padding: 10px; }
  .difficulty-chart { padding-right: 2px; padding-left: 2px; }
  .difficulty-chart-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .difficulty-chart-head output { text-align: left; }
  .difficulty-chart svg { height: 185px; }
  .chart-labels span:nth-child(2) { display: none; }
  .weather-banner { grid-template-columns: 1fr; text-align: center; }
  .weather-icon { margin: auto; }
  .expectation-rule { justify-content: center; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-row i b { transition: none; }
}