/* build.css — the Build tab: the gallery, the three concepts, the composer.
 *
 * SCOPE. Every rule starts `.bld`. This file is loaded on app.html alongside
 * styles.css / dashboard.css / mobile.css and must not reach any of them.
 *
 * TOKENS. Nothing is defined here that styles.css already defines. The design
 * named --bg-canvas, --accent-deep, --holo, --font-serif and the rest, and
 * every one of those already exists as a real token with a real dark-mode
 * value — so the whole file inherits dark mode from `body.dark` for free, and
 * the few places that need a dark-only correction say so explicitly.
 *
 * THE MINI ADS ARE CONTAINER QUERIES. One paint function per ad style serves
 * the 198px gallery card, the 420px composer canvas and the 112px placement
 * thumbnail. That only works because every size inside `.bld-ad` is in `cqw`
 * — percent of the ad's own width — so the same DOM scales to three sizes
 * with no second code path and no `style` attribute anywhere.
 *
 * HOLO BUDGET. Two elements, both in the composer: the generation progress
 * bar, and the "waiting for your OK" state. Holo is the machine acting or the
 * machine blocking on you. Everything the OWNER does is orange. If a third
 * holo rule appears in this file, one of the three is wrong.
 */

/* ── shell ─────────────────────────────────────────────────────────── */

.bld {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 0;
  min-height: 560px;
  border: 1px solid var(--sep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
}
@media (max-width: 900px) {
  .bld { grid-template-columns: minmax(0, 1fr); min-height: 0; border: 0; border-radius: 0; background: transparent; }
  /* THE COMPOSER KEEPS ITS RAIL ON A PHONE. Hiding it on every screen meant
     the brief — the six fields that decide what the ad says, including the
     single promise that seeds the campaign name — could not be reached at all
     below 900px. There was no other control anywhere that edits it. The
     gallery's rail is reference material and may still go. */
  .bld.is-gallery .bld-rail, .bld.is-concepts .bld-rail { display: none; }
  .bld.is-composer .bld-rail {
    display: block; border-right: 0; border-bottom: 1px solid var(--sep);
    max-height: none; background: transparent; padding: 0 0 10px;
  }
  .bld.is-composer .bld-rail-sec { padding-left: 0; padding-right: 0; }
}

/* The paper. The marketing page's 18px pixel grid, showing through the
   gutters between cards — the one piece of the home page's visual character
   that belongs inside the product. */
.bld-paper {
  background-color: var(--bg-surface);
  background-image:
    linear-gradient(var(--bld-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bld-grid) 1px, transparent 1px);
  background-size: 18px 18px;
  --bld-grid: rgba(28, 22, 16, .05);
}
body.dark .bld-paper { --bld-grid: rgba(255, 255, 255, .05); }

/* ── left rail: collapsing sections, hairline-indented bodies ───────── */

.bld-rail {
  border-right: 1px solid var(--sep);
  background: var(--bg-canvas);
  padding: 8px 0;
  overflow: auto;
  max-height: 78vh;
}
.bld-rail-sec { padding: 6px 14px 2px; }
.bld-rail-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; border: 0; background: none; font: inherit;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-primary);
  padding: 6px 0; cursor: pointer; text-align: left;
}
.bld-rail-head svg { color: var(--text-tertiary); transition: transform .15s; flex: none; }
.bld-rail-head.on svg { transform: rotate(90deg); }
.bld-rail-body {
  margin: 4px 0 10px 4px; padding-left: 12px;
  border-left: 1px solid var(--sep);
  display: flex; flex-direction: column; gap: 10px;
}
.bld-fact { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; align-items: baseline; }
.bld-fact > span:last-child { color: var(--text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.bld-fact.missing > span:last-child { color: var(--accent-text); }
button.bld-fact { border: 0; background: none; font: inherit; color: inherit; padding: 0; cursor: pointer; width: 100%; text-align: left; }
button.bld-fact:hover > span:first-child { text-decoration: underline; }
.bld-fact.on > span:first-child { font-weight: 600; }
.bld-rail-note { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); margin: 0; }

/* ── work area ─────────────────────────────────────────────────────── */

.bld-work { min-width: 0; display: flex; flex-direction: column; }
.bld-gallery { padding: 18px 22px 26px; display: flex; flex-direction: column; gap: 16px; overflow: auto; max-height: 78vh; }
@media (max-width: 900px) { .bld-gallery { padding: 4px 0 20px; max-height: none; overflow: visible; background: none; } }

/* the goal bar */
.bld-goalbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 6px 6px 6px 14px;
  box-shadow: var(--shadow-card);
}
.bld-goalbar svg { color: var(--accent-text); flex: none; }
.bld-goalbar input {
  flex: 1; min-width: 0; border: 0; background: transparent; font: inherit;
  font-size: 15px; color: var(--text-primary); outline: none; letter-spacing: -.01em;
}
.bld-goalbar input::placeholder { color: var(--text-tertiary); }
@media (max-width: 600px) {
  .bld-goalbar { display: grid; grid-template-columns: auto minmax(0, 1fr); padding: 10px; }
  .bld-goalbar input { min-height: 44px; width: 100%; }
  .bld-goalbar button { grid-column: 1 / -1; min-height: 44px; }
  .bld-tile .bld-pill { white-space: normal; overflow-wrap: anywhere; }
  .bld-seg button { min-height: 44px; }
}

