/* Gesso Club — Builder page.
   Instruments for prompt composition. Reuses the site token system;
   var() fallbacks cover tokens that land with the next styles.css pass. */

/* ---------- control surface geometry ---------------------------- */
/* No editorial hero: the page is a workspace. Content starts right
   under the fixed chrome; the h1 exists for structure, not display. */

.builder-sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- workspace: gray canvas, white bentos ------------------
   Builder-scoped tokens keep the control surface aligned with the site
   while leaving room for denser instruments than the archive needs. */

.builder-page {
  /* Study 01, the quiet instrument: a white page with no containers.
     Whitespace separates the three zones; the prompt sheet's quiet wash
     is the only ground. Typed fields use the shared text-entry treatment;
     pills and dropdowns stay on the committed gray family. Corner scale:
     sheet 16 > pill 999. */
  --builder-chrome-h: 56px;
  --builder-page-top-gap: calc(var(--bl) * 4);
  --builder-field-bg: var(--surface-text-entry, var(--bg));
  --builder-field-border: var(--border-text-entry, var(--border-subtle));
  --builder-card-radius: var(--preview-radius, 16px);
  --builder-panel-gap: calc(var(--gutter) * 1.5);
  --builder-card-gap: calc(var(--bl) * 2);
  --builder-module-gap: calc(var(--bl) * 4);
  --builder-control-gap: var(--bl);
  --builder-board-gap: clamp(calc(var(--gutter) * 1.5), 2.8vw, var(--margin));
  --builder-rail-w: calc(var(--bl) * 6);
  --builder-output-w: clamp(320px, 22vw, 380px);
  --builder-control-measure: min(100%, 720px);
  --builder-control-bleed: calc(var(--bl) * 2);
  --builder-field-pad-y: 10px;
  --builder-field-pad-x: var(--pill-taxonomy-x, 14px);
  /* single-line fields wear the home form's pill radius; multi-line
     text blocks wear the home textarea's 16px */
  --builder-field-radius: var(--pill);
  --builder-area-radius: calc(var(--bl) * 2);
  --builder-title-size: var(--fs-lead, 15px);
  --builder-title-line: var(--lh);
  /* segments hold taxonomy-scale pills: same 34px height as every other
     pill on the site plus the tray's own 2px, with the system's compact
     pill padding (nested pills inside a larger control) */
  --builder-segment-h: calc(var(--pill-taxonomy-h, 34px) + (var(--builder-segment-pad) * 2));
  --builder-segment-pad: 2px;
  --builder-segment-gap: 2px;
  --builder-segment-x: var(--pill-compact-x, 12px);
  --builder-segment-bg: var(--surface-pill);
  --builder-segment-active-bg: var(--surface-pill-active, var(--surface-active));
  --builder-slider-control-h: 30px;
  --builder-slider-track-h: 4px;
  --builder-slider-thumb-size: 18px;
  --builder-slider-track-bg: color-mix(in srgb, var(--ink) 22%, var(--bg));
  --builder-slider-thumb-color: var(--builder-slider-track-bg);
  --builder-slider-focus-ring: color-mix(in srgb, var(--ink) 24%, transparent);
  background: var(--bg);
}

.builder-main {
  padding-top: calc(var(--builder-chrome-h) + var(--builder-page-top-gap));
}

/* Three columns: icon rail | controls | prompt. Each stands on the white
   page as its own object: gray capsule, framed white card, gray card.
   The prompt is a full-height column on the right: output opposite
   controls, always visible, stacking its parts instead of sandwiching
   a paragraph between pill rows. */
.builder-board {
  display: grid;
  grid-template-columns: var(--builder-rail-w) minmax(0, 1fr) var(--builder-output-w);
  column-gap: var(--builder-board-gap);
  align-items: start;
  width: min(calc(100% - (var(--page-gutter, var(--other-edge)) * 2)), var(--maxw));
  margin: 0 auto;
}

/* Study 01, the quiet instrument: no frame, no capsule, no gray card.
   Whitespace separates the three zones; the prompt sheet's quiet wash
   is the only ground on the page. .builder-card remains as a structural
   hook only. */
.builder-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.builder-stage {
  min-width: 0;
  display: grid;
  gap: var(--builder-panel-gap);
}
.builder-views {
  display: grid;
}
.builder-views .builder-panel {
  min-width: 0;
  padding-inline: var(--builder-control-bleed);
}
.builder-views .builder-panel > .builder-panel-head,
.builder-views .builder-panel > .builder-module,
.builder-views .builder-panel > .builder-shelf-group {
  max-width: var(--builder-control-measure);
}

.builder-output {
  display: grid;
  gap: calc(var(--builder-card-gap) * 0.75);
  align-content: start;
}

/* app frame: each column manages its own scrolling; the page never moves */
@media (min-width: 1081px) {
  .builder-board {
    height: calc(100vh - var(--builder-chrome-h) - var(--bl) * 6);
    grid-template-rows: 100%;
  }
  .builder-rail {
    /* the rail never clips: its side tooltips render outside the 48px
       column, so overflow stays visible (the icon stack is ~350px and
       always fits the app frame) */
    height: auto;
    max-height: 100%;
    min-height: 0;
    overflow: visible;
  }
  .builder-stage {
    height: 100%;
    grid-template-rows: minmax(0, 1fr);
  }
  .builder-views {
    min-height: 0;
    display: grid;
  }
  .builder-views .builder-panel {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .builder-views .builder-panel::-webkit-scrollbar { display: none; }
  .builder-output {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  /* the prompt text is the column's flexible region; it scrolls within */
  .builder-output .builder-prompt-text {
    flex: 1 1 auto;
    min-height: calc(var(--lh) * 4);
    max-height: none;
  }
}

.builder-card-head {
  display: flex;
  align-items: baseline;
  gap: var(--bl);
  margin-bottom: var(--builder-card-gap);
}

/* ---------- icon rail ---------------------------------------------- */
/* Bare icons on the well. The hit target stays generous, but the rail
   speaks through glyph color instead of visible button fills. */
.builder-rail {
  padding: 0;
}
.builder-rail-list {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.builder-rail-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-list-idle);
  transition:
    color var(--duration-fast) ease;
}
.builder-rail-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.builder-rail-icon:hover {
  color: var(--text-list-hover);
}
.builder-rail-icon:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  color: var(--text-list-hover);
}
.builder-rail-icon.is-current {
  color: var(--text-primary);
}

/* tooltip: a small white pill floating beside the rail */
.builder-rail-icon::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 7px 14px;
  border-radius: var(--pill);
  border: var(--border-popout-shell, var(--border-popout));
  background: var(--background-popout-shell, var(--surface-popout, var(--bg)));
  box-shadow: var(--shadow-popout);
  color: var(--text-primary);
  isolation: isolate;
  font-size: var(--type-control-size, var(--type-small-size));
  line-height: var(--type-control-line, var(--type-small-line));
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease;
  z-index: 6;
}
.builder-rail-icon:hover::after,
.builder-rail-icon:focus-visible::after {
  opacity: 1;
}

.builder-rail-rule {
  width: 18px;
  height: 1px;
  margin: 8px 0;
  background: var(--line-strong);
}

/* ---------- provenance: prompt fragments <-> board ----------------- */
/* Hover a prompt fragment and its author lights; hover a module title
   and its sentence lights. One shared wash, no motion, nothing shifts. */
