*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d1117;--bg2:#161b22;--bg3:#1c2128;--bg4:#21262d;
  --border:#30363d;--text:#e6edf3;--text2:#8b949e;--text3:#8a929c;
  --accent:#2f81f7;--green:#3fb950;--red:#f85149;--yellow:#d29922;
  --orange:#e3b341;--purple:#bc8cff;

  /* -- Type ramp --
     Six steps, nothing between them. Every font-size on the site resolves to
     one of these; if a new component wants a size that isn't here, the answer
     is the nearest step, not a seventh token.
        xs   micro labels, table headers, badges (uppercase + letter-spaced)
        sm   body copy, table cells, nav          <- the workhorse
        md   emphasis, stat values, card titles
        lg   section heads, logo, big stat numbers
        xl   page h1
        2xl  team-name hero
     Nothing below 11px exists any more: the old 8/9px cap-marker labels were
     unreadable and broke down at 200% zoom. */
  --fs-xs:11px;--fs-sm:13px;--fs-md:15px;
  --fs-lg:18px;--fs-xl:22px;--fs-2xl:26px;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
header{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;gap:16px;height:56px;position:sticky;top:0;z-index:100}
.logo{font-size:var(--fs-lg);font-weight:700;color:var(--text);display:flex;align-items:baseline;gap:8px;white-space:nowrap;cursor:pointer;text-decoration:none}
.logo-mark{white-space:nowrap}
.logo .logo-sub{font-weight:400;color:var(--text2);font-size:var(--fs-sm)}
.logo span{color:var(--accent)}
.header-nav{display:flex;gap:4px}
.header-nav a{background:none;border:none;color:var(--text2);padding:6px 14px;border-radius:6px;cursor:pointer;font-size:var(--fs-sm);font-weight:500;text-decoration:none;transition:all .15s;display:inline-block}
.header-nav a:hover,.header-nav a.active{background:var(--bg4);color:var(--text)}
.search-wrap{margin-left:auto;position:relative}
.search-wrap input{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:6px 12px 6px 34px;border-radius:6px;font-size:var(--fs-sm);width:220px;outline:none;transition:width .2s,border-color .2s}
.search-wrap input:focus{border-color:var(--accent);width:260px}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:var(--fs-sm);pointer-events:none}
.layout{display:flex;height:calc(100vh - 56px)}
.sidebar{width:220px;min-width:220px;background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;padding:8px 0}
.conf-label{padding:12px 12px 2px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);border-top:1px solid var(--border);margin-top:6px}
.conf-label:first-child{border-top:none;margin-top:0}
.team-btn{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;background:none;border:none;cursor:pointer;color:var(--text2);font-size:var(--fs-sm);font-weight:500;text-align:left;text-decoration:none;border-left:3px solid transparent;transition:all .12s}
.team-btn:hover{background:var(--bg3);color:var(--text)}
.team-btn.active{background:var(--bg3);color:var(--text);border-left-color:var(--team-color,var(--accent))}
.team-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.drawer-link{display:block;padding:11px 14px;color:var(--text2);font-size:var(--fs-sm);font-weight:500;text-decoration:none;border-left:3px solid transparent}
.drawer-link:hover,.drawer-link.active{background:var(--bg3);color:var(--text)}
.drawer-link.active{border-left-color:var(--accent)}
.main{flex:1;overflow-y:auto;padding:24px}
.league-header{margin-bottom:20px}
.league-header h1{font-size:var(--fs-xl);font-weight:700;margin-bottom:4px}
.league-header p{color:var(--text2);font-size:var(--fs-sm)}
.updated{color:var(--text3)!important;font-size:var(--fs-xs)!important;margin-top:6px;display:flex;align-items:center;gap:6px}
.updated::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.thresholds{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-bottom:20px}
.thresholds h3{font-size:var(--fs-sm);font-weight:600;color:var(--text2);margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em}
.threshold-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.threshold-item{text-align:center}
.threshold-label{font-size:var(--fs-xs);color:var(--text3);margin-bottom:2px}
.threshold-val{font-size:var(--fs-md);font-weight:700}
.t-cap{color:var(--green)}.t-tax{color:var(--yellow)}.t-a1{color:var(--orange)}.t-a2{color:var(--red)}
.sort-controls{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.sort-controls span{font-size:var(--fs-sm);color:var(--text2)}
.sort-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:5px 12px;border-radius:6px;cursor:pointer;font-size:var(--fs-sm);font-weight:500;transition:all .12s}
.sort-btn:hover{color:var(--text);border-color:var(--text3)}
.sort-btn.active{background:var(--accent);color:white;border-color:var(--accent)}
.league-table-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:visible}
.league-table{width:100%;border-collapse:collapse}
.league-table thead th{position:sticky;top:0;z-index:5;background:var(--bg3);padding:10px 14px;text-align:left;font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);border-bottom:1px solid var(--border);white-space:nowrap}
.league-table thead th.r{text-align:right}
.league-table tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
.league-table tbody tr:last-child{border-bottom:none}
.league-table tbody tr:hover{background:var(--bg3)}
.league-table tbody td{padding:10px 14px;font-size:var(--fs-sm);white-space:nowrap}
.league-table tbody td.r{text-align:right}
.league-table thead th.c{text-align:center}
.league-table tbody td.c{text-align:center}
.rt-yes{display:inline-block;padding:1px 7px;border-radius:4px;font-size:var(--fs-xs);font-weight:700;background:rgba(210,153,34,.18);color:var(--yellow)}
.rt-no{color:var(--text3)}
.team-name-cell{display:flex;align-items:center;gap:8px;font-weight:600}
.rank{color:var(--text3);font-size:var(--fs-sm);width:20px}
.bar-cell{width:160px}
.payroll-bar-wrap{position:relative;height:8px;background:var(--bg4);border-radius:4px;overflow:visible}
.payroll-bar{height:100%;border-radius:4px;transition:width .3s}
.threshold-line{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:1px}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:var(--fs-xs);font-weight:600}
.badge-over{background:rgba(248,81,73,.15);color:var(--red)}
.badge-under{background:rgba(63,185,80,.15);color:var(--green)}
.badge-apron1{background:rgba(227,179,65,.15);color:var(--orange)}
.badge-apron2{background:rgba(248,81,73,.2);color:#ff7b72}
.badge-tax{background:rgba(210,153,34,.15);color:var(--yellow)}
.team-detail-header{display:flex;align-items:flex-start;gap:20px;margin-bottom:20px;padding:20px;border-radius:12px;border:1px solid var(--border);position:relative;overflow:hidden}
.team-name-big{font-size:var(--fs-2xl);font-weight:800;line-height:1.1}
.team-city{font-size:var(--fs-sm);color:var(--text2);margin-top:2px}
.team-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:12px}
.stat-card{background:rgba(0,0,0,.3);border-radius:8px;padding:10px 14px}
.stat-card-label{font-size:var(--fs-xs);color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.stat-card-val{font-size:var(--fs-lg);font-weight:700}
.positive{color:var(--green)}.negative{color:var(--red)}.warning{color:var(--yellow)}
.tabs{display:flex;gap:2px;margin-bottom:16px;background:var(--bg2);border-radius:8px;padding:3px;border:1px solid var(--border);width:fit-content;flex-wrap:wrap}
.tab-btn{background:none;border:none;color:var(--text2);padding:7px 18px;border-radius:6px;cursor:pointer;font-size:var(--fs-sm);font-weight:500;transition:all .12s}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{background:var(--bg4);color:var(--text)}
.roster-table-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:visible;margin-bottom:16px}
.section-title{padding:10px 16px;background:var(--bg3);border-bottom:1px solid var(--border);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);display:flex;align-items:center;gap:8px}
.section-badge{background:rgba(188,140,255,.15);color:var(--purple);padding:2px 8px;border-radius:4px;font-size:var(--fs-xs);font-weight:600}
.roster-table{width:100%;border-collapse:collapse}
.roster-table thead th{position:sticky;top:0;z-index:5;background:var(--bg3);padding:8px 14px;text-align:left;font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);border-bottom:1px solid var(--border);white-space:nowrap}
.roster-table thead th.r{text-align:right}
.roster-table tbody tr{border-bottom:1px solid var(--border)}
.roster-table tbody tr:last-child{border-bottom:none}
.roster-table tbody tr:hover{background:var(--bg3)}
.roster-table tbody td{padding:9px 14px;font-size:var(--fs-sm)}
.roster-table tbody td.r{text-align:right;font-variant-numeric:tabular-nums}
.roster-table tbody td.sal-filled{font-weight:600}
.roster-key{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 12px;font-size:var(--fs-sm);color:var(--text3)}
.roster-key .k{display:inline-flex;align-items:center;gap:6px}
.roster-key .sw{width:14px;height:14px;border-radius:3px;display:inline-block}
.pos-badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:20px;border-radius:3px;font-size:var(--fs-xs);font-weight:700;background:var(--bg4);color:var(--text2)}
.player-name{font-weight:600;color:var(--text)}
/* Player names are links now. They must not look like links inside a dense
   table - the underline on hover is the whole affordance. */
