/* Mining: Locations & Materials (Data Hub, 22 Oct 2026; Star Citizen Wiki data).
   Only site theme variables (css/root.css + css/themes/mf-*.css), so it
   follows Ion blue, Plasma red, High contrast and every ship maker theme.
   Cards are .sc-card, so maker themes' panel shapes apply to them. */
.mining-page .mn-tools { display: flex; flex-wrap: wrap; gap: 0.9rem 1.2rem; align-items: flex-end; }
.mining-page .mn-tools > * { min-width: 0; max-width: 100%; }
.mining-page .mn-tools .sc-field,
.mining-page .mn-tools .sc-filter-pills { margin-bottom: 0; }
.mining-page .mn-tools select { width: 100%; min-width: 11rem; max-width: 100%; }
.mining-page .mn-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mining-page .mn-explain { margin: 1rem 0; padding: 0.2rem 0 0.2rem 0.9rem; border-left: 3px solid var(--accent); color: var(--ink-2); max-width: 70rem; }
.mining-page .mn-explain strong { color: var(--ink); }
.mining-page .mn-count { margin: 0 0 0.8rem; color: var(--ink); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.mining-page .mn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 1.2rem; align-items: start; }
.mining-page .mn-card { margin: 0; min-width: 0; }
/* 22 Oct 2026 (Matt): the cards are ALWAYS the same size. A Basic card's top 3
   fits (about 410 px); Advanced detail and "Show all" scroll inside the card
   (.mn-body), with Show all / Show fewer kept at the bottom (.mn-foot). */
.mining-page .mn-card { display: flex; flex-direction: column; box-sizing: border-box; height: 27rem; overflow: hidden; }
.mining-page .mn-card > :not(.mn-body) { flex: none; }
.mining-page .mn-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-inline: -0.35rem; padding-inline: 0.35rem; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.mining-page .mn-body:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.mining-page .mn-foot { padding-top: 0.7rem; border-top: 1px solid var(--rule-soft); }
.mining-page .mn-foot .mn-more { margin-top: 0; }
.mining-page .mn-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 0.8rem; margin-bottom: 0.6rem; }
.mining-page .mn-head h3 { margin: 0; overflow-wrap: anywhere; }
.mining-page .mn-badge { padding: 0.1rem 0.5rem; border: 1px solid var(--rule); color: var(--ink-2); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; }
.mining-page .mn-facts { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0 0 0.5rem; }
.mining-page .mn-facts div { display: flex; gap: 0.35rem; align-items: baseline; }
.mining-page .mn-facts dt { color: var(--ink-2); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; }
.mining-page .mn-facts dd { margin: 0; color: var(--ink); font-weight: 600; text-transform: capitalize; }
.mining-page .mn-wiki { margin: 0 0 0.6rem; font-size: 0.85rem; }
.mining-page .mn-sys { border-top: 1px solid var(--rule); }
.mining-page .mn-sys > summary { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0; cursor: pointer; color: var(--ink); font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; list-style: none; }
.mining-page .mn-sys > summary::-webkit-details-marker { display: none; }
.mining-page .mn-sys > summary::before { content: "+"; width: 1em; flex: none; }
.mining-page .mn-sys[open] > summary::before { content: "\2212"; }
.mining-page .mn-sys > summary > span:first-child { flex: 1 1 auto; }
.mining-page .mn-sys-n { color: var(--ink-2); }
.mining-page .mn-sys > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.mining-page .mn-rows { list-style: none; margin: 0; padding: 0; }
.mining-page .mn-row { padding: 0.5rem 0 0.6rem; border-top: 1px solid var(--rule-soft); }
.mining-page .mn-top { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; }
.mining-page .mn-name { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-weight: 600; }
.mining-page .mn-share { color: var(--ink); font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.mining-page .mn-sub { margin: 0.1rem 0 0; color: var(--ink-2); font-size: 0.82rem; overflow-wrap: anywhere; }
.mining-page .mn-where { margin: 0 0 0.5rem; }
.mining-page .mn-rock { margin-top: 0.35rem; color: var(--ink-2); font-size: 0.82rem; overflow-wrap: anywhere; }
.mining-page .mn-rock-t .fa { margin-right: 0.2rem; }
.mining-page .mn-mix { display: block; margin-top: 0.15rem; color: var(--ink-2); font-size: 0.78rem; }
.mining-page .mn-role { display: inline-block; margin-right: 0.3rem; padding: 0 0.4rem; border: 1px solid var(--rule); color: var(--ink); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
.mining-page .mn-role.is-secondary { border-style: dashed; }
.mining-page .mn-legend-key { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0 0 0.9rem; padding: 0; list-style: none; color: var(--ink-2); }
.mining-page .mn-legend-key li { margin: 0; }
.mining-page .mn-credit { margin-top: 1.5rem; color: var(--ink-2); font-size: 0.85rem; }
@media (max-width: 420px) {
    .mining-page .mn-tools select { min-width: 0; }
    .mining-page .mn-tools .sc-field { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .mining-page * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* Gatac's textured paper sits near 4.5:1 with --ink-2 on small text: use --ink. */
body.theme-mf-gatac .mining-page :is(.mn-sub, .mn-rock, .mn-mix, .mn-badge, .mn-count, .mn-legend-key, .mn-sys-n, .mn-facts dt, .mn-credit) { color: var(--ink); }
.mining-page .mn-rank { margin: 0.2rem 0 0.2rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); color: var(--ink); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.mining-page .mn-more { margin-top: 0.8rem; }
.mining-page .mn-check { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.8rem; border: 1px solid var(--rule); color: var(--ink); font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.mining-page .mn-check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.mining-page .mn-check:focus-within { outline: 1px solid var(--accent); outline-offset: 2px; }
.mining-page [hidden] { display: none !important; }