/* ===========================================================
   embedding.css -- SECTION CSS for "Эмбеддинг" (element=embedding-materialize).

   Scope: ONLY the process-anim scene (doc -> chunks -> vectors), the timeline
   controls process-anim/timeline.js generate, the embed drill-card, and this
   chapter's prose. base.css ships none of these shells, so they are styled here.

   base.css is NEVER edited or forked. Every color/space/motion value comes from
   a theme token (var(--...)); selection/focus uses the themed sepia/rust ring
   (--c-focus), NEVER blue. Animation is transform/opacity only, no infinite
   loops (V5-safe). Tokens live in themes/atlas.css.
   =========================================================== */

/* ---- plate-head eyebrow label (token-driven; replaces the removed inline
   style on .eyebrow). All values from theme tokens; ASCII only. ---- */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-0);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 4px;
}

/* ---- the Embedding-node stage (opens the semantic-zoom camera) ---- */
.embed-stage {
  position: relative;
  background: var(--c-bg);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 30px rgba(60, 46, 26, 0.08);
  padding: var(--sp-3);
}
.embed-node {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-border);
  border-left: 4px solid var(--c-accent-1);
  border-radius: var(--radius-md);
  padding: 11px 13px;
  margin: 0 0 var(--sp-3);
  min-height: 44px;
  transition: background-color var(--dur-1) var(--ease-1),
    border-color var(--dur-1) var(--ease-1);
}
.embed-node:hover { background: var(--c-surface-2); border-left-color: var(--c-accent-2); }
.embed-node:focus-visible { outline: var(--bw-2) solid var(--c-focus); outline-offset: 2px; }
.embed-node .en-lens { flex: 0 0 auto; color: var(--c-accent-2); }
.embed-node .en-txt { font-family: var(--font-ui); font-size: 12px; color: var(--c-heading); line-height: 1.45; }
.embed-node .en-txt b { color: var(--c-text); }

/* ===========================================================
   PROCESS-ANIM scene (process-anim.js DOM): doc / chunks / vectors columns.
   The embed step is the centerpiece -- a chunk card materializes into a vector
   card (dim 1536). Transform/opacity only; reduced-motion snaps to end.
   =========================================================== */
.process-anim { display: block; }
.process-anim__stage {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--sp-2);
  align-items: start;
}
.process-anim__doc,
.process-anim__chunks,
.process-anim__vectors {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.process-anim__doc-title,
.card__meta {
  font-family: var(--font-ui);
  font-size: var(--fs-0);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-0);
}
.process-anim__doc-body {
  font-family: var(--font-body);
  font-size: var(--fs-1);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  overflow-wrap: anywhere;
}
/* doc spans light when their chunk splits */
.process-anim__doc-chunk {
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-2) var(--ease-1), color var(--dur-2) var(--ease-1);
}
.process-anim__doc-chunk[data-state="active"],
.process-anim__doc-chunk[data-state="done"] {
  background: var(--c-accent-1-soft);
}

/* chunk + vector cards: pre-state faded/offset; settle to opacity 1 */
.process-anim__chunk,
.process-anim__vector {
  font-family: var(--font-ui);
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-0);
  box-shadow: var(--shadow-1);
  opacity: 0.35;
  transform: translateY(6px) scale(0.98);
  transform-origin: left center;
  transition: opacity var(--dur-2) var(--ease-1), transform var(--dur-2) var(--ease-1);
}
.process-anim__chunk[data-state="active"],
.process-anim__chunk[data-state="done"],
.process-anim__vector[data-state="active"],
.process-anim__vector[data-state="done"],
.process-anim__vector[data-state="stored"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* accent border per card index (color from theme accents only) */
.process-anim__chunk.accent-1, .process-anim__vector.accent-1 { border-left: 3px solid var(--c-accent-1); }
.process-anim__chunk.accent-2, .process-anim__vector.accent-2 { border-left: 3px solid var(--c-accent-2); }
.process-anim__chunk.accent-3, .process-anim__vector.accent-3 { border-left: 3px solid var(--c-accent-3); }
.process-anim__chunk.accent-4, .process-anim__vector.accent-4 { border-left: 3px solid var(--c-accent-4); }

.process-anim__chunk-id,
.process-anim__vector-id {
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  color: var(--c-text-muted);
}
.process-anim__chunk-text { font-size: 11.5px; color: var(--c-text); line-height: 1.5; overflow-wrap: anywhere; }
.process-anim__vector-values {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-accent-1);
  overflow-wrap: anywhere;
}
/* stored vectors read as earned/green (settled in the index) */
.process-anim__vector[data-state="stored"] { border-left-color: var(--c-progress); }
.process-anim__vector[data-state="stored"] .process-anim__vector-values { color: var(--green-text); }

