{# The Plot Controls tab: four groups of settings, one shown at a time.

Every control here is a row in the CONTROLS registry (static/javascript/
controls.js), keyed by DOM id - so this markup works unchanged on any page
whose controller calls bindControls(), and a page without one of these
features simply never binds it.

A page with settings of its own passes `extra_control_tab` (a
{group, label, title} for the strip) and `extra_control_groups` (a template to
include after the shared ones). The exciton page is the only caller.

`photoemission` adds the two Spectrum rows that only mean anything for a
density of states of occupied orbitals - the kinetic-energy axis and the peak
scaling. The exciton page's spectrum is an absorption spectrum and has
neither. #}
{# Controls #}
<div class="tab-pane" id="tab-controls">
    {# Each group is a pane of one or two side-by-side lists. #}
    <nav class="pane-tabs" role="tablist">
        <button role="tab" class="pane-tab active" data-pane-group="geometry-light"
            title="Molecular orientation and the exciting light">Geometry &amp; Light</button>
        <button role="tab" class="pane-tab" data-pane-group="sampling"
            title="How every view is sampled: the momentum and real-space grids, the detector, the spectrum's line shape and the energy unit">Sampling</button>
        <button role="tab" class="pane-tab" data-pane-group="display"
            title="Atom styling and what the 3D scenes draw">Display</button>
        <button role="tab" class="pane-tab" data-pane-group="colours"
            title="Colormap and every scene colour">Colours</button>
        {% if extra_control_tab %}
        <button role="tab" class="pane-tab" data-pane-group="{{ extra_control_tab.group }}"
            title="{{ extra_control_tab.title }}">{{ extra_control_tab.label }}</button>
        {% endif %}
        <button type="button" class="help-badge"
            data-help="Every setting behind the plots, in groups. Geometry &amp; Light and Sampling decide what a plot means: the orientation, the light, the energies, and how finely each view is sampled. Display and Colours decide only how it is drawn, and travel in no share link.">?</button>
    </nav>
    {# Two fixed columns, each a plain top-to-bottom list of
    controls - the same shape as the Info tab's Calculation/System
    split, so a related pair of small groups reads as one
    consistent layout instead of a dense multi-column grid. #}
    <section class="pane-group active list" id="pane-group-geometry-light" aria-label="Geometry &amp; Light"
        role="tabpanel">
        <div class="list-column">
            <p class="group-title">Geometry<button type="button" class="help-badge"
                    data-help="How the molecule sits in the lab frame, and what the surface underneath it does to the measurement. The three Euler angles start from the orientation stored with the calculation, so a calculation ingested face-on opens face-on.">?</button>
            </p>
            <hr class="divider">
            <div class="control-item" title="Incoherent sum of the map over the substrate's symmetry-equivalent domains.
fcc(100) — 0/90/180/270° and a mirror: 8 domains, C4v.
fcc(110) — 0/180° and a mirror: 4 domains, C2v.
fcc(111) — 0/120/240° and a mirror: 6 domains, C3v.">
                <span class="label">Substrate<button type="button" class="help-badge"
                        data-help="A molecule adsorbed on a crystalline surface occurs in several symmetry-equivalent orientations at once, and an experiment measures all of them together. Selecting a substrate sums the map over those domains, so a simulated map can be laid beside a measured one.">?</button></span>
                <div class="segmented" id="substrate">
                    <label title="No domain averaging"><input type="radio" name="substrate" value="-1"
                            checked><span>None</span></label>
                    <label title="0/90/180/270° and a mirror — 8 domains"><input type="radio" name="substrate"
                            value="0"><span>fcc(100)</span></label>
                    <label title="0/180° and a mirror — 4 domains"><input type="radio" name="substrate"
                            value="1"><span>fcc(110)</span></label>
                    <label title="0/120/240° and a mirror — 6 domains"><input type="radio" name="substrate"
                            value="2"><span>fcc(111)</span></label>
                </div>
            </div>
            <div class="control-item" title="Euler angle φ (ZXZ, γ): rotation about the lab z axis, before the tilt.
Range −180…180°; the default comes from the calculation's stored orientation.">
                <label for="phi" class="label">Euler Phi [°]<button type="button" class="help-badge"
                        data-help="The first of the three Euler angles that place the molecule in the lab frame. It turns the molecule about the surface normal before the tilt is applied, and its starting value comes from the orientation stored with the calculation.">?</button></label>
                <input type="number" id="phi"
                    value="{% if calculation.orientation == 'yz' or calculation.orientation == 'zy' -%}90.0{%- else -%}0.0{%- endif %}"
                    step="1" min="-180" max="180">
            </div>
            <div class="control-item" title="Euler angle θ (ZXZ, β): tilt of the molecular plane away from the surface.
Range −180…180°; the default comes from the calculation's stored orientation.">
                <label for="theta" class="label">Euler Theta [°]<button type="button" class="help-badge"
                        data-help="The tilt of the molecule away from the surface plane. At 0° a planar molecule lies flat and its π orbitals point along the surface normal; at 90° it stands upright.">?</button></label>
                <input type="number" id="theta"
                    value="{% if calculation.orientation == 'xy' or calculation.orientation == 'yx' -%}0.0{%- else -%}90.0{%- endif %}"
                    step="1" min="-180" max="180">
            </div>
            <div class="control-item" title="Euler angle ψ (ZXZ, α): rotation about the molecular z axis, after the tilt.
Range −180…180°, default 0°.">
                <label for="psi" class="label">Euler Psi [°]<button type="button" class="help-badge"
                        data-help="The last of the three Euler angles, applied after the tilt. The stored orientation never sets it, so it always starts at zero; together the three fix the molecule's orientation against the analyser, and a momentum map is only meaningful against a stated orientation.">?</button></label>
                <input type="number" id="psi" value="0.0" step="1" min="-180" max="180">
            </div>
        </div>
        <div class="list-column">
            <p class="group-title">Light<button type="button" class="help-badge"
                    data-help="The exciting light: its energy, its polarisation and the geometry it arrives in. Everything in this group reaches the map through the |A·k|² prefactor of the photoemission matrix element, a smooth envelope over the orbital's own pattern.">?</button>
            </p>
            <hr class="divider">
            <div class="control-item" title="Fixes hν or E_kin; the other follows from E_kin = hν + E_orbital.
hν fixed — each orbital on its own hemisphere |k| = √(2 E_kin).
E_kin fixed — one hemisphere for all orbitals, hν retuned per orbital.">
                <span class="label">Energy Mode<button type="button" class="help-badge"
                        data-help="Which of the two energies is held constant as you move between orbitals. At constant kinetic energy every orbital is sampled on the same hemisphere, and their intensities mean the same thing; at constant photon energy each orbital comes off a hemisphere of its own, as in a single measured spectrum.">?</button></span>
                <div class="segmented" id="energy-mode">
                    <label title="Constant photon energy"><input type="radio" name="energy-mode" value="photon"
                            checked><span>hν</span></label>
                    <label title="Constant kinetic energy"><input type="radio" name="energy-mode"
                            value="kinetic"><span>E<sub>kin</sub></span></label>
                </div>
            </div>
            <div class="control-item" id="photon-energy-item" title="Photon energy of the exciting light. Default 30 eV, range 0.1–500.
Each orbital is emitted at E_kin = hν + E_orbital, with E_orbital < 0 referred to the vacuum level.">
                <label for="photon-energy" class="label">Photon Energy hν <span class="unit">[eV]</span><button
                        type="button" class="help-badge"
                        data-help="The photon energy the simulated experiment is run at. It sets where each orbital lands in kinetic energy and so how much of momentum space the map reaches; below an orbital's binding energy it cannot be emitted at all.">?</button></label>
                {# step 0.1, not the implicit 1: a mode switch carries the other
                energy over to one decimal, which an integer ladder rejects #}
                <input type="number" id="photon-energy" value="30" min="0.1" max="500" step="0.1">
            </div>
            <div class="control-item" id="kinetic-energy-item" hidden title="Kinetic energy every selected orbital is photoemitted at. Default 25 eV, range 0.1–500.
Each orbital then needs its own photon energy, hν = E_kin − E_orbital.
Hemisphere radius |k| = √(2 E_kin).">
                <label for="kinetic-energy" class="label">Kinetic Energy E<sub>kin</sub> <span
                        class="unit">[eV]</span><button type="button" class="help-badge"
                        data-help="The kinetic energy every orbital is put on, with the photon energy retuned for each one instead. All maps then share one hemisphere in momentum space, and only then can their intensities be read against each other.">?</button></label>
                <input type="number" id="kinetic-energy" value="25" min="0.1" max="500" step="0.1">
            </div>
            <div class="control-item" title="Multiplies the map by the polarisation prefactor |A·k|² of the matrix element. Off by default.
Also zeroes every pixel outside the hemisphere.">
                <label for="ak-factor" class="label">|A·k|² factor<button type="button" class="help-badge"
                        data-help="The polarisation dependence of the photoemission matrix element. It lays a smooth envelope over the map, set by the direction and polarisation of the light; switching it off leaves the bare |ψ̃(k)|².">?</button></label>
                <input type="checkbox" id="ak-factor">
            </div>
            <div class="control-item" title="Elevation of the vector potential A above the surface plane. 0–90°, default 90°.
90° = along the surface normal.">
                <label class="label" for="polar">Polar Angle [°]<button type="button" class="help-badge"
                        data-help="How far above the sample surface the light arrives, measured to the vector potential A. The polar and azimuthal angles together fix the direction A points, and the polarisation factor depends on nothing else.">?</button></label>
                <input type="number" id="polar" value="90" min="0" max="90">
            </div>
            <div class="control-item" title="Azimuth of the plane of incidence, from the x axis. 0–360°, default 0°.">
                <label class="label" for="azimuth">Azimuthal Angle [°]<button type="button" class="help-badge"
                        data-help="Which way round the surface normal the light comes in. It turns the polarisation envelope over the map without touching the orbital, so a feature that follows it belongs to the light.">?</button></label>
                <input type="number" id="azimuth" value="0" min="0" max="360">
            </div>
            <div class="control-item" title="Polarisation of the exciting light.
Linear — s/p blend set below.
Circular — left, right, or their difference.
Toroid — fully p-polarised; |A·k| = k∥ cos(polar) + k_z sin(polar), azimuthally symmetric.">
                <span class="label">Polarization<button type="button" class="help-badge"
                        data-help="Which polarisation the |A·k|² factor is evaluated for. Linear mixes s and p in the share set below, circular combines them with the handedness set below, and toroid is the fully p-polarised case whose factor carries no azimuthal dependence at all.">?</button></span>
                <div class="segmented" id="polarisation">
                    <label><input type="radio" name="polarisation" value="0" checked><span>Linear</span></label>
                    <label><input type="radio" name="polarisation" value="1"><span>Circular</span></label>
                    <label title="Fully p-polarised; azimuthally symmetric"><input type="radio" name="polarisation"
                            value="2"><span>Toroid</span></label>
                </div>
            </div>
            <div class="control-item" id="s-share-item" title="Share of s-polarisation in linearly polarised light. 0–100 %, default 69.4 %.
|A·k|² = s |A_s·k|² + (1−s) |A_p·k|², s = share/100.">
                <label class="label" for="s-share">Share of s-pol. [%]<button type="button" class="help-badge"
                        data-help="How much of the linearly polarised light is s- rather than p-polarised. The two components weight orthogonal directions of A, so the share decides which lobes of the orbital the light couples to.">?</button></label>
                <input type="number" id="s-share" value="69.4" min="0" max="100">
            </div>
            <div class="control-item" id="handedness-item" title="Handedness of circularly polarised light. Dichroism = Right − Left.
Dichroism is signed, so its colour range is symmetric about 0.
Dichroism ∝ γ sin(polar): it is the finite escape depth alone, and vanishes as λ → ∞.">
                <span class="label">Handedness<button type="button" class="help-badge"
                        data-help="Whether the circularly polarised light is left- or right-handed, or whether the map shows the difference between the two. Circular dichroism is a signed quantity, and in this model it arises entirely from the finite inelastic mean free path of the photoelectron.">?</button></span>
                <div class="segmented" id="handedness">
                    <label><input type="radio" name="handedness" value="0" checked><span>Left</span></label>
                    <label><input type="radio" name="handedness" value="1"><span>Right</span></label>
                    <label title="Right − Left"><input type="radio" name="handedness"
                            value="2"><span>Dichroism</span></label>
                </div>
            </div>
        </div>
    </section>

    <section class="pane-group list" id="pane-group-sampling" aria-label="Sampling" role="tabpanel">
        <div class="list-column">
            <p class="group-title">Momentum Space<button type="button" class="help-badge"
                    data-help="How finely the 2D map and the 3D momentum density are sampled, and how much of the density the isosurface encloses. Both isovalues are a fraction of the field's own maximum, so the same number means the same thing on any orbital.">?</button>
            </p>
            <hr class="divider">
            <div class="control-item" title="Half-range of the 2D map and half-length of the 3D box; the two always move together.
Default 3.0 Å⁻¹, range 0.2–15.
The map is empty beyond the emission horizon |k| = √(2 E_kin).">
                <label for="kmax" class="label">k Range [Å⁻¹]<button type="button" class="help-badge"
                        data-help="How far out in momentum both views reach. Nothing exists beyond the emission horizon |k| = √(2 E_kin), so raising this past that radius only adds empty margin around the map.">?</button></label>
                <input type="number" id="kmax" value="3.0" min="0.2" max="15" step="0.1">
            </div>
            <div class="control-item" title="Sampling step of the 2D momentum map. Default 0.024 Å⁻¹, range 0.002–0.5.
Point count follows from this and the k range; cost grows as the square.">
                <label for="momentum-spacing" class="label">2D-Spacing Δk
                    [Å⁻¹]<button type="button" class="help-badge"
                        data-help="The pixel size of the momentum map. Finer sampling resolves an orbital's nodal structure more sharply and costs proportionally more time.">?</button></label>
                <input type="number" id="momentum-spacing" value="0.024" min="0.002" max="0.5" step="0.002">
            </div>
            <div class="control-item" title="Sampling step of the 3D momentum density. Default 0.10 Å⁻¹, range 0.02–0.5.
Cost grows as the cube.">
                <label for="momentum-field-spacing" class="label">Voxel Size
                    [Å⁻¹]<button type="button" class="help-badge"
                        data-help="The voxel size of the 3D momentum density. It samples a volume rather than a plane, so halving it costs roughly eight times the time.">?</button></label>
                <input type="number" id="momentum-field-spacing" value="0.10" min="0.02" max="0.5" step="0.01">
            </div>
            <div class="control-item" title="Isosurface level as a fraction of max |ψ̃(k)|². Default 0.20, range 0.01–1.
Lower encloses more of the density.">
                <label for="momentum-isovalue" class="label">Isovalue<button type="button" class="help-badge"
                        data-help="Where the surface of the 3D momentum density is drawn. It is taken relative to that density's own maximum, so 0.20 encloses a comparable share on any orbital.">?</button></label>
                <input type="number" id="momentum-isovalue" value="0.20" min="0.01" max="1" step="0.01">
            </div>
            {% if kpath %}<p class="group-title">k-Path<button type="button" class="help-badge"
                    data-help="The line the band map and the line profile are cut along, given by three corners it visits in order. Corners rather than an angle and an offset: rotating then shifting and shifting then rotating give different lines, so that pair names no single path. Leaving all three collinear keeps the cut straight.">?</button>
            </p>
            <hr class="divider">
            <div class="control-item" title="First corner of the cut, kx then ky. Default (−2.5, 0.0) Å⁻¹, range −15 to 15.
Editing any box draws the path on the map.
The cut is interpolated from the 2D map, so it carries that map's substrate, polarisation and detector settings.">
                <label for="kpath-k1x" class="label">k₁ [Å⁻¹]<button type="button" class="help-badge"
                        data-help="Where the cut starts. Typing here switches the path on over the map, where every corner can also be dragged.">?</button></label>
                <span class="value-group">
                    <input type="number" id="kpath-k1x" value="-2.5" min="-15" max="15" step="0.1">
                    <input type="number" id="kpath-k1y" value="0.0" min="-15" max="15" step="0.1">
                </span>
            </div>
            <div class="control-item" title="Middle corner, kx then ky. Default (0.0, 0.0) Å⁻¹ — Γ — range −15 to 15.
Move it off the line k₁k₃ to bend the path into two legs; the plots mark the kink with a dashed rule.">
                <label for="kpath-k2x" class="label">k₂ [Å⁻¹]<button type="button" class="help-badge"
                        data-help="The corner between the two legs. On the line from k₁ to k₃ the cut is a single straight one; moving it off that line gives a bent path, the way a band-structure plot runs Γ–X–M.">?</button></label>
                <span class="value-group">
                    <input type="number" id="kpath-k2x" value="0.0" min="-15" max="15" step="0.1">
                    <input type="number" id="kpath-k2y" value="0.0" min="-15" max="15" step="0.1">
                </span>
            </div>
            <div class="control-item"
                title="Last corner of the cut, kx then ky. Default (2.5, 0.0) Å⁻¹, range −15 to 15.
The cut walks k₁ → k₂ → k₃; k∥ is |k|, the distance of each sample from Γ. A path that misses Γ has no 0 among its labels.">
                <label for="kpath-k3x" class="label">k₃ [Å⁻¹]<button type="button" class="help-badge"
                        data-help="Where the cut ends. The plots walk the path once, from k₁ through k₂ to k₃, and label the axis with |k| — the distance of each sample from Γ — exactly the way a Γ–X–M band structure is drawn. A path that never passes through Γ therefore has no 0 among those numbers.">?</button></label>
                <span class="value-group">
                    <input type="number" id="kpath-k3x" value="2.5" min="-15" max="15" step="0.1">
                    <input type="number" id="kpath-k3y" value="0.0" min="-15" max="15" step="0.1">
                </span>
            </div>
            <p class="control-hint" id="kpath-readout"></p>{% endif %}
            {% if band_map %}<div class="control-item" title="Lowest and highest energy the band map is computed over.
Follows the loaded orbitals until you type; ↺ hands it back to them.
Filled in the first time the band map is built; typed in the current energy unit.">
                <label for="band-energy-min" class="label">Band E <span class="unit">[eV]</span><button type="button"
                        class="help-badge"
                        data-help="The energy window the band map's rows are laid out on. It normally spans whatever orbitals the list has loaded; narrowing it by hand puts the same number of rows over a smaller range, so a single band is resolved more finely.">?</button></label>
                <span class="value-group">
                    <input type="number" id="band-energy-min" step="0.1" placeholder="auto">
                    <input type="number" id="band-energy-max" step="0.1" placeholder="auto">
                    <button type="button" id="band-energy-reset" class="control-reset"
                        title="Follow the loaded orbitals again">↺</button>
                </span>
            </div>{% endif %}
        </div>
        <div class="list-column">
            <p class="group-title">Detector<button type="button" class="help-badge"
                    data-help="A real analyser has finite momentum resolution. This convolves the computed map with a Gaussian of the given width, so a calculation can be laid beside a measurement without either one being sharpened or blurred by hand.">?</button>
            </p>
            <hr class="divider">
            <div class="control-item" title="Gaussian k-resolution of a simulated analyser, as a FWHM. Default 0 (ideal), range 0–1 Å⁻¹.
σ = FWHM / (2√(2 ln 2)), truncated at 3σ.
Applied after the kernel: colorbar, cursor readout, thumbnails and every export carry the blur.">
                <label for="detector-resolution" class="label">Resolution FWHM
                    [Å⁻¹]<button type="button" class="help-badge"
                        data-help="The momentum resolution of the analyser being simulated. It is applied to the finished map, so an exported file carries exactly the blur shown on screen.">?</button></label>
                <input type="number" id="detector-resolution" value="0" min="0" max="1" step="0.01">
            </div>
            <p class="group-title">Real Space<button type="button" class="help-badge"
                    data-help="Resolution of the 3D grid ψ(r) is drawn on, and how much of it the surface encloses. The grid follows the molecule's own bounding box, so one value means the same resolution on any molecule.">?</button>
            </p>
            <hr class="divider">
            <div class="control-item" title="Voxel size of the 3D orbital grid. Default 0.20 Å, range 0.05–1.0.
Grid follows the molecule's own box; cost grows as the cube.">
                <label for="real-spacing" class="label">Voxel Size [Å]<button type="button" class="help-badge"
                        data-help="How finely ψ(r) is sampled before the isosurface is extracted. Coarse voxels give a faceted surface, fine ones cost cube-of-the-ratio more time.">?</button></label>
                <input type="number" id="real-spacing" value="0.20" min="0.05" max="1.0" step="0.01">
            </div>
            <div class="control-item" title="Isosurface level as a fraction of max |ψ(r)|. Default 0.20, range 0.01–1.
Lower encloses more of the orbital.">
                <label for="real-isovalue" class="label">Isovalue<button type="button" class="help-badge"
                        data-help="Where the lobes of the orbital are cut off for drawing. It is taken relative to the orbital's own maximum, so the same value shows a comparable share of any orbital.">?</button></label>
                <input type="number" id="real-isovalue" value="0.20" min="0.01" max="1" step="0.01">
            </div>
            <p class="group-title">Spectrum<button type="button" class="help-badge"
                    data-help="The line shape every orbital energy is drawn with, on the spectrum plot and on the band map alike - both stack the same broadened peaks, so a width means the same thing on either.{% if photoemission %} Below it, the spectrum's own axis and what the height of its peaks counts.{% endif %}">?</button>
            </p>
            <hr class="divider">
            <div class="control-item" title="Line shape each orbital energy is drawn with.
Gaussian · Lorentzian — same FWHM, much longer tails · Delta — one bare stick, no width.">
                <span class="label">Broadening<button type="button" class="help-badge"
                        data-help="The line shape the density of states is built from. Gaussian and Lorentzian share the width set below so the two can be compared directly; Delta removes the broadening and leaves the bare eigenvalue positions.">?</button></span>
                <div class="segmented" id="broadening-shape">
                    <label title="Gaussian line shape"><input type="radio" name="broadening-shape" value="gaussian"
                            checked><span>Gaussian</span></label>
                    <label title="Lorentzian line shape: same width, much longer tails"><input type="radio"
                            name="broadening-shape" value="lorentzian"><span>Lorentzian</span></label>
                    <label title="No broadening: one stick per orbital"><input type="radio" name="broadening-shape"
                            value="delta"><span>Delta</span></label>
                </div>
            </div>
            {# Disabled rather than hidden under Delta: taking the row out
            of the flow shifted every control below it on a shape change #}
            <div class="control-item" id="broadening-width-item" title="Full width at half maximum of the line shape. Default 0.235 eV, range 0.005–5.
Shared by Gaussian and Lorentzian; disabled under Delta.
Typed in the current energy unit, but travels in a share link as eV.">
                <label for="broadening-width" class="label">FWHM <span class="unit">[eV]</span><button type="button"
                        class="help-badge"
                        data-help="How wide each orbital's line is drawn. It is a display choice and not a computed lifetime, so it should be matched to the resolution of the experiment it is compared against.">?</button></label>
                <input type="number" id="broadening-width" value="0.235" min="0.005" max="5" step="0.005">
            </div>
            {# Both hidden in fixed-E_kin mode, where hν is derived per orbital
            rather than set: neither an axis nor an intensity means anything
            then. Same condition as the Photon Energy box itself, so they show
            exactly when it does - see toggleEnergyModeControls. #}
            {% if photoemission %}
            <div class="control-item" id="energy-reference-item" title="Binding — the orbital energy, E_vac at 0. Default.
Kinetic — E_kin = hν + E_orbital, taking hν from the Photon Energy box in either energy mode.
The axis alone: the peaks, the band map and every export stay in binding energy.">
                <span class="label">Energy Axis<button type="button" class="help-badge"
                        data-help="Which energy the spectrum is laid out on. A measured spectrum arrives as kinetic energy, and comparing one against this plot means putting both on that scale. The shift is rigid: no peak moves relative to another.">?</button></span>
                <div class="segmented" id="energy-reference">
                    <label title="Orbital energy, E_vac at 0"><input type="radio" name="energy-reference"
                            value="binding" checked><span>Binding</span></label>
                    <label title="E_kin = hν + E_orbital"><input type="radio" name="energy-reference"
                            value="kinetic"><span>Kinetic</span></label>
                </div>
            </div>
            <div class="control-item" id="spectrum-scaling-item" title="DOS — one count per orbital. Default.
EDC — the orbital's own momentum map summed over the detector plane, I = ∫ |ψ̃(k)|² dkx dky at its own E_kin. Zero where hν + E_orbital ≤ 0.
Flat: emission near the horizon counts like normal emission, where the solid angle ∫ dΩ carries a 1/kz weight.
The sum runs over the computed map, so k Range and 2D-Spacing enter it, and a k Range inside |k| = √(2 E_kin) cuts it short.
Only orbitals whose coefficients are loaded carry an EDC height.">
                <span class="label">Peak Scaling<button type="button" class="help-badge"
                        data-help="What a peak's height counts. Under DOS it is orbitals, one each. Under EDC it is the energy distribution curve an analyser collecting the whole detector plane records, at the geometry, light and energies the momentum map beside it was computed at.">?</button></span>
                <div class="segmented" id="spectrum-scaling">
                    <label title="One count per orbital"><input type="radio" name="spectrum-scaling" value="dos"
                            checked><span>DOS</span></label>
                    <label title="Energy distribution curve: I = ∫ |ψ̃(k)|² dkx dky over the detector plane"><input
                            type="radio" name="spectrum-scaling" value="edc"><span>EDC</span></label>
                </div>
            </div>
            {% endif %}
            <p class="group-title">Units<button type="button" class="help-badge"
                    data-help="The unit every energy on this page is shown in. It is a display conversion only: the database stores Hartree and the kernels work in Hartree throughout.">?</button>
            </p>
            <hr class="divider">
            <div class="control-item"
                title="Unit followed by the spectrum axis, the orbital{% if allow_nm_unit %} and exciton{% endif %} energy list and the Photon/Kinetic Energy boxes{% if allow_nm_unit %}, and by the photohole E_kin cells and strip{% endif %}.
eV · cm⁻¹ (× 8065.544) · Hartree (÷ 27.2114){% if allow_nm_unit %} · nm, E = hc/λ, hc = 1239.842 eV·nm{% endif %}.{% if allow_nm_unit %}
nm is not linear in E: Total Energy and the terms of any single formula stay in eV, cm⁻¹ or Hartree so that they still add up.{% endif %}">
                <span class="label">Energy Unit<button type="button" class="help-badge"
                        data-help="Which unit the spectrum axis, the energy columns and the energy boxes are read in. Changing it converts what is displayed and nothing that is stored or computed.">?</button></span>
                <div class="segmented" id="energy-unit">
                    <label title="Electronvolt"><input type="radio" name="energy-unit" value="eV"
                            checked><span>eV</span></label>
                    <label title="Wavenumber; 1 eV = 8065.544 cm⁻¹"><input type="radio" name="energy-unit"
                            value="cm-1"><span>cm⁻¹</span></label>
                    <label title="Hartree, the unit the database and the kernels use"><input type="radio"
                            name="energy-unit" value="hartree"><span>Hartree</span></label>
                    {% if allow_nm_unit %}
                    <label title="Vacuum wavelength, E = hc/λ with hc = 1239.842 eV·nm"><input type="radio"
                            name="energy-unit" value="nm"><span>nm</span></label>
                    {% endif %}
                </div>
            </div>
        </div>
    </section>

    <section class="pane-group list" id="pane-group-display" aria-label="Display" role="tabpanel">
        <div class="list-column">
            <p class="group-title">Atoms<button type="button" class="help-badge"
                    data-help="How the ball-and-stick model is drawn. These settings reach both 3D views and the POV-Ray and glTF exports, so a figure rendered offline matches the screen; a share link carries none of them.">?</button>
            </p>
            <hr class="divider">
            <div class="control-item slider-item"
                title="Scales every atom at once, on top of the per-element radii below. Default 100 %, range 10–250.">
                <label for="atom-scale" class="label">Atom Size<button type="button" class="help-badge"
                        data-help="One multiplier over the per-element radii. Bonds are drawn for pairs closer than 1.2 times the sum of their tabulated covalent radii, which this does not touch, so scaling the atoms never changes which bonds appear.">?</button></label>
                <input type="range" id="atom-scale" min="10" max="250" value="100">
            </div>
            <div class="control-item slider-item"
                title="Radius of the sticks between bonded atoms. Default 7, range 1–30.">
                <label for="bond-radius" class="label">Bond Size<button type="button" class="help-badge"
                        data-help="How thick the bonds are drawn. Which atoms are bonded is decided from tabulated covalent radii and is fixed; only the thickness is a choice.">?</button></label>
                <input type="range" id="bond-radius" min="1" max="30" value="7">
            </div>
            <div class="control-item" title="Colour of the sticks between bonded atoms. Default #808080.
One material for every bond; carried into the POV-Ray and glTF exports.">
                <label for="bond-color" class="label">Bond Colour<button type="button" class="help-badge"
                        data-help="The colour every bond is drawn in, as one shared material. Per-element atom colours sit in the rows below, one for each element this molecule actually contains.">?</button></label>
                <input type="color" id="bond-color" value="#808080">
            </div>
            {# One row per element this molecule contains, built by
            controls.js renderElementControls once the geometry is in #}
            <div id="element-controls"></div>
        </div>
        <div class="list-column">
            <p class="group-title">Visibility<button type="button" class="help-badge"
                    data-help="What each of the two 3D scenes draws. These are visibility toggles only; nothing here changes a computed value.">?</button>
            </p>
            <hr class="divider">
            <div class="control-item" title="Draw the orbital isosurface in the real-space view. On by default.">
                <label for="show-isosurface" class="label">Isosurface<button type="button" class="help-badge"
                        data-help="Whether the orbital is drawn at all, leaving the bare ball-and-stick molecule behind it. The level it is drawn at is the Real Space isovalue under Sampling.">?</button></label>
                <input type="checkbox" id="show-isosurface" checked>
            </div>
            <div class="control-item"
                title="Draw the incoming-light arrow. On by default; follows the polar and azimuthal angles.">
                <label for="show-photon" class="label">Light<button type="button" class="help-badge"
                        data-help="An arrow showing where the light comes from, drawn from the polar and azimuthal angles under Geometry &amp; Light. It is the same geometry the |A·k|² factor is evaluated in.">?</button></label>
                <input type="checkbox" id="show-photon">
            </div>
            <div class="control-item" title="Draw the photoemission sphere |k| = √(2 E_kin) in the momentum view. On by default.
The 2D map is this surface.">
                <label for="show-hemisphere" class="label">Hemisphere<button type="button" class="help-badge"
                        data-help="The surface energy conservation confines the photoelectron to. The 2D momentum map is exactly this hemisphere seen from above, so drawing it makes the relation between the two views visible.">?</button></label>
                <input type="checkbox" id="show-hemisphere" checked>
            </div>
            <div class="control-item" title="Draw the lab-frame axes in both 3D views. On by default.">
                <label for="show-axes" class="label">Axes<button type="button" class="help-badge"
                        data-help="The analyser's frame: z along the surface normal, x and y in the surface plane. Every momentum map is plotted in these axes.">?</button></label>
                <input type="checkbox" id="show-axes" checked>
            </div>
            <div class="control-item"
                title="Draw the molecular-frame axes x′/y′/z′ in both 3D views. Off by default; they follow φ/θ/ψ.">
                <label for="show-local-axes" class="label">Local Axes<button type="button" class="help-badge"
                        data-help="The molecule's own frame, which the three Euler angles carry away from the lab frame. Turning them on makes the current orientation readable at a glance.">?</button></label>
                <input type="checkbox" id="show-local-axes">
            </div>
            <div class="control-item" title="Draw the floor grid. On by default.
With a substrate selected it becomes that surface's net, with its lattice vectors.">
                <label for="show-grid" class="label">Grid<button type="button" class="help-badge"
                        data-help="The floor of the 3D scene. Once a substrate is chosen it stops being decoration and shows the actual surface net the domain averaging refers to.">?</button></label>
                <input type="checkbox" id="show-grid" checked>
            </div>
            {% if kpath %}<div class="control-item" title="Draw the k-Path over the 2D momentum map, with a handle at each end.
Drag an end to move it, or the line between them to move the whole path.">
                <label for="show-kpath" class="label">k-Path<button type="button" class="help-badge"
                        data-help="Shows where the band map and the line profile are cut from, on the map itself. The ends and the line drag, so a path can be set by eye and read back as numbers under Sampling.">?</button></label>
                <input type="checkbox" id="show-kpath">
            </div>{% endif %}
            {% if dipole %}<div class="control-item"
                title="Draw the selected exciton's transition dipole moment in the real-space view. On by default.">
                <label for="show-dipole" class="label">Dipole Vector<button type="button" class="help-badge"
                        data-help="An arrow for the selected exciton's transition dipole moment μ, from the molecule's centre. Its length is a fixed display scale, not to physical scale - only its direction and its length relative to other states are meaningful.">?</button></label>
                <input type="checkbox" id="show-dipole" checked>
            </div>{% endif %}
        </div>
    </section>

    {# Colour and its opacity share one row where a scene element has
    both (Density, Hemisphere) - label, then slider, then swatch,
    the same order as the per-element rows in Atoms. #}
    <section class="pane-group list" id="pane-group-colours" aria-label="Colours" role="tabpanel">
        <div class="list-column">
            <p class="group-title">Orbital<button type="button" class="help-badge"
                    data-help="How the momentum maps and the orbital surfaces are coloured. None of these settings travel in a share link, so a link reproduces the physics of a view but not its styling.">?</button>
            </p>
            <hr class="divider">
            <div class="control-item" title="Colour range of every momentum map. Intensity in arbitrary units.
Per map — each map to its own maximum. Default; maps not comparable.
Shared — one range over the main map and all thumbnails.
Fixed — the range set below; values outside are clipped.
Comparable only under fixed E_kin, where all orbitals share one hemisphere.
Signed maps (dichroism) always get a range symmetric about 0.">
                <span class="label">Intensity Scale<button type="button" class="help-badge"
                        data-help="Whether two maps on this page can be compared by eye. The default, Per map, scales each map to its own maximum, so every map fills the colour ramp and none of them carries absolute information; Shared and Fixed put them on one range instead.">?</button></span>
                <div class="segmented" id="intensity-scale">
                    <label title="Each map to its own maximum"><input type="radio" name="intensity-scale" value="each"
                            checked><span>Per map</span></label>
                    <label title="One range over every map on the page"><input type="radio" name="intensity-scale"
                            value="shared"><span>Shared</span></label>
                    <label title="The range set below; values outside are clipped"><input type="radio"
                            name="intensity-scale" value="fixed"><span>Fixed</span></label>
                </div>
            </div>
            <div class="control-item" id="intensity-range-item" hidden
                title="Lower and upper bound of the colour range, in the map's arbitrary units. Shown under Fixed only.">
                <span class="label">Range<button type="button" class="help-badge"
                        data-help="The fixed colour range. Typed bounds stay put across parameter changes, so a series of screenshots taken at different settings can be read against each other.">?</button></span>
                <span class="value-group">
                    <input type="number" id="intensity-min" value="0" step="any">
                    <input type="number" id="intensity-max" value="1" step="any">
                </span>
            </div>
            <div class="control-item" title="Colormap of the momentum maps. Default Viridis.
Custom puts editable stops on the colorbar itself.">
                <label for="colormap" class="label">Colormap<button type="button" class="help-badge"
                        data-help="Which colour ramp intensity is read through. Viridis, Cividis and Greys are perceptually uniform, so equal steps in colour are equal steps in intensity; Cool-Warm and Blue-White-Red are diverging and suit a signed dichroism map. Custom puts its stops on the colorbar itself, where they can be added, recoloured, moved and removed.">?</button></label>
                <select id="colormap">
                    <option value="viridis" selected>Viridis</option>
                    <option value="magma">Magma</option>
                    <option value="inferno">Inferno</option>
                    <option value="plasma">Plasma</option>
                    <option value="cividis">Cividis</option>
                    <option value="turbo">Turbo</option>
                    <option value="greys">Greys</option>
                    <option value="coolwarm">Cool-Warm</option>
                    <option value="bwr">Blue-White-Red</option>
                    <option value="hot">Hot</option>
                    <option value="custom">Custom…</option>
                </select>
            </div>
            <p class="control-hint" id="colormap-hint" hidden>
                Click the colorbar to add a stop, a stop to recolour it,
                drag to move it, right-click to remove it.
            </p>
            <div class="control-item" title="The two signs of ψ(r). Defaults #2563c0 for ψ > 0, #c03a30 for ψ < 0.">
                <span class="label">Lobe Colours<button type="button" class="help-badge"
                        data-help="The two lobe colours are the sign of the wavefunction, not its magnitude. The charge density |ψ(r)|² has no sign, so in that view neither colour applies.">?</button></span>
                <span class="value-group">
                    <input type="color" id="positive-lobe-color" title="ψ &gt; 0" value="#2563c0">
                    <input type="color" id="negative-lobe-color" title="ψ &lt; 0" value="#c03a30">
                </span>
            </div>
            <div class="control-item slider-item" title="Opacity of the orbital isosurface. Default 100 %, range 5–100.
Below 100 % the surface sorts its own faces; a complex orbital can look torn.">
                <label for="isosurface-opacity" class="label">Lobe Opacity<button type="button" class="help-badge"
                        data-help="How far through the orbital the view sees. Lowering it brings out the atoms and the opposite lobe behind the surface.">?</button></label>
                <input type="range" id="isosurface-opacity" min="5" max="100" value="100">
            </div>
            <div class="control-item slider-item" title="Colour and opacity of |ψ|²: the 3D momentum density and the real-space charge density.
Default #e8843c at 100 %.">
                <span class="label">Density<button type="button" class="help-badge"
                        data-help="One setting for both squared-modulus surfaces: the 3D momentum density, and the real-space charge density a combined orbital selection falls back to.">?</button></span>
                <span class="value-group">
                    <input type="range" id="momentum-opacity" min="5" max="100" value="100">
                    <input type="color" id="momentum-color" value="#e8843c">
                </span>
            </div>
        </div>
        <div class="list-column">
            <p class="group-title">Scene<button type="button" class="help-badge"
                    data-help="Colours of everything in the 3D views that is not the orbital itself. Like the rest of this pane they are styling only, and no share link carries them.">?</button>
            </p>
            <hr class="divider">
            <div class="control-item slider-item" title="Colour and opacity of the photoemission hemisphere. Default #16354a at 25 %.
The 3D density sits inside it, so it stays see-through.">
                <span class="label">Hemisphere<button type="button" class="help-badge"
                        data-help="The sphere |k| = √(2 E_kin) drawn in the momentum view. It encloses the 3D density, so a low opacity is what lets the density be seen at all.">?</button></span>
                <span class="value-group">
                    <input type="range" id="hemisphere-opacity" min="5" max="100" value="25">
                    <input type="color" id="hemisphere-color" value="#16354a">
                </span>
            </div>
            <div class="control-item" title="Colour of the incoming-light wave. Default #ffc107.">
                <label for="photon-color" class="label">Light<button type="button" class="help-badge"
                        data-help="The colour of the light arrow in both 3D scenes. Its direction comes from the polar and azimuthal angles, not from here.">?</button></label>
                <input type="color" id="photon-color" value="#ffc107">
            </div>
            {% if dipole %}<div class="control-item" title="Colour of the dipole moment arrow. Default #8e44ad.">
                <label for="dipole-color" class="label">Dipole Vector<button type="button" class="help-badge"
                        data-help="The colour of the selected exciton's transition dipole arrow in the real-space view.">?</button></label>
                <input type="color" id="dipole-color" value="#8e44ad">
            </div>{% endif %}
            <div class="control-item" title="Colour of the floor grid in both 3D views. Default #b9c4cc.">
                <label for="grid-color" class="label">Grid<button type="button" class="help-badge"
                        data-help="The colour of the floor grid, and of the surface net it becomes once a substrate is selected.">?</button></label>
                <input type="color" id="grid-color" value="#b9c4cc">
            </div>
            <div class="control-item" title="Background of both 3D views. Default #fafafa.
The PNG snapshots are taken on it; the POV-Ray scene renders on white.">
                <label for="background-color" class="label">Background<button type="button" class="help-badge"
                        data-help="The backdrop of both 3D scenes, and of the PNG snapshots taken from them. A figure meant for print is usually easier to place on a plain white one.">?</button></label>
                <input type="color" id="background-color" value="#fafafa">
            </div>
        </div>
    </section>

    {% if extra_control_groups %}{% include extra_control_groups %}{% endif %}
</div>