/* =============================================================================
   Components — the distinctive parts of the reference's "technical manual"
   language, rebuilt from the verified live DOM/CSS:
     · pixel-mono wordmark title       · dotted divider rules
     · dot-leader table of contents     · "current progress" widget
     · mono signup form                 · blueprint figure frame
     · rotated mono margin labels
   Rule of thumb: serif narrates, MONO labels everything, cobalt is the only
   accent, every hover goes to cobalt.
   ============================================================================= */

/* ---- Wordmark (the masthead title) -------------------------------------- */
.wordmark {
  font-family: var(--font-display);       /* display font = Kyrios */
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 3.75rem);
  line-height: .92;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin: 0;
}

/* ---- Mono "technical voice" everywhere ---------------------------------- */
.mono, .eyebrow, .label, .site-nav, .site-footer, .toc, .progress, .signup, figcaption, .margin-label {
  font-family: var(--font-mono);
}
.eyebrow, .label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--color-black) 50%, transparent);  /* text-black/50 */
}
a:hover, .toc-row:hover, .hover-cobalt:hover { color: var(--cobalt); }

/* ---- Dotted divider rule ------------------------------------------------ */
/* Reference draws an SVG dot-pattern; this is the CSS equivalent: a row of
   evenly-spaced dots in current ink. */
.rule-dotted {
  height: 14px;
  border: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1.5px);
  background-size: 14px 14px;
  background-position: 0 center;
  background-repeat: repeat-x;
  color: color-mix(in srgb, var(--color-black) 35%, transparent);
  margin: 2.5rem 0;
}
/* dashed variant for figure/guide lines */
.rule-dashed { border: 0; border-top: 1px dashed color-mix(in srgb, var(--color-black) 40%, transparent); margin: 2rem 0; }

/* Centered chapter marker: dashed — LABEL — dashed */
.chapter-marker {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--color-black) 50%, transparent);
}
.chapter-marker::before, .chapter-marker::after {
  content: ""; border-top: 1px dashed color-mix(in srgb, var(--color-black) 30%, transparent);
}

/* ---- Table of contents (dot leaders) ------------------------------------ */
.toc { columns: 3; column-gap: 3rem; font-size: var(--text-sm); }
@media (max-width: 60rem) { .toc { columns: 1; } }
.toc-group { break-inside: avoid; margin-bottom: 2rem; }
.toc-group h4 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-color); margin: 0 0 .6rem; }
.toc-row {
  display: grid;
  grid-template-columns: auto 1fr auto;   /* title · leader · page */
  align-items: baseline;
  gap: .4rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: .15rem 0;
  line-height: 1.6;
}
.toc-row .leader { border-bottom: 1px dotted color-mix(in srgb, var(--color-black) 35%, transparent); transform: translateY(-.2em); }
.toc-row .page { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); }
.toc-row:hover { color: var(--cobalt); }
.toc-row:hover .leader { border-bottom-color: var(--cobalt); }

/* ---- "Current progress" widget ------------------------------------------ */
.progress { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; border: 1px solid var(--rule-color); border-radius: var(--radius-sm); }
.progress-head { display:flex; justify-content:space-between; align-items:center; padding:.5rem .75rem; border-bottom:1px solid var(--color-black); }
.progress-row { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .75rem; padding: .55rem .75rem; border-bottom: 1px solid var(--rule-color); }
.progress-row:last-child { border-bottom: 0; }
.bar { height: 8px; background: var(--ink-fill-2); border-radius: 2px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--cobalt); }

