/* ═══════════════════════════════════════════════════════════════════
   YourMD Component Primitives — Component Constitution (Phase 4)
   docs/design-system/04-component-constitution.md
   -------------------------------------------------------------------
   The approved building blocks. Every class here consumes ONLY --ymd-*
   semantic tokens (no hex, no palette numbers). Density is a modifier
   (.is-clinical) on the same component, never a separate palette.

   ADDITIVE: defining these does not restyle any existing page. Pages
   adopt them during their Tier migration.

   Render via includes/ymd-components.php helpers (ymd_* functions) so
   markup + a11y stay consistent; these classes are the styling contract.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ClinicalHeader ────────────────────────────────────────────────── */
.ymd-clinical-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--ymd-space-4);
    padding: var(--ymd-space-4) var(--ymd-space-4);
    background: var(--ymd-surface-card);
    border-bottom: 1px solid var(--ymd-border-default);
}
.ymd-clinical-header__main { display: flex; flex-direction: column; gap: var(--ymd-space-1); min-width: 0; }
.ymd-clinical-header__title { font-size: var(--ymd-font-size-lg); font-weight: var(--ymd-font-weight-semibold); color: var(--ymd-text-primary); }
.ymd-clinical-header__meta  { font-size: var(--ymd-font-size-sm); color: var(--ymd-text-muted); }
.ymd-clinical-header.is-clinical { padding: var(--ymd-space-2) var(--ymd-space-3); }

/* ── PatientIdentity ───────────────────────────────────────────────── */
.ymd-patient-identity { display: inline-flex; align-items: center; gap: var(--ymd-space-2); min-width: 0; }
.ymd-patient-identity__avatar {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 999px;
    background: var(--ymd-surface-subtle); color: var(--ymd-brand-navy);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: var(--ymd-font-weight-semibold); font-size: var(--ymd-font-size-sm);
}
.ymd-patient-identity__name { font-weight: var(--ymd-font-weight-semibold); color: var(--ymd-text-primary); }
.ymd-patient-identity__sub  { font-size: var(--ymd-font-size-sm); color: var(--ymd-text-muted); }
.ymd-patient-identity.is-clinical .ymd-patient-identity__avatar { width: 28px; height: 28px; flex-basis: 28px; }

/* ── ClinicalSection ───────────────────────────────────────────────── */
.ymd-section {
    background: var(--ymd-surface-card);
    border: 1px solid var(--ymd-border-subtle);
    border-radius: var(--ymd-radius-md);
    padding: var(--ymd-space-4);
    margin-bottom: var(--ymd-space-4);
}
.ymd-section__title {
    font-size: var(--ymd-font-size-sm); font-weight: var(--ymd-font-weight-semibold);
    color: var(--ymd-text-secondary); text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: var(--ymd-space-3);
}
.ymd-section.is-compact { padding: var(--ymd-clinical-panel-padding); margin-bottom: var(--ymd-clinical-section-gap); }
.ymd-section.is-readonly { background: var(--ymd-surface-subtle); }
.ymd-section__body > * + * { margin-top: var(--ymd-space-3); }

/* ── CompactField ──────────────────────────────────────────────────── */
.ymd-field { display: flex; flex-direction: column; gap: var(--ymd-space-1); }
.ymd-field__label { font-size: var(--ymd-font-size-xs); font-weight: var(--ymd-font-weight-medium); color: var(--ymd-text-muted); }
.ymd-field__control {
    font-family: var(--ymd-font-family); font-size: var(--ymd-font-size-md);
    color: var(--ymd-text-primary); background: var(--ymd-surface-card);
    border: 1px solid var(--ymd-border-default); border-radius: var(--ymd-radius-sm);
    padding: 0 var(--ymd-space-3); height: 40px;
    transition: border-color var(--ymd-transition-fast), box-shadow var(--ymd-transition-fast);
}
.ymd-field__control:focus { outline: none; border-color: var(--ymd-focus-ring); box-shadow: 0 0 0 3px var(--ymd-status-info-surface); }
.ymd-field.is-clinical .ymd-field__control { height: var(--ymd-clinical-field-height); font-size: var(--ymd-font-size-sm); }
.ymd-field__control:disabled { background: var(--ymd-surface-subtle); color: var(--ymd-text-muted); }
.ymd-field.is-error .ymd-field__control { border-color: var(--ymd-status-danger); }
.ymd-field__error { font-size: var(--ymd-font-size-xs); color: var(--ymd-status-danger); }

