/*
 * The legal pages' one stylesheet. The pages carry no style and no script.
 *
 * The colours are the app's own, from app/lib/design/colors.dart and
 * tokens.dart, light and dark; build.test.mjs checks that every pair used
 * here meets WCAG AA in both themes. The fonts are the app's own too:
 * Newsreader heads, Figtree is read.
 */

/* Newsreader, under the SIL Open Font Licence: fonts/OFL-Newsreader.txt */
@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("fonts/Newsreader-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Figtree, under the SIL Open Font Licence: fonts/OFL-Figtree.txt */
@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/Figtree-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  /* Sand, the ground; paper, the sheet; paper deep, a table's head. */
  --ground: #F4EDE4;
  --paper: #FBF8F3;
  --paper-deep: #EDE5DA;
  /* Ink. */
  --text: #241F1C;
  /* The hairline token: ink at 8 percent. */
  --hairline: rgba(36, 31, 28, 0.08);
  /* Clay: a link's underline and a bullet. */
  --accent: #B26B4F;
  /* Clay at 26 percent: the light a screen's header casts in the app. */
  --bleed: rgba(178, 107, 79, 0.26);
  /* Amber, as in the app's callout: the draft notice. */
  --notice-from: rgba(217, 160, 91, 0.26);
  --notice-to: rgba(217, 160, 91, 0.16);
  --notice-edge: rgba(217, 160, 91, 0.34);
  /* Amber, quieter: a note in square brackets. */
  --note: rgba(217, 160, 91, 0.24);
  /* The disc behind the mark: paper by day. */
  --mark-disc: #FBF8F3;
  /* The card shadow, cast in the app's shadow tint. */
  --shadow: 0 6px 18px rgba(107, 74, 60, 0.09), 0 1px 2px rgba(107, 74, 60, 0.04);
  /* The sheet's padding: none on a phone, where there is no sheet. */
  --pad: 0px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Night, paper night and paper deep night. */
    --ground: #1A1715;
    --paper: #262220;
    --paper-deep: #211D1B;
    /* Bone. */
    --text: #F0E8DE;
    --hairline: rgba(240, 232, 222, 0.1);
    --bleed: rgba(178, 107, 79, 0.22);
    --notice-from: rgba(217, 160, 91, 0.32);
    --notice-to: rgba(217, 160, 91, 0.24);
    --note: rgba(217, 160, 91, 0.24);
    /* Sand at night: her hair is a deep brown and would vanish on the dark. */
    --mark-disc: #F4EDE4;
    --shadow: none;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  /* The app's header light: a circle of clay fading out, near the top right. */
  background: var(--ground) radial-gradient(circle 210px at calc(100% - 90px) 70px, var(--bleed), transparent) no-repeat;
  color: var(--text);
  font-family: "Figtree", sans-serif;
  /* 17px on a phone, rising to 19px on a wide screen. */
  font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  overflow-wrap: break-word;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.15em;
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  padding: 0.55em 1.1em;
  border-radius: 999px;
  background: var(--text);
  color: var(--ground);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* The column: 20px from each edge on a phone, as in the app, and never
   wider than a line of about 68 characters. */
.site-header,
main,
.site-footer {
  width: min(100% - 2.5rem, 30em + 2 * var(--pad));
  margin-inline: auto;
}

/* The index has no header: its own name and mark stand at the top. */
.skip-link + main {
  margin-top: clamp(1.5rem, 4vw, 3.5rem);
}

.site-header {
  padding: 1.5rem var(--pad) 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border-radius: 999px;
  text-decoration: none;
}

.brand-mark {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--mark-disc);
  box-shadow: 0 0 0 1px var(--hairline);
}

.brand-name {
  width: auto;
  height: 1.5rem;
}

main {
  display: block;
}

/* On a wider screen the page is a sheet of paper on the sand. */
@media (min-width: 48rem) {
  :root {
    --pad: clamp(2.5rem, 5vw, 4.5rem);
  }

  main {
    padding: var(--pad);
    border: 1px solid var(--hairline);
    border-radius: 22px;
    background: var(--paper);
    box-shadow: var(--shadow);
  }
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Newsreader", serif;
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  margin: 0.5em 0 0.5em;
  font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);
  letter-spacing: -0.015em;
}

h2 {
  margin: 2em 0 0.55em;
  padding-top: 1em;
  border-top: 1px solid var(--hairline);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  letter-spacing: -0.01em;
}

h3 {
  margin: 1.6em 0 0.4em;
  font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem);
  font-weight: 500;
  line-height: 1.25;
}

h2 + h3 {
  margin-top: 0.9em;
}

p,
ul,
ol,
blockquote {
  margin: 0 0 1em;
}

p {
  text-wrap: pretty;
}

ul,
ol {
  padding-left: 1.4em;
}

li {
  margin-block: 0.45em;
  padding-left: 0.15em;
}

li > ul,
li > ol {
  margin: 0.45em 0 0.6em;
}

ul > li::marker {
  color: var(--accent);
}

ol > li::marker {
  font-variant-numeric: tabular-nums;
}

strong {
  font-weight: 600;
}

.legal {
  max-width: 30em;
}

/* The draft notice, and the notice on an old version: the app's callout. */
.legal blockquote,
.notice {
  margin: 0 0 1.5em;
  padding: 0.85em 1.1em;
  border: 1px solid var(--notice-edge);
  border-radius: 22px;
  background: linear-gradient(to bottom right, var(--notice-from), var(--notice-to) 60%) var(--paper);
}

.legal blockquote > :last-child {
  margin-bottom: 0;
}

/* A note in square brackets: an open question, so a quiet highlight. */
.note {
  padding: 0.05em 0.1em;
  border-radius: 0.3em;
  background: var(--note);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A table scrolls inside its own box, never widening the page. */
.table {
  margin: 0 0 1.25em;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

th,
td {
  padding: 0.65em 0.9em;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--paper-deep);
  font-weight: 600;
}

td {
  border-top: 1px solid var(--hairline);
}

/* Earlier versions, at the foot of a page that has them. */
.versions {
  margin-top: 2.5em;
}

/* The index. */
.home-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}

.home-brand .brand-mark {
  width: 4.5rem;
  height: 4.5rem;
}

.home-brand .brand-name {
  height: 2.75rem;
}

.lede {
  max-width: 30em;
  font-size: 1.1em;
}

/* The rows carry their own hairlines, so a group's heading needs none. */
.group h2 {
  margin-top: 1.6em;
  padding-top: 0;
  border-top: 0;
}

.pages {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pages li {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.pages li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.pages a {
  display: block;
  padding: 0.7em 0;
  font-weight: 600;
}

.site-footer {
  padding: 2rem var(--pad) 3rem;
}

.site-footer p {
  margin: 0 0 0.5em;
}

/* On paper, in the light colours whatever the screen shows. */
@media print {
  :root {
    --ground: #FFFFFF;
    --paper: #FFFFFF;
    --paper-deep: #EDE5DA;
    --text: #241F1C;
    --hairline: rgba(36, 31, 28, 0.08);
    --notice-from: rgba(217, 160, 91, 0.26);
    --notice-to: rgba(217, 160, 91, 0.16);
    --note: rgba(217, 160, 91, 0.24);
    --mark-disc: #FBF8F3;
  }

  body {
    background: #FFFFFF;
    font-size: 11pt;
  }

  .skip-link {
    display: none;
  }

  main {
    padding: 0;
    border: 0;
    box-shadow: none;
  }
}