/* Shared field-help positioning for embedded calculators. */
input + .hint, select + .hint, textarea + .hint {
  display: block; margin-top: 4px;
}

/* Embedded dependent rows keep their existing label/control pair, with help below. */
.krow { flex-wrap: wrap; }
.krow > .hint { flex-basis: 100%; }

/* Share label height across each two-field row, including wrapped mobile labels. */
/* label と入力欄の2行だけを揃え、後続（注意書きが2つ以上でも）は入力欄の下に順に積む（style.css と同じ規則） */
/* 行間は0（style.css の gap: 0 12px と同じ）。.grid の gap:8px が残ると、使われない6行ぶんの
   行間（8px×7=56px）が欄の下に空白として溜まる（2026-10-01〜10-26、embed 17ページで出ていた）。 */
.grid.field-pair { grid-template-rows: repeat(8, auto); row-gap: 0; }
.grid.field-pair > div { display: grid; grid-template-rows: subgrid; grid-row: span 8; min-width: 0; grid-auto-flow: row; }
.grid.field-pair > div > label:first-of-type { grid-row: 1; align-self: end; }
.grid.field-pair > div > :is(input,select,textarea):first-of-type { grid-row: 2; align-self: start; }
.grid.field-pair > div > * { grid-column: 1; }

/* Generic text-field width must not consume the caption beside a choice control. */
.radios input:is([type="radio"],[type="checkbox"]) { width: auto; flex: none; padding: 0; }

/* A caption with b/span children is one sentence, not separate flex columns. */
.chk { display: block; position: relative; padding-left: 22px; }
.chk > input:is([type="radio"],[type="checkbox"]) { position: absolute; left: 0; top: 0; width: auto; }
.chk > .hint { display: block; }

/* Empty surfaces stay absent before scripts run and after state transitions. */
:is(.note,.warn,.result,section.related,.rel-block,.next-read,[role="alert"],[role="status"]):empty,
[data-empty-surface] { display: none !important; }
/* The interactive target includes the entire visible control. */
button, summary, a[role="button"] { min-width: 44px; min-height: 44px; box-sizing: border-box; }
summary { padding-block: 10px; }
a[role="button"] { display: inline-flex; align-items: center; justify-content: center; }
:is(button,summary,a,input,select,textarea):focus-visible { outline: 2px solid #166b4b; outline-offset: 3px; }

.numeric-token { white-space: nowrap; }

.result .scroll-wrap, [role="status"] .scroll-wrap { max-width: 100%; overflow-x: auto; }

/* Field-linked errors (assets/a11y_error.js): mark the field and repeat the message beside it. */
:is(input, select, textarea)[aria-invalid="true"] { border-color: #b4232a; box-shadow: 0 0 0 1px #b4232a; }
.warn.field-error { margin: 4px 0 0; }
.field-error + .hint { display: block; margin-top: 4px; }
.hint .input-example { display: block; font-weight: 600; }
/* UA 既定の矢印は枠の右端に貼り付くので、本体(style.css)と同じ自前の矢印を内側に置く。 */
select {
  appearance: none;
  padding-right: 32px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%235b6b7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  cursor: pointer;
}