/*
 * Interactive vector and matrix drawings, see mxn_math.js and the mxn-draw-canvas directive (_ext/mxn_layout.py).
 *
 * Markup produced by mxn_math.js inside .mxn-math:
 *
 *   2D drawings                           3D drawings
 *   .mxn-math__plot                       .mxn-math__view                  The framed drawing area.
 *     svg                                   canvas                         The three.js scene.
 *     .mxn-math__legend                     .mxn-math__labels              Labels which follow the scene.
 *   .mxn-math__values                       .mxn-math__hint, __figures     Overlays: orbit hint, list of values.
 *   .mxn-math__values (the caption)         .mxn-math__legend
 *                                         .mxn-math__values (the caption)
 *
 * Overlays are drawn directly onto the drawing and have no background of their own.
 */

/* The root, which takes the width of the page. */
.mxn-math {
    width: 100%;
    min-width: 0;
    margin: 0 0 1rem;
    color: var(--color-text);
}

/* --- 2D drawings ------------------------------------------------------------------------------ */

/* The positioning context of the legend, which is laid over the svg. */
.mxn-math__plot {
    position: relative;
}

/* The svg keeps its aspect ratio when scaled. touch-action lets handles be dragged without scrolling the page. */
.mxn-math svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 836 / 460;
    overflow: hidden;
    background: var(--color-surface-very-subtle);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    touch-action: none;
    cursor: crosshair;
}

.mxn-math svg [data-handle] {
    cursor: grab;
}

.mxn-math svg [data-handle]:active {
    cursor: grabbing;
}

/* The dropdown of drawings which offer a choice, such as the order of a multiplication. */
.mxn-math select {
    margin-bottom: 8px;
    padding: 3px 8px;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-surface);
    color: var(--color-text);
}

/* --- 3D drawings ------------------------------------------------------------------------------ */

/* The framed area of a scene, whose overlays are positioned relative to it. */
.mxn-math__view {
    position: relative;
    width: 100%;
    height: clamp(260px, 32vw, 380px);
    overflow: hidden;
    background: var(--color-surface-very-subtle);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    touch-action: none;
}

.mxn-math__view canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
}

/* The orbit and zoom hint in the top left corner. It lets pointer events through to the scene. */
.mxn-math__hint {
    position: absolute;
    z-index: 5;
    top: 8px;
    left: 8px;
    max-width: 55%;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 11px;
    line-height: 1.6;
    pointer-events: none;
}

.mxn-math__hint kbd {
    display: inline-block;
    padding: 0 3px;
    border: 1px solid color-mix(in srgb, var(--color-text-muted) 45%, transparent);
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--color-surface) 82%, var(--color-text) 18%);
    color: inherit;
    font: inherit;
    font-size: 10px;
    line-height: 1.4;
}

/* The list of values in the top right corner, one line per value, colored like the vector it belongs to. */
.mxn-math__figures {
    position: absolute;
    z-index: 5;
    top: 8px;
    right: 8px;
    margin: 0;
    font-family: var(--font-family-mono, monospace);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: pre;
    pointer-events: none;
}

.mxn-math__figures > span {
    display: block;
}

/* The layer of labels which follow positions in the scene. mxn_math.js places them by transform. */
.mxn-math__labels {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* A label attached to a position in the scene. It keeps a faint background to stay readable over lines. */
.mxn-math__label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 3px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--color-surface) 72%, transparent);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* A label at a fixed position of the view, such as a formula. It is an overlay, so it has no background. */
.mxn-math__static-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: none;
    transform: none;
    font-size: 15px;
}

/* A column vector as typeset in a formula: the entries between two thin square brackets. */
.mxn-math__column-vector {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
}

.mxn-math__column-vector-values {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
}

.mxn-math__column-vector-bracket {
    width: 5px;
    border: 1.2px solid currentColor;
}

.mxn-math__column-vector-bracket--open {
    border-right: 0;
}

.mxn-math__column-vector-bracket--close {
    border-left: 0;
}

