/* Solar Drift additions are scoped so Gravity can keep the shared instrument shell. */
.drift-page { min-width: 0; }
.drift-page .observatory { grid-template-columns: minmax(0, 1fr) 320px; }
.drift-page .viewport { background: radial-gradient(ellipse at 55% 50%, var(--panel), var(--app-bg) 68%); }
.drift-page .scene-intro h1 { font-size: var(--fs-hero); line-height: 1.06; letter-spacing: -1.8px; }
.drift-page .scene-intro h1 em { color: var(--accent); }
.drift-page .scene-intro > p:last-child { margin-top: var(--s-4); }
.drift-page #drift-canvas { mask-image: linear-gradient(180deg, transparent, #000 20%, #000 75%, transparent 98%); }
.scene-presets { position: absolute; top: 168px; inset-inline-start: 38px; display: flex; gap: var(--s-3); z-index: 3; }
.scene-presets button { font-size: 11px; min-height: 34px; border: 1px solid var(--border); border-radius: var(--r-pill); padding: var(--s-3) var(--s-4); color: var(--text-soft); background: color-mix(in srgb, var(--panel) 87%, transparent); }
.scene-presets button[aria-pressed=true] { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.drift-page .control-panel { padding: var(--s-6); scrollbar-color: var(--border) var(--panel); }
.drift-page .panel-title { padding-bottom: var(--s-5); }
.drift-page .control-section { margin-bottom: var(--s-5); }
.drift-page .control-section h2 { font-size: var(--fs-label); }
.drift-page .frame-picker { gap: var(--s-2); }
.drift-page .frame-picker button { min-height: 49px; padding: var(--s-3); }
.drift-page .frame-picker button[aria-pressed=true] { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); border-color: var(--accent); }
.drift-page .frame-picker button[aria-pressed=true] .radio-mark { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.trail-behaviour, .planet-groups { display: flex; gap: var(--s-2); padding: var(--s-2); margin-top: var(--s-4); background: var(--app-bg); border: 1px solid var(--line); border-radius: var(--r-sm); }
.trail-behaviour button, .planet-groups button { flex: 1; min-height: 30px; font-size: 11px; color: var(--muted); border-radius: var(--r-xs); }
.trail-behaviour button[aria-pressed=true], .planet-groups button[aria-pressed=true] { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.drift-page .trail-hint { margin: var(--s-3) 0 0; font-size: 11px; line-height: 1.5; }
.drift-appearance { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.drift-appearance .section-heading { min-height: 34px; }
.drift-appearance label, .focus-picker, .drift-detail-body label { font-size: 12px; }
.drift-appearance select, .focus-picker select { color: var(--ink); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-xs); padding: var(--s-2) var(--s-3); min-height: 34px; font-size: 11px; }
.drift-toggle { display: flex; align-items: center; gap: var(--s-3); min-height: 32px; font-size: 11px; cursor: pointer; }
.drift-toggle input { margin: 0; width: 13px; height: 13px; }
.drift-details { border-block: 1px solid var(--line); margin-bottom: var(--s-4); }
.drift-details + .drift-details { border-top: 0; }
.drift-details summary { padding-block: var(--s-4); font-size: 12px; cursor: pointer; color: var(--text-soft); }
.drift-details summary > span { color: var(--muted); float: inline-end; font: 11px var(--font-mono); }
.drift-details summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.drift-details .worlds-section { border: 0; padding: 0; }
.drift-details .planet-groups { margin: 0 0 var(--s-4); }
.focus-picker { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); color: var(--muted); }
.focus-picker select { width: 100%; }
.drift-detail-body { padding-block: var(--s-3) var(--s-4); }
.drift-detail-body p { font-size: 11px; color: var(--muted); line-height: 1.5; margin: var(--s-3) 0; }
.drift-reset { display: block; color: var(--muted); font-size: 11px; text-decoration: underline; text-underline-offset: 4px; margin-top: var(--s-3); min-height: 30px; }
.drift-page .planet-insight { top: 218px; max-width: 250px; z-index: 2; }
.galaxy-caption { position: absolute; inset-inline-start: 38px; bottom: 202px; display: grid; gap: var(--s-2); pointer-events: none; color: var(--muted); }
.galaxy-caption .eyebrow { font-size: 11px; }
.galaxy-caption > span:last-child { font-size: 11px; color: var(--muted); }
.journey-metrics { position: absolute; top: 112px; inset-inline-end: 27px; display: grid; gap: var(--s-5); pointer-events: none; }
.journey-metrics > div { display: grid; gap: var(--s-3); }
.journey-metrics > div > span { font: 11px var(--font-mono); letter-spacing: 1px; color: var(--muted); }
.journey-metrics strong { font: 20px var(--font-mono); color: var(--accent-2); }
.journey-metrics small { font: 11px var(--font-body); color: var(--muted); }
.drift-page .view-toolbar { bottom: 139px; }
.drift-page .canvas-tools { bottom: 139px; }
.drift-page .view-toolbar button { font-size: 11px; padding-inline: var(--s-3); }
.drift-page .scene-scale .scale-line { display: none; }
.drift-page .scene-bottom { bottom: 26px; }
.cinema-bar { position: fixed; inset: auto 0 0; z-index: 40; display: flex; align-items: center; justify-content: center; gap: var(--s-6); padding: var(--s-5); background: linear-gradient(transparent, color-mix(in srgb, var(--app-bg) 94%, transparent)); }
.cinema-bar > span { font: 11px var(--font-mono); color: var(--accent-2); letter-spacing: 2px; }
.cinema-bar button { color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--r-pill); min-height: 40px; padding: var(--s-3) var(--s-5); font-size: 12px; }
.drift-page.cinema-active { overflow: hidden; }
.cinema-active .viewport { position: fixed; inset: 0; width: 100%; height: 100dvh; min-height: 0; max-height: none; z-index: 30; }
.cinema-active .masthead, .cinema-active .control-panel, .cinema-active .playback, .cinema-active .statusbar { display: none; }
.cinema-active .viewport > :not(canvas):not(.planet-labels):not(.render-error):not(.sgr-landmark):not(.flight-model-note) { display: none; }
.cinema-active #drift-canvas { mask-image: none; }
.cinema-active .planet-label { font-size: 11px; }
@media (max-width: 1365px) {
  .drift-page .observatory { grid-template-columns: minmax(0, 1fr) 294px; }
  .drift-page .control-panel { padding: var(--s-5); }
  .drift-page .scene-intro h1 { font-size: 44px; }
  .scene-presets { top: 154px; inset-inline-start: 25px; }
  .journey-metrics { top: 112px; }
  .journey-metrics strong { font-size: 17px; }
  .drift-page .scene-badge { top: 33px; bottom: auto; }
  .galaxy-caption { inset-inline-start: 25px; }
}
@media (max-width: 980px) {
  .drift-page .viewport { height: 82svh; min-height: 660px; }
  .drift-page .scene-intro h1 { font-size: 44px; }
  .scene-presets { top: 148px; inset-inline-start: 23px; }
  .drift-page .scene-badge { top: auto; bottom: 194px; }
  .drift-page .planet-insight { top: 198px; }
  .drift-page .control-panel { padding: var(--s-6); }
  .drift-page .control-section h2 { font-size: var(--fs-sm); }
  .drift-page .view-toolbar, .drift-page .canvas-tools { bottom: 139px; }
  .drift-page .view-toolbar { inset-inline-start: 22px; }
  .drift-page .canvas-tools { inset-inline-end: 20px; }
  .journey-metrics { top: 208px; }
  .galaxy-caption { bottom: 200px; }
  .drift-details summary { font-size: 14px; padding-block: var(--s-5); }
  .drift-toggle, .drift-page .planet-row { min-height: 42px; }
  .cinema-active .viewport { height: 100dvh; min-height: 0; }
}
@media (max-width: 560px) {
  .drift-page .masthead { padding-inline: var(--s-4); }
  .drift-page .scene-intro h1 { font-size: 38px; }
  .drift-page .scene-intro > p:last-child { max-width: 250px; line-height: 1.5; font-size: 12px; }
  .scene-presets { inset-inline-start: 19px; gap: var(--s-2); top: 155px; }
  .scene-presets button { font-size: 11px; padding-inline: var(--s-3); min-height: 34px; }
  .journey-metrics { top: auto; bottom: 218px; inset-inline-end: 21px; gap: var(--s-3); text-align: end; }
  .journey-metrics > div { gap: var(--s-2); }
  .journey-metrics > div > span { font-size: 11px; }
  .journey-metrics strong { font-size: 14px; }
  .journey-metrics small { font-size: 11px; }
  .galaxy-caption { inset-inline-start: 20px; bottom: 217px; max-width: 120px; }
  .galaxy-caption > span:last-child { font-size: 11px; line-height: 1.5; }
  .drift-page .planet-insight { top: 202px; inset-inline-start: 19px; max-width: 220px; }
  .drift-page .view-toolbar { bottom: 146px; inset-inline-start: 16px; inset-inline-end: 16px; }
  .drift-page .view-toolbar button { flex: 1; padding-inline: var(--s-2); font-size: 11px; }
  .drift-page .canvas-tools { bottom: 91px; }
  .drift-page .canvas-tools button { width: 32px; height: 32px; font-size: 20px; }
  .drift-page .travel-reading > div { font-size: 25px; }
  .drift-page .scene-bottom { inset-inline-start: 20px; inset-inline-end: 20px; bottom: 22px; }
  .drift-page .scene-scale { max-width: 100px; text-align: end; }
  .drift-page .scene-scale > span { font-size: 11px; }
  .drift-page .scene-scale button { font-size: 11px; }
  .drift-page .travel-reading > .eyebrow { font-size: 11px; }
  .drift-page .travel-reading p { max-width: 160px; font-size: 11px; }
  .cinema-bar { gap: var(--s-3); }
  .cinema-bar > span { display: none; }
}
@media (pointer: coarse) {
  .scene-presets button, .trail-behaviour button, .planet-groups button, .drift-page .canvas-tools button, .drift-page .view-toolbar button { min-height: 44px; }
  .drift-page .canvas-tools button { min-width: 44px; }
  .drift-appearance select, .focus-picker select { min-height: 44px; }
}
@media (forced-colors: active) {
  .scene-presets button[aria-pressed=true], .trail-behaviour button[aria-pressed=true], .planet-groups button[aria-pressed=true] { outline: 2px solid Highlight; }
}

