:root {
  color-scheme: dark;
  --void: #04040a;
  --panel-solid: #0c0e1a;
  --panel: rgba(8, 10, 20, 0.88);
  --panel-soft: rgba(12, 14, 26, 0.76);
  --gold-primary: #d4af37;
  --gold-light: #f0d060;
  --gold-rgb: 212, 175, 55;
  --cyan-primary: #55d7dc;
  --cyan-rgb: 85, 215, 220;
  --redwood: #65c68b;
  --redwood-rgb: 101, 198, 139;
  --alert-red: #ff5c57;
  --alert-orange: #ff9f43;
  --text-primary: #e8e6e0;
  --text-heading: #f5f0e0;
  --text-secondary: #a7a39a;
  --text-muted: #68655f;
  --border-primary: rgba(var(--gold-rgb), 0.18);
  --border-secondary: rgba(var(--gold-rgb), 0.09);
  --border-active: rgba(var(--gold-rgb), 0.55);

  /* Remap the original design tokens so the full trip document inherits the console theme. */
  --sand: var(--void);
  --sand-2: rgba(255, 255, 255, 0.035);
  --ink: var(--text-primary);
  --ink-soft: var(--text-secondary);
  --card: var(--panel);
  --line: var(--border-primary);
  --line-soft: var(--border-secondary);
  --forest: var(--redwood);
  --forest-2: #8ce0aa;
  --moss: var(--redwood);
  --sky: var(--cyan-primary);
  --sunset: var(--alert-orange);
  --sunset-2: #ffc16b;
  --gold: var(--gold-primary);
  --danger: var(--alert-red);
  --danger-bg: rgba(255, 92, 87, 0.08);
  --ok: var(--redwood);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
  --radius: 8px;
  --maxw: none;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--gold-rgb), 0.24) transparent;
}

*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb), 0.22); border-radius: 10px; }

html {
  background: var(--void);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--void);
  color: var(--text-primary);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: 32px;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -2.5%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 4, 10, 0.28), rgba(4, 4, 10, 0.62) 54%, rgba(4, 4, 10, 0.92)),
    linear-gradient(180deg, rgba(4, 4, 10, 0.25), rgba(4, 4, 10, 0.8)),
    url("assets/big-sur-command-map.jpg") center / cover no-repeat;
  filter: saturate(0.82) contrast(0.94) brightness(0.76);
  transform: scale(1.025);
  animation: terrain-drift 34s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  z-index: 2;
  pointer-events: none;
  left: 0;
  right: 0;
  top: -18vh;
  height: 18vh;
  opacity: 0.22;
  background: linear-gradient(180deg, transparent, rgba(var(--cyan-rgb), 0.08), transparent);
  animation: scan-line 12s linear infinite;
}

body > * { position: relative; z-index: 3; }

a {
  color: var(--cyan-primary);
  text-decoration-color: rgba(var(--cyan-rgb), 0.35);
  text-underline-offset: 3px;
}

