/* Ground Stations Monitoring (satip-tools/ground-stations.php).
 * Own gs-* classes on purpose: the Tailwind build is prebuilt, and the globe is a dark space scene in
 * both CMP themes. .gs-tv = the chrome-free office-TV view (?tv=1).
 * Look (Gleb 2026-10-27): glass, not flat. Frosted panels, white/ice station marks, emerald for live
 * traffic (red = a downlink at 0, amber = stale data), fine silver lines. */

.gs-page { display: flex; flex-direction: column; padding: 1.25rem 0 0; }

.gs-stage {
  --glass: rgba(10, 18, 32, 0.55);
  --glass-strong: rgba(10, 18, 32, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.10);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --ink: #e2e8f0;
  --muted: #94a3b8;
  --up: #34d399; --up-fill: rgba(6, 78, 59, 0.42); --up-edge: rgba(52, 211, 153, 0.5);
  --down: #f87171; --down-fill: rgba(127, 29, 29, 0.42); --down-edge: rgba(248, 113, 113, 0.55);
  --stale: #fbbf24; --stale-fill: rgba(120, 53, 15, 0.42); --stale-edge: rgba(251, 191, 36, 0.5);
  position: relative; overflow: hidden; height: calc(100dvh - 170px); min-height: 560px;
  border-radius: 0.5rem; background: #02060d; color: var(--ink);
  font-family: Inter, system-ui, Arial, sans-serif; font-size: 11px;
}
.gs-canvas { position: absolute; inset: 0; }
.gs-canvas .cesium-widget, .gs-canvas canvas { width: 100%; height: 100%; }

/* Frosted glass, shared by the view buttons, card, clock and tooltip */
.gs-views button, .gs-card, .gs-clock, .gs-tip {
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shine), 0 8px 28px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}

