/* Scroll Quest website. Mirrors ios/Packages/DesignSystem tokens (SQColor, SQTypography, SQSpacing,
   SQCornerRadius) so the site and the app read as one product. Change colours there first, then here. */
:root {
  --bg: #f7f7fc;
  --surface: #ffffff;
  --primary: #5445e6;
  --primary-ink: #ffffff;
  --accent: #ff942e;
  --success: #29a666;
  --text: #17171f;
  --text-2: #6b6b7a;
  --line: rgba(23, 23, 31, 0.08);
  --radius-md: 12px;
  --radius-lg: 20px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f17;
    --surface: #1f1f29;
    --primary: #8578ff;
    --primary-ink: #0f0f17;
    --accent: #ffa84d;
    --success: #4dcc85;
    --text: #f2f2f7;
    --text-2: #a3a3b3;
    --line: rgba(242, 242, 247, 0.1);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--font-body);
}
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

header.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-lg) 0;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1 var(--font-display); color: var(--text); text-decoration: none; }
.brand-mark { width: 28px; height: 28px; flex: none; }
nav a { color: var(--text-2); text-decoration: none; margin-left: var(--space-md); font-size: 15px; }
nav a:hover { color: var(--text); }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 var(--space-sm); }
h1 { font-size: clamp(34px, 7vw, 52px); font-weight: 800; }
h2 { font-size: 26px; font-weight: 700; margin-top: var(--space-xxl); }
h3 { font-size: 19px; font-weight: 600; margin-top: var(--space-lg); }
p, li { color: var(--text); }
.muted { color: var(--text-2); }
.lede { font-size: 20px; color: var(--text-2); max-width: 36ch; }

.hero { padding: var(--space-xl) 0 var(--space-xxl); display: grid; gap: var(--space-xl); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 760px) { .hero { grid-template-columns: 1.1fr 0.9fr; } }
.hero .eyebrow { display: block; margin-bottom: var(--space-md); color: var(--text-2); font: 600 14px/1.4 var(--font-display); }
.hero .copy { min-width: 0; }

/* The phone mock and the "Another example" control under it, as one hero column. */
.demo { min-width: 0; display: grid; justify-items: center; gap: var(--space-sm); }
.another {
  min-height: 44px; padding: 0 var(--space-md); border: 0; background: transparent; cursor: pointer;
  color: var(--text-2); font: 600 15px/1.2 var(--font-display);
}
.another:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.another:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }
/* The script reveals it; without the script it would do nothing. */
.another[hidden] { display: none; }

/* The task moment, drawn in CSS: what a user sees the instant a shielded app is opened. */
.phone {
  justify-self: center; width: min(100%, 320px); border-radius: 36px; padding: 18px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 24px 60px -30px rgba(23, 23, 31, 0.35);
  display: grid; gap: 14px; font-size: 15px;
}
.phone .status { display: flex; justify-content: space-between; color: var(--text-2); font: 600 12px/1 var(--font-display); padding: 2px 6px; }
/* Fixed-height slots: app names, prompts and answer shapes differ in length, and the "Another example"
   swap must not move anything below the phone. Two lines for the waiting line and the prompt, and an
   answer box as tall as the 2x2 option grid, the tallest shape. */
