/*
  Light & Gravity · Research Blue / Yellow
  DEFAULT VISUAL PROFILE · v1.1 · 2026-08-10

  Canonical rules: ../DESIGN_SYSTEM.md
  Visual grammar: ../visual-templates/research-blue-yellow/index.html

  This file stores stable tokens and low-level visual utilities.
  It does not prescribe one page DOM. Information relationships choose patterns.
*/

:root {
  /* Reading surfaces */
  --lg-research-canvas: #FBFAF6;
  --lg-research-reading-canvas: #F1F0EC;
  --lg-research-paper: #F7F3EB;
  --lg-research-white: #FFFFFF;

  /* Text */
  --lg-research-ink: #333330;
  --lg-research-secondary: #605A51;
  --lg-research-muted: #9C968C;

  /* Mineral data fields */
  --lg-research-blue: #C0CFCB;
  --lg-research-blue-deep: #82A09B;
  --lg-research-blue-bar: #A2B9B6;
  --lg-research-straw: #DDD9C2;
  --lg-research-yellow: #D7D3BD;
  --lg-research-neutral: #E9E5DA;

  /* Lines */
  --lg-research-rule: rgba(51, 51, 48, .15);
  --lg-research-rule-soft: rgba(51, 51, 48, .08);
  --lg-research-rule-strong: #333330;

  /* Type roles */
  --lg-research-display: Georgia, "Noto Serif SC", "Songti SC", serif;
  --lg-research-body: "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", Arial, sans-serif;
  --lg-research-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Reading geometry */
  --lg-research-page: 1180px;
  --lg-research-reading: 680px;
  --lg-research-object: 980px;
  --lg-research-rail: 220px;
  --lg-research-rail-gap: 80px;

  /* Texture */
  --lg-research-noise-opacity: .05;
  --lg-research-noise-size: 100px;
  --lg-research-noise-z: 10;
  --lg-research-noise-image: url("../assets/textures/lg-material-noise-256.png");
  --lg-research-dot-size: 16px;
  --lg-research-dot: rgba(51, 51, 48, .08);
}

/* Surface policy · DEFAULT v1.1
   - Global material noise is a fixed overlay ABOVE ordinary page content.
   - Reading Mode removes only the global layer and switches to the flat reading canvas.
   - Local research texture and measurement texture keep their own semantic scope.
   - The local PNG preserves the user-approved reference tile pixel field; it is the
     canonical production texture and does not depend on a remote CDN. */
.lg-research-global-noise {
  position: fixed;
  inset: 0;
  z-index: var(--lg-research-noise-z);
  pointer-events: none;
  opacity: var(--lg-research-noise-opacity);
  background-image: var(--lg-research-noise-image);
  background-size: var(--lg-research-noise-size) var(--lg-research-noise-size);
  background-repeat: repeat;
  mix-blend-mode: normal;
}

html[data-reading-mode="on"] body {
  background: var(--lg-research-reading-canvas);
}

html[data-reading-mode="on"] [data-texture-scope="global"] {
  display: none !important;
}

/* Shared Reading Mode control. Keep the icon visually quiet; the hit area stays usable. */
.lg-reading-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lg-research-secondary);
  cursor: pointer;
}

.lg-reading-mode-toggle:hover,
.lg-reading-mode-toggle[aria-pressed="true"] {
  color: var(--lg-research-ink);
}

.lg-reading-mode-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Local research texture: stays available in Reading Mode. */
.lg-research-noise {
  position: relative;
  isolation: isolate;
}

.lg-research-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--lg-research-noise-opacity);
  background-image: var(--lg-research-noise-image);
  background-size: var(--lg-research-noise-size) var(--lg-research-noise-size);
  background-repeat: repeat;
  mix-blend-mode: normal;
}

.lg-research-noise > * {
  position: relative;
  z-index: 1;
}

/* Benchmark / leaderboard / chart / measurement surfaces only. */
.chart-surface--dots,
.lg-research-measurement-surface {
  background-color: var(--lg-research-white);
  background-image: radial-gradient(circle, var(--lg-research-dot) 1px, transparent 1px);
  background-size: var(--lg-research-dot-size) var(--lg-research-dot-size);
}

/* B-type floating separator.
   The separator is deliberately detached from the outer frame.
   Semantic relationships decide whether a separator exists; editorial rhythm decides the inset. */
.lg-floating-separator {
  position: relative;
}

.lg-floating-separator::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: var(--lg-research-rule);
}

/* Utility for compact horizontal separation inside one object. */
.lg-floating-separator--horizontal::before {
  left: 20px;
  right: 20px;
  top: 0;
  bottom: auto;
  width: auto;
  height: 1px;
}