/* thumbfulness web pages — the app's "Studio" mode, ported (DEVELOPMENT_PLAN.md §2.1, §2.4).
   Palette values are copied from thumbfulness/DesignSystem/Theme.swift; keep them in sync.
   Self-contained on purpose: no fonts, images, or scripts to fetch, so these pages load
   on any host and survive being opened from a file:// URL.

   One deliberate departure from Theme.swift, and only one. The app's Studio accent is
   signal-orange #FF4A00; these pages use the *sitting* screen's teal #1A8F8F instead,
   because teal is what thumbfulness actually looks like — it is the accent on the icon
   (D36), the colour a lap flashes when it passes a best (§6.3), and the only hue on the
   black screen the app is (§2.2). Orange here would make this page indistinguishable from
   brhythm's, which shares the same ported stylesheet.

   The light-mode value is darkened to #146E6E. #1A8F8F on #F2F2F0 is 3.5:1, under the
   4.5:1 WCAG AA needs for body text, and these are pages of body-text links. Darkened it
   is 5.4:1; on the dark ground the token value is already 4.8:1 and stands unchanged. */

:root {
  --bg: #F2F2F0;
  --card: #FAFAF8;
  --border: #E4E4E0;
  --text: #1A1A1A;
  --secondary: #6E6E6A;
  --accent: #146E6E;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --card: #1C1C1B;
    --border: #2C2C2A;
    --text: #F2F2F0;
    --secondary: #8F8F8A;
    --accent: #1A8F8F;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0 20px 64px;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.65;
}

main {
  max-width: 640px;
  margin: 0 auto;
}

/* Masthead ------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 0 40px;
}

.wordmark {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}

.masthead nav a {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
}

/* Type ----------------------------------------------------------------- */

h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 8px;
}

/* Uppercase section label with a trailing rule — the Studio signature. */
h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin: 40px 0 12px;
}

h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 28px 0 6px;
}

p, li { margin: 0 0 14px; }

ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

li { margin-bottom: 6px; }

strong { font-weight: 600; }

.dateline {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 32px;
}

.lede {
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 32px;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

a:hover { text-decoration-thickness: 2px; }

/* Cards ---------------------------------------------------------------- */

.callout, .card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px;
  margin: 0 0 24px;
}

.callout p:last-child, .card p:last-child, .card ul:last-child { margin-bottom: 0; }

.callout { border-left: 2px solid var(--accent); }

/* Footer --------------------------------------------------------------- */

footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--secondary);
}

footer p { margin-bottom: 6px; }

footer a { color: var(--secondary); }