html,
body {
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.app-navbar {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* The hand-drawn shapes. The element paints no background and no border: what
   is visible is an SVG path behind the content, and these variables are how a
   variant, a hover and a focus reach it. Colours rather than classes, because
   the path is drawn in JavaScript and a Tailwind class on the element cannot
   reach inside an SVG.

   Each variant also carries the plain rounded version as a fallback, so a page
   whose JavaScript never arrived still has buttons and fields with edges. The
   drawing controller adds .is-drawn once there is a path behind the element,
   and every fallback is written :not(.is-drawn) rather than being switched off
   afterwards: two rules of the same weight are settled by which came last, and
   an override that has to come last is one edit away from painting a straight
   rectangle behind every drawn one. */
.ink-primary {
  --ink-fill: #f5f5f5;
  --ink-stroke: #f5f5f5;
  color: #0a0a0a;
}
.ink-primary:hover {
  --ink-fill: #ffffff;
  --ink-stroke: #ffffff;
}
.ink-primary:active {
  --ink-fill: #d4d4d4;
  --ink-stroke: #d4d4d4;
}
.ink-primary:not(.is-drawn) {
  background-color: #f5f5f5;
  border-radius: 0.5rem;
}
.ink-primary:not(.is-drawn):hover {
  background-color: #ffffff;
}

.ink-outline {
  --ink-fill: transparent;
  --ink-stroke: #a3a3a3;
  color: #f5f5f5;
}
.ink-outline:hover {
  --ink-fill: #262626;
  --ink-stroke: #e5e5e5;
}
.ink-outline:active {
  --ink-fill: #171717;
}
.ink-outline:not(.is-drawn) {
  border: 1px solid #a3a3a3;
  border-radius: 0.5rem;
}
.ink-outline:not(.is-drawn):hover {
  background-color: #262626;
}

/* A field is a box drawn round something being typed into, so the line is
   quieter than a button's and the fill is the page's own raised surface. The
   stroke brightens on focus, which is the drawn version of the border the
   fields had. */
.ink-field {
  --ink-fill: #171717;
  --ink-stroke: #404040;
}
.ink-field:focus-within {
  --ink-stroke: #737373;
}
.ink-field:not(.is-drawn) {
  background-color: #171717;
  border: 1px solid #262626;
  border-radius: 0.5rem;
}
.ink-field:not(.is-drawn):focus-within {
  border-color: #737373;
}

/* Four colours, because a slider has four things to tell apart: the part not
   reached yet, the part already passed, and the pill sitting between them. The
   passed part is deliberately dimmer than the pill, so the pill still reads as
   the thing being held rather than as the end of the line. */
.ink-slider {
  --ink-track: #404040;
  --ink-filled: #8f8f8f;
  --ink-stroke: #f5f5f5;
  --ink-fill: #f5f5f5;
}

/* A drawn underline. The link keeps its real text-decoration until the
   controller has a line to put there, so a link is never an unmarked word. */
.ink-underline.is-drawn {
  text-decoration: none;
}

/* The native range input stays over the drawing at full size and invisible, so
   dragging, the arrow keys and focus keep working. Its thumb is sized to the
   drawn blob so the two travel together instead of drifting apart at the ends. */
.hand-drawn-range {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.hand-drawn-range::-webkit-slider-runnable-track {
  background: transparent;
}
.hand-drawn-range::-moz-range-track {
  background: transparent;
}
.hand-drawn-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb, 18px);
  height: var(--thumb, 18px);
  opacity: 0;
}
.hand-drawn-range::-moz-range-thumb {
  width: var(--thumb, 18px);
  height: var(--thumb, 18px);
  border: 0;
  opacity: 0;
}