/* The panes' shared stylesheet: one look for the map, the scatterplot and the joint page.
   Tokens first (colours of the layers, sizes), then the toolbar grammar: a toolbar is a wrapping row of groups, a group
   is a captioned cluster of controls (the caption is a dictionary term too). Native form controls are kept (decision
   2026-11-01: their look is the portal developers' matter); sizes are made uniform here. */
:root {
  --ink: #222; --muted: #666; --faint: #999; --line: #ddd; --bar: #f7f7f7; --bar2: #fff; --accent: #1f4e9c;
  --base: #b9b9b9; --species: #1f4e9c; --unit: #e06a00; --future: #c2185b; --stable: #f2c200; --lost: #d7301f; --new: #2b6cd4; --map: #00897b; --flag: #b71c1c; --chosen: #00aee6;
  --presence: #1a7a1a; --suitability: #1f4e9c; --t4cur: rgba(255,214,0,.75); --t4fut: rgba(233,30,99,.7); --chorology: #6a1b9a;
  --font: 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html, body { height: 100% }
body { margin: 0; font: var(--font); color: var(--ink); background: #fff; display: flex; flex-direction: column }

/* toolbars and groups */
.toolbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px 10px; padding: 5px 10px; border-bottom: 1px solid var(--line); background: var(--bar); flex: none; overflow-x: auto; overflow-y: hidden }
.toolbar.bar { overflow: visible }   /* the host's bar carries the search box's suggestion list */
.toolbar.secondary { background: var(--bar2) }
/* a group is one functional cluster of controls (a layer, the climate, the axes …): it never wraps inside, it moves to
   the next row as a whole, so that the controls that belong together stay together whatever the pane's width */
.group { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px 8px; padding: 3px 8px 3px 0; border-right: 1px solid var(--line); flex: 0 1 auto; min-width: 0 }
/* a group alone on its row and still wider than the pane shrinks its long-text menus (source, axes, species, country,
   unit, variant) rather than scrolling; the short enumeration menus keep their full text */
.group > * { flex: none }
.group > label:has(> select.wide, > select[data-key="species"], > select[data-key="gcu_id_country"], > select[data-key="gcu_id_number"], > select[data-key$="_X"], > select[data-key$="_Y"], > select[data-key$="_variant"]) { flex: 0 1 auto; min-width: 0; overflow: hidden }
.group select.wide, .group select[data-key="species"], .group select[data-key="gcu_id_country"], .group select[data-key="gcu_id_number"], .group select[data-key$="_X"], .group select[data-key$="_Y"], .group select[data-key$="_variant"] { flex: 0 1 auto; min-width: 110px }
.group > .hints { flex: 0 1 auto; min-width: 90px }   /* the counts may wrap when the pane is narrow */
.group:last-child { border-right: 0 }
.group > .cap { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-right: 2px; white-space: nowrap }
.group > .cap:empty { display: none }
.toolbar label { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap }
.toolbar label > span:first-child { color: var(--muted) }
.toolbar strong { color: var(--ink); margin-right: 4px }
body.embedded .toolbar strong.pane-title { display: none }   /* the host page names the panes */
body.embedded .host { display: none }

/* controls */
select, button, input[type=number] { font: inherit; font-size: 12.5px; color: var(--ink); background: #fff; border: 1px solid #c8c8c8; border-radius: 4px; padding: 2px 5px; height: 24px; max-width: 240px }
select.wide { max-width: 280px }
button { background: #fafafa; cursor: pointer; padding: 2px 9px }
button:hover { background: #f0f0f0 }
input[type=range] { width: 56px; height: 20px; margin: 0; vertical-align: middle; accent-color: var(--accent) }
input[type=checkbox] { margin: 0 2px 0 0; accent-color: var(--accent) }
body.disabled .toolbar { opacity: .45; pointer-events: none }

/* legend and hints */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; line-height: 1.6; padding: 3px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); background: #fff; flex: none }
.legend #legend { display: contents }   /* the chips wrap one by one, as the legend's own children */
.legend > span, .legend #legend > span { white-space: nowrap }
.legend .info, .legend .help, .legend .reset { margin-right: 0 }
.legend .sw, .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin: 0 4px 0 10px }
.legend .sw:first-child, .legend i:first-child, .legend span > i:first-child { margin-left: 0 }
.legend i.sq { border-radius: 2px; width: 13px; height: 9px }
.legend > .note, .legend #legend > .note { font-style: italic; white-space: normal; flex: 1 1 auto; min-width: 0 }   /* the projection note wraps over the row */
.hints { color: var(--faint); font-size: 11.5px }

/* a collapsible toolbar (the drawing settings), opened by its toggle button */
.toolbar.collapsible { display: none }
/* opened, it is a grid: one row per layer, the captions in the first column, the first control of every row on the same
   vertical line — the alignment itself draws the divider between the layer names and their controls (Milko, 2026-11-10) */
body.settings .toolbar.collapsible { display: grid; grid-template-columns: max-content repeat(6, max-content); gap: 3px 14px; align-items: center; justify-content: start }
.toolbar.collapsible .group { display: contents }
.toolbar.collapsible .group > .cap { grid-column: 1; align-self: stretch; display: flex; align-items: center; padding-right: 10px; border-right: 1px solid var(--line); margin: 0 }
.toolbar.collapsible .group > label { margin: 0 }
.toolbar .break { flex-basis: 100%; height: 0; padding: 0; margin: -4px 0 0 }   /* forces the next group onto a new row */
button.toggle { padding: 0 9px 0 7px } button.toggle::before { content: '⚙ '; font-size: 13px } body.settings button.toggle { background: #e4ecf7; border-color: var(--accent) }

/* the two marks of the legend row: "i" = the status of the drawing, "?" = the interaction hints. Visible at a glance
   (accent ring on a pale disc), not loud; the "i" glows once when the status changes so that users learn where it is */
.info, .help, .reset { display: inline-block; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--accent); background: #eaf0fa; color: var(--accent); font-size: 11px; font-weight: 700; line-height: 14px; text-align: center; cursor: help; margin-right: 8px; vertical-align: -1px; outline: none }
.info { font-style: italic; font-family: Georgia, serif; font-weight: 400; font-size: 12px }
.info:hover, .help:hover, .info:focus, .help:focus, .reset:hover, .reset:focus { background: var(--accent); color: #fff }
.reset { cursor: pointer; font-size: 13px; font-weight: 400; line-height: 13px }   /* the view reset, a mark like the info and help marks (Milko, 2026-11-12) */
.info.flash { animation: glow 1.4s ease-out }
input.hint { animation: hint 1.4s ease-in-out infinite alternate }   /* the search box, until first used: the first thing to touch */
@keyframes hint { from { box-shadow: 0 0 0 2px rgba(31,78,156,.15) } to { box-shadow: 0 0 0 4px rgba(31,78,156,.55) } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(31,78,156,.6) } 100% { box-shadow: 0 0 0 9px rgba(31,78,156,0) } }
.info.busy { border-right-color: transparent; color: transparent; background: none; animation: spin .8s linear infinite }

/* the reading popover of the marks (panes.js Pop): a text style that invites reading, unlike the native tooltip */
.pop { position: absolute; z-index: 40; max-width: 460px; padding: 10px 14px 11px; background: #fffdf8; color: #2b2721; border: 1px solid #d9d2c3; border-radius: 8px; box-shadow: 0 6px 20px rgba(60,40,0,.16); font: 13.5px/1.55 Georgia, "Iowan Old Style", "Palatino Linotype", serif; display: none }
.pop.open { display: block }
.pop > div { padding: 1px 0 }
.pop > div + div { border-top: 1px dotted #e3dccd; margin-top: 3px; padding-top: 4px }
.pop .head { font: 600 10.5px/1.4 system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); border: 0; margin-bottom: 4px }

/* the search box of the shared bar: one input, grouped suggestions, the current filter as chips */
.search { position: relative; display: inline-flex; align-items: center; gap: 6px }
.search input { font: inherit; font-size: 12.5px; height: 24px; width: 260px; padding: 2px 8px; border: 1px solid #c8c8c8; border-radius: 12px; outline: none }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31,78,156,.15) }
.suggest { position: absolute; top: 28px; left: 0; z-index: 20; min-width: 360px; max-height: 60vh; overflow: auto; background: #fff; border: 1px solid #bbb; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.15); font-size: 12.5px; display: none }
.suggest.open { display: block }
.suggest .head { padding: 4px 10px 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); background: var(--bar) }
.suggest .item { padding: 4px 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px }
.suggest .item:hover, .suggest .item.active { background: #e8eef8 }
.suggest .item .meta { color: var(--faint); white-space: nowrap }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px 0 9px; border-radius: 11px; border: 1px solid #c8c8c8; background: #fff; font-size: 12px; white-space: nowrap }
.chip.fixed { padding-right: 9px; border-color: var(--accent); color: var(--accent) }
.chip .x { display: inline-block; width: 16px; height: 16px; line-height: 15px; text-align: center; border-radius: 50%; color: var(--muted); cursor: pointer }
.chip .x:hover { background: #eee; color: var(--ink) }

/* legend chips that toggle a layer */
.legend .tog { cursor: pointer; border-bottom: 1px dotted transparent }
.legend .tog:hover { border-bottom-color: var(--muted) }
.legend .tog.off { opacity: .4 }


/* the hover window of a unit (the same on the map and the scatterplot): number, marks, species, country */
.tip { position: absolute; background: #fff; border: 1px solid #999; padding: 4px 8px; font-size: 12px; pointer-events: none; display: none; border-radius: 3px; z-index: 5; box-shadow: 0 1px 4px rgba(0,0,0,.2); white-space: nowrap }

/* status */
.status { padding: 3px 10px; color: var(--muted); font-size: 11.5px; border-top: 1px solid var(--line); background: var(--bar); flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.status.busy::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: spin .8s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

/* the activity monitor: while a page waits for the service (panes.js Wait, fed by service.js), its toolbars and legend
   chips are dimmed and take no clicks, the legend row shows an hourglass and the pointer a progress cursor; the host
   page waits with its panes. The map itself keeps moving (tiles are not the database), the plot waits (Milko, 2026-11-12) */
body.busy { cursor: progress }
body.busy .toolbar, body.busy .legend .tog, body.busy .legend .reset { opacity: .55; pointer-events: none }
.wait { display: none; font-size: 13px; margin-right: 8px; vertical-align: -1px; line-height: 17px }
body.busy .wait { display: inline-block; animation: tilt 1.1s ease-in-out infinite alternate }
@keyframes tilt { from { transform: rotate(-14deg) } to { transform: rotate(14deg) } }