/* PLPD on blandalytics.com: the tokens and the base components of the Pitcher List Pro Dashboard design
   system (the "PLPD design system" artifact: tokens.json, components/bundle.css and page-composition.md,
   as of its 2026-10-20 version), for any page to load. Values are copied exactly; the few literals are
   the system's own "no token" Figma values.
   Fonts: DM Sans (display: headings, buttons, labels) and Work Sans (text: data, cells, body), loaded
   by the page from Google Fonts. Dark only. */
:root{
  color-scheme:dark;
  /* surfaces */
  --surfaces-surface-1:#13152a; --surfaces-surface-2:#181a2c; --surfaces-surface-3:#21243a;
  --card-card-bg:#292c42; --card-card-bg-hover:#34374c;
  /* brand */
  --brand-brand-cyan:#55e8ff; --brand-brand-cyan-header:#73efff; --brand-brand-amber:#ffc277;
  /* text */
  --base-white:#ffffff; --text-text-cell:#f0f1f5; --text-text-player:#f6f8fff5; --text-text-nav:#cbd7fd;
  --text-text-team:#b4bbd7ad; --text-text-meta:#c0c4d8b8; --text-text-zero:#a4aacab2; --lgd-text-dim:#8a8eb0;
  --text-name:#f6f8fff5; /* meta lines under names and headers; body copy under a mini heading is text-nav */
  /* borders and overlays */
  --borders-border-tab:#ffffff21; --white-alpha-200:#ffffff0a; --overlay-overlay-white-08:#ffffff14;
  --navy-300:#a4aaca; --navy-500:#404460; --navy-600:#2e3150;
  /* data tables */
  --data-table-pl-data-table-wrap-border:#768abe38;
  --data-table-pl-data-table-header-border:#8ca5d21b;
  --data-table-pl-data-table-header-text:var(--brand-brand-cyan-header);
  --data-table-pl-data-table-row-border:#8ca5d21c;
  --data-table-pl-data-table-row-open-bg:#293461; /* table-row-hover: hover and open rows are one colour */
  --data-table-pl-data-table-cell-text:#f0f1f5;
  --data-table-pl-data-table-cell-zero:#9298b8c7;
  --data-table-pl-data-table-scroll-base-bg:#202233;
  --data-table-pl-data-table-sticky-row-bg-light:#272d48;
  --data-table-pl-data-table-sticky-row-bg-dark:#242840;
  --data-table-pl-data-table-scrollbar-track:#6073a82e;
  --data-table-pl-data-table-scrollbar-thumb:#7ac1ff7a;
  --data-table-pl-data-table-row-bg-stripe-light:#303a6175;
  --data-table-pl-data-table-row-bg-stripe-dark:#2a335561;
  --data-table-pl-data-table-row-bg-section:#202233;
  --data-table-pl-data-table-row-hover-bg:#293461;
  --table-thead-label:#73efff; --surface-border-card:#2e3a5e;
  /* inputs */
  --input-field-bg:#4748a212; --input-field-border:#81ace440; --input-field-border-hover:#81ace46b;
  --overlay-overlay-white-13:#ffffff21; --overlay-overlay-white-25:#ffffff40;
  --dropdown-dd-menu-bg:#1b1f38; --dropdown-dd-menu-border:#ffffff17; --dropdown-dd-item-hover-bg:#ffffff0d;
  /* status */
  --status-message-error:#ff8a8a; --green-400:#34d399;
  --data-table-header-tooltip-border:#73efff38;
  /* charts (the Process+ chart set) */
  --chart-blue:#53aaf8; --chart-gold:#f0b846; --chart-axis:#cbd7fd; --chart-muted:#c4cdecd9;
  --chart-grid:#ffffff0f; --chart-center-line:#ffffff3d;
  /* gradients and shadows */
  --gradient-gloss:linear-gradient(180deg,#ffffff26 0%,#ffffff0d 100%);
  --gradient-pl-btn-primary-bg:linear-gradient(150deg,#245297 0%,#0a2e63 100%);
  --gradient-pl-btn-primary-bg-hover:linear-gradient(150deg,#295eae 0%,#0c3572 100%);
  --gradient-pl-data-table-header-bg:linear-gradient(180deg,#404660 0%,#3c4360 22%,#353e5b 45%,#333c59 68%,#313a59 100%);
  --gradient-pl-data-table-header-tooltip-bg:linear-gradient(180deg,#162344f5 0%,#0f1730f7 100%);
  --shadow-pl-btn-primary:0 0 0 1px rgba(0,80,100,.4),0 6px 20px 0 rgba(0,0,0,.36),inset 0 1px 0 0 rgba(255,255,255,.3);
  --shadow-pl-btn-standard-pressed:inset 0 3px 7px 0 rgba(0,0,0,.55);
  --shadow-pl-data-table-wrap-shadow:0 0 0 1px rgba(7,9,18,.3),0 18px 30px 0 rgba(0,0,0,.28);
  --shadow-pl-data-table-header-inset:inset 0 1px 0 0 rgba(255,255,255,.08);
  --shadow-pl-filter-search-input-inset:inset 0 1px 0 0 rgba(255,255,255,.06);
  --shadow-tab-nav-filter-chip-secondary-active-shadow:0 0 12px 0 rgba(85,232,255,.22);
  /* type */
  --font-display:"DM Sans",system-ui,sans-serif; --font-text:"Work Sans",system-ui,sans-serif;
  /* space, radius, layout */
  --space-050:2px; --space-100:4px; --space-150:6px; --space-200:8px; --space-250:10px; --space-300:12px; --space-400:16px;
  --space-500:20px; --space-600:24px; --space-800:32px;
  --radius-xs:3px; --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:10px; --radius-2xl:12px;
  --layout-page-content-gutter:24px; --layout-pl-prose-max:896px; --layout-pl-site-max:1600px;
}

/* the page: surface 1 under the atmosphere mesh */
body.plpd{margin:0; min-height:100vh; color:var(--text-text-cell); font-family:var(--font-text); font-size:15px; line-height:1.45;
  background:url("/shared/plpd-atmosphere.webp") center top / cover fixed, var(--surfaces-surface-1);
  -webkit-font-smoothing:antialiased}
.plpd a{color:var(--brand-brand-cyan)}
.plpd :focus-visible{outline:2px solid var(--brand-brand-cyan); outline-offset:2px}

/* PlPageHeader: the page title (DM Sans 700 36 in cyan) with a one-line details line */
.plpd-page-header{display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-400)}
.plpd-page-header__title{margin:0; font-family:var(--font-display); font-size:36px; font-weight:700; line-height:36px; color:var(--brand-brand-cyan)}
.plpd-page-header__meta{margin:0; font-family:var(--font-display); font-size:16px; font-weight:400; line-height:1.2; letter-spacing:.32px; color:var(--text-name)}

/* a content section (page-composition.md): a card on card-bg, headed in cyan (brand-cyan-header) at
   type-section-title (DM Sans Black 24); the section's description sits right under it in text-cell */
.plpd-pane{background:var(--card-card-bg); border:1px solid var(--surface-border-card); border-radius:var(--radius-xl); padding:20px 20px 16px}
.plpd-pane__title{margin:0; font-family:var(--font-display); font-size:24px; font-weight:900; line-height:1.2; color:var(--brand-brand-cyan-header)}
.plpd-pane__desc{margin:6px 0 0; max-width:var(--layout-pl-prose-max); font-family:var(--font-text); font-size:15px; line-height:1.45; color:var(--text-text-cell)}
/* an item inside a section: a mini heading in off-white (text-cell, type-panel-label) with its
   description directly under it in text-nav. No eyebrow labels, no footnotes, no bullet lists */
.plpd-mini{display:flex; flex-direction:column; gap:4px}
.plpd-mini__title{margin:0; font-family:var(--font-display); font-size:16px; font-weight:700; line-height:1.2; color:var(--text-text-cell)}
.plpd-mini__desc{margin:0; max-width:var(--layout-pl-prose-max); font-family:var(--font-text); font-size:14px; line-height:20px; color:var(--text-text-nav)}

/* PlFilterField + PlFilterDropdown, on a native select: label over a 40px surface-3 control, cyan caret */
.plpd-filter-field{display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-200); min-width:0}
.plpd-filter-field__label{font-family:var(--font-display); font-size:14px; font-weight:500; line-height:normal; color:var(--text-text-meta)}
select.plpd-filter-dropdown{-webkit-appearance:none; appearance:none; box-sizing:border-box; height:40px; width:200px; max-width:100%;
  padding:0 40px 0 12px; border:1px solid var(--borders-border-tab); border-radius:var(--radius-lg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 48 48' fill='none' stroke='%2355e8ff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 18L24 30L12 18'/%3E%3C/svg%3E") right 12px center / 16px 16px no-repeat,
    var(--surfaces-surface-3);
  box-shadow:var(--shadow-pl-filter-search-input-inset); font-family:var(--font-text); font-size:14px; font-weight:500; line-height:1.2;
  color:var(--text-text-cell); cursor:pointer}
select.plpd-filter-dropdown:hover{background-color:#262940} /* surface 3 under white-alpha-200 */
select.plpd-filter-dropdown:focus-visible{outline:2px solid var(--brand-brand-cyan); outline-offset:2px}
select.plpd-filter-dropdown option{background:var(--surfaces-surface-3); color:var(--text-text-cell)}

/* PlBtn, Standard: a 40px outline button, DM Sans Bold 14 */
.plpd-btn{box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-200); height:40px;
  padding:0 var(--space-400); border:0; border-radius:var(--radius-lg); background:transparent; box-shadow:inset 0 0 0 1px var(--borders-border-tab);
  font-family:var(--font-display); font-size:14px; font-weight:700; line-height:1.2; color:var(--base-white); cursor:pointer; white-space:nowrap}
.plpd-btn:hover:not(:disabled){background:var(--white-alpha-200); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.plpd-btn:active:not(:disabled){box-shadow:var(--shadow-pl-btn-standard-pressed)}
.plpd-btn--primary{letter-spacing:.3px; background:var(--gradient-gloss),var(--gradient-pl-btn-primary-bg); box-shadow:var(--shadow-pl-btn-primary)}
.plpd-btn--primary:hover:not(:disabled){background:var(--gradient-gloss),var(--gradient-pl-btn-primary-bg-hover); box-shadow:var(--shadow-pl-btn-primary)}
.plpd-btn--icon{width:40px; padding:0}
.plpd-btn svg{flex:none}

/* PlTextButton: a quiet text action (Reset beside a filter bar) */
.plpd-text-btn{display:inline-flex; align-items:center; height:40px; padding:0; border:0; background:transparent; font-family:var(--font-display);
  font-size:14px; font-weight:400; line-height:normal; color:var(--lgd-text-dim); cursor:pointer; white-space:nowrap}
.plpd-text-btn:hover{color:var(--brand-brand-cyan)}

/* TabNavFilterChip, Role Cyan: a radio-style choice */
.plpd-chip{box-sizing:border-box; display:inline-flex; align-items:center; height:40px; padding:8px 10px; border:0; border-radius:6px;
  background:transparent; box-shadow:inset 0 0 0 1px var(--borders-border-tab); font-family:var(--font-display); font-size:14px; font-weight:500;
  letter-spacing:.03em; line-height:1.2; color:#797d9a; cursor:pointer; white-space:nowrap}
.plpd-chip:hover:not(:disabled){color:var(--brand-brand-cyan)}
.plpd-chip[aria-pressed=true]{font-weight:600; color:var(--brand-brand-cyan); box-shadow:inset 0 0 0 1px rgba(85,232,255,.7),var(--shadow-tab-nav-filter-chip-secondary-active-shadow)}
.plpd-chip:disabled{color:rgba(203,215,253,.4); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); cursor:default}
.plpd-chips{display:inline-flex; flex-wrap:wrap; gap:10px}
/* Role Amber: the primary selection (one amber group per page) */
.plpd-chip--amber:hover:not(:disabled){color:var(--brand-brand-amber)}
.plpd-chip--amber[aria-pressed=true]{color:var(--brand-brand-amber); box-shadow:inset 0 0 0 1px rgba(255,194,119,.7),0 0 12px 0 rgba(255,194,119,.28)}

/* PlCheck, on a native checkbox: an 18px box, a cyan tick when on, the label in DM Sans 14 */
.plpd-check{display:inline-flex; align-items:center; gap:var(--space-200); min-height:40px; font-family:var(--font-display); font-size:14px;
  color:var(--text-text-cell); cursor:pointer; white-space:nowrap}
.plpd-check input[type=checkbox]{-webkit-appearance:none; appearance:none; box-sizing:border-box; width:18px; height:18px; margin:0; flex:none;
  border-radius:var(--radius-sm); background:var(--input-field-bg); box-shadow:inset 0 0 0 1px var(--overlay-overlay-white-13); cursor:pointer}
.plpd-check:hover input[type=checkbox]{box-shadow:inset 0 0 0 1px var(--overlay-overlay-white-25)}
.plpd-check input[type=checkbox]:checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2355e8ff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 24L21 33L37 15'/%3E%3C/svg%3E") center / 14px 14px no-repeat, var(--input-field-bg)}

/* PlRange: a 4px track with the filled part and a 14px thumb in cyan (track #3b4264: no token).
   The page sets --plpd-range-pct as the value moves. */
input[type=range].plpd-range{-webkit-appearance:none; appearance:none; height:4px; margin:0; border-radius:2px; outline:none; cursor:pointer;
  background:linear-gradient(var(--brand-brand-cyan),var(--brand-brand-cyan)) 0 0 / var(--plpd-range-pct,0%) 100% no-repeat,#3b4264}
input[type=range].plpd-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:14px; height:14px; border:0; border-radius:50%; background:var(--brand-brand-cyan)}
input[type=range].plpd-range::-moz-range-thumb{width:14px; height:14px; border:0; border-radius:50%; background:var(--brand-brand-cyan)}
input[type=range].plpd-range:active::-webkit-slider-thumb{width:16px; height:16px; box-shadow:0 0 0 4px rgba(85,232,255,.25)}
input[type=range].plpd-range:active::-moz-range-thumb{width:16px; height:16px; box-shadow:0 0 0 4px rgba(85,232,255,.25)}

/* PlDataTableWrap (Raised) and its header cells: the gradient header, cyan header labels (Work Sans SemiBold 14) */
.plpd-table-wrap{overflow:auto; border:1px solid var(--data-table-pl-data-table-wrap-border); border-radius:var(--radius-xl);
  background:var(--data-table-pl-data-table-scroll-base-bg); box-shadow:var(--shadow-pl-data-table-wrap-shadow);
  scrollbar-color:var(--data-table-pl-data-table-scrollbar-thumb) var(--data-table-pl-data-table-scrollbar-track)}
.plpd-table{border-collapse:separate; border-spacing:0; font-family:var(--font-text); font-variant-numeric:tabular-nums}
.plpd-table thead th{background:var(--gradient-pl-data-table-header-bg); box-shadow:var(--shadow-pl-data-table-header-inset);
  border-bottom:1px solid var(--data-table-pl-data-table-header-border); color:var(--data-table-pl-data-table-header-text);
  font-family:var(--font-text); font-size:14px; font-weight:600; line-height:1.2; white-space:nowrap}
.plpd-table td{border-bottom:1px solid var(--data-table-pl-data-table-row-border); color:var(--data-table-pl-data-table-cell-text); white-space:nowrap}
/* the sorted column: its label in amber (the system draws no sort arrows) */
.plpd-table thead th[aria-sort=ascending],.plpd-table thead th[aria-sort=descending]{color:var(--brand-brand-amber)}
select.plpd-filter-dropdown:disabled{cursor:default; opacity:.5}
.plpd-btn:disabled,.plpd-chip:disabled{cursor:default}
.plpd-btn--primary:disabled{background:var(--navy-600); color:var(--text-text-zero); box-shadow:none}

/* PlMetricDefinition-style prose: terms in cyan DM Sans SemiBold, the text in text-nav (body copy) */
.plpd-prose{max-width:var(--layout-pl-prose-max); font-family:var(--font-text); font-size:14px; line-height:20px; color:var(--text-text-nav)}
.plpd-prose b{font-family:var(--font-display); font-weight:600; color:var(--brand-brand-cyan)}

/* PlTooltip, as PL Pro has it today: radius 12, a cyan 22% edge, 12px padding, wrapping at 320px */
.plpd-tooltip{box-sizing:border-box; max-width:320px; padding:var(--space-300); border:1px solid var(--data-table-header-tooltip-border); border-radius:var(--radius-2xl);
  background:var(--gradient-pl-data-table-header-tooltip-bg); box-shadow:0 16px 34px 0 rgba(0,0,0,.38); font-family:var(--font-text); font-size:14px; line-height:1.4; color:#f0f1f5f5}

/* PlAutocomplete: a 40px search field (input-field-bg, cyan 40% border while focused) over a menu of 32px suggestions */
.plpd-autocomplete{position:relative}
.plpd-autocomplete__input{box-sizing:border-box; width:100%; height:40px; padding:0 12px 0 38px; border:1px solid var(--input-field-border); border-radius:var(--radius-lg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 48 48' fill='none' stroke='%23a9b0cc' stroke-width='4' stroke-linejoin='round'%3E%3Cpath d='M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z'/%3E%3Cpath d='M33.2218 33.2218L41.7071 41.7071' stroke-linecap='round'/%3E%3C/svg%3E") 12px center / 18px 18px no-repeat, var(--input-field-bg);
  font-family:var(--font-text); font-size:16px; color:var(--text-text-cell); outline:none}
.plpd-autocomplete__input::placeholder{color:#a9b0cc; opacity:1} /* draft-text-zero */
.plpd-autocomplete__input:hover{border-color:var(--input-field-border-hover)}
.plpd-autocomplete__input:focus{border-color:rgba(85,232,255,.4)}
.plpd-autocomplete__input:disabled{opacity:.5}
.plpd-autocomplete__menu{position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:5; margin:0; padding:6px; list-style:none;
  border:1px solid var(--dropdown-dd-menu-border); border-radius:var(--radius-xl); background:var(--dropdown-dd-menu-bg); box-shadow:0 18px 40px 0 rgba(3,4,12,.5)}
.plpd-autocomplete__menu li{box-sizing:border-box; display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-height:32px; padding:8px 10px;
  border-radius:var(--radius-md); font-family:var(--font-text); font-size:14px; line-height:16px; color:var(--text-text-cell); cursor:pointer}
.plpd-autocomplete__menu li small{color:var(--text-text-team); font-size:14px; white-space:nowrap}
.plpd-autocomplete__menu li.active,.plpd-autocomplete__menu li:hover{background:var(--dropdown-dd-item-hover-bg); color:var(--base-white)}

/* a status line: text-nav, an error in status-message-error, a warning's word in bold brand-amber */
.plpd-status{font-family:var(--font-text); font-size:14px; line-height:1.45; color:var(--text-text-nav)}
.plpd-status.err{color:var(--status-message-error)}
.plpd-status b.warn{font-weight:700; color:var(--brand-brand-amber)}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}