/* denalu dashboard theme.
 *
 * Single source of truth for design tokens, mirroring
 * doc/KalyduAI Theme Spec V2.md and the inline style block in
 * doc/prototype/clinic-demo-prototype.html. Per the Visual Conformance
 * Rule, this is the only file in services/dashboard/ where raw hex
 * literals are allowed; templates and other CSS reference these via
 * var(--token).
 *
 * BL-It6-002 / ADR-027 D2 / CAP-26: this file also carries the
 * CADR-021 product design system (doc/CADR-21/prototype/denalu/shared.css)
 * as a SUPERSET, not a replacement (ADR-027 C-4). The new product tokens
 * + the product primitive/shell classes (.console, .sidebar, .snav,
 * .feed-card, .pf-header, .launch, etc.) are ADDED below ALONGSIDE the
 * legacy structural classes (.app/.main/.topbar/.sidebar-nav/.nav-item/
 * .content/.card) that base.html + _menu.html + the It1–It5 templates
 * depend on. The shared.css palette tokens (--primary #48D0BF,
 * --secondary #E89420, --info #6C8551, ink/canvas/paper/shadows) are
 * IDENTICAL to the values already defined here, so legacy surfaces keep
 * their colours unchanged. The shared.css TYPE SCALE (h1 2.5rem … h4
 * 1rem) is SMALLER than the Theme Spec V2 scale (h1 3rem … h4 1.25rem);
 * per .claude/rules/project/stack.md the Theme Spec wins on any conflict,
 * so the global h1–h4 scale below is NOT changed — the prototype's
 * console typography is carried by the product shell classes, not by
 * shrinking the global headings (see BL-It6-002 XAI §3).
 */

:root {
    /* Primary — Teal */
    --primary: #48D0BF;
    --primary-dark: #3BA99A;
    --primary-light: #6DDACC;

    /* Secondary — Saffron */
    --secondary: #E89420;
    --secondary-dark: #C77914;
    --secondary-light: #F4B35A;

    /* Info — Deep Sage */
    --info: #6C8551;
    --info-dark: #52663D;
    --info-light: #93A87B;

    /* Neutrals */
    --ink: #282824;
    --ink-soft: #1A1A17;
    --slate: #5A5A56;
    --disabled: #9E9E9A;

    /* Surfaces */
    --canvas: #ECE6DA;
    --paper: #FFFFFF;
    --paper-on-ink: #FFFFFF;
    --border: rgba(40, 40, 36, 0.1);
    --border-soft: rgba(40, 40, 36, 0.04);
    --input-border: #D8D8D4;

    /* Status */
    --error: #D95336;
    --error-dark: #B43F25;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(40, 40, 36, 0.06);
    --shadow-md: 0 4px 16px rgba(40, 40, 36, 0.08);
    --shadow-primary: 0 4px 12px rgba(72, 208, 191, 0.3);

    /* Spacing scale (8px base unit) */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-xxl: 48px;

    /* Calendar surfaces (BL-P0-011) — port from prototype inline hexes. */
    --off-day-stripe-1: #F5F2EB;
    --off-day-stripe-2: #EDE8DC;
    --legend-bg: #FAFAF6;
    --status-off: #D8D8D4;

    /* Calendar geometry (BL-It6-038) — the hour-row metric, single source
       for the axis cell height + the gridline gradient. MIRRORS the
       server-side SLOT_HEIGHT_PX in services/dashboard/calendar/queries.py:
       --cal-hour-height MUST equal SLOT_HEIGHT_PX * 4 (asserted by
       test_css_hour_height_matches_slot_height). Raised from 64px so a
       15-min block (--cal-slot-height - 2 = 34px) fits both content lines. */
    --cal-slot-height: 36px;   /* px per 15-min slot */
    --cal-hour-height: 144px;  /* = --cal-slot-height * 4 */

    /* Config editor v2 (BL-It4-012) — port from
       doc/prototype/denalu-config-editor-v2.html :root (lines 22–38).
       The "blue" family marks the parallel-resolvers node; the "amber"
       family marks the Operations · Callback node. The "teal-soft"
       variants drive the small config-badges under each clickable node. */
    --teal-soft: #E2F2EC;
    --teal-border: #9BD9C5;
    --teal-dark: #0B5C49;
    --blue: #2D6A9F;
    --blue-soft: #E4EEF6;
    --blue-border: #A9C8E2;
    --amber: #A56B12;
    --amber-soft: #FAF0DC;
    --amber-border: #E4C886;
    --amber-dark: #6E460B;

    /* BL-It4-016 tags */
    --red-soft: #FECACA;
    --red-hard: #991B1B;
    --tag-blue-soft: #BFDBFE;
    --blue-hard: #1E3A8A;
    --yellow-soft: #FEF08A;
    --yellow-hard: #713F12;
    --gray-soft: #E5E7EB;
    --gray-hard: #374151;
    --green-soft: #BBF7D0;
    --green-hard: #14532D;

    /* ---- BL-It6-002 / ADR-027 D2 — CADR-021 product tokens ----
     * Net-new tokens from doc/CADR-21/prototype/denalu/shared.css that
     * the legacy theme lacked. Palette tokens above (--primary etc.)
     * already match shared.css and are NOT redefined here. */
    --primary-faint: rgba(72, 208, 191, 0.12);
    --secondary-faint: rgba(232, 148, 32, 0.12);
    --info-faint: rgba(108, 133, 81, 0.12);
    --error-faint: rgba(217, 83, 54, 0.1);
    --shadow-lg: 0 12px 40px rgba(40, 40, 36, 0.16);
    --sidebar-bg: #20201D;
    --sidebar-ink: #C9C9C4;
    --paper-warm: #F6F2EA;
    /* --font / --mono name the typography families the product shell
     * classes reference via var(); the legacy body{} rule still inlines
     * the same Lato stack so legacy surfaces are byte-identical. */
    --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    /* --primary-contrast: text colour on primary backgrounds (Theme
     * Spec V2 primary.contrastText #FFFFFF). Already referenced by the
     * BL-It5-056 tel-dial button; defined here to retire that dangling
     * reference and to back the product .btn-primary. */
    --primary-contrast: #FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--canvas);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Typography ---------- */
h1 { font-size: 3rem;    font-weight: 800; line-height: 1.15; color: var(--ink); }
h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.20; color: var(--ink); }
h3 { font-size: 1.75rem; font-weight: 700; line-height: 1.30; color: var(--ink); }
h4 { font-size: 1.25rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.body2 { font-size: .875rem; color: var(--slate); }

/* ---------- Logo lockup ---------- */
.logo-wordmark {
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.logo-wordmark .tld { color: var(--primary); font-weight: 700; }
.logo-tagline {
    font-size: .5625rem;
    line-height: 1;
    font-weight: 500;
    color: var(--slate);
    margin-top: var(--sp-xs);
    letter-spacing: 0.02em;
}
.logo-tagline strong { font-weight: 600; color: var(--ink); }
.logo-mark {
    width: 36px; height: 36px;
    background: var(--ink);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.logo-mark::before {
    content: ''; width: 14px; height: 14px;
    background: var(--primary); border-radius: 50%;
}
.logo-mark::after {
    content: ''; position: absolute; top: 4px; left: 50%;
    transform: translateX(-50%);
    width: 18px; height: 8px;
    border: 2px solid var(--primary); border-bottom: 0;
    border-radius: 16px 16px 0 0;
}
.logo-mark.teal { background: var(--primary); }
.logo-mark.teal::before { background: var(--paper); }
.logo-mark.teal::after { border-color: var(--paper); }

/* ---------- Buttons ---------- */
.btn {
    font-family: inherit; font-size: .875rem; font-weight: 600;
    border: none; border-radius: 6px; cursor: pointer;
    padding: 12px 28px; transition: all .15s ease;
    display: inline-flex; align-items: center; gap: var(--sp-sm);
    white-space: nowrap;
}
.btn:disabled { cursor: not-allowed; opacity: .5; }
.btn-primary { background: var(--primary); color: var(--paper); box-shadow: var(--shadow-primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover:not(:disabled) { background: var(--ink-soft); }
.btn-block { width: 100%; justify-content: center; }
.btn-ghost { background: transparent; color: var(--slate); padding: 12px var(--sp-md); }
.btn-ghost:hover { color: var(--ink); }

/* ---------- Inputs ---------- */
.input {
    font-family: inherit; font-size: 1rem; color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--input-border); border-radius: 6px;
    padding: 10px 14px; width: 100%; transition: all .15s ease;
}
.input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(72, 208, 191, 0.2);
}
.label {
    font-size: .875rem; font-weight: 600;
    color: var(--slate); display: block;
    margin-bottom: 6px;
}

/* ---------- Auth screens ---------- */
.auth-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: var(--sp-lg); background: var(--canvas);
}
.auth-card {
    background: var(--paper); border-radius: 12px;
    padding: var(--sp-xxl) 40px; width: 100%; max-width: 440px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-soft);
}
/* BL-It6-019 — the demo-login directory is a table, so it needs a wider
   shell than the single-field sign-in card. */
.demo-card { max-width: 720px; }
.auth-logo {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: var(--sp-xl);
}
.auth-card h2 { margin-bottom: var(--sp-sm); font-size: 1.75rem; }
.auth-card .body2 { margin-bottom: var(--sp-xl); }
.auth-form-row { margin-bottom: 20px; }
.auth-error {
    background: rgba(217, 83, 54, 0.08);
    color: var(--error);
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: var(--sp-md);
    font-size: .875rem;
    font-weight: 600;
}
.auth-meta { font-size: .8125rem; color: var(--slate); margin-top: var(--sp-lg); text-align: center; }
.auth-meta a { color: var(--primary-dark); text-decoration: none; font-weight: 600; cursor: pointer; }
.auth-meta a:hover { text-decoration: underline; }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 260px; background: var(--ink); color: var(--paper-on-ink);
    display: flex; flex-direction: column; flex-shrink: 0;
    position: sticky; top: 0; height: 100vh;
}
.sidebar-header {
    padding: 28px var(--sp-lg) var(--sp-lg);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sidebar-logo { display: flex; align-items: center; gap: 12px; }
.sidebar-logo .logo-mark { background: rgba(255, 255, 255, .06); }
.sidebar-logo .logo-wordmark { color: var(--paper-on-ink); }
.sidebar-logo .logo-tagline { color: rgba(255, 255, 255, .45); }
.sidebar-logo .logo-tagline strong { color: rgba(255, 255, 255, .7); }
.sidebar-tag {
    display: block;
    font-size: .6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--primary);
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-nav { flex: 1; padding: var(--sp-md) 12px; overflow-y: auto; }
.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 6px;
    color: rgba(255, 255, 255, .72); cursor: pointer;
    font-size: .9375rem; font-weight: 600;
    transition: all .15s ease;
    border: none; background: transparent;
    width: 100%; text-align: left; font-family: inherit;
    text-decoration: none;
}
.nav-item:hover { background: rgba(255, 255, 255, .06); color: var(--paper-on-ink); }
.nav-item.active {
    background: rgba(72, 208, 191, .14); color: var(--primary);
    box-shadow: inset 3px 0 0 var(--primary);
}
.nav-divider {
    height: 1px; background: rgba(255, 255, 255, .08);
    margin: 12px var(--sp-sm);
}

