/*
  Reset, elements and typography. Atkinson Hyperlegible was drawn by the Braille Institute to stay
  readable at small sizes and in poor light, which is the condition this app is used in: a phone
  held at a gate, in daylight or rain.
*/

@font-face {
  font-family: "Archivo";
  src: url(/fonts/Archivo.woff2) format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url(/fonts/BricolageGrotesque.woff2) format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

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

  * { margin: 0; }

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

  body {
    min-height: 100dvh;
    font-family: var(--face);
    font-size: var(--text);
    line-height: var(--leading);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
  }

  img, svg, video, canvas { display: block; max-width: 100%; }

  .icon { display: inline-block; vertical-align: -0.15em; flex: none; }
  img, video { height: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }

  /* Browsers frame a fieldset by default, which put a box round every checkbox group. */
  fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }

  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

  ul, ol { padding-inline-start: var(--s-5); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--face-display);
    line-height: var(--leading-tight);
    font-weight: 700;
    text-wrap: balance;
  }

  h1, .h1 { font-size: var(--text-2xl); letter-spacing: -0.015em; }
  h2, .h2 { font-size: var(--text-xl);  letter-spacing: -0.01em; }
  h3, .h3 { font-size: var(--text-lg); }
  h4, h5, h6, .h4, .h5, .h6 { font-size: var(--text); }

  p { text-wrap: pretty; max-width: var(--measure); }

  small, .small { font-size: var(--text-sm); color: var(--ink-2); }

  strong, b { font-weight: 700; }

  /* Colour is spoken for by money and by what is overdue, so a link is marked by its underline.
     It has to be strong enough to see in a dense table, which is where most links here live. */
  a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, currentcolor 55%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

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

  hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin-block: var(--s-5);
  }

  /* One monochrome focus ring everywhere, so no hue competes with money and owing. */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius);
  }

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

  ::placeholder { color: var(--ink-3); }

  /* Figures line up in a column, the way they do in a round book. */
  .figure, td.figure, th.figure, .money {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }

  .money-in  { color: var(--money); }
  .money-out { color: var(--owing); }

  .muted { color: var(--ink-2); }

  /* Labels name a thing quietly. Data is the thing, so it is darker, heavier and larger. */
  .label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.3;
    color: var(--ink-3);
  }

  .datum {
    display: block;
    font-weight: 600;
    color: var(--ink);
  }

  .datum--figure {
    font-variant-numeric: tabular-nums;
  }

  @media print {
    body { background: #fff; color: #000; }
    .print-hide, .d-print-none { display: none !important; }
  }
}