/* ==========================================================================
   SpecBuilder
   Two panels: an editorial pitch on forest ground, and the working
   configurator on paper. The result block is the only place the leaf gradient
   appears at full strength, because that is where the answer lives.
   ========================================================================== */

.sb {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background: var(--surface);
}
@media (min-width: 1000px) {
  .sb { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
}

/* ---- Pitch panel -------------------------------------------------------- */
.sb__pitch {
  background: var(--fcv-forest);
  color: var(--on-forest);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
@media (min-width: 700px) { .sb__pitch { padding: var(--sp-7); } }

.sb__pitch h2 {
  color: #fff;
  font-size: var(--step-3);
  letter-spacing: -0.022em;
  margin: 0;
}
.sb__pitch h2 em {
  font-style: normal;
  background: var(--grad-cure);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sb__pitch > p { color: #C7D5C9; font-size: 0.94rem; margin: 0; max-width: 46ch; }
.sb__pitch .eyebrow { color: var(--fcv-lemon); margin: 0; }

.sb__note {
  background: rgba(181, 101, 29, 0.24);
  border: 1px solid rgba(232, 179, 71, 0.34);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  font-size: 0.88rem;
  color: #E4EAE2;
}
.sb__note strong { color: #fff; display: block; margin-bottom: 3px; }

.sb__terms {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-2) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(233, 239, 231, 0.16);
}
@media (min-width: 520px) { .sb__terms { grid-template-columns: repeat(3, 1fr); } }
.sb__terms > div { border-left: 2px solid var(--fcv-amber); padding-left: var(--sp-3); }
.sb__terms dt {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: #9FB5A6; margin-bottom: 3px;
}
.sb__terms dd {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: 0.86rem; color: #fff; line-height: 1.35;
}

/* ---- Configurator panel ------------------------------------------------- */
.sb__panel {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  background: var(--surface);
}
@media (min-width: 700px) { .sb__panel { padding: var(--sp-7); } }

.sb__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.sb__head h3 { margin: 0; font-size: var(--step-2); }

.sb__group { border: 0; padding: 0; margin: 0; display: flex;
  flex-direction: column; gap: var(--sp-2); min-width: 0; }
.sb__group > label, .sb__group > legend {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); width: 100%; padding: 0; float: none;
  font-family: var(--font-display); font-weight: 600; font-size: 0.86rem;
  color: var(--ink);
}
.sb__group output {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 0.86rem; color: var(--fcv-amber);
}
.sb__hint { font-size: 0.76rem; color: var(--muted); margin: 0; max-width: none;
  line-height: 1.45; }
.sb__row { display: grid; gap: var(--sp-5); }
@media (min-width: 560px) { .sb__row { grid-template-columns: 1fr 1fr; } }

.sb__forms { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sb__form {
  min-height: 44px; padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-display); font-weight: 500; font-size: 0.84rem;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--motion-micro) var(--ease),
              border-color var(--motion-micro) var(--ease),
              color var(--motion-micro) var(--ease);
}
.sb__form:hover { border-color: var(--accent); color: var(--ink); }
.sb__form[aria-selected="true"] {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  font-weight: 600;
}

.sb__swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); }
.sb__sw {
  height: 52px; border-radius: var(--r-sm); cursor: pointer;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(21, 30, 24, 0.14);
  position: relative; padding: 0;
  transition: transform var(--motion-micro) var(--ease),
              border-color var(--motion-micro) var(--ease);
}
.sb__sw span {
  position: absolute; left: 6px; bottom: 4px;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  color: rgba(15, 36, 26, 0.82);
}
.sb__sw:hover { transform: translateY(-2px); }
.sb__sw[aria-pressed="true"] {
  border-color: var(--ink); transform: translateY(-3px);
  box-shadow: 0 4px 12px -4px rgba(21, 30, 24, 0.4);
}

/* Range inputs: styled in both directions so the track reads on either theme. */
.sb__panel input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 22px; background: transparent; cursor: pointer; margin: 0;
}
.sb__panel input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px; background: var(--surface-2);
  border: 1px solid var(--rule);
}
.sb__panel input[type="range"]::-moz-range-track {
  height: 5px; border-radius: 3px; background: var(--surface-2);
  border: 1px solid var(--rule);
}
.sb__panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(21, 30, 24, 0.35);
}
.sb__panel input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(21, 30, 24, 0.35);
}
.sb__panel select {
  font-family: var(--font-body); font-size: 0.92rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4);
  min-height: 46px; width: 100%;
}

/* ---- Result ------------------------------------------------------------- */
.sb__result {
  background: var(--fcv-forest-dp); color: var(--on-forest);
  border-radius: var(--r-lg); padding: var(--sp-5); position: relative;
  overflow: hidden;
}
.sb__result::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-cure);
}
.sb__rhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-2);
}
.sb__rlabel {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: #9FB5A6;
}
.sb__fit {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; border: 1px solid;
}
.sb__fit.is-strong  { background: rgba(111,191,146,.16); color: #8FD6AC; border-color: #4E9A72; }
.sb__fit.is-partial { background: rgba(232,179,71,.16);  color: #EDC65A; border-color: #B58A2E; }
.sb__fit.is-weak    { background: rgba(230,138,134,.16); color: #E9A19D; border-color: #A75B58; }

.sb__result h4 {
  color: #fff; font-size: var(--step-2); margin: 0 0 var(--sp-2);
  letter-spacing: -0.018em;
}
.sb__result > p { color: #C7D5C9; font-size: 0.88rem; margin: 0; max-width: 52ch; }

.sb__why { list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-2); max-width: none; }
.sb__why li {
  font-size: 0.82rem; line-height: 1.5; color: #B9C9BC; margin: 0;
  padding-left: var(--sp-4); position: relative;
}
.sb__why li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: #4E7A5E;
}
/* A conflict is stated, not hidden. Colour is not the only signal — the
   text itself names the contradiction. */
.sb__why li.is-conflict { color: #F0C9A6; }
.sb__why li.is-conflict::before { background: var(--fcv-gold); }

.sb__alts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4); }
.sb__altlabel {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8A9C8D; margin-right: var(--sp-1);
}
.sb__alt {
  font-family: var(--font-display); font-size: 0.76rem; color: #D5E0D6;
  background: rgba(233, 239, 231, 0.08); border: 1px solid rgba(233, 239, 231, 0.16);
  border-radius: 999px; padding: 3px 10px;
}
.sb__alt .mono { color: var(--fcv-lemon); font-weight: 600; }

.sb__fine { font-size: 0.74rem; color: var(--muted); margin: 0; line-height: 1.5;
  max-width: none; }

/* ---- Grade band reference (open by default without JS) ------------------ */
.sb__bands { grid-column: 1 / -1; border-top: 1px solid var(--rule);
  background: var(--surface-2); padding: 0 var(--sp-6) var(--sp-5); }
.sb__bands summary {
  cursor: pointer; padding: var(--sp-5) 0 var(--sp-3);
  font-family: var(--font-display); font-weight: 600; font-size: 0.88rem;
  color: var(--ink);
}
.sb__bands summary::marker { color: var(--fcv-amber); }
.sb__bands .matrix { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .sb__sw:hover, .sb__sw[aria-pressed="true"] { transform: none; }
}

/* ---- Live stalk ladder --------------------------------------------------
   Fills the pitch panel and does real work: it shows where the buyer's
   current targets land on the plant, so the configurator reads as botany
   rather than as a form. Decorative to assistive tech (the same information
   is in the result block as text), hence aria-hidden on the container. */
.sb__stalk {
  margin-top: auto;            /* pushes the ladder to the foot of the panel */
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(233, 239, 231, 0.16);
}
.sb__stalklab {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: #9FB5A6; margin: 0 0 var(--sp-3);
}
.sb__ladder {
  list-style: none; margin: 0; padding: 0 0 0 var(--sp-4);
  display: flex; flex-direction: column; gap: 2px; position: relative;
  max-width: none;
}
/* The stalk itself. */
.sb__ladder::before {
  content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px;
  width: 2px; border-radius: 1px;
  background: linear-gradient(180deg, var(--fcv-mahogany), var(--fcv-orange), var(--fcv-lemon));
  opacity: 0.55;
}
.sb__rung {
  display: grid; grid-template-columns: 14px 16px 1fr auto;
  align-items: center; gap: var(--sp-3);
  padding: 5px var(--sp-3) 5px 0; margin: 0; border-radius: var(--r-sm);
  position: relative;
  transition: background var(--motion-standard) var(--ease),
              transform var(--motion-standard) var(--ease);
}
.sb__dot {
  width: 10px; height: 10px; border-radius: 50%; margin-left: -1px;
  box-shadow: 0 0 0 2px var(--fcv-forest);
  transition: transform var(--motion-standard) var(--ease),
              box-shadow var(--motion-standard) var(--ease);
}
.sb__rcode {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  color: #8A9C8D;
}
.sb__rname {
  font-family: var(--font-display); font-size: 0.8rem; color: #B9C9BC;
}
.sb__rnic {
  font-family: var(--font-mono); font-size: 0.68rem; color: #7E8F82;
  font-variant-numeric: tabular-nums;
}

/* Active rung: the match. Colour is not the only cue — weight and the
   leading marker change too. */
.sb__rung.is-active {
  background: rgba(233, 239, 231, 0.09);
  transform: translateX(3px);
}
.sb__rung.is-active .sb__dot {
  transform: scale(1.5);
  box-shadow: 0 0 0 2px var(--fcv-forest), 0 0 0 4px rgba(242, 214, 107, 0.45);
}
.sb__rung.is-active .sb__rcode { color: var(--fcv-lemon); }
.sb__rung.is-active .sb__rname { color: #fff; font-weight: 600; }
.sb__rung.is-active .sb__rnic { color: #D5E0D6; }

/* Runner-up rungs get a quieter treatment so the trade space is visible. */
.sb__rung.is-near .sb__rname { color: #CFDCD1; }
.sb__rung.is-near .sb__dot { transform: scale(1.2); }

.sb__stalkfoot {
  font-size: 0.72rem; color: #7E8F82; margin: var(--sp-3) 0 0;
  max-width: none; line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .sb__rung, .sb__dot { transition: none; }
  .sb__rung.is-active { transform: none; }
}