/* Auto-generated by scripts/build-layout-css.php — do not edit */
/* ===== design-system.css ===== */
/* ==========================================================================
   Danesh Clinic Platform V2 - Design System
   Professional medical theme built around the brand green (#0b5e42).
   Supports both RTL (fa/ar) and LTR (en) with logical properties.

   RULE: No hard-coded colors/sizes in feature CSS — use tokens below.
   See docs/FOUNDATION.md for the shared architecture contract.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand - medical green */
    --brand-900: #063d2b;
    --brand-800: #084c36;
    --brand-700: #0b5e42; /* primary brand */
    --brand-600: #0f7050;
    --brand-500: #148a63;
    --brand-400: #2fa77e;
    --brand-300: #6bc4a3;
    --brand-200: #a7ddc8;
    --brand-100: #d6f0e5;
    --brand-50:  #eef8f3;

    /* Accent - warm teal/gold for highlights (no purple) */
    --accent-600: #b8860b;
    --accent-500: #d4a017;
    --accent-100: #fbf3da;

    /* Neutrals */
    --gray-900: #10201b;
    --gray-800: #1f2d28;
    --gray-700: #374a43;
    --gray-600: #52645c;
    --gray-500: #718079;
    --gray-400: #9aa8a1;
    --gray-300: #c6d0cb;
    --gray-200: #e2e8e5;
    --gray-100: #f0f4f2;
    --gray-50:  #f7faf9;
    --white:    #ffffff;

    /* Semantic */
    --success: #0f7050;
    --success-bg: #e3f4ec;
    --danger: #c0392b;
    --danger-bg: #fbe9e7;
    --warning: #b8860b;
    --warning-bg: #fbf3da;
    --info: #1f6f8b;
    --info-bg: #e5f2f6;

    /* Surfaces & text */
    --bg: var(--gray-50);
    --surface: var(--white);
    --surface-alt: var(--gray-100);
    --surface-2: var(--gray-100);
    --surface-muted: var(--gray-100);
    --text: var(--gray-900);
    --text-muted: var(--gray-600);
    --text-brand: var(--brand-700);
    --text-on-brand: var(--white);
    --border: var(--gray-200);
    --border-strong: var(--gray-300);
    --icon: var(--gray-700);
    --icon-hover: var(--brand-800);
    --icon-muted: var(--gray-500);
    --icon-brand: var(--brand-700);
    --icon-on-brand: var(--white);
    --icon-disabled: var(--gray-400);
    --icon-color: var(--icon);
    --hover-bg: var(--brand-50);
    --disabled-bg: var(--gray-100);
    --disabled-text: var(--gray-400);
    --footer-bg: #10201b;
    --footer-surface: #152820;
    --footer-text: #c6d0cb;
    --footer-muted: #9aa8a1;
    --footer-title: #ffffff;
    --footer-link: #c6d0cb;
    --footer-link-hover: var(--brand-300);
    --hero-bg-start: var(--brand-50);
    --hero-bg-end: var(--white);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-400) 45%, transparent);

    /* Typography */
    --font-sans: "Danesh", "Vazirmatn", "Segoe UI", "Tahoma", "IRANSans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;
    --fs-xs: 0.75rem;    /* 12px */
    --fs-sm: 0.875rem;   /* 14px */
    --fs-base: 1rem;     /* 16px */
    --fs-md: 1.125rem;   /* 18px */
    --fs-lg: 1.375rem;   /* 22px */
    --fs-xl: 1.75rem;    /* 28px */
    --fs-2xl: 2.25rem;   /* 36px */
    --fs-3xl: 3rem;      /* 48px */
    --lh-tight: 1.25;
    --lh-base: 1.7;

    /* Spacing — 4px grid (1 unit = 4px) */
    --space-0: 0;
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-7: 3rem;     /* 48px */
    --space-8: 4rem;     /* 64px */
    --space-9: 6rem;     /* 96px */
    --space-unit: 4px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* Shadows / elevation */
    --shadow-sm: 0 1px 2px rgba(6, 61, 43, 0.06), 0 1px 3px rgba(6, 61, 43, 0.08);
    --shadow-md: 0 4px 12px rgba(6, 61, 43, 0.08), 0 2px 4px rgba(6, 61, 43, 0.06);
    --shadow: var(--shadow-md);
    --shadow-lg: 0 12px 32px rgba(6, 61, 43, 0.12), 0 4px 8px rgba(6, 61, 43, 0.08);
    --elevation-0: none;
    --elevation-1: 0 1px 2px rgba(6, 61, 43, 0.05), 0 1px 3px rgba(6, 61, 43, 0.07);
    --elevation-2: 0 6px 18px rgba(6, 61, 43, 0.1), 0 2px 6px rgba(6, 61, 43, 0.06);
    --elevation-3: 0 16px 40px rgba(6, 61, 43, 0.14), 0 6px 14px rgba(6, 61, 43, 0.08);
    --elevation-4: 0 24px 56px rgba(6, 61, 43, 0.18), 0 8px 20px rgba(6, 61, 43, 0.1);

    /* Opacity */
    --opacity-disabled: 0.45;
    --opacity-muted: 0.65;
    --opacity-hover: 0.88;
    --opacity-overlay: 0.45;

    /* Layout */
    --container: 1180px;
    --header-h: 52px;
    --sidebar-w: 248px;
    --sidebar-w-collapsed: 68px;
    --bottom-nav-h: 64px;
    --transition: 160ms ease;

    /* Motion durations */
    --motion-fast: 140ms;
    --motion-base: 220ms;
    --motion-slow: 360ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);

    /* Z-index scale (single source of truth) */
    --z-base: 1;
    --z-sticky: 20;
    --z-header: 50;
    --z-sidebar: 60;
    --z-dropdown: 80;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-drawer: 1100;
    --z-toast: 3000;
    --z-cmdk: 4000;
    --z-critical: 5000;

    /* --------------------------------------------------------------------------
       Legacy aliases — bridge module CSS (--color-primary, etc.) to tokens.
       New code must use --brand-* / --surface / --border directly.
       -------------------------------------------------------------------------- */
    --color-primary: var(--brand-700);
    --color-primary-soft: var(--brand-100);
    --bg-surface: var(--surface);
    --border-color: var(--border);
    --border-light: var(--border);
    --text-color: var(--text);
}

/* Dark theme — dedicated medical dark palette (not inverted) */
[data-theme="dark"] {
    --bg: #0a1210;
    --surface: #15221d;
    --surface-alt: #1c2d27;
    --surface-2: #1c2d27;
    --surface-muted: #1c2d27;
    --text: #f2f7f4;
    --text-muted: #b3c4bc;
    --text-brand: #6bc4a3;
    --text-on-brand: #062418;
    --border: #2f433c;
    --border-strong: #456257;
    --icon: #d6e5dd;
    --icon-hover: #9fe0c2;
    --icon-muted: #8fa399;
    --icon-brand: #6bc4a3;
    --icon-on-brand: #062418;
    --icon-disabled: #6f837a;
    --icon-color: var(--icon);
    --hover-bg: #183a2c;
    --disabled-bg: #1a2823;
    --disabled-text: #6f837a;
    --brand-50: #102820;
    --brand-100: #183a2c;
    --brand-200: #245744;
    --brand-800: #9fe0c2;
    --brand-900: #d6f0e5;
    --gray-50: #0a1210;
    --gray-100: #15221d;
    --gray-200: #2f433c;
    --gray-300: #456257;
    --gray-400: #6f837a;
    --gray-500: #8fa399;
    --gray-600: #b3c4bc;
    --gray-700: #d6e5dd;
    --gray-800: #e8f2ed;
    --gray-900: #f2f7f4;
    --footer-bg: #07110e;
    --footer-surface: #0f1a16;
    --footer-text: #c6d0cb;
    --footer-muted: #8fa399;
    --footer-title: #f2f7f4;
    --footer-link: #c6d0cb;
    --footer-link-hover: #9fe0c2;
    --hero-bg-start: #102820;
    --hero-bg-end: #15221d;
    --success-bg: #123528;
    --danger-bg: #3a1c18;
    --warning-bg: #3a2e12;
    --info-bg: #153038;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow: var(--shadow-md);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.4);
    --elevation-2: 0 8px 24px rgba(0, 0, 0, 0.45);
    --elevation-3: 0 18px 44px rgba(0, 0, 0, 0.55);
    --elevation-4: 0 28px 60px rgba(0, 0, 0, 0.6);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-400) 55%, transparent);
    --color-primary: var(--brand-400);
    --color-primary-soft: var(--brand-100);
    --bg-surface: var(--surface);
    --border-color: var(--border);
    --border-light: var(--border);
}

[data-theme="dark"] .card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .modal__dialog {
    background: var(--surface);
    border-color: var(--border-strong);
    box-shadow: var(--elevation-1);
}

[data-theme="dark"] .form-control {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border-strong);
}

[data-theme="dark"] .field--float .form-label {
    background: var(--surface-alt);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
    color: var(--text);
}

/* --------------------------------------------------------------------------
   Icon color system — never hard-code icon colors in feature CSS
   -------------------------------------------------------------------------- */
.fa-solid,
.fas,
.fa {
    color: var(--icon-color, var(--icon));
}

.icon--muted { --icon-color: var(--icon-muted); }
.icon--brand { --icon-color: var(--icon-brand); }
.icon--on-brand { --icon-color: var(--icon-on-brand); }
.icon--disabled,
[aria-disabled="true"] .fa-solid,
:disabled .fa-solid {
    --icon-color: var(--icon-disabled);
}

a:hover .fa-solid:not(.icon--on-brand),
button:hover .fa-solid:not(.icon--on-brand),
.icon-btn:hover .fa-solid {
    --icon-color: var(--icon-hover);
}

/* Surfaces that already set text color (nav, primary buttons) */
.main-nav,
.main-nav .fa-solid,
.btn--primary,
.btn--primary .fa-solid,
.icon-btn--primary,
.icon-btn--primary .fa-solid,
.cta,
.cta .fa-solid {
    --icon-color: currentColor;
    color: inherit;
}

.main-nav { color: var(--icon-on-brand); }
.btn--primary,
.icon-btn--primary { color: var(--icon-on-brand); }

/* Sync legacy html.dark (tinnitus) with data-theme when both present */
html.dark:not([data-theme]) {
    color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Empty states (reusable)
   -------------------------------------------------------------------------- */
.empty-state {
    padding: var(--space-7);
    border-radius: var(--radius);
    border: 1px dashed var(--border-strong);
    background: var(--surface-alt);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
}

.empty-state__icon {
    font-size: 2rem;
    color: var(--brand-800);
    opacity: 0.95;
}

.empty-state__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
}

.empty-state__text {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    max-width: 42rem;
}

/* --------------------------------------------------------------------------
   Skeleton loading
   -------------------------------------------------------------------------- */
.skeleton {
    background: linear-gradient(90deg, rgba(20, 56, 44, 0.06), rgba(20, 56, 44, 0.12), rgba(20, 56, 44, 0.06));
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.1s var(--ease-in-out) infinite;
    border-radius: 8px;
}

.skeleton--line {
    height: 0.95rem;
    width: 100%;
}

.skeleton--block {
    height: 2.35rem;
    width: 100%;
}

.skeleton--circle {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
}

@keyframes skeleton-shimmer {
    from { background-position: 0% 0%; }
    to { background-position: 200% 0%; }
}

/* --------------------------------------------------------------------------
   Command palette base styles
   -------------------------------------------------------------------------- */
.cmdk-open {
    overflow: hidden;
}

.cmdk {
    position: fixed;
    inset: 0;
    z-index: var(--z-cmdk);
}

.cmdk__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 32, 27, 0.55);
    backdrop-filter: blur(6px);
}

.cmdk__panel {
    position: relative;
    width: min(720px, calc(100vw - 2rem));
    margin: 10vh auto 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--elevation-3);
    padding: var(--space-3);
}

.cmdk__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--gray-100);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.8rem;
}

.cmdk__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--fs-base);
    color: var(--text);
}

.cmdk__kbd {
    font-size: var(--fs-xs);
    font-weight: 700;
    opacity: 0.75;
}

.cmdk__list {
    margin-top: var(--space-2);
    display: grid;
    gap: 6px;
    max-height: 48vh;
    overflow: auto;
    padding-inline-end: 4px;
}

.cmdk__item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

.cmdk__item:hover {
    background: var(--brand-50);
    border-color: var(--brand-200);
}

.cmdk__item span {
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.cmdk__item small {
    color: var(--text-muted);
    font-weight: 700;
    font-size: var(--fs-xs);
}

.cmdk__item.is-active,
.cmdk__item:focus-visible {
    background: var(--brand-50);
    border-color: var(--brand-300);
    outline: none;
}

.cmdk__group {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.5rem 0.35rem 0.15rem;
}

.cmdk__hint {
    margin: 0.65rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cmdk__item mark {
    background: color-mix(in srgb, var(--brand-300) 45%, transparent);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

.cmdk__empty {
    padding: 1rem 0.5rem;
    text-align: center;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--text);
    background-color: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--brand-700);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--brand-500);
}

h1, h2, h3, h4, h5, h6 {
    line-height: var(--lh-tight);
    font-weight: 700;
    color: var(--gray-900);
}

ul {
    list-style: none;
    padding: 0;
}

button {
    font-family: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid var(--brand-300);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.layout__main {
    flex: 1 0 auto;
}

.section-title {
    font-size: var(--fs-2xl);
    text-align: center;
    margin-block-end: var(--space-6);
    position: relative;
}

.section-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--brand-700), var(--brand-400));
    margin: var(--space-3) auto 0;
}

/* --------------------------------------------------------------------------
   4. Brand
   -------------------------------------------------------------------------- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--brand-700);
}

.brand__logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
    color: var(--white);
    box-shadow: var(--shadow-sm);
}

.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand__name {
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--brand-800);
}

.brand__tag {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.brand--footer .brand__name {
    color: var(--footer-title);
    font-size: var(--fs-lg);
}

.brand--auth .brand__name {
    color: var(--white);
    font-size: var(--fs-lg);
}

/* --------------------------------------------------------------------------
   5. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
    background: var(--surface);
    border-block-end: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-h);
    gap: var(--space-4);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--gray-100);
    border-radius: var(--radius-pill);
    padding: var(--space-1);
}

.lang-switcher__item {
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
}

.lang-switcher__item.is-active {
    background: var(--brand-700);
    color: var(--white);
}

.lang-switcher--auth {
    background: rgba(255, 255, 255, 0.15);
}

.lang-switcher--auth .lang-switcher__item {
    color: rgba(255, 255, 255, 0.85);
}

.lang-switcher--auth .lang-switcher__item.is-active {
    background: var(--white);
    color: var(--brand-800);
}

.inline-form {
    display: inline;
}

.main-nav {
    background: var(--brand-700);
    color: var(--white);
}

.main-nav__list {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.main-nav__link {
    display: inline-block;
    padding: var(--space-3) var(--space-4);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
}

.main-nav__link:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: var(--gray-100);
    border: none;
    border-radius: var(--radius-sm);
}

.nav-toggle span {
    display: block;
    height: 2px;
    width: 20px;
    margin-inline: auto;
    background: var(--gray-800);
    border-radius: 2px;
    transition: var(--transition);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.65rem 1.35rem;
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    white-space: nowrap;
    text-align: center;
}

.btn:active {
    transform: translateY(1px);
}

.btn--primary {
    background: var(--brand-700);
    color: var(--white);
    box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
    background: var(--brand-600);
    color: var(--white);
    box-shadow: var(--shadow);
}

.btn--outline {
    background: var(--surface);
    color: var(--brand-700);
    border-color: var(--brand-300);
}

.btn--outline:hover {
    background: var(--brand-50);
    color: var(--brand-800);
    border-color: var(--brand-500);
}

.btn--ghost {
    background: var(--surface);
    color: var(--gray-800);
    border-color: var(--border-strong);
}

.btn--ghost:hover {
    background: var(--gray-100);
    color: var(--gray-900);
    border-color: var(--gray-400);
}

.btn--danger {
    background: var(--danger);
    color: var(--white);
}

.btn--danger:hover {
    background: #a93226;
    color: var(--white);
}

.btn--sm {
    padding: 0.4rem 0.9rem;
    font-size: var(--fs-sm);
}

.btn--lg {
    padding: 0.85rem 1.75rem;
    font-size: var(--fs-md);
}

.btn--block {
    width: 100%;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--gray-700);
}

.form-control {
    width: 100%;
    padding: 0.7rem 0.95rem;
    font-size: var(--fs-base);
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control::placeholder {
    color: var(--gray-600);
}

.form-control:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-100);
}

.form-control:disabled {
    background: var(--gray-100);
    cursor: not-allowed;
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.form-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.form-row--between {
    justify-content: space-between;
}

.tinnitus-volume {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tinnitus-volume__row {
    display: grid;
    grid-template-columns: minmax(6rem, 8rem) 1fr auto;
    align-items: center;
    gap: var(--space-3);
}

.tinnitus-volume__row .form-label {
    margin: 0;
}

.tinnitus-volume__slider {
    width: 100%;
    accent-color: var(--brand-600, #0b7a55);
}

.tinnitus-volume__value {
    min-width: 3.25rem;
    text-align: end;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

@media (max-width: 520px) {
    .tinnitus-volume__row {
        grid-template-columns: 1fr auto;
    }

    .tinnitus-volume__row .form-label {
        grid-column: 1 / -1;
    }
}

.form-hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.form-error {
    font-size: var(--fs-xs);
    color: var(--danger);
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--gray-700);
    cursor: pointer;
}

.checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-700);
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.card__title {
    font-size: var(--fs-lg);
    margin-block-end: var(--space-2);
}

.card__text {
    color: var(--text-muted);
}

.card__hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-block-start: var(--space-2);
}

/* --------------------------------------------------------------------------
   9. Tables
   -------------------------------------------------------------------------- */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: 0.95rem;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(6, 61, 43, 0.045);
    font-size: 0.92rem;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--brand-300, #6bc4a3) 26%, var(--border, #e2e8e5));
    border-radius: 0.95rem;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(6, 61, 43, 0.045);
}

.table-wrap > .table,
.table-wrap > .data-table {
    box-shadow: none;
    border-radius: 0;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-2) var(--space-4);
    margin-block-start: var(--space-2);
}

