/* Space Domain Analysis: the tracker's own components. The page frame, type, buttons, fields, the figure caption and
   the segmented control (.irpair__modes) come from velox.css and theme-anduril.css, and everything here reads their
   custom properties. The globe and the sky map sit on a fixed dark panel, so their own colours are a fixed set. */
:root {
  --hover: var(--teal-dim, rgba(255, 255, 255, .06));
  --warn: var(--velox-lift);
  --station: var(--velox-lift);
  --xbtn: 194, 69, 63;          /* the explore buttons: Velox red */
}

/* ---------- the top block: eyebrow, one-line title, the location row, then the globe ---------- */
.oh-top { padding-top: calc(72px + 26px); }           /* under the fixed masthead */
.oh-top .label { margin-bottom: 0; }
.oh-title { margin: 10px 0 18px; font: 400 clamp(1.7rem, 2.6vw, 2.4rem)/1.15 var(--sans); letter-spacing: -.02em; color: var(--paper); }
.oh-title .oh-where-name { color: var(--paper); }
.oh-locbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 0 0 14px; }
.oh-locbar .oh-btn { flex: 0 0 auto; }
.oh-locbar .oh-combo { flex: 1 1 220px; max-width: 340px; }
.oh-locbar .field input { padding-top: 11px; padding-bottom: 11px; }
.oh-btn { cursor: pointer; background: transparent; }
.oh-btn[disabled] { opacity: .55; cursor: default; }
.oh-btn[hidden] { display: none; }
.oh-note { font: 400 12px/1.5 var(--sans); letter-spacing: 0; color: var(--paper-3); margin: 0; }
.oh-note:empty { display: none; }
.oh-geomsg { margin: -6px 0 12px; }
.oh-locnote { flex: 1 1 280px; margin: 0; align-self: center; padding-bottom: 2px; font-size: 13px; line-height: 1.5; color: var(--paper-2); }

/* the city combobox: the input is a .field from site.css, the list drops under it */
.oh-combo { position: relative; }
.oh-combo__list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  margin: 4px 0 0; padding: 4px 0; list-style: none;
  background: var(--ink-raise); border: 1px solid var(--rule); border-radius: 6px;
  max-height: min(400px, 62vh); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.oh-combo__list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; cursor: pointer; }
.oh-combo__list li[aria-selected="true"] { background: var(--hover); box-shadow: inset 2px 0 0 var(--accent); }
.oh-combo__list li:hover { background: var(--hover); }
.oh-combo__name { font: 400 14px/1.35 var(--sans); color: var(--paper); }
.oh-combo__sub { font: 400 11.5px/1.35 var(--sans); color: var(--paper-3); font-variant-numeric: tabular-nums; }
.oh-combo__list li.oh-combo__none { cursor: default; font: 400 12.5px/1.5 var(--sans); color: var(--paper-2); }
.oh-combo__list li.oh-combo__none:hover { background: transparent; }

/* latitude and longitude, with the Set button on the same baseline as the inputs */
.oh-latlon { display: grid; grid-template-columns: 104px 104px auto; gap: 10px; align-items: end; }
.oh-latlon .oh-btn { padding: 12px 16px; }
.oh-latlon input { -moz-appearance: textfield; }
.oh-latlon input::-webkit-outer-spin-button, .oh-latlon input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- 02 globe ---------- */
.oh-elements { margin: 18px 0 0; font: 400 12px/1.6 var(--sans); letter-spacing: 0; color: var(--paper-3); }
.oh-elements.is-warn { color: var(--warn); }
.oh-stats {
  margin: 16px 0 20px; padding: 11px 0;
  border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
  font: 500 12.5px/1.6 var(--sans); letter-spacing: .01em; color: var(--paper);
  min-height: 42px;
}

/* the globe: full content width, about 70vh tall on desktop, square on phones */
.oh-sky { width: 100%; max-width: none; }
.oh-sky__panel { padding: 0; position: relative; }
.oh-globe { position: relative; width: 100%; height: clamp(420px, 70vh, 900px); }
.oh-globe[hidden] { display: none; }
.oh-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; border-radius: inherit; }
.oh-canvas:active { cursor: grabbing; }
.oh-canvas:focus { outline: none; }
.oh-canvas:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }
.oh-map, .diagram svg.oh-map { display: block; width: auto; max-width: 100%; height: clamp(420px, 70vh, 900px); aspect-ratio: 1 / 1; margin: 0 auto; }   /* beats .diagram svg { width: 100% } */
.oh-map[hidden], .diagram svg.oh-map[hidden] { display: none; }

