/* Veldonderzoek Recorder. Repetive design system (paper, ink, one lime accent), mobile first.
   Basics only: colour tokens, Poppins type scale, 8px grid, square corners, 1/2/3px ink lines.
   No tape, strike, paper texture, papercut edges or script type: this is a field tool. */

@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* Tokens (from the design system tokens.css) ------------------------- */

:root {
  --paper-100: #fbfaf7;
  --paper-200: #f5f3ee;
  --paper-300: #eae7df;
  --ink-900: #171715;
  --ink-600: #4a4943;
  --ink-400: #8c8a82;
  --lime-500: #c7dd1b;
  --white: #ffffff;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
  --control-l: 56px;
  --control-m: 48px;
  --touch-min: 44px;
  --margin: 20px; /* mobile page margin */
  --nav-h: 64px;  /* mobile nav height */

  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease-hover: cubic-bezier(.25, 1, .5, 1);
  --duration-xs: 240ms;
  color-scheme: light;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper-200);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 16px;   /* paragraph-s */
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

h1, h2, h3 { color: var(--ink-900); margin: 0 0 var(--space-3); }
/* heading-l */
h1 { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.01em; }
/* heading-s */
h2 { font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 var(--space-2); text-wrap: pretty; }

.muted { color: var(--ink-600); }
.small { font-size: 14px; line-height: 20px; }

/* label-s: mono metadata */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin: 0 0 var(--space-2);
}

/* Icons: 20px, 2px line, square caps, miter joins (DS icon rules). */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.icon--sm { width: 20px; height: 20px; }

/* Focus: always visible, 3px ink, offset 2px. */
:focus-visible {
  outline: var(--border-3) solid var(--ink-900);
  outline-offset: 2px;
}

/* Layout -------------------------------------------------------------- */

.topbar {
  padding-top: env(safe-area-inset-top);
  background: var(--paper-200);
  border-bottom: var(--border-2) solid var(--ink-900);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 560px;
  min-height: var(--nav-h);
  margin: 0 auto;
  padding: var(--space-2) var(--margin);
}
.topbar__logo { height: 40px; width: auto; display: block; }
.topbar__right { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.topbar__user {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40vw;
}

.netbar {
  max-width: 520px;
  margin: var(--space-4) auto 0;
  width: calc(100% - 2 * var(--margin));
  background: var(--paper-300);
  color: var(--ink-900);
  font-size: 14px;
  line-height: 20px;
  padding: var(--space-3) var(--space-4);
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-5) var(--margin) calc(var(--space-7) + env(safe-area-inset-bottom));
}

.screen > * + * { margin-top: var(--space-5); }
.screen > h1 + * { margin-top: var(--space-4); }
.stack > * + * { margin-top: var(--space-3); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.center-block { text-align: center; padding-top: 28vh; }
.hero-logo { height: var(--space-8); width: auto; display: block; margin: 0 auto var(--space-6); }

/* Card "sheet": paper-100 on the ground, 3px ink line on top. */
.card {
  background: var(--paper-100);
  border-top: var(--border-3) solid var(--ink-900);
  padding: var(--space-5);
}
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.card__head h2 { margin: 0; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-2); }
.card__head .btn { flex: none; }

/* Login --------------------------------------------------------------- */

.login { padding-top: 6vh; }
.login .hero-logo { margin: 0 0 var(--space-7); }
.login h1 { margin-bottom: var(--space-2); }
.login .form { margin-top: var(--space-6); }

/* Forms --------------------------------------------------------------- */

.form > * + * { margin-top: var(--space-5); }
.card.form > * + * { margin-top: var(--space-4); }
.field { display: block; }
/* Veld: mono label-s above the control, ink-600. */
.field__label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: var(--space-2);
}
.field__hint { display: block; font-size: 14px; line-height: 20px; color: var(--ink-600); margin-top: var(--space-2); }
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--ink-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  margin-top: var(--space-2);
}
/* Warning icon before the error line; no accent colour, the sentence says what is wrong. */
.field__error::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M10 3L2 17h16z'/%3E%3Cpath d='M10 8v4M10 14v1'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M10 3L2 17h16z'/%3E%3Cpath d='M10 8v4M10 14v1'/%3E%3C/svg%3E") no-repeat center / contain;
}

