/* WKK optimizer workspace — the input rail beside the results.
 *
 * The tool had grown to ~86 inputs stacked in one column above the schedule they
 * produce, so changing a setpoint and seeing what it did meant scrolling past
 * several screens of unrelated configuration. This file is the layout that fixes
 * that: inputs in a rail on the left, grouped and folded; results on the right.
 *
 * Scoped entirely under .wkk-workspace / .wkk-inputs. energy.css and
 * shared-styles.css are shared with other tabs and pages, and nothing here
 * should reach them.
 */

/* Deliberate exception to the "scoped under .wkk-workspace" rule above:
 * this sits above the rail, at the tab's page-header level, so the current
 * prices are visible before any input is touched. */
.wkk-price-chips {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.wkk-workspace {
  display: grid;
  grid-template-columns: var(--wkk-rail-w, 340px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* ── The input rail ──────────────────────────────────────────────────────── */

/* Deliberately NOT position:sticky, and deliberately not its own scroll region.
 *
 * Sticky is impossible here: .dash-shell, .dash-main, .container and
 * .tab-container all set overflow:hidden, and a sticky element cannot stick
 * inside any ancestor that does. Three of those four are app-wide layout
 * primitives — .dash-main's is what makes the sidebar collapse work — so the
 * price of a sticky rail is a rendering risk on every page in the product.
 *
 * The first attempt here paired sticky with max-height + overflow-y:auto. The
 * sticking silently did nothing, but the max-height did not: the rail became a
 * flex column whose children shrank to fit it, so the folds compressed into
 * slivers instead of overflowing, and there was nothing to scroll.
 *
 * So the rail is plain block flow at its natural height and the page scrolls as
 * one. Nothing can compress and nothing can trap a scroll. Groups are folded by
 * default, which is what keeps it short.
 */
.wkk-inputs > * + * { margin-top: 0.4rem; }

/* ── Folds ───────────────────────────────────────────────────────────────── */

.wkk-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.wkk-group[open] { border-color: var(--border-hover); }

.wkk-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

/* The default triangle is replaced by a chevron drawn in ::after, so the marker
 * sits on the right where the fold state is easiest to scan down a column. */
.wkk-group-head::-webkit-details-marker { display: none; }
.wkk-group-head::marker { content: ''; }

.wkk-group-head::after {
  content: '';
  margin-left: auto;
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.wkk-group[open] > .wkk-group-head::after { transform: rotate(45deg); }

.wkk-group-head:hover { background: var(--bg-hover, rgba(127, 127, 127, 0.06)); }
.wkk-group-head i { color: var(--accent); width: 1rem; text-align: center; flex: none; }

.wkk-group-body {
  padding: 0.5rem 0.75rem 0.75rem;
  border-top: 1px solid var(--border);
}

/* Controls that belonged to a card's heading (the lighting on/off switch) and
 * cannot live in the <summary>, because a click there would fold the group. */
.wkk-group-aside {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 0.4rem;
}

/* ── Nested folds (the six climate subsections) ──────────────────────────── */

.wkk-sub { border-bottom: 1px solid var(--border); }
.wkk-sub:last-child { border-bottom: 0; }

.wkk-sub-head {
  display: flex;
  align-items: center;
  padding: 0.45rem 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.wkk-sub-head::-webkit-details-marker { display: none; }
.wkk-sub-head::marker { content: ''; }

.wkk-sub-head::after {
  content: '';
  margin-left: auto;
  flex: none;
  width: 0.36rem;
  height: 0.36rem;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.wkk-sub[open] > .wkk-sub-head::after { transform: rotate(45deg); }
.wkk-sub[open] > .wkk-sub-head { color: var(--text-primary); }
.wkk-sub-body { padding: 0 0 0.6rem; }

/* ── The advanced fold (finding #15) ─────────────────────────────────────── *
 * One outer disclosure around seven .wkk-group folds that were already each
 * collapsed by default — engine efficiencies, buffer geometry, emissions and
 * the rest of the engineering configuration a grower does not need for an
 * ordinary day. Dashed, not solid, so it reads as a container for the groups
 * inside it rather than one more group at their level. */
.wkk-advanced {
  border: 1px dashed var(--border-hover);
  border-radius: 8px;
  padding: 0.1rem 0 0.5rem;
}

.wkk-advanced-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.wkk-advanced-head::-webkit-details-marker { display: none; }
.wkk-advanced-head::marker { content: ''; }

.wkk-advanced-head::after {
  content: '';
  margin-left: auto;
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.wkk-advanced[open] > .wkk-advanced-head::after { transform: rotate(45deg); }
.wkk-advanced-head i { color: var(--text-muted); width: 1rem; text-align: center; flex: none; }

.wkk-advanced-hint {
  margin: 0 0.75rem 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.wkk-advanced > .wkk-group {
  margin: 0 0.5rem;
}
.wkk-advanced > .wkk-group + .wkk-group {
  margin-top: 0.4rem;
}
.wkk-advanced > .wkk-group:last-child {
  margin-bottom: 0.5rem;
}

/* ── Field density in the rail ───────────────────────────────────────────── */

/* One field shape for the whole rail: label | control | unit.
 *
 * These are the same three columns .cfg-field already uses (energy.css:715).
 * Matching it rather than inventing a second geometry is why the CHP and gas
 * cards, which are built from .cfg-field, line up with the climate cards, which
 * are built from .input-field.
 *
 * flex-direction matters more than it looks. shared-styles.css:909 makes
 * .input-field a COLUMN flex container; the first version of this file set
 * display:flex without resetting the direction, so `flex-basis: 5.5rem` sized
 * every input's HEIGHT instead of its width and each one rendered as an 88px
 * square. A grid has no such trap — the columns are stated outright.
 */
.wkk-inputs .input-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 34px;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.2rem;
}

.wkk-inputs .input-field > label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-secondary);
}

.wkk-inputs .input-field > input,
.wkk-inputs .input-field > select {
  width: 100%;
  min-width: 0;
  padding: 0.18rem 0.35rem;
  font-size: 0.82rem;
  border-radius: 4px;
}

/* A tick box is not 88px wide, and stretching it to the control column makes a
 * hit target the size of a text field with nothing in it. */
.wkk-inputs .input-field > input[type='checkbox'],
.wkk-inputs .cfg-field > input[type='checkbox'] {
  width: auto;
  justify-self: start;
}

/* Some fields hold a composite instead of a bare control — the location box and
 * its locate button, a number and its unit. Those do not fit an 88px column, so
 * the field gives up the grid and stacks: label on its own line, control full
 * width beneath it. Two fields in the rail are built this way.
 *
 * :has(> div) would also catch the three fields whose fourth child is a
 * .help-text line, and those are fine in the grid — hence the :not(). */
.wkk-inputs .input-field:has(> div):not(:has(> .help-text)) { display: block; }

.wkk-inputs .input-field:has(> div):not(:has(> .help-text)) > label {
  display: block;
  margin-bottom: 0.15rem;
}

/* A help line is a fourth child, so it would otherwise drop into the label
 * column of a second row and sit under the label it explains at a third of the
 * width. It gets a row of its own. */
.wkk-inputs .input-field > .help-text {
  grid-column: 1 / -1;
  margin: 0.1rem 0 0;
  font-size: 0.68rem;
  line-height: 1.3;
}

/* A date control carries three segments and a picker icon; 88px clips it. It
 * takes the unit column too, which it has no use for anyway. */
.wkk-inputs .input-field > input[type='date'] { grid-column: 2 / -1; }

/* The biomass questions answer with a slider switch — a <label> wrapping the
 * checkbox — which should sit at the start of its column rather than stretch. */
.wkk-inputs .input-field > .toggle-switch { justify-self: start; }

/* The unit that follows a control sits in the third column. The unit *inside* a
 * label is different — the six phase names carry their window there
 * ("00:00–04:00"), which is content, not a suffix, and must stay inline. */
.wkk-inputs .input-field > .unit,
.wkk-inputs .cfg-unit {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.wkk-inputs .input-field > label .unit {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.68rem;
}

/* The rail is one column, so the multi-column rows the markup was written for
 * have to collapse. Their cards lose their own frame too — the fold already
 * provides one, and a card inside a card reads as clutter at this width. */
.wkk-inputs .input-sections-row,
.wkk-inputs .config-cards-row {
  display: block;
}

.wkk-inputs .input-section,
.wkk-inputs .results-section {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.wkk-inputs .input-section h4,
.wkk-inputs .cfg-section-label {
  font-size: 0.7rem;
  margin: 0.55rem 0 0.3rem;
}

.wkk-inputs .input-hint,
.wkk-inputs .note-box {
  font-size: 0.7rem;
  line-height: 1.35;
}

/* The lighting card laid its fields out three-across with an inline style, which
 * no stylesheet can override — so the columns became this class instead. One per
 * row in the rail; the breakpoint below widens it again. */
.wkk-lightgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

/* Radio rows (gas source, CHP input mode, part load) wrap rather than overflow. */
.wkk-inputs .part-load-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
}

.wkk-inputs .radio-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
}

/* The preset bar is seven buttons and a select; in 340px it needs to wrap and
 * the select needs to be allowed to shrink. */
.wkk-inputs .wkk-presets-bar select { max-width: 100%; }

/* ── The results column ──────────────────────────────────────────────────── */

.wkk-results { min-width: 0; }

/* The bottom line. Heavier top edge than the cards it totals, and the number
 * carries its own sign — a day the CHP mostly stood still is a loss, which is an
 * ordinary outcome and should look like one rather than be hidden. */
.wkk-results .result-card--net { border-top: 3px solid var(--text-secondary); }
.wkk-results .result-card--net .value--xl { color: var(--accent); }
.wkk-results .result-card--net .value--xl.value--neg { color: var(--danger); }

.wkk-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 1rem;
  overflow: hidden;
}

.wkk-panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.wkk-panel-head::-webkit-details-marker { display: none; }
.wkk-panel-head::marker { content: ''; }

.wkk-panel-head::after {
  content: '';
  margin-left: auto;
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.wkk-panel[open] > .wkk-panel-head::after { transform: rotate(45deg); }
.wkk-panel-head i { color: var(--accent); flex: none; }

.wkk-panel-body {
  padding: 0.6rem 0.9rem 0.9rem;
  border-top: 1px solid var(--border);
}

/* An hourly table is six columns wide and will not always fit. It scrolls inside
 * its own panel so the page itself never scrolls sideways. */
.wkk-panel-body .table-scroll { overflow-x: auto; }

/* ── Narrow screens ──────────────────────────────────────────────────────── */

/* Below this the two columns do not both fit, so the rail stops being a rail and
 * becomes a full-width accordion above the results. There is room for the
 * multi-column layouts the markup was written for again, so they come back. */
@media (max-width: 1100px) {
  .wkk-workspace { grid-template-columns: minmax(0, 1fr); }

  .wkk-inputs .input-sections-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.75rem;
  }

  .wkk-lightgrid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ── The greenhouse this schedule is for ─────────────────────────────────── */
/* Above the folds, because it decides the contents of several of them: the
 * area, the pipe diameter, the pipe density and the maximum pipe temperature
 * come from /setup once a greenhouse is chosen (js/ui/wkk-greenhouse.js). */
.wkk-gh {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.wkk-gh label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.wkk-gh select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  border: 1px solid var(--border-hover);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
}
.wkk-gh__note {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.wkk-gh__note a {
  color: var(--accent);
}

/* A field whose value is the greenhouse's, not the scenario's. readOnly rather
 * than disabled — the optimiser still has to read the number — so it needs its
 * own affordance: the browser styles a read-only input exactly like a writable
 * one. */
.wkk-workspace input.wkk-from-setup {
  background: var(--bg-subtle, rgba(127, 127, 127, 0.12));
  border-style: dashed;
  cursor: not-allowed;
}