/* tkal earnings deep-dive components (2026-10-31).
   Linked by every new /earnings/ page after styles.css. Markup reference:
   Scheduled/tkal-earnings-autorecap/ed-components.html. Uses the tokens in styles.css. */

/* ---------- The numbers: headline tiles ---------- */
.ed-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--color-rule);
  border:1px solid var(--color-rule); margin:8px 0 22px; max-width:68ch; }
.ed-tile { background:var(--color-paper); padding:14px 14px 12px; }
.ed-tile .k { font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--color-ink-3); }
.ed-tile .v { font-family:var(--font-display); font-size:30px; font-weight:500; line-height:1.1;
  color:var(--color-ink); margin:6px 0 4px; }
.ed-tile .v small { font-size:15px; color:var(--color-ink-3); }
.ed-tile .d { font-family:var(--font-mono); font-size:11.5px; color:var(--color-ink-2); }
.ed-tile.hl { background:var(--color-accent-soft); }
.ed-tile.hl .k { color:var(--color-accent); }
.ed-up, .ed-tile .d.ed-up, .ed-node .st.ed-up { color:var(--color-pos); }
.ed-dn, .ed-tile .d.ed-dn, .ed-node .st.ed-dn { color:var(--color-neg); }

/* ---------- The numbers: grouped, aligned table ---------- */
.ed-vt-cap { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--color-ink-3); margin:0 0 8px; }
table.ed-vt { width:100%; max-width:68ch; border-collapse:collapse; font-size:13px; margin:0 0 10px; }
.ed-vt th { font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--color-ink-3); font-weight:500; text-align:right; padding:0 8px 8px;
  border-bottom:1px solid var(--color-ink); }
.ed-vt th:first-child { text-align:left; padding-left:0; }
.ed-vt td { padding:7px 8px; border-bottom:1px solid var(--color-rule); text-align:right;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--color-ink-2); }
.ed-vt td:first-child { text-align:left; padding-left:0; font-family:var(--font-body); color:var(--color-ink); }
.ed-vt td.cur { color:var(--color-ink); font-weight:500; background:#FAF7EF; }
.ed-vt td.sub { padding-left:14px; }
.ed-vt tr.grp td { font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--color-accent); border-bottom:none; padding-top:16px; background:none; }
.ed-bar { display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; width:100%; }
.ed-bar i { display:inline-block; height:7px; background:var(--color-pos); opacity:0.7; border-radius:1px; }
.ed-bar i.n { background:var(--color-neg); }
.ed-bar i.over { background:repeating-linear-gradient(90deg,var(--color-pos) 0 6px,transparent 6px 8px); }
.ed-src { font-size:11.5px; color:var(--color-ink-3); margin:0 0 22px; max-width:68ch; }
.ed-src a { color:var(--color-ink-3); }

/* ---------- Connecting the dots: flag cards ---------- */
.ed-flags { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 22px; max-width:68ch; }
.ed-flag { border:1px solid var(--color-rule); border-left:3px solid var(--color-neg); padding:12px 14px;
  background:var(--color-paper); }
