/* ================= Runtime config UI (js/config.js): announcement bar, BRB / closed screens,
   X / TG buttons in the hub. Linked from every page after its own stylesheets. ================= */

/* ---------- Announcement: a slim one-line bar ---------- */

.sw-announce {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
  background: rgba(4, 8, 7, 0.82);
  border-bottom: 1px solid rgba(47, 224, 122, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #dfe9e3;
  font: 400 13px/1.2 "Oswald", Arial, sans-serif;
  letter-spacing: 0.03em;
}
.sw-announce[hidden] { display: none; }
body > .sw-announce { position: fixed; z-index: 25; }
.hub > .sw-announce { z-index: 3; } /* under the phone panel (4) and the dialogs (5) */
.sw-a-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #2fe07a; box-shadow: 0 0 8px rgba(47, 224, 122, 0.8); }
.sw-a-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-a-link {
  flex: none;
  font-family: "Michroma", Arial, sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: #ffd21a;
  text-decoration: none;
}
.sw-a-link[hidden] { display: none; }
.sw-a-link:hover,
.sw-a-link:focus-visible { text-decoration: underline; }
.sw-a-x {
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  background: none;
  color: #74867d;
  font: 18px/1 Arial, sans-serif;
  cursor: pointer;
}
.sw-a-x:hover,
.sw-a-x:focus-visible { color: #fff; }

/* Hosts make room for it: the hub (inside .hub, hidden with it during play) and the radio page. */
.hub.has-announce .hub-ui { top: calc(32px + env(safe-area-inset-top)); padding-top: 14px; }
body.rr.has-announce .rr-app { margin-top: calc(32px + env(safe-area-inset-top)); height: calc(100dvh - 32px - env(safe-area-inset-top)); }
body.rr.has-announce .rr-back-fixed { top: calc(48px + env(safe-area-inset-top)); }
@media (max-width: 860px) {
  body.rr.has-announce .rr-app { height: auto; min-height: calc(100dvh - 32px - env(safe-area-inset-top)); }
}

/* ---------- BRB (maintenance) and "closed for now" screens ---------- */

html.sw-gated,
html.sw-gated body { overflow: hidden; }

.sw-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(47, 224, 122, 0.1), rgba(0, 0, 0, 0) 60%),
    #030505;
  color: #e9f3ee;
  text-align: center;
  animation: sw-gate-in 0.5s ease-out both;
}
@keyframes sw-gate-in { from { opacity: 0; } }

.sw-gate-box {
  width: min(440px, 100%);
  box-sizing: border-box;
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: linear-gradient(160deg, rgba(14, 22, 24, 0.86), rgba(5, 8, 10, 0.9));
  border-top: 2px solid #2fe07a;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.sw-gate.closed .sw-gate-box { border-top-color: #ffd21a; }
.sw-gate-logo { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.sw-gate-k { font: 9px/1.4 "Michroma", Arial, sans-serif; letter-spacing: 0.3em; color: #2fe07a; }
.sw-gate.closed .sw-gate-k { color: #ffd21a; }
.sw-gate-title {
  margin: 0;
  font: 400 clamp(30px, 9vw, 52px)/1 "Archivo Black", "Arial Black", sans-serif;
  letter-spacing: 0.02em;
  color: #fff;
  overflow-wrap: anywhere;
}
.sw-gate.closed .sw-gate-title { font-size: clamp(22px, 6.5vw, 32px); }
.sw-gate-text { margin: 4px 0 8px; font: 400 16px/1.45 "Oswald", Arial, sans-serif; color: #b9c8c0; overflow-wrap: anywhere; }
.sw-gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 18px;
  border: 0;
  background: #2fe07a;
  color: #04110a;
  font: 10px/1 "Michroma", Arial, sans-serif;
  letter-spacing: 0.2em;
  text-decoration: none;
  cursor: pointer;
}
.sw-gate-btn:hover,
.sw-gate-btn:focus-visible { background: #5ff59a; outline: 2px solid #ffd21a; outline-offset: 2px; }

/* ---------- Hub: X / TG next to BUY (js/hub.js) ---------- */

.hh-act { display: flex; gap: 6px; }
.hh-act .hh-buy-btn { flex: 1; width: auto; }
.hub-btn.hh-soc {
  flex: none;
  min-width: 38px;
  padding: 6px 8px;
  text-decoration: none;
}
.hub-btn.hh-soc[hidden] { display: none; }
@media (max-width: 860px) {
  .hh-act { grid-area: btn; align-self: center; }
  .hub-btn.hh-soc { min-height: 34px; min-width: 34px; }
}
/* $SWEEP panel: X / TELEGRAM only when set, so the row has 2–4 buttons (--n from js/hub.js). */
.tk-links { grid-template-columns: repeat(var(--n, 4), 1fr); }
@media (max-width: 860px) {
  .tk-links { grid-template-columns: repeat(2, 1fr); }
}

/* Closed features (js/config.js feature()): author display rules beat [hidden], so restate it. */
.hub .hm-item[hidden],
.hub .hub-btn[hidden],
.hub .hh-compete[hidden] { display: none; }