/* ============================================================
   HeroWithin Prototype — shared styles
   1. Design tokens
   2. Reset
   3. Phone frame (responsive, per Section 3 of the build spec)
   4. Screen shell + layout primitives
   5. Components (buttons, choices, inputs, Solomon panel)
   6. Scene backgrounds (campfire / forge / oak gradients)
   7. Transitions
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Charcoal — the base of every screen */
  --charcoal-950: #0C0B0A;
  --charcoal-900: #14120F;
  --charcoal-800: #1C1917;
  --charcoal-700: #2A2523;
  --charcoal-600: #3A3330;

  /* Ember — fire, CTAs, accents */
  --ember-600: #B4501F;
  --ember-500: #D2691E;
  --ember-400: #E8853F;
  --ember-300: #F2A868;
  --ember-glow: rgba(210, 105, 30, 0.35);

  /* Moss — growth, the oak seed, secondary accents */
  --moss-700: #35452F;
  --moss-500: #5A7351;
  --moss-400: #7D9670;

  /* Type */
  --parchment: #F4EEE4;
  --text-primary: #F4EEE4;
  --text-secondary: rgba(244, 238, 228, 0.72);
  --text-muted: rgba(244, 238, 228, 0.45);

  /* Lines and surfaces */
  --surface: rgba(255, 255, 255, 0.04);
  --surface-raised: rgba(255, 255, 255, 0.07);
  --line: rgba(244, 238, 228, 0.12);
  --line-strong: rgba(244, 238, 228, 0.24);

  /* Desktop page background behind the phone */
  --page-bg: #EDEDED;

  /* Type scale */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --size-display: 30px;
  --size-headline: 25px;
  --size-title: 20px;
  --size-body: 16px;
  --size-small: 14px;
  --size-caption: 12px;

  /* Spacing */
  --gutter: 24px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 260ms;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--charcoal-950);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

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

/* ---------- 3. Phone frame ---------- */
/* Mobile-first: full bleed, no frame chrome at all. */
.phone-frame {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.phone-frame .screen-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--charcoal-900);
}

/* The notch only exists inside the desktop frame. */
.phone-notch { display: none; }

/* Desktop: draw the phone. */
@media (min-width: 601px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--page-bg);
  }

  .phone-frame {
    position: relative;
    width: 390px;
    height: 844px;
    flex: none;
    border-radius: 55px;
    padding: 14px;
    background: #0c0d0c;
    box-shadow:
      0 40px 80px -20px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  }

  .phone-frame .screen-inner { border-radius: 42px; }

  .phone-notch {
    display: block;
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 124px;
    height: 30px;
    background: #0c0d0c;
    border-radius: 0 0 18px 18px;
    z-index: 40;
    pointer-events: none;
  }
}

/* Short desktop windows: let the phone shrink rather than clip. */
@media (min-width: 601px) and (max-height: 900px) {
  .phone-frame { height: min(844px, calc(100vh - 40px)); }
}

/* ---------- 4. Screen shell ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--gutter) + env(safe-area-inset-top, 0px)) var(--gutter)
           calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

@media (min-width: 601px) {
  .screen { padding-top: 52px; padding-bottom: 32px; }
}

/* Progress rail at the top of a flow */
.screen-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  flex: none;
}
.screen-progress span {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--line);
}
.screen-progress span.is-done { background: var(--ember-500); }

.screen-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Room so the last item doesn't sit flush against the footer. */
  padding-bottom: 4px;
}

.screen-body.is-centered { justify-content: center; text-align: center; }

.screen-footer {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
}

/* ---------- Typography ---------- */
.eyebrow {
  font-size: var(--size-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-300);
  margin: 0;
}

.headline {
  font-size: var(--size-headline);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.headline.is-display { font-size: var(--size-display); }

.subhead {
  font-size: var(--size-body);
  color: var(--text-secondary);
  margin: 0;
}

.body-copy {
  font-size: var(--size-body);
  color: var(--text-secondary);
  margin: 0;
  white-space: pre-wrap;
}

.body-copy.is-story {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.65;
  color: rgba(244, 238, 228, 0.85);
}

.helper-text {
  font-size: var(--size-small);
  color: var(--text-muted);
  margin: 0;
}

/* ---------- 5. Components ---------- */
.btn {
  display: block;
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--size-body);
  font-weight: 600;
  text-align: center;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:active { transform: scale(0.985); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(180deg, var(--ember-400), var(--ember-600));
  color: #fff;
  box-shadow: 0 8px 24px -10px var(--ember-glow);
}

.btn-secondary {
  background: transparent;
  color: var(--text-muted);
  font-weight: 500;
  padding: 12px 20px;
}

.btn-outline {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--line-strong);
}

