/* Thinking level analysis (site/thinking.html). Layout tokens come from models/model.css.
   Series slots: the first four are the only subset of the reference categorical palette that
   clears the all-pairs normal-vision floor in both themes (blue, yellow, magenta, green); slots
   5-8 add the rest. Every series also carries a distinct marker shape and a direct name label,
   so identity never depends on color alone. Dark steps are the palette's own dark column. */
.tl-root{
  --s1:#2a78d6; --s2:#eda100; --s3:#e87ba4; --s4:#008300;
  --s5:#eb6834; --s6:#1baf7a; --s7:#4a3aa7; --s8:#e34948;
  --tl-surface:var(--panel); --tl-grid:var(--line); --tl-better:rgba(37,99,235,.07);
  margin:6px 0 40px;
}
html[data-theme="dark"] .tl-root{
  --s1:#3987e5; --s2:#c98500; --s3:#d55181; --s4:#008300;
  --s5:#d95926; --s6:#199e70; --s7:#9085e9; --s8:#e66767; --tl-better:rgba(91,140,255,.10);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tl-root{
  --s1:#3987e5; --s2:#c98500; --s3:#d55181; --s4:#008300;
  --s5:#d95926; --s6:#199e70; --s7:#9085e9; --s8:#e66767; --tl-better:rgba(91,140,255,.10);
}}
.tl-eyebrow{margin:18px 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
.tl-title{margin:0;text-align:center;font-size:clamp(26px,4vw,36px);line-height:1.15;color:var(--text)}
.tl-sub{max-width:760px;margin:10px auto 18px;text-align:center;color:var(--text-soft);font-size:15px;line-height:1.55}
.tl-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-1);padding:12px 14px 14px}
.tl-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tl-bar2{margin-top:8px}
.tl-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;background:var(--panel2);border-radius:10px;padding:3px;max-width:100%}
.tl-tabs::-webkit-scrollbar{display:none}
.tl-tabs button,.tl-seg button{appearance:none;border:0;background:transparent;color:var(--text-soft);font:inherit;font-size:13px;font-weight:600;padding:6px 11px;border-radius:8px;cursor:pointer;white-space:nowrap}
.tl-tabs button[aria-selected="true"],.tl-seg button[aria-pressed="true"]{background:var(--panel);color:var(--accent);box-shadow:0 1px 2px rgba(16,27,46,.12)}
.tl-tabs button:focus-visible,.tl-seg button:focus-visible,.tl-chip:focus-visible,.tl-link:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tl-seg{display:inline-flex;align-items:center;gap:2px;background:var(--panel2);border-radius:10px;padding:3px}
.tl-seg-sm button{font-size:12.5px;padding:5px 10px}
.tl-seg-label{font-size:12px;font-weight:600;color:var(--muted);padding:0 6px 0 4px}
.tl-actions{display:flex;align-items:center;gap:6px}
.tl-count{font-size:12.5px;color:var(--muted)}
.tl-link{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--text-soft);font:inherit;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:8px;cursor:pointer}
.tl-link:hover{color:var(--text);border-color:var(--line2)}
.tl-chips{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;align-items:start;margin:12px 0 4px;padding:10px 4px 2px;border-top:1px solid var(--line)}
.tl-lab{font-size:12px;font-weight:700;color:var(--muted);padding-top:5px;white-space:nowrap}
.tl-labchips{display:flex;flex-wrap:wrap;gap:5px}
.tl-chip{appearance:none;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--panel);color:var(--text-soft);font:inherit;font-size:12px;font-weight:600;padding:3px 8px 3px 6px;border-radius:999px;cursor:pointer;min-height:26px}
.tl-chip:hover{border-color:var(--line2);color:var(--text)}
.tl-chip[aria-pressed="true"]{color:var(--text);border-color:var(--line2);background:var(--panel2)}
.tl-chip svg{flex:0 0 auto;width:12px;height:12px}
.tl-chip .n{color:var(--faint);font-weight:500}
.tl-note{margin:6px 2px 0;font-size:12.5px;color:var(--text-soft)}
.tl-plot{position:relative;margin-top:8px}
.tl-plot svg{display:block;width:100%;height:auto;overflow:visible}
.tl-plot .grid line{stroke:var(--tl-grid);stroke-width:1}
.tl-plot .axis text{fill:var(--muted);font-size:11px}
.tl-plot .axis-title{fill:var(--muted);font-size:11.5px;font-weight:600}
.tl-plot .better{fill:var(--tl-better)}
.tl-plot .better-label{fill:var(--faint);font-size:11px;font-style:italic}
.tl-plot .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tl-plot .link{fill:none;stroke-width:1.5;stroke-dasharray:3 4}
.tl-plot .mark{stroke:var(--tl-surface);stroke-width:2}
.tl-plot .mark.hollow{fill:var(--tl-surface);stroke-width:2.25}
.tl-plot .lvl{fill:var(--muted);font-size:10.5px}
.tl-plot .fam{fill:var(--text);font-size:11.5px;font-weight:700;paint-order:stroke;stroke:var(--tl-surface);stroke-width:3px;stroke-linejoin:round}
.tl-plot .lvl{paint-order:stroke;stroke:var(--tl-surface);stroke-width:3px;stroke-linejoin:round}
.tl-plot .series{transition:opacity .15s}
.tl-plot.dim .series{opacity:.18}
.tl-plot.dim .series.on{opacity:1}
.tl-plot .hit{fill:transparent;cursor:pointer}
.tl-empty{padding:60px 10px;text-align:center;color:var(--muted);font-size:14px}
.tl-tip{position:absolute;z-index:5;pointer-events:auto;min-width:210px;max-width:280px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:0 12px 32px -12px rgba(16,27,46,.35);padding:10px 12px;font-size:12.5px;color:var(--text-soft)}
.tl-tip .h{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--text);font-size:13px;margin-bottom:6px}
.tl-tip .h svg{width:12px;height:12px;flex:0 0 auto}
.tl-tip table{border-collapse:collapse;width:100%}
.tl-tip td{padding:2px 0;vertical-align:top}
.tl-tip td+td{text-align:right;color:var(--text);font-variant-numeric:tabular-nums}
.tl-tip a{display:inline-block;margin-top:6px;font-weight:700;font-size:12.5px}
.tl-tablewrap{overflow-x:auto;margin-top:10px}
.tl-table{border-collapse:collapse;width:100%;font-size:13px}
.tl-table th,.tl-table td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tl-table th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);position:sticky;top:0;background:var(--panel)}
.tl-table td.num,.tl-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.tl-table tr.first td{border-top:2px solid var(--line2)}
.tl-table .fname{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--text)}
.tl-table .fname svg{width:11px;height:11px}
.tl-foot{margin:14px 4px 0;font-size:12.5px;color:var(--muted);line-height:1.55}
@media (max-width:640px){
  /* Phones: the plot comes straight after the controls; the 38 model toggles follow it. */
  .tl-card{display:flex;flex-direction:column;padding:10px 10px 12px;border-radius:14px}
  .tl-plot,.tl-tablewrap{order:1}
  .tl-chips{order:2;margin-top:14px}
  .tl-note{order:3}
  .tl-chips{grid-template-columns:1fr;gap:4px}
  .tl-lab{padding-top:4px}
  .tl-sub{font-size:14px}
  .tl-seg-label{display:none}
}