/* OBS-01 live model, inside section 03 (Computational Design).

   On the chapter's own two-column grid (subgrid):
     head      eyebrow, title and lede stacked, left-aligned to the section edge
     stage     the model across both columns; status bottom left, graphic shape
               buttons bottom right, Reset top right
     controls  the first group (Solid band) under the metadata column, the rest
               (Fade pattern, Label) side by side under the content column
   Below 900 px everything stacks: head, model, controls (collapsible groups). */

#site .obs-demo{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(12rem, 3fr) minmax(0, 9fr);
  grid-template-columns:subgrid;
  row-gap:clamp(1.75rem, 3vw, 2.75rem);
  margin-top:clamp(3.5rem, 7vw, 7rem);
  color:var(--ink);
}

/* ---- head */
/* heading left-aligned to the section edge, eyebrow above the title */
#site .obs-demo__head{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(1rem, 1.6vw, 1.5rem) }
#site .obs-demo__head .eyebrow{ margin:0 }
#site .obs-demo__title{
  margin:0;
  font-family:var(--sans);
  font-size:clamp(2rem, 3.6vw, 3.6rem);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:600;
}
#site .obs-demo__lede{
  margin:clamp(1rem, 1.6vw, 1.5rem) 0 0;
  max-width:62ch;
  font-size:clamp(1rem, 1.2vw, 1.15rem);
  line-height:1.55;
  color:var(--ink-2);
}

/* ---- model */
#site .obs-demo__stage{ grid-column:1 / -1; min-width:0 }
#site .obs-demo__viewer{
  position:relative; width:100%; aspect-ratio:21 / 9;
  background:var(--paper); overflow:hidden; touch-action:none;
}
/* the model dissolves into the page at the edges instead of being cut off by a frame */
#site .obs-demo__canvas{
  position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%),
                     linear-gradient(to bottom, transparent 0, #000 7%, #000 96%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, #000 3.5%, #000 96.5%, transparent 100%),
             linear-gradient(to bottom, transparent 0, #000 7%, #000 96%, transparent 100%);
  mask-composite:intersect;
}
#site .obs-demo__viewer canvas{ display:block; width:100%; height:100%; cursor:grab }
#site .obs-demo__viewer canvas:active{ cursor:grabbing }

#site .obs-demo__tools{ position:absolute; top:0; right:0 }
#site .obs-demo__bar{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem;
  pointer-events:none;
}
#site .obs-demo__bar > *{ pointer-events:auto }
#site .obs-demo__status{
  margin:0; padding-bottom:.55rem; pointer-events:none;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
}
#site .obs-demo__status[data-tone="busy"]::before{
  content:""; display:inline-block; width:.5rem; height:.5rem; margin-right:.55rem; border-radius:50%;
  background:#ff8c00; vertical-align:.05rem; animation:obs-pulse 1s ease-in-out infinite;
}
#site .obs-demo__status[data-tone="warn"]{ color:var(--ink) }
@keyframes obs-pulse{ 50%{ opacity:.25 } }

#site .obs-demo__dock{ flex:none; width:min(26rem, 55%) }
#site .obs-demo__dock .obs-field{ padding:0 }
#site .obs-demo__dock .obs-seg{ background:var(--paper) }

#site .obs-reset{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.5rem .85rem; border:1px solid var(--ink); background:var(--paper); color:var(--ink);
  cursor:pointer; border-radius:0;
}
#site .obs-reset:hover{ background:var(--ink); color:var(--paper) }
#site .obs-reset:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
#site .obs-reset:disabled{ cursor:not-allowed; background:var(--paper); color:var(--ink-2); border-color:var(--line) }

/* ---- controls */
#site .obs-demo__controls{
  grid-column:1 / -1; display:grid;
  grid-template-columns:minmax(12rem, 3fr) minmax(0, 9fr);
  grid-template-columns:subgrid;
  align-items:start; min-width:0;
}
#site .obs-demo[data-live="off"] .obs-demo__controls,
#site .obs-demo[data-live="off"] .obs-demo__dock{ opacity:.5 }
#site .obs-controls__lead{ grid-column:1; min-width:0 }
#site .obs-controls__rest{
  grid-column:2; min-width:0;
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 2fr); column-gap:clamp(1.5rem, 3vw, 3.5rem);
}
#site .obs-group__body{ min-width:0 }
#site .obs-group[data-section="fade-pattern"] .obs-group__body{
  display:grid; grid-template-rows:repeat(3, auto); grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr);
  column-gap:clamp(1.5rem, 2.4vw, 2.5rem);
}
#site .obs-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

