/* The shapes of the app, in CSS. Colours come only from tokens.css, which is
 * generated from Design/Palette.swift. Nothing here names a hex. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--background);
  color: var(--ink);
  font-family: var(--system);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  line-height: 1.5;
}

a { color: inherit; }

/* The bar: the app's centred title, no chrome. */
.bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--unit) * 1.5);
  padding: calc(var(--unit) * 3) calc(var(--unit) * 2) calc(var(--unit) * 2);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
}
.bar img { width: 28px; height: 28px; border-radius: 7px; }

main {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--unit) * 2) calc(var(--unit) * 2) calc(var(--unit) * 6);
}

/* Hero */
.hero { text-align: center; padding: calc(var(--unit) * 4) 0 calc(var(--unit) * 5); }
.hero .icon {
  width: 128px; height: 128px;
  border-radius: 28px;
  display: block;
  margin: 0 auto calc(var(--unit) * 3);
}
/* The kit (docs/release/launch-kit-2026-09-24.md): a warm editorial serif for short headings, the system sans for everything else. */
:root { --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; }
.eyebrow { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--secondary); margin: 0 0 var(--unit); }
.group-title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 4.5vw, 2rem); letter-spacing: -0.01em; margin: 0 0 var(--unit); }
.group-lede { color: var(--secondary); margin: 0 0 calc(var(--unit) * 3); max-width: 38rem; }
.maker .key { margin-top: calc(var(--unit) * 2); }
/* The closing line (Ryan, 2026-09-24): beneath the demo once it exists; above the maker note until then. */
.closing { font-family: var(--serif); font-size: clamp(1.25rem, 3.5vw, 1.6rem); color: var(--ink); margin: 0 0 calc(var(--unit) * 4); }
h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.lede {
  color: var(--secondary);
  font-size: 1.125rem;
  max-width: 34rem;
  margin: calc(var(--unit) * 2) auto 0;
}

/* The one button: the app's Ask key. Mint ground, dark ink, a pill. */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--unit) * 1.5);
  margin-top: calc(var(--unit) * 4);
  padding: calc(var(--unit) * 2) calc(var(--unit) * 4);
  min-width: 18rem;
  max-width: 100%;
  border-radius: 999px;
  background: var(--mint);
  color: var(--sunken);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
}
.key:hover, .key:focus-visible { background: var(--mintGlow); }
.key:active { transform: translateY(1px); }
.note {
  color: var(--secondary);
  font-size: 0.9375rem;
  margin-top: calc(var(--unit) * 1.5);
}

/* The grouped list: the app's Rants cards. */
.group {
  background: var(--raised);
  border-radius: 20px;
  padding: 0 calc(var(--unit) * 2.5);
  margin-top: calc(var(--unit) * 3);
}
.row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: calc(var(--unit) * 2);
  padding: calc(var(--unit) * 2.5) 0;
  border-bottom: 1px solid var(--sunken);
}
.row:last-child { border-bottom: 0; }
.row svg { width: 32px; height: 32px; margin-top: 2px; }
.row h2 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.row p { color: var(--secondary); margin-top: calc(var(--unit) / 2); }

/* Chips: the app's topic words. */
.chips { display: flex; flex-wrap: wrap; gap: var(--unit); margin-top: calc(var(--unit) * 1.5); }
.chip {
  border: 1px solid var(--secondary);
  border-radius: 999px;
  padding: calc(var(--unit) / 2) calc(var(--unit) * 1.5);
  font-size: 0.9375rem;
  color: var(--mint);
}
.chip.on { background: var(--mint); color: var(--sunken); border-color: var(--mint); }

/* The word that is rolling: orange, and nothing else is. */
.rolling { color: var(--record); font-weight: 600; }

/* Reading pages */
.reader h1 { font-size: clamp(1.75rem, 5vw, 2.25rem); margin-top: calc(var(--unit) * 2); }
.reader .meta { color: var(--secondary); font-size: 0.9375rem; margin-top: var(--unit); }
.reader h2 { font-size: 1.25rem; font-weight: 600; margin: calc(var(--unit) * 4) 0 var(--unit); }
.reader p, .reader li { color: var(--ink); margin-top: var(--unit); max-width: 62ch; }
.reader ul { padding-left: 1.25rem; }
.reader .summary {
  background: var(--raised);
  border-radius: 20px;
  padding: calc(var(--unit) * 2.5);
  margin-top: calc(var(--unit) * 3);
  color: var(--ink);
}
.reader a { color: var(--mint); }

/* Footer */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--unit) * 2);
  padding: calc(var(--unit) * 5) calc(var(--unit) * 2) calc(var(--unit) * 6);
  color: var(--secondary);
  font-size: 0.875rem;
  text-align: center;
}
footer img { width: 120px; opacity: 0.85; }
footer .wordmark-text { font-weight: 700; letter-spacing: 0.02em; color: var(--ink); opacity: 0.85; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--unit) * 2.5); }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .key:active { transform: none; }
}