:root {
  --bg: #121212;
  --card: #1e1e1e;
  --text: #e0e0e0;
  --accent: #00bcd4;
  --border: #333;
  --danger: #ff5252;
  --ok: #4caf50;
  --chart-az: #00bcd4;
  --chart-lop: #ffca28;
  --chart-grid: #3a3a3a;
  --chart-fix: #ffffff;
  --chart-bisector: #bdbdbd;
  --chart-dr: #8bc34a;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 16px;
  display: flex;
  justify-content: center;
}
.app-container {
  width: 100%;
  max-width: 520px;
}
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
h1 {
  font-size: 1.3rem;
  color: var(--accent);
  margin: 0;
}
.header-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.header-version {
  font-size: 0.68rem;
  color: var(--accent);
  font-family: monospace;
  opacity: 0.75;
  white-space: nowrap;
}
.header-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.header-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-clear-all {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  font-weight: bold;
}

/* --- Hamburger menu --- */
.nav-menu-wrap {
  position: relative;
}
.btn-hamburger {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.btn-hamburger span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
}
.nav-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: #2a2a2a;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  z-index: 30;
  overflow: hidden;
}
.nav-menu.open {
  display: block;
}
.nav-menu-item {
  display: block;
  padding: 11px 14px;
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid #383838;
}
.nav-menu-item:last-child {
  border-bottom: none;
}
.nav-menu-item:hover,
.nav-menu-item:active {
  background: var(--accent);
  color: #000;
}
.nav-menu-header {
  display: block;
  padding: 9px 14px 3px;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #888;
}
.nav-menu-item.nav-menu-sub {
  padding-left: 26px;
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.section-title {
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--accent);
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.sub-title {
  font-size: 0.9rem;
  font-weight: bold;
  color: #aaa;
  margin: 12px 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-group {
  margin-bottom: 12px;
}
label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 4px;
  color: #aaa;
}
.input-row {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

/* Section 2 Observations Layout */
.observation-item {
  margin-bottom: 8px;
}
.observation-side-label {
  width: 16px;
  flex-shrink: 0;
  font-size: 0.85rem;
  color: #aaa;
  font-weight: bold;
  text-align: center;
}

.s-deg {
  min-width: 42px;
  flex: 1;
}

.s-min {
  min-width: 48px;
  flex: 1;
}

/* Groups the two altitude fields together, visually separated from the
   time group by the same dashed-divider convention used elsewhere on this
   page (see .almanac-col-border) -- previously just a margin, which read
   as a gap rather than a deliberate separation between two different
   kinds of field. */
.height-group {
  display: flex;
  gap: 6px;
  flex: 2;
  min-width: 0;
  border-left: 1px dashed var(--border);
  padding-left: 10px;
}

/* Inline layout for Section 1 Date, Celestial Body & Name */
.body-inline-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.body-inline-col {
  flex: 1;
}

/* Section 3 Almanac Grid with Side Labels */
.almanac-table {
  background: #181818;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.almanac-header-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 8px;
  align-items: flex-end;
}

.almanac-data-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 8px;
  align-items: center;
}

.almanac-row-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.almanac-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 0;
}

.side-label {
  color: #aaa;
  font-weight: bold;
  font-size: 0.85rem;
}

.col-header-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.col-header-box .col-time {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--accent);
  text-transform: uppercase;
}

.col-header-box .col-sub {
  font-size: 0.75rem;
  color: #aaa;
}

.almanac-col-border {
  border-right: 1px dashed var(--border);
  padding-right: 8px;
  min-width: 0;
}

/* All three almanac input boxes (Deg / Min / N-S) share equal, flexible
   width with no hard minimums, so a 3-box Declination row fits in the same
   column width as a 2-box GHA row -- which is also what keeps the Base|Next
   divider aligned vertically across the header, GHA, and Declination blocks
   (they all share the same .almanac-inputs-grid 1fr/1fr definition; forcing
   any one row's content wider than its 1fr share is what breaks alignment). */
.deg-box,
.min-box {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 8px 2px;
  font-size: 0.92rem;
}

.select-compact {
  flex: 1;
  min-width: 0;
  width: auto !important;
  padding: 8px 0;
  text-align: center;
  font-size: 0.92rem;
}

/* Tighter gap specifically for 3-box rows (Deg / Min / N-S), since they have
   one more element competing for the same column width as a 2-box GHA row. */
.input-row-3 {
  gap: 4px;
}