/* overlays over the canvas: projected labels, the hover tooltip, the quiet progress line, the card */
.oh-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.oh-tag, .oh-tip {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 500 11px/1 var(--sans); letter-spacing: .02em; color: #f0eee9;
  padding: 3px 6px; border-radius: 2px; background: rgba(1, 1, 1, .55);
}
.oh-tag[hidden], .oh-tip[hidden] { display: none; }
.oh-tag--iss { color: #fff; border-left: 2px solid #c2453f; }
.oh-tag--sel { border-left: 2px solid #f0eee9; }
.oh-tag--you { color: #f0c8c5; border-left: 2px solid #c2453f; }
.oh-tip { background: rgba(1, 1, 1, .8); color: #fff; }
.oh-progress {
  position: absolute; right: 10px; bottom: 8px; margin: 0; pointer-events: none;
  font: 400 11px/1.4 var(--sans); letter-spacing: .02em; color: #928d84;
  font-variant-numeric: tabular-nums;
}
.oh-progress[hidden] { display: none; }
.oh-card {
  position: absolute; left: 10px; bottom: 10px; max-width: min(260px, calc(100% - 20px)); z-index: 3;
  padding: 10px 12px 12px; border-radius: 2px;
  background: rgba(10, 10, 10, .86); border: 1px solid #2a2a28; color: #f0eee9;
  backdrop-filter: blur(2px);
}
.oh-card[hidden] { display: none; }
.oh-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.oh-card__name { margin: 0; font: 600 14px/1.3 var(--sans); letter-spacing: -.005em; color: #fff; }
.oh-card__close {
  appearance: none; -webkit-appearance: none; cursor: pointer; flex: 0 0 auto;
  width: 24px; height: 24px; margin: -4px -6px 0 0; padding: 0; border: 0; border-radius: 2px;
  background: transparent; color: #c9c9c5; font: 400 18px/24px var(--sans);
}
.oh-card__close:hover, .oh-card__close:focus-visible { color: #fff; background: rgba(255, 255, 255, .1); outline: none; }
.oh-card__type { margin: 3px 0 0; font: 500 10px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8e9291; }
.oh-card__line { margin: 7px 0 0; font: 400 12px/1.5 var(--sans); color: #c9c9c5; }
.oh-card .oh-chipbtn { margin-top: 10px; }

/* the control panel on the right edge of the globe: view, camera, paths and layers, translucent over the scene */
.oh-ctl {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 200px; max-height: calc(100% - 20px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
  box-sizing: border-box; padding: 12px; display: flex; flex-direction: column; gap: 14px;
  background: rgba(1, 1, 1, .62); border: 1px solid rgba(255, 255, 255, .14); border-radius: 4px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-family: var(--sans);
}
.oh-ctl[hidden] { display: none; }
.oh-ctl__group { display: flex; flex-direction: column; gap: 6px; }
.oh-ctl__label { margin: 0 0 2px; font: 500 10.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8e9291; }
.oh-ctl__btn {
  appearance: none; -webkit-appearance: none; cursor: pointer; display: block; width: 100%; min-height: 32px; margin: 0; padding: 6px 12px;
  box-sizing: border-box; text-align: left; font: 400 12.5px/1.35 var(--sans); letter-spacing: 0; color: #fff; white-space: normal;
  border: 1px solid rgba(255, 255, 255, .32); border-radius: 100px; background: transparent;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.oh-ctl__btn:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.oh-ctl__btn[aria-pressed="true"] { background: #fff; border-color: #fff; color: #010101; }
.oh-ctl__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.oh-ctl__btn[disabled] { opacity: .45; cursor: default; }
.oh-ctl__glyph { display: inline-block; width: 14px; margin-right: 4px; text-align: center; font-size: 15px; }
.oh-ctl__zoom { display: flex; gap: 6px; }
.oh-ctl__btn--zoom { flex: 1 1 0; text-align: center; padding: 0; font-size: 18px; line-height: 30px; }
.oh-ctl .irpair__modes.oh-ctl__modes { display: flex; width: 100%; border-color: rgba(255, 255, 255, .32); }
.oh-ctl .oh-ctl__modes button { flex: 1 1 0; height: 30px; padding: 0 6px; font: 400 12.5px/30px var(--sans); color: #fff; border-right-color: rgba(255, 255, 255, .2); }
.oh-ctl .oh-ctl__modes button[aria-pressed="true"] { background: #fff; color: #010101; }
.oh-ctl .oh-skymodes[hidden] { display: none; }
.oh-ctl .oh-link { padding: 2px 0 0; color: #c9c9c5; text-decoration-color: #8e9291; }
.oh-ctl .oh-link:hover { color: #fff; }
.oh-ctl .oh-check { color: #e6e6e2; padding: 3px 0; }
/* phone: a round Controls button that opens the panel as a sheet over the lower half of the globe */
.oh-ctlbtn {
  position: absolute; top: 8px; right: 8px; z-index: 4; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 100px; background: rgba(1, 1, 1, .62); color: #fff; font: 400 20px/38px var(--sans); text-align: center;
}
.oh-ctlbtn[hidden] { display: none; }
.oh-ctlbtn[aria-expanded="true"] { background: #fff; color: #010101; }
.oh-ctlbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.oh-sky__panel.is-narrow .oh-ctl { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: calc(50% - 8px); }
.oh-ctl .oh-globeonly[hidden] { display: none; }
/* phones: checkbox rows get a full-height tap target, like the buttons */
.oh-sky__panel.is-narrow .oh-check { min-height: 32px; }
.oh-sky__panel.is-narrow .oh-check input { width: 18px; height: 18px; }

/* a link-styled button (the Starlink paths switch) and the hide-Starlink checkbox */
.oh-link { appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0; padding: 6px 2px; border: 0; background: transparent; font: 400 12px/1.4 var(--sans); color: var(--paper-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--grey); }
.oh-link:hover { color: var(--paper); }
.oh-link:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; border-radius: 2px; }
.oh-link[hidden] { display: none; }
.oh-check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: 400 12px/1.4 var(--sans); color: var(--paper-2); }
.oh-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.oh-check input:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* the hint on the globe's top-left corner, styled like the control panel across from it */
.oh-hint {
  position: absolute; top: 10px; left: 10px; z-index: 2; margin: 0; max-width: calc(100% - 240px); pointer-events: none;
  box-sizing: border-box; padding: 7px 11px; border-radius: 4px;
  background: rgba(1, 1, 1, .62); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 400 12.5px/1.35 var(--sans); letter-spacing: 0; color: #f0eee9;
}
.oh-hint:empty { display: none; }
.oh-sky__panel.is-narrow .oh-hint { top: 8px; left: 8px; max-width: calc(100% - 64px); padding: 6px 9px; font-size: 12px; }
/* under the globe: the time row, then the explore strip (the four walkthroughs and the two map layers). On wide screens
   the explore strip, the legend and the notes move to a column on the right of the globe (see the end of this part). */
.oh-bar { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.oh-bar .oh-time { flex: 1 1 auto; }
.oh-explore { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 28px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.oh-explore__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.oh-explore__label { margin: 0; font: 500 10.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-3); }
.oh-explore__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.oh-xbtn {
  appearance: none; -webkit-appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 11px; border: 1px solid rgba(var(--xbtn), .7); border-radius: 100px; background: rgba(var(--xbtn), .12);
  font: 500 13px/1.1 var(--sans); letter-spacing: -.005em; color: var(--paper); white-space: nowrap;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.oh-xbtn:hover { background: rgba(var(--xbtn), .26); border-color: rgb(var(--xbtn)); }
.oh-xbtn[aria-expanded="true"], .oh-xbtn[aria-pressed="true"] { background: rgb(var(--xbtn)); border-color: rgb(var(--xbtn)); color: #fff; }
.oh-xbtn[disabled] { opacity: .45; cursor: default; }
.oh-xbtn[disabled]:hover { background: rgba(var(--xbtn), .12); border-color: rgba(var(--xbtn), .7); }
.oh-xbtn:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.oh-xbtn__icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.oh-xbtn--layer { border-color: rgba(255, 255, 255, .3); background: transparent; }
.oh-xbtn--layer:hover { background: rgba(255, 255, 255, .07); border-color: var(--paper); }
.oh-xbtn--layer[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.oh-xbtn--layer[disabled]:hover { background: transparent; border-color: rgba(255, 255, 255, .3); }

/* wide screens: a column on the right of the globe for the explore buttons, the legend and the notes, so they show
   next to the globe instead of under it. From 1280 px the globe stays at least 860 px wide, so a walkthrough's panel
   still sits over its left side (assets/js/panel.js, DOCK_MIN). Past the 1440 px page width the globe and the column
   reach out past the text on both sides, up to 1760 px across, so a big screen gets a bigger globe while the
   heading and the masthead keep their places. */
@media (min-width: 1280px) {
  .oh-sky { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 360px); grid-template-rows: auto 1fr; column-gap: 24px; align-items: start; }
  .oh-main { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
  .oh-globe { height: clamp(420px, 70vh, 720px); }               /* under 1600 px the globe is 890 to 1150 px wide: keep the Earth clear of the controls */
  .oh-side { grid-column: 2; grid-row: 1; min-width: 0; }
  .oh-sky > figcaption { grid-column: 2; grid-row: 2; margin-top: 14px; font-size: 12px; line-height: 1.5; }
  .oh-side .oh-explore { display: block; margin: 0; padding: 0; border: 0; }
  .oh-side .oh-explore__group { display: block; }
  .oh-side .oh-explore__group + .oh-explore__group { margin-top: 20px; }
  .oh-side .oh-explore__label { margin-bottom: 9px; }
  .oh-side .oh-explore__btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .oh-side .oh-explore__group + .oh-explore__group .oh-explore__btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .oh-side .oh-xbtn { justify-content: flex-start; min-height: 40px; padding: 9px 14px 9px 12px; }
  .oh-side .oh-legend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule-soft); }
  .oh-side .oh-legend li:last-child { grid-column: 1 / -1; align-items: flex-start; }
  .oh-side .oh-legend li:last-child .oh-sw { margin-top: 3px; }
  .oh-side .oh-help { margin-top: 16px; }
}
@media (min-width: 1440px) {
  figure.figblock.oh-sky { width: auto; margin-inline: calc((min(100vw, 1760px) - 1440px) / -2); }   /* beats figure.figblock { margin: 0 } */
}
@media (min-width: 1600px) {
  .oh-sky { column-gap: 32px; }
  .oh-globe { height: clamp(420px, 70vh, 900px); }               /* 1150 px wide or more: room for the full height */
  .oh-side .oh-xbtn { min-height: 44px; font-size: 14px; }
  .oh-side .oh-explore__btns { gap: 8px; }
  .oh-side .oh-legend li, .oh-side .oh-legend .oh-chip { font-size: 12.5px; }
  .oh-side .oh-help, .oh-sky > figcaption { font-size: 12.5px; }
}

/* ---------- the explore modes (packet journey, race, ride along, GPS): a panel over the globe's left side, or under
   the globe when it is narrow ---------- */
/* while one is open the usual overlays step aside, and the globe is taller with the panel over it, shorter with the
   panel under it, so both fit on the screen */
.oh-sky__panel.is-mode .oh-globe { height: clamp(360px, 52vh, 640px); }
.oh-sky__panel.is-mode.is-jdocked .oh-globe { height: clamp(520px, 84vh, 980px); }
.oh-sky__panel.is-mode .oh-ctl, .oh-sky__panel.is-mode .oh-ctlbtn, .oh-sky__panel.is-mode .oh-hint,
.oh-sky__panel.is-mode .oh-card, .oh-sky__panel.is-mode .oh-progress { display: none !important; }
.oh-mp {
  position: absolute; top: 10px; left: 10px; z-index: 4; box-sizing: border-box;
  width: 376px; max-height: calc(100% - 20px); display: flex; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px;
  background: rgba(4, 6, 11, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #f3f5f8; font-family: var(--sans);
}
.oh-mp[hidden] { display: none; }
.oh-mp__top { flex: 0 0 auto; padding: 12px 14px 0; }
.oh-mp__scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 14px 12px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.oh-mp__foot {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px;
  padding: 10px 14px 12px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.oh-mp.is-below {
  position: static; width: auto; max-height: none; border-radius: 0; border-width: 1px 0 0;
  background: #0a0a0a; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.oh-mp.is-below .oh-mp__scroll { overflow: visible; }
/* under a wide globe: the hops on the left, the step on the right */
.oh-mp.is-below:not(.is-chips) .oh-mp__scroll { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 26px; align-items: start; }
.oh-mp.is-below:not(.is-chips) .oh-mp__detail { margin-top: 10px; padding-top: 0; border-top: 0; }
.oh-mp__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oh-mp__kicker { margin: 0; font: 600 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.oh-mp .oh-card__close { margin: -6px -8px -6px 0; }
.oh-mp__route { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.oh-mp__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.oh-mp__lbl { font: 500 10px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8a93a5; }
.oh-mp__select {
  appearance: none; -webkit-appearance: none; cursor: pointer; box-sizing: border-box; width: 100%; min-height: 32px;
  padding: 6px 28px 6px 11px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px; background-color: rgba(255, 255, 255, .03);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b8c0cc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  font: 400 12.5px/1.2 var(--sans); color: #fff; text-overflow: ellipsis;
}
.oh-mp__select:hover { border-color: rgba(255, 255, 255, .5); }
.oh-mp__select option { background: #0d0d0d; color: #fff; }
.oh-mp__select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.oh-mp__net { margin: 10px 0 0; padding: 7px 10px; border-radius: 7px; background: rgba(255, 255, 255, .05); font: 400 12px/1.45 var(--sans); color: #b8c0cc; }
.oh-mp__net.is-starlink { background: rgba(var(--xbtn), .2); color: #fff; }
.oh-mp__net[hidden] { display: none; }
/* the hops: a traceroute, each stop with the light time from the dish, joined by a line in the colour of the link */
.oh-mp__hops { list-style: none; margin: 4px 0 0; padding: 0; }
.oh-mp__hops li { position: relative; }
.oh-mp__hops li + li::before {
  content: ""; position: absolute; left: 13px; top: -5px; width: 2px; height: 10px; border-radius: 1px;
  background: var(--hc); opacity: .3;
}
.oh-mp__hops li:has(.is-done)::before, .oh-mp__hops li:has([aria-current="step"])::before { opacity: 1; }
.oh-jhop {
  appearance: none; -webkit-appearance: none; cursor: pointer; box-sizing: border-box;
  display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto; align-items: center; column-gap: 9px;
  width: 100%; margin: 0; padding: 5px 9px 5px 4px; border: 0; border-radius: 7px; background: transparent;
  text-align: left; font: 400 12.5px/1.25 var(--sans); color: #8a93a5;
}
.oh-jhop:hover { background: rgba(255, 255, 255, .05); }
.oh-jhop:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.oh-jhop__num {
  display: inline-grid; place-items: center; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--hc); font: 600 10.5px/1 var(--sans); color: var(--hc);
}
.oh-jhop__name { font-weight: 500; color: #c9d0da; white-space: nowrap; }
.oh-jhop__short { display: none; }
.oh-jhop__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6f7888; }
.oh-jhop__ms { white-space: nowrap; color: #b8c0cc; font-variant-numeric: tabular-nums; }
.oh-jhop.is-done .oh-jhop__num { background: var(--hc); color: #05070c; }
.oh-jhop.is-done .oh-jhop__name { color: #e3e8ef; }
.oh-jhop[aria-current="step"] { background: rgba(255, 255, 255, .09); }
.oh-jhop[aria-current="step"] .oh-jhop__num { background: var(--hc); color: #05070c; box-shadow: 0 0 0 3px rgba(255, 255, 255, .1), 0 0 12px var(--hc); }
.oh-jhop[aria-current="step"] .oh-jhop__name, .oh-jhop[aria-current="step"] .oh-jhop__ms { color: #fff; }
.oh-jhop[aria-current="step"] .oh-jhop__sub { color: #b8c0cc; }
.oh-mp__hophead { display: flex; justify-content: space-between; gap: 10px; margin: 12px 9px 2px 4px; font: 500 10px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #6f7888; }
.oh-mp__hophead[hidden] { display: none; }
/* the step */
.oh-mp__detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.oh-mp__title { margin: 0; font: 600 16.5px/1.25 var(--sans); letter-spacing: -.01em; color: #fff; }
.oh-mp__body { margin: 6px 0 0; font: 400 13.5px/1.5 var(--sans); color: #d6dbe3; }
.oh-mp__facts { margin: 9px 0 0; font: 500 12.5px/1.45 var(--sans); color: var(--accent); font-variant-numeric: tabular-nums; }
.oh-mp__note { margin: 6px 0 0; font: 400 11.5px/1.45 var(--sans); color: #8a93a5; }
.oh-mp__facts[hidden], .oh-mp__note[hidden] { display: none; }
.oh-mp__clock { margin: 0; min-width: 0; font: 500 11px/1.3 var(--sans); letter-spacing: .02em; color: #7ff0c8; font-variant-numeric: tabular-nums; }
.oh-mp__ctl { display: flex; gap: 6px; margin-left: auto; }
.oh-mp .oh-chipbtn { color: #fff; border-color: rgba(255, 255, 255, .3); }
.oh-mp .oh-chipbtn:hover { border-color: #fff; }
.oh-mp .oh-chipbtn[disabled] { opacity: .4; cursor: default; border-color: rgba(255, 255, 255, .3); }
.oh-mp .oh-chipbtn[aria-pressed="true"] { background: #fff; color: #05070c; border-color: #fff; }
/* the summary: this path against fiber and a geostationary satellite, the bars filling at one speed */
.oh-mp__barhead { margin: 12px 0 6px; font: 500 10.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8a93a5; }
.oh-mp__bar { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(56px, auto); align-items: center; gap: 8px; margin: 6px 0; font: 400 12px/1.3 var(--sans); color: #d6dbe3; }
.oh-mp__bart { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.oh-mp__barf { display: block; width: 0; height: 100%; border-radius: 4px; transition-property: width; transition-timing-function: linear; }
.oh-mp__barv { text-align: right; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oh-mp__measured { margin: 10px 0 0; font: 500 12.5px/1.45 var(--sans); color: #7ff0c8; }
.oh-mp__measured:empty { display: none; }
/* phones: the hops as a row of chips over the step */
.oh-mp.is-chips .oh-mp__hops { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 1px 0 3px; }
.oh-mp.is-chips .oh-mp__hops::-webkit-scrollbar { display: none; }
.oh-mp.is-chips .oh-mp__hops li::before { display: none; }
.oh-mp.is-chips .oh-jhop { display: inline-flex; width: auto; gap: 7px; padding: 4px 12px 4px 4px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 100px; white-space: nowrap; }
.oh-mp.is-chips .oh-jhop[aria-current="step"] { border-color: var(--hc); }
.oh-mp.is-chips .oh-jhop__short { display: inline; }
.oh-mp.is-chips .oh-jhop__long, .oh-mp.is-chips .oh-jhop__sub, .oh-mp.is-chips .oh-jhop__ms, .oh-mp.is-chips .oh-mp__hophead { display: none; }
.oh-mp.is-chips .oh-mp__hops { margin-top: 12px; }
/* labels on the globe for each stop: buttons that jump to that step */
.oh-jlabels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.oh-jlabels[hidden] { display: none; }
.oh-jtag {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; white-space: nowrap;
  margin: 0; padding: 4px 8px 4px 7px; border: 1px solid rgba(255, 255, 255, .18); border-left: 3px solid var(--jc, #8ab4ff); border-radius: 4px;
  background: rgba(4, 6, 11, .74); font: 500 11px/1.1 var(--sans); letter-spacing: .01em; color: #e3e8ef;
}
.oh-jtag[hidden] { display: none; }
.oh-jtag.is-future { opacity: .6; }
.oh-jtag:hover, .oh-jtag.is-current { opacity: 1; color: #fff; background: rgba(14, 22, 40, .92); border-color: rgba(255, 255, 255, .45); border-left-color: var(--jc, #8ab4ff); }
.oh-jtag--you { --jc: #e8675e; } .oh-jtag--sat { --jc: #8ab4ff; } .oh-jtag--laser { --jc: #ff7ad9; } .oh-jtag--gw { --jc: #ffd479; }
.oh-jtag--hub, .oh-jtag--dest { --jc: #7ff0c8; }
.oh-jtag--fiber { --jc: #7ff0c8; } .oh-jtag--geo { --jc: #e0a93f; } .oh-jtag--city { --jc: #e8675e; }
.oh-jtag--near { --jc: #9aa6b8; pointer-events: none; cursor: default; }

/* bits the panels share: a lead line, a row of preset chips, a segmented choice, a small key-value grid */
.oh-mp__lead { margin: 10px 0 0; font: 400 12.5px/1.45 var(--sans); color: #b8c0cc; }
.oh-mp__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.oh-mp__chip {
  appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 100px; background: transparent; font: 400 11.5px/1.2 var(--sans); color: #d6dbe3; white-space: nowrap;
}
.oh-mp__chip:hover { border-color: rgba(255, 255, 255, .55); color: #fff; }
.oh-mp__chip[aria-pressed="true"] { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }
.oh-mp__chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.oh-mp__seg { display: inline-flex; border: 1px solid rgba(255, 255, 255, .28); border-radius: 100px; overflow: hidden; }
.oh-mp__seg button {
  appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0; padding: 6px 12px; border: 0; border-right: 1px solid rgba(255, 255, 255, .18);
  background: transparent; font: 400 12px/1.2 var(--sans); color: #e3e8ef; white-space: nowrap;
}
.oh-mp__seg button:last-child { border-right: 0; }
.oh-mp__seg button:hover { background: rgba(255, 255, 255, .08); }
.oh-mp__seg button[aria-pressed="true"] { background: #fff; color: #05070c; }
.oh-mp__seg button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.oh-mp__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; }
.oh-mp__rowlbl { font: 500 10px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8a93a5; }
.oh-mp__kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 12px 0 0; }
.oh-mp__kv div { min-width: 0; }
.oh-mp__kv dt { font: 500 10px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8a93a5; }
.oh-mp__kv dd { margin: 3px 0 0; font: 500 15px/1.25 var(--sans); color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.oh-mp__kv dd small { display: block; margin-top: 2px; font: 400 11.5px/1.35 var(--sans); color: #8a93a5; }
.oh-mp__kv .is-wide { grid-column: 1 / -1; }

/* the race: one lane per packet, filling as it travels, its time and its place at the end */
.oh-race__lanes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.oh-race__lane { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name time" "track track" "sub sub"; gap: 4px 10px; }
.oh-race__name { grid-area: name; display: flex; align-items: center; gap: 7px; min-width: 0; font: 500 13px/1.25 var(--sans); color: #fff; }
.oh-race__name::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 8px var(--lc); }
.oh-race__time { grid-area: time; font: 500 13px/1.25 var(--sans); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oh-race__place { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 100px; font: 600 10.5px/1.4 var(--sans); color: #05070c; background: var(--lc); }
.oh-race__place:empty { display: none; }
.oh-race__track { grid-area: track; position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.oh-race__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--lc); }
.oh-race__sub { grid-area: sub; font: 400 11.5px/1.35 var(--sans); color: #8a93a5; }
.oh-race__lane.is-out .oh-race__name { color: #8a93a5; }

/* layers drawn over the globe: a small key for each one that is on, at the globe's bottom left (the controls hold the
   right side). A satellite's card, which sits there too, goes on top of the keys. While a mode is open the controls
   step aside, and the keys move to the right, clear of the mode's panel. */
.oh-layers { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; gap: 8px; width: 244px; pointer-events: none; }
.oh-sky__panel.has-layers .oh-card { bottom: calc(18px + var(--keys-h, 0px)); }
.oh-sky__panel.is-mode .oh-layers { left: auto; right: 10px; }
.oh-layers[hidden], .oh-lay[hidden] { display: none; }
.oh-lay {
  box-sizing: border-box; padding: 9px 11px 10px; border-radius: 6px; background: rgba(1, 1, 1, .66); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #f0eee9; font-family: var(--sans);
}
.oh-lay__title { display: flex; align-items: center; gap: 7px; margin: 0; font: 600 12px/1.3 var(--sans); color: #fff; }
.oh-lay__sw { flex: 0 0 auto; width: 16px; height: 0; border-top: 2px solid #ff7ad9; box-shadow: 0 0 6px #ff7ad9; }
.oh-lay__val { margin: 4px 0 0; font: 500 11.5px/1.4 var(--sans); color: #e3e8ef; font-variant-numeric: tabular-nums; }
.oh-lay__note { margin: 4px 0 0; font: 400 11px/1.4 var(--sans); color: #9aa3b2; }
.oh-lay__ramp { height: 8px; margin: 8px 0 0; border-radius: 2px; }
.oh-lay__ticks { display: flex; justify-content: space-between; margin-top: 3px; font: 400 10.5px/1.2 var(--sans); color: #b8c0cc; font-variant-numeric: tabular-nums; }
.oh-sky__panel.is-narrow .oh-layers { left: 8px; bottom: 8px; width: 200px; }
.oh-sky__panel.is-narrow.has-layers .oh-card { bottom: calc(14px + var(--keys-h, 0px)); }
.oh-sky__panel.is-narrow .oh-lay__note { display: none; }
.oh-sky__panel.is-mode:not(.is-mode-ride) .oh-layers { display: none; }
.oh-sky__panel.is-mode-ride.is-narrow .oh-layers { display: none; }

/* ride along: the controls under the stats */
.oh-ride__pick { margin-top: 10px; }
.oh-ride__tip { margin: 12px 0 0; font: 400 11.5px/1.45 var(--sans); color: #8a93a5; }

/* GPS: the satellites in view with their distance and signal time */
.oh-gps__sats { width: 100%; margin: 12px 0 0; border-collapse: collapse; font: 400 12px/1.3 var(--sans); color: #d6dbe3; font-variant-numeric: tabular-nums; }
.oh-gps__sats th { padding: 0 6px 5px 0; text-align: left; font: 500 10px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #8a93a5; }
.oh-gps__sats td { padding: 4px 6px 4px 0; border-top: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; }
.oh-gps__sats th:not(:first-child), .oh-gps__sats td:not(:first-child) { text-align: right; }
.oh-gps__sats td:first-child { display: flex; align-items: center; gap: 7px; }
.oh-gps__sats .oh-gps__sw { width: 8px; height: 8px; border-radius: 50%; background: var(--sc, #9aa6b8); flex: 0 0 auto; }
.oh-gps__sats tr.is-used td { color: #fff; }
.oh-camera[hidden] { display: none; }
.oh-chipbtn, .oh-chip {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font: 400 12px/1 var(--sans); letter-spacing: 0; color: var(--paper);
  padding: 7px 12px; border: 1px solid var(--rule); border-radius: 100px; background: transparent;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.oh-chipbtn:hover, .oh-chip:hover { border-color: var(--paper); }
.oh-chipbtn[aria-pressed="true"], .oh-chip[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.oh-chipbtn[disabled], .oh-chip[disabled] { opacity: .45; cursor: default; }
.oh-chipbtn:focus-visible, .oh-chip:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* time: the clock, the offset, the scrub slider, time-lapse and Now */
.oh-time { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.oh-clock { font: 400 12px/1.4 var(--sans); letter-spacing: .02em; color: var(--paper-2); font-variant-numeric: tabular-nums; }
.oh-clock:empty { display: none; }
.oh-offset { font: 500 11px/1 var(--sans); letter-spacing: .04em; color: var(--ink); background: #e0a93f; padding: 4px 7px; border-radius: 2px; }
.oh-offset:empty { display: none; }
.oh-time__label { font: 400 11px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--paper-3); }
.oh-scrub { flex: 1 1 160px; min-width: 120px; max-width: 260px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.oh-scrub:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* legend chips */
.oh-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.oh-legend li { display: inline-flex; align-items: center; gap: 6px; font: 400 11.5px/1.4 var(--sans); color: var(--paper-2); }
.oh-legend .oh-chip { padding: 4px 10px 4px 7px; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--paper-2); }
.oh-legend .oh-chip[aria-pressed="true"] { color: var(--ink); }
.oh-legend .oh-chip[aria-pressed="false"] { color: var(--paper-3); text-decoration: line-through; }
.oh-sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c, #888); flex: 0 0 auto; }
.oh-sw--station { background: #fff; box-shadow: 0 0 0 2px #c2453f; width: 7px; height: 7px; margin: 1px; }
.oh-sw--star { background: #3d5a80; opacity: .9; }
.oh-sw--ring { background: transparent; border: 1.5px solid #c2453f; width: 10px; height: 10px; }
.oh-sw--gs { background: #fff; border-radius: 1px; width: 8px; height: 8px; transform: rotate(45deg); margin: 0 1px; }
.oh-sw--link { width: 16px; height: 0; border-top: 2px dashed #3fb5ad; border-radius: 0; background: transparent; }
.oh-linksnote { margin-top: 8px; }
.oh-linksnote[hidden] { display: none; }
#oh-links-count { color: var(--paper); font-weight: 500; }
#oh-links-count:not(:empty)::after { content: " · "; color: var(--paper-3); font-weight: 400; }
.oh-help { margin: 10px 0 0; font: 400 12px/1.5 var(--sans); color: var(--paper-3); }
.oh-sky figcaption { margin-top: 12px; }

/* inside the sky map (fixed dark-panel colours, as the other SVG instruments use) */
.oh-ring { fill: none; stroke: #273040; stroke-width: 1; }
.oh-ring--horizon { stroke: #928d84; stroke-width: 1.2; }
.oh-ring--axis { stroke-dasharray: 2 6; }
.oh-zenith { fill: #928d84; }
.oh-mono { font: 400 10px var(--mono); letter-spacing: .08em; }
.oh-mute { fill: #928d84; }
.oh-letter { font: 600 15px var(--cond); letter-spacing: .04em; fill: #f0eee9; }
.oh-track { fill: none; stroke: #3fb5ad; stroke-width: 1; opacity: .26; stroke-linejoin: round; }
.oh-track--iss { stroke: #c2453f; stroke-width: 1.4; opacity: .7; }
.oh-dot { fill: #3fb5ad; }
.oh-dot--star { fill: #3d5a80; opacity: .85; }
.oh-dot--iss { fill: #fff; stroke: #c2453f; stroke-width: 1.6; }
.oh-dot--sel { stroke: #f0eee9; stroke-width: 1.5; }
.oh-name { fill: #c4c0b8; font-size: 10px; letter-spacing: .04em; }
.oh-name--iss { fill: #f0eee9; font-weight: 500; }

/* ---------- the pass table: six rows showing, the rest scroll ---------- */
.oh-passes__wrap { position: relative; min-width: 0; max-width: 980px; }
.oh-table { position: relative; max-height: 440px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--rule-soft); }
.oh-table.is-scrollable::after {
  content: ""; display: block; position: sticky; bottom: 0; left: 0; right: 0; height: 44px; margin-top: -44px;
  pointer-events: none; background: linear-gradient(to bottom, rgba(1, 1, 1, 0), var(--ink) 85%);
}
.oh-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.oh-tbl th {
  position: sticky; top: 0; z-index: 1; background: var(--ink); text-align: left;
  padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule-soft);
  font: 500 10.5px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-3);
}
.oh-tbl th:first-child { width: 100px; }
.oh-tbl th:nth-child(2) { width: 29%; }
.oh-tbl td { padding: 11px 8px 11px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.oh-row { cursor: pointer; }
.oh-row:hover td { background: var(--hover); }
.oh-row.is-selected td { background: var(--hover); box-shadow: inset 2px 0 0 var(--paper); }
.oh-row.is-selected td:not(:first-child) { box-shadow: none; }
.oh-row__when { white-space: nowrap; }
.oh-row__count { display: block; font: 500 13px/1.3 var(--sans); letter-spacing: 0; color: var(--paper); font-variant-numeric: tabular-nums; }
.oh-row.is-up .oh-row__count { color: #e0a93f; }
.oh-row__clock { display: block; margin-top: 3px; font: 400 11px/1.4 var(--sans); letter-spacing: .02em; color: var(--paper-3); }
.oh-row__name { min-width: 0; }
.oh-row__id { display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 7px; align-items: start; }
.oh-sw--row { margin-top: 5px; }
.oh-row__id .oh-row__tag { grid-column: 2; }
.oh-row__btn {
  appearance: none; -webkit-appearance: none; cursor: pointer; display: inline;
  margin: 0; padding: 0; border: 0; background: transparent; text-align: left;
  font: 600 14px/1.35 var(--sans); letter-spacing: -.005em; color: var(--paper);
}
.oh-row__btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.oh-row__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; border-radius: 2px; }
.oh-row__tag { display: block; margin-top: 4px; font: 500 9.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-3); }
.oh-row--station .oh-row__tag { color: var(--station); }
.oh-row__line { font: 400 12.5px/1.55 var(--sans); color: var(--paper-2); }
.oh-row__flag { display: block; margin-top: 4px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .04em; color: #e0a93f; }
.oh-row.is-done { opacity: .45; }
.oh-row--star td { cursor: default; font: 400 12.5px/1.6 var(--sans); color: var(--paper-2); }
.oh-row--star:hover td { background: transparent; }
.oh-row__starhead { font-weight: 600; color: var(--paper); }
.oh-row__starhead::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #3d5a80; margin-right: 7px; vertical-align: 0; }
.oh-row--star .oh-row__btn { font-size: 12.5px; font-weight: 600; }
.oh-more, .oh-starnote { margin: 10px 0 0; font: 400 12px/1.5 var(--sans); color: var(--paper-3); }
.oh-more[hidden] { display: none; }
.oh-empty { margin: 0; padding: 16px 0; border-top: 1px solid var(--rule-soft); font-size: 13.5px; line-height: 1.6; color: var(--paper-2); }
.oh-foot { margin: 22px 0 0; font: 400 12px/1.6 var(--sans); letter-spacing: 0; color: var(--paper-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .oh-chipbtn, .oh-chip { transition: none; }
}

/* ---------- narrower screens ---------- */

@media (max-width: 640px) {
  .oh-top { padding-top: calc(64px + 16px); }
  .oh-title { font-size: 1.45rem; margin: 6px 0 12px; }
  .oh-locbar { gap: 12px 10px; margin-bottom: 10px; }
  .oh-locbar .oh-btn { min-height: 46px; padding: 0 18px; font-size: 14px; }
  .oh-locbar .oh-combo { max-width: none; flex: 1 1 100%; }          /* the city box gets the full width, so the whole hint shows */
  .oh-latlon { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; width: 100%; }
  .oh-latlon .oh-btn { min-height: 46px; padding: 0 18px; }
  .oh-locbar .field input { font-size: 16px; }                       /* 16 px: iOS does not zoom the page on focus */
  .oh-combo__list li { padding: 11px 14px; }
  .oh-combo__name { font-size: 15px; }
  .oh-locnote { flex-basis: 100%; font-size: 12.5px; }
  .oh-globe { height: auto; aspect-ratio: 1 / 1; }
  .oh-map, .diagram svg.oh-map { width: 100%; height: auto; }
  .oh-stats { font-size: 12px; }
  .oh-time__label { flex-basis: 100%; }
  .oh-scrub { max-width: none; height: 32px; }
  .oh-time .oh-chipbtn { min-height: 38px; padding: 0 15px; font-size: 13px; }
  .oh-legend { gap: 8px 14px; }
  .oh-legend .oh-chip { min-height: 34px; padding: 0 12px 0 9px; }
  .oh-row__tag { font-size: 11px; letter-spacing: .08em; }
  .oh-row__clock { font-size: 12px; }
  /* the table becomes a list of two-line cards: when and name on one row, the pass line under them */
  .oh-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .oh-tbl, .oh-tbl tbody { display: block; }
  .oh-tbl tr { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 10px; border-bottom: 1px solid var(--rule-soft); padding: 11px 0; }
  .oh-tbl td { display: block; padding: 0; border: 0; }
  .oh-row__line { grid-column: 1 / -1; margin-top: 6px; font-size: 12.5px; }
  .oh-row--star td { grid-column: 1 / -1; }
  .oh-row--star .oh-row__btn { display: inline-block; padding: 8px 0; margin: -8px 0; }   /* a finger-sized target that does not move the text */
  .oh-row.is-selected td { box-shadow: none; }
  .oh-row.is-selected { box-shadow: inset 2px 0 0 var(--paper); padding-left: 8px; }
  .oh-explore { gap: 14px; }
  .oh-explore__group { width: 100%; }
  .oh-explore__label { width: 100%; }
  .oh-explore__btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  .oh-xbtn { justify-content: center; min-height: 44px; padding: 8px 10px; font-size: 13.5px; white-space: normal; text-align: left; }
  .oh-sky__panel.is-mode .oh-globe { height: auto; }             /* phones keep the square globe */
  .oh-mp .oh-chipbtn { min-height: 40px; padding: 0 17px; font-size: 13.5px; }
  .oh-mp__select { min-height: 40px; font-size: 16px; }         /* 16 px: iOS does not zoom the page on focus */
  .oh-mp.is-chips .oh-jhop { min-height: 34px; padding-right: 13px; font-size: 13px; }
  .oh-mp.is-chips .oh-jhop__num { width: 24px; height: 24px; }
  .oh-mp__title { font-size: 17px; }
  .oh-mp__body { font-size: 14px; }
  .oh-jtag { padding: 5px 9px 5px 8px; font-size: 11.5px; }
  .oh-mp__chip { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
  .oh-mp__seg button { min-height: 38px; padding: 0 13px; font-size: 13px; }
  .oh-mp__kv dd { font-size: 15.5px; }
  .oh-mp__bar { grid-template-columns: minmax(0, 118px) minmax(0, 1fr) minmax(56px, auto); font-size: 11.5px; }
  /* a compact card on phones, so it does not cover half the globe */
  .oh-card { left: 8px; right: 8px; bottom: 8px; max-width: none; padding: 8px 10px 9px; }

  .oh-card__head { align-items: center; }
  .oh-card__name { font-size: 13px; }
  .oh-card__type { margin-top: 2px; font-size: 10.5px; }
  .oh-card__line { margin-top: 4px; font-size: 11.5px; line-height: 1.4; }
  .oh-card .oh-chipbtn { margin: 8px 0 0; min-height: 34px; padding: 0 12px; font-size: 12px; }
  .oh-card__close { width: 36px; height: 36px; margin: -8px -8px 0 0; font-size: 20px; line-height: 36px; }
}