/* ── Fonts ────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('./outfit-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./dm-mono-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./dm-mono-medium-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens ────────────────────────────────────────────── */
:root {
  /* Font size scale — adjust here to rescale the whole site */
  --font-3xs: 0.6875rem; /* 11px — dense section labels */
  --font-2xs: 0.8125rem; /* 13px — micro labels, pills, badges */
  --font-xs: 0.875rem; /* 14px — small metadata */
  --font-sm: 0.875rem; /* 14px — secondary text */
  --font-md: 0.9375rem; /* 15px — medium */
  --font-base: 1rem; /* 16px — standard UI elements */
  --font-lg: 1.0625rem; /* 17px — nav, inputs */
  --font-body: 1.25rem; /* 20px — main body text */
  --font-h1: 1.625rem; /* 26px — page headings */
  --bg: #03060d;
  --card-bg: rgba(8, 14, 26, 0.48);
  --border: rgba(255, 255, 255, 0.11);
  --border-light: rgba(255, 255, 255, 0.06);
  --text: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: rgba(255, 255, 255, 0.65);
  --text-dim: rgba(255, 255, 255, 0.75);
  --text-tertiary: rgba(255, 255, 255, 0.65);
  --text-faint: rgba(255, 255, 255, 0.65);
  --text-nav: rgba(255, 255, 255, 0.72);
  --text-nav-hover: rgba(255, 255, 255, 0.92);
  --text-icon: rgba(255, 255, 255, 0.55);
  --text-icon-active: rgba(255, 255, 255, 0.85);
  --text-community: rgba(250, 204, 21, 0.9);
  --link: #93c5fd;
  --nav-bg: rgba(3, 6, 13, 0.6);
  --nav-border: rgba(255, 255, 255, 0.09);
  --glass-blur: blur(28px) saturate(220%) brightness(1.01);
  --glass-blur-sm: blur(14px) saturate(180%) brightness(1);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 1px 0 0 rgba(255, 255, 255, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.03), inset 0 -1px 0 rgba(255, 255, 255, 0.03), 0 8px 32px rgba(0, 0, 0, 0.6);
  --build-shadow: rgba(99, 102, 241, 0.5);
  --build-mega: rgba(249, 115, 22, 0.5);
  --build-primal: rgba(16, 185, 129, 0.5);
  --build-dynamax: rgba(239, 68, 68, 0.5);
  --build-gigantamax: rgba(168, 85, 247, 0.5);
  --build-purified: rgba(148, 163, 184, 0.4);
  --build-regular: rgba(255, 255, 255, 0.15);
  --green: #9ccf90;
  --amber: #f59e0b;
  --red: #ef4444;

  /* Pokémon type colors — single source of truth */
  --type-normal: #9fa19f;
  --type-fire: #e62829;
  --type-water: #2980ef;
  --type-electric: #fac000;
  --type-grass: #3fa129;
  --type-ice: #3dcef3;
  --type-fighting: #ff8000;
  --type-poison: #9141cb;
  --type-ground: #915121;
  --type-flying: #81b9ef;
  --type-psychic: #ef4179;
  --type-bug: #91a119;
  --type-rock: #afa981;
  --type-ghost: #704170;
  --type-dragon: #5060e1;
  --type-dark: #624d4e;
  --type-steel: #60a1b8;
  --type-fairy: #ef70ef;

  /* PvP league accents (badge colors). Fixed like type colors, theme-independent. */
  --league-great: #4f9dde;
  --league-ultra: #e0a92e;
  --league-master: #b06ae0;
}

/* ── Base ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px; /* rem anchor — all --font-* tokens scale from here */
  background: var(--bg);
  -webkit-text-size-adjust: 100%; /* stop iOS inflating text in landscape */
  text-size-adjust: 100%;
}

/* Ambient mesh gradient — gives glass panels something to refract */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 10% 5%, rgba(99, 179, 252, 0.2) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 90% 90%, rgba(139, 92, 246, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 55% 40%, rgba(16, 185, 129, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 75% 15%, rgba(249, 115, 22, 0.07) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family:
    'Outfit',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-size: var(--font-body);
  line-height: 1.5;
  color: var(--text);
  background: transparent;
  position: relative;
  z-index: 1;

  /* Native-app feel: kill the grey tap flash and stop vertical overscroll from
     chaining to the browser (rubber-band / pull-to-refresh) on touch devices. */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

a {
  color: var(--link);
  text-decoration: none;
  touch-action: manipulation; /* drop the legacy 300ms double-tap zoom delay */
}

a:hover {
  text-decoration: underline;
}

/* ── Sticky nav ───────────────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--nav-border);

  /* Naming the nav gives it its own view-transition group, so it stays put
     across page navigations instead of cross-fading with the body — the bar
     reads as persistent app chrome. See the App shell section. */
  view-transition-name: site-nav;
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  height: 48px;
  gap: 0;
  box-sizing: border-box;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  overflow: hidden;
}

nav a {
  color: var(--text-nav);
  font-size: var(--font-lg);
  font-weight: 500;
  padding: 0 11px;
  height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition:
    color 0.15s,
    border-color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

nav a:hover {
  color: var(--text-nav-hover);
  text-decoration: none;
}

nav a.active {
  color: #fff;
  background: rgba(147, 197, 253, 0.12);
  border: 1px solid rgba(147, 197, 253, 0.18);
  border-radius: 8px;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 14px rgba(147, 197, 253, 0.1);
}

.nav-toggle,
.nav-toggle-check {
  display: none;
}

/* ── Nav search ───────────────────────────────────────────────── */
.nav-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-search input[type='search'] {
  font-size: var(--font-lg);
  font-family: inherit;
  padding: 5px 10px;
  border: 1px solid var(--nav-border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  width: 220px;
  outline-offset: 2px;
}

.nav-search input[type='search']:focus {
  outline: 1px solid rgba(147, 197, 253, 0.4);
  border-color: rgba(147, 197, 253, 0.4);
}

/* ── Updated stamp ────────────────────────────────────────────── */
.updated-stamp {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 0 12px;
  white-space: nowrap;
}

.updated-stamp__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.updated-stamp--stale .updated-stamp__dot {
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber);
}

.updated-stamp--old .updated-stamp__dot {
  background: var(--red);
  box-shadow: 0 0 6px var(--red);
}

.updated-stamp__text {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

/* ── Focus styles ─────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.75);
  outline-offset: 2px;
  border-radius: 3px;
}

nav a:focus-visible {
  border-radius: 8px;
  outline-offset: 1px;
}

/* ── Mobile nav ───────────────────────────────────────────────── */
@media (width <= 1100px) {
  /* Disable all backdrop-filter on mobile — re-compositing 30-50 blurred
     cards on keyboard appear exhausts the iOS GPU and freezes Safari. */
  :root {
    --glass-blur: none;
    --glass-blur-sm: none;
  }

  blockquote {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  nav {
    position: relative;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    margin-left: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-body);
    color: var(--text-nav);
    padding: 0.1rem 0.25rem;
    line-height: 1;
    flex-shrink: 0;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(3, 6, 13, 0.92);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--nav-border);
    padding: 8px 1rem;
    z-index: 99;
  }

  .nav-toggle-check:checked ~ .nav-links {
    display: flex;
  }

  .nav-links a {
    height: auto;
    padding: 8px 4px;
    border-bottom: none;
    border-left: 2px solid transparent;
    width: 100%;
  }

  .nav-links a:hover,
  .nav-links a.active {
    border-bottom-color: transparent;
    border-left-color: #93c5fd;
    padding-left: 10px;
  }
}

/* ── Page layout ──────────────────────────────────────────────── */
.page-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* ── Headings ─────────────────────────────────────────────────── */
h1 {
  font-size: var(--font-h1);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

h2 {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-body);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 32px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

h2:first-child {
  margin-top: 0;
}

h3 {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
  margin: 16px 0 8px;
}

section {
  margin-bottom: 4px;
}

/* ── Bento grid ───────────────────────────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  gap: 12px;
  margin-bottom: 12px;
}

.bento-tile {
  position: relative;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  padding: 14px 16px;
  min-height: 88px;
  transition:
    background 0.2s,
    box-shadow 0.2s,
    border-color 0.2s,
    transform 0.2s;
  overflow: hidden;
}

.bento-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 60%),
    linear-gradient(225deg, rgba(180, 210, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.bento-tile:hover {
  background: rgba(12, 20, 38, 0.62);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1);
  transform: translateY(-2px);
}

.bento-tile--raids:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1),
    0 0 32px rgba(239, 68, 68, 0.15);
}

.bento-tile--eggs:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1),
    0 0 32px rgba(236, 72, 153, 0.15);
}

.bento-tile--tasks:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1),
    0 0 32px rgba(34, 197, 94, 0.15);
}

.bento-tile--rocket:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1),
    0 0 32px rgba(249, 115, 22, 0.15);
}

.bento-tile--dynamax:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1),
    0 0 32px rgba(250, 204, 21, 0.12);
}

.bento-tile--wide {
  grid-column: span 2;
  min-height: 120px;
}

/* ── Bento tile section accents ───────────────────────────────── */
.bento-tile--raids {
  border-left: 3px solid rgba(239, 68, 68, 0.55);
}

.bento-tile--eggs {
  border-left: 3px solid rgba(236, 72, 153, 0.55);
}

.bento-tile--tasks {
  border-left: 3px solid rgba(34, 197, 94, 0.55);
}

.bento-tile--rocket {
  border-left: 3px solid rgba(249, 115, 22, 0.55);
}

.bento-tile--dynamax {
  border-left: 3px solid rgba(250, 204, 21, 0.55);
}

.bento-tile--trades {
  border-left: 3px solid rgba(56, 189, 248, 0.55);
}

.bento-tile--trades:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 1px 0 0 rgba(255, 255, 255, 0.09),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(147, 197, 253, 0.1),
    0 0 32px rgba(56, 189, 248, 0.15);
}

/* ── Trade bonus chips ────────────────────────────────────────── */
.trade-event-name {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 8px;
}

.trade-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.trade-chip {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid transparent;
  line-height: 1.5;
}

.trade-chip--dust {
  background: rgba(250, 204, 21, 0.1);
  border-color: rgba(250, 204, 21, 0.28);
  color: rgba(250, 204, 21, 0.88);
}

.trade-chip--special {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.28);
  color: rgba(56, 189, 248, 0.88);
}

.trade-chip--lucky {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.28);
  color: rgba(52, 211, 153, 0.88);
}

