/* ============================================================================
   MALLO — pesäpalloanalytiikka · design system stylesheet
   Drop-in replacement for the <style> block in pesis/web/templates/base.html.

   Light skin  = "Card-warm"   (approachable, DARKO-style)
   Dark skin   = "Terminal"    (Statcast-dense)
   Same markup, both skins; auto-switches on prefers-color-scheme and can be
   pinned with  <html data-theme="light|dark">  (see theme-toggle.js).

   The whole system is driven by CSS custom properties ("tokens"). To retheme,
   change tokens — never the component rules.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   FONTS — Fontshare faces (loaded via <link> to api.fontshare.com in index.html):
   Clash Display (heavy grotesque) for the wordmark / titles / big stat numbers,
   Satoshi for body/UI. Numbers/labels keep a system monospace so stat columns
   align on tabular figures (Fontshare has no strong tabular mono). No Google
   Fonts. System stacks remain as fallbacks if Fontshare fails to load.
   ---------------------------------------------------------------------------- */
:root{
  --font-display: "Red Hat Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-body:    "Plus Jakarta Sans", "Helvetica Neue", Helvetica, system-ui, sans-serif;

  /* Brand palette (fixed across themes) */
  --apricot:#f9dbbd; --candy:#ffa5ab; --rose:#da627d; --berry:#a53860; --bordeaux:#450920;

  /* Percentile ramps — pale = league tail, deep = elite. Buckets match the
     server's pct_bucket() 0..6. Two ramps: light (on paper), dark (glowing). */
  --l0:#e6ddd2; --l1:#f4d8c2; --l2:#ffc7bb; --l3:#ffa5ab; --l4:#da627d; --l5:#a53860; --l6:#450920;
  --d0:#3c2731; --d1:#5f2c3c; --d2:#8c3a54; --d3:#bd4d6d; --d4:#da627d; --d5:#ff909b; --d6:#ffc6ac;
}

/* ----------------------------------------------------------------------------
   THEME TOKENS
   ---------------------------------------------------------------------------- */
