/* --- Orbits & Gravity simulation page styles (loaded after simulation_styles.css) --- */

.orbits-sim {
    --orb-chip-w: 64px;                                 /* body chips in the palette */
    --orb-chip-h: 48px;
    --orb-cols: 2;                                      /* chips per row in the column beside the canvas */
    /* tool column beside the canvas: chips, 4px gaps, padding and border */
    --orb-side-w: calc(var(--orb-cols) * (var(--orb-chip-w) + 4px) + 10px);
    --orb-side-gap: 8px;
    --orb-force: #f2849e;
    --orb-velocity: #7bd0c1;
}

html:not(.dark-mode) .orbits-sim {
    --orb-force: #e0607e;
    --orb-velocity: #2a9d8f;
}

@media (pointer: coarse) {
    .orbits-sim {
        --orb-chip-h: 54px;
    }
}

/* ---------- Palette of bodies ----------
   Portrait / narrow: under the canvas, the chips in rows, then the hint and the fit button.
   Landscape: a column beside the canvas (see the media query further down), so the canvas keeps
   the full height of the screen. */
.orb-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-top: 0.5em;
    padding: 5px 6px;
    box-sizing: border-box;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--sim-radius, 6px);
    font-size: 0.85em;
    line-height: 1.3;
}

.orb-toolbar-label {
    display: none;
    margin: 0;
    font-size: 0.78em;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.75;
}

.orb-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1 1 100%;
}

/* Groups of chips (stars, dead stars, planets, small bodies): headed in the column beside the canvas;
   under it the chips simply flow on, in the same order. */
.orb-group,
.orb-group-chips {
    display: contents;
}

.orb-group-label {
    display: none;
    margin: 0;
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}

.orb-toolbar button {
    -webkit-appearance: none;
    appearance: none;
    height: auto;
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text) !important;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--color-border);
    background-color: var(--color-bg);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .orb-toolbar button:hover {
        box-shadow: inset 0 0 0 1px var(--color-accent);
    }
}

.orb-toolbar button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.orb-toolbar button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* A body chip: a disc in the body's colour over its name. Drag it onto the canvas (a click or tap
   adds it at a free spot). */
.orb-toolbar .orb-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1 1 var(--orb-chip-w);
    min-width: 0;
    max-width: 84px;
    height: var(--orb-chip-h);
    padding: 3px 2px 2px;
    overflow: hidden;
    cursor: grab;
    touch-action: none;             /* a drag from a chip carries the body, it doesn't scroll the page */
    -webkit-user-select: none;
    user-select: none;
}

.orb-toolbar .orb-chip.is-dragging {
    cursor: grabbing;
    box-shadow: inset 0 0 0 2px var(--color-accent);
    background-color: var(--color-bg-button-active-overlay);
}

.orb-chip-disc {
    display: block;
    flex: 0 0 auto;
    border-radius: 50%;
}

html:not(.dark-mode) .orb-chip-disc:not(.is-custom) {
    outline: 1px solid rgba(0, 0, 0, 0.22);
}

.orb-chip-disc.is-custom {
    box-sizing: border-box;
    border: 2px dashed var(--color-text);
    opacity: 0.8;
    position: relative;
}

