/* V3.2.4 — common section, control and scenario layout. Loaded after legacy styles. */
html { scroll-behavior: smooth; scroll-padding-top: 26px; }
.page-shell { --max: 1400px; width: min(100% - 48px, var(--max)); padding-top: 62px; }
.hero { margin-bottom: 36px; }
.hero-copy { max-width: 780px; }
.hero-estimate-note { color: #b5c4cf; }
.section-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px auto 0; }
.section-nav a { padding: 9px 13px; border: 1px solid #263440; border-radius: 9px; color: #bdc9d3; font-size: 12px; text-decoration: none; background: rgba(12,19,27,.8); }
.section-nav a:hover { color: var(--cyan); border-color: #3c6877; }
.shared-region-hint { color: #8294a3; font-size: 12px; margin: 14px auto 0; }
section.dashboard-section {
  position: relative;
  width: 100%; max-width: none;
  margin: 28px 0 0;
  padding: clamp(24px, 3.4vw, 46px);
  border: 1px solid #2c3c4a;
  border-top: 3px solid #3c6375;
  border-radius: 22px;
  background: linear-gradient(135deg, #0e1721, #090f16 75%);
  box-shadow: 0 14px 42px rgba(0,0,0,.14);
  text-align: left;
  scroll-margin-top: 26px;
}
.dashboard-section .section-heading { margin: 0 auto 22px; max-width: 900px; text-align: center; }
.dashboard-section .section-heading .section-kicker { font-size: 11px; letter-spacing: 2px; line-height: 1.6; color: var(--cyan); }
.dashboard-section .section-heading h2 { margin: 10px 0; color: var(--text); font-size: clamp(23px, 2.8vw, 34px); line-height: 1.22; font-weight: 850; letter-spacing: -.65px; }
.dashboard-section .section-heading > p { max-width: 820px; margin: 0 auto; color: #a4b3bf; font-size: 14px; line-height: 1.7; }
.region-switch {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 940px);
  margin: 24px auto 30px;
  padding: 7px;
  border: 1px solid #2b3b49;
  border-radius: 16px;
  background: #080e15;
}
.region-switch button {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 0; min-height: 50px;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #aab9c6;
  font: inherit; font-size: 12px; font-weight: 850; letter-spacing: .8px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.region-switch button:hover { color: #eff9ff; background: #14212d; }
.region-switch button[aria-pressed="true"] { color: var(--cyan); background: #102a34; border-color: #327186; }
.region-switch .region-icon, .region-switch .region-code { display: none; }
.region-switch .region-name { overflow-wrap: anywhere; text-align: center; }
.region-switch button:focus-visible, .section-nav a:focus-visible, .option-switch button:focus-visible, .text-button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.dashboard-section .cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.dashboard-section .card { min-width: 0; min-height: 236px; padding: 24px; border: 1px solid #263745; border-radius: 15px; background: #101b26; }
.dashboard-section .card-head { gap: 10px; }
.dashboard-section .card-head > div:first-child { min-width: 0; }
.dashboard-section .card .label { overflow-wrap: anywhere; }
.dashboard-section .card .number { font-size: clamp(31px, 3.8vw, 55px); margin-top: 30px; letter-spacing: -2px; }
.dashboard-section .card .card-foot { font-size: 10px; line-height: 1.5; }
.dashboard-section .card .rate, .dashboard-section .card .rate span { font-size: 12px; }
.dashboard-section .card .progress { margin-top: 18px; }
.dashboard-section .card .trend { font-size: 11px; padding: 7px 8px; }
.dashboard-section .change-chart { max-width: 1080px; }
.dashboard-section .change-row { min-height: 52px; grid-template-columns: 130px minmax(100px,1fr) 145px; gap: 24px; }
.dashboard-section .change-label, .dashboard-section .change-value { font-size: 14px; }
.dashboard-section .change-track { height: 18px; }
.dashboard-section .change-bar { top: 4px; height: 10px; }
.scenario-toolbar { display: flex; flex-wrap: wrap; gap: 20px; align-items: end; justify-content: space-between; }
.scenario-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.control-label { color: #aab9c6; font-size: 12px; font-weight: 700; }
.option-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #2b3c4a; border-radius: 10px; background: #080f16; }
.option-switch button { border: 1px solid transparent; border-radius: 7px; padding: 10px 17px; color: #9eafbd; background: transparent; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.option-switch button[aria-pressed="true"] { border-color: #386275; background: #152c39; color: #d9f5ff; }
.scenario-year { display: flex; align-items: baseline; gap: 12px; margin-left: auto; color: #a6b5c2; font-size: 12px; }
.scenario-year strong { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 32px; }
.scenario-assumptions { border-left: 3px solid #547e95; padding: 10px 14px; margin: 22px 0 16px; color: #b7c9d7; background: rgba(65,108,133,.1); font-size: 12px; line-height: 1.65; }
.scenario-section .projection-slider { width: 100%; height: 28px; margin: 0; accent-color: var(--cyan); }
/* The label follows the centre of the 16px slider thumb, including both endpoints. */
.projection-year-control { position: relative; padding-top: 18px; }
.projection-year-thumb-label { position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: #b4c8d6; font-size: 9px; line-height: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
#projectionYear { appearance: none; -webkit-appearance: none; padding: 0; border: 0; border-radius: 0; background: transparent; }
#projectionYear::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--cyan) 0 var(--year-progress, 0%), #344957 var(--year-progress, 0%) 100%); }
#projectionYear::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: 50%; background: var(--cyan); }
#projectionYear::-moz-range-track { height: 4px; border-radius: 2px; background: #344957; }
#projectionYear::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--cyan); }
#projectionYear::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--cyan); }
.scenario-section .projection-years { color: #9baebb; font-size: 11px; }
.scenario-result-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0; }
.scenario-result-heading h3 { color: #d7e4ed; font-size: 16px; margin: 0; }
.scenario-result-heading > span { color: #9fb4c2; font-size: 12px; }
.scenario-section .projection-chart { gap: 16px; margin-top: 0; }
.scenario-section .projection-row { grid-template-columns: 130px minmax(80px,1fr) 130px 65px; gap: 16px; }
.scenario-section .projection-label, .scenario-section .projection-amount, .scenario-section .projection-share { font-size: 13px; }
.scenario-section .projection-track { height: 13px; }
.scenario-settings { border: 1px solid #304554; border-radius: 12px; margin: 26px 0 0; background: rgba(7,13,19,.5); }
.scenario-settings summary { padding: 15px 18px; color: #c4d6e2; cursor: pointer; font-size: 13px; font-weight: 750; }
.scenario-settings-body { padding: 3px 18px 18px; }
.scenario-settings-body > label { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; color: #cfdee8; font-size: 13px; margin-bottom: 12px; }
.scenario-settings-body > label strong { color: var(--cyan); }
.scenario-settings-body p { color: #a0b3c1; font-size: 12px; line-height: 1.7; }
.scenario-settings input:disabled { opacity: .4; cursor: not-allowed; }
.text-button { border: 1px solid #3a596d; border-radius: 9px; padding: 10px 14px; color: #cceafb; font: inherit; font-size: 12px; background: #102331; cursor: pointer; }
.scenario-section .projection-disclaimer { color: #a7bac7; font-size: 12px; line-height: 1.75; margin: 20px 0 0; }
.dashboard-section .session-time { margin: 4px auto 22px; text-align: center; color: #a9bdca; font-size: 13px; }
.dashboard-section .session-time strong { color: #e3edf4; font-variant-numeric: tabular-nums; }
.dashboard-section .session-grid { max-width: none; padding: 18px 0; border: 1px solid #293c4c; border-radius: 14px; background: #0b141e; }
.dashboard-section .session-item { padding: 12px 16px; }
.dashboard-section .session-item span { font-size: 11px; color: #b4c5d2; }
.dashboard-section .session-item strong { font-size: 32px; }
/* Metric text and quantities retain the existing fuel/CO2 formatting. */
.impact-section .section-heading .session-impact-title { margin: 10px 0; }
.impact-section #sessionModelNote { margin: 22px auto 0; }
.dashboard-section .session-model-note { font-size: 12px; color: #bbd0de; }
section.dashboard-section.fire-counter { border: 1px solid #66503e; border-top: 3px solid #eaa265; background: linear-gradient(135deg, #191c20, #0b121a 72%); text-align: center; }
.dashboard-section.fire-counter .fire-counter-heading .section-kicker { color: #ffb477; font-size: clamp(23px, 3vw, 32px); font-weight: 950; letter-spacing: 1.5px; }
.dashboard-section.fire-counter .fire-counter-heading h2 { font-size: clamp(20px, 2.4vw, 29px); color: #e1e9f0; }
.dashboard-section.fire-counter .fire-counter-heading p { color: #b0bec9; font-size: 13px; }
.dashboard-section.fire-counter .fire-counter-grid { max-width: 1000px; padding: 18px 0; margin: 0 auto 20px; border: 1px solid #3b4853; border-radius: 14px; background: #0a141e; }
.dashboard-section.fire-counter .fire-counter-item { padding: 10px 18px; gap: 10px; }
.dashboard-section.fire-counter .fire-counter-item > span { font-size: 12px; color: #b9c8d3; }
.dashboard-section.fire-counter .fire-counter-item strong { font-size: clamp(29px, 4vw, 46px); }
.dashboard-section.fire-counter .fire-count-label { font-size: 11px; color: #a5b7c3; }
.dashboard-section.fire-counter .fire-counter-note { color: #aabbc8; font-size: 13px; line-height: 1.75; max-width: 1000px; margin: 0 auto; }
.dashboard-section.fire-counter .fire-rate-chart { max-width: 850px; margin: 24px auto; border-color: #3b4c5a; background: #0a121b; padding: 20px; }
.fire-rate-chart h4 { font-size: 14px; color: #d1e0e9; }
.fire-rate-chart p { color: #a0b4c3; font-size: 12px; }
.fire-rate-row { grid-template-columns: 135px minmax(70px,1fr) 55px; gap: 16px; }
.fire-rate-label, .fire-rate-value { font-size: 12px; }
.dashboard-section.method { text-align: center; }
.dashboard-section.method > p { color: #a9bac7; }
#fireMethodSection, #scenarioMethodSection { scroll-margin-top: 30px; }
@media (min-width: 1200px) {
  .dashboard-section .cards { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
  .dashboard-section .card { padding: 22px 18px; min-height: 245px; }
  .dashboard-section .card .number { font-size: clamp(27px, 2.3vw, 34px); letter-spacing: -1.4px; }
  .dashboard-section .card .label { font-size: 12px; letter-spacing: 1.4px; }
  .dashboard-section .card .card-foot { font-size: 9px; letter-spacing: .3px; }
}
@media (max-width: 900px) {
  .page-shell { width: min(100% - 28px, 1400px); padding-top: 54px; }
  section.dashboard-section { padding: 26px 22px; border-radius: 18px; }
  .region-switch { gap: 5px; padding: 6px; }
  .region-switch button { font-size: 10px; padding: 13px 7px; letter-spacing: .3px; }
  .scenario-toolbar { gap: 14px; }
  .scenario-year { font-size: 11px; }
  .dashboard-section .change-row { gap: 14px; grid-template-columns: 100px minmax(60px,1fr) 115px; }
  .scenario-section .projection-row { grid-template-columns: 100px minmax(70px,1fr) 100px 55px; gap: 10px; }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 16px; }
  .page-shell { width: calc(100% - 20px); padding-top: 58px; }
  .hero { margin-bottom: 24px; }
  .section-nav { gap: 6px; margin-top: 19px; }
  .section-nav a { font-size: 10px; padding: 8px 10px; }
  .shared-region-hint { font-size: 10px; line-height: 1.6; }
  section.dashboard-section { margin-top: 18px; padding: 23px 12px; border-radius: 16px; }
  .dashboard-section .section-heading { margin-bottom: 18px; }
  .dashboard-section .section-heading h2 { font-size: 23px; line-height: 1.23; letter-spacing: -.4px; }
  .dashboard-section .section-heading .section-kicker { font-size: 10px; letter-spacing: 1.4px; }
  .dashboard-section .section-heading > p { font-size: 12px; line-height: 1.65; }
  .region-switch { max-width: 440px; width: 100%; gap: 5px; padding: 5px; margin: 20px auto 24px; border-radius: 12px; }
  .region-switch button { flex-direction: column; gap: 6px; padding: 9px 2px; min-height: 62px; border-radius: 8px; }
  .region-switch .region-name { display: none; }
  .region-switch .region-icon { display: inline; font-size: 23px; line-height: 1; }
  .region-switch .region-code { display: inline; font-size: 10px; line-height: 1.1; letter-spacing: .6px; }
  .dashboard-section .cards { gap: 9px; }
  .dashboard-section .card { padding: 14px 10px; min-height: 205px; border-radius: 12px; }
  .dashboard-section .card .number { font-size: clamp(15px, 4.4vw, 25px); margin-top: 25px; letter-spacing: -.9px; }
  .dashboard-section .card .label { font-size: 10px; letter-spacing: .6px; }
  .dashboard-section .card .icon { font-size: 18px; min-height: 21px; }
  .dashboard-section .card .trend { gap: 3px; padding: 5px 4px; font-size: 9px; }
  .dashboard-section .card .rate, .dashboard-section .card .rate span { font-size: 9px; line-height: 1.65; }
  .dashboard-section .card .card-foot { font-size: 7px; letter-spacing: .1px; gap: 4px; }
  .dashboard-section .change-row { grid-template-columns: 67px minmax(35px,1fr) 86px; gap: 9px; min-height: 43px; }
  .dashboard-section .change-label, .dashboard-section .change-value { font-size: 10px; }
  .scenario-toolbar { gap: 15px 10px; }
  .scenario-field { gap: 7px; }
  .control-label { font-size: 10px; }
  .option-switch { gap: 2px; padding: 3px; }
  .option-switch button { padding: 10px 12px; font-size: 11px; }
  .scenario-year { margin-left: 0; width: 100%; justify-content: space-between; }
  .scenario-year strong { font-size: 30px; }
  .scenario-assumptions { font-size: 11px; padding: 10px; }
  .scenario-result-heading { flex-direction: column; gap: 8px; }
  .scenario-result-heading h3 { font-size: 14px; }
  .scenario-result-heading > span { font-size: 11px; }
  .scenario-section .projection-row { grid-template-columns: 61px minmax(25px,1fr) 80px 44px; gap: 6px; }
  .scenario-section .projection-label, .scenario-section .projection-amount, .scenario-section .projection-share { font-size: 10px; }
  .scenario-settings summary { font-size: 12px; padding: 14px; }
  .scenario-settings-body { padding: 0 14px 14px; }
  .scenario-settings-body label { font-size: 11px; }
  .scenario-settings-body p, .scenario-section .projection-disclaimer { font-size: 11px; }
  .dashboard-section .session-item { padding: 10px 3px; }
  .dashboard-section .session-item span { font-size: 9px; letter-spacing: .4px; }
  .dashboard-section .session-item strong { font-size: 23px; }
  .dashboard-section .session-time { font-size: 12px; margin-bottom: 19px; }
  .dashboard-section .session-model-note { font-size: 11px; }
  .dashboard-section.fire-counter .fire-counter-heading .section-kicker { font-size: 24px; }
  .dashboard-section.fire-counter .fire-counter-heading h2 { font-size: 20px; }
  .dashboard-section.fire-counter .fire-counter-heading p, .dashboard-section.fire-counter .fire-counter-note { font-size: 11px; }
  .dashboard-section.fire-counter .fire-counter-item { padding: 8px 4px; }
  .dashboard-section.fire-counter .fire-counter-item > span { font-size: 9px; letter-spacing: .4px; overflow-wrap: anywhere; }
  .dashboard-section.fire-counter .fire-counter-item strong { font-size: clamp(20px, 6.5vw, 30px); }
  .dashboard-section.fire-counter .fire-count-label { font-size: 9px; }
  .dashboard-section.fire-counter .fire-rate-chart { padding: 15px 10px; margin-top: 20px; }
  .fire-rate-chart h4 { font-size: 12px; }
  .fire-rate-chart p { font-size: 10px; }
  .fire-rate-row { grid-template-columns: 79px minmax(40px,1fr) 39px; gap: 8px; }
  .fire-rate-label, .fire-rate-value { font-size: 10px; }
}
@media (max-width: 370px) {
  .dashboard-section .card { padding-left: 8px; padding-right: 8px; }
  .dashboard-section .card .number { font-size: 14px; }
  .scenario-section .projection-row { grid-template-columns: 53px minmax(16px,1fr) 72px 39px; gap: 4px; }
  .scenario-section .projection-label, .scenario-section .projection-amount, .scenario-section .projection-share { font-size: 9px; }
  .region-switch { gap: 3px; padding: 4px; }
  .region-switch .region-icon { font-size: 20px; }
  .region-switch .region-code { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.projection-status { display: block; width: fit-content; margin: 18px 0 0; padding: 7px 11px; border: 1px solid #3b6375; border-radius: 7px; color: #b8e3f4; background: #112530; font-size: 10px; letter-spacing: 1px; font-weight: 800; }
.projection-status[data-kind="history"] { color: #c5d9e7; border-color: #4a6274; background: #14212c; }
.projection-status[data-kind="scenario"] { color: #ffd49c; border-color: #6c5536; background: #2b2217; }
.history-coverage { color: #a3b8c7; font-size: 12px; line-height: 1.75; margin: 15px 0 0; }
.history-coverage:empty, .history-sources:empty { display: none; }
.history-sources { color: #a8bdcb; font-size: 11px; line-height: 1.75; margin-top: 12px; overflow-wrap: anywhere; }
.history-sources a { color: #9ccfdf; text-underline-offset: 3px; }
.projection-track.is-missing { background: repeating-linear-gradient(120deg,#233442 0,#233442 3px,transparent 3px,transparent 8px); opacity: .5; }
@media (max-width:650px) { .history-coverage { font-size: 11px; } .history-sources { font-size: 10px; } }

.text-button { max-width: 100%; white-space: normal; line-height: 1.5; }
.option-switch button { min-height: 42px; }
@media (max-width: 650px) {
  .dashboard-section .card .card-foot { font-size: 8px; }
  .dashboard-section.fire-counter .fire-counter-item > span { font-size: 10px; }
}
@media (max-width: 370px) {
  .dashboard-section .cards { grid-template-columns: 1fr; }
  .dashboard-section .card { min-height: 215px; padding: 20px; }
  .dashboard-section .card .number { font-size: 33px; }
  .dashboard-section .card .label { font-size: 12px; }
  .dashboard-section .card .trend { font-size: 11px; }
  .dashboard-section .card .rate, .dashboard-section .card .rate span { font-size: 12px; }
  .dashboard-section .card .card-foot { font-size: 9px; }
}
@supports (font-size: 1cqw) {
  .dashboard-section.fire-counter .fire-counter-item { container-type: inline-size; }
  .dashboard-section.fire-counter .fire-counter-item strong { font-size: clamp(14px, 17cqw, 46px); }
}

.timeline-scope { color: #a7bac8; font-size: 12px; line-height: 1.65; margin: 18px 0 0; }
@media (max-width:650px) { .timeline-scope { font-size: 11px; } }

/* V3.2.3: compact timeline and stable live displays, mobile only. */
@media (max-width: 650px) {
  #scenarioSection > .scenario-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; margin-bottom: 14px; width: 100%; }
  #scenarioSection .scenario-toolbar > .scenario-field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; grid-row: 1; }
  #scenarioSection .scenario-toolbar > .scenario-field:nth-child(1) { grid-column: 1; }
  #scenarioSection .scenario-toolbar > .scenario-field:nth-child(2) { grid-column: 2; }
  #scenarioSection .scenario-field > .control-label { display: block; width: 100%; line-height: 1.25; text-align: left; }
  #scenarioSection .scenario-field > .option-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0; }
  #scenarioSection .option-switch button { flex: 1; min-width: 0; padding: 10px 4px; min-height: 44px; font-size: clamp(9px, 2.8vw, 11px); white-space: nowrap; }
  #scenarioSection .scenario-year { display: none; }
  #scenarioSection .section-heading { margin-bottom: 12px; }
  #scenarioSection > .region-switch { margin: 22px auto 0; }
  #scenarioSection .projection-chart { margin-top: 14px; gap: 13px; }
  #scenarioSection .projection-years { margin-bottom: 0; }
  #scenarioMobileInfo:not([hidden]) { display: block; margin-top: 18px; border: 1px solid #304554; border-radius: 12px; background: rgba(7,13,19,.5); }
  #scenarioMobileInfo[hidden] { display: none; }
  #scenarioMobileInfo > summary { padding: 12px 14px; color: #c4d6e2; cursor: pointer; font-size: 12px; font-weight: 750; }
  #scenarioInfoKind { display: block; margin-top: 5px; padding-left: 14px; color: #9fb4c2; font-size: 9px; font-weight: 500; }
  .scenario-mobile-info-body { padding: 0 14px 10px; }
  #scenarioSection .scenario-mobile-info-body > p { color: #a0b3c1; font-size: 11px; line-height: 1.65; margin: 12px 0; }
  #scenarioSection .scenario-mobile-info-body .scenario-result-heading { margin: 12px 0; }
  #scenarioSection .scenario-settings { margin-top: 12px; }
  .session-impact-item .impact-unit { min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
  .session-impact-item .impact-amount, .fire-counter-item strong, .card .number, .session-item strong { font-variant-numeric: tabular-nums; }
  #sessionImpact, .session-grid, .fire-counter-grid, .method-impact-grid, #accountingLive { overflow-anchor: none; }
}

/* V3.2.3: session fractions stay subordinate to the whole number, in both views. */
#sessionSection .session-item strong { white-space: nowrap; }
#sessionSection .session-item strong > span { display: inline; margin: 0; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
#sessionSection .session-item strong > .session-fraction { font-size: .52em; font-weight: 650; letter-spacing: 0; }

/* V3.2.4: on mobile the year slider follows the bars, clear of the chart while dragging. */
@media (max-width: 650px) {
  #scenarioSection > .projection-year-control { margin-top: 18px; }
}

/* V3.2.4: mobile selectors close their corresponding section. */
@media (max-width: 650px) {
  section.dashboard-section > .region-switch { margin: 22px auto 0; }
}

/* V3.2.4: region selection immediately follows the corresponding mobile display. */
@media (max-width: 650px) {
  #scenarioSection > .region-switch,
  #fireSection > .region-switch,
  #impactSection > .region-switch { margin: 18px auto 20px; }
}

/* V3.2.5: first show the modeled change, then navigation and detail. */
.page-shell { padding-top: 30px; }
.hero.entry-brand { margin: 0 auto 14px; padding: 0; max-width: 980px; text-align: center; }
.entry-brand h1 { font-size: 32px; line-height: 1.15; letter-spacing: -.9px; margin: 0; font-weight: 850; }
.entry-brand h1 span { color: var(--cyan); background: none; -webkit-text-fill-color: currentColor; }
.entry-tagline { margin: 7px 0 0; color: #a7b9c6; font-size: 13px; line-height: 1.45; }
section.dashboard-section.session { margin-top: 0; padding: 26px 34px; border-top-color: #458668; }
#sessionSection .section-heading { margin-bottom: 16px; }
#sessionSection .section-heading .section-kicker { display: none; }
#sessionSection .section-heading h2 { margin: 0; font-size: clamp(20px, 2.1vw, 29px); line-height: 1.25; letter-spacing: -.4px; text-transform: none; }
#sessionSection .session-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; padding: 12px 0; }
#sessionSection .session-item { display: grid; grid-template-rows: 18px 50px auto; justify-items: center; align-content: start; gap: 6px; padding: 12px 8px; }
#sessionSection .session-item > span { display: block; align-self: center; margin: 0; font-size: 11px; line-height: 1.2; letter-spacing: .6px; white-space: nowrap; }
#sessionSection .session-item > strong { align-self: center; font-size: clamp(26px, 3.2vw, 43px); line-height: 1.1; letter-spacing: -.8px; }
#sessionSection .session-electric > span { color: #b4d8c5; font-weight: 850; }
#sessionSection .entry-bev-more { align-self: start; margin: 0; color: #b4d8c5; font-size: 11px; line-height: 1.35; text-align: center; }
#sessionSection > .entry-scope { margin: 10px 0 0; color: #90a99d; font-size: 11px; line-height: 1.4; text-align: center; }
.entry-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center; margin-top: 12px; color: #a3b7c4; font-size: 11px; line-height: 1.5; }
#sessionSection .entry-meta .session-time { margin: 0; font-size: inherit; color: inherit; }
#sessionSection > .region-switch { margin: 18px auto 0; }
.entry-clock { text-align: center; margin: 10px 0 0; color: #91a6b5; font-size: 10px; }
.section-nav { margin-top: 18px; gap: 7px; }
.section-nav a { padding: 8px 11px; }
/* Small supporting emphasis; no animations or artificial risk ranking. */
.dashboard-section .card-electric { border-color: #345e4b; }
.dashboard-section .card-electric .label { font-weight: 850; }
.projection-electric .projection-label, .change-electric .change-label { color: #8ae4b6; font-weight: 850; }
.aha-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.aha-card { min-width: 0; padding: 23px; border: 1px solid #304554; border-radius: 14px; background: #0b151e; }
.aha-card h3 { margin: 0 0 12px; color: #d3e3ed; font-size: 18px; line-height: 1.3; }
.aha-value { display: block; margin-bottom: 9px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: clamp(26px, 3vw, 42px); color: #79e7ad; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aha-value .session-fraction { font-size: .52em; }
.aha-card .aha-caption { margin: 6px 0; color: #bfcede; font-size: 13px; line-height: 1.5; }
.aha-card .aha-note { margin: 7px 0; color: #9db1bf; font-size: 11px; line-height: 1.5; }
.aha-card > .text-button, .aha-actions { margin-top: 14px; }
.aha-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.text-button:disabled { opacity: .6; cursor: progress; }
.share-status:empty, .share-fallback[hidden] { display: none; }
.share-status { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 50; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 12px 18px; border: 1px solid #4d7563; border-radius: 10px; background: #12231d; color: #d3f3e0; font-size: 13px; line-height: 1.5; box-shadow: 0 6px 24px #0006; }
.share-fallback { width: min(900px, calc(100% - 32px)); margin: 20px auto 60px; padding: 18px; border: 1px solid #3c5a6c; border-radius: 12px; background: #0b151e; color: #c6d8e5; }
.share-fallback label { display: block; margin-bottom: 12px; font-size: 14px; }
.share-fallback textarea { display: block; width: 100%; min-height: 190px; padding: 12px; border: 1px solid #416176; border-radius: 8px; background: #050b10; color: #d9e7f0; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; }
@media (max-width: 650px) {
  .page-shell { padding-top: 21px; }
  .hero.entry-brand { margin-bottom: 12px; padding-right: 76px; text-align: left; }
  .entry-brand h1 { margin: 0; padding: 0; width: auto; font-size: clamp(20px, 5.2vw, 28px); line-height: 1.2; letter-spacing: -.65px; }
  .entry-tagline { font-size: 11px; margin-top: 5px; }
  section.dashboard-section.session { padding: 18px 12px; }
  #sessionSection .section-heading { margin-bottom: 10px; }
  #sessionSection .section-heading h2 { font-size: 19px; line-height: 1.3; letter-spacing: -.3px; }
  #sessionSection .session-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
  #sessionSection .session-item { grid-template-rows: 16px 30px auto; gap: 5px; padding: 12px 3px; }
  #sessionSection .session-item > span { font-size: clamp(7px, 2.25vw, 9px); line-height: 1.2; letter-spacing: .3px; margin: 0; }
  #sessionSection .session-item > strong { font-size: clamp(16px, 5.4vw, 24px); line-height: 1.1; letter-spacing: -.6px; }
  #sessionSection .entry-bev-more { font-size: 9px; }
  #sessionSection > .entry-scope { font-size: 10px; margin-top: 8px; }
  .entry-meta { margin-top: 10px; font-size: 10px; gap: 4px 12px; }
  #sessionSection > .region-switch { margin-top: 14px; }
  .section-nav { margin-top: 14px; gap: 5px; }
  .section-nav a { font-size: 10px; padding: 7px 9px; }
  .entry-clock { margin-top: 8px; font-size: 9px; }
  .aha-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .aha-card { padding: 18px; }
  .aha-card h3 { font-size: 17px; }
  .aha-value { font-size: 32px; }
  .aha-card .aha-caption { font-size: 12px; }
  .aha-card .text-button { min-height: 42px; }
}

/* One share action closes the page; insight cards remain quiet. */
.page-share-action { display: flex; justify-content: center; margin: 0; }
/* Compact, matching heights for the closing action buttons. */
.brand .facebook-button, .brand .feedback-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 32px;
  padding: 5px 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: 7px;
  font-family: inherit;
  font-size: 12px;
  line-height: 20px;
}
.brand .facebook-button { border-color: transparent; }
.page-share-button { cursor: pointer; }
.page-share-button:disabled { opacity: .6; cursor: progress; }