/* The ESA page: only what the models page's stylesheet (models.css, loaded before this) doesn't have. */

/* (the first title band at the menu's very top) */
.esa-app #controls { padding-top: 0; }
.esa-app .esa-exit { margin-top: 12px; }
.esa-app .esa-exit.esa-primary { background: #c62828; border-color: #c62828; color: #fff; }
[data-theme="dark"] .esa-app .esa-exit.esa-primary { background: #e05252; border-color: #e05252; }
.esa-app .esa-exit[hidden] { display: none; }
.esa-app .pane-field > .seg-toggle { width: 100%; box-sizing: border-box; }
.esa-seg { display: flex; }
.esa-seg button { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0.35rem 0.4rem; }
.esa-seg button:disabled { opacity: 0.4; cursor: not-allowed; }
/* The EOF's variable: a small card each (selected: as the other choices beside it; the panel's are gray, for Generate ESA) */
.models-app .esa-var-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.models-app .esa-var-cards button { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 3px 2px; border: 1px solid var(--border); border-radius: 7px;
    background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer; }
.models-app .esa-var-cards button:hover:not(.active):not(:disabled) { color: var(--text); border-color: var(--accent); }
.models-app .esa-var-cards button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.models-app .esa-var-cards button:disabled { opacity: 0.4; cursor: not-allowed; }
.models-app .esa-prompt .esa-var-cards button.active { background: #d5dbe3; border-color: #aab4c0; color: var(--text); }
[data-theme="dark"] .models-app .esa-prompt .esa-var-cards button.active { background: #46515f; border-color: #6b7787; color: var(--text); }
.esa-seg button:disabled:hover { color: var(--text-muted); border-color: transparent; }
.esa-plots { display: grid; gap: 4px; }
.esa-app .esa-plots button { width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; }
.esa-app .esa-plots button:hover { background: var(--hover); }
.esa-app .esa-plots button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.esa-app .esa-hint { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }

.esa-bar-title { font-size: 14px; font-weight: 700; color: var(--text); }

/* (.esa-app: ahead of models.css's plain .models-app button) */
.esa-app .esa-primary, .esa-app .esa-secondary { width: 100%; padding: 7px 10px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.esa-app .esa-primary { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.esa-app .esa-primary:hover { filter: brightness(1.08); }
.esa-app .esa-primary.active { background: transparent; color: var(--accent); }
.esa-app .esa-secondary { border: 1px solid var(--border); background: transparent; color: var(--text); }
.esa-app .esa-secondary:hover { background: var(--hover); }
.esa-app .esa-save-eof { justify-self: center; max-width: 100%; }
.esa-app .esa-save-eof:disabled { opacity: 0.5; cursor: default; }

/* The plot title in ESA mode: two lines on the left, two on the right; narrow screens: one after the other */
.models-app .plot-title.esa-titled { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
.models-app .esa-titled .pt-title { white-space: pre-line; }
.models-app .esa-titled .pt-sub { white-space: pre-line; text-align: right; }
@media (max-width: 860px) {
    .models-app .plot-title.esa-titled { grid-template-columns: minmax(0, 1fr); }
    .models-app .esa-titled .pt-sub { text-align: left; }
}

/* What's being computed, over the map's top */
.esa-status { position: absolute; z-index: 3; top: calc(var(--title-h) + 10px); left: calc(var(--sidebar-w) + (100% - var(--sidebar-w)) / 2); transform: translateX(-50%);
    max-width: 70%; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; pointer-events: none;
    background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.esa-status[hidden] { display: none; }
.esa-status.bad { color: #c0392b; border-color: #c0392b; }
[data-theme="dark"] .esa-status.bad { color: #ff8a80; border-color: #ff8a80; }

/* ESA mode's hover labels (esa.js setupHoverTips): on the float layer, above the menu and the map */
.models-app .esa-tip { position: fixed; z-index: 61; max-width: 270px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.35; pointer-events: none;
    background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(16, 34, 56, 0.22); }
.models-app .esa-tip[hidden] { display: none; }
.models-app .esa-tip > div + div { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border); }
.esa-tip .esa-pos { color: #c62828; font-weight: 700; }
.esa-tip .esa-neg { color: #1565c0; font-weight: 700; }
[data-theme="dark"] .esa-tip .esa-pos { color: #ff8a80; }
[data-theme="dark"] .esa-tip .esa-neg { color: #82b1ff; }

/* The box while it is dragged, and its popup */
.esa-box-drag { position: absolute; z-index: 2; border: 2px solid #800080; background: rgba(128, 0, 128, 0.08); pointer-events: none; }
[data-theme="dark"] .esa-box-drag { border-color: #d48cff; background: rgba(212, 140, 255, 0.1); }
.esa-box-drag span { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
    font-size: 11.5px; font-weight: 700; background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--border); }
.esa-box-drag.capped span { display: block; }
.esa-prompt .tg-body { gap: 7px; }
.models-app .esa-prompt.tg-modal { width: auto !important; }   /* (narrow windows: the window's width, as the viewer's modals) */
.esa-prompt-foot { flex: none; padding: 0 12px 12px; }
.esa-prompt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.esa-prompt-seg { flex: none; border-radius: 8px; padding: 2px; }
.esa-prompt-stack { flex-direction: column; align-items: stretch; gap: 4px; }
.esa-prompt-seg button { padding: 0.15rem 0.55rem; font-size: 0.74rem; border-radius: 6px; border: 0; background: transparent; }
/* (selected: gray, so the one blue button is Generate ESA) */
.models-app .esa-prompt-seg button.active { background: #d5dbe3; color: var(--text); box-shadow: none; }
[data-theme="dark"] .models-app .esa-prompt-seg button.active { background: #46515f; color: var(--text); }
.esa-inset { position: relative; justify-self: center; max-width: 100%; border: 1px solid var(--legend-edge); overflow: hidden; }
.esa-inset-field, .esa-inset-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.esa-inset-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--border); white-space: nowrap; }
.esa-inset-msg[hidden] { display: none; }
.esa-inset-var { min-height: 1.3em; font-size: 12.5px; font-weight: 700; line-height: 1.3; text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
    .esa-status { left: 50%; }
}

/* Narrow screens (esa-narrow.js NARROW): as the stratosphere page, a bar of tabs along the bottom under the slider, in place of the left menu, which
   stays laid out out of sight (its controls drive the page, its inset keeps its size for saved images); the main actions over the map */
.esa-tabs, .esa-map-actions { display: none; }
:root { --esa-tab-h: 0px; }
@media (max-width: 860px) {
    :root { --esa-tab-h: 46px; }
    body.esa-mode { --esa-tab-h: 62px; }
    .loop-bar { bottom: calc(var(--esa-tab-h) + env(safe-area-inset-bottom, 0px)); }
    .models-app.esa-app.loop-open { bottom: calc(var(--loop-h) + var(--esa-tab-h) + env(safe-area-inset-bottom, 0px)); }
    .models-app.esa-app #controls { transform: translateX(-102%); visibility: hidden; transition: none; }

    .esa-tabs { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; display: flex; align-items: stretch; box-sizing: content-box; height: var(--esa-tab-h);
        padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg-card); border-top: 1px solid var(--border); font-family: Figtree, system-ui, sans-serif; }
    .esa-tab-group { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; padding: 1px 6px 2px; box-sizing: border-box; }
    .esa-tab-group[hidden] { display: none; }
    .esa-tab-of { flex-grow: 2; }
    .esa-tab-to { border-left: 1px solid var(--border); }
    .esa-tab-cap { padding-top: 2px; text-align: center; font-size: 0.76rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; color: var(--text); }
    .esa-tab-row { flex: 1; display: flex; gap: 4px; min-height: 0; }
    .esa-tab-row button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 0.2rem; border: 0; border-radius: 8px;
        background: none; color: var(--text); font: inherit; font-size: 0.92rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
    .esa-tab-row button.active { background: var(--accent-soft); color: var(--accent); }
    .esa-tabs .tab-name { line-height: 1.15; }
    .esa-tabs .tab-val { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 0.78rem; font-weight: 400; line-height: 1.2; color: var(--text); opacity: 0.6; }
    .esa-tabs .tab-val:empty { display: none; }

    .models-app .esa-map-actions { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--bars-h) + 26px); transform: translateX(-50%); display: flex; gap: 8px; }
    .models-app .esa-map-actions[hidden] { display: none; }
    .esa-app .esa-map-actions .esa-primary { width: auto; margin: 0; padding: 7px 14px; white-space: nowrap; font-size: 12.5px; box-shadow: 0 2px 10px rgba(16, 34, 56, 0.35); }
    .esa-app .esa-map-actions .esa-primary.active { background: var(--panel-bg); }
}
@media (max-width: 720px) {
    body.loop-stacked .models-app.esa-app.loop-open { bottom: calc(var(--loop-h-stacked) + var(--esa-tab-h) + env(safe-area-inset-bottom, 0px)); }
}
.models-floats .tab-menu .dd-opt.disabled { opacity: 0.45; cursor: default; }
/* The EOF box: a modal centered, at any narrow width */
.models-app.models-floats.esa-app .tg-panel.esa-eof-panel.tg-modal { left: 50% !important; top: 50% !important; right: auto; transform: translate(-50%, -50%); width: min(340px, calc(100vw - 16px)); }
.esa-eof-panel .tg-body { justify-items: stretch; }
.esa-eof-panel .esa-inset { justify-self: center; }