/* ---- Mailing-list signup ------------------------------------------------ */
.signup { display: grid; gap: .5rem; max-width: 22rem; }
.signup label { font-size: var(--text-xs); text-transform: uppercase; color: var(--text-faint); letter-spacing: .05em; }
.signup-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.signup input {
  height: 1.9rem; padding: 0 .5rem;
  font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; color: var(--text-color);
  background: var(--background);
  border: 1px solid color-mix(in srgb, var(--color-black) 50%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.10);
}
.signup input::placeholder { color: color-mix(in srgb, var(--color-black) 30%, transparent); }
.signup input:focus { outline: 1px solid var(--cobalt); color: var(--cobalt); }
.signup button {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em;
  padding: 0 .8rem; cursor: pointer; color: var(--background); background: var(--cobalt);
  border: 0; border-radius: var(--radius-sm);
}

/* ---- Blueprint figure frame --------------------------------------------- */
/*  Figures obey the spec in docs/infographics-spec.md:
     monochrome paper + one accent colour + flat tints + black ink,
     one stroke weight, dashed guides, ≤6 callouts, A5 motion only.
     Every asset is reduced into this world, not pasted on top.  */
.blueprint { display: block; width: 100%; height: auto; }

/*  Strokes — structure in cobalt (accent), guides dashed & muted  */
.blueprint [data-stroke] { stroke: var(--cobalt); fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.blueprint [data-guide]  { stroke: var(--cobalt); fill: none; stroke-width: 1; stroke-dasharray: 4 4; opacity: .55; }

/*  Flat tint fills — no gradients  */
.blueprint [data-fill="1"] { fill: var(--ink-fill-1); }
.blueprint [data-fill="2"] { fill: var(--ink-fill-2); }
.blueprint [data-fill="3"] { fill: var(--ink-fill-3); }   /* A1: protagonist coin body  */
.blueprint [data-fill="4"] { fill: var(--ink-fill-4); }
.blueprint [data-fill="p"] { fill: var(--ink-fill-p); }   /* A1: SSR / emphasis badge   */
.blueprint [data-fill="w"] { fill: var(--color-white); }  /* A2: specimen card paper    */

/*  Labels — mono/dev voice, uppercase, muted  */
.callout { font-family: var(--font-mono); font-size: 12px; letter-spacing: -.01em; fill: var(--text-muted); }

/*  Protagonist accent — ONLY the coins and the moving capital  */
.blueprint .accent-fill  { fill: var(--accent); }     /* A1: coin glyph             */
.blueprint .accent-stroke { stroke: var(--accent); } /* A1: coin ring              */
.blueprint .specimen     { color: var(--text-color); } /* A2: logo ink (black)       */
.blueprint .specimen-accent { color: var(--accent); }
.blueprint .index-label  { font-family: var(--font-mono); font-size: 10px; fill: var(--text-faint); }

/*  Yield source labels  */
.blueprint .ys { font-family: var(--font-body); font-size: 14px; fill: var(--text-muted); }
.blueprint .ys.active { fill: var(--text-muted); }  /* keep all sources same muted tone */

/*  SSR badge — light purple bg, white text, accent spinner  */
.blueprint .rate { font-family: var(--font-display); font-weight: 500; font-size: 22px; fill: var(--text-color); }

/*  Moving capital — accent dots  */
.blueprint .flow-dot     { fill: var(--accent); }
.blueprint .flow-dot.alt { fill: var(--accent-2); }

/*  Wire hierarchy: solid spine, dashed branches  */
.blueprint .wire.spine[data-stroke] { stroke-width: 2; opacity: 1; }
.blueprint .wire.branch[data-guide] { stroke-width: 1.5; opacity: .65; }

.skyflow .wire { stroke-width: 1.5; }
.figure-blueprint { margin: 2rem 0; }
.figure-blueprint figcaption { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-top: .6rem; }

/* ---- Rotated mono margin label ------------------------------------------ */
.margin-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: color-mix(in srgb, var(--color-black) 45%, transparent);
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
}

/* ---- Drop cap (the editorial intro) ------------------------------------- */
.dropcap::first-letter {
  float: left; font-family: var(--font-serif); font-size: 3.4em; line-height: .8;
  padding: .05em .12em 0 0; color: var(--text-color);
}