/* ═══════════════════════════════════════════════════════════════
   MISSIONS (missions.php)
   Builds on css/character.css (cd-* tokens, panels, tabs, the .it-* item
   chips from mhui_item_html and .tb-search / .tb-fchip); everything here is
   ms-* (missions) / lb-* (login bonuses) scoped. Static by design: no
   loader, no animation beyond hover / open feedback.
   ═══════════════════════════════════════════════════════════════ */

.ms { display: grid; gap: 18px; align-content: start; }   /* main grows to the viewport (flex: 1); keep rows from stretching when the list is short */
.ms > * { min-width: 0; }

/* ── Page head ─────────────────────────────────────────────────── */
.ms-head { margin-top: 10px; }
.ms-h1 {
    margin: 0;
    font: 400 clamp(1.9rem, 6vw, 2.6rem)/1.1 var(--font-display);
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 2px 14px color-mix(in srgb, var(--acc) 45%, transparent);
}
.cd-jp .ms-h1 { letter-spacing: 0; }
.ms-lead { margin: 8px 0 0; max-width: 72ch; font-size: 0.92rem; color: var(--text-2); }

/* ── Tab bar: a 3 × 3 grid on phones, one wrapping row of pills from 760px ── */
.ms-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ms-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 7px 6px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--panel-bg);
    color: var(--text-2) !important;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ms-tab small { font-size: 0.7rem; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ms-tab:hover { border-color: var(--acc2); color: #fff !important; }
.ms-tab.is-active { background: var(--acc); border-color: var(--acc2); color: var(--acc-ink) !important; box-shadow: 0 2px 12px color-mix(in srgb, var(--acc) 50%, transparent); }
.ms-tab.is-active small { color: inherit; opacity: 0.8; }
.ms-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 760px) {
    .ms-tabs { display: flex; flex-wrap: wrap; }
    .ms-tab { flex-direction: row; gap: 6px; padding: 7px 14px; border-radius: 999px; }
}

/* ── Panel tools ───────────────────────────────────────────────── */
.ms-h2-y { color: var(--text-2); }
.ms-years { margin: 0 0 14px; }
.ms-years .cd-tab { display: inline-block; text-decoration: none; }
.ms-tools { display: grid; gap: 8px; margin: 0 0 14px; }
.ms-search { max-width: 460px; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-count { margin: 0; min-height: 1.2em; font-size: 0.78rem; color: var(--text-3); }
.ms-count:empty { display: none; }
.ms-empty { margin: 14px 0 0; padding: 16px; border-radius: 10px; background: rgba(0, 0, 0, 0.2); color: var(--text-2); text-align: center; }

/* ── Groups (one event, Climax run, Special window, stage…) ─────── */
.ms-groups { display: grid; gap: 10px; }
.ms-g {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
}
.ms-flat { border: 0; background: none; }
.ms-gs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 40px 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    list-style: none;
}
.ms-gs::-webkit-details-marker { display: none; }
.ms-gs::after {                         /* chevron */
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -7px;
    border-right: 2px solid var(--text-2);
    border-bottom: 2px solid var(--text-2);
    transform: rotate(45deg);
    transition: transform 0.2s;
}
details[open] > .ms-gs::after { margin-top: -2px; transform: rotate(225deg); }
.ms-gs:hover { background: rgba(255, 255, 255, 0.03); }
.ms-gs:hover::after { border-color: #fff; }
.ms-gs:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
details[open] > .ms-gs { border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px 10px 0 0; }
.ms-gb { display: block; flex: none; width: 142px; height: auto; aspect-ratio: 284 / 124; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
.ms-gt { display: grid; gap: 3px; min-width: 0; }
.ms-gn { font-weight: 700; font-size: 0.98rem; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.ms-gm { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 0.78rem; color: var(--text-3); }
.ms-gm .ms-when { color: var(--text-2); }
.ms-gn .ms-when { color: #fff; }
.ms-gbd { padding: 4px 12px 12px; }
.ms-flat > .ms-sec:first-child .ms-sec-h { margin-top: 0; }
.ms-glinks { margin: 10px 0 2px; }
.ms-glinks .cd-btn { padding: 5px 12px; font-size: 0.8rem; }
@media (max-width: 479px) {
    .ms-gs { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ms-gb { width: min(100%, 240px); }
    .ms-gs::after { top: 22px; }
    .ms-gbd { padding: 4px 10px 10px; }
}

/* ── Sections (Daily / Ongoing, Difficulty B / A / S, months) ──── */
.ms-sec + .ms-sec { margin-top: 12px; }
.ms-sec-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin: 10px 0 4px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
}
.cd-jp .ms-sec-h { letter-spacing: 0; }
.ms-sec-h .ms-when { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); }

/* ── Mission rows ──────────────────────────────────────────────── */
.ms-list { margin: 0; padding: 0; list-style: none; }
.ms-list > li + li { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ms-m {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px 16px;
    padding: 9px 2px;
}
@media (min-width: 700px) {
    .ms-m { grid-template-columns: minmax(0, 1fr) minmax(190px, 250px); align-items: center; }
}
.ms-mt { min-width: 0; }
.ms-t { margin: 0; font-size: 0.9rem; line-height: 1.45; color: #e3eaf8; overflow-wrap: anywhere; }
.ms-tag {
    display: inline-block;
    padding: 0 6px;
    border-radius: 4px;
    background: rgba(255, 213, 83, 0.13);
    color: var(--gold);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 1px;
}
.ms-x, .ms-sh { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin: 3px 0 0; font-size: 0.74rem; line-height: 1.4; color: var(--text-3); }
.ms-sh { margin: 0 0 2px; }
.ms-cat { font-weight: 600; color: var(--text-2); }
.ms-cnt { font-weight: 600; color: var(--text-2); }
.ms-b { padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-weight: 600; white-space: nowrap; }
.ms-b-daily { color: #8fd3ff; }
.ms-b-after { color: var(--enh); cursor: help; }
.ms-b-rec { background: rgba(255, 213, 83, 0.13); color: var(--gold); }
.ms-b-jp { background: rgba(255, 90, 120, 0.15); color: #ff9db0; cursor: help; }
.ms-goal { font-weight: 600; color: var(--up); }
.ms-add { color: var(--text-3); }
.ms-when { color: var(--text-2); }
.ms-when time { white-space: nowrap; }
.ms-when.ms-pre { color: #ff9db0; cursor: help; }   /* closed before launch (never live) */

.ms-rw { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ms-rw .it { max-width: 100%; }
.ms-rw .it-ic { width: 34px; }
.ms-rw .it-n { font-size: 0.84rem; }

/* Multi-step series: a numbered chain with a rail on the left. */
.ms-s.is-multi { padding: 10px 0 4px; }
.ms-st { margin: 0; padding: 0; list-style: none; }
.is-multi .ms-st { margin-left: 2px; border-left: 2px solid color-mix(in srgb, var(--acc2) 40%, transparent); }
.is-multi .ms-m { grid-template-columns: 30px minmax(0, 1fr); padding: 6px 2px 6px 0; }
.is-multi .ms-m::before {
    content: attr(data-n);              /* the real step number, so it survives search filtering */
    grid-row: span 2;
    padding-top: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-3);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.is-multi .ms-st > li + li { border-top: 1px dashed rgba(255, 255, 255, 0.05); }
@media (min-width: 700px) {
    .is-multi .ms-m { grid-template-columns: 30px minmax(0, 1fr) minmax(190px, 250px); }
    .is-multi .ms-m::before { grid-row: auto; }
}
.ms-more { margin-top: 2px; }
.ms-more > summary {
    display: inline-block;
    margin: 4px 0 4px 6px;
    padding: 3px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: var(--text-2);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.ms-more > summary::-webkit-details-marker { display: none; }
.ms-more > summary:hover { border-color: var(--acc2); color: #fff; }
.ms-more > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ms-more[open] > summary { display: none; }

/* Rewards with no icon anywhere (Club Points, a few wallpapers): a text chip / tile. */
.ms-noic.it-chip { padding: 1px 8px; border: 1px dashed rgba(255, 255, 255, 0.22); border-radius: 6px; }
.ms-noic.it-chip .it-n { font-size: 0.8rem; }
.ms-noic.it-tile {
    display: grid;
    place-items: center;
    width: 48px;
    aspect-ratio: 1;
    padding: 2px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    text-align: center;
}
.ms-noic.it-tile { color: var(--text-3); }

/* ── Login bonus sheets ────────────────────────────────────────── */
.lb-sheet .ms-m { display: block; padding: 10px 2px; }
.lb-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0 0 8px; font-size: 0.8rem; }
.lb-wk { margin-right: 4px; font-weight: 700; color: var(--gold); }
.lb-sep { color: var(--text-3); }
.lb-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .lb-days { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.lb-day {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 3px;
    min-width: 0;
    padding: 5px 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
}
.lb-dn { font-size: 0.66rem; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.lb-day .it-tile .it-ic { width: 48px; }
.lb-name {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    font-size: 0.64rem;
    line-height: 1.2;
    color: var(--text-2);
    text-align: center;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.lb-loop { margin: 6px 0 0; }

@media (prefers-reduced-motion: reduce) {
    .ms-tab, .ms-gs::after { transition: none; }
}