/*
 * Haiti School Documents — front-end design system.
 * Everything is scoped under .hsd-app so the plugin never restyles the theme.
 * Tokens are overridden at runtime from the plugin settings (inline CSS variables).
 */

.hsd-app {
	--hsd-primary: #0042ac;
	--hsd-primary-600: #00368d;
	--hsd-primary-50: #eef3fc;
	--hsd-secondary: #00d3fb;
	--hsd-accent: #83fd80;
	--hsd-on-primary: #ffffff;
	--hsd-text: #0f172a;
	--hsd-text-2: #334155;
	--hsd-muted: #5b6678;
	--hsd-border: #d9dfe8;
	--hsd-border-strong: #b8c2d1;
	--hsd-surface: #ffffff;
	--hsd-surface-2: #f6f8fb;
	--hsd-success: #146c43;
	--hsd-success-bg: #e8f6ee;
	--hsd-warning: #8a5300;
	--hsd-warning-bg: #fff4e0;
	--hsd-danger: #b42318;
	--hsd-danger-bg: #fdecea;
	--hsd-info: #0b5cad;
	--hsd-info-bg: #e9f2fd;
	--hsd-radius: 12px;
	--hsd-radius-sm: 8px;
	--hsd-shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
	--hsd-shadow-2: 0 8px 24px rgba(15, 23, 42, .10);
	--hsd-focus: 0 0 0 3px rgba(0, 66, 172, .35);
	--hsd-font: inherit;
	--hsd-dur: 180ms;
	--hsd-ease: cubic-bezier(.2, .8, .2, 1);

	font-family: var(--hsd-font);
	color: var(--hsd-text);
	font-size: 16px;
	line-height: 1.55;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
}

.hsd-app *,
.hsd-app *::before,
.hsd-app *::after { box-sizing: inherit; }
.hsd-app [hidden] { display: none !important; }