.orb-chip-disc.is-custom::after {
    content: '+';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.orb-chip-name {
    display: block;
    max-width: 100%;
    font-size: 0.82em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orb-toolbar .orb-fit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    order: 3;
    flex: 0 0 auto;
    height: 36px;
    padding: 0 0.8em;
    white-space: nowrap;
}

.orb-hint {
    order: 2;
    flex: 1 1 0%;
    min-width: 0;
    margin: 0;
    padding: 0 0.15em;
    font-size: 0.95em;
    line-height: 1.35;
    opacity: 0.85;
    /* two fixed lines, so a longer hint never changes the toolbar's height */
    height: 2.7em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.orb-hint strong {
    font-weight: 700;
}

/* A message too long for the line: "More" at its end, and a tap or Enter opens it out (it closes
   again with a second tap, or when the next message comes) */
.orb-hint.is-cut,
.orb-hint.is-open {
    position: relative;
    cursor: pointer;
}

.orb-hint.is-cut::after {
    content: "More \25BE";
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 1.6em;
    font-weight: 700;
    color: var(--color-accent);
    background: linear-gradient(to right, transparent, var(--color-bg-alt) 1.4em);
}

.orb-hint.is-open {
    height: auto;
    max-height: none;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

/* (spilling over what is below it: on top, on the toolbar's own background) */
.orb-hint.is-spilling {
    z-index: 30;
    margin-left: -6px;
    margin-right: -6px;
    padding: 0 6px 6px;
    background-color: var(--color-bg-alt);
    border-radius: 0 0 var(--sim-radius, 6px) var(--sim-radius, 6px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.orb-hint.is-open::after {
    content: " Less \25B4";
    font-weight: 700;
    color: var(--color-accent);
}

/* (the accent pink is too pale for text on the light theme's grey) */
html:not(.dark-mode) .orb-hint.is-cut::after,
html:not(.dark-mode) .orb-hint.is-open::after {
    color: #b03a5b;
}

.orb-hint:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* The dragged body follows the pointer outside the canvas too. */
.orb-drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9500;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Phones: hide the "Fit view" text, keep the icon. */
@media (max-width: 480px) {
    .orb-fit-text {
        display: none;
    }

    .orb-toolbar .orb-fit {
        width: 40px;
        padding: 0;
    }

    .orb-toolbar .orb-chip {
        max-width: none;
    }
}

/* Phones held upright: the chips in one row that scrolls sideways, so the canvas gets the room three
   or four rows of chips took (the shared layout fits the canvas to what is left of the screen). A
   sideways swipe scrolls the row; a drag up carries a body out onto the canvas (see onChipMove), and a
   tap still adds one. The row fades at an edge with more chips beyond it (at-start and at-end are set
   by paletteEdges in orbits_core.js). In a mission the chips can't be used, so they step aside. */
@media (max-width: 600px) and (orientation: portrait) {
    .orbits-sim .orb-palette {
        --orb-fade-l: 16px;
        --orb-fade-r: 36px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--orb-fade-l), #000 calc(100% - var(--orb-fade-r)), transparent);
        mask-image: linear-gradient(to right, transparent, #000 var(--orb-fade-l), #000 calc(100% - var(--orb-fade-r)), transparent);
    }

    .orbits-sim .orb-palette::-webkit-scrollbar {
        display: none;
    }

    .orbits-sim .orb-palette.at-start {
        --orb-fade-l: 0px;
    }

    .orbits-sim .orb-palette.at-end {
        --orb-fade-r: 0px;
    }

    .orbits-sim .orb-toolbar .orb-chip {
        flex: 0 0 72px;
        max-width: none;
        scroll-snap-align: start;
        touch-action: pan-x;
    }

    /* (a little more space between the groups: stars, dead stars, planets and moons, small bodies) */
    .orbits-sim .orb-group + .orb-group .orb-group-chips > .orb-chip:first-child {
        margin-left: 8px;
    }

    .orbits-sim.orb-mission-on .orb-palette {
        display: none;
    }
}

/* Tablets held upright: the chips in even columns, so a short last row lines up with the rows above
   (as flowing chips its few stretched wider than the rest) */
@media (min-width: 601px) and (orientation: portrait) {
    .orbits-sim .orb-palette {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--orb-chip-w), 1fr));
    }

    .orbits-sim .orb-toolbar .orb-chip {
        max-width: none;
    }
}

/* ---------- Landscape: the palette in a column beside the canvas ----------
   The column has a fixed width, so the display container is made that much wider than the
   canvas (which the shared layout sizes from the screen height). */
@media (orientation: landscape) and (min-width: 640px) {
    .orbits-sim {
        --orb-chip-w: 80px;                             /* room for "Neutron star" */
        --orb-chip-h: 38px;
    }

    .orbits-sim .simulation-display-container {
        display: grid;
        grid-template-columns: var(--orb-side-w) minmax(0, 1fr);
        grid-template-areas: "tools canvas" "info info";
        column-gap: var(--orb-side-gap);
        width: min(100%, calc(var(--sim-canvas-max-h) * (var(--aspect-ratio, 16 / 10)) + 2px + var(--orb-side-w) + var(--orb-side-gap)));
    }

    .orbits-sim .sim-canvas-wrapper {
        grid-area: canvas;
        min-width: 0;
    }

    .orbits-sim .sim-info-bar {
        grid-area: info;
    }

    /* As tall as the canvas beside it, never taller. The "Fit view" button and the hint (which shows
       the speed while a velocity is aimed) always show; if the chips need more room than is left they
       scroll, with soft shadows at the edges that show there is more. */
    .orb-toolbar {
        grid-area: tools;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 0;
        min-height: 0;
        contain: size;
        overflow: hidden;
    }

    .orb-toolbar-label {
        display: block;
        flex: 0 0 auto;
        padding: 2px 2px 0;
    }

    .orb-palette {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 7px;
        flex: 0 1 auto;
        min-height: 0;
        margin: -2px -2px 0;
        padding: 2px 2px 4px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        background:
            linear-gradient(var(--color-bg-alt) 40%, transparent) center top / 100% 22px no-repeat local,
            linear-gradient(transparent, var(--color-bg-alt) 60%) center bottom / 100% 22px no-repeat local,
            radial-gradient(farthest-side at 50% 0, rgba(128, 128, 128, 0.55), transparent) center top / 100% 9px no-repeat scroll,
            radial-gradient(farthest-side at 50% 100%, rgba(128, 128, 128, 0.55), transparent) center bottom / 100% 9px no-repeat scroll;
        background-color: var(--color-bg-alt);
    }

    .orb-group {
        display: block;
    }

    .orb-group-label {
        display: block;
        padding: 0 2px 3px;
    }

    .orb-group-chips {
        display: grid;
        grid-template-columns: repeat(var(--orb-cols), minmax(0, 1fr));
        gap: 4px;
    }

    .orb-toolbar .orb-chip {
        max-width: none;
        width: 100%;
        gap: 3px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .orb-toolbar .orb-chip-disc {
        max-width: 16px;
        max-height: 16px;
    }

    /* The column has a fixed width but the page text grows on wide screens: cap the names' size
       so the longest ("Red dwarf") keeps clear of its button's edges */
    .orb-chip-name {
        font-size: min(0.8em, 12px);
    }

    .orb-toolbar .orb-fit {
        order: 0;
        flex: 0 0 auto;
        width: 100%;
    }

    /* Room for five lines, so a longer hint never moves the chips */
    .orb-hint {
        order: 0;
        flex: 0 0 auto;
        height: 7.1em;
        display: block;
        font-size: 0.88em;
        line-height: 1.4;
        padding: 0 2px;
    }

    /* Phones held sideways: no room for the hint; slim chips (disc beside the name) so the whole
       palette fits beside the canvas */
    @media (max-height: 540px) {
        .orb-hint,
        .orb-toolbar-label,
        .orb-subject-around {
            display: none;
        }

        .orbits-sim {
            --orb-chip-w: 76px;
        }

        .orb-toolbar {
            gap: 6px;
        }

        /* the groups simply follow on, a little apart */
        .orb-group-label {
            display: none;
        }

        .orb-palette {
            gap: 6px;
        }

        .orb-toolbar .orb-chip {
            gap: 2px;
            height: 34px;
            padding: 2px 3px 1px;
        }

        .orb-toolbar .orb-chip .orb-chip-name {
            font-size: 0.7em;
        }

        .orb-toolbar .orb-chip .orb-chip-disc {
            width: 10px !important;
            height: 10px !important;
        }

        .orb-chip-disc.is-custom {
            border-width: 1.5px;
        }

        .orb-chip-disc.is-custom::after {
            font-size: 9px;
        }

        .orb-toolbar .orb-fit {
            height: 32px;
        }
    }

    /* Fullscreen: the grid fills the space above the fixed info bar */
    body.sim-fullscreen-active .orbits-sim .simulation-display-container {
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: "tools canvas";
        width: 100%;
    }

    body.sim-fullscreen-active .orbits-sim .sim-canvas-wrapper {
        height: 100%;
    }
}

/* Fullscreen: space has no shape, so the canvas fills all the room it is given (the simulation
   draws at any size) rather than keeping its aspect ratio. */
body.sim-fullscreen-active .orbits-sim .sim-aspect-ratio-box {
    width: 100%;
    height: 100%;
}

/* ---------- Info bar: which body the readouts are for ---------- */
.orb-subject {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    min-width: 0;
    max-width: 15em;
    padding: 0.3em 0.2em 0.3em 0.1em;
    font-size: 0.8em;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    color: var(--color-text);
}

.orb-subject-dot {
    align-self: center;
    flex: 0 0 auto;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background: #7ecaf6;
}

/* The name keeps its room (up to a point); "around the centre of mass" gives way */
.orb-subject-name {
    flex: 0 0 auto;
    max-width: 8.5em;
    font-weight: 700;
    color: var(--sim-value-color);
    overflow: hidden;
    text-overflow: ellipsis;
}

.orb-subject-around {
    flex: 0 100 auto;
    min-width: 0;
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pauseBtn[aria-pressed="true"] {
    color: var(--color-accent) !important;
    background-color: var(--color-bg-button-active-overlay);
}

/* ---------- On-canvas overlays ---------- */
.sim-canvas-wrapper {
    position: relative;
}

/* "Viewed from Earth  x": shown while the view is locked on a body. */
.orb-frame-chip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    max-width: calc(100% - 16px);
    height: auto;
    min-height: 32px;
    margin: 0;
    padding: 0.3em 0.75em;
    font-size: 0.78em;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--color-text) !important;
    background-color: var(--color-bg-header-nav);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--color-border);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    -webkit-tap-highlight-color: transparent;
}

.orb-frame-chip[hidden] {
    display: none;
}

.orb-frame-chip strong {
    font-weight: 700;
}

.orb-frame-chip .icon {
    color: var(--color-accent);
}

.orb-frame-chip .orb-frame-chip-x {
    color: var(--color-text);
    opacity: 0.7;
}

@media (hover: hover) {
    .orb-frame-chip:hover {
        box-shadow: inset 0 0 0 1px var(--color-accent);
    }

    .orb-frame-chip:hover .orb-frame-chip-x {
        color: var(--color-accent);
        opacity: 1;
    }
}

@media (pointer: coarse) {
    .orb-frame-chip {
        min-height: 40px;
    }
}

/* ---------- Body popover (double-click or double-tap a body) ---------- */
.orb-popover {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 30;
    box-sizing: border-box;
    width: 272px;
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 10px 10px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--color-text);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.orb-popover[hidden] {
    display: none;
}

/* Phones in portrait: a sheet along the bottom of the screen, like the settings */
.orb-popover.is-sheet {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9100;
    width: auto;
    max-width: 40rem;
    max-height: 62vh;
    margin: 0 auto;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    font-size: 15px;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    box-shadow: var(--sim-sheet-shadow);
}

/* Phones held sideways: a sheet down one side of the screen, the height of the screen, over the palette
   (or over the info column when the body is on the left: see positionPopover in orbits_core.js), so it
   never sits across the middle of the canvas or half over a column */
.orb-popover.is-side {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 10001;                     /* (over the page header's buttons, under the site menu) */
    width: min(304px, 46vw);
    max-width: none;
    max-height: none;
    padding: 8px calc(12px + env(safe-area-inset-right, 0px)) 10px 12px;
    border-width: 0 0 0 1px;
    border-radius: 14px 0 0 14px;
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.35);
}

.orb-popover.is-side.on-left {
    right: auto;
    left: 0;
    padding: 8px 12px 10px calc(12px + env(safe-area-inset-left, 0px));
    border-width: 0 1px 0 0;
    border-radius: 0 14px 14px 0;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.35);
}

.orb-popover *,
.orb-popover *::before,
.orb-popover *::after {
    box-sizing: border-box;
}

.orb-pop-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.orb-pop-dot {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.orb-popover input.orb-pop-name {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 2px;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--color-text);
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
}

.orb-popover input.orb-pop-name:hover {
    border-bottom-color: var(--color-border);
}

.orb-popover input.orb-pop-name:focus {
    border-bottom-color: var(--color-accent);
    box-shadow: inset 0 -1px 0 0 var(--color-accent);
}

.orb-popover button {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    height: 34px;
    margin: 0;
    padding: 0 0.7em;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--color-text) !important;
    background-color: var(--color-bg);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--color-border);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .orb-popover button:hover {
        box-shadow: inset 0 0 0 1px var(--color-accent);
    }
}

.orb-popover button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/* (dark text on the accent, as on the missions' Start: white on it is too faint to read, 2.5:1) */
.orb-popover button[aria-pressed="true"] {
    color: #16181c !important;
    background-color: var(--color-accent);
    box-shadow: none;
}

