/* The Chaos Machine page (Pages/Mixes.cshtml, docs/mixes-page.md). Uses info.css (nav pills) and badges.css
   (guide-points, guide-sub); new here: the mix cards, the facts list and the tables that stack on a phone. */
.panel > p { line-height: 1.65; }
.panel > p:first-of-type { margin-top: 0; }

/* Anchors land below the sticky header */
#mixes-page [id], .panel[id], .mix-card[id], tr[id], th[id], li[id] { scroll-margin-top: 96px; }

.mix-card {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}
.mix-card .guide-sub { margin-top: 0; }
.mix-card .guide-sub a { color: #fff; }
.mix-card .guide-sub a:hover { color: var(--accent-hi); text-decoration: none; }
.mix-card .note-box { margin: 0.4rem 0 0.8rem; }

/* You need / Chance / Zen / You get / If it fails / Where */
.mix-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0.4rem 0 0.6rem;
    line-height: 1.55;
}
.mix-facts dt { color: var(--accent-hi); font-weight: 600; font-size: 0.86rem; padding-top: 1px; }
.mix-facts dd { margin: 0; color: var(--muted); }
.mix-facts dd a, .mix-table a, .form-hint a { color: var(--accent-hi); }

.mix-sub { margin: 1rem 0 0.2rem; color: var(--muted); font-size: 0.9rem; }
.mix-table td { line-height: 1.5; vertical-align: top; }
.mix-table .mix-name { color: #fff; font-weight: 600; white-space: nowrap; }
.mix-table .mix-name a { color: #fff; }
.mix-table .rate { color: var(--accent-hi); font-weight: 600; }
.mix-table .fail-keep { color: var(--ok); }
.mix-table .fail-lose { color: #fca5a5; }
.mix-where .mix-name { white-space: normal; min-width: 9rem; }
.mix-where td:last-child { color: var(--muted); }
.mix-kinds td, .mix-kinds th, .mix-tickets td, .mix-tickets th { padding: 9px 10px; }
.mix-tickets th[colspan] { text-align: center; }
.mix-kinds th:first-child, .mix-kinds td:first-child { white-space: normal; }
.mix-harmony .mix-name { white-space: normal; min-width: 9rem; }
.mix-table td.mix-formula { min-width: 13rem; color: var(--muted); }
tr:target, li:target { background: var(--accent-soft); }

@media (max-width: 640px) {
    .mix-facts { grid-template-columns: 1fr; gap: 2px; }
    .mix-facts dd { margin-bottom: 8px; }

    /* Tables of words stack: one block per row, each cell with its column's name (js/mixes.js sets data-label) */
    table.stack thead { display: none; }
    table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
    table.stack tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
    table.stack td { border: 0; padding: 2px 0; text-align: left; white-space: normal; }
    table.stack td[data-label]:not(:first-child)::before {
        content: attr(data-label) ": ";
        color: var(--faint);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .mix-kinds td, .mix-kinds th, .mix-tickets td, .mix-tickets th { padding: 8px 2px; font-size: 0.78rem; letter-spacing: 0; }
    .mix-kinds td:first-child { min-width: 0; max-width: 4.6rem; overflow-wrap: anywhere; }
}