:root {
  --bg: #0d1117;
  --panel: #161b22;
  --border: #30363d;
  --text: #c9d1d9;
  --muted: #8b949e;
  --accent: #58a6ff;
  --ok: #3fb950;
  --err: #f85149;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}

/* Header condiviso: brand + menu + riepilogo di sessione */
.app-header {
  padding: 0.7rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}
.app-nav { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.app-nav a {
  color: var(--text);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-size: 0.9rem;
}
.app-nav a:hover { background: rgba(255, 255, 255, 0.06); }
.app-nav a.active { background: var(--accent); color: #0d1117; font-weight: 600; }
.session-bar {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.2rem;
}
.brand-logo { height: 6rem; width: auto; display: block; flex: 0 0 auto; }
.brand-version { font-size: 0.95rem; color: var(--accent); letter-spacing: 0.05em; flex: 0 0 auto; }
/* selettore lingua (EN | IT) */
.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; flex: 0 0 auto; }
.lang-btn {
  background: #161d27; color: var(--fg, #c9d4e0); border: none; cursor: pointer;
  padding: 0.2rem 0.5rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em;
}
.lang-btn + .lang-btn { border-left: 1px solid var(--border); }
.lang-btn:hover { background: rgba(255, 255, 255, 0.06); }
.lang-btn.active { background: var(--accent); color: #0d1117; }
.session-summary {
  flex: 1 1 auto;
  color: var(--muted);
  font-size: 0.82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.session-summary .summary-label { color: var(--accent); }

.hint { color: var(--muted); font-size: 0.82rem; margin: 0.8rem 0 0; }
.hint a { color: var(--accent); }

.object-image {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #06080c;
}

/* Appearance (rendering sintetico del corpo) */
.scene-box { display: inline-block; line-height: 0; }
.scene-svg {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #05070b;
}
.scene-bar { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.scene-zoom {
  width: 28px; height: 28px; padding: 0;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  color: var(--text); background: #2b3340;
  border: 1px solid var(--border); border-radius: 5px;
}
.scene-zoom.wide { width: auto; padding: 0 0.6rem; font-size: 0.82rem; }
.scene-zoom:hover:not(:disabled) { background: #36404f; }
.scene-zoom:disabled { opacity: 0.4; cursor: default; }
.scene-zoom.on { background: var(--accent); color: #0d1117; border-color: var(--accent); }
.scene-caption { color: var(--muted); font-size: 0.82rem; }

main {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
  align-items: start;
}
@media (max-width: 720px) { main { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.2rem;
}
.panel h2 { margin: 0 0 1rem; font-size: 1.1rem; }

label { display: block; margin-bottom: 0.8rem; font-size: 0.88rem; color: var(--muted); }
label.check { display: flex; align-items: center; gap: 0.5rem; }

input[type=text], input[type=number], input[type=datetime-local] {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.45rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.9rem;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 0 0 0.8rem;
  padding: 0.8rem;
}

/* Settori di input: il settore modificato si evidenzia, i fratelli si attenuano.
   Pattern riusabile per ogni gruppo (location, time, …). */
.sector {
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.sector label { margin-bottom: 0; }
.sector.active {
  background: rgba(88, 166, 255, 0.10);
  border-color: rgba(88, 166, 255, 0.45);
}
.sector.inactive { opacity: 0.45; }
.sector-sep {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0.1rem 0 0.3rem;
}

/* Campi datetime per unità: ordine YYYY/MM/DD hh:mm:ss */
.dt-label { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.3rem; }
.dt-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
/* ogni gruppo (data | ora) è indivisibile: l'a-capo avviene solo tra i due */
.dt-group { display: inline-flex; align-items: center; gap: 0.2rem; flex-wrap: nowrap; }
.dt-row span { color: var(--muted); }
.dt-row input { margin-top: 0; padding: 0.4rem 0.25rem; text-align: center; }
.dt-row input.dt-y { width: 3.6rem; }
.dt-row input.dt-u { width: 2.4rem; }
/* niente freccine spinner: campi più compatti (restano digitabili) */
.dt-row input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.dt-row input::-webkit-outer-spin-button,
.dt-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.dt-row select {
  margin: 0;
  padding: 0.4rem 0.3rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
}

.now-btn {
  width: auto;
  margin-top: 0.2rem;
  padding: 0.35rem 0.9rem;
  background: #3b7dd8;        /* azzurro più tenue/scuro del Compute (--accent) */
  color: #0d1117;
  border: none;
  font-weight: 600;
  font-size: 0.85rem;
}
.now-btn:hover { filter: brightness(1.1); }
legend { color: var(--muted); padding: 0 0.4rem; font-size: 0.85rem; }
.row { display: flex; gap: 0.6rem; }
.row label { flex: 1; margin-bottom: 0; }

button {
  width: 100%;
  padding: 0.6rem;
  background: var(--accent);
  color: #0d1117;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }
/* Compute idle = output aggiornato (attenuato); senza .idle = armato (accent pieno) */
#compute { transition: background 0.15s, color 0.15s; }
#compute.idle { background: #2b3340; color: var(--muted); }

.status { margin-top: 0.7rem; font-size: 0.85rem; min-height: 1.2em; }
.status.busy { color: var(--accent); }
.status.ok   { color: var(--ok); }
.status.error{ color: var(--err); }
.status.warn { color: #e3b341; }

/* Barra rapida condivisa (Object + UTC) — in alto, in evidenza */
.quickbar {
  background: linear-gradient(180deg, rgba(88, 166, 255, 0.07), rgba(88, 166, 255, 0.02));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin: 0 0 1rem;
  grid-column: 1 / -1;   /* nelle pagine a griglia (Ephemeris/Charts) occupa tutta la larghezza */
}
.qb-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.4rem; }
.qb-field { position: relative; display: flex; flex-direction: column; gap: 0.25rem; }
.qb-field label {
  margin: 0; font-size: 0.72rem; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--accent);
}
/* campo oggetto compatto (~24 caratteri): non serve più largo, lascia spazio agli altri moduli */
.qb-object { flex: 0 1 auto; min-width: 0; }
.qb-object input { width: 24ch; max-width: 100%; }
.qb-utc-row { display: flex; gap: 0.4rem; }
.qb-utc input { width: 12.5rem; }
.qb-utc-row button {
  padding: 0 0.7rem; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 0.85rem;
}
.qb-utc-row button:hover { border-color: var(--accent); }
/* Go ≡ Invio: spento = output aggiornato (nessuna modifica pending); .armed = c'è da calcolare (accent pieno). */
#qb-go { transition: background 0.15s, color 0.15s, border-color 0.15s; }
#qb-go:not(.armed) { background: #2b3340; color: var(--muted); }
#qb-go.armed { background: var(--accent); color: #0d1117; border-color: var(--accent); font-weight: 600; }
/* Save/Load della situazione (file .sphaera) — nell'header, comune a tutte le pagine. */
.situation-ctl { display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }
.situation-ctl label { color: var(--muted); font-size: 0.8rem; }
.situation-ctl button {
  padding: 0.2rem 0.7rem; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 0.82rem;
}
.situation-ctl button:hover { border-color: var(--accent); }
.qb-status { font-size: 0.8rem; align-self: center; min-height: 1.1em; }
.qb-status.busy { color: var(--accent); }
.qb-status.ok   { color: var(--ok); }
.qb-status.error{ color: var(--err); }
.qb-status.warn { color: #e3b341; }
/* nella barra la tendina è un overlay sotto al campo oggetto (largo quanto serve, ≥ campo) */
.qb-object .candidates {
  position: absolute; top: 100%; left: 0; right: auto; z-index: 30; margin-top: 0.2rem;
  min-width: 100%; width: max-content; max-width: 24rem;
}

/* Tendina di disambiguazione del campo oggetto (Ephemeris) */
.candidates {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
}
.candidate {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.candidate:last-child { border-bottom: none; }
.candidate:hover { background: rgba(88, 166, 255, 0.12); }
.cand-label { color: var(--text); font-size: 0.9rem; font-weight: 600; }
.cand-sub   { color: var(--muted); font-size: 0.76rem; }

.empty { color: var(--muted); }

/* commento sul tipo di calendario (~proleptic gregorian calendar~ ecc.): arancione, salta all'occhio */
.cal-comment { color: #e08a3c; }

.result-section { margin-bottom: 1.5rem; }
.result-section h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
}

.obs-name {
  font-size: 0.98rem;
  font-weight: 600;
  color: #d2a8ff;            /* viola tenue: nome località trovata */
  margin-bottom: 0.5rem;
}
.obs-name.not-found {
  color: #d29922;            /* ambra: località non trovata (default) */
  font-weight: 500;
  font-style: italic;
}
.star-comments {             /* nota/etimologia del nome IAU (testo libero) */
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0.6rem 0 0;
}

table { border-collapse: collapse; width: 100%; }
td, th { padding: 0.3rem 0.6rem; text-align: left; vertical-align: top; font-size: 0.88rem; }
th { color: var(--muted); font-weight: 500; white-space: nowrap; width: 1%; }
tr:not(:last-child) td, tr:not(:last-child) th { border-bottom: 1px solid #21262d; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* tabelle annidate (es. coordinate → ra/dec) senza bordi pesanti */
td table { background: rgba(255,255,255,0.02); border-radius: 4px; }
td table th { color: #6e7681; }

/* Rise/transit/set: segnalazione circumpolare / anti-circumpolare + tabella */
.events-note {
  margin: 0 0 0.6rem 0;
  padding: 0.4rem 0.7rem;
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: rgba(88, 166, 255, 0.08);
  color: var(--text);
  font-size: 0.88rem;
}
.events-table th, .events-table td { white-space: nowrap; }
.events-table tr:first-child th { color: var(--muted); font-weight: 600; }
.events-table th:first-child { color: var(--text); font-weight: 600; }
.events-table td:nth-child(4), .events-table td:nth-child(5),
.events-table tr:first-child th:nth-child(4),
.events-table tr:first-child th:nth-child(5) { text-align: right; }
.twilight-table th, .twilight-table td { white-space: nowrap; }
.twilight-table tr:first-child th { color: var(--muted); font-weight: 600; }
.twilight-table th:first-child { color: var(--text); font-weight: 600; }

/* Coordinate: un blocco per frame, simboli greci come etichette */
.coord-frame { margin-bottom: 0.8rem; }
.coord-frame:last-child { margin-bottom: 0; }
.coord-title { color: var(--muted); font-size: 0.82rem; margin-bottom: 0.2rem; }
.coord-frame th { font-style: italic; color: var(--text); width: 1.6rem; text-align: center; }

/* ── Sky map ──────────────────────────────────────────────── */
/* La sfera è l'elemento principale: barra di controlli in alto, SVG a tutta
   larghezza (override del layout a due colonne; meglio anche su tablet/telefono). */
.skymap-main { display: block; padding: 1rem 1.5rem 1.5rem; position: relative; }

/* ── Layout a moduli responsivi ───────────────────────────────
   Riga di moduli di controllo (quickbar + input specifici di pagina): in riga su
   desktop, impilati sotto la soglia generica (720px). Il gap del contenitore
   sostituisce i margini dei singoli moduli. */
.control-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.control-row .quickbar { flex: 0 1 auto; margin: 0; }
.control-row .skymap-bar { flex: 1 1 360px; margin: 0; }
@media (max-width: 720px) {
  .control-row { flex-direction: column; }
  .control-row > * { width: 100%; }
}

/* Star Atlas: controlli a sinistra, campo stellare elastico a destra (≥1024px);
   sotto la soglia i controlli stanno sopra e il campo scende a tutta larghezza. */
.atlas-controls .quickbar { margin: 0 0 0.8rem; }
.atlas-controls .skymap-bar { margin: 0; }
@media (min-width: 1024px) {
  .atlas-main { display: grid; grid-template-columns: minmax(260px, 300px) 1fr; gap: 1.5rem; align-items: start; }
  .atlas-controls .skymap-bar { flex-direction: column; align-items: stretch; gap: 0.8rem; }
  .atlas-controls .skymap-bar .bar-sep { display: none; }   /* il divisore verticale non ha senso impilato */
}
@media (max-width: 1023px) {
  .atlas-controls { margin-bottom: 1rem; }
}

/* Star Atlas — riquadro di identificazione al click (overlay, posizionato vicino al click) */
.atlas-info {
  position: absolute; z-index: 20; min-width: 8rem; max-width: 16rem;
  background: rgba(13, 17, 23, 0.95); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.5rem 0.7rem; color: var(--text); font-size: 0.85rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.atlas-info-title { font-weight: 600; color: #d2a8ff; margin-bottom: 0.25rem; padding-right: 1rem; }
.atlas-info-row { color: var(--muted); font-size: 0.8rem; line-height: 1.4; }
.atlas-info-coords { margin-top: 0.35rem; padding-top: 0.3rem; border-top: 1px solid var(--border);
  font-size: 0.8rem; color: var(--muted); }
.atlas-info-coord { display: flex; gap: 0.5rem; font-family: ui-monospace, monospace; line-height: 1.45; }
.atlas-info-sym { color: #9fb4cc; width: 1.1rem; display: inline-block; }
.atlas-info-x {
  position: absolute; top: 0.2rem; right: 0.4rem; background: none; border: none;
  color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0;
}
.atlas-info-x:hover { color: var(--text); }
.skymap-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.2rem; margin-bottom: 0.8rem;
}
.skymap-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: min(760px, 92vmin);   /* resta quadrato e non sfora in altezza */
  margin: 0 auto;
  background: transparent;          /* il disco interno è illuminato via radialGradient SVG */
}
/* gruppo di toggle orientamento (Top: N/S — View: inside/outside) */
.orient-group { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.bar-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 0.2rem; }

/* cross-pad: esplorazione parallela di tempo (←/→) e latitudine (↑/↓), reset al centro */
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 1.7rem);
  grid-template-rows: repeat(3, 1.7rem);
  gap: 2px;
}
.dpad button {
  width: 100%; height: 100%;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.dpad button:hover { filter: brightness(1.4); }
.dpad-up    { grid-area: 1 / 2; }
.dpad-left  { grid-area: 2 / 1; }
.dpad-reset { grid-area: 2 / 2; border-radius: 50%; color: var(--accent); }
.dpad-right { grid-area: 2 / 3; }
.dpad-down  { grid-area: 3 / 2; }

.step-sel { display: flex; flex-direction: column; gap: 2px; }
.skymap-bar select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1rem 0.2rem;
  font-size: 0.78rem;
}
.explore-readout {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}
.lbl-check { display: flex; align-items: center; gap: 0.25rem; margin: 0; font-size: 0.82rem; }
.lbl-check input { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.seg button {
  width: auto;
  padding: 0.3rem 0.8rem;
  background: var(--bg);
  color: var(--text);
  border: none;
  border-radius: 0;
  font-size: 0.85rem;
  font-weight: 500;
}
.seg button.on { background: var(--accent); color: #0d1117; font-weight: 600; }
.orient-view { color: var(--muted); font-size: 0.82rem; font-style: italic; }

/* ── Tracks (Tracce) ── */
.tracks-end { display: inline-flex; align-items: center; gap: 0.12rem; }
.tracks-end input.dt-y { width: 3.4rem; }
.tracks-end input.dt-u { width: 2.2rem; }
.skymap-bar input.dt-u, .skymap-bar input.dt-y, .skymap-bar input#step-val {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.1rem 0.2rem; font-size: 0.78rem; text-align: center;
}
.skymap-bar input#step-val { width: 3rem; }
/* niente freccine su/giù sui campi numerici della barra (come Charts) */
.skymap-bar input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.skymap-bar input[type=number]::-webkit-outer-spin-button,
.skymap-bar input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tracks-note { font-style: italic; color: var(--accent); }
/* spunte per-traccia: una per corpo, nome colorato come la sua traccia */
.track-toggles { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.55rem; max-width: 32rem; }
.track-tog { font-size: 0.8rem; }
.track-tog-name { font-weight: 600; }

/* ── Star Atlas ── */
.atlas-center { color: var(--accent); font-weight: 600; }
.atlas-fov { color: var(--text); }
.atlas-dome { width: 110px; height: 110px; cursor: crosshair; }
.atlas-svg { display: block; width: 100%; height: auto; background: transparent; }

/* ── Info page ── */
.info-main { display: block; padding: 1rem 1.5rem 1.5rem; }
.panel.info { max-width: 1100px; margin: 0 auto; }
.panel.info .info-table, .panel.info .info-list { max-width: none; }
.panel.info h3 { margin: 1.4rem 0 0.5rem; color: var(--accent); font-size: 1.05rem; }
.panel.info p { line-height: 1.5; }
.info-table { width: 100%; border-collapse: collapse; margin: 0.4rem 0 0.6rem; font-size: 0.9rem; }
.info-table th, .info-table td { text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.info-table th { color: var(--muted); font-weight: 600; }
.info-table td:first-child { white-space: nowrap; }
.info-list { margin: 0.3rem 0 0.6rem; padding-left: 1.2rem; line-height: 1.55; }
.info-list li { margin: 0.15rem 0; }
.panel.info code { background: var(--bg); padding: 0.05rem 0.3rem; border-radius: 4px; font-size: 0.85em; }

/* ── Observer map (Leaflet) ── */
.obs-map { height: 360px; width: 100%; border: 1px solid var(--border); border-radius: 8px; }
.map-hint { color: var(--muted); font-size: 0.78rem; margin: 0.4rem 0 0.8rem; }
/* tooltip/controlli Leaflet su tema scuro restano leggibili: forza testo scuro nei box bianchi */
.leaflet-container { background: #0d1117; }
.leaflet-control-attribution, .leaflet-control-attribution a { color: #333 !important; }

/* ── Charts ── */
.dt-hint { color: var(--muted); font-size: 0.72rem; margin-top: 0.3rem; }
.step-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.step-row input { width: 6rem; }
.step-row select { width: auto; }
.point-count { color: var(--muted); font-size: 0.82rem; }
.point-count.bad { color: #e06a5a; }
.qty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 1rem; }
.qty-grid .check { font-size: 0.85rem; }
.qty-grid .check.disabled { opacity: 0.4; }
.charts-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.series-wrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; }
.series-table { border-collapse: collapse; font-size: 0.82rem; }
.series-table th, .series-table td {
  border: 1px solid var(--border); padding: 0.25rem 0.6rem; text-align: right; white-space: nowrap;
}
.series-table thead th {
  position: sticky; top: 0; background: var(--panel); color: var(--accent); font-weight: 600;
}
.series-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }

/* Chart (focus + context) */
.chart-area { display: flex; flex-direction: column; gap: 0.8rem; }
.chart-active { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; }
.chart-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.3rem; }
.chart-title { font-weight: 600; font-size: 0.92rem; }
.cmp-label { margin: 0; color: var(--muted); font-size: 0.82rem; display: flex; align-items: center; gap: 0.3rem; }
.cmp-label select { width: auto; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.thumb {
  border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.35rem;
  cursor: pointer; opacity: 0.6; transition: opacity 0.15s, border-color 0.15s; width: 150px;
}
.thumb:hover { opacity: 1; border-color: var(--accent); }
.thumb.compare { border-color: #e0a458; opacity: 0.85; }
.thumb-label { font-size: 0.72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb-svg { width: 100%; height: 46px; display: block; }

/* ── Simple Sun ─────────────────────────────────────────────── */
.sun-input-row { display: flex; align-items: baseline; gap: 0.6rem; margin: 0.5rem 0 0; }
.sun-input-row label { min-width: 10rem; color: var(--muted); font-size: 0.88rem; }
.sun-input-row input { width: 9rem; }
.sun-dt-hint { font-size: 0.78rem; color: var(--accent); margin-left: 0.5rem; }

.sun-desc { font-size: 0.83rem; color: var(--muted); margin: 0 0 0.8rem; line-height: 1.5; }
.sun-desc a { color: var(--accent); word-break: break-all; }
.sun-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; margin-top: 0.5rem; }
.sun-table td { padding: 0.2rem 0.5rem; vertical-align: middle; border-bottom: 1px solid rgba(255,255,255,0.04); }
.sv-sym  { width: 2.8rem; font-style: italic; color: var(--accent); text-align: center; white-space: nowrap; }
.sv-name { width: 18rem; color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.sv-val  { font-family: monospace; white-space: nowrap; }
.sv-num  { color: var(--text); }
.sv-dms  { color: var(--muted); font-size: 0.82rem; }
.sv-hms  { color: #6ea8d8; font-size: 0.82rem; }
.sv-hdr  { background: rgba(88, 166, 255, 0.07); }
.sv-hdr td { padding: 0.3rem 0.5rem; color: var(--accent); font-weight: 600; font-size: 0.8rem;
             letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--border); }

/* ── Planar Sundial ──────────────────────────────────────────────────────── */
.sd-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.sd-tab  { padding: 0.3rem 0.9rem; border: 1px solid var(--border); border-radius: 4px;
           background: transparent; color: var(--muted); cursor: pointer; font-size: 0.85rem; }
.sd-tab.active   { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; }
.sd-tab:disabled { opacity: 0.35; cursor: not-allowed; }

.sd-params { display: grid; grid-template-columns: max-content 1fr; gap: 0.18rem 1.2rem;
             font-size: 0.85rem; margin-bottom: 0.8rem; }
.sd-param-key { color: var(--muted); font-style: italic; white-space: nowrap; }
.sd-param-val { font-family: monospace; color: var(--text); }

.sd-sep { margin: 0.8rem 0; border: none; border-top: 1px solid var(--border); }

.sd-line { margin-bottom: 1.4rem; }
.sd-line-hdr  { font-size: 0.9rem; font-weight: 600; color: var(--accent);
                border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; margin-bottom: 0.4rem; }
.sd-line-meta { font-weight: normal; color: var(--muted); font-size: 0.8rem; margin-left: 0.6rem; }

.sd-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.sd-table th { color: var(--muted); font-weight: 600; padding: 0.15rem 0.6rem;
               border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.sd-table th:first-child { text-align: left; }
.sd-table td { padding: 0.12rem 0.6rem; text-align: right; font-family: monospace;
               white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,0.03); }
.sd-table td:first-child { text-align: left; color: var(--muted); font-family: inherit; }
.sd-table tr.sd-dark td { opacity: 0.35; }
.sd-table td.sd-noon { color: var(--accent); font-weight: 600; }
.sd-lit-yes { color: #58d68d; }
.sd-lit-no  { color: #555; }
.sd-csv-btn { margin-top: 0.6rem; font-size: 0.82rem; padding: 0.3rem 0.9rem; }

/* Sundial — 2D drawing */
.sd-2d-bar { margin: 8px 0; }
.sd-grid-btn {
  background: #2b3340; color: #cdd6e0; border: 1px solid #3a4350;
  border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 0.85rem;
}
.sd-grid-btn.on { background: #3a4a5e; color: #eaf2ff; border-color: #4d8fe0; }
.sd-2d-svg, .sd-tri-svg {
  width: 100%; display: block; margin: 0 auto;
  background: #ffffff; border: 1px solid #c8ccd2; border-radius: 8px;
}
.sd3-bar { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; overflow-x: auto; }
.sd3-bar .sd-grid-btn { padding: 3px 10px; font-size: 0.78rem; white-space: nowrap; }
.sd-3d-host {
  width: 100%; margin: 0 auto; border: 1px solid #2a323d; border-radius: 8px;
  overflow: hidden; background: #0d1117; line-height: 0;
}
.sd-3d-host canvas { display: block; width: 100%; }
.sd-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin: 10px 2px; font-size: 0.83rem; color: #cdd6e0;
}
.sd-legend .sd-leg-title { color: #9aa4b2; margin-right: 2px; }
.sd-leg-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sd-leg-sw {
  display: inline-block; width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.35); vertical-align: middle; flex: none;
}
.sd-2d-bg { fill: #ffffff; }
.sd-grid-line { stroke: #d6dae0; stroke-width: 1; }
.sd-grid-num { fill: #6a7078; font-size: 10px; }
.sd-axis { stroke: #444; stroke-width: 1.3; }
.sd-axis-lbl { fill: #333; font-size: 12px; font-style: italic; }
.sd-hour { stroke: #555; stroke-width: 1; fill: none; }
.sd-hour-dim { stroke: #b0b4ba; stroke-dasharray: 4 4; }
.sd-hour-lbl { fill: #333; font-size: 10px; text-anchor: middle; }
.sd-decl-lbl { font-size: 15px; text-anchor: middle; }
.sd-substile { stroke: #8a5a10; stroke-width: 1.4; stroke-dasharray: 2 3; }
.sd-pt { fill: #d98012; stroke: #333; stroke-width: 1; }
.sd-pt-o { fill: #1f5fb0; }
.sd-pt-lbl { fill: #222; font-size: 11px; }
.sd-tri-title { text-align: center; color: var(--muted); font-size: 0.85rem; margin: 14px 0 4px; }
.sd-tri-lbl { fill: #222; font-size: 12px; }