/* Shared styling for the answer pages (/free-bouldering-log/, /offline-no-account/,
   /bouldering-log-without-social/). Written ONCE and linked from each page rather than
   inlined three times — see lessons/design-system.md ("a modifier written once exists
   hundreds of times"): the landing and privacy pages each carry their own inline <style>
   because they predate this set, but any new page links here.

   CSP: cloudflare/landing/_headers sets `default-src 'self'`, so a same-origin stylesheet
   is allowed. Keep it same-origin — never an external CDN. No JavaScript anywhere. */

@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage.woff2") format("woff2");
  font-weight: 600 800; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #F4F2EC;            /* climbing chalk */
  --surface: #FBFAF6;
  --fg: #14121C;            /* rock in shadow */
  --fg-soft: #4a4754;
  --accent: #5957D6;        /* the brand / the boulder */
  --indigo-deep: #3d3bb0;
  --send: #2fb350;
  --line: rgba(20, 18, 28, .12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #100E16; --surface: #1a1822; --fg: #ECEAF3; --fg-soft: #a9a6b8;
    --accent: #8d8bf6; --line: rgba(255, 255, 255, .12);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg); letter-spacing: -0.01em;
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }

/* ── Masthead (mirrors the landing) ───────────────────────────── */
.mast { display: flex; align-items: center; gap: .6rem; padding: 1.6rem 0; }
.mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--accent);
  display: grid; place-items: center; flex: none; box-shadow: 0 2px 0 var(--indigo-deep);
}
.mark svg { width: 18px; height: 18px; }
.wordmark {
  font-family: "Bricolage", system-ui, sans-serif; font-weight: 800;
  font-size: 1.3rem; letter-spacing: -0.02em; color: var(--fg); text-decoration: none;
}

/* ── Type ─────────────────────────────────────────────────────── */
h1 {
  font-family: "Bricolage", -apple-system, system-ui, sans-serif; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(1.9rem, 5.5vw, 2.7rem);
  margin: 1rem 0 .75rem;
}
h2 {
  font-family: "Bricolage", -apple-system, system-ui, sans-serif; font-weight: 700;
  letter-spacing: -0.02em; font-size: 1.3rem; margin: 2.25rem 0 .6rem;
}
p { margin: 0 0 1rem; }
.lede { font-size: 1.12rem; color: var(--fg-soft); }
a { color: var(--accent); }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
strong { font-weight: 650; }

ul { padding-left: 1.15rem; margin: 0 0 1rem; }
li { margin-bottom: .4rem; }

/* ── Fact table ───────────────────────────────────────────────── */
/* overflow-x on the WRAPPER, never the body: a wide table scrolls inside its own box so the page
   itself never scrolls sideways. */
.tablewrap { overflow-x: auto; margin: 0 0 1.25rem; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .97rem; }
caption { text-align: left; color: var(--fg-soft); font-size: .9rem; padding-bottom: .5rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
thead th { font-weight: 650; border-bottom: 2px solid var(--line); }
td.yes { color: var(--send); font-weight: 650; }

/* On a phone the scroll container alone is not enough: it works, but the Pro column sits off-screen
   and nothing tells the reader to scroll — so the comparison silently reads as if Pro were blank.
   Verified at 390px (iframe, because --window-size lies about narrow viewports on macOS —
   lessons/automation.md). Drop min-width and tighten the cells so all three columns FIT instead. */
@media (max-width: 34rem) {
  table { min-width: 0; font-size: .84rem; }
  th, td { padding: .5rem .35rem; }
  thead th:not(:first-child), tbody td:not(:first-child) { text-align: center; width: 4.2rem; }
}

/* ── Callout + CTA ────────────────────────────────────────────── */
.note {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem 1.15rem; margin: 1.5rem 0;
}
.note p:last-child { margin-bottom: 0; }

.cta { margin: 2rem 0 1rem; }
.appstore-badge {
  display: inline-block; line-height: 0; border-radius: 9px;
  transition: transform .15s ease, opacity .15s ease;
}
.appstore-badge:hover { transform: translateY(-1px); opacity: .9; }
.appstore-badge:active { transform: translateY(1px); }
.appstore-badge svg { display: block; }
.cta-note { display: block; color: var(--fg-soft); font-size: .92rem; margin-top: .7rem; }

/* ── Footer ───────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 2rem 0 3rem; margin-top: 2.5rem; }
footer .ft {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  color: var(--fg-soft); font-size: .92rem;
}
footer a { color: var(--fg-soft); text-decoration: none; }
footer a:hover { color: var(--accent); }