a.player-link{text-decoration:none;color:inherit;cursor:pointer}
a.player-link:hover{text-decoration:underline;text-underline-offset:2px}
/* The prose panel used to stop at 70ch - the classic readable line length -
   which on a desktop left it at roughly half the width of every other panel
   on the page and pushed the text into a tall narrow column you had to
   scroll through. It now fills the content column like the hero box and the
   tables do. The ceiling is there so a 4K monitor does not stretch a line to
   300 characters. */
.player-prose{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-bottom:16px;max-width:1500px}
.player-prose p{font-size:var(--fs-sm);color:var(--text2);line-height:1.55;margin-bottom:8px}
.player-prose p:last-child{margin-bottom:0}
.player-prose strong{color:var(--text)}
.inline-link{color:var(--accent);text-decoration:none}
.inline-link:hover{text-decoration:underline;text-underline-offset:2px}
.age-col{color:var(--text3);font-size:var(--fs-sm)}
.sal-future{color:var(--text3);font-size:var(--fs-sm)}
.sal-uo{font-style:italic;color:var(--text3);font-size:var(--fs-xs)}
.notes-col{color:var(--text3);font-size:var(--fs-xs);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-caphold{color:var(--yellow);font-style:italic}
.total-row td{background:var(--bg3);font-weight:700;border-top:2px solid var(--border)}
.cap-bar-visual{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-bottom:16px}
.cap-bar-visual h3{font-size:var(--fs-sm);font-weight:600;color:var(--text2);margin-bottom:14px;text-transform:uppercase;letter-spacing:.06em}
.cap-bar-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.cap-bar-top h3{margin-bottom:0}
.cap-bar-payroll{font-size:var(--fs-xs);color:var(--text3);white-space:nowrap}
.cap-bar-payroll strong{font-size:var(--fs-md);font-weight:700;color:var(--text);margin-left:6px;font-variant-numeric:tabular-nums}
.cap-bar-track{position:relative;height:32px;background:var(--bg4);border-radius:6px;margin-bottom:14px;overflow:visible}
.cap-bar-fill{height:100%;border-radius:6px;transition:width .4s;min-width:2px}
/* Two presentations of the same bar. Desktop restores the original design:
   two-line labels hung off each tick (Cap / Tax / A1 / A2 with rounded values)
   and the payroll printed inside the fill. On a phone the tax and apron ticks
   sit 3-5% apart, so those labels collide - there the labels are hidden and a
   legend below the bar names the four lines in full instead. */
.cap-marker{position:absolute;top:-5px;bottom:-5px;width:2px;border-radius:1px}
.cap-marker-label{display:none;position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);font-size:var(--fs-xs);line-height:1.3;font-weight:600;white-space:nowrap;text-align:center;pointer-events:none}
.cap-fill-label{display:none;font-size:var(--fs-xs);font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.cap-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 16px}
.cap-legend-item{display:flex;align-items:center;gap:7px;min-width:0;font-size:var(--fs-xs)}
.cap-legend-swatch{width:3px;height:13px;border-radius:2px;flex:0 0 auto}
.cap-legend-name{color:var(--text2);white-space:nowrap}
.cap-legend-val{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}
@media (min-width:769px){
  .cap-bar-payroll{display:none}
  .cap-legend{display:none}
  .cap-bar-track{margin-bottom:42px}
  .cap-bar-fill{display:flex;align-items:center;justify-content:flex-end;padding-right:8px;overflow:hidden;white-space:nowrap}
  .cap-marker-label{display:block}
  .cap-fill-label{display:block}
}
.back-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:6px 14px;border-radius:6px;cursor:pointer;font-size:var(--fs-sm);display:flex;align-items:center;gap:6px;margin-bottom:16px;transition:all .12s;width:fit-content}
.back-btn:hover{color:var(--text);border-color:var(--text3)}
/* Player pages hang the back-link off the top-right of the hero box instead of
   stacking it above, so the name and the four stat cards start at the top of
   the panel. Slightly bigger than the standalone button because it is sitting
   against a tinted panel rather than the page background. */