.builder-frag {
  border-radius: 4px;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease;
}
.builder-frag[data-frag="interaction"] {
  cursor: default;
}
.builder-frag.is-lit {
  /* the selection language: literally the wash ::selection wears.
     Plain inline background only; a spread shadow would paint over the
     text of neighboring lines. */
  background: var(--accent-selection);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.builder-rail-icon.is-lit {
  color: var(--ink);
}
/* while a fragment is hovered, its rail icon names the destination */
.builder-rail-icon.is-lit::after {
  opacity: 1;
}
.builder-module-title.is-lit h2 {
  background: var(--accent-selection);
  box-shadow: 0 0 0 4px var(--accent-selection);
  border-radius: 4px;
}

/* ---------- module shell ------------------------------------ */

.builder-module-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
  margin-bottom: calc(var(--bl) * 2);
}

.builder-module-title {
  align-items: flex-start;
  gap: 6px;
}

.builder-module-title span {
  color: var(--text-muted);
}

.builder-module-actions {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bl) * 2);
  padding-bottom: 6px;
  white-space: nowrap;
}
/* the include-switch gets its own label so it can't be misread
   as belonging to the "Save chunk" action beside it */
.builder-switch-label {
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  line-height: var(--type-control-line, var(--type-small-line));
}

.builder-module-body {
  display: grid;
  gap: calc(var(--bl) * 2);
  transition: opacity var(--duration-ui) ease;
}

.builder-module.is-off .builder-module-body {
  opacity: 0.35;
  pointer-events: none;
}

.builder-module.is-off .builder-module-title h2 {
  color: var(--text-muted);
}

/* click-to-fold module titles */
.builder-module-title h2 {
  cursor: pointer;
}
.builder-module-title h2:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.builder-module.is-collapsed .builder-module-body {
  display: none;
}
.builder-module.is-collapsed .builder-module-head {
  margin-bottom: 0;
}

.builder-prompt-text {
  white-space: pre-wrap;
}

.builder-module-note {
  margin: 0;
  max-width: 52ch;
  color: var(--text-secondary);
  font-size: var(--type-body-small-size, var(--type-small-size));
  line-height: var(--type-body-small-line, var(--type-small-line));
}

/* ---------- small text actions ------------------------------ */

.builder-text-action {
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line, var(--type-small-line));
  transition: color var(--duration-fast) ease;
}
.builder-text-action:hover,
.builder-text-action:focus-visible {
  outline: 0;
  color: var(--text-primary);
}
.builder-text-action[disabled] {
  color: var(--text-disabled);
  cursor: default;
}

/* ---------- include switch ---------------------------------- */

.builder-switch {
  position: relative;
  width: 34px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: var(--pill);
  background: var(--surface-active);
  transition: background var(--duration-fast) ease;
}
.builder-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.08);
  transition: transform var(--duration-fast) var(--ease-editorial);
}
.builder-switch[aria-checked="true"] {
  background: var(--ink);
}
.builder-switch[aria-checked="true"]::after {
  transform: translateX(14px);
}
.builder-switch:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ---------- fields ------------------------------------------ */

.builder-fields {
  display: grid;
  gap: var(--builder-card-gap);
}

.builder-field {
  display: grid;
  gap: var(--bl);
  min-width: 0;
}
.builder-field[hidden] {
  display: none;
}

.builder-field-label {
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line, var(--type-small-line));
}
.builder-field-label.is-copy-hidden,
.builder-group-label.is-copy-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.builder-field-label em,
.builder-group-label em {
  font-style: normal;
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

.builder-input {
  width: 100%;
  min-width: 0;
  padding: var(--builder-field-pad-y) var(--builder-field-pad-x);
  border: var(--builder-field-border);
  border-radius: var(--builder-field-radius);
  background: var(--builder-field-bg);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--type-body-small-size, var(--type-small-size));
  font-weight: var(--fw-regular);
  line-height: var(--type-body-small-line, var(--type-small-line));
  outline: 0;
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}
.builder-input::placeholder {
  color: var(--text-placeholder, var(--text-muted));
}
.builder-input:focus {
  border-color: var(--border-text-entry-focus);
  box-shadow: var(--shadow-text-entry-focus);
}

.builder-textarea {
  resize: vertical;
  min-height: calc(var(--lh) * 2);
  border-radius: var(--builder-area-radius);
}

.builder-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: var(--pill-taxonomy-h, 34px);
  padding: 0 38px 0 14px;
  border: 0;
  border-radius: var(--pill);
  background: var(--surface-pill)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e5e5e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--type-control-size, var(--type-small-size));
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line, var(--type-small-line));
  transition: background var(--duration-fast) ease;
}
.builder-select:hover {
  background-color: var(--surface-pill-active);
}
.builder-select:focus-visible {
  outline: 0;
  background-color: var(--surface-pill-active);
}

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

.builder-group {
  display: grid;
  gap: var(--bl);
}

.builder-group-label {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line, var(--type-small-line));
}

.builder-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pill-gap, var(--bl));
}

.builder-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-height: var(--pill-taxonomy-h, 34px);
  overflow: hidden;
  padding: 0 var(--pill-taxonomy-x, 14px);
  border-radius: var(--pill);
  background: var(--surface-pill);
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line, var(--type-small-line));
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
}
.builder-pill:hover,
.builder-pill:focus-visible {
  outline: 0;
  background: var(--surface-pill-active, var(--surface-active));
  color: var(--text-primary);
}
.builder-pill.is-active {
  background: var(--surface-pill-active, var(--surface-active));
  color: var(--text-primary);
}

.builder-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-pill-primary {
  background: var(--ink);
  color: var(--text-inverse);
}
.builder-pill-primary:hover,
.builder-pill-primary:focus-visible {
  background: var(--ink);
  color: var(--text-inverse);
  opacity: 0.85;
}

.builder-add {
  justify-self: start;
}

/* ---------- lighting presets ------------------------------------ */
/* Presets are a standard cue row: labeled token pills, nothing bespoke.
   (The gradient-swatch forms — circles, then capsules — were tried and
   retired; the label is clearer than the color.) */

/* ---------- sliders ------------------------------------------ */

.builder-sliders {
  display: grid;
  gap: calc(var(--bl) * 2);
  max-width: 560px;
}

.builder-slider {
  display: grid;
  gap: 2px;
}

.builder-slider-head {
  display: flex;
  align-items: baseline;
  gap: var(--bl);
  min-width: 0;
}
/* the dial's name never wraps or shrinks: the value phrase is the
   flexible, ellipsizing region, so a long phrase ("unmodified hard
   light, knife-edge shadows") can never push the row to a second line
   and knock neighboring dials out of alignment */
.builder-slider-head .builder-field-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.builder-slider-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  line-height: var(--type-control-line, var(--type-small-line));
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-fast) ease;
}
.builder-slider.is-set .builder-slider-value {
  color: var(--text-primary);
}

.builder-slider-clear {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  line-height: var(--type-control-line, var(--type-small-line));
}
/* Pop-in Clear actions hold their footprint while hidden, so setting or
   clearing a control never reflows the live text beside it. This is the
   deliberate inverse of the usual [hidden] { display: none } pairing: here
   the reserved space is the point. visibility: hidden keeps the ghost out
   of the tab order and the accessibility tree. */
.builder-slider-head .builder-slider-clear[hidden],
.builder-wheel .builder-slider-clear[hidden],
.builder-curve-foot .builder-text-action[hidden],
.builder-dome-side .builder-text-action[hidden] {
  display: inline-block;
  visibility: hidden;
}
.builder-slider-clear:hover,
.builder-slider-clear:focus-visible {
  outline: 0;
  color: var(--text-primary);
}

