/* Trends hub (prompt 113). Every page here is built in Team Trends' look
   (Dan, 2026-10-06: "every new page is built in that same look"): the same
   pills, the same boxes, the same type, and every color a palette variable,
   so theme-light.css flips the whole page with no patch of its own. The
   tt-* rules are Team Trends' own (templates/team_trends.html), shared here
   so the two cannot drift; the tr-* rules are what the hub adds. */
:root { --gold:#B69862; --gold-lt:#DDBC84; --bg:#0A0A0A; --bg2:#111111; --bg3:#1A1A1A; --border:#2A2A2A; --text:#EEEEEE; --muted:#888888; --green:#00C896; --red:#E5534B; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; line-height:1.6; }
a { color:var(--gold); text-decoration:none; } a:hover { color:var(--gold-lt); }
.wrap { max-width:1240px; margin:0 auto; padding:28px 20px 80px; }
.wrap :focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.crumbs { font-size:12px; color:var(--muted); margin-bottom:16px; } .crumbs a { color:var(--muted); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tt-switch, .tt-views { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.tt-switch a, .tt-pill, .tt-tog, .tt-fbtn { display:inline-flex; align-items:center; min-height:40px; border:1px solid var(--border); border-radius:999px; padding:6px 14px; font:inherit; font-size:13px; font-weight:700; line-height:1.2; color:var(--muted); background:var(--bg2); cursor:pointer; }
.tt-switch a.on, .tt-pill[aria-pressed="true"], .tt-tog[aria-pressed="true"] { color:var(--gold); border-color:var(--gold); }
.tt-tog[aria-pressed="true"]::before { content:"\2713\00a0"; }
.tt-meta { font-size:13px; color:var(--muted); margin:0 0 14px; max-width:100ch; }
.tt-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; }
.tt-search { position:relative; flex:1 1 220px; max-width:320px; min-width:0; }
.tt-search input { width:100%; min-height:40px; font:inherit; font-size:16px; color:var(--text); background:var(--bg2); border:1px solid var(--border); border-radius:999px; padding:6px 40px 6px 14px; -webkit-appearance:none; appearance:none; }
.tt-search input::placeholder { color:var(--muted); }
.tt-search input::-webkit-search-cancel-button { -webkit-appearance:none; display:none; }
.tt-qx { position:absolute; right:0; top:0; width:40px; height:40px; border:0; background:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; }
.tt-field { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.tt-field select { -webkit-appearance:none; appearance:none; min-height:40px; max-width:100%; font:inherit; font-size:14px; line-height:1.2; color:var(--text); border:1px solid var(--border); border-radius:999px; padding:6px 32px 6px 14px; background:var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888888' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center; cursor:pointer; }
.tt-count { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:13px; color:var(--muted); margin:0 0 10px; min-height:24px; }
.tt-count b { color:var(--text); }
.tt-chip[hidden], .tt-qx[hidden] { display:none; }
.tt-fbtn { display:none; } .tt-fcount { margin-left:6px; color:var(--gold); }
.tt-panel { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tt-chip { display:inline-flex; align-items:center; gap:6px; min-height:30px; border:1px solid var(--border); border-radius:999px; padding:2px 10px; font:inherit; font-size:12px; font-weight:700; color:var(--text); background:var(--bg3); cursor:pointer; }
.tt-box { border:1px solid var(--border); border-radius:12px; background:var(--bg2); overflow:clip; }
.tt-empty, .tt-none { padding:22px; color:var(--muted); font-size:14px; }
.tt-foot { font-size:13px; color:var(--muted); margin:14px 0 0; max-width:78ch; }
.wrap > .og-fold { margin:22px 0 0; }
.tt-method p, .tt-method li { font-size:14.5px; color:var(--text); max-width:72ch; }
.tt-method p { margin:0 0 10px; } .tt-method ul { margin:0 0 10px 20px; } .tt-method li { margin-bottom:6px; }
.na { color:var(--muted); } .pos { color:var(--green); } .neg { color:var(--red); }
footer { border-top:1px solid var(--border); padding:24px; text-align:center; color:var(--muted); font-size:13px; margin-top:40px; }
footer a { color:var(--muted); } .footer-links { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:8px; }

/* ── The hub's own pieces ─────────────────────────────────────────────── */
/* The tabs: Teams, Players, Conditions, Line Movers. Same place on every
   page; on a phone they scroll sideways in their own row rather than wrap
   (prompt 113), with the scrollbar hidden and 40px targets. */
.tr-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.tr-tabs a { flex:0 0 auto; display:inline-flex; align-items:center; min-height:40px; padding:6px 11px; border-radius:10px; border:1px solid var(--border); background:var(--bg3); color:var(--text); font-size:13px; font-weight:700; white-space:nowrap; }
.tr-tabs a.on { color:var(--gold); border-color:var(--gold); background:var(--bg2); }
.tr-switch { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.tr-switch::-webkit-scrollbar { display:none; }
.tr-switch a { flex:0 0 auto; white-space:nowrap; }
.tr-note { font-size:13px; color:var(--muted); margin:0 0 14px; max-width:100ch; }
.tr-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.tr-card { border:1px solid var(--border); border-radius:12px; background:var(--bg2); padding:16px; display:flex; flex-direction:column; gap:6px; min-height:120px; }
.tr-card h2 { font-size:17px; line-height:1.3; }
.tr-card p { font-size:13px; color:var(--muted); line-height:1.45; }
.tr-card .tr-go { margin-top:auto; display:flex; flex-wrap:wrap; gap:6px; }
.tr-card .tr-go a { display:inline-flex; align-items:center; min-height:40px; padding:6px 12px; border:1px solid var(--border); border-radius:999px; font-size:13px; font-weight:700; background:var(--bg3); }
/* Stacked rows, never a table inside a table (Team Trends' tt-g). */
.tr-list { list-style:none; }
.tr-list > li { padding:12px 14px; border-top:1px solid var(--border); font-size:14px; line-height:1.5; }
.tr-list > li:first-child { border-top:0; }
.tr-list .tr-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.tr-list .tr-h a, .tr-list .tr-h b { font-weight:700; }
.tr-list .tr-sub { color:var(--muted); font-size:13px; }
.tr-list .tr-big { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
.tr-move { display:flex; flex-wrap:wrap; gap:4px 16px; font-variant-numeric:tabular-nums; font-size:13px; color:var(--muted); margin-top:4px; }
.tr-move b { color:var(--text); font-weight:700; }
/* A player's splits: one row per split, its count and its sample. */
.tr-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin:8px 0 4px; }
.tr-cell { border:1px solid var(--border); border-radius:10px; background:var(--bg3); padding:8px 10px; min-height:64px; }
.tr-cell .k { font-size:12px; color:var(--muted); line-height:1.3; }
.tr-cell .v { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.4; }
.tr-cell .s { font-size:12px; color:var(--muted); line-height:1.3; }
.tr-cell.hide { display:none; }
.tr-prop { border-top:1px solid var(--border); padding:14px; }
.tr-prop:first-child { border-top:0; }
.tr-prop h2 { font-size:16px; line-height:1.35; }
.tr-prop .tr-line { font-size:13px; color:var(--muted); margin:2px 0 6px; }
.tr-prop .tr-line b { color:var(--text); }
.tr-results { display:none; margin:0 0 12px; border:1px solid var(--border); border-radius:12px; background:var(--bg2); }
.tr-results.on { display:block; }
.tr-results a { display:flex; align-items:center; min-height:44px; padding:8px 14px; border-top:1px solid var(--border); font-weight:700; }
.tr-results a:first-child { border-top:0; }
.tr-results a span { color:var(--muted); font-weight:400; font-size:13px; margin-left:8px; }
@media (max-width:759px) {
  /* Phone: the span pills, then a Filters button; the panel opens in the
     page under them (Team Trends' own pattern). */
  .tt-fbtn { display:inline-flex; flex:0 0 auto; }
  .tt-panel { display:none; flex:1 1 100%; border:1px solid var(--border); border-radius:12px; background:var(--bg2); padding:10px; }
  .tt-panel.open { display:flex; }
  .tt-panel .tt-field { flex:1 1 100%; justify-content:space-between; }
  .tt-panel .tt-field select { font-size:16px; min-width:0; flex:0 1 60%; }
}
@media (max-width:600px) {
  .wrap { padding:14px 16px 60px; }
  .crumbs { margin-bottom:6px; }
  .wrap .og-top.og-in { padding:4px 0 10px; }
  .wrap .og-top h1 { font-size:26px; margin-bottom:6px; }
  .wrap .og-top .og-lede { font-size:14px; line-height:1.45; }
  .tt-switch, .tt-views { gap:6px; margin-bottom:10px; }
  .tt-switch a, .tt-pill { padding:6px 11px; }
  .tt-search { max-width:none; flex:1 1 100%; }
  .tr-list > li { padding:12px 12px; }
  .tr-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .tt-chip { min-height:40px; }
}