/* Space & Sky tools (loaded only on tool pages, after sas.css). Dark like the site: --bg, --card, --line, --brand-hi,
   --lime, --fire from sas.css. Editorial, not app-like: square corners, hairline rules between sections, no boxed
   frames around everything (owner, 18/10/2026: «remove rounded aiish frames»). Round only what is round (Moon, globe). */
.tool-page { max-width: 1120px; margin: 0 auto; padding-block: 18px 48px; display: grid; gap: 22px; }
.tool-page h1 { font: 700 30px/1.15 var(--text); text-wrap: pretty; } /* fill the line (the theme's «balance» halves a long title) */
@media (min-width: 768px) { .tool-page h1 { font-size: 46px; } }
.tool-page .tagline { color: var(--soft); font: 400 17px/1.6 var(--text); margin: 0; max-width: 880px; text-wrap: pretty; }
.tool { display: grid; gap: 18px; }
.tool-page > *, .tool > *, .tool-now > * { min-width: 0; } /* a grid item never grows past the page (the 30-day strip scrolls) */
.tool-label { font: 700 12px/1.3 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.tool-h2 { font: 700 clamp(24px, 2.4vw, 30px)/1.25 var(--head); margin: 0 0 12px; }
.tool-hint, .tool-note { font: 400 12.5px/1.6 var(--ui); color: var(--muted); margin: 8px 0 0; }
.tool-note a { text-decoration: underline; text-underline-offset: 3px; }

/* the «now» panel: answer first, the Moon beside it */
.tool-now { position: relative; display: grid; gap: 22px; padding: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 10%, rgba(50,153,255,.16), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(90,40,251,.18), transparent 70%), #05060c; }
.tool-now::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 72%, #cfe3ff, transparent),
  radial-gradient(1.2px 1.2px at 58% 30%, #fff, transparent), radial-gradient(1px 1px at 76% 82%, #fff, transparent),
  radial-gradient(1px 1px at 88% 44%, #e3ff8a, transparent), radial-gradient(1px 1px at 46% 8%, #fff, transparent),
  radial-gradient(1px 1px at 8% 60%, #cfe3ff, transparent), radial-gradient(1px 1px at 66% 58%, #fff, transparent); }
.tool-now > * { position: relative; }
@media (min-width: 900px) { .tool-now { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; padding: 30px 34px; align-items: center; } }
/* phones: the picture right under the answer, the details after it */
@media (max-width: 899px) {
  .tool-now { gap: 0; padding: 20px 18px; }
  .tn-text { display: contents; }
  .eyebrow { order: 1; } .tn-head { order: 2; } .tn-sub { order: 3; } .tn-moon, .tn-globe { order: 4; margin: 18px 0 6px; }
  .tn-next { order: 5; } .tn-facts { order: 6; } .loc { order: 7; }
  .moon-glow { width: min(300px, 66vw); }
}
.eyebrow { font: 700 12px/1.4 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); margin: 0 0 8px; }
.tn-head { font: 700 clamp(34px, 5vw, 56px)/1.02 var(--head); margin: 0; letter-spacing: -.005em; }
.tn-sub { font: 500 17px/1.5 var(--text); color: #e9ecf5; margin: 8px 0 0; }
.tn-next { font: 400 14px/1.6 var(--ui); color: var(--soft); margin: 10px 0 0; }
.tn-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 18px 0 0; }
.tn-facts div { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.14); }
.tn-facts div:has(dd:empty) { display: none; }
.tn-facts dt { font: 700 11px/1.3 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.tn-facts dd { margin: 4px 0 0; font: 600 14.5px/1.4 var(--ui); font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .tn-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.loc { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 18px; }
.loc label { font: 700 11px/1.3 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.loc select { appearance: none; background: #0d1020 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a8a8a8'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: #fff; border: 1px solid #2a3150; border-radius: 0; padding: 9px 34px 9px 12px; font: 600 14px/1.2 var(--ui); max-width: 100%; }
.btn-ghost, .btn-now, .cal-nav { background: transparent; color: #fff; border: 1px solid #2a3150; border-radius: 0; padding: 9px 12px; font: 600 13px/1.2 var(--ui); cursor: pointer; }
.btn-ghost:hover, .btn-now:hover, .cal-nav:hover { border-color: var(--brand-hi); color: var(--brand-hi); }
.locnote { flex-basis: 100%; margin: 0; font: 400 12px/1.5 var(--ui); color: var(--muted); }
.tool:not(.live) .loc { display: none; }

.tn-moon { margin: 0; display: grid; justify-items: center; gap: 10px; }
.moon-glow { width: min(340px, 74vw); aspect-ratio: 1; border-radius: 50%; position: relative;
  box-shadow: 0 0 60px 6px rgba(200,215,255,.10), 0 0 140px 20px rgba(120,150,255,.07); }
.moon-glow canvas, .moon-glow svg { width: 100%; height: 100%; display: block; }
.tn-moon figcaption { font: 400 12px/1.4 var(--ui); color: var(--muted); }
.btn-now { border-color: var(--lime); color: var(--lime); }

/* small Moons (strip, calendar, table) */
.mm { display: block; flex: none; }
.mm-d { fill: #20232d; stroke: #343947; stroke-width: .6; }
.mm-l { fill: #ecebe4; }

/* the Moon in your sky */
.tool-sky, .tool-days, .tool-cal, .tool-table { padding: 18px 0 0; border-top: 1px solid var(--line); }
.chart-box { position: relative; overflow: hidden; background: #03070f; }
.chart-box svg { display: block; width: 100%; height: auto; touch-action: none; cursor: ew-resize; }
.chart-box svg:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.chart-empty { display: none; margin: 0; padding: 40px 16px; text-align: center; color: var(--muted); font: 500 14px/1.5 var(--ui); }
.chart-box.noplace .chart-empty, .tool:not(.live) .chart-empty { display: block; }
.chart-box.noplace svg, .tool:not(.live) .chart-box svg { display: none; }
.b-day { fill: #12345a; } .b-civ { fill: #0e2647; } .b-nau { fill: #0a1a33; } .b-ast { fill: #071122; } .b-night { fill: #03070f; }
.ground { fill: rgba(0,0,0,.45); }
.hz { stroke: #6b7899; stroke-width: 1; }
.gl { stroke: rgba(255,255,255,.08); stroke-dasharray: 3 5; }
.gt, .tl, .evt { fill: #9aa6c4; font: 500 11px var(--ui); }
.evt { fill: #e3ff8a; font-weight: 700; }
.tick { stroke: #4a5675; }
.m-below { fill: none; stroke: #5d6680; stroke-width: 1.5; stroke-dasharray: 4 4; }
.m-above { fill: none; stroke: #f2f1ea; stroke-width: 2.5; }
.ev { fill: #e3ff8a; }
.now { stroke: #ffb00f; stroke-width: 1.5; } .nowt { fill: #ffb00f; font: 700 10px var(--ui); letter-spacing: .06em; }
.sel { stroke: rgba(227,255,138,.85); stroke-width: 1.5; stroke-dasharray: 2 3; }
.seldot { fill: #fff; stroke: #e3ff8a; stroke-width: 2.5; }

/* next 30 days */
/* all 30 days at once, no horizontal scrolling (owner, 18/10/2026: «no hsliders») */
.strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
@media (min-width: 640px) { .strip { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .strip { grid-template-columns: repeat(15, minmax(0, 1fr)); } }
.sd { display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 8px 2px;
  background: transparent; border: 0; color: #fff; cursor: pointer; font: 500 12px/1 var(--ui); }
.sd small { color: var(--muted); font-size: 11px; }
.sd b { font: 700 14px/1 var(--ui); }
.sd:hover { background: rgba(255,255,255,.04); }
.sd.today b { color: var(--lime); }
.sd.on { background: rgba(50,153,255,.14); box-shadow: inset 0 -2px 0 var(--brand-hi); }

/* month calendar */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.cal-title { font: 700 clamp(22px, 2.2vw, 28px)/1.2 var(--head); margin: 0; }
.cal-nav { width: 40px; height: 40px; padding: 0; font-size: 20px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cw { text-align: center; font: 700 11px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 0; }
.cd { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; background: #0a0b10; border: 0; color: #fff; cursor: pointer; min-width: 0; }
.cd.empty { background: transparent; border: 0; cursor: default; }
.cd:hover { background: #12141c; }
.cn { font: 700 12px/1 var(--ui); justify-self: start; padding-left: 6px; color: #cfd5e6; }
.cp { font: 500 10.5px/1.2 var(--ui); color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cd.q2 { box-shadow: inset 0 2px 0 var(--fire); } .cd.q2 .cp { color: var(--fire); font-weight: 700; }
.cd.q0 .cp, .cd.q1 .cp, .cd.q3 .cp { color: var(--brand-hi); font-weight: 700; }
.cd.today { box-shadow: inset 0 0 0 2px var(--lime); }
@media (max-width: 520px) { .cd { padding: 6px 1px; } .cd .mm { width: 24px; height: 24px; } .cp { font-size: 9.5px; } .cn { padding-left: 3px; } }

/* next phases table */
.tbl-wrap { overflow-x: auto; scrollbar-width: none; }
.tbl-wrap::-webkit-scrollbar { display: none; }
/* phones: the tables fit the screen instead of scrolling sideways */
@media (max-width: 640px) {
  /* the Moon phases table becomes stacked rows: phase and time, then date and distance, then the full Moon name */
  .phases:not(.kp-table) thead { display: none; }
  .phases:not(.kp-table), .phases:not(.kp-table) tbody { display: block; }
  .phases:not(.kp-table) tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid #1a1a1a; }
  .phases:not(.kp-table) td { display: block; padding: 0; border: 0; white-space: normal; }
  .phases:not(.kp-table) td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .phases:not(.kp-table) td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; }
  .phases:not(.kp-table) td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--soft); }
  .phases:not(.kp-table) td:nth-child(5) { grid-column: 2; grid-row: 2; text-align: right; font-size: 12px; }
  .phases:not(.kp-table) td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; color: var(--fire); font-weight: 600; }
  .phases:not(.kp-table) td:nth-child(4):empty { display: none; }
  .phases:not(.kp-table) .ph-n { display: flex; }
  .kp-table { table-layout: fixed; width: 100%; }
  .kp-table th, .kp-table td { padding: 6px 1px; font-size: 10.5px; white-space: normal; }
  .kp-table th:first-child, .kp-table td:first-child { width: 21%; font-size: 10px; line-height: 1.25; }
}
.phases { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--ui); font-variant-numeric: tabular-nums; }
.phases th { text-align: left; font: 700 11px/1.3 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.phases td { padding: 10px; border-bottom: 1px solid #1a1a1a; white-space: nowrap; }
.phases .ph-n { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.phases .km { color: var(--soft); }

/* the explanation below the tool */
.tool-text { max-width: 820px; }
.tool-more { display: grid; gap: 14px; }
.tool-more .rel-list { display: grid; gap: 18px; }
@media (min-width: 768px) { .tool-more .rel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* the tools hub (/tools/): cards with drawn previews (forexdecider-like tiles, on the dark theme) */
.hub { display: grid; gap: 34px; }
.hub-sec { display: grid; gap: 14px; }
.hub-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.hub-head .tool-h2 { margin: 0; }
.hub-head p { margin: 0; font: 400 13px/1.5 var(--ui); color: var(--muted); }
.hub-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tcard { display: grid; gap: 8px; align-content: start; }
.tcard:hover .tprev { opacity: .9; }
.tcard:hover h3 { color: var(--lime); }
.tprev { aspect-ratio: 32 / 15; background: #05060c; transition: opacity .15s; }
.tprev svg { display: block; width: 100%; height: 100%; }
.tprev .tp-k { fill: #9aa6c4; font: 700 10px var(--ui); letter-spacing: .08em; }
.tprev .tp-v { fill: #fff; font: 700 21px var(--head); }
.tprev .tp-s { fill: #e3ff8a; font: 600 12px var(--ui); }
.tcard h3 { font: 700 21px/1.25 var(--head); margin: 2px 0 0; }
.tcard p { margin: 0; font: 400 13.5px/1.55 var(--ui); color: var(--soft); }
.tbadge { justify-self: start; margin: 8px 0 0; font: 700 10.5px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid #2a3150; padding: 5px 8px; }
.tbadge.live { color: #000; background: var(--lime); border-color: var(--lime); }

/* northern lights: the globe, NOAA's alert, the Kp chart and table */
.tn-globe { margin: 0; display: grid; justify-items: center; gap: 10px; }
.globe-wrap { width: min(380px, 80vw); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 70px 4px rgba(93,255,160,.10), 0 0 0 1px rgba(255,255,255,.05); }
.globe-wrap canvas { width: 100%; height: 100%; display: block; }
.tn-globe figcaption { font: 400 12px/1.4 var(--ui); color: var(--muted); text-align: center; max-width: 380px; }
.aurora-now { background: radial-gradient(120% 90% at 85% 10%, rgba(93,255,160,.12), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(90,40,251,.18), transparent 70%), #04070c; }
.tool-alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; background: rgba(255,176,15,.07); border-left: 3px solid var(--fire); }
.tool-alert .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fire); margin-top: 6px; flex: none; box-shadow: 0 0 0 4px rgba(255,176,15,.2); }
.tool-alert b { display: block; font: 700 15px/1.4 var(--ui); }
.tool-alert small { font: 400 12px/1.4 var(--ui); color: var(--muted); }
.kp-box { background: #03070f; }
.kp-box svg { touch-action: none; cursor: ew-resize; }
.kp-night { fill: rgba(80,120,255,.10); }
.kp-grid { stroke: rgba(255,255,255,.07); }
.kp-ax, .kp-g { fill: #9aa6c4; font: 600 10.5px var(--ui); }
.kp-day { stroke: rgba(255,255,255,.12); }
.kp-bar.pred { opacity: .55; }
.k-green { fill: #2fd27a; } .k-yellow { fill: #e3ff8a; } .k-amber { fill: #ffd34d; } .k-orange { fill: #ffb00f; } .k-red { fill: #ff4d5e; }
.kp-need { stroke-width: 1.5; stroke-dasharray: 5 4; } .kp-need.horizon { stroke: #8fd3ff; } .kp-need.overhead { stroke: #e3ff8a; }
.kp-needt { fill: #cfe3ff; font: 700 10.5px var(--ui); }
.kp-table td.kpc { font-weight: 700; text-align: center; color: #000; }
.kp-table td.k-green { background: #2fd27a; } .kp-table td.k-yellow { background: #e3ff8a; } .kp-table td.k-amber { background: #ffd34d; }
.kp-table td.k-orange { background: #ffb00f; } .kp-table td.k-red { background: #ff4d5e; } .kp-table td.pred { opacity: .7; }
.kp-table th, .kp-table td { text-align: center; } .kp-table td:first-child, .kp-table th:first-child { text-align: left; }

/* the time slider right under the Moon and the globe (owner, 18/10/2026: the picture must change in view while you slide) */
.scrub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; width: min(380px, 100%); }
.scrub output { grid-column: 1 / -1; text-align: center; font: 600 13px/1.4 var(--ui); color: var(--lime); font-variant-numeric: tabular-nums; }
.scrub-step { width: 34px; height: 34px; border-radius: 0; border: 1px solid #2a3150; background: transparent; color: #fff; font: 700 18px/1 var(--ui); cursor: pointer; }
.scrub-step:hover { border-color: var(--brand-hi); color: var(--brand-hi); }
.scrub input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
.scrub input[type=range]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, #12345a, #2a3150 50%, #12345a); }
.scrub input[type=range]::-moz-range-track { height: 4px; background: linear-gradient(90deg, #12345a, #2a3150 50%, #12345a); }
.scrub input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--lime); border: 3px solid #05060c; box-shadow: 0 0 0 1px var(--lime); }
.scrub input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--lime); border: 3px solid #05060c; }
.scrub input[type=range]:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.tool:not(.live) .scrub { display: none; }

/* rocket launch schedule: the next launch, its countdown and the webcast played here (owner, 18/10/2026) */
.launch-now { background: radial-gradient(120% 90% at 85% 10%, rgba(255,176,15,.12), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(50,153,255,.16), transparent 70%), #05060c; }
@media (min-width: 900px) { .launch-now { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); } }
.lcount { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: flex-end; font: 700 clamp(28px, 4vw, 40px)/1 var(--head); color: var(--fire); font-variant-numeric: tabular-nums; }
.lcount .cu { display: grid; justify-items: start; gap: 4px; }
.lcount .cu b { font: 700 clamp(42px, 6.4vw, 72px)/.9 var(--head); color: var(--fire); letter-spacing: .01em; }
.lcount .cu i { font: 700 10.5px/1.2 var(--ui); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lcount > b { color: var(--fire); } .lcount > i { font: 600 15px/1 var(--ui); font-style: normal; color: #c9b27a; margin-left: 2px; }
.tn-video { margin: 0; display: grid; gap: 8px; }
@media (max-width: 899px) { .tn-video { order: 4; margin: 18px 0 6px; } .lcount { order: 3; } }
.tn-video figcaption { font: 400 12px/1.4 var(--ui); color: var(--muted); }
.yt { position: relative; aspect-ratio: 16 / 9; background: #000; cursor: pointer; overflow: hidden; }
.yt img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 74px; height: 52px; background: rgba(255,0,0,.9); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.yt-play::after { content: ""; position: absolute; left: 30px; top: 15px; border-left: 20px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.yt:hover .yt-play { background: #ff0000; }
.yt.on { cursor: default; } .yt iframe { width: 100%; height: 100%; border: 0; display: block; }
.no-cast { padding: 18px 0; border-top: 1px solid rgba(255,255,255,.14); }
.no-cast p { margin: 8px 0 0; font: 400 13.5px/1.55 var(--ui); color: var(--soft); }
.watch-out { display: inline-block; padding: 12px 16px; background: var(--lime); color: #000; font: 700 14px/1.2 var(--ui); }
.watch-out:hover { background: #fff; }
.lnext { list-style: none; margin: 0; padding: 0; }
.lnext li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 12px 0; border-bottom: 1px solid #1a1a1a; }
.lnext .ln-when { grid-column: 1; font: 600 12px/1.4 var(--ui); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.lnext b { grid-column: 1; font: 700 18px/1.3 var(--head); }
.lnext .ln-what { grid-column: 1; font: 400 13px/1.4 var(--ui); color: var(--soft); }
.lnext .ln-count { grid-column: 2; grid-row: 1 / span 3; align-self: center; font: 700 15px/1.2 var(--ui); color: var(--fire); font-variant-numeric: tabular-nums; }

/* ISS tracker: the answer above, the world map full width with its slider right under it, the passes table */
.iss-now { background: radial-gradient(120% 90% at 85% 10%, rgba(227,255,138,.10), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(50,153,255,.18), transparent 70%), #05060c; }
@media (min-width: 900px) { .iss-now { grid-template-columns: minmax(0, 1fr); } .iss-now .tn-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.iss-map { margin: 0; display: grid; gap: 10px; justify-items: center; }
.iss-map canvas { width: 100%; height: auto; aspect-ratio: 2 / 1; display: block; background: #03070f; }
.iss-map figcaption { font: 400 12px/1.4 var(--ui); color: var(--muted); text-align: center; }
.iss-scrub { width: min(560px, 100%); }
.passes tr[data-pass] { cursor: pointer; }
.passes tr[data-pass]:hover td { background: rgba(255,255,255,.03); }
.passes tr.hi td:nth-child(3) { color: var(--lime); font-weight: 700; }
@media (max-width: 640px) { .passes td:nth-child(4) { color: var(--soft) !important; font-weight: 400 !important; } }
.iss-video .yt { max-width: 900px; }

/* the launch schedule (owner, 18/10/2026: «Make the best in the world»): days, rows, filters, results; no tables */
.lsched { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.lsched-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 22px; }
.lsched-head .tool-h2 { margin: 0; }
.lfilters { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.lfilters button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 0; color: var(--muted); font: 700 12px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.lfilters button:hover { color: #fff; }
.lfilters button.on { color: #fff; border-bottom-color: var(--lime); }
.lday { margin: 26px 0 0; padding: 0 0 10px; font: 700 22px/1.2 var(--head); border-bottom: 1px solid var(--line); }
.lday span { margin-left: 8px; font: 600 13px/1 var(--ui); color: var(--muted); }
.lday[hidden], .lrow[hidden] { display: none; }
.lrow { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 4px 20px; padding: 18px 0; border-bottom: 1px solid #171717; }
.lrow:hover { background: linear-gradient(90deg, rgba(50,153,255,.06), transparent 70%); }
.lrow { scroll-margin-top: 140px; } /* below the sticky header and the launch bar */
.lrow.lhit { background: linear-gradient(90deg, rgba(227,255,138,.10), transparent 75%); box-shadow: inset 3px 0 0 var(--lime); padding-left: 12px; } /* reached from an article banner */
.lr-time b { display: block; font: 700 26px/1 var(--head); color: #fff; font-variant-numeric: tabular-nums; }
.lr-time small { display: block; margin-top: 4px; font: 600 11px/1 var(--ui); letter-spacing: .06em; color: var(--muted); }
.lr-main h3 { margin: 0; font: 700 21px/1.2 var(--head); }
.lr-sub { margin: 4px 0 0; font: 600 14px/1.4 var(--ui); color: #dfe6f5; }
.lr-meta { margin: 3px 0 0; font: 400 12.5px/1.5 var(--ui); color: var(--muted); }
.lr-tags { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tg { font: 700 10.5px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; }
.tg-not { color: var(--lime); } .tg-crew { color: var(--fire); } .tg-first { color: var(--brand-hi); }
.lr-side { display: grid; justify-items: end; align-content: start; gap: 8px; text-align: right; }
.lr-status { font: 700 11px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; }
.s-go { color: #2fd27a; } .s-tbc { color: #ffd34d; } .s-tbd { color: #8a93a8; } .s-hold { color: #ff4d5e; } .s-flight { color: var(--brand-hi); }
.s-ok { color: #2fd27a; } .s-fail { color: #ff4d5e; } .s-part { color: #ffb00f; }
.lr-count { font: 700 15px/1.2 var(--ui); color: var(--fire); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lr-watch { display: inline-block; padding: 8px 11px; background: var(--lime); color: #000; font: 700 12.5px/1 var(--ui); letter-spacing: .02em; }
.lr-watch::before { content: "\25B6\00A0"; font-size: 10px; }
.lr-watch:hover { background: #fff; }
.lr-player { padding: 0 0 18px; border-bottom: 1px solid #171717; }
.lr-player .yt { max-width: 760px; }
@media (max-width: 640px) {
  .lrow { grid-template-columns: 70px minmax(0, 1fr); gap: 6px 14px; padding: 16px 0; }
  .lr-time b { font-size: 19px; }
  .lr-main h3 { font-size: 18px; }
  .lr-side { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 14px; text-align: left; }
  .lday { font-size: 19px; }
}
.lres { list-style: none; margin: 0; padding: 0; }
.lres li { display: grid; grid-template-columns: 4px 58px minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid #171717; color: #fff; }
.lres-mark { grid-row: 1 / span 2; align-self: stretch; min-height: 36px; background: #8a93a8; }
.lres-d { grid-row: 1 / span 2; font: 700 12px/1.2 var(--ui); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lres li b { grid-column: 3; font: 700 17px/1.25 var(--head); }
.lres-r { grid-column: 3; font: 400 12.5px/1.4 var(--ui); color: var(--muted); }
.lres-s { grid-column: 4; grid-row: 1 / span 2; font: 700 11px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; }
.lres li.s-ok .lres-mark { background: #2fd27a; } .lres li.s-ok .lres-s { color: #2fd27a; }
.lres li.s-fail .lres-mark { background: #ff4d5e; } .lres li.s-fail .lres-s { color: #ff4d5e; }
.lres li.s-part .lres-mark { background: #ffb00f; } .lres li.s-part .lres-s { color: #ffb00f; }
.tn-facts dd.s-go { color: #2fd27a; } .tn-facts dd.s-tbc { color: #ffd34d; } .tn-facts dd.s-hold { color: #ff4d5e; }
/* the provider's logo under the launch time (owner, 18/10/2026), white on the dark page so every logo reads the same */
.lr-logo { display: block; margin-top: 10px; max-width: 96px; max-height: 30px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .82; }
@media (max-width: 640px) { .lr-logo { max-width: 66px; max-height: 24px; } }
.hero-logo { display: block; max-width: 140px; max-height: 40px; width: auto; height: auto; margin: 0 0 14px; filter: brightness(0) invert(1); opacity: .9; }
/* the launch site on one row with a map pin (owner, 18/10/2026: «One row for location with an icon») */
.lr-loc { margin: 5px 0 0; display: flex; align-items: center; gap: 6px; font: 400 12.5px/1.4 var(--ui); color: var(--soft); min-width: 0; }
.lr-loc svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linejoin: round; }
.lr-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.launch-now .lr-loc { margin-top: 10px; font-size: 15px; }
.launch-now .lr-loc svg { width: 17px; height: 17px; }
/* destination icons (owner, 18/10/2026): Earth orbit, Moon, Mars, Sun, suborbital, other worlds */
.lr-meta { display: flex; align-items: center; gap: 7px; }
.dest { width: 18px; height: 18px; flex: none; }
.dest .d-fill { stroke: none; } .dest .d-line, .dest .d-ray, .dest .d-band { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.d-earth { fill: #3a8dff; } .dest-earth .d-line { stroke: #9fd0ff; }
.d-moon { fill: #d9d6cc; } .d-crater { fill: #a8a397; }
.d-mars { fill: #e0603a; } .d-band { stroke: #b6432a; }
.d-sun { fill: #ffc531; } .d-ray { stroke: #ffc531; }
.dest-sub .d-line { stroke: #9fb3d9; }
.d-planet { fill: #c9a26b; } .dest-planet .d-line { stroke: #e7d3a8; }
.tn-facts dd.dd-dest { display: flex; align-items: center; gap: 7px; }
/* full screen for our video players (owner, 18/10/2026): real full screen where the browser allows it; on the iPhone the
   player fills the screen turned 90 degrees (dvh/dvw follow the visible screen, not the browser bars) */
.yt-fs { margin-top: 8px; justify-self: start; background: none; border: 1px solid #2a3150; color: #fff; padding: 8px 12px; font: 600 13px/1 var(--ui); cursor: pointer; }
.yt-fs:hover { border-color: var(--lime); color: var(--lime); }
.yt:fullscreen, .yt:-webkit-full-screen { width: 100vw; height: 100vh; aspect-ratio: auto; background: #000; }
.yt:fullscreen iframe { width: 100%; height: 100%; }
.yt.yt-rot { position: fixed; z-index: 9999; top: 50%; left: 50%; width: 100vh; width: 100dvh; height: 100vw; height: 100dvw; max-width: none; aspect-ratio: auto; background: #000; transform: translate(-50%, -50%) rotate(90deg); }
@media (orientation: landscape) { .yt.yt-rot { width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; transform: translate(-50%, -50%); } }
.yt.yt-rot iframe { width: 100%; height: 100%; }
.yt-rot-x { position: fixed; top: 12px; right: 12px; z-index: 10000; width: 42px; height: 42px; padding: 0; border: 0; background: rgba(0,0,0,.6); color: #fff; font: 300 28px/1 var(--ui); cursor: pointer; }
html.yt-rot-on, html.yt-rot-on body { overflow: hidden; }

/* ---------- planets visible tonight (owner, 18/10/2026) ---------- */
.planets-now { background: radial-gradient(120% 90% at 85% 10%, rgba(255,176,15,.10), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(90,40,251,.20), transparent 70%), #05060c; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 14px 0 0; padding: 0; }
.pl-chips li { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1.3 var(--ui); color: var(--soft); cursor: pointer; }
.pl-chips b { font: 700 15px/1.2 var(--ui); color: #fff; }
.pl-chips li:hover b { color: var(--lime); }
.pl-ic { display: block; flex: none; }
.tn-sky { margin: 0; display: grid; justify-items: center; gap: 10px; }
.tn-sky figcaption { font: 400 12px/1.45 var(--ui); color: var(--muted); text-align: center; max-width: 380px; min-height: 2.9em; }
.dome-box { width: min(380px, 100%); position: relative; }
.dome-box svg { display: block; width: 100%; height: auto; cursor: pointer; }
.dome-empty { display: none; margin: 0; padding: 60px 16px; text-align: center; color: var(--muted); font: 500 14px/1.5 var(--ui); }
.dome-box.noplace .dome-empty, .tool:not(.live) .dome-empty { display: block; }
.dome-box.noplace svg, .tool:not(.live) .dome-box svg { display: none; }
.pd-hz { fill: none; stroke: #6b7899; stroke-width: 1.2; }
.pd-ring { fill: none; stroke: rgba(255,255,255,.10); stroke-dasharray: 3 5; }
.pd-ecl { fill: none; stroke: rgba(227,255,138,.45); stroke-width: 1.3; stroke-dasharray: 6 5; }
.pd-card { fill: #9aa6c4; font: 700 13px var(--ui); }
.pd-lbl { fill: #fff; font: 600 11.5px var(--ui); paint-order: stroke; stroke: rgba(5,6,12,.75); stroke-width: 3px; }
.pd-lbl.faint { fill: #b9c2da; font-weight: 500; }
.pd-lbl.dim, .pd-pl.dim { opacity: .55; }
.pd-moon { fill: #d8d7cf; }
.pd-glow { opacity: .16; }
.pd-glow.dim { opacity: .08; }
.pd-sel { fill: none; stroke: var(--lime); stroke-width: 1.6; }
.tn-sky .mm-d { fill: #20232d; stroke: #343947; stroke-width: .6; }
@media (max-width: 899px) {
  .pl-chips { order: 3; } .tn-sub { order: 3; }
  .tn-sky { order: 4; margin: 18px 0 6px; }
}
.tool-planets, .tool-events { padding: 18px 0 0; border-top: 1px solid var(--line); }
.plist { display: grid; }
.pl-sub { margin: 22px 0 0; }
.prow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid #171717; scroll-margin-top: 140px; }
.prow.on { background: linear-gradient(90deg, rgba(227,255,138,.08), transparent 75%); box-shadow: inset 3px 0 0 var(--lime); padding-left: 10px; }
.pr-ic { padding-top: 2px; }
.pr-main h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font: 700 21px/1.25 var(--head); }
.pr-badge, .pr-retro { font: 700 10.5px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase; padding: 5px 7px; border: 1px solid #2a3150; color: var(--soft); }
.pr-badge.b-night { color: #000; background: var(--lime); border-color: var(--lime); }
.pr-badge.b-eve { color: #000; background: #ffcf7a; border-color: #ffcf7a; }
.pr-badge.b-morn { color: #000; background: #9cc8ff; border-color: #9cc8ff; }
.pr-badge.b-sun { color: var(--muted); }
.pr-retro { color: #ff9a7a; border-color: rgba(255,122,82,.5); }
.pr-say { margin: 6px 0 0; font: 400 14.5px/1.55 var(--ui); color: #e9ecf5; }
.pr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; margin: 10px 0 0; }
.pr-facts div { padding: 7px 0; border-top: 1px solid rgba(255,255,255,.08); min-width: 0; }
.pr-facts div:has(dd:empty) { display: none; }
.pr-facts dt { font: 700 10.5px/1.3 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pr-facts dd { margin: 3px 0 0; font: 600 13.5px/1.4 var(--ui); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pr-show { background: transparent; color: var(--lime); border: 1px solid rgba(227,255,138,.5); border-radius: 0; padding: 8px 10px; font: 700 12.5px/1.2 var(--ui); cursor: pointer; white-space: nowrap; }
.pr-show:hover { background: rgba(227,255,138,.08); }
.prow[data-show] { cursor: pointer; }
.prow[data-show]:hover h3 { color: var(--lime); }
@media (max-width: 639px) {
  .prow { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; padding: 14px 0; }
  .pr-ic svg { width: 26px; height: 26px; }
  .pr-main h3 { font-size: 19px; }
  .pr-say { font-size: 13.5px; }
  .pr-facts { gap: 0 10px; }
  .pr-facts dt { font-size: 9.5px; }
  .pr-facts dd { font-size: 12.5px; }
  .pr-show { display: none; } /* the row itself opens the sky (owner, 18/10/2026: fewer rows on phones) */
  .prow[data-show] .pr-say::after { content: " Tap to see it in the sky ›"; color: var(--lime); font-weight: 600; }
}
.pc-l { fill: #e9ecf5; font: 600 11.5px var(--ui); }
.pc-l.faint { fill: #9aa6c4; font-weight: 500; }
.pc-up { stroke-opacity: .45; }
.pc-vis { stroke-linecap: butt; }
.evlist { display: grid; }
.evrow { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 18px; padding: 11px 0; border-bottom: 1px solid #171717; }
.evrow time { font: 600 13px/1.5 var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.evrow p { margin: 0; font: 500 14.5px/1.5 var(--ui); }
.evrow.ev-parade p { color: var(--lime); font-weight: 700; }
.evrow.ev-opp p { color: #ffcf7a; }
@media (max-width: 639px) { .evrow { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* data freshness on every live tool (owner's review, 18/10/2026): current, old, unavailable, with the last update */
.fresh { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 12.5px/1.45 var(--ui); color: var(--soft); }
.fresh::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5dffa0; }
.fresh-old { color: #ffcf7a; }
.fresh-old::before { background: #ffb00f; }
.fresh-off { color: #ff9a8a; }
.fresh-off::before { background: #ff5b4d; }
.tool-now .fresh { margin-top: 10px; }
@media (max-width: 899px) { .tool-now .fresh { order: 3; } } /* under the headline on phones */
.lnotice { margin: 10px 0 0; padding: 10px 12px; border: 1px solid rgba(255,176,15,.5); color: #ffcf7a; font: 500 13.5px/1.5 var(--ui); }
.lnotice a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) { .lnotice { order: 3; } }