/* Final craft layer: shared optical rhythm, grouped controls, and legacy-page convergence. */

:root {
  --craft-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --craft-press: cubic-bezier(0.2, 0.8, 0.2, 1);
  --craft-ring: color-mix(in srgb, var(--world-accent, currentColor) 38%, transparent);
  --craft-surface: color-mix(in srgb, var(--world-bg-soft, var(--world-bg)) 86%, transparent);
  --craft-surface-strong: color-mix(in srgb, var(--world-bg-soft, var(--world-bg)) 94%, var(--world-ink) 6%);
  --craft-edge: color-mix(in srgb, var(--world-ink) 14%, transparent);
  --craft-shadow: 0 1.2rem 3rem rgb(11 17 24 / 7%);
}

:root[data-theme="light"] body {
  --world-muted: rgb(28 34 41 / 72%);
  --world-faint: rgb(28 34 41 / 59%);
  --craft-surface: rgb(255 255 255 / 24%);
  --craft-surface-strong: rgb(248 246 240 / 94%);
  --craft-edge: rgb(29 36 43 / 13%);
}

:root[data-theme="night"] body {
  --world-muted: rgb(228 236 243 / 79%);
  --world-faint: rgb(228 236 243 / 62%);
  --craft-surface: rgb(173 200 224 / 4.5%);
  --craft-surface-strong: rgb(27 42 58 / 94%);
  --craft-edge: rgb(208 225 240 / 15%);
}

body[data-page-id] {
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

body[data-page-id] :where(button, a, input, select, textarea) {
  touch-action: manipulation;
}

body[data-page-id] :where(button, a):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--craft-ring);
}

/* Editorial pages: clearer first frame and denser, more intentional rhythm. */
.page-shell > .world-intro {
  position: relative;
  min-height: min(43rem, 78svh);
  padding-top: clamp(7.5rem, 14vh, 9.5rem);
  padding-bottom: clamp(4.5rem, 9vh, 6.5rem);
}

.page-shell > .world-intro--short {
  min-height: min(33rem, 60svh);
}

.page-shell > .world-intro::after {
  position: absolute;
  right: 0;
  bottom: 1.25rem;
  width: clamp(2.5rem, 7vw, 5.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline));
  content: "";
}

.page-shell .kicker,
.page-shell .section-label,
.page-shell .entry-meta,
.page-shell .path-feature__meta,
.page-shell .path-feature__index {
  font-variant-numeric: tabular-nums;
}

.page-shell .world-title {
  max-width: 12ch;
  font-size: clamp(3.8rem, 9vw, 8.4rem);
  line-height: 0.91;
  letter-spacing: -0.058em;
}

.page-shell .world-title--long {
  max-width: 17ch;
  font-size: clamp(3.1rem, 7vw, 6.7rem);
  line-height: 0.96;
  letter-spacing: -0.048em;
}

.page-shell .world-deck {
  max-width: 39rem;
  margin-top: clamp(1.8rem, 4vw, 3.2rem);
  font-size: clamp(1.08rem, 1.55vw, 1.34rem);
  line-height: 1.76;
}

.page-shell .quiet-section {
  padding-block: clamp(3.75rem, 7vw, 6.5rem);
}

.page-shell .quiet-section--compact {
  padding-block: clamp(3rem, 5.5vw, 5rem);
}

.page-shell .section-heading {
  line-height: 1.03;
  letter-spacing: -0.042em;
}

.page-shell .section-copy,
.page-shell .prose {
  font-size: clamp(1.02rem, 1.15vw, 1.14rem);
  line-height: 1.88;
}

