/* Mobile-first, designed at 375px. Desktop is a centred column.
   Placeholder art only — colours and shapes are stand-ins. */

:root {
  --charcoal: #1e2328;
  --charcoal-2: #2c3238;
  --ink: #1b1f22;
  --paper: #f4efe6;
  --paper-2: #ebe4d7;
  --line: #d5ccbd;
  --muted: #5a5f64;
  --amber: #e8a33d;
  --ember: #c5542d;
  --help: #b3261e;
  --focus: #e8a33d;
  --radius: 12px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: #14181b;
  -webkit-text-size-adjust: 100%;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.app {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  overflow: hidden;
}

/* ---------- Header: GET HELP + sound. Never scrolls. ---------- */

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 10px;
  background: var(--charcoal);
  position: relative;
  z-index: 20;
}

.get-help {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--help);
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.get-help:active { background: #8f1d17; }

.sound {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #59606a;
  border-radius: 999px;
  background: transparent;
  color: #e9e4da;
  font-size: 15px;
}
.sound-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound-icon .spk { fill: currentColor; }
.sound[data-on="true"] .mute { display: none; }
.sound[data-on="false"] .wave { display: none; }

/* ---------- Stage: everything under the header ---------- */

.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px var(--gutter) 20px;
  -webkit-overflow-scrolling: touch;
}
.screen:focus { outline: none; }

.screen h1 {
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.screen p { margin: 0 0 14px; }
.screen.centered { display: flex; flex-direction: column; justify-content: center; }

.eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ember);
  margin: 0 0 8px !important;
}

/* ---------- Trail map ribbon ---------- */

.ribbon {
  flex: none;
  padding: 10px var(--gutter) 12px;
  background: var(--charcoal-2);
  color: #e9e4da;
}
.ribbon ol {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  align-items: center;
}
.ribbon li {
  flex: 1;
  display: flex;
  align-items: center;
}
.ribbon li:last-child { flex: none; }
.ribbon li::after {
  content: "";
  flex: 1;
  height: 2px;
  margin: 0 4px;
  background: #59606a;
}
.ribbon li:last-child::after { display: none; }
.ribbon .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #7b828b;
  flex: none;
}
.ribbon li.done .dot { background: var(--amber); border-color: var(--amber); }
.ribbon li.done::after { background: var(--amber); }
.ribbon li.current .dot { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.3); }
.ribbon-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* ---------- Bottom bar: primary actions in the thumb zone ---------- */

