/* Envi · Method page. Extends the Atmos system in styles.css — same glass
   panels, ink, and type. This file only lays out the technical document;
   tokens, nav, chips, footer, and the view-counter chip all come from
   styles.css. */

.technical-page main { display: block; width: 100%; max-width: 900px; margin: 0 auto; }

/* ---------- Section index: sticky glass rail under the nav ---------- */
.technical-index {
  position: sticky; top: 14px; z-index: 30;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px;
  margin-top: 26px; padding: 12px 22px;
  border-radius: 999px; border: 1px solid var(--glass-line);
  background: var(--glass); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.technical-index p {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.technical-index a { padding: 4px 0; color: var(--ink-dim); font-size: 13.5px; text-decoration: none; }
.technical-index a:hover { color: var(--ink); }
.technical-index a span { margin-right: 5px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }

/* ---------- Document ---------- */
.doc-hero { padding: 54px 6px 6px; }
.doc-hero h1 {
  max-width: 22ch; margin-top: 10px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1.04; letter-spacing: -0.01em;
}
.doc-hero > p { max-width: 64ch; margin-top: 18px; color: var(--ink-dim); line-height: 1.65; }

.eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}

.doc-section {
  margin-top: 26px; padding: 28px 30px; scroll-margin-top: 92px;
  border-radius: 28px; border: 1px solid var(--glass-line);
  background: var(--glass); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.doc-section h2 {
  margin-top: 8px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.005em;
}
.doc-body { display: grid; gap: 16px; margin-top: 16px; }
.doc-body p, .doc-body li { color: var(--ink-dim); line-height: 1.65; }
.doc-body ul { display: grid; gap: 10px; padding-left: 20px; }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body code {
  padding: 1px 6px; border-radius: 6px;
  border: 1px solid var(--glass-line); background: var(--glass-soft);
  font-family: var(--font-mono); font-size: 0.82em;
}

/* Code plates and the scrollable table region share .doc-code. */
.doc-code {
  padding: 18px 20px; overflow-x: auto;
  border-radius: 18px; border: 1px solid var(--glass-line);
  background: var(--field-bg);
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.75;
  color: var(--ink-dim);
}
pre.doc-code code { padding: 0; border: 0; background: none; font-size: inherit; }
.tok-c { color: var(--ink-faint); }
.tok-k { color: var(--accent); }
.tok-f { color: var(--tier-0); }
.tok-n { color: var(--tier-2); }
.tok-s { color: var(--tier-1); }

.spec-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 11.5px; }
.spec-table th, .spec-table td {
  padding: 10px 16px 10px 0; border-bottom: 1px solid var(--glass-line);
  text-align: left; vertical-align: top;
}
.spec-table th {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.spec-table td { line-height: 1.6; }

.doc-note {
  padding: 16px 18px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--ink-dim); line-height: 1.6;
}
.doc-note strong { color: var(--ink); }

/* ---------- Diagram figures ----------
   Inline SVG schematics. Every paint comes from the Atmos tokens, so the
   figures flip with the theme for free. Masks under labels and boxes are
   painted with --figure-bg (opaque) so connectors never bleed through. */
.doc-figure {
  --figure-bg: #0e1720;
  --figure-zone: rgba(255, 255, 255, 0.035);
  padding: 18px 20px; overflow-x: auto;
  border-radius: 18px; border: 1px solid var(--glass-line);
  background: var(--figure-bg);
}
[data-theme-effective="light"] .doc-figure { --figure-bg: #e7eef4; --figure-zone: rgba(15, 35, 55, 0.05); }
.doc-figure svg { display: block; width: 100%; min-width: 540px; height: auto; }

.dg-mask { fill: var(--figure-bg); }
.dg-zone { fill: var(--figure-zone); stroke: var(--glass-line); stroke-width: 0.8; stroke-dasharray: 5 4; }
.dg-rule { stroke: var(--glass-line); stroke-width: 0.8; }

.dg-box { fill: var(--glass-soft); stroke: var(--glass-line); stroke-width: 1; }
.dg-box.is-opt { stroke-dasharray: 4 3; }
.dg-box.is-focal { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: var(--accent); }
.dg-chip { fill: none; stroke: var(--glass-line); stroke-width: 0.8; }

.dg-name { fill: var(--ink); font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.dg-sub, .dg-tag, .dg-lab { font-family: var(--font-mono); fill: var(--ink-faint); }
.dg-sub { font-size: 9.5px; }
.dg-tag { font-size: 8px; letter-spacing: 0.08em; }
.dg-lab { font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.dg-lab.is-blocked { fill: var(--tier-4); }
.dg-key { fill: var(--ink-dim); font-family: var(--font-body); font-size: 10.5px; }

.dg-flow { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; }
.dg-flow.is-opt { stroke-width: 1; stroke-dasharray: 4 3; }
.dg-flow.is-accent { stroke: var(--accent); }
.dg-flow.is-blocked { stroke: var(--tier-4); stroke-width: 1; stroke-dasharray: 4 3; }
.dg-bar { stroke: var(--tier-4); stroke-width: 2; }
.dg-head { fill: var(--ink-faint); }
.dg-head.is-accent { fill: var(--accent); }

.dg-t0 { fill: var(--tier-0); }
.dg-t1 { fill: var(--tier-1); }
.dg-t2 { fill: var(--tier-2); }
.dg-t3 { fill: var(--tier-3); }
.dg-t4 { fill: var(--tier-4); }

/* Tier legend: dots use the shared tier palette, so themes flip for free */
.tier-legend {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  border-color: var(--glass-line); background: var(--glass-soft);
}
.tier-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.tier-pill i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--tier-color, var(--ink-faint)); }
.tier-pill[data-t="0"] { --tier-color: var(--tier-0); }
.tier-pill[data-t="1"] { --tier-color: var(--tier-1); }
.tier-pill[data-t="2"] { --tier-color: var(--tier-2); }
.tier-pill[data-t="3"] { --tier-color: var(--tier-3); }
.tier-pill[data-t="4"] { --tier-color: var(--tier-4); }

/* Footer additions on top of .site-foot */
.tech-foot { scroll-margin-top: 92px; }
.tech-foot strong { display: block; color: var(--ink-dim); }

@media (max-width: 640px) {
  .technical-index { position: static; border-radius: 24px; }
  .doc-section { padding: 22px 20px; }
  .doc-hero { padding-top: 40px; }
}