/* Matrix calculator (/matrix-calculator): what is its own - the matrix grids in brackets, the size pickers, the
   bracketed result, the steps and the eigenvalues. Everything else (stage, panels, titles, the accent result panel,
   message, fields, buttons, segmented control, colours) comes from the app kit (css/app-kit, docs/app-kit.md). Loaded
   only on this app's page (StylePaths). Matrices, results and steps are notation: the view keeps them left to right
   (ak-ltr), also on right-to-left pages. */

/* Narrow screens: the site's phone rule for app stages (seo-pages.css, place-items: start center, more specific than
   the kit's align-items: stretch) would shrink the panels to their content; they keep the stage's width. */
.matrix-landing-app > .ak-stage > * {
    align-self: stretch;
}

/* --- Matrices A and B ---------------------------------------------------------------------------------------------- */

.matrix-landing-app .mx-matrix {
    transition: opacity var(--ak-duration);
}

/* B is not used by the operation. */
.matrix-landing-app .mx-matrix--unused {
    opacity: 0.55;
}

.matrix-landing-app .mx-matrix-head {
    gap: 0.35rem 0.5rem;
}

.matrix-landing-app .mx-matrix-head .ak-title {
    margin-inline-end: auto;
}

/* Rows x Columns wrap as one group, below the title when the panel is narrow. */
.matrix-landing-app .mx-dims {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ak-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.matrix-landing-app .mx-size {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.matrix-landing-app .mx-dims .mx-select {
    width: auto;
    min-height: 2rem;
    padding: 0.2rem 0.35rem;
}

.matrix-landing-app .mx-grid {
    display: grid;
    grid-template-columns: repeat(var(--mx-cols, 3), minmax(2.6rem, 1fr));
    gap: 0.3rem;
    padding: 0 0.5rem;
    border-right: 2px solid var(--ak-text);
    border-left: 2px solid var(--ak-text);
    border-radius: 0.35rem;
}

.matrix-landing-app .mx-cell {
    width: 100%;
    min-width: 0;
    padding: 0.4rem 0.3rem;
    border: 1px solid var(--ak-border);
    border-radius: 0.35rem;
    background: var(--ak-field);
    color: var(--ak-text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.matrix-landing-app .mx-cell:focus {
    outline: 2px solid var(--ak-accent);
    outline-offset: 1px;
    box-shadow: none;
}

/* site.css gives every text input the site theme's text and border colours (specificity 0,4,1): the cells follow the
   app's theme, and a cell that is not a number turns red (aria-invalid). */
.matrix-landing-app .mx-cell:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    color: var(--ak-text);
    border-color: var(--ak-border);
}

.matrix-landing-app .mx-cell[aria-invalid="true"]:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="file"]) {
    color: var(--ak-danger);
    border-color: var(--ak-danger);
}

/* --- Result: the answer of the page (ak-panel--accent) ------------------------------------------------------------- */

.matrix-landing-app .mx-result-panel {
    /* The panel's fill, for the shades of a result that scrolls sideways. */
    --mx-cover: color-mix(in srgb, var(--ak-accent) 7%, var(--ak-panel));
    transition: opacity var(--ak-duration);
}

/* While a number is half typed, the last result stays, dimmed. */
.matrix-landing-app .mx-result-panel.is-pending {
    opacity: 0.45;
}

.matrix-landing-app .mx-result-head {
    gap: 0.35rem 0.5rem;
    color: var(--ak-muted);
    font-size: 0.9rem;
}

/* The operation's name ("Inverse of A") heads the result, its size beside it; no separate "Result" title. */
.matrix-landing-app .mx-result-head {
    justify-content: flex-start;
}

.matrix-landing-app .mx-result-title {
    color: var(--ak-accent);
    font-size: var(--ak-fs-md);
    font-weight: 700;
}

.matrix-landing-app .mx-result-size {
    font-variant-numeric: tabular-nums;
}

.matrix-landing-app .mx-result-size:empty,
.matrix-landing-app .mx-result:empty {
    display: none;
}

/* An explanation rather than an error: infinitely many solutions. */
.matrix-landing-app .mx-message--note {
    color: var(--ak-text);
}

/* Wide results and steps scroll sideways; a soft shade at an edge shows there is more. */
.matrix-landing-app .mx-result,
.matrix-landing-app .mx-steps-list {
    scrollbar-width: thin;
    scrollbar-color: var(--ak-border) transparent;
    background:
        linear-gradient(to right, var(--mx-cover) 40%, transparent) left / 1.25rem 100% no-repeat local,
        linear-gradient(to left, var(--mx-cover) 40%, transparent) right / 1.25rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--ak-border), transparent) left / 0.6rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--ak-border), transparent) right / 0.6rem 100% no-repeat scroll;
}