.trade-chip--trinket {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.28);
  color: rgba(168, 85, 247, 0.88);
}

.trade-chip--xl {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.28);
  color: rgba(249, 115, 22, 0.88);
}

/* ── Lucky Friend trade targets (Trades page) ─────────────────── */
.lucky-targets {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 16px;
}

.lucky-targets__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.lucky-targets__detail {
  flex: 1;
  min-width: 0;
}

.lucky-targets__name {
  font-size: var(--font-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lucky-targets__rank {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-top: 1px;
}

.lucky-targets__note {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin-top: 8px;
}

.bento-tile__label {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 9px;
}

/* Inner links sit above the stretch pseudo-element */
.bento-tile__content a {
  position: relative;
  z-index: 1;
}

.bento-tile__content {
  font-size: var(--font-lg);
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (width <= 640px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Card ─────────────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  margin-bottom: 8px;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 60%),
    linear-gradient(225deg, rgba(180, 210, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

details.card__body > summary,
details.lineup-card__body > summary {
  cursor: pointer;
  list-style: none;
}

details.card__body > summary::-webkit-details-marker,
details.lineup-card__body > summary::-webkit-details-marker {
  display: none;
}

.card__inner {
  display: flex;
  align-items: stretch;
}

.card__bar {
  width: 3px;
  align-self: stretch;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
}

.card__body {
  flex: 1;
  padding: 13px 14px;
  min-width: 0;
}

/* ── Card header ──────────────────────────────────────────────── */
.card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.card__header-left {
  flex: 1;
  min-width: 0;
}

.egg-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Pokémon sprite icon ──────────────────────────────────────── */
.picon-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 4px;
  overflow: hidden;
}

.picon-shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(6px) brightness(0.4) saturate(1.4);
  transform: scale(0.85) translateY(5px);
  z-index: 0;
  pointer-events: none;
}

.picon {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  image-rendering: pixelated;
  object-fit: contain;
}

.picon-wrap--sm {
  width: 22px;
  height: 22px;
}

.picon-wrap--lg {
  width: 56px;
  height: 56px;
}

/* ── Card two-column layout (sprite + text) ───────────────────── */
.card__content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Tall enough to span the card__name line + one encounter-row__rank line:
   19px × 1.3 + 15px × 1.5 ≈ 48px */
.card__sprite {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* card-sprite-link is the <a> (or <span>) wrapping the sprite + optional shadow overlay */
.card-sprite-link {
  position: relative;
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
}

.card__sprite .picon-wrap,
.card__sprite .picon-wrap--lg,
.card-sprite-link .picon-wrap--lg {
  width: 48px;
  height: 48px;
}

/* Shadow Pokémon overlay image — placed behind the sprite */
.card-sprite-shadow {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

/* Ensure picon-wrap sits above the shadow overlay */
.card-sprite-link .picon-wrap {
  position: relative;
  z-index: 1;
}

.card__text {
  flex: 1;
  min-width: 0;
}

/* Sprite column already handles indentation — remove legacy padding-left. */
.card__text .encounter-row__rank {
  padding-left: 0;
  margin-top: 4px;
}

/* Raid card rank: target species shown with its own card-sprite-link */
.rank-species {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
}

.rank-species__detail {
  flex: 1;
  min-width: 0;
}

/* Rank-lines: no sprite, just name + rank lines stacked */
.rank-lines {
  margin-top: 4px;
}

/* Marks breakdown lines this catch only funds with candy (form unobtainable from this catch) */
.rank-note {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0 6px;
  white-space: nowrap;
}

.card__header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.card__name {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.card__name a {
  color: var(--text);
  text-decoration: none;
}

.card__name a:hover {
  text-decoration: underline;
}

.card__subtext {
  font-size: var(--font-base);
  color: var(--text-dim);
  margin-top: 3px;
  line-height: 1.4;
}

.card__meta {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  color: var(--text-dim);
}

.card__meta.card__prob {
  font-family: inherit;
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.card__note {
  font-size: var(--font-sm);
  color: var(--text-dim);
  margin-top: 5px;
  line-height: 1.4;
}

.card__note--community {
  color: var(--text-community);
}

/* ── Chevron ──────────────────────────────────────────────────── */
.chevron {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--text-icon);
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}

details.card__body[open] .chevron {
  transform: rotate(180deg);
  color: var(--text-icon-active);
}

details.lineup-card__body[open] .chevron {
  transform: rotate(180deg);
  color: var(--text-icon);
}

/* ── Card list — content revealed by <details> ────────────────── */
.card-list {
  padding-left: 4px;
}

details.card__body[open] > .card-list,
details.lineup-card__body[open] > .card-list {
  margin: 10px -14px -13px;
  padding: 10px 14px 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.1);
}

/* ── Raid tier icons (repeated ic_raid_small sprites) ─────────── */
.raid-tier {
  font-size: var(--font-lg);
  line-height: 1;
  color: var(--text);
  flex-shrink: 0;
}

/* MEGA / Primal label below the egg's difficulty icons (the egg art and icons
   convey the tier; this names the Mega raid type). */
.raid-egg__mega {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--text);
  z-index: 2;
}

/* Bento tile: image-based tier inside .raid-egg */
.raid-egg .raid-tier {
  display: flex;
  gap: 2px;
  justify-content: center;
  align-items: center;
  min-height: 14px;
  z-index: 2;
}

.raid-egg .raid-tier img {
  width: 14px;
  height: 14px;
  display: block;
}

/* ─── Raid egg component ───────────────────────────────────────────────────
   Egg sprite stacked above repeated tier icons. Structure:
   .raid-egg  (column flex container, relative for shadow flame)
     .raid-egg__img  (base egg sprite)
     .raid-tier  (row of repeated tier icons below the egg)
   Modifiers: --normal, --rare, --legendary, --mega, --elite, --shadow
   ─────────────────────────────────────────────────────────────────────── */
.raid-egg {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  isolation: isolate;
}

.raid-egg__img {
  display: block;
  position: relative;
  height: 56px;
  width: auto;
  z-index: 2;
}

/* Shadow raid: purple flame behind the egg */
.raid-egg--shadow::before {
  content: '';
  position: absolute;
  inset: -18% -22% -12%;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(170, 70, 255, 0.85), transparent 60%),
    radial-gradient(ellipse at 50% 55%, rgba(255, 70, 220, 0.45), transparent 62%);
  filter: blur(6px);
  z-index: 1;
}

/* Mega raid: animated hue-shift applied directly to the egg sprite */
.raid-egg--mega .raid-egg__img {
  animation: raid-mega-shift 3s linear infinite;
}

@keyframes raid-mega-shift {
  0% {
    filter: hue-rotate(0deg) saturate(1.8) brightness(1.1);
  }

  100% {
    filter: hue-rotate(360deg) saturate(1.8) brightness(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .raid-egg--mega .raid-egg__img {
    animation: none;
  }
}

.bento-tile--raids li {
  display: contents;
}

.bento-tile--raids .raid-tier {
  text-align: right;
}

/* ── Badges ───────────────────────────────────────────────────── */
.badge {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.badge--new {
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.25);
  color: #5eead4;
}

.badge--legendary {
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: rgba(168, 85, 247, 0.88);
  font-size: var(--font-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge--shiny {
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.25);
  color: #fde047;
  font-size: var(--font-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.card__catch-items {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.item-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
}

.badge--catch-priority {
  font-size: var(--font-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.badge--catch-priority-farm {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.25);
  color: #6ee7b7;
}

.badge--catch-priority-selective {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

/* ── Upcoming raid event grouping ────────────────────────────── */
.upcoming-raid-event {
  margin-bottom: 16px;
}

.upcoming-raid-event__title {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.upcoming-raid-event .card {
  margin-bottom: 4px;
}

.upcoming-raid-event .card:last-child {
  margin-bottom: 0;
}

/* ── Encounter rows ───────────────────────────────────────────── */
.encounter-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.encounter-row:last-child {
  border-bottom: none;
}

.encounter-row__left {
  flex: 1;
  min-width: 0;
}

.encounter-row__name-line {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.encounter-row__name {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.encounter-row__name:hover {
  text-decoration: underline;
}

.encounter-row__rank {
  font-size: var(--font-md);
  color: var(--text-muted);
  line-height: 1.5;
  padding-left: 36px;
}

.encounter-row__rank a {
  color: var(--text-dim);
}

.encounter-row__pct {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  color: var(--text-muted);
  flex-shrink: 0;
  padding-top: 2px;
}

/* ── Schedule rows ────────────────────────────────────────────── */
.schedule-row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.schedule-row:last-child {
  border-bottom: none;
}

.schedule-date {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  color: var(--text-muted);
  width: 160px;
  flex-shrink: 0;
}

.schedule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Table wrap (generic card-styled table) ───────────────────── */
.table-wrap {
  position: relative;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  margin-bottom: 8px;
}

.table-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 60%),
    linear-gradient(225deg, rgba(180, 210, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.table-wrap th {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 9px 12px;
  text-align: left;
}

.table-wrap td {
  padding: 8px 12px;
  font-size: var(--font-lg);
  color: var(--text-secondary);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: top;
}

.table-wrap tr:first-child td {
  border-top: none;
}

.table-wrap .table-scroll {
  overflow-x: auto;
}

/* Legacy table fallback */
.table-scroll {
  overflow-x: auto;
  margin: 1rem 0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 6px 10px;
  font-size: var(--font-lg);
  text-align: left;
  vertical-align: top;
  color: var(--text-secondary);
}

thead th {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.025);
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

tbody tr.top10-row {
  background: rgba(255, 220, 50, 0.07);
}

/* ── Mermaid diagrams ─────────────────────────────────────────── */
main svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Prose ────────────────────────────────────────────────────── */
p {
  font-size: var(--font-body);
  color: var(--text-secondary);
  margin: 0 0 12px;
  line-height: 1.6;
}

ul,
ol {
  font-size: var(--font-body);
  color: var(--text-secondary);
  margin: 0 0 12px;
  padding-left: 20px;
  line-height: 1.7;
}

li {
  margin-bottom: 4px;
}

strong {
  color: var(--text);
  font-weight: 600;
}

blockquote {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 3px solid rgba(147, 197, 253, 0.3);
  border-radius: 0 8px 8px 0;
  background: rgba(147, 197, 253, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

blockquote p {
  margin: 0;
}

code,
pre {
  font-family: 'DM Mono', monospace;
}

code {
  font-size: var(--font-base);
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--text);
}

pre {
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-secondary);
  padding: 0.75rem;
  overflow-x: auto;
  border-radius: 8px;
  font-size: var(--font-base);
}

/* ── Site footer ──────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  color: var(--text-muted);
  padding: 28px 0 0;
}

.site-footer__disclaimer {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 0 20px;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer__links {
  font-size: var(--font-2xs);
  margin: 0 auto;
  padding: 0 0 20px;
}

.site-footer__links a {
  color: var(--text-muted);
}

/* ── Family candy accent ──────────────────────────────────────── */

/* --candy-primary / --candy-secondary are set inline on .family-title
   from the family's in-game candy colors (mart_top10__candy_colors). */

.family-title::after {
  content: '';
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--candy-primary, var(--border)), var(--candy-secondary, var(--border)));
}

.candy-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px 0 2px;
  vertical-align: -1px;
  border-radius: 50%;
  background: var(--candy-primary, var(--border));
  box-shadow: 0 0 0 2px var(--candy-secondary, var(--border));
}

/* Candy-tinted shine: the base white gradient plus a whisper of the
   family's candy colors. The whole declaration is dropped where
   color-mix() is unsupported, falling back to the .card::before shine. */
.card--candy::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--candy-primary) 8%, transparent) 0%, transparent 55%),
    linear-gradient(225deg, color-mix(in srgb, var(--candy-secondary) 7%, transparent) 0%, transparent 50%);
}

/* ── Family page nav ──────────────────────────────────────────── */

.family-meta__no-value {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin: 0;
}

/* ── Family upcoming events callout ──────────────────────────── */
.family-upcoming {
  display: grid;
  grid-template-columns: max-content 1fr max-content max-content;
  gap: 4px 12px;
  align-items: baseline;
  margin: 0 0 20px;
  padding: 10px 14px;
  border-left: 3px solid rgba(147, 197, 253, 0.4);
  border-radius: 0 8px 8px 0;
  background: rgba(147, 197, 253, 0.06);
}

.family-upcoming__type {
  font-size: var(--font-sm);
  color: var(--text);
}

.family-upcoming__date {
  font-size: var(--font-sm);
  color: var(--text-muted);
  text-align: right;
}

.family-upcoming__time {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-2xs);
  color: var(--text-muted);
  text-align: right;
}

/* ── Build path cards (Family pages) ─────────────────────────── */
.build-card-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 24px;
}

.build-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.build-card--shadow {
  border-left: 3px solid var(--build-shadow);
}

.build-card--mega {
  border-left: 3px solid var(--build-mega);
}

.build-card--primal {
  border-left: 3px solid var(--build-primal);
}

.build-card--dynamax {
  border-left: 3px solid var(--build-dynamax);
}

.build-card--gigantamax {
  border-left: 3px solid var(--build-gigantamax);
}

.build-card--purified {
  border-left: 3px solid var(--build-purified);
}

.build-card--regular {
  border-left: 3px solid var(--build-regular);
}

.build-card__header {
  display: flex;
  align-items: baseline;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-light);
  gap: 8px;
}

.build-card__roles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.build-card__role-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.form-badge {
  font-size: var(--font-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.form-badge--shadow {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}

.form-badge--mega {
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.4);
  color: #fdba74;
}

.form-badge--primal {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

.form-badge--dynamax {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.form-badge--gigantamax {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
  color: #c4b5fd;
}

.form-badge--purified {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

.form-badge--regular {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border);
  color: var(--text-secondary);
}

.build-card__title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text);
}

.build-card__rank {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.build-card__body {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
}

.build-card__sprite-col {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}

.build-card__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.build-card__move {
  font-size: var(--font-sm);
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.build-card__move--fast::before {
  content: 'fast · ';
  font-style: normal;
  color: var(--text-dim);
  font-size: var(--font-2xs);
}

.build-card__move--fast {
  font-style: italic;
}

.build-card__move--charged::before {
  content: 'charged · ';
  color: var(--text-dim);
  font-size: var(--font-2xs);
}

.build-card__cost-tier {
  display: flex;
  align-items: center;
  gap: 8px;
}

.build-card__resources {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-sm);
}

.build-card__resources tr + tr td {
  border-top: 1px solid var(--border-light);
}

.build-card__res-label {
  padding: 4px 8px 4px 0;
  color: var(--text-muted);
  width: 50%;
}

.build-card__res-value {
  padding: 4px 0;
  color: var(--text-secondary);
  font-family: 'DM Mono', monospace;
  font-size: var(--font-xs);
}

/* XL Candy difficulty inline pill */
.build-card__res-tag {
  display: inline-block;
  font-size: var(--font-2xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
  vertical-align: middle;
  margin-left: 4px;
}

.res-tag-note {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--text-secondary);
  font-weight: 400;
}

.build-card__res-note {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin: 0;
}

.build-card__footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.build-card__iv,
.build-card__channels {
  font-size: var(--font-sm);
  color: var(--text-muted);
  margin: 0;
}

/* ── Education note ───────────────────────────────────────────── */
.edu-note {
  margin: 12px 0 0;
  padding: 10px 13px;
  border-left: 3px solid var(--link);
  border-radius: 0 8px 8px 0;
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: 1.5;
}

/* Quiet inline note line shared across tiers (build / fusion / family).
   No bar, no panel — just a muted line led by a faint mono lead-word. */
.edu-note--inline {
  margin: 5px 0 0;
  padding: 0;
  border-left: none;
  border-radius: 0;
  background: none;
  color: var(--text-secondary);
  font-size: var(--font-2xs);
  line-height: 1.55;
}

.edu-note__lead {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Raid counter section ─────────────────────────────────────── */
.raid-counters {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border-light);
  margin-top: 2px;
}

.raid-counters__heading {
  font-size: var(--font-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.counter-picks {
  margin-bottom: 12px;
}

.counter-picks__summary {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
  font-size: var(--font-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.counter-picks__summary::-webkit-details-marker {
  display: none;
}

.counter-picks[open] .chevron {
  transform: rotate(180deg);
  color: var(--text-icon-active);
}

.counter-picks__group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}

.counter-picks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.counter-picks__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--font-xs);
}

.counter-picks__rank {
  color: var(--text-muted);
}

.counter-picks__moves {
  color: var(--text-secondary);
  font-size: var(--font-2xs);
}

.type-guidance {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
}

.type-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.type-row-label {
  font-size: var(--font-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  width: 40px;
}

.type-row-label--bring {
  color: #6dbf6d;
}

.type-row-label--avoid {
  color: #c47a7a;
}

.type-row-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.type-pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-2xs);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}

/* vivid: type color from --type-* var; background is 13% alpha via color-mix() */
.type-pill--vivid {
  --pill-color: var(--text-secondary);

  color: var(--pill-color);
  background: color-mix(in srgb, var(--pill-color) 13%, transparent);
}

.type-pill--vivid[data-type='normal'] {
  --pill-color: var(--type-normal);
}

.type-pill--vivid[data-type='fire'] {
  --pill-color: var(--type-fire);
}

.type-pill--vivid[data-type='water'] {
  --pill-color: var(--type-water);
}

.type-pill--vivid[data-type='electric'] {
  --pill-color: var(--type-electric);
}

.type-pill--vivid[data-type='grass'] {
  --pill-color: var(--type-grass);
}

.type-pill--vivid[data-type='ice'] {
  --pill-color: var(--type-ice);
}

.type-pill--vivid[data-type='fighting'] {
  --pill-color: var(--type-fighting);
}

.type-pill--vivid[data-type='poison'] {
  --pill-color: var(--type-poison);
}

.type-pill--vivid[data-type='ground'] {
  --pill-color: var(--type-ground);
}

.type-pill--vivid[data-type='flying'] {
  --pill-color: var(--type-flying);
}

.type-pill--vivid[data-type='psychic'] {
  --pill-color: var(--type-psychic);
}

.type-pill--vivid[data-type='bug'] {
  --pill-color: var(--type-bug);
}

.type-pill--vivid[data-type='rock'] {
  --pill-color: var(--type-rock);
}

.type-pill--vivid[data-type='ghost'] {
  --pill-color: var(--type-ghost);
}

.type-pill--vivid[data-type='dragon'] {
  --pill-color: var(--type-dragon);
}

.type-pill--vivid[data-type='dark'] {
  --pill-color: var(--type-dark);
}

.type-pill--vivid[data-type='steel'] {
  --pill-color: var(--type-steel);
}

.type-pill--vivid[data-type='fairy'] {
  --pill-color: var(--type-fairy);
}

/* League rank badges reuse the vivid recipe with league accent colors. */
.type-pill--vivid[data-league='great'] {
  --pill-color: var(--league-great);
}

.type-pill--vivid[data-league='ultra'] {
  --pill-color: var(--league-ultra);
}

.type-pill--vivid[data-league='master'] {
  --pill-color: var(--league-master);
}

/* muted: all avoid types use the same dim style */
.type-pill--muted {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-faint);
}

.type-row-resisted {
  font-size: var(--font-2xs);
  font-style: italic;
  color: var(--text-faint);
  margin-left: 2px;
}

.search-string-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
}

.search-string-label {
  font-size: var(--font-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 0 9px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-light);
  align-self: stretch;
  display: flex;
  align-items: center;
}

.search-string-value {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-family: 'DM Mono', 'Fira Code', monospace;
  font-size: var(--font-xs);
  color: var(--text-dim);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.search-string-value::-webkit-scrollbar {
  display: none;
}

.search-string-copy {
  flex-shrink: 0;
  padding: 8px 11px;
  background: none;
  border: none;
  border-left: 1px solid var(--border-light);
  color: var(--text-dim);
  font-family: inherit;
  font-size: var(--font-xs);
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
}

.search-string-copy:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}

.search-string-copy.copied {
  color: #6dbf6d;
}

.sort-hint {
  font-size: var(--font-xs);
  color: var(--text-faint);
  margin: 0 0 12px;
}

.tactical-note {
  padding: 9px 11px;
  background: rgba(245, 200, 66, 0.04);
  border-left: 3px solid rgba(245, 200, 66, 0.25);
  border-radius: 0 5px 5px 0;
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 10px;
}

.tactical-note__trap {
  display: block;
  margin-top: 5px;
  color: #c47a7a;
  font-size: var(--font-xs);
}

.deep-dive {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-xs);
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.15s;
}

.deep-dive:hover {
  color: var(--text-dim);
}

/* ── Lineup card (Rocket page) ────────────────────────────────── */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lineup-card {
  position: relative;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  margin-bottom: 8px;
  animation: fade-up 0.35s ease both;
  -webkit-tap-highlight-color: transparent;
}

.lineup-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 60%),
    linear-gradient(225deg, rgba(180, 210, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

/* ── Frosted glass grain — makes blur feel physically frosted ─────── */
.card::after,
.bento-tile::after,
.table-wrap::after,
.lineup-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23a)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.032;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.lineup-card:nth-child(1) {
  animation-delay: 0s;
}

.lineup-card:nth-child(2) {
  animation-delay: 0.05s;
}

.lineup-card:nth-child(3) {
  animation-delay: 0.1s;
}

.lineup-card:nth-child(4) {
  animation-delay: 0.15s;
}

.lineup-card:nth-child(5) {
  animation-delay: 0.2s;
}

.lineup-card:nth-child(6) {
  animation-delay: 0.25s;
}

.lineup-card:nth-child(7) {
  animation-delay: 0.3s;
}

.lineup-card:nth-child(8) {
  animation-delay: 0.35s;
}

.lineup-card:nth-child(9) {
  animation-delay: 0.4s;
}

.lineup-card:nth-child(10) {
  animation-delay: 0.45s;
}

.lineup-card__inner {
  display: flex;
}

.lineup-card__bar {
  width: 3px;
  flex-shrink: 0;
  align-self: stretch;
}

.lineup-card__body {
  flex: 1;
  padding: 13px 14px;
  min-width: 0;
}

.lineup-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.lineup-card__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* Quote (top) stacked over the trainer name + type pill (bottom), beside the
   NPC portrait. */
.lineup-card__identity {
  min-width: 0;
}

.lineup-card__header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.lineup-card__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--font-sm);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.3;
  margin-top: 4px;
}

/* NPC portrait (PokeMiners Images/NPCs); tall full-body art, shown as a small
   avatar to the left of the quote + name stack. Width follows the ~0.4 portrait
   aspect (about 18px at this height). */
.lineup-card__npc {
  height: 46px;
  width: auto;
  flex-shrink: 0;
}

.lineup-card__pct {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  color: var(--text-dim);
}

.lineup-card__quote {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
  font-style: normal;
  line-height: 1.3;
}

/* Type colors on lineup-card__bar, card__bar */
.lineup-card__bar[data-type],
.card__bar[data-type] {
  background: var(--type-color);
}

.lineup-card__bar[data-type='normal'],
.card__bar[data-type='normal'] {
  --type-color: var(--type-normal);
}

.lineup-card__bar[data-type='fire'],
.card__bar[data-type='fire'] {
  --type-color: var(--type-fire);
}

.lineup-card__bar[data-type='water'],
.card__bar[data-type='water'] {
  --type-color: var(--type-water);
}

.lineup-card__bar[data-type='electric'],
.card__bar[data-type='electric'] {
  --type-color: var(--type-electric);
}

.lineup-card__bar[data-type='grass'],
.card__bar[data-type='grass'] {
  --type-color: var(--type-grass);
}

.lineup-card__bar[data-type='ice'],
.card__bar[data-type='ice'] {
  --type-color: var(--type-ice);
}

.lineup-card__bar[data-type='fighting'],
.card__bar[data-type='fighting'] {
  --type-color: var(--type-fighting);
}

.lineup-card__bar[data-type='poison'],
.card__bar[data-type='poison'] {
  --type-color: var(--type-poison);
}

.lineup-card__bar[data-type='ground'],
.card__bar[data-type='ground'] {
  --type-color: var(--type-ground);
}

.lineup-card__bar[data-type='flying'],
.card__bar[data-type='flying'] {
  --type-color: var(--type-flying);
}

.lineup-card__bar[data-type='psychic'],
.card__bar[data-type='psychic'] {
  --type-color: var(--type-psychic);
}

.lineup-card__bar[data-type='bug'],
.card__bar[data-type='bug'] {
  --type-color: var(--type-bug);
}

.lineup-card__bar[data-type='rock'],
.card__bar[data-type='rock'] {
  --type-color: var(--type-rock);
}

.lineup-card__bar[data-type='ghost'],
.card__bar[data-type='ghost'] {
  --type-color: var(--type-ghost);
}

.lineup-card__bar[data-type='dragon'],
.card__bar[data-type='dragon'] {
  --type-color: var(--type-dragon);
}

.lineup-card__bar[data-type='dark'],
.card__bar[data-type='dark'] {
  --type-color: var(--type-dark);
}

.lineup-card__bar[data-type='steel'],
.card__bar[data-type='steel'] {
  --type-color: var(--type-steel);
}

.lineup-card__bar[data-type='fairy'],
.card__bar[data-type='fairy'] {
  --type-color: var(--type-fairy);
}

/* ── Utilities ────────────────────────────────────────────────── */
.num {
  font-family: 'DM Mono', monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.section-label {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Rankings pages ──────────────────────────────────────────── */
.rankings-intro {
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.rankings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rankings-empty {
  color: var(--text-muted);
}

.rankings-search-section {
  margin: 24px 0 8px;
}

.rankings-search-section h2 {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

.rankings-search-intro {
  font-size: var(--font-xs);
  color: var(--text-faint);
  margin: 12px 0 4px;
}

.rankings-search-intro:first-of-type {
  margin-top: 0;
}

.rankings-search-cross-type {
  font-size: var(--font-xs);
  color: var(--text-faint);
  margin: 4px 0 0;
}

.ranking-entry {
  position: relative;
  display: grid;
  grid-template-columns: auto 56px 1fr auto;
  align-items: start;
  gap: 10px;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--glass-shadow);
  padding: 10px 12px;
  overflow: hidden;
}

.ranking-entry::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 60%),
    linear-gradient(225deg, rgba(180, 210, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.ranking-entry__rank {
  font-family: 'DM Mono', monospace;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-dim);
  opacity: 0.35;
  text-align: right;
  min-width: 2ch;
  align-self: center;
}

.ranking-entry__sprite {
  display: flex;
  align-items: flex-start;
}

.ranking-entry__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ranking-entry__name {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text);
}

.ranking-entry__form {
  font-size: var(--font-xs);
  color: var(--text-muted);
  font-weight: 400;
}

.ranking-entry__form--gigantamax {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #c4b5fd;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ranking-entry__form--dynamax {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #fca5a5;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ranking-entry__form--shadow {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ranking-entry__form--mega {
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.3);
  color: #fdba74;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ranking-entry__form--primal {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.05em;
}

.ranking-entry__form-group-note {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  font-style: italic;
}

.ranking-entry__moves {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ranking-entry__move--fast::before {
  content: 'Fast ';
  color: var(--text-dim);
}

.ranking-entry__move--charged::before {
  content: 'Charged ';
  color: var(--text-dim);
}

.elite-tm-badge {
  font-size: var(--font-2xs);
  background: rgba(250, 204, 21, 0.12);
  color: var(--text-community);
  border: 1px solid rgba(250, 204, 21, 0.28);
  border-radius: 4px;
  padding: 1px 4px;
  vertical-align: middle;
}

.upcoming-badge {
  font-size: var(--font-2xs);
  background: rgba(45, 212, 191, 0.1);
  color: #5eead4;
  border: 1px solid rgba(45, 212, 191, 0.25);
  border-radius: 4px;
  padding: 1px 4px;
  vertical-align: middle;
  white-space: nowrap;
}

.ranking-entry__cost {
  align-self: start;
}

.cost-dots-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 6px 4px;
  background: none;
  border: none;
  outline: none;
}

.cost-dots-btn:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 4px;
}

.cost-dots-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.cost-tier-label {
  font-size: var(--font-2xs);
  color: var(--text-dim);
  margin-top: 3px;
}

.cost-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  flex-shrink: 0;
}