.sidebar-footer {
    padding: var(--sp-md) 20px 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.user-block {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8125rem;
}
.user-email {
    font-size: .8125rem; color: rgba(255, 255, 255, .8);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.logout-form { margin: 0; padding: 0; }
.logout-link {
    font-size: .8125rem; color: rgba(255, 255, 255, .5);
    text-decoration: none; cursor: pointer;
    background: transparent; border: none; padding: 0;
    font-family: inherit;
}
.logout-link:hover { color: var(--paper-on-ink); }

/* ---------- Main content area ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    background: var(--canvas);
    padding: 20px var(--sp-xl);
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--border);
    min-height: 76px;
    gap: var(--sp-md);
}
.topbar-title h2 { font-size: 1.5rem; }
.topbar-title .body2 { margin-top: 2px; }

.content { padding: var(--sp-xl); flex: 1; overflow-y: auto; }

.card {
    background: var(--paper); border-radius: 8px;
    padding: var(--sp-lg); box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-soft);
}

.placeholder-card h3 { margin-bottom: var(--sp-sm); }
.placeholder-card .body2 { color: var(--slate); }

/* ---------- Overline (BL-P0-012) ---------- */
.overline {
    font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--primary); line-height: 2;
}

/* ---------- Practitioners view (BL-P0-012) ---------- */
.prac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
.prac-card { display: flex; flex-direction: column; gap: 14px; }
.prac-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px;
}
.prac-head h4 { line-height: 1.25; }
.prac-role { color: var(--primary); }
.status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    flex-shrink: 0;
}
.status-pill.active { background: rgba(72, 208, 191, .14); color: var(--primary-dark); }
.status-pill.partial { background: rgba(232, 148, 32, .14); color: var(--secondary-dark); }
.status-pill.off { background: rgba(40, 40, 36, .06); color: var(--slate); }
.status-pill .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.schedule {
    padding: 14px; background: var(--canvas); border-radius: 6px;
    font-size: .8125rem; color: var(--ink);
}
.schedule strong {
    display: block; font-size: .6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--slate); margin-bottom: 6px;
}
.treatments-label {
    display: block; font-size: .6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--slate); margin-bottom: 8px;
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
    background: rgba(72, 208, 191, .12); color: var(--primary-dark);
    font-size: .75rem; font-weight: 600;
    padding: 4px 10px; border-radius: 4px;
}

/* ---------- Catalog view (BL-P0-012) ---------- */
.catalog-table { width: 100%; border-collapse: collapse; }
.catalog-table th, .catalog-table td {
    padding: 12px 16px; text-align: left;
    border-bottom: 1px solid var(--border);
}
.catalog-table thead th {
    background: var(--canvas);
    font-size: .6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--slate);
}
.catalog-table tbody tr:hover { background: var(--canvas); }
.catalog-table tbody tr:last-child td { border-bottom: none; }
.code-pill {
    background: var(--ink); color: var(--paper-on-ink);
    font-family: 'JetBrains Mono', monospace;
    font-size: .75rem; font-weight: 600;
    padding: 3px 8px; border-radius: 4px;
}
.duration {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600; color: var(--ink);
}
.catalog-flush { padding: 0; overflow: hidden; }

/* ---------- Policy view (BL-P0-012) ---------- */
.policy-card { max-width: 760px; }
.policy-card h3 { margin-bottom: 16px; }
.policy-card h4 { margin: 24px 0 8px; }
.policy-card ul { padding-left: 24px; margin: 8px 0; }
.policy-card li { margin-bottom: 8px; line-height: 1.6; }

/* ---------- Reseed view (BL-P0-014) ---------- */
.reseed-card {
    max-width: 520px;
    margin: 40px auto;
    text-align: center;
    padding: 40px;
}
.reseed-card h3 { margin-bottom: 12px; }
.reseed-card .body2 { margin-bottom: var(--sp-lg); }
.reseed-fineprint {
    font-size: .8125rem;
    color: var(--slate);
}
.reseed-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}
.reseed-form { margin: 0; padding: 0; }
.reseed-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background: rgba(72, 208, 191, 0.14);
    color: var(--primary-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Calendar (BL-P0-011) ---------- */

.cal-toolbar {
    display: flex; align-items: center; gap: var(--sp-sm);
    margin-bottom: var(--sp-md); flex-wrap: wrap;
}
.cal-toolbar .cal-spacer { flex: 1; min-width: 12px; }
.cal-controls {
    display: flex; align-items: center; gap: var(--sp-sm);
    background: var(--paper); border-radius: 8px;
    padding: 6px; box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-soft);
}
.cal-controls .date-display {
    font-weight: 700; padding: 6px var(--sp-md);
    min-width: 220px; text-align: center; color: var(--ink);
}
.cal-btn {
    background: transparent; border: none; cursor: pointer;
    padding: 6px 12px; border-radius: 4px; color: var(--ink);
    text-decoration: none; font-weight: 700; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.cal-btn:hover { background: var(--canvas); }
.btn-sm { padding: 8px 14px; font-size: .8125rem; }
.cal-view-label {
    font-size: .8125rem; color: var(--slate); font-weight: 600;
}
.cal-view-link {
    font-size: .8125rem; color: var(--slate); font-weight: 600;
    text-decoration: none;
    padding: 6px 10px; border-radius: 4px;
}
.cal-view-link:hover { background: var(--canvas); color: var(--ink); }
.cal-view-link.active {
    background: rgba(72, 208, 191, 0.14);
    color: var(--primary-dark);
}
.cal-practitioner-picker {
    font-family: inherit; font-size: .875rem; color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--input-border); border-radius: 6px;
    padding: 6px 10px;
}

.calendar-card { padding: 0; overflow: hidden; }
.calendar-grid {
    display: grid;
    background: var(--paper);
}
.calendar-grid-day {
    grid-template-columns: 70px repeat(5, minmax(140px, 1fr));
}
.calendar-grid-week {
    grid-template-columns: 70px repeat(5, minmax(140px, 1fr));
}

.cal-header {
    background: var(--paper); border-bottom: 1px solid var(--border);
    padding: var(--sp-md) 12px;
    position: sticky; top: 0; z-index: 2;
}
.cal-header.empty { background: var(--paper); }
.cal-header .name { font-weight: 700; font-size: .9375rem; color: var(--ink); }
.cal-header .role { font-size: .75rem; color: var(--slate); margin-top: 2px; }
.cal-header .status {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--info); margin-right: 6px; vertical-align: middle;
}
.cal-header .status.off { background: var(--status-off); }
.cal-header .status.partial { background: var(--secondary); }

