/* ===========================================================================
   QUOTE LADDER — prototype styles. Inert unless html carries .kore-ladder,
   which js/ladder.js sets only when the URL has ?ladder.

   Delete this file, js/ladder.js, and the two marked lines in index.html and
   the builder is exactly as it was.

   Everything is expressed in the existing design tokens, so the ladder inherits
   whichever theme is active -- it needs no dark-mode branch of its own.
   =========================================================================== */

/* The ladder sits UNDER the packages at full width, not beside them. Side by
   side never balanced: the package list is two or three rows and the ladder is
   twenty-one, so a tall narrow column left most of the row empty. Stacked, the
   three bands become columns and the tallest is eight rows -- roughly a third
   of the height, and no dead space at any width. */
html.kore-ladder .qs-body--lad { display: block; }

html.kore-ladder .lad {
  margin-top: 20px;
  padding: 16px 18px 14px;
  border: 1px solid var(--kore-gold-line);
  border-radius: 6px;
  background: rgba(138, 131, 119, .05);
}

html.kore-ladder .lad-bands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 30px;
  align-items: start;
}
/* Two columns before one: at tablet width three columns squeeze the labels into
   wrapping, which costs more height than the extra column saves. */
@media (max-width: 860px) {
  html.kore-ladder .lad-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
}
@media (max-width: 560px) {
  html.kore-ladder .lad-bands { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

html.kore-ladder .lad-h {
  margin: 0 0 12px;
  font: 700 10px/1 var(--kore-sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--kore-veh);
}

html.kore-ladder .lad-band { margin: 0 0 12px; transition: opacity .18s ease; }
html.kore-ladder .lad-band:last-of-type { margin-bottom: 0; }
/* a band the chosen package never touches steps back rather than vanishing --
   the fact that Interior Detail does nothing to your paint is information */
html.kore-ladder .lad-band.is-off { opacity: .62; }

html.kore-ladder .lad-band-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 0 0 6px;
  font: 600 9.5px/1 var(--kore-sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--kore-gold-text);
}
/* how much of this band the chosen package covers -- the one piece of the band
   that has to survive when a phone collapses it to a single line */
html.kore-ladder .lad-count { letter-spacing: .06em; opacity: .75; font-variant-numeric: tabular-nums; }

/* long label by default, trimmed one on narrow screens */
html.kore-ladder .lad-t--short { display: none; }
@media (max-width: 560px) {
  html.kore-ladder .lad-t--long { display: none; }
  html.kore-ladder .lad-t--short { display: inline; }
}

/* An untouched band collapses to one honest line on a phone instead of seven
   greyed rows. It still SAYS it is not included -- the information is kept, the
   scrolling is not. */
html.kore-ladder .lad-none { display: none; margin: 0; font: 500 .78rem/1.4 var(--kore-sans); color: var(--kore-veh); }
@media (max-width: 560px) {
  html.kore-ladder .lad-band.is-off .lad-list { display: none; }
  html.kore-ladder .lad-band.is-off .lad-none { display: block; }
  html.kore-ladder .lad-band.is-off { opacity: 1; margin-bottom: 8px; }
}

html.kore-ladder .lad-list { margin: 0; padding: 0; list-style: none; }

/* State is carried by the RUNG, not by dimming the text. Fading "not included"
   to 45% put it at 1.8:1, and what a package leaves out is exactly the thing a
   buyer needs to read. Both states stay legible; the mark does the signalling. */
html.kore-ladder .lad-step {
  display: grid; grid-template-columns: 14px 1fr; align-items: start;
  gap: 8px; padding: 2.5px 0;
  /* was .74rem (11.84px) -- the smallest body text in the builder, on the copy
     carrying the most information. .82rem matches the add-on rows, the nearest
     comparable role. Affordable now only because the bands are columns: the
     tallest is 8 rows, so the panel grows ~10px rather than ~25. */
  font: 500 .82rem/1.35 var(--kore-sans);
  color: var(--kore-veh);          /* 5.68:1 on white */
  transition: color .16s ease;
}

/* The rung. Not included = a hairline stub; included = a filled gold bar. The
   difference has to survive at a glance from a metre away, so it is length and
   fill that change, not just a tint. */
html.kore-ladder .lad-mark {
  margin-top: .48em;
  height: 2px; width: 5px; border-radius: 1px;
  background: currentColor;
  transition: width .18s cubic-bezier(.33, 1, .68, 1), background-color .18s ease;
}

html.kore-ladder .lad-step.is-in { color: var(--kore-ink); font-weight: 600; }
html.kore-ladder .lad-step.is-in .lad-mark { width: 14px; background: var(--kore-gold); }

/* Preview: what hovering a different package would ADD. Gold and outlined so it
   reads as "not yet yours" rather than as another included step. */
html.kore-ladder .lad-step.is-add { color: var(--kore-gold-text); font-weight: 600; }
html.kore-ladder .lad-step.is-add .lad-mark {
  width: 14px; background: none;
  box-shadow: inset 0 0 0 1px var(--kore-gold);
  height: 6px; margin-top: .3em; border-radius: 2px;
}

html.kore-ladder .lad-note,
html.kore-ladder .lad-hint {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--kore-hair);
  font: 500 .78rem/1.45 var(--kore-sans); color: var(--kore-veh);
}
html.kore-ladder .lad-note[hidden], html.kore-ladder .lad-hint[hidden] { display: none; }