.cost-dot--filled {
  background: var(--link);
  border-color: var(--link);
}

.cost-tip {
  /* Override [popover] UA defaults; CSS anchor positioning controls placement */
  position: absolute;
  inset: auto;
  top: anchor(bottom);
  right: anchor(right);
  margin: 8px;
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
  color: var(--text);

  /* Visual styles */
  background: rgba(8, 14, 26, 0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--glass-shadow);
  padding: 12px 14px;
  min-width: 200px;
  max-width: 280px;
}

.cost-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-size: var(--font-xs);
}

.cost-panel dt {
  color: var(--text-muted);
  font-family: 'DM Mono', monospace;
}

.cost-panel dd {
  color: var(--text-secondary);
  margin: 0;
}

.cost-panel__difficulty {
  font-size: var(--font-2xs);
  color: var(--text-dim);
}

.cost-panel__note {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin: 8px 0 0;
}

.event-bonuses {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-top: 8px;
  padding: 6px 14px 6px 28px;
  border-left: 3px solid color-mix(in srgb, #facc15 25%, transparent);
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, #facc15 3%, transparent);
}

.event-bonuses li {
  margin-bottom: 3px;
}

.event-bonuses li:last-child {
  margin-bottom: 0;
}

/* ── Type icons ───────────────────────────────────────────────── */

.type-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  flex-shrink: 0;
}