.orb-popover .orb-pop-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.orb-pop-actions {
    display: flex;
    gap: 6px;
    margin: 6px 0 4px;
}

.orb-pop-actions button {
    flex: 1 1 auto;
}

.orb-pop-actions .orb-pop-delete {
    flex: 0 0 34px;
    padding: 0;
}

@media (hover: hover) {
    .orb-pop-actions .orb-pop-delete:hover {
        color: #ff5f5f !important;
        box-shadow: inset 0 0 0 1px #ff5f5f;
    }
}

.orb-pop-fields label {
    display: block;
    margin: 6px 0 0;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-text);
}

.orb-pop-val {
    font-weight: 700;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.orb-pop-note {
    margin: -2px 0 0;
    font-size: 0.78em;
    line-height: 1.3;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.orb-pop-info {
    margin: 8px 0 0;
    padding-top: 7px;
    border-top: 1px solid var(--color-border);
    font-size: 0.8em;
    line-height: 1.45;
    opacity: 0.9;
    font-variant-numeric: tabular-nums;
}

.orb-pop-info strong {
    font-weight: 700;
}

.orb-pop-colours {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px;
    margin-top: 10px;
}

.orb-popover .orb-swatch {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.orb-popover.is-sheet .orb-swatch {
    width: 26px;
    height: 26px;
}

.orb-popover .orb-swatch[aria-checked="true"] {
    box-shadow: 0 0 0 2px var(--color-bg-alt), 0 0 0 4px var(--color-accent);
}

/* Sliders in the popover (the shared slider styles only cover the settings panel). */
.orb-popover input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 24px;
    margin: 0;
    padding: 0;
    background: transparent;
    outline: none;
    cursor: pointer;
}

.orb-popover input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--sim-track);
}

.orb-popover input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-bg-alt);
    box-shadow: 0 0 0 1px var(--color-accent);
}

.orb-popover input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--sim-track);
}

.orb-popover input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-bg-alt);
    box-shadow: 0 0 0 1px var(--color-accent);
}

/* A black hole's size is set by its mass: its slider is shown but can't be moved */
.orb-popover input[type="range"]:disabled {
    opacity: 0.35;
    cursor: default;
}

.orb-popover input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px var(--color-bg-alt), 0 0 0 4px var(--color-accent);
}

@media (pointer: coarse) {
    .orb-popover input[type="range"] {
        height: 32px;
    }

    .orb-popover input[type="range"]::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
        margin-top: -9px;
    }

    .orb-popover button {
        height: 38px;
    }

    /* (a finger's worth: the close, zoom and delete buttons, and round the colour swatches, whose
       look stays as it is) */
    .orb-popover .orb-pop-close {
        width: 40px;
        height: 40px;
        margin-right: -6px;
    }

    .orb-popover .orb-pop-actions .orb-pop-zoom,
    .orb-popover .orb-pop-actions .orb-pop-delete {
        flex-basis: 40px;
    }

    .orb-popover .orb-swatch {
        position: relative;
        overflow: visible;
    }

    .orb-popover .orb-swatch::after {
        content: "";
        position: absolute;
        inset: -8px -4px;
    }
}

/* ---------- Controls panel ---------- */
.sim-controls-content label .orb-sub {
    margin-left: 0.15em;
    opacity: 0.75;
    font-weight: 400;
    color: var(--color-text);
}

.sim-controls-content .orb-note {
    margin-top: -0.35em;
    font-size: 0.8em;
    opacity: 0.75;
}

/* Arrow keys beside the "Show" switches */
.orb-key {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 1.3em;
    height: 2px;
    margin-right: 0.1em;
    border-radius: 1px;
}

.orb-key::after {
    content: '';
    position: absolute;
    right: -2px;
    top: -4px;
    border-left: 6px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.orb-key-force {
    background: var(--orb-force);
    color: var(--orb-force);
}

.orb-key-velocity {
    background: var(--orb-velocity);
    color: var(--orb-velocity);
}

/* Canvas cursor hints */
#simulationCanvas.orb-can-grab {
    cursor: grab;
}

#simulationCanvas.orb-grabbing {
    cursor: grabbing;
}

#simulationCanvas.orb-can-aim {
    cursor: crosshair;
}

/* ---------- Time controls and the period readout ---------- */
/* The step button only works while paused: dimmed (not hidden, so the buttons beside it never move
   under a finger) while the simulation runs. */
#stepBtn:disabled {
    opacity: 0.35;
    cursor: default;
}

@media (hover: hover) {
    #stepBtn:disabled:hover {
        color: var(--color-text) !important;
        background-color: transparent;
    }
}

/* A tick after the period once it has been measured over a full orbit */
.orb-period-mark {
    margin-left: 0.35em;
    font-size: 0.8em;
    color: var(--color-accent);
}

.orb-period-mark[hidden] {
    display: none;
}

/* The eccentricity only where it has a place of its own: the spare cell beside the period in the
   phones' two-column grid. Elsewhere it would push the readouts onto another row (it is in the
   period's tooltip, the Kepler's 1st law card and the eccentricity slider). */
.orb-ecc-box {
    display: none;
}

@media screen and (max-width: 600px) {
    .orb-ecc-box {
        display: block;
    }
}

/* ---------- Trajectory editor: the body's menu in tabs (Body, Velocity, Orbit, Gravity) ----------
   Typed values with their units and -/+ steppers, the way round, pushes and the step size. Each tab
   is as tall as it needs: the menu opens on Body, the shortest, so it covers as little of the canvas
   (or, on a phone, of the screen) as it can; beside a body a taller tab keeps the menu's top still. */
.orb-popover {
    width: 304px;
}

.orb-pop-tabs {
    display: flex;
    gap: 2px;
    margin: 4px 0 2px;
    border-bottom: 1px solid var(--color-border);
}

.orb-popover .orb-pop-tabs button {
    flex: 1 1 0;
    height: 32px;
    padding: 0 0.4em;
    font-size: 0.88em;
    background: transparent;
    border-radius: 4px 4px 0 0;
    box-shadow: none;
    opacity: 0.75;
}

.orb-popover .orb-pop-tabs button[aria-selected="true"] {
    font-weight: 700;
    opacity: 1;
    box-shadow: inset 0 -2px 0 0 var(--color-accent);
}

@media (hover: hover) {
    .orb-popover .orb-pop-tabs button:hover {
        opacity: 1;
        box-shadow: inset 0 -2px 0 0 var(--color-border);
    }

    .orb-popover .orb-pop-tabs button[aria-selected="true"]:hover {
        box-shadow: inset 0 -2px 0 0 var(--color-accent);
    }
}

.orb-pop-panels {
    display: grid;
}

.orb-pop-panel {
    grid-area: 1 / 1;
    min-width: 0;
}

.orb-pop-panel[hidden] {
    display: none;
}

