/**
 * YemBlue Academy — Component Layer
 * ===============================
 * PHASE 1 — Design System Foundation.
 * Version: 3.0.0   Date: 2026-09-30
 *
 * RULES (enforced by tools/validate_components.sh in the Phase 1 report):
 *  1. NO literal colour, spacing, radius or duration value in this file.
 *     Everything resolves through var() from assets/tokens.css.
 *  2. NO physical direction properties (left/right/margin-left/...). Only
 *     logical properties, so RTL and LTR both work from one rule set.
 *  3. Every interactive element keeps a visible focus ring using
 *     --yb-focus-ring (two-tone, 3:1 on light and dark surfaces).
 *  4. Motion is declared through token transitions only, so the global
 *     prefers-reduced-motion block can neutralise it.
 *  5. Shared geometry is written ONCE in the base layers and reused by
 *     variant classes. A variant overrides, it does not restate.
 */

/* NOTE ON BREAKPOINTS: @media conditions cannot read custom properties
   (CSS spec: var() is not permitted in media queries). The four breakpoint
   values below are therefore the ONLY literal rem values in this file, and
   they mirror --yb-bp-sm/md/lg in tokens.css 1:1. Changing a breakpoint
   requires editing both files; the Phase 1 audit verifies they still match. */
/* ========================================================================
   LAYER A · PRIMITIVES
   ======================================================================== */

.yb-ds,
.yb-ds-root {
  font-family: var(--yb-font-family);
  color: var(--yb-charcoal);
  line-height: var(--yb-line-height-body);
  font-size: var(--yb-font-size-body);
}

/* Container: mobile gutters on small screens, desktop container above. */
.yb-ds-container {
  width: 100%;
  max-width: var(--yb-desktop-container);
  margin-inline: auto;
  padding-inline: var(--yb-mobile-gutter);
}

@media (min-width: 48rem) {
  .yb-ds-container { padding-inline: var(--yb-container-padding); }
}

/* Section rhythm */
.yb-ds-section { padding-block: var(--yb-section-spacing-mobile); }
@media (min-width: 48rem) {
  .yb-ds-section { padding-block: var(--yb-section-spacing); }
}

.yb-ds-section--sand { background: var(--yb-sand); }
.yb-ds-section--mist { background: var(--yb-mist); }
.yb-ds-section--deep {
  background: var(--yb-deep-ocean);
  color: var(--yb-text-inverse);
}

/* Stack: vertical rhythm via logical margins only. */
.yb-ds-stack > * + * { margin-block-start: var(--yb-stack-gap); }
.yb-ds-stack--loose > * + * { margin-block-start: var(--yb-grid-gap-loose); }
.yb-ds-stack--tight > * + * { margin-block-start: var(--yb-grid-gap-tight); }

/* Grid */
.yb-ds-grid {
  display: grid;
  gap: var(--yb-grid-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .yb-ds-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .yb-ds-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .yb-ds-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.yb-ds-grid--tight { gap: var(--yb-grid-gap-tight); }
.yb-ds-grid--loose { gap: var(--yb-grid-gap-loose); }

/* Visually hidden but reachable by assistive tech. */
.yb-ds-sr-only {
  position: absolute;
  width: var(--yb-border-width-hairline); height: var(--yb-border-width-hairline);
  margin: var(--yb-space-neg-hairline); padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.yb-ds-skip-link {
  position: absolute;
  inset-block-start: var(--yb-space-2);
  inset-inline-start: var(--yb-space-2);
  z-index: 100;
  padding: var(--yb-space-3) var(--yb-space-4);
  background: var(--yb-navy);
  color: var(--yb-text-inverse);
  border-radius: var(--yb-radius-cta-sm);
  transform: translateY(-200%);
}
.yb-ds-skip-link:focus { transform: translateY(0); }

/* ========================================================================
   LAYER B · FOCUS + REDUCED MOTION
   ======================================================================== */

.yb-ds :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--yb-border-width-focus) solid transparent; /* reserves the slot */
  box-shadow: var(--yb-focus-ring);
  border-radius: var(--yb-radius-sm);
}

/* Components on a dark surface swap the ring to the inner-light-first order. */
.yb-ds-section--deep :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.yb-c-header :where(a, button, input, [tabindex]):focus-visible,
.yb-c-drawer :where(a, button, input, [tabindex]):focus-visible {
  outline-color: var(--yb-cyan);
  box-shadow: 0 0 0 var(--yb-border-width-focus) var(--yb-cyan), 0 0 0 calc(var(--yb-border-width-focus) * 2) var(--yb-navy);
}

/* Scoped, belt-and-braces reduced-motion. The token file also neutralises
   the transition variables; this block stops transform-based movement. */
@media (prefers-reduced-motion: reduce) {
  .yb-ds *,
  .yb-ds *::before,
  .yb-ds *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .yb-ds-skip-link { transition: none !important; }
}

/* ========================================================================
   LAYER C · TYPOGRAPHY ROLES
   ======================================================================== */

.yb-ds-h1 { font-family: var(--yb-font-family); font-size: var(--yb-font-size-h1); line-height: var(--yb-line-height-heading); font-weight: var(--yb-font-weight-bold); letter-spacing: var(--yb-letter-spacing-heading); margin-block: 0 var(--yb-space-4); }
.yb-ds-h2 { font-family: var(--yb-font-family); font-size: var(--yb-font-size-h2); line-height: var(--yb-line-height-heading); font-weight: var(--yb-font-weight-bold); letter-spacing: var(--yb-letter-spacing-heading); margin-block: 0 var(--yb-space-3); }
.yb-ds-h3 { font-family: var(--yb-font-family); font-size: var(--yb-font-size-h3); line-height: var(--yb-line-height-heading); font-weight: var(--yb-font-weight-semibold); margin-block: 0 var(--yb-space-2); }
.yb-ds-h4 { font-family: var(--yb-font-family); font-size: var(--yb-font-size-h4); line-height: var(--yb-line-height-heading); font-weight: var(--yb-font-weight-semibold); margin-block: 0 var(--yb-space-2); }

.yb-ds-body      { font-size: var(--yb-font-size-body); line-height: var(--yb-line-height-body); margin-block: 0 var(--yb-space-4); }
.yb-ds-body-sm   { font-size: var(--yb-font-size-body-sm); line-height: var(--yb-line-height-body); }
.yb-ds-caption   { font-size: var(--yb-font-size-caption); line-height: var(--yb-line-height-caption); color: var(--yb-muted); }
.yb-ds-metadata  { font-size: var(--yb-font-size-metadata); line-height: var(--yb-line-height-caption); color: var(--yb-muted); }
.yb-ds-lead      { font-size: var(--yb-font-size-h4); line-height: var(--yb-line-height-body); color: var(--yb-charcoal); }

/* Latin runs inside Arabic copy (product codes, English terms, acronyms). */
.yb-ds-latin {
  font-family: var(--yb-font-en);
  direction: ltr;
  unicode-bidi: isolate;
}

/* ========================================================================
   LAYER D · BUTTONS / CTA
   Radius comes from --yb-radius-cta (12px). Height from touch tokens.
   ======================================================================== */

.yb-c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yb-inline-gap);
  min-height: var(--yb-btn-height);
  padding-inline: var(--yb-space-6);
  border: var(--yb-border-strong);
  border-radius: var(--yb-radius-cta);
  background: var(--yb-color-surface);
  color: var(--yb-navy);
  font-family: var(--yb-font-family);
  font-size: var(--yb-font-size-cta);
  font-weight: var(--yb-font-weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--yb-transition-fast),
              border-color var(--yb-transition-fast),
              color var(--yb-transition-fast);
}