/* Several formulas below each other, e.g. the steps of a calculation. */
.mxn-math__equation-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* A drawing with formulas of its own in the corners. Its view is taller. */
.mxn-math__view--hud {
    height: clamp(440px, 54vw, 580px);
}

/* A block of such formulas, e.g. the matrix and the values below it, aligned to the right. */
.mxn-math__hud {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.mxn-math__hud--end,
.mxn-math__hud--end .mxn-math__equation-stack {
    align-items: flex-end;
}

/* A c4d.Matrix as a table, as in the layout diagram of the matrix manual: a name, a row with the labels of the
   columns, and the entries between two square brackets. Every cell takes its color from --tint. */
.mxn-math__matrix {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.mxn-math__matrix-name {
    margin-bottom: 36px;
}

.mxn-math__matrix-grid {
    display: grid;
    grid-template-columns: repeat(4, 3.6em);
    gap: 3px;
    padding: 0 9px;
}

.mxn-math__matrix-body {
    position: relative;
}

.mxn-math__matrix-body::before,
.mxn-math__matrix-body::after {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 6px;
    border: 1.5px solid var(--color-text-muted);
    content: '';
}

.mxn-math__matrix-body::before {
    left: 0;
    border-right: 0;
}

.mxn-math__matrix-body::after {
    right: 0;
    border-left: 0;
}

.mxn-math__matrix-head {
    color: var(--tint);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.mxn-math__matrix-cell {
    padding: 1px 3px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--tint) 14%, transparent);
    color: var(--tint);
    font-family: var(--font-family-mono, monospace);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

/* A slider above a drawing, set by the :variable: option of the directive. */
.mxn-math__variable {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    color: var(--color-text-muted);
}

.mxn-math__variable input {
    flex: 1;
    min-width: 0;
    accent-color: var(--color-link);
}

.mxn-math__variable output {
    min-width: 3em;
    font-family: var(--font-family-mono, monospace);
    text-align: right;
}

/* --- Captions and legends --------------------------------------------------------------------- */

/* The line below a drawing: its caption, styled like a figure caption. The more specific selector overrides the
   paragraph style of the page body. A line without text takes no space. */
.mxn-math .mxn-math__values {
    margin: 8px 0;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-style: italic;
    text-align: center;
    overflow-wrap: anywhere;
}

.mxn-math .mxn-math__values:empty {
    display: none;
}

/* The legend in the bottom of a drawing, a wrapping row of keys. */
.mxn-math__legend {
    position: absolute;
    z-index: 4;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin: 0;
    font-size: 11px;
    pointer-events: auto;
}

.mxn-math__key {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-text-muted);
}

/* The mark of a key: a short line by default. The modifiers below turn it into a dashed line, a dot, a ring, a
   filled area or an arrow. The color is passed in --mark-color. */
.mxn-math__mark {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 0;
    border-top: 1.5px solid var(--mark-color);
}

.mxn-math__mark--dashed {
    border-top-style: dashed;
}

.mxn-math__mark--point,
.mxn-math__mark--ring,
.mxn-math__mark--area {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 50%;
    background: var(--mark-color);
}

.mxn-math__mark--ring {
    width: 9px;
    height: 9px;
    border: 1.3px solid color-mix(in srgb, var(--mark-color) 70%, transparent);
    background: color-mix(in srgb, var(--mark-color) 30%, transparent);
}

.mxn-math__mark--area {
    width: 14px;
    height: 8px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--mark-color) 35%, transparent);
}

.mxn-math__mark--arrow {
    position: relative;
}

.mxn-math__mark--arrow::after {
    position: absolute;
    right: -2px;
    top: -9px;
    color: var(--mark-color);
    content: '\2192';
    font-size: 13px;
}

/* Narrow screens: pages with drawings let the footer navigation wrap instead of overflowing. */
@media (max-width: 700px) {
    body:has(.mxn-math) .related {
        position: relative;
        height: auto;
    }

    body:has(.mxn-math) .related ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 6px;
        height: auto;
    }
}