/* Slider instrument.
   One physical slider grammar: same track height, thumb size, and radius
   everywhere. --builder-track-img is reserved for scales where a gradient
   explains the axis itself; otherwise all tracks use the same neutral color.
   The thumb is a window onto the rail: it wears the track's own gradient,
   scaled up (background-size) and aligned by --thumb-pos (set from JS) so
   the slice of rail under the thumb shows through — a lifted piece of the
   track, not a flat color sampled from it. Percentage positioning pins the
   gradient's t-point to the thumb's t-point at any zoom, so the color under
   the value stays exact. Solid tracks fall back to the solid thumb color. */
.builder-range {
  -webkit-appearance: none;
  appearance: none;
  --builder-track-fill: var(--builder-slider-track-bg);
  --builder-thumb-img: var(--builder-track-img, none);
  width: 100%;
  height: var(--builder-slider-control-h);
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.builder-range::-webkit-slider-runnable-track {
  height: var(--builder-slider-track-h);
  border-radius: var(--pill);
  background: var(--builder-track-img, var(--builder-track-fill));
}
.builder-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--builder-slider-thumb-size);
  height: var(--builder-slider-thumb-size);
  margin-top: calc((var(--builder-slider-track-h) - var(--builder-slider-thumb-size)) / 2);
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  outline: 0 solid transparent;
  background-color: var(--builder-slider-thumb-color);
  background-image: var(--builder-thumb-img);
  background-repeat: no-repeat;
  background-size: 2600% 100%;
  background-position-x: var(--thumb-pos, 50%);
  /* thumb motion lives with the polish rules (one transition source) */
}
.builder-range::-moz-range-track {
  height: var(--builder-slider-track-h);
  border-radius: var(--pill);
  background: var(--builder-track-img, var(--builder-track-fill));
}
.builder-range::-moz-range-thumb {
  width: var(--builder-slider-thumb-size);
  height: var(--builder-slider-thumb-size);
  box-sizing: border-box;
  border: 0;
  border-radius: 50%;
  outline: 0 solid transparent;
  background-color: var(--builder-slider-thumb-color);
  background-image: var(--builder-thumb-img);
  background-repeat: no-repeat;
  background-size: 2600% 100%;
  background-position-x: var(--thumb-pos, 50%);
}
.builder-range:focus-visible {
  outline: 0;
}
.builder-range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--builder-slider-focus-ring);
  outline-offset: 3px;
}
.builder-range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--builder-slider-focus-ring);
  outline-offset: 3px;
}

/* Semantic gradient tracks: use only when the visual ramp directly names the axis. */
[data-slider="kelvin"] {
  --builder-track-img: linear-gradient(to right, #dda45f, #e9e4da 44%, #9db6cc);
}
[data-slider="saturation"] {
  --builder-track-img: linear-gradient(to right, #bbbbbb, #ff3b00);
}
[data-slider="contrast"] {
  --builder-track-img: linear-gradient(to right, #d2d2d2, #4e4e4e);
}
[data-slider="grain"] {
  /* clean signal to dense grain, as a smooth ramp like every other
     rail; the patch beside it carries the texture itself */
  --builder-track-img: linear-gradient(to right, #e9e9e9, #8f8f8f);
}

/* ---------- palette swatches --------------------------------- */

.builder-swatch-list {
  display: grid;
  gap: var(--bl);
}

.builder-swatch {
  display: flex;
  align-items: center;
  gap: calc(var(--bl) * 2);
  min-width: 0;
}

.builder-swatch-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--type-control-size, var(--type-small-size));
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line, var(--type-small-line));
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder-swatch-name em {
  font-style: normal;
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

.builder-swatch .builder-select {
  width: auto;
  flex: 0 0 auto;
}

/* ---------- prompt output ------------------------------------ */
/* .builder-output's layout lives with the board rules up top (grid when
   stacked, flex column inside the desktop app frame). */

/* long prompts scroll inside the bento; actions stay in reach */
.builder-prompt-text {
  margin: 0;
  padding: var(--builder-field-pad-y) var(--builder-field-pad-x);
  border-radius: var(--builder-area-radius);
  min-height: calc(var(--lh) * 4);
  max-height: 34vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--builder-field-bg);
  color: var(--text-primary);
  font-size: var(--type-body-small-size, var(--type-small-size));
  line-height: var(--type-body-small-line, var(--type-small-line));
  overflow-wrap: break-word;
}
.builder-prompt-text.is-empty {
  color: var(--text-placeholder, var(--text-muted));
}

/* One ink action, then a quiet row of text utilities. The column stacks
   what the old top bar spread into two pill rows. */
.builder-output-actions {
  display: grid;
  gap: calc(var(--bl) * 1.5);
}
.builder-output-quiet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bl) calc(var(--bl) * 2);
}
/* dialects are words now; their row just wraps within the column */
.builder-output .builder-dialects {
  flex-wrap: wrap;
  max-width: 100%;
}

/* ---------- library: looks + chunks on one shelf --------------- */

/* Export/Import are page utilities: quiet text in the card head */
.builder-card-head .builder-library-actions {
  margin-left: auto;
  display: flex;
  gap: calc(var(--bl) * 2);
}

/* the two shelf groups read as sub-sections, same rhythm as modules */
.builder-shelf-group {
  display: grid;
  gap: calc(var(--bl) * 2);
  justify-items: start;
}
.builder-shelf-group + .builder-shelf-group {
  margin-top: var(--builder-module-gap);
}
.builder-shelf-group .builder-looks-list,
.builder-shelf-group .builder-folder-list,
.builder-shelf-group .builder-folder-new {
  justify-self: stretch;
}

.builder-folder-list {
  display: grid;
  gap: calc(var(--bl) * 3);
}

.builder-folder {
  display: grid;
  gap: var(--bl);
}

.builder-folder-head {
  display: flex;
  align-items: baseline;
  gap: var(--bl);
}

.builder-folder-name {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--type-control-size, var(--type-small-size));
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line, var(--type-small-line));
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder-folder-count {
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  line-height: var(--type-control-line, var(--type-small-line));
}
.builder-folder-head .builder-text-action {
  margin-left: auto;
}
/* folder deletion surfaces on intent, like chunk and look deletion */
.builder-folder-head .builder-folder-delete {
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
}
.builder-folder-head:hover .builder-folder-delete,
.builder-folder-head:focus-within .builder-folder-delete {
  opacity: 1;
}
@media (hover: none) {
  .builder-folder-head .builder-folder-delete {
    opacity: 1;
  }
}

.builder-folder-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  line-height: var(--type-control-line, var(--type-small-line));
}

.builder-chunk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px var(--bl);
  padding: var(--builder-field-pad-y) var(--builder-field-pad-x);
  background: var(--surface-quiet);
}
.builder-chunk.is-used {
  background: var(--surface-active);
}

.builder-chunk-name {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--type-control-size, var(--type-small-size));
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line, var(--type-small-line));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-chunk-preview {
  grid-column: 1 / -1;
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  line-height: var(--type-control-line, var(--type-small-line));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-chunk-actions {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--bl) * 1.5);
  white-space: nowrap;
}
/* destructive action surfaces on intent, like the looks ledger */
.builder-chunk .builder-chunk-delete {
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
}
.builder-chunk:hover .builder-chunk-delete,
.builder-chunk:focus-within .builder-chunk-delete {
  opacity: 1;
}
@media (hover: none) {
  .builder-chunk .builder-chunk-delete {
    opacity: 1;
  }
}

