/* DM SANS — the league's text face (Colophon Foundry for DeepMind; Google
   Fonts, open licence). Every variant, from four variable files: roman and
   italic, each split into latin and latin-extended, each carrying the whole
   weight axis (100-1000) and the optical-size axis (9-40pt), which the browser
   drives from the font size on its own — small labels get the wider, sturdier
   cut, big lines the tighter one.

   WHAT A PAGE ACTUALLY DOWNLOADS: one file. The roman latin file is preloaded
   by the shell; the italic and the extended-latin files are only fetched by a
   page that draws a character or a style they hold (unicode-range, and the
   italic face is only matched by italic text). */
@font-face { font-family: "DM Sans"; src: url("/fonts/dmsans-var.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; 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 Sans"; src: url("/fonts/dmsans-var-ext.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; src: url("/fonts/dmsans-italic-var.woff2") format("woff2"); font-weight: 100 1000; font-style: italic; font-display: swap; 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 Sans"; src: url("/fonts/dmsans-italic-var-ext.woff2") format("woff2"); font-weight: 100 1000; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

html.v2 { font-synthesis: none; font-optical-sizing: auto; font-kerning: normal; text-rendering: optimizeLegibility; }

/* Builder Extended's lighter weight, for figures that should be wide but
   not loud (the stat row on a player card, the top bar's own words). */
@font-face { font-family: "Builder Extended"; src: url("/fonts/builder-extended-400.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }

/* ============================================================================
   BFL Hub — UI V2 · the base layer (shared by the site and the database editor)

   FLOODLIT GLASS. A night stadium: a black that is nearly blue, lit from above
   by the reader's club colour; surfaces of tinted glass with a bright edge
   where the light catches them; titles and big figures in white with the
   league's own neon halo; depth from layered shadow, from blur behind the
   floating parts, and from cards that lean towards the pointer.

   Colour is LIGHT here, never ink: the club's colour washes the background and
   rims the glass, and the type stays white. Everything that moves moves on the
   compositor (transform, opacity), and blur is kept to what floats.

   Everything here is OUTSIDE the `v1` cascade layer the shells import the live
   stylesheets into, so it wins over them whatever their specificity.
   ========================================================================= */

:root.v2 {
  /* -------- the night */
  --v2-bg: #050608;
  --v2-bg-2: #0a0c0f;
  --v2-raised: #0f1114;
  --v2-surface: #15181c;
  --v2-surface-2: #1b1f24;
  --v2-surface-3: #252a30;

  /* -------- glass. Fill, edge, the highlight along the top where the light
     catches it, and the shadow it casts. */
  --v2-glass: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .022));
  --v2-glass-hi: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035));
  --v2-glass-solid: rgba(17, 19, 23, .62);
  --v2-edge: rgba(255, 255, 255, .09);
  --v2-edge-2: rgba(255, 255, 255, .16);
  --v2-edge-3: rgba(255, 255, 255, .28);
  --v2-shine: inset 0 1px 0 rgba(255, 255, 255, .09);
  --v2-depth-1: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
  --v2-depth-2: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 70px -24px rgba(0, 0, 0, .85);
  --v2-depth-3: 0 4px 12px rgba(0, 0, 0, .4), 0 50px 120px -30px rgba(0, 0, 0, .95);
  --v2-blur: blur(28px) saturate(170%);

  /* -------- lines and type */
  --v2-line: rgba(255, 255, 255, .07);
  --v2-line-2: rgba(255, 255, 255, .12);
  --v2-line-3: rgba(255, 255, 255, .2);
  --v2-text: #ffffff;
  --v2-text-2: rgba(255, 255, 255, .64);
  --v2-text-3: rgba(255, 255, 255, .42);

  /* -------- the white neon the league's titles have always worn */
  --v2-neon: 0 0 1px rgba(255, 255, 255, .85), 0 0 18px rgba(255, 255, 255, .28), 0 0 52px rgba(255, 255, 255, .14);
  --v2-neon-soft: 0 0 14px rgba(255, 255, 255, .18), 0 0 40px rgba(255, 255, 255, .08);

  /* -------- meaning */
  --v2-live: #ff4747;
  --v2-win: #34d399;
  --v2-loss: #ff6b6b;
  --v2-warn: #f5b84b;
  --v2-gold: #e9c27a;
  --v2-silver: #d3d8de;
  --v2-bronze: #d39a68;

  /* -------- the accent is white; the club is light */
  --v2-accent: #ffffff;
  --v2-accent-ink: #050608;
  --v2-accent-soft: rgba(255, 255, 255, .1);
  --v2-accent-line: rgba(255, 255, 255, .3);
  --v2-accent-faint: rgba(255, 255, 255, .05);
  --v2-club-rgb: 140, 150, 165;

  /* -------- type */
  --v2-font: "DM Sans", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --v2-display: "Builder Extended", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* The quiet face: the same text face, named apart so a card can ask for it. */
  --v2-quiet: "DM Sans", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --v2-fs-display: clamp(2.4rem, 1.4rem + 3.6vw, 5rem);
  --v2-fs-h1: clamp(1.9rem, 1.3rem + 2vw, 3.1rem);
  --v2-fs-h2: clamp(1.15rem, 1rem + .5vw, 1.45rem);
  --v2-fs-h3: 1rem;
  --v2-fs-body: .9375rem;
  --v2-fs-small: .8125rem;
  --v2-fs-micro: .6875rem;

  /* -------- shape, space, width */
  --v2-r-xs: 8px;
  --v2-r-sm: 12px;
  --v2-r: 18px;
  --v2-r-lg: 24px;
  --v2-r-xl: 30px;
  --v2-gut: clamp(16px, 3vw, 56px);
  --v2-max: 1680px;
  --v2-max-wide: 1680px;
  --v2-sec-gap: clamp(40px, 4vw, 72px);

  /* -------- motion: quick out, soft landing */
  --v2-t-press: 120ms;
  --v2-t-fast: 180ms;
  --v2-t: 260ms;
  --v2-t-slow: 420ms;
  --v2-ease: cubic-bezier(.2, .8, .2, 1);
  --v2-ease-out: cubic-bezier(.16, 1, .3, 1);
  --v2-ease-exit: cubic-bezier(.4, 0, 1, 1);
  --v2-ease-io: cubic-bezier(.65, 0, .35, 1);

  /* -------- a card on the page: glass without the blur */
  --v2-card: linear-gradient(180deg, rgba(255, 255, 255, .058), rgba(255, 255, 255, .018));
  --v2-card-edge: inset 0 0 0 1px rgba(255, 255, 255, .075), inset 0 1px 0 rgba(255, 255, 255, .08);
  --v2-card-edge-hi: inset 0 0 0 1px rgba(255, 255, 255, .17), inset 0 1px 0 rgba(255, 255, 255, .12);
  --v2-card-lift: 0 24px 50px -32px rgba(0, 0, 0, .95);
  --v2-inset: rgba(255, 255, 255, .04);

  /* -------- the live site's tokens, pointed at V2's */
  --bg: var(--v2-bg);
  --bg-2: var(--v2-bg-2);
  --panel: var(--v2-raised);
  --panel-2: var(--v2-surface);
  --panel-3: var(--v2-surface-2);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .13);
  --line-3: rgba(255, 255, 255, .22);
  --text: var(--v2-text);
  --text-2: var(--v2-text-2);
  --text-3: var(--v2-text-3);
  --accent: #ffffff;
  --accent-ink: #050608;
  --accent-soft: rgba(255, 255, 255, .08);
  --accent-line: rgba(255, 255, 255, .24);
  --danger: var(--v2-loss);
  --gold: var(--v2-gold);
  --live: var(--v2-live);
  --shadow: var(--v2-depth-2);
  --shadow-sm: var(--v2-depth-1);
  --ring: 0 0 0 2px rgba(255, 255, 255, .3);
  --r: var(--v2-r);
  --r-sm: var(--v2-r-sm);
  --r-xs: var(--v2-r-xs);
  --font: var(--v2-font);
  --font-title: var(--v2-display);
  --maxw: var(--v2-max);
  --gut: var(--v2-gut);
  --motion-fast: var(--v2-t-fast);
  --motion-enter: var(--v2-t);
  --ease-out: var(--v2-ease);
  --ease-spring: var(--v2-ease-out);
  color-scheme: dark;
  scroll-padding-top: calc(var(--bar-h, 80px) + 16px);
}

