/* Missions list page (pages/missions.html, missions.js), layout round 3: a landing with the kinds grid (big mode art,
   one line, a count) and one view per kind with its own header (back link, title, line, numbers), a search panel,
   a result line, then the kind's cards grouped under coloured ribbons. Loaded after site.css; rules here apply to
   this page only. Game art is shown as it is (no filters, blends or overlays on it). */

/* ---------- landing header ---------- */
.mp-hero { padding-bottom: 8px; }
.mp-head { display: flex; gap: 14px 28px; align-items: flex-end; flex-wrap: wrap; }
.mp-text { flex: 0 1 auto; min-width: 0; }
.mp-text h1, .kh h1 { margin-bottom: 6px; }
.mp-text p, .kh p { margin: 0; }
.mp-side { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 4px; }
.mp-sidelink { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 14px; border-radius: var(--r-md); box-shadow: var(--ring);
  background: var(--surface); color: var(--text); text-decoration: none; line-height: 1.2; }
.mp-sidelink b { font: 700 var(--fs-base)/1.15 var(--head); letter-spacing: 0.02em; }
.mp-sidelink span { font: 600 var(--fs-xs)/1.2 var(--sans); color: var(--muted); }
.mp-sidelink span::after { content: " \2197"; }
.mp-sidelink:hover { box-shadow: 0 0 0 1px var(--line-3); color: var(--text); }
.mp-sidelink[hidden] { display: none; }

/* the back link of a kind view (the system's .crumb pill): only in a kind view */
.mp-back { display: none; }
html[data-mkind]:not([data-mkind="open"]) .mk-kv { display: inline-flex; }

