/*
 * Shared styling for every static page on kana.convocopilot.app: the two legal
 * pages, the two syllabary charts, and the guide.
 *
 * These are plain static files in `public/`, not part of the Expo bundle. For
 * the legal pages that is a requirement — a store reviewer, and anyone tapping
 * the links in Settings, must be able to reach the policy without the app's
 * JavaScript loading first. For the charts and the guide it is the point: the
 * drill is `output: 'single'`, so every word of it arrives through a bundle,
 * and a crawler or a link preview sees nothing at all.
 *
 * The legal pages are hand-written and the rest are generated by
 * `scripts/build-seo.mjs`. Both kinds load this file.
 *
 * The palette is the app's own — see app/src/theme/tokens.ts. Duplicated
 * rather than imported, because nothing compiles these; keep the two in step
 * by hand if the palette moves.
 */

:root {
  color-scheme: light dark;

  --surface: #fffdf9;
  --surface2: #f5f1e8;
  --line: #8f8877;
  --line-soft: #ddd6c6;
  --ink: #1a1a2e;
  --muted: #4a465e;
  --accent-ink: #7d5200;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0e1322;
    --surface2: #182036;
    --line: #5f6d96;
    --line-soft: #2a3352;
    --ink: #f4f6fb;
    --muted: #b3bdd8;
    --accent-ink: #ffc94b;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2.5rem 1.25rem 4rem;
  background: var(--surface);
  color: var(--ink);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 1rem;
  /* Long-form prose, so looser than the app's 1.45. */
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 44rem;
  margin: 0 auto;
}

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/*
 * The wordmark above the title.
 *
 * Plain text on the two legal pages, because those open in an in-app browser
 * when they are reached from Settings, and a link to / loaded the web build of
 * the drill inside the app. The chart and guide pages are only ever reached
 * from the web and do link it — see `.eyebrow a` below. The margin and the
 * color are set here because a <p> would otherwise take the UA top margin and
 * the body ink.
 */