.form-error {
  display: block;
  margin: 0;
  background: var(--white);
  border: var(--border-2) solid var(--ink-900);
  color: var(--ink-900);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding: var(--space-3) var(--space-4);
}
.form-error--warn { background: var(--paper-300); border-color: var(--paper-300); }

input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%;
  min-height: var(--control-m);
  padding: 10px var(--space-4);
  font: inherit;
  font-size: 16px; /* >= 16px prevents iOS zoom on focus */
  line-height: 24px;
  color: var(--ink-900);
  background: var(--white);
  border: var(--border-2) solid var(--ink-900);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
textarea { resize: vertical; min-height: 120px; padding: var(--space-3) var(--space-4); }
input::placeholder, textarea::placeholder { color: var(--ink-600); opacity: 1; }

/* File field: frame with an ink "Kies bestand" button and the file name; the real input
   lies invisible over the whole frame, so the hit area is the full 56px frame. */
.filefield {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-l);
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  border: var(--border-2) solid var(--ink-900);
}
.filefield__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: var(--space-6);
  padding: 0 var(--space-3);
  background: var(--ink-900);
  color: var(--paper-100);
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 320ms var(--ease-hover);
}
.filefield__name { min-width: 0; font-size: 14px; line-height: 20px; color: var(--ink-900); overflow-wrap: anywhere; }
.filefield__name.is-empty { color: var(--ink-600); }
.filefield input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.filefield:focus-within .filefield__btn { outline: var(--border-3) solid var(--ink-900); outline-offset: 2px; }
@media (hover: hover) { .filefield:hover .filefield__btn { transform: translateY(-2px); } }

.consent__text {
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-4);
  background: var(--paper-200);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-900);
}
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--touch-min);
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
}
/* Checkbox: 24px square, 2px ink border; checked = ink fill with a white check. */
.check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--white) no-repeat center / 20px 20px;
  border: var(--border-2) solid var(--ink-900);
  border-radius: 0;
  cursor: pointer;
}
.check input:checked { background-color: var(--ink-900); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M5 10l3 3 7-7'/%3E%3C/svg%3E"); }

.upload-alt summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--ink-900);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
}
.upload-alt summary span { text-decoration: underline; text-decoration-thickness: var(--border-2); text-underline-offset: var(--space-1); }
.upload-alt summary::-webkit-details-marker { display: none; }
.upload-alt[open] summary .icon { transform: rotate(180deg); }
.upload-alt__body {
  margin-top: var(--space-2);
  background: var(--paper-100);
  border-top: var(--border-3) solid var(--ink-900);
  padding: var(--space-5);
}
.upload-alt__body > * + * { margin-top: var(--space-4); }
.steps { margin: 0; padding-left: 20px; color: var(--ink-600); }
.steps li + li { margin-top: var(--space-2); }
.steps strong { color: var(--ink-900); font-weight: 600; }

/* Buttons (DS Button: square, ink, uppercase, 600, +6%) --------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-m);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 0;
  border: var(--border-2) solid transparent;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-font-smoothing: antialiased;
}
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--paper-300);
  border-color: var(--paper-300);
  color: var(--ink-400);
  cursor: not-allowed;
}
.btn--block { display: flex; width: 100%; }
.btn--xl { min-height: var(--control-l); }
.btn--small { min-height: var(--touch-min); padding: var(--space-1) var(--space-4); font-size: 14px; line-height: 16px; white-space: nowrap; }

/* Primary: ink block with paper text, 24px padding (papercut edges left out on purpose). */
.btn--primary, .btn--dark {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--paper-100);
}
/* Secondary: a flat block in the same tone, 16px padding. */
.btn--secondary {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--paper-100);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
/* Arrow on the right (20px, gap 8px); drawn in CSS so JS label swaps keep it. */
.btn--arrow::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 120ms steps(2, end);
}
.btn--arrow:disabled::after { display: none; }

