/* APPROACH — privacy, support and the placeholder home page.
   The game's own look: Plotter 10 · Ochre, an approach chart printed on warm
   paper. Four colours taken from the app icon (paper, sand, rust, ink), hairline
   rules like a chart's grid, and the game's typeface (IBM Plex Mono) where the
   reader already has it, falling back to the system monospace. No web fonts and
   no external requests: a store reviewer opens these pages for years.

   The marketing page is a separate, later job (a dedicated session); this sheet
   only has to make the three current pages read as the game's. */

:root {
  --paper: #ede3cf;
  --sand:  #dccda9;
  --rust:  #a86a4a;
  --ink:   #3e342b;
  --muted: #7a6b5a;
  --rule:  rgba(62, 52, 43, 0.28);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --gut: clamp(1.25rem, 5vw, 3rem);
  color-scheme: light;
}

/* Night: the same chart under a red lamp. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #231e19;
    --sand:  #332b23;
    --rust:  #d08a64;
    --ink:   #ede3cf;
    --muted: #b3a48c;
    --rule:  rgba(237, 227, 207, 0.22);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  /* The chart grid: faint 1:25000 squares, like the board under the planes. */
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  color: var(--ink);
  font: 400 clamp(0.9rem, 0.35vw + 0.8rem, 1rem)/1.65 var(--mono);
}

a { color: var(--rust); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) var(--gut) 4rem;
  background: var(--paper);
  min-height: 100vh;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

.back {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.back:hover { color: var(--rust); }

/* The chart caption, as the title screen prints it. */
.caption {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  margin: 0 0 0.5rem;
  font-weight: 600;
  font-size: clamp(2rem, 7vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sub { margin: 0 0 2.5rem; color: var(--rust); }

h2 {
  margin: 2.75rem 0 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

p, li { overflow-wrap: anywhere; }
ul { padding-left: 1.2rem; }
li { margin-bottom: 0.4rem; }
li::marker { color: var(--rust); }

.lead {
  padding: 1rem 1.1rem;
  background: var(--sand);
  border-left: 3px solid var(--rust);
}

/* Summary table: scrolls inside itself on a phone, never the page. */
.table-wrap { overflow-x: auto; margin: 1rem 0; }
table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 0.85rem; }
th, td { padding: 0.55rem 0.6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; border-bottom: 1px solid var(--ink); }

.updated {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--muted);
}