/* ═══════════════════════════════════════════════════════════════════
   NRI Outpost — Dark mode toggle button styling + dark-specific tweaks
   The [data-dark="true"] palette overrides live inline in each HTML
   page's <style> block (so they ship in the same payload as the rest of
   the palette). This file only adds the toggle UI + small fixes to
   elements that needed slight dark-mode adjustments.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Toggle button (used in nav + mobile drawer) ──────────── */
.dm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dm-toggle:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.dm-toggle-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
}
.dm-toggle-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.dm-toggle-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Mobile drawer flavour — a full-width row with the label visible */
.mob-drawer .dm-toggle {
  width: 100%;
  justify-content: flex-start;
  padding: 12px 14px;
  font-size: 13px;
  border-radius: 8px;
  margin-top: 12px;
}
.mob-drawer .dm-toggle-icon { width: 18px; height: 18px; margin-right: 4px; }
.mob-drawer .dm-toggle-icon svg { width: 18px; height: 18px; }

/* ─── Dark-mode tweaks for elements that need small adjustments ─
   Most of the site uses palette variables and adapts automatically.
   These overrides catch a few elements that hardcoded a colour or
   need different treatment in dark mode for legibility / contrast. */

[data-dark="true"] {
  color-scheme: dark;
}

/* "Inverted dark surface" cards — anything that's `background: var(--ink)`
   in the light palette to look like a dark accent block. In dark mode
   --ink flips to cream, so these would otherwise look stuck-light next
   to the now-dark page. Pin them to a literal near-black so they stay
   visually consistent in both themes. */
[data-dark="true"] .converter,
[data-dark="true"] .emerg-universal,
[data-dark="true"] .duty-links,
[data-dark="true"] .rail-pnr,
[data-dark="true"] .layover,
[data-dark="true"] .health-estimator,
[data-dark="true"] .wizard-promo,
[data-dark="true"] .about-card,
[data-dark="true"] .about-quote,
[data-dark="true"] .cb-intro,
[data-dark="true"] .check-box {
  background: #14110d;
  color: #f4ede1;
  border: 1px solid #2a241d;
}
/* Inputs nested inside the pinned-dark cards (the converter's number
   inputs, the layover slider's track, etc.) should stay dark too. */
[data-dark="true"] .layover input,
[data-dark="true"] .layover select,
[data-dark="true"] .health-estimator input,
[data-dark="true"] .health-estimator select {
  background: rgba(255,255,255,0.06);
  color: #f4ede1;
  border-color: rgba(255,255,255,0.14);
}

/* The hero quickjump bar has a hardcoded background that becomes
   illegible in dark mode. Re-skin it. */
[data-dark="true"] .hero-quickjump a {
  color: var(--ink);
}

/* Section feedback widget pulls from var(--paper-2); fine in dark.
   But the saffron "voted" state on the button needs adjustment. */
[data-dark="true"] .feedback-btn.voted {
  color: #1a1410;
}

/* Tools section cards live on --paper-2 — adapts cleanly. The IST
   status pills already use color-mix(in oklab, ...) so the legibility
   shifts gracefully in dark mode. */

/* Map embed iframes can't be themed by us. The map modal frame itself
   uses palette vars; only the inner Google embed stays light. */

/* Diet pref pill — adapt the dropdown background */
[data-dark="true"] .diet-pref-pop {
  background: var(--paper-2);
  border-color: var(--rule);
}

/* Inputs/selects — adapt placeholder + background */
[data-dark="true"] input,
[data-dark="true"] select,
[data-dark="true"] textarea {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--rule);
}
[data-dark="true"] input::placeholder,
[data-dark="true"] textarea::placeholder { color: var(--ink-3); }

/* Smooth the cross-fade when the user flips the toggle */
html { transition: background-color 0.25s ease, color 0.25s ease; }