/* Additive styles for the part-II optimizer page - loaded together with
   style.css, reusing its CSS variables/card/toggle styles. */

html, body { overflow: auto; }

#opt-layout {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
}

#opt-sidebar {
  position: relative;
  height: 100vh;
  overflow-y: auto;
  padding: 20px 18px 40px;
  border-right: 1px solid var(--line);
  background: var(--card-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

#opt-sidebar h1 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
/* Prose that explains rather than asks - what the mode is, what the stop button
   does - wears the subtitle's size. At the sidebar's body size these were the
   largest blocks of text on the page and read as instructions. */
#mode-note, #mode-trade, #run-help .help {
  font-size: 11.5px; color: var(--ink-soft); line-height: 1.45;
}
#mode-trade { margin-top: 6px; }
#opt-sidebar .subtitle {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.opt-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.opt-section:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }

.opt-section h2 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.region-list { display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow-y: auto; }
.region-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; padding: 5px 6px; border-radius: 8px; cursor: pointer;
}
.region-row:hover { background: var(--accent-soft); }
.region-row input { accent-color: var(--accent); }
.region-row .rname { flex: 1; }
.region-row .rmeta { color: var(--ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
/* The alternative to all the rows above it, not another one of them - so it is
   separated from them rather than merely listed last. */
.region-row.region-national {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.region-row.region-national .rname { font-style: italic; }
/* A row that is there so the reader knows the option exists, and disabled so
   they know it is not theirs. The label stays legible; the meta says "Pro". */
.region-row.locked { opacity: 0.55; cursor: default; }
.region-row.locked:hover { background: none; }
.region-row.locked .rmeta { color: var(--accent); font-variant: small-caps; letter-spacing: 0.04em; }
/* The one line on the page that quotes a law rather than a setting. */
.help.legal-note { color: var(--ink); border-left: 2px solid var(--accent); padding-left: 8px; }
.list-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 6px; font-size: 12px; }
.list-actions a, .list-actions .linklike { color: var(--accent); }

.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; font-weight: 600; margin-bottom: 3px;
}
.field label .val { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.field .help {
  font-size: 10.8px; color: var(--ink-soft); line-height: 1.45; margin-top: 4px;
}
.field input[type="range"] {
  width: 100%; accent-color: var(--accent); height: 4px;
}
.field select {
  width: 100%; font-family: inherit; font-size: 12.5px; padding: 7px 9px;
  border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--ink);
}
.field .range-caps { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-soft); margin-top: 2px; }

.opt-btn {
  width: 100%; font-family: inherit; font-size: 13px; font-weight: 650;
  padding: 11px 14px; border-radius: 11px; border: none; cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.opt-btn.primary { background: var(--accent); color: #fff; }
.opt-btn.primary:hover { filter: brightness(1.08); }
.opt-btn.secondary { background: transparent; border: 1px solid var(--line); color: var(--ink); margin-top: 8px; }
.opt-btn:disabled { opacity: 0.45; cursor: not-allowed; }

#opt-status {
  margin-top: 12px; font-size: 12px; color: var(--ink-soft); min-height: 16px;
}
#opt-status.err { color: #c2521f; font-weight: 600; }

/* The main area is a column: a header row that always keeps its own space, and
   below it the content box every pane lives in. Nothing in the header can
   overlap a pane any more, and nothing in a pane can hide a tab. */
#opt-main {
  position: relative; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
}

#opt-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--card-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

#opt-content { position: relative; flex: 1; min-height: 0; }

#opt-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
#opt-tabs button {
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 14px;
  border-radius: 9px; border: none; background: transparent; color: var(--ink-soft); cursor: pointer;
  white-space: nowrap;
}
#opt-tabs button:hover { color: var(--ink); }
#opt-tabs button.active { background: var(--accent-soft); color: var(--ink); }

#opt-summary-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end; flex: 1 1 auto; min-width: 0;
}
/* compact enough that the chips and the six tabs share one row on a normal
   screen, and wrap tidily instead of covering something when they do not */
.stat-chip {
  padding: 5px 10px; font-size: 11px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}