.ed-flag.am { border-left-color:#A66A12; }
.ed-flag .t { font-size:12.5px; color:var(--color-ink-3); margin:0 0 4px; }
.ed-flag .v { font-family:var(--font-display); font-size:28px; line-height:1; color:var(--color-ink); }
.ed-flag .v small { font-family:var(--font-mono); font-size:11.5px; color:var(--color-ink-3); margin-left:6px; }
.ed-flag .so { font-size:12.5px; color:var(--color-ink-2); margin:8px 0 0; line-height:1.4; }
.ed-pill { display:inline-block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.1em;
  text-transform:uppercase; padding:2px 6px; border-radius:2px; margin-left:6px; vertical-align:middle; }
.ed-pill.r { background:#F3E1DE; color:var(--color-neg); }
.ed-pill.a { background:#F5E8D0; color:#A66A12; }
.ed-pill.g { background:#E2ECE2; color:var(--color-pos); }

/* ---------- Connecting the dots: range rails ---------- */
.ed-rails { max-width:68ch; margin:0 0 10px; }
.ed-rail { display:grid; grid-template-columns:200px 1fr 70px; gap:14px; align-items:center; padding:9px 0 14px;
  border-bottom:1px solid var(--color-rule); font-size:13px; color:var(--color-ink); }
.ed-rail .tr { position:relative; height:18px; }
.ed-rail .tr::before { content:""; position:absolute; left:0; right:0; top:5px; height:8px;
  background:#E7E2D3; border-radius:4px; }
.ed-rail .dot { position:absolute; top:3px; width:12px; height:12px; border-radius:50%; background:var(--color-ink);
  transform:translateX(-50%); border:2px solid #fff; box-shadow:0 0 0 1px var(--color-ink); }
.ed-rail .lo, .ed-rail .hi { position:absolute; top:18px; font-family:var(--font-mono); font-size:9.5px;
  color:var(--color-ink-3); }
.ed-rail .lo { left:0; } .ed-rail .hi { right:0; }
.ed-rail .val { font-family:var(--font-mono); text-align:right; }
.ed-gap { font-size:12.5px; color:var(--color-ink-3); margin:12px 0 22px; max-width:68ch; }

/* ---------- Connecting the dots: call cards ---------- */
.ed-call { border:1px solid var(--color-callout-bd); background:var(--color-callout-bg); padding:16px 18px;
  margin:16px 0 0; max-width:68ch; }
.ed-call .hd { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 0 8px; }
.ed-call .nm { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--color-editorial); }
.ed-call .conf { font-family:var(--font-mono); font-size:10.5px; color:var(--color-ink-3); white-space:nowrap; }
.ed-call .conf b { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--color-editorial);
  margin-left:3px; vertical-align:middle; }
.ed-call .conf b.o { background:none; border:1px solid var(--color-editorial); }
.ed-body .ed-call p.rd, .ed-call .rd { font-family:var(--font-display); font-size:20px; line-height:1.3;
  color:var(--color-ink); margin:0 0 10px; }
.ed-call .rd .unverified { display:inline; font:inherit; font-size:inherit; letter-spacing:0; text-transform:none;
  background:none; border:none; padding:0; color:inherit; text-decoration:underline dotted var(--color-callout-bd);
  text-underline-offset:4px; }
.ed-call:last-of-type { margin-bottom:28px; }
.ed-call dl { display:grid; grid-template-columns:80px 1fr; gap:4px 10px; margin:0; font-size:13.5px; line-height:1.45; }
.ed-call dt { font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--color-ink-3); padding-top:2px; }
.ed-call dd { margin:0; color:var(--color-ink-2); }
.ed-call dd.w { color:var(--color-neg); }

/* ---------- The rope: chain diagram ---------- */
.ed-rope { max-width:68ch; margin:8px 0 26px; }
.ed-lane { margin:0 0 18px; }
.ed-lane-h { font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--color-ink-3); margin:0 0 8px; }
.ed-lane-h.p { color:var(--color-pos); }
.ed-lane-h.n { color:var(--color-neg); }
.ed-chain { display:grid; grid-template-columns:1fr 18px 1fr 18px 1fr; align-items:stretch; }
.ed-chain.c2 { grid-template-columns:1fr 18px 1fr; }
.ed-node { border:1px solid var(--color-rule); background:var(--color-paper); padding:10px 11px;
  font-size:12.5px; line-height:1.35; color:var(--color-ink-2); }
.ed-node a { color:var(--color-ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--color-callout-bd); }
.ed-node .st { font-family:var(--font-mono); font-size:12px; margin:5px 0 3px; color:var(--color-ink); }
.ed-node .so { color:var(--color-ink-3); font-size:11.5px; }
.ed-node.self { border:1.5px solid var(--color-ink); background:#fff; }
.ed-arr { display:flex; align-items:center; justify-content:center; color:var(--color-ink-3); font-size:14px; }
.ed-rope-foot { display:flex; gap:18px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px;
  color:var(--color-ink-2); border-top:1px solid var(--color-rule); padding-top:10px; margin-top:6px; }
.ed-rope-foot b { color:var(--color-accent); font-weight:500; }

/* .ed-body p / li set 17px body type; keep component text at component size */
.ed-body p.ed-vt-cap { font-family:var(--font-mono); font-size:10.5px; line-height:1.4; color:var(--color-ink-3); margin:0 0 8px; }
.ed-body p.ed-src { font-size:11.5px; line-height:1.45; color:var(--color-ink-3); margin:0 0 22px; }
.ed-body p.ed-gap { font-size:12.5px; line-height:1.45; color:var(--color-ink-3); margin:12px 0 22px; }
.ed-body .ed-flag p.so { font-size:12.5px; line-height:1.4; color:var(--color-ink-2); margin:8px 0 0; }

@media (max-width:640px) {
  .ed-tiles { grid-template-columns:repeat(2,1fr); }
  .ed-tile .v { font-size:25px; }
  .ed-vt .hide-m { display:none; }
  .ed-flags { grid-template-columns:1fr; }
  .ed-rail { grid-template-columns:110px 1fr 58px; gap:10px; }
  .ed-chain, .ed-chain.c2 { grid-template-columns:1fr; }
  .ed-arr { transform:rotate(90deg); height:18px; }
}