.table th,
.table td {
    padding: 0.78rem 1rem;
    text-align: start;
    border-block-end: 1px solid color-mix(in srgb, var(--border, #e2e8e5) 88%, transparent);
    vertical-align: middle;
}

.table--center th,
.table--center td {
    text-align: center;
    vertical-align: middle;
}

.table thead th {
    background: var(--brand-50, #f3faf7);
    color: var(--brand-800, #084c36);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    position: sticky;
    top: 0;
    z-index: 2;
    border-block-end: 1px solid color-mix(in srgb, var(--brand-200, #a7ddc8) 55%, var(--border, #e2e8e5));
}

.table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--brand-50, #f3faf7) 32%, transparent);
}

.table tbody tr:hover {
    background: color-mix(in srgb, var(--brand-100, #d6f0e5) 55%, transparent);
}

.table tbody tr:last-child td {
    border-block-end: none;
}

[data-theme="dark"] .table,
[data-theme="dark"] .table-wrap {
    background: var(--surface);
    border-color: var(--border-strong);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .table thead th {
    background: var(--brand-100, #183a2c);
    color: var(--brand-800, #9fe0c2);
}
[data-theme="dark"] .table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--surface-alt) 55%, transparent);
}
[data-theme="dark"] .table tbody tr:hover {
    background: var(--brand-100, #183a2c);
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    font-size: var(--fs-xs);
    font-weight: 700;
    border-radius: var(--radius-pill);
    background: var(--brand-100);
    color: var(--brand-800);
}

.badge--success { background: var(--success-bg); color: var(--success); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger); }
.badge--warning { background: var(--warning-bg); color: var(--warning-text, var(--warning)); }
.badge--msg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  margin-inline-start: .25rem;
  padding: .05rem .35rem;
  border-radius: 999px;
  background: var(--color-primary, #0b5e42);
  color: #fff;
  font-size: .7rem;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   10. Alerts — floating site notices (not inline content banners)
   -------------------------------------------------------------------------- */
.alerts {
    position: fixed;
    inset-block-start: max(0.85rem, env(safe-area-inset-top, 0px));
    inset-inline: 0;
    z-index: var(--z-toast, 1200);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding-inline: 1rem;
    margin: 0;
    pointer-events: none;
}

.alert {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.75rem 0.85rem;
    width: min(26rem, calc(100vw - 2rem));
    padding: 0.85rem 0.95rem 1rem;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--brand-700, #0b5e42) 14%, transparent);
    background:
        linear-gradient(135deg, color-mix(in srgb, #fff 92%, var(--brand-50, #eef8f3)) 0%, #fff 55%),
        #fff;
    box-shadow:
        0 10px 28px color-mix(in srgb, #0b5e42 12%, transparent),
        0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset;
    color: var(--text, #1a2e26);
    font-size: var(--fs-sm, 0.9rem);
    animation: alert-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.alert::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--brand-700, #0b5e42);
}

.alert__icon {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    margin: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-700, #0b5e42) 12%, #fff);
    color: var(--brand-700, #0b5e42);
    font-size: 1rem;
}

.alert__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-block-start: 0.1rem;
}

.alert__title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--brand-800, #084c36);
}

.alert__body {
    margin: 0;
    flex: none;
    line-height: 1.45;
    font-weight: 600;
    color: var(--text, #1a2e26);
}

.alert__close {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text, #1a2e26) 6%, transparent);
    color: var(--text-muted, #4a6358);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    opacity: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

.alert__close:hover {
    background: color-mix(in srgb, var(--text, #1a2e26) 12%, transparent);
    color: var(--text, #1a2e26);
    opacity: 1;
}

.alert__progress {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 3px;
    transform-origin: inline-start;
    background: color-mix(in srgb, var(--brand-700, #0b5e42) 55%, transparent);
    animation: alert-progress 5.5s linear forwards;
}

.alert--success::before { background: #159a5a; }
.alert--success .alert__icon {
    background: color-mix(in srgb, #22c55e 16%, #fff);
    color: #15803d;
}
.alert--success .alert__title { color: #166534; }
.alert--success .alert__progress { background: color-mix(in srgb, #16a34a 65%, transparent); }

.alert--error {
    border-color: color-mix(in srgb, #dc2626 18%, transparent);
    background: linear-gradient(135deg, #fff7f6 0%, #fff 60%);
}
.alert--error::before { background: #dc2626; }
.alert--error .alert__icon {
    background: color-mix(in srgb, #ef4444 14%, #fff);
    color: #b91c1c;
}
.alert--error .alert__title { color: #991b1b; }
.alert--error .alert__progress { background: color-mix(in srgb, #dc2626 65%, transparent); }

.alert--warning {
    border-color: color-mix(in srgb, #d97706 20%, transparent);
    background: linear-gradient(135deg, #fffbeb 0%, #fff 60%);
}
.alert--warning::before { background: #d97706; }
.alert--warning .alert__icon {
    background: color-mix(in srgb, #f59e0b 16%, #fff);
    color: #b45309;
}
.alert--warning .alert__title { color: #92400e; }
.alert--warning .alert__progress { background: color-mix(in srgb, #d97706 65%, transparent); }

.alert--info {
    border-color: color-mix(in srgb, #0284c7 18%, transparent);
    background: linear-gradient(135deg, #f0f9ff 0%, #fff 60%);
}
.alert--info::before { background: #0284c7; }
.alert--info .alert__icon {
    background: color-mix(in srgb, #0ea5e9 14%, #fff);
    color: #0369a1;
}
.alert--info .alert__title { color: #075985; }
.alert--info .alert__progress { background: color-mix(in srgb, #0284c7 65%, transparent); }

.alert.is-hiding {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

@keyframes alert-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes alert-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* --------------------------------------------------------------------------
   11. Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
    padding-block: var(--space-5) var(--space-3);
}
.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.breadcrumb__item {
    display: inline-flex;
    align-items: center;
}
.breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    margin-inline-end: var(--space-2);
    color: var(--gray-400);
}
.breadcrumb__item a {
    color: var(--text-brand);
    text-decoration: none;
    transition: color var(--motion-fast, 0.15s) ease;
}
.breadcrumb__item a:hover {
    color: var(--brand-700);
    text-decoration: underline;
}
.breadcrumb__item.is-current {
    color: var(--gray-800);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   12. Hero (home) — premium clinical
   -------------------------------------------------------------------------- */
.hero {
    --hero-teal: var(--brand-700);
    --hero-teal-soft: var(--brand-400);
    --hero-mist: var(--brand-100);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-9);
    background: var(--brand-50);
}

[data-theme="dark"] .hero {
    background: #15221d;
}

.hero__neural {
    display: none !important;
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.75rem);
}

.hero__badge {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    background: var(--brand-100);
    color: var(--brand-800);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 700;
    margin-block-end: var(--space-4);
}

.hero__title {
    font-size: var(--fs-3xl);
    color: var(--hero-teal);
    margin-block-end: var(--space-3);
    opacity: 0;
    transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__title.is-in {
    opacity: 1;
}

[data-theme="dark"] .hero__title {
    color: var(--hero-teal-soft);
}

.hero__lead {
    position: relative;
    margin-block-end: var(--space-3);
    max-width: none;
    width: 100%;
}

.hero__lead-text {
    margin: 0;
    font-size: clamp(0.92rem, 1.05vw + 0.5rem, 1.22rem);
    line-height: 1.7;
    font-weight: var(--fw-semibold);
    color: var(--text);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.hero__word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.45em);
    filter: blur(1.5px);
    transition:
        opacity 600ms var(--ease-out),
        transform 600ms var(--ease-out),
        filter 600ms var(--ease-out);
    will-change: opacity, transform;
}

.hero__word.is-in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.hero__lead.is-breathe .hero__lead-text {
    animation: hero-breathe 6.5s var(--ease-out) infinite;
}

.hero__eq-wrap {
    max-width: min(28rem, 100%);
    margin-block: var(--space-2) var(--space-3);
    overflow: hidden;
    opacity: 0;
    transform: translateY(0.4rem);
    transition:
        opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__eq-wrap.is-in {
    opacity: 1;
    transform: translateY(0);
}

.hero__eq {
    display: block;
    width: 100%;
    height: 44px;
    pointer-events: none;
}

.hero__tagline {
    margin: 0 0 var(--space-6);
    max-width: 36rem;
    font-size: var(--fs-md);
    color: var(--text-muted);
    opacity: 0;
    transform: translateY(0.55em);
    filter: blur(1px);
    transition:
        opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__tagline.is-in {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.hero__lead.is-static .hero__word {
    opacity: 1;
    transform: none;
    filter: none;
}

@keyframes hero-breathe {
    0%,
    100% { opacity: 1; }
    50% { opacity: 0.92; }
}

@media (max-width: 1100px) {
    .hero__lead-text {
        white-space: normal;
        font-size: clamp(1rem, 1.4vw + 0.65rem, 1.3rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__title,
    .hero__word,
    .hero__tagline,
    .hero__eq-wrap {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .hero__lead.is-breathe .hero__lead-text {
        animation: none !important;
    }
}

[data-theme="dark"] .hero__lead-text {
    color: var(--text);
}

/* Keep legacy subtitle selector for other pages if any */
.hero__subtitle {
    font-size: var(--fs-md);
    color: var(--text-muted);
    margin-block-end: var(--space-6);
    max-width: 46ch;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.hero__content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.hero__visual {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.hero__signal {
    --signal-size: clamp(16rem, 42vw, 34rem);
    position: relative;
    z-index: 1;
    width: var(--signal-size);
    max-width: 100%;
    aspect-ratio: 4 / 3;
    color: var(--brand-700);
    isolation: isolate;
}

.hero__signal-glow {
    position: absolute;
    inset: 8% 6%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(
        ellipse 70% 60% at 50% 50%,
        color-mix(in srgb, var(--brand-200) 55%, transparent),
        transparent 70%
    );
    pointer-events: none;
}

.hero__signal-art {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    user-select: none;
    pointer-events: none;
}

.hero__signal-svg {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.hero__signal-track {
    stroke: color-mix(in srgb, var(--brand-700) 34%, transparent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 2.5 8;
    opacity: 0.5;
}

#hero-signal-motion {
    fill: none;
    stroke: none;
}

.hero__signal-pulse {
    opacity: 0.78;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--brand-500) 40%, transparent));
}

[data-theme="dark"] .hero__signal {
    color: var(--brand-400);
}

[data-theme="dark"] .hero__signal-glow {
    background: radial-gradient(
        ellipse 70% 60% at 50% 50%,
        color-mix(in srgb, var(--brand-700) 35%, transparent),
        transparent 70%
    );
}

[data-theme="dark"] .hero__signal-art {
    opacity: 0.92;
    filter: brightness(0.94) saturate(0.95);
}

@media (prefers-reduced-motion: reduce) {
    .hero__signal-pulse {
        display: none;
    }
}

.hero__card {
    position: relative;
    width: 240px;
    height: 240px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
}

.hero__pulse {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    border: 2px solid var(--brand-300);
    animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.25); opacity: 0; }
}

/* --------------------------------------------------------------------------
   13. Features & CTA
   -------------------------------------------------------------------------- */
.features {
    padding-block: var(--space-8);
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.feature-card {
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.feature-card__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--brand-50);
    color: var(--brand-700);
}

.feature-card__title {
    font-size: var(--fs-md);
    margin-block-end: var(--space-2);
}

.feature-card__text {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.cta {
    background: linear-gradient(135deg, var(--brand-700), var(--brand-600));
    color: var(--white);
    padding-block: var(--space-7);
    margin-block-start: var(--space-8);
}

.cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.cta__title {
    color: var(--white);
    font-size: var(--fs-xl);
    margin-block-end: var(--space-2);
}

.cta__text {
    color: rgba(255, 255, 255, 0.85);
    max-width: 52ch;
}

.cta .btn--primary {
    background: var(--white);
    color: var(--brand-700);
    border-color: var(--white);
}

.cta .btn--primary:hover {
    background: var(--brand-50);
    color: var(--brand-900);
}

.cta .btn--outline {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.7);
    background: transparent;
}

.cta .btn--outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--white);
}

[data-theme="dark"] .main-nav {
    background: #0c3328;
    border-block-end-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .cta {
    background: linear-gradient(135deg, #0c3328, #14523f);
}

[data-theme="dark"] .cta .btn--primary {
    background: #e8f6ef;
    color: #0c3328;
    border-color: #e8f6ef;
}

[data-theme="dark"] .cta .btn--primary:hover {
    background: #ffffff;
    color: #062418;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    margin-block-start: auto;
}

.site-footer__contact a {
    color: var(--footer-link);
}

.site-footer__contact a:hover {
    color: var(--footer-link-hover);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-6);
    padding-block: var(--space-7);
}

.site-footer__about {
    margin-block-start: var(--space-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    max-width: 40ch;
    color: var(--footer-text);
}

.site-footer__title {
    color: var(--footer-title);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    margin-block-end: var(--space-4);
}

.site-footer__links li,
.site-footer__contact li {
    margin-block-end: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--footer-text);
}

.site-footer__links a {
    color: var(--footer-link);
}

.site-footer__links a:hover {
    color: var(--footer-link-hover);
}

.site-footer__bar {
    border-block-start: 1px solid color-mix(in srgb, var(--footer-title) 12%, transparent);
    padding-block: var(--space-4);
    font-size: var(--fs-xs);
    text-align: start;
    color: var(--footer-muted);
}

/* --------------------------------------------------------------------------
   15. Auth layout
   -------------------------------------------------------------------------- */
.layout--auth {
    /* Auth visual system lives in auth.css — keep layout token only. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}

.auth-shell {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.auth-shell__brand {
    text-align: center;
    color: var(--white);
}

.auth-shell__tag {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--fs-sm);
    margin-block-start: var(--space-2);
}

.auth-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
}

.auth-shell__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.auth-form__title {
    font-size: var(--fs-xl);
    margin-block-end: var(--space-2);
}

.auth-form__subtitle {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin-block-end: var(--space-5);
}

.auth-form__foot {
    margin-block-start: var(--space-5);
    text-align: center;
    font-size: var(--fs-sm);
}

.auth-form__link {
    font-size: var(--fs-sm);
    color: var(--brand, #0b5e42);
    text-decoration: none;
}

.auth-form__link:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   16. Dashboard layout
   -------------------------------------------------------------------------- */
.dash {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: calc(100vh - var(--header-h));
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 1025px) {
    .dash {
        display: grid;
        grid-template-columns: 260px 1fr;
    }
}

.sidebar {
    background: var(--surface);
    border-inline-end: 1px solid var(--border);
    padding: var(--space-5) var(--space-4);
}

.sidebar__head {
    padding-inline: var(--space-2);
    margin-block-end: var(--space-4);
}

.sidebar__title {
    font-weight: 700;
    color: var(--brand-800);
    font-size: var(--fs-md);
}

.sidebar__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--gray-700);
    font-weight: 600;
    font-size: var(--fs-sm);
}

.sidebar__link:hover {
    background: var(--brand-50);
    color: var(--brand-800);
}

.sidebar__link.is-active {
    background: var(--brand-700);
    color: var(--white);
}

.sidebar__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.dash__content {
    padding: var(--space-6);
    background: var(--bg);
}

.dash__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-5);
    gap: var(--space-4);
}

.dash__topbar-end {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-inline-start: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dash__user {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--brand-800);
    background: var(--brand-50);
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-pill);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-block-start: var(--space-5);
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-start;
}

.stat-card__value {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--brand-700);
}

.stat-card__label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   17. Error pages
   -------------------------------------------------------------------------- */
.error-page {
    padding-block: var(--space-9);
}

.error-page__inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.error-page__code {
    font-size: 5rem;
    font-weight: 700;
    color: var(--brand-700);
    line-height: 1;
}

.error-page__title {
    font-size: var(--fs-xl);
    color: var(--text);
}

.error-page__text {
    color: var(--text-muted);
    max-width: 36rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   18. RTL / LTR adjustments
   -------------------------------------------------------------------------- */
[dir="rtl"] body {
    letter-spacing: 0;
}

[dir="ltr"] .hero__subtitle,
[dir="ltr"] .site-footer__about,
[dir="ltr"] .cta__text {
    /* logical properties already handle direction; kept for clarity */
}

/* Flip the decorative hero gradient direction for LTR. */
/* Flip the decorative hero background for LTR. */
[dir="ltr"] .hero {
    background: var(--brand-50);
}

[dir="ltr"][data-theme="dark"] .hero {
    background: #15221d;
}

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.mt-4 { margin-block-start: var(--space-4); }
.mt-6 { margin-block-start: var(--space-6); }
.mb-4 { margin-block-end: var(--space-4); }
.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero__visual {
        order: -1;
    }

    .hero__signal {
        --signal-size: clamp(17rem, 78vw, 28rem);
        margin-inline: auto;
    }

    .hero__actions {
        justify-content: center;
    }

    .hero__subtitle,
    .hero__lead,
    .hero__tagline,
    .hero__eq-wrap,
    .hero__eq {
        margin-inline: auto;
    }

    .dash {
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-inline-end: none;
        border-block-end: 1px solid var(--border);
    }
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .main-nav {
        display: none;
    }

    .main-nav.is-open {
        display: block;
    }

    .main-nav__list {
        flex-direction: column;
    }

    .features__grid,
    .stats-grid,
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .site-header__actions .nav-toggle {
        display: inline-flex;
    }

    /* When the mobile nav is open, reveal actions inside it if needed. */
    .cta__inner {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero__title {
        font-size: var(--fs-2xl);
    }

    .container {
        padding-inline: var(--space-4);
    }

    .auth-card {
        padding: var(--space-5);
    }
}

/* --------------------------------------------------------------------------
   20. Landing enrichment (home + staff)
   -------------------------------------------------------------------------- */
.hero__brand-mark {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
}

[data-theme="dark"] .hero__brand-mark {
    background: var(--surface);
}

.hero__brand-mark img {
    width: 140px;
    height: auto;
}

.landing-section {
    padding-block: var(--space-8);
}

.landing-section--alt {
    background: var(--surface-alt);
}

.landing-hero--compact {
    background: linear-gradient(160deg, var(--brand-700), var(--brand-800));
    color: var(--white);
    padding-block: var(--space-7);
    text-align: center;
}

.landing-hero--compact .breadcrumb {
    padding-block: 0 var(--space-3);
    justify-content: center;
}
.landing-hero--compact .breadcrumb__list {
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
}
.landing-hero--compact .breadcrumb__item a {
    color: rgba(255, 255, 255, 0.92);
}
.landing-hero--compact .breadcrumb__item a:hover {
    color: #fff;
}
.landing-hero--compact .breadcrumb__item + .breadcrumb__item::before {
    color: rgba(255, 255, 255, 0.45);
}
.landing-hero--compact .breadcrumb__item.is-current {
    color: #fff;
}

.staff-page__block {
    margin-block-end: var(--space-7);
}
.staff-page__head {
    margin-block-end: var(--space-5);
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
}
.staff-page__lead {
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}

.landing-hero__title {
    font-size: var(--fs-2xl);
    color: var(--white);
    margin-block-end: var(--space-3);
}

.landing-hero__subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--fs-md);
}

.about-panel {
    max-width: 900px;
    margin-inline: auto;
}

.about-panel__text {
    text-align: center;
    font-size: var(--fs-md);
    color: var(--text-muted);
    margin-block-end: var(--space-6);
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.about-stats__item {
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
}

.about-stats__number {
    display: block;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--brand-700);
}

.about-stats__label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.service-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    transition: transform var(--transition), box-shadow var(--transition);
}

.service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.service-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    background: var(--brand-50);
    color: var(--brand-700);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: var(--space-4);
}

.service-card__title {
    font-size: var(--fs-md);
    margin-block-end: var(--space-2);
}

.service-card__text {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.staff-grid {
    display: grid;
    gap: var(--space-5);
}

.staff-grid--featured {
    grid-template-columns: repeat(2, 1fr);
    margin-block-end: var(--space-6);
}

.staff-grid--team {
    grid-template-columns: repeat(3, 1fr);
}

.staff-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.staff-card__photo {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--brand-50);
}

.staff-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.staff-card__badge {
    position: absolute;
    inset-inline-start: var(--space-3);
    inset-block-end: var(--space-3);
    background: rgba(6, 61, 43, 0.85);
    color: var(--white);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-pill);
}

.staff-card__body {
    padding: var(--space-5);
}

.staff-card__name {
    font-size: var(--fs-md);
    margin-block-end: var(--space-2);
}

.staff-card__role {
    color: var(--brand-700);
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-block-end: var(--space-3);
}

.staff-card__bio {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.landing-cta-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-block-start: var(--space-6);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.testimonial-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    margin: 0;
}

.testimonial-card__text {
    font-size: var(--fs-sm);
    color: var(--text);
    margin-block-end: var(--space-4);
}

.testimonial-card__author {
    color: var(--brand-700);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.faq-list {
    max-width: 820px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.faq-item__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    text-align: start;
    padding: var(--space-4) var(--space-5);
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
}

.faq-item__chevron {
    width: 0.6rem;
    height: 0.6rem;
    border-inline-end: 2px solid var(--icon-brand);
    border-block-end: 2px solid var(--icon-brand);
    transform: rotate(45deg);
    transition: transform var(--transition);
    flex-shrink: 0;
}

.faq-item.is-open .faq-item__chevron {
    transform: rotate(-135deg);
}

.faq-item__answer {
    padding: 0 var(--space-5) var(--space-4);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-block-end: var(--space-5);
}

.contact-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
}

.contact-card h3 {
    margin-block-end: var(--space-3);
    color: var(--brand-800);
}

.contact-card a {
    color: var(--brand-700);
    font-weight: 600;
}

.contact-address {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.certificates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    align-items: center;
}

.certificate-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    min-height: 160px;
    justify-content: center;
}

.certificate-item img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 960px) {
    .services-grid,
    .testimonials-grid,
    .staff-grid--team,
    .certificates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.service-card--link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.service-card__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    margin-block-end: var(--space-4);
    display: block;
}

.service-card > picture,
.nhs-parent__media-wrap > picture,
.service-page__hero > picture,
.nhs-hero > picture {
    display: block;
    width: 100%;
}

.nhs-hero > picture {
    position: absolute;
    inset: 0;
    height: 100%;
    z-index: 0;
}

.nhs-hero > picture > .nhs-hero__media {
    position: absolute;
    inset: 0;
}

.service-page__hero {
    position: relative;
    background: var(--brand-50);
}

.service-page__image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.service-page__hero-text {
    padding-block: var(--space-6);
}

.service-page__title {
    font-size: var(--fs-2xl);
    color: var(--brand-900);
    margin-block-end: var(--space-3);
}

.service-page__summary {
    color: var(--text-muted);
    font-size: var(--fs-md);
}

.service-page__body {
    padding-block: var(--space-7);
    max-width: 760px;
}

.service-page__body p {
    margin-block-end: var(--space-4);
    color: var(--text);
}

/* Related services — compact one-row cards on service detail pages */
.services-grid--related {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
}

.service-card--compact {
    padding: var(--space-3);
}

.service-card--compact .service-card__thumb {
    aspect-ratio: 16 / 10;
    margin-block-end: var(--space-2);
    border-radius: calc(var(--radius) - 2px);
}

.service-card--compact .service-card__title {
    font-size: var(--fs-sm);
    margin-block-end: var(--space-1);
    line-height: var(--lh-tight);
}

.service-card--compact .service-card__text {
    font-size: var(--fs-xs);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
}

/* Newborn screening dedicated page */
.nhs-page {
    --nhs-ink: var(--brand-900);
}

.nhs-hero {
    position: relative;
    min-height: min(72vh, 640px);
    display: grid;
    align-items: end;
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
}

.nhs-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.nhs-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(6, 61, 43, 0.15) 0%, rgba(6, 61, 43, 0.55) 45%, rgba(6, 61, 43, 0.88) 100%),
        linear-gradient(90deg, rgba(6, 61, 43, 0.45), transparent 55%);
}

.nhs-hero__inner {
    position: relative;
    z-index: 2;
    padding-block: var(--space-8) var(--space-7);
    max-width: 760px;
    margin-inline: auto;
    animation: nhs-hero-in 0.7s var(--ease-out, ease) both;
}

.nhs-hero__crumb {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-sm);
}

.nhs-hero__crumb a {
    color: color-mix(in srgb, var(--white) 85%, transparent);
    text-decoration: none;
}

.nhs-hero__crumb a:hover {
    color: var(--white);
    text-decoration: underline;
}

.nhs-hero__title {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    line-height: var(--lh-tight);
    color: var(--white);
    font-weight: var(--fw-black, 800);
}

.nhs-hero__summary {
    margin: 0 0 var(--space-5);
    font-size: var(--fs-md);
    color: color-mix(in srgb, var(--white) 88%, transparent);
    max-width: 36rem;
}

.nhs-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.btn--ghost-light {
    background: transparent;
    color: var(--white);
    border-color: color-mix(in srgb, var(--white) 55%, transparent);
}

.btn--ghost-light:hover {
    background: color-mix(in srgb, var(--white) 14%, transparent);
    color: var(--white);
    border-color: var(--white);
}

.nhs-lead {
    color: var(--text-muted);
    font-size: var(--fs-md);
    margin: 0 0 var(--space-5);
    max-width: 40rem;
}

.nhs-lead--center {
    margin-inline: auto;
    text-align: center;
}

.nhs-why {
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--brand-100) 70%, transparent), transparent 60%),
        var(--surface);
}

.nhs-why__inner {
    width: 100%;
}

.nhs-why__header {
    text-align: center;
    margin-block-end: var(--space-6);
    max-width: none;
}

.nhs-why__title {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.55rem, 3.2vw, 2.15rem);
    color: var(--brand-900);
    font-weight: var(--fw-black, 800);
    line-height: var(--lh-tight);
}

.nhs-why__lead {
    margin: 0 auto;
    max-width: 46rem;
    color: var(--text-muted);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed, 1.7);
}

.nhs-why__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    width: 100%;
}

.nhs-why__card {
    position: relative;
    padding: var(--space-5);
    border-block-start: 3px solid var(--brand-500);
    background: color-mix(in srgb, var(--brand-50) 55%, var(--surface));
}

.nhs-why__card-num {
    display: block;
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--brand-400);
    line-height: 1;
    margin-block-end: var(--space-3);
    font-variant-numeric: tabular-nums;
}

.nhs-why__point {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed, 1.75);
    max-width: none;
}

.nhs-path__steps {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    counter-reset: none;
}

.nhs-path__step {
    position: relative;
    padding-block-start: var(--space-2);
}

.nhs-path__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand-700);
    color: var(--white);
    font-weight: 700;
    font-size: var(--fs-sm);
    margin-block-end: var(--space-3);
    font-variant-numeric: tabular-nums;
}

.nhs-path__title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-md);
    color: var(--brand-900);
}

.nhs-path__text {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.nhs-parent__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-6);
    align-items: center;
}

.nhs-parent__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-lg, var(--radius));
    display: block;
}

.nhs-parent__copy p {
    color: var(--text);
    line-height: var(--lh-relaxed, 1.7);
}

.nhs-tabs__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-block: var(--space-5) var(--space-5);
    padding: var(--space-3);
    background: color-mix(in srgb, var(--brand-50) 65%, var(--surface));
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-lg, var(--radius));
}

.nhs-tabs__tab {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--brand-800);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 0.55rem 1rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
    text-align: center;
    line-height: 1.35;
}

.nhs-tabs__tab:hover {
    background: var(--surface);
    border-color: var(--brand-200);
    color: var(--brand-900);
}

.nhs-tabs__tab.is-active {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: var(--white);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-700) 28%, transparent);
}

.nhs-tabs__tab:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}

.nhs-tabs__panel[hidden] {
    display: none !important;
}

.nhs-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.nhs-check-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.nhs-check-item.is-yes {
    border-color: var(--brand-300);
    background: color-mix(in srgb, var(--brand-50) 80%, var(--surface));
}

.nhs-check-item.is-no {
    border-color: color-mix(in srgb, #c0392b 45%, var(--border));
    background: color-mix(in srgb, #fdecea 70%, var(--surface));
}

.nhs-check-item__text {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text);
}

.nhs-check-item__actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.nhs-check-btn {
    appearance: none;
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    min-width: 3.25rem;
}

.nhs-check-btn--yes[aria-pressed="true"] {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: var(--white);
}

.nhs-check-btn--no[aria-pressed="true"] {
    background: #c0392b;
    border-color: #c0392b;
    color: var(--white);
}

.nhs-checklist__summary {
    margin-block-start: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg, var(--radius));
    border: 1px solid var(--border);
    background: var(--surface);
}

.nhs-checklist__status--ok {
    margin: 0;
    color: var(--brand-800);
    font-weight: 600;
}

.nhs-checklist__status--warn p {
    margin: 0 0 var(--space-2);
    color: #922b21;
    font-weight: 600;
}

.nhs-checklist__no-count {
    font-size: var(--fs-sm);
    font-weight: 500 !important;
}

.nhs-checklist__credit {
    margin-block-start: var(--space-5);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-align: center;
}

.nhs-milestone-list {
    display: grid;
    gap: var(--space-4);
    margin-block-start: var(--space-5);
}

.nhs-milestone {
    display: grid;
    grid-template-columns: minmax(7.5rem, 9.5rem) 1fr;
    gap: var(--space-4);
    align-items: stretch;
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, var(--radius));
    border-inline-start: 4px solid var(--brand-500);
}

.nhs-milestone__age {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--brand-50);
    border-radius: var(--radius);
    text-align: center;
}

.nhs-milestone__age-label {
    font-size: var(--fs-xs);
    color: var(--brand-600);
    font-weight: 600;
}

.nhs-milestone__age-value {
    font-size: var(--fs-md);
    color: var(--brand-900);
    font-weight: 700;
    line-height: var(--lh-tight);
}

.nhs-milestone__body {
    display: grid;
    gap: var(--space-3);
}

.nhs-milestone__block {
    padding: var(--space-3);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-50) 40%, var(--surface));
}

.nhs-milestone__block--vocal {
    background: color-mix(in srgb, var(--accent-500, #d4a017) 8%, var(--surface));
}

.nhs-milestone__heading {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--brand-700);
    text-transform: none;
}

.nhs-milestone__block--vocal .nhs-milestone__heading {
    color: color-mix(in srgb, var(--accent-600, #b8860b) 80%, var(--brand-800));
}

.nhs-milestone__text {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: var(--lh-relaxed, 1.7);
}

.nhs-milestones__note {
    margin-block-start: var(--space-4);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-align: center;
}

.nhs-final-cta__inner {
    text-align: center;
}

/* Hearing aids — conversion mid CTA + 5-step path */
.ha-mid-cta {
    background: linear-gradient(135deg, var(--brand-800), var(--brand-600));
    color: var(--white);
    padding-block: var(--space-7);
    text-align: center;
}

.ha-mid-cta__inner {
    max-width: 40rem;
    margin-inline: auto;
}

.ha-mid-cta__title {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.35rem, 2.8vw, 1.85rem);
    color: var(--white);
    font-weight: var(--fw-black, 800);
    line-height: var(--lh-tight);
}

.ha-mid-cta__text {
    margin: 0 0 var(--space-5);
    color: color-mix(in srgb, var(--white) 88%, transparent);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed, 1.7);
}

.ha-mid-cta .btn--primary {
    background: var(--white);
    color: var(--brand-800);
    border-color: var(--white);
}

.ha-mid-cta .btn--primary:hover {
    background: var(--brand-50);
    color: var(--brand-900);
    border-color: var(--brand-50);
}

.ha-path__steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Hearing assessment — tests, ages, prep */
.has-tests__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-block-start: var(--space-5);
}

.has-tests__grid--ep {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.has-tests__card--wide {
    grid-column: span 2;
}

.has-tests__card {
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, var(--radius));
    border-block-start: 3px solid var(--brand-500);
}

.has-tests__num {
    display: block;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--brand-400);
    line-height: 1;
    margin-block-end: var(--space-3);
    font-variant-numeric: tabular-nums;
}

.has-tests__title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-md);
    color: var(--brand-900);
}

.has-tests__text {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: var(--lh-relaxed, 1.7);
}

.has-ages__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-block-start: var(--space-5);
}

.has-ages__card {
    padding: var(--space-5);
    background: color-mix(in srgb, var(--brand-50) 55%, var(--surface));
    border-radius: var(--radius-lg, var(--radius));
    border-inline-start: 4px solid var(--brand-600);
}

.has-ages__title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-md);
    color: var(--brand-900);
}

.has-ages__text {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: var(--lh-relaxed, 1.7);
}

.has-prep__list {
    list-style: none;
    margin: var(--space-5) auto 0;
    padding: 0;
    max-width: 48rem;
    display: grid;
    gap: var(--space-3);
}

.has-prep__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.has-prep__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--brand-700);
    color: var(--white);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.has-prep__text {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: var(--lh-relaxed, 1.7);
}

