.exp-native-hidden { display: none !important; }
.exp-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.exp-field { display: grid; gap: 5px; min-width: 0; font-size: 12px; }
.exp-field input, .exp-field select { width: 100%; min-width: 0; padding: 7px 8px; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; font: inherit; }
.exp-note { font-size: 12px; color: var(--text-soft); line-height: 1.6; margin: 12px 0; }
.exp-check { display: flex; gap: 8px; align-items: center; margin: 12px 0; font-size: 12px; }
.expansion-source details { margin-top: 14px; font-size: 12px; }
.expansion-source summary { cursor: pointer; margin-bottom: 10px; }
.cylinder-controls { display: grid; gap: 13px; min-width: 0; }
.cylinder-controls > .panel { order: 0; }
.expansion-results[hidden], .expansion-results [hidden], #simulation-form[hidden], #spheres-app[hidden], #cylinders-app[hidden], #cylinders-app [hidden] { display: none !important; }
#cylinders-app [data-exp-csv] { width: auto; padding-inline: 6px; font-size: .6rem; }
.exp-chart-card .spheres-chart { border: 1px solid var(--border); border-radius: var(--radius-control); }
.cylinder-position-row { margin-top: 10px; }
.exp-cylinder-sketch { color: var(--text-soft); }
.exp-sketch-views { width: 100%; margin-bottom: 8px; }
.exp-sketch-views .spectra-metric-tab { flex: 1; min-width: 0; padding: 5px 3px; font-size: 10px; }


