/* Gapfyre — shared styles for the published legal and support pages.
 *
 * Dark only, whatever the viewer's system preference: the app's warm near-black
 * with its flame accent and wordmark gold, so the site reads as the app does.
 */

:root {
  color-scheme: dark;

  --bg:        #14110f;
  --surface:   #1f1a16;
  --border:    #3d332b;
  --text:      #f5ece1;
  --muted:     #a89988;
  --primary:   #ff7d47;
  --primary-h: #ffa079;
  --rule:      #2b2420;
  --mark:      #f5ece1;
  --gold:      #e8b64a;
  --gold-h:    #f4d37a;

  --measure: 34rem;
  --radius: 10px;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 var(--sans);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
}

/* ---- masthead ---------------------------------------------------------- */

header.top {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3rem;
}

header.top .wrap {
  padding-top: 1.75rem;
  padding-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}

.wordmark {
  font-size: 1.375rem;
  text-decoration: none;
  margin-right: auto;
}

.wordmark:hover { color: var(--gold-h); }

/* ---- lockup ------------------------------------------------------------ */

/* The app's lockup: mark.svg has a capital G cut out of the flame, so the
 * flame is set as the word's own first letter and the type supplies "apfyre".
 * Ported from client/src/index.css (.lockup-anchored), which explains the
 * measurements; they are off the 1254-unit viewBox, where the G's cap height
 * is 456, its advance 546, its left inset 419 and its baseline 274 above the
 * canvas foot. Everything is in em, so a lockup is sized by font-size alone.
 *
 * The mark is out of flow on a zero-height box parked on the text baseline,
 * so the flame's overshoot hangs into the header's padding rather than
 * pushing the bar open. */
.lockup {
  --cap: .7em;
  --unit: calc(var(--cap) / 456);
  display: flex;
  align-items: baseline;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.2;
  color: var(--gold);
  /* The flame's ink starts 216 units left of the G (x 203 against 419), so
     without this it hangs outside the text column — onto the screen edge on
     a phone. */
  padding-left: calc(216 * var(--unit));
}

@supports (font-size: 1cap) {
  .lockup { --cap: 1cap; }
}

.lockup-mark {
  position: relative;
  display: block;
  height: 0;
  /* The G's advance plus clearance, so the 'a' doesn't tuck into its aperture. */
  width: calc(546 * var(--unit) + .055em);
  flex-shrink: 0;
}

.lockup-mark img {
  position: absolute;
  left: calc(-419 * var(--unit));
  bottom: calc(-274 * var(--unit));
  width: calc(1254 * var(--unit));
  height: auto;
  max-width: none;
}

/* The home page's heading: the lockup at full size, with the flame's
   overshoot above the letters reserved so it can't run into the header. */
.lockup-hero {
  font-size: clamp(2.6rem, 12vw, 3.5rem);
  padding-top: calc(916 * var(--unit) - 1.05 * var(--cap));
  margin-bottom: 1rem;
}

nav.top-nav {
  display: flex;
  gap: 1.25rem;
  font-size: 0.9375rem;
}

nav.top-nav a {
  color: var(--muted);
  text-decoration: none;
}

nav.top-nav a:hover { color: var(--primary); }
nav.top-nav a[aria-current='page'] { color: var(--text); font-weight: 500; }

/* ---- type -------------------------------------------------------------- */

h1 {
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.022em;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 600;
  margin: 2.75rem 0 0.75rem;
  scroll-margin-top: 1.5rem;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
}

p, ul, ol { margin: 0 0 1.05rem; }

ul, ol { padding-left: 1.35rem; }

li { margin-bottom: 0.45rem; }

li::marker { color: var(--muted); }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-h); }

strong { font-weight: 600; }

code {
  font: 0.875em var(--mono);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

.lede {
  font-size: 1.0625rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
}

.updated {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0 0 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

/* ---- table of contents ------------------------------------------------- */

.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem;
  margin: 0 0 2.5rem;
}

.toc h2 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.625rem;
  font-weight: 600;
}

