/* pub.css — the public tournament page (t.html) only, on top of td.css:
   the schedule's Now view and tinted winners, the stats layout switch,
   the buzzpoints track, and the phone layout of the tabs, chips and
   category tables. Colours are td.css variables, so dark mode follows. */

/* page tabs never break a word: they scroll sideways on a narrow phone */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; flex: none; }

/* ---------- schedule ---------- */
.schedviews select { max-width: 100%; }

/* a team's line of a game; the winner's bold, the loser's muted */
.gl {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 1px 6px; margin: 1px -6px; border-radius: 6px;
}
.gl .s { font-variant-numeric: tabular-nums; }
.gl.won { color: var(--fg); font-weight: 600; }
.gl.lost { color: var(--muted); }
.gl.ph { color: var(--muted); font-style: italic; }
.sched .gl { min-width: 14ch; }
/* All rounds: a round's first team lines on one table row, its second
   team lines on the next, so a wrapped name keeps the lines level */
.sched td.la { border-bottom: 0; padding-bottom: 1px; }
.sched td.lb { padding-top: 1px; }
/* one line a name; a cut one is underlined, its full name in .nametip */
.sched .gl .t { white-space: nowrap; }
.gl .cut { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; cursor: default; }
.gl .cut:focus-visible { outline: 2px solid var(--act); outline-offset: 1px; border-radius: 3px; }
.nametip {
  position: fixed; z-index: 50; pointer-events: none; white-space: nowrap;
  background: var(--fg); color: var(--bg); font-size: 13px; font-weight: 500;
  padding: 4px 8px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* a played game's score links to its box score */
.gl a.s { color: inherit; text-decoration: none; }
.gl a.s:hover, .gl a.s:focus-visible { text-decoration: underline; }
.wtag {
  background: var(--win-bg); color: var(--win-fg); font-weight: 600;
  border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}
tr.nowrow td { background: var(--sel); }

/* Now: current round and the next, a card per pool */
.nowgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; margin-top: 4px; }
.nowhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nowhead h3 { font-size: 17px; font-weight: 600; }
.nowtag { font-size: 13px; font-weight: 600; color: var(--muted); }
.nowtag.live { color: var(--warn); }
.poolname { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.gcard { background: var(--card); border-radius: 12px; padding: 0 14px; margin-top: 6px; }
.gg { padding: 10px 0; border-top: 1px solid var(--line); }
.gg:first-child { border-top: none; }
.groom { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.byes { font-size: 13px; margin-top: 8px; }

/* ---------- stats ---------- */
.statsbar { align-items: center; }
.layoutpick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.layoutpick .chips { flex-wrap: nowrap; }
.poolhead { font-size: 17px; font-weight: 600; margin: 18px 0 4px; }
.stagehead { font-size: 20px; font-weight: 600; margin: 32px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.stagehead:first-of-type { margin-top: 8px; }
.stagehead + .poolhead, .stagehead + .tablewrap, .stagehead + .nfade { margin-top: 10px; }
.poolhead:first-child { margin-top: 4px; }
/* New layout, pools: the Table | Grid switch and the grid (pubview.js poolGrid) */
.poolbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 10px; }
.poolbar .chip { font-size: 13px; }
.poolsep { width: 1px; align-self: stretch; background: var(--line); margin: 0 2px; }
.pgridwrap { margin-bottom: 4px; }
.pgrid { border-collapse: separate; border-spacing: 2px; width: auto; font-size: 12px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pgrid th, .pgrid td { border: none; padding: 0; text-align: center; }
.pgrid th { font-weight: 500; color: var(--muted); font-size: 12px; text-transform: none; letter-spacing: 0; }
.pgrid th.colh { height: 30px; vertical-align: bottom; padding-bottom: 3px; white-space: nowrap; }
.pgrid th.rowh { text-align: right; padding-right: 6px; white-space: nowrap; font-size: 13px; }
.pgrid td { width: 62px; height: 44px; border-radius: 6px; background: color-mix(in srgb, var(--fg) 5%, var(--bg)); color: var(--muted); }
.pgrid td a { display: block; color: inherit; }
.pgrid td a:hover { text-decoration: none; }
.pgrid td:has(a):hover { box-shadow: inset 0 0 0 1.5px var(--link); }
.pgrid td.won { background: var(--win-bg); color: var(--win-fg); font-weight: 600; }
.pgrid td.self { background: color-mix(in srgb, var(--fg) 16%, var(--bg)); }
.pgrid td.todo { background: none; box-shadow: inset 0 0 0 1px var(--line); font-size: 11px; }
.pgrid td .opp { display: block; font-weight: 400; opacity: 0.8; }
.pgrid td.rec { width: 48px; background: none; color: var(--fg); font-weight: 600; }
.pgrid td.pghead { width: auto; height: auto; background: none; border-radius: 0; text-align: left; color: var(--fg); }
.pgrid tbody:first-child .poolhead { margin-top: 4px; }
@media (max-width: 560px) {
  .pgrid td { width: 46px; height: 40px; }
  .pgrid th.rowh { font-size: 12px; white-space: normal; max-width: 9em; }
}
/* New layout: a team, player or game is a section; a followed link's
   target gets a bar down its left and a link back */
.nsec { margin: 0 0 30px; }
.nhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.nhead .meta { font-size: 13px; font-weight: normal; color: var(--muted); }
.nback { font-size: 14px; font-weight: normal; white-space: nowrap; }
.nmark { border-left: 4px solid var(--link); padding-left: 10px; margin-left: -14px; }
.nbox { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: flex-start; }
.nbox > .nfade { flex: 1 1 300px; min-width: 0; }
/* compact tables, fit the way the Classic report's are: only as wide as
   their content, a bold full-color header, 5px cells at normal line
   height, rows striped from the first one, Classic's columns in its order
   with a gap before each group, the row under the pointer highlighted. Every cell paints its own background so sticky cells
   cover what scrolls under them. */
.nstats { width: auto; max-width: none; border-collapse: separate; border-spacing: 0; }
.nstats th {
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700;
  color: var(--fg); padding: 5px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.nstats thead { position: sticky; top: 0; z-index: 2; }
/* a number column's header sorts its table (newstats.js sortTables) */
.sorth {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; text-align: inherit; white-space: nowrap;
}
.sorth:hover { color: var(--link); }
.sorth:focus-visible { outline: 2px solid var(--act); outline-offset: 2px; border-radius: 3px; }
th[aria-sort] .sorth { color: var(--link); }
th[aria-sort="descending"] .sorth::after { content: " \25BE"; }
th[aria-sort="ascending"] .sorth::after { content: " \25B4"; }
/* Classic's row height: 11pt-ish text, a tight line, 5px cells */
.nstats { font-size: 14px; line-height: 1.15; }
.nstats .g0 { padding-left: 16px; }
/* alignment is Classic's: numbers and their headers right, text (names,
   ranks, rounds, results, scores) left */
.nstats td { padding: 5px; border-bottom: none; white-space: nowrap; background: var(--bg); }
/* a neutral stripe, mixed from the text color so it reads the same in both themes */
.nstats tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--fg) 6%, var(--bg)); }
.nstats td.nrkcol, .nstats .nrk { color: var(--fg); }
@media (hover: hover) {
  .nstats tbody tr:hover td { background: color-mix(in srgb, var(--link) 14%, var(--bg)); }
}
.nstats tr.ntot td { font-weight: 600; background: var(--bg); border-top: 1px solid var(--muted); }
.nstats .nrk { display: none; }
/* a long team name wraps rather than push the numbers out of view */
.nstats td.teamcol, .nstats td.nstick { white-space: normal; min-width: 12ch; max-width: 20em; }
/* a UG or DII tag sits at the name cell's right edge, so the tags line up
   down the column (nobody is both, so one place holds either) */
.nstats td.name .ntag { float: right; margin: 1px 0 0 10px; }
.nfade { position: relative; min-width: 0; }
.nfade + .nfade { margin-top: 12px; }
.tablewrap.nfit { overflow: visible; }
.tablewrap.nscroll { overflow: auto; max-height: 78vh; }
/* the first column stays while the numbers scroll */
.nscroll .nstats .nstick { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); }
.nscroll .nstats thead .nstick { z-index: 3; }
.nfade.more::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg));
}
.nbonus { margin-top: 6px; }
.njump { margin-bottom: 4px; }

