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

/* (the plot title, colorbar dock and loop bar around the panels, rather than over them as over a map) */
.panels-app { --panels-margin: 0px; background: var(--panel-bg); }   /* panels narrower than the room: split either side of them and their colorbar (panels.js layoutPanels) */
.panels-app #map { top: var(--title-h); left: calc(var(--sidebar-w) + var(--panels-margin)); right: calc(var(--bars-w) + var(--panels-margin)); bottom: var(--bars-h); overflow: hidden; background: var(--panel-bg); }
.panels-app .cb-dock:not(.horizontal) { right: var(--panels-margin); }
@media (max-width: 860px) {
    .panels-app #map { left: var(--panels-margin); }
}
#panels-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#panels-cells { position: absolute; inset: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
#panels-cells.dragging { cursor: grabbing; }
/* (the panels' own edges: on top of the canvas, which has every panel at its integer pixel size) */
.panels-cell { position: absolute; box-sizing: border-box; outline: 1px solid var(--legend-edge); pointer-events: none; }
/* A panel's label: opens the member (panels.js memberButton). (.panels-app: ahead of models.css's plain .models-app button) */
.panels-app .panels-member-btn { position: absolute; top: 3px; left: 3px; padding: 0 7px; border: 1px solid var(--border); border-radius: 4px; font: inherit; font-size: 12px; font-weight: 700; line-height: 18px;
    font-variant-numeric: tabular-nums; background: var(--panel-bg); color: var(--panel-fg); opacity: 0.92; cursor: pointer; pointer-events: auto;
    transition: box-shadow 0.12s, border-color 0.12s, opacity 0.12s; }
.panels-app .panels-member-btn:hover, .panels-app .panels-member-btn:focus-visible { opacity: 1; border-color: var(--accent); box-shadow: 0 1px 6px rgba(0,0,0,0.4); outline: none; }
.panels-member-btn::after { content: attr(data-tip); display: none; position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; padding: 3px 8px; border-radius: 4px; white-space: nowrap;
    font-size: 11.5px; font-weight: 600; line-height: 16px; background: var(--panel-fg); color: var(--panel-bg); box-shadow: 0 1px 5px rgba(0,0,0,0.3); pointer-events: none; }