.cal-time-axis {
    background: var(--paper); border-right: 1px solid var(--border);
    position: relative;
}
.cal-time-cell {
    /* BL-It6-038 — hour-row height reads the shared --cal-hour-height token
       (mirrors server SLOT_HEIGHT_PX*4) instead of a raw 64px literal. */
    height: var(--cal-hour-height); border-bottom: 1px solid var(--border);
    padding: 6px 8px 0; font-size: .75rem;
    color: var(--slate); font-weight: 600;
}

.cal-column {
    position: relative;
    border-right: 1px solid var(--border);
    /* BL-It6-038 — the hour gridlines read --cal-hour-height so they stay
       aligned with the axis cells + the server-positioned blocks. */
    background:
        linear-gradient(
            transparent calc(var(--cal-hour-height) - 1px),
            var(--border) calc(var(--cal-hour-height) - 1px),
            var(--border) var(--cal-hour-height),
            transparent var(--cal-hour-height)
        ) 0 0/100% var(--cal-hour-height);
}
.cal-column:last-child { border-right: none; }
.cal-column.off-day {
    background:
        repeating-linear-gradient(
            135deg,
            var(--off-day-stripe-1) 0,
            var(--off-day-stripe-1) 8px,
            var(--off-day-stripe-2) 8px,
            var(--off-day-stripe-2) 16px
        );
}
.cal-column.off-day .off-label {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: .75rem; color: var(--slate); font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    white-space: nowrap;
}
.partial-off {
    position: absolute; left: 0; right: 0; bottom: 0;
    background:
        repeating-linear-gradient(
            135deg,
            var(--off-day-stripe-1) 0,
            var(--off-day-stripe-1) 8px,
            var(--off-day-stripe-2) 8px,
            var(--off-day-stripe-2) 16px
        );
    pointer-events: none;
}

.appt {
    position: absolute; left: 4px; right: 4px;
    /* BL-It5-110 + BL-It6-038 — every block must show both content lines
     * AT REST. Vertical padding is 3px (reclaimed from 6px in BL-It5-110);
     * BL-It6-038 then raised the slot metric (--cal-hour-height, 64→144px)
     * so the smallest block — 15-min at 34px — clears two lines of the
     * tightened .appt-name/.appt-type type scale (line-height 1.1 below)
     * inside its 28px content box. Hover-to-expand (BL-It1-010) remains the
     * deep-dive for long notes. */
    border-radius: 4px; padding: 3px 8px;
    font-size: .75rem; line-height: 1.15;
    color: var(--paper); overflow: hidden;
    cursor: pointer; transition: all .15s ease;
    box-shadow: 0 1px 3px rgba(40, 40, 36, 0.12);
    z-index: 1;
}
/*
 * BL-It1-010: hover-to-expand. Short appointment blocks (15–30 min) can
 * clip their two-line content body when the slot height is smaller than
 * the rendered text. On :hover we (a) lift the block above sibling
 * blocks via z-index, (b) drop the height clip by letting the block
 * grow to fit its content (`height: auto`), (c) reveal previously
 * clipped text by switching `overflow: hidden` to `visible`, and (d)
 * raise the shadow for a visual lift. The `top` offset is preserved so
 * the block grows downward from its slot anchor; the inline
 * `height:Npx` is overridden by this `height: auto` because the
 * specificity rules favour the cascade (`:hover` is a pseudo-class with
 * higher specificity than the element's inline `style` height when
 * paired with a class selector + pseudo-class).
 */
.appt:hover {
    /*
     * !important is required because each `.appt` carries an inline
     * `style="top:Npx;height:Npx;"` (per _appointment.html) and inline
     * style specificity outranks class+pseudo-class. The override is
     * scoped to the single property the hover state needs to mutate.
     *
     * `min-height: var(--appt-slot-height)` preserves the original slot
     * footprint as the floor; `height: auto !important` lets the block
     * grow downward when its content exceeds the slot height (the bug
     * fix); when content fits, the block stays at the slot height.
     */
    height: auto !important;
    min-height: var(--appt-slot-height);
    z-index: 10;
    overflow: visible;
    box-shadow: 0 3px 8px rgba(40, 40, 36, 0.22);
    transform: translateX(1px);
}
/* BL-It6-038 — bolder + tighter block text (operator: "make the font bit
 * folder"); no inter-line margin + line-height 1.1. Each line stays ONE
 * line at rest (nowrap + ellipsis) so a fixed-height 15-min block (34px)
 * always shows both lines vertically — a long service name can no longer
 * wrap the type onto a third line and push it out of the box. The block's
 * height stays proportional to the appointment duration; horizontal
 * overflow of very long text ellipsises and is revealed in full on hover
 * (the .appt:hover rule below restores wrapping + auto-height). */
