/*
  Download, release notes and version pages.
  Spec: docs/superpowers/specs/2026-10-12-web-download-and-releases-design.md (prototype dl-full.html, layout L2).
  Loaded after landing.css; everything is scoped under .lp .dl and uses the .lp token aliases.
*/
.lp .dl { padding-bottom: 96px; }
.lp .dl h1.page { margin-bottom: 28px; }
.lp .dl .crumb { margin-top: 40px; font-size: 14px; color: var(--text-3); }
.lp .dl .crumb a { color: var(--text-2); }
.lp .dl .crumb + h1.page { margin-top: 10px; }
.lp .dl .date { color: var(--text-3); font-size: 13px; }
.lp .dl details > summary { list-style: none; cursor: pointer; }
.lp .dl details > summary::-webkit-details-marker { display: none; }
.lp .dl .chev { width: 22px; height: 22px; display: grid; place-items: center; transition: transform .2s; flex: none; }
.lp .dl .chev::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: translateY(-2px) rotate(45deg); }
.lp .dl details[open] > summary .chev, .lp .dl .open > .chev { transform: rotate(180deg); }

/* Channel badges */
.lp .dl .ch { display: inline-flex; align-items: center; font: 600 12px/1 var(--body); padding: 5px 9px; border-radius: 999px; border: 1px solid var(--hairline); white-space: nowrap; }
.lp .dl .ch-stable { color: var(--green); border-color: rgba(46,212,122,.35); background: var(--green-soft); }
.lp .dl .ch-beta { color: var(--orange); border-color: rgba(242,118,46,.35); background: var(--orange-soft); }
.lp .dl .ch-preview { color: #8FB4FF; border-color: rgba(110,160,255,.35); background: rgba(110,160,255,.12); }

/* Release notes */
.lp .dl .rb { padding-top: 14px; }
.lp .dl .rb + .rb { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--hairline); }
.lp .dl .rb-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.lp .dl .rb-h b { font-size: 15px; }
.lp .dl .rb-h span { color: var(--text-3); font-size: 13px; }
.lp .dl .rg { margin-top: 10px; }
.lp .dl .rg h5 { margin: 0 0 4px; font: 600 13px/1.4 var(--body); letter-spacing: .04em; color: var(--text); }
.lp .dl .rg ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.lp .dl .rg li { margin: 4px 0; }
.lp .dl .rg li::marker { color: var(--text-3); }

