/* IVDNI engineering case study — scoped styles for /work/ivdni/.
   Uses the shared GALOK tokens (assets/galok-tokens.css) and plate layer
   (assets/galok-plate.css). Frame (框) is the page lens: an engineering case
   is a chosen boundary around a system. New code uses --g-* tokens only. */

.iv-page {
  background: var(--g-bg);
  color: var(--g-ink);
  font-family: var(--g-font-sans);
  line-height: var(--g-lh-body);
  margin: 0;
  padding-bottom: var(--g-s9);
  scroll-padding-bottom: 96px;
}

/* ---------- skip link ---------- */
.iv-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--g-surface);
  color: var(--g-ink);
  padding: var(--g-s3) var(--g-s4);
  border: 1px solid var(--g-rule-strong);
  z-index: 100;
}
.iv-skip:focus { left: var(--g-s3); top: var(--g-s3); }

/* ---------- flat header dock: solid ground, 1px rule, no blur, no shadow ---------- */
.iv-header {
  display: flex;
  align-items: center;
  gap: var(--g-s5);
  min-height: 56px;
  padding: var(--g-s2) var(--g-gutter);
  background: var(--g-surface);
  border-bottom: 1px solid var(--g-rule);
  flex-wrap: wrap;
}
.iv-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--g-s2);
  color: var(--g-ink);
  text-decoration: none;
  font-size: var(--g-t-small);
  min-height: 44px;
}
.iv-brand strong { letter-spacing: .06em; }
.iv-brand-sep { color: var(--g-muted); }
.iv-nav {
  display: flex;
  align-items: center;
  gap: var(--g-s4);
  flex-wrap: wrap;
}
.iv-nav a {
  color: var(--g-ink-2);
  text-decoration: none;
  font-size: var(--g-t-small);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.iv-nav a:hover { color: var(--g-frame-text); text-decoration: underline; text-underline-offset: 3px; }
.iv-back {
  margin-left: auto;
  color: var(--g-ink-2);
  text-decoration: none;
  font-size: var(--g-t-small);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.iv-back:hover { color: var(--g-frame-text); }

/* ---------- layout ---------- */
.iv-main {
  width: min(920px, calc(100% - var(--g-gutter) * 2));
  margin: 0 auto;
}
.iv-section {
  padding: var(--g-s8) 0;
  border-bottom: 1px solid var(--g-rule);
}
.iv-section:last-of-type { border-bottom: 0; }

/* ---------- hero ---------- */
.iv-hero { padding: var(--g-s9) 0 var(--g-s7); }
.iv-kicker {
  font-family: var(--g-font-mono);
  font-size: var(--g-t-label);
  letter-spacing: var(--g-track-label);
  text-transform: uppercase;
  color: var(--g-frame-text);
  margin: 0 0 var(--g-s4);
}
.iv-title {
  font-size: var(--g-t-h1);
  line-height: var(--g-lh-head);
  letter-spacing: -0.01em;
  margin: 0 0 var(--g-s5);
  text-wrap: balance;
}
.iv-lede {
  font-size: var(--g-t-lede);
  line-height: var(--g-lh-body);
  color: var(--g-ink-2);
  max-width: 46em;
  margin: 0 0 var(--g-s6);
}
.iv-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--g-rule);
  border: 1px solid var(--g-rule);
  margin: 0 0 var(--g-s4);
}
.iv-facts > div { background: var(--g-surface); padding: var(--g-s3) var(--g-s4); }
.iv-facts dt {
  font-family: var(--g-font-mono);
  font-size: var(--g-t-label);
  letter-spacing: var(--g-track-label);
  text-transform: uppercase;
  color: var(--g-muted);
}
.iv-facts dd { margin: var(--g-s1) 0 0; font-size: var(--g-t-small); font-weight: 600; }
.iv-hero-note {
  font-size: var(--g-t-small);
  color: var(--g-muted);
  margin: 0;
}

/* ---------- sections ---------- */
.iv-label {
  font-family: var(--g-font-mono);
  font-size: var(--g-t-label);
  letter-spacing: var(--g-track-label);
  text-transform: uppercase;
  color: var(--g-frame-text);
  margin: 0 0 var(--g-s3);
}
.iv-h2 {
  font-size: var(--g-t-h2);
  line-height: var(--g-lh-head);
  letter-spacing: -0.01em;
  margin: 0 0 var(--g-s5);
  text-wrap: balance;
}
.iv-h3 {
  font-size: var(--g-t-h3);
  line-height: var(--g-lh-head);
  margin: var(--g-s6) 0 var(--g-s3);
}
.iv-prose { max-width: 66em; }
.iv-prose p { margin: 0 0 var(--g-s4); font-size: var(--g-t-body); }
.iv-prose strong { color: var(--g-ink); }
.iv-code {
  font-family: var(--g-font-mono);
  font-size: var(--g-t-small);
  background: var(--g-soft);
  padding: 0 var(--g-s1);
}
.iv-evidence {
  margin: var(--g-s5) 0 0;
  font-family: var(--g-font-mono);
  font-size: var(--g-t-label);
  letter-spacing: var(--g-track-label);
  text-transform: uppercase;
  color: var(--g-muted);
}