.yb-c-btn--primary {
  background: var(--yb-navy);
  border-color: var(--yb-navy);
  color: var(--yb-text-inverse);
}
.yb-c-btn--primary:hover { background: var(--yb-deep-ocean); border-color: var(--yb-deep-ocean); }

.yb-c-btn--secondary {
  background: var(--yb-mist);
  border-color: var(--yb-mist);
  color: var(--yb-deep-ocean);
}
.yb-c-btn--secondary:hover { background: var(--yb-cyan); border-color: var(--yb-cyan); color: var(--yb-deep-ocean); }

.yb-c-btn--ghost { background: transparent; border-color: var(--yb-border); color: var(--yb-navy); }
.yb-c-btn--ghost:hover { background: var(--yb-mist); border-color: var(--yb-teal); }

.yb-c-btn--sm { min-height: var(--yb-btn-height-compact); padding-inline: var(--yb-space-4); border-radius: var(--yb-radius-cta-sm); font-size: var(--yb-font-size-body-sm); }
.yb-c-btn--lg { min-height: var(--yb-btn-height-large); }

.yb-c-btn[disabled], .yb-c-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.yb-c-btn__icon { display: inline-flex; flex: none; }

/* ========================================================================
   LAYER E · STATES — loading / empty / error
   Shared once; reused by every component that needs a state.
   ======================================================================== */

.yb-c-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--yb-space-3);
  padding: var(--yb-space-10) var(--yb-space-5);
  text-align: center;
  background: var(--yb-color-surface);
  border: var(--yb-border-hairline);
  border-radius: var(--yb-radius-surface);
}

.yb-c-state__title {
  font-size: var(--yb-font-size-h4);
  font-weight: var(--yb-font-weight-semibold);
  color: var(--yb-charcoal);
  margin: 0;
}
.yb-c-state__desc { font-size: var(--yb-font-size-body-sm); color: var(--yb-muted); margin: 0; max-inline-size: var(--yb-measure-prose); }
.yb-c-state__icon { color: var(--yb-teal); }
.yb-c-state--error { border-color: var(--yb-coral-strong); background: var(--yb-color-danger-tint); }
.yb-c-state--error .yb-c-state__icon,
.yb-c-state--error .yb-c-state__title { color: var(--yb-danger-text); }
.yb-c-state--error .yb-c-state__desc { color: var(--yb-danger-text); }

/* Loading: live region + animated shimmer.
   animation is disabled by the reduced-motion block above. */
.yb-c-loading { position: relative; }

.yb-c-loading__label {
  font-size: var(--yb-font-size-body-sm);
  color: var(--yb-muted);
  margin: 0;
}

.yb-c-skeleton {
  background: linear-gradient(90deg, var(--yb-mist) 25%, var(--yb-sand) 37%, var(--yb-mist) 63%);
  background-size: var(--yb-shimmer-cycle) 100%;
  animation: yb-c-shimmer var(--yb-shimmer-duration) var(--yb-shimmer-easing) infinite;
  border-radius: var(--yb-radius-sm);
}

@keyframes yb-c-shimmer {
  0%   { background-position: var(--yb-shimmer-start) 0; }
  100% { background-position: 0 0; }
}

.yb-c-skeleton--text  { height: var(--yb-skeleton-line-sm); margin-block-end: var(--yb-space-2); }
.yb-c-skeleton--title { height: var(--yb-skeleton-line-lg); inline-size: 60%; margin-block-end: var(--yb-space-3); }
.yb-c-skeleton--media { aspect-ratio: var(--yb-card-aspect); inline-size: 100%; border-radius: var(--yb-radius-card-catalog); }

/* ========================================================================
   LAYER F · BADGES + META
   ======================================================================== */

.yb-c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--yb-space-1);
  padding-inline: var(--yb-space-3);
  min-height: var(--yb-badge-height);
  border-radius: var(--yb-radius-badge);
  font-family: var(--yb-font-family);
  font-size: var(--yb-font-size-badge);
  font-weight: var(--yb-font-weight-semibold);
  letter-spacing: var(--yb-letter-spacing-badge);
  line-height: 1.2;
  white-space: nowrap;
  background: var(--yb-mist);
  color: var(--yb-deep-ocean);
  border: var(--yb-border-hairline);
}

.yb-c-badge--product   { background: var(--yb-navy);     color: var(--yb-text-inverse); border-color: var(--yb-navy); }
.yb-c-badge--path      { background: var(--yb-mist);     color: var(--yb-deep-ocean); border-color: var(--yb-teal); }
.yb-c-badge--program   { background: var(--yb-sand);     color: var(--yb-charcoal); border-color: var(--yb-border); }
.yb-c-badge--credential{ background: var(--yb-cyan);     color: var(--yb-deep-ocean); border-color: var(--yb-cyan); }
.yb-c-badge--neutral   { background: transparent;         color: var(--yb-muted); }

