/*
 * mcp.gatherrnd.app: the landing page (ADR-018 §5), in the consent page's
 * column, as Emma-Art's spec draws it (docs/design/screens/mcp-consent.md §7).
 * The consent page and its own sheet live on gatherrnd.app
 * (apps/api/public/consent.css). The tokens are the
 * landing site's (apps/api/public/site.css), from The Table design system:
 * daylight is Canvas under Ink, dark mode is Ink under Surface.
 */
:root {
  color-scheme: light dark;
  --canvas: #f7f4ed;
  --surface: #ffffff;
  --text: #20232a;
  --muted: #3f5f73;
  --border: #b6ada0;
  --primary: #2f5a52;
  --focus: #6e5aa7;
  --link: #2f5a52;
  --error: #a84c50;
  --shadow: 0 5px 16px #20232a24;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-size: 100%;
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #20232a;
    --surface: #2a2e37;
    --text: #ffffff;
    --muted: #83b9cb;
    --border: #83b9cb;
    --focus: #83b9cb;
    --link: #83b9cb;
    --error: #f0a8aa;
  }
}

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

body {
  margin: 0;
  overflow-wrap: break-word;
}

/* One column: 16-point gutters on a phone, 560 wide and centred above 600. */
.column {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

a {
  color: var(--link);
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* The wordmark: the app icon's G tile (its light gradient, the G in Pine), 28 points. */
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 700;
}

.g-tile {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(160deg, #fbf7ee, #b9d3c8);
  color: #2f5a52;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

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

p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 24px;
}

code {
  font-size: 0.95rem;
  word-break: break-all;
}

/*
 * The landing page at the root: the consent column, a little wider, with the
 * address as the one thing the page is for. No scripts, so the address is
 * selected whole on a tap (user-select: all) and copied by the browser's own
 * means; there is no copy button to promise what we cannot do.
 */
.landing {
  max-width: 640px;
}

.landing h1 {
  font-size: 28px;
  line-height: 32px;
}

.lede {
  font-size: 18px;
  line-height: 26px;
  color: var(--muted);
  margin-bottom: 8px;
}

.landing section {
  margin-top: 36px;
}

.landing h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.landing h3 {
  margin: 20px 0 6px;
  font-size: 16px;
  line-height: 24px;
}

/* The address: a Surface card around the URL, large and monospaced. It fits
   on one line at 390 points; narrower, it breaks only before /mcp. */
.address {
  display: block;
  margin: 12px 0 8px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.address code {
  display: block;
  font-size: 17px;
  line-height: 26px;
  color: var(--link);
  word-break: normal;
  overflow-wrap: normal;
  -webkit-user-select: all;
  user-select: all;
}

/* The steps: the landing site's numbered circles, in Pine. */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding: 4px 0 4px 44px;
  min-height: 36px;
  font-size: 16px;
  line-height: 24px;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.foot {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}