:root{ /* LIGHT (Card-warm) — the default */
  --page:#f2ece4; --bg:#fbf8f4; --bar:#ffffff; --controls-bg:#ffffff;
  --ink:#2a1118; --ink-strong:#241a1e; --ink2:#7c7069; --ink3:#a89c92; --label:#b1a498;
  --line:#f3ece2; --line-hd:#efe6dc; --thbg:#f7f1e9;
  --surface:#ffffff; --surface-line:#f0e8de; --card-shadow:0 1px 4px rgba(90,40,55,.05);
  --appborder:#efe6dc; --appradius:16px;
  --hover:#faf4ec; --topbg:#fbf1e7;
  --accent:#a53860; --accent-soft:#da627d; --brand-dot:#da627d; --nav-ink:#7c7069; --nav-on:#a53860;
  --sel-bg:#f6f0e8; --sel-line:#eadfd2; --sel-ink:#3a2c30;
  --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23a53860' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  --seg-bg:#f2e9df; --seg-pad:3px; --seg-border:0 solid transparent; --seg-radius:10px; --seg-btn-radius:7px;
  --seg-ink:#7c7069; --seg-on-bg:#ffffff; --seg-on-ink:#a53860; --seg-on-shadow:0 1px 3px rgba(80,20,40,.12);
  --tog-bg:#f4ece2; --tog-ink:#7c7069; --tog-border:0 solid transparent; --tog-on-bg:#a53860; --tog-on-ink:#fff; --tog-on-shadow:none;
  --track:#f0e6da; --tehobar-bg:#eee3d6; --tehobar-fill:linear-gradient(90deg,#da627d,#a53860); --tehobar-glow:none;
  --tile-bg:#ffffff; --tile-line:#f0e8de; --tile-shadow:0 1px 3px rgba(90,40,55,.05);
  --tile-hero-bg:linear-gradient(150deg,#fff,#fdeef0); --tile-hero-line:#f6d3da; --tile-hero-ink:#a53860;
  --rank-ink:#a89c92; --rank-top-bg:#a53860; --rank-top-ink:#fff; --rank-top-pad:2px 6px; --rank-top-radius:6px;
  --traj-stroke:#da627d; --traj-dot-fill:#ffffff; --traj-dot-stroke:#da627d; --traj-ax:#efe6dc; --traj-glow:none; --traj-txt:#b1a498;
  --p0:var(--l0); --p1:var(--l1); --p2:var(--l2); --p3:var(--l3); --p4:var(--l4); --p5:var(--l5); --p6:var(--l6);
  --pt0:#5a4a3a; --pt1:#7a4a30; --pt2:#8a3a34; --pt3:#7a2438; --pt4:#fff; --pt5:#fff; --pt6:#fff;
}
/* DARK (Terminal) tokens — applied when the OS prefers dark (unless pinned
   light) OR when the page is explicitly set to data-theme="dark". */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark;
  --page:#0d0a0d; --bg:#161016; --bar:#0f0a0f; --controls-bg:transparent;
  --ink:#f2e4e0; --ink-strong:#f6ece8; --ink2:#a08b91; --ink3:#8a747c; --label:#7a6570;
  --line:#221820; --line-hd:#37272f; --thbg:transparent;
  --surface:#1a121a; --surface-line:#2c2028; --card-shadow:none;
  --appborder:#2c2028; --appradius:12px;
  --hover:#1e161d; --topbg:#1f1620;
  --accent:#ffa5ab; --accent-soft:#ffa5ab; --brand-dot:#ffa5ab; --nav-ink:#a08b91; --nav-on:#ffa5ab;
  --sel-bg:#221820; --sel-line:#37272f; --sel-ink:#f2e4e0;
  --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23da8f9c' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  --seg-bg:transparent; --seg-pad:0; --seg-border:1px solid #37272f; --seg-radius:8px; --seg-btn-radius:0;
  --seg-ink:#a08b91; --seg-on-bg:#a53860; --seg-on-ink:#fff; --seg-on-shadow:none;
  --tog-bg:#221820; --tog-ink:#a08b91; --tog-border:1px solid #2c2028; --tog-on-bg:#da627d; --tog-on-ink:#fff; --tog-on-shadow:0 0 0 2px rgba(218,98,125,.25);
  --track:#2a1e26; --tehobar-bg:#2c2028; --tehobar-fill:linear-gradient(90deg,#a53860,#ffa5ab); --tehobar-glow:0 0 8px rgba(255,165,171,.5);
  --tile-bg:#1e161d; --tile-line:#2c2028; --tile-shadow:none;
  --tile-hero-bg:#1e161d; --tile-hero-line:#da627d; --tile-hero-ink:#ffa5ab;
  --rank-ink:#8a747c; --rank-top-bg:transparent; --rank-top-ink:#ffa5ab; --rank-top-pad:0; --rank-top-radius:0;
  --traj-stroke:#ffa5ab; --traj-dot-fill:#ffa5ab; --traj-dot-stroke:#ffa5ab; --traj-ax:#2c2028; --traj-glow:drop-shadow(0 0 5px rgba(255,165,171,.6)); --traj-txt:#7a6570;
  --p0:var(--d0); --p1:var(--d1); --p2:var(--d2); --p3:var(--d3); --p4:var(--d4); --p5:var(--d5); --p6:var(--d6);
  --pt0:#d9b8c0; --pt1:#f0c8d0; --pt2:#fff; --pt3:#fff; --pt4:#2a0f18; --pt5:#2a0f18; --pt6:#2a0f18;
}}
:root[data-theme="dark"]{ color-scheme:dark;
  --page:#0d0a0d; --bg:#161016; --bar:#0f0a0f; --controls-bg:transparent;
  --ink:#f2e4e0; --ink-strong:#f6ece8; --ink2:#a08b91; --ink3:#8a747c; --label:#7a6570;
  --line:#221820; --line-hd:#37272f; --thbg:transparent;
  --surface:#1a121a; --surface-line:#2c2028; --card-shadow:none;
  --appborder:#2c2028; --appradius:12px;
  --hover:#1e161d; --topbg:#1f1620;
  --accent:#ffa5ab; --accent-soft:#ffa5ab; --brand-dot:#ffa5ab; --nav-ink:#a08b91; --nav-on:#ffa5ab;
  --sel-bg:#221820; --sel-line:#37272f; --sel-ink:#f2e4e0;
  --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23da8f9c' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  --seg-bg:transparent; --seg-pad:0; --seg-border:1px solid #37272f; --seg-radius:8px; --seg-btn-radius:0;
  --seg-ink:#a08b91; --seg-on-bg:#a53860; --seg-on-ink:#fff; --seg-on-shadow:none;
  --tog-bg:#221820; --tog-ink:#a08b91; --tog-border:1px solid #2c2028; --tog-on-bg:#da627d; --tog-on-ink:#fff; --tog-on-shadow:0 0 0 2px rgba(218,98,125,.25);
  --track:#2a1e26; --tehobar-bg:#2c2028; --tehobar-fill:linear-gradient(90deg,#a53860,#ffa5ab); --tehobar-glow:0 0 8px rgba(255,165,171,.5);
  --tile-bg:#1e161d; --tile-line:#2c2028; --tile-shadow:none;
  --tile-hero-bg:#1e161d; --tile-hero-line:#da627d; --tile-hero-ink:#ffa5ab;
  --rank-ink:#8a747c; --rank-top-bg:transparent; --rank-top-ink:#ffa5ab; --rank-top-pad:0; --rank-top-radius:0;
  --traj-stroke:#ffa5ab; --traj-dot-fill:#ffa5ab; --traj-dot-stroke:#ffa5ab; --traj-ax:#2c2028; --traj-glow:drop-shadow(0 0 5px rgba(255,165,171,.6)); --traj-txt:#7a6570;
  --p0:var(--d0); --p1:var(--d1); --p2:var(--d2); --p3:var(--d3); --p4:var(--d4); --p5:var(--d5); --p6:var(--d6);
  --pt0:#d9b8c0; --pt1:#f0c8d0; --pt2:#fff; --pt3:#fff; --pt4:#2a0f18; --pt5:#2a0f18; --pt6:#2a0f18;
}

