/* Bilbo (templates/bilbo.html): the 4-day Tokyo plan on a 3D night map of the city
   (static/motion/bilbo.js), then the features drawn as Bilbo's own UI. Anything drawn from
   the app keeps the app's rounded corners; the site chrome around it stays square. */

/* ---------- the stage ---------- */
/* The map is drawn opaque, so the word sits over the city in the hero and lifts away as the
   story starts. */
.mx-app--bilbo .mx-story__word { z-index: 1; --word: 21.6vw; --word-phone: 25vw; }
.mx-app--bilbo .mx-story__glow {
  background: radial-gradient(42% 52% at 64% 52%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%);
}
/* a scrim under the copy column, so the type never fights the streets (phones put the copy
   on its own gradient instead) */
@media (min-width: 861px) {
  .mx-app--bilbo .mx-story__stage::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(14, 14, 17, .86) 0, rgba(14, 14, 17, .6) 30%, rgba(14, 14, 17, 0) 50%),
      linear-gradient(0deg, rgba(14, 14, 17, .7) 0, rgba(14, 14, 17, 0) 22%);
  }
  .mx-app--bilbo .mx-story.no-gl .mx-story__stage::after { display: none; }
}
@media (min-width: 861px) {
  .mx-app--bilbo .mx-story__fallback { top: 14vh; right: 9vw; height: 76vh; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
}
.mx-app--bilbo .mx-story__hud { z-index: 2; bottom: calc(clamp(32px, 7vh, 80px) + 24px); }

.mx-bil-credit {
  position: absolute; right: var(--gutter); bottom: clamp(32px, 7vh, 80px); z-index: 2; margin: 0;
  pointer-events: auto;
  font-stretch: 62%; font-weight: 600; font-size: 11.5px; line-height: 1.6; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ash-2);
  transition: opacity .25s var(--ease);
}
.mx-bil-credit.is-under { opacity: 0; pointer-events: none; }
.mx-bil-credit a { color: var(--ash); text-decoration: none; }
.mx-bil-credit a:hover { color: var(--bone); }

/* the stop the route has reached, standing over its pin */
.mx-bil-badge {
  position: absolute; left: 0; top: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 3px; width: max-content; max-width: 250px;
  padding: 9px 14px 10px 30px; pointer-events: none;
  background: rgba(14, 14, 17, .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--tint, var(--accent)) 55%, transparent); border-radius: 12px;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .8);
  opacity: 0; transition: opacity .3s var(--ease);
  will-change: transform, opacity;
}
.mx-bil-badge::before {
  content: ""; position: absolute; left: 12px; top: 14px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--tint, var(--accent)); box-shadow: 0 0 10px var(--tint, var(--accent));
}
.mx-bil-badge.is-on { opacity: 1; }
.mx-bil-badge b { font-weight: 650; font-size: 14.5px; line-height: 1.3; }
.mx-bil-badge span {
  font-stretch: 62%; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--ash);
}

/* ---------- the steps ---------- */
.mx-app--bilbo .mx-story__step-in { max-width: 520px; }
.mx-app--bilbo .mx-story__step h2 { font-size: clamp(40px, 4.7vw, 80px); }
.mx-app--bilbo .mx-bil-land .mx-story__step-in { max-width: 600px; }
.mx-app--bilbo .mx-bil-land h2 { font-size: clamp(34px, 3.35vw, 54px); }

/* a day's stops: Bilbo's numbered pin, the time, the place */
.mx-bil-log { max-width: 500px; margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mx-bil-log li {
  display: grid; grid-template-columns: 24px 72px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ash);
  transition: color .3s var(--ease);
}
.mx-bil-log__n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--line-2); color: var(--ash);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.mx-bil-log__t {
  font-stretch: 62%; font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.mx-bil-log__name { font-size: 15.5px; line-height: 1.35; }
.mx-bil-log li.is-done { color: var(--bone-2); }
.mx-bil-log li.is-done .mx-bil-log__n { background: var(--day); border-color: var(--day); color: #fff; }
.mx-bil-log li.is-now { color: var(--bone); }
.mx-bil-log li.is-now .mx-bil-log__n {
  background: var(--day); border-color: var(--bone); color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--day) 30%, transparent), 0 0 18px var(--day);
}

/* real renders from the app, standing in the copy */
.mx-bil-shot { margin: 26px 0 0; }
.mx-bil-shot img { display: block; width: 100%; max-width: 430px; height: auto; }
.mx-bil-shot--ticket img { max-width: 360px; }
.mx-bil-shot figcaption { margin: 4px 0 0; font-size: 13px; color: var(--ash-2); }
.mx-bil-land .mx-story__fig { margin: 24px 0 0; }
.mx-bil-land .mx-actions { margin-top: 26px; }

