/* ==========================================================================
   Flight Deck theme — Nomad Pilot Life
   Always light, unless the reader picks Dark under Customize on the dashboard
   (theme.js then sets <html data-theme="dark"> on every page).
   This file is loaded AFTER each page's own <style>, so it has the final say
   on colours, type and shared components. Change colours in section 1 only.
   Font: Archivo (variable, SIL OFL) in fonts/archivo.woff2.
   ========================================================================== */
@font-face { font-family: "Archivo"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

/* ---------- 1. Tokens ---------- */
:root {
  --bg: #f3f3f0;          /* page: warm off-white */
  --surface: #ffffff;     /* cards */
  --surface-2: #f7f7f4;   /* inset rows inside cards */
  --ink: #111214;         /* main text, primary buttons, active pills */
  --ink-2: #4b4f56;       /* secondary text */
  --ink-3: #80858d;       /* labels, captions */
  --line: #e2e2dc;        /* card borders */
  --line-2: #ecece7;      /* dividers inside cards */
  --line-3: #d3d3cc;      /* form field borders */
  --accent: #1b5fd9;      /* links and focus rings only */
  /* Status colours: only for status, never decoration */
  --good: #17803d;    --good-bg: #e2f3e7;
  --warn: #8a5a00;    --warn-bg: #fdf1d3;
  --caution: #a4460b; --caution-bg: #fde6d5;
  --bad:  #b42318;    --bad-bg:  #fbe3e0;
  --dimmer: #c4c6ca;
  --primary-hover: #2c2e33;
  --scrim: rgba(17,18,20,.45);
  --scrim-solid: rgba(243,243,240,.97);
  --radius: 14px;
  --logo-h: 38px;
  --shadow: 0 1px 2px rgba(17,18,20,.04), 0 4px 18px rgba(17,18,20,.04);
  --shadow-pop: 0 8px 30px rgba(17,18,20,.14);
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Names the Flight Deck pages already use, pointed at the tokens above */
  --surface2: var(--surface-2);
  --border: var(--line);
  --border2: var(--line-3);
  --text: var(--ink);
  --muted: var(--ink-2);
  --dim: var(--ink-3);
  --primary: var(--ink);
  --on-primary: var(--bg);
  --green: var(--good);
  --red: var(--bad);
  --orange: var(--caution);
  --gold: var(--warn);
  --fast: var(--warn);
  --l1: var(--good); --l2: var(--warn); --l3: var(--caution); --l4: var(--bad);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0c0d0f; --surface: #15171a; --surface-2: #1b1e22; --ink: #f1f1ee; --ink-2: #b9bcc2; --ink-3: #868b93;
  --line: #2a2d32; --line-2: #22252a; --line-3: #363a40; --accent: #6d9eff;
  --good: #5cc983; --good-bg: #13301e; --warn: #f0b952; --warn-bg: #33270d;
  --caution: #ff9d5c; --caution-bg: #3a200d; --bad: #ff8a7a; --bad-bg: #3a1714;
  --dimmer: #4a4e55; --primary-hover: #ffffff;
  --scrim: rgba(0,0,0,.66); --scrim-solid: rgba(12,13,15,.97);
  --shadow: none; --shadow-pop: 0 8px 30px rgba(0,0,0,.5); color-scheme: dark;
}

/* the black logo turns white in dark mode */
:root[data-theme="dark"] .brand-site, :root[data-theme="dark"] header .header-top, :root[data-theme="dark"] header .logo1, :root[data-theme="dark"] header .h-logo1, :root[data-theme="dark"] .brand-top, :root[data-theme="dark"] .login-card .logo1, :root[data-theme="dark"] body > .card .logo1 { filter: invert(1); }

/* ---------- 2. Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; overflow-x: hidden; }
a { color: var(--accent); text-underline-offset: 2px; }
button { font-family: var(--font); }
code, .mono { font-family: var(--mono); font-size: .92em; }
.hidden { display: none !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dimmer); border-radius: 8px; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 3. Header: white bar, name left, pill nav right ---------- */
header { background: var(--surface); border-bottom: 1px solid var(--line); gap: 8px 16px;
  padding: 10px max(16px, calc((100% - var(--wrap, 960px)) / 2 + 16px)); }
main { max-width: var(--wrap, 960px); padding-left: 16px; padding-right: 16px; }

/* Brand: the Nomad Pilot Life logo, a divider, then "THE FLIGHT DECK" over the page name.
   The logo replaces the words "Nomad Pilot Life" (still in the page for screen readers). */
.brand-site, header .header-top, header .logo1, header .h-logo1,
.brand-top, .login-card .logo1, body > .card .logo1 {
  font-size: 0; line-height: 0; letter-spacing: 0; color: transparent; flex-shrink: 0;
  height: var(--logo-h); width: calc(var(--logo-h) * 3);
  background: url("npl-logo.png") left center / contain no-repeat; }
.brand, .header-brand:has(.brand-site) { align-items: center; gap: 12px; }
header .header-brand:has(> .header-top) { flex-direction: row; align-items: center; gap: 12px; }
header > div:has(> .logo1), header > div:has(> .h-logo1) { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.brand-sep { font-size: 0; width: 1px; height: 28px; background: var(--line-3); flex-shrink: 0; }
/* tool pages and account: "THE FLIGHT DECK" above the page name */
.brand-page, header .logo2 { display: flex; flex-direction: column; font-size: 11px; font-weight: 600; font-stretch: 100%; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1.3; color: var(--ink-2); }
.brand-page::before, header .logo2::before { content: "The Flight Deck"; font-size: 13px; font-weight: 800; font-stretch: 125%; letter-spacing: .05em; color: var(--ink); }
/* dashboard and admin already say "Flight Deck" in the title */
header .header-name, header .h-logo2 { font-size: 14px; font-weight: 800; font-stretch: 125%; letter-spacing: .05em; text-transform: uppercase; line-height: 1.2; color: var(--ink); }
header .logo2, header .header-name, header .h-logo2 { border-left: 1px solid var(--line-3); padding: 4px 0 4px 12px; }
.logo-sub { font-size: 11.5px; letter-spacing: .04em; text-transform: none; color: var(--ink-3); margin-top: 3px; }
header .h-sub { font-size: 11.5px; letter-spacing: .04em; text-transform: none; color: var(--ink-3); margin: 0; }
header .member-name { font-size: 12.5px; letter-spacing: 0; color: var(--ink-3); }

.nav-link, .logout-btn, .nav-btn { font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2);
  background: transparent; border: 1px solid transparent; padding: 7px 11px; border-radius: 99px; white-space: nowrap; text-decoration: none;
  display: inline-block; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.nav-link:hover, .nav-btn:hover:not(.active) { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.logout-btn:hover { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.nav-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- 4. Headings and numbers ---------- */
.page-title, .welcome-greeting, .hero-title, .cal-month, .country-name, .empty-title, .modal-title,
.preflight-title, .confirm-title, .confetti-title, .celebration-title, .rank-title, .nav-card-title {
  font-family: var(--font); font-stretch: 125%; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.page-title, .welcome-greeting { font-size: clamp(22px, 3.4vw, 30px); }
.hero-title { font-size: clamp(26px, 4.4vw, 36px); }
/* card titles: small, uppercase, wide, letter-spaced */
.section-title, .form-section-label { font-size: 14px; font-weight: 700; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.section-label, .week-label { font-size: 12px; font-weight: 700; font-stretch: 125%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.field-label, .stat-label, .stat-mini-label, .mini-stat-label, .total-hours-label, .session-note-label,
.timer-label, .duration-label, .source-name, .weather-item-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.stat-val, .stat-value, .stat-mini-val, .mini-stat-val, .total-hours, .timer-time, .duration-display {
  font-family: var(--font); font-stretch: 112%; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--ink); }
.stat-val, .stat-value { font-size: clamp(26px, 4vw, 34px); }

/* ---------- 5. Cards ---------- */
.section-card, .form-card, .add-form, .login-card, .card, .timer-card, .country-card, .loading-card, .how-it-works, .rank-bar,
.confetti-box, .preflight-card, .confirm-card, .nav-card, .stat-card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
/* list rows that sit directly on the page */
.challenge-card, .challenge-widget, .watchlist-item, .activity-item, .trip-card, .member-card, .workout-card, .stat-mini {
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); }
/* inset tiles inside a card */
.mini-stat, .hof-entry, .session-note-wrap, .weather-day, .badges-row .badge { border-radius: 11px; }
.nav-card:hover { background: var(--surface); box-shadow: 0 2px 4px rgba(17,18,20,.05), 0 8px 26px rgba(17,18,20,.08); }
.stat-card, .stat-mini { padding-top: 16px; padding-bottom: 14px; }
.modal { background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-pop); }
.confetti-box, .preflight-card, .confirm-card { box-shadow: var(--shadow-pop); }
.celebration { background: var(--scrim-solid); }
.autocomplete, .country-dropdown { border-radius: 0 0 11px 11px; box-shadow: var(--shadow-pop); }
.country-dropdown:empty { display: none; }
.country-card { margin-bottom: 16px; }
/* progress that is nearly or fully done reads as "good" */
.challenge-widget-fill.milestone, .mini-progress-fill.complete { background: var(--good); }
/* counters that sit at the right of a card title */
.task-progress, .avg-score, .section-count { white-space: nowrap; margin-left: 10px; font-size: 12px; font-weight: 600; font-stretch: 100%; letter-spacing: .04em; color: var(--ink-3); }
.avg-score span { color: var(--ink); }
/* 90-day grid: keep the circles a comfortable size on wide screens */
.day-grid { gap: 8px; }
.day-grid .day-cell { width: 100%; max-width: 54px; justify-self: center; font-weight: 600; }
/* watchlist rows wrap instead of pushing off the edge on phones */
.watchlist-item { flex-wrap: wrap; }
.watchlist-country { flex-wrap: wrap; min-width: 0; }
.watchlist-level { white-space: normal; }

/* ---------- 6. Buttons ---------- */
.btn, .search-btn, .add-btn, .add-task-btn, .timer-btn, .preflight-go, .celebration-btn, .confirm-delete, .btn-primary,
.btn-secondary, .preflight-skip, .confirm-cancel, .watchlist-btn, .wl-check-btn, .print-btn {
  font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: 99px; text-decoration: none; }
.btn { border: 1px solid transparent; padding: 9px 16px; }
.btn:hover, .search-btn:hover, .add-btn:hover, .add-task-btn:hover, .preflight-go:hover, .celebration-btn:hover { background: var(--primary-hover); }
.btn-full { padding: 12px 16px; }
.btn-sm, .watchlist-btn, .wl-check-btn { font-size: 12.5px; padding: 5px 11px; white-space: nowrap; }
.print-btn { padding: 9px 16px; }
/* secondary: white pill with a thin border */
.btn-outline, .btn-gray, .btn-secondary, .preflight-skip, .confirm-cancel, .print-btn, .wl-check-btn, .watchlist-btn, .timer-btn.reset-btn {
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-3); }
.btn-outline:hover, .btn-gray:hover, .btn-secondary:hover, .preflight-skip:hover, .confirm-cancel:hover, .print-btn:hover,
.wl-check-btn:hover, .watchlist-btn:hover, .timer-btn.reset-btn:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-3); }
.watchlist-btn.added, .watchlist-btn.added:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* destructive / reset: coloured text on a white pill */
.btn-red { background: var(--surface); color: var(--bad); border-color: var(--line-3); }
.btn-red:hover { background: var(--bad-bg); border-color: transparent; }
.btn-orange { background: var(--surface); color: var(--caution); border-color: var(--line-3); }
.btn-orange:hover { background: var(--caution-bg); border-color: transparent; }
.btn-gold { background: var(--ink); color: var(--bg); }
.confirm-delete { background: var(--bad); color: var(--on-primary); }
.timer-btn.pause { background: var(--warn-bg); color: var(--warn); }
.timer-btn.pause:hover { background: var(--warn-bg); }
.btn-primary { background: var(--line); color: var(--ink-2); }
.btn-primary.ready { background: var(--ink); color: var(--bg); }

/* chips, tabs and small round controls */
.tab, .htab, .int-btn, .quick-btn, .threat-btn, .act-btn, .card-btn, .wl-remove-btn, .remove-btn {
  font-family: var(--font); font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: 99px; background: var(--surface); }
.tab, .htab { font-size: 13px; padding: 6px 13px; border: 1px solid var(--line-3); color: var(--ink-2); cursor: pointer; transition: all .15s; }
.tab:hover, .htab:hover { border-color: var(--ink-3); color: var(--ink); }
.tab.active, .htab.active, .int-btn.selected { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tab-row, .htab-row { gap: 6px; flex-wrap: wrap; }
.cal-arrow, .modal-close, .duration-btn, .rating-btn { border-radius: 50%; background: var(--surface); font-family: var(--font); font-weight: 600; }
.checkbox, .task-check { border-radius: 6px; }
.check-item.checked .checkbox, .task-check.done { color: var(--on-primary); }
.act-btn, .int-btn { color: var(--ink-2); }
.int-btn.selected { color: var(--bg); }
.add-item-btn { border-radius: 9px; font-family: var(--font); }

/* ---------- 7. Forms ---------- */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  font-family: var(--font); color: var(--ink); background-color: var(--surface); border: 1px solid var(--line-3); border-radius: 9px; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: .85; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: var(--line-3); outline: 2px solid var(--accent); outline-offset: 1px; }
input:disabled { background-color: var(--surface-2); }
input:not([type="checkbox"]):not([type="radio"]), select { min-height: 40px; }
.weather-item input:not([type="checkbox"]):not([type="radio"]), .custom-input input:not([type="checkbox"]):not([type="radio"]), .session-note-input:not([type="checkbox"]):not([type="radio"]) { min-height: 34px; }
select { -webkit-appearance: none; appearance: none; padding-right: 30px; background-repeat: no-repeat; background-position: right 11px center; background-size: 10px 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2380858d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
select option { background: var(--surface); color: var(--ink); }
.search-input { border-radius: 99px !important; padding-left: 22px; box-shadow: var(--shadow); }
.search-btn { border-radius: 99px; }

/* ---------- 8. Status pills and messages ---------- */
.status-badge, .watchlist-level, .level-badge, .coming-badge, .challenge-badges .badge, .card-badge {
  border-radius: 99px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.status-badge, .watchlist-level, .challenge-badges .badge { font-size: 11.5px; padding: 2px 9px; }
.level-badge { font-size: 12.5px; padding: 4px 12px; white-space: normal; }
.card-badge { font-size: 11px; padding: 1px 8px; }
.error-msg, .success-msg, .msg { border-radius: 11px; font-size: 13.5px; }
#toast { background: var(--ink); color: var(--bg); border-radius: 99px; font-size: 13.5px; font-weight: 600; letter-spacing: 0; padding: 10px 18px; box-shadow: var(--shadow-pop);
  opacity: 0; transition: transform .3s ease, opacity .3s ease; }
#toast.show { opacity: 1; }

/* ---------- 9. Sign-in pages ---------- */
.login-card, body > .card { padding: 34px 30px 30px; }
.brand-top, .login-card .logo1, body > .card .logo1 { --logo-h: 56px; margin-bottom: 18px; }
.plane { display: none; }   /* the logo already carries the aircraft */
.brand-name, .login-card .logo2, body > .card .logo2 { font-family: var(--font); font-size: 24px; font-weight: 800; font-stretch: 125%; letter-spacing: -.01em; line-height: 1.15; }
.brand-sub, .logo3 { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--ink-3); }
.links, .login-link { font-size: 13px; }
.links a, .login-link a { font-weight: 600; }

/* ---------- 10. Small-screen layout ---------- */
@media (max-width: 900px) { .nav-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) {
  .stats-row:has(.stat-card) { grid-template-columns: repeat(2, 1fr); }
  .stats-row:has(.stat-mini) { gap: 6px; }
  .login-card, body > .card { padding: 28px 22px 24px; }
  .row-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .member-info { flex-basis: 100%; } }
@media (max-width: 520px) {
  .weather-grid { grid-template-columns: repeat(2, 1fr); }
  .row-2 { grid-template-columns: 1fr; }
  :root { --logo-h: 32px; }
  header .header-right { width: 100%; }
}

/* Printing always uses the page's own white print styles */
@media print { body { background: #fff; } header { display: none; } }