/* ============================================================
   COMPONENTS — Buttons, Cards, Tables, Forms, Alerts
   ============================================================ */

/* --- Buttons --- */
.btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
    white-space: nowrap;
}

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

.btn-primary {
    background-color: color-mix(in srgb, var(--primary) 90%, transparent);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, white), var(--primary));
    color: #FFFFFF;
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--primary) 82%, black);
    background-image: none;
    border-color: color-mix(in srgb, var(--primary) 82%, black);
    color: #FFFFFF;
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-secondary, a.button.secondary, a.button, button:not([class]) {
    background: var(--bg-surface);
    background-color: var(--bg-surface);
    color: var(--text-main);
    border-color: var(--border-soft);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover, a.button.secondary:hover, a.button:hover, button:not([class]):hover {
    background-color: var(--bg-base);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

button:not([class]):hover {
    color: var(--text-main);
}

button:disabled,
input[type="submit"]:disabled,
button.submit-guard-disabled:disabled,
input[type="submit"].submit-guard-disabled:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
    box-shadow: none;
    filter: saturate(0.65);
}

.btn-danger {
    background-color: transparent;
    color: var(--error);
    border-color: var(--error-border);
}

.btn-danger:hover {
    background-color: var(--error-bg);
    color: color-mix(in srgb, var(--error) 80%, black);
    border-color: color-mix(in srgb, var(--error) 80%, black);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Lowest-emphasis button: text only until hovered. Used for secondary/tertiary
   row actions (e.g. "Profile", "View Note") that shouldn't compete with a
   row's primary action. */
.btn-ghost {
    background-color: transparent;
    color: var(--text-main);
    border-color: transparent;
    box-shadow: none;
}

.btn-ghost:hover {
    background-color: var(--accent);
    color: var(--primary);
}

.btn-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--bg-surface);
    color: var(--text-main);
    border-color: var(--border-soft);
    box-shadow: var(--shadow-sm);
}

.btn-icon:hover {
    background-color: var(--bg-base);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-sm {
    min-height: 36px;
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
}

.btn-xs {
    min-height: 32px;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
}

.btn-icon.btn-sm {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
}

.btn-icon.btn-xs {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
}

/* Shared button baseline for plain <button> elements */
button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--bg-surface);
    background-color: var(--bg-surface);
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

/* --- Cards --- */
.card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
}

.card + .card {
    margin-top: var(--space-6);
}

/* Canonical width for compact patient-facing journey cards. */
.patient-facing-card {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.card-title {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}

/* --- Path card (booking landing path selector) --- */
.path-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    color: var(--text-main);
    text-decoration: none;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    cursor: pointer;
}

.path-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-md);
    color: var(--text-main);
}

.path-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--bg-base);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    flex-shrink: 0;
    transition: background-color var(--transition), color var(--transition);
}

.path-card:hover .path-card-icon {
    background-color: var(--accent);
    color: var(--primary);
}

.path-card-icon svg {
    width: 24px;
    height: 24px;
}

.path-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.path-card-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 2px;
}

.path-card-description {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--text-muted);
}

.path-card-arrow {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    transition: transform var(--transition), color var(--transition);
}

.path-card:hover .path-card-arrow {
    color: var(--primary);
    transform: translateX(4px);
}

/* --- Catalog list (booking landing) --- */
.catalog-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.catalog-item {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-6);
    color: var(--text-main);
}

/* --- Tables --- */
.data-table, table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table thead, table thead {
    border-bottom: 2px solid var(--border-soft);
}

.data-table th, table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.data-table td, table td {
    padding: var(--space-3) var(--space-4);
    color: var(--text-main);
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}

.data-table tr:last-child td, table tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover, table tbody tr:hover {
    background-color: var(--bg-base);
}

/* --- Responsive "stacked card" tables --- */
@media (max-width: 768px) {
    .data-table, table {
        max-width: 100%;
    }

    .data-table thead, table thead {
        display: none;
    }

    .data-table, .data-table tbody, .data-table tr,
    table, table tbody, table tr {
        display: block;
        width: 100%;
    }

    .data-table tbody tr, table tbody tr {
        margin-bottom: var(--space-4);
        padding: var(--space-2) var(--space-4);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }

    .data-table tbody tr:last-child, table tbody tr:last-child {
        margin-bottom: 0;
    }

    .data-table td, table td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        word-break: break-word;
        overflow-wrap: anywhere;
        border-bottom: none;
    }

    .data-table td[data-label]::before, table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        margin-bottom: var(--space-1);
    }

    .data-table td .btn, table td .btn,
    .data-table td button, table td button,
    .data-table td form, table td form,
    .data-table td a, table td a {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* --- Forms --- */
.form-group {
    margin-bottom: var(--space-4);
}

label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: var(--space-1);
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid #D1D5DB;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text-main);
    background-color: var(--bg-surface);
    transition: border-color var(--transition), box-shadow var(--transition);
    line-height: 1.5;
}

select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position:
        calc(100% - var(--space-4)) center,
        calc(100% - var(--space-3)) center;
    background-size: var(--space-1) var(--space-1), var(--space-1) var(--space-1);
    padding-right: calc(var(--space-3) + 1.5rem);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(31 41 55 / 0.5);
}

input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--bg-base);
    border-color: var(--border-soft);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Styled file input: visible pill trigger overlaid by the real input. */
