/* Styles for the hub view. All rules are scoped to .hv so the module can be embedded anywhere. */
.hv {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: var(--font, Degular, system-ui, sans-serif);
  color: var(--eb-accent, #3F2F3A);
  user-select: none;
}
.hv svg {
  display: block;
  width: 100%;
  height: 100%;
}
:where(.hv text) {
  font-family: inherit;
  fill: var(--eb-accent, #3F2F3A);
}

/* Smooth movement for anything that changes position between frames */
.hv-t {
  transition: transform 1.8s cubic-bezier(.45, 0, .25, 1), opacity .7s ease;
}
.hv-dot {
  transition: transform 2.2s cubic-bezier(.45, 0, .25, 1), opacity .6s ease, fill .5s ease, stroke .5s ease;
}

/* Sizes are drawing units. On the 1920x1080 loop screen the drawing shows at about two thirds of its size, so
   19 units end up near 12 px. The compact mini hubs set their own, larger sizes. */

/* Column headers and titles */
.hv-colhead {
  font-size: 17px;
  letter-spacing: .08em;
  text-transform: uppercase;
  fill: var(--eb-accent-light, #6c5465);
  opacity: .8;
}
.hv-title {
  font-size: 34px;
  font-weight: 700;
}
.hv-clock {
  font-size: 46px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hv--compact .hv-title { font-size: 44px; }
.hv--compact .hv-clock { font-size: 56px; }
.hv--compact .hv-detail { display: none; }

/* Text layer above the worker dots. A soft halo keeps it readable where a dot passes behind it. */
.hv-labels text {
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.hv--heat .hv-labels text { stroke: rgba(255, 255, 255, .55); }
.hv-labels .hv-badgetext { stroke: none; }

/* Zones */
.hv-zone {
  stroke-width: 2.5;
  transition: fill .8s ease, stroke .6s ease;
}
.hv-label { font-size: 26px; font-weight: 700; }
.hv-sub { font-size: 19px; fill: var(--eb-accent-light, #6c5465); }
.hv-big { font-size: 34px; font-weight: 700; display: none; font-variant-numeric: tabular-nums; }
.hv-bigcap { font-size: 18px; font-weight: 400; fill: var(--eb-accent-light, #6c5465); }
.hv--compact .hv-label { font-size: 31px; }
.hv--compact .hv-sub { font-size: 21px; }
.hv--compact .hv-big { font-size: 40px; }
.hv--heat .hv-big { display: block; }
.hv--heat .hv-slot { opacity: 0; }
.hv--heat .hv-dot { opacity: .55; }
.hv-slot {
  fill: none;
  stroke: var(--eb-primary-light, #80a4cb);
  stroke-width: 1.2;
  opacity: .5;
  transition: opacity .5s;
}

/* Workers */
.hv-dot { stroke-width: 2; }
.hv-dot--work { fill: var(--eb-primary, #5581B0); stroke: #fff; }
.hv-dot--walk { fill: #fff; stroke: var(--eb-primary, #5581B0); stroke-dasharray: 3 2.5; }
.hv-dot--idle { fill: var(--idle, #9aa5b1); stroke: #fff; }
.hv-dot--home { fill: var(--eb-accent-light, #6c5465); stroke: #fff; opacity: .75; }
.hv-dot--gone { opacity: 0; }

/* Trucks and doors */
.hv-trailer { fill: #fff; stroke: var(--eb-accent-light, #6c5465); stroke-width: 2; }
.hv-track { fill: #e6edf4; }
.hv-bar { fill: var(--eb-primary, #5581B0); transition: width .5s linear, fill .6s ease; }
.hv-cab { fill: var(--eb-accent, #3F2F3A); }
.hv-wheel { fill: var(--eb-accent, #3F2F3A); }
.hv-truck--express .hv-cab { fill: var(--eb-highlight, #E7FF00); stroke: var(--eb-accent, #3F2F3A); stroke-width: 2; }
.hv-truck--approaching .hv-trailer { stroke-dasharray: 4 3; fill: none; }
.hv-truck--approaching .hv-cab { fill: var(--eb-accent-light, #6c5465); opacity: .6; }
.hv-truck--gone { opacity: 0; }
.hv-late { fill: var(--warn, #e0a030); stroke: #fff; stroke-width: 1.5; }
.hv-door { fill: #cfc7ba; transition: fill .5s; }
.hv-door--busy { fill: var(--eb-primary, #5581B0); }
.hv-doornum { font-size: 17px; font-weight: 700; fill: #fff !important; text-anchor: middle; }
.hv-yard { fill: rgba(255, 255, 255, .45); stroke: #d9d0c2; stroke-width: 2; stroke-dasharray: 6 5; }
.hv-yardlabel { font-size: 19px; font-weight: 700; fill: var(--eb-accent-light, #6c5465); }
.hv--compact .hv-yardlabel { font-size: 21px; }
.hv-gate { stroke: var(--eb-accent, #3F2F3A); stroke-width: 6; stroke-linecap: round; }
.hv-gate2 { stroke: #fff; stroke-width: 6; stroke-dasharray: 7 7; stroke-linecap: butt; }

/* Conveyors, sorter, chutes */
.hv-belt { fill: none; stroke: #ddd4c6; stroke-width: 15; stroke-linecap: round; }
.hv-flow { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 16; }
.hv-loop { fill: rgba(255, 255, 255, .5); stroke: #ddd4c6; stroke-width: 15; transition: stroke .5s; }
.hv-loop--stopped { stroke: var(--bad, #d0464b); }
.hv-looptitle { font-size: 26px; font-weight: 700; text-anchor: middle; }
.hv-loopsub { font-size: 19px; text-anchor: middle; fill: var(--eb-accent-light, #6c5465); }
.hv--compact .hv-looptitle { font-size: 30px; }
.hv--compact .hv-loopsub { font-size: 21px; }
.hv-badge { fill: var(--bad, #d0464b); transition: opacity .4s; }
.hv-badgetext { fill: #fff !important; font-size: 20px; font-weight: 700; text-anchor: middle; }
.hv-chute { fill: #e6edf4; stroke: var(--eb-accent-light, #6c5465); stroke-width: 1.5; }
.hv-chutefill { transition: width .6s ease, fill .6s ease; }
.hv-chuteval { font-size: 21px; font-weight: 700; text-anchor: middle; }
.hv--compact .hv-chuteval { font-size: 24px; }
.hv-buf { fill: #e6edf4; }
.hv-buffill { transition: width .5s ease, fill .5s ease; }
.hv-buftext { font-size: 19px; }
.hv--compact .hv-buftext { font-size: 21px; }

/* Departures */
.hv-deplabel { font-size: 21px; font-weight: 700; }
.hv-depclock { font-size: 20px; text-anchor: end; fill: var(--eb-accent-light, #6c5465); font-variant-numeric: tabular-nums; }
.hv-depval { font-size: 19px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.hv--compact .hv-deplabel, .hv--compact .hv-depclock { font-size: 24px; }
.hv--compact .hv-depval { font-size: 26px; stroke-width: 6px; }
.hv-deptruck { transition: transform 2.4s cubic-bezier(.5, 0, .9, .6), opacity 2.4s ease; }
.hv-deptruck--gone { transform: translateX(200px); opacity: 0; }
.hv-depresult { font-size: 24px; font-weight: 700; opacity: 0; transition: opacity 1s ease 1.2s; }
.hv-depresult--show { opacity: 1; }
.hv-depresult--ok { fill: var(--ok, #3d9a6b); }
.hv-depresult--bad { fill: var(--bad, #d0464b); font-size: 30px; }
.hv--compact .hv-depresult { font-size: 26px; }
.hv--compact .hv-depresult--bad { font-size: 34px; }
.hv-depflash { fill: var(--bad, #d0464b); opacity: 0; pointer-events: none; }
.hv-depflash--go { animation: hv-redflash 1s ease-in-out 4; }
@keyframes hv-redflash {
  0%, 100% { opacity: 0; }
  50% { opacity: .35; }
}

/* Footer figures */
.hv-missedlabel { font-size: 19px; text-anchor: end; fill: var(--eb-accent-light, #6c5465); }
.hv-missed { font-size: 40px; font-weight: 700; text-anchor: end; font-variant-numeric: tabular-nums; transition: fill .5s; }
.hv--compact .hv-missedlabel { font-size: 21px; }
.hv--compact .hv-missed { font-size: 48px; }
.hv-legend { font-size: 18px; }
.hv-legendcap { font-size: 17px; fill: var(--eb-accent-light, #6c5465); }
.hv-legend-schem, .hv-legend-heat { transition: opacity .4s; }
.hv--heat .hv-legend-schem { opacity: 0; }
.hv:not(.hv--heat) .hv-legend-heat { opacity: 0; }
.hv-home { fill: rgba(255, 255, 255, .55); stroke: #d9d0c2; stroke-width: 2; }

/* Flash after an accepted move */
.hv-ring {
  fill: none;
  stroke: var(--eb-highlight, #E7FF00);
  stroke-width: 10;
  pointer-events: none;
  animation: hv-ring 2.6s ease-out forwards;
}
.hv-ringedge {
  fill: none;
  stroke: var(--eb-accent, #3F2F3A);
  stroke-width: 3;
  pointer-events: none;
  animation: hv-ring 2.6s ease-out forwards;
}
.hv-pill { animation: hv-pill 2.6s ease-out forwards; pointer-events: none; }
.hv-pilltext { font-size: 22px; font-weight: 700; text-anchor: middle; }
.hv--compact .hv-pilltext { font-size: 28px; }
@keyframes hv-ring {
  0% { opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes hv-pill {
  0% { opacity: 0; transform: translateY(8px); }
  12% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-t, .hv-dot { transition-duration: .01s; }
}