/* Release page only. Tokens, type, buttons, header and footer come from assets/site.css. */
.rel-hero{border-bottom:2px solid var(--line);background:var(--bg-2)}
.rel-hero .wrap{padding-top:40px;padding-bottom:32px;display:grid;gap:24px}
.rel-title{font-size:clamp(2rem,7vw,3.6rem);letter-spacing:-.05em;line-height:.95}
.rel-title .ver{display:inline-block;background:var(--r1);color:var(--r1-ink);padding:.04em .22em .08em;box-shadow:4px 4px 0 var(--r1-deep);margin-right:.18em}
.rel-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 0;padding:0;list-style:none;font-size:13px;color:var(--dim)}
.rel-meta b{color:var(--ink);font-weight:500}
.rel-lead{max-width:62ch;font-size:16px;margin:0}
.rel-lead + .rel-lead{margin-top:10px;color:var(--dim);font-size:14px}
.rel-cta{display:flex;flex-wrap:wrap;gap:12px}
.note{font-size:12.5px;color:var(--dim);border-left:3px solid var(--line-2);padding:2px 0 2px 10px;margin:0;max-width:70ch}
.note.todo-note{border-left-color:var(--warn)}

.rel-body{display:grid;gap:0}
.rel-toc{display:none}
.sec{padding:40px 0 8px;border-bottom:1px dashed var(--line)}
.sec:last-child{border-bottom:0}
.sec > h2{font-size:clamp(1.4rem,4vw,1.9rem);margin:0 0 6px}
.sec > .sub{color:var(--dim);margin:0 0 20px;font-size:14px;max-width:68ch}

/* platform status */
.plat{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plat li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:12px 14px;background:var(--card);border:2px solid var(--line)}
.plat .p-name{font-weight:700;font-size:15px}
.plat .p-role{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:2px}
.plat .p-what{grid-column:1 / -1;margin:0;font-size:13.5px;color:var(--dim)}
.plat li.is-soon{background:transparent;border-style:dashed}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;white-space:nowrap;border:2px solid currentColor}
.chip::before{content:"";width:7px;height:7px;background:currentColor}
.chip-ok{color:var(--ok)}
.chip-new{color:var(--r1-ink);background:var(--r1);border-color:var(--r1)}
.chip-new::before{background:var(--r1-ink)}
.chip-soon{color:var(--dim);border-style:dashed}
.chip-soon::before{background:transparent;border:1.5px solid currentColor;width:7px;height:7px}
.chip-plan{color:var(--accent-text);border-style:dashed}
.chip-plan::before{display:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* highlights */
.hl{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:hl}
.hl li{counter-increment:hl;position:relative;padding:14px 14px 14px 52px;background:var(--card);border:2px solid var(--line)}
.hl li::before{content:counter(hl,decimal-leading-zero);position:absolute;left:12px;top:13px;font-weight:700;color:var(--r1);font-size:15px}
.hl h3{font-size:15px;letter-spacing:-.01em;margin:0 0 4px}
.hl p{margin:0;font-size:13.5px;color:var(--dim)}
.hl .where{display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}

/* changelog */
.cl-rel{margin:0 0 26px}
.cl-rel > summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:12px 0;border-top:2px solid var(--line-2)}
.cl-rel > summary::-webkit-details-marker{display:none}
.cl-rel > summary h3{font-size:18px}
.cl-rel > summary .when{font-size:12.5px;color:var(--dim)}
.cl-rel > summary .tw{margin-left:auto;font-size:12px;color:var(--accent-text)}
.cl-rel > summary .tw::before{content:"+ show"}
.cl-rel[open] > summary .tw::before{content:"- hide"}
.cl-rel > summary:focus-visible{outline-offset:-2px}
.cl-groups{display:grid;gap:18px;padding-top:6px}
.cl-g h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.cl-g h4 a{font-size:11px;letter-spacing:.04em;text-transform:none;font-weight:400}
.cl-g ul{margin:0;padding:0;list-style:none}
.cl-g li{padding:7px 0 7px 18px;border-bottom:1px solid var(--line);font-size:13.5px;position:relative}
.cl-g li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:2px;background:var(--accent)}
.cl-g li:last-child{border-bottom:0}
.sha{font-size:11.5px;color:var(--dim);text-decoration:none;border-bottom:1px dotted var(--line-2);white-space:nowrap}
.sha:hover{color:var(--accent-text)}
.iss{font-size:11.5px;white-space:nowrap}

/* limits and roadmap */
.lim,.road{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lim li{padding:12px 14px;border:2px solid var(--line);border-left:4px solid var(--warn);background:var(--card)}
.lim b,.road b{display:block;font-size:14.5px;margin-bottom:3px}
.lim span,.road span{font-size:13.5px;color:var(--dim)}
.road li{align-items:start;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 14px;border:2px dashed var(--line-2)}
.road li > div{min-width:0}

/* get it */
.get{display:grid;gap:14px}
.get ol{margin:0;padding-left:1.4em;display:grid;gap:6px}
.get-box{padding:18px;background:var(--well);border:2px solid var(--line-2);display:grid;gap:14px}
.get-box code{background:transparent;padding:0}

@media (min-width:760px){
  .rel-hero .wrap{padding-top:48px;padding-bottom:36px}
  .plat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 32px}
  .lim{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1040px){
  .rel-body{grid-template-columns:200px minmax(0,1fr);gap:48px}
  .rel-toc{display:block;position:sticky;top:calc(var(--head-h) + 16px);align-self:start;padding-top:44px}
  .rel-toc p{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 8px}
  .rel-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
  .rel-toc a{display:block;padding:6px 0 6px 12px;margin-left:-2px;border-left:2px solid transparent;color:var(--ink);text-decoration:none;font-size:13px}
  .rel-toc a:hover{border-left-color:var(--accent)}
  .plat{grid-template-columns:repeat(3,minmax(0,1fr))}
  .road{grid-template-columns:repeat(2,minmax(0,1fr))}
}