/* ============================================================================
   infographic.css — shared design-system atoms for the Flynn one-pager
   infographics (flynn-overview, flynn-overview-bd, why-flynn, case-for-flynn).

   Holds ONLY the rules that are byte-identical across those artifacts (timeline,
   ticker, masthead atoms, section-title accents, footer atoms, the energized
   divider + reduced-motion guard, print color-adjust). Each artifact keeps its
   own tuned/section-specific CSS inline. Generated by measuring identical rules
   — see docs/TECH-DEBT.md (TD-1).
   ========================================================================== */

* { box-sizing: border-box; }

.pad { padding: 0 72px; }

.sline { flex: 1; height: 1px;
    background:
      linear-gradient(90deg, transparent 0%, var(--cyan) 50%, transparent 100%) no-repeat,
      rgba(71,216,255,0.14);
    background-size: 26% 100%, 100% 100%;
    background-position: 50% 0, 0 0;
    box-shadow: 0 0 8px rgba(71,216,255,0.24);
  }

@media (prefers-reduced-motion: no-preference) {
    .sline { animation: traceRun 7s linear infinite; }
    .block:nth-of-type(even) .sline { animation-duration: 9s; animation-delay: -3s; }
  }

@keyframes traceRun {
    from { background-position: -30% 0, 0 0; }
    to   { background-position: 130% 0, 0 0; }
  }

.stitle .accent { color: var(--cyan); }

.stitle .hot { color: var(--orange); }

.sbody strong { color: var(--text); font-weight: 600; }

.ticker b { color: var(--cyan); font-weight: 600; }

.ticker .tk-sep { width: 5px; height: 5px; background: var(--orange); transform: rotate(45deg);
    box-shadow: 0 0 7px var(--orange); flex: 0 0 auto; }

.mast-brand { display: flex; align-items: center; gap: 14px; }

.mast-brand .pw b { color: var(--text); font-weight: 600; }

.mast-meta { text-align: right; font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); line-height: 1.7; }

.wordmark {
    font-family: var(--display); font-weight: 800; font-size: 92px; letter-spacing: 0.02em;
    line-height: 0.92; margin: 0; color: var(--text);
    text-shadow: 0 0 40px rgba(71,216,255,0.35);
  }

.wordmark .dot { color: var(--cyan); }

.lede {
    font-size: 25px; font-weight: 500; line-height: 1.34; letter-spacing: -0.01em;
    margin: 24px 0 0; color: var(--text); max-width: 42ch; text-wrap: balance;
  }

.lede .accent { color: var(--cyan); }

.definition {
    font-size: 16.5px; line-height: 1.62; color: var(--muted); margin: 20px 0 0; max-width: 72ch;
  }

.definition b { color: var(--text); font-weight: 600; }

.vitals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.vital {
    font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--text);
    border: 1px solid var(--hair); border-radius: 5px; padding: 8px 13px;
    background: rgba(71,216,255,0.04); white-space: nowrap;
  }

.vital b { color: var(--cyan); font-weight: 600; }

.ctable thead th { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
    text-transform: uppercase; border-bottom: 1px solid var(--hair); }

.ctable tbody tr { border-bottom: 1px solid var(--hair-soft); }

.tl-head .tt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.tl-head .tg { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--orange); font-weight: 600; white-space: nowrap; }

.tl-track { position: relative; height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--orange)); margin: 46px 0 30px; }

.tl-mark { position: absolute; top: 50%; transform: translate(-50%, -50%); }

.tl-mark .pt { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); }

.tl-mark.start .pt { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

.tl-mark.end .pt { background: var(--orange); box-shadow: 0 0 12px var(--orange); }

.tl-mark .lab { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
    top: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); text-align: center; }

.tl-mark .day { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
    bottom: 20px; font-size: 12.5px; font-weight: 700; }

.tl-mark.start .day { color: var(--cyan); }

.tl-mark.end .day { color: var(--orange); }

.tl-mark.mid .pt { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

.tl-mark.mid .day { color: var(--cyan); }

.tl-mark.start .lab, .tl-mark.start .day { left: 0; transform: none; text-align: left; }

.tl-mark.end .lab, .tl-mark.end .day { left: auto; right: 0; transform: none; text-align: right; }

.foot-tag .accent { color: var(--cyan); }

.foot-cta .arr { color: var(--cyan); }

.foot-cta .url { font-family: var(--mono); color: var(--cyan); letter-spacing: 0.04em; }

.foot-meta { display: flex; align-items: center; gap: 16px; margin-top: 26px;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }

.foot-meta .sep { color: var(--hair); }