/* Reset, typography and form controls.
   Two rules that explain most numbers below:
   - Nothing tappable is under 44px tall (Apple's minimum for a finger).
   - Text fields are 16px: with less, iOS zooms the page in when one is focused. */

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

/* `hidden` always wins: classes that set `display` (.alert is flex, .btn is inline-flex)
   would otherwise show elements the scripts mean to hide. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; }
a { color: var(--primary); }
code {
  padding: 2px 6px;
  font-size: .88em;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  word-break: break-all;
}

h1 { margin: 0; font-size: 1.6rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 750; }
h2 { margin: 28px 0 12px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
h3 { margin: 0; font-size: 1rem; font-weight: 650; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); font-size: .92rem; }
.nowrap { white-space: nowrap; }

.icon { width: 20px; height: 20px; flex: none; }
.spin { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

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

/* --- form controls ---------------------------------------------------- */

label {
  display: block;
  margin: 14px 0 6px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--muted);
}
input[type=text], input[type=password], input[type=date], input[type=search],
input[type=number], input[type=email], select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color .12s, box-shadow .12s;
  -webkit-appearance: none;
  appearance: none;
}
select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}
textarea { min-height: 160px; resize: vertical; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
input:disabled { background: var(--surface-muted); color: var(--muted); }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--primary); }
input[type=file] { max-width: 100%; font-size: .95rem; }

/* A field with an icon inside: <div class="field"> <svg class="icon"/> <input> </div> */
.field { position: relative; }
.field > .icon {
  position: absolute; left: 14px; top: 50%;
  width: 18px; height: 18px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.field > input { padding-left: 42px; }

/* A password field with its show/hide and generate buttons on the right. */
.password-field { position: relative; }
.password-field > input { padding-right: 96px; }
.password-field-actions {
  position: absolute; right: 4px; top: 50%;
  display: flex; gap: 2px;
  transform: translateY(-50%);
}

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 0 14px; }
.form-grid > .full { grid-column: 1 / -1; }