/* Shares OrbitLab's instrument shell with Solar Drift; geometry has its own ink. */
.gravity-page {
  min-width: 0;
  --space: var(--app-bg);
  --line: var(--border);
  --gravity-warm: var(--history-accent-line);
  background: var(--space);
}
.gravity-page .statusbar { background: var(--app-bg); }
.gravity-page .observatory { grid-template-columns: minmax(0, 1fr) 306px; }
.gravity-page .viewport { background: radial-gradient(ellipse at 51% 53%, var(--panel-2) 0, var(--app-bg) 36%, var(--app-bg) 72%); }
.gravity-page .scene-intro { z-index: 2; }
.gravity-page .scene-intro h1 { font-size: var(--fs-hero); line-height: 1; letter-spacing: -2px; }
.gravity-page .scene-intro h1 em { color: var(--ink); }
.gravity-page .scene-intro > p:last-child { line-height: 1.6; }
.gravity-page .scene-intro .eyebrow { font-size: 11px; }
.gravity-page .scene-badge { font-size: 11px; }
#gravity-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline-offset: -4px; mask-image: linear-gradient(180deg, transparent, #000 22%, #000 66%, transparent 88%); }
#gravity-canvas:active { cursor: grabbing; }
.gravity-page .control-panel { padding: var(--s-6); }
.gravity-page .panel-title { padding-bottom: var(--s-5); }
.control-title { font-size: 12px; }
.body-settings > select { display: block; width: 100%; min-height: 42px; margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink); }
.mass-reading { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-4); }
.mass-reading output { color: var(--gravity-warm); font: 11px var(--font-mono); }
.mass-reading > span { color: var(--muted); font: 11px var(--font-mono); letter-spacing: .7px; }
.gravity-section { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.gravity-section .control-explainer { color: var(--muted); font-size: 11px; line-height: 1.5; margin: var(--s-3) 0 0; }
.gravity-section .range-endpoints { align-items: center; }
.gravity-section .range-endpoints button { font-size: 11px; color: var(--accent); min-height: 24px; }
.flat-toggle, .orbit-camera { display: flex; align-items: center; gap: var(--s-3); font-size: 11px; min-height: 28px; cursor: pointer; color: var(--text-soft); }
.flat-toggle { margin-top: var(--s-3); }
.gravity-page input[type=checkbox] { margin: 0; width: 13px; height: 13px; }
.gravity-section h2 { font-family: var(--font-body); font-size: var(--fs-label); font-weight: 400; }
#focus-body { font-size: 11px; min-height: 24px; color: var(--accent); }
.camera-presets { display: flex; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-2); gap: var(--s-2); margin-block: var(--s-3); }
.camera-presets button { flex: 1; min-height: 30px; font-size: 11px; border-radius: var(--r-xs); color: var(--muted); }
.camera-presets button[aria-pressed=true] { color: var(--ink); background: var(--panel-2); }
#grid-density { background: var(--panel); border: 1px solid var(--line); color: var(--ink); font-size: 11px; padding: var(--s-2); border-radius: var(--r-xs); min-height: 30px; }
.gravity-layers { display: flex; flex-wrap: wrap; gap: var(--s-4); padding-top: var(--s-3); }
.gravity-layers label { font-size: 11px; display: flex; align-items: center; gap: var(--s-2); min-height: 26px; cursor: pointer; color: var(--muted); }
.gravity-page .control-section { margin-bottom: var(--s-5); }
.gravity-page .about-button { padding-top: var(--s-2); }
.reset-lab { margin-top: var(--s-4); color: var(--muted); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; min-height: 24px; }
.field-key { position: absolute; top: 78px; inset-inline-end: 27px; display: grid; gap: var(--s-3); font-size: 11px; color: var(--muted); pointer-events: none; }
.field-key-line { height: 2px; width: 125px; background: linear-gradient(90deg, var(--focus), var(--accent-2), var(--history-accent-line), var(--accent)); }
.field-key small { font: 11px var(--font-mono); letter-spacing: .4px; display: flex; justify-content: space-between; }
.field-key > span:nth-child(2) { grid-row: 1; }
.gravity-readings { position: absolute; inset: auto 38px 44px; display: flex; align-items: center; gap: var(--s-7); pointer-events: none; }
.readings-body { display: flex; gap: var(--s-4); align-items: center; }
#body-marker { height: 12px; width: 12px; border-radius: 50%; background: var(--gravity-warm); box-shadow: 0 0 18px color-mix(in srgb, var(--history-accent-line) 27%, transparent); }
.gravity-readings .eyebrow { display: block; color: var(--muted); font-size: 11px; letter-spacing: 1px; white-space: nowrap; }
.gravity-readings strong { display: block; font: 23px var(--font-display); margin-top: var(--s-3); }
.gravity-readings p { margin: var(--s-3) 0 0; font: 23px var(--font-mono); letter-spacing: -1px; }
.gravity-readings p > span { font: 11px var(--font-body); color: var(--muted); letter-spacing: 0; }
.gravity-readings > button { pointer-events: auto; margin-inline-start: auto; color: var(--accent); min-width: 36px; min-height: 36px; align-self: end; }
.field-caption { position: absolute; bottom: 14px; inset-inline-start: 38px; inset-inline-end: 24px; margin: 0; font-size: 11px; line-height: 1.4; color: var(--muted); pointer-events: none; }
.gravity-page .view-toolbar, .gravity-page .canvas-tools { bottom: 135px; }
.gravity-page .planet-label { font-size: 11px; background: color-mix(in srgb, var(--panel) 90%, transparent); }
.gravity-page .playback, .gravity-page .speed-control select { background: var(--panel); }
.gravity-page .speed-control { min-width: 180px; }
.gravity-table-wrap { overflow-x: auto; }
.gravity-page dialog { background: var(--panel-2); }
.gravity-page .about-button:focus-visible, .gravity-page .reset-lab:focus-visible { outline-offset: 2px; }
.gravity-page .render-error { z-index: 5; }
@media (min-width: 981px) and (max-height: 59.375em) {
  .gravity-page .control-panel { padding: var(--s-5) var(--s-6); }
  .gravity-page .control-section { margin-bottom: var(--s-4); }
  .gravity-section { padding-top: var(--s-4); }
  .gravity-page .panel-title { padding-bottom: var(--s-4); }
  .gravity-page .control-panel .eyebrow { font-size: 11px; }
}
@media (max-width: 1365px) {
  .gravity-page .observatory { grid-template-columns: minmax(0, 1fr) 278px; }
  .gravity-page .control-panel { padding-inline: var(--s-5); }
  .gravity-page .scene-intro h1 { font-size: 48px; }
  .gravity-readings { inset-inline-start: 25px; inset-inline-end: 25px; gap: var(--s-6); }
  .gravity-readings p { font-size: 20px; }
  .field-caption { inset-inline-start: 25px; }
  .gravity-page .scene-badge { top: 32px; bottom: auto; }
}
@media (max-width: 980px) {
  .gravity-page .viewport { height: 80svh; min-height: 590px; }
  .gravity-page .scene-intro h1 { font-size: 48px; }
  .gravity-page .scene-intro { top: 25px; }
  .gravity-page .scene-intro .eyebrow { font-size: 11px; letter-spacing: 1px; }
  .gravity-page .scene-intro > p:last-child { font-size: 11px; }
  .gravity-page .scene-badge { top: auto; bottom: 188px; inset-inline-end: 21px; font-size: 11px; }
  .field-key { top: 34px; inset-inline-end: 23px; }
  .gravity-readings { inset-inline-start: 24px; inset-inline-end: 24px; bottom: 50px; gap: var(--s-5); justify-content: space-between; }
  .gravity-readings .eyebrow { font-size: 11px; letter-spacing: .4px; }
  .gravity-readings strong { font-size: 19px; }
  .gravity-readings p { font-size: 17px; }
  .gravity-readings > button { display: none; }
  .field-caption { inset-inline-start: 24px; inset-inline-end: 24px; bottom: 14px; font-size: 11px; max-width: 360px; }
  .gravity-page .view-toolbar, .gravity-page .canvas-tools { bottom: 126px; }
  .gravity-page .control-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-6); padding: var(--s-6); }
  .gravity-page .panel-title { grid-column: 1/-1; }
  .gravity-page .control-section { margin-bottom: var(--s-6); }
  .gravity-page .body-settings { border-top: 1px solid var(--line); padding-top: var(--s-5); }
  .gravity-page .reset-lab, .gravity-page .about-button { grid-column: 1/-1; }
  .gravity-page .reset-lab { justify-self: start; }
  .gravity-page .body-settings > select { min-height: 44px; }
}
@media (max-width: 560px) {
  #gravity-canvas { mask-image: linear-gradient(180deg, transparent 14%, #000 34%, #000 63%, transparent 81%); }
  .gravity-page .masthead { padding-inline: var(--s-4); }
  .gravity-page .scene-intro h1 { font-size: 44px; }
  .gravity-page .scene-intro > p:last-child { max-width: 210px; }
  .field-key { top: auto; bottom: 190px; inset-inline-start: 24px; inset-inline-end: auto; font-size: 11px; }
  .field-key-line { width: 98px; }
  .field-key small { font-size: 11px; }
  .gravity-page .control-panel { display: block; }
  .gravity-readings { gap: var(--s-3); }
  .gravity-readings .readings-body { gap: var(--s-3); }
  .gravity-readings p { font-size: 16px; }
  .gravity-readings p > span { font-size: 11px; }
  .gravity-readings strong { font-size: 18px; }
  #body-marker { width: 7px; height: 7px; }
  .gravity-page .planet-label { font-size: 11px; }
  .gravity-page .view-toolbar button { font-size: 11px; }
}
@media (pointer: coarse) {
  .gravity-page .canvas-tools button, .gravity-page .camera-presets button, .gravity-page .view-toolbar button { min-height: 44px; }
  .gravity-page .canvas-tools button { min-width: 44px; }
  .gravity-page .flat-toggle, .gravity-page .orbit-camera, .gravity-page .gravity-layers label, .gravity-page .reset-lab { min-height: 44px; }
}
/* Real counts for the drawing, set as an instrument read-out beside its key. */
.field-stats { margin: var(--s-3) 0 0; display: grid; gap: var(--s-2); font: 11px var(--font-mono); letter-spacing: .6px; }
.field-stats > div { display: flex; justify-content: space-between; gap: var(--s-4); }
.field-stats dt { color: var(--muted); }
.field-stats dd { margin: 0; color: var(--accent-2); }
.gravity-readings output { color: var(--accent-2); }
.gravity-readings { flex-wrap: wrap; row-gap: var(--s-4); }
@media (max-width: 1365px) { .gravity-readings .reading-extra { display: none; } }
@media (max-width: 560px) { .field-stats { display: none; } }
@media (max-width: 560px) {
  /* Three read-outs wrap onto two rows on a phone; lift the controls clear. */
  .gravity-page .view-toolbar, .gravity-page .canvas-tools { bottom: 196px; }
  .field-key { bottom: 258px; }
  .gravity-page .scene-badge { bottom: 262px; }
  .gravity-readings { bottom: 44px; row-gap: var(--s-3); }
}