/* Spud & Root: the production floor map (packaging-map.js), on the
   Packing Floor menu and on any page that mounts it with PackMap.mount().
   Everything is under .pkmap, so it doesn't touch the page around it. */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

.pkmap { display: block; margin: 0; }
.pkmap__svg { display: block; width: 100%; height: auto; max-height: 72vh; margin: 0 auto; border-radius: 10px; -webkit-user-select: none; user-select: none; }
.pkmap__hit, .pkmap__label { cursor: pointer; }
.pkmap__hit { transition: fill 0.15s; }
@media (hover: hover) { .pkmap__hit:hover { fill: rgba(233, 196, 106, 0.1); } }
.pkmap__n { fill: #fff; font: 700 9.5px system-ui, sans-serif; }
.pkmap__name { fill: #f4f1de; font: 600 10px "Fredoka", system-ui, sans-serif; }
.pkmap__stars { fill: #16303b; font: 700 8.5px system-ui, sans-serif; }
.pkmap__pick {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f4f1de;
  color: #16303b;
  font-family: "Fredoka", system-ui, sans-serif;
}
.pkmap__pick[hidden] { display: none; }
.pkmap__text { flex: 1; margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; }
.pkmap__text b { font-weight: 700; }
.pkmap__play {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: #e76f51;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) { .pkmap__hit { transition: none; } }

/* The four lines' variety chips, and the line stations' names in the gutter. */
.pkmap__line { fill: #16303b; font: 700 9px "Fredoka", system-ui, sans-serif; pointer-events: none; }
.pkmap__row { pointer-events: none; }
.pkmap__rown { fill: #2a9d8f; font: 700 10px system-ui, sans-serif; }
.pkmap__rowname { fill: #f4f1de; font: 600 8.4px "Fredoka", system-ui, sans-serif; }
.pkmap__rowstars { fill: #e9c46a; font: 700 8px system-ui, sans-serif; }