.back-btn-hero{margin-bottom:0;flex:0 0 auto;align-self:flex-start;padding:8px 16px;font-size:var(--fs-md);white-space:nowrap;background:rgba(0,0,0,.3)}
.empty-section{padding:20px;color:var(--text3);font-size:var(--fs-sm);font-style:italic;text-align:center}
.spending-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:16px}
.spending-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.spending-card-source{font-size:var(--fs-sm);color:var(--text2);margin-bottom:4px}
.spending-card-amount{font-size:var(--fs-lg);font-weight:700;color:var(--green)}
.spending-card-type{display:inline-block;margin-top:4px;font-size:var(--fs-xs);padding:2px 6px;border-radius:3px;font-weight:600;text-transform:uppercase}
.type-cap{background:rgba(47,129,247,.15);color:var(--accent)}
.type-mle{background:rgba(63,185,80,.15);color:var(--green)}
.type-bae{background:rgba(210,153,34,.15);color:var(--yellow)}
.type-tpe{background:rgba(188,140,255,.15);color:var(--purple)}
.type-min{background:rgba(139,148,158,.15);color:var(--text2)}
.type-room{background:rgba(47,129,247,.1);color:#79c0ff}
.my-table-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow-x:auto}
.my-table{width:100%;border-collapse:collapse;min-width:700px}
.my-table thead th{position:sticky;top:0;z-index:5;background:var(--bg3);padding:8px 14px;text-align:left;font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);border-bottom:1px solid var(--border)}
.my-table thead th.r{text-align:right}
.my-table tbody tr{border-bottom:1px solid var(--border)}
.my-table tbody tr:last-child{border-bottom:none}
.my-table tbody tr:hover{background:var(--bg3)}
.my-table tbody td{padding:9px 14px;font-size:var(--fs-sm)}
.my-table tbody td.r{text-align:right;font-variant-numeric:tabular-nums}
.my-table .total-row td{background:var(--bg3);font-weight:700;border-top:2px solid var(--border)}
/* Search */
.search-results-header{margin-bottom:16px}
.search-results-header h2{font-size:var(--fs-lg);font-weight:700}
.search-results-header p{color:var(--text2);font-size:var(--fs-sm);margin-top:4px}
.src-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:10px;cursor:pointer;transition:border-color .15s}
.src-card:hover{border-color:var(--accent)}
.src-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.src-team-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.src-player-name{font-size:var(--fs-md);font-weight:700}
.src-team-name{font-size:var(--fs-sm);margin-left:auto}
.src-pos{display:inline-flex;align-items:center;justify-content:center;width:32px;height:22px;border-radius:3px;font-size:var(--fs-xs);font-weight:700;background:var(--bg4);color:var(--text2)}
.src-tag{font-size:var(--fs-xs);padding:2px 8px;border-radius:4px;font-weight:600}
.tag-active{background:rgba(63,185,80,.15);color:var(--green)}
.tag-hold{background:rgba(210,153,34,.15);color:var(--yellow)}
.tag-exh{background:rgba(47,129,247,.15);color:var(--accent)}
.src-salaries{display:flex;overflow-x:auto}
.src-sal-cell{padding:10px 16px;min-width:100px;border-right:1px solid var(--border)}
.src-sal-cell:last-child{border-right:none}
.src-sal-year{font-size:var(--fs-xs);color:var(--text3);margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em}
.src-sal-val{font-size:var(--fs-sm);font-weight:600}
.src-notes{padding:8px 16px;font-size:var(--fs-xs);color:var(--text3);border-top:1px solid var(--border);font-style:italic}
.cap-mini{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;position:relative;margin-top:8px}
.cap-mini-fill{height:100%;border-radius:3px;transition:width .3s;position:absolute;top:0;left:0}
.cap-mini-new{height:100%;border-radius:3px;transition:width .3s;position:absolute;top:0;left:0;opacity:.6}
.cap-mini-cap{position:absolute;top:0;bottom:0;width:2px;background:var(--green)}
.cap-mini-info{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--text3);margin-top:3px}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}
/* This block used to carry `.sidebar{display:none}`, left over from before the
   mobile drawer existed. It sat ABOVE the drawer rules and set a property they
   never touched, so the drawer slid open with display:none still applied and
   the hamburger looked dead on every phone. The drawer owns the sidebar on
   mobile now - do not hide it here. */
