/* The aurora pages: the verdict card, the polar disc, the hour strip, the map.
   Tokens come from site.css; aurora green is the one colour this sheet adds,
   and it is spent only on the aurora itself and on the "go" state. */
.aurora { --aurora: #39ff9b; --aurora-2: #0bd47a; --aurora-dim: rgba(57, 255, 155, 0.16); }
.aurora-intro { max-width: 52rem; margin-bottom: 1.2rem; }
.aurora-intro .eyebrow { font-family: var(--data); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.aurora-intro h1 { margin: 0.35rem 0 0.6rem; font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.1; text-wrap: balance; }
.aurora-intro .lede { max-width: 62ch; }

/* pin controls */
.aurora-pin { display: flex; flex-wrap: wrap; gap: 0.6rem 0.8rem; align-items: center; margin: 1rem 0 1.2rem; }
.aurora-pin [data-coords] { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.aurora-pin input[type="text"] { inline-size: 8.5rem; padding: 0.55rem 0.6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-family: var(--data); font-size: 0.95rem; }
.aurora-pin input:focus-visible, .aurora-pin button:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.aurora-pin button { min-block-size: 2.5rem; padding: 0.45rem 0.9rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-raised); color: var(--ink); font: inherit; cursor: pointer; }
.aurora-pin button[data-locate] { border-color: var(--accent); color: var(--accent); }
.aurora-pin button:hover { border-color: var(--star); }
.aurora-pin-label { font-size: 0.9rem; color: var(--muted); }
.aurora-pin-label b { color: var(--ink); font-weight: 500; }
.aurora-pin-label[data-example="true"]::before { content: "Example pin · "; color: var(--warn); }

/* the verdict card */
.aurora-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.2rem; }
.aurora-verdict { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.6rem; margin-bottom: 1.2rem; }
@media (min-width: 58rem) { .aurora-verdict.has-disc { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } .aurora-verdict.aurora-hero.has-disc { grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); } }
.aurora-word { margin: 0; font-family: ui-serif, Georgia, serif; font-size: clamp(1.6rem, 3.6vw, 2.2rem); line-height: 1.1; color: var(--aurora); letter-spacing: -0.01em; }
.aurora-word[data-key="no"] { color: var(--ink); }
.aurora-word[data-key="unknown"] { color: var(--muted); }
.aurora-word[data-key="faint"] { color: var(--warn); }
.aurora-when { margin: 0.3rem 0 0; font-size: 0.92rem; color: var(--muted); }
.aurora-reason { margin: 0.6rem 0 0; color: var(--ink); max-width: 60ch; }
.aurora-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.55rem; margin: 0.9rem 0 0; }
.aurora-fact { background: var(--surface-raised); border-left: 2px solid var(--line); padding: 0.5rem 0.65rem; min-width: 0; }
.aurora-fact b { display: block; font-family: var(--data); font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.aurora-fact span { display: block; font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.aurora-fact[data-on="true"] { border-left-color: var(--aurora); }
.aurora-fact[data-on="false"] { opacity: 0.85; }

/* the hour strip */
.aurora-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin-top: 0.9rem; }
.aurora-strip button { display: block; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; min-width: 0; }
.aurora-strip button:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; border-radius: 3px; }
.aurora-strip .rows { display: grid; grid-template-rows: repeat(4, 7px); gap: 2px; }
.aurora-strip .rows i { display: block; border-radius: 1px; background: var(--line); }
.aurora-strip .rows i[data-v="1"] { background: var(--aurora-2); }
.aurora-strip .rows i[data-v="h"] { background: color-mix(in srgb, var(--aurora-2) 45%, var(--line)); }
.aurora-strip .rows i[data-v="?"] { background: repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 4px); }
.aurora-strip .t { font-family: var(--data); font-size: 0.62rem; color: var(--muted); text-align: center; margin-top: 3px; white-space: nowrap; overflow: hidden; }
.aurora-strip button:nth-child(odd) .t { visibility: hidden; }
@media (min-width: 58rem) { .aurora-strip button:nth-child(odd) .t { visibility: visible; } }
.aurora-strip button[aria-pressed="true"] .t { color: var(--ink); }
.aurora-strip button[data-window="true"] .t { color: var(--aurora); }
@media (max-width: 40rem) { .aurora-strip .t { font-size: 0.55rem; } }
.aurora-legend { margin: 0.4rem 0 0; font-family: var(--data); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.02em; }
.aurora-hour { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ink); min-block-size: 1.3em; }
.aurora-look, .aurora-next { margin: 0.7rem 0 0; font-size: 0.95rem; }
.aurora-look b, .aurora-next b { color: var(--ink); }
.aurora-status { margin: 0.7rem 0 0; font-family: var(--data); font-size: 0.74rem; color: var(--muted); }
.aurora-status[data-tone="warn"] { color: var(--warn); }

/* the disc */
.aurora-disc { position: relative; inline-size: 100%; max-inline-size: 300px; aspect-ratio: 1; margin: 0 auto; }
.aurora-disc canvas { inline-size: 100%; block-size: 100%; display: block; border-radius: 50%; background: var(--bg-deep); }
.aurora-disc-note { margin: 0.4rem 0 0; font-family: var(--data); font-size: 0.68rem; color: var(--muted); text-align: center; }
.aurora-hero .aurora-disc { max-inline-size: 440px; }