/* ----------------------------------------------------------------------------
   BASE
   ---------------------------------------------------------------------------- */
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--page); color:var(--ink); font:15px/1.5 var(--font-body); -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ----------------------------------------------------------------------------
   HEADER + NAV
   ---------------------------------------------------------------------------- */
header{ background:var(--bar); border-bottom:1px solid var(--line-hd);
        padding:16px 26px; display:flex; align-items:center; justify-content:space-between; }
header .brand{ font-family:var(--font-display); font-weight:900; font-style:italic; font-size:25px;
               letter-spacing:-.03em; color:var(--ink-strong); line-height:1; text-decoration:none; }
header .brand:hover{ text-decoration:none; }
header .brand .dot{ color:var(--brand-dot); font-style:italic; }   /* the "." after Mallo */
header .navwrap{ display:flex; align-items:center; gap:22px; }
header nav{ display:flex; gap:20px; }
header nav a{ color:var(--nav-ink); font-size:13px; }
header nav a.active,
header nav a[aria-current="page"]{ color:var(--nav-on); font-weight:700; }
.theme-toggle{ display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
               width:36px; height:36px; border-radius:50%; flex-shrink:0;
               background:var(--tog-bg); color:var(--ink2); border:var(--tog-border); }
.theme-toggle svg{ display:block; width:16px; height:16px; }

/* ----------------------------------------------------------------------------
   LAYOUT + HEADINGS
   ---------------------------------------------------------------------------- */
