/* The Role Report is a spreadsheet. It should look like the one it also ships as. */
:root {
  color-scheme: light;
  --app: #e9ebee;            /* the window around the sheet */
  --sheet: #ffffff;
  --grid: #d4d4d4;           /* gridlines */
  --grid-dark: #9e9e9e;
  --ink: #000000;
  --ink-2: #444444;
  --ink-3: #767676;
  --head: #d9e1f2;           /* Excel "Blue, Accent 1, Lighter 80%" header band */
  --head-2: #f2f2f2;         /* team rows: the grey of a subtotal row */
  --sel: #217346;            /* Excel green: active tab, focus */
  /* Excel's own conditional-format colours. Good / Bad, plus the green colour scale. */
  --good-bg: #c6efce; --good-ink: #006100;
  --bad-bg: #ffc7ce;  --bad-ink: #9c0006;
  --neut-bg: #ffeb9c; --neut-ink: #9c5700;
  --s1: #ebf6ee; --s2: #c7e6cf; --s3: #a3d6b0; --s4: #63be7b;
  --note-bg: #ffffe1; --note-border: #000000;
  --link: #0563c1;
  font-family: Calibri, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--app); }
body { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.35; padding-bottom: 34px; }
a { color: var(--link); text-decoration: underline; }
a:focus-visible, input:focus-visible, select:focus-visible, td:focus-visible { outline: 2px solid var(--sel); outline-offset: -2px; }
h1, h2, h3 { margin: 0; font-size: inherit; font-weight: 700; }

/* title bar */
.top { display: flex; align-items: center; gap: 14px; padding: 5px 10px; background: var(--sheet); border-bottom: 1px solid var(--grid-dark); }
.brand { font-weight: 700; color: var(--ink); text-decoration: none; }
.top .file { color: var(--ink-3); }
.top .links { margin-left: auto; display: flex; gap: 14px; }

/* the sheet */
main { padding: 8px 10px 0; }
.sheet { background: var(--sheet); border: 1px solid var(--grid-dark); display: block; max-width: 100%; }

/* row 1: title, row 2: notes, exactly like the original's header rows */
.titlerow { padding: 4px 8px; font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--grid); }
.titlerow .season { font-weight: 400; color: var(--ink-2); }
.notesrow { padding: 3px 8px; font-style: italic; color: var(--ink-2); border-bottom: 1px solid var(--grid); font-size: 12px; }
.notesrow span { margin-right: 18px; white-space: nowrap; }
.notesrow.share { border-top: 1px solid var(--grid-dark); font-style: normal; }
.notesrow.share a { margin-right: 14px; }

/* movers: a boxed range on the sheet, three columns of cells */
.movers { display: grid; grid-template-columns: repeat(3, max-content); gap: 0 24px; padding: 6px 8px 8px; border-bottom: 1px solid var(--grid); overflow-x: auto; }
.mv table { border-collapse: collapse; }
.mv caption { text-align: left; font-weight: 700; padding: 2px 0 1px; caption-side: top; }
.mv caption small { font-weight: 400; color: var(--ink-3); margin-left: 6px; }
.mv th, .mv td { border: 1px solid var(--grid); padding: 1px 6px; white-space: nowrap; text-align: left; font-weight: 400; }
.mv td.n { text-align: right; font-variant-numeric: tabular-nums; }
.mv a { color: var(--ink); text-decoration: none; }
.mv a:hover { text-decoration: underline; }
.mv .tag { color: var(--ink-3); }
.empty { color: var(--ink-3); font-style: italic; }

/* deltas: Good / Bad / Neutral cell styles */
.d { display: block; text-align: right; font-variant-numeric: tabular-nums; }
td.up1, td.up2, .mv td.up1, .mv td.up2 { background: var(--good-bg); color: var(--good-ink); }
td.dn1, td.dn2, .mv td.dn1, .mv td.dn2 { background: var(--bad-bg); color: var(--bad-ink); }
td.up2, td.dn2 { font-weight: 700; }
td.d0 { color: var(--ink-3); }