/* ── ClinicalStatus (owns the status→token mapping) ────────────────── */
.ymd-status {
    display: inline-flex; align-items: center; gap: var(--ymd-space-1);
    font-size: var(--ymd-font-size-xs); font-weight: var(--ymd-font-weight-semibold);
    padding: 2px var(--ymd-space-2); border-radius: 999px;
}
.ymd-status--success { background: var(--ymd-status-success-surface); color: var(--ymd-status-success); }
.ymd-status--warning { background: var(--ymd-status-warning-surface); color: var(--ymd-status-warning); }
.ymd-status--danger  { background: var(--ymd-status-danger-surface);  color: var(--ymd-status-danger); }
.ymd-status--info    { background: var(--ymd-status-info-surface);    color: var(--ymd-status-info); }
.ymd-status__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* ── PrimaryActionBar ──────────────────────────────────────────────── */
.ymd-action-bar {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--ymd-space-2);
    padding: var(--ymd-space-3) var(--ymd-space-4);
}
.ymd-action-bar__spacer { margin-right: auto; }
.ymd-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ymd-space-2);
    font-family: var(--ymd-font-family); font-size: var(--ymd-font-size-sm);
    font-weight: var(--ymd-font-weight-semibold); color: var(--ymd-text-inverse);
    background: var(--ymd-action-primary); border: 1px solid transparent;
    border-radius: var(--ymd-radius-sm); padding: 0 var(--ymd-space-4); height: 40px; cursor: pointer;
    transition: background var(--ymd-transition-fast), transform var(--ymd-transition-fast);
}
.ymd-btn-primary:hover:not(:disabled)  { background: var(--ymd-action-primary-hover); }
.ymd-btn-primary:active:not(:disabled) { background: var(--ymd-action-primary-active); }
.ymd-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ymd-status-info-surface); }
.ymd-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.ymd-btn-primary.is-loading { color: transparent; position: relative; }
.ymd-btn-primary.is-loading::after {
    content: ""; position: absolute; width: 16px; height: 16px; border-radius: 999px;
    border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; animation: ymd-spin .7s linear infinite;
}
.ymd-btn-primary.is-success { background: var(--ymd-status-success); }
.ymd-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ymd-space-2);
    font-family: var(--ymd-font-family); font-size: var(--ymd-font-size-sm);
    font-weight: var(--ymd-font-weight-medium); color: var(--ymd-text-primary);
    background: var(--ymd-action-secondary); border: 1px solid var(--ymd-border-default);
    border-radius: var(--ymd-radius-sm); padding: 0 var(--ymd-space-4); height: 40px; cursor: pointer;
}
@keyframes ymd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ymd-btn-primary.is-loading::after { animation: none; } }

/* ── ProgressStepper ───────────────────────────────────────────────── */
.ymd-stepper { display: flex; align-items: center; gap: var(--ymd-space-1); }
.ymd-stepper__seg { flex: 1; height: 4px; border-radius: 999px; background: var(--ymd-border-subtle); }
.ymd-stepper__seg.is-done    { background: var(--ymd-action-primary); }
.ymd-stepper__seg.is-current { background: var(--ymd-action-primary); opacity: .6; }
.ymd-stepper__label { font-size: var(--ymd-font-size-xs); color: var(--ymd-action-primary); font-weight: var(--ymd-font-weight-semibold); text-transform: uppercase; letter-spacing: .06em; }

/* ── SignedDocument (legal record — never an editable form) ─────────── */
.ymd-signed-doc {
    background: var(--ymd-surface-card); border: 1px solid var(--ymd-border-default);
    border-radius: var(--ymd-radius-md); overflow: hidden;
}
.ymd-signed-doc__body { padding: var(--ymd-space-6); color: var(--ymd-text-primary); font-size: var(--ymd-font-size-md); line-height: 1.6; }
.ymd-signed-doc__body h3 { font-size: var(--ymd-font-size-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--ymd-text-secondary); margin: var(--ymd-space-4) 0 var(--ymd-space-1); }
.ymd-signed-doc__seal {
    display: flex; align-items: center; gap: var(--ymd-space-2);
    padding: var(--ymd-space-3) var(--ymd-space-6); background: var(--ymd-status-success-surface);
    color: var(--ymd-status-success); font-size: var(--ymd-font-size-sm); font-weight: var(--ymd-font-weight-semibold);
    border-top: 1px solid var(--ymd-border-subtle);
}
.ymd-signed-doc__ts { color: var(--ymd-text-muted); font-weight: var(--ymd-font-weight-regular); }

/* ── ClinicalFooter ────────────────────────────────────────────────── */
.ymd-clinical-footer {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ymd-space-3);
    padding: var(--ymd-space-3) var(--ymd-space-4);
    border-top: 1px solid var(--ymd-border-subtle); background: var(--ymd-surface-card);
    font-size: var(--ymd-font-size-sm); color: var(--ymd-text-muted);
}

/* ── ContextRail ───────────────────────────────────────────────────── */
.ymd-context-rail { display: flex; flex-direction: column; gap: var(--ymd-space-3); width: 300px; flex: 0 0 300px; }
.ymd-context-rail__card { background: var(--ymd-surface-card); border: 1px solid var(--ymd-border-subtle); border-radius: var(--ymd-radius-md); padding: var(--ymd-space-3); }
.ymd-context-rail__label { font-size: var(--ymd-font-size-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ymd-text-muted); margin-bottom: var(--ymd-space-1); }
.ymd-context-rail__value { font-size: var(--ymd-font-size-sm); color: var(--ymd-text-primary); }
@media (max-width: 900px) { .ymd-context-rail { width: 100%; flex-basis: auto; } }

/* ── EmptyErrorState ───────────────────────────────────────────────── */
.ymd-state {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--ymd-space-3); padding: var(--ymd-space-8) var(--ymd-space-4);
    color: var(--ymd-text-muted);
}
.ymd-state__icon { color: var(--ymd-text-muted); }
.ymd-state--error .ymd-state__icon { color: var(--ymd-status-danger); }
.ymd-state__title { font-size: var(--ymd-font-size-md); font-weight: var(--ymd-font-weight-semibold); color: var(--ymd-text-primary); }
.ymd-state__msg { font-size: var(--ymd-font-size-sm); max-width: 42ch; }
.ymd-state__spinner { width: 24px; height: 24px; border-radius: 999px; border: 3px solid var(--ymd-border-subtle); border-top-color: var(--ymd-action-primary); animation: ymd-spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ymd-state__spinner { animation: none; } }

/* ── Density scope helper ──────────────────────────────────────────── */
.ymd-density-clinical { --ymd-space-4: var(--ymd-clinical-panel-padding); }