input, select {
  background: #2a2a2a;
  border: 1px solid var(--border);
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
}
/* type="number" is used specifically (and only) where a field needs a
   minus sign typeable directly -- e.g. Timezone Offset -- since iOS only
   shows a "-" key on the number-style keypad, not on inputmode="decimal"'s.
   The spin-button arrows that come with type="number" don't match this
   app's plain custom-styled inputs anywhere else, so they're suppressed
   here rather than left inconsistent on just these few fields. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="checkbox"] {
  width: auto;
  height: auto;
  -webkit-appearance: checkbox;
  appearance: checkbox;
  background: transparent;
  border: none;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
select {
  width: 110px;
}
.time-box {
  width: 36px;
  text-align: center;
  padding: 8px 2px;
}
.time-hm {
  display: inline-flex;
  align-items: center;
  background: #2a2a2a;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 6px;
}
/* The compact "HH:MM" / "HH:MM:SS" look: each digit-box keeps its existing
   behavior (numeric-only, auto-advance -- see wireDigitBox/autoFocusNext)
   entirely unchanged; only its OWN border/background is removed here so the
   shared .time-hm wrapper is what reads as a single field, with the colons
   as plain static text between the boxes rather than gaps between separate
   inputs. Deliberately not type="time": that's a native control, and on iOS
   it always shows a scroll-wheel picker (not a keyboard) plus AM/PM unless
   the device itself is set to 24h -- neither is under this page's control
   with type="time". type="text" inputmode="numeric" (already what these
   boxes use) is what gets a plain number keypad with no AM/PM at all. */
.time-hm .time-box {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 1px;
  width: 24px;
}
/* Without the box's own border (removed above so the group reads as one
   field), there's otherwise no visible cue for WHICH digit position is
   active -- most noticeable right when a new observation row auto-focuses
   its Hour box (see addObservationLine's autoFocus), where the focus move
   is real (confirmed: document.activeElement does update correctly) but
   was easy to read as "didn't happen" with nothing to see. A background
   highlight on just the focused box restores that visible cue without
   touching any of the underlying focus/auto-advance logic. */