main{ max-width:1080px; margin:0 auto; padding:0; }         /* header/table draw their own gutters */
.page{ padding:22px 26px 40px; }
h1{ font-family:var(--font-display); font-weight:800; font-size:27px; letter-spacing:-.02em; margin:0 0 7px; }
h2{ font:700 11px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:26px 0 12px; }
h2 .muted{ font-weight:400; font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:11px; color:var(--ink3); }
.sub{ color:var(--ink3); font-size:12.5px; margin:0 0 14px; line-height:1.45; }
.sub.note{ color:var(--accent-soft); }

/* ----------------------------------------------------------------------------
   CONTROLS — league dropdown, sex/season segmented, sort pills
   ---------------------------------------------------------------------------- */
.controls{ display:flex; gap:9px; align-items:center; flex-wrap:wrap;
           background:var(--controls-bg); border-bottom:1px solid var(--line-hd); padding:14px 26px; }
.controls .lab{ font:600 9.5px var(--font-mono); letter-spacing:.13em; text-transform:uppercase; color:var(--label); margin-right:2px; }
.controls .spacer{ flex:1; }

/* native <select> fallback */
select.sel{ font:600 12.5px var(--font-body); padding:7px 30px 7px 13px; border-radius:8px; cursor:pointer;
            appearance:none; background-color:var(--sel-bg); border:1px solid var(--sel-line); color:var(--sel-ink);
            background-image:var(--sel-arrow); background-repeat:no-repeat; background-position:right 11px center; background-size:9px; }

/* custom dropdown button (league tree — see README) */
.dropwrap{ position:relative; display:inline-flex; }
.seldrop{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font:600 12.5px var(--font-body);
          padding:7px 13px; border-radius:8px; background:var(--sel-bg); border:1px solid var(--sel-line); color:var(--sel-ink); }
.seldrop .caret{ width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--accent); }
.menu{ position:absolute; top:calc(100% + 7px); left:0; z-index:50; display:flex; gap:8px; padding:11px;
       border-radius:13px; background:var(--surface); border:1px solid var(--surface-line); box-shadow:0 22px 55px -18px rgba(0,0,0,.5); }
.menu.right{ left:auto; right:0; }                 /* right-align under a right-side control (e.g. season) */
.menu.scroll{ max-height:288px; overflow-y:auto; }  /* long lists — e.g. full season history */
.menu .col{ min-width:158px; }
.menu.scroll .col{ min-width:120px; }
.menu .colh{ font:700 9px var(--font-mono); letter-spacing:.13em; text-transform:uppercase; color:var(--label); padding:3px 10px 9px; }
.menu button{ display:block; width:100%; text-align:left; cursor:pointer; font:500 13px var(--font-body);
              padding:8px 11px; border-radius:8px; background:transparent; border:0; color:var(--ink2); }
.menu button:hover{ background:var(--hover); color:var(--ink-strong); }
.menu button.on{ background:var(--tog-on-bg); color:var(--tog-on-ink); font-weight:700; }
.menuback{ position:fixed; inset:0; z-index:40; }

/* segmented control (sex, season) */
.seg{ display:flex; background:var(--seg-bg); padding:var(--seg-pad); border:var(--seg-border); border-radius:var(--seg-radius); }
.seg button, .seg a{ font:600 12.5px var(--font-body); padding:7px 13px; border:0; cursor:pointer;
                     background:transparent; color:var(--seg-ink); border-radius:var(--seg-btn-radius); text-decoration:none; }
.seg button.on, .seg a.on, .seg a.active{ background:var(--seg-on-bg); color:var(--seg-on-ink); box-shadow:var(--seg-on-shadow); }

/* sort pills — replaces the old ".filters" row. Give each link a HUMAN label
   (TEHO+, KL%, Saatto%, …) — never the raw snake_case stat key. */
