/* 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 system-ui, -apple-system, "Segoe UI", Roboto, 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; }

/* ---------- 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-size: 16px; font-weight: 700; 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: 500 13px ui-monospace, Menlo, monospace; 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); }

/* 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: 13px ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.sz .sz-doc header { padding-left: 4px; }
.sz .sz-doc h2 { margin: 0 0 4px; font-size: 24px; font-weight: 700; }
.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: 12px ui-monospace, Menlo, monospace; }
.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: system-ui, sans-serif; }
.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);
}