/* Sober visual language inspired by Wikipedia: grey page, white content card,
   serif headings with hairline rules, blue for actions, colour used only to
   signal state. Softened with rounded corners.

   All type sizes are in rem so the 文字サイズ control (data-size on <html>)
   scales the whole page. */
:root {
  --page: #f0f1f3;
  --surface: #ffffff;
  --surface-subtle: #f8f9fa;
  --text: #202122;
  --muted: #54595d;
  --border: #a2a9b1;
  --border-subtle: #d5d8dc;
  --progressive: #36c;
  --progressive-hover: #3056a9;
  --progressive-ink: #ffffff;
  --error: #bf3c2c;
  --success-bg: #dff2eb;
  --success-border: #14866d;
  --warning-bg: #fdf2d5;
  --warning-border: #ab7f2a;
  --focus: #36c;
  --shadow: 0 1px 3px rgb(0 0 0 / .06), 0 4px 16px rgb(0 0 0 / .04);
  --radius-card: 16px;
  --radius: 8px;
  color-scheme: light;
}
/* Dark tokens: applied when the OS prefers dark (unless the user chose light),
   or when the user explicitly chose dark. Keep both blocks in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0b0d10;
    --surface: #1b1e23;
    --surface-subtle: #23262b;
    --text: #eaecf0;
    --muted: #a2a9b1;
    --border: #72777d;
    --border-subtle: #3a3d42;
    --progressive: #88a3e8;
    --progressive-hover: #a6bbf5;
    --progressive-ink: #101418;
    --error: #fd7865;
    --success-bg: #0f2a22;
    --success-border: #2cb491;
    --warning-bg: #2e2510;
    --warning-border: #c49a3a;
    --focus: #88a3e8;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0b0d10;
  --surface: #1b1e23;
  --surface-subtle: #23262b;
  --text: #eaecf0;
  --muted: #a2a9b1;
  --border: #72777d;
  --border-subtle: #3a3d42;
  --progressive: #88a3e8;
  --progressive-hover: #a6bbf5;
  --progressive-ink: #101418;
  --error: #fd7865;
  --success-bg: #0f2a22;
  --success-border: #2cb491;
  --warning-bg: #2e2510;
  --warning-border: #c49a3a;
  --focus: #88a3e8;
  --shadow: none;
  color-scheme: dark;
}

/* 文字サイズ: 標準 (the minimum) / 大 / 特大 */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
html[data-size="l"] { font-size: 112.5%; }
html[data-size="xl"] { font-size: 125%; }

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 12px;
  background: var(--page);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}
@media (min-width: 600px) { body { padding: 32px 16px; } }
.wrap { max-width: 760px; margin: 0 auto; }
a { color: var(--progressive); }
a:hover { color: var(--progressive-hover); }

/* Serif display face, as Wikipedia uses for article titles and section headings. */
h1, h2 {
  font-family: "Linux Libertine", Georgia, Times, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-weight: normal;
}

/* ---- page card ---- */
.page {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 16px 16px 28px;
}
@media (min-width: 600px) { .page { padding: 20px 32px 40px; } }

/* ---- display settings toolbar ---- */
.toolbar {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.seg { display: inline-flex; align-items: center; gap: 3px; }
.seg-label { font-size: 13px; color: var(--muted); margin-right: 2px; white-space: nowrap; }
/* The toolbar uses px so it stays put while the page text scales. */
.seg button, .theme-toggle {
  min-height: 36px;
  padding: 0 10px;
  white-space: nowrap;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}
.seg button:hover, .theme-toggle:hover { border-color: var(--border); background: var(--surface-subtle); }
.seg button[aria-pressed="true"] {
  background: var(--text); border-color: var(--text); color: var(--surface); font-weight: bold;
}
/* Show the size each button represents. */
.seg button[data-size="l"] { font-size: 15px; }
.seg button[data-size="xl"] { font-size: 17px; }
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; }
.theme-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-moon { fill: currentColor; stroke: none; }
.theme-toggle[data-current="light"] .icon-sun,
.theme-toggle[data-current="dark"] .icon-moon { display: none; }