.file-input-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.file-input-trigger {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background-color: var(--bg-surface);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.file-input-trigger:hover {
    background-color: var(--bg-base);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.file-input-filename {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.file-input-hidden {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.file-input-hidden:focus-visible + .file-input-trigger {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Inline label + checkbox rows */
.agreement-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background-color: var(--bg-base);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.agreement-row label {
    margin-bottom: 0;
    font-size: 0.875rem;
    cursor: pointer;
}

/* --- Error States --- */
.error-banner {
    background-color: var(--error-bg);
    color: var(--error);
    border: 1px solid var(--error-border);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.error-banner p {
    margin: 0;
    color: var(--error);
}

.input-error {
    border-color: var(--error) !important;
}

.error-message {
    display: block;
    color: var(--error);
    font-size: 0.8125rem;
    margin-top: var(--space-1);
}

#signatureError {
    display: none;
}

/* --- Alerts (Success / Clinical) --- */
.alert-success {
    background-color: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.alert-danger {
    background-color: var(--error-bg);
    color: var(--error);
    border: 1px solid var(--error-border);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.alert-info {
    background-color: var(--bg-base);
    color: var(--text-main);
    border: 1px solid var(--border-soft);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

/* Clinical alert banner — dusty rose prominence */
.clinical-alert-banner {
    background-color: var(--accent);
    color: var(--primary);
    border: 1px solid var(--accent-hover);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* --- Plain list (no bullets, no padding) --- */
.plain-list {
    list-style: none;
    padding: 0;
}

/* --- List rows with dividers --- */
.list-row {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-soft);
}

.list-row:last-child {
    border-bottom: none;
}

/* Mobile: let a flex list-row wrap rather than force page/section overflow when its
   leading content (e.g. a long unbroken treatment type) can't shrink below its own
   content width. The trailing .ms-auto action drops to its own full-width line instead
   of staying pinned to the right of an overflowing row. */
@media (max-width: 768px) {
    .list-row.d-flex {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* Appointment labels are flex items; allow an unbroken treatment type to shrink and wrap
       instead of making the row's hidden overflow clip the SOAP shortcut. */
    .list-row.d-flex[data-testid^="appointment-"] > .text-sm.font-medium {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .pathway-event-control-row {
        flex-wrap: wrap;
    }
}

/* --- Pathway day-group card (AC1 of Pathway Event/Appointment Rendering Consolidation):
       one or more events scheduled onto the same real appointment, rendered under a single
       day heading instead of being shown twice (once flat, once per-appointment). --- */
.pathway-day-group {
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0;
}

.pathway-day-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 600;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-soft);
}

.pathway-day-group-date {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.pathway-day-group-charge {
    margin-left: auto;
}

.pathway-day-group ul.plain-list {
    margin: 0;
}

.pathway-day-group .list-row:last-child {
    border-bottom: none;
}

/* --- Pathway unscheduled-event card (AC5 of Pathway Event/Appointment Rendering
       Consolidation): an unscheduled event's own card, the same shape as a day-group card
       but visually unmistakable for one — dashed border + amber accent instead of a solid
       border + the day-group's rose accent, "Unscheduled" standing in for a date. --- */
.pathway-unscheduled-group {
    border: 1px dashed #d8a13c;
    border-left: 3px solid #d8a13c;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0;
    background: #fffaf0;
}

.pathway-unscheduled-group .pathway-day-group-header {
    color: #92400e;
}

.pathway-unscheduled-group ul.plain-list {
    margin: 0;
}

.pathway-unscheduled-group .list-row:last-child {
    border-bottom: none;
}

/* --- Pathway day-group attach sub-panel (AC4 of Pathway Event/Appointment Rendering
       Consolidation): the relocated attach-to-appointment form, styled as a distinct
       action panel (dashed divider + tinted background) so it reads as an action, not a
       stray extra row. --- */
.pathway-attach-block {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border-soft);
}

.pathway-attach-header {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.pathway-attach-form {
    background: rgba(0, 0, 0, 0.02);
    border-radius: var(--radius-md);
    padding: var(--space-2);
}

/* The select's intrinsic width can otherwise make this flex form wider than its day card when
   an unbroken event label is long. Constrain the form first, then let the select take its own
   wrapped line on mobile so neither control can force horizontal scrolling. */
@media (max-width: 768px) {
    /* The pathway body is a grid; its default auto minimum lets a long event label widen the
       nested event list beyond the profile card before the form can wrap. */
    .pathway-summary .profile-section-body > * {
        min-width: 0;
        max-width: 100%;
    }

    .pathway-summary .profile-section-body .pathway-day-group {
        min-width: 0;
        max-width: 100%;
    }

    .pathway-attach-form {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .pathway-attach-form select {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
}

.pathway-notes-block {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border-soft);
}

.pathway-notes-header {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.list-row-sm {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-soft);
}

/* --- Status badges: generic pill shape, used with a status-specific modifier --- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}

.badge-version {
    background-color: #f3f4f6;
    color: var(--text-main);
}

.badge-superseded {
    background-color: #f3f4f6;
    color: var(--text-muted);
}

/* --- Appointment-type badges (home schedule) --- */
.badge-consultation {
    background-color: var(--accent);
    color: var(--primary);
    flex-shrink: 0;
    white-space: nowrap;
}

.badge-treatment {
    background-color: var(--primary);
    color: #FFFFFF;
    flex-shrink: 0;
    white-space: nowrap;
}

.badge-other {
    background-color: #f3f4f6;
    color: var(--text-main);
    flex-shrink: 0;
    white-space: nowrap;
}

/* --- Empty-state circular icon badge (matches practice-overview-empty.html mockup) --- */
.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    background-color: #f3f4f6;
    color: #9ca3af;
    margin-bottom: var(--space-6);
}

/* --- Consent template card grid (AC1 of Consent Template Design Refresh) --- */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
}
.template-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    transition: box-shadow var(--transition), transform var(--transition);
}
.template-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.template-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    background-color: var(--accent);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}
.template-card-name {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--primary);
    font-weight: 600;
}
.template-card-history {
    margin-top: var(--space-4);
}

.template-card > .d-flex {
    flex-wrap: wrap;
}

.template-card .badge-version {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right;
}
.template-card-history summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-muted);
    list-style: none;
    padding: var(--space-1) 0;
}
.template-card-history summary::-webkit-details-marker { display: none; }
.template-card-history summary::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    margin-right: 0.4rem;
}
.template-card-history[open] summary::before { transform: rotate(-135deg); }
a.template-card-old-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    padding: var(--space-3) var(--space-1);
    border-radius: var(--radius-sm);
}
.template-card-old-row:hover { background: var(--bg-base); }
.template-card-old-row-label { display: flex; align-items: center; gap: var(--space-2); }
.template-card-old-row .chevron { color: var(--text-muted); }

/* --- Consent document surface (AC2 of Consent Template Design Refresh) --- */
.consent-document {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 3rem;
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}
.consent-document::before {
    content: "";
    position: absolute;
    top: 0; left: var(--space-8); right: var(--space-8);
    height: 3px;
    background: linear-gradient(90deg, var(--accent-hover), var(--accent));
    border-radius: 0 0 4px 4px;
}
.consent-document-mark {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-serif); font-size: 0.72rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-5);
}
.consent-document h1, .consent-document h2, .consent-document h3 {
    font-family: var(--font-serif); color: var(--primary);
}
.consent-document-body {
    font-size: 1rem; line-height: 1.75; color: var(--text-main);
}
/* Bullets/numbers sit well clear of the card edge — not flush against
   the document's own padding — at every viewport width. */
.consent-document-body ul, .consent-document-body ol {
    padding-left: 1.75rem;
    margin: 0.75rem 0;
}
.consent-document-body li { margin-bottom: 0.35rem; }
@media (max-width: 768px) {
    .consent-document { padding: 1.75rem; }
}

/* --- Signup card (Public Self-Service Signup) — echoes the accent-bar
   "signature surface" motif established by .consent-document above; same
   visual grammar, different name, since this isn't a consent document. --- */
.signup-card {
    width: 100%;
    max-width: 460px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-8) var(--space-6);
    position: relative;
}
.signup-card::before {
    content: "";
    position: absolute;
    top: 0; left: var(--space-6); right: var(--space-6);
    height: 3px;
    background: linear-gradient(90deg, var(--accent-hover), var(--accent));
    border-radius: 0 0 4px 4px;
}
.signup-mark {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-serif); font-size: 0.7rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-4);
}
.signup-header h1 {
    font-family: var(--font-serif);
    font-size: 1.625rem;
    color: var(--primary);
    margin: 0 0 var(--space-2);
    line-height: 1.25;
}
.signup-header p.tagline {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin: 0 0 var(--space-6);
    line-height: 1.5;
}
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 480px) {
    .field-row { grid-template-columns: 1fr; }
}
.field-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: var(--space-1);
}
.consent-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-5) 0;
}
.consent-row input[type="checkbox"] {
    width: auto;
    margin-top: 3px;
    accent-color: var(--primary);
}
.consent-row label {
    margin: 0;
    font-weight: 400;
    font-size: 0.8438rem;
    line-height: 1.5;
    color: var(--text-main);
}
.consent-row a { color: var(--primary); text-decoration: underline; }
.signup-submit { width: 100%; margin-top: var(--space-2); }
.signup-footer {
    text-align: center;
    margin-top: var(--space-6);
    font-size: 0.875rem;
    color: var(--text-muted);
}
.signup-footer a { color: var(--primary); font-weight: 500; }

