/* The invoice forms (DESIGN.md, mode Operate): the e-invoice creator (/de/e-rechnung-erstellen,
   /create-xrechnung) and the Dutch invoice maker (/nl/factuur-maken), which share .creator-form.
   Sections are paper panels on cream; fields, buttons, the FAQ and the page head come from site.css. */

/* Unscoped rules from before the redesign; the app shell has its own copy (screens.css), the
   billable-hours calculator its own .choice rules (guides.css). */
.button.small { padding: 6px 12px; font-size: 0.875rem; }
.choices { display: grid; gap: 8px; margin: 8px 0; }
.choices.inline { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.choice { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; margin: 0; cursor: pointer; }
.choice input { width: auto; min-height: 0; margin-top: 4px; }
.card-choice { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.submit-row .button { font-size: 1.05rem; padding: 12px 20px; }
.submit-row .button[disabled] { opacity: 0.6; cursor: progress; }

body.site .creator [hidden], body.site .creator-form [hidden] { display: none !important; }
body.site .creator-hero, body.site.maker-page .hero { margin-bottom: 32px; }

body.site .required-note { margin: 0 0 12px; color: var(--text-3); font-size: 14px; }
body.site .creator-form fieldset { min-width: 0; }
body.site .creator-form fieldset.panel { margin: 16px 0; padding: 26px 28px 28px; border: 1px solid var(--line); }
/* The legend floats so it sits inside the panel like any heading. */
body.site .creator-form fieldset.panel > legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; }
body.site .creator-form fieldset.panel > legend + * { clear: both; }
body.site .creator-form .panel h2 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; }
body.site .creator-form section.panel > h2 { margin-bottom: 6px; }
body.site .creator-form .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 16px; }
body.site .creator-form .field { min-width: 0; }
body.site .creator-form .field.wide { grid-column: 1 / -1; }
body.site .creator-form .pair { display: grid; grid-template-columns: minmax(84px, 2fr) 5fr; gap: 0 12px; min-width: 0; }
body.site .creator-form .req { color: var(--danger); font-weight: 800; }
body.site .creator-form .hint { margin: 6px 0 0; color: var(--text-3); font-size: 13.5px; line-height: 1.45; }
body.site .creator-form .panel > p.hint { margin-top: 14px; }
body.site .creator-form .field-error { margin: 6px 0 0; color: var(--danger-ink); font-size: 13.5px; font-weight: 650; line-height: 1.4; }
body.site .creator-form ul.field-error { padding-left: 20px; }
body.site .creator-form .has-error :is(input, select, textarea) { border-color: var(--danger); background-color: var(--paper); }

/* Radio choices: the supply date, the maker's language, the output file */
body.site .creator-form .supply { margin: 20px 0 0; padding: 0; border: 0; }
body.site .creator-form .supply .pair { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
body.site .creator-form .supply > legend { padding: 0; font-size: 13.5px; font-weight: 700; color: var(--text); }
body.site .creator-form .choices { display: grid; gap: 10px; margin: 10px 0; }
body.site .creator-form .choices.inline { display: flex; flex-wrap: wrap; gap: 8px 24px; }
body.site .creator-form label.choice { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; }
body.site .creator-form label.choice input { margin-top: 2px; }
body.site .creator-form .card-choice { padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out; }
body.site .creator-form .card-choice:hover { border-color: var(--ink); }
body.site .creator-form .card-choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
body.site .creator-form .card-choice strong { font-weight: 800; }
body.site .creator-form .card-choice .hint { display: inline-block; margin: 2px 0 0; font-weight: 500; }

/* Lines: stacked on phones, one row per line from 720 px. */
body.site .creator-form .lines { display: grid; gap: 12px; margin: 14px 0 16px; }
body.site .creator-form .line { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin: 0; padding: 4px 16px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); }
body.site .creator-form .line legend { padding: 0 6px; color: var(--text-2); font-size: 13px; font-weight: 800; }
body.site .creator-form .line label { margin-top: 8px; }
body.site .creator-form .line .line-desc, body.site .creator-form .line .line-vat, body.site .creator-form .line .line-foot { grid-column: 1 / -1; }
body.site .creator-form .line .line-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
body.site .creator-form .line-net { margin: 0; color: var(--text-2); font-size: 14.5px; font-variant-numeric: tabular-nums; }
body.site .creator-form .line-net output { color: var(--ink); font-weight: 800; }
@media (min-width: 720px) {
  body.site .creator-form .line { grid-template-columns: 1fr 1.1fr 1.2fr 1.6fr; }
  body.site .creator-form .line .line-desc { grid-column: 1 / -1; }
  body.site .creator-form .line .line-vat { grid-column: auto; }
}

