/* WelcomeTo Studios - the legal pages: /privacy, /terms and /cookies, and
   the Terms of Service and Privacy Policy the site hosts for each bot
   (/bots/<id>/terms, /bots/<id>/privacy).

   Standalone documents with no scripts at all: the site's
   Content-Security-Policy runs only the main page's own inline scripts, so
   anything here that needed one would silently not work. The text is
   Markdown an admin edits, rendered by the server (api/lib/legal.js) into
   headings, paragraphs, lists, quotes and rules - never tables or
   pictures. The palette and the faces come from tokens.css; this file is
   layout and typography for reading - one column of about 70 characters,
   generous leading, and the "Join our Discord" button each page ends
   with. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* One restrained crimson wash at the very top of the page, behind
   everything. It never reaches the text colours. */
body::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 560px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 90% at 22% -25%, var(--accent-wash), transparent 70%),
    radial-gradient(50% 70% at 80% -30%, var(--accent-wash), transparent 70%);
}

img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- links and focus */

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus); box-shadow: var(--rim-glow);
  outline-offset: 3px;
  border-radius: 3px;
}
/* The skip link's target takes focus so the next Tab starts inside it; it
   needs no ring of its own. */
#main:focus { outline: none; }

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 10;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--rim);
  border-radius: var(--r-sm);
  padding: 10px 16px;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* Words a screen reader says that the page does not show: "(opens in a new
   tab)" after a link that does. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- frame */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.topbar { border-bottom: 1px solid var(--line); }
.topbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
}
.brand:hover { text-decoration: none; }
.brand__mark {
  flex: none;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.back::before { content: '\2190'; }
.back:hover { color: var(--text); background: var(--surface-2); }

/* The header's right end: our Discord's invite, then the way back. The
   invite is the main page's own header link - an outlined pill with
   Discord's mark in a light blurple, filled blurple under the pointer, one
   rim when focused - and opens in a new tab. On a phone its words fold
   into the mark (below). */
.topbar__end { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.top-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 16px 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.top-discord:hover { background: #5865f2; border-color: #5865f2; color: #fff; text-decoration: none; }
.top-discord__mark { flex: none; display: block; width: 21px; height: 17px; fill: #7984f5; transition: fill .15s var(--ease); }
.top-discord:hover .top-discord__mark { fill: #fff; }
.top-discord:focus-visible { outline: none; border-color: var(--rim); box-shadow: var(--rim-glow); border-radius: var(--r-pill); }

/* The document's column, so the page links line up with the text. */
.measure { max-width: 70ch; margin-left: auto; margin-right: auto; }

.legal-nav { padding: 20px 0 0; }
.legal-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.legal-nav a {
  display: block;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.legal-nav a:hover { color: var(--text); border-color: var(--line-strong); }
.legal-nav a[aria-current="page"] {
  color: var(--text);
  background: var(--accent-wash);
  border-color: var(--accent);
}

/* ---------------------------------------------------------------- the document */

main { flex: 1; }

.doc {
  max-width: 70ch;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) 0 80px;
}

.doc__eyebrow {
  margin: 0 0 12px;
  color: var(--accent-text);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.doc h1 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* A bot's own pages (/bots/<id>/terms and /privacy, public/bot-legal.html):
   whose they are, above the title - the bot's avatar and name, and who
   makes it. */
.doc__bot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
}
.doc__bot-avatar {
  flex: none;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line-strong);
  object-fit: cover;
}
.doc__bot-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  line-height: 1.3;
}
.doc__bot-name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.doc__bot-by {
  color: var(--text-muted);
  font-size: .875rem;
}

.doc__updated { margin: 0; color: var(--text-muted); font-size: .9375rem; }
/* A date or version that should not break at its hyphens. */
.nowrap { white-space: nowrap; }

.doc__lede {
  margin: 22px 0 0;
  color: var(--text-muted);
  font-size: 1.1875rem;
  line-height: 1.6;
}

.doc h2 {
  margin: 48px 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.doc h3 {
  margin: 32px 0 8px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}
.doc h4 {
  margin: 20px 0 4px;
  font-size: 1rem;
  font-weight: 600;
}

.doc p,
.doc ul,
.doc ol { margin: 0 0 16px; }
.doc ul,
.doc ol { padding-left: 1.4em; }
.doc li { margin: 6px 0; }
.doc li::marker { color: var(--text-muted); }
.doc strong { font-weight: 600; }
.doc em { font-style: italic; }

.doc blockquote {
  margin: 0 0 16px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--line-strong);
  color: var(--text-muted);
}
.doc blockquote p:last-child { margin-bottom: 0; }

.doc hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

code {
  font-family: var(--font-mono);
  font-size: .875em;
  padding: .1em .35em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  overflow-wrap: anywhere;
}

.muted { color: var(--text-muted); }

/* "Contact us", at the end of every page: one line and the invite. */
.contact {
  margin: 48px 0 0;
  padding: 24px clamp(18px, 4vw, 28px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.doc .contact h2 {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  font-size: 1.375rem;
}
.doc .contact p { margin: 0 0 18px; color: var(--text-muted); }

/* Discord's own blurple: white on #5865f2 is 4.6:1, and 6.4:1 on hover. */
.discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: #5865f2;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s var(--ease);
}
.discord-btn:hover { background: #4752c4; text-decoration: none; }
.discord-btn:focus-visible { outline-offset: 3px; border-radius: var(--r-pill); }
.discord-btn__mark { flex: none; width: 22px; height: 18px; fill: currentColor; }
/* The same button, smaller, in every page's footer. */
.discord-btn--foot { gap: 8px; min-height: 38px; padding: 8px 16px; font-size: .875rem; }
.discord-btn--foot .discord-btn__mark { width: 19px; height: 15px; }

/* ---------------------------------------------------------------- footer */

.foot {
  margin-top: auto;
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: .875rem;
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
}
.foot p { margin: 0; }
/* The copyright; across from it the links, and the Discord button under
   them in the same column, lined up with the row's end - or with its
   start on a narrow screen, where the column sits under the copyright. */
.foot__start { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.foot__end { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
@media (max-width: 720px) { .foot__end { align-items: flex-start; } }
.foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot a { color: var(--text-muted); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }
.foot .discord-btn, .foot .discord-btn:hover { color: #fff; text-decoration: none; }

/* ---------------------------------------------------------------- narrow screens */

/* On a phone the name, the Discord mark and the way back share one row (at
   390px and up; narrower, the mark and the way back take a second): a
   smaller logo and name, and the back link as plain text. */
@media (max-width: 26rem) {
  .topbar__row { gap: 8px; }
  .brand { font-size: 1rem; gap: 10px; }
  .brand__mark { width: 30px; height: 30px; border-radius: 8px; }
  .back { padding: 6px 0; border: 0; font-size: .875rem; }
  .back::before { content: none; }
  .back:hover { background: none; }
  /* The invite is the mark alone, a finger's size; it still says "Join our
     Discord" to a screen reader. */
  .topbar__end { gap: 6px; }
  .top-discord { width: 44px; height: 44px; min-height: 44px; padding: 0; gap: 0; }
  .top-discord__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* On a touch screen, or a narrow window, every link that stands on its own
   - the name, the way back, the pages' tabs, the footer's links, the
   Discord button - is at least 44 x 44 CSS px, a finger's size (WCAG
   2.5.5); links inside the text keep the line's height. */
@media (pointer: coarse), (max-width: 720px) {
  .brand, .back, .legal-nav a, .foot a, .discord-btn, .top-discord { display: inline-flex; align-items: center; min-height: 44px; }
  .back { min-width: 44px; }
  .foot ul { row-gap: 0; }
}

/* ---------------------------------------------------------------- print */

@media print {
  :root { color-scheme: light; }
  body { background: Canvas; color: CanvasText; font-size: 11pt; }
  body::before, .skip, .legal-nav, .back, .top-discord, .discord-btn--foot { display: none; }
  .contact, code { background: none; box-shadow: none; }
  .muted, .doc__updated, .doc__lede, .doc blockquote, .foot, .foot a { color: CanvasText; }
  a, .doc__eyebrow { color: CanvasText; }
  .doc .contact p { color: CanvasText; }
  .discord-btn { padding: 0; background: none; color: CanvasText; }
  .discord-btn__mark { display: none; }
  .discord-btn::after { content: ': ' attr(href); font-weight: 400; }
}

/* ---------------------------------------------------------------- a page that is not there */

/* The server's 404, 400 and 500 pages (server/error-page.mjs) and a bot's
   page that is not written (public/bot-legal.html): where to go instead, a
   row of links, the first the way home. */
.doc .doc__next { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; }
.doc .doc__next li { margin: 0; }
.doc__next a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.doc__next a:hover { background: var(--surface-2); text-decoration: none; }
.doc__next a.is-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.doc__next a.is-primary:hover { background: var(--accent-hover); }