.exp-status:empty { display: none; }
.expansion-results { grid-column: 1 / -1; min-width: 0; }
.exp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.exp-actions button { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); padding: 7px 12px; border-radius: 6px; cursor: pointer; }
.exp-actions [data-exp-run] { color: white; background: var(--accent,#168e8e); }
.exp-status { font-size: 12px; min-height: 20px; color: var(--text-soft); }
.exp-status.exp-error { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); border-left: 3px solid var(--danger); border-radius: var(--radius-control); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--text); font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.exp-result-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.exp-chart-card { min-width: 0; }
.exp-chart-card .spheres-chart { width: 100%; height: auto; }
.exp-chart-card .plot-save-btn svg { width: 18px; height: 18px; }
.exp-chart-card[data-exp-chart="field"] .chart-frame { aspect-ratio: 860 / 620; }
.exp-chart-card .result-head { min-width: 0; }
.exp-chart-card .spectra-head-controls { min-width: 0; gap: 6px; }
.exp-chart-card .spectra-metric-tabs { flex-wrap: wrap; max-width: 100%; }
.exp-chart-card .spectra-metric-tab { flex: 0 0 auto; min-width: max-content; }
.exp-cancel { width: auto; padding: 3px 8px; font-size: .7rem; }
.exp-stale .chart-frame, .exp-stale .hover-readout { opacity: .55; }
.exp-stale .chart-frame { pointer-events: none; }
.exp-result-grid > .exp-note, .exp-result-grid > details { grid-column: 1 / -1; }
.exp-result-grid pre { white-space: pre-wrap; font-size: 11px; }
@media (max-width: 900px) { .exp-result-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .geometry-switch span { font-size: 10px; } .exp-actions { gap: 4px; } .exp-controls { gap: 9px; } }
@media (max-width: 600px) {
    .exp-chart-card .result-head { flex-wrap: wrap; }
    .exp-chart-card .result-heading { flex: 1 1 auto; }
    .exp-chart-card .spectra-head-controls { flex: 1 1 100%; order: 2; justify-content: flex-start; }
}


.exp-sketch-label { font-family: var(--font-data, "IBM Plex Mono", monospace); font-size: var(--sketch-font-size,10px); }
.exp-sketch-symbol { font-family: var(--font-data, "IBM Plex Mono", monospace); font-size: var(--sketch-font-size,10px); font-style: italic; }
.exp-sketch-basis-symbol { font-family: var(--font-data, "IBM Plex Mono", monospace); font-size: var(--sketch-basis-font-size,14px); }
.exp-channel-help { margin-top: 12px; border-top: 1px solid var(--border); font-size: 12px; }
.exp-channel-help summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 10px; color: var(--text-soft); cursor: pointer; list-style: none; }
.exp-channel-help summary::-webkit-details-marker { display: none; }
.exp-channel-help summary > svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.exp-channel-help[open] summary, .exp-channel-help summary:hover { color: var(--text); }
.exp-channel-help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.exp-channel-body { color: var(--text-soft); line-height: 1.6; padding-bottom: 2px; }
.exp-channel-diagram { max-width: 420px; margin-inline: auto; }
.exp-channel-diagram svg { display: block; width: 100%; height: auto; }
.exp-channel-diagram text { font: 11px var(--font-data); }
.exp-channel-body p { margin: 8px 0; }
.exp-channel-equation { text-align: center; color: var(--text); }
.exp-channel-body dl { margin: 12px 0; }
.exp-channel-body dl > div { display: grid; grid-template-columns: 45px minmax(0,1fr); gap: 10px; padding-block: 3px; }
.exp-channel-body dt { color: var(--text); font-family: var(--font-data); }
.exp-channel-body dd { margin: 0; }
.exp-film-table .stack-rail-cell, .exp-film-table .stack-rail-hdr { display: none !important; }
.stack-table.exp-film-table { --stack-rail-width: 0px; }
[data-exp-sweep] { min-width: 0; order: 3; }
.exp-source-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.exp-source-head .panel-title { margin: 0; }
.exp-source-kind { width: 230px; min-width: 0; }
.exp-source-kind label { display: block; }
.exp-source-kind label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.exp-source-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px 10px; }
.exp-source-grid:has([data-exp="angle"]) { grid-template-columns: repeat(4,minmax(0,1fr)); }
/* A radial source's single position field, "Offset from origin · r", spans two of the three columns. */
.exp-source-grid > .exp-source-radius-field { grid-column: span 2; }
.exp-region-thumbnail { width: 20px; height: 20px; flex: 0 0 20px; }
.exp-chart-card .spectra-head-controls { flex-wrap: wrap; }
.exp-orientation-tabs .spectra-metric-tab { min-width: 28px; font-size: 14px; }
#spheres-app .expansion-source .incident-controls-row { grid-template-columns: repeat(3,minmax(0,1fr)); }
.exp-source-grid + .exp-source-grid { margin-top: 10px; }
[data-exp-source-controls]:empty { display: none; }
.plot-axis-scale { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 28px; margin-left: 4px; color: var(--text-dim); font: 12px var(--font-ui); cursor: pointer; white-space: nowrap; }
.plot-axis-scale input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.plot-axis-scale-track { display: inline-flex; align-items: center; flex: 0 0 36px; width: 36px; height: 22px; padding: 3px; border: 1px solid var(--border-strong); border-radius: 20px; background: var(--surface2); }
.plot-axis-scale-track::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--text-dim); }
.plot-axis-scale input:checked + .plot-axis-scale-track { background: var(--accent); border-color: var(--accent); }
.plot-axis-scale input:checked + .plot-axis-scale-track::before { transform: translateX(13px); background: var(--surface); }
.plot-axis-scale input:focus-visible + .plot-axis-scale-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.exp-chart-card .spectra-metric-tab { min-width: 24px; min-height: 24px; }
.spheres-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Focused beam: the film's sample flag sits beside the layer label; the Source note names the sample. */
.film-sample-toggle { flex: 0 0 auto; min-width: 24px; height: 24px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface2); color: var(--text-soft); font: 600 11px/1 var(--font-sans, inherit); cursor: pointer; }
.film-sample-toggle.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast, #fff); }
.film-sample-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.exp-sample-note { margin: 6px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.4; }
@media (max-width: 700px), (pointer: coarse) { .film-sample-toggle { min-width: 44px; height: 44px; } }
.exp-capability-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text); font-size: 12px; }
.exp-capability-status[hidden] { display: none; }
.exp-capability-status button { min-height: 28px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface2); color: var(--text); padding: 4px 8px; }
@media (pointer: coarse), (max-width: 700px) {
    .sweep-stepper-btn { width: 44px; height: 44px; font-size: 10px; }
    .selected-angle-label { display: flex; flex-wrap: wrap; gap: 6px; }
    .exp-chart-card .spectra-metric-tab, .plot-axis-scale, .exp-notation-help, [data-cylinder-view], .exp-capability-status button { min-width: 44px; min-height: 44px; }
    .exp-notation-help { flex-basis: 44px; }
}
@media (max-width: 700px) {
    .result-head:has(.plot-axis-scale) { flex-wrap: wrap; overflow: visible; }
    .result-head:has(.plot-axis-scale) > .result-heading { flex: 1 1 auto; }
    .result-head:has(.plot-axis-scale) > .spectra-head-controls { flex: 1 1 100%; order: 2; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
}
@media (max-width: 600px) { .exp-source-grid:has([data-exp="angle"]) { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) {
    .expansion-results > .section-heading, #spheres-results-heading { flex-wrap: wrap; }
    .expansion-results .run-group { flex-wrap: wrap; }
}
[data-exp-panel] .sweep-compact-grid > .incident-control-field { min-width: 0; }
.exp-film-particle .spheres-sketch { align-self: start; }
@media (min-width: 1081px) {
    .exp-film-particle { grid-template-columns: minmax(0,1fr) 160px; gap: 12px; }
    .exp-film-table { --stack-nk-col: minmax(62px,.88fr); }
}
.exp-notation-help { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 28px; padding: 4px; border: 0; border-radius: 4px; background: transparent; color: var(--text-soft); cursor: pointer; }
.exp-notation-help svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.exp-notation-help:hover, .exp-notation-help[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); }
.exp-notation-help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.exp-decay-help { margin-top: 0; margin-bottom: 12px; padding-top: 12px; }
.exp-plot-help { margin-top: 0; margin-bottom: 12px; padding-top: 12px; }
.exp-plot-help .exp-channel-body dl > div { grid-template-columns: 64px minmax(0,1fr); }
.exp-decay-help .exp-channel-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 18px; }
.exp-decay-help .exp-channel-diagram { grid-row: 1 / span 2; width: 100%; align-self: center; }
.exp-decay-help .exp-channel-body > p:last-child { grid-column: 1 / -1; }
@media (max-width: 600px) {
    .exp-decay-help .exp-channel-body { grid-template-columns: minmax(0,1fr); }
    .exp-decay-help .exp-channel-diagram { grid-row: auto; }
}

