/* ============================================================
   Live Orrery page styles: the full-screen stage above the ad band, the
   curtain below, chrome, sheets, card and labels. Page-scoped on purpose:
   nothing here touches style.css, so no sitewide pin moves. Every color is an
   --orr-* token, so night mode cannot leak a non-red pixel.

   Two layouts. Without html.orr-js (JavaScript off or blocked, a script that
   failed, the sky engine down) the stage is a block in the normal flow, the
   chrome that needs the app is hidden, and the chevron is a plain link to the
   positions table. With html.orr-js (set by the inline boot line in the page's
   head) the stage is fixed to the viewport and ends above the ad band: its
   bottom is --orr-adh, a floor reserved here before any ad arrives and raised
   by orrery-app.js to the band's measured height plus 16 px.
   ============================================================ */

/* ---- tokens (the stage is always a dark sky; night turns it red) ---- */
:root {
  --orr-ink: #e6eafc; --orr-muted: #a7b0d4; --orr-space: #05060d;
  --orr-panel: rgb(12, 16, 34); --orr-panel-glass: rgba(12, 16, 34, 0.82);   /* panels without the blur (touch screens) are opaque: the bar never shows through a table */
  --orr-border: rgba(150, 162, 215, 0.28); --orr-accent: #8b93ff; --orr-shadow: rgba(0, 0, 0, 0.45);
  --orr-on-accent: #10041a; --orr-field: rgba(0, 0, 0, 0.3); --orr-hover: rgba(139, 147, 255, 0.16);
  --orr-label-bg: rgba(10, 14, 30, 0.72); --orr-sign: #9aa4c8; --orr-hl-bg: rgba(70, 52, 14, 0.85); --orr-hl-ink: #ffe2a6;
  --orr-glow: rgba(0, 0, 0, 0.9); --orr-retro: var(--accent-2); --orr-moon-dark: #23283d; --orr-moon-lit: #eeeadb;
  --orr-adh: 110px; --orr-adh-right: 0px; --orr-adh-top: 0px; --orr-header-h: 0px; --orr-top-push: 0px;
  --orr-top-h: 64px; --orr-dock-h: 104px;
}
@media (max-width: 767px), (max-height: 520px) { :root { --orr-adh: 80px; } }
@media (max-width: 559px) { :root { --orr-top-h: 110px; } }
:root[data-theme="night"] {
  --orr-ink: #f47171; --orr-muted: #b56060; --orr-space: #0b0303;
  --orr-panel: rgba(23, 6, 6, 0.985); --orr-panel-glass: rgba(23, 6, 6, 0.88);   /* a hair short of opaque at night: an opaque layer gets LCD text, whose color fringes are blue and green */
  --orr-border: rgba(66, 17, 17, 0.9); --orr-accent: #e04747; --orr-shadow: rgba(0, 0, 0, 0.6);
  --orr-on-accent: #1a0404; --orr-field: rgba(0, 0, 0, 0.35); --orr-hover: rgba(224, 71, 71, 0.16);
  --orr-label-bg: rgba(24, 4, 4, 0.78); --orr-sign: #bd6868; --orr-hl-bg: rgba(60, 10, 8, 0.9); --orr-hl-ink: #ffc4b4;
  --orr-glow: rgba(0, 0, 0, 0.9); --orr-moon-dark: #200606; --orr-moon-lit: #f47171;
}
html { overscroll-behavior-y: none; scroll-padding-top: 4.5rem;
  scroll-padding-bottom: calc(var(--orr-adh) + 8px); }   /* no pull-to-refresh mid-Moment; focus never lands under the band */
/* A unit wider than the screen (a 320 px ad on a 280 px phone) never widens
   the page: the app stays laid out at the screen's width. Nothing is hidden. */
html, body.orr-page { overflow-x: clip; }

/* ---- static layout: no JavaScript, a failed boot, or a fatal engine error ---- */
.orr-stage { position: relative; height: 60vh; background: var(--orr-space); color: var(--orr-ink); overflow: hidden; font-size: 0.9rem; line-height: 1.4; }
.orr-stage [hidden] { display: none !important; }
.orr-dock { display: none; }
.orr-canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }
/* Nothing that needs the app shows without it: a dead canvas or button would
   only trap a keyboard. The fatal box (or the noscript note) and the chevron
   link to the table stay. */
html:not(.orr-js) .orr-canvas, html:not(.orr-js) .orr-top, html:not(.orr-js) .orr-bar, html:not(.orr-js) .orr-labels,
html:not(.orr-js) .orr-status, html:not(.orr-js) .orr-headertab, html:not(.orr-js) .orr-skip, html:not(.orr-js) .orr-recenter { display: none; }
.orr-below { position: relative; z-index: 2; background: var(--bg); padding-top: 1rem; box-shadow: 0 -12px 40px var(--orr-shadow); }
/* The sentinel marks the curtain's top edge exactly (the chevron scrolls to it). */
.orr-sentinel { position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none; }

/* ---- full-screen layout: only under html.orr-js ---- */
.orr-js .orr-stage { position: fixed; top: 0; left: 0; right: 0; height: auto; z-index: 1; overscroll-behavior: none;
  bottom: max(var(--orr-adh), env(safe-area-inset-bottom, 0px)); }
.orr-js .orr-dock { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: var(--orr-adh); z-index: 1; background: var(--orr-space); }
.orr-js .orr-canvas { touch-action: none; }
/* The curtain starts one viewport down. Its top padding is constant, so the
   page never shifts while the reader scrolls; it keeps the breadcrumb clear of
   the header that returns over the curtain. */
.orr-js .orr-below { margin-top: 100vh; margin-top: 100svh; padding-top: 4.5rem; }
.orr-js .orr-scroll .orr-canvas, .orr-js .orr-scroll .orr-label { touch-action: auto; pointer-events: none; }
/* Past the curtain's end (what page scripts append to the body after it,
   such as the ad network's privacy link) the stage and the dock step out of
   the way, so the fixed stage never covers what follows the curtain. */