.bottombar {
  flex: none;
  padding: 12px var(--gutter) calc(6px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.actions { display: flex; flex-direction: column; gap: 10px; }
.actions:empty { display: none; }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 2px solid var(--charcoal);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.btn-primary { background: var(--charcoal); color: #fff; }
.btn-primary:active { background: #000; }
.btn-secondary { background: transparent; color: var(--charcoal); }
.btn-secondary:active { background: var(--paper-2); }
.btn-tertiary {
  background: transparent;
  border-color: transparent;
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 48px;
}

.navrow {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}
.navlink {
  min-height: 44px;
  min-width: 64px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}
.navlink.back::before { content: "‹ "; }

/* ---------- Overlays (G-01, Pause): cover the stage, never the header ---------- */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.overlay-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px var(--gutter) 20px;
}
.overlay-body h1 { font-size: 26px; margin: 0 0 18px; }
.overlay-body h1:focus { outline: none; }
.overlay-foot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

/* G-01 */
.help-group {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.help-group:first-of-type { padding-top: 0; }
.help-group h2 { font-size: 19px; margin: 0 0 2px; }
.help-group p { margin: 0 0 8px; color: var(--muted); }
.help-links { display: flex; flex-wrap: wrap; gap: 8px; }
.help-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 2px solid var(--charcoal);
  color: var(--charcoal);
  font-weight: 700;
  text-decoration: none;
}
.help-link[href^="tel:"], .help-link[href^="sms:"] { background: var(--charcoal); color: #fff; }
.help-videos { margin-top: 18px; }
.help-videos h2 { font-size: 17px; margin: 0 0 8px; }
.help-videos ul { list-style: none; margin: 0; padding: 0; }
.help-videos li { padding: 6px 0; }
.help-videos a { color: var(--charcoal); font-weight: 700; }

/* No-JS fallback for GET HELP */
.help-fallback { display: none; }
.help-fallback:target {
  display: block;
  position: fixed;
  inset: 0;
  overflow: auto;
  padding: 24px;
  background: var(--paper);
  z-index: 100;
}

/* ---------- 0-01 Splash ---------- */

.splash {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100%;
}
.splash-art {
  width: 220px;
  height: 120px;
  margin-bottom: 28px;
  position: relative;
}
.splash-art .sun {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 96px;
  height: 48px;
  margin-left: -48px;
  border-radius: 96px 96px 0 0;
  background: linear-gradient(var(--amber), var(--ember));
}
.splash-art .horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  height: 3px;
  background: var(--charcoal);
}
.screen .splash-title {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0 0 6px;
}
.splash-sub {
  font-size: 22px;
  font-style: italic;
  margin: 0;
  color: var(--muted);
}
.proto-link {
  margin-top: 36px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  text-decoration: underline;
}

/* ---------- 0-03 Route cards ---------- */

.routes { display: flex; flex-direction: column; gap: 12px; }
.route {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 2px solid var(--charcoal);
  background: #fff;
}
.route-name { display: block; font-weight: 900; letter-spacing: 0.06em; }
.route-time { display: block; font-size: 15px; color: var(--muted); margin-bottom: 4px; }
.route-desc { display: block; }
.route-note { display: block; margin-top: 6px; font-style: italic; font-size: 15px; color: var(--ember); }
.route[aria-disabled="true"] {
  cursor: default;
  border-style: dashed;
  border-color: #a59d90;
  background: transparent;
  color: var(--muted);
}

/* ---------- F-03 text field / F-12 editor fields ---------- */

.field {
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  resize: vertical;
  font-size: 17px;
}
.field:focus { border-color: var(--charcoal); outline: none; }

/* F-03's support line. Space is reserved so the layout doesn't jump when it appears. */
.field-support {
  min-height: 3em;
  margin: 10px 2px 0 !important;
  padding-left: 12px;
  border-left: 3px solid var(--amber);
  color: var(--muted);
  font-style: italic;
}
.field-support:empty { border-left-color: transparent; }
.field-support.fresh { animation: support-in 0.6s ease-out; }
@keyframes support-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- F-11 chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 14px;
}
.chip {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid var(--charcoal);
  background: #fff;
  font-size: 16px;
  text-align: left;
}
.chip[aria-pressed="true"] { background: var(--charcoal); color: #fff; }
.chip[aria-pressed="true"]::before { content: "✓ "; }

.add-row { display: flex; gap: 8px; margin-top: 4px; }
.add-row input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--charcoal);
  border-radius: var(--radius);
  background: #fff;
}
.add-row .btn { width: auto; min-height: 48px; }
.add-own { width: auto; display: inline-flex; padding-left: 0; }

/* Nudge sits above the actions so it never covers them. */
.nudge {
  position: relative;
  margin-bottom: 10px;
  padding: 14px 48px 14px 16px;
  border-radius: var(--radius);
  background: var(--paper-2);
  border-left: 4px solid var(--amber);
  font-size: 16px;
}
.nudge p { margin: 0; }
.nudge-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
}

/* ---------- F-12 multi-item editor ---------- */

