/*
 * Pardy web tokens. Mirrors apps/mobile/src/design:
 * palette.ts (the cool violet-tinted grey family), radius.ts (pill / 20 / 16 / 12),
 * typography.ts (the platform ramp), spacing.ts (base unit 4).
 *
 * Two accent roles only: truth and dare, the "classic" pair from
 * packages/shared/src/theme.ts. No third hue. No gradients. No emoji in chrome.
 */

:root {
  /* the grey family, one family, never mixed */
  --grey-0: #ffffff;
  --grey-50: #f4f1fa;
  --grey-100: #efeaf7;
  --grey-200: #d8d3e6;
  --grey-300: #c2bcd0;
  --grey-400: #9c96a3;
  --grey-500: #8a8394;
  --grey-600: #6a6474;
  --grey-700: #3a3546;
  --grey-800: #242230;
  --grey-850: #18171f;
  --grey-900: #141319;
  --grey-950: #0d0c10;

  /* the two accent roles, classic pair */
  --truth: #ff3355;
  --dare: #00c2ff;

  /* radius scale */
  --r-pill: 999px;
  --r-card: 20px;
  --r-media: 16px;
  --r-input: 12px;

  /* spacing, base unit 4 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --gutter: 16px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* semantic neutrals, light */
  --bg: var(--grey-50);
  --bg-2: var(--grey-100);
  --surface: var(--grey-0);
  --surface-2: var(--grey-100);
  --line: var(--grey-200);
  --line-strong: var(--grey-300);
  --label: #17151f;
  --label-2: var(--grey-600);
  --label-3: var(--grey-500);
  --truth-tint: #d81b3d;
  --dare-tint: #00698c;
  --truth-soft: rgba(255, 51, 85, 0.14);
  --dare-soft: rgba(0, 194, 255, 0.14);
  --on-accent: #ffffff;
  --shadow: rgba(23, 21, 31, 0.1);
  --focus: #17151f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--grey-950);
    --bg-2: var(--grey-900);
    --surface: var(--grey-850);
    --surface-2: var(--grey-800);
    --line: var(--grey-800);
    --line-strong: var(--grey-700);
    --label: var(--grey-50);
    --label-2: var(--grey-400);
    --label-3: var(--grey-500);
    --truth-tint: #ff5c78;
    --dare-tint: #4ad4ff;
    --truth-soft: rgba(255, 51, 85, 0.22);
    --dare-soft: rgba(0, 194, 255, 0.22);
    --on-accent: #17151f;
    --shadow: rgba(0, 0, 0, 0.5);
    --focus: var(--grey-50);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.41px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--truth-tint);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  /* Several legal links are bare URLs. On a 320px screen one of them was
     wider than the viewport and scrolled the whole body sideways. */
  overflow-wrap: anywhere;
}

a:hover {
  color: var(--dare-tint);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-input);
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--gutter);
  top: var(--s3);
  z-index: 10;
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border-radius: var(--r-pill);
}

/* ---------- layout ---------- */

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap-wide {
  max-width: 960px;
}

/* ---------- header ---------- */

.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 56px;
  flex-wrap: wrap;
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.38px;
  color: var(--label);
  text-decoration: none;
}

.brand:hover {
  color: var(--label);
}

.brand img {
  width: 28px;
  height: 28px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.24px;
}

.site-nav a {
  color: var(--label-2);
  text-decoration: none;
  padding: var(--s1) 0;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--label);
}

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

h1 {
  font-size: 34px;
  line-height: 41px;
  letter-spacing: 0.4px;
  font-weight: 700;
  margin: 0 0 var(--s4);
}

h2 {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: 0.35px;
  font-weight: 700;
  margin: var(--s10) 0 var(--s3);
}

h3 {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 600;
  margin: var(--s6) 0 var(--s2);
}

p,
ul,
ol {
  margin: 0 0 var(--s4);
}

ul,
ol {
  padding-left: var(--s5);
}

li {
  margin-bottom: var(--s2);
}

.lede {
  font-size: 20px;
  line-height: 27px;
  letter-spacing: -0.2px;
  color: var(--label-2);
}

.foot-note,
.meta {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.08px;
  color: var(--label-3);
}

.legal-fine {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--label-3);
}

/* ---------- hero ---------- */

.hero {
  padding: var(--s12) 0 var(--s10);
  text-align: center;
}

/*
 * The app icon is a full-bleed square with its own dark ground baked in, so it
 * reads as a floating black box unless it is masked the way a launcher masks
 * it. iOS superellipse proportions: 22.37% of the side.
 */
.hero-mark {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--s5);
  display: block;
  border-radius: 22px;
  border-curve: continuous;
  box-shadow: 0 2px 12px var(--shadow);
}

.brand img {
  border-radius: 7px;
}

.hero h1 {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.4px;
  font-weight: 800;
}

.hero .lede {
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- badges ---------- */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: center;
  margin: var(--s6) 0 var(--s2);
}

.badge {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-height: 52px;
  padding: var(--s2) var(--s5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--label);
  text-decoration: none;
  justify-content: center;
  text-align: left;
}

.badge:hover {
  color: var(--label);
  border-color: var(--label-3);
}

.badge .badge-kicker {
  font-size: 11px;
  line-height: 13px;
  letter-spacing: 0.07px;
  color: var(--label-3);
}

.badge .badge-name {
  font-size: 16px;
  line-height: 21px;
  letter-spacing: -0.32px;
  font-weight: 600;
}