.orr-end { height: 1px; }
.orr-js .orr-stage.orr-past, .orr-js .orr-stage.orr-past + .orr-dock { visibility: hidden; }
.orr-js .orr-stage.orr-past .orr-announce { visibility: visible; }   /* the live region keeps speaking */

/* The GL scene's own night tint and the Diagram's native night palette replace
   the site's night filter, which would repaint a full-viewport canvas every frame. */
:root[data-theme="night"] .orr-stage canvas,
:root[data-theme="night"] .orr-stage svg { filter: none !important; }
#orr-gl:focus-visible, #orr-2d:focus-visible { outline: 3px solid var(--orr-accent); outline-offset: -3px; }
.orr-stage :focus-visible { outline: 2px solid var(--orr-accent); outline-offset: 2px; }
.orr-stage [aria-disabled="true"] { opacity: 0.55; cursor: default; }

/* ---- the site header slides away over the stage; the tab brings it back ---- */
.orr-js body.orr-page .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  transform: translateY(-105%); transition: transform 0.28s ease; box-shadow: 0 6px 24px var(--orr-shadow); }
.orr-js body.orr-page.orr-header-open .site-header, .orr-js body.orr-page.orr-curtain .site-header,
.orr-js body.orr-page .site-header:focus-within { transform: none; }

/* Centered in the width the ads leave, so a right-hand unit never pushes the
   top row under it. */
.orr-headertab { position: absolute; z-index: 41; left: calc((100% - var(--orr-adh-right)) / 2); transform: translateX(-50%);
  top: calc(var(--orr-header-h) + var(--orr-adh-top) + var(--orr-top-push));
  min-height: 30px; padding: calc(env(safe-area-inset-top, 0px) + 4px) 14px 6px;
  border: 1px solid var(--orr-border); border-top: 0; border-radius: 0 0 12px 12px;
  background: var(--orr-panel); color: var(--orr-ink); font: inherit; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; transition: top 0.28s ease; }
body.orr-header-open .orr-headertab { padding-top: 6px; }
body.orr-curtain .orr-headertab { display: none; }

/* ---- top row: the title, the scale note and button, the view seg ---- */
.orr-top { position: absolute; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  top: calc(env(safe-area-inset-top, 0px) + var(--orr-adh-top) + var(--orr-header-h) + var(--orr-top-push) + 8px);
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + var(--orr-adh-right) + 8px); pointer-events: none; }
.orr-top > * { pointer-events: auto; min-width: 0; }
.orr-top > .orr-titlebox { flex: 1 1 auto; }
.orr-top > .orr-seg { flex: none; }   /* the view seg keeps its size; the title box wraps beside it */
@media (max-width: 559px) {
  .orr-top { top: calc(env(safe-area-inset-top, 0px) + var(--orr-adh-top) + var(--orr-header-h) + var(--orr-top-push) + 38px); }
}
@media (min-width: 560px) {
  .orr-top > .orr-titlebox, .orr-top > .orr-seg { max-width: calc((100vw - var(--orr-adh-right)) / 2 - 72px - env(safe-area-inset-left, 0px)); }   /* clear of the header tab */
}
.orr-titlebox { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.orr-title { margin: 0; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; text-shadow: 0 1px 3px var(--orr-glow); }
.orr-scalenote { margin: 0; font-size: 0.76rem; line-height: 1.3; color: var(--orr-muted); text-shadow: 0 1px 3px var(--orr-glow); }
.orr-moonnote { flex: 1 1 100%; }
@media (max-width: 399px) { .orr-title { display: none; }
  .orr-scale-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } }
.orr-seg-long { display: none; }
@media (min-width: 560px) { .orr-seg-short { display: none; } .orr-seg-long { display: inline; } }

/* ---- controls ---- */
.orr-pill, .orr-iconbtn, .orr-seg button, .orr-chevron, .orr-scalebtn, .orr-recenter { min-height: 44px; }
.orr-pill, .orr-scalebtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 14px;
  border: 1px solid var(--orr-border); border-radius: 999px; background: var(--orr-panel); color: var(--orr-ink);
  font: inherit; font-size: 0.88rem; white-space: nowrap; cursor: pointer; }
.orr-scalebtn { font-size: 0.8rem; font-weight: 600; padding: 6px 12px; }
.orr-iconbtn { width: 44px; min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--orr-border); border-radius: 12px; background: var(--orr-panel); color: var(--orr-ink); cursor: pointer; }
.orr-ico { width: 20px; height: 20px; fill: currentColor; flex: none; }
.orr-seg { display: inline-flex; border: 1px solid var(--orr-border); border-radius: 999px; overflow: hidden; background: var(--orr-panel); }
.orr-seg button { padding: 6px 13px; border: 0; background: transparent; color: var(--orr-muted); font: inherit; font-size: 0.84rem; cursor: pointer; white-space: nowrap; }
.orr-seg button[aria-pressed="true"] { background: var(--orr-accent); color: var(--orr-on-accent); font-weight: 700; }
@media (hover: hover) {
  .orr-pill:hover, .orr-iconbtn:hover, .orr-scalebtn:hover { border-color: var(--orr-accent); }
  .orr-seg button[aria-pressed="false"]:hover { color: var(--orr-ink); }
}

