/* ==========================================================================
   Shared activity page: nomadconnect.digital/a/<id>
   Rendered by _worker.js. It mirrors the app's activity screen (a boarding
   pass on cream paper) so a shared link looks like the thing it opens.
   Colour and type tokens come from styles.css.
   ========================================================================== */

/* One page, three states. The server picks one and the inline script can move
   it to "ended" using the visitor's clock. Copy for the other states is in the
   page but hidden here. */
html:not([data-state="open"]) [data-only="open"],
html:not([data-state="full"]) [data-only="full"],
html:not([data-state="ended"]) [data-only="ended"],
html[data-state="ended"] [data-not="ended"] { display: none !important; }

.act { position: relative; padding: 34px 0 52px; }
/* Dotted passport paper behind the route header, fading out down the page. */
.act::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 440px;
  background-image: radial-gradient(rgba(27, 20, 100, 0.08) 1px, transparent 1.3px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent);
  mask-image: linear-gradient(180deg, #000 50%, transparent);
  pointer-events: none;
}
.act .wrap { position: relative; max-width: 560px; }

.act-kicker {
  text-align: center;
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

/* ---------- Route header: YOU, a plane, the venue code ---------- */
.act-route { display: flex; align-items: center; gap: 16px; margin: 16px 4px 28px; }
.act-route .code {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(38px, 11vw, 52px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.act-route .mid { flex: 1; position: relative; height: 24px; min-width: 56px; }
.act-route .mid::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1.5px dashed rgba(27, 20, 100, 0.3);
}
.act-route .mid svg {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 0 7px;
  transform: translate(-50%, -50%);
  fill: var(--navy);
  background: var(--cream-soft);
}

/* ---------- The boarding pass ---------- */
.ticket {
  position: relative;
  background: var(--chrome);
  border: 1px solid var(--border-subtle);
  border-radius: 26px;
  box-shadow: 0 24px 48px -28px rgba(27, 20, 100, 0.4);
}
.ticket-top { padding: 28px 28px 22px; }
.ticket-kicker-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.ticket-kicker {
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
.ticket-stamp {
  flex: none;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  border: 1.5px solid var(--red);
  border-radius: 6px;
  padding: 6px 8px 5px 10px;
  transform: rotate(4deg);
}
.ticket h1 {
  margin-top: 12px;
  font-size: clamp(30px, 8.4vw, 40px);
  line-height: 1.12;
  color: var(--navy);
  overflow-wrap: anywhere;
}
.ticket h1.long { font-size: clamp(24px, 6.4vw, 30px); line-height: 1.18; }

/* Perforation: a dashed tear line with a punched notch on each edge. */
.ticket-perf { position: relative; height: 22px; }
.ticket-perf i {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 50%;
  border-top: 1.5px dashed rgba(27, 20, 100, 0.22);
}
.ticket-perf::before,
.ticket-perf::after {
  content: "";
  position: absolute;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
}
.ticket-perf::before { left: -11px; }
.ticket-perf::after { right: -11px; }

.ticket-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
  margin: 0;
  padding: 20px 28px 0;
}
.ticket-grid > div { min-width: 0; }
.ticket-grid dt,
.going-label {
  font: 500 10.5px/1.4 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(27, 20, 100, 0.55);
}
.ticket-grid dd { margin: 0; }
.ticket-grid .val {
  margin-top: 7px;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--navy);
  overflow-wrap: anywhere;
}
.ticket-grid .sub { margin-top: 3px; font-size: 14.5px; line-height: 1.4; color: var(--ink-secondary); }

/* Who's going: a capacity meter, never a line-up of faces. */
.going { padding: 26px 28px 28px; }
.going-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.discs { display: flex; flex: none; }
.discs i {
  width: 28px;
  height: 28px;
  margin-left: -8px;
  border-radius: 50%;
  background: #E8E5E6;
  box-shadow: 0 0 0 2.5px var(--chrome);
}
.discs i:first-child { margin-left: 0; }
.discs i.on { background: #A6A3BD; }
.meter { flex: 1; min-width: 36px; height: 4px; border-radius: 4px; background: rgba(27, 20, 100, 0.1); overflow: hidden; }
.meter b { display: block; height: 100%; border-radius: 4px; background: var(--navy); }
.going-left {
  flex: none;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.going-note { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-secondary); }

/* ---------- Join ---------- */
.join { margin-top: 26px; }
.join .btn { width: 100%; padding: 17px 24px; font-size: 17px; }
.join-meta { margin-top: 14px; text-align: center; font-size: 15px; line-height: 1.55; color: var(--ink-secondary); }
.join-meta a,
.act-about a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------- How to join ---------- */
.act-steps { padding: 4px 0 72px; }
.act-steps .wrap { max-width: 560px; }
.act-steps h2 { font-size: 26px; margin-bottom: 22px; }
.act-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: step; }
.act-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-secondary);
}
.act-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy-soft-strong);
  color: var(--navy);
  font: 500 13px/1 var(--font-mono);
}
.act-steps li strong { display: block; font-weight: 600; color: var(--navy); }
.act-about {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border-subtle);
  font-size: 15.5px;
  color: var(--ink-secondary);
}

