/* =====================================================================
   NcBose HCS — Design System ("Clinical Clarity & Compassionate Care")
   Shared tokens + primitives for every redesigned page.
   Source of truth: Stitch project 9225071670421190201.
   All classes are prefixed `nb-` so they can live next to Bootstrap 4
   while pages are migrated one by one.
   ===================================================================== */

:root {
    /* Brand */
    --nb-primary: #2BB5A0;
    --nb-primary-hover: #1A9D8A;
    --nb-primary-deep: #006B5D;
    --nb-ink: #0F2A28;            /* replaces pure black */
    --nb-text: #3D4946;
    --nb-text-muted: #4A6360;
    --nb-text-subtle: #64748B;

    /* Surfaces */
    --nb-canvas: #F4FBFA;
    --nb-surface: #FFFFFF;
    --nb-surface-tint: #E6F6F4;
    --nb-surface-tint-2: #DEF9F5;
    --nb-border: #D4ECE7;
    --nb-border-strong: #C3E5DF;
    --nb-footer: #1C3532;

    /* Semantic */
    --nb-critical: #F97066;
    --nb-critical-text: #D92D20;
    --nb-critical-bg: rgba(249, 112, 102, 0.12);
    --nb-warning: #F79009;
    --nb-warning-text: #B54708;
    --nb-warning-bg: rgba(247, 144, 9, 0.12);
    --nb-success: #10B981;
    --nb-success-text: #0F766E;
    --nb-success-bg: rgba(16, 185, 129, 0.12);
    --nb-star: #F5A524;

    /* Type */
    --nb-font-display: 'Epilogue', 'Inter', system-ui, sans-serif;
    --nb-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Radii */
    --nb-r-sm: 8px;
    --nb-r-md: 12px;
    --nb-r-lg: 16px;
    --nb-r-xl: 20px;
    --nb-r-2xl: 28px;
    --nb-r-full: 9999px;

    /* Elevation */
    --nb-shadow-1: 0 4px 12px rgba(15, 42, 40, 0.04), 0 1px 2px rgba(15, 42, 40, 0.02);
    --nb-shadow-2: 0 10px 30px -5px rgba(43, 181, 160, 0.10), 0 4px 12px rgba(15, 42, 40, 0.04);
    --nb-shadow-3: 0 20px 40px -10px rgba(15, 42, 40, 0.14), 0 0 0 1px rgba(195, 229, 223, 0.6);
    --nb-focus-ring: 0 0 0 3px rgba(43, 181, 160, 0.25);

    /* Layout */
    --nb-container: 1280px;
    --nb-gutter: 24px;
}