/* Lower-emphasis actions are a DS TextLink, not an outlined button. */
.btn--ghost {
  background: none;
  border: 0;
  min-height: var(--touch-min);
  padding: 0 var(--space-1);
  color: var(--ink-900);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-decoration-thickness: var(--border-2);
  text-underline-offset: var(--space-1);
  white-space: nowrap;
}
.btn--ghost.btn--block { width: 100%; }

/* TextLink: underline 2px, offset 4px, 500. */
.btn-link, .btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  min-height: var(--touch-min);
  padding: 0 var(--space-1);
  color: var(--ink-900);
  font: inherit;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: var(--border-2);
  text-underline-offset: var(--space-1);
}
.btn-back { margin-left: calc(-1 * var(--space-1)); text-decoration: none; }
.btn-back .icon { transition: transform 120ms steps(2, end); }
.btn-back span { text-decoration: underline; text-decoration-thickness: var(--border-2); text-underline-offset: var(--space-1); }

/* Lists --------------------------------------------------------------- */

.list { list-style: none; margin: 0; padding: 0; }
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: var(--border-1) solid var(--ink-900);
}
.item:first-child { border-top: none; }
.item:last-child { padding-bottom: var(--space-1); }
.item__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.item__title { font-weight: 600; color: var(--ink-900); overflow-wrap: anywhere; }
.item__sub { font-size: 14px; line-height: 20px; color: var(--ink-600); font-variant-numeric: tabular-nums; }
.item__status { font-size: 14px; line-height: 20px; color: var(--ink-900); margin-top: 2px; }
.item__status.is-error { font-weight: 600; }
.item__actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); flex: none; }

/* Mono count next to a heading. */
.count {
  display: inline-block;
  min-width: 28px;
  padding: 2px 6px;
  border: var(--border-2) solid var(--ink-900);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--ink-900);
}

/* Status label (StatusTape without the tape): label-s in mono, the word carries the meaning.
   processing = paper-300 with an ink block, done = lime (DS: "klaar"), failed = ink. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-900);
}
.chip--processing { background: var(--paper-300); }
.chip--processing::before { content: ""; width: 8px; height: 8px; background: var(--ink-900); flex: none; }
.chip--done { background: var(--lime-500); }
.chip--failed { background: var(--ink-900); color: var(--paper-100); }

.notice {
  padding: var(--space-4);
  background: var(--paper-100);
  border: var(--border-2) solid var(--ink-900);
  color: var(--ink-900);
}
.notice strong { display: block; font-weight: 600; font-size: 16px; color: var(--ink-900); margin-bottom: var(--space-1); }
.notice p { margin: 0 0 var(--space-2); }
.notice p:last-child { margin-bottom: 0; }
.empty { text-align: center; padding: var(--space-4) 0 var(--space-2); }

/* Record screen ------------------------------------------------------- */

.rec {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  padding-top: max(var(--space-4), env(safe-area-inset-top));
}
/* label: mono, the metadata voice */
.rec__company {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin: 0;
  overflow-wrap: anywhere;
}
.rec__company:empty { display: none; }
.rec__timer {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 72px;
  line-height: 72px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.rec__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin-top: calc(-1 * var(--space-1));
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.rec__status.is-live { color: var(--ink-900); }
/* Live marker: DS pulse block (8px ink square), always next to the words. */
.rec__status.is-live::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--ink-900);
  margin-right: var(--space-2);
  animation: rp-pulse 1200ms infinite;
}
.rec__status.is-paused { color: var(--ink-900); }
.rec__hint { color: var(--ink-600); font-size: 16px; line-height: 24px; margin: 0; min-height: 24px; }
.rec__saved { color: var(--ink-600); font-size: 14px; line-height: 20px; margin: 0; }
.rec__saved:empty { display: none; }

.meter {
  width: 100%;
  max-width: 240px;
  height: 8px;
  background: var(--paper-300);
  overflow: hidden;
}
.meter__bar {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--ink-900);
  transition: transform 0.08s linear;
}

/* Big record button: a square ink block (DS corners are 0).
   Idle: lime record dot on ink (lime is allowed on ink, 11.8:1).
   Recording: lime block ("aan het werk") with an ink stop square.
   Armed (tap again to stop): white with the 3px ink frame and ink stop square.
   Paused/stopping: paper-300 with an ink stop square. */