/* ---- timeline controls (timeline.js DOM: .timeline + .btn + scrub) ---- */
.process-anim__timeline,
.timeline { margin-top: var(--sp-3); }
.timeline__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.timeline .btn {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--c-heading);
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  min-height: 36px;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-1), border-color var(--dur-1) var(--ease-1);
}
.timeline .btn:hover { background: var(--c-surface-2); border-color: var(--c-accent-3); }
.timeline .btn:focus-visible { outline: var(--bw-2) solid var(--c-focus); outline-offset: 2px; }
.timeline__scrub { flex: 1 1 120px; min-width: 100px; accent-color: var(--c-progress); }
.timeline__scrub:focus-visible { outline: var(--bw-2) solid var(--c-focus); outline-offset: 2px; }
.timeline__track {
  flex: 1 1 100%;
  height: 6px;
  background: var(--c-surface-2);
  border-radius: 99px;
  overflow: hidden;
  margin-top: var(--sp-1);
}
.timeline__progress {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: var(--c-progress);
  transition: inline-size var(--dur-1) linear;
}
.timeline__caption {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--c-heading);
  line-height: 1.5;
  margin: var(--sp-2) 0 0;
  min-height: 18px;
}

/* ===========================================================
   EMBED DRILL CARD (rendered into the base.css .detail-panel shell)
   =========================================================== */
.detail-panel.embed-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 4;
  max-width: none;
  margin: 0;
  padding: var(--sp-3) 18px;
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}
/* drilldown-zoom toggles .zoomed on the stage when a card is open */
.embed-stage.zoomed > :not([data-slot="panel"]) { visibility: hidden; }

.embed-card__head { margin: 0 0 var(--sp-2); }
.embed-card__kicker { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-text-muted); margin: 0 0 4px; }
.embed-card__title { font-family: var(--font-body); font-size: var(--fs-3); margin: 0; color: var(--c-heading); font-weight: var(--fw-bold); }
.embed-card__title:focus, .embed-card__title:focus-visible { outline: none; }
.embed-card__note { font-family: var(--font-ui); font-size: 12.5px; color: var(--c-heading); line-height: 1.6; margin: 0 0 var(--sp-2); }
.embed-card__note b { color: var(--c-text); }
.embed-card__note code,
.embed-node .en-txt code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--c-surface-2);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 0 4px;
}

/* the 1:1 chunk -> vector rows */
.embed-rows { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0 0 var(--sp-2); }
.embed-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-bg);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.er-chunk { font-family: var(--font-body); font-size: 12px; color: var(--c-text); overflow-wrap: anywhere; }
.er-arrow { font-family: var(--font-mono); font-size: 13px; color: var(--c-accent-2); }
.er-vec { font-family: var(--font-mono); font-size: 11px; color: var(--green-text); overflow-wrap: anywhere; }
.er-vec b { color: var(--green-text); }

/* deeper (level-2) lens-plus target -- reuses the search-card pattern */
.embed-card .deeper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: var(--sp-1);
  border: var(--bw-1) dashed var(--c-border);
  border-radius: 4px;
  padding: 11px 12px;
  min-height: 44px;
  background: var(--c-bg);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-1), border-color var(--dur-1) var(--ease-1);
}
.embed-card .deeper:hover { background: var(--c-surface-2); border-color: var(--c-accent-3); }
.embed-card .deeper:focus-visible { outline: var(--bw-2) solid var(--c-focus); outline-offset: 2px; }
.embed-card .deeper .dlbl { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent-2); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.embed-card .deeper .dlbl .lens-plus { flex: 0 0 auto; display: block; }
.embed-card .deeper .dprev { font-family: var(--font-mono); font-size: 10.5px; color: var(--c-heading); overflow-wrap: anywhere; line-height: 1.5; }

