/* See CSS_README.md for which file owns which part of the UI. */

@keyframes wcp-frame-glow {
  0%, 100% {
    box-shadow:
      0 12px 28px rgba(0,0,0,0.18),
      0 0 0 2px rgba(255,251,245,0.96),
      0 0 0 8px rgba(214,175,97,0.34),
      0 0 34px rgba(193,154,87,0.28),
      0 0 64px rgba(255,226,150,0.12);
  }
  35% {
    box-shadow:
      0 12px 28px rgba(0,0,0,0.18),
      0 0 0 3px rgba(255,248,220,0.98),
      0 0 0 11px rgba(214,175,97,0.48),
      0 0 52px rgba(214,175,97,0.40),
      0 0 92px rgba(255,226,150,0.22);
  }
  58% {
    box-shadow:
      0 12px 28px rgba(0,0,0,0.18),
      0 0 0 2px rgba(255,253,240,0.99),
      0 0 0 9px rgba(255,234,170,0.42),
      0 0 66px rgba(255,243,207,0.42),
      0 0 108px rgba(255,248,230,0.18);
  }
}

.wcp-scene-stage-completed .wcp-node-story .wcp-story-emblem-frame {
  width: 124px;
  height: 162px;
  background:
    linear-gradient(150deg, rgba(255,252,246,0.98) 0%, rgba(var(--wcp-tint-a), 0.92) 38%, rgba(var(--wcp-tint-b), 0.82) 68%, rgba(var(--wcp-tint-c), 0.66) 100%);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.18),
    0 0 0 2px rgba(255,251,245,0.96),
    0 0 0 8px rgba(214,175,97,0.34),
    0 0 34px rgba(193,154,87,0.28),
    0 0 64px rgba(255,226,150,0.12);
  animation: wcp-frame-glow 2.1s ease-in-out infinite;
}

.wcp-scene-stage-completed .wcp-node-story .wcp-story-emblem-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(130deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.18) 18%, transparent 34%),
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.24), transparent 30%);
  clip-path: url(#em-b1);
  pointer-events: none;
  mix-blend-mode: screen;
}

.wcp-scene-stage-completed .wcp-node-story .wcp-story-emblem-frame::after {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 24% 24%, rgba(255,253,238,0.96) 0%, rgba(255,253,238,0.96) 3%, transparent 10%),
    radial-gradient(circle at 74% 32%, rgba(255,242,196,0.88) 0%, rgba(255,242,196,0.88) 2.5%, transparent 10%),
    radial-gradient(circle at 58% 72%, rgba(255,250,226,0.84) 0%, rgba(255,250,226,0.84) 2.5%, transparent 11%);
  filter: blur(0.4px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: wcp-gold-sparkle 1.5s ease-in-out infinite;
}

.wcp-scene-stage-completed .wcp-node-story::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6%;
  width: 110px;
  height: 44px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 12% 58%, rgba(255,251,232,0.96) 0%, rgba(255,251,232,0.96) 2.2%, transparent 7%),
    radial-gradient(circle at 32% 18%, rgba(255,242,196,0.88) 0%, rgba(255,242,196,0.88) 1.8%, transparent 6%),
    radial-gradient(circle at 50% 50%, rgba(255,248,220,0.92) 0%, rgba(255,248,220,0.92) 1.8%, transparent 6%),
    radial-gradient(circle at 70% 16%, rgba(255,238,186,0.84) 0%, rgba(255,238,186,0.84) 1.7%, transparent 6%),
    radial-gradient(circle at 88% 54%, rgba(255,251,232,0.94) 0%, rgba(255,251,232,0.94) 2%, transparent 6.8%);
  filter: blur(0.4px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.36;
  animation: wcp-ring-sparkle 1.7s ease-in-out infinite;
}

.wcp-scene-stage-completed .wcp-node-story::before {
  background: rgba(214,171,74,0.30);
  filter: blur(2px);
}

.wcp-scene-stage-completed .wcp-node-story .wcp-node-label {
  font-size: 15.5px;
}

.wcp-scene-stage-completed .wcp-node-state {
  color: #8b5f00;
  background: rgba(255,244,214,0.96);
  box-shadow: 0 4px 14px rgba(123,93,26,0.16), 0 0 18px rgba(214,171,74,0.12);
}

.wcp-scene-stage-completed .wcp-node-label {
  background: rgba(250,248,230,0.94);
  box-shadow: 0 4px 14px rgba(123,93,26,0.12), 0 0 18px rgba(214,171,74,0.10);
}

.wcp-scene-stage-completed .wcp-node-helper {
  background: rgba(250,250,240,0.92);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(123,93,26,0.10);
}

/* Emblem glow loops: heavy on integrated GPUs — respect reduced motion + sprk-low-fx. */
@media (prefers-reduced-motion: reduce) {
  .wcp-scene-stage-completed .wcp-node-story .wcp-story-emblem-frame {
    animation: none !important;
  }
  .wcp-scene-stage-completed .wcp-node-story .wcp-story-emblem-frame::after,
  .wcp-scene-stage-completed .wcp-node-story::after {
    animation: none !important;
  }
}
html.sprk-low-fx .wcp-scene-stage-completed .wcp-node-story .wcp-story-emblem-frame {
  animation: none !important;
}
html.sprk-low-fx .wcp-scene-stage-completed .wcp-node-story .wcp-story-emblem-frame::after,
html.sprk-low-fx .wcp-scene-stage-completed .wcp-node-story::after {
  animation: none !important;
}

.wcp-emblem-node.wcp-locked {
  opacity: 0.72;
}
.wcp-emblem-node.wcp-locked img,
.wcp-emblem-node.wcp-locked .wcp-story-emblem-frame {
  filter: grayscale(0.28) saturate(0.8);
}
.wcp-emblem-node.wcp-locked .wcp-node-label {
  color: var(--ink-3);
  background: rgba(250, 247, 240, 0.82);
}
.wcp-emblem-node:hover img, .wcp-emblem-node:focus-visible img {
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.16),
    0 0 0 8px rgba(250,247,240,0.86),
    0 0 0 15px rgba(var(--wcp-tint-c), 0.18);
  filter: brightness(1.02);
}
.wcp-emblem-node:active img { transform: translateY(-1px); }

.wcp-node-label {
  font-size: 13.5px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  opacity: 1;
  padding: 3px 10px 4px;
  border-radius: 999px;
  background: rgba(250, 247, 240, 0.94);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  text-shadow: 0 1px 2px rgba(255,252,245,0.80);
  pointer-events: none;
  letter-spacing: 0.01em;
}

.wcp-node-state {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(250, 247, 240, 0.92);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  pointer-events: none;
}

.wcp-node-helper {
  max-width: 170px;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  color: var(--ink-2);
  padding: 3px 8px 4px;
  border-radius: 12px;
  background: rgba(250, 247, 240, 0.86);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  pointer-events: none;
}

/* ── STORY NODE: centrepiece emblem ─────────────────────────────── */
.wcp-node-story { position: absolute; }

/* Shield-shaped emblem frame around the story thumbnail */
.wcp-story-emblem-frame {
  /* Isolate stacking so clip-path + filters on ancestors do not mirror thumbnails (WebKit). */
  isolation: isolate;
  width: 108px;
  height: 142px;  /* 3:4 portrait to match em-b1 proportions */
  box-sizing: border-box;
  padding: 4px;
  clip-path: url(#em-b1);
  overflow: hidden;
  border-radius: 2px;
  background:
    linear-gradient(155deg, rgba(255,250,242,0.98) 0%, rgba(var(--wcp-tint-a), 0.86) 42%, rgba(var(--wcp-tint-c), 0.72) 100%);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.24),
    0 0 0 1.5px rgba(255,248,226,0.94),
    0 0 0 5px rgba(193,154,87,0.28);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.22));
  transition: transform 0.22s ease, filter 0.22s ease, box-shadow 0.22s ease;
}
.wcp-story-emblem-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.wcp-emblem-node.wcp-node-story:hover .wcp-story-emblem-frame,
.wcp-emblem-node.wcp-node-story:focus-visible .wcp-story-emblem-frame {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.28),
    0 0 0 2px rgba(255,248,226,0.96),
    0 0 0 7px rgba(193,154,87,0.36),
    0 0 24px rgba(193,154,87,0.18);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.28));
}
.wcp-node-story .wcp-node-label {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.wcp-node-task .wcp-node-label,
.wcp-node-task .wcp-node-state,
.wcp-node-task .wcp-node-helper {
  display: none;
}

/* Classic week-0 path hid the emblem because the big story card carried the CTA. */
.wcp-scene-stage-active .wcp-node-story,
.wcp-scene-stage-future .wcp-node-story {
  opacity: 0;
  pointer-events: none;
}
/* Journey / adaptive watercolor: the story lead is a real tap target on the path. */
#wcp-scene.wcp-scene-journey-modules.wcp-scene-stage-active .wcp-node-story,
#wcp-scene.wcp-scene-journey-modules.wcp-scene-stage-future .wcp-node-story {
  opacity: 1;
  pointer-events: auto;
}

