/* The download details, the questions and the two small calculators of the home page. */

/* ---- download: the facts of the installer and how to install it ---- */
.dlx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px 40px;margin-top:20px;align-items:start}
.facts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--rule)}
.facts>div{background:var(--paper);padding:14px 16px;min-width:0}
.facts .wide{grid-column:1/-1}
.facts dt{margin:0 0 4px;color:var(--soft);font:600 12.5px var(--sans);letter-spacing:.02em;text-transform:uppercase}
.facts dd{margin:0;color:var(--ink);font:500 16px var(--sans);display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.facts code{font:400 12.5px/1.45 var(--mono);color:var(--ink);word-break:break-all;overflow-wrap:anywhere}
.copy{height:30px;padding:0 12px;border:1px solid var(--rule);border-radius:4px;background:transparent;color:var(--soft);font:600 12.5px var(--sans);cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease}
.copy:hover{color:var(--ink);border-color:var(--ink)}
.copy.done{color:var(--accent-ink);border-color:var(--accent)}
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:12px}
.dlx-l{display:grid;gap:16px;min-width:0}
#requirements{scroll-margin-top:72px}
.steps h3{margin:0 0 6px;font-size:18px}
.steps li{position:relative;padding-left:40px;color:var(--soft);font-size:15px;line-height:1.55;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--f1);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule);font:700 12.5px/26px var(--sans);text-align:center}
.steps code{font:400 13px var(--mono);color:var(--ink);background:var(--wash);padding:1px 6px;border-radius:4px;overflow-wrap:anywhere}

/* ---- questions ---- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;color:var(--ink);font:600 18px/1.35 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:rotate(45deg) translateY(-2px);transition:transform .25s ease,border-color .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px);border-color:var(--accent)}
.faq summary:hover{color:var(--accent-ink)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.faq p{margin:0;padding:0 4px 20px;color:var(--soft);font-size:16px;line-height:1.6;max-width:72ch}
.faq code{font:400 14px var(--mono);color:var(--ink);background:var(--wash);padding:1px 6px;border-radius:4px}

/* ---- two small calculators ---- */
.calcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tool{border:1px solid var(--rule);border-radius:8px;background:var(--paper);padding:clamp(18px,3vw,28px);display:grid;gap:16px;align-content:start}
.tool h3{margin:0;font-size:22px;line-height:28px}
.tool .hint{margin:2px 0 0;color:var(--soft);font-size:14px}
.tool .ins{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tool label{display:grid;gap:5px;font:600 12.5px var(--sans);color:var(--soft)}
.tool input{box-sizing:border-box;width:100%;height:40px;padding:0 12px;border:1px solid var(--rule);border-radius:4px;background:var(--bg);color:var(--ink);font:500 15px var(--sans)}
.tool input:focus{outline:2px solid var(--accent);outline-offset:1px}
.tool .outs{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--rule)}
.tool .outs>div{background:var(--bg);padding:12px 14px;min-width:0}
.tool .outs b{display:block;color:var(--soft);font:600 12px var(--sans);letter-spacing:.02em;text-transform:uppercase;line-height:1.35}
.tool .outs span{display:block;margin-top:4px;color:var(--ink);font:600 24px/1.2 var(--sans);font-variant-numeric:tabular-nums}
.tool .outs .key span{color:var(--accent-ink)}
.tool .warn{margin:0;color:var(--accent-ink);font-size:13.5px}
.tool .note{margin:0;color:var(--soft);font-size:13.5px}

@media (max-width:900px){
  .dlx,.calcs{grid-template-columns:1fr}
}
@media (max-width:480px){
  .facts{grid-template-columns:1fr}
  .tool .ins{gap:10px}
  .tool label{align-content:end}
  .tool .outs span{font-size:21px}
  .faq summary{font-size:17px}
}