/* ---- the bottom bar: Play, the time, Now, Moments, More ---- */
.orr-bar { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none;
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + var(--orr-adh-right) + 8px); bottom: 52px; }
.orr-bar > * { flex: none; min-width: 0; pointer-events: auto; }
.orr-bar #orr-time { flex: 1 1 auto; min-width: 96px; max-width: 22rem; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  text-align: center; font-variant-numeric: tabular-nums; padding: 4px 12px; }
.orr-time-l1 { font-weight: 700; }
@media (max-width: 559px), (max-height: 520px) {
  #orr-time { font-size: 0.8rem; line-height: 1.15; white-space: normal; }
  #orr-time .orr-time-l1, #orr-time .orr-time-l2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #orr-time .orr-time-sep { display: none; }
}
/* the zone name leaves the pill on the narrowest phones but stays in its name */
@media (max-width: 389px) { #orr-time .orr-tz { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } }
/* When the pill's text still would not fit (a long zone name, a crowded bar,
   a zoomed text size), the app steps through these: the zone leaves the pill
   (orr-fit1), a slow running rate leaves it (orr-fit2, set in the text itself),
   then the type steps down (orr-fit3). The pill never cuts its text. */
#orr-time.orr-fit1 .orr-tz { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.orr-bar #orr-time.orr-fit3 { font-size: 0.72rem; padding-left: 8px; padding-right: 8px; }
@media (max-width: 359px) { .orr-bar { gap: 6px; } .orr-now .orr-ico { display: none; } .orr-seg button { padding-left: 10px; padding-right: 10px; } }   /* Now keeps its word */
@media (max-width: 319px) { .orr-bar { flex-wrap: wrap; } }
.orr-bar.orr-notlive .orr-moments-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 359px) { .orr-moments-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } }
/* With its label hidden the Moments pill is a 44 px icon button; on the
   narrowest phones the pill and Now give the time their padding. */
.orr-bar.orr-notlive .orr-momentsbtn { width: 44px; padding: 0; }
@media (max-width: 359px) { .orr-bar .orr-momentsbtn { width: 44px; padding: 0; } .orr-bar #orr-time { padding-left: 8px; padding-right: 8px; } .orr-bar .orr-now { padding-left: 10px; padding-right: 10px; } }
.orr-now { font-weight: 700; padding: 6px 12px; }

/* ---- chevron, Recenter, chip, status ---- */
.orr-chevron { position: absolute; z-index: 3; bottom: 4px; left: calc((100% - var(--orr-adh-right)) / 2); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px; padding: 0 14px; font-size: 0.8rem; white-space: nowrap;
  text-decoration: none; text-shadow: 0 1px 4px var(--orr-glow); }
body.orr-page .orr-stage a.orr-chevron { color: var(--orr-muted); }
@media (hover: hover) { body.orr-page .orr-stage a.orr-chevron:hover { color: var(--orr-ink); } }
/* left of an open right-hand panel (--orr-rpanel-w, set on the stage by the app) */
.orr-recenter { position: absolute; z-index: 3; bottom: var(--orr-dock-h); font-size: 0.82rem;
  right: calc(env(safe-area-inset-right, 0px) + var(--orr-adh-right) + 8px + var(--orr-rpanel-w, 0px)); }
.orr-chip { position: absolute; z-index: 4; top: var(--orr-top-h); left: calc((100% - var(--orr-adh-right)) / 2); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 16px - var(--orr-adh-right)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 8px 8px 14px; border: 1px solid var(--orr-border); border-radius: 12px; background: var(--orr-panel); color: var(--orr-ink);
  font-size: 0.84rem; line-height: 1.4; box-shadow: 0 6px 24px var(--orr-shadow); }
.orr-chip span { flex: 1 1 auto; min-width: 0; }
.orr-chip button { flex: none; min-height: 36px; padding: 4px 12px; border: 1px solid var(--orr-accent); border-radius: 999px;
  background: transparent; color: var(--orr-accent); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.orr-status { position: absolute; z-index: 2; left: 50%; top: 45%; transform: translateX(-50%); margin: 0; color: var(--orr-muted); white-space: nowrap; }
/* The fatal note (and the noscript note) inside the stage. Scoped to the
   stage: the failed boot also puts orr-fatal on <body>, which must stay in
   the normal flow. */
.orr-stage .orr-fatal { position: absolute; z-index: 8; top: 40%; left: 50%; transform: translate(-50%, -50%); width: max-content; max-width: min(22rem, calc(100% - 32px));
  padding: 16px 20px; border: 1px solid var(--orr-border); border-radius: 12px; background: var(--orr-panel); color: var(--orr-ink); text-align: center; }

/* ---- body labels over the 3D scene: a 24 px pill with a 44 x 44 hit area ---- */
.orr-labels { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.orr-label { position: absolute; left: 0; top: 0; height: 24px; padding: 2px 8px; margin: 0; border-radius: 12px; pointer-events: auto; touch-action: none;
  font: 600 12px/18px system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap; cursor: pointer; will-change: transform;
  background: var(--orr-label-bg); color: var(--orr-ink); border: 1px solid var(--orr-border); }
.orr-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; min-width: 100%; height: 44px; transform: translate(-50%, -50%); }
.orr-label[data-highlight] { background: var(--orr-hl-bg); color: var(--orr-hl-ink); }
span.orr-label { background: none; border-color: transparent; color: var(--orr-sign); font-weight: 500; cursor: default; }
.orr-labels[data-dragging] .orr-label { pointer-events: none; }

/* ---- panels: sheets, the card, the Moment panel ---- */
.orr-sheet, .orr-card, .orr-moment { overscroll-behavior: contain; overflow: auto; background: var(--orr-panel); color: var(--orr-ink);
  border: 1px solid var(--orr-border); box-shadow: 0 10px 40px var(--orr-shadow); }
@media (pointer: fine) {   /* no blur on touch devices or while the scene animates */
  .orr-stage:not(.orr-animating) .orr-sheet, .orr-stage:not(.orr-animating) .orr-card, .orr-stage:not(.orr-animating) .orr-moment {
    background: var(--orr-panel-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.orr-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; background: transparent; }
.orr-js .orr-scrim { touch-action: none; }   /* a drag on the scrim never scrolls the curtain up under an open sheet */
.orr-sheet { position: absolute; left: 0; right: var(--orr-adh-right); bottom: 0; z-index: 6; max-height: 62%; border-bottom: 0; border-radius: 18px 18px 0 0;
  padding: 10px calc(env(safe-area-inset-right, 0px) + 16px) calc(16px + env(safe-area-inset-bottom, 0px)) calc(env(safe-area-inset-left, 0px) + 16px); }
/* On a phone the time panel sits above the bar and takes at most 45 percent
   of the stage (it scrolls), so the planets stay in view while the strip
   moves them. */
#orr-sheet-time { bottom: var(--orr-dock-h); max-height: calc(100% - var(--orr-dock-h) - var(--orr-top-h)); max-height: min(45%, calc(100% - var(--orr-dock-h) - var(--orr-top-h)));
  border-radius: 18px; border-bottom: 1px solid var(--orr-border); }
.orr-sheet input, .orr-sheet select, #orr-pick { font-size: 16px; }  /* iOS never zooms */
.orr-scrub { touch-action: none; min-height: 44px; }
/* On a phone the card takes at most 45 percent of the stage, and never
   reaches the top row: a 320 x 568 phone with the ad band and the 3D view's
   Moon note left the card with More open 1 px over the note (P1). */
.orr-card { position: absolute; z-index: 4; left: calc(env(safe-area-inset-left, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + var(--orr-adh-right) + 12px); bottom: var(--orr-dock-h); max-height: 45%; max-height: min(45%, calc(100% - var(--orr-top-h) - var(--orr-dock-h)));
  border-radius: 14px; padding: 10px 14px 14px; }
/* The Moment panel takes the bar's place: on a phone it sits over the
   bottom of the stage (55 percent tall while its question waits), on wider
   screens at the left. Its body scrolls; its footer (Back, the step count,
   Next) never scrolls away. */
.orr-moment { position: absolute; z-index: 4; left: calc(env(safe-area-inset-left, 0px) + 8px); right: calc(env(safe-area-inset-right, 0px) + var(--orr-adh-right) + 8px);
  bottom: 52px; max-height: 40%; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; }
.orr-moment.orr-asking { max-height: 55%; }
.orr-moment.orr-tall { max-height: 55%; }   /* an answer with its reveal, or the last step with its links */
.orr-moment-head { flex: none; padding: 8px 6px 0 14px; }
.orr-moment-body { overflow: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; padding: 0 14px 4px; }
/* more of the step below the fold or above it: the body's last or first 24 px fade, a cue to scroll */
.orr-moment-body.orr-more { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent); }
/* the head fade is --orr-fade-top tall (24 px; shorter while a step's start sits inside it, set by the app) */
.orr-moment-body.orr-above { -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--orr-fade-top, 24px)); mask-image: linear-gradient(to bottom, transparent, black var(--orr-fade-top, 24px)); }
.orr-moment-body.orr-above.orr-more { -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--orr-fade-top, 24px), black calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, transparent, black var(--orr-fade-top, 24px), black calc(100% - 24px), transparent); }
.orr-moment-foot { flex: none; position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 14px 10px; border-top: 1px solid var(--orr-border); }   /* Back, Step n of N, Next never scroll away */
@media (min-width: 760px) and (min-height: 521px) and (max-height: 599px) {
  .orr-sheet, .orr-card, .orr-moment { max-width: 560px; margin: 0 auto; }   /* phone tier on a wide, short window */
}
/* Side panels: the sheets at the right, the card and the Moment panel at the
   left, each between the top row and the bar, sized to its content. */