.yb-c-status {
  display: inline-flex;
  align-items: center;
  gap: var(--yb-space-2);
  padding-inline: var(--yb-space-3);
  min-height: var(--yb-status-height);
  border-radius: var(--yb-radius-badge);
  font-size: var(--yb-font-size-badge);
  font-weight: var(--yb-font-weight-semibold);
  line-height: 1.2;
}
.yb-c-status__dot { inline-size: var(--yb-status-dot); block-size: var(--yb-status-dot); border-radius: var(--yb-radius-full); flex: none; }

.yb-c-status--success { background: var(--yb-color-success-tint); color: var(--yb-success-text); }
.yb-c-status--success .yb-c-status__dot { background: var(--yb-success); }

.yb-c-status--warning { background: var(--yb-color-warning-tint); color: var(--yb-warning-text); }
.yb-c-status--warning .yb-c-status__dot { background: var(--yb-coral-strong); }

.yb-c-status--danger { background: var(--yb-color-danger-tint); color: var(--yb-danger-text); }
.yb-c-status--danger .yb-c-status__dot { background: var(--yb-coral-strong); }

.yb-c-status--info { background: var(--yb-mist); color: var(--yb-deep-ocean); }
.yb-c-status--info .yb-c-status__dot { background: var(--yb-ocean); }

/* MetaRow: definition-list semantics, wraps, keeps logical order in RTL. */
.yb-c-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--yb-space-2) var(--yb-space-5);
  margin: 0;
  font-size: var(--yb-font-size-metadata);
  color: var(--yb-muted);
}
.yb-c-meta__item { display: inline-flex; align-items: center; gap: var(--yb-space-1); }
.yb-c-meta__sep { color: var(--yb-border); }
.yb-c-meta__label { font-weight: var(--yb-font-weight-medium); }
.yb-c-meta__value { color: var(--yb-charcoal); font-weight: var(--yb-font-weight-semibold); }

/* ========================================================================
   LAYER G · NAVIGATION
   ======================================================================== */

.yb-c-header {
  background: var(--yb-deep-ocean);
  color: var(--yb-text-inverse);
  border-block-end: var(--yb-border-accent);
}
.yb-c-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yb-grid-gap-tight);
  min-height: var(--yb-header-height-mobile);
}
@media (min-width: 48rem) {
  .yb-c-header__bar { min-height: var(--yb-header-height-desktop); }
}
.yb-c-header__brand { display: inline-flex; align-items: center; gap: var(--yb-space-3); color: inherit; text-decoration: none; }
.yb-c-header__brand img { block-size: var(--yb-logo-height); inline-size: auto; }
.yb-c-header__unit { font-weight: var(--yb-font-weight-bold); font-size: var(--yb-font-size-h4); }
.yb-c-header__unit-sub { display: block; font-size: var(--yb-font-size-caption); font-weight: var(--yb-font-weight-regular); color: var(--yb-mist); }
.yb-c-header__nav { display: none; }
@media (min-width: 64rem) { .yb-c-header__nav { display: flex; gap: var(--yb-space-4); } }
.yb-c-header__link {
  color: var(--yb-mist);
  text-decoration: none;
  font-size: var(--yb-font-size-body-sm);
  font-weight: var(--yb-font-weight-medium);
  padding-inline: var(--yb-space-2);
  border-radius: var(--yb-radius-sm);
  min-height: var(--yb-touch-target-min);
  display: inline-flex;
  align-items: center;
}
.yb-c-header__link:hover, .yb-c-header__link[aria-current="page"] { color: var(--yb-text-inverse); }
.yb-c-header__link[aria-current="page"] { box-shadow: inset 0 calc(var(--yb-space-neg-hairline) * var(--yb-border-width-focus)) 0 var(--yb-cyan); }

/* MobileMenu trigger is only meaningful below the desktop breakpoint. */
.yb-c-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--yb-touch-target-min);
  block-size: var(--yb-touch-target-min);
  background: transparent;
  border: var(--yb-border-hairline);
  border-radius: var(--yb-radius-cta-sm);
  color: var(--yb-text-inverse);
  cursor: pointer;
}
@media (min-width: 64rem) { .yb-c-burger { display: none; } }

.yb-c-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(var(--yb-drawer-width-mobile), var(--yb-drawer-max-inline));
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--yb-drawer-bg);
  color: var(--yb-text-inverse);
  border-start-end-radius: var(--yb-radius-drawer);
  border-end-end-radius: var(--yb-radius-drawer);
  transform: translateX(100%);
  transition: transform var(--yb-drawer-transition);
  overflow-y: auto;
  overscroll-behavior: contain;
}
[dir="rtl"] .yb-c-drawer { transform: translateX(-100%); }
.yb-c-drawer[data-open="true"] { transform: translateX(0); }
@media (min-width: 48rem) {
  .yb-c-drawer { inline-size: var(--yb-drawer-width-desktop); }
}
@media (prefers-reduced-motion: reduce) {
  .yb-c-drawer, [dir="rtl"] .yb-c-drawer { transform: none; }
  .yb-c-drawer:not([data-open="true"]) { visibility: hidden; }
}

.yb-c-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--yb-space-3);
  padding: var(--yb-space-4);
  border-block-end: var(--yb-border-hairline);
}
.yb-c-drawer__close {
  inline-size: var(--yb-touch-target-min);
  block-size: var(--yb-touch-target-min);
  border-radius: var(--yb-radius-cta-sm);
  background: transparent;
  border: var(--yb-border-hairline);
  color: var(--yb-text-inverse);
  cursor: pointer;
}
.yb-c-drawer__body { padding: var(--yb-space-4); }
.yb-c-drawer__link {
  display: block;
  padding-block: var(--yb-space-3);
  color: var(--yb-mist);
  text-decoration: none;
  border-block-end: var(--yb-border-hairline);
  min-height: var(--yb-touch-target-min);
}
.yb-c-drawer__link:hover { color: var(--yb-cyan); }

