/* Vesper:Chat — one stylesheet for every page. No fonts to fetch, no scripts.
   Colours are the app's own (Theme.swift): space, chatBg, text, muted, lav,
   pink, cyan, mint, outline. */
:root {
  --space: #050814;
  --panel: #0E0D13;
  --text: #F5EDFF;
  --muted: #7D6BB0;
  --lav: #C09BF0;
  --pink: #FF93C8;
  --cyan: #8FE9FF;
  --mint: #B8F5E4;
  --outline: #42305F;
  --user: #1C3B61;
  --her: #2E2461;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--space); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--space);
  color: var(--text);
  font: 15px/1.6 var(--mono);
  min-height: 100vh;
  position: relative;
}
/* the faint scanlines: 4% */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 3px);
  z-index: 10;
}
.page { max-width: 80ch; margin: 0 auto; padding: 20px 16px 40px; }

a { color: var(--cyan); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
p { margin: 0 0 1em; }
h1, h2 { font-size: 1em; font-weight: 700; margin: 0; }
h2 { color: var(--lav); letter-spacing: .2em; text-transform: uppercase; margin: 1.6em 0 .5em; }
h2:first-child { margin-top: 0; }
ul { margin: 0 0 1em; padding-left: 0; list-style: none; }
li { margin: 0 0 .4em; padding-left: 2ch; text-indent: -2ch; }
li::before { content: "> "; color: var(--pink); }
.muted { color: var(--muted); }
.lav { color: var(--lav); }
.pink { color: var(--pink); }
.mint { color: var(--mint); }
.cyan { color: var(--cyan); }
code, .kbd { color: var(--mint); }

/* top bar */
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 2ch;
       color: var(--muted); margin-bottom: 18px; }
.bar a { color: var(--muted); }
.bar a:hover { color: var(--cyan); }

/* the banner: the app's own block alphabet, one pre per word */
pre { margin: 0; font: inherit; }
pre.banner {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(6px, 2.9vw, 22px);
  line-height: 1;
  white-space: pre;
  overflow-x: auto;
  color: transparent;
  background: linear-gradient(to bottom, var(--text), var(--lav));
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 6px rgba(143,233,255,.35));
  width: max-content; max-width: 100%;
}
pre.banner + pre.banner { margin-top: .4em; }
.banner-wrap { margin: 6px 0 14px; }

.tag { margin: 0 0 14px; color: var(--lav); letter-spacing: .08em; }
.cursor::after {
  content: "\2588"; color: var(--cyan); margin-left: 1ch;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor::after { animation: none; } }

/* bracket buttons */
.btn { display: inline-block; color: var(--pink); letter-spacing: .12em; font-weight: 700;
       border: 1px solid var(--outline); background: var(--panel); padding: .55em 1.4ch; }
.btn:hover, .btn:focus { color: var(--space); background: var(--pink); border-color: var(--pink);
                          text-decoration: none; }

/* BBS boxes. The top and bottom rules are real box-drawing characters; the
   side rules are a 1px border set half a character in, so they meet the
   corner glyphs. */
.box { margin: 0 0 22px; }
.rule { display: flex; color: var(--outline); line-height: 1; white-space: nowrap; overflow: hidden; }
.rule .fill { flex: 1 1 0; min-width: 0; overflow: hidden; }
.rule .t { color: var(--lav); letter-spacing: .12em; }
.body { margin: 0 .5ch; border-left: 1px solid var(--outline); border-right: 1px solid var(--outline);
        padding: .8em 2ch .4em; overflow-wrap: anywhere; }
.body > :last-child { margin-bottom: .4em; }

/* hero: text left, phone right; stacked on a phone */
.hero { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 0 22px; align-items: start; }
.hero .copy { min-width: 0; }
@media (max-width: 640px) {
  body { font-size: 14px; }
  .hero { grid-template-columns: minmax(0,1fr); }
  .shot { max-width: 260px; margin: 0 auto; }
}
.shot .body, .card .body { padding: .6em 0 .2em; text-align: center; }
.shot img, .card img { display: block; width: 100%; height: auto; }
.cards { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 18px; }
@media (max-width: 520px) { .cards { grid-template-columns: minmax(0,1fr); } }
.card .body { padding: .6em 1ch .6em; }
.card .cap { margin: .7em 0 0; text-align: left; }
.card .cap b { color: var(--lav); letter-spacing: .12em; }

/* legal pages: plain readable text */
.legal .body { padding: 1em 2ch .6em; }
.legal p, .legal li { max-width: 72ch; }
.legal table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
.legal td { vertical-align: top; padding: .35em 1.5ch .35em 0; border-top: 1px solid var(--outline); }
.legal td:first-child { color: var(--lav); white-space: nowrap; width: 1%; }
.q { color: var(--cyan); }
.foot { margin-top: 26px; text-align: center; color: var(--muted); }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--cyan); }
.foot .l { margin-bottom: 4px; }