a:hover { color: #a3f4f4; }

h1, h2, h3, h4 {
  color: var(--text-heading);
  font-family: "JetBrains Mono", "Courier New", monospace;
  letter-spacing: -0.025em;
}

.wrap { max-width: none; }

/* Mission header */
.hero {
  position: sticky;
  top: 0;
  z-index: 70;
  overflow: visible;
  color: var(--text-primary);
  background: linear-gradient(180deg, rgba(4, 4, 10, 0.98), rgba(6, 7, 14, 0.91));
  border-bottom: 1px solid var(--border-primary);
  backdrop-filter: blur(18px);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
  opacity: 0.44;
}

.hero .wrap {
  min-height: 122px;
  padding: 18px 24px 16px 216px;
  display: grid;
  grid-template-columns: minmax(290px, 1fr) auto;
  align-items: center;
  gap: 32px;
}

.hero-copy { min-width: 0; }

.eyebrow,
.count .l,
.st,
.pill,
.count-lbl,
.tabs-row button,
.status-dock,
.tbl th,
.meal-h .badge,
.boot-kicker,
.boot-steps,
.section-code {
  font-family: "JetBrains Mono", "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-light);
  opacity: 1;
}

.hero h1 {
  margin: 0.12em 0 0.04em;
  color: var(--gold-primary);
  font-size: clamp(1.75rem, 3vw, 2.65rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.05;
  text-shadow: 0 0 24px rgba(var(--gold-rgb), 0.18);
}

.hero .dates {
  color: var(--text-primary);
  font-size: 0.92rem;
  font-weight: 650;
}

.hero .place {
  margin: 0.2em 0 0;
  max-width: 68ch;
  color: var(--text-secondary);
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: 0.69rem;
  letter-spacing: 0.035em;
}

.count {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(82px, 1fr));
  gap: 7px;
}

.count .box {
  min-width: 82px;
  padding: 10px 12px 9px;
  text-align: left;
  background: rgba(12, 14, 26, 0.74);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  box-shadow: inset 0 0 22px rgba(var(--gold-rgb), 0.02);
  backdrop-filter: blur(8px);
}

.count .n {
  color: var(--text-heading);
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.count .l {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.6rem;
}

.hero-ridge { display: none; }

/* Desktop command rail */
nav.tabs {
  position: fixed;
  z-index: 65;
  top: 0;
  bottom: 30px;
  left: 0;
  width: 190px;
  padding-top: 122px;
  background: rgba(4, 4, 10, 0.93);
  border-right: 1px solid var(--border-primary);
  border-bottom: 0;
  backdrop-filter: blur(18px);
}

nav.tabs::before {
  content: "SECTIONS // 09";
  display: block;
  padding: 15px 15px 9px;
  color: var(--text-muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
}

nav.tabs .wrap { padding: 0 8px; }

.tabs-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: visible;
}

.tabs-row button {
  position: relative;
  width: 100%;
  padding: 11px 10px 11px 40px;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-radius: 5px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.tabs-row button::before {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.57rem;
  letter-spacing: 0.08em;
}

.tabs-row button:nth-child(1)::before { content: "01"; }
.tabs-row button:nth-child(2)::before { content: "02"; }
.tabs-row button:nth-child(3)::before { content: "03"; }
.tabs-row button:nth-child(4)::before { content: "04"; }
.tabs-row button:nth-child(5)::before { content: "05"; }
.tabs-row button:nth-child(6)::before { content: "06"; }
.tabs-row button:nth-child(7)::before { content: "07"; }
.tabs-row button:nth-child(8)::before { content: "08"; }
.tabs-row button:nth-child(9)::before { content: "09"; }

.tabs-row button:hover {
  color: var(--text-heading);
  background: rgba(var(--gold-rgb), 0.055);
  border-color: var(--border-secondary);
  text-decoration: none;
  transform: translateX(2px);
}

.tabs-row button[aria-selected="true"] {
  color: var(--gold-light);
  background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.13), rgba(var(--gold-rgb), 0.035));
  border-color: var(--border-primary);
  box-shadow: inset 2px 0 0 var(--gold-primary), 0 0 24px rgba(var(--gold-rgb), 0.04);
}

.tabs-row button[aria-selected="true"]::before { color: var(--gold-primary); }

/* Content surface */
main.wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 22px 24px 104px 214px;
}

.panel {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.panel.active {
  animation: panel-enter .42s cubic-bezier(.16, 1, .3, 1);
}

.panel > .lead {
  display: inline-block;
  max-width: 76ch;
  margin: 0 0 18px;
  padding: 10px 13px;
  color: var(--text-secondary);
  background: rgba(4, 4, 10, 0.58);
  border-left: 2px solid var(--gold-primary);
  font-size: 0.94rem;
  backdrop-filter: blur(8px);
}

h2.sec {
  margin: 0 0 14px;
  color: var(--text-heading);
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  letter-spacing: 0.06em;
}

h2.sec::before {
  content: "//";
  color: var(--gold-primary);
  font-size: 0.8em;
}

h2.sec .tag {
  color: var(--gold-light);
  background: rgba(var(--gold-rgb), 0.07);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
}

section.block { margin-bottom: clamp(24px, 4vw, 38px); }

.card,
.day-tabs button,
.dir,
.plan-out {
  background: var(--panel);
  border-color: var(--border-primary);
  border-radius: 7px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.018);
  backdrop-filter: blur(14px);
}

.card {
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: -1px;
  right: -1px;
  border-top: 1px solid rgba(var(--gold-rgb), 0.52);
  border-right: 1px solid rgba(var(--gold-rgb), 0.52);
  pointer-events: none;
}

.card h3,
.card h4 {
  color: var(--text-heading);
  font-size: 1rem;
  letter-spacing: 0.015em;
}

