/* The sphere calculator is built from the thin-film calculator's own classes, so
   everything below is only what a sphere has and a stack does not. */

.spheres-app .layout,
.spheres-app .section-band,
.spheres-app .panel {
    min-width: 0;
}

/* The film orders its left column by id (#results-sweeps-panel); the sphere's
   Multipoles and Sweep sit in region wrappers, so they take that slot by position. */
.parameters-left > [data-region="multipoles"] {
    order: 3;
}

.parameters-left > [data-region="sweep"] {
    order: 4;
}

.spheres-lmax-label,
.spheres-app .incident-angle-label {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ℓmax: the number, then the auto switch. Its label row keeps the height of the other
   Settings labels, help button and subscript notwithstanding, so the four boxes line up. */
.spheres-lmax-label {
    height: 13px;
    margin-bottom: 4px;
}

.spheres-lmax-label .context-help-btn {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
    font-size: 0.56rem;
}

.spheres-lmax-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.spheres-lmax-control input[type="number"] {
    height: 30px;
    min-height: 30px;
}

.spheres-lmax-auto {
    min-height: 30px;
    margin: 0;
    white-space: nowrap;
}

.spheres-emitter-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 10px;
}

.spheres-emitter-row input:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* Eight tracks, not the film's ten: no coherence and no rail -- the sketch beside
   the table is the drawing. Set on both variables and at two classes, because the
   film's breakpoints set --stack-row-grid directly on .stack-table. */
.stack-table.spheres-stack-table {
    --stack-rail-width: 0px;
    --stack-row-grid-compact: 50px minmax(70px, 0.62fr) minmax(118px, 1.3fr) var(--stack-n-col) var(--stack-nk-col) minmax(88px, 0.8fr) minmax(104px, 0.9fr) var(--stack-action-width);
    --stack-row-grid: var(--stack-row-grid-compact);
    min-width: 0;
}

.spheres-stack-table .stack-hdr .context-help-header {
    gap: 3px;
}

/* Seven tracks while the Free path column is withdrawn (spheres.js RELEASED). */
.stack-table.spheres-stack-table.spheres-without-free-path {
    --stack-row-grid-compact: 50px minmax(70px, 0.62fr) minmax(118px, 1.3fr) var(--stack-n-col) var(--stack-nk-col) minmax(88px, 0.8fr) var(--stack-action-width);
}

.spheres-particle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 208px;
    gap: 14px;
    align-items: start;
}

.spheres-sketch {
    margin: 0;
    min-width: 0;
}

.spheres-sketch-svg {
    display: block;
    width: 100%;
    height: auto;
}

.spheres-sketch-label {
    fill: var(--sketch-ink, var(--text-dim));
    font-family: var(--font-data, "IBM Plex Mono", monospace);
    font-size: var(--sketch-font-size,10px);
}

.spheres-sketch-caption {
    font-size: 8.5px;
    opacity: 0.8;
}

.spheres-sketch-symbol {
    font-family: var(--font-data, "IBM Plex Mono", monospace);
    font-size: var(--sketch-font-size,10px);
    font-style: italic;
    font-weight: 700;
}

.spheres-drude-chip {
    white-space: nowrap;
}

.spheres-drude-chip.is-set,
.spheres-drude-chip.is-on {
    border-style: solid;
    color: var(--text);
}

.spheres-drude-chip.is-on {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    background: var(--accent-soft);
    color: var(--accent);
}

.spheres-popover {
    position: fixed;
    z-index: 950;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-overlay, 6px);
    background: var(--surface);
    box-shadow: var(--overlay-shadow, var(--shadow));
    color: var(--text);
}

.spheres-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.spheres-popover-title {
    font-size: 0.8rem;
    font-weight: 700;
}

.spheres-popover-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.spheres-option-field {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.spheres-option-field > span {
    color: var(--text-dim);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.spheres-option-field input,
.spheres-option-field select {
    width: 100%;
    min-width: 0;
    height: 30px;
}

.spheres-option-wide {
    grid-column: 1 / -1;
}

.spheres-popover-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
}

.spheres-muted {
    color: var(--text-soft);
    font-size: 0.7rem;
}

.spheres-popover-note {
    color: var(--text-soft);
    font-size: 0.7rem;
    line-height: 1.45;
}

.spheres-popover-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* The Drude model: the fit, its plot against the data, the correction and its two
   equations. Taller than a popover, so it scrolls within the viewport. */
.spheres-drude {
    max-height: calc(100vh - 16px);
    overflow-y: auto;
}

.spheres-drude.od-loading .spheres-drude-chart {
    opacity: 0.55;
}

.spheres-drude-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
}

.spheres-drude .polarization-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}

.spheres-drude-status,
.spheres-drude-values {
    color: var(--text-soft);
    font-family: var(--font-data, "IBM Plex Mono", monospace);
    font-size: 0.68rem;
    line-height: 1.45;
}