.appt .appt-name {
    font-weight: 800; margin-bottom: 0; line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appt .appt-type {
    font-size: .6875rem; opacity: .92; font-weight: 700; line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* On hover the block grows to auto-height (BL-It1-010); let both content
 * lines wrap + show in full instead of ellipsising. */
.appt:hover .appt-name,
.appt:hover .appt-type {
    white-space: normal; overflow: visible; text-overflow: clip;
}

.appt.fam-intake    { background: var(--primary); }
.appt.fam-treatment { background: var(--primary-dark); }
.appt.fam-hygiene   { background: var(--info); }
.appt.fam-ortho     { background: var(--info-light); color: var(--ink); }
.appt.fam-pediatric { background: var(--secondary); color: var(--ink); }
.appt.fam-urgent    { background: var(--error); }
.appt.reserved {
    background: transparent;
    border: 1.5px dashed var(--error);
    color: var(--error);
}
.appt.reserved .appt-name,
.appt.reserved .appt-type { color: var(--error); }

.legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    padding: var(--sp-md) var(--sp-lg);
    border-top: 1px solid var(--border);
    background: var(--legend-bg);
    font-size: .75rem; color: var(--slate); font-weight: 600;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch {
    width: 12px; height: 12px; border-radius: 3px;
    background: var(--canvas);
}
.legend-swatch.swatch-intake    { background: var(--primary); }
.legend-swatch.swatch-treatment { background: var(--primary-dark); }
.legend-swatch.swatch-hygiene   { background: var(--info); }
.legend-swatch.swatch-ortho     { background: var(--info-light); }
.legend-swatch.swatch-pediatric { background: var(--secondary); }
.legend-swatch.swatch-urgent    { background: var(--error); }
.legend-swatch.reserved {
    background: transparent; border: 1.5px dashed var(--error);
}

/* ---------- Chat view (BL-P0-013) ---------- */
.chat-card { padding: 0; overflow: hidden; }
.chat-shell {
    display: flex; flex-direction: column;
    height: calc(100vh - 76px - 64px);
    max-height: 800px;
}
.chat-history {
    flex: 1; overflow-y: auto;
    padding: var(--sp-lg);
    display: flex; flex-direction: column; gap: 14px;
}
.msg {
    max-width: 75%;
    padding: 12px 16px; border-radius: 12px;
    font-size: .9375rem; line-height: 1.5;
}
.msg.from-agent {
    background: var(--paper); color: var(--ink);
    border: 1px solid var(--border-soft);
    align-self: flex-start; border-bottom-left-radius: 4px;
    box-shadow: var(--shadow-sm);
}
.msg.from-user {
    background: var(--ink); color: var(--paper-on-ink);
    align-self: flex-end; border-bottom-right-radius: 4px;
}
.msg .who {
    display: block; font-size: .6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 4px;
}
.msg.from-agent .who { color: var(--primary); }
.msg.from-user .who { color: var(--primary-light); }
/* BL-It2-015 / ADR-014 D11: mic-icon prefix on voice-origin user
 * bubbles. The icon inherits its colour via `currentColor` (stroke)
 * and the explicit `color:` declarations below — `--primary` on the
 * agent palette, `--paper-on-ink` on the user palette (so the icon
 * stays visible against the dark user-bubble background). */
.msg-mic-icon {
    display: inline-block;
    width: 12px; height: 12px;
    margin-right: 6px;
    vertical-align: -2px;
    color: var(--primary);
}
.msg.from-user .msg-mic-icon { color: var(--paper-on-ink); }
.msg-text { display: inline; }
.msg-tool {
    align-self: center; font-size: .75rem; color: var(--slate);
    background: rgba(72, 208, 191, .08);
    border: 1px dashed rgba(72, 208, 191, .35);
    padding: 6px 12px; border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
}
/* BL-It5-096 — engine-driven conversation-close pill. Rendered in
 * the chat history once by chat.js when the ChatTextChannel emits
 * the `{role:"system",kind:"conversation_ended"}` frame. Visually
 * distinct from `.msg-tool` (debug/system note shape): centred,
 * rounded pill in the slate/border-soft palette so it reads as a
 * terminal status rather than a transient warning. */
.msg-close {
    align-self: center;
    font-size: .8125rem; font-weight: 600;
    color: var(--slate);
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    padding: 8px 16px; border-radius: 999px;
    font-style: italic;
}
.chat-input-row {
    border-top: 1px solid var(--border);
    padding: var(--sp-md) var(--sp-lg);
    background: var(--paper);
    display: flex; align-items: center; gap: var(--sp-sm);
}
.chat-input-row .input { flex: 1; }
.chat-toolbtn {
    width: 42px; height: 42px;
    border-radius: 6px; border: 1px solid var(--border);
    background: var(--paper); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink); position: relative;
}
.chat-toolbtn:hover:not(:disabled) { background: var(--canvas); border-color: var(--ink); }
.chat-toolbtn:disabled { opacity: .5; cursor: not-allowed; }
.chat-toolbtn .badge {
    position: absolute; top: -6px; right: -6px;
    background: var(--secondary); color: var(--ink);
    font-size: .625rem; font-weight: 700;
    padding: 1px 6px; border-radius: 8px;
    text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- Voice button + indicator (BL-It2-003 / ADR-008 D8) ---------- */
/* Prototype anchor: doc/prototype/clinic-demo-prototype.html lines 822–836
 * (the .chat-input-row's first toolbutton). Tokens trace to
 * doc/KalyduAI Theme Spec V2.md (--primary, --paper, --ink, --slate,
 * --primary-dark, --border, --shadow-primary). Per visual-conformance Part 2:
 * only var(--*) tokens, no raw hex literals. */
.chat-toolbtn[data-state="recording"],
.chat-toolbtn[data-state="recording"]:hover:not(:disabled) {
    background: var(--primary);
    color: var(--paper);
    box-shadow: var(--shadow-primary);
    border-color: var(--primary);
    animation: voice-pulse 1.4s linear infinite;
}
.chat-toolbtn[data-state="playing"],
.chat-toolbtn[data-state="playing"]:hover:not(:disabled) {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.chat-toolbtn[data-state="error"] {
    border-color: var(--ink);
    color: var(--ink);
}
.chat-toolbtn[data-state="unavailable"] {
    opacity: .5;
    cursor: not-allowed;
}
@keyframes voice-pulse {
    0%   { opacity: 1; }
    50%  { opacity: .6; }
    100% { opacity: 1; }
}
.voice-indicator {
    font-size: .8125rem;
    color: var(--slate);
    padding: var(--sp-xs) var(--sp-sm);
    display: inline-block;
}
.voice-indicator[data-state="recording"] { color: var(--primary-dark); }
.voice-indicator[data-state="error"] { color: var(--ink); }
.voice-indicator.hidden { display: none; }

/* ---------- Voice model chip (BL-It2-011 / CADR-006 D4) ---------- */
/* Always-visible chip showing the currently-selected LLM model for the
 * voice + (future) telephone channels. Click-through to change still
 * happens in the topbar picker — the chip is a read-only indicator.
 * Tokens trace to doc/KalyduAI Theme Spec V2.md (--paper, --ink,
 * --border, --slate). No raw hex per visual-conformance Part 2. */
.voice-model-chip {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: var(--sp-xs) var(--sp-sm);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1.2;
}
.voice-model-chip.hidden { display: none; }

/* ---------- Empty-state card (BL-P0-011a) ---------- */
.empty-state-wrap {
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-xxl) var(--sp-md);
}
.empty-state-card {
    max-width: 480px; text-align: center;
    background: var(--paper); border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: var(--sp-xxl) var(--sp-xl);
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-md);
}
.empty-state-heading {
    font-size: 1.25rem; font-weight: 600; color: var(--ink); margin: 0;
}
.empty-state-body {
    font-size: 1rem; color: var(--slate); margin: 0; line-height: 1.5;
}


/* ---------- Model picker (chat) — ADR-006a D3 ---------- */
/* Mirrors doc/prototype/clinic-demo-prototype.html lines 559–594 + the
 * topbar select+button row at 1035–1044. Per CLAUDE.md theme-literal
 * gate: only var(--*) tokens; no raw hex. */
.topbar-actions {
    display: flex; align-items: center; gap: 12px;
}
/* Wrapper carries the dropdown chevron as a CSS-only ::after pseudo so
 * the chevron color follows the theme's --ink token without a hex
 * literal in the SVG. */
.model-picker-wrap {
    position: relative;
    display: inline-block;
}
.model-picker-wrap::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translateY(-70%) rotate(45deg);
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    pointer-events: none;
}
.model-picker {
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 7px 30px 7px 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color .15s ease;
}
.model-picker:hover { border-color: var(--ink); }
.model-picker:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}
.model-picker.pending {
    border-style: dashed;
}
.model-picker optgroup {
    font-weight: 700;
    color: var(--slate);
    font-size: .75rem;
}
.model-picker option {
    font-weight: 500;
    color: var(--ink);
    padding: 4px 8px;
}
.model-pending-banner {
    background: var(--paper);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 0 var(--sp-md) var(--sp-md);
    color: var(--ink);
    font-size: .875rem;
    line-height: 1.5;
}
.hidden { display: none !important; }

/* ---------- Admin: conversations list (BL-It2-007) ---------- */
.conversations-filter-card { margin-bottom: var(--sp-md); }
.conversations-filter-form { width: 100%; }
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
    align-items: end;
}
.filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    min-width: 140px;
    flex: 1 1 140px;
}
.filter-label {
    font-size: .75rem;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.filter-field select,
.filter-field input[type="date"],
.filter-field input[type="text"] {
    font-family: inherit;
    font-size: .875rem;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--input-border);
    border-radius: 6px;
    padding: 8px 10px;
}
.filter-actions {
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
}
.btn-primary {
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 8px 18px;
    color: var(--paper);
    background: var(--primary);
    box-shadow: var(--shadow-primary);
}
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-link {
    color: var(--primary-dark);
    background: transparent;
    border: none;
    text-decoration: none;
    font-weight: 600;
    font-size: .875rem;
    padding: 8px 12px;
    cursor: pointer;
}
.btn-link:hover { color: var(--ink); }
.btn-danger {
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 8px 18px;
    color: var(--paper);
    background: var(--error);
}
.btn-danger:hover:not(:disabled) { background: var(--error-dark); }
.conversations-flash {
    margin-bottom: var(--sp-md);
    border-left: 3px solid var(--primary);
}
.conversations-list-card { padding: 0; overflow: hidden; }
.conversations-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-md) var(--sp-lg);
    border-bottom: 1px solid var(--border-soft);
}
.conversations-list-meta { color: var(--slate); }
.conversations-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.conversation-row {
    border-bottom: 1px solid var(--border-soft);
}
.conversation-row:last-child { border-bottom: none; }
.conversation-link {
    display: block;
    padding: var(--sp-md) var(--sp-lg);
    color: var(--ink);
    text-decoration: none;
    transition: background .12s ease;
}
.conversation-link:hover { background: var(--legend-bg); }
.conversation-row-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-md);
    align-items: center;
    font-size: .8125rem;
    font-weight: 600;
    margin-bottom: var(--sp-xs);
}
.conversation-when { color: var(--ink); }
.conversation-channel { color: var(--primary-dark); }
.conversation-model { color: var(--slate); }
.conversation-turns { color: var(--slate); }
.conversation-preview {
    color: var(--slate);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pii-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--error);
    color: var(--paper);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.conversations-pagination {
    display: flex;
    justify-content: space-between;
    padding: var(--sp-md) var(--sp-lg);
    border-top: 1px solid var(--border-soft);
}

/* ---------- Admin: conversation detail (BL-It2-007) ---------- */
.conversation-meta-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-md);
    margin-bottom: var(--sp-md);
}
.conversation-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-md);
    margin: 0;
    flex: 1 1 60%;
}
.conversation-meta dt {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--slate);
    font-weight: 600;
    margin-bottom: var(--sp-xs);
}
.conversation-meta dd {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    font-size: .9375rem;
}
.conversation-delete-form {
    flex-shrink: 0;
}
.conversation-turns {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}
.conversation-turn {
    border-left: 3px solid var(--border);
}
.conversation-turn--user { border-left-color: var(--primary); }
.conversation-turn--assistant { border-left-color: var(--ink); }
.conversation-turn--tool { border-left-color: var(--info); }
.conversation-turn--error { border-left-color: var(--error); background: var(--legend-bg); }
.conversation-turn-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-md);
    margin-bottom: var(--sp-sm);
}
.conversation-turn-meta { color: var(--slate); font-size: .75rem; }
.conversation-turn-content {
    margin: 0;
    color: var(--ink);
    line-height: 1.55;
    white-space: pre-wrap;
}
.conversation-turn-json {
    margin-top: var(--sp-sm);
    font-size: .8125rem;
    color: var(--slate);
}
.conversation-turn-json summary {
    cursor: pointer;
    color: var(--primary-dark);
    font-weight: 600;
}
.conversation-turn-json pre {
    background: var(--legend-bg);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: var(--sp-sm) var(--sp-md);
    margin-top: var(--sp-sm);
    overflow-x: auto;
    font-size: .75rem;
    color: var(--ink);
    line-height: 1.45;
}
.conversations-empty-card { text-align: center; }

