.join-fanout{min-width:0;color:var(--ink,#152238);gap:16px;display:grid}.join-fanout__toolbar-main{min-width:0}.join-fanout__toolbar .visualization-toolbar__label{margin-bottom:3px;display:inline-block}.join-fanout__toolbar p strong{color:var(--ink)}.join-fanout__toolbar p{min-height:3.4em}.join-fanout__progress{background:var(--progress-track);border-radius:999px;height:4px;overflow:hidden}.join-fanout__progress>span{border-radius:inherit;background:var(--diagram-accent);height:100%;transition:width var(--motion-standard) ease;display:block}.join-fanout__equation{border:1px solid var(--diagram-border);border-radius:var(--radius-section,14px);background:var(--diagram-surface);align-items:stretch;gap:10px;padding:14px 16px;display:flex}.join-fanout__equation>div{border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface-2);text-align:center;flex:1 1 0;gap:2px;min-width:0;padding:7px 10px;display:grid}.join-fanout__equation>div.is-result{border-color:var(--diagram-accent);background:var(--diagram-accent-soft)}.join-fanout__equation small{color:var(--text-muted);letter-spacing:.04em;font-size:10px;font-weight:750}.join-fanout__equation strong{color:var(--text-primary);font-size:26px;line-height:1.1}.join-fanout__equation span{color:var(--text-secondary);font-size:11px;font-weight:700}.join-fanout__equation>b{color:var(--text-muted);align-self:center;font-size:18px;font-weight:800}.join-fanout[data-step-kind=expand] .join-fanout__equation>div.is-result{border-color:var(--danger-border);background:var(--danger-bg)}.join-fanout[data-step-kind=expand] .join-fanout__equation>div.is-result strong{color:var(--danger-text);font-size:30px}.join-fanout__tables{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px;display:grid}.join-fanout__table-scroll{min-width:0;overflow-x:auto}.join-fanout__table{border:1px solid var(--diagram-border);border-radius:var(--radius-control);border-collapse:separate;border-spacing:0;background:var(--diagram-surface);width:100%;min-width:300px;font-size:12px}.join-fanout__table caption{border-bottom:1px solid var(--diagram-border);color:var(--text-secondary);text-align:left;padding:10px 12px;font-size:11px;font-weight:750}.join-fanout__table caption strong{color:var(--text-primary)}.join-fanout__table thead th{border-bottom:1px solid var(--border);background:var(--surface-2);color:var(--text-secondary);letter-spacing:.04em;text-align:left;padding:8px 12px;font-size:10px;font-weight:800}.join-fanout__table thead th small{color:var(--text-muted);letter-spacing:.02em;font-size:9px;font-weight:700;display:block}.join-fanout__table tbody th,.join-fanout__table tbody td{border-bottom:1px solid var(--border);color:var(--text-secondary);text-align:left;vertical-align:middle;padding:9px 12px}.join-fanout__table tbody tr:last-child th,.join-fanout__table tbody tr:last-child td{border-bottom:0}.join-fanout__table tbody tr[data-state=waiting]{color:var(--text-muted)}.join-fanout__table tbody tr[data-state=matched]{background:var(--surface-2)}.join-fanout__table tbody tr[data-state=active]{background:var(--diagram-accent-soft)}.join-fanout__table tbody tr[data-focus=primary]{background:var(--diagram-accent-soft);box-shadow:inset 3px 0 0 var(--diagram-accent)}.join-fanout__key{border:1px solid var(--diagram-border);background:var(--diagram-accent-soft);min-width:22px;color:var(--text-primary);text-align:center;border-radius:4px;padding:1px 5px;font-size:11px;font-weight:800;display:inline-block}.join-fanout__tags{flex-wrap:wrap;gap:4px;display:inline-flex}.join-fanout__tag{border:1px solid var(--border-strong);background:var(--surface-2);min-width:22px;color:var(--text-primary);border-radius:999px;justify-content:center;padding:1px 7px;font-size:11px;font-weight:750;display:inline-flex}.join-fanout__row-status{border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);white-space:nowrap;border-radius:999px;align-items:center;padding:2px 7px;font-size:10px;font-weight:750;display:inline-flex}.join-fanout__table tbody tr[data-focus=primary] .join-fanout__row-status{border-color:var(--diagram-accent);background:var(--diagram-surface);color:var(--info-text);font-weight:850}.join-fanout__result{border:1px solid var(--diagram-border);border-radius:var(--radius-section,14px);background:var(--diagram-surface);border-left-width:4px;gap:10px;padding:14px 16px;display:grid}.join-fanout__result[data-tone=warning]{border-color:var(--warning-border);border-left-color:var(--warning-text);background:var(--warning-bg)}.join-fanout__result[data-tone=risk]{border-color:var(--danger-border);border-left-color:var(--danger-text);background:var(--danger-bg)}.join-fanout__result[data-tone=ok]{border-color:var(--success-border);border-left-color:var(--success-text);background:var(--success-bg)}.join-fanout__result-heading{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px;display:flex}.join-fanout__result-heading>div{align-items:baseline;gap:8px;display:inline-flex}.join-fanout__result-heading span{color:var(--text-secondary);letter-spacing:.04em;font-size:11px;font-weight:800}.join-fanout__result-heading strong{color:var(--text-primary);font-size:18px}.join-fanout__result-heading p{color:var(--text-secondary);margin:0;font-size:11px;font-weight:700}.join-fanout__result[data-tone=risk] .join-fanout__result-heading p{color:var(--danger-text)}.join-fanout__result[data-tone=ok] .join-fanout__result-heading p{color:var(--success-text)}.join-fanout__empty{color:var(--text-muted);margin:0;padding:12px 2px;font-size:12px}.join-fanout__table--result{min-width:360px}.join-fanout__table--result tbody tr[data-state=new]{background:var(--diagram-accent-soft)}.join-fanout__table--result tbody tr[data-focus=primary] .join-fanout__row-status{border-color:var(--diagram-accent);background:var(--diagram-surface);color:var(--info-text)}.join-fanout .button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}@container visualization (width<=660px){.join-fanout__tables{grid-template-columns:1fr}.join-fanout__result{order:3;padding:12px}.join-fanout__tables{order:4}}@container visualization (width<=480px){.join-fanout{gap:13px}.join-fanout__toolbar p{min-height:5.1em}.join-fanout__equation{gap:7px;padding:10px}.join-fanout__equation>div{padding:6px 7px}.join-fanout__equation strong{font-size:22px}.join-fanout__table{font-size:11px}.join-fanout__table thead th,.join-fanout__table tbody th,.join-fanout__table tbody td{padding:7px 9px}}@media (prefers-reduced-motion:reduce){.join-fanout__progress>span{transition:none}}