/* The Missions panel (mission.js), on every page while you are in a mission.
   Wide screens: a column pinned to the right of the window; the page keeps its width and makes room beside it.
   Narrower: it sits above the page. It keeps its place across page changes (view-transition-name). */

:root { --mission-w: 35rem; --mission-gap: var(--sp-5); }

/* The page makes room: as wide as before plus the column, the column inside its right padding */
@media (min-width: 80rem) {
  html.in-mission body {
    max-width: calc(var(--page-max) + var(--mission-w) + var(--mission-gap));
    padding-right: calc(clamp(var(--sp-3), 4vw, var(--sp-6)) + var(--mission-w) + var(--mission-gap));
  }
  html.mp-moving body { transition: max-width var(--mid) var(--ease), padding-right var(--mid) var(--ease); }
}

.mission-panel {
  --mate: #b48ef0;
  view-transition-name: mission-panel;
  z-index: 30;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
}
@media (min-width: 80rem) {
  .mission-panel {
    position: fixed;
    top: var(--sp-3);
    bottom: var(--sp-3);
    right: clamp(var(--sp-3), 4vw, var(--sp-6));
    width: var(--mission-w);
    margin: 0;
    overflow-y: auto; /* only when the squad alone is taller than the window */
    scrollbar-width: thin;
  }
}

.mission-panel .n {
  display: inline-block;
  min-width: 1.5rem;
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  border-radius: 2px;
  background: var(--lapis-800);
  font: 600 var(--step--1)/1.5 var(--num);
  color: var(--muted);
  text-align: center;
  vertical-align: middle;
}
.mission-panel .n:empty { display: none; }
.mission-panel h2 { margin: 0; font: 400 var(--step-1)/1.3 var(--display); color: var(--ivory); }

/* ---------- the squad ---------- */

.mp-squad {
  --cut-line: var(--void);
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--void) 40%, var(--line-soft));
  box-shadow: var(--edge), inset 0 0 32px var(--void-soft);
}
.mp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); }
.mp-head .eyebrow { flex-basis: 100%; margin: 0; color: var(--void); }
.mp-where { margin: 0; font-size: var(--step--1); color: var(--ivory); }
/* Codex scans in the mission's level: lit when there is one */
.mp-scans { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem var(--sp-2); font-size: var(--step--1); }
.mp-scans[hidden], .mp-relics[hidden] { display: none; }
.mp-scans-label { color: var(--muted); }
.mp-scans ul { display: contents; }
.mp-scan {
  list-style: none;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-ctl);
  color: var(--muted);
  opacity: 0.55;
  transition: color var(--mid) var(--ease), background-color var(--mid) var(--ease), border-color var(--mid) var(--ease),
    opacity var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.mp-scan.found {
  border-color: color-mix(in srgb, var(--void) 60%, transparent);
  background: var(--void-soft);
  color: var(--ivory);
  opacity: 1;
  box-shadow: 0 0 10px var(--void-soft);
}
.mp-scan.found::before { content: "✓ "; color: var(--void); }
/* Frame Fighter data of the planet: the ones you lack, or "scanned" when none is left to scan */
.mp-scan.done { opacity: 0.8; border-style: dashed; }
.mp-scan.done::before { content: "✓ "; }
.mp-scan-note {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  opacity: 0;
  transition: max-width var(--mid) var(--ease), opacity var(--mid) var(--ease);
}
.mp-scan-note::before { content: " · "; }
.mp-scan.noted .mp-scan-note { max-width: 16em; opacity: 1; }
.mp-relics { display: grid; gap: var(--sp-2); }

.mp-hint { margin: 0; font-size: var(--step--1); color: var(--muted); }
.mp-hint b { color: var(--ivory); font-weight: 600; }
.mp-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem var(--sp-2); font-size: var(--step--1); }
.mp-pending:empty { display: none; }
.mp-pending-label { color: var(--ok); }
.mp-pending ul { display: contents; }
.mp-pending li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.1rem 0.5rem 0.1rem 0.2rem; border-radius: var(--r-ctl); background: var(--well, color-mix(in srgb, var(--lapis-950) 60%, transparent)); list-style: none; }
.mp-pending img { width: 1.25rem; height: 1.25rem; object-fit: contain; }
.mp-pending b { color: var(--gold-hi); font: 600 var(--step--1) var(--num); }