/* Wordmark + tagline (ONB-01) */
.wordmark {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember-400);
}

.tagline {
  margin: 0;
  font-size: var(--size-small);
  color: var(--text-muted);
  max-width: 30ch;
}

.screen-body.is-centered .tagline { margin-left: auto; margin-right: auto; }

/* Map plate (ONB-08) */
.map-plate {
  margin-top: 4px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}
.map-label {
  margin: 0;
  font-size: var(--size-title);
  font-weight: 700;
  color: var(--moss-400);
}
.map-sublabel {
  margin: 4px 0 0;
  font-size: var(--size-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Choice lists */
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.choice {
  display: block;
  width: 100%;
  text-align: left;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-primary);
  font-size: var(--size-small);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.choice:hover { background: var(--surface-raised); }
.choice[aria-pressed="true"] {
  border-color: var(--ember-500);
  background: rgba(210, 105, 30, 0.14);
}

.choice-title {
  display: block;
  font-weight: 600;
  font-size: var(--size-body);
  letter-spacing: 0.01em;
}
.choice-desc {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: var(--size-small);
}

/* Text input */
.field {
  width: 100%;
  padding: 15px 18px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.field::placeholder { color: var(--text-muted); }
.field:focus { border-color: var(--ember-500); }

textarea.field { min-height: 110px; resize: none; }

/* Solomon */
.solomon-panel {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}

.solomon-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ember-400), var(--moss-700));
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--size-small);
  color: #fff;
}

.solomon-name {
  font-size: var(--size-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
}

.solomon-line {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* Live chat with Solomon (js/solomon-chat.js).
   Used on rows with Solomon Mode = Interactive. Colours come from the
   design tokens above rather than one-off hexes. */
.solomon-chat {
  display: flex;
  flex-direction: column;
  /* Take the rest of the screen and scroll internally. */
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 4px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}

.solomon-chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.solomon-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.solomon-bubble-solomon {
  align-self: flex-start;
  background: var(--charcoal-700);
  color: var(--parchment);
  border-bottom-left-radius: 4px;
  font-family: var(--font-serif);
  font-size: 16px;
}

.solomon-bubble-user {
  align-self: flex-end;
  background: linear-gradient(180deg, var(--ember-500), var(--ember-600));
  color: #fff;
  border-bottom-right-radius: 4px;
}

.solomon-bubble.is-pending { opacity: 0.6; font-style: italic; }

/* Footer on a reply that was cut off in transit. The words above it are
   real — this only says they are unfinished, and offers to carry on. */
.solomon-cutoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(210, 105, 30, 0.35);
  font-family: var(--font-sans);
  font-size: var(--size-small);
  font-style: normal;
}

.solomon-cutoff-text {
  color: var(--ember-300);
  flex: 1 1 auto;
  min-width: 0;
}

.solomon-cutoff-btn {
  flex: none;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ember-500);
  background: transparent;
  color: var(--ember-300);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.solomon-cutoff-btn:disabled { opacity: 0.5; cursor: default; }
.solomon-bubble.is-error {
  background: rgba(210, 105, 30, 0.14);
  border: 1px solid rgba(210, 105, 30, 0.3);
  color: var(--ember-300);
  font-family: var(--font-sans);
  font-size: var(--size-small);
  font-style: normal;
}

.solomon-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  flex: none;
}

.solomon-chat-input-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.08);
  color: var(--parchment);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.solomon-chat-input-row input::placeholder { color: var(--text-muted); }
.solomon-chat-input-row input:focus { border-color: var(--ember-500); }
.solomon-chat-input-row input:disabled { opacity: 0.6; }

.solomon-chat-input-row button {
  flex: none;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: none;
  background: linear-gradient(180deg, var(--ember-400), var(--ember-600));
  color: #fff;
  font-weight: 600;
}
.solomon-chat-input-row button:disabled { opacity: 0.4; cursor: not-allowed; }

/* A chat screen hands its scrolling to the message log. */
.screen-body.has-chat { overflow: hidden; }

