/* nw_player.css -- the look of assets/js/nw_player.js: the transport bar, the vehicle, who was aboard.
 *
 * Every colour is a variable. The site's own (style.css) are used where they exist, each with a plain fallback, so
 * the player also draws correctly on a page that loads no site stylesheet. The ship's livery is the one set of
 * fixed colours, and it is declared once, here, as variables a page can override (nw_player.js passes a cruise
 * line's own colours in as --nwp-hull / --nwp-funnel / --nwp-trim for a ship that is not Disney's).
 */
.nwp-on {
  --nwp-bg: var(--surface, #0a1a33);
  --nwp-ink: var(--ink, #f4ecd8);
  --nwp-mute: var(--ink-mute, #b9b09a);
  --nwp-line: var(--line-strong, rgba(201, 169, 97, .55));
  --nwp-accent: var(--brass, #c9a961);
  --nwp-on-accent: var(--on-brass, #060f1f);
  --nwp-hi: var(--brass-bright, #e3c178);
  --nwp-hull: #043a5b; --nwp-funnel: #b0232a; --nwp-trim: #fdd05b; --nwp-upper: #ffffff; --nwp-outline: #ffffff;
}

/* ---- the bar: inside the map, along its bottom edge, so it travels into full screen with it ---- */
.nwp-hud {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1100;
  width: min(720px, calc(100% - 20px)); box-sizing: border-box; padding: 10px 12px;
  background: var(--nwp-bg); color: var(--nwp-ink); border: 1px solid var(--nwp-line); border-radius: 12px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7); font: 14px/1.35 var(--font-sans, system-ui, sans-serif); cursor: default;
}
.nwp-row { display: flex; align-items: center; gap: 10px; }
.nwp-top { margin-bottom: 8px; }
.nwp-icon { font-size: 24px; line-height: 1; }
.nwp-text { flex: 1 1 auto; min-width: 0; }
.nwp-title { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nwp-sub { color: var(--nwp-mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nwp-when { flex: 0 0 auto; text-align: right; }
.nwp-date { font-weight: 700; font-size: 13.5px; color: var(--nwp-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nwp-date:empty { display: none; }
.nwp-faces { display: flex; justify-content: flex-end; margin-top: 3px; }
.nwp-faces:empty { display: none; }
.nwp-face { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid var(--nwp-bg); margin-left: -7px; background: var(--nwp-mute); }
.nwp-face:first-child { margin-left: 0; }

.nwp-ctl { gap: 6px; }
.nwp-ctl button {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--nwp-ink); border: 1px solid var(--nwp-line); font-size: 15px; line-height: 1;
}
.nwp-ctl button:hover, .nwp-ctl button:focus-visible { background: var(--nwp-accent); color: var(--nwp-on-accent); border-color: var(--nwp-accent); }
.nwp-ctl button[data-a="toggle"] { background: var(--nwp-accent); color: var(--nwp-on-accent); border-color: var(--nwp-accent); }
.nwp-ctl button[aria-pressed="true"] { border-color: var(--nwp-hi); color: var(--nwp-hi); }
.nwp-ctl button[data-a="faces"][aria-pressed="false"] { opacity: .5; }
.nwp-slider { flex: 1 1 120px; min-width: 60px; accent-color: var(--nwp-accent); }
.nwp-speed {
  flex: 0 0 auto; height: 34px; padding: 0 6px; border-radius: 8px; font: inherit; font-size: 12.5px;
  background: var(--nwp-bg); color: var(--nwp-ink); border: 1px solid var(--nwp-line);
}
/* The reader's switch, and the site's: with faces off no picture shows anywhere the player draws one. */
.nwp-nofaces .nwp-faces, .nwp-nofaces .nwp-riders { display: none; }

/* ---- on the map ---- */
.nwp-veh { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.nwp-emoji { font-size: 26px; line-height: 32px; width: 32px; height: 32px; text-align: center; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.nwp-shipart svg { display: block; stroke: var(--nwp-outline); stroke-width: 1.6; stroke-linejoin: round; paint-order: stroke; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.nwp-shipart .hull { fill: var(--nwp-hull); }
.nwp-shipart .funnel { fill: var(--nwp-funnel); }
.nwp-shipart .trim { fill: var(--nwp-trim); stroke: none; }
.nwp-shipart.is-line { --nwp-trim: var(--nwp-upper); }      /* not a Disney ship: no yellow stripe */
.nwp-shipart .upper { fill: var(--nwp-upper); stroke: var(--nwp-hull); stroke-width: .7; paint-order: normal; }
.nwp-tag {
  margin-top: 1px; padding: 0 5px; border-radius: 3px; white-space: nowrap;
  background: var(--nwp-accent); color: var(--nwp-on-accent); border: 1px solid var(--nwp-outline);
  font: 700 10px/14px var(--font-sans, system-ui, sans-serif);
}
.nwp-riders { display: flex; margin-top: 2px; }
.nwp-rider { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--nwp-outline); margin-left: -5px; background: var(--nwp-mute); }
.nwp-rider:first-child { margin-left: 0; }
.nwp-pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--nwp-hi); border: 2px solid var(--nwp-bg); animation: nwpPulse 1.6s ease-out infinite; }
@keyframes nwpPulse { 0% { box-shadow: 0 0 0 0 rgba(227, 193, 120, .65); } 100% { box-shadow: 0 0 0 16px rgba(227, 193, 120, 0); } }
path.nwp-trail { pointer-events: none; }
/* A leg's colour by mode, for a page that hands the player no styles of its own. The same seven colours as
   LEG_STYLES in app.js, which the homepage passes in itself: change one, change the other. (Leaflet writes its
   own stroke as an attribute; a rule here outranks it.) */
.nwp-on { --nwp-cruise: #c9a961; --nwp-train: #ff8a5b; --nwp-flight: #6fb8ff; --nwp-road: #7adba0; --nwp-helicopter: #c79bff; --nwp-boat: #5fd3c4; }
path.nwp-auto.m-cruise { stroke: var(--nwp-cruise); } path.nwp-auto.m-train { stroke: var(--nwp-train); }
path.nwp-auto.m-flight { stroke: var(--nwp-flight); } path.nwp-auto.m-road, path.nwp-auto.m-bus { stroke: var(--nwp-road); }
path.nwp-auto.m-helicopter { stroke: var(--nwp-helicopter); } path.nwp-auto.m-boat { stroke: var(--nwp-boat); }

/* ---- full screen (the class; the browser's own full screen sits on top of it where there is one) ---- */
html.nwp-noscroll { overflow: hidden; }
.nwp-full { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; z-index: 3000 !important; border-radius: 0 !important; }

/* A PHONE. The map a trip page gives the player is about 340px square, and the bar at its desktop size covered
   two thirds of it (232px). Here it is three short rows: where and when, the slider, the buttons. The second
   line of text ("Cruise, leg 5 of 9, trip title") goes; the page around the map already says which trip. */
@media (max-width: 640px) {
  .nwp-hud { bottom: calc(6px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 12px); padding: 6px 8px; border-radius: 10px; }
  .nwp-top { flex-wrap: wrap; gap: 2px 6px; margin-bottom: 4px; }
  .nwp-icon { font-size: 18px; }
  .nwp-title { font-size: 13.5px; }
  .nwp-sub { display: none; }
  .nwp-when { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; }
  .nwp-date { font-size: 12.5px; }
  .nwp-faces { margin-top: 0; }
  .nwp-face { width: 20px; height: 20px; }
  .nwp-ctl { flex-wrap: wrap; gap: 4px; }
  .nwp-slider { order: -1; flex: 1 1 100%; margin: 0 0 2px; }
  .nwp-ctl button { width: 34px; height: 34px; font-size: 14px; }
  .nwp-speed { height: 34px; max-width: 72px; padding: 0 2px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .nwp-pulse { animation: none; } }