:root {
  --bg: #f7f7f8;
  --card: #ffffff;
  --fg: #16191d;
  --muted: #6b7280;
  --border: #d8dbe0;
  --accent: #1f6feb;
  --accent-fg: #ffffff;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --ok: #067647;
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --card: #161b22;
    --fg: #e6edf3;
    --muted: #9198a1;
    --border: #2d333b;
    --accent: #388bfd;
    --accent-fg: #ffffff;
    --danger: #ff7b72;
    --danger-bg: #2d1512;
    --ok: #3fb950;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
  min-height: 100svh;
}

.wrap {
  max-width: 34rem;
  margin-inline: auto;
  /* All four sides: viewport-fit=cover means that in landscape on a notched
     iPhone the sensor housing overlaps the left inset, and hard-coding the
     horizontal padding would put the labels and input edges under it. */
  padding: max(1.25rem, env(safe-area-inset-top))
    max(1.25rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom))
    max(1.25rem, env(safe-area-inset-left));
}

h1 {
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0.5rem 0 0.25rem;
  letter-spacing: -0.01em;
}

.sub {
  color: var(--muted);
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

/* ------------------------------------------------------------------ */
/* Fields                                                              */
/* ------------------------------------------------------------------ */

.field {
  display: block;
  margin-bottom: 1.25rem;
}

.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

input,
textarea,
button {
  /* 16px exactly. Anything smaller makes iOS Safari zoom on focus. */
  font-size: 16px;
  font-family: inherit;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  padding: 0.85rem 1rem;
  min-height: 48px;
}

textarea {
  min-height: 45vh;
  resize: vertical;
  line-height: 1.55;
}

@supports (field-sizing: content) {
  textarea {
    field-sizing: content;
    max-height: 70vh;
  }
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.btn {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.25rem;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-secondary {
  background: var(--card);
  color: var(--fg);
  border-color: var(--border);
}

/* Spinner shown while a submit is in flight. */
[aria-busy='true'] .btn::before {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.5em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------------ */
/* Messages                                                            */
/* ------------------------------------------------------------------ */

.error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.925rem;
  margin-bottom: 1rem;
}

.warn {
  color: var(--danger);
  font-size: 0.9rem;
}

.tick {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ok);
  margin-bottom: 0.5rem;
}

.filename {
  display: block;
  font-family: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.9rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  word-break: break-all;
}

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