/* Progressive disclosure for listing spec lists (assets/js/disclose.js).
   Phone: rows drop down. Desktop 900px+: an index of labels, the chosen item slides in beside it.
   Uses the listing pages' own tokens (--paper, --text, --muted, --acid, --line, --line-2, --serif, --sans). */
dl.dsc{--dsc-ease:cubic-bezier(.16,1,.3,1);display:block;margin:clamp(20px,3vw,32px) 0 0}
dl.dsc>div{display:block;padding:0;border-top:1px solid var(--line)}
dl.dsc>div:last-child{border-bottom:1px solid var(--line)}
dl.dsc dt,dl.dsc dd{margin:0}

/* the row */
.dsc-b{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:16px;width:100%;min-height:60px;padding:16px 0;cursor:pointer;color:var(--paper);-webkit-tap-highlight-color:transparent}
.dsc-l{flex:1 1 auto;font:400 clamp(22px,5.6vw,28px)/1.15 var(--serif);letter-spacing:-.005em;text-wrap:balance}
.dsc-s{flex:none;font:400 15px/1.3 var(--sans);color:var(--text);font-variant-numeric:tabular-nums;text-align:end}
.dsc-i{position:relative;flex:none;width:14px;height:14px}
.dsc-i::before,.dsc-i::after{content:"";position:absolute;inset:6.5px 0 auto;height:1px;background:var(--text);transition:transform .45s var(--dsc-ease)}
.dsc-i::after{transform:rotate(90deg)}
.is-open>dt .dsc-i::after{transform:rotate(0)}
.dsc-b:focus-visible{outline:1px solid var(--acid);outline-offset:4px}
@media (hover:hover){.dsc-b:hover .dsc-l{color:var(--acid)}}

/* costs: the figure is the point, so the label steps back */
.dsc-figures .dsc-l{font:500 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dsc-figures .dsc-s{font:400 clamp(20px,5vw,26px)/1.15 var(--serif);color:var(--paper)}
.dsc-figures>.dsc-static{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:16px 30px 16px 0}
.dsc-figures>.dsc-static dt{font:500 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dsc-figures>.dsc-static dd{font:400 clamp(20px,5vw,26px)/1.15 var(--serif);color:var(--paper);text-align:end}

/* the drop-down (phone and tablet) */
dl.dsc>.dsc-it>dd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--dsc-ease)}
dl.dsc>.dsc-it.is-open>dd{grid-template-rows:1fr}
.dsc-in{min-height:0;overflow:hidden}
.dsc-ph{display:none}
.dsc-t{padding:0 0 24px;max-width:62ch;font:400 17px/1.6 var(--sans);color:var(--paper);opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .55s var(--dsc-ease)}
.is-open>dd .dsc-t{opacity:1;transform:none;transition-delay:.08s}
.dsc-t .mf-tag{margin-inline:0 6px;margin-top:10px}
.dsc-t>span[aria-hidden]{display:block;margin-top:6px}

/* desktop: index on the left, the open item beside it */
@media (min-width:900px){
  dl.dsc{display:grid;grid-template-columns:minmax(240px,5fr) minmax(0,7fr);grid-template-rows:repeat(var(--n),auto) 1fr;column-gap:clamp(48px,6vw,104px);align-items:start}
  dl.dsc>div{display:contents}
  dl.dsc>div>dt,dl.dsc>.dsc-static{grid-column:1;border-top:1px solid var(--line)}
  dl.dsc>div:last-child>dt,dl.dsc>.dsc-static:last-child{border-bottom:1px solid var(--line)}
  dl.dsc>.dsc-static{display:flex;padding-inline-end:0}
  .dsc-b{min-height:64px;padding:18px 0;color:var(--muted)}
  .dsc-l{font-size:clamp(22px,1.9vw,28px)}
  .dsc-figures .dsc-l{font-size:12px}
  .dsc-figures .dsc-s{font-size:clamp(20px,1.7vw,24px);color:var(--text)}
  .dsc-i{display:none}
  .dsc-b::before{content:"";flex:none;width:0;height:1px;margin-inline-end:-16px;background:var(--acid);transition:width .5s var(--dsc-ease),margin .5s var(--dsc-ease)}
  .is-open>dt .dsc-b{color:var(--paper)}
  .is-open>dt .dsc-b::before{width:22px;margin-inline-end:0}
  .is-open>dt .dsc-s{color:var(--paper)}

  dl.dsc>.dsc-it>dd{grid-column:2;grid-row:1 / -1;align-self:start;position:sticky;top:calc(var(--navh,56px) + 32px);display:block;padding-inline-start:clamp(28px,3vw,48px);border-inline-start:1px solid var(--line-2);
    visibility:hidden;opacity:0;transform:translateX(32px);clip-path:inset(0 0 0 6%);
    transition:opacity .3s,transform .7s var(--dsc-ease),clip-path .7s var(--dsc-ease),visibility 0s .7s}
  [dir="rtl"] dl.dsc>.dsc-it>dd{transform:translateX(-32px);clip-path:inset(0 6% 0 0)}
  dl.dsc>.dsc-it.is-open>dd{visibility:visible;opacity:1;transform:none;clip-path:inset(0);transition:opacity .45s .08s,transform .7s var(--dsc-ease),clip-path .8s var(--dsc-ease),visibility 0s}
  .dsc-in{overflow:visible}
  .dsc-ph{display:grid;gap:10px;margin:6px 0 clamp(18px,2vw,28px)}
  .dsc-no{font:500 11px/1 var(--sans);letter-spacing:.18em;color:var(--acid);font-variant-numeric:tabular-nums}
  .dsc-pl{font:400 clamp(40px,4.4vw,64px)/1 var(--serif);letter-spacing:-.015em;color:var(--paper);text-wrap:balance}
  .dsc-ps{font:400 clamp(22px,2vw,28px)/1.2 var(--serif);color:var(--text)}
  .dsc-figures .dsc-pl{font:500 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .dsc-figures .dsc-ps{font-size:clamp(40px,4.4vw,64px);line-height:1;color:var(--paper)}
  .dsc-t{max-width:44ch;padding:0;font-size:clamp(18px,1.4vw,21px);opacity:1;transform:none;transition:none}
}

@media (prefers-reduced-motion:reduce){
  dl.dsc *,dl.dsc>.dsc-it>dd{transition:none!important}
}

/* sources fold away under the list */
.mf-srcd{margin-top:20px;border-top:1px solid var(--line)}
.mf-srcd>summary{display:flex;align-items:center;min-height:48px;cursor:pointer;list-style:none;font:500 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.mf-srcd>summary::-webkit-details-marker{display:none}
.mf-srcd>summary::after{content:"+";margin-inline-start:10px;color:var(--muted)}
.mf-srcd[open]>summary::after{content:"\2212"}
.mf-srcd .mf-src{margin-top:0}