/* Matchups, Phases, Fantasy, Quiz and the Tools hub. Uses the site tokens only. */
.tl-mast{margin:22px 0 16px}
.tl-mast .eyebrow{margin:0 0 6px;color:var(--accent);font-size:10px;letter-spacing:2px}
.tl-mast h1{margin:0 0 8px;font-size:clamp(30px,4vw,48px);letter-spacing:-1.2px;line-height:1.05}
.tl-lede{margin:0;max-width:760px;color:var(--muted);font-size:15px}
.tl-controls{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;padding:16px 18px;margin:0 0 14px}
.tl-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tl-label{font:600 10px/1.2 var(--font-mono,monospace);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.tl-field input,.tl-field select{min-width:0;width:220px;max-width:100%}
.tl-field input[type=number]{width:110px}
.tl-seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--border);border-radius:10px;background:var(--soft)}
.tl-seg button,.tl-chips button{min-height:36px;padding:6px 12px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:12px;font-weight:700}
.tl-seg button[aria-pressed=true],.tl-chips button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.tl-seg button:hover,.tl-chips button:hover{color:var(--ink)}
.tl-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tl-actions .button{display:inline-flex;align-items:center}
.tl-actions .button:hover{text-decoration:none}
.tl-status{margin:0 0 12px;color:var(--muted);font-size:13px}
.tl-status[hidden]{display:none}
.tl-out:empty{display:none}
.tl-out.panel,.tl-block{padding:18px 20px;margin:0 0 14px}
.tl-out h2,.tl-block h2{margin:0 0 12px;font-size:20px}
.tl-block-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.tl-block-head h2{margin:0}
.tl-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
.tl-block-head .tl-chips{margin:0}
.tl-inline{display:inline-flex;align-items:center;gap:8px;margin-left:6px;font-size:12px;color:var(--muted)}
.tl-inline input{width:90px;min-width:0;min-height:36px;padding:6px 8px}
.tl-tiles{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:1px;margin:0 0 16px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--border)}
.tl-tiles>div{padding:14px 16px;background:var(--panel)}
.tl-tiles strong{display:block;font-size:clamp(20px,2.2vw,28px);line-height:1.1;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.tl-tiles .lead strong{color:var(--accent)}
.tl-tiles span{display:block;margin-top:5px;font-size:10px;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);font-weight:700}
.tl-wrap{margin:0 0 14px}
.tl-table td,.tl-table th{font-variant-numeric:tabular-nums}
.tl-table td{text-align:right}
.tl-table td.t,.tl-table th.t{text-align:left}
.tl-empty{margin:6px 0;color:var(--muted)}
.tl-fine{margin:6px 0 10px;font-size:12px;color:var(--muted)}
.tl-row-pick{min-height:0;padding:0;border:0;background:none;color:var(--accent);font-weight:650;font-size:inherit;text-align:left;white-space:normal}
.tl-row-pick:hover{text-decoration:underline}
.tl-field{position:relative}
.tl-suggest{position:absolute;z-index:40;top:100%;left:0;right:0;margin:4px 0 0;padding:4px;list-style:none;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.35);max-height:320px;overflow:auto}
.tl-suggest li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:7px;cursor:pointer}
.tl-suggest li small{color:var(--muted);font-size:11px}
.tl-suggest li:hover,.tl-suggest li.on{background:var(--soft)}
.tl-suggest li.none{color:var(--muted);cursor:default}
/* Phases */
.ph-powerplay{--ph:var(--accent)}.ph-middle{--ph:var(--lime)}.ph-death{--ph:var(--magenta)}
.tl-phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tl-phase{padding:14px 16px;border:1px solid color-mix(in srgb,var(--ph) 35%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--ph) 5%,var(--panel))}
.tl-phase-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 10px}
.tl-phase h3{margin:0;color:var(--ph);font-size:17px}
.tl-phase-head span{color:var(--muted);font-size:11px}
.tl-phase dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0}
.tl-phase dt{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:700}
.tl-phase dd{margin:2px 0 0;font-size:20px;font-weight:750;font-variant-numeric:tabular-nums}
.tl-bar{fill:var(--ph)}
.tl-wkts{fill:none;stroke:var(--gold);stroke-width:2}
.tl-legend{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 0;font-size:12px;color:var(--muted)}
.tl-legend span:before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:2px;background:var(--ph,var(--gold));vertical-align:-1px}
.tl-legend .tl-wkt-key:before{height:2px;vertical-align:3px}
.tl-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* Fantasy */
.tl-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.tl-pick{position:relative;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--soft)}
.tl-pick.is-lead{border-color:color-mix(in srgb,var(--gold) 50%,var(--border))}
.tl-pick h3{margin:0 0 2px;font-size:15px;padding-right:30px}
.tl-pick p{margin:0 0 8px;color:var(--muted);font-size:12px}
.tl-pick strong{font-size:20px;font-variant-numeric:tabular-nums}
.tl-badge{position:absolute;top:10px;right:10px;font:800 11px/1 var(--font-mono,monospace);color:var(--gold)}
.tl-meter{height:5px;margin:0 0 6px;border-radius:3px;background:var(--border);overflow:hidden}
.tl-meter i{display:block;height:100%;background:var(--accent)}
.tl-rules{margin:0 0 14px;padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
.tl-rules summary{cursor:pointer;font-weight:700}
.tl-rules ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:13px}
/* Quiz */
.tl-streak{margin:0 0 4px;font-weight:700;color:var(--gold)}
.tl-clues{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:0 0 16px}
.tl-clues div{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--soft)}
.tl-clues dt{font-size:10px;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);font-weight:700}
.tl-clues dd{margin:4px 0 0;font-size:18px;font-weight:750;font-variant-numeric:tabular-nums}
.tl-clues .wide{grid-column:1/-1}
.tl-clues .wide dd{font-size:15px;font-weight:650}
.tl-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}
.tl-option{min-height:52px;font-size:15px;text-align:left;white-space:normal}
.tl-option.is-right{border-color:var(--lime);color:var(--lime)}
.tl-option.is-wrong{border-color:var(--magenta);color:var(--magenta)}
.tl-verdict{margin:0 0 10px;font-weight:750}
.tl-verdict.is-right{color:var(--lime)}.tl-verdict.is-wrong{color:var(--magenta)}
/* Hub */
.tl-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:0 0 20px}
.tl-card h2{margin:4px 0 6px;font-size:20px}
.tl-card p{margin:0;color:var(--muted)}
.tl-card .eyebrow{margin:0;color:var(--accent);font-size:10px;letter-spacing:2px}
@media(max-width:760px){
  .tl-phases,.tl-two,.tl-options{grid-template-columns:minmax(0,1fr)}
  .tl-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tl-field,.tl-field input,.tl-field select{width:100%}
  .tl-controls{padding:14px}
}