/* ═══════════════════════════════════════════════════════════════════
   YourMD Design Tokens — the single set of primitives every portal
   derives from. Loaded by both shared headers, AFTER portal-theme.php
   (color comes from the theme engine — tokens define STRUCTURE only,
   so this never becomes a second theming system).

   Rules of use:
   - New UI uses tokens/classes from here. Existing pages migrate as
     they are touched — same ratchet as the authz migration.
   - Two radii. One shadow. Seven type sizes. Semantic color aliases
     only. If a design needs something outside this file, the design
     changes, not this file (or the change lands HERE, reviewed once,
     for everyone).
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Spacing — 4px base scale. */
    --ymd-s-1: 4px;  --ymd-s-2: 8px;   --ymd-s-3: 12px; --ymd-s-4: 16px;
    --ymd-s-5: 24px; --ymd-s-6: 32px;  --ymd-s-7: 48px; --ymd-s-8: 64px;

    /* Radii — exactly two, plus the pill. */
    --ymd-r-card:  16px;
    --ymd-r-modal: 24px;
    --ymd-r-pill:  999px;

    /* The one shadow. Depth comes from spacing, not from shadow zoo. */
    --ymd-shadow: 0 8px 30px rgba(0, 0, 0, .05);

    /* Type scale — seven sizes, nothing else. */
    --ymd-t-hero:    36px;
    --ymd-t-page:    30px;
    --ymd-t-section: 22px;
    --ymd-t-card:    18px;
    --ymd-t-body:    16px;
    --ymd-t-caption: 14px;
    --ymd-t-label:   12px;

    /* Semantic colors. Primary rides the portal theme engine so each
       portal keeps its identity; the rest are fixed meanings. */
    --ymd-c-primary:      var(--portal-accent, #1976ff);
    --ymd-c-primary-dark: var(--portal-accent-dark, #1257c4);
    --ymd-c-primary-bg:   var(--portal-accent-bg, #eff6ff);
    --ymd-c-success: #059669;
    --ymd-c-warning: #d97706;
    --ymd-c-danger:  #dc2626;
    --ymd-c-ink:     #0f172a;   /* headings */
    --ymd-c-text:    #334155;   /* body */
    --ymd-c-muted:   #64748b;   /* secondary */
    --ymd-c-faint:   #94a3b8;   /* labels, hints */
    --ymd-c-line:    #e8edf4;   /* the only border color */
    --ymd-c-bg:      #f8fafc;   /* app background */
    --ymd-c-surface: #ffffff;   /* cards */
}

/* ═══════════════════════════════════════════════════════════════════
   CANONICAL SEMANTIC LAYER — Token Constitution (Phase 2)
   docs/design-system/01-token-constitution.md
   -------------------------------------------------------------------
   Feature code consumes THESE names only — never a hex, never a
   palette-numbered token (--ymd-blue-500), never the legacy --ymd-c-*
   aliases above (those are structural/theme-era and migrate onto this
   layer). Structural scales (space/radius/type) alias the established
   primitives so there is ONE scale, not two. This block is ADDITIVE:
   no existing token is renamed and no page restyles until it opts in.

   Rules locked by the Brand Constitution:
   - Red is brand identity + semantic danger. NEVER an action color.
   - No canonical purple/violet token — existing violet is migration
     debt, not legitimized here.
   - One action color, fixed (not portal-themed) so patient and
     provider surfaces share it; density changes via component
     variants, not separate palettes.
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* Brand — identity only. */
    --ymd-brand-navy: #0f1f3a;
    --ymd-brand-red:  #e62a29;

    /* Actions — the one interactive language. */
    --ymd-action-primary:        #4b7ff1;
    --ymd-action-primary-hover:  #3a63c8;
    --ymd-action-primary-active: #2f52a8;
    --ymd-action-secondary:      #eef2f9;
    --ymd-focus-ring:            #4b7ff1;

    /* Status — meaning + paired surface tint. */
    --ymd-status-success: #1d9e75;  --ymd-status-success-surface: #e7f6f0;
    --ymd-status-warning: #b45309;  --ymd-status-warning-surface: #fdf0d9;
    --ymd-status-danger:  #b91c1c;  --ymd-status-danger-surface:  #fde8e8;
    --ymd-status-info:    #4b7ff1;  --ymd-status-info-surface:    #eaf1fe;

    /* Surfaces — bright, calm ground. */
    --ymd-surface-page:     #f6f8fc;
    --ymd-surface-card:     #ffffff;
    --ymd-surface-subtle:   #eef2f9;
    --ymd-surface-elevated: #ffffff;

    /* Text. */
    --ymd-text-primary:   #0f172a;
    --ymd-text-secondary: #475569;
    --ymd-text-muted:     #64748b;
    --ymd-text-inverse:   #ffffff;
    --ymd-text-link:      #4b7ff1;

    /* Borders. */
    --ymd-border-default: #d9e0ee;
    --ymd-border-subtle:  #eef2f7;
    --ymd-border-strong:  #b8c4db;

    /* Shape — sm/md fresh; lg aliases the established card radius. */
    --ymd-radius-sm: 8px;
    --ymd-radius-md: 12px;
    --ymd-radius-lg: var(--ymd-r-card, 16px);

    /* Spacing — aliases onto the 4px primitive scale (one scale). */
    --ymd-space-1: var(--ymd-s-1, 4px);
    --ymd-space-2: var(--ymd-s-2, 8px);
    --ymd-space-3: var(--ymd-s-3, 12px);
    --ymd-space-4: var(--ymd-s-4, 16px);
    --ymd-space-6: var(--ymd-s-6, 32px);
    --ymd-space-8: var(--ymd-s-8, 64px);

    /* Typography — family + aliases onto the type scale. */
    --ymd-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ymd-font-size-xs: var(--ymd-t-label, 12px);
    --ymd-font-size-sm: var(--ymd-t-caption, 14px);
    --ymd-font-size-md: var(--ymd-t-body, 16px);
    --ymd-font-size-lg: var(--ymd-t-card, 18px);
    --ymd-font-weight-regular:  400;
    --ymd-font-weight-medium:   500;
    --ymd-font-weight-semibold: 600;

    /* Motion. */
    --ymd-transition-fast:     120ms ease;
    --ymd-transition-standard: 200ms ease;

    /* Clinical density — provider surfaces are dense via these, not a new palette. */
    --ymd-clinical-field-height:  34px;
    --ymd-clinical-section-gap:   16px;
    --ymd-clinical-panel-padding: 16px;
}

/* ── Surfaces (the six primitives) ─────────────────────────────────── */
.ymd-card {
    background: var(--ymd-c-surface);
    border: 1px solid var(--ymd-c-line);
    border-radius: var(--ymd-r-card);
    box-shadow: var(--ymd-shadow);
    padding: var(--ymd-s-5);
}
.ymd-card--flat { box-shadow: none; }          /* nested cards never stack shadows */
.ymd-section { margin-bottom: var(--ymd-s-6); }
.ymd-modal {
    background: var(--ymd-c-surface);
    border-radius: var(--ymd-r-modal);
    box-shadow: 0 24px 64px rgba(15, 23, 42, .22);
}

/* ── Typography ────────────────────────────────────────────────────── */
.ymd-hero    { font-size: var(--ymd-t-hero);    font-weight: 700; color: var(--ymd-c-ink); letter-spacing: -.02em; line-height: 1.15; }
.ymd-page    { font-size: var(--ymd-t-page);    font-weight: 700; color: var(--ymd-c-ink); letter-spacing: -.015em; line-height: 1.2; }
.ymd-section-title { font-size: var(--ymd-t-section); font-weight: 650; color: var(--ymd-c-ink); letter-spacing: -.01em; }
.ymd-card-title    { font-size: var(--ymd-t-card);    font-weight: 650; color: var(--ymd-c-ink); }
.ymd-body    { font-size: var(--ymd-t-body);    color: var(--ymd-c-text); line-height: 1.6; }
.ymd-caption { font-size: var(--ymd-t-caption); color: var(--ymd-c-muted); line-height: 1.5; }
.ymd-label   { font-size: var(--ymd-t-label);   color: var(--ymd-c-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 640px) {
    .ymd-hero { font-size: 28px; }
    .ymd-page { font-size: 24px; }
    .ymd-section-title { font-size: 19px; }
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.ymd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: var(--ymd-t-caption); font-weight: 600; font-family: inherit;
    padding: 10px 20px; border-radius: var(--ymd-r-pill);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.ymd-btn:active { transform: scale(.98); }
.ymd-btn--primary { background: var(--ymd-c-primary); color: #fff; }
.ymd-btn--primary:hover { background: var(--ymd-c-primary-dark); color: #fff; }
.ymd-btn--secondary { background: var(--ymd-c-surface); color: var(--ymd-c-ink); border-color: var(--ymd-c-line); }
.ymd-btn--secondary:hover { border-color: var(--ymd-c-primary); color: var(--ymd-c-primary); }
.ymd-btn--ghost { background: transparent; color: var(--ymd-c-muted); }
.ymd-btn--ghost:hover { color: var(--ymd-c-ink); }
.ymd-btn--danger { background: transparent; color: var(--ymd-c-danger); border-color: #fecaca; }
.ymd-btn--sm { padding: 6px 14px; font-size: var(--ymd-t-label); }

/* ── Badges ────────────────────────────────────────────────────────── */
.ymd-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; padding: 3px 10px;
    border-radius: var(--ymd-r-pill); background: var(--ymd-c-bg); color: var(--ymd-c-muted);
}
.ymd-badge--success { background: rgba(5, 150, 105, .1);  color: var(--ymd-c-success); }
.ymd-badge--warning { background: rgba(217, 119, 6, .1);  color: var(--ymd-c-warning); }
.ymd-badge--danger  { background: rgba(220, 38, 38, .1);  color: var(--ymd-c-danger); }
.ymd-badge--primary { background: var(--ymd-c-primary-bg); color: var(--ymd-c-primary-dark); }

/* ── Segmented control (coverage pickers, view toggles) ────────────── */
.ymd-seg {
    display: inline-flex; background: var(--ymd-c-bg);
    border: 1px solid var(--ymd-c-line); border-radius: var(--ymd-r-pill); padding: 3px;
}
.ymd-seg > button, .ymd-seg > label {
    border: none; background: transparent; cursor: pointer;
    font-size: var(--ymd-t-label); font-weight: 600; color: var(--ymd-c-muted);
    padding: 7px 16px; border-radius: var(--ymd-r-pill); font-family: inherit;
    transition: background .15s ease, color .15s ease;
}
.ymd-seg > .is-active, .ymd-seg > :checked + label {
    background: var(--ymd-c-surface); color: var(--ymd-c-ink);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}

/* ── Empty states (educate, never dead-end) ────────────────────────── */
.ymd-empty {
    text-align: center; padding: var(--ymd-s-7) var(--ymd-s-5);
    color: var(--ymd-c-muted); font-size: var(--ymd-t-caption);
}
.ymd-empty i { font-size: 30px; color: var(--ymd-c-faint); display: block; margin-bottom: var(--ymd-s-3); }
.ymd-empty .ymd-empty__title { font-size: var(--ymd-t-body); font-weight: 650; color: var(--ymd-c-ink); margin-bottom: var(--ymd-s-2); }
.ymd-empty .ymd-empty__next { max-width: 420px; margin: 0 auto var(--ymd-s-4); line-height: 1.6; }
.ymd-empty ul { list-style: none; padding: 0; margin: 0 auto var(--ymd-s-4); max-width: 320px; text-align: left; }
.ymd-empty ul li { padding: 3px 0; }
.ymd-empty ul li::before { content: '✓'; color: var(--ymd-c-success); font-weight: 700; margin-right: 8px; }

/* ── Motion — subtle, and honors reduced-motion ────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .ymd-rise { animation: ymdRise .35s ease backwards; }
    .ymd-rise-2 { animation: ymdRise .35s ease .07s backwards; }
    .ymd-rise-3 { animation: ymdRise .35s ease .14s backwards; }
    @keyframes ymdRise {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 1a — MISSING PRIMITIVES (additive; nothing above is modified)
   Input/field · Surface · Stack · Grid · Skeleton+Spinner · Alert · Chip
   Same rules: two radii, one shadow, seven type sizes, 4px spacing,
   semantic --ymd-c-* only. Primary always rides the portal theme.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Form field ─────────────────────────────────────────────────── */
/* Structure: .ymd-field > label.ymd-label + control + .ymd-field__hint
   Errors: put the message in .ymd-field__error, add .ymd-input--error to
   the control, and wire aria-invalid="true" +
   aria-describedby="<hint/error id>" on the control itself. */
.ymd-field { display: flex; flex-direction: column; gap: var(--ymd-s-2); }
.ymd-field__req { color: var(--ymd-c-danger); margin-left: 2px; }

.ymd-input, .ymd-textarea, .ymd-select {
    font: inherit; font-size: var(--ymd-t-body); color: var(--ymd-c-ink);
    background: var(--ymd-c-surface);
    border: 1px solid var(--ymd-c-line);
    border-radius: var(--ymd-r-card);
    padding: 10px 14px; width: 100%; box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ymd-input::placeholder, .ymd-textarea::placeholder { color: var(--ymd-c-faint); }
.ymd-input:hover, .ymd-textarea:hover, .ymd-select:hover { border-color: var(--ymd-c-muted); }
/* Focus ring is a ring, not a new shadow token — depth rules still hold. */
.ymd-input:focus-visible, .ymd-textarea:focus-visible, .ymd-select:focus-visible,
.ymd-input:focus, .ymd-textarea:focus, .ymd-select:focus {
    outline: none; border-color: var(--ymd-c-primary);
    box-shadow: 0 0 0 3px var(--ymd-c-primary-bg);
}
.ymd-input:disabled, .ymd-textarea:disabled, .ymd-select:disabled {
    background: var(--ymd-c-bg); color: var(--ymd-c-faint); cursor: not-allowed;
}
.ymd-textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.ymd-select {
    appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
    /* chevron drawn in --ymd-c-muted (#64748b); inline data-URI cannot read a var */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.ymd-input--error { border-color: var(--ymd-c-danger); }
.ymd-input--error:focus-visible, .ymd-input--error:focus {
    border-color: var(--ymd-c-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
.ymd-field__hint { font-size: var(--ymd-t-caption); color: var(--ymd-c-muted); line-height: 1.5; }
.ymd-field__error { font-size: 13px; color: var(--ymd-c-danger); line-height: 1.5; }
.ymd-field--inline { flex-direction: row; align-items: center; gap: var(--ymd-s-3); }
.ymd-field--inline > .ymd-label { margin: 0; white-space: nowrap; }

/* ── 2. Surface ────────────────────────────────────────────────────── */
/* Card    = elevated content block (shadow + 24px padding).
   Surface = flat bounded region (no shadow) — nested regions, list
   containers, sidebar panels. Nested cards use .ymd-card--flat. */
.ymd-surface {
    background: var(--ymd-c-surface);
    border: 1px solid var(--ymd-c-line);
    border-radius: var(--ymd-r-card);
    padding: var(--ymd-s-4);
}
.ymd-surface--bg { background: var(--ymd-c-bg); }   /* recessed well */
.ymd-surface--flush { padding: 0; }                 /* for list containers */

/* ── 3. Stack / Inline ─────────────────────────────────────────────── */
.ymd-stack { display: flex; flex-direction: column; gap: var(--ymd-s-4); }
.ymd-stack--xtight { gap: var(--ymd-s-1); }
.ymd-stack--tight  { gap: var(--ymd-s-2); }
.ymd-stack--loose  { gap: var(--ymd-s-6); }
.ymd-inline { display: flex; align-items: center; gap: var(--ymd-s-3); flex-wrap: wrap; }
.ymd-inline--between { justify-content: space-between; }

/* ── 4. Grid ───────────────────────────────────────────────────────── */
.ymd-grid {
    display: grid; gap: var(--ymd-s-4);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.ymd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ymd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ymd-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
    .ymd-grid--2, .ymd-grid--3, .ymd-grid--4 { grid-template-columns: 1fr; }
}

/* ── 5. Loading ────────────────────────────────────────────────────── */
/* Prefer a skeleton that mirrors the coming layout; use the spinner only
   for in-place actions (button, inline refresh). Spinner needs
   role="status" plus visually-hidden text: <span>Loading…</span>. */
.ymd-skeleton {
    background: linear-gradient(90deg, var(--ymd-c-bg) 25%, #eef2f7 37%, var(--ymd-c-bg) 63%);
    background-size: 400% 100%;
    border-radius: 8px;
    animation: ymdShimmer 1.4s ease infinite;
}
.ymd-skeleton--line   { height: 12px; margin-bottom: var(--ymd-s-2); }
.ymd-skeleton--title  { height: 20px; width: 40%; }
.ymd-skeleton--card   { height: 120px; border-radius: var(--ymd-r-card); }
.ymd-skeleton--avatar { height: 36px; width: 36px; border-radius: 50%; }
@keyframes ymdShimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.ymd-spinner {
    width: 18px; height: 18px; box-sizing: border-box;
    border: 2px solid var(--ymd-c-line);
    border-top-color: var(--ymd-c-primary);
    border-radius: 50%;
    animation: ymdSpin .7s linear infinite;
}
.ymd-spinner--lg { width: 28px; height: 28px; }
@keyframes ymdSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ymd-skeleton { animation: none; background: var(--ymd-c-bg); }
    .ymd-spinner  { animation-duration: 2s; }
}

/* ── 6. Alert ──────────────────────────────────────────────────────── */
/* Page-level feedback. Blocking decisions stay in .ymd-modal; field-level
   messages stay in .ymd-field__error. Add role="alert" on --danger. */
.ymd-alert {
    display: flex; gap: var(--ymd-s-3); align-items: flex-start;
    padding: var(--ymd-s-3) var(--ymd-s-4);
    border-radius: var(--ymd-r-card);
    border: 1px solid transparent;
    font-size: var(--ymd-t-caption); line-height: 1.5; color: var(--ymd-c-text);
}
.ymd-alert__icon { flex: none; width: 20px; height: 20px; line-height: 20px; text-align: center; }
.ymd-alert__title { font-size: var(--ymd-t-body); font-weight: 650; color: var(--ymd-c-ink); }
.ymd-alert__body { min-width: 0; }
.ymd-alert--info    { background: var(--ymd-c-primary-bg);      border-color: var(--ymd-c-primary); }
.ymd-alert--info    .ymd-alert__icon { color: var(--ymd-c-primary-dark); }
.ymd-alert--success { background: rgba(5, 150, 105, .1);  border-color: var(--ymd-c-success); }
.ymd-alert--success .ymd-alert__icon { color: var(--ymd-c-success); }
.ymd-alert--warning { background: rgba(217, 119, 6, .1);  border-color: var(--ymd-c-warning); }
.ymd-alert--warning .ymd-alert__icon { color: var(--ymd-c-warning); }
.ymd-alert--danger  { background: rgba(220, 38, 38, .1);  border-color: var(--ymd-c-danger); }
.ymd-alert--danger  .ymd-alert__icon { color: var(--ymd-c-danger); }

/* ── 7. Status chip ────────────────────────────────────────────────── */
/* Badge = a count or a label. Chip = a live status, with a leading dot.
   One state vocabulary for every worklist, queue and row. */
.ymd-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600;
    padding: 3px 10px 3px 8px;
    border-radius: var(--ymd-r-pill);
    background: var(--ymd-c-bg); color: var(--ymd-c-muted);
}
.ymd-chip::before {
    content: ''; flex: none; width: 6px; height: 6px;
    border-radius: 50%; background: currentColor;
}
.ymd-chip--neutral { color: var(--ymd-c-muted); }
.ymd-chip--primary { color: var(--ymd-c-primary-dark); background: var(--ymd-c-primary-bg); }
.ymd-chip--success { color: var(--ymd-c-success); background: rgba(5, 150, 105, .1); }
.ymd-chip--warning { color: var(--ymd-c-warning); background: rgba(217, 119, 6, .1); }
.ymd-chip--danger  { color: var(--ymd-c-danger);  background: rgba(220, 38, 38, .1); }
/* Domain aliases — named for meaning so queue markup reads clearly. */
.ymd-chip--waiting { color: var(--ymd-c-danger);  background: rgba(220, 38, 38, .1); }
.ymd-chip--live    { color: var(--ymd-c-success); background: rgba(5, 150, 105, .1); }
.ymd-chip--sign    { color: var(--ymd-c-warning); background: rgba(217, 119, 6, .1); }
.ymd-chip--review  { color: var(--ymd-c-primary-dark); background: var(--ymd-c-primary-bg); }
.ymd-chip--done    { color: var(--ymd-c-muted);   background: var(--ymd-c-bg); }
@media (prefers-reduced-motion: no-preference) {
    .ymd-chip--live::before { animation: ymdPulse 1.6s ease-in-out infinite; }
    @keyframes ymdPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}

/* ── Focus ring, once, for every new interactive primitive ─────────── */
.ymd-chip[tabindex]:focus-visible,
.ymd-nav-item:focus-visible,
.ymd-topbar__toggle:focus-visible,
.ymd-skip:focus-visible {
    outline: 2px solid var(--ymd-c-primary); outline-offset: 2px;
}