/* 1story — Broadsheet, direction 1c ("Big and kind").
 *
 * Tokens are taken from the design system stylesheet and not extended.
 * 1c raises the type scale and tap targets over the system defaults, because
 * the person using this may be eighty, unwell, or both.
 *
 * Source Serif 4 is self-hosted rather than loaded from Google. A referral
 * from a hospice should not put a third-party font request in the middle of
 * someone's worst month.
 */

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #0088b0;
  --color-accent-2: #d6006c;

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;

  --color-accent-2-100: #fff1f4;
  --color-accent-2-600: #d82071;
  --color-accent-2-700: #aa0b56;
  --color-accent-2-800: #790e3d;

  --font-heading: "Source Serif 4", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, serif;

  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-6: 30px;
  --space-8: 40px;

  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);

  /* 1c's own ground: a shade warmer than the system's, with white fields. */
  --app-bg: #faf9f8;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- chrome */

.app {
  min-height: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
}

.chrome { padding: var(--space-3) 0 var(--space-4); }

.progress {
  height: 4px;
  background: var(--color-neutral-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-accent-700);
  transition: width 220ms ease;
}

.step-label {
  margin: var(--space-2) 0 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-neutral-700);
}

/* ---------------------------------------------------------------- screens */

.screen { display: none; flex: 1 1 auto; flex-direction: column; }
.screen.live { display: flex; }

.grow { flex: 1 1 auto; min-height: var(--space-4); }

h1.q {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.32;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}

h2.h {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}

h2.h-lg { font-size: 30px; }

.subline { font-size: 19px; line-height: 1.65; color: var(--color-neutral-800); margin: 0; }
.body { font-size: 17px; line-height: 1.6; color: var(--color-neutral-800); margin: 0; }
.body-sm { font-size: 16.5px; line-height: 1.55; color: var(--color-neutral-800); margin: 0; }
.hint { font-size: 15px; color: var(--color-neutral-700); margin: 0; }
.eyebrow { font-size: 15px; color: var(--color-neutral-700); margin: 0 0 var(--space-2); }

.stack-1 { display: flex; flex-direction: column; gap: var(--space-1); }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }

.actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.2;
  min-height: 64px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.btn-primary { background: var(--color-accent-700); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-800); }

.btn-record { background: var(--color-accent-2-700); color: var(--color-bg); min-height: 72px; }
.btn-record:hover { background: var(--color-accent-2-600); }
.btn-record:active { background: var(--color-accent-2-800); }

.btn-big { min-height: 72px; }

.btn-secondary {
  background: #ffffff;
  color: var(--color-text);
  border-color: var(--color-neutral-300);
  min-height: 56px;
  font-size: 17px;
}

.btn-secondary:hover { background: var(--color-neutral-100); }

.btn-ghost {
  background: transparent;
  color: var(--color-accent-700);
  min-height: 48px;
  font-size: 17px;
  border-color: transparent;
}

.btn-ghost:hover { background: var(--color-accent-100); }

.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* ---------------------------------------------------------------- prompts */

.prompts { display: flex; flex-direction: column; gap: var(--space-2); }

.prompt {
  min-height: 56px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.4;
  text-align: left;
  background: #ffffff;
  color: var(--color-text);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.prompt[aria-pressed="true"] {
  background: var(--color-accent-100);
  border-color: var(--color-accent-700);
}

/* ---------------------------------------------------------------- fields */

.field { display: flex; flex-direction: column; gap: var(--space-1); }

.label { font-size: 17px; color: var(--color-text); }

.input {
  width: 100%;
  min-height: 64px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--color-text);
  background: #ffffff;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
}

.input-sm { min-height: 52px; font-size: 17px; }
.input-md { min-height: 56px; font-size: 17px; }

.input::placeholder { color: var(--color-neutral-500); }

/* ---------------------------------------------------------------- resume */

.resume {
  background: var(--color-surface);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.resume p { margin: 0; font-size: 16px; line-height: 1.5; }

/* ---------------------------------------------------------------- media */

.photo-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-neutral-200);
  flex: none;
  display: flex;
  justify-content: center;
}

/* Never crop someone's photograph of their mother. The picture keeps its own
   shape and the frame fits around it: a tall phone screenshot comes out tall,
   a landscape fills the width, and neither loses an edge. Sizing by max-width
   AND max-height rather than width:100% is what stops a portrait photo being
   letterboxed into a short wide strip. */
.photo-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 46vh;
  object-fit: contain;
}

#photo-review img { max-height: 32vh; }

video.live-cam {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-neutral-300);
  flex: none;
}

/* ---------------------------------------------------------------- notes */

.notelist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 2px solid var(--color-neutral-300);
}

.notelist span { font-size: 16px; color: var(--color-neutral-800); }

/* ---------------------------------------------------------------- record */

.timer {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 44px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 0;
}

.rec-state {
  text-align: center;
  font-size: 15px;
  color: var(--color-neutral-700);
  margin: var(--space-1) 0 0;
}

.rec-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent-2-700);
  margin-right: 7px;
  vertical-align: baseline;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.rec-dot.on { animation: pulse 1.4s ease-in-out infinite; }

/* ---------------------------------------------------------------- cards */

.card {
  background: #ffffff;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 14px;
}

.player {
  display: flex;
  align-items: center;
  gap: 14px;
}

.play-btn {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-accent-700);
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.play-btn svg { width: 22px; height: 22px; fill: var(--color-bg); }

.player { align-items: center; }
.player-meta { min-width: 0; flex: 1 1 auto; }
.player-meta b { display: block; font-size: 17px; font-weight: 600; }
.player-meta span { font-size: 14px; color: var(--color-neutral-700); }

/* A MediaRecorder file reports no duration, so the native scrubber is useless.
   This bar is driven by currentTime against a duration we already know. */
.track {
  margin-top: 8px;
  height: 4px;
  background: var(--color-neutral-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.track > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-accent-700);
}

.play-btn .bars { display: none; }
.play-btn.playing .bars { display: block; }
.play-btn.playing svg { display: none; }

.play-btn .bars::before,
.play-btn .bars::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 20px;
  background: var(--color-bg);
  margin: 0 2px;
  vertical-align: middle;
}

/* ---------------------------------------------------------------- radios */

.radios { display: flex; flex-direction: column; gap: var(--space-2); }

.radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.radio.on { background: var(--color-accent-100); border-color: var(--color-accent-700); }

.radio .dot {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-neutral-500);
  background: #ffffff;
  margin-top: 2px;
}

.radio.on .dot { border-color: var(--color-accent-700); border-width: 6px; }

.radio input { position: absolute; opacity: 0; width: 0; height: 0; }

.radio .txt { font-size: 17px; line-height: 1.4; }

/* ---------------------------------------------------------------- status */

.status { font-size: 16px; color: var(--color-neutral-700); margin: 0; }
.status.warn { color: var(--color-accent-2-700); }

.scroller { overflow-y: auto; scrollbar-gutter: stable; }

@media (prefers-reduced-motion: reduce) {
  *, .progress > i, .rec-dot.on { transition: none !important; animation: none !important; }
}