.type-icon--normal {
  background-image: url('./img/types/ico_0_normal.webp');
}

.type-icon--fighting {
  background-image: url('./img/types/ico_1_fighting.webp');
}

.type-icon--flying {
  background-image: url('./img/types/ico_2_flying.webp');
}

.type-icon--poison {
  background-image: url('./img/types/ico_3_poison.webp');
}

.type-icon--ground {
  background-image: url('./img/types/ico_4_ground.webp');
}

.type-icon--rock {
  background-image: url('./img/types/ico_5_rock.webp');
}

.type-icon--bug {
  background-image: url('./img/types/ico_6_bug.webp');
}

.type-icon--ghost {
  background-image: url('./img/types/ico_7_ghost.webp');
}

.type-icon--steel {
  background-image: url('./img/types/ico_8_steel.webp');
}

.type-icon--fire {
  background-image: url('./img/types/ico_9_fire.webp');
}

.type-icon--water {
  background-image: url('./img/types/ico_10_water.webp');
}

.type-icon--grass {
  background-image: url('./img/types/ico_11_grass.webp');
}

.type-icon--electric {
  background-image: url('./img/types/ico_12_electric.webp');
}

.type-icon--psychic {
  background-image: url('./img/types/ico_13_psychic.webp');
}

.type-icon--ice {
  background-image: url('./img/types/ico_14_ice.webp');
}