.wcp-emblem-node.wcp-locked .wcp-node-state,
.wcp-emblem-node.wcp-locked .wcp-node-helper {
  color: var(--ink-3);
}
/* Breathing glow behind story emblem */
.wcp-node-story::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 110px; height: 146px;
  margin: -73px 0 0 -55px;
  clip-path: url(#em-b1);
  background: rgba(var(--wcp-tint-c), 0.22);
  animation: wcp-story-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
  transform-origin: center;
}
@keyframes wcp-story-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%       { transform: scale(1.22); opacity: 0;    }
}

/* ── PREVIOUS / NEXT WEEK IMAGE PEEKS ───────────────────────────── */
/* Actual adjacent painting pixels bleeding in from edges — kept light */
.wcp-week-peek {
  position: absolute;
  top: 0; bottom: 0;
  width: 130px;
  pointer-events: none;
  z-index: 2;
  background-size: cover;
  opacity: 0.28;
}
.wcp-week-peek-prev {
  left: 0;
  background-position: right center;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 22%, transparent 100%);
          mask-image: linear-gradient(to right, black 0%, black 22%, transparent 100%);
}
.wcp-week-peek-next {
  right: 0;
  background-position: left center;
  -webkit-mask-image: linear-gradient(to left, black 0%, black 22%, transparent 100%);
          mask-image: linear-gradient(to left, black 0%, black 22%, transparent 100%);
}

/* SVG route + stage-completed path glow: views-overlay.css */

/* Path bloom sparkles */

