/* v5-datasheet.css — Programs as component datasheets (sections/programs.liquid).
   Default (no JS, or < 900px): every datasheet is visible, stacked.
   >= 900px: an index (codes + names) sits on the left; with JS (.ds.is-tabs)
   it becomes a tablist and one datasheet shows on the right. Scoped to .ds. */

.ds{--ds-gap:clamp(32px,4vw,72px);position:relative}

/* ---------- Head ---------- */
.ds .ds__head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:20px var(--ds-gap);margin-bottom:clamp(48px,6vw,96px)}
.ds .ds__title{margin:0;max-width:12ch;font-size:clamp(2.6rem,6vw,5.6rem);line-height:.95;letter-spacing:-.045em;font-weight:760;font-variation-settings:"opsz" 96;color:var(--ink);text-wrap:balance}
.ds .ds__intro{margin:0 0 .4em;max-width:34ch;color:var(--ink-2);font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.55;text-wrap:pretty}

/* ---------- Layout ---------- */
.ds .ds__body{display:grid;grid-template-columns:minmax(240px,4fr) minmax(0,8fr);gap:var(--ds-gap);align-items:start}

/* ---------- Index ---------- */
.ds .ds__index{position:sticky;top:104px}
.ds .ds__index-label{display:flex;justify-content:space-between;gap:16px;margin:0 0 14px;font:500 .75rem/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ds .ds__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ds .ds__item{border-bottom:1px solid var(--line)}
.ds .ds__tab{position:relative;display:grid;grid-template-columns:10px 5.4rem minmax(0,1fr) 18px;align-items:center;gap:14px;min-height:64px;padding:16px 14px;color:var(--ink-2);text-decoration:none;border-radius:6px;transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}
.ds .ds__tab:hover{background:var(--bg-hi);color:var(--ink)}
.ds .ds__tab:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.ds .ds__led{width:10px;height:10px;border-radius:50%;border:1px solid var(--line-2);background:transparent;transition:background-color .2s,border-color .2s,box-shadow .2s}
.ds .ds__tab-code{font:500 .78rem/1.2 var(--font-mono);letter-spacing:.06em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ds .ds__tab-name{font-size:1.15rem;line-height:1.2;font-weight:620;letter-spacing:-.015em}
.ds .ds__tab::after{content:"";width:18px;height:1px;background:currentColor;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s var(--ease-out)}
/* Active (tabs mode). Not colour alone: filled LED, raised surface, bolder name, pointer rule. */
.ds .ds__tab[aria-selected="true"]{background:var(--bg-hi);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink)}
.ds .ds__tab[aria-selected="true"] .ds__led{background:var(--orange);border-color:var(--orange);box-shadow:0 0 14px -2px #ff7a0099}
.ds .ds__tab[aria-selected="true"] .ds__tab-code{color:var(--orange)}
.ds .ds__tab[aria-selected="true"] .ds__tab-name{font-weight:720}
.ds .ds__tab[aria-selected="true"]::after{opacity:1;transform:none}

/* ---------- Datasheet ---------- */
.ds .ds__sheet{scroll-margin-top:104px;border-top:1px solid var(--line-2);padding-block:clamp(28px,3vw,40px) clamp(56px,6vw,88px)}
.ds .ds__sheet:last-child{padding-bottom:0}
.ds .ds__sheet-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(18px,2vw,32px);padding-bottom:clamp(22px,2.4vw,32px);margin-bottom:clamp(24px,2.6vw,36px);border-bottom:1px solid var(--line)}
.ds .ds__code{margin:0;font-family:var(--font-mono);font-weight:340;font-stretch:87.5%;font-size:clamp(2.2rem,3.8vw,3.75rem);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.ds .ds__name{margin:0;font-size:clamp(1.5rem,2.2vw,2.15rem);line-height:1.05;letter-spacing:-.035em;font-weight:760;font-variation-settings:"opsz" 96;color:var(--ink)}
.ds .ds__sheet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,3.4vw,56px);align-items:start}
.ds .ds__desc{margin:0 0 28px;max-width:40ch;color:var(--ink-2);font-size:clamp(1.02rem,1.2vw,1.15rem);line-height:1.6;text-wrap:pretty}

