/* Roadaro — customizable quick-action bar + Customize picker.
   Theme-agnostic (inherits page text color, gold accent) so it reads on both
   light portal pages and the dark dispatcher deck. Pairs with roadaro-actionbar.js. */

/* Pinned quick-action shortcuts (rendered by the engine into any .ra-quick host) */
.ra-quick{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0;}
/* Pins read EXACTLY like the fixed nav tabs (.nl in roadaro-nav.css): same
   padding/size/weight/hover wash, no pill background, no border — one bar,
   one vocabulary. The small icon inherits the text color so it whispers. */
.ra-qbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;
  font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;border:0;
  color:var(--t2,#5a6275);background:transparent;transition:background .12s,color .12s;}
.ra-qbtn:hover{background:rgba(128,128,128,.12);}
.ra-qbtn i{color:inherit;font-size:13px;opacity:.85;}
.ra-gear{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:6px;
  font-size:11px;font-weight:700;cursor:pointer;border:0;background:transparent;color:var(--t2,#5a6275);}
.ra-gear:hover{background:rgba(128,128,128,.16);}
.ra-gear i{font-size:13px;}

/* Customize picker modal (brand navy surface, works over any page) — drag & drop. */
.ra-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:flex-start;justify-content:center;
  background:rgba(6,12,28,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.ra-modal.open{display:flex;}
.ra-card{background:#0e1530;color:#e8ecf4;width:min(620px,94vw);margin-top:8vh;border-radius:14px;
  padding:18px 18px 16px;box-shadow:0 24px 64px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.06);
  font-family:'DM Sans',system-ui,sans-serif;}
.ra-head{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;margin-bottom:4px;}
.ra-head .ti{color:#c8901a;}
.ra-head .ra-x{margin-left:auto;cursor:pointer;color:#9db0d6;background:none;border:0;font-size:16px;
  width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;}
.ra-head .ra-x:hover{background:rgba(255,255,255,.08);color:#fff;}
.ra-sub{font-size:11.5px;color:#9db0d6;line-height:1.5;margin-bottom:14px;}
.ra-sub b{color:#e7c479;font-weight:700;}

.ra-zone{margin-bottom:12px;}
.ra-zone-h{font-size:10.5px;color:#9db0d6;margin-bottom:7px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.ra-row{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;min-height:46px;
  padding:10px;border-radius:10px;background:rgba(255,255,255,.035);border:1px dashed rgba(255,255,255,.10);}
.ra-row-avail{background:rgba(255,255,255,.02);}

/* Pills mirror the live action-bar button look (icon + label, pill shape). */
.ra-pill{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 6px 0 8px;border-radius:999px;
  font-size:12px;font-weight:700;cursor:grab;-webkit-user-select:none;user-select:none;white-space:nowrap;
  background:rgba(200,144,26,.16);border:1px solid rgba(200,144,26,.42);color:#f2dca6;
  transition:transform .1s,box-shadow .15s,background .15s,opacity .15s;}
.ra-pill:hover{box-shadow:0 4px 14px rgba(0,0,0,.3);}
.ra-pill:active{cursor:grabbing;}
.ra-pill.avail{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);color:#aeb9d6;}
.ra-pill.avail:hover{background:rgba(255,255,255,.09);color:#e8ecf4;}
.ra-pill.dragging{opacity:.4;}
.ra-pill .ra-grip{font-size:14px;opacity:.5;margin-left:-2px;}
.ra-pill .ra-pic{font-size:15px;color:#e0a82e;}
.ra-pill.avail .ra-pic{color:#c8901a;}
.ra-plabel{padding-right:2px;}
.ra-pill-x,.ra-pill-add{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;border:0;cursor:pointer;font-size:13px;background:transparent;}
.ra-pill-x{color:#e88a8a;}
.ra-pill-x:hover{background:rgba(226,75,74,.18);color:#ff9b9b;}
.ra-pill-add{color:#7fd6a0;}
.ra-pill.avail:hover .ra-pill-add{color:#9bf0bd;}

/* Insert indicator shown while dragging. */
.ra-marker{width:3px;align-self:stretch;min-height:30px;border-radius:3px;background:#e0a82e;
  box-shadow:0 0 10px rgba(224,168,46,.8);margin:1px 0;}

.ra-empty{font-size:11.5px;color:#5e6b8c;padding:8px 4px;}
.ra-foot{display:flex;align-items:center;gap:10px;margin-top:6px;}
.ra-foot .ra-reset{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#9db0d6;background:none;border:0;cursor:pointer;}
.ra-foot .ra-reset:hover{color:#e8ecf4;}
.ra-foot .ra-done{margin-left:auto;background:#c8901a;color:#241a00;border:0;border-radius:8px;
  padding:9px 20px;font-size:12.5px;font-weight:800;cursor:pointer;}
.ra-foot .ra-done:hover{background:#dba326;}