/*
 * Shared styling for every static page on kanji.convocopilot.app: the two
 * legal pages, the five kanji lists, 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 lists 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: #fdfaf5;
  --surface2: #f7eee6;
  --line: #95796a;
  --line-soft: #e2d2c4;
  --ink: #241a17;
  --muted: #52413a;
  --accent-ink: #b23c14;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #141416;
    --surface2: #1e1e22;
    --line: #8f8f98;
    --line-soft: #36363d;
    --ink: #f9f5f0;
    --muted: #cbc6bf;
    --accent-ink: #ff8a5c;
  }
}

* {
  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 list 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;
}

/* The guide's summary box carries a second paragraph — the caveat that
   the method in it is our opinion — so the two need parting. */
.summary p + p {
  margin-top: 0.75rem;
}

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 kanji faces.
 *
 * Copied into public/fonts by `scripts/build-seo.mjs` out of the app's own
 * bundle, and subsetted to the drill set plus kana and Latin — around a
 * megabyte each rather than the sixteen the sources weigh.
 *
 * Serving them is not decoration, and the reason is sharper than it is for
 * kana. Through Han unification, a browser on a machine set to a Chinese
 * locale draws 直, 令 and 骨 with their Chinese shapes unless a Japanese face
 * is pinned — so a kanji list left to the system stack teaches some readers
 * the wrong characters. 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 character 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: "KanjiMincho";
  src: url("/fonts/KanjiMincho.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "KanjiGothic";
  src: url("/fonts/KanjiGothic.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 kanji or a reading mentioned in running prose, so it is not set in the
   body face — which on a Chinese-locale machine is not a Japanese face. */
.k {
  font-family: "KanjiMincho", serif;
  font-size: 1.15em;
}

/*
 * The list tables scroll rather than shrink.
 *
 * Five columns — character, meaning, two readings and an example word — do not
 * fit a phone at a readable size, and a glyph squeezed below legibility on a
 * page whose whole job is showing the glyph is the wrong trade. The character
 * column is sticky so it stays put while the readings scroll past it.
 */
.table-scroll {
  margin: 1.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/*
 * On a wide screen the table breaks out of the prose column.
 *
 * `main` is 44rem because that is a readable line length, and a five-column
 * table is not prose — clipping its last column behind a scrollbar on a
 * 1440px display, with half the window empty beside it, is the wrong answer
 * to a constraint that only exists for text.
 */
@media (min-width: 52rem) {
  .table-scroll {
    --bleed: min(58rem, calc(100vw - 4rem));
    width: var(--bleed);
    margin-left: calc(50% - var(--bleed) / 2);
  }
}

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

.kanji-table.words {
  min-width: 22rem;
}

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

.kanji-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  border-bottom-color: var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/*
 * `width: 1%` on the columns that should be snug.
 *
 * An auto-layout table hands its slack to whichever column the browser feels
 * like, and left alone it gave the kun'yomi column three hundred pixels for a
 * hundred-pixel reading. A 1% width resolves to min-content instead, so the
 * glyph and the two reading columns shrink to fit and the meaning and example
 * columns — the ones that actually wrap — split what is left.
 */
.glyph-cell {
  width: 1%;
  padding-left: 0 !important;
}

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

/* A compound is two to four characters wide, so it cannot take the same size. */
.glyph.compound {
  font-size: 1.5rem;
  white-space: nowrap;
}

.meaning {
  min-width: 8rem;
  padding-right: 1.5rem !important;
}

/*
 * The extra glosses.
 *
 * These are the other answers a meaning question accepts, which is worth
 * showing — but the first one is the answer the drill asks for, so they are
 * set back rather than listed as equals.
 */
.also {
  color: var(--muted);
  font-size: 0.8125rem;
}

.also::before {
  content: "· ";
}

/*
 * Readings, set in the bundled face because they are kana.
 *
 * `nowrap` on the on'yomi and kun'yomi columns: a reading broken across two
 * lines at the interpunct reads as two readings.
 */
.reading {
  width: 1%;
  font-family: "KanjiMincho", serif;
  font-size: 1.0625rem;
  white-space: nowrap;
}

/* The example word: the kanji, its reading, and what it means, stacked. */
.example {
  min-width: 9rem;
  line-height: 1.35;
}

.ex-word {
  font-family: "KanjiMincho", serif;
  font-size: 1.125rem;
  margin-right: 0.4rem;
  white-space: nowrap;
}

.ex-read {
  font-family: "KanjiMincho", serif;
  color: var(--muted);
  font-size: 0.9375rem;
  white-space: nowrap;
}

.ex-gloss {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
}

/*
 * The confusable groups.
 *
 * One row per group, characters side by side with their meanings under them —
 * which is the comparison the section is about. A table would imply the
 * columns mean something; they do not, the groups are different sizes.
 */
.lookalikes {
  margin: 1.5rem 0;
  display: grid;
  gap: 0.75rem;
}

.lookalike-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 0.5rem;
  background: var(--surface2);
  list-style: none;
}

.lookalike-group li {
  margin: 0;
  min-width: 4.5rem;
  flex: 1;
  text-align: center;
}

.gloss {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

/* The same three characters in two faces. The 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 characters are being compared, and a face whose glyphs
 * run a little wider than the other's wrapping onto a second line makes that
 * column look like a different comparison rather than the same one.
 */
.face {
  font-size: 2.75rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  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(2, 1fr);
  }
}

/*
 * Print.
 *
 * The list pages 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: #c9beb4;
    --ink: #000000;
    --muted: #444444;
    --accent-ink: #000000;
  }

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

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

  .table-scroll {
    overflow: visible;
  }

  .kanji-table {
    min-width: 0;
  }

  /* Sticky headers repeat as a header row instead, which is what paper wants. */
  .kanji-table th {
    position: static;
  }

  .kanji-table tr,
  .lookalike-group,
  .faces figure {
    break-inside: avoid;
  }

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