.recbtn {
  width: 152px;
  height: 152px;
  border-radius: 0;
  border: var(--border-3) solid var(--ink-900);
  background: var(--ink-900);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  margin: var(--space-2) 0 0;
  padding: 0;
}
.recbtn:disabled { background: var(--paper-300); border-color: var(--paper-300); cursor: default; }
.recbtn:disabled .recbtn__inner { background: var(--ink-400); }
.recbtn:focus-visible { outline-offset: 4px; }
.recbtn__inner {
  width: 72px;
  height: 72px;
  border-radius: 50%; /* the universal record symbol; everything else is square */
  background: var(--lime-500);
}
.recbtn[data-state="recording"] { background: var(--lime-500); }
.recbtn[data-state="paused"],
.recbtn[data-state="stopping"] { background: var(--paper-300); }
.recbtn[data-state="recording"] .recbtn__inner,
.recbtn[data-state="paused"] .recbtn__inner,
.recbtn[data-state="stopping"] .recbtn__inner {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: var(--ink-900);
}
.recbtn.is-armed { background: var(--white); }

#btn-pause { max-width: 280px; }

/* Sunken band (paper-300) for the lock-screen warning. */
.warn {
  display: flex;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  background: var(--paper-300);
  color: var(--ink-900);
  padding: var(--space-4);
  font-size: 14px;
  line-height: 20px;
  margin-top: var(--space-2);
}
.warn__icon { color: var(--ink-900); margin-top: 2px; }
.warn strong { display: block; font-weight: 600; font-size: 16px; line-height: 24px; color: var(--ink-900); margin-bottom: 2px; }
.warn__wake { display: block; margin-top: var(--space-2); color: var(--ink-600); }
.warn__wake:empty { display: none; }

#rec-error, #rec-gap { width: 100%; text-align: left; }

/* Review -------------------------------------------------------------- */

.summary { display: grid; grid-template-columns: 1fr; margin: 0 0 var(--space-5); }
.summary dd + dt { margin-top: var(--space-3); }
.summary dt {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.summary dd { margin: 0; font-weight: 600; color: var(--ink-900); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.audio { width: 100%; }

.progress {
  height: 8px;
  background: var(--paper-300);
  overflow: hidden;
  margin: var(--space-3) 0 var(--space-5);
}
.progress__bar {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--ink-900);
  transition: transform var(--duration-xs) var(--ease-hover);
}

/* Toast --------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: calc(100% - 2 * var(--margin));
  max-width: 480px;
  background: var(--ink-900);
  color: var(--paper-100);
  padding: var(--space-3) var(--space-4);
  font-size: 16px;
  line-height: 24px;
  z-index: 50;
}

.noscript { padding: var(--space-4); }

@keyframes rp-pulse { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0.2; } }

/* Hover and press: ink and outline buttons turn lime with ink text (DS Button). */
@media (hover: hover) {
  .btn--primary:hover:not(:disabled), .btn--dark:hover:not(:disabled), .btn--secondary:hover:not(:disabled) {
    background: var(--lime-500);
    border-color: var(--lime-500);
    color: var(--ink-900);
  }
  .btn--arrow:hover:not(:disabled)::after { transform: translateX(var(--space-1)); }
  .btn-back:hover .icon { transform: translateX(calc(-1 * var(--space-1))); }
  .btn-link:hover, .btn--ghost:hover, .upload-alt summary:hover span, .btn-back:hover span { text-decoration-thickness: var(--border-3); }
}
.btn--primary:active:not(:disabled), .btn--dark:active:not(:disabled), .btn--secondary:active:not(:disabled) {
  background: var(--lime-500);
  border-color: var(--lime-500);
  color: var(--ink-900);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 370px) {
  h1 { font-size: 28px; line-height: 32px; }
  .rec__timer { font-size: 56px; line-height: 56px; }
  .recbtn { width: 136px; height: 136px; }
  .card, .upload-alt__body { padding: var(--space-4); }
}