/* --- Sign flow step card (AC6 of Consent Template Design Refresh) --- */
.sign-step {
    max-width: 640px; margin: 0 auto var(--space-6);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
}
.sign-step-label {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-muted); margin-bottom: var(--space-4);
}
.sign-step-label .step-number {
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background-color: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
}
@media (max-width: 768px) {
    .sign-step { padding: var(--space-5) var(--space-4); }
}

/* --- Consent success card (AC6 of Consent Template Design Refresh) --- */
.consent-success {
    max-width: 480px; margin: var(--space-12) auto;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-10) var(--space-6);
    text-align: center;
}
.consent-success-icon {
    width: 4rem; height: 4rem; border-radius: 50%;
    background-color: var(--accent);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-5);
}
.consent-success h1 { font-family: var(--font-serif); }
.consent-success-continue { margin-top: var(--space-6); }

/* --- Editor toolbar (AC4 of Consent Template Design Refresh) --- */
.editor-toolbar {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-2);
    background-color: var(--bg-base);
    border: 1px solid var(--border-soft);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
/* Every toolbar <button> below carries class="toolbar-btn" deliberately —
   components.css's `.btn-primary, button:not([class])` rule (near the top of this file)
   sets a dark fill on any classless <button>. A classless toolbar button would tie that
   selector's specificity and depend on cascade-order luck instead of being unambiguous —
   give every <button> an explicit class, full stop. */
.toolbar-btn {
    width: 2.1rem; height: 2.1rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--text-main);
    cursor: pointer;
}
.toolbar-btn svg {
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
}
.toolbar-btn:hover { background-color: var(--accent); border-color: var(--accent-hover); }
.editor-toolbar .divider { width: 1px; background-color: var(--border-soft); margin: var(--space-1) var(--space-1); }

textarea[data-testid="consent-template-content"] {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.875rem;
}

/* --- Live preview split layout (AC5 of Consent Template Design Refresh) --- */
.editor-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}
@media (max-width: 768px) {
    .editor-split { grid-template-columns: 1fr; }
}
.preview-label {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2);
}
.preview-loading-dot {
    width: 0.4rem; height: 0.4rem; border-radius: 50%;
    background-color: var(--accent-hover);
    opacity: 0; transition: opacity var(--transition);
}
.preview-label.htmx-request .preview-loading-dot { opacity: 1; }

/* --- Wide dialog --- */
.dialog-wide {
    max-width: 900px;
    padding: 2rem;
}

/* --- Clinical photo gallery grid (AC6) --- */
.clinical-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* --- Clinical photo card and thumbnail --- */
.photo-card {
    /* width set by grid; no fixed width needed */
}

.photo-thumb-link {
    display: block;
    position: relative;
}

.photo-thumb-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

.photo-thumb-external-icon {
    position: absolute;
    bottom: 4px;
    right: 4px;
    color: #fff;
    opacity: 0.8;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.5));
}

.photo-view-tag-badge {
    display: inline-block;
    background-color: var(--accent);
    color: var(--primary);
    border-radius: var(--radius-sm);
    padding: 0.125rem 0.375rem;
    letter-spacing: 0.03em;
}

/* --- Inline delete confirmation (AC3) --- */
.delete-confirm {
    display: none;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.delete-confirm.visible {
    display: flex;
}

/* --- Alert edit area (AC2) --- */
.alert-edit-area {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--accent-hover);
}

.alert-edit-area summary {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.alert-edit-area summary::-webkit-details-marker { display: none; }

/* The alert banner keeps its label and Set/Edit control on the same baseline. */
.clinical-alert-banner .alert-edit-area {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-left: auto;
}

.alert-edit-form {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* --- Past appointment row (AC11) --- */
.appt-past {
    color: var(--text-muted);
    font-style: italic;
}

.appt-past .btn {
    display: none;
}

.badge-past {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.375rem;
}

/* --- Comparison dialog spinner (AC12) --- */
.dialog-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-8);
}

/* --- Empty State --- */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-8);
    color: var(--text-muted);
}