.wcp-route-bloom-sparkle, .emblem-sparkle {
  fill: url(#wcp-sparkle-gold);
  opacity: 0;
  animation: wcp-route-bloom-sparkle var(--bloom-duration, 6.4s) cubic-bezier(0.4, 0, 0.2, 1) var(--bloom-delay, 0s) infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

.star-sparkle {
  filter: blur(0.32px) drop-shadow(0 0 7px rgba(255,246,226,0.26)) drop-shadow(0 0 14px rgba(255,232,176,0.12));
}

/* Gold sparkle gradient for SVG */

@keyframes wcp-route-bloom-sparkle {
  0%, 100% {
    opacity: 0;
    filter: blur(0.9px) drop-shadow(0 0 5px rgba(255,246,226,0.08)) drop-shadow(0 0 10px rgba(255,232,176,0.05));
  }
  18% {
    opacity: 0;
  }
  20% {
    opacity: var(--bloom-opacity, 0.8);
    filter: blur(0.18px) drop-shadow(0 0 8px rgba(255,246,226,0.22)) drop-shadow(0 0 16px rgba(255,232,176,0.12));
  }
  23% {
    opacity: calc(var(--bloom-opacity, 0.8) * 0.12);
    filter: blur(0.62px) drop-shadow(0 0 6px rgba(255,246,226,0.14)) drop-shadow(0 0 10px rgba(255,232,176,0.08));
  }
}

/* Desktop viewport lock + ghosted future arcs */
.wcp-story-stage-content-future {
  width: auto;
  padding: 0;
}

.wcp-story-stage-future-hint {
  margin: 0.65rem 1rem 0;
  max-width: 22rem;
  font-size: 0.84rem;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(255, 248, 240, 0.88);
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* .wcp-scene-stage-future path styling: views-overlay.css (single source) */

.wcp-week-meta {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 4;
  padding: 10px 20px;
  border-radius: 22px;
  background: rgba(250, 247, 240, 0.24);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 28px rgba(28,20,16,0.08);
  white-space: nowrap;
}

.wcp-scene-stage-active .wcp-week-meta,
.wcp-scene-stage-future .wcp-week-meta {
  z-index: 2;
  background: rgba(250, 247, 240, 0.14);
  box-shadow: 0 10px 28px rgba(28,20,16,0.04);
}

.wcp-week-kicker {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(var(--wcp-tint-c), 0.68);
  font-weight: 500;
}

.wcp-week-main {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
/* Current week: extra prominence */
.wcp-week-meta-current .wcp-week-main {
  font-size: 1.45rem;
  color: var(--ink);
}
.wcp-week-meta-current .wcp-week-kicker {
  color: rgba(var(--wcp-tint-c), 0.90);
  letter-spacing: 0.28em;
}

.wcp-week-painting {
  font-size: 0.78rem;
  color: var(--ink-2);
  font-style: italic;
}
.wcp-week-painting:empty {
  display: none;
}

#wcp-scene.wcp-scene-journey-modules .wcp-week-meta {
  top: clamp(78px, 10vh, 112px);
}

/* The captain's one-line "why" for a Place-visit path (mondo mode, 2026-07-02). */
.wcp-week-captain-why {
  display: block;
  max-width: min(74vw, 420px);
  white-space: normal;
  text-align: center;
  font-size: 0.74rem;
  line-height: 1.35;
  font-style: italic;
  color: var(--ink-2);
}

/* The in-Passeggiata switch: Klassisk (pure template) · Mondo (captain Place-visits). */
.wcp-journey-mode-switch {
  display: inline-flex;
  gap: 2px;
  margin-top: 5px;
  padding: 2px;
  border: 1px solid rgba(148, 116, 58, 0.32);
  border-radius: 999px;
  background: rgba(250, 246, 238, 0.72);
}
.wcp-mode-btn {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 999px;
  cursor: pointer;
  color: rgba(72, 58, 38, 0.62);
  transition: background 0.18s ease, color 0.18s ease;
}
.wcp-mode-btn:hover { color: rgba(72, 58, 38, 0.9); }
.wcp-mode-btn.wcp-mode-btn-active {
  background: linear-gradient(150deg, #c19a57, #a97e3c);
  color: #fff8ec;
  cursor: default;
}
.wcp-mode-btn:disabled { opacity: 0.55; cursor: wait; }
html.dark .wcp-journey-mode-switch {
  border-color: rgba(214, 175, 97, 0.3);
  background: rgba(30, 24, 18, 0.62);
}
html.dark .wcp-mode-btn { color: rgba(238, 226, 204, 0.6); }
html.dark .wcp-mode-btn:hover { color: rgba(238, 226, 204, 0.92); }

.wcp-week-nav {
  position: absolute;
  top: 0;
  width: 12%;
  min-width: 88px;
  height: 100%;
  border: 0;
  background: transparent;
  color: rgba(var(--wcp-tint-c), 0.46);
  cursor: pointer;
  z-index: 4;
  transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.wcp-week-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wcp-week-nav-prev {
  left: 0;
}

.wcp-week-nav-prev::before {
  background: linear-gradient(90deg, rgba(var(--wcp-tint-c), 0.08) 0%, rgba(var(--wcp-tint-c), 0.04) 24%, transparent 84%);
}

.wcp-week-nav-next {
  right: 0;
}

.wcp-week-nav-next::before {
  background: linear-gradient(270deg, rgba(var(--wcp-tint-c), 0.08) 0%, rgba(var(--wcp-tint-c), 0.04) 24%, transparent 84%);
}

.wcp-week-nav span {
  position: absolute;
  top: 50%;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3.4rem;
  line-height: 1;
  opacity: 0.54;
  transform: translateY(-50%);
}

.wcp-week-nav-prev span { left: 16px; }
.wcp-week-nav-next span { right: 16px; }

.wcp-week-nav:hover,
.wcp-week-nav:focus-visible {
  color: rgba(var(--wcp-tint-c), 0.78);
}

.wcp-week-nav:disabled {
  opacity: 0.18;
  cursor: default;
}

.wcp-week-nav:disabled span {
  opacity: 0.22;
  transform: translateY(-50%);
}

.wcp-week-nav:hover span,
.wcp-week-nav:focus-visible span {
  transform: translateY(-50%) scale(1.04);
  opacity: 0.88;
}

/* ── REDUCED-MOTION FALLBACK ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wcp-seg, .wcp-emblem-node {
    animation: none !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
  .wcp-scene-enter,
  .wcp-scene-enter-forward,
  .wcp-scene-enter-backward,
  .wcp-scene-exit,
  .wcp-scene-exit-forward,
  .wcp-scene-exit-backward,
  .wcp-unlock-celebration,
  .wcp-unlock-burst,
  .wcp-unlock-particle,
  .wcp-unlock-card,
  #main-app.app-enter-story #view-progress .wcp-scene,
  #main-app.app-enter-story #view-chat,
  #main-app.app-return-path #view-chat,
  #main-app.app-return-path #view-progress {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  #main-app.app-enter-story::before,
  #main-app.app-return-path::before {
    transition: none !important;
    opacity: 0 !important;
  }
  .wcp-route-svg path {
    transition: none !important;
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  .wcp-node-sparkle,
  .wcp-route-bloom,
  .wcp-route-bloom-core,
  .wcp-route-bloom-sparkle,
  .emblem-sparkle,
  .wcp-node-honors,
  .wcp-node-story::before,
  .wcp-node-story::after,
  .wcp-scene-stage-completed .wcp-node-story .wcp-story-emblem-frame,
  .wcp-scene-stage-completed .wcp-node-story .wcp-story-emblem-frame::after {
    animation: none !important;
    transition: none !important;
  }
  .loading-overlay-card,
  .loading-overlay-spinner {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ── RESPONSIVE: narrow viewports (path stays viewport-locked, no vertical scroll) ─ */
@media (max-width: 600px) {
  .wcp-story-stage {
    top: 12%;
    left: 50%;
    width: min(82vw, 420px);
    height: min(68vh, 560px);
    transform: translateX(-50%);
  }
  .wcp-story-stage-content {
    width: min(64vw, 300px);
    padding: 1.4rem 1.2rem 2.1rem;
  }
  .wcp-story-stage-title {
    font-size: clamp(1.8rem, 8.8vw, 2.9rem);
  }
  .wcp-story-stage-question {
    font-size: clamp(5.6rem, 30vw, 8.8rem);
  }
  .wcp-scene-stage-completed .wcp-story-stage:not(.wcp-journey-story-hero) {
    display: none;
  }
  .wcp-week-meta {
    top: 14px;
    padding: 7px 10px;
    width: min(88vw, 320px);
    white-space: normal;
  }
  .wcp-week-nav {
    min-width: 64px;
    width: 18%;
  }
  .wcp-week-nav span {
    font-size: 2.6rem;
  }
  .wcp-emblem-node {
    transform: translate(-50%, -50%) scale(1.25);
  }
  .wcp-patches-svg { opacity: 0.78; }
  .wcp-route-svg {
    display: block;
    opacity: 0.92;
  }
}

/* ── Marketing site (/, /reviews, /blog) — same tokens as app chrome ───── */
.site-body {
  min-height: 100dvh;
  background: radial-gradient(120% 80% at 50% 0%, var(--bg-2), var(--bg));
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
}

.site-top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  color: var(--nav-text);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.site-top-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.65rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-brand {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-left: auto;
}

.site-nav-link {
  color: var(--nav-text);
  text-decoration: none;
  font-size: 0.88rem;
  opacity: 0.88;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.site-nav-link:hover {
  opacity: 1;
  border-bottom-color: rgba(200, 168, 74, 0.45);
}

.site-nav-link-active {
  opacity: 1;
  border-bottom-color: var(--gold);
}

.site-nav-cta {
  font-weight: 600;
  color: var(--gold-lt);
}

.site-locale {
  display: flex;
  gap: 0.25rem;
}

.site-locale-btn {
  border: 1px solid rgba(240, 234, 214, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: var(--nav-text);
  border-radius: 8px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.site-locale-btn.is-active {
  background: rgba(200, 168, 74, 0.25);
  border-color: rgba(200, 168, 74, 0.55);
}

.site-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.site-main.site-narrow {
  max-width: 720px;
}

.site-hero {
  padding: 2rem 0 2.5rem;
}

.site-hero.site-hero-painting {
  position: relative;
  padding: 2.75rem 1.5rem 3rem;
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px rgba(12, 10, 8, 0.12);
}

.site-hero-painting-backdrop {
  position: absolute;
  inset: 0;
  background-image: url("/watercolor/birmingham-museums-trust-nbneQlI2M1A-unsplash.jpg");
  background-size: cover;
  background-position: 42% 38%;
  filter: saturate(0.92) contrast(1.02);
  transform: scale(1.04);
}

.site-hero-painting-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(250, 247, 240, 0.92) 0%, rgba(250, 247, 240, 0.78) 42%, rgba(250, 247, 240, 0.35) 72%, rgba(250, 247, 240, 0.12) 100%);
  pointer-events: none;
}

html.dark .site-hero-painting-wash {
  background:
    linear-gradient(120deg, rgba(18, 16, 14, 0.92) 0%, rgba(18, 16, 14, 0.82) 45%, rgba(18, 16, 14, 0.5) 72%, rgba(18, 16, 14, 0.2) 100%);
}

.site-hero-painting-inner {
  position: relative;
  z-index: 1;
  max-width: 56ch;
}

html.dark .site-hero.site-hero-painting .site-hero-title,
html.dark .site-hero.site-hero-painting .site-hero-body,
html.dark .site-hero.site-hero-painting .site-hero-kicker {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.site-hero-kicker {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.75rem;
}

.site-hero-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 4vw, 2.85rem);
  line-height: 1.12;
  margin-bottom: 1rem;
  color: var(--ink);
}

.site-hero-body {
  max-width: 52ch;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.site-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.site-btn-primary {
  background: var(--accent);
  color: #fffaf8;
  border-color: rgba(0, 0, 0, 0.12);
}

.site-btn-primary:hover {
  filter: brightness(1.05);
}

.site-btn-ghost {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--border);
}

.site-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.site-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.site-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-sm);
}

.site-card h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.site-card p {
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

.site-inline-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.site-inline-link:hover {
  text-decoration: underline;
}

/* Landing coda — replaces the old site-grid-3 / site-two-col card boxes */
.site-landing-coda {
  margin: 3.5rem 0 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--surface-rule, rgba(60, 45, 30, 0.12));
}

.site-coda-line {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: clamp(1rem, 0.8vw + 0.85rem, 1.2rem);
  font-style: italic;
  color: var(--ink-soft, rgba(42, 31, 18, 0.62));
  line-height: 1.65;
  margin: 0 0 0.25rem;
}

.site-landing-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.25rem 0;
}

.site-landing-link {
  font-family: var(--font-ui, "Inter", system-ui, sans-serif);
  font-size: 0.87rem;
  color: var(--ink-soft, rgba(42, 31, 18, 0.55));
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}

.site-landing-link:hover {
  color: var(--accent, #c07a20);
}

.site-landing-link-sep {
  color: var(--ink-faint, rgba(42, 31, 18, 0.28));
  font-size: 0.9rem;
  user-select: none;
}

html.dark .site-landing-coda {
  border-top-color: rgba(245, 236, 223, 0.12);
}

.site-footnote {
  margin-top: 2rem;
  font-size: 0.82rem;
  color: var(--ink-faint, rgba(42, 31, 18, 0.4));
  max-width: 60ch;
}

.site-back {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.site-page-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.site-lede {
  color: var(--ink-2);
  margin-bottom: 2rem;
  line-height: 1.55;
}

.site-quote-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.site-quote {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-sm);
}

.site-quote p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}

.site-quote footer {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.site-post-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.site-post-list h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
}

.site-post-list p {
  color: var(--ink-2);
  line-height: 1.5;
}

.site-post-list a.site-post-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 1rem 1.15rem;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(139, 115, 85, 0.22));
  background: var(--panel, rgba(255, 252, 247, 0.92));
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.site-post-list a.site-post-card:hover {
  border-color: var(--gold, var(--ds-gold));
  box-shadow: 0 8px 28px rgba(24, 20, 16, 0.08);
  transform: translateY(-1px);
}

.site-post-list a.site-post-card h2,
.site-post-list a.site-post-card p {
  margin: 0;
}

.site-post-list a.site-post-card h2 {
  margin-bottom: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .site-post-list a.site-post-card:hover {
    transform: none;
  }
}

html.dark .site-body {
  background: radial-gradient(120% 80% at 50% 0%, var(--bg-2), var(--bg));
}

html.dark .site-card,
html.dark .site-quote {
  background: var(--panel);
}

.nav-locale-row {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.nav-locale-btn {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--ink);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.nav-locale-btn.is-active {
  border-color: var(--gold);
  background: var(--gold-pale);
  color: var(--ink);
}

/* =================================================================
   Adaptive module feed (journey plan)
   ================================================================= */
/* Journey ribbon — floats over the watercolor at the bottom so the painting
   stays the visual centerpiece. Inside #view-dashboard it's positioned
   absolutely over the painting; if the host is reused elsewhere it falls
   back to a normal centered card. */
.journey-feed-host {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  pointer-events: none;
}

.journey-feed-inner {
  pointer-events: auto;
}

.hint-cascade-host,
.story-hint-strip-host {
  margin: 0 0 0.35rem;
}

#view-dashboard .journey-feed-host {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 5;
  padding: 0 1.2rem;
  pointer-events: none;
}

.journey-feed-loading,
.journey-feed-empty {
  font-size: 0.88rem;
  color: rgba(46, 36, 26, 0.72);
  text-align: center;
  padding: 0.5rem 0.75rem;
}

.journey-feed-head {
  text-align: center;
  margin-bottom: 0.5rem;
}

.journey-feed-eyebrow {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(46, 36, 26, 0.55);
}

.journey-feed-title {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink, #2e241a);
}

.journey-feed-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.journey-feed-tile {
  flex: 1 1 120px;
  max-width: 160px;
  min-height: 4.5rem;
  border-radius: 16px;
  border: 1px solid rgba(140, 120, 80, 0.28);
  background: rgba(253, 250, 243, 0.94);
  box-shadow: 0 8px 22px rgba(80, 60, 20, 0.1);
  padding: 0.45rem 0.55rem 0.5rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink, #2e241a);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.journey-feed-tile:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(184, 146, 42, 0.45);
}

.journey-feed-tile.jft-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.journey-feed-tile.jft-current,
.journey-feed-tile.jft-available,
.journey-feed-tile.jft-in_progress {
  border-color: rgba(184, 146, 42, 0.55);
  box-shadow: 0 0 0 2px rgba(184, 146, 42, 0.2);
}

.journey-feed-tile.jft-in_progress {
  border-color: rgba(184, 146, 42, 0.85);
  box-shadow: 0 0 0 2px rgba(184, 146, 42, 0.3);
}

.journey-feed-tile.jft-complete {
  opacity: 0.75;
}

.jft-pos {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  color: rgba(46, 36, 26, 0.5);
}

.jft-stage {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(120, 92, 38, 0.85);
}

.jft-label {
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 600;
}

/* Make #view-dashboard the positioning context for the floating ribbon. */
#view-dashboard.view--path-root {
  position: relative;
}