.builder-folder-new {
  display: flex;
  gap: var(--bl);
}
.builder-folder-new .builder-input {
  flex: 1 1 auto;
}
.builder-folder-new .builder-pill {
  flex: 0 0 auto;
}

/* ---------- save-chunk popover ------------------------------- */

.builder-popover-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: transparent;
  cursor: default;
}

.builder-popover {
  position: fixed;
  z-index: var(--z-overlay-ui);
  width: min(344px, calc(100vw - 40px));
  display: grid;
  gap: calc(var(--bl) * 2);
  padding: 20px;
  border: var(--border-popout-shell, var(--border-popout));
  border-radius: var(--popout-radius);
  background: var(--background-popout-shell, var(--surface-popout, var(--bg)));
  box-shadow: var(--shadow-popout);
  isolation: isolate;
}

.builder-popover[hidden],
.builder-popover-scrim[hidden] {
  display: none;
}

.builder-popover-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-head);
  font-weight: var(--fw-medium);
  line-height: var(--lh);
}

.builder-popover-preview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  line-height: var(--type-control-line, var(--type-small-line));
}

.builder-popover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bl);
}

/* ---------- tone curve ---------------------------------------- */

.builder-curve {
  display: grid;
  gap: var(--bl);
  max-width: 340px;
}

.builder-curve-svg {
  width: 100%;
  aspect-ratio: 1;
  background: var(--surface-quiet);
  touch-action: none;
  cursor: crosshair;
  overflow: visible;
}
.builder-curve-grid,
.builder-curve-diagonal {
  stroke: var(--line);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  fill: none;
  pointer-events: none;
}
.builder-curve-diagonal {
  stroke-dasharray: 3 3;
}
.builder-curve-line {
  stroke: var(--text-muted);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  fill: none;
  pointer-events: none;
  transition: stroke var(--duration-fast) ease;
}
.builder-curve-svg.is-set .builder-curve-line {
  stroke: var(--ink);
}
.builder-curve-dot {
  fill: var(--bg);
  stroke: var(--text-muted);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  cursor: ns-resize;
}
.builder-curve-svg.is-set .builder-curve-dot {
  stroke: var(--ink);
}
.builder-curve-dot:focus-visible {
  outline: none;
  fill: var(--accent);
  stroke: var(--accent);
}
.builder-curve-foot {
  display: flex;
  align-items: baseline;
  gap: var(--bl);
}
.builder-curve-read {
  /* every live readout owns a fixed two-line box; the phrase changes,
     the layout around it does not */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex: 1 1 auto;
  margin: 0;
  min-height: calc(var(--type-control-line, var(--type-small-line)) * 2);
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  line-height: var(--type-control-line, var(--type-small-line));
  transition: color var(--duration-fast) ease;
}
/* the dome readout wraps in a 208px column; its phrases legitimately run
   to a third line ("underlight from back-right, rising from below") */
[data-dome-read].builder-curve-read {
  -webkit-line-clamp: 3;
  min-height: calc(var(--type-control-line, var(--type-small-line)) * 3);
}
.builder-curve-read.is-set {
  color: var(--text-primary);
}

/* ---------- swatch button and relationship line --------------- */

.builder-swatch-button {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--duration-fast) var(--ease-editorial);
}
.builder-swatch-button:hover {
  transform: scale(1.08);
}
.builder-swatch-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.builder-relationship {
  display: flex;
  align-items: center;
  gap: calc(var(--bl) * 2);
  max-width: 560px;
}
.builder-relationship-text {
  /* fixed two-line box: "complementary tension between X and Y, warm
     played against cool" must not bounce the row as swatches change */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  min-height: calc(var(--type-control-line, var(--type-small-line)) * 2);
  color: var(--text-primary);
  font-size: var(--type-control-size, var(--type-small-size));
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line, var(--type-small-line));
}
.builder-relationship-text em {
  font-style: normal;
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}
.builder-relationship.is-off .builder-relationship-text {
  color: var(--text-muted);
}

/* ---------- multi-model color picker --------------------------- */

.builder-picker {
  width: min(360px, calc(100vw - (var(--other-edge) * 2)));
}

.builder-picker-head {
  display: flex;
  align-items: center;
  gap: calc(var(--bl) * 1.5);
}

.builder-picker-swatch {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
}

.builder-picker-id {
  display: grid;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.builder-picker-name {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--type-control-size, var(--type-small-size));
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line, var(--type-small-line));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.builder-picker-hex {
  width: 110px;
  padding: 8px var(--pill-compact-x, 12px);
}

.builder-picker-channels {
  display: grid;
  gap: calc(var(--bl) * 1.5);
}

.builder-picker-channel {
  display: grid;
}

.builder-grad-range {
  --builder-track-img: var(--grad);
}

/* ---------- grade wheels --------------------------------------- */

.builder-wheels {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--bl) * 3);
}

.builder-wheel {
  display: grid;
  gap: var(--bl);
  justify-items: start;
  width: 132px;
}

.builder-wheel-disc {
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  cursor: crosshair;
  touch-action: none;
}
.builder-wheel-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
}
.builder-wheel-disc::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent);
  pointer-events: none;
  z-index: 1;
}
.builder-wheel-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}
.builder-wheel-disc:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.builder-wheel-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.builder-wheel-read {
  /* three reserved lines, no clamp: the longest phrase plus its numbers
     ("a whisper of burnt orange in the shadows · 211° 25") runs to three
     lines at this column width and shows in full; the reservation keeps
     the wheels row from moving either way */
  margin: 0;
  min-height: calc(var(--type-small-line) * 3);
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  line-height: var(--type-control-line, var(--type-small-line));
}
.builder-wheel.is-set .builder-wheel-read {
  color: var(--text-primary);
}

/* ---------- key-light dome ------------------------------------- */
/* dials left, the render framed right; wraps below 900px (media rule
   rides with the settled-form block near the foot of this sheet) */
.builder-dome {
  display: flex;
  /* both columns hang from the same top line: the render's top edge
     aligns with the first dial row, its foot with the last — the frame
     reads as part of the dial cluster instead of floating beside it */
  align-items: flex-start;
  gap: calc(var(--bl) * 3);
  flex-wrap: nowrap;
}

/* The light bench: sphere render on the left, all six dials beside it in
   the site's one slider grammar. The render is the figure; the sliders
   are the caption's worth of controls. */
.builder-dome-figure {
  display: grid;
  gap: calc(var(--bl) * 1.5);
  width: 168px;
  flex: 0 0 auto;
}

/* the render is an image, and images across the site sit in square
   containers — no bento rounding on the sphere. 168px (21 baseline
   units) matches the height of the three-dial cluster beside it, so
   the frame's top and bottom land on the dials' own edges. The canvas
   bitmap stays 208 and downscales. */
.builder-sphere {
  width: 168px;
  height: 168px;
  border-radius: var(--radius);
}