.eyebrow {
  display: inline-block;
  margin: 0 0 1.5rem;
  color: var(--accent-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  margin: 2.5rem 0 0.5rem;
  font-size: 1.1875rem;
  line-height: 1.25;
}

.updated {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

/*
 * The one-line answer, above the fold. Most people opening a privacy policy
 * for a drill app want exactly this sentence and nothing after it.
 */
.summary {
  margin: 2rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent-ink);
  border-radius: 0.5rem;
  background: var(--surface2);
}

.summary p {
  margin: 0;
}

ul {
  padding-left: 1.25rem;
}

li {
  margin: 0.35rem 0;
}

hr {
  margin: 3rem 0 1.5rem;
  border: 0;
  border-top: 1px solid var(--line-soft);
}

footer {
  color: var(--muted);
  font-size: 0.875rem;
}

footer p {
  margin: 0.35rem 0;
}

@media (min-width: 40rem) {
  body {
    padding: 4rem 2rem 6rem;
  }

  h1 {
    font-size: 2.5rem;
  }
}

/* ------------------------------------------------------------------------ *
 * The kana faces.
 *
 * Copied into public/fonts by `scripts/build-seo.mjs` out of the app's own
 * bundle, and subsetted to kana plus basic Latin — around 95KB each rather
 * than the 8MB the sources weigh.
 *
 * Serving them is not decoration. Android ships no Mincho face at all, so a
 * chart set in a system stack would be silently substituted into a gothic
 * there, and the shapes a reader studies would not be the shapes the drill
 * shows them. That is the same reasoning as `app/src/theme/fonts.ts`; the
 * family names must match the filenames the build copies.
 *
 * `swap` rather than `block`: on these pages a kana in a fallback face for a
 * moment is a cosmetic problem, where in the drill it would be a wrong answer.
 * ------------------------------------------------------------------------ */

@font-face {
  font-family: "KanaMincho";
  src: url("/fonts/KanaMincho.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "KanaKyokasho";
  src: url("/fonts/KanaKyokasho.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "KanaBrush";
  src: url("/fonts/KanaBrush.ttf") format("truetype");
  font-display: swap;
}

/* The eyebrow is a link back to the drill on the pages that are not legal. */
.eyebrow a {
  color: inherit;
  text-decoration: none;
}

.eyebrow a:hover {
  text-decoration: underline;
}

.lede {
  margin: 1rem 0 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted);
}

/*
 * The one link out of a reference page and into the drill.
 *
 * Built on `.summary` rather than styled as a button: these pages are read,
 * and a button dropped into running prose reads as an advertisement inside an
 * article. The accent rule down the left is enough to mark it as the one place
 * the page is asking for something.
 */
.cta {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent-ink);
  border-radius: 0.5rem;
  background: var(--surface2);
}

.cta p {
  margin: 0;
}

.cta-link {
  display: inline-block;
  font-weight: 600;
  white-space: nowrap;
}

.cta-secondary {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* A kana mentioned in running prose, so it is not set in the body face. */
.k {
  font-family: "KanaMincho", serif;
  font-size: 1.15em;
}

/*
 * Charts scroll rather than shrink.
 *
 * Five columns at the minimum readable cell is about 17rem, which fits the
 * narrowest phone — but the voiced table on a 320px screen with a long romaji
 * can still overflow, and a glyph squeezed below legibility on a page whose
 * whole job is showing the glyph is the wrong trade.
 */
.table-scroll {
  margin: 1.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.kana-table {
  width: 100%;
  min-width: 17rem;
  border-collapse: collapse;
  table-layout: fixed;
}

/*
 * No row or column headers, on purpose — every cell carries its own reading.
 * See the note in scripts/build-seo.mjs: edge labels ask a reader to compose
 * "shi" out of an s and an i, which is not what the character says.
 */
.kana-table td {
  border: 1px solid var(--line-soft);
  padding: 0.6rem 0.25rem 0.5rem;
  text-align: center;
  vertical-align: middle;
  background: var(--surface2);
}

.kana-table td.empty {
  background: transparent;
  border-color: transparent;
}

.glyph {
  display: block;
  font-family: "KanaMincho", serif;
  font-size: 1.9rem;
  line-height: 1.1;
}

.roma {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/*
 * The small ya/yu/yo of a yōon.
 *
 * Sized at 0.6 of the character it follows, which is roughly what a Japanese
 * face draws — the size difference *is* the distinction between きゃ (one
 * beat) and きや (two), so rendering them the same size would make the table
 * say the wrong thing.
 */
.small-y {
  font-size: 0.6em;
  vertical-align: baseline;
}

/* The irregular-readings table, which does have headers — it is prose in rows. */
.note-table {
  width: 100%;
  min-width: 20rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.note-table th,
.note-table td {
  border-bottom: 1px solid var(--line-soft);
  padding: 0.6rem 0.75rem 0.6rem 0;
  text-align: left;
  vertical-align: baseline;
}

.note-table th {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.note-table .glyph-cell {
  width: 3rem;
}

.note-table .glyph {
  font-size: 1.6rem;
}

/* The same three kana in three hands. The whole point is that they differ. */
.faces {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

.faces figure {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--surface2);
  text-align: center;
}

/*
 * `nowrap` because the three characters are being compared, and a face whose
 * glyphs run a little wider than the others wrapping onto a second line makes
 * that column look like a different comparison rather than the same one.
 */
.face {
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.faces figcaption {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (min-width: 40rem) {
  .faces {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*
 * Print.
 *
 * The charts tell people to print them, so they had better print. The dark
 * palette is not applied on paper — `prefers-color-scheme` can report dark on
 * a machine printing to a white sheet — and everything that is a link on
 * screen and useless on paper comes out.
 */
@media print {
  :root {
    color-scheme: light;
    --surface: #ffffff;
    --surface2: #ffffff;
    --line-soft: #b9b3a4;
    --ink: #000000;
    --muted: #444444;
    --accent-ink: #000000;
  }

  body {
    padding: 0;
    font-size: 11pt;
  }

  .cta,
  .summary,
  footer,
  hr {
    display: none;
  }

  .table-scroll {
    overflow: visible;
  }

  .kana-table,
  .note-table,
  .faces figure {
    break-inside: avoid;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}