@media (min-width: 760px) and (min-height: 600px) {
  .orr-sheet, #orr-sheet-time { left: auto; right: calc(16px + var(--orr-adh-right)); top: auto; bottom: var(--orr-dock-h);
    max-height: calc(100% - var(--orr-top-h) - var(--orr-dock-h)); width: 400px; border-radius: 16px; border-bottom: 1px solid var(--orr-border);
    padding: 10px 16px 16px; }
  .orr-card, .orr-moment { right: auto; left: calc(env(safe-area-inset-left, 0px) + 16px); top: auto; bottom: var(--orr-dock-h); width: 380px;
    max-height: calc(100% - var(--orr-top-h) - var(--orr-dock-h)); border-radius: 16px; }
  .orr-moment.orr-asking, .orr-moment.orr-tall { max-height: calc(100% - var(--orr-top-h) - var(--orr-dock-h)); }
}
/* During a Moment on the widest screens a picked body's card takes the right side. */
@media (min-width: 1100px) and (min-height: 600px) {
  .orr-in-moment .orr-card { left: auto; right: calc(16px + var(--orr-adh-right)); }
}
/* Landscape phones: one combined control row 8 px above the stage's bottom
   (the chevron an icon at its end), the panels on the right from 8 px below
   the 30 px header tab (which a top ad or the push moves down with them), so
   a 390 px tall phone keeps a framed scene about 200 px tall beside an open
   panel. */