.mp-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--sp-2); }
.mp-member {
  --ref: var(--line);
  --well: color-mix(in srgb, var(--lapis-950) 60%, transparent);
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.4rem 0.45rem 0.45rem;
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--ref);
  border-radius: var(--r-ctl);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ref) 12%, transparent), var(--well) 3rem);
  font-size: 0.78rem;
  transition: border-color var(--mid) ease;
}
.mp-member[data-ref="intact"] { --ref: var(--intact); }
.mp-member[data-ref="exceptional"] { --ref: var(--exceptional); }
.mp-member[data-ref="flawless"] { --ref: var(--flawless); }
.mp-member[data-ref="radiant"] { --ref: var(--radiant); }
.mp-member.platform { border-color: color-mix(in srgb, var(--mate) 55%, var(--line-soft)); border-top-color: var(--ref); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mate) 25%, transparent); }
.mp-member h3 { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; margin: 0; font: 600 var(--step--1)/1.35 var(--ui); white-space: nowrap; }
.mp-member .nm { overflow: hidden; text-overflow: ellipsis; }
.mp-member h3 :is(.you, .mate) { padding: 0 0.3rem; border-radius: 2px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.mp-member h3 .you { background: var(--gold-soft); color: var(--gold-hi); }
.mp-member h3 .mate { background: color-mix(in srgb, var(--mate) 20%, transparent); color: var(--mate); }
.mp-member .mr { display: flex; align-items: baseline; gap: 0.35rem; margin: 0 0 0.15rem; color: var(--muted); white-space: nowrap; }
.mp-member .rn { color: var(--ivory); font-weight: 500; }
.mp-member .rf { color: var(--ref); text-transform: capitalize; }
.mp-member .avg { margin-left: auto; }
.mp-member .avg b { font-family: var(--num); color: var(--void); }
.mp-member .none { margin: 0; color: var(--muted); }
.mp-member.waiting .none { animation: blink 1.4s ease-in-out infinite alternate; }

.mp-member .rewards { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mp-member .reward {
  --rar: var(--intact);
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto 2rem;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.25rem;
  padding: 1px 0.3rem 1px 0.2rem;
  border-left: 2px solid var(--rar);
  border-radius: 2px;
  background: var(--well);
}
.mp-member .reward[data-rarity="uncommon"] { --rar: var(--exceptional); }
.mp-member .reward[data-rarity="rare"] { --rar: var(--flawless); }
.mp-member .reward img { width: 1rem; height: 1rem; object-fit: contain; }
.mp-member .wn { min-width: 0; overflow: hidden; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.mp-member .wn small { display: block; overflow: hidden; color: var(--void); font-size: 0.66rem; text-overflow: ellipsis; }
.mp-member .wn small.mate { color: var(--mate); }
.mp-member .wc { font-family: var(--num); color: var(--muted); }
.mp-member .wp { text-align: right; font: 600 0.78rem var(--num); color: var(--ivory); }
.mp-member .dearest .wp { color: var(--gold-hi); }
.mp-member .wanted { background: linear-gradient(90deg, color-mix(in srgb, var(--void) 18%, transparent), var(--well) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--void) 25%, transparent); }
.mp-member .mate-wanted { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mate) 40%, transparent); }

/* A relic seen for the first time cracks open: a flash of its refinement's colour sweeps across the card, then its
   rewards drop in one after another and the parts you need glow once */