.filters{ display:flex; gap:6px; flex-wrap:wrap; padding:8px 26px 4px; }
.filters .lab{ width:100%; font:600 9.5px var(--font-mono); letter-spacing:.13em; text-transform:uppercase; color:var(--label); margin-bottom:2px; }
.filters a{ font:600 12.5px var(--font-body); padding:7px 14px; border-radius:8px; white-space:nowrap;
            font-variant-numeric:tabular-nums; text-decoration:none; transition:background .14s, color .14s, border-color .14s;
            background:var(--surface); color:var(--ink2); border:1px solid var(--surface-line);
            box-shadow:var(--card-shadow); }
.filters a:hover{ color:var(--ink-strong); border-color:var(--accent-soft); }
.filters a.active{ background:var(--tog-on-bg); color:var(--tog-on-ink); border-color:var(--tog-on-bg); box-shadow:var(--tog-on-shadow); }

/* ----------------------------------------------------------------------------
   CARD
   ---------------------------------------------------------------------------- */
.card{ background:var(--surface); border:1px solid var(--surface-line); border-radius:13px;
       box-shadow:var(--card-shadow); padding:18px 20px; margin-bottom:18px; }

/* ----------------------------------------------------------------------------
   TABLES  (leaderboard, career, projections, standings)
   ---------------------------------------------------------------------------- */
table{ width:100%; border-collapse:collapse; }
thead th{ font:600 9.5px var(--font-mono); letter-spacing:.09em; text-transform:uppercase;
          text-align:right; color:var(--label); background:var(--thbg);
          border-bottom:1px solid var(--line-hd); padding:11px; white-space:nowrap; }
tbody td{ text-align:right; padding:8px 11px; font-size:13px; color:var(--ink2);
          border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; white-space:nowrap; }
th.name, td.name{ text-align:left; }
td.num{ font-family:var(--font-mono); font-size:12.5px; }
tbody tr:hover td{ background:var(--hover); }
td .player{ color:var(--ink-strong); font-weight:600; }
td .player:hover{ color:var(--accent); }
td.team{ color:var(--ink3); font-size:12px; }
th.extra, td.extra{ color:var(--accent); font-weight:700; }   /* the sorted stat pulled to the last column */
td.extra{ font-family:var(--font-mono); }

/* baseball position badge next to a player name */
.pos{ display:inline-block; font:700 9.5px var(--font-mono); letter-spacing:.03em;
      color:var(--ink3); background:var(--track); border-radius:4px;
      padding:1px 5px; margin-left:5px; vertical-align:middle; }
h1 .pos{ font-size:13px; padding:2px 7px; vertical-align:middle; }

/* rank + leader row */
.rank{ font-family:var(--font-mono); font-size:11.5px; color:var(--rank-ink); }
tr.leader td{ background:var(--topbg); }
tr.leader .rank{ background:var(--rank-top-bg); color:var(--rank-top-ink);
                 padding:var(--rank-top-pad); border-radius:var(--rank-top-radius); font-weight:700; }

/* in-cell TEHO+ bar */
.teho-cell{ display:flex; align-items:center; gap:9px; justify-content:flex-end; }
.teho-cell .val{ font-family:var(--font-mono); font-weight:700; font-size:13px; min-width:26px; text-align:right; color:var(--ink-strong); }
.teho-cell .bar{ width:56px; height:6px; border-radius:3px; background:var(--tehobar-bg); }
.teho-cell .bar > i{ display:block; height:100%; border-radius:3px; background:var(--tehobar-fill); box-shadow:var(--tehobar-glow); }

/* stats table sits on its own surface panel, lifted off the page background */
.tbl-card{ background:var(--surface); border:1px solid var(--surface-line); border-radius:13px;
           box-shadow:var(--card-shadow); overflow-x:auto; overflow-y:hidden; margin-bottom:4px;
           -webkit-overflow-scrolling:touch; }