.stat-chip .label {
  color: var(--ink-soft); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.03em; white-space: nowrap;
}
.stat-chip .value {
  font-size: 13px; font-weight: 700; margin-top: 1px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat-chip .value.good { color: var(--accent); }

#opt-log-pane {
  position: absolute; inset: 16px; z-index: 4;
  display: flex; flex-direction: column;
}
#opt-log {
  flex: 1; overflow-y: auto; background: #0d130e; color: #b9e6c2;
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.5;
  padding: 14px 16px; border-radius: 14px; white-space: pre-wrap; word-break: break-word;
}
:root[data-theme="light"] #opt-log, html:not([data-theme]) #opt-log {
  background: #10140f;
}
#opt-map { position: absolute; inset: 0; }

#opt-legend {
  position: absolute; bottom: 16px; left: 16px; z-index: 6;
  padding: 12px 14px; font-size: 11.5px; max-width: 220px;
  /* Its height is capped by fitMapLegend (optimize.js) to what the colour panel
     above it leaves, and the rest scrolls. */
  overflow-y: auto;
}

.hidden-pane { display: none !important; }

/* The two tabs that are whole pages of their own, embedded. The About page is a
   document, so it gets the page background and its own scrolling; the map fills
   the pane edge to edge like the results map does. */
#current-map-frame, #about-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}
#about-frame { background: var(--bg); }

/* --- "Tabel detaliat" pane: one row per original settlement ------------- */
#opt-table-pane, #opt-baseline-pane {
  position: absolute; inset: 16px; z-index: 4;
  display: flex; flex-direction: column; gap: 10px;
}
.run-caption {
  font-size: 11.5px; color: var(--ink-soft); line-height: 1.5;
  padding: 8px 12px; border-radius: 9px; background: var(--accent-soft);
}
.run-caption b { color: var(--ink); }

#table-toolbar, #baseline-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#table-toolbar .spacer, #baseline-toolbar .spacer { flex: 1; }
#table-toolbar select, #table-toolbar input[type="search"],
#baseline-toolbar select, #baseline-toolbar input[type="search"] {
  font-family: inherit; font-size: 12.5px; padding: 7px 10px;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--card-bg); color: var(--ink);
}
#table-toolbar input[type="search"], #baseline-toolbar input[type="search"] { min-width: 230px; }
#table-toolbar .opt-btn, #baseline-toolbar .opt-btn { width: auto; margin: 0; padding: 7px 14px; font-size: 12.5px; }
#table-count, #baseline-count { font-size: 11.5px; }
.muted { color: var(--ink-soft); }

#table-scroll, #baseline-scroll {
  flex: 1; overflow: auto; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card-bg);
}
#details-table, #baseline-table {
  border-collapse: separate; border-spacing: 0; width: 100%;
  font-size: 11.5px; font-variant-numeric: tabular-nums;
}
#details-table th, #baseline-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--accent-soft); color: var(--ink);
  text-align: left; font-weight: 700; font-size: 10.5px;
  padding: 9px 10px; white-space: nowrap; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
#details-table th:hover, #baseline-table th:hover { text-decoration: underline; }
#details-table th.sorted::after, #baseline-table th.sorted::after { content: " ▾"; }
#details-table th.sorted.asc::after, #baseline-table th.sorted.asc::after { content: " ▴"; }
#details-table td, #baseline-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
#details-table td.num, #baseline-table td.num { text-align: right; }
#details-table tr.is-center td { font-weight: 600; }
#details-table tr.is-center td:first-child::before {
  content: "● "; color: #c2521f;
}
#details-table tbody tr:hover td, #baseline-table tbody tr:hover td { background: var(--accent-soft); }
#table-empty, #baseline-empty { padding: 22px; font-size: 12.5px; }
/* A seat of a raion, marked the way the results table marks a unit's centre. */
#baseline-table tr.is-seat td { font-weight: 600; }
#baseline-table tr.is-seat td:first-child::before { content: "● "; color: #1c5f80; }
.download-note { font-size: 11.5px; max-width: 320px; }

/* The two dashed markers carry their explanation as a tooltip rather than as a
   paragraph under the legend. A small mark says one is there - a tooltip nobody
   knows about is a tooltip nobody reads. */