/* The reference-video presentation gives the moving scene the whole stage. */
.flight-view .observatory { grid-template-columns: minmax(0, 1fr); }
.flight-view .viewport { grid-column: 1; background: radial-gradient(ellipse at 50% 53%, var(--app-bg), var(--app-bg) 70%); }
.flight-view .playback { grid-column: 1; }
.flight-view .scene-intro { top: 24px; }
.flight-view .scene-intro h1 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -1px; }
.flight-view .scene-intro .eyebrow { margin-bottom: var(--s-3); font-size: 11px; }
.flight-view .scene-intro > p:last-child { font-size: 11px; margin-top: var(--s-3); }
.flight-view .scene-presets { top: 123px; }
.flight-view .scene-badge { top: 38px; inset-inline-end: 160px; bottom: auto; }
.flight-view .journey-metrics { top: 108px; }
.flight-view .galaxy-caption { display: none; }
.flight-view #drift-canvas { mask-image: linear-gradient(180deg, #000 76%, transparent 99%); }
.flight-controls-toggle { position: absolute; top: 25px; inset-inline-end: 24px; z-index: 6; min-height: 40px; padding: var(--s-3) var(--s-5); border: 1px solid var(--accent); border-radius: var(--r-pill); background: var(--panel); color: var(--accent-2); font-size: 12px; }
.flight-view .control-panel { display: none; position: fixed; top: 84px; bottom: 142px; inset-inline-end: 16px; width: 320px; z-index: 25; border: 1px solid var(--border); border-radius: var(--r-lg); background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: 0 18px 60px #000a; }
.flight-view.flight-controls-open .control-panel { display: block; }
#close-flight-controls { color: var(--muted); font-size: 24px; min-width: 32px; min-height: 32px; }
.flight-model-note { position: absolute; bottom: 111px; inset-inline-start: 38px; max-width: 620px; margin: 0; font-size: 11px; color: var(--muted); line-height: 1.5; pointer-events: none; }
.sgr-landmark { position: absolute; inset: 0 auto auto 0; display: grid; gap: var(--s-2); text-align: center; translate: -50% 0; pointer-events: none; color: var(--accent-2); text-shadow: 0 1px 5px #000; }
.sgr-landmark strong { font: 11px var(--font-mono); letter-spacing: 1px; }
.sgr-landmark span { font-size: 11px; color: var(--muted); }
.flight-view .planet-label { font-size: 11px; padding: var(--s-2) var(--s-2); min-height: 24px; line-height: 14px; background: color-mix(in srgb, var(--app-bg) 78%, transparent); }
.flight-view .planet-insight { top: 174px; }
.flight-view.cinema-active .sgr-landmark:not([hidden]) { display: grid; }
.flight-view.cinema-active .flight-model-note:not([hidden]) { display: block; bottom: 76px; inset-inline-start: 24px; }
@media (max-width: 980px) {
  .flight-view .viewport { height: 82svh; min-height: 660px; }
  .flight-view .scene-intro h1 { font-size: 30px; }
  .flight-view .scene-presets { top: 123px; }
  .flight-view .control-panel { top: 72px; bottom: 16px; width: min(360px, calc(100% - 32px)); padding: var(--s-6); }
  .flight-view .journey-metrics { top: auto; bottom: 222px; }
  .flight-view .scene-badge { top: auto; bottom: 193px; inset-inline-end: 24px; }
  .flight-view .planet-insight { top: 170px; }
  .flight-model-note { inset-inline-start: 24px; inset-inline-end: 24px; bottom: 116px; max-width: 440px; font-size: 11px; }
  .flight-view.cinema-active .viewport { min-height: 0; height: 100dvh; }
}
@media (max-width: 560px) {
  .flight-view .scene-intro h1 { font-size: 25px; }
  .flight-view .scene-intro > p:last-child { max-width: 245px; font-size: 11px; }
  .flight-controls-toggle { top: 16px; inset-inline-end: 14px; min-height: 36px; padding: var(--s-3); font-size: 11px; }
  .flight-view .scene-intro { top: 67px; }
  .flight-view .scene-presets { top: 156px; }
  .flight-view .scene-intro .eyebrow { font-size: 11px; }
  .flight-view .planet-insight { top: 200px; max-width: 205px; }
  .flight-view .journey-metrics { display: none; }
  .flight-view .planet-label { font-size: 11px; }
  .sgr-landmark strong { font-size: 11px; }
  .sgr-landmark span { font-size: 11px; }
  .flight-model-note { bottom: 126px; inset-inline-start: 20px; inset-inline-end: 20px; font-size: 11px; max-width: 265px; }
  .flight-view .view-toolbar { bottom: 160px; }
  .flight-view .scene-badge { bottom: 210px; }
  .flight-view.cinema-active .flight-model-note:not([hidden]) { bottom: 80px; }
}
/* The claim check: a verdict column the eye can run down before reading. */
.claim-check th, .claim-check td { vertical-align: top; text-align: start; white-space: normal; }
.claim-check tbody th { font-weight: 400; color: var(--text); min-width: 9em; }
.claim-check td:nth-child(2) { font: 11px var(--font-mono); color: var(--accent-2); white-space: nowrap; }
.claim-check td:nth-child(3) { color: var(--text-soft); line-height: 1.5; }
.journey-metrics #trail-au { font: 11px var(--font-mono); color: var(--muted); }
/* Read-outs at a legible size need their own line boxes. */
.journey-metrics > div > span { line-height: 1.4; }
.journey-metrics strong { line-height: 1.25; }
.journey-metrics { text-align: end; }
/* The read-outs sit on their own plate so the galaxy can pass behind them. */
.journey-metrics { padding: var(--s-4) var(--s-5); border: 1px solid var(--border); border-radius: var(--r-md); background: color-mix(in srgb, var(--app-bg) 78%, transparent); }

/* On a phone the claim table gives way so the dialog never scrolls sideways:
   a verdict that is longer in another language may wrap, and the claim
   column stops insisting on nine ems. */
@media (max-width: 560px) {
  .claim-check tbody th { min-width: 0; }
  .claim-check td:nth-child(2) { white-space: normal; }
  .claim-check th, .claim-check td { overflow-wrap: anywhere; }
}