.hsd-app :where(h1, h2, h3, h4) { color: var(--hsd-text); line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
.hsd-app :where(h2) { font-size: 1.375rem; }
.hsd-app :where(h3) { font-size: 1.125rem; }
.hsd-app :where(p) { margin: 0 0 .75em; }
.hsd-app :where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
.hsd-app a:where(:not(.hsd-btn):not(.hsd-chip)) { color: var(--hsd-primary); text-underline-offset: 2px; }
.hsd-app a:where(:not(.hsd-btn):not(.hsd-chip)):hover { color: var(--hsd-primary-600); }
.hsd-app :focus-visible { outline: none; box-shadow: var(--hsd-focus); border-radius: 4px; }
.hsd-muted { color: var(--hsd-muted); }
.hsd-small { font-size: .875rem; }
.hsd-num { font-variant-numeric: tabular-nums; }
.hsd-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hsd-stack > * + * { margin-top: 1rem; }
.hsd-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.hsd-row--between { justify-content: space-between; }
.hsd-spacer { flex: 1; }

/* Icons */
.hsd-icon { width: 20px; height: 20px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.hsd-icon--lg { width: 28px; height: 28px; }

/* Buttons */
.hsd-app .hsd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 44px; padding: .625rem 1.125rem; border-radius: var(--hsd-radius-sm);
	border: 1px solid var(--hsd-border-strong); background: var(--hsd-surface); color: var(--hsd-text);
	font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
	transition: background-color var(--hsd-dur) var(--hsd-ease), border-color var(--hsd-dur) var(--hsd-ease), box-shadow var(--hsd-dur) var(--hsd-ease), transform 120ms var(--hsd-ease);
	touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.hsd-app .hsd-btn:hover { background: var(--hsd-surface-2); color: var(--hsd-text); }
.hsd-app .hsd-btn:active { transform: scale(.98); }
.hsd-app .hsd-btn--primary { background: var(--hsd-primary); border-color: var(--hsd-primary); color: var(--hsd-on-primary); }
.hsd-app .hsd-btn--primary:hover { background: var(--hsd-primary-600); border-color: var(--hsd-primary-600); color: var(--hsd-on-primary); }
.hsd-app .hsd-btn--ghost { background: transparent; border-color: transparent; color: var(--hsd-primary); }
.hsd-app .hsd-btn--ghost:hover { background: var(--hsd-primary-50); color: var(--hsd-primary-600); }
.hsd-app .hsd-btn--danger { color: var(--hsd-danger); border-color: #f1b7b1; }
.hsd-app .hsd-btn--danger:hover { background: var(--hsd-danger-bg); color: var(--hsd-danger); }
.hsd-app .hsd-btn--lg { min-height: 52px; padding: .875rem 1.5rem; font-size: 1.0625rem; }
.hsd-app .hsd-btn--sm { min-height: 36px; padding: .375rem .75rem; font-size: .875rem; }
@media (pointer: coarse) {
	/* Touch screens: every control keeps a 44px target. */
	.hsd-app .hsd-btn--sm { min-height: 44px; min-width: 44px; }
}
.hsd-app .hsd-btn[disabled], .hsd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.hsd-app .hsd-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.hsd-app .hsd-btn.is-loading::after {
	content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; animation: hsd-spin .8s linear infinite;
}
.hsd-app .hsd-btn:not(.hsd-btn--primary).is-loading::after { border-color: rgba(0, 66, 172, .25); border-top-color: var(--hsd-primary); }

/* Cards & grids */
.hsd-card { background: var(--hsd-surface); border: 1px solid var(--hsd-border); border-radius: var(--hsd-radius); padding: 1.25rem; box-shadow: var(--hsd-shadow-1); }
.hsd-card--flat { box-shadow: none; }
.hsd-card--muted { background: var(--hsd-surface-2); box-shadow: none; }
.hsd-card__title { font-size: 1.0625rem; margin: 0 0 .375rem; }
.hsd-grid { display: grid; gap: 1rem; }
.hsd-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.hsd-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .hsd-grid--2 { grid-template-columns: 1fr 1fr; } }
.hsd-kpis { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.hsd-kpi { background: var(--hsd-surface); border: 1px solid var(--hsd-border); border-radius: var(--hsd-radius); padding: 1rem; }
.hsd-kpi__value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hsd-kpi__label { color: var(--hsd-muted); font-size: .875rem; margin-top: .25rem; }

/* Selectable option cards (radio/checkbox) */
.hsd-choice { position: relative; display: flex; gap: .875rem; align-items: flex-start; padding: 1rem; border: 1.5px solid var(--hsd-border); border-radius: var(--hsd-radius); background: var(--hsd-surface); cursor: pointer; min-height: 44px; transition: border-color var(--hsd-dur) var(--hsd-ease), background-color var(--hsd-dur) var(--hsd-ease); }
.hsd-choice:hover { border-color: var(--hsd-border-strong); }
.hsd-choice input { position: absolute; opacity: 0; pointer-events: none; }
.hsd-choice__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--hsd-primary-50); color: var(--hsd-primary); flex: 0 0 auto; }
.hsd-choice__body { flex: 1; min-width: 0; }
.hsd-choice__title { font-weight: 700; display: block; }
.hsd-choice__desc { color: var(--hsd-muted); font-size: .9375rem; display: block; margin-top: .125rem; }
.hsd-choice__check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--hsd-border-strong); flex: 0 0 auto; display: grid; place-items: center; margin-top: 2px; }
.hsd-choice input[type="radio"] ~ .hsd-choice__check { border-radius: 50%; }
.hsd-choice input:checked ~ .hsd-choice__check { background: var(--hsd-primary); border-color: var(--hsd-primary); }
.hsd-choice input:checked ~ .hsd-choice__check::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.hsd-choice:has(input:checked) { border-color: var(--hsd-primary); background: var(--hsd-primary-50); }
.hsd-choice:has(input:focus-visible) { box-shadow: var(--hsd-focus); }