html.v2 body {
  background: var(--v2-bg);
  color: var(--v2-text);
  font-family: var(--v2-font);
  font-size: var(--v2-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html.v2 :focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 3px; }
html.v2 ::selection { background: rgba(255, 255, 255, .22); color: #fff; }

/* ------------------------------------------------------------ the night sky
   One fixed layer behind everything: the club's colour falling from the top,
   a cooler light from the other side, and a fine grain so the black reads as
   a material rather than as an empty screen. It never repaints on scroll. */
.v2-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(var(--v2-club-rgb), .24), transparent 70%),
    radial-gradient(900px 560px at 92% -6%, rgba(140, 170, 255, .07), transparent 70%),
    radial-gradient(1400px 900px at 50% 120%, rgba(var(--v2-club-rgb), .07), transparent 70%),
    var(--v2-bg);
  transform: translateZ(0);
}
.v2-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ------------------------------------------------------------ type */
.v2-display, .v2-title {
  font-family: var(--v2-display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.022em;
  margin: 0;
  color: #fff;
  text-shadow: var(--v2-neon);
  overflow-wrap: anywhere;
}
.v2-display { font-size: var(--v2-fs-display); }
.v2-title { font-size: var(--v2-fs-h1); }
.v2-h2 {
  font-family: var(--v2-display);
  font-weight: 700;
  font-size: var(--v2-fs-h2);
  line-height: 1.15;
  letter-spacing: -.012em;
  margin: 0;
  color: #fff;
}
.v2-h3 { font-family: var(--v2-display); font-size: var(--v2-fs-h3); font-weight: 600; margin: 0; line-height: 1.3; letter-spacing: -.005em; }
.v2-label {
  color: var(--v2-text-3);
  font-size: var(--v2-fs-micro);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.v2-meta { color: var(--v2-text-2); font-size: var(--v2-fs-small); margin: 0; }
.v2-muted { color: var(--v2-text-2); }
.v2-faint { color: var(--v2-text-3); }
.v2-num, .v2-tab { font-variant-numeric: tabular-nums; }
.v2-fig { font-family: var(--v2-display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.v2-glow { text-shadow: var(--v2-neon-soft); }
.v2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.v2-dot-sep::before { content: "\00b7"; margin: 0 .5em; color: var(--v2-text-3); }

/* ------------------------------------------------------------ glass */
.v2-glass {
  position: relative;
  background: var(--v2-glass);
  border: 1px solid var(--v2-edge);
  border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-shine), var(--v2-depth-1);
}
/* Glass that floats over the page blurs what is behind it. */
.v2-float {
  background: var(--v2-glass-solid);
  -webkit-backdrop-filter: var(--v2-blur);
  backdrop-filter: var(--v2-blur);
  border: 1px solid var(--v2-edge-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--v2-depth-2);
}

/* ------------------------------------------------------------ buttons */
.v2-btn {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--v2-edge-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 20px -10px rgba(0, 0, 0, .8);
  color: #fff;
  font: 700 .8125rem/1 var(--v2-font);
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--v2-t-fast) var(--v2-ease), border-color var(--v2-t-fast) var(--v2-ease), box-shadow var(--v2-t) var(--v2-ease), transform var(--v2-t-press) var(--v2-ease);
}
.v2-btn:hover { border-color: var(--v2-edge-3); background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06)); }
.v2-btn:active { transform: scale(.97); }
.v2-btn .v2-ic { flex: none; transition: transform var(--v2-t) var(--v2-ease-out); }
.v2-btn:hover .v2-ic-go { transform: translateX(3px); }
/* White: the one thing on a screen to press. */
.v2-btn.is-primary, .v2-btn.is-light {
  border-color: transparent;
  background: #fff;
  color: #050608;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 10px 34px -10px rgba(255, 255, 255, .45);
}
.v2-btn.is-primary:hover, .v2-btn.is-light:hover { background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 14px 44px -10px rgba(255, 255, 255, .6); }
.v2-btn.is-ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--v2-text-2); }
.v2-btn.is-ghost:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.v2-btn.is-outline { background: transparent; box-shadow: none; }
.v2-btn.is-danger { color: var(--v2-loss); }
.v2-btn.is-sm { min-height: 34px; padding: 0 14px; font-size: .75rem; gap: 6px; }
.v2-btn.is-lg { min-height: 52px; padding: 0 28px; font-size: .9375rem; }
.v2-btn.is-icon { width: 42px; min-height: 42px; padding: 0; }
.v2-btn.is-icon.is-sm { width: 34px; min-height: 34px; }
.v2-btn .v2-badge { height: 20px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: inherit; }
@media (pointer: coarse) {
  .v2-btn { min-height: 46px; }
  .v2-btn.is-sm { min-height: 38px; }
  .v2-btn.is-icon { width: 46px; min-height: 46px; }
}