.journey-card {
  background: rgba(253, 250, 243, 0.86);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid rgba(140, 120, 80, 0.22);
  border-radius: 18px;
  padding: 14px 20px;
  box-shadow:
    0 10px 28px rgba(80, 60, 20, 0.12),
    0 2px 8px rgba(80, 60, 20, 0.05);
  font-family: inherit;
  pointer-events: auto;
}

.journey-header {
  margin-bottom: 14px;
}

.journey-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(80, 60, 20, 0.6);
  margin-bottom: 4px;
}

.journey-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink, #2e241a);
  margin: 0 0 4px 0;
}

.journey-sub {
  font-size: 0.85rem;
  color: rgba(80, 60, 20, 0.7);
}

.journey-modules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 18px;
}

.journey-module-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(140, 120, 80, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.12s ease, border-color 0.12s ease;
}

.journey-module-row[role="button"] {
  cursor: pointer;
}

.journey-module-row[role="button"]:hover,
.journey-module-row[role="button"]:focus {
  background: rgba(255, 248, 220, 0.85);
  border-color: rgba(180, 140, 60, 0.45);
  outline: none;
}

.journey-module-row--current {
  border-color: rgba(180, 140, 60, 0.65);
  box-shadow: 0 0 0 2px rgba(180, 140, 60, 0.18);
  background: rgba(255, 248, 220, 0.7);
}

.journey-module-row--complete .journey-module-title {
  color: rgba(80, 60, 20, 0.55);
}

.journey-module-row--locked {
  opacity: 0.55;
}

.journey-module-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(140, 120, 80, 0.35);
}

.journey-module-row--current .journey-module-dot {
  background: var(--gold, #c49a3a);
  box-shadow: 0 0 0 3px rgba(196, 154, 58, 0.25);
}

.journey-module-row--complete .journey-module-dot {
  background: #7cb57b;
}

.journey-module-row--locked .journey-module-dot {
  background: rgba(120, 100, 80, 0.25);
}

.journey-module-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink, #2e241a);
  line-height: 1.25;
}

.journey-module-sub {
  font-size: 0.78rem;
  color: rgba(80, 60, 20, 0.6);
  margin-top: 2px;
}

.journey-module-chip {
  font-size: 0.72rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(140, 120, 80, 0.12);
  color: rgba(80, 60, 20, 0.7);
}

.journey-module-chip--complete {
  background: rgba(124, 181, 123, 0.18);
  color: #2f6a2e;
}

.journey-module-chip--available {
  background: rgba(196, 154, 58, 0.18);
  color: #8a6b1e;
}

.journey-module-chip--in_progress {
  background: rgba(120, 150, 200, 0.22);
  color: #2c4a7a;
}

.journey-module-chip--locked {
  background: rgba(140, 120, 80, 0.08);
  color: rgba(80, 60, 20, 0.45);
}

.journey-start-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.journey-start-btn {
  appearance: none;
  border: none;
  background: var(--gold, #c49a3a);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 10px 22px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: filter 0.12s ease;
}

.journey-start-btn:hover,
.journey-start-btn:focus {
  filter: brightness(1.05);
  outline: none;
}

.journey-start-hint {
  font-size: 0.82rem;
  color: rgba(80, 60, 20, 0.65);
}

/* ── Compact floating-ribbon variant ──────────────────────────────
   When the journey feed lives inside #view-dashboard it collapses into a
   horizontal pill: a dense dot-strip that mirrors the watercolor's seven
   path-nodes, a current-module label, and the Start button.
*/
#view-dashboard .journey-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 12px 18px;
}

#view-dashboard .journey-header {
  display: none;
}

#view-dashboard .journey-modules {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  align-items: center;
  min-height: 40px;
}

/* In the ribbon we only show the dot + a tiny title (the current module).
   Completed/locked rows collapse to just the dot to save horizontal space. */
#view-dashboard .journey-module-row {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(140, 120, 80, 0.16);
}

#view-dashboard .journey-module-row--complete,
#view-dashboard .journey-module-row--locked {
  padding: 4px;
  background: transparent;
  border-color: transparent;
}

#view-dashboard .journey-module-row--current {
  padding: 4px 12px 4px 8px;
  background: rgba(255, 248, 220, 0.85);
  border-color: rgba(180, 140, 60, 0.55);
  box-shadow: 0 0 0 2px rgba(180, 140, 60, 0.14);
}

/* Inside the ribbon: hide the stage sub-label, keep only the module title
   (and even that only for the current module). */
#view-dashboard .journey-module-sub {
  display: none;
}

#view-dashboard .journey-module-mid {
  display: none;
}

#view-dashboard .journey-module-row--current .journey-module-mid {
  display: block;
  font-size: 0.82rem;
  line-height: 1.2;
  color: rgba(50, 35, 15, 0.92);
  font-weight: 500;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-dashboard .journey-module-chip {
  display: none;
}

/* Show "Ta på nytt" / "Se svar" as inline ghost buttons on completed rows
   once the user hovers the dot. Compact ribbon hides them by default. */
#view-dashboard .journey-module-actions {
  display: none;
}

#view-dashboard .journey-module-row--complete:hover .journey-module-actions,
#view-dashboard .journey-module-row--complete:focus-within .journey-module-actions {
  display: flex;
}

#view-dashboard .journey-start-wrap {
  margin-top: 0;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

#view-dashboard .journey-start-btn {
  padding: 10px 22px;
  font-size: 0.9rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(196, 154, 58, 0.35);
}

#view-dashboard .journey-start-hint {
  display: none;
}

/* Gate card inside the ribbon: compact, accents preserved. */
#view-dashboard .journey-gate-card {
  padding: 10px 16px;
  margin: 0;
}

