/* 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:not(.is-here):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; }

/* ---------- The floor panel (PackMap.panel) ----------
   On a wide screen (PackMap.WIDE), the same panel on the left of the menu and
   of every game: the map with the station you're on marked, and the nine
   stations as links, the map as big as the panel allows and the list the same
   height. Its page lays it out (pk-game.css, packaging-menu.css); it's named for
   the cross-fade between pages, so it holds still. */
.pg-floor { display: none; }
@media (min-width: 1200px) and (min-height: 560px) {
  .pg-floor {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    margin: 12px 0;
    padding: 18px 20px 20px;
    border-radius: 18px;
    background: #16303b;
    color: #fff8ea;
    font-family: "Fredoka", system-ui, sans-serif;
  }
}
.pg-floor__head { display: flex; align-items: center; gap: 12px; }
.pg-floor__leave {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 10px;
  background: #1c3a47; color: #f4f1de;
  font-size: 26px; line-height: 1; text-decoration: none;
}
.pg-floor__kicker { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.pg-floor__title { margin: 0; font-size: 26px; font-weight: 700; line-height: 1; }
.pg-floor__here { margin: 0; font-size: 15px; font-weight: 500; opacity: .85; }
.pg-floor__body {
  display: grid;
  grid-template-columns: auto 280px;   /* PackMap.panel's LIST_W */
  justify-content: center;
  align-items: start;
  gap: 18px;                           /* and LIST_GAP */
  min-height: 0;
}
.pg-floor__map .pkmap__svg { max-height: none; height: 0; }   /* PackMap.panel sizes it */
.pg-floor__list {
  display: grid;
  grid-template-rows: repeat(9, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-floor__stop {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 0 12px;
  border-radius: 10px;
  background: #1c3a47;
  color: #f4f1de;
  text-decoration: none;
  transition: background-color .15s;
}
.pg-floor__stop:hover { background: #1c3a47; box-shadow: inset 0 0 0 2px #2a9d8f; }
.pg-floor__stop:focus-visible { outline: 3px solid #e9c46a; outline-offset: 2px; }
.pg-floor__stop.is-here { background: #f4f1de; color: #1f2a37; box-shadow: 0 0 0 3px #e76f51; }
.pg-floor__n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px;
  background: #2a9d8f; color: #fff; font: 700 13px/1 system-ui, sans-serif;
}
.is-here .pg-floor__n { background: #e76f51; }
.pg-floor__name { font-size: 15px; font-weight: 700; line-height: 1.15; }
.pg-floor__name small { display: block; font-size: 12px; font-weight: 500; opacity: .7; }
.pg-floor__stars { display: flex; gap: 2px; }
.pg-floor__stars i {
  width: 13px; height: 13px; background: rgba(255, 255, 255, .22);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.is-here .pg-floor__stars i { background: #d6d2bd; }
.pg-floor__stars i.is-on { background: #e9c46a; }
.pg-floor { view-transition-name: pg-floor; }
::view-transition-group(pg-floor) { animation-duration: 0s; }