/* ============================================================
   base.css
   Reset, typography, focus, copy protection, shared utilities.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

/* Copy protection. The JS layer in js/protect.js blocks the events;
   this blocks the selection itself. */
html,body{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}

html{ -webkit-text-size-adjust:100% }

body{
  min-height:100dvh;
  background:var(--bg);
  color:var(--text);
  font-family:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.55;
  overflow-x:hidden;
  overscroll-behavior:none;
}

img{ display:block; max-width:100% }

/* `img{display:block}` above is an author rule, and author rules beat the
   browser's own `[hidden]{display:none}`. Without this line every image
   the script hides stays on screen as an empty box: that is exactly what
   the blank square next to the custom status was. */
[hidden]{ display:none !important }

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit }

:focus-visible{
  outline:2px solid rgba(255,255,255,.75);
  outline-offset:3px;
  border-radius:4px;
}

/* utilities */
.mono{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,"SF Mono",monospace }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}