#view-dashboard .journey-gate-body,
#view-dashboard .journey-gate-eyebrow {
  display: none;
}

#view-dashboard .journey-gate-title {
  font-size: 0.98rem;
  margin: 0;
}

#view-dashboard .journey-gate-actions {
  margin-top: 6px;
}

@media (max-width: 720px) {
  #view-dashboard .journey-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #view-dashboard .journey-modules {
    justify-content: center;
  }
}

.journey-gate-note {
  font-size: 0.9rem;
  color: rgba(80, 60, 20, 0.7);
  background: rgba(196, 154, 58, 0.08);
  border: 1px dashed rgba(196, 154, 58, 0.4);
  padding: 10px 14px;
  border-radius: 10px;
}

.journey-empty {
  font-size: 0.9rem;
  color: rgba(80, 60, 20, 0.6);
  padding: 8px 0;
}

.journey-module-actions {
  display: flex;
  gap: 6px;
}

.journey-module-action-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(80, 60, 20, 0.8);
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.journey-module-action-btn--primary {
  background: rgba(196, 154, 58, 0.15);
  border-color: rgba(196, 154, 58, 0.35);
  color: #8a6b1e;
}

.journey-module-action-btn--primary:hover,
.journey-module-action-btn--primary:focus {
  background: rgba(196, 154, 58, 0.25);
  outline: none;
}

.journey-module-action-btn--ghost {
  border-color: rgba(140, 120, 80, 0.2);
  color: rgba(80, 60, 20, 0.6);
}

.journey-module-action-btn--ghost:hover,
.journey-module-action-btn--ghost:focus {
  background: rgba(140, 120, 80, 0.08);
  color: rgba(80, 60, 20, 0.85);
  outline: none;
}

.journey-gate-card {
  margin-top: 16px;
  padding: 18px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(196, 154, 58, 0.18), rgba(210, 180, 100, 0.08));
  border: 1px solid rgba(196, 154, 58, 0.35);
  display: grid;
  gap: 8px;
}

.journey-gate-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a6b1e;
  font-weight: 600;
}

.journey-gate-title {
  margin: 0;
  font-size: 1.25rem;
  color: rgba(60, 40, 10, 0.95);
}

.journey-gate-body {
  margin: 0;
  color: rgba(80, 60, 20, 0.8);
  font-size: 0.95rem;
}

.journey-gate-topics {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: rgba(80, 60, 20, 0.65);
}

.journey-gate-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.journey-gate-actions .journey-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Reset-path ghost button inside the ribbon — kept visually quiet so it
   doesn't compete with the primary Start button. */