/* ---------- cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s5);
  margin-bottom: var(--s4);
}

.card h2,
.card h3 {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

.grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: var(--s6);
}

.grid .card {
  margin-bottom: 0;
}

.side {
  border-left: 3px solid var(--line-strong);
  padding-left: var(--s4);
}

.side-truth {
  border-left-color: var(--truth);
}

.side-dare {
  border-left-color: var(--dare);
}

/* ---------- shots ---------- */

/*
 * A phone-shaped row that scrolls sideways, not a grid that stretches. A 9:19.5
 * frame at full container width is taller than the viewport, which on a phone
 * turns four placeholders into four screens of scrolling.
 */
.shots {
  display: flex;
  gap: var(--s4);
  margin: var(--s6) 0;
  overflow-x: auto;
  padding-bottom: var(--s2);
  scroll-snap-type: x proximity;
}

.shot {
  flex: 0 0 auto;
  width: 180px;
  scroll-snap-align: start;
  aspect-ratio: 9 / 19.5;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-media);
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  text-align: center;
  color: var(--label-3);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.08px;
}

/* ---------- forms ---------- */

.field {
  margin-bottom: var(--s4);
}

label {
  display: block;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.24px;
  font-weight: 600;
  margin-bottom: var(--s2);
}

.hint {
  font-weight: 400;
  color: var(--label-3);
  font-size: 13px;
  line-height: 18px;
  display: block;
  margin-top: 2px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--s3);
  font: inherit;
  color: var(--label);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
}

textarea {
  min-height: 132px;
  resize: vertical;
}

button {
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: var(--s3) var(--s6);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--truth);
  color: var(--on-accent);
  cursor: pointer;
}

button:hover {
  background: var(--dare);
}

button[disabled] {
  opacity: 0.5;
  cursor: default;
}

.form-note {
  margin-top: var(--s4);
  padding: var(--s4);
  border-radius: var(--r-input);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 15px;
  line-height: 20px;
}

.form-note[hidden] {
  display: none;
}

.form-note.ok {
  border-color: var(--dare);
  background: var(--dare-soft);
}

.form-note.bad {
  border-color: var(--truth);
  background: var(--truth-soft);
}

/* ---------- obfuscated contact ---------- */

.mail {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

/* the anchor and copy button are dead without JS (the anchor just links to
   the support form and never reveals anything); hide both until mail.js has
   run and marked the component ready, so a no-JS view shows only the
   noscript SVG address and the form link, not a redundant dead link. */
.mail > .mail-link,
.mail > .mail-copy {
  display: none;
}

.mail[data-mail-ready='1'] > .mail-link {
  display: inline;
}

.mail-link {
  color: var(--truth-tint);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}

.mail-link:hover {
  color: var(--dare-tint);
}

.mail-copy {
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  min-height: auto;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--label);
  cursor: pointer;
}

.mail-copy:hover {
  background: var(--surface);
  border-color: var(--label-3);
}

/* [hidden] must win over the ready-state reveal: the decoder clears the
   attribute itself once an address is actually revealed. */
.mail-copy[hidden] {
  display: none;
}

.mail[data-mail-ready='1'] > .mail-copy:not([hidden]) {
  display: inline-block;
}

/* Belt and suspenders: a copy button built with copy:false always carries
   data-mail-copy-disabled="1" so its .data-c token stays readable in the
   static markup, and mail.js's isRealCopyButton() gate means [hidden] is
   never cleared for it. This rule pins that button out of layout directly
   off the disabled marker, so it can never paint as an empty pill even if
   the hidden state ever drifted. Same specificity (0,4,0) as the ready-state
   reveal rule above, but it comes later in source order, so it wins on tie
   without needing !important. */
.mail[data-mail-ready='1'] > .mail-copy[data-mail-copy-disabled='1'] {
  display: none;
}

.mail-noscript-note {
  color: var(--label-3);
  vertical-align: middle;
  margin-left: var(--s2);
}

.mail svg {
  vertical-align: middle;
}

/* ---------- legal chrome ---------- */

.draft {
  border: 1px solid var(--truth);
  background: var(--truth-soft);
  border-radius: var(--r-input);
  padding: var(--s4);
  margin-bottom: var(--s6);
  font-size: 15px;
  line-height: 20px;
}

.draft strong {
  display: block;
  margin-bottom: var(--s1);
}

.ph {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  padding: 1px 6px;
  border-radius: var(--r-input);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  /*
   * Placeholders wrap. Several carry a whole sentence of instruction for the
   * owner, and nowrap pushed the longest one past the viewport and made the
   * whole body scroll sideways. Caught in the mobile dark screenshot.
   */
  white-space: normal;
  overflow-wrap: anywhere;
}

.toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s5);
  margin-bottom: var(--s6);
}

.toc ol {
  margin-bottom: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.24px;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  margin-bottom: var(--s4);
  background: var(--surface);
}

th,
td {
  text-align: left;
  padding: var(--s3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  font-weight: 600;
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

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

.site-foot {
  border-top: 1px solid var(--line);
  margin-top: var(--s12);
  padding: var(--s8) 0 var(--s12);
  color: var(--label-3);
}

.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
}

.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
}

.site-foot a {
  color: var(--label-2);
  text-decoration: none;
  font-size: 15px;
  line-height: 20px;
}

.site-foot a:hover {
  color: var(--label);
}

main {
  padding-bottom: var(--s8);
}

.page {
  padding-top: var(--s8);
}

@media (max-width: 560px) {
  .hero {
    padding: var(--s8) 0 var(--s6);
  }

  .hero h1 {
    font-size: 34px;
    line-height: 38px;
  }

  h1 {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 0.36px;
  }

  .badges {
    flex-direction: column;
  }

  .badge {
    align-items: flex-start;
  }
}