/* intensity's ramp names its axis: dim to bright */
[data-klslider="intensity"] {
  --builder-track-img: linear-gradient(to right, #4a4a48, #f1efec);
}

.builder-dome-side {
  display: grid;
  gap: var(--bl);
  justify-items: start;
  max-width: 208px;
}

/* the bench's two dial columns (position | character of light) */
.builder-bench-col {
  display: grid;
  gap: var(--bl);
}

/* ---------- picker fields (stock / body / lens) ---------------------
   Font-picker treatment: quiet pill showing the current object; a white
   More-menu popover carries the list. */
.builder-rig {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--bl) * 2);
}
.builder-rig .builder-field {
  flex: 1 1 220px;
  min-width: 200px;
  max-width: 320px;
}
.builder-pick-stock {
  max-width: 360px;
}
.builder-pickhost {
  position: relative;
}
.builder-pickfield {
  display: flex;
  align-items: center;
  gap: var(--builder-control-gap);
  width: 100%;
  padding: var(--builder-field-pad-y) var(--builder-field-pad-x);
  border: 0;
  border-radius: var(--builder-field-radius);
  background: var(--surface-pill);
  text-align: left;
  transition: background var(--duration-fast) ease;
}
.builder-pickfield:hover {
  background: var(--surface-pill-active);
}
.builder-pickfield:focus-visible {
  outline: 0;
  background: var(--surface-pill-active);
  box-shadow: none;
}
.builder-pickfield:disabled {
  opacity: 1;
  cursor: default;
}
.builder-pickfield.is-disabled:hover {
  background: var(--surface-pill);
}
.builder-pick-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: var(--type-body-small-size, var(--type-small-size));
  line-height: var(--type-body-small-line, var(--type-small-line));
}
.builder-pickfield:not(.is-set) > .builder-pick-name {
  color: var(--text-placeholder, var(--text-muted));
}
.builder-pickfield.is-none-value > .builder-pick-name {
  color: var(--text-primary);
  font-weight: var(--fw-regular);
}
.builder-pick-caret {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-secondary);
}
.builder-pickfield.is-disabled .builder-pick-caret {
  display: none;
}
.builder-pick-caret svg {
  display: block;
  width: 16px;
  height: 16px;
}
.builder-pick-prefix {
  flex: 0 0 auto;
  max-width: 44%;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--type-body-small-size, var(--type-small-size));
  font-weight: var(--fw-medium);
  line-height: var(--type-body-small-line, var(--type-small-line));
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Version 01: the field stays a quiet control; the menu is a detached
   mini-bento below it, wearing the More menu's outside hairline shell. */
.builder-pickpop {
  --builder-pickpop-radius: calc(var(--popout-radius) - 6px);
  --pick-scroll-top-fade: 0;
  --pick-scroll-bottom-fade: 0;
  --pick-scroll-fade-overrun: 3px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 8;
  width: 100%;
  padding: 6px;
  border: var(--border-popout-shell, var(--border-popout));
  border-radius: var(--builder-pickpop-radius);
  background: var(--background-popout-shell, var(--surface-popout, var(--bg)));
  box-shadow: var(--shadow-popout);
  isolation: isolate;
  overflow: hidden;
  transform-origin: top left;
}
.builder-pickpop::before,
.builder-pickpop::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
  height: calc(var(--bl) * 8 + var(--pick-scroll-fade-overrun));
  opacity: 0;
  pointer-events: none;
}
.builder-pickpop::before {
  top: calc(6px - var(--pick-scroll-fade-overrun));
  opacity: var(--pick-scroll-top-fade);
  transform: translateY(calc((1 - var(--pick-scroll-top-fade)) * -6px));
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--bg) 78%, transparent) 26%,
    color-mix(in srgb, var(--bg) 48%, transparent) 58%,
    color-mix(in srgb, var(--bg) 18%, transparent) 84%,
    transparent 100%
  );
}
.builder-pickpop::after {
  bottom: calc(6px - var(--pick-scroll-fade-overrun));
  opacity: var(--pick-scroll-bottom-fade);
  transform: translateY(calc((1 - var(--pick-scroll-bottom-fade)) * 6px));
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bg) 94%, transparent) 0%,
    color-mix(in srgb, var(--bg) 78%, transparent) 26%,
    color-mix(in srgb, var(--bg) 48%, transparent) 58%,
    color-mix(in srgb, var(--bg) 18%, transparent) 84%,
    transparent 100%
  );
}
.builder-pickpop.is-portaled {
  position: fixed;
  top: var(--pickpop-y, 0px);
  left: var(--pickpop-x, 0px);
  width: var(--pickpop-w, 100%);
  max-width: calc(100vw - 24px);
  transform-origin: top left;
}
.builder-pickpop.is-portaled.is-above {
  transform-origin: bottom left;
}
/* Rows scroll inside their own region; the detached surface has no header
   divider because the trigger remains its own object. */
.builder-picklist {
  display: grid;
  gap: 1px;
  max-height: var(--pickpop-list-max-h, 258px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.builder-picklist::-webkit-scrollbar {
  display: none;
}
/* Open keeps the trigger in the pill family instead of dissolving it into
   the popout. The open menu is the visible focus state. */
.builder-pickhost.is-open .builder-pickfield {
  position: relative;
  z-index: 9;
  background: var(--surface-pill-active);
  border-radius: var(--builder-field-radius);
}
.builder-pickhost.is-open .builder-pickfield:hover {
  background: var(--surface-pill-active);
}
.builder-pickhost.is-open .builder-pickfield:focus-visible {
  box-shadow: none;
}
.builder-pick-caret {
  transition: transform var(--duration-fast) ease;
}
.builder-pickhost.is-open.is-pop-above .builder-pick-caret {
  transform: rotate(180deg);
}
.builder-pickrow {
  display: flex;
  align-items: center;
  gap: var(--builder-control-gap);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--bl);
  border-radius: var(--pill);
  text-align: left;
  transition: background var(--duration-fast) ease;
}
.builder-pickrow:hover,
.builder-pickrow:focus-visible {
  outline: 0;
  /* rows rest on the white sheet, so they hover on the hover wash */
  background: var(--surface-hover, var(--surface-quiet));
}
.builder-pickrow.is-current {
  background: var(--surface-pill-active, var(--surface-active));
}
.builder-pickrow-none .builder-pick-name {
  color: var(--text-muted);
}
.builder-pickrow-none.is-current .builder-pick-name {
  color: var(--text-primary);
}

/* ---------- grain bench: the dial and its living swatch ------------- */
.builder-grain-bench {
  display: flex;
  align-items: center;
  gap: calc(var(--bl) * 2);
}
.builder-grain-patch {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: var(--builder-card-radius);
}
.builder-grain-patch.is-unset {
  opacity: 0.55;
}
.builder-grain-bench .builder-slider {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- placement canvas ----------------------------------- */

.builder-canvas {
  display: grid;
  gap: var(--bl);
  max-width: 360px;
}

.builder-canvas-svg {
  width: 100%;
  overflow: visible;
  cursor: crosshair;
  touch-action: none;
}
.builder-canvas-frame {
  fill: var(--surface-quiet);
  stroke: none;
  vector-effect: non-scaling-stroke;
}
.builder-canvas-thirds {
  stroke: var(--line);
  fill: none;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.builder-canvas-subject {
  fill: var(--line);
  stroke: var(--ink);
  vector-effect: non-scaling-stroke;
  cursor: grab;
}
.builder-canvas-handle {
  fill: var(--bg);
  stroke: var(--ink);
  vector-effect: non-scaling-stroke;
  cursor: nwse-resize;
}

/* ---------- palette proportions -------------------------------- */

.builder-proportions {
  display: grid;
  gap: var(--bl);
  max-width: 560px;
}

.builder-proportion-bar {
  position: relative;
  display: flex;
  height: 28px;
  border-radius: var(--pill);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
  touch-action: none;
}
.builder-proportion-seg {
  flex-basis: 0;
  min-width: 4px;
}
.builder-proportion-seam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  margin-left: -7px;
  cursor: col-resize;
  background: transparent;
}
.builder-proportion-seam::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--ink) 25%, transparent);
}
.builder-proportion-seam:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.builder-palette-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bl);
}

