/* CHG-20260815-PILL1 - give each of the seven console pills its own colour.
   Why: two pairs collided and could not be told apart at a glance - Sample
   Shipment and Columns Unlocked were both grey, New Customer New Order and
   Default View were both blue. Solid fills chosen by BLAZE over the pastel
   options, so the labels also flip to white for contrast.

   Selectors are prefixed `html body` deliberately. The existing pill styling is
   injected at RUNTIME by op_chrome_deboss.js and friends into <style> tags
   (op-deboss-css, bz-pill-css, nco-launch-css, ro-chrome), which land after this
   stylesheet in document order. A plain `#ss-pill` rule would lose the tie even
   with !important; the extra element specificity wins deterministically.

   Geometry is untouched - 80x80, radius 9px, and the flow-panel strip height is
   unchanged, per the standing rule. */

/* Sample Shipment - cyan */
html body #ss-pill {
  background: linear-gradient(145deg, #0e7490, #0891b2 60%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: rgba(0, 0, 0, 0.30) 2px 2px 5px inset,
              rgba(255, 255, 255, 0.28) -2px -2px 3px inset !important;
}
html body #ss-pill svg,
html body #ss-pill .ea-lbl,
html body #ss-pill * { color: #fff !important; stroke: currentColor !important; }
html body #ss-pill:hover {
  background: linear-gradient(145deg, #155e75, #0e7490 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.40) 2px 2px 7px inset,
              rgba(255, 255, 255, 0.22) -2px -2px 3px inset !important;
}
html body #ss-pill:active {
  background: linear-gradient(145deg, #0891b2, #0e7490 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.34) 1px 1px 0 inset,
              rgba(255, 255, 255, 0.18) -1px -1px 3px inset !important;
}

/* New/Repeat Calibration - orange */
html body #cal-launch {
  background: linear-gradient(145deg, #c2410c, #ea580c 60%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: rgba(0, 0, 0, 0.30) 2px 2px 5px inset,
              rgba(255, 255, 255, 0.28) -2px -2px 3px inset !important;
}
html body #cal-launch svg,
html body #cal-launch .ea-lbl,
html body #cal-launch * { color: #fff !important; stroke: currentColor !important; }
html body #cal-launch:hover {
  background: linear-gradient(145deg, #9a3412, #c2410c 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.40) 2px 2px 7px inset,
              rgba(255, 255, 255, 0.22) -2px -2px 3px inset !important;
}
html body #cal-launch:active {
  background: linear-gradient(145deg, #ea580c, #c2410c 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.34) 1px 1px 0 inset,
              rgba(255, 255, 255, 0.18) -1px -1px 3px inset !important;
}

/* New Customer New Order - blue */
html body #nco-launch {
  background: linear-gradient(145deg, #1d4ed8, #2563eb 60%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: rgba(0, 0, 0, 0.30) 2px 2px 5px inset,
              rgba(255, 255, 255, 0.28) -2px -2px 3px inset !important;
}
html body #nco-launch svg,
html body #nco-launch .ea-lbl,
html body #nco-launch * { color: #fff !important; stroke: currentColor !important; }
html body #nco-launch:hover {
  background: linear-gradient(145deg, #1e40af, #1d4ed8 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.40) 2px 2px 7px inset,
              rgba(255, 255, 255, 0.22) -2px -2px 3px inset !important;
}
html body #nco-launch:active {
  background: linear-gradient(145deg, #2563eb, #1d4ed8 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.34) 1px 1px 0 inset,
              rgba(255, 255, 255, 0.18) -1px -1px 3px inset !important;
}

/* Customer Repeat Order - green */
html body #ro-launch {
  background: linear-gradient(145deg, #15803d, #16a34a 60%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: rgba(0, 0, 0, 0.30) 2px 2px 5px inset,
              rgba(255, 255, 255, 0.28) -2px -2px 3px inset !important;
}
html body #ro-launch svg,
html body #ro-launch .ea-lbl,
html body #ro-launch * { color: #fff !important; stroke: currentColor !important; }
html body #ro-launch:hover {
  background: linear-gradient(145deg, #166534, #15803d 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.40) 2px 2px 7px inset,
              rgba(255, 255, 255, 0.22) -2px -2px 3px inset !important;
}
html body #ro-launch:active {
  background: linear-gradient(145deg, #16a34a, #15803d 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.34) 1px 1px 0 inset,
              rgba(255, 255, 255, 0.18) -1px -1px 3px inset !important;
}

/* Reply to Customer E-mail - fuchsia */
html body #ea-launch {
  background: linear-gradient(145deg, #a21caf, #c026d3 60%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: rgba(0, 0, 0, 0.30) 2px 2px 5px inset,
              rgba(255, 255, 255, 0.28) -2px -2px 3px inset !important;
}
html body #ea-launch svg,
html body #ea-launch .ea-lbl,
html body #ea-launch * { color: #fff !important; stroke: currentColor !important; }
html body #ea-launch:hover {
  background: linear-gradient(145deg, #86198f, #a21caf 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.40) 2px 2px 7px inset,
              rgba(255, 255, 255, 0.22) -2px -2px 3px inset !important;
}
html body #ea-launch:active {
  background: linear-gradient(145deg, #c026d3, #a21caf 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.34) 1px 1px 0 inset,
              rgba(255, 255, 255, 0.18) -1px -1px 3px inset !important;
}

/* Default View - indigo */
html body .ea-col > button:nth-of-type(2) {
  background: linear-gradient(145deg, #4338ca, #4f46e5 60%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: rgba(0, 0, 0, 0.30) 2px 2px 5px inset,
              rgba(255, 255, 255, 0.28) -2px -2px 3px inset !important;
}
html body .ea-col > button:nth-of-type(2) svg,
html body .ea-col > button:nth-of-type(2) .ea-lbl,
html body .ea-col > button:nth-of-type(2) * { color: #fff !important; stroke: currentColor !important; }
html body .ea-col > button:nth-of-type(2):hover {
  background: linear-gradient(145deg, #3730a3, #4338ca 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.40) 2px 2px 7px inset,
              rgba(255, 255, 255, 0.22) -2px -2px 3px inset !important;
}
html body .ea-col > button:nth-of-type(2):active {
  background: linear-gradient(145deg, #4f46e5, #4338ca 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.34) 1px 1px 0 inset,
              rgba(255, 255, 255, 0.18) -1px -1px 3px inset !important;
}

/* Columns Unlocked - slate */
html body .ea-col > button:nth-of-type(1) {
  background: linear-gradient(145deg, #475569, #64748b 60%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: rgba(0, 0, 0, 0.30) 2px 2px 5px inset,
              rgba(255, 255, 255, 0.28) -2px -2px 3px inset !important;
}
html body .ea-col > button:nth-of-type(1) svg,
html body .ea-col > button:nth-of-type(1) .ea-lbl,
html body .ea-col > button:nth-of-type(1) * { color: #fff !important; stroke: currentColor !important; }
html body .ea-col > button:nth-of-type(1):hover {
  background: linear-gradient(145deg, #334155, #475569 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.40) 2px 2px 7px inset,
              rgba(255, 255, 255, 0.22) -2px -2px 3px inset !important;
}
html body .ea-col > button:nth-of-type(1):active {
  background: linear-gradient(145deg, #64748b, #475569 60%) !important;
  box-shadow: rgba(0, 0, 0, 0.34) 1px 1px 0 inset,
              rgba(255, 255, 255, 0.18) -1px -1px 3px inset !important;
}