/* Overlay sits behind drawer + modal. */
.yb-c-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--yb-overlay-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--yb-transition-base), visibility var(--yb-transition-base);
}
.yb-c-overlay[data-open="true"] { opacity: 1; visibility: visible; }

/* SearchBox */
.yb-c-search { display: flex; gap: var(--yb-space-2); align-items: stretch; }
.yb-c-search__field { position: relative; flex: 1 1 auto; min-inline-size: 0; }
.yb-c-search__input {
  inline-size: 100%;
  min-height: var(--yb-input-height);
  padding-inline: var(--yb-space-4) var(--yb-space-10);
  padding-block: var(--yb-space-2);
  font-family: var(--yb-font-family);
  font-size: var(--yb-font-size-body);
  color: var(--yb-charcoal);
  background: var(--yb-color-surface);
  border: var(--yb-border-strong);
  border-radius: var(--yb-radius-input);
}
.yb-c-search__input::placeholder { color: var(--yb-muted); }
.yb-c-search__submit {
  position: absolute;
  inset-inline-end: var(--yb-space-1);
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: var(--yb-touch-target-min);
  block-size: var(--yb-touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--yb-radius-cta-sm);
  color: var(--yb-navy);
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .yb-c-search__submit { transform: none; inset-block-start: var(--yb-space-2); block-size: calc(var(--yb-input-height) - var(--yb-space-4)); }
}

/* Breadcrumbs: nav > ol. Separator is a logical inline element so it
   flips with the reading direction automatically. */
.yb-c-crumbs { font-size: var(--yb-font-size-body-sm); }
.yb-c-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--yb-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.yb-c-crumbs__item { display: inline-flex; align-items: center; gap: var(--yb-space-2); }
.yb-c-crumbs__sep { color: var(--yb-muted); }
.yb-c-crumbs__link { color: var(--yb-link); text-decoration: none; }
.yb-c-crumbs__link:hover { color: var(--yb-link-hover); text-decoration: underline; }
.yb-c-crumbs__current { color: var(--yb-charcoal); font-weight: var(--yb-font-weight-semibold); }

/* ========================================================================
   LAYER H · CARD SYSTEM (PHASE 4)
   Reusable, modular card architecture with seven distinct card families.
   Each family maintains distinct visual hierarchy, spacing and information density.
   ======================================================================== */