.journey-reset-btn {
  appearance: none;
  border: 1px dashed rgba(140, 80, 60, 0.4);
  background: transparent;
  color: rgba(140, 60, 40, 0.7);
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.journey-reset-btn:hover,
.journey-reset-btn:focus {
  background: rgba(180, 80, 60, 0.08);
  color: #a33a1e;
  border-color: rgba(180, 80, 60, 0.6);
  outline: none;
}

/* Journey + mystery badge: dark mode (avoid hardcoded paper tones) */
html.dark .journey-gate-card {
  background: linear-gradient(135deg, rgba(212, 168, 74, 0.14), rgba(40, 38, 34, 0.92));
  border-color: rgba(212, 168, 74, 0.28);
}
html.dark .journey-gate-eyebrow {
  color: #d4a84a;
}
html.dark .journey-gate-title {
  color: var(--ink, #eae8e4);
}
html.dark .journey-gate-body,
html.dark .journey-gate-topics {
  color: var(--ink-2, rgba(230, 226, 218, 0.78));
}
html.dark .journey-gate-note {
  color: var(--ink-2, rgba(220, 216, 208, 0.85));
  background: rgba(212, 168, 74, 0.1);
  border-color: rgba(212, 168, 74, 0.35);
}
html.dark .journey-empty {
  color: var(--ink-3, rgba(200, 196, 188, 0.7));
}
html.dark .journey-module-action-btn {
  color: var(--ink-2, rgba(220, 216, 208, 0.85));
}
html.dark .journey-module-action-btn--primary {
  background: rgba(212, 168, 74, 0.18);
  border-color: rgba(212, 168, 74, 0.4);
  color: #e8c878;
}
html.dark .journey-module-action-btn--primary:hover,
html.dark .journey-module-action-btn--primary:focus {
  background: rgba(212, 168, 74, 0.28);
}
html.dark .journey-module-action-btn--ghost {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink-3, rgba(200, 196, 188, 0.75));
}
html.dark .journey-module-action-btn--ghost:hover,
html.dark .journey-module-action-btn--ghost:focus {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink, #f0ebe3);
}
html.dark .journey-reset-btn {
  border-color: rgba(232, 140, 100, 0.35);
  color: rgba(240, 180, 150, 0.85);
}
html.dark .journey-reset-btn:hover,
html.dark .journey-reset-btn:focus {
  background: rgba(232, 120, 80, 0.12);
  color: #f5c4a8;
  border-color: rgba(232, 140, 100, 0.55);
}
html.dark #view-dashboard .journey-module-row {
  background: rgba(40, 38, 36, 0.75);
  border-color: rgba(255, 255, 255, 0.1);
}
html.dark #view-dashboard .journey-module-row--current {
  background: rgba(212, 168, 74, 0.16);
  border-color: rgba(212, 168, 74, 0.45);
  box-shadow: 0 0 0 2px rgba(212, 168, 74, 0.12);
}
html.dark #view-dashboard .journey-module-row--current .journey-module-mid {
  color: var(--ink, #eae8e4);
}
html.dark .wcp-emblem-node.wcp-node-mystery.wcp-locked::after {
  background: rgba(36, 34, 32, 0.94);
  color: #e8c878;
  border-color: rgba(212, 168, 74, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ── Journey: controls-only ribbon (modules live on watercolor nodes) ─ */
.journey-card--controls-only {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.journey-card--controls-only .journey-start-wrap {
  margin-top: 0;
  flex-wrap: wrap;
  justify-content: center;
}

/* Stronger route contrast when adaptive modules drive the path */
.wcp-scene-journey-modules {
  --wcp-path-body: #6a4818;
  --wcp-path-shadow: rgba(40, 28, 12, 0.42);
  --wcp-path-dash: #ddb252;
  --wcp-node-ring: #a87820;
  --wcp-node-glow: rgba(168, 120, 32, 0.40);
}

html.dark .wcp-scene-journey-modules {
  --wcp-path-body: #d4b888;
  --wcp-path-shadow: rgba(0, 0, 0, 0.55);
  --wcp-path-dash: #e8c468;
  --wcp-node-ring: #d4b276;
  --wcp-node-glow: rgba(212, 178, 118, 0.30);
}

/* Seam under the painting: match page chrome to paper tones (light) / panel (dark). */
body[data-active-view="dashboard"] {
  background: linear-gradient(180deg, #faf6ef 0%, #e8dfd0 100%);
}

html.dark body[data-active-view="dashboard"] {
  background: linear-gradient(180deg, var(--bg, #121214) 0%, #1a1a1e 100%);
}

/* --- Learner profile v2 (additive) --- */
.profile-learner-v2 {
  margin-top: 0.5rem;
}
.profile-learner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}
.profile-learner-span2 {
  grid-column: 1 / -1;
}
.profile-learner-sub {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2, #444);
}
.profile-learner-muted {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-3, #666);
}
.profile-mastered-list,
.profile-ach-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
}
.profile-nearest-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.profile-nearest-bar-label {
  font-size: 0.76rem;
  font-weight: 600;
}
.profile-nearest-bar {
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.profile-nearest-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6cb28a, #3d8b6a);
  transition: width 0.35s ease;
}
.profile-heat-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.profile-heat-cell {
  --h: 80;
  min-width: 2rem;
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  background: hsl(var(--h, 100), 55%, 82%);
  color: hsl(var(--h, 100), 40%, 22%);
}

.profile-axis-legend {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ink-3, #666);
}
.profile-axis-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.profile-axis-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.45rem;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
html.dark .profile-axis-row {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.profile-axis-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.74rem;
}
.profile-axis-id code {
  font-size: 0.7rem;
  word-break: break-all;
}
.profile-state-pill {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: rgba(90, 130, 110, 0.2);
  color: var(--ink-2, #444);
}
.profile-axis-dots {
  display: inline-flex;
  gap: 0.2rem;
  flex-shrink: 0;
}
.profile-axis-knob {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--ink-3, #666);
  background: rgba(255, 255, 255, 0.45);
  opacity: 0.55;
}
.profile-axis-knob.is-on {
  opacity: 1;
  border-color: rgba(60, 120, 90, 0.45);
  background: rgba(90, 140, 110, 0.25);
  color: var(--ink, #222);
}
html.dark .profile-axis-knob {
  background: rgba(0, 0, 0, 0.25);
}

/* Home dashboard: compact axis strip (§10 explainer) */
.home-axis-row {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  grid-column: 1 / -1;
}
html.dark .home-axis-row {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.home-axis-h {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-2, #333);
}
.home-axis-legend {
  margin: 0 0 0.45rem;
  font-size: 0.65rem;
  line-height: 1.3;
  color: var(--ink-3, #666);
}
.home-axis-explainer {
  margin: 0.45rem 0 0;
  font-size: 0.64rem;
  line-height: 1.35;
  color: var(--ink-2, #333);
}
.home-axis-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.home-axis-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  font-size: 0.65rem;
  padding: 0.2rem 0.35rem;
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
html.dark .home-axis-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
}
.home-axis-skill-id {
  flex: 1 1 40%;
  min-width: 0;
  display: block;
  word-break: break-all;
  font-size: 0.62rem;
}
.home-axis-pill {
  font-size: 0.55rem;
}
.home-axis-dots {
  display: inline-flex;
  gap: 0.12rem;
  margin-left: auto;
  flex-shrink: 0;
}
.home-axis-knob {
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.55rem;
}

/* Story chat: rich speech feedback */
.chat-speech-feedback-wrap {
  margin: 0.35rem 0 0.6rem;
}
.speech-feedback-card {
  border-radius: 0.65rem;
  padding: 0.55rem 0.65rem;
  background: var(--land-paper-card, #fffbf4);
  border: 1px solid var(--land-rule, rgba(201, 184, 154, 0.55));
  font-size: 0.78rem;
}
.dark .speech-feedback-card {
  background: rgba(30, 30, 34, 0.72);
  border-color: rgba(255, 255, 255, 0.08);
}

.chat-speech-feedback-wrap .speech-feedback-listen-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.chat-speech-feedback-wrap .speech-feedback-listen-btn {
  font: inherit;
  font-size: 0.76rem;
  padding: 0.32rem 0.65rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 252, 247, 0.9);
  cursor: pointer;
}

.dark .chat-speech-feedback-wrap .speech-feedback-listen-btn {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(40, 38, 34, 0.85);
  color: inherit;
}

.chat-speech-feedback-wrap .speech-feedback-shadow-details {
  flex: 1 1 100%;
  margin-top: 0.35rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 0.35rem;
  font-size: 0.78rem;
}
.dark .chat-speech-feedback-wrap .speech-feedback-shadow-details {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.chat-speech-feedback-wrap .speech-feedback-shadow-summary {
  cursor: pointer;
  color: rgba(60, 52, 42, 0.72);
  list-style-position: outside;
}
.dark .chat-speech-feedback-wrap .speech-feedback-shadow-summary {
  color: rgba(220, 216, 206, 0.78);
}

.chat-speech-feedback-wrap .speech-feedback-playback-details {
  margin-top: 0.5rem;
  font-size: 0.76rem;
  border-radius: 0.45rem;
  padding: 0.2rem 0.45rem 0.45rem;
  background: rgba(255, 255, 255, 0.35);
  border: 1px dashed rgba(0, 0, 0, 0.1);
}
.dark .chat-speech-feedback-wrap .speech-feedback-playback-details {
  background: rgba(24, 24, 28, 0.45);
  border-color: rgba(255, 255, 255, 0.1);
}
.chat-speech-feedback-wrap .speech-feedback-playback-summary {
  cursor: pointer;
  color: rgba(60, 52, 42, 0.65);
  font-weight: 600;
}
.dark .chat-speech-feedback-wrap .speech-feedback-playback-summary {
  color: rgba(200, 196, 186, 0.75);
}
.speech-feedback-card--take-summary .speech-take-line {
  margin: 0.25rem 0;
  line-height: 1.45;
}
.speech-feedback-card--take-summary .speech-take-line .lbl {
  font-weight: 600;
  margin-right: 0.35rem;
  color: rgba(60, 52, 42, 0.75);
}
.dark .speech-feedback-card--take-summary .speech-take-line .lbl {
  color: rgba(210, 206, 196, 0.8);
}
.speech-feedback-card--take-summary .speech-take-recs {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

/* ── In-story chat form layout ────────────────────────────────── */
/* The composer wraps so speech-status + landing-hint sit below the row;
   the textarea is the primary surface — full-width on its own line, the
   buttons sit on the next row. Previously the textarea was a narrow flex
   item next to the buttons (min-width: 0 → easy to miss). LM-6: keep the
   flex-basis:100%; order:10 on status/hint so they stay below the buttons. */
#module-story-form.chat-form {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* D2 (2026-05-27): hint cascade docks in the right rail aside on wide
 * viewports. The inline collapsible (`#module-story-hint-panel` + its
 * toggle) stays put on narrow screens; on ≥1024 px the aside mirror takes
 * over and the inline path is hidden — so hints are always visible without
 * being parked under the input form. */
.story-hint-aside-host {
  margin-top: 1rem;
  display: none;
}
@media (min-width: 1024px) {
  .story-hint-aside-host { display: block; }
  /* Hide the inline hint cluster on the chat side so we don't render twice. */
  .module-story-hint-control { display: none !important; }
}

/* 2026-06-01: ONE laballed help panel in the story right-rail. Replaces the
 * stack of unlabelled aside boxes (reveal-host + hint mirror) + the removed
 * scaffolding notes that read as "too many boxes, unclear what they are". The
 * line bubbles stay; hints + the per-line reveal fallback live here under a
 * single clear "Hjelp" heading that appears ONLY when there's content (so the
 * panel never shows as an empty labelled box). */
.story-help { display: flex; flex-direction: column; gap: 0.55rem; }
.story-help .story-hint-aside-host { margin-top: 0; }
.story-help__label {
  margin: 0;
  font-family: var(--lab-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lab-gold-deep, #8a640f);
  display: none;
}
@media (min-width: 1024px) {
  .story-help:has(.story-hint-aside-host:not(:empty)) .story-help__label { display: block; }
}
.story-help:has(.story-reveal-host:not([hidden])) .story-help__label { display: block; }
/* #view-chat's help panel always shows its heading — its body (the "tap a word
 * for grammar help" line, then the grammar drawer) is always meaningful. */
#chat-story-help .story-help__label { display: block; }
#chat-story-help { margin-top: 0.4rem; }

/* D4 (2026-05-27): speaker NAME is the play affordance now. Hide the
 * separate "▶ Lytt" button under each line — tapping the role label plays
 * the line audio. */
.ms-line .role--speaker-play {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  border-radius: 2px;
  transition: color 160ms ease, background-color 160ms ease;
}
.ms-line .role--speaker-play:hover,
.ms-line .role--speaker-play:focus-visible {
  color: var(--lab-rust, #c8633a);
  background-color: rgba(217, 119, 87, 0.10);
  outline: none;
}
.ms-line .role--speaker-play.is-speaking {
  color: var(--lab-rust, #c8633a);
  background-color: rgba(217, 119, 87, 0.18);
}
/* Suppress the per-line play+toggle row — speaker-name is the play; the
 * "vis norsk" toggle moves into the aside hint host (D2 + D3). */
.msg-audio-actions .play-audio-btn { display: none !important; }

/* D5 (2026-05-27): on wide viewports the input form sticks to the bottom of
 * the chat scroll area so it tracks the most-recent line instead of being
 * parked at the page bottom. Narrow viewports keep the existing footer
 * position so the keyboard doesn't fight for space. */
@media (min-width: 1024px) {
  .landing-ms-panel.module-story-ms-panel { position: sticky; bottom: 0; z-index: 4; }
  .landing-ms-panel.module-story-ms-panel .ms-input {
    /* no backdrop-filter on the sticky composer: blur under the caret re-ran
     * on every keystroke (typing jank); the gradient is near-opaque anyway. */
    background: linear-gradient(180deg, rgba(255, 251, 244, 0.78) 0%, rgba(255, 251, 244, 0.97) 14%, rgba(255, 251, 244, 1) 100%);
    padding-top: 0.85rem;
  }
}
#module-story-form .speech-status,
#module-story-form .landing-story-send-hint {
  flex-basis: 100%;
  order: 10;
  margin-top: 0.15rem;
}
#module-story-form textarea {
  flex: 1 1 100%;
  min-width: 100%;
  min-height: 88px;
  padding: 0.85rem 1rem;
  font-size: 1.02rem;
  line-height: 1.5;
  order: 1;
}
#module-story-form .mic-cta,
#module-story-form #module-story-send {
  flex-shrink: 0;
  align-self: center;
  order: 2;
}

/* ── Bot message fade-in ───────────────────────────────────────────────────── */
/* New system/bot messages slide-fade in instead of snapping. Matches the
   handwritten/parchment aesthetic of the rest of the chat. Honours
   prefers-reduced-motion. */
@keyframes sprakapp-msg-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg.bot,
#module-story-chat-log .msg.bot {
  animation: sprakapp-msg-enter 0.28s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .msg.bot,
  #module-story-chat-log .msg.bot { animation: none; }
}

/* ── Story feedback card ───────────────────────────────────────────────────── */
/* Gentle tutor note that slides up from the bottom after a story advance.      */
.story-feedback-card {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: min(480px, calc(100vw - 2rem));
  background: var(--wcp-paper, #fffbf4);
  border: 1px solid var(--wcp-rule, #e8dfd2);
  border-radius: var(--radius-1, 8px) var(--radius-1, 8px) 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
  padding: 1rem 1.25rem 0.75rem;
  z-index: 420;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.story-feedback-card--visible {
  transform: translateX(-50%) translateY(0);
}
.story-feedback-card--good .story-feedback-card__primary {
  color: var(--ok, #1d6b3a);
}
.story-feedback-card--notes .story-feedback-card__primary {
  color: var(--wcp-ink, #2a201a);
}
.story-feedback-card__primary {
  font-size: 0.93rem;
  line-height: 1.5;
  margin: 0 0 0.5rem;
}
.story-feedback-card__notes {
  margin: 0 0 0.5rem 1.1rem;
  padding: 0;
  font-size: 0.88rem;
  color: var(--wcp-ink-mid, #7a6a5a);
  line-height: 1.5;
}
.story-feedback-card__notes li {
  margin-bottom: 0.2rem;
}
.story-feedback-card__dismiss {
  display: block;
  margin: 0 auto;
  padding: 0.3rem 1.5rem;
  font-size: 0.85rem;
  background: transparent;
  border: 1px solid var(--wcp-rule, #e8dfd2);
  border-radius: var(--radius-pill, 999px);
  color: var(--wcp-ink-faint, #b0a090);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.story-feedback-card__dismiss:hover {
  color: var(--wcp-ink-mid, #7a6a5a);
  border-color: var(--wcp-ink-faint, #b0a090);
}

/* 2026-05-30: LLM smart-feedback inside the story feedback card (what_differed/why_correct/l1_trap). */
.story-fb-expl-region { margin-top: 0.5rem; }
.story-fb-explain__sum {
  cursor: pointer;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lab-rust, #d97757);
  padding: 0.2rem 0;
  user-select: none;
}
.story-fb-explain__sum::-webkit-details-marker { display: none; }
.story-fb-explain__sum::before { content: "▸ "; }
.story-fb-explain[open] .story-fb-explain__sum::before { content: "▾ "; }
.story-fb-block {
  margin-top: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(26, 23, 20, 0.86);
  padding-left: 0.7rem;
  border-left: 2px solid rgba(217, 119, 87, 0.35);
}

/* ── P1 story Kontrast feedback (Du skrev / Naturlig / Regelen / Brukes når) ── */
.story-feedback-card--subtle {
  background: rgba(90, 125, 78, 0.08);
  border: 1px solid rgba(90, 125, 78, 0.25);
}
.story-feedback-card--subtle .story-feedback-card__primary { color: #4d7a4a; font-size: 0.92rem; }
.story-fb-k-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 0.5rem;
  background: rgba(184, 146, 42, 0.28); border-radius: 9px; overflow: hidden;
}
.story-fb-k-col { background: #fdf8ef; padding: 0.45rem 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; }
.story-fb-k-col.story-fb-k-you { background: rgba(154, 92, 63, 0.08); }
.story-fb-k-col.story-fb-k-you { color: #9a5c3f; }
.story-fb-k-h {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.58rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(26, 23, 20, 0.5);
}
.story-fb-k-rule {
  margin-top: 0.5rem; padding: 0.5rem 0.65rem; border-radius: 9px;
  background: rgba(184, 146, 42, 0.12); border-left: 3px solid rgba(184, 146, 42, 0.8);
  font-size: 0.9rem; line-height: 1.45; display: flex; flex-direction: column; gap: 0.2rem;
}
.story-fb-k-usage { margin-top: 0.4rem; font-size: 0.82rem; font-style: italic; color: rgba(26, 23, 20, 0.62); }
html.dark .story-fb-k-col { background: rgba(40, 32, 24, 0.6); color: rgba(245, 236, 223, 0.92); }
html.dark .story-fb-k-col.story-fb-k-you { background: rgba(154, 92, 63, 0.2); }
html.dark .story-fb-k-rule { background: rgba(184, 146, 42, 0.16); color: rgba(245, 236, 223, 0.92); }

/* tutor_full (2026-07-02): per-difference verdicts + verb-form note (story card) */
.story-fb-diff {
  margin-top: 0.45rem; padding: 0.45rem 0.6rem; border-radius: 9px;
  font-size: 0.86rem; line-height: 1.45;
  border-left: 3px solid #c84b2a; background: rgba(200, 75, 42, 0.07);
}
.story-fb-diff--equivalent { border-left-color: #2a7a3a; background: rgba(42, 122, 58, 0.07); }
.story-fb-diff--context { border-left-color: #b8893b; background: rgba(184, 137, 59, 0.09); }
.story-fb-diff-v {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.55rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin-left: 0.3rem; color: #c84b2a;
}
.story-fb-diff--equivalent .story-fb-diff-v { color: #2a7a3a; }
.story-fb-diff--context .story-fb-diff-v { color: #b8893b; }
.story-fb-diff-why { margin-top: 0.12rem; }
.story-fb-diff-when { margin-top: 0.12rem; font-size: 0.78rem; color: rgba(26, 23, 20, 0.62); }
.story-fb-verb {
  margin-top: 0.5rem; padding: 0.5rem 0.65rem; border-radius: 9px;
  font-size: 0.86rem; line-height: 1.5;
  background: rgba(42, 122, 58, 0.07); border: 1px solid rgba(42, 122, 58, 0.25);
  display: flex; flex-direction: column; gap: 0.18rem;
}
.story-fb-verb .story-fb-k-h { color: #2a7a3a; }
html.dark .story-fb-diff, html.dark .story-fb-verb { color: rgba(245, 236, 223, 0.92); }
html.dark .story-fb-diff { background: rgba(200, 75, 42, 0.12); }
html.dark .story-fb-diff--equivalent { background: rgba(94, 200, 122, 0.1); }
html.dark .story-fb-diff--context { background: rgba(184, 137, 59, 0.12); }
html.dark .story-fb-verb { background: rgba(94, 200, 122, 0.08); border-color: rgba(94, 200, 122, 0.3); }
html.dark .story-fb-verb .story-fb-k-h { color: #5ec87a; }
html.dark .story-fb-diff-when { color: rgba(245, 236, 223, 0.6); }
.story-fb-personal {
  margin-top: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 9px;
  font-size: 0.84rem; line-height: 1.45;
  background: rgba(154, 92, 63, 0.09); border-left: 3px solid #9a5c3f;
}
.story-fb-personal .story-fb-k-h { color: #9a5c3f; }
.story-fb-personal-ref { font-size: 0.76rem; font-style: italic; color: rgba(26, 23, 20, 0.6); }
html.dark .story-fb-personal { background: rgba(154, 92, 63, 0.16); color: rgba(245, 236, 223, 0.92); }
html.dark .story-fb-personal-ref { color: rgba(245, 236, 223, 0.6); }

/* «Capito?» comprehension check (2026-07-03) */
.story-compr-card {
  position: relative; margin: 0.6rem auto; max-width: 34rem;
  background: rgba(255, 252, 246, 0.95); border: 1px solid rgba(201, 184, 154, 0.55);
  border-left: 3px solid #b8893b; border-radius: 12px; padding: 0.75rem 0.95rem;
  font-family: "Inter", sans-serif; color: #1a1714;
  box-shadow: 0 10px 26px rgba(20, 14, 7, 0.12);
}
.story-compr-head {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.58rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(26, 23, 20, 0.55);
  margin-bottom: 0.3rem;
}
.story-compr-q { font-size: 0.95rem; line-height: 1.45; margin-bottom: 0.55rem; }
.story-compr-opts { display: flex; flex-direction: column; gap: 0.35rem; }
.story-compr-opt {
  text-align: left; font: inherit; font-size: 0.9rem; cursor: pointer;
  padding: 0.45rem 0.65rem; border-radius: 9px;
  border: 1px solid rgba(201, 184, 154, 0.6); background: rgba(255, 255, 255, 0.75);
  color: #1a1714;
}
.story-compr-opt:hover { border-color: #b8893b; }
.story-compr-opt.is-right { border-color: #2a7a3a; background: rgba(42, 122, 58, 0.1); }
.story-compr-opt.is-wrong { border-color: #c84b2a; background: rgba(200, 75, 42, 0.1); }
.story-compr-res { margin-top: 0.45rem; font-size: 0.85rem; color: #9a5c3f; }
.story-compr-res.ok { color: #2a7a3a; }
.story-compr-skip {
  position: absolute; top: 0.5rem; right: 0.6rem; font: inherit; font-size: 0.72rem;
  background: none; border: none; cursor: pointer; color: rgba(26, 23, 20, 0.45);
}
.story-compr-skip:hover { color: #9a5c3f; }
html.dark .story-compr-card { background: rgba(36, 28, 20, 0.96); color: #f3e8d4; border-color: rgba(201, 184, 154, 0.3); }
html.dark .story-compr-q { color: #f3e8d4; }
html.dark .story-compr-opt { background: rgba(40, 32, 24, 0.7); color: #f3e8d4; border-color: rgba(201, 184, 154, 0.35); }
html.dark .story-compr-head, html.dark .story-compr-skip { color: rgba(243, 232, 212, 0.55); }
.story-fb-block--l1 { border-left-color: rgba(184, 137, 59, 0.5); }
.story-fb-k {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lab-rust, #d97757);
  margin-right: 0.35rem;
}
.story-fb-block--l1 .story-fb-k { color: #b8893b; }
.story-fb-loading {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(60, 45, 30, 0.55);
}
html.dark .story-fb-block { color: rgba(245, 236, 223, 0.9); }

/* ── Parla con — live character conversation entry point ── */
.wcp-parla-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 7px 16px;
  background: transparent;
  border: 1px solid rgba(185, 118, 62, 0.55);
  border-radius: 20px;
  color: #b9763e;
  cursor: pointer;
  font-family: Georgia, serif;
  font-size: .78rem;
  font-style: italic;
  letter-spacing: .03em;
  transition: border-color .15s, background .15s;
}
.wcp-parla-btn:hover {
  background: rgba(185, 118, 62, 0.08);
  border-color: rgba(185, 118, 62, 0.9);
}

/* ── LA REGIA (2026-07-15): paced line-by-line reveal + pacing toggle ─────
 * Owner: stories need breathing room — a multi-segment scene enters one line
 * at a time (regia run in story-regia.js). Hidden rows keep layout out of the
 * flow; entering rows rise gently. Hints live in ONE place: the strip host
 * directly above the composer (L1, always visible for scripted stories). */

/* !important: this visibility toggle must beat the container display rules
 * (`#module-overlay .ms-canvas .ms-line { display:grid }`, specificity 1,1,1,
 * and `.site-landing-dl-host .ms-line`) in every surface the story renders in. */
.ms-line.regia-hidden { display: none !important; }
.ms-line.regia-in { animation: regia-enter 0.5s ease-out both; }
@keyframes regia-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ms-line.regia-in { animation: none; }
}

.regia-controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.55rem 0 0.2rem 3.2rem; /* aligns under the text column, past the role rail */
}
.regia-next-btn {
  padding: 0.34rem 1.05rem;
  border-radius: 20px;
  border: 1px solid rgba(184, 137, 59, 0.6);
  background: linear-gradient(180deg, #fffbf4 0%, rgba(255, 244, 226, 0.95) 100%);
  color: #7a5511;
  font-family: Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.regia-next-btn:hover {
  border-color: rgba(184, 137, 59, 0.95);
  background: rgba(255, 240, 214, 0.95);
}
.regia-all-btn {
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(60, 45, 30, 0.5);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.regia-all-btn:hover { color: rgba(60, 45, 30, 0.8); border-color: rgba(60, 45, 30, 0.25); }
html.dark .regia-all-btn { color: rgba(245, 236, 223, 0.55); }
html.dark .regia-all-btn:hover { color: rgba(245, 236, 223, 0.85); border-color: rgba(245, 236, 223, 0.3); }

/* Pacing toggle (Corrente / Con calma) in the story header */
.story-pacing-host { margin-left: auto; }
.story-pacing-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid rgba(184, 137, 59, 0.4);
  border-radius: 20px;
  overflow: hidden;
}
.story-pacing-btn {
  padding: 0.26rem 0.8rem;
  border: 0;
  background: transparent;
  color: rgba(60, 45, 30, 0.6);
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.story-pacing-btn + .story-pacing-btn { border-left: 1px solid rgba(184, 137, 59, 0.3); }
.story-pacing-btn.is-on {
  background: rgba(184, 137, 59, 0.16);
  color: #7a5511;
}
html.dark .story-pacing-btn { color: rgba(245, 236, 223, 0.6); }
html.dark .story-pacing-btn.is-on { background: rgba(184, 137, 59, 0.28); color: #f0d9a8; }
.module-story-scene .ms-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The one hint home: directly above the composer, full width of the field */
.module-story-hint-host { margin: 0 0 0.45rem; }
.module-story-hint-host:empty { display: none; }

/* ── Plan 8 S1: the belonging why-line and its receipt ─────────────────────
 * The line itself reuses .wcp-week-captain-why (the retired coverage why's
 * slot); this only marks it as tappable and styles the receipt it opens.
 * Colour is inherited throughout — the design ratchet (LM-15) forbids growing
 * this file's raw-hex count for a feature that needs no new colour.
 */
.wcp-week-belonging[role="button"] {
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
}
.wcp-week-belonging[role="button"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.wcp-week-belonging-receipt {
  display: block;
  max-width: min(74vw, 420px);
  margin: 0.35rem auto 0;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.62rem;
  line-height: 1.45;
  text-align: left;
  opacity: 0.72;
}

/* ── Plan 8 S2/S3: the visit's arrival and departure beats ─────────────────
 * A quiet diegetic line at each end of the visit — the room, in the world's
 * voice, before the mirror speaks. Deliberately understated: this is the world
 * half of creed 8, and if it competes with the path it has failed.
 *
 * No backdrop-filter (LM-11) and no new colour (LM-15): everything inherits.
 * When a Place has an arrival painting it sits BEHIND the line at low opacity
 * rather than as a hero image — the beat is a sentence, not a splash screen.
 */
.wcp-scene-beat {
  position: relative;
  max-width: min(78vw, 460px);
  margin: 0.9rem auto 0;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  background-size: cover;
  background-position: center;
  text-align: center;
}
.wcp-scene-beat::before {
  /* The wash that keeps an arrival painting from eating its own line. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: 0.22;
  pointer-events: none;
}
.wcp-scene-beat-line,
.wcp-scene-beat-recap {
  position: relative;
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 0.92rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-2);
}
.wcp-scene-beat-recap {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  opacity: 0.82;
}
.wcp-scene-beat--departure {
  margin-top: 1.2rem;
}

/* The scene beats live in normal flow at the top of #wcp-scene, which begins
 * UNDER the fixed top nav and the absolutely-positioned .wcp-week-meta. Driving
 * it put the first beat at y=13 — behind the nav, invisible. So the stack starts
 * below both. (The meta sits at top: clamp(78px,10vh,112px) and runs ~90px.) */
#wcp-scene .wcp-scene-beat {
  position: relative;
  z-index: 3;
}
/* `:first-of-type` matched the wrong div (the beats share the element type with
 * the scene's other children), so the offset went to the stack itself: every
 * beat clears the chrome, and the ones after the first pull back up. */
#wcp-scene .wcp-scene-beat {
  margin-top: clamp(184px, 25vh, 232px);
}
#wcp-scene .wcp-scene-beat ~ .wcp-scene-beat {
  margin-top: 0.9rem;
}