@keyframes nhs-hero-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nhs-hero__inner {
        animation: none;
    }

    .nhs-check-item {
        transition: none;
    }
}

@media (max-width: 1100px) {
    .ha-path__steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .services-grid--related {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .nhs-why__points,
    .nhs-path__steps,
    .ha-path__steps,
    .nhs-parent__grid,
    .has-tests__grid,
    .has-tests__grid--ep,
    .has-ages__grid {
        grid-template-columns: 1fr;
    }

    .has-tests__card--wide {
        grid-column: auto;
    }

    .nhs-milestone {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .nhs-milestone__age {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: start;
    }

    .services-grid--related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .nhs-hero {
        min-height: min(68vh, 560px);
    }

    .nhs-tabs__list {
        justify-content: stretch;
        gap: var(--space-2);
    }

    .nhs-tabs__tab {
        flex: 1 1 calc(50% - var(--space-2));
        min-width: calc(50% - var(--space-2));
    }

    .nhs-check-item {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .services-grid--related {
        grid-template-columns: 1fr;
    }
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: var(--space-3);
}

.slot-chip {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    padding: 0.7rem 0.4rem;
    font: inherit;
    cursor: pointer;
}

.slot-chip--available {
    border-color: var(--brand-300);
    color: var(--brand-800);
}

.slot-chip--limited {
    border-color: var(--accent-500);
    color: var(--accent-600);
}

.slot-chip--full,
.slot-chip--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.modal[hidden] {
    display: none !important;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(16, 32, 27, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    z-index: 1000;
}

.modal__dialog {
    width: min(520px, 100%);
    max-height: 90vh;
    overflow: auto;
}

@media (max-width: 768px) {
    .hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero__subtitle,
    .hero__lead,
    .hero__tagline,
    .hero__eq-wrap,
    .hero__eq {
        margin-inline: auto;
    }

    .hero__actions {
        justify-content: center;
    }

    .about-stats,
    .staff-grid--featured,
    .contact-grid,
    .services-grid,
    .testimonials-grid,
    .staff-grid--team,
    .certificates-grid {
        grid-template-columns: 1fr;
    }

    .hero__brand-mark {
        margin-inline: auto;
        width: 180px;
        height: 180px;
    }

    .hero__brand-mark img {
        width: 110px;
    }
}

/* ===== icons.css ===== */
/* Danesh Clinic Platform - Font Awesome 7 subset (auto-generated) */
/*!
 * Font Awesome Free 7.3.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2026 Fonticons, Inc.
 */
:host,:root{--fa-family-classic:"Font Awesome 7 Free";--fa-font-solid:normal 900 1em/1 var(--fa-family-classic);--fa-style-family-classic:var(--fa-family-classic)}@font-face{font-family:"Font Awesome 7 Free";font-style:normal;font-weight: 700;font-display:swap;src:url(../fontawesome/webfonts/fa-solid-900.woff2)}.fas{--fa-style:900}.fa-classic,.fas{--fa-family:var(--fa-family-classic)}.fa-solid{--fa-style:900}
/*!
 * Font Awesome Free 7.3.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2026 Fonticons, Inc.
 */
.fa,.fa-brands,.fa-classic,.fa-regular,.fa-solid,.fab,.far,.fas{--_fa-family:var(--fa-family,var(--fa-style-family,"Font Awesome 7 Free"));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:var(--fa-display,inline-block);font-family:var(--_fa-family);font-feature-settings:normal;font-style:normal;font-synthesis:none;font-variant:normal;font-weight:var(--fa-style,900);line-height:1;text-align:center;text-rendering:auto;width:var(--fa-width,1.25em)}:is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa):before{content:var(--fa)/""}@supports not (content:""/""){:is(.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands,.fa-classic,.fa):before{content:var(--fa)}}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-width-auto{--fa-width:auto}.fa-fw,.fa-width-fixed{--fa-width:1.25em}.fa-canvas-square{padding-block:.125em;margin-block-end:-.125em}.fa-canvas-roomy{padding-block:.25em;padding-inline:.125em;margin-block-end:-.25em;box-sizing:content-box}.fa-ul{list-style-type:none;margin-inline-start:var(--fa-li-margin,2.5em);padding-inline-start:0}.fa-ul>li{position:relative}.fa-li{inset-inline-start:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.0625em) var(--fa-border-style,solid) var(--fa-border-color,#eee);box-sizing:var(--fa-border-box-sizing,content-box);padding:var(--fa-border-padding,.1875em .25em)}.fa-pull-left,.fa-pull-start{float:inline-start;margin-inline-end:var(--fa-pull-margin,.3em)}.fa-pull-end,.fa-pull-right{float:inline-end;margin-inline-start:var(--fa-pull-margin,.3em)}.fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-name:fa-bounce;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{animation-name:fa-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-beat-fade,.fa-fade{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{animation-name:fa-beat-fade;animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-flip{animation-name:fa-flip;animation-duration:var(--fa-animation-duration,1.5s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-flip,.fa-flip-360{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-flip-360{animation-name:fa-flip-360;animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-name:fa-shake;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,.75s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-spin{animation-name:fa-spin;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-name:fa-spin;animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,steps(8))}.fa-spin-snap{animation-name:fa-spin-snap;animation-duration:var(--fa-animation-duration,3s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-snap,.fa-spin-snap-4{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-spin-snap-4{animation-name:fa-spin-snap-4;animation-duration:var(--fa-animation-duration,2.4s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-snap-8{animation-name:fa-spin-snap-8;animation-duration:var(--fa-animation-duration,4s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-buzz,.fa-spin-snap-8{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-buzz{animation-name:fa-buzz;animation-duration:var(--fa-animation-duration,.6s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-wag{animation-name:fa-wag;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,.9s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-out);transform-origin:bottom center}.fa-float{animation-name:fa-float;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,3s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out);will-change:transform}.fa-swing{animation-name:fa-swing;animation-duration:var(--fa-animation-duration,1.2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-out);transform-origin:top center}.fa-jello,.fa-swing{animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal)}.fa-jello{animation-name:fa-jello;animation-duration:var(--fa-animation-duration,.9s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-out)}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-buzz,.fa-fade,.fa-flip,.fa-flip-360,.fa-float,.fa-jello,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse,.fa-spin-snap,.fa-spin-snap-4,.fa-spin-snap-8,.fa-swing,.fa-wag{animation:none!important;transition:none!important}}@keyframes fa-beat{0%{transform:scale(1)}25%{transform:scale(calc(var(--fa-beat-scale, 1.25)*1.25))}45%{transform:scale(calc(var(--fa-beat-scale, 1.22)*1.22))}65%{transform:scale(calc(var(--fa-beat-scale, 1.25)*1.25))}90%{transform:scale(1)}}@keyframes fa-bounce{0%{transform:scale(1) translateY(0);animation-timing-function:var(--fa-animation-timing)}14%{transform:scale(var(--fa-bounce-start-scale-x,1.06),var(--fa-bounce-start-scale-y,.94)) translateY(var(--fa-bounce-anticipation,3px));animation-timing-function:cubic-bezier(.33,0,.66,.33)}32%{transform:scale(var(--fa-bounce-jump-scale-x,.94),var(--fa-bounce-jump-scale-y,1.12)) translateY(calc(var(--fa-bounce-height, .5em)*-1));animation-timing-function:cubic-bezier(.33,.66,.66,1)}52%{transform:scale(1) translateY(calc(var(--fa-bounce-height, .5em)*-1*1.1));animation-timing-function:cubic-bezier(.5,0,1,.5)}70%{transform:scale(var(--fa-bounce-land-scale-x,1.06),var(--fa-bounce-land-scale-y,.92)) translateY(0);animation-timing-function:cubic-bezier(.33,.33,.66,1)}85%{transform:scale(.98,1.04) translateY(calc(-2px*var(--fa-bounce-rebound, 1)));animation-timing-function:cubic-bezier(.33,0,.66,1)}to{transform:scale(1) translateY(0)}}@keyframes fa-fade{0%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.2,0,.4,1)}40%{opacity:var(--fa-fade-opacity,.4);transform:scale(.98);animation-timing-function:cubic-bezier(.4,0,.6,1)}to{opacity:1;transform:scale(1)}}@keyframes fa-beat-fade{0%{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1);animation-timing-function:cubic-bezier(.2,0,.4,1)}25%{opacity:calc(var(--fa-beat-fade-opacity, .4) + .4);transform:scale(var(--fa-beat-fade-scale,1.28));animation-timing-function:cubic-bezier(.4,0,.6,1)}45%{opacity:1;transform:scale(var(--fa-beat-fade-scale,1.25));animation-timing-function:cubic-bezier(.4,0,.2,1)}65%{opacity:calc(var(--fa-beat-fade-opacity, .4) + .4);transform:scale(var(--fa-beat-fade-scale,1.28));animation-timing-function:cubic-bezier(.4,0,.6,1)}to{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}}@keyframes fa-flip{0%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),0deg);animation-timing-function:cubic-bezier(.2,0,.4,1)}8%{transform:perspective(2em) scale(var(--fa-flip-anticipation-scale,.95)) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),0deg);animation-timing-function:cubic-bezier(.33,0,.66,.33)}35%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),calc(var(--fa-flip-angle, -1turn)*0.6));animation-timing-function:linear}65%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),calc(var(--fa-flip-angle, -1turn)*0.5));animation-timing-function:cubic-bezier(.33,.66,.66,1)}92%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),calc(var(--fa-flip-angle, -1turn)*var(--fa-flip-overshoot, 1.04)));animation-timing-function:cubic-bezier(.33,0,.66,1)}to{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-1turn))}}@keyframes fa-flip-360{0%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),0deg);animation-timing-function:cubic-bezier(.2,0,.4,1)}8%{transform:perspective(2em) scale(var(--fa-flip-anticipation-scale,.95)) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),0deg);animation-timing-function:cubic-bezier(.33,0,.66,.33)}50%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),calc(var(--fa-flip-angle, -1turn)*0.6));animation-timing-function:cubic-bezier(.33,.66,.66,1)}80%{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),calc(var(--fa-flip-angle, -1turn)*var(--fa-flip-overshoot, 1.04)));animation-timing-function:cubic-bezier(.33,0,.66,1)}to{transform:perspective(2em) scale(1) rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-1turn))}}@keyframes fa-shake{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,0,.8,1)}8%{transform:rotate(35deg) translateX(1px);animation-timing-function:cubic-bezier(.3,0,.7,1)}20%{transform:rotate(-22deg) translateX(-1px);animation-timing-function:cubic-bezier(.3,0,.7,1)}35%{transform:rotate(15deg) translateX(1px);animation-timing-function:cubic-bezier(.3,0,.7,1)}50%{transform:rotate(-9deg);animation-timing-function:cubic-bezier(.4,0,.6,1)}65%{transform:rotate(5deg);animation-timing-function:cubic-bezier(.4,0,.6,1)}78%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.4,0,.6,1)}90%{transform:rotate(1deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}to{transform:rotate(0deg)}}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fa-spin-snap{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0,0,.2,1)}12%{transform:rotate(60deg);animation-timing-function:cubic-bezier(.8,0,1,1)}16.67%{transform:rotate(60deg);animation-timing-function:cubic-bezier(0,0,.2,1)}28.67%{transform:rotate(120deg);animation-timing-function:cubic-bezier(.8,0,1,1)}33.33%{transform:rotate(120deg);animation-timing-function:cubic-bezier(0,0,.2,1)}45.33%{transform:rotate(180deg);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:rotate(180deg);animation-timing-function:cubic-bezier(0,0,.2,1)}62%{transform:rotate(240deg);animation-timing-function:cubic-bezier(.8,0,1,1)}66.67%{transform:rotate(240deg);animation-timing-function:cubic-bezier(0,0,.2,1)}78.67%{transform:rotate(300deg);animation-timing-function:cubic-bezier(.8,0,1,1)}83.33%{transform:rotate(300deg);animation-timing-function:cubic-bezier(0,0,.2,1)}95.33%{transform:rotate(1turn);animation-timing-function:cubic-bezier(.8,0,1,1)}to{transform:rotate(1turn)}}@keyframes fa-spin-snap-4{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0,0,.2,1)}15%{transform:rotate(90deg);animation-timing-function:cubic-bezier(.8,0,1,1)}25%{transform:rotate(90deg);animation-timing-function:cubic-bezier(0,0,.2,1)}40%{transform:rotate(180deg);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:rotate(180deg);animation-timing-function:cubic-bezier(0,0,.2,1)}65%{transform:rotate(270deg);animation-timing-function:cubic-bezier(.8,0,1,1)}75%{transform:rotate(270deg);animation-timing-function:cubic-bezier(0,0,.2,1)}90%{transform:rotate(1turn);animation-timing-function:cubic-bezier(.8,0,1,1)}to{transform:rotate(1turn)}}@keyframes fa-spin-snap-8{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0,0,.2,1)}9%{transform:rotate(45deg);animation-timing-function:cubic-bezier(.8,0,1,1)}12.5%{transform:rotate(45deg);animation-timing-function:cubic-bezier(0,0,.2,1)}21.5%{transform:rotate(90deg);animation-timing-function:cubic-bezier(.8,0,1,1)}25%{transform:rotate(90deg);animation-timing-function:cubic-bezier(0,0,.2,1)}34%{transform:rotate(135deg);animation-timing-function:cubic-bezier(.8,0,1,1)}37.5%{transform:rotate(135deg);animation-timing-function:cubic-bezier(0,0,.2,1)}46.5%{transform:rotate(180deg);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:rotate(180deg);animation-timing-function:cubic-bezier(0,0,.2,1)}59%{transform:rotate(225deg);animation-timing-function:cubic-bezier(.8,0,1,1)}62.5%{transform:rotate(225deg);animation-timing-function:cubic-bezier(0,0,.2,1)}71.5%{transform:rotate(270deg);animation-timing-function:cubic-bezier(.8,0,1,1)}75%{transform:rotate(270deg);animation-timing-function:cubic-bezier(0,0,.2,1)}84%{transform:rotate(315deg);animation-timing-function:cubic-bezier(.8,0,1,1)}87.5%{transform:rotate(315deg);animation-timing-function:cubic-bezier(0,0,.2,1)}96.5%{transform:rotate(1turn);animation-timing-function:cubic-bezier(.8,0,1,1)}to{transform:rotate(1turn)}}@keyframes fa-buzz{0%{transform:translateX(0) rotate(0deg);animation-timing-function:cubic-bezier(.1,0,.9,1)}5%{transform:translateX(var(--fa-buzz-distance,4px)) rotate(.5deg)}10%{transform:translateX(calc(var(--fa-buzz-distance, 4px)*-1)) rotate(-.5deg)}15%{transform:translateX(var(--fa-buzz-distance,4px)) rotate(.3deg)}20%{transform:translateX(calc(var(--fa-buzz-distance, 4px)*-1)) rotate(-.3deg)}25%{transform:translateX(calc(var(--fa-buzz-distance, 4px)*0.7)) rotate(.2deg)}30%{transform:translateX(calc(var(--fa-buzz-distance, 4px)*-1*0.7)) rotate(-.2deg)}35%{transform:translateX(calc(var(--fa-buzz-distance, 4px)*0.4)) rotate(.1deg)}40%{transform:translateX(0) rotate(0deg)}to{transform:translateX(0) rotate(0deg)}}@keyframes fa-wag{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,0,.6,1)}12%{transform:rotate(var(--fa-wag-angle,12deg));animation-timing-function:cubic-bezier(.4,0,.2,1)}24%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.2,0,.6,1)}36%{transform:rotate(calc(var(--fa-wag-angle, 12deg)*0.85));animation-timing-function:cubic-bezier(.4,0,.2,1)}48%{transform:rotate(1deg);animation-timing-function:cubic-bezier(.2,0,.6,1)}58%{transform:rotate(calc(var(--fa-wag-angle, 12deg)*0.6));animation-timing-function:cubic-bezier(.4,0,.2,1)}68%{transform:rotate(0deg)}to{transform:rotate(0deg)}}@keyframes fa-float{0%{transform:translateY(0) translateX(0) rotate(0deg) scale(var(--fa-float-squash-x,1.02),var(--fa-float-squash-y,.98));animation-timing-function:cubic-bezier(.33,0,.66,.33)}15%{transform:translateY(calc(var(--fa-float-height, 6px)*-0.4)) translateX(var(--fa-float-drift,1px)) rotate(var(--fa-float-tilt,1deg)) scale(1);animation-timing-function:cubic-bezier(.33,.66,.66,1)}35%{transform:translateY(calc(var(--fa-float-height, 6px)*-1)) translateX(0) rotate(0deg) scale(var(--fa-float-stretch-x,.98),var(--fa-float-stretch-y,1.03));animation-timing-function:cubic-bezier(.5,0,.5,0)}50%{transform:translateY(calc(var(--fa-float-height, 6px)*-0.92)) translateX(calc(var(--fa-float-drift, 1px)*-0.5)) rotate(calc(var(--fa-float-tilt, 1deg)*-0.5)) scale(.995,1.01);animation-timing-function:cubic-bezier(.33,0,.66,.33)}70%{transform:translateY(calc(var(--fa-float-height, 6px)*-0.3)) translateX(calc(var(--fa-float-drift, 1px)*-1)) rotate(calc(var(--fa-float-tilt, 1deg)*-1)) scale(1);animation-timing-function:cubic-bezier(.33,.66,.66,1)}90%{transform:translateY(calc(var(--fa-float-height, 6px)*0.05)) translateX(0) rotate(0deg) scale(var(--fa-float-squash-x,1.02),var(--fa-float-squash-y,.98));animation-timing-function:cubic-bezier(.33,0,.66,1)}to{transform:translateY(0) translateX(0) rotate(0deg) scale(var(--fa-float-squash-x,1.02),var(--fa-float-squash-y,.98))}}@keyframes fa-swing{0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.2,0,.8,1)}8%{transform:rotate(var(--fa-swing-angle,22deg));animation-timing-function:cubic-bezier(.3,0,.7,1)}18%{transform:rotate(calc(var(--fa-swing-angle, 22deg)*-1*0.85));animation-timing-function:cubic-bezier(.3,0,.7,1)}28%{transform:rotate(calc(var(--fa-swing-angle, 22deg)*0.65));animation-timing-function:cubic-bezier(.35,0,.65,1)}38%{transform:rotate(calc(var(--fa-swing-angle, 22deg)*-1*0.45));animation-timing-function:cubic-bezier(.4,0,.6,1)}48%{transform:rotate(calc(var(--fa-swing-angle, 22deg)*0.25));animation-timing-function:cubic-bezier(.4,0,.6,1)}56%{transform:rotate(calc(var(--fa-swing-angle, 22deg)*-1*0.1));animation-timing-function:cubic-bezier(.4,0,.6,1)}64%{transform:rotate(0deg)}to{transform:rotate(0deg)}}@keyframes fa-jello{0%{transform:scale(1);animation-timing-function:cubic-bezier(.2,0,.8,1)}12%{transform:scale(var(--fa-jello-scale-x,1.15),calc(2 - var(--fa-jello-scale-x, 1.15)));animation-timing-function:cubic-bezier(.3,0,.7,1)}24%{transform:scale(calc(2 - var(--fa-jello-scale-y, 1.12)),var(--fa-jello-scale-y,1.12));animation-timing-function:cubic-bezier(.3,0,.7,1)}36%{transform:scale(calc(.5 + var(--fa-jello-scale-x, 1.15)*0.5),calc(1.5 - var(--fa-jello-scale-x, 1.15)*0.5));animation-timing-function:cubic-bezier(.4,0,.6,1)}48%{transform:scale(calc(1.3 - var(--fa-jello-scale-y, 1.12)*0.3),calc(.7 + var(--fa-jello-scale-y, 1.12)*0.3));animation-timing-function:cubic-bezier(.4,0,.6,1)}58%{transform:scale(1.02,.98);animation-timing-function:cubic-bezier(.4,0,.2,1)}68%{transform:scale(1)}to{transform:scale(1)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(var(--fa-rotate-angle,0))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{--fa-width:100%;inset:0;position:absolute;text-align:center;width:var(--fa-width);z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)}

.fa-globe{--fa:"\f0ac"}.fa-envelope{--fa:"\f0e0"}.fa-gauge,.fa-gauge-med,.fa-tachometer-alt-average{--fa:"\f624"}.fa-key{--fa:"\f084"}.fa-right-from-bracket,.fa-sign-out-alt{--fa:"\f2f5"}.fa-right-to-bracket,.fa-sign-in-alt{--fa:"\f2f6"}.fa-bars,.fa-navicon{--fa:"\f0c9"}.fa-chevron-left{--fa:"\f053"}.fa-chevron-right{--fa:"\f054"}.fa-angles-left{--fa:"\f100"}.fa-angles-right{--fa:"\f101"}.fa-house{--fa:"\f015"}.fa-file-lines,.fa-file-text{--fa:"\f15c"}.fa-newspaper{--fa:"\f1ea"}.fa-box{--fa:"\f466"}.fa-cart-shopping,.fa-shopping-cart{--fa:"\f07a"}.fa-calendar-check{--fa:"\f274"}.fa-concierge-bell{--fa:"\f562"}.fa-share-nodes{--fa:"\f1e0"}.fa-share{--fa:"\f064"}.fa-flask{--fa:"\f0c3"}.fa-screwdriver-wrench,.fa-tools{--fa:"\f7d9"}.fa-clock,.fa-clock-four{--fa:"\f017"}.fa-wrench{--fa:"\f0ad"}.fa-ear-deaf,.fa-hard-of-hearing{--fa:"\f2a4"}.fa-ear-listen{--fa:"\f2a2"}.fa-clock-rotate-left,.fa-history{--fa:"\f1da"}.fa-clipboard-list{--fa:"\f46d"}.fa-comments{--fa:"\f086"}.fa-star{--fa:"\f005"}.fa-cloud-arrow-up,.fa-cloud-upload,.fa-cloud-upload-alt{--fa:"\f0ee"}.fa-flag{--fa:"\f024"}.fa-users{--fa:"\f0c0"}.fa-shield,.fa-shield-blank{--fa:"\f132"}.fa-list-check,.fa-tasks{--fa:"\f0ae"}.fa-gear{--fa:"\f013"}.fa-user-doctor,.fa-user-md{--fa:"\f0f0"}.fa-calendar-days{--fa:"\f073"}.fa-sms{--fa:"\f7cd"}.fa-layer-group{--fa:"\f5fd"}.fa-robot{--fa:"\f544"}.fa-calendar{--fa:"\f133"}.fa-bell{--fa:"\f0f3"}.fa-magnifying-glass,.fa-search{--fa:"\f002"}.fa-sun{--fa:"\f185"}.fa-moon{--fa:"\f186"}.fa-xmark{--fa:"\f00d"}.fa-check{--fa:"\f00c"}.fa-plus{--fa:"\+"}.fa-spinner{--fa:"\f110"}.fa-circle-notch{--fa:"\f1ce"}.fa-medal{--fa:"\f5a2"}.fa-trophy{--fa:"\f091"}.fa-play{--fa:"\f04b"}.fa-pause{--fa:"\f04c"}.fa-volume-high,.fa-volume-up{--fa:"\f028"}.fa-chart-line,.fa-line-chart{--fa:"\f201"}.fa-person-walking,.fa-walking{--fa:"\f554"}.fa-message{--fa:"\f27a"}.fa-file-medical{--fa:"\f477"}.fa-headphones,.fa-headphones-alt,.fa-headphones-simple{--fa:"\f025"}.fa-trash{--fa:"\f1f8"}.fa-pen{--fa:"\f304"}.fa-save{--fa:"\f0c7"}.fa-filter{--fa:"\f0b0"}.fa-ellipsis,.fa-ellipsis-h{--fa:"\f141"}.fa-circle-info,.fa-info-circle{--fa:"\f05a"}.fa-circle-check{--fa:"\f058"}.fa-circle-xmark,.fa-times-circle,.fa-xmark-circle{--fa:"\f057"}.fa-upload{--fa:"\f093"}.fa-download{--fa:"\f019"}.fa-link{--fa:"\f0c1"}.fa-phone{--fa:"\f095"}.fa-location-dot,.fa-map-marker-alt{--fa:"\f3c5"}.fa-language{--fa:"\f1ab"}.fa-user,.fa-user-alt,.fa-user-large{--fa:"\f007"}.fa-user-circle{--fa:"\f2bd"}.fa-envelope-open{--fa:"\f2b6"}.fa-flask-vial{--fa:"\e4f3"}.fa-brain{--fa:"\f5dc"}.fa-hospital,.fa-hospital-alt,.fa-hospital-wide{--fa:"\f0f8"}.fa-stethoscope{--fa:"\f0f1"}.fa-notes-medical{--fa:"\f481"}.fa-file-audio{--fa:"\f1c7"}.fa-image{--fa:"\f03e"}.fa-folder,.fa-folder-blank{--fa:"\f07b"}.fa-table{--fa:"\f0ce"}.fa-chart-bar{--fa:"\f080"}.fa-chart-pie,.fa-pie-chart{--fa:"\f200"}.fa-bolt,.fa-zap{--fa:"\f0e7"}.fa-lock{--fa:"\f023"}.fa-eye{--fa:"\f06e"}.fa-eye-slash{--fa:"\f070"}.fa-chevron-down{--fa:"\f078"}.fa-chevron-up{--fa:"\f077"}.fa-minus,.fa-subtract{--fa:"\f068"}.fa-search{--fa:"\f002"}.fa-right-left{--fa:"\f362"}.fa-bars-staggered,.fa-reorder,.fa-stream{--fa:"\f550"}.fa-cloud-upload,.fa-cloud-upload-alt{--fa:"\f0ee"}.fa-store{--fa:"\f54e"}.fa-receipt{--fa:"\f543"}.fa-credit-card,.fa-credit-card-alt{--fa:"\f09d"}.fa-wheelchair{--fa:"\f193"}.fa-dizzy,.fa-face-dizzy{--fa:"\f567"}.fa-rotate,.fa-sync-alt{--fa:"\f2f1"}.fa-pen-to-square{--fa:"\f044"}.fa-circle-question,.fa-question-circle{--fa:"\f059"}.fa-calendar-plus{--fa:"\f271"}.fa-credit-card,.fa-credit-card-alt{--fa:"\f09d"}.fa-circle{--fa:"\f111"}.fa-calendar-day{--fa:"\f783"}.fa-triangle-exclamation,.fa-warning{--fa:"\f071"}.fa-bullseye{--fa:"\f140"}.fa-handshake,.fa-handshake-alt,.fa-handshake-simple{--fa:"\f2b5"}.fa-hand-holding-heart{--fa:"\f4be"}.fa-graduation-cap,.fa-mortar-board{--fa:"\f19d"}.fa-paperclip{--fa:"\f0c6"}.fa-paper-plane{--fa:"\f1d8"}.fa-face-smile,.fa-smile{--fa:"\f118"}.fa-arrow-right{--fa:"\f061"}.fa-arrow-left{--fa:"\f060"}.fa-file-pdf{--fa:"\f1c1"}.fa-headset{--fa:"\f590"}.fa-user-shield{--fa:"\f505"}.fa-server{--fa:"\f233"}.fa-cloud-moon{--fa:"\f6c3"}.fa-user-pen{--fa:"\f4ff"}.fa-images{--fa:"\f302"}.fa-tags{--fa:"\f02c"}.fa-database{--fa:"\f1c0"}.fa-user-plus{--fa:"\f234"}.fa-file-invoice-dollar{--fa:"\f571"}.fa-file-invoice{--fa:"\f570"}.fa-clipboard-check{--fa:"\f46c"}.fa-boxes-stacked{--fa:"\f468"}.fa-hand-holding-medical{--fa:"\e05c"}.fa-hospital-user{--fa:"\f80d"}.fa-share-from-square,.fa-share-square{--fa:"\f14d"}.fa-user-group{--fa:"\f500"}.fa-heart-pulse,.fa-heartbeat{--fa:"\f21e"}.fa-truck{--fa:"\f0d1"}.fa-inbox{--fa:"\f01c"}.fa-circle-nodes{--fa:"\e4e2"}.fa-percent,.fa-percentage{--fa:"\%"}.fa-user-xmark{--fa:"\f235"}.fa-chart-simple{--fa:"\e473"}.fa-file-csv{--fa:"\f6dd"}.fa-print{--fa:"\f02f"}.fa-chart-column{--fa:"\e0e3"}.fa-expand{--fa:"\f065"}.fa-building{--fa:"\f1ad"}.fa-baby{--fa:"\f77c"}.fa-ban,.fa-cancel{--fa:"\f05e"}.fa-sliders,.fa-sliders-h{--fa:"\f1de"}.fa-gauge-high,.fa-tachometer-alt,.fa-tachometer-alt-fast{--fa:"\f625"}.fa-file-excel{--fa:"\f1c3"}.fa-copy{--fa:"\f0c5"}.fa-calculator{--fa:"\f1ec"}
/* ===== foundation.css ===== */
/* ==========================================================================
   Foundation UI — shared primitives for the whole platform.
   Load after design-system.css. Feature CSS must NOT re-define these.
   Contract: docs/FOUNDATION.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons (complete variant set)
   -------------------------------------------------------------------------- */
.btn--secondary {
    background: var(--surface-alt);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn--secondary:hover {
    background: var(--gray-200);
}
.btn--warning {
    background: var(--warning);
    color: var(--white);
    border-color: transparent;
}
.btn--warning:hover {
    filter: brightness(0.92);
}
.btn--success {
    background: var(--success);
    color: var(--white);
    border-color: transparent;
}
.btn--success:hover {
    filter: brightness(0.92);
}
.btn--link {
    background: transparent;
    border: 0;
    color: var(--brand-700);
    padding-inline: 0;
    text-decoration: underline;
    box-shadow: none;
}
.btn--link:hover {
    color: var(--brand-900);
}
.btn--icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
}
.btn--fab {
    position: fixed;
    inset-inline-end: var(--space-5);
    inset-block-end: calc(var(--space-5) + var(--bottom-nav-h, 0px));
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-pill);
    box-shadow: var(--elevation-3);
    z-index: var(--z-sticky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn--split {
    display: inline-flex;
    padding: 0;
    overflow: hidden;
}
.btn--split > .btn {
    border-radius: 0;
    margin: 0;
}
.btn--split > .btn:first-child {
    border-start-start-radius: var(--radius);
    border-end-start-radius: var(--radius);
}
.btn--split > .btn:last-child {
    border-start-end-radius: var(--radius);
    border-end-end-radius: var(--radius);
    border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   Form extras (switch, OTP, tags, file)
   -------------------------------------------------------------------------- */
.form-switch {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    display: inline-block;
}
.form-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.form-switch__track {
    position: absolute;
    inset: 0;
    background: var(--gray-300);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-out);
}
.form-switch__track::after {
    content: "";
    position: absolute;
    width: 1.1rem;
    height: 1.1rem;
    inset-block-start: 0.2rem;
    inset-inline-start: 0.2rem;
    background: var(--white);
    border-radius: var(--radius-pill);
    transition: transform var(--motion-fast) var(--ease-out);
    box-shadow: var(--shadow-sm);
}
.form-switch input:checked + .form-switch__track {
    background: var(--brand-700);
}
.form-switch input:checked + .form-switch__track::after {
    transform: translateX(1.2rem);
}
[dir="rtl"] .form-switch input:checked + .form-switch__track::after {
    transform: translateX(-1.2rem);
}

.otp-input {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}
.otp-input input {
    width: 2.75rem;
    height: 2.75rem;
    text-align: center;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}
.otp-input input:focus {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--brand-500);
}

.tag-input {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    min-height: 2.75rem;
}
.tag-input__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--brand-50);
    color: var(--brand-800);
    font-size: var(--fs-sm);
}
.tag-input__field {
    border: 0;
    outline: none;
    flex: 1;
    min-width: 6rem;
    background: transparent;
    color: var(--text);
}

.file-drop {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: var(--space-5);
    text-align: center;
    background: var(--surface-alt);
    color: var(--text-muted);
    transition: border-color var(--motion-fast), background var(--motion-fast);
}
.file-drop.is-dragover {
    border-color: var(--brand-500);
    background: var(--brand-50);
}

/* --------------------------------------------------------------------------
   Data Table System
   -------------------------------------------------------------------------- */
.data-table-shell {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--brand-300, #6bc4a3) 26%, var(--border, #e2e8e5));
    border-radius: 0.95rem;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(6, 61, 43, 0.045);
}
.data-table-shell__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-block-end: 1px solid color-mix(in srgb, var(--brand-200, #a7ddc8) 40%, var(--border, #e2e8e5));
    background: color-mix(in srgb, var(--brand-50, #eef8f3) 55%, var(--surface, #fff));
}
.data-table-shell__search {
    flex: 1 1 14rem;
    max-width: 22rem;
    min-width: 0;
}
.data-table-shell__search .search-bar__input,
.data-table-shell__search .form-control {
    min-height: 2.4rem;
    border-radius: 0.65rem;
}
.data-table-shell__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.data-table-shell__body {
    overflow: auto;
    max-height: min(72vh, 52rem);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.data-table th,
.data-table td {
    padding: 0.78rem 1rem;
    text-align: start;
    border-block-end: 1px solid color-mix(in srgb, var(--border, #e2e8e5) 88%, transparent);
    vertical-align: middle;
}
.data-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 2);
    background: var(--brand-50, #f3faf7);
    color: var(--brand-800, #084c36);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-block-end: 1px solid color-mix(in srgb, var(--brand-200, #a7ddc8) 55%, var(--border, #e2e8e5));
}
.data-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--brand-50, #f3faf7) 32%, transparent);
}
.data-table tbody tr:hover {
    background: color-mix(in srgb, var(--brand-100, #d6f0e5) 55%, transparent);
}
.data-table tbody tr:last-child td {
    border-block-end: 0;
}
.data-table__sortable {
    cursor: pointer;
    user-select: none;
}
.data-table__sortable::after {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-inline-start: 0.35rem;
    vertical-align: 0.12em;
    opacity: 0.35;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg);
}
.data-table__sortable.is-asc::after {
    opacity: 1;
    transform: rotate(-135deg);
    vertical-align: -0.05em;
}
.data-table__sortable.is-desc::after {
    opacity: 1;
    transform: rotate(45deg);
}
.data-table__check {
    width: 2.5rem;
    text-align: center;
}
.data-table-shell__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-block-start: 1px solid color-mix(in srgb, var(--brand-200, #a7ddc8) 40%, var(--border, #e2e8e5));
    background: color-mix(in srgb, var(--brand-50, #eef8f3) 35%, var(--surface, #fff));
    color: var(--text-muted, #64748b);
    font-size: 0.88rem;
    font-weight: 600;
}
.data-table-shell.is-loading .data-table-shell__body {
    position: relative;
    min-height: 8rem;
}
.data-table-shell.is-loading .data-table-shell__body::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}

@media (max-width: 720px) {
    .data-table--responsive thead { display: none; }
    .data-table--responsive tbody tr {
        display: block;
        border-block-end: 1px solid var(--border);
        padding: 0.85rem 1rem;
        background: transparent !important;
    }
    .data-table--responsive tbody tr:nth-child(even) {
        background: color-mix(in srgb, var(--brand-50, #f3faf7) 40%, transparent) !important;
    }
    .data-table--responsive td {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        border: 0;
        padding: 0.35rem 0;
    }
    .data-table--responsive td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--brand-800, #084c36);
        flex: 0 1 42%;
    }
}

/* Alias: .table stays valid; prefer .data-table for new work */
.table-wrap {
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--brand-300, #6bc4a3) 26%, var(--border, #e2e8e5));
    border-radius: 0.95rem;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(6, 61, 43, 0.045);
}
.table-wrap > .table,
.table-wrap > .data-table {
    box-shadow: none;
    border-radius: 0;
}

[data-theme="dark"] .data-table-shell,
[data-theme="dark"] .table-wrap {
    background: var(--surface);
    border-color: var(--border-strong);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .data-table-shell__toolbar,
[data-theme="dark"] .data-table-shell__footer {
    background: var(--surface-alt);
    border-color: var(--border);
}
[data-theme="dark"] .data-table thead th {
    background: var(--brand-100, #183a2c);
    color: var(--brand-800, #9fe0c2);
    border-block-end-color: var(--border-strong);
}
[data-theme="dark"] .data-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--surface-alt) 55%, transparent);
}
[data-theme="dark"] .data-table tbody tr:hover {
    background: var(--brand-100, #183a2c);
}
[data-theme="dark"] .data-table th,
[data-theme="dark"] .data-table td {
    border-block-end-color: var(--border);
}
[data-theme="dark"] .data-table--responsive td::before {
    color: var(--brand-800, #9fe0c2);
}

/* --------------------------------------------------------------------------
   Modal / Drawer / Bottom sheet (single system)
   -------------------------------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.modal--confirm,
.modal.modal--confirm {
    z-index: var(--z-critical, 5000);
}
.modal[hidden] { display: none !important; }
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 16, var(--opacity-overlay));
}
.modal__dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: min(90vh, 40rem);
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-3);
    padding: var(--space-5);
}
.modal__dialog--sm { width: min(360px, 100%); }
.modal__dialog--wide,
.modal__dialog--lg { width: min(720px, 100%); }
.modal__dialog--xl { width: min(960px, 100%); }
.modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
}
.modal__title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-black);
}
.modal__body { color: var(--text); }
.modal__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-block-start: var(--space-5);
}
.modal--drawer .modal__dialog {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inset-inline-start: auto;
    width: min(420px, 100%);
    max-height: none;
    height: 100%;
    border-radius: 0;
    border-inline-start: 1px solid var(--border);
    animation: foundation-slide-in var(--motion-base) var(--ease-out);
}
.modal--sheet {
    align-items: flex-end;
}
.modal--sheet .modal__dialog {
    width: 100%;
    max-width: 40rem;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    animation: foundation-sheet-up var(--motion-base) var(--ease-out);
}
body.modal-open {
    overflow: hidden;
}

@keyframes foundation-slide-in {
    from { transform: translateX(100%); opacity: 0.6; }
    to { transform: none; opacity: 1; }
}
[dir="rtl"] .modal--drawer .modal__dialog {
    animation-name: foundation-slide-in-rtl;
}
@keyframes foundation-slide-in-rtl {
    from { transform: translateX(-100%); opacity: 0.6; }
    to { transform: none; opacity: 1; }
}
@keyframes foundation-sheet-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}

/* --------------------------------------------------------------------------
   Cards & dashboard widgets
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--elevation-1);
    padding: var(--space-5);
}
.card__title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-black);
}
.card__text {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.card--flat {
    box-shadow: none;
}
.card--interactive {
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast);
    cursor: pointer;
}
.card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}

.widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-4);
}
.widget-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.widget-stat__value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    color: var(--text);
}
.widget-stat__label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.widget-stat__icon {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--brand-50);
    color: var(--brand-700);
    margin-block-end: var(--space-2);
}

/* --------------------------------------------------------------------------
   Loading system
   -------------------------------------------------------------------------- */
.spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--border);
    border-block-start-color: var(--brand-600);
    border-radius: var(--radius-pill);
    animation: foundation-spin 0.7s linear infinite;
}
.spinner--lg { width: 2.5rem; height: 2.5rem; border-width: 3px; }
@keyframes foundation-spin {
    to { transform: rotate(360deg); }
}

.loading-overlay {
    position: absolute;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    backdrop-filter: blur(2px);
}
.loading-overlay[hidden] { display: none !important; }

.skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-alt) 0%,
        color-mix(in srgb, var(--gray-200) 70%, var(--surface)) 50%,
        var(--surface-alt) 100%
    );
    background-size: 200% 100%;
    animation: foundation-shimmer 1.2s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.skeleton--line { height: 0.85rem; margin-block: var(--space-2); }
.skeleton--block { height: 6rem; }
.skeleton--circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
}
@keyframes foundation-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.progress {
    height: 0.5rem;
    background: var(--surface-alt);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    background: var(--brand-600);
    border-radius: inherit;
    transition: width var(--motion-base) var(--ease-out);
}

/* --------------------------------------------------------------------------
   Notifications: banner + snackbar slot
   -------------------------------------------------------------------------- */
.banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-alt);
}
.banner--info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, var(--border)); }
.banner--success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); }
.banner--warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); }
.banner--danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }

.snackbar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: var(--space-5);
    margin-inline: auto;
    width: min(28rem, calc(100% - 2rem));
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--gray-900);
    color: var(--white);
    box-shadow: var(--elevation-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.snackbar[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Bottom navigation (mobile)
   -------------------------------------------------------------------------- */
.bottom-nav {
    display: none;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-header);
    background: var(--surface);
    border-block-start: 1px solid var(--border);
    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0));
    box-shadow: var(--elevation-2);
}
.bottom-nav__list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bottom-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-decoration: none;
    min-width: 3.5rem;
    padding: var(--space-1);
}
.bottom-nav__link.is-active,
.bottom-nav__link[aria-current="page"] {
    color: var(--brand-700);
    font-weight: var(--fw-bold);
}
@media (max-width: 768px) {
    .layout--admin .bottom-nav,
    .layout--patient .bottom-nav {
        display: block;
    }
    .layout--admin .dash__content,
    .layout--patient .dash__content {
        padding-block-end: calc(var(--bottom-nav-h) + var(--space-4));
    }
}

/* --------------------------------------------------------------------------
   Permission UI helpers
   -------------------------------------------------------------------------- */
[data-perm-hide] { display: none !important; }
[data-perm-disabled],
.is-readonly {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}
.is-readonly input,
.is-readonly textarea,
.is-readonly select {
    background: var(--surface-alt);
}