/* A row: a label on the left, its control on the right */
.orb-field,
.orb-pop-step {
    display: grid;
    grid-template-columns: 5.4em minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.orb-popover .orb-field-label {
    display: block;
    margin: 0;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
}

.orb-field-sub {
    display: block;
    font-size: 0.8em;
    opacity: 0.7;
}

.orb-field-sub:empty {
    display: none;
}

/* - [ value unit ] + */
.orb-spin {
    display: flex;
    align-items: stretch;
    height: 34px;
    min-width: 0;
    background-color: var(--color-bg);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.orb-spin:focus-within {
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.orb-popover .orb-spin .orb-spin-btn {
    flex: 0 0 32px;
    width: 32px;
    height: auto;
    padding: 0;
    font-size: 0.75em;
    background: transparent;
    box-shadow: none;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

@media (hover: hover) {
    .orb-popover .orb-spin .orb-spin-btn:hover {
        color: var(--color-accent) !important;
        box-shadow: none;
    }
}

.orb-popover input.orb-spin-input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0 4px 0 0;
    font-size: 1em;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.orb-popover input.orb-spin-input:focus {
    box-shadow: none;
}

.orb-popover input.orb-spin-input::placeholder {
    font-weight: 400;
    color: var(--color-text);
    opacity: 0.55;
}

.orb-popover input.orb-spin-input:disabled,
.orb-popover .orb-spin-btn:disabled {
    opacity: 0.35;
}

.orb-spin:has(input[aria-invalid="true"]) {
    box-shadow: inset 0 0 0 2px #ff5f5f;
}

.orb-spin-unit {
    align-self: center;
    flex: 0 0 auto;
    min-width: 1.4em;
    padding-right: 2px;
    font-size: 0.85em;
    opacity: 0.75;
}

/* Joined buttons: the way round, the step size */
.orb-seg,
.orb-push {
    display: flex;
    gap: 3px;
    min-width: 0;
}

.orb-popover .orb-seg button,
.orb-popover .orb-push button {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 0.3em;
    font-size: 0.82em;
}

.orb-popover .orb-push button {
    gap: 0.2em;
    padding: 0 2px;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* (the shorter words give the longer ones a little room) */
.orb-popover .orb-push button[data-push="in"],
.orb-popover .orb-push button[data-push="out"] {
    flex-grow: 0.8;
}

.orb-popover .orb-push .icon {
    font-size: 1.2em;
    color: var(--color-accent);
}

.orb-popover .orb-seg button:disabled,
.orb-popover .orb-push button:disabled {
    opacity: 0.35;
}

/* The speed slider sits under the typed speed */
.orb-pop-panel > input[type="range"] {
    margin-top: 2px;
}

.orb-pop-panel .orb-pop-note {
    margin: 1px 0 0;
}

.orb-orbit-shape {
    margin-top: 8px !important;
}

.orb-pop-step {
    padding-top: 7px;
    margin-top: 8px;
    border-top: 1px solid var(--color-border);
}

/* (the Body and Gravity tabs have nothing to step) */
.orb-pop-step.is-idle {
    display: none;
}

/* The arrow keys only matter with a keyboard */
@media (hover: none), (pointer: coarse) {
    .orb-keys-note {
        display: none;
    }
}

/* Phones (a sheet) and touch screens: bigger targets */
@media (pointer: coarse) {
    .orb-spin {
        height: 40px;
    }

    .orb-popover .orb-spin .orb-spin-btn {
        flex-basis: 40px;
        width: 40px;
    }

    .orb-popover .orb-pop-tabs button {
        height: 38px;
    }
}

.orb-popover.is-sheet .orb-field,
.orb-popover.is-sheet .orb-pop-step {
    grid-template-columns: 6em minmax(0, 1fr);
}

/* Phones held sideways: a little tighter, so more of it fits beside the canvas (the side sheet, which
   scrolls the height of the screen, keeps the touch-sized steppers and tabs) */
@media (orientation: landscape) and (max-height: 540px) {
    .orb-popover:not(.is-sheet) {
        padding-top: 4px;
        padding-bottom: 6px;
    }

    .orb-popover:not(.is-sheet) .orb-field {
        margin-top: 4px;
    }

    .orb-popover:not(.is-sheet):not(.is-side) .orb-spin {
        height: 34px;
    }

    .orb-popover:not(.is-sheet):not(.is-side) .orb-pop-tabs button {
        height: 32px;
    }

    .orb-popover:not(.is-sheet) .orb-pop-actions {
        margin: 3px 0 2px;
    }
}

/* The stats bar's Edit button, beside the chosen body's name (the row centred on it) */
.orb-subject {
    align-items: center;
    max-width: 21em;
}

#statSubject .orb-subject-edit {
    -webkit-appearance: none;
    appearance: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    flex: 0 0 auto;
    height: 26px;
    margin: 0 0 0 0.2em;
    padding: 0 0.6em;
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text) !important;
    background-color: var(--color-bg);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--color-border);
    -webkit-tap-highlight-color: transparent;
}

#statSubject .orb-subject-edit .icon {
    color: var(--color-accent);
}

#statSubject .orb-subject-edit[aria-expanded="true"] {
    background-color: var(--color-bg-button-active-overlay);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

@media (hover: hover) {
    #statSubject .orb-subject-edit:hover {
        box-shadow: inset 0 0 0 1px var(--color-accent);
    }
}

#statSubject .orb-subject-edit:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

@media (pointer: coarse) {
    #statSubject .orb-subject-edit {
        height: 32px;
        padding: 0 0.8em;
    }
}

/* The settings' "Orbit of ..." group: its period and distances, and a way into the menu's Orbit tab */
.sim-controls-content .orb-orbit-facts:empty {
    display: none;
}

.sim-controls-content .orb-edit-orbit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
    height: 34px;
    margin: 0.1em 0 0;
    padding: 0 0.8em;
    font-size: 0.85em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    background-color: var(--color-bg);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.sim-controls-content .orb-edit-orbit .icon {
    color: var(--color-accent);
}

@media (hover: hover) {
    .sim-controls-content .orb-edit-orbit:hover {
        box-shadow: inset 0 0 0 1px var(--color-accent);
    }
}

/* ---------- Undo, redo and "run again" ----------
   Undo and redo sit beside "Fit view": icons at the end of the hint's row under the canvas, two
   labelled buttons in the column beside it. "Run again" is in the info bar, next to Restart. */
.orb-history {
    display: flex;
    gap: 6px;
    order: 3;
    flex: 0 0 auto;
}

.orb-toolbar .orb-history-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    width: 40px;
    height: 36px;
    padding: 0;
    white-space: nowrap;
}

.orb-history-text {
    display: none;
}

/* A greyed-out button still shows where it is */
.sim-info-actions .orb-rewind:disabled {
    opacity: 0.35;
}