/* ------------------------------------------------------------ segmented */
.v2-seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--v2-edge);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  isolation: isolate;
}
.v2-seg::-webkit-scrollbar { display: none; }
.v2-seg > button, .v2-seg > a {
  appearance: none;
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--v2-text-2);
  font: 700 .8125rem/1 var(--v2-font);
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--v2-t-fast) var(--v2-ease);
}
.v2-seg > button:hover, .v2-seg > a:hover { color: #fff; }
.v2-seg > .active, .v2-seg > .on, .v2-seg > [aria-selected="true"], .v2-seg > [aria-current="page"] { color: #fff; }
.v2-seg-ind {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 14px -4px rgba(0, 0, 0, .6);
  transition: transform 440ms var(--v2-ease-out), width 440ms var(--v2-ease-out);
  pointer-events: none;
}
.v2-seg.is-sm > button, .v2-seg.is-sm > a { min-height: 30px; padding: 0 13px; font-size: .75rem; }
.v2-seg .v2-count { color: var(--v2-text-3); font-size: .6875rem; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .v2-seg > button, .v2-seg > a { min-height: 40px; } }

/* ------------------------------------------------------------ chips, badges */
.v2-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--v2-edge);
  background: rgba(255, 255, 255, .035);
  color: var(--v2-text-2);
  font: 700 .75rem/1 var(--v2-font);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--v2-t-fast), color var(--v2-t-fast), background-color var(--v2-t-fast);
}
.v2-chip:hover { color: #fff; border-color: var(--v2-edge-2); background: rgba(255, 255, 255, .07); }
/* A chosen chip is lit glass, not a white fill: a chip can carry a white mark
   (a division's logo), which a white fill would swallow. */
.v2-chip.on, .v2-chip.active, .v2-chip[aria-pressed="true"] { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .09)); border-color: rgba(255, 255, 255, .45); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 18px -4px rgba(255, 255, 255, .45); }
.v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--v2-text-2);
  font: 700 .6875rem/1 var(--v2-font);
  letter-spacing: .04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.v2-badge.is-live { background: rgba(255, 71, 71, .14); border-color: rgba(255, 71, 71, .3); color: #ff8a8a; }
.v2-badge.is-win { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .25); color: #6ee7b7; }
.v2-badge.is-loss { background: rgba(255, 107, 107, .1); border-color: rgba(255, 107, 107, .25); color: #fca5a5; }
.v2-badge.is-warn { background: rgba(245, 184, 75, .1); border-color: rgba(245, 184, 75, .28); color: #fcd34d; }
.v2-badge.is-accent, .v2-badge.is-solid { background: #fff; border-color: #fff; color: #050608; }
/* Live: a small red light with its own glow. */
.v2-livemark {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v2-live);
  box-shadow: 0 0 0 3px rgba(255, 71, 71, .18), 0 0 12px rgba(255, 71, 71, .9);
  flex: none;
}

/* ------------------------------------------------------------ sections */
.v2-sec { position: relative; margin-top: var(--v2-sec-gap); }
.v2-sec:first-child, .v2-sec-first { margin-top: 0; }
.v2-sec-head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; min-width: 0; }
.v2-sec-head .v2-h2 { flex: none; }
.v2-sec-head .v2-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--v2-text-3); }
.v2-spacer { flex: 1 1 auto; }
.v2-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--v2-text-2);
  font-size: var(--v2-fs-small);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--v2-t-fast);
}
.v2-more:hover { color: #fff; }
.v2-more .v2-ic { transition: transform var(--v2-t) var(--v2-ease-out); }
.v2-more:hover .v2-ic { transform: translateX(3px); }

.v2-box {
  position: relative;
  background: var(--v2-glass);
  border: 1px solid var(--v2-edge);
  border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-shine), var(--v2-depth-1);
  overflow: hidden;
}
.v2-list { display: flex; flex-direction: column; }
.v2-list > * + * { border-top: 1px solid var(--v2-line); }
.v2-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  min-height: 60px;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  transition: background-color var(--v2-t-fast) var(--v2-ease);
}
button.v2-row, a.v2-row, .v2-row[role="link"], .v2-row[data-act], .v2-row[data-v2-act] { cursor: pointer; }
button.v2-row:hover, a.v2-row:hover, .v2-row[role="link"]:hover, .v2-row[data-act]:hover, .v2-row[data-v2-act]:hover { background: rgba(255, 255, 255, .04); }
.v2-row-main { min-width: 0; }
.v2-row-title { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-row-sub { display: block; color: var(--v2-text-2); font-size: var(--v2-fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-row-end { display: flex; align-items: center; gap: 10px; color: var(--v2-text-2); font-size: var(--v2-fs-small); }

.v2-empty {
  padding: 30px 24px;
  border-radius: var(--v2-r-lg);
  border: 1px dashed var(--v2-line-2);
  background: rgba(255, 255, 255, .015);
  color: var(--v2-text-2);
}
.v2-empty b { display: block; color: #fff; font-size: var(--v2-fs-h3); margin-bottom: 4px; }
.v2-empty p { margin: 0; max-width: 62ch; }
.v2-empty .v2-btn { margin-top: 14px; }

/* ------------------------------------------------------------ faces, crests */
html.v2 .v2-av, html.v2 .av.v2-av {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, #2a2f36, #15181c);
  color: var(--v2-text-2);
  font: 700 12px/1 var(--v2-font);
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
html.v2 .v2-av img, html.v2 .av.v2-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.v2 .v2-av.is-xs { width: 24px; height: 24px; font-size: 11px; }
html.v2 .v2-av.is-sm { width: 32px; height: 32px; }
html.v2 .v2-av.is-lg { width: 60px; height: 60px; font-size: 17px; }
html.v2 .v2-av.is-xl { width: 96px; height: 96px; font-size: 24px; }
html.v2 .v2-crest { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }
html.v2 span.v2-crest, html.v2 .v2-crest.ph { background: var(--v2-surface-2); color: var(--v2-text-2); font: 700 12px/1 var(--v2-font); }
html.v2 .v2-crest.is-sm { width: 20px; height: 20px; }
html.v2 .v2-crest.is-lg { width: 42px; height: 42px; }
html.v2 .v2-crest.is-xl { width: 76px; height: 76px; border-radius: 12px; }
html.v2 span.v2-crest.is-xl { font-size: 26px; }

/* ------------------------------------------------------------ fields */
.v2-input {
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--v2-edge);
  background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
  color: #fff;
  font: 500 var(--v2-fs-body)/1.2 var(--v2-font);
  transition: border-color var(--v2-t-fast), box-shadow var(--v2-t-fast);
}
.v2-input::placeholder { color: var(--v2-text-3); }
.v2-input:focus { outline: none; border-color: rgba(255, 255, 255, .35); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 0 4px rgba(255, 255, 255, .06); }
@media (max-width: 899px) { .v2-input { font-size: 16px; } }
.v2-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid var(--v2-edge-2);
  background: rgba(255, 255, 255, .04);
  color: var(--v2-text-2);
  font: 700 11px/1 var(--v2-font);
}

/* ------------------------------------------------------------ a number that rolls */
.v2-rolling { display: inline-flex; align-items: baseline; }
.v2-dig { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: baseline; }
.v2-dig-col { display: flex; flex-direction: column; }
.v2-dig-col > span { display: block; height: 1em; line-height: 1; }

/* ------------------------------------------------------------ a meter */
.v2-meter { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.v2-meter > i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v, 0%);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .55), #fff);
  box-shadow: 0 0 10px rgba(255, 255, 255, .5);
  transform-origin: left center;
  animation: v2-grow 700ms var(--v2-ease-out) both;
}
@keyframes v2-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v2-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes v2-fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------ depth: the lean and the shine

   A card marked `data-v2-tilt` leans towards the pointer (the kit eases it
   there frame by frame) and a soft light sits where the pointer is, the way a
   glossy card catches a lamp. Children marked `data-v2-z` stand off the card
   at their own depth. */
[data-v2-tilt] { transform-style: preserve-3d; transition: transform 600ms var(--v2-ease-out); }
[data-v2-tilt].is-tilting { transition: none; }
[data-v2-tilt] > .v2-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--v2-t) var(--v2-ease);
  z-index: 3;
}
/* The light is painted once, as a disc, and only MOVED by its transform while the
   pointer moves. A gradient whose position changes would repaint the whole card
   on every frame. */