.empty-state p {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

/* --- Section header within main content --- */
.section-header {
    margin-bottom: var(--space-6);
}

.section-header h2 {
    margin-bottom: var(--space-1);
}

.section-header p {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

/* --- Hero intro (e.g. public booking landing) --- */
.hero {
    margin-bottom: var(--space-8);
    text-align: center;
    padding: var(--space-8) var(--space-6);
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-base) 100%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.hero h2 {
    font-family: var(--font-serif);
    margin-bottom: var(--space-2);
}

.hero p {
    color: var(--text-muted);
    font-size: 0.9375rem;
    max-width: 600px;
    margin: 0 auto;
}

/* --- Signature Pad --- */
.signature-pad {
    border: 1.5px dashed var(--border-soft);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    background-color: var(--bg-base);
    overflow: hidden;
}

#signature-canvas {
    width: 100%;
    height: 200px;
    touch-action: none;
    display: block;
}

.signature-controls {
    margin-bottom: var(--space-4);
}

/* --- Modal overlay --- */
.modal {
    display: none;
    position: fixed;
    z-index: 200;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-color: rgb(0 0 0 / 0.4);
    backdrop-filter: blur(2px);
}

.modal-content {
    background-color: var(--bg-surface);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    margin: auto;
    width: min(90%, 560px);
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-content h3 {
    margin-bottom: var(--space-6);
}

.modal-dialog-form {
    background-color: var(--bg-surface);
    padding: var(--space-8);
    border: 0;
    border-radius: var(--radius-lg);
    margin: auto;
    width: min(90%, 560px);
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    color: inherit;
}

.modal-dialog-form::backdrop {
    background-color: rgb(0 0 0 / 0.4);
    backdrop-filter: blur(2px);
}

.modal-dialog-form h3 {
    margin-bottom: var(--space-6);
}

/* --- Button group --- */
.button-group {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

/* --- HTMX Indicators --- */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in-out;
    pointer-events: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

.spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-soft);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.btn-spinner {
    margin-left: var(--space-2);
    vertical-align: middle;
}

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

.pulse {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* --- Pathway clinician timeline (horizontal spine of stage-nodes) --- */
.pathway-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--space-6);
}

.pathway-timeline-node {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 8rem;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
}

/* AC3: the connector before a stage carries the spine state; an unmet documentation gate
   fractures it with a seam (lock chip + dashed amber connector). The first stage has no
   spine line before it, but its gate (if any) still renders. */
.pathway-timeline-node:first-child .pathway-timeline-connector[data-state="continuous"] {
    display: none;
}

.pathway-timeline-connector {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    width: var(--space-6);
    height: 2px;
    background: var(--border-soft);
}

.pathway-timeline-connector[data-state="blocked"] {
    background: transparent;
    border-top: 2px dashed var(--color-warning);
}


.pathway-timeline-node--locked {
    border-color: #FDE68A;
}

.pathway-timeline-node--gated {
    background: #FFFBEB;
    border-color: #FDE68A;
    box-shadow: 0 0 0 4px rgb(245 158 11 / 0.14);
}

.pathway-timeline-node--ready {
    background: var(--success-bg);
    border-color: var(--success-border);
    box-shadow: 0 0 0 4px rgb(22 101 52 / 0.10);
}

/* AC6: a voided stage is struck through and dimmed, and is inert on the spine */
.pathway-timeline-node--voided {
    opacity: 0.5;
    text-decoration: line-through;
}

.pathway-timeline-node-type {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.pathway-timeline-node-label {
    font-family: var(--font-serif);
    color: var(--text-main);
}

/* AC5: per-requirement readiness and produced-artifact links on the node */
.pathway-timeline-node-requirements,
.pathway-timeline-node-artifacts {
    list-style: none;
    padding: 0;
    margin: var(--space-1) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* --- Pathway calendar view (week-grid of scheduled stages) — AC2 --- */
/* AC4: previous/next week navigation bar */
.pathway-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.pathway-calendar-nav button {
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pathway-calendar-nav button:hover {
    background: var(--bg-base);
}

.pathway-calendar-nav-label {
    font-weight: 600;
    color: var(--primary);
}

.pathway-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

.pathway-calendar-day {
    background: var(--bg-surface);
    min-height: 110px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pathway-calendar-day-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.pathway-calendar-stage {
    font-size: 0.72rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    border: 1px solid var(--border-soft);
    line-height: 1.3;
}

/* Node-state colour keying, mirroring the linear timeline's badge semantics */
.pathway-calendar-stage[data-state="delivered"] { border-left: 3px solid var(--success-border); }
.pathway-calendar-stage[data-state="scheduled"] { border-left: 3px solid var(--primary); }
.pathway-calendar-stage[data-state="voided"] { border-left: 3px solid var(--text-muted); text-decoration: line-through; opacity: 0.6; }

/* AC4: empty-week state — the grid renders with no error, just no stage chips */
.pathway-calendar-empty-note {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: var(--space-3) 0;
}

/* Practice-wide pathway calendar (practice-wide-pathway-calendar, AC3) — a single grid merges
   stages across every client/pathway in the practice, so unlike the single-pathway
   .pathway-calendar-stage chip above, each stage card here must show its own client + pathway
   to stay unambiguous. Reuses the same node-state colour tokens, not new ones. */
.practice-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

.practice-calendar-day {
    background: var(--bg-surface);
    min-height: 150px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.practice-calendar-day-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.practice-calendar-stage {
    font-size: 0.72rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    border: 1px solid var(--border-soft);
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.practice-calendar-stage:hover,
.practice-calendar-month-chip:hover {
    filter: brightness(0.97);
}

.practice-calendar-stage-client {
    font-weight: 600;
    color: var(--primary);
    display: block;
}

.practice-calendar-stage-pathway {
    color: var(--text-muted);
    font-size: 0.68rem;
    display: block;
    margin-bottom: 0.15rem;
}

.practice-calendar-stage[data-state="delivered"] { border-left: 3px solid var(--success-border); }
.practice-calendar-stage[data-state="scheduled"] { border-left: 3px solid var(--primary); }
.practice-calendar-stage[data-state="voided"] { border-left: 3px solid var(--text-muted); text-decoration: line-through; opacity: 0.6; }

/* Inline pathway selection: the practice calendar uses the approved operational-rail visual
   contract rather than reusing the clinician profile's compact node cards. */
.practice-calendar-stage--selected {
    background: var(--accent);
    border-color: var(--accent-hover);
    box-shadow: 0 0 0 1px var(--accent-hover);
}

.practice-calendar-inline-pathway {
    margin-top: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(233, 213, 218, 0.32), var(--bg-surface) 34%);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.practice-calendar-inline-pathway-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
}

.practice-calendar-inline-pathway-kicker,
.practice-calendar-inline-rail-kind {
    color: #c99ca8;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.practice-calendar-inline-pathway-title {
    margin: 0.2rem 0 0;
    color: var(--primary);
    font-family: var(--font-serif);
    font-size: 1.45rem;
}

.practice-calendar-inline-pathway-meta,
.practice-calendar-inline-rail-timing {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: var(--space-1) 0 0;
}

.practice-calendar-inline-pathway-body {
    border-top: 1px solid var(--border-soft);
    padding-top: var(--space-4);
}

.practice-calendar-inline-rail-scroll { overflow-x: auto; padding: 0.4rem 0.25rem 1rem; }

.practice-calendar-inline-rail {
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    min-width: 700px;
    padding: 0;
    margin: 0;
}

.practice-calendar-inline-rail-stage { position: relative; padding-top: 3.1rem; }
.practice-calendar-inline-rail-spine { position: absolute; top: 1rem; left: 0; right: 0; height: 2px; background: #c99ca8; }
.practice-calendar-inline-rail-stage:first-child .practice-calendar-inline-rail-spine { left: 50%; }
.practice-calendar-inline-rail-stage:last-child .practice-calendar-inline-rail-spine { right: 50%; }
.practice-calendar-inline-rail-stage--locked .practice-calendar-inline-rail-spine { background: repeating-linear-gradient(90deg, #b8893b 0 5px, transparent 5px 11px); }
.practice-calendar-inline-rail-node { position: absolute; top: 0.35rem; left: calc(50% - 10px); z-index: 1; width: 20px; height: 20px; border: 2px solid #c99ca8; border-radius: 50%; background: var(--bg-surface); color: transparent; }
.practice-calendar-inline-rail-stage--done .practice-calendar-inline-rail-node { background: var(--primary); border-color: var(--primary); }
.practice-calendar-inline-rail-gate { position: absolute; top: -0.05rem; left: -1.1rem; z-index: 2; border: 1px solid #b8893b; border-radius: 999px; padding: 0.2rem 0.5rem; background: var(--bg-surface); color: #b8893b; font-size: 0.7rem; }
.practice-calendar-inline-rail-card { min-height: 180px; margin: 0 0.7rem; padding: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 5px 12px -7px rgba(31, 41, 55, 0.18); }
.practice-calendar-inline-rail-stage--locked .practice-calendar-inline-rail-card { border-color: #ecdcc2; }
.practice-calendar-inline-rail-stage-label { margin: 0.25rem 0; color: var(--primary); font-family: var(--font-serif); font-size: 1.05rem; }
.practice-calendar-inline-rail-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: var(--space-3); }

/* AC6: toolbar + Week/Month view toggle. Segmented-control look mirrors .profile-tab-bar, but is
   defined standalone since the shipped toggle is a plain .practice-calendar-view-toggle wrapper
   around two <a> links, not the .profile-tab-bar component itself. */
.practice-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.practice-calendar-view-toggle {
    display: flex;
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 0.25rem;
    gap: 0.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
}

.practice-calendar-view-toggle a {
    flex: 1;
    text-align: center;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
}

.practice-calendar-view-toggle a.active {
    background: var(--primary);
    color: #FFFFFF;
    font-weight: 600;
}

/* AC5/AC6: previous/next nav — this same markup (.practice-calendar-nav /
   .practice-calendar-nav-label) is reused verbatim for both week and month navigation. */
.practice-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.practice-calendar-nav a {
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    color: var(--text-main);
    text-decoration: none;
    cursor: pointer;
}

.practice-calendar-nav a:hover {
    background: var(--bg-base);
}

.practice-calendar-nav-label {
    font-weight: 600;
    color: var(--primary);
}

/* AC6: month grid — same TimelineStage data as the week grid, grouped by calendar day within a
   7-column/N-row month layout instead of a single week row. The shipped markup has no
   weekday-header row (unlike the storyboard mockup) since each cell already shows its own date. */
.practice-calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

.practice-calendar-month-day {
    background: var(--bg-surface);
    min-height: 88px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.practice-calendar-month-day--outside {
    background: var(--bg-base);
    opacity: 0.5;
}

.practice-calendar-month-day-date {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.practice-calendar-month-chip {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    border: 1px solid var(--border-soft);
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

/* Same node-state colour mapping as .practice-calendar-stage, so Week and Month views agree
   visually (AC6: "Node-state styling... are unaffected by which view is active"). */
.practice-calendar-month-chip[data-state="delivered"] { border-left: 3px solid var(--success-border); }
.practice-calendar-month-chip[data-state="scheduled"] { border-left: 3px solid var(--primary); }
.practice-calendar-month-chip[data-state="voided"] { border-left: 3px solid var(--text-muted); text-decoration: line-through; opacity: 0.6; }

.practice-calendar-month-overflow {
    font-size: 0.65rem;
    color: var(--text-muted);
    padding: 0.1rem 0.4rem;
    text-decoration: none;
    cursor: pointer;
}

/* Below ~640px a 7-column grid leaves ~43px per day — too narrow for a stage card's
   client/pathway/event/badge stack to stay legible. Collapse both grids to a single stacked
   column instead; the existing gap:1px/background:border-soft grid trick keeps working as a
   row divider with only one column, so no markup change is needed. */
@media (max-width: 640px) {
    .practice-calendar-grid,
    .practice-calendar-month-grid {
        grid-template-columns: 1fr;
    }

    .practice-calendar-day,
    .practice-calendar-month-day {
        min-height: 0;
    }

    /* Stacked to one column, a month is 42 rows; the ~11 leading/trailing outside-month
       padding days add scroll for no content, so hide them here (they stay visible in the
       multi-column desktop grid where they're needed to keep week rows aligned). */
    .practice-calendar-month-day--outside {
        display: none;
    }
}

.practice-calendar-month-overflow:hover {
    color: var(--primary);
}

/* AC4: unscheduled stages grouped by client, so a busy Unscheduled list stays scannable. */
.practice-calendar-unscheduled {
    padding: var(--space-4);
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg-surface);
    margin-top: var(--space-4);
}

.practice-calendar-unscheduled h4 {
    margin: 0 0 var(--space-3);
    font-size: 1rem;
    color: var(--primary);
    font-family: var(--font-serif);
}

.practice-calendar-unscheduled-group {
    margin-bottom: var(--space-3);
}

.practice-calendar-unscheduled-group:last-child {
    margin-bottom: 0;
}

.practice-calendar-unscheduled-group-client {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-main);
    margin: 0 0 0.35rem;
}

.practice-calendar-unscheduled-item {
    font-size: 0.82rem;
    padding: 0.4rem 0.6rem 0.4rem 1.5rem;
    border-bottom: 1px solid var(--border-soft);
}

.practice-calendar-unscheduled-item:last-child {
    border-bottom: none;
}

.practice-calendar-unscheduled-item-pathway {
    color: var(--text-muted);
    font-size: 0.72rem;
    display: block;
}

/* --- Pathway patient timeline (vertical narrative, magic-link, PII-light) --- */
.pathway-patient-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
}

.pathway-patient-timeline-stage {
    position: relative;
    padding: 0 0 var(--space-6) var(--space-8);
}

.pathway-patient-timeline-stage::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 0.25rem;
    bottom: -0.5rem;
    width: 2px;
    background: var(--accent-hover);
}

.pathway-patient-timeline-stage:last-child::before {
    display: none;
}

.pathway-patient-timeline-stage::after {
    content: "";
    position: absolute;
    left: 0.1875rem;
    top: 0.125rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 2px solid var(--accent-hover);
}

/* AC3: the gated stage renders dimmed and its node/spine pick up the gate's amber */
.pathway-patient-timeline-stage--locked::before,
.pathway-patient-timeline-stage--locked::after {
    border-color: #FDE68A;
    background: repeating-linear-gradient(#FDE68A 0 5px, transparent 5px 11px);
}

.pathway-patient-timeline-stage--locked::after {
    background: var(--bg-surface);
}

.pathway-patient-timeline-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
}

.pathway-patient-timeline-stage--locked .pathway-patient-timeline-card {
    opacity: 0.6;
}

/* patient-timeline-first-stage-context: static, non-tracked "pending" stage — dashed/muted node
   and card so it can never be mistaken for an actual scheduled appointment. */
.pathway-patient-timeline-stage--pending::after {
    border-style: dashed;
    border-color: #cfcaca;
    background: var(--bg-surface);
}

.pathway-patient-timeline-stage--pending .pathway-patient-timeline-card {
    border-style: dashed;
    box-shadow: none;
    background: transparent;
}

.pathway-patient-timeline-stage--pending .pathway-patient-timeline-label {
    color: var(--text-muted);
    font-size: 1rem;
}

.pathway-patient-timeline-note {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pathway-patient-timeline-when {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-hover-text);
    font-weight: 600;
}

.pathway-patient-timeline-label {
    font-family: var(--font-serif);
    color: var(--primary);
    margin: var(--space-1) 0 0;
}

.pathway-patient-timeline-state {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* AC3: the gate is a seam on the spine — informational only, no links or CTAs (D5) */
.pathway-patient-timeline-gate {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: #FFFBEB;
    border: 1px dashed #FDE68A;
    border-radius: var(--radius-md);
    color: #B45309;
}

.pathway-patient-timeline-gate i {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
}

.pathway-patient-timeline-gate-text {
    margin: 0 0 var(--space-1);
    font-size: 0.85rem;
}

.pathway-patient-timeline-requirement {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    margin-right: var(--space-2);
}

.pathway-patient-timeline-requirement + .pathway-patient-timeline-requirement::before {
    content: ", ";
}

/* --- Date strip (booking date navigation) --- */
.date-strip {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-6);
}

.date-chip {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    width: 4rem;
    padding: var(--space-3) var(--space-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface);
    text-decoration: none;
    color: var(--text-main);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.date-chip:hover {
    border-color: var(--accent-hover);
}

.date-chip.selected {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #FFFFFF;
}

.date-chip .dow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.date-chip.selected .dow {
    color: #FFFFFF;
}

.date-chip .dom {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
}

.date-chip .avail-dots {
    display: flex;
    gap: 0.1875rem;
}

.date-chip .avail-dots .dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: var(--border-soft);
}

.date-chip .avail-dots .dot.on {
    background-color: var(--accent-hover);
}

.date-chip.selected .avail-dots .dot.on {
    background-color: var(--accent);
}

/* --- Booking Slot Groups & Pills --- */
.slot-group {
    margin-bottom: var(--space-4);
}

.slot-group-title {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.slot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Each slot is a form posting the booking (AC1, pathway-magic-link-self-scheduling B2). The
   form itself contributes no box: display: contents makes its .slot-pill button the actual
   flex item, matching the layout of the plain <span class="slot-pill"> it replaced. */
.slot-pill-form {
    display: contents;
}

.slot-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: 9999px;
    background-color: var(--bg-surface);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.slot-pill:hover {
    background-color: var(--bg-base);
    border-color: var(--accent-hover);
    color: var(--primary);
}

.slot-pill.selected {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #FFFFFF;
}

.slot-pill.taken {
    background-color: var(--border-soft);
    border-color: var(--border-soft);
    color: var(--text-muted);
    cursor: not-allowed;
}

.slot-pill.taken:hover {
    background-color: var(--border-soft);
    border-color: var(--border-soft);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* --- Public booking sticky summary bar --- */
.booking-sticky-summary {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -16px 40px -28px rgb(31 41 55 / 0.45);
    display: none;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition), opacity var(--transition);
}

.booking-sticky-summary.visible {
    display: block;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.booking-sticky-summary-inner {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.booking-sticky-summary-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.booking-sticky-summary-info .label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.booking-sticky-summary .disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* --- Step Indicator (booking flow) --- */
.step-indicator {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    background-color: var(--bg-surface);
}

.step-label {
    font-size: 0.875rem;
}

.step.active {
    color: var(--text-main);
    font-weight: 600;
}

.step.active .step-number {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--bg-surface);
}

.step.completed {
    color: var(--text-main);
}

.step.completed .step-number {
    background-color: var(--accent);
    border-color: var(--accent-hover);
    color: var(--primary);
}

/* --- Confirmed Card and Layout (Booking Confirmed) --- */
.confirmed-card {
    text-align: center;
    padding: var(--space-10);
    max-width: 600px;
    margin: var(--space-8) auto;
}

.confirmed-icon {
    margin-bottom: var(--space-6);
    display: flex;
    justify-content: center;
}

.confirmed-icon i,
.confirmed-icon svg {
    width: var(--space-12);
    height: var(--space-12);
    color: var(--success-text);
}

.confirmed-icon.icon-error i,
.confirmed-icon.icon-error svg {
    color: var(--error);
}

.confirmed-lead {
    font-size: 1.25rem;
    color: var(--text-main);
    margin-top: var(--space-4);
    margin-bottom: var(--space-6);
}

.confirmed-actions {
    margin-top: var(--space-8);
}

/* --- Clinician & Patient Timelines mobile responsiveness --- */
@media (max-width: 768px) {
    /* Patient timeline vertical spacing optimization */
    .pathway-patient-timeline {
        --rail: 12px;
    }
    .pathway-patient-timeline-stage {
        padding: 0 0 var(--space-6) calc(var(--rail) + 16px);
    }
    .pathway-patient-timeline-stage::before {
        left: var(--rail);
    }
    .pathway-patient-timeline-stage::after {
        left: calc(var(--rail) - 5px);
    }

    /* Clinician timeline mobile vertical layout */
    .pathway-timeline {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .pathway-timeline-node {
        margin-left: 28px; /* shift cards to the right of the vertical line */
        margin-bottom: 24px; /* vertical space between cards */
        min-width: 0;
    }
    .pathway-timeline-connector {
        position: absolute;
        top: -24px; /* cover the vertical gap between cards */
        left: -16px; /* centered at 12px from timeline container (28px - 16px) */
        width: 2px;
        height: 24px; /* vertical line spanning the gap */
        right: auto;
        transform: none;
    }
    .pathway-timeline-connector[data-state="blocked"] {
        background: transparent;
        border-top: none;
        border-left: 2px dashed var(--color-warning);
    }
    
    /* Responsive internal layout changes for cards */
    .c-treatment-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .c-treatment-price {
        font-size: 0.82rem;
        color: var(--text-muted);
    }
    .session-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .session-charge {
        align-self: flex-start;
    }
    .c-totals {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin-top: 16px;
        width: 100%;
    }
}

/* --- Clinical Profile (AC1): segmented tab bar --- */
.profile-tab-bar {
    display: flex;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 0.25rem;
    gap: 0.25rem;
    box-shadow: var(--shadow-sm);
    max-width: 420px;
}

.note-context-toggle {
    max-width: 280px;
}

/* Keep the first card from touching the segmented selector. */
.profile-tab-bar + div {
    margin-top: var(--space-4);
}

.calendar-view-tab-bar {
    width: 100%;
    max-width: none;
    margin-bottom: var(--space-4);
    position: relative;
}

.calendar-pathways-panel {
    display: none;
}

.calendar-pathways-panel.is-visible {
    display: block;
}

/* The htmx-indicator hides via opacity (not display:none) so it can fade in, but as a plain
   flex sibling that still steals space from the two flex:1 tab links, leaving both short of the
   pill's actual right edge. Take it out of flex flow instead. */
.calendar-view-tab-bar .htmx-indicator {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
}

.workspace-tab-bar {
    width: 100%;
}

.profile-tab-bar form {
    flex: 1;
    margin: 0;
}

.profile-tab-bar a,
.profile-tab-bar button {
    flex: 1;
    width: 100%;
    text-align: center;
    padding: 0.5rem 0;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.profile-tab-bar a.active,
.profile-tab-bar button.active {
    background: var(--primary);
    color: #FFFFFF;
    font-weight: 600;
}

.profile-tab-bar a.active [data-testid="profile-tab-active"] {
    background: inherit;
}

/* --- Clinical Profile (AC3): collapsible profile-section cards --- */
.stacked-sections > * + * {
    margin-top: var(--space-4);
}

.stacked-sections > .profile-section {
    margin-bottom: 0;
}

.profile-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
    overflow: hidden;
}

.profile-section > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.profile-section > summary::-webkit-details-marker {
    display: none;
}

.profile-section-title {
    font-family: 'Playfair Display', serif;
    color: var(--primary);
    font-weight: 600;
}

.profile-section-status {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.profile-section > summary .chevron {
    transition: transform 150ms ease;
    color: var(--text-muted);
    flex-shrink: 0;
}

.profile-section[open] > summary .chevron {
    transform: rotate(180deg);
}

.profile-section-body {
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid var(--border-soft);
    padding-top: var(--space-4);
}

.profile-section[open] > summary .profile-section-status {
    display: none;
}

/* Pathway entry state: explain the purpose before asking for a pathway name. */
.pathway-empty-state {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-base);
}

.pathway-empty-state__copy {
    max-width: 46rem;
}

.pathway-empty-state__title {
    margin: 0;
    font-family: var(--font-heading);
    color: var(--primary);
}

.pathway-empty-state__text {
    margin: var(--space-2) 0 0;
    color: var(--text-main);
}

.pathway-list-heading {
    margin: var(--space-5) 0 var(--space-2);
    font-family: var(--font-heading);
    color: var(--primary);
}

.pathway-list-heading:first-of-type {
    margin-top: 0;
}

.pathway-summary {
    width: 100%;
}

.pathway-summary > summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pathway-summary .profile-section-status {
    margin-left: auto;
}

.pathway-summary > summary > div {
    min-width: 0;
}

.pathway-summary .profile-section-body {
    display: grid;
    gap: var(--space-3);
}

.pathway-closed-list {
    opacity: 0.9;
}

.pathway-create-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-3);
}

.pathway-create-form > div {
    display: grid;
    gap: var(--space-1);
}

.pathway-create-form label {
    display: block;
    font-weight: 600;
}

.pathway-create-form .btn {
    min-height: 44px;
}

.pathway-create-form--compact {
    margin-bottom: var(--space-6);
}

@media (max-width: 768px) {
    .pathway-create-form {
        grid-template-columns: 1fr;
    }

    .pathway-create-form .btn {
        width: 100%;
    }

    .pathway-summary > summary {
        align-items: flex-start;
    }

    .pathway-summary .profile-section-status {
        margin-left: 0;
    }
}

/* AC6: bounded, wrapping display for a long generated share-link URL */
.pathway-share-link-url {
    font-family: monospace;
    font-size: 0.8rem;
    background: var(--bg-base);
    padding: 6px 10px;
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-sm);
    word-break: break-all;
    max-width: 100%;
    min-width: 0;
}

/* --- Clinical Profile (AC5): per-photo progressive disclosure --- */

.photo-manage > summary {
    list-style: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.photo-manage > summary::-webkit-details-marker {
    display: none;
}
.photo-manage-body {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.photo-view-tag-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.photo-view-tag-field label {
    flex: 0 0 auto;
    margin-bottom: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.photo-view-tag-field select {
    flex: 1;
    min-width: 0;
    width: auto;
}

/* --- Billing Banner --- */
.page-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    color: var(--text-main);
    background: var(--accent);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
}

.page-hint .btn-dismiss {
    flex: 0 0 auto;
    align-self: center;
    color: var(--text-muted);
}

.page-hint .btn-dismiss:disabled {
    opacity: 0.5;
    cursor: wait;
}

.billing-banner {
    background-color: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9375rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.billing-banner.urgent {
    background-color: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}
.billing-banner .billing-banner-text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
    min-width: 0;
}
.billing-banner .billing-banner-message {
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.billing-banner a.btn {
    flex-shrink: 0;
}
.billing-banner .btn-dismiss {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Injection mapping --- */
.injection-map-container {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: white;
}
.injection-map-stage {
    position: relative;
    cursor: crosshair;
}
.injection-map-stage-unavailable {
    min-height: 12rem;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem 1.5rem;
}
.injection-map-reference-unavailable {
    text-align: center;
}
.injection-map-reference-unavailable [data-lucide] {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.55;
}
.injection-map-reference-unavailable p {
    margin: 0.25rem 0;
}
.injection-map-expand { position: absolute; z-index: 2; top: var(--space-2); right: var(--space-2); background: color-mix(in srgb, var(--bg-surface) 90%, transparent); }
.injection-map-print-header { display: none; }
.modal-dialog { width: min(900px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); margin: auto; overflow: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); }
.modal-dialog::backdrop { background: rgb(0 0 0 / 0.35); }
.injection-map-dialog-close { position: absolute; z-index: 3; top: var(--space-2); right: var(--space-2); min-width: 2.5rem; font-size: 1.5rem; line-height: 1; background: color-mix(in srgb, var(--bg-surface) 90%, transparent); }
.anatomical-template-photo {
    display: block;
    width: 100%;
    height: auto;
}
.injection-pins-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.pin-halo { fill: white; opacity: 0.85; }
.pin-body { fill: var(--primary); }
.pin-label { fill: white; font-size: 3px; font-weight: 700; }
.point-list { border-top: 1px solid var(--border-soft); }
.point-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--border-soft); }
.pin-cell { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: 50%; background: var(--primary); color: white; font-weight: 700; }
.point-row-details { min-width: 0; flex: 1; }
.point-row-primary { font-weight: 600; }
.point-row-secondary { color: var(--text-muted); font-size: 0.875rem; }
.injection-empty-state { padding: var(--space-6); text-align: center; color: var(--text-muted); }
.injection-empty-state h3 { margin: var(--space-2) 0 0; color: var(--text-color); }
.injection-empty-state p { margin: var(--space-1) 0 0; }

@media print {
    @page { margin: 12mm; }

    body {
        background: white !important;
        color: #111827 !important;
    }

    nav,
    .app-nav,
    .skip-link,
    .billing-banner,
    .injection-history-actions,
    input[data-testid="injection-map-compare-checkbox"],
    label:has(input[data-testid="injection-map-compare-checkbox"]),
    .btn,
    button,
    dialog,
    .modal-dialog,
    .injection-map-print-action,
    .injection-map-expand,
    .injection-map-dialog-close,
    .chevron {
        display: none !important;
    }

    body:has(#latest-injection-map) main > *:not(:has(#latest-injection-map)),
    body:has(#latest-injection-map) .profile-section:not(#latest-injection-map),
    body.printing-single-injection-map main > *:not(.is-printing-injection-map):not(:has(.is-printing-injection-map)),
    body.printing-single-injection-map .profile-section:not(#latest-injection-map):not(:has(.is-printing-injection-map)) {
        display: none !important;
    }

    body:has(#latest-injection-map) main > *:has(#latest-injection-map),
    body.printing-single-injection-map main > *:has(.is-printing-injection-map),
    body.printing-single-injection-map #latest-injection-map,
    body.printing-single-injection-map #latest-injection-map .profile-section-body,
    .is-printing-injection-map,
    .is-printing-injection-map .injection-map-container,
    .is-printing-injection-map .injection-map-stage,
    .is-printing-injection-map .point-list,
    .injection-map-print-header {
        display: block !important;
    }

    .injection-map-print-header {
        margin-bottom: 0.75rem;
        color: #111827 !important;
    }

    .profile-section,
    .card,
    .injection-map-container {
        box-shadow: none !important;
        border-color: #d1d5db !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .injection-map-container {
        max-width: 100% !important;
        overflow: visible !important;
    }

    .injection-map-stage {
        cursor: default !important;
    }

    .anatomical-template-photo,
    .injection-pins-overlay,
    .point-list,
    .point-row {
        visibility: visible !important;
    }

    .point-list {
        border-top: 1px solid #d1d5db !important;
    }

    .point-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* --- Getting Started onboarding page --- */
.getting-started-page {
    display: grid;
    gap: var(--space-6);
}
.gs-hero,
.gs-cta {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, white), var(--bg-surface));
    padding: clamp(var(--space-5), 5vw, var(--space-8));
    box-shadow: var(--shadow-sm);
}
.gs-hero h1,
.gs-cta h2 {
    margin: var(--space-2) 0;
}
.gs-lede {
    max-width: 58rem;
    color: var(--text-muted);
    font-size: 1.125rem;
}
.gs-eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.gs-section {
    display: grid;
    gap: var(--space-5);
}
.gs-section-copy p:last-child {
    max-width: 60rem;
    color: var(--text-muted);
}
.gs-pathway {
    width: 100%;
    height: auto;
}
.gs-pathway-mobile {
    display: none;
}
.gs-link {
    fill: none;
    stroke: var(--primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 2000;
    animation: gs-draw 900ms ease-out both;
}
.gs-link-dashed {
    stroke-dasharray: 12 12;
}
.gs-node rect {
    fill: var(--bg-surface);
    stroke: var(--border-soft);
    stroke-width: 2;
}
.gs-node-primary rect {
    fill: color-mix(in srgb, var(--primary) 12%, white);
    stroke: var(--primary);
}
.gs-node text {
    fill: var(--text-color);
    font-size: 16px;
    font-weight: 700;
    text-anchor: middle;
}
.gs-node text + text {
    fill: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}
.gs-rhythm {
    border-left: 4px solid var(--primary);
    margin: 0;
    padding-left: var(--space-4);
    color: var(--text-muted);
    font-weight: 600;
}
.gs-space-note {
    font-size: 0.88rem;
    color: var(--text-color);
    margin: 0 0 var(--space-6);
    max-width: 34rem;
    line-height: 1.6;
}
.gs-pill-echo {
    display: inline-flex;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    overflow: hidden;
    vertical-align: middle;
    margin: 0 2px;
}
.gs-pill-echo span {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 10px;
    color: var(--text-muted);
}
.gs-pill-echo span.on {
    background: var(--primary);
    color: #fff;
}
.gs-group-label {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--primary);
    margin: 0 0 var(--space-3);
}
.gs-shelf {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
}
.gs-shelf:last-child {
    margin-bottom: 0;
}
.gs-shelf-item {
    flex: 1 1 15rem;
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    border-left: 1px solid var(--border-soft);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--transition);
}
.gs-shelf-item:first-child {
    border-left: none;
}
.gs-shelf-item:hover {
    background-color: var(--bg-base);
}
.gs-shelf-icon {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 2px;
}
.gs-shelf-item:hover .gs-shelf-icon {
    color: var(--primary);
}
.gs-shelf-title {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--primary);
    font-size: 1rem;
    margin: 0 0 2px;
}
.gs-shelf-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}
.gs-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.gs-cta p:last-child {
    margin-bottom: 0;
    color: var(--text-muted);
}
@keyframes gs-draw {
    from { stroke-dashoffset: 2000; }
    to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .gs-link { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 768px) {
    .gs-pathway-desktop { display: none; }
    .gs-pathway-mobile { display: block; }
    .gs-space-grid,
    .gs-cta { grid-template-columns: 1fr; display: grid; }
}

/* --- Template inline-style migration (app-wide spacing pass) --- */
/* These named classes keep legacy template presentation in CSS while the templates remain markup-only. */
.icon-lg { width:1.25rem; height:1.25rem; }
.medical-history-question-card { background-color: var(--bg-card); border-radius: 8px; }
.roster-table { width: 100%; border-collapse: collapse; }
.inline-content { display:inline; }
.roster-hours-cell { padding: 8px 0 8px 12px; text-align: right; }
.soap-metadata { font-family: var(--font-sans); }
.compact-paragraph { margin:0; }
.injection-point-overlay { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; }
.nav-status-icon { width:1.1rem; height:1.1rem; flex-shrink:0; }
.step-count-input { max-width: 120px; }
.icon-size-085 { width:0.85rem; height:0.85rem; }
.page-section-spacing { margin-top: var(--space-6); }
.roster-availability-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.roster-shift-row { border-bottom: 1px solid var(--border-soft); display: none; }
.logout-button { background:none; border:none; color:var(--text-main); font:inherit; cursor:pointer; display:flex; align-items:center; gap:0.375rem; }
.icon-size-1 { width:1rem; height:1rem; }
.roster-weekday-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-weight: 600; font-size: 0.8rem; color: var(--text-muted); }
.injection-point-form { pointer-events: auto; position: absolute; z-index: 100; background: white; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem; box-shadow: var(--shadow-lg); width: 250px; }
@media (max-width: 768px) {
    .injection-map-container:has(.injection-point-form) { overflow: visible; }
    .injection-point-overlay { position: static; }
    .injection-point-form {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: var(--space-2);
    }
}
.practice-logo { max-height:2.25rem; max-width:12rem; width:auto; height:auto; object-fit:contain; vertical-align:middle; }
.status-cancelled { background-color: var(--status-cancelled-bg); color: var(--status-cancelled-text); }
.status-active { background-color: var(--status-active-bg); color: var(--status-active-text); }
.heading-emphasis { font-weight: 600; }
.legal-document-title { margin-top: var(--space-4); margin-bottom: var(--space-4); font-family: var(--font-serif); font-size: 2rem; color: var(--text-main); }
.practice-active-badge { background-color: var(--status-active-bg); color: var(--status-active-text); padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; }
.legal-notice-spacing { margin-bottom: var(--space-6); }
.is-hidden { display:none; }
.icon-size-0875 { width:0.875rem; height:0.875rem; }
.icon-size-1-flex { width:1rem; height:1rem; flex-shrink:0; }
.booking-url-display { font-family: monospace; background: var(--bg-base); padding: 8px 12px; border: 1px dashed var(--border-soft); border-radius: var(--radius-sm); word-break: break-all; }
.roster-cell-padding { padding: 8px 12px 8px 0; }
.icon-size-11 { width:1.1rem; height:1.1rem; }
.label-no-bottom-margin { margin-bottom:0; }
.roster-form-label { display: block; font-weight: 500; margin-bottom: 4px; }
.roster-day-number { font-size: 0.875rem; font-weight: 600; color: var(--text-main); }
.clinical-alert-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.comparison-image { max-width: 100%; border-radius: 0.5rem; }
.icon-size-075 { width:0.75rem; height:0.75rem; }
.photo-external-icon { width:0.625rem; height:0.625rem; }
.clinical-review-warning { display: flex; align-items: center; gap: 0.5rem; background-color: var(--status-warning-bg); border: 1px solid var(--status-pending-bg); color: var(--status-warning-strong); padding: 1rem; border-radius: 6px; margin-bottom: 1.5rem; }
.inline-form { display: inline-block; margin: 0; padding: 0; }
.external-link-icon { width:0.875rem; height:0.875rem; vertical-align:middle; margin-right:0.375rem; }
.billing-heading-icon { width:1rem; height:1rem; vertical-align:middle; margin-right:0.375rem; }
.step-submit-button { align-self: flex-start; }
.brand-icon { display:inline-block; width:1rem; height:1rem; vertical-align:middle; margin-right:0.375rem; }
.practice-empty-state { max-width: 600px; margin: 3rem auto; }
.billing-lock-icon { width:28px; height:28px; }
.medical-history-heading { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; }
.roster-calendar-day { min-height: 85px; padding: 8px; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; transition: all 150ms ease; }
.status-past-due { background-color: var(--status-warning-bg); color: var(--status-warning-text); border-color: var(--status-warning-border); }
.status-pending { background-color: var(--status-pending-bg); color: var(--status-warning-text); }
.roster-input { width: 100%; padding: 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.appointment-readiness-icon { width:1.5rem; height:1.5rem; flex-shrink:0; }
.home-action-icon { width:1.25rem; height:1.5rem; }
.roster-hours-header { padding: 8px 12px 8px 0; text-align: left; }
.medical-history-submit { display: flex; align-items: center; gap: 0.5rem; justify-content: center; }
.roster-row-divider { border-bottom: 1px solid var(--border-soft); }
.pathway-list-reset { list-style: none; padding: 0; margin: 0.25rem 0; }
.injection-history-placeholder-icon { width:3rem; height:3rem; margin-bottom: 1rem; opacity: 0.2; }
.medical-history-textarea { width: 100%; min-height: 60px; }
.section-icon-lg { width: 2rem; height: 2rem; }
.status-inactive { background-color: var(--status-neutral-bg); color: var(--status-neutral-text); padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; }
.practice-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 9999px; background-color: rgba(0,0,0,0.05); color: var(--text-muted); }
.action-icon-sm { width:0.875rem; height:0.875rem; vertical-align:middle; margin-right:0.25rem; }
.practice-row-muted { background-color: rgba(0,0,0,0.02); }
.status-neutral { background-color: var(--status-neutral-bg); color: var(--status-neutral-text); }
.roster-shift-badge { background: var(--primary); color: var(--bg-surface); padding: 2px 4px; border-radius: var(--radius-sm); text-align: center; }
.icon-size-08 { width:0.8rem; height:0.8rem; }
.flex-fill { flex: 1; }
.roster-day-shifts { display: flex; flex-direction: column; gap: 4px; }
.readiness-list { list-style: none; padding: 0; }
.online-booking-icon { width:0.75rem; height:0.875rem; }
.consent-template-icon { width:1.375rem; height:1.375rem; }
.injection-map-spinner { position: absolute; top: 1rem; right: 1rem; z-index: 10; }
.template-text-struck { text-decoration: line-through; }
.booking-location-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-3); min-width: 0; }
.booking-location-option { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; text-decoration: none; }
.booking-room-time-fields[hidden] { display: none !important; }