/* Narrow screens: the buttons leave the hint less width, so it gets a third line */
@media (max-width: 600px) {
    .orb-hint {
        height: 4.05em;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

@media (orientation: landscape) and (min-width: 640px) {
    .orb-history {
        order: 0;
    }

    .orb-toolbar .orb-history-btn {
        flex: 1 1 0%;
        width: auto;
    }

    .orb-history-text {
        display: inline;
    }

    @media (max-height: 540px) {
        .orb-toolbar .orb-history-btn {
            height: 32px;
        }
    }
}

/* ---------- The info bar and the tool column with every control in ----------
   Info bar on wider screens: with the period and the Edit button the readouts no longer fit on one
   line beside the buttons, so the chosen body heads the bar on a line of its own (as on phones) and
   the five readouts follow on the next. */
@media screen and (min-width: 601px) {
    .orbits-sim .stats-container {
        flex-wrap: wrap;
    }

    .orbits-sim .stats-container > .orb-subject {
        flex: 1 0 100%;
        max-width: none;
    }
}

/* Desktop: the buttons sit at the end of the chosen body's row, which has room to spare, so the five
   readouts have the bar's whole width on the row below and stay on one row, even with the settings
   docked beside the canvas (at 1440 x 900 the buttons beside both rows pushed Period onto a row of
   its own). The row keeps the buttons' height, and a long name gives way before reaching them. */
@media screen and (min-width: 900px) and (min-height: 541px) and (pointer: fine) {
    /* (fullscreen's bar is fixed, which places the buttons just as well) */
    .orbits-sim .sim-info-bar:not(.fullscreen-style) {
        position: relative;
    }

    .orbits-sim .stats-container > .orb-subject {
        min-height: 44px;
        padding-right: calc(var(--orb-bar-acts, 330px) + 0.5em);
        box-sizing: border-box;
    }

    .orbits-sim .sim-info-bar > .sim-info-actions {
        position: absolute;
        top: 0.3em;
        right: 0.3em;
        flex-wrap: nowrap;
    }
}

/* Tool column: undo and redo (icons) share a row with "Fit view", leaving the palette one row more.
   The hint keeps room for five lines but may grow (to eight) for a scene's longer tip: only the
   palette above it, which scrolls, gets shorter, so no chip moves. */
@media (orientation: landscape) and (min-width: 640px) {
    .orb-toolbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto minmax(0, auto) auto auto;
        grid-template-areas: "label label" "palette palette" "history fit" "hint hint";
        align-content: start;
    }

    .orb-toolbar-label {
        grid-area: label;
    }

    .orb-palette {
        grid-area: palette;
    }

    .orb-history {
        grid-area: history;
    }

    .orb-toolbar .orb-history-btn {
        flex: 0 0 auto;
        width: 36px;
    }

    .orb-history-text {
        display: none;
    }

    /* (the page's text grows on wide screens but the column doesn't: capped, like the chips' names,
       so "Fit view" stays inside its button) */
    .orb-toolbar .orb-fit {
        grid-area: fit;
        width: auto;
        min-width: 0;
        padding: 0 0.4em;
        gap: 0.4em;
        font-size: min(1em, 13px);
    }

    .orb-hint {
        grid-area: hint;
        height: auto;
        min-height: 7.1em;
        max-height: 11.3em;
        overflow-y: auto;
    }
}

/* ---------- Mutual gravity: the menu's Gravity tab (who pulls on this body) ----------
   A small table: the strongest pulls with their forces and shares of the net force, the rest added
   up, and the net force; then a note (Newton's 3rd law) and buttons for pull lines and the Hill
   sphere and Roche limit, which mirror the settings. The page's own table styles are undone here. */
.orb-popover table.orb-pull-table {
    width: 100%;
    margin: 6px 0 0;
    border: 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    background: transparent;
}

.orb-popover .orb-pull-table tr,
.orb-popover .orb-pull-table tbody tr:nth-child(2n + 1) {
    border: 0;
    background: transparent;
}

.orb-popover .orb-pull-table th,
.orb-popover .orb-pull-table td {
    padding: 2px 0 2px 6px;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.35;
    text-align: right;
    white-space: nowrap;
    color: var(--color-text);
}

.orb-popover .orb-pull-table th:first-child {
    padding-left: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
}

.orb-popover .orb-pull-table thead th {
    padding-bottom: 3px;
    font-size: 0.92em;
    opacity: 0.75;
}

/* "Who pulls on Earth" heads the table; the two number columns keep their width */
.orb-popover .orb-pull-table thead th:first-child {
    font-weight: 700;
    opacity: 1;
}

.orb-popover .orb-pull-table thead th:nth-child(2) {
    width: 6.6em;
}

/* (room for "0.00038%" and "<0.0001%") */
.orb-popover .orb-pull-table thead th:nth-child(3) {
    width: 5.5em;
}

.orb-popover .orb-pull-table thead {
    border-bottom: 1px solid var(--color-border);
}

.orb-popover .orb-pull-table tfoot {
    border-top: 1px solid var(--color-border);
}

.orb-popover .orb-pull-table tfoot th,
.orb-popover .orb-pull-table tfoot td {
    padding-top: 3px;
    font-weight: 700;
}

.orb-popover .orb-pull-table tbody tr:first-child th,
.orb-popover .orb-pull-table tbody tr:first-child td {
    padding-top: 4px;
}

.orb-popover .orb-pull-table tr[hidden] {
    display: none;
}

.orb-pull-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 0.45em 1px 1px;
    vertical-align: middle;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* The rest, added up: no dot of their own */
.orb-popover .orb-pull-table .orb-pull-others th {
    padding-left: calc(8px + 0.45em + 1px);
    font-style: italic;
}

.orb-pull-note {
    margin-top: 5px !important;
}

/* The settings' key for pull lines: an arrow in two colours, as the pulls are drawn in their bodies' */
.orb-key-pulls {
    background: linear-gradient(90deg, #e0b48a 0 48%, #7ecaf6 48% 100%);
    color: #7ecaf6;
}

/* ---------- The Solar System scene: its start date ----------
   Under the scene list, only for a scene with a start date. Styled like the selects above it (a
   bordered box, the accent on focus), at least 40 px tall for a finger; the native date picker follows
   the theme. */
.orb-date {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.orb-date[hidden] {
    display: none;
}

.sim-controls-content .orb-date label {
    font-size: 0.9em;
}

.orb-date-input {
    box-sizing: border-box;
    width: 100%;
    height: 2.6em;
    min-height: 40px;
    padding: 0 0.75em;
    font: inherit;
    font-size: 0.95em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color-scheme: light;
}

html.dark-mode .orb-date-input {
    color-scheme: dark;
}

.orb-date-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
}

.orb-date-input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.orb-date-input[aria-invalid="true"] {
    border-color: #d9485f;
}

.sim-controls-content .orb-date .orb-note {
    margin-top: 0;
}

/* ---------- Missions ----------
   Only while a mission is loaded: its briefing and result card over the canvas's top-left corner (the
   mission card with the fuel gauge is drawn on the canvas, top right) and the palette greyed out (it
   still answers a click, with a note on the mission's rules). In the settings, under the scene list,
   a button into the missions. */
.orbits-sim.orb-mission-on .orb-palette,
.orbits-sim.orb-mission-on .orb-toolbar-label {
    opacity: 0.4;
}

.orb-mission-panel {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 20;
    box-sizing: border-box;
    width: 320px;
    max-width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 9px 12px 11px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--color-text);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.orb-mission-panel[hidden] {
    display: none;
}

.orb-mission-panel *,
.orb-mission-panel *::before,
.orb-mission-panel *::after {
    box-sizing: border-box;
}

.orb-mission-kicker {
    margin: 0 2.4em 0 0;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

.orb-mission-panel .orb-mission-title {
    margin: 0.15em 2em 0.4em 0;
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
}

.orb-mission-text p {
    margin: 0 0 0.55em;
}

.orb-mission-text strong {
    font-weight: 700;
}

.orb-mission-facts {
    font-variant-numeric: tabular-nums;
}

.orb-mission-text .orb-mission-small {
    font-size: 0.9em;
    opacity: 0.85;
}

.orb-mission-stars {
    font-size: 1.5em;
    line-height: 1;
    letter-spacing: 0.12em;
    color: var(--color-accent);
}

/* The buttons stay in view at the bottom while a long briefing scrolls (a phone's canvas is small) */
.orb-mission-actions {
    position: sticky;
    bottom: -11px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0.2em -12px -11px;
    padding: 6px 12px 11px;
    background-color: var(--color-bg-alt);
}

.orb-mission-more {
    margin: 0 0 0.55em;
}

.orb-mission-more > summary {
    display: list-item;
    width: max-content;
    max-width: 100%;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
}

.orb-mission-more > summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.orb-mission-more > p {
    margin: 0.3em 0 0;
}

.orb-mission-panel button {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    height: 34px;
    margin: 0;
    padding: 0 0.9em;
    font-size: 0.95em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--color-text) !important;
    background-color: var(--color-bg);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--color-border);
    -webkit-tap-highlight-color: transparent;
}

/* (dark text on the accent: white on it would be too faint to read) */
.orb-mission-panel button.is-primary {
    font-weight: 700;
    color: #16181c !important;
    background-color: var(--color-accent);
    box-shadow: none;
}

@media (hover: hover) {
    .orb-mission-panel button:hover {
        box-shadow: inset 0 0 0 1px var(--color-accent);
    }

    .orb-mission-panel button.is-primary:hover {
        box-shadow: inset 0 0 0 2px var(--color-text);
    }
}

.orb-mission-panel button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.orb-mission-panel .orb-mission-x {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

@media (pointer: coarse) {
    .orb-mission-panel button {
        height: 40px;
    }

    .orb-mission-panel .orb-mission-x {
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
    }
}

/* Phones: a little tighter, so more of the briefing fits over the canvas */
@media (max-width: 480px), (max-height: 540px) {
    .orb-mission-panel {
        padding: 7px 10px 9px;
        font-size: 13px;
        line-height: 1.35;
    }

    .orb-mission-actions {
        bottom: -9px;
        margin: 0.2em -10px -9px;
        padding: 6px 10px 9px;
    }
}

/* The settings' way into the missions (styled as "Set its period and distances") */
.sim-controls-content .orb-mission-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
    height: 34px;
    margin: 0.5em 0 0;
    padding: 0 0.8em;
    font-size: 0.85em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    background-color: var(--color-bg);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.sim-controls-content .orb-mission-btn .icon {
    color: var(--color-accent);
}

.sim-controls-content .orb-mission-btn + .orb-note {
    margin-top: 0.3em;
}

@media (hover: hover) {
    .sim-controls-content .orb-mission-btn:hover {
        box-shadow: inset 0 0 0 1px var(--color-accent);
    }
}

@media (pointer: coarse) {
    .sim-controls-content .orb-mission-btn {
        height: 40px;
    }
}

/* Under the scene list, two other ways to start, side by side: the missions and a random system */
.sim-controls-content .orb-scene-row {
    display: flex;
    gap: 6px;
    margin: 0.5em 0 0;
}

.sim-controls-content .orb-scene-row .orb-mission-btn,
.sim-controls-content .orb-scene-row #randomSystemBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    margin: 0;
    padding: 0 0.6em;
    font-size: 0.85em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    background-color: var(--color-bg);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.sim-controls-content .orb-scene-row .icon {
    color: var(--color-accent);
}

.sim-controls-content .orb-scene-row button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.sim-controls-content .orb-scene-row + .orb-note {
    margin-top: 0.3em;
}

@media (hover: hover) {
    .sim-controls-content .orb-scene-row button:hover {
        box-shadow: inset 0 0 0 1px var(--color-accent);
    }
}

@media (pointer: coarse) {
    .sim-controls-content .orb-scene-row .orb-mission-btn,
    .sim-controls-content .orb-scene-row #randomSystemBtn {
        height: 42px;
    }
}

/* ---------- Finding your way: the "Bodies" list, zoom to an orbit, the keyboard, the help ----------
   The list is a collapsed group in the settings (like "More options"); its rows are placed by the
   script (only those in sight exist), the chosen one taller by its line of buttons. The help is a
   modal dialog. --orb-focus: the focus rings and the chosen row's mark, darker than the page's pink in
   the light theme so they stand out from the pale background (3:1 or more). */
.orbits-sim,
.orb-help {
    --orb-focus: #c43d63;
}

html.dark-mode .orbits-sim,
html.dark-mode .orb-help {
    --orb-focus: var(--color-accent);
}

/* Light theme contrast (WCAG AA). The page's pink is too pale for text on the light greys (2.3:1),
   so values shown in pink take a darker pink (5:1 or more); and secondary text, a 75% grey there
   (3.7:1), is 90% (5:1). */
html:not(.dark-mode) .orbits-sim .sim-controls-content label > .sim-value,
html:not(.dark-mode) .orbits-sim .sim-controls-content label > span:not([class]),
html:not(.dark-mode) .orbits-sim .orb-pop-val,
html:not(.dark-mode) .orbits-sim .orb-popover input.orb-spin-input,
html:not(.dark-mode) .orbits-sim .orb-mission-stars {
    color: #b03a5b;
}

html:not(.dark-mode) .orbits-sim #pauseBtn[aria-pressed="true"] {
    color: #b03a5b !important;
}