/* Scripture card */
.scripture {
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border-left: 3px solid var(--ember-500);
}
.scripture-verse {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
}
.scripture-citation {
  margin: 10px 0 0;
  font-size: var(--size-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Placeholder screens (ONB-04, ONB-10 — not yet designed) */
.placeholder-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--line-strong);
  font-size: var(--size-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Status / error strip */
.status-strip {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(210, 105, 30, 0.12);
  border: 1px solid rgba(210, 105, 30, 0.3);
  font-size: var(--size-small);
  color: var(--ember-300);
}

/* ---------- 6. Scene backgrounds ---------- */
.scene { position: absolute; inset: 0; z-index: 0; }
/* :not(.scene) matters: .scene is also a direct child of .screen, and this
   rule used to apply to it too. Equal specificity with the rule above, and
   this one came second, so it silently won and reset .scene back to
   position:relative — collapsing it to zero height (inset:0 does nothing
   without absolute positioning) on every screen in the app, old flows and
   App Shell tabs alike. Invisible on a gradient over an already-dark base
   background; obvious once a real photo (scene-home-photo) had nothing to
   paint onto. Found 2026-09-13 chasing exactly that. */
.screen > *:not(.scene) { position: relative; z-index: 1; }

.scene-night {
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(210, 105, 30, 0.10), transparent 60%),
    linear-gradient(180deg, var(--charcoal-950), var(--charcoal-800));
}

.scene-campfire {
  background:
    radial-gradient(70% 42% at 50% 88%, rgba(232, 133, 63, 0.42), transparent 62%),
    radial-gradient(120% 80% at 50% 100%, rgba(180, 80, 31, 0.22), transparent 65%),
    linear-gradient(180deg, #0B0A09 0%, #1A1512 55%, #241A14 100%);
}

.scene-forge {
  background:
    radial-gradient(60% 40% at 22% 72%, rgba(210, 105, 30, 0.38), transparent 60%),
    linear-gradient(180deg, #0D0C0B 0%, #191413 60%, #221715 100%);
}

.scene-oak {
  background:
    radial-gradient(75% 45% at 50% 82%, rgba(90, 115, 81, 0.34), transparent 62%),
    linear-gradient(180deg, #0B0D0A 0%, #151A13 60%, #1C231A 100%);
}

.scene-dawn {
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(242, 168, 104, 0.22), transparent 60%),
    linear-gradient(180deg, #1B1512 0%, #12100E 60%, var(--charcoal-950) 100%);
}

/* The one scene using the real approved Figma photo (node 65:4) instead
   of a gradient recreation — see the comment in js/screens/home.js. The
   export is a small native resolution (54x116), so it is shown softened
   rather than sharp; the dark gradient on top keeps header text readable
   over it exactly as the gradient-only scenes already do. */
.scene-home-photo {
  background-image:
    linear-gradient(180deg, rgba(11, 10, 9, 0.3) 0%, rgba(11, 10, 9, 0.25) 35%, rgba(11, 10, 9, 0.8) 100%),
    url("../assets/images/scene-campfire-home.jpg");
  background-size: cover;
  background-position: top center;
}

/* ONB-01's welcome screen — a full-resolution photo Dave supplied directly
   (not a Figma export), cropped to the phone's own aspect ratio so almost
   nothing was lost. The gradient is shaped around ONB-01's actual layout
   (centered: true): darkest where the eyebrow/headline/subhead sit and
   over the primary button, lighter in the empty band between them so the
   lake and campfire still show through. */
.scene-welcome {
  background-image:
    linear-gradient(
      180deg,
      rgba(8, 7, 6, 0.28) 0%,
      rgba(8, 7, 6, 0.6) 22%,
      rgba(8, 7, 6, 0.6) 52%,
      rgba(8, 7, 6, 0.32) 65%,
      rgba(8, 7, 6, 0.8) 88%,
      rgba(8, 7, 6, 0.85) 100%
    ),
    url("../assets/images/scene-welcome-onboarding.jpg");
  background-size: cover;
  background-position: center;
}

/* ---------- 7. Transitions ---------- */
.screen.is-entering { animation: screen-in var(--dur) var(--ease); }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* The router moves focus to each new screen's heading so screen-reader and
   keyboard users land in the right place. That element is tabindex="-1", so it
   can never be reached by tabbing — no ring is needed or wanted for it.
   Everything else keeps its normal keyboard focus ring. */
[tabindex="-1"]:focus { outline: none; }
:focus:not(:focus-visible) { outline: none; }

/* Screen-reader-only helper */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 8. App Shell (Home / Map / Solomon / Campfire / Profile) ----------
   Built from the Figma "00-Design System" canon page (Playfair Display +
   Inter + Outfit; Charcoal/Forged Gold/Ember Orange palette) and the five
   "APPROVED by Dave" screens on that same file. This is a second visual
   layer alongside the tokens above, not a replacement for them — Onboarding
   and Day 1 keep their existing look until a separate pass re-skins them. */
:root {
  --canon-charcoal: #262220;
  --canon-midnight: #1B2028;
  --canon-forge-black: #171310;
  --canon-forged-gold: #EBAD3F;
  --canon-bronze: #C68A3A;
  --canon-warm-white: #F7F2E7;
  --canon-mist: #D8D0C2;
  --canon-stone: #9C9081;
  --canon-ember-orange: #E67E33;

  --font-display: "Playfair Display", var(--font-serif);
  --font-section: "Outfit", var(--font-sans);
}

.shell {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.shell-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* A shell tab reuses .screen's positioning/scene/padding but has no
   .screen-footer — its actions live inline inside cards instead. */
.shell-tab .screen-body { padding-bottom: 16px; }

.hw-eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: var(--size-caption);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--canon-forged-gold);
}

.hw-display {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.15;
  color: var(--canon-warm-white);
}

.home-header { margin-bottom: 4px; }

.hw-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--line);
}

.hw-card-title {
  margin: 2px 0 4px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--canon-warm-white);
}