.legend-more {
  margin-left: auto; width: 13px; height: 13px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--ink-soft);
  border: 1px solid var(--line); cursor: help; flex: 0 0 auto;
}
.legend-row:hover .legend-more { color: var(--ink); border-color: var(--ink-soft); }

/* --- "Statistici" pane ---------------------------------------------------- */
/* Same frame as the charts: an absolutely positioned pane that scrolls on the
   desktop and flows on a phone. The cards are a grid of narrow tables rather
   than one long one - the second level repeats the same four lines per part,
   and side by side the two variants can be compared at a glance. */
#opt-stats-pane {
  position: absolute; inset: 16px; z-index: 4;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
#stats-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px; align-content: start;
}
.stats-card { padding: 14px 16px 16px; }
.stats-card h3 { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; }
.stats-card .chart-sub {
  margin: 0 0 10px; font-size: 11px; line-height: 1.45; color: var(--ink-soft);
}
.stats-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.stats-table th {
  text-align: left; font-weight: 500; padding: 3px 0; color: var(--ink-soft);
}
.stats-table td {
  text-align: right; padding: 3px 0; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A sub-line of the one above it: the breakdown of a total, not a total. */
.stats-table tr.indent th { padding-left: 14px; }
.stats-table tr:not(.indent) th, .stats-table tr:not(.indent) td {
  border-top: 1px solid var(--line); font-weight: 600; color: var(--ink);
}
.stats-table tr:first-child th, .stats-table tr:first-child td { border-top: 0; }
/* The second level is a matrix, not a list: one row per part and a column per
   figure. Money in millions, which is what lets six columns fit in a card. */
.stats-scroll { overflow-x: auto; }
/* Six columns in a card the grid keeps to about 400 px: a point smaller is what
   makes them fit rather than scroll on a desktop. The scroller stays for the
   phone, where nothing makes six columns fit. */
.stats-table.wide { font-size: 11px; min-width: 360px; }
.stats-table.wide th, .stats-table.wide td { padding-left: 2px; }
.stats-table.wide thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .02em;
  text-align: right; border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.stats-table.wide thead th:first-child { text-align: left; }
.stats-table.wide tbody th { font-weight: 600; color: var(--ink); }
.stats-table.wide tbody tr th, .stats-table.wide tbody tr td { border-top: 0; }
.stats-table.wide tr.total th, .stats-table.wide tr.total td {
  border-top: 1px solid var(--line); font-weight: 700; color: var(--ink);
}
#stats-empty { padding: 22px; font-size: 12.5px; }

/* --- "Grafice" pane ------------------------------------------------------ */
#opt-charts-pane {
  position: absolute; inset: 16px; z-index: 4;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
#charts-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 14px; align-content: start;
}
.chart-card { padding: 14px 16px 16px; }
.chart-card h3 {
  margin: 0 0 4px; font-size: 12.5px; font-weight: 700;
}
.chart-card .chart-sub {
  margin: 0 0 10px; font-size: 11px; line-height: 1.45; color: var(--ink-soft);
}
.chart-card canvas { width: 100%; height: 300px; display: block; }
.chart-note {
  margin-top: 6px; font-size: 10.5px; line-height: 1.45; color: var(--ink-soft);
}
.chart-legend {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px;
  font-size: 11px; color: var(--ink-soft);
}
.chart-legend i {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 5px; vertical-align: -1px;
}
#charts-empty { padding: 18px 2px; font-size: 12.5px; }

/* no longer needs to dodge the tab row - the tabs are in the header now */
#map-metric-box {
  position: absolute; top: 16px; left: 16px; z-index: 6;
  padding: 11px 13px; font-size: 11.5px;
  display: flex; flex-direction: column; gap: 7px; max-width: 250px;
}
/* Same heading style as the data map's panel headings and .legend-title - three
   slightly different small-caps labels in one interface reads as sloppiness. */
#map-metric-box label { font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 700; }
#map-metric-box select {
  font-family: inherit; font-size: 12px; padding: 6px 8px;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--card-bg); color: var(--ink);
}
#map-metric-box .checkline {
  display: flex; align-items: center; gap: 7px; text-transform: none;
  letter-spacing: 0; font-size: 11px; font-weight: 500; color: var(--ink);
}

