/* Swiftly Web-Kit · shell.css
   The shared page shell: announcement bar, navbar details, mobile menu panel, skip link, footer legal bar.
   Linked by Werkzeuge/web_shell.py on every page. Only kit tokens. */

.sw-skip{position:absolute;left:-9999px;top:0;z-index:30;padding:var(--sw-space-3) var(--sw-space-4);background:var(--sw-accent);color:var(--sw-ink);font:700 var(--sw-fs-ui)/1 var(--sw-font)}
.sw-skip:focus{left:var(--sw-space-3);top:var(--sw-space-3)}
html,body{margin:0;background:var(--sw-bg)}
body{-webkit-font-smoothing:antialiased}
/* overflow:hidden on .sw-page would break the sticky nav; clip does not make a scroll container */
.sw-page{overflow:clip}

/* announcement bar */
.sw-announce{position:relative;background:var(--sw-surface);border-bottom:1px solid var(--sw-line)}
.sw-announce[hidden]{display:none}
.sw-announce__link{display:flex;justify-content:center;align-items:center;gap:var(--sw-space-3);min-height:40px;padding:8px 52px;font:500 var(--sw-fs-small)/1.35 var(--sw-font);color:var(--sw-text-2);text-decoration:none;text-align:center}
.sw-announce__link b{display:inline-flex;align-items:center;gap:6px;color:var(--sw-text);font-weight:700}
.sw-announce__link b .sw-tri{width:9px;height:10px;color:var(--sw-accent)}
.sw-announce__link u{text-decoration:none;color:var(--sw-accent);font-weight:600;white-space:nowrap}
.sw-announce__link:hover u{text-decoration:underline;text-underline-offset:3px}
.sw-announce__dot{color:var(--sw-text-3)}
.sw-announce__link:focus-visible,.sw-announce__x:focus-visible{outline:2px solid var(--sw-focus);outline-offset:-2px}
.sw-announce__x{position:absolute;right:var(--sw-space-2);top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:var(--sw-radius-btn-sm);background:transparent;color:var(--sw-text-3);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.sw-announce__x:hover{color:var(--sw-text)}
.sw-announce__x .sw-icon{width:16px;height:16px}
@container swp (max-width:600px){
  .sw-announce__link{flex-wrap:wrap;gap:2px var(--sw-space-2);padding:9px 44px 9px var(--sw-pad-mobile)}
  .sw-announce__dot{display:none}
  .sw-announce__text{flex-basis:100%;order:3}
  .sw-announce__link u{order:2}
}

/* navbar */
.sw-nav--sticky{position:sticky;top:0;z-index:20}
.sw-nav__logo-link{grid-column:1;display:block;color:inherit}
.sw-nav__logo-link .sw-nav__logo{width:var(--sw-col)}
.sw-nav__menu{text-decoration:none;color:var(--sw-text);cursor:pointer}
.sw-nav__links a[aria-current="page"],.sw-nav__donate[aria-current="page"]{color:var(--sw-text)}
.sw-nav__links a:focus-visible,.sw-nav__discord:focus-visible,.sw-nav__menu:focus-visible{outline:2px solid var(--sw-focus);outline-offset:2px}
/* nav between 601 and 1000: five links and Donate do not fit on 52px columns */
@container swp (min-width:601px) and (max-width:1000px){
  .sw-nav__logo-link{grid-column:1/3}
  .sw-nav__links{grid-column:3/10;display:flex;justify-content:space-between;padding:0 var(--sw-space-3)}
  .sw-nav__links a{font-size:13px;white-space:nowrap;padding:10px 2px}
  .sw-nav__discord{grid-column:10;padding:10px}
  .sw-nav__discord span{display:none}
  .sw-nav__donate{grid-column:11/13}
  .sw-nav.is-dl .sw-nav__donate{display:none}
  .sw-nav__download{grid-column:11/13}
  .sw-nav.is-dl .sw-nav__discord{grid-column:10}
}
@container swp (min-width:1001px) and (max-width:1200px){
  .sw-nav__links a{font-size:13px;white-space:nowrap}
  .sw-nav__discord span{display:none}
}
/* at 390 Download and Discord collide: Discord moves into the menu while Download shows */
@container swp (max-width:600px){
  .sw-nav.is-dl .sw-nav__discord{display:none}
}

/* mobile menu panel, inside the sticky header */
.sw-menu{position:absolute;left:0;right:0;top:100%;z-index:19;display:flex;flex-direction:column;max-height:calc(100vh - var(--sw-nav-h-mobile));overflow:auto;padding:var(--sw-space-2) var(--sw-pad-mobile) var(--sw-space-5);background:var(--sw-nav-bg);border-top:1px solid var(--sw-line-strong);box-shadow:var(--sw-shadow-pop)}
.sw-menu[hidden]{display:none}
.sw-menu a{padding:var(--sw-space-4) 0;border-top:1px solid var(--sw-line);font:700 var(--sw-fs-ui-lg)/1 var(--sw-font);color:var(--sw-text-2);text-decoration:none}
.sw-menu a:first-child{border-top:0}
.sw-menu a[aria-current="page"]{color:var(--sw-text)}
.sw-menu a:focus-visible{outline:2px solid var(--sw-focus);outline-offset:2px}
@container swp (min-width:601px){.sw-menu{display:none!important}}

/* footer */
.pm-fine{grid-column:1/13;grid-row:4;margin:var(--sw-space-5) 0 0;font:500 var(--sw-fs-small)/1.5 var(--sw-font);color:var(--sw-text-3);max-width:62em}
.pm-fine a{color:inherit;text-decoration:underline}
.sw-footer__legal nav{display:flex;flex-wrap:wrap;gap:var(--sw-space-2) var(--sw-space-5)}
.sw-footer__legal nav a{color:var(--sw-text-3);text-decoration:none}
.sw-footer__legal nav a:hover{color:var(--sw-text)}
@container swp (max-width:600px){
  .sw-footer__legal nav{gap:var(--sw-space-2) var(--sw-space-4)}
  .sw-footer .pm-fine{grid-column:1/5;grid-row:6;max-width:none;font-size:var(--sw-fs-small);overflow-wrap:anywhere}
  .sw-footer__legal,.sw-footer__legal span,.sw-footer__legal nav a{font-size:var(--sw-fs-small);overflow-wrap:anywhere}
  .sw-footer__col a{width:auto;max-width:100%}
  .sw-footer__col,.sw-footer__col--first{min-width:0}
}

/* Music entry in the nav: a small accent dot */
.sw-nav__dot{display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--sw-accent);vertical-align:.18em}
