/* What Paddock20 built (tools/built.py): seven projects in five rows, each a glass card with its phone screens, its problem, three bullets, a status and a
   link. Loaded on that page only, after garage.css. The phone type scale is garage.css's four sizes (--t-body, --t-sub, --t-foot, --t-cap): a new part
   takes one of them and never a size of its own; the chip keeps the house floor (10px). The phone frame is a carbon bezel: hairline, small radius, no pill. */

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

.bt-row{ margin-top:30px }
.bt-row > header h2{ margin:0 0 .25em }
.bt-row > header p{ margin:0; max-width:62ch; color:var(--ink-2) }
.bt-cards{ list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:16px }
.bt-card{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; padding:clamp(16px,2.6vw,26px) }

.bt-shots{ display:flex; gap:12px; align-items:flex-start }
.bt-phone{ margin:0; flex:0 0 auto; width:150px; max-width:100%; min-width:0; box-sizing:border-box; padding:5px; background:#05070D; border:1px solid rgba(229,231,235,.22); border-radius:12px;
  border-top:2px solid var(--ignition) }
.bt-phone img{ display:block; width:100%; max-width:100%; height:auto; border-radius:7px }

.bt-kind{ margin:0 0 .3em; color:var(--amber); font-size:max(10px,.68rem); font-weight:700; letter-spacing:.18em; text-transform:uppercase }
.bt-text h3{ margin:0 0 .3em; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px }
.bt-line{ margin:0 0 .7em; color:var(--ink); font-weight:700; max-width:52ch }
.bt-points{ margin:0; padding:0 0 0 1.1em; max-width:58ch; color:var(--ink-2); line-height:1.5 }
.bt-points li{ margin:.25em 0 }
.bt-go{ margin:14px 0 0 }
.bt-private{ margin:14px 0 0; color:var(--ink-2) }

/* status: a pit-board tag, colour and words (never colour alone) */
.bt-live{ color:var(--amber); border-color:rgba(246,162,43,.45); background:rgba(246,162,43,.1) }
.bt-demo{ color:var(--sky); border-color:rgba(87,180,230,.4); background:rgba(87,180,230,.1) }
.bt-proto{ color:var(--steel); border-color:rgba(154,160,170,.4); background:rgba(154,160,170,.09) }
.bt-review{ color:var(--ignition); border-color:rgba(244,81,30,.5); background:rgba(244,81,30,.12) }

.bt-ask{ margin-top:30px }
.bt-ask h2{ margin:0 0 .35em }
.bt-ask p{ max-width:62ch; color:var(--ink) }
.bt-ask .hero-cta{ margin:16px 0 0 }

@media (min-width:760px){
  /* The screens column is as wide as its phones and never wider: a fixed phone width (not the image's own 520px) and a cap on the track, so no
     browser can size it from the images and push the text to the far edge. */
  .bt-card{ grid-template-columns:fit-content(364px) minmax(0,1fr); gap:30px; align-items:start }
  .bt-shots{ width:auto; max-width:100% }
  .bt-phone{ width:170px }
}

/* 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){
  .bt-kind{ font-size:var(--t-cap) }
  .bt-row > header p{ font-size:var(--t-body) }
  .bt-line{ font-size:var(--t-body) }
  .bt-points{ font-size:var(--t-sub) }
  .bt-private{ font-size:var(--t-sub) }
  .bt-ask p{ font-size:var(--t-body) }
}