.time-hm .time-box:focus {
  outline: none;
  background: rgba(0, 188, 212, 0.18);
  border-radius: 3px;
}
.time-hm:focus-within {
  border-color: var(--accent);
}
.time-hm > span {
  color: #fff;
  user-select: none;
}
.planning-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.planning-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.planning-cell label {
  font-size: 0.72rem;
  color: #aaa;
}
.planning-cell-lat {
  width: 44px;
}
.btn-add {
  background: transparent;
  border: 1px dashed var(--accent);
  color: var(--accent);
  padding: 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
}
.btn-del {
  background: var(--danger);
  color: #fff;
  border: none;
  padding: 8px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  flex-shrink: 0;
}
.btn-calc {
  width: 100%;
  background: var(--accent);
  color: #000;
  font-weight: bold;
  border: none;
  padding: 12px;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 12px;
}
.btn-secondary {
  width: 100%;
  background: transparent;
  color: var(--accent);
  font-weight: bold;
  border: 1px solid var(--accent);
  padding: 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 8px;
}
.save-export-row {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.save-export-row .btn-secondary,
.save-export-row .btn-clear-all {
  width: auto;
  flex: 1;
  margin-top: 0;
  padding: 7px 4px;
  font-size: 0.85rem;
  text-align: center;
}
.summary-box {
  background: #252525;
  padding: 10px;
  border-radius: 6px;
  border-left: 3px solid var(--accent);
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
}
.summary-box-error {
  border: 1px solid var(--danger);
  border-left: 3px solid var(--danger);
}
.results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.res-box {
  background: #252525;
  padding: 10px 6px;
  border-radius: 6px;
  border-left: 3px solid var(--accent);
  text-align: center;
  min-width: 0;
}
.res-label {
  font-size: 0.68rem;
  color: #888;
  text-transform: uppercase;
}
.res-value {
  font-size: 0.95rem;
  font-weight: bold;
  margin-top: 4px;
  word-break: break-word;
}
.input-error {
  border: 2px solid var(--danger) !important;
  background-color: rgba(255, 82, 82, 0.1) !important;
}
.error-msg {
  color: var(--danger);
  font-size: 0.75rem;
  margin-top: 4px;
  display: none;
  font-weight: bold;
}

.usno-status {
  font-size: 0.8rem;
  margin-top: 6px;
  min-height: 1.1em;
  line-height: 1.4;
}
.usno-status.loading {
  color: var(--accent);
}
.usno-status.ok {
  color: var(--ok);
}
.usno-status.error {
  color: var(--danger);
  font-weight: bold;
}
@keyframes autofillFlash {
  0% { background-color: rgba(76, 175, 80, 0.35); }
  100% { background-color: #2a2a2a; }
}
.autofilled-flash {
  animation: autofillFlash 1.2s ease-out;
}

/* --- Offline Almanac Cache --- */
.cache-blurb {
  font-size: 0.8rem;
  color: #aaa;
  margin: 0 0 12px 0;
  line-height: 1.45;
}
.planning-manual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
@media (max-width: 480px) {
  .planning-manual-grid {
    grid-template-columns: 1fr;
  }
}
.cache-progress {
  font-size: 0.8rem;
  margin-top: 6px;
  min-height: 1.1em;
  line-height: 1.4;
}
.cache-progress.loading {
  color: var(--accent);
}
.cache-progress.ok {
  color: var(--ok);
}
.cache-progress.error {
  color: var(--danger);
  font-weight: bold;
}
.cache-summary-text {
  font-size: 0.8rem;
  color: #888;
  margin: 10px 0;
  line-height: 1.5;
}
.btn-danger-outline {
  border-color: var(--danger);
  color: var(--danger);
}
.btn-back {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 8px 0 0;
  vertical-align: middle;
}

/* --- Fixes list page --- */
.fix-list-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.btn-new-fix {
  background: var(--accent);
  color: #000;
  font-weight: bold;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.sight-color-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
  margin-right: 10px;
  vertical-align: middle;
}
.saved-item-info-row {
  display: flex;
  align-items: center;
}

/* --- <details>/<summary> collapsible section (Offline Almanac Cache) --- */
details > summary.cache-summary-toggle {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
details > summary.cache-summary-toggle::-webkit-details-marker {
  display: none;
}
details > summary.cache-summary-toggle::after {
  content: '\25BE';
  font-size: 0.8rem;
  color: #888;
  transition: transform 0.15s ease;
  margin-left: 8px;
}
details[open] > summary.cache-summary-toggle::after {
  transform: rotate(180deg);
}
details > summary.cache-summary-toggle {
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: 12px;
}
details:not([open]) > summary.cache-summary-toggle {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* --- Searchable combo (Star Name autocomplete) --- */
.combo-wrap {
  position: relative;
}
.combo-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  background: #2a2a2a;
  border: 1px solid var(--border);
  border-radius: 4px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.combo-item {
  padding: 9px 12px;
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid #333;
}
.combo-item:last-child {
  border-bottom: none;
}
.combo-item:hover,
.combo-item.active {
  background: var(--accent);
  color: #000;
}

/* --- Chart / Plot --- */
.chart-wrap {
  display: flex;
  justify-content: center;
  position: relative;
}
/* Anything wrapping a chart's actual render target in an extra div (done
   for chartFullscreen.js's benefit -- see its own header comment for why)
   needs that inner div to actually fill the flex container's width;
   otherwise it sizes to its own content instead of the space available,
   and the SVG inside it (which sizes itself as a % of ITS parent) has
   nothing real to size against. This was the actual cause of the chart
   rendering "exceedingly small" in normal view after the fullscreen
   wrapper was introduced -- not something the fullscreen CSS itself
   touched, but a direct structural consequence of adding that wrapper
   without also constraining what's now inside it. Targeted structurally
   (direct child of .chart-wrap) rather than by a specific id, so any
   future chart wrapped the same way gets this automatically rather than
   requiring it to be remembered each time.
*/
.chart-wrap > div {
  width: 100%;
  min-width: 0;
}
.chart-fs-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.chart-fs-reset {
  position: absolute;
  top: 4px;
  right: 40px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.chart-wrap-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden; /* keeps zoomed/panned content from visually escaping the overlay */
  touch-action: none; /* pan/zoom handles its own touch gestures; this stops the browser's own pinch/scroll from fighting it */
}
/* width/height: auto here (with only max-width/max-height:100% capping
   them) was the actual bug reported: this SVG has a viewBox but no
   explicit width/height attribute of its own, so "auto" gives the browser
   nothing concrete to size FROM -- it falls back to a tiny default
   replaced-element size instead of growing to fill the overlay, which is
   exactly what produced a full-screen overlay with no visible chart in
   it. min(90vw, 90vh) sizes both dimensions directly off the viewport
   instead -- since the chart's own viewBox is square, using the same
   value for both gives the largest square that fits within 90% of
   whichever viewport dimension is smaller, with no dependency on the
   flex container's own sizing behavior for an SVG child. */
.chart-wrap-fullscreen .chart-svg {
  width: min(90vw, 90vh);
  height: min(90vw, 90vh);
  max-width: none;
}
body.chart-fs-open {
  overflow: hidden;
}
.chart-select-caption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--text);
  text-align: center;
  z-index: 3;
  pointer-events: none; /* it's a caption, not a control -- taps pass through to the chart underneath */
}
.chart-select-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  padding: 16px 18px 20px;
  z-index: 5;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.4);
}
.chart-select-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
}
.chart-select-title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 6px;
  padding-right: 24px;
}
.chart-select-line {
  font-size: 0.85rem;
  color: #ccc;
  line-height: 1.5;
}
.chart-select-open {
  margin-top: 12px;
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: #000;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.chart-select-picker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  padding: 14px 16px 18px;
  z-index: 5;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.4);
  max-height: 60%;
  overflow-y: auto;
}
.chart-select-picker-title {
  font-size: 0.8rem;
  color: #999;
  margin-bottom: 8px;
}
.chart-select-picker-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 8px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 0.88rem;
  cursor: pointer;
}
.chart-select-picker-row:first-of-type {
  border-top: none;
}
.chart-svg {
  width: 100%;
  height: auto;
  max-width: 100%;
}
.chart-axis-label {
  font-size: 10px;
  fill: #999;
  stroke: var(--card);
  stroke-width: 3px;
  paint-order: stroke fill;
}
.chart-point-label {
  font-size: 12px;
  fill: var(--text);
  font-weight: bold;
}
.chart-az-label {
  font-size: 11px;
  fill: var(--chart-az);
  font-weight: bold;
}
.chart-badge-label {
  font-size: 10px;
  font-weight: bold;
  fill: #000;
}
.chart-transfer-label {
  font-size: 9px;
  font-weight: bold;
  stroke: var(--card);
  stroke-width: 3px;
  paint-order: stroke fill;
}
.chart-lop-label {
  font-size: 9px;
  font-weight: bold;
  stroke: var(--card);
  stroke-width: 3px;
  paint-order: stroke fill;
}
.chart-fix-label {
  font-size: 11px;
  font-weight: bold;
  fill: var(--chart-fix);
  stroke: var(--card);
  stroke-width: 3px;
  paint-order: stroke fill;
}
.plot-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.inline-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
}
.inline-checkbox input {
  width: 16px;
  height: 16px;
}
.method-picker {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.method-btn {
  background: transparent;
  color: var(--text);
  border: none;
  padding: 7px 12px;
  font-size: 0.78rem;
  cursor: pointer;
}
.method-btn + .method-btn {
  border-left: 1px solid var(--border);
}
.method-btn[aria-pressed="true"] {
  background: var(--accent);
  color: #000;
  font-weight: bold;
}
.method-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.chart-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 0.8rem;
  color: #aaa;
}
.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chart-swatch {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top-width: 2.5px;
  border-top-style: solid;
}
.chart-swatch.az {
  border-top-color: var(--chart-az);
  border-top-style: dashed;
}
.chart-swatch.lop {
  border-top-color: var(--chart-lop);
}
.chart-legend-item.fix-legend-item {
  font-weight: bold;
  color: var(--text);
}
.chart-legend-toggle {
  cursor: pointer;
}
.chart-legend-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
}
.fix-icon {
  flex-shrink: 0;
}
.chart-caption {
  text-align: center;
  font-size: 0.8rem;
  color: #888;
  margin-top: 10px;
  line-height: 1.5;
}

/* --- Section 4: Save / Export / Saved Sights --- */
.file-import-label {
  display: block;
  text-align: center;
  background: transparent;
  color: var(--accent);
  font-weight: bold;
  border: 1px solid var(--accent);
  padding: 10px;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 8px;
}
.file-import-label input[type=file] {
  display: none;
}
.saved-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.saved-item {
  background: #252525;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.saved-item-highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.saved-item-info {
  font-size: 0.85rem;
  line-height: 1.3;
}
.saved-item-info .saved-item-title {
  font-weight: bold;
  color: var(--text);
}
.saved-item-info .saved-item-meta {
  color: #888;
  font-size: 0.75rem;
}
.saved-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.btn-mini {
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
}
.btn-mini-load {
  background: var(--accent);
  color: #000;
}
.btn-mini-fix,
.btn-mini-drleg {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.btn-mini-del {
  background: var(--danger);
  color: #fff;
}
.empty-note {
  font-size: 0.8rem;
  color: #888;
  font-style: italic;
  margin-top: 8px;
}
.toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: #2a2a2a;
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.toast.show {
  opacity: 1;
}
.toast.error {
  border-color: var(--danger);
}