.panels-member-btn.tip-left::after { left: auto; right: 0; }
/* K-means across suites or cycles: each one's members in the cluster, in its own ink (panels.js mixRow): a row over each of All clusters' panels, a box at one cluster's upper left */
.panels-mix { position: absolute; box-sizing: border-box; display: flex; align-items: center; padding: 0 7px; overflow: hidden; white-space: nowrap; pointer-events: none;
    font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.panels-mix span { color: var(--ink-l); }
[data-theme="dark"] .panels-mix span { color: var(--ink-d); }
.panels-mix span + span { margin-left: 9px; padding-left: 9px; border-left: 1px solid var(--border); line-height: 11px; }
.panels-mix.corner { top: 3px; left: 3px; height: 22px; border: 1px solid var(--border); border-radius: 4px; background: var(--panel-bg); opacity: 0.92; }
.panels-member-btn:hover::after, .panels-member-btn:focus-visible::after { display: block; }

/* The basemap maps: never seen, but with a real size (their canvases are copied from) */
#panels-base { position: absolute; left: 0; top: 0; z-index: -1; visibility: hidden; pointer-events: none; }
#panels-base > div { position: absolute; left: 0; top: 0; width: 300px; height: 200px; }   /* (until the first layout: a map of no size never loads) */

.panels-zoom { position: absolute; z-index: 2; top: 6px; right: 6px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px;
    overflow: hidden; background: var(--panel-bg); box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
/* (.panels-app: ahead of models.css's plain .models-app button) */
.panels-app .panels-zoom button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--panel-fg); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.panels-app .panels-zoom button + button { border-top: 1px solid var(--border); }
.panels-app .panels-zoom button:hover { background: var(--hover); }

/* What's loading, over the panels' top */
.panels-status { position: absolute; z-index: 3; top: 10px; left: 50%; 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); }
.panels-status[hidden] { display: none; }
.panels-status.bad { color: #c0392b; border-color: #c0392b; }
[data-theme="dark"] .panels-status.bad { color: #ff8a80; border-color: #ff8a80; }

/* The menu's controls */
.panels-app .pane-field > .seg-toggle { width: 100%; box-sizing: border-box; }
.panels-app .pane-section[hidden] { display: none; }
.panels-seg { display: flex; }
.panels-seg button { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0.35rem 0.4rem; }
/* The data credits at the map's bottom left, as /models's MapLibre attribution (12 px on a half-clear band), the corner stack above them
   (models.css offsets it for that and the colorbar: here the colorbar isn't under it) */
.panels-attrib { position: absolute; z-index: 4; left: 0; bottom: 0; padding: 0 5px; font-size: 12px; line-height: 20px; color: var(--text);
    background: rgba(255, 255, 255, 0.5); pointer-events: none; white-space: nowrap; }
[data-theme="dark"] .panels-attrib { background: var(--bg-card); color: var(--text-muted); }
.panels-app .map-corner { bottom: 26px; left: 8px; }

/* Layers: /models's list and editors, without what doesn't apply to a fixed set of layers (delete, reorder) */
.panels-app .layer-row .layer-actions .layer-remove, .panels-app .layer-row .layer-handle, .panels-app .layer-hint { display: none; }
.panels-app .pane-section:has(.layer-empty) { display: none; }

/* Parameter: each category's label with its rows indented under it */
.panels-app #pick-list { gap: 2px; }
.panels-param-label { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--panel-fg); }
.panels-param-label:first-child { margin-top: 0; }
.panels-app #pick-list .pick-rows { margin-left: 10px; }

/* Member view's menu */
.panels-member-section { display: grid; gap: 8px; }
.panels-member-section[hidden] { display: none; }
.panels-member-name { padding: 2px 12px; text-align: center; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--panel-fg); }
.panels-app .panels-member-exit { width: 100%; padding: 8px 12px; border: 1px solid #c62828; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 700; background: #d32f2f; color: #fff; cursor: pointer; }
.panels-app .panels-member-exit:hover { background: #b71c1c; border-color: #b71c1c; }

/* The Cluster button and its dropdown */
.section-bar .panels-cluster-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font: 600 13.5px/1 Figtree, system-ui, sans-serif; background: var(--bg-card); color: var(--text); cursor: pointer; }
.section-bar .panels-cluster-btn svg { width: 16px; height: 16px; }
.section-bar .panels-cluster-btn .panels-cluster-chev { width: 13px; height: 13px; }
.section-bar .panels-cluster-btn:hover:not(:disabled), .section-bar .panels-cluster-btn[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.section-bar .panels-cluster-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.section-bar .panels-cluster-btn[hidden] { display: none; }
/* Save Image's label: "Save" on a narrow screen (panels.js NARROW's width) */
.section-bar #save-img-btn .save-short { display: none; }
@media (max-width: 860px) {
    .section-bar #save-img-btn .save-long { display: none; }
    .section-bar #save-img-btn .save-short { display: inline; }
}

/* Analyze Clusters (panels.js openAnalyze): a pie per cluster, or per suite or cycle, its members' shares; a suite's or cycle's ink as the mix row's (--ink-l, --ink-d) */
.ac-modal { width: min(900px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.ac-body { display: grid; gap: 10px; }
.ac-note { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.ac-main { display: flex; align-items: flex-start; gap: 12px; }
.ac-main .ac-grid { flex: 0 1 auto; min-width: 0; }
.ac-legend { flex: none; display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); font-size: 12.5px; font-weight: 600; color: var(--text); }
.ac-legend-item { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.ac-legend .sw { width: 12px; height: 12px; border-radius: 2px; background: var(--ink-l); }
[data-theme="dark"] .ac-legend .sw { background: var(--ink-d); }
.ac-legend .sw.mark { width: auto; height: auto; background: none; display: inline-flex; }
@media (max-width: 640px) {
    .ac-main { flex-direction: column; align-items: stretch; }
    .ac-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
    .ac-grid .ac-card { flex: 1 1 140px; }
}
.ac-grid { display: flex; flex-wrap: wrap; gap: 10px; }   /* (cards of one width: the legend just right of them) */
.ac-card { flex: 0 0 172px; box-sizing: border-box; display: grid; justify-items: center; gap: 6px; padding: 10px 10px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); }
.ac-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.ac-pie { display: block; width: 124px; height: 124px; }
.ac-pie path, .ac-pie circle.part { stroke: var(--bg-card); stroke-width: 2; cursor: default; }
.ac-pie .ink { fill: var(--ink-l); }
[data-theme="dark"] .ac-pie .ink { fill: var(--ink-d); }
.ac-pie path:hover, .ac-pie circle.part:hover { opacity: 0.85; }
.ac-total { font: 700 20px Figtree, system-ui, sans-serif; fill: var(--text); }
.ac-total-sub { font: 500 10.5px Figtree, system-ui, sans-serif; fill: var(--text-muted); }
.ac-rows { width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; column-gap: 6px; row-gap: 2px; align-items: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.ac-rows .sw { width: 10px; height: 10px; border-radius: 2px; background: var(--ink-l); }
[data-theme="dark"] .ac-rows .sw { background: var(--ink-d); }
.ac-rows .sw.mark { width: auto; height: auto; background: none; display: inline-flex; }
.ac-rows .nm { color: var(--text); font-weight: 600; white-space: nowrap; }
.ac-rows .ct { color: var(--text-muted); text-align: right; }
.ac-rows .pc { color: var(--text); font-weight: 700; text-align: right; min-width: 3.2em; }
.ac-rows .zero { opacity: 0.55; }
.ac-tip { position: fixed; z-index: 1000; }
.panels-cluster-menu { position: fixed; z-index: 400; }
.panels-cluster-menu[hidden] { display: none; }
.panels-cluster-menu .ctx-item:disabled { opacity: 0.45; cursor: not-allowed; }

/* Choosing members */
.panels-cluster-cards { display: grid; gap: 8px; }
.panels-cluster-card { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-left: 4px solid var(--cluster-ink); border-radius: 8px; --cluster-ink: var(--panel-fg); }
.panels-cluster-card.card-b { --cluster-ink: #dc1e1e; }
.panels-cluster-card.adding { box-shadow: 0 0 0 2px var(--accent); border-color: transparent; border-left-color: var(--cluster-ink); }
.panels-cluster-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.panels-cluster-name { font-size: 13.5px; font-weight: 700; color: var(--panel-fg); }
.panels-cluster-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.panels-app .panels-cluster-add { width: 100%; padding: 5px 8px; border: 1px solid var(--accent); border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 600; background: transparent; color: var(--accent); cursor: pointer; }
.panels-app .panels-cluster-add:hover, .panels-app .panels-cluster-add[aria-pressed="true"] { background: var(--accent); color: #fff; }
.panels-cluster-list { display: flex; flex-wrap: wrap; gap: 4px; }
.panels-cluster-empty { font-size: 12px; color: var(--muted); }
.panels-app .panels-cluster-chip, .panels-build-pop .panels-cluster-chip { padding: 1px 7px; border: 1px solid var(--cluster-ink); border-radius: 4px; font: inherit; font-size: 11.5px; font-weight: 700; line-height: 17px; font-variant-numeric: tabular-nums; background: transparent; color: var(--cluster-ink); cursor: pointer; }
.panels-app .panels-cluster-chip:hover, .panels-build-pop .panels-cluster-chip:hover { background: var(--cluster-ink); color: var(--panel-bg); }
.panels-app .panels-cluster-go { width: 100%; margin-top: 8px; padding: 9px 12px; border: 1px solid var(--accent); border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 700; background: var(--accent); color: #fff; cursor: pointer; }
.panels-app .panels-cluster-go:hover:not(:disabled) { filter: brightness(1.08); }
.panels-app .panels-cluster-go:disabled { opacity: 0.45; cursor: not-allowed; }
.panels-cluster-note { min-height: 15px; margin: 4px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; }
.panels-app .panels-cluster-cancel { width: 100%; margin-top: 4px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 600; background: transparent; color: var(--panel-fg); cursor: pointer; }
.panels-app .panels-cluster-cancel:hover { background: var(--hover); }
.panels-app .panels-cluster-exit[hidden] { display: none; }

/* The labels while choosing */
.panels-app .panels-member-btn.in-a { background: var(--panel-fg); color: var(--panel-bg); border-color: var(--panel-fg); opacity: 1; }
.panels-app .panels-member-btn.in-b { background: #dc1e1e; color: #fff; border-color: #dc1e1e; opacity: 1; }
.panels-app .panels-member-btn.inert { cursor: default; }

/* (the first section shown: its title tucked against the top, as models.css does for the first one, when Data Source before it is hidden) */
.panels-app .side-pane > .pane-section[hidden]:first-child + .pane-section > .pane-title { margin-top: -12px; }
.panels-app #pick-list .pick-row[hidden] { display: none; }

/* K-means cluster: its marks' colors (color + shape: see panels.js kmMark) and modal */
:root { --km-1: #2a78d6; --km-2: #1baf7a; --km-3: #eda100; --km-4: #008300; --km-5: #e34948; }
[data-theme="dark"] { --km-1: #3987e5; --km-2: #2bd29a; --km-3: #d9a200; --km-4: #169016; --km-5: #e66767; }
.km-modal { width: min(880px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.km-body { display: grid; gap: 12px; flex: none; }   /* (a small screen: the whole modal scrolls, never its rows squeezed) */
/* Two groups: what is clustered (tinted, compact), and how plus the result */
.km-group { display: grid; gap: 12px; }
.km-source { gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); }
.km-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: center; }
.km-row[hidden], .km-field[hidden] { display: none; }
.km-row > .km-label { margin: 0; }
.km-combine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }   /* (the modes, then Multiple suites' cycle) */
.km-combine .setting-select { width: auto; }
.km-combine .setting-select[hidden] { display: none; }
.km-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.km-label-hint { font-weight: 400; color: var(--text-muted); }
.km-row > .km-label .km-label-hint { display: block; font-size: 11.5px; }   /* (beside a row: under its name) */
.km-modes, .km-suites { display: flex; flex-wrap: wrap; gap: 6px; }
.km-suite { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; font: inherit; background: var(--bg-card); color: var(--text); cursor: pointer; }
.km-suite:hover:not(:disabled) { border-color: var(--accent); }
.km-suite[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg-card); }
.km-suite:disabled { opacity: 0.5; cursor: not-allowed; }
.km-suite-name { font-size: 12.5px; font-weight: 600; }
.km-suite-run { font-size: 11px; opacity: 0.8; white-space: nowrap; }
.km-suite-run:empty { display: none; }
.km-cycles { display: flex; flex-wrap: wrap; gap: 5px; }
.km-cycle { padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--bg-card); color: var(--text); cursor: pointer; }
.km-cycle:hover:not(:disabled) { border-color: var(--accent); }
.km-cycle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg-card); }
.km-cycle:disabled { cursor: not-allowed; opacity: 0.45; }
.km-cycle.locked { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 70%, transparent); }
.km-cycles-note { margin: 5px 0 0; font-size: 11px; color: var(--text-muted); }
.km-cycles-note[hidden] { display: none; }
.km-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); gap: 20px; align-items: start; }
.km-vars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.km-var { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 600; background: transparent; color: var(--text); cursor: pointer; }
.km-var[hidden] { display: none; }
.km-var:hover { border-color: var(--accent); }
.km-var[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg-card); }
.km-modes .km-var { padding: 4px 12px; font-size: 12px; }
#km-k { display: block; width: 100%; margin: 0; accent-color: var(--accent); }
.km-ticks { display: flex; justify-content: space-between; padding: 2px 4px 0; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* The chart: on its left the score, each cluster and the inset map, in a column that sets its height; the members in phase space fill the rest (panels.js kmPlot) */
.km-chart { position: relative; display: grid; grid-template-columns: 27% minmax(0, 1fr); min-height: 260px; border: 1px solid var(--border); border-radius: 10px; }
.km-side { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px 0 10px 12px; }
.km-score { flex: none; font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--text); }
.km-score[hidden] { display: none; }
.km-score-hint { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.km-legend { display: flex; flex-direction: column; gap: 4px; }
.km-legend:empty { display: none; }
.km-card { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 6px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-card); }
.km-card-name { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.km-card-count { grid-column: 3; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.km-card-mix { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.25; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.km-inset { flex: none; position: relative !important; width: 100%; aspect-ratio: 1.6; overflow: hidden; outline: 1px solid var(--border); outline-offset: -1px; border-radius: 6px; }   /* (an outline: the map's canvas would cover a border) */
.km-plot { grid-column: 2; grid-row: 1; position: relative; min-height: 220px; }
.km-plot svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }   /* (not part of the row's height: the column sets it) */
.km-plot[hidden] { display: block; visibility: hidden; }
.km-axis { stroke: var(--border); stroke-width: 1; }
.km-axis-name { font-size: 12px; fill: var(--text-muted); }
.km-hull { fill-opacity: 0.12; stroke-opacity: 0.5; stroke-width: 1.5; stroke-linejoin: round; }
.km-center { fill: var(--bg-card); stroke-width: 2; }
.km-center-name { font-size: 12px; font-weight: 700; fill: var(--text); }
.km-tip { position: absolute; z-index: 2; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text); font-size: 12px; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.km-tip[hidden], .km-status[hidden] { display: none; }
.km-status { position: absolute; inset: 0 0 0 27%; display: flex; align-items: center; justify-content: center; margin: 0; padding: 16px; font-size: 13px; color: var(--text-muted); text-align: center; }
.km-create { padding: 9px 12px; border: 1px solid var(--accent); border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 700; background: var(--accent); color: var(--bg-card); cursor: pointer; }
.km-create:hover:not(:disabled) { filter: brightness(1.08); }
.km-create:disabled { opacity: 0.45; cursor: not-allowed; }
/* (narrow: the plot full width, the column under it, the source rows stacked) */
@media (max-width: 720px) {
    .km-controls { grid-template-columns: 1fr; gap: 10px; }
    .km-row { grid-template-columns: 1fr; gap: 4px; }
    .km-chart { grid-template-columns: minmax(0, 1fr); }
    .km-plot { grid-column: 1; grid-row: 1; min-height: 260px; }
    .km-side { grid-column: 1; grid-row: 2; padding: 8px; }
    .km-inset { width: 60%; }
    .km-status { inset: 0; }
}
.km-view-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.panels-app .km-view-card { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 6px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: transparent; color: var(--panel-fg); text-align: left; cursor: pointer; }
.panels-app .km-view-card:hover { border-color: var(--accent); }
.panels-app .km-view-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.panels-app .km-view-all { justify-content: center; min-height: 32px; font-size: 12.5px; font-weight: 700; }
.km-mark { display: inline-flex; flex: none; }
.km-view-words { display: grid; min-width: 0; }
.km-view-name { font-size: 12px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.km-view-count { font-size: 10.5px; line-height: 1.25; opacity: 0.65; white-space: nowrap; }
.km-diff { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding: 4px; border: 1px solid transparent; border-radius: 8px; font-size: 11.5px; color: var(--muted); }
.km-diff.on { border-color: var(--accent); background: var(--accent-soft); }
.panels-app .km-pair-sel { flex: 1 1 0; min-width: 0; padding: 4px 2px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12px; background: var(--panel-bg); color: var(--panel-fg); }
.panels-app .km-diff-go { flex: none; padding: 5px 8px; border: 1px solid var(--accent); border-radius: 6px; font: inherit; font-size: 12px; font-weight: 700; background: var(--accent); color: var(--panel-bg); cursor: pointer; }
.panels-app .km-diff-go:hover:not(:disabled) { filter: brightness(1.08); }
.panels-app .km-diff-go:disabled { opacity: 0.45; cursor: not-allowed; }

/* Saving: the page's panels held still while the canvas draws the image's */
.panels-save-hold { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* A model without the cycle on screen: the Cycle menu flashes light red, the alert over the map's top left (panels.js showCycleAlert) */
:root { --cycle-flash: #fbd5d5; }
[data-theme="dark"] { --cycle-flash: #5c2626; }
.panels-app .dd-btn.cycle-flash { animation: cycle-flash 1s ease-out; }
@keyframes cycle-flash { from { background-color: var(--cycle-flash); } to { background-color: var(--panel-bg); } }
.panels-cycle-alert { position: absolute; z-index: 6; top: 10px; left: 10px; display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100% - 70px));
    padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text); font-size: 13px; line-height: 1.35;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22); transition: opacity 0.4s ease; }
.panels-cycle-alert[hidden] { display: none; }
.panels-cycle-alert.fading { opacity: 0; }
.panels-cycle-alert svg { flex: none; width: 22px; height: 22px; color: #dc2626; }

/* The subtitle: two lines (panels.js subTwoLines) where one wouldn't always fit */
.panels-app .pt-sub { white-space: pre-line; }
.panels-app .plot-title.with-side { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.panels-app .plot-title.with-side > .pt-title, .panels-app .plot-title.with-side > .pt-sub { grid-column: 1; }
.panels-app .pt-side { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; white-space: pre-line; font-size: clamp(11px, 0.352vw + 9.63px, 13.5px); line-height: 1.3;
    font-weight: 600; font-variant-numeric: tabular-nums; }
.panels-app .pt-side[hidden] { display: none; }

/* Choices in the k-means modal: one only (radio: a dot, the button filled) or one or more (checkbox: a tick, the button tinted) */
.km-single > button, .km-multi > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.km-single > button::before, .km-multi > button::before { content: ""; flex: none; width: 12px; height: 12px; box-sizing: border-box; border: 1.5px solid currentColor; opacity: 0.75; }
.km-single > button::before { border-radius: 50%; }
.km-single > button[aria-pressed="true"]::before { opacity: 1; background: radial-gradient(circle, currentColor 0 2.6px, transparent 3.1px); }
.km-multi > button::before { border-radius: 3px; }
.km-multi > button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.km-multi > button[aria-pressed="true"]::before { opacity: 1; border-color: var(--accent);
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 5 8.5 9.4 3.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* A cluster's panel label (All clusters): its name a little larger, its size under it */
.panels-app .panels-member-btn.cluster { display: flex; flex-direction: column; align-items: flex-start; padding: 3px 9px 4px; line-height: 1.2; }
.panels-cluster-label { font-size: 14px; font-weight: 700; }
.panels-cluster-size { font-size: 11px; font-weight: 500; opacity: 0.65; }

/* Page settings: one setting, no tabs (/models's settings rows and switch, models.css) */
.panels-settings-modal { width: min(460px, calc(100vw - 2rem)); }

/* Narrow screens (panels.js NARROW, syncTabs): as the ESA page, a bar of tabs along the bottom under the loop bar, in place of the left menu's Data Sources
   (the menu drawer keeps Layers and Map Display); each tab's list rises from it. Member view and cluster mode: their own tabs and an Exit at the right */
.panels-tabs { display: none; }
:root { --panels-tab-h: 0px; }
@media (max-width: 860px) {
    :root { --panels-tab-h: 50px; }
    .loop-bar { bottom: calc(var(--panels-tab-h) + env(safe-area-inset-bottom, 0px)); }
    .models-app.panels-app.loop-open { bottom: calc(var(--loop-h) + var(--panels-tab-h) + env(safe-area-inset-bottom, 0px)); }
    .panels-tabs { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; display: flex; align-items: stretch; box-sizing: content-box; height: var(--panels-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; }
    .panels-tab-row { flex: 1; display: flex; align-items: stretch; gap: 4px; min-width: 0; padding: 2px 6px; }
    .panels-tab-row[hidden] { display: none; }
    .models-app #section-switch button[data-section="data"] { display: none; }   /* (the drawer: Layers and Map Display only, panels.js narrowPanes) */
    .panels-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; }
    .panels-tab-row > button[hidden] { display: none; }
    .panels-tab-row > button.active { background: var(--accent-soft); color: var(--accent); }
    .panels-tabs .tab-name { line-height: 1.15; }
    .panels-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; }
    .panels-tabs .tab-val:empty { display: none; }
    /* Member view: the member in the middle */
    .panels-tab-member { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; white-space: nowrap; }
    .panels-tab-member strong { font-size: 0.98rem; font-weight: 800; color: var(--text); }
    .panels-tab-member span { font-size: 0.8rem; color: var(--text); }
    .panels-tab-exit-box { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; }
    .panels-tab-exit { max-width: 100%; padding: 7px 10px; border: 1px solid #c62828; border-radius: 8px; font: inherit; font-size: 0.82rem; font-weight: 700; line-height: 1.15; background: #d32f2f; color: #fff;
        white-space: normal; text-align: center; cursor: pointer; }
    .panels-tab-exit:hover { background: #b71c1c; border-color: #b71c1c; }
}
@media (max-width: 720px) {
    body.loop-stacked .models-app.panels-app.loop-open { bottom: calc(var(--loop-h-stacked) + var(--panels-tab-h) + env(safe-area-inset-bottom, 0px)); }
}
/* The rising lists: dropdown.js's look; a category's row opens its parameters in a second list beside it (the open category highlighted) */
.panels-tab-menu .dd-opt.cat .dd-main::after { content: "\203A"; margin-left: 8px; opacity: 0.6; }
/* Narrow screens' Compare */
.cmp-modal { width: min(400px, calc(100vw - 2rem)); }
.cmp-body { display: grid; gap: 12px; }
.cmp-pair { display: flex; align-items: center; gap: 8px; }
.cmp-pair .setting-select { flex: 1 1 0; min-width: 0; }

/* Narrow screens, choosing a manual cluster's members (panels.js syncBuildNarrow): Cluster 1 and 2 in the bar (the one being added to pressed), its members in a
   small section over the bar's left, Generate clusters and Cancel over the map's top center */
.panels-build-pop, .panels-build-actions { display: none; }
@media (max-width: 860px) {
    .panels-tab-row > button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
    .panels-tab-row > button[data-tab="ca"] .tab-name, .panels-tab-row > button[data-tab="cb"] .tab-name { border-bottom: 3px solid var(--cluster-ink); }
    .panels-tab-row > button[data-tab="ca"] { --cluster-ink: var(--text); }
    .panels-tab-row > button[data-tab="cb"] { --cluster-ink: #dc1e1e; }
    .panels-build-pop { position: fixed; z-index: 62; left: 8px; bottom: calc(var(--panels-tab-h) + env(safe-area-inset-bottom, 0px) + 6px); display: grid; gap: 6px; box-sizing: border-box;
        width: min(300px, calc(100vw - 16px)); max-height: 30vh; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--border); border-left: 4px solid var(--cluster-ink);
        border-radius: 8px; background: var(--bg-card); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); font-family: Figtree, system-ui, sans-serif;
        --panel-fg: var(--text); --panel-bg: var(--bg-card); --muted: var(--text-muted); --cluster-ink: var(--text); }   /* (outside .models-app: its names for the site's colors) */
    .panels-build-pop.card-b { --cluster-ink: #dc1e1e; }
    .panels-build-pop[hidden] { display: none; }
    .models-app .panels-build-actions { position: absolute; z-index: 4; top: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
    .models-app .panels-build-actions[hidden] { display: none; }
    .panels-app .panels-build-actions button { padding: 7px 14px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 10px rgba(16, 34, 56, 0.3); }
    .panels-app .panels-build-go { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
    .panels-app .panels-build-go:disabled { opacity: 0.55; cursor: not-allowed; }
    .panels-app .panels-build-cancel { border: 1px solid var(--border); background: var(--panel-bg); color: var(--panel-fg); }
    .models-app.panels-building .panels-status { top: 50px; }   /* (under the two buttons) */
}

/* K-means: the hour clustered on the slider, a red dot at its spot on the track (as the bubble's: left = p * (track - thumb), centered), the bubble red while on it */
:root { --km-hour: #d32f2f; }
[data-theme="dark"] { --km-hour: #ef5350; }
.loop-km-mark { position: absolute; z-index: 1; top: 50%; left: calc(var(--kp, 0) * (100% - var(--thumb-w)) + var(--thumb-w) / 2); width: 12px; height: 12px; box-sizing: border-box;
    transform: translate(-50%, -50%); border: 2px solid var(--bg-card); border-radius: 50%; background: var(--km-hour); pointer-events: none; }
.loop-km-mark[hidden] { display: none; }
#loop-bar .loop-thumb { z-index: 2; }
#loop-bar .loop-track.at-km .loop-thumb { background: var(--km-hour); }
#loop-bar .loop-track.at-km input[type="range"]:focus-visible + .loop-thumb { outline-color: var(--km-hour); }