/* Inksound website: the one stylesheet of every page, English (ltr) and Hebrew (rtl).

   The colors are the app's own (src/lib/theme.ts and src/lib/palette.ts): the desk behind the pages, the white
   paper with its ruled lines and its margin line, the ink, and the highlighter, which marks selected text. Each page
   is one sheet of paper. Its head is ruled, with the title written on the lines, and its margin line runs down the
   page. On wide screens the margin becomes a column for the headings, like notes in a notebook's margin.

   Only logical properties (inline, block) place things, so a Hebrew page mirrors itself: its margin line is on the
   right, as in a Hebrew notebook. No scripts, no web fonts, no images. */

:root {
  color-scheme: light dark;

  --desk: #dce1e9;
  --paper: #ffffff;
  --rule: #cbd7ea;
  --margin: #e7a3a3;
  --ink: #262b36;
  --ink-soft: #565e70;
  --brand: #1b2b6b;
  --brand-ink: #ffffff;
  --brand-hover: #2f4396;
  --highlight: #ffe45c;
  --highlight-ink: #262b36;
  --focus: #2f55d4;
  --sheet-shadow: 0 1px 2px rgb(27 43 107 / 0.08), 0 18px 40px -22px rgb(27 43 107 / 0.3);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Hebrew", "Helvetica Neue",
    Arial, sans-serif;
  --body-size: 1.0625rem;
  /* The ruled lines' spacing. Every line in the page head is this tall, so each one sits on a rule. */
  --lh: 2.25rem;
  /* Where a rule crosses each line: just under the baseline of body text in the common system fonts. */
  --rule-at: calc(var(--lh) - 0.6875rem);
  --measure: 38rem;

  /* Phones: one column, with a narrow margin. */
  --cue: 0rem;
  --gap: 0rem;
  --pad-s: 2.25rem;
  --pad-e: 1.25rem;
  --line-x: 1.25rem;
  --text-start: var(--pad-s);
  --sheet-max: 100%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --desk: #0e1116;
    --paper: #24272e;
    --rule: #3e434e;
    --margin: #7a4a50;
    --ink: #e8eaf0;
    --ink-soft: #9aa1b2;
    --brand: #a9b8ff;
    --brand-ink: #0e1222;
    --brand-hover: #c4cfff;
    --highlight: #7a6512;
    --highlight-ink: #e8eaf0;
    --focus: #7d9bff;
    --sheet-shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 18px 40px -22px rgb(0 0 0 / 0.8);
  }
}

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

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

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body-size);
  line-height: 1.6;
  overflow-wrap: break-word;
}

::selection {
  background: var(--highlight);
  color: var(--highlight-ink);
}

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