@media(max-width:768px){.threshold-grid{grid-template-columns:repeat(2,1fr)}}
/* Overviews with three tiles instead of four - the Exhibit page. Scoped to
   the desktop query so the two-column phone rules below still win. */
@media(min-width:769px){.threshold-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.summary-table td:first-child{font-weight:600;color:var(--text2);white-space:nowrap}
.summary-table tbody td{font-variant-numeric:tabular-nums}
.summary-table .subtotal-row td{background:var(--bg3);font-weight:700}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.sp-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;cursor:pointer;transition:border-color .15s}
.sp-card:hover{border-color:var(--accent)}
.sp-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:2px}
.sp-card-team{font-weight:700;font-size:var(--fs-sm)}
.sp-card-total{font-weight:700;color:var(--green);font-size:var(--fs-sm);white-space:nowrap}
.sp-card-roster{font-size:var(--fs-xs);color:var(--text3);margin-bottom:8px}
.sp-src-row{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-sm);padding:4px 0;border-top:1px solid var(--border)}
.sp-src-amt{color:var(--text2);font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-rel{position:relative;height:9px;width:170px;background:var(--bg4);border-radius:3px}
.sp-rel-zero{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--text3);opacity:.7}
.sp-rel-fill{position:absolute;top:0;bottom:0;border-radius:3px}

