@layer components {
  /* ===========================================================
     Ownership: TGK badge and overlay presentation

     This file owns visual tier, state, progress and overlay treatment only.
     It does not determine access. pillar-grid.njk supplies display data;
     tgk-gate.js, tgk-user.js and entitlement functions remain authoritative
     for access decisions. Card geometry belongs to layout-grid.css and card
     anatomy belongs to card-core.css.

     TGK, Tier Badges (Tokenised + Pillar Adaptive)
     =========================================================== */

  .tier-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.35rem 0.75rem;
    /* margin-left: 0.5rem;  remove this */

    border: 1px solid var(--badge-border);
    border-radius: 9999px;

    background: var(--badge-bg);
    color: var(--badge-text);
    box-shadow: var(--badge-shadow);

    font-size: var(--font-size-vs, 0.8rem);
    font-weight: var(--type-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--type-tracking-badge, 0.05em);

    line-height: var(--type-badge-line, 1); /* prevents baseline wobble */
    backdrop-filter: blur(3px);
    transition: all 0.3s ease;
  }

  /* ===========================================================
     Tier Variants
     =========================================================== */

  /* Visitor, Unauthenticated */
  .tier-visitor {
    background: color-mix(in srgb, var(--bg-primary) 80%, var(--text-muted) 20%);
    color: var(--text-accent);
    border-color: var(--section-border);
  }

  /* Shared tier styling (keeps current look for these tiers) */
  .tier-free,
  .tier-member,
  .tier-initiate,
  .tier-adept,
  .tier-verified,
  .tier-free-intro {
    color: var(--badge-text, var(--text-accent));
    box-shadow: 0 0 10px var(--shadow-glow);
    border: 1px solid var(--badge-border, rgba(0,0,0,0.1));
  }

  /* Free */
  .tier-free {
    background: var(--badge-bg, rgba(255,255,255,0.65));
    border-color: color-mix(in srgb, var(--badge-border) 70%, var(--section-border) 30%);
  }

  /* Initiate */
  .tier-member,
  .tier-initiate {
    background: color-mix(in srgb, var(--badge-bg) 80%, var(--bg-primary) 20%);
    border-color: color-mix(in srgb, var(--badge-bg) 60%, var(--section-border) 40%);
  }

  /* Adept (currently identical to Initiate in your source) */
  .tier-adept {
    background: color-mix(in srgb, var(--badge-bg) 80%, var(--bg-primary) 20%);
    border-color: color-mix(in srgb, var(--badge-bg) 60%, var(--section-border) 40%);
  }

  /* Verified (free but requires email verification) */
  .tier-verified {
    background: color-mix(in srgb, var(--badge-bg) 65%, var(--highlight, #bfa865) 35%);
    border-color: color-mix(in srgb, var(--highlight, #bfa865) 55%, var(--section-border) 45%);
  }

  /* Free Intro (marketing tier) */
  .tier-free-intro {
    background: color-mix(in srgb, var(--badge-bg) 70%, var(--bg-primary) 30%);
    border-color: color-mix(in srgb, var(--section-border) 70%, var(--badge-border) 30%);
  }

  /* Admin (accent-page or crimson emphasis) */
  .tier-admin {
    background: color-mix(in srgb, var(--accent-page, #b91c1c) 80%, var(--bg-primary) 20%);
    color: var(--bg-primary);
    border-color: color-mix(in srgb, var(--accent-page, #b91c1c) 70%, #000);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-page, #b91c1c) 35%, transparent);
  }

  /* ===========================================================
     Interactive states
     =========================================================== */

  .tier-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 12px var(--shadow-glow);
    background: color-mix(in srgb, var(--highlight) 25%, var(--badge-bg) 75%);
  }

  .tier-badge:active {
    transform: translateY(1px);
    box-shadow: 0 0 6px var(--shadow-glow);
  }

  /* Force token-driven badge text in light mode (prevents plain-black fallback). */
  html[data-theme="light"] .tier-badge,
  html[data-theme="light"] .gnostic-card .card-badge,
  html[data-theme="light"] .gnostic-card .card-overlay .banner {
    color: color-mix(in srgb, var(--text-accent) 82%, var(--highlight) 18%) !important;
  }

/* Badge + Overlay (softened, tokenised) */
  /* Badge styling (supports legacy .card-badge and new .tier-badge) */
.gnostic-card .card-badge,
.gnostic-card .tier-badge,
.gnostic-card .card-overlay .banner {
  display: inline-block;
  padding: 0.2rem 0.5rem;

  border-radius: 9999px;
  font-size: var(--type-badge-size-tier, 0.68rem);
  font-weight: var(--type-weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;

  background: var(--badge-bg, rgba(255,255,255,0.65));
  color: var(--badge-text, var(--text-accent));
  border: 1px solid var(--badge-border, rgba(0,0,0,0.1));
  box-shadow: 0 0 10px var(--shadow-glow);
  backdrop-filter: var(--badge-blur, blur(3px));
}

/* Badge rail (top right) */
.gnostic-card .card-badges {
  position: absolute;
  top: var(--space-sm, 0.5rem);
  right: var(--space-sm, 0.5rem);
  display: flex;
  gap: var(--space-xs, 0.25rem);
  align-items: center;
  z-index: 5;

  /* Critical: do not block the card link */
  pointer-events: none;
}

/* If you ever want badges clickable later, remove pointer-events above
   and re-enable on the badge itself like this:
   .gnostic-card .card-badges .tier-badge { pointer-events: auto; }
*/

/* Overlay banner (top left) */
.gnostic-card .card-overlay {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 6;

  /* Critical: do not block the card link */
  pointer-events: none;
}
/* Badge rail spans full width */
.gnostic-card .card-badges {
  position: absolute;
  top: var(--space-sm, 0.5rem);
  left: var(--space-sm, 0.5rem);
  right: var(--space-sm, 0.5rem);

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-xs, 0.25rem);
  flex-wrap: wrap;

  z-index: 6;
  pointer-events: none;
}

/* Left group: state badge */
.gnostic-card .state-badge {
  margin-right: auto;
  font-weight: var(--type-weight-bold, 700);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.92;
}

/* Right group: tier + progress badges */
.gnostic-card .card-progress-badges {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs, 0.25rem);
  flex-wrap: wrap;
  max-width: min(72%, 16rem);
}

.gnostic-card .card-progress-badges > .tier-badge {
  margin-left: 0;
}

.gnostic-card .episode-complete-badge {
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
  min-width: max-content;
}

/* Right group: tier badge (dashboard .card-badges rail only) */
.gnostic-card .card-badges .tier-badge.tier-free,
.gnostic-card .card-badges .tier-badge.tier-member,
.gnostic-card .card-badges .tier-badge.tier-initiate,
.gnostic-card .card-badges .tier-badge.tier-adept,
.gnostic-card .card-badges .tier-badge.tier-verified,
.gnostic-card .card-badges .tier-badge.tier-free-intro,
.gnostic-card .card-badges .tier-badge.tier-admin {
  margin-left: auto;
}

  /* ===========================================================
     Four-corner badge system
     TL = progress (JS-injected)   TR = tier
     BL = read time (optional)     BR = state
     Dashboard cards use .card-badges and are unaffected.
     =========================================================== */

  .badge-tl,
  .badge-tr,
  .badge-bl,
  .badge-br {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    line-height: var(--type-badge-line, 1);
  }

  /* Top-left: progress badge placeholder (reading-progress.js injects here) */
  .badge-tl {
    top: var(--space-sm, 0.5rem);
    left: var(--space-sm, 0.5rem);
  }

  /* When the progress badge sits inside .badge-tl or .badge-br the corner div
     handles placement -- suppress the fallback self-positioning inherited from
     dashboard-styles.css so there is no double offset. */
  .badge-tl .episode-complete-badge,
  .badge-br .episode-complete-badge {
    position: static !important;
    max-width: none;
  }

  /* Top-right: tier badge */
  .badge-tr {
    top: var(--space-sm, 0.5rem);
    right: var(--space-sm, 0.5rem);
  }

  /* Bottom-left: read time */
  .badge-bl {
    bottom: var(--space-sm, 0.5rem);
    left: var(--space-sm, 0.5rem);
  }

  /* Bottom-right: state badge */
  .badge-br {
    bottom: var(--space-sm, 0.5rem);
    right: var(--space-sm, 0.5rem);
  }

  /* ===========================================================
     Lightgold badge sheen
     =========================================================== */

  html[data-theme="light"] body.lightgold .tier-badge,
  html[data-theme="dark"] body.lightgold .tier-badge,
  html[data-theme="light"] body.lightgold .gnostic-card .card-badge,
  html[data-theme="dark"] body.lightgold .gnostic-card .card-badge {
    background: linear-gradient(
      165deg,
      color-mix(in srgb, var(--badge-bg) 85%, var(--highlight) 15%),
      color-mix(in srgb, var(--badge-bg) 70%, var(--bg-primary) 30%)
    );
    border-color: color-mix(in srgb, var(--badge-border) 70%, var(--highlight) 30%);
    box-shadow:
      0 1px 6px color-mix(in srgb, var(--shadow-glow) 65%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--highlight) 35%, transparent);
  }

  html[data-theme="light"] body.obsidian .tier-badge,
  html[data-theme="dark"] body.obsidian .tier-badge,
  html[data-theme="light"] body.obsidian .gnostic-card .card-badge,
  html[data-theme="dark"] body.obsidian .gnostic-card .card-badge {
    background: linear-gradient(
      165deg,
      color-mix(in srgb, var(--badge-bg) 85%, var(--highlight) 15%),
      color-mix(in srgb, var(--badge-bg) 70%, var(--bg-primary) 30%)
    );
    border-color: color-mix(in srgb, var(--badge-border) 70%, var(--highlight) 30%);
    box-shadow:
      0 1px 6px color-mix(in srgb, var(--shadow-glow) 70%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--highlight) 35%, transparent);
  }

  html[data-theme="light"] body.eye .tier-badge,
  html[data-theme="dark"] body.eye .tier-badge,
  html[data-theme="light"] body.eye .gnostic-card .card-badge,
  html[data-theme="dark"] body.eye .gnostic-card .card-badge {
    background: linear-gradient(
      165deg,
      color-mix(in srgb, var(--badge-bg) 85%, var(--highlight) 15%),
      color-mix(in srgb, var(--badge-bg) 70%, var(--bg-primary) 30%)
    );
    border-color: color-mix(in srgb, var(--badge-border) 70%, var(--highlight) 30%);
    box-shadow:
      0 1px 6px color-mix(in srgb, var(--shadow-glow) 70%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--highlight) 35%, transparent);
  }

  html[data-theme="light"] body.community .tier-badge,
  html[data-theme="dark"] body.community .tier-badge,
  html[data-theme="light"] body.community .gnostic-card .card-badge,
  html[data-theme="dark"] body.community .gnostic-card .card-badge {
    background: linear-gradient(
      165deg,
      color-mix(in srgb, var(--badge-bg) 85%, var(--highlight) 15%),
      color-mix(in srgb, var(--badge-bg) 70%, var(--bg-primary) 30%)
    );
    border-color: color-mix(in srgb, var(--badge-border) 70%, var(--highlight) 30%);
    box-shadow:
      0 1px 6px color-mix(in srgb, var(--shadow-glow) 70%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--highlight) 35%, transparent);
  }

  /* ===========================================================
     Current Card Badge Treatment
     Shared by image cards, community cards, and dashboard cards.
     =========================================================== */

  .tier-badge,
  .gnostic-card .card-badge,
  .gnostic-card .tier-badge,
  .gnostic-card .card-overlay .banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.45rem;
    max-width: 100%;
    padding: 0.28rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--section-border) 54%, var(--highlight) 46%);
    border-radius: 4px;
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--highlight) 13%, transparent),
        transparent 68%
      ),
      color-mix(in srgb, var(--bg-primary) 72%, transparent);
    color: color-mix(in srgb, var(--text-accent) 88%, var(--text-primary) 12%) !important;
    box-shadow:
      0 8px 18px color-mix(in srgb, var(--bg-primary) 55%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--highlight) 22%, transparent);
    backdrop-filter: blur(6px);
    font-family: var(--font-ui);
    font-size: var(--type-badge-size-tier, 0.68rem);
    font-weight: var(--type-weight-bold, 700);
    line-height: var(--type-badge-line, 1);
    letter-spacing: var(--type-badge-tracking-tier, 0.09em);
    text-transform: uppercase;
    white-space: nowrap;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  }

  .tier-badge:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--highlight) 46%, var(--section-border) 54%);
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--highlight) 16%, transparent),
        transparent 68%
      ),
      color-mix(in srgb, var(--bg-primary) 68%, transparent);
    box-shadow:
      0 8px 18px color-mix(in srgb, var(--bg-primary) 50%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--highlight) 24%, transparent);
  }

  .gnostic-card .state-badge {
    opacity: 1;
  }

  .gnostic-card .episode-complete-badge {
    min-width: max-content;
    padding: 0.28rem 0.62rem;
  }

  .tier-free,
  .tier-member,
  .tier-initiate,
  .tier-adept,
  .tier-verified,
  .tier-free-intro {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--highlight) 13%, transparent),
        transparent 68%
      ),
      color-mix(in srgb, var(--bg-primary) 72%, transparent);
    border-color: color-mix(in srgb, var(--section-border) 54%, var(--highlight) 46%);
    color: color-mix(in srgb, var(--text-accent) 88%, var(--text-primary) 12%) !important;
    box-shadow:
      0 8px 18px color-mix(in srgb, var(--bg-primary) 55%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--highlight) 22%, transparent);
  }

  .badge-br .tier-badge {
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    font-family: inherit;
    font-size: var(--type-badge-size-corner, 0.72rem);
    font-weight: var(--type-weight-bold, 700);
    letter-spacing: var(--type-badge-tracking-corner, 0.12em);
    line-height: var(--type-badge-line, 1);
    text-transform: uppercase;
  }

  .badge-br .state-badge {
    color: var(--text-accent) !important;
    opacity: 0.82;
  }

  .tier-admin {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent-page) 72%, var(--bg-primary) 28%),
        color-mix(in srgb, var(--accent-page) 58%, var(--bg-primary) 42%)
      );
    color: var(--bg-primary);
    border-color: color-mix(in srgb, var(--accent-page) 58%, var(--section-border) 42%);
    box-shadow:
      0 8px 18px color-mix(in srgb, var(--accent-page) 22%, transparent),
      inset 0 1px 0 color-mix(in srgb, var(--highlight) 18%, transparent);
  }

  /* Ownership: dashboard footer badge presentation. A footer uses the
     badge element as compact metadata rather than a visual tier pill.
     Priority is retained because the shared badge palette intentionally
     supplies priority colour and surface declarations above. */
  .dashboard-card__footer .tier-badge {
    margin-left: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
  }

}