/* Recursive thinking narrative and supporting navigation. Uses the existing theme tokens. */
.thinking-home { color: var(--text); }
.thinking-home .text-white { color: var(--text-heading); }
.thinking-home .text-slate-300 { color: var(--text-3); }
.thinking-home .text-slate-400, .thinking-home .text-slate-500 { color: var(--muted); }
.thinking-home section[id] { scroll-margin-top: 6rem; }
.thinking-hero { min-height: calc(100svh - 4rem); padding: 4rem 1.25rem; }
.thinking-hero .hero-content { max-width: 50rem; }
.hero-observer { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-bottom: 2rem; }
.hero-observer p { max-width: 30rem; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.hero-entry-note { margin-top: 1rem; color: var(--muted); font-size: .875rem; }
.red-dot-entry { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; border: 1px solid var(--red-dot); border-radius: 50%; box-shadow: 0 0 24px #ef444444; }
.red-dot-entry .red-dot-visual { width: 24px; height: 24px; }
.narrative-section { padding: clamp(3rem, 7vw, 5rem) 1.25rem; }
.narrative-inner { width: 100%; max-width: 64rem; margin: 0 auto; }
.narrative-label { color: var(--accent-text); font-size: .8rem; font-weight: 600; letter-spacing: .16em; margin: 0 0 1rem; }
.narrative-section h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.3; font-weight: 700; color: var(--text-heading); margin: 0 0 1.25rem; overflow-wrap: anywhere; }
.narrative-section p { line-height: 1.75; max-width: 48rem; margin: .75rem 0; }
.narrative-section .narrative-intro { font-size: 1.125rem; color: var(--text-3); }
.narrative-note { color: var(--muted); font-size: .9rem; }
.question-example { padding: 1.25rem; border-left: 3px solid var(--accent); background: var(--surface-card); font-size: 1.2rem; }
.recursion-observer { display: flex; gap: 1rem; align-items: center; margin: 2rem 0; }
.recursion-observer .red-dot { flex: 0 0 24px; height: 24px; cursor: default; }
.recursion-observer p { margin: 0; }
.recursion-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; gap: 1rem; margin: 2rem 0 1rem; }
.recursion-stages li { position: relative; min-width: 0; padding: 1.25rem; border: 1px solid var(--border-3); border-top: 3px solid var(--red-dot); border-radius: 1rem; background: var(--surface-2); }
.recursion-stages li:not(:last-child)::after { content: "→"; position: absolute; right: -.85rem; top: 50%; z-index: 1; background: var(--surface); color: var(--accent-text); font-size: 1.4rem; line-height: 1; }
.stage-owner { display: block; font-size: .75rem; color: var(--muted); line-height: 1.5; min-height: 2.5rem; }
.recursion-stages h3, .capability-card h3 { color: var(--text-heading); font-size: 1.1rem; font-weight: 600; margin: .75rem 0; }
.recursion-stages p { font-size: .9rem; }
.recursion-return { padding: 1rem; border: 1px dashed var(--accent); border-radius: .75rem; color: var(--accent-text); }
.emergence-story { background: var(--surface-card); }
.emergence-facets { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: .75rem; margin: 1.5rem 0; }
.emergence-facets li { padding: .75rem 1rem; border: 1px solid var(--border-3); border-radius: .75rem; background: var(--surface-2); }
#question .btn-primary { display: inline-flex; align-items: center; justify-content: center; text-align: center; margin-top: 1rem; min-height: 44px; }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.capability-card { min-width: 0; padding: 1.5rem; border: 1px solid var(--border-3); border-radius: 1rem; background: var(--surface-2); display: flex; flex-direction: column; }
.capability-card a { display: inline-block; margin-top: auto; padding: .75rem 0; min-height: 44px; color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; }
.supporting-lens-chat { margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--border-3); border-radius: .75rem; }
.supporting-lens-chat summary { cursor: pointer; padding: .5rem 0; min-height: 44px; }
.supporting-lens-chat p { margin: 1rem 0; line-height: 1.7; }
.supporting-lens-chat a { color: var(--accent-text); text-decoration: underline; }
.supporting-lens-chat > .red-dot-container { display: flex; align-items: center; justify-content: center; }
.back-to-top { position: fixed; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 40; display: none; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--accent); border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 24px rgba(124,58,237,.35); }
.show-back-to-top .back-to-top { display: flex; }
.back-to-top:hover { background: var(--accent-2); }
.back-to-top:focus-visible { outline: 3px solid #60a5fa; outline-offset: 4px; }
.thinking-home :focus-visible, .thinking-nav :focus-visible, .nav-drawer :focus-visible { outline: 3px solid #60a5fa; outline-offset: 4px; }
.thinking-nav .nav-links { display: none; gap: 1rem; }
.thinking-nav { height: 64px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.thinking-nav .nav-hamburger { display: flex; width: 44px; height: 44px; padding: .65rem; }
.thinking-nav .nav-brand { flex-shrink: 0; }
.thinking-nav .nav-brand { color: var(--text-heading); }
.thinking-nav .nav-user { max-width: 10rem; overflow: hidden; }
.thinking-nav .nav-user-name, .thinking-nav .nav-user-tenant { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-tools { position: relative; }
.nav-tools-toggle { background: transparent; border: none; font: inherit; cursor: pointer; min-height: 44px; }
.nav-tools-panel { position: absolute; top: calc(100% + .75rem); right: 0; width: 17rem; max-height: calc(100svh - 6rem); overflow-y: auto; padding: .75rem; background: var(--surface-2); border: 1px solid var(--border-3); border-radius: .75rem; box-shadow: 0 12px 40px #0005; }
.nav-group-label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .75rem; margin: 0; }
.nav-drawer { display: block; max-height: calc(100svh - 5rem); overflow-y: auto; }
.nav-drawer-overlay { display: block; }
@media (min-width: 1280px) {
  .thinking-nav .nav-links { display: flex; }
  .thinking-nav .nav-hamburger { display: none; }
  .nav-drawer, .nav-drawer-overlay { display: none; }
}
@media (max-width: 900px) {
  .recursion-stages { grid-template-columns: 1fr; gap: 1.5rem; }
  .recursion-stages li:not(:last-child)::after { content: "↓"; top: auto; right: 50%; bottom: -1.25rem; transform: translateX(50%); }
  .stage-owner { min-height: 0; }
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .capability-grid { grid-template-columns: 1fr; }
  .thinking-hero .hero-cta { flex-direction: column; }
  .thinking-hero .hero-cta a { min-height: 44px; }
  .thinking-home .section-pad { padding: 3rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .thinking-home *, .thinking-home *::before, .thinking-home *::after,
  .thinking-nav *, .nav-drawer, .nav-drawer-overlay { animation: none !important; transition: none !important; }
}

/* Restored conceptual loop: keep the actual four-step journey above it. */
.cognitive-loop-visual { margin: 3rem 0 0; text-align: center; }
.cognitive-loop-caption-title { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .25rem .75rem; }
.cognitive-loop-visual h3 { margin: 0; color: var(--text-heading); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; }
.cognitive-loop-visual p { margin: .75rem auto; }
.cognitive-loop-svg { display: block; width: 100%; max-width: 36rem; height: auto; margin: 0 auto; }
.cognitive-loop-orbit { stroke: var(--border-3); stroke-width: 1; }
.cognitive-loop-centre { fill: var(--text-heading); }
.cognitive-loop-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; color: var(--text-3); font-size: .8rem; line-height: 1.6; }
.cognitive-loop-toggle { padding: .35rem .5rem; min-height: 44px; min-width: 44px; border: 0; border-radius: .25rem; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.cognitive-loop-toggle:hover { color: var(--text-heading); }
.cognitive-loop-toggle:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.cognitive-loop-visual.is-paused .loop-path { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .cognitive-loop-visual .loop-path { animation: none !important; stroke-dasharray: none; stroke-dashoffset: 0; }
  .cognitive-loop-toggle { display: none; }
}