#site .obs-group{ border-top:1px solid var(--line); padding:.2rem 0 .6rem; min-width:0 }
#site .obs-group > summary{
  list-style:none; cursor:default;
  display:flex; justify-content:space-between; align-items:center;
  padding:.85rem 0 .6rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
#site .obs-group > summary::-webkit-details-marker{ display:none }

#site .obs-field{ padding:.45rem 0 }
#site .obs-field--number{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; align-content:end; column-gap:1rem; row-gap:.35rem;
}
#site .obs-field label, #site .obs-field legend{ font-size:.92rem; line-height:1.3; color:var(--ink) }
#site .obs-field output{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; color:var(--ink-2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
#site .obs-field input[type=range]{
  grid-column:1 / -1; width:100%; margin:0; height:1.4rem; background:transparent;
  -webkit-appearance:none; appearance:none; cursor:pointer;
}
#site .obs-field input[type=range]::-webkit-slider-runnable-track{
  height:2px; border-radius:1px;
  background:linear-gradient(to right, var(--ink) 0 var(--fill, 50%), rgba(35,31,32,.2) var(--fill, 50%) 100%);
}
#site .obs-field input[type=range]::-moz-range-track{ height:2px; background:rgba(35,31,32,.2) }
#site .obs-field input[type=range]::-moz-range-progress{ height:2px; background:var(--ink) }
#site .obs-field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; margin-top:-6px;
  border-radius:50%; background:var(--paper); border:1.5px solid var(--ink);
}
#site .obs-field input[type=range]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; background:var(--paper); border:1.5px solid var(--ink);
}
#site .obs-field input[type=range]:focus-visible{ outline:none }
#site .obs-field input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink) }
#site .obs-field input[type=range]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink) }
#site .obs-field input:disabled{ cursor:not-allowed }

#site .obs-field fieldset{ border:0; padding:0; margin:0; min-width:0 }
#site .obs-field legend{ padding:0; margin-bottom:.5rem }
#site .obs-seg{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); border:1px solid var(--ink); width:100% }
#site .obs-seg label{ position:relative; font-size:inherit }
#site .obs-seg input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer }
#site .obs-seg span{
  display:block; padding:.5rem .25rem; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.05em; text-transform:uppercase;
}
#site .obs-seg label + label span{ border-left:1px solid var(--ink) }
#site .obs-seg input:checked + span{ background:var(--ink); color:var(--paper) }
#site .obs-seg input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:2px }

#site .obs-switch{ display:flex; align-items:center; gap:.7rem; cursor:pointer; position:relative }
#site .obs-switch input{ position:absolute; opacity:0; width:1px; height:1px }
#site .obs-switch__track{
  width:2.1rem; height:1.15rem; border:1.5px solid var(--ink); border-radius:1rem; position:relative; flex:none;
}
#site .obs-switch__track::after{
  content:""; position:absolute; top:2px; left:2px; width:.72rem; height:.72rem; border-radius:50%;
  background:var(--ink); transition:transform .15s ease;
}
#site .obs-switch input:checked + .obs-switch__track{ background:var(--ink) }
#site .obs-switch input:checked + .obs-switch__track::after{ background:var(--paper); transform:translateX(.9rem) }
#site .obs-switch input:focus-visible + .obs-switch__track{ outline:2px solid var(--ink); outline-offset:2px }

@media (max-width:1180px) and (min-width:901px){
  #site .obs-controls__rest{ grid-template-columns:minmax(0, 1fr) }
  #site .obs-group[data-section="label"] .obs-group__body{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:clamp(1.5rem, 3vw, 3.5rem);
  }
}