/* two columns of cards */
.aurora-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.aurora-card h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.aurora-kv { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0; font-size: 0.92rem; }
.aurora-kv dt { color: var(--muted); }
.aurora-kv dd { margin: 0; font-family: var(--data); font-variant-numeric: tabular-nums; }
.aurora-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; }
.aurora-chip { font-family: var(--data); font-size: 0.74rem; padding: 0.2rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.aurora-chip[data-tone="storm"] { border-color: var(--danger); color: var(--danger); }
.aurora-chip[data-tone="go"] { border-color: var(--aurora); color: var(--aurora); }
.aurora-chip[data-tone="warn"] { border-color: var(--warn); color: var(--warn); }
.aurora-quote { margin: 0.7rem 0 0; padding-left: 0.8rem; border-left: 2px solid var(--accent); font-size: 0.9rem; color: var(--ink); }
.aurora-quote small { display: block; color: var(--muted); margin-top: 0.2rem; font-family: var(--data); font-size: 0.7rem; }

/* 3-day and 27-day strips */
.aurora-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.7rem; }
.aurora-day { background: var(--surface-raised); padding: 0.5rem 0.6rem; border-radius: 6px; }
.aurora-day b { display: block; font-family: var(--data); font-size: 1.1rem; font-weight: 500; }
.aurora-day span { font-size: 0.78rem; color: var(--muted); }
.aurora-day[data-on="true"] { box-shadow: inset 0 0 0 1px var(--aurora-2); }
.aurora-outlook { display: grid; grid-template-columns: repeat(27, minmax(0, 1fr)); gap: 1px; margin-top: 0.7rem; align-items: end; }
.aurora-outlook i { display: block; block-size: calc(6px + var(--kp) * 5px); background: var(--line); border-radius: 1px 1px 0 0; }
.aurora-outlook i[data-on="true"] { background: var(--aurora-2); }
.aurora-outlook i[data-storm="true"] { background: var(--warn); }
.aurora-outlook-axis { display: flex; justify-content: space-between; font-family: var(--data); font-size: 0.66rem; color: var(--muted); margin-top: 0.2rem; }

/* the map */
.aurora-map { position: relative; block-size: clamp(320px, 55vh, 560px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-deep); margin-bottom: 0.5rem; }
.aurora-map .leaflet-container { block-size: 100%; background: var(--bg-deep); font-family: var(--ui); }
.aurora-map-note { margin: 0 0 1.2rem; font-family: var(--data); font-size: 0.72rem; color: var(--muted); }
.aurora-map-zoom { position: absolute; top: 10px; left: 10px; z-index: 1000; display: grid; gap: 4px; }
.aurora-map-zoom button { inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.aurora-map-zoom button:hover { border-color: var(--star); }
.aurora-map-zoom button:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.aurora-viewline { stroke: var(--aurora); stroke-dasharray: 5 6; fill: none; opacity: 0.8; }

/* camera + bridge */
.aurora-camera dl { margin-top: 0.4rem; }
.aurora-bridge { margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--hairline); font-size: 0.92rem; }
.aurora-bridge a { color: var(--accent); }
.aurora-warn { color: var(--warn); }

/* explainers */
.aurora-explain { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem 1.6rem; margin: 1.6rem 0; }
.aurora-explain h3 { margin: 0 0 0.3rem; font-size: 0.98rem; }
.aurora-explain p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); max-width: 48ch; }
.aurora-explain p b { color: var(--ink); font-weight: 500; font-family: var(--data); }

/* places */
.aurora-places { margin: 1.6rem 0; }
.aurora-places ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.35rem 1rem; padding: 0; margin: 0.6rem 0 0; list-style: none; }
.aurora-places a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.aurora-places a:hover { border-color: var(--accent); color: var(--accent); }
.aurora-sites { margin: 0.8rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.aurora-sites li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.8rem; align-items: baseline; padding: 0.55rem 0.7rem; background: var(--surface-raised); border-radius: 6px; }
.aurora-sites li b { font-weight: 500; }
.aurora-sites li small { grid-column: 1 / -1; color: var(--muted); font-size: 0.8rem; }
.aurora-sites li .sqm { font-family: var(--data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aurora-sites li a { color: var(--accent); font-size: 0.85rem; }
.aurora-about { max-width: 66ch; font-size: 1rem; line-height: 1.6; }

/* Kp table on /kp-index/ — wide tables scroll in their own box, the page never does */
.aurora-scroll { overflow-x: auto; max-inline-size: 100%; -webkit-overflow-scrolling: touch; }
.aurora-kptable { border-collapse: collapse; inline-size: 100%; font-size: 0.9rem; margin-top: 0.6rem; }
.aurora-kptable th, .aurora-kptable td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--hairline); font-variant-numeric: tabular-nums; }
.aurora-kptable th { font-family: var(--data); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.aurora-kptable tr[data-you="true"] td { color: var(--aurora); }
.aurora-kptable tr[data-you="true"] td:first-child::after { content: " ← you"; font-family: var(--data); font-size: 0.72rem; }
.aurora-history { display: grid; grid-template-columns: repeat(56, minmax(0, 1fr)); gap: 1px; align-items: end; margin-top: 0.7rem; }
.aurora-history i { display: block; block-size: calc(4px + var(--kp) * 6px); background: var(--line); }
.aurora-history i[data-g="true"] { background: var(--warn); }

@media (prefers-reduced-motion: no-preference) { .aurora-word { transition: color 0.3s; } }