@media (max-height: 520px) and (orientation: landscape) {
  .orr-top { position: static; }
  .orr-titlebox { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + var(--orr-adh-top) + var(--orr-header-h) + var(--orr-top-push) + 8px); left: calc(env(safe-area-inset-left, 0px) + 8px);
    max-width: calc(50vw - 72px); display: flex; align-items: center; gap: 8px; white-space: nowrap; flex-wrap: nowrap; }
  .orr-title { display: none; }
  .orr-scale-long { display: none; }
  .orr-moonnote { display: none; }
  #orr-view { position: absolute; z-index: 3; left: calc(env(safe-area-inset-left, 0px) + 8px); bottom: 8px; }
  .orr-bar { justify-content: flex-start; bottom: 8px; left: calc(env(safe-area-inset-left, 0px) + 8px + var(--orr-view-w, 152px) + 8px);
    right: calc(env(safe-area-inset-right, 0px) + var(--orr-adh-right) + 60px); }
  .orr-chevron { left: auto; transform: none; bottom: 8px; right: calc(env(safe-area-inset-right, 0px) + var(--orr-adh-right) + 8px); width: 44px;
    padding: 0; justify-content: center; border: 1px solid var(--orr-border); border-radius: 12px; background: var(--orr-panel); text-shadow: none; }
  .orr-chevron-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .orr-sheet, #orr-sheet-time, .orr-card, .orr-moment { left: auto; right: calc(env(safe-area-inset-right, 0px) + var(--orr-adh-right) + 8px);
    top: calc(env(safe-area-inset-top, 0px) + var(--orr-header-h) + var(--orr-adh-top) + var(--orr-top-push) + 38px); bottom: var(--orr-dock-h); width: min(360px, 46vw); max-height: none; border-radius: 16px;
    border-bottom: 1px solid var(--orr-border); padding: 8px 14px 12px; }
  .orr-moment, .orr-moment.orr-asking, .orr-moment.orr-tall { max-height: none; padding: 0; }
  /* A Moment hides the bar, so the chevron moves into the bar's row beside
     the view switch, and the Moment panel, a little wider, runs down to 8 px
     above the stage's bottom: a step's question, its answer and the Sky Map
     link fit beside the scene. On a narrow landscape screen the panel ends
     8 px right of the moved chevron. It keeps the 14 px gap under the header
     tab that its steps were laid out for. */
  .orr-in-moment .orr-chevron { right: auto; left: calc(env(safe-area-inset-left, 0px) + 8px + var(--orr-view-w, 152px) + 8px); }
  .orr-moment { top: calc(env(safe-area-inset-top, 0px) + var(--orr-header-h) + var(--orr-adh-top) + var(--orr-top-push) + 44px); bottom: 8px; width: min(400px, 52vw);
    width: min(400px, 52vw, calc(100% - env(safe-area-inset-left, 0px) - var(--orr-view-w, 152px) - 76px - env(safe-area-inset-right, 0px) - var(--orr-adh-right))); }
}

/* panel contents */
.orr-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.orr-sheet-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--orr-ink); }
.orr-sheet-title:focus { outline: none; }
.orr-sheet-title:focus-visible { outline: 2px solid var(--orr-accent); outline-offset: 2px; }
.orr-close { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-right: -10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--orr-muted); cursor: pointer; }
@media (hover: hover) { .orr-close:hover { color: var(--orr-ink); } }
.orr-sheet-line { margin: 0 0 2px; font-size: 0.9rem; }
.orr-sheet-note { margin: 0 0 10px; font-size: 0.8rem; color: var(--orr-muted); }
.orr-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-size: 0.82rem; color: var(--orr-muted); }
.orr-field input[type="date"], .orr-field input[type="time"] { font: inherit; font-size: 16px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--orr-border); border-radius: 9px;
  background: var(--orr-field); color: var(--orr-ink); color-scheme: dark; min-width: 0; width: 100%; box-sizing: border-box; }
.orr-sheet .orr-seg { margin: 6px 0 2px; }
/* The time panel: the scrub strip, its scale, the steps, the speeds, Reverse
   and Now, and the date and time fields. Every button is a 44 px target. */
.orr-btn { min-height: 44px; padding: 6px 8px; border: 1px solid var(--orr-border); border-radius: 10px; background: var(--orr-field); color: var(--orr-ink);
  font: inherit; font-size: 0.84rem; line-height: 1.2; white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums; }
.orr-btn[aria-pressed="true"] { background: var(--orr-accent); border-color: var(--orr-accent); color: var(--orr-on-accent); font-weight: 700; }
@media (hover: hover) { .orr-btn:hover { border-color: var(--orr-accent); } }
.orr-row { display: flex; gap: 8px; margin: 8px 0 0; }
.orr-row > * { flex: 1 1 0; min-width: 0; }
.orr-grid { display: grid; gap: 6px; margin: 8px 0 0; }
.orr-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.orr-rates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.orr-inputs .orr-field { margin: 0; }
/* On the narrowest phones (and Android text zoom) two fields side by side
   clip their own text (at 16 px type a date field shows 02/19/2027 whole from
   about 130 px, and side by side at 280 px each gets 119): one
   above the other. */
@media (max-width: 339px) { .orr-inputs { flex-direction: column; } }
/* Finer, the strip, Coarser in one row. The strip moves its ticks with the
   drag (--orr-scrub-x, set by the app). */
.orr-scrubrow { display: flex; align-items: stretch; gap: 6px; margin: 8px 0 0; }
.orr-scrubrow > .orr-btn { flex: none; }
.orr-scrub { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px;
  border: 1px dashed var(--orr-border); border-radius: 12px; color: var(--orr-muted); font-size: 0.82rem; text-align: center; cursor: ew-resize;
  user-select: none; -webkit-user-select: none;
  background-image: repeating-linear-gradient(90deg, var(--orr-border) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, var(--orr-muted) 0 1px, transparent 1px 50px);
  background-size: 100% 8px, 100% 14px; background-repeat: repeat-x; background-position: var(--orr-scrub-x, 0px) 100%, var(--orr-scrub-x, 0px) 100%; }
.orr-scrub-hint { color: var(--orr-ink); padding: 4px 4px 0; line-height: 1.2; }
.orr-scrub-scale { font-size: 0.76rem; padding: 0 4px 10px; line-height: 1.2; }
.orr-scrub:focus-visible { outline: 2px solid var(--orr-accent); outline-offset: 2px; }
/* A landscape phone's time panel is about 160 px tall: your time and UTC
   share a line and the strip is 44 px, so the strip shows whole when the
   panel opens (the steps, speeds and fields scroll below it). */
@media (max-height: 520px) and (orientation: landscape) {
  #orr-sheet-time .orr-sheet-line, #orr-sheet-time .orr-sheet-note { display: inline; margin: 0 8px 0 0; }
  #orr-sheet-time .orr-scrub { min-height: 44px; }
}
.orr-find { justify-content: space-between; gap: 10px; cursor: default; }
.orr-find select { flex: 0 1 auto; min-width: 0; max-width: 60%; min-height: 40px; padding: 4px 8px; border: 1px solid var(--orr-border); border-radius: 9px;
  background: var(--orr-field); color: var(--orr-ink); color-scheme: dark; font-size: 16px; }
