/* The same card hierarchy and action bar used by the player drawers. */
.ui-overlay:has(.role-drawer), .form-panel:has(.role-editor) { background:var(--color-bg); }
.role-drawer { min-height:100dvh; display:flex; flex-direction:column; background:var(--color-bg); }
.role-drawer .overlay-heading { padding:20px 26px; background:var(--color-bg); }
.role-drawer .overlay-heading .eyebrow { color:var(--color-primary); letter-spacing:1.8px; }
.role-drawer .overlay-heading .icon-button { flex:none; width:40px; height:40px; border:1px solid var(--color-border); border-radius:50%; }
.role-editor { flex:1; display:flex; flex-direction:column; min-width:0; }
.role-editor > .overlay-body { flex:1; display:flex; flex-direction:column; gap:18px; padding:22px 26px 28px; }
.role-context { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #cedcc5; border-radius:10px; background:var(--color-soft); }
.role-context-icon { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:9px; color:var(--color-primary); background:var(--color-surface); }
.role-context strong { font-size:13px; font-weight:600; }
.role-context p { margin:4px 0 0; color:var(--color-muted); font-size:11px; line-height:1.5; }
.role-context > div { min-width:0; overflow-wrap:anywhere; }
.role-config-card, .role-preview { margin:0; padding:20px; border-radius:12px; }
.role-card-heading { gap:12px; margin-bottom:20px; }
.role-card-heading h3 { margin:0; color:var(--color-primary); font-size:14px; letter-spacing:-.2px; }
.role-card-heading p { margin:4px 0 0; color:var(--color-muted); font-size:11px; line-height:1.5; }
.role-editor .field-grid { gap:18px 16px; }
[data-role-options] .field-grid > div { min-width:0; }
.role-editor .editor-field label { font-size:12px; font-weight:600; }
.role-editor .field-help { font-size:11px; line-height:1.6; }
.role-preview-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.role-preview-heading .role-card-heading { margin:0; }
.role-preview-heading .tag { white-space:nowrap; }
.role-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 20px; }
.role-totals > div { display:flex; flex-direction:column-reverse; gap:3px; padding:10px 12px; border:1px solid var(--color-border); border-radius:9px; background:var(--color-bg); }
.role-totals dt { color:var(--color-muted); font-size:10px; }
.role-totals dd { margin:0; color:var(--color-primary); font:600 24px/1.2 var(--font-heading); font-variant-numeric:tabular-nums; }
.role-section-label { margin:0 0 10px; color:var(--color-muted); font-size:10px; font-weight:600; letter-spacing:.5px; }
.role-group-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:8px; padding:0; margin:0; list-style:none; }
.role-group-card { display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:9px; }
.role-group-number { display:grid; place-items:center; flex:none; width:27px; height:27px; border-radius:7px; background:var(--color-soft); color:var(--color-primary); font:600 10px var(--font-heading); }
.role-group-card > div { display:flex; flex-direction:column; gap:3px; min-width:0; }
.role-group-card > div > span { color:var(--color-muted); font-size:10px; }
.role-group-card strong { font-size:12px; }
.role-qualification { display:flex; align-items:center; gap:12px; padding:15px; margin:16px 0 20px; border-radius:9px; background:var(--color-primary); color:#fff; }
.role-qualification-icon { display:grid; place-items:center; flex:none; width:32px; height:32px; border:1px solid #ffffff36; border-radius:50%; color:var(--color-accent); }
.role-qualification strong { font-size:13px; font-weight:600; }
.role-qualification p { margin:4px 0 0; color:#ffffffd9; font-size:12px; line-height:1.5; }
.role-rounds { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 15px; list-style:none; }
.role-rounds li { display:flex; align-items:center; gap:8px; color:var(--color-muted); }
.role-rounds li > span { padding:7px 10px; border:1px solid var(--color-border); border-radius:7px; background:var(--color-bg); color:var(--color-primary); font-size:11px; font-weight:500; }
.role-rounds li:last-child > span { border-color:var(--color-primary); background:var(--color-primary); color:#fff; }
.role-rounds .icon { width:12px; height:12px; }
.role-preview-note { margin:8px 0 0; color:var(--color-muted); font-size:11px; line-height:1.7; }
.role-edit-help { padding:0 2px; color:var(--color-muted); font-size:11px; line-height:1.7; }
.role-edit-help summary { display:flex; align-items:center; min-height:44px; color:var(--color-primary); font-weight:500; cursor:pointer; }
.role-edit-help summary::after { content:'+'; margin-left:auto; padding-left:12px; font-size:16px; }
.role-edit-help[open] summary::after { content:'−'; }
.role-edit-help p { margin:8px 0 0; }
[data-role-preview][aria-busy=true] { opacity:.6; }
.role-editor [hidden] { display:none !important; }
.role-editor:not(.role-review) [data-role-confirm] { display:none; }
.enhanced .role-editor [data-role-confirm] { display:block; }
.ui-overlay [data-role-confirm] { position:sticky; bottom:0; z-index:1; }
.ui-overlay [data-role-confirm] .overlay-footer { position:static; }
.role-editor .role-footer { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:14px 26px 18px; background:var(--color-bg); }
.role-save-note { margin:0; color:var(--color-muted); font-size:11px; line-height:1.6; }
.role-footer-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.role-footer-actions .button { min-height:44px; }
.role-footer-actions .button-primary { gap:16px; }
@media(max-width:768px) {
  .role-drawer .overlay-heading { padding:16px 10px; }
  .role-editor > .overlay-body { gap:14px; padding:16px 10px 20px; }
  .role-config-card, .role-preview { padding:16px 12px; }
  .role-editor .role-footer { padding:10px 10px 12px; gap:8px; }
  .role-editor .field-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .role-editor .editor-field :is(input,select) { font-size:16px; }
  .role-card-heading { gap:10px; }
  .role-totals > div { padding:9px 10px; }
  .role-qualification { padding:13px; }
  .role-footer-actions { gap:8px; }
  .role-footer-actions .button-primary { gap:8px; }
}
@media(max-width:359px) {
  .role-footer-actions .button { padding-inline:10px; font-size:12px; }
}