/* ---------- one header per kind (shown by the view; the inline script sets it before the first paint) ---------- */
.kh { display: none; gap: 16px 28px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.kh-text { flex: 1 1 420px; min-width: 0; max-width: 720px; }
html[data-mkind="story"] .kh[data-kh="story"], html[data-mkind="emergency"] .kh[data-kh="emergency"], html[data-mkind="trials"] .kh[data-kh="trials"],
html[data-mkind="ninja-road"] .kh[data-kh="ninja-road"], html[data-mkind="showdown"] .kh[data-kh="showdown"], html[data-mkind="castle"] .kh[data-kh="castle"],
html[data-mkind="coop"] .kh[data-kh="coop"], html[data-mkind="archive"] .kh[data-kh="archive"] { display: flex; }
/* the kind header already says what the section header says: the section header shows only in a search */
html[data-mkind]:not([data-mkind="open"]):not([data-mq]) .m-section > header.kv-dup { display: none; }

/* numbers beside a kind header: the system's stat box (.m-tally) */
/* "Unknown right now" takes exactly the height of a number (two short lines), so the tiles never grow when it lands */
.m-tally dd.t-unk { font: 700 var(--fs-xs)/0.88rem var(--sans); color: var(--muted); min-height: 0; height: 1.76rem; overflow: hidden; }
.m-tally .t-ok dd:not(.t-unk) { color: var(--ok); }

/* ---------- Story header: Ninja Pearls to earn (sized from the first paint: the tiles land after the data) ---------- */
.stp { flex: 0 1 440px; min-width: 0; min-height: 178px; box-sizing: border-box; padding: 14px; border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px rgba(255, 201, 74, 0.35);
  background: linear-gradient(160deg, rgba(255, 201, 74, 0.1), rgba(255, 138, 31, 0.03) 55%), var(--panel); display: grid; gap: 10px; align-content: start; }
.stp:empty { visibility: hidden; }
.stp-top { display: flex; align-items: center; gap: 12px; }
.stp-top img { width: 44px; height: 44px; flex: none; }
.stp-k { display: block; font: 700 var(--fs-label)/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.stp-top b { display: block; font: 700 var(--fs-xl)/1 var(--head); color: var(--gold); }
.stp-top small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.stp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stp-tile { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; padding: 6px 10px 6px 12px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--well); border: 0; box-shadow: var(--ring), inset 3px 0 0 var(--ok); color: var(--text); font: 700 var(--fs-sm)/1.2 var(--sans); text-align: left; }
.stp-tile.stp-hard { box-shadow: var(--ring), inset 3px 0 0 var(--bad); }
.stp-tile em { font: 700 var(--fs-label)/1 var(--sans); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 6px; border-radius: var(--r-pill); margin-left: 4px;
  color: var(--ok); background: rgba(61, 220, 132, 0.12); vertical-align: 1px; }
.stp-hard em { color: #ff8a90; background: rgba(255, 107, 114, 0.14); }
.stp-tile b { display: inline-flex; align-items: center; gap: 4px; font: 700 var(--fs-md)/1 var(--head); }
.stp-tile b img { width: 18px; height: 18px; }
.stp-tile[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--gold), inset 3px 0 0 var(--gold); }

/* ---------- search panel and result line ---------- */
.mp-tools { padding: 6px 0 4px; }
.mp-tools .wrap { display: grid; gap: 10px; }
.mp-panel { margin: 0; min-width: 0; }
.mp-tools .wrap > *, .mp-panel > *, .mp-kindrow > * { min-width: 0; }
.mp-panel .search { flex: none; }
.mp-kindrow { display: none; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
html[data-mkind="emergency"] .mp-kindrow.kv-emergency { display: flex; }
.mp-res { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; min-height: 44px; }
.mp-res .result-count { font-size: var(--fs-sm); color: var(--muted); flex: 1 1 260px; }
html[data-mkind="story"] .mp-res .result-count:empty { display: none; }
.mp-act { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mp-act .kv-emergency, .mp-act .kv-pearls { display: none; }
html[data-mkind="emergency"] .mp-act .kv-emergency:not([hidden]) { display: inline-flex; }
html[data-mkind="story"] .mp-act .kv-pearls, html[data-mkind="emergency"] .mp-act .kv-pearls, html[data-mkind="trials"] .mp-act .kv-pearls { display: inline-flex; }
.mp-act .btn { min-height: 40px; padding: 8px 14px; font-size: var(--fs-sm); }
.mp-calc { align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: linear-gradient(180deg, #ffd66b, var(--gold)); color: #1a0d00;
  font: 700 var(--fs-sm)/1 var(--sans); text-decoration: none; }
.mp-calc::after { content: "\2197"; }
.mp-calc:hover { color: #1a0d00; }

/* segmented controls (Kind; Story / Gaiden; Normal / Hard) */
.seg2 { display: inline-flex; flex-wrap: wrap; }
.seg2 button { padding: 0 14px; border: 0; background: none; cursor: pointer; }
.seg2 button .n { font-weight: 600; opacity: 0.7; margin-left: 2px; }
.seg2 .sk-chipbar { width: 260px; }
/* the Kind segment: the skeleton is as tall as the buttons it stands for (no 4 px jump when they arrive) */
#event-types .sk-chipbar { height: 34px; }

/* ---------- one kind at a time (missions.js setKind; the inline script in pages/missions.html sets it before the first
   paint). A section without data-k belongs to the landing (#limited-trials). A search shows every section again. Without
   the attribute (no script) everything shows, as before. ---------- */
html[data-mkind="open"]:not([data-mq]) #m-body > .m-section[data-k]:not([data-k~="open"]),
html[data-mkind="story"]:not([data-mq]) #m-body > .m-section:not([data-k~="story"]),
html[data-mkind="emergency"]:not([data-mq]) #m-body > .m-section:not([data-k~="emergency"]),
html[data-mkind="trials"]:not([data-mq]) #m-body > .m-section:not([data-k~="trials"]),
html[data-mkind="ninja-road"]:not([data-mq]) #m-body > .m-section:not([data-k~="ninja-road"]),
html[data-mkind="showdown"]:not([data-mq]) #m-body > .m-section:not([data-k~="showdown"]),
html[data-mkind="castle"]:not([data-mq]) #m-body > .m-section:not([data-k~="castle"]),
html[data-mkind="coop"]:not([data-mq]) #m-body > .m-section:not([data-k~="coop"]),
html[data-mkind="archive"]:not([data-mq]) #m-body > .m-section:not([data-k~="archive"]) { display: none; }
html[data-mkind]:not([data-mkind="open"]) .mk-landing { display: none; }
/* a view whose list lands short at first (the live open list arrives after the schedule's) keeps the footer below the
   screen, so the list growing never moves it into view and out again */
html[data-mkind]:not([data-mkind="open"]):not([data-mq]) #m-body { min-height: 100vh; }
html[data-mkind]:not([data-mkind="open"]):not([data-mq]) #m-body > .m-section:first-child, html[data-mkind]:not([data-mkind="open"]) #m-body > .m-section { padding-top: 14px; }

/* ---------- the kinds grid: island art from the Village menu, title, one line, a count ---------- */
.mk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; margin: 28px 0 18px; }
.mk { display: flex; flex-direction: column; align-items: center; text-align: center; color: inherit; text-decoration: none; }
.mk:hover { color: inherit; }
.mk:hover h2 { color: var(--gold); }
.mk-art { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); }
.mk-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; transition: transform 0.2s; }
.mk:hover .mk-art > img { transform: scale(1.03); }
.mk-art > img.mk-banner { padding: 0 6px; }
.mk-art .mode-cards { position: absolute; inset: 8% 4%; }
.mk-open { display: grid; grid-auto-rows: 1fr; gap: 3px; align-content: center; }
.mk-open[data-n="1"], .mk-open[data-n="2"] { grid-auto-rows: minmax(0, 33%); }
.mk-unk-art { display: grid; place-items: center; height: 100%; padding: 10px; text-align: center; font: 700 var(--fs-sm)/1.3 var(--sans); color: var(--muted);
  box-shadow: var(--ring); border-radius: var(--r-md); box-sizing: border-box; }
.mk-open > img { position: static; width: 100%; height: 100%; object-fit: cover; padding: 0; min-height: 0; border-radius: var(--r-sm); }
.mk-body { padding: 10px 6px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; max-width: 380px; }
.mk-body h2 { font-size: var(--fs-lg); line-height: 1.15; margin: 0; }
.mk-body p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; flex: 1; }
.mk-pill { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); font: 700 var(--fs-xs)/1 var(--sans); color: var(--text);
  background: var(--surface-2); box-shadow: var(--ring); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mk-pill::after { content: "\2197"; color: var(--muted); }
.mk-pill .sk-inline { width: 5.5em; height: 0.8em; }
.mk-pill.mk-ok { color: var(--ok); }
.mk-pill.mk-unk { color: var(--muted); font-weight: 600; }

/* ---------- Story: switches, then the chapter rows ---------- */
.st-switch { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 14px; }
#story-diff:empty { display: none; }
.st-count { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; }
.st-card { display: grid; grid-template-columns: 112px minmax(0, 1fr) 16px; gap: 0 12px; align-items: center; padding: 10px 12px 10px 10px; color: inherit; text-decoration: none;
  overflow: visible; min-height: 104px; box-sizing: border-box; }
a.st-card:hover { color: inherit; }
.st-thumb { position: relative; display: block; width: 112px; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: #0e0b12; border: 2px solid rgba(255, 255, 255, 0.85); box-sizing: border-box; }
.st-thumb.st-wide { aspect-ratio: 16 / 9; }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-thumb .pearl-badge.st-pb { position: absolute; left: 3px; top: 3px; }
.st-thumb .ph-badge { position: absolute; left: 3px; bottom: 3px; }
.st-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-label { font: 700 var(--fs-sm)/1.1 var(--head); letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-2); }
.st-body h3 { font-size: var(--fs-md); line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.st-meta { font-size: var(--fs-xs); color: var(--muted); }
.st-go { width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); justify-self: center; }
.st-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px; border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.3);
  font: 700 var(--fs-xs)/1.2 var(--sans); color: var(--gold); }