.phone .waiting { color: var(--text-2); font-size: 14px; line-height: 1.5; min-height: 3em; margin: 0; padding: 0 4px; }
.phone .waiting strong { color: var(--text); font-weight: 600; }
.phone .task { background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: grid; gap: 12px; }
.phone .kind { color: var(--primary); font: 600 11px/1 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; }
.phone .prompt { margin: 0; font: 600 20px/1.25 var(--font-display); min-height: 2.5em; overflow-wrap: anywhere; }
.phone .answer { min-height: 96px; display: grid; align-content: start; gap: 8px; }
.phone .options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone .opt { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 6px; line-height: 21px; text-align: center; font-size: 14px; white-space: nowrap; min-width: 0; overflow: hidden; }
.phone .opt.right { border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
/* Fill-in-the-blank: the answer as if typed into the field, with the caret still showing. */
.phone .blank { border: 1.5px solid var(--primary); border-radius: 10px; padding: 10px 12px; line-height: 21px; font-size: 15px; background: var(--surface); }
.phone .blank::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--primary); }
.phone .hint { color: var(--text-2); font-size: 13px; padding: 0 2px; }
/* Five-letter word guess: one tile per letter, coloured like the app's feedback. */
.phone .tiles { display: grid; grid-template-columns: repeat(5, 36px); gap: 6px; justify-content: start; }
.phone .tile { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; border: 1.5px solid var(--line); font: 700 16px/1 var(--font-display); color: var(--text-2); }
.phone .tile.near { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
.phone .tile.right { border-color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--text); }
.phone .go { display: block; text-align: center; padding: 13px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font: 600 15px/1.2 var(--font-display); }
.phone .streak { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; padding: 0 4px; }
.phone .streak b { color: var(--accent); font-family: var(--font-display); }
.button {
  display: inline-block; padding: 12px 20px; border-radius: 999px;
  background: var(--primary); color: var(--primary-ink);
  font: 600 16px/1.2 var(--font-display); text-decoration: none;
}
.button.ghost { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1.5px var(--primary); }
.join { margin-top: var(--space-lg); max-width: 460px; }
.join-label { display: block; margin-bottom: var(--space-sm); color: var(--text-2); font-size: 15px; }
.join-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.join-input {
  flex: 1 1 220px; min-width: 0; padding: 12px 16px; border-radius: 999px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  font: 400 16px/1.2 var(--font-body);
}
.join-input::placeholder { color: var(--text-2); opacity: 0.8; }
.join-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }
.join-button {
  flex: 0 0 auto; padding: 12px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--primary); color: var(--primary-ink); font: 600 16px/1.2 var(--font-display);
}
.join-button:hover { background: color-mix(in srgb, var(--primary) 88%, var(--text)); }
.join-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.join-button:disabled { opacity: 0.6; cursor: default; }
/* Full-width button on phones, where the label would otherwise wrap beside a squeezed input. */
@media (max-width: 480px) { .join-button { flex-basis: 100%; } }
/* Off-screen rather than display: none, which some bots check before filling a field. */
.join-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.join-status { min-height: 1.4em; margin: var(--space-sm) 0 0; color: var(--text-2); font-size: 15px; }
.join-status.ok { color: var(--success); }
.join-status.error { color: var(--text); }

.steps { display: grid; gap: 0; grid-template-columns: 1fr; margin: var(--space-md) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }
.steps li { padding: var(--space-lg) 0; border-bottom: 1px solid var(--line); min-width: 0; }
@media (min-width: 640px) { .steps li { border-bottom: 0; } }
.steps h3 { margin-top: 0; }
.steps p { margin: 0; color: var(--text-2); font-size: 15px; }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-lg); margin-top: var(--space-lg);
}
.panel h2 { margin-top: 0; font-size: 22px; }
.panel dl { margin: var(--space-md) 0 0; display: grid; gap: var(--space-sm) var(--space-md); grid-template-columns: auto 1fr; }
.panel dt { color: var(--text-2); font: 600 13px/1.6 var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; }
.panel dd { margin: 0; }
.panel ul { margin: var(--space-sm) 0 0; padding-left: 1.2em; }
.panel li { margin: 6px 0; }

article.doc h1 { font-size: clamp(30px, 6vw, 40px); margin-top: var(--space-md); }
article.doc .updated { color: var(--text-2); font-size: 15px; margin-bottom: var(--space-xl); }
article.doc h2 { font-size: 22px; margin-top: var(--space-xl); }
article.doc table { border-collapse: collapse; width: 100%; font-size: 15px; margin: var(--space-md) 0; }
article.doc th, article.doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
article.doc th { color: var(--text-2); font-weight: 600; }
article.doc code { font-size: 0.92em; background: color-mix(in srgb, var(--text) 7%, transparent); padding: 1px 5px; border-radius: 5px; }

footer.bottom {
  margin-top: var(--space-xxl); padding: var(--space-lg) 0 var(--space-xxl);
  border-top: 1px solid var(--line); color: var(--text-2); font-size: 14px;
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); justify-content: space-between;
}
footer.bottom a { color: var(--text-2); }
footer.bottom .links a { margin-right: var(--space-md); }

@media (prefers-reduced-motion: no-preference) {
  .button { transition: transform 120ms ease; }
  .button:active { transform: scale(0.98); }
}