/* Search Explorer. Colours come from the theme tokens only. */
.ex-check { display: flex; gap: 10px; align-items: center; }
.ex-picture { margin-top: 8px; }
.ex-svg { display: block; width: 100%; height: auto; max-height: max(560px, 80vh); }
.ex-box, .ex-arc, .ex-node.mod { cursor: pointer; }
.ex-box rect { stroke: var(--surface); stroke-width: 2; }
.ex-box text, .ex-arc text { fill: var(--surface); font-weight: 700; pointer-events: none; }
.ex-box:hover rect, .ex-box:focus rect { stroke: var(--ink); stroke-width: 3; }
.ex-arc path { stroke: var(--surface); stroke-width: 1.5; }
.ex-arc.l2 path { fill-opacity: .68; }
.ex-arc.l2 text { fill: var(--ink); font-weight: 500; }
.ex-arc:hover path, .ex-arc:focus path { stroke: var(--ink); stroke-width: 2.5; }
.ex-node circle { stroke: var(--surface); stroke-width: 2; }
.ex-node.seed circle { fill: var(--accent); }
.ex-node.seed .seed-t { fill: var(--surface); font-size: 17px; font-weight: 800; }
.ex-node .mod-t { fill: var(--ink); font-size: 18px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.ex-node .kw-t { fill: var(--ink); font-size: 12px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.ex-node.dim, .tm-link.dim { opacity: .18; }
.ex-box.tm-k0 rect, .ex-arc.tm-k0 path, .ex-node.tm-k0 circle, .ex-dot.tm-k0 { fill: var(--chart-1); background: var(--chart-1); }
.ex-box.tm-k1 rect, .ex-arc.tm-k1 path, .ex-node.tm-k1 circle, .ex-dot.tm-k1 { fill: var(--chart-2); background: var(--chart-2); }
.ex-box.tm-k2 rect, .ex-arc.tm-k2 path, .ex-node.tm-k2 circle, .ex-dot.tm-k2 { fill: var(--chart-3); background: var(--chart-3); }
.ex-box.tm-k3 rect, .ex-arc.tm-k3 path, .ex-node.tm-k3 circle, .ex-dot.tm-k3 { fill: var(--chart-4); background: var(--chart-4); }
.ex-box.tm-k4 rect, .ex-arc.tm-k4 path, .ex-node.tm-k4 circle, .ex-dot.tm-k4 { fill: var(--chart-5); background: var(--chart-5); }
.ex-box.tm-k6 rect, .ex-arc.tm-k6 path, .ex-node.tm-k6 circle, .ex-dot.tm-k6 { fill: var(--chart-7); background: var(--chart-7); }
.ex-box.tm-k7 rect, .ex-arc.tm-k7 path, .ex-node.tm-k7 circle, .ex-dot.tm-k7 { fill: var(--chart-8); background: var(--chart-8); }
.ex-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; }
.ex-legend { margin-top: 10px; }
.ex-leg { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 8px 14px; }
.ex-leg li { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.linklike { all: unset; cursor: pointer; color: var(--accent); font-weight: 600; text-decoration: underline; }
.tm-badge.tm-n { background: var(--surface-2); color: var(--muted); }
.ex-table > thead th:first-child, .ex-table > tbody > tr > td:first-child { min-width: 240px; }

/* Interactive wheel and relationship map */
.ex-arc.center path { fill: var(--surface-2); stroke: var(--line); stroke-width: 2; }
.ex-arc.center text { fill: var(--ink); font-weight: 800; }
.ex-arc.l2.sel path { stroke: var(--ink); stroke-width: 3; fill-opacity: 1; }
.ex-arc:focus { outline: none; }
.ex-arc:focus path { stroke: var(--ink); stroke-width: 3; }
.ex-arc.l1 text { fill: var(--surface); font-weight: 800; }
.ex-arc.l2 text { pointer-events: none; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ex-chip { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 99px; padding: 5px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.ex-chip.on { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.ex-detail { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.ex-rel-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ex-node.center circle { fill: var(--surface-2); stroke: var(--accent); stroke-width: 4; }
.ex-node.center .seed-t { fill: var(--ink); font-size: 15px; font-weight: 800; }
.ex-node.primary:hover circle, .ex-node.primary:focus circle { stroke: var(--ink); stroke-width: 4; }
.ex-node.primary:focus { outline: none; }
.ex-node.primary.more circle { stroke-width: 4; stroke: var(--ink); }
.ex-node.primary { cursor: pointer; }
.ex-node.center { cursor: default; }
.ex-node.primary:hover .mod-t { fill: var(--accent); }
.ex-node.st-none circle { fill-opacity: .55; }
.ex-leg li .tm-badge { margin-left: 6px; }

/* Guided flow at the top of the results, and calmer spacing for buttons */
.ex-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 18px; }
.ex-step { display: flex; gap: 14px; align-items: flex-start; }
.ex-step-n { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: var(--accent-ink, white); font-weight: 800; }
.ex-step-b { display: grid; gap: 8px; min-width: 0; flex: 1; }
.ex-step-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ex-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ex-pick li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ex-pick-k { display: grid; gap: 2px; min-width: 0; }
.ex-pick-a { display: flex; flex-wrap: wrap; gap: 12px; }
.ex-all > summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; padding: 4px 0 12px; }
.ex-morecols { margin: 0 0 12px; }
.tm-views, .ex-chips, .ex-rel-head .wr-actions, .tm-card .wr-actions, .cl-actions { gap: 12px; }
.ex-leg { gap: 12px 18px; }
.ex-leg li { gap: 8px; }
.ex-leg li .btn { margin-left: 4px; }
.ex-detail { gap: 8px 18px; }
.ex-detail a { margin-left: 6px; }
.tm-card .wr-actions { margin-top: 6px; }
@media (max-width: 720px) { .ex-pick-a .btn, .ex-step-actions .btn { flex: 1 1 auto; text-align: center; } }