h1 {
  margin: 0;
  font-size: clamp(1.625rem, 1.2rem + 2vw, 1.875rem);
  line-height: 1.35;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.tagline { margin: 6px 0 20px; font-size: .8125rem; color: var(--muted); }

/* ---- sections ---- */
.card { margin: 0 0 28px; }
.card h2 {
  margin: 0 0 14px;
  font-size: 1.375rem;
  line-height: 1.4;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.step { color: var(--muted); }
.prose h3 { font-size: 1rem; font-weight: bold; margin: 18px 0 4px; }
.prose p { margin: 0 0 12px; }
.prose ol, .prose ul { margin: 0 0 12px; padding-left: 1.8em; }
.prose > :last-child { margin-bottom: 0; }
.prose li + li { margin-top: 4px; }
.lead { margin: 0 0 16px; color: var(--muted); font-size: .9375rem; }

/* ---- fields ---- */
.field { margin-bottom: 16px; }
.field label, .field .label { display: block; font-weight: bold; font-size: .9375rem; margin-bottom: 4px; }
.req, .opt { font-weight: normal; font-size: .8125rem; }
.req { color: var(--error); }
.opt { color: var(--muted); }
input:not([type="checkbox"]), select {
  width: 100%;
  font: inherit;
  font-size: 1rem; /* ≥16px avoids iOS zoom-on-focus */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  min-height: 2.75rem;
}
input::placeholder { color: var(--muted); opacity: .75; }
input:not([type="checkbox"]):focus, select:focus {
  outline: 0;
  border-color: var(--progressive);
  box-shadow: 0 0 0 1px var(--progressive);
}
button:focus-visible, a:focus-visible, .done:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[aria-invalid="true"] { border-color: var(--error) !important; }
.w-mid { max-width: 18em; }
.hint { margin: 4px 0 0; font-size: .8125rem; color: var(--muted); }
.error { margin: 4px 0 0; font-size: .875rem; color: var(--error); }
.error:empty { display: none; }

.zip-row { display: flex; gap: 8px; align-items: stretch; max-width: 22rem; }
.zip-row input { flex: 1 1 8em; min-width: 0; }
.zip-row .btn-ghost { flex: none; white-space: nowrap; }
.zip-row .btn-ghost:disabled { opacity: .7; cursor: progress; }
.zip-status { margin: 4px 0 0; font-size: .875rem; }
.zip-status:empty { display: none; }
.zip-status[data-kind="ok"] { color: var(--success-border); }
.zip-status[data-kind="error"] { color: var(--error); }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row .grow { flex: 1 1 220px; }
.dob { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dob select { width: auto; flex: 0 1 auto; }
.dob select[data-f="y"] { min-width: 10.5em; }
.dob select[data-f="m"], .dob select[data-f="d"] { min-width: 4.8em; }

.person {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px 16px 0;
  margin: 0 0 14px;
}
.person legend { font-weight: bold; padding: 0 6px; margin-left: -6px; }
#signer { background: var(--surface-subtle); }
.badge {
  margin: 8px 0 0; padding: 4px 12px;
  background: var(--warning-bg); border-left: 3px solid var(--warning-border);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .875rem;
}
.badge[hidden] { display: none; }

/* ---- buttons ---- */
button { font: inherit; cursor: pointer; }
.btn-ghost, .btn-remove {
  background: var(--surface-subtle);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: bold;
}
.btn-ghost:hover, .btn-remove:hover { background: var(--surface); border-color: var(--muted); }
.btn-ghost { min-height: 2.75rem; padding: 0 16px; }
.btn-ghost[hidden] { display: none; }
.btn-remove {
  position: absolute; top: -2px; right: 12px;
  font-size: .8125rem; font-weight: normal; padding: 2px 12px; min-height: 1.875rem;
  border-radius: 999px;
}
.btn-primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 3rem; margin-top: 12px;
  text-decoration: none;
  border: 1px solid var(--progressive); border-radius: var(--radius);
  background: var(--progressive); color: var(--progressive-ink);
  font-size: 1.0625rem; font-weight: bold;
}
.btn-primary:hover { background: var(--progressive-hover); border-color: var(--progressive-hover); color: var(--progressive-ink); }
.btn-primary:disabled { opacity: .6; cursor: progress; }
.btn-primary.is-disabled { background: var(--surface-subtle); border-color: var(--border); color: var(--muted); cursor: default; }
.notice { padding: 16px 20px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-subtle); }
.notice h2 { border-bottom: 0; padding: 0; }
.notice p:last-child { margin-bottom: 0; }
@media (min-width: 600px) { .btn-primary { display: inline-flex; width: auto; padding: 0 40px; } }

/* ---- landing: details box, agreement, button ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.scroll-hint { margin: 0 0 6px; }
/* The four details scroll inside this box. The two "local" gradients scroll
   with the content and cover the two "scroll" shadows at either end, so a
   shadow shows only where there is more text to scroll to. */
.scroll-box {
  --box-bg: var(--surface-subtle);
  --edge: color-mix(in srgb, var(--text) 22%, transparent);
  max-height: min(55vh, 24rem);
  overflow-y: auto;
  padding: 4px 16px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background:
    linear-gradient(var(--box-bg) 30%, transparent) top / 100% 2.5rem no-repeat local,
    linear-gradient(transparent, var(--box-bg) 70%) bottom / 100% 2.5rem no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--edge), transparent) top / 100% .75rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--edge), transparent) bottom / 100% .75rem no-repeat scroll,
    var(--box-bg);
}
.scroll-box:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.scroll-box > h3:first-child { margin-top: 10px; }
.scroll-box > h3 { line-height: 1.5; }

.agree { text-align: center; }
.agree-statement {
  margin: 0 0 16px; padding: 14px 16px;
  text-align: left; line-height: 1.8;
  background: var(--surface-subtle);
  border-radius: var(--radius);
}
.agree-check {
  display: inline-flex; text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-weight: bold; font-size: 1rem;
}
.agree-check:has(input:checked) { border-color: var(--progressive); background: var(--surface-subtle); }
.agree .btn-primary { margin-top: 16px; }
.btn-primary.is-disabled { cursor: not-allowed; }
.btn-primary.is-disabled:hover { background: var(--surface-subtle); border-color: var(--border); color: var(--muted); }
.cta-note { margin: 6px 0 0; font-size: .8125rem; color: var(--muted); }

.tally { margin: 0 0 12px; }
.tally strong { font-size: 1.25rem; margin: 0 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: .25rem 0 0; flex: none; accent-color: var(--progressive); }
.form-error { margin-top: 12px; }
.turnstile:not(:empty) { margin-top: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- completion message ---- */
.done {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: 12px;
  padding: 16px 20px;
}
.done h2 { border-bottom: 0; margin-bottom: 8px; padding: 0; }
.done p { margin: 0 0 8px; }
.next-step {
  margin: 12px 0; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius);
}
.next-step p { margin: 0 0 6px; }
.next-step p:last-child { margin: 0; }
.receipt { display: flex; gap: 12px; align-items: baseline; margin: 12px 0; }
.receipt dt { font-size: .875rem; color: var(--muted); }
.receipt dd { margin: 0; font-size: 1.375rem; font-weight: bold; letter-spacing: .08em; font-family: ui-monospace, Menlo, Consolas, monospace; }

.foot { color: var(--muted); font-size: .75rem; padding: 16px 4px 24px; }