/* --------------------------------------------------------------------------
   Motion utilities (single motion system)
   -------------------------------------------------------------------------- */
.motion-fade-in {
    animation: foundation-fade-in var(--motion-base) var(--ease-out);
}
.motion-scale-in {
    animation: foundation-scale-in var(--motion-base) var(--ease-out);
}
.motion-slide-up {
    animation: foundation-sheet-up var(--motion-base) var(--ease-out);
}
@keyframes foundation-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes foundation-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: none; }
}

.hover-lift {
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast);
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}

.accordion__panel[hidden] { display: none !important; }
.accordion__panel {
    overflow: hidden;
    animation: foundation-fade-in var(--motion-fast) var(--ease-out);
}

/* --------------------------------------------------------------------------
   Chart theme hooks (Chart.js consumers)
   -------------------------------------------------------------------------- */
:root {
    --chart-grid: var(--border);
    --chart-text: var(--text-muted);
    --chart-1: var(--brand-600);
    --chart-2: var(--accent-500);
    --chart-3: var(--info);
    --chart-4: var(--warning);
    --chart-5: var(--danger);
}

/* --------------------------------------------------------------------------
   Avatar / Badge / Timeline / Domain cards / Accordion / Overlay
   -------------------------------------------------------------------------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--brand-100);
    color: var(--text-brand);
    font-weight: var(--fw-bold);
    overflow: hidden;
    flex-shrink: 0;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar__icon {
    font-size: 0.85em;
    line-height: 1;
    opacity: 0.9;
}
.avatar--sm { width: 1.75rem; height: 1.75rem; font-size: var(--fs-xs); }
.avatar--md { width: 2.5rem; height: 2.5rem; font-size: var(--fs-sm); }
.avatar--lg { width: 3.5rem; height: 3.5rem; font-size: var(--fs-md); }

.badge--neutral { background: var(--surface-alt); color: var(--text-muted); }
.badge--info { background: var(--info-bg); color: var(--info); }
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }
.badge--warning { background: var(--warning-bg); color: var(--warning-text, var(--warning)); }
.badge--msg,
.badge--note { background: var(--brand-100); color: var(--text-brand); }

.accordion__item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    margin-block-end: var(--space-2);
    overflow: hidden;
}
.accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: 0;
    color: var(--text);
    font: inherit;
    font-weight: var(--fw-semibold);
    cursor: pointer;
    text-align: start;
}
.accordion__trigger[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}
.accordion__trigger .fa-chevron-down {
    transition: transform var(--motion-fast) var(--ease-out);
    --icon-color: var(--icon-brand);
}
.accordion__panel {
    padding: 0 var(--space-4) var(--space-4);
    color: var(--text-muted);
}

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-critical);
    background: color-mix(in srgb, var(--bg) var(--opacity-overlay), transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.loading-overlay[hidden] { display: none !important; }
.loading-overlay__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--elevation-3);
}
.loading-overlay__text {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.patient-card__row {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.patient-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.patient-card__name { font-size: var(--fs-md); }
.patient-card__sub,
.patient-card__meta {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.product-card { overflow: hidden; text-decoration: none; color: inherit; display: block; }
.product-card__media {
    aspect-ratio: 4 / 3;
    background: var(--surface-alt);
}
.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product-card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.product-card__head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    align-items: flex-start;
}
.product-card__title {
    margin: 0;
    font-size: var(--fs-base);
}
.product-card__price {
    margin: var(--space-2) 0 0;
    font-weight: var(--fw-bold);
    color: var(--brand-700);
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}
.timeline__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    position: relative;
}
.timeline__dot {
    width: 0.75rem;
    height: 0.75rem;
    margin-block-start: 0.35rem;
    border-radius: var(--radius-pill);
    background: var(--brand-600);
    box-shadow: 0 0 0 3px var(--brand-100);
}
.timeline__item--success .timeline__dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
.timeline__item--danger .timeline__dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.timeline__item--warning .timeline__dot { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }
.timeline__title { display: block; }
.timeline__meta {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    margin-block-start: 0.15rem;
}
.timeline__body {
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.motion-ripple {
    position: relative;
    overflow: hidden;
}
.motion-collapse {
    transition: grid-template-rows var(--motion-base) var(--ease-out), opacity var(--motion-fast);
}

/* File drop / CMS / AI kit surfaces (stubs — use tokens only) */
.file-manager,
.cms-panel,
.ai-chat,
.commerce-stepper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.ai-chat__history {
    max-height: 24rem;
    overflow: auto;
    display: grid;
    gap: var(--space-3);
}
.ai-prompt {
    display: flex;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
}

/* ===== shell.css ===== */
/* ==========================================================================
   Danesh Clinic - Application Shell (header, sidebar, icon controls)
   Depends on design-system.css tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Compact header
   -------------------------------------------------------------------------- */
.site-header {
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.site-header__inner {
    min-height: var(--header-h);
    gap: var(--space-3);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.site-header .brand {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.site-header .brand__text {
    min-width: 0;
    overflow: hidden;
}

.brand__logo {
    width: 36px;
    height: 36px;
}

.brand__name {
    font-size: var(--fs-sm);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.brand__tag {
    display: none;
}

@media (min-width: 900px) {
    .brand__tag {
        display: block;
        font-size: 0.7rem;
    }
}

.site-header__actions {
    gap: var(--space-2);
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 768px) {
    .site-header__inner {
        gap: var(--space-2);
    }

    .site-header__actions {
        gap: 2px;
        --icon-btn-size: 32px;
    }

    .site-header__actions .icon-btn,
    .site-header__actions .user-menu__toggle {
        width: var(--icon-btn-size);
        height: var(--icon-btn-size);
    }

    .site-header__actions .icon-btn .fa-solid,
    .site-header__actions .icon-btn .fas {
        font-size: 0.9rem;
    }

    /* Logged-in: more icons — keep logo, drop brand text to prevent page overflow */
    .site-header:has(.user-menu) .brand__text,
    .layout--admin .site-header .brand__text {
        display: none;
    }

    .system-status {
        display: none !important;
    }

    /* Tooltips can inflate perceived width on small screens */
    .site-header__actions .icon-btn[data-tooltip]::after {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Icon button + tooltip
   -------------------------------------------------------------------------- */
.icon-btn {
    --icon-btn-size: 36px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--icon-color, var(--icon));
    --icon-color: var(--icon);
    cursor: pointer;
    transition:
        background var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out);
}

.icon-btn:hover {
    background: var(--hover-bg);
    color: var(--icon-hover);
    --icon-color: var(--icon-hover);
    border-color: var(--border);
}

.icon-btn:focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: 2px;
}

.icon-btn .fa-solid,
.icon-btn .fas {
    font-size: 1rem;
    line-height: 1;
}

.icon-btn--primary {
    background: var(--brand-700);
    color: var(--white);
}

.icon-btn--primary:hover {
    background: var(--brand-600);
    color: var(--white);
    border-color: transparent;
}

.icon-btn__badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--danger);
    color: var(--white);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

.icon-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    inset-inline-start: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%) scale(0.96);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--text);
    color: var(--surface);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out),
        visibility var(--motion-fast);
    z-index: 60;
}

[dir="rtl"] .icon-btn[data-tooltip]::after {
    transform: translateX(50%) scale(0.96);
}