.type-icon--dragon {
  background-image: url('./img/types/ico_15_dragon.webp');
}

.type-icon--dark {
  background-image: url('./img/types/ico_16_dark.webp');
}

.type-icon--fairy {
  background-image: url('./img/types/ico_17_fairy.webp');
}

/* ── Type card grid ───────────────────────────────────────────── */
.type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 0.5rem;
  margin-bottom: 24px;
}

@media (width >= 640px) {
  .type-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (width <= 360px) {
  .type-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.type-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--type-card-color, var(--border));
  background: color-mix(in srgb, var(--type-card-color, transparent) 8%, transparent);
  border-radius: 0 4px 4px 0;
  text-decoration: none;
  color: inherit;
  font-size: var(--font-2xs);
  line-height: 1.3;
  transition: background 0.12s ease;
}

.type-card:hover,
.type-card:focus-visible {
  background: color-mix(in srgb, var(--type-card-color, transparent) 18%, transparent);
  outline: none;
}

.type-card[aria-current='page'] {
  background: color-mix(in srgb, var(--type-card-color, transparent) 22%, transparent);
  font-weight: 600;
  pointer-events: none;
}

.type-card--bug {
  --type-card-color: var(--type-bug);
}

.type-card--dark {
  --type-card-color: var(--type-dark);
}

.type-card--dragon {
  --type-card-color: var(--type-dragon);
}

.type-card--electric {
  --type-card-color: var(--type-electric);
}

.type-card--fairy {
  --type-card-color: var(--type-fairy);
}

.type-card--fighting {
  --type-card-color: var(--type-fighting);
}

.type-card--fire {
  --type-card-color: var(--type-fire);
}

.type-card--flying {
  --type-card-color: var(--type-flying);
}

.type-card--ghost {
  --type-card-color: var(--type-ghost);
}

.type-card--grass {
  --type-card-color: var(--type-grass);
}

