:root {
color-scheme: dark;
--sr-space: #0b0e14;
--sr-space-edge: #05070a;
--sr-earth-ocean: #1b4f8a;
--sr-atmosphere: #6ec3ff;
--sr-night-lights: #ffc98a;
--sr-ember: #ff9f43;
--sr-text: #e8ecf2;
--sr-text-dim: #9aa4b2;
--sr-station: #f2f4f7;
--sr-satellite: #7fd1ff;
--sr-debris: #7a8494;
--sr-rocket: #ffd166;
--sr-launch: #ffd166;
--sr-probe: #c3a6ff;
--sr-telescope: #9ef0d8;
--sr-asteroid: #b8926a;
--sr-comet: #d9f3ff;
--sr-site: #f58f7c;
--sr-world: #e8ecf2;
--sr-star: #fff3c4;
--sr-exoplanet: #8ee3a8;
--sr-dso: #d8b4ff;
--sr-exotic: #ff8fa3;
--sr-storm: #9db4ff;
--sr-unknown: #9aa4b2;
--sr-panel-solid: #0b0e14;
--sr-ink: #14100a;
--sr-ember-soft: rgba(255, 159, 67, 0.16);
--sr-text-faint: #6b7482;
--sr-glass: rgba(11, 14, 20, 0.82);
--sr-glass-thin: rgba(11, 14, 20, 0.62);
--sr-glass-solid: rgba(11, 14, 20, 0.94);
--sr-blur: blur(18px) saturate(1.25);
--sr-line: rgba(232, 236, 242, 0.1);
--sr-line-strong: rgba(232, 236, 242, 0.22);
--sr-edge-lit: rgba(232, 236, 242, 0.34);
--sr-edge-glow: 0 -1px 6px rgba(232, 236, 242, 0.06);
--sr-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
--sr-ok: #9ef0d8;
--sr-stale: #ffd166;
--sr-unread: #7a8494;
--sr-radius: 6px;
--sr-radius-sm: 4px;
--sr-radius-pill: 999px;
--sr-bracket: 8px;
--sr-bracket-w: 1.5px;
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sr-gap: 10px;
--sr-pad: 16px;
--sr-header-h: 36px;
--sr-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--sr-ease-in: cubic-bezier(0.4, 0, 1, 1);
--sr-fast: 140ms;
--sr-mid: 220ms;
--sr-slow: 320ms;
--sr-fs-unit: 11px;
--sr-fs-sm: 13px;
--sr-fs-label: 14px;
--sr-fs-body: 15px;
--sr-fs-input: 16px;
--sr-fs-glyph: 20px;
--sr-fs-num-sm: 20px;
--sr-fs-lead: 20px;
--sr-fs-num: 24px;
--sr-fs-name-sm: 22px;
--sr-fs-mark: 27px;
--sr-fs-name: 28px;
--sr-fs-present-sm: 22px;
--sr-fs-present: 32px;
--sr-fs-present-name: 52px;
--sr-z-labels: 5;
--sr-z-hud: 6;
--sr-z-veil: 8;
--sr-z-status: 20;
--sr-z-controls: 30;
--sr-z-pill: 35;
--sr-z-card: 40;
--sr-z-rail: 56;
--sr-z-pop: 57;
--sr-z-trip: 60;
--sr-z-modal: 62;
--sr-z-toast: 70;
--sr-z-boot: 100;
--sr-time-h: 102px;
--sr-font:
'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
sans-serif;
--sr-font-mono:
'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
monospace;
--sr-font-hud: 'Barlow Semi Condensed', 'Barlow Semi Condensed Fallback', 'Inter', 'Inter Fallback', system-ui, sans-serif;
--sr-panel: var(--sr-glass-solid);
}
@media (prefers-reduced-motion: reduce) {
:root {
--sr-fast: 120ms;
--sr-mid: 120ms;
--sr-slow: 120ms;
--sr-ease: linear;
--sr-ease-in: linear;
}
}
html.sr-compact {
--sr-pad: 10px;
--sr-header-h: 28px;
--sr-gap: 8px;
}
html.sr-compact .sr-card,
html.sr-compact .sr-status {
font-size: var(--sr-fs-sm);
line-height: 1.4;
}
.sr-card,
.sr-status {
box-sizing: border-box;
font-family: var(--sr-font);
font-size: var(--sr-fs-label);
line-height: 1.45;
color: var(--sr-text);
overflow-y: auto;
overscroll-behavior: contain;
}
.sr-float {
background: var(--sr-glass);
-webkit-backdrop-filter: var(--sr-blur);
backdrop-filter: var(--sr-blur);
border: 1px solid var(--sr-line);
border-top-color: var(--sr-edge-lit);
border-radius: var(--sr-radius);
box-shadow: var(--sr-edge-glow), var(--sr-shadow);
transition:
opacity var(--sr-mid) var(--sr-ease),
transform var(--sr-mid) var(--sr-ease),
border-color var(--sr-fast) var(--sr-ease);
}
.sr-float:hover {
border-color: var(--sr-line-strong);
border-top-color: var(--sr-edge-lit);
}
:where(button):active:not(:disabled) {
transform: translateY(1px);
}
@starting-style {
.sr-card.sr-float {
opacity: 0;
transform: translateY(12px);
}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.sr-float {
background: var(--sr-glass-solid);
}
}
@media (prefers-reduced-transparency: reduce) {
.sr-float {
background: var(--sr-glass-solid);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
:where(button, a[href], [role='option'], summary),
.sr-bracketed {
position: relative;
}
:where(button, a[href], [role='option'], summary):focus-visible {
outline: none;
}
.sr-bracketed::before,
.sr-bracketed::after,
.sr-search__option.is-active::before,
.sr-search__option.is-active::after,
.sr-reticle__box::before,
.sr-reticle__box::after,
.sr-skyreticle::before,
.sr-skyreticle::after,
.sr-search__row:has(:focus-visible)::before,
.sr-search__row:has(:focus-visible)::after,
:where(button, a[href], [role='option'], summary):focus-visible::before,
:where(button, a[href], [role='option'], summary):focus-visible::after {
content: '';
position: absolute;
inset: calc(-1 * var(--sr-bracket-out, 4px));
pointer-events: none;
background:
linear-gradient(var(--sr-ember) 0 0) top left / var(--sr-bracket) var(--sr-bracket-w) no-repeat,
linear-gradient(var(--sr-ember) 0 0) top left / var(--sr-bracket-w) var(--sr-bracket) no-repeat,
linear-gradient(var(--sr-ember) 0 0) top right / var(--sr-bracket) var(--sr-bracket-w) no-repeat,
linear-gradient(var(--sr-ember) 0 0) top right / var(--sr-bracket-w) var(--sr-bracket) no-repeat;
}
.sr-bracketed::after,
.sr-search__option.is-active::after,
.sr-reticle__box::after,
.sr-skyreticle::after,
.sr-search__row:has(:focus-visible)::after,
:where(button, a[href], [role='option'], summary):focus-visible::after {
transform: scaleY(-1);
}
.sr-search__row {
position: relative;
}
.sr-card *,
.sr-status * {
box-sizing: border-box;
}
.sr-num {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
}
.sr-show__count,
.sr-kind__count,
.sr-colourkey__count,
.sr-trip__count {
font-family: var(--sr-font-mono);
}
.sr-panel__title,
.sr-status__title,
.sr-status__subtitle {
margin: 0 0 var(--sp-2);
font-family: var(--sr-font-hud);
font-size: var(--sr-fs-sm);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--sr-text-dim);
}
.sr-status__title {
font-size: var(--sr-fs-body);
color: var(--sr-text);
}
.sr-btn {
appearance: none;
min-height: 40px;
padding: 0 var(--sp-3);
font: inherit;
font-weight: 500;
color: var(--sr-text);
background: transparent;
border: 1px solid var(--sr-line-strong);
border-radius: var(--sr-radius-sm);
cursor: pointer;
transition:
border-color var(--sr-fast) var(--sr-ease),
background-color var(--sr-fast) var(--sr-ease);
}
.sr-btn:hover:not(:disabled) {
border-color: var(--sr-ember);
}
.sr-btn--primary {
color: var(--sr-ink);
background: var(--sr-ember);
border-color: var(--sr-ember);
font-weight: 600;
}
.sr-btn--quiet {
color: var(--sr-text-dim);
border-color: var(--sr-line);
}
.sr-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.sr-swatch,
.sr-glyph {
flex: 0 0 auto;
display: inline-block;
border-radius: 50%;
background: var(--sr-unknown);
}
.sr-swatch {
width: 9px;
height: 9px;
}
.sr-glyph {
width: 13px;
height: 13px;
box-shadow: 0 0 0 3px var(--sr-line);
}
.sr-glyph--station,
.sr-swatch--station {
background: var(--sr-station);
}
.sr-glyph--satellite,
.sr-swatch--satellite {
background: var(--sr-satellite);
}
.sr-glyph--debris,
.sr-swatch--debris {
background: var(--sr-debris);
}
.sr-glyph--rocket,
.sr-swatch--rocket,
.sr-swatch--launch {
background: var(--sr-rocket);
}
.sr-glyph--probe,
.sr-swatch--probe {
background: var(--sr-probe);
}
.sr-glyph--telescope,
.sr-swatch--telescope {
background: var(--sr-telescope);
}
.sr-glyph--asteroid,
.sr-swatch--asteroid {
background: var(--sr-asteroid);
}
.sr-glyph--comet,
.sr-swatch--comet {
background: var(--sr-comet);
}
.sr-glyph--site,
.sr-swatch--site {
background: var(--sr-site);
}
.sr-glyph--world,
.sr-swatch--world {
background: var(--sr-world);
}
.sr-glyph--star,
.sr-swatch--star {
background: var(--sr-star);
}
.sr-glyph--exoplanet,
.sr-swatch--exoplanet {
background: var(--sr-exoplanet);
}
.sr-glyph--dso,
.sr-swatch--dso {
background: var(--sr-dso);
}
.sr-glyph--exotic,
.sr-swatch--exotic {
background: var(--sr-exotic);
}
.sr-glyph--earthevent,
.sr-swatch--earthevent {
background: var(--sr-site);
}
.sr-glyph--storm,
.sr-swatch--storm {
background: var(--sr-storm);
}
.sr-glyph--oddity,
.sr-swatch--oddity {
background: var(--sr-probe);
}
.sr-card {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: var(--sr-z-card);
display: flex;
flex-direction: column;
max-height: 72vh;
padding: var(--sp-2) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
border-width: 1px 0 0;
border-radius: var(--sr-radius-shell) var(--sr-radius-shell) 0 0;
transform: translateY(0);
transition:
transform var(--sr-slow) var(--sr-ease),
opacity var(--sr-mid) var(--sr-ease),
border-color var(--sr-fast) var(--sr-ease);
}
.sr-card[hidden] {
display: none;
}
.sr-card[data-cls='sample'],
.sr-card[data-cls='illustrative'] {
border-top-style: dashed;
border-top-color: var(--sr-line-strong);
}
.sr-card__header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--sp-3);
row-gap: var(--sp-1);
align-items: start;
padding: var(--sp-2) 0 var(--sp-4);
}
.sr-card__micro {
grid-column: 1;
margin: 0;
font: 600 var(--sr-fs-sm)/16px var(--sr-font-hud);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sr-text-dim);
}
.sr-card__name {
grid-column: 1;
display: -webkit-box;
margin: 0;
padding-bottom: 2px;
overflow: hidden;
font: 600 var(--sr-fs-name-sm)/1.1 var(--sr-font);
letter-spacing: -0.01em;
color: var(--sr-text);
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.sr-card__close {
grid-column: 2;
grid-row: 1 / span 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: calc(-1 * var(--sp-1)) calc(-1 * var(--sp-1)) 0 0;
padding: var(--sp-1);
color: var(--sr-text);
background: var(--sr-wash);
background-clip: content-box;
border: 0;
border-radius: 50%;
cursor: pointer;
transition: background-color var(--sr-fast) var(--sr-ease);
}
.sr-card__close:active {
background-color: var(--sr-wash-strong);
}
.sr-hero {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--sp-3);
margin: 0;
padding: var(--sp-3) 0;
list-style: none;
border-top: 1px solid var(--sr-line);
border-bottom: 1px solid var(--sr-line);
}
.sr-hero__cell {
display: flex;
flex-direction: column;
gap: var(--sp-1);
min-width: 0;
}
.sr-hero__num {
overflow: hidden;
font: 400 var(--sr-fs-num-sm)/1.1 var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text);
white-space: nowrap;
text-overflow: ellipsis;
}
.sr-hero__num[data-long='2'] {
font-size: var(--sr-fs-label);
line-height: 22px;
}
.sr-hero__cell.is-missing .sr-hero__num {
color: var(--sr-text-dim);
}
.sr-hero__unit {
overflow: hidden;
font: 400 var(--sr-fs-sm)/16px var(--sr-font);
color: var(--sr-text-dim);
white-space: nowrap;
text-overflow: ellipsis;
}
.sr-card__actions {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-2);
margin: 0;
padding: var(--sp-4) 0;
}
.sr-act {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-1);
min-width: 0;
height: 52px;
padding: 0 var(--sp-1);
font: 400 var(--sr-fs-sm)/16px var(--sr-font);
color: var(--sr-text);
background: var(--sr-wash);
border: 0;
border-radius: var(--sr-radius);
cursor: pointer;
transition: background-color var(--sr-fast) var(--sr-ease);
}
.sr-act__label {
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sr-act__label--short {
display: none;
}
@media (max-width: 359px) {
.sr-act__label--long {
display: none;
}
.sr-act__label--short {
display: inline;
}
}
.sr-act .sr-icon {
flex: 0 0 auto;
}
.sr-act--primary {
font-weight: 600;
color: var(--sr-ink);
background: var(--sr-ember);
}
.sr-act:active:not(:disabled) {
background: var(--sr-wash-strong);
}
.sr-act--primary:active:not(:disabled) {
background: var(--sr-ember-light);
}
.sr-act:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.sr-card__time {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.sr-light__head,
.sr-light__axis {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
}
.sr-light__now {
font: 400 var(--sr-fs-body)/20px var(--sr-font);
color: var(--sr-text);
}
.sr-light__next,
.sr-light__axis {
font: 400 var(--sr-fs-sm)/16px var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
white-space: nowrap;
}
.sr-light {
display: flex;
height: 6px;
overflow: hidden;
border-radius: var(--sr-radius-sm);
outline: 1px solid var(--sr-line-strong);
background: var(--sr-shadowed);
}
.sr-light__seg { height: 100%; }
.sr-light__seg.is-sunlit { background: var(--sr-sunlit); }
.sr-light__seg.is-shadow { background: var(--sr-shadowed); }
.sr-card__more-list {
display: flex;
flex-direction: column;
margin: var(--sp-4) 0 var(--sp-5);
}
.sr-disc {
border-top: 1px solid var(--sr-line);
}
.sr-disc__head {
display: flex;
align-items: center;
gap: var(--sp-3);
width: calc(100% + 2 * var(--sp-2));
min-height: 44px;
margin: 0 calc(-1 * var(--sp-2));
padding: var(--sp-3) var(--sp-2);
font: 400 var(--sr-fs-body)/20px var(--sr-font);
color: var(--sr-text);
text-align: left;
background: transparent;
border-radius: var(--sr-radius);
cursor: pointer;
transition: background-color var(--sr-fast) var(--sr-ease);
}
.sr-disc__head {
border: 0;
}
.sr-disc__label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sr-disc__hint {
flex: 0 0 auto;
font-size: var(--sr-fs-sm);
line-height: 16px;
color: var(--sr-text-dim);
}
.sr-disc__head .sr-icon {
flex: 0 0 auto;
color: var(--sr-text-dim);
transition: transform var(--sr-fast) var(--sr-ease);
}
.sr-disc__head[aria-expanded='true'] .sr-icon {
transform: rotate(90deg);
}
.sr-disc__head:active {
background: var(--sr-wash-strong);
}
.sr-disc__head:active .sr-disc__hint,
.sr-disc__head:active .sr-icon {
color: var(--sr-text-soft);
}
.sr-disc__panel {
padding: var(--sp-1) 0 var(--sp-4);
}
.sr-disc__panel[hidden] {
display: none;
}
.sr-disc__body > * {
margin-top: 0;
margin-bottom: 0;
}
.sr-disc__body > * + * {
margin-top: var(--sp-3);
}
@media (hover: hover) {
.sr-card__close:hover {
background-color: var(--sr-wash-hover);
}
.sr-act:hover:not(:disabled) {
background: var(--sr-wash-hover);
}
.sr-act--primary:hover:not(:disabled) {
background: var(--sr-ember-light);
}
.sr-disc__head:hover {
background: var(--sr-wash);
}
.sr-disc__head:hover .sr-disc__hint,
.sr-disc__head:hover .sr-icon {
color: var(--sr-text-soft);
}
}
.sr-card__inline {
align-self: flex-start;
min-height: 44px;
padding: 0 var(--sp-3);
font-weight: 400;
color: var(--sr-text);
border-color: var(--sr-line-strong);
border-radius: var(--sr-radius);
}
.sr-card__actions:has(+ .sr-card__sky) {
padding-bottom: var(--sp-2);
}
.sr-card__sky {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: var(--sp-2);
padding-bottom: var(--sp-4);
}
.sr-card__sky + .sr-card__note {
margin-top: calc(-1 * var(--sp-2));
margin-bottom: var(--sp-4);
}
.sr-card__tool {
min-width: 0;
height: 44px;
padding: 0 var(--sp-2);
font: 400 var(--sr-fs-sm)/16px var(--sr-font);
color: var(--sr-text-soft);
text-align: center;
background: var(--sr-wash);
border: 1px solid transparent;
border-radius: var(--sr-radius);
cursor: pointer;
transition: background-color var(--sr-fast) var(--sr-ease), border-color var(--sr-fast) var(--sr-ease), color var(--sr-fast) var(--sr-ease);
}
.sr-card__tool:active:not(:disabled) {
background: var(--sr-wash-strong);
}
.sr-card__tool[aria-pressed='true'] {
color: var(--sr-text);
background: var(--sr-wash-strong);
border-color: var(--sr-ember);
}
.sr-card__tool:disabled {
opacity: 0.4;
cursor: not-allowed;
}
@media (hover: hover) {
.sr-card__tool:hover:not(:disabled) {
color: var(--sr-text);
background: var(--sr-wash-hover);
}
.sr-card__tool[aria-pressed='true']:hover:not(:disabled) {
background: var(--sr-wash-strong);
}
}
@media (prefers-reduced-motion: reduce) {
.sr-card__tool {
transition: none;
}
}
.sr-card__page {
display: inline-flex;
align-items: center;
align-self: flex-start;
min-height: 44px;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
}
.sr-card__page[hidden] { display: none; }
.sr-card__page:hover { color: var(--sr-ember-light); }
.sr-card__parent {
display: inline-flex;
align-items: center;
align-self: flex-start;
min-height: 44px;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
cursor: pointer;
}
.sr-card__parent { gap: var(--sp-1); }
.sr-card__parent svg { width: 16px; height: 16px; flex: none; }
.sr-card__parent:hover, .sr-card__parent:focus-visible { color: var(--sr-ember-light); }
.sr-card__sentence {
font-size: var(--sr-fs-body);
line-height: 22px;
}
.sr-card__why {
padding-left: var(--sp-3);
border-left: 2px solid var(--sr-line-strong);
font-size: var(--sr-fs-body);
line-height: 22px;
}
.sr-card__figure {
margin: 0 0 var(--sp-3);
}
.sr-card__photo {
display: block;
width: 100%;
height: auto;
border-radius: var(--sr-radius);
background: var(--sr-space-edge);
}
.sr-card__photo-credit {
margin: var(--sp-2) 0 0;
font-size: var(--sr-fs-sm);
line-height: 18px;
color: var(--sr-text-dim);
}
.sr-card__label {
margin: 0 0 var(--sp-2);
font: 600 var(--sr-fs-sm)/16px var(--sr-font-hud);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sr-text-dim);
}
.sr-rows {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: var(--sp-2) var(--sp-3);
margin: 0;
}
.sr-rows__key {
margin: 0;
font-size: var(--sr-fs-sm);
line-height: 18px;
color: var(--sr-text-dim);
}
.sr-rows__val {
margin: 0;
font-size: var(--sr-fs-sm);
line-height: 18px;
font-variant-numeric: tabular-nums;
text-align: right;
overflow-wrap: anywhere;
}
.sr-rows__num {
font-family: var(--sr-font-mono);
}
.sr-compare {
display: flex;
flex-direction: column;
gap: var(--sp-1);
margin: 0;
padding: 0;
list-style: none;
}
.sr-compare__item {
font-size: var(--sr-fs-sm);
line-height: 18px;
font-variant-numeric: tabular-nums;
}
.sr-card__seeline {
font-size: var(--sr-fs-body);
line-height: 22px;
}
.sr-card__facts {
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.sr-card__fact,
.sr-card__fact-note {
margin: 0;
font-size: var(--sr-fs-sm);
line-height: 18px;
font-variant-numeric: tabular-nums;
}
.sr-card__fact-note {
color: var(--sr-text-dim);
}
.sr-card__drawn,
.sr-card__source {
font-size: var(--sr-fs-sm);
line-height: 18px;
}
.sr-card__source {
color: var(--sr-text-dim);
overflow-wrap: anywhere;
}
.sr-card__foot {
margin-top: auto;
padding-top: var(--sp-3);
border-top: 1px solid var(--sr-line);
}
.sr-card__cls {
margin: 0;
font-size: var(--sr-fs-sm);
line-height: 18px;
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
}
.sr-card__cls::first-letter {
text-transform: uppercase;
}
.sr-card__more {
position: sticky;
bottom: calc(-1 * var(--sp-4));
flex: 0 0 auto;
height: 44px;
margin-top: -44px;
pointer-events: none;
opacity: 0;
background: linear-gradient(to bottom, transparent, var(--sr-panel) 85%);
transition: opacity var(--sr-fast) var(--sr-ease);
}
.sr-card__more::after {
content: '';
position: absolute;
left: 50%;
bottom: 12px;
width: 8px;
height: 8px;
border-right: 2px solid var(--sr-text-dim);
border-bottom: 2px solid var(--sr-text-dim);
transform: translateX(-50%) rotate(45deg);
}
.sr-card.has-more .sr-card__more {
opacity: 1;
}
.sr-card__myth {
margin: 0 0 var(--sp-1);
font-size: var(--sr-fs-body);
line-height: 22px;
}
.sr-card__mythsource {
margin: 0 0 var(--sp-3);
font-size: var(--sr-fs-sm);
line-height: 18px;
color: var(--sr-text-dim);
}
.sr-card__myths .sr-card__mythsource:last-child {
margin-bottom: 0;
}
.sr-card__aboardrow {
display: flex;
align-items: center;
width: 100%;
min-height: 44px;
margin: 0 0 var(--sp-2);
padding: var(--sp-2) var(--sp-3);
font: inherit;
font-size: var(--sr-fs-body);
line-height: 20px;
text-align: left;
color: var(--sr-text);
background: var(--sr-wash);
border: 0;
border-radius: var(--sr-radius);
cursor: pointer;
transition: background-color var(--sr-fast) var(--sr-ease);
}
.sr-card__aboardrow:active {
background: var(--sr-wash-strong);
}
@media (hover: hover) {
.sr-card__aboardrow:hover {
background: var(--sr-wash-hover);
}
}
.sr-card__aboardnote {
margin: 0;
font-size: var(--sr-fs-sm);
line-height: 18px;
color: var(--sr-text-dim);
}
@media (prefers-reduced-motion: reduce) {
.sr-act,
.sr-card__close,
.sr-card__aboardrow,
.sr-disc__head,
.sr-disc__head .sr-icon {
transition: none;
}
}
.sr-panel {
margin: 0;
}
.sr-status__intro {
margin: 0 0 var(--sp-2);
font-size: var(--sr-fs-sm);
line-height: 1.4;
color: var(--sr-text-dim);
}
.sr-status__harvest {
margin: -4px 0 var(--sp-2);
font-size: var(--sr-fs-sm);
line-height: 1.4;
color: var(--sr-text-dim);
}
.sr-status__block {
margin-top: var(--sp-3);
padding-top: 12px;
border-top: 1px solid var(--sr-line);
}
.sr-status__sources,
.sr-status__kinds,
.sr-status__credits {
margin: 0;
padding: 0;
list-style: none;
}
.sr-status__lookkinds,
.sr-status__lookkinds dd {
margin: 0;
}
.sr-status__lookkind {
font-size: var(--sr-fs-sm);
font-weight: 600;
line-height: 18px;
color: var(--sr-text);
}
.sr-source {
padding: var(--sp-2) 0;
border-bottom: 1px solid var(--sr-line);
}
.sr-source:last-child {
border-bottom: 0;
}
.sr-source__head {
display: flex;
gap: 8px;
align-items: center;
}
.sr-source__label {
flex: 1 1 auto;
min-width: 0;
font-size: var(--sr-fs-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-source__age {
margin: 2px 0 0;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
}
.sr-source__error {
margin: var(--sp-1) 0 0;
font-size: var(--sr-fs-sm);
line-height: 1.35;
color: var(--sr-text-dim);
overflow-wrap: anywhere;
}
.sr-state {
flex: 0 0 auto;
padding: 2px 8px;
font-size: var(--sr-fs-sm);
font-weight: 600;
letter-spacing: 0.01em;
border: 1px solid currentcolor;
border-radius: var(--sr-radius-pill);
}
.sr-state--ok {
color: var(--sr-ok);
}
.sr-state--stale {
color: var(--sr-stale);
}
.sr-state--unknown {
color: var(--sr-text-dim);
border: 1px dashed var(--sr-unread);
}
.sr-source.is-unknown .sr-source__label {
color: var(--sr-text-dim);
}
.sr-kind {
display: flex;
gap: 8px;
align-items: baseline;
padding: var(--sp-1) 0;
}
.sr-kind__name {
flex: 1 1 auto;
min-width: 0;
font-size: var(--sr-fs-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-kind__state {
flex: 0 0 auto;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
}
.sr-kind.is-live .sr-kind__state {
color: var(--sr-ok);
}
.sr-kind.is-sample .sr-kind__state,
.sr-kind.is-mixed .sr-kind__state,
.sr-kind.is-illustrative .sr-kind__state {
color: var(--sr-stale);
}
.sr-kind__count {
flex: 0 0 auto;
min-width: 74px;
font-size: var(--sr-fs-sm);
text-align: right;
color: var(--sr-text-dim);
}
.sr-credit {
padding: var(--sp-1) 0;
font-size: var(--sr-fs-sm);
line-height: 1.4;
color: var(--sr-text-dim);
}
@media (min-width: 900px) {
:root {
--sr-card-w: 384px;
}
.sr-card {
top: 16px;
right: 16px;
bottom: 16px;
left: auto;
width: var(--sr-card-w);
max-height: none;
border-width: 1px;
border-radius: var(--sr-radius);
padding-bottom: var(--sr-pad);
}
@starting-style {
.sr-card.sr-float {
transform: translateX(12px);
}
}
}
@media (min-width: 1440px) {
:root {
--sr-card-w: 412px;
}
}
html.sr-clean body > *:not(.sr-scene):not(.sr-veil):not(.sr-over-clean) {
visibility: hidden !important;
pointer-events: none !important;
transition: none !important;
}
html.sr-opening-on body > *:not(.sr-scene):not(.sr-veil):not(.sr-opening):not(#boot) {
visibility: hidden !important;
pointer-events: none !important;
transition: none !important;
}
html.sr-hud body > *:not(.sr-scene):not(.sr-veil):not(.sr-over-clean):not(#labels):not(#sr-hud) {
visibility: hidden !important;
pointer-events: none !important;
transition: none !important;
}
html.sr-hud #sr-time {
visibility: visible !important;
pointer-events: auto !important;
}
@media (prefers-reduced-motion: reduce) {
.sr-btn {
transition: none;
}
.sr-float,
.sr-card {
transition: opacity 120ms linear;
}
:where(button):active:not(:disabled) {
transform: none;
}
@starting-style {
.sr-card.sr-float {
transform: none;
}
}
}
.sr-search__row {
display: flex;
gap: var(--sp-2);
align-items: stretch;
}
.sr-search__input {
flex: 1 1 140px;
min-width: 0;
min-height: 40px;
padding: 0 var(--sp-3);
font: inherit;
color: var(--sr-text);
background: var(--sr-wash);
border: 1px solid var(--sr-line-strong);
border-radius: var(--sr-radius-sm);
}
.sr-search__input::placeholder {
color: var(--sr-text-dim);
}
.sr-search__input:focus-visible {
outline: 2px solid var(--sr-ember);
outline-offset: 1px;
}
.sr-search__fly {
flex: 0 0 auto;
}
.sr-search__pop {
margin-top: var(--sp-2);
overflow: hidden;
}
.sr-search__pop[hidden] {
display: none;
}
.sr-search__list {
margin: 0;
padding: 0;
list-style: none;
max-height: 264px;
overflow-y: auto;
overscroll-behavior: contain;
}
.sr-search__option {
display: flex;
gap: 8px;
align-items: center;
min-height: 44px;
box-sizing: border-box;
flex: 0 0 auto;
padding: var(--sp-1) var(--sp-3);
cursor: pointer;
border-left: 2px solid transparent;
}
.sr-search__icon {
flex: 0 0 auto;
display: inline-flex;
width: 16px;
height: 16px;
margin: 0 -4px;
}
.sr-search__icon .sr-icon { stroke: var(--sr-unknown); }
.sr-ink--station .sr-icon { stroke: var(--sr-station); }
.sr-ink--satellite .sr-icon { stroke: var(--sr-satellite); }
.sr-ink--rocket .sr-icon { stroke: var(--sr-rocket); }
.sr-ink--probe .sr-icon { stroke: var(--sr-probe); }
.sr-ink--telescope .sr-icon { stroke: var(--sr-telescope); }
.sr-ink--site .sr-icon { stroke: var(--sr-site); }
.sr-ink--world .sr-icon { stroke: var(--sr-world); }
.sr-ink--star .sr-icon { stroke: var(--sr-star); }
.sr-ink--exoplanet .sr-icon { stroke: var(--sr-exoplanet); }
.sr-ink--dso .sr-icon { stroke: var(--sr-dso); }
.sr-ink--storm .sr-icon { stroke: var(--sr-storm); }
.sr-ink--oddity .sr-icon { stroke: var(--sr-probe); }
.sr-search__option + .sr-search__option {
border-top: 1px solid var(--sr-line);
}
html.sr-phone .sr-search__option,
html.sr-phone .sr-search__option--rich {
min-height: 48px;
}
@media (pointer: coarse) {
.sr-search__option {
min-height: 48px;
}
}
.sr-search__name {
flex: 1 1 auto;
min-width: 0;
font-size: var(--sr-fs-body);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-search__where {
flex: 0 1 auto;
max-width: 42%;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-search__text {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sr-search__what {
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-search__hit {
color: var(--sr-ember);
background: transparent;
font-weight: 600;
}
.sr-search__option:hover,
.sr-search__option.is-active {
--sr-bracket-out: 0px;
background: var(--sr-ember-soft);
}
.sr-search__option.is-active .sr-search__name {
color: var(--sr-text);
}
.sr-search__foot {
margin: 0;
padding: var(--sp-2) var(--sp-3);
font-size: var(--sr-fs-sm);
line-height: 1.4;
color: var(--sr-text-dim);
border-top: 1px solid var(--sr-line);
}
.sr-search__foot[hidden] {
display: none;
}
.sr-search__note {
margin: 8px 0 0;
font-size: var(--sr-fs-sm);
line-height: 1.4;
color: var(--sr-text-dim);
}
.sr-search__note.is-warning {
padding-left: 8px;
color: var(--sr-text);
border-left: 2px solid var(--sr-stale);
}
@media (max-width: 600px) {
.sr-search__row {
flex-wrap: wrap;
}
.sr-search__input {
flex: 1 1 100%;
}
.sr-search__fly {
flex: 1 1 auto;
}
.sr-search__list {
max-height: 34vh;
}
.sr-search__where {
max-width: 38%;
}
}
.sr-search__option {
transition:
background-color var(--sr-fast) var(--sr-ease),
border-color var(--sr-fast) var(--sr-ease);
}
@media (prefers-reduced-motion: reduce) {
.sr-search__option {
transition: none;
}
}
.sr-search.is-reduced-motion .sr-search__option {
transition: none;
}
:root {
--sr-trip-bar: 56px;
--sr-trip-bar-phone: 60px;
}
html.sr-trip-mode #labels {
opacity: 0;
transition: opacity var(--sr-slow) var(--sr-ease);
}
html.sr-trip-mode[data-trip-phase='dwell'] #labels,
html.sr-trip-mode[data-trip-phase='paused'] #labels {
opacity: 1;
}
html.sr-trip-mode[data-trip-phase='dwell'] #labels .label:not([data-kind='selection']),
html.sr-trip-mode[data-trip-phase='paused'] #labels .label:not([data-kind='selection']) {
opacity: 0.6;
}
#labels .label.is-subject .label__text {
display: inline-block;
transform-origin: 50% 100%;
animation: sr-label-in 300ms var(--sr-ease) both;
}
#labels .label.is-dimmed {
opacity: 0.6;
transition: opacity 200ms var(--sr-ease);
}
html.sr-present.sr-trip-mode:not([data-trip-names]) #labels .label:not(.is-subject):not(.sr-sky-label):not([data-kind='selection']) {
opacity: 0;
}
@keyframes sr-label-in {
from {
transform: scale(0.92);
}
to {
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
#labels .label.is-subject .label__text {
animation: none;
}
}
.sr-veil {
position: fixed;
inset: 0;
z-index: var(--sr-z-veil);
pointer-events: none;
background: var(--sr-space);
opacity: 0;
}
.sr-veil.is-on {
opacity: 1;
}
.sr-trip {
position: fixed;
inset: 0;
z-index: var(--sr-z-trip);
font-family: var(--sr-font);
color: var(--sr-text);
pointer-events: none;
}
.sr-trip *,
.sr-tripsheet * {
box-sizing: border-box;
}
.sr-trip__toolbar,
.sr-trip__top,
.sr-tripsheet.is-floating {
pointer-events: auto;
}
.sr-trip__toolbar[hidden],
.sr-trip__top[hidden],
.sr-tripsheet__panel[hidden],
.sr-tripsheet__card[hidden] {
display: none;
}
.sr-trip__toolbar {
position: fixed;
bottom: var(--sp-5);
left: calc(50% + var(--sr-scene-left) / 2);
display: flex;
align-items: center;
gap: var(--sp-1);
height: var(--sr-trip-bar);
padding: 0 var(--sp-2);
white-space: nowrap;
border-radius: var(--sr-radius-pill);
transform: translateX(-50%);
}
.sr-trip__toolbar.sr-float,
.sr-trip__top.sr-float {
transition:
left var(--sr-slow) var(--sr-ease),
max-width var(--sr-slow) var(--sr-ease),
border-color var(--sr-fast) var(--sr-ease);
}
.sr-trip__tb {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
color: var(--sr-text);
cursor: pointer;
background: transparent;
border: 0;
border-radius: 50%;
transition:
background-color var(--sr-fast) var(--sr-ease),
color var(--sr-fast) var(--sr-ease);
-webkit-tap-highlight-color: transparent;
}
.sr-trip__tb:active:not(:disabled) {
background: var(--sr-wash-strong);
}
::highlight(sr-voice) {
color: var(--sr-text);
background-color: var(--sr-ember-soft);
}
.sr-trip__tb[aria-pressed='true'] {
background: var(--sr-wash-strong);
}
.sr-trip__tb:disabled {
cursor: default;
opacity: 0.4;
}
.sr-trip__tb--play.is-paused {
color: var(--sr-ink);
background: var(--sr-ember);
}
.sr-trip__tb--play.is-paused:active {
background: var(--sr-ember-light);
}
@media (hover: hover) {
.sr-trip__tb:hover:not(:disabled) {
background: var(--sr-wash-hover);
}
.sr-trip__tb--play.is-paused:hover {
background: var(--sr-ember-light);
}
}
.sr-trip__sep {
flex: 0 0 auto;
width: 1px;
height: 24px;
margin: 0 var(--sp-1);
background: var(--sr-line);
}
.sr-trip__progress {
display: flex;
flex: 0 0 auto;
flex-direction: column;
gap: var(--sp-1);
align-items: center;
justify-content: center;
min-width: 64px;
padding: 0 var(--sp-1);
}
.sr-trip__count {
font: 400 var(--sr-fs-sm)/16px var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text);
}
.sr-trip__segs {
display: flex;
gap: 2px;
width: 100%;
max-width: 64px;
margin: 0;
padding: 0;
list-style: none;
}
.sr-trip__seg {
position: relative;
flex: 1 1 0;
height: 2px;
overflow: hidden;
background: var(--sr-line-strong);
border-radius: var(--sr-radius-sm);
}
.sr-trip__seg.is-done::after,
.sr-trip__seg.is-here::after {
position: absolute;
inset: 0;
content: '';
background: var(--sr-text);
transform-origin: left center;
}
.sr-trip__seg.is-done::after {
transform: scaleX(1);
}
.sr-trip__seg.is-here::after {
transform: scaleX(var(--sr-fill, 0));
}
.sr-trip__live {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.sr-trip__stopname {
margin: 0;
font-size: var(--sr-fs-sm);
}
.sr-trip__top {
position: fixed;
top: var(--sr-inset);
left: calc(50% + var(--sr-scene-left) / 2);
display: flex;
gap: var(--sp-3);
align-items: center;
max-width: min(640px, calc(100vw - var(--sr-scene-left) - 2 * var(--sr-inset)));
min-height: 48px;
padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-5);
border-radius: var(--sr-radius-pill);
transform: translateX(-50%);
}
.sr-trip__titles {
display: flex;
flex: 1 1 0;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.sr-trip__chapter {
margin: 0;
overflow: hidden;
font: 600 var(--sr-fs-sm)/16px var(--sr-font-hud);
color: var(--sr-text-dim);
letter-spacing: 0.12em;
text-transform: uppercase;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-trip__chapter[hidden] {
display: none;
}
.sr-trip__chapter.is-new {
animation: sr-chapter-in var(--sr-slow) var(--sr-ease) both;
}
@keyframes sr-chapter-in {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: none;
}
}
.sr-trip__title {
min-width: 0;
margin: 0;
overflow: hidden;
font: 600 var(--sr-fs-label)/20px var(--sr-font);
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-trip__leave {
display: inline-flex;
flex: 0 0 auto;
gap: var(--sp-2);
align-items: center;
height: 40px;
padding: 0 var(--sp-4) 0 var(--sp-3);
font: 400 var(--sr-fs-label)/20px var(--sr-font);
color: var(--sr-text);
cursor: pointer;
background: var(--sr-wash);
border: 0;
border-radius: var(--sr-radius-pill);
transition: background-color var(--sr-fast) var(--sr-ease);
}
.sr-trip__leave:active {
background: var(--sr-wash-strong);
}
.sr-trip__home {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
color: var(--sr-text);
cursor: pointer;
background: var(--sr-wash);
border: 0;
border-radius: 50%;
transition: background-color var(--sr-fast) var(--sr-ease);
}
.sr-trip__home:active {
background: var(--sr-wash-strong);
}
@media (hover: hover) {
.sr-trip__leave:hover,
.sr-trip__home:hover {
background: var(--sr-wash-hover);
}
}
.sr-side__trip {
overflow-y: auto;
overscroll-behavior: contain;
}
.sr-tripsheet {
display: flex;
flex-direction: column;
min-height: 100%;
padding-top: var(--sp-4);
}
.sr-tripsheet__panel {
padding: var(--sp-1) var(--sr-inset) var(--sr-inset);
}
.sr-tripsheet__card {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.sr-tripsheet__card > .sr-card.is-docked {
flex: 1 1 auto;
min-height: 0;
}
.sr-tripsheet__pic {
display: block;
width: calc(100% + 2 * var(--sr-inset));
height: 176px;
margin: calc(-1 * (var(--sp-4) + var(--sp-1))) calc(-1 * var(--sr-inset)) calc(-1 * var(--sp-4));
object-fit: cover;
object-position: 50% 20%;
opacity: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, var(--sr-text) 40%, transparent 100%);
mask-image: linear-gradient(180deg, var(--sr-text) 40%, transparent 100%);
transition: opacity var(--sr-slow) var(--sr-ease);
}
.sr-tripsheet__pic.is-loaded { opacity: 1; }
.sr-tripsheet.is-floating .sr-tripsheet__pic {
width: calc(100% + 2 * var(--sp-4));
height: 136px;
margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-3));
}
@media (prefers-reduced-motion: reduce) {
.sr-tripsheet__pic { transition: opacity 120ms linear; }
}
.sr-tripsheet__pic + .sr-tripsheet__head { position: relative; }
.sr-tripsheet__head {
display: flex;
flex-direction: column;
gap: var(--sp-1);
padding: var(--sp-2) 0 var(--sp-4);
}
.sr-tripsheet__micro {
margin: 0;
font: 600 var(--sr-fs-sm)/16px var(--sr-font-hud);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sr-text-dim);
}
.sr-tripsheet__micro--list {
margin: var(--sp-6) 0 var(--sp-2);
}
.sr-tripsheet__name {
display: -webkit-box;
margin: 0;
padding-bottom: 2px;
overflow: hidden;
font: 600 var(--sr-fs-name)/1.1 var(--sr-font);
letter-spacing: -0.01em;
color: var(--sr-text);
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.sr-tripsheet__name:focus {
outline: none;
}
.sr-tripsheet__meta {
margin: var(--sp-1) 0 0;
font: 400 var(--sr-fs-sm)/16px var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
}
.sr-tripsheet__text {
margin: 0 0 var(--sp-3);
font: 400 var(--sr-fs-body)/22px var(--sr-font);
color: var(--sr-text);
}
.sr-tripsheet__note {
margin: 0 0 var(--sp-3);
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text-dim);
}
.sr-tripsheet__row {
display: flex;
gap: var(--sp-2);
margin-top: var(--sp-4);
}
.sr-tripsheet__start {
display: inline-flex;
flex: 1 1 auto;
gap: var(--sp-2);
align-items: center;
justify-content: center;
height: 48px;
padding: 0 var(--sp-4);
font: 600 var(--sr-fs-label)/20px var(--sr-font);
color: var(--sr-ink);
cursor: pointer;
background: var(--sr-ember);
border: 0;
border-radius: var(--sr-radius);
transition: background-color var(--sr-fast) var(--sr-ease);
}
.sr-tripsheet__start:active {
background: var(--sr-ember-light);
}
.sr-tripsheet__sound {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
color: var(--sr-text);
cursor: pointer;
background: var(--sr-wash);
border: 0;
border-radius: var(--sr-radius);
transition: background-color var(--sr-fast) var(--sr-ease);
}
.sr-tripsheet__sound[aria-pressed='true'],
.sr-tripsheet__sound:active {
background: var(--sr-wash-strong);
}
.sr-tripsheet__sound:disabled {
cursor: default;
opacity: 0.4;
}
.sr-tripsheet__quiet {
display: inline-flex;
align-items: center;
min-height: 44px;
margin: var(--sp-1) 0 0 calc(-1 * var(--sp-1));
padding: 0 var(--sp-1);
font: 400 var(--sr-fs-label)/20px var(--sr-font);
color: var(--sr-text-soft);
cursor: pointer;
background: transparent;
border: 0;
border-radius: var(--sr-radius);
transition: color var(--sr-fast) var(--sr-ease);
}
.sr-tripsheet__stops {
margin: 0;
padding: 0;
list-style: none;
}
.sr-tripsheet__stops li + li {
border-top: 1px solid var(--sr-line);
}
.sr-tripsheet__stop {
display: flex;
gap: var(--sp-3);
align-items: baseline;
width: calc(100% + 2 * var(--sp-2));
min-height: 44px;
margin: 0 calc(-1 * var(--sp-2));
padding: var(--sp-3) var(--sp-2);
font: 400 var(--sr-fs-body)/20px var(--sr-font);
color: var(--sr-text);
text-align: left;
cursor: pointer;
background: transparent;
border: 0;
border-radius: var(--sr-radius);
transition: background-color var(--sr-fast) var(--sr-ease);
}
.sr-tripsheet__stopn {
flex: 0 0 auto;
min-width: 20px;
font: 400 var(--sr-fs-sm)/20px var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
}
.sr-tripsheet__stoptitle {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-tripsheet__stop:active {
background: var(--sr-wash-strong);
}
.sr-tripsheet__stop:active .sr-tripsheet__stopn {
color: var(--sr-text-soft);
}
@media (hover: hover) {
.sr-tripsheet__start:hover {
background: var(--sr-ember-light);
}
.sr-tripsheet__sound:hover:not(:disabled) {
background: var(--sr-wash-hover);
}
.sr-tripsheet__quiet:hover {
color: var(--sr-text);
}
.sr-tripsheet__stop:hover {
background: var(--sr-wash);
}
.sr-tripsheet__stop:hover .sr-tripsheet__stopn {
color: var(--sr-text-soft);
}
}
.sr-tripsheet__actions {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
gap: var(--sp-2);
padding: var(--sp-1) 0 0;
}
.sr-tripsheet__actions.is-four {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-flow: row;
}
.sr-side .sr-tripsheet .sr-act {
height: 56px;
}
.sr-tripsheet__nextcard {
width: 100%;
}
.sr-card__header--stop {
grid-template-columns: minmax(0, 1fr);
}
.sr-card__header--stop .sr-card__name {
-webkit-line-clamp: 3;
}
.sr-card__subject {
display: flex;
gap: var(--sp-2);
align-items: center;
min-width: 0;
margin: var(--sp-1) 0 0;
font: 400 var(--sr-fs-body)/20px var(--sr-font);
color: var(--sr-text);
}
.sr-card__subject .sr-swatch {
width: 10px;
height: 10px;
}
.sr-card__subjectname {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-card__when,
.sr-card__tripline {
margin: var(--sp-1) 0 0;
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
}
.sr-card__when[hidden],
.sr-card__tripline[hidden] {
display: none;
}
.sr-card__tripline {
margin-top: var(--sp-2);
}
.sr-legend {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-1) var(--sp-2);
margin: var(--sp-2) 0 0;
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text-dim);
}
.sr-legend[hidden] { display: none; }
.sr-card__overlay {
display: grid;
gap: var(--sp-2);
margin-top: var(--sp-3);
}
.sr-card__overlay[hidden] { display: none; }
.sr-overlaykey { display: grid; gap: var(--sp-2); }
.sr-overlaykey[hidden] { display: none; }
.sr-overlaykey__line { margin: 0; font: 400 var(--sr-fs-sm)/18px var(--sr-font); color: var(--sr-text-dim); }
.sr-overlaykey__line[hidden] { display: none; }
.sr-overlaykey > .sr-more { justify-self: start; margin-top: 0; }
.sr-legend__title { grid-column: 1 / -1; color: var(--sr-text); }
.sr-legend__ramp { grid-column: 1 / -1; height: 8px; border-radius: var(--sr-radius-sm); }
.sr-legend__low,
.sr-legend__high {
font-family: var(--sr-font-mono);
font-variant-numeric: tabular-nums;
}
.sr-legend__high { text-align: right; }
#labels .label.sr-sky-label { transition: opacity var(--sr-slow) var(--sr-ease); }
#labels .label.sr-sky-label[data-sky='figure'] {
font: 600 var(--sr-fs-sm)/16px var(--sr-font-hud);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sr-text-dim);
}
.sr-card__leadbody {
margin: var(--sp-4) 0 0;
font: 400 var(--sr-fs-body)/22px var(--sr-font);
color: var(--sr-text);
}
.sr-card__leadnote {
margin: var(--sp-2) 0 0;
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text-dim);
}
html.sr-trip-mode #sr-card .sr-card__body,
html.sr-trip-mode #sr-card .sr-card__foot {
animation: sr-trip-rise var(--sr-mid) var(--sr-ease) both;
}
@keyframes sr-trip-rise {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes sr-trip-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
html.sr-trip-mode #sr-rail,
html.sr-trip-mode #sr-time,
html.sr-trip-collapsed #sr-side {
visibility: hidden;
opacity: 0;
pointer-events: none;
transition:
opacity var(--sr-slow) var(--sr-ease),
transform var(--sr-slow) var(--sr-ease),
visibility 0s linear var(--sr-slow);
}
html.sr-trip-collapsed:not(.sr-phone) #sr-side {
transform: translateX(-110%);
}
@media (min-width: 900px) {
html.sr-trip-collapsed {
--sr-scene-left: 0px;
}
}
html.sr-phone .sr-trip__top {
top: calc(var(--sp-2) + env(safe-area-inset-top, 0px));
right: var(--sp-4);
left: var(--sp-4);
max-width: none;
padding-left: var(--sp-4);
border-radius: var(--sr-radius-shell);
transform: none;
}
html.sr-phone .sr-trip__toolbar {
right: 0;
bottom: 0;
left: 0;
gap: 0;
justify-content: space-between;
height: calc(var(--sr-trip-bar-phone) + env(safe-area-inset-bottom, 0px));
padding: 0 var(--sp-2) env(safe-area-inset-bottom, 0px);
background: var(--sr-glass-strong);
border-width: 1px 0 0;
border-top-color: var(--sr-line);
border-radius: 0;
box-shadow: none;
transform: none;
}
html.sr-phone .sr-trip__tb {
width: 44px;
height: 44px;
}
@media (pointer: coarse) {
.sr-trip__tb {
width: 44px;
height: 44px;
}
.sr-trip__leave {
height: 44px;
}
.sr-trip__home {
width: 44px;
height: 44px;
}
}
html.sr-phone .sr-trip__leave {
height: 44px;
}
html.sr-phone .sr-trip__sep {
display: none;
}
html.sr-phone .sr-trip__progress {
min-width: 48px;
padding: 0;
}
@media (max-width: 459px) {
html.sr-phone .sr-trip__tb--replay {
display: none;
}
}
@media (max-width: 415px) {
html.sr-phone .sr-trip__tb--share {
display: none;
}
}
@media (max-width: 371px) {
html.sr-phone:not(.sr-present) .sr-trip__tb--present {
display: none;
}
}
@media (max-width: 327px) {
html.sr-phone .sr-trip__tb--voice {
display: none;
}
}
@media (max-width: 415px) {
html.sr-phone.sr-present .sr-trip__tb--full {
display: none;
}
}
@media (max-width: 371px) {
html.sr-phone.sr-present .sr-trip__tb--auto {
display: none;
}
}
html.sr-phone.sr-trip-collapsed .sr-trip__toolbar {
border-top-color: var(--sr-edge-lit);
border-radius: var(--sr-radius-shell) var(--sr-radius-shell) 0 0;
box-shadow: var(--sr-edge-glow), var(--sr-shadow);
}
.sr-tripsheet.is-floating {
position: fixed;
right: 0;
bottom: 0;
left: 0;
max-height: 64vh;
min-height: 0;
padding: var(--sp-2) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
overscroll-behavior: contain;
background: var(--sr-glass-strong);
border-width: 1px 0 0;
border-radius: var(--sr-radius-shell) var(--sr-radius-shell) 0 0;
}
html[data-trip-phase] .sr-tripsheet.is-floating {
bottom: calc(var(--sr-trip-bar-phone) + env(safe-area-inset-bottom, 0px));
max-height: 40vh;
padding-bottom: var(--sp-3);
}
html[data-trip-returning] .sr-tripsheet.is-present {
opacity: 0;
pointer-events: none;
transition: opacity var(--sr-slow) var(--sr-ease);
}
html[data-trip-phase='intro'] .sr-tripsheet.is-floating,
html[data-trip-phase='outro'] .sr-tripsheet.is-floating {
bottom: 0;
max-height: 64vh;
padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
}
html.sr-trip-collapsed .sr-tripsheet.is-floating {
display: none;
}
.sr-tripsheet.is-floating .sr-tripsheet__panel {
padding: 0;
}
.sr-tripsheet.is-floating .sr-card.is-docked {
padding: 0;
}
.sr-tripsheet.is-floating .sr-tripsheet__name,
.sr-tripsheet.is-floating .sr-card__name {
font-size: var(--sr-fs-name-sm);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html.sr-phone .sr-trip__toolbar,
.sr-tripsheet.is-floating {
background: var(--sr-glass-solid);
}
}
@media (prefers-reduced-transparency: reduce) {
html.sr-phone .sr-trip__toolbar,
.sr-tripsheet.is-floating {
background: var(--sr-glass-solid);
}
}
html.sr-ambient {
--sr-scene-left: 0px;
}
html.sr-ambient :is(#sr-side, #sr-rail, #sr-time, .sr-top, .sr-toast, .sr-scenenote, .sr-keyhint) {
display: none;
}
html.sr-imagine-on :is(#sr-side, #sr-rail, #sr-time, .sr-top, .sr-toast, .sr-scenenote, .sr-keyhint, #labels, #sr-hud, .sr-card) {
display: none;
}
html.sr-trip-mode .sr-toast {
top: auto;
bottom: calc(var(--sp-5) + var(--sr-trip-bar) + var(--sp-3));
left: calc(50% + var(--sr-scene-left) / 2);
}
html.sr-trip-mode.sr-phone .sr-toast,
html.sr-trip-mode.sr-phone.sr-card-open .sr-toast,
html.sr-trip-mode.sr-phone[data-sheet='full'] .sr-toast {
top: calc(var(--sp-2) + 52px + var(--sp-3) + env(safe-area-inset-top, 0px));
bottom: auto;
left: 50%;
}
@media (prefers-reduced-motion: reduce) {
html.sr-trip-mode #sr-side,
html.sr-trip-mode #sr-rail,
html.sr-trip-mode #sr-time,
html.sr-trip-mode #labels,
html.sr-trip-collapsed #sr-side,
.sr-trip__toolbar.sr-float,
.sr-trip__top.sr-float,
.sr-trip__tb,
.sr-trip__leave,
.sr-tripsheet__start,
.sr-tripsheet__sound,
.sr-tripsheet__quiet,
.sr-tripsheet__stop {
transition: opacity 120ms linear;
}
html.sr-trip-collapsed:not(.sr-phone) #sr-side,
html.sr-phone.sr-trip-collapsed #sr-side {
transform: none;
}
html.sr-trip-mode #sr-card .sr-card__body,
html.sr-trip-mode #sr-card .sr-card__foot {
animation: sr-trip-fade 120ms linear both;
}
.sr-trip__chapter.is-new {
animation: none;
}
}
.sr-card__note {
margin: 0 0 var(--sp-2);
font-size: var(--sr-fs-sm);
line-height: 1.45;
color: var(--sr-text-dim);
}
.sr-pick {
position: fixed;
z-index: var(--sr-z-pop);
min-width: 220px;
max-width: min(320px, calc(100vw - 16px));
margin: 0;
padding: var(--sp-2);
list-style: none;
background: var(--sr-wash);
border: 1px solid var(--sr-line-strong);
border-radius: var(--sr-radius-sm);
box-shadow: var(--sr-shadow);
}
.sr-pick[hidden] { display: none; }
.sr-pick__btn {
appearance: none;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 36px;
padding: 0 8px;
font: inherit;
color: var(--sr-text);
text-align: left;
background: transparent;
border: 0;
border-radius: var(--sr-radius-sm);
cursor: pointer;
}
.sr-pick__btn:hover,
.sr-pick__btn:focus-visible { background: var(--sr-wash); }
.sr-pick__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-pick__where { flex: 0 0 auto; font-size: var(--sr-fs-sm); color: var(--sr-text-dim); }
.sr-pick__hint {
padding: var(--sp-2) var(--sp-2) 2px;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
}
.sr-next__row[data-kind='shower'],
.sr-next__row[data-kind='solar-eclipse'],
.sr-next__row[data-kind='lunar-eclipse'],
.sr-next__row[data-kind='season'] { cursor: default; }
.sr-colourkey__select {
width: 100%;
min-height: 36px;
margin: 0 0 8px;
padding: 0 8px;
font: inherit;
color: var(--sr-text);
background: var(--sr-wash);
border: 1px solid var(--sr-line-strong);
border-radius: var(--sr-radius-sm);
}
.sr-colourkey__legend { margin: 0; padding: 0; list-style: none; }
.sr-colourkey__row { display: flex; align-items: center; gap: 8px; padding: var(--sp-1) 0; font-size: var(--sr-fs-sm); }
.sr-colourkey__label { flex: 1 1 auto; color: var(--sr-text-dim); }
.sr-colourkey__count { flex: 0 0 auto; }
.sr-colourkey__scope { margin: var(--sp-2) 0 0; font-size: var(--sr-fs-sm); line-height: 1.4; color: var(--sr-text-dim); }
.sr-colourkey__scope { margin: var(--sp-2) 0 0; font-size: var(--sr-fs-sm); line-height: 1.4; color: var(--sr-text-dim); }
.sr-traj { display: block; width: 100%; height: auto; margin: var(--sp-1) 0 var(--sp-2); }
.sr-traj__axis, .sr-traj__equator { stroke: var(--sr-line); stroke-width: 1; }
.sr-traj__map { fill: var(--sr-wash); stroke: var(--sr-line); stroke-width: 1; }
.sr-traj__line { fill: none; stroke: var(--sr-satellite); stroke-width: 1.5; }
.sr-traj__now { fill: var(--sr-ember); }
.sr-traj__label { fill: var(--sr-text-dim); font-size: var(--sr-fs-unit); font-family: inherit; }
.sr-status__weather { margin: 0 0 var(--sp-2); font-size: var(--sr-fs-sm); line-height: 1.45; color: var(--sr-text); }
.sr-scenenote {
position: fixed;
top: calc(var(--sr-inset, 20px) + env(safe-area-inset-top, 0px));
left: calc(50% + var(--sr-scene-left, 0px) / 2);
z-index: var(--sr-z-controls);
display: flex;
gap: var(--sp-3);
align-items: center;
width: max-content;
max-width: min(520px, calc(100vw - var(--sr-scene-left, 0px) - 2 * var(--sp-4) - 96px));
min-height: 44px;
padding: 0 var(--sp-1) 0 var(--sp-4);
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text);
background: var(--sr-glass-strong);
transform: translateX(-50%);
}
.sr-scenenote[hidden] { display: none; }
.sr-scenenote__text {
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: var(--sp-2) 0;
}
.sr-scenenote__why,
.sr-scenenote__close {
flex: 0 0 auto;
min-height: 32px;
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
background: transparent;
border: 0;
border-radius: var(--sr-radius);
cursor: pointer;
transition: color var(--sr-fast) var(--sr-ease), background-color var(--sr-fast) var(--sr-ease);
}
.sr-scenenote__why {
padding: 0 var(--sp-1);
color: var(--sr-ember);
}
.sr-scenenote__why[hidden] { display: none; }
.sr-scenenote__close {
width: 32px;
padding: 0;
font-size: var(--sr-fs-glyph);
color: var(--sr-text-soft);
}
@media (hover: hover) {
.sr-scenenote__why:hover { color: var(--sr-ember-light); }
.sr-scenenote__close:hover { color: var(--sr-text); background-color: var(--sr-wash-hover); }
}
@media (pointer: coarse) {
.sr-scenenote__why,
.sr-scenenote__close { min-height: 44px; }
.sr-scenenote__close { width: 44px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.sr-scenenote { background: var(--sr-glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
.sr-scenenote { background: var(--sr-glass-solid); }
}
html.sr-trip-mode .sr-scenenote { display: none; }
.sr-toast {
position: fixed;
bottom: calc(var(--sp-5) + var(--sr-time-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
left: calc(50% + var(--sr-scene-left, 0px) / 2);
transform: translateX(-50%);
z-index: var(--sr-z-toast);
width: max-content;
max-width: min(520px, calc(100vw - var(--sr-scene-left, 0px) - 32px));
padding: 10px 16px;
background: var(--sr-panel-solid);
border: 1px solid var(--sr-line-strong);
border-radius: var(--sr-radius-pill);
color: var(--sr-text);
font-size: var(--sr-fs-sm);
line-height: 1.35;
overflow-wrap: anywhere;
user-select: text;
}
.sr-toast[hidden] { display: none; }
.sr-toast__action {
margin-left: var(--sp-3);
padding: var(--sp-1) var(--sp-2);
min-height: 24px;
background: none;
border: 0;
border-radius: var(--sr-radius-sm);
color: var(--sr-text);
font: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
cursor: pointer;
}
.sr-toast__action:hover { color: var(--sr-text-soft); }
.sr-toast__action:active { color: var(--sr-text-dim); }
@media (pointer: coarse) {
.sr-toast__action { min-height: 44px; min-width: 44px; }
}
.sr-sound__note {
margin: 0 0 8px;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
}
.sr-density__choices {
display: flex;
gap: var(--sp-2);
}
.sr-density__btn {
appearance: none;
flex: 1 1 0;
min-height: 36px;
padding: 0 var(--sp-2);
font: inherit;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
background: transparent;
border: 1px solid var(--sr-line);
border-radius: var(--sr-radius-sm);
cursor: pointer;
}
.sr-density__btn[aria-pressed='true'] {
color: var(--sr-text);
border-color: var(--sr-line-strong);
}
.sr-density__note {
margin: var(--sp-2) 0 0;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
}
.sr-card__exposure .sr-exposure {
margin: var(--sp-4) 0 var(--sp-3);
}
.sr-card__exposure .sr-panel__title {
margin: 0 0 var(--sp-2);
}
.sr-card__photo-credit a {
color: var(--sr-text-soft);
text-decoration: underline;
}
@media (pointer: coarse) {
.sr-exposure .sr-density__btn {
min-height: 44px;
}
}
.sr-sound__btn.is-on {
color: var(--sr-ember);
border-color: var(--sr-ember);
}
html.sr-phone .sr-sound__btn {
min-height: 44px;
}
.sr-hud {
position: fixed;
inset: 0;
z-index: var(--sr-z-hud);
pointer-events: none;
overflow: hidden;
}
.sr-hud .is-off {
display: none;
}
.sr-reticle,
.sr-tick,
.sr-tag,
.sr-chevron {
position: absolute;
left: 0;
top: 0;
will-change: transform;
}
.sr-reticle__box {
position: relative;
width: 28px;
height: 28px;
--sr-bracket-out: 0px;
transform-origin: 50% 50%;
}
.sr-reticle__box.is-acquiring {
animation: sr-acquire var(--sr-mid) var(--sr-ease) both;
}
.sr-reticle__box.is-acquiring-reduced {
animation: sr-acquire-fade 120ms linear both;
}
@keyframes sr-acquire {
from {
opacity: 0;
transform: scale(1.6);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes sr-acquire-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.sr-reticle__box.is-acquiring {
animation: sr-acquire-fade 120ms linear both;
}
}
.sr-reticle.is-occluded {
opacity: 0.5;
}
.sr-reticle.is-occluded .sr-reticle__box::before,
.sr-reticle.is-occluded .sr-reticle__box::after {
background:
repeating-linear-gradient(90deg, var(--sr-ember) 0 3px, transparent 3px 5px) top left / var(--sr-bracket) var(--sr-bracket-w) no-repeat,
repeating-linear-gradient(180deg, var(--sr-ember) 0 3px, transparent 3px 5px) top left / var(--sr-bracket-w) var(--sr-bracket) no-repeat,
repeating-linear-gradient(270deg, var(--sr-ember) 0 3px, transparent 3px 5px) top right / var(--sr-bracket) var(--sr-bracket-w) no-repeat,
repeating-linear-gradient(180deg, var(--sr-ember) 0 3px, transparent 3px 5px) top right / var(--sr-bracket-w) var(--sr-bracket) no-repeat;
}
.sr-tick {
width: 20px;
height: 1.5px;
margin-top: -0.75px;
background: var(--sr-ember);
opacity: 0.6;
transform-origin: 0 50%;
}
.sr-tag {
padding: 4px 8px 5px;
background: var(--sr-glass-thin);
border-radius: var(--sr-radius-sm);
color: var(--sr-text);
font-family: var(--sr-font);
white-space: nowrap;
}
.sr-tag.is-over-world {
background: var(--sr-glass);
}
.sr-tag__leader {
position: absolute;
width: 34px;
height: 1px;
background: var(--sr-ember);
opacity: 0.6;
transform-origin: 0 50%;
}
.sr-tag[data-side='right'][data-vert='up'] .sr-tag__leader { left: 0; top: 100%; transform: rotate(135deg); }
.sr-tag[data-side='right'][data-vert='down'] .sr-tag__leader { left: 0; top: 0; transform: rotate(-135deg); }
.sr-tag[data-side='left'][data-vert='up'] .sr-tag__leader { left: 100%; top: 100%; transform: rotate(45deg); }
.sr-tag[data-side='left'][data-vert='down'] .sr-tag__leader { left: 100%; top: 0; transform: rotate(-45deg); }
.sr-tag[data-side='centre'] .sr-tag__leader { width: 24px; left: 50%; }
.sr-tag[data-side='centre'][data-vert='up'] .sr-tag__leader { top: 100%; transform: rotate(90deg); }
.sr-tag[data-side='centre'][data-vert='down'] .sr-tag__leader { top: 0; transform: rotate(-90deg); }
.sr-tag__name {
display: flex;
align-items: center;
gap: 6px;
font: 600 var(--sr-fs-body)/1.3 var(--sr-font-hud);
}
.sr-tag__name .sr-glyph {
width: 9px;
height: 9px;
box-shadow: none;
}
.sr-tag__readouts {
font: 400 var(--sr-fs-sm)/1.4 var(--sr-font-mono);
font-variant-numeric: tabular-nums;
}
.sr-tag__readout + .sr-tag__readout::before,
.sr-tag__behind::before {
content: '\00B7';
margin: 0 6px;
color: var(--sr-text-dim);
}
.sr-tag__unit {
margin-left: 4px;
font-family: var(--sr-font);
font-size: var(--sr-fs-unit);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--sr-text-dim);
}
.sr-tag__suffix {
margin-left: 4px;
font-family: var(--sr-font);
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
}
.sr-tag__suffix:empty {
display: none;
}
.sr-tag__behind {
font-family: var(--sr-font);
color: var(--sr-text);
}
.sr-tag__honesty {
font-size: var(--sr-fs-sm);
line-height: 1.35;
color: var(--sr-text-dim);
}
.sr-tag__honesty::first-letter {
text-transform: uppercase;
}
.sr-chevron {
display: flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 3px 10px 3px 6px;
pointer-events: auto;
background: var(--sr-glass);
border: 1px solid var(--sr-line);
border-radius: var(--sr-radius-pill);
color: var(--sr-text);
font: 400 var(--sr-fs-sm)/1 var(--sr-font-mono);
white-space: nowrap;
cursor: pointer;
}
.sr-chevron:hover {
border-color: var(--sr-ember);
}
.sr-chevron__arrow {
flex: 0 0 auto;
color: var(--sr-ember);
}
.sr-chevron__name {
display: none;
font-family: var(--sr-font);
}
.sr-chevron:hover .sr-chevron__name,
.sr-chevron:focus-visible .sr-chevron__name {
display: inline;
}
html.sr-phone .sr-chevron {
min-height: 44px;
}
:root {
--sr-side-w: 360px;
--sr-inset: 20px;
--sr-radius-shell: 16px;
--sr-ember-light: #ffc28a;
--sr-scene-left: 0px;
--sr-wash: rgba(232, 236, 242, 0.07);
--sr-wash-strong: rgba(232, 236, 242, 0.14);
--sr-wash-hover: rgba(232, 236, 242, 0.1);
--sr-text-soft: rgba(232, 236, 242, 0.76);
--sr-glass-strong: rgba(11, 14, 20, 0.9);
--sr-sunlit: #ffe2a8;
--sr-shadowed: #243041;
}
@media (min-width: 900px) {
:root { --sr-scene-left: calc(var(--sr-inset) + var(--sr-side-w)); }
html.sr-side-collapsed { --sr-scene-left: 0px; }
}
.sr-shell {
font-family: var(--sr-font);
color: var(--sr-text);
}
.sr-micro {
margin: 0;
padding: 0;
font: 600 var(--sr-fs-sm)/1.2 var(--sr-font-hud);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sr-text-dim);
}
.sr-side {
position: fixed;
top: var(--sr-inset);
bottom: var(--sr-inset);
left: var(--sr-inset);
z-index: var(--sr-z-controls);
display: flex;
flex-direction: column;
width: var(--sr-side-w);
box-sizing: border-box;
overflow: hidden;
border-radius: var(--sr-radius-shell);
font-size: var(--sr-fs-label);
line-height: 1.45;
}
.sr-side *,
.sr-pop *,
.sr-rail *,
.sr-time * {
box-sizing: border-box;
}
.sr-side__view {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
.sr-side__view[hidden] {
display: none;
}
.sr-side__view.is-current {
animation: sr-view-in var(--sr-mid) var(--sr-ease) both;
}
.sr-side[data-dir='pop'] .sr-side__view.is-current {
animation-name: sr-view-back;
}
@keyframes sr-view-in {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: none; }
}
@keyframes sr-view-back {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: none; }
}
.sr-side__bar {
flex: 0 0 auto;
display: flex;
align-items: center;
padding: var(--sp-3) var(--sp-4) 0;
}
.sr-side__back {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
height: 36px;
padding: 0 var(--sp-3) 0 var(--sp-1);
font: inherit;
font-size: var(--sr-fs-label);
color: var(--sr-text-soft);
background: transparent;
border: 0;
border-radius: var(--sr-radius);
cursor: pointer;
transition: color var(--sr-fast) var(--sr-ease);
}
@media (hover: hover) {
.sr-side__back:hover { color: var(--sr-ember-light); }
}
.sr-side__chev {
font-size: var(--sr-fs-glyph);
line-height: 1;
transform: translateY(-1px);
}
.sr-side__cardslot,
.sr-side__sourceshost {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.sr-side__handle {
display: none;
}
.sr-side.is-collapsed {
bottom: auto;
width: 64px;
height: 48px;
border-radius: var(--sr-radius-shell);
}
.sr-side.is-collapsed .sr-side__view {
display: none;
}
.sr-side.is-collapsed .sr-side__handle {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
height: 100%;
padding: 0;
font: 600 var(--sr-fs-name-sm)/1 var(--sr-font-hud);
color: var(--sr-text);
background: transparent;
border: 0;
cursor: pointer;
}
.sr-side.is-collapsed .sr-side__handle .sr-side__chev {
font-family: var(--sr-font);
font-weight: 400;
color: var(--sr-text-dim);
}
.sr-side__handle:hover .sr-side__chev { color: var(--sr-ember); }
.sr-explore {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
.sr-explore__head {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: var(--sp-3);
padding: 20px 20px var(--sp-3);
}
.sr-explore__brand {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.sr-wordmark {
margin: 0;
font: 600 var(--sr-fs-mark)/1 var(--sr-font-hud);
letter-spacing: 0;
color: var(--sr-text);
}
.sr-explore__collapse {
width: 36px;
height: 36px;
margin: -6px -8px 0 0;
padding: 0;
font: 400 var(--sr-fs-glyph)/1 var(--sr-font);
color: var(--sr-text-soft);
background: transparent;
border: 0;
border-radius: var(--sr-radius);
cursor: pointer;
transition: color var(--sr-fast) var(--sr-ease), background var(--sr-fast) var(--sr-ease);
}
.sr-explore__collapse:hover {
color: var(--sr-text);
background: var(--sr-wash);
}
.sr-explore__search .sr-search {
margin: 0;
}
.sr-explore__search .sr-panel__title,
.sr-explore__search .sr-search__fly {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.sr-explore__search .sr-search__row {
display: flex;
align-items: center;
gap: var(--sp-2);
height: 44px;
padding: 0 var(--sp-3);
background: var(--sr-wash);
border: 1px solid transparent;
border-radius: var(--sr-radius);
color: var(--sr-text-soft);
transition: border-color var(--sr-fast) var(--sr-ease), background var(--sr-fast) var(--sr-ease);
}
.sr-explore__search .sr-search__row:focus-within {
border-color: var(--sr-line-strong);
background: var(--sr-wash-hover);
}
.sr-explore__search .sr-search__row svg {
flex: 0 0 auto;
}
.sr-explore__search .sr-search__input {
flex: 1 1 auto;
min-width: 0;
height: 100%;
padding: 0;
font: inherit;
font-size: var(--sr-fs-body);
color: var(--sr-text);
background: transparent;
border: 0;
outline: 0;
box-shadow: none;
}
.sr-explore__search .sr-search__input::placeholder {
color: var(--sr-text-soft);
}
.sr-explore__search .sr-search__note {
display: none;
}
html:not(.sr-phone) .sr-explore.is-searching .sr-tabs {
display: none;
}
.sr-explore.is-searching .sr-search__note,
.sr-explore.is-searching .sr-search__note.is-warning {
display: block;
margin: var(--sp-3) 0 0;
padding: var(--sp-3) 0 0;
overflow: hidden;
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text-dim);
text-overflow: ellipsis;
white-space: nowrap;
border: 0;
border-top: 1px solid var(--sr-line);
}
.sr-search__key {
display: none;
}
@media (hover: hover) and (pointer: fine) {
html:not(.sr-phone) .sr-explore__search .sr-search__key {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 24px;
height: 24px;
font: 500 var(--sr-fs-sm)/1 var(--sr-font-mono);
color: var(--sr-text-soft);
background: var(--sr-wash);
border: 1px solid var(--sr-line);
border-top-color: var(--sr-edge-lit);
border-bottom-color: var(--sr-line-strong);
border-radius: var(--sr-radius-sm);
}
html:not(.sr-phone) .sr-explore__search .sr-search__row:focus-within .sr-search__key,
html:not(.sr-phone) .sr-explore__search.is-searching .sr-search__key {
display: none;
}
}
.sr-search__empty {
padding: var(--sp-3) 0 0;
}
.sr-search__empty[hidden],
.sr-search__emptyhint[hidden] {
display: none;
}
.sr-search__emptyline {
margin: 0;
overflow: hidden;
font: 400 var(--sr-fs-body)/20px var(--sr-font);
color: var(--sr-text);
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-search__emptyhint {
margin: var(--sp-5) 0 var(--sp-1);
font: 600 var(--sr-fs-sm)/16px var(--sr-font-hud);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sr-text-dim);
}
html.sr-phone .sr-top .sr-search__empty {
padding: var(--sp-2) 0;
}
html.sr-phone .sr-top .sr-search__emptyhint {
margin-top: var(--sp-4);
}
.sr-explore__search .sr-search__pop {
position: static;
margin-top: 8px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
max-height: none;
}
html:not(.sr-phone) .sr-explore.is-searching .sr-explore__body {
display: none;
}
.sr-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
padding: 3px;
background: var(--sr-wash);
border-radius: var(--sr-radius);
}
.sr-tabs__tab {
height: 34px;
padding: 0;
font: inherit;
font-size: var(--sr-fs-sm);
color: var(--sr-text-soft);
background: transparent;
border: 0;
border-radius: var(--sr-radius-sm);
cursor: pointer;
transition: color var(--sr-fast) var(--sr-ease), background var(--sr-fast) var(--sr-ease);
}
.sr-tabs__tab:hover { color: var(--sr-text); }
.sr-tabs__tab.is-on {
color: var(--sr-text);
background: var(--sr-wash-strong);
}
.sr-explore__body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding-bottom: 12px;
}
.sr-pane[hidden] { display: none; }
.sr-sect {
padding: var(--sp-2) 20px var(--sp-2);
}
.sr-sect[hidden] { display: none; }
.sr-sect > .sr-micro {
padding: var(--sp-2) 0 var(--sp-1);
}
.sr-sect__note {
margin: 8px 0 0;
font-size: var(--sr-fs-sm);
line-height: 18px;
color: var(--sr-text-dim);
}
.sr-trips2__off {
overflow: hidden;
margin: var(--sp-2) 0 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-trips2__off[hidden] { display: none; }
.sr-now__list {
margin: 0;
padding: 0;
list-style: none;
}
.sr-now__row + .sr-now__row .sr-now__btn {
border-top: 1px solid var(--sr-line);
}
.sr-now__btn {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 12px 0;
font: inherit;
font-size: var(--sr-fs-body);
line-height: 1.35;
text-align: left;
color: var(--sr-text);
background: transparent;
border: 0;
cursor: pointer;
transition: color var(--sr-fast) var(--sr-ease);
}
.sr-now__btn:hover .sr-now__text { color: var(--sr-ember-light); }
.sr-now__row.is-lead .sr-now__btn {
padding-top: var(--sp-1);
font-size: var(--sr-fs-lead);
line-height: 1.25;
letter-spacing: -0.01em;
}
.sr-now__value {
flex: 0 0 auto;
font: 400 var(--sr-fs-sm)/1.35 var(--sr-font-mono);
color: var(--sr-text-dim);
}
.sr-tripgrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-2);
padding-top: var(--sp-2);
}
.sr-tripcard {
--sr-trip-hue: 40, 60, 90;
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--sp-1);
height: 128px;
padding: var(--sp-3);
font: inherit;
text-align: left;
color: var(--sr-text);
background: linear-gradient(180deg, rgba(var(--sr-trip-hue), 0.5), var(--sr-glass-strong));
border: 1px solid var(--sr-line);
border-radius: var(--sr-radius);
cursor: pointer;
overflow: hidden;
transition: border-color var(--sr-fast) var(--sr-ease), transform var(--sr-fast) var(--sr-ease);
}
.sr-tripcard[data-group='solar-system'] { --sr-trip-hue: 96, 64, 30; }
.sr-tripcard[data-group='beyond'] { --sr-trip-hue: 74, 52, 100; }
.sr-tripcard[data-group='events'] { --sr-trip-hue: 36, 84, 72; }
.sr-tripcard:hover { border-color: var(--sr-line-strong); }
.sr-tripcard__pic {
position: absolute;
top: -14%;
left: 0;
z-index: 0;
width: 100%;
height: 114%;
object-fit: cover;
opacity: 0;
pointer-events: none;
transition: opacity var(--sr-slow) var(--sr-ease), transform var(--sr-mid) var(--sr-ease);
}
.sr-tripcard__pic.is-loaded { opacity: 1; }
.sr-tripcard::after {
position: absolute;
inset: 0;
z-index: 1;
content: '';
background: linear-gradient(180deg, transparent 18%, var(--sr-glass) 56%, var(--sr-glass-strong) 78%);
pointer-events: none;
}
@media (hover: hover) {
.sr-tripcard:not(.is-off):hover .sr-tripcard__pic { transform: scale(1.04); }
}
.sr-tripcard__title,
.sr-tripcard__meta {
position: relative;
z-index: 2;
}
.sr-tripcard__title {
display: -webkit-box;
overflow: hidden;
font-size: var(--sr-fs-label);
font-weight: 600;
line-height: 18px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.sr-tripcard__meta {
display: -webkit-box;
overflow: hidden;
font-size: var(--sr-fs-sm);
line-height: 18px;
color: var(--sr-text-soft);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.sr-tripcard__meta:empty { display: none; }
.sr-tripcard.is-starting {
cursor: progress;
}
.sr-tripcard.is-starting .sr-tripcard__meta {
color: var(--sr-text);
}
.sr-tripcard.is-off {
cursor: default;
background: linear-gradient(180deg, var(--sr-wash), var(--sr-glass-strong));
}
.sr-tripcard.is-off .sr-tripcard__pic { filter: grayscale(1); opacity: 0.4; }
.sr-tripcard.is-off .sr-tripcard__title { color: var(--sr-text-soft); }
@media (prefers-reduced-motion: reduce) {
.sr-tripcard__pic { transition: opacity 120ms linear; }
.sr-tripcard:hover .sr-tripcard__pic { transform: none; }
.sr-tripcard { transition: border-color 120ms linear; }
}
.sr-more {
display: inline-flex;
align-items: center;
min-height: 36px;
margin-top: 4px;
padding: 0;
font: inherit;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
background: transparent;
border: 0;
cursor: pointer;
}
.sr-more:hover { color: var(--sr-ember); }
.sr-more[hidden] { display: none; }
.sr-reels { margin-top: var(--sp-2); }
.sr-reels[hidden] { display: none; }
.sr-more + .sr-more { margin-left: var(--sp-5); }
.sr-list {
margin: 0;
padding: 0;
list-style: none;
}
.sr-list__row[hidden] { display: none; }
.sr-list__row + .sr-list__row > * {
border-top: 1px solid var(--sr-line);
}
.sr-list__btn,
.sr-list__static {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 44px;
padding: var(--sp-3) 0;
font: inherit;
font-size: var(--sr-fs-body);
line-height: 1.3;
text-align: left;
color: var(--sr-text);
background: transparent;
border: 0;
}
.sr-list__btn { cursor: pointer; }
.sr-list__btn:hover .sr-list__name { color: var(--sr-ember-light); }
.sr-list__btn:disabled { cursor: default; color: var(--sr-text-dim); }
.sr-list__value {
flex: 0 0 auto;
font: 400 var(--sr-fs-sm)/1.3 var(--sr-font-mono);
color: var(--sr-text-dim);
}
.sr-list--quiet .sr-list__static {
min-height: 0;
padding: var(--sp-2) 0;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
}
.sr-list--quiet .sr-list__row + .sr-list__row > * { border-top: 0; }
.sr-next .sr-next__list {
margin: 0;
padding: 0;
list-style: none;
}
.sr-next .sr-next__row {
border-top: 1px solid var(--sr-line);
}
.sr-next .sr-next__row:first-child { border-top: 0; }
.sr-next .sr-next__row {
display: flex;
gap: var(--sp-2);
align-items: center;
}
.sr-next .sr-next__body { flex: 1 1 auto; min-width: 0; }
.sr-next__cal {
flex: 0 0 auto;
min-width: 44px;
min-height: 44px;
padding: 0 var(--sp-1);
font: inherit;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
background: transparent;
border: 0;
cursor: pointer;
transition: color var(--sr-fast) var(--sr-ease);
}
.sr-next__cal:hover { color: var(--sr-ember); }
.sr-next .sr-next__body {
display: grid;
gap: 2px;
width: 100%;
min-height: 44px;
padding: var(--sp-3) 0;
font: inherit;
text-align: left;
color: var(--sr-text);
background: transparent;
border: 0;
}
.sr-next button.sr-next__body {
cursor: pointer;
transition: color var(--sr-fast) var(--sr-ease);
}
@media (hover: hover) {
.sr-next button.sr-next__body:hover .sr-next__title { color: var(--sr-ember-light); }
}
.sr-next .sr-next__head {
display: flex;
gap: var(--sp-3);
align-items: baseline;
justify-content: space-between;
min-width: 0;
}
.sr-next .sr-next__title,
.sr-next .sr-next__detail {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-next .sr-next__title {
font: 400 var(--sr-fs-body)/20px var(--sr-font);
}
.sr-next .sr-next__value {
flex: 0 0 auto;
font: 400 var(--sr-fs-sm)/20px var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
}
.sr-next .sr-next__detail {
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text-dim);
}
.sr-subscribe-host:empty {
display: none;
}
.sr-subscribe__chev {
display: inline-block;
flex: 0 0 auto;
font-size: var(--sr-fs-glyph);
line-height: 20px;
color: var(--sr-text-dim);
transition: transform var(--sr-fast) var(--sr-ease);
}
.sr-subscribe .sr-disc__head[aria-expanded='true'] .sr-subscribe__chev {
transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
.sr-subscribe__chev { transition: none; }
}
.sr-subscribe__form {
display: grid;
gap: var(--sp-2);
}
.sr-subscribe__form[hidden] {
display: none;
}
.sr-subscribe__email {
width: 100%;
height: 44px;
padding: 0 var(--sp-3);
font: 400 var(--sr-fs-body)/20px var(--sr-font);
color: var(--sr-text);
background: var(--sr-wash);
border: 1px solid transparent;
border-radius: var(--sr-radius);
}
.sr-subscribe__email::placeholder {
color: var(--sr-text-soft);
}
.sr-subscribe__email:focus-visible {
border-color: var(--sr-line-strong);
outline: 2px solid var(--sr-ember);
outline-offset: 2px;
}
html.sr-phone .sr-subscribe__email {
font-size: var(--sr-fs-input);
}
.sr-subscribe__row {
display: flex;
gap: var(--sp-3);
align-items: center;
min-height: 44px;
font: 400 var(--sr-fs-body)/20px var(--sr-font);
color: var(--sr-text);
cursor: pointer;
}
.sr-subscribe__submit {
justify-self: start;
min-height: 44px;
}
.sr-subscribe__status {
margin: 0;
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text-dim);
}
.sr-subscribe__status[hidden] {
display: none;
}
.sr-next .sr-next__note {
margin: 0;
padding: var(--sp-3) 0;
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text-dim);
}
.sr-next .sr-next__note[hidden] { display: none; }
.sr-field {
width: 100%;
height: 44px;
padding: 0 var(--sp-3);
font: inherit;
font-size: var(--sr-fs-body);
color: var(--sr-text);
background: var(--sr-wash);
border: 1px solid transparent;
border-radius: var(--sr-radius);
outline: 0;
}
.sr-field:focus { border-color: var(--sr-ember); }
html.sr-phone .sr-field { font-size: var(--sr-fs-input); }
@media (pointer: coarse) { .sr-field { font-size: var(--sr-fs-input); } }
.sr-field::placeholder { color: var(--sr-text-soft); }
.sr-place__row {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.sr-place__input {
flex: 1 1 0;
width: auto;
min-width: 0;
}
.sr-place__mine {
flex: 0 0 auto;
height: 44px;
padding: 0 var(--sp-3);
font: inherit;
font-size: var(--sr-fs-sm);
color: var(--sr-text);
white-space: nowrap;
background: var(--sr-wash);
border: 1px solid transparent;
border-radius: var(--sr-radius);
cursor: pointer;
transition: background-color var(--sr-fast) var(--sr-ease);
}
.sr-place__mine:active:not(:disabled) {
background: var(--sr-wash-strong);
}
.sr-place__mine:disabled {
opacity: 0.4;
cursor: not-allowed;
}
@media (hover: hover) {
.sr-place__mine:hover:not(:disabled) { background: var(--sr-wash-hover); }
}
@media (prefers-reduced-motion: reduce) {
.sr-place__mine { transition: none; }
}
.sr-place__chips {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-top: var(--sp-2);
}
.sr-chip {
height: 36px;
padding: 0 var(--sp-3);
font: inherit;
font-size: var(--sr-fs-sm);
color: var(--sr-text);
background: var(--sr-wash);
border: 1px solid transparent;
border-radius: var(--sr-radius-pill);
cursor: pointer;
}
.sr-chip:hover:not(:disabled) { border-color: var(--sr-line-strong); }
.sr-chip:disabled { color: var(--sr-text-dim); cursor: not-allowed; }
.sr-chip--quiet { background: transparent; color: var(--sr-text-dim); }
.sr-place__note {
margin: var(--sp-2) 0 0;
font-size: var(--sr-fs-sm);
line-height: 1.4;
color: var(--sr-text-dim);
}
.sr-place__note.is-warning { color: var(--sr-stale); }
.sr-place[hidden], .sr-place__note[hidden], .sr-place__chips[hidden], .sr-place__chips > [hidden] { display: none; }
.sr-tonight-view__where {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.sr-tonight-view__where > .sr-tonight-view__place { flex: 1 1 auto; min-width: 0; overflow: visible; white-space: normal; }
.sr-tonight-view__change { flex: none; }
.sr-statusline {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 44px;
padding: 12px 20px;
font: inherit;
font-size: var(--sr-fs-sm);
line-height: 1.3;
text-align: left;
color: var(--sr-text-dim);
background: transparent;
border: 0;
border-top: 1px solid var(--sr-line);
cursor: pointer;
transition: color var(--sr-fast) var(--sr-ease);
}
.sr-statusline:hover { color: var(--sr-text); }
.sr-statusline__dot {
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--sr-unread);
}
.sr-statusline[data-state='ok'] .sr-statusline__dot { background: var(--sr-ok); }
.sr-statusline[data-state='stale'] .sr-statusline__dot { background: var(--sr-stale); }
.sr-statusline[data-state='failed'] .sr-statusline__dot { background: var(--sr-ember); }
.sr-side__card {
position: relative;
}
.sr-card.is-docked {
position: static;
inset: auto;
z-index: auto;
width: auto;
min-height: 100%;
max-height: none;
padding: var(--sp-1) var(--sr-inset) var(--sr-inset);
overflow: visible;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
transform: none;
}
.sr-card.is-docked .sr-card__header {
grid-template-columns: minmax(0, 1fr);
padding-top: var(--sp-1);
}
.sr-card.is-docked .sr-card__close {
position: absolute;
top: var(--sp-2);
right: var(--sp-2);
margin: 0;
}
.sr-card.is-docked .sr-card__name {
font-size: var(--sr-fs-name);
}
.sr-card.is-docked .sr-hero__num {
font-size: var(--sr-fs-num);
}
.sr-card.is-docked .sr-hero__num[data-long='1'] {
font-size: var(--sr-fs-num-sm);
}
.sr-card.is-docked .sr-hero__num[data-long='2'] {
font-size: var(--sr-fs-body);
line-height: 26px;
}
.sr-card.is-docked .sr-act {
height: 56px;
}
.sr-side .sr-status {
padding: var(--sp-2) 20px 20px;
overflow: visible;
}
.sr-side .sr-status__title:focus {
outline: none;
}
.sr-side .sr-status__title {
margin: 0 0 8px;
font: 600 var(--sr-fs-mark)/1.1 var(--sr-font-hud);
letter-spacing: 0.01em;
color: var(--sr-text);
}
.sr-status__foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 20px;
padding-top: 12px;
border-top: 1px solid var(--sr-line);
}
.sr-status__foot-credit {
margin: 0;
font-size: var(--sr-fs-sm);
line-height: 1.5;
color: var(--sr-text-dim);
}
.sr-status__foot-credit a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.sr-status__foot-credit a:hover { color: var(--sr-text); }
.sr-mark.sr-mark--foot {
position: static;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
width: auto;
height: 44px;
padding: 0 4px;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
text-decoration: none;
border-radius: var(--sr-radius-sm);
}
.sr-mark--foot:hover { color: var(--sr-text); }
.sr-status__press { margin-left: auto; }
.sr-sitefoot--shown { margin-top: var(--sp-2); }
.sr-sitefoot--shown ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); margin: 0; padding: 0; list-style: none; }
.sr-sitefoot--shown a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 4px;
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
text-decoration: none;
}
.sr-sitefoot--shown a:hover { color: var(--sr-text); }
@media (pointer: coarse) { .sr-status__press, .sr-status__built { min-height: 44px; } }
.sr-rail {
position: fixed;
top: var(--sr-inset);
right: var(--sr-inset);
z-index: var(--sr-z-rail);
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--sr-radius-shell);
}
.sr-rail__btn {
display: grid;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
color: var(--sr-text);
background: transparent;
border: 0;
cursor: pointer;
transition: color var(--sr-fast) var(--sr-ease), background var(--sr-fast) var(--sr-ease);
-webkit-tap-highlight-color: transparent;
}
.sr-rail__btn + .sr-rail__btn { border-top: 1px solid var(--sr-line); }
.sr-rail__btn:hover { background: var(--sr-wash); }
.sr-rail__btn[aria-expanded='true'],
.sr-rail__btn[aria-pressed='true'] {
color: var(--sr-ember);
}
.sr-rail__btn:focus-visible { --sr-bracket-out: -4px; }
.sr-pop {
position: fixed;
top: var(--sr-inset);
right: calc(var(--sr-inset) + 48px + 12px);
z-index: var(--sr-z-pop);
width: 340px;
max-height: calc(100vh - 2 * var(--sr-inset));
overflow-y: auto;
overscroll-behavior: contain;
padding: 20px;
border-radius: var(--sr-radius-shell);
font-size: var(--sr-fs-label);
line-height: 1.45;
color: var(--sr-text);
}
.sr-pop[hidden] { display: none; }
.sr-show__list {
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.sr-show__filter {
box-sizing: border-box;
width: 100%;
height: 36px;
margin: var(--sp-2) 0 2px;
padding: 0 12px;
font: inherit;
font-size: var(--sr-fs-label);
color: var(--sr-text);
background: var(--sr-wash);
border: 1px solid var(--sr-line);
border-radius: var(--sr-radius);
}
.sr-show__filter::placeholder { color: var(--sr-text-dim); }
.sr-show__filter:focus-visible { outline: none; border-color: var(--sr-ember); }
.sr-show__group + .sr-show__group { border-top: 1px solid var(--sr-line); }
.sr-show__group[hidden] { display: none; }
.sr-show__head {
display: grid;
grid-template-columns: 16px 1fr auto;
align-items: center;
gap: 8px;
width: 100%;
position: relative;
min-height: 44px;
padding: 0;
font: inherit;
color: var(--sr-text);
text-align: left;
background: none;
border: 0;
cursor: pointer;
}
.sr-show__head:hover .sr-show__gname { color: var(--sr-text); }
.sr-show__chev {
width: 6px;
height: 6px;
margin-left: 4px;
border-right: 1.5px solid var(--sr-text-dim);
border-bottom: 1.5px solid var(--sr-text-dim);
transform: rotate(-45deg);
transition: transform var(--sr-fast) var(--sr-ease);
}
.sr-show__group.is-open .sr-show__chev { transform: rotate(45deg); }
.sr-show__tally {
font: 400 var(--sr-fs-sm)/1.3 var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
}
.sr-show__gbody[hidden],
.sr-show__bulk[hidden],
.sr-show__row[hidden],
.sr-show__nomatch[hidden] { display: none; }
.sr-show__gbody { padding: 0 0 8px; }
.sr-show__bulk {
display: flex;
justify-content: flex-end;
gap: 4px;
margin-top: -4px;
}
.sr-show__bulkbtn {
position: relative;
min-width: 44px;
height: 28px;
padding: 0 var(--sp-2);
font: inherit;
font-size: var(--sr-fs-sm);
color: var(--sr-text-soft);
background: none;
border: 1px solid var(--sr-line);
border-radius: var(--sr-radius-pill);
cursor: pointer;
}
.sr-show__bulkbtn:hover { color: var(--sr-text); background: var(--sr-wash-hover); }
.sr-show__bulkbtn:active { background: var(--sr-wash-strong); }
.sr-show__rows {
margin: 0;
padding: 0;
list-style: none;
}
.sr-show__keys {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 44px;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
font: inherit;
font-size: var(--sr-fs-label);
color: var(--sr-text);
text-align: left;
background: none;
border: 0;
border-top: 1px solid var(--sr-line);
cursor: pointer;
}
.sr-show__keysgo {
width: 6px;
height: 6px;
margin-right: 4px;
border-right: 1.5px solid var(--sr-text-dim);
border-bottom: 1.5px solid var(--sr-text-dim);
transform: rotate(-45deg);
}
.sr-show__keys:hover { color: var(--sr-ember-light); }
@media (prefers-reduced-motion: reduce) {
.sr-show__chev { transition: none; }
}
@media (pointer: coarse) {
.sr-show__bulkbtn { height: 44px; }
.sr-show__filter { height: 44px; font-size: var(--sr-fs-input); }
}
.sr-show__label {
display: grid;
grid-template-columns: 18px 10px 1fr auto;
align-items: center;
gap: var(--sp-2);
min-height: 36px;
padding: 4px 0;
cursor: pointer;
}
.sr-show__label.is-split {
grid-template-columns: 18px 10px 1fr;
}
.sr-show__label.is-split .sr-show__count {
grid-column: 3;
white-space: normal;
}
.sr-show__box {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--sr-ember);
}
.sr-show__box:focus-visible {
outline: 2px solid var(--sr-ember);
outline-offset: 2px;
}
.sr-show__label:has(.sr-show__box:focus-visible) {
background: var(--sr-wash);
}
.sr-show__label .sr-swatch {
width: 10px;
height: 10px;
border-radius: 50%;
}
.sr-show__label .sr-swatch--mixed,
.sr-show__list.is-keyed .sr-swatch {
box-sizing: border-box;
border: 1.5px solid var(--sr-text-dim);
background: transparent;
}
.sr-colourkey__row .sr-swatch--none { visibility: hidden; }
.sr-glyphkey {
flex: 0 0 auto;
display: inline-block;
width: 12px;
height: 12px;
background: currentColor;
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
}
.sr-colourkey__row--sub { color: var(--sr-text-dim); }
.sr-colourkey__why { margin: 0 0 8px; font-size: var(--sr-fs-sm); line-height: 1.4; color: var(--sr-text-dim); }
.sr-colourkey__why:empty { display: none; }
.sr-show__name {
min-width: 0;
overflow: hidden;
font-size: var(--sr-fs-label);
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-show__failed {
display: flex;
gap: var(--sp-2);
align-items: baseline;
justify-content: space-between;
padding-top: var(--sp-2);
color: var(--sr-text);
border-top: 1px solid var(--sr-line);
}
.sr-show__failedwhy {
flex: 0 0 auto;
min-height: 24px;
padding: 0;
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-ember);
background: transparent;
border: 0;
cursor: pointer;
}
@media (hover: hover) {
.sr-show__failedwhy:hover { color: var(--sr-ember-light); }
}
@media (pointer: coarse) {
.sr-show__failedwhy { min-height: 44px; }
}
.sr-show__count {
font: 400 var(--sr-fs-sm)/1.3 var(--sr-font-mono);
color: var(--sr-text-dim);
white-space: nowrap;
}
.sr-show__hint {
margin: 0 0 4px 28px;
font-size: var(--sr-fs-sm);
line-height: 1.4;
color: var(--sr-text-dim);
}
.sr-show__note {
margin: 8px 0 0;
font-size: var(--sr-fs-sm);
line-height: 1.4;
color: var(--sr-text-dim);
}
.sr-show__note[hidden] { display: none; }
.sr-show__section {
margin-top: 16px;
padding-top: var(--sp-3);
border-top: 1px solid var(--sr-line);
}
.sr-show__section .sr-panel__title {
margin: 0 0 8px;
font: 600 var(--sr-fs-sm)/1.2 var(--sr-font-hud);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sr-text-dim);
}
.sr-show__setting {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.sr-show__setting > .sr-micro,
.sr-show__setting > .sr-panel__title {
margin: 0;
}
.sr-show__toggle {
height: 32px;
padding: 0 12px;
font: inherit;
font-size: var(--sr-fs-sm);
color: var(--sr-text);
background: var(--sr-wash);
border: 1px solid transparent;
border-radius: var(--sr-radius-pill);
cursor: pointer;
}
.sr-show__toggle.is-on { color: var(--sr-ember); border-color: var(--sr-ember); }
.sr-show__setting .sr-density__choices { display: flex; gap: 4px; }
.sr-show__setting .sr-density__note { flex-basis: 100%; margin: 0; font-size: var(--sr-fs-sm); color: var(--sr-text-dim); }
.sr-quality .sr-density__choices { flex-basis: 100%; }
.sr-quality .sr-density__btn { padding: 0 var(--sp-1); white-space: nowrap; }
.sr-quality__note {
margin: 0;
font: 400 var(--sr-fs-sm)/1.2 var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
}
.sr-quality__note[hidden] { display: none; }
@media (pointer: coarse) {
.sr-look .sr-density__btn { padding: 0 var(--sp-3); }
}
.sr-otherlight .sr-density__choices { flex-basis: 100%; flex-wrap: wrap; }
.sr-otherlight .sr-density__btn { flex: 1 1 40%; }
.sr-otherlight__mix {
flex-basis: 100%;
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
}
.sr-otherlight__mix[hidden], .sr-otherlight__credit[hidden] { display: none; }
.sr-otherlight__slider {
flex: 1 1 auto;
min-width: 0;
min-height: 24px;
margin: 0;
accent-color: var(--sr-text-soft);
cursor: pointer;
}
.sr-otherlight__slider:focus-visible { outline: 2px solid var(--sr-ember); outline-offset: 2px; }
.sr-otherlight__credit a { color: var(--sr-text-soft); text-decoration: underline; }
@media (pointer: coarse) {
.sr-otherlight__slider { min-height: 44px; }
}
.sr-time {
position: fixed;
bottom: 24px;
left: calc(50% + var(--sr-scene-left) / 2);
z-index: var(--sr-z-pill);
display: flex;
flex-direction: column;
gap: var(--sp-1);
width: min(560px, calc(100vw - var(--sr-scene-left) - 2 * var(--sp-5)));
padding: var(--sp-1) var(--sp-2);
font: 400 var(--sr-fs-sm)/1 var(--sr-font-mono);
color: var(--sr-text);
white-space: nowrap;
transform: translateX(-50%);
}
.sr-time.sr-float {
border-radius: var(--sr-radius-shell);
transition: left var(--sr-mid) var(--sr-ease), border-color var(--sr-fast) var(--sr-ease);
}
.sr-time__tape-row,
.sr-time__row {
display: flex;
align-items: center;
gap: var(--sp-1);
min-width: 0;
}
.sr-time__step {
flex: none;
width: 40px;
height: 40px;
padding: 0;
font: 400 var(--sr-fs-glyph)/1 var(--sr-font);
color: var(--sr-text);
background: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
}
.sr-time__step:hover { background: var(--sr-wash); }
.sr-time__read {
display: inline-flex;
flex: 1 1 auto;
align-items: center;
gap: var(--sp-2);
min-width: 0;
height: 40px;
padding: 0 var(--sp-2);
font: inherit;
color: inherit;
background: transparent;
border: 0;
border-radius: var(--sr-radius);
cursor: ew-resize;
touch-action: none;
user-select: none;
}
.sr-time__read:hover { background: var(--sr-wash); }
.sr-time__words {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
}
.sr-time__dot {
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--sr-ember);
}
.sr-time.is-away .sr-time__dot {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--sr-ember);
}
.sr-time__rate,
.sr-time__unit {
flex: none;
height: 36px;
min-width: 48px;
padding: 0 var(--sp-3);
font: inherit;
color: var(--sr-text);
background: var(--sr-wash);
border: 0;
border-radius: var(--sr-radius-pill);
cursor: pointer;
}
.sr-time__rate:hover,
.sr-time__unit:hover { background: var(--sr-wash-strong); }
.sr-time.is-away,
.sr-time.is-away:hover {
border-color: var(--sr-ember);
}
.sr-time__live {
flex: none;
height: 36px;
padding: 0 var(--sp-3);
font: 600 var(--sr-fs-sm)/1 var(--sr-font);
color: var(--sr-ink);
background: var(--sr-ember);
border: 0;
border-radius: var(--sr-radius-pill);
cursor: pointer;
}
.sr-time__live[hidden] { display: none; }
.sr-time.is-scrubbing .sr-time__read { background: var(--sr-ember-soft); }
.sr-time__tape {
position: relative;
flex: 1 1 auto;
min-width: 0;
height: 44px;
overflow: hidden;
background: var(--sr-wash);
border-radius: var(--sr-radius);
}
.sr-tape {
position: absolute;
inset: 0;
cursor: grab;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.sr-tape.is-dragging { cursor: grabbing; }
.sr-tape__slider {
position: absolute;
inset: 0;
border-radius: var(--sr-radius);
}
.sr-tape__ticks {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 8px;
background-image: linear-gradient(90deg, var(--sr-line-strong) 1px, transparent 1px);
background-repeat: repeat-x;
pointer-events: none;
}
.sr-tape__labels,
.sr-tape__marks {
position: absolute;
inset: 0;
pointer-events: none;
}
.sr-tape__label {
position: absolute;
text-transform: uppercase;
top: 0;
bottom: 0;
left: 0;
padding: var(--sp-1) 0 0 var(--sp-1);
font: 400 var(--sr-fs-sm)/1 var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
border-left: 1px solid var(--sr-line-strong);
}
.sr-tape__label.is-day { color: var(--sr-text); }
.sr-tape__label[hidden] { display: none; }
.sr-tape__rough {
position: absolute;
top: 0;
bottom: 0;
background-image: repeating-linear-gradient(135deg, var(--sr-line) 0 2px, transparent 2px 7px);
}
.sr-tape__roughword {
position: absolute;
bottom: var(--sp-2);
left: var(--sp-1);
font: 400 var(--sr-fs-sm)/1 var(--sr-font);
color: var(--sr-text-dim);
}
.sr-tape__rough:first-of-type .sr-tape__roughword { right: var(--sp-1); left: auto; }
.sr-tape__end {
position: absolute;
top: 0;
bottom: 0;
background: var(--sr-space);
}
.sr-tape__rough[hidden],
.sr-tape__end[hidden],
.sr-tape__now[hidden] { display: none; }
.sr-tape__mark {
position: absolute;
top: 0;
left: 0;
width: 28px;
height: 44px;
margin-left: -14px;
padding: 0;
background: none;
border: 0;
border-radius: var(--sr-radius-sm);
cursor: pointer;
pointer-events: auto;
}
.sr-tape__glyph {
position: absolute;
top: 21px;
left: 50%;
width: 10px;
height: 10px;
margin-left: calc(-5px + var(--sr-mark-shift, 0px));
background: var(--sr-text);
border-radius: 50%;
}
.sr-tape__mark[data-kind='launch'] .sr-tape__glyph {
background: var(--sr-launch);
border-radius: 0;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.sr-tape__mark[data-kind='approach'] .sr-tape__glyph {
background: var(--sr-asteroid);
border-radius: 0;
transform: rotate(45deg) scale(0.8);
}
.sr-tape__mark[data-kind='eclipse'] .sr-tape__glyph {
background: transparent;
box-shadow: inset 0 0 0 2px var(--sr-text);
}
.sr-tape__mark[data-kind='shower'] .sr-tape__glyph {
width: 4px;
margin-left: calc(-2px + var(--sr-mark-shift, 0px));
background: var(--sr-comet);
border-radius: var(--sr-radius-sm);
}
.sr-tape__mark[data-kind='sun'] .sr-tape__glyph {
background: var(--sr-text-dim);
border-radius: 0;
clip-path: circle(50% at 50% 100%);
}
.sr-tape__mark[data-kind='moon'] .sr-tape__glyph {
background: linear-gradient(to right, var(--sr-text-dim) 50%, transparent 50%);
box-shadow: inset 0 0 0 1px var(--sr-text-dim);
}
.sr-tape__mark:hover,
.sr-tape__mark.is-here { background: var(--sr-wash-strong); }
.sr-tape__now {
position: absolute;
top: 0;
left: 0;
height: 44px;
padding: 0 var(--sp-2) var(--sp-4) var(--sp-1);
font: 600 var(--sr-fs-sm)/1 var(--sr-font);
color: var(--sr-text);
background: none;
border: 0;
border-left: 2px solid var(--sr-text);
cursor: pointer;
}
.sr-tape__now:hover { color: var(--sr-ember-light); }
.sr-tape__cursor {
position: absolute;
top: 0;
bottom: 0;
left: 33.333%;
margin-left: -1px;
border-left: 2px solid var(--sr-ember);
pointer-events: none;
}
@media (pointer: coarse) {
.sr-tape__mark { width: 44px; margin-left: -22px; }
.sr-tape__now { min-width: 44px; }
}
html.sr-clean #sr-rail .sr-rail__btn--clean,
html.sr-clean #sr-rail .sr-rail__btn--share,
html.sr-hud #sr-rail .sr-rail__btn--clean,
html.sr-hud #sr-rail .sr-rail__btn--share {
visibility: visible !important;
pointer-events: auto !important;
opacity: 0.4;
border-top: 0;
transition: opacity var(--sr-slow) var(--sr-ease);
}
html.sr-clean #sr-rail .sr-rail__btn--show,
html.sr-hud #sr-rail .sr-rail__btn--show { display: none; }
html.sr-clean #sr-rail .sr-rail__btn--clean.is-idle,
html.sr-hud #sr-rail .sr-rail__btn--clean.is-idle { opacity: 0; }
html.sr-clean #sr-rail .sr-rail__btn--clean:hover,
html.sr-clean #sr-rail .sr-rail__btn--share:hover,
html.sr-clean #sr-rail .sr-rail__btn:focus-visible,
html.sr-hud #sr-rail .sr-rail__btn--clean:hover,
html.sr-hud #sr-rail .sr-rail__btn--share:hover,
html.sr-hud #sr-rail .sr-rail__btn:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.sr-side__view.is-current,
.sr-side[data-dir='pop'] .sr-side__view.is-current {
animation: sr-view-fade 120ms linear both;
}
.sr-time.sr-float { transition: none; }
}
@keyframes sr-view-fade {
from { opacity: 0; }
to { opacity: 1; }
}
:root {
--sr-top-y: calc(env(safe-area-inset-top, 0px) + var(--sp-2));
--sr-top-bar: 48px;
--sr-top-end: calc(var(--sr-top-y) + var(--sr-top-bar) + var(--sp-6));
--sr-sheet-gap: 60px;
--sr-sheet-handle: 48px;
--sr-sheet-h: 96px;
}
.sr-top,
.sr-rail__btn--more,
.sr-more[hidden] {
display: none;
}
.sr-top * {
box-sizing: border-box;
}
html.sr-phone .sr-top {
position: fixed;
top: var(--sr-top-y);
right: max(var(--sp-4), env(safe-area-inset-right, 0px));
left: max(var(--sp-4), env(safe-area-inset-left, 0px));
z-index: var(--sr-z-rail);
display: flex;
flex-direction: column;
gap: var(--sp-2);
pointer-events: none;
}
.sr-top__row {
display: flex;
gap: var(--sp-2);
}
.sr-top__search {
flex: 1 1 auto;
min-width: 0;
}
.sr-top__row > *,
.sr-top__line > * {
pointer-events: auto;
}
html.sr-phone .sr-top .sr-search,
html.sr-phone .sr-top .sr-explore__search {
position: static;
margin: 0;
}
html.sr-phone .sr-top .sr-search__row {
flex-wrap: nowrap;
height: var(--sr-top-bar);
padding: 0 var(--sp-4);
color: var(--sr-text-soft);
background: var(--sr-glass-strong);
border-color: var(--sr-line);
border-top-color: var(--sr-edge-lit);
border-radius: var(--sr-radius-shell);
}
html.sr-phone .sr-top .sr-search__row:focus-within {
border-color: var(--sr-line-strong);
border-top-color: var(--sr-edge-lit);
background: var(--sr-glass-strong);
}
html.sr-phone .sr-top .sr-search__input {
flex: 1 1 auto;
font-size: var(--sr-fs-input);
}
html.sr-phone .sr-top .sr-search__input::placeholder {
color: var(--sr-text-soft);
}
html.sr-phone .sr-top .sr-search__pop {
position: absolute;
z-index: 2;
top: calc(var(--sr-top-bar) + var(--sp-2));
right: 0;
left: 0;
max-height: calc(100dvh - var(--sr-top-y) - var(--sr-top-bar) - var(--sr-sheet-h) - var(--sp-6));
margin: 0;
padding: var(--sp-2) var(--sp-4);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--sr-glass-strong);
-webkit-backdrop-filter: var(--sr-blur);
backdrop-filter: var(--sr-blur);
border: 1px solid var(--sr-line);
border-top-color: var(--sr-edge-lit);
border-radius: var(--sr-radius-shell);
box-shadow: var(--sr-edge-glow), var(--sr-shadow);
}
html.sr-phone .sr-top .sr-search__list {
max-height: none;
}
html.sr-phone .sr-rail {
position: static;
flex-direction: row;
height: var(--sr-top-bar);
}
html.sr-phone .sr-rail__btn {
width: calc(var(--sr-top-bar) - 2px);
height: calc(var(--sr-top-bar) - 2px);
}
html.sr-phone .sr-rail__btn + .sr-rail__btn {
border-top: 0;
border-left: 1px solid var(--sr-line);
}
html.sr-phone .sr-rail__btn--share,
html.sr-phone .sr-rail__btn--clean,
html.sr-phone .sr-rail__btn--tour,
html.sr-phone .sr-rail__btn--github {
display: none;
}
html.sr-phone .sr-rail__btn--more {
display: grid;
}
html.sr-phone.sr-clean .sr-rail__btn--clean,
html.sr-phone.sr-clean .sr-rail__btn--share,
html.sr-phone.sr-hud .sr-rail__btn--clean,
html.sr-phone.sr-hud .sr-rail__btn--share {
display: grid;
}
html.sr-phone.sr-clean .sr-rail__btn--more,
html.sr-phone.sr-hud .sr-rail__btn--more {
display: none;
}
.sr-liveline {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
margin: 0;
padding: var(--sp-1) var(--sp-3);
font: 400 var(--sr-fs-sm)/16px var(--sr-font-mono);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
color: var(--sr-text);
white-space: nowrap;
}
.sr-liveline.sr-float {
background: var(--sr-glass-strong);
border-radius: var(--sr-radius-pill);
}
.sr-liveline.is-away .sr-time__dot {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--sr-ember);
}
html.sr-phone .sr-top__line {
display: none;
}
html.sr-phone.sr-card-open:not([data-sheet='full']) .sr-top__line {
display: block;
}
html.sr-phone .sr-pop {
top: calc(var(--sr-top-y) + var(--sr-top-bar) + var(--sp-2));
right: max(var(--sp-4), env(safe-area-inset-right, 0px));
left: max(var(--sp-4), env(safe-area-inset-left, 0px));
width: auto;
max-height: calc(100dvh - var(--sr-top-y) - var(--sr-top-bar) - var(--sp-6));
}
html.sr-phone .sr-pop.sr-more {
left: auto;
width: 240px;
padding: var(--sp-2);
}
html.sr-phone .sr-pop.sr-more:not([hidden]) {
display: block;
}
.sr-more__item {
display: flex;
align-items: center;
gap: var(--sp-3);
width: 100%;
min-height: 48px;
padding: 0 var(--sp-3);
font: 400 var(--sr-fs-body)/20px var(--sr-font);
color: var(--sr-text);
text-align: left;
text-decoration: none;
background: transparent;
border: 0;
border-radius: var(--sr-radius);
cursor: pointer;
transition: background var(--sr-fast) var(--sr-ease);
}
.sr-more__item svg {
flex: 0 0 auto;
}
.sr-more__item:active {
background: var(--sr-wash-strong);
}
.sr-more__item:focus-visible {
--sr-bracket-out: 0px;
}
@media (hover: hover) {
.sr-more__item:hover {
background: var(--sr-wash);
}
}
html.sr-phone #sr-side {
top: calc(env(safe-area-inset-top, 0px) + var(--sr-sheet-gap));
right: 0;
bottom: 0;
left: 0;
width: auto;
padding-bottom: env(safe-area-inset-bottom, 0px);
background: var(--sr-glass-strong);
border-width: 1px 0 0;
border-radius: var(--sr-radius-shell) var(--sr-radius-shell) 0 0;
transform: translateY(var(--sr-sheet-y, 100%));
transition:
transform var(--sr-slow) var(--sr-ease),
border-color var(--sr-fast) var(--sr-ease);
touch-action: none;
}
html.sr-phone #sr-side.is-dragging {
transition: none;
}
.sr-sheet__handle {
display: none;
}
html.sr-phone .sr-sheet__handle {
display: grid;
flex: 0 0 var(--sr-sheet-handle);
place-items: center;
width: 100%;
height: var(--sr-sheet-handle);
padding: 0;
color: inherit;
background: transparent;
border: 0;
cursor: grab;
touch-action: none;
-webkit-tap-highlight-color: transparent;
}
html.sr-phone #sr-side.is-dragging .sr-sheet__handle {
cursor: grabbing;
}
.sr-sheet__grabber {
width: 36px;
height: 4px;
border-radius: var(--sr-radius-pill);
background: var(--sr-text-faint);
transition: background var(--sr-fast) var(--sr-ease);
}
.sr-sheet__handle:focus-visible {
--sr-bracket-out: -4px;
}
.sr-sheet__handle:focus-visible .sr-sheet__grabber {
background: var(--sr-ember);
}
@media (hover: hover) {
.sr-sheet__handle:hover .sr-sheet__grabber {
background: var(--sr-text-dim);
}
}
html.sr-phone #sr-side:not([data-detent='full']) :is(.sr-explore__body, .sr-side__cardslot, .sr-side__sourceshost, .sr-side__trip) {
overflow: hidden;
}
html.sr-phone #sr-side[data-detent='full'] {
touch-action: auto;
}
html.sr-phone #sr-side :is(.sr-explore__head, .sr-side__bar, .sr-card__header, .sr-tripsheet__head) {
touch-action: none;
}
html.sr-phone #sr-side[data-detent='full'] :is(.sr-explore__body, .sr-side__cardslot, .sr-side__sourceshost, .sr-side__trip) {
touch-action: pan-y;
}
html.sr-phone .sr-explore__brand,
html.sr-phone .sr-explore__collapse {
display: none;
}
html.sr-phone .sr-explore__head {
gap: 0;
padding: 0 var(--sp-4);
}
html.sr-phone .sr-tabs {
padding: 2px;
}
html.sr-phone .sr-tabs__tab {
height: 44px;
font-size: var(--sr-fs-label);
}
html.sr-phone .sr-sect {
padding-right: var(--sp-4);
padding-left: var(--sp-4);
}
html.sr-phone .sr-statusline {
padding-right: var(--sp-4);
padding-left: var(--sp-4);
}
html.sr-phone .sr-side__card > .sr-side__bar {
display: none;
}
html.sr-phone .sr-card.is-docked {
padding: 0 var(--sp-4) var(--sp-4);
}
html.sr-phone .sr-card.is-docked .sr-card__header {
padding-top: 0;
padding-right: 44px;
}
html.sr-phone .sr-card.is-docked .sr-card__close {
top: 0;
right: var(--sp-2);
}
html.sr-phone .sr-card.is-docked .sr-card__name,
html.sr-phone .sr-tripsheet__name,
html.sr-phone .sr-tripsheet .sr-card__name {
font-size: var(--sr-fs-name-sm);
}
html.sr-phone .sr-card.is-docked .sr-hero__num {
font-size: var(--sr-fs-num-sm);
}
html.sr-phone .sr-card.is-docked .sr-act {
height: 52px;
}
html.sr-phone .sr-side .sr-status {
padding-right: var(--sp-4);
padding-left: var(--sp-4);
}
html.sr-phone.sr-trip-mode[data-trip-phase]:not([data-trip-phase='intro']):not([data-trip-phase='outro']) #sr-side {
bottom: calc(var(--sr-trip-bar-phone) + env(safe-area-inset-bottom, 0px));
padding-bottom: 0;
}
html.sr-trip-mode .sr-top {
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity var(--sr-slow) var(--sr-ease), visibility 0s linear var(--sr-slow);
}
html.sr-phone.sr-trip-collapsed #sr-side {
transform: translateY(110%);
}
html.sr-phone .sr-time {
bottom: 0;
z-index: var(--sr-z-pill);
width: calc(100vw - 2 * var(--sp-4));
transform: translate(-50%, calc(-1 * (var(--sr-sheet-h) + var(--sp-3))));
}
html.sr-phone .sr-time.sr-float {
transition:
transform var(--sr-slow) var(--sr-ease),
opacity var(--sr-fast) var(--sr-ease),
border-color var(--sr-fast) var(--sr-ease);
}
html.sr-phone.sr-sheet-dragging .sr-time.sr-float {
transition: none;
}
html.sr-phone .sr-time__step {
width: 44px;
height: 44px;
}
html.sr-phone .sr-time__read {
height: 44px;
padding: 0 var(--sp-2);
}
html.sr-phone .sr-time__rate,
html.sr-phone .sr-time__unit,
html.sr-phone .sr-time__live {
height: 44px;
}
html.sr-phone[data-sheet='full'] .sr-time,
html.sr-phone.sr-card-open .sr-time {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
html.sr-phone .sr-toast {
top: auto;
bottom: calc(var(--sr-sheet-h) + var(--sp-3) + var(--sr-time-h) + var(--sp-3));
left: 50%;
max-width: calc(100vw - 2 * var(--sp-4));
}
html.sr-phone[data-sheet='full'] .sr-toast,
html.sr-phone.sr-card-open .sr-toast {
bottom: min(calc(var(--sr-sheet-h) + var(--sp-3)), calc(100dvh - var(--sr-top-end) - 44px));
}
html.sr-phone .sr-scenenote {
top: var(--sr-top-end);
max-width: calc(100vw - 2 * var(--sp-4));
}
html.sr-phone[data-sheet='full'] .sr-scenenote {
visibility: hidden;
pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.sr-liveline.sr-float,
html.sr-phone #sr-side,
html.sr-phone .sr-top .sr-search__row,
html.sr-phone .sr-top .sr-search__pop {
background: var(--sr-glass-solid);
}
}
@media (prefers-reduced-transparency: reduce) {
.sr-liveline.sr-float,
html.sr-phone #sr-side,
html.sr-phone .sr-top .sr-search__row,
html.sr-phone .sr-top .sr-search__pop {
background: var(--sr-glass-solid);
}
}
@media (prefers-reduced-motion: reduce) {
html.sr-phone #sr-side,
html.sr-phone .sr-time.sr-float,
html.sr-trip-mode .sr-top {
transition: opacity 120ms linear;
}
.sr-sheet__grabber,
.sr-more__item {
transition: none;
}
}
.sr-tonight-view {
display: flex;
flex-direction: column;
gap: var(--sp-2);
min-width: 0;
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text);
}
.sr-tonight-view > * {
min-width: 0;
max-width: 100%;
}
.sr-tonight-view__title {
margin: 0;
font: 600 var(--sr-fs-sm)/16px var(--sr-font-hud);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sr-text-dim);
}
.sr-tonight-view__place,
.sr-tonight-view__caveat,
.sr-tonight-view__dark,
.sr-tonight-view__empty,
.sr-tonight-view__next,
.sr-tonight-view__line,
.sr-tonight-view__name {
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-tonight-view__line {
display: -webkit-box;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.sr-tonight-view__place,
.sr-tonight-view__caveat,
.sr-tonight-view__dark,
.sr-tonight-view__line {
color: var(--sr-text-dim);
}
.sr-tonight-view__body {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-2);
margin-top: var(--sp-2);
}
.sr-tonight-view__body[hidden],
.sr-tonight-view__next[hidden] { display: none; }
.sr-tonight-view__name {
font: 400 var(--sr-fs-body)/20px var(--sr-font);
}
.sr-tonight-view__nums {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-2);
margin: 0;
padding: var(--sp-3) 0;
border-top: 1px solid var(--sr-line);
border-bottom: 1px solid var(--sr-line);
}
.sr-tonight-view__cell {
display: flex;
flex-direction: column;
gap: var(--sp-1);
min-width: 0;
}
.sr-tonight-view__num {
margin: 0;
font: 400 var(--sr-fs-num)/1.1 var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text);
}
html.sr-phone .sr-tonight-view__num { font-size: var(--sr-fs-num-sm); }
.sr-tonight-view__unit {
font: 400 var(--sr-fs-sm)/16px var(--sr-font);
color: var(--sr-text-dim);
}
.sr-tonight-view__way {
display: flex;
gap: var(--sp-3);
align-items: center;
}
.sr-tonight-view__arc { flex: 0 0 96px; }
.sr-tonight-view__text { flex: 1 1 auto; min-width: 0; }
.sr-tonight-view__status {
margin: 0;
overflow: hidden;
font: 400 var(--sr-fs-sm)/18px var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-ember);
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-tonight-view__empty { padding-top: var(--sp-2); font-size: var(--sr-fs-body); line-height: 20px; color: var(--sr-text); }
.sr-tonight-view__empty[hidden] { display: none; }
.sr-tonight-view__next { color: var(--sr-text-dim); }
.sr-tonight-view__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.sr-tonight-view__list[hidden] { display: none; }
.sr-tonight-view__list { margin: 0; padding: 0; list-style: none; }
.sr-tonight-view__row { position: relative; border-top: 1px solid var(--sr-line); }
.sr-tonight-view__row:first-child { border-top: 0; }
.sr-tonight-view__rowbtn {
display: grid;
gap: 2px;
width: 100%;
min-height: 44px;
padding: var(--sp-3) 0;
font: inherit;
text-align: left;
color: var(--sr-text);
background: transparent;
border: 0;
cursor: pointer;
}
.sr-tonight-view__rowname,
.sr-tonight-view__rowdetail {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sr-tonight-view__rowname { font: 400 var(--sr-fs-body)/20px var(--sr-font); }
.sr-tonight-view__rowdetail { font: 400 var(--sr-fs-sm)/18px var(--sr-font-mono); color: var(--sr-text-dim); }
@media (hover: hover) {
.sr-tonight-view__rowbtn:hover .sr-tonight-view__rowname { color: var(--sr-ember-light); }
}
.sr-tonight-view__rowarc { display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.sr-tonight-view__row:hover .sr-tonight-view__rowarc,
.sr-tonight-view__row:focus-within .sr-tonight-view__rowarc { display: block; }
.sr-arc { display: block; overflow: visible; }
.sr-arc__horizon, .sr-arc__tick { stroke: var(--sr-line-strong); stroke-width: 1; }
.sr-arc__lit { fill: none; stroke: var(--sr-text); stroke-width: 1.5; stroke-linecap: round; }
.sr-arc__shadow { fill: none; stroke: var(--sr-text-dim); stroke-width: 1.5; stroke-dasharray: 3 3; }
.sr-arc__peak { fill: var(--sr-ember); }
.sr-arc__cardinal { fill: var(--sr-text-dim); font-size: var(--sr-fs-unit); font-family: var(--sr-font); }
:root {
--sr-night-red: #c40000;
--sr-z-night: 90;
}
.sr-skylabels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sr-skylabel {
position: absolute;
left: 0;
top: 0;
will-change: transform;
white-space: nowrap;
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text-soft);
text-shadow: 0 0 2px var(--sr-space), 0 0 2px var(--sr-space), 0 0 4px var(--sr-space), 0 0 8px var(--sr-space);
}
.sr-skylabel[hidden], .sr-skymark[hidden] { display: none; }
.sr-skylabel--con {
font: 600 var(--sr-fs-sm)/16px var(--sr-font-hud);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sr-text-dim);
}
.sr-skylabel--here { color: var(--sr-text); }
.sr-skylabel--body { color: var(--sr-text); font-weight: 600; }
.sr-skylabel--pass { color: var(--sr-text); font-family: var(--sr-font-mono); font-variant-numeric: tabular-nums; }
.sr-skylabel--line { color: var(--sr-text-dim); }
.sr-skylabel--dso { color: var(--sr-text-soft); font-style: italic; }
.sr-skyfov {
position: absolute;
left: 50%;
top: var(--sp-5);
transform: translateX(-50%);
white-space: nowrap;
font: 400 var(--sr-fs-sm)/18px var(--sr-font-mono);
color: var(--sr-text-soft);
text-shadow: 0 0 2px var(--sr-space), 0 0 2px var(--sr-space), 0 0 4px var(--sr-space), 0 0 8px var(--sr-space);
}
.sr-skymark {
position: absolute;
left: 0;
top: 0;
width: 44px;
height: 44px;
border: 2px solid var(--sr-ember);
border-radius: 50%;
box-shadow: 0 0 0 1px var(--sr-space), inset 0 0 0 1px var(--sr-space);
}
.sr-skyeyepiece {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid var(--sr-line-strong);
border-radius: 50%;
box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--sr-space) 62%, transparent);
}
.sr-skyeyepiece[hidden] { display: none; }
.sr-skytag {
appearance: none;
position: fixed;
left: 0;
top: 0;
z-index: var(--sr-z-labels);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 48px;
min-width: 44px;
max-width: min(320px, calc(100vw - 16px));
padding: var(--sp-1) var(--sp-3);
font: inherit;
color: var(--sr-text);
cursor: pointer;
will-change: transform;
transition: border-color var(--sr-fast) var(--sr-ease);
}
.sr-skytag:hover, .sr-skytag:active { border-color: var(--sr-line-strong); }
.sr-skytag[hidden] { display: none; }
.sr-skytag__name { font: 600 var(--sr-fs-sm)/18px var(--sr-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sr-skytag__sub { font: 400 var(--sr-fs-sm)/16px var(--sr-font-mono); color: var(--sr-text-dim); white-space: nowrap; }
html.sr-night-red::after {
content: '';
position: fixed;
inset: 0;
z-index: var(--sr-z-night);
pointer-events: none;
background: var(--sr-night-red);
mix-blend-mode: multiply;
}
.sr-tonight-view__sub { margin-top: var(--sp-4); }
.sr-tonight-view__sub[hidden], .sr-tonight-view__caveat[hidden] { display: none; }
.sr-skybar { display: flex; flex-direction: column; gap: var(--sp-2); }
.sr-skybar .sr-density__note { margin: 0; }
.sr-skybar__wrap { flex-wrap: wrap; }
.sr-skytime { display: flex; flex: none; justify-content: space-between; align-items: center; cursor: ew-resize; touch-action: none; user-select: none; }
.sr-skytime__at { color: var(--sr-text); }
.sr-skytime { position: relative; overflow: hidden; padding-bottom: var(--sp-4); }
.sr-skytime__ticks { position: absolute; inset: 0; pointer-events: none; }
.sr-skytime__tick { position: absolute; bottom: 0; width: 1px; height: var(--sp-3); background: var(--sr-line-strong); }
.sr-skytime__tick[hidden] { display: none; }
.sr-skytime__ticklabel {
position: absolute;
left: var(--sp-1);
bottom: 0;
font: 400 var(--sr-fs-sm)/1 var(--sr-font);
color: var(--sr-text-dim);
white-space: nowrap;
}
.sr-skyreticle {
position: absolute;
left: 50%;
top: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
pointer-events: none;
--sr-bracket-out: 0px;
}
.sr-skyreticle[hidden] { display: none; }
.sr-skybar .sr-density__choices[hidden], .sr-skybar .sr-density__btn[hidden] { display: none; }
.sr-skybar__wrap .sr-density__btn { flex: 1 1 30%; }
@media (pointer: coarse) {
.sr-skybar .sr-density__btn { min-height: 44px; }
}
.sr-tonight-view__rowhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.sr-tonight-view__rowhead .sr-tonight-view__rowname { flex: 1 1 auto; min-width: 0; }
.sr-tonight-view__rowside { flex: 0 0 auto; font: 400 var(--sr-fs-sm)/18px var(--sr-font-mono); color: var(--sr-text-dim); }
html.sr-phone .sr-skyfov { top: calc(var(--sp-6) * 2 + var(--sp-2)); }
html.sr-phone.sr-launchday:not([data-sheet='full']) .sr-skyfov {
top: calc(var(--sr-top-y) + var(--sr-top-bar) + var(--sp-2) + 44px + var(--sp-2));
}
.sr-card__name:focus { outline: none; }
@media (pointer: coarse) {
.sr-btn,
.sr-chip,
.sr-more,
.sr-pick__btn,
.sr-side__back,
.sr-now__btn,
.sr-show__label,
.sr-colourkey__select {
min-height: 44px;
}
}
.sr-tripsheet__quietrow {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
align-items: center;
}
.sr-tripsheet__present,
.sr-tripsheet__keep {
gap: var(--sp-2);
}
.sr-tripsheet__keep[aria-busy='true'] {
color: var(--sr-text-dim);
}
.sr-tripsheet__present[aria-pressed='true'] {
color: var(--sr-text);
background: var(--sr-wash-strong);
}
.sr-tripsheet__send {
display: block;
width: 100%;
min-height: 44px;
margin: var(--sp-4) 0 0;
padding: 0;
overflow: hidden;
font: 400 var(--sr-fs-label)/20px var(--sr-font);
color: var(--sr-text);
text-align: left;
cursor: pointer;
background: var(--sr-wash);
border: 0;
border-radius: var(--sr-radius);
transition: background-color var(--sr-fast) var(--sr-ease);
}
.sr-tripsheet__send:active {
background: var(--sr-wash-strong);
}
@media (hover: hover) {
.sr-tripsheet__send:hover {
background: var(--sr-wash-hover);
}
}
.sr-tripsheet__sendpic {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.sr-tripsheet__sendcap {
display: flex;
gap: var(--sp-2);
align-items: center;
padding: var(--sp-3);
}
html.sr-present {
--sr-scene-left: 0px;
--sr-trip-bar: 72px;
}
html.sr-present #sr-side {
display: none;
}
.sr-tripsheet.is-present {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
min-height: 0;
max-height: 50vh;
padding: var(--sp-5) var(--sp-6) calc(var(--sp-5) + var(--sr-trip-bar) + var(--sp-6));
overflow-y: auto;
pointer-events: auto;
border-width: 1px 0 0;
border-radius: var(--sr-radius-shell) var(--sr-radius-shell) 0 0;
}
html.sr-present .sr-trip__toolbar {
z-index: 1;
}
.sr-tripsheet.is-present .sr-tripsheet__panel,
.sr-tripsheet.is-present .sr-card.is-docked {
padding: 0;
}
.sr-tripsheet.is-present .sr-card__name,
.sr-tripsheet.is-present .sr-tripsheet__name {
font: 600 var(--sr-fs-present-name)/1.12 var(--sr-font);
}
.sr-tripsheet.is-present .sr-card__leadbody,
.sr-tripsheet.is-present .sr-tripsheet__text {
max-width: none;
margin-top: var(--sp-4);
font: 400 var(--sr-fs-present)/1.38 var(--sr-font);
}
.sr-tripsheet.is-present .sr-card__micro,
.sr-tripsheet.is-present .sr-tripsheet__micro,
.sr-tripsheet.is-present .sr-tripsheet__meta,
.sr-tripsheet.is-present .sr-tripsheet__note,
.sr-tripsheet.is-present .sr-card__leadnote,
.sr-tripsheet.is-present .sr-card__when,
.sr-tripsheet.is-present .sr-card__tripline,
.sr-tripsheet.is-present .sr-card__cls,
.sr-tripsheet.is-present .sr-tripsheet__quiet,
.sr-tripsheet.is-present .sr-tripsheet__stoptitle,
.sr-tripsheet.is-present .sr-tripsheet__stopn {
font-size: var(--sr-fs-present-sm);
line-height: 1.35;
}
.sr-tripsheet.is-present .sr-card__subject,
.sr-tripsheet.is-present .sr-card__nums,
.sr-tripsheet.is-present .sr-card__actions,
.sr-tripsheet.is-present .sr-card__more,
.sr-tripsheet.is-present .sr-card__close,
.sr-tripsheet.is-present .sr-tripsheet__pic,
.sr-tripsheet.is-present .sr-tripsheet__send {
display: none;
}
.sr-tripsheet.is-present .sr-tripsheet__start {
min-height: 64px;
padding: 0 var(--sp-6);
font-size: var(--sr-fs-present-sm);
}
.sr-tripsheet.is-present .sr-tripsheet__sound {
width: 64px;
height: 64px;
}
.sr-tripsheet.is-present .sr-tripsheet__stops {
columns: 2;
column-gap: var(--sp-6);
}
html.sr-present .sr-trip__tb {
width: 56px;
height: 56px;
}
html.sr-present .sr-trip__tb[class='sr-trip__tb'] {
width: 88px;
background: var(--sr-wash);
border-radius: var(--sr-radius-pill);
}
html.sr-present .sr-trip__tb--replay,
html.sr-present .sr-trip__tb--share,
html.sr-present .sr-trip__tb--hide {
display: none;
}
html.sr-present .sr-trip__count {
font-size: var(--sr-fs-num);
}
.sr-trip__tb[hidden] {
display: none;
}
@media (min-width: 1800px) {
html.sr-present {
--sr-fs-present-sm: 26px;
--sr-fs-present: 40px;
--sr-fs-present-name: 64px;
}
}
@media (max-width: 899px) {
.sr-tripsheet.is-present {
max-height: 56vh;
padding: var(--sp-4) var(--sp-4) calc(var(--sr-trip-bar-phone) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
}
html.sr-present {
--sr-fs-present-sm: 15px;
--sr-fs-present: 20px;
--sr-fs-present-name: 28px;
}
html.sr-present .sr-trip__tb,
html.sr-present .sr-trip__tb[class='sr-trip__tb'] {
width: 44px;
height: 44px;
}
}
.sr-today[hidden] { display: none; }
.sr-today__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-2);
padding-top: var(--sp-2);
}
.sr-today__grid[hidden] { display: none; }
.sr-today__card {
display: flex;
flex-direction: column;
gap: var(--sp-1);
min-height: 96px;
padding: var(--sp-3);
font: inherit;
text-align: left;
color: var(--sr-text);
background: var(--sr-wash);
border: 1px solid var(--sr-line);
border-radius: var(--sr-radius);
cursor: pointer;
transition: background-color var(--sr-fast) var(--sr-ease), border-color var(--sr-fast) var(--sr-ease);
}
.sr-today__card:hover { background: var(--sr-wash-strong); border-color: var(--sr-line-strong); }
.sr-today__kicker {
font: 500 var(--sr-fs-sm)/16px var(--sr-font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--sr-text-dim);
}
.sr-today__title {
display: -webkit-box;
overflow: hidden;
font: 600 var(--sr-fs-label)/18px var(--sr-font);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.sr-today__line {
display: -webkit-box;
overflow: hidden;
font: 400 var(--sr-fs-sm)/16px var(--sr-font);
color: var(--sr-text-dim);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.sr-debris[hidden] { display: none; }
.sr-debris {
display: flex;
flex-direction: column;
gap: var(--sp-3);
padding: var(--sp-2) 0 var(--sp-3);
}
.sr-debris .sr-micro { margin: var(--sp-2) 0 0; }
.sr-debris__state,
.sr-debris__note,
.sr-debris__honesty,
.sr-debris__story {
margin: 0;
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text-dim);
}
.sr-debris__lead {
margin: 0;
font: 400 var(--sr-fs-lead)/1.25 var(--sr-font);
color: var(--sr-text);
}
.sr-debris__nums {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-3) var(--sp-2);
margin: 0;
}
.sr-debris__num { display: flex; flex-direction: column; gap: var(--sp-1); }
.sr-debris__n {
margin: 0;
font: 400 var(--sr-fs-num-sm)/1.1 var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text);
}
.sr-debris__k {
display: flex;
align-items: center;
gap: var(--sp-2);
font: 400 var(--sr-fs-sm)/16px var(--sr-font);
color: var(--sr-text-dim);
}
.sr-debris__swatch {
flex: none;
width: 10px;
height: 10px;
border-radius: var(--sr-radius-sm);
background: var(--sr-debris);
}
.sr-debris__num[data-kind='rocket'] .sr-debris__swatch,
.sr-debris__seg[data-kind='rocket'] { background: var(--sr-rocket); }
.sr-debris__num[data-kind='dead'] .sr-debris__swatch,
.sr-debris__seg[data-kind='dead'] { background: var(--sr-text-faint); }
.sr-debris__num[data-kind='working'] .sr-debris__swatch,
.sr-debris__seg[data-kind='working'] { background: var(--sr-satellite); }
.sr-debris__bands,
.sr-debris__stories {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin: 0;
padding: 0;
list-style: none;
}
.sr-debris__bandhead {
display: flex;
justify-content: space-between;
gap: var(--sp-2);
font: 400 var(--sr-fs-sm)/16px var(--sr-font);
color: var(--sr-text);
}
.sr-debris__bandn {
font-family: var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
}
.sr-debris__bar {
display: flex;
height: 8px;
margin-top: var(--sp-1);
overflow: hidden;
background: var(--sr-wash);
border-radius: var(--sr-radius-sm);
}
.sr-debris__seg { flex: none; height: 100%; background: var(--sr-debris); }
.sr-debris__map { align-self: flex-start; min-height: 44px; padding: 0 var(--sp-4); }
.sr-debris__map[aria-pressed='true'] { color: var(--sr-text); border-color: var(--sr-line-strong); }
.sr-card__mission[hidden] { display: none; }
.sr-mission {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--sr-line);
}
.sr-mission__head {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.sr-mission__head .sr-micro { margin: 0; }
.sr-mission__count {
font: 400 var(--sr-fs-sm)/16px var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
}
.sr-mission__nav {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.sr-mission__what { flex: 1 1 auto; min-width: 0; }
.sr-mission__when {
margin: 0;
font: 400 var(--sr-fs-sm)/16px var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
}
.sr-mission__title {
margin: 0;
font: 600 var(--sr-fs-body)/20px var(--sr-font);
color: var(--sr-text);
}
.sr-mission__step {
flex: none;
width: 44px;
height: 44px;
padding: 0;
font: 400 var(--sr-fs-glyph)/1 var(--sr-font);
color: var(--sr-text);
background: var(--sr-wash);
border: 0;
border-radius: 50%;
cursor: pointer;
}
.sr-mission__step:hover { background: var(--sr-wash-strong); }
.sr-mission__step:disabled { opacity: 0.45; cursor: not-allowed; }
.sr-mission__text,
.sr-mission__note,
.sr-mission__source {
margin: 0;
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text-dim);
}
.sr-mission__text { font-size: var(--sr-fs-label); line-height: 20px; color: var(--sr-text); }
.sr-mission__note.is-here { color: var(--sr-text); }
.sr-mission__acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sr-mission__go { min-height: 44px; padding: 0 var(--sp-4); }
.sr-mission__list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.sr-mission__list[hidden] { display: none; }
.sr-mission__event {
display: flex;
align-items: baseline;
gap: var(--sp-3);
width: 100%;
min-height: 44px;
padding: var(--sp-2) var(--sp-2);
font: inherit;
text-align: left;
color: var(--sr-text);
background: transparent;
border: 0;
border-top: 1px solid var(--sr-line);
border-radius: 0;
cursor: pointer;
}
.sr-mission__event:hover { background: var(--sr-wash); }
.sr-mission__event[aria-current='true'] { background: var(--sr-ember-soft); }
.sr-mission__event-when {
flex: none;
width: 9.5em;
font: 400 var(--sr-fs-sm)/16px var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
}
.sr-mission__event[aria-current='true'] .sr-mission__event-when { color: var(--sr-text); }
.sr-mission__event-title { font: 400 var(--sr-fs-label)/18px var(--sr-font); }
.sr-mission__link {
color: var(--sr-text);
text-decoration: underline;
text-underline-offset: 3px;
}
.sr-mission__link:hover { color: var(--sr-ember-light); }
@media (pointer: coarse) {
.sr-mission__link { display: inline-flex; align-items: center; min-height: 44px; }
.sr-today__debris { min-height: 44px; }
}
html.sr-phone .sr-show__toggle { min-height: 44px; }
html.sr-phone .sr-skybar__wrap .sr-density__btn { min-width: 44px; min-height: 44px; }
.sr-count {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1) var(--sp-2);
align-items: baseline;
}
.sr-count[hidden] { display: none; }
.sr-count__clock {
font: 500 var(--sr-fs-body)/1.2 var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-ember);
}
.sr-count__words {
font-size: var(--sr-fs-sm);
color: var(--sr-text-dim);
}
.sr-card__count { margin: 0 0 var(--sp-3); }
.sr-card__count .sr-count__clock { font-size: var(--sr-fs-num-sm); }
.sr-trip__vol {
width: 72px;
height: 44px;
margin: 0 var(--sp-1);
accent-color: var(--sr-ember);
background: transparent;
cursor: pointer;
}
.sr-trip__vol[hidden] { display: none; }
.sr-show__vol {
display: block;
width: 100%;
height: 44px;
margin: var(--sp-1) 0 0;
accent-color: var(--sr-ember);
background: transparent;
cursor: pointer;
}
.sr-show__vol[hidden] { display: none; }
html.sr-phone .sr-trip__vol { width: 56px; }
.sr-tripsheet__voiceoffer[hidden] { display: none; }
.sr-sentence {
display: block;
width: 100%;
min-height: 24px;
margin: 0;
padding: 0;
font: inherit;
font-size: var(--sr-fs-label);
line-height: 1.4;
text-align: left;
color: var(--sr-text);
background: transparent;
border: 0;
cursor: pointer;
opacity: 0;
transition: opacity var(--sr-slow) var(--sr-ease), color var(--sr-fast) var(--sr-ease);
}
.sr-sentence[hidden] { display: none; }
.sr-sentence.is-in { opacity: 1; }
.sr-sentence:hover { color: var(--sr-ember-light); }
.sr-sentence__text {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
html.sr-phone .sr-sentence {
min-height: 44px;
padding: 0 var(--sp-4);
}
html.sr-phone .sr-passport {
padding-right: var(--sp-4);
padding-left: var(--sp-4);
}
@media (pointer: coarse) {
.sr-sentence { min-height: 44px; }
}
.sr-wonder {
width: 100%;
min-height: 44px;
margin-top: var(--sp-2);
}
.sr-wonder[hidden] { display: none; }
.sr-story__rule {
color: var(--sr-text-dim);
}
.sr-passport-open {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
width: 100%;
min-height: 44px;
padding: var(--sp-3) 0;
font: inherit;
font-size: var(--sr-fs-body);
line-height: 1.35;
text-align: left;
color: var(--sr-text);
background: transparent;
border: 0;
border-top: 1px solid var(--sr-line);
cursor: pointer;
}
.sr-passport-open:hover .sr-passport-open__name { color: var(--sr-ember-light); }
.sr-passport-open__value {
font: 400 var(--sr-fs-sm)/1.35 var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text-dim);
white-space: nowrap;
}
.sr-passport {
display: flex;
flex-direction: column;
gap: var(--sp-5);
padding: var(--sp-2) 20px var(--sp-5);
}
.sr-passport__title {
margin: 0;
font: 600 var(--sr-fs-mark)/1 var(--sr-font-hud);
color: var(--sr-text);
}
.sr-passport__title:focus { outline: none; }
.sr-passport__note,
.sr-passport__empty,
.sr-passport__said {
margin: 0;
font-size: var(--sr-fs-sm);
line-height: 1.4;
color: var(--sr-text-dim);
}
.sr-passport__note { margin-top: calc(-1 * var(--sp-3)); }
.sr-passport__said:empty { display: none; }
.sr-passport__sect {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.sr-passport__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
}
.sr-passport__num {
font: 500 var(--sr-fs-num-sm)/1 var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text);
}
.sr-passport__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-2);
margin: 0;
padding: 0;
list-style: none;
}
.sr-passport__place {
width: 100%;
min-height: 44px;
padding: var(--sp-2) var(--sp-3);
overflow: hidden;
font: inherit;
font-size: var(--sr-fs-label);
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--sr-text);
background: var(--sr-wash);
border: 1px solid var(--sr-line);
border-radius: var(--sr-radius);
cursor: pointer;
}
.sr-passport__place:hover { background: var(--sr-wash-strong); border-color: var(--sr-line-strong); }
.sr-passport__bar {
height: 4px;
overflow: hidden;
background: var(--sr-line);
border-radius: var(--sr-radius-pill);
}
.sr-passport__fill {
display: block;
height: 100%;
background: var(--sr-text-soft);
border-radius: var(--sr-radius-pill);
}
.sr-passport__forget {
align-self: flex-start;
min-height: 44px;
padding: 0 var(--sp-4);
font: inherit;
font-size: var(--sr-fs-label);
color: var(--sr-text);
background: transparent;
border: 1px solid var(--sr-line-strong);
border-radius: var(--sr-radius);
cursor: pointer;
}
.sr-passport__forget:hover { background: var(--sr-wash); }
.sr-passport__forget:disabled { color: var(--sr-text-dim); border-color: var(--sr-line); cursor: default; background: transparent; }
.sr-tripsheet__stamp {
align-self: flex-start;
width: fit-content;
margin: 0 0 var(--sp-3);
padding: var(--sp-1) var(--sp-2);
font: 600 var(--sr-fs-sm)/16px var(--sr-font-hud);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sr-text-soft);
border: 1px dashed var(--sr-line-strong);
border-radius: var(--sr-radius-sm);
}
.sr-tripsheet__stamp[hidden] { display: none; }
.sr-tripsheet__seen {
margin: calc(-1 * var(--sp-2)) 0 var(--sp-3);
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text-dim);
}
.sr-tripsheet__seen[hidden] { display: none; }
.sr-live__row {
display: flex;
align-items: baseline;
gap: var(--sp-2);
margin: 0;
font: 400 var(--sr-fs-sm)/18px var(--sr-font);
color: var(--sr-text-dim);
}
.sr-live__num {
font: 400 var(--sr-fs-num-sm)/1.1 var(--sr-font-mono);
font-variant-numeric: tabular-nums;
color: var(--sr-text);
}
.sr-live .sr-card__aboardnote,
.sr-spark .sr-card__aboardnote,
.sr-crew > .sr-card__aboardnote { margin-top: var(--sp-2); }
.sr-spark__svg {
display: block;
width: 100%;
height: 56px;
margin-bottom: var(--sp-1);
}
.sr-spark__path { fill: none; stroke: var(--sr-text); stroke-width: 1.5; }
.sr-spark__base { stroke: var(--sr-line-strong); stroke-width: 1; }
.sr-spark__now { stroke: var(--sr-text-dim); stroke-width: 1; }
.sr-spark__min { stroke: var(--sr-ember); stroke-width: 2; }
.sr-spark__go { margin-top: var(--sp-2); text-align: left; font-size: var(--sr-fs-sm); }
.sr-crew { display: flex; flex-direction: column; gap: var(--sp-3); }
.sr-crew__people .sr-card__aboardnote { margin-top: var(--sp-2); }
.sr-next__pastacts { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.sr-next__pastbox { margin-bottom: var(--sp-3); }
.sr-card__out { color: var(--sr-text-soft); }
.sr-card__aboardnote.is-stale { color: var(--sr-text-soft); }
.sr-debris__oldest .sr-debris__story { display: flex; flex-direction: column; }
.sr-debris__oldname {
padding: 0;
border: 0;
background: none;
text-align: left;
font: 400 var(--sr-fs-body)/20px var(--sr-font);
color: var(--sr-text);
}
button.sr-debris__oldname { min-height: 24px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--sr-line-strong); }
button.sr-debris__oldname:hover { color: var(--sr-ember-light); }
@media (pointer: coarse) {
button.sr-debris__oldname { min-height: 44px; }
}
.sr-debris__oldyears { font-family: var(--sr-font-mono); font-variant-numeric: tabular-nums; }