.icon-btn[data-tooltip]:hover::after,
.icon-btn[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

[dir="rtl"] .icon-btn[data-tooltip]:hover::after,
[dir="rtl"] .icon-btn[data-tooltip]:focus-visible::after {
    transform: translateX(50%) scale(1);
}

.site-header__divider {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin-inline: var(--space-1);
}

/* Internal panel runtime status (not used on public site) */
.system-status {
    position: relative;
}
.system-status__toggle {
    position: relative;
}
.system-status__dot {
    position: absolute;
    inset-block-end: 5px;
    inset-inline-end: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--surface);
    background: var(--success);
    pointer-events: none;
}
.system-status__dot--ok { background: var(--success); }
.system-status__dot--warn { background: var(--warning); }
.system-status__dot--danger { background: var(--danger); }
.system-status__badge {
    min-width: 14px;
    height: 14px;
    font-size: 0.55rem;
    line-height: 14px;
}
.system-status__panel {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 17rem;
    max-width: min(24rem, calc(100vw - 2rem));
    max-height: min(75vh, 30rem);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: var(--z-dropdown, 80);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--elevation-3, var(--elevation-2));
    box-sizing: border-box;
}
.system-status__panel[hidden] { display: none !important; }
.system-status__title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--text-muted);
}
.system-status__hint {
    margin: 0 0 var(--space-2);
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.system-status__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}
.system-status__list li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: baseline;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.system-status__list strong {
    color: var(--text);
    font-weight: var(--fw-semibold);
    text-align: end;
}
.system-status__ops {
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--border);
}
.system-status__ops-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block-end: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--text-muted);
}
.system-status__ops-empty {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.system-status__ops-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}
.system-status__ops-list[hidden] { display: none !important; }
.system-status__appt {
    margin: 0 0 var(--space-2);
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-alt, var(--gray-50, #f6f8f7));
    font-size: 0.72rem;
    line-height: 1.35;
}
.system-status__appt[hidden] { display: none !important; }
.system-status__appt.is-ok { border-color: #86efac; background: #f0fdf4; }
.system-status__appt.is-diff { border-color: #fcd34d; background: #fffbeb; }
.system-status__appt.is-fail { border-color: #fca5a5; background: #fef2f2; }
.system-status__appt-msg {
    margin: 0 0 0.2rem;
    font-weight: var(--fw-semibold, 600);
    font-size: 0.75rem;
}
.system-status__appt-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.4;
    word-break: break-word;
}
.system-status__appt-link {
    display: inline-block;
    margin-block-start: 0.3rem;
    font-size: 0.72rem;
    font-weight: var(--fw-semibold, 600);
}
.system-status__op {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    background: var(--surface-alt, var(--gray-50, #f6f8f7));
}
.system-status__op-title {
    margin: 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text);
}
.system-status__op-meta {
    margin: 0.2rem 0 0;
    font-size: 0.65rem;
    color: var(--text-muted);
}
.system-status__op-hint {
    margin: 0.35rem 0 0;
    font-size: 0.65rem;
    color: var(--warning, #b45309);
}
.system-status__op-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-block-start: 0.45rem;
}
.system-status__op-actions .btn {
    font-size: 0.65rem;
    padding: 0.2rem 0.45rem;
    min-height: 0;
}
.system-status__op.is-conflict {
    border-color: color-mix(in srgb, var(--warning, #f59e0b) 55%, var(--border));
}
.system-status__op.is-failed {
    border-color: color-mix(in srgb, var(--danger, #dc2626) 45%, var(--border));
}
.system-status__settings {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--border);
    width: 100%;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--primary);
    text-decoration: none;
}
.system-status__settings:hover,
.system-status__settings:focus-visible {
    color: var(--primary-hover, var(--primary));
    text-decoration: underline;
}

@media (max-width: 768px) {
    .system-status {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   Language dropdown (compact)
   -------------------------------------------------------------------------- */
.lang-menu {
    position: relative;
}

.lang-menu__toggle .fa-solid {
    font-size: 1.05rem;
}

.lang-menu__panel {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 148px;
    padding: var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--elevation-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out),
        visibility var(--motion-fast);
    z-index: 70;
}

.lang-menu.is-open .lang-menu__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0.45rem 0.6rem;
    border-radius: calc(var(--radius-sm) - 2px);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--gray-700);
}

.lang-menu__item:hover {
    background: var(--brand-50);
    color: var(--brand-800);
}

.lang-menu__item.is-active {
    background: var(--brand-700);
    color: var(--white);
}

.lang-menu__item .fa-check {
    font-size: 0.75rem;
    opacity: 0;
}

.lang-menu__item.is-active .fa-check {
    opacity: 1;
}

/* Auth layout compact lang */
.lang-menu--auth .lang-menu__toggle {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}

.lang-menu--auth .lang-menu__toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
}

/* --------------------------------------------------------------------------
   Sidebar v2
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .dash {
        display: grid;
        grid-template-columns: var(--sidebar-w) 1fr;
    }
}

.sidebar {
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
    padding-block-end: max(var(--space-3), env(safe-area-inset-bottom, 0px));
    transition: width var(--motion-base) var(--ease-out);
    overflow: hidden;
    min-height: 0;
    height: 100%;
    max-height: 100%;
}

.sidebar__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-block-end: var(--space-4);
    scrollbar-width: thin;
}

.sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
    padding-inline: var(--space-1);
    flex-shrink: 0;
}

.sidebar__title {
    font-size: var(--fs-sm);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__collapse {
    flex-shrink: 0;
}

.sidebar__tools {
    padding-inline: var(--space-1);
    margin-block-end: var(--space-3);
    flex-shrink: 0;
}
.sidebar__search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    color: var(--text-muted);
}
.sidebar__search .form-control {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding-block: var(--space-1);
    font-size: var(--fs-sm);
}
.sidebar__section {
    margin-block-end: var(--space-3);
}
.sidebar__section-title {
    margin: 0 0 var(--space-2);
    padding-inline: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sidebar__group-title {
    list-style: none;
    margin: 0.75rem 0 0.25rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--brand-700, #0b5e42);
    pointer-events: none;
}
.sidebar__group-title:first-child {
    margin-block-start: 0.15rem;
}
.sidebar__fav {
    margin-inline-start: auto;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    opacity: 0.35;
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
}
.sidebar__fav:hover,
.sidebar__fav.is-active {
    opacity: 1;
    color: var(--accent-600, var(--accent-500));
}
.sidebar__item.is-filtered-out {
    display: none !important;
}
body.sidebar-collapsed .sidebar__tools,
body.sidebar-collapsed .sidebar__section-title,
body.sidebar-collapsed .sidebar__group-title,
body.sidebar-collapsed .sidebar__fav,
.sidebar.is-collapsed .sidebar__tools,
.sidebar.is-collapsed .sidebar__section-title,
.sidebar.is-collapsed .sidebar__group-title,
.sidebar.is-collapsed .sidebar__fav {
    display: none !important;
}

.user-menu {
    position: relative;
}
.user-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.65rem 0.2rem 0.2rem;
    cursor: pointer;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    min-height: 36px;
}
.user-menu__toggle .user-menu__chevron {
    color: var(--icon);
    font-size: 0.7rem;
}
.user-menu__name {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-menu__panel {
    position: absolute;
    inset-block-start: calc(100% + 0.35rem);
    inset-inline-end: 0;
    min-width: 12rem;
    z-index: var(--z-dropdown);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--elevation-2);
    padding: var(--space-2);
    display: grid;
    gap: 2px;
}
.user-menu__panel[hidden] { display: none !important; }
.user-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    background: transparent;
    border: 0;
    width: 100%;
    font: inherit;
    cursor: pointer;
    text-align: start;
}
.user-menu__item:hover {
    background: var(--hover-bg);
}
.user-menu__form { margin: 0; }
.user-menu__role {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--fs-xs);
    color: var(--muted, var(--icon));
    font-weight: var(--fw-medium);
}
.user-menu__section {
    display: grid;
    gap: 2px;
    padding-block: var(--space-1);
    margin-block: var(--space-1);
    border-block: 1px solid var(--border);
}
.user-menu__section-title {
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-xs);
    color: var(--muted, var(--icon));
    font-weight: var(--fw-semibold);
    text-transform: none;
}
.user-menu__item--active {
    background: var(--hover-bg);
    font-weight: var(--fw-semibold);
    cursor: default;
}
.user-menu__item--active:hover {
    background: var(--hover-bg);
}

.role-switch-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--accent, #0d6e6e) 10%, var(--surface));
    color: var(--text);
    font-size: var(--fs-sm);
}
.role-switch-banner__form { margin: 0; }
.role-switch-banner__btn {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.75rem;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}
.role-switch-banner__btn:hover {
    background: var(--hover-bg);
}

@media (max-width: 900px) {
    .user-menu__name { display: none; }
    .user-menu__toggle {
        padding: 0.15rem;
        border-radius: var(--radius-sm);
        width: 36px;
        height: 36px;
        justify-content: center;
    }
    .user-menu__toggle .user-menu__chevron { display: none; }
}

/* Public: hamburger only on mobile */
@media (min-width: 769px) {
    .layout--public .nav-toggle {
        display: none !important;
    }
}

@media (max-width: 720px) {
    .site-header__divider { display: none; }
}

.sidebar__list {
    gap: 2px;
    overflow: visible;
    flex: none;
    padding-block-end: var(--space-2);
}

.sidebar__link {
    position: relative;
    gap: var(--space-3);
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition:
        background var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        padding var(--motion-base) var(--ease-out);
}

.sidebar__link::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: var(--radius-pill);
    background: var(--brand-400);
    transform: translateY(-50%);
    transition: height var(--motion-fast) var(--ease-out);
}

.sidebar__link.is-active::before {
    height: 60%;
}

.sidebar__link.is-active .sidebar__icon,
.sidebar__link.is-active .sidebar__icon .fa-solid,
.sidebar__link.is-active .sidebar__icon .fas {
    color: var(--white);
    opacity: 1;
}

.sidebar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    flex-shrink: 0;
    opacity: 0.85;
}

.sidebar__icon .fa-solid {
    font-size: 0.95rem;
}

.sidebar__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__badge {
    margin-inline-start: auto;
    min-width: 1.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--danger, #c0392b);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

body.sidebar-collapsed .sidebar__badge {
    position: absolute;
    inset-inline-end: 0.35rem;
    inset-block-start: 0.35rem;
    margin: 0;
    min-width: 0.65rem;
    height: 0.65rem;
    padding: 0;
    font-size: 0;
}

.sidebar.is-collapsed {
    width: var(--sidebar-w-collapsed);
}

@media (min-width: 1025px) {
    body.sidebar-collapsed .dash {
        grid-template-columns: var(--sidebar-w-collapsed) 1fr;
    }
}

body.sidebar-collapsed .sidebar__title,
body.sidebar-collapsed .sidebar__label {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

body.sidebar-collapsed .sidebar__link {
    justify-content: center;
    padding-inline: 0.5rem;
}

body.sidebar-collapsed .sidebar__link::before {
    display: none;
}

body.sidebar-collapsed .sidebar__link.is-active {
    background: var(--brand-700);
    color: var(--white);
}

body.sidebar-collapsed .sidebar__link[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    inset-inline-start: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--gray-900);
    color: var(--white);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 80;
    transition: opacity var(--motion-fast) var(--ease-out);
}

[dir="rtl"] body.sidebar-collapsed .sidebar__link[data-tooltip]::after {
    inset-inline-start: auto;
    inset-inline-end: calc(100% + 8px);
}

body.sidebar-collapsed .sidebar__link:hover::after,
body.sidebar-collapsed .sidebar__link:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

.dash__topbar {
    margin-block-end: var(--space-4);
}

.dash__title {
    font-size: var(--fs-lg);
    font-weight: 700;
}

.dash__user {
    font-size: var(--fs-xs);
    padding: 0.3rem 0.7rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .dash,
    .dash--admin,
    .dash--patient,
    body .dash,
    body.sidebar-collapsed .dash {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .dash__content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .sidebar:not(.is-mobile-open) {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        box-shadow: none !important;
    }

    .sidebar.is-mobile-open {
        display: flex !important;
        position: fixed !important;
        inset-block: var(--header-h, 52px) 0 !important;
        inset-inline-start: 0 !important;
        width: min(280px, 88vw) !important;
        height: auto !important;
        max-height: none !important;
        z-index: var(--z-sidebar, 60) !important;
        transform: translateX(0) !important;
        box-shadow: var(--elevation-3) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overscroll-behavior: contain;
    }

    body.sidebar-mobile-open {
        overflow: hidden;
        touch-action: none;
    }

    body.sidebar-mobile-open .sidebar,
    body.sidebar-mobile-open .sidebar__nav {
        touch-action: pan-y;
    }

    .sidebar__backdrop {
        position: fixed;
        inset: var(--header-h, 52px) 0 0 0;
        background: rgba(16, 32, 27, 0.35);
        opacity: 0;
        visibility: hidden;
        z-index: calc(var(--z-sidebar, 60) - 1);
        transition: opacity var(--motion-fast) var(--ease-out);
    }

    .sidebar__backdrop.is-visible {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 640px) {
    .brand__text {
        max-width: 9rem;
    }

    .brand__name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

[dir="rtl"] .sidebar__collapse-icon {
    transform: scaleX(-1);
}

body.sidebar-collapsed [dir="rtl"] .sidebar__collapse-icon,
[dir="rtl"] body.sidebar-collapsed .sidebar__collapse-icon {
    transform: scaleX(-1);
}

/* Hide hamburger on desktop when sidebar is present */
@media (min-width: 1025px) {
    .layout--admin .nav-toggle,
    .layout--patient .nav-toggle {
        display: none;
    }
}

@media (max-width: 768px) {
    .nav-toggle {
        display: inline-flex;
    }
}

.main-nav {
    --main-nav-h: 2.75rem;
    background: var(--brand-700, #0b5e42);
    color: var(--white);
    border-block-end: 1px solid rgba(255, 255, 255, 0.08);
    /* Stick under the compact site header when scrolling */
    position: sticky;
    top: var(--header-h, 52px);
    z-index: calc(var(--z-header, 50) - 1);
}

.main-nav__desktop {
    display: flex;
    justify-content: center;
}

.main-nav__list {
    display: flex;
    justify-content: center;
    gap: var(--space-1);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: var(--space-1);
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
}

.main-nav__list::-webkit-scrollbar {
    display: none;
}

.main-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.45rem 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: var(--fs-xs);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background var(--motion-fast) var(--ease-out);
}

.main-nav__icon {
    font-size: 0.85rem;
    opacity: 0.9;
}

.main-nav__link:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 768px) {
    .main-nav__label {
        display: none;
    }

    .main-nav__link {
        padding: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .lang-menu__panel,
    .icon-btn,
    .sidebar__link,
    .main-nav__link {
        transition: none !important;
    }
}

/* Command palette / public search trigger + polish */
[data-cmdk-toggle],
[data-cmdk-toggle] .icon-btn,
[data-site-search-toggle],
[data-site-search-toggle] .icon-btn {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Print: collapse admin shell so content uses full A4 width
   (hidden sidebar must not leave a grid column / viewport min-height)
   -------------------------------------------------------------------------- */
@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    html,
    body {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .site-header,
    .site-footer,
    .main-nav,
    .bottom-nav,
    .sidebar,
    .sidebar__backdrop,
    .dash__topbar,
    .dash__nav,
    .header,
    .icon-btn,
    [data-cmdk-toggle],
    .no-print {
        display: none !important;
    }

    .dash,
    .dash--admin,
    .dash--patient,
    .layout--admin,
    .layout--patient {
        display: block !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .dash__content,
    .adm-main,
    main {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }
}


/* ===== forms.css ===== */
/* ==========================================================================
   Danesh Clinic — Form enhancements (floating labels, states)
   ========================================================================== */

.field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-block-end: var(--space-4);
}

.field--float {
    padding-block-start: 0.35rem;
}

.field--float .form-control {
    padding-block: 1.15rem 0.65rem;
    padding-inline: 0.9rem;
    min-height: 3.25rem;
}

.field--float .form-label {
    position: absolute;
    inset-inline-start: 0.75rem;
    top: calc(0.35rem + 1.625rem);
    transform: translateY(-50%);
    margin: 0;
    padding: 0 0.35rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
    background: var(--surface);
    pointer-events: none;
    max-width: calc(100% - 3rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        top var(--motion-fast) var(--ease-out),
        font-size var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out);
    z-index: 1;
}

.field--float .form-control:focus + .form-label,
.field--float .form-control:not(:placeholder-shown) + .form-label,
.field--float.is-filled .form-label,
.field--float select.form-control + .form-label {
    top: 0.2rem;
    transform: none;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--brand-700);
    background: var(--surface);
}

.field--float .form-control:focus + .form-label {
    color: var(--brand-600);
}

.field--password .form-control {
    padding-inline-end: 2.75rem;
}

.field__toggle {
    position: absolute;
    inset-inline-end: 0.35rem;
    top: calc(0.35rem + 1.625rem);
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    z-index: 2;
}

.field__toggle:hover,
.field__toggle:focus-visible {
    color: var(--brand-700);
    background: var(--brand-50);
}

.field__required {
    color: var(--danger);
    margin-inline-start: 2px;
}

.field__hint,
.form-hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.field__error {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--danger);
}

.field.is-invalid .form-control {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-bg);
}

.field.is-valid .form-control {
    border-color: var(--success);
    box-shadow: 0 0 0 3px var(--success-bg);
}

.field.is-loading .form-control {
    opacity: 0.7;
    pointer-events: none;
}

.field.is-loading::after {
    content: "";
    position: absolute;
    inset-inline-end: 0.75rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    border: 2px solid var(--border);
    border-block-start-color: var(--brand-600);
    border-radius: 50%;
    animation: field-spin 0.7s linear infinite;
}

.field--float.is-loading::after {
    top: 58%;
}

.auth-form--refined {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.auth-form__hero {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 4.5rem;
}

.auth-form__hero-logo {
    flex-shrink: 0;
}

.auth-system-state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--success-bg);
    color: var(--success);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.auth-system-state i {
    font-size: 0.85rem;
}

.btn.is-loading {
    opacity: 0.85;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.spinner--sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
    flex-shrink: 0;
}

@keyframes field-spin {
    to { transform: rotate(360deg); }
}

.form-control:disabled,
.form-control[readonly]:not(.datepicker-display) {
    background: var(--gray-100);
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .field--float .form-label,
    .field.is-loading::after {
        transition: none;
        animation: none;
    }
}

/* Shared stacked label+control (lab/hap/referral/patient consoles) */
.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--fs-sm);
}
.form-field > span:first-child {
    color: var(--text-muted);
    font-weight: 600;
}

/* Horizontal field row used in admin catalog forms */
.form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}
.form-row--between {
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1rem;
}
.form-row > .form-group,
.form-row > .form-field,
.form-row > .date-field,
.form-row > .time-field,
.form-row > .search-bar {
    flex: 1 1 12rem;
    min-width: min(100%, 11rem);
    margin: 0;
}
.form-row > .form-control,
.form-row > select.form-control {
    flex: 1 1 12rem;
    min-width: min(100%, 11rem);
}
.form-row > .btn,
.form-row > button.btn,
.form-row > a.btn,
.form-row > .action-bar {
    flex: 0 0 auto;
    align-self: flex-end;
}
.form-row > .form-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    min-height: 2.55rem;
    white-space: nowrap;
    flex: 0 0 auto;
}
.form-actions,
.action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}
.action-bar form {
    display: inline;
    margin: 0;
}

/* ===== components.css ===== */
/* ==========================================================================
   Danesh Clinic — Shared UI components (tabs, toast, pagination, modals)
   ========================================================================== */

/* ---------- Tabs (unified; aliases for module-specific class names) ---------- */
.tabs,
.ref-tabs,
.aud-tabs,
.lab-tabs,
.tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-block-end: var(--space-4);
    padding: var(--space-1);
    background: var(--gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.tabs__item,
.ref-tabs__item,
.aud-tabs__item,
.lab-tabs__item,
.tab-nav__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.45rem 0.85rem;
    border-radius: calc(var(--radius-sm) - 1px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out);
}

.tabs__item:hover,
.ref-tabs__item:hover,
.aud-tabs__item:hover,
.lab-tabs__item:hover,
.tab-nav__item:hover,
.tabs__item.is-active,
.ref-tabs__item.is-active,
.aud-tabs__item.is-active,
.lab-tabs__item.is-active,
.tab-nav__item.is-active {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: var(--white);
}

