/* horeca.css — owned by WP-B2B-HORECA-SUPPORT. Tokens only (docs/vfx-master-spec.md §1 rule 5).
   Motion here is transform/opacity only; every duration and easing is a token. */

/* --------------------------------------------------------- CUT-OFF RING */
/* The ring around the clock: fills as the ordering window drains. The fill
   circle is driven by horeca.js (stroke-dashoffset, paint-only); data-band
   is the colour and the signal that survives reduced motion. */
.hc-ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  color: var(--app-horeca);
}
.hc-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hc-ring-track { fill: none; stroke: var(--line); stroke-width: 3; }
.hc-ring-fill { fill: none; stroke: var(--fc-info); stroke-width: 3; stroke-linecap: round; }
.hc-ring[data-band="warn"] .hc-ring-fill { stroke: var(--fc-warn); }
.hc-ring[data-band="late"] .hc-ring-fill { stroke: var(--fc-danger); }
.hc-ring[data-band="warn"] { color: var(--fc-warn); }
.hc-ring[data-band="late"] { color: var(--fc-danger); }
.hc-ring-in { position: relative; display: inline-flex; }

/* ---------------------------------------------------------- COUNTDOWN */
/* The minutes pill: amber inside the last hour, red past the cut-off. */
.hc-eta {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-s-1);
  padding: 0 var(--fc-s-3);
  min-height: var(--fc-s-7);
  border-radius: var(--fc-r-pill);
  background: var(--on-glass-chip);
  color: var(--txt-1);
  font-size: var(--fc-t-sm);
  font-weight: var(--fc-w-semi);
  white-space: nowrap;
}
.hc-eta-dot { width: var(--fc-s-2); height: var(--fc-s-2); border-radius: var(--fc-r-pill); background: var(--fc-info); flex: none; }
.hc-eta[data-band="warn"] .hc-eta-dot { background: var(--fc-warn); }
.hc-eta[data-band="late"] .hc-eta-dot { background: var(--fc-danger); }
.hc-eta[data-band="warn"] { color: var(--fc-warn); }
.hc-eta[data-band="late"] { color: var(--fc-danger); }
.hc-eta-u { color: var(--txt-3); font-weight: var(--fc-w-regular); }

/* -------------------------------------------------------------- ASSETS */
/* Prop stills (van, sack) and the sleeping Pip on the late board. */
.hc-van { width: 64px; height: 64px; flex: none; }
.hc-van img, .hc-van canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.hc-sack { width: 28px; height: 28px; flex: none; }
.hc-sack img, .hc-sack canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.hc-pip { margin: 0; }
.hc-pip[hidden] { display: none; }
.hc-late { align-items: center; }

/* ------------------------------------------------------------- CONFIRM */
/* The mark beside the confirmed heading: a drawn check. Sized like an lrow-ic. */
.hc-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--fc-r-md);
  background: var(--on-glass-chip);
  color: var(--txt-1);
}
.hc-mark .vfx-check { display: block; }