:root { --ink: #111827; --muted: #4b5563; --line: #d3d9e2; --accent: #1d4ed8; --bg: #f7f8fa; --warn-bg: #fff4d6; --warn-ink: #6b4500; --err: #b42318; }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: #fff; padding: 8px; }
.placeholder-banner { margin: 0; padding: 10px 16px; background: var(--warn-bg); color: var(--warn-ink); border-bottom: 2px solid #e0b400; font-size: 15px; }
header.site { padding: 14px 16px; background: #101b36; color: #fff; }
.brand { font-weight: 700; }
main { max-width: 560px; margin: 0 auto; padding: 24px 16px 40px; }
h1 { font-size: 1.6rem; line-height: 1.25; }
.lede { color: var(--muted); }
label { display: block; margin-top: 14px; font-weight: 600; }
.optional { font-weight: 400; color: var(--muted); }
input[type=text], input[type=email], input[type=tel], input:not([type]) { width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; }
.check input { margin-top: 5px; }
.check label { margin: 0; font-weight: 400; }
button { margin-top: 18px; font: inherit; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
button.link { background: none; color: var(--accent); border: none; padding: 0; text-decoration: underline; }
button.danger { background: var(--err); border-color: var(--err); }
.error { color: var(--err); font-weight: 600; }
.notice { background: #eef4ff; border: 1px solid #c7d7fe; border-radius: 8px; padding: 10px 12px; }
.hint { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.small { font-size: 15px; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.disclosure { white-space: pre-wrap; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
code { word-break: break-all; }
.site-footer { max-width: 560px; margin: 0 auto; padding: 16px; font-size: 15px; color: var(--muted); }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --- P3: Snapshot pages --------------------------------------------------------------------- */
.eyebrow { margin: 0 0 4px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.content-notice { margin: 0 0 16px; padding: 8px 12px; background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; font-size: 14px; font-weight: 600; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 16px 0; }
.card h2 { margin-top: 0; font-size: 1.15rem; }
.button, a.button { display: inline-block; margin-top: 8px; padding: 10px 18px; border-radius: 8px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; }
.secondary-button { background: #fff; color: var(--accent); }
form.inline { display: inline-block; margin-right: 8px; }
.progress { margin: 8px 0 20px; }
.progress label { margin: 0 0 4px; font-weight: 600; font-size: 15px; color: var(--muted); }
progress { width: 100%; height: 10px; accent-color: var(--accent); }
/* Question cards. A native <legend> straddles the fieldset's top border, so a heading that wraps to
   two or more lines sits on (and is crossed by) the card edge. Floating the legend at full width
   turns it into an ordinary block inside the card: it wraps, the card grows, and nothing touches the
   border. min-width: 0 overrides the fieldset default (min-content), which can force a page wider
   than the viewport. */
fieldset.question { min-width: 0; max-width: 100%; margin: 0 0 20px; padding: 16px 18px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
fieldset.question legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.4; overflow-wrap: anywhere; }
fieldset.question legend + * { clear: both; }
fieldset.question .hint { margin: 0 0 8px; }
fieldset.question .error { margin: 0 0 8px; }
fieldset.has-error { border-color: var(--err); }
.choice { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.choice input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
.choice label { flex: 1 1 auto; min-width: 0; margin: 0; font-weight: 400; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.actions button { margin-top: 0; }
dl.answers dt { font-weight: 600; margin-top: 10px; }
dl.answers dd { margin: 2px 0 0; color: var(--muted); }
.result-section { margin: 28px 0; }
.result-section > h2 { font-size: 1.35rem; }
ul.priorities { padding-left: 20px; font-weight: 600; }
article.area { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin: 14px 0; }
article.area h3 { margin: 0; font-size: 1.15rem; }
article.area h4 { margin: 14px 0 4px; font-size: 1rem; }
.tag { display: inline-block; margin: 8px 0 0; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .03em; border: 1px solid var(--line); background: #f3f4f6; color: #374151; }
.tag-D { background: #eef4ff; border-color: #c7d7fe; color: #1e3a8a; }
.tag-R { background: #f5f3ff; border-color: #ddd6fe; color: #4c1d95; }
.tag-O { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.tag-N { background: #f3f4f6; border-color: #d1d5db; color: #374151; }
ul.asks li { margin: 4px 0; }
ul.checklist { list-style: none; padding: 0; }
ul.checklist li { margin: 6px 0; }
ul.checklist form { margin: 0; }
.check-button { display: flex; gap: 10px; align-items: flex-start; width: 100%; margin: 0; padding: 10px 12px; text-align: left; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-weight: 400; }
.check-button .box { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--accent); border-radius: 4px; color: var(--accent); font-weight: 700; line-height: 1; }
li.done .check-button { color: var(--muted); text-decoration: line-through; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
aside.disclaimer { margin-top: 28px; padding: 12px 16px; border-top: 1px solid var(--line); }
aside.disclaimer p { margin: 0 0 8px; }

@media print {
  .placeholder-banner, header.site, .site-footer, form button:not(.check-button), .actions, a.button, .progress { display: none; }
  body { background: #fff; font-size: 12pt; }
  main { max-width: none; padding: 0; }
  article.area, .card { break-inside: avoid; border-color: #999; }
  .check-button { border: none; padding: 2px 0; }
}

/* --- P4: consultation request and status ----------------------------------------------------- */
textarea { width: 100%; max-width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--line); border-radius: 8px; background: #fff; resize: vertical; }
.consult-status { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 12px 16px; margin: 8px 0 16px; }
.consult-status p { margin: 4px 0; }
.consult-title { font-weight: 700; }
@media print { .print-tip { display: none; } }