/* The map's own download: with the map rather than with the table's buttons,
   because the map is what it exports. Top right - the only free corner: the
   colour panel holds the top left, the legend the bottom left, the unit card the
   bottom right, and the prepared-run switch the middle. */
#map-export-box {
  position: absolute; top: 16px; right: 16px; z-index: 6;
  margin-top: 0; padding: 10px 12px; max-width: 260px;
  display: flex; flex-direction: column; gap: 6px;
}
#map-export-box #map-export-note { font-size: 11px; line-height: 1.4; margin: 0; }
/* The current map's own download, in the same corner of its tab. The embedded
   page keeps its panel top left and its zoom buttons bottom right. */
#current-export-box {
  position: absolute; top: 16px; right: 16px; z-index: 6;
  margin-top: 0; padding: 10px 12px; max-width: 260px;
  display: flex; flex-direction: column; gap: 6px;
}
#current-export-box #current-export-note { font-size: 11px; line-height: 1.4; margin: 0; }

#unit-detail {
  position: absolute; bottom: 16px; right: 16px; z-index: 7;
  /* Taller than it was by a hundred pixels, which is what the list lost when it
     gave up its own box: the numbers and five names used to fit because the list
     was capped, and now they share one scroller. Still under two thirds of a
     900 px window, and it sits in a corner. */
  width: 280px; max-height: min(70vh, 560px);
  padding: 16px 18px 14px;
  display: flex; flex-direction: column;
}
#unit-detail-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; font-size: 18px; line-height: 1;
  color: var(--ink-soft); cursor: pointer; padding: 4px;
}
#unit-detail-close:hover { color: var(--ink); }
#unit-detail h3 { margin: 0 4px 2px 0; font-size: 15px; font-weight: 700; padding-right: 20px; }
#unit-detail .sub { font-size: 11px; color: var(--ink-soft); margin-bottom: 10px; }
/* One scroller for the whole card, so the numbers a phone puts above the list do
   not squeeze it to two lines. */
#unit-detail-body { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
#unit-detail-stats { font-size: 11.5px; line-height: 1.45; }
/* The two rows that carry a sentence instead of a number. Right-aligned tabular
   bold is right for lei and wrong for "in two pieces that do not touch", so they
   wrap and align left, and they take the hue the map outlines them with - gold
   for the road link, magenta for the split - so the card and the highlight are
   recognisably about the same thing. A shade darker than the map's, because a
   line only has to be seen and a sentence has to be read. */
#unit-detail-stats td.v.warn {
  text-align: left; font-weight: 600; white-space: normal;
  font-variant-numeric: normal; color: #9a6d00; padding-left: 10px;
}
#unit-detail-stats td.v.warn.split { color: #b00058; }
@media (prefers-color-scheme: dark) {
  #unit-detail-stats td.v.warn { color: #e8b430; }
  #unit-detail-stats td.v.warn.split { color: #ff86bb; }
}
#unit-detail-members-head {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 2px; padding-top: 8px; border-top: 1px solid var(--line);
}
/* Pinned by a click: the card stops following the pointer, so it says so. */
#unit-detail.pinned { box-shadow: 0 0 0 1.5px var(--accent), var(--card-shadow, 0 6px 24px rgba(0,0,0,0.14)); }
#unit-detail:not(.pinned) #unit-detail-close { display: none; }
/* The list flows into the card's one scroller rather than keeping a box of its
   own. It used to have 120 px and its own scrollbar, which worked while the
   numbers above it were always the same height: they are not any more - a unit
   flagged for its roads *and* its territory adds two rows of prose, and the box
   was squeezed to 6 px, with the names behind a scrollbar the width of a line.
   Flowing, the reader scrolls one thing: the numbers first, then every name. */
#unit-detail-list { font-size: 12.5px; line-height: 1.9; }
#unit-detail-list .member { padding: 1px 0; }
#unit-detail-list .member.center { font-weight: 700; color: var(--accent); }
#unit-detail-list .member.center::after { content: " · centru"; font-weight: 500; font-size: 10.5px; opacity: 0.75; }