h1,
h2 {
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

strong {
  font-weight: 650;
}

.skip {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -10rem;
  z-index: 2;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: var(--paper);
}

.skip:focus {
  inset-block-start: 1rem;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The bar above the sheet and the footer under it share the sheet's width and padding, so they line up with it. */

.top,
.foot {
  inline-size: min(100%, var(--sheet-max));
  margin-inline: auto;
  padding-inline: var(--pad-s) var(--pad-e);
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 1.5rem;
  padding-block: 0.5rem;
}

.wordmark {
  padding-block: 0.375rem;
  color: var(--brand);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.top ul,
.foot ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top nav a {
  display: inline-block;
  padding-block: 0.5rem;
  font-size: 0.9375rem;
}

.top nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.foot {
  padding-block: 1.5rem 3rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.foot a {
  display: inline-block;
  padding-block: 0.375rem;
}

.foot p {
  margin: 0.75rem 0 0;
}

/* The sheet, and its margin line. */

.sheet {
  position: relative;
  inline-size: min(100%, var(--sheet-max));
  margin-inline: auto;
  padding-block-end: 3rem;
  padding-inline: var(--pad-s) var(--pad-e);
  background: var(--paper);
}

.sheet::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--line-x);
  inline-size: 2px;
  background: var(--margin);
}

/* The page head: ruled paper, edge to edge, with a blank band at the top as on a notebook page. */

.page-head {
  margin-inline: calc(-1 * var(--pad-s)) calc(-1 * var(--pad-e));
  padding-block: calc(2 * var(--lh)) var(--lh);
  padding-inline: var(--text-start) var(--pad-e);
  background:
    linear-gradient(var(--paper), var(--paper)) 0 0 / 100% calc(2 * var(--lh)) no-repeat,
    linear-gradient(transparent var(--rule-at), var(--rule) 0, var(--rule) calc(var(--rule-at) + 1px), transparent 0)
      0 0 / 100% var(--lh);
  line-height: var(--lh);
}

.page-head > * {
  position: relative;
  /* Larger or smaller type moves so that its baseline, like the body text's, sits on the rule. */
  inset-block-start: calc((var(--body-size) - 1em) * 0.38);
  max-inline-size: var(--measure);
  margin: 0;
}

.page-head h1 {
  color: var(--brand);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: var(--lh);
}

.page-head .lead {
  margin-block-start: var(--lh);
  font-size: 1.125rem;
}

.page-head .date {
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* Sections: a heading, then its text. */

.part {
  margin-block-start: 2.5rem;
}

.part > h2 {
  margin: 0 0 0.625rem;
  color: var(--brand);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
  scroll-margin-block-start: 1rem;
}

/* A heading reached from a link is marked with the highlighter, line by line. */
.part > h2:target {
  text-decoration-line: underline;
  text-decoration-color: var(--highlight);
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
}

.body {
  max-inline-size: var(--measure);
}

.body > * {
  margin: 0;
}

.body > * + * {
  margin-block-start: 0.875rem;
}

.body ul,
.body ol {
  padding-inline-start: 1.375rem;
}

.body li + li {
  margin-block-start: 0.625rem;
}

.toc li + li {
  margin-block-start: 0.25rem;
}

/* The app's two stores: full width, one above the other, on phones. */

.body .store {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.body .store li + li {
  margin-block-start: 0;
}

.store a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
  text-decoration: none;
}

.store a:hover {
  background: var(--brand-hover);
}

/* What the app does: each name in the margin column on wide screens, above its text on phones. */

.features {
  margin: 2.5rem 0 0;
}

.features dt {
  color: var(--brand);
  font-weight: 700;
}

.features dd {
  max-inline-size: var(--measure);
  margin: 0.25rem 0 0;
}

.features dd + dt {
  margin-block-start: 1.5rem;
}

/* Tablets: the sheet lies on the desk. */

@media (min-width: 40rem) {
  :root {
    --pad-s: 4rem;
    --pad-e: 2.5rem;
    --line-x: 2.5rem;
    --sheet-max: 44.5rem;
  }

  .top,
  .foot,
  .sheet {
    inline-size: min(100% - 2rem, var(--sheet-max));
  }

  .sheet {
    border-radius: 6px;
    box-shadow: var(--sheet-shadow);
  }

  .page-head {
    border-radius: 6px 6px 0 0;
  }

  .page-head h1 {
    font-size: 1.875rem;
  }

  .body .store {
    display: flex;
    flex-wrap: wrap;
  }
}

/* Wide screens: the margin is a column, and the headings sit in it, next to their text. */

@media (min-width: 60rem) {
  :root {
    --cue: 9.5rem;
    --gap: 2.5rem;
    --pad-s: 2rem;
    --pad-e: 3rem;
    --line-x: calc(var(--pad-s) + var(--cue) + var(--gap) / 2 - 1px);
    --text-start: calc(var(--pad-s) + var(--cue) + var(--gap));
    --sheet-max: 55rem;
  }

  .part,
  .features {
    display: grid;
    grid-template-columns: var(--cue) minmax(0, var(--measure));
    align-items: baseline;
    column-gap: var(--gap);
  }

  .part > h2 {
    grid-column: 1;
    margin: 0;
    font-size: 1rem;
    text-align: end;
  }

  .part > .body {
    grid-column: 2;
  }

  .features {
    row-gap: 1.5rem;
  }

  .features dt {
    grid-column: 1;
    font-size: 1rem;
    text-align: end;
  }

  .features dd {
    grid-column: 2;
    margin: 0;
  }

  .features dd + dt {
    margin-block-start: 0;
  }
}

@media (forced-colors: active) {
  .store a {
    border: 1px solid ButtonText;
  }
}

@media print {
  body {
    background: none;
  }

  .skip,
  .top nav,
  .foot ul {
    display: none;
  }

  .sheet {
    inline-size: auto;
    padding-inline: 0;
    box-shadow: none;
  }

  .sheet::before {
    display: none;
  }

  .page-head {
    margin-inline: 0;
    padding: 0 0 1rem;
    background: none;
  }
}