/* ---------- Toast notifications (align with floating alerts) ---------- */
.toast-stack {
    position: fixed;
    inset-block-start: max(0.85rem, env(safe-area-inset-top, 0px));
    inset-inline: 0;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding-inline: 1rem;
    max-width: none;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.75rem 0.85rem;
    width: min(26rem, calc(100vw - 2rem));
    padding: 0.85rem 0.95rem 1rem;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--brand-700, #0b5e42) 14%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, #fff 92%, var(--brand-50, #eef8f3)) 0%, #fff 55%);
    box-shadow: 0 10px 28px color-mix(in srgb, #0b5e42 12%, transparent);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
    animation: toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--brand-700, #0b5e42);
}

.toast.is-hiding {
    animation: toast-out 0.22s ease forwards;
}

.toast--success::before { background: var(--success); }
.toast--error::before { background: var(--danger); }
.toast--warning::before { background: var(--warning); }
.toast--info::before { background: var(--info); }

.toast__icon {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-700, #0b5e42) 12%, var(--surface, #fff));
    color: var(--brand-700, #0b5e42);
    font-size: 1rem;
}

.toast--success .toast__icon { background: var(--success-bg); color: var(--success); }
.toast--error .toast__icon { background: var(--danger-bg); color: var(--danger); }
.toast--warning .toast__icon { background: var(--warning-bg); color: var(--warning); }
.toast--info .toast__icon { background: var(--info-bg); color: var(--info); }

.toast__body { flex: 1; line-height: 1.45; min-width: 0; }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

/* ---------- Pagination ---------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-block-start: var(--space-5);
}

.pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.pagination__item:hover {
    background: var(--brand-50);
    color: var(--brand-800);
}

.pagination__item.is-active {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: var(--white);
}

.pagination__item.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ---------- Modal polish ---------- */
.modal {
    backdrop-filter: blur(4px);
    animation: modal-backdrop-in var(--motion-fast) var(--ease-out);
}

.modal__dialog {
    animation: modal-dialog-in var(--motion-base) var(--ease-out);
    box-shadow: var(--elevation-3);
}

.modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-block-start: var(--space-5);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border);
}

.modal__dialog--wide {
    width: min(720px, 100%);
}

@keyframes modal-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes modal-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Dashboard widgets ---------- */
.dash-welcome {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.dash-welcome__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--brand-800);
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-3);
    margin-block-start: var(--space-5);
}

.stat-card {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-fast) var(--ease-out);
}

a.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}

.stat-card__value {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--brand-800);
    line-height: 1.1;
}

.stat-card__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.stat-card__icon {
    position: absolute;
    inset-inline-end: var(--space-3);
    inset-block-start: var(--space-3);
    font-size: 1.1rem;
    color: var(--brand-300);
    opacity: 0.8;
}

.dash-quick {
    margin-block-start: var(--space-5);
}

.dash-quick__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-2);
    margin-block-start: var(--space-3);
}

.dash-quick__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}

.dash-quick__link:hover {
    background: var(--brand-50);
    border-color: var(--brand-200);
    color: var(--brand-800);
}

.dash-quick__link.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.dash-notice {
    margin-block-start: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    border-inline-start: 3px solid var(--brand-500);
    background: var(--brand-50);
}

/* Page shell — shared dashboard workspace structure */
.page-shell {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.page-shell__breadcrumb {
    margin-block-end: calc(var(--space-1) * -1);
}
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.page-header__title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--brand-800);
    line-height: var(--lh-tight, 1.25);
}
.page-header__subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.page-header__actions,
.action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.page-shell__summary {
    min-width: 0;
}
.page-shell__body {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}
.page-shell--with-aside .page-shell__body {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    align-items: start;
}
.page-shell__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.page-shell__aside {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
@media (max-width: 960px) {
    .page-shell--with-aside .page-shell__body {
        grid-template-columns: 1fr;
    }
}

/* Shared admin/lab/hap stats strip — tokenized (legacy alias) */
.hap-stats,
.lab-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0;
}
.lab-stat {
    background: var(--surface-alt, var(--brand-50));
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 10px);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.lab-stat strong {
    font-size: var(--fs-lg);
    color: var(--brand-700);
    line-height: 1.2;
}
.lab-stat span {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Filter bar — shared admin/list filters */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem 1rem;
    padding: 1rem 1.1rem;
    background: var(--surface, #fff);
    border: 1px solid color-mix(in srgb, var(--brand-300, #6bc4a3) 28%, var(--border, #e2e8e5));
    border-radius: 0.9rem;
    margin-block-end: 1.1rem;
    box-shadow: 0 8px 22px rgba(6, 61, 43, 0.04);
}
.filter-bar__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
    align-items: end;
    gap: 0.75rem 1rem;
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
}
.filter-bar__fields .form-group,
.filter-bar__fields .search-bar,
.filter-bar__fields .date-field {
    margin: 0;
    min-width: 0;
    width: 100%;
}
.filter-bar__fields .form-label {
    margin-block-end: 0.35rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--brand-800, #084c36);
}
.filter-bar__fields .form-control,
.filter-bar__fields .search-bar__input,
.filter-bar__fields .datepicker-display {
    min-height: 2.55rem;
    border-radius: 0.7rem;
}
.filter-bar__fields .form-group:has(.pat-chips),
.filter-bar__fields .search-bar {
    grid-column: span 1;
}
@media (min-width: 720px) {
    .filter-bar__fields .search-bar {
        grid-column: span 2;
    }
    .filter-bar__fields .form-group:has(.pat-chips--priority) {
        grid-column: span 2;
        max-width: 22rem;
    }
}
.filter-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.filter-bar__actions .btn {
    min-height: 2.55rem;
    padding-inline: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.filter-bar__toggle {
    display: none;
}
@media (max-width: 720px) {
    .filter-bar {
        padding: 0.9rem;
    }
    .filter-bar--collapsible .filter-bar__toggle {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        min-height: 2.4rem;
    }
    .filter-bar--collapsible:not(.is-open) .filter-bar__fields,
    .filter-bar--collapsible:not(.is-open) .filter-bar__actions {
        display: none;
    }
    .filter-bar--collapsible.is-open .filter-bar__fields {
        display: grid;
        width: 100%;
    }
    .filter-bar--collapsible.is-open .filter-bar__actions {
        display: flex;
        width: 100%;
    }
    .filter-bar__actions {
        width: 100%;
    }
    .filter-bar__actions .btn {
        flex: 1 1 auto;
    }
}

/* Search bar */
.search-bar__control {
    position: relative;
}
.search-bar__icon {
    position: absolute;
    inset-inline-start: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-600, #0f7050);
    pointer-events: none;
    font-size: 0.88rem;
    z-index: 1;
}
.search-bar__input {
    padding-inline-start: 2.45rem !important;
    background: color-mix(in srgb, var(--brand-50, #eef8f3) 40%, var(--surface, #fff));
}
.search-bar__input:focus {
    background: var(--surface, #fff);
}

[data-theme="dark"] .filter-bar {
    background: var(--surface);
    border-color: var(--border-strong);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] .filter-bar__fields .form-label {
    color: var(--brand-800, #9fe0c2);
}
[data-theme="dark"] .search-bar__icon {
    color: var(--brand-300, #6bc4a3);
}
[data-theme="dark"] .search-bar__input {
    background: var(--surface-alt);
}

/* Date / time field shells */
.date-field .datepicker-wrapper,
.time-field {
    min-width: 0;
}

/* —— Shared choice chips (choice-chips component) —— */
.pat-chips {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2, 0.5rem);
    min-width: 0;
    width: 100%;
    position: relative;
}
.pat-chips__legend {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--brand-700, #0b5e42);
    margin: 0;
    padding: 0;
}
.pat-chips__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    width: 100%;
}
.pat-chips__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.pat-chips__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand-700, #0b5e42) 12%, var(--border, #d7e3dc));
    background: var(--surface, #fff);
    color: var(--text-muted, #5a6f66);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 650;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    user-select: none;
    text-align: center;
    line-height: 1.2;
}
.pat-chips__chip:hover {
    border-color: color-mix(in srgb, var(--brand-700, #0b5e42) 40%, var(--border));
    color: var(--text, #1a2e26);
    transform: translateY(-1px);
}
.pat-chips__input:focus-visible + .pat-chips__chip,
.pat-chips__chip:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand-700, #0b5e42) 45%, transparent);
    outline-offset: 2px;
}
.pat-chips__input:checked + .pat-chips__chip,
.pat-chips__chip.is-selected {
    background: var(--brand-700, #0b5e42);
    border-color: var(--brand-700, #0b5e42);
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-700, #0b5e42) 18%, transparent);
}
.pat-chips__input[value=""]:checked + .pat-chips__chip {
    background: var(--surface-alt, #f3f5f4);
    color: var(--text-muted);
    border-style: dashed;
    border-color: var(--border, #d7e3dc);
    box-shadow: none;
}
.pat-chips__chip--urgent {
    color: #9a3412;
}
.pat-chips__input:checked + .pat-chips__chip--urgent {
    background: #c2410c;
    border-color: #c2410c;
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, #c2410c 20%, transparent);
}

/* Equal-width segmented control (site pattern) */
.pat-chips--segment .pat-chips__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.3rem;
    padding: 0.3rem;
    border-radius: 14px;
    background: var(--surface-alt, #f3f5f4);
    border: 1px solid color-mix(in srgb, var(--brand-700, #0b5e42) 8%, var(--border, #d7e3dc));
}
.pat-chips--segment .pat-chips__chip {
    width: 100%;
    border-radius: 10px;
    border-color: transparent;
    background: transparent;
    padding-inline: 0.65rem;
    box-shadow: none;
}
.pat-chips--segment .pat-chips__chip:hover {
    background: color-mix(in srgb, var(--surface, #fff) 80%, transparent);
    transform: none;
}
.pat-chips--segment .pat-chips__input:checked + .pat-chips__chip,
.pat-chips--segment .pat-chips__chip.is-selected {
    background: var(--brand-700, #0b5e42);
    border-color: var(--brand-700, #0b5e42);
    color: #fff;
    box-shadow: 0 1px 2px rgba(11, 94, 66, 0.18);
}
.pat-chips--segment .pat-chips__input[value=""]:checked + .pat-chips__chip {
    background: var(--surface, #fff);
    color: var(--text-muted);
    border-style: solid;
    border-color: transparent;
    box-shadow: none;
}
.pat-chips--segment .pat-chips__input:checked + .pat-chips__chip--urgent {
    background: #c2410c;
    border-color: #c2410c;
    color: #fff;
    box-shadow: 0 1px 2px rgba(194, 65, 12, 0.22);
}

.pat-chips--priority {
    max-width: 22rem;
}

/* Table action icon buttons (admin catalogs, audiologist, etc.) */
.tbl-actions {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}
.tbl-actions__btn.btn--icon {
    width: 1.95rem;
    height: 1.95rem;
    border-radius: var(--radius-sm, 8px);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Permission-driven “available modules” panel (all dashboard shells) */
.adm-access-dash {
    margin-block: 1.25rem 0.5rem;
}
.adm-access-dash__panel {
    border: 1px solid var(--adm-border, var(--border, #e5eee9));
    border-radius: var(--adm-radius, 12px);
    background: var(--surface, #fff);
    box-shadow: var(--adm-shadow, 0 6px 18px rgba(15, 23, 42, 0.04));
    overflow: hidden;
}
.adm-access-dash__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.15s ease;
}
.adm-access-dash__summary::-webkit-details-marker {
    display: none;
}
.adm-access-dash__summary:hover {
    background: color-mix(in srgb, var(--brand-50, #eef8f3) 70%, transparent);
}
.adm-access-dash__summary-main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}
.adm-access-dash__summary-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--brand-100, #d6f0e5) 80%, #fff);
    color: var(--brand-700, #0b5e42);
    font-size: 0.95rem;
}
.adm-access-dash__summary-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.adm-access-dash__summary-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-800, #084c36);
    line-height: 1.3;
}
.adm-access-dash__summary-hint {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    line-height: 1.45;
}
.adm-access-dash__summary-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}
.adm-access-dash__count {
    font-variant-numeric: tabular-nums;
}
.adm-access-dash__chevron {
    color: var(--brand-600, #0f7050);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}
.adm-access-dash__panel[open] .adm-access-dash__chevron {
    transform: rotate(180deg);
}
.adm-access-dash__panel[open] .adm-access-dash__summary {
    border-bottom: 1px solid var(--adm-border, var(--border, #e5eee9));
}
.adm-access-dash__body {
    padding: 0.85rem 1.1rem 1.1rem;
}
.adm-access-dash__group {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--brand-800, #0b5e42);
    margin: 0.85rem 0 0.45rem;
}
.adm-access-dash__body > .adm-access-dash__group:first-child {
    margin-top: 0;
}
.adm-access-dash__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.adm-access-dash__card {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: max-content;
    max-width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--adm-border, var(--border, #e5eee9));
    border-radius: var(--adm-radius, 10px);
    background: var(--surface, #fff);
    text-decoration: none;
    color: var(--text, #1a2e26);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.adm-access-dash__card:hover {
    border-color: var(--brand-400, #3d9a74);
    background: var(--brand-50, #f3faf7);
    color: var(--brand-800, #0b5e42);
}
.adm-access-dash__card i {
    color: var(--brand-700, #0b5e42);
    width: 1.1rem;
    flex-shrink: 0;
    text-align: center;
}
.adm-access-dash__card span {
    white-space: nowrap;
}
.adm-access-dash--perms .adm-access__group {
    margin-block-end: 0.45rem;
}
.adm-access-dash__perm-list {
    list-style: none;
    margin: 0;
    padding: 0.35rem 0.5rem 0.65rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.35rem 0.75rem;
}
.adm-access-dash__perm-list code {
    font-size: 0.8rem;
    background: var(--surface, #fff);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}
[data-theme="dark"] .adm-access-dash__panel {
    background: var(--surface);
    border-color: var(--border-strong);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
[data-theme="dark"] .adm-access-dash__summary:hover {
    background: var(--brand-100, #183a2c);
}
[data-theme="dark"] .adm-access-dash__summary-icon {
    background: var(--brand-100, #183a2c);
    color: var(--brand-300, #6bc4a3);
}
[data-theme="dark"] .adm-access-dash__summary-title {
    color: var(--brand-800, #9fe0c2);
}
[data-theme="dark"] .adm-access-dash__panel[open] .adm-access-dash__summary {
    border-bottom-color: var(--border);
}
[data-theme="dark"] .adm-access-dash__card {
    background: var(--surface-alt);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .adm-access-dash__card:hover {
    background: var(--brand-100, #183a2c);
    border-color: var(--brand-400, #2fa77e);
    color: var(--brand-900, #d6f0e5);
}
[data-theme="dark"] .adm-access-dash__card i {
    color: var(--brand-300, #6bc4a3);
}

@media (prefers-reduced-motion: reduce) {
    .toast, .modal, .modal__dialog, .stat-card,
    .pat-chips__chip {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ===== public-site.css ===== */
/* Sprint 1.1 — Public website shared components (tokens only) */

/* Brand logo wave (subtle water ripple) */
.hero__inner {
    position: relative;
    z-index: 1;
}
.brand-logo {
    --logo-size: 36px;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--logo-size);
    height: var(--logo-size);
    flex-shrink: 0;
}
.brand-logo__img {
    position: relative;
    z-index: 1;
    width: var(--logo-size);
    height: var(--logo-size);
    object-fit: contain;
}
.brand-logo--wave .brand-logo__ripple {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    border: 15px solid color-mix(in srgb, var(--brand-500) 22%, transparent);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    animation: brand-ripple 9.6s var(--ease-out) infinite;
}
.brand-logo--wave .brand-logo__ripple--delay {
    animation-delay: 4.8s;
}
@keyframes brand-ripple {
    0% { transform: scale(0.85); opacity: 0.22; }
    70% { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .brand-logo--wave .brand-logo__ripple { animation: none; display: none; }
}

.brand .brand-logo { margin-inline-end: var(--space-2); }

/* Stat counters */
.stat-counter {
    text-align: center;
    min-width: 0;
}
.stat-counter__number {
    display: block;
    font-size: clamp(1.25rem, 4vw, var(--fs-2xl));
    font-weight: var(--fw-black);
    color: var(--text-brand);
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}
.stat-counter__label {
    display: block;
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

/* Doctor cards */
.doctor-card {
    --doctor-pad: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--elevation-1);
    transition:
        border-color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out);
}
.doctor-card:hover {
    border-color: color-mix(in srgb, var(--brand-400) 50%, var(--border));
    box-shadow: var(--elevation-2);
    transform: translateY(-3px);
}
.doctor-card__photo {
    position: relative;
    aspect-ratio: 3 / 4;
    background:
        linear-gradient(160deg, var(--brand-50), var(--surface-alt));
    overflow: hidden;
}
.doctor-card__photo picture {
    display: block;
    width: 100%;
    height: 100%;
}
.doctor-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--motion-slow) var(--ease-out);
}
.doctor-card:hover .doctor-card__photo img {
    transform: scale(1.04);
}
.doctor-card__body {
    padding: var(--space-4) var(--doctor-pad) var(--doctor-pad);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
    background: var(--surface);
}
.doctor-card__name {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--text);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}
.doctor-card__role {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.doctor-card__bio {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-base);
}
.doctor-card__tags {
    list-style: none;
    margin: var(--space-1) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex: 1;
    align-content: flex-start;
}
.doctor-card__tag {
    margin: 0;
    padding: 0.2rem 0.55rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--text-brand);
    background: color-mix(in srgb, var(--brand-50) 85%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand-200) 55%, var(--border));
    border-radius: var(--radius-sm);
    line-height: 1.4;
}
.doctor-card__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-block-start: 1px solid var(--border);
}
.doctor-card__actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 2.6rem;
    border-radius: var(--radius-md);
    font-weight: var(--fw-semibold);
}
.doctor-card__actions .btn--primary {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: var(--text-on-brand);
}
.doctor-card__actions .btn--primary:hover {
    background: var(--brand-600);
    border-color: var(--brand-600);
}
.doctor-card__more {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 2rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-brand);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-out);
}
.doctor-card__more:hover {
    color: var(--brand-800);
    text-decoration: underline;
}
[data-theme="dark"] .doctor-card__body {
    background: var(--surface);
}
[data-theme="dark"] .doctor-card__tag {
    background: color-mix(in srgb, var(--brand-900) 40%, var(--surface));
    border-color: color-mix(in srgb, var(--brand-500) 35%, var(--border));
    color: var(--brand-200);
}
[data-theme="dark"] .doctor-card__actions .btn--primary {
    background: var(--brand-400);
    border-color: var(--brand-400);
    color: #062418;
}
[data-theme="dark"] .doctor-card__actions .btn--primary:hover {
    background: var(--brand-300);
    border-color: var(--brand-300);
}
[data-theme="dark"] .doctor-card__more {
    color: var(--brand-300);
}
[data-theme="dark"] .doctor-card__more:hover {
    color: var(--brand-200);
}
.doctor-card--compact .doctor-card__photo { aspect-ratio: 1; }
.doctor-card--compact .doctor-card__name { font-size: var(--fs-lg); }

/* Review cards */
.review-card {
    --star-gold: #f5b301;
    --star-empty: #d1d5db;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--elevation-1);
    transition:
        transform var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out),
        border-color var(--motion-base) var(--ease-out);
}
.review-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
    border-color: color-mix(in srgb, var(--brand-400) 35%, var(--border));
}
.review-card__head {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}
.review-card__meta {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}
.review-card__author {
    display: block;
    font-weight: 700;
    color: var(--brand-800, #0b5e42);
}
.review-card__date {
    display: none;
}
.review-card__stars {
    display: inline-flex;
    gap: 0.12rem;
    margin-top: 0.15rem;
    --icon-color: var(--star-gold);
    color: var(--star-gold);
}
.review-card__stars .fa-star,
.review-card__stars .fa-solid {
    color: var(--icon-color);
    font-size: 0.95rem;
}
.review-card__stars .is-filled {
    --icon-color: var(--star-gold);
}
.review-card__stars .is-empty {
    --icon-color: var(--star-empty);
    opacity: 1;
}
.review-card__quote {
    position: relative;
    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--brand-50, #eef8f3) 80%, var(--surface)) 0%,
            var(--surface-alt, #f6faf8) 100%
        );
    border: 1px solid color-mix(in srgb, var(--brand-200, #cfe8dc) 55%, var(--border));
    border-inline-start: 3px solid var(--brand-500, #1f9a6a);
}
.review-card__quote::before {
    content: "“";
    position: absolute;
    inset-block-start: 0.15rem;
    inset-inline-start: 0.55rem;
    font-size: 2.4rem;
    line-height: 1;
    font-family: Georgia, "Times New Roman", serif;
    color: color-mix(in srgb, var(--brand-500, #1f9a6a) 45%, transparent);
    pointer-events: none;
}
[dir="rtl"] .review-card__quote::before {
    content: "”";
    inset-inline-start: auto;
    inset-inline-end: 0.55rem;
}
.review-card__text {
    margin: 0;
    color: var(--text);
    line-height: 1.75;
    font-size: var(--fs-sm);
    position: relative;
    z-index: 1;
}
.review-card__reply {
    margin-top: 0;
    padding: var(--space-3);
    border-radius: var(--radius);
    background: var(--surface-alt);
    border: 1px dashed var(--border);
}
.review-card__reply-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--text-brand);
    margin-bottom: var(--space-1);
}

/* Contact / hours / address cards */
.contact-grid--trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: stretch;
}
.info-card {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 100%;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--elevation-1);
    transition:
        transform var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out),
        border-color var(--motion-base) var(--ease-out);
}
.info-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
    border-color: color-mix(in srgb, var(--brand-400) 35%, var(--border));
}
.info-card--equal { min-height: 18rem; }
.info-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--brand-100);
    --icon-color: var(--icon-brand);
    color: var(--icon-brand);
    font-size: 1.1rem;
}
.info-card__title {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-md);
}
.info-card__meta,
.info-card__text {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
}
.info-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}
.info-card__list li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-2) 0;
    border-block-end: 1px solid var(--border);
}
.info-card:has(.info-card__actions) .info-card__list {
    padding-block-end: var(--space-2);
    margin-block-end: 0;
}
.info-card__list-item--block {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
}
.info-card__list-item--address {
    display: block;
}
.info-card__list-item--address .info-card__value--wrap {
    display: block;
    width: 100%;
}
.info-card__label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}
.info-card__value {
    color: var(--text);
    font-weight: var(--fw-bold);
    unicode-bidi: plaintext;
    text-align: end;
}
.info-card__value--wrap {
    text-align: start;
    font-weight: var(--fw-medium);
    line-height: var(--lh-base);
    unicode-bidi: normal;
}
.info-card__value--link {
    text-decoration: none;
    color: var(--text);
}
.info-card__value--link:hover {
    color: var(--text-brand);
}
.info-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
    font-weight: var(--fw-bold);
    text-decoration: none;
    font-size: var(--fs-md);
}
.info-card__link:hover { color: var(--text-brand); }
.info-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-3);
}
.info-card__actions .btn--lg {
    width: 100%;
    justify-content: center;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}
.status-pill--open {
    background: var(--success-bg);
    color: var(--success);
}
.status-pill--closed {
    background: var(--danger-bg);
    color: var(--danger);
}

@media (max-width: 900px) {
    .contact-grid--trio {
        grid-template-columns: 1fr;
    }
    .info-card--equal { min-height: 0; }
}

/* Insurance grid */
.section-intro {
    margin: calc(var(--space-3) * -1) 0 var(--space-5);
    color: var(--text-muted);
    max-width: 48ch;
}
.insurance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}
.insurance-card {
    padding: var(--space-5);
    text-align: center;
    display: grid;
    gap: var(--space-3);
    justify-items: center;
    border-radius: var(--radius-lg);
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
.insurance-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}
.insurance-card__logo {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: contain;
}
.insurance-card__fallback {
    width: 4.5rem;
    height: 4.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--brand-100);
    font-size: 1.5rem;
}
.insurance-card__name {
    margin: 0;
    font-size: var(--fs-md);
    color: var(--text);
}
.insurance-card__text {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
@media (max-width: 768px) {
    .insurance-grid { grid-template-columns: 1fr; }
}

/* FAQ accordion — light polish */
.faq-accordion {
    display: grid;
    gap: var(--space-3);
    max-width: min(90rem, 100%);
    margin-inline: auto;
}
.faq-accordion .accordion__item {
    margin-block-end: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    transition:
        border-color var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out);
}
.faq-accordion .accordion__item:hover {
    border-color: color-mix(in srgb, var(--brand-400) 40%, var(--border));
}
.faq-accordion .accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
    border-color: color-mix(in srgb, var(--brand-500) 45%, var(--border));
    box-shadow: var(--elevation-1);
}
.faq-accordion .accordion__trigger {
    color: var(--text);
    font-weight: var(--fw-bold);
    padding-block: var(--space-4);
    gap: var(--space-3);
}
.faq-accordion .accordion__trigger .fa-solid {
    --icon-color: var(--icon-brand);
}
.faq-accordion .accordion__panel {
    padding-block-end: var(--space-4);
    padding-inline: 0;
}
.faq-answer {
    margin: 0;
    color: var(--text-muted);
    line-height: var(--lh-relaxed, 1.7);
    max-width: none;
    width: 100%;
}

/* Anchor offset under sticky header + main nav */
#doctors,
#booking-cta,
#contact,
#faq,
#services,
#about,
#insurance,
#testimonials {
    scroll-margin-top: calc(var(--header-h, 52px) + var(--main-nav-h, 2.75rem) + 0.75rem);
}

/* Compact footer + enamad */
.site-footer--compact .site-footer__grid--compact {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-5);
    padding-block: var(--space-5);
}
.site-footer__about {
    max-width: 36ch;
}
.site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.site-footer__social-link {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--footer-title) 10%, transparent);
    color: var(--footer-title);
    --icon-color: var(--footer-title);
    text-decoration: none;
}
.site-footer__social-link .icon-brand,
.site-footer__social-link .fa-solid {
    width: 1.05rem;
    height: 1.05rem;
    font-size: 1.05rem;
    line-height: 1;
}
.site-footer__social-link:hover {
    background: color-mix(in srgb, var(--footer-link-hover) 25%, transparent);
    color: var(--footer-link-hover);
    --icon-color: var(--footer-link-hover);
}
.enamad-seal--footer {
    margin-top: var(--space-3);
}
.enamad-seal--footer a {
    display: inline-block;
    line-height: 0;
}
.enamad-seal--footer img {
    width: 125px;
    max-width: 100%;
    height: auto;
    display: block;
    background: #fff;
    border-radius: var(--radius-sm);
}

/* EnamadLoader — CLS-stable placeholder; official seal injected later */
.enamad-loader {
    --enamad-size: 125px;
    margin-top: var(--space-3);
}
.enamad-loader__frame {
    position: relative;
    width: var(--enamad-size);
    height: var(--enamad-size);
    max-width: 100%;
}
.enamad-loader__placeholder {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--footer-title) 8%, transparent);
    pointer-events: none;
    z-index: 1;
}
.enamad-loader__frame > a {
    display: inline-block;
    line-height: 0;
}
.enamad-loader__frame img {
    width: var(--enamad-size);
    max-width: 100%;
    height: auto;
    display: block;
    background: #fff;
    border-radius: var(--radius-sm);
}
.enamad-loader.is-ready .enamad-loader__placeholder[hidden],
.enamad-loader.is-ready .enamad-loader__placeholder {
    display: none;
}
.enamad-loader.is-absent {
    visibility: hidden;
    height: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}
@media (max-width: 900px) {
    .site-footer--compact .site-footer__grid--compact {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 560px) {
    .site-footer--compact .site-footer__grid--compact {
        grid-template-columns: 1fr;
        padding-block: var(--space-4);
    }
}

/* Mobile navigation drawer — compact, minimal sheet */
.nav-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--gray-900) 40%, transparent);
    backdrop-filter: blur(4px);
    z-index: calc(var(--z-drawer) - 1);
    opacity: 0;
    transition: opacity var(--motion-base) var(--ease-out);
}
.nav-drawer__backdrop.is-open {
    opacity: 1;
}
.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    pointer-events: none;
}
.nav-drawer.is-open {
    pointer-events: auto;
}
.nav-drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(18rem, 88vw);
    height: 100%;
    max-height: 100dvh;
    background: var(--surface);
    color: var(--text);
    border-inline-end: 1px solid var(--border);
    box-shadow: var(--elevation-3);
    display: flex;
    flex-direction: column;
    transform: translateX(-105%);
    transition: transform var(--motion-base) var(--ease-out);
    padding-block-end: env(safe-area-inset-bottom, 0px);
}
[dir="rtl"] .nav-drawer__panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
    border-inline-end: none;
    border-inline-start: 1px solid var(--border);
    transform: translateX(105%);
}
.nav-drawer.is-open .nav-drawer__panel {
    transform: translateX(0);
}
.nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-shrink: 0;
    padding: var(--space-3) var(--space-4);
    padding-block-start: max(var(--space-3), env(safe-area-inset-top, 0px));
    border-block-end: 1px solid var(--border);
    min-height: 3rem;
}
.nav-drawer__title {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--text);
    line-height: var(--lh-tight);
}
.nav-drawer__close {
    flex-shrink: 0;
}
.nav-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: var(--space-2) 0;
}
.nav-drawer__group + .nav-drawer__group {
    margin-block-start: var(--space-1);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--border);
}
.nav-drawer__section {
    margin: 0;
    padding: var(--space-2) var(--space-4) var(--space-1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.nav-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-drawer__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.625rem var(--space-4);
    min-height: 2.75rem;
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border-inline-start: 3px solid transparent;
    transition:
        background var(--motion-fast) var(--ease-out),
        color var(--motion-fast) var(--ease-out),
        border-color var(--motion-fast) var(--ease-out);
}
.nav-drawer__link:hover,
.nav-drawer__link:focus-visible {
    background: var(--hover-bg);
    color: var(--text-brand);
}
.nav-drawer__link:active {
    background: color-mix(in srgb, var(--brand-100) 60%, var(--surface));
}
.nav-drawer__icon {
    width: 1.125rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--icon-muted);
    font-size: 0.875rem;
    transition: color var(--motion-fast) var(--ease-out);
}
.nav-drawer__link:hover .nav-drawer__icon,
.nav-drawer__link:focus-visible .nav-drawer__icon {
    color: var(--icon-brand);
}
.nav-drawer__label {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}
.nav-drawer__foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    padding-block-end: max(var(--space-3), env(safe-area-inset-bottom, 0px));
    border-block-start: 1px solid var(--border);
    background: var(--surface-alt);
}
.nav-drawer__cta {
    flex: 1;
    min-width: 0;
    justify-content: center;
    gap: var(--space-2);
    padding-block: 0.55rem;
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.nav-drawer__secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    padding: 0.5rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition:
        color var(--motion-fast) var(--ease-out),
        background var(--motion-fast) var(--ease-out);
}
.nav-drawer__secondary:hover,
.nav-drawer__secondary:focus-visible {
    color: var(--text-brand);
    background: var(--hover-bg);
}
[data-theme="dark"] .nav-drawer__panel {
    background: var(--surface);
    border-color: var(--border);
}
[data-theme="dark"] .nav-drawer__foot {
    background: var(--surface-alt);
}
body.nav-drawer-open {
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .nav-drawer__panel,
    .nav-drawer__link,
    .nav-drawer__backdrop {
        transition: none !important;
    }
}
@media (min-width: 769px) {
    .nav-drawer,
    .nav-drawer__backdrop {
        display: none !important;
    }
}

.user-menu__identity {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-1);
    border-block-end: 1px solid var(--border);
    color: var(--text);
    font-size: var(--fs-sm);
}
.user-menu__role {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--fs-xs);
    color: var(--muted, var(--icon));
    font-weight: 500;
}

.section-title--sm {
    font-size: var(--fs-lg);
    margin-block-end: var(--space-4);
}
.reviews-section {
    margin-block: var(--space-6);
}

/* Certificates */
.certificate-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    min-height: 10rem;
    justify-content: center;
}
.certificate-card__label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-align: center;
}
.certificate-card__enamad img {
    width: 125px;
    height: 125px;
}

/* Doctor profile */
.doctor-profile-page {
    padding-block-end: var(--space-6);
}
.doctor-profile {
    display: grid;
    gap: var(--space-5);
    padding-block: var(--space-2) var(--space-5);
}
.doctor-profile__hero {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) 1fr;
    gap: var(--space-5);
    padding: var(--space-5);
    align-items: start;
}
.doctor-profile__photo {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background:
        linear-gradient(160deg, var(--brand-50), var(--surface-alt));
    box-shadow: var(--elevation-2);
    transition:
        box-shadow var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out);
}
.doctor-profile__photo:hover {
    box-shadow: var(--elevation-3, var(--elevation-2));
    transform: translateY(-2px);
}
.doctor-profile__photo picture,
.doctor-profile__photo img {
    display: block;
    width: 100%;
    height: 100%;
}
.doctor-profile__photo img {
    object-fit: cover;
    object-position: center top;
    transition: transform var(--motion-slow) var(--ease-out);
}
.doctor-profile__photo:hover img {
    transform: scale(1.04);
}
.doctor-profile__name { margin: var(--space-2) 0 var(--space-1); }
.doctor-profile__role { color: var(--text-brand); font-weight: var(--fw-semibold); }
.doctor-profile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.doctor-profile__section { padding: var(--space-5); }
.doctor-profile__section-title { margin: 0 0 var(--space-3); }
.doctor-profile__list {
    margin: 0;
    padding-inline-start: 1.25rem;
    display: grid;
    gap: var(--space-2);
    color: var(--text-muted);
    list-style: disc;
}
@media (max-width: 768px) {
    .doctor-profile__hero { grid-template-columns: 1fr; }
    .doctor-profile__photo {
        max-width: 18rem;
        margin-inline: auto;
    }
}