[data-v2-tilt] > .v2-shine::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle 210px, rgba(255, 255, 255, .14), transparent);
  transform: translate3d(calc(var(--sx, 0px) - 210px), calc(var(--sy, 0px) - 210px), 0);
}
[data-v2-tilt].is-tilting > .v2-shine { opacity: 1; }
[data-v2-tilt].is-tilting > .v2-shine::before { will-change: transform; }
[data-v2-z] { transform: translateZ(var(--z, 30px)); }

/* ------------------------------------------------------------ the retired effects of the live site */
html.v2 .lit-wash, html.v2 .lit-beam, html.v2 .glass-halo, html.v2 .ph-img, html.v2 .ph-shade { display: none; }
/* The live site's own glass is flat here: a card that scrolls never blurs. */
html.v2 [data-glass], html.v2 [data-eglass] { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.v2 [data-glass]::before, html.v2 [data-glass]::after, html.v2 [data-eglass]::before, html.v2 [data-eglass]::after { display: none; }
html.v2 [data-tilt] { transform: none; }
html.v2 .acc-dot, html.v2 .live-chip i { animation: none; }
/* Its underline under the active tab: V2's tabs light up instead. */
html.v2 .nav-link::after, html.v2 .subtab::before, html.v2 .subtab::after { display: none; }
html.v2 .btn, html.v2 .iconbtn, html.v2 .qa { translate: none; }

/* A very large screen: the page takes more of it, and its type grows a step. */
@media (min-width: 2000px) {
  :root.v2 { --v2-max: 2080px; --v2-max-wide: 2080px; font-size: 106.25%; }
}
@media (min-width: 2800px) {
  :root.v2 { --v2-max: 2400px; --v2-max-wide: 2400px; font-size: 112.5%; }
}

@media (prefers-reduced-motion: reduce) {
  html.v2 *, html.v2 *::before, html.v2 *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}