/* ---------- picker 2D plane ------------------------------------- */

.builder-picker-plane {
  position: relative;
}
.builder-picker-plane[hidden] {
  display: none;
}
.builder-picker-plane canvas {
  display: block;
  width: 100%;
  height: 120px;
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: crosshair;
  touch-action: none;
}
.builder-picker-plane-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 2.5px color-mix(in srgb, var(--ink) 45%, transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ---------- looks, dialects, variants, library IO --------------- */

/* Looks as a ledger: name, tint strip, cue count, quiet actions.
   Ten looks fit where three cards sat; the row's tooltip carries the
   full prompt for recall, and Delete only surfaces on hover or focus. */
.builder-looks-list {
  display: grid;
}
.builder-look-row {
  display: flex;
  align-items: center;
  gap: calc(var(--bl) * 2);
  min-width: 0;
  padding: calc(var(--bl) * 1.5) 2px;
  border-bottom: 1px solid var(--line, rgba(17, 19, 21, 0.1));
}
.builder-look-row:last-of-type {
  border-bottom: 0;
}
.builder-look-name {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: var(--type-body-small-size, var(--type-small-size));
  font-weight: var(--fw-medium);
  line-height: var(--type-body-small-line, var(--type-small-line));
}
.builder-look-strip {
  flex: 0 0 auto;
  width: 64px;
  height: 8px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.builder-look-strip.is-blank {
  background: var(--surface-quiet);
}
.builder-look-count {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  font-variant-numeric: tabular-nums;
}
.builder-look-actions {
  display: flex;
  gap: calc(var(--bl) * 2);
  margin-left: auto;
  flex: 0 0 auto;
}
.builder-look-delete {
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
}
.builder-look-row:hover .builder-look-delete,
.builder-look-row:focus-within .builder-look-delete {
  opacity: 1;
}
@media (hover: none) {
  .builder-look-delete {
    opacity: 1;
  }
}

/* segmented controls: compact, flat controls distinct from taxonomy pills.
   (Dialects left this family for the word treatment, study 01.) */
.builder-pill-row.builder-picker-modes {
  display: inline-flex;
  width: fit-content;
  flex-wrap: nowrap;
  align-self: start;
  gap: var(--builder-segment-gap);
  min-height: var(--builder-segment-h);
  padding: var(--builder-segment-pad);
  border-radius: var(--pill);
  background: var(--builder-segment-bg);
}
.builder-picker-modes .builder-pill {
  min-height: calc(var(--builder-segment-h) - (var(--builder-segment-pad) * 2));
  padding: 0 var(--builder-segment-x);
  background: transparent;
  color: var(--text-muted);
}
.builder-picker-modes .builder-pill.is-active {
  background: var(--builder-segment-active-bg);
  color: var(--text-primary);
  box-shadow: none;
}

/* numerals hold their width while dials move */
.builder-slider-value,
.builder-module-title span,
.builder-wheel-read,
.builder-curve-read {
  font-variant-numeric: tabular-nums;
}

.builder-library-actions {
  display: flex;
  gap: calc(var(--bl) * 2);
}

/* ---------- motion & polish ------------------------------------- */
/* The home page's physics: popouts arrive with opacity + -4px translate
   + 0.98 scale (--duration-panel, --ease-editorial); content reveals
   ride small y-translates. Drags are 1:1 — geometry transitions switch
   off while a pointer is down. */

.builder-popover {
  transform-origin: top left;
  animation: builder-popover-in var(--duration-panel) var(--ease-editorial);
}
@keyframes builder-popover-in {
  from {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* scroll reveal — armed only once JS confirms motion is welcome */
.js-motion .builder-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--duration-filter-in) var(--ease-editorial),
    transform var(--duration-filter-in) var(--ease-editorial);
}
.js-motion .builder-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* pills press like keys */
.builder-pill {
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease,
    transform var(--duration-instant) ease;
}
.builder-pill:active {
  transform: scale(0.96);
}

/* switch knob stretches under the finger, iOS-style */
.builder-switch::after {
  transition:
    transform var(--duration-fast) var(--ease-editorial),
    width var(--duration-fast) var(--ease-editorial);
}
.builder-switch:active::after {
  width: 19px;
}
.builder-switch[aria-checked="true"]:active::after {
  transform: translateX(11px);
}

/* slider thumbs respond without changing the instrument proportions */
.builder-range::-webkit-slider-thumb {
  transition:
    transform var(--duration-fast) var(--ease-editorial),
    background var(--duration-fast) ease,
    outline-color var(--duration-fast) ease;
}
.builder-range:hover::-webkit-slider-thumb {
  transform: scale(1.06);
}
.builder-range:active::-webkit-slider-thumb {
  transform: scale(1.12);
}
.builder-range::-moz-range-thumb {
  transition:
    transform var(--duration-fast) var(--ease-editorial),
    background var(--duration-fast) ease,
    outline-color var(--duration-fast) ease;
}
.builder-range:hover::-moz-range-thumb {
  transform: scale(1.06);
}
.builder-range:active::-moz-range-thumb {
  transform: scale(1.12);
}

/* tone curve morphs between presets; dots ride the curve */
.builder-curve-line {
  transition:
    d var(--duration-expand) var(--ease-editorial),
    stroke var(--duration-fast) ease;
}
.builder-curve-dot {
  transition:
    cx var(--duration-expand) var(--ease-editorial),
    cy var(--duration-expand) var(--ease-editorial),
    r var(--duration-fast) ease,
    fill var(--duration-fast) ease,
    stroke var(--duration-fast) ease;
}
.builder-curve-svg.is-dragging .builder-curve-line,
.builder-curve-svg.is-dragging .builder-curve-dot {
  transition: none;
}

/* grade wheel dots ease home */
.builder-wheel-dot {
  transition:
    left var(--duration-expand) var(--ease-editorial),
    top var(--duration-expand) var(--ease-editorial);
}
.builder-wheel-disc.is-dragging .builder-wheel-dot {
  transition: none;
}

/* placement canvas block settles */
.builder-canvas-subject {
  transition:
    x var(--duration-expand) var(--ease-editorial),
    y var(--duration-expand) var(--ease-editorial),
    width var(--duration-expand) var(--ease-editorial),
    height var(--duration-expand) var(--ease-editorial);
}
.builder-canvas-handle {
  transition:
    cx var(--duration-expand) var(--ease-editorial),
    cy var(--duration-expand) var(--ease-editorial);
}
.builder-canvas-svg.is-dragging .builder-canvas-subject,
.builder-canvas-svg.is-dragging .builder-canvas-handle {
  transition: none;
}

/* proportion segments rebalance smoothly when not being dragged */
.builder-proportion-seg {
  transition: flex-grow var(--duration-base) var(--ease-editorial);
}
.builder-proportion-bar.is-dragging .builder-proportion-seg {
  transition: none;
}

/* library rows answer the cursor */
.builder-chunk {
  transition: background var(--duration-fast) ease;
}
.builder-chunk:not(.is-used):hover {
  background: var(--surface-pill-active, var(--surface-active));
}

/* confirmation pulse on copy actions */
.is-flash {
  animation: builder-pulse var(--duration-ui) var(--ease-editorial);
}
@keyframes builder-pulse {
  50% { transform: scale(0.96); }
}

/* ---------- responsive --------------------------------------- */
/* the single-column stack lives with the rail rules near the foot of
   this sheet (max-width: 1080px: rail horizontal, prompt first) */

@media (max-width: 640px) {
  .builder-module-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bl);
  }
  .builder-module-actions {
    gap: var(--bl);
    padding-bottom: 0;
  }
  .builder-swatch {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .builder-switch::after,
  .builder-pill,
  .builder-module-body,
  .builder-curve-line,
  .builder-curve-dot,
  .builder-wheel-dot,
  .builder-canvas-subject,
  .builder-canvas-handle,
  .builder-proportion-seg,
  .builder-range::-webkit-slider-thumb,
  .builder-range::-moz-range-thumb {
    transition: none;
  }
  .builder-popover,
  .builder-pickpop,
  .is-flash {
    animation: none;
  }
  .js-motion .builder-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- ergonomics pass -----------------------------------
   Builder-scoped additions. New tokens/components introduced here:
   - .builder-pill-cta  : ink-filled primary pill (mirrors .submit-button)
   - .builder-iris      : aperture opening glyph; --iris is the opening size
   None of this touches shared site styles — the landing page cannot drift. */

.builder-pill-cta {
  background: var(--ink);
  color: var(--text-inverse);
}
.builder-pill-cta:hover,
.builder-pill-cta:focus-visible {
  background: color-mix(in srgb, var(--ink) 86%, var(--bg));
  color: var(--text-inverse);
}

.builder-iris {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border: 1px solid var(--text-muted);
  border-radius: 50%;
  vertical-align: -3px;
}
.builder-iris::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--iris, 8px);
  height: var(--iris, 8px);
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: width var(--duration-ui) var(--ease-editorial, ease), height var(--duration-ui) var(--ease-editorial, ease);
}
.builder-slider:not(.is-set) .builder-iris {
  opacity: 0.4;
}

