/* SpeedHuddle look. Loaded only on meet.speedhuddle.com pages (the Linked.Club address never loads it).
   Ink #0B0B0B, white, hot pink #FF2E88 as the only accent (buttons with black text, links), greys #5A5A63 and #B9B9C2.
   Inside an event the organizer's colour replaces the accent (set on <html> by the server). */

@font-face {
  font-family: "SH Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-opsz.woff2") format("woff2-variations"), url("/fonts/inter-latin-opsz.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root[data-theme="speedhuddle"] {
  --bg: #0B0B0B;
  --panel: #141417;
  --panel-2: #0E0E11;
  --line: #2A2A31;
  --text: #FFFFFF;
  --muted: #B9B9C2;
  --grey: #5A5A63;
  --accent: #FF2E88;
  --accent-ink: #0B0B0B;
  --pink: #FF2E88;
  --warn: #FFB020;
  --danger: #FF6B7A;
  --ok: #3DDC97;
  --radius: 16px;
  --font: "SH Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}

html[data-theme="speedhuddle"],
html[data-theme="speedhuddle"] body { font-family: var(--font); background: var(--bg); color: var(--text); font-optical-sizing: auto; }
/* Inter turns "6x1" into "6×1" by default; names and email addresses must show as typed. */
html[data-theme="speedhuddle"] body, .sh-page, .sh-page input, .sh-page select, .sh-page textarea { font-variant-ligatures: no-contextual; font-feature-settings: "calt" 0; }
/* Big headings: Inter Display (the font's 32 optical size) at weight 900, letter-spacing -0.035em. */
html[data-theme="speedhuddle"] h1 { font-weight: 900; letter-spacing: -0.035em; line-height: 1.1; font-variation-settings: "opsz" 32; }
html[data-theme="speedhuddle"] h2 { font-weight: 800; letter-spacing: -0.02em; }

/* Wordmark: "Speed" pink, "Huddle" white on dark. No icon. */
.sh-word { font-family: var(--font); font-weight: 900; letter-spacing: -0.035em; font-size: 22px; line-height: 1; white-space: nowrap; display: inline-block; font-variation-settings: "opsz" 32; }
.sh-speed { color: var(--pink); }
.sh-huddle { color: #FFFFFF; }
.org-logo { height: 34px; width: auto; max-width: 190px; object-fit: contain; display: block; }
/* Pro without a logo: the organizer's name in place of the SpeedHuddle wordmark. */
.org-name { font-family: var(--font); font-weight: 900; letter-spacing: -0.03em; font-size: 20px; line-height: 1.1; color: var(--text); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }

/* ---------- the event app (app.html) in the SpeedHuddle look ---------- */
html[data-theme="speedhuddle"] .top { padding: 12px 18px; }
html[data-theme="speedhuddle"] .top .brand { flex-direction: row; align-items: center; gap: 10px; }
html[data-theme="speedhuddle"] .btn { border-radius: 999px; padding: 10px 16px; }
html[data-theme="speedhuddle"] .btn.mini { padding: 6px 11px; }
html[data-theme="speedhuddle"] .btn.primary { font-weight: 800; }
html[data-theme="speedhuddle"] .card { border-radius: 18px; }
html[data-theme="speedhuddle"] input, html[data-theme="speedhuddle"] select, html[data-theme="speedhuddle"] textarea { border-radius: 12px; }
html[data-theme="speedhuddle"] .box h3 { color: var(--muted); }
html[data-theme="speedhuddle"] .foot { color: var(--grey); padding: 14px 10px 18px; }
html[data-theme="speedhuddle"] .foot a { color: var(--muted); text-decoration: none; font-weight: 700; }
html[data-theme="speedhuddle"] .foot a:hover { color: var(--text); }
html[data-theme="speedhuddle"] .video, html[data-theme="speedhuddle"] .preview { background: #050506; }
html[data-theme="speedhuddle"] .self-preview { background: #020203; }
html[data-theme="speedhuddle"] .lobby { background: radial-gradient(1100px 480px at 50% -12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%), #070708; }
html[data-theme="speedhuddle"] .lobby-kicker { color: var(--accent); }
html[data-theme="speedhuddle"] .banner { background: var(--accent); color: var(--accent-ink); }
html[data-theme="speedhuddle"] .banner.warn { background: var(--warn); color: #1d1300; } /* the 1 minute warning, not a host message */
@media (max-width: 359px) {
  html[data-theme="speedhuddle"] .top { padding: 10px 12px; }
  html[data-theme="speedhuddle"] .top .brand { gap: 6px; }
  .sh-word { font-size: 18px; }
  .org-logo { height: 28px; max-width: 120px; }
  .org-name { font-size: 17px; max-width: 45vw; }
}
html[data-theme="speedhuddle"] .prompt { letter-spacing: -0.01em; }
.sh-welcome { margin: 10px auto 0; max-width: 520px; color: var(--text); font-weight: 600; }
.sh-hosted { margin: -4px 0 12px; color: var(--muted); }
.sh-hosted strong { color: var(--text); }
.sh-credit-hint { margin: -12px 0 0; color: var(--muted); font-size: 13px; }
.sh-reg-note { margin: 0 0 16px; }
html.sh-reg-gated #lookupBox { display: none !important; }

/* Out of credits: shown to the organizer in the host room. */
.sh-alert { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 16px; background: #2A1508; color: #FFD8B0; border-bottom: 1px solid #5A3210; font-weight: 600; font-size: 14px; }
.sh-alert a { color: #FFFFFF; font-weight: 800; }

/* ---------- SpeedHuddle's own pages (account, dashboard tabs, registration) ---------- */
.sh-page { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-size: 16px; line-height: 1.5; }
.sh-page *, .sh-page *::before, .sh-page *::after { box-sizing: border-box; }
.sh-page [hidden] { display: none !important; }
.sh-page a { color: var(--accent); }
.sh-muted { color: var(--muted); }
.sh-small { font-size: 13px; }
.sh-error { color: var(--danger); font-weight: 600; margin: 0; }
.sh-ok { color: var(--ok); font-weight: 600; margin: 0; }

.sh-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.sh-card h2 { font-size: 19px; margin: 0 0 6px; }
.sh-card + .sh-card { margin-top: 16px; }

.sh-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.sh-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.sh-field .sh-hint { font-weight: 400; color: var(--muted); font-size: 13px; }
.sh-input, .sh-page input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=hidden]), .sh-page select, .sh-page textarea {
  font: inherit; font-size: 16px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; width: 100%; min-width: 0;
}
.sh-page textarea { resize: vertical; min-height: 84px; }
.sh-page input:focus, .sh-page select:focus, .sh-page textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.sh-legal { font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; margin: 10px 0 0; }
.sh-legal a { color: inherit; text-decoration: underline; }
.sh-page input[type=checkbox], .sh-page input[type=radio] { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex: none; }
.sh-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .sh-row2 { grid-template-columns: 1fr; } }

.sh-btn, a.sh-btn, .sh-page a.sh-btn { font: inherit; font-weight: 800; font-size: 15px; border-radius: 999px; padding: 12px 20px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; }
.sh-btn:hover { border-color: var(--muted); }
.sh-btn.primary, .sh-page a.sh-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sh-btn.primary:hover { filter: brightness(1.08); }
.sh-btn.danger { border-color: var(--danger); color: var(--danger); }
.sh-btn.small { padding: 7px 13px; font-size: 13px; }
.sh-btn.wide { width: 100%; }
.sh-btn:disabled { opacity: .5; cursor: default; filter: none; }
/* Save feedback (SHUI.saving): "Saving…" while the request runs, then a green "Saved" for a moment. */
.sh-btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.sh-btn.is-saved, .sh-btn.primary.is-saved { background: transparent; border-color: var(--ok); color: var(--ok); filter: none; }
.sh-btn.is-saved::before { content: "\2713"; font-weight: 900; }
.sh-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sh-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.sh-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.sh-pill.pink { background: transparent; border-color: var(--accent); color: var(--text); }
.sh-pill.ok { border-color: var(--ok); color: var(--ok); }
.sh-pill.warn { border-color: var(--warn); color: var(--warn); }

.sh-note { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.sh-note.warn { border-color: #6B4A10; background: #1F1606; color: #FFE2A8; }
.sh-note.good { border-color: #1C5A40; background: #071A12; color: #BFF5DD; }

.sh-top { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sh-top .grow { flex: 1; }
.sh-foot { text-align: center; color: var(--grey); font-size: 12px; padding: 18px 12px 22px; }
.sh-foot a { color: var(--muted); font-weight: 700; text-decoration: none; }
/* Who we are, on every page: the website, the Terms and the Privacy Policy. */
.sh-foot-links { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 10px; }