/* ============================================================================
   method-diagram.css — "The Line" method diagram, shown in the #make-method
   homepage popup (EN: index.html, ES: es/index.html).

   Cotton Candy Parlor styling (hard-offset shadows, sticker headline, mono
   labels). Every selector is prefixed `.tl-*` and the colour tokens are scoped
   to `.tl-diagram`, so this file neither leaks into the page nor is touched by
   the page's own rules. Reuses the page's font/ink tokens (--display / --mono /
   --body / --ink / --ink-soft), defines the candy colours locally.
   ============================================================================ */

.tl-diagram{
  --cherry:#ff3b6b; --mint:#5fd4c4; --sky:#5fb8ff; --butter:#ffd84d; --grape:#a96bff; --pink:#ff5fa2;
  --tl-paper:#fffaf0;
  position:relative; font-family:var(--body); color:var(--ink); text-align:left;
}
.tl-diagram *{ box-sizing:border-box; }

.tl-head{ text-align:center; margin-bottom:22px; }
.tl-sticker{ display:inline-block; font-family:var(--display); font-weight:700; font-size:30px;
  letter-spacing:-.01em; background:var(--cherry); color:var(--tl-paper); padding:5px 16px 7px;
  border:2.5px solid var(--ink); border-radius:12px; box-shadow:5px 5px 0 var(--ink); transform:rotate(-2deg); margin:0; }
.tl-tagline{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); margin-top:14px; }

.tl-acts{ display:flex; align-items:stretch; gap:12px; flex-wrap:wrap; justify-content:center; }
.tl-act{ flex:1 1 200px; min-width:0; }
.tl-act.tl-bonfire{ flex:1.3 1 240px; }
.tl-card{ background:var(--tl-paper); border:2.5px solid var(--ink); border-radius:12px;
  box-shadow:4px 4px 0 var(--ink); padding:15px 15px 13px; height:100%; }
.tl-ic{ display:flex; align-items:center; gap:10px; }
.tl-ic svg{ flex:0 0 auto; }
.tl-card h4{ font-family:var(--display); font-weight:700; font-size:18px; margin:0; line-height:1.05; color:var(--ink); }
.tl-role{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:1px; }
.tl-card p{ font-size:13px; line-height:1.45; color:var(--ink-soft); margin:9px 0 0; }
.tl-act.tl-operator .tl-card{ background:color-mix(in oklab,var(--sky) 16%,var(--tl-paper)); }
.tl-act.tl-ship .tl-card{ background:color-mix(in oklab,var(--mint) 18%,var(--tl-paper)); }
.tl-act.tl-bonfire .tl-card{ background:color-mix(in oklab,var(--grape) 20%,var(--tl-paper)); box-shadow:6px 6px 0 var(--ink); }
.tl-act.tl-bonfire h4{ font-size:20px; }
.tl-conducts{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  background:var(--butter); display:inline-block; padding:2px 8px; border:2px solid var(--ink); border-radius:999px;
  margin-top:10px; transform:rotate(-1.5deg); box-shadow:2px 2px 0 var(--ink); }

.tl-arrow{ align-self:center; flex:0 0 auto; color:var(--ink); display:flex; align-items:center; }
@media (max-width:680px){ .tl-arrow{ transform:rotate(90deg); } }

.tl-cadre-label{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); text-align:center; margin:24px 0 12px; position:relative; }
.tl-cadre-label span{ background:var(--tl-paper); padding:0 12px; }
.tl-cadre-label::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--ink); opacity:.12; z-index:-1; }
.tl-cadre{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; justify-content:center; }
.tl-stn{ flex:1 1 120px; min-width:108px; border:2.5px solid var(--ink); border-radius:12px;
  background:var(--tl-paper); box-shadow:3px 3px 0 var(--ink); padding:12px 11px 11px; position:relative; }
.tl-n{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--ink-soft); }
.tl-nm{ font-family:var(--display); font-weight:700; font-size:16px; line-height:1; margin:3px 0 6px; color:var(--ink); }
.tl-do{ font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.tl-stn.tl-scout{ background:color-mix(in oklab,var(--sky) 16%,var(--tl-paper)); }
.tl-stn.tl-knight{ background:color-mix(in oklab,var(--cherry) 14%,var(--tl-paper)); }
.tl-stn.tl-warriors{ background:color-mix(in oklab,var(--mint) 18%,var(--tl-paper)); flex:1.25 1 150px; }
.tl-stn.tl-sage{ background:color-mix(in oklab,var(--grape) 16%,var(--tl-paper)); }
.tl-stn.tl-wizard{ background:color-mix(in oklab,var(--butter) 30%,var(--tl-paper)); }
.tl-badge{ position:absolute; top:-10px; right:9px; font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:.1em; padding:2px 7px; border:2px solid var(--ink); border-radius:999px; box-shadow:2px 2px 0 var(--ink); }
.tl-badge.tl-red{ background:var(--cherry); color:var(--tl-paper); }
.tl-badge.tl-green{ background:var(--mint); color:var(--ink); }
.tl-badge.tl-gate{ background:var(--butter); color:var(--ink); }
.tl-pair{ display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.tl-pair b{ font-family:var(--mono); font-size:8.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  background:var(--tl-paper); border:1.5px solid var(--ink); border-radius:8px; padding:2px 5px; color:var(--ink-soft); }
.tl-loop{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); text-align:center; margin-top:12px; }
.tl-loop b{ color:var(--cherry); }

.tl-laws{ margin-top:24px; border-top:2px dashed color-mix(in oklab,var(--ink) 30%,transparent); padding-top:16px; }
.tl-lh{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); text-align:center; margin-bottom:12px; }
.tl-chips{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.tl-chip{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:var(--tl-paper); border:2px solid var(--ink); border-radius:999px; padding:7px 13px; box-shadow:2px 2px 0 var(--ink); color:var(--ink); }
.tl-chip i{ font-style:normal; color:var(--cherry); margin-right:6px; }