/* ============================================================
   ABI Guide — Missions (missions.html)
   Reuses global tokens from style.css
============================================================ */

[hidden] { display: none !important; }

.mission-page { position: relative; padding-block: var(--sp-10) var(--sp-24); }
/* Ambient glow behind the page so the frosted blocks reveal soft colour */
.mission-page::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 12% 18%, oklch(0.68 0.155 68 / 0.14), transparent 70%),
    radial-gradient(42% 46% at 88% 78%, oklch(0.54 0.118 252 / 0.13), transparent 70%),
    radial-gradient(30% 34% at 62% 45%, oklch(0.55 0.16 300 / 0.08), transparent 70%);
  animation: mission-drift 20s ease-in-out infinite;
}
@keyframes mission-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2%, -2.5%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .mission-page::before { animation: none; }
}
/* Full-bleed: use the whole page width (small edge gutter only) */
.mission-wrap {
  width: 100%;
  padding-inline: clamp(0.75rem, 2vw, 1.75rem);
}

/* --- Header -------------------------------- */
.mission-hd { margin-bottom: var(--sp-8); }
.mission-hd__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.mission-hd__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.mission-hd__title {
  font-family: var(--font-hd);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
  line-height: 1.1;
}
.mission-hd__count { flex-shrink: 0; text-align: right; line-height: 1; }
.mission-hd__count-val {
  display: block;
  font-family: var(--font-hd);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--amber);
}
.mission-hd__count-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- Progress bar with tier markers -------- */
.mission-progress { margin-bottom: var(--sp-8); padding-bottom: 26px; }
.mission-progress__track {
  position: relative;
  height: 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.mission-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--amber-dim), var(--amber-bright));
  border-radius: 999px;
  transition: width 0.5s var(--ease-out);
}
.mission-progress__markers { position: absolute; inset: 0; pointer-events: none; }
.mission-progress__marker { position: absolute; top: -3px; }
.mission-progress__marker::before {
  content: '';
  display: block;
  width: 2px;
  height: 16px;
  margin: 0 auto;
  background: var(--border-bright);
  transform: translateX(-50%);
}
.mission-progress__marker span {
  position: absolute;
  top: 19px;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ink-faint);
  white-space: nowrap;
}
.mission-progress__marker.is-reached::before { background: var(--amber-bright); }
.mission-progress__marker.is-reached span { color: var(--amber); }

/* --- Zone filter pills --------------------- */
.zone-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.zone-pill {
  font-family: var(--font-hd);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  background: var(--surface-el);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.zone-pill:hover { color: var(--ink); border-color: var(--border-bright); }
.zone-pill.is-active {
  color: var(--amber);
  border-color: oklch(0.68 0.155 68 / 0.5);
  background: var(--amber-bg);
}

/* --- Chains (grid layout) ------------------ */
.chains__error { color: var(--ink-muted); padding: var(--sp-8) 0; text-align: center; }

.chain {
  position: relative;
  background:
    radial-gradient(60% 80% at 0% 0%, oklch(0.68 0.155 68 / 0.09), transparent 60%),
    linear-gradient(180deg, oklch(1 0 0 / 0.035), transparent 45%),
    oklch(0.18 0.014 252 / 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  box-shadow: 0 8px 34px oklch(0 0 0 / 0.30), inset 0 1px 0 oklch(1 0 0 / 0.05);
}
.chain__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-hd);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--sp-4);
}
.chain__label::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--amber);
  transform: rotate(45deg);
}
.chain__scroll {
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-bright) transparent;
}
.chain__scroll::-webkit-scrollbar { height: 8px; }
.chain__scroll::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 4px; }
.chain__grid {
  --node-w: 172px;
  --portrait-w: 118px;
  display: grid;
  width: max-content;
  column-gap: 34px;
  row-gap: var(--sp-6);
  align-items: center;   /* missions centered on the contact portrait */
}

/* Portrait node */
.node--portrait {
  position: relative;
  justify-self: center;   /* portrait centered under its column */
  width: var(--portrait-w);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--border-bright);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Contacts that start a row (col 0) stay pinned left while scrolling */
.node--portrait--sticky {
  position: sticky;
  left: 0;
  z-index: 3;
  justify-self: start;
}
.node--portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.chain__portrait-init {
  font-family: var(--font-hd);
  font-size: 2.4rem;
  font-weight: 700;
  color: oklch(0.68 0.155 68 / 0.55);
}
.chain__name {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  font-family: var(--font-hd);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ink);
  background: oklch(0.06 0.01 252 / 0.82);
  padding: 3px 4px;
}

/* --- Mission node -------------------------- */
.node--mission {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 104px;
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.02), transparent 55%),
    var(--surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + 5px);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s var(--ease-out),
              box-shadow 0.2s, opacity 0.2s, filter 0.2s;
}
.node--mission:hover {
  border-color: var(--amber-dim);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px oklch(0.68 0.155 68 / 0.28), 0 8px 22px oklch(0.68 0.155 68 / 0.12);
}
.node--mission.is-done {
  border-color: var(--amber);
  background:
    linear-gradient(180deg, oklch(0.68 0.155 68 / 0.06), transparent 55%),
    var(--amber-bg);
}

