/* The Syzygy Explorer (syzygy.js): a full-screen takeover on the page's theme variables, with the lattice,
   sky and orbit pinned to the night sky as the app pins them. Every rule is scoped under .sz, the class
   syzygy.js puts on its root. */
.sz {
    --sz-accent: var(--accent, #b7c8e0);
    --sz-on-accent: var(--on-accent, #1b2c3c);
    --sz-moon: #b7c8e0;   /* MoonPrimaryContainer, pinned on the dark panes */
    --sz-label: #bfc7d2;  /* MoonOnSurfaceVariant */
    --sz-night: #0b0e14;  /* BackgroundDeep */
    position: relative;
    display: flex; flex-direction: column;
    height: 100%; min-height: 0; overflow: hidden;
    background: var(--bg); color: var(--on-surface);
    font: 14px/1.4 var(--font-body, Outfit, system-ui, sans-serif);
    container-type: inline-size;
}
.sz[hidden] { display: none; }
.sz button { font: inherit; color: inherit; cursor: pointer; }
.sz .sz-loading { margin: 0; padding: 24px var(--gutter, 16px); color: var(--muted); }
.sz svg { display: block; }
/* The explorer's icons are filled Material glyphs: undo the page's line-icon stroke (style.css draws every svg
   with a 2px currentColor outline), which swelled the help icon's ring into a solid disc and thickened share. */
.sz svg { stroke: none; }

/* ---------- Top bar ---------- */
.sz .sz-top {
    display: flex; align-items: center; gap: 2px;
    padding: 4px; padding-top: max(4px, env(safe-area-inset-top));
    border-bottom: 1px solid var(--outline);
}
.sz .sz-top h1 { flex: 1; margin: 0 0 0 4px; font: 600 17px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sz .sz-icon {
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none;
    display: grid; place-items: center; color: var(--on-surface);
}
.sz .sz-icon:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }

/* ---------- Body: lattice above the detail, side by side from 720px (WIDE_THRESHOLD) ---------- */
.sz .sz-body { flex: 1; min-height: 0; display: grid; grid-template: minmax(0, 42fr) minmax(0, 58fr) / minmax(0, 1fr); }
@container (min-width: 720px) {
    .sz .sz-body { grid-template: minmax(0, 1fr) / minmax(0, 42fr) minmax(0, 58fr); }
}

/* ---------- Lattice (always a dark field) ---------- */
.sz .sz-lattice { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--sz-night); color: var(--sz-label); }
.sz .sz-latbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 8px; }
.sz .sz-caption { flex: 1; min-width: 160px; font-size: 11px; line-height: 1.35; }
.sz .sz-caption div:first-child { color: rgba(191, 199, 210, 0.8); }
.sz .sz-hint { color: rgba(191, 199, 210, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sz .sz-customw { width: auto; margin: 0 16px; padding: 0; border: 0; background: none; accent-color: var(--sz-accent); }
.sz .sz-customw[hidden] { display: none; }
.sz .sz-grid { flex: 1; min-height: 0; width: 100%; margin: 4px 0 8px; display: block; touch-action: none; cursor: pointer; }
.sz .sz-grid[hidden], .sz .sz-phase[hidden], .sz .sz-pill[hidden] { display: none; }

/* Timeline | Phase: a two-way switch in the lattice's dark pill style. */
.sz .sz-seg { display: inline-flex; flex: none; border: 1px solid rgba(191, 199, 210, 0.5); border-radius: 20px; overflow: hidden; }
.sz .sz-seg button { border: 0; padding: 6px 12px; background: rgba(255, 255, 255, 0.08); color: var(--sz-label); font-weight: 500; }
.sz .sz-seg button + button { border-left: 1px solid rgba(191, 199, 210, 0.3); }
.sz .sz-seg button[aria-pressed=true] { background: var(--sz-moon); color: var(--sz-night); }

/* The phase space (phase.js): its canvas fills the pane, with a hover card over it. */
.sz .sz-phase { position: relative; flex: 1; min-height: 0; margin: 4px 0 8px; }
.sz .sz-phase canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.sz .sz-phase .sz-loading { color: var(--sz-label); }
.sz .sz-phasetip {
    position: absolute; z-index: 5; pointer-events: none; padding: 6px 9px; border-radius: 8px; font-size: 12px;
    background: rgba(17, 21, 34, 0.92); color: #e8ecf2; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); white-space: nowrap;
}
.sz .sz-phasetip[hidden] { display: none; }

/* ---------- Pills, menus ---------- */
.sz .sz-pill {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    padding: 6px 4px 6px 12px; border-radius: 20px; font-weight: 500; white-space: nowrap;
    background: var(--surface-high); color: var(--sz-accent);
    border: 1px solid color-mix(in srgb, var(--sz-accent) 60%, transparent);
}
.sz .sz-pill[data-menu=view] { padding-left: 10px; }
.sz .sz-pill[data-act] { padding: 6px 12px; }
.sz .sz-pill.sz-dark { background: rgba(255, 255, 255, 0.08); color: var(--sz-label); border-color: rgba(191, 199, 210, 0.5); }
.sz .sz-popup {
    position: absolute; z-index: 20; min-width: 240px; max-width: calc(100% - 16px); max-height: 70%; overflow: auto;
    padding: 0 0 6px; border-radius: 8px; background: var(--surface-high); color: var(--on-surface);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.sz .sz-menuhead {
    padding: 8px 16px 6px; font-size: 12px; font-weight: 600; color: var(--muted);
    border-bottom: 1px solid var(--outline); margin-bottom: 4px;
}
.sz .sz-popup button {
    display: flex; flex-direction: column; align-items: flex-start; width: 100%;
    padding: 8px 16px; border: 0; border-radius: 0; background: none; text-align: left;
}
.sz .sz-popup button:hover, .sz .sz-popup button:focus-visible { background: var(--surface-highest); outline: none; }
.sz .sz-popup button[aria-checked] span { color: var(--sz-accent); font-weight: 600; }
.sz .sz-popup small { color: var(--muted); font-size: 11px; }

/* ---------- Detail ---------- */
.sz .sz-detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.sz .sz-nav { display: flex; align-items: center; gap: 2px; padding: 4px; }
.sz .sz-edge {
    flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none;
    display: grid; place-items: center; color: var(--muted);
}
.sz .sz-step {
    flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; background: var(--sz-accent); color: var(--sz-on-accent);
    touch-action: none; user-select: none; -webkit-user-select: none;
}
.sz .sz-step:active { filter: brightness(0.88); }
.sz .sz-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sz .sz-title b, .sz .sz-title small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sz .sz-title b { font-size: 16px; }
.sz .sz-title small { font-size: 12px; color: var(--muted); }
.sz .sz-controls { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 4px; }
.sz .sz-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Sky: the night sky over its own dark slider strip. */
.sz .sz-skybox { position: relative; flex: 1; min-height: 0; background: var(--sz-night); }
.sz .sz-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sz .sz-bar {
    display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--sz-night);
    padding: 8px var(--gutter, 16px) max(8px, env(safe-area-inset-bottom));
}
.sz .sz-clock { font: 600 14px var(--font-display); font-variant-numeric: tabular-nums; color: var(--sz-moon); text-align: center; white-space: pre-wrap; }
.sz .sz-clock span { color: var(--sz-label); }
.sz .sz-range { width: 100%; padding: 0; border: 0; background: none; accent-color: var(--sz-moon); }

/* Orbit: the drawing and its caption centred together on the night sky. */
.sz .sz-orbit {
    flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--sz-night); padding-bottom: env(safe-area-inset-bottom);
}
.sz .sz-orbitbox { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.sz .sz-orbitbox canvas { display: block; }
.sz .sz-orbit p { max-width: 560px; margin: 0; padding: 12px 16px; text-align: center; font-size: 12px; color: rgba(191, 199, 210, 0.85); }
.sz .sz-orbit p.sz-orbitdist { padding: 4px 16px 0; font-size: 14px; color: #b7c8e0; }

/* Info and Help: cards on the theme surface, width-capped. */
.sz .sz-info, .sz .sz-doc {
    width: 100%; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px;
    padding: 8px var(--gutter, 16px) max(24px, env(safe-area-inset-bottom));
}
.sz .sz-pane .sz-info { flex: 1; min-height: 0; overflow: auto; max-width: none; padding-inline: max(var(--gutter, 16px), calc((100% - 640px) / 2)); }
.sz .sz-card { background: var(--surface); border-radius: 24px; padding: 20px; }
.sz .sz-card h3 { margin: 0 0 12px; font-size: 16px; font-weight: 500; color: var(--sz-accent); }
.sz .sz-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; }
.sz .sz-card dt { color: var(--muted); }
.sz .sz-card dd { margin: 0; text-align: right; font: 500 13px var(--font-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sz .sz-doc header { padding-left: 4px; }
.sz .sz-doc h2 { margin: 0 0 4px; font: 600 24px var(--font-display); }
.sz .sz-doc header p, .sz .sz-note { margin: 0; color: var(--muted); }
.sz .sz-note { margin: 8px 0 0 4px; font-size: 12px; }
.sz .sz-legend { display: grid; grid-template-columns: 32px 1fr; gap: 8px; padding: 6px 0; }
.sz .sz-legend.sz-noswatch { grid-template-columns: 1fr; }
.sz .sz-steps { border-collapse: collapse; margin: 4px 0 8px; font: 500 12px var(--font-display); font-variant-numeric: tabular-nums; }
.sz .sz-steps th, .sz .sz-steps td { padding: 2px 12px 2px 0; text-align: right; font-weight: 500; }
.sz .sz-steps th { color: var(--muted); }
.sz .sz-steps td:first-child { text-align: left; font-family: var(--font-body); }
.sz .sz-legend b { font-size: 15px; font-weight: 600; }
.sz .sz-legend p { margin: 0; font-size: 12px; color: var(--muted); }
.sz .sz-accent { color: var(--sz-accent); }
.sz .sz-tile {
    justify-self: center; margin-top: 2px; width: 18px; height: 18px; border-radius: 4px;
    display: grid; place-items: center; background: var(--sz-night); border: 1px solid var(--outline);
}
.sz .sz-tile i { display: block; }

/* Help: a bottom sheet over a scrim. */
.sz .sz-scrim { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.5); }
.sz .sz-sheet {
    position: absolute; z-index: 31; left: 50%; bottom: 0; transform: translateX(-50%);
    width: min(100%, 640px); max-height: 88%; overflow: auto; outline: none;
    background: var(--surface); border-radius: 28px 28px 0 0; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}
.sz .sz-sheet .sz-card { background: var(--surface-high); }
.sz .sz-handle { width: 32px; height: 4px; border-radius: 2px; margin: 16px auto 8px; background: var(--muted); opacity: 0.6; }
.sz .sz-sheetclose { position: absolute; top: 8px; right: 8px; }
.sz .sz-toast {
    position: absolute; z-index: 40; left: 50%; bottom: 24px; transform: translateX(-50%);
    padding: 8px 16px; border-radius: 8px; background: var(--surface-highest); color: var(--on-surface);
}

/* ---------- Phones: narrower than 720px (SyzygyExplorerView's WIDE_THRESHOLD), the compact layout ----------
   The view switch takes the title's place in the top bar, the Timeline bar floats over the grid without its
   captions, the step controls share one row (⏮ ⏭ move to the foot of the step menu), the sky's clock rides on
   the sky, and the orbit's note is one line that opens on a tap. */
.sz .sz-views { display: none; gap: 2px; }
.sz .sz-views button {
    padding: 6px 14px; border-radius: 6px; font-weight: 500;
    border: 1px solid color-mix(in srgb, var(--sz-accent) 60%, transparent);
    background: var(--surface-high); color: var(--sz-accent);
}
.sz .sz-views button:first-child { border-radius: 20px 6px 6px 20px; }
.sz .sz-views button:last-child { border-radius: 6px 20px 20px 6px; }
.sz .sz-views button[aria-pressed=true] { border-color: transparent; border-radius: 20px; background: var(--sz-accent); color: var(--sz-on-accent); }
.sz .sz-navwrap { display: contents; }
.sz .sz-short, .sz .sz-orbitnote svg, .sz .sz-fullbtn { display: none; }

@container (max-width: 719.98px) {
    .sz .sz-top h1 { display: none; }
    .sz .sz-views { flex: 1; display: flex; justify-content: center; }

    .sz .sz-hint { display: none; }

    /* The overview can fill the screen (the button in its corner); the detail pane steps aside. */
    .sz .sz-lattice { position: relative; }
    .sz .sz-fullbtn {
        display: grid; position: absolute; z-index: 3; right: 8px; bottom: 12px; width: 40px; height: 40px;
        background: rgba(11, 14, 20, 0.85); color: var(--sz-label); border: 1px solid rgba(191, 199, 210, 0.5);
    }
    .sz.sz-full .sz-body { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
    .sz.sz-full .sz-detail { display: none; }
    .sz:not(.sz-phasemode) .sz-lattice { position: relative; }
    .sz:not(.sz-phasemode) .sz-latbar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: 8px; pointer-events: none; }
    .sz:not(.sz-phasemode) .sz-latbar > * { pointer-events: auto; }
    .sz:not(.sz-phasemode) .sz-caption { display: none; }
    .sz:not(.sz-phasemode) .sz-latbar .sz-pill.sz-dark { background: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)), rgba(11, 14, 20, 0.92); }
    .sz:not(.sz-phasemode) .sz-latbar .sz-seg { background: rgba(11, 14, 20, 0.92); }
    .sz:not(.sz-phasemode) .sz-customw { margin-top: 52px; }
    .sz.sz-phasemode .sz-caption div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .sz .sz-navwrap { display: flex; align-items: center; gap: 4px; padding: 4px; }
    .sz .sz-nav, .sz .sz-controls { display: contents; }
    .sz .sz-edge, .sz .sz-controls [data-menu=view] { display: none; }
    .sz [data-menu=jump] { order: 1; }
    .sz .sz-step[data-step="-1"] { order: 2; }
    /* One height whether or not the subtitle wraps (a date line and two subtitle lines, as the app's
       SyzygyTitle), so stepping doesn't jolt the pane below. */
    .sz .sz-title { order: 3; justify-content: center; min-height: calc(1.4 * 16px + 2 * 1.4 * 12px); }
    .sz .sz-step[data-step="1"] { order: 4; }
    .sz .sz-step { width: 48px; height: 48px; }
    .sz .sz-step svg { width: 30px; height: 30px; }
    .sz .sz-pill[data-act=today] { order: 5; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; justify-content: center; }
    .sz .sz-long { display: none; }
    .sz .sz-short { display: inline; }
    .sz .sz-title small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

    .sz .sz-bar { position: relative; padding-top: 4px; }
    .sz .sz-clock { position: absolute; left: 0; right: 0; bottom: 100%; padding-bottom: 2px; pointer-events: none; }

    .sz .sz-orbit p.sz-orbitnote { align-self: stretch; max-width: none; display: flex; align-items: center; gap: 4px; padding: 8px 16px; text-align: left; cursor: pointer; }
    .sz .sz-orbitnote span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sz .sz-orbitnote[aria-expanded=true] span { white-space: normal; }
    .sz .sz-orbitnote svg { display: block; flex: none; }
    .sz .sz-orbitnote[aria-expanded=true] svg { transform: rotate(180deg); }
}