@media (max-width: 860px) {
  .mx-bil-credit { top: calc(var(--hdr) + 10px); bottom: auto; font-size: 10.5px; }
  /* one line on a phone: the full name is in the list under the map */
  .mx-bil-badge { max-width: 200px; padding: 7px 11px 8px 25px; border-radius: 11px; }
  .mx-bil-badge::before { left: 10px; top: 12px; width: 8px; height: 8px; }
  .mx-bil-badge b { display: block; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
  .mx-bil-badge span { font-size: 11px; }
  .mx-app--bilbo .mx-story__step h2 { font-size: 34px; margin-top: 8px; }
  .mx-app--bilbo .mx-bil-land h2 { font-size: 30px; }
  .mx-app--bilbo .mx-story__sub { margin-top: 8px; font-size: 14.5px; line-height: 1.45; }
  .mx-bil-log { margin-top: 12px; }
  .mx-bil-log li { grid-template-columns: 20px 62px minmax(0, 1fr); gap: 10px; padding: 5px 0; }
  .mx-bil-log__n { width: 20px; height: 20px; font-size: 10.5px; }
  .mx-bil-log__t { font-size: 11.5px; }
  .mx-bil-log__name { font-size: 14px; line-height: 1.3; }
  .mx-bil-shot { margin-top: 12px; }
  .mx-bil-shot img { max-width: 250px; }
  .mx-bil-shot--ticket img { max-width: 210px; }
  .mx-bil-land .mx-story__fig { display: none; }
  .mx-bil-land .mx-actions { margin-top: 14px; }
  .mx-bil-land .mx-story__src { margin-top: 14px; font-size: 12.5px; }
}

/* ---------- the features: Bilbo's UI, drawn ---------- */
/* the trip, as the plan lists it */
.mx-bil-trip__city { font-stretch: 125%; font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; }
.mx-bil-trip__days { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.mx-bil-trip__days li {
  display: grid; grid-template-columns: 10px 50px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; background: var(--graphite-2);
}
.mx-bil-trip__days i { width: 10px; height: 10px; border-radius: 50%; background: var(--day); box-shadow: 0 0 10px var(--day); }
.mx-bil-trip__days b { font-weight: 700; font-size: 15px; }
.mx-bil-trip__days span { overflow: hidden; color: var(--bone-2); font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.mx-bil-trip__days em { font-style: normal; font-size: 13.5px; color: var(--ash); }

/* a day map from the app, with what it shows */
.mx-bil-mapviz { flex-direction: row; align-items: center; gap: 22px; padding: 14px 22px 14px 14px; }
.mx-bil-mapviz img { display: block; flex: none; width: 60%; max-width: 360px; height: auto; }
.mx-bil-mapviz__side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mx-bil-mapviz__n { margin-top: 10px; font-weight: 200; font-size: 76px; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mx-bil-mapviz__ok { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--bone); }
/* panels that share a row share a height, so their headings line up */
.mx-bil-trip, .mx-bil-mapviz { min-height: 352px; }
.mx-app--bilbo .mx-feat--third .mx-viz { min-height: 290px; }
.mx-bil-hoursviz, .mx-bil-editviz { min-height: 262px; }
@media (max-width: 700px) {
  .mx-bil-mapviz { flex-direction: column; align-items: stretch; padding: 14px 14px 18px; }
  .mx-bil-mapviz img { width: 100%; max-width: none; }
  .mx-bil-mapviz__side { padding: 0 8px; }
  .mx-bil-mapviz__n { font-size: 56px; }
  .mx-bil-trip, .mx-bil-mapviz, .mx-app--bilbo .mx-feat--third .mx-viz, .mx-bil-hoursviz, .mx-bil-editviz { min-height: 0; }
}

/* what stays on the phone */
.mx-bil-net { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mx-bil-net li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: var(--graphite-2);
}
.mx-bil-net span { font-size: 16px; line-height: 1; }
.mx-bil-net b { font-weight: 650; font-size: 14px; line-height: 1.25; }
.mx-bil-net b i { display: block; font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--ash); }
.mx-bil-net em {
  font-style: normal; font-stretch: 62%; font-weight: 650; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap; color: var(--accent-ink);
}
.mx-bil-net li.is-never em { color: var(--ash); }

/* tickets on their stops */
.mx-bil-stack { display: grid; }
.mx-bil-stack div {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--graphite-2);
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .8);
  transform: rotate(var(--r));
}
.mx-bil-stack div + div { margin-top: -4px; }
.mx-bil-stack span { font-size: 17px; line-height: 1; }
.mx-bil-stack b { font-weight: 650; font-size: 14px; line-height: 1.25; }
.mx-bil-stack b i { display: block; font-style: normal; font-weight: 400; font-size: 12.5px; color: var(--ash); }
.mx-bil-stack em {
  padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent);
  font-style: normal; font-stretch: 62%; font-weight: 650; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-ink);
}
.mx-bil-remind { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; font-size: 13.5px; color: var(--ash); }
.mx-bil-remind i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px var(--live); }