@media (max-width:900px){
  #site .obs-demo{ grid-template-columns:1fr; margin-top:3rem; row-gap:1.5rem }
  #site .obs-demo__stage, #site .obs-demo__controls{ grid-column:1 }
  #site .obs-demo__viewer{ aspect-ratio:auto; display:flex; flex-direction:column; overflow:visible }
  #site .obs-demo__canvas{ position:relative; inset:auto; aspect-ratio:4 / 3; width:100% }
  #site .obs-demo__bar{ position:static; flex-direction:column; align-items:stretch; gap:.75rem; margin-top:.5rem }
  #site .obs-demo__status{ padding:0 }
  #site .obs-demo__dock{ width:100% }
  #site .obs-demo__tools{ position:static; order:3; align-self:flex-end; margin-top:.75rem }
  #site .obs-demo__controls{ display:block }
  #site .obs-controls__rest{ display:block }
  #site .obs-group[data-section="fade-pattern"] .obs-group__body{ display:block }
  #site .obs-group > summary{ cursor:pointer }
  #site .obs-group > summary::after{ content:"+"; font-size:.9rem; letter-spacing:0; color:var(--ink-2) }
  #site .obs-group[open] > summary::after{ content:"–" }
}

@media (prefers-reduced-motion:reduce){
  #site .obs-demo__status[data-tone="busy"]::before{ animation:none }
  #site .obs-switch__track::after{ transition:none }
}

/* ---- Split demos (HARDPOINT Scaffold, section 05; WHEEL-PY wheel, section 03): the model
   and its inputs side by side (.obs-demo--split).

   Desktop (901 px and up): the inputs are a scrollable panel on the left, one
   column wide, and the model fills the rest on the right. The pair is one screen
   tall under the nav, so a value can be changed with the model in view; only the
   panel scrolls.
   Phone and tablet (900 px and below): the model sticks to the top of the screen
   under the nav, and the inputs scroll underneath it in collapsible groups (only
   Row 1 open to start). */
#site .obs-demo--split{
  --scf-top:4.25rem;                                   /* the nav bar */
  --scf-panel:clamp(18rem, 24vw, 22rem);
  --scf-h:clamp(32rem, calc(100svh - var(--scf-top) - 2rem), 60rem);
  grid-template-columns:var(--scf-panel) minmax(0, 1fr);
  column-gap:clamp(1.25rem, 2.2vw, 2.5rem);
}
#site .obs-demo--split .obs-demo__head{ grid-column:1 / -1 }
#site .obs-demo--split .obs-demo__controls{
  grid-column:1; grid-row:2; height:var(--scf-h); min-height:0;
  display:block; overflow-y:auto; overscroll-behavior:contain;
  padding-right:.9rem; margin-right:-.9rem;             /* room for the scrollbar */
  scrollbar-width:thin; scrollbar-color:rgba(35,31,32,.35) transparent;
  border-top:1px solid var(--line);
}
#site .obs-demo--split .obs-demo__controls::-webkit-scrollbar{ width:6px }
#site .obs-demo--split .obs-demo__controls::-webkit-scrollbar-thumb{ background:rgba(35,31,32,.3); border-radius:3px }
#site .obs-demo--split .obs-demo__stage{ grid-column:2; grid-row:2; height:var(--scf-h); min-width:0 }
#site .obs-demo--split .obs-demo__viewer{ aspect-ratio:auto; height:100% }
#site .obs-demo--split .obs-demo__dock{ display:none }

/* the panel is one column: row cards one under the other, then the vehicle groups */
#site .scf-controls__rows, #site .scf-controls__vehicle{ display:block }
#site .obs-demo--split .obs-group:first-child{ border-top:0 }
#site .scf-row .obs-group__body{ display:block }
#site .scf-sub{
  margin:.8rem 0 .15rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
}
#site .scf-row > summary{ position:sticky; top:0; z-index:1; background:var(--paper) }
#site .obs-field--derived{ display:grid; grid-template-columns:1fr auto; align-items:baseline; column-gap:1rem; padding:.45rem 0 }
#site .scf-derived__label{ font-size:.92rem; line-height:1.3; color:var(--ink-2) }
#site .obs-field--derived output{ color:var(--ink-2) }
#site .obs-field.is-derived{ opacity:.45 }
#site .obs-demo--split .obs-seg span{ letter-spacing:.02em; padding-left:.15rem; padding-right:.15rem }