html:not(.dark-mode) .orbits-sim .orb-toolbar-label,
html:not(.dark-mode) .orbits-sim .orb-group-label,
html:not(.dark-mode) .orbits-sim .orb-subject-around,
html:not(.dark-mode) .orbits-sim .orb-pop-note,
html:not(.dark-mode) .orbits-sim .orb-field-sub,
html:not(.dark-mode) .orbits-sim .orb-spin-unit,
html:not(.dark-mode) .orbits-sim .orb-pop-tabs button:not([aria-selected="true"]),
html:not(.dark-mode) .orbits-sim .orb-pull-table thead th,
html:not(.dark-mode) .orbits-sim .orb-mission-kicker,
html:not(.dark-mode) .orbits-sim .sim-controls-content .orb-note,
html:not(.dark-mode) .orbits-sim .sim-controls-content label .orb-sub,
html:not(.dark-mode) .orbits-sim .sim-controls-content .sim-control-group-label,
html:not(.dark-mode) .orbits-sim .sim-chips input[type="checkbox"]:not(:checked) + label {
    opacity: 0.9;
}

/* Hidden, but read by screen readers */
.orb-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The canvas takes the keyboard: a ring inside its edge while it has the focus from the keyboard */
#simulationCanvas:focus {
    outline: none;
}

#simulationCanvas:focus-visible {
    outline: 3px solid var(--orb-focus);
    outline-offset: -3px;
}

/* (not after a finger's press: see bindNavigation in orbits_core.js) */
#simulationCanvas.orb-touch-focus:focus-visible {
    outline: none;
}

/* "? Help" in the settings' heading, beside the close button */
.sim-controls-header .orb-keys-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    flex: 0 0 auto;
    height: 30px;
    margin: 0 0 0 auto;
    padding: 0 0.65em 0 0.35em;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text) !important;
    background-color: transparent;
    border-radius: 15px;
    box-shadow: inset 0 0 0 1px var(--color-border);
    -webkit-tap-highlight-color: transparent;
}

.orb-keys-q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 13px;
    font-weight: 900;
    color: var(--color-bg);
    background-color: var(--orb-focus);
    border-radius: 50%;
}

@media (hover: hover) {
    .sim-controls-header .orb-keys-btn:hover {
        box-shadow: inset 0 0 0 1px var(--orb-focus);
    }
}

.sim-controls-header .orb-keys-btn:focus-visible {
    outline: 2px solid var(--orb-focus);
    outline-offset: 1px;
}

@media (pointer: coarse) {
    .sim-controls-header .orb-keys-btn {
        height: 40px;
        border-radius: 20px;
    }
}

/* The "Bodies" group: Find and the order on one line, then the list */
.orb-bodies .orb-bodies-tools {
    display: flex;
    gap: 6px;
}

.orb-bodies .orb-bodies-tools input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    height: 2.4em;
    margin: 0;
    padding: 0 0.6em;
    font-size: 0.9em;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    outline: none;
}

.orb-bodies .orb-bodies-tools input[type="search"]::placeholder {
    color: var(--color-text);
    opacity: 0.85;
}

.orb-bodies .orb-bodies-tools input[type="search"]:focus {
    border-color: var(--orb-focus);
    box-shadow: 0 0 0 1px var(--orb-focus);
}

.sim-controls-content .orb-bodies .orb-bodies-tools select {
    flex: 0 0 auto;
    width: 9.6em;
    height: 2.4em;
    font-size: 0.9em;
}

@media (pointer: coarse) {
    .orb-bodies .orb-bodies-tools input[type="search"],
    .sim-controls-content .orb-bodies .orb-bodies-tools select {
        height: 40px;
    }
}