.alert,
.callout,
.callout.warn {
  background: rgba(8, 10, 20, 0.91);
  border: 1px solid var(--border-primary);
  border-left: 3px solid var(--cyan-primary);
  border-radius: 5px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.alert,
.callout.warn {
  background: rgba(30, 10, 12, 0.88);
  border-color: rgba(255, 92, 87, 0.25);
  border-left-color: var(--alert-red);
}

.alert h3 { color: #ff8b86; }

.pill,
.st,
.meal-h .badge {
  border-radius: 4px;
}

.st.open { color: #8cf0ae; background: rgba(var(--redwood-rgb), 0.1); }
.st.closed { color: #ff8b86; background: rgba(255, 92, 87, 0.1); }
.st.maybe { color: var(--gold-light); background: rgba(var(--gold-rgb), 0.1); }

.meal-h .badge {
  color: var(--void);
  background: var(--gold-primary);
}

.check {
  position: relative;
  padding: 10px 4px;
  border-bottom-color: var(--border-secondary);
}

.check:hover { background: rgba(var(--gold-rgb), 0.025); }

.check input {
  width: 21px;
  height: 21px;
  border-color: rgba(var(--gold-rgb), 0.3);
  border-radius: 3px;
  background: rgba(4, 4, 10, 0.78);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.check input:checked {
  background: var(--gold-primary);
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.09), 0 0 18px rgba(var(--gold-rgb), 0.22);
  transform: scale(1.03);
}

.check input:checked::after { border-color: var(--void); }

.progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.045);
  border-radius: 0;
}

.progress > i {
  position: relative;
  background: linear-gradient(90deg, var(--gold-primary), var(--gold-light));
  box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.32);
}

.count-lbl { color: var(--gold-light); font-size: 0.62rem; }

.tbl { font-size: 0.9rem; }
.tbl th { color: var(--gold-light); border-bottom-color: var(--border-primary); font-size: 0.64rem; }
.tbl td { border-bottom-color: var(--border-secondary); }

.day-tabs button,
.dir {
  color: var(--text-secondary);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}

.day-tabs button:hover,
.dir:hover { transform: translateY(-1px); border-color: var(--border-active); }

.day-tabs button[aria-selected="true"],
.dir.sel {
  color: var(--text-primary);
  border-color: var(--border-active);
  background: rgba(var(--gold-rgb), 0.075);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), 0.1), 0 0 24px rgba(var(--gold-rgb), 0.05);
}

.plan-out { background: rgba(4, 4, 10, 0.72); border-style: solid; }

.btn {
  color: var(--text-secondary);
  background: rgba(8, 10, 20, 0.82);
  border-color: var(--border-primary);
  border-radius: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn:hover { color: var(--gold-light); border-color: var(--border-active); }

footer.wrap {
  margin: 0;
  padding: 20px 24px 56px 214px;
  border-color: var(--border-primary);
  background: rgba(4, 4, 10, 0.84);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}

.reset { color: var(--gold-light); }

/* Persistent HUD */
.status-dock {
  position: fixed;
  z-index: 90;
  left: 190px;
  right: 0;
  bottom: 0;
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 5px 15px;
  color: var(--text-muted);
  background: rgba(4, 4, 10, 0.97);
  border-top: 1px solid var(--border-primary);
  font-size: 0.58rem;
  white-space: nowrap;
  overflow: hidden;
  backdrop-filter: blur(14px);
}

.status-dock .live-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--redwood);
  box-shadow: 0 0 8px rgba(var(--redwood-rgb), 0.72);
  animation: status-pulse 2.2s ease-in-out infinite;
}

.status-dock strong { color: var(--text-secondary); font-weight: 600; }
.status-dock .dock-spacer { flex: 1; }

[data-sync-status="synced"] { color: #8cf0ae; }
[data-sync-status="connecting"],
[data-sync-status="local"] { color: var(--gold-light); }
[data-sync-status="offline"],
[data-sync-status="error"] { color: #ff8b86; }

/* One-time initialization screen */
.boot-screen {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--text-primary);
  background:
    radial-gradient(circle at center, rgba(var(--gold-rgb), 0.065), transparent 34%),
    rgba(4, 4, 10, 0.995);
  transition: opacity .5s ease, visibility .5s ease;
}

.boot-screen[hidden] { display: none; }
.boot-screen.is-leaving { opacity: 0; visibility: hidden; }

.boot-panel { width: min(540px, 92vw); text-align: center; }

.boot-mark {
  position: relative;
  width: 142px;
  height: 142px;
  margin: 0 auto 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--gold-rgb), 0.42);
  border-radius: 50%;
  box-shadow: 0 0 50px rgba(var(--gold-rgb), 0.08);
}

.boot-mark::before,
.boot-mark::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(var(--gold-rgb), 0.28);
}

.boot-mark::before { inset: 13px; animation: spin 9s linear infinite; }
.boot-mark::after { inset: 30px; animation: spin-reverse 6s linear infinite; }

