.missions-page { min-height: 100vh; padding-top: 67px; background: radial-gradient(circle at 78% 9%, rgba(59, 201, 218, 0.11), transparent 27%), radial-gradient(circle at 12% 52%, rgba(124,79,214,0.14), transparent 37%), #090713; }
/* Admin-configured page watermark. A fixed, centred emblem sitting behind
 * everything: pointer-events none so it can never intercept a click, aria
 * hidden by virtue of being a pseudo-element, and only painted once the class
 * is added, so a page with no watermark configured costs nothing. It is fixed
 * rather than scrolling because the page is long -- a scrolling emblem would
 * pass through the content and read as a rendering fault. */
.missions-page.has-watermark::before {
  content: ''; position: fixed; z-index: 0; inset: 0; pointer-events: none;
  background: var(--mission-watermark) center 54% / min(62vmin, 620px) no-repeat;
  opacity: var(--mission-watermark-opacity, 0.08);
  mix-blend-mode: screen;
}
.missions-page.has-watermark > * { position: relative; z-index: 1; }
/* Gear.
 *
 * Rarity is one custom property, --gear-tier, set once per element by the tier
 * class. Every square, card and pill reads it, so a new rarity needs one rule
 * rather than an edit in six places -- the same approach --world-weather-icon
 * takes for the weather card's icons. */
.mission-gear-slot, .mission-loadout-slot, .mission-inventory-card, .mission-loadout-option, .mission-result-gear { --gear-tier: 130,150,170; }
.is-common { --gear-tier: 150,168,186; }
.is-uncommon { --gear-tier: 158,219,168; }
.is-rare { --gear-tier: 112,204,223; }
.is-epic { --gear-tier: 205,124,236; }
.is-legendary { --gear-tier: 233,211,153; }

/* The read-only loadout sits under a crew portrait as a compact equipment
 * silhouette. The slots are positioned from their stable keys, not their API
 * order, so the body shape stays correct if the server order changes later. */
.mission-crew-loadout { display: grid; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(88,142,181,0.24); }
.mission-crew-loadout-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.mission-crew-loadout-label { color: #758fa7; font-size: 0.58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mission-crew-loadout-count { color: #90abba; font-size: 0.64rem; font-weight: 600; }
.mission-gear-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: '. head utility' 'off-hand chest main-hand' '. legs .' '. feet .'; gap: 4px; }
.mission-gear-slot { display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(var(--gear-tier), 0.55); color: rgb(var(--gear-tier)); cursor: help; }
.mission-gear-slot--head { grid-area: head; }.mission-gear-slot--utility { grid-area: utility; }.mission-gear-slot--off-hand { grid-area: off-hand; }.mission-gear-slot--chest { grid-area: chest; }.mission-gear-slot--main-hand { grid-area: main-hand; }.mission-gear-slot--legs { grid-area: legs; }.mission-gear-slot--feet { grid-area: feet; }
.mission-gear-slot svg, .mission-gear-slot img { display: block; width: 15px; height: 15px; object-fit: cover; }
.mission-gear-slot.is-filled img { width: 100%; height: 100%; object-fit: cover; }
.mission-gear-slot.is-filled { background: rgba(var(--gear-tier), 0.13); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, filter .25s ease; }
.mission-gear-slot.is-empty { border-style: dashed; border-color: rgba(103,152,190,0.4); color: #5d7285; }
.mission-gear-slot:focus-visible { outline: 2px solid rgba(126,227,232,0.7); outline-offset: 2px; }
.mission-crew-loadout .mission-loadout-btn { width: 100%; margin: 0; padding: 5px 7px !important; font-size: 0.6rem !important; }
.mission-loadout-btn:disabled { cursor: not-allowed; opacity: 0.5; }

/* Loadout modal: the slot grid on the left, the inventory for the selected slot
 * on the right. Utility spans the grid because it is the odd seventh slot, and
 * a lone square in a two-column grid reads as a gap. */
.mission-loadout-modal { width: min(780px, calc(100vw - 28px)); padding: 0; border: 1px solid rgba(105,213,222,0.5); color: var(--text); background: #100d22; box-shadow: 0 24px 90px rgba(0,0,0,0.7), 0 0 45px rgba(71,207,218,0.13); }
.mission-loadout-modal::backdrop { background: rgba(3,4,12,0.78); backdrop-filter: blur(4px); }
.mission-loadout-inner { position: relative; padding: 28px; background: linear-gradient(145deg, rgba(17,48,66,0.96), rgba(20,12,42,0.98)); }
.mission-loadout-modal .eyebrow { margin-bottom: 6px; color: #79d9df; font-size: 0.6rem; }
.mission-loadout-modal h2 { margin: 0 32px 5px 0; font-size: 1.34rem; }
.mission-loadout-modal > .mission-loadout-inner > p { margin: 0; color: #aec3cf; font-size: 0.8rem; }
.mission-loadout-body { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.mission-loadout-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.mission-loadout-slot { position: relative; display: grid; justify-items: center; gap: 3px; min-height: 80px; overflow: hidden; padding: 10px 6px; border: 1px solid rgba(103,152,190,0.38); background: rgba(6,15,28,0.42); color: rgb(var(--gear-tier)); cursor: pointer; font: inherit; }
.mission-loadout-slot:not(.is-filled) { border-style: dashed; color: #5d7285; }
.mission-loadout-slot.is-filled { border-color: rgba(var(--gear-tier), 0.55); background: rgba(var(--gear-tier), 0.1); }
.mission-loadout-slot.is-active { box-shadow: inset 0 0 0 1px rgba(126,227,232,0.7); border-color: rgba(126,227,232,0.75); }
.mission-loadout-slot svg, .mission-loadout-slot img { display: block; width: 24px; height: 24px; object-fit: cover; }
.mission-loadout-slot.is-filled img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.82; }
.mission-loadout-slot.is-filled::after { content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,10,22,0.04) 22%, rgba(4,10,22,0.88) 100%); }
.mission-loadout-slot-name { position: relative; z-index: 1; color: #9db3c2; font-size: 0.58rem; font-weight: 700; letter-spacing: .07em; text-shadow: 0 1px 3px #050914; text-transform: uppercase; }
.mission-loadout-slot small { position: relative; z-index: 1; display: block; max-width: 92px; overflow: hidden; color: #f0f5f8; font-size: 0.62rem; text-overflow: ellipsis; text-shadow: 0 1px 3px #050914; white-space: nowrap; }
.mission-loadout-slot:nth-child(7) { grid-column: 1 / -1; grid-template-columns: auto auto auto; justify-items: start; align-items: center; gap: 4px 9px; }
.mission-loadout-picker { min-width: 0; }
.mission-loadout-picker-head { margin: 0 0 8px !important; color: #79d9df !important; font-size: 0.58rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-loadout-options { display: grid; gap: 6px; max-height: min(40vh, 320px); overflow-y: auto; }
.mission-loadout-option { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(103,152,190,0.36); background: rgba(6,15,28,0.42); color: rgb(var(--gear-tier)); cursor: pointer; font: inherit; text-align: left; }
.mission-loadout-option:hover:not(:disabled), .mission-loadout-option:focus-visible { border-color: rgba(126,227,232,0.7); }
.mission-loadout-option.is-equipped { border-color: rgba(158,219,168,0.6); box-shadow: inset 3px 0 rgba(110,207,140,0.8); }
.mission-loadout-option.is-blocked { cursor: not-allowed; opacity: 0.62; }
.mission-loadout-option.is-remove { grid-template-columns: minmax(0, 1fr); border-color: rgba(224,138,114,0.42); }
.mission-loadout-option.is-remove strong { color: #e0a894; }
.mission-loadout-option-icon svg, .mission-loadout-option-icon img { display: block; width: 22px; height: 22px; object-fit: cover; }
.mission-loadout-option-copy { display: grid; gap: 1px; min-width: 0; }
.mission-loadout-option strong { overflow: hidden; color: #eef4f8; font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.mission-loadout-option small { color: #9db3c2; font-size: 0.65rem; }
/* Reserved height, so previewing a swap on hover cannot shift the list under
 * the pointer that is doing the previewing. */
.mission-loadout-delta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; min-height: 40px; margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(88,142,181,0.3); background: rgba(8,18,33,0.55); }
.mission-loadout-delta-label { color: #758fa7; font-size: 0.58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mission-loadout-delta-cell { color: #c2d5e0; font-size: 0.72rem; font-weight: 600; }
.mission-loadout-delta-cell s { color: #6f889b; }
.mission-loadout-delta-cell.is-better strong { color: #9edba8; }
.mission-loadout-delta-cell.is-worse strong { color: #e0a894; }
.mission-loadout-compare-items { display: grid; flex: 1 1 235px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mission-loadout-compare-items > span { min-width: 0; padding: 4px 6px; border-left: 2px solid rgba(117,143,167,.54); background: rgba(12,29,48,.48); }
.mission-loadout-compare-items > span + span { border-left-color: rgba(121,217,223,.72); }
.mission-loadout-compare-items small { display: block; color: #778fa2; font-size: .5rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mission-loadout-compare-items strong { display: block; overflow: hidden; margin-top: 2px; color: #dce9ef; font-size: .61rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.mission-loadout-compare-items.is-single { grid-template-columns: minmax(0, 1fr); max-width: 260px; }
.mission-loadout-compare-stats { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 5px 10px; }
.mission-loadout-compare-hint { color: #859dad; font-size: .59rem; line-height: 1.35; }

/* Loadout command enhancements: the actual crew appears as a deliberately
 * quiet figure behind its gear, while the selected slot gets a live visual
 * connection to the inventory it controls. The image is set only after the
 * URL passes the same allow-list used everywhere else on the missions page. */
.mission-loadout-command { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; margin-top: 16px; padding: 10px 12px; border: 1px solid rgba(100,161,194,0.34); background: linear-gradient(100deg, rgba(6,17,31,0.62), rgba(25,14,47,0.5)); }
.mission-loadout-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; min-width: 0; }
.mission-loadout-summary > span { display: grid; gap: 2px; min-width: 0; }
.mission-loadout-summary > span + span { padding-left: 14px; border-left: 1px solid rgba(105,163,197,0.28); }
.mission-loadout-summary strong { overflow: hidden; color: #eaf4f8; font-size: 0.76rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mission-loadout-summary-slots strong { color: #79d9df; }
.mission-loadout-summary small { color: #8fa8b9; font-size: 0.59rem; line-height: 1.35; }
.mission-loadout-quick-actions { display: flex; align-items: center; gap: 7px; }
.mission-loadout-quick-actions .btn { margin: 0; padding: 7px 9px !important; font-size: 0.6rem !important; white-space: nowrap; }
.mission-loadout-quick-actions .btn:disabled { cursor: not-allowed; opacity: .5; }
.mission-loadout-body { position: relative; }
.mission-loadout-body::before { content: ''; position: absolute; z-index: 2; top: var(--loadout-connector-y, 50%); left: 218px; width: 18px; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(110,219,226,0.72), rgba(110,219,226,0.05)); box-shadow: 0 0 8px rgba(110,219,226,0.38); transform: translateY(-50%); animation: loadout-connector-pulse 2.4s ease-in-out infinite; }
.mission-loadout-slots { position: relative; isolation: isolate; }
.mission-loadout-slots::before { content: ''; position: absolute; z-index: 0; inset: 13% 16%; pointer-events: none; background: var(--loadout-crew-image) center / contain no-repeat; filter: saturate(.7) contrast(1.16) grayscale(.25); opacity: .16; mask-image: radial-gradient(ellipse at center, #000 22%, transparent 72%); }
.mission-loadout-slot-card { position: relative; z-index: 1; min-height: 88px; }
.mission-loadout-slot-card:nth-child(7) { grid-column: 1 / -1; }
.mission-loadout-slot-card:nth-child(7) .mission-loadout-slot { grid-template-columns: auto auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 4px 9px; padding-right: 31px; }
.mission-loadout-slot-card:nth-child(7) .mission-loadout-slot small { max-width: none; }
.mission-loadout-slot { width: 100%; height: 100%; min-height: 88px; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.mission-loadout-slot.is-filled { box-shadow: inset 0 0 22px rgba(var(--gear-tier), .16), 0 0 13px rgba(var(--gear-tier), .1); }
.mission-loadout-slot.is-filled:hover, .mission-loadout-slot.is-filled:focus-visible { transform: translateY(-1px); box-shadow: inset 0 0 28px rgba(var(--gear-tier), .22), 0 0 17px rgba(var(--gear-tier), .2); }
.mission-loadout-slot.is-active { position: relative; overflow: hidden; }
.mission-loadout-slot.is-active::before { content: ''; position: absolute; z-index: 3; right: 0; left: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(190,250,255,.96), transparent); box-shadow: 0 0 9px rgba(120,231,240,.9); animation: loadout-slot-scan 2.8s ease-in-out infinite; }
.mission-loadout-slot.is-empty small { color: #7fd3d9; }
.mission-loadout-slot-remove { position: absolute; z-index: 5; top: 5px; right: 5px; display: grid; width: 21px; height: 21px; place-items: center; padding: 0; border: 1px solid rgba(224,168,148,.72); background: rgba(24,10,28,.9); color: #f0b0a0; cursor: pointer; font: inherit; line-height: 1; opacity: 0; transform: translateY(-3px); transition: opacity .16s ease, transform .16s ease, background .16s ease; }
.mission-loadout-slot-card:hover .mission-loadout-slot-remove, .mission-loadout-slot-card:focus-within .mission-loadout-slot-remove { opacity: 1; transform: translateY(0); }
.mission-loadout-slot-remove:hover, .mission-loadout-slot-remove:focus-visible { border-color: #f0b0a0; background: rgba(80,24,36,.94); }
.mission-loadout-slot-card.is-preview-target .mission-loadout-slot { border-color: rgba(230,201,120,.9); box-shadow: inset 0 0 0 1px rgba(230,201,120,.65), 0 0 15px rgba(230,201,120,.26); }
.mission-loadout-slot-card.has-upgrade .mission-loadout-slot { border-color: rgba(126,203,158,.82); box-shadow: inset 0 0 0 1px rgba(126,203,158,.42), inset 0 0 22px rgba(126,203,158,.1), 0 0 14px rgba(126,203,158,.16); }
.mission-loadout-slot-card.has-upgrade .mission-loadout-slot:hover, .mission-loadout-slot-card.has-upgrade .mission-loadout-slot:focus-visible { border-color: rgba(169,232,188,.96); box-shadow: inset 0 0 0 1px rgba(169,232,188,.62), inset 0 0 27px rgba(126,203,158,.16), 0 0 18px rgba(126,203,158,.26); }
.mission-loadout-upgrade-pip { position: absolute; z-index: 5; top: 5px; left: 5px; display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid rgba(169,232,188,.82); border-radius: 50%; background: rgba(13,62,43,.94); color: #b8f0c9; box-shadow: 0 0 10px rgba(126,203,158,.48); font: 800 .52rem/1 'Jost', sans-serif; pointer-events: none; }
.mission-loadout-slot-card:nth-child(7) .mission-loadout-upgrade-pip { top: 7px; }
.mission-loadout-slots.is-previewing::after { content: 'COMPARING'; position: absolute; z-index: 3; right: 5px; bottom: 5px; color: #e5c978; font-size: .5rem; font-weight: 700; letter-spacing: .12em; text-shadow: 0 1px 3px #050914; }
.mission-loadout-option.is-recommended { border-color: rgba(229,201,120,.66); box-shadow: inset 3px 0 rgba(229,201,120,.75), 0 0 13px rgba(229,201,120,.08); }
.mission-loadout-option strong { display: flex; align-items: center; gap: 7px; }
.mission-loadout-option strong em { flex: 0 0 auto; padding: 2px 4px; border: 1px solid rgba(229,201,120,.5); color: #e5c978; font-size: .5rem; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mission-loadout-modal.is-auto-equipping .mission-loadout-slots, .mission-loadout-modal.is-auto-equipping .mission-loadout-picker { pointer-events: none; opacity: .64; }
@keyframes loadout-slot-scan { 0%, 100% { top: 13%; opacity: .45; } 50% { top: 82%; opacity: 1; } }
@keyframes loadout-connector-pulse { 0%, 100% { opacity: .34; } 50% { opacity: 1; } }

/* Inventory */
.missions-inventory-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 12px; align-items: end; margin: -3px 0 16px; padding: 13px; border: 1px solid rgba(80,129,168,0.34); background: rgba(10,20,38,0.48); }
.missions-inventory-controls .missions-crew-filter-summary { grid-column: 1 / -1; }
.missions-inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.mission-inventory-card { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 13px; border: 1px solid rgba(var(--gear-tier), 0.38); background: linear-gradient(140deg, rgba(16,33,57,0.9), rgba(22,13,45,0.86)); }
.mission-inventory-card.is-salvage { border-color: rgba(88,142,181,0.3); }
.mission-inventory-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; border: 1px solid rgba(var(--gear-tier), 0.45); background: rgba(var(--gear-tier), 0.1); color: rgb(var(--gear-tier)); }
.mission-inventory-icon svg { display: block; width: 26px; height: 26px; }
.mission-inventory-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mission-inventory-copy { min-width: 0; }
.mission-inventory-copy h3 { margin: 0 34px 3px 0; color: #f0edf8; font-size: 0.9rem; }
.mission-inventory-meta { margin: 0 !important; color: #90abba !important; font-size: 0.66rem !important; }
.mission-inventory-tier { display: inline-flex; align-items: center; min-height: 17px; padding: 1px 5px; border: 1px solid rgba(var(--gear-tier), .56); background: rgba(var(--gear-tier), .12); color: rgb(var(--gear-tier)); font-size: .56rem; font-weight: 800; letter-spacing: .075em; text-shadow: 0 0 8px rgba(var(--gear-tier), .45); text-transform: uppercase; }
.mission-inventory-bonus { margin: 6px 0 0 !important; color: #9edba8 !important; font-size: 0.7rem !important; font-weight: 600; }
.mission-inventory-desc { margin: 6px 0 0 !important; color: #a9bdcb !important; font-size: 0.7rem !important; line-height: 1.5 !important; }
.mission-inventory-requires { margin: 5px 0 0 !important; color: #d5b271 !important; font-size: 0.65rem !important; font-weight: 600; }
.mission-inventory-state { margin: 6px 0 0 !important; color: #7d94a6 !important; font-size: 0.65rem !important; font-weight: 600; }
.mission-inventory-state.is-active { color: #79d9df !important; }
@media (max-width: 620px) {
  .mission-loadout-command { grid-template-columns: minmax(0, 1fr); }
  .mission-loadout-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mission-loadout-quick-actions .btn { width: 100%; white-space: normal; }
  .mission-loadout-body { grid-template-columns: minmax(0, 1fr); }
  .mission-loadout-body::before { display: none; }
  .mission-loadout-slots::before { inset: 10% 28%; opacity: .12; }
  .mission-loadout-compare-items { flex-basis: 100%; }
  .mission-loadout-readiness-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .missions-inventory-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) { .missions-page.has-watermark::before { background-size: min(78vmin, 420px); } }

.missions-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 285px; display: flex; align-items: end; border-bottom: 1px solid rgba(83,133,169,0.32); }
.missions-hero-art { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(6,7,16,0.94) 0%, rgba(7,10,21,0.72) 48%, rgba(7,9,21,0.45)), url('../images/world-neoh.jpg') center 47% / cover; filter: saturate(1.22) contrast(1.08) hue-rotate(8deg); }
.missions-hero-art::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(112,228,242,0.035) 0, rgba(112,228,242,0.035) 1px, transparent 1px, transparent 4px); mix-blend-mode: screen; }
.missions-hero-veil { position: absolute; z-index: -1; inset: auto 0 0; height: 60%; background: linear-gradient(transparent, #090713); }
.missions-hero-content { width: 100%; padding-top: 75px; padding-bottom: 42px; }
.missions-hero-content .eyebrow { color: #79d9df; }
.missions-hero-content h1 { margin: 0 0 8px; text-shadow: 0 0 28px rgba(95,220,233,0.22); }
.missions-hero-content p { max-width: 630px; margin: 0; color: #b5cbd9; font-size: 1.03rem; }
.missions-main { padding: 34px 0 72px; }
.missions-gate { max-width: 650px; margin: 38px auto; padding: 44px; border: 1px solid rgba(113,220,230,0.27); background: linear-gradient(145deg, rgba(19,43,64,0.5), rgba(22,13,47,0.72)); text-align: center; box-shadow: 0 18px 55px rgba(0,0,0,0.28); }
.missions-gate .eyebrow { color: #79d9df; }
.missions-command-header { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 18px; }
.missions-world-label, .mission-world { display: inline-block; color: #75d6de; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.missions-command-header h2 { margin: 5px 0; font-size: clamp(1.65rem, 3vw, 2.3rem); }
.missions-command-header p { margin: 0; max-width: 640px; font-size: 0.87rem; }
.missions-status-message { max-width: 355px; margin: 0; color: #8ee3bd; font-size: 0.78rem; text-align: right; }
.missions-status-message.is-error { color: #efa5a1; }
.missions-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 40px; border: 1px solid rgba(80,129,168,0.34); background: linear-gradient(135deg, rgba(15,29,51,0.88), rgba(20,13,45,0.86)); }
.missions-stats article { position: relative; display: grid; gap: 4px; min-height: 84px; padding: 17px 20px; border-right: 1px solid rgba(80,129,168,0.27); }
.missions-stats article:last-child { border-right: 0; }
.missions-stats article::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: linear-gradient(90deg, #69e0e8, transparent); opacity: 0.46; }
.missions-stats span { color: #8ba5be; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.missions-stats strong { color: #e9d399; font: 600 1.65rem/1 'Cinzel', serif; }
.mission-command-feed { margin-bottom: 40px; padding: 20px 22px; border: 1px solid rgba(94,183,198,0.34); background: linear-gradient(110deg, rgba(11,35,53,0.78), rgba(21,13,46,0.85)); box-shadow: inset 0 1px rgba(133,229,237,0.06); }
.mission-command-feed-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(92,163,181,0.22); }
.mission-command-feed-head .eyebrow { margin-bottom: 4px; color: #78dce3; font-size: 0.61rem; }
.mission-command-feed-head h2 { margin: 0; font-size: 1.18rem; }
.mission-feed-live { display: inline-flex; align-items: center; gap: 7px; color: #8ee3bd; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.mission-feed-live i { width: 7px; height: 7px; border-radius: 50%; background: #80e1ae; box-shadow: 0 0 0 4px rgba(128,225,174,0.1), 0 0 11px rgba(128,225,174,0.8); animation: mission-feed-pulse 2.4s ease-in-out infinite; }
@keyframes mission-feed-pulse { 0%,100% { opacity: .72; transform: scale(.86); } 50% { opacity: 1; transform: scale(1); } }
.mission-feed-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.mission-feed-entry { position: relative; min-height: 82px; padding: 15px 18px 13px; border-right: 1px solid rgba(92,163,181,0.2); }
.mission-feed-entry:first-child { padding-left: 0; }.mission-feed-entry:last-child { padding-right: 0; border-right: 0; }
.mission-feed-entry time { display: block; margin-bottom: 6px; color: #6e91a7; font-size: 0.57rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.mission-feed-code { display: block; color: #85dce2; font-size: 0.61rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-feed-entry p { margin: 5px 0 0; color: #b4c9d6; font-size: .72rem; line-height: 1.42; }
.mission-feed-entry.is-live .mission-feed-code { color: #7ce2e8; }.mission-feed-entry.is-ready .mission-feed-code { color: #ebd18a; }.mission-feed-entry.is-watch .mission-feed-code { color: #d6a777; }.mission-feed-entry.is-muted { opacity: .76; }
.mission-feed-empty { padding: 16px 0 0; color: #88a2b2; font-size: .74rem; }
/* Campaign track, drawn under a chain's own mission card, below its action. One
 * block per operation; blocks the player has not reached carry no name, so the
 * bar communicates how far the campaign runs without revealing what is in it.
 * The counts and the current-operation state live in its hover/focus tooltip
 * rather than in printed lines, which is what keeps the card compact. */
.mission-campaign-track { display: flex; gap: 3px; }
.mission-campaign-bar { margin-top: 13px; cursor: help; }
.mission-campaign-bar:focus-visible { outline: 2px solid rgba(126,227,232,0.65); outline-offset: 3px; }
.mission-campaign-block { position: relative; flex: 1 1 0; min-width: 0; height: 10px; overflow: hidden; border: 1px solid rgba(103,152,190,0.4); background: rgba(9,19,35,0.7); }
.mission-campaign-block i { display: block; height: 100%; background: linear-gradient(90deg, #4fc6d6, #7ee3e8); box-shadow: 0 0 10px rgba(110,224,232,0.45); transition: width .5s ease; }
.mission-campaign-block.is-current { border-color: rgba(235,209,138,0.6); }
.mission-campaign-block.is-current i { background: linear-gradient(90deg, #c9a24e, #ebd18a); box-shadow: 0 0 10px rgba(235,209,138,0.5); }
.mission-campaign-block.is-locked { border-color: rgba(105,101,134,0.4); background: rgba(16,16,30,0.66); }
/* An operation taken off the roster. Hatched rather than simply dimmed, so it
 * cannot be mistaken for a step the player has not reached yet. */
.mission-campaign-block.is-offline { border-color: rgba(214,167,119,0.55); background: repeating-linear-gradient(135deg, rgba(214,167,119,0.22) 0 3px, rgba(9,19,35,0.7) 3px 6px); }
.mission-campaign-bar.is-complete .mission-campaign-block i { background: linear-gradient(90deg, #6ad2a2, #9edba8); box-shadow: 0 0 10px rgba(158,219,168,0.45); }
.mission-definition-card.is-offline { border-color: rgba(113,105,146,0.4); background: linear-gradient(145deg, rgba(21,27,47,0.78), rgba(26,17,44,0.86)); }
.mission-definition-card.is-offline h3 { color: #b9b3cc; }
@media (prefers-reduced-motion: reduce) { .mission-campaign-block i, .mission-type-group-head::after { transition: none; } }
@media (max-width: 620px) { .mission-campaign-block { height: 9px; } }

/* Crew stat card. Stats are allocated automatically on level up, so this is a
 * readout rather than a control -- nothing here is clickable, but every cell is
 * focusable so the hover explanation is reachable by keyboard too. */
.crew-stat-card { margin: 10px 0 0; padding: 9px 10px 8px; border: 1px solid rgba(88,142,181,0.28); background: rgba(8,18,33,0.5); }
/* One row of four. The per-stat effect sentence moved into the tooltip, which
 * is what lets each cell shrink to a key, a figure and a bar. */
.crew-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
/* Flex-wrap, not a two-column grid. The grid track pair could not shrink below
 * their own min-content plus the gap, so under about 53px of cell the value
 * pushed straight through the right padding -- 5px out at a 240px card and
 * 20px out at 180px. Wrapping puts the value on its own line instead, which
 * is narrower than any overflow and still readable. */
.crew-stat { display: grid; grid-template-rows: 1fr auto; gap: 2px; padding: 5px 6px; border: 1px solid rgba(103,152,190,0.24); background: rgba(12,25,44,0.66); cursor: help; }
/* 1fr for the label row and auto for the bar, so the bar sits on the cell's
 * last row whatever the label row did. Cells in a grid row are equal height, so
 * every bar lines up even when one cell wrapped and its neighbour did not. */
.crew-stat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 5px; min-width: 0; }
.crew-stat:hover, .crew-stat:focus-visible { border-color: rgba(126,227,232,0.55); background: rgba(16,34,58,0.8); }
.crew-stat-key { min-width: 0; color: #79d9df; font-size: 0.54rem; font-weight: 700; letter-spacing: .08em; }
.crew-stat-value { min-width: 0; color: #f0edf8; font-size: 0.78rem; font-weight: 600; line-height: 1; }
.crew-stat-bar { align-self: end; height: 4px; margin: 4px 0 0; overflow: hidden; background: rgba(9,19,35,0.85); }
.crew-stat-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4fc6d6, #7ee3e8); transition: width .4s ease; }
.crew-stat.is-strength .crew-stat-key { color: #e08a72; } .crew-stat.is-strength .crew-stat-bar i { background: linear-gradient(90deg, #b8543a, #e08a72); }
.crew-stat.is-cunning .crew-stat-key { color: #c79ae8; } .crew-stat.is-cunning .crew-stat-bar i { background: linear-gradient(90deg, #8d5cc4, #c79ae8); }
.crew-stat.is-science .crew-stat-key { color: #6fd7b0; } .crew-stat.is-science .crew-stat-bar i { background: linear-gradient(90deg, #34a37c, #6fd7b0); }
.crew-stat.is-charisma .crew-stat-key { color: #e8c66f; } .crew-stat.is-charisma .crew-stat-bar i { background: linear-gradient(90deg, #c09033, #e8c66f); }
.crew-stat.is-max { border-color: rgba(235,209,138,0.5); }
.crew-stat.is-max .crew-stat-value { color: #ebd18a; }
.crew-stat-role { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 0 0; padding-top: 7px; border-top: 1px solid rgba(88,142,181,0.22); cursor: help; }
.crew-stat-role span { color: #87a7bb; font-size: 0.58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.crew-stat-role strong { color: #7ee3e8; font-size: 0.68rem; font-weight: 600; white-space: nowrap; }
.crew-stat-role:hover span, .crew-stat-role:focus-visible span { color: #b6cad8; }
.crew-progression.is-max-level .crew-rank-insignia { border-color: rgba(235,209,138,0.6); color: #ebd18a; }

/* Mission risk line. Only rendered when an operation can actually fail or
 * actually drops loot, so a plain mission card is unchanged. */
.mission-risk { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 !important; }
.mission-risk span { padding: 3px 7px; border: 1px solid rgba(103,152,190,0.34); color: #b6cad8; font-size: 0.6rem; font-weight: 600; letter-spacing: .04em; cursor: help; }
.mission-risk span:hover, .mission-risk span:focus-visible { border-color: rgba(126,227,232,0.55); color: #dceaf3; }
.mission-risk-chance { border-color: rgba(224,138,114,0.4) !important; color: #e0a894 !important; }
.mission-risk-chance em { color: #9edba8; font-style: normal; }
.mission-risk-loot { border-color: rgba(199,154,232,0.4) !important; color: #c79ae8 !important; }

/* Contract progression is stated before launch: the tier tells a player where
 * this operation sits, while the authored band and featured slots explain how
 * it improves their loadout without exposing the table's exact odds. */
.mission-progression { display: grid; gap: 5px; margin: 11px 0 0; padding: 9px 10px; border: 1px solid rgba(126,203,158,.38); background: linear-gradient(110deg, rgba(14,54,39,.52), rgba(11,25,42,.48)); }
.mission-progression-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #bcebc7; font: 700 .6rem/1 'Jost', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.mission-progression-head small { color: #7ecb9e; font-size: .54rem; letter-spacing: .08em; }
.mission-progression-items { display: flex; flex-wrap: wrap; gap: 5px; }
.mission-progression-items span { padding: 3px 5px; border: 1px solid rgba(126,203,158,.26); background: rgba(5,21,27,.42); color: #a7cbb1; font-size: .58rem; font-weight: 600; line-height: 1.25; }
.mission-progression-items span.is-featured { border-color: rgba(226,201,127,.46); color: #f0d88e; }
@media (prefers-reduced-motion: reduce) { .crew-stat-bar i { transition: none; } }
@media (max-width: 470px) { .crew-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Two-column shell: everything the page already had on the left, a sticky
 * commander rail on the right. The rail stacks first on narrow screens -- a
 * player's own standing and balance are the summary the rest of the page is
 * measured against, so they belong above it rather than after a long roster. */
/* Conditions on the left, operations in the middle, commander on the right. The
 * left rail is narrower than the right: it carries one card, and Neoh's weather
 * needs less room than a reputation bar and a balance.
 *
 * The page's own container is widened past the site-wide 1180px because two
 * rails do not fit inside it: measured at 1180, a 224px left rail left the
 * operations column at 586px, which dropped both the crew grid and the
 * operations grid to a single card per row. 1360 restores two-up in both while
 * staying narrower than the widest breakpoint below. Safe to widen here because
 * every text block on this page carries its own max-width -- this is a
 * dashboard, not prose. */
.missions-page .container { max-width: 1360px; }
.missions-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr) 262px; gap: 26px; align-items: start; }
.missions-conditions-rail { display: grid; gap: 14px; align-content: start; min-width: 0; }
/* Today's conditions on Neoh. Tinted by the condition itself through
 * --wx-signal, so a storm card and a clear card are recognisably different
 * objects rather than the same panel with different words in it. */
.mission-weather-card { --wx-signal: 112,228,242; padding: 15px 16px 16px; border: 1px solid rgba(88,142,181,0.36); background: linear-gradient(160deg, rgba(13,32,52,0.82), rgba(20,13,42,0.88)); box-shadow: inset 0 1px rgba(136,229,237,0.05); }
.mission-weather-card .eyebrow { margin-bottom: 11px; color: rgb(var(--wx-signal)); font-size: 0.57rem; }
.mission-weather-card.is-storm { --wx-signal: 200,168,255; }
.mission-weather-card.is-acid-rain { --wx-signal: 158,219,168; }
.mission-weather-card.is-smog { --wx-signal: 214,167,119; }
.mission-weather-card.is-clear { --wx-signal: 235,209,138; }
.mission-weather-card.is-severe { border-color: rgba(224,138,114,0.45); }
.mission-market-card { position: relative; display: grid; gap: 9px; overflow: hidden; padding: 15px 16px 16px; border: 1px solid rgba(170,128,228,0.46); background: linear-gradient(148deg, rgba(46,25,80,0.84), rgba(13,35,53,0.9)); color: inherit; text-decoration: none; box-shadow: inset 0 1px rgba(218,184,251,0.08), 0 10px 24px rgba(5,3,15,0.16); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.mission-market-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, transparent 33%, rgba(204,159,241,0.17) 49%, transparent 63%); transform: translateX(-95%); transition: transform .7s ease; }.mission-market-card:hover, .mission-market-card:focus-visible { border-color: rgba(211,171,246,0.78); box-shadow: inset 0 1px rgba(234,205,255,0.14), 0 14px 30px rgba(49,20,92,0.25); transform: translateY(-2px); }.mission-market-card:hover::before, .mission-market-card:focus-visible::before { transform: translateX(95%); }.mission-market-card:focus-visible { outline: 2px solid rgba(152,229,235,0.75); outline-offset: 2px; }
.mission-market-card .eyebrow { position: relative; margin: 0; color: #caa3ef; font-size: .57rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.mission-market-card-head { position: relative; display: flex; align-items: center; gap: 9px; }.mission-market-card-head strong { color: #eee6f6; font: 600 .98rem/1 'Cinzel', serif; }.mission-market-card-icon { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(208,165,242,0.54); color: #d9b2f5; font-size: .86rem; box-shadow: 0 0 14px rgba(176,105,225,0.16); }.mission-market-card-copy { position: relative; color: #ab9fc0; font-size: .72rem; line-height: 1.45; }.mission-market-card-link { position: relative; color: #8fdee4; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.mission-market-card-link b { margin-left: 3px; font-size: .82rem; transition: transform .2s ease; }.mission-market-card:hover .mission-market-card-link b { display: inline-block; transform: translateX(3px); }.mission-market-card-scan { position: absolute; top: 0; left: -50%; width: 35%; height: 1px; background: #d2a8f1; box-shadow: 0 0 12px #d2a8f1; animation: mission-market-scan 4.8s linear infinite; }
@keyframes mission-market-scan { to { left: 120%; } }
.mission-research-card { position: relative; display: grid; gap: 9px; overflow: hidden; padding: 15px 16px 16px; border: 1px solid rgba(95, 205, 210, 0.48); background: linear-gradient(148deg, rgba(11, 49, 63, .88), rgba(27, 17, 57, .93)); color: inherit; text-decoration: none; box-shadow: inset 0 1px rgba(143, 233, 230, .09), 0 10px 24px rgba(5, 3, 15, .16); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }.mission-research-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, transparent 32%, rgba(115, 234, 230, .16) 49%, transparent 64%); transform: translateX(-95%); transition: transform .7s ease; }.mission-research-card:hover, .mission-research-card:focus-visible { border-color: rgba(137, 238, 233, .82); box-shadow: inset 0 1px rgba(174, 246, 240, .15), 0 14px 30px rgba(25, 79, 91, .25); outline: 2px solid rgba(152,229,235,.75); outline-offset: 2px; transform: translateY(-2px); }.mission-research-card:hover::before, .mission-research-card:focus-visible::before { transform: translateX(95%); }.mission-research-card .eyebrow, .mission-research-card-head, .mission-research-card-copy, .mission-research-card-link { position: relative; }.mission-research-card .eyebrow { margin: 0; color: #91e3e4; font-size: .57rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.mission-research-card-head { display: flex; align-items: center; gap: 9px; }.mission-research-card-head strong { color: #e6f3f2; font: 600 .98rem/1 'Cinzel', serif; }.mission-research-card-icon { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(119, 226, 224, .58); color: #9ce9e7; font: 700 1rem 'Cinzel', serif; box-shadow: 0 0 14px rgba(93, 224, 219, .16); }.mission-research-card-copy { color: #9dbdc4; font-size: .72rem; line-height: 1.45; }.mission-research-card-link { color: #e4cd84; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.mission-research-card-link b { margin-left: 3px; font-size: .82rem; transition: transform .2s ease; }.mission-research-card:hover .mission-research-card-link b { display: inline-block; transform: translateX(3px); }.mission-research-card-grid { position: absolute; right: -28px; bottom: -35px; width: 130px; height: 120px; opacity: .28; background: linear-gradient(rgba(121, 229, 228, .44) 1px, transparent 1px), linear-gradient(90deg, rgba(121, 229, 228, .44) 1px, transparent 1px); background-size: 16px 16px; transform: perspective(120px) rotateX(56deg); }
.mission-weather-head { display: flex; align-items: center; gap: 11px; }
.mission-weather-icon { flex: 0 0 auto; width: 34px; height: 34px; color: rgb(var(--wx-signal)); filter: drop-shadow(0 0 9px rgba(var(--wx-signal), 0.4)); }
.mission-weather-icon svg { display: block; width: 100%; height: 100%; }
.mission-weather-read { display: grid; gap: 2px; min-width: 0; }
.mission-weather-read strong { color: #eef4f8; font-size: 0.85rem; line-height: 1.2; }
.mission-weather-read small { color: #9db3c2; font-size: 0.65rem; }
.mission-weather-severity { margin: 11px 0 0 !important; padding: 3px 7px; border: 1px solid rgba(224,138,114,0.45); color: #e0a894 !important; font-size: 0.6rem !important; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; justify-self: start; }
.mission-weather-effects { display: grid; gap: 5px; margin: 11px 0 0; padding: 0; list-style: none; }
.mission-weather-effects li { padding-left: 10px; border-left: 2px solid currentColor; font-size: 0.68rem; font-weight: 600; line-height: 1.35; cursor: help; }
.mission-weather-effects li.is-slow { color: #e0a894; }
.mission-weather-effects li.is-luck { color: #c8a8ff; }
.mission-weather-clear { margin: 11px 0 0 !important; color: #9edba8 !important; font-size: 0.68rem !important; font-weight: 600; }
.mission-weather-hazard { margin: 11px 0 0 !important; color: #a4bac8 !important; font-size: 0.65rem !important; line-height: 1.5 !important; }
.mission-weather-link { display: inline-block; margin-top: 12px; color: rgb(var(--wx-signal)); font-size: 0.62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; }
.mission-weather-link::after { content: ' →'; }
.mission-weather-link:hover, .mission-weather-link:focus-visible { text-decoration: underline; }
.mission-projection-note.is-weather { color: #c8a8ff !important; }
.mission-result-affinity.is-weather { color: #c8a8ff !important; }
.missions-primary { min-width: 0; }
/* Deliberately not sticky: the rail scrolls away with the page. */
.missions-rail { display: grid; gap: 14px; align-content: start; min-width: 0; }
.mission-profile-card { padding: 17px 16px 15px; border: 1px solid rgba(94,183,198,0.34); background: linear-gradient(150deg, rgba(11,35,53,0.82), rgba(21,13,46,0.88)); box-shadow: inset 0 1px rgba(133,229,237,0.06); }
.mission-profile-card .eyebrow { display: block; margin-bottom: 11px; color: #79d9df; font-size: 0.6rem; }
.mission-profile-loading { margin: 0; color: #86a0b2; font-size: 0.74rem; }
.mission-profile-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.mission-profile-avatar { position: relative; display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border: 2px solid var(--rank-color, #79d9df); border-radius: 50%; background: linear-gradient(145deg, #20394d, #241641); box-shadow: 0 0 14px rgba(121,217,223,0.2); }
.mission-profile-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mission-profile-avatar-fallback { color: #e7d092; font: 600 1.3rem 'Cinzel', serif; }
.mission-profile-identity { display: grid; gap: 3px; min-width: 0; }
.mission-profile-identity strong { overflow: hidden; color: #f0edf8; font-size: 0.94rem; text-overflow: ellipsis; white-space: nowrap; }
.mission-profile-rank { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 600; letter-spacing: .05em; }
.mission-profile-rank i { display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid currentColor; color: inherit; font: 700 .55rem/1 'Cinzel', serif; font-style: normal; }
.mission-profile-rep { margin-top: 13px; }
.mission-profile-rep-track { display: block; height: 5px; overflow: hidden; background: rgba(3,6,14,0.8); box-shadow: inset 0 1px 2px rgba(0,0,0,0.38); }
.mission-profile-rep-track i { display: block; height: 100%; transition: width .5s ease; }
.mission-profile-rep small { display: block; margin-top: 6px; color: #8ba5be; font-size: 0.63rem; line-height: 1.4; }
.mission-profile-credits { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(92,163,181,0.24); }
.mission-profile-credits span { color: #8ba5be; font-size: 0.6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-profile-credits strong { color: #e9d399; font: 600 1.2rem/1 'Cinzel', serif; }
.mission-profile-credits.is-pending { display: grid; }
.mission-profile-credits.is-pending small { color: #86a0b2; font-size: 0.63rem; line-height: 1.4; }

/* Daily objective, sitting under the commander card in the same rail. One
 * objective a day, so this is a single small panel rather than a list. */
.mission-daily-card { padding: 15px 16px 14px; border: 1px solid rgba(199,154,232,0.34); background: linear-gradient(150deg, rgba(30,18,54,0.86), rgba(14,20,42,0.88)); box-shadow: inset 0 1px rgba(199,154,232,0.07); }
.mission-daily-card[hidden] { display: none; }
.mission-daily-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.mission-daily-head .eyebrow { margin: 0; color: #c79ae8; font-size: 0.6rem; }
.mission-daily-reset { color: #8ba5be; font-size: 0.58rem; letter-spacing: .04em; white-space: nowrap; }
.mission-daily-label { margin: 0 0 4px; color: #f0edf8; font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.mission-daily-detail { margin: 0; color: #8ba5be; font-size: 0.66rem; line-height: 1.45; }
.mission-daily-track { display: block; height: 6px; margin: 11px 0 6px; overflow: hidden; background: rgba(3,6,14,0.8); box-shadow: inset 0 1px 2px rgba(0,0,0,0.38); }
.mission-daily-track i { display: block; height: 100%; background: linear-gradient(90deg, #8d5cc4, #c79ae8); box-shadow: 0 0 9px rgba(199,154,232,0.5); transition: width .5s ease; }
.mission-daily-card.is-complete .mission-daily-track i { background: linear-gradient(90deg, #6ad2a2, #9edba8); box-shadow: 0 0 9px rgba(158,219,168,0.5); }
.mission-daily-progress { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #a9bdcb; font-size: 0.66rem; }
.mission-daily-progress strong { color: #e9d399; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.mission-daily-card .btn { width: 100%; margin-top: 11px; padding: 9px 12px; font-size: 0.67rem; }
.mission-daily-done { display: flex; align-items: center; gap: 7px; margin: 11px 0 0; padding-top: 10px; border-top: 1px solid rgba(199,154,232,0.22); color: #9edba8; font-size: 0.68rem; font-weight: 600; }
.mission-daily-done::before { content: ''; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #9edba8; box-shadow: 0 0 8px rgba(158,219,168,0.7); }
.mission-daily-error { margin: 9px 0 0; color: #efa5a1; font-size: 0.66rem; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .mission-daily-track i { transition: none; } }

/* Mission debrief. The two outcomes share a shape so the report always reads
 * the same way; only the accent and the figures differ. */
.mission-result-modal { width: min(560px, calc(100vw - 28px)); padding: 0; border: 1px solid rgba(105,213,222,0.5); color: var(--text); background: #100d22; box-shadow: 0 24px 90px rgba(0,0,0,0.7), 0 0 45px rgba(71,207,218,0.13); }
.mission-result-modal::backdrop { background: rgba(3,4,12,0.8); backdrop-filter: blur(4px); }
.mission-result-inner { position: relative; padding: 28px; background: linear-gradient(150deg, rgba(17,48,66,0.96), rgba(20,12,42,0.98)); }
.mission-result-inner.is-failed { background: linear-gradient(150deg, rgba(62,25,30,0.9), rgba(23,11,30,0.98)); }
.mission-result-inner.is-rival-loss { background: linear-gradient(150deg, rgba(61,39,30,0.94), rgba(27,13,34,0.98)); }
.mission-result-inner::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #6ce5eb, #8d67d3); }
.mission-result-inner.is-failed::before { background: linear-gradient(90deg, #e0705c, #a2506e); }
.mission-result-inner.is-rival-loss::before { background: linear-gradient(90deg, #e8a45f, #af5c6f); }
.mission-result-body .eyebrow { display: block; margin-bottom: 6px; color: #79d9df; font-size: 0.62rem; }
.mission-result-inner.is-failed .mission-result-body .eyebrow { color: #e8a08e; }
.mission-result-body h2 { margin: 0 34px 4px 0; font-size: 1.42rem; }
.mission-result-mission { margin: 0 0 9px; color: #9ae2e6; font-size: 0.68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-result-inner.is-failed .mission-result-mission { color: #e0a894; }
.mission-result-lead { margin: 0; color: #aec3cf; font-size: 0.82rem; line-height: 1.55; }
.mission-result-rival { display: grid; gap: 4px; margin-top: 14px; padding: 11px 12px; border: 1px solid rgba(120,214,222,0.46); background: linear-gradient(120deg, rgba(20,69,81,0.42), rgba(20,13,43,0.56)); }
.mission-result-rival > span { color: #79d9df; font-size: 0.56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-result-rival strong { color: #eaf6f7; font: 600 .92rem/1.2 'Cinzel', serif; }
.mission-result-rival p { margin: 0; color: #b7cbd5; font-size: .7rem; line-height: 1.45; }
.mission-result-rival.is-won { border-color: rgba(126,227,168,0.55); background: linear-gradient(120deg, rgba(25,88,64,0.42), rgba(20,13,43,0.56)); }
.mission-result-rival.is-won > span, .mission-result-rival.is-won strong { color: #a8edbd; }
.mission-result-rival.is-safe { border-color: rgba(126,184,231,0.5); }.mission-result-rival.is-safe > span, .mission-result-rival.is-safe strong { color: #a4d5f4; }
.mission-result-rival.is-narrow_loss, .mission-result-rival.is-decisive_loss { border-color: rgba(234,165,96,0.58); background: linear-gradient(120deg, rgba(97,50,34,0.42), rgba(35,14,38,0.58)); }.mission-result-rival.is-narrow_loss > span, .mission-result-rival.is-narrow_loss strong, .mission-result-rival.is-decisive_loss > span, .mission-result-rival.is-decisive_loss strong { color: #f2bf83; }
.mission-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; margin-top: 18px; }
.mission-result-stat { padding: 11px 12px; border: 1px solid rgba(103,152,190,0.3); background: rgba(8,18,33,0.55); }
.mission-result-stat span { display: block; color: #8ba5be; font-size: 0.58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-result-stat strong { display: block; margin: 5px 0 3px; color: #f0edf8; font: 600 1.24rem/1 'Cinzel', serif; }
.mission-result-stat.is-credits strong { color: #e9d399; }
.mission-result-stat.is-rep strong { color: #9edba8; }
.mission-result-stat small { display: block; color: #7e97ab; font-size: 0.62rem; line-height: 1.35; }
.mission-result-inner.is-failed .mission-result-stat strong { color: #b6a3ad; }
.mission-result-block { margin-top: 16px; }
.mission-result-block h4 { margin: 0 0 7px; color: #79d9df; font-size: 0.6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-result-loot, .mission-result-levels, .mission-result-recruits { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.mission-result-loot li, .mission-result-levels li, .mission-result-recruits li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid rgba(103,152,190,0.26); background: rgba(8,18,33,0.5); color: #dceaf3; font-size: 0.78rem; }
.mission-result-loot em, .mission-result-levels em, .mission-result-recruits em { color: #8ba5be; font-size: 0.63rem; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.mission-result-loot li.is-uncommon { border-color: rgba(110,211,220,0.4); } .mission-result-loot li.is-uncommon em { color: #83dce4; }
.mission-result-loot li.is-rare { border-color: rgba(199,154,232,0.45); } .mission-result-loot li.is-rare em { color: #c79ae8; }
.mission-result-loot li.is-legendary { border-color: rgba(235,209,138,0.55); box-shadow: inset 0 0 22px rgba(235,209,138,0.08); } .mission-result-loot li.is-legendary em { color: #ebd18a; }
.mission-result-loot li.mission-result-gear { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-color: rgba(var(--gear-tier), 0.48); }
.mission-result-gear-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; overflow: hidden; border: 1px solid rgba(var(--gear-tier), 0.56); background: rgba(var(--gear-tier), 0.11); color: rgb(var(--gear-tier)); }
.mission-result-gear-icon svg { display: block; width: 24px; height: 24px; }
.mission-result-gear-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mission-result-gear-copy { display: grid; min-width: 0; gap: 2px; }
.mission-result-gear-copy strong { overflow: hidden; color: #eef4f8; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.mission-result-gear-copy small { color: #8ba5be; font-size: 0.6rem; letter-spacing: .05em; text-transform: uppercase; }
.mission-result-gear-copy b { color: #9edba8; font-size: 0.65rem; font-weight: 700; }.mission-result-gear-copy b.is-neutral { color: #8ba5be; font-weight: 500; }
.mission-result-gear-upgrade { display: block; overflow: hidden; color: #9edba8; font-size: 0.58rem; font-weight: 700; letter-spacing: .035em; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.mission-result-gear-upgrade::before { content: '↑ '; color: #d8edaa; }.mission-result-gear-upgrade.is-inventory { color: #8ddde1; }.mission-result-gear-upgrade.is-inventory::before { color: #b6eef0; }
.mission-result-gear-status { min-height: 1em; color: #8ddde1; font-size: 0.6rem; font-style: normal; line-height: 1.35; }.mission-result-gear.is-destroyed { opacity: .58; }.mission-result-gear.is-destroyed .mission-result-gear-status { color: #9edba8; }
.mission-result-destroy { min-height: 29px; padding: 0 8px; border: 1px solid rgba(224,138,114,0.58); background: rgba(78,28,39,0.4); color: #efa5a1; font: 700 0.56rem/1 'Jost', sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }.mission-result-destroy:hover:not(:disabled), .mission-result-destroy:focus-visible { border-color: #efa5a1; background: rgba(116,41,54,0.58); color: #fff2f0; }.mission-result-destroy:disabled { cursor: default; }.mission-result-destroy.is-destroyed { border-color: rgba(158,219,168,0.45); background: rgba(48,91,70,0.42); color: #9edba8; }
@media (max-width: 460px) { .mission-result-loot li.mission-result-gear { grid-template-columns: 34px minmax(0, 1fr); }.mission-result-gear-icon { width: 34px; height: 34px; }.mission-result-destroy { grid-column: 2; justify-self: start; }.mission-result-gear-status { margin-top: 2px; } }
.mission-result-levels em { color: #9edba8; }
/* A recruited character is the rarest outcome a mission has, so it is the one
 * block in the debrief that carries a gold edge rather than the shared grey. */
.mission-result-recruits li { border-color: rgba(235,209,138,0.5); box-shadow: inset 0 0 22px rgba(235,209,138,0.07); }
.mission-result-recruits em { color: #ebd18a; }
.mission-result-block.is-recruit h4 { color: #ebd18a; }
.mission-result-note { margin: 10px 0 0; color: #8ba5be; font-size: 0.7rem; line-height: 1.45; }
.mission-result-inner .mission-launch-actions { margin-top: 20px; }
.mission-history-row.is-failed { opacity: .82; }
.mission-history-status.is-failed { border-color: rgba(224,138,114,0.5); color: #e0a894; }
.mission-definition-meta dd.is-credits { color: #f0d591; }
@media (prefers-reduced-motion: reduce) { .mission-profile-rep-track i { transition: none; }.mission-market-card, .mission-market-card::before, .mission-market-card-link b { transition: none; }.mission-market-card-scan { animation: none; } }
/* Between the two rails and a single column there is a band where three columns
 * would squeeze the operations grid below two cards. The conditions card becomes
 * a full-width strip there instead, laid out as a row so it costs one shallow
 * band rather than a tall card's worth of height. */
@media (max-width: 1240px) and (min-width: 1081px) {
  .missions-layout { grid-template-columns: minmax(0, 1fr) 262px; }
  .missions-conditions-rail { grid-column: 1 / -1; order: -1; }
  .mission-weather-card { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 22px; padding: 13px 16px; }
  .mission-weather-card .eyebrow, .mission-weather-severity, .mission-weather-effects,
  .mission-weather-clear, .mission-weather-hazard, .mission-weather-link { margin-top: 0 !important; }
  .mission-weather-effects { grid-auto-flow: column; gap: 5px 18px; }
  .mission-weather-hazard { flex: 1 1 240px; }
  .mission-weather-link { margin-left: auto; }
}
@media (max-width: 1080px) {
  .missions-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* Commander first, then conditions, then the operations themselves. */
  .missions-rail { order: -2; }
  .missions-conditions-rail { order: -1; }
  .mission-profile-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 22px; align-items: center; }
  .mission-profile-card .eyebrow { grid-column: 1 / -1; margin-bottom: 4px; order: 0; }
  /* The balance has to be auto-placed before the reputation bar or it lands on
   * its own row and the second column collapses to zero -- a full-width item
   * between them ends the row. Explicit order rather than moving it in the DOM,
   * which would put the balance ahead of the rank in reading order. */
  .mission-profile-head { order: 1; }
  .mission-profile-credits { order: 2; }
  .mission-profile-rep { grid-column: 1 / -1; margin-top: 4px; order: 3; }
  /* Every child of this card carries an explicit order below 1080px, so a new
   * one without a rank defaults to 0 and jumps ahead of the avatar -- which is
   * exactly what the affinity row did before this rule. It follows the
   * reputation bar, matching the wide layout's DOM order. */
  .mission-profile-affinity { grid-column: 1 / -1; order: 4; margin-top: 6px; }
  .mission-profile-credits { margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (max-width: 560px) {
  .mission-profile-card { grid-template-columns: minmax(0, 1fr); }
  .mission-profile-credits { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(92,163,181,0.24); }
}

.missions-section { margin-top: 42px; }
.missions-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.missions-section-head .eyebrow { margin-bottom: 6px; color: #79d9df; font-size: 0.62rem; }
.missions-section-head h2 { margin: 0; font-size: 1.48rem; }
.missions-section-head p { max-width: 650px; margin: 7px 0 0; font-size: 0.83rem; }
.missions-count { color: #8da9c1; font-size: 0.75rem; white-space: nowrap; }
.mission-crew-capacity { display: grid; min-width: 132px; gap: 7px; padding: 10px 12px; border: 1px solid rgba(90,197,211,0.34); background: linear-gradient(135deg, rgba(17,51,70,0.58), rgba(20,13,43,0.66)); text-align: right; }
.mission-crew-capacity strong { color: #a7e8ec; font: 600 .88rem/1 'Cinzel', serif; letter-spacing: .06em; }
.mission-crew-capacity-track { display: grid; grid-template-columns: repeat(8, minmax(4px, 1fr)); gap: 3px; }
.mission-crew-capacity-track i { display: block; height: 4px; border: 1px solid rgba(107,153,185,0.38); background: rgba(10,19,35,0.7); }
.mission-crew-capacity-track i.is-filled { border-color: rgba(109,224,229,0.66); background: linear-gradient(90deg, #55d7df, #8b6ed6); box-shadow: 0 0 7px rgba(85,215,223,0.35); }
.mission-crew-capacity.is-full { border-color: rgba(231,183,114,0.62); }.mission-crew-capacity.is-full strong { color: #f0d591; }.mission-crew-capacity.is-full .mission-crew-capacity-track i.is-filled { border-color: rgba(240,213,145,0.72); background: linear-gradient(90deg, #d7a65d, #edcf86); }
.missions-active-grid, .missions-definition-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.mission-active-card, .mission-definition-card { position: relative; overflow: hidden; min-width: 0; padding: 19px; border: 1px solid rgba(88,142,181,0.36); background: linear-gradient(145deg, rgba(20,49,71,0.76), rgba(24,14,49,0.86)); box-shadow: inset 0 1px rgba(136,229,237,0.05); }
.mission-active-card::before, .mission-definition-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(#6ce5eb, #8d67d3); box-shadow: 0 0 16px rgba(100,225,233,0.5); }
.mission-active-card.is-completed::before { background: linear-gradient(#e8c476, #a279ec); }
/* A mission's own emblem, drawn inside its card. ::after because ::before is
 * already the card's left accent bar, and the card is overflow:hidden, so the
 * art is clipped to the card without any extra containment. Sits behind the
 * content and takes no pointer events, exactly like the page watermark.
 * Anchored bottom-right rather than centred: a mission card is text from its
 * top-left corner down, and centring put the emblem straight under the
 * description. */
.mission-active-card.has-card-watermark::after,
.mission-definition-card.has-card-watermark::after {
  content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: var(--card-watermark) right bottom / contain no-repeat;
  opacity: var(--card-watermark-opacity, 0.1);
  mix-blend-mode: screen;
}
/* Flush to the corner and contained, rather than the `right -12% bottom -8% /
 * auto 78%` this used to carry. Those negative offsets pushed the artwork
 * outside the card on every aspect ratio -- measured against a 390x400 card it
 * lost 46px off the right and 32px off the bottom whatever the image was -- and
 * `auto 78%` additionally overflowed a landscape image by 117px on the left,
 * because the width is derived from the height and a 16:9 picture at 78% of the
 * card height is far wider than the card. The result was a crop that lined up
 * with nothing.
 *
 * `contain` fits the whole image inside the card whichever way round it is: a
 * wide picture becomes a band along the foot, a tall emblem fills the height on
 * the right, and neither is cut off. The active card keeps its own deliberate
 * bleed below. */
/* Active-card artwork is a right-side transmission image, not a rectangular
 * panel. Centre it vertically and fade its left edge into the card so artwork
 * with opaque edges never looks like it was abruptly dropped over the route. */
.mission-active-card.has-card-watermark::after {
  background-position: right -6% center;
  background-size: auto 108%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 24%, rgba(0,0,0,0.34) 52%, #000 78%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 24%, rgba(0,0,0,0.34) 52%, #000 78%);
}
.mission-active-card.has-card-watermark > *,
.mission-definition-card.has-card-watermark > * { position: relative; z-index: 1; }
/* Active operations carry a low-contrast route plot behind their content. The
 * travelling dash is intentionally decorative: it gives a live deployment a
 * sense of movement without claiming to reveal a player's real location. */
.mission-active-card > :not(.mission-route) { position: relative; z-index: 1; }
.mission-route { position: absolute; z-index: 0; inset: 10px 11px 8px 12px; overflow: hidden; opacity: .58; pointer-events: none; }
.mission-active-card.has-card-watermark > .mission-route { position: absolute; z-index: 0; }
.mission-route svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mission-route-base { fill: none; stroke: rgba(105,202,216,0.24); stroke-dasharray: 3 7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mission-route-progress { fill: none; stroke: rgba(121,226,234,0.9); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mission-route-node { fill: #82dce4; stroke: rgba(10,29,47,0.92); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.mission-route-node.is-origin { fill: #c8a8ff; }
.mission-route-packet { fill: #e2fcff; filter: drop-shadow(0 0 3px rgba(121,226,234,0.95)); transition: cx .85s linear, cy .85s linear; }
.mission-route-endpoint { fill: #e8d18a; stroke: rgba(10,29,47,0.92); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.mission-route-endpoint-pulse { fill: none; stroke: rgba(232,209,138,0.72); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: mission-route-endpoint 2.3s ease-out infinite; }
.mission-route.is-complete { opacity: .46; }.mission-route.is-complete .mission-route-progress { stroke: rgba(232,209,138,0.9); }.mission-route.is-complete .mission-route-endpoint-pulse { animation: none; opacity: .55; }
@keyframes mission-route-endpoint { 0% { opacity: .85; transform: scale(.56); } 75%,100% { opacity: 0; transform: scale(1.55); } }

/* A verified finish is intentionally unmistakable. The same readiness state
 * shown by the Complete Mission action receives the pulse so the card never
 * looks unfinished while it is waiting for the player to confirm the result. */
.mission-active-card.is-completed, .mission-active-card:has(.mission-action[data-action="complete"]) { border-color: rgba(104, 226, 148, .68); animation: mission-complete-border 2.2s ease-in-out infinite; }
.mission-active-card.is-completed::before, .mission-active-card:has(.mission-action[data-action="complete"])::before { background: linear-gradient(#78efa9, #45b97d); box-shadow: 0 0 16px rgba(101, 228, 147, .58); }
.mission-active-card.is-completed .mission-countdown, .mission-active-card:has(.mission-action[data-action="complete"]) .mission-countdown { color: #9de8b4; }
.mission-active-card.is-completed .mission-route, .mission-active-card:has(.mission-action[data-action="complete"]) .mission-route { opacity: .68; }.mission-active-card.is-completed .mission-route-progress, .mission-active-card:has(.mission-action[data-action="complete"]) .mission-route-progress { stroke: rgba(120, 239, 169, .94); }.mission-active-card.is-completed .mission-route-endpoint, .mission-active-card:has(.mission-action[data-action="complete"]) .mission-route-endpoint { fill: #9de8b4; }.mission-active-card.is-completed .mission-route-endpoint-pulse, .mission-active-card:has(.mission-action[data-action="complete"]) .mission-route-endpoint-pulse { stroke: rgba(122, 239, 169, .78); animation: mission-route-complete-endpoint 1.9s ease-out infinite; }
@keyframes mission-complete-border { 0%, 100% { border-color: rgba(104, 226, 148, .48); box-shadow: inset 0 0 0 1px rgba(104, 226, 148, .08), 0 0 0 rgba(88, 220, 135, 0); } 50% { border-color: rgba(138, 244, 174, .98); box-shadow: inset 0 0 20px rgba(102, 228, 148, .12), 0 0 0 1px rgba(105, 232, 150, .36), 0 0 23px rgba(87, 225, 135, .42); } }
@keyframes mission-route-complete-endpoint { 0% { opacity: .82; transform: scale(.62); } 80%, 100% { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .mission-active-card.is-completed, .mission-active-card:has(.mission-action[data-action="complete"]), .mission-active-card.is-completed .mission-route-endpoint-pulse, .mission-active-card:has(.mission-action[data-action="complete"]) .mission-route-endpoint-pulse { animation: none; } }

/* Operation types as collapsible shelves. The heading carries the type, so the
 * cards inside it drop their own type pill. */
.missions-definition-groups { display: grid; gap: 20px; }
.mission-type-group { min-width: 0; }
/* auto-fill, not auto-fit: a type with a single operation keeps a card the same
 * width as every other card instead of stretching across the whole shelf. */
.mission-type-group .missions-definition-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.mission-type-group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 13px; padding-bottom: 7px; border-bottom: 1px solid rgba(88,142,181,0.28); cursor: pointer; list-style: none; }
.mission-type-group-head::-webkit-details-marker { display: none; }
.mission-type-group-head::after { content: '⌄'; margin-left: auto; color: #7f9bb0; font-size: 0.8rem; line-height: 1; transition: transform .2s ease; }
.mission-type-group[open] > .mission-type-group-head::after { transform: rotate(180deg); }
.mission-type-group-head:hover { border-bottom-color: rgba(126,227,232,0.5); }
.mission-type-group-head:hover .mission-type-group-name { color: #b6f0f3; }
.mission-type-group-name { color: #9ae2e6; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.mission-type-group-count { color: #7f9bb0; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.04em; }
.mission-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.mission-definition-card .mission-card-top { justify-content: flex-end; }
.mission-type, .mission-duration { color: #9ae2e6; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.mission-duration { color: #d6c18b; }
.mission-active-card h3, .mission-definition-card h3 { margin: 0 0 7px; color: #f0edf8; font-size: 1.02rem; }
.mission-crew-line { min-height: 22px; margin: 0; color: #a8bfd0; font-size: 0.76rem; }
.mission-rival-race { display: grid; gap: 7px; margin-top: 12px; padding: 10px 11px; border: 1px solid rgba(224,138,114,0.38); background: rgba(56,24,42,0.44); }
.mission-rival-race-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }.mission-rival-race-head span { color: #e3a08b; font-size: .55rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }.mission-rival-race-head strong { color: #eeddd6; font: 600 .72rem/1.2 'Cinzel', serif; text-align: right; }
.mission-rival-race-track { display: grid; grid-template-columns: minmax(75px, auto) minmax(0, 1fr); align-items: center; gap: 9px; }.mission-rival-race-track > span:first-child { overflow: hidden; color: #aebfca; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }.mission-rival-race-track.is-rival > span:first-child { color: #dfa38f; }
.mission-rival-progress { display: block; height: 5px; overflow: hidden; border: 1px solid rgba(119,153,177,0.34); background: rgba(2,7,16,0.7); }.mission-rival-progress i { display: block; height: 100%; background: linear-gradient(90deg, #67d7df, #96e1bc); box-shadow: 0 0 8px rgba(103,215,223,0.48); transition: width .8s linear; }.mission-rival-race-track.is-rival .mission-rival-progress i { background: linear-gradient(90deg, #c86662, #eda46b); box-shadow: 0 0 8px rgba(231,133,91,0.46); }.mission-rival-race > p { margin: 1px 0 0; color: #b6aab3; font-size: .62rem; line-height: 1.4; }.mission-rival-race.is-safe { border-color: rgba(111,184,223,0.42); background: rgba(22,45,71,0.44); }.mission-rival-race.is-safe > div { display: grid; gap: 3px; }.mission-rival-race.is-safe span { color: #9bd4ed; font-size: .55rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }.mission-rival-race.is-safe strong { color: #d1ecf4; font: 600 .76rem/1.2 'Cinzel', serif; }
.mission-active-footer { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 19px; padding-top: 13px; border-top: 1px solid rgba(93,146,183,0.25); }
.mission-active-footer > div { display: grid; gap: 2px; }
.mission-countdown { display: block; color: #f0d591; font: 600 0.92rem/1.15 'Cinzel', serif; }
.mission-active-footer small { color: #7893ac; font-size: 0.65rem; }
.mission-in-progress { color: #7ccfd7; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.mission-active-footer .btn, .mission-definition-card .btn { padding: 9px 12px; font-size: 0.67rem; white-space: nowrap; }
.missions-neoh-section { position: relative; padding: 26px; border: 1px solid rgba(65,148,178,0.38); background: linear-gradient(135deg, rgba(15,54,72,0.25), rgba(17,10,36,0.42)); }
.missions-neoh-section::before { content: 'NEOH'; position: absolute; top: 18px; right: 26px; color: rgba(102,220,230,0.055); font: 600 clamp(3rem,10vw,8rem)/1 'Cinzel', serif; letter-spacing: 0.08em; pointer-events: none; }
.mission-definition-card { display: flex; flex-direction: column; min-height: 290px; background: rgba(11,24,43,0.72); }
.mission-definition-card.is-locked { border-color: rgba(113,105,146,0.4); background: linear-gradient(145deg, rgba(21,27,47,0.78), rgba(26,17,44,0.86)); }
.mission-definition-card p { margin: 0; color: #a9bdcb; font-size: 0.8rem; line-height: 1.58; }
.mission-unlock-state { min-height: 20px; margin: 12px 0 0 !important; color: #87a7bb !important; font-size: .66rem !important; font-weight: 600; letter-spacing: .035em; line-height: 1.4 !important; }
.mission-unlock-state.is-base { color: #73cbd6 !important; }.mission-unlock-state.is-unlocked { color: #9edba8 !important; }.mission-unlock-state.is-locked { color: #d5b271 !important; }
/* Three entries, or four once an operation pays credits. auto-fit rather than a
 * fixed count so the fourth joins the row where there is space and wraps
 * cleanly where there is not. */
.mission-definition-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 8px; margin: auto 0 17px; padding-top: 18px; }
.mission-definition-meta div { min-width: 0; }
.mission-definition-meta dt { margin-bottom: 3px; color: #758fa7; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mission-definition-meta dd { margin: 0; color: #e9d399; font-size: 0.72rem; line-height: 1.35; }
.mission-definition-card .btn:disabled { cursor: not-allowed; opacity: 0.42; }
.mission-definition-card.is-locked .mission-launch-btn:disabled { border-color: rgba(192,153,96,0.4); color: #d4ad71; }
.missions-crew-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(305px, 1fr)); gap: 14px; }
.mission-crew-offers { display: grid; gap: 10px; margin: -4px 0 16px; }
.mission-crew-offer { padding: 13px; border: 1px solid rgba(231,183,114,0.56); background: linear-gradient(135deg, rgba(58,39,35,0.48), rgba(24,14,42,0.76)); box-shadow: inset 0 0 22px rgba(235,209,138,0.05); }
.mission-crew-offer.is-rare { border-color: rgba(199,154,232,0.66); }.mission-crew-offer.is-epic { border-color: rgba(216,121,235,0.72); }.mission-crew-offer.is-legendary { border-color: rgba(235,209,138,0.78); }
.mission-crew-offer-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }.mission-crew-offer-head span { display: grid; gap: 3px; }.mission-crew-offer-head small { color: #e9ca83; font-size: .57rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.mission-crew-offer-head strong { color: #f4f0fa; font: 600 1rem/1.1 'Cinzel', serif; }.mission-crew-offer-head em { color: #aebfd0; font-size: .64rem; font-style: normal; text-transform: capitalize; }.mission-crew-offer-head > b { flex: 0 0 auto; padding: 5px 7px; border: 1px solid rgba(235,209,138,0.42); color: #f0d591; font-size: .66rem; }
.mission-crew-offer p { margin: 9px 0 11px; color: #b8c8d4; font-size: .72rem; line-height: 1.45; }.mission-crew-offer-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 7px; }.mission-crew-offer-actions label { display: grid; gap: 4px; color: #9ab2c4; font-size: .57rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.mission-crew-offer-actions select { min-height: 31px; max-width: 185px; padding: 4px 7px; }.mission-crew-offer-actions .btn, .mission-crew-offer-actions .mission-result-destroy { min-height: 31px; margin: 0; padding: 0 9px; font-size: .57rem; text-decoration: none; }.mission-crew-offer-unavailable { color: #e4a8a1; font-size: .62rem; }.mission-crew-offer-status { display: block; min-height: 1em; margin-top: 8px; color: #8ddde1; font-size: .64rem; }.mission-crew-offer.is-resolved { opacity: .6; pointer-events: none; }
.missions-crew-controls { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px 12px; align-items: end; margin: -3px 0 16px; padding: 13px; border: 1px solid rgba(80,129,168,0.34); background: rgba(10,20,38,0.48); }
.missions-crew-control { display: grid; min-width: 0; gap: 5px; }
.missions-crew-control > span { color: #7898ac; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.missions-crew-control select { width: 100%; min-width: 0; border: 1px solid rgba(87,153,185,0.42); border-radius: 2px; background: rgba(5,13,27,0.76); color: #d9e5ed; padding: 8px 27px 8px 9px; font: 600 .68rem 'Jost', sans-serif; cursor: pointer; }
.missions-crew-control select:hover, .missions-crew-control select:focus { border-color: rgba(111,217,226,0.75); outline: none; }
.missions-crew-filter-summary { grid-column: 1 / -1; margin: 1px 0 0; color: #8ba8ba; font-size: .68rem; }
.missions-crew-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.missions-crew-page { min-width: 78px; padding: 7px 10px; border: 1px solid rgba(105,190,202,.5); background: rgba(8,21,37,.62); color: #cce7ec; font: 700 .6rem 'Jost', sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.missions-crew-page:hover:not(:disabled), .missions-crew-page:focus-visible { border-color: #7ee3e8; background: rgba(26,73,91,.55); outline: none; }
.missions-crew-page:disabled { cursor: not-allowed; opacity: .42; }
.missions-crew-page-status { min-width: 80px; color: #8ba8ba; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.mission-crew-card { position: relative; isolation: isolate; display: grid; grid-template-columns: 107px minmax(0,1fr); gap: 16px; overflow: hidden; padding: 15px; border: 1px solid rgba(80,129,168,0.35); background: linear-gradient(130deg, rgba(16,33,57,0.92), rgba(22,13,45,0.86)); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.mission-crew-card > * { position: relative; z-index: 1; }
.mission-crew-card::after { content: ''; position: absolute; z-index: 0; inset: -35% -55%; background: linear-gradient(108deg, transparent 44%, rgba(125,230,238,0.04) 47%, rgba(153,236,242,0.2) 50%, rgba(125,230,238,0.04) 53%, transparent 56%); opacity: 0; pointer-events: none; transform: translateX(-42%) skewX(-12deg); }
.mission-crew-card.is-favorite { border-color: rgba(229,201,120,.54); box-shadow: inset 0 0 24px rgba(229,201,120,.05); }
.mission-crew-favorite { position: absolute; z-index: 3 !important; top: 10px; right: 10px; display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border: 1px solid rgba(126,178,199,.4); background: rgba(6,16,30,.72); color: #7e98a9; cursor: pointer; font-size: .86rem; line-height: 1; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.mission-crew-favorite:hover:not(:disabled), .mission-crew-favorite:focus-visible { border-color: rgba(235,209,138,.82); background: rgba(73,56,32,.7); color: #f0d891; outline: none; transform: translateY(-1px); }
.mission-crew-favorite.is-favorite { border-color: rgba(235,209,138,.78); background: rgba(78,61,31,.68); color: #f0d891; text-shadow: 0 0 8px rgba(240,216,145,.54); }
.mission-crew-favorite:disabled { cursor: not-allowed; opacity: .45; }
.mission-crew-card.is-deployed { border-color: rgba(110,211,220,0.55); box-shadow: inset 0 0 30px rgba(77,204,216,0.06); }
.mission-crew-card.is-unavailable { border-color: rgba(118,108,149,0.42); filter: saturate(.7); opacity: .76; }
.mission-crew-visual { display: grid; align-content: start; width: 107px; }
.mission-crew-portrait { box-sizing: border-box; width: 100%; height: 144px; object-fit: cover; border: 1px solid rgba(115,220,230,0.38); background: #101626; filter: saturate(0.88) contrast(1.08); }
.mission-crew-fallback { display: flex; align-items: center; justify-content: center; color: #e7d092; font: 600 2rem 'Cinzel', serif; background: linear-gradient(145deg, #20394d, #241641); }
.crew-role { color: #78d6dd; font-size: 0.61rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.mission-crew-copy h3 { margin: 2px 0 4px; font-size: 1rem; }
.mission-crew-copy p { margin: 0; color: #a9bdca; font-size: 0.74rem; line-height: 1.45; }
.crew-progression { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 10px; align-items: center; margin-top: 14px; padding: 9px 10px; border: 1px solid rgba(99,170,190,0.23); background: rgba(5,14,27,0.33); }
.crew-rank-insignia { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid currentColor; border-radius: 50% 50% 44% 44%; color: #78dce3; background: rgba(74,205,220,0.08); box-shadow: inset 0 0 14px rgba(73,205,220,0.11); }
.crew-rank-insignia span { font: 700 .65rem/1 'Cinzel', serif; letter-spacing: .08em; }.crew-rank-insignia small { margin-top: -6px; color: #dceff0; font-size: .5rem; font-weight: 700; letter-spacing: .07em; }
.crew-progression-copy { min-width: 0; }.crew-progression-copy > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: #a8c1cf; font-size: .61rem; letter-spacing: .07em; text-transform: uppercase; }.crew-progression-copy strong { color: #ead397; font-size: .64rem; letter-spacing: .04em; white-space: nowrap; }.crew-progression-copy > small { display: block; margin-top: 5px; color: #7895a7; font-size: .59rem; }
.crew-xp-track { height: 5px; margin-top: 7px; overflow: hidden; background: rgba(3,6,14,0.8); box-shadow: inset 0 1px 2px rgba(0,0,0,0.38); }.crew-xp-track span { display: block; height: 100%; background: linear-gradient(90deg, #62d9e1, #8b6bd4); box-shadow: 0 0 9px rgba(98,217,225,0.54); }
.crew-progression.is-vanguard .crew-rank-insignia { color: #e3bc71; background: rgba(226,178,92,0.09); }.crew-progression.is-vanguard .crew-xp-track span { background: linear-gradient(90deg, #e6bd71, #d88758); box-shadow: 0 0 9px rgba(230,189,113,0.52); }.crew-progression.is-pathfinder .crew-rank-insignia { color: #70dfe6; background: rgba(87,213,225,0.09); }.crew-progression.is-pathfinder .crew-xp-track span { background: linear-gradient(90deg, #69dce5, #73a8df); }.crew-progression.is-engineer .crew-rank-insignia { color: #b790ed; background: rgba(170,112,233,0.1); }.crew-progression.is-engineer .crew-xp-track span { background: linear-gradient(90deg, #af7ee7, #dd83bd); box-shadow: 0 0 9px rgba(175,126,231,0.5); }
/* The Fixer, in the green already used for credits and for a running stim,
 * so the role that earns money reads in the colour money reads in here. */
.crew-progression.is-fixer .crew-rank-insignia { color: #9edba8; background: rgba(126,203,158,0.1); }.crew-progression.is-fixer .crew-xp-track span { background: linear-gradient(90deg, #86d49a, #5cc0b4); box-shadow: 0 0 9px rgba(134,212,154,0.5); }
/* Status reads as a dot on the portrait instead of a labelled block; it keeps
 * an accessible name and a hover title, so nothing is lost but the two lines. */
/* align-self keeps the wrapper the height of the portrait. Without it the grid
 * stretches it to the full card and the dot lands at the card's foot. */
.mission-crew-portrait-wrap { position: relative; display: block; align-self: start; width: 100%; overflow: hidden; line-height: 0; }
.mission-crew-portrait-wrap::after { content: ''; position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: 28px; background: linear-gradient(to bottom, transparent, rgba(121,226,234,0.34) 48%, rgba(221,251,253,0.88) 50%, rgba(121,226,234,0.28) 54%, transparent); opacity: 0; pointer-events: none; transform: translateY(-110%); }
.crew-status-dot { position: absolute; z-index: 2; right: 3px; bottom: 3px; width: 13px; height: 13px; border: 2px solid #101a2c; border-radius: 50%; background: #6f8496; }
.crew-status-dot.is-available { background: #89e0b4; box-shadow: 0 0 9px rgba(137,224,180,0.6); }
.crew-status-dot.is-deployed { background: #83dce4; box-shadow: 0 0 9px rgba(131,220,228,0.65); }
.crew-status-dot.is-unavailable { background: #6f8496; }
.crew-status-dot:focus-visible { outline: 2px solid #7ee3e8; outline-offset: 2px; }
.crew-mission-copy { margin: 3px 0 0 !important; color: #c7d8e2 !important; font-size: 0.68rem !important; }
/* The shared .mission-countdown is display:block for the active-mission cards.
 * Here it must stay on the name's line, or the one-line summary becomes two. */
.crew-mission-copy .mission-countdown { display: inline; color: #ead397; font: 600 0.68rem/1.45 'Jost', sans-serif; }
@media (hover: hover) {
  .mission-crew-card:not(.is-unavailable):hover { transform: perspective(900px) translateY(-3px) rotateX(1deg) rotateY(-.55deg); border-color: rgba(126,227,232,0.72); box-shadow: 0 15px 30px rgba(3,9,21,0.34), inset 0 0 32px rgba(81,211,223,0.08); }
  .mission-crew-card:not(.is-unavailable):hover::after { opacity: 1; animation: mission-crew-holo-sweep 1.35s ease-out both; }
  .mission-crew-card:not(.is-unavailable):hover .mission-crew-portrait-wrap::after { opacity: 1; animation: mission-crew-portrait-scan 1.45s ease-in-out infinite; }
  .mission-crew-card:not(.is-unavailable):hover .mission-gear-slot.is-filled { border-color: rgba(var(--gear-tier),0.86); background: rgba(var(--gear-tier),0.21); box-shadow: 0 0 11px rgba(var(--gear-tier),0.42), inset 0 0 9px rgba(var(--gear-tier),0.16); filter: brightness(1.16); animation: mission-crew-gear-glow 2.1s ease-in-out infinite; }
}
.mission-crew-card:not(.is-unavailable):focus-within { border-color: rgba(126,227,232,0.72); box-shadow: 0 0 0 1px rgba(126,227,232,0.28), inset 0 0 32px rgba(81,211,223,0.08); }
.mission-crew-card:not(.is-unavailable):focus-within .mission-gear-slot.is-filled { border-color: rgba(var(--gear-tier),0.86); box-shadow: 0 0 10px rgba(var(--gear-tier),0.36), inset 0 0 9px rgba(var(--gear-tier),0.14); }
@keyframes mission-crew-holo-sweep { from { transform: translateX(-42%) skewX(-12deg); } to { transform: translateX(42%) skewX(-12deg); } }
@keyframes mission-crew-portrait-scan { 0%,16% { opacity: 0; transform: translateY(-110%); } 26% { opacity: 1; } 60%,100% { opacity: 0; transform: translateY(510%); } }
@keyframes mission-crew-gear-glow { 0%,100% { box-shadow: 0 0 7px rgba(var(--gear-tier),0.26), inset 0 0 7px rgba(var(--gear-tier),0.1); } 50% { box-shadow: 0 0 13px rgba(var(--gear-tier),0.5), inset 0 0 10px rgba(var(--gear-tier),0.2); } }
@media (prefers-reduced-motion: reduce) { .mission-route-endpoint-pulse, .mission-crew-card, .mission-crew-card::after, .mission-crew-portrait-wrap::after, .mission-gear-slot.is-filled { animation: none !important; transition: none !important; } .mission-route-packet { display: none; } .mission-crew-card:hover { transform: none !important; } }
.missions-history-list { border: 1px solid rgba(80,129,168,0.34); background: rgba(12,16,32,0.52); }
.mission-history-row { display: grid; grid-template-columns: minmax(210px, 1.35fr) minmax(135px,0.8fr) minmax(145px,0.85fr) auto; gap: 18px; align-items: center; padding: 14px 18px; border-bottom: 1px solid rgba(80,129,168,0.24); }
.mission-history-row:last-child { border-bottom: 0; }
.mission-history-row strong { display: block; margin-top: 2px; color: #eeeaf5; font-size: 0.85rem; }
.mission-history-row p { margin: 3px 0 0; color: #90a7ba; font-size: 0.7rem; }
.mission-history-row > div:not(:first-child) { display: grid; gap: 2px; color: #cad8df; font-size: 0.72rem; }
.mission-history-row small { color: #758da4; font-size: 0.59rem; letter-spacing: 0.09em; text-transform: uppercase; }
.mission-history-status { padding: 5px 8px; border: 1px solid rgba(85,204,152,0.45); color: #7ee0a8; font-size: 0.61rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.missions-empty { grid-column: 1 / -1; margin: 0; padding: 24px; border: 1px dashed rgba(99,154,190,0.35); color: #8199ae; font-size: 0.82rem; text-align: center; }
/* Wide on desktop, because the picker is a rack of slots over a roster of up to
 * 32 crew and 680px left most of a desktop screen empty while the tray showed
 * three cards at a time. min() handles every width on its own -- there is no
 * breakpoint here, the modal simply takes what the viewport has. */
.mission-launch-modal { width: min(1060px, calc(100vw - 28px)); padding: 0; border: 1px solid rgba(105,213,222,0.5); color: var(--text); background: #100d22; box-shadow: 0 24px 90px rgba(0,0,0,0.7), 0 0 45px rgba(71,207,218,0.13); }
/* The prose does not widen with the modal. A one-line instruction set in a
 * 1000px measure is harder to read than the same line at 680, and these two are
 * the only running text in the dialog. */
.mission-launch-modal > .mission-launch-modal-inner > p { max-width: 68ch; }
.mission-launch-modal::backdrop { background: rgba(3,4,12,0.78); backdrop-filter: blur(4px); }
.mission-launch-modal-inner { position: relative; padding: 30px; background: linear-gradient(145deg, rgba(17,48,66,0.96), rgba(20,12,42,0.98)); }
.mission-launch-modal .eyebrow { margin-bottom: 7px; color: #79d9df; font-size: 0.63rem; }
.mission-launch-modal h2 { margin: 0 32px 6px 0; font-size: 1.42rem; }
.mission-launch-modal p { margin: 0; color: #aec3cf; font-size: 0.82rem; }
.mission-launch-close { position: absolute; top: 15px; right: 15px; width: 31px; height: 31px; border: 1px solid rgba(119,215,225,0.35); background: rgba(7,14,28,0.5); color: #d9e5ec; font-size: 1.25rem; line-height: 1; cursor: pointer; }
/* Operation brief: which roles this type of work suits, and what ignoring both
 * costs. Stated before a crew is chosen rather than discovered afterwards. */
.mission-launch-brief { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 15px; }
.mission-launch-brief-label { color: #79d9df; font-size: 0.58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-launch-brief-role { padding: 4px 8px; border: 1px solid rgba(126,227,232,0.4); color: #cfe7ef; font-size: 0.66rem; font-weight: 600; }
.mission-launch-brief-role em { color: #9edba8; font-style: normal; }
.mission-launch-brief-penalty { padding: 4px 8px; border: 1px solid rgba(224,138,114,0.42); color: #e0a894; font-size: 0.63rem; font-weight: 600; }
.mission-launch-rival { margin-top: 15px; padding: 13px; border: 1px solid rgba(220,137,105,0.48); background: linear-gradient(120deg, rgba(67,30,39,0.54), rgba(21,17,45,0.68)); }
.mission-launch-rival[hidden] { display: none; }
.mission-launch-rival-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.mission-launch-rival-head span { color: #e5a28d; font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-launch-rival-head strong { color: #f0e2dc; font: 600 .78rem/1.25 'Cinzel', serif; }
.mission-launch-rival > p { margin: 6px 0 10px; color: #bfadb8; font-size: .68rem; line-height: 1.42; }
.mission-launch-rival-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.mission-launch-rival-option { display: grid; gap: 4px; min-height: 80px; padding: 9px 10px; border: 1px solid rgba(208,142,112,0.3); background: rgba(8,14,30,0.46); color: #bfcad3; text-align: left; cursor: pointer; font: inherit; }
.mission-launch-rival-option strong { color: #e7d8d2; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }.mission-launch-rival-option span { color: #9bacb9; font-size: .61rem; line-height: 1.35; }
.mission-launch-rival-option:hover, .mission-launch-rival-option:focus-visible { border-color: rgba(236,169,119,0.78); outline: none; }.mission-launch-rival-option.is-selected { border-color: #efad78; background: linear-gradient(140deg, rgba(113,53,42,0.62), rgba(40,20,56,0.78)); box-shadow: inset 0 0 0 1px rgba(239,173,120,0.2), 0 0 14px rgba(222,115,83,0.11); }.mission-launch-rival-option.is-selected strong { color: #ffe2bd; }
@media (max-width: 620px) { .mission-launch-rival-options { grid-template-columns: 1fr; }.mission-launch-rival-option { min-height: 0; } }
.mission-launch-crew-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 9px; }
.mission-launch-slots { color: #90abba; font-size: 0.63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mission-launch-slots.is-ready { color: #9edba8; }
.mission-launch-head-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.mission-launch-recommend, .mission-launch-repeat { padding: 7px 11px !important; font-size: 0.63rem !important; }
.mission-launch-repeat[hidden] { display: none; }

/* ---- The slot rack ----------------------------------------------------
 * One slot per max_crew. Required slots (the first min_crew) carry a solid
 * border, optional ones a dashed one, so the shape of the operation is legible
 * before anything is assigned.
 *
 * Every empty slot shows the SAME affinity hint, deliberately. Affinity stacks
 * and each mission type prefers two of the three roles, so two Vanguards on a
 * recon is a real choice; labelling slots individually would teach a
 * one-of-each rule the game does not have. See js/missions.js. */
/* Tracks stretch to fill the row. A fixed cap was tried first (280, then 320px)
 * and rejected by measurement: at a 1024px viewport three 320px slots no longer
 * fit the content box and the rack wrapped 2 + 1, which reads far worse than a
 * slightly wide card. Filling means a rack never wraps at any desktop width for
 * the crew sizes this game uses. A single-slot operation is the one case that
 * still needs a cap -- one slot spanning the whole modal looks like an error. */
.mission-launch-rack { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 9px; margin: 0 0 8px; }
.mission-launch-modal.is-single-slot .mission-launch-rack { grid-template-columns: minmax(200px, 340px); }
/* Below the cap there is only room for one track, so let it use the full width
 * rather than leaving a margin beside a single 280px slot. */
@media (max-width: 620px) { .mission-launch-rack, .mission-launch-modal.is-single-slot .mission-launch-rack { grid-template-columns: minmax(0, 1fr); } }
.mission-launch-slot { position: relative; display: grid; gap: 4px; padding: 11px 12px; min-height: 118px; border: 1px solid rgba(90,149,185,0.38); background: rgba(6,15,28,0.42); }
.mission-launch-slot.is-optional { border-style: dashed; }
.mission-launch-slot.is-empty { align-content: center; justify-items: center; text-align: center; color: #8ba3b4; }
.mission-launch-slot.is-filled { grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 10px; border-color: rgba(126,227,232,0.5); background: rgba(9,22,40,0.62); cursor: grab; }
.mission-launch-slot.is-filled:active { cursor: grabbing; }
.mission-slot-badge { position: absolute; top: -8px; left: 9px; padding: 1px 6px; background: #0b1526; color: #7d9bb0; font-size: 0.53rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mission-launch-slot.is-required .mission-slot-badge { color: #edc179; }
.mission-slot-placeholder { color: #4f7189; font-size: 1.5rem; line-height: 1; }
.mission-slot-hint { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.mission-slot-hint-role { padding: 1px 6px; border: 1px solid rgba(158,219,168,0.34); color: #9edba8; font-size: 0.59rem; font-weight: 600; }
.mission-slot-hint-role em { color: #cfe6d5; font-style: normal; }
.mission-slot-drop { color: #7089a0; font-size: 0.58rem; letter-spacing: .04em; }
.mission-slot-portrait { display: block; width: 44px; height: 44px; overflow: hidden; border: 1px solid rgba(103,152,190,0.4); }
.mission-slot-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mission-slot-copy { display: grid; gap: 2px; min-width: 0; }
.mission-slot-copy strong { color: #eef1f6; font-size: 0.8rem; }
.mission-slot-copy small { color: #90abba; font-size: 0.66rem; }
/* Per-slot contribution: what this one crew member adds, as against the team
 * total in the projection below. */
.mission-slot-lines { display: grid; gap: 1px; margin-top: 3px; }
.mission-slot-line { color: #a9c2d0; font-size: 0.62rem; }
.mission-slot-line.is-affinity { color: #9edba8; font-weight: 600; }
/* 24px, not the 20px this started at: below 24 it is under the minimum target
 * size, and it is the only way to empty a slot by pointer. Measured in a
 * harness built from the real markup -- at 20 it also sat close enough to the
 * compact upgrade chip to be a mis-tap risk on touch. */
.mission-slot-clear { position: absolute; top: 5px; right: 5px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid rgba(103,152,190,0.34); background: rgba(4,10,20,0.7); color: #a9c2d0; font: 0.85rem/1 'Jost', sans-serif; cursor: pointer; }
.mission-slot-clear:hover, .mission-slot-clear:focus-visible { border-color: rgba(224,138,114,0.6); color: #e8a894; }
/* Drop feedback. Only ever a border and a tint -- the rack must not reflow
 * under a dragged card, or the slot moves out from under the pointer. */
.mission-launch-modal.is-dragging .mission-launch-slot { border-color: rgba(126,227,232,0.45); }
.mission-launch-slot.is-drop-target { border-color: rgba(126,227,232,0.95); background: rgba(20,48,72,0.72); box-shadow: inset 0 0 0 1px rgba(126,227,232,0.4); }
.mission-launch-rack-note { margin: 0 0 12px; font-size: 0.68rem; }
.mission-launch-rack-note.is-good { color: #9edba8; }
.mission-launch-rack-note.is-warning { color: #e8a894; }
.mission-launch-rack-note:empty { display: none; }

/* ---- The roster tray -------------------------------------------------- */
.mission-launch-tray-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.mission-launch-tray-label { color: #90abba; font-size: 0.62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mission-launch-tray-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mission-launch-tray-filter { display: inline-flex; align-items: center; gap: 5px; color: #7d9bb0; font-size: 0.6rem; letter-spacing: .06em; text-transform: uppercase; }
.mission-launch-tray-filter select { padding: 4px 6px; border: 1px solid rgba(90,149,185,0.38); background: rgba(6,15,28,0.7); color: #cfe0ea; font-size: 0.66rem; }
.mission-launch-tray-filter select:hover { border-color: rgba(115,220,230,0.55); }
.mission-launch-tray-filter select:focus { border-color: rgba(126,227,232,0.8); box-shadow: 0 0 0 1px rgba(126,227,232,0.3); outline: none; }
.mission-launch-tray-toggle { display: inline-flex; align-items: center; gap: 5px; color: #7d9bb0; font-size: 0.6rem; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.mission-launch-tray-toggle input { accent-color: #69dce3; }
/* The roster is the part that actually needed the width. As a single column it
 * showed three crew at a time out of a roster that reaches 32; in three columns
 * the same scroller shows nine. auto-fill rather than auto-fit so a roster of
 * two does not stretch each card across the whole modal. */
.mission-launch-crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); align-content: start; gap: 8px; margin: 0 0 12px; max-height: min(44vh, 420px); overflow-y: auto; }
.mission-launch-crew .missions-empty { grid-column: 1 / -1; }
.mission-launch-tray-card { position: relative; border: 1px solid rgba(90,149,185,0.38); background: rgba(6,15,28,0.42); }
.mission-launch-tray-card[draggable="true"] { cursor: grab; }
.mission-launch-tray-card[draggable="true"]:active { cursor: grabbing; }
.mission-launch-tray-select { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 11px; width: 100%; padding: 10px 13px; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; }
.mission-launch-tray-select:disabled { cursor: not-allowed; }
.mission-launch-tray-card:hover { border-color: rgba(115,220,230,0.67); }
.mission-launch-tray-card:focus-within { border-color: rgba(126,227,232,0.8); box-shadow: 0 0 0 1px rgba(126,227,232,0.35); }
/* Suited to this operation: a left edge and a warmer border, so the cards worth
 * choosing read at a glance without colouring the whole card in. */
.mission-launch-tray-card.is-affinity { border-color: rgba(158,219,168,0.5); box-shadow: inset 3px 0 rgba(110,207,140,0.75); }
/* Already in the rack. Dimmed but still selectable -- selecting again removes
 * them, which is the fastest way to undo a misplaced pick. */
.mission-launch-tray-card.is-racked { opacity: 0.62; border-style: dashed; }
.mission-launch-tray-card.is-racked strong em { margin-left: 6px; color: #7ee3e8; font-size: 0.6rem; font-style: normal; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
/* Dimmed, but nowhere near as far as a plain disabled button. These cards still
 * carry information a player reads while deciding -- which run is holding a
 * crew member and when they return, or the affinity of someone who is resting.
 * 0.8 is where every label in a dimmed card still measured above 4.5:1 against
 * the modal's own background; at 0.5 the smallest of them fell to 2.7:1. */
.mission-launch-tray-card.is-unavailable { opacity: 0.8; }
.mission-launch-tray-card.is-unavailable:hover { border-color: rgba(90,149,185,0.38); }
.mission-launch-crew-portrait { display: block; width: 42px; height: 42px; overflow: hidden; border: 1px solid rgba(103,152,190,0.4); }
.mission-launch-crew-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mission-launch-crew-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: rgba(11,24,43,0.8); color: #8fb6c6; font: 600 1rem 'Cinzel', serif; }
.mission-launch-crew-copy { display: grid; gap: 2px; min-width: 0; }
.mission-launch-crew-copy strong { color: #eef1f6; font-size: 0.84rem; }
.mission-launch-crew-copy small { color: #90abba; font-size: 0.68rem; }
.mission-launch-crew-fatigue { display: block; height: 3px; margin-top: 5px; overflow: hidden; background: rgba(3,6,14,0.8); }
.mission-launch-crew-fatigue span { display: block; height: 100%; background: linear-gradient(90deg, #6fd8a4, #62d9e1); }
.mission-launch-crew-stats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.mission-launch-stat { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 5px; border: 1px solid rgba(103,152,190,0.3); color: #c2d5e0; font-size: 0.6rem; font-weight: 600; cursor: help; }
.mission-launch-stat i { color: #7d9bb0; font-size: 0.53rem; font-style: normal; letter-spacing: .06em; }
.mission-launch-stat.is-strength { border-color: rgba(224,138,114,0.34); }
.mission-launch-stat.is-cunning { border-color: rgba(199,154,232,0.34); }
.mission-launch-stat.is-science { border-color: rgba(126,227,232,0.34); }
.mission-launch-stat.is-charisma { border-color: rgba(235,209,138,0.34); }
.mission-launch-crew-tag { display: block; margin-top: 3px; font-size: 0.64rem; font-weight: 600; letter-spacing: .02em; cursor: help; }
.mission-launch-crew-tag.is-affinity { color: #9edba8; }
.mission-launch-crew-tag.is-neutral { color: #8ba3b4; }
/* Lighter than the other tags on purpose: this line sits inside a dimmed card,
 * and the muted tone the rest of them use measured 3.4:1 once that opacity was
 * applied. This one clears 6:1 through the same dimming. */
.mission-launch-crew-tag.is-unavailable { color: #ccdde8; cursor: default; }
/* Amber rather than the muted unavailable tone: a resting crew member is a wait
 * the player can plan around, not a crew member they cannot use at all. */
.mission-launch-crew-tag.is-resting { color: #edc179; }

/* Equipment advice. Amber, and a real button: it opens that crew member's
 * loadout, so it is an action rather than a label. */
.mission-gear-warning { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 7px; border: 1px solid rgba(237,193,121,0.45); background: rgba(60,44,16,0.35); color: #edc179; font: 600 0.6rem/1.4 'Jost', sans-serif; cursor: pointer; }
.mission-gear-warning:hover, .mission-gear-warning:focus-visible { border-color: rgba(237,193,121,0.85); background: rgba(80,58,20,0.5); color: #f6d99a; }
.mission-gear-warning.is-compact { position: absolute; top: 6px; right: 34px; margin: 0; padding: 2px 6px; }
.mission-crew-copy .mission-gear-warning { margin: 2px 0 0 6px; vertical-align: middle; }

/* Crew fatigue. The pool a crew member spends to launch, shown on the roster
 * card under the XP bar it deliberately mirrors -- same track height, same
 * inset well -- so the two read as one progression block rather than two
 * unrelated meters. Colour steps with the pool rather than the role, because
 * unlike rank this is a state that changes hour to hour. */
.crew-fatigue { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 9px; cursor: help; }
.crew-fatigue-label { color: #8ba3b4; font-size: .58rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.crew-fatigue-track { height: 5px; overflow: hidden; background: rgba(3,6,14,.8); box-shadow: inset 0 1px 2px rgba(0,0,0,.38); }
.crew-fatigue-track span { display: block; height: 100%; transition: width .4s ease; }
.crew-fatigue b { color: #c9dbe6; font-size: .6rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap; }
.crew-fatigue.is-rested .crew-fatigue-track span { background: linear-gradient(90deg, #6fd8a4, #62d9e1); box-shadow: 0 0 9px rgba(111,216,164,.45); }
.crew-fatigue.is-worn .crew-fatigue-track span { background: linear-gradient(90deg, #e6bd71, #d88758); box-shadow: 0 0 9px rgba(230,189,113,.42); }
.crew-fatigue.is-spent .crew-fatigue-track span { background: linear-gradient(90deg, #e0806f, #c4566b); box-shadow: 0 0 9px rgba(224,128,111,.42); }
.mission-definition-meta .is-fatigue { color: #edc179; }
@media (prefers-reduced-motion: reduce) { .crew-fatigue-track span { transition: none; } }
/* Projection. Every figure here is recomputed on the server at launch and again
 * at claim; this is only what the current selection is expected to produce. */
.mission-launch-projection { margin-bottom: 4px; padding: 12px 13px; border: 1px solid rgba(88,142,181,0.32); background: rgba(8,18,33,0.55); }
.mission-projection-empty { color: #8ba3b4 !important; font-size: 0.7rem !important; }
.mission-projection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 9px; margin: 0; }
.mission-projection-cell { min-width: 0; }
.mission-projection-cell dt { margin-bottom: 3px; color: #758fa7; font-size: 0.58rem; letter-spacing: .1em; text-transform: uppercase; }
.mission-projection-cell dd { margin: 0; color: #dfe8ef; font-size: 0.74rem; line-height: 1.3; }
.mission-projection-cell dd s { color: #6f889b; text-decoration-thickness: 1px; }
.mission-projection-cell.is-better dd strong { color: #9edba8; }
.mission-projection-cell.is-worse dd strong { color: #e0a894; }
.mission-projection-note { margin: 10px 0 0 !important; font-size: 0.68rem !important; font-weight: 600; }
.mission-projection-note.is-good { color: #9edba8 !important; }
.mission-projection-note.is-warning { color: #e0a894 !important; }
.mission-loadout-readiness { --readiness-color: #e0a894; margin-top: 12px; padding: 10px; border: 1px solid var(--readiness-color); border-left: 3px solid var(--readiness-color); background: linear-gradient(105deg, rgba(24,39,58,.72), rgba(10,19,35,.66)); }
.mission-loadout-readiness.is-a { --readiness-color: #9edba8; }.mission-loadout-readiness.is-b { --readiness-color: #8edee2; }.mission-loadout-readiness.is-c { --readiness-color: #ecc987; }
.mission-loadout-readiness-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.mission-loadout-readiness-head span { display: grid; gap: 1px; }.mission-loadout-readiness-head small, .mission-loadout-readiness-checks small { color: var(--readiness-color); font-size: .5rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.mission-loadout-readiness-head strong { color: #edf6f8; font-size: .78rem; }.mission-loadout-readiness-head > b { color: var(--readiness-color); font: 700 1rem/1 'Cinzel', serif; }.mission-loadout-readiness-head > b i { margin-left: 2px; color: #7f9aab; font: 600 .55rem/1 Jost, sans-serif; font-style: normal; }
.mission-loadout-readiness-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 9px; }.mission-loadout-readiness-checks > span { display: grid; gap: 2px; min-width: 0; padding: 5px; border: 1px solid rgba(111,151,178,.24); background: rgba(4,12,24,.35); }.mission-loadout-readiness-checks strong { overflow: hidden; color: #d7e6ed; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }.mission-loadout-readiness-checks > span.is-low { border-color: rgba(224,168,148,.42); }.mission-loadout-readiness-checks > span.is-low strong { color: #efb5a8; }
.mission-loadout-readiness-risks { display: grid; gap: 3px; margin: 9px 0 0; padding: 0; color: #f0baad; font-size: .6rem; line-height: 1.35; list-style: none; }.mission-loadout-readiness-risks li::before { content: '•'; margin-right: 5px; color: var(--readiness-color); }.mission-loadout-readiness-clear { margin: 8px 0 0 !important; color: #addcbb !important; font-size: .61rem !important; }
.mission-projection-caveat { margin: 6px 0 0 !important; color: #7d94a6 !important; font-size: 0.62rem !important; line-height: 1.45 !important; }
.mission-result-affinity { margin: 12px 0 0 !important; color: #9edba8 !important; font-size: 0.72rem !important; font-weight: 600; }
.mission-result-affinity.is-warning { color: #e0a894 !important; }
.mission-launch-error { min-height: 20px; color: #efa7a2 !important; }
.mission-launch-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mission-launch-actions .btn { padding: 10px 15px; font-size: 0.68rem; }
@media (max-width: 760px) { .missions-page { padding-top: 62px; } .missions-hero { min-height: 235px; } .missions-hero-content { padding-bottom: 30px; } .missions-command-header { align-items: start; flex-direction: column; } .missions-status-message { max-width: none; text-align: left; } .missions-stats { grid-template-columns: repeat(2, 1fr); } .missions-stats article:nth-child(2) { border-right: 0; } .missions-stats article:nth-child(-n+2) { border-bottom: 1px solid rgba(80,129,168,0.27); } .mission-command-feed { padding: 18px; }.mission-feed-list { grid-template-columns: 1fr; }.mission-feed-entry,.mission-feed-entry:first-child,.mission-feed-entry:last-child { min-height: 0; padding: 12px 0; border-right: 0; border-bottom: 1px solid rgba(92,163,181,0.2); }.mission-feed-entry:last-child { border-bottom: 0; padding-bottom: 0; }.mission-feed-entry p { max-width: 540px; }.missions-neoh-section { padding: 18px; } .missions-crew-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mission-history-row { grid-template-columns: 1fr 1fr; gap: 11px; } .mission-history-row > div:last-child { justify-self: start; } }
@media (max-width: 470px) { .missions-main { padding-top: 24px; } .missions-stats article { min-height: 76px; padding: 14px; } .mission-active-footer { align-items: start; flex-direction: column; } .missions-crew-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mission-crew-card { grid-template-columns: 96px minmax(0,1fr); gap: 12px; } .mission-crew-visual { width: 96px; } .mission-crew-portrait { height: 128px; } .mission-definition-meta { grid-template-columns: 1fr 1fr; } .mission-history-row { grid-template-columns: 1fr; } .mission-launch-modal-inner { padding: 24px 18px; } }

/* ---- Mission debrief ---------------------------------------------------
 * Wider than the 560px it started at, and scroll-contained. A large haul used
 * to grow the modal until "Return to Command" was pushed off the bottom of the
 * screen with no way back to it; the body scrolls now and the action row is
 * pinned to the foot of the dialog. */
.mission-result-modal { width: min(880px, calc(100vw - 28px)); max-height: calc(100vh - 40px); }
.mission-result-inner { display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.mission-result-body { overflow-y: auto; min-height: 0; padding-right: 4px; }
.mission-result-actions { position: sticky; bottom: 0; margin-top: 4px; padding-top: 14px; background: linear-gradient(180deg, rgba(16,13,34,0), rgba(16,13,34,0.92) 40%); }
.mission-result-actions .btn { flex: 0 0 auto; }
#mission-result-error:empty { display: none; }

/* The roll, against the odds. A bar with the success threshold filled and a
 * marker where the roll landed -- the number alone does not show how close it
 * was, which is the whole point of reporting it. */
.mission-result-roll { display: grid; gap: 3px; margin: 14px 0 0; padding: 11px 13px; border: 1px solid rgba(90,149,185,0.34); background: rgba(6,15,28,0.45); }
.mission-result-roll > span:first-child { color: #8ba3b4; font-size: 0.57rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-result-roll strong { color: #eef1f6; font-size: 0.94rem; }
.mission-result-roll em { color: #a9c2d0; font-size: 0.7rem; font-style: normal; }
.mission-result-roll.is-won { border-color: rgba(110,207,140,0.42); }
.mission-result-roll.is-won strong { color: #9edba8; }
.mission-result-roll.is-lost { border-color: rgba(224,138,114,0.45); }
.mission-result-roll.is-lost strong { color: #e8a894; }
.mission-result-roll.is-certain strong { color: #7ee3e8; }
.mission-result-roll-track { position: relative; display: block; height: 6px; margin-top: 6px; background: rgba(3,6,14,0.85); }
.mission-result-roll-fill { display: block; height: 100%; background: linear-gradient(90deg, rgba(110,207,140,0.55), rgba(110,207,140,0.28)); }
.mission-result-roll-marker { position: absolute; top: -3px; width: 2px; height: 12px; background: #eef1f6; box-shadow: 0 0 6px rgba(238,241,246,0.7); }

/* Best find: the rarest item promoted above the list, so a haul of four does
 * not read as four identical lines whatever was actually in it. */
.mission-result-bestfind { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 9px; padding: 8px 11px; border: 1px solid rgba(var(--gear-tier), 0.55); background: rgba(var(--gear-tier), 0.09); }
.mission-result-bestfind > span { color: rgb(var(--gear-tier)); font-size: 0.55rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-result-bestfind strong { color: #eef1f6; font-size: 0.88rem; }
.mission-result-bestfind em { color: rgb(var(--gear-tier)); font-size: 0.66rem; font-style: normal; text-transform: capitalize; }

/* Two columns of loot on a wide modal. Gear rows are compact enough to pair,
 * and a haul of six otherwise ran the modal off the screen. */
.mission-result-loot.is-gear { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
.mission-result-gear { position: relative; align-items: start; box-shadow: inset 3px 0 0 rgb(var(--gear-tier)); }
.mission-result-gear-count { margin-left: 6px; padding: 0 5px; border: 1px solid rgba(126,227,232,0.4); color: #7ee3e8; font-size: 0.62rem; font-weight: 700; }
.mission-result-gear-actions { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.mission-result-equip { padding: 6px 10px !important; font-size: 0.63rem !important; white-space: nowrap; }
.mission-result-equip.is-done { opacity: 0.7; }
/* Destroy is a quiet control beside Equip, not the loudest thing on a reward
 * screen. It only turns red once it is armed and actually about to destroy. */
.mission-result-destroy { padding: 5px 9px; border: 1px solid rgba(103,152,190,0.3); background: none; color: #8ba3b4; font: 600 0.6rem/1.3 'Jost', sans-serif; cursor: pointer; }
.mission-result-destroy:hover, .mission-result-destroy:focus-visible { border-color: rgba(224,138,114,0.6); color: #e8a894; }
.mission-result-destroy.is-arming { border-color: rgba(224,138,114,0.9); background: rgba(78,26,26,0.5); color: #f2b6a4; }
.mission-result-gear.is-equipped { border-color: rgba(110,207,140,0.5); }
.mission-result-gear-upgrade.is-empty { color: #7ee3e8; }
.mission-result-gear-upgrade.is-none { color: #7d94a5; }
/* The advice now names the crew member and what it replaces, which does not fit
 * the single nowrap line this was written for -- measured clipping at 191px
 * into a 169px column. Wrapped to at most two lines instead of ellipsised: a
 * truncated "Fills an empty chest slot for Elias Wa..." loses exactly the part
 * that makes it useful. */
.mission-result-gear-upgrade { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
/* No up-arrow on a line that reports the absence of an upgrade. */
.mission-result-gear-upgrade.is-none::before { content: ''; }

/* Crew aftermath: where each crew member's experience now sits, and how long
 * before they can go out again. */
.mission-result-crewlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mission-result-crew { display: grid; gap: 4px; padding: 9px 11px; border: 1px solid rgba(90,149,185,0.32); background: rgba(6,15,28,0.4); }
.mission-result-crew.is-promoted { border-color: rgba(235,209,138,0.5); background: rgba(46,36,14,0.35); }
.mission-result-crew-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; }
.mission-result-crew-head strong { color: #eef1f6; font-size: 0.78rem; }
.mission-result-crew-head em { color: #90abba; font-size: 0.64rem; font-style: normal; }
.mission-result-crew-promo { color: #ebd18a !important; font-weight: 600; }
.mission-result-crew-xp { display: block; height: 4px; overflow: hidden; background: rgba(3,6,14,0.8); }
.mission-result-crew-xp i { display: block; height: 100%; background: linear-gradient(90deg, #62d9e1, #8b6bd4); }
.mission-result-crew.is-promoted .mission-result-crew-xp i { background: linear-gradient(90deg, #e6bd71, #d88758); }
.mission-result-crew-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; color: #a9c2d0; font-size: 0.63rem; }
.mission-result-crew-rest { color: #edc179; }
.mission-result-crew-rest.is-rested { color: #9edba8; }

/* What would have helped, on a loss only. */
.mission-result-block.is-factors { border-color: rgba(224,138,114,0.38); }
.mission-result-factors { display: grid; gap: 5px; margin: 0; padding: 0 0 0 16px; color: #dcc4bd; font-size: 0.7rem; line-height: 1.45; }

/* The reveal. Each direct child of the body carries its own --reveal-index, set
 * in js/missions.js, so the debrief arrives in reading order rather than all at
 * once -- this is the payoff moment of the loop and it used to appear like a
 * receipt. Skipped entirely under prefers-reduced-motion, where every block is
 * simply present from the first frame. */
@media (prefers-reduced-motion: no-preference) {
  .mission-result-body > * { animation: mission-result-reveal .34s ease-out both; animation-delay: calc(var(--reveal-index, 0) * 70ms); }
  @keyframes mission-result-reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 640px) {
  .mission-result-loot.is-gear, .mission-result-crewlist { grid-template-columns: minmax(0, 1fr); }
  .mission-result-gear-actions { flex-direction: row; }
}

/* ---- Overlord affinity, on the command card ----------------------------
 * Sits under the reputation bar. Its own row rather than a line inside the
 * rank block: the rank is what the site awards you and the affinity is what
 * you chose, and the two answer different questions. */
/* Accent-derived TEXT is lightened toward white; the pure accent stays on
 * borders, fills and the sigil, where the 4.5:1 rule does not apply. Measured:
 * Malric Thorne's rgb(204,72,80) is the darkest Overlord accent and read 4.38:1
 * as body text against its own tinted card. At 70% toward white every Overlord
 * clears AA, and the card still reads unmistakably as theirs. */
.mission-profile-affinity, .mission-contract-card { --overlord-text: color-mix(in srgb, var(--overlord-accent, #c9a227) 70%, #ffffff); }
.mission-profile-affinity { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 9px; margin-top: 12px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--overlord-accent, #c9a227) 42%, transparent); background: color-mix(in srgb, var(--overlord-accent, #c9a227) 9%, rgba(6,15,28,0.5)); color: inherit; text-decoration: none; transition: border-color .25s ease, background-color .25s ease; }
.mission-profile-affinity:hover, .mission-profile-affinity:focus-visible { border-color: color-mix(in srgb, var(--overlord-accent, #c9a227) 78%, transparent); background: color-mix(in srgb, var(--overlord-accent, #c9a227) 16%, rgba(6,15,28,0.5)); }
.mission-profile-affinity-sigil { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--overlord-accent, #c9a227); }
.mission-profile-affinity-sigil svg { width: 22px; height: 22px; }
.mission-profile-affinity-copy { display: grid; gap: 1px; min-width: 0; }
.mission-profile-affinity-copy small { color: #8ba3b4; font-size: 0.55rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.mission-profile-affinity-copy strong { overflow: hidden; color: #eef1f6; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.mission-profile-affinity-copy em { overflow: hidden; color: var(--overlord-text, #e2c76a); font-size: 0.63rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
/* Unaligned: a prompt rather than a status, so it reads as something to do. */
.mission-profile-affinity.is-empty { --overlord-accent: #7ee3e8; }
.mission-profile-affinity.is-empty .mission-profile-affinity-sigil { font: 700 1rem/1 'Cinzel', serif; }
.mission-profile-affinity.is-empty strong { color: #7ee3e8; font-size: 0.72rem; white-space: normal; }

/* ---- Daily Overlord contract, in the conditions rail -------------------
 * A minified mission card in its Overlord's own colour, so the patron is
 * legible before the copy is read. Every colour here derives from the one
 * --overlord-accent property set by js/missions.js from Overlord Control's
 * accent_color, with the sigil map and then a neutral gold as fallbacks. */
.mission-contract-card { position: relative; display: grid; gap: 7px; overflow: hidden; padding: 14px 15px 15px; border: 1px solid color-mix(in srgb, var(--overlord-accent, #c9a227) 50%, transparent); background: linear-gradient(148deg, color-mix(in srgb, var(--overlord-accent, #c9a227) 17%, rgba(10,14,30,0.9)), rgba(9,12,26,0.94)); box-shadow: inset 0 1px color-mix(in srgb, var(--overlord-accent, #c9a227) 16%, transparent), 0 10px 24px rgba(5,3,15,0.16); }
.mission-contract-card[hidden] { display: none; }
.mission-contract-card .eyebrow { margin: 0; color: var(--overlord-text, #e2c76a); font-size: 0.57rem; }
.mission-contract-head { display: flex; align-items: center; gap: 8px; }
.mission-contract-sigil { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--overlord-accent, #c9a227); }
.mission-contract-sigil svg { width: 21px; height: 21px; }
.mission-contract-head strong { color: #eef1f6; font: 600 0.82rem/1.2 'Cinzel', serif; }
.mission-contract-name { color: #eef1f6; font-size: 0.86rem; line-height: 1.25; }
.mission-contract-meta { color: #a9c2d0; font-size: 0.62rem; letter-spacing: .05em; text-transform: uppercase; }
.mission-contract-reward { color: var(--overlord-text, #e2c76a); font-size: 0.68rem; font-weight: 600; }
.mission-contract-card .mission-progression { margin-top: 1px; border-color: color-mix(in srgb, var(--overlord-accent, #c9a227) 44%, transparent); background: color-mix(in srgb, var(--overlord-accent, #c9a227) 10%, rgba(5,15,28,.58)); }
.mission-contract-card .mission-progression-head { color: var(--overlord-text, #e2c76a); }.mission-contract-card .mission-progression-head small { color: var(--overlord-text, #e2c76a); opacity: .78; }.mission-contract-card .mission-progression-items span { border-color: color-mix(in srgb, var(--overlord-accent, #c9a227) 30%, transparent); color: #c6d4de; }.mission-contract-card .mission-progression-items span.is-featured { color: #f1d98d; }
.mission-contract-contested { width: fit-content; padding: 3px 6px; border: 1px solid rgba(235,150,113,0.48); background: rgba(91,39,47,0.3); color: #f0b092; font-size: .57rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.mission-contract-copy { margin: 0; color: #a9c2d0; font-size: 0.68rem; line-height: 1.45; }
.mission-contract-copy.is-done { color: #9edba8; }
.mission-contract-launch { width: 100%; margin-top: 2px; padding: 8px 10px !important; font-size: 0.66rem !important; }
.mission-contract-link { color: var(--overlord-text, #e2c76a); font-size: 0.65rem; font-weight: 600; letter-spacing: .05em; text-decoration: none; }
.mission-contract-link:hover, .mission-contract-link:focus-visible { text-decoration: underline; }
/* Locked and empty states are quieter than an issued contract: they are an
 * explanation, not an offer. */
.mission-contract-card.is-locked, .mission-contract-card.is-empty { border-color: rgba(90,149,185,0.34); background: rgba(6,15,28,0.5); box-shadow: none; }
.mission-contract-card.is-locked .eyebrow, .mission-contract-card.is-empty .eyebrow { color: #8ba3b4; }
.mission-contract-card.is-claimed { border-color: rgba(110,207,140,0.42); }
/* Under way, not finished: amber rather than the completed green, so the two
 * states are not read as the same thing at a glance. */
.mission-contract-copy.is-running { color: #e8c98a; }
.mission-contract-card.is-running { border-color: rgba(224,190,120,0.42); }
.mission-contract-card.is-clearance-blocked { border-color: color-mix(in srgb, var(--overlord-accent, #c9a227) 70%, rgba(224,138,114,0.72)); }
.mission-contract-clearance { display: grid; gap: 7px; margin-top: 3px; padding: 9px; border: 1px solid color-mix(in srgb, var(--overlord-accent, #c9a227) 38%, rgba(97,156,190,0.38)); background: rgba(5,13,27,0.5); }
.mission-contract-clearance > span { color: var(--overlord-text, #e2c76a); font-size: .57rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.mission-contract-clearance p { margin: 0; color: #a9c2d0; font-size: .63rem; line-height: 1.42; }
.mission-contract-clearance small { color: #8faabb; font-size: .56rem; }
.mission-contract-clearance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border: 1px solid rgba(112,169,198,0.3); background: rgba(2,8,18,0.8); }
.mission-contract-clearance-cell { position: relative; aspect-ratio: 1.7; min-height: 29px; padding: 0; border: 1px solid color-mix(in srgb, var(--overlord-accent, #c9a227) 34%, rgba(86,144,180,0.45)); background: linear-gradient(145deg, rgba(24,46,68,0.82), rgba(10,17,35,0.94)); color: #9edba8; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.mission-contract-clearance-cell::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(150,206,223,0.13); pointer-events: none; }
.mission-contract-clearance-cell:hover:not(:disabled), .mission-contract-clearance-cell:focus-visible { border-color: var(--overlord-text, #e2c76a); background: color-mix(in srgb, var(--overlord-accent, #c9a227) 20%, rgba(10,17,35,0.94)); outline: none; transform: translateY(-1px); }
.mission-contract-clearance-cell:disabled { cursor: default; }.mission-contract-clearance-cell.is-secure { border-color: rgba(115,211,157,0.62); background: linear-gradient(145deg, rgba(41,104,82,0.78), rgba(12,45,43,0.92)); }
.mission-contract-clearance-cell span { position: relative; z-index: 1; font-size: .9rem; }
.mission-contract-clearance.is-collapsed { border-color: rgba(224,138,114,0.56); background: linear-gradient(145deg, rgba(69,25,38,0.64), rgba(21,10,25,0.92)); }.mission-contract-clearance.is-collapsed > span { color: #e8a38f; }
.mission-contract-clear { margin: 1px 0 0; color: #9edba8; font-size: .63rem; }

/* A private Sweep lead takes a full-width command card: its lost object is the
 * reason for the mission, so it is given the same visual weight as a result
 * reward rather than buried among ordinary operations. */
.mission-salvage-recovery-section { padding: 0; border: 0; background: transparent; }.mission-salvage-recovery-section[hidden] { display: none; }
.mission-salvage-recovery-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(190px, .85fr) auto; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid rgba(126,198,222,0.5); background: linear-gradient(125deg, rgba(13,58,73,0.72), rgba(28,16,58,0.86)); box-shadow: inset 0 0 26px rgba(87,214,224,0.07), 0 10px 28px rgba(2,6,20,0.18); }
.mission-salvage-recovery-card.is-tier-epic { border-color: rgba(184,126,234,0.66); background: linear-gradient(125deg, rgba(52,25,85,0.78), rgba(21,18,61,0.88)); }.mission-salvage-recovery-card.is-tier-legendary { border-color: rgba(240,203,117,0.72); background: linear-gradient(125deg, rgba(78,52,18,0.68), rgba(43,20,56,0.9)); }
.mission-salvage-recovery-alert { display: grid; gap: 4px; }.mission-salvage-recovery-alert .eyebrow { margin: 0; color: #8be1e6; }.mission-salvage-recovery-alert strong { color: #f1edf9; font: 600 .96rem/1.25 'Cinzel', serif; }.mission-salvage-recovery-alert p { margin: 0; max-width: 48ch; color: #a9c2d0; font-size: .72rem; line-height: 1.45; }
.mission-salvage-recovery-target { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 10px; }.mission-salvage-recovery-art { display: grid; width: 54px; height: 54px; place-items: center; overflow: hidden; border: 1px solid rgba(126,213,222,0.48); background: rgba(5,13,27,0.74); color: #e9d399; }.mission-salvage-recovery-art img { width: 100%; height: 100%; object-fit: cover; }.mission-salvage-recovery-target small, .mission-salvage-recovery-target em { display: block; color: #91afbe; font-size: .58rem; font-style: normal; letter-spacing: .055em; text-transform: uppercase; }.mission-salvage-recovery-target strong { display: block; overflow: hidden; margin: 3px 0; color: #f2edf7; font: 600 .78rem/1.2 'Cinzel', serif; text-overflow: ellipsis; white-space: nowrap; }
.mission-salvage-recovery-actions { display: grid; justify-items: end; gap: 8px; }.mission-salvage-recovery-actions span { max-width: 23ch; color: #9edba8; font-size: .61rem; line-height: 1.35; text-align: right; }.mission-salvage-recovery-actions .btn { white-space: nowrap; }
.mission-result-salvage-recovery { margin: 14px 0 0; padding: 11px 13px; border: 1px solid rgba(126,213,222,0.48); background: rgba(11,47,60,0.42); }.mission-result-salvage-recovery span { display: block; color: #8be1e6; font-size: .57rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.mission-result-salvage-recovery strong { display: block; margin-top: 3px; color: #eef5f6; font: 600 .8rem/1.25 'Cinzel', serif; }.mission-result-salvage-recovery p { margin: 4px 0 0; color: #a9c2d0; font-size: .68rem; line-height: 1.42; }.mission-result-salvage-recovery.is-failed { border-color: rgba(224,138,114,0.52); background: rgba(72,28,42,0.42); }.mission-result-salvage-recovery.is-failed span { color: #e8a38f; }
@media (max-width: 760px) { .mission-salvage-recovery-card { grid-template-columns: 1fr; gap: 13px; }.mission-salvage-recovery-actions { justify-items: start; }.mission-salvage-recovery-actions span { max-width: none; text-align: left; } }

/* ---------------------------------------------------------------------------
 * Inventory limits, stims and the quartermaster rail card.
 * ------------------------------------------------------------------------ */

/* Two ceilings, drawn wherever the inventory is summarised. The tone steps at
 * 85% rather than only at full, so the warning arrives while the player still
 * has room to act on it -- once a reward has been dropped it is too late. */
.missions-inventory-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin: -3px 0 14px; }
.mission-inventory-meter { display: grid; gap: 5px; padding: 9px 11px; border: 1px solid rgba(80,129,168,0.32); background: rgba(10,20,38,0.46); }
.mission-inventory-meter.is-compact { padding: 7px 0 0; border: 0; background: none; }
.mission-inventory-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #90abba; font-size: 0.64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mission-inventory-meter-head strong { color: #d8e6ef; font-size: 0.72rem; letter-spacing: 0; }
.mission-inventory-meter-track { display: block; height: 4px; background: rgba(122,160,186,0.2); }
.mission-inventory-meter-track i { display: block; height: 100%; background: linear-gradient(90deg, #4fb9c9, #79d9df); transition: width .3s ease; }
.mission-inventory-meter.is-tight .mission-inventory-meter-track i { background: linear-gradient(90deg, #c99a4f, #e8c47a); }
.mission-inventory-meter.is-tight .mission-inventory-meter-head strong { color: #e8c47a; }
.mission-inventory-meter.is-full .mission-inventory-meter-track i { background: linear-gradient(90deg, #c05a5a, #e08a8a); }
.mission-inventory-meter.is-full .mission-inventory-meter-head strong { color: #e59a9a; }

/* Boosts currently running, above the item grid. */
.missions-inventory-boosts:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.mission-inventory-boosts-label { margin: 0 4px 0 0 !important; color: #90abba !important; font-size: 0.62rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mission-inventory-boost { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border: 1px solid rgba(126,203,158,0.42); background: rgba(20,46,36,0.5); color: #cfe4d6; font-size: 0.68rem; }
.mission-inventory-boost strong { color: #9edba8; font-size: 0.74rem; }
.mission-inventory-boost-left { color: #8ba3b4; font-size: 0.62rem; font-style: normal; }

/* A stim reads as its own kind of thing rather than as odd salvage. */
.mission-inventory-card.is-stim { border-color: rgba(126,203,158,0.42); }
.mission-inventory-card.is-stim .mission-inventory-icon { border-color: rgba(126,203,158,0.5); background: rgba(126,203,158,0.1); color: #9edba8; }
.mission-inventory-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
/* 7px rather than the 5px this started at: at 5px the button measured 23.6px
 * tall, just under the 24px minimum target size. Set as padding rather than a
 * min-height so the two buttons stay the same height as each other whatever
 * their label wraps to. */
.mission-inventory-actions .btn { padding: 7px 12px; font-size: 0.64rem; }
.mission-inventory-destroy { border-color: rgba(192,90,90,0.46); color: #e59a9a; }
.mission-inventory-destroy:hover, .mission-inventory-destroy:focus-visible { border-color: rgba(224,138,138,0.8); color: #f2bcbc; }

/* Inventory workbench: private organisation, a practical equipment comparison
 * and a deliberately modest outlet for low-value salvage. These surfaces share
 * the quartermaster palette, while rare discoveries retain their own item-tier
 * colour on the cards rather than reading like generic currency. */
.mission-inventory-workbench, .mission-inventory-conversion-queue { margin: 0 0 14px; border: 1px solid rgba(93,190,198,.42); background: linear-gradient(130deg, rgba(8,34,48,.72), rgba(23,17,48,.72)); }
.mission-inventory-workbench-head, .mission-inventory-queue-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px 14px; border-bottom: 1px solid rgba(93,190,198,.24); }
.mission-inventory-workbench-head h3 { margin: 3px 0 2px; color: #eaf7f7; font: 600 .84rem/1.2 'Cinzel', serif; }
.mission-inventory-workbench-head p, .mission-inventory-queue-head small { display: block; margin: 0; color: #9fc5cb; font-size: .65rem; line-height: 1.4; }
.mission-inventory-workbench-head > button { display: grid; flex: 0 0 auto; width: 27px; height: 27px; place-items: center; padding: 0; border: 1px solid rgba(128,203,209,.52); background: rgba(9,23,42,.7); color: #bdebed; cursor: pointer; font: 1.05rem/1 inherit; }
.mission-inventory-workbench-head > button:hover, .mission-inventory-workbench-head > button:focus-visible { border-color: #bdebed; background: rgba(24,72,86,.8); }
.mission-inventory-compare-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: rgba(93,190,198,.18); }
.mission-inventory-compare-list article { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 11px 13px; background: rgba(8,20,37,.78); }
.mission-inventory-compare-list article > div { min-width: 0; }
.mission-inventory-compare-list article strong, .mission-inventory-compare-list article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mission-inventory-compare-list article strong { color: #e8f4f5; font-size: .72rem; }
.mission-inventory-compare-list article small { margin-top: 3px; color: #92adb9; font-size: .59rem; }
.mission-inventory-compare-list .btn { flex: 0 0 auto; padding: 6px 9px; font-size: .6rem; }
.mission-inventory-compare-deltas { display: flex; flex-wrap: wrap; gap: 4px 7px; margin-top: 7px; color: #708a9a; font-size: .57rem; font-weight: 700; }
.mission-inventory-compare-deltas .is-better { color: #91e2b0; }.mission-inventory-compare-deltas .is-worse { color: #e99b9b; }
.mission-inventory-compare-state { flex: 0 0 auto; color: #79d9df; font-size: .58rem; font-weight: 700; text-align: right; }.mission-inventory-compare-state.is-blocked { color: #d7aa78; }
.mission-inventory-queue-head > div { display: grid; gap: 3px; }.mission-inventory-queue-head strong { color: #ddf0ef; font-size: .73rem; }.mission-inventory-queue-payout { flex: 0 0 auto; color: #9edba8 !important; font-size: .78rem !important; white-space: nowrap; }
.mission-inventory-queue-items { display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 14px 0; }
.mission-inventory-queue-items > span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px 5px 9px; border: 1px solid rgba(126,203,158,.38); background: rgba(20,52,43,.48); color: #c9e5d3; font-size: .62rem; }
.mission-inventory-queue-items button { display: grid; width: 17px; height: 17px; place-items: center; padding: 0; border: 0; background: transparent; color: #b5c9d0; cursor: pointer; font: .95rem/1 inherit; }.mission-inventory-queue-items button:hover, .mission-inventory-queue-items button:focus-visible { color: #f1bbbb; }
.mission-inventory-queue-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 11px 14px 13px; }.mission-inventory-queue-actions .btn { padding: 7px 10px; font-size: .62rem; }
.mission-inventory-card.is-favorite { box-shadow: inset 0 0 0 1px rgba(235,207,113,.24), 0 0 15px rgba(235,207,113,.06); }
.mission-inventory-card.has-upgrade { outline: 1px solid rgba(126,203,158,.58); outline-offset: -3px; }
.mission-inventory-upgrade { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 7px; align-items: center; margin: 8px 0 0 !important; padding: 7px 8px; border: 1px solid rgba(126,203,158,.38); background: linear-gradient(100deg, rgba(17,66,45,.56), rgba(12,31,39,.36)); color: #c8e9d3; }
.mission-inventory-upgrade > span { grid-row: 1 / span 2; align-self: stretch; display: grid; place-items: center; min-width: 54px; padding: 0 4px; border-right: 1px solid rgba(126,203,158,.3); color: #91e2b0; font-size: .5rem; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-align: center; text-transform: uppercase; }
.mission-inventory-upgrade strong { overflow: hidden; color: #ddf4e4; font-size: .66rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.mission-inventory-upgrade small { overflow: hidden; margin-top: 2px; color: #a2cdb1; font-size: .57rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
/* Rarity needs to read from the edge of the card, not only from a word in the
 * metadata. Higher tiers gain progressively stronger frames and light, while
 * their art frame mirrors the same colour at the first point the eye lands. */
.mission-inventory-card.is-uncommon { border-color: rgba(158,219,168,.54); box-shadow: inset 3px 0 0 rgba(158,219,168,.7), inset 0 0 20px rgba(158,219,168,.07); }.mission-inventory-card.is-uncommon .mission-inventory-icon { border-color: rgba(158,219,168,.72); box-shadow: 0 0 11px rgba(158,219,168,.18); }
.mission-inventory-card.is-rare { overflow: hidden; border-color: rgba(112,204,223,.72); background: radial-gradient(circle at 10% 0%, rgba(75,192,220,.17), transparent 48%), linear-gradient(140deg, rgba(13,43,65,.94), rgba(22,13,49,.9)); box-shadow: inset 3px 0 0 rgba(112,204,223,.9), inset 0 0 28px rgba(78,190,219,.12), 0 0 16px rgba(78,190,219,.1); }.mission-inventory-card.is-rare .mission-inventory-icon { border-color: rgba(112,204,223,.84); box-shadow: 0 0 15px rgba(78,190,219,.35); }
.mission-inventory-card.is-epic { overflow: hidden; border-color: rgba(205,124,236,.8); background: radial-gradient(circle at 8% 0%, rgba(194,91,233,.19), transparent 50%), linear-gradient(140deg, rgba(44,20,64,.94), rgba(24,13,51,.9)); box-shadow: inset 3px 0 0 rgba(205,124,236,.95), inset 0 0 32px rgba(194,91,233,.15), 0 0 18px rgba(194,91,233,.12); }.mission-inventory-card.is-epic .mission-inventory-icon { border-color: rgba(205,124,236,.9); box-shadow: 0 0 17px rgba(194,91,233,.42); }
.mission-inventory-card.is-legendary { overflow: hidden; border-color: rgba(233,211,153,.96); background: radial-gradient(circle at 8% 0%, rgba(238,194,99,.22), transparent 52%), linear-gradient(140deg, rgba(70,48,22,.9), rgba(30,18,43,.94)); box-shadow: inset 3px 0 0 rgba(238,211,145,1), inset 0 0 38px rgba(232,187,84,.18), 0 0 21px rgba(232,187,84,.18); }.mission-inventory-card.is-legendary .mission-inventory-icon { border-color: rgba(238,211,145,.98); box-shadow: 0 0 20px rgba(232,187,84,.52); }.mission-inventory-card.is-legendary::after { content: ''; position: absolute; z-index: 0; inset: -45% -34%; pointer-events: none; background: linear-gradient(105deg, transparent 43%, rgba(255,244,190,.26) 49%, rgba(255,249,219,.42) 51%, transparent 58%); mix-blend-mode: screen; transform: translateX(-58%); animation: mission-inventory-legendary-shine 4.8s ease-in-out infinite; }
.mission-inventory-card.is-rare .mission-inventory-copy, .mission-inventory-card.is-epic .mission-inventory-copy, .mission-inventory-card.is-legendary .mission-inventory-copy, .mission-inventory-card.is-rare .mission-inventory-icon, .mission-inventory-card.is-epic .mission-inventory-icon, .mission-inventory-card.is-legendary .mission-inventory-icon { position: relative; z-index: 1; }
@keyframes mission-inventory-legendary-shine { 0%, 58% { opacity: 0; transform: translateX(-58%); } 68% { opacity: 1; } 84%, 100% { opacity: 0; transform: translateX(58%); } }
.mission-inventory-organisation { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(108,150,181,.2); }
.mission-inventory-favorite { position: absolute; z-index: 1; top: 12px; right: 12px; display: grid; width: 25px; height: 25px; place-items: center; padding: 0; border: 1px solid rgba(133,161,177,.4); background: rgba(10,22,39,.82); color: #6f8594; cursor: pointer; font: .84rem/1 inherit; }.mission-inventory-favorite.is-active { border-color: rgba(234,202,105,.82); color: #f0d46f; text-shadow: 0 0 9px rgba(240,212,111,.7); }.mission-inventory-favorite:hover, .mission-inventory-favorite:focus-visible { border-color: #f0d46f; }
.mission-inventory-organisation label { display: inline-flex; align-items: center; gap: 6px; color: #809cac; font-size: .57rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.mission-inventory-organisation select { max-width: 94px; padding: 4px 20px 4px 6px; border-color: rgba(102,153,182,.44); background-color: rgba(9,21,38,.86); color: #c9dce4; font: .6rem inherit; }
.mission-inventory-history { margin-top: 8px; border-top: 1px solid rgba(108,150,181,.2); color: #90adbb; font-size: .6rem; }.mission-inventory-history summary { padding-top: 8px; color: #8cced2; cursor: pointer; font-weight: 700; list-style: none; }.mission-inventory-history summary::-webkit-details-marker { display: none; }.mission-inventory-history summary::before { content: '+'; display: inline-block; width: 13px; color: #b9e8e8; }.mission-inventory-history[open] summary::before { content: '−'; }.mission-inventory-history summary span { color: #7293a5; }.mission-inventory-history ol { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }.mission-inventory-history li { display: grid; gap: 2px; padding-left: 7px; border-left: 1px solid rgba(94,183,190,.38); }.mission-inventory-history li strong { color: #bdd5d9; font-size: .59rem; }.mission-inventory-history li span { color: #7e9dac; line-height: 1.35; }.mission-inventory-legacy { margin: 8px 0 0 !important; color: #6f8a9a !important; font-size: .59rem !important; }
.mission-inventory-convert { border-color: rgba(126,203,158,.48); color: #a6e3ba; }.mission-inventory-convert:hover, .mission-inventory-convert:focus-visible { border-color: #a6e3ba; color: #dbf6e3; }.mission-inventory-convert-value { margin: 6px 0 0 !important; color: #a2dbae !important; font-size: .62rem !important; font-weight: 700; }

/* Grid keeps the visual inspection view; list mode is intentionally one row
 * per record so checkboxes, select-all by type and the destructive summary are
 * easy to scan before a bulk action is confirmed. */
.mission-inventory-bulk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px; margin: 0 0 14px; border: 1px solid rgba(154,114,92,.46); background: rgba(154,114,92,.25); }
.mission-inventory-bulk > div, .mission-inventory-bulk > p { margin: 0; background: linear-gradient(135deg, rgba(40,23,38,.82), rgba(14,24,43,.88)); }
.mission-inventory-bulk-view { display: inline-flex; align-items: center; gap: 4px; padding: 10px 11px; color: #a7bdca; font-size: .61rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.mission-inventory-bulk-view button { padding: 5px 7px; border: 1px solid rgba(124,158,181,.36); background: rgba(9,18,33,.58); color: #91aebd; cursor: pointer; font: .58rem inherit; letter-spacing: .04em; text-transform: uppercase; }.mission-inventory-bulk-view button.is-active { border-color: rgba(126,213,222,.72); background: rgba(24,68,82,.64); color: #c7f1ef; }.mission-inventory-bulk-view button:hover, .mission-inventory-bulk-view button:focus-visible { border-color: #c7f1ef; }
.mission-inventory-bulk-shortcut, .mission-inventory-bulk-selection { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }.mission-inventory-bulk-shortcut > span, .mission-inventory-bulk-selection > span { display: grid; gap: 2px; }.mission-inventory-bulk-shortcut strong, .mission-inventory-bulk-selection strong { color: #f0d5c8; font-size: .68rem; }.mission-inventory-bulk-shortcut small, .mission-inventory-bulk-selection small, .mission-inventory-bulk-note { color: #99adbb; font-size: .6rem; line-height: 1.35; }.mission-inventory-bulk-selection { grid-column: 1 / -1; border-top: 1px solid rgba(154,114,92,.25); }.mission-inventory-bulk-selection > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }.mission-inventory-bulk .btn { padding: 6px 9px; font-size: .6rem; }.mission-inventory-bulk .btn:disabled { cursor: not-allowed; opacity: .45; }
.mission-inventory-bulk-danger { border-color: rgba(218,122,112,.58) !important; color: #efb0a6 !important; }.mission-inventory-bulk-danger:hover:not(:disabled), .mission-inventory-bulk-danger:focus-visible:not(:disabled) { border-color: #f2b4ac !important; background: rgba(85,27,40,.68); color: #ffe0da !important; }.mission-inventory-bulk-note { grid-column: 1 / -1; padding: 9px 12px !important; border-top: 1px solid rgba(154,114,92,.25); }
.missions-inventory-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
/* List mode is a scan-friendly summary. Full descriptions, requirements,
 * history and tagging remain available in the roomier grid view. */
.missions-inventory-grid.is-list .mission-inventory-card { min-height: 0; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; padding: 8px 11px 8px 41px; }
.missions-inventory-grid.is-list .mission-inventory-card.is-list-row { position: relative; }
.missions-inventory-grid.is-list .mission-inventory-card .mission-inventory-icon { width: 38px; height: 38px; }
.missions-inventory-grid.is-list .mission-inventory-copy h3 { margin: 0 29px 1px 0; font-size: .8rem; line-height: 1.2; }
.missions-inventory-grid.is-list .mission-inventory-meta { font-size: .58rem !important; line-height: 1.25; }
.missions-inventory-grid.is-list .mission-inventory-tier { min-height: 15px; padding: 0 4px; font-size: .5rem; }
.missions-inventory-grid.is-list .mission-inventory-bonus, .missions-inventory-grid.is-list .mission-inventory-state, .missions-inventory-grid.is-list .mission-inventory-convert-value { margin-top: 3px !important; font-size: .59rem !important; line-height: 1.2; }
.missions-inventory-grid.is-list .mission-inventory-upgrade { margin-top: 4px !important; padding: 4px 6px; column-gap: 5px; }.missions-inventory-grid.is-list .mission-inventory-upgrade > span { min-width: 46px; font-size: .45rem; }.missions-inventory-grid.is-list .mission-inventory-upgrade strong { font-size: .59rem; }.missions-inventory-grid.is-list .mission-inventory-upgrade small { font-size: .52rem; }
.missions-inventory-grid.is-list .mission-inventory-desc, .missions-inventory-grid.is-list .mission-inventory-requires, .missions-inventory-grid.is-list .mission-inventory-history, .missions-inventory-grid.is-list .mission-inventory-organisation { display: none; }
.missions-inventory-grid.is-list .mission-inventory-actions { gap: 5px; margin-top: 5px; }.missions-inventory-grid.is-list .mission-inventory-actions .btn { min-height: 24px; padding: 4px 8px; font-size: .58rem; }
.missions-inventory-grid.is-list .mission-inventory-favorite { top: 8px; right: 10px; width: 22px; height: 22px; font-size: .76rem; }
.mission-inventory-bulk-check { position: absolute; z-index: 1; top: 8px; left: 10px; display: grid; width: 21px; height: 21px; place-items: center; }.mission-inventory-bulk-check input { width: 16px; height: 16px; margin: 0; accent-color: #d88478; cursor: pointer; }
@media (max-width: 620px) { .mission-inventory-bulk { grid-template-columns: 1fr; }.mission-inventory-bulk-view { justify-content: flex-start; }.mission-inventory-bulk-shortcut, .mission-inventory-bulk-selection { align-items: flex-start; flex-direction: column; }.mission-inventory-bulk-selection > div { justify-content: flex-start; } }

/* Rewards an operation earned but could not be stored. Deliberately warm rather
 * than alarming: nothing failed, the payout was simply short. */
.mission-result-block.is-warning { border-color: rgba(201,154,79,0.46); }
.mission-result-block.is-warning h4 { color: #e8c47a; }

/* The rail card under the Market. Same construction as .mission-market-card
 * next to it -- one rail, one card language -- in the teal the quartermaster
 * surfaces already use rather than the Market's purple. */
.mission-quartermaster-card { position: relative; display: grid; gap: 9px; padding: 15px 16px 16px; border: 1px solid rgba(94,176,196,0.44); background: linear-gradient(148deg, rgba(14,44,58,0.84), rgba(13,25,48,0.9)); box-shadow: inset 0 1px rgba(184,236,251,0.07), 0 10px 24px rgba(5,3,15,0.16); }
.mission-quartermaster-card .eyebrow { margin: 0; color: #8fdee4; font-size: .57rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-quartermaster-card-head { display: flex; align-items: center; gap: 9px; }
.mission-quartermaster-card-head strong { color: #eaf2f6; font: 600 .98rem/1 'Cinzel', serif; }
.mission-quartermaster-card-icon { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(143,222,228,0.54); color: #8fdee4; font-size: .8rem; box-shadow: 0 0 14px rgba(79,185,201,0.16); }
.mission-quartermaster-card-counts { color: #9fb4c2; font-size: .7rem; line-height: 1.45; }
.mission-quartermaster-card-boost { color: #9edba8; font-size: .66rem; font-weight: 600; }
.mission-quartermaster-card-link { color: #8fdee4; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.mission-quartermaster-card-link b { margin-left: 3px; font-size: .82rem; transition: transform .2s ease; }
.mission-quartermaster-card-link:hover b { display: inline-block; transform: translateX(3px); }
.mission-quartermaster-card-link:focus-visible { outline: 2px solid rgba(152,229,235,0.75); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mission-inventory-meter-track i, .mission-quartermaster-card-link b, .mission-inventory-card.is-legendary::after { transition: none; animation: none; }
}

/* ---------------------------------------------------------------------------
 * The stim belt: a grid of quick slots in the right rail, under the commander
 * card. Four across by default; research adds rows, so the column count is set
 * inline from the server's own figure rather than fixed here.
 * ------------------------------------------------------------------------ */
.mission-stim-belt-card { display: grid; gap: 10px; padding: 15px 16px 16px; border: 1px solid rgba(126,203,158,0.4); background: linear-gradient(148deg, rgba(18,44,34,0.78), rgba(13,25,48,0.9)); box-shadow: inset 0 1px rgba(196,244,212,0.07), 0 10px 24px rgba(5,3,15,0.16); }
.mission-stim-belt-card .eyebrow { margin: 0; color: #9edba8; font-size: .57rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-stim-belt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mission-stim-belt-head strong { color: #eaf6ee; font: 600 .98rem/1 'Cinzel', serif; }
.mission-stim-belt-count { color: #9fb4c2; font-size: .68rem; font-weight: 600; }
.mission-stim-belt-grid { display: grid; gap: 6px; }
.mission-stim-belt-note { margin: 0 !important; color: #9fb4c2 !important; font-size: .64rem !important; line-height: 1.45 !important; }

/* A slot is square, so the grid reads as a grid at any column count. */
.mission-stim-slot { position: relative; display: block; aspect-ratio: 1; width: 100%; padding: 0; border: 1px solid rgba(122,160,186,0.3); background: rgba(8,18,32,0.55); }
.mission-stim-slot.is-empty { display: grid; place-items: center; color: #6f8697; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.mission-stim-slot.is-empty:hover, .mission-stim-slot.is-empty:focus-visible { border-color: rgba(158,219,168,0.6); color: #9edba8; }
.mission-stim-slot-plus { font-size: 1rem; line-height: 1; }
.mission-stim-slot.is-filled { border-color: rgba(126,203,158,0.5); background: rgba(20,46,36,0.6); }
.mission-stim-slot.is-rare { border-color: rgba(112,204,223,0.55); }
.mission-stim-slot.is-legendary { border-color: rgba(226,178,92,0.6); }
/* The whole tile is the use target, so the click area matches what it looks
 * like. The clear affordance sits above it as a separate button. */
.mission-stim-slot-use { position: relative; display: grid; width: 100%; height: 100%; padding: 0; place-items: center; border: 0; background: none; color: inherit; cursor: pointer; }
/* No text label on the tile: a slot is 43px wide in the real 224px rail, which
 * fits neither the stim's name nor its effect label. The name lives in the
 * title and the aria-label; the icon's tint carries the effect. */
/* The artwork fills the whole tile; the built-in glyph does not. A line icon
 * scaled to 43px would read as a blown-up sketch, while an uploaded stim image
 * is the tile's whole identity now that there is no room for a label. */
.mission-stim-slot-icon { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; color: var(--stim-accent, #9edba8); }
.mission-stim-slot-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mission-stim-slot-icon svg { display: block; width: 24px; height: 24px; }
/* Arbitrary uploaded art can be any brightness, so the count carries its own
 * opaque pill rather than a gradient scrim. A scrim was tried first and fails
 * where it matters: at the top of the digit the gradient is only ~40% opaque,
 * which over a white image composites to a 2.2:1 reading. A flat fill is the
 * same ratio whatever is behind it, which is the only way to be sure. */
.mission-stim-slot.is-effect-fatigue { --stim-accent: #9edba8; }
.mission-stim-slot.is-effect-mission_speed { --stim-accent: #70ccdf; }
.mission-stim-slot.is-effect-luck { --stim-accent: #e3bc71; }
/* Bottom-left, opposite the clear button, so the two corner controls never sit
 * over each other however narrow the rail gets. */
.mission-stim-slot-count { position: absolute; z-index: 1; bottom: 2px; left: 2px; padding: 1px 4px; background: rgba(4,10,20,0.92); color: #eaf6ee; font-size: .58rem; font-weight: 700; line-height: 1.25; }
/* 18px rather than the 24px minimum used for standalone controls: this is a
 * secondary affordance layered on a 24px-plus tile whose own action is the
 * primary one, and a full-size button would cover the icon it sits over. It
 * stays keyboard-reachable, which is the part that matters. */
.mission-stim-slot-clear { position: absolute; top: -1px; right: -1px; display: grid; width: 18px; height: 18px; place-items: center; border: 0; background: rgba(8,18,32,0.85); color: #8ba3b4; font-size: .72rem; line-height: 1; cursor: pointer; }
.mission-stim-slot-clear:hover, .mission-stim-slot-clear:focus-visible { color: #e59a9a; }

@media (prefers-reduced-motion: reduce) {
  .mission-stim-slot.is-empty { transition: none; }
}

/* ---------------------------------------------------------------------------
 * The choice dialog: the in-site replacement for window.prompt() and
 * window.confirm(). Built on the same shell as the launch and result modals so
 * the three read as one surface.
 * ------------------------------------------------------------------------ */
.mission-choice-modal { width: min(420px, calc(100vw - 28px)); padding: 0; border: 1px solid rgba(105,213,222,0.5); color: var(--text); background: #100d22; box-shadow: 0 24px 90px rgba(0,0,0,0.7), 0 0 45px rgba(71,207,218,0.13); }
.mission-choice-modal::backdrop { background: rgba(3,4,12,0.8); backdrop-filter: blur(4px); }
.mission-choice-inner { position: relative; display: grid; gap: 12px; padding: 22px 22px 20px; }
.mission-choice-inner .eyebrow { margin: 0; color: #8fdee4; font-size: .57rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mission-choice-inner .eyebrow:empty { display: none; }
.mission-choice-inner h2 { margin: 0; color: #f0edf8; font: 600 1.15rem/1.25 'Cinzel', serif; }
#mission-choice-copy { margin: 0; color: #a9bdcb; font-size: .78rem; line-height: 1.5; }

.mission-choice-options { display: grid; gap: 6px; max-height: 44vh; overflow-y: auto; }
.mission-choice-options[hidden] { display: none; }
/* A row, not a card: the label and its figure sit on one line so a list of
 * eight crew stays scannable without scrolling. */
.mission-choice-option { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid rgba(122,160,186,0.32); background: rgba(10,20,38,0.5); color: #dfe9f1; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.mission-choice-option:hover { border-color: rgba(143,222,228,0.6); background: rgba(16,34,56,0.6); }
.mission-choice-option.is-active { border-color: rgba(143,222,228,0.85); background: rgba(20,52,66,0.62); box-shadow: inset 2px 0 rgba(143,222,228,0.9); }
.mission-choice-option-main { font-size: .84rem; font-weight: 600; }
.mission-choice-option-meta { flex: none; color: #90abba; font-size: .68rem; }
.mission-choice-option.is-active .mission-choice-option-meta { color: #b6d3de; }

.mission-choice-quantity { display: grid; gap: 6px; }
.mission-choice-quantity[hidden] { display: none; }
.mission-choice-quantity span { color: #90abba; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mission-choice-quantity input { width: 100%; padding: 9px 11px; border: 1px solid rgba(122,160,186,0.4); background: rgba(8,18,32,0.7); color: #eaf2f6; font: inherit; }
.mission-choice-quantity input:focus { border-color: rgba(143,222,228,0.85); outline: none; box-shadow: 0 0 0 3px rgba(79,185,201,0.18); }

/* The shared error line reserves 20px so a validation message cannot shift the
 * buttons under a cursor already moving towards them. Its own bottom margin is
 * dropped here because this dialog is a grid with its own gap, and the two
 * together left a visible hole above the actions on every ordinary open. */
.mission-choice-inner .mission-launch-error { margin: 0; }
/* Same reason: the shared action bar carries its own top margin for the two
 * long modals, and this grid already spaces its rows. */
.mission-choice-inner .mission-launch-actions { margin-top: 0; }

/* Destroying is irreversible, so its confirm reads as the destructive action it
 * is rather than as the same teal Save button every other modal ends with. */
#mission-choice-confirm.is-danger { border-color: rgba(224,138,138,0.7); background: rgba(120,38,38,0.55); color: #f6d8d8; }
#mission-choice-confirm.is-danger:hover, #mission-choice-confirm.is-danger:focus-visible { border-color: rgba(240,170,170,0.9); background: rgba(150,48,48,0.65); color: #ffecec; }

@media (prefers-reduced-motion: reduce) {
  .mission-choice-option { transition: none; }
}

/* ---------------------------------------------------------------------------
 * "Protocols ready" mark on the Research Facility card.
 * ------------------------------------------------------------------------ */
/* community.css defines the same utility, but public.css does not import it and
 * this page is served by public.css -- see css/SOURCES.md. Same name rather
 * than a second one, so the two bundles stay consistent. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Sits on the card's own corner rather than inside its padding, so it reads as
 * a status pinned to the card instead of a character in the copy. The card is
 * an <a>; the mark is a span inside it, so the whole card stays one link and
 * the tooltip needs no separate focus stop. */
.mission-research-card { position: relative; }
.mission-research-card-alert { position: absolute; top: -7px; right: -7px; z-index: 1; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(255,214,138,0.85); border-radius: 50%; background: #b8862c; color: #1a1206; font: 700 .82rem/1 'Jost', sans-serif; box-shadow: 0 0 14px rgba(226,178,92,0.45); }
.mission-research-card-alert[hidden] { display: none; }
/* A slow pulse: enough to catch the eye on a page the player is scanning, not
 * enough to compete with the live command feed beside it. */
.mission-research-card-alert::before { content: ''; position: absolute; inset: -4px; border: 1px solid rgba(226,178,92,0.6); border-radius: 50%; animation: mission-research-alert-pulse 2.6s ease-out infinite; }
@keyframes mission-research-alert-pulse {
  0% { opacity: .75; transform: scale(.82); }
  70% { opacity: 0; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .mission-research-card-alert::before { animation: none; opacity: .5; transform: none; }
}

/* ===========================================================================
 * Crew debrief: what a promotion bought, and making one look like an event.
 * ========================================================================= */

/* --- The role bonus, before and after -------------------------------------
 * The stat delta is abstract; this is the line that says what changes about
 * the next operation, so it gets the gold and the weight. */
.mission-result-crew-role { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; color: #c3b184; font-size: 0.63rem; }
.mission-result-crew-role b { color: #8d7f5e; font-size: 0.7rem; }
.mission-result-crew-role strong { color: #ffe6ad; font-weight: 600; }

/* --- The stat row ---------------------------------------------------------
 * Drawn for every crew member, promoted or not: a delta with no absolute
 * beside it has nothing to be a delta of, and the debrief showed no crew stat
 * at all before this. Four fixed cells so the row scans down the list. */
.mission-result-crew-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 2px 0 0; }
.mission-result-crew-stats b { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 4px; padding: 3px 2px; border: 1px solid rgba(90,149,185,0.22); background: rgba(4,10,20,0.5); color: #7f9bad; font: 600 0.53rem/1 'Jost', sans-serif; letter-spacing: 0.07em; }
.mission-result-crew-stats b i { color: #dce8f2; font-size: 0.68rem; font-style: normal; }
/* A stat nobody has is dimmed by a measured colour step, never by opacity: opacity
 * composites the text AND its own background, so a contrast sampler reads the
 * undimmed pair and reports a pass. This cell measured 6.82:1 that way and 2.76:1
 * in reality -- the same compounding trap the Neoh weather card hit. */
.mission-result-crew-stats b.is-zero { color: #6d8698; }
.mission-result-crew-stats b.is-zero i { color: #8ea6b6; }
/* A stat that moved is the point of the row, so it is marked by colour and a
 * printed delta rather than by opacity, which no contrast check can see. */
.mission-result-crew-stats b.is-up { border-color: rgba(235,209,138,0.55); background: rgba(58,44,16,0.55); color: #d8c58f; }
.mission-result-crew-stats b.is-up i { color: #ffe6ad; }
.mission-result-crew-stats b u { color: #9edba8; font-size: 0.55rem; text-decoration: none; }

/* --- A promotion should read as an event ----------------------------------
 * Four identical cards with one gold word between them did not. The promoted
 * row gets a gold leading edge, a lift, and one arrival pass -- backwards fill
 * from a visible base, so a frame that never comes leaves the card correct. */
.mission-result-crew.is-promoted { position: relative; border-left-width: 3px; box-shadow: 0 0 16px rgba(224,178,74,0.12); }
.mission-result-crew.is-promoted::before { content: ''; position: absolute; top: -1px; bottom: -1px; left: -3px; width: 3px; background: linear-gradient(180deg, #ffe6ad, #d88758); box-shadow: 0 0 9px rgba(236,201,135,0.6); }
@keyframes mission-promo-in { from { transform: translateY(6px); box-shadow: 0 0 0 rgba(224,178,74,0); } }
.mission-result-crew.is-promoted { animation: mission-promo-in 0.45s ease-out backwards; }
.mission-result-crew.is-promoted:nth-child(2) { animation-delay: 0.07s; }
.mission-result-crew.is-promoted:nth-child(3) { animation-delay: 0.14s; }
.mission-result-crew.is-promoted:nth-child(4) { animation-delay: 0.21s; }

@media (max-width: 520px) {
  .mission-result-crew-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mission-result-crew.is-promoted { animation: none; }
}

/* ===========================================================================
 * Crew rarity on the roster card, and the recruit reveal.
 *
 * One tone per rarity, reusing the --gear-tier triple the item surfaces
 * already use so the same five words are the same five colours everywhere.
 * Common is deliberately plain white: it is the absence of rarity, and giving
 * it a hue of its own would make four tiers look like five.
 * ========================================================================= */

.mission-crew-card { --rarity: var(--gear-tier, 150,168,186); }
.mission-crew-card.is-tier-common { --gear-tier: 226,232,240; }
.mission-crew-card.is-tier-uncommon { --gear-tier: 158,219,168; }
.mission-crew-card.is-tier-rare { --gear-tier: 112,204,223; }
.mission-crew-card.is-tier-epic { --gear-tier: 205,124,236; }
.mission-crew-card.is-tier-legendary { --gear-tier: 233,211,153; }

.mission-crew-card { border-color: rgba(var(--rarity), 0.42); }
.mission-crew-card:hover { border-color: rgba(var(--rarity), 0.7); }
/* The tone reaches the inside of the card too, or a rarity is a border and
 * nothing else -- the rank plate and the role chip are the two elements every
 * card has, so they carry it. */
.mission-crew-card .crew-role { color: rgb(var(--rarity)); }
.mission-crew-card .crew-rank-insignia { border-color: rgba(var(--rarity), 0.45); }

/* --- The tier tag ---------------------------------------------------------
 * Colour alone says nothing to a colour-blind reader, and is ambiguous to
 * everyone else -- purple could be epic, or Cunning, or a selected state. The
 * word is the signal; the colour only makes it quicker. */
.mission-crew-tier { position: absolute; z-index: 2; top: 0; left: 0; padding: 3px 9px 3px 8px; border-right: 1px solid rgba(var(--rarity), 0.5); border-bottom: 1px solid rgba(var(--rarity), 0.5); background: rgba(6,12,24,0.92); color: rgb(var(--rarity)); font: 700 0.5rem/1 'Jost', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.mission-crew-card.is-tier-legendary .mission-crew-tier { color: #ffe6ad; }

/* --- The portrait ring ----------------------------------------------------
 * Where rarity reads loudest. A 1px card border does not carry down a grid of
 * eight; a ring around the face does, because that is where the eye lands. */
.mission-crew-card .mission-crew-portrait-wrap { position: relative; box-shadow: 0 0 0 2px rgba(var(--rarity), 0.55), 0 0 14px rgba(var(--rarity), 0.18); }
.mission-crew-card.is-tier-common .mission-crew-portrait-wrap { box-shadow: 0 0 0 2px rgba(var(--rarity), 0.4); }

/* --- Epic: the sweep the card already had, always on -----------------------
 * .mission-crew-card::after is a diagonal sheen that has always existed at
 * opacity 0 and only appeared on hover. Epic runs it slowly by itself instead
 * of adding a second effect that does the same thing. */
@keyframes crew-rarity-sweep { 0% { opacity: 0; transform: translateX(-42%) skewX(-12deg); } 12% { opacity: 1; } 60% { opacity: 0; transform: translateX(42%) skewX(-12deg); } 100% { opacity: 0; transform: translateX(42%) skewX(-12deg); } }
.mission-crew-card.is-tier-epic::after { background: linear-gradient(108deg, transparent 44%, rgba(205,124,236,0.05) 47%, rgba(224,160,255,0.26) 50%, rgba(205,124,236,0.05) 53%, transparent 56%); }
.mission-crew-card.is-tier-epic.is-animated::after { animation: crew-rarity-sweep 7s ease-in-out infinite; }
.mission-crew-card.is-tier-epic .mission-crew-portrait-wrap { box-shadow: 0 0 0 2px rgba(var(--rarity), 0.7), 0 0 20px rgba(var(--rarity), 0.34); }

/* --- Legendary: three layers, because "more wow" is more kinds of thing ----
 * A brighter sweep would only read as a brighter epic. A drifting gradient
 * edge, a rotating glow behind the face, and motes are three different
 * behaviours, which is what makes it read as a different class of object. */
.mission-crew-card.is-tier-legendary { border-color: transparent; background-image: linear-gradient(130deg, rgba(16,33,57,0.92), rgba(22,13,45,0.86)), linear-gradient(115deg, #ecc987, #fff2cf, #d88758, #ecc987); background-origin: border-box; background-clip: padding-box, border-box; background-size: auto, 300% 100%; }
@keyframes crew-legendary-edge { to { background-position: 0 0, 300% center; } }
.mission-crew-card.is-tier-legendary { background-position: 0 0, 0% center; }
.mission-crew-card.is-tier-legendary.is-animated { animation: crew-legendary-edge 9s linear infinite; }
.mission-crew-card.is-tier-legendary::after { background: linear-gradient(108deg, transparent 42%, rgba(236,201,135,0.07) 46%, rgba(255,238,194,0.34) 50%, rgba(236,201,135,0.07) 54%, transparent 58%); }
.mission-crew-card.is-tier-legendary.is-animated::after { animation: crew-rarity-sweep 6s ease-in-out infinite; }
.mission-crew-card.is-tier-legendary .mission-crew-portrait-wrap { box-shadow: 0 0 0 2px rgba(255,230,173,0.8), 0 0 24px rgba(236,201,135,0.4); }
.mission-crew-card.is-tier-legendary .mission-crew-portrait-wrap::before { content: ''; position: absolute; z-index: -1; inset: -8px; background: conic-gradient(from 0deg, transparent, rgba(255,230,173,0.5), transparent 42%, rgba(216,135,88,0.45), transparent 82%); filter: blur(5px); opacity: 0.75; }
.mission-crew-card.is-tier-legendary.is-animated .mission-crew-portrait-wrap::before { animation: crew-legendary-halo 11s linear infinite; }
@keyframes crew-legendary-halo { to { transform: rotate(360deg); } }
/* The motes are one repeating-gradient layer drifting, not particles: a canvas
 * per card on a roster of eight would be eight tickers for decoration. */
.mission-crew-card.is-tier-legendary .mission-crew-visual::after { content: ''; position: absolute; inset: -20% -10%; background-image: radial-gradient(circle, rgba(255,238,194,0.55) 0 1px, transparent 1.6px), radial-gradient(circle, rgba(236,201,135,0.4) 0 1px, transparent 1.6px); background-size: 46px 58px, 71px 83px; background-position: 0 0, 22px 31px; opacity: 0.5; pointer-events: none; }
.mission-crew-card.is-tier-legendary.is-animated .mission-crew-visual::after { animation: crew-legendary-motes 17s linear infinite; }
@keyframes crew-legendary-motes { to { background-position: 0 -58px, 22px -52px; } }
.mission-crew-card .mission-crew-visual { position: relative; }

/* --- The favourite star, moved off the border ------------------------------
 * .is-favorite used to tint the card border gold, which is now what legendary
 * means -- a favourited common and a legendary would have read the same. The
 * state moves onto the star itself, which is the control it belongs to. */
.mission-crew-card.is-favorite { border-color: rgba(var(--rarity), 0.55); box-shadow: none; }

@media (hover: hover) {
  .mission-crew-card.is-tier-epic:not(.is-unavailable):hover::after,
  .mission-crew-card.is-tier-legendary:not(.is-unavailable):hover::after { animation: mission-crew-holo-sweep 1.35s ease-out both; }
}

@media (prefers-reduced-motion: reduce) {
  .mission-crew-card.is-animated,
  .mission-crew-card.is-animated::after,
  .mission-crew-card.is-animated .mission-crew-portrait-wrap::before,
  .mission-crew-card.is-animated .mission-crew-visual::after { animation: none; }
}

/* ===========================================================================
 * The recruit reveal: arriving crew, as an event.
 * ========================================================================= */

.mission-result-recruits { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.mission-result-recruit { --rarity: 226,232,240; position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 11px; overflow: hidden; padding: 11px; border: 1px solid rgba(var(--rarity), 0.5); background: linear-gradient(135deg, rgba(14,28,49,0.9), rgba(20,12,40,0.9)); }
.mission-result-recruit.is-tier-uncommon { --rarity: 158,219,168; }
.mission-result-recruit.is-tier-rare { --rarity: 112,204,223; }
.mission-result-recruit.is-tier-epic { --rarity: 205,124,236; }
.mission-result-recruit.is-tier-legendary { --rarity: 233,211,153; }
.mission-result-recruit-face { position: relative; display: grid; width: 52px; height: 52px; overflow: hidden; place-items: center; border: 1px solid rgba(var(--rarity), 0.6); background: rgba(6,14,26,0.85); box-shadow: 0 0 12px rgba(var(--rarity), 0.22); }
.mission-result-recruit-face img { width: 100%; height: 100%; object-fit: cover; }
.mission-result-recruit-face span { color: rgb(var(--rarity)); font: 600 1.1rem/1 'Cinzel', serif; }
.mission-result-recruit-copy { display: grid; align-content: center; gap: 2px; min-width: 0; }
.mission-result-recruit-copy small { color: rgb(var(--rarity)); font: 700 0.5rem/1 'Jost', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.mission-result-recruit-copy strong { overflow: hidden; color: #f2f6fb; font: 600 0.86rem/1.2 'Cinzel', serif; text-overflow: ellipsis; white-space: nowrap; }
.mission-result-recruit-copy em { color: #9db4c6; font-size: 0.63rem; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }

/* Every rarity gets an arrival, because a new crew member is an event at any
 * rarity. They differ in how much arrives: a common card settles, an epic one
 * is swept, a legendary one is struck. `backwards` fill from a visible base
 * throughout, so a frame that never comes leaves a correct card. */
@keyframes recruit-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.mission-result-recruit { animation: recruit-in 0.5s cubic-bezier(.2,.8,.3,1) backwards; }
.mission-result-recruit:nth-child(2) { animation-delay: 0.1s; }
.mission-result-recruit:nth-child(3) { animation-delay: 0.2s; }
.mission-result-recruit:nth-child(4) { animation-delay: 0.3s; }

/* A flash across the frame, timed to land as the card settles. */
.mission-result-recruit::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(108deg, transparent 40%, rgba(var(--rarity), 0.3) 50%, transparent 60%); opacity: 0; pointer-events: none; }
@keyframes recruit-flash { 0% { opacity: 0; transform: translateX(-60%); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
.mission-result-recruit::before { animation: recruit-flash 0.9s ease-out 0.15s 1 backwards; }

/* Epic: the flash again, slower and twice, plus a bloom that opens behind the
 * portrait -- two more beats than a common arrival, not a louder one. */
@keyframes recruit-bloom { 0% { opacity: 0; transform: scale(0.4); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(1.9); } }
.mission-result-recruit.is-tier-epic::before { animation: recruit-flash 1.1s ease-out 0.15s 2 backwards; }
.mission-result-recruit.is-tier-epic .mission-result-recruit-face::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(224,160,255,0.85), transparent 68%); opacity: 0; pointer-events: none; animation: recruit-bloom 1.3s ease-out 0.2s 1 backwards; }

/* Legendary: the bloom, a struck ring that expands past the frame, and a
 * lingering halo the other tiers never get -- three behaviours, so it reads as
 * a different kind of arrival rather than a brighter one. */
.mission-result-recruit.is-tier-legendary { border-width: 2px; }
.mission-result-recruit.is-tier-legendary::before { animation: recruit-flash 1.2s ease-out 0.15s 3 backwards; }
.mission-result-recruit.is-tier-legendary .mission-result-recruit-face::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,244,214,0.95), transparent 66%); opacity: 0; pointer-events: none; animation: recruit-bloom 1.5s ease-out 0.15s 1 backwards; }
@keyframes recruit-strike { 0% { opacity: 0.9; transform: scale(0.25); } 100% { opacity: 0; transform: scale(2.6); } }
.mission-result-recruit.is-tier-legendary .mission-result-recruit-face::before { content: ''; position: absolute; z-index: 2; inset: 0; border: 2px solid rgba(255,238,194,0.9); border-radius: 50%; opacity: 0; pointer-events: none; animation: recruit-strike 1.1s ease-out 0.25s 2 backwards; }
@keyframes recruit-halo { from { opacity: 0; } }
.mission-result-recruit.is-tier-legendary { box-shadow: 0 0 22px rgba(236,201,135,0.28), inset 0 0 26px rgba(236,201,135,0.08); animation: recruit-in 0.6s cubic-bezier(.2,.8,.3,1) backwards, recruit-halo 1.6s ease-out backwards; }

@media (prefers-reduced-motion: reduce) {
  .mission-result-recruit,
  .mission-result-recruit::before,
  .mission-result-recruit .mission-result-recruit-face::before,
  .mission-result-recruit .mission-result-recruit-face::after { animation: none; }
  .mission-result-recruit::before { opacity: 0; }
}

/* The Salvage Sweep rail card. Same object as the Market card -- the accent is
 * the only difference, so the two read as siblings rather than as two designs. */
.mission-sweep-card { border-color: rgba(158,219,168,0.42); }
.mission-sweep-card .mission-market-card-icon { color: #9edba8; }
.mission-sweep-card:hover, .mission-sweep-card:focus-visible { border-color: rgba(158,219,168,0.75); }

/* --- Authored item level -------------------------------------------------
 * Rarity says how a find feels; iLvl says where it sits in the equipment
 * progression. Keeping the latter as a compact badge makes both readable at a
 * glance without conflating two different systems. */
.mission-item-ilvl { display: inline-flex; align-items: baseline; gap: 3px; padding: 2px 5px; border: 1px solid rgba(126,203,158,.68); background: rgba(17,58,41,.76); color: #a9e8bc; font: 800 .56rem/1 'Jost', sans-serif; letter-spacing: .045em; text-shadow: 0 0 8px rgba(126,203,158,.35); white-space: nowrap; }
.mission-item-ilvl small { color: #83be94; font: 700 .42rem/1 'Jost', sans-serif; letter-spacing: .08em; text-transform: uppercase; }.mission-item-ilvl b { color: #c9f4d3; font-size: .68rem; }
.mission-gear-slot { position: relative; }.mission-gear-slot-ilvl { position: absolute; z-index: 1; right: 1px; bottom: 1px; gap: 1px; padding: 1px 2px; border-width: 0; background: rgba(3,10,20,.9); font-size: .35rem; }.mission-gear-slot-ilvl small { display: none; }.mission-gear-slot-ilvl b { font-size: .43rem; }
.mission-loadout-slot-ilvl { position: absolute; right: 5px; bottom: 5px; z-index: 2; border-color: rgba(126,203,158,.78); background: rgba(5,17,29,.9); box-shadow: 0 1px 5px rgba(0,0,0,.48); }.mission-loadout-slot-ilvl small { font-size: .4rem; }.mission-loadout-slot-ilvl b { font-size: .62rem; }
.mission-inventory-ilvl { margin-left: 5px; vertical-align: middle; }.mission-inventory-icon, .mission-loadout-option-icon, .mission-result-gear-icon { position: relative; }.mission-inventory-icon-ilvl, .mission-loadout-option-ilvl, .mission-result-gear-icon .mission-item-ilvl { position: absolute; right: 1px; bottom: 1px; padding: 1px 2px; border-width: 0; background: rgba(3,10,20,.9); }.mission-inventory-icon-ilvl small, .mission-loadout-option-ilvl small, .mission-result-gear-icon .mission-item-ilvl small { display: none; }.mission-inventory-icon-ilvl b, .mission-loadout-option-ilvl b, .mission-result-gear-icon .mission-item-ilvl b { font-size: .48rem; }

/* Average iLvl is deliberately green until a crew has every enabled,
 * currently compatible slot maximum. Only that full state earns the warmer
 * legendary treatment. */
.crew-item-level { display: inline-flex; align-items: baseline; gap: 4px; margin: 1px 0 2px; padding: 3px 6px; border: 1px solid rgba(126,203,158,.58); background: rgba(16,54,38,.45); color: #9edba8; cursor: help; font-family: 'Jost', sans-serif; line-height: 1; }.crew-item-level small { color: #88bf97; font-size: .45rem; font-weight: 800; letter-spacing: .1em; }.crew-item-level strong { color: #c9f3d3; font: 700 .76rem/1 'Cinzel', serif; }.crew-item-level em { color: #8bb99a; font-size: .51rem; font-style: normal; font-weight: 700; }.crew-item-level.is-legendary { border-color: rgba(255,230,173,.9); background: linear-gradient(110deg, rgba(91,63,20,.58), rgba(47,31,16,.62)); box-shadow: 0 0 14px rgba(236,201,135,.24), inset 0 0 12px rgba(255,230,173,.08); }.crew-item-level.is-legendary small, .crew-item-level.is-legendary em { color: #f0cf83; }.crew-item-level.is-legendary strong { color: #fff0c2; text-shadow: 0 0 9px rgba(255,230,173,.52); }

/* List mode gains a real iLvl column and defaults to the high-to-low sort.
 * The grid keeps the column out of the DOM flow, avoiding a wider card merely
 * because the same item can also be read in a dense list. */
.mission-inventory-list-ilvl { display: none; }.missions-inventory-grid.is-list .mission-inventory-list-head { display: grid; grid-template-columns: minmax(0,1fr) 66px; gap: 8px; padding: 0 11px 3px 50px; color: #7896a6; font: 800 .48rem/1 'Jost', sans-serif; letter-spacing: .12em; text-transform: uppercase; }.missions-inventory-grid.is-list .mission-inventory-list-head span:last-child { text-align: right; }.missions-inventory-grid.is-list .mission-inventory-card { grid-template-columns: 38px minmax(0,1fr) 66px; }.missions-inventory-grid.is-list .mission-inventory-list-ilvl { display: grid; align-self: start; justify-self: end; min-width: 58px; margin-top: 3px; padding: 4px 5px; border: 1px solid rgba(105,146,169,.28); background: rgba(6,15,28,.64); color: #718a9a; font: 800 .56rem/1 'Jost', sans-serif; letter-spacing: .035em; text-align: center; }.missions-inventory-grid.is-list .mission-inventory-list-ilvl.is-gear { border-color: rgba(126,203,158,.6); background: rgba(16,57,39,.56); color: #a9e8bc; }.missions-inventory-grid.is-list .mission-inventory-ilvl { display: none; }
@media (max-width: 470px) { .missions-inventory-grid.is-list .mission-inventory-card { grid-template-columns: 34px minmax(0,1fr) 58px; }.missions-inventory-grid.is-list .mission-inventory-list-head { grid-template-columns: minmax(0,1fr) 58px; padding-left: 45px; }.missions-inventory-grid.is-list .mission-inventory-list-ilvl { min-width: 52px; font-size: .5rem; } }