/* Contact button + popup (contact.js). Colours come from the tokens in style.css. Plain, large type on purpose. */

/* the buttons that open it: footer of every page, About on the home page, inline on privacy.html */
.contact-btn{font:inherit;font-weight:900;font-size:1rem;line-height:1.2;color:var(--cyan);background:transparent;border:2px solid var(--cyan);border-radius:999px;padding:10px 22px;cursor:pointer}
.contact-btn:hover{background:var(--cyan);color:var(--bg)}
.contact-link{font:inherit;font-weight:inherit;color:var(--cyan);background:none;border:0;border-radius:0;padding:0;text-decoration:underline;cursor:pointer}
.contact-link:hover{background:none;color:#fff}
.about .contact-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:1.2em}

html.ct-lock,html.ct-lock body{overflow:hidden}   /* the page behind the popup does not scroll */

.ct-dialog{color-scheme:dark;box-sizing:border-box;width:min(640px,calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:62px 0 0;
  border:2px solid var(--cyan);border-radius:18px;background:var(--bg2);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
.ct-dialog[open]{display:flex;flex-direction:column}
.ct-dialog::backdrop{background:rgba(5,7,14,.82)}
/* the close button sits in its own band above the scrolling content (padding-top above), so scrolled text never runs under it */
.ct-in{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 26px 24px}
.ct-close{position:absolute;top:10px;right:10px;z-index:1;width:46px;height:46px;padding:0;border-radius:50%;font-size:1.9rem;font-weight:700;line-height:1;color:var(--ink);background:var(--bg);border:2px solid var(--line)}
.ct-close:hover{background:var(--bg);color:var(--cyan);border-color:var(--cyan)}

.ct-h{font-size:clamp(1.55rem,4.6vw,2.1rem);line-height:1.15;margin:0 0 .45em}
.ct-lead{font-size:clamp(1.1rem,3vw,1.28rem);line-height:1.5;color:var(--ink);margin:0 0 20px}

/* Discord first and biggest, then the socials two by two */
.ct-social{display:grid;gap:10px;margin:0 0 28px}
.ct-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.ct-s{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:54px;padding:10px 14px;border-radius:14px;font-weight:900;font-size:1.05rem;line-height:1.2;text-align:center;text-decoration:none;color:var(--ink);background:#0a0d17;border:2px solid var(--line)}
.ct-s svg{flex:none;width:24px;height:24px}
.ct-s.ct-discord{min-height:66px;font-size:1.3rem}
.ct-s.ct-discord svg{width:32px;height:32px}

/* "Need to reach us? What's it about?": big buttons, one choice; a card or the form takes the list's place */
.ct-biz{border-top:1px solid var(--line);padding-top:20px}
.ct-h3{font-size:1.15rem;font-weight:900;line-height:1.3;margin:0 0 12px}
.ct-choices{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.ct-choice{display:flex;align-items:center;gap:12px;width:100%;min-width:0;min-height:56px;padding:10px 14px;text-align:left;font-size:1rem;line-height:1.25;
  color:var(--ink);background:#0a0d17;border:2px solid var(--line);border-radius:12px;overflow-wrap:anywhere}
.ct-choice::before{content:"";flex:none;box-sizing:border-box;width:20px;height:20px;border-radius:50%;border:2px solid var(--soft)}
.ct-choice:hover{color:#fff;background:#1c2236;border-color:var(--cyan)}
.ct-choice[aria-pressed=true]{border-color:var(--cyan)}
.ct-choice[aria-pressed=true]::before{border-color:var(--cyan);background:radial-gradient(circle,var(--cyan) 0 4px,transparent 5px)}
.ct-chosen{margin:0 0 8px;font-weight:900;font-size:1rem;color:var(--cyan)}
.ct-chosen:focus{outline:none}
.ct-card{padding:16px 18px;border:2px solid var(--line);border-radius:14px;background:#0a0d17}
.ct-card:focus{outline:none;border-color:var(--cyan)}
.ct-card-t{margin:0 0 14px;font-size:1.12rem;line-height:1.5;color:var(--ink)}
.ct-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ct-act{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:10px 20px;border-radius:12px;border:2px solid transparent;font-weight:900;font-size:1.05rem;line-height:1.2;text-decoration:none}
.ct-act svg{flex:none;width:24px;height:24px}
.ct-act-main{color:var(--bg);background:var(--cyan);border-color:var(--cyan)}
.ct-act-main:hover{color:var(--bg);background:#fff;border-color:#fff}
.ct-minis{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
.ct-mini{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 14px;border-radius:999px;border:2px solid transparent;font-weight:900;font-size:.95rem;line-height:1.2}
.ct-mini svg{flex:none;width:20px;height:20px}
.ct-mini.ct-tiktok{box-shadow:-2px -2px 0 #25f4ee,2px 2px 0 #fe2c55}
.ct-back{margin-top:14px;padding:6px 4px;background:none;color:var(--cyan);font-size:.95rem;font-weight:700;text-decoration:underline;border-radius:6px}
.ct-back:hover{background:none;color:#fff}
.ct-nudge{margin:0 0 6px;padding:10px 14px;border-left:4px solid #5865f2;background:#0a0d17;border-radius:0 10px 10px 0;font-weight:700;font-size:.98rem;color:var(--ink)}
.ct-formacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:6px}
.ct-formacts .ct-back{margin-top:0}

/* each network in its own colours (Brian: "makes them more immediate to see"). White text everywhere; every
   background under the text keeps >= 4.5:1 (work/test-site.mjs measures the rendered pixels). Pure YouTube red
   #FF0000 with white text is only 4.0:1, so the button uses a slightly deeper red; Instagram's yellow/orange stays in
   the corner, away from the words. The keyboard focus ring (style.css :focus-visible, cyan, outside the button) stays. */
.ct-discord,.ct-instagram,.ct-tiktok,.ct-x,.ct-youtube{color:#fff;text-decoration:none}
.ct-discord{background:#5865f2;border-color:#5865f2}
.ct-discord:hover{color:#fff;background:#4752c4;border-color:#4752c4}
.ct-instagram{--ig-glow:46px;border-color:transparent;background:radial-gradient(var(--ig-glow) var(--ig-glow) at 0 100%,#feda75 0%,#fa7e1e 40%,rgba(250,126,30,0) 100%),linear-gradient(45deg,#d62976 0%,#962fbf 60%,#4f5bd5 100%)}
.ct-mini.ct-instagram,.social .ct-instagram{--ig-glow:22px}   /* small pills: a smaller corner glow, still clear of the words */
.ct-instagram:hover{color:#fff;border-color:transparent;filter:brightness(.88)}
.ct-tiktok{background:#000;border-color:#000;box-shadow:-3px -3px 0 #25f4ee,3px 3px 0 #fe2c55}
.ct-tiktok svg{filter:drop-shadow(-1.5px -1.5px 0 #25f4ee) drop-shadow(1.5px 1.5px 0 #fe2c55)}
.ct-tiktok:hover{color:#fff;background:#161616;border-color:#161616}
.ct-x{background:#000;border-color:#8b93a7}
.ct-x:hover{color:#fff;background:#000;border-color:#fff}
.ct-youtube{background:#e00000;border-color:#e00000}
.ct-youtube:hover{color:#fff;background:#c00000;border-color:#c00000}
.ct-form{display:grid;gap:6px}
.ct-label{font-size:.95rem;font-weight:700;margin-top:6px}
.ct-hint{font-weight:600;color:var(--soft)}
.ct-field{width:100%;min-width:0;font:inherit;font-size:1rem;font-weight:600;color:var(--ink);background:#0a0d17;border:2px solid var(--line);border-radius:10px;padding:11px 12px}
.ct-field:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px rgba(72,208,255,.3)}
.ct-field[aria-invalid=true]{border-color:var(--bad)}
textarea.ct-field{resize:vertical;min-height:7.5em;line-height:1.45}
.ct-count{margin:0;font-size:.88rem;color:var(--soft);text-align:right}
.ct-count.near{color:#ffc94a}
.ct-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none;white-space:nowrap}
.ct-send{padding:14px 28px}
.ct-msg{min-height:1.5em;margin:4px 0 0;font-weight:700;font-size:.98rem}
.ct-msg.err{color:var(--bad)}
.ct-done{padding:18px 20px;border:2px solid var(--ok);border-radius:14px;background:#0a0d17}
.ct-done:focus{outline:none}
.ct-done p{margin:0 0 .6em;color:var(--soft)}
.ct-done .ct-done-h{font-weight:900;font-size:1.25rem;color:var(--ok)}

/* phones */
@media (max-width:480px){
  .ct-dialog{width:calc(100vw - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);border-radius:16px;padding-top:56px}
  .ct-in{padding:0 16px 18px}
  .ct-close{top:8px;right:8px;width:42px;height:42px}
  .ct-s{font-size:1rem;padding:10px;gap:8px}
  .ct-s.ct-discord{font-size:1.15rem}
  .ct-choices{gap:6px}
  .ct-choice{gap:8px;min-height:52px;padding:8px 9px;font-size:.92rem;line-height:1.22;border-radius:10px}
  .ct-choice::before{width:15px;height:15px}
  .ct-choice[aria-pressed=true]::before{background:radial-gradient(circle,var(--cyan) 0 3px,transparent 4px)}
  .ct-act{padding:10px 16px}
  .ct-card{padding:14px}
  .ct-card-t{font-size:1.05rem}
}
@media (max-width:359px){ .ct-grid{grid-template-columns:1fr} .ct-s.ct-discord{font-size:1.05rem} .ct-s.ct-discord svg{width:26px;height:26px}
  .ct-choice{padding:8px 10px} .ct-choice::before{display:none} .ct-choice[aria-pressed=true]{background:#1c2236} }   /* the smallest phones: the words get the room */
/* short windows (a landscape phone, a zoomed-in browser): tighter, the box scrolls inside */
@media (max-height:500px){
  .ct-dialog{padding-top:52px}
  .ct-close{top:6px;width:40px;height:40px}
  .ct-in{padding-top:0;padding-bottom:16px}
  .ct-h{font-size:1.4rem}
  .ct-lead{margin-bottom:14px}
  .ct-s{min-height:48px}
  .ct-s.ct-discord{min-height:54px}
}