/* ---------- Link that no longer leads anywhere ---------- */
.act-missing { text-align: center; padding: 72px 0 104px; }
.act-missing .wrap { max-width: 560px; }
.act-missing h1 { margin-top: 14px; font-size: clamp(30px, 7vw, 42px); color: var(--navy); }
.act-missing p { margin: 16px auto 0; max-width: 440px; color: var(--ink-secondary); }
.act-missing .btn { margin-top: 28px; }
.act-missing .join-meta { margin-top: 18px; }

/* Phones: the join button rides at the bottom of the screen, like the app's
   action bar, so it is always one tap away. */
@media (max-width: 720px) {
  .act { padding-top: 26px; }
  .join {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    margin: 0;
    padding: 12px 20px 14px;
    background: rgba(250, 246, 232, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-subtle);
  }
  .join-meta { margin-top: 22px; }
  /* Keep the footer's last line clear of the fixed bar. */
  .has-join-bar .site-footer { padding-bottom: 124px; }
}
@media (max-width: 380px) {
  .ticket-top { padding: 24px 22px 20px; }
  .ticket-grid { padding: 18px 22px 0; gap: 22px 16px; }
  .going { padding: 24px 22px 24px; }
  .ticket-grid .val { font-size: 18px; }
}

/* The consent prompt (styles.css) sits above the fixed join bar on phones. */
@media (max-width: 720px) {
  .has-join-bar .consent { bottom: 94px; }
}

/* ==========================================================================
   City page: nomadconnect.digital/valencia ("This week in Valencia")
   One list of the week's plans. Every row goes to the App Store: the place,
   who's going and the chat are what the app is for.
   ========================================================================== */
.city .wrap { max-width: 640px; }
.city-title {
  margin-top: 14px;
  text-align: center;
  font-size: clamp(34px, 9vw, 52px);
  line-height: 1.08;
  color: var(--navy);
}
.city-sub {
  margin: 14px auto 0;
  max-width: 460px;
  text-align: center;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-secondary);
}
.city-list { margin-top: 30px; }
.city-day + .city-day { margin-top: 26px; }
.city-day-label {
  margin: 0 4px 10px;
  font: 500 11.5px/1.4 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(27, 20, 100, 0.55);
}
.city-day-label b { font-weight: 500; color: var(--navy); }
.plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--chrome);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  color: var(--navy);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.plan:hover { border-color: rgba(27, 20, 100, 0.25); }
.plan:active { transform: scale(0.99); }
.plan-time {
  flex: none;
  width: 74px;
  font: 500 13px/1.3 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--navy);
}
.plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.plan-type {
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(27, 20, 100, 0.55);
}
.plan-title { font-weight: 600; font-size: 16.5px; line-height: 1.3; overflow-wrap: anywhere; }
.plan-go {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: rgba(27, 20, 100, 0.45);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.city-empty { padding: 28px 8px; text-align: center; color: var(--ink-secondary); }
.city-empty .btn { margin-top: 16px; }
@media (max-width: 380px) {
  .plan { gap: 12px; padding: 14px; }
  .plan-time { width: 64px; font-size: 12px; }
}