/* on a phone a player's team rides under the name instead of a column */
/* a set's site names are short: no room held for a long name */
th.nsite, td.nsite { min-width: 0; }
.subteam { display: none; }

/* ---------- buzzpoints: where each tossup's buzzes landed ---------- */
.btrack { position: relative; display: inline-block; vertical-align: middle; width: 180px; height: 12px; }
.btrack::before {
  content: ''; position: absolute; left: 0; right: 0; top: 5px;
  height: 2px; border-radius: 2px; background: var(--line);
}
.bdot {
  position: absolute; top: 1px; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 99px; box-sizing: border-box;
  border: 2px solid var(--ok); background: var(--ok);
}
.bdot.pow { border-color: var(--link); background: var(--link); }
.bdot.neg { border-color: var(--bad); background: var(--bg); }
.bdot.zero { border-color: var(--muted); background: var(--bg); }
.deadtag { font-size: 12px; font-weight: 600; margin-right: 8px; vertical-align: middle; }
details.qd .qdmeta.track { line-height: 20px; }

@media (max-width: 640px) {
  .tab { padding: 7px 10px; }
  /* filter chips: one row that swipes, rather than four that wrap */
  .chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { padding: 7px 12px; }
  .nowgrid { grid-template-columns: minmax(0, 1fr); }
  .schedviews select { flex: 1 1 100%; }
  .subteam { display: block; font-size: 13px; color: var(--muted); }
  /* the rank or round rides in the sticky cell instead of its own column */
  .nstats .nrkcol { display: none; }
  .nstats td.nstick:has(.nrk) { padding-left: calc(5px + 2em); }
  .nstats .nrk {
    display: block; position: absolute; left: 5px; width: 1.8em;
    color: var(--fg); font-variant-numeric: tabular-nums;
  }
  .nstats td.nstick { position: relative; }
  .nscroll .nstats .nstick { position: sticky; min-width: 36vw; max-width: 52vw; white-space: normal; }
  th.teamcol, td.teamcol { display: none; }
  th.name, td.name { min-width: 0; }
  .nmark { padding-left: 8px; margin-left: -12px; }
  /* the track takes its own full-width line under the answer */
  /* summary numbers and the track take their own line under the answer
     instead of floating into the next row */
  details.qd .qdmeta { float: none; display: block; margin: 4px 0 0; }
  details.qd .qdmeta.track { display: flex; align-items: center; margin: 6px 0 2px; }
  details.qd .qdmeta.track .btrack { flex: 1; width: auto; }
}

