/* Shared accessibility rules, after the visual layouts and page-specific styles. */
:root, [data-theme="light"] { --text-secondary: #5d6675; --control-border: #858594; --error-color: #b91c1c; }
[data-theme="dark"] { --text-secondary: #a7aebb; --control-border: #858590; --error-color: #f87171; }
html { scroll-padding-block: 1.5rem; }
:where(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-block: 6rem 8rem; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 100001; padding: .75rem 1rem; border: 2px solid var(--primary); border-radius: .5rem; background: var(--card-solid); color: var(--primary); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
#main-content:focus { outline: none; }
:root :where(input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), select, textarea) { border-color: var(--control-border); }
::placeholder { color: var(--text-secondary); opacity: 1; }
:root :where(a, button, input, select, textarea, summary, [role="button"]):focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
:root [aria-invalid="true"] { border-color: var(--error-color); }
.field-error { color: var(--error-text); font-size: .875rem; margin-top: .5rem; }
.error-heading { font-size: 1.125rem; margin-bottom: .5rem; }
.error-message ul { margin: .75rem 0 .25rem; padding-left: 1.25rem; }
.error-message a { color: inherit; text-decoration: underline; }
.form-hint { color: var(--text-secondary); font-size: .875rem; margin-bottom: 1.25rem; }
.options-header { gap: 1rem; }
.options-header > div { flex: 1; }
.options-header .btn { flex-shrink: 0; }
.document-options { scroll-padding-block-start: 7rem; }
.options-fields [tabindex="-1"]:focus { outline: 2px solid var(--primary); outline-offset: 3px; }
.removal-notice { flex-wrap: wrap; }
.removal-notice > span { flex: 1; min-width: 10rem; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--primary); }
.btn-danger { background: var(--error-text); color: var(--card-solid); }
[data-theme="dark"] .btn-danger { background: #991b1b; color: #fff; }
#card-errors { color: #b91c1c; }
[data-theme="dark"] #card-errors { color: #fca5a5; }
@media (max-width: 760px) {
:root { --mobile-nav-height: calc(4.75rem + env(safe-area-inset-bottom)); }
html { scroll-padding-bottom: calc(var(--mobile-nav-height) + 1rem); }
body { padding-bottom: var(--mobile-nav-height); }
.nav-link { min-height: 3.375rem; }
.options-header { flex-wrap: wrap; }
.option-row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.option-row input[type="number"] { justify-self: start; }
.workspace-dialog, .document-options { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
.btn, .draft-list, .upload-dropzone, .print-color label { border: 1px solid ButtonText; }
.nav-link.active, .shipping-option.selected, .print-color label:has(input:checked) { outline: 2px solid Highlight; }
}
/* Reflow when text is enlarged or users increase letter and word spacing. */
.checkout-steps, .summary-row, .info-row, .shipping-header { flex-wrap: wrap; }
:where(input, select, textarea, fieldset) { min-width: 0; max-width: 100%; }
.draft-list { container-type: inline-size; }
@container (max-width: 20rem) {
.draft-open { flex-wrap: wrap; }
.draft-info { flex-basis: 100%; }
}
@media (max-width: 760px) {
.nav-link { min-width: 0; padding-inline: .25rem; overflow-wrap: anywhere; }
.nav-link span { max-width: 100%; }
}
.container .back-link, .container .tracking-link { color: var(--primary); }
#main-content :is(h1, h2, h3, .btn) { overflow-wrap: anywhere; }
.upload-dropzone .btn { min-width: min(13rem, 100%); max-width: 100%; }
.alternative-sources { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.active-order-grid { container-type: inline-size; }
.active-order-card { min-width: 0; overflow-wrap: anywhere; }
@container (max-width: 20rem) {
.active-order-summary { flex-wrap: wrap; }
.active-order-summary > div { flex-basis: 100%; order: 2; }
}
.status-badge { max-width: 100%; overflow-wrap: anywhere; }
.detail-label { overflow-wrap: anywhere; }
.order-card { container-type: inline-size; }

.error-message, .field-error, .form-hint, label, .modal-description, .list-item-subtitle, .auth-container summary { overflow-wrap: anywhere; }