.spheres-drude-values {
    align-self: end;
    min-height: 30px;
    display: flex;
    align-items: center;
    color: var(--text-dim);
}

.spheres-option-pair {
    grid-column: span 2;
}

.spheres-drude-chart .legend-row {
    margin-top: 6px;
    font-size: 0.72rem;
}

.spheres-drude-chart .hover-readout {
    min-height: 26px;
    margin-top: 4px;
    font-size: 0.7rem;
}

/* Display equations: each on one line of its own (scrolling rather than wrapping on a
   narrow screen), fractions stacked over a rule. */
.spheres-equation {
    display: block;
    overflow-x: auto;
    text-align: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface2);
    color: var(--text);
    font-family: "STIX Two Math", "STIX Two Text", "Cambria Math", "Latin Modern Math", "Times New Roman", serif;
    font-size: 1.02rem;
    line-height: 1.2;
    white-space: nowrap;
}

.spheres-equation sub,
.spheres-equation sup {
    font-size: 0.68em;
}

.spheres-frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0.12em;
    vertical-align: middle;
}

.spheres-frac > span {
    padding: 0 0.22em;
}

.spheres-frac > span:first-child {
    padding-bottom: 0.12em;
    border-bottom: 1px solid currentColor;
}

.spheres-frac > span:last-child {
    padding-top: 0.12em;
}

.spheres-chart {
    display: block;
    width: 100%;
    height: auto;
    cursor: crosshair;
}

.results-grid > .spheres-card[data-card="field"] > .chart-frame,
.results-grid > .spheres-card[data-card="emission"] > .chart-frame {
    aspect-ratio: 860 / 620;
}

.spheres-card .result-heading {
    flex-wrap: wrap;
    row-gap: 4px;
}

.spheres-card .selected-angle-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.spheres-card .spectra-head-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 4px;
}

.spheres-card .polarization-tab,
.spheres-card .spectra-metric-tab,
.spheres-card .spectra-x-axis-tab {
    flex: 0 0 auto;
}

.spheres-card .spectra-metric-tab:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

:is(.spheres-card, .spheres-drude) .legend-line.spheres-legend-dashed {
    background: repeating-linear-gradient(90deg, var(--legend-color) 0 5px, transparent 5px 8px) !important;
}

/* Multipole strokes in the legend as on the plot: electric dashed, magnetic dot-dashed
   (STROKES in spheres.js). */
:is(.spheres-card, .spheres-drude) .legend-line.spheres-legend-electric,
:is(.spheres-card, .spheres-drude) .legend-line.spheres-legend-magnetic {
    display: inline-block;
    flex: 0 0 auto;
    width: 30px;
    height: 3px;
    border-radius: 0;
}

:is(.spheres-card, .spheres-drude) .legend-line.spheres-legend-electric {
    background: repeating-linear-gradient(90deg, var(--legend-color) 0 9px, transparent 9px 13px) !important;
}

:is(.spheres-card, .spheres-drude) .legend-line.spheres-legend-magnetic {
    background: repeating-linear-gradient(90deg, var(--legend-color) 0 9px, transparent 9px 12px, var(--legend-color) 12px 14px, transparent 14px 17px) !important;
}

:is(.spheres-card, .spheres-drude) .legend-line.spheres-legend-dotted {
    display: inline-block;
    flex: 0 0 auto;
    width: 30px;
    height: 3px;
    border-radius: 0;
    background: repeating-linear-gradient(90deg, var(--legend-color) 0 3px, transparent 3px 7px) !important;
}

/* ∥ as two bars set apart (labelHtml, the tabs): the font's glyph nearly closes them. */
.spheres-par {
    display: inline-block;
    width: 0.34em;
    height: 0.74em;
    margin: 0 0.08em;
    border-right: 0.1em solid currentColor;
    border-left: 0.1em solid currentColor;
    vertical-align: -0.04em;
}

/* The multipoles of one efficiency as a table: orders down, kinds across, the total
   beside it. */
:is(.spheres-card, .spheres-drude) .legend-row.spheres-legend-with-table {
    align-items: flex-start;
}

.spheres-legend-table {
    border-collapse: collapse;
    color: var(--text-dim);
    font-size: 0.72rem;
}

.spheres-legend-table th,
.spheres-legend-table td {
    padding: 2px 14px 2px 0;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}

.spheres-legend-table thead th {
    color: var(--text-soft);
    font-family: var(--font-data, "IBM Plex Mono", monospace);
    font-size: 0.66rem;
}

.spheres-legend-table tbody th span {
    color: var(--text-soft);
}

/* The scattering scheme beside a decomposed legend, at the size it has in the plot. */
.spheres-legend-scheme {
    flex: 0 0 auto;
    width: min(228px, 100%);
    height: auto;
    margin-left: auto;
    align-self: flex-start;
}