/* Spec table */
.ds .ds__specs{margin:0 0 28px;border-top:1px solid var(--line)}
.ds .ds__row{display:grid;grid-template-columns:minmax(7.5rem,10rem) minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.ds .ds__row dt{font:500 .75rem/1.6 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);padding-top:.15em}
.ds .ds__row dd{margin:0;color:var(--ink);font-size:.98rem;line-height:1.5}

/* CTA */
.ds .ds__cta{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 2px;color:var(--orange);font-weight:680;font-size:1rem;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;transition:text-decoration-color .2s,color .2s}
.ds .ds__cta:hover{color:var(--orange-hi);text-decoration-color:currentColor}
.ds .ds__cta .icon{width:18px;height:18px;color:currentColor;transition:transform .25s var(--ease-out)}
.ds .ds__cta:hover .icon{transform:translateX(3px)}

/* Figure */
.ds .ds__fig{margin:0}
.ds .ds__frame{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-sunk)}
.ds .ds__frame .media-frame{border:0;border-radius:0}
.ds .ds__frame .media-placeholder__caption{display:none}
.ds .ds__caption{display:block;margin-top:12px;font:400 .75rem/1.5 var(--font-mono);letter-spacing:.04em;color:var(--ink-3)}
.ds .ds__fig-no{color:var(--ink-2);font-weight:600}

.ds .ds__all{margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}

.ds .ds__visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Tabs mode (JS, >= 900px) ---------- */
.ds.is-tabs .ds__sheet{border-top:0;padding-top:0;padding-bottom:0}
.ds.is-tabs .ds__sheet[hidden]{display:none}
.ds.is-tabs .ds__sheets{min-height:var(--ds-min,0px)}
.ds.is-tabs .ds__sheet:focus-visible{outline:2px solid var(--orange);outline-offset:8px;border-radius:6px}
@media (prefers-reduced-motion:no-preference){
  body:not(.is-motion-paused) .ds.is-tabs .ds__sheet.is-entering{animation:ds-in .32s var(--ease-out) both}
  body:not(.is-motion-paused) .ds.is-tabs .ds__sheet.is-entering .ds__specs .ds__row{animation:ds-row .36s var(--ease-out) both;animation-delay:calc(var(--r,0) * 40ms + 60ms)}
}
@keyframes ds-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ds-row{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ds .ds__tab,.ds .ds__tab::after,.ds .ds__led,.ds .ds__cta .icon{transition:none}}
body.is-motion-paused .ds .ds__tab,body.is-motion-paused .ds .ds__tab::after,body.is-motion-paused .ds .ds__cta .icon{transition:none}

/* ---------- Medium: stack the figure under the copy inside a sheet ---------- */
@media (max-width:1180px){
  .ds .ds__sheet-grid{grid-template-columns:minmax(0,1fr)}
  .ds .ds__fig{max-width:560px}
}

/* ---------- Narrow: no index, datasheets stacked ---------- */
@media (max-width:899px){
  .ds .ds__head{grid-template-columns:minmax(0,1fr);gap:16px}
  .ds .ds__title{font-size:clamp(2.5rem,11vw,3.6rem)}
  .ds .ds__body{display:block}
  .ds .ds__index{display:none}
  .ds .ds__sheet{padding-block:24px 56px}
  .ds .ds__sheet-head{gap:6px 16px;padding-bottom:18px;margin-bottom:22px}
  .ds .ds__code{font-size:clamp(1.9rem,9vw,2.6rem)}
  .ds .ds__name{font-size:clamp(1.4rem,6.4vw,1.8rem)}
  .ds .ds__sheet-grid{gap:24px}
  .ds .ds__fig{order:-1;max-width:none}
  .ds .ds__frame .media-frame{--media-ratio:16/10}
  .ds .ds__row{grid-template-columns:minmax(6.5rem,8.5rem) minmax(0,1fr);gap:12px}
}
@media (max-width:380px){
  .ds .ds__row{grid-template-columns:minmax(0,1fr);gap:2px}
}