/* [hidden] must win over the display these blocks set for themselves */
.builder-proportions[hidden],
.builder-relationship[hidden],
.builder-pill[hidden] {
  display: none;
}

/* empty palette: one quiet hint instead of a meaningless empty instrument */
.builder-swatch-list:empty::before {
  content: "No colors yet. Add one below, or extract a palette from an image.";
  color: var(--text-muted);
  font-size: var(--type-control-size, var(--type-small-size));
  line-height: var(--type-control-line, var(--type-small-line));
}

/* curve dots grow toward the cursor — easier to grab, quietly alive
   (their r transition rides the morph list beside the curve rules) */
.builder-curve-dot:hover {
  r: 4.5;
}

@media (prefers-reduced-motion: reduce) {
  .builder-iris::after,
  .builder-curve-dot {
    transition: none;
  }
}


/* ---------- view cards --------------------------------------------- */

.builder-panel[hidden] {
  display: none;
}

/* modules read as sub-sections inside their panel, not editorial heads */
.builder-card .builder-module + .builder-module {
  margin-top: var(--builder-module-gap);
  padding-top: 0;
}
.builder-card .builder-module-title h2 {
  font-size: var(--type-control-size, var(--type-small-size));
  font-weight: var(--fw-medium);
  line-height: var(--type-control-line, var(--type-small-line));
  letter-spacing: 0;
}
.builder-card .builder-module-head {
  margin-bottom: var(--bl);
}
.builder-card .builder-module-title span {
  font-size: var(--type-control-size, var(--type-small-size));
}

/* ---------- hierarchy pass two ------------------------------------ */

/* module utilities keep quiet until the module is engaged */
.builder-module-actions {
  opacity: 0.5;
  transition: opacity var(--duration-fast) ease;
}
.builder-module:hover .builder-module-actions,
.builder-module:focus-within .builder-module-actions {
  opacity: 1;
}
@media (hover: none) {
  .builder-module-actions { opacity: 1; }
}

/* the home page's mobile rules reorder .works-title (order: 2) for its
   category-tabs; on the builder every title stays above its content */
.builder-app .works-title {
  order: 0;
  margin-top: 0;
}


/* interactions ride inside the prompt bento as a quiet strip */
.builder-output .builder-interactions {
  display: grid;
  gap: var(--bl);
  margin-top: calc(var(--bl) * 0.5);
  padding: calc(var(--bl) * 1.5) var(--builder-field-pad-x);
  border-radius: calc(var(--builder-card-radius) - var(--bl));
  background: var(--builder-field-bg);
}
.builder-output .builder-interactions .works-title h2 {
  font-size: var(--type-control-size, var(--type-small-size));
  font-weight: var(--fw-medium);
}

/* responsive: the rail turns horizontal above the stack, prompt keeps
   the slot directly beneath it */
@media (max-width: 1080px) {
  .builder-board {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(var(--gutter) * 1.5);
  }
  .builder-rail {
    position: static;
    max-height: none;
    overflow: visible;
    order: -2;
  }
  .builder-output { order: -1; }
  .builder-rail-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }
  .builder-rail-rule {
    width: 1px;
    height: 18px;
    margin: 11px 6px;
  }
  .builder-rail-icon::after {
    display: none; /* side tooltips have no room in a row */
  }
}
/* on phones the rule's margins would wrap the Library icon onto its own
   row (8 icons + rule need 349px); adjacency separates it instead */
@media (max-width: 480px) {
  .builder-rail-rule {
    display: none;
  }
}

/* ---------- bento interior: the site's own grammar -----------------
   Inside white bentos every component wears its committed treatment:
   quiet-gray inputs, gray pills with the deeper-gray + ink selected
   state (the More menu's "Any record"), muted text utilities, and one
   ink-filled primary action per view. No overrides needed for pills,
   inputs, or switches - they were designed for white. */

/* narrow screens: bentos tighten and segmented controls keep their proportion */
@media (max-width: 480px) {
  .builder-page {
    --builder-segment-x: 8px;
  }
}

.builder-interactions[hidden] {
  display: none;
}

/* one ink object per view: secondary CTAs wear the standard pill */
.builder-card .builder-pill-cta,
.builder-card .builder-pill-cta:hover,
.builder-card .builder-pill-cta:focus-visible {
  background: var(--surface-pill-active, var(--surface-active));
  color: var(--text-primary);
}


/* ---------- study 01: panel heads at the collections voice ---------- */

.builder-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gutter);
  margin-bottom: var(--page-gutter, 30px);
}
.builder-panel-title {
  margin: 0;
  width: fit-content;
  color: var(--text-primary);
  font-size: var(--type-title-size);
  font-weight: var(--fw-medium);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-tracking);
}
.builder-panel-title sup {
  font-size: var(--type-count-size);
  line-height: var(--type-count-line);
  letter-spacing: var(--type-count-tracking);
  font-weight: var(--fw-regular);
  vertical-align: top;
  position: relative;
  top: 2px;
  margin-left: 6px;
}
.builder-panel-title sup[hidden] {
  display: none;
}
/* provenance wash lands on the panel title when it speaks for a module */
.builder-panel-title.is-lit {
  background: var(--accent-selection);
  box-shadow: 0 0 0 4px var(--accent-selection);
  border-radius: 4px;
}
/* a merged single-module panel: actions ride the title line, optically
   centered against the 45.6px title */
.builder-panel-head .builder-module-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--bl) * 2);
  padding-top: 12px;
}
.builder-module-head.is-merged {
  display: none;
}
.builder-panel-head.builder-card-head {
  margin-bottom: var(--page-gutter, 30px);
}
.builder-output-head {
  margin-bottom: calc(var(--bl) * 2);
}

