.validator { border: 1px solid var(--md-default-fg-color--lightest); border-radius: .3rem; padding: 1rem; }
.validator label { display: block; font-weight: 600; margin: .6rem 0 .25rem; }
.validator input, .validator select, .validator textarea { font: inherit; border: 1px solid #718096; border-radius: .2rem; padding: .45rem; max-width: 100%; background: var(--md-default-bg-color); color: var(--md-default-fg-color); }
.validator textarea { display: block; width: 100%; font-family: ui-monospace, monospace; font-size: .7rem; resize: vertical; }
.validator button { background: #334699; color: white; padding: .55rem .9rem; border-radius: .2rem; cursor: pointer; font-weight: 600; }
.validator button:disabled { opacity: .6; cursor: wait; }
.validator :focus-visible { outline: 3px solid #b05c00; outline-offset: 3px; }
.validator-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin: .6rem 0; }
.validator #text-help { font-size: .75rem; }
#validation-summary { font-weight: 600; }
#validation-summary[data-valid="true"] { color: #17623c; }
#validation-summary[data-valid="false"] { color: #a32121; }
#validation-errors { overflow-wrap: anywhere; }
.sample-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.sample-nav a, .sample-nav span { padding: .4rem .8rem; border: 1px solid #c6cbd7; border-radius: .25rem; }
.sample-nav [aria-current] { background: #334699; color: #fff; font-weight: 600; }
.sample-meta { color: #505a6c; }
.md-typeset .sample-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0; }
.sample-count { border: 1px solid #d6dae2; border-top: 4px solid #718096; border-radius: .3rem; padding: .65rem; }
.md-typeset .sample-count dt { margin: 0; font-size: .72rem; font-weight: 600; }
.md-typeset .sample-count dd { margin: .25rem 0 0; font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.sample-count.full { border-top-color: #287449; }
.sample-count.partial { border-top-color: #936408; }
.sample-count.unaddressed { border-top-color: #ac3030; }
.sample-rule { margin: 1.3rem 0; padding: 1rem; border: 1px solid #d6dae2; border-radius: .3rem; overflow-wrap: anywhere; }
.md-typeset .sample-rule h3 { margin: 0 0 .5rem; font-weight: 650; }
.sample-rule-id { display: block; font-family: ui-monospace, monospace; font-size: .7rem; margin-bottom: .2rem; }
.sample-rule-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; font-size: .72rem; }
.sample-status { display: inline-block; padding: .2rem .5rem; border-radius: .2rem; font-weight: 650; }
.sample-status.full { color: #205b39; background: #eaf5ed; }
.sample-status.partial { color: #754e00; background: #fff5da; }
.sample-status.unaddressed { color: #922424; background: #fcecec; }
.sample-status.na { color: #4a5568; background: #edf0f5; }
.md-typeset .sample-rule dl { margin-bottom: 0; }
.md-typeset .sample-rule dt { font-size: .72rem; font-weight: 650; margin-top: .8rem; }
.md-typeset .sample-rule dd { margin: .2rem 0 0; white-space: pre-wrap; }
.sample-nav :focus-visible, .sample-rule a:focus-visible { outline: 3px solid #b05c00; outline-offset: 3px; }
@media (max-width: 600px) { .md-typeset .sample-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .sample-rule { break-inside: avoid; } .sample-nav { display: none; } }
/* Validator results must remain readable in both site palettes. */
.validator #validation-summary:focus { outline: 3px solid #b05c00; outline-offset: .2rem; }
[data-md-color-scheme="slate"] #validation-summary[data-valid="true"] { color: #80cbc4; }
[data-md-color-scheme="slate"] #validation-summary[data-valid="false"] { color: #ffb4ab; }
.validator .validator-row { align-items: center; }

/* Keep each offering on its own row in the example index. */
.md-typeset .grid.example-cards { grid-template-columns: minmax(0, 1fr); }