/* ourlittleworld link site. One stylesheet, no external requests: the page face is the self-hosted Shantell Sans (latin, OFL, see assets/fonts) with the system fonts behind it.
   The look is the app's invite pages in miniature (app/src/ui/gate/gate.css, settings.css, windowShare.css): cream paper, ink, a faint halftone, a slip with a perforation, buttons with
   the hard 2 / 2 ink shadow and a 1 px warm misregistration edge on the top and left. Nothing animates. Colours are the app's static role colours (ink #3B3852, cream #f6f3ed,
   accent #e0a13a, app/src/ui/gate/gatePalette.ts). */

@font-face {
  font-family: 'OLW Page';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/ShantellSans-informal-latin.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 {
  --ink: #3b3852;
  --ink-rgb: 59 56 82;
  --cream: #f6f3ed;
  --cream-rgb: 246 243 237;
  --accent-rgb: 224 161 58;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--cream);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background-color: var(--cream);
  background-image: radial-gradient(circle at 1px 1px, rgb(var(--ink-rgb) / 0.07) 0.9px, transparent 1.25px);
  background-size: 5px 5px;
  font-family: 'OLW Page', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  font-size: 15px;
  line-height: 1.35;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  padding: 56px 14px 32px;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}
/* a wide window shows the same centred portrait column the app does */
@media (min-width: 600px) {
  .page {
    border-inline: 1.5px solid var(--ink);
    background-color: var(--cream);
    background-image: radial-gradient(circle at 1px 1px, rgb(var(--ink-rgb) / 0.07) 0.9px, transparent 1.25px);
    background-size: 5px 5px;
    padding-top: 72px;
  }
}
@media (max-height: 600px) {
  .page {
    padding-top: 32px;
  }
}

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

/* ---- type ------------------------------------------------------------------------------------------------------------------------------------------------------- */

.word {
  margin: 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  overflow-wrap: anywhere;
  -webkit-text-stroke: 0.02em currentColor;
}
.word a {
  color: inherit;
  text-decoration: none;
}
@media (min-width: 360px) {
  .word {
    font-size: 34px;
  }
}
.tag {
  margin: 6px 0 0;
  color: rgb(var(--ink-rgb) / 0.88);
}

h1,
h2 {
  margin: 28px 0 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  overflow-wrap: anywhere;
  -webkit-text-stroke: 0.02em currentColor;
}
h1:first-child {
  margin-top: 0;
}
.pane > h1:first-child {
  margin-top: 22px; /* under the wordmark */
}
ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
h1:focus {
  outline: none;
}

p {
  margin: 0 0 10px;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.helper {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgb(var(--ink-rgb) / 0.88);
}
.hint {
  font-size: 12.5px;
  color: rgb(var(--ink-rgb) / 0.88);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* the accent highlighter underline (the app's status lines): never colour alone, the words say it too */
.mark {
  padding: 0 2px;
  background: linear-gradient(transparent 55%, rgb(var(--accent-rgb) / 0.45) 55%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* a placeholder page's banner: a pencil outline, no shadow (the app's "blank slip") */
.pencil {
  margin: 20px 0 0;
  padding: 18px 16px;
  border: 1.5px dashed rgb(var(--ink-rgb) / 0.5);
  border-radius: 2px;
  transform: rotate(-0.6deg);
}
.pencil p:last-child {
  margin-bottom: 0;
}

/* ---- the slip --------------------------------------------------------------------------------------------------------------------------------------------------- */

.slip {
  position: relative;
  margin: 18px 2px 0 0;
  padding: 16px;
  border-radius: 2px;
  background-color: var(--cream);
  background-image: radial-gradient(circle at 1px 1px, rgb(var(--ink-rgb) / 0.07) 0.9px, transparent 1.25px);
  background-size: 4px 4px;
  box-shadow: inset 0 0 0 1.5px var(--ink), 2px 2px 0 0 var(--ink);
  color: var(--ink);
}
.slip__from {
  margin: 0 0 6px;
  font-size: 13px;
  color: rgb(var(--ink-rgb) / 0.88);
}
.slip__perf {
  height: 0;
  margin: 12px 0;
  border: 0;
  border-top: 1.5px dashed rgb(var(--ink-rgb) / 0.5);
}
.slip__foot {
  margin: 0;
  font-size: 12.5px;
  color: rgb(var(--ink-rgb) / 0.88);
}
/* the code: two groups of four split by a centred dot, sized to the slip so the widest string (MWMW · WMWM) never wraps */
.slip__codewrap {
  container-type: inline-size;
  text-align: center;
  padding: 2px 0;
  -webkit-user-select: all;
  user-select: all;
}
.slip__code {
  display: block;
  margin: 0;
  font-size: 26px; /* fallback before container units */
  font-size: min(38px, 10.6cqw);
  line-height: 1.15;
  letter-spacing: 0.03em;
  white-space: nowrap;
  -webkit-text-stroke: 0.02em currentColor;
  font-variant-numeric: tabular-nums;
}

/* ---- buttons (the app's ShareButton, windowShare.css) ------------------------------------------------------------------------------------------------------------- */

.btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 2px 0 0;
}
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 3px;
  font: 600 15.5px/1.1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 2px 2px 0 0 var(--ink);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate(-1px, -1px);
  border-style: solid;
  border-color: rgb(var(--accent-rgb) / 0.6);
  border-width: 1px 0 0 1px;
  border-radius: 3px;
  pointer-events: none;
}
.btn--primary {
  color: var(--cream);
  background-color: rgb(var(--ink-rgb) / 0.92);
  background-image: radial-gradient(circle at 1px 1px, rgb(var(--cream-rgb) / 0.07) 0.9px, transparent 1.25px);
  background-size: 4px 4px;
}
.btn--secondary {
  color: var(--ink);
  background-color: rgb(var(--cream-rgb) / 0.92);
}
.btn--secondary::before {
  border-color: rgb(var(--accent-rgb) / 0.45);
}
.btn:active {
  box-shadow: 0 0 0 0 var(--ink);
  filter: brightness(0.8);
}
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* the line under the buttons: one reserved slot so nothing moves when it says "copied" */
.status {
  min-height: 20px;
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.3;
}

/* ---- the join page's three states -------------------------------------------------------------------------------------------------------------------------------- */

/* The head script sets html[data-state] before the body is painted. Without it (no JavaScript) the static pane shows: it says what this page is. */
.pane {
  display: none;
}
html:not([data-state]) .pane--static,
html[data-state='invite'] .pane--invite,
html[data-state='none'] .pane--none {
  display: block;
}
/* the code is written into the slip once the page has loaded; until then nothing flashes */
html[data-state='invite']:not([data-ready]) .pane--invite {
  visibility: hidden;
}
/* the "open this link on your phone" line is only for a mouse-and-keyboard computer */
.desktop-only {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .desktop-only {
    display: block;
  }
}

.foot {
  margin-top: 40px;
  font-size: 12.5px;
  color: rgb(var(--ink-rgb) / 0.88);
}
.foot a {
  margin-right: 14px;
  display: inline-block;
  padding: 10px 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}