/* The Builder (tools/builder.py): the person behind the Test Track, and the way to work with the studio. Loaded on that page only, after garage.css.
   The portrait and the story share one row from 900px; on a phone the portrait is a byline and the story follows it. The phone type scale is the four
   sizes garage.css names (--t-body, --t-sub, --t-foot, --t-cap): a new part takes one of them and never a size of its own. */

.bd-hero .hero-panel{ max-width:820px }
.bd-hero .hero-blob{ max-width:58ch }
.bd-hero .eyebrow{ color:var(--amber) }

.bd-terms{ margin:14px 0 0; max-width:58ch; color:var(--ink-2); font-size:.92rem; line-height:1.5 }
.bd-soft{ margin:8px 0 0; color:var(--ink-2); font-size:.92rem }
.bd-soft a, .bd-close a, .bd-intro a{ font-weight:700 }

.bd-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; margin:22px 0 0 }

/* the portrait: a byline on a phone, a column from 900px */
.bd-fig{ margin:0; display:grid; grid-template-columns:84px minmax(0,1fr); gap:6px 14px; align-items:center }
.bd-fig img{ display:block; width:84px; height:105px; object-fit:cover; object-position:50% 14%; border-radius:var(--r-box);
  border:1px solid var(--hairline,rgba(229,231,235,.10)) }
.bd-fig figcaption{ display:grid; gap:2px; color:var(--ink-2); font-size:.8rem; line-height:1.4; text-shadow:var(--halo) }
.bd-fig figcaption strong{ color:var(--ink); font-size:.98rem; font-weight:700 }

/* the story: one glass panel, a rail with a dot for each step */
.bd-main{ padding:clamp(18px,3vw,30px) clamp(16px,3.2vw,34px) }
.bd-steps{ list-style:none; margin:0; padding:0 }
.bd-steps > li{ position:relative; margin:0; padding:0 0 26px 24px; border-left:1px solid rgba(229,231,235,.22) }
.bd-steps > li::before{ content:""; position:absolute; left:-6px; top:.15em; width:11px; height:11px; border-radius:50%;
  background:var(--ignition); box-shadow:0 0 0 4px rgba(244,81,30,.18) }
.bd-steps > li:last-child{ border-left-color:transparent; padding-bottom:6px }
.bd-steps > li:last-child::before{ background:var(--speed-blue); box-shadow:0 0 0 4px rgba(var(--speed-blue-rgb),.2) }
.bd-yr{ display:block; margin:0 0 .35em; color:var(--amber); font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase }
.bd-steps h2{ margin:0 0 .45em }
.bd-steps p, .bd-more p{ max-width:62ch; color:var(--ink) }
.bd-steps p:last-child{ margin-bottom:0 }

.bd-more{ margin:8px 0 0; padding:24px 0 0 24px; border-top:1px solid var(--hairline,rgba(229,231,235,.10)) }
.bd-more + .bd-more{ margin-top:22px }
.bd-more h2{ margin:0 0 .45em }
.bd-pull{ margin:.9em 0 0; padding:.1em 0 .1em 16px; border-left:2px solid var(--ignition) }
.bd-pull blockquote{ margin:0 }
.bd-pull p{ margin:0; color:var(--ink); font-size:1.04rem; line-height:1.5 }
.bd-pull figcaption{ margin:.55em 0 0; color:var(--ink-2); font-size:.85rem }

/* what has been built: a list of rows, each a link */
.bd-built{ margin-top:22px }
.bd-built h2, .bd-work h2{ margin:0 0 .4em }
.bd-note{ max-width:62ch; color:var(--ink-2) }
.bd-close{ margin:14px 0 0; max-width:62ch; color:var(--ink) }
.bd-list{ list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:0 28px }
.bd-list li{ border-top:1px solid var(--hairline,rgba(229,231,235,.10)) }
.gx .bd-list a{ display:grid; gap:3px; padding:14px 0; border-bottom:0; color:var(--ink) }
.gx .bd-list a:hover .bd-n{ color:var(--ignition) }
.bd-n{ font-weight:700 }
.bd-l{ color:var(--ink-2); line-height:1.5 }

/* the way to work together: the one door on the page */
.bd-work{ margin-top:22px }
.bd-work p{ max-width:62ch; color:var(--ink) }
.bd-work h2 + p + h2{ margin-top:1.1em }
.bd-work .hero-cta{ margin:16px 0 0 }
.bd-send{ margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--hairline,rgba(229,231,235,.10)) }
.bd-k{ margin:0 0 .2em !important; color:var(--ink) !important; font-weight:700 }
.bd-acts{ display:flex; flex-wrap:wrap; gap:10px 12px; margin:6px 0 0 !important }
.bd-intro{ margin:14px 0 0 !important; color:var(--ink-2) !important }

/* the record: four links, each a line of its own on a phone */
.bd-record{ margin-top:22px }
.bd-record p{ max-width:62ch }
.bd-links{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 26px }
.bd-links a{ display:inline-flex; align-items:center; min-height:44px; font-weight:700 }

@media (min-width:600px){
  .bd-list{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .bd-list li:nth-child(odd):last-child{ grid-column:1 / -1 }
}
@media (min-width:900px){
  .bd-grid{ grid-template-columns:minmax(230px,290px) minmax(0,1fr); gap:34px; align-items:start; margin-top:30px }
  .bd-fig{ display:block; position:sticky; top:calc(var(--navh,60px) + 22px) }
  .bd-fig img{ width:100%; height:auto; aspect-ratio:4 / 5; object-position:50% 12% }
  .bd-fig figcaption{ margin-top:14px; font-size:.9rem }
  .bd-fig figcaption strong{ font-size:1.1rem }
  .bd-list{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .bd-list li:nth-child(odd):last-child{ grid-column:auto }
  .bd-work{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); column-gap:40px; align-items:start }
  .bd-work > :not(.bd-send){ grid-column:1 }
  .bd-send{ grid-column:2; grid-row:1 / span 6; margin:0; padding:2px 0 0 34px; border-top:0; border-left:1px solid var(--hairline,rgba(229,231,235,.10)) }
}

/* the phone scale (CLAUDE.md "Phone type"): body 17, sub 15, foot 13, caption 12 */
@media (max-width:599.98px), (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .bd-fig figcaption{ font-size:var(--t-foot) }
  .bd-fig figcaption strong{ font-size:var(--t-body) }
  .bd-yr{ font-size:var(--t-cap) }
  .bd-pull p{ font-size:var(--t-body) }
  .bd-pull figcaption{ font-size:var(--t-foot) }
  .bd-terms, .bd-soft{ font-size:var(--t-foot) }
  .bd-close, .bd-intro{ font-size:var(--t-body) }
  .bd-n{ font-size:var(--t-body) }
  .bd-l{ font-size:var(--t-sub) }
  .bd-note{ font-size:var(--t-body) }
  .bd-links a{ font-size:var(--t-body) }
  .bd-steps > li{ padding-left:20px }
  .bd-more{ padding-left:20px }
}