/* HUD corner ticks */
.node__corner {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--border-bright);
  opacity: 0.55;
  transition: border-color 0.15s, opacity 0.15s;
  pointer-events: none;
}
.node__corner--tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.node__corner--br { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.node--mission:hover .node__corner,
.node--mission.is-done .node__corner { border-color: var(--amber); opacity: 1; }

/* Objective progress bar (bottom edge) */
.node__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--surface-raised);
  border-radius: 0 0 3px 3px;
  overflow: hidden;
}
.node__bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--amber-dim), var(--amber-bright));
  transition: width 0.45s var(--ease-out);
}
.node--mission.is-dimmed { opacity: 0.3; filter: grayscale(0.7); }
.node--mission.is-dimmed:hover { transform: none; }

/* Connector arrow (points into the node from the left) */
.node--arrow::before {
  content: '→';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.05rem;
  color: var(--ink-faint);
}

.node__title {
  font-family: var(--font-hd);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  padding-right: 24px;
  margin-bottom: var(--sp-2);
}
.node__zones { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-2); }
.node__count {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ink-faint);
}
.node--mission.is-done .node__count { color: var(--amber); }

.node__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-bright);
  border-radius: 5px;
  background: var(--surface-raised);
  transition: background 0.15s, border-color 0.15s;
}
.node__check::after {
  content: '✓';
  font-size: 0.74rem;
  font-weight: 700;
  color: oklch(0.12 0.014 252);
  opacity: 0;
  transition: opacity 0.15s;
}
.node__check:hover { border-color: var(--amber); }
.node--mission.is-done .node__check { background: var(--amber); border-color: var(--amber); }
.node--mission.is-done .node__check::after { opacity: 1; }

/* --- Zone tags (reuse site tag palette) ---- */
.zone-tag {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--r);
  border: 1px solid transparent;
  white-space: nowrap;
}
.zone-tag--farm       { background: var(--green-bg); color: var(--green-bright); border-color: oklch(0.44 0.095 148 / 0.30); }
.zone-tag--airport    { background: var(--blue-bg);  color: var(--blue);         border-color: oklch(0.54 0.118 252 / 0.30); }
.zone-tag--armory     { background: var(--red-bg);   color: var(--red);          border-color: oklch(0.48 0.145 22 / 0.30); }
.zone-tag--northridge { background: oklch(0.55 0.16 300 / 0.14); color: oklch(0.74 0.14 300); border-color: oklch(0.55 0.16 300 / 0.30); }
.zone-tag--valley     { background: var(--amber-bg); color: var(--amber);        border-color: oklch(0.68 0.155 68 / 0.28); }
.zone-tag--tvstation  { background: oklch(0.60 0.12 200 / 0.14); color: oklch(0.78 0.10 200); border-color: oklch(0.60 0.12 200 / 0.30); }

/* --- Detail popover ------------------------ */
.mission-pop {
  position: fixed;
  z-index: var(--z-modal);
  width: 300px;
  max-width: calc(100vw - 24px);
  background: var(--surface-el);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: 0 16px 44px oklch(0 0 0 / 0.55);
}
.mission-pop__hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.mission-pop__contact {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-dim);
  margin-bottom: 2px;
}
.mission-pop__title {
  font-family: var(--font-hd);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.mission-pop__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--ink-muted);
  font-size: 0.85rem;
  transition: color 0.15s;
}
.mission-pop__close:hover { color: var(--ink); }
.mission-pop__zones { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--sp-3); }
.mission-pop__desc {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: var(--sp-4);
}
.mission-pop__label,
.mission-pop__rewards-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-2);
}
.mission-pop__rewards { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* Objectives list */
.objective-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--sp-4);
}
.objective-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 7px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.objective-item:hover { border-color: var(--border-bright); }
.objective-item.is-done { border-color: oklch(0.68 0.155 68 / 0.35); background: var(--amber-bg); }
.objective-bullet {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.objective-item.is-done .objective-bullet { background: var(--amber); }
.objective-text {
  flex: 1;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-muted);
}
.objective-item.is-done .objective-text { color: var(--ink); }
.objective-state {
  flex: 0 0 auto;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.objective-item.is-done .objective-state { color: var(--amber); }
/* Team objective badge (game orange) */
.team-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: oklch(0.76 0.15 45);
  background: oklch(0.62 0.16 42 / 0.16);
  border: 1px solid oklch(0.62 0.16 42 / 0.38);
  border-radius: 3px;
  padding: 1px 4px;
  margin-right: 2px;
  vertical-align: baseline;
}
.reward {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 3px 8px;
}
.reward b { font-weight: 600; }
.reward--exp b { color: var(--blue); }
.reward--koen { color: var(--amber-bright); }
.reward--koen b { color: var(--amber); }
.reward--item { color: var(--green-bright); }
.reward--none { color: var(--ink-faint); }
.mission-pop__toggle {
  width: 100%;
  font-family: var(--font-hd);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: oklch(0.12 0.014 252);
  background: var(--amber);
  border-radius: var(--r);
  padding: 0.55rem;
  transition: filter 0.15s;
}
.mission-pop__toggle:hover { filter: brightness(1.08); }
.mission-pop__toggle.is-done {
  background: var(--surface-raised);
  color: var(--amber);
  border: 1px solid oklch(0.68 0.155 68 / 0.4);
}

/* --- Responsive ---------------------------- */
@media (max-width: 620px) {
  .mission-hd__top { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .mission-hd__count { text-align: left; }
  .chain__grid { --node-w: 150px; --portrait-w: 100px; column-gap: 28px; }
  .chain__portrait-init { font-size: 1.8rem; }
  .node--arrow::before { left: -22px; }
}