/* ---------- figures: scroll on small screens, never clipped ---------- */
.iv-figure {
  margin: var(--g-s6) 0 0;
  border: 1px solid var(--g-rule);
  background: var(--g-surface);
}
.iv-figure-cap {
  display: flex;
  justify-content: space-between;
  gap: var(--g-s3);
  flex-wrap: wrap;
  padding: var(--g-s3) var(--g-s4);
  border-bottom: 1px solid var(--g-rule);
  font-family: var(--g-font-mono);
  font-size: var(--g-t-label);
  letter-spacing: var(--g-track-label);
  text-transform: uppercase;
  color: var(--g-muted);
}
.iv-figure-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--g-s3);
}
.iv-svg { display: block; width: 100%; height: auto; min-width: 760px; }

/* svg text */
.ivs-h { font-family: var(--g-font-mono); font-size: 13px; font-weight: 700; fill: var(--g-ink); letter-spacing: .04em; }
.ivs-strong { font-family: var(--g-font-sans); font-size: 13px; font-weight: 600; fill: var(--g-ink); }
.ivs-label { font-family: var(--g-font-mono); font-size: 11px; letter-spacing: .06em; fill: var(--g-ink); }
.ivs-mono { font-family: var(--g-font-mono); font-size: 11px; fill: var(--g-ink-2); }

/* ---------- roadmap table ---------- */
.iv-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--g-s6) 0 0;
  border: 1px solid var(--g-rule);
  background: var(--g-surface);
}
.iv-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--g-t-small);
}
.iv-table th, .iv-table td {
  text-align: left;
  padding: var(--g-s3) var(--g-s3);
  border-bottom: 1px solid var(--g-rule);
  vertical-align: top;
}
.iv-table th {
  font-family: var(--g-font-mono);
  font-size: var(--g-t-label);
  letter-spacing: var(--g-track-label);
  text-transform: uppercase;
  color: var(--g-muted);
  font-weight: 400;
}
.iv-table td:last-child, .iv-table th:last-child { white-space: nowrap; }
.iv-mono { font-family: var(--g-font-mono); font-size: var(--g-t-label); color: var(--g-muted); white-space: nowrap; }
.iv-tag {
  display: inline-block;
  font-family: var(--g-font-mono);
  font-size: var(--g-t-label);
  letter-spacing: var(--g-track-label);
  text-transform: uppercase;
  padding: 2px var(--g-s2);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.iv-tag-shipped { color: var(--g-frame-text); }
.iv-tag-experimental { color: var(--g-observe-text); }
.iv-tag-review { color: var(--g-view-text); }
.iv-tag-planned { color: var(--g-muted); }

/* ---------- links & footer ---------- */
.iv-inline-link { color: var(--g-frame-text); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.iv-footer {
  border-top: 1px solid var(--g-rule);
  padding: var(--g-s6) var(--g-gutter) var(--g-s8);
  font-size: var(--g-t-small);
  color: var(--g-muted);
}
.iv-footer a { color: var(--g-frame-text); }

/* ---------- focus visibility (brand contract) ---------- */
.iv-page a:focus-visible,
.iv-page [tabindex="0"]:focus-visible {
  outline: 2px solid var(--g-frame-text);
  outline-offset: 2px;
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .iv-header { gap: var(--g-s3); padding: var(--g-s2) var(--g-s4); }
  .iv-back { margin-left: 0; }
  .iv-hero { padding: var(--g-s7) 0 var(--g-s6); }
  .iv-section { padding: var(--g-s7) 0; }
  .iv-figure-scroll { position: relative; }
  .iv-figure-scroll::after {
    content: "scroll →";
    position: sticky;
    display: block;
    text-align: right;
    bottom: 0;
    font-family: var(--g-font-mono);
    font-size: var(--g-t-label);
    color: var(--g-frame-text);
    padding-top: var(--g-s2);
  }
}
@media (min-width: 721px) {
  .iv-figure-scroll::after { content: none; }
}