/* ===================== CONTRACT CALCULATORS =====================
   The nav item is a real link to /calculators/ with a hover menu layered on
   top for pointer devices. Touch devices never get the menu - a tap is a
   navigation to the hub page, which lists the same two calculators. */
.nav-drop{position:relative;display:inline-block}
.nav-drop-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:290px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.55);z-index:130}
.nav-drop-menu a{display:block;padding:9px 11px;border-radius:6px;white-space:normal;font-weight:600;color:var(--text);line-height:1.35}
.nav-drop-menu a:hover{background:var(--bg4)}
.nav-drop-menu a span{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--text3);margin-top:3px}
.nav-caret{font-size:var(--fs-xs);line-height:1;opacity:.6;margin-left:5px}
@media (hover:hover) and (min-width:769px){
  .nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:block}
}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.calc-card{display:block;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px 22px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.calc-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.calc-card h2{font-size:var(--fs-md);font-weight:700;margin-bottom:6px}
.calc-card p{font-size:var(--fs-sm);color:var(--text2);line-height:1.55}
.calc-card ul{margin:10px 0 0 18px;font-size:var(--fs-sm);color:var(--text2)}
.calc-card li{margin:3px 0}
.calc-cta{margin-top:14px;display:inline-block;font-size:var(--fs-sm);font-weight:600;color:var(--accent)}
.calc-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start}
.calc-panel{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px 18px}
.calc-panel h3{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text3);font-weight:700;margin-bottom:12px}
.calc-field{margin-bottom:13px}
.calc-field label{display:block;font-size:var(--fs-xs);color:var(--text2);margin-bottom:4px}
.calc-field input,.calc-field select{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:6px;font-size:var(--fs-sm);outline:none;font-variant-numeric:tabular-nums;font-family:inherit}
.calc-field input:focus,.calc-field select:focus{border-color:var(--accent)}
.calc-money{position:relative}
.calc-money span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:var(--fs-sm);pointer-events:none}
.calc-money input{padding-left:22px}
.calc-readonly{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:var(--fs-sm);padding:7px 0;border-top:1px solid var(--border)}
.calc-readonly:first-of-type{border-top:none}
.calc-readonly span{color:var(--text2)}
.calc-readonly strong{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-empty{background:var(--bg2);border:1px dashed var(--border);border-radius:10px;padding:30px 22px;text-align:center;color:var(--text2);font-size:var(--fs-sm);line-height:1.6}
.calc-empty strong{display:block;color:var(--text);font-size:var(--fs-md);font-weight:700;margin-bottom:6px}
.calc-seg{display:flex;gap:6px}
.calc-seg .sort-btn{flex:1}
.calc-note{font-size:var(--fs-xs);color:var(--text3);margin-top:5px;line-height:1.45}
.calc-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.calc-stat{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.calc-stat-label{font-size:var(--fs-xs);color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.calc-stat-val{font-size:var(--fs-lg);font-weight:700;font-variant-numeric:tabular-nums}
.calc-flag{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:6px;font-size:var(--fs-sm);font-weight:600;margin-bottom:14px}
.calc-ok{background:rgba(63,185,80,.14);color:var(--green)}
.calc-warn{background:rgba(248,81,73,.15);color:var(--red)}
.calc-table tbody tr{cursor:default}
.calc-table tbody tr:hover{background:transparent}
.calc-table td{font-variant-numeric:tabular-nums}
.calc-explain{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px 18px;margin-top:18px;font-size:var(--fs-sm);color:var(--text2);line-height:1.6}
.calc-explain h3{font-size:var(--fs-sm);color:var(--text);font-weight:700;margin-bottom:8px}
.calc-explain p{margin-bottom:8px}
.calc-explain p:last-child{margin-bottom:0}
.calc-explain code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);background:var(--bg3);padding:1px 5px;border-radius:4px}
.calc-sub{font-size:var(--fs-md);font-weight:700;margin:22px 0 12px}

/* ===================== SITE FOOTER =====================
   Lives inside .main but outside #main-content, so a client-side render
   (which replaces main-content.innerHTML) can never wipe it. */
.site-footer{margin-top:40px;padding-top:18px;border-top:1px solid var(--border);
  color:var(--text3);font-size:var(--fs-xs);line-height:1.7;max-width:900px}
.site-footer-nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:12px}
.site-footer-nav a{color:var(--text2);text-decoration:none;font-weight:500}
.site-footer-nav a:hover{color:var(--text);text-decoration:underline}
.site-footer p{margin-bottom:8px}
.site-footer p:last-child{margin-bottom:0}
.site-footer a{color:var(--text2)}
.site-footer strong{color:var(--text2);font-weight:600}