.orr-menuitem .orr-menusub { display: block; color: var(--orr-muted); font-size: 0.8rem; }
/* A two-line item (a Moment in the Moments list, Share link and Save image
   in More) keeps its title and its wrapped subtitle on one left edge: both
   classes, so it outranks .orr-menuitem's centered alignment below. */
.orr-menuitem.orr-moment-item, .orr-menuitem.orr-menu2 { flex-direction: column; align-items: flex-start; justify-content: center; }
.orr-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 0.92rem; cursor: pointer; }
.orr-check input { width: 20px; height: 20px; accent-color: var(--orr-accent); }
.orr-menu { display: flex; flex-direction: column; margin: 0 -8px; }
.orr-menuitem { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px; border: 0; border-radius: 10px; background: transparent;
  color: var(--orr-ink); font: inherit; font-size: 0.95rem; text-align: left; text-decoration: none; cursor: pointer; }
body.orr-page .orr-stage a.orr-menuitem { color: var(--orr-ink); }
@media (hover: hover) { .orr-menuitem:hover { background: var(--orr-hover); } }
@media (pointer: coarse) { .orr-fine { display: none; } }
@media (pointer: fine) { .orr-coarse { display: none; } }
/* The accuracy panel: each body's largest difference from Horizons, what
   was never measured, and the scale. */
.orr-sheet-sub { margin: 12px 0 4px; font-size: 0.9rem; font-weight: 700; color: var(--orr-ink); }
.orr-acc { width: 100%; border-collapse: collapse; margin: 8px 0 8px; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.orr-acc caption { text-align: left; color: var(--orr-muted); font-size: 0.78rem; padding-bottom: 4px; }
.orr-acc th, .orr-acc td { text-align: left; padding: 3px 6px 3px 0; border-top: 1px solid var(--orr-border); border-bottom: 0; white-space: nowrap; }
.orr-acc thead th { border-top: 0; color: var(--orr-muted); font-weight: 600; font-size: 0.76rem; }
.orr-acc tbody th { font-weight: 700; font-size: 0.84rem; color: var(--orr-ink); text-transform: none; letter-spacing: 0; }
/* a link inside a sentence keeps the line's height; a link on a line of its own is a 44 px target */
body.orr-page .orr-stage .orr-sheet-note a { color: var(--orr-accent); }
body.orr-page .orr-stage .orr-sheet-link a { display: inline-flex; align-items: center; min-height: 44px; }
.orr-card-acc { margin: 10px 0 0; }
.orr-card-acc .orr-btn { margin: 6px 0 0; }
.orr-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 4px 0 0; font-size: 0.88rem; }
.orr-keys dt { font-weight: 700; white-space: nowrap; }
.orr-keys dd { margin: 0; color: var(--orr-muted); }

/* the card (the selected body): what it is and how it shows in the sky
   always; More opens its distances, its motion and next events, and the
   last times it stood at this longitude (the distances show at once on the
   side-panel tiers). The buttons and links are made once in the markup, so a
   focused one survives a change of body. */
.orr-card-kind { margin: 0 0 8px; color: var(--orr-muted); font-size: 0.82rem; }
.orr-card-when { margin: 0 0 2px; color: var(--orr-muted); font-size: 0.78rem; }
.orr-card-line { margin: 0 0 2px; font-size: 0.88rem; }
.orr-card-band { font-weight: 700; }
.orr-card-hint { margin: 8px 0 0; font-size: 0.8rem; color: var(--orr-muted); }
.orr-card-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.orr-card-acts > .orr-btn { flex: 1 1 auto; padding-left: 10px; padding-right: 10px; }
/* Below the side-panel tier the card can be shorter than what it holds (a
   landscape phone with the ad band leaves it about 150 px): the action row
   stays pinned to the card's foot, on the card's own ground, and the lines
   above it scroll under it. Where everything fits it sits in its place: its
   padding and margins add up to the row's usual 10 px above the buttons and
   none below. Pinned, its bottom edge is the card's inner edge (the bottom
   offset is the card's own bottom padding), so nothing shows below the
   buttons. */
@media (max-width: 759px), (max-height: 599px) {
  .orr-card-acts { position: sticky; z-index: 1; bottom: -14px; margin: 6px 0 -10px; padding: 4px 0 10px; background: var(--orr-panel); }
  /* In the card itself a pinned row keeps 6 px below its buttons. In 3D the
     row holds four buttons (orr-acts4): the Sky Map link shows "Sky Map"
     (its accessible name stays whole) and the buttons sit closer, so the
     row stays one line from a 320 px phone up and leaves the lines above it
     in view (P1). */
  .orr-card .orr-card-acts { margin-bottom: -6px; padding-bottom: 6px; }
  /* a line that scrolls under the pinned row fades out over the 6 px above it, so no cut-off glyph tops show over the buttons */
  .orr-card .orr-card-acts::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 6px; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--orr-panel)); }
  .orr-card-acts.orr-acts4 { gap: 4px; }
  .orr-card-acts.orr-acts4 > .orr-btn { padding-left: 6px; padding-right: 6px; }
  .orr-card-acts.orr-acts4 .orr-sky-pre { display: none; }
}
/* A short portrait phone (320 x 568 with the band leaves the card 206 px)
   sets the kind and tier 1 2 px closer, so a moon of Jupiter's wrapped sky
   line still shows whole above the pinned row. */