.orb-bodies-count {
    font-weight: 400;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

.orb-bodies-wrap {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.orb-bodies-tree {
    position: relative;
    min-height: var(--orb-bl-row, 44px);
    max-height: clamp(9.5rem, 40vh, 17rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    outline: none;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.orb-bodies-tree:focus-visible:not(.has-active) {
    box-shadow: inset 0 0 0 2px var(--orb-focus);
}

.orb-bodies-sizer {
    width: 1px;
}

/* A row: its colour, name and what it orbits; under them its mass, distance, speed and period */
.orb-bl-row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    grid-template-rows: 20px 16px;
    align-content: center;
    column-gap: 8px;
    box-sizing: border-box;
    height: var(--orb-bl-row, 44px);
    padding: 0 8px 0 calc(10px + var(--orb-bl-indent, 0) * 12px);
    color: var(--color-text);
    cursor: pointer;
    border-bottom: 1px solid var(--color-bg-subtle);
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.orb-bl-row[hidden] {
    display: none;
}

.orb-bl-dot {
    align-self: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.orb-bl-line,
.orb-bl-vals {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.orb-bl-line {
    font-size: 0.9em;
    line-height: 20px;
}

/* Its mass at the right of the name line (a swarm body's long one is what gives way last) */
.orb-bl-mass {
    grid-column: 3;
    grid-row: 1;
    padding-left: 6px;
    font-size: 0.78em;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0.85;
}

.orb-bl-vals {
    grid-column: 2 / 4;
}

.orb-bl-name {
    font-weight: 700;
}

.orb-bl-around {
    font-size: 0.92em;
    opacity: 0.85;
}

.orb-bl-vals {
    grid-row: 2;
    font-size: 0.78em;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

@media (hover: hover) {
    .orb-bl-row:hover {
        background-color: var(--color-bg-subtle);
    }
}

/* The chosen body: marked at its left edge, and taller by its buttons */
.orb-bl-row.is-chosen {
    align-content: start;
    padding-top: 4px;
    height: calc(var(--orb-bl-row, 44px) + var(--orb-bl-act, 42px));
    background-color: var(--color-bg-button-active-overlay);
    box-shadow: inset 3px 0 0 var(--orb-focus);
}

.orb-bodies-tree:focus-visible .orb-bl-row.is-active {
    outline: 2px solid var(--orb-focus);
    outline-offset: -2px;
}

/* A group of swarm bodies or pieces: a chevron that turns when it is open */
.orb-bl-row.is-group .orb-bl-line::before {
    content: '\f054';
    display: inline-block;
    width: 1em;
    font-family: 'Font Awesome 5 Free';
    font-size: 0.75em;
    font-weight: 900;
    transition: transform 0.15s ease;
}

.orb-bl-row.is-group[aria-expanded="true"] .orb-bl-line::before {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .orb-bl-row.is-group .orb-bl-line::before {
        transition: none;
    }
}

/* (two dots, one behind the other: many bodies) */
.orb-bl-row.is-group .orb-bl-dot {
    box-shadow: 0 0 0 1.5px var(--color-bg), 4px -3px 0 0 currentColor;
}

.orb-bodies-actions {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    box-sizing: border-box;
    height: var(--orb-bl-act, 42px);
    padding: 0 8px 0 12px;
}

.orb-bodies-actions[hidden] {
    display: none;
}

.orb-bodies-actions button {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    min-width: 0;
    height: calc(var(--orb-bl-act, 42px) - 8px);
    margin: 0;
    padding: 0 0.4em;
    font-size: 0.8em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--color-text) !important;
    background-color: var(--color-bg);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--color-border);
    -webkit-tap-highlight-color: transparent;
}

.orb-bodies-actions button .icon {
    color: var(--orb-focus);
}

.orb-bodies-actions button[data-act="delete"] {
    flex: 0 0 auto;
    width: calc(var(--orb-bl-act, 42px) - 8px);
    padding: 0;
}

.orb-bodies-actions button[data-act="delete"] .icon {
    color: inherit;
}

.orb-bodies-actions button[aria-pressed="true"] {
    color: var(--color-bg) !important;
    background-color: var(--orb-focus);
    box-shadow: none;
}

.orb-bodies-actions button[aria-pressed="true"] .icon {
    color: inherit;
}

.orb-bodies-actions button:disabled {
    opacity: 0.45;
    cursor: default;
}

@media (hover: hover) {
    .orb-bodies-actions button:not(:disabled):hover {
        box-shadow: inset 0 0 0 1px var(--orb-focus);
    }

    .orb-bodies-actions button[data-act="delete"]:not(:disabled):hover {
        color: #ff5f5f !important;
        box-shadow: inset 0 0 0 1px #ff5f5f;
    }
}

.orb-bodies-actions button:focus-visible {
    outline: 2px solid var(--orb-focus);
    outline-offset: 1px;
}

.orb-bodies-empty {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 10px;
    font-size: 0.85em;
    line-height: var(--orb-bl-row, 44px);
    opacity: 0.85;
    pointer-events: none;
}

.orb-bodies-empty[hidden] {
    display: none;
}

.orb-bodies > .orb-note {
    margin-top: 0.5em;
    font-size: 0.8em;
    opacity: 0.85;
}

/* "Zoom to its orbit" in the body's menu: an icon, beside Delete */
.orb-pop-actions .orb-pop-zoom {
    flex: 0 0 34px;
    padding: 0;
}

/* (four buttons share the row now: a little less padding, so "View from here" and "Circular" fit) */
.orb-popover:not(.is-sheet) .orb-pop-actions {
    gap: 4px;
}

.orb-popover:not(.is-sheet) .orb-pop-actions button:not(.orb-pop-zoom):not(.orb-pop-delete) {
    padding: 0 0.5em;
}

/* The help: keys and gestures, in a dialog over the page */
dialog.orb-help {
    box-sizing: border-box;
    width: min(46rem, calc(100vw - 24px));
    max-width: none;
    max-height: min(86vh, 48rem);
    margin: auto;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-text);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

@supports (height: 100svh) {
    dialog.orb-help {
        max-height: min(86svh, 48rem);
    }
}

dialog.orb-help::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.orb-help *,
.orb-help *::before,
.orb-help *::after {
    box-sizing: border-box;
}

.orb-help-inner {
    padding: 0 18px 16px;
}

.orb-help-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 -18px;
    padding: 6px 6px 6px 18px;
    background-color: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}

.orb-help h2 {
    margin: 0;
    font-size: 0.8em;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text);
}

.orb-help .orb-help-close {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1;
    color: var(--color-text) !important;
    background: transparent;
    border-radius: 6px;
    box-shadow: none;
}

@media (hover: hover) {
    .orb-help .orb-help-close:hover {
        box-shadow: inset 0 0 0 1px var(--orb-focus);
    }
}

.orb-help .orb-help-close:focus-visible {
    outline: 2px solid var(--orb-focus);
    outline-offset: -2px;
}

.orb-help-intro {
    margin: 10px 0 2px;
    font-size: 0.88em;
}

.orb-help-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    column-gap: 28px;
}

/* The touch gestures come last, or first on a touch screen */
.orb-help-touch {
    order: 9;
}

@media (pointer: coarse) {
    .orb-help-touch {
        order: -1;
    }
}

/* On a touch screen (most have no keyboard) the keys wait behind "Keys, with a keyboard", under the
   gestures; pressing ? opens the help with them showing (see openHelp in orbits_core.js) */
.orb-help .orb-help-keys-toggle {
    display: none;
}

@media (pointer: coarse) {
    .orb-help .orb-help-keys-toggle {
        -webkit-appearance: none;
        appearance: none;
        order: -1;
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        height: 44px;
        margin: 16px 0 2px;
        padding: 0 14px;
        font-size: 0.88em;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0;
        text-transform: none;
        color: var(--color-text) !important;
        background-color: var(--color-bg);
        border-radius: 6px;
        box-shadow: inset 0 0 0 1px var(--color-border);
        -webkit-tap-highlight-color: transparent;
    }

    .orb-help .orb-help-keys-toggle:focus-visible {
        outline: 2px solid var(--orb-focus);
        outline-offset: 2px;
    }

    .orb-help-keys-chev::after {
        content: "\25BE";
        color: var(--orb-focus);
    }

    .orb-help.keys-open .orb-help-keys-chev::after {
        content: "\25B4";
    }

    .orb-help:not(.keys-open) .orb-help-group:not(.orb-help-touch) {
        display: none;
    }

    .orb-help.keys-open .orb-keys-note {
        display: inline;
    }
}

.orb-help h3 {
    margin: 14px 0 4px;
    font-size: 0.72em;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text);
    opacity: 0.85;
}

.orb-help dl {
    margin: 0;
}

.orb-help dl > div {
    display: grid;
    grid-template-columns: 8.6em minmax(0, 1fr);
    gap: 10px;
    padding: 5px 0;
    border-top: 1px solid var(--color-border);
}

.orb-help dt,
.orb-help dd {
    margin: 0;
    font-size: 0.88em;
}

.orb-help dt {
    font-weight: 700;
}

.orb-help kbd {
    display: inline-block;
    min-width: 1.7em;
    padding: 0 0.35em;
    font-family: inherit;
    font-size: 0.92em;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: 4px;
}

/* ---------- Save and share: copy a link, random systems, CSV downloads, carry on ----------
   Buttons in the settings like "Set its period and distances": text with an icon, the panel's
   colours, a ring when focused. "Carry on where you left off" is a button inside the hint line,
   which turns into a row while it holds one (it keeps its height on phones). */
.sim-controls-content .orb-share-row,
.sim-controls-content .orb-csv-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sim-controls-content .orb-share-row button,
.sim-controls-content .orb-csv-row button,
#charts-container .orb-chart-csv {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    min-height: 36px;
    margin: 0;
    padding: 0.3em 0.75em;
    font-size: 0.85em;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    background-color: var(--color-bg);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.sim-controls-content .orb-share-row .icon,
#charts-container .orb-chart-csv .icon {
    color: var(--color-accent);
}

.sim-controls-content .orb-share-row button:focus-visible,
.sim-controls-content .orb-csv-row button:focus-visible,
#charts-container .orb-chart-csv:focus-visible,
.orb-toolbar .orb-carry-on:focus-visible,
.orb-toolbar .orb-carry-x:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

@media (hover: hover) {
    .sim-controls-content .orb-share-row button:hover,
    .sim-controls-content .orb-csv-row button:hover,
    #charts-container .orb-chart-csv:hover {
        box-shadow: inset 0 0 0 1px var(--color-accent);
    }
}

/* The link, to copy by hand where the clipboard can't be used */
.sim-controls-content .orb-share-field {
    width: 100%;
    height: 36px;
    padding: 0 0.6em;
    font-size: 0.8em;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.sim-controls-content .orb-share-field:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
}

.sim-controls-content .orb-share-field[hidden] {
    display: none;
}

/* Under the graphs: "Download data (CSV)" on the right, with what it did beside it */
.orb-chart-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4em 0.75em;
    margin-top: 0.5em;
    font-size: 0.85em;
}

.orb-chart-note {
    flex: 1 1 12em;
    min-width: 0;
    opacity: 0.85;
}

#charts-container .orb-chart-csv {
    flex: 0 0 auto;
    font-size: 1em;
}