/* ===========================================================
   RESPONSIVE -- hold at 390 AND 320. Stack the 3 columns vertically; keep
   tap targets (node / buttons / deeper) >= 44px.
   =========================================================== */
@media (max-width: 760px) {
  .process-anim__stage { grid-template-columns: 1fr; }
  .embed-row { grid-template-columns: 1fr; text-align: left; }
  .er-arrow { justify-self: start; }
}
@media (max-width: 420px) {
  .detail-panel.embed-card { padding: var(--sp-3) 13px; }
  .timeline .btn { padding: 8px 12px; min-height: 44px; }
}

/* reduced-motion: snap to settled end state over the SAME DOM */
@media (prefers-reduced-motion: reduce) {
  .process-anim__chunk,
  .process-anim__vector,
  .process-anim__doc-chunk,
  .timeline__progress { transition: none; }
  .process-anim__chunk,
  .process-anim__vector { opacity: 1; transform: none; }
}

/* ===========================================================
   CHAPTER PROSE (ported manuscript from content/ru/embedding.md).
   Structure + spacing only; color/space/motion via var(--...). Mirrored inside
   .no-js-only so the chapter reads complete with JavaScript off.
   =========================================================== */
.chapter-prose {
  max-width: 72ch;
  margin: var(--sp-4) auto 0;
  padding: 0 var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--c-text);
}
.chapter-prose > section { margin-top: var(--sp-4); }
.chapter-prose > section:first-child { margin-top: 0; }
.chapter-prose h2 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3);
  line-height: var(--lh-tight);
  color: var(--c-heading);
  margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: var(--bw-1) solid var(--c-border);
}
.chapter-prose h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2);
  color: var(--c-heading);
  margin: var(--sp-3) 0 var(--sp-1);
}
.chapter-prose p { margin: var(--sp-2) 0; }
.chapter-prose ul,
.chapter-prose ol { margin: var(--sp-2) 0; padding-left: 1.4em; }
.chapter-prose li { margin: var(--sp-1) 0; }
.chapter-prose a { color: var(--c-link); text-decoration: underline; text-underline-offset: 2px; }
.chapter-prose a:hover { color: var(--c-link-hover); }
.chapter-prose a:focus-visible { outline: var(--bw-2) solid var(--c-focus); outline-offset: 2px; }
.chapter-prose strong,
.chapter-prose b { font-weight: var(--fw-bold); color: var(--c-heading); }
.chapter-prose code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--c-accent-3-soft);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.34em;
}
.chapter-prose pre {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  background: var(--c-code-plate-bg);
  color: var(--c-code-plate-fg);
  border: var(--bw-1) solid var(--c-heading);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0;
  overflow: auto;
  white-space: pre;
}
.chapter-prose pre code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; }
.chapter-prose .sources,
.chapter-prose .about-recipe { font-size: var(--fs-1); }
.chapter-prose .sources a,
.chapter-prose .about-recipe a { word-break: break-word; overflow-wrap: anywhere; }
.chapter-prose .next-stop {
  border-left: 3px solid var(--c-accent-1);
  background: var(--c-accent-1-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
}

/* static no-JS schematic (flat doc -> chunks -> vectors) */
.no-js-only .embed-static {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--sp-1);
  align-items: center;
  margin: var(--sp-2) 0;
}
.no-js-only .es-col {
  background: var(--c-surface);
  border: var(--bw-1) solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--c-text);
}
.no-js-only .es-col h2 { font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); margin: 0 0 6px; }
.no-js-only .es-arrow { font-family: var(--font-mono); color: var(--c-accent-2); text-align: center; }
.no-js-only .es-vec { font-family: var(--font-mono); font-size: 10.5px; color: var(--green-text); }
.legend-hint { font-family: var(--font-ui); font-size: 12px; color: var(--c-text-muted); text-align: center; margin: var(--sp-2) 0; }

@media (max-width: 560px) {
  .chapter-prose { font-size: var(--fs-1); }
  .chapter-prose pre { font-size: 11.5px; }
  .no-js-only .embed-static { grid-template-columns: 1fr; }
  .no-js-only .es-arrow { transform: rotate(90deg); }
}