.hw-card-meta {
  margin: 0 0 14px;
  font-size: var(--size-small);
  color: var(--text-muted);
}

.hw-card .btn { margin-top: 4px; }

.hw-progress-dots {
  display: flex;
  gap: 5px;
  margin-bottom: 16px;
}
.hw-progress-dots span {
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line);
}
.hw-progress-dots span.is-done { background: var(--canon-forged-gold); }

.hw-card-solomon { display: flex; gap: 14px; align-items: flex-start; }
.hw-card-solomon .solomon-line { font-size: 16px; }
.hw-card-link {
  display: block;
  margin: 8px 0 0;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--canon-forged-gold);
}

.hw-card-campfire p { margin: 0 0 14px; color: var(--text-secondary); }

/* ---------- Bottom nav (persistent across app-shell tabs) ---------- */
.bottom-nav[hidden] { display: none; }

.bottom-nav {
  flex: none;
  display: flex;
  border-top: 1px solid var(--line);
  background: rgba(12, 11, 10, 0.72);
  backdrop-filter: blur(12px);
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px));
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 6px 2px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.bottom-nav-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.bottom-nav-item.is-active {
  color: var(--canon-forged-gold);
}
.bottom-nav-item.is-active .bottom-nav-icon { opacity: 1; }

/* Tab content not yet designed beyond a stub (Solomon/Campfire/Profile land
   here until their own approved Figma screens are implemented). */
.hw-coming-soon { text-align: center; }

/* Map tab — a vertical stand-in for the Figma "MAP — APPROVED" screen's
   12 markers over a mountain plate. No mountain art exists yet
   (assets/images is still empty, see NEXT-STEPS.md), so this reads the
   village order as a trail list rather than pixel-positioning markers
   over art that isn't there. */
.village-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
}

.village-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
}

.village-badge {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--size-small);
  font-weight: 700;
  background: var(--charcoal-700);
  color: var(--text-muted);
  border: 1px solid var(--line-strong);
}

.village-name {
  flex: 1;
  font-size: var(--size-body);
  font-weight: 600;
  color: var(--text-muted);
}

.village-row.is-done .village-badge {
  background: var(--canon-forged-gold);
  border-color: var(--canon-forged-gold);
  color: var(--charcoal-950);
}
.village-row.is-done .village-name { color: var(--text-secondary); }

.village-row.is-current {
  background: rgba(235, 173, 63, 0.12);
  border-color: var(--canon-forged-gold);
}
.village-row.is-current .village-badge {
  background: var(--canon-forged-gold);
  border-color: var(--canon-forged-gold);
  color: var(--charcoal-950);
}
.village-row.is-current .village-name { color: var(--canon-warm-white); }

/* Solomon tab — header above the reused live chat widget, plus a
   quick-start block appended into the chat's own message log so it
   scrolls away naturally once a real conversation starts. */
.solomon-header { margin-bottom: 2px; }
.solomon-tagline {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--text-secondary);
}

.solomon-quickstart { padding: 4px 0 2px; }

.solomon-prompt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.solomon-prompt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-primary);
  font-size: var(--size-small);
  font-weight: 600;
}
.solomon-prompt:hover { background: var(--surface-raised); }
.solomon-prompt span { color: var(--canon-forged-gold); margin-left: 10px; flex: none; }

