/* Kettura's complete live forecast, set in a clear, upright Arial hierarchy. */
.aurora-section {
  background: radial-gradient(ellipse at 80% 10%, #29433320, transparent 55%), var(--bg);
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
}
.aurora-section em { font-family: inherit; font-style: normal; }
.aurora-section h2, .aurora-section h3 { font-family: Arial, Helvetica, sans-serif; }
.aurora-section .eyebrow .status-dot { margin-right: 8px; }
.full-aurora { --activity: #8db79e; min-width: 0; }
.full-forecast-tools {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; margin-bottom: 20px;
}
.full-forecast-tools > p {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  color: #b2beb7; font-size: 14px; line-height: 1.6;
}
.refresh-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  flex: none; padding: 12px 16px; min-height: 46px;
  background: #ffffff05; border: 1px solid var(--line); border-radius: 3px;
  color: #d4dccc; font-size: 23px; line-height: 1; cursor: pointer;
}
.refresh-button span { font-size: 13px; font-weight: 700; }
.refresh-button:hover { border-color: var(--gold); color: var(--gold); }
.full-feed-notice {
  margin: 0 0 20px; padding: 18px 22px; border: 1px solid #c4a06455;
  border-radius: 3px; background: #c4a0640a; color: #e1cda7;
  font-size: 15px; line-height: 1.7;
}
.aurora-status-banner {
  position: relative; padding: 32px; border: 1px solid #8db79e55;
  border-radius: 4px; background: linear-gradient(120deg, #14221c, #111a1b);
}
.status-banner-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-bottom: 17px; }
.status-banner-heading .eyebrow { font-size: 12px; color: var(--activity); }
.aurora-status-mark { font-size: 28px; line-height: 1; color: var(--activity); }
.sky-darkness {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  color: #bdc9c0; font-size: 13px; font-weight: 700;
}
.aurora-status-banner h3 {
  font-family: Arial, Helvetica, sans-serif; font-size: 23px; font-weight: 500;
  line-height: 1.45; letter-spacing: -.35px; color: #e7eee9;
}
.aurora-status-banner #status-label { color: var(--activity); font-weight: 700; }
.status-data-line { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 17px; color: #b7c3bb; font-size: 15px; }
.status-data-line strong { color: #e5ede7; font-weight: 700; }
.status-data-line > span + span { border-left: 1px solid #ffffff25; padding-left: 24px; }
.status-advice { max-width: 1050px; margin-top: 20px; color: #cad5ce; font-size: 16px; line-height: 1.75; }
.status-time { margin-top: 18px; color: #a4b2a8; font-size: 12px; }
.aurora-metric-grid { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 20px; margin-top: 20px; }
.aurora-metric { min-width: 0; padding: 28px; background: #11181d; border: 1px solid var(--line); border-radius: 4px; }
.aurora-metric > .eyebrow { font-size: 12px; letter-spacing: 1.3px; color: #d6c39e; }
.kp-metric-main { display: flex; align-items: center; gap: 24px; min-height: 132px; margin: 20px 0; }
.kp-dial {
  width: 123.2px; height: 123.2px; flex: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; border: 3px solid var(--activity);
  border-radius: 50%; box-shadow: inset 0 0 24px #78a4870c;
}
.kp-dial strong { font: 700 54px/.95 Arial, Helvetica, sans-serif; color: var(--activity); letter-spacing: -2px; }
.kp-dial > span { margin-top: 8px; color: #aebfb1; font-size: 12px; }
.kp-trend { color: #c2cdc6; font-size: 16px; font-weight: 700; }
.metric-caption { color: #b9c3cb; font-size: 15px; line-height: 1.65; }
.metric-source-note { display: block; margin-top: 9px; color: #a3b2bc; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.station-list { display: flex; flex-direction: column; justify-content: center; gap: 18px; min-height: 132px; margin: 20px 0; }
.station-reading { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; color: #d8dfe1; font-size: 16px; }
.station-reading small { color: #a3b2bb; font-size: 12px; }
.station-reading > strong { font: 700 32px/1.2 Arial, Helvetica, sans-serif; color: #e5e6dd; letter-spacing: -.8px; }
.station-activity { padding: 4px 9px; border: 1px solid #729f7b44; border-radius: 3px; background: #729f7b12; color: #bad5c1; font-size: 12px; line-height: 1.5; text-align: center; }
.cloud-metric-main { display: flex; align-items: center; gap: 18px; min-height: 132px; margin: 20px 0; }
.cloud-metric-main > svg { width: 44px; height: 44px; flex: none; fill: none; stroke: #a7bfc4; stroke-width: 1.4; }
.cloud-metric-main > strong { font: 700 58px/1 Arial, Helvetica, sans-serif; color: #e4ece8; letter-spacing: -2px; }
.full-kp-panel, .solar-wind-panel, .aurora-calendar-panel { min-width: 0; margin-top: 24px; background: #10171c; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.full-panel-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; padding: 25px 28px; border-bottom: 1px solid var(--line); }
.full-panel-heading > div { min-width: 0; }
.full-panel-heading .eyebrow { font-size: 12px; letter-spacing: 1.3px; }
.chart-subtitle { margin-top: 6px; color: #adb8c1; font-size: 14px; line-height: 1.6; }
.chart-zone-note { color: #a7b5ba; font-size: 12px; letter-spacing: .6px; line-height: 1.6; }
.full-kp-layout { display: flex; min-width: 0; gap: 13px; padding: 32px 28px 0; }
.kp-y-axis { display: flex; flex: none; flex-direction: column; justify-content: space-between; position: relative; width: 18px; height: 240px; color: #b3c1b9; font-size: 12px; line-height: 0; }
.full-kp-scroll { min-width: 0; flex: 1; padding-bottom: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #6f826f #121b1e; }
.full-kp-scroll:focus-visible { outline-offset: -2px; }
/* The 28px bars plus 4px gap match aurora.js's 32px scroll calculations. */
.full-kp-chart { display: flex; align-items: flex-start; position: relative; min-width: 100%; height: 303px; gap: 4px; padding: 0; isolation: isolate; background: repeating-linear-gradient(to top, transparent 0, transparent 25.65px, #ffffff0d 25.65px, #ffffff0d 26.65px); background-size: 100% 240px; background-repeat: no-repeat; }
.full-kp-chart .kp-point { display: flex; align-items: flex-end; flex: 0 0 28px; position: relative; width: 28px; height: 240px; padding: 0; background: none; border: 0; border-radius: 0; line-height: 1; }
.kp-point-bar { position: relative; z-index: 1; width: 28px; min-height: 4.8px; border-radius: 3px 3px 0 0; transition: filter .15s; }
.kp-point:hover .kp-point-bar, .kp-point:focus-visible .kp-point-bar { filter: brightness(1.3); outline: 1px solid #e9e8cf; }
.kp-point:focus-visible { outline-offset: -1px; }
.kp-point[aria-pressed=true] .kp-point-bar { outline: 1px solid #f9fafb; filter: brightness(1.15); }
.kp-point-label { position: absolute; top: 268px; left: 0; color: #bac5bd; font-size: 11px; white-space: nowrap; pointer-events: none; }
.kp-current-arrow { position: absolute; top: 246px; left: 7px; color: #e0c599; font-size: 13px; pointer-events: none; }
.kp-visible-line { position: absolute; top: 160px; left: 0; right: 0; z-index: 2; border-top: 1px dashed #e5d3a2aa; pointer-events: none; }
.kp-visible-line > span { display: inline-block; position: sticky; left: 7px; padding: 4px 8px; transform: translateY(-100%); background: #10171ce8; color: #e2d6b7; font-size: 12px; line-height: 1.4; }
.chart-empty { margin: auto; padding: 30px; color: #bcc6cd; font-size: 15px; line-height: 1.7; }
.full-chart-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; padding: 18px 28px 0; }
.full-chart-footer > p { min-height: 22px; color: #d0ddcf; font-size: 14px; line-height: 1.6; }
.kp-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; color: #b0beb4; font-size: 12px; }
.kp-legend > span { display: flex; align-items: center; gap: 7px; }
.kp-legend i { display: block; width: 9px; height: 9px; border-radius: 1px; background: #65b778; }
.kp-legend i.legend-predicted { background: #427a50; }
.chart-guidance { padding: 15px 28px 25px; color: #a7b4bd; font-size: 13px; line-height: 1.75; }
.solar-wind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 30px 28px; }
.solar-wind-grid > div { min-width: 0; }
.solar-wind-grid > div + div { padding-left: 30px; border-left: 1px solid var(--line); }
.solar-label { color: #b8c6c9; font-size: 12px; font-weight: 700; letter-spacing: 1px; line-height: 1.6; }
.solar-reading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 18px 0 13px; line-height: 1; }
.solar-reading > strong { font: 700 49px/1.1 Arial, Helvetica, sans-serif; color: #e7dece; letter-spacing: -1.7px; }
.solar-reading > span { color: #b2c3c6; font-size: 15px; }
.solar-wind-grid .metric-caption { font-size: 14px; }
.solar-wind-grid .metric-source-note { margin-top: 13px; font-size: 12px; }
.aurora-model-panel { display: grid; grid-template-columns: minmax(270px, .9fr) minmax(0, 1.1fr); align-items: center; gap: 46px; margin-top: 28px; padding: 30px; border: 1px solid var(--line); border-radius: 4px; background: #0f171a; }
.full-aurora-map { display: block; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: #000; }
.full-aurora-map > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.full-aurora-map > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; background: #111a1e; color: #cad9cf; font-size: 13px; line-height: 1.6; }
.full-aurora-map .icon { width: 18px; height: 18px; flex: none; }
.aurora-model-copy { min-width: 0; max-width: 560px; }
.aurora-model-copy > .eyebrow { font-size: 12px; }
.aurora-model-copy h3 { margin: 16px 0 22px; font-size: clamp(30px, 3vw, 42px); font-weight: 700; line-height: 1.08; letter-spacing: -1.4px; }
.aurora-model-copy h3 em { color: var(--gold); }
.aurora-model-copy > p:not(.eyebrow):not(.metric-source-note) { color: #b8c4c9; font-size: 16px; line-height: 1.75; }
.model-probability { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 25px 0 13px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #d0dcd3; font-size: 15px; }
.model-probability > strong { font: 700 32px/1 Arial, Helvetica, sans-serif; color: #bed7c2; letter-spacing: -1px; }
.aurora-model-copy p.model-note { margin-top: 14px; font-size: 14px !important; }
.aurora-model-copy .text-link { margin-top: 17px; color: #d8c29b; font-size: 14px; }
.full-forecast-sources { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-top: 23px; color: #a8b5be; font-size: 12px; line-height: 1.8; }
.full-forecast-sources a { border-bottom: 1px solid #c4a06466; color: #d5c6a8; }
.full-forecast-sources p + p { margin: 0; }
.aurora-section .forecast-disclaimer { max-width: 1100px; margin-top: 18px; color: #a9b4bc; font-size: 14px; line-height: 1.75; }
.aurora-viewing-guide, .aurora-calendar-intro { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--line); }
.guide-title h3 { margin-top: 18px; font-size: clamp(30px, 3vw, 40px); font-weight: 700; line-height: 1.12; letter-spacing: -1.3px; }
.guide-title h3 em { color: var(--gold); }
.guide-copy p { color: #b7c1c9; font-size: 16px; line-height: 1.8; }
.guide-copy p + p { margin-top: 20px; }
.aurora-calendar-intro { margin-top: 44px; padding-top: 38px; }
.aurora-calendar-intro h3 { margin-top: 16px; font-size: 38px; font-weight: 700; line-height: 1.1; letter-spacing: -1.2px; }
.aurora-calendar-intro > p { color: #b7c1c9; font-size: 16px; line-height: 1.8; }
.aurora-calendar-intro strong { color: #e2d7c3; font-weight: 700; }
.aurora-calendar-panel .full-panel-heading h3 { margin-top: 10px; font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -.7px; }
.aurora-calendar-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #6f826f #121b1e; }
.aurora-calendar-scroll:focus-visible { outline-offset: -3px; }
#calendar-table { width: 100%; min-width: 790px; border-collapse: collapse; text-align: left; font-size: 15px; line-height: 1.6; }
#calendar-table th, #calendar-table td { padding: 18px 24px; border-bottom: 1px solid #ffffff0c; color: #bcc7ce; font-weight: 400; }
#calendar-table thead th { background: #121c20; color: #e0cba6; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
#calendar-table tbody th { color: #e2e4d9; font-weight: 700; white-space: nowrap; }
#calendar-table .season-yes { color: #a1ccaf; }
#calendar-table .outside-aurora-season td, #calendar-table .outside-aurora-season th { color: #a4b1bc; }
#calendar-table tr.current-month { background: #c4a06412; }
#calendar-table tr.current-month th, #calendar-table tr.current-month td { color: #e7d1aa; }
#calendar-table tr.current-month th:after { display: inline-block; margin-left: 9px; vertical-align: middle; color: #e7d1aa; font-size: 10px; font-weight: 700; letter-spacing: .5px; content: 'CURRENT'; }
.calendar-footnote { padding: 20px 24px; color: #a8b5bf; font-size: 13px; line-height: 1.8; }
.map-unavailable { display: flex; align-items: center; min-height: 270px; padding: 35px 24px; color: #c5d3cb; background: #10171c; font-size: 16px; line-height: 1.8; }

@media (max-width: 1200px) {
  .aurora-metric { padding: 24px; }
  .aurora-metric-grid { gap: 16px; grid-template-columns: 1fr 1.35fr 1fr; }
  .kp-metric-main { gap: 16px; }
  .kp-dial { width: 110px; height: 110px; }
  .kp-dial strong { font-size: 48px; }
  .station-reading { gap: 9px; font-size: 15px; }
  .station-reading small { display: block; }
  .station-activity { padding: 4px 7px; }
  .cloud-metric-main { gap: 12px; }
  .cloud-metric-main > svg { width: 36px; height: 36px; }
  .cloud-metric-main > strong { font-size: 50px; }
  .aurora-model-panel { gap: 30px; }
  .aurora-viewing-guide, .aurora-calendar-intro { gap: 45px; }
}
@media (max-width: 1050px) {
  .aurora-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aurora-metric-grid > .aurora-metric:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .aurora-metric-grid > .aurora-metric:nth-child(3) { grid-column: 2; grid-row: 1; }
  .station-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; gap: 24px; margin: 26px 0 20px; }
  .station-reading { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 15px; font-size: 17px; }
  .station-reading small { display: inline; }
  .station-activity { grid-column: 1 / -1; width: fit-content; padding: 4px 10px; }
  .solar-wind-grid { gap: 22px; }
  .solar-wind-grid > div + div { padding-left: 22px; }
  .solar-reading > strong { font-size: 43px; }
  .full-forecast-sources { display: block; }
  .full-forecast-sources p + p { margin-top: 7px; }
}
@media (max-width: 780px) {
  .aurora-status-banner { padding: 25px; }
  .aurora-status-banner h3 { font-size: 21px; }
  .status-data-line { gap: 10px 18px; }
  .status-data-line > span + span { padding-left: 18px; }
  .full-panel-heading { padding: 23px; }
  .full-kp-layout { padding: 30px 22px 0; gap: 10px; }
  .full-chart-footer { padding: 18px 23px 0; }
  .chart-guidance { padding: 15px 23px 23px; }
  .solar-wind-grid { grid-template-columns: 1fr; padding: 0 24px; gap: 0; }
  .solar-wind-grid > div { padding: 26px 0; }
  .solar-wind-grid > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .solar-reading { margin: 14px 0 11px; }
  .solar-reading > strong { font-size: 49px; }
  .solar-wind-grid .metric-caption { font-size: 15px; }
  .aurora-model-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px; }
  .full-aurora-map { width: 100%; max-width: 480px; margin: auto; }
  .aurora-model-copy { max-width: none; }
  .aurora-model-copy h3 { font-size: 38px; }
  .aurora-viewing-guide, .aurora-calendar-intro { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 44px; padding-top: 34px; }
  .guide-title h3 { font-size: 36px; }
  .aurora-calendar-intro h3 { font-size: 34px; }
}
@media (max-width: 600px) {
  .full-forecast-tools { align-items: flex-start; gap: 12px; }
  .full-forecast-tools > p { font-size: 13px; }
  .refresh-button { width: 46px; padding: 10px; }
  .refresh-button span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .full-feed-notice { padding: 17px; font-size: 14px; }
  .aurora-status-banner { padding: 22px; }
  .status-banner-heading { gap: 9px; }
  .status-banner-heading .eyebrow { font-size: 12px; letter-spacing: 1px; }
  .sky-darkness { flex-basis: 100%; margin-left: 0; font-size: 12px; }
  .aurora-status-banner h3 { font-size: 20px; letter-spacing: -.2px; }
  .status-data-line { font-size: 14px; }
  .status-data-line > span + span { padding-left: 0; border-left: 0; }
  .status-data-line > span:last-child { flex-basis: 100%; }
  .status-advice { font-size: 15px; }
  .aurora-metric-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .aurora-metric-grid > .aurora-metric:nth-child(2), .aurora-metric-grid > .aurora-metric:nth-child(3) { grid-column: auto; grid-row: auto; }
  .aurora-metric { padding: 24px; }
  .kp-metric-main, .cloud-metric-main { min-height: 110px; margin: 18px 0; }
  .kp-dial { width: 114.4px; height: 114.4px; }
  .kp-dial strong { font-size: 49px; }
  .kp-trend { font-size: 16px; }
  .cloud-metric-main > strong { font-size: 58px; }
  .cloud-metric-main > svg { width: 42px; height: 42px; }
  .station-list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .station-reading { grid-template-columns: minmax(0, 1fr) auto auto; gap: 11px; font-size: 16px; }
  .station-reading small { display: block; }
  .station-activity { grid-column: auto; width: auto; padding: 4px 8px; }
  .full-panel-heading { padding: 21px; gap: 11px; }
  .chart-zone-note { font-size: 12px; }
  .full-kp-layout { padding: 30px 17px 0; gap: 9px; }
  .full-chart-footer { padding: 18px 21px 0; }
  .full-chart-footer > p { font-size: 13px; }
  .chart-guidance { padding: 15px 21px 22px; font-size: 13px; }
  .solar-wind-grid { padding: 0 22px; }
  .aurora-model-panel { padding: 22px; }
  .aurora-model-copy h3 { font-size: 34px; letter-spacing: -1px; }
  .aurora-model-copy > p:not(.eyebrow):not(.metric-source-note) { font-size: 15px; }
  .full-aurora-map > span { padding: 12px; font-size: 12px; }
  .model-probability { font-size: 14px; }
  .aurora-section .forecast-disclaimer { font-size: 13px; }
  .guide-title h3 { font-size: 32px; letter-spacing: -1px; }
  .guide-copy p, .aurora-calendar-intro > p { font-size: 15px; }
  .aurora-calendar-intro h3 { font-size: 32px; }
  .aurora-calendar-panel .full-panel-heading h3 { font-size: 26px; }
  #calendar-table th, #calendar-table td { padding: 17px 21px; }
  .calendar-footnote { padding: 18px 21px; font-size: 12px; }
}
@media (max-width: 360px) {
  .aurora-status-banner, .aurora-metric, .aurora-model-panel { padding: 19px; }
  .status-banner-heading .eyebrow { letter-spacing: .7px; }
  .station-reading { grid-template-columns: minmax(0, 1fr) auto; }
  .station-reading small { display: inline; }
  .station-activity { grid-column: 1 / -1; width: fit-content; }
  .aurora-model-copy h3, .guide-title h3 { font-size: 29px; }
  .full-panel-heading { padding: 19px; }
  .model-probability { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .kp-point-bar { transition: none; } }
