/* Own styles only; system fonts, no third-party anything. Colors follow the desk's tokens.css (light and dark). */
:root {
  color-scheme: light dark;
  --ink: #19170D; --ink-3: #666666; --line: #D4D2CE; --canvas: #F1F0EE; --panel: #FFFFFF;
  --blue: #2B7088; --blue-ink: #1C4D5E; --red: #D70000; --green-ink: #3E6519;
  --btn: #19170D; --btn-ink: #FFFFFF; --focus: #2B7088;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --r-sm: 6px; --r-md: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F2F2F4; --ink-3: #9A9AA3; --line: #34343B; --canvas: #0E0E10; --panel: #1A1A1D;
    --blue: #4FA3C0; --blue-ink: #C3DFE9; --red: #FF6B74; --green-ink: #B4DC85;
    --btn: #F2F2F4; --btn-ink: #0E0E10; --focus: #4FA3C0;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/1.45 var(--body); }
body { min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center; padding: var(--s4); }
.card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s6) var(--s4); }
h1 { font-size: 20px; line-height: 1.2; margin: 0 0 var(--s2); }
.lede { margin: 0 0 var(--s4); color: var(--ink-3); font-size: 14px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--s3); margin-bottom: var(--s4); }
.fields[hidden] { display: none; }
.field { display: block; grid-column: 1 / -1; }
.field.half { grid-column: auto; }
.field > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.field input {
  display: block; width: 100%; min-height: 44px; padding: 10px var(--s3);
  font: inherit; font-size: 16px; /* 16 px or larger: iOS does not zoom the page on focus */
  color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.field input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.field input[aria-invalid="true"] { border-color: var(--red); }
.field .hint { display: block; min-height: 1.2em; margin-top: 2px; font-size: 13px; color: var(--red); }
.btn {
  width: 100%; min-height: 48px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  color: var(--btn-ink); background: var(--btn); border: 0; border-radius: var(--r-sm); transition: opacity 140ms;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.msg { min-height: 1.5em; margin: var(--s3) 0 0; font-size: 14px; color: var(--ink-3); }
.msg[data-kind="ok"] { color: var(--green-ink); }
.msg[data-kind="bad"] { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.note { margin: 0; font-size: 0.8125rem; opacity: 0.8; }
/* Narrow frames (a phone, or the roughly 400 px chat iframe): month and year stack so the placeholder text is not clipped. */
@media (max-width: 460px) { .field.half { grid-column: 1 / -1; } }