/* accent-tinted dividers between rows, on every stat table (leaderboards + card tables) */
.tbl-card thead th, .card table thead th{ background:var(--thbg); }
.tbl-card tbody td, .card table tbody td{ border-bottom:1px solid color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.tbl-card tbody tr:last-child td, .card table tbody tr:last-child td{ border-bottom:none; }

/* sortable column headers + pagination */
th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover{ color:var(--ink-strong); }
th.sorted{ color:var(--accent); }
.pager{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:14px 2px 2px;
        font:600 12px var(--font-body); color:var(--ink3); }
.pager .pinfo, .pager .ppage{ font-family:var(--font-mono); }
.pager .psize select{ margin-left:5px; }
.pager .pnav{ display:flex; align-items:center; gap:10px; }
.pager .pbtn{ font:600 12px var(--font-body); padding:5px 12px; border:1px solid var(--line-hd);
              border-radius:8px; background:var(--card); color:var(--ink); cursor:pointer; }
.pager .pbtn:disabled{ opacity:.4; cursor:default; }
.pager .pbtn:not(:disabled):hover{ border-color:var(--accent); color:var(--accent); }

/* ----------------------------------------------------------------------------
   STAT TILES  (player header)
   ---------------------------------------------------------------------------- */
.tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:0 0 26px; }
.tile{ background:var(--tile-bg); border:1px solid var(--tile-line); box-shadow:var(--tile-shadow);
       border-radius:11px; padding:13px 15px; }
.tile.hero{ background:var(--tile-hero-bg); border-color:var(--tile-hero-line); }
.tile .label{ font:600 9px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--label); }
.tile .value{ font-family:var(--font-mono); font-weight:700; font-size:26px; margin-top:5px; letter-spacing:-.01em; color:var(--ink-strong); }
.tile.hero .value{ font-size:28px; color:var(--tile-hero-ink); }

/* ----------------------------------------------------------------------------
   PERCENTILE SLIDERS  (Savant-style; buckets b0..b6 come from pct_bucket())
   ---------------------------------------------------------------------------- */
.pctrow{ display:grid; grid-template-columns:150px 1fr 52px; gap:14px; align-items:center; padding:6px 0; }
.pctrow .label{ font-size:12.5px; color:var(--ink2); text-align:left; }
.pctrow .value{ font-family:var(--font-mono); font-size:12.5px; text-align:right; color:var(--ink); }
.track{ position:relative; height:9px; border-radius:5px; background:var(--track); }
.fill{ position:absolute; inset:0 auto 0 0; border-radius:5px; }
.badge{ position:absolute; top:50%; transform:translate(-50%,-50%); min-width:23px; height:23px; padding:0 3px;
        border-radius:12px; display:flex; align-items:center; justify-content:center; font:700 11px var(--font-mono); }
.b0 .fill,.badge.b0{ background:var(--p0);} .b1 .fill,.badge.b1{ background:var(--p1);} .b2 .fill,.badge.b2{ background:var(--p2);}
.b3 .fill,.badge.b3{ background:var(--p3);} .b4 .fill,.badge.b4{ background:var(--p4);} .b5 .fill,.badge.b5{ background:var(--p5);} .b6 .fill,.badge.b6{ background:var(--p6);}
.badge.b0{ color:var(--pt0);} .badge.b1{ color:var(--pt1);} .badge.b2{ color:var(--pt2);} .badge.b3{ color:var(--pt3);}
.badge.b4{ color:var(--pt4);} .badge.b5{ color:var(--pt5);} .badge.b6{ color:var(--pt6);}
.legend{ font-size:11px; margin:10px 0 0; color:var(--ink3); }

/* ----------------------------------------------------------------------------
   TRAJECTORY / SPARKLINE  (inline SVG built server-side; D3 optional)
   Give the <svg> class "traj". Children: .axis, .line, .dot, text.
   ---------------------------------------------------------------------------- */
