/* ============================================================================
   FTA TOOLS: SHARED COMPONENT STYLESHEET
   Upload to /toolsFtA2269/fta-tools.css

   INSTALL: add ONE line inside the <head> (or at the very top of the body if a
   tool has no head) of each hosted tool:

       <link rel="stylesheet" href="fta-tools.css">

   That single line is worth adding even to a tool you never touch again. The
   element-level rules below restyle raw table / th / td / button / input, so an
   unmigrated tool inherits tabular numerals, the spacing scale, focus rings and
   reduced-motion support without any markup change at all.

   MIGRATING A TOOL PROPERLY (optional, do it when you next edit one):
   replace inline style="" with the component classes further down. Inline
   styles WIN over this sheet, so a half-migrated tool is never broken, it is
   just partly styled. There is no flag day.

   WHY NUMERALS COME FIRST: proportional digits are the single tell that makes a
   DFS table read as amateur. Columns of figures fail to align and live values
   jitter on re-render. `font-variant-numeric: tabular-nums` on every cell fixes
   it in one declaration and is the highest-impact rule in this file.

   NOTE ON <style> BLOCKS: the "cache layer strips <style>" rule applies to
   markup stored in the WordPress database. These tools are static files served
   straight from /toolsFtA2269/, so a linked stylesheet is safe here.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* surfaces, darkest to lightest. Depth comes from luminance, never shadow. */
  --fta-void:#0b1119;
  --fta-bg:#0f1419;
  --fta-surface:#161d26;
  --fta-raised:#1b2430;
  --fta-sunken:#111925;
  --fta-edge:#2a3543;
  --fta-edge-soft:#24303d;

  /* text */
  --fta-text:#e6edf5;
  --fta-text-2:#c9d6cb;
  --fta-muted:#8b9bb0;
  --fta-muted-2:#7e8fa3;
  --fta-faint:#5a6b7f;
  --fta-dim:#8496a8;   /* secondary data: handedness, matchup line, ownership */

  /* meaning. A colour that encodes nothing should be grey. */
  --fta-gold:#f5b301;      /* the number that matters */
  --fta-green:#22c55e;     /* confirmed, positive edge */
  --fta-cyan:#38bdf8;      /* model / simulation output */
  --fta-red:#ef4444;       /* negative, fade, warning */
  --fta-red-soft:#fca5a5;
  --fta-dk:#f76d1b;        /* DraftKings, identity only */
  --fta-fd:#3b82f6;        /* FanDuel, identity only */
  --fta-purple:#a855f7;    /* elite band */

  /* tinted fills for banded cells */
  --fta-fill-elite:rgba(168,85,247,.22);
  --fta-fill-great:rgba(59,130,246,.20);
  --fta-fill-good:rgba(34,197,94,.18);
  --fta-fill-avg:rgba(245,179,1,.14);
  --fta-fill-bad:rgba(239,68,68,.14);
  --fta-fill-awful:rgba(239,68,68,.28);

  /* 4px spacing scale. Six values. Do not invent a seventh. */
  --fta-s1:4px; --fta-s2:8px; --fta-s3:12px; --fta-s4:16px;
  --fta-s5:24px; --fta-s6:36px;

  --fta-r-sm:6px; --fta-r:9px; --fta-r-lg:14px; --fta-r-pill:999px;

  /* one easing curve everywhere, four durations */
  --fta-ease:cubic-bezier(.16,1,.3,1);
  --fta-t-micro:120ms; --fta-t:320ms; --fta-t-scene:560ms;

  --fta-font:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
             'Helvetica Neue',Arial,sans-serif;
  --fta-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,
             'Liberation Mono',monospace;
}

