:root {
  --snf-dock-red: #BC0C1C;
  --snf-dock-gold: #dba17e;
  /* Kept separate for the future weekly jersey-themed dock surface. */
  --snf-dock-surface-top: rgba(188, 12, 28, .99);
  --snf-dock-surface-bottom: rgba(104, 5, 15, .995);
  --snf-dock-surface-glow: rgba(219, 161, 126, .16);
  --snf-dock-controls-height: 52px;
  --snf-dock-raise: 12px;
  --snf-dock-native-safe: env(safe-area-inset-bottom, 0px);
  --snf-dock-app-floor: 20px;
  --snf-dock-safe: max(var(--snf-dock-native-safe), var(--snf-dock-app-floor));
}

.snf-dock,
.snf-dock__spacer { display: none; }

/*
 * v0.1.5 remains deliberately APP ONLY. Safari and normal mobile browsers never
 * satisfy .snf-dock-app, so there is no fixed dock competing with browser UI.
 */
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__spacer {
  display: block;
  width: 100%;
  height: calc(var(--snf-dock-controls-height) + var(--snf-dock-safe) + var(--snf-dock-raise) + 14px);
  min-height: calc(var(--snf-dock-controls-height) + var(--snf-dock-safe) + var(--snf-dock-raise) + 14px);
  flex: 0 0 auto;
  pointer-events: none;
}

/*
 * The iOS Home indicator can reappear temporarily after a tap. Give it a
 * generous dedicated red zone BELOW the controls instead of making the
 * navigation controls themselves taller.
 */
