/*
 * The status pill, once, for every surface.
 *
 * Loaded by the public site and the merchant portal through
 * partials/design-head.blade.php, and by the admin panel through the
 * render hook in AdminPanelProvider. Filament purges its own stylesheet,
 * which is why the ops boards each used to carry a copy of these rules
 * with their own hand-written colours.
 *
 * Colour says who holds the thing. The marker glyph says the same without
 * relying on colour, because "moving" (orange) and "delivered" (green) sit
 * in the same column and are the classic confusable pair.
 */

.tw-pill {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  border-radius: 3px;
  padding: .15em .55em;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}

.tw-pill::before {
  content: attr(data-marker);
  font-size: .85em;
  line-height: 1;
  opacity: .85;
  /* Glyphs, not text: never read aloud as part of the label. */
  speak: never;
}

/* Not ours yet, or nobody has acted on it. */
.tw-untouched {
  /* Hollow, not grey: told apart from "out of the cycle" by shape, not hue. */
  background: #FFFFFF;
  color: #4A5466;
  border-color: #9AA5B5;
  border-style: dashed;
}

/* In our hands, stationary, waiting for us. */
.tw-held {
  background: #E3ECFC;
  color: #1546A8;
  border-color: #C9D9F7;
}

/* Moving right now. The signal colour means movement and nothing else. */
.tw-moving {
  background: #FDEBDD;
  color: #A8430A;
  border-color: #F8D2B4;
}

/* Finished, and finished well. */
.tw-done {
  background: #DFF3E8;
  color: #17663F;
  border-color: #BFE3CF;
}

/* Stopped. Somebody has to decide something. */
.tw-blocked {
  background: #FBE3E1;
  color: #A51F19;
  border-color: #F3C1BC;
  font-weight: 700;
}

/* Out of the cycle. Quietest thing on the screen. */
.tw-closed {
  background: #EEF0F3;
  color: #4A5466;
  border-color: #DDE2E8;
}

/* A status no domain claims. Visible on purpose so gaps get noticed. */
.tw-unknown {
  background: repeating-linear-gradient(-45deg, #EEF2F7, #EEF2F7 5px, #D9E0EA 5px, #D9E0EA 10px);
  color: #4A5466;
  border-color: #C3CDDB;
}

/* Dense tables ask for a slightly tighter pill. */
.tw-pill-sm {
  font-size: .7rem;
  padding: .1em .5em;
  gap: .3em;
}

/* A legend, for boards that want to explain the colours once. */
.tw-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}