/* updates.css — the Updates page: the release log and the CarPlay sketches.
   The car screens are sketches of Apple's CarPlay templates, not screenshots, so
   they use the system face and a dark ground like a head unit, and say so in the
   caption. Everything is sized in container units, so one design at 720x360
   scales to any column without a transform. */

.upd-head{padding-block:clamp(28px,5vw,64px) 0}
.upd-head > *{max-width:760px}
.upd-head .lede{margin-top:18px}

/* version tag above a release */
.ver{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:15px;color:var(--muted)}
.ver b{font-weight:var(--dw);color:var(--ink)}
.ver .chip{height:34px;font-size:14.5px;padding:0 13px;border-radius:10px}

.rel{padding-block:clamp(56px,8vw,104px) 0}
.rel .part-head{gap:14px}

/* ---- the car sketches ---- */
.cars{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);width:clamp(400px,44vw,540px)}
.carslot{width:100%}
.car{container-type:inline-size;width:100%}
.car .unit-frame{aspect-ratio:2/1;border-radius:3.2cqw;background:#0b0b0d;padding:1.4cqw;
  box-shadow:0 1px 2px rgba(20,18,14,.16),0 24px 60px rgba(38,30,70,.18)}
.car .disp{height:100%;border-radius:2cqw;background:#141417;color:#f4f4f6;overflow:hidden;
  display:grid;grid-template-columns:9cqw minmax(0,1fr);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  letter-spacing:0;text-transform:none;line-height:1.2}
.car .dock{background:#000;display:flex;flex-direction:column;align-items:center;gap:2.2cqw;padding-top:2cqw}
.car .clock{font-size:2.3cqw;font-weight:600}
.car .app{width:5.4cqw;height:5.4cqw;border-radius:1.4cqw;background:#2a2a30;display:grid;place-items:center}
.car .app.ct{background:var(--accent);color:#fff}
.car .app svg{width:62%;height:62%}
.car .app.dim{background:#25252b}
.car .main{min-width:0;display:flex;flex-direction:column}

/* list template */
.car .tabs{display:flex;gap:1cqw;padding:1.8cqw 2.4cqw 1.2cqw;border-bottom:1px solid #2a2a30}
.car .tab{font-size:2.15cqw;font-weight:600;color:#a9a9b2;padding:.7cqw 1.6cqw;border-radius:5cqw}
.car .tab.on{background:#f4f4f6;color:#141417}
.car .list{padding:0 2.4cqw;overflow:hidden}
.car .hd{font-size:1.9cqw;font-weight:700;color:#a9a9b2;padding:1.6cqw 0 .6cqw}
.car .row{display:flex;align-items:center;gap:1.8cqw;padding:.95cqw 0;border-bottom:1px solid #232328}
.car .row .art{width:5.6cqw;height:5.6cqw;border-radius:.6cqw;box-shadow:none}
.car .row .tx{flex:1;min-width:0}
.car .row .t1{font-size:2.3cqw;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.car .row .t2{font-size:1.85cqw;color:#a9a9b2;margin-top:.3cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.car .row .t2 em{font-style:normal;color:#d2c9ec}
.car .chev{width:1.4cqw;height:2.2cqw;color:#6c6c75;flex:none}

/* now playing template */
.car .np{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3.4cqw;align-items:center;
  padding:3.6cqw 4cqw 0;flex:1}
.car .np .art{width:24cqw;height:24cqw;border-radius:1cqw;box-shadow:none}
.car .np .t1{font-size:3cqw;font-weight:600}
.car .np .t2{font-size:2.3cqw;color:#a9a9b2;margin-top:.6cqw}
.car .bar{margin-top:2.6cqw;height:.6cqw;border-radius:1cqw;background:#33333a;position:relative}
.car .bar i{position:absolute;inset:0 auto 0 0;width:38%;border-radius:inherit;background:#f4f4f6}
.car .times{display:flex;justify-content:space-between;font-size:1.7cqw;color:#a9a9b2;margin-top:.8cqw;
  font-variant-numeric:tabular-nums}
.car .ctl{display:flex;justify-content:center;gap:6cqw;margin-top:1.6cqw}
.car .ctl svg{width:4.4cqw;height:4.4cqw}
.car .btns{display:flex;justify-content:center;gap:2.4cqw;padding:2cqw 0 2.4cqw}
.car .btn{min-width:6.4cqw;height:4.8cqw;border-radius:1.2cqw;background:#25252b;display:grid;place-items:center;
  font-size:1.9cqw;font-weight:600;padding:0 1cqw}
.car .btn svg{width:2.9cqw;height:2.9cqw}
.car .btn.on{background:#f4f4f6;color:#141417}

/* a sketch, said plainly */
.car-cap{margin-top:10px;font-size:13.5px;color:var(--muted)}

/* the big-library number */
.stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.stat .num{font-family:var(--display);font-weight:var(--dw);letter-spacing:-.04em;
  font-size:clamp(56px,8vw,104px);line-height:.95;white-space:nowrap;font-variant-numeric:tabular-nums}
.stat .num s{text-decoration:none;color:var(--muted)}
.stat-body{margin-top:18px;max-width:34em}

/* ---- the promises band ---- */
.keeps{margin-top:clamp(72px,10vw,128px)}
.keeps .grid4{margin-top:clamp(28px,4vw,44px)}

/* ---- the release log ---- */
.log{list-style:none;margin-top:clamp(28px,4vw,44px)}
.log > li{display:grid;grid-template-columns:180px minmax(0,1fr);gap:8px clamp(24px,5vw,72px);
  padding-block:28px;border-top:1px solid var(--rule)}
.log > li:last-child{border-bottom:1px solid var(--rule)}
.log .ver{flex-direction:column;align-items:flex-start;gap:2px}
.log .ver b{font-size:19px}
.log h3 + p{margin-top:8px}
.log p{max-width:36em}
.log ul{margin-top:10px;padding-left:1.15em;list-style:disc}
.log ul + p{margin-top:12px}
.log ul li + li{margin-top:.4em}

@media (max-width:900px){
  .cars{width:100%}
}
@media (max-width:640px){
  .log > li{grid-template-columns:minmax(0,1fr)}
  .log .ver{flex-direction:row;gap:4px 12px;align-items:baseline}
}

.tint-band{background:var(--tint);padding-block:clamp(56px,8vw,104px)}
.tint-band .grid4 li{border-color:color-mix(in srgb,var(--ink) 16%,transparent)}
.keeps + .rel{padding-top:clamp(56px,8vw,104px)}

/* sleeve inks and the .art box, as phone.css has them (this page doesn't load phone.css) */
:root{
  --s-bg: color-mix(in srgb, var(--ink)  7%, var(--paper));
  --s-a:  color-mix(in srgb, var(--accent) 18%, var(--paper));
  --s-b:  color-mix(in srgb, var(--accent) 46%, var(--paper));
  --s-c:  color-mix(in srgb, var(--accent) 76%, var(--ink));
  --s-d:  color-mix(in srgb, var(--ink)   88%, var(--accent));
}
.art{flex:0 0 auto;overflow:hidden;position:relative;display:block}
.art svg{display:block;width:100%;height:100%;isolation:isolate}