body.snf-dock-ios-app {
  --snf-dock-app-floor: 30px;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock {
  position: fixed;
  z-index: 99980;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: block;
  box-sizing: border-box;
  height: calc(var(--snf-dock-controls-height) + var(--snf-dock-safe));
  padding: 0 7px var(--snf-dock-safe);
  border: 0;
  border-top: 1px solid rgba(219, 161, 126, .48);
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  clip-path: none !important;
  overflow: visible;
  background:
    radial-gradient(circle at 50% -28px, var(--snf-dock-surface-glow), transparent 31%),
    linear-gradient(180deg, var(--snf-dock-surface-top) 0%, var(--snf-dock-surface-bottom) 100%);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .22), inset 0 1px rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  transform: translate3d(0,0,0);
  transition: transform .24s ease, opacity .2s ease;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__inner {
  max-width: 660px;
  height: var(--snf-dock-controls-height);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  position: relative;
}

/*
 * One shared indicator physically glides between dock cells. Keeping the
 * indicator independent of each button avoids the old snap-on underline.
 */
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__active-indicator {
  --snf-dock-indicator-x: 0%;
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 2px;
  width: 20%;
  height: 4px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--snf-dock-indicator-x), 0, 0);
  transition: transform .34s cubic-bezier(.22,.82,.22,1), opacity .16s ease;
  will-change: transform;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__active-indicator::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18px;
  height: 2.5px;
  border-radius: 99px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(219,161,126,.55), #e6b08e, rgba(219,161,126,.55));
  box-shadow: 0 0 8px rgba(219,161,126,.25);
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__active-indicator.is-visible { opacity: 1; }
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__active-indicator.is-no-transition { transition: none !important; }

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.82);
  text-decoration: none !important;
  min-width: 0;
  padding: 6px 2px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: inherit;
  cursor: pointer;
  position: relative;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, transform .18s ease;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item.is-active,
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item.is-anticipating {
  color: var(--snf-dock-gold);
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  transform: translate3d(0,0,0) scale(1);
  transition: transform .24s cubic-bezier(.22,.82,.22,1), filter .24s ease;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item.is-active:not(.snf-dock__item--primary) .snf-dock__icon,
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item.is-anticipating:not(.snf-dock__item--primary) .snf-dock__icon,
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile.snf-drawer-open .snf-dock__item--more .snf-dock__icon {
  transform: translate3d(0,-2px,0) scale(1.055);
  filter: drop-shadow(0 2px 5px rgba(219,161,126,.18));
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__icon svg {
  width: 21px;
  height: 21px;
  display: block;
  overflow: visible;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__label {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .02em;
  color: inherit;
  transform: translate3d(0,0,0);
  transition: transform .24s cubic-bezier(.22,.82,.22,1), color .2s ease, opacity .2s ease;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item.is-active:not(.snf-dock__item--primary) .snf-dock__label,
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item.is-anticipating:not(.snf-dock__item--primary) .snf-dock__label,
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile.snf-drawer-open .snf-dock__item--more .snf-dock__label {
  transform: translate3d(0,-1px,0);
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item--primary {
  z-index: 2;
  padding-top: 0;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item--primary::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 50%;
  width: 68px;
  height: 20px;
  transform: translateX(-50%) scale(.92);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(219,161,126,.28) 0%, rgba(219,161,126,.12) 42%, rgba(74,0,9,0) 74%);
  filter: blur(5px);
  opacity: .62;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,.82,.22,1);
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item--primary.is-active::before,
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item--primary.is-anticipating::before {
  opacity: .92;
  transform: translateX(-50%) scale(1.04);
}

/*
 * Reuse the real 104px/profile jersey component and scale the COMPLETE
 * component. This preserves the proven SNF name/number sizing and centering.
 */
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__avatar-frame {
  width: 50px;
  height: 50px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 3;
  top: -13px;
  left: 50%;
  overflow: visible;
  border-radius: 999px;
  transform: translate3d(-50%,0,0) scale(1);
  filter: drop-shadow(0 6px 7px rgba(66,0,8,.26)) drop-shadow(0 0 4px rgba(219,161,126,.10));
  transition: transform .3s cubic-bezier(.22,.82,.22,1), filter .3s ease;
  will-change: transform;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item--primary.is-active .snf-dock__avatar-frame,
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item--primary.is-anticipating .snf-dock__avatar-frame {
  transform: translate3d(-50%,-2px,0) scale(1.025);
  filter: drop-shadow(0 8px 9px rgba(66,0,8,.28)) drop-shadow(0 0 8px rgba(219,161,126,.23));
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__avatar-frame .snf-dock__jersey-inner {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 104px !important;
  height: 104px !important;
  min-width: 104px !important;
  max-width: none !important;
  transform: scale(.48) !important;
  transform-origin: center center !important;
  border-radius: 999px !important;
  margin: 0 !important;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__avatar-frame--fallback {
  overflow: hidden;
  background: linear-gradient(145deg, #d01628, #970817);
  border: 1px solid rgba(255,255,255,.12);
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__site-mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item--primary .snf-dock__icon--hub-fallback {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  color: #fff;
  transform: translateX(-50%);
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item--primary .snf-dock__label {
  position: absolute;
  z-index: 3;
  left: 50%;
  right: auto;
  bottom: 8px;
  width: max-content;
  max-width: calc(100% - 8px);
  text-align: center;
  transform: translate3d(-50%,0,0);
  color: rgba(255,255,255,.92);
  transition: transform .26s cubic-bezier(.22,.82,.22,1), color .2s ease;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item--primary.is-active .snf-dock__label,
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item--primary.is-anticipating .snf-dock__label {
  color: var(--snf-dock-gold);
  transform: translate3d(-50%,-1px,0);
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item:active { transform: scale(.95); }

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item--primary:active .snf-dock__avatar-frame {
  transform: translate3d(-50%,0,0) scale(.975);
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile.snf-dock-suppressed .snf-dock__spacer {
  display: none;
  height: 0 !important;
  min-height: 0 !important;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile.snf-dock-suppressed .snf-dock {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, calc(100% + 24px), 0);
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile.snf-drawer-open .snf-dock__item--more {
  color: var(--snf-dock-gold);
}


@keyframes snfDockSettle {
  0% { transform: translate3d(0,0,0) scale(1); }
  42% { transform: translate3d(0,-3px,0) scale(1.07); }
  100% { transform: translate3d(0,-2px,0) scale(1.055); }
}

@keyframes snfDockHubSettle {
  0% { transform: translate3d(-50%,0,0) scale(1); }
  44% { transform: translate3d(-50%,-3px,0) scale(1.045); }
  100% { transform: translate3d(-50%,-2px,0) scale(1.025); }
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item.is-arriving:not(.snf-dock__item--primary) .snf-dock__icon {
  animation: snfDockSettle .34s cubic-bezier(.22,.82,.22,1) both;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile .snf-dock__item--primary.is-arriving .snf-dock__avatar-frame {
  animation: snfDockHubSettle .38s cubic-bezier(.22,.82,.22,1) both;
}

@media (prefers-reduced-motion: reduce) {
  .snf-dock,
  .snf-dock__item,
  .snf-dock__item::before,
  .snf-dock__item::after,
  .snf-dock__icon,
  .snf-dock__label,
  .snf-dock__avatar-frame,
  .snf-dock__active-indicator { transition: none !important; animation: none !important; }
}

/* -------------------------------------------------------------------------
 * Persistent app live-state indicators (SNF App 0.2.0)
 * Feed = new-activity dot; Events = LIVE; Games = available challenge count.
 * ---------------------------------------------------------------------- */
body.snf-app-shell .snf-dock__status {
  position: absolute;
  z-index: 7;
  top: 4px;
  left: calc(50% + 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0,-2px,0) scale(.72);
  transform-origin: center;
  transition: opacity .18s ease, transform .22s cubic-bezier(.22,.82,.22,1);
}

body.snf-app-shell .snf-dock__status.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

body.snf-app-shell .snf-dock__status.is-dot {
  width: 9px;
  height: 9px;
  min-width: 9px;
  border-radius: 999px;
  background: #E6B08E;
  border: 1.5px solid #8f0714;
  box-shadow: 0 1px 5px rgba(0,0,0,.28), 0 0 7px rgba(230,176,142,.22);
}

body.snf-app-shell .snf-dock__status.is-pill,
body.snf-app-shell .snf-dock__status.is-count {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #E6B08E;
  border: 1px solid rgba(89,4,14,.62);
  color: #620914;
  box-shadow: 0 2px 6px rgba(0,0,0,.24);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .025em;
  font-variant-numeric: tabular-nums;
}

body.snf-app-shell .snf-dock__status--events {
  top: 3px;
  left: calc(50% + 4px);
  min-width: 25px;
  height: 14px;
  padding: 0 4px;
  font-size: 6.8px;
  letter-spacing: .055em;
}

body.snf-app-shell .snf-dock__status--games {
  top: 3px;
}

@keyframes snfDockLiveAttention {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.24), 0 0 0 0 rgba(230,176,142,0); }
  50% { box-shadow: 0 2px 6px rgba(0,0,0,.24), 0 0 0 4px rgba(230,176,142,.16); }
}

body.snf-app-shell .snf-dock__status.is-attention {
  animation: snfDockLiveAttention 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.snf-app-shell .snf-dock__status { transition: none !important; animation: none !important; }
}

/* -------------------------------------------------------------------------
 * Jersey Mode theme engine (SNF App 0.4.4)
 * Uniform-inspired shell skins. The texture is pure CSS so there are no
 * image assets to download, cache, or scale incorrectly between iOS/Android.
 * ---------------------------------------------------------------------- */
body.snf-app-theme-red-primary {
  --snf-theme-shell: #BC0C1C;
  --snf-theme-surface-top: #c40d20;
  --snf-theme-surface-bottom: #700711;
  --snf-theme-surface-glow: rgba(255,255,255,.12);
  --snf-theme-nav: rgba(255,255,255,.86);
  --snf-theme-active: #efbd9b;
  --snf-theme-stripe: #ffffff;
  --snf-theme-mesh: rgba(255,255,255,.055);
  --snf-theme-border: rgba(255,255,255,.32);
  --snf-theme-sheet-top: #c20d20;
  --snf-theme-sheet-bottom: #ae0b1a;
  --snf-theme-sheet-text: #ffffff;
  --snf-theme-sheet-muted: rgba(255,255,255,.68);
  --snf-theme-sheet-heading: #ffffff;
  --snf-theme-sheet-label: #efbd9b;
  --snf-theme-card-bg: rgba(255,253,250,.96);
  --snf-theme-card-border: rgba(255,255,255,.22);
  --snf-theme-card-title: #7d0915;
  --snf-theme-card-detail: #756a6a;
  --snf-theme-icon-bg: #9d0a18;
  --snf-theme-icon-fg: #f2c5a6;
  --snf-theme-handle: rgba(255,255,255,.34);
  --snf-theme-member-top: #fffdf9;
  --snf-theme-member-bottom: #f1e8dc;
  --snf-theme-member-border: rgba(239,189,155,.72);
  --snf-theme-badge-bg: #efbd9b;
  --snf-theme-badge-fg: #650610;
  --snf-theme-badge-border: rgba(74,0,9,.58);
  --snf-theme-drop-shadow: transparent;
  --snf-theme-avatar-ring: #ffffff;
  --snf-theme-avatar-keyline: rgba(76,0,9,.62);
}

body.snf-app-theme-white-primary {
  --snf-theme-shell: #fbfbfa;
  --snf-theme-surface-top: #ffffff;
  --snf-theme-surface-bottom: #f1f2f1;
  --snf-theme-surface-glow: rgba(17,17,20,.025);
  --snf-theme-nav: #7e111b;
  --snf-theme-active: #BC0C1C;
  --snf-theme-stripe: #BC0C1C;
  --snf-theme-mesh: rgba(32,32,34,.055);
  --snf-theme-border: rgba(188,12,28,.24);
  --snf-theme-sheet-top: #ffffff;
  --snf-theme-sheet-bottom: #f3f4f3;
  --snf-theme-sheet-text: #281f20;
  --snf-theme-sheet-muted: #756a6a;
  --snf-theme-sheet-heading: #8d0916;
  --snf-theme-sheet-label: #9b6148;
  --snf-theme-card-bg: rgba(255,255,255,.92);
  --snf-theme-card-border: rgba(188,12,28,.14);
  --snf-theme-card-title: #7d0915;
  --snf-theme-card-detail: #756a6a;
  --snf-theme-icon-bg: #a30a18;
  --snf-theme-icon-fg: #f5c5a4;
  --snf-theme-handle: rgba(100,60,62,.26);
  --snf-theme-member-top: #b70c1e;
  --snf-theme-member-bottom: #730711;
  --snf-theme-member-border: rgba(188,12,28,.24);
  --snf-theme-badge-bg: #BC0C1C;
  --snf-theme-badge-fg: #ffffff;
  --snf-theme-badge-border: rgba(91,5,14,.34);
  --snf-theme-drop-shadow: transparent;
  --snf-theme-avatar-ring: #BC0C1C;
  --snf-theme-avatar-keyline: rgba(71,0,9,.34);
}

body.snf-app-theme-throwback-red {
  --snf-theme-shell: #BC0C1C;
  --snf-theme-surface-top: #c50e21;
  --snf-theme-surface-bottom: #730711;
  --snf-theme-surface-glow: rgba(255,255,255,.11);
  --snf-theme-nav: rgba(255,255,255,.91);
  --snf-theme-active: #ffffff;
  --snf-theme-stripe: #ffffff;
  --snf-theme-mesh: rgba(255,255,255,.06);
  --snf-theme-border: rgba(17,17,20,.48);
  --snf-theme-sheet-top: #c20d20;
  --snf-theme-sheet-bottom: #ae0b1a;
  --snf-theme-sheet-text: #ffffff;
  --snf-theme-sheet-muted: rgba(255,255,255,.70);
  --snf-theme-sheet-heading: #ffffff;
  --snf-theme-sheet-label: #f3c3a3;
  --snf-theme-card-bg: rgba(255,253,250,.96);
  --snf-theme-card-border: rgba(17,17,20,.18);
  --snf-theme-card-title: #8c0a17;
  --snf-theme-card-detail: #6f6566;
  --snf-theme-icon-bg: #a20a18;
  --snf-theme-icon-fg: #ffffff;
  --snf-theme-handle: rgba(255,255,255,.36);
  --snf-theme-member-top: #fffdf9;
  --snf-theme-member-bottom: #f1e8dc;
  --snf-theme-member-border: rgba(17,17,20,.30);
  --snf-theme-badge-bg: #ffffff;
  --snf-theme-badge-fg: #8c0916;
  --snf-theme-badge-border: #111114;
  --snf-theme-drop-shadow: #111114;
  --snf-theme-avatar-ring: #ffffff;
  --snf-theme-avatar-keyline: #111114;
}

body.snf-app-theme-throwback-white {
  --snf-theme-shell: #fbfbfa;
  --snf-theme-surface-top: #ffffff;
  --snf-theme-surface-bottom: #f0f1f0;
  --snf-theme-surface-glow: rgba(17,17,20,.028);
  /* Mirror White Primary's red dock palette; black is the 1994 drop shadow,
     never the foreground/active color. */
  --snf-theme-nav: #7e111b;
  --snf-theme-active: #BC0C1C;
  --snf-theme-stripe: #BC0C1C;
  --snf-theme-mesh: rgba(17,17,20,.060);
  --snf-theme-border: rgba(17,17,20,.34);
  --snf-theme-sheet-top: #ffffff;
  --snf-theme-sheet-bottom: #f3f4f3;
  --snf-theme-sheet-text: #211b1c;
  --snf-theme-sheet-muted: #6f6666;
  --snf-theme-sheet-heading: #BC0C1C;
  --snf-theme-sheet-label: #111114;
  --snf-theme-card-bg: rgba(255,255,255,.94);
  --snf-theme-card-border: rgba(17,17,20,.14);
  --snf-theme-card-title: #8c0916;
  --snf-theme-card-detail: #6e6465;
  --snf-theme-icon-bg: #BC0C1C;
  --snf-theme-icon-fg: #ffffff;
  --snf-theme-handle: rgba(17,17,20,.28);
  --snf-theme-member-top: #bd0c1f;
  --snf-theme-member-bottom: #760711;
  --snf-theme-member-border: rgba(17,17,20,.34);
  --snf-theme-badge-bg: #111114;
  --snf-theme-badge-fg: #ffffff;
  --snf-theme-badge-border: rgba(188,12,28,.72);
  --snf-theme-drop-shadow: #111114;
  --snf-theme-avatar-ring: #BC0C1C;
  --snf-theme-avatar-keyline: #111114;
}

body.snf-app-theme-rivalry-black {
  --snf-theme-shell: #0e0e11;
  --snf-theme-surface-top: #19191d;
  --snf-theme-surface-bottom: #08080a;
  --snf-theme-surface-glow: rgba(217,160,113,.15);
  --snf-theme-nav: rgba(255,255,255,.86);
  --snf-theme-active: #d9a071;
  --snf-theme-stripe: #BC0C1C;
  --snf-theme-mesh: rgba(255,255,255,.045);
  --snf-theme-border: rgba(217,160,113,.42);
  --snf-theme-sheet-top: #19191d;
  --snf-theme-sheet-bottom: #09090b;
  --snf-theme-sheet-text: #ffffff;
  --snf-theme-sheet-muted: rgba(255,255,255,.62);
  --snf-theme-sheet-heading: #ffffff;
  --snf-theme-sheet-label: #d9a071;
  --snf-theme-card-bg: rgba(37,37,42,.96);
  --snf-theme-card-border: rgba(188,12,28,.34);
  --snf-theme-card-title: #ffffff;
  --snf-theme-card-detail: rgba(255,255,255,.60);
  --snf-theme-icon-bg: #BC0C1C;
  --snf-theme-icon-fg: #d9a071;
  --snf-theme-handle: rgba(217,160,113,.42);
  --snf-theme-member-top: #BC0C1C;
  --snf-theme-member-bottom: #52050d;
  --snf-theme-member-border: rgba(217,160,113,.55);
  --snf-theme-badge-bg: #d9a071;
  --snf-theme-badge-fg: #161113;
  --snf-theme-badge-border: rgba(188,12,28,.72);
  --snf-theme-drop-shadow: transparent;
  --snf-theme-avatar-ring: #BC0C1C;
  --snf-theme-avatar-keyline: #d9a071;
}

body[class*="snf-app-theme-"] .snf-dock {
  --snf-dock-surface-top: var(--snf-theme-surface-top);
  --snf-dock-surface-bottom: var(--snf-theme-surface-bottom);
  --snf-dock-surface-glow: var(--snf-theme-surface-glow);
  --snf-dock-gold: var(--snf-theme-active);
  border-top-color: var(--snf-theme-border) !important;
  background:
    radial-gradient(circle at 50% -28px, var(--snf-theme-surface-glow), transparent 31%),
    radial-gradient(circle at 1px 1px, var(--snf-theme-mesh) 0 1px, transparent 1.15px 100%),
    linear-gradient(180deg, var(--snf-theme-surface-top) 0%, var(--snf-theme-surface-bottom) 100%) !important;
  background-size: auto, 5px 5px, auto !important;
}

body[class*="snf-app-theme-"] .snf-dock {
  /* The jersey stripes are the edge treatment now; avoid a third hairline
     from the normal dock border competing with the uniform band. */
  border-top-color: transparent !important;
}

body[class*="snf-app-theme-"] .snf-dock__inner {
  /* Keep every interactive/control layer, especially the raised Hub jersey,
     cleanly above the decorative uniform stripe band. */
  z-index: 2;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile[class*="snf-app-theme-"] .snf-dock::after {
  content: "";
  position: absolute;
  z-index: 0;
  /* v0.4.7: uniform stripe band gets its own lane. Three pixels of jersey
     color remain above the band, splitting the difference between the too-high
     original treatment and the too-low v0.4.6 position. */
  top: 3px;
  left: 0;
  right: 0;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--snf-theme-stripe) 0 3px,
    transparent 3px 6px,
    var(--snf-theme-stripe) 6px 9px,
    transparent 9px 10px);
  opacity: .98;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.14));
}

/* v0.4.7 dock geometry reset.
   The previous 0.4.4-0.4.6 adjustments layered low-specificity top/bottom/
   transform overrides on top of the original dock rules. Several of those
   declarations could never beat the original selectors, which is why the Hub
   label kept colliding with the avatar and the active indicator wandered into
   the text. Give each visual element one explicit vertical lane instead. */
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile[class*="snf-app-theme-"] .snf-dock__item:not(.snf-dock__item--primary) {
  top: 11px;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile[class*="snf-app-theme-"] .snf-dock__item--primary {
  top: 0;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile[class*="snf-app-theme-"] .snf-dock__item--primary .snf-dock__avatar-frame {
  /* 50px avatar centered on the 3-12px stripe band (center ~= 8px). */
  top: -17px;
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile[class*="snf-app-theme-"] .snf-dock__item--primary .snf-dock__label,
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile[class*="snf-app-theme-"] .snf-dock__item--primary.is-active .snf-dock__label,
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile[class*="snf-app-theme-"] .snf-dock__item--primary.is-anticipating .snf-dock__label {
  /* Avatar bottom is 33px. A fixed 44px label top guarantees a clean gap and
     shares the same visual baseline as the outer four labels. */
  top: 44px;
  bottom: auto;
  transform: translate3d(-50%,0,0);
}

body.snf-dock-enabled.snf-dock-app.snf-dock-mobile[class*="snf-app-theme-"] .snf-dock__active-indicator {
  /* Put the gold marker below every label, in the dedicated safe-area lane,
     rather than through the text. */
  bottom: -10px;
}

/* Tie the raised member jersey to the active uniform without recreating the
   old bulky gold halo. The outer keyline keeps a white ring visible when the
   avatar overlaps white WordPress content above the dock. */
body[class*="snf-app-theme-"] .snf-dock__avatar-frame .snf-dock__jersey-inner {
  box-shadow:
    0 0 0 4px var(--snf-theme-avatar-ring),
    0 0 0 6px var(--snf-theme-avatar-keyline) !important;
}
body[class*="snf-app-theme-"] .snf-dock__avatar-frame--fallback {
  border-color: var(--snf-theme-avatar-ring) !important;
  box-shadow: 0 0 0 1px var(--snf-theme-avatar-keyline);
}

body[class*="snf-app-theme-"] .snf-dock__item {
  color: var(--snf-theme-nav) !important;
}
body[class*="snf-app-theme-"] .snf-dock__item.is-active,
body[class*="snf-app-theme-"] .snf-dock__item.is-anticipating,
body[class*="snf-app-theme-"] .snf-dock__item--primary.is-active .snf-dock__label,
body[class*="snf-app-theme-"] .snf-dock__item--primary.is-anticipating .snf-dock__label,
body[class*="snf-app-theme-"] .snf-dock__item--primary .snf-dock__label {
  color: var(--snf-theme-active) !important;
}
body[class*="snf-app-theme-"] .snf-dock__item--primary:not(.is-active):not(.is-anticipating) .snf-dock__label {
  color: var(--snf-theme-nav) !important;
}
body[class*="snf-app-theme-"] .snf-dock__active-indicator::before {
  background: var(--snf-theme-active) !important;
  box-shadow: 0 0 9px color-mix(in srgb, var(--snf-theme-active) 34%, transparent) !important;
}
body[class*="snf-app-theme-"] .snf-dock__status.is-dot,
body[class*="snf-app-theme-"] .snf-dock__status.is-pill,
body[class*="snf-app-theme-"] .snf-dock__status.is-count {
  background: var(--snf-theme-badge-bg) !important;
  color: var(--snf-theme-badge-fg) !important;
  border-color: var(--snf-theme-badge-border) !important;
}

/* 1994 dock cue. The red throwback can carry a full 1px black offset
   because white artwork sits on a dark red field. On the white throwback the
   exact same numeric shadow becomes visually much heavier, so use the same
   down/right number-shadow language with optical compensation: a fractional
   offset, lower opacity, and no blur. This preserves RED artwork + BLACK
   drop shadow without making the small dock glyphs look doubled. */
body.snf-app-theme-throwback-red .snf-dock__label {
  text-shadow: 1.1px 1.1px 0 var(--snf-theme-drop-shadow) !important;
}
body.snf-app-theme-throwback-red .snf-dock__icon {
  filter: drop-shadow(1px 1px 0 rgba(17,17,20,.72)) !important;
}
body.snf-app-theme-throwback-white .snf-dock__label {
  text-shadow: .5px .65px 0 rgba(17,17,20,.54) !important;
}
body.snf-app-theme-throwback-white .snf-dock__icon {
  filter: drop-shadow(.5px .65px 0 rgba(17,17,20,.52)) !important;
}

/* Keep the active marker red like White Primary. Its black throwback offset
   is intentionally as restrained as the glyph shadow above. */
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile.snf-app-theme-throwback-white .snf-dock__active-indicator::before {
  background: #BC0C1C !important;
  box-shadow:
    .5px .7px 0 rgba(17,17,20,.58),
    0 0 7px rgba(188,12,28,.18) !important;
}


/* -------------------------------------------------------------------------
 * White jersey dock neutrality pass (SNF App 0.4.28)
 * Match the approved Events white-uniform surface exactly: true white into
 * a very light neutral gray, with only the jersey mesh on top. The generic
 * dock glow layer is intentionally omitted for white uniforms so the surface
 * cannot read cream/warm against the site canvas.
 * ---------------------------------------------------------------------- */
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile.snf-app-theme-white-primary .snf-dock,
body.snf-dock-enabled.snf-dock-app.snf-dock-mobile.snf-app-theme-throwback-white .snf-dock {
  background:
    radial-gradient(circle at 1px 1px, var(--snf-theme-mesh) 0 1px, transparent 1.15px 100%),
    linear-gradient(135deg, var(--snf-theme-surface-top) 0%, var(--snf-theme-surface-bottom) 100%) !important;
  background-size: 5px 5px, auto !important;
}