/* Scoped to this activity. Coordinates describe the records, never answer-slot locations. */
.same-roles{--role-ink:#30485f;--role-paper:#fffaf0;--role-edge:#bdccda}
.same-roles button{min-height:48px;touch-action:manipulation}
.same-roles [data-do=hint]{display:none}
.same-roles.study-focus .progress-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0;color:var(--role-ink)}
.same-roles .role-policy{font-size:14px;line-height:1.6;margin:8px 0 14px;color:#4e5a68}
.same-roles .role-records,.same-roles .role-answer{min-width:0}
.same-roles .role-records{background:var(--role-paper)}
.same-roles .role-records h2,.same-roles .role-answer h2{margin:0 0 12px;line-height:1.5}
.same-roles .scope-note{font-size:14px;line-height:1.65;color:#465569}
.same-roles .record-card{border:1px solid var(--role-edge);border-radius:14px;padding:14px;background:#fff;margin:14px 0}
.same-roles .record-card h3{margin:0;color:var(--role-ink);font-size:17px}
.same-roles .record-card ol{padding-left:22px;font-size:15px;line-height:1.7;margin:8px 0 0}
.same-roles .role-record-diagram{position:relative;width:100%;aspect-ratio:320/350;max-width:360px;margin:auto}
.same-roles .role-record-diagram>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.same-roles .record-arrows>path{fill:none;stroke:#4c6580;stroke-width:3}
.same-roles .record-arrows text{font-size:17px;fill:#30485f;text-anchor:middle;stroke:#fff;stroke-width:4;paint-order:stroke;stroke-linejoin:round;font-weight:800}
.same-roles .record-object{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-45%);display:flex;flex-direction:column;align-items:center;width:106px;text-align:center;font-size:13px;font-weight:700;line-height:1.35}
.same-roles .role-icon{width:54px;height:54px;flex:0 0 auto;display:block}
.same-roles .record-object .role-icon{width:58px;height:58px;background:#fff;border-radius:12px}
.same-roles .inline-records{display:block;border:1px solid var(--role-edge);background:var(--role-paper);padding:12px;border-radius:12px;margin:12px 0}
.same-roles .record-compact h3{font-size:15px;margin:3px 0}
.same-roles .record-compact ol{font-size:14px;line-height:1.65;margin:5px 0 10px;padding-left:20px}
.same-roles .role-instruction{line-height:1.7;font-size:16px}
.same-roles .rep-task{margin:18px 0;padding:14px;border:1px solid var(--role-edge);border-radius:14px;background:#fff}
.same-roles .rep-task h3{margin:0 0 12px;font-size:17px}
.same-roles .role-columns{display:grid;grid-template-columns:1fr 1fr;gap:36px;position:relative}
.same-roles .role-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.same-roles .role-links path{stroke:#607b8d;stroke-width:2.5;fill:none}
.same-roles .role-columns section{min-width:0}
.same-roles .role-columns h4{min-height:44px;line-height:1.5;margin:0 0 10px;font-size:14px}
.same-roles .role-choice{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px 8px;margin:8px 0;min-height:124px;border:2px solid var(--role-edge);border-radius:13px;background:#fdfcf8;color:var(--role-ink);line-height:1.35;font-size:15px;overflow-wrap:anywhere}
.same-roles .role-choice small{font-size:12px;color:#536376;min-height:16px}
.same-roles .role-choice[aria-pressed=true],.same-roles .role-reason[aria-pressed=true]{border-color:#3c6f90;background:#e9f3f8;box-shadow:inset 0 0 0 1px #3c6f90}
.same-roles .role-choice:disabled,.same-roles .role-reason:disabled,.same-roles .role-pairs button:disabled{opacity:.75}
.same-roles .guide-fixed{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 12px;padding:8px;border-bottom:1px solid var(--role-edge)}
.same-roles .guide-targets{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.same-roles .role-pairs{padding:0;list-style:none;margin:12px 0}
.same-roles .role-pairs li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #e0e6e9;color:var(--role-ink);font-size:14px;line-height:1.6}
.same-roles .role-pairs button{flex:0 0 auto;font-size:13px;padding:8px 12px}
.same-roles .role-notice{font-size:14px;line-height:1.6;margin:0;color:#485f72}
.same-roles .role-notice:empty{display:none}
.same-roles .role-next-action{font-size:14px;padding:10px;background:#f0f5f8;border-radius:8px;line-height:1.5}
.same-roles .role-reasons{min-width:0}
.same-roles .role-reasons legend{font-size:17px;font-weight:800;padding:0 6px}
.same-roles .role-reason{display:block;width:100%;text-align:left;margin:8px 0;padding:14px;border:2px solid var(--role-edge);border-radius:12px;line-height:1.6;background:#fdfcf8;font-size:16px}
.same-roles .role-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.same-roles .role-actions button{flex:1 1 160px}
.same-roles .role-actions [aria-disabled=true]{background:#e4e9ed;color:#4b5e6e;border-color:#b6c3cd;cursor:help;box-shadow:none}
.same-roles .rep-action-help:empty{display:none}
.same-roles .role-hints{margin:12px 0;line-height:1.7}
.same-roles .role-hints[hidden]{display:none}
.same-roles .role-summary{padding-left:20px;line-height:1.8;font-size:15px}
.same-roles .duplicate-note{font-size:14px;line-height:1.65;color:#536376}
.same-roles .pilot-failure{margin-top:16px}
.same-roles .feedback{font-size:16px;line-height:1.75;overflow-wrap:anywhere}
.same-roles :focus-visible{outline:3px solid #ae690a;outline-offset:4px}
@media(min-width:900px){.same-roles .study-board{grid-template-columns:minmax(280px,.9fr) minmax(420px,1.2fr)}.same-roles .study-reference{max-height:calc(100dvh - 112px);overflow-y:auto;position:sticky;top:90px}.same-roles .role-columns .role-choice{min-height:116px}}
@media(max-width:899px){.same-roles .record-card{max-width:460px;margin:12px auto}.same-roles .role-answer{padding:16px}.same-roles .role-records{padding:12px}.same-roles .role-columns{gap:24px}}
@media(max-width:400px){.same-roles .rep-task{padding:10px}.same-roles .role-answer{padding:10px}.same-roles .role-choice{font-size:14px;padding:10px 5px}.same-roles .role-pairs li{flex-wrap:wrap}.same-roles .role-columns h4{min-height:63px}.same-roles .role-reason{font-size:15px;padding:10px}.same-roles .progress-row{font-size:14px}}