.boot-mark span {
  color: var(--gold-light);
  font-family: "JetBrains Mono", monospace;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.boot-kicker { color: var(--gold-primary); font-size: 0.68rem; }

.boot-title {
  margin: 9px 0 18px;
  color: var(--text-heading);
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  letter-spacing: 0.18em;
}

.boot-steps {
  min-height: 1.4em;
  color: var(--text-secondary);
  font-size: 0.65rem;
}

.boot-progress {
  height: 2px;
  margin-top: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.boot-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  transform: translateX(-100%);
  animation: boot-progress 2.5s cubic-bezier(.16, 1, .3, 1) forwards;
}

/* Trip-code access panel, shown only after Supabase is configured. */
.access-gate {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(4, 4, 10, 0.92);
  backdrop-filter: blur(18px);
}

.access-gate[hidden] { display: none; }

.access-panel {
  width: min(420px, 100%);
  padding: 26px;
  background: var(--panel-solid);
  border: 1px solid var(--border-active);
  border-radius: 7px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(var(--gold-rgb), 0.06);
}

.access-panel h2 { margin: 0 0 8px; color: var(--gold-light); font-size: 1.1rem; }
.access-panel p { color: var(--text-secondary); font-size: 0.9rem; }

.access-panel input {
  width: 100%;
  margin: 8px 0 12px;
  padding: 12px 13px;
  color: var(--text-primary);
  background: var(--void);
  border: 1px solid var(--border-primary);
  border-radius: 5px;
  font: 600 0.9rem "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  outline: none;
}

.access-panel input:focus { border-color: var(--border-active); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.08); }
.access-panel .access-error { min-height: 1.4em; color: #ff8b86; font-size: 0.78rem; }

@keyframes terrain-drift {
  from { transform: scale(1.025) translate3d(-0.3%, -0.2%, 0); }
  to { transform: scale(1.055) translate3d(0.45%, 0.3%, 0); }
}

@keyframes scan-line {
  from { transform: translateY(0); }
  to { transform: translateY(136vh); }
}

@keyframes panel-enter {
  from { opacity: 0; filter: blur(6px); transform: translateY(12px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .42; transform: scale(.82); }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-360deg); } }

@keyframes boot-progress {
  0% { transform: translateX(-100%); }
  80%, 100% { transform: translateX(100%); }
}

@media (max-width: 1040px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 12px; }
  .count { width: min(520px, 100%); }
}

@media (max-width: 899px) {
  body { padding-bottom: 32px; }
  body::before { inset: 0; background-position: 32% center; animation-duration: 42s; }

  .hero { position: relative; }
  .hero .wrap {
    min-height: auto;
    padding: 28px 18px 17px;
    display: block;
  }

  .hero h1 { font-size: clamp(1.6rem, 8vw, 2.3rem); letter-spacing: 0.11em; }
  .hero .place { font-size: 0.66rem; }
  .count { margin-top: 17px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .count .box { min-width: 0; padding: 8px; }
  .count .n { font-size: 1.25rem; }
  .count .l { font-size: 0.5rem; letter-spacing: 0.08em; }

  nav.tabs {
    position: sticky;
    top: 0;
    bottom: auto;
    width: auto;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-primary);
  }

  nav.tabs::before { display: none; }
  nav.tabs .wrap { padding: 0 10px; }
  .tabs-row { flex-direction: row; overflow-x: auto; }
  .tabs-row button { width: auto; padding: 12px 11px; border-radius: 0; border-bottom: 2px solid transparent; font-size: 0.64rem; }
  .tabs-row button::before { display: none; }
  .tabs-row button:hover { transform: none; }
  .tabs-row button[aria-selected="true"] { border: 0; border-bottom: 2px solid var(--gold-primary); box-shadow: none; }

  main.wrap { padding: 20px 14px 86px; }
  footer.wrap { padding: 18px 14px 56px; }
  .status-dock { left: 0; gap: 11px; padding-inline: 10px; }
  .status-dock .dock-detail { display: none; }
}

@media (max-width: 560px) {
  .grid.two,
  .grid.three { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .panel > .lead { font-size: 0.88rem; }
  .count { grid-template-columns: repeat(2, 1fr); }
  .status-dock { font-size: 0.52rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  body::after { display: none; }
}

@media print {
  body { color: #111; background: #fff; padding: 0; }
  body::before, body::after, .boot-screen, .status-dock, nav.tabs { display: none !important; }
  .hero { position: static; color: #111; background: #fff; border-bottom: 2px solid #111; }
  .hero .wrap, main.wrap, footer.wrap { padding-left: 24px; }
  .card, .alert, .callout, .plan-out { color: #111; background: #fff; box-shadow: none; backdrop-filter: none; }
  .panel { display: block !important; break-before: page; }
  .panel:first-child { break-before: auto; }
}