.mp-member.reveal { animation: mp-open 1.1s var(--ease); }
.mp-member.reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--ref) 30%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: mp-sweep 900ms 80ms var(--ease) forwards;
}
.mp-member.reveal .reward { animation: rise 420ms calc(160ms + var(--i) * 60ms) var(--ease) backwards; }
.mp-member.reveal .reward.wanted { animation: rise 420ms calc(160ms + var(--i) * 60ms) var(--ease) backwards, mp-wanted 1.4s calc(520ms + var(--i) * 60ms) ease-in-out; }
@keyframes mp-open { from { box-shadow: 0 0 0 1px var(--ref), 0 0 28px color-mix(in srgb, var(--ref) 50%, transparent); } }
@keyframes mp-sweep { to { transform: translateX(100%); } }
@keyframes mp-wanted {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  40% { box-shadow: 0 0 14px 0 color-mix(in srgb, var(--void) 45%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--void) 50%, transparent); }
}

/* ---------- the fissures, one line each ---------- */

.mp-fx { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--sp-2); min-height: 12rem; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--hairline); }
.mp-fx-head { display: flex; align-items: baseline; gap: var(--sp-3); white-space: nowrap; }
.mp-fx-head h2 { font-size: var(--step-0); }
.mp-shown { color: var(--muted); font-size: var(--step--2); }
.mp-fx-head a { margin-left: auto; text-decoration: none; }
.mp-fissures { display: grid; align-content: start; gap: 2px; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: thin; }
@media (max-width: 79.99rem) { .mp-fissures { max-height: 14rem; } }
.mp-fissures .none { padding: var(--sp-3); border: 1px dashed var(--line); color: var(--muted); font-size: var(--step--1); text-align: center; }
.mp-fissure {
  --era: var(--void);
  display: grid;
  grid-template-columns: 3.9rem 5.6rem minmax(0, 1fr) auto 3.1rem 2.9rem;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 1.4rem;
  padding: 0 0.5rem 0 0.45rem;
  border: 0;
  border-left: 3px solid var(--era);
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--era) 10%, transparent), color-mix(in srgb, var(--lapis-950) 60%, transparent) 4rem);
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--mid) ease, box-shadow var(--mid) ease, opacity var(--mid) ease;
}
.mp-fissure:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--era) 20%, transparent), color-mix(in srgb, var(--lapis-950) 60%, transparent) 6rem); }
.mp-fissure[aria-pressed="true"] { background: linear-gradient(90deg, color-mix(in srgb, var(--era) 28%, transparent), color-mix(in srgb, var(--lapis-950) 60%, transparent) 8rem); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--era) 55%, transparent); }
.mp-fissure.useless:not([aria-pressed="true"]) { opacity: 0.55; }
.mp-fissure .tier { white-space: nowrap; color: var(--era); font: 600 0.75rem var(--num); letter-spacing: 0.04em; text-transform: uppercase; }
.mp-fissure .fm { overflow: hidden; color: var(--ivory); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mp-fissure .fn { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.mp-fissure .tags { display: flex; gap: 0.25rem; }
.mp-fissure .tag { padding: 0 0.3rem; border-radius: 2px; font-size: 0.66rem; white-space: nowrap; }
.mp-fissure .tag.in { background: var(--void-soft); color: var(--void); }
.mp-fissure .tag.sp { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.mp-fissure .tag.storm { background: var(--void-soft); color: var(--void); }
.mp-fissure .time { font-family: var(--num); color: var(--muted); text-align: right; white-space: nowrap; }
.mp-fissure .fs { font-family: var(--num); color: var(--void); text-align: right; white-space: nowrap; }
.mp-fissure.useless .fs { color: var(--muted); }
.mp-fissure[data-tier="lith"] { --era: var(--intact); }
.mp-fissure[data-tier="meso"] { --era: var(--exceptional); }
.mp-fissure[data-tier="neo"] { --era: #9fb6e8; }
.mp-fissure[data-tier="axi"] { --era: var(--flawless); }
.mp-fissure[data-tier="requiem"] { --era: #d77a6c; }
.mp-fissure[data-tier="omnia"] { --era: var(--void); }

@media (prefers-reduced-motion: reduce) {
  .mp-member.waiting .none, .mp-member.reveal::after { animation: none !important; }
}