.yb-c-card,
.course-card,
.yb-course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--yb-color-surface, #ffffff);
  border: var(--yb-border-hairline, 1px solid #CBD5E1);
  border-radius: var(--yb-radius-card-catalog, 1rem);
  box-shadow: var(--yb-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
  overflow: hidden;
  height: 100%;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .yb-c-card,
  .course-card,
  .yb-course-card { transition: none !important; }
}
.yb-c-card:hover,
.course-card:hover,
.yb-course-card:hover {
  box-shadow: 0 10px 25px -5px rgba(6, 59, 102, 0.12), 0 8px 10px -6px rgba(6, 59, 102, 0.08);
  border-color: var(--yb-navy, #063B66);
}
@media (hover: hover) and (min-width: 48rem) {
  .yb-c-card:hover,
  .course-card:hover,
  .yb-course-card:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .yb-c-card:hover,
  .course-card:hover,
  .yb-course-card:hover { transform: none !important; }
}

/* Featured = larger radius, prominent shadow */
.yb-c-card--featured {
  border-radius: var(--yb-radius-card-featured, 1.25rem);
}

/* Standardized Media Ratios (Section 15) */
.yb-media--16-9 {
  aspect-ratio: 16 / 9;
}
.yb-media--square {
  aspect-ratio: 1 / 1;
}

.yb-c-card__media {
  position: relative;
  inline-size: 100%;
  background: var(--yb-deep-ocean, #072F3A);
  overflow: hidden;
  flex: none;
}
.yb-c-card__media img,
.yb-c-card__img,
.course-card-image,
.yb-course-card img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}
.yb-c-card:hover .yb-c-card__img,
.yb-c-card:hover .yb-c-card__media img,
.course-card:hover .course-card-image,
.yb-course-card:hover img {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .yb-c-card:hover .yb-c-card__img,
  .yb-c-card:hover .yb-c-card__media img,
  .course-card:hover .course-card-image,
  .yb-course-card:hover img { transform: none !important; }
}

/* Fallback Media Placeholder (Section 13 & 15: Zero broken containers) */
.yb-c-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--yb-deep-ocean, #072F3A) 0%, var(--yb-navy, #063B66) 100%);
  color: var(--yb-cyan, #26C6B7);
  padding: 1rem;
}
.yb-c-card__placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.yb-c-card__placeholder-logo {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--yb-cyan, #26C6B7);
}
.yb-c-card__placeholder-title {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.8);
  max-inline-size: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badges Region */
.yb-c-card__badges {
  position: absolute;
  inset-block-start: var(--yb-space-3, 0.75rem);
  inset-inline-start: var(--yb-space-3, 0.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--yb-space-2, 0.5rem);
  z-index: 2;
}
.yb-c-card__badges--split {
  inset-inline-start: var(--yb-space-3, 0.75rem);
  inset-inline-end: var(--yb-space-3, 0.75rem);
  justify-content: space-between;
}

/* Additional Badge Variants */
.yb-c-badge--domain {
  background: rgba(6, 59, 102, 0.92);
  color: #ffffff;
  border: 1px solid rgba(38, 198, 183, 0.4);
  backdrop-filter: blur(4px);
}
.yb-c-badge--access {
  background: var(--yb-teal, #0B6F7A);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.yb-c-badge--capstone {
  background: var(--yb-coral-strong, #FF6B4A);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.yb-c-badge--case {
  background: var(--yb-teal, #0B6F7A);
  color: #ffffff;
}
.yb-c-badge--institution {
  background: var(--yb-navy, #063B66);
  color: #ffffff;
}

/* Card Body */
.yb-c-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--yb-space-3, 0.75rem);
  padding: 1.25rem 1.5rem;
  flex: 1 1 auto;
  background: inherit;
}
.yb-c-card--featured .yb-c-card__body {
  padding: 1.5rem;
}

/* Card Header (for Path, Program, Institution) */
.yb-c-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem 0.5rem;
  flex-wrap: wrap;
}
.yb-c-card__header--split {
  justify-content: space-between;
}

/* Eyebrow */
.yb-c-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--yb-muted, #64748B);
  margin: 0;
}
.yb-c-card__eyebrow--teal {
  color: var(--yb-teal, #0B6F7A);
}

/* Title & Links */
.yb-c-card__title {
  font-family: inherit;
  font-weight: 700;
  line-height: var(--yb-line-height-heading, 1.35);
  margin: 0;
  color: var(--yb-navy, #063B66);
}
.yb-c-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.yb-c-card__title a:hover {
  color: var(--yb-teal, #0B6F7A);
  text-decoration: underline;
}

/* 1.1 CourseCardCompact Specifics (Catalog Comparison) */
.yb-c-card--course-compact {
  border-radius: var(--yb-radius-card-catalog, 1rem);
}
.yb-c-card__title--compact {
  font-size: 1rem; /* Exactly 16px */
  min-height: 2.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yb-c-card__meta-wrap {
  margin-block-start: auto;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--yb-mist, #E9F1F0);
}
.yb-c-card__price-section {
  padding-block-start: 0.25rem;
}
.yb-c-card__price-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.yb-c-card__price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--yb-navy, #063B66);
}
.yb-c-card__price--free {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--yb-teal, #0B6F7A);
}
.yb-c-card__price-sub {
  font-size: 0.75rem;
  color: var(--yb-muted, #64748B);
}

/* 1.2 CourseCardRich Specifics (Homepage Featured Presentation) */
.yb-c-card--course-rich .yb-c-card__title--rich {
  font-size: clamp(1.125rem, 1.8vw, 1.35rem);
  min-height: 3.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yb-c-card__excerpt--rich {
  font-size: 0.875rem;
  color: var(--yb-charcoal, #12252A);
  opacity: 0.85;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yb-c-card__meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--yb-charcoal, #12252A);
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--yb-mist, #E9F1F0);
}
.yb-c-card__meta-tag--highlight {
  color: var(--yb-teal, #0B6F7A);
}
.yb-c-card__meta-sep {
  color: var(--yb-border, #CBD5E1);
}

/* 1.3 PathCard Specifics (Progression & Specialization) */
.yb-c-card--path {
  border-inline-start: 4px solid var(--yb-cyan, #26C6B7);
}
.yb-c-card__title--path {
  font-size: 1.15rem;
}
.yb-c-card__excerpt--path {
  font-size: 0.875rem;
  color: var(--yb-muted, #64748B);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yb-c-progression {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0;
}
.yb-c-progression__track {
  display: flex;
  gap: 0.35rem;
  inline-size: 100%;
}
.yb-c-progression__step {
  block-size: 4px;
  flex: 1 1 0%;
  border-radius: 2px;
  background: var(--yb-mist, #E9F1F0);
}
.yb-c-progression__step.is-active {
  background: var(--yb-cyan, #26C6B7);
}
.yb-c-progression__text {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--yb-deep-ocean, #072F3A);
}
.yb-c-card__credential-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--yb-teal, #0B6F7A);
  font-weight: 600;
}
.yb-c-card__credential-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--yb-radius-full, 9999px);
  background: var(--yb-cyan, #26C6B7);
  flex: none;
}

/* 1.4 ProfessionalProgramCard Specifics (Applied Executive & Capstone) */
.yb-c-card--program {
  border: 1.5px solid var(--yb-deep-ocean, #072F3A);
  border-block-start: 4px solid var(--yb-deep-ocean, #072F3A);
}
.yb-c-card__title--program {
  font-size: 1.25rem;
}
.yb-c-card__excerpt--program {
  font-size: 0.875rem;
  color: var(--yb-muted, #64748B);
  line-height: 1.6;
  margin: 0;
}
.yb-c-card__program-specs {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: #F7F8F6;
  padding: 0.75rem;
  border-radius: var(--yb-radius-sm, 0.5rem);
  font-size: 0.8125rem;
  border: 1px solid var(--yb-mist, #E9F1F0);
}
.yb-c-card__spec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.yb-c-card__spec-label {
  color: var(--yb-muted, #64748B);
  font-weight: 600;
}
.yb-c-card__spec-val {
  color: var(--yb-deep-ocean, #072F3A);
  font-weight: 700;
}

/* 1.5 CredentialCard Specifics (Achievement & Verification) */
.yb-c-card--credential {
  background: #FAF7F0;
  border: 1.5px solid #E2D7BE;
  box-shadow: 0 2px 8px rgba(11, 111, 122, 0.06);
}
.yb-c-card__credential-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.yb-c-card__specimen-area {
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(241, 235, 215, 0.4);
  border-block-end: 1px dashed #E2D7BE;
}
.yb-c-card__specimen-area .yb-media--square {
  inline-size: 96px;
  block-size: 96px;
  border-radius: var(--yb-radius-card-catalog, 1rem);
  border: 2px solid var(--yb-cyan, #26C6B7);
  box-shadow: var(--yb-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
  overflow: hidden;
  background: #ffffff;
}
.yb-c-credential-symbol {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--yb-navy, #063B66);
  letter-spacing: 0.05em;
}
.yb-c-card__title--credential {
  font-size: 1.125rem;
}
.yb-c-card__credential-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8125rem;
  border-block-start: 1px solid #E2D7BE;
  padding-block-start: 0.75rem;
}
.yb-c-card__meta-row {
  margin: 0;
  display: flex;
  gap: 0.5rem;
}
.yb-c-card__meta-k {
  color: var(--yb-muted, #64748B);
  font-weight: 600;
}
.yb-c-card__meta-v {
  color: var(--yb-deep-ocean, #072F3A);
  font-weight: 700;
}

/* 1.6 CaseStudyCard Specifics (Research & Regional Application) */
.yb-c-card--case {
  border-inline-start: 4px solid var(--yb-teal, #0B6F7A);
}
.yb-c-card__title--case {
  font-size: 1.15rem;
}
.yb-c-card__excerpt--case {
  font-size: 0.875rem;
  color: var(--yb-muted, #64748B);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 1.7 ArticleCard Specifics (Editorial Knowledge) */
.yb-c-card--article {
  background: var(--yb-color-surface, #ffffff);
  border: 1px solid var(--yb-mist, #E9F1F0);
}
.yb-c-card__title--article {
  font-size: 1.125rem;
}
.yb-c-card__excerpt--article {
  font-size: 0.875rem;
  color: var(--yb-muted, #64748B);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yb-c-card__article-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--yb-muted, #64748B);
  font-weight: 500;
}

/* 1.8 InstitutionalTrainingCard Specifics (Organizational Learning) */
.yb-c-card--institutional {
  border: 1.5px solid var(--yb-navy, #063B66);
  border-block-start: 4px solid var(--yb-navy, #063B66);
}
.yb-c-card__title--institutional {
  font-size: 1.25rem;
}
.yb-c-card__excerpt--institutional {
  font-size: 0.875rem;
  color: var(--yb-muted, #64748B);
  line-height: 1.6;
  margin: 0;
}
.yb-c-card__institutional-specs {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(233, 241, 240, 0.45);
  padding: 0.75rem;
  border-radius: var(--yb-radius-sm, 0.5rem);
  font-size: 0.8125rem;
  border: 1px solid var(--yb-mist, #E9F1F0);
}

/* Card States: Unavailable & Disabled */
.yb-c-card--unavailable {
  opacity: 0.85;
}
.yb-c-btn--disabled {
  background: #E2E8F0;
  color: #64748B;
  cursor: not-allowed;
  pointer-events: none;
  font-size: 0.875rem;
  padding: 0.65rem 1rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Card Footer: Always Pinned to Bottom */
.yb-c-card__footer {
  margin-block-start: auto;
  padding-block-start: var(--yb-space-3, 0.75rem);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Directional Arrow helper for CTAs */
.yb-c-btn__arrow {
  display: inline-block;
  margin-inline-start: 0.35rem;
  user-select: none;
}

/* Skeleton Loading Card (Section 13) */
.yb-c-card--skeleton {
  pointer-events: none;
  border-color: #E2E8F0;
}
.yb-c-skeleton--badge {
  block-size: 20px;
  inline-size: 70px;
  border-radius: 9999px;
  margin-block-end: 0.5rem;
}
.yb-c-skeleton--btn {
  block-size: 42px;
  inline-size: 100%;
  border-radius: 0.75rem;
  margin-block-start: auto;
}

/* State Symbols (Zero icon-library dependencies) */
.yb-c-state__symbol {
  font-size: 2.25rem;
  line-height: 1;
  color: var(--yb-teal, #0B6F7A);
  font-weight: 300;
  user-select: none;
}
.yb-c-state__symbol--error {
  color: var(--yb-coral-strong, #FF6B4A);
  font-weight: 700;
}

/* Legacy & backward compatibility aliases */
.yb-c-card--compact {
  flex-direction: column;
}
.yb-c-card--deep {
  background: var(--yb-deep-ocean, #072F3A);
  border-color: var(--yb-deep-ocean, #072F3A);
  color: var(--yb-text-inverse, #ffffff);
}
.yb-c-card--deep .yb-c-card__title,
.yb-c-card--deep .yb-c-card__title a {
  color: var(--yb-text-inverse, #ffffff);
}
.yb-c-card--deep .yb-c-card__excerpt {
  color: var(--yb-mist, #E9F1F0);
}
.yb-c-card--deep .yb-c-card__media {
  background: var(--yb-navy, #063B66);
}


/* ========================================================================
   LAYER I · DATA CONTROLS
   ======================================================================== */

.yb-c-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yb-space-3);
  align-items: center;
  padding: var(--yb-space-4);
  background: var(--yb-mist);
  border-radius: var(--yb-radius-surface);
}
.yb-c-filterbar__group { display: flex; flex-wrap: wrap; gap: var(--yb-space-2); align-items: center; }
.yb-c-filterbar__label {
  font-size: var(--yb-font-size-metadata);
  font-weight: var(--yb-font-weight-semibold);
  color: var(--yb-deep-ocean);
  margin-inline-end: var(--yb-space-1);
}
.yb-c-filterbar__spacer { margin-inline-start: auto; }

.yb-c-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--yb-space-2);
  min-height: var(--yb-pill-height);
  padding-inline: var(--yb-space-4);
  border-radius: var(--yb-radius-badge);
  border: var(--yb-border-strong);
  background: var(--yb-color-surface);
  color: var(--yb-navy);
  font-family: var(--yb-font-family);
  font-size: var(--yb-font-size-body-sm);
  font-weight: var(--yb-font-weight-medium);
  cursor: pointer;
  transition: background-color var(--yb-transition-fast), border-color var(--yb-transition-fast);
}
.yb-c-chip:hover { border-color: var(--yb-teal); background: var(--yb-sand); }
.yb-c-chip[aria-pressed="true"], .yb-c-chip[aria-selected="true"] {
  background: var(--yb-navy);
  border-color: var(--yb-navy);
  color: var(--yb-text-inverse);
}

/* FilterDrawer reuses the drawer shell. */
.yb-c-filterdrawer__body { padding: var(--yb-space-4); display: flex; flex-direction: column; gap: var(--yb-space-5); }
.yb-c-filterdrawer__actions { display: flex; gap: var(--yb-space-2); padding-block: var(--yb-space-4); }

/* Tabs — WAI-ARIA tabs pattern with roving tabindex. */
.yb-c-tabs__list {
  display: flex;
  gap: var(--yb-space-1);
  border-block-end: var(--yb-border-hairline);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.yb-c-tabs__tab {
  flex: none;
  min-height: var(--yb-touch-target-min);
  padding-inline: var(--yb-space-4);
  background: transparent;
  border: 0;
  border-block-end: var(--yb-border-width-accent) solid transparent;
  color: var(--yb-muted);
  font-family: var(--yb-font-family);
  font-size: var(--yb-font-size-body-sm);
  font-weight: var(--yb-font-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--yb-transition-fast), border-color var(--yb-transition-fast);
}
.yb-c-tabs__tab:hover { color: var(--yb-navy); }
.yb-c-tabs__tab[aria-selected="true"] { color: var(--yb-navy); border-block-end-color: var(--yb-cyan); }
.yb-c-tabs__panel { padding-block: var(--yb-space-5); }
.yb-c-tabs__panel[hidden] { display: none; }
.yb-c-tabs__panel:not([hidden]) {
  animation: yb-tab-fade 130ms ease-out;
}
@keyframes yb-tab-fade {
  from { opacity: 0.7; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .yb-c-tabs__panel:not([hidden]) {
    animation: none !important;
  }
}

/* Carousel — scroll-snap, no JS required to scroll. */
.yb-c-carousel { position: relative; }
.carousel-track,
.yb-c-carousel__track,
.yb-course-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(var(--yb-carousel-item-flex), var(--yb-carousel-item-min));
  gap: var(--yb-grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-block-end: var(--yb-space-3);
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  transition: transform 350ms ease-out;
}
.yb-c-carousel__track > * { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  .carousel-track,
  .yb-c-carousel__track,
  .yb-course-rail { scroll-snap-type: none; scroll-behavior: auto; transition: none !important; }
}
.yb-c-carousel__controls {
  display: flex;
  gap: var(--yb-space-2);
  justify-content: flex-end;
  margin-block-start: var(--yb-space-3);
}
.button,
.yb-c-btn,
.yb-cta-btn,
.yb-c-carousel__btn {
  inline-size: var(--yb-touch-target-min);
  block-size: var(--yb-touch-target-min);
  border-radius: var(--yb-radius-badge);
  border: var(--yb-border-strong);
  background: var(--yb-color-surface);
  color: var(--yb-navy);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
}

/* Contextual Mobile Sticky CTA (Phase 11 edX Functional Motion) */
.yb-sticky-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(7, 47, 58, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(38, 198, 183, 0.3);
  padding: 0.75rem 1rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms ease, opacity 200ms ease;
}
.yb-sticky-mobile-cta.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .yb-sticky-mobile-cta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .yb-sticky-mobile-cta { transition: none !important; }
}

/* PaginationDots */
.yb-c-dots { display: flex; align-items: center; justify-content: center; gap: var(--yb-space-2); }
.yb-c-dots__dot {
  inline-size: var(--yb-touch-target-min);
  block-size: var(--yb-touch-target-min);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.yb-c-dots__dot::after {
  content: "";
  inline-size: var(--yb-dot-size);
  block-size: var(--yb-dot-size);
  border-radius: var(--yb-radius-full);
  background: var(--yb-border);
  border: var(--yb-border-strong);
  transition: background-color var(--yb-transition-fast), transform var(--yb-transition-fast);
}
.yb-c-dots__dot[aria-current="true"]::after { background: var(--yb-navy); transform: scale(var(--yb-dot-scale-active)); }
@media (prefers-reduced-motion: reduce) { .yb-c-dots__dot[aria-current="true"]::after { transform: none; } }

/* StickyLearnerCTA — inline-start aware, safe-area aware on mobile. */
.yb-c-sticky-cta {
  position: sticky;
  inset-block-end: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--yb-space-3);
  padding: var(--yb-space-3) var(--yb-space-4);
  padding-block-end: max(var(--yb-space-3), env(safe-area-inset-bottom));
  background: var(--yb-deep-ocean);
  color: var(--yb-text-inverse);
  border-start-start-radius: var(--yb-radius-surface);
  border-start-end-radius: var(--yb-radius-surface);
  box-shadow: var(--yb-shadow-lg);
}
.yb-c-sticky-cta__label { font-size: var(--yb-font-size-body-sm); margin: 0; }
.yb-c-sticky-cta__actions { display: flex; gap: var(--yb-space-2); margin-inline-start: auto; flex-wrap: wrap; }
.yb-c-sticky-cta .yb-c-btn--primary { background: var(--yb-cyan); border-color: var(--yb-cyan); color: var(--yb-deep-ocean); }
.yb-c-sticky-cta .yb-c-btn--primary:hover { background: var(--yb-mist); border-color: var(--yb-mist); }
.yb-c-sticky-cta .yb-c-btn--ghost { color: var(--yb-mist); border-color: var(--yb-mist); background: transparent; }
.yb-c-sticky-cta .yb-c-btn--ghost:hover { color: var(--yb-deep-ocean); background: var(--yb-mist); }

/* ========================================================================
   LAYER J · CALLOUT
   ======================================================================== */

.yb-c-callout {
  display: flex;
  gap: var(--yb-space-3);
  align-items: flex-start;
  padding: var(--yb-space-4) var(--yb-space-5);
  border-radius: var(--yb-radius-callout);
  border-inline-start: var(--yb-border-width-strong) solid var(--yb-teal);
  background: var(--yb-mist);
  font-size: var(--yb-font-size-body-sm);
}
.yb-c-callout--info     { background: var(--yb-mist); border-inline-start-color: var(--yb-ocean); }
.yb-c-callout--success  { background: var(--yb-color-success-tint); border-inline-start-color: var(--yb-success); color: var(--yb-success-text); }
.yb-c-callout--warning  { background: var(--yb-color-warning-tint); border-inline-start-color: var(--yb-coral-strong); color: var(--yb-warning-text); }
.yb-c-callout--danger   { background: var(--yb-color-danger-tint);  border-inline-start-color: var(--yb-coral-strong);  color: var(--yb-danger-text); }
.yb-c-callout__icon { flex: none; }

/* ========================================================================
   LAYER K · MODAL
   ======================================================================== */

.yb-c-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: var(--yb-space-4);
  background: var(--yb-overlay-bg);
}
.yb-c-modal__panel {
  inline-size: 100%;
  max-inline-size: var(--yb-modal-max);
  max-block-size: var(--yb-modal-max-block);
  overflow-y: auto;
  background: var(--yb-color-surface);
  color: var(--yb-charcoal);
  border-radius: var(--yb-radius-modal);
  box-shadow: var(--yb-shadow-lg);
  padding: var(--yb-space-6);
}
.yb-c-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--yb-space-3); margin-block-end: var(--yb-space-4); }
.yb-c-modal__close {
  inline-size: var(--yb-touch-target-min);
  block-size: var(--yb-touch-target-min);
  border-radius: var(--yb-radius-cta-sm);
  border: var(--yb-border-strong);
  background: var(--yb-color-surface);
  color: var(--yb-navy);
  cursor: pointer;
  flex: none;
}

/* ========================================================================
   LAYER L · FOOTER
   ======================================================================== */

.yb-c-footer {
  background: var(--yb-deep-ocean);
  color: var(--yb-mist);
  padding-block: var(--yb-space-12);
  font-size: var(--yb-font-size-body-sm);
}
.yb-c-footer__grid { display: grid; gap: var(--yb-grid-gap); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .yb-c-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .yb-c-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.yb-c-footer__title {
  font-size: var(--yb-font-size-body);
  font-weight: var(--yb-font-weight-bold);
  color: var(--yb-text-inverse);
  margin-block: 0 var(--yb-space-3);
}
.yb-c-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--yb-space-2); }
.yb-c-footer__link { color: var(--yb-mist); text-decoration: none; min-height: var(--yb-touch-target-min); display: inline-flex; align-items: center; }
.yb-c-footer__link:hover { color: var(--yb-cyan); }
.yb-c-footer__bottom {
  margin-block-start: var(--yb-space-8);
  padding-block-start: var(--yb-space-5);
  border-block-start: var(--yb-border-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--yb-space-3);
  justify-content: space-between;
  font-size: var(--yb-font-size-caption);
  color: var(--yb-mist);
}

/* ========================================================================
   LAYER M · CATALOG ONLY
   Presentation of the Phase 1 component catalog. Namespaced so it cannot
   collide with a production surface.
   ======================================================================== */

.yb-ds-catalog__head { border-block-end: var(--yb-border-hairline); padding-block: var(--yb-space-6); }
.yb-ds-catalog__toc {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background: var(--yb-mist);
  padding-block: var(--yb-space-3);
  margin-block-end: var(--yb-space-6);
}
.yb-ds-catalog__toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yb-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--yb-font-size-caption);
}
.yb-ds-catalog__toc-link { color: var(--yb-navy); text-decoration: none; }
.yb-ds-catalog__toc-link:hover { text-decoration: underline; }
.yb-ds-catalog__group { margin-block-end: var(--yb-space-12); }
.yb-ds-catalog__group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--yb-space-3);
  padding-block-end: var(--yb-space-3);
  border-block-end: 2px solid var(--yb-cyan);
  margin-block-end: var(--yb-space-6);
}
.yb-ds-catalog__group-title { margin: 0; }
.yb-ds-catalog__count { font-size: var(--yb-font-size-caption); color: var(--yb-muted); }
.yb-ds-catalog__spec {
  font-family: var(--yb-font-mono);
  font-size: var(--yb-font-size-caption);
  direction: ltr;
  unicode-bidi: isolate;
  display: block;
  color: var(--yb-muted);
  margin-block-start: var(--yb-space-1);
}
.yb-ds-catalog__swatches { display: grid; gap: var(--yb-grid-gap-tight); grid-template-columns: repeat(auto-fill, minmax(var(--yb-swatch-min), 1fr)); }
.yb-ds-catalog__swatch { border: var(--yb-border-hairline); border-radius: var(--yb-radius-callout); overflow: hidden; background: var(--yb-color-surface); }
.yb-ds-catalog__swatch-chip { block-size: var(--yb-swatch-chip-height); }
.yb-ds-catalog__swatch-body { padding: var(--yb-space-3); }
.yb-ds-catalog__swatch-name {
  font-family: var(--yb-font-mono);
  font-size: var(--yb-font-size-caption);
  direction: ltr;
  unicode-bidi: isolate;
  display: block;
  word-break: break-all;
}
.yb-ds-catalog__swatch-val { font-size: var(--yb-font-size-caption); color: var(--yb-muted); }
.yb-ds-catalog__swatch-use { font-size: var(--yb-font-size-caption); color: var(--yb-muted); display: block; margin-block-start: var(--yb-space-1); }
.yb-ds-catalog__preview {
  padding: var(--yb-space-5);
  border: var(--yb-border-hairline);
  border-radius: var(--yb-radius-surface);
  background: var(--yb-color-surface);
  margin-block-end: var(--yb-space-6);
}
.yb-ds-catalog__sample-title {
  font-size: var(--yb-font-size-body);
  font-weight: var(--yb-font-weight-bold);
  margin-block: 0 0 var(--yb-space-1);
}
.yb-ds-catalog__a11y-note {
  font-size: var(--yb-font-size-caption);
  color: var(--yb-muted);
  margin-block-start: var(--yb-space-3);
}
.yb-ds-catalog__dir-toggle { display: flex; gap: var(--yb-space-2); align-items: center; flex-wrap: wrap; margin-block-end: var(--yb-space-4); }
.yb-ds-catalog__dir-scope[dir="rtl"] { border: 2px dashed var(--yb-cyan); border-radius: var(--yb-radius-surface); padding: var(--yb-space-4); }
.yb-ds-catalog__dir-scope[dir="ltr"] { border: 2px dashed var(--yb-border); border-radius: var(--yb-radius-surface); padding: var(--yb-space-4); }

/* =========================================================================
   PHASE 5 GAP REMEDIATION: BIDIRECTIONAL TEXT & ARABIC TYPOGRAPHY SAFETY
   ========================================================================= */
.yb-bdi,
bdi {
  unicode-bidi: isolate !important;
  direction: inherit !important;
}

/* Mixed Arabic/Latin Typography: Optical balance (+20% for Arabic text) */
.yb-mixed-text,
.yb-filter-chip,
.yb-c-badge,
.yb-c-card__title,
.yb-desktop-filter-bar select,
#yb-catalog-drawer select {
  font-feature-settings: "cv01", "cv02", "ss01";
}

.yb-filter-chip span {
  font-size: 0.8125rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.yb-desktop-filter-bar select option,
#yb-catalog-drawer select option {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
}

/* Offline Resilience Notification Banner */
.yb-offline-banner {
  background: var(--yb-deep-ocean, #072F3A);
  color: var(--yb-cyan, #26C6B7);
  border-block-end: 1px solid rgba(38, 198, 183, 0.3);
  padding: var(--yb-space-2, 0.5rem) var(--yb-space-4, 1rem);
  font-size: 0.8125rem;
  font-weight: var(--yb-font-weight-bold, 700);
  text-align: center;
  transition: all 0.3s ease;
}