/* ------------------------------------------------------------------ base -- */
.fta-tool,
body.fta-tool{
  font-family:var(--fta-font);
  color:var(--fta-text);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.fta-tool *,
.fta-tool *::before,
.fta-tool *::after{ box-sizing:border-box; }

/* EVERY figure is tabular. This is the rule that does the most work. */
.fta-tool td,
.fta-tool th,
.fta-tool .fta-num,
.fta-tool input[type=number]{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
.fta-tool .fta-num,
.fta-tool .fta-mono{ font-family:var(--fta-mono); letter-spacing:-.01em; }

/* -------------------------------------------------- element-level defaults --
   These apply with NO markup change, so linking the sheet alone improves a
   tool. Inline styles still win, so nothing existing breaks.                 */
.fta-tool table{
  width:100%;
  border-collapse:collapse;
}
.fta-tool thead th{
  padding:var(--fta-s2) 7px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#a3b3c6;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--fta-edge);
  white-space:nowrap;
  text-align:center;
}
.fta-tool tbody td{
  padding:var(--fta-s2) 7px;
  font-size:13px;
  color:var(--fta-text);
  border-bottom:1px solid rgba(42,53,67,.6);
  vertical-align:middle;
}
.fta-tool tbody tr:last-child td{ border-bottom:0; }
.fta-tool tbody tr{ transition:background var(--fta-t-micro) var(--fta-ease); }
.fta-tool tbody tr:hover{ background:rgba(255,255,255,.022); }

.fta-tool a{ color:var(--fta-gold); text-decoration:none; }
.fta-tool a:hover{ text-decoration:underline; }

.fta-tool button,
.fta-tool input,
.fta-tool select{
  font-family:inherit;
  font-size:12.5px;
  color:var(--fta-text);
}
.fta-tool input,
.fta-tool select{
  background:#141c26;
  border:1px solid var(--fta-edge);
  border-radius:var(--fta-r);
  padding:7px var(--fta-s3);
}
.fta-tool input::placeholder{ color:var(--fta-faint); }
.fta-tool input:focus,
.fta-tool select:focus,
.fta-tool button:focus-visible,
.fta-tool a:focus-visible{
  outline:2px solid var(--fta-gold);
  outline-offset:2px;
}
.fta-tool button{ cursor:pointer; }

/* thin dark scrollbars on the horizontal table wrappers */
.fta-tool ::-webkit-scrollbar{ height:10px; width:10px; }
.fta-tool ::-webkit-scrollbar-track{ background:var(--fta-sunken); }
.fta-tool ::-webkit-scrollbar-thumb{
  background:var(--fta-edge); border-radius:var(--fta-r-pill);
}
.fta-tool ::-webkit-scrollbar-thumb:hover{ background:#38485c; }

/* ------------------------------------------------------------- components -- */

/* shell ------------------------------------------------------------------- */
.fta-shell{
  background:var(--fta-void);
  border:1px solid var(--fta-edge);
  border-radius:var(--fta-r-lg);
  overflow:hidden;
}
.fta-head{
  padding:var(--fta-s4) var(--fta-s5);
  border-bottom:1px solid var(--fta-edge-soft);
  background:linear-gradient(180deg,#231610,#1a0f0b);
}
.fta-head-row{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:var(--fta-s2);
}
.fta-title{
  font-size:22px; font-weight:800; color:var(--fta-gold); letter-spacing:-.3px;
}
.fta-sub{ color:#9fb0c4; font-size:13px; margin-top:var(--fta-s1); }
.fta-meta{ color:var(--fta-muted-2); font-size:12px; margin-top:3px; }

.fta-controls{
  padding:var(--fta-s3) var(--fta-s4) var(--fta-s1);
  background:#0e151f;
  border-bottom:1px solid var(--fta-edge-soft);
}
.fta-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 6px 6px;
}
.fta-foot{
  padding:var(--fta-s3) var(--fta-s4);
  background:#0a1017;
  border-top:1px solid var(--fta-edge-soft);
  color:var(--fta-muted-2); font-size:11.5px; line-height:1.65;
}
.fta-foot strong{ color:#9fb0c4; }

/* card -------------------------------------------------------------------- */
.fta-card{
  background:var(--fta-surface);
  border:1px solid var(--fta-edge);
  border-radius:var(--fta-r);
  padding:var(--fta-s4);
  transition:background var(--fta-t-micro) var(--fta-ease),
             border-color var(--fta-t-micro) var(--fta-ease);
}
/* lift by luminance and edge, never by scale or shadow */
.fta-card--hover:hover{ background:var(--fta-raised); border-color:#38485c; }
.fta-card--sunken{ background:var(--fta-sunken); }

/* buttons ----------------------------------------------------------------- */
.fta-btn{
  appearance:none;
  border:1px solid var(--fta-edge);
  background:#141c26;
  color:var(--fta-muted);
  font-size:12.5px; font-weight:700;
  padding:7px var(--fta-s3) 7px var(--fta-s3);
  border-radius:var(--fta-r);
  margin:0 7px 7px 0;
  transition:color var(--fta-t-micro) var(--fta-ease),
             border-color var(--fta-t-micro) var(--fta-ease),
             background var(--fta-t-micro) var(--fta-ease);
}
.fta-btn:hover{ color:var(--fta-text); border-color:#38485c; }
.fta-btn.is-on{
  color:var(--fta-green); border-color:var(--fta-green);
  background:rgba(255,255,255,.05);
}
.fta-btn--dk.is-on{ color:var(--fta-dk); border-color:var(--fta-dk); }
.fta-btn--fd.is-on{ color:var(--fta-fd); border-color:var(--fta-fd); }
.fta-btn--ghost{ background:transparent; }
.fta-btn--cta{
  background:var(--fta-green); color:#05090d; border-color:var(--fta-green);
  font-weight:800; font-size:14px; padding:11px var(--fta-s5);
  border-radius:var(--fta-r-pill);
}
.fta-btn--csv{
  color:var(--fta-green); border-color:var(--fta-green);
  background:rgba(34,197,94,.10);
}
.fta-btn[disabled],.fta-btn.is-empty{ opacity:.45; cursor:default; }

/* badges and pills -------------------------------------------------------- */
.fta-badge{
  display:inline-block;
  font-size:9.5px; font-weight:800; letter-spacing:.04em;
  padding:2px 6px; border-radius:var(--fta-r-sm);
  margin-left:6px; white-space:nowrap;
}
.fta-badge--target  { background:var(--fta-dk);    color:#2a0f00; }
.fta-badge--hittable{ background:var(--fta-gold);  color:#241c00; }
.fta-badge--strong  { background:#3fa96a;          color:#04140a; }
.fta-badge--tough   { background:#2f4256;          color:var(--fta-text); }
.fta-badge--elite   { background:var(--fta-purple);color:#12031f; }

.fta-pill{
  display:inline-block;
  font-size:11px; font-weight:700;
  padding:3px var(--fta-s2); border-radius:var(--fta-r-pill);
}
.fta-pill--pos{ background:rgba(34,197,94,.14); color:var(--fta-green); }
.fta-pill--neg{ background:rgba(239,68,68,.14); color:var(--fta-red-soft); }

/* banded data cells. Bands are computed in the DATA FILE, never here, so the
   thresholds stay in one place and the tool only paints what it is told.     */
.fta-b-elite  { background:var(--fta-fill-elite); color:#d8b4fe; }
.fta-b-great  { background:var(--fta-fill-great); color:#93c5fd; }
.fta-b-good   { background:var(--fta-fill-good);  color:#4ade80; }
.fta-b-average{ background:var(--fta-fill-avg);   color:var(--fta-gold); }
.fta-b-bad    { background:var(--fta-fill-bad);   color:var(--fta-red-soft); }
.fta-b-awful  { background:var(--fta-fill-awful); color:#fecaca; }
.fta-tool td[class*="fta-b-"]{ font-weight:700; text-align:center; }

/* site-coloured values ---------------------------------------------------- */
.fta-dk{ color:var(--fta-dk); font-weight:700; }
.fta-fd{ color:var(--fta-fd); font-weight:700; }
.fta-pos{ color:var(--fta-green); }
.fta-neg{ color:var(--fta-red-soft); }
.fta-model{ color:var(--fta-cyan); }
.fta-hero{ color:var(--fta-gold); font-weight:800; }

/* the em-dash-free empty state. Use &#8212; in markup, this just colours it. */
.fta-na{ color:var(--fta-faint); }

/* paywall gate ------------------------------------------------------------ */
.fta-gate{
  background:#111925;
  border:1px dashed #2f4a3a;
  border-radius:var(--fta-r-lg);
  padding:22px 18px;
  text-align:center;
  margin-top:var(--fta-s3);
}
.fta-gate-title{ font-size:15px; font-weight:800; color:var(--fta-text); }
.fta-gate-body{
  color:var(--fta-muted); font-size:13px;
  margin:6px 0 var(--fta-s3); line-height:1.55;
}

/* notes and disclosure ---------------------------------------------------- */
.fta-note{
  color:var(--fta-muted-2); font-size:12px; line-height:1.6;
  margin:var(--fta-s1) 0 var(--fta-s3);
}
.fta-error{
  padding:34px var(--fta-s5); text-align:center;
  color:var(--fta-red-soft); font-size:14px;
}
.fta-loading{
  padding:40px var(--fta-s5); text-align:center;
  color:var(--fta-muted); font-size:14px;
}

/* sortable headers -------------------------------------------------------- */
.fta-tool th[data-sort]{ cursor:pointer; }
.fta-tool th[data-sort]:hover{ color:var(--fta-text-2); }
.fta-tool th.is-sorted{
  color:var(--fta-gold); background:rgba(245,179,1,.10);
}

/* --------------------------------------------------------------- responsive */
@media (max-width:640px){
  .fta-head{ padding:var(--fta-s3) var(--fta-s4); }
  .fta-title{ font-size:19px; }
  .fta-controls{ padding:var(--fta-s3) var(--fta-s3) var(--fta-s1); }
  .fta-tool tbody td{ font-size:12.5px; padding:7px 6px; }
  .fta-tool thead th{ font-size:9.5px; padding:7px 6px; }
  /* motion costs the most and returns the least on a phone before lock */
  .fta-tool tbody tr{ transition:none; }
}

/* ------------------------------------------------------------ accessibility */
@media (prefers-reduced-motion:reduce){
  .fta-tool *,
  .fta-tool *::before,
  .fta-tool *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
@media (prefers-contrast:more){
  :root{
    --fta-muted:#b6c4d4; --fta-muted-2:#a8b6c6; --fta-faint:#8a9bb0;
    --fta-edge:#41566e;
  }
}
.fta-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------------- print */
@media print{
  .fta-tool{ color:#000; }
  .fta-controls,.fta-gate,.fta-btn{ display:none !important; }
  .fta-shell{ border:1px solid #999; }
  .fta-tool thead th{ color:#000; background:#eee; }
  .fta-tool tbody td{ border-bottom:1px solid #ccc; }
}