/* Support page. Shared parts: ../download/side.css */
.sup-urg{padding-top:clamp(4px,1vh,12px)}
/* the taskbar emergency: dark ceramic, first on the page, keys as keycaps */
.urg{max-width:52rem;padding:clamp(22px,3vw,34px) clamp(22px,3vw,36px);border-radius:var(--r-panel);background:var(--cer);
  box-shadow:var(--cer-rim),0 2px 4px rgb(var(--shade-rgb) / .3),0 26px 60px -30px rgb(var(--shade-rgb) / .7)}
.urg__k{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:12px;letter-spacing:.06em;color:var(--ink-3)}
.urg__h{margin:0 0 20px;font:640 clamp(26px,2.4vw,34px)/1.05 var(--f-sans);font-stretch:88%;letter-spacing:-.02em;color:var(--ink)}
.urg__s{display:grid;gap:14px;margin:0 0 20px;padding:0;list-style:none;counter-reset:u}
.urg__s li{position:relative;counter-increment:u;padding-left:38px;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.urg__s li::before{content:counter(u);position:absolute;left:0;top:3px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--fire);color:var(--ground);font:600 12px/1 var(--f-mono)}
.urg__s strong{font-weight:620;color:var(--ink)}
.urg__w{color:var(--ink)}
.urg kbd{font-size:13px}
.urg__src{margin:0 0 6px;font-size:14.5px;line-height:1.55;color:var(--ink-3)}

/* where to ask: three cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px);margin:0;padding:0;list-style:none}
.card{display:flex;flex-direction:column;align-items:flex-start;padding:24px 24px 18px;border-radius:var(--r-row);background:var(--ground-2)}
.card__h{margin:0 0 10px;font:640 24px/1.1 var(--f-sans);font-stretch:88%;letter-spacing:-.01em;color:var(--cream)}
.card__d{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.card__l{display:flex;flex-direction:column;margin:auto 0 0;padding:0;list-style:none}
.card__l .gh{gap:9px}
.card__a{margin:auto 0 6px}

/* the bug report: checklist | template */
.bug{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:clamp(28px,4vw,64px);align-items:start}
.bug .steps li{font-size:16px}
.bug__tpl .label{margin:0 0 12px}

/* questions, open (five, no accordions) */
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vh,40px) clamp(28px,4vw,64px);max-width:68rem}
.qa__q{margin:0 0 8px;font:600 18px/1.3 var(--f-sans);color:var(--ink)}
.qa__a{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.qa__a strong{font-weight:620;color:var(--ink)}
.qa__a a{color:var(--ink);text-decoration:underline;text-decoration-color:rgb(var(--ink-rgb) / .3);text-underline-offset:3px;transition:color 160ms var(--e),text-decoration-color 160ms var(--e)}
@media (hover:hover){.qa__a a:hover{color:var(--fire-ink);text-decoration-color:currentColor}}

/* the old Atlas app: one line */
.old__h{margin:0 0 8px;font:640 24px/1.1 var(--f-sans);font-stretch:88%;letter-spacing:-.01em;color:var(--ink)}
.old .sp-p{margin-bottom:6px}

@media (max-width:980px){
  .cards{grid-template-columns:minmax(0,1fr)}
  .bug{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .qa{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .urg__s li{padding-left:34px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){.qa__a a{transition:none}}

/* where to ask: GitHub tall on the left, Discord and Email stacked beside it */
@media (min-width:981px){
  .cards{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto}
  .cards .card:first-child{grid-row:1/3}
  .card__a{margin-top:0}
}

/* ── Mantle's kill switch (the hero's right side, in the kit's .ph__aside): keys.js presses them,
      and your own keyboard does too. Flat caps: a face over a darker skirt; pressed, the face drops
      onto the skirt and lights a fine contact line, the same idea as the fire's edge. ── */
.ph--aside .ph__aside{--aside-w:30rem}
.ks{margin:0;container-type:inline-size}
.ks__h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 22px}
.ks__u{font-size:12px;color:var(--ink-3);text-decoration:none;transition:color 160ms var(--e)}
@media (hover:hover){.ks__u:hover{color:var(--fire-ink)}}
.ks__keys{--u:calc((100cqi - 3 * 26px) / 6.75);display:flex;align-items:center}
.ks__p{width:26px;flex:none;margin-top:-6px;text-align:center;font:400 15px/1 var(--f-mono);font-style:normal;color:var(--ink-3)}
.kc{position:relative;flex:none;width:calc(var(--u) * 1.25);height:calc(var(--u) * .98);border-radius:10px;background:var(--cer-lo);
  box-shadow:0 2px 6px rgb(var(--shade-rgb) / .4)}
.kc--shift{width:calc(var(--u) * 2.25)}
.kc--bksp{width:calc(var(--u) * 2)}
.kc__f{position:absolute;inset:0 0 6px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;
  padding:9px 11px;border-radius:9px;background:linear-gradient(var(--cer-top),var(--cer-hi));
  box-shadow:inset 0 1px 0 rgb(var(--hi-rgb) / .07),0 0 0 0 rgb(var(--fire-rgb) / 0);
  font:520 13.5px/1.1 var(--f-sans);color:var(--ink-2);
  transition:transform 150ms var(--e),color 150ms var(--e),box-shadow 150ms var(--e),background-color 150ms var(--e)}
.kc__g{font-weight:400;font-size:15px;line-height:1;color:var(--ink-3);transition:color 150ms var(--e)}
.kc.is-down .kc__f{transform:translateY(4px);color:var(--cream);transition-duration:70ms;
  box-shadow:inset 0 1px 0 rgb(var(--hi-rgb) / .05),0 1px 0 0 rgb(var(--fire-rgb) / .95)}
.kc.is-down .kc__g{color:var(--fire-ink)}
.ks__s{display:grid;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.ks__i{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.4;color:var(--ink-2);transition:color 200ms var(--e)}
.ks__n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;
  background:rgb(var(--ink-rgb) / .06);font-size:11.5px;color:var(--ink-3)}
.ks__ok{width:16px;height:16px;flex:none;color:var(--fire-ink);opacity:0;transform:translateX(-4px);transition:opacity 200ms var(--e),transform 200ms var(--e)}
.ks__i.is-done{color:var(--ink)}
.ks__i.is-done .ks__ok{opacity:1;transform:none}
.ks__note{margin:18px 0 0;max-width:34em;font-size:13px;line-height:1.55;color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){.kc__f,.kc__g,.ks__ok,.ks__i{transition:none}}