:root {
  --bg: #02040a;
  --glass: rgba(10, 16, 30, 0.72);
  --line: rgba(140, 180, 255, 0.14);
  --text: #e8eef8;
  --muted: #8b9ab3;
  --accent: #5aa9ff;
  --radius: 14px;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
/* Author display rules (e.g. .keys-modal { display: flex }) would otherwise override [hidden]. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: rgba(90, 169, 255, 0.38); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.125em; }
/* Absolute (not fixed) so #globe doesn't form a stacking context: its hover tooltips can then
   rise above the side rail and panel. */
#globe { position: absolute; inset: 0; }
#globe .float-tooltip-kap { z-index: 30; }
/* globe.gl's HTML markers (Coming up flags, the ISS) get depth-sorted z-indexes of 1…N. Contain
   them in their own stacking context, or the higher ones draw over the rail and panel. */
#globe .scene-container > div { z-index: 0; }

.glass {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

/* Brand and the Earth/Space switch share one row, so the switch never slides under the brand. */
.topbar { position: fixed; top: 16px; left: 16px; z-index: 6; display: flex; align-items: flex-start; gap: 12px; }
.brand { padding: 10px 14px; min-width: 0; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo h1 { margin: 0; font: 700 18px/1 var(--display); letter-spacing: 0.02em; white-space: nowrap; }
.meta { color: var(--muted); font-size: 12px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Static brand dot: the data refreshes twice a day, so it shouldn't pretend to be live. */
.pulse { width: 10px; height: 10px; border-radius: 50%; background: #ff4d5e; display: inline-block; flex: none; }
.loading .pulse { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.7); animation: pulse 1.8s infinite; }
.pulse.big { width: 14px; height: 14px; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(255, 77, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0); } }

/* Timeline */
.timeline { position: fixed; bottom: 16px; left: calc((100vw - 432px) / 2); transform: translateX(-50%); display: flex; align-items: stretch; gap: 6px; padding: 6px; z-index: 6; max-width: calc(100vw - 464px); }
.play { width: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(90, 169, 255, 0.14); font-size: 14px; flex: none; }
.play .ic { fill: currentColor; stroke: none; }
.play:hover { background: rgba(90, 169, 255, 0.28); }
.play.on { background: var(--accent); color: #041022; }
.keys-btn { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 600 13px/1 var(--display); color: var(--muted); border: 1px solid var(--line); background: rgba(255,255,255,.04); flex: none; }
#settings-btn { margin-left: 2px; }
#settings-btn .ic { font-size: 14px; }
.keys-btn:hover { color: var(--text); border-color: rgba(90,169,255,.55); }
.keys-modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 4, 10, 0.55); }
.keys-card { width: min(440px, 100%); padding: 20px 22px 18px; }
.keys-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.keys-top h2 { margin: 0; font: 700 20px/1.2 var(--display); }
.keys-list { margin: 0; display: grid; gap: 8px; }
.keys-list div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.keys-list dt { white-space: nowrap; }
.keys-list dd { margin: 0; color: #cdd6e6; font-size: 13px; }
kbd { display: inline-block; min-width: 24px; padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(140,180,255,.3); border-bottom-width: 2px; background: rgba(255,255,255,.06); font: 600 12px/1.2 var(--font); text-align: center; color: var(--text); }
.keys-card h3 { margin: 18px 0 8px; font: 600 11px/1 var(--font); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.keys-tips { margin: 0; padding-left: 18px; color: #b6c2d6; font-size: 13px; line-height: 1.7; }

/* Settings */
.settings-card { width: min(520px, 100%); max-height: min(88vh, 720px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }
.settings-label { font-size: 13px; color: #cdd6e6; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(255,255,255,.05); border: 1px solid var(--line); flex: none; }
.seg button { padding: 6px 14px; border-radius: 99px; font: 600 12px/1 var(--display); color: var(--muted); white-space: nowrap; }
.seg button.on { background: rgba(90,169,255,.24); color: var(--text); box-shadow: inset 0 0 0 1px rgba(90,169,255,.55); }
.settings-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cdd6e6; margin: 14px 0 4px; cursor: pointer; }
.settings-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; }
.chip-grid .chip { border-radius: 8px; }
.settings-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.linklike { color: var(--accent); font-size: 13px; font-weight: 600; }
.linklike:hover { text-decoration: underline; }
.settings-note { color: var(--muted); font-size: 11px; }
@media (max-width: 640px) {
  .settings-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.days { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day { position: relative; min-width: 56px; padding: 6px 8px 10px; border-radius: 10px; text-align: center; color: var(--muted); flex: none; }
.day b { display: block; font: 600 15px/1.1 var(--display); color: var(--text); }
.day small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.day .bar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.day .bar i { display: block; height: 100%; background: var(--accent); opacity: 0.7; }
.day:hover { background: rgba(255, 255, 255, 0.06); }
.day.on { background: rgba(90, 169, 255, 0.18); color: var(--text); box-shadow: inset 0 0 0 1px rgba(90, 169, 255, 0.5); }

/* Left rail */
/* The rail stops above the bottom timeline and scrolls if a short window can't fit it. */
.rail { position: fixed; left: 16px; top: 96px; display: flex; flex-direction: column; gap: 10px; z-index: 5; max-height: calc(100vh - 196px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.rail-box { padding: 6px 8px 8px; display: flex; flex-direction: column; flex: none; }
.rail-toggle { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 6px; font: 600 11px/1 var(--font); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); text-align: left; }
.rail-toggle:hover { color: var(--text); }
.rail-toggle .chev { margin-left: auto; font-size: 14px; transition: transform 0.2s; }
.rail-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.rt-state { color: var(--accent); text-transform: none; letter-spacing: 0; font-weight: 600; }
.rail-list { display: flex; flex-direction: column; gap: 2px; }
.rail-list:not([hidden]) { margin-top: 2px; }
.rail-all { margin: 2px 0 4px; padding: 5px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--accent); text-align: left; }
.rail-all:hover { background: rgba(90, 169, 255, 0.12); }
.chip { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; text-align: left; font-size: 13px; white-space: nowrap; }
.chip:hover { background: rgba(255, 255, 255, 0.06); }
.chip .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.chip .n { margin-left: auto; padding-left: 10px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
/* Off reads as dimmed text and a hollow swatch, not a faded button, so it keeps 6:1 contrast. */
.chip.off { color: var(--muted); }
.chip.off .sw { background: transparent; outline: 1.5px solid var(--c); outline-offset: -1.5px; }
.toggle .sw { border-radius: 50%; }

/* Panel */
.panel { position: fixed; top: 16px; right: 16px; bottom: 16px; width: 400px; z-index: 7; display: flex; flex-direction: column; overflow: hidden; }
.grip { display: none; }
.search { position: relative; padding: 14px 18px 2px; flex: none; }
.search input { width: 100%; padding: 10px 34px 10px 36px; border-radius: 10px; border: 1px solid var(--line); color: var(--text); caret-color: var(--accent); font: 14px var(--font); outline: none; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9ab3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 11px center / 16px; }
.search input:focus { border-color: rgba(90,169,255,.6); background-color: rgba(255,255,255,.08); }
.search input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(90,169,255,.45); }
.search input::placeholder { color: var(--muted); }
.search kbd { position: absolute; right: 28px; top: 50%; transform: translateY(-35%); font: 11px var(--font); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; pointer-events: none; }
.search input:focus + kbd, .search input:not(:placeholder-shown) + kbd { display: none; }
.search-dim .timeline { opacity: 0.45; }
.panel-body { overflow-y: auto; padding: 18px 18px 24px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.panel-body:focus-visible { outline-offset: -2px; }
.p-head { margin-bottom: 14px; }
.p-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.p-head h2 { margin: 2px 0 4px; font: 700 26px/1.15 var(--display); }
.p-head .sub { color: var(--muted); font-size: 13px; }
.p-head .sub b { color: var(--text); font-weight: 600; }
.back, .close { position: relative; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.05); }
.close .ic { font-size: 14px; }
.back:hover, .close:hover { color: var(--text); background: rgba(255,255,255,.1); }
.panel h3 { margin: 22px 0 10px; font: 600 11px/1 var(--font); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.panel h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.story { position: relative; padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255,255,255,.05); overflow: hidden; }
.story:hover { background: rgba(255, 255, 255, 0.06); }
.story:focus-within { border-color: rgba(90,169,255,.35); }
.story.focus { box-shadow: inset 0 0 0 1px var(--c); animation: storyFlash 1.6s ease-out; }
@keyframes storyFlash { 0%, 30% { background: rgba(255, 255, 255, 0.14); } }
.arc-tt .tag { display: block; color: var(--c); margin-bottom: 2px; }
.arc-tt b { display: block; margin-bottom: 3px; }
.story .thumb { float: right; width: 84px; height: 60px; object-fit: cover; border-radius: 8px; margin: 2px 0 6px 10px; background: #111; }
.s-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--muted); margin-bottom: 4px; flex-wrap: wrap; }
.tag { color: var(--c); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
.story .tag::before, .launch .tag::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
.major { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 99px; background: rgba(255, 77, 94, 0.18); color: #ff8a95; }
.new { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 99px; background: rgba(61, 220, 132, 0.18); color: #7ff0b0; }
.since { margin-top: 8px; color: var(--muted); font-size: 12px; }
.since .new { margin-right: 4px; }
.hl { display: block; font: 600 15px/1.3 var(--display); text-decoration: none; }
.hl:hover { text-decoration: underline; text-decoration-color: var(--c); }
.story p { margin: 6px 0 0; color: #b6c2d6; font-size: 13px; }
.srcs { clear: both; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; font-size: 11px; }
.srcs a, .srcs span { padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--muted); text-decoration: none; }
.srcs a:hover { color: var(--text); background: rgba(255,255,255,.12); }
.srcs .more { background: none; }
.also { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.also button, .place-chip { font-size: 11px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.also button:hover, .place-chip:hover { color: var(--text); border-color: rgba(90,169,255,.5); }

.hotspots { display: flex; flex-wrap: wrap; gap: 6px; }
.place-chip { font-size: 12px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 6px; }
.place-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.states button { padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.04); text-align: left; font-size: 12px; display: flex; justify-content: space-between; }
.states button:hover { background: rgba(90,169,255,.16); }
.states button.zero { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.states b { font-variant-numeric: tabular-nums; color: var(--accent); }
.list-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; text-decoration: none; }
.list-row .mag { font: 700 14px/1.2 var(--display); min-width: 34px; color: #ffc850; font-variant-numeric: tabular-nums; }
.list-row small { color: var(--muted); display: block; }
.day-head { font: 600 13px/1 var(--display); margin: 18px 0 8px; color: var(--muted); }
.empty { color: var(--muted); padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; }
.empty .linklike { display: inline; }
.loading-row { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 14px 2px; font-size: 13px; }
.loading-row::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(90,169,255,.25); border-top-color: var(--accent); animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.note-line { margin: 0 0 12px; padding: 8px 10px; border-radius: 10px; background: rgba(90,169,255,.08); color: #cdd6e6; font-size: 12px; }
.note-line .linklike { font-size: 12px; }
.retry { margin-left: 10px; padding: 6px 12px; border-radius: 99px; background: rgba(90,169,255,.18); color: var(--text); font: 600 13px/1 var(--font); }
.retry:hover { background: rgba(90,169,255,.32); }

/* How to read the globe */
.legend { margin: 12px 0 0; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05); }
.legend summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12px; font-weight: 600; color: #cdd6e6; }
.legend summary::-webkit-details-marker { display: none; }
.legend summary .chev { margin-left: auto; font-size: 14px; color: var(--muted); transform: rotate(-90deg); transition: transform 0.2s; }
.legend[open] summary .chev { transform: none; }
.legend ul { margin: 0; padding: 2px 12px 12px; list-style: none; display: grid; gap: 8px; font-size: 12px; color: #b6c2d6; }
.legend li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; }
.lg { width: 22px; height: 14px; display: block; }
.lg-fill { border-radius: 3px; background: linear-gradient(90deg, rgba(255,77,94,.15), rgba(255,77,94,.55)); }
.lg-ring { width: 14px; border-radius: 50%; margin: 0 4px; box-shadow: 0 0 0 2px rgba(255,77,94,.8), 0 0 0 5px rgba(255,77,94,.25); height: 14px; }
.lg-quake { width: 14px; border-radius: 50%; margin: 0 4px; box-shadow: 0 0 0 2px rgba(255,200,80,.85); height: 14px; }
.lg-arc { height: 12px; border: 2px solid #5aa9ff; border-bottom: 0; border-radius: 12px 12px 0 0; }
.lg-pin { width: 4px; height: 16px; margin: 0 9px; border-radius: 2px; background: linear-gradient(#ffd166, rgba(255,209,102,.3)); }
.lg-flag { width: auto; height: auto; font-size: 13px; text-align: center; }

/* Every country A to Z: the keyboard and screen-reader route to any place on the globe. */
.az summary { color: var(--accent); }
.az-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 8px; margin-top: 8px; }
.az-grid button { display: flex; justify-content: space-between; gap: 6px; padding: 5px 6px; border-radius: 6px; text-align: left; font-size: 13px; color: #cdd6e6; min-width: 0; }
.az-grid button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-grid button:hover { background: rgba(90,169,255,.14); color: var(--text); }
.az-grid b { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.az-grid .zero { color: var(--muted); }
.states-box summary { cursor: pointer; list-style: none; color: var(--accent); font-size: 12px; font-weight: 600; padding: 2px 0 8px; }
.states-box summary::-webkit-details-marker { display: none; }
.states-box[open] summary { color: var(--muted); }
.foot { margin-top: 24px; color: var(--muted); font-size: 11px; line-height: 1.6; }

/* Globe overlays */
.tt { font: 12px/1.35 var(--font); background: rgba(6, 10, 20, 0.92); border: 1px solid var(--line); padding: 6px 9px; border-radius: 8px; color: var(--text); max-width: 260px; }
.tt b { font-family: var(--display); font-size: 13px; }
.tt span { display: block; color: var(--muted); }
.us-nav { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 14px; font: 600 13px/1 var(--display); white-space: nowrap; text-align: left; flex: none; }
.us-nav b { margin-left: auto; padding-left: 10px; color: var(--accent); font-variant-numeric: tabular-nums; }
.us-nav:hover { background: rgba(90, 169, 255, 0.18); }
.us-nav.on { background: rgba(90, 169, 255, 0.24); box-shadow: inset 0 0 0 1px rgba(90, 169, 255, 0.6); }
.space-mode .us-nav { display: none; }

/* Mode switch */
.modes { display: flex; gap: 2px; padding: 4px; border-radius: 99px; flex: none; }
.modes button { padding: 8px 16px; border-radius: 99px; font: 600 13px/1 var(--display); color: var(--muted); white-space: nowrap; }
.modes button:hover { color: var(--text); }
.modes button.on { background: rgba(90,169,255,.2); color: var(--text); box-shadow: inset 0 0 0 1px rgba(90,169,255,.5); }
.modes button[data-mode="space"].on { background: rgba(199,125,255,.24); box-shadow: inset 0 0 0 1px rgba(199,125,255,.65); }

/* Space mode */
.space-mode .cats-box { display: none; }
.space-mode .panel { border-color: rgba(199,125,255,.28); }
.space-mode .day.on { background: rgba(199,125,255,.2); box-shadow: inset 0 0 0 1px rgba(199,125,255,.55); }
.space-mode .day .bar i { background: #c77dff; }
.space-head h2 { color: #f1e6ff; }
.iss-marker { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.iss-core { width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(199,125,255,.55), 0 0 18px 6px rgba(199,125,255,.7); animation: issPulse 2s infinite; }
.iss-tag { font: 700 11px/1 var(--display); letter-spacing: .08em; padding: 4px 8px; border-radius: 99px; background: rgba(20,10,40,.85); border: 1px solid rgba(199,125,255,.6); color: #eadcff; }
@keyframes issPulse { 50% { box-shadow: 0 0 0 7px rgba(199,125,255,.12), 0 0 28px 10px rgba(199,125,255,.5); } }

.apod { margin: 0 0 6px; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(199,125,255,.22); }
.apod img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0b0b18; }
.apod figcaption { padding: 12px 14px 14px; }
.apod b { display: block; font: 600 17px/1.3 var(--display); margin: 4px 0 6px; }
.apod details { color: #b6c2d6; font-size: 13px; }
.apod summary { cursor: pointer; list-style: none; }
.apod summary::-webkit-details-marker { display: none; }
.apod summary u { color: #d7b8ff; text-decoration: none; }
.apod details[open] summary { display: none; }
.apod small { display: block; color: var(--muted); font-size: 11px; margin-top: 8px; }
.apod-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 6px 0 2px; }
.apod-strip button { padding: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 1; opacity: .65; }
.apod-strip button:hover { opacity: 1; box-shadow: 0 0 0 1px rgba(199,125,255,.7); }
.apod-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

.iss-card { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); }
.tele { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; }
.tele b { display: block; font: 600 14px/1.25 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tele small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.follow { margin-top: 10px; width: 100%; padding: 8px; border-radius: 9px; background: rgba(199,125,255,.16); font-weight: 600; font-size: 13px; }
.follow:hover, .follow.on { background: rgba(199,125,255,.34); }
.crew { margin-top: 12px; font-size: 13px; color: #cdd6e6; }
.crew b { font-family: var(--display); color: #eadcff; font-size: 15px; }
.crew-names { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.crew-names span { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.06); }
.crew-names i { color: var(--muted); font-style: normal; }

/* At-a-glance tiles: the next launch countdown, people in space, aurora level. */
.now-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 14px; }
.now-tiles .tile { padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); text-align: left; min-width: 0; }
.now-tiles .wide { grid-column: span 2; background: linear-gradient(135deg, rgba(199,125,255,.2), rgba(90,169,255,.07)); border-color: rgba(199,125,255,.38); }
button.tile:hover { border-color: rgba(199,125,255,.65); }
.now-tiles small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-tiles b { display: block; font: 700 16px/1.2 var(--display); font-variant-numeric: tabular-nums; margin: 3px 0 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-tiles .wide b { color: #f1e6ff; }
.now-tiles span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Section jump links, pinned to the top of the panel while it scrolls. The panel's own top padding
   moves onto the header so the pinned nav sits flush and nothing scrolls through the gap above it. */
.space-mode .panel-body { padding-top: 0; }
.space-mode .p-head { padding-top: 18px; }
/* Opaque, not a fade: the panel is translucent, so anything less lets scrolled text show through the chips. */
.sec-nav { position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; margin: 0 -18px 12px; padding: 8px 18px 9px; overflow-x: auto; scrollbar-width: none;
  background: #0a1018; border-bottom: 1px solid var(--line); }
.sec-nav::-webkit-scrollbar { display: none; }
.sec-nav button { flex: none; padding: 5px 10px; border-radius: 99px; font-size: 12px; color: var(--muted); border: 1px solid transparent; }
.sec-nav button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.sec-nav button.on { color: var(--text); background: rgba(199,125,255,.18); border-color: rgba(199,125,255,.45); }
.panel h3[id^="sec-"], #sec-disc { scroll-margin-top: 46px; }

.up-head { font: 600 11px/1 var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 8px; }
.space-sub { margin-top: 2px; }
.up-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 14px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.up-card { flex: none; width: 168px; text-align: left; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(199,125,255,.22); }
.up-card:hover { background: rgba(199,125,255,.1); border-color: rgba(199,125,255,.5); }
.up-card .cd { display: block; font: 700 14px/1.2 var(--display); font-variant-numeric: tabular-nums; color: #e6d2ff; }
.up-card b { display: block; font: 600 13px/1.3 var(--display); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-card small { display: block; font-size: 11px; color: #b6c2d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-card .dim { color: var(--muted); margin-top: 2px; }
@media (max-width: 640px) {
  .now-tiles { grid-template-columns: repeat(2, 1fr); }
  .sec-nav { margin: 0 -18px 10px; }
}
.launch { position: relative; display: flex; gap: 10px; width: 100%; text-align: left; padding: 10px; margin-bottom: 8px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05); overflow: hidden; }
.launch:hover { background: rgba(199,125,255,.09); }
.launch img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: none; }
.l-body { min-width: 0; }
.launch .tag { color: var(--c); }
.launch b { display: block; font: 600 14px/1.3 var(--display); }
.launch small { color: var(--muted); font-size: 12px; }
.launch p { margin: 4px 0 0; font-size: 12px; color: #b6c2d6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag.neo { color: #d7b8ff; text-align: center; }
.mag small { display: block; font: 500 11px var(--font); color: var(--muted); }

.sun { padding: 12px; border-radius: 14px; background: radial-gradient(circle at 0 0, rgba(255,170,60,.18), transparent 65%), rgba(255,255,255,.03); border: 1px solid rgba(255,170,60,.22); }
.flare-top { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.flare-top small { display: block; color: var(--muted); font-size: 11px; }
.flare-cls { font: 700 20px/1 var(--display); padding: 8px 10px; border-radius: 10px; background: rgba(255,200,80,.14); color: #ffc850; }
.flare-cls.cls-M { background: rgba(255,154,61,.2); color: #ffa24d; }
.flare-cls.cls-X { background: rgba(255,77,94,.22); color: #ff6b78; box-shadow: inset 0 0 0 1px rgba(255,77,94,.55); }
.flare-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 2px; }
.flare-chips span { font-size: 11px; padding: 2px 7px; border-radius: 99px; background: rgba(255,154,61,.14); color: #ffb870; }
.sun .sub { margin-top: 8px; }

.space-teaser { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px; margin-top: 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(199,125,255,.18), rgba(20,20,60,.3)); border: 1px solid rgba(199,125,255,.38); }
.space-teaser:hover { border-color: rgba(199,125,255,.7); background: linear-gradient(135deg, rgba(199,125,255,.26), rgba(20,20,60,.36)); }
.space-teaser img { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; flex: none; }
.space-teaser > span { min-width: 0; }
.space-teaser b { display: block; font: 600 14px/1.3 var(--display); margin: 3px 0 2px; }
.space-teaser small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-teaser .st-kick { color: #d7b8ff; font-size: 12px; font-weight: 600; }

.loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 16px; text-align: center; font: 600 16px var(--display); color: var(--muted); z-index: 20; background: var(--bg); transition: opacity 0.6s; }
.loading.done { opacity: 0; pointer-events: none; }

/* Narrower laptops: keep the switch beside the brand by dropping its words. */
@media (max-width: 1100px) {
  .modes .ml { display: none; }
  .modes button { padding: 8px 12px; font-size: 15px; }
}
@media (max-width: 900px) {
  .panel { width: 340px; }
  .topbar { right: 372px; }
  .rail { top: 168px; max-height: calc(100vh - 184px); }
  .timeline { top: 100px; bottom: auto; left: 16px; right: 372px; transform: none; max-width: none; }
}
@media (max-width: 640px) {
  .topbar { top: 10px; left: 10px; right: 10px; justify-content: space-between; }
  .brand { padding: 8px 10px 8px 12px; }
  .meta { display: none; }
  .modes button { padding: 8px 14px; }
  .timeline { top: 64px; bottom: auto; left: 10px; right: 10px; max-width: none; gap: 4px; padding: 4px; }
  /* Fit all seven days plus Week on one row instead of hiding Today and Week off-screen. */
  .play { width: 34px; }
  .days { flex: 1; gap: 2px; }
  .day { flex: 1 1 0; min-width: 0; padding: 5px 0 9px; }
  .day small { font-size: 10px; letter-spacing: 0; }
  .day b { font-size: 14px; }
  .day .bar { left: 5px; right: 5px; }
  /* One row of three buttons; the lists drop down over the globe instead of scrolling sideways. */
  .rail { top: 128px; left: 10px; right: 10px; flex-direction: row; gap: 6px; max-height: none; overflow: visible; }
  .rail-box { position: relative; padding: 0; flex: 1 1 0; min-width: 0; }
  .rail .us-nav { padding: 0 12px; min-height: 44px; }
  .us-l { display: none; }
  .rail-toggle { min-height: 44px; padding: 0 12px; font-size: 12px; letter-spacing: 0.06em; }
  .rt-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-list { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; max-height: 55vh; overflow-y: auto; padding: 6px; border-radius: var(--radius); border: 1px solid var(--line);
    background: rgba(8, 13, 24, 0.96); box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6); }
  .layers-box .rail-list { left: auto; right: 0; }
  .rail-list:not([hidden]) { margin-top: 0; }
  .chip { min-height: 44px; padding: 0 10px; font-size: 14px; }
  .chip .n { display: inline; }
  #keys-btn { display: none; }
  /* Three heights: peek, half, and a full reading view. */
  .panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 52vh; height: 52dvh; border-radius: 18px 18px 0 0; transition: height 0.3s cubic-bezier(.2,.8,.2,1); }
  .panel.collapsed { height: 120px; }
  .panel.full { height: calc(100vh - 64px); height: calc(100dvh - 64px); z-index: 9; }
  .grip { display: block; height: 28px; flex: none; position: relative; touch-action: none; }
  .grip::after { content: ''; position: absolute; left: 50%; top: 9px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255,255,255,.25); }
  .panel-body { padding-top: 10px; }
  .search { padding: 0 16px; }
  .search kbd { display: none; }
  .az-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
/* Touch: small controls keep their look but get a 44px hit area. */
@media (pointer: coarse) {
  .keys-btn::after, .close::after, .back::after, .share::after, .pin-btn::after, .g-place::after, .up-more::after { content: ''; position: absolute; inset: -9px; }
  .keys-btn, .share, .pin-btn, .g-place, .up-more { position: relative; }
  .keys-btn { width: 30px; height: 30px; }
  .league-tabs button, .disc-chips button, .sec-nav button, .srcs a { min-height: 36px; display: inline-flex; align-items: center; }
  .az-grid button, .states button { min-height: 40px; align-items: center; }
}

/* Discoveries */
.rail .disc-nav { display: none; }
.space-mode .rail .disc-nav { display: flex; }
.disc-nav b { color: #d7b8ff; }
.disc-nav:hover { background: rgba(199,125,255,.18); }

.orb { position: relative; display: block; flex: none; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--c1), var(--c2) 48%, var(--c3) 100%);
  box-shadow: inset calc(var(--s) * -.12) calc(var(--s) * -.14) calc(var(--s) * .22) rgba(0,0,0,.55), 0 0 calc(var(--s) * .45) calc(var(--s) * -.14) var(--c2); }
.orb.giant::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-linear-gradient(172deg, transparent 0 11%, rgba(40,20,0,.16) 11% 17%, rgba(255,255,255,.08) 17% 21%); }
.orb-slot { display: grid; place-items: center; flex: none; width: 64px; }
.orbs { display: flex; align-items: center; flex: none; }
.orbs .orb + .orb { margin-left: -7px; }
.go { color: #d7b8ff; font: 600 16px/1 var(--display); flex: none; }

.disc-strip { margin: 0 0 18px; }
.disc-hero { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px;
  background: radial-gradient(120% 140% at 0 0, rgba(62,155,212,.2), transparent 60%), linear-gradient(135deg, rgba(199,125,255,.16), rgba(20,20,60,.25));
  border: 1px solid rgba(199,125,255,.35); }
.disc-hero:hover { box-shadow: 0 0 30px rgba(199,125,255,.25); }
.dh-body { min-width: 0; flex: 1; }
.disc-hero b { display: block; font: 600 15px/1.3 var(--display); margin: 3px 0 1px; }
.disc-hero small { color: var(--muted); font-size: 12px; }
.disc-feature { display: block; width: 100%; text-align: left; margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.035); font-size: 13px; color: #cdd6e6; }
.disc-feature:hover { background: rgba(255,255,255,.07); }
.disc-feature b { font-family: var(--display); color: var(--text); }
.disc-feature .eyebrow, .pl-feature .eyebrow { color: #ffd27a; }
.disc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.disc-chips button { font-size: 12px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); color: #cdd6e6; }
.disc-chips button:hover { border-color: rgba(199,125,255,.6); color: var(--text); }
.disc-chips b { color: #d7b8ff; font-variant-numeric: tabular-nums; margin-left: 2px; }
.disc-chips .zero { color: var(--muted); }

.disc-modal { position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(2,4,10,.62); animation: discFade .2s ease-out; }
@keyframes discFade { from { opacity: 0; } }
.disc-card { width: min(980px, 100%); max-height: min(92vh, 940px); display: flex; flex-direction: column; overflow: hidden; background: rgba(8,10,24,.92);
  border-color: rgba(199,125,255,.3); box-shadow: 0 24px 48px -12px rgba(0,0,0,.7); animation: discRise .28s cubic-bezier(.2,.8,.2,1); }
@keyframes discRise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.disc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px 12px; flex: none; }
.disc-top h2 { margin: 0; font: 700 28px/1.1 var(--display); color: #f1e6ff; }
.disc-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.disc-tabs { display: flex; gap: 4px; padding: 0 18px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); flex: none; }
.disc-tabs::-webkit-scrollbar { display: none; }
.disc-tabs button { flex: none; padding: 8px 12px; border-radius: 99px; font: 600 13px/1 var(--display); color: var(--muted); white-space: nowrap; }
.disc-tabs button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.disc-tabs button.on { color: var(--text); background: rgba(199,125,255,.2); box-shadow: inset 0 0 0 1px rgba(199,125,255,.55); }
.disc-tabs b { font: 500 11px var(--font); color: var(--muted); margin-left: 2px; font-variant-numeric: tabular-nums; }
.disc-body { overflow-y: auto; padding: 16px 22px 26px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.disc-body h3 { margin: 24px 0 10px; font: 600 11px/1 var(--font); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.disc-body h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.disc-intro { margin: 0 0 14px; color: #b6c2d6; font-size: 13px; max-width: 72ch; }
.note { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.disc-src { margin-top: 22px; }

.pl-feature { display: flex; gap: 16px; align-items: center; width: 100%; text-align: left; padding: 16px 18px 16px 10px; border-radius: 16px;
  background: radial-gradient(80% 140% at 0 50%, rgba(255,210,122,.1), transparent 60%), rgba(255,255,255,.035); border: 1px solid rgba(255,210,122,.25); }
.pl-feature:hover { background-color: rgba(255,255,255,.06); }
.pl-feature .orb-slot { width: 130px; }
.pl-feature b { display: block; font: 700 22px/1.2 var(--display); margin: 4px 0 2px; }
.pl-feature small { display: block; color: #b6c2d6; font-size: 13px; margin-top: 6px; max-width: 70ch; }
.pl-body { min-width: 0; }
.pl-kind { display: block; color: #d7b8ff; font-size: 12px; font-weight: 600; }
.pl-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.pl-badges i { font: 600 11px/1 var(--font); padding: 4px 7px; border-radius: 99px; background: rgba(255,255,255,.07); color: #cdd6e6; }
.planet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }
.planet { display: flex; gap: 8px; align-items: center; text-align: left; padding: 10px 12px 10px 4px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); min-width: 0; }
.planet:hover { background: rgba(199,125,255,.08); border-color: rgba(199,125,255,.3); }
.planet b { display: block; font: 600 14px/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planet small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.disc-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 10px; align-items: start; }
.disc-news .day-head { grid-column: 1 / -1; }

.pl-detail { max-width: 760px; margin: 0 auto; }
.pl-detail .back { margin-bottom: 10px; }
.pl-hero { display: flex; gap: 20px; align-items: center; }
.orb-slot.big { width: 170px; height: 160px; }
.pl-hero h2 { margin: 4px 0; font: 700 32px/1.1 var(--display); overflow-wrap: anywhere; }
.pl-hero .sub { color: var(--muted); font-size: 13px; }
.pl-blurb { font-size: 15px; line-height: 1.6; color: #dbe3f0; margin: 18px 0; }
.pl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pl-stats div { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); }
.pl-stats small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pl-stats b { display: block; font: 600 17px/1.3 var(--display); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pl-stats span { display: block; font-size: 11px; color: var(--muted); }
.size-cmp svg { display: block; width: 100%; max-width: 460px; height: auto; }
.size-cmp text { fill: var(--muted); font: 11px var(--font); }
.size-cmp text.me { fill: var(--text); font-weight: 600; }
.pl-found { color: #cdd6e6; font-size: 13px; margin: 0; }
.pl-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pl-links a { font-size: 13px; padding: 7px 12px; border-radius: 99px; text-decoration: none; background: rgba(199,125,255,.14); border: 1px solid rgba(199,125,255,.35); }
.pl-links a:hover { background: rgba(199,125,255,.28); }

.disc-toast { position: fixed; left: calc((100vw - 432px) / 2); bottom: 96px; z-index: 8; display: flex; align-items: center; gap: 2px; padding: 5px; max-width: calc(100vw - 32px);
  border-color: rgba(199,125,255,.45);
  opacity: 0; transform: translate(-50%, 12px); transition: opacity .35s, transform .35s; }
.disc-toast.in { opacity: 1; transform: translate(-50%, 0); }
.toast-main { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 10px; border-radius: 10px; text-align: left; font-size: 18px; }
.toast-main:hover { background: rgba(199,125,255,.12); }
.toast-main b { display: block; font: 600 14px/1.2 var(--display); }
.toast-main small { display: block; color: var(--muted); font-size: 12px; }
.toast-main .go { font-size: 13px; white-space: nowrap; margin-left: 6px; }
.toast-x { color: var(--muted); padding: 8px 10px; border-radius: 8px; flex: none; }
.toast-x:hover { color: var(--text); background: rgba(255,255,255,.08); }
@media (prefers-reduced-motion: reduce) {
  .disc-modal, .disc-card, .pulse, .loading .pulse, .iss-core, .story.focus { animation: none; }
  .loading-row::before { animation-duration: 2.4s; }
  .disc-toast, .panel, .loading, .rail-toggle .chev, .legend summary .chev { transition: none; }
}

@media (max-width: 900px) {
  .disc-toast { left: calc((100vw - 356px) / 2); bottom: 16px; }
}
@media (max-width: 640px) {
  .disc-toast { left: 50%; top: 176px; bottom: auto; width: calc(100vw - 20px); }
  .toast-main { flex: 1; }
  .disc-modal { padding: 0; }
  .disc-card { max-height: none; height: 100%; border-radius: 0; }
  .disc-top { padding: 14px 16px 10px; }
  .disc-top h2 { font-size: 24px; }
  .disc-tabs { padding: 0 12px 10px; }
  .disc-body { padding: 14px 16px 28px; }
  .pl-feature { padding: 14px 14px 14px 6px; gap: 8px; }
  .pl-feature .orb-slot { width: 90px; }
  .pl-feature b { font-size: 19px; }
  .planet-grid, .disc-news { grid-template-columns: 1fr; }
  .pl-hero { flex-direction: column; align-items: flex-start; gap: 4px; }
  .orb-slot.big { width: 130px; height: 130px; }
  .pl-hero h2 { font-size: 26px; }
  .pl-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Coming up: scheduled elections, finals, eclipses and meteor showers */
.up-ev { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.up-date { flex: none; width: 42px; padding: 5px 0 6px; border-radius: 10px; text-align: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); box-shadow: inset 0 3px 0 -1px var(--c); }
.up-date small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.up-date b { display: block; font: 700 17px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.up-body { min-width: 0; flex: 1; }
.up-body .s-meta { margin-bottom: 2px; }
.up-t { display: block; padding: 0; text-align: left; font: 600 14px/1.3 var(--display); text-decoration: none; }
.up-t:hover { text-decoration: underline; text-decoration-color: var(--c); }
.up-body small { display: block; color: #b6c2d6; font-size: 12px; margin-top: 2px; }
.up-more { display: inline-block; margin-top: 3px; font-size: 11px; color: var(--muted); text-decoration: none; }
.up-more:hover { color: var(--text); }
.up-all summary { cursor: pointer; padding: 10px 0 2px; color: var(--accent); font-size: 12px; font-weight: 600; list-style: none; }
.up-all summary::-webkit-details-marker { display: none; }
.up-all[open] summary { display: none; }
/* Globe marker: a small flag planted up and to the right of the place, clear of its story pin. */
.up-marker { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 3px 7px 3px 5px; border-radius: 99px;
  transform: translate(calc(50% + 6px), calc(-50% - 8px)); white-space: nowrap;
  background: rgba(8, 12, 24, .82); border: 1px solid var(--c); font: 600 11px/1 var(--display); color: var(--text); }
.up-marker span { font-size: 11px; }
.up-marker i { font-style: normal; color: var(--muted); }
.up-marker:hover { background: rgba(20, 28, 50, .95); }

/* Story link: copies a URL that reopens this story's day and place with the story highlighted. */
.share { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 99px; font-size: 11px; line-height: 1.4; color: var(--muted); opacity: .6; }
.share .ic { font-size: 13px; }
.story:hover .share, .share:focus-visible { opacity: 1; }
.share:hover { background: rgba(255,255,255,.08); color: var(--text); }
.share.done { opacity: 1; color: #7ff0b0; background: rgba(61,220,132,.14); }
@media (hover: none) { .share { opacity: .8; } }

/* Pinned places */
.p-actions { display: flex; gap: 6px; align-items: center; }
.pin-btn { color: var(--muted); font-size: 12px; padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,.05); }
.pin-btn:hover { color: var(--text); background: rgba(255,255,255,.1); }
.pin-btn.on { color: #ffd27a; background: rgba(255,210,122,.12); box-shadow: inset 0 0 0 1px rgba(255,210,122,.4); }
.pins { display: grid; gap: 6px; }
.pin-card { display: block; width: 100%; text-align: left; padding: 9px 12px 10px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,210,122,.22); }
.pc-top b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--c); vertical-align: 2px; }
.pin-card:hover { background: rgba(255,255,255,.07); border-color: rgba(255,210,122,.45); }
.pc-top { display: flex; align-items: center; gap: 8px; }
.pc-top b { font: 600 14px/1.3 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-n { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.pc-hl { display: block; margin-top: 3px; color: #cdd6e6; font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-soon { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }

/* Upcoming games (U.S. national panel) */
.league-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.league-tabs button { flex: none; padding: 5px 10px; border-radius: 99px; font: 600 12px/1 var(--display); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.league-tabs button:hover { color: var(--text); }
.league-tabs button.on { color: var(--text); background: rgba(61,220,132,.16); border-color: rgba(61,220,132,.5); }
.league-tabs button.zero { color: var(--muted); border-color: rgba(255,255,255,.06); }
.league-tabs b { margin-left: 5px; font: 500 11px var(--font); color: var(--muted); }
.games-note { margin: 8px 0 2px; color: var(--muted); font-size: 11px; }
#games .day-head { margin: 14px 0 4px; }
.game { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.g-time { flex: none; width: 70px; font: 600 13px/1.3 var(--display); font-variant-numeric: tabular-nums; }
.g-time small { display: block; font: 400 11px/1.3 var(--font); color: var(--muted); }
.g-body { min-width: 0; flex: 1; }
.g-body a { display: block; font: 600 14px/1.3 var(--display); text-decoration: none; }
.g-body a:hover { text-decoration: underline; text-decoration-color: #3ddc84; }
.g-body small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.g-at { color: var(--muted); font-weight: 500; }
.g-rank { font: 600 11px/1 var(--font); font-style: normal; color: #ffd27a; margin-right: 3px; vertical-align: 1px; }
.g-note { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #3ddc84; }
.g-place { padding: 0; margin-left: 4px; font-size: 11px; color: var(--accent); }
.g-place:hover { text-decoration: underline; }