/* Reviews page — follows public site chrome (breadcrumb like staff profile) */
.reviews-page {
    padding-block-end: var(--space-6);
}
.reviews-page__lede {
    margin: 0 0 var(--space-5);
    color: var(--text-muted);
    line-height: var(--lh-base);
    max-width: 40rem;
}
.reviews-page__body {
    display: grid;
    gap: var(--space-7);
}
.reviews-section__title {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--brand-800, #0b5e42);
}
.reviews-compose {
    display: grid;
    gap: var(--space-3);
    width: min(100%, 36rem);
    margin-inline: auto;
    justify-items: stretch;
}
.reviews-status {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--warning, #b8860b) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--warning, #b8860b) 28%, var(--border));
    color: var(--text);
    font-size: var(--fs-sm);
    text-align: center;
}
.reviews-status--ok {
    background: color-mix(in srgb, var(--success, #0f7050) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--success, #0f7050) 28%, var(--border));
}
.reviews-status--warn {
    background: color-mix(in srgb, var(--danger, #c0392b) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--danger, #c0392b) 25%, var(--border));
}
.reviews-login-gate {
    text-align: center;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--elevation-1, none);
}
.reviews-login-gate__title {
    margin: 0;
    font-size: var(--fs-lg);
    color: var(--brand-800, #0b5e42);
}
.reviews-login-gate__text {
    margin: var(--space-2) auto var(--space-4);
    color: var(--text-muted);
    max-width: 32rem;
}
.reviews-login-gate__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}
.review-form {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--elevation-1);
    display: grid;
    gap: var(--space-4);
    text-align: center;
    justify-items: center;
}
.review-form__title {
    margin: 0;
    font-size: var(--fs-lg);
    color: var(--brand-800, #0b5e42);
}
.review-form__hint {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    max-width: 28rem;
}
.review-form__rating {
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    justify-items: center;
    gap: var(--space-2);
}
.review-form__rating legend {
    font-weight: 600;
    margin-block-end: 0;
    color: var(--text);
    text-align: center;
    float: none;
    width: 100%;
}
.review-form .form-field {
    width: 100%;
    text-align: start;
}
.review-form .btn {
    min-width: 10rem;
    justify-self: center;
}
.review-form__stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.15rem;
    direction: ltr;
    --star-gold: #f5b301;
    --star-empty: #d1d5db;
}
.review-form__star-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}
.review-form__star-label {
    cursor: pointer;
    font-size: 1.65rem;
    --icon-color: var(--star-empty);
    color: var(--star-empty);
    padding: 0.35rem;
    line-height: 1;
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: grid;
    place-items: center;
    transition: color 0.12s ease, transform 0.12s ease;
}
.review-form__star-label .fa-star,
.review-form__star-label .fa-solid {
    color: var(--icon-color);
}
.review-form__star-label.is-on,
.review-form__stars:not([data-bound]) .review-form__star-label:hover,
.review-form__stars:not([data-bound]) .review-form__star-label:hover ~ .review-form__star-label,
.review-form__stars:not([data-bound]):not(:hover) .review-form__star-input:checked ~ .review-form__star-label {
    --icon-color: var(--star-gold);
    color: var(--star-gold);
}
.review-form__star-label.is-on {
    transform: scale(1.06);
}
.review-form__star-label:hover {
    transform: scale(1.1);
}
.reviews-section {
    margin-block: 0;
}

/* --------------------------------------------------------------------------
   Public site search (header modal + results page)
   -------------------------------------------------------------------------- */
.site-search-open {
    overflow: hidden;
}

.site-search {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
}

.site-search[hidden] {
    display: none !important;
}

.site-search__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--gray-900) 42%, transparent);
    backdrop-filter: blur(5px);
    animation: site-search-fade var(--motion-fast) var(--ease-out);
}

.site-search__panel {
    position: relative;
    width: min(26rem, 100%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-2);
    padding: var(--space-4);
    animation: site-search-pop var(--motion-fast) var(--ease-out);
}

.site-search__form {
    display: grid;
    gap: var(--space-3);
}

.site-search__field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding-block: 0.2rem;
    padding-inline: 0.15rem 0.2rem;
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.site-search__field:focus-within {
    border-color: var(--brand-300);
    box-shadow: var(--focus-ring);
    background: var(--surface);
}

.site-search__icon {
    color: var(--icon-muted);
    font-size: var(--fs-sm);
    flex-shrink: 0;
    margin-inline-start: 0.35rem;
}

.site-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--fs-md);
    line-height: 1.4;
    padding-block: 0.7rem;
}

.site-search__input::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
}

.site-search__close {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--icon-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.site-search__close:hover {
    background: var(--hover-bg);
    color: var(--icon-hover);
}

.site-search__submit {
    width: 100%;
}

.site-search-page {
    padding-block: var(--space-6) var(--space-8);
}

.site-search-page__inner {
    max-width: 46rem;
}

.site-search-page__head {
    margin-block-end: var(--space-5);
}

.site-search-page__title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--text);
    line-height: var(--lh-tight);
    margin: 0;
}

.site-search-page__count {
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.site-search-results {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.site-search-result {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}

.site-search-result:hover {
    border-color: var(--brand-200);
    box-shadow: var(--shadow);
    background: var(--brand-50);
}

.site-search-result__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.site-search-result__type {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--brand-700);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.65rem;
}

.site-search-result__date {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.site-search-result__title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text);
    line-height: var(--lh-tight);
}

.site-search-result__excerpt {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: var(--lh-base);
}

.site-search-result__go {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--brand-700);
}

html[dir="ltr"] .site-search-result__go .fa-arrow-left {
    transform: scaleX(-1);
}

.site-search-hit {
    background: color-mix(in srgb, var(--brand-200) 70%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 0.12em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

[data-theme="dark"] .site-search-result:hover {
    background: var(--surface-alt);
}

[data-theme="dark"] .site-search-result__type {
    background: color-mix(in srgb, var(--brand-400) 16%, transparent);
    border-color: var(--border);
    color: var(--text-brand);
}

[data-theme="dark"] .site-search-hit {
    background: color-mix(in srgb, var(--brand-400) 28%, transparent);
}

@keyframes site-search-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes site-search-pop {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
    .site-search {
        align-items: start;
        padding-block-start: max(18vh, env(safe-area-inset-top));
    }

    .site-search__panel {
        width: min(100%, 22.5rem);
        border-radius: var(--radius);
        padding: var(--space-3);
    }

    .site-search__input {
        font-size: 1rem;
        padding-block: 0.65rem;
    }

    .site-search-page {
        padding-block: var(--space-5) var(--space-7);
    }

    .site-search-page__title {
        font-size: var(--fs-lg);
    }
}

/* ---- Skip link (keyboard a11y) ---- */
.skip-link {
    position: absolute;
    inset-inline-start: var(--space-3, 1rem);
    top: -100%;
    z-index: var(--z-critical, 5000);
    padding: 0.6rem 1.1rem;
    background: var(--brand-700);
    color: var(--text-on-brand);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-weight: var(--fw-semibold, 600);
    font-size: var(--fs-sm, 0.875rem);
    text-decoration: none;
    transition: top var(--motion-fast, 140ms) var(--ease-out);
}
.skip-link:focus {
    top: 0;
}