/*
 * Per-stem picker.
 *
 * Lives on the upload form, where it competes for attention with everything
 * else, so choosing WHAT and choosing WHICH MODEL are split apart: the grid is
 * a plain tick list of stems, and the model dropdown plus its ranking blurb
 * only appear for stems actually picked. Eighty-four stems each carrying a
 * permanent dropdown and two lines of usage stats is unreadable.
 *
 * Icons come from /img/stems.svg, injected by stems-picker.js. They are
 * currentColor strokes, so a tile's selected state recolours its icon with no
 * second asset.
 */

/* One palette, two themes. Every surface, border and accent below reads a
   token, so the dark variant is the override block underneath rather than a
   second copy of the stylesheet. The picker sets these on itself instead of
   leaning on site-wide variables, which are not defined on the home page. */

#stem_picker {
  --stem-line: rgba(0, 6, 55, .12);
  --stem-surface: #ffffff;
  --stem-field: #ffffff;
  --stem-accent: #1998ff;
  --stem-accent-soft: rgba(25, 152, 255, .08);
  --stem-accent-faint: rgba(25, 152, 255, .05);
  --stem-danger: #c0392b;

  font-size: .8125rem;
}

[data-theme="dark"] #stem_picker {
  --stem-line: #374151;
  --stem-surface: #182230;
  --stem-field: #1f2937;
  --stem-accent: #60a5fa;
  --stem-accent-soft: rgba(96, 165, 250, .16);
  --stem-accent-faint: rgba(96, 165, 250, .08);
  --stem-danger: #f87171;

  color: #e5e7eb;
}

/* Dimmed text that reads fine as dark-on-light goes muddy as light-on-dark;
   the same opacity hides far more contrast at this end of the range. */
[data-theme="dark"] #stem_picker .stem-group__count,
[data-theme="dark"] #stem_picker .stem-picker__chosen,
[data-theme="dark"] #stem_picker .stem-chosen__basis,
[data-theme="dark"] #stem_picker .stem-empty { opacity: .75; }

[data-theme="dark"] #stem_picker .stem-tile__icon { opacity: .85; }

/* Bootstrap's .form-control styling does not reach these, so the select and
   its popup list need the dark surface stated explicitly — an unstyled option
   list renders white-on-white in several browsers. */
[data-theme="dark"] #stem_picker select,
[data-theme="dark"] #stem_picker select option {
  background-color: var(--stem-field);
  color: #e5e7eb;
}

.stem-picker-loading { padding: .75rem; opacity: .6; }

/* Algorithm-specific controls, hidden while the per-stem picker owns the form. */
.per-stem-hidden { display: none !important; }

/* --- toolbar ----------------------------------------------------------- */

.stem-picker__bar {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem;
}

.stem-picker__search {
  flex: 1 1 10rem; min-width: 0; max-width: 18rem;
  padding: .35rem .6rem; font-size: .8125rem;
  border: 1px solid var(--stem-line); border-radius: 7px;
  background: var(--stem-field); color: inherit;
}
.stem-picker__search:focus { outline: 0; border-color: var(--stem-accent); }

.stem-picker__chosen { opacity: .6; font-variant-numeric: tabular-nums; }

.stem-picker__clear {
  margin-left: auto; border: 0; background: transparent; padding: .2rem .35rem;
  font: inherit; font-size: .8125rem; color: var(--stem-accent); cursor: pointer;
}
.stem-picker__clear[hidden] { display: none; }

/* --- saved configurations ----------------------------------------------- */

.stem-configs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin-bottom: .6rem; font-size: .75rem;
}

.stem-configs__label { opacity: .55; margin-right: .1rem; }
.stem-configs__empty { opacity: .45; font-style: italic; }

.stem-configs__chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--stem-line); border-radius: 999px;
  background: var(--stem-surface); overflow: hidden;
}