/* ===================== PROSE / CONTENT PAGES =====================
   /about/ and /methodology/ have no JS view - they are server-rendered only.
   See firstPaint() in app.js, which leaves unowned paths alone. */
.content-panel{background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:22px 28px;margin-bottom:16px;max-width:760px}
.content-panel h2{font-size:var(--fs-md);font-weight:700;margin:24px 0 8px;color:var(--text)}
.content-panel h2:first-child{margin-top:0}
.content-panel p{font-size:var(--fs-sm);color:var(--text2);line-height:1.7;
  margin-bottom:13px}
.content-panel p:last-child{margin-bottom:0}
.content-panel strong{color:var(--text);font-weight:600}
.content-panel ul{margin:0 0 12px 20px;font-size:var(--fs-sm);color:var(--text2);line-height:1.75}
.content-panel li{margin-bottom:7px}
.content-panel a{color:var(--accent);text-decoration:none}
.content-panel a:hover{text-decoration:underline}
.content-panel .credit-list li strong{display:inline}
@media (max-width:768px){
  .content-panel{padding:16px 18px}
}

/* ===================== HEADER, MID-WIDTH =====================
   Between the drawer breakpoint (769px) and about 1420px the nav labels stop
   fitting at full padding. They do not wrap as a nav - each <a> wraps its own
   text instead, which grows the nav inside a fixed 56px header and clips the
   second row. Tightening the chrome keeps the row intact down to ~1280px; it
   held to ~1300px with six links, so About costs nothing here.

   min-width:0 is the load-bearing line. A flex item defaults to
   min-width:auto, so the nav's min-content width became a floor the document
   could not shrink below, and the whole page scrolled sideways at ~900px. */