.hw-card-talk {
  margin-top: 12px;
  text-align: center;
}
.hw-card-talk .helper-text { margin-top: 8px; }

/* Campfire tab — Overview only, matching the approved design's own
   scope ("Overview tab built; Feed/Members/Resources/Events stubbed"). */
.campfire-header { margin-bottom: 4px; }
.campfire-meta {
  margin: 4px 0 10px;
  font-size: var(--size-small);
  color: var(--text-muted);
}
.campfire-badge {
  display: inline-flex;
  margin-top: 2px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  font-size: var(--size-caption);
  font-weight: 600;
  color: var(--text-secondary);
}

.tab-row {
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  margin: 4px 0 4px;
}
.tab-item {
  flex: none;
  background: none;
  border: none;
  padding: 6px 0 10px;
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
}
.tab-item.is-active {
  color: var(--canon-forged-gold);
  border-bottom-color: var(--canon-forged-gold);
}

.campfire-overview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hw-card-weekly .btn { margin-top: 10px; }
.hw-card-weekly .btn:first-of-type { margin-top: 14px; }

.activity-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 6px 0 0;
}
.activity-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--canon-warm-white);
}
.activity-header span {
  font-size: var(--size-small);
  font-weight: 600;
  color: var(--canon-forged-gold);
}

.post-card {
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.post-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.post-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--charcoal-700);
  border: 1px solid var(--line-strong);
}
.post-name { margin: 0; font-size: var(--size-small); font-weight: 600; }
.post-tag {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: rgba(235, 173, 63, 0.14);
  color: var(--canon-forged-gold);
  font-size: 11px;
  font-weight: 600;
}
.post-body { margin: 0 0 12px; color: var(--text-secondary); }
.post-foot { display: flex; gap: 16px; font-size: var(--size-small); color: var(--text-muted); }

/* Profile tab */
.hw-card-identity { text-align: center; }
.hw-card-identity .hw-card-title { margin-top: 4px; }
.profile-role {
  margin: 0 0 12px;
  font-size: var(--size-small);
  color: var(--text-muted);
}
.pill-village {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--line-strong);
  font-size: var(--size-caption);
  font-weight: 600;
  color: var(--text-secondary);
}
.profile-current-path { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; }

.hw-card-stats {
  display: flex;
}
.stat-col {
  flex: 1;
  text-align: center;
  padding: 0 6px;
}
.stat-col + .stat-col { border-left: 1px solid var(--line); }
.stat-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--canon-warm-white);
}
.stat-label {
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section-label {
  margin: 6px 0 -6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--canon-warm-white);
}

.list-card {
  padding: 4px 20px;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--line);
}
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  text-align: left;
  color: inherit;
  font: inherit;
}
button.list-row { cursor: pointer; }
.list-row + .list-row { border-top: 1px solid var(--line); }
.list-row-icon {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--canon-forged-gold);
  opacity: 0.7;
}
.list-row-text { flex: 1; min-width: 0; }
.list-row-title { margin: 0; font-size: var(--size-body); font-weight: 600; }
.list-row-subtitle { margin: 2px 0 0; font-size: var(--size-small); color: var(--text-muted); }
.list-row-chevron { flex: none; color: var(--text-muted); }

/* Daily Check-In and Journal — detail screens reached from Home/Profile
   rather than the bottom nav (see js/app-shell.js DETAIL_ROUTES). */
.back-link { margin-top: 0; }

.checkin-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.checkin-chip {
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text-primary);
  font-size: var(--size-small);
  font-weight: 600;
}
.checkin-chip[aria-pressed="true"] {
  background: rgba(235, 173, 63, 0.16);
  border-color: var(--canon-forged-gold);
  color: var(--canon-forged-gold);
}

.journal-textarea {
  min-height: 180px;
  margin-top: 4px;
}

.journal-entries {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journal-entry .hw-card-title { font-size: 15px; }

.village-status {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--canon-forged-gold);
}

/* The static first paint in index.html / day1.html. It stands in for the
   first screen only until the router draws one, so it deliberately reuses
   the ordinary screen furniture rather than introducing a second look. */
.boot-screen .wordmark { margin-bottom: 20px; }

.boot-ember {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: var(--ember-500);
  box-shadow: 0 0 18px 4px rgba(210, 105, 30, 0.45);
  animation: boot-ember-pulse 1.6s var(--ease) infinite;
}

@keyframes boot-ember-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* Respect a reduced-motion preference: keep the ember, drop the pulse. */
@media (prefers-reduced-motion: reduce) {
  .boot-ember { animation: none; opacity: 0.8; }
}