/* passport stamps */
.mx-bil-stamps { display: flex; justify-content: center; align-items: center; min-height: 128px; }
.mx-bil-stamps span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 104px; height: 104px; margin: 0 -5px; border-radius: 50%; text-align: center;
  border: 2px dashed color-mix(in srgb, var(--accent-ink) 75%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, var(--graphite));
  box-shadow: inset 0 0 0 6px var(--graphite), inset 0 0 0 7px color-mix(in srgb, var(--accent-ink) 40%, transparent);
  color: var(--accent-ink); transform: rotate(var(--r));
}
.mx-bil-stamps span.is-alt {
  border-color: rgba(143, 208, 255, .7); color: #9AD3FF;
  background: color-mix(in srgb, #1B7FC4 9%, var(--graphite));
  box-shadow: inset 0 0 0 6px var(--graphite), inset 0 0 0 7px rgba(143, 208, 255, .35);
}
.mx-bil-stamps b { max-width: 78px; font-stretch: 112%; font-weight: 800; font-size: 11.5px; line-height: 1.1; text-transform: uppercase; }
.mx-bil-stamps i {
  margin-top: 5px; font-style: normal; font-stretch: 62%; font-weight: 600; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
}
.mx-bil-stamps__note { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--ash); }
.mx-bil-stamps__note b { font-weight: 650; color: var(--bone); }

/* opening hours against the plan */
.mx-bil-hours { display: grid; gap: 14px; }
.mx-bil-hours__row {
  display: grid; grid-template-columns: 172px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 16px; row-gap: 5px; align-items: center;
}
.mx-bil-hours__row b { grid-row: 1 / span 2; font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.mx-bil-hours__bar { position: relative; height: 10px; border-radius: 5px; background: var(--graphite-2); }
.mx-bil-hours__bar i {
  position: absolute; top: 0; bottom: 0; left: var(--open-a); right: calc(100% - var(--open-b));
  border-radius: 5px; background: rgba(236, 233, 226, .17);
}
.mx-bil-hours__bar em {
  position: absolute; top: -3px; bottom: -3px; left: var(--at-a); right: calc(100% - var(--at-b));
  border-radius: 6px; background: var(--day); box-shadow: 0 0 12px var(--day);
}
.mx-bil-hours__row .mx-read { grid-column: 2; font-size: 11px; line-height: 1.3; }
.mx-bil-hours__axis { position: relative; height: 16px; margin-left: 188px; font-size: 10.5px; }
.mx-bil-hours__axis span { position: absolute; top: 0; left: var(--at); transform: translateX(-50%); }
.mx-bil-hours__axis span:first-child { transform: none; }
.mx-bil-hours__axis span:last-child { transform: translateX(-100%); }
.mx-bil-hours__key { display: flex; gap: 18px; margin-top: 2px; font-size: 13px; color: var(--ash); }
.mx-bil-hours__key span { display: inline-flex; align-items: center; gap: 8px; }
.mx-bil-hours__key i { width: 18px; height: 8px; border-radius: 4px; background: rgba(236, 233, 226, .17); }
.mx-bil-hours__key em { width: 18px; height: 8px; border-radius: 4px; background: var(--accent); }
@media (max-width: 520px) {
  .mx-bil-hours__row { grid-template-columns: 1fr; }
  .mx-bil-hours__row b { grid-row: auto; }
  .mx-bil-hours__row .mx-read { grid-column: 1; }
  .mx-bil-hours__axis { margin-left: 0; }
}

/* the plan, being rearranged */
.mx-bil-edit { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mx-bil-edit li {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; background: var(--graphite-2);
}
.mx-bil-edit span {
  font-stretch: 62%; font-weight: 600; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--ash);
}
.mx-bil-edit b { font-weight: 600; font-size: 15px; }
.mx-bil-edit li.is-lifted {
  background: #34343A; transform: translateX(14px) rotate(-1.2deg);
  box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .85), 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.mx-bil-edit li.is-lifted span { color: var(--accent-ink); }
.mx-bil-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mx-bil-pills span { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13.5px; color: var(--bone-2); }
.mx-bil-pills span.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .mx-bil-badge, .mx-bil-log li, .mx-bil-log__n, .mx-bil-credit { transition: none; }
}