/* Totals, laid out like the printed invoice */
body.site .creator-form .totals { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
body.site .creator-form .totals h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 800; }
body.site .creator-form .totals dl { max-width: 380px; margin: 0 0 0 auto; }
body.site .creator-form .totals dl div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; }
body.site .creator-form .totals dt { color: var(--text-2); }
body.site .creator-form .totals dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
body.site .creator-form .totals .gross { margin-top: 4px; padding-top: 8px; border-top: 1.5px solid var(--ink); font-size: 1.1rem; font-weight: 800; }
body.site .creator-form .totals .gross dt, body.site .creator-form .totals .gross dd { color: var(--ink); font-weight: 800; }
body.site .creator-form .totals .hint { text-align: right; }

body.site .creator-form .submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
body.site .creator-form .submit-row .hint { margin: 0; }
body.site .creator-form .submit-row + .hint, body.site .creator-form .output .hint + .hint { margin-top: 10px; }
body.site .creator-form > .submit-row { margin-top: 28px; }

/* The error summary: a paper box with a danger edge, its links lead to the fields */
body.site .error-summary { position: relative; margin: 16px 0 20px; padding: 18px 20px 18px 46px; border: 1.5px solid var(--danger); border-radius: 14px; background: var(--paper); color: var(--text); }
body.site .error-summary::before { content: ""; position: absolute; left: 20px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); }
body.site .error-summary:focus { outline: 3px solid var(--danger); outline-offset: 2px; }
body.site .error-summary h2 { margin: 0 0 8px; color: var(--danger-ink); font-size: 1.05rem; font-weight: 800; }
body.site .error-summary > p { margin: 0; font-weight: 600; }
body.site .error-summary ul { margin: 0; padding-left: 18px; }
body.site .error-summary li { margin: 6px 0; overflow-wrap: anywhere; }
body.site .error-summary a { color: var(--danger-ink); font-weight: 700; text-decoration-color: currentColor; }
body.site .rule-code { display: inline-block; margin-left: 6px; color: var(--text-2); font-size: 13px; }
body.site .rule-code code { padding: 1px 6px; border-radius: 6px; background: var(--field); color: var(--ink); }
body.site .error-summary details { margin-top: 2px; color: var(--text-2); font-size: 13.5px; }
body.site .error-summary summary { cursor: pointer; }
body.site .error-summary .raw { margin: 4px 0 0; overflow-wrap: anywhere; }

/* The explainer and FAQ under the creator */
body.site .creator-explainer { margin-top: 72px; padding-top: 8px; }
body.site .creator-explainer h2 { margin: 48px 0 10px; }
body.site .creator-explainer h2:first-child { margin-top: 0; }
body.site .creator-explainer p { max-width: 68ch; line-height: 1.7; }
body.site .creator-explainer .asof { margin: 0 0 8px; color: var(--text-3); font-size: 14px; font-weight: 600; }
body.site .creator-explainer .sources { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line-2); color: var(--text-2); font-size: 14px; }

@media (max-width: 760px) {
  body.site .creator-form fieldset.panel { padding: 18px 16px 20px; }
  body.site .creator-form .submit-row .button { flex: 1 1 100%; }
}