@media (max-width:900px){
  #site .obs-demo--split{ grid-template-columns:1fr; --scf-top:4.25rem }
  #site .obs-demo--split .obs-demo__head{ grid-column:1 }
  #site .obs-demo--split .obs-demo__stage{
    grid-column:1; grid-row:2; height:auto;
    position:sticky; top:var(--scf-top); z-index:5;
    background:var(--paper); border-bottom:1px solid var(--line);
  }
  #site .obs-demo--split .obs-demo__viewer{ height:clamp(15rem, 44svh, 26rem); display:block; overflow:hidden }
  #site .obs-demo--split .obs-demo__canvas{ position:absolute; inset:0; aspect-ratio:auto }
  #site .obs-demo--split .obs-demo__bar{ position:absolute; left:0; right:0; bottom:0; flex-direction:row; margin:0 }
  #site .obs-demo--split .obs-demo__status{ padding:0 0 .45rem }
  #site .obs-demo--split .obs-demo__tools{ position:absolute; top:.5rem; right:0; margin:0 }
  #site .obs-demo--split .obs-demo__controls{
    grid-column:1; grid-row:3; height:auto; overflow:visible; padding-right:0; margin-right:0; border-top:0;
  }
  #site .scf-row > summary{ position:static }
}

/* ---- OBS-01 as a split demo like the wheel, with its panel on the right of the model
   (Mark, 27 Sep 2026). Every input is in the panel, the graphic shape buttons included. */
@media (min-width:901px){
  #site .obs-demo--panel-right{ grid-template-columns:minmax(0, 1fr) var(--scf-panel) }
  #site .obs-demo--panel-right .obs-demo__stage{ grid-column:1 }
  #site .obs-demo--panel-right .obs-demo__controls{ grid-column:2 }
}
#site .obs-demo--split .obs-group[data-section="fade-pattern"] .obs-group__body{ display:block }
#site .obs-demo--split .obs-controls__rest .obs-group:first-child{ border-top:1px solid var(--line) }

/* ---- HARDPOINT Scaffold on desktop (Mark, 27 Sep 2026): the model runs the full width with
   the inputs below it. The model sticks under the nav while the inputs scroll beneath it, so a
   value can always be changed with the model in view. The groups flow in balanced columns, so
   most of them fit in the space left under the model. Phones keep their own sticky layout. */
@media (min-width:901px){
  #site #scaffold-demo{ grid-template-columns:minmax(0, 1fr); --scf-stage-h:clamp(22rem, calc(100svh - var(--scf-top) - 19rem), 42rem) }
  #site #scaffold-demo .obs-demo__stage{
    grid-column:1; grid-row:2; height:var(--scf-stage-h);
    position:sticky; top:var(--scf-top); z-index:5;
    background:var(--paper); border-bottom:1px solid var(--line);
  }
  #site #scaffold-demo .obs-demo__controls{
    grid-column:1; grid-row:3; height:auto; overflow:visible;
    padding-right:0; margin-right:0; border-top:0;
  }
  #site #scaffold-demo .scf-controls__rows,
  #site #scaffold-demo .scf-controls__vehicle{ columns:4 15rem; column-gap:clamp(1.5rem, 2.6vw, 3rem) }
  #site #scaffold-demo .scf-controls__rows{ margin-bottom:1.25rem }
  #site #scaffold-demo .obs-group{ break-inside:avoid; border-top:1px solid var(--line) }
  #site #scaffold-demo .scf-row > summary{ position:static }
}

/* ---- OBS-01 on phones: the same sticky model as the Scaffold demo. The model
   sticks to the top of the screen under the nav and the inputs scroll underneath
   it; the status and the graphic shape buttons sit along the bottom of the model. */
@media (max-width:900px){
  #site #obs-demo .obs-demo__stage{
    position:sticky; top:4.25rem; z-index:5;
    background:var(--paper); border-bottom:1px solid var(--line);
  }
  #site #obs-demo .obs-demo__viewer{ height:clamp(16rem, 46svh, 27rem); aspect-ratio:auto; display:block; overflow:hidden }
  #site #obs-demo .obs-demo__canvas{ position:absolute; inset:0; aspect-ratio:auto }
  #site #obs-demo .obs-demo__bar{
    position:absolute; left:0; right:0; bottom:0; margin:0;
    flex-direction:column; align-items:stretch; gap:.35rem; padding-bottom:.5rem;
  }
  #site #obs-demo .obs-demo__status{ padding:0 }
  #site #obs-demo .obs-demo__dock{ width:100% }
  #site #obs-demo .obs-demo__tools{ position:absolute; top:.5rem; right:0; margin:0 }
}

/* ---- WHEEL-PY wheel and tyre (section 03, under OBS-01): a split demo like the Scaffold.
   Its groups run one under the other in the panel, long option lists are a select, and the
   model is the P-62 / Santana wireframe (black lines on the paper). */
#site .obs-demo--split .obs-controls__rest{ display:block }
#site .wheel-demo{ --wheel-line:#161616 }
#site .obs-field--select{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:1rem }
#site .obs-field--select select{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink);
  padding:.5rem 2rem .5rem .7rem; border:1px solid var(--ink); border-radius:0; background-color:transparent;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 1rem) 55%, calc(100% - .7rem) 55%; background-size:.3rem .3rem; background-repeat:no-repeat;
}
#site .obs-field--select select:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
#site .obs-field--select select:disabled{ cursor:not-allowed; opacity:.6 }

/* ---- WHEEL-PY "Export": a way in to a conversation, not a download. The button sits in the
   viewer's bottom-right corner; the dialog carries the pitch and the route to the contact form. */
#site .wheel-export{ background:var(--ink); color:var(--paper); margin-bottom:.35rem; flex:none }
#site .wheel-export:hover{ background:var(--paper); color:var(--ink) }
#site .wheel-modal{
  width:min(40rem, calc(100vw - 2rem)); max-height:calc(100svh - 2rem); overflow:auto;
  padding:clamp(1.75rem, 4vw, 3rem); border:1px solid var(--ink); border-radius:0;
  background:var(--paper); color:var(--ink);
}
#site .wheel-modal::backdrop{ background:rgba(35,31,32,.55) }
#site .wheel-modal .eyebrow{ margin:0 0 1.1rem }
#site .wheel-modal__title{
  margin:0 0 1.25rem; font-family:var(--sans); font-weight:600;
  font-size:clamp(1.5rem, 2.6vw, 2.2rem); line-height:1.05; letter-spacing:-.03em; max-width:22ch;
}
#site .wheel-modal p{ font-size:1rem; line-height:1.6; color:var(--ink-2); margin:0 0 .9rem; max-width:60ch }
#site .wheel-modal .wheel-modal__lede{ color:var(--ink); font-size:1.08rem }
#site .wheel-modal__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin:1.75rem 0 1.25rem }
#site .wheel-modal__cta{ background:var(--ink); color:var(--paper); border:1px solid var(--ink) }
#site .wheel-modal__cta:hover{ background:var(--paper); color:var(--ink) }
#site .wheel-modal__later{
  background:none; border:0; padding:.25rem 0; cursor:pointer; color:var(--ink);
  font:inherit; font-size:.95rem; text-decoration:underline; text-underline-offset:.25em;
}
#site .wheel-modal .wheel-modal__note{ font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 }
#site .wheel-modal__close-form{ position:absolute; top:.6rem; right:.6rem; margin:0 }
#site .wheel-modal__close{
  width:2.5rem; height:2.5rem; border:0; background:none; cursor:pointer; color:var(--ink);
  font-size:1.6rem; line-height:1;
}
#site .wheel-modal__close:focus-visible, #site .wheel-modal__later:focus-visible, #site .wheel-modal__cta:focus-visible,
#site .wheel-export:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
@media (max-width:900px){
  #site .obs-demo--split .wheel-export{ margin-bottom:.5rem }
}

/* the tyre size on one line: three selects, 235 / 65 R 17 */
#site .obs-field--size{ display:grid; gap:.5rem }
#site .obs-field--size .obs-field__label{ font-size:.92rem; line-height:1.3; color:var(--ink) }
#site .wheel-size{ display:flex; align-items:center; gap:.4rem }
#site .wheel-size select{
  flex:1 1 0; min-width:0;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; color:var(--ink);
  padding:.55rem 1.6rem .55rem .6rem; border:1px solid var(--ink); border-radius:0; background-color:transparent;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - .85rem) 55%, calc(100% - .55rem) 55%; background-size:.3rem .3rem; background-repeat:no-repeat;
}
#site .wheel-size select:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
#site .wheel-size select:disabled{ cursor:not-allowed; opacity:.6 }
#site .wheel-size__sep{ font-family:var(--mono); font-size:.9rem; color:var(--ink-2); flex:none }