/*
 * 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(82px, 1fr));
  gap: .4rem; 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; }