/* === The Method Atlas — Stylesheet === */

:root {
  --serif: "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: var(--serif); }
/* Body bg matches the editorial tone (the default on this site). The
   mandala-stage covers it anyway, but if any gap ever appears at the
   edges (e.g. behind the translucent chat), the user sees a soft
   off-white instead of pure black. */
body { background: #f5f4ef; color: #1a1a1a; }
.guide-app.tone-serif-dark { background: #02030a; color: #e8eeff; }
.guide-app.tone-serif-paper { background: #f7f1e3; color: #1a1208; }

#root, .guide-app {
  width: 100vw; height: 100vh; height: 100dvh;
  position: relative; overflow: hidden;
  /* Layout reserves a right gutter for the chat rail when it is open. */
  --chat-gutter: 0px;
}
.guide-app.chat-on { --chat-gutter: 400px; }
@media (max-width: 1100px) { .guide-app.chat-on { --chat-gutter: 340px; } }
@media (max-width: 820px)  { .guide-app.chat-on { --chat-gutter: 0px; } }

/* ==== Mandala stage ==== */
/* The mandala fills the FULL viewport regardless of chat state, so the
   translucent chat panel sits on top of the disc itself (not on top of
   the body's dark background, which would look like a black plate). */
.mandala-stage {
  position: absolute; inset: 0;
  perspective: 2800px;
  perspective-origin: 50% 50%;
  background: var(--mandala-bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* Reserve space at the top for the floating brand and at the bottom
     for the dialog bar so the disc never bleeds under either of them.
     Combined with align-items:center, the disc auto-centres in the
     remaining vertical space. */
  padding: 110px 0 240px;
}
@media (max-width: 820px)  { .mandala-stage { padding: 80px 0 200px; } }
@media (max-width: 560px)  { .mandala-stage { padding: 60px 0 200px; } }
/* Belt and braces: the overlay header must have no opaque background of
   its own, so the disc shows through behind the title. */
.overlay-top, .overlay-mid { background: transparent !important; }
.mandala-plane {
  /* Disc size: capped so the disc's TOP rim stays clearly below the brand
     header and its BOTTOM rim stays above the dialog bar. The mandala-
     stage already reserves padding for both, so vmin can be a bit more
     generous than the bare viewport. */
  width: min(82vmin, 1000px) !important;
  height: min(82vmin, 1000px) !important;
}
/* (path layer no longer used — path is drawn inside the disc SVG so it
   sits exactly on the visible rings) */
.mandala-atmo { position: absolute; inset: 0; pointer-events: none; }
.mandala-stars {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent),
    radial-gradient(1px 1px at 70% 80%, #fff 50%, transparent),
    radial-gradient(1px 1px at 40% 60%, #fff 50%, transparent),
    radial-gradient(1px 1px at 90% 20%, #fff 50%, transparent),
    radial-gradient(1px 1px at 15% 85%, #fff 50%, transparent),
    radial-gradient(1px 1px at 60% 15%, #fff 50%, transparent),
    radial-gradient(2px 2px at 35% 45%, #cfe1ff 50%, transparent),
    radial-gradient(2px 2px at 80% 65%, #cfe1ff 50%, transparent);
  background-size: 100% 100%;
}
.tone-serif-paper .mandala-stars,
.tone-editorial .mandala-stars { display: none; }

.mandala-plane {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transition: transform 1.4s cubic-bezier(.22,.8,.22,1);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6));
}

/* ==== Overlay layout ==== */
.guide-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  pointer-events: none;
}
.guide-overlay > * { pointer-events: auto; }

.overlay-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 20px 32px; gap: 24px;
}
.overlay-top-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
/* "Applied case" header link — discreet, always visible top-right */
.applied-case-link {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; letter-spacing: 0.03em;
  color: #c0392b; text-decoration: none;
  padding: 4px 10px; border: 1px solid rgba(192, 57, 43, 0.35);
  border-radius: 999px; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.applied-case-link:hover {
  background: rgba(192, 57, 43, 0.08);
  border-color: rgba(192, 57, 43, 0.7);
}
.tone-editorial .applied-case-link { color: #b03327; }
.overlay-mid {
  flex: 1;
  display: flex; align-items: flex-start; padding: 0 36px;
}

/* ==== Brand ==== */
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  font-size: 28px;
  color: #cfe1ff;
  text-shadow: 0 0 20px rgba(207, 225, 255, 0.6);
}
.brand-text .brand-title {
  font-family: var(--serif);
  font-size: 19px; font-weight: 500; letter-spacing: 0.02em;
  color: #f1f4ff;
  white-space: nowrap;
}
.brand-em {
  font-style: italic;
  font-weight: 400;
  color: #c0392b;
}
.brand-sub {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: #9bb0d8; letter-spacing: 0.04em;
}

.tone-serif-paper .brand-mark { color: #3a2a18; text-shadow: none; }
.tone-serif-paper .brand-title { color: #1a1208; }
.tone-serif-paper .brand-sub { color: #5a4530; }
.tone-editorial .brand-mark { color: #1a2540; text-shadow: none; }
.tone-editorial .brand-title { color: #0e1530; }
.tone-editorial .brand-sub { color: #5e6680; }

/* ==== Mini map ==== */
/* No background or border — the wedges float over the big mandala disc so
   the circle never looks "cut off" by an opaque card at the top right. */
.mini-map {
  background: transparent;
  border: none;
  padding: 4px 0;
}
.mini-title {
  font-family: var(--serif); font-style: italic;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #9bb0d8; margin-bottom: 4px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.tone-serif-paper .mini-title { color: #5a4530; text-shadow: 0 1px 8px rgba(255, 250, 235, 0.7); }
.tone-editorial .mini-title { color: #1a2540; text-shadow: 0 1px 8px rgba(255, 255, 255, 0.85); }

/* ==== Breadcrumbs ==== */
.breadcrumbs {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: 60%;
}
.crumb {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(8, 12, 28, 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(155, 176, 216, 0.22);
  color: #cfe1ff; font-family: var(--serif);
  font-size: 13px; padding: 6px 12px; border-radius: 100px;
  cursor: pointer; transition: all 0.2s;
}
.crumb:hover { background: rgba(40, 60, 120, 0.6); border-color: rgba(155, 176, 216, 0.5); }
.crumb-q { font-style: italic; opacity: 0.7; }
.crumb-a { font-weight: 500; }

.tone-serif-paper .crumb { background: rgba(247, 241, 227, 0.8); color: #1a1208; border-color: rgba(58, 42, 24, 0.2); }
.tone-editorial .crumb { background: rgba(255,255,255,0.85); color: #0e1530; border-color: rgba(26, 37, 64, 0.15); }

/* ==== Dialog bar ==== */
/* Sits at the bottom of the viewport. Hard-cap at 70vh and allow internal
   scrolling as a safety net so options NEVER get cut off no matter how
   short the viewport (mobile landscape, tiny windows, etc.). */
.dialog-bar {
  width: calc(100% - var(--chat-gutter));
  max-height: 70vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(2, 4, 14, 0) 0%, rgba(2, 4, 14, 0.78) 40%, rgba(2, 4, 14, 0.92) 100%);
  padding: 22px 0 22px;
  backdrop-filter: blur(4px);
  transition: width 0.25s ease;
}
.dialog-rail {
  max-width: 1180px; margin: 0 auto; padding: 0 36px;
}
@media (max-width: 820px) {
  .dialog-bar { padding: 16px 0 16px; max-height: 75vh; }
  .dialog-rail { padding: 0 16px; }
}
@media (max-width: 560px) {
  .dialog-bar { padding: 12px 0 14px; max-height: 80vh; }
  .dialog-rail { padding: 0 12px; }
}
.dialog-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--serif); font-style: italic;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #9bb0d8; margin-bottom: 14px;
}
.meta-q { display: inline-flex; gap: 12px; align-items: baseline; }
.meta-sep { opacity: 0.5; }
.meta-ring { font-style: normal; font-weight: 500; letter-spacing: 0.12em; }
.meta-progress { font-family: var(--mono); letter-spacing: 0.1em; font-style: normal; }
.progress-num { color: #f1f4ff; font-size: 16px; }
.progress-slash { opacity: 0.4; margin: 0 4px; }
.progress-total { opacity: 0.7; }

.dialog-question {
  font-family: var(--serif);
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.15; font-weight: 400;
  color: #f1f4ff;
  margin-bottom: 4px;
  text-wrap: pretty;
}
.quote-mark { color: #4f7cff; font-size: 1.1em; opacity: 0.8; margin: 0 0.05em; }

.dialog-hint {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: #9bb0d8; margin-bottom: 12px;
}

.dialog-options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px; margin-top: 10px;
}
.opt-btn {
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(20, 30, 60, 0.5);
  border: 1px solid rgba(155, 176, 216, 0.25);
  border-radius: 4px;
  padding: 8px 10px;
  color: #e8eeff; text-align: left;
  font-family: var(--serif); font-size: 14px; line-height: 1.25;
  cursor: pointer; transition: all 0.2s ease;
}
.opt-btn:hover, .opt-btn.hover {
  background: rgba(60, 90, 200, 0.35);
  border-color: rgba(207, 225, 255, 0.6);
  transform: translateY(-1px);
}
.opt-btn.selected {
  background: rgba(60, 90, 200, 0.7);
  border-color: #cfe1ff;
  box-shadow: 0 0 24px rgba(207, 225, 255, 0.35);
}
.opt-marker {
  font-family: var(--mono); font-size: 11px;
  background: rgba(207, 225, 255, 0.15);
  color: #cfe1ff;
  border-radius: 2px;
  padding: 3px 6px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.opt-label { flex: 1; }

.dialog-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px;
}
.dialog-back, .dialog-note-toggle {
  background: none; border: none;
  font-family: var(--serif); font-style: italic;
  font-size: 13px; color: #9bb0d8;
  cursor: pointer; padding: 4px 0;
  transition: color 0.2s;
}
.dialog-back:hover, .dialog-note-toggle:hover { color: #cfe1ff; }
.dialog-back:disabled { opacity: 0.3; cursor: default; }

.dialog-note { margin-top: 10px; }
.dialog-note textarea {
  width: 100%;
  background: rgba(20, 30, 60, 0.4);
  border: 1px solid rgba(155, 176, 216, 0.25);
  border-radius: 4px;
  color: #e8eeff;
  font-family: var(--serif); font-size: 15px;
  padding: 10px 12px;
  resize: vertical;
}
.dialog-note textarea:focus {
  outline: none;
  border-color: rgba(207, 225, 255, 0.6);
  background: rgba(20, 30, 60, 0.7);
}

/* ==== Tone: paper ==== */
.tone-serif-paper.dialog-bar {
  background: linear-gradient(180deg, rgba(247, 241, 227, 0) 0%, rgba(247, 241, 227, 0.92) 30%, rgba(236, 227, 205, 0.98) 100%);
}
.tone-serif-paper .dialog-meta { color: #5a4530; }
.tone-serif-paper .progress-num { color: #1a1208; }
.tone-serif-paper .dialog-question { color: #1a1208; }
.tone-serif-paper .quote-mark { color: #c0392b; }
.tone-serif-paper .dialog-hint { color: #5a4530; }
.tone-serif-paper .opt-btn {
  background: rgba(255, 252, 240, 0.7);
  border-color: rgba(58, 42, 24, 0.25);
  color: #1a1208;
}
.tone-serif-paper .opt-btn:hover { background: rgba(220, 200, 160, 0.5); border-color: rgba(58, 42, 24, 0.5); }
.tone-serif-paper .opt-btn.selected { background: rgba(58, 42, 24, 0.15); border-color: #3a2a18; box-shadow: 0 0 24px rgba(58, 42, 24, 0.2); }
.tone-serif-paper .opt-marker { background: rgba(58, 42, 24, 0.12); color: #3a2a18; }
.tone-serif-paper .dialog-back, .tone-serif-paper .dialog-note-toggle { color: #5a4530; }
.tone-serif-paper .dialog-back:hover, .tone-serif-paper .dialog-note-toggle:hover { color: #1a1208; }
.tone-serif-paper .dialog-note textarea { background: rgba(255,252,240,0.7); border-color: rgba(58,42,24,0.25); color: #1a1208; }

/* ==== Tone: editorial ==== */
.tone-editorial.dialog-bar {
  background: linear-gradient(180deg, rgba(250, 250, 246, 0) 0%, rgba(250, 250, 246, 0.95) 30%, rgba(236, 235, 228, 0.98) 100%);
}
.tone-editorial .dialog-meta { color: #5e6680; }
.tone-editorial .progress-num { color: #0e1530; }
.tone-editorial .dialog-question { color: #0e1530; }
.tone-editorial .quote-mark { color: #c0392b; }
.tone-editorial .dialog-hint { color: #5e6680; }
.tone-editorial .opt-btn {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(26, 37, 64, 0.18);
  color: #0e1530;
}
.tone-editorial .opt-btn:hover { background: #fff; border-color: rgba(26, 37, 64, 0.45); }
.tone-editorial .opt-btn.selected { background: #1a2540; color: #fafaf6; border-color: #1a2540; }
.tone-editorial .opt-btn.selected .opt-marker { background: rgba(255,255,255,0.2); color: #fff; }
.tone-editorial .opt-marker { background: rgba(26, 37, 64, 0.1); color: #1a2540; }
.tone-editorial .dialog-back, .tone-editorial .dialog-note-toggle { color: #5e6680; }
.tone-editorial .dialog-back:hover, .tone-editorial .dialog-note-toggle:hover { color: #0e1530; }
.tone-editorial .dialog-note textarea { background: #fff; border-color: rgba(26,37,64,0.18); color: #0e1530; }

/* ==== Result screen ==== */
.result-screen {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, #0e1632 0%, #050813 60%, #02030a 100%);
  color: #e8eeff;
  overflow: auto;
  font-family: var(--serif);
}
.result-inner { max-width: 1100px; margin: 0 auto; padding: 80px 48px 120px; }

.result-eyebrow {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #9bb0d8; margin-bottom: 12px;
}
.result-title {
  font-size: 84px; font-weight: 400; line-height: 1; margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.result-title-em {
  background: linear-gradient(120deg, #cfe1ff 0%, #6a9eff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.result-sub {
  font-size: 22px; font-style: italic; color: #9bb0d8; margin-bottom: 48px;
  max-width: 720px;
}

.result-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.result-card {
  background: rgba(20, 30, 60, 0.4);
  border: 1px solid rgba(155, 176, 216, 0.18);
  border-radius: 6px;
  padding: 24px 28px;
}
.card-eyebrow {
  font-family: var(--serif); font-style: italic;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #9bb0d8; margin-bottom: 14px;
}
.tech-list, .assume-list, .refs-list {
  list-style: none; padding: 0; margin: 0;
}
.tech-list li, .assume-list li {
  font-size: 16px; line-height: 1.5;
  display: flex; gap: 10px; padding: 4px 0;
}
.refs-list li {
  font-size: 14px; line-height: 1.6; padding: 6px 0;
  border-top: 1px solid rgba(155, 176, 216, 0.15);
  font-style: italic; color: #cfe1ff;
}
.refs-list li:first-child { border-top: none; }
.bullet { color: #4f7cff; }

.comparison-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.compare-card {
  background: rgba(20, 30, 60, 0.4);
  border: 1px solid rgba(155, 176, 216, 0.18);
  border-radius: 6px;
  padding: 20px 24px;
}
.compare-card.rank-0 { border-color: rgba(207, 225, 255, 0.5); background: rgba(40, 60, 120, 0.4); }
.compare-rank {
  font-family: var(--mono); font-size: 11px; color: #9bb0d8; letter-spacing: 0.1em;
}
.compare-label { font-size: 22px; margin: 6px 0 12px; }
.compare-bar {
  height: 4px; background: rgba(155, 176, 216, 0.15); border-radius: 2px; overflow: hidden;
}
.compare-fill { height: 100%; transition: width 0.6s ease; }
.compare-score {
  font-family: var(--mono); font-size: 12px; color: #cfe1ff;
  letter-spacing: 0.05em; margin-top: 8px;
}
.compare-sub { font-style: italic; font-size: 13px; color: #9bb0d8; margin-top: 4px; }

.trail { display: flex; flex-direction: column; gap: 12px; }
.trail-item {
  border-left: 2px solid rgba(155, 176, 216, 0.3);
  padding: 4px 0 4px 16px;
}
.trail-q { font-size: 14px; color: #9bb0d8; font-style: italic; }
.trail-a { font-size: 17px; color: #f1f4ff; margin-top: 2px; }
.trail-note { font-size: 13px; color: #9bb0d8; margin-top: 4px; padding-left: 12px; border-left: 1px solid rgba(155, 176, 216, 0.2); }

.result-actions { margin-top: 60px; display: flex; gap: 16px; }
.btn-primary {
  background: #cfe1ff; color: #0a0e1f;
  border: none; border-radius: 4px;
  font-family: var(--serif); font-size: 16px;
  padding: 14px 28px; cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 0.2s;
}
.btn-primary:hover { background: #fff; transform: translateY(-1px); }

/* Result variants */
.result-screen.tone-serif-paper { background: radial-gradient(ellipse at 50% 30%, #f7f1e3 0%, #ece3cd 70%, #d9cdb0 100%); color: #1a1208; }
.tone-serif-paper .result-title-em { background: linear-gradient(120deg, #c0392b 0%, #3a2a18 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tone-serif-paper .result-eyebrow,
.tone-serif-paper .card-eyebrow,
.tone-serif-paper .result-sub,
.tone-serif-paper .compare-sub,
.tone-serif-paper .trail-q,
.tone-serif-paper .trail-note { color: #5a4530; }
.tone-serif-paper .result-card,
.tone-serif-paper .compare-card { background: rgba(255, 252, 240, 0.6); border-color: rgba(58, 42, 24, 0.2); }
.tone-serif-paper .compare-card.rank-0 { background: rgba(58, 42, 24, 0.08); border-color: rgba(58, 42, 24, 0.5); }
.tone-serif-paper .bullet { color: #c0392b; }
.tone-serif-paper .refs-list li { color: #3a2a18; border-top-color: rgba(58, 42, 24, 0.18); }
.tone-serif-paper .trail-item { border-left-color: rgba(58, 42, 24, 0.3); }
.tone-serif-paper .trail-a { color: #1a1208; }
.tone-serif-paper .btn-primary { background: #3a2a18; color: #f7f1e3; }
.tone-serif-paper .btn-primary:hover { background: #1a1208; }
.tone-serif-paper .compare-bar { background: rgba(58, 42, 24, 0.15); }
.tone-serif-paper .compare-score { color: #1a1208; }
.tone-serif-paper .compare-rank { color: #5a4530; }

.result-screen.tone-editorial { background: linear-gradient(180deg, #fafaf6 0%, #ecebe4 100%); color: #0e1530; }
.tone-editorial .result-title-em { background: linear-gradient(120deg, #1a2540 0%, #4f7cff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tone-editorial .result-eyebrow,
.tone-editorial .card-eyebrow,
.tone-editorial .result-sub,
.tone-editorial .compare-sub,
.tone-editorial .trail-q,
.tone-editorial .trail-note { color: #5e6680; }
.tone-editorial .result-card,
.tone-editorial .compare-card { background: #fff; border-color: rgba(26, 37, 64, 0.15); }
.tone-editorial .compare-card.rank-0 { background: #1a2540; color: #fafaf6; border-color: #1a2540; }
.tone-editorial .compare-card.rank-0 .card-eyebrow,
.tone-editorial .compare-card.rank-0 .compare-sub,
.tone-editorial .compare-card.rank-0 .compare-rank,
.tone-editorial .compare-card.rank-0 .compare-score { color: #cfe1ff; }
.tone-editorial .bullet { color: #c0392b; }
.tone-editorial .refs-list li { color: #1a2540; border-top-color: rgba(26, 37, 64, 0.15); }
.tone-editorial .trail-item { border-left-color: rgba(26, 37, 64, 0.25); }
.tone-editorial .trail-a { color: #0e1530; }
.tone-editorial .btn-primary { background: #1a2540; color: #fafaf6; }
.tone-editorial .btn-primary:hover { background: #0e1530; }
.tone-editorial .compare-bar { background: rgba(26, 37, 64, 0.12); }
.tone-editorial .compare-score { color: #0e1530; }
.tone-editorial .compare-rank { color: #5e6680; }

/* ==== Sector HUD — "You are here" ==== */
.sector-hud {
  position: absolute;
  left: 50%;
  top: 28%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 5;
  text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}
.sector-hud-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
}
.sector-hud-name {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  filter: drop-shadow(0 0 20px currentColor);
  opacity: 0.85;
}
.sector-hud-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  margin-top: 6px;
  letter-spacing: 0.05em;
}
.sector-hud-ring { color: rgba(255,255,255,0.5); }

.tone-serif-paper .sector-hud { text-shadow: 0 2px 12px rgba(255,250,235,0.5); }
.tone-serif-paper .sector-hud-eyebrow { color: rgba(58,42,24,0.55); }
.tone-serif-paper .sector-hud-sub { color: rgba(58,42,24,0.7); }
.tone-serif-paper .sector-hud-ring { color: rgba(58,42,24,0.5); }

.tone-editorial .sector-hud { text-shadow: 0 1px 12px rgba(255,255,255,0.9), 0 0 4px #fff; }
.tone-editorial .sector-hud-eyebrow { color: rgba(26,37,64,0.7); }
.tone-editorial .sector-hud-sub { color: rgba(26,37,64,0.85); }
.tone-editorial .sector-hud-ring { color: rgba(26,37,64,0.6); }

/* ==== Methods recipe block ==== */
.recipe-block {
  margin-top: 60px;
  padding-top: 48px;
  border-top: 1px solid rgba(155,176,216,0.18);
}
.recipe-title {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 14px;
  color: #f1f4ff;
  letter-spacing: -0.01em;
}
.recipe-lede {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: #cfe1ff;
  max-width: 720px;
  margin-bottom: 36px;
  font-style: italic;
}
.recipe-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: rgba(155,176,216,0.18);
  border: 1px solid rgba(155,176,216,0.18);
}
.recipe-list li {
  display: flex;
  gap: 24px;
  padding: 22px 26px;
  background: rgba(8,12,28,0.85);
}
.recipe-num {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #4f7cff;
  flex-shrink: 0;
  padding-top: 4px;
  width: 36px;
}
.recipe-step-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  color: #f1f4ff;
  margin-bottom: 6px;
  letter-spacing: 0.005em;
}
.recipe-step-text {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: #cfe1ff;
  text-wrap: pretty;
}
.recipe-footer {
  margin-top: 28px;
  padding: 20px 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: #9bb0d8;
  border-left: 3px solid #4f7cff;
  background: rgba(40,60,120,0.2);
}

.tone-serif-paper .recipe-block { border-top-color: rgba(58,42,24,0.2); }
.tone-serif-paper .recipe-title { color: #1a1208; }
.tone-serif-paper .recipe-lede { color: #3a2a18; }
.tone-serif-paper .recipe-list { background: rgba(58,42,24,0.18); border-color: rgba(58,42,24,0.18); }
.tone-serif-paper .recipe-list li { background: rgba(255,252,240,0.7); }
.tone-serif-paper .recipe-num { color: #c0392b; }
.tone-serif-paper .recipe-step-title { color: #1a1208; }
.tone-serif-paper .recipe-step-text { color: #3a2a18; }
.tone-serif-paper .recipe-footer { color: #5a4530; border-left-color: #c0392b; background: rgba(192,57,43,0.08); }

.tone-editorial .recipe-block { border-top-color: rgba(26,37,64,0.18); }
.tone-editorial .recipe-title { color: #0e1530; }
.tone-editorial .recipe-lede { color: #1a2540; }
.tone-editorial .recipe-list { background: rgba(26,37,64,0.15); border-color: rgba(26,37,64,0.15); }
.tone-editorial .recipe-list li { background: #fff; }
.tone-editorial .recipe-num { color: #c0392b; }
.tone-editorial .recipe-step-title { color: #0e1530; }
.tone-editorial .recipe-step-text { color: #1a2540; }
.tone-editorial .recipe-footer { color: #5e6680; border-left-color: #1a2540; background: rgba(26,37,64,0.05); }

/* Responsive */
@media (max-width: 900px) {
  .dialog-question { font-size: 28px; }
  .result-title { font-size: 56px; }
  .result-grid, .comparison-row { grid-template-columns: 1fr; }
  .breadcrumbs { max-width: 100%; }
}

/* ==== Result screen — header row (title + mandala + email box) ==== */
.result-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 36px;
  align-items: start;
  margin-bottom: 12px;
}
.result-header-main { min-width: 0; }
.result-header-aside {
  display: flex; flex-direction: column; gap: 14px;
  align-items: stretch;
  position: sticky; top: 16px;
}
@media (max-width: 900px) {
  .result-header { grid-template-columns: 1fr; }
  .result-header-aside { position: static; align-items: center; }
  .result-header-aside .itinerary-map,
  .result-header-aside .result-email-box { width: 100%; max-width: 360px; }
}

/* Itinerary mini-mandala — fully transparent so the circle floats over the
   result-screen background instead of being framed inside an opaque card. */
.itinerary-map {
  background: transparent;
  border: none;
  padding: 0;
  text-align: center;
}
.itinerary-map svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.itinerary-title {
  font-family: var(--serif); font-style: italic;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #9bb0d8; margin-bottom: 6px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.itinerary-legend {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: #cfe1ff; margin-top: 4px; opacity: 0.85;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.tone-serif-paper .itinerary-title { color: #5a4530; text-shadow: 0 1px 8px rgba(255, 250, 235, 0.7); }
.tone-serif-paper .itinerary-legend { color: #3a2a18; text-shadow: 0 1px 6px rgba(255, 250, 235, 0.7); }
.tone-editorial .itinerary-title { color: #5e6680; text-shadow: 0 1px 8px rgba(255, 255, 255, 0.85); }
.tone-editorial .itinerary-legend { color: #1a2540; text-shadow: 0 1px 6px rgba(255, 255, 255, 0.85); }

/* Email box */
.result-email-box {
  background: rgba(8, 12, 28, 0.55);
  border: 1px solid rgba(155, 176, 216, 0.25);
  border-radius: 10px;
  padding: 14px 16px;
  backdrop-filter: blur(10px);
}
.result-email-eyebrow {
  font-family: var(--serif); font-style: italic;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #9bb0d8; margin-bottom: 6px;
}
.result-email-hint {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; line-height: 1.45; color: #cfe1ff;
  margin: 0 0 10px;
}
.result-email-row { display: flex; gap: 6px; align-items: stretch; }
.result-email-row input {
  flex: 1;
  min-width: 0;
  background: rgba(20, 30, 60, 0.55);
  border: 1px solid rgba(155, 176, 216, 0.30);
  color: #f1f4ff;
  border-radius: 4px;
  padding: 8px 10px;
  font-family: var(--serif); font-size: 14px;
}
.result-email-row input:focus { outline: none; border-color: #4f7cff; }
.result-email-row button {
  background: #4f7cff;
  color: #fff;
  border: none;
  padding: 0 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--serif); font-size: 13px;
  letter-spacing: 0.04em;
  transition: background 0.15s;
}
.result-email-row button:hover:not(:disabled) { background: #6a9eff; }
.result-email-row button:disabled { opacity: 0.45; cursor: not-allowed; }
.result-email-msg {
  margin-top: 8px;
  font-family: var(--serif); font-size: 12.5px; line-height: 1.4;
  border-radius: 4px;
  padding: 6px 8px;
}
.result-email-msg.ok  { background: rgba(46, 125, 50, 0.18); color: #b6f1b6; border: 1px solid rgba(46, 125, 50, 0.4); }
.result-email-msg.err { background: rgba(192, 57, 43, 0.18); color: #ffb4b4; border: 1px solid rgba(192, 57, 43, 0.4); }

.tone-serif-paper .result-email-box { background: rgba(255, 252, 240, 0.85); border-color: rgba(58, 42, 24, 0.22); }
.tone-serif-paper .result-email-eyebrow { color: #5a4530; }
.tone-serif-paper .result-email-hint { color: #3a2a18; }
.tone-serif-paper .result-email-row input { background: #fffaf0; border-color: rgba(58, 42, 24, 0.25); color: #1a1208; }
.tone-serif-paper .result-email-row button { background: #c0392b; }
.tone-serif-paper .result-email-row button:hover:not(:disabled) { background: #a93022; }
.tone-serif-paper .result-email-msg.ok  { background: rgba(46, 125, 50, 0.10); color: #2a5e2a; border-color: rgba(46, 125, 50, 0.35); }
.tone-serif-paper .result-email-msg.err { background: rgba(192, 57, 43, 0.10); color: #7a1f1f; border-color: rgba(192, 57, 43, 0.35); }

.tone-editorial .result-email-box { background: #fff; border-color: rgba(26, 37, 64, 0.18); }
.tone-editorial .result-email-eyebrow { color: #5e6680; }
.tone-editorial .result-email-hint { color: #1a2540; }
.tone-editorial .result-email-row input { background: #fafafa; border-color: rgba(26, 37, 64, 0.2); color: #0e1530; }
.tone-editorial .result-email-row button { background: #1a2540; }
.tone-editorial .result-email-row button:hover:not(:disabled) { background: #0e1530; }
.tone-editorial .result-email-msg.ok  { background: rgba(46, 125, 50, 0.08); color: #1d5a1d; border-color: rgba(46, 125, 50, 0.30); }
.tone-editorial .result-email-msg.err { background: rgba(192, 57, 43, 0.08); color: #8a2020; border-color: rgba(192, 57, 43, 0.30); }

/* The header now lives inside the content area, so adjust title/sub to
   sit a bit tighter above the rest of the result. */
.result-header .result-title { margin-bottom: 12px; }
.result-header .result-sub   { margin-bottom: 22px; }
.result-header .result-description { margin-bottom: 0; }

/* "Recommendation" eyebrow row holds the restart button on its right so
   the user can start over without scrolling to the bottom. */
.result-eyebrow-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.result-eyebrow-row .result-eyebrow { margin-bottom: 0; }
.btn-restart-top {
  background: transparent;
  border: 1px solid rgba(155, 176, 216, 0.45);
  color: #cfe1ff;
  border-radius: 100px;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-restart-top:hover {
  background: rgba(207, 225, 255, 0.12);
  border-color: rgba(207, 225, 255, 0.85);
  color: #fff;
}
.tone-serif-paper .btn-restart-top { color: #3a2a18; border-color: rgba(58, 42, 24, 0.45); }
.tone-serif-paper .btn-restart-top:hover { background: rgba(58, 42, 24, 0.08); border-color: #3a2a18; color: #1a1208; }
.tone-editorial .btn-restart-top { color: #1a2540; border-color: rgba(26, 37, 64, 0.4); }
.tone-editorial .btn-restart-top:hover { background: rgba(26, 37, 64, 0.06); border-color: #1a2540; color: #0e1530; }

/* "Previous recommendations" stack — shown after the user clicks any
   "the recommendation would be" alternative. Each chip is a one-click
   revert to that earlier winner. */
.rec-history-bar {
  margin: 18px 0 4px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(155, 176, 216, 0.08);
  border: 1px dashed rgba(155, 176, 216, 0.35);
  display: flex; flex-direction: column; gap: 8px;
}
.rec-history-label {
  font-family: var(--serif); font-style: italic;
  font-size: 12.5px; letter-spacing: 0.04em;
  color: #9bb0d8;
}
.rec-history-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.rec-history-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 100px;
  background: oklch(0.72 0.18 var(--chip-hue, 230) / 0.18);
  border: 1px solid oklch(0.7 0.2 var(--chip-hue, 230) / 0.6);
  color: oklch(0.55 0.22 var(--chip-hue, 230));
  font-family: var(--serif);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rec-history-chip:hover {
  background: oklch(0.72 0.20 var(--chip-hue, 230) / 0.32);
  border-color: oklch(0.6 0.22 var(--chip-hue, 230) / 0.95);
  transform: translateY(-1px);
}
.rec-history-chip-arrow { font-family: var(--mono); font-size: 13px; opacity: 0.85; }
.rec-history-chip-label { font-weight: 500; }

.tone-serif-paper .rec-history-bar { background: rgba(58, 42, 24, 0.05); border-color: rgba(58, 42, 24, 0.3); }
.tone-serif-paper .rec-history-label { color: #5a4530; }
.tone-editorial .rec-history-bar { background: rgba(26, 37, 64, 0.04); border-color: rgba(26, 37, 64, 0.25); }
.tone-editorial .rec-history-label { color: #5e6680; }

/* ==== Result screen — extended sections ==== */
.result-description {
  font-family: var(--serif); font-size: 17px; line-height: 1.6;
  color: #cfe1ff; max-width: 780px; margin: 0 0 36px;
}
.tone-serif-paper .result-description { color: #3a2a18; }
.tone-editorial .result-description { color: #1a2540; }

.result-section { margin-top: 48px; }
.result-section-eyebrow {
  font-family: var(--serif); font-style: italic;
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #9bb0d8; margin-bottom: 16px;
}
.result-section-hint {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: #9bb0d8; margin: -6px 0 18px; max-width: 720px;
}
.tone-serif-paper .result-section-eyebrow,
.tone-serif-paper .result-section-hint { color: #5a4530; }
.tone-editorial .result-section-eyebrow,
.tone-editorial .result-section-hint { color: #5e6680; }

.hyp-list, .cond-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hyp-list li, .cond-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 16px; line-height: 1.55;
  background: rgba(20, 30, 60, 0.35);
  border: 1px solid rgba(155, 176, 216, 0.18);
  border-radius: 6px; padding: 14px 18px;
}
.hyp-marker {
  font-family: var(--mono); font-size: 11px;
  background: #4f7cff; color: #fff;
  border-radius: 3px; padding: 3px 7px;
  letter-spacing: 0.05em; flex-shrink: 0;
}
.tone-serif-paper .hyp-list li, .tone-serif-paper .cond-list li {
  background: rgba(255, 252, 240, 0.6); border-color: rgba(58, 42, 24, 0.2); color: #1a1208;
}
.tone-serif-paper .hyp-marker { background: #c0392b; }
.tone-editorial .hyp-list li, .tone-editorial .cond-list li {
  background: #fff; border-color: rgba(26, 37, 64, 0.15); color: #0e1530;
}

.proc-list {
  list-style: decimal; padding-left: 22px; margin: 0;
  display: grid; gap: 8px;
  font-size: 15px; line-height: 1.5;
  color: #cfe1ff;
}

/* Transformation conditions list — shown when the user's answers don't
   fully support the recommended technique. */
.trans-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.trans-item {
  background: rgba(192, 57, 43, 0.10);
  border: 1px solid rgba(192, 57, 43, 0.30);
  border-left: 4px solid #c0392b;
  border-radius: 6px;
  padding: 14px 16px 14px 18px;
  font-size: 15px;
  line-height: 1.55;
}
.trans-q {
  font-family: var(--serif);
  font-style: italic;
  margin-bottom: 8px;
  color: #f1f4ff;
}
.trans-qid {
  font-family: var(--mono);
  font-size: 11px;
  background: #c0392b;
  color: #fff;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  margin-right: 6px;
  font-style: normal;
}
.trans-from { color: #ffb4b4; margin-bottom: 6px; }
.trans-to   { color: #b4ffb4; }
.trans-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-right: 6px;
  opacity: 0.85;
}
.trans-alt-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 0;
  display: grid;
  gap: 4px;
}
.trans-alt-list li {
  padding-left: 18px;
  position: relative;
}
.trans-alt-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: inherit;
  opacity: 0.7;
}
.trans-alt-btn {
  display: inline-flex; align-items: baseline; gap: 12px;
  width: 100%;
  text-align: left;
  background: rgba(180, 255, 180, 0.08);
  border: 1px dashed rgba(180, 255, 180, 0.45);
  color: inherit;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.trans-alt-btn:hover {
  background: rgba(180, 255, 180, 0.18);
  border-color: rgba(180, 255, 180, 0.80);
  border-style: solid;
  transform: translateX(2px);
}
.trans-alt-btn:focus-visible {
  outline: 2px solid rgba(180, 255, 180, 0.8);
  outline-offset: 2px;
}
.trans-alt-cta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  white-space: nowrap;
}
.tone-serif-paper .trans-alt-btn {
  background: rgba(46, 125, 50, 0.08);
  border-color: rgba(46, 125, 50, 0.4);
}
.tone-serif-paper .trans-alt-btn:hover {
  background: rgba(46, 125, 50, 0.18);
  border-color: rgba(46, 125, 50, 0.7);
}
.tone-editorial .trans-alt-btn {
  background: rgba(46, 125, 50, 0.06);
  border-color: rgba(46, 125, 50, 0.35);
}
.tone-editorial .trans-alt-btn:hover {
  background: rgba(46, 125, 50, 0.14);
  border-color: rgba(46, 125, 50, 0.65);
}
.tone-serif-paper .trans-item { background: rgba(192, 57, 43, 0.08); color: #1a1208; }
.tone-serif-paper .trans-q { color: #1a1208; }
.tone-serif-paper .trans-from { color: #7a1f1f; }
.tone-serif-paper .trans-to   { color: #2a5e2a; }
.tone-editorial .trans-item { background: rgba(192, 57, 43, 0.06); color: #0e1530; }
.tone-editorial .trans-q { color: #0e1530; }
.tone-editorial .trans-from { color: #8a2020; }
.tone-editorial .trans-to   { color: #1d5a1d; }
.tone-serif-paper .proc-list { color: #3a2a18; }
.tone-editorial .proc-list { color: #1a2540; }

.authors-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.author-card {
  text-decoration: none; color: inherit;
  background: rgba(20, 30, 60, 0.35);
  border: 1px solid rgba(155, 176, 216, 0.22);
  border-radius: 6px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  transition: all 0.2s;
}
.author-card:hover {
  background: rgba(40, 60, 120, 0.45);
  border-color: rgba(207, 225, 255, 0.55);
  transform: translateY(-1px);
}
.author-name { font-family: var(--serif); font-size: 17px; font-weight: 500; color: #f1f4ff; }
.author-work { font-family: var(--serif); font-style: italic; font-size: 14px; color: #cfe1ff; }
.author-why { font-family: var(--serif); font-size: 13px; color: #9bb0d8; line-height: 1.45; margin-top: 4px; }
.author-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: #4f7cff; margin-top: 6px; text-transform: uppercase;
}
.tone-serif-paper .author-card { background: rgba(255, 252, 240, 0.7); border-color: rgba(58, 42, 24, 0.22); }
.tone-serif-paper .author-card:hover { background: rgba(220, 200, 160, 0.5); border-color: rgba(58, 42, 24, 0.5); }
.tone-serif-paper .author-name { color: #1a1208; }
.tone-serif-paper .author-work { color: #3a2a18; }
.tone-serif-paper .author-why { color: #5a4530; }
.tone-serif-paper .author-link { color: #c0392b; }
.tone-editorial .author-card { background: #fff; border-color: rgba(26, 37, 64, 0.15); }
.tone-editorial .author-card:hover { border-color: rgba(26, 37, 64, 0.45); }
.tone-editorial .author-name { color: #0e1530; }
.tone-editorial .author-work { color: #1a2540; }
.tone-editorial .author-why { color: #5e6680; }
.tone-editorial .author-link { color: #c0392b; }

/* ==== Chat rail — docked on the right side ====
   The dialog bar already shrinks horizontally via --chat-gutter when the
   chat is open, so the rail can use the full vertical space on the right
   without ever covering the bottom dialog options. On narrow screens it
   collapses to a smaller overlay. */
.chat-rail {
  position: fixed;
  top: 90px;
  right: 0;
  bottom: 16px;
  z-index: 30;
  display: flex;
  align-items: stretch;
  font-family: var(--serif);
  pointer-events: auto;
}
.chat-rail-toggle {
  background: rgba(8, 12, 28, 0.85);
  color: #cfe1ff;
  border: 1px solid rgba(155, 176, 216, 0.3);
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 18px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
  font-family: var(--serif);
  letter-spacing: 0.08em;
  transition: background 0.2s;
  backdrop-filter: blur(10px);
  align-self: flex-start;   /* the toggle stays at the top of the rail */
}
.chat-rail-toggle:hover { background: rgba(40, 60, 120, 0.9); }
.chat-rail-toggle.first-visit {
  animation: chat-toggle-blink 1.4s ease-in-out infinite;
}
@keyframes chat-toggle-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 124, 255, 0); transform: translateX(0); }
  50%      { box-shadow: 0 0 0 14px rgba(79, 124, 255, 0); transform: translateX(-3px); background: rgba(79, 124, 255, 0.92); color: #fff; }
}
.chat-rail-toggle-mark { font-size: 18px; line-height: 1; }
.chat-rail-toggle-label {
  writing-mode: vertical-rl;
  font-size: 11px;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0.18em;
}
.chat-rail-window {
  width: 380px;
  height: 100%;
  /* Translucent so the mandala behind stays visible. */
  background: rgba(8, 12, 28, 0.55);
  border: 1px solid rgba(155, 176, 216, 0.30);
  border-radius: 10px 0 0 10px;
  border-right: none;
  display: flex; flex-direction: column;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: -12px 14px 48px rgba(0,0,0,0.35);
  overflow: hidden;
}
.chat-rail.closed .chat-rail-window { display: none; }

/* Tablet: narrower window. */
@media (max-width: 1100px) {
  .chat-rail-window { width: 340px; }
}

/* Phones: chat is a floating action button (FAB) that opens a full-screen
   modal. It NEVER competes with the dialog bar. The chat-gutter is forced
   to 0 so the dialog uses the full width. */
@media (max-width: 760px) {
  .guide-app.chat-on { --chat-gutter: 0px; }
  .chat-rail {
    top: auto; bottom: 16px; right: 16px; left: auto;
    width: auto; height: auto;
  }
  .chat-rail-toggle {
    border-radius: 50%;
    border: 1px solid rgba(155,176,216,0.4);
    width: 56px; height: 56px;
    padding: 0;
    align-self: auto;
  }
  .chat-rail-toggle-label { display: none; }
  .chat-rail-toggle-mark { font-size: 26px; }
  .chat-rail.open {
    top: 12px; left: 12px; right: 12px; bottom: 12px;
  }
  .chat-rail.open .chat-rail-toggle { display: none; }
  .chat-rail.open .chat-rail-window {
    width: 100%; height: 100%;
    border-radius: 12px;
    border: 1px solid rgba(155,176,216,0.30);
  }
}

.chat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(155, 176, 216, 0.18);
}
.chat-header-title { display: inline-flex; gap: 8px; align-items: center; color: #f1f4ff; font-size: 15px; font-weight: 500; }
.chat-mark { color: #4f7cff; }
.chat-header-actions { display: inline-flex; gap: 4px; }
.chat-icon-btn {
  background: none; border: none;
  color: #9bb0d8; font-size: 16px;
  width: 28px; height: 28px; border-radius: 4px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.chat-icon-btn:hover { background: rgba(155, 176, 216, 0.15); color: #cfe1ff; }

.chat-settings {
  padding: 12px 16px;
  background: rgba(20, 30, 60, 0.5);
  border-bottom: 1px solid rgba(155, 176, 216, 0.18);
  display: flex; flex-direction: column; gap: 10px;
}
.chat-settings label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #9bb0d8; font-style: italic; }
.chat-settings input {
  background: rgba(8, 12, 28, 0.7);
  border: 1px solid rgba(155, 176, 216, 0.22);
  color: #e8eeff;
  border-radius: 4px;
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 12px;
}
.chat-settings input:focus { outline: none; border-color: #4f7cff; }
.chat-settings-hint { font-size: 11.5px; color: #9bb0d8; line-height: 1.5; margin: 0; font-style: italic; }
.chat-settings-hint code {
  background: rgba(155, 176, 216, 0.12);
  padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: 11px;
  color: #cfe1ff;
  font-style: normal;
}

.chat-context {
  padding: 10px 16px;
  background: rgba(40, 60, 120, 0.18);
  border-bottom: 1px solid rgba(155, 176, 216, 0.15);
}
.chat-context-eyebrow {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  font-style: italic; color: #9bb0d8; margin-bottom: 4px;
}
.chat-context-text { font-size: 13px; color: #cfe1ff; line-height: 1.4; }

.chat-scroller {
  flex: 1 1 auto; overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 80px;
}

.chat-empty { color: #9bb0d8; font-style: italic; font-size: 14px; line-height: 1.5; }
.chat-empty p { margin: 0 0 12px; }
.chat-suggestions { display: flex; flex-direction: column; gap: 6px; }
.chat-suggestion {
  background: rgba(20, 30, 60, 0.5);
  border: 1px solid rgba(155, 176, 216, 0.22);
  color: #cfe1ff;
  border-radius: 4px; padding: 8px 10px;
  text-align: left; cursor: pointer;
  font-family: var(--serif); font-style: italic;
  font-size: 13px; line-height: 1.4;
  transition: all 0.15s;
}
.chat-suggestion:hover { background: rgba(40, 60, 120, 0.6); border-color: rgba(207, 225, 255, 0.5); }

.chat-msg { display: flex; flex-direction: column; gap: 4px; }
.chat-msg-role {
  font-family: var(--serif); font-style: italic;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: #9bb0d8;
}
.chat-msg-body {
  font-family: var(--serif); font-size: 14px; line-height: 1.55;
  color: #f1f4ff; white-space: pre-wrap;
  background: rgba(20, 30, 60, 0.45);
  border: 1px solid rgba(155, 176, 216, 0.18);
  border-radius: 6px; padding: 10px 12px;
}
.chat-msg-user .chat-msg-body { background: rgba(40, 60, 120, 0.55); }
.chat-typing { display: inline-flex; gap: 6px; align-items: center; }
.chat-typing span {
  display: inline-block; width: 6px; height: 6px;
  background: #cfe1ff; border-radius: 50%;
  animation: chat-blink 1.4s infinite both;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chat-blink {
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

.chat-error {
  font-size: 13px; color: #ffb4b4; line-height: 1.5;
  background: rgba(120, 30, 30, 0.25);
  border: 1px solid rgba(255, 100, 100, 0.35);
  border-radius: 6px; padding: 10px 12px;
}
.chat-error-detail { font-family: var(--mono); font-size: 11px; color: #ffd6d6; margin: 6px 0 8px; }
.chat-error-steps { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: #ffe; }
.chat-error-steps code {
  background: rgba(255,255,255,0.1); padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: 11px;
}
.chat-error a { color: #cfe1ff; text-decoration: underline; }

.chat-input-row {
  border-top: 1px solid rgba(155, 176, 216, 0.18);
  padding: 10px 12px;
  display: flex; gap: 8px; align-items: stretch;
  background: rgba(8, 12, 28, 0.7);
}
.chat-help-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(79, 124, 255, 0.85);
  color: #fff;
  border: 1px solid rgba(207, 225, 255, 0.6);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  cursor: grab;
  align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  user-select: none;
  touch-action: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.chat-help-icon:hover { transform: scale(1.08); box-shadow: 0 0 12px rgba(79,124,255,0.7); }
.chat-help-icon:active { cursor: grabbing; }

/* Floating ghost while dragging */
.chat-help-ghost {
  position: fixed;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(79, 124, 255, 0.95);
  color: #fff;
  font-family: var(--serif); font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 18px rgba(79,124,255,0.7);
  border: 2px solid #fff;
}

/* While dragging, show a subtle outline on the element under the pointer */
body.atlas-help-dragging * { cursor: copy !important; }
/* CRITICAL: make the chat-rail transparent to pointer events during the
   drag, so document.elementFromPoint() returns whatever is BEHIND the
   chat (the mandala, the dialog, the result text). Removing the body
   class on pointer-up cleanly restores normal pointer behaviour, so the
   chat's input, send button and ? icon stay fully usable afterwards. */
body.atlas-help-dragging .chat-rail { pointer-events: none; }
body.atlas-help-dragging .chat-help-ghost { pointer-events: none; }

.atlas-help-target {
  outline: 2px dashed #4f7cff !important;
  outline-offset: 4px !important;
  background-color: rgba(79,124,255,0.08) !important;
}

/* "drag & ask" hint bubble that pops above the ? icon every ~30s */
.chat-help-icon { position: relative; }
.chat-help-icon::before {
  content: attr(data-hint);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1a2540;
  color: #fafaf6;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.chat-help-icon::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1a2540;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.chat-help-icon.hint-on::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.chat-help-icon.hint-on::after { opacity: 1; }

.chat-input-row textarea {
  flex: 1;
  background: rgba(20, 30, 60, 0.5);
  border: 1px solid rgba(155, 176, 216, 0.22);
  color: #f1f4ff;
  border-radius: 4px;
  padding: 8px 10px;
  font-family: var(--serif); font-size: 14px;
  resize: none;
}
.chat-input-row textarea:focus { outline: none; border-color: #4f7cff; }
.chat-send {
  background: #4f7cff;
  color: #fff;
  border: none;
  padding: 0 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 14px;
  transition: background 0.15s;
}
.chat-send:hover:not(:disabled) { background: #6a9eff; }
.chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Tone variants for the chat rail */
.tone-serif-paper .chat-rail-toggle { background: rgba(247, 241, 227, 0.95); color: #1a1208; border-color: rgba(58, 42, 24, 0.25); }
.tone-serif-paper .chat-rail-toggle:hover { background: rgba(220, 200, 160, 0.95); }
.tone-serif-paper .chat-rail-window { background: rgba(247, 241, 227, 0.55); border-color: rgba(58, 42, 24, 0.25); }
.tone-serif-paper .chat-header { border-color: rgba(58, 42, 24, 0.18); }
.tone-serif-paper .chat-header-title { color: #1a1208; }
.tone-serif-paper .chat-icon-btn { color: #5a4530; }
.tone-serif-paper .chat-icon-btn:hover { background: rgba(58, 42, 24, 0.1); color: #1a1208; }
.tone-serif-paper .chat-mark { color: #c0392b; }
.tone-serif-paper .chat-context { background: rgba(192, 57, 43, 0.08); border-color: rgba(58, 42, 24, 0.18); }
.tone-serif-paper .chat-context-eyebrow,
.tone-serif-paper .chat-context-text { color: #3a2a18; }
.tone-serif-paper .chat-msg-body { background: rgba(255, 252, 240, 0.85); border-color: rgba(58, 42, 24, 0.2); color: #1a1208; }
.tone-serif-paper .chat-msg-user .chat-msg-body { background: rgba(220, 200, 160, 0.7); }
.tone-serif-paper .chat-msg-role { color: #5a4530; }
.tone-serif-paper .chat-empty { color: #5a4530; }
.tone-serif-paper .chat-suggestion { background: rgba(255, 252, 240, 0.85); border-color: rgba(58, 42, 24, 0.22); color: #1a1208; }
.tone-serif-paper .chat-input-row { background: rgba(247, 241, 227, 0.95); border-color: rgba(58, 42, 24, 0.18); }
.tone-serif-paper .chat-input-row textarea { background: rgba(255, 252, 240, 0.95); border-color: rgba(58, 42, 24, 0.22); color: #1a1208; }
.tone-serif-paper .chat-send { background: #c0392b; }

.tone-editorial .chat-rail-toggle { background: rgba(255, 255, 255, 0.95); color: #0e1530; border-color: rgba(26, 37, 64, 0.2); }
.tone-editorial .chat-rail-toggle:hover { background: #fff; }
.tone-editorial .chat-rail-window { background: rgba(255, 255, 255, 0.65); border-color: rgba(26, 37, 64, 0.2); color: #0e1530; }
.tone-editorial .chat-header { border-color: rgba(26, 37, 64, 0.15); }
.tone-editorial .chat-header-title { color: #0e1530; }
.tone-editorial .chat-icon-btn { color: #5e6680; }
.tone-editorial .chat-icon-btn:hover { background: rgba(26, 37, 64, 0.08); color: #0e1530; }
.tone-editorial .chat-mark { color: #c0392b; }
.tone-editorial .chat-context { background: rgba(26, 37, 64, 0.06); border-color: rgba(26, 37, 64, 0.12); }
.tone-editorial .chat-context-eyebrow,
.tone-editorial .chat-context-text { color: #1a2540; }
.tone-editorial .chat-msg-body { background: #fafafa; border-color: rgba(26, 37, 64, 0.15); color: #0e1530; }
.tone-editorial .chat-msg-user .chat-msg-body { background: #1a2540; color: #fafafa; border-color: #1a2540; }
.tone-editorial .chat-msg-role { color: #5e6680; }
.tone-editorial .chat-empty { color: #5e6680; }
.tone-editorial .chat-suggestion { background: #fafafa; border-color: rgba(26, 37, 64, 0.15); color: #0e1530; }
.tone-editorial .chat-input-row { background: #fff; border-color: rgba(26, 37, 64, 0.15); }
.tone-editorial .chat-input-row textarea { background: #fafafa; border-color: rgba(26, 37, 64, 0.18); color: #0e1530; }
.tone-editorial .chat-send { background: #1a2540; }
.tone-editorial .chat-send:hover:not(:disabled) { background: #0e1530; }

/* When chat is open on the result screen, leave room on the right by
   shrinking the OUTER scroll container instead of pushing padding inward.
   That way the result content always uses every available pixel. */
.guide-app .result-screen { right: var(--chat-gutter); transition: right 0.25s ease; }
.guide-app .result-inner { max-width: none; margin: 0 auto; padding: 56px 56px 120px; }
.guide-app.chat-on .result-inner { max-width: 1080px; }
.guide-app.chat-off .result-inner { max-width: 1500px; }
@media (max-width: 720px) {
  .guide-app .result-inner { padding: 40px 20px 80px; }
}

/* Result-screen grids should adapt to whatever width is available */
.result-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important; }
.comparison-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
.authors-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }

/* Mini-map shrinks if it would collide with the chat toggle */
@media (max-width: 820px) {
  .mini-map { display: none; }
}

/* Brand block compresses on narrow screens */
@media (max-width: 600px) {
  .brand-text .brand-title { font-size: 16px; }
  .brand-sub { display: none; }
  .overlay-top { padding: 12px 14px; }
}

/* Mobile: hide the breadcrumb trail and the sector HUD so the dialog has
   maximum room. The user can still navigate via the back arrow + the
   dialog progress counter. */
@media (max-width: 760px) {
  .breadcrumbs { display: none; }
  .sector-hud { display: none; }
  .overlay-mid { display: none; }
  /* Mobile: header still transparent, disc may sit slightly under it. */
  /* Smaller, tighter option buttons on phones */
  .dialog-options { gap: 5px; }
  .opt-btn { padding: 7px 9px; font-size: 13px; }
  .dialog-question { font-size: clamp(17px, 4.6vw, 22px) !important; }
  .dialog-hint { font-size: 12px; margin-bottom: 8px; }
}

/* Help icon hidden on tiny screens (no drag UX on touch) */
@media (max-width: 560px) {
  .chat-help-icon { display: none; }
}