/* Export menu. Loaded by v2/index.html after styles_v1.3.css, which owns every custom
 * property used here.
 *
 * Colour follows the house rule in styles_v1.3.css: chrome may only be olive or straw,
 * and the Okabe-Ito set is reserved for things that encode a measurement. So the chosen
 * format segment, the ticked radios and the Download button are olive, hover is a straw
 * wash, and nothing in this panel is ever cyan, amber or green even though a "success"
 * green for the download status would be the obvious reach.
 *
 * An open panel is olive rather than straw on the trigger, because a panel stays open
 * after the pointer leaves it. Straw is only ever where the cursor or the keyboard is
 * right now.
 */

/* The trigger is the sidebar rail's Export button, restyled in place.
 *
 * THE SELECTOR IS #btn-hotspots-export AND IT USED TO SAY #btn-hotspots-download, which is an
 * id no file in this project carries. Every rule in this block was therefore dead: no caret
 * was ever drawn and an open panel left its button looking shut. A CSS selector that matches
 * nothing is not an error, which is why this survived, and it is why the id is named in the
 * comment on the button in both index.html files as one of the three places that move
 * together.
 *
 * The caret stays next to the label rather than being pushed to the button's right edge with
 * `margin-left: auto`. The button is full width on the rail now, and .btn centres its
 * contents; one auto margin would eat all the free space and drag the icon and label to the
 * left, leaving Export as the only misaligned button on a rail where Reset Filters directly
 * above it is centred. */
#btn-hotspots-export::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: var(--transition-fast);
}
#btn-hotspots-export[aria-expanded="true"] {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
#btn-hotspots-export[aria-expanded="true"]::after {
    transform: rotate(180deg);
}
#btn-hotspots-export:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.ex-panel {
    position: absolute;
    z-index: 1000;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    /* Opaque, for the same reason .col-filter-popover is: this floats over the densest
       table on the site and a translucent fill let the rows read through the labels. */
    background: var(--bg-card);
    border: 1px solid var(--border-color-strong);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(39, 70, 89, 0.18);
    font-family: var(--font-family);
    font-size: 0.82rem;
    color: var(--text-primary);
    overflow-y: auto;
}

/* The panel takes focus on open (it is the dialog, not a control), and a ring around the
   whole box would just outline the border that is already there. The controls inside
   keep their own rings. */
.ex-panel:focus {
    outline: none;
}

.ex-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ex-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Segmented control, same shape as .mode-toggle so Format reads as the same kind of
   choice as Loss/Gain and Mutation/Site/Gene. Real radios kept in the DOM and hidden
   visually, so arrow keys, labels and screen readers all work without scripting. */
.ex-seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--bg-sunken);
    border: 1px solid var(--border-color-strong);
    border-radius: 9px;
}
.ex-seg input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.ex-seg label {
    flex: 1;
    padding: 7px 10px;
    background: var(--bg-card);   /* light key on a tinted track, as .mode-toggle-btn */
    border-radius: 6px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}
.ex-seg label:hover {
    color: var(--text-primary);
    background-color: var(--straw-tint);   /* opaque: the key under it is opaque too */
}
.ex-seg input:checked + label {
    color: #fff;
    font-weight: 600;
    background-color: var(--primary);
    box-shadow: 0 1px 2px rgba(39, 70, 89, 0.18);
}
.ex-seg input:checked + label:hover {
    background-color: var(--accent-dark);
}
.ex-seg input:focus-visible + label {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.ex-choices {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ex-choices label,
.ex-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    line-height: 1.35;
    cursor: pointer;
}
.ex-choices label:hover,
.ex-check:hover {
    background-color: var(--straw-wash);
}
.ex-choices input,
.ex-check input {
    margin: 2px 0 0;
    /* One line instead of a custom control: accent-color paints the browser's own radio
       and checkbox olive, and keeps their native keyboard behaviour intact. */
    accent-color: var(--primary);
    flex-shrink: 0;
}
.ex-choices input:focus-visible,
.ex-check input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.ex-choices em,
.ex-check em {
    display: block;
    font-style: normal;
    font-size: 0.74rem;
    color: var(--text-muted);
}

/* The two row scopes are the same set whenever the table is not truncated. Dimmed rather
   than removed, so the control does not change shape as the row count crosses the cap. */
.ex-choices label.is-moot {
    opacity: 0.45;
}

.ex-actions {
    display: flex;
    padding-top: 2px;
}
.ex-primary {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background-color: var(--primary);
    color: #fff;
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}
.ex-primary:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}
.ex-primary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.ex-share {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.ex-share button {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-family);
    font-size: 0.8rem;
    color: var(--primary-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.ex-share button:hover {
    color: var(--accent-dark);
}
.ex-share button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 3px;
}
.ex-link-out {
    width: 100%;
    padding: 5px 7px;
    background: var(--bg-header);
    border: 1px solid var(--border-color-strong);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.ex-status {
    margin: 0;
    min-height: 1em;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.ex-status:empty {
    display: none;
}