.stem-configs__apply {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font: inherit; font-size: .75rem; padding: .2rem .1rem .2rem .6rem;
  max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stem-configs__chip:hover { border-color: var(--stem-accent); }
.stem-configs__apply:hover { color: var(--stem-accent); }

.stem-configs__drop {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: .9rem; line-height: 1; padding: .1rem .5rem .2rem .35rem; opacity: .4;
}
.stem-configs__drop:hover { opacity: 1; color: var(--stem-danger); }

.stem-configs__save {
  margin-left: auto; border: 1px solid var(--stem-line); border-radius: 999px;
  background: transparent; color: var(--stem-accent); cursor: pointer;
  font: inherit; font-size: .75rem; padding: .2rem .7rem;
}
.stem-configs__save:hover:not(:disabled) { border-color: var(--stem-accent); }
.stem-configs__save:disabled { opacity: .4; cursor: default; color: inherit; }

/* --- groups ------------------------------------------------------------ */

.stem-group {
  border: 1px solid var(--stem-line);
  border-radius: 9px; margin-bottom: .45rem; background: var(--stem-surface);
}

.stem-group__head {
  display: flex; align-items: center; gap: .45rem;
  width: 100%; padding: .5rem .7rem; border: 0; background: transparent;
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; text-align: left;
}

.stem-group__chev {
  width: 13px; height: 13px; flex: none; opacity: .5;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s;
}
.stem-group.is-open .stem-group__chev { transform: rotate(90deg); }

.stem-group__name { flex: 1 1 auto; min-width: 0; }

/* How many of this group are picked, so a shut group still says so. */
.stem-group__count {
  flex: none; font-size: .6875rem; font-weight: 400; opacity: .5;
  font-variant-numeric: tabular-nums;
}
.stem-group__count.is-active {
  opacity: 1; color: var(--stem-accent); font-weight: 600;
}

.stem-group__body {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .45rem; padding: .1rem .7rem .7rem;
}
.stem-group:not(.is-open) .stem-group__body { display: none; }

/* --- tiles -------------------------------------------------------------- */

.stem-tile {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: .3rem;
  min-height: 68px; padding: .5rem .2rem .45rem;
  border: 1px solid var(--stem-line); border-radius: 9px;
  background: transparent; color: inherit; cursor: pointer;
  font: inherit; font-size: .6875rem; line-height: 1.2; text-align: center;
  transition: border-color .12s, background-color .12s, color .12s;
}

.stem-tile__icon {
  width: 26px; height: 26px; flex: none; opacity: .7;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.stem-tile__label { display: block; }

.stem-tile:hover { border-color: var(--stem-accent); }

.stem-tile.is-on {
  border-color: var(--stem-accent);
  background: var(--stem-accent-soft);
  color: var(--stem-accent);
  font-weight: 600;
}
.stem-tile.is-on .stem-tile__icon { opacity: 1; }

.stem-tile.is-on::after {
  content: ''; position: absolute; top: 5px; right: 6px;
  width: 9px; height: 5px; border: 1.8px solid currentColor;
  border-top: 0; border-right: 0; transform: rotate(-45deg);
}

/* --- what you picked ---------------------------------------------------- */

.stem-chosen { margin-top: .7rem; }
.stem-chosen:empty { display: none; }

.stem-chosen__row {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem 0; border-top: 1px solid var(--stem-line);
  flex-wrap: wrap;
}
.stem-chosen__row:first-child { border-top: 0; }

.stem-chosen__icon {
  width: 20px; height: 20px; flex: none; color: var(--stem-accent);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.stem-chosen__name { flex: 0 0 6.5rem; font-weight: 600; }

.stem-chosen__model {
  flex: 1 1 12rem; min-width: 0; max-width: 20rem;
  padding: .25rem .4rem; font-size: .75rem;
  border: 1px solid var(--stem-line); border-radius: 6px;
  background: var(--stem-field); color: inherit;
}
.stem-chosen__model--fixed { border-color: transparent; opacity: .65; padding-left: 0; }

/* Why this model is the default, so the choice can be explained. */
.stem-chosen__basis { flex: 1 1 100%; padding-left: 1.75rem; font-size: .6875rem; opacity: .5; }

/* The chosen model's own settings, tucked under its dropdown and indented to
   line up with it rather than with the stem name. */
.stem-chosen__opts {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  padding: .1rem 0 .15rem 1.75rem;
}

.stem-chosen__opt {
  display: flex; align-items: center; gap: .35rem;
  margin: 0; font-size: .6875rem; font-weight: 400; opacity: .85;
}

.stem-chosen__opt-label { white-space: nowrap; opacity: .7; }

.stem-chosen__opt-select {
  max-width: 15rem; padding: .15rem .3rem; font-size: .6875rem;
  border: 1px solid var(--stem-line); border-radius: 5px;
  background: var(--stem-field); color: inherit;
}

.stem-chosen__drop {
  flex: none; border: 0; background: transparent; cursor: pointer;
  padding: 0 .25rem; font-size: 1.1rem; line-height: 1; opacity: .4; color: inherit;
}
.stem-chosen__drop:hover { opacity: 1; }

/* --- estimate ----------------------------------------------------------- */

.stem-summary {
  margin-top: .7rem; padding: .6rem .75rem;
  border: 1px solid var(--stem-line); border-radius: 9px;
  background: var(--stem-accent-faint);
}
.stem-summary:empty { display: none; }

.stem-summary__head { display: flex; gap: .75rem; align-items: baseline; }
.stem-summary__credits { opacity: .65; font-variant-numeric: tabular-nums; }
.stem-summary__pass { display: flex; gap: .5rem; margin-top: .25rem; opacity: .75; }
.stem-summary__stems { opacity: .7; }
.stem-summary__hint { margin-top: .4rem; color: var(--stem-accent); }
.stem-summary__error { color: var(--stem-danger); }
.stem-summary__upgrade { color: var(--stem-accent); text-decoration: underline; white-space: nowrap; }

.stem-empty { padding: .6rem .2rem; opacity: .55; }

/* The separation-type row is a 2-column grid (control + 28px help icon), so
   the prompt has to claim a whole row or it lands in the icon column. */
.per-stem-prompt { grid-column: 1 / -1; margin-top: .4rem; font-size: .8125rem; }
/* Outside #stem_picker, so it cannot read the picker's tokens; and dark.css
   colours every <a> at a higher specificity than a single class, hence the
   explicit dark rule rather than a token. */
.per-stem-prompt a { color: #1998ff; }
[data-theme="dark"] .per-stem-prompt a { color: #60a5fa; }


/* --- the band ----------------------------------------------------------- */

/* The picker spans both columns of .upload-block instead of sitting in the
   settings sidebar. Card styling is stated here rather than borrowed from
   .settings-sidebar, whose label and column rules are tuned for a narrow
   field list and whose mobile breakpoints assume that shape. */
.stems-band {
  grid-column: 1 / -1;
  min-width: 0;
  margin-bottom: .25rem;
  padding: 1.15rem;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
}

[data-theme="dark"] .stems-band {
  color: #e5e7eb;
  background-color: #111827;
  border-color: #334155;
  box-shadow: none;
}

.stems-band__head {
  display: flex; align-items: baseline; gap: .75rem;
  margin-bottom: .7rem;
}

.stems-band__title {
  margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: .01em;
}

/* dark.css colours every <a> at a higher specificity than one class, so the
   dark value is spelled out rather than inherited. */
.stems-band__back { margin-left: auto; font-size: .8125rem; color: #1998ff; }
[data-theme="dark"] .stems-band__back { color: #60a5fa; }

/* --- wide layout -------------------------------------------------------- */

/* These only make sense once the band has real width to spend. In the 331px
   sidebar the group name had to flex so the count reached the right edge, and
   the model select was capped so it would not blow the column out; across the
   full band that left a thousand pixels of nothing between a name and its
   count, and truncated option text on a row that was three-quarters empty. */
@media (min-width: 992px) {
  .stem-group__name { flex: 0 1 auto; }
  .stem-group__count { margin-right: auto; }

  .stem-chosen__model { max-width: 34rem; }
  .stem-chosen__drop { margin-left: auto; }
}