#spheres-app .layer-order-btn, #cylinders-app .layer-order-btn { cursor: pointer; }
@media (min-width: 1081px) and (max-width: 1650px) {
    .parameters { grid-template-columns: minmax(0, 1fr); }
    .parameters > .parameters-left, .parameters > .stack-panel { grid-column: 1; grid-row: auto; }
    .parameters-left { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .parameters-left > .cylinder-controls { grid-column: 1 / -1; }
    .parameters-left > .settings-panel { grid-column: 1; }
    .parameters-left > .expansion-source { grid-column: 2; grid-row: 1 / span 3; }
    .cylinder-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .cylinder-controls > .expansion-source { grid-column: 2; grid-row: 1 / span 3; }
}

.exp-pattern-mobile-scheme { display: none; }
@media (max-width: 600px) {
    .exp-chart-card svg.spheres-chart [data-cylinder-pattern-scheme], .exp-chart-card svg.spheres-chart [data-film-pattern-scheme] { display: none; }
    .exp-pattern-mobile-scheme { display: block; flex: 0 0 100%; width: min(276px,100%); max-width: 276px; height: auto; margin: 8px auto 0; }
}

.exp-swept-input:disabled { opacity: .5; }

@media (max-width: 700px) {
    .parameters > .parameters-left { order: 1; }
    .parameters > .stack-panel { order: 2; }
    .spheres-particle { gap: 10px; }
    .exp-film-particle > .mobile-stack-focus-list { order: 0; margin-bottom: 0; }
    .exp-film-particle > .mobile-stack-editor-heading { order: 1; margin: 0; }
    .exp-film-particle > .stack-table { order: 2; }
    .mobile-stack-editor-description { color: var(--text-dim); }
    .mobile-stack-focus-list { max-height: 320px; gap: 6px; }
    .mobile-stack-focus-row { padding: 4px; }
    .mobile-stack-focus-row.is-active { box-shadow: none; }
    .mobile-stack-focus-select { min-height: 44px; grid-template-columns: 28px minmax(0,1fr) 68px 12px; gap: 5px; }
    .mobile-stack-focus-source { display: none; }
    .mobile-stack-focus-actions { grid-template-columns: repeat(3,44px); gap: 2px; }
    .mobile-stack-focus-actions.is-placeholder { display: none; }
    .mobile-stack-focus-actions .icon-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
    .mobile-stack-focus-row:has(.mobile-stack-focus-actions) .mobile-stack-focus-select { grid-template-columns: 28px minmax(0,1fr) auto 10px; }
    .setup-band .settings-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .setup-band :is(.settings-field,.incident-control-field) { min-width: 0; }
    .setup-band :is(input[type="number"],input[type="text"],select,.custom-select-button) { min-height: 44px; height: 44px; }
    .setup-band #layers-list .is-mobile-stack-active :is(input[type="number"],input[type="text"]) { min-height: 44px; height: 44px; }
    .setup-band :is(.stack-footer-add,.stack-flip-btn,.setup-start-over-btn,.calculator-disclosure-summary) { min-height: 44px; }
    .setup-band .stack-source-path { height: 44px; padding-block: 12px; }
    .setup-band :is(.material-source-select,.coherence-select).native-select-hidden { min-height: 44px !important; height: 44px !important; }
    .spheres-stack-table .stack-footer-add { grid-column: 1 / -1; }
    #layers-list :is(.stack-row.is-mobile-stack-active, .is-mobile-stack-active .stack-row):not(:has(.is-magnetic)) > :nth-child(4) { grid-column: 1 / 5; grid-row: 2; }
    #layers-list :is(.stack-row.is-mobile-stack-active, .is-mobile-stack-active .stack-row):not(:has(.is-magnetic)) > :nth-child(5) { grid-column: 5 / 9; grid-row: 2; }
    #layers-list :is(.stack-row.is-mobile-stack-active, .is-mobile-stack-active .stack-row):not(:has(.is-magnetic)) > :nth-child(6) { grid-column: 9 / -1; grid-row: 2; }
    #layers-list :is(.stack-row.is-mobile-stack-active, .is-mobile-stack-active .stack-row):not(:has(.is-magnetic)) > :nth-child(7) { grid-column: 1 / 7; grid-row: 3; }
    #layers-list :is(.stack-row.is-mobile-stack-active, .is-mobile-stack-active .stack-row):not(:has(.is-magnetic)) > :nth-child(8) { grid-column: 7 / -1; grid-row: 3; }
    #layers-list .stack-row.is-mobile-stack-active:has(> .stack-source-reference) > .stack-source-reference,
    #layers-list .is-mobile-stack-active .stack-row:has(> .stack-source-reference) > .stack-source-reference { grid-column: 1 / 9; grid-row: 2; }
    #layers-list .is-mobile-stack-active :is(.surface-chip-row,.surface-chip) { width: 100%; }
    #layers-list .is-mobile-stack-active :is(.surface-chip-add,.surface-chip-main,.surface-chip-remove) { min-height: 44px; height: 44px; }
    #layers-list .is-mobile-stack-active .surface-chip-add { width: 100%; justify-content: center; border-radius: var(--radius-control); }
    #layers-list .is-mobile-stack-active .surface-chip-main { flex: 1; min-width: 44px; }
    #layers-list .is-mobile-stack-active .surface-chip-remove { width: 44px; }
    #layers-list .is-mobile-stack-active .surface-chip-label { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
    .setup-band .incident-controls-row:not(.exp-source-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #layers-list > .stack-row.is-mobile-stack-active, #layers-list > .stack-pair-group.is-mobile-stack-active .stack-row { box-shadow: none; }
}
@media (max-width: 360px) {
    .mobile-stack-focus-row:has(.mobile-stack-focus-actions) { grid-template-columns: minmax(0,1fr); }
    .mobile-stack-focus-actions { justify-self: end; }
}