.toc ol {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.toc li { margin-bottom: 0.3rem; }

/* ---- callout ----------------------------------------------------------- */

.note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
}

.note p:last-child { margin-bottom: 0; }

/* ---- summary table ----------------------------------------------------- */

.scroll-x { overflow-x: auto; margin: 0 0 1.5rem; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
  min-width: 30rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.625rem 0.875rem 0.625rem 0;
  border-bottom: 1px solid var(--rule);
}

th {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom-color: var(--border);
}

/* ---- home index -------------------------------------------------------- */

.cards { display: grid; gap: 0.75rem; margin: 2rem 0 0; padding: 0; list-style: none; }

.cards a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem;
  text-decoration: none;
  color: inherit;
}

.cards a:hover { border-color: var(--primary); }

.cards strong { display: block; margin-bottom: 0.2rem; color: var(--primary); }
.cards span { color: var(--muted); font-size: 0.9375rem; }

/* ---- what's inside ----------------------------------------------------- */

.inside { margin-top: 2.5rem; }
.inside h2 { margin-top: 0; }

.kinds {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.kinds li {
  margin: 0;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--surface);
}

.kinds strong { display: block; color: var(--gold); }
.kinds span { color: var(--muted); font-size: 0.9375rem; }

.topics { margin: 0 0 1.75rem; }
.topics dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 1rem;
}
.topics dd { margin: 0.2rem 0 0; font-size: 0.9375rem; }

/* ---- tester QR --------------------------------------------------------- */

/* The QR keeps its own white quiet zone, so it scans in dark mode too. */
.qr { margin: 1.5rem 0 2rem; text-align: center; }
.qr img {
  display: block;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.qr figcaption { margin-top: 0.6rem; color: var(--muted); font-size: 0.9375rem; }

/* ---- footer ------------------------------------------------------------ */

footer.bottom {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}

footer.bottom p { margin-bottom: 0.4rem; }

@media (max-width: 30rem) {
  body { font-size: 16px; }
  h1 { font-size: 1.625rem; }
  .wrap { padding-bottom: 3.5rem; }
}

/* ---- desktop ----------------------------------------------------------- */

/* Below this the site is one reading column, centred. Above it the header and
 * main share a wider frame: running text keeps its measure, left-aligned under
 * the wordmark, while the home cards spread across the frame and the long
 * pages move their contents into a sticky column on the right. */
@media (min-width: 60rem) {
  :root {
    --measure: 36rem;
    --frame: 64rem;
  }

  .wrap {
    max-width: var(--frame);
    padding-left: 2rem;
    padding-right: 2rem;
  }

  main.wrap > * { max-width: var(--measure); }

  .lockup-hero { font-size: 4.5rem; }

  .cards {
    max-width: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .cards:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards li { display: flex; }
  .cards a { flex: 1; padding: 1.375rem 1.5rem; }

  /* The question kinds and topic list use the frame; prose keeps its measure. */
  main.wrap > .inside { max-width: none; }
  .inside > p { max-width: var(--measure); }
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .topics {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    column-gap: 2rem;
    row-gap: 0.875rem;
    margin: 2rem 0;
  }
  .topics dt { margin: 0; padding-top: 0.2rem; }
  .topics dd { margin: 0; }

  /* privacy, terms, support: head and body in the reading column, contents
     beside them for the length of the page. */
  main.doc {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) minmax(13rem, 1fr);
    grid-template-areas:
      "head toc"
      "body toc"
      "foot toc";
    grid-template-rows: auto 1fr auto;
    column-gap: 3.5rem;
  }

  main.doc > * { max-width: none; }

  .doc-head { grid-area: head; margin-bottom: 2.75rem; }
  .doc-head > :last-child { margin-bottom: 0; }
  .doc-body { grid-area: body; }
  .doc-body > :first-child { margin-top: 0; }
  main.doc > footer.bottom { grid-area: foot; }

  main.doc > .toc {
    grid-area: toc;
    align-self: start;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    margin: 0;
  }

  .toc ol { font-size: 0.875rem; }
}