/* ---- /download ---- */
.lp .dl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.lp .dl-aside { display: grid; gap: 14px; position: sticky; top: 80px; }
.lp .relc { border-radius: 18px; border: 1px solid var(--hairline); background: var(--raised); overflow: hidden; }
.lp .relc + .relc { margin-top: 14px; }
.lp .relc .strip { height: 4px; }
.lp .relc.s .strip { background: linear-gradient(90deg, var(--green), rgba(46,212,122,.15)); }
.lp .relc.b .strip { background: linear-gradient(90deg, var(--orange), rgba(242,118,46,.15)); }
.lp .relc .main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 26px; }
.lp .relc .lab { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lp .relc.s .lab { color: var(--green); }
.lp .relc.b .lab { color: var(--orange); }
.lp .relc .vn { display: block; margin-top: 6px; font: 800 42px/1 var(--display); letter-spacing: .01em; }
.lp .relc.b .vn { font-size: 34px; }
.lp .relc .vn small { font: 600 15px/1 var(--body); color: var(--text-3); margin-left: 6px; letter-spacing: 0; }
.lp .relc .main .date { display: block; margin-top: 6px; }
.lp .relc .btn { min-width: 150px; }
.lp .relc .btn i { font-size: 16px; }
.lp .peek { position: relative; padding: 4px 26px 0; max-height: 150px; overflow: hidden; background: rgba(0,0,0,.18); border-top: 1px solid var(--hairline); }
.lp .peek::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(rgba(16,18,24,0), #101218); pointer-events: none; }
.lp .peek.open { max-height: 640px; overflow: auto; padding-bottom: 18px; }
.lp .peek.open::after { display: none; }
.lp .peekbtn { display: flex; width: 100%; justify-content: center; align-items: center; gap: 6px; padding: 12px; background: rgba(0,0,0,.18); border: 0; border-top: 1px solid var(--hairline); color: var(--text-2); font: 500 14px var(--body); cursor: pointer; }
.lp .peekbtn:hover { color: var(--text); }
.lp .peekbtn .when-open { display: none; }
.lp .peekbtn.open .when-open { display: inline; }
.lp .peekbtn.open .when-closed { display: none; }

.lp .dl .ic { padding: 22px 24px; border-radius: var(--r-lg); border: 1px solid var(--hairline); background: var(--raised); color: var(--text-2); font-size: 14px; }
.lp .dl .ic h3 { font: 600 16px/1.3 var(--body); color: var(--text); margin: 0 0 14px; }
.lp .dl .info { display: grid; gap: 14px; margin-top: 28px; }
.lp .steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.lp .steps li { counter-increment: st; display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 11px 0; line-height: 1.45; }
.lp .steps li + li { border-top: 1px solid var(--hairline); }
.lp .steps li::before { content: counter(st); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); font: 700 14px/1 var(--body); }
.lp .steps b { display: block; color: var(--text); font-weight: 600; font-size: 15px; }
.lp .steps span { color: var(--text-3); font-size: 13px; }
.lp .steps code { font: 500 12.5px/1 ui-monospace, Consolas, monospace; color: var(--text); background: var(--overlay); border: 1px solid var(--hairline); padding: 3px 6px; border-radius: 5px; }
.lp .reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.lp .reqs li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; line-height: 1.45; }
.lp .reqs li::before { content: ''; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.5L12 5.3' fill='none' stroke='%232ED47A' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; }
.lp .hhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.lp .hhead h3 { margin: 0 !important; }
.lp .hhead a { font-size: 14px; font-weight: 500; }
.lp .vh a { display: grid; grid-template-columns: 110px 90px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--hairline); color: var(--text-2); }
.lp .vh a:first-child { border-top: 0; }
.lp .vh a b { color: var(--text); font-weight: 600; }
.lp .vh a .ch { justify-self: start; }
.lp .vh a .f { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); }
.lp .vh a:hover b { color: var(--orange); }
.lp .qa { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.lp .qa details { border-top: 1px solid var(--hairline); }
.lp .qa summary { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; color: var(--text); font-weight: 500; }
.lp .qa .a { padding: 0 0 12px; }
.lp .dl .help { text-align: center; margin-top: 36px; color: var(--text-3); font-size: 14px; }

/* ---- /releases ---- */
.lp .dl-narrow .line { max-width: 860px; }
.lp .line { background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--r-lg); }
.lp .line + .line { margin-top: 10px; }
.lp .line > summary { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto 22px; gap: 16px; align-items: center; padding: 18px 22px; }
.lp .line > summary .ln { font: 800 32px/1 var(--display); letter-spacing: .01em; color: var(--text); }
.lp .line > summary .what { color: var(--text-3); font-size: 13px; }
.lp .line > summary .what b { color: var(--text); font-weight: 600; display: block; font-size: 15px; margin-bottom: 2px; }
.lp .line[open] { border-color: rgba(242,118,46,.4); }
.lp .line .builds { padding: 0 22px 16px; }
.lp .bld { border-top: 1px solid var(--hairline); }
.lp .bld > summary { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 14px; color: var(--text); }
.lp .bld > summary b { min-width: 150px; }
.lp .bld > summary .date { margin-left: auto; }
.lp .bld .nb { padding: 0 0 14px; }
.lp .line .pagelink { margin: 14px 0 0; font-size: 14px; font-weight: 500; }

/* ---- /releases/{version} ---- */
.lp .vp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--hairline); }
.lp .vp-head h1.page { margin: 10px 0 0; }
.lp .vp-head .meta { color: var(--text-3); font-size: 14px; margin-top: 10px; display: flex; gap: 10px; align-items: center; }
.lp .vp-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; padding-top: 22px; }
.lp .vp-body .rb-h b { font-size: 17px; }
.lp .vp-body .rg h5 { font-size: 14px; }
.lp .vp-body .rg ul { font-size: 15px; }
.lp .side { position: sticky; top: 80px; align-self: start; display: grid; gap: 12px; }
.lp .side .c { padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--hairline); background: var(--raised); font-size: 14px; color: var(--text-2); }
.lp .side .c b { display: block; color: var(--text); margin-bottom: 8px; }
.lp .side .c a, .lp .side .c div.r { display: flex; justify-content: space-between; padding: 4px 0; }
.lp .side .c span { color: var(--text-3); }
.lp .nav2 { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 14px; font-weight: 500; }

@media (max-width: 1000px) {
  .lp .dl-grid { grid-template-columns: 1fr; }
  .lp .dl-aside { position: static; grid-template-columns: 1fr 1fr; margin-top: 14px; }
}
@media (max-width: 760px) {
  .lp .dl-aside, .lp .qa, .lp .vp-body { grid-template-columns: 1fr; }
  .lp .relc .main { grid-template-columns: 1fr; }
  .lp .side { position: static; }
  .lp .vh a { grid-template-columns: 90px auto minmax(0, 1fr); }
  .lp .vh a .date { display: none; }
  .lp .line > summary { grid-template-columns: 70px minmax(0, 1fr) 22px; }
  .lp .line > summary .ch { display: none; }
}