/* ══ Team dashboard (team.php) ════════════════════════════════════════════════
   The hero and crest switcher keep their .tp-* rules in _styles.css; everything
   below the switcher lives here, scoped to .tpd. Loaded with ?v=filemtime because
   .htaccess caches CSS as immutable for a year.
   Chart colours (#4a6ad0 season, #b8841c Cup season) pass the dataviz palette
   validator on white: lightness band, chroma floor, CVD separation, 3:1 contrast. */

.tpd { padding: 22px 26px 44px; font-family: helvetica, arial, sans-serif; font-size: 13px; line-height: 1.45; color: #4a5058; }
.tpd *, .tpd *::before, .tpd *::after { box-sizing: border-box; }
.tpd [hidden] { display: none !important; }
.tpd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tpd-now { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 20px; align-items: start; }
.tpd-main, .tpd-rail { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.tpd-card { position: relative; background: #fff; border: 1px solid #e3e6ea; border-radius: 10px;
            box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.tpd-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px;
                 padding: 12px 16px; border-bottom: 1px solid #eef0f2; }
.tpd-card-title { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #59616a; }
.tpd-card-body { padding: 14px 16px 16px; }
.tpd-eyebrow { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #8a929c; }
.tpd-link { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #252f52; text-decoration: none; white-space: nowrap; }
.tpd-link:hover { text-decoration: underline; }
.tpd-fine { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: #9aa1a9; }
.tpd-muted { margin: 0; color: #8a929c; }
.tpd-empty { padding: 26px 16px; text-align: center; color: #8a929c; }

/* ── This-season strip ────────────────────────────────────────────────────── */
.tpd-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.tpd-game { display: flex; flex-direction: column; gap: 8px; min-height: 142px; padding: 14px 16px 14px 19px;
            overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.tpd-game:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tp-accent,#3d4852); }
a.tpd-game:hover { border-color: #c9cfd6; box-shadow: 0 5px 16px rgba(0,0,0,.1); }
a.tpd-game:focus-visible { outline: 2px solid #252f52; outline-offset: 2px; }
.tpd-game-when { font-size: 12px; color: #6a7178; }
.tpd-game-when b { color: #22262b; }
.tpd-game-foot { margin-top: auto; font-size: 11px; color: #8a929c; }
.tpd-game-empty { margin: auto 0; color: #8a929c; font-size: 13px; }
.tpd-vs { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 17px; font-weight: 700; color: #22262b; line-height: 1.15; }
.tpd-vs img { width: 42px; height: 42px; object-fit: contain; flex: none; }
.tpd-vs > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpd-vs em { display: block; font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9aa1a9; }
.tpd-vs.is-small { font-size: 14px; }
.tpd-vs.is-small img { width: 28px; height: 28px; }
.tpd-last { display: flex; align-items: center; gap: 8px; }
.tpd-score { font-family: 'Josefin Sans', helvetica, arial, sans-serif; font-size: 30px; line-height: 1; font-weight: 600; color: #22262b; }
.tpd-so { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a929c; }
.tpd-so.is-cup { padding: 2px 7px; border-radius: 10px; background: #b8841c; color: #fff; }
.tpd-place { font-family: 'Josefin Sans', helvetica, arial, sans-serif; font-size: 36px; line-height: 1; font-weight: 600; color: #22262b; }
.tpd-place small { font-family: helvetica, arial, sans-serif; font-size: 13px; font-weight: 700; color: #8a929c; }
.tpd-place.is-pre { font-size: 26px; }

/* W / L / T chips always carry their letter, never colour alone. */
.tpd-res { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 5px;
           border-radius: 5px; background: #8a929c; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.tpd-res.is-W { background: #2e7d32; }
.tpd-res.is-L { background: #b3261e; }
.tpd-form { display: flex; gap: 4px; flex-wrap: wrap; }

/* ── About ────────────────────────────────────────────────────────────────── */
.tpd-about { position: relative; max-width: 78ch; font-size: 14px; line-height: 1.72; color: #4f565e; }
.tpd-about.is-clamped { max-height: 260px; overflow: hidden; }
.tpd-about.is-clamped:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none;
                              background: linear-gradient(rgba(255,255,255,0), #fff 85%); }
.tpd-more { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
            padding: 8px 14px; border: 1px solid #d6dbe0; border-radius: 20px; background: #fff; cursor: pointer;
            font: 700 11px helvetica, arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #252f52; }
.tpd-more:after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                  transform: translateY(-2px) rotate(45deg); }
.tpd-more[aria-expanded="true"]:after { transform: translateY(1px) rotate(-135deg); }
.tpd-more:hover { border-color: #252f52; }

/* Sponsor band sits in a card here; override its legacy page margins. */
.tpd #TeamSponsorBand { margin: 0; padding: 14px 16px; }
.tpd #TeamSponsorBand.is-empty { padding: 0; border: 0; box-shadow: none; background: transparent; }

/* ── Tabs & tables ────────────────────────────────────────────────────────── */
.tpd-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 8px; background: #e9edf0; }
.tpd-tab { -webkit-appearance: none; appearance: none; margin: 0; padding: 6px 12px; border: 0; border-radius: 6px; background: transparent;
           cursor: pointer; font: 700 10.5px helvetica, arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #6a7178; }
.tpd-tab:hover { color: #22262b; }
.tpd-tab[aria-selected="true"] { background: #fff; color: #22262b; box-shadow: 0 1px 3px rgba(0,0,0,.13); }
.tpd-tab:focus-visible { outline: 2px solid #252f52; outline-offset: 1px; }
.tpd-tab i { font-style: normal; margin-left: 3px; color: #8a929c; }
.tpd-select select { padding: 6px 28px 6px 10px; border: 1px solid #d6dbe0; border-radius: 7px; background: #fff; cursor: pointer;
                     font: 700 12px helvetica, arial, sans-serif; color: #22262b; }

.tpd-table-wrap { overflow-x: auto; }
.tpd-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tpd-table th { padding: 9px 10px; background: #f5f7f9; border-bottom: 1px solid #e6e9ec; text-align: right; white-space: nowrap;
                font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6a7178; }
.tpd-table td { padding: 8px 10px; border-bottom: 1px solid #eef0f2; text-align: right; white-space: nowrap; }
.tpd-table .l { text-align: left; }
.tpd-table td.m { color: #9aa1a9; }
.tpd-table tbody tr:hover td { background: #f8f9fb; }
.tpd-table a { color: #22262b; font-weight: 700; text-decoration: none; }
.tpd-table a:hover { color: var(--tp-accent,#3d4852); text-decoration: underline; }
.tpd-table .is-key { color: #22262b; font-weight: 700; }
.tpd-table tr.is-cup td { background: #fbf6ea; }
.tpd-table tfoot td { background: #2f3640; color: #fff; font-weight: 700; border: 0; }
.tpd-c { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 4px; background: var(--tp-accent,#3d4852); color: #fff;
         font-size: 9.5px; font-weight: 700; line-height: 16px; vertical-align: 1px; }

/* ── Rail: captains, schedule ─────────────────────────────────────────────── */
.tpd-people { display: flex; flex-direction: column; gap: 10px; }
.tpd-person { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.tpd-person b { display: block; font-size: 14px; color: #22262b; }
.tpd-person span span { display: block; font-size: 11px; color: #8a929c; }
.tpd-person:hover b { color: var(--tp-accent,#3d4852); text-decoration: underline; }
.tpd-avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 50%;
              overflow: hidden; background: var(--tp-accent,#3d4852); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .03em;
              box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e0e4e8; }
.tpd-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tpd-btn { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
           margin-top: 14px; padding: 11px 14px; border: 0; border-radius: 8px; background: #252f52; color: #fff; cursor: pointer;
           font: 700 11.5px helvetica, arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
           box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: background .15s; }
.tpd-btn svg { width: 17px; height: 17px; }
.tpd-btn:hover { background: #313d69; }
.tpd-btn:focus-visible { outline: 2px solid #3cd918; outline-offset: 2px; }
.tpd-btn:disabled { opacity: .6; cursor: default; }
.tpd-btn.is-ghost { background: #fff; color: #4a5058; border: 1px solid #d6dbe0; box-shadow: none; }
.tpd-btn.is-ghost:hover { border-color: #9aa6c4; background: #f7f9fb; }
.tpd-note { margin: 12px 0 0; padding: 9px 11px; border-radius: 7px; font-size: 12.5px; line-height: 1.45; }
.tpd-note.is-ok  { background: #eaf6ec; color: #256b2c; }
.tpd-note.is-err { background: #fdecea; color: #9a2a22; }

.tpd-sched { list-style: none; margin: 0; padding: 4px 0; }
.tpd-sched-row { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 6px 16px;
                 color: inherit; text-decoration: none; font-size: 12.5px; }
a.tpd-sched-row:hover { background: #f6f8fa; }
.tpd-sched-row.is-next { background: #eff9ec; box-shadow: inset 3px 0 0 #3cd918; }
.tpd-sched-date b { display: block; color: #2f3640; line-height: 1.15; }
.tpd-sched-date em { display: block; font-size: 9.5px; font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: #9aa1a9; }
.tpd-sched-opp { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 700; color: #3a4048; }
.tpd-sched-opp em { width: 18px; font-size: 10px; font-style: normal; font-weight: 700; color: #9aa1a9; }
.tpd-sched-opp img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.tpd-sched-res { font-size: 12px; color: #59616a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tpd-sched-res .tpd-res { min-width: 18px; height: 17px; font-size: 9.5px; }

.tpd-calbox { border-top: 1px solid #eef0f2; }
.tpd-calbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.tpd-calbtn { -webkit-appearance: none; appearance: none; margin: 0; padding: 8px 6px; border: 1px solid #dfe3e7; border-radius: 7px;
              background: #fff; cursor: pointer; text-align: center; text-decoration: none; white-space: nowrap;
              font: 700 11.5px helvetica, arial, sans-serif; color: #2f3640; }
.tpd-calbtn:hover { border-color: #9aa6c4; background: #f4f7fb; }
.tpd-calbtn.is-primary { grid-column: 1 / -1; background: #252f52; border-color: #252f52; color: #fff; }
.tpd-calbtn.is-primary:hover { background: #313d69; }
.tpd-calbtn.is-done { background: #eaf6ec; border-color: #9edb8c; color: #256b2c; }

/* ── Lists (seasons, records, leaders, news) ──────────────────────────────── */
.tpd-list { list-style: none; margin: 0; padding: 0; }
.tpd-list li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #eef0f2; }
.tpd-list li:last-child { border-bottom: 0; }
.tpd-list-main { flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.tpd-list-main b { display: block; font-size: 13.5px; color: #22262b; line-height: 1.3; }
.tpd-list-main > span:not(.tpd-eyebrow):not(.tpd-meter) { display: block; font-size: 11.5px; color: #8a929c; }
a.tpd-list-main:hover b { color: var(--tp-accent,#3d4852); text-decoration: underline; }
.tpd-list-val { flex: none; text-align: right; font-size: 17px; font-weight: 700; color: #22262b; line-height: 1.15; }
.tpd-list-val em { display: block; margin-top: 2px; font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: .08em;
                   text-transform: uppercase; color: #9aa1a9; }
.tpd-rank { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
            background: #eef1f4; color: #59616a; font-size: 11px; font-weight: 700; }
.tpd-list li:first-child .tpd-rank { background: var(--tp-accent,#3d4852); color: #fff; }
.tpd-crest { width: 30px; height: 30px; object-fit: contain; flex: none; }
.tpd-cupchip { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 9px; background: #fbf1dc; color: #7a560f;
               font-size: 10px; font-weight: 700; line-height: 17px; vertical-align: 1px; }
.tpd-chip { display: inline-block; padding: 1px 7px; border-radius: 10px; background: #eef1f4; color: #4a5058; font-size: 10px;
            font-weight: 700; letter-spacing: .02em; text-transform: none; white-space: nowrap; }
.tpd-chip.is-top { background: #252f52; color: #fff; }
.tpd-meter { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: #e6e9ec; overflow: hidden; }
.tpd-meter span { display: block; height: 100%; border-radius: 3px; background: var(--tp-accent,#3d4852); }

/* ── Franchise history ────────────────────────────────────────────────────── */
.tpd-history { margin-top: 36px; }
.tpd-sec-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px;
                margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid #d5dae0; }
.tpd-sec-head h2 { margin: 4px 0 0; font-family: 'Josefin Sans', helvetica, arial, sans-serif; font-size: 32px; line-height: 1;
                   font-weight: 600; text-transform: uppercase; color: #22262b; }
.tpd-sec-head p { margin: 5px 0 0; font-size: 12.5px; color: #6a7178; }

.tpd-tiles { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
.tpd-tile { padding: 13px 14px; }
.tpd-tile b { display: block; margin-top: 6px; font-size: 23px; line-height: 1.1; font-weight: 700; color: #22262b; white-space: nowrap; }
.tpd-tile > span:last-child { display: block; margin-top: 3px; font-size: 11px; color: #8a929c; }
.tpd-tile.is-cups { background: linear-gradient(160deg,#fffdf7 0%,#fbf1dc 100%); border-color: #efdfb8; }
.tpd-cups { display: flex !important; flex-wrap: wrap; gap: 3px; }
.tpd-cups em { padding: 0 6px; border-radius: 9px; background: #b8841c; color: #fff; font-size: 10px; font-style: normal; font-weight: 700; line-height: 17px; }

.tpd-row2 { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(0,1fr); gap: 20px; margin-bottom: 20px; align-items: start; }
.tpd-row3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin: 20px 0; align-items: start; }

/* Chart */
.tpd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: #6a7178; }
.tpd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tpd-legend i { width: 10px; height: 10px; border-radius: 2px; }
.tpd-legend i.is-season { background: #4a6ad0; }
.tpd-legend i.is-cup { background: #b8841c; }
.tpd-chart { position: relative; overflow-x: auto; padding: 8px 12px 0; }
.tpd-chart-svg { display: block; width: 100%; min-width: 560px; height: auto; }
.tpd-grid { stroke: #eceff2; stroke-width: 1; }
.tpd-grid.is-base { stroke: #cdd3d9; }
.tpd-yl, .tpd-xl { fill: #8a929c; font-family: helvetica, arial, sans-serif; font-size: 10px; font-variant-numeric: tabular-nums; }
.tpd-bar { cursor: default; outline: none; }
.tpd-bar path { fill: #4a6ad0; }
.tpd-bar.is-cup path { fill: #b8841c; }
.tpd-hit { fill: transparent; }
.tpd-bar:hover .tpd-hit, .tpd-bar:focus .tpd-hit { fill: rgba(37,47,82,.06); }
.tpd-cupmark { font-size: 12px; }
/* position: fixed — the scroll box around the chart would clip an absolute tooltip. */
.tpd-tip { position: fixed; z-index: 1000; max-width: 250px; padding: 8px 10px; border-radius: 7px; pointer-events: none;
           background: #1f2430; color: #fff; font-size: 12px; line-height: 1.4; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.tpd-chart-note { margin: 4px 16px 12px; }

/* Leaders: ten rows in two columns of five on wide screens. */
.tpd-lead-list { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: 0; }
.tpd-lead-list li:nth-child(-n+5) { border-right: 1px solid #eef0f2; }
.tpd-lead-list li:nth-child(5) { border-bottom: 0; }
.tpd-lead-list .tpd-avatar { width: 36px; height: 36px; font-size: 12px; }
.tpd-lead-note { margin: 0; padding: 10px 16px 12px; border-top: 1px solid #eef0f2; }

/* ── Contact dialog ───────────────────────────────────────────────────────── */
.tpd-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 12px;
              font-family: helvetica, arial, sans-serif; color: #4a5058; box-shadow: 0 24px 64px rgba(0,0,0,.45); }
.tpd-dialog::backdrop { background: rgba(10,14,24,.62); }
.tpd-dialog *, .tpd-dialog *::before, .tpd-dialog *::after { box-sizing: border-box; }
.tpd-dialog [hidden] { display: none !important; }
.tpd-dialog-head { position: relative; display: flex; gap: 12px; padding: 18px 48px 16px 18px; color: #fff;
                   background: linear-gradient(135deg,#262b33 0%,#3b434f 100%); border-top: 4px solid var(--tp-accent,#3d4852); }
.tpd-dialog-head img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.tpd-dialog-head h2 { margin: 0; font-family: 'Josefin Sans', helvetica, arial, sans-serif; font-size: 22px; line-height: 1.15; font-weight: 600; }
.tpd-dialog-head p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.74); }
.tpd-dialog-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%;
                background: rgba(255,255,255,.12); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.tpd-dialog-x:hover { background: rgba(255,255,255,.24); }
.tpd-dialog-body { padding: 16px 18px 4px; }
.tpd-field { display: block; margin-bottom: 12px; }
.tpd-field span { display: block; margin-bottom: 5px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6a7178; }
.tpd-field input, .tpd-field textarea { width: 100%; padding: 10px 11px; border: 1px solid #d3d9de; border-radius: 8px; background: #fff;
                                        font: 14px helvetica, arial, sans-serif; color: #22262b; resize: vertical; }
.tpd-field input:focus, .tpd-field textarea:focus { outline: none; border-color: #252f52; box-shadow: 0 0 0 3px rgba(37,47,82,.15); }
.tpd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tpd-dialog-foot { display: flex; gap: 10px; padding: 8px 18px 18px; }
.tpd-dialog-foot .tpd-btn { margin-top: 0; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .tpd-tiles { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tpd-row3 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 900px) {
  .tpd { padding: 18px 16px 36px; }
  /* One column: interleave rail cards with the main column so the captains and
     schedule sit right under the this-season strip. */
  .tpd-now { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .tpd-main, .tpd-rail { display: contents; }
  .tpd-o1 { order: 1; } .tpd-o2 { order: 2; } .tpd-o3 { order: 3; } .tpd-o4 { order: 4; } .tpd-o5 { order: 5; } .tpd-o6 { order: 6; }
  .tpd-row2 { grid-template-columns: minmax(0,1fr); }
  .tpd-lead-list { grid-template-columns: minmax(0,1fr); grid-auto-flow: row; grid-template-rows: none; }
  .tpd-lead-list li:nth-child(-n+5) { border-right: 0; }
  .tpd-lead-list li:nth-child(5) { border-bottom: 1px solid #eef0f2; }
}
@media (max-width: 620px) {
  .tpd { padding: 14px 10px 30px; }
  .tpd-strip { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .tpd-game { min-height: 0; }
  .tpd-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .tpd-tile b { font-size: 20px; }
  .tpd-sec-head h2 { font-size: 25px; }
  .tpd-hide-sm { display: none; }
  .tpd-list li { padding: 10px 12px; gap: 10px; }
  .tpd-card-head { padding: 11px 12px; }
  .tpd-tab { padding: 6px 9px; letter-spacing: .05em; }
}