/* --- the modes -----------------------------------------------------------
   Simple mode is the default, so the page must be correct before any script
   runs: everything above it is hidden until the body is marked otherwise. Each
   control that reads differently between modes carries both texts and shows one,
   which keeps the Romanian copy in the HTML where it can be read and corrected,
   instead of in string literals in the JS.

   Three modes, and the classes are named for what a reader of the page sees
   rather than for the roles behind them:

     .basic-only   the plain wording - simple mode and Pro
     .pro-plus     what Pro adds, and Ultra keeps
     .pro-mid      Pro's alone, where Ultra has the fuller control instead
     .pro-only     the calibration seat's - weights, solver, log

   `data-mode` is basic | pro | ultra, and the button says "Pro" for the last
   two: the third mode is the owner's and is not advertised anywhere. */
body:not([data-mode="ultra"]) .pro-only { display: none !important; }
body[data-mode="ultra"] .basic-only { display: none !important; }
body[data-mode="basic"] .pro-plus { display: none !important; }
body:not([data-mode="pro"]) .pro-mid { display: none !important; }
/* And the mirror of .pro-mid: a line that is only true while nothing above
   simple mode is unlocked - how many decisions there are, and the caps a
   visitor's run gets. */
body:not([data-mode="basic"]) .basic-alone { display: none !important; }

/* The country switch used to wear the mode switch's clothes, on the reasoning
   that they are the same kind of control and two looks would say they are two
   different kinds of thing. They are two different kinds of thing. The mode
   decides how much of one answer you see; the country decides which country the
   whole application is about - the regions, the parameters, the map, the table,
   the law behind the threshold. Built as its neighbour's twin it read as a
   second copy of it, and a reader had no reason to think the two words in it
   were a choice at all. So: a label above it, an accent trough with a border
   nothing else on the page has, and an active side that is filled rather than
   merely lifted - the side you are on is where you are, and the other side has
   to look like somewhere you can go. */
#country-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-soft); margin: 2px 0 5px;
}
#country-switch {
  display: flex; gap: 4px; padding: 4px; margin: 0 0 6px;
  background: var(--accent-soft); border-radius: 12px;
  border: 1.5px solid rgba(31, 122, 63, 0.35);
}
@media (prefers-color-scheme: dark) {
  #country-switch { border-color: rgba(95, 212, 137, 0.4); }
}
#country-switch button {
  flex: 1; font-family: inherit; font-size: 12.5px; font-weight: 700;
  /* Narrow padding so "Republica Moldova" holds one line in a 280 px sidebar;
     the line-height is there for the widths where it does not. */
  padding: 9px 6px; border-radius: 9px; border: none; cursor: pointer;
  line-height: 1.25;
  background: transparent; color: var(--accent);
  transition: background 0.15s ease, color 0.15s ease;
}
#country-switch button:hover:not(:disabled):not(.active) {
  background: rgba(31, 122, 63, 0.10);
}
@media (prefers-color-scheme: dark) {
  #country-switch button:hover:not(:disabled):not(.active) {
    background: rgba(95, 212, 137, 0.14);
  }
}
#country-switch button.active {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 3px rgba(20, 40, 24, 0.22);
}
@media (prefers-color-scheme: dark) {
  #country-switch button.active { color: #10140f; }
}
/* Not yet available, and saying so quietly: a country with no data behind it
   would answer nothing anywhere, which reads as a broken site. */
#country-switch button:disabled { opacity: 0.45; cursor: not-allowed; }
#country-note { margin: -2px 0 10px; }
#country-note:empty { display: none; }

#mode-switch {
  display: flex; gap: 4px; padding: 3px; margin: 2px 0 10px;
  background: rgba(28, 35, 29, 0.06); border-radius: 11px;
}
@media (prefers-color-scheme: dark) { #mode-switch { background: rgba(255, 255, 255, 0.06); } }
#mode-switch button {
  flex: 1; font-family: inherit; font-size: 12px; font-weight: 650;
  padding: 7px 10px; border-radius: 9px; border: none; cursor: pointer;
  background: transparent; color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
}
#mode-switch button:hover { color: var(--ink); }
#mode-switch button.active {
  background: var(--card-bg); color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.09);
}
#mode-switch button.locked::after { content: " 🔒"; font-size: 10px; }