/* BL-It3-024 — patient/agent bubble flow on /admin/conversations/<id>.
   Patient bubble = expandable <details>; agent bubble = plain card. */
.conversation-bubbles {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}
.conversation-bubble {
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: var(--sp-sm) var(--sp-md);
    background: var(--paper);
}
.conversation-bubble--user {
    border-left: 3px solid var(--primary);
    background: var(--legend-bg);
}
.conversation-bubble--agent {
    border-left: 3px solid var(--ink);
    align-self: flex-start;
    max-width: 90%;
}
/* BL-It5-054 — per-tool filler bubbles ("O secundă, caut în
   agendă.") rendered with a muted, italic treatment so reviewers
   can distinguish template chatter from substantive replies at a
   glance. The "(filler)" label next to the role tag is the
   load-bearing distinguisher; the muted body is visual reinforcement. */
.conversation-bubble--filler {
    border-left-color: var(--border-soft);
    opacity: 0.85;
}
.conversation-bubble--filler .conversation-bubble-text {
    color: var(--slate);
    font-style: italic;
}
.conversation-bubble-filler-label {
    color: var(--slate);
    font-style: italic;
    margin-left: var(--sp-xs);
}
.conversation-bubble--user[open] > summary {
    margin-bottom: var(--sp-sm);
}
.conversation-bubble > summary {
    cursor: pointer;
    list-style: none;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--sp-sm) var(--sp-md);
    align-items: baseline;
}
.conversation-bubble > summary::-webkit-details-marker { display: none; }
.conversation-bubble-role { color: var(--slate); }
.conversation-bubble-meta { color: var(--slate); font-size: .75rem; }
.conversation-bubble-text {
    margin: 0;
    color: var(--ink);
    line-height: 1.55;
    white-space: pre-wrap;
}
.conversation-bubble-trace { padding-top: var(--sp-sm); }
.conversation-bubble-trace h2 {
    font-size: .9375rem;
    margin: var(--sp-md) 0 var(--sp-xs);
    color: var(--primary-dark);
}
.conversation-bubble-trace h3 {
    font-size: .8125rem;
    margin: var(--sp-sm) 0 var(--sp-xs);
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.conversation-bubble-trace details {
    margin: var(--sp-xs) 0;
}
.conversation-bubble-trace details > summary {
    cursor: pointer;
    color: var(--primary-dark);
    font-weight: 600;
    font-size: .8125rem;
}
.conversation-bubble-trace pre {
    background: var(--paper);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: var(--sp-sm) var(--sp-md);
    margin-top: var(--sp-xs);
    overflow-x: auto;
    font-size: .75rem;
    color: var(--ink);
    line-height: 1.45;
}

/* BL-It5-071 — per-turn call log inside each user bubble.
   Card-per-entry layout so distinct calls are visually separated. */
.call-log-group { margin-top: var(--sp-md); }
.call-log-group-heading {
    font-size: .8125rem;
    margin: 0 0 var(--sp-sm);
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.call-log-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}
.call-log-entry {
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--primary-light);
    border-radius: 8px;
    padding: var(--sp-sm) var(--sp-md);
    background: var(--paper);
}
.call-log-entry-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-md);
    margin-bottom: var(--sp-xs);
}
.call-log-entry-name code {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    padding: 0;
}
.call-log-entry-time { color: var(--slate); font-variant-numeric: tabular-nums; }
.call-log-entry-delta {
    color: var(--ink);
    background: var(--legend-bg);
    border-radius: 6px;
    padding: var(--sp-xs) var(--sp-sm);
    margin: 0 0 var(--sp-sm);
}
.call-log-entry-delta > summary {
    cursor: pointer;
    list-style: none;
}
.call-log-entry-delta > summary::-webkit-details-marker { display: none; }
.call-log-entry-delta > summary::before {
    content: "▸ ";
    color: var(--slate);
    margin-right: var(--sp-xs);
}
.call-log-entry-delta[open] > summary::before { content: "▾ "; }
.call-log-entry-delta strong { color: var(--primary-dark); margin-right: var(--sp-xs); }
.call-log-entry-delta pre {
    background: var(--paper);
    border-radius: 6px;
    padding: var(--sp-sm);
    margin: var(--sp-xs) 0 0;
    overflow-x: auto;
    font-size: .75rem;
    color: var(--ink);
    line-height: 1.45;
}
.call-log-entry-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
}
.call-log-payload summary {
    cursor: pointer;
    color: var(--slate);
    padding: var(--sp-xs) 0;
}
.call-log-payload[open] summary { color: var(--primary-dark); }
.call-log-payload pre {
    background: var(--legend-bg);
    border-radius: 6px;
    padding: var(--sp-sm);
    margin: var(--sp-xs) 0 0;
    overflow-x: auto;
    font-size: .75rem;
    color: var(--ink);
    line-height: 1.45;
}
.conversation-pre-turn-events {
    margin-bottom: var(--sp-md);
    border: 1px dashed var(--border-soft);
    border-radius: 8px;
    padding: var(--sp-sm) var(--sp-md);
    background: var(--paper);
}
.conversation-pre-turn-events > summary {
    cursor: pointer;
    color: var(--slate);
}

/* ============================================================
 * Appointment ticket modal (ADR-022 / BL-It4-011)
 * Structural + look-and-feel match to doc/clinic-demo-prototype.html
 * lines 969-1008 / lines 617-655.
 * ============================================================ */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(40, 40, 36, 0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
    z-index: 1000;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.ticket {
    background: var(--paper);
    border-radius: 16px;
    width: 360px; max-width: calc(100vw - 32px);
    transform: translateY(8px);
    transition: transform .15s ease;
    box-shadow: 0 24px 64px rgba(40, 40, 36, 0.32);
    overflow: hidden;
}
.modal-overlay.open .ticket { transform: none; }
.ticket-head {
    background: var(--ink);
    color: var(--paper);
    padding: 16px 22px;
    display: flex; align-items: center; justify-content: space-between;
}
.ticket-head .th-left { display: flex; align-items: center; gap: 10px; }
.ticket-head .th-clinic { font-weight: 800; font-size: 1rem; line-height: 1; }
.ticket-head .th-clinic .accent { color: var(--primary); }
.ticket-head .th-sub {
    font-size: .5625rem; text-transform: uppercase; letter-spacing: .12em;
    color: rgba(255, 255, 255, 0.6); margin-top: 5px;
}
.ticket-close {
    background: rgba(255, 255, 255, 0.08);
    border: none; color: var(--paper);
    width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s ease;
}
.ticket-close:hover { background: rgba(255, 255, 255, 0.18); }
.ticket-qr-wrap {
    padding: 22px 22px 16px;
    text-align: center;
}
.qr-box {
    width: 188px; height: 188px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
}
.qr-box svg { width: 100%; height: 100%; display: block; }
.qr-box svg path { fill: var(--ink); }
.ticket-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.125rem; font-weight: 700;
    color: var(--ink);
    margin-top: 12px;
    letter-spacing: 0.08em;
}
.ticket-code-label {
    font-size: .625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--slate); margin-top: 2px;
}
.ticket-perf {
    border-top: 2px dashed var(--border);
    margin: 2px 22px 0;
}
.ticket-body { padding: 16px 24px 4px; }
.tk-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 6px 0;
}
.tk-k {
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--slate);
}
.tk-v {
    font-size: .9375rem; font-weight: 600;
    color: var(--ink); text-align: right;
}
.ticket-foot { padding: 14px 24px 22px; }
.ticket-hint {
    font-size: .75rem; color: var(--slate);
    display: flex; gap: 6px; align-items: center;
    line-height: 1.4;
}

/* ============================================================
 * Onboarding kiosk (ADR-022 / BL-It4-011)
 * Structural + look-and-feel match to doc/clinident-formulare-prototype.html
 * ============================================================ */
.kiosk-body {
    background: var(--canvas);
    min-height: 100vh;
    display: flex; flex-direction: column;
}
.kiosk-shell {
    flex: 1;
    width: 100%; max-width: 720px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}