/* "Carry on where you left off  x" in the hint line, and where the tool column has room, what it was
   ("Inner planets, 6 bodies, 2 hours ago") on a line of its own */
.orb-hint:has(.orb-carry-on) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 4px 6px;
    -webkit-line-clamp: none;
    line-clamp: none;
}

.orb-toolbar .orb-carry-on {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    flex: 1 1 0%;
    min-width: 0;
    min-height: 30px;
    padding: 0.2em 0.7em;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
}

.orb-toolbar .orb-carry-on .icon {
    flex: 0 0 auto;
    color: var(--color-accent);
}

.orb-toolbar .orb-carry-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 1;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    box-shadow: none;
    background-color: transparent;
}

.orb-carry-what {
    display: none;
    order: 2;
    flex: 1 1 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (orientation: landscape) and (min-width: 640px) {
    .orb-carry-what {
        display: block;
    }

    /* (phones held sideways have no hint line: the offer gets one, as small as it can be) */
    @media (max-height: 540px) {
        .orb-hint:has(.orb-carry-on) {
            min-height: 0;
        }

        .orb-carry-what {
            display: none;
        }
    }
}

@media (pointer: coarse) {
    .sim-controls-content .orb-share-row button,
    .sim-controls-content .orb-csv-row button,
    #charts-container .orb-chart-csv,
    .sim-controls-content .orb-share-field {
        min-height: 42px;
    }

    .orb-toolbar .orb-carry-on {
        min-height: 40px;
    }

    .orb-toolbar .orb-carry-x {
        width: 40px;
        height: 40px;
    }
}

/* A tablet held upright has only two lines of hint: it grows a little while the offer is there */
@media (pointer: coarse) and (min-width: 601px) and (orientation: portrait) {
    .orb-hint:has(.orb-carry-on) {
        height: auto;
        min-height: 2.7em;
    }
}

/* ---------- About: "How to use it" in short groups, each headed by a quiet label ---------- */
.description-area p.orb-howto-group {
    margin: 0.9em 0 0.3em;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.description-area h4 + p.orb-howto-group {
    margin-top: 0;
}

/* ---------- Phones held sideways (and other short, wide windows): the info bar beside the canvas ----------
   Three columns: the palette, the canvas and the info bar. Under the canvas the bar took half the
   screen's height; beside it, it costs only width. It also takes its height from the canvas row and
   never sets it (contain: size), so the canvas's size depends on the screen alone. Under the canvas,
   the bar's height changed with its width (its readouts wrapping differently), its width with the
   canvas's, and the canvas's height with the bar's: the two fed each other and the canvas flipped
   between two sizes every frame. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 540px) {
    .orbits-sim {
        --orb-info-w: 172px;
    }

    .orbits-sim .simulation-display-container {
        grid-template-columns: var(--orb-side-w) minmax(0, 1fr) var(--orb-info-w);
        grid-template-rows: auto auto;
        grid-template-areas: "tools canvas info" "tools hint info";
        width: min(100%, calc(var(--sim-canvas-max-h) * (var(--aspect-ratio, 16 / 10)) + 2px + var(--orb-side-w) + var(--orb-info-w) + 2 * var(--orb-side-gap)));
    }

    /* The hint line, moved under the canvas (by placeHint in orbits_core.js): two lines, always the
       same height, so the canvas's size still depends on the screen alone (until a long message is
       opened out with a tap) */
    .orbits-sim .simulation-display-container > .orb-hint {
        grid-area: hint;
        display: -webkit-box;
        height: 2.7em;
        min-height: 0;
        max-height: none;
        margin: 4px 0 0;
        padding: 0 2px;
        font-size: 0.8em;
        line-height: 1.35;
        overflow: hidden;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .orbits-sim .simulation-display-container > .orb-hint.is-open {
        display: block;
        height: auto;
        -webkit-line-clamp: unset;
        line-clamp: unset;
    }

    .orbits-sim .simulation-display-container > .orb-hint:has(.orb-carry-on) {
        height: auto;
        min-height: 2.7em;
    }

    .orbits-sim .simulation-display-container > .orb-hint.is-cut::after {
        background: linear-gradient(to right, transparent, var(--color-bg) 1.4em);
    }

    .orbits-sim .simulation-display-container > .orb-hint.is-spilling {
        margin-left: 0;
        margin-right: 0;
        padding: 0 2px 6px;
        background-color: var(--color-bg);
    }

    .orbits-sim .sim-info-bar {
        grid-area: info;
        contain: size;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 6px;
        min-height: 0;
        margin: 0;
        padding: 5px;
        overflow: hidden;
    }

    /* (the readouts scroll if the column is too short for them all: the buttons always show) */
    .orbits-sim .stats-container {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        flex: 1 1 auto;
        gap: 2px;
        min-width: 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .orbits-sim .stats-container > .orb-subject {
        flex: 0 0 auto;
        max-width: none;
        padding: 0 0 3px;
    }

    .orbits-sim .orb-subject-name {
        flex: 0 1 auto;
        min-width: 0;
    }

    /* Each readout a quiet row: its name on the left, the value on the right */
    .orbits-sim .stats-container > .stats-box {
        display: flex;
        align-items: baseline;
        gap: 0.3em;
        padding: 0.1em 0.35em;
        font-size: 0.72em;
        white-space: nowrap;
    }

    .orbits-sim .stats-box > strong {
        flex: 1 1 auto;
    }

    .orbits-sim .stats-box .sim-value {
        min-width: 0;
    }

    /* Seven buttons in two rows of four, at the foot of the column */
    .orbits-sim .sim-info-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2px;
        flex: 0 0 auto;
        margin: 0;
    }

    .orbits-sim .sim-info-actions .sim-action-buttons-overlay {
        display: contents;
    }

    .orbits-sim .sim-info-actions .sim-icon-button,
    .orbits-sim .sim-info-actions .sim-reset-button,
    .orbits-sim .sim-info-actions .sim-show-charts-label,
    .orbits-sim .sim-info-actions .sim-fullscreen-toggle,
    .orbits-sim .sim-info-actions .sim-panel-toggle-button {
        width: 100%;
        height: 40px;
    }

    /* With the settings open beside them there is room for two columns only: the palette steps aside
       until the settings close (the canvas would otherwise shrink to a strip) */
    body.sim-panel-active.sim-panel-side .orbits-sim .orb-toolbar {
        display: none;
    }

    body.sim-panel-active.sim-panel-side .orbits-sim .simulation-display-container {
        grid-template-columns: minmax(0, 1fr) var(--orb-info-w);
        grid-template-areas: "canvas info" "hint info";
        width: min(100%, calc(var(--sim-canvas-max-h) * (var(--aspect-ratio, 16 / 10)) + 2px + var(--orb-info-w) + var(--orb-side-gap)));
    }

    /* Fullscreen: the same three columns fill the screen (the bar is no longer fixed along the bottom) */
    body.sim-fullscreen-active .simulation-area-wrapper.orbits-sim {
        height: 100%;
    }

    body.sim-fullscreen-active .orbits-sim .simulation-display-container {
        grid-template-columns: var(--orb-side-w) minmax(0, 1fr) var(--orb-info-w);
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-areas: "tools canvas info" "tools hint info";
        column-gap: var(--orb-side-gap);
    }

    body.sim-fullscreen-active .orbits-sim .sim-info-bar.fullscreen-style {
        position: static;
        width: auto;
        padding: 5px;
        padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
        border-width: 1px;
        border-radius: var(--sim-radius);
        box-shadow: none;
        z-index: auto;
    }
}

/* ---------- Touch screens: every control at least a finger wide (40 px) ----------
   Undo, redo and "Fit view", the info bar's Edit, the settings' Kepler switches and "Set its period
   and distances", and held sideways the slim body chips (their names a size larger to read). */
@media (pointer: coarse) {
    .orb-toolbar .orb-history-btn,
    .orb-toolbar .orb-fit,
    #statSubject .orb-subject-edit,
    .sim-controls-content .orb-edit-orbit {
        height: 40px;
    }

    .orbits-sim .sim-checkbox-group.orb-kepler-chips input[type="checkbox"] + label {
        min-height: 40px;
    }
}

@media (pointer: coarse) and (orientation: landscape) and (min-width: 640px) and (max-height: 540px) {
    .orb-toolbar .orb-chip {
        height: 40px;
    }

    .orb-toolbar .orb-chip .orb-chip-name {
        font-size: 0.76em;
    }
}