#pro-login {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 12px 10px; margin-bottom: 12px;
}
#pro-login .field { margin-bottom: 8px; }
#pro-login input[type="text"], #pro-login input[type="password"] {
  width: 100%; font-family: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--card-bg); color: var(--ink);
}
#pro-login .opt-btn { padding: 8px 12px; font-size: 12.5px; }
#pro-login-msg { min-height: 14px; }
#pro-login-msg.err { color: #c2521f; font-weight: 600; }

/* Three named strengths instead of a 0-100 slider: the measured ones. */
.preset-row { display: flex; gap: 6px; }
.preset-row button {
  flex: 1; font-family: inherit; font-size: 11.5px; font-weight: 600;
  padding: 8px 4px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card-bg); color: var(--ink-soft);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.preset-row button:hover { color: var(--ink); }
.preset-row button.active {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent); font-weight: 700;
}

/* The prepared examples, on the map itself: a visitor who has just arrived is
   looking at one of them, and the switch is how they find that out. Centred at
   the top rather than in a corner - it is the first thing to read, not a
   control tucked away. It goes when the visitor has a run of their own. */
#map-example-box {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 4; width: min(520px, calc(100% - 40px)); padding: 10px 14px 12px;
  /* The same size the map's own control panel uses. This box sits over the map
     and explains rather than instructs, so it should not out-shout the result
     underneath it - at the card's default size the description was the largest
     text on the screen. */
  font-size: 11.5px;
}
#map-example-box .example-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px;
}
#map-example-box .help { margin-top: 8px; font-size: 11.5px; line-height: 1.45; }
#map-example-box .example-params {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums; color: var(--ink-soft);
  font-size: 10.8px; line-height: 1.45;
}
#map-example-box .preset-row button { line-height: 1.25; }
#map-example-box .preset-row button small {
  display: block; font-weight: 500; font-size: 10.5px; opacity: 0.85;
}

/* --- progress, for a mode that does not show a solver log --------------- */
#opt-progress { padding: 26px 30px; max-width: 620px; }
#prog-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px;
}
#prog-title { font-size: 14px; font-weight: 650; color: var(--ink); }
#prog-count { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
#prog-track {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: rgba(28, 35, 29, 0.09);
}
@media (prefers-color-scheme: dark) { #prog-track { background: rgba(255, 255, 255, 0.1); } }
#prog-bar {
  height: 100%; width: 0; border-radius: 99px; background: var(--accent);
  transition: width 0.4s ease;
}
/* While a region is being solved there is no honest fraction to show - the
   solver does not report progress - so the bar breathes instead of lying. */
#prog-bar.working { animation: prog-pulse 1.6s ease-in-out infinite; }
@keyframes prog-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

#prog-regions { list-style: none; margin: 16px 0 0; padding: 0; }
#prog-regions li {
  display: flex; align-items: baseline; gap: 9px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-soft);
}
#prog-regions li:last-child { border-bottom: none; }
#prog-regions .mark { width: 15px; text-align: center; flex: none; }
#prog-regions .who { color: var(--ink); font-weight: 600; }
#prog-regions li.done .mark { color: var(--accent); }
#prog-regions li.active { color: var(--ink); }
#prog-regions li.active .who { color: var(--accent); }
#prog-regions .outcome { margin-left: auto; font-size: 11.5px; white-space: nowrap; }
#prog-note { margin-top: 14px; }
/* Amber, not red: nothing has failed - the page has lost sight of a run that
   continues without it. */
#prog-stale {
  margin-top: 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(194, 132, 31, 0.12); border: 1px solid rgba(194, 132, 31, 0.35);
  color: #c2841f; font-size: 11.5px; line-height: 1.5;
}

/* Data credit on the optimizer page. The two bottom corners are taken (legend
   left, unit detail right), so it sits centred; it wraps rather than covering
   either of them on a narrow window. */
