/* Area Redesign Digital Twin: Scenario's panel (docs/PHASE_B_SPEC.md sections
 * 1.2, 3, 4.1; the design language is docs/DESIGN_SYSTEM.md).
 *
 * Owned by the Phase B ui stage. Loads after css/app.css and css/panels.css, so
 * rules here may extend or override the shared components.
 *
 * THIS FILE ADDS NO DESIGN TOKENS, NO COLOURS, NO RADII AND NO FONT SIZES OF ITS
 * OWN. Every value below is either a var(--...) from css/tokens.css or a number
 * css/app.css already uses for the same job (12.5px panel body, 11px small
 * label, 10px radius on button chrome, 7px control gap). The 37/37 declared and
 * referenced token count is unchanged.
 *
 * The panel is built from primitives that already exist: .pcard per scenario
 * (.on when selected), button.opt, .seg for the A versus B and the per building
 * op choice, table.metrics for the indicators, .kpi-dual for the two PED
 * readings, .badge, .layer-row for the difference-map toggle, .card, and the
 * .api-notice / .internal-note / .warn-line / .ok-line / .bad-line notices.
 *
 * What is left is the short list of things app.css and panels.css genuinely do
 * not carry. Each rule states why it exists; there is nothing here that could
 * have been reused.
 */

/* 1. THE SCENARIO NAME FIELD.
 * There is no text-input rule anywhere in web/css: the shell only ever needed
 * checkboxes, radios and ranges, which style themselves from --accent. Saving
 * and renaming a scenario needs typed text, so an <input type="text"> lands on
 * the browser default (a white box in a dark panel, in the wrong family). This
 * gives it the SAME chrome as button.opt, its neighbour in the row, rather than
 * a second look for a second control. */
#scenario-name {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--brd2);
  border-radius: 10px;
  background: rgba(0,0,0,.24);
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  transition: var(--t);
}
#scenario-name::placeholder { color: var(--ink3); }
#scenario-name:hover { border-color: var(--brd); }

/* 2. THE LABEL ABOVE IT.
 * <label for> is what gives the field its accessible name, and i18n.apply()
 * cannot fill a placeholder attribute (it writes textContent and title only), so
 * the label carries the wording. It only needs to be a block. */
.scenario-label {
  display: block;
  margin: 10px 0 4px;
}

/* 3. CONTROL ROWS.
 * A layout utility, not a component: one flex row of button.opt, the same 7px
 * gap .redesign-actions uses in css/app.css. Reusing .redesign-actions itself
 * would put a redesign class in the scenarios panel, so the geometry is repeated
 * under an honest name instead. */
.scenario-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
}
.scenario-row .spinner { margin-left: 0; }

/* the A / B label sits beside its .seg rather than above it: two rows of the
 * same shape read as one control */
.scenario-seg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  min-width: 0;
}
.scenario-seg-row .small { flex: none; }

/* 4. .seg INSIDE THIS PANEL.
 * app.css sets `flex: none` with no wrap, which is right for the two- and
 * three-option controls it was written for. Here a .seg carries one button per
 * saved scenario inside a 326px panel, so it has to wrap instead of pushing its
 * last option out of the panel. The tighter padding is the same move
 * css/scene.css makes for .sun-presets in the footer strip: same control, one
 * step denser for the space it is in. */
#panel-scenarios .seg {
  flex-wrap: wrap;
  min-width: 0;
}
#panel-scenarios .seg button {
  padding: 5px 9px;
  font-size: 11.5px;
}

/* 5. TYPE SIZE FOR .pcard.
 * .pcard in app.css carries a border, a radius, padding and its selected state,
 * and nothing else: it inherits its type size from its container. A .sidepanel
 * sets none, so an unqualified .pcard would render at the 16px document
 * default. 12.5px is the panel body size app.css already uses for .layer-row and
 * .seg button, so this only hands the primitive the size the panel around it
 * speaks in. */
#scenarioList .pcard,
.scenario-edit {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink2);
}

/* a scenario card is a button: .pcard:hover already promises that, so say it */
#scenarioList .pcard { cursor: pointer; }
#scenarioList .pcard b { color: var(--ink); }

/* 6. THE BLOCK-INFO DOCK HAS TO SCROLL NOW.
 * #blockInfo is `flex: none` inside #sidePanel, which is `overflow: hidden`. A
 * planned block's card is four lines and fits. The B3 resident view is a shadow
 * table, a distance table, the view corridor note, the PV table and the internal
 * only marking, which on a short window would push #tabs out of the panel
 * entirely. Cap it and let it scroll inside itself, exactly as #deltasPanel caps
 * itself at 52vh in app.css. */
#blockInfo {
  max-height: 46vh;
  overflow: auto;
}
#blockInfo .card:last-child { margin-bottom: 0; }

/* 7. THE DIFFERENCE-MAP LEGEND.
 * "A legend in the existing #domainLegend style" (spec 4.1). Those rules are
 * id-scoped to #domainLegend in app.css, so a second legend cannot reuse them by
 * class. This is that same swatch-and-meaning geometry, with the panel's own
 * left margin: the dot colours are read from --good / --bad / --ink3 by
 * js/scenarios.js, the same tokens the Cesium materials use. */
#diffLegend {
  margin: 6px 0 0 22px;
  font-size: 11px;
  color: var(--ink3);
}
#diffLegend .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin: 0 4px -1px 0;
}
#diffLegend .item { display: inline-block; margin-right: 8px; }