/*
 * The painted sign: the one loud thing on each tool.
 *
 * A board is kept for the live object a tool exists to set, and nothing else:
 * a place's status on /vendor, the verdict at the /door, the alert that is out
 * on /console. It is an enamel field in the state's own paint with a cream
 * pinstripe and block letters, because that is what a counter's sign is. Every
 * other heading, figure and label on the desk is set in the UI face, so the
 * sign never has to compete.
 */

.sign {
  --sb: var(--g-600);
  --sb-deep: var(--g-950);
  --sign-text: var(--sign-cream);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--s-6) var(--s-6) var(--s-5);
  border-radius: var(--r-4);
  background: var(--sb);
  color: var(--sign-text);
  box-shadow:
    inset 0 0 0 6px var(--sb),
    inset 0 0 0 7.5px color-mix(in srgb, var(--sign-cream) 36%, transparent),
    0 18px 40px -24px color-mix(in srgb, var(--sb-deep) 85%, transparent);
  transition: background 0.4s var(--e-out), color 0.4s var(--e-out);
}
.sign--red { --sb: #c42638; --sb-deep: #45090f; }
.sign--yellow { --sb: #e5ab1c; --sb-deep: #6a4604; --sign-text: var(--sign-ink); }
.sign--ink { --sb: #1d1e23; --sb-deep: #000; }

.sign-word {
  display: block;
  font-family: var(--f-sign);
  font-size: 4rem;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  text-shadow: 0.045em 0.05em 0 var(--sb-deep);
  text-wrap: balance;
}
.sign--yellow .sign-word { text-shadow: 0.045em 0.05em 0 color-mix(in srgb, var(--sb-deep) 55%, transparent); }
.sign-line {
  margin-top: var(--s-2);
  font-family: var(--f-sign);
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

/*
 * Figures on the desk are set in the UI face, tabular, like any figure in a
 * tool. Only a figure painted on a sign takes the sign's letters.
 */
.sign-num { font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -0.02em; }
.sign .sign-num { font-family: var(--f-sign); font-weight: 900; letter-spacing: 0; text-shadow: 0.04em 0.045em 0 var(--sb-deep); }
.sign-title { font-family: var(--f-ui); }

/* A small plate naming a kind, used on sign-adjacent lists only. */
.sign-plate {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--raise-2);
  color: var(--ink-2);
  font-size: var(--t-12);
  font-weight: 650;
}

/* The tag that says how long is left; it swings once when its figure changes. */
.sign-tag {
  display: inline-grid;
  gap: 2px;
  padding: 8px 12px;
  border-radius: var(--r-2);
  background: var(--sign-cream);
  color: var(--sign-ink);
  line-height: 1;
  transform-origin: 50% -20px;
}
.sign-tag b { font-family: var(--f-sign); font-size: 1.75rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.sign-tag span { font-size: var(--t-11); font-weight: 600; opacity: 0.7; }
.sign-tag.swing,
.v-inst-left.swing { animation: sign-swing 0.9s var(--e-out); }
@keyframes sign-swing {
  0% { transform: rotate(0); }
  25% { transform: rotate(4deg); }
  55% { transform: rotate(-3deg); }
  80% { transform: rotate(1deg); }
  100% { transform: rotate(0); }
}

/* A word re-lettered left to right when it changes (sign.js). */
.sign-letters { display: inline; }
.sign-letters .ch {
  display: inline-block;
  white-space: pre;
  animation: sign-letter 0.28s var(--e-out) both;
  animation-delay: calc(var(--k, 0) * var(--step, 30ms));
}
@keyframes sign-letter {
  from { clip-path: inset(-10% 100% -10% 0); transform: translateY(0.04em); }
  to { clip-path: inset(-10% -20% -10% 0); transform: none; }
}

/* Over is struck through, so a state is read by its mark as well as its colour. */
.sign-over { position: relative; opacity: 0.6; text-decoration: line-through; text-decoration-thickness: 2px; }

/* The odometer: each digit a column of 0 to 9, rolled to its figure. */
.odo { display: inline-flex; line-height: 1; font-variant-numeric: tabular-nums; }
.odo-d { display: inline-block; width: 0.5em; height: 1em; overflow: hidden; }
.odo-col {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--d, 0) * -1em));
  transition: transform 0.6s var(--e-out);
}
.odo-col i { display: block; height: 1em; font-style: normal; text-align: center; }