#opt-main #attribution {
  left: 50%; right: auto; transform: translateX(-50%);
  bottom: 8px; text-align: center;
  max-width: min(600px, calc(100% - 500px));
}
@media (max-width: 1200px) {
  #opt-main #attribution { max-width: min(420px, calc(100% - 60px)); }
}
/* A region the solver had no time to refine. Marked, not hidden: the grouping is
   valid but its distance from the best one is unknown, and the map alone does not
   show that. */
#prog-regions li.rough .mark { color: #c2841f; }
#prog-regions li.rough .outcome { color: #c2841f; }
/* A region the run never got to. Not "waiting" - dropped. */
#prog-regions li.dropped { opacity: 0.55; }
#prog-regions li.dropped .outcome { font-style: italic; }

/* Criterion (j): one checkbox per language, with the size of each protected set
   next to it - the choice costs solve time, so it is made with the numbers in
   view rather than blind. */
.lang-choices { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 2px; }
.lang-choices label {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 11.5px; font-weight: 500; color: var(--ink);
  text-transform: none; letter-spacing: 0;
}
.lang-choices .lang-swatch {
  width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset;
}
.lang-choices .count { margin-left: auto; color: var(--ink-soft); font-size: 10.5px; }
/* A control nested inside a field, for the threshold the right is measured
   against: it belongs to criterion (j) rather than beside it, so it is indented
   under the checkboxes instead of becoming a field of its own. */
.field-inline {
  margin: 10px 0 2px; padding-left: 10px;
  border-left: 2px solid var(--line);
}
.field-inline label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; font-weight: 600; margin-bottom: 3px;
}
.field-inline label .val { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.field-inline input[type="range"] { width: 100%; accent-color: var(--accent); height: 4px; }
.field-inline .help { font-size: 10.8px; color: var(--ink-soft); line-height: 1.45; margin-top: 4px; }
.chart-control {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: 11.5px; color: var(--ink-soft);
}
.chart-control select {
  font-family: inherit; font-size: 12px; padding: 4px 7px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card-bg); color: var(--ink);
}

/* A region being solved: the word breathes and the seconds tick, so a long wait
   is visibly a wait and not a freeze. A MILP reports no progress fraction, so
   this is the only honest liveness signal there is. */
#prog-regions .ticking::after {
  content: "…";
  display: inline-block;
  width: 1.1em;
  animation: prog-dots 1.4s steps(4, end) infinite;
}
@keyframes prog-dots {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
#prog-regions .elapsed {
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 600;
  animation: prog-pulse 1.6s ease-in-out infinite;
}


/* --- Phones and narrow tablets ------------------------------------------
   The desktop layout is two fixed columns inside a viewport that does not
   scroll: `#opt-layout` is `position: absolute; inset: 0` over `html, body
   { overflow: hidden }`, with a 320 px sidebar and the rest for the content.
   On a 390 px screen that leaves the content column about 70 px wide with no
   way to pan to it - reported from a phone, where only the settings were
   reachable.

   Here the two stack and the *page* scrolls. The panes stay absolutely
   positioned - they are what the map, the table and the document all rely on -
   so the box that holds them needs a height of its own once it is no longer a
   flex child of a full-height column. The tab row sticks to the top of the
   viewport, so switching tabs does not mean scrolling back up past the whole
   sidebar. */
