/* The outage banner on the customer ordering page (public/shared/status-banner.js).
   Customer pages load style.css, not the design system (chockers.css), so the banner brings the little it needs:
   the dark-palette tokens and the ck-status / ck-alert rules below are copied unchanged from chockers.css
   (Le Crépuscule Écarlate is always dark: the [data-theme="dark"] values). Change them in chockers.css, then here.
   Scoped tokens sit on .status-banner so nothing else on the page is touched. */
.status-banner {
  --ink: #fff;
  --on-fill: #000;
  --surface-2: #1C1C1C;
  --c-yellow: #FDFE00;
  --c-blue: #55A6FC;
  --c-red: #FF2C38;
  --c-green: #00C04C;
  --c-cyan: #4EEAFF;
  --c-purple: #AF65FF;
  --info: var(--c-blue);
  --success: var(--c-green);
  --warning: var(--c-yellow);
  --danger: var(--c-red);
  --weight-strong: 600;
  --weight-loud: 900;
  --measure: 48ch;
  --line-2: 2px;
  --space-half: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --status-icon-size: 1em;
  --status-icon-line: var(--ink);             --status-icon-line-w: var(--line-2);
  --status-weight: var(--weight-strong);      --status-gap: var(--space-1);
  --status-solid-ink: var(--on-fill);         --status-solid-weight: var(--weight-loud);
  --status-solid-pad-y: var(--space-half);   --status-solid-pad-x: var(--space-1);
  --status-done: var(--success);              /* check */
  --status-running: var(--c-cyan);            /* play */
  --status-paused: var(--c-purple);           /* two bars */
  --status-queued: transparent;               /* hollow square */
  --status-warning: var(--warning);           /* triangle */
  --status-failed: var(--danger);             /* cross */
  --status-info: var(--info);                 /* diamond */
  --alert-line: var(--ink);                   --alert-line-w: var(--line-2);
  --alert-pad-y: var(--space-half);           --alert-pad-x: var(--space-2);
  --alert-weight: var(--weight-strong);
  margin: var(--space-1) var(--space-2);
  color: var(--ink);
}
/* Status: shape + word. Solid form: the fill carries a black shape and word. */
.ck-status {
  --s-fill: var(--status-info);
  --s-solid-bg: var(--s-fill);
  --s-solid-ink: var(--status-solid-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--status-gap);
  font-weight: var(--status-weight);
  color: var(--ink);
}
.ck-status > svg {
  flex: none;
  width: var(--status-icon-size);
  height: var(--status-icon-size);
  fill: var(--s-fill);
  stroke: var(--status-icon-line);
  stroke-width: var(--status-icon-line-w);
  stroke-linejoin: miter;
}
.ck-status--done { --s-fill: var(--status-done); }
.ck-status--running { --s-fill: var(--status-running); }
.ck-status--paused { --s-fill: var(--status-paused); }
.ck-status--queued { --s-fill: var(--status-queued); --s-solid-bg: var(--surface-2); --s-solid-ink: var(--ink); }
.ck-status--warning { --s-fill: var(--status-warning); }
.ck-status--failed { --s-fill: var(--status-failed); }
.ck-status--info { --s-fill: var(--status-info); }
.ck-status--solid {
  padding: var(--status-solid-pad-y) var(--status-solid-pad-x);
  background: var(--s-solid-bg);
  color: var(--s-solid-ink);
  font-weight: var(--status-solid-weight);
}
.ck-status--solid > svg { fill: var(--s-solid-ink); stroke: none; }
.ck-status--solid.ck-status--queued > svg { fill: none; stroke: var(--s-solid-ink); }

/* =================================================================== */
/* Inline alert: a solid status block, then the message, in one frame. */
.ck-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: var(--measure);
  border: var(--alert-line-w) solid var(--alert-line);
}
.ck-alert > .ck-status--solid { flex: none; }
.ck-alert > p { flex: 1 1 0; align-self: center; min-width: 0; margin: 0; padding: var(--alert-pad-y) var(--alert-pad-x); font-weight: var(--alert-weight); }