.page-shell .split {
  grid-template-columns: minmax(13rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(3rem, 8vw, 8rem);
}

/* Lists behave as one grouped object while each destination keeps immediate feedback. */
.page-shell .line-list,
.page-shell .entry-list {
  border-block: 1px solid var(--hairline);
}

.page-shell .line-list > li,
.page-shell .entry-row,
.page-shell .line-list > li:last-child,
.page-shell .entry-row:last-child {
  border-width: 0 0 1px;
}

.page-shell .line-list > li:last-child,
.page-shell .entry-row:last-child {
  border-bottom: 0;
}

.page-shell .line-link,
.page-shell .entry-row {
  position: relative;
  padding: clamp(1.25rem, 2.5vw, 1.9rem) clamp(0.65rem, 1.5vw, 1rem);
  border-radius: var(--radius-control);
  transition:
    color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    transform 120ms var(--craft-press);
}

.page-shell .entry-row[hidden] {
  display: none;
}

.page-shell .line-link:focus-visible,
.page-shell .entry-row:focus-within {
  background: color-mix(in srgb, var(--world-accent) 7%, transparent);
}

.page-shell .line-link:active,
.page-shell .entry-row:active {
  transform: scale(0.993);
}

.content-filters {
  display: flex;
  max-width: 100%;
  margin: 1.15rem 0 0.45rem;
  padding-bottom: 0.35rem;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.content-filters button {
  min-height: 2.5rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  flex: 0 0 auto;
  color: var(--world-muted);
  background: var(--craft-surface);
  font: 0.72rem/1 var(--font-display);
  cursor: pointer;
}

.content-filters button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--world-accent) 34%, var(--hairline));
  color: var(--world-ink);
  background: color-mix(in srgb, var(--world-accent) 9%, var(--craft-surface));
}

.content-filters button:focus-visible {
  outline: 2px solid var(--world-accent);
  outline-offset: 2px;
}

.path-group {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.path-group__intro {
  top: 6.75rem;
}

.path-group__list {
  border-block: 1px solid var(--hairline);
}

.path-group__list > li,
.path-group__list > li:last-child {
  border-width: 0 0 1px;
}

.path-group__list > li:last-child {
  border-bottom: 0;
}

.path-feature {
  min-height: 7.35rem;
  padding-inline: 0.75rem;
}

.path-feature__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--world-accent) 8%, transparent), transparent 62%),
    var(--world-bg-soft);
  box-shadow: inset 0 1px color-mix(in srgb, white 15%, transparent);
}

.path-feature__media img {
  filter: saturate(0.88) contrast(1.02);
  transition: filter var(--motion-normal) ease, transform var(--motion-normal) var(--ease-miao);
}

:root[data-theme="night"] .path-feature__media img {
  filter: brightness(0.9) saturate(0.82) contrast(1.05);
}

.path-feature:hover .path-feature__media img,
.path-feature:focus-visible .path-feature__media img {
  filter: none;
}

/* Related destinations are a grouped functional surface, not a card grid. */
.relation-trail {
  padding-block: clamp(4rem, 8vw, 6.5rem);
}

.relation-list {
  gap: 1px;
  overflow: clip;
  border: 1px solid var(--craft-edge);
  border-radius: var(--radius-panel);
  background: var(--craft-surface-strong);
  box-shadow: inset 0 1px color-mix(in srgb, white 13%, transparent);
}

.relation-list > li {
  display: flex;
  min-width: 0;
}

.relation-list a {
  width: 100%;
  height: 100%;
  min-height: 5.6rem;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--craft-surface-strong);
  box-shadow: none;
  font-size: clamp(1.08rem, 1.7vw, 1.4rem);
}

.relation-list a small {
  font-family: var(--font-body);
  font-size: 0.74rem;
  line-height: 1.52;
}

.relation-list a:hover,
.relation-list a:focus-visible {
  background: color-mix(in srgb, var(--craft-surface-strong) 92%, var(--world-accent) 8%);
  box-shadow: inset 0 1px color-mix(in srgb, white 20%, transparent);
}

/* Inputs use the same compact tactile language across Search, Archive, tools, and prompts. */
.field input,
.field select,
.field textarea {
  min-height: 2.9rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid var(--craft-edge);
  border-radius: var(--radius-control);
  background: var(--craft-surface);
  box-shadow: inset 0 1px color-mix(in srgb, white 14%, transparent);
  transition:
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: color-mix(in srgb, var(--world-ink) 23%, transparent);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: color-mix(in srgb, var(--world-accent) 66%, transparent);
  background: var(--craft-surface-strong);
  box-shadow: inset 0 1px color-mix(in srgb, white 18%, transparent), 0 0 0 4px var(--craft-ring);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 0;
}