.type-card--ground {
  --type-card-color: var(--type-ground);
}

.type-card--ice {
  --type-card-color: var(--type-ice);
}

.type-card--normal {
  --type-card-color: var(--type-normal);
}

.type-card--poison {
  --type-card-color: var(--type-poison);
}

.type-card--psychic {
  --type-card-color: var(--type-psychic);
}

.type-card--rock {
  --type-card-color: var(--type-rock);
}

.type-card--steel {
  --type-card-color: var(--type-steel);
}

.type-card--water {
  --type-card-color: var(--type-water);
}

/* ── Endgame · Focus hero ──────────────────────────────────────── */
.focus-hero {
  margin-bottom: 12px;
}

.focus-hero__bar {
  background: rgba(245, 158, 11, 0.85);
}

.focus-hero__label {
  margin-bottom: 6px;
  color: rgba(245, 158, 11, 0.75);
}

.focus-hero__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.focus-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-family: 'DM Mono', monospace;
  font-size: var(--font-2xs);
  color: var(--text-secondary);
}

.focus-hero__expiry--urgent {
  color: rgba(245, 158, 11, 0.9);
  font-weight: 500;
}

.focus-hero__upcoming {
  color: var(--link);
  font-weight: 500;
}

.focus-hero__why {
  color: var(--text-muted);
}

/* ── Index event tiles (Eggs, Trades) ─────────────────────────── */
.event-tiles {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.event-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s;
}

.event-tile:hover {
  background: rgba(255, 255, 255, 0.04);
}

.event-tile:last-child {
  border-bottom: none;
}

