/* HYSEC Universe missions: list rows and the mission page. Loaded after hysec-universe-ui.css. */

/* ---------- List ---------- */

/* Second filter row: where, legality and blueprint rewards, one click each. */
.hss-shell .hsu-filter-fields > .hsm-scopes { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-2) var(--hsu-space-3); }

.hsm-list { transition: opacity 160ms ease; }
.hsm-list.is-refreshing { opacity: 0.55; }
.hss-shell .hsm-row { padding-block: 12px; }
.hss-shell .hsm-row .hsu-row-main small { color: var(--hsu-text-muted); }
.hsm-row-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* Reward and blueprints line up across rows. */
.hss-shell .hsm-row .hsu-row-facts { flex-wrap: nowrap; gap: var(--hsu-space-5); }
.hss-shell .hsm-row .hsm-fact-reward { min-width: 132px; align-items: flex-end; text-align: right; }
.hss-shell .hsm-row .hsm-fact-reward dd { color: var(--hsu-text-strong); font-size: var(--hsu-text-md); font-weight: 650; }
.hss-shell .hsm-row .hsm-fact-blueprints { min-width: 76px; align-items: flex-end; text-align: right; }
.hss-shell .hsm-row .hsm-fact-blueprints dd { color: var(--hsu-text-faint); }
.hss-shell .hsm-row .hsm-fact-blueprints dd.has { color: var(--hsu-accent-strong); font-weight: 650; }

/* ---------- Mission page ---------- */

.hsm-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hss-shell .hsm-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--hsu-space-6); }
.hss-shell .hsm-figures .hsu-figure { align-content: start; }
.hss-shell .hsm-figures .hsu-figure strong { overflow-wrap: anywhere; }

.hsm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    grid-template-areas: "main access";
    gap: var(--hsu-space-6) 48px;
    align-items: start;
}
.hsm-main { grid-area: main; min-width: 0; }

/* Whether the member may take the mission, beside the rewards. */
.hsm-access {
    grid-area: access;
    position: sticky;
    top: 0;
    padding-left: var(--hsu-space-5);
    border-left: 1px solid var(--hsu-line);
}
.hsm-access h2 { margin: 0 0 var(--hsu-space-3); color: var(--hsu-text-strong); font-size: var(--hsu-text-lg); font-weight: 650; }
.hsm-access dl { margin: 0; }
.hsm-access-none { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 0; border-top: 1px solid var(--hsu-line); color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
.hsm-access-none .mud-icon-root { color: var(--hsu-ok); }
.hsm-access dl > div { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--hsu-line); }
.hsm-access dt { display: flex; align-items: center; gap: 8px; color: var(--hsu-text-faint); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.hsm-access dt .mud-icon-root { color: var(--hsu-accent); font-size: 1rem; }
.hsm-access dd { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0 0 0 24px; color: var(--hsu-text); font-size: var(--hsu-text-sm); line-height: 1.5; }
.hsm-contract {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border: 0;
    color: var(--hsu-accent-strong);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.hsm-contract .mud-icon-root { font-size: 0.9rem; opacity: 0.7; }
.hsm-contract:hover { text-decoration: underline; text-underline-offset: 3px; }
.hss-shell .hsm-contract:focus-visible { outline: 2px solid var(--hsu-accent); outline-offset: 2px; }

.hsm-briefing p {
    max-width: 78ch;
    margin: 0 0 var(--hsu-space-2);
    color: var(--hsu-text);
    font-size: var(--hsu-text-md);
    line-height: 1.75;
    white-space: pre-line;
}
/* Long briefings start as a preview that fades out; the full text is one click away. */
.hsm-briefing.clamped p {
    max-height: 12.5em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
    mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

@container hss-suite (max-width: 1100px) {
    .hss-shell .hsm-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hss-shell .hsm-figures .hsu-figure:nth-child(3) { padding-left: 0; border-left: 0; }
    .hss-shell .hsm-figures .hsu-figure:nth-child(n + 3) { border-top: 1px solid var(--hsu-line); }
}

@container hss-suite (max-width: 900px) {
    /* Narrow windows: requirements first, then rewards and briefing. */
    .hsm-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "access" "main"; gap: var(--hsu-space-5); }
    .hsm-access { position: static; padding-left: 0; border-left: 0; }
}

@container hss-suite (max-width: 640px) {
    .hss-shell .hsm-row .hsu-row-facts { justify-content: flex-start; }
    .hss-shell .hsm-row :is(.hsm-fact-reward, .hsm-fact-blueprints) { min-width: 0; align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .hsm-list { transition: none; }
}