body[data-page-id="tool-academic-phrase-cleaner"] .tool-input-pane textarea {
  min-height: clamp(15rem, 31vw, 24rem);
}

.text-button,
.button-quiet {
  border-color: var(--craft-edge);
  border-radius: var(--radius-control);
  background: var(--craft-surface);
  box-shadow: inset 0 1px color-mix(in srgb, white 14%, transparent);
  transition:
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    transform 120ms var(--craft-press);
}

.text-button:active,
.button-quiet:active {
  transform: scale(0.98);
}

.site-footer {
  min-height: 16rem;
  padding-top: 4.25rem;
}

.site-footer__mark {
  width: 3.7rem;
  margin-top: 3.5rem;
}

/* Dense local tools keep native horizontal navigation visible without
   floating labels obscuring the underlying data. */
@media (max-width: 45rem) {
  body[data-page-id="bazi-preview"] #app .professional-scroll,
  body[data-page-id="bazi-preview"] #app .fortune-scroll,
  body[data-page-id="bazi-preview"] #app .flow-chain {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--bazi-accent, currentColor) 42%, transparent) transparent;
  }
}

/* Tool surfaces stay crisp: the shell owns blur; inner work areas own tint and edge. */
.heatmap-controls {
  border-color: var(--craft-edge);
  background: var(--craft-surface-strong);
  box-shadow: inset 0 1px color-mix(in srgb, white 18%, transparent), var(--craft-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.heatmap-kpis,
.heatmap-figure {
  border-color: var(--craft-edge);
}

.heatmap-kpis > div,
.heatmap-figure {
  background: var(--craft-surface);
  box-shadow: inset 0 1px color-mix(in srgb, white 12%, transparent);
}

.heatmap-controls__head button,
.copy-prompt,
.symbolic-presets button,
.auto-btn,
.belt-view-btn,
.belt-zoom-btn {
  transition:
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    transform 120ms var(--craft-press);
}

.heatmap-controls__head button:active,
.copy-prompt:active,
.symbolic-presets button:active,
.auto-btn:active,
.belt-view-btn:active,
.belt-zoom-btn:active {
  transform: scale(0.97);
}

.prompt-workbench,
.prompt-output--standalone,
.language-comparison {
  overflow: clip;
  border: 1px solid var(--craft-edge);
  border-radius: var(--radius-panel);
  background: var(--craft-surface);
  box-shadow: inset 0 1px color-mix(in srgb, white 14%, transparent);
}

.prompt-workbench,
.prompt-output--standalone {
  border-block-color: var(--craft-edge);
}

/* These workbenches are much taller than the generic quiet-section estimate.
   Rendering them eagerly avoids scrollbar jumps as each editor enters view. */
body[data-page-id="prompts"] .prompt-system {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.prompt-output {
  background: color-mix(in srgb, var(--world-bg-soft) 76%, transparent);
}

/* Lab remains a night field in either site theme; its controls and cards stay
   opaque enough to read without turning the experiment grid into nested glass. */
body[data-page-id="lab"] .container {
  width: min(72rem, calc(100% - 2.5rem));
}

body[data-page-id="lab"] .filter-btn {
  min-height: 2.75rem;
  padding-inline: 1rem;
  border-color: rgb(235 241 247 / 13%);
  background: rgb(235 241 247 / 4%);
}

body[data-page-id="lab"] .card {
  border-color: rgb(235 241 247 / 11%);
  background: rgb(8 11 17 / 86%);
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body[data-page-id="lab"] .feature-card {
  border-radius: var(--radius-panel);
}

body[data-page-id="lab"] .status::before {
  box-shadow: none;
}

/* Spin 1/2: preserve the supplied mechanics, replace the generic neon dashboard skin. */
html[data-theme="light"] body[data-page-id="research-spin-half"] {
  --bg: #edf1f2;
  --panel: #f7f5ef;
  --text: #18242d;
  --muted: #586a78;
  --line: rgb(24 36 45 / 14%);
  --accent: #476f8d;
  --good: #34745e;
  --bad: #9b5551;
  --warn: #9a7138;
  --glow-accent: transparent;
  --glow-good: transparent;
}

html[data-theme="night"] body[data-page-id="research-spin-half"] {
  --bg: #101a26;
  --panel: #172332;
  --text: #edf2f5;
  --muted: #a7b6c3;
  --line: rgb(219 231 241 / 14%);
  --accent: #a6bfd2;
  --good: #8ebda5;
  --bad: #d4938e;
  --warn: #cdb083;
  --glow-accent: transparent;
  --glow-good: transparent;
}

body[data-page-id="research-spin-half"] {
  background:
    radial-gradient(circle at 85% 6%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 27rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

body[data-page-id="research-spin-half"] .wrap {
  width: min(100%, 78rem);
  padding: clamp(7.25rem, 10vw, 9rem) var(--page-gutter) 3rem;
}

body[data-page-id="research-spin-half"] .spin-page-header {
  max-width: 54rem;
  padding: 0 0 clamp(2rem, 4vw, 3.25rem);
  margin: 0;
  text-align: left;
}

body[data-page-id="research-spin-half"] .spin-page-header h1 {
  margin: 0;
  color: var(--text);
  background: none;
  font: 400 clamp(2.7rem, 6vw, 5.9rem)/0.96 var(--font-display);
  letter-spacing: -0.052em;
  -webkit-text-fill-color: currentColor;
  animation: none;
  filter: none;
  text-wrap: balance;
}

body[data-page-id="research-spin-half"] .subtitle {
  max-width: 42rem;
  margin: 1.25rem 0 0;
  color: var(--muted);
  font: clamp(1rem, 1.4vw, 1.16rem)/1.78 var(--font-serif);
}

body[data-page-id="research-spin-half"] .beta-note {
  margin-top: 1.25rem;
  border-color: var(--line);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--muted);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body[data-page-id="research-spin-half"] .key-point {
  justify-content: flex-start;
  gap: clamp(2rem, 7vw, 6rem);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border-color: var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow: inset 0 1px color-mix(in srgb, white 16%, transparent);
}

body[data-page-id="research-spin-half"] .card {
  border-color: var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
  box-shadow: inset 0 1px color-mix(in srgb, white 12%, transparent), 0 1.1rem 2.8rem rgb(4 9 14 / 9%);
}

body[data-page-id="research-spin-half"] .card:hover,
body[data-page-id="research-spin-half"] .summary-item:hover,
body[data-page-id="research-spin-half"] .belt-state:hover {
  transform: none;
  box-shadow: inset 0 1px color-mix(in srgb, white 12%, transparent), 0 1.1rem 2.8rem rgb(4 9 14 / 9%);
}

body[data-page-id="research-spin-half"] .card .hd {
  background: transparent;
}

body[data-page-id="research-spin-half"] .card .hd .title::before {
  box-shadow: none;
}

body[data-page-id="research-spin-half"] .auto-control,
body[data-page-id="research-spin-half"] .phase-indicator,
body[data-page-id="research-spin-half"] .note,
body[data-page-id="research-spin-half"] .belt-state,
body[data-page-id="research-spin-half"] .summary-item {
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg) 52%, var(--panel) 48%);
  box-shadow: none;
}

body[data-page-id="research-spin-half"] .auto-btn,
body[data-page-id="research-spin-half"] .belt-view-btn,
body[data-page-id="research-spin-half"] .belt-zoom-btn {
  border-color: var(--line);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--panel) 86%, var(--text) 4%);
  box-shadow: inset 0 1px color-mix(in srgb, white 12%, transparent);
}

body[data-page-id="research-spin-half"] .auto-btn:hover,
body[data-page-id="research-spin-half"] .belt-view-btn:hover,
body[data-page-id="research-spin-half"] .belt-zoom-btn:hover,
body[data-page-id="research-spin-half"] .belt-view-btn.active {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
}

body[data-page-id="research-spin-half"] .canwrap {
  border-color: var(--line);
  background: #0c131d;
}

body[data-page-id="research-spin-half"] .summary-item .icon {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.55rem;
}

body[data-page-id="research-spin-half"] .spin-page-footer {
  width: min(100%, 78rem);
  min-height: 13rem;
  margin: 0 auto;
  padding: 3.5rem var(--page-gutter) max(2rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* Hypersurface carries one semantic scene through a light blueprint and a night deep-space treatment. */
body[data-page-id="research-hypersurface"] > .relation-trail,
body[data-page-id="research-hypersurface"] > .site-footer {
  position: relative;
  z-index: 12;
  color: var(--world-ink);
  background: var(--world-bg);
}

:root[data-theme="light"] body[data-page-id="research-hypersurface"] > .relation-trail,
:root[data-theme="light"] body[data-page-id="research-hypersurface"] > .site-footer {
  --world-bg: #f1eee6;
  --world-bg-soft: #e7e3d9;
  --world-ink: #1c2229;
  --world-muted: rgb(28 34 41 / 72%);
  --world-faint: rgb(28 34 41 / 59%);
  --world-accent: #526b86;
}

@media (hover: hover) and (pointer: fine) {
  .page-shell .line-link:hover,
  .page-shell .entry-row:hover {
    background: color-mix(in srgb, var(--world-accent) 6%, transparent);
  }
}

@media (max-width: 52rem) {
  .page-shell .split {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

@media (max-width: 46rem) {
  .page-shell > .world-intro {
    min-height: min(38rem, 72svh);
    padding-top: clamp(7rem, 14vh, 8rem);
    padding-bottom: clamp(3.5rem, 8vh, 4.75rem);
  }

  .page-shell > .world-intro--short {
    min-height: min(30rem, 58svh);
  }

  .page-shell .world-title {
    font-size: clamp(3.15rem, 17vw, 5.6rem);
    line-height: 0.94;
  }

  .page-shell .world-title--long {
    font-size: clamp(2.65rem, 12.8vw, 4.5rem);
  }

  .page-shell .world-deck {
    font-size: 1.04rem;
    line-height: 1.78;
  }

  .page-shell .quiet-section,
  .path-group,
  .relation-trail {
    padding-block: clamp(3.5rem, 13vw, 5.25rem);
  }

  .path-feature {
    min-height: 6.8rem;
  }

  .relation-list {
    grid-template-columns: 1fr;
  }

  .relation-list a {
    min-height: 5.25rem;
  }

  body[data-page-id="tool-academic-phrase-cleaner"] .tool-input-pane textarea {
    min-height: 11rem;
  }

  .site-footer {
    min-height: 14rem;
    padding-top: 3.75rem;
  }

  body[data-page-id="research-spin-half"] .wrap {
    padding-top: 6.75rem;
  }

  body[data-page-id="research-spin-half"] .spin-page-header h1 {
    font-size: clamp(2.65rem, 13vw, 4.2rem);
  }

  body[data-page-id="research-spin-half"] .key-point {
    justify-content: space-between;
    gap: 1rem;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --craft-surface: var(--world-bg-soft);
    --craft-surface-strong: var(--world-bg-soft);
  }
}

@media (prefers-contrast: more) {
  :root {
    --craft-edge: color-mix(in srgb, currentColor 52%, transparent);
  }

  .relation-list,
  .field input,
  .field select,
  .field textarea,
  .heatmap-controls,
  .prompt-workbench,
  .prompt-output--standalone,
  .language-comparison {
    border-color: var(--craft-edge);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell .line-link,
  .page-shell .entry-row,
  .field input,
  .field select,
  .field textarea,
  .text-button,
  .button-quiet,
  .path-feature__media img,
  .heatmap-controls__head button,
  .copy-prompt,
  .symbolic-presets button,
  .auto-btn,
  .belt-view-btn,
  .belt-zoom-btn {
    transition: none;
  }
}