/* filter toolbar, plain */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 5px 8px; background: var(--head-2); border-bottom: 1px solid var(--grid); }
.controls label { display: inline-flex; align-items: center; gap: 4px; }
.controls input[type=checkbox] { width: 14px; height: 14px; margin: 0; accent-color: var(--sel); }
.controls select, .controls input[type=search] { font: inherit; padding: 1px 4px; border: 1px solid var(--grid-dark); border-radius: 0; background: var(--sheet); color: var(--ink); height: 22px; }
.controls input[type=search] { width: 140px; }
.controls .legend { flex-basis: 100%; margin: 0; color: var(--ink-2); font-style: italic; font-size: 12px; }
.controls .legend .up2, .controls .legend .dn2 { padding: 0 4px; font-style: normal; }
.controls .legend .up2 { background: var(--good-bg); color: var(--good-ink); }
.controls .legend .dn2 { background: var(--bad-bg); color: var(--bad-ink); }

/* the grid */
.tablewrap { overflow-x: auto; }
table.role { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }
.role th, .role td { border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); padding: 1px 5px; white-space: nowrap; height: 21px; font-weight: 400; }
.role thead th { position: sticky; z-index: 3; background: var(--head); text-align: right; }
.role thead tr.groups th { top: 0; text-align: center; font-weight: 700; border-bottom: 1px solid var(--grid-dark); }
.role thead tr.cols th { top: 22px; font-weight: 700; font-size: 12px; border-bottom: 2px solid var(--grid-dark); }
.role th.player { text-align: left; position: sticky; left: 0; z-index: 2; background: var(--sheet); min-width: 208px; border-right: 2px solid var(--grid-dark); }
.role thead th.player { z-index: 4; background: var(--head); }
.role th.delta, .role td.delta { border-left: 1px solid var(--grid-dark); }
.role td { text-align: right; }
.role td.delta { text-align: right; }
.role td.t1 { background: var(--s1); }
.role td.t2 { background: var(--s2); }
.role td.t3 { background: var(--s3); }
.role td.t4 { background: var(--s4); }
.role .na { color: var(--ink-3); }