@media (max-width: 860px) {
  html, body { height: auto; overflow-x: hidden; overflow-y: auto; }
  #opt-layout { position: static; display: block; }
  /* The settings keep a scroll of their own, the way they have it on the desktop,
     but only part of the screen: at full height they came to 1255 px of controls
     to swipe past before the first tab came into view. */
  #opt-sidebar {
    height: auto; max-height: 58vh; overflow-y: auto;
    border-right: none; border-bottom: 1px solid var(--line);
    padding-bottom: 16px;
  }
  #opt-main { height: auto; overflow: visible; }
  /* The panes stop being absolute here. On the desktop they overlay one box that
     owns the viewport; on a phone that box would have to be given a height, and
     everything inside it would scroll separately from the page - a scroller whose
     edges the reader cannot see. Static panes just flow, and the page scrolls
     them. The settings above are the one exception, and a visible one: a short
     card with its own scrollbar, as on the desktop. */
  #opt-content { position: static; height: auto; min-height: 0; }
  #opt-log-pane, #opt-table-pane, #opt-baseline-pane, #opt-charts-pane, #opt-stats-pane, #opt-about-pane {
    position: static; inset: auto; overflow: visible;
    padding: 12px; z-index: auto;
  }
  #opt-charts-pane, #opt-table-pane, #opt-baseline-pane, #opt-stats-pane { display: block; }
  /* The log/progress pane is a column that fills its box on the desktop. Here
     there is no box to fill, so the log needs a height of its own. */
  #opt-log-pane { display: block; }
  #opt-log { min-height: 40vh; }
  #opt-progress { padding: 18px 14px; }
  /* One region per line on a wide screen, name left and outcome right. At 390 px
     the outcome ("1.9 s · din care 0.6 s de calcul · gata înainte de limită") is
     wider than the screen by itself, so it moves under the name. */
  #prog-regions li { flex-wrap: wrap; }
  #prog-regions .outcome { flex: 1 0 100%; margin-left: 24px; white-space: normal; }
  #opt-table-pane > * + *, #opt-baseline-pane > * + * { margin-top: 10px; }
  #charts-grid, #stats-body { grid-template-columns: 1fr; }
  #table-toolbar input[type="search"], #baseline-toolbar input[type="search"] { min-width: 0; flex: 1 1 140px; }
  /* The two maps need a height of their own once nothing else gives them one. */
  #opt-map { position: relative; height: 70vh; }
  #current-map-frame { position: relative; height: 80vh; }
  #opt-header {
    position: sticky; top: 0; z-index: 20;
    background: var(--card-bg);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }
  /* The run buttons stay in view while the rest of the settings scroll under
     them. Without this the primary action of the page is the one thing a reader
     has to know to scroll a card for. */
  #run-row {
    position: sticky; bottom: 0; z-index: 2;
    margin-top: 14px; padding: 12px 0;
    /* The card colour is translucent by design; over the page colour it comes
       out as the sidebar's own tone, and opaque - the settings must not read
       through the bar. */
    background: linear-gradient(var(--card-bg), var(--card-bg)), var(--bg);
    box-shadow: 0 -10px 16px -12px rgba(0, 0, 0, 0.35);
  }
  /* "Oprește" only means something during a run, and a bar of two buttons covers
     twice as much of a short card. */
  #run-row .opt-btn.secondary:disabled { display: none; }
  #opt-summary-bar { justify-content: flex-start; }
  /* The chip labels hold one line on a wide header. At 390 px the longest of them
     ("Populație / unitate (min · mediană · max)") is wider than the screen, so
     here they wrap; the numbers under them stay on one line. */
  #opt-summary-bar .stat-chip { max-width: 100%; }
  #opt-summary-bar .stat-chip .label { white-space: normal; }
  /* Both of these are absolute with no positioned ancestor left, so they would
     anchor to the page rather than to the map: the legend at the very bottom of
     the document, the unit card below everything. The legend joins the flow under
     the map; the card becomes a real bottom sheet. */
  #opt-legend {
    position: static; max-width: none; margin: 10px 12px 0; padding: 10px 12px;
  }
  #map-metric-box { position: static; margin: 10px 12px 0; width: auto; max-width: none; }
  /* On a phone nothing floats over the map: the cards flow under it, in the
     order they are read. */
  #map-export-box, #current-export-box {
    position: static; margin: 10px 12px 0; width: auto; max-width: none;
  }
  #unit-detail {
    position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto;
    width: auto; max-height: 50vh; z-index: 30;
  }
  /* A close button on a phone is a thumb target, not a 12 px glyph. */
  #unit-detail-close { font-size: 22px; padding: 8px 10px; top: 4px; right: 6px; }
  #unit-detail h3 { padding-right: 34px; }
  /* The unit card is a sheet at the bottom: 280 px pinned to a corner covers
     most of a narrow map. */
  /* Credits below the map instead of floating over it. */
  #opt-main #attribution {
    position: static; max-width: none; margin: 10px 12px 0; text-align: left;
    left: auto; transform: none;
  }
}