.kiosk-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 24px;
}
.kiosk-head .logo-mark {
    width: 36px; height: 36px;
    background: var(--ink);
    border-radius: 8px;
}
.kiosk-head .kiosk-wordmark {
    font-weight: 800; font-size: 1.25rem;
    color: var(--ink); letter-spacing: -0.01em;
}
.kiosk-head .kiosk-wordmark .tld {
    color: var(--primary-dark); font-weight: 700;
}
.kiosk-head .kiosk-tagline {
    font-size: .5625rem; line-height: 1; font-weight: 500;
    color: var(--slate); margin-top: 4px; letter-spacing: 0.02em;
}
.kiosk-card {
    background: var(--paper);
    border-radius: 16px;
    padding: 28px 28px 24px;
    box-shadow: var(--shadow-md);
    margin-bottom: 16px;
}
.kiosk-card .overline {
    color: var(--primary-dark);
    font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.kiosk-card h3 {
    font-size: 1.5rem; font-weight: 700;
    color: var(--ink); margin: 8px 0 6px;
}
.kiosk-card .lead {
    font-size: 1.0625rem; color: var(--slate);
    margin-bottom: 16px;
}
.kiosk-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 16px;
}
.kiosk-pill {
    background: var(--ink); color: var(--paper);
    font-size: .75rem; font-weight: 700;
    padding: 4px 10px; border-radius: 6px;
    letter-spacing: 0.04em;
}
.kiosk-pill.legal {
    background: var(--info-dark);
}
.kiosk-pill.optional {
    background: var(--secondary);
}
.kiosk-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-soft);
}
.kiosk-row:last-child { border-bottom: none; }
.kiosk-row .k {
    font-size: .8125rem; font-weight: 700;
    color: var(--slate);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.kiosk-row .v {
    font-size: 1rem; font-weight: 600;
    color: var(--ink); text-align: right;
}
.kiosk-actions {
    display: flex; gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.kiosk-btn {
    font-family: inherit; font-size: .9375rem; font-weight: 700;
    border: none; border-radius: 8px;
    padding: 14px 24px;
    cursor: pointer;
    transition: all .15s ease;
    background: var(--primary);
    color: var(--ink);
    display: inline-flex; align-items: center; gap: 8px;
}
.kiosk-btn:hover { background: var(--primary-dark); color: var(--paper); }
.kiosk-btn:disabled {
    opacity: 0.45; cursor: not-allowed;
}
.kiosk-btn.ghost {
    background: transparent;
    color: var(--slate);
    border: 1px solid var(--border);
}
.kiosk-btn.ghost:hover { color: var(--ink); background: var(--canvas); }
.kiosk-input {
    width: 100%;
    font-family: inherit; font-size: 1rem;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--paper); color: var(--ink);
}
.kiosk-input.mono { font-family: 'JetBrains Mono', monospace; }
.kiosk-textarea {
    width: 100%; min-height: 80px;
    font-family: inherit; font-size: .9375rem;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--paper); color: var(--ink);
    resize: vertical;
}
.kiosk-label {
    display: block;
    font-size: .8125rem; font-weight: 700;
    color: var(--slate);
    margin: 8px 0 4px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.kiosk-fieldset { margin-bottom: 16px; }
.kiosk-check {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px;
    background: var(--canvas);
    border-radius: 8px;
    margin: 12px 0;
    cursor: pointer;
}
.kiosk-check input[type="checkbox"] {
    margin-top: 2px;
}
.kiosk-notice {
    background: var(--canvas);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 16px;
    max-height: 220px;
    overflow-y: auto;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--ink);
    margin: 12px 0;
}
.kiosk-stars {
    display: inline-flex; gap: 6px; margin: 6px 0;
}
.kiosk-stars label {
    cursor: pointer;
    font-size: 1.75rem;
    color: var(--disabled);
}
.kiosk-stars input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.kiosk-stars input[type="radio"]:checked ~ label,
.kiosk-stars label.on {
    color: var(--secondary);
}
.kiosk-footer {
    text-align: center;
    font-size: .75rem;
    color: var(--slate);
    padding: 20px 24px;
    border-top: 1px solid var(--border-soft);
}
.kiosk-error {
    background: rgba(217, 83, 54, 0.08);
    color: var(--error);
    border-left: 3px solid var(--error);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: .875rem;
    margin: 12px 0;
}
.kiosk-success {
    background: rgba(72, 208, 191, 0.10);
    color: var(--primary-dark);
    border-left: 3px solid var(--primary-dark);
    padding: 14px 16px;
    border-radius: 6px;
    margin: 12px 0;
    font-weight: 600;
}
.kiosk-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(59, 169, 154, .14);
    color: var(--primary-dark);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.kiosk-badge.attending {
    background: rgba(232, 148, 32, 0.16);
    color: var(--secondary-dark);
}
.kiosk-badge.completed {
    background: rgba(40, 40, 36, 0.06);
    color: var(--slate);
}

/* ---------- Onboarding signature pad (TC-001) ---------- */
/* Mirrors doc/prototype/clinident-formulare-prototype.html .sigpad block. */
.kiosk-sigwrap { position: relative; margin: 8px 0; }
.kiosk-sigpad {
    width: 100%;
    height: 180px;
    border-radius: 8px;
    border: 2px dashed var(--border);
    background: var(--canvas);
    touch-action: none;
    cursor: crosshair;
    display: block;
}
.kiosk-sigpad.signed {
    border-style: solid;
    border-color: var(--primary);
}
.kiosk-sig-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--disabled);
    gap: 4px;
    font-size: .8125rem;
}
.kiosk-sig-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}
.kiosk-sig-clear {
    background: transparent;
    border: none;
    color: var(--slate);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.kiosk-sig-clear:hover { color: var(--error); }
.kiosk-sig-status {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--disabled);
}
.kiosk-sig-status.ok { color: var(--primary-dark); }

/* ---------- Session-start controls (BL-It4-043 / ADR-026 §2.4) ----------
 * Renders BEFORE any WebSocket opens. Channel radio + Start button.
 * Tokens only; no raw hex per visual-conformance Part 2. */
.session-start-controls {
    display: flex; flex-direction: column;
    gap: var(--sp-md);
    padding: var(--sp-lg);
    background: var(--paper);
    border-radius: 8px;
}
.session-start-prompt {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
}
.session-start-channel {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}
.session-start-channel legend {
    padding: 0 var(--sp-sm);
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--slate);
}
.session-start-channel-opt {
    display: flex; align-items: center; gap: var(--sp-sm);
    color: var(--ink);
    font-size: .9375rem;
    cursor: pointer;
}
.session-start-channel-opt.disabled {
    color: var(--disabled);
    cursor: not-allowed;
}
.session-start-channel-hint {
    color: var(--slate);
    font-size: .8125rem;
}
.session-start-btn {
    align-self: flex-start;
    min-width: 120px;
}
.session-start-error {
    color: var(--error);
    background: var(--canvas);
    border: 1px solid var(--error);
    border-radius: 6px;
    padding: var(--sp-sm) var(--sp-md);
    font-size: .875rem;
}

/* BL-It4-043 — ensure the HTML ``hidden`` attribute beats per-element
 * display rules. Without this the ``.chat-shell`` flex display
 * overrides ``hidden`` and Playwright sees the panel as visible
 * pre-Start. */
[hidden] { display: none !important; }

/* ---------- BL-It5-022 / CADR-020 — mode-at-start chat surface ---------- */
/* CAP-23 D1+D2 — once the chat window opens with data-mode set, the
 * legacy in-window mic + tel icons are hidden (patient sees only
 * the mode chosen at session start). The legacy buttons stay in the
 * DOM for harness back-compat (existing voice e2e drives startVoice
 * via the mic button); CSS hides them for production traffic.
 *
 * Tokens: all visibility rules are state-driven; no colour / font /
 * spacing literals (per visual-conformance.md Part 2).
 */
.session-active-panel[data-mode] .chat-legacy-mic,
.session-active-panel[data-mode] .chat-legacy-tel {
    display: none;
}
.session-active-panel[data-mode="voice"] .chat-input,
.session-active-panel[data-mode="voice"] #chat-send,
.session-active-panel[data-mode="tel"] .chat-input,
.session-active-panel[data-mode="tel"] #chat-send {
    display: none;
}
/* CAP-23 D6 — tel-dial-panel renders only under data-mode="tel".
 * Default state is hidden; the partial does not carry its own
 * ``hidden`` attribute so the panel is purely CSS-driven. */
.tel-dial-panel { display: none; }
.session-active-panel[data-mode="tel"] .tel-dial-panel { display: block; }
.tel-dial-panel {
    padding: var(--sp-lg);
    text-align: center;
    border-top: 1px solid var(--border);
    background: var(--paper);
}
.tel-dial-label,
.tel-code-label,
.tel-status {
    color: var(--slate);
    font-size: .875rem;
    margin: var(--sp-sm) 0;
}
/* BL-It5-056 / CAP-18 — click-to-dial anchor styled as a primary
 * button. ``href`` is set by ``__telBootstrap`` to ``tel:NUMBER,CODE``;
 * the inline number + comma + code render the visible label. */
