/* Johnny Blastoff — the apps pages: /apps/, /apps/<app>/ and the join page. Tokens and shared parts
   come from site.css; this file only adds what those pages draw. */

/* line icons from the sprite at the top of each page; always beside a label */
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand img{height:62px;width:auto;flex:none}

/* ───────── hero: icon, name, the download ───────── */
.app-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px 44px;align-items:center;padding-top:clamp(12px,3vw,40px)}
.app-icon{width:clamp(120px,15vw,184px);height:auto;filter:drop-shadow(0 18px 34px rgba(6,10,30,.45))}
.app-hero .kicker{margin-bottom:12px}
.app-hero h1{font-size:clamp(46px,6vw,84px)}
.app-hero .lede{font-size:21px;line-height:1.5;margin-top:16px;max-width:31em;color:#E4EBF6}

.dl{margin-top:30px;display:grid;gap:12px;justify-items:start}
.btn-dl{gap:12px;min-height:60px;padding:0 30px 0 26px;font-size:19px}
.btn-dl .i{width:22px;height:22px}
.btn-dl[aria-disabled="true"]{background:rgba(243,246,250,.18);color:#C9D4E8;cursor:default;transform:none}
.dl-meta{font:700 15px/1.3 var(--inst);letter-spacing:.06em;text-transform:uppercase;color:var(--glow)}
.dl-req{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:16px;color:#E4EBF6}
.dl-req span{display:inline-flex;align-items:center;gap:7px}
.dl-req .i{width:18px;height:18px;opacity:.85}
.dl-alt{font-size:15px;color:#C9D4E8}
.dl-alt a{color:inherit}

/* ───────── the body: one light sky ───────── */
.s-app{background:linear-gradient(#6FA2D2,#9CC3E2 22%,#CFE1EC 55%,#E6ECE8);padding-top:8px}
.app-grid{display:grid;gap:26px}
.panel{background:var(--paper);border-radius:16px;padding:clamp(22px,3vw,34px);box-shadow:0 14px 36px rgba(12,22,56,.14)}
.panel h2{font-size:clamp(30px,3.4vw,42px);margin-bottom:14px}
.panel h3{font-size:24px;margin:18px 0 8px}
.panel .kicker{color:var(--orange-deep);margin-bottom:10px}
.panel p+p{margin-top:12px}
.panel[hidden]{display:none}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}

/* the honest note while builds are not notarized */
.install{border-left:6px solid var(--orange)}
.install h2{display:flex;align-items:center;gap:12px}
.install h2 .i{width:30px;height:30px;color:var(--orange-deep)}
.steps{counter-reset:s;display:grid;gap:12px;margin-top:16px}
.steps li{counter-increment:s;position:relative;padding-left:46px;font-size:17px;line-height:1.5}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:var(--paper);font:700 17px/1 var(--inst)}
.small{font-size:15px;line-height:1.5;color:var(--ink-soft)}
.install .small{margin-top:16px}
.path{font-weight:700;white-space:nowrap}

/* changelog text, drawn from Markdown by apps.js */
.md{font-size:17px;line-height:1.55}
.md ul{display:grid;gap:8px;margin:10px 0}
.md li{position:relative;padding-left:22px}
.md li::before{content:"";position:absolute;left:2px;top:.68em;width:10px;height:2px;background:var(--orange-deep)}
.md p{margin:10px 0}
.md h4{font:700 20px/1.2 var(--display);margin:16px 0 6px}
.md code{font:500 .9em/1 ui-monospace,"SF Mono",Menlo,monospace;background:rgba(12,22,56,.07);padding:2px 5px;border-radius:5px}
.md a{text-decoration-color:var(--orange);text-underline-offset:3px}

/* screenshots */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:14px}
.shots figure:first-child{grid-column:1/-1}
.shots figure{display:grid;gap:8px}
.shots img{width:100%;height:auto;border-radius:10px;box-shadow:0 10px 26px rgba(12,22,56,.2);background:#fff}
.shots figcaption{font-size:15px;color:var(--ink-soft)}

/* system requirements and privacy */
.facts{display:grid;gap:10px;font-size:17px}
.facts li{display:flex;gap:12px;align-items:flex-start}
.facts .i{margin-top:3px;color:var(--orange-deep)}

/* the versions online */
.versions{display:grid;gap:18px}
.ver{border:1.5px solid rgba(12,22,56,.16);border-radius:14px;padding:20px 22px;background:#fff}
.ver-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.ver-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.ver-name h3{margin:0;font-size:30px}
.tag{font:700 13px/1 var(--inst);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px 5px;border-radius:999px;background:var(--cloud);color:var(--ink-soft)}
.tag-new{background:var(--orange);color:var(--ink)}
.tag-ok{background:#E3F4E6;color:#1B4D2A}
.ver-meta{font-size:15px;color:var(--ink-soft)}
.ver .md{margin-top:12px}
.sum{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(12,22,56,.12);font-size:14px}
.sum b{font:700 13px/1 var(--inst);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.sum code{font:500 13px/1.4 ui-monospace,"SF Mono",Menlo,monospace;overflow-wrap:anywhere;flex:1 1 280px}
.btn-quiet{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(12,22,56,.25);
  background:#fff;color:var(--ink);font:600 15px/1 var(--body);cursor:pointer;text-decoration:none}
.btn-quiet:hover{border-color:var(--ink)}
.btn-quiet .i{width:17px;height:17px}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover{background:var(--cobalt);border-color:var(--cobalt)}
.empty{font-size:18px}

/* ───────── /apps/: one card per app ───────── */
.app-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:22px}
.app-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start}
.app-card img{width:96px;height:96px}
.app-card h2{font-size:34px;margin:0}
.app-card p{margin-top:8px}
.app-card .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* ───────── the join page ───────── */
.join{display:grid;grid-template-columns:minmax(0,640px);justify-content:center}
.join .panel{padding:clamp(24px,4vw,40px)}
.join-who{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.join-who img{width:76px;height:76px;flex:none}
.join h1{font-size:clamp(34px,4.6vw,52px);color:var(--ink)}
.join-sub{font-size:19px;margin-top:10px}
.join-sub b{font-weight:700}
.join-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.join-steps{counter-reset:s;display:grid;gap:22px;margin-top:28px}
.join-steps>li{counter-increment:s;position:relative;padding-left:52px}
.join-steps>li::before{content:counter(s);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--orange);color:var(--ink);font:700 19px/1 var(--inst)}
.join-steps h2{font-size:26px;margin:4px 0 6px}
.join-steps .btn{margin-top:10px;gap:10px}
.join-steps .btn .i{width:20px;height:20px}
.join-msg{margin:18px 0 0;padding:12px 14px;border-radius:10px;font-size:16px;line-height:1.45;background:#FDE8DD;color:#7A2A05}
.join-msg.good{background:#E3F4E6;color:#1B4D2A}
.join-msg[hidden],[data-hide][hidden]{display:none}
.join details{margin-top:22px;font-size:16px}
.join summary{cursor:pointer;font-weight:600}
.join details p{margin-top:8px}
.linkbox{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.linkbox code{flex:1 1 260px;font:500 13px/1.5 ui-monospace,"SF Mono",Menlo,monospace;background:var(--cloud);padding:9px 11px;border-radius:8px;overflow-wrap:anywhere}

@media (max-width:860px){
  .two,.shots{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .app-hero{grid-template-columns:minmax(0,1fr)}
  .app-icon{width:112px}
  .btn-dl{width:100%}
  .app-card{grid-template-columns:64px minmax(0,1fr)}
  .app-card img{width:64px;height:64px}
  .join-steps>li{padding-left:46px}
}
.join .btn[aria-disabled="true"]{opacity:.45;pointer-events:none}