.example { color: var(--muted); }
.example em { color: var(--ink); }
.editor { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.editor-item {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.editor-item.open { border-color: var(--charcoal); }
.editor-head {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  background: none;
  text-align: left;
  font-weight: 700;
}
.editor-body { padding: 0 16px 16px; }
.editor-label { display: block; font-size: 15px; color: var(--muted); margin-bottom: 6px; }
.editor-body .field { min-height: 72px; }

/* ---------- F-13 forks: two trail signs, identical weight ---------- */

.fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}
.sign {
  position: relative;
  min-height: 140px;
  padding: 16px 14px;
  border: 0;
  background: #8a5a35;
  color: #fff8ec;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sign.left { clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); padding-left: 22px; }
.sign.right { clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%); padding-right: 22px; }
.sign:active { background: #6f4626; }
.sign:focus-visible { outline: none; background: #6f4626; box-shadow: inset 0 0 0 3px var(--focus); }

/* ---------- Ranked list (W-01a ladder; later W-02): reorderable ---------- */

.rank { margin: 8px 0 14px; }
/* position: relative makes the list the rows' offsetParent, which the drag maths relies on. */
.rank-list { position: relative; margin: 0; padding: 0; list-style: none; }
.rank-item {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 8px 4px 8px 14px;
  margin-bottom: 8px;
  border-radius: var(--radius);
  background: #fff;
  border: 2px solid var(--line);
  font-weight: 600;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rank-list:not(.sortable) .rank-item { padding-right: 14px; }
.rank-item:first-child { border-color: var(--amber); background: #fff7e8; }
.rank-num { flex: none; min-width: 1.4em; font-weight: 900; }
.rank-text { flex: 1; }
.sortable .rank-item { cursor: grab; user-select: none; -webkit-user-select: none; }
.rank-item.dragging {
  position: relative;
  z-index: 2;
  cursor: grabbing;
  transition: box-shadow 0.18s ease;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  border-color: var(--charcoal);
}
.rank-grip {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: grab;
  /* The grip takes the touch, so dragging it never scrolls the page. */
  touch-action: none;
}
/* Six-dot grip, drawn with CSS so it needs no image. */
.rank-grip::before {
  content: "";
  width: 14px;
  height: 21px;
  background-image: radial-gradient(circle, currentColor 1.8px, transparent 2.2px);
  background-size: 7px 7px;
}
.reorder-hint { color: var(--muted); font-size: 15px; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- W-01b box breathing ---------- */

.breathe { display: flex; flex-direction: column; align-items: center; margin: 28px 0 8px; }
.breathe-square {
  --side: 180px;
  position: relative;
  width: var(--side);
  height: var(--side);
  border: 3px solid var(--charcoal);
  border-radius: 6px;
}
.breathe-dot {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--ember);
}
.breathe-square.running .breathe-dot { animation: box-breath 16s linear infinite; }
@keyframes box-breath {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(var(--side), 0); }
  50%  { transform: translate(var(--side), var(--side)); }
  75%  { transform: translate(0, var(--side)); }
  100% { transform: translate(0, 0); }
}
.breathe-phase { min-height: 1.5em; margin-top: 18px !important; font-size: 28px; font-weight: 800; letter-spacing: 0.04em; }
.pattern { text-align: center; font-weight: 600; }

/* ---------- W-01c coins ---------- */

.coins { text-align: center; }
.coin-note { max-width: 30ch; margin: 0 auto !important; color: var(--muted); }
.coin {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6d58f, var(--amber) 55%, #b07a24);
  border: 4px solid #8c5f19;
}

/* ---------- D-02 stub plan card ---------- */

.proto-banner {
  margin: 0 0 18px !important;
  padding: 10px 14px;
  border: 2px dashed #a59d90;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--muted);
}
.plan-card {
  border-radius: var(--radius);
  background: #fff;
  border: 2px solid var(--charcoal);
  overflow: hidden;
}
.plan-card h1 {
  margin: 0;
  padding: 14px 16px;
  background: var(--charcoal);
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.08em;
}
.plan-section { padding: 14px 16px; border-top: 1px solid var(--line); }
.plan-section:first-of-type { border-top: 0; }
.plan-section h2 { margin: 0 0 6px; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ember); }
.plan-section ol { margin: 0; padding-left: 22px; }
.plan-section li { margin-bottom: 4px; }
.plan-help { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.plan-help a { color: var(--charcoal); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .breathe-square.running .breathe-dot { animation: none; }
  .field-support.fresh { animation: none; }
  .rank-item { transition: none; }
}

@media (min-width: 481px) {
  .app { box-shadow: 0 0 0 1px #000, 0 10px 40px rgba(0, 0, 0, 0.5); }
}