/* Forms */
.hsd-field { display: flex; flex-direction: column; gap: .375rem; margin-bottom: 1rem; }
.hsd-field > label, .hsd-label { font-weight: 600; font-size: .9375rem; color: var(--hsd-text); }
.hsd-req { color: var(--hsd-danger); margin-left: .125rem; }
.hsd-input, .hsd-select, .hsd-textarea {
	width: 100%; min-height: 48px; padding: .625rem .875rem; font: inherit; font-size: 16px; color: var(--hsd-text);
	background: var(--hsd-surface); border: 1.5px solid var(--hsd-border-strong); border-radius: var(--hsd-radius-sm);
	transition: border-color var(--hsd-dur) var(--hsd-ease), box-shadow var(--hsd-dur) var(--hsd-ease);
	appearance: none;
}
.hsd-select { background-image: linear-gradient(45deg, transparent 50%, var(--hsd-muted) 50%), linear-gradient(135deg, var(--hsd-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.25rem; }
.hsd-textarea { min-height: 112px; resize: vertical; }
.hsd-input:focus, .hsd-select:focus, .hsd-textarea:focus { outline: none; border-color: var(--hsd-primary); box-shadow: var(--hsd-focus); }
.hsd-input[aria-invalid="true"], .hsd-select[aria-invalid="true"], .hsd-textarea[aria-invalid="true"] { border-color: var(--hsd-danger); }
.hsd-help { font-size: .875rem; color: var(--hsd-muted); }
.hsd-error { font-size: .875rem; color: var(--hsd-danger); display: flex; gap: .375rem; align-items: flex-start; }
.hsd-check { display: flex; gap: .625rem; align-items: flex-start; min-height: 44px; padding: .5rem 0; cursor: pointer; }
.hsd-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--hsd-primary); flex: 0 0 auto; }
.hsd-fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.hsd-fieldset > legend { font-weight: 700; font-size: 1.0625rem; margin-bottom: .75rem; padding: 0; }
.hsd-form-grid { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hsd-form-grid { grid-template-columns: 1fr 1fr; } .hsd-form-grid .hsd-field--full { grid-column: 1 / -1; } }

/* Stepper */
.hsd-stepper { display: flex; gap: .25rem; margin: 0 0 1.5rem; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.hsd-stepper::-webkit-scrollbar { display: none; }
.hsd-stepper li { flex: 1 1 0; min-width: 28px; }
.hsd-stepper__bar { height: 6px; border-radius: 999px; background: var(--hsd-border); transition: background-color var(--hsd-dur) var(--hsd-ease); }
.hsd-stepper li.is-done .hsd-stepper__bar { background: var(--hsd-primary); }
.hsd-stepper li.is-current .hsd-stepper__bar { background: linear-gradient(90deg, var(--hsd-primary), var(--hsd-secondary)); }
.hsd-stepper__label { display: none; font-size: .75rem; color: var(--hsd-muted); margin-top: .375rem; white-space: nowrap; }
@media (min-width: 900px) { .hsd-stepper__label { display: block; } .hsd-stepper li.is-current .hsd-stepper__label { color: var(--hsd-text); font-weight: 600; } }
.hsd-step-head { margin-bottom: 1.25rem; }
.hsd-step-head__count { font-size: .875rem; color: var(--hsd-muted); font-weight: 600; }
.hsd-step-head h2 { margin: .25rem 0 .25rem; }
.hsd-step-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hsd-border); }
.hsd-autosave { font-size: .8125rem; color: var(--hsd-muted); min-height: 1.25em; }