@media (max-height: 599px) and (orientation: portrait) {
  .orr-card .orr-card-kind { margin-bottom: 6px; }
  .orr-card .orr-card-body > .orr-card-tier { margin-top: 8px; }
}
/* A landscape phone's card sets its lines closer, so its name, its kind,
   the when line and the body's first sky line show whole above the pinned
   row even with the ad band (740 x 360 leaves the card 148 px): the close
   button sits in the card's corner (its full 44 px box over the card's top
   padding, its icon level with the name), the name beside it on a 28 px
   line, the small lines at 1.3, and the pinned row keeps 4 px below its
   buttons. */
@media (max-height: 520px) and (orientation: landscape) {
  .orr-card-acts { bottom: -12px; margin-bottom: -8px; padding-bottom: 8px; }   /* the landscape card's bottom padding is 12 px */
  .orr-card .orr-card-acts { margin-bottom: -4px; padding-bottom: 4px; }
  .orr-card { padding-top: 4px; }
  .orr-card > .orr-sheet-head { min-height: 28px; margin: 0; padding-right: 36px; }
  .orr-card .orr-close { position: absolute; z-index: 2; top: 0; right: 4px; margin: 0; padding-bottom: 8px; }
  .orr-card-kind { margin-bottom: 4px; }
  .orr-card .orr-card-kind { margin-bottom: 2px; line-height: 1.3; }
  .orr-card .orr-card-when, .orr-card .orr-card-line { line-height: 1.3; }
  .orr-card-body > .orr-card-tier { margin-top: 6px; }
  .orr-card .orr-card-body > .orr-card-tier { margin-top: 4px; }
}
body.orr-page .orr-stage a.orr-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--orr-ink); text-decoration: none; }
#orr-card-more { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
#orr-card-more .orr-ico { width: 16px; height: 16px; transition: transform 0.2s ease; }
#orr-card-more[aria-expanded="true"] .orr-ico { transform: rotate(180deg); }
.orr-card-tier { margin: 10px 0 0; }
.orr-card-tier:empty { display: none; }
.orr-card-tier[aria-busy="true"] { color: var(--orr-muted); }
.orr-card-next { margin: 4px 0 0; padding-left: 18px; font-size: 0.86rem; }
.orr-card-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; }
body.orr-page .orr-stage a.orr-card-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--orr-accent); }
.orr-card dl, .orr-moment-card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 0.86rem; }
.orr-card dt, .orr-moment-card dt { color: var(--orr-muted); }
.orr-card dd, .orr-moment-card dd { margin: 0; font-variant-numeric: tabular-nums; }
.orr-card-dir { color: var(--orr-muted); font-size: 0.76rem; }
.orr-card-h { margin: 10px 0 2px; font-weight: 600; font-size: 0.86rem; }
.orr-card ol, .orr-moment-card ol { margin: 2px 0 0; padding-left: 20px; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.orr-card-note { list-style: none; margin-left: -20px; font-size: 0.76rem; color: var(--orr-muted); }
.orr-card i, .orr-moment-card i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

/* the Moment panel's contents: the title with Share and Exit, the caption,
   the question (its options in one row), Right or Not quite with an icon
   and the answer, the step's Play, the last step's Sky Map and reading,
   Back to this step's view, a picked body's card, and the footer */
.orr-moment-acts { display: inline-flex; flex: none; }
.orr-moment-acts .orr-close { margin-right: 0; }
.orr-moment-details { width: 100%; margin: 0 0 6px; text-align: left; font-weight: 600; }
.orr-moment-text { margin: 0 0 6px; font-size: 0.92rem; line-height: 1.45; }
.orr-moment-q { margin: 8px 0 6px; font-weight: 700; font-size: 0.92rem; }
.orr-moment-opts { display: flex; gap: 8px; }
.orr-moment-opts .orr-btn { flex: 1 1 0; min-width: 0; white-space: normal; }
.orr-moment-opts .orr-chosen { border-color: var(--orr-accent); background: var(--orr-hover); font-weight: 700; }
.orr-stage .orr-moment-opts .orr-chosen[aria-disabled="true"] { opacity: 1; }
.orr-moment-fb { margin: 8px 0 0; }
.orr-moment-mark { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-weight: 700; }
.orr-moment-reveal { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.orr-moment-opts.orr-opts3 { flex-direction: column; }   /* three answers stack */
.orr-moment-opts.orr-opts3 .orr-btn { flex: none; text-align: left; }
@media (max-height: 520px) {   /* a landscape phone's panel is too short for a stack: one row, the words wrapping */
  .orr-moment-opts.orr-opts3 { flex-direction: row; }
  .orr-moment-opts.orr-opts3 .orr-btn { flex: 1 1 0; text-align: center; font-size: 0.8rem; line-height: 1.25; padding-left: 6px; padding-right: 6px; } }
.orr-moment-choose { margin: 4px 0 2px; }
.orr-moment-choose .orr-btn[aria-pressed="true"] { border-color: var(--orr-accent); background: var(--orr-hover); font-weight: 700; }
/* The Moon as the reader sees it at its highest (Phases), the top of the drawing straight up */
.orr-moment-inset { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; }
.orr-inset { flex: none; width: 68px; height: 68px; }
.orr-inset-dark { fill: var(--orr-moon-dark); stroke: var(--orr-border); stroke-width: 1.5; }
.orr-inset-lit { fill: var(--orr-moon-lit); }
.orr-inset-up { fill: var(--orr-muted); }
.orr-moment-insetcap { margin: 0; font-size: 0.82rem; line-height: 1.35; color: var(--orr-muted); }
.orr-moment-play, .orr-moment-reset { margin: 8px 8px 0 0; }
.orr-moment-end { margin: 8px 0 0; }
.orr-moment-links { margin: 6px 0 0; padding-left: 18px; font-size: 0.9rem; }
body.orr-page .orr-stage .orr-moment-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--orr-accent); }
.orr-moment-cardname { margin: 0 0 4px; font-weight: 700; font-size: 1rem; }
.orr-moment-cardname:focus { outline: none; }
.orr-moment-cardname:focus-visible { outline: 2px solid var(--orr-accent); outline-offset: 2px; }
.orr-moment-card #orr-moment-back { margin: 10px 0 0; }
.orr-moment-count { margin: 0; font-size: 0.82rem; color: var(--orr-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.orr-moment-foot .orr-btn { min-width: 84px; }
.orr-moment-next { font-weight: 700; background: var(--orr-accent); border-color: var(--orr-accent); color: var(--orr-on-accent); }
/* short screens (a 568 px phone): a little more of the step fits above the footer */
@media (max-height: 640px) {
  .orr-moment-text, .orr-moment-reveal { font-size: 0.86rem; line-height: 1.38; }
  .orr-moment-q { font-size: 0.86rem; margin: 6px 0 4px; }
  .orr-moment-head { padding-top: 2px; }
  .orr-moment-head .orr-sheet-head { margin-bottom: 0; }
  .orr-moment-foot { padding-top: 4px; padding-bottom: 5px; }
}
/* a landscape phone 380 px tall or less: the Moment's title keeps one line
   (a smaller type, then an ellipsis; its heading keeps the whole name), so
   the step's body gets the room a second line took */
@media (max-height: 380px) and (orientation: landscape) {
  .orr-moment-head .orr-sheet-title { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .orr-moment-head .orr-sheet-head { min-width: 0; }
  /* and the step's text a touch closer set, so the last step's Sky Map link
     shows with its caption (740 x 360) */
  .orr-moment-text, .orr-moment-reveal { font-size: 0.84rem; line-height: 1.32; }
  .orr-moment-text { margin-bottom: 4px; }
  .orr-moment-end { margin-top: 4px; }
}

/* ---- screen-reader text, the live region, the body select ---- */
.orr-announce, .orr-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.orr-skip { position: absolute; left: -10000px; } .orr-skip:focus-within { left: 8px; top: var(--orr-top-h); z-index: 7;
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--orr-border); border-radius: 12px; background: var(--orr-panel); }
#orr-pick { min-height: 44px; padding: 6px 10px; border: 1px solid var(--orr-border); border-radius: 9px; background: var(--orr-field); color: var(--orr-ink); color-scheme: dark; }

/* ---- the curtain ---- */
.orr-below .site-footer { padding-bottom: calc(var(--orr-adh) + 16px); }   /* the footer's last row clears the band */
/* The intro and the positions table sit above .layout, outside article.content
   (Mediavine's in-content area), so no ad lands between them (owner ruling
   2026-10-16). They keep the article column's width and the header clearance
   that .content [id] gives the prose. */
.orr-intro { min-width: 0; margin: 24px 0 0; }
.orr-intro [id] { scroll-margin-top: var(--header-clear); }
@media (min-width: 960px) { .orr-intro { max-width: calc(100% - 328px); } }
.orr-backtop { margin: 0 0 1rem; }
.orr-positions { margin: 18px 0 0; overflow-x: auto; }
.orr-positions h2 { font-size: 1.05rem; margin: 0 0 8px; }
.orr-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.orr-table caption { text-align: left; color: var(--muted); font-size: 0.82rem; padding-bottom: 6px; }
.orr-table th, .orr-table td { text-align: left; padding: 5px 8px; border-top: 1px solid var(--border); white-space: nowrap; }
.orr-table thead th { border-top: 0; color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.orr-table tbody th { font-weight: 700; }
.orr-retro { color: var(--orr-retro); font-weight: 700; }
.orr-cap { color: var(--muted); font-size: 0.9rem; margin: 10px 0 0; }
/* the curtain's keyboard shortcuts (the same keys as the stage's Shortcuts panel) */
.orr-keytable td:first-child { white-space: nowrap; }
.orr-keytable kbd { font: inherit; font-size: 0.86rem; font-weight: 700; padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; }
/* Accuracy and Linking to this page */
.orr-acctable { margin: 4px 0 12px; }
.orr-acctable td:last-child { white-space: nowrap; }   /* a date never breaks on a phone */
.orr-linkkeys { margin: 8px 0 12px; }
.orr-linkkeys dt { margin: 14px 0 2px; font-weight: 700; }
.orr-linkkeys dd { margin: 0; }
.orr-linkkeys code, #orr-links-order code { overflow-wrap: anywhere; }
/* Phones: drop the distance from the Sun so the table fits without scrolling. */
@media (max-width: 480px) {
  .orr-table th:nth-child(4), .orr-table td:nth-child(4) { display: none; }
  .orr-table { font-size: 0.8rem; }
  .orr-table th, .orr-table td { padding: 5px 4px; white-space: normal; }
}
/* Narrower phones step the positions table down so it still fits, each
   distance kept with its unit (the builder joins them with a no-break
   space): under 380 px the body names take the table's own type, without
   the capitals and the tracking, in closer cells; under 360 px the type is
   smaller; under 320 px the Sky Map column leaves the table (the card on
   the stage opens the Sky Map for every body). */
@media (max-width: 379px) {
  .orr-positions .orr-table tbody th { font-size: inherit; text-transform: none; letter-spacing: 0; }
  .orr-positions .orr-table th, .orr-positions .orr-table td { padding: 4px 3px; }
  .orr-positions .orr-table tr > :first-child { padding-left: 0; }
}
@media (max-width: 359px) {
  .orr-positions .orr-table { font-size: 0.72rem; }
  .orr-positions .orr-table thead th { font-size: 0.7rem; letter-spacing: 0; }
  .orr-positions .orr-table th, .orr-positions .orr-table td { padding: 4px 2px; }
  .orr-positions .orr-table tr > :first-child { padding-left: 0; }
}
@media (max-width: 319px) {
  .orr-positions .orr-table th:nth-child(6), .orr-positions .orr-table td:nth-child(6) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.orr-page .site-header, .orr-headertab, .orr-sheet, .orr-card, .orr-moment, #orr-card-more .orr-ico { transition: none; }
}