/* View buttons */
.gs-views button {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 5px 11px; border-radius: 999px;
  color: #cbd5e1; font: 500 11px Inter, system-ui, Arial, sans-serif; letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.gs-views button:hover { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.gs-views button[aria-pressed=true] { color: #ecfdf5; background: rgba(6, 78, 59, 0.5); border-color: var(--up-edge); }

/* Every top control in one grid (Gleb 2026-10-27): the title row (the SATLINE title, or the CMP's search,
   then the live badges) | fullscreen in the corner; then search on the TV | the view buttons. A phone
   stacks the same blocks (end of file), so nothing lands on what wraps. */
.gs-top {
  position: absolute; z-index: 3; top: 10px; left: 10px; right: 12px; pointer-events: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 8px; align-items: start;
}
/* the title row spans the full width (the corner sits over its right end), so the view buttons below
   never squeeze it */
.gs-head { grid-row: 1; grid-column: 1 / -1; padding-right: 150px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.gs-head > * { pointer-events: auto; }
.gs-corner { grid-row: 1; grid-column: 2; justify-self: end; display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.gs-top > .gs-find { grid-row: 2; grid-column: 1; pointer-events: auto; }
.gs-views { grid-row: 2; grid-column: 2; justify-self: end; display: grid; grid-template-columns: repeat(5, auto); gap: 6px; pointer-events: auto; }
.gs-views button { justify-content: center; padding: 5px 9px; white-space: nowrap; }
/* CMP: search on the left; the view buttons, TV view and fullscreen in the corner; the live badges on
   their own row below (Gleb 2026-10-27) */
.gs-stage:not(.gs-tv) .gs-head { grid-column: 1; padding-right: 0; }
.gs-stage:not(.gs-tv) .gs-find { flex: 1 1 auto; flex-wrap: wrap; }   /* fills its cell: side by side when there is room */
.gs-top > .gs-live { grid-row: 2; grid-column: 1 / -1; }
/* the Full GEO / MEO / LEO object legend, in the footer after the cloud frame */
.gs-keylines { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--muted); }
.gs-keylines .gs-geo { color: #b2bfd4; }
.gs-keylines .gs-geo i { font-style: normal; }
.gs-keylines .gs-geo .tv, .gs-keylines .gs-geo .ref { color: #a3b5cb; }
.gs-keylines .gs-geo .other { color: #64748b; }
.gs-keylines .gs-geo b { font-weight: 400; color: #8cafc6; }
.gs-keylines [hidden] { display: none; }

/* Hover card for a GEO Belt satellite */
.gs-tip { position: absolute; z-index: 3; pointer-events: none; padding: 5px 10px; white-space: nowrap; border-radius: 8px; color: var(--ink); font-size: 11px; }
.gs-tip[hidden] { display: none; }

/* Satellite card (click a satellite, its label or one of our models) */
.gs-card {
  position: absolute; z-index: 3; top: 52px; left: 50%; transform: translateX(-50%);
  min-width: 340px; max-width: min(600px, calc(100% - 24px)); padding: 12px 16px; border-radius: 12px;
  background: var(--glass-strong); color: var(--ink); font-size: 11px; line-height: 1.6; font-variant-numeric: tabular-nums;
}
.gs-card[hidden] { display: none; }
.gs-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 4px; }
.gs-card-head strong { font-size: 13px; font-weight: 600; color: #f8fafc; letter-spacing: 0.01em; }
.gs-card-head button { border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.gs-card-sub { color: #cbd5e1; }
.gs-card-note, .gs-card-foot { color: var(--muted); }
.gs-card-look { color: #e2e8f0; }
.gs-card-foot { margin-top: 4px; font-size: 10px; }
.gs-card-rate { font-weight: 600; }
.gs-card-rate.up { color: var(--up); } .gs-card-rate.down { color: var(--down); } .gs-card-rate.unknown { color: var(--stale); }

/* Orbit names fanned out from the belt */
.gs-belt-labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.gs-belt-labels path { stroke: #94a3b8; fill: none; stroke-width: .6; opacity: .45; pointer-events: none; }
.gs-belt-labels g { pointer-events: auto; cursor: pointer; }
.gs-belt-labels text { fill: #e2e8f0; font: 500 11px Inter, system-ui, Arial, sans-serif; paint-order: stroke; stroke: #02060d; stroke-width: 3px; stroke-linejoin: round; }
.gs-belt-labels text.slot { font-size: 9.5px; font-weight: 400; fill: #8aa0b8; }
.gs-belt-labels tspan.fault { fill: var(--down); font-weight: 600; }
.gs-belt-labels g.other text { fill: #8a99ad; }
.gs-belt-labels g:hover path, .gs-belt-labels g.selected path { stroke: #e0f2fe; stroke-width: 1.2; opacity: 1; }
.gs-belt-labels g:hover text, .gs-belt-labels g.selected text:not(.slot):not(.badge-text) { fill: #fff; }

/* Station names + speeds above the globe, on pointer lines to their dots */
.gs-station-labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.gs-station-labels path { stroke: #e2e8f0; stroke-width: .8; opacity: .55; fill: none; }
.gs-station-labels .planned path { stroke: #64748b; stroke-dasharray: 3 3; }
.gs-station-labels text.name { fill: #f8fafc; font: 600 11px Inter, system-ui, Arial, sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  paint-order: stroke; stroke: #02060d; stroke-width: 3px; stroke-linejoin: round; }
.gs-station-labels .planned text.name { fill: #64748b; }

/* Speed badges (SVG glass pills) */
rect.badge { fill: var(--up-fill); stroke: var(--up-edge); stroke-width: 1; }
rect.badge.down { fill: var(--down-fill); stroke: var(--down-edge); }
rect.badge.unknown { fill: var(--stale-fill); stroke: var(--stale-edge); }
text.badge-text { font: 600 10px Inter, system-ui, Arial, sans-serif; fill: var(--up); stroke: none; font-variant-numeric: tabular-nums; }
text.badge-text.down { fill: var(--down); }
text.badge-text.unknown { fill: var(--stale); }

/* Live downlink as compact glass badges in the title row (Gleb 2026-10-27): one per station (code,
   rate, locked transponders; admin: faults in red), TOTAL last, then how old the figures are. They wrap
   inside their own column, so more stations (five more in 2027) never run under the brand or search. */
.gs-live { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--ink); font-variant-numeric: tabular-nums; pointer-events: auto; }
#gs-live-rows { display: contents; }
.gs-pill {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(10, 18, 32, 0.55); box-shadow: var(--glass-shine);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.gs-pill b { font-size: 10px; font-weight: 600; letter-spacing: .08em; color: #f1f5f9; }
.gs-pill .v { font-size: 12px; font-weight: 600; color: #f8fafc; letter-spacing: -0.01em; }
.gs-pill small { font-size: 9.5px; color: var(--muted); }
.gs-pill small .fault { font-style: normal; font-weight: 600; color: var(--down); }   /* admin only */
.gs-pill.up { border-color: rgba(52, 211, 153, 0.28); background: rgba(6, 78, 59, 0.3); }
.gs-pill.up .v { color: var(--up); }
.gs-pill.down { border-color: var(--down-edge); background: var(--down-fill); }
.gs-pill.down .v { color: var(--down); }
.gs-pill.unknown { border-color: var(--stale-edge); background: var(--stale-fill); }
.gs-pill.unknown .v { color: var(--stale); }
.gs-pill.pending { border-color: rgba(56, 189, 248, 0.32); background: rgba(12, 74, 110, 0.3); }
.gs-pill.pending .v { display: none; }                  /* no figure yet: just "awaiting monitoring" */
.gs-pill.pending small { color: #7dd3fc; }
.gs-pill-total .v { font-size: 13px; }
.gs-live-foot { margin-left: 3px; font-size: 9.5px; color: var(--muted); white-space: nowrap; text-shadow: 0 1px 2px #000; }
.gs-live-foot .warn { color: var(--stale); }
.gs-live.stale .gs-live-foot { color: var(--stale); }
.gs-card-fault { color: #fca5a5; }

/* Bottom left, one column: the UTC clock, then the footer line (cloud frame, then the legend as compact
   badges). A footer that wraps pushes the clock up instead of running under it. */
.gs-bottom {
  position: absolute; z-index: 2; left: 12px; right: 46px; bottom: 12px; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.gs-clock {
  padding: 5px 10px; border-radius: 8px;
  color: #e2e8f0; font: 500 11px Inter, system-ui, Arial, sans-serif; font-variant-numeric: tabular-nums;
}
.gs-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  font-size: 10px; color: var(--muted); text-shadow: 0 1px 2px #000;
}
.gs-foot > * { pointer-events: auto; }
.gs-observation { white-space: nowrap; }

.gs-error {
  position: absolute; z-index: 3; top: 45%; left: 12px; right: 12px; padding: 10px;
  border: 1px solid #914350; background: #381b24e8; color: #ffd5d9; font-size: 12px;
}
.gs-error[hidden] { display: none; }

/* Cesium credits */
/* Behind a small ⓘ button bottom right: the credits slide out to its left (Gleb 2026-10-27). The
   EOX (CC BY 4.0) and EUMETSAT credits are licence conditions: CC BY allows any reasonable manner
   for the medium, as compact map attributions do. */
.gs-stage .cesium-widget-credits {
  left: auto; right: 38px; bottom: 9px; max-width: calc(100% - 90px); padding: 3px 10px; border-radius: 10px;
  font: 9px Arial, sans-serif; color: #93a4b8; text-align: right; text-shadow: none;
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateX(14px); transition: opacity .25s, transform .25s, visibility .25s;
}
.gs-stage.gs-credits-open .cesium-widget-credits { opacity: 1; visibility: visible; transform: none; }
.gs-stage .cesium-widget-credits a { color: #b9c7d8; }
/* one line, so it never reaches the downlink panel above */
.gs-stage .cesium-widget-credits { line-height: 14px; }
.gs-stage .cesium-widget-credits img { vertical-align: middle !important; }
.gs-stage .cesium-credit-delimiter { padding: 0 .5em; }
.gs-credits-btn {
  position: absolute; z-index: 3; right: 12px; bottom: 9px; width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1px solid var(--glass-edge); background: var(--glass); color: var(--muted); cursor: pointer;
  font: italic 600 11px/1 Georgia, 'Times New Roman', serif; box-shadow: var(--glass-shine);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.gs-credits-btn:hover, .gs-credits-btn[aria-expanded=true] { color: #e2e8f0; border-color: rgba(255, 255, 255, 0.28); }
.gs-stage .cesium-credit-textContainer, .gs-stage .cesium-credit-logoContainer { display: inline; }
.gs-stage .cesium-credit-logoContainer img { max-height: 14px; width: auto; opacity: .7; }

/* ── Office TV (?tv=1) ── */
.gs-tv-body { margin: 0; background: #02060d; overflow: hidden; }
.gs-stage.gs-tv { height: 100vh; height: 100dvh; min-height: 0; border-radius: 0; font-size: 12px; touch-action: none; }
.gs-tv .gs-top { top: 18px; left: 22px; right: 22px; column-gap: 22px; row-gap: 10px; }
.gs-tv .gs-head { flex-wrap: nowrap; gap: 10px 22px; padding-right: 52px; }
.gs-tv .gs-head .gs-live { flex: 1 1 auto; min-width: 0; }
.gs-tv .gs-brand {
  flex: none; display: flex; align-items: center; gap: 14px;
  color: #f1f5f9; font: 600 15px Inter, system-ui, Arial, sans-serif; letter-spacing: .02em; text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
.gs-tv .gs-logo { height: 15px; width: auto; }
/* the SATLINE logo links to satline.tv (Gleb 2026-10-27); the rest of the title stays click-through */
.gs-brand-link { display: inline-flex; pointer-events: auto; color: inherit; border-radius: 4px; }
.gs-brand-link:hover .gs-logo, .gs-brand-link:focus-visible .gs-logo { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.45)); }
.gs-tv .gs-belt-labels text { font-size: 11.5px; }
.gs-tv .gs-belt-labels text.slot { font-size: 10px; }
.gs-tv .gs-station-labels text.name { font-size: 11.5px; }
.gs-tv text.badge-text { font-size: 10.5px; }
.gs-tv .gs-bottom { left: 22px; right: 56px; bottom: 8px; gap: 8px; }
.gs-tv .gs-clock { font-size: 12px; }
.gs-tv .gs-foot { font-size: 10.5px; gap: 4px 16px; }
.gs-tv .gs-pill { padding: 3px 10px; gap: 6px; }
.gs-tv .gs-pill b { font-size: 10.5px; }
.gs-tv .gs-pill .v { font-size: 12.5px; }
.gs-tv .gs-pill small { font-size: 9.5px; }
.gs-tv .gs-pill-total .v { font-size: 14px; }
.gs-tv .gs-live-foot { font-size: 9.5px; }
.gs-tv .gs-card { top: 64px; font-size: 12px; } .gs-tv .gs-card-head strong { font-size: 14px; }
.gs-tv .cesium-widget-credits { right: 50px; bottom: 6px; font-size: 9px; }
.gs-tv .gs-credits-btn { right: 22px; bottom: 6px; }
/* the office TV: controls fade when nobody uses them; only where there is a mouse (a phone keeps them) */
@media (hover: hover) {
  .gs-tv .gs-views, .gs-tv .gs-search, .gs-tv .gs-locate { transition: opacity .6s; }
  .gs-tv.gs-idle .gs-views, .gs-tv.gs-idle .gs-search:not(:focus-within),
  .gs-tv.gs-idle .gs-locate:not(:focus-within) { opacity: 0; pointer-events: none; }
  .gs-tv.gs-idle { cursor: none; }
}
.gs-stage:fullscreen { height: 100%; border-radius: 0; }

/* Search + location check (public and admin): in the CMP's top row, under the brand on the TV */
.gs-find { position: relative; display: flex; align-items: center; gap: 6px; margin-right: 4px; }
.gs-tv .gs-find { flex-direction: column; align-items: flex-start; margin: 0; }
.gs-search { position: relative; }
.gs-search input {
  width: 230px; min-height: 28px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--glass-edge);
  background: var(--glass); color: #f1f5f9; font: 400 11px Inter, system-ui, Arial, sans-serif; outline: none;
  box-shadow: var(--glass-shine), 0 8px 28px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.gs-search input::placeholder { color: #8aa0b8; }
.gs-search input:focus { border-color: var(--up-edge); }
.gs-results {
  position: absolute; z-index: 4; top: calc(100% + 6px); left: 0; width: 340px; max-height: 60vh; overflow-y: auto;
  padding: 4px; border-radius: 12px; background: var(--glass-strong); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shine), 0 12px 32px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
.gs-results[hidden] { display: none; }
.gs-results button {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 6px 10px; border: 0; border-radius: 8px;
  background: none; color: #f1f5f9; font: 500 12px Inter, system-ui, Arial, sans-serif; text-align: left; cursor: pointer;
}
.gs-results button:hover, .gs-results button:focus { background: rgba(255, 255, 255, 0.07); outline: none; }
.gs-results small { color: #8aa0b8; font-size: 10px; font-weight: 400; }
.gs-results-empty { padding: 8px 10px; color: #8aa0b8; }
.gs-tv .gs-search input { width: 240px; font-size: 11.5px; }

/* Location check: amber like its dot on the Earth, its GEO arc and its card line */
.gs-locate { display: flex; align-items: center; gap: 4px; }
.gs-locate input {
  box-sizing: border-box; width: 210px; min-height: 28px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--glass-edge);
  background: var(--glass); color: #f1f5f9; font: 400 11px Inter, system-ui, Arial, sans-serif; outline: none; font-variant-numeric: tabular-nums;
  box-shadow: var(--glass-shine), 0 8px 28px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.gs-locate input::placeholder { color: #8aa0b8; }
.gs-locate input:focus { border-color: rgba(251, 191, 36, 0.55); }
.gs-locate input.set { color: #fde68a; border-color: rgba(251, 191, 36, 0.5); background: rgba(120, 53, 15, 0.3); }
.gs-locate input[aria-invalid=true] { border-color: var(--down-edge); }
.gs-locate button {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0;
  border-radius: 50%; border: 1px solid var(--glass-edge); background: var(--glass); color: #fbbf24; font: 500 15px/1 Inter, system-ui, Arial, sans-serif; cursor: pointer;
  box-shadow: var(--glass-shine), 0 8px 28px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.gs-locate button:hover { border-color: rgba(251, 191, 36, 0.55); color: #fde68a; }
.gs-locate button#gs-loc-clear { color: var(--muted); }
.gs-find [hidden] { display: none !important; }   /* beats the button display rule above */
.gs-loc-note {
  position: absolute; z-index: 3; top: calc(100% + 6px); right: 0; white-space: nowrap;
  color: #fcd34d; font-size: 10px; text-shadow: 0 1px 3px #000; pointer-events: none;
}
.gs-loc-note.warn { color: #fca5a5; }
.gs-loc-note[hidden] { display: none; }
.gs-tv .gs-locate input { width: 206px; font-size: 11.5px; }
.gs-tv .gs-loc-note { position: static; padding-left: 12px; font-size: 10.5px; }
.gs-card-you {
  margin-top: 4px; padding: 2px 9px; border-radius: 8px; color: #fcd34d;
  background: rgba(120, 53, 15, 0.32); border: 1px solid rgba(251, 191, 36, 0.35); box-shadow: var(--glass-shine);
}

/* Full MEO / LEO legend */
.gs-keylines .gs-orbits { color: #b2bfd4; }
.gs-keylines .gs-orbits i { font-style: normal; }
.gs-keylines .gs-orbits .starlink { color: #7d93b2; }
.gs-keylines .gs-orbits .leo { color: #dbe4f0; }
.gs-keylines .gs-orbits .gnss { color: #c4b5fd; }
.gs-keylines .gs-orbits .meo { color: #bae6fd; }
.gs-keylines .gs-orbits b { font-weight: 400; color: #8cafc6; }

/* Awaiting monitoring (pending stations IT, NP and positions with no source yet): blue */
.gs-station-labels .pending path { stroke: #38bdf8; opacity: .7; }
.gs-station-labels .pending text.name { fill: #e0f2fe; }
rect.badge.pending { fill: rgba(12, 74, 110, 0.45); stroke: rgba(56, 189, 248, 0.6); }
text.badge-text.pending { fill: #7dd3fc; }
.gs-card-pending { color: #7dd3fc; }

/* The location check in the station row: amber name, its GEO arc as an amber glass badge */
.gs-station-labels .spot path { stroke: #fbbf24; opacity: .75; }
.gs-station-labels .spot text.name { fill: #fde68a; }
rect.badge.spot { fill: rgba(120, 53, 15, 0.45); stroke: rgba(251, 191, 36, 0.6); }
text.badge-text.spot { fill: #fcd34d; }

/* Fullscreen: a glass icon button in the top-right corner (Gleb 2026-10-27) */
.gs-fs {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; border: 1px solid var(--glass-edge); background: var(--glass); color: #cbd5e1; cursor: pointer; pointer-events: auto;
  box-shadow: var(--glass-shine), 0 8px 28px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  transition: border-color .2s, color .2s, opacity .6s;
}
.gs-fs:hover { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.gs-fs svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gs-fs .exit, .gs-fs[aria-pressed=true] .enter { display: none; }
.gs-fs[aria-pressed=true] .exit { display: block; }
.gs-tv .gs-fs { width: 26px; height: 26px; }
.gs-tv .gs-fs svg { width: 14px; height: 14px; }
@media (hover: hover) { .gs-tv.gs-idle .gs-fs { opacity: 0; pointer-events: none; } }
/* the CMP's TV link sits just before it in the corner */
.gs-corner .gs-tv-link {
  display: inline-flex; align-items: center; min-height: 26px; padding: 3px 11px; border-radius: 999px; pointer-events: auto;
  border: 1px solid var(--glass-edge); background: var(--glass); color: #cbd5e1; font: 500 11px Inter, system-ui, Arial, sans-serif;
  text-decoration: none; text-shadow: none; box-shadow: var(--glass-shine);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.gs-corner .gs-tv-link:hover { border-color: rgba(255, 255, 255, 0.28); color: #fff; }

/* ── Phone (Gleb 2026-10-27: the public page on a phone) ──
   The top grid stacks: title | fullscreen, the live badges under the title, search and location full
   width, the view buttons three to a row. No fan of orbit names (tap a satellite for its card, which
   sits at the bottom); 16 px inputs so iOS does not zoom in on focus. Last in the file on purpose. */
@media (max-width: 700px) {
  .gs-top, .gs-tv .gs-top { top: 10px; left: 10px; right: 10px; column-gap: 10px; row-gap: 8px; }
  .gs-head, .gs-tv .gs-head { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 8px; padding-right: 40px; }
  .gs-top > .gs-find { grid-row: 2; grid-column: 1 / -1; }
  .gs-views { grid-row: 3; grid-column: 1 / -1; }
  .gs-tv .gs-head .gs-live { flex: none; width: 100%; }
  .gs-tv .gs-brand { font-size: 15px; gap: 10px; }
  .gs-tv .gs-logo { height: 15px; }
  .gs-tv .gs-pill { padding: 3px 9px; gap: 5px; }
  .gs-tv .gs-pill b { font-size: 10px; }
  .gs-tv .gs-pill .v { font-size: 12.5px; }
  .gs-tv .gs-pill small { font-size: 9.5px; }
  .gs-tv .gs-pill-total .v { font-size: 14px; }
  .gs-tv .gs-live-foot { font-size: 10px; }
  .gs-find, .gs-tv .gs-find { flex-direction: column; align-items: stretch; width: 100%; margin: 0; }
  .gs-search input, .gs-tv .gs-search input { box-sizing: border-box; width: 100%; font-size: 16px; }
  .gs-locate { width: 100%; }
  .gs-locate input, .gs-tv .gs-locate input { flex: 1; width: auto; min-width: 0; font-size: 16px; }
  .gs-results { width: 100%; box-sizing: border-box; }
  .gs-loc-note, .gs-tv .gs-loc-note { position: static; padding-left: 12px; white-space: normal; }
  .gs-views { justify-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* CMP on a phone: the corner (view buttons, TV view, fullscreen) drops under the search */
  .gs-stage:not(.gs-tv) .gs-corner { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; flex-wrap: wrap; justify-content: flex-end; }
  .gs-stage:not(.gs-tv) .gs-corner .gs-views { flex: 1 1 100%; }
  .gs-top > .gs-live { grid-row: 3; }
  .gs-tv .gs-station-labels text.name, .gs-station-labels text.name { font-size: 11px; }
  .gs-tv text.badge-text { font-size: 10.5px; }
  .gs-views button { padding: 5px 6px; white-space: normal; text-align: center; line-height: 1.2; }
  .gs-belt-labels text, .gs-tv .gs-belt-labels text { font-size: 9.5px; }
  .gs-belt-labels text.slot, .gs-tv .gs-belt-labels text.slot { font-size: 8px; }
  .gs-card, .gs-tv .gs-card {
    top: auto; bottom: 84px; left: 10px; right: 10px; transform: none;
    min-width: 0; max-width: none; max-height: 45%; overflow-y: auto; font-size: 12px;
  }
  .gs-tv .gs-card-head strong { font-size: 14px; }
  .gs-bottom, .gs-tv .gs-bottom { left: 10px; right: 40px; bottom: 8px; gap: 6px; }
  .gs-clock, .gs-tv .gs-clock { padding: 3px 8px; font-size: 12px; }
  .gs-foot, .gs-tv .gs-foot { font-size: 10.5px; gap: 3px 12px; }
  .gs-tv .gs-credits-btn { right: 10px; bottom: 8px; }
  .gs-tv .cesium-widget-credits { right: 36px; }
}

/* On a phone the orbit name's rate sits on its second line, coloured like the badges */
.gs-belt-labels tspan.rate { font-weight: 600; }
.gs-belt-labels tspan.rate.up { fill: var(--up); }
.gs-belt-labels tspan.rate.down { fill: var(--down); }
.gs-belt-labels tspan.rate.unknown { fill: var(--stale); }
.gs-belt-labels tspan.rate.pending { fill: #7dd3fc; }

/* Touch screens: + / − zoom bottom right (Gleb 2026-10-27: the globe must be controllable by touch). The
   full-screen page takes every gesture (touch-action on .gs-tv); lists inside it still scroll. */
.gs-zoom { position: absolute; z-index: 3; right: 12px; bottom: 40px; display: none; flex-direction: column; gap: 6px; }
@media (pointer: coarse) { .gs-zoom { display: flex; } }
.gs-zoom button {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--glass-edge); background: var(--glass);
  color: #e2e8f0; font: 400 20px/1 Inter, system-ui, Arial, sans-serif; cursor: pointer; box-shadow: var(--glass-shine), 0 8px 28px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.gs-zoom button:active { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); }
.gs-results, .gs-card { touch-action: pan-y; }