/* Status, badges, progress */
.hsd-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; line-height: 1.3; background: var(--hsd-surface-2); color: var(--hsd-text-2); border: 1px solid var(--hsd-border); white-space: nowrap; }
.hsd-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.hsd-badge--info { background: var(--hsd-info-bg); color: var(--hsd-info); border-color: transparent; }
.hsd-badge--success { background: var(--hsd-success-bg); color: var(--hsd-success); border-color: transparent; }
.hsd-badge--warning { background: var(--hsd-warning-bg); color: var(--hsd-warning); border-color: transparent; }
.hsd-badge--danger { background: var(--hsd-danger-bg); color: var(--hsd-danger); border-color: transparent; }
.hsd-progress { height: 8px; border-radius: 999px; background: var(--hsd-border); overflow: hidden; }
.hsd-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hsd-primary), var(--hsd-secondary)); transition: width 400ms var(--hsd-ease); }
.hsd-stages { display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.hsd-stages li { font-size: .6875rem; color: var(--hsd-muted); text-align: center; }
.hsd-stages li::before { content: ""; display: block; height: 4px; border-radius: 4px; background: var(--hsd-border); margin-bottom: .375rem; }
.hsd-stages li.is-done::before { background: var(--hsd-primary); }
.hsd-stages li.is-current { color: var(--hsd-text); font-weight: 700; }
.hsd-stages li.is-current::before { background: var(--hsd-secondary); }
@media (max-width: 520px) { .hsd-stages li span { display: none; } }
.hsd-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hsd-chip { display: inline-flex; align-items: center; min-height: 36px; padding: .375rem .875rem; border-radius: 999px; border: 1px solid var(--hsd-border); background: var(--hsd-surface); font-size: .9375rem; text-decoration: none; color: var(--hsd-text); }
a.hsd-chip:hover { border-color: var(--hsd-primary); color: var(--hsd-primary); }

/* Notices & toasts */
.hsd-notice { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border-radius: var(--hsd-radius-sm); border: 1px solid transparent; margin: 0 0 1rem; }
.hsd-notice p:last-child { margin-bottom: 0; }
.hsd-notice--info { background: var(--hsd-info-bg); color: #0a3d73; }
.hsd-notice--success { background: var(--hsd-success-bg); color: #0d4a2e; }
.hsd-notice--warning { background: var(--hsd-warning-bg); color: #5c3700; }
.hsd-notice--danger { background: var(--hsd-danger-bg); color: #7a1810; }
.hsd-notice ul { margin: .25rem 0 0 1.125rem; padding: 0; }
.hsd-toasts { position: fixed; z-index: 100000; right: 16px; bottom: 16px; left: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; pointer-events: none; }
.hsd-toast { pointer-events: auto; max-width: 420px; width: 100%; padding: .875rem 1rem; border-radius: var(--hsd-radius-sm); background: #0f172a; color: #fff; box-shadow: var(--hsd-shadow-2); animation: hsd-in 220ms var(--hsd-ease); }
.hsd-toast--danger { background: #7a1810; }
.hsd-toast--success { background: #0d4a2e; }
/* Programmatic focus targets (step headings, error summaries, dashboard main) are not controls. */
.hsd-app [tabindex="-1"]:focus, .hsd-app [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
@media (max-width: 600px) {
	/* Keep toasts away from the step actions at the bottom of the screen. */
	.hsd-toasts { top: calc(12px + var(--wp-admin--admin-bar--height, 0px)); bottom: auto; align-items: stretch; }
	.hsd-toast { max-width: none; }
}

/* Autocomplete */
.hsd-combobox { position: relative; }
.hsd-listbox { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px; overflow-y: auto; margin: 0; padding: .375rem; list-style: none; background: var(--hsd-surface); border: 1px solid var(--hsd-border); border-radius: var(--hsd-radius-sm); box-shadow: var(--hsd-shadow-2); }
.hsd-option { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .625rem .75rem; min-height: 44px; border-radius: 6px; cursor: pointer; }
.hsd-option[aria-selected="true"], .hsd-option:hover { background: var(--hsd-primary-50); }
.hsd-option__meta { font-size: .8125rem; color: var(--hsd-muted); }

/* Dropzone / uploads */
.hsd-upload { border: 1.5px dashed var(--hsd-border-strong); border-radius: var(--hsd-radius); padding: 1rem; background: var(--hsd-surface-2); }
.hsd-upload.is-dragover { border-color: var(--hsd-primary); background: var(--hsd-primary-50); }
.hsd-upload__head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.hsd-files { margin: .75rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.hsd-file { display: flex; gap: .75rem; align-items: center; padding: .625rem .75rem; background: var(--hsd-surface); border: 1px solid var(--hsd-border); border-radius: var(--hsd-radius-sm); }
.hsd-file__name { flex: 1 1 10rem; min-width: 0; overflow-wrap: break-word; font-size: .9375rem; }
.hsd-file__name strong, .hsd-file__name .hsd-num { overflow-wrap: anywhere; }
@media (max-width: 480px) {
	/* File/notification rows: name on its own line, actions underneath, so names never break mid-word. */
	.hsd-file { flex-wrap: wrap; }
	.hsd-file > .hsd-icon:first-child { align-self: flex-start; margin-top: .125rem; }
	.hsd-file__name { flex-basis: calc(100% - 2.5rem); }
	.hsd-file > .hsd-btn, .hsd-file > .hsd-row { margin-left: 2rem; }
}
.hsd-file .hsd-progress { width: 100%; margin-top: .375rem; }

/* Tabs (dashboard) */
.hsd-dash { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.hsd-dash > * { min-width: 0; }
@media (min-width: 1024px) { .hsd-dash--with-nav { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.hsd-nav { display: flex; gap: .25rem; overflow-x: auto; padding: .25rem; margin: 0; list-style: none; background: var(--hsd-surface); border: 1px solid var(--hsd-border); border-radius: var(--hsd-radius); scrollbar-width: none; }
.hsd-nav::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) {
	/* Horizontal tab strip on small screens: scrolls inside itself, never widens the page. */
	.hsd-nav { scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
	.hsd-nav li { scroll-snap-align: start; flex: none; }
	.hsd-nav.is-end { -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 1024px) { .hsd-nav { flex-direction: column; position: sticky; top: 24px; } }
.hsd-nav a { display: flex; align-items: center; gap: .625rem; min-height: 44px; padding: .5rem .875rem; border-radius: var(--hsd-radius-sm); text-decoration: none; color: var(--hsd-text-2); font-weight: 600; white-space: nowrap; }
.hsd-nav a:hover { background: var(--hsd-surface-2); color: var(--hsd-text); }
.hsd-nav a[aria-current="page"] { background: var(--hsd-primary-50); color: var(--hsd-primary); }
.hsd-app .hsd-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--hsd-primary); color: #fff; font-size: .75rem; font-weight: 700; display: inline-grid; place-items: center; vertical-align: middle; }
.hsd-nav .hsd-count { margin-left: auto; }

/* Tables → stacked cards on mobile */
.hsd-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.hsd-table th { text-align: left; font-size: .8125rem; color: var(--hsd-muted); font-weight: 600; padding: .625rem .75rem; border-bottom: 1px solid var(--hsd-border); white-space: nowrap; }
.hsd-table td { padding: .75rem; border-bottom: 1px solid var(--hsd-border); vertical-align: top; }
.hsd-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
	.hsd-table thead { display: none; }
	.hsd-table, .hsd-table tbody, .hsd-table tr, .hsd-table td { display: block; width: 100%; }
	.hsd-table tr { border: 1px solid var(--hsd-border); border-radius: var(--hsd-radius-sm); margin-bottom: .75rem; padding: .25rem .5rem; background: var(--hsd-surface); }
	.hsd-table td { border: 0; display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .25rem; text-align: right; }
	.hsd-table td::before { content: attr(data-label); color: var(--hsd-muted); font-weight: 600; text-align: left; }
}

/* Request list items */
.hsd-reqcard { display: grid; gap: .625rem; }
.hsd-req__head { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; justify-content: space-between; }
.hsd-req__ref { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Timeline */
.hsd-timeline { margin: 0; padding: 0 0 0 1.25rem; list-style: none; border-left: 2px solid var(--hsd-border); }
.hsd-timeline li { position: relative; padding: 0 0 1rem .5rem; }
.hsd-timeline li::before { content: ""; position: absolute; left: -1.625rem; top: .375rem; width: 12px; height: 12px; border-radius: 50%; background: var(--hsd-surface); border: 2px solid var(--hsd-primary); }
.hsd-timeline time { display: block; font-size: .8125rem; color: var(--hsd-muted); }

/* Messages */
.hsd-thread { display: flex; flex-direction: column; gap: .75rem; max-height: 520px; overflow-y: auto; padding: .25rem; }
.hsd-msg { max-width: min(85%, 560px); padding: .75rem .875rem; border-radius: 14px; background: var(--hsd-surface-2); border: 1px solid var(--hsd-border); white-space: pre-wrap; overflow-wrap: anywhere; }
.hsd-msg--me { align-self: flex-end; background: var(--hsd-primary); color: #fff; border-color: var(--hsd-primary); }
.hsd-msg--me a { color: #fff; }
.hsd-msg--system { align-self: center; background: var(--hsd-warning-bg); border-color: transparent; font-size: .9375rem; }
.hsd-msg__meta { display: block; font-size: .75rem; opacity: .8; margin-top: .375rem; }
.hsd-composer { display: grid; gap: .5rem; margin-top: .75rem; }

/* Definition lists */
.hsd-dl { display: grid; gap: .75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); margin: 0; }
.hsd-dl dt { font-size: .8125rem; color: var(--hsd-muted); font-weight: 600; }
.hsd-dl dd { margin: .125rem 0 0; font-weight: 600; overflow-wrap: anywhere; }

/* Summary / quotes */
.hsd-summary { width: 100%; border-collapse: collapse; }
.hsd-summary td { padding: .5rem 0; border-bottom: 1px dashed var(--hsd-border); }
.hsd-summary td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 1rem; }
.hsd-summary tr.is-total td { border-bottom: 0; font-weight: 700; font-size: 1.0625rem; padding-top: .75rem; }
.hsd-quote { border-left: 4px solid var(--hsd-primary); }
.hsd-quote--increase { border-left-color: var(--hsd-warning); }

/* Policies */
.hsd-policy { border: 1px solid var(--hsd-border); border-radius: var(--hsd-radius-sm); padding: .5rem .875rem; margin-bottom: .625rem; background: var(--hsd-surface); }
.hsd-policy details > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; list-style: none; }
.hsd-policy details > summary::-webkit-details-marker { display: none; }
.hsd-policy__toggle { flex: none; display: inline-flex; align-items: center; gap: .375rem; font-weight: 500; font-size: .875rem; color: var(--hsd-primary); }
.hsd-policy__toggle::after { content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--hsd-dur) var(--hsd-ease); }
.hsd-policy details[open] .hsd-policy__toggle::after { transform: translateY(2px) rotate(-135deg); }
.hsd-policy details > summary:focus-visible { outline: none; box-shadow: var(--hsd-focus); border-radius: 6px; }
.hsd-policy__body { max-height: 260px; overflow-y: auto; padding: .5rem .25rem; font-size: .9375rem; color: var(--hsd-text-2); }

/* Empty, skeleton */
.hsd-empty { text-align: center; padding: 2rem 1rem; color: var(--hsd-muted); }
.hsd-empty .hsd-icon { width: 40px; height: 40px; color: var(--hsd-border-strong); margin-bottom: .5rem; }
.hsd-skeleton { position: relative; overflow: hidden; background: var(--hsd-surface-2); border-radius: var(--hsd-radius-sm); min-height: 18px; }
.hsd-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: hsd-shimmer 1.2s infinite; }
.hsd-skeleton-card { height: 96px; border-radius: var(--hsd-radius); margin-bottom: .75rem; }

/* How it works */
.hsd-steps { counter-reset: hsd-step; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); margin: 0; padding: 0; list-style: none; }
.hsd-steps li { counter-increment: hsd-step; position: relative; padding: 1.25rem 1.25rem 1.25rem 1.25rem; border-radius: var(--hsd-radius); background: var(--hsd-surface); border: 1px solid var(--hsd-border); }
.hsd-steps li::before { content: counter(hsd-step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--hsd-primary); color: #fff; font-weight: 700; margin-bottom: .75rem; }

/* Directory */
.hsd-directory__filters { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.hsd-directory__filters .hsd-field { margin: 0; flex: 1 1 220px; }
.hsd-pagination { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* Modal (native dialog) */
.hsd-dialog { border: 0; border-radius: var(--hsd-radius); padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: var(--hsd-shadow-2); color: var(--hsd-text); }
.hsd-dialog::backdrop { background: rgba(15, 23, 42, .5); }
.hsd-dialog__body { padding: 1.25rem; }
.hsd-dialog__foot { display: flex; gap: .75rem; justify-content: flex-end; padding: 1rem 1.25rem; border-top: 1px solid var(--hsd-border); background: var(--hsd-surface-2); }

/* Brand header in apps */
.hsd-brand { display: flex; align-items: center; gap: .625rem; font-weight: 800; letter-spacing: .02em; color: var(--hsd-primary); }
.hsd-brand img { height: 32px; width: auto; }

@keyframes hsd-spin { to { transform: rotate(360deg); } }
@keyframes hsd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hsd-shimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
	.hsd-app *, .hsd-toast { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

@media print {
	.hsd-nav, .hsd-step-actions, .hsd-btn { display: none !important; }
}