.il-explain > * + *, .il-tab-panel > * + * { margin-top: 16px; }
.il-explain ol, #il-dialog ol { list-style: decimal; padding-left: 1.5em; }
.il-explain li + li, #il-dialog li + li { margin-top: 10px; }
#il-fields { min-width: 0; border: 0; }
#il-fields legend { padding: 0; margin: 14px 0; color: var(--text-dim); }
.il-errors { padding: 18px; border: 2px solid var(--bad-ink); border-radius: 8px; margin: 18px 0; scroll-margin-top: calc(var(--nav-h) + 24px); }
.il-errors ul { list-style: disc; padding-left: 1.25em; margin-top: 10px; }
.il-errors li + li { margin-top: 8px; }
.il-errors a, .il-error { color: var(--bad-ink); }
.il-error { font-weight: 600; }
#il-form [aria-invalid="true"] { border: 2px solid var(--bad-ink); }
#il-form input, #il-form select { scroll-margin-block: calc(var(--nav-h) + 24px) 32px; }
.il-success { color: var(--good-ink); font-weight: 600; }
.il-success:not(:empty) { margin-top: 18px; padding: 14px; border: 1px solid var(--good-ink); border-radius: 8px; }
.il-code { padding: 20px; margin-top: 24px; background: var(--surface); border: 1px solid var(--text-faint); border-radius: 10px; min-width: 0; }
.il-code summary { font-weight: 700; cursor: pointer; }
.il-code[open] summary { margin-bottom: 14px; }
.il-code pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); color: var(--code-ink); padding: 18px; margin: 14px 0; border-radius: 8px; max-width: 100%; font-size: .85rem; line-height: 1.7; }
.il-code code { font-family: var(--mono); }
.il-copy-status:not(:empty) { margin-top: 12px; }
.dg-page .il-check { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0; cursor: pointer; }
.il-check input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 4px; accent-color: var(--accent-ink); }
#il-dialog { margin: auto; width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: clamp(20px, 5vw, 36px); color: var(--text); background: var(--surface); border: 2px solid var(--text-faint); border-radius: 14px; overflow: auto; }
#il-dialog::backdrop { background: rgba(0, 0, 0, .72); }
#il-dialog > * + * { margin-top: 18px; }
#il-dialog h2 { font-size: 1.5rem; line-height: 1.35; }
#il-dialog-title:focus { outline: 3px solid var(--accent-ink); outline-offset: 4px; }
.il-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.il-tabs button { flex: 1 1 auto; min-height: 48px; padding: 10px 14px; background: var(--bg); border: 1px solid var(--text-faint); border-radius: 6px; color: var(--text); font: inherit; cursor: pointer; }
.il-tabs [aria-selected="true"] { border: 2px solid var(--accent-ink); box-shadow: inset 0 -3px 0 var(--accent-ink); font-weight: 700; }
.il-tab-panel { padding: 16px; border: 1px solid var(--text-faint); border-radius: 8px; }
.il-tab-panel + .il-tab-panel { margin-top: 18px; }
.il-tabs:not([hidden]) ~ .il-tab-panel { margin-top: 0; }
.il-focus-readout { padding: 14px; border: 1px solid var(--text-faint); border-radius: 8px; overflow-wrap: anywhere; font-family: var(--mono); }
.dg-page [hidden] { display: none !important; }
@media print {
  .il-copy, #il-open-dialog, #il-dialog, .il-tabs, #il-inspect, #il-focus-readout { display: none !important; }
  .dg-page .il-tab-panel[hidden] { display: block !important; margin-top: 18px; }
  .il-code, .il-tab-panel, .il-errors { break-inside: avoid; }
}
