:root {
  color-scheme: light;
  --color-brand-purple: #47449D;
  --color-aster-lavender: #A6A6E2;
  --color-lavender-soft: #EFEEF9;
  --color-neutral-dark: #29283A;
  --color-neutral-medium: #747286;
  --color-neutral-light: #A3A3B3;
  --color-neutral-border: #E6E5EF;
  --color-app-bg: #F8F8FC;
  --radius-card: 16px;
  --radius-badge: 8px;
  --radius-pill: 9999px;
  --success: #24805b;
  --warning: #a46b24;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: var(--color-app-bg); color: var(--color-neutral-dark); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
/* Prevent Safari iOS focus auto-zoom without disabling pinch-to-zoom. */
input, textarea, select { font-size:16px; }
button, label, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, .segment:focus-within { outline: 3px solid rgba(71,68,157,.28); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.loading-state { padding: 35vh 20px; text-align: center; color: var(--color-neutral-medium); }
.site-header { background: var(--color-brand-purple); color:white; }
.site-header-inner { max-width: 764px; margin:auto; padding: 12px 20px; display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:16px; font-weight:760; letter-spacing:-.035em; }
.brand-logo { width:35px; height:35px; object-fit:contain; }
.brand-letter { display:none; width:32px; height:32px; align-items:center; justify-content:center; background:rgba(255,255,255,.18); border-radius:10px; font-weight:800; }
.brand-label { opacity:.78; font-size:11px; font-weight:500; letter-spacing:.035em; }
.main { max-width:764px; margin:26px auto 50px; padding:0 16px; }
.form-shell { background:#fff; border:1px solid var(--color-neutral-border); border-radius:22px; box-shadow:0 3px 18px rgba(71,68,157,.05); padding:30px 30px 26px; }
.eyebrow { color:var(--color-brand-purple); font-size:10px; font-weight:760; letter-spacing:.14em; text-transform:uppercase; }
.form-heading { margin:12px 0 9px; font-size:clamp(28px,4.8vw,35px); letter-spacing:-.047em; font-weight:780; line-height:1.14; }
.form-description { font-size:14px; line-height:1.68; color:var(--color-neutral-medium); margin:0; max-width:560px; }
.section-divider { border:0; border-top:1px solid var(--color-neutral-border); margin:25px 0; }
.section-title { font-size:16px; font-weight:740; letter-spacing:-.025em; line-height:1.35; margin:0 0 16px; }
.field-stack { display:grid; gap:16px; }
.field-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.field { min-width:0; }
.field label { display:block; font-size:12px; font-weight:650; margin-bottom:7px; color:var(--color-neutral-dark); }
.required { color:var(--color-brand-purple); font-weight:700; }
.optional { color:var(--color-neutral-medium); font-size:11px; font-weight:450; }
.control { width:100%; min-width:0; max-width:100%; border:1px solid var(--color-neutral-border); background:#fff; color:var(--color-neutral-dark); border-radius:10px; padding:11px 12px; min-height:46px; font-size:16px; line-height:1.4; transition:border-color .16s,box-shadow .16s; }
.control::placeholder { color:#9B9AA8; }
/* Native iOS date formatting (e.g. Buddhist Era) can exceed a half-width input.
   The real date input remains clickable over a compact, locale-independent display. */
.field-row .field { min-width:0; max-width:100%; }
.date-picker-control { position:relative; display:flex; align-items:center; justify-content:space-between; gap:4px; width:100%; min-width:0; max-width:100%; min-height:46px; padding:11px 10px; border:1px solid var(--color-neutral-border); border-radius:10px; background:#fff; overflow:hidden; }
.date-display { font-size:16px; line-height:1.4; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--color-neutral-dark); }
.date-picker-control .icon { width:16px; height:16px; color:var(--color-neutral-medium); }
.date-picker-control input[type="date"] { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer; z-index:1; }
.date-picker-control:focus-within { border-color:var(--color-brand-purple); box-shadow:0 0 0 3px rgba(71,68,157,.1); }
.control:focus { outline:0; border-color:var(--color-brand-purple); box-shadow:0 0 0 3px rgba(71,68,157,.10); }
.control[aria-invalid="true"] { border-color:#b15e62; }
textarea.control { resize:vertical; min-height:88px; }
.section-heading-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.section-subtitle { color:var(--color-neutral-medium); font-size:12px; line-height:1.5; margin:3px 0 0; }
.progress-counter { font-size:12px; color:var(--color-brand-purple); background:var(--color-lavender-soft); border-radius:999px; padding:6px 11px; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
.question-list { display:grid; gap:12px; }
.question-card { padding:19px 20px 17px; background:#fff; border:1px solid var(--color-neutral-border); border-radius:var(--radius-card); box-shadow:0 2px 8px rgba(71,68,157,.035); }
.question-index { color:var(--color-neutral-light); font-size:10px; font-weight:720; letter-spacing:.1em; margin:0 0 7px; }
.question-title { font-size:clamp(19px,3vw,22px); font-weight:760; line-height:1.24; letter-spacing:-.038em; margin:0 0 7px; }
.question-description { font-size:13px; color:var(--color-neutral-medium); line-height:1.54; margin:0 0 16px; }
.answer-line { display:grid; grid-template-columns:minmax(0,1fr) 42px; align-items:center; gap:9px; }
.segmented { display:grid; grid-template-columns:.78fr 1.25fr 1fr; padding:3px; gap:2px; border:1px solid var(--color-neutral-border); border-radius:var(--radius-pill); min-width:0; }
.segment { min-width:0; position:relative; cursor:pointer; }
.segment input { position:absolute; opacity:0; width:1px; height:1px; }
.segment-inner { border-radius:var(--radius-pill); min-height:42px; padding:5px 1px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; color:var(--color-neutral-medium); transition:background-color .14s,color .14s; }
.segment-inner .icon { width:18px; height:18px; stroke-width:1.85; }
.segment-text { font-size:10px; line-height:1.12; font-weight:520; letter-spacing:-.008em; text-align:center; white-space:nowrap; }
.segment input:focus-visible + .segment-inner { outline:2px solid var(--color-aster-lavender); outline-offset:-1px; }
.segment input:checked + .segment-inner { background:var(--color-lavender-soft); color:var(--color-brand-purple); font-weight:650; }
.segment[data-option="ok"] input:checked + .segment-inner { background:#e9f6ef; color:var(--success); }
.segment[data-option="follow"] input:checked + .segment-inner { background:#fff4e7; color:var(--warning); }
.segment[data-option="not"] input:checked + .segment-inner { background:#efeff5; color:var(--color-neutral-dark); }
.segment input:checked + .segment-inner .segment-text { font-weight:700; }
.note-toggle { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--color-neutral-border); border-radius:50%; background:#fff; color:var(--color-neutral-medium); }
.note-toggle[aria-expanded="true"] { color:var(--color-brand-purple); background:var(--color-lavender-soft); border-color:var(--color-aster-lavender); }
.icon { width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.note-field { margin-top:12px; }
.note-field .control { min-height:75px; font-size:16px; }
.extra-note-card { margin-top:12px; border:1px dashed #c8c5e6; border-radius:var(--radius-card); padding:19px 20px; background:#fcfbff; }
.extra-note-card .question-description { margin-bottom:13px; }
.extra-note-card .control { background:#fff; min-height:100px; font-size:16px; }
.extra-tag { color:var(--color-brand-purple); font-weight:700; letter-spacing:.025em; }
.submit-area { margin-top:25px; }
.progress-line { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:8px; color:var(--color-neutral-medium); }
.progress-line strong { color:var(--color-neutral-dark); font-variant-numeric:tabular-nums; }
.progress-track { border-radius:99px; background:var(--color-lavender-soft); height:5px; overflow:hidden; }
.progress-fill { background:var(--color-brand-purple); height:100%; border-radius:99px; width:0; transition:width .22s; }
.submit-button { margin-top:21px; width:100%; border:0; border-radius:12px; min-height:49px; display:flex; align-items:center; justify-content:center; gap:9px; background:var(--color-brand-purple); color:#fff; font-size:14px; font-weight:740; transition:background-color .15s; }
.submit-button:hover:not(:disabled) { background:#383582; }
.submit-button .icon { width:17px; height:17px; }
.submit-caption { margin:11px 0 0; font-size:11px; color:var(--color-neutral-light); text-align:center; line-height:1.5; }
.error-message { margin:12px 0 0; font-size:12px; line-height:1.5; color:#a33d49; }
.form-footer { text-align:center; font-size:11px; color:var(--color-neutral-light); margin-top:16px; }
.confirm-dialog { width:min(100% - 28px, 425px); max-height:min(92dvh,820px); overflow-y:auto; margin:auto; padding:25px; background:#fff; color:var(--color-neutral-dark); border:1px solid var(--color-neutral-border); border-radius:20px; box-shadow:0 25px 85px rgba(18,16,53,.22); }
.confirm-dialog::backdrop { background:rgba(32,30,61,.45); backdrop-filter:blur(2px); }
.dialog-header { display:flex; justify-content:space-between; align-items:start; }
.dialog-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:var(--color-lavender-soft); color:var(--color-brand-purple); }
.close-button { display:grid; place-items:center; width:35px; height:35px; color:var(--color-neutral-medium); border:0; border-radius:50%; background:transparent; }
.close-button:hover { background:#f3f2f9; }
.dialog-title { font-size:22px; font-weight:770; letter-spacing:-.035em; margin:17px 0 6px; }
.dialog-description { font-size:13px; line-height:1.58; color:var(--color-neutral-medium); margin:0 0 18px; }
.summary-box { background:var(--color-app-bg); border:1px solid var(--color-neutral-border); border-radius:12px; padding:12px 14px; display:grid; gap:11px; }
.summary-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:12px; }
.summary-row dt { color:var(--color-neutral-medium); }
.summary-row dd { margin:0; font-weight:660; text-align:right; overflow-wrap:anywhere; }
.summary-divider { border-top:1px solid var(--color-neutral-border); }
.dialog-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:9px; margin-top:17px; }
.action-button { min-height:43px; border-radius:10px; font-size:13px; font-weight:720; border:1px solid var(--color-neutral-border); background:#fff; color:var(--color-neutral-dark); }
.action-button.primary { color:#fff; border-color:var(--color-brand-purple); background:var(--color-brand-purple); }
.action-button.primary:disabled { background:#8e8bbc; }
.dialog-warning { margin-top:14px; color:#a36c28; font-size:12px; line-height:1.5; }
.dialog-error { margin:12px 0 0; color:#ad434c; font-size:12px; line-height:1.5; }
.success-state { text-align:center; padding:30px 4px 35px; }
.success-mark { width:61px; height:61px; margin:0 auto 18px; color:var(--success); background:#e8f7ed; border-radius:50%; display:grid; place-items:center; }
.success-mark .icon { width:31px; height:31px; }
.success-title { font-size:26px; margin:0 0 9px; letter-spacing:-.04em; }
.success-state p { color:var(--color-neutral-medium); font-size:14px; line-height:1.65; }
.success-ref { font-size:12px; margin-top:20px; color:var(--color-neutral-medium); overflow-wrap:anywhere; }
@media (max-width: 520px) {
  .site-header-inner { min-height:58px; }
  .main { margin:12px auto 35px; padding:0 10px; }
  .form-shell { padding:22px 15px 20px; border-radius:17px; }
  .field-row { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .question-card, .extra-note-card { padding:17px 13px 15px; }
  .question-title { font-size:20px; }
  .question-description { font-size:12.5px; }
  .segmented { grid-template-columns:.70fr 1.35fr .95fr; }
  .segment-text { font-size:9px; letter-spacing:-.016em; }
  .section-divider { margin:22px 0; }
  .confirm-dialog { padding:21px; }
}
@media (max-width: 360px) {
  .field-row { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .form-shell { padding-inline:12px; }
  .question-card, .extra-note-card { padding-inline:10px; }
  .segment-text { font-size:8.5px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }