/* OpenTrailPaper — project site
   Device-derived identity: paper white, hard black rules, Barlow Condensed
   display type, one orange accent (#F4501E). */

:root {
  --ink: #141414;
  --ink-soft: #4a4a4a;
  --paper: #f7f6f2;
  --paper-dim: #eceae2;
  --panel: #ffffff;
  --line: #d8d4c8;
  --rule: #141414;
  --accent: #F4501E;
  --accent-dark: #9c440f;
  --good: #2e7d32;
  --bad: #c62828;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Barlow Condensed", var(--sans);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-dark); }
a:hover { color: var(--accent); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* --- top nav --- */
header.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 246, 242, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--rule);
}
header.nav .wrap {
  display: flex; align-items: center; gap: 24px;
  min-height: 60px; flex-wrap: wrap;
}
header.nav .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 1.35rem; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
}
header.nav .brand svg { display: block; }
header.nav nav { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; align-items: center; }
@media (max-width: 860px) {
  header.nav .wrap { gap: 12px; }
  header.nav .brand { font-size: 1.1rem; }
  header.nav nav { gap: 14px; }
  header.nav nav a { font-size: 0.85rem; }
  header.nav nav a.gh { padding: 6px 12px; }
}
/* Phones: drop the in-page section links, keep the logo + Set up + GitHub. */
@media (max-width: 720px) {
  header.nav .wrap { flex-wrap: nowrap; }
  header.nav nav { gap: 16px; }
  header.nav nav a[href^="#"] { display: none; }
}
header.nav nav a { text-decoration: none; color: var(--ink-soft); font-size: 0.95rem; font-weight: 500; }
header.nav nav a:hover { color: var(--ink); }
header.nav nav a.gh {
  color: #fff; background: var(--ink); font-weight: 600;
  padding: 8px 16px; border-radius: 6px;
}
header.nav nav a.gh:hover { background: #000; color: #fff; }

/* --- hero --- */
.hero {
  border-bottom: 2px solid var(--rule);
  padding: 0; margin: 0;
}
.hero .wrap {
  display: grid; grid-template-columns: 1fr 380px; gap: 48px;
  align-items: end; padding-top: 72px;
}
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 0; padding-top: 44px; }
  .hero .copy { padding-bottom: 36px; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3rem); }
  .hero p.lede { font-size: 1.03rem; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { text-align: center; }
  /* smaller device on narrow screens */
  .hero .device-mock .device { width: 232px; }
}
.hero .copy { padding-bottom: 64px; }
.hero .tag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--rule); padding: 5px 12px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 24px;
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.75rem);
  font-weight: 700; line-height: 0.95; letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.hero p.lede { font-size: 1.19rem; color: var(--ink-soft); max-width: 46ch; margin: 0 0 32px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.badge-row { margin-top: 20px; color: var(--ink-soft); font-size: 0.9rem; }

/* --- buttons --- */
.btn {
  display: inline-block; font: inherit; font-weight: 700; cursor: pointer;
  padding: 13px 24px; border-radius: 0; border: 2px solid var(--ink);
  background: var(--ink); color: #fff; text-decoration: none;
  letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.95rem;
  transition: transform .05s ease, background .15s ease;
}
.btn:hover { background: #000; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--paper-dim); color: var(--ink); }
.btn.accent { background: var(--accent); border-color: var(--accent); }
.btn.accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- hero device mock --- */
.device-mock { display: flex; justify-content: center; }
/* LilyGO T5 4.7" e-paper: a white rounded body with a light-bordered e-paper
   panel, a round home button below the screen, and small side buttons. */
.device-mock .device {
  position: relative; width: 290px;
  background: linear-gradient(155deg, #fcfcfd, #e8eaed);
  border-radius: 34px; padding: 74px 15px 0;   /* tall bezel at the top */
  box-shadow: 0 26px 52px rgba(20, 20, 20, 0.20),
              inset 0 0 0 1px rgba(255, 255, 255, 0.7),
              inset 0 0 0 2px rgba(0, 0, 0, 0.06);
}
/* side buttons on the case edges (left one long, right one short) */
.device-mock .device::before, .device-mock .device::after {
  content: ""; position: absolute; width: 3px; border-radius: 3px; background: #cccfd4;
}
.device-mock .device::before { left: -3px; top: 39%; height: 48px; }
.device-mock .device::after { right: -3px; top: 44%; height: 28px; }
.device-mock .screen {
  aspect-ratio: 540 / 960; background: #f4f3ee; /* panel's inactive glass border */
  border-radius: 6px; padding: 7px;
  box-shadow: inset 0 0 0 1px #dad9d0;
}
.device-mock .screen img {
  display: block; width: 100%; height: 100%; object-fit: cover; background: #fff;
}
/* round home button, centred beneath the screen */
.device-mock .home {
  display: block; width: 44px; height: 44px; margin: 12px auto 15px;
  border-radius: 50%; background: linear-gradient(#fafbfc, #eaecef);
  box-shadow: inset 0 0 0 2px #cbced3, inset 0 2px 4px rgba(0, 0, 0, 0.05),
              0 1px 1px rgba(255, 255, 255, 0.8);
}

/* --- spec ticker --- */
.ticker { background: var(--ink); color: var(--paper); border-bottom: 2px solid var(--rule); }
.ticker .wrap {
  display: flex; gap: 32px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px;
  font-family: var(--mono); font-size: 0.81rem;
}
@media (max-width: 860px) { .ticker .wrap { gap: 18px; font-size: 0.7rem; } }

/* --- sections --- */
section { padding: 64px 0; border-bottom: 2px solid var(--rule); margin: 0; }
section[id] { scroll-margin-top: 60px; }
section.dim { background: var(--paper-dim); }
.kicker {
  font-family: var(--display); font-size: 0.94rem; font-weight: 700;
  letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase;
  margin: 0 0 8px;
}
section h2 {
  font-family: var(--display); font-size: 2.75rem; font-weight: 700;
  line-height: 1; letter-spacing: 0; margin: 0 0 12px;
}
section .sub { color: var(--ink-soft); font-size: 1.06rem; margin: 0 0 40px; max-width: 62ch; }
@media (max-width: 860px) {
  section { padding: 44px 0; }
  section[id] { scroll-margin-top: 120px; }
  section h2 { font-size: 2rem; }
  section .sub { font-size: 0.95rem; margin-bottom: 24px; }
}

/* --- device walkthrough emulator (section 01) --- */
.emu { display: grid; grid-template-columns: auto auto; gap: 56px;
  align-items: center; justify-content: center; }

/* the screen becomes a positioning context for the tap indicator */
.emu-device .screen { position: relative; }
.emu-screen { position: relative; width: 100%; height: 100%; line-height: 0; }
.emu-screen img { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }

/* tap indicator: only visible for the instant of the "tap" — a dot pops in and
   a ring ripples out, then both fade (one-shot per step). */
/* brief e-paper-style refresh flash when the screen updates after a tap */
.emu-flash { position: absolute; inset: 0; background: #111; opacity: 0; pointer-events: none; }
.emu-flash.go { animation: epflash 0.34s ease-out; }
@keyframes epflash { 0% { opacity: 0; } 22% { opacity: 0.16; } 100% { opacity: 0; } }

/* warm backlight glow (the front light coming on) */
.emu-glow {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
  background: radial-gradient(130% 100% at 50% 40%,
              rgba(255, 196, 92, 0.44), rgba(255, 176, 70, 0.15) 55%, rgba(255, 170, 60, 0) 78%);
}
.emu-glow.on { opacity: 1; }

.tap-pulse { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.tap-pulse::before, .tap-pulse::after {
  content: ""; position: absolute; left: 0; top: 0; border-radius: 50%;
  transform: translate(-50%, -50%); opacity: 0;
}
.tap-pulse::before {
  width: 18px; height: 18px; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 1px 3px rgba(0, 0, 0, 0.4);
}
.tap-pulse::after { width: 18px; height: 18px; border: 3px solid var(--accent); }
.tap-pulse.go::before { animation: tapdot 1.1s ease-out; }
.tap-pulse.go::after { animation: tapring 1.1s ease-out; }
@keyframes tapdot {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  32%  { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
}
@keyframes tapring {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  22%  { opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
}

/* always-visible step list; the active row expands to show its detail */
.emu-panel { max-width: 46ch; align-self: center; }
.emu-steps { list-style: none; margin: 0; padding: 0; }
.emu-step { border-top: 1px solid var(--line); }
.emu-step:last-child { border-bottom: 1px solid var(--line); }
.emu-step-head {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: none; border: 0; padding: 15px 4px; cursor: pointer; font: inherit;
  color: var(--ink-soft); transition: color 0.15s;
}
.emu-step-head:hover { color: var(--ink); }
.emu-step-n {
  flex: none; width: 1.7rem; font: 700 1rem var(--display); color: var(--muted, #9aa0a6);
  text-align: center;
}
.emu-step-title { font-family: var(--display); font-size: 1.16rem; font-weight: 600; }
.emu-step.on .emu-step-head { color: var(--ink); }
.emu-step.on .emu-step-n { color: var(--accent); }
/* grid-rows accordion: animates height cleanly from 0 to auto */
.emu-step-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.emu-step.on .emu-step-body { grid-template-rows: 1fr; }
.emu-step-body > div { overflow: hidden; min-height: 0; }
.emu-step-body p { margin: 0 0 12px; padding-left: calc(1.7rem + 14px);
  color: var(--ink-soft); font-size: 0.96rem; line-height: 1.55; }
.emu-hint { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.emu-hand { font-size: 1.25rem; line-height: 1; }

/* step dots — hidden on desktop (the accordion is the nav), shown on mobile */
.emu-dots { display: none; gap: 9px; margin-top: 18px; }
.emu-dot {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
  background: var(--line); cursor: pointer; transition: background 0.15s, transform 0.15s;
}
.emu-dot:hover { transform: scale(1.25); }
.emu-dot.on { background: var(--accent); }

/* prev/next arrows — hidden on desktop (the accordion is the nav) */
.emu-arrow { display: none; }

/* Mobile: stack a smaller device (flanked by prev/next arrows) over just the
   current step's explanation, with dots — device + caption visible together. */
@media (max-width: 780px) {
  .emu { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
  /* scale the bezel/home down with the smaller mobile device so it keeps the
     real unit's proportions instead of a huge top bezel on a narrow body */
  .device-mock .device { padding: 52px 11px 0; border-radius: 26px; }
  .device-mock .home { width: 33px; height: 33px; margin: 9px auto 12px; }
  .emu-device { align-items: center; gap: 8px; max-width: 100%; }
  .emu-arrow {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; padding: 0; border-radius: 50%;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink);
    font: 400 1.8rem/1 system-ui; cursor: pointer;
  }
  .emu-arrow:active { background: var(--paper-dim); transform: scale(0.94); }
  .emu-device .device { width: 200px; flex: none; }   /* never squeeze the device */
  .emu-panel { max-width: 400px; width: 100%; }
  .emu-steps { text-align: center; }
  .emu-step { border: 0; }
  .emu-step:not(.on) { display: none; }        /* show only the current step */
  .emu-step-head { justify-content: center; padding: 0 0 6px; cursor: default; }
  .emu-step-n { display: none; }               /* the dots convey progress */
  .emu-step-title { font-size: 1.3rem; }
  .emu-step-body p { padding-left: 0; margin-bottom: 10px; }
  .emu-hint { justify-content: center; }
  .emu-dots { display: flex; justify-content: center; }
}

/* --- companion app gallery --- */
.app-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
@media (max-width: 720px) {
  .app-gallery {
    display: flex; overflow-x: auto; gap: 22px;
    margin: 0 -24px; padding: 0 24px 8px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .app-gallery::-webkit-scrollbar { display: none; }
  .app-shot { flex: none; width: 240px; }
}
.app-shot { margin: 0; }
/* iPhone 17 Pro: titanium frame, thin uniform bezel, Dynamic Island */
.iphone {
  position: relative; width: 100%; max-width: 232px; margin: 0 auto;
  padding: 9px; border-radius: 46px;
  background: linear-gradient(150deg, #e4e5e8, #b8bcc2 45%, #cfd2d7);
  box-shadow: 0 20px 44px rgba(20, 20, 20, 0.22),
              inset 0 0 0 1.5px rgba(255, 255, 255, 0.45),
              inset 0 0 2px 2.5px rgba(0, 0, 0, 0.12);
}
.iphone img {
  display: block; width: 100%; height: auto; border-radius: 38px; background: #000;
}
.app-shot figcaption { margin-top: 20px; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }
.app-shot figcaption strong {
  display: block; font-family: var(--display); font-size: 1.24rem;
  font-weight: 700; color: var(--ink); margin-bottom: 5px;
}

/* --- setup CTA band (home) + setup page intro --- */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band > div { flex: 1 1 340px; }
.cta-band h2 { margin: 6px 0 8px; }
.cta-band .sub { margin: 0; }
.cta-band .btn { flex: none; }
.setup-intro { padding: 64px 24px 24px; border-bottom: 2px solid var(--rule); }
.setup-intro h1 {
  font-family: var(--display); font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700; margin: 10px 0 14px; line-height: 1.05;
}
.setup-intro .lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 56ch; }

/* --- split table --- */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--rule); }
@media (max-width: 720px) { .split-grid { grid-template-columns: 1fr; } }
.split-col:first-child { border-right: 2px solid var(--rule); }
@media (max-width: 720px) { .split-col:first-child { border-right: 0; border-bottom: 2px solid var(--rule); } }
.split-col .head {
  color: #fff; padding: 14px 20px;
  font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.split-col.device .head { background: var(--ink); }
.split-col.phone .head { background: var(--accent); }
.split-col ul { margin: 0; padding: 20px; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.split-col li { font-size: 0.95rem; color: var(--ink-soft); }

/* --- cards / two-col tool sections --- */
.flash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 720px) { .flash-grid { grid-template-columns: 1fr; } }

.card {
  min-width: 0; background: var(--panel); border: 2px solid var(--rule); border-radius: 0; padding: 20px;
}
.card ol { margin: 0; padding-left: 20px; }
.card ol li { margin-bottom: 10px; }
.card strong { font-size: 1rem; }
.step-num {
  display: block; font-family: var(--display); font-size: 1.6rem;
  font-weight: 700; color: var(--accent); line-height: 1;
}

/* Flash section: each step's control sits inline with it, big number at left. */
.flash-steps { display: flex; flex-direction: column; gap: 32px; max-width: 780px; }
.flash-step { display: grid; grid-template-columns: 3.2rem 1fr; gap: 22px; align-items: start; }
.flash-step .step-num { font-size: 3.6rem; text-align: center; }
.step-body strong { display: block; font-size: 1.14rem; margin-bottom: 0.35rem; }
.step-body > p { font-size: 0.95rem; margin: 0 0 0.9rem; max-width: 60ch; }
.step-body .flash-controls { margin-top: 0; }
.version-pick { margin: 0; }
.version-pick select {
  width: 100%; max-width: 360px; padding: 9px 10px; font: inherit; font-size: 0.95rem;
  border: 1px solid var(--line); border-radius: 0; background: #fff;
}
.version-pick #version-note { font-size: 0.85rem; margin: 0.45rem 0 0; color: var(--ink-soft); }
section.dark .step-body strong { color: #fff; }
section.dark .version-pick #version-note { color: #b5b2a8; }
@media (max-width: 720px) {
  .flash-step { grid-template-columns: 2.4rem 1fr; gap: 14px; }
  .flash-step .step-num { font-size: 2.6rem; }
}
.kbd {
  font: 600 0.82em var(--mono); background: var(--paper-dim); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}

.flash-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.status { font-size: 0.9rem; color: var(--ink-soft); }
.status.ok { color: var(--good); }
.status.err { color: var(--bad); }

.console {
  margin-top: 16px; background: #0d0d0d; color: #e9e4d4; border-radius: 0;
  border: 1px solid #3a3a3a;
  font: 0.82rem/1.5 var(--mono); padding: 14px; height: 220px; overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}
.progress {
  height: 8px; background: var(--paper-dim); border-radius: 0; overflow: hidden; margin-top: 12px;
  border: 1px solid var(--line);
}
.progress > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }
.progress.indet > i { width: 40%; animation: indet 1.1s ease-in-out infinite; }
@keyframes indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

.notice {
  border: 2px solid var(--accent); background: #fbf3ec; padding: 12px 16px;
  border-radius: 0; margin: 0 0 22px; font-size: 0.95rem;
}
.notice.warn { border-color: var(--bad); background: #fdefef; }

/* --- dark flash section --- */
section.dark {
  background: var(--ink); color: var(--paper);
  border-bottom: 2px solid var(--rule);
}
section.dark h2 { color: #fff; }
section.dark .sub { color: #b5b2a8; }
section.dark a { color: #e9b7a0; }
section.dark a:hover { color: var(--accent); }
section.dark .card { background: transparent; border-color: #3a3a3a; color: var(--paper); }
section.dark .card strong { color: #fff; }
section.dark .status { color: #b5b2a8; }
section.dark .status.ok { color: #7fbf83; }
section.dark .status.err { color: #e08a8a; }
section.dark .kbd { background: #2a2a2a; border-color: #3a3a3a; color: #e9e4d4; }
section.dark code { background: #2a2a2a; color: #e9e4d4; }
section.dark .btn.secondary { color: var(--paper); border-color: var(--paper); }
section.dark .btn.secondary:hover { background: #2a2a2a; color: #fff; }
section.dark .progress { background: #1e1e1e; border-color: #3a3a3a; }
section.dark select {
  background: #1e1e1e; border: 1px solid #3a3a3a; color: #fff;
}

/* --- mapgen --- */
.pickmap {
  height: 340px; border: 2px solid var(--rule); border-radius: 0;
  overflow: hidden; background: var(--paper-dim);
  /* contain Leaflet's high z-index panes/controls so the map never draws over
     the sticky nav when scrolling */
  position: relative; z-index: 0;
}
/* greyscale just the basemap tiles so the picker is monotone; the drawn box and
   controls (other panes) keep their accent colour */
.pickmap .leaflet-tile-pane { filter: grayscale(1) contrast(0.9) brightness(1.04); }
.pickmap-tools { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.pickmap-tools .btn { padding: 8px 16px; font-size: 0.85rem; }
.bbox-info { margin: 12px 0 0; font-size: 0.88rem; color: var(--ink-soft); }
.bbox-info.warn { color: var(--bad); }
.name-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 0.95rem; }
.name-row input {
  flex: 1; min-width: 0; font: inherit; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 0; background: #fff;
}

/* --- footer --- */
footer { padding: 36px 0 56px; color: var(--ink-soft); font-size: 0.9rem; }
footer a { color: var(--ink-soft); }
footer .wrap { display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
@media (max-width: 560px) { footer .wrap { flex-direction: column; gap: 10px; } }

code { font-family: var(--mono); background: var(--paper-dim); padding: 1px 5px; border-radius: 0; font-size: 0.9em; }