/* dialects are words, not a tray: muted at rest, ink when chosen */
.builder-dialects {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--bl) * 2);
  margin: 0 0 calc(var(--bl) * 1.5);
}
.builder-dialects .builder-pill,
.builder-dialects .builder-pill:hover,
.builder-dialects .builder-pill.is-active {
  background: none;
  box-shadow: none;
}
.builder-dialects .builder-pill {
  min-height: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  transition: color var(--duration-fast) ease;
}
.builder-dialects .builder-pill:hover,
.builder-dialects .builder-pill:focus-visible,
.builder-dialects .builder-pill.is-active {
  color: var(--text-primary);
}

/* ---------- study 06: chips, not fields ---------------------------- */
/* A vocabulary row is a record of decisions: label, chosen cues as
   chips, one ghost affordance. The full catalog appears only while
   shopping, in the unfolding sheet the pickers taught. */
.builder-cues {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bl);
  min-height: var(--pill-taxonomy-h, 34px);
}
.builder-cue-label {
  flex: 0 0 168px;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.builder-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--bl);
  max-width: 100%;
  min-height: var(--pill-taxonomy-h, 34px);
  padding: 0 10px 0 var(--pill-taxonomy-x, 14px);
  border-radius: var(--pill);
  background: var(--surface-pill-active, var(--surface-active));
  color: var(--text-primary);
  text-align: left;
  transition: background var(--duration-fast) ease;
}
.builder-cue:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--builder-slider-focus-ring);
}
/* variable labels truncate safely; the title carries the full phrase */
.builder-cue-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder-cue-x {
  color: var(--text-muted);
  font-size: var(--fs-lead, 15px);
  line-height: 1;
  padding: 0 2px;
  transition: color var(--duration-fast) ease;
}
.builder-cue:hover .builder-cue-x {
  color: var(--text-primary);
}
.builder-add-cue {
  display: inline-flex;
  align-items: center;
  min-height: var(--pill-taxonomy-h, 34px);
  padding: 0 var(--pill-taxonomy-x, 14px);
  border-radius: var(--pill);
  background: var(--surface-pill);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.builder-add-cue:hover,
.builder-add-cue:focus-visible,
.builder-add-cue[aria-expanded="true"] {
  outline: 0;
  color: var(--text-primary);
  background: var(--surface-pill-active);
}
/* the catalog floats, so it wears the popout costume */
.builder-cue-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 8;
  width: min(560px, 100%);
  padding: calc(var(--bl) * 2);
  border: var(--border-popout-shell, var(--border-popout));
  border-radius: var(--popout-radius);
  background: var(--background-popout-shell, var(--surface-popout, var(--bg)));
  box-shadow: var(--shadow-popout);
  isolation: isolate;
}
.builder-cue-pop-label {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}


/* Sliders are static, full-size instruments everywhere. The hover-expand
   ledger was tried and retired; detents stay as invisible snap only. */

/* ---------- study 10: the command line ----------------------------- */
/* One field over the whole vocabulary. The suggestion sheet is the
   picker unfold: it starts at the field's top edge, the field dissolves
   into its title row, rows share the field's 14px text column. */
.builder-cmd {
  position: relative;
}
.builder-cmd-input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--builder-field-pad-y) var(--builder-field-pad-x);
  border: var(--builder-field-border);
  border-radius: var(--builder-field-radius);
  background: var(--builder-field-bg);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--type-body-small-size, var(--type-small-size));
  line-height: var(--type-body-small-line, var(--type-small-line));
  outline: 0;
  transition:
    background var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}
.builder-cmd-input::placeholder {
  color: var(--text-placeholder, var(--text-muted));
}
/* the "/" shortcut lands here: focus must be visible on the closed field */
.builder-cmd-input:focus-visible {
  border-color: var(--border-text-entry-focus);
  box-shadow: var(--shadow-text-entry-focus);
}
.builder-cmd.is-open .builder-cmd-input {
  position: relative;
  z-index: 9;
  background: transparent;
  border-color: transparent;
}
/* open, the field is the sheet's title row; the sheet carries the focus */
.builder-cmd.is-open .builder-cmd-input:focus-visible {
  box-shadow: none;
}
.builder-cmd-pop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  width: 100%;
  padding: calc(var(--cmd-head-h, 40px) + 7px) 6px var(--bl);
  border: var(--border-popout-shell, var(--border-popout));
  border-radius: var(--popout-radius);
  background: var(--background-popout-shell, var(--surface-popout, var(--bg)));
  box-shadow: var(--shadow-popout);
  isolation: isolate;
}
.builder-cmd-pop::before {
  content: "";
  position: absolute;
  top: var(--cmd-head-h, 40px);
  left: 0;
  right: 0;
  border-top: var(--border-popout);
}
.builder-cmd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bl);
  width: 100%;
  padding: 8px var(--bl);
  border-radius: var(--pill);
  text-align: left;
  transition: background var(--duration-fast) ease;
}
.builder-cmd-row:hover,
.builder-cmd-row:focus-visible,
.builder-cmd-row.is-active {
  outline: 0;
  background: var(--surface-hover, var(--surface-quiet));
}
.builder-cmd-name {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.builder-cmd-where {
  flex: 0 0 auto;
  color: var(--text-muted);
}


/* ---------- the More unfold, for every dropdown sheet -------------- */
@keyframes builder-unfold-in {
  from {
    opacity: 0;
    clip-path: inset(0 100% calc(100% - var(--unfold-head, 48px)) 0 round var(--unfold-radius, var(--popout-radius)));
  }
  46% {
    opacity: 1;
    clip-path: inset(0 0 calc(100% - var(--unfold-head, 48px)) 0 round var(--unfold-radius, var(--popout-radius)));
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round var(--unfold-radius, var(--popout-radius)));
  }
}
.builder-pickpop {
  --unfold-head: 44px;
  --unfold-radius: var(--builder-pickpop-radius);
  animation: builder-unfold-in var(--duration-filter-in) var(--ease-editorial);
}
.builder-cmd-pop {
  --unfold-head: calc(var(--cmd-head-h, 40px) + 8px);
  animation: builder-unfold-in var(--duration-filter-in) var(--ease-editorial);
}
.builder-cue-pop {
  --unfold-head: 44px;
  animation: builder-unfold-in var(--duration-filter-in) var(--ease-editorial);
}
@media (prefers-reduced-motion: reduce) {
  .builder-pickpop, .builder-cmd-pop, .builder-cue-pop { animation: none; }
}

/* ---------- the light bench: dials left, the render in its own card --- */
/* The sphere is a framed object again; the six dials sit to its left in
   the 3x2 cluster, static and fully spaced from the start. */
@media (max-width: 900px) {
  .builder-dome { flex-wrap: wrap; }
}
.builder-dome-controls {
  flex: 1 1 0;
  min-width: 0;
  order: -1;
  display: grid;
  gap: calc(var(--bl) * 1.5);
}
.builder-dome-controls .builder-keylight-sliders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--bl) * 4);
  row-gap: var(--bl);
  max-width: none;
}
.builder-dome-controls .builder-dome-side {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--bl) * 2);
}
.builder-dome-controls .builder-curve-read {
  /* the bench read owns a fixed two-line box in this wide layout:
     "underlight from back-right, rising from below" must never
     reflow the dial cluster (readout law) */
  min-height: calc(var(--type-control-line, var(--type-small-line)) * 2);
  -webkit-line-clamp: 2;
}
.builder-dome .builder-dome-figure {
  width: auto;
  flex: 0 0 auto;
  font-size: 0;
}
.builder-dome .builder-sphere {
  display: block;
  border-radius: var(--radius);
}

/* boxless panels breathe at their scroll end */
.builder-views .builder-panel {
  padding-bottom: calc(var(--bl) * 4);
}