/* ---------- Base (scoped to pages that opt in with .nb-page) ---------- */
body.nb-page {
    margin: 0;
    font-family: var(--nb-font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--nb-text);
    background: var(--nb-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* `.nb-page :where(...)` = specificity (0,1,0): beats Bootstrap's element
   rules, but any single nb-/lp- class declared later still overrides it. */
.nb-page *, .nb-page *::before, .nb-page *::after { box-sizing: border-box; }
.nb-page :where(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-family: var(--nb-font-display);
    color: var(--nb-ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.nb-page :where(p, dl, dd, figure, blockquote) { margin: 0; }
.nb-page :where(a) { color: inherit; text-decoration: none; }
.nb-page :where(a):hover { text-decoration: none; }
.nb-page :where(img) { max-width: 100%; height: auto; display: block; }
.nb-page button { font-family: inherit; }
.nb-page :focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }

.nb-container {
    width: 100%;
    max-width: var(--nb-container);
    margin: 0 auto;
    padding: 0 var(--nb-gutter);
}
@media (max-width: 767px) {
    :root { --nb-gutter: 16px; }
}

.nb-num { font-variant-numeric: tabular-nums; }
.nb-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;
}

/* ---------- Icons (Material Symbols Outlined) ---------- */
.nb-icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    flex-shrink: 0;
    user-select: none;
}
.nb-icon--fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.nb-icon--sm { font-size: 16px; }
.nb-icon--lg { font-size: 24px; }

/* ---------- Brand lockup ---------- */
.nb-brand { display: inline-flex; align-items: center; gap: 10px; }
.nb-brand__mark { width: 44px; height: 44px; object-fit: contain; }
.nb-brand--inverse .nb-brand__mark { padding: 2px; border-radius: 50%; background: #FFFFFF; }
.nb-brand__text { display: flex; flex-direction: column; line-height: 1; }
.nb-brand__name {
    font-family: var(--nb-font-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.02em;
    color: var(--nb-ink);
}
.nb-brand__name i { font-style: normal; color: var(--nb-primary); }
.nb-brand__tag {
    margin-top: 3px;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nb-text-muted);
}
.nb-brand--inverse .nb-brand__name { color: #FFFFFF; }
.nb-brand--inverse .nb-brand__tag { color: rgba(255, 255, 255, 0.6); }

/* ---------- Buttons ---------- */
.nb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--nb-r-full);
    font-family: var(--nb-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, transform .1s ease;
}
.nb-btn:active { transform: scale(0.98); }
.nb-btn .nb-icon { font-size: 18px; }

.nb-btn--primary { background: var(--nb-primary); color: #FFFFFF; }
.nb-btn--primary:hover { background: var(--nb-primary-hover); color: #FFFFFF; box-shadow: var(--nb-shadow-2); }

.nb-btn--dark { background: var(--nb-primary-deep); color: #FFFFFF; }
.nb-btn--dark:hover { background: #005046; color: #FFFFFF; box-shadow: var(--nb-shadow-2); }

.nb-btn--outline { background: var(--nb-surface); border-color: var(--nb-border); color: var(--nb-ink); }
.nb-btn--outline:hover { background: var(--nb-canvas); border-color: var(--nb-primary); color: var(--nb-ink); }

.nb-btn--ghost { background: transparent; color: var(--nb-primary-deep); padding: 0 14px; }
.nb-btn--ghost:hover { background: var(--nb-surface-tint); color: var(--nb-primary-deep); }

.nb-btn--white { background: #FFFFFF; color: var(--nb-primary-deep); }
.nb-btn--white:hover { background: var(--nb-canvas); color: var(--nb-primary-deep); }

.nb-btn--outline-white { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.85); color: #FFFFFF; }
.nb-btn--outline-white:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }

.nb-btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.nb-btn--lg { height: 52px; padding: 0 28px; font-size: 16px; }
.nb-btn--block { width: 100%; }

/* ---------- Chips / eyebrows ---------- */
.nb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    border-radius: var(--nb-r-full);
    background: var(--nb-surface-tint);
    color: var(--nb-primary-deep);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.nb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--nb-r-full);
    background: var(--nb-surface-tint);
    color: var(--nb-primary-deep);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.nb-chip.is-active { background: var(--nb-primary); color: #FFFFFF; }

/* ---------- Cards ---------- */
.nb-card {
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-r-lg);
    box-shadow: var(--nb-shadow-1);
}

/* ---------- Form fields ---------- */
.nb-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.nb-label { font-size: 12px; font-weight: 600; color: var(--nb-ink); }
.nb-input {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px;
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.nb-input:focus-within { border-color: var(--nb-primary); box-shadow: var(--nb-focus-ring); }
.nb-input .nb-icon { color: var(--nb-text-muted); }
.nb-input input, .nb-input select {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--nb-ink);
}
.nb-input input::placeholder { color: #8A9A97; }
.nb-input select { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* ---------- Segmented tabs ---------- */
.nb-segmented {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--nb-r-md);
    background: var(--nb-surface-tint);
}
.nb-segmented__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--nb-text-muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.nb-segmented__btn:hover { color: var(--nb-primary-deep); }
.nb-segmented__btn.is-active {
    background: var(--nb-surface);
    color: var(--nb-primary-deep);
    box-shadow: var(--nb-shadow-1);
}

/* ---------- Section heading ---------- */
.nb-section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.nb-section-head--center { align-items: center; text-align: center; }
.nb-section-title { font-size: 40px; font-weight: 700; }
.nb-section-sub { max-width: 640px; font-size: 17px; color: var(--nb-text-muted); }
@media (max-width: 767px) {
    .nb-section-title { font-size: 28px; }
    .nb-section-sub { font-size: 15px; }
}