.tel-dial-button {
    display: inline-flex;
    align-items: baseline;
    gap: 0.1rem;
    padding: var(--sp-md) var(--sp-lg);
    margin: var(--sp-sm) 0;
    background: var(--primary);
    color: var(--primary-contrast);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: .05em;
}
.tel-dial-button:active {
    filter: brightness(0.9);
}
.tel-dial-button .tel-dial-number {
    color: var(--primary-contrast);
    font-weight: 700;
}
.tel-dial-button .tel-dial-comma {
    opacity: 0.6;
    margin: 0 0.15rem;
}
.tel-dial-button .tel-code {
    color: var(--primary-contrast);
    font-weight: 800;
    letter-spacing: .15em;
}
.tel-status[data-state="connected"] {
    color: var(--primary);
    font-weight: 600;
}

/* CAP-23 D4 — End conversation button is the only in-window control
 * patient-facing under the new shell. Always visible once a mode is
 * set; uses the ghost variant + the existing token palette. */
.chat-end-btn {
    margin-left: auto;
}
.session-active-panel:not([data-mode]) .chat-end-btn {
    display: none;
}

/* ============================================================
 * BL-It6-002 / ADR-027 D2 / CAP-26 — CADR-021 PRODUCT DESIGN SYSTEM
 * Ported from doc/CADR-21/prototype/denalu/shared.css. These rules add
 * the product look-and-feel ALONGSIDE the legacy console (ADR-027 C-4).
 *
 * Collision discipline: shared.css reuses several class names the legacy
 * theme already owns (.sidebar, .card, .input, .btn, .btn-primary,
 * .btn-sm, .overline, .logo-wordmark, .logo-tagline, .logo-mark). To keep
 * the legacy menu console byte-identical (C-4), every product override of
 * a colliding name is SCOPED under a product shell ancestor (.console for
 * the staff console, .pf-main / .pf-header for the patient shell). The
 * legacy .app/.main/.topbar/.sidebar-nav/.nav-item rules above are never
 * touched. Non-colliding product class names (.console, .snav, .feed-card,
 * .pf-header, .pf-main, .launcher, .launch, .askbar, .badge, .table,
 * .field, .chip, .note, .kv, .stepper) are defined globally; they cannot
 * regress a legacy surface because no legacy template uses them.
 *
 * Prototype walkthrough scaffolding (.proto-chrome / .proto-panel / .anno)
 * is NOT ported (SPEC Design Note 4 — prototype-only browsing aids).
 * The global h1–h4 type scale is NOT changed (Theme Spec V2 wins per
 * stack.md; SPEC Design Note 3 — see XAI §3).
 * ============================================================ */

/* ---------- Product typography helpers (non-colliding) ---------- */
.small { font-size: .8125rem; color: var(--slate); }
.mono { font-family: var(--mono); }

/* ---------- Product logo lockups (scoped to product shells) ----------
 * The product sidebar/header use shared.css's teal logo-mark + accent
 * wordmark; scope under product shells so the legacy ink logo-mark in
 * _menu.html is unaffected. */
.console .logo-row,
.pf-header .logo-row { display: flex; align-items: center; gap: 12px; }
.console .logo-mark,
.pf-header .logo-mark {
    width: 40px; height: 40px; border-radius: 10px; flex: none;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    position: static;
}
.console .logo-mark::before, .console .logo-mark::after,
.pf-header .logo-mark::before, .pf-header .logo-mark::after { content: none; }
.console .logo-mark.dark,
.pf-header .logo-mark.dark { background: #34342F; }
.console .logo-mark.sm,
.pf-header .logo-mark.sm { width: 30px; height: 30px; border-radius: 8px; }
.console .logo-mark svg,
.pf-header .logo-mark svg { display: block; }
.console .logo-wordmark,
.pf-header .logo-wordmark {
    font-weight: 800; font-size: 1.25rem; line-height: 1.1;
    letter-spacing: -0.01em; color: var(--ink);
}
.console .logo-wordmark .tld, .console .logo-wordmark .accent,
.pf-header .logo-wordmark .tld, .pf-header .logo-wordmark .accent {
    color: var(--primary); font-weight: 700;
}
.console .logo-tagline,
.pf-header .logo-tagline {
    font-size: .59rem; line-height: 1.2; font-weight: 600; color: var(--slate);
    letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0;
}
.powered-by { display: flex; align-items: center; gap: 10px; }
.powered-by .label {
    font-size: .67rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--disabled);
}

/* ---------- Product buttons (scoped to product shells) ----------
 * Scope under product shells so the legacy .btn / .btn-primary / .btn-sm
 * keep their exact padding/weight on legacy pages (C-4). */
.console .btn,
.pf-main .btn, .pf-header .btn {
    font-family: inherit; font-size: .875rem; font-weight: 700;
    border: none; border-radius: 6px; cursor: pointer;
    padding: 12px 24px; transition: all .15s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    white-space: nowrap; text-decoration: none; line-height: 1.3;
}
.console .btn:disabled,
.pf-main .btn:disabled, .pf-header .btn:disabled { cursor: not-allowed; opacity: .5; }
.console .btn-primary,
.pf-main .btn-primary, .pf-header .btn-primary {
    background: var(--primary); color: var(--primary-contrast);
    box-shadow: var(--shadow-primary);
}
.console .btn-primary:hover:not(:disabled),
.pf-main .btn-primary:hover:not(:disabled),
.pf-header .btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.console .btn-ink,
.pf-main .btn-ink, .pf-header .btn-ink { background: var(--ink); color: var(--primary-contrast); }
.console .btn-ink:hover:not(:disabled),
.pf-main .btn-ink:hover:not(:disabled),
.pf-header .btn-ink:hover:not(:disabled) { background: var(--ink-soft); }
.console .btn-accent,
.pf-main .btn-accent, .pf-header .btn-accent { background: var(--secondary); color: var(--primary-contrast); }
.console .btn-accent:hover:not(:disabled),
.pf-main .btn-accent:hover:not(:disabled),
.pf-header .btn-accent:hover:not(:disabled) { background: var(--secondary-dark); }
.console .btn-ghost,
.pf-main .btn-ghost, .pf-header .btn-ghost { background: transparent; color: var(--slate); padding: 12px 14px; }
.console .btn-ghost:hover,
.pf-main .btn-ghost:hover, .pf-header .btn-ghost:hover { color: var(--ink); background: var(--border-soft); }
.console .btn-outline,
.pf-main .btn-outline, .pf-header .btn-outline {
    background: var(--paper); color: var(--ink); border: 1.5px solid var(--input-border);
}
.console .btn-outline:hover:not(:disabled),
.pf-main .btn-outline:hover:not(:disabled),
.pf-header .btn-outline:hover:not(:disabled) { border-color: var(--ink); }
.console .btn-danger,
.pf-main .btn-danger, .pf-header .btn-danger { background: var(--error); color: var(--primary-contrast); }
.console .btn-sm,
.pf-main .btn-sm, .pf-header .btn-sm { padding: 8px 14px; font-size: .8125rem; }
.console .btn-lg,
.pf-main .btn-lg, .pf-header .btn-lg { padding: 15px 32px; font-size: 1rem; }

/* ---------- Product inputs (scoped to product shells) ---------- */
.console .input, .console .textarea, .console .select,
.pf-main .input, .pf-main .textarea, .pf-main .select {
    font-family: inherit; font-size: 1rem; color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--input-border); border-radius: 6px;
    padding: 11px 14px; width: 100%; transition: border-color .15s;
}
.console .input:focus, .console .textarea:focus, .console .select:focus,
.pf-main .input:focus, .pf-main .textarea:focus, .pf-main .select:focus {
    outline: none; border-color: var(--primary); box-shadow: none;
}
.console .textarea, .pf-main .textarea { min-height: 96px; resize: vertical; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: .875rem; font-weight: 700; }

/* choice chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
    display: inline-flex; align-items: center; gap: 9px;
    border: 1.5px solid var(--input-border); border-radius: 8px; background: var(--paper);
    padding: 12px 18px; font-size: .9375rem; font-weight: 600; cursor: pointer;
    transition: all .15s; user-select: none; min-height: 44px;
}
.chip .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #C8C8C4; flex: none; transition: all .15s; }
.chip.on { border-color: var(--primary); background: var(--primary-faint); }

/* ---------- Product cards (scoped to product shells) ---------- */
.console .card,
.pf-main .card {
    background: var(--paper); border-radius: 12px;
    box-shadow: var(--shadow-sm); padding: 28px; border: none;
}
.console .card.flat,
.pf-main .card.flat { box-shadow: none; border: 1px solid var(--border); }
.card-warm { background: var(--paper-warm); border-radius: 10px; padding: 20px 24px; }
.note {
    background: var(--paper-warm); border-left: 3px solid var(--secondary);
    border-radius: 6px; padding: 14px 18px; font-size: .9rem;
}
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 12px 0; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.kv tr:last-child td { border-bottom: none; }
.kv .k { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); padding-right: 16px; white-space: nowrap; }
.kv .v { text-align: right; font-family: var(--mono); font-size: .9375rem; font-weight: 500; }