/* Each line's value at the pointer, in its own cell while hovering (lineChart). */
.spheres-legend-value {
    display: inline-block;
    min-width: 6ch;
    margin-left: 4px;
    color: var(--text);
    font-family: var(--font-data, "IBM Plex Mono", monospace);
    font-variant-numeric: tabular-nums;
}

.spheres-legend-table tfoot td {
    padding-top: 4px;
    color: var(--text-soft);
    font-size: 0.68rem;
    white-space: normal;
}

/* Multipoles: every order at once, at the height of the range's boxes. */
.spheres-order-all {
    width: 100%;
    height: 30px;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface2);
    color: var(--text-dim);
    font-family: var(--font-data, "IBM Plex Mono", monospace);
    font-size: 0.68rem;
    white-space: nowrap;
}

.spheres-order-all:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.spheres-order-all:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.spheres-card-message {
    margin-top: 10px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--danger) 9%, transparent);
    color: var(--text);
    font-size: 0.76rem;
    line-height: 1.45;
}

.spheres-energy-table {
    margin-top: 10px;
    overflow-x: auto;
}

.spheres-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.spheres-table th,
.spheres-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    text-align: right;
    white-space: nowrap;
}

.spheres-table th {
    color: var(--text-soft);
    font-weight: 600;
}

.spheres-table th:first-child,
.spheres-table td:first-child {
    text-align: left;
}

/* The energy card's stored energy by multipole, orders down and layers across. */
.spheres-multipole-table {
    margin-top: 12px;
}

.spheres-multipole-table caption {
    padding-bottom: 6px;
    color: var(--text-soft);
    font-size: 0.72rem;
    text-align: left;
    caption-side: top;
}

.spheres-multipole-table thead th[scope="colgroup"] {
    text-align: center;
    color: var(--text-dim);
}

.spheres-multipole-table tbody th {
    color: var(--text-dim);
    font-weight: 500;
    text-align: left;
}

.spheres-multipole-table tbody th span {
    color: var(--text-soft);
}

.spheres-app .status {
    margin-bottom: 10px;
}

@media (max-width: 1080px) {
    .spheres-particle {
        grid-template-columns: minmax(0, 1fr);
    }

    .spheres-sketch {
        order: -1;
        width: min(240px, 100%);
        justify-self: center;
    }
}

@media (max-width: 700px) {
    .spheres-emitter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spheres-popover-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spheres-stack-table .stack-hdr {
        display: none;
    }

    .spheres-stack-table .spheres-layers-list > .stack-row {
        display: none;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 8px 6px;
        align-items: end;
        padding: 9px;
        border: 1px solid color-mix(in srgb, var(--mobile-stack-editor-color, var(--accent)) 34%, var(--border));
        border-radius: var(--radius-panel);
        background: color-mix(in srgb, var(--mobile-stack-editor-color, var(--accent)) 12%, var(--surface));
    }

    .spheres-stack-table .spheres-layers-list > .stack-row.is-mobile-stack-active {
        display: grid;
    }
    .spheres-stack-table .spheres-layers-list > .stack-row > :nth-child(1) { display: none; }
    .spheres-stack-table .spheres-layers-list > .stack-row > :nth-child(2) { grid-column: 1 / 3; grid-row: 1; }
    .spheres-stack-table .spheres-layers-list > .stack-row > :nth-child(3) { grid-column: 3 / 5; grid-row: 1; }
    .spheres-stack-table .spheres-layers-list > .stack-row > :nth-child(4) { grid-column: 1; grid-row: 2; }
    .spheres-stack-table .spheres-layers-list > .stack-row > :nth-child(5) { grid-column: 2; grid-row: 2; }
    .spheres-stack-table .spheres-layers-list > .stack-row > :nth-child(6) { grid-column: 3 / 5; grid-row: 2; }
    .spheres-stack-table .spheres-layers-list > .stack-row > :nth-child(7) { grid-column: 1 / -1; grid-row: 3; }
    .spheres-stack-table .spheres-layers-list > .stack-row > :is(.del, span:empty) { display: none; }

    .spheres-stack-table .stack-mobile-field,
    .spheres-stack-table .layer-name-field,
    .spheres-stack-table .material-cell {
        display: grid;
        gap: 4px;
        min-width: 0;
    }

    .spheres-stack-table .stack-mobile-field-label {
        display: block;
        color: var(--text-dim);
        font-family: var(--font-ui);
        font-size: 0.68rem;
        font-weight: 500;
        line-height: 1.1;
    }

    .spheres-stack-table .layer-name-field input,
    .spheres-stack-table .stack-mobile-field > input,
    .spheres-stack-table .stack-mobile-field > .layer-static {
        width: 100%;
        min-height: 44px;
        height: 44px;
    }

    .spheres-stack-table .surface-chip-row {
        min-height: 34px;
        display: flex;
        align-items: center;
    }
}

@media (max-width: 700px) {
    .spheres-stack-table .spheres-layers-list > .stack-row > .stack-source-reference {
        grid-column: 1 / 3;
        grid-row: 2;
    }
}