/* 2026-05-19 C82: design-system primitives extracted from index.html for bundle budget.
   Token system shipped in C60-C61, hover utilities in C40. CSS variables stay in
   index.html :root (must be available before this stylesheet loads). */

/* ─── Card pattern 1: HERO ───
   Premium gradient surface used for primary greeting + first-action
   contexts. Generous padding, large radius, gold ambient shadow.
   Examples: staff Today "Working today" hero (C51), CEO daily standup. */
.twf-card-hero {
  background-color: #0C1220;
  background-image: linear-gradient(135deg, #0C1220 0%, #1a2944 100%);
  color: #fff;
  border-radius: var(--twf-radius-lg);
  padding: var(--twf-space-6);
  position: relative;
  overflow: hidden;
  box-shadow: var(--twf-shadow-gold);
}
/* Soft gold radial in top-right corner for hero cards — Wilkinson signature */
.twf-card-hero::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(201,168,76,.18) 0%, transparent 70%);
  pointer-events: none;
}
.twf-card-hero > * { position: relative; }
.twf-card-hero--light {
  background: linear-gradient(135deg, #fff 0%, var(--twf-tint-gold) 100%);
  color: #0C1220;
  border: 1px solid rgba(201, 168, 76, .25);
}

/* ─── Card pattern 2: ACTION ───
   Tappable surface that LIFTS on hover. Used for action tiles
   (cockpit quick actions, domain cards, navigation tiles).
   Examples: People action row (C50), HR domain cards (C53). */
.twf-card-action {
  background: #fff;
  border: 1px solid rgba(12, 18, 32, .08);
  border-radius: var(--twf-radius-md);
  padding: var(--twf-space-4);
  cursor: pointer;
  transition: transform var(--twf-duration-fast) var(--twf-ease-out),
              box-shadow var(--twf-duration-med) var(--twf-ease-out),
              border-color var(--twf-duration-fast) var(--twf-ease-out);
  box-shadow: var(--twf-shadow-resting);
  font-family: inherit;
  text-align: left;
}
.twf-card-action:hover {
  transform: translateY(-1px);
  box-shadow: var(--twf-shadow-hover);
  border-color: rgba(201, 168, 76, .35);
}
.twf-card-action:active {
  transform: translateY(0);
  box-shadow: var(--twf-shadow-resting);
}
.twf-card-action--accent-gold  { border-left: 4px solid #C9A84C; }
.twf-card-action--accent-red   { border-left: 4px solid #EF4444; }
.twf-card-action--accent-amber { border-left: 4px solid #F59E0B; }
.twf-card-action--accent-green { border-left: 4px solid #10B981; }
.twf-card-action--accent-navy  { border-left: 4px solid #0C1220; }

/* ─── Card pattern 3: DATA ───
   Minimal chrome for tables, lists, KPI strips. Light border, no
   shadow, tight padding. The eye reads "information," not "do something."
   Examples: People top performers list, leaderboard rows, recent cases. */
.twf-card-data {
  background: #fff;
  border: 1px solid rgba(12, 18, 32, .08);
  border-radius: var(--twf-radius-md);
  overflow: hidden;
}
.twf-card-data > .twf-card-data-row {
  padding: var(--twf-space-3) var(--twf-space-4);
  border-bottom: 1px solid rgba(12, 18, 32, .04);
}
.twf-card-data > .twf-card-data-row:last-child { border-bottom: none; }

/* ─── Card pattern 4: INFO ───
   Soft tinted background for empty states, explainers, trust banners.
   No interaction; pure narrative. Variants by tone.
   Examples: Voice trust framing (C52), HR empty states (C53). */
.twf-card-info {
  background: var(--twf-tint-gold);
  border: 1px solid rgba(201, 168, 76, .20);
  border-radius: var(--twf-radius-lg);
  padding: var(--twf-space-5) var(--twf-space-6);
  color: #0C1220;
}
.twf-card-info--navy  { background: var(--twf-tint-navy); border-color: rgba(12, 18, 32, .10); }
.twf-card-info--green { background: var(--twf-tint-green); border-color: rgba(16, 185, 129, .25); }
.twf-card-info--red   { background: var(--twf-tint-red); border-color: rgba(239, 68, 68, .25); }
.twf-card-info--dashed { border-style: dashed; }

.twf-type-display {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.5px;
  color: #0C1220;
}
.twf-type-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  color: #0C1220;
}
.twf-type-heading {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #0C1220;
}
.twf-type-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #C9A84C;
  line-height: 1.2;
}
.twf-type-caption {
  font-size: 11.5px;
  font-weight: 500;
  color: #666;
  line-height: 1.45;
}

.twf-card-hero--shield::after {
  content: "";
  position: absolute;
  bottom: -30px;
  right: -25px;
  width: 140px;
  height: 168px;
  background-image: url('/twf-shield.svg'), url('/twf-shield.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.twf-card-hero--shield > * { position: relative; z-index: 1; }

/* C40 + C75a hover utilities — replaces inline onmouseover for CSP Stage 2. */
.twf-hover-bg-gold-soft { transition: background .15s; }
.twf-hover-bg-gold-soft:hover { background: rgba(201,168,76,.08) !important; }
.twf-hover-opacity { transition: opacity .15s; }
.twf-hover-opacity:hover { opacity: .9 !important; }
.twf-hover-gold-border { transition: border-color .15s; }
.twf-hover-gold-border:hover { border-color: #C9A84C !important; }
.twf-hover-gold-glow { transition: border-color .2s, box-shadow .2s; }
.twf-hover-gold-glow:hover { border-color: #C9A84C !important; box-shadow: 0 4px 16px rgba(201,168,76,.20) !important; }
.twf-hover-bg-then-border { transition: background .15s, border-color .15s; }
.twf-hover-bg-then-border:hover { background: rgba(201,168,76,.10) !important; border-color: rgba(201,168,76,.60) !important; }


/* ──────────────────────────────────────────────────────────
   2026-05-19 C84: design-system primitives — status pills,
   soft dividers, feature cards. Built on the same C60 token
   foundation so they compose with .twf-card-* and .twf-type-*.
   ────────────────────────────────────────────────────────── */

/* ─── Status pill ───
   Tight uppercase chip for status labels (event status, badge
   counts, role tags). Replaces inline-styled spans on shift rows,
   notification rows, and admin tables.
   Variants by tone: gold/navy/green/red/amber/slate. */
.twf-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: capitalize;
  line-height: 1.4;
  white-space: nowrap;
}
.twf-pill-gold  { background: rgba(201,168,76,.13); color: #8A7530; }
.twf-pill-navy  { background: rgba(12,18,32,.08);  color: #0C1220; }
.twf-pill-green { background: rgba(16,185,129,.13); color: #047857; }
.twf-pill-red   { background: rgba(239,68,68,.13);  color: #B91C1C; }
.twf-pill-amber { background: rgba(245,158,11,.15); color: #92400E; }
.twf-pill-slate { background: rgba(71,85,105,.10);  color: #475569; }
.twf-pill-blue  { background: rgba(59,130,246,.13); color: #1D4ED8; }

/* ─── Soft divider ───
   Subtle 1px horizontal rule. Use between sections within a card
   or between unrelated content groups on a page. Avoids the visual
   weight of a full <hr>. */
.twf-divider-soft {
  height: 1px;
  background: rgba(12,18,32,.06);
  border: none;
  margin: var(--twf-space-4) 0;
}
.twf-divider-soft--tight { margin: var(--twf-space-2) 0; }
.twf-divider-soft--loose { margin: var(--twf-space-6) 0; }

/* ─── Feature card ───
   Icon + heading + body block. Used for empty states (cockpit
   no-data), onboarding step descriptions, and any "explain a
   capability" block. Composes with .twf-type-* for typography.
   Hero variant (.twf-feature-card--hero) gets the gold accent ring. */
.twf-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--twf-space-3);
  padding: var(--twf-space-6);
  text-align: center;
  background: #fff;
  border: 1px solid rgba(12,18,32,.06);
  border-radius: var(--twf-radius-lg);
  max-width: 480px;
  margin: 0 auto;
}
.twf-feature-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,168,76,.10);
  color: #C9A84C;
  border-radius: var(--twf-radius-md);
}
.twf-feature-card-icon svg {
  width: 28px;
  height: 28px;
}
.twf-feature-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: #0C1220;
  margin: 0;
}
.twf-feature-card-body {
  font-size: 13px;
  line-height: 1.55;
  color: #666;
  margin: 0;
  max-width: 360px;
}
.twf-feature-card--hero {
  border-color: rgba(201,168,76,.25);
  box-shadow: 0 4px 16px rgba(201,168,76,.10);
}
.twf-feature-card--hero .twf-feature-card-icon {
  background: linear-gradient(135deg, #C9A84C 0%, #E1C36F 100%);
  color: #0C1220;
}


/* ──────────────────────────────────────────────────────────
   2026-05-19 C88: additional hover utilities for the
   onmouseover sweep. Each maps to a single CSS class so the
   35 inline handlers in index.html can be replaced
   declaratively (CSP Stage 2 prep).
   ────────────────────────────────────────────────────────── */
.twf-hover-bg-navy-soft { transition: background .15s; }
.twf-hover-bg-navy-soft:hover { background: rgba(12,18,32,.04) !important; }

.twf-hover-bg-secondary { transition: background .15s; }
.twf-hover-bg-secondary:hover { background: var(--bg-secondary, rgba(12,18,32,.03)) !important; }

.twf-hover-lift { transition: transform .15s, box-shadow .15s; }
.twf-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(12,18,32,.08); }

.twf-hover-scale-soft { transition: transform .15s, opacity .15s; }
.twf-hover-scale-soft:hover { transform: scale(1.02); opacity: .95; }

.twf-hover-border-and-color-gold { transition: border-color .15s, color .15s; }
.twf-hover-border-and-color-gold:hover { border-color: #C9A84C !important; color: #0C1220 !important; }

.twf-hover-border-and-color-red { transition: border-color .15s, color .15s; }
.twf-hover-border-and-color-red:hover { border-color: #DC2626 !important; color: #DC2626 !important; }

.twf-hover-color-brighten { transition: color .15s; }
.twf-hover-color-brighten:hover { color: rgba(255,255,255,.7) !important; }

.twf-hover-color-gold-dark { transition: color .15s; }
.twf-hover-color-gold-dark:hover { color: var(--gold-dark, #8A7530) !important; }

.twf-hover-shadow-soft { transition: box-shadow .15s; }
.twf-hover-shadow-soft:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; }

.twf-hover-shadow-lift { transition: box-shadow .2s, transform .2s; }
.twf-hover-shadow-lift:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12) !important; transform: translateY(-2px); }

.twf-hover-gold-full { transition: border-color .15s, background .15s, color .15s; }
.twf-hover-gold-full:hover { border-color: #C9A84C !important; background: rgba(201,168,76,.06) !important; color: #C9A84C !important; }

.twf-hover-gold-glow-1px { transition: border-color .2s, box-shadow .2s; }
.twf-hover-gold-glow-1px:hover { border-color: rgba(201,168,76,.5) !important; box-shadow: 0 0 0 1px rgba(201,168,76,.5) !important; }


/* C88b: leftover sweep classes for shift-timeline row + soft-lift tile */
.twf-hover-shift-row { transition: border-color .15s, box-shadow .15s; }
.twf-hover-shift-row:hover, .twf-hover-shift-row:focus-visible {
  border-color: rgba(201,168,76,.5) !important;
  box-shadow: 0 0 0 1px rgba(201,168,76,.18), 0 4px 12px rgba(12,18,32,.05) !important;
  outline: none;
}
.twf-hover-soft-lift { transition: border-color .15s, transform .15s; }
.twf-hover-soft-lift:hover { border-color: rgba(201,168,76,.4) !important; transform: translateY(-1px); }


/* ═════════════════════════════════════════════════════════════════════════════
   C102 (2026-05-20): Native-feel motion primitives.
   CSS-only, opt-in by class, prefers-reduced-motion respected at end of file.
   Adoption pattern: apply class on element creation; restart by toggling.
   ═════════════════════════════════════════════════════════════════════════════ */

@keyframes twf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes twf-fade-slide-up {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,   0); }
}
@keyframes twf-pop-in {
  0%   { opacity: 0; transform: scale(.96); }
  60%  { opacity: 1; transform: scale(1.01); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes twf-modal-slide-up {
  from { opacity: 0; transform: translate3d(-50%, calc(-50% + 16px), 0); }
  to   { opacity: 1; transform: translate3d(-50%, -50%, 0); }
}
@keyframes twf-bn-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Route container — fade + tiny rise on every navigate.
   Restart by adding/removing class with offsetWidth read between. */
.twf-route-enter {
  animation: twf-fade-slide-up .28s cubic-bezier(.2,.7,.2,1) both;
}

/* Modal/dialog entry — slide up + fade. Apply on the modal panel element. */
.twf-modal-enter {
  animation: twf-fade-slide-up .22s cubic-bezier(.2,.7,.2,1) both;
}
/* Center-positioned modals (translate -50% / -50%) — use modal-slide-up variant */
.twf-modal-enter-centered {
  animation: twf-modal-slide-up .22s cubic-bezier(.2,.7,.2,1) both;
}

/* List stagger — children fade-rise with cascading delay.
   Use on a wrapper element with class twf-stagger-children. */
.twf-stagger-children > * {
  animation: twf-fade-slide-up .32s cubic-bezier(.2,.7,.2,1) both;
}
.twf-stagger-children > *:nth-child(1)  { animation-delay: 0ms; }
.twf-stagger-children > *:nth-child(2)  { animation-delay: 40ms; }
.twf-stagger-children > *:nth-child(3)  { animation-delay: 80ms; }
.twf-stagger-children > *:nth-child(4)  { animation-delay: 120ms; }
.twf-stagger-children > *:nth-child(5)  { animation-delay: 160ms; }
.twf-stagger-children > *:nth-child(6)  { animation-delay: 200ms; }
.twf-stagger-children > *:nth-child(7)  { animation-delay: 240ms; }
.twf-stagger-children > *:nth-child(8)  { animation-delay: 280ms; }
.twf-stagger-children > *:nth-child(n+9) { animation-delay: 320ms; }

/* Pop-in — apply to single-element entries like toast, badge, popover */
.twf-pop-in { animation: twf-pop-in .26s cubic-bezier(.2,.7,.2,1) both; }

/* Tactile press feedback — scale 0.97 on :active, springs back on release.
   Use sparingly: high-leverage CTAs only (FABs, primary buttons, nav items). */
.twf-press { transition: transform 80ms cubic-bezier(.2,.7,.2,1); }
.twf-press:active { transform: scale(.97); }

/* Bottom-nav active state — momentary pulse when active class lands.
   Trigger by toggling .is-fresh class on the active button after render. */
.twf-bn-btn.is-fresh { animation: twf-bn-pulse .32s cubic-bezier(.4,0,.2,1) 1; }

/* View Transitions API — when supported, smooth cross-route fades.
   The browser handles the snapshot; we just refine the timing. */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .22s;
    animation-timing-function: cubic-bezier(.2,.7,.2,1);
  }
}

/* Reduced-motion guard — zero out all C102 animations + push fall-through CSS
   transitions down to instant. Honors user OS preference (iOS Settings →
   Accessibility → Motion; macOS System Settings → Accessibility → Display). */
@media (prefers-reduced-motion: reduce) {
  .twf-route-enter,
  .twf-modal-enter,
  .twf-modal-enter-centered,
  .twf-stagger-children > *,
  .twf-pop-in,
  .twf-bn-btn.is-fresh {
    animation: none !important;
  }
  .twf-press:active { transform: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0s; }
}


/* ═════════════════════════════════════════════════════════════════════════════
   C110 (2026-05-20): Branded empty-state CTA pattern.
   Used wherever a route has no data and we want to guide next-action.
   ═════════════════════════════════════════════════════════════════════════════ */

.twf-empty-state-v2 {
  text-align: center;
  padding: 32px 24px;
  border-radius: 14px;
  background: var(--bg-card, #fff);
  border: 1px solid rgba(12,18,32,.08);
}
.twf-empty-state-v2 .twf-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(201,168,76,.12);
  margin-bottom: 14px;
  color: #C9A84C;
}
.twf-empty-state-v2 h3 {
  margin: 0 0 6px;
  font-family: 'Playfair Display', serif;
  color: var(--text-primary, #0C1220);
}
.twf-empty-state-v2 p {
  color: var(--text-muted, #4A5566);
  font-size: 13px;
  margin: 0 auto 18px;
  max-width: 340px;
}
.twf-empty-state-v2 .twf-empty-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
  margin: 0 auto;
}
.twf-empty-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid rgba(12,18,32,.10);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text-primary, #0C1220);
  min-height: 48px;
  transition: background .15s, border-color .15s;
}
.twf-empty-cta:hover { background: rgba(201,168,76,.04); border-color: rgba(201,168,76,.35); }
.twf-empty-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(201,168,76,.12);
  color: #C9A84C;
  flex-shrink: 0;
}
.twf-empty-cta-body { flex: 1; }
.twf-empty-cta-title { display: block; font-weight: 600; font-size: 13px; }
.twf-empty-cta-sub { display: block; font-size: 11px; color: var(--text-muted, #4A5566); margin-top: 2px; }


/* ═════════════════════════════════════════════════════════════════════════════
   C111 (2026-05-20): Rating summary band — 4 inline metrics, no card stack.
   Replaces the 4-card grid on My Ratings. Tightens vertical hierarchy.
   ═════════════════════════════════════════════════════════════════════════════ */

.twf-stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg-card, #fff);
  border: 1px solid rgba(12,18,32,.08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}
.twf-stat-band-cell {
  padding: 12px 14px;
  position: relative;
  text-align: left;
  min-width: 0;
}
.twf-stat-band-cell + .twf-stat-band-cell::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 1px;
  background: rgba(12,18,32,.06);
}
.twf-stat-band-label {
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-muted, #4A5566);
  font-weight: 700;
}
.twf-stat-band-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #0C1220);
  margin-top: 2px;
  line-height: 1.1;
  font-family: 'Playfair Display', serif;
}
.twf-stat-band-sub {
  font-size: 10px;
  color: var(--text-muted, #4A5566);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.twf-stat-band--3 { grid-template-columns: repeat(3, 1fr); }
.twf-stat-band--3 .twf-stat-band-cell { cursor: pointer; }
.twf-stat-band--3 .twf-stat-band-cell:hover { background: rgba(201,168,76,.04); }
@media (max-width: 480px) {
  .twf-stat-band--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .twf-stat-band { grid-template-columns: repeat(2, 1fr); }
  .twf-stat-band-cell:nth-child(odd)::before { display: none; }
  .twf-stat-band-cell:nth-child(n+3) { border-top: 1px solid rgba(12,18,32,.06); }
  .twf-stat-band-value { font-size: 20px; }
}

/* C149 (2026-05-21): hover classes to replace inline onmouseover handlers
   in twf-scheduler.js (CSP Stage 2 prep — drop unsafe-inline). */
.twf-hover-border-gold { transition: border-color .15s; }
.twf-hover-border-gold:hover { border-color: var(--gold) !important; }
.twf-hover-dashed-gold { transition: border-color .15s, background .15s; }
.twf-hover-dashed-gold:hover {
  border-color: var(--gold) !important;
  background: rgba(201, 168, 76, .04) !important;
}

/* ═══════════════════════════════════════════════════════════════
   M40.9 (2026-05-27) — Mobile first-viewport density compression.
   Crispness Section 3 + Playbook page 6: 'first viewport spends too
   much chrome 10-15%; show 2-4 priority cards before the fold.'
   These rules only fire below 768px portrait, leaving the desktop
   visual unchanged.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hero greeting card — drop padding + tighten font sizes. Eyebrow
     loses 1px, display loses ~6px. Net: ~28px reclaimed per render. */
  .twf-card-hero {
    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 14px !important;
  }
  .twf-card-hero .twf-type-eyebrow,
  .twf-card-hero[class*="twf-card-hero--"] .twf-type-eyebrow {
    font-size: 9.5px;
    letter-spacing: 1.2px;
    margin-bottom: 4px !important;
  }
  .twf-card-hero .twf-type-display,
  .twf-card-hero[class*="twf-card-hero--"] .twf-type-display {
    font-size: 26px;
    line-height: 1.05;
  }
  /* Shield watermark — smaller on mobile so it does not steal vertical
     space proportionally. Pseudo-element only. */
  .twf-card-hero--shield::after {
    width: 84px !important;
    height: 84px !important;
    right: -10px !important;
    top: -8px !important;
  }

  /* Profile nudge banner — Tier 3.B.2. Drop margin so it stacks tighter. */
  #twfPhotoNudge {
    margin-bottom: 8px !important;
    padding: 8px 12px !important;
  }
  #twfPhotoNudge div[style*="font-size:13px"] {
    font-size: 12.5px !important;
  }
  #twfPhotoNudge div[style*="font-size:11px"] {
    line-height: 1.3 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   M40.7b (2026-05-27) — Mobile notification bottom-sheet override.
   Notif audit page 5: 'Replace the floating white dropdown with a
   mobile-first sheet that anchors to the bottom on phones and becomes
   a popover only on desktop.'
   Pure CSS — keeps existing dropdown DOM intact, just changes layout
   below the mobile breakpoint. Desktop unchanged.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #notifDropdown {
    /* Override the inline position:absolute;top:60px;right:8px;width:min(380px,...) */
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(78vh, 680px) !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -18px 60px rgba(12, 18, 32, .22) !important;
    border: none !important;
    z-index: 1100 !important;
    animation: twfNotifSheetRise .22s cubic-bezier(.32, .72, 0, 1) 1;
    /* Reserve safe-area inset for iPhone notch */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  /* Drag-handle affordance — small grey pill at the top of the sheet.
     ::before is unused on the existing element so this is additive. */
  #notifDropdown::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 99px;
    background: rgba(12, 18, 32, .18);
    margin: 8px auto 4px;
  }
  /* Backdrop scrim — pseudo-element on body via :has() when dropdown is
     visible. Browsers without :has() simply don't get the scrim — no harm,
     the sheet still renders correctly. */
  body:has(#notifDropdown[style*="display: block"]),
  body:has(#notifDropdown[style*="display:block"]) {
    overflow: hidden;
  }
  body:has(#notifDropdown[style*="display: block"])::after,
  body:has(#notifDropdown[style*="display:block"])::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(12, 18, 32, .42);
    backdrop-filter: blur(2px);
    z-index: 1099;
    pointer-events: none;
    animation: twfNotifSheetFade .18s ease-out 1;
  }
}

@keyframes twfNotifSheetRise {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes twfNotifSheetFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   M40.27 P0 BLOCKER UX — First Days journey overlay dismiss controls
   must always be reachable on mobile portrait. Audit found Continue
   later / X falling off-screen + overlay blocking taps. CSS-only fix:
   pin the X to viewport top-right + add safe-area-aware footer button.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Pin the X close button to viewport top-right regardless of scroll. */
  #twfJourneyOverlay .twf-jr-close {
    position: fixed !important;
    top: max(env(safe-area-inset-top, 0px), 12px) !important;
    right: 12px !important;
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 4px 14px rgba(12, 18, 32, 0.20) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Pin the Continue later footer button so it's always reachable. */
  #twfJourneyOverlay .twf-jr-footer-later {
    position: fixed !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 9998 !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(12, 18, 32, 0.15) !important;
    border-radius: 12px !important;
    color: #0C1220 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    min-height: 48px !important;
    box-shadow: 0 -4px 18px rgba(12, 18, 32, 0.12) !important;
  }
  /* Reserve space at the bottom of the journey card so the pinned
     'Continue later' button doesn't cover content. */
  #twfJourneyOverlay .twf-jr-card {
    padding-bottom: 96px !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   C216 (M40.34) — Disciplinary detail drawer + workflow timeline
   ════════════════════════════════════════════════════════════════ */
.twf-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(12,18,32,.42);
  display: flex;
  justify-content: flex-end;
  animation: twfDrawerFadeIn .18s ease-out;
}
@keyframes twfDrawerFadeIn { from { opacity: 0; } to { opacity: 1; } }
.twf-drawer {
  width: min(520px, 100vw);
  height: 100%;
  background: #fff;
  box-shadow: -24px 0 60px rgba(12,18,32,.22);
  overflow-y: auto;
  animation: twfDrawerSlideIn .22s ease-out;
}
@keyframes twfDrawerSlideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.twf-drawer-head {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(12,18,32,.08);
}
.twf-drawer-head .twf-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: #667085;
  font-weight: 700;
}
.twf-drawer-head h2 { margin: 4px 0 0; font-size: 20px; color: #0C1220; }
.twf-drawer-close {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: rgba(12,18,32,.05);
  border-radius: 10px;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: #0C1220;
}
.twf-drawer-close:hover { background: rgba(12,18,32,.10); }
.twf-drawer-body { padding: 22px 24px 32px; }
.twf-drawer-body h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #667085;
  font-weight: 700;
  margin: 18px 0 6px;
}
.twf-drawer-body p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #344054;
}
.twf-disc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 22px; padding: 0; }
.twf-disc-meta div { padding: 12px; border: 1px solid rgba(12,18,32,.08); border-radius: 8px; }
.twf-disc-meta dt { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #667085; font-weight: 700; }
.twf-disc-meta dd { margin: 4px 0 0; font-size: 13px; color: #0C1220; font-weight: 600; }
.twf-disc-timeline { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.twf-disc-timeline li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.twf-disc-dot { width: 12px; height: 12px; border-radius: 999px; margin-top: 4px; background: #D0D5DD; box-shadow: 0 0 0 4px #F2F4F7; }
.twf-disc-timeline li.is-complete .twf-disc-dot { background: #C9A84C; box-shadow: 0 0 0 4px rgba(201,168,76,.18); }
.twf-disc-timeline strong { display: block; font-size: 13px; color: #0C1220; }
.twf-disc-timeline small { display: block; margin-top: 2px; color: #667085; font-size: 12px; }
@media (max-width: 640px) {
  .twf-drawer { width: 100vw; }
  .twf-disc-meta { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════
   C217 (M40.35) — Notification provenance source badge
   ════════════════════════════════════════════════════════════════ */
.twf-notif-titleline {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.twf-notif-source {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
.twf-notif-source--gold    { background: rgba(201,168,76,.16); color: #7A5D12; }
.twf-notif-source--danger  { background: rgba(185,28,28,.10);  color: #991B1B; }
.twf-notif-source--neutral { background: rgba(12,18,32,.06);   color: #475467; }


/* ════════════════════════════════════════════════════════════════
   C220 (M40.38) — Notification drawer push CTA
   Mobile-discoverable Enable Alerts surface inside the notification
   dropdown. Closes the audit gap where #pushToggleBtn is hidden at
   mobile breakpoints.
   ════════════════════════════════════════════════════════════════ */
.twf-notif-push-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 16px 0;
  padding: 14px 16px;
  border: 1px solid rgba(201,168,76,.28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(201,168,76,.13), rgba(12,18,32,.03));
}
.twf-notif-push-cta[hidden] { display: none !important; }
.twf-notif-push-cta-body { min-width: 0; flex: 1; }
.twf-notif-push-cta strong {
  display: block;
  font-size: 13px;
  color: #0C1220;
  line-height: 1.3;
}
.twf-notif-push-cta span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(12,18,32,.62);
}
.twf-notif-push-cta button {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #C9A84C;
  color: #0C1220;
  font-weight: 800;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.twf-notif-push-cta button:hover:not(:disabled) { background: #B89339; }
.twf-notif-push-cta button:disabled {
  background: rgba(12,18,32,.08);
  color: rgba(12,18,32,.45);
  cursor: not-allowed;
}
@media (max-width: 480px) {
  .twf-notif-push-cta { margin: 12px 12px 0; padding: 12px 14px; }
  .twf-notif-push-cta button { min-height: 44px; padding: 0 16px; }
}


/* C229 Phase A — onfocus/onblur replacements (CSP Stage 2 prep) */
.twf-skip-link {
  position: fixed;
  top: -200%;
  left: 16px;
  padding: 12px 24px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
  font-size: 14px;
  z-index: 100000;
  border-radius: 8px;
  transition: top .2s;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.twf-skip-link:focus,
.twf-skip-link:focus-visible {
  top: 16px;
}
.twf-search-input {
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-body);
  width: 280px;
  max-width: 100%;
  background: var(--input-bg);
  transition: border-color .2s;
}
.twf-search-input:focus,
.twf-search-input:focus-visible {
  border-color: var(--gold);
  outline: none;
}


/* ════════════════════════════════════════════════════════════════
   C236 (M40.54) — Universal reduced-motion guard
   Audit gap: 'Reduced motion support.' Per-component guards exist
   for skeletons + .twf-enter et al but newer animations (drawer,
   notif sheet, cookie banner, ctx menu, push toast) weren't covered.
   This universal rule disables all animations + transitions when the
   user has prefers-reduced-motion: reduce set. Preserves layout +
   opacity transitions for accessibility; just kills motion.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Preserve focus outline transitions for keyboard nav clarity */
  :focus-visible, :focus { transition-duration: 0.001ms !important; }
}


/* ════════════════════════════════════════════════════════════════
   C258 (M41.5) — Mobile leaderboard polish
   Hide dense filter row + Export button by default on mobile;
   show Your Standing + top-3 podium hero instead.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .twf-lb-mobile-hero { display: block !important; }
  .twf-lb-desktop-header > div:last-child { display: none !important; } /* hides desktop window-tabs + Export */
  #lbFilters { display: none !important; }
  /* C264 (audit FIX 5): re-show via class toggle, not fragile style-attribute selector */
  #lbFilters.twf-lb-filters-open { display: flex !important; }
}
@media (min-width: 769px) {
  .twf-lb-mobile-hero { display: none !important; }
}