.event-tile__label {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 56px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.event-tile__main {
  flex: 1;
  min-width: 0;
}

.event-tile__name {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-tile__why {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-tile__desc {
  display: block;
  margin-top: 2px;
  font-size: var(--font-2xs);
  color: var(--text-secondary);
}

.event-tile__link {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-xs);
  color: var(--text-muted);
  flex-shrink: 0;
  text-decoration: none;
  opacity: 0.5;
}

.event-tile__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* ── Field task list ──────────────────────────────────────────── */
.task-list {
  list-style: none;
  padding-left: 0;
  font-size: var(--font-sm);
}

.task-list__item {
  display: flex;
  margin-bottom: 8px;
  color: var(--text-muted);
}

.task-list__mark {
  flex-shrink: 0;
  margin-right: 6px;
}

.task-list__title {
  color: var(--text);
}

/* ── Personalize: icon sprite + shared bits ───────────────────── */

/* Inline SVG <symbol> sprite host: present in the DOM for <use> references but
   takes no space. */
.pt-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ── Personalize: invite banner ───────────────────────────────── */

/* The "Personalize Today's Picks" layer. Built entirely on existing design
   tokens and the glass recipe. Verdict colors reuse the status palette
   (Do → --green, Maybe → --amber, Skip → neutral). A verdict is never color
   alone: every verdict pairs color with a text label and a thin glyph. */
.personalize-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 13px 14px;
  background: linear-gradient(135deg, rgba(147, 197, 253, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%);
  border: 1px solid rgba(147, 197, 253, 0.22);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.personalize-banner__glyph {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--link);
}

.personalize-banner__body {
  flex: 1;
  min-width: 0;
}

.personalize-banner__title {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.personalize-banner__sub {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.personalize-banner .pt-btn {
  flex-shrink: 0;
  padding: 9px 14px;
  min-height: 0;
  font-size: var(--font-sm);
}

.personalize-banner__cta:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Personalize: For you / Everything view toggle ────────────── */
.overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.view-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 100px;
}

.view-toggle__btn {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color 0.15s,
    background 0.15s;
}

.view-toggle__btn:hover {
  color: var(--text-secondary);
}

/* Native radios drive the toggle; the inputs themselves are visually hidden. */
.view-toggle__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.view-toggle__radio:checked + .view-toggle__btn {
  color: #fff;
  background: rgba(147, 197, 253, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 12px rgba(147, 197, 253, 0.1);
}

/* For you is a pure-CSS filter over the single feed: hide Skip picks, and any
   channel left with none. Everything shows all rows. No JavaScript drives this. */
[data-pt-overview]:has(#pt-view-foryou:checked) .pick[data-verdict='skip'] {
  display: none;
}

[data-pt-overview]:has(#pt-view-foryou:checked) .pt-channel:not(:has(.pick:not([data-verdict='skip']))) {
  display: none;
}

/* ── Personalize: verdict tier label ──────────────────────────── */
.tier-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 22px 0 9px;
}

.tier-label__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Neutral dot for the channel section labels. */
.tier-label--channel .tier-label__dot {
  background: var(--text-muted);
}

.tier-label__rule {
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

/* Channel heading link to the channel's full report page. */
.tier-label__link {
  flex-shrink: 0;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.tier-label__link:hover {
  color: var(--text-dim);
}

/* ── Personalize: pick row ────────────────────────────────────── */

/* A glass list with the verdict layered in.
   Taller rows fit a reason + meta + notes. */
.pick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.pick {
  position: relative;
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s;
}

.pick:last-child {
  border-bottom: none;
}

.pick:hover {
  background: rgba(255, 255, 255, 0.03);
}

.pick__sprite {
  position: relative; /* anchors the .card-sprite-shadow flame overlay */
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1px;
}

.pick__sprite .picon-wrap {
  width: 44px;
  height: 44px;
}

.pick__main {
  flex: 1;
  min-width: 0;
}

.pick__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pick__action {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pick__name {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.pick__name a {
  color: var(--text);
}

.pick__name a:hover {
  text-decoration: underline;
}

.pick__reason {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 4px;
  text-wrap: pretty;
}

/* Per-target ranking breakdown: one species per line, ranks as colored badges. */
.pick__targets {
  margin-top: 5px;
}

/* Hairline separating the build-target lines from the encounter's own name above. */
.pick__targets-divider {
  height: 1px;
  margin: 4px 0 6px;
  background: var(--border-light);
}

/* The Rocket trainer holding the encounter (Giovanni, Cliff, a typed grunt). */
.pick__via {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Marks target lines this catch only funds with candy (form unobtainable here). */
.pick__target-note {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0 6px;
  white-space: nowrap;
}

.pick__target {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 3px;
}

.pick__target-name {
  font-weight: 600;
}

.pick__target-name a {
  color: var(--text);
}

.pick__target-name a:hover {
  text-decoration: underline;
}

/* Rank pill: reuses .type-pill--vivid for the type/league color. */
.rank-badge {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.rank-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
}

.rank-badges__none {
  color: var(--text-muted);
  font-size: var(--font-2xs);
}

.rank-badge-link {
  display: inline-flex;
}

.rank-badge-link:hover {
  text-decoration: none;
}

.rank-badge-link:hover .rank-badge {
  background: color-mix(in srgb, var(--pill-color) 22%, transparent);
}

/* ── Ranked Pokémon list ──────────────────────────────────────── */
.ranklist {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.ranklist__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
}

.ranklist__row:last-child {
  border-bottom: none;
}

.ranklist__sprite {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.ranklist__sprite .picon-wrap {
  margin-right: 0;
}

.ranklist__main {
  flex: 1;
  min-width: 0;
}

.ranklist__name-line {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.ranklist__name-line a {
  font-weight: 600;
  color: var(--text);
}

.ranklist__name-line a:hover {
  text-decoration: underline;
}

.ranklist__timing {
  font-size: var(--font-2xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.ranklist__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  justify-content: flex-end;
  flex-shrink: 0;
  max-width: 58%;
}

/* ── Max battle card ──────────────────────────────────────────── */
.mb-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mb-card {
  position: relative;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  padding: 13px 14px;
  overflow: hidden;
}

.mb-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 60%),
    linear-gradient(225deg, rgba(180, 210, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.mb-card__head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.mb-card__sprite .picon-wrap {
  margin-right: 0;
}

.mb-card__name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.mb-card__name {
  font-size: var(--font-lg);
  font-weight: 600;
}

.mb-card__name a {
  color: var(--text);
}

.mb-card__name a:hover {
  text-decoration: underline;
}

.mb-card__tier {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-2xs);
  color: var(--text-community);
}

.mb-card__cp {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-2xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.mb-card__row {
  display: flex;
  gap: 10px;
  margin-top: 9px;
}

.mb-card__tag {
  flex-shrink: 0;
  width: 54px;
  padding-top: 3px;
  font-size: var(--font-3xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mb-card__bring {
  text-transform: capitalize;
}

.mb-card__lines {
  flex: 1;
  min-width: 0;
}

.mb-card__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
  margin-bottom: 3px;
}

.mb-card__line-name {
  font-size: var(--font-sm);
  font-weight: 600;
}

.mb-card__line-name a {
  color: var(--text);
}

.mb-card__counters {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mb-card__counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 3px;
  border: 1px solid var(--border-light);
  border-radius: 100px;
  font-size: var(--font-2xs);
  color: var(--text);
  text-decoration: none;
}

.mb-card__counter .picon-wrap {
  margin-right: 0;
}

.mb-card__counter:hover {
  border-color: var(--border);
}

.mb-card__counter-name {
  font-weight: 600;
}

.mb-card__counter-rank {
  font-family: 'DM Mono', monospace;
  color: var(--text-muted);
}

.mb-card__when {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 9px;
  margin-bottom: 10px;
}

.mb-card__when-primary {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--text);
}

.mb-card__when-sub {
  font-size: var(--font-2xs);
  color: var(--text-muted);
}

.mb-card__warn {
  color: var(--amber);
}

.pick__meta {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-2xs);
  color: var(--text-dim);
  margin-top: 5px;
}

.pick__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 7px;
}

.pick__note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-2xs);
  line-height: 1.3;
}

.pick__note svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.pick__note--urgent {
  color: rgba(245, 158, 11, 0.92);
  font-weight: 500;
}

/* Starts-soon is informational (sky), not urgent (amber). */
.pick__note--upcoming {
  color: var(--link);
  font-weight: 500;
}

/* ── Personalize: payoff confirmation toast ───────────────────── */
.payoff {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(8, 14, 26, 0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(156, 207, 144, 0.35);
  border-radius: 100px;
  box-shadow: var(--glass-shadow);
  font-size: var(--font-sm);
  color: var(--text);
  white-space: nowrap;
}

.payoff svg {
  width: 16px;
  height: 16px;
  color: var(--green);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .payoff {
    animation: pt-toast-in 0.3s ease;
  }
}

/* ── Personalize: quiet edit / personalize entry ──────────────── */
.edit-entry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Mono', monospace;
  font-size: var(--font-2xs);
  letter-spacing: 0.05em;
  color: var(--link);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 8px;
}

.edit-entry:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.edit-entry svg {
  width: 14px;
  height: 14px;
}

@keyframes pt-toast-in {
  from {
    transform: translate(-50%, 14px);
  }

  to {
    transform: translate(-50%, 0);
  }
}

/* ── Preferences: page intro & back ───────────────────────────── */
.prefs-intro {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 18px;
  text-wrap: pretty;
}

.prefs-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Mono', monospace;
  font-size: var(--font-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
}

.prefs-back:hover {
  color: var(--text-secondary);
}

.prefs-back svg {
  width: 14px;
  height: 14px;
}

/* ── Preferences: running summary chip line ───────────────────── */
.prefs-summary {
  position: sticky;
  top: 48px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 11px 13px;
  margin: 0 0 20px;
  background: rgba(8, 14, 26, 0.72);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
}

.prefs-summary__label {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  width: 100%;
  margin-bottom: 1px;
}

.prefs-summary__chip {
  font-size: var(--font-2xs);
  font-weight: 500;
  color: var(--text-secondary);
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(147, 197, 253, 0.1);
  border: 1px solid rgba(147, 197, 253, 0.2);
}

/* ── Preferences: question card ───────────────────────────────── */
.q-card {
  position: relative;
  min-width: 0;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  padding: 15px 16px;
  margin: 0 0 12px;
  overflow: hidden;
}

.q-card__title {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 3px;
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.q-card__why {
  font-size: var(--font-xs);
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0 0 12px;
  text-wrap: pretty;
}

/* ── Preferences: option groups ───────────────────────────────── */
.opt-group {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.opt {
  flex: 1 1 auto;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  min-height: 44px;
  cursor: pointer;
  transition:
    background 0.14s,
    border-color 0.14s,
    color 0.14s;
}

.opt:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

/* The native radio/checkbox carries selection state; hide it visually. */
.opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Accent dot marks the recommended option (no reserved glyph). */
.opt[data-recommended='true']::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--link);
  opacity: 0.55;
}

.opt:has(input:checked) {
  color: #fff;
  background: rgba(147, 197, 253, 0.16);
  border-color: rgba(147, 197, 253, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 14px rgba(147, 197, 253, 0.1);
}

.opt[data-recommended='true']:has(input:checked)::after {
  opacity: 1;
}

.opt__check {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.14s;
}

.opt:has(input:checked) .opt__check {
  opacity: 1;
}

/* ── Preferences: action bar & buttons ────────────────────────── */
.prefs-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 20px;
}

.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-size: var(--font-md);
  font-weight: 600;
  padding: 13px 18px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 48px;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.1s;
}

.pt-btn:active {
  transform: translateY(1px);
}

.pt-btn--primary {
  background: rgba(147, 197, 253, 0.16);
  border-color: rgba(147, 197, 253, 0.45);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 18px rgba(147, 197, 253, 0.12);
}

.pt-btn--primary:hover {
  background: rgba(147, 197, 253, 0.24);
}

.pt-btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
  color: var(--text-secondary);
}

.pt-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

.pt-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* ── Preferences: saved profile view ──────────────────────────── */

/* Edit-only chrome (saved-on-device line + start over). Hidden until
   personalize.js marks the page as editing an existing profile. */
.prefs-edit-only {
  display: none;
}

[data-pt-prefs].is-edit .prefs-edit-only {
  display: block;
}

.saved-line {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'DM Mono', monospace;
  font-size: var(--font-2xs);
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin: 20px 0 4px;
}

.saved-line svg {
  width: 14px;
  height: 14px;
}

.danger-link {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-2xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.danger-link:hover {
  color: var(--red);
}

/* ── Preferences: start-over confirm (native <dialog>) ────────── */
.confirm-sheet {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: rgba(10, 16, 28, 0.96);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  color: var(--text);
}

.confirm-sheet::backdrop {
  background: rgba(3, 6, 13, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: no-preference) {
  .confirm-sheet[open] {
    animation: pt-sheet-up 0.25s ease both;
  }
}

.confirm-sheet__title {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}

.confirm-sheet__body {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 16px;
  text-wrap: pretty;
}

.confirm-sheet__actions {
  display: flex;
  gap: 9px;
}

.confirm-sheet__actions .pt-btn {
  flex: 1;
}

.pt-btn--danger {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.pt-btn--danger:hover {
  background: rgba(239, 68, 68, 0.22);
}

@keyframes pt-sheet-up {
  from {
    transform: translateY(28px);
  }

  to {
    transform: translateY(0);
  }
}

/* ── Preferences: level chooser (segmented bands) ─────────────── */
.level-bands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.level-bands .opt {
  flex-direction: column;
  gap: 2px;
  padding: 9px 4px;
}

.level-bands .opt small {
  font-family: 'DM Mono', monospace;
  font-size: var(--font-3xs);
  font-weight: 400;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.level-bands .opt[aria-pressed='true'] small {
  color: rgba(147, 197, 253, 0.7);
}

/* ── Events page ──────────────────────────────────────────────── */
.events-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 24px;
}

.events-head__intro {
  flex: 1 1 320px;
}

.events-lead {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  max-width: 52ch;
  margin: 0;
}

.cal-picker {
  position: relative;
  flex-shrink: 0;
  margin-top: 6px;
}

.cal-subscribe {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  font-weight: 600;
  font-size: var(--font-base);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  overflow: hidden;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease;
}

.cal-subscribe::-webkit-details-marker {
  display: none;
}

.cal-subscribe::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 45%, transparent 60%),
    linear-gradient(225deg, rgba(180, 210, 255, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.cal-subscribe:hover {
  transform: translateY(-1px);
  border-color: var(--link);
}

.cal-subscribe__icon {
  position: relative;
  color: var(--link);
}

.cal-subscribe__label {
  position: relative;
}

.cal-subscribe__caret {
  position: relative;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.cal-picker[open] .cal-subscribe__caret {
  transform: rotate(180deg);
}

.cal-picker__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 200px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

.cal-picker__hint {
  margin: 4px 8px 8px;
  font-size: var(--font-2xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cal-picker__opt {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

.cal-picker__opt:hover {
  background: rgba(255, 255, 255, 0.06);
}

.event-row__name {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text);
}

.badge--event {
  font-size: var(--font-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

/* ── App shell & view transitions ─────────────────────────────── */

/* Cross-document view transitions: every same-origin navigation animates as a
   smooth fade, so this static multi-page site reads like a single app. Pure
   CSS, no JS. The named nav above is excluded from the root fade and persists. */
@view-transition {
  navigation: auto;
}

/* Respect reduced-motion: opt the whole document out of the transition. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* Installed (home-screen) mode: keep content clear of the notch and the home
   indicator. The browser handles insets in a normal tab, so this is scoped to
   standalone. status-bar-style "black" already reserves the top bar. */
@media (display-mode: standalone) {
  .nav-inner {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .page-wrap {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

/* ── Light mode ───────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f0f4f8;
    --card-bg: rgba(255, 255, 255, 0.75);
    --border: rgba(0, 0, 0, 0.1);
    --border-light: rgba(0, 0, 0, 0.05);
    --text: #0f172a;
    --text-secondary: #1e293b;
    --text-muted: rgba(15, 23, 42, 0.65);
    --text-dim: rgba(15, 23, 42, 0.65);
    --text-tertiary: rgba(15, 23, 42, 0.65);
    --text-faint: rgba(15, 23, 42, 0.3);
    --link: #2563eb;
    --nav-bg: rgba(240, 244, 248, 0.88);
    --nav-border: rgba(0, 0, 0, 0.08);
    --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.1);
    --text-nav: rgba(0, 0, 0, 0.5);
    --text-nav-hover: rgba(0, 0, 0, 0.8);
    --text-icon: rgba(0, 0, 0, 0.4);
    --text-icon-active: rgba(0, 0, 0, 0.7);
    --build-regular: rgba(0, 0, 0, 0.15);
    --text-community: #92400e;
  }

  /* Candy accent — hairline ring so pastel candy colors keep definition */
  .family-title::after {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  }

  /* Ambient gradient — softer on light backgrounds */
  html::before {
    background:
      radial-gradient(ellipse 80% 55% at 10% 5%, rgba(56, 189, 248, 0.1) 0%, transparent 55%),
      radial-gradient(ellipse 60% 70% at 90% 90%, rgba(139, 92, 246, 0.08) 0%, transparent 55%),
      radial-gradient(ellipse 40% 40% at 55% 40%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
      radial-gradient(ellipse 50% 30% at 75% 15%, rgba(249, 115, 22, 0.05) 0%, transparent 50%);
  }

  /* Card shine — brighter top-left highlight looks natural on light glass */
  .card::before,
  .bento-tile::before,
  .table-wrap::before,
  .lineup-card::before {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 45%, transparent 60%),
      linear-gradient(225deg, rgba(180, 210, 255, 0.08) 0%, transparent 50%);
  }

  /* Candy-tinted shine keeps its tint over the light card shine */
  .card--candy::before {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.15) 45%, transparent 60%),
      linear-gradient(135deg, color-mix(in srgb, var(--candy-primary) 10%, transparent) 0%, transparent 55%),
      linear-gradient(225deg, color-mix(in srgb, var(--candy-secondary) 8%, transparent) 0%, transparent 50%);
  }

  /* Nav links */
  nav a {
    color: rgba(0, 0, 0, 0.5);
  }

  nav a:hover {
    color: rgba(0, 0, 0, 0.8);
  }

  nav a.active {
    color: #0f172a;
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }

  .nav-toggle {
    color: rgba(0, 0, 0, 0.6);
  }

  .nav-search input[type='search'] {
    background: rgba(0, 0, 0, 0.05);
  }

  .nav-links {
    background: rgba(240, 244, 248, 0.97);
    border-top-color: rgba(0, 0, 0, 0.08);
  }

  .nav-links a.active {
    border-left-color: #2563eb;
  }

  /* Card bar */
  .card__bar {
    background: rgba(0, 0, 0, 0.1);
  }

  /* Chevrons */
  .chevron {
    color: rgba(0, 0, 0, 0.4);
  }

  details.card__body[open] .chevron {
    color: rgba(0, 0, 0, 0.7);
  }

  details.lineup-card__body[open] .chevron {
    color: rgba(0, 0, 0, 0.4);
  }

  /* Card list separator + inner panel */
  details.card__body[open] > .card-list,
  details.lineup-card__body[open] > .card-list {
    border-top-color: rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0.04);
  }

  /* Encounter rows */
  .encounter-row {
    border-bottom-color: rgba(0, 0, 0, 0.07);
  }

  .encounter-row__rank {
    color: rgba(0, 0, 0, 0.38);
  }

  .encounter-row__rank a {
    color: rgba(0, 0, 0, 0.5);
  }

  .encounter-row__pct {
    color: rgba(0, 0, 0, 0.3);
  }

  /* Schedule rows */
  .schedule-row {
    border-bottom-color: rgba(0, 0, 0, 0.07);
  }

  .schedule-date {
    color: rgba(0, 0, 0, 0.42);
  }

  /* Bento tile hover */
  .bento-tile:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.12),
      0 0 0 1px rgba(37, 99, 235, 0.1);
    transform: translateY(-2px);
  }

  .bento-tile--raids:hover,
  .bento-tile--eggs:hover,
  .bento-tile--tasks:hover,
  .bento-tile--rocket:hover,
  .bento-tile--dynamax:hover,
  .bento-tile--trades:hover {
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.12),
      0 0 0 1px rgba(37, 99, 235, 0.1);
  }

  /* Table-wrap rows */
  .table-wrap td {
    border-top-color: rgba(0, 0, 0, 0.05);
  }

  /* Generic tables */
  th,
  td {
    border-color: rgba(0, 0, 0, 0.07);
  }

  thead th {
    background: rgba(0, 0, 0, 0.03);
  }

  tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
  }

  tbody tr.top10-row {
    background: rgba(180, 130, 0, 0.1);
  }

  /* Blockquote */
  blockquote {
    border-left-color: rgba(37, 99, 235, 0.4);
    background: rgba(37, 99, 235, 0.05);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Code / pre */
  code {
    background: rgba(0, 0, 0, 0.06);
  }

  pre {
    background: rgba(0, 0, 0, 0.05);
  }

  /* H2 separator */
  h2 {
    border-bottom-color: rgba(0, 0, 0, 0.08);
  }

  /* Footer */
  .site-footer {
    color: rgba(0, 0, 0, 0.6);
  }

  .site-footer__disclaimer {
    color: rgba(0, 0, 0, 0.6);
    border-top-color: rgba(0, 0, 0, 0.08);
  }

  /* Badges — darken text for legibility on light backgrounds */
  .badge--new {
    background: rgba(45, 212, 191, 0.15);
    border-color: rgba(13, 148, 136, 0.35);
    color: #134e4a;
  }

  .badge--legendary {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(126, 34, 206, 0.35);
    color: #6b21a8;
  }

  .badge--shiny {
    background: rgba(250, 204, 21, 0.16);
    border-color: rgba(202, 138, 4, 0.35);
    color: #854d0e;
  }

  .badge--catch-priority-farm {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #065f46;
  }

  .badge--catch-priority-selective {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(100, 116, 139, 0.3);
    color: #334155;
  }

  .badge--event {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(100, 116, 139, 0.3);
    color: #334155;
  }

  .cal-picker__opt:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  /* Build form badges */
  .form-badge--shadow {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
  }

  .form-badge--mega {
    background: rgba(249, 115, 22, 0.1);
    color: #c2410c;
  }

  .form-badge--primal {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
  }

  .form-badge--dynamax {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
  }

  .form-badge--gigantamax {
    background: rgba(168, 85, 247, 0.1);
    color: #7c3aed;
  }

  .form-badge--purified {
    background: rgba(148, 163, 184, 0.1);
    color: #475569;
  }

  .form-badge--regular {
    background: rgba(0, 0, 0, 0.04);
    color: #475569;
  }

  .ranking-entry__form--gigantamax {
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.25);
    color: #7c3aed;
  }

  .ranking-entry__form--dynamax {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #b91c1c;
  }

  .ranking-entry__form--shadow {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.25);
    color: #4338ca;
  }

  .ranking-entry__form--mega {
    background: rgba(249, 115, 22, 0.08);
    border-color: rgba(249, 115, 22, 0.25);
    color: #c2410c;
  }

  .ranking-entry__form--primal {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
    color: #047857;
  }

  .res-tag-note {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.2);
    color: var(--text-secondary);
  }

  .cost-dot {
    border-color: rgba(0, 0, 0, 0.3);
  }

  .cost-dot--filled {
    background: #1d4ed8;
    border-color: #1d4ed8;
  }

  .cost-tip {
    background: rgba(255, 255, 255, 0.97);
  }

  .elite-tm-badge {
    background: rgba(161, 98, 7, 0.1);
    color: #92400e;
    border-color: rgba(161, 98, 7, 0.25);
  }

  .upcoming-badge {
    background: rgba(45, 212, 191, 0.15);
    border-color: rgba(13, 148, 136, 0.35);
    color: #134e4a;
  }

  .type-card {
    background: color-mix(in srgb, var(--type-card-color, transparent) 15%, transparent);
  }

  .type-card:hover,
  .type-card:focus-visible {
    background: color-mix(in srgb, var(--type-card-color, transparent) 25%, transparent);
  }

  .type-card[aria-current='page'] {
    background: color-mix(in srgb, var(--type-card-color, transparent) 30%, transparent);
  }
}