.bld-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .bld-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bld-tile {
  background: var(--bg-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.bld-tile .bld-micro { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.bld-tile .bld-val {
  font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.022em; line-height: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* .bld sets overflow:hidden for its rounded corners, so a filter row wider
   than the pane was CLIPPED rather than reachable — at 375px the tier control
   is 425px and "Needs filming" was cut off entirely. Each seg scrolls on its
   own instead. */
.bld-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; max-width: 100%; }
.bld-filters > .bld-seg { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.bld-sorted { margin-left: auto; font-size: 12px; color: var(--text-secondary); }

/* segmented control — the product's canonical tab affordance */
.bld-seg { display: inline-flex; background: var(--bg-muted); border-radius: var(--radius); padding: 3px; gap: 2px; }
.bld-seg button {
  border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary); padding: 5px 10px; border-radius: 7px; cursor: pointer;
  letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.bld-seg button:hover { color: var(--text-primary); }
.bld-seg button.on { background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 1px 2px rgba(17, 17, 20, .08); }
body.dark .bld-seg button.on { box-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.bld-seg .bld-n { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

/* ── the wall of style cards ───────────────────────────────────────── */

.bld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(198px, 1fr)); gap: 18px; }
.bld-card {
  background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 10px; display: flex; flex-direction: column; gap: 9px; cursor: pointer;
  transition: transform .15s, box-shadow .15s; text-align: left; border: 0; font: inherit; color: inherit;
}
.bld-card:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(17, 17, 20, .06), 0 10px 22px -12px rgba(17, 17, 20, .3); }
.bld-card:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
/* A promise of work, not a product — so it is drawn as a plan, not an ad. */
.bld-card.film { background: transparent; box-shadow: none; border: 1px dashed var(--border); }
.bld-card.film:hover { box-shadow: none; border-color: var(--text-tertiary); transform: none; }
.bld-card-bed { background: var(--bg-muted); border-radius: 10px; padding: 14px 26px; }
.bld-card.film .bld-card-bed { background: transparent; padding: 12px 20px; }
.bld-card-foot { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; }
.bld-card-name {
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
  font-family: var(--font-serif); font-size: 16px; font-weight: 600; letter-spacing: -.022em;
  /* "Needs 60 seconds of filming" is 27 characters against a 172px card. Without
     wrap it hung up to 92px outside the card's right edge on five styles. */
  flex-wrap: wrap;
}
.bld-card-name > span:first-child { min-width: 0; }
.bld-card-why { font-size: 12.5px; color: var(--text-secondary); line-height: 1.35; }

.bld-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  letter-spacing: .02em; padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--bg-muted); color: var(--text-secondary); white-space: nowrap; line-height: 1.3;
  font-family: var(--font-sans);
}
.bld-pill svg { flex: none; }
.bld-pill.ready { background: var(--success-soft); color: var(--success); }
.bld-pill.needs { background: var(--accent-soft); color: var(--accent-text); }
.bld-pill.film { background: transparent; border: 1px dashed var(--text-tertiary); color: var(--text-secondary); }
.bld-pill.holo { background: var(--holo-tint); color: var(--holo-text); }
.bld-pill.bad { background: var(--danger-soft); color: var(--danger); }

/* ── the ad itself. Every size below is cqw: percent of the ad's width. ── */

.bld-ad {
  background: #fff; color: #111114; container-type: inline-size; position: relative;
  overflow: hidden; font-family: var(--font-sans); letter-spacing: -.01em;
  aspect-ratio: 4 / 5; width: 100%; border-radius: 6px;
  box-shadow: 0 1px 3px rgba(17, 17, 20, .14);
}
/* An ad is a picture of a thing that will run on Meta in daylight. It does
   NOT invert in dark mode — the same exemption app.html already documents for
   .ad-frame and the AdPreview mockups. */
.bld-ad .bld-in {
  position: absolute; inset: 0; padding: 7cqw; display: flex; flex-direction: column;
  justify-content: center; gap: 3cqw;
}
.bld-ad .bld-k { font-size: 3.9cqw; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(60, 60, 67, .62); }
.bld-ad .bld-h { font-family: var(--font-serif); font-size: 7.4cqw; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-wrap: pretty; }
.bld-ad .bld-h.big { font-size: 9.5cqw; }
.bld-ad .bld-b { font-size: 4.2cqw; line-height: 1.35; color: rgba(60, 60, 67, .82); }
/* The truncated tail, shown struck inside the ad. .5 measured ~2.16:1; the
   strikethrough already carries the meaning, so the ink can afford to be read. */
.bld-ad .bld-cut { color: #BF4708; opacity: .72; text-decoration: line-through; }
.bld-ad .bld-brand {
  position: absolute; left: 7cqw; right: 7cqw; bottom: 5cqw; display: flex;
  justify-content: space-between; gap: 3cqw; font-size: 3.9cqw; color: rgba(60, 60, 67, .62); font-weight: 600;
}
.bld-ad .bld-cta {
  align-self: flex-start; background: #C65310; color: #fff; font-size: 4.3cqw; font-weight: 600;
  padding: 2.4cqw 5cqw; border-radius: 99px; margin-top: 1cqw;
}
.bld-ad .bld-num { font-variant-numeric: tabular-nums; }
.bld-ad .bld-row {
  display: flex; justify-content: space-between; gap: 3cqw; font-size: 4.3cqw;
  padding: 1.8cqw 0; border-bottom: 1px dashed rgba(60, 60, 67, .25);
}
.bld-ad .bld-total { display: flex; justify-content: space-between; font-size: 5.2cqw; font-weight: 700; padding-top: 2.5cqw; }
.bld-ad .bld-stars { color: #F5A623; font-size: 6cqw; letter-spacing: .1em; }
.bld-ad .bld-quote { font-family: var(--font-serif); font-size: 6.4cqw; line-height: 1.2; letter-spacing: -.015em; }
.bld-ad .bld-by { font-size: 4.2cqw; color: rgba(60, 60, 67, .62); }
.bld-ad .bld-rating { font-size: 28cqw; font-weight: 700; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.bld-ad .bld-price { font-family: var(--font-serif); font-size: 15cqw; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.bld-ad .bld-price.mid { font-size: 12cqw; }
.bld-ad .bld-label { font-family: var(--font-serif); font-size: 6.6cqw; line-height: 1.15; }
.bld-ad .bld-fine { font-size: 4.3cqw; color: rgba(60, 60, 67, .62); line-height: 1.3; }
.bld-ad .bld-bullet { display: flex; gap: 2.6cqw; align-items: center; font-size: 4.6cqw; padding: 1.6cqw 0; }
.bld-ad .bld-dot { width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: #C65310; flex: none; }
.bld-ad .bld-tier { border: 1px solid rgba(60, 60, 67, .2); border-radius: 2cqw; padding: 3.2cqw 4cqw; display: flex; justify-content: space-between; align-items: baseline; }
.bld-ad .bld-tier.on { border-color: #C65310; border-width: 2px; }
.bld-ad .bld-tier span:first-child { font-size: 4.6cqw; font-weight: 600; }
.bld-ad .bld-tier span:last-child { font-family: var(--font-serif); font-size: 5.6cqw; font-weight: 700; font-variant-numeric: tabular-nums; }
.bld-ad .bld-vs { display: grid; grid-template-columns: 1fr 13cqw 13cqw; font-size: 4.2cqw; padding: 2.4cqw 0; border-top: 1px solid rgba(60, 60, 67, .16); align-items: center; }
.bld-ad .bld-vs.head { font-size: 3.8cqw; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(60, 60, 67, .62); border-top: 0; padding-bottom: 2cqw; }
.bld-ad .bld-vs .us { color: #248A3D; font-weight: 700; text-align: center; }
.bld-ad .bld-vs .them { color: rgba(60, 60, 67, .5); text-align: center; }
.bld-ad .bld-vs.head .us { color: #111114; }
.bld-ad .bld-seal { width: 15cqw; height: 15cqw; border-radius: 50%; border: 1.6cqw solid #C65310; display: flex; align-items: center; justify-content: center; margin-bottom: 1cqw; }
.bld-ad .bld-seal svg { width: 7cqw; height: 7cqw; }
.bld-ad .bld-photo {
  background: repeating-linear-gradient(135deg, #d9d3c8 0 6px, #cfc8bb 6px 12px);
  display: flex; align-items: center; justify-content: center; color: rgba(60, 60, 67, .55);
  font-size: 3.8cqw; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
}
.bld-ad .bld-photo.b { background: repeating-linear-gradient(135deg, #aebccb 0 6px, #a2b1c1 6px 12px); }
.bld-ad .bld-selected-photo { display: block; width: 100%; height: 100%; object-fit: cover; min-width: 0; min-height: 0; }
.bld-approval-image { display: block; width: auto; max-width: 100%; max-height: 440px; margin: 16px auto; border: 1px solid var(--border); border-radius: 8px; }
.bld-ad .bld-split { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.bld-ad .bld-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14cqw 7cqw 12cqw;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: #fff;
  font-family: var(--font-serif); font-size: 6.6cqw; font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
}
.bld-ad .bld-scrim + .bld-brand { color: rgba(255, 255, 255, .8); }
.bld-ad .bld-map {
  position: absolute; inset: 0; background-color: #EEF1EA;
  background-image: linear-gradient(rgba(60, 60, 67, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 60, 67, .12) 1px, transparent 1px);
  background-size: 16cqw 16cqw;
}
.bld-ad .bld-road { position: absolute; left: -10cqw; right: -10cqw; top: 44cqw; height: 8cqw; background: #fff; transform: rotate(-12deg); }
.bld-ad .bld-road.v { left: 58cqw; right: auto; top: -10cqw; bottom: -10cqw; width: 6cqw; height: auto; transform: rotate(14deg); }
.bld-ad .bld-pin { position: absolute; left: 46cqw; top: 34cqw; width: 13cqw; height: 13cqw; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #C65310; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.bld-ad .bld-callout { position: absolute; left: 7cqw; right: 7cqw; bottom: 15cqw; background: #fff; border-radius: 2cqw; padding: 3.6cqw 4cqw; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.bld-ad .bld-dots { display: flex; gap: 1.5cqw; margin-top: 2cqw; }
.bld-ad .bld-dots i { width: 8cqw; height: 1.2cqw; background: rgba(60, 60, 67, .2); border-radius: 1cqw; }
.bld-ad .bld-dots i.on { background: #C65310; }
/* The Ugly Ad — wins by not looking like an ad, so it gets its own skin. */
.bld-ad.ugly .bld-in { background: #FFE600; color: #000; gap: 4cqw; }
.bld-ad.ugly .bld-h { font-family: var(--font-sans); font-size: 15cqw; font-weight: 900; line-height: .95; text-transform: uppercase; letter-spacing: -.03em; }
.bld-ad.ugly .bld-b { font-size: 5.2cqw; font-weight: 700; line-height: 1.25; color: #000; }
.bld-ad.ugly .bld-phone { font-size: 5.4cqw; font-weight: 900; text-decoration: underline; }
.bld-ad.ugly .bld-brand { color: #000; }
/* Shot lists are plans. Dashed, unstyled, obviously not a finished thing. */
.bld-ad.plan { background: var(--bg-canvas); color: var(--text-primary); box-shadow: none; border: 1px dashed var(--text-tertiary); }
.bld-ad.plan .bld-in { justify-content: flex-start; gap: 3cqw; }
.bld-ad.plan .bld-k { color: var(--text-secondary); }
.bld-ad.plan .bld-shot { display: flex; gap: 3cqw; font-size: 4.4cqw; line-height: 1.3; }
.bld-ad.plan .bld-shot i { color: var(--text-tertiary); font-weight: 600; font-style: normal; font-variant-numeric: tabular-nums; }
.bld-ad.plan .bld-foot { margin-top: auto; font-size: 4cqw; color: var(--text-secondary); }
.bld-ad.plan .bld-clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.bld-ad.plan .bld-clips div { aspect-ratio: 9 / 16; border: 1px dashed var(--text-tertiary); border-radius: 1.5cqw; display: flex; align-items: flex-end; padding: 2cqw; font-size: 3.6cqw; color: var(--text-secondary); }
/* A card that cannot be filled from this workspace's facts says so, on the ad. */
.bld-ad .bld-gapnote {
  position: absolute; inset: auto 0 0 0; background: rgba(255, 255, 255, .93);
  border-top: 1px solid rgba(60, 60, 67, .16); padding: 4cqw 6cqw;
  font-size: 3.9cqw; line-height: 1.35; color: #BF4708; font-weight: 600;
}
.bld-ad.gapped .bld-in { opacity: .45; }

/* the safe-zone overlay — guidance, not damage */
.bld-safe { position: absolute; inset: 14% 6% 35% 6%; box-shadow: 0 0 0 999px rgba(17, 17, 20, .38); border: 1px dashed rgba(255, 255, 255, .75); border-radius: 1.5cqw; pointer-events: none; }
.bld-safe-lab { position: absolute; left: 6%; right: 6%; font-size: 3.4cqw; color: rgba(255, 255, 255, .9); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; text-align: center; }
.bld-safe-lab.top { top: 5cqw; }
.bld-safe-lab.bot { bottom: 6cqw; }

/* ── three concepts ────────────────────────────────────────────────── */

.bld-concepts { padding: 30px 34px; display: flex; flex-direction: column; gap: 24px; max-width: 1000px; }
@media (max-width: 900px) { .bld-concepts { padding: 4px 0 20px; } }
.bld-concepts h2 { font-family: var(--font-serif); font-size: 28px; font-weight: 400; line-height: 1.08; letter-spacing: -.02em; text-wrap: pretty; margin: 0; }
.bld-lede { font-size: 13.5px; color: var(--text-secondary); max-width: 560px; line-height: 1.45; margin: 0; }
.bld-conc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 820px) { .bld-conc-grid { grid-template-columns: minmax(0, 1fr); } }
.bld-conc {
  background: var(--bg-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 18px; text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px; transition: transform .15s;
}
.bld-conc:hover { transform: translateY(-1px); }
/* Selection is a user act, so it is orange. Never holo. */
.bld-conc.on { box-shadow: var(--shadow-card), 0 0 0 2px var(--accent-bright); }
.bld-conc-name { font-family: var(--font-serif); font-size: 21px; font-weight: 600; letter-spacing: -.022em; line-height: 1.1; }
.bld-conc-angle { font-size: 13.5px; line-height: 1.4; }
.bld-conc-why { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; font-family: var(--font-serif); font-style: italic; }
.bld-conc-tags { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }

/* ── composer ──────────────────────────────────────────────────────── */

.bld-composer { padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 12px; overflow: auto; max-height: 78vh; }
@media (max-width: 900px) { .bld-composer { padding: 4px 0 20px; max-height: none; overflow: visible; } }
.bld-chead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bld-chead .bld-ttl { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bld-chead .bld-ttl b { font-family: var(--font-serif); font-size: 17px; font-weight: 600; letter-spacing: -.022em; line-height: 1.1; }
.bld-chead .bld-ttl span { font-size: 12px; color: var(--text-secondary); }
.bld-ctl { display: flex; align-items: center; gap: 16px; flex: none; flex-wrap: wrap; max-width: 100%; }
.bld-toggle-lab { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.bld-model-choice { min-width: 0; max-width: 100%; }
.bld-model-choice select { min-width: 0; width: 17rem; max-width: 100%; }
.bld-toggle { width: 34px; height: 20px; border-radius: var(--radius-pill); background: var(--border); border: 0; position: relative; cursor: pointer; padding: 0; flex: none; transition: background .15s; }
.bld-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.bld-toggle.on { background: var(--accent-bright); }
.bld-toggle.on::after { transform: translateX(14px); }

.bld-stage { display: flex; gap: 20px; align-items: stretch; min-width: 0; }
@media (max-width: 1100px) { .bld-stage { flex-direction: column; } }
/* THE CANVAS IS A FIXED-HEIGHT STAGE and the ad sizes itself from that height.
   `flex: 1` here was a bug with teeth: below 1100px the stage turns into a
   COLUMN, so the main axis becomes height, `flex:1` resolves to flex-basis 0%,
   and the explicit height lost to it — the hero preview was 0px tall on every
   phone, tablet and half-width desktop window. The owner saw the head row, then
   "Copy", and nothing between them.
   `flex: 1 1 auto` keeps the basis on the element's own size, and the column
   case pins it outright below. */
.bld-canvas {
  flex: 1 1 auto; min-width: 0; height: 380px;
  display: flex; align-items: center; justify-content: center; transition: opacity .3s;
}
.bld-canvas .bld-ad { height: 100%; width: auto; max-width: 100%; }
.bld-canvas.busy { opacity: .5; }
@media (max-width: 1100px) { .bld-canvas { flex: none; height: 320px; } }
@media (max-width: 560px) { .bld-canvas { height: 260px; } }
.bld-inspector { width: 300px; flex: none; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 1100px) { .bld-inspector { width: auto; } }

.bld-variant {
  background: var(--bg-surface); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; border: 0; text-align: left;
}
.bld-variant.on { box-shadow: var(--shadow-card), 0 0 0 2px var(--accent-bright); }
.bld-variant input, .bld-variant textarea {
  border: 0; background: transparent; font: inherit; color: var(--text-primary);
  width: 100%; padding: 0; resize: none; letter-spacing: -.01em;
}
.bld-variant input { font-family: var(--font-serif); font-size: 15px; font-weight: 600; letter-spacing: -.022em; }
.bld-variant textarea { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }
.bld-variant input:focus, .bld-variant textarea:focus { outline: none; }
.bld-variant .bld-len { font-size: 10.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.bld-variant .bld-len.warn { color: var(--accent-text); }
.bld-variant .bld-len.bad { color: var(--danger); }

/* the counter row: what it accepts, and where it visually cuts */
.bld-counts { display: flex; gap: 18px; font-size: 12.5px; color: var(--text-secondary); align-items: center; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.bld-counts b { color: var(--text-primary); }
.bld-counts .warn { color: var(--accent-text); }
.bld-counts .bad { color: var(--danger); }
.bld-counts .bld-spacer { margin-left: auto; color: var(--text-secondary); }

/* the placement strip — the same ad, five times, live */
.bld-strip { display: flex; gap: 10px; align-items: flex-end; overflow-x: auto; padding: 2px 0 6px; }
.bld-thumb { background: none; border: 0; padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font: inherit; color: inherit; border-radius: 8px; flex: none; width: 92px; }
.bld-thumb:hover { background: var(--bg-muted); }
.bld-thumb .bld-ad { width: 100%; }
.bld-thumb.on .bld-ad { box-shadow: 0 0 0 2px var(--accent-bright); }
.bld-thumb .bld-tname { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
/* "27 of 39 shown" is the whole point of the strip, so it does not get the
   faintest ink in the ramp (--text-tertiary measures ~2.05:1 on white). */
.bld-thumb .bld-tnote { font-size: 10.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bld-thumb .bld-tnote.warn { color: var(--accent-text); }
.bld-thumb .bld-tnote.bad { color: var(--danger); }

/* ── compliance strip ──────────────────────────────────────────────── */

.bld-comp { margin-top: auto; padding-top: 8px; }
.bld-comp-clear { font-size: 12.5px; line-height: 1.45; color: var(--text-tertiary); padding: 8px 2px; margin: 0; }
.bld-comp-box { border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.bld-comp-box.warn { background: var(--accent-soft); }
.bld-comp-box.block { background: var(--danger-soft); }
.bld-comp-box .bld-micro { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.bld-comp-box.warn .bld-micro { color: var(--accent-text); }
.bld-comp-box.block .bld-micro { color: var(--danger); }
.bld-comp-box p { font-size: 12.5px; line-height: 1.5; text-wrap: pretty; margin: 0; }
/* The correction pair rendered inline. This is the product teaching. */
.bld-fix { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-serif); font-size: 14px; line-height: 1.3; letter-spacing: -.015em; }
/* The struck "before" half of the correction pair. It has to stay READABLE —
   it is the sentence the owner is being taught not to write. */
.bld-fix s { color: var(--text-secondary); }
.bld-fix .bld-to { display: flex; gap: 8px; align-items: baseline; }
.bld-fix .bld-to svg { color: var(--text-tertiary); flex: none; transform: translateY(2px); }
.bld-fix .bld-to b { font-weight: 600; }

/* ── the two holo moments, and nothing else ────────────────────────── */

.bld-holo-bar { height: 2px; background: var(--holo-soft); border-radius: 1px; overflow: hidden; }
.bld-holo-bar i { display: block; height: 100%; width: 40%; background: var(--holo); border-radius: 1px; animation: bld-holo-run 1.4s ease-in-out infinite; }
@keyframes bld-holo-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.bld-status { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bld-approval { box-shadow: inset 3px 0 0 var(--holo); background: var(--bg-surface); border-radius: var(--radius-lg); padding: 15px 17px; }
.bld-prompt {
  font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); background: var(--bg-muted);
  border-radius: var(--radius); padding: 10px 12px; max-height: 190px; overflow: auto; text-wrap: pretty; margin: 0;
}
@media (prefers-reduced-motion: reduce) { .bld-holo-bar i { animation: none; width: 100%; } .bld-card, .bld-conc, .bld-toggle, .bld-toggle::after, .bld-canvas { transition: none; } }

.bld-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bld-note { font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin: 0; }
.bld-head-row { display: flex; flex-direction: column; gap: 2px; }
.bld-head-row b { font-size: 14px; font-weight: 600; }
.bld-head-row span { font-size: 12px; color: var(--text-secondary); }

/* ── the three shapes an ad can be ─────────────────────────────────────
   Set as a class rather than a computed style attribute, so build.js needs
   no inline styles to draw five placements at their true ratios. */
.bld-ad.r-sq   { aspect-ratio: 1 / 1; }
.bld-ad.r-tall { aspect-ratio: 4 / 5; }
.bld-ad.r-vert { aspect-ratio: 9 / 16; }

/* micro-labels and inline counts, wherever they appear inside Build */
.bld .bld-micro { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.bld .bld-n { font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; font-weight: 500; }

/* photo blocks inside a laid-out ad (Job Site Walkthrough) */
.bld-ad .bld-in > .bld-photo { height: 24cqw; border-radius: 1.5cqw; flex: none; }
.bld-ad .bld-in > .bld-clips { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5cqw; }
.bld-ad .bld-in > .bld-clips > div { height: 20cqw; border-radius: 1.5cqw; background: repeating-linear-gradient(135deg, #d9d3c8 0 6px, #cfc8bb 6px 12px); display: flex; align-items: center; justify-content: center; font-size: 3.8cqw; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(60, 60, 67, .55); }

/* the brief's fields, borrowed from the shell's kit and tightened for a
   272px rail rather than a full-width sheet */
.bld-rail-body .ms-field { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.bld-rail-body .ms-label { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.bld-rail-body .ms-input {
  width: 100%; font: inherit; font-size: 13px; letter-spacing: -.01em; color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 9px; resize: none; line-height: 1.35; margin: 0 0 4px;
}
.bld-rail-body .ms-input:focus { border-color: var(--accent-bright); outline: none; }
/* The promise field is the one the design wants to feel constrained. */
.bld-rail-body .ms-field:has(> .ms-label > .bld-n) > .ms-input { font-family: var(--font-serif); font-size: 14.5px; border-color: var(--accent-bright); }
.bld-rail-body .bld-note { margin: 0 0 2px; font-size: 11px; color: var(--text-tertiary); }
.bld-rail-body .btn { align-self: flex-start; }

/* the approval panel is an inspector wearing a holo rail */
.bld-inspector.bld-approval { gap: 10px; }
.bld-inspector.bld-approval .bld-acts { margin-top: 4px; }

/* ── width ────────────────────────────────────────────────────────────
   The shell caps every screen at a 920px reading column
   (mobile.css `.m-split-detail>.ms-pane`). That is right for a list of rows
   and wrong for a wall of ad thumbnails sitting beside a 272px rail — it
   cost two columns of gallery. screens.js adds .bld-pane on the Build tab
   only, and pane() is rebuilt every render so it cannot leak. */
.m-split-detail > .ms-pane.bld-pane { max-width: none; }

/* 168px, not 198px: three ad cards have to fit the narrowest work area this
   shell produces, and a card is legible well below the design's 198 because
   everything inside it is sized in cqw. */
.bld-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }

/* The composer is a flex column that scrolls. Without this, every row below
   the canvas is a shrinkable flex item and the placement strip — 136px of
   thumbnails — was squashed to 49px and clipped. The strip, the counters and
   the head are fixed-height rows; only the stage may absorb slack. */
.bld-composer > .bld-chead,
.bld-composer > .bld-counts,
.bld-composer > .bld-strip,
.bld-composer > .bld-note { flex: none; }
.bld-composer > .bld-stage { flex: 1 1 auto; min-height: 0; }

/* The canvas is a FIXED-HEIGHT stage and the ad sizes itself from that height,
   not from the column's width. Sizing by width instead let a 9:16 Reels ad
   grow to twice the stage and overlap the placement strip below it, and it
   also made the same ad jump size every time the owner switched placement.
   Height fixed, width from the aspect ratio: five shapes, one footprint. */
.bld-composer > .bld-stage { flex: none; }

/* ── placeholders: a slot with nothing true to put in it ──────────────
   Drawn as an obvious blank rather than filled with a plausible number. The
   gallery's whole claim is that it does not invent facts, and a greyed dash
   is the visible form of that promise. */
.bld-ad .placeholder { color: rgba(60, 60, 67, .38); }
.bld-ad .bld-rating.placeholder { font-weight: 400; }

/* The requirement sentence, in the composer, at a size a person can read.
   Inside the mini it renders at 3.9cqw — about 3.9px on a 100px gallery
   thumbnail — so the one actionable sentence on the card was illegible. */
.bld-composer .bld-ad .bld-gapnote { font-size: 12.5px; padding: 10px 14px; }

/* ── the secondary filter row ─────────────────────────────────────────
   Compact selects rather than three more segmented controls: the tier row is
   the one people live in and it has to keep its weight. */
.bld-filters-2 { gap: 10px; }
.bld-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.bld-pick-sel {
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--text-primary); background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; cursor: pointer;
}
.bld-pick-sel:focus { border-color: var(--accent-bright); outline: none; }
.bld-filters-2 .btn { padding: 4px 10px; font-size: 12px; }

/* ── styles added with the offer axis ────────────────────────────────── */

/* Text Thread — the reply itself, as the ad. */
.bld-ad .bld-thread { display: flex; flex-direction: column; gap: 2.4cqw; margin-top: 2cqw; }
.bld-ad .bld-bub {
  max-width: 82%; padding: 3cqw 4cqw; border-radius: 4cqw; font-size: 4.2cqw; line-height: 1.3;
}
.bld-ad .bld-bub.them { background: rgba(120, 120, 128, .14); align-self: flex-start; border-bottom-left-radius: 1cqw; }
.bld-ad .bld-bub.us { background: #C65310; color: #fff; align-self: flex-end; border-bottom-right-radius: 1cqw; }
.bld-ad .bld-bub-meta { align-self: flex-end; font-size: 3.4cqw; color: rgba(60, 60, 67, .62); font-weight: 600; }

/* Process Ladder — numbered steps. */
.bld-ad .bld-step { display: flex; gap: 3cqw; align-items: baseline; font-size: 4.2cqw; line-height: 1.3; padding: 1.4cqw 0; }
.bld-ad .bld-stepn {
  flex: none; width: 6cqw; height: 6cqw; border-radius: 50%; background: #C65310; color: #fff;
  font-size: 3.4cqw; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* Trust Stack — a tick per row instead of a bullet. */
.bld-ad .bld-tick { width: 4cqw; height: 4cqw; color: #248A3D; flex: none; }

/* Emergency Card — the number is the ad. */
.bld-ad .bld-phone-big {
  font-size: 11cqw; font-weight: 900; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; margin: 1cqw 0;
}

/* Photo-led styles: a photo that fills the frame, and one that sits inline. */
.bld-ad .bld-photo.bld-fill { position: absolute; inset: 0; }
.bld-ad .bld-ed-photo { height: 34cqw; border-radius: 1.5cqw; }
.bld-ad .bld-inline-photo {
  flex: 1; height: 12cqw; border-radius: 1cqw; display: flex; align-items: center; justify-content: center;
}
.bld-ad .bld-dots.bld-dots-abs { position: absolute; left: 7cqw; bottom: 14cqw; }
/* Neighborhood Map scatters pins rather than showing one. */
.bld-ad .bld-pin-0 { left: 22cqw; top: 26cqw; }
.bld-ad .bld-pin-1 { left: 52cqw; top: 18cqw; }
.bld-ad .bld-pin-2 { left: 68cqw; top: 40cqw; }
.bld-ad .bld-pin-3 { left: 34cqw; top: 48cqw; }
.bld-ad .bld-pin-4 { left: 78cqw; top: 24cqw; }
.bld-ad .bld-pin-0, .bld-ad .bld-pin-1, .bld-ad .bld-pin-2,
.bld-ad .bld-pin-3, .bld-ad .bld-pin-4 { width: 8cqw; height: 8cqw; }

/* Which of the three variants the approval panel is about to write. */
.bld-picks { display: flex; gap: 6px; flex-wrap: wrap; }
.bld-pickone {
  border: 1px solid var(--border); background: var(--bg-surface); font: inherit;
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  padding: 4px 10px; border-radius: var(--radius-pill); cursor: pointer;
}
.bld-pickone.on { border-color: var(--accent-bright); color: var(--text-primary); }

/* The persistent Alice column makes pane width smaller than viewport width.
   Reuse the phone layout when Build's own space needs it; the composer keeps
   its editable business details, while gallery reference material folds away. */
.bld-pane { container: build-workspace / inline-size; width: 100%; }
@container build-workspace (max-width: 900px) {
  .bld { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bld.is-gallery .bld-rail, .bld.is-concepts .bld-rail { display: none; }
  .bld.is-composer .bld-rail { display: block; border-right: 0; border-bottom: 1px solid var(--sep); max-height: none; }
  .bld-gallery, .bld-composer { max-height: none; overflow: visible; }
  .bld-stage { flex-direction: column; }
  .bld-canvas { flex: none; height: 320px; }
  .bld-inspector { width: auto; }
  .bld-conc-grid { grid-template-columns: minmax(0, 1fr); }
}
@container build-workspace (max-width: 600px) {
  .bld-goalbar { display: grid; grid-template-columns: auto minmax(0, 1fr); padding: 10px; }
  .bld-goalbar input { min-height: 44px; width: 100%; }
  .bld-goalbar button { grid-column: 1 / -1; min-height: 44px; }
  .bld-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bld-tile .bld-pill { white-space: normal; overflow-wrap: anywhere; }
}