/* Scoreboard scoresheets: the game's tables stacked on the left, the
   scoresheet (td.css .sx) on the right, which drops below them on a phone. */
.slay { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-start; }
.sleft { flex: 0 1 auto; min-width: 0; }
.sleft .nbox { flex-direction: column; }
.sleft .nbox > .nfade { flex: none; }
.sleft .nstats th.nstick, .sleft .nstats td.nstick { white-space: normal; min-width: 10ch; max-width: 13em; }
.slay > .sxwrap { flex: none; width: min-content; max-width: 100%; }
.sxtoggle { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sxtoggle input { font-size: 13px; padding: 3px 8px; }
/* the Scoresheets switch */
.sw { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; color: var(--fg);
  background: none; border: 0; padding: 2px 0; cursor: pointer; }
.sw:hover { border: 0; }
.sw .swtrack { position: relative; width: 30px; height: 17px; border-radius: 99px; background: var(--pick-line); transition: background .15s; }
.sw .swknob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .15s; }
.sw.on .swtrack { background: var(--ok); }
.sw.on .swknob { left: 15px; }
.sw .swstate { font-size: 12px; color: var(--muted); min-width: 3.6em; text-align: left; }
.sw.locked, .sw .swlock { color: var(--muted); }
.sw.locked .swtrack { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .sw .swtrack, .sw .swknob { transition: none; } }
.sxwait { font-size: 13px; margin: 8px 0 0; }

/* a player list: a button, and the list with its search box under it
   (pubview.js pickerHtml) */
.pick { position: relative; display: inline-block; width: min(100%, 38ch); }
.pickbtn {
  width: 100%; text-align: left; color: var(--fg); padding: 6px 30px 6px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pickbtn:hover { border-color: var(--line); }
.pickbtn:focus-visible, .pickbtn[aria-expanded="true"] { outline: none; border-color: var(--link); }
.pick::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px;
  margin-top: -5px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); pointer-events: none;
}
.pickpanel {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); padding: 6px;
}
.pickpanel input { width: 100%; }
.picklist { list-style: none; max-height: min(320px, 55vh); overflow-y: auto; margin-top: 4px; }
.picklist ul { list-style: none; }
.picklist .pickteam { padding: 6px 8px 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.picklist li[role="group"] + li[role="group"] .pickteam { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.picklist [role="option"], .picklist .none { padding: 4px 8px 4px 22px; border-radius: 6px; cursor: pointer; }
.picklist .none { padding-left: 8px; cursor: default; }
.picklist [role="option"].on { background: var(--sel); }
.picklist [role="option"][aria-selected="true"] { font-weight: 600; }
@media (max-width: 640px) { .pick { width: 100%; } }

/* ---------- a set's sites table (setview.js renderSitebar) ---------- */
.sitebar { margin: 10px 0 14px; }
.sitetable td.sitepick, .sitetable th.sitepick { width: 1px; padding-right: 2px; }
.sitetable input { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--act); cursor: pointer; }
.sitetable input:disabled { cursor: default; }
.sitetable tr.off td { color: var(--muted); }
.sitetable tr.off td a { color: var(--muted); }