.traj{ display:block; width:100%; height:118px; }
.traj .line, .spark polyline{ fill:none; stroke:var(--traj-stroke); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; filter:var(--traj-glow); }
.traj .dot, .spark circle{ fill:var(--traj-dot-fill); stroke:var(--traj-dot-stroke); stroke-width:2.5; }
.traj .axis, .spark line{ stroke:var(--traj-ax); stroke-width:1; }
.traj text{ fill:var(--traj-txt); font:600 9px var(--font-mono); }

/* two-column split used on the player page */
.split{ display:grid; grid-template-columns:1.15fr 1fr; gap:20px; align-items:start; }

/* ----------------------------------------------------------------------------
   PROSE  (About + any text-type page — wrap body copy in <div class="prose">)
   ---------------------------------------------------------------------------- */
.prose{ max-width:68ch; color:var(--ink2); font-size:15px; line-height:1.65; }
.prose p{ margin:0 0 15px; }
.prose h2{ color:var(--ink); margin-top:26px; }
.prose strong{ color:var(--ink-strong); font-weight:700; }
.prose a{ color:var(--accent); }
.prose code{ font-family:var(--font-mono); font-size:.86em; background:var(--tog-bg);
             padding:1px 6px; border-radius:5px; color:var(--ink); }
.prose .lead{ font-size:17px; line-height:1.55; color:var(--ink); }

/* CALLOUT / hero banner  (e.g. the baseball-translation summary tiles row) */
.callout{ background:var(--surface); border:1px solid var(--surface-line); border-radius:13px;
          padding:18px 20px; box-shadow:var(--card-shadow); }
.callout .k{ font:600 9px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--label); }
.callout .v{ font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-.02em; color:var(--ink-strong); margin-top:5px; }
.callout .v.accent{ color:var(--accent); }
.callrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin:16px 0 8px; }

/* baseball ⟷ Finnish-stats toggle on the player / translation cards */
.bb-toggle{ display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1;
            width:40px; height:40px; border-radius:50%; border:1px solid var(--surface-line);
            background:var(--surface); box-shadow:var(--card-shadow); margin:4px 0 16px; cursor:pointer; }
.bb-toggle:hover{ border-color:var(--accent); text-decoration:none; }

/* STANDINGS extras — playoff-odds inline bar + signed run differential */
.odds{ display:inline-flex; align-items:center; gap:8px; justify-content:flex-end; }
.odds .val{ font-family:var(--font-mono); font-weight:700; min-width:34px; text-align:right; color:var(--ink-strong); }
.odds .bar{ width:52px; height:6px; border-radius:3px; background:var(--track); }
.odds .bar > i{ display:block; height:100%; border-radius:3px; background:var(--tehobar-fill); box-shadow:var(--tehobar-glow); }
td.pos{ color:var(--accent); } td.neg{ color:var(--ink3); }   /* run diff: + is on-brand, − is muted */

/* EMPTY STATE */
.empty{ text-align:center; color:var(--ink3); padding:80px 20px; }
.empty .big{ font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--ink2); margin-bottom:8px; }

/* ----------------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------------- */
footer{ color:var(--ink3); font-size:12px; text-align:center; margin:32px 0; }

/* narrow screens */
@media (max-width:720px){
  .tiles{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
}

/* wide stat tables scroll inside their own card rather than blowing out the page */
.card[style*="overflow"]{ overflow-x:auto !important; overflow-y:hidden; -webkit-overflow-scrolling:touch; }

@media (max-width:640px){
  header{ padding:11px 14px; flex-wrap:wrap; gap:8px 12px; }
  header .brand{ font-size:21px; }
  header .navwrap{ gap:10px 14px; width:100%; justify-content:flex-start; flex-wrap:wrap; }
  header nav{ gap:12px; flex-wrap:wrap; }
  header nav a{ font-size:12.5px; }
  .theme-toggle{ margin-left:auto; }
  .controls, .filters{ padding-left:14px; padding-right:14px; }
  .page{ padding-left:14px; padding-right:14px; }
  h1{ font-size:21px; }
  .callrow{ grid-template-columns:1fr; }
}
