/*
 * Styles for whatif.html — the failure-mode matrix. stocks.css carries the colour tokens, the
 * header, the section and filter furniture, AND the shared trust-chain/what-if block (--wi-*, the
 * .wi-* answer rows this page's side panel reuses), so only the matrix itself is new here.
 *
 * Mobile first, and the matrix is the reason: 38 questions x 12 issuers cannot be a grid at 320 px,
 * so the DEFAULT layout is a stack — every question a block, its twelve answers a wrapping row of
 * labelled chips — and the grid only appears from 900 px up, where `display: contents` folds each
 * row's cells into the row's own grid so the header strip and every row share one column track
 * list. One DOM, two readings; no second markup path to keep in step.
 */

/* --- the status legend ------------------------------------------------ */

.wm-key,
.wm-colkey {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 5px;
}

@media (min-width: 720px) {
    .wm-key,
    .wm-colkey {
        grid-template-columns: 1fr 1fr;
        gap: 5px 24px;
    }
}

.wm-key-item,
.wm-colkey li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted-text);
}

.wm-key-item strong,
.wm-colkey strong {
    color: var(--page-text);
    font-weight: 600;
}

.wm-key-swatch {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    align-self: center;
    border: 1px solid currentColor;
    border-radius: 3px;
    background: color-mix(in srgb, currentColor 55%, var(--card-bg));
}

/* `missing` is the absence of an answer, so its cell carries no colour: a hatch, which reads as
   "nothing here" rather than as a sixth kind of finding. */
.wm-key-swatch.wi-s-missing,
.wm-cell.wi-s-missing {
    background: repeating-linear-gradient(45deg,
            transparent 0 3px,
            color-mix(in srgb, currentColor 45%, transparent) 3px 4.5px);
}

/* --- counts and filters ---------------------------------------------- */

.wm-counts {
    margin: 0 0 10px;
}

.wm-filters {
    align-items: flex-start;
}

.wm-field-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-text);
}

.wm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.wm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid var(--control-border);
    border-radius: 999px;
    background: var(--control-bg);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

/* A status chip is tinted by the status it filters on, so the filter and the matrix agree —
   which is again why no `color` is declared above: see the note on .wm-cell. */
.wm-chip.wi-s-documented,
.wm-chip.wi-s-litigated,
.wm-chip.wi-s-inferred,
.wm-chip.wi-s-unknown,
.wm-chip.wi-s-not-applicable,
.wm-chip.wi-s-missing {
    border-color: currentColor;
}

.wm-chip-on {
    background: color-mix(in srgb, currentColor 18%, var(--control-bg));
    box-shadow: inset 0 0 0 1px currentColor;
}

.wm-chip-n {
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    opacity: 0.75;
}

.wm-clear {
    margin-top: 18px;
    padding: 4px 10px;
    border: 1px solid var(--control-border);
    border-radius: 6px;
    background: var(--control-bg);
    color: var(--control-text);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.wm-range {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--muted-text);
}

.wm-subhead {
    margin: 18px 0 6px;
    font-size: 0.95rem;
}

/* --- the matrix: stacked (default, 320 px up) ------------------------- */

.wm-matrix {
    --wm-cols: 12;
    margin: 12px 0 0;
}

/* The header strip only means something beside a grid, so it is not drawn without one. */
.wm-head {
    display: none;
}

.wm-actor {
    margin: 0 0 14px;
}

.wm-actor-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--panel-border);
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-text);
}

.wm-actor-n {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    opacity: 0.8;
}

.wm-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--panel-border);
}

.wm-q {
    margin: 0 0 6px;
    font-size: 0.85rem;
    line-height: 1.45;
}

.wm-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/*
 * NO `color` DECLARATION HERE, deliberately. The status colour arrives on the same element as
 * .wi-s-<status> from stocks.css, and this stylesheet is loaded AFTER that one — so an
 * equal-specificity `color` here would win and paint all 456 cells the same grey, with the
 * colour that carries the whole page's meaning silently gone. Every cell gets a status class
 * (statusClass() has no path that returns none), so there is nothing to fall back to.
 */
.wm-cell {
    min-height: 26px;
    padding: 2px 7px;
    border: 1px solid currentColor;
    border-radius: 5px;
    background: var(--card-bg);
    background: color-mix(in srgb, currentColor 14%, var(--card-bg));
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}

.wm-cell:hover,
.wm-cell:focus-visible {
    box-shadow: inset 0 0 0 1px currentColor;
}

/* A cell the status filter asked for. An outline rather than another colour, because the colour
   already means the status and a second meaning on the same channel would be unreadable. */
.wm-marked {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.wm-cell-i {
    color: var(--page-text);
}

.wm-empty {
    margin: 12px 0;
    font-size: 0.85rem;
    color: var(--muted-text);
}

/* --- the matrix: a grid from 900 px up -------------------------------- */

@media (min-width: 900px) {
    .wm-head,
    .wm-row {
        display: grid;
        grid-template-columns: minmax(220px, 4fr) repeat(var(--wm-cols), minmax(0, 1fr));
        gap: 3px;
        align-items: stretch;
    }

    .wm-head {
        position: sticky;
        top: 0;
        z-index: 2;
        padding-bottom: 4px;
        background: var(--page-bg);
        border-bottom: 1px solid var(--panel-border);
    }

    .wm-head-q {
        align-self: end;
        font-size: 0.74rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted-text);
    }

    /* Twelve column labels will not fit horizontally in ~60 px each, so they stand on end.
       rotate(180deg) on top of vertical-rl makes them read bottom-to-top rather than top-to-bottom. */
    .wm-head-i {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        justify-self: center;
        max-height: 96px;
        overflow: hidden;
        font-size: 0.72rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .wm-row {
        padding: 2px 0;
    }

    .wm-q {
        margin: 0;
        align-self: center;
        padding-right: 10px;
        font-size: 0.78rem;
        line-height: 1.35;
    }

    /* The twelve cells become grid items of .wm-row itself, so they line up with .wm-head. */
    .wm-cells {
        display: contents;
    }

    .wm-cell {
        min-height: 22px;
        padding: 0;
        border-radius: 3px;
        background: color-mix(in srgb, currentColor 60%, var(--card-bg));
    }

    .wm-cell.wi-s-missing {
        background: repeating-linear-gradient(45deg,
                transparent 0 3px,
                color-mix(in srgb, currentColor 45%, transparent) 3px 4.5px);
    }

    /* The issuer's name is in the column header and in every cell's title and aria-label, so the
       cell itself does not repeat it. */
    .wm-cell-i {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* --- the answer panel ------------------------------------------------- */

.wm-panel {
    width: min(94vw, 620px);
    max-height: 88vh;
    padding: 0;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--page-text);
    overflow: hidden;
}

.wm-panel::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.wm-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--panel-border);
    background: var(--header-bg);
    color: var(--header-text);
}

.wm-panel-head h2 {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.4;
}

.wm-panel-close {
    margin-left: auto;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--control-border);
    border-radius: 6px;
    background: var(--control-bg);
    color: var(--control-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.wm-panel-body {
    padding: 12px 14px 16px;
    max-height: calc(88vh - 60px);
    overflow-y: auto;
    display: grid;
    gap: 9px;
}

.wm-panel-who {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted-text);
}

/* On a phone the panel is the whole screen: a 620 px sheet with 14 px of padding leaves a quote
   two words wide at 320 px. */
@media (max-width: 560px) {
    .wm-panel {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        border: 0;
    }

    .wm-panel-body {
        max-height: calc(100vh - 58px);
    }
}