.matrix-landing-app .mx-result {
    padding: 0.15rem 0;
    overflow-x: auto;
}

.matrix-landing-app .mx-result > .mx-result-table {
    margin: 0 auto;
}

.matrix-landing-app .mx-result-table {
    border-right: 2px solid var(--ak-text);
    border-left: 2px solid var(--ak-text);
    border-radius: 0.35rem;
    border-collapse: separate;
    border-spacing: 0.9rem 0.3rem;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.matrix-landing-app .mx-result-table td {
    text-align: center;
    white-space: nowrap;
}

.matrix-landing-app .mx-result-table td.mx-aug {
    padding-left: 0.9rem;
    border-left: 1px solid var(--ak-muted);
}

/* x = particular + x3 · v: column vectors in one row. */
.matrix-landing-app .mx-general {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.matrix-landing-app .mx-eq {
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
}

.matrix-landing-app .mx-free {
    display: block;
    margin-top: 0.4rem;
    color: var(--ak-muted);
    text-align: center;
}

.matrix-landing-app .mx-scalar {
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    overflow-wrap: anywhere;
}

/* --- Steps: every row operation with the matrix after it; changed rows and the pivot stand out -------------------- */

.matrix-landing-app .mx-steps summary {
    border-radius: 0.25rem;
    color: var(--ak-accent);
    font-weight: 600;
    cursor: pointer;
}

.matrix-landing-app .mx-steps summary:focus-visible {
    outline: 2px solid var(--ak-accent);
    outline-offset: 2px;
}

.matrix-landing-app .mx-steps-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.6rem 0 0;
    padding-left: 1.6rem;
    overflow-x: auto;
}

.matrix-landing-app .mx-steps-list > li::marker {
    color: var(--ak-muted);
    font-size: 0.85rem;
}

.matrix-landing-app .mx-step-op {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1.1rem;
    margin-bottom: 0.3rem;
    color: var(--ak-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.matrix-landing-app .mx-step-op--start {
    color: var(--ak-muted);
    font-weight: 400;
}

.matrix-landing-app .mx-step-op--result {
    color: var(--ak-accent);
}

.matrix-landing-app .mx-step-part {
    white-space: nowrap;
}

.matrix-landing-app .mx-step-table {
    border-spacing: 0.6rem 0.15rem;
    color: var(--ak-muted);
    font-size: 0.85rem;
}

.matrix-landing-app .mx-step-table tr.mx-row--changed td {
    color: var(--ak-text);
}

.matrix-landing-app .mx-step-table tr td.mx-pivot {
    color: var(--ak-accent);
    font-weight: 700;
}

/* --- Eigenvalues: the characteristic polynomial, then one line per eigenvalue with its eigenvectors --------------- */

.matrix-landing-app .mx-eigen {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.matrix-landing-app .mx-eigen-poly {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
    margin: 0;
}

.matrix-landing-app .mx-eigen-label {
    color: var(--ak-muted);
    font-size: 0.85rem;
}

.matrix-landing-app .mx-eigen-expr,
.matrix-landing-app .mx-eigen-list {
    font-variant-numeric: tabular-nums;
}

.matrix-landing-app .mx-eigen-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.matrix-landing-app .mx-eigen-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 1rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.5rem;
    background: var(--ak-field);
}

.matrix-landing-app .mx-eigen-val {
    font-size: 1.1rem;
    font-weight: 600;
}

.matrix-landing-app .mx-eigen-approx {
    color: var(--ak-muted);
}

.matrix-landing-app .mx-eigen-vecs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    margin-inline-start: auto;
    color: var(--ak-muted);
}

.matrix-landing-app .mx-eigen-vec {
    white-space: nowrap;
}

/* --- Control panel: the copy format and its button on one row ----------------------------------------------------- */

.matrix-landing-app .mx-copy-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.matrix-landing-app .mx-copy-row > select.ak-field {
    flex: 1 1 9rem;
    width: auto;
    min-width: 0;
}

/* --- Phones -------------------------------------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .matrix-landing-app .mx-grid {
        grid-template-columns: repeat(var(--mx-cols, 3), minmax(2.2rem, 1fr));
        gap: 0.25rem;
        padding: 0 0.3rem;
    }

    .matrix-landing-app .mx-cell {
        padding: 0.35rem 0.15rem;
        font-size: 0.85rem;
    }

    .matrix-landing-app .mx-result-table {
        border-spacing: 0.6rem 0.25rem;
        font-size: 0.95rem;
    }

    .matrix-landing-app .mx-steps-list {
        padding-left: 1.2rem;
    }
}