@media (min-width:769px) and (max-width:1420px){
  header{padding:0 16px;gap:12px}
  .header-nav{gap:0;min-width:0}
  .header-nav a{padding:6px 9px}
  .search-wrap{flex:0 0 auto}
  .search-wrap input{width:192px}
  .search-wrap input:focus{width:216px}
}

/* ===================== MOBILE / RESPONSIVE ===================== */
.menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:var(--fs-xl);line-height:1;cursor:pointer;padding:4px 8px;border-radius:6px}
.menu-toggle:hover{background:var(--bg4)}
#sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:150}
@media (max-width:768px){
  header{height:auto;flex-wrap:wrap;padding:8px 12px;gap:10px;row-gap:8px}
  .menu-toggle{display:inline-flex;order:0}
  .logo{order:1;font-size:var(--fs-md)}
  .logo span[style]{display:none}
  .search-wrap{order:2;margin-left:auto}
  .search-wrap input{width:150px}
  .search-wrap input:focus{width:170px}
  /* The section links move into the drawer (see drawerNav()). They stayed in
     the markup for crawlers and for the desktop header; here they would only
     be a scroller with no scrollbar, clipped mid-word. */
  .header-nav{display:none}
  .layout{display:block;height:auto}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:270px;max-width:82vw;min-width:0;transform:translateX(-100%);transition:transform .25s ease;z-index:200;border-right:1px solid var(--border);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:28px}
  .sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.6)}
  .team-btn{padding:11px 14px}
  body.nav-open{overflow:hidden}
  .main{flex:none;height:auto;overflow:visible;padding:16px 12px}
  .league-header h1{font-size:var(--fs-lg)}
  .threshold-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .league-table-wrap,.roster-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .league-table,.roster-table{min-width:560px}
  /* Pin the identity column (player / team name) while the money columns scroll. */
  .sticky-name{position:sticky;left:0;z-index:6;background:var(--bg2);box-shadow:6px 0 8px -6px rgba(0,0,0,.55)}
  thead th.sticky-name{z-index:7;background:var(--bg3)}
  tbody tr:hover td.sticky-name{background:var(--bg3)}
  .total-row td.sticky-name{background:var(--bg3)}
  /* Four legend items across is too tight on a phone - '1st Apron $209.0M'
     wraps mid-label. Two columns, two rows, everything on one line each. */
  .cap-legend{grid-template-columns:repeat(2,1fr);gap:9px 18px}
  .cap-bar-visual{padding:14px 16px}
  .cap-bar-track{height:26px}
  /* align-items:flex-start is right for the desktop row, but once this
     becomes a column it shrink-wraps the stats block to its content width -
     which left six stat cards stacked in a half-width strip with the other
     half of the hero empty, and a full screen of nothing before any cap data.
     Stretch on the cross axis, then two real columns. */
  .team-detail-header{flex-direction:column;align-items:stretch;gap:12px;padding:16px}
  .team-detail-header>div{min-width:0}
  .back-btn-hero{order:-1}
  .team-name-big{font-size:var(--fs-xl)}
  .team-stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat-card{padding:9px 12px}
  .spending-grid{grid-template-columns:1fr}
  .notes-col{max-width:120px}
  .calc-layout{grid-template-columns:1fr}
  .nav-drop-menu{display:none!important}
  .calc-table{min-width:0}
}
@media (max-width:480px){
  .search-wrap input{width:110px}
  .threshold-grid{grid-template-columns:repeat(2,1fr)}
  .main{padding:14px 10px}
}