.team-role-controls { display:flex; flex-wrap:wrap; align-items:end; gap:8px; margin:10px 0; }
.team-role-tested-replies{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,124px),1fr));gap:8px}
.team-role-tested-reply{display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid var(--line);border-radius:6px;min-width:0;font-size:12px;text-align:left;background:var(--soft);color:var(--ink);text-transform:none;letter-spacing:normal;box-shadow:none;cursor:pointer}
.team-role-tested-reply>div{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:4px;min-width:0;width:100%}
.team-role-tested-reply img{width:32px;height:32px;max-width:100%;justify-self:center;object-fit:contain}
.team-role-tested-reply small{color:var(--muted);font-size:11px;overflow-wrap:anywhere}
.team-role-tested-reply b{overflow-wrap:anywhere}
.team-role-tested-reply:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.team-role-reply-link{color:var(--accent);font-size:11px;margin-top:auto;padding-top:4px}
.team-role-sensitivity.has-flips{color:var(--danger)}
.team-role-controls label { display:grid; gap:4px; font-size:11px; color:var(--muted); }
.team-role-controls select,.team-role-controls button { min-height:44px; font-size:12px; }
#teamRolesStatus { flex-basis:100%; font-size:12px; color:var(--muted); }
.team-role-trios { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-top:12px; }
.team-role-trio { width:100%; max-width:none; min-width:0; margin:0; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:none; }
.team-role-trio > header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:5px; padding:0; margin-bottom:12px; border:0; background:transparent; box-shadow:none; color:var(--ink); font-size:13px; }
.team-role-trio > header span { color:var(--muted); font-size:12px; }
.team-role-lineup { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.team-role-lineup > .team-role-pick { display:grid; grid-template-rows:18px 44px minmax(36px,auto) 24px 32px 24px 18px; align-items:center; justify-items:center; gap:3px; min-width:0; padding:4px 2px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink); font:inherit; text-align:center; box-shadow:none; cursor:pointer; }
.team-role-lineup > .team-role-pick { grid-template-columns:minmax(0,1fr); }
.team-role-pick > small { max-width:100%; overflow-wrap:anywhere; }
.team-role-pick:hover { border-color:var(--line); background:var(--soft); transform:none; }
.team-role-pick:focus-visible,.team-role-detail-tabs button:focus-visible,.team-role-risk-preview:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.team-role-pick-action { color:var(--accent); font-size:11px; }
.team-role-lineup img { width:44px; height:44px; object-fit:contain; }
.team-role-lineup b { font-size:12px; overflow-wrap:anywhere; line-height:16px; }
.team-role-lineup strong { font-size:18px; color:var(--accent); }
.team-role-lineup small { font-size:12px; color:var(--muted); line-height:16px; }
.team-role-condition { display:inline-flex; align-items:center; gap:3px; font-size:12px; color:var(--muted); white-space:nowrap; }
.team-role-condition svg { width:18px; height:18px; flex:0 0 18px; color:#b245c5; }
.team-role-decision { display:grid; grid-template-columns:60px minmax(0,1fr); gap:4px 7px; margin-top:12px; padding:10px 0; border-top:1px solid var(--line); font-size:12px; line-height:17px; }
.team-role-decision > b { color:var(--accent); }
.team-role-decision small { grid-column:1/-1; color:var(--muted); font-size:12px; }
.team-role-scope { font-size:12px; color:var(--muted); }
.team-role-lineup > .team-role-pick > small:first-child { color:var(--ink); font-weight:700; }
.team-role-reason,.team-role-warning { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 0; border-top:1px solid var(--line); font-size:12px; line-height:17px; }
.team-role-reason { margin-top:12px; }
.team-role-reason span,.team-role-warning span { display:flex; flex-wrap:wrap; align-items:center; justify-content:end; gap:3px; }
.team-role-reason img,.team-role-warning img { width:28px; height:28px; object-fit:contain; }
.team-role-warning b { color:var(--danger); }
.team-role-trio > button { width:100%; min-height:44px; margin-top:10px; font-size:12px; }
.team-role-trio.is-selected { border-color:var(--accent); }
.team-role-trio > button[aria-pressed=true] { color:var(--accent); border-color:var(--accent); }
.team-role-trio > .team-role-risk-preview { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:0; padding:8px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); text-align:left; box-shadow:none; }
.team-role-risk-preview > span:first-child { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; min-width:0; }
.team-role-risk-preview b { font-size:12px; font-weight:600; }
.team-role-risk-preview.has-risk b { color:var(--danger); }
.team-role-risk-preview small { color:var(--muted); font-size:11px; }
.team-role-risk-enemies { display:flex; align-items:center; gap:2px; }
.team-role-risk-enemies img { width:26px; height:26px; object-fit:contain; }
.team-role-detail-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin:6px 0 10px; }
.team-role-detail-tabs button { min-height:44px; padding:5px; font-size:12px; background:var(--soft); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.team-role-detail-tabs button[aria-pressed=true] { color:var(--accent); border-color:var(--accent); }
.team-role-detail-panel[hidden] { display:none; }
.team-role-trio details { margin-top:6px; }
.team-role-trio summary { color:var(--accent); font-size:12px; line-height:18px; padding:8px 0; min-height:36px; box-sizing:border-box; }
.team-role-trio details details { border-top:1px solid var(--line); }
.team-role-trio details p { font-size:12px; line-height:18px; color:var(--muted); }
.team-role-matchups { container-type:inline-size; min-width:0; }
.team-role-matchup-row { display:grid; grid-template-columns:repeat(3,minmax(44px,1fr)); align-items:center; gap:3px; margin-top:5px; }
.team-role-matchup-row > b { grid-column:1/-1; margin:6px 0 2px; font-size:11px; overflow-wrap:anywhere; }
.team-role-matchup-row > b > small { display:block; font-size:10px; line-height:15px; font-weight:400; color:var(--muted); }
@container (min-width:480px) { .team-role-matchup-row { grid-template-columns:repeat(6,minmax(44px,1fr)); } }
.team-role-matchup { display:grid; justify-items:center; align-content:center; min-width:0; min-height:48px; padding:2px; background:var(--soft); color:var(--ink); border:1px solid var(--line); border-radius:5px; cursor:pointer; box-shadow:none; }
.team-role-matchup img { width:24px; height:24px; object-fit:contain; }
.team-role-matchup .team-role-matchup-name { width:100%; font-size:11px; line-height:14px; min-height:28px; display:grid; align-content:center; overflow-wrap:anywhere; color:var(--ink); font-weight:400; }
.team-role-matchup span { font-size:13px; font-weight:800; }
.team-role-matchup.is-A span { color:var(--good); }
.team-role-matchup.is-B span { color:var(--danger); }
.team-role-matchup:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.team-role-matchup:hover,.team-role-matchup:focus-visible { background:color-mix(in srgb,var(--accent) 10%,var(--soft)); color:var(--ink); box-shadow:none; transform:none; }
.team-role-tabs { display:flex; gap:6px; margin:10px 0; }
.team-role-tabs button { min-height:44px; font-size:12px; flex:1; }
.team-role-tabs [aria-pressed=true] { border-color:var(--accent); color:var(--accent); }
.team-role-profile { display:grid; grid-template-columns:36px minmax(0,1fr); gap:6px; align-items:center; border-bottom:1px solid var(--line); padding:10px 0; }
.team-role-profile > img { width:36px; height:36px; object-fit:contain; }
.team-role-profile > b { font-size:12px; }
.team-role-profile > b > small { display:block; font-weight:400; margin-top:4px; }
.team-role-profile > div { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.team-role-profile span { display:grid; gap:5px; padding:8px; background:var(--panel); border:1px solid var(--line); border-radius:5px; }
.team-role-profile small { font-size:10px; color:var(--muted); line-height:14px; }
.team-role-profile strong { font-size:12px; }
.team-role-profile .is-unbeaten { border-color:var(--good); }
.team-role-farm { display:flex; flex-wrap:wrap; gap:5px; align-items:center; font-size:11px; margin-top:10px; }
.team-role-farm > b { flex-basis:100%; }
.team-role-farm img { width:28px; height:28px; object-fit:contain; }
.team-role-farm strong { color:var(--accent); }
.team-role-scenarios { display:grid; gap:10px; margin-top:12px; }
.team-role-scenario-group { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; font-size:11px; }
.team-role-scenario-group > b { grid-column:1/-1; }
.team-role-scenario-group > div { display:grid; align-content:start; gap:5px; padding:7px 5px; border:1px solid var(--line); border-radius:5px; }
.team-role-scenario-group span,.team-role-scenario-group small { color:var(--muted); font-size:10px; line-height:14px; }
.team-role-scenario-group strong { font-size:11px; line-height:16px; }
.team-role-reliability { margin-top:10px; padding:9px 0; border-top:1px solid var(--line); }
.team-role-reliability > div:first-child { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px; font-size:12px; }
.team-role-reliability strong { color:var(--accent); font-size:12px; }
.team-role-reliability > small { display:block; margin-top:5px; font-size:12px; line-height:17px; color:var(--muted); }
.team-role-checks { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; margin-top:7px; }
.team-role-checks > span { display:grid; justify-items:center; padding:3px 0; border:1px solid var(--line); border-radius:5px; }
.team-role-checks img { width:28px; height:28px; object-fit:contain; }
.team-role-checks b { font-size:11px; }
.team-role-checks .is-safe { color:var(--good); }
.team-role-checks .is-conditional { color:var(--warn); }
.team-role-route { display:grid; grid-template-columns:1fr 12px 1.5fr 12px 1fr; align-items:center; gap:3px; padding:8px 0; border-top:1px solid var(--line); }
.team-role-route > div { display:grid; justify-items:center; gap:4px; }
.team-role-route small { font-size:12px; line-height:17px; color:var(--muted); text-align:center; }
.team-role-route img,.team-role-answer-pairs img,.team-role-reply img,.team-role-case-list img,.team-role-counter img { width:28px; height:28px; object-fit:contain; }
.team-role-route > div > span { display:flex; gap:2px; align-items:center; font-size:10px; }
.team-role-route > span { color:var(--muted); }
.team-role-route > .team-role-route-condition { grid-column:1/-1; margin-top:4px; }
.team-role-answer-pairs { display:flex; flex-wrap:wrap; gap:4px; justify-content:end; }
.team-role-answer-pairs > span { display:flex; align-items:center; gap:2px; padding:2px; border:1px solid var(--line); border-radius:5px; font-size:11px; }
.team-role-alignment-B { color:var(--muted); font-weight:800; }
.team-role-alignment-draw { color:var(--warn); font-weight:800; }
.team-role-options > div { display:grid; gap:7px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.team-role-options article { min-width:0; margin:0; padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--panel); box-shadow:none; }
.team-role-options article > b,.team-role-options article > span { display:block; font-size:11px; }
.team-role-options article > span { color:var(--muted); margin-top:7px; }
.team-role-option-lineup { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; margin-top:7px; }
.team-role-option-lineup > div { display:grid; justify-items:center; gap:4px; }
.team-role-option-lineup img { width:36px; height:36px; object-fit:contain; }
.team-role-option-lineup small { font-size:10px; color:var(--muted); }
.team-role-option-lineup b { font-size:11px; line-height:15px; text-align:center; overflow-wrap:anywhere; }
.team-role-case-list small { flex-basis:100%; color:var(--muted); font-size:10px; line-height:15px; }
.team-role-context { display:grid; gap:8px; padding:10px 0; margin-top:10px; font-size:12px; line-height:18px; }
.team-role-context > small { font-size:12px; color:var(--muted); }
.team-role-case-list { display:grid; gap:5px; }
.team-role-case-list > div { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:3px; padding:4px; border:1px solid var(--line); border-radius:5px; }
.team-role-case-list > div > span:nth-child(2),.team-role-reply { display:flex; align-items:center; gap:3px; flex-wrap:wrap; }
.team-role-reply > span { color:var(--muted); }
.team-role-counter { display:grid; gap:5px; padding:8px; border:1px solid var(--line); border-radius:5px; }
.team-role-counter > div { display:flex; align-items:center; gap:4px; }
.team-role-counter small { color:var(--muted); font-size:11px; line-height:15px; }
@media(max-width:600px) { .team-role-options > div { grid-template-columns:minmax(0,1fr); } }
@media(min-width:1100px) { .team-role-trios { grid-template-columns:repeat(3,minmax(0,1fr)); } .team-role-decision { min-height:59px; } }
@media(max-width:600px) { .team-role-trio { padding:10px; } .team-role-trio > header { flex-wrap:wrap; } }
@media(max-width:340px) {
  .team-role-lineup > .team-role-pick { grid-template-rows:18px 44px minmax(36px,auto) 24px 48px 32px 18px; }
  .team-role-pick .team-role-condition { max-width:100%; white-space:normal; font-size:11px; line-height:14px; }
  .team-role-pick .team-role-condition > span { min-width:0; }
  .team-role-pick .team-role-condition svg { width:16px; height:16px; flex-basis:16px; }
}

.team-role-flip-mark { color:var(--danger); font-size:11px; }
.team-role-counter-lineup > summary { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:44px; color:var(--ink); }
.team-role-counter-lineup > summary::before { content:'▸'; color:var(--accent); }
.team-role-counter-lineup[open] > summary::before { content:'▾'; }
.team-role-counter-lineup > summary > b { margin-right:auto; font-size:12px; }
.team-role-counter-lineup > summary > span { display:flex; flex-shrink:0; gap:2px; }
.team-role-counter-lineup > summary img { width:24px; height:24px; object-fit:contain; }
.team-role-counter-pairs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:6px 0; }
.team-role-counter-pairs > button { display:grid; justify-items:center; gap:4px; min-width:0; min-height:44px; padding:6px 2px; border:1px solid var(--line); border-radius:5px; background:var(--soft); color:var(--ink); font:inherit; box-shadow:none; cursor:pointer; }
.team-role-counter-pairs > button:hover,.team-role-counter-pairs > button:focus-visible { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--soft)); color:var(--ink); box-shadow:none; transform:none; }
.team-role-counter-pairs > button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.team-role-counter-pairs small { font-size:11px; color:var(--muted); }
.team-role-counter-pairs > button > span { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; justify-items:center; gap:2px; width:100%; }
.team-role-counter-pairs .team-role-counter-name { color:var(--ink); line-height:14px; min-height:28px; overflow-wrap:anywhere; text-align:center; }
.team-role-counter-pairs .team-role-pick-action { color:var(--accent); }
.team-role-counter-pairs .team-role-counter-shields { width:100%; min-height:28px; line-height:14px; text-align:center; overflow-wrap:anywhere; }
.team-role-counter-pairs img { width:28px; height:28px; object-fit:contain; }
.team-role-counter-pairs b { font-size:13px; }
.team-role-counter-pairs .team-role-alignment-A { color:var(--danger); }
.team-role-counter-lineup > small { display:block; margin:5px 0; font-size:11px; line-height:16px; color:var(--muted); }