/* ---------- Product badges (non-colliding) ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    border-radius: 100px; padding: 4px 12px; line-height: 1.5;
    background: var(--border-soft); color: var(--slate);
}
.badge.teal { background: var(--primary-faint); color: var(--primary-dark); }
.badge.amber { background: var(--secondary-faint); color: var(--secondary-dark); }
.badge.sage { background: var(--info-faint); color: var(--info-dark); }
.badge.red { background: var(--error-faint); color: var(--error); }
.badge.ink { background: var(--ink); color: var(--primary-contrast); }
.badge.mono { font-family: var(--mono); text-transform: none; letter-spacing: .04em; }

/* ---------- Patient-facing page shell ---------- */
.pf-header {
    background: var(--paper); border-bottom: 1px solid var(--border);
    padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.pf-main { max-width: 760px; margin: 0 auto; padding: 48px 20px 80px; }
.pf-main.wide { max-width: 980px; }

/* ---------- Stepper ---------- */
.stepper { display: flex; align-items: flex-start; max-width: 860px; margin: 0 auto; padding: 22px 24px 14px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 84px; }
.step .num {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .9rem; background: var(--paper); border: 1.5px solid #D0D0CC; color: var(--slate);
}
.step .lbl { font-size: .8125rem; font-weight: 700; color: var(--slate); white-space: nowrap; }
.step.done .num { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.step.active .num { background: var(--ink); border-color: var(--ink); color: var(--primary-contrast); }
.step.active .lbl { color: var(--ink); }
.step-line { flex: 1; height: 2px; background: var(--input-border); margin-top: 16px; }
.step-line.done { background: var(--primary); }

/* ---------- Staff console shell ---------- */
.console { display: flex; min-height: 100vh; }
/* Scoped .sidebar override — only inside .console. The legacy
 * .app .sidebar (260px ink rail) is untouched (C-4). */
.console .sidebar {
    width: 248px; flex: none; background: var(--sidebar-bg); color: var(--sidebar-ink);
    display: flex; flex-direction: column; padding: 22px 0 18px;
    position: sticky; top: 0; height: 100vh;
}
.console .sidebar .logo-row { padding: 0 22px 20px; }
.console .sidebar .logo-wordmark { color: var(--primary-contrast); }
.console .sidebar .logo-tagline { color: #8A8A84; }
.console .sidebar .sect {
    font-size: .67rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--primary); padding: 16px 22px 8px;
}
.snav { list-style: none; display: flex; flex-direction: column; }
.snav a {
    display: flex; align-items: center; gap: 10px; padding: 10px 22px;
    color: var(--sidebar-ink); text-decoration: none; font-size: .9375rem; font-weight: 600;
    border-left: 3px solid transparent;
}
.snav a:hover { color: var(--primary-contrast); background: rgba(255,255,255,.04); }
.snav a.active { color: var(--primary); background: rgba(72,208,191,.08); border-left-color: var(--primary); }
.console .sidebar .spacer { flex: 1; }
.console .sidebar .user {
    padding: 14px 22px 0; border-top: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; gap: 10px; font-size: .875rem;
}
.console .sidebar .user .av {
    width: 34px; height: 34px; border-radius: 50%; background: var(--primary);
    color: var(--primary-contrast); font-weight: 800; font-size: .8rem;
    display: flex; align-items: center; justify-content: center; flex: none;
}
.console .sidebar .user .uname { color: var(--primary-contrast); font-weight: 700; }
.console .sidebar .user .uroles { font-size: .72rem; color: #8A8A84; }
/* BL-It6-031 / CAP-41 — per-user UI language selector in the sidebar footer. */
.console .sidebar .ui-lang { padding: 14px 22px 0; display: flex; flex-direction: column; gap: 6px; }
.console .sidebar .ui-lang-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #8A8A84; }
.console .sidebar .ui-lang-select { width: 100%; }
.console-main { flex: 1; min-width: 0; padding: 30px 36px 60px; }
.console-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.menu-btn { display: none; }

/* ---------- Ask bar (visual-only, ADR-027 D3) ---------- */
.askbar {
    display: flex; gap: 10px; background: var(--paper); border-radius: 12px;
    box-shadow: var(--shadow-md); padding: 10px 10px 10px 18px;
    align-items: center; margin-bottom: 8px;
}
.askbar .askbar-spark { color: var(--disabled); }
.askbar .askbar-input { border: none; padding: 8px 0; background: transparent; }
.askbar-note { font-size: .78rem; color: var(--slate); margin: 4px 0 22px; display: block; }

/* ---------- Ops grid (feed + launcher) ---------- */
.ops-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }

/* feed cards */
.feed { display: flex; flex-direction: column; gap: 12px; }
.feed-card {
    background: var(--paper); border-radius: 10px; box-shadow: var(--shadow-sm);
    padding: 18px 20px; display: flex; align-items: flex-start; gap: 14px;
}
.feed-card .ico {
    width: 38px; height: 38px; border-radius: 9px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
    background: var(--primary-faint); color: var(--primary-dark); font-weight: 800;
}
.feed-card .ico.amber { background: var(--secondary-faint); color: var(--secondary-dark); }
.feed-card .ico.red { background: var(--error-faint); color: var(--error); }
.feed-card .ico.sage { background: var(--info-faint); color: var(--info-dark); }
.feed-card .body { flex: 1; min-width: 0; }
.feed-card .why { font-size: .78rem; color: var(--slate); }

/* ---------- Patient zone /me (BL-It6-017 / CAP-35) ----------
   Structural classes for patient-auth.html + patient-home.html. All
   colours via tokens (theme.css is the sole legal hex location); these add
   only structure + token usage, matching the prototype's look-and-feel. */
.gate { max-width: 440px; margin: 0 auto; }
.method-tabs { display: flex; gap: var(--sp-sm); margin-bottom: 18px; }
.method-tabs button {
    flex: 1; font-family: inherit; font-size: .875rem; font-weight: 700; cursor: pointer;
    border: 1.5px solid var(--border); background: var(--paper); color: var(--slate);
    border-radius: 8px; padding: 10px;
}
.method-tabs button.on { background: var(--ink); border-color: var(--ink); color: var(--paper-on-ink); }
.otp-row { display: flex; gap: var(--sp-sm); justify-content: center; margin: var(--sp-md) 0 6px; }
.otp-row input {
    width: 48px; height: 56px; text-align: center; font-family: var(--mono); font-size: 1.4rem;
    border: 1.5px solid var(--border); border-radius: 8px; background: var(--paper);
}
.otp-row input:focus { outline: none; border-color: var(--primary); }
.stage { display: none; } .stage.on { display: block; }
.maglink {
    background: var(--paper-warm); border: 1.5px dashed var(--primary); border-radius: 10px;
    padding: var(--sp-md) 18px; font-size: .85rem; margin-top: 14px; word-break: break-all;
}
.me-nav { display: flex; gap: var(--sp-sm); flex-wrap: wrap; margin: 18px 0 var(--sp-lg); }
.me-nav button {
    font-family: inherit; font-size: .875rem; font-weight: 700; cursor: pointer;
    border: 1.5px solid var(--border); background: var(--paper); color: var(--slate);
    border-radius: 100px; padding: var(--sp-sm) 18px;
}
.me-nav button.on { background: var(--ink); border-color: var(--ink); color: var(--paper-on-ink); }
.view { display: none; } .view.on { display: block; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }
.doc-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border-soft); }
.doc-row:last-child { border-bottom: none; }
.doc-ico {
    width: 36px; height: 36px; border-radius: 8px; background: var(--primary-faint);
    color: var(--primary-dark); display: flex; align-items: center; justify-content: center; flex: none;
}
.plan-step { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); align-items: flex-start; }
.plan-step:last-child { border-bottom: none; }
.plan-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--border); }
.plan-dot.done { background: var(--primary); }
.plan-dot.now { background: var(--secondary); }

/* launcher */
.launcher { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.launch {
    background: var(--paper); border-radius: 10px; box-shadow: var(--shadow-sm);
    padding: 14px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: .85rem;
    display: flex; flex-direction: column; gap: 6px; line-height: 1.3;
}
.launch:hover { box-shadow: var(--shadow-md); }
.launch .ic { font-size: 1.2rem; }

/* tables (product) */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--paper); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.table th { text-align: left; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--paper-warm); }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }

/* ---------- Product responsive ---------- */
@media (max-width: 1100px) {
    .ops-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .console .sidebar {
        position: fixed; left: 0; top: 0; bottom: 0; height: auto; z-index: 8000;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    .console .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .console-main { padding: 20px 16px 60px; }
    .menu-btn { display: inline-flex; }
    .pf-header { padding: 12px 16px; }
    .pf-main { padding: 28px 16px 60px; }
}