/* The Kindesunterhalt module's own parts, on top of the shared .u-… vocabulary (design/DESIGN.md §6).
   Every selector starts with .unt-kindesunterhalt (docs/MODULES.md); only the theme's tokens, no colour of its own. */

/* With the script, the answer follows typing: the button is only for readers without it. */
.unt-kindesunterhalt.is-live .unt-kindesunterhalt__go { display: none; }
.unt-kindesunterhalt__go { margin: 0 0 var(--sp-4); }

/* One child: age and birth month side by side, then what only matters from 18, then the rest folded. */
.unt-kindesunterhalt__kind { margin: var(--sp-3) 0 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--rule); }
.unt-kindesunterhalt__kh { margin: 0 0 var(--sp-2); font: 750 var(--fs-ui)/1.3 var(--font-ui); color: var(--ink); }
.unt-kindesunterhalt__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
.unt-kindesunterhalt__pair .u-field { margin-bottom: var(--sp-3); }
.unt-kindesunterhalt__pair .u-label { min-height: 2.6em; display: flex; align-items: flex-end; }
.unt-kindesunterhalt .u-field[hidden], .unt-kindesunterhalt fieldset[hidden] { display: none; }
/* A field never grows wider than its column: long court names in the select, the age pair at 320 px. */
.unt-kindesunterhalt .u-field { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.unt-kindesunterhalt .u-box { min-width: 0; }
.unt-kindesunterhalt .u-input { width: 100%; }

/* Choices with long words: a plain list of radios, each a 44 px row. */
.unt-kindesunterhalt__radios { margin: 0 0 var(--sp-3); padding: 0; border: 0; min-width: 0; }
.unt-kindesunterhalt__radios legend { padding: 0; margin: 0 0 var(--sp-1); font: 600 var(--fs-ui)/1.3 var(--font-ui); color: var(--ink); }
.unt-kindesunterhalt__radios label, .unt-kindesunterhalt__tick { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: 44px; padding: 10px 0 0; font: 400 var(--fs-ui)/1.35 var(--font-ui); color: var(--ink); cursor: pointer; }
.unt-kindesunterhalt__radios input, .unt-kindesunterhalt__tick input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--petrol); }
.unt-kindesunterhalt__radios .u-help { margin-top: var(--sp-2); }

.unt-kindesunterhalt__extra { margin: 0 0 var(--sp-2); }
.unt-kindesunterhalt__extra > summary { display: flex; align-items: center; min-height: 44px; font: 650 var(--fs-ui)/1.3 var(--font-ui); color: var(--petrol); cursor: pointer; }
.unt-kindesunterhalt__extra > summary::-webkit-details-marker { display: none; }
.unt-kindesunterhalt__extra > summary::before { content: ""; flex: none; width: 8px; height: 8px; margin: 0 12px 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.unt-kindesunterhalt__extra[open] > summary::before { transform: rotate(45deg); }
.unt-kindesunterhalt__extra[open] > summary { margin-bottom: var(--sp-2); }
.unt-kindesunterhalt select.u-input { font-size: var(--fs-ui); font-weight: 600; text-overflow: ellipsis; }

/* The notes under the Rechenweg. */
.unt-kindesunterhalt__notes { margin: var(--sp-2) 0 var(--sp-4); padding: 0 0 0 1.2em; max-width: 46rem; font: 400 var(--fs-small)/1.5 var(--font-ui); color: var(--ink); }
.unt-kindesunterhalt .unt-kindesunterhalt__notes li { display: list-item; margin: 0 0 var(--sp-2); padding: 0; border: 0; font: inherit; }
.unt-kindesunterhalt .unt-kindesunterhalt__notes li::before { content: none; }
.unt-kindesunterhalt .u-note ul { margin: var(--sp-1) 0 0; padding: 0 0 0 1.2em; }
.unt-kindesunterhalt .u-table .u-sub { white-space: normal; }

/* The Düsseldorfer Tabelle: five columns at every width (DESIGN §6); Prozentsatz and Bedarfskontrollbetrag sit under each group's number. */
.unt-kindesunterhalt--dt { margin: var(--sp-5) 0; }
.unt-kindesunterhalt__dtform { margin: 0 0 var(--sp-4); }
.unt-kindesunterhalt__dtform .u-field { max-width: 22rem; }
.unt-kindesunterhalt__dtout .u-say { max-width: 46rem; }
/* In the text the theme lets a wide table scroll inside itself on a phone; this one fits as it is: its first column wraps. */
.unt-kindesunterhalt .u-dt { display: table; overflow: visible; }
.unt-kindesunterhalt .u-dt th:first-child, .unt-kindesunterhalt .u-dt th:first-child small { white-space: normal; }
/* Narrow side padding on a phone, the theme's 12 px from about 600 px (no media query: the cells' padding follows the width). */
.unt-kindesunterhalt .u-dt td, .unt-kindesunterhalt .u-dt thead th:not(:first-child) { padding-left: clamp(2px, (100vw - 340px) / 20, 12px); padding-right: clamp(2px, (100vw - 340px) / 20, 12px); }
.unt-kindesunterhalt .u-dt td.is-cell { padding-left: 4px; padding-right: 4px; }
.unt-kindesunterhalt .u-dt td { font-stretch: 80%; }