.st-foot img { width: 16px; height: 16px; }
.st-match { font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
/* the chapter skeleton (build-pages.py skel story) in the same row shape */
#story-grid > .skc-story { flex-direction: row; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; min-height: 104px; box-sizing: border-box; }
#story-grid > .skc-story > .sk-media { width: 112px; height: 84px; aspect-ratio: auto; border-radius: var(--r-sm); }

/* the Ninja Pearls badge on a banner (bottom right; Recreated / Same art sit bottom left) */
.pearl-badge { display: inline-flex; align-items: center; gap: 4px; font: 700 var(--fs-xs)/1 var(--sans); color: var(--gold); padding: 3px 7px 3px 4px; border-radius: var(--r-pill); background: rgba(10, 8, 14, 0.82); }
.pearl-badge img { width: 16px; height: 16px; }
.stage-img .pearl-badge.on-art { position: absolute; right: 8px; bottom: 8px; }

/* ---------- banner cards: the banner, then the name, one meta line and the status pills (no box around them) ---------- */
.m-grid { gap: 22px 18px; }
@media (min-width: 1100px) { .m-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 1099px) { .m-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .m-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
#m-body .stage:not(.st-card):has(> .stage-img) { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
#m-body .stage:not(.st-card):has(> .stage-img) > .stage-img { border-radius: var(--r-md); }
#m-body .stage:not(.st-card):has(> .stage-img) > .stage-body { padding: 8px 2px 0; gap: 5px; }
#m-body .stage:not(.st-card):has(> .stage-img) h3 { font-size: var(--fs-md); line-height: 1.2; }
a.stage:hover h3 { color: var(--gold); }
.ev-meta { font-size: var(--fs-xs); color: var(--muted); }
.ev-st { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-xs); }
.ev-st .ev-live, .ev-st .ev-pearls, .ev-st .enc-from { padding: 4px 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.05); color: var(--muted); }
.ev-st .ev-live { box-shadow: inset 0 0 0 1px rgba(61, 220, 132, 0.3); }
.ev-note { margin: 0; font-size: var(--fs-sm); }
.m-foot { font-size: var(--fs-sm); margin: 18px 0 0; }

/* ---------- groups under a coloured ribbon: name, count, one line ---------- */
.ev-group { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 18px 0 2px; padding-bottom: 8px; border-bottom: 2px solid var(--g, var(--line-2)); }
.ev-group:first-child { margin-top: 0; }
.ev-group h3 { margin: 0 0 -10px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 14px; border-radius: var(--r-md) var(--r-xl) 0 0; background: var(--g, var(--surface-2));
  color: #160c02; font-size: var(--fs-md); line-height: 1; }
.ev-group h3 .n { font: 700 var(--fs-label)/1 var(--sans); padding: 3px 7px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.72); color: #fff; }
.ev-group p { margin: 0; font-size: var(--fs-sm); color: var(--muted); flex: 1 1 260px; }
.g-showdown { --g: #ef6f86; } .g-event { --g: #f2c14e; } .g-limited { --g: #f59a4a; } .g-boss { --g: #e5675a; } .g-awakening { --g: #8fd16f; }
.g-ramen-exp { --g: #63a8f0; } .g-ryo { --g: #b48cf0; } .g-beginner { --g: #5fd0d4; } .g-trial { --g: #4fc6cf; } .g-other { --g: #b3aabb; }
#closed-grid { margin-top: 22px; }

/* lines filled after the data lands, sized from the first paint */
#week-intro { min-height: 3.1rem; }
#nr-current { min-height: 126px; box-sizing: border-box; }
/* the chapter bar (common.js chapterBar, always drawn, dates or "Unknown right now") is reserved at its full height */
/* defaults for a first visit, from the live page (2026-10-11); missions.js then uses the last visit's own heights */
#chap { min-height: 71px; margin-bottom: 8px; }
#chap-extra { min-height: 25px; margin-bottom: 14px; }
@media (max-width: 600px) { #chap { min-height: 124px; } #chap-extra { min-height: 77px; } }

@media (max-width: 960px) {
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
}
@media (max-width: 600px) {
  .mp-head { align-items: flex-start; }
  .mp-side { width: 100%; }
  .mk-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 18px; }
  .mk-art { aspect-ratio: 16 / 10; }
  .mk-body h2 { font-size: var(--fs-lg); }
  .kh { gap: 12px; }
  .stp { flex-basis: 100%; min-height: 176px; padding: 12px; }
  .stp-tile { padding: 6px 8px 6px 10px; font-size: var(--fs-xs); }
  .st-count { margin-left: 0; flex-basis: 100%; }
  .st-card { grid-template-columns: 96px minmax(0, 1fr) 14px; min-height: 92px; padding: 8px 10px 8px 8px; }
  .st-thumb { width: 96px; }
  #story-grid > .skc-story { grid-template-columns: 96px minmax(0, 1fr); min-height: 92px; padding: 8px; }
  #story-grid > .skc-story > .sk-media { width: 96px; height: 72px; }
  .st-body h3 { font-size: var(--fs-md); }
  #week-intro { min-height: 4.65rem; }
  #nr-current { min-height: 151px; }
  .stage-img .pearl-badge.on-art { right: 6px; bottom: 6px; }
  .mp-res .result-count { flex-basis: 100%; min-height: 1.4rem; }
  .mp-act { width: 100%; justify-content: flex-start; }
  .ev-group h3 { font-size: var(--fs-base); padding: 7px 12px 7px 11px; margin-bottom: 0; border-radius: var(--r-md); }
  /* the Kind control: one row that scrolls sideways (its height never changes when the kinds arrive) */
  .mp-kindrow { flex-wrap: nowrap; }
  .mp-kindrow .chips-label { display: none; }
  .mp-kindrow .seg2 { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; min-height: 46px; box-sizing: border-box; scrollbar-width: none; }
  .mp-kindrow .seg2 button { flex: none; }
}

/* #pc-list (Phantom Castle seasons in the Archive): one empty row per season until the list loads, so a /missions#pc-list
   link (the browser opens the details at once) does not shift the page when the rows arrive. Same height as a real row. */
.archive-list .ar-sk span { display: block; min-height: 28px; }
@media (pointer: coarse), (max-width: 760px) { .archive-list .ar-sk span { min-height: 44px; } }