/* Serial-number licence gate (gate.js). Shared with Lokadata Wallacea and Agora: keep the copies identical. */
:root { --sg-bg: #f4f5f4; --sg-card: #ffffff; --sg-ink: #17201f; --sg-ink-2: #56625f; --sg-line: #cfd6d4; --sg-brand: #1d4f57; --sg-brand-ink: #ffffff; --sg-err: #a3321f; }
@media (prefers-color-scheme: dark) {
  :root { --sg-bg: #111615; --sg-card: #1b2221; --sg-ink: #e7eceb; --sg-ink-2: #9aa7a4; --sg-line: #34403e; --sg-brand: #6fb3bb; --sg-brand-ink: #0c1413; --sg-err: #f08a72; }
}
/* page stays laid out (maps size themselves) but unseen until a serial is accepted */
html:not(.sg-ok) body > :not(#sg-gate) { visibility: hidden !important; }
html:not(.sg-ok) body { background: var(--sg-bg) !important; overflow: hidden !important; }

#sg-gate { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; padding: 16px; background: var(--sg-bg); color: var(--sg-ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
#sg-gate .sg-card { width: min(440px, 100%); background: var(--sg-card); border: 1px solid var(--sg-line); border-radius: 10px; padding: 28px 24px 24px; box-shadow: 0 8px 30px rgb(0 0 0 / .08); }
#sg-gate h1 { margin: 0 0 6px; font-size: 20px; font-weight: 650; letter-spacing: -.01em; }
#sg-gate p { margin: 0 0 18px; color: var(--sg-ink-2); }
#sg-gate label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
#sg-gate textarea { box-sizing: border-box; width: 100%; resize: vertical; padding: 10px 12px; border: 1px solid var(--sg-line); border-radius: 6px;
  background: var(--sg-bg); color: var(--sg-ink); font: 13px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; text-transform: uppercase; word-break: break-all; }
#sg-gate textarea:focus { outline: 2px solid var(--sg-brand); outline-offset: 1px; }
#sg-gate .sg-msg { min-height: 1.45em; margin: 8px 0 12px; font-size: 13px; color: var(--sg-err); }
#sg-gate button { width: 100%; padding: 10px 14px; border: 0; border-radius: 6px; background: var(--sg-brand); color: var(--sg-brand-ink); font: inherit; font-weight: 600; cursor: pointer; }
#sg-gate button:disabled { opacity: .6; cursor: progress; }
#sg-gate button:focus-visible { outline: 2px solid var(--sg-ink); outline-offset: 2px; }

/* collapsed to a 22px key in the bottom-left corner; a page can move it with its own #sg-chip { left/right/top/bottom } */
#sg-chip { position: fixed; left: 4px; bottom: 4px; z-index: 2147483000; display: flex; align-items: center; gap: 6px; box-sizing: border-box; height: 22px; max-width: 22px; overflow: hidden;
  padding: 0 3px 0 4px; border: 1px solid var(--sg-line); border-radius: 999px; background: var(--sg-card); color: var(--sg-ink-2);
  font: 11px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 1px 3px rgb(0 0 0 / .12); opacity: .7; cursor: default; transition: max-width .15s ease, opacity .15s; }
#sg-chip:hover, #sg-chip:focus-within { max-width: min(340px, calc(100vw - 8px)); opacity: 1; }
#sg-chip:focus-visible { outline: 2px solid var(--sg-brand); outline-offset: 1px; }
#sg-chip svg { flex: none; width: 12px; height: 12px; }
#sg-chip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#sg-chip button { flex: none; padding: 0 8px; line-height: 16px; border: 1px solid var(--sg-line); border-radius: 999px; background: transparent; color: var(--sg-ink); font: inherit; cursor: pointer; }
@media print { #sg-chip { display: none; } }