/* ------------------------------------------------------------- progress --
   Baymard-style progress feedback: the flow already numbers its steps, but a
   number tells you where you are and not how much is left. */
html.kore-ladder .lad-prog {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 22px;
}
html.kore-ladder .lad-prog-rail {
  flex: 1 1 auto; height: 2px; border-radius: 1px;
  background: var(--kore-gold-line); overflow: hidden;
}
html.kore-ladder .lad-prog-rail i {
  display: block; height: 100%; width: 0;
  background: var(--kore-gold);
  transition: width .34s cubic-bezier(.33, 1, .68, 1);
}
html.kore-ladder .lad-prog-t {
  flex: 0 0 auto;
  font: 700 10px/1 var(--kore-sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--kore-veh);
}

/* the details dropdowns the ladder replaces */
html.kore-ladder .qp-spec[hidden] { display: none !important; }
html.kore-ladder .qp-mark { align-self: center; }

@media (prefers-reduced-motion: reduce) {
  html.kore-ladder .lad-mark,
  html.kore-ladder .lad-prog-rail i,
  html.kore-ladder .lad-band { transition: none; }
}

/* --------------------------------------------------------- dark theme ----
   kore-dark.css remaps the gold tokens but not --kore-veh / --kore-ink, so
   the ladder has to state its own text colours there rather than inherit
   near-black type onto a near-black panel. Kept here so ladder.css is
   self-contained: neither prototype depends on the other. */
html.kore-dark.kore-ladder .lad {
  background: var(--d-raised);      /* L2, same level as the package rows beside it */
  border-color: rgba(185, 151, 88, 0.26);
}
html.kore-dark.kore-ladder .lad-step { color: rgba(242, 237, 227, 0.62); }
html.kore-dark.kore-ladder .lad-step.is-in { color: #F2EDE3; }
html.kore-dark.kore-ladder .lad-step.is-add { color: #D9BE86; }
html.kore-dark.kore-ladder .lad-h,
html.kore-dark.kore-ladder .lad-note,
html.kore-dark.kore-ladder .lad-hint,
html.kore-dark.kore-ladder .lad-none,
html.kore-dark.kore-ladder .lad-prog-t { color: rgba(242, 237, 227, 0.62); }
html.kore-dark.kore-ladder .lad-band-h { color: #B99758; }
html.kore-dark.kore-ladder .lad-note,
html.kore-dark.kore-ladder .lad-hint { border-top-color: rgba(242, 237, 227, 0.14); }