tbody.team tr.teamrow th, tbody.team tr.teamrow td { background: var(--head-2); font-weight: 700; border-top: 1px solid var(--grid-dark); }
tbody.team tr.teamrow .vs { font-weight: 400; color: var(--ink-2); }
tbody.team tr.teamrow .teaminfo { text-align: left; font-weight: 400; color: var(--ink-2); }
tr.p th.player { display: grid; grid-template-columns: 24px 1fr 52px; align-items: center; gap: 4px; }
tr.p .pos { color: var(--ink-3); font-size: 11px; }
tr.p .nm { overflow: hidden; text-overflow: ellipsis; }
.spark { display: block; }
.spark polyline { fill: none; stroke: #376092; stroke-width: 1.2; }
.spark circle { fill: #c00000; }
tr.p:target th, tr.p:target td { outline: 2px solid var(--sel); outline-offset: -2px; }

tr.p.hide, tbody.team.hide { display: none; }

/* sorting: headers are buttons; a sorted sheet is flat, so the team shows next to the name */
.role thead th.sortable { cursor: pointer; user-select: none; }
.role thead th.sortable:hover { background: #c9d6ec; }
.role thead th[aria-sort="descending"]::after { content: " ▼"; font-size: 9px; }
.role thead th[aria-sort="ascending"]::after { content: " ▲"; font-size: 9px; }
.role th.player .tm { display: none; color: var(--ink-3); margin-left: 5px; font-size: 11px; }
body.flat .role th.player .tm { display: inline; }
body.flat tbody.team tr.teamrow { display: none; }
body.no-opportunity [data-block="opportunity"], body.no-production [data-block="production"], body.no-results [data-block="results"] { display: none; }

/* email signup: one field, a range on the sheet like everything else */
.signup { padding: 6px 8px 8px; border-bottom: 1px solid var(--grid-dark); }
.sub__label { display: block; margin-bottom: 4px; }
.sub__row { display: flex; gap: 4px; max-width: 420px; }
.sub__input { flex: 1; min-width: 0; font: inherit; padding: 2px 6px; border: 1px solid var(--grid-dark); border-radius: 0; height: 26px; }
.sub__go { font: inherit; font-weight: 700; padding: 0 12px; height: 26px; border: 1px solid var(--sel); background: var(--sel); color: #fff; border-radius: 0; cursor: pointer; }
.sub__go:hover { background: #1a5c38; }
.sub__said { margin: 4px 0 0; }
.sub__said:empty { display: none; }
.sub__said.is-error { color: var(--bad-ink); }

/* league averages: a small range under the grid */
.league { padding: 8px 8px 10px; }
.league h2 { margin-bottom: 2px; }
.league .hint { margin: 0 0 4px; color: var(--ink-2); font-style: italic; font-size: 12px; }
.league .wrap { overflow-x: auto; }
table.lg { border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.lg th, table.lg td { border: 1px solid var(--grid); padding: 1px 8px; text-align: right; }
table.lg thead th { background: var(--head); font-weight: 700; }
table.lg tbody th { text-align: left; font-weight: 700; }

/* sheet tabs, fixed to the bottom of the window */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; height: 34px; background: var(--app); border-top: 1px solid var(--grid-dark); display: flex; align-items: flex-end; padding: 0 10px; gap: 0; overflow-x: auto; scrollbar-width: none; z-index: 5; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .lbl { color: var(--ink-3); padding: 0 8px 8px 0; white-space: nowrap; }
.tabs a { display: inline-block; padding: 5px 12px 7px; margin-right: -1px; border: 1px solid var(--grid-dark); border-bottom: none; background: #f3f3f3; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.tabs a[aria-current] { background: var(--sheet); color: var(--sel); font-weight: 700; border-bottom: 2px solid var(--sel); margin-bottom: -1px; }
.tabs a.method { margin-left: 12px; }

/* comment-style tooltip */
.tip { position: fixed; z-index: 10; max-width: 240px; padding: 5px 8px; background: var(--note-bg); color: var(--ink); border: 1px solid var(--note-border); font-size: 12px; line-height: 1.35; pointer-events: none; box-shadow: 2px 2px 0 rgba(0,0,0,.25); }
.tip b { font-weight: 700; }
.tip .row { display: flex; justify-content: space-between; gap: 12px; }
.tip .k { color: var(--ink-2); }

/* method page: a definitions sheet, the same grid as the report */
.defs .tablewrap { padding: 0; }
.defs .tablewrap + .tablewrap { margin-top: 14px; border-top: 2px solid var(--grid-dark); }
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
table.grid th, table.grid td { border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); padding: 2px 6px; vertical-align: top; text-align: left; font-weight: 400; }
table.grid thead th { background: var(--head); font-weight: 700; border-bottom: 2px solid var(--grid-dark); }
table.grid th.blk { background: var(--head-2); font-weight: 700; width: 9em; }
table.grid th.col { font-weight: 700; width: 10em; white-space: nowrap; }
table.grid td.f { width: 22em; white-space: nowrap; font-family: Consolas, "Cascadia Mono", "Courier New", monospace; font-size: 12px; }
table.grid td.what { color: var(--ink-2); }
@media (max-width: 720px) {
  table.grid td.f { white-space: normal; width: auto; }
  table.grid th.col { width: auto; white-space: normal; }
  table.grid th.blk { width: 1.4em; padding: 6px 2px; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; vertical-align: bottom; }
  table.grid thead th.blk { writing-mode: horizontal-tb; transform: none; font-size: 0; }
}

.foot { padding: 10px; color: var(--ink-3); font-size: 12px; }

@media (max-width: 720px) {
  main { padding: 6px 6px 0; }
  .top .links { gap: 10px; }
  .top .file { display: none; }
  .role th.player { min-width: 150px; }
  tr.p th.player { grid-template-columns: 22px 1fr; }
  tr.p .spark { display: none; }
  .movers { grid-template-columns: 1fr; gap: 6px 0; }
  .mv table { width: 100%; }
  .notesrow { white-space: nowrap; overflow-x: auto; }
}
@media print {
  .top, .controls, .foot, .tip, .tabs { display: none; }
  .tablewrap { overflow: visible; }
}