/*
 * V1-COCKPIT-CARDS-PREMIUM-1.0 — Premium-M4 (HYP-OPS-206)
 *
 * Premium redesign of the cockpit rail cards. CONSUMES the design
 * tokens shipped by Premium-M2 (fex_premium_tokens.css) and the type
 * system from Premium-M3 (fex_premium_typography.css). NEVER redefines
 * a `--p-*` token; only consumes them.
 *
 * Scope: targets the EXISTING `.cockpit1a-rail-card` chassis used by
 * every rail card on the patient-cockpit right rail. The rules
 * override the legacy chassis without touching the markup, so every
 * IIFE that renders into `cockpit1b-rail-*-body` inherits the new
 * premium chassis automatically.
 *
 * Premium discipline (restraint clínico):
 *   - Accent stripe vertical (3 px) per category, expanding to 5 px
 *     on hover/focus.
 *   - 4 category accents (--cat-* utility classes layer on the chassis
 *     so cards self-declare their category without new attributes).
 *   - NO glass-morphism gradients.
 *   - NO neon / saturated rainbow.
 *   - NO drop-shadows with > 16 px blur (premium = soft, not foggy).
 *   - Numbers in tabular monospace when inside `.p-tnum` spans.
 *   - Boundary line is italic micro + tracking wide + low-saturation
 *     ink (governance hum, not a banner).
 *
 * Forbidden by construction:
 *   - NO inline `style="…"` rules introduced into client_v2.html by
 *     this slice — every style change rides on the existing chassis
 *     class names.
 *   - NO redefinition of any `--navy / --fex-* / --fs-* / --sp-* /
 *     --rd-*` legacy variable.
 *   - NO `position: fixed` overlay or shadow card (the existing rail
 *     structure stays in its existing flow).
 *
 * Premium-M5 will layer micro-interactions (hover, focus, motion) on
 * top of this chassis using the same `--p-*` tokens.
 */

/* ───────────────────────────────────────────────────────────────── */
/* CARD CHASSIS — premium override of the existing .cockpit1a-rail-card */
/* ───────────────────────────────────────────────────────────────── */
.cockpit1a-rail-card {
  position: relative;
  background: var(--p-paper-50);
  border: 1px solid var(--p-paper-200);
  border-left-width: 3px;
  border-left-color: var(--p-accent-clinical); /* default category */
  border-radius: var(--p-radius-md);
  padding: var(--p-space-4) var(--p-space-4)
           var(--p-space-3) var(--p-space-5);
  margin: 0 0 var(--p-space-3) 0;
  box-shadow: var(--p-shadow-0);
  transition:
    border-left-width var(--p-dur-sm) var(--p-ease-emphasized),
    box-shadow       var(--p-dur-sm) var(--p-ease-emphasized);
  overflow: hidden;
}

.cockpit1a-rail-card:hover,
.cockpit1a-rail-card:focus-within {
  border-left-width: 5px;
  box-shadow: var(--p-shadow-1);
}

/* TITLE ─ premium type + tracking. Override the legacy .cockpit1a-rail-title. */
.cockpit1a-rail-card .cockpit1a-rail-title {
  font-family: var(--p-font-sans);
  font-size: var(--p-type-emphasis);
  font-weight: var(--p-weight-semibold);
  line-height: var(--p-line-tight);
  letter-spacing: var(--p-tracking-tight);
  color: var(--p-ink-900);
  margin: 0 0 var(--p-space-2) 0;
}

/* META / NOTE / EMPTY-STATE lines. */
.cockpit1a-rail-card .cockpit1a-rail-empty,
.cockpit1a-rail-card p {
  font-family: var(--p-font-sans);
  font-size: var(--p-type-caption);
  line-height: var(--p-line-snug);
  color: var(--p-ink-500);
  margin: 0 0 var(--p-space-2) 0;
}

/* BOUNDARY LINE — italic micro + wide tracking + low-saturation. We
 * target the boundary class explicitly (its id suffix ends in
 * `-boundary`). The italic + tracking pair is the signal that this is
 * the governance boundary, not content. */
.cockpit1a-rail-card [id$="-boundary"] {
  font-style: italic;
  font-size: var(--p-type-micro);
  letter-spacing: var(--p-tracking-wide);
  color: var(--p-ink-300);
  border-top: 1px dashed var(--p-paper-200);
  padding-top: var(--p-space-2);
  margin-top: var(--p-space-2);
}

/* LINK / ACTION — the rail-card-link CTA. Premium underline-on-hover. */
.cockpit1a-rail-card .cockpit1a-rail-link {
  display: inline-block;
  font-family: var(--p-font-sans);
  font-size: var(--p-type-caption);
  font-weight: var(--p-weight-medium);
  color: var(--p-accent-clinical);
  background: transparent;
  border: 0;
  padding: var(--p-space-1) 0;
  margin: var(--p-space-2) var(--p-space-3) 0 0;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color var(--p-dur-xs) var(--p-ease-sharp),
              color              var(--p-dur-xs) var(--p-ease-sharp);
}
.cockpit1a-rail-card .cockpit1a-rail-link:hover,
.cockpit1a-rail-card .cockpit1a-rail-link:focus {
  color: var(--p-ink-900);
  border-bottom-color: var(--p-accent-clinical);
  outline: none;
}
.cockpit1a-rail-card .cockpit1a-rail-link:focus-visible {
  box-shadow: var(--p-shadow-focus);
  border-radius: var(--p-radius-sm);
}

/* STRONG / chip-like inline emphasis on numbers (works with the
 * existing `<strong>X of 9</strong>` markup all the structural
 * preview / pending-cases cards already use). */
.cockpit1a-rail-card strong {
  font-family: var(--p-font-mono);
  font-feature-settings: "tnum" 1;
  font-weight: var(--p-weight-medium);
  font-size: var(--p-type-body);
  color: var(--p-ink-700);
}

/* ───────────────────────────────────────────────────────────────── */
/* CATEGORY ACCENT STRIPES — opt-in via id-suffix attribute selectors  */
/*                                                                     */
/*   The legacy cards already carry stable id suffixes: e.g. the M4A   */
/*   capture card is #cockpit1b-rail-m4a-capture, the outcome card is  */
/*   #cockpit1b-rail-outcome-capture, the pending-cases card is        */
/*   #cockpit1b-rail-pending-cases. We map id suffixes to the 4        */
/*   --p-accent-* tokens so each card self-declares its category       */
/*   without any new attribute on the markup.                          */
/* ───────────────────────────────────────────────────────────────── */

/* GOOD — capture & data declaration cards. */
.cockpit1a-rail-card[id$="-reproductive-intent"],
.cockpit1a-rail-card[id$="-medication-plan-capture"],
.cockpit1a-rail-card[id$="-m1-planning"],
.cockpit1a-rail-card[id$="-m1-capture"],
.cockpit1a-rail-card[id$="-m2-retrieval"],
.cockpit1a-rail-card[id$="-m2-capture"],
.cockpit1a-rail-card[id$="-m3-cohort"],
.cockpit1a-rail-card[id$="-m3-capture"],
.cockpit1a-rail-card[id$="-m4a-capture"],
.cockpit1a-rail-card[id$="-transfer-strategy"] {
  border-left-color: var(--p-accent-good);
}

/* WARN — outcome / progression cards (attention, not alarm). */
.cockpit1a-rail-card[id$="-outcome-capture"] {
  border-left-color: var(--p-accent-warn);
}

/* STOP — case-phase promote (a workflow gate; user-initiated only). */
.cockpit1a-rail-card[id$="-case-phase"] {
  border-left-color: var(--p-accent-stop);
}

/* CLINICAL (default) — case-intelligence / data-trust / structural-preview
 * / cycle-plan-summary / pending-cases / lab-* — these are the
 * GOVERNANCE / GLANCE cards. They keep the default --p-accent-clinical
 * stripe inherited from the chassis. */

/* ───────────────────────────────────────────────────────────────── */
/* COCKPIT RAIL HOST — give the cards a premium rhythm in the rail.    */
/* ───────────────────────────────────────────────────────────────── */
.cockpit1a-stim-rail,
.cockpit1a-rail-host,
#cockpit1a-rail-host-m0 {
  display: flex;
  flex-direction: column;
  gap: 0;  /* cards bring their own margin-bottom */
}

/* ───────────────────────────────────────────────────────────────── */
/* CONSULT / FET hero card titles — premium type override.             */
/* ───────────────────────────────────────────────────────────────── */
.cockpit1a-card-header h1,
.cockpit1a-card-header h2 {
  font-family: var(--p-font-display);
  font-size: var(--p-type-title-md);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-tight);
  line-height: var(--p-line-tight);
  color: var(--p-ink-900);
}