/* Fixture-wall stylesheet.  Rationale, history and engine lessons live
   in fixwall-css.md, parallel to this file in the repo (not deployed).
   Commentary there refers to the section names used below. */

/** Page furniture **/

/* h1 must be free to wrap: div#main is overflow-x:visible, so a nowrap
   title paints past the panel -- see fixwall2-css.md */
h1 {color:#FFE47A; font-size:1.5em; text-shadow: 1px 2px 0 black;}
h1.a {color:#FFE47A;}

div#main {
	margin: 0 auto;
	font-family: Geneva,Calibri,Tahoma,Helvetica,Arial,sans-serif;
	padding: 0.5em 1em 1em 1em;
	table-layout: fixed;
	overflow-x: auto;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    background-image: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#808080));
    background-image: -moz-linear-gradient(top, #606060, #808080);
	background-image: -ms-linear-gradient(top, #606060, #808080);
	background-image: linear-gradient(to bottom, #606060, #808080);

    -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    }

div#main h2 {color:#FFE47A; font-size:1.35em; text-shadow: 1px 2px 0 black;}
div#main h3 {color:#FFE47A; font-size:1.2em; text-shadow: 1px 2px 0 black;}

a.sea {text-decoration:none;color:inherit;}
a.sea:hover {text-decoration:inherit;color:inherit;}
a.sea:active {text-decoration:underline;color:blue;}
a.sea:focus {text-decoration:underline;color:blue;}

/* in-table links (plink/qlink, always inside a fixture table) don't
   underline on hover: the hand cursor is the affordance -- see fixwall2-css.md */
a.plink {
	display:inline;
	text-decoration:none;
	text-shadow: 1px 1px 0 black;
	color:#FFE47A;
	padding:0 2px;}
a.plink:hover {text-decoration:none;color:#FFE47A;}

a.qlink {
	display:inline;
	text-decoration:none;
	color:inherit;}
a.qlink:hover {text-decoration:none;color:#FFE47A;}

/** Fixture table **/

table.fixture {
    text-align:center;
    color: #404040;
	border-collapse:separate;
	border-spacing:0;
	overflow-x: visible;
	}

/* header */
table.fixture thead tr td  {
    background-color: #efefef;
	text-align:left;
    vertical-align:middle;
    padding: 0.6em;
    font-size:0.8em;
    }

 table.fixture thead tr th {
    padding: 0.5em;
	color: #dadada;
	text-shadow: 1px 1px 0 black;
    background-color: #808080;
    background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
    background: -moz-linear-gradient(top, #606060, #909090);
	background: -ms-linear-gradient(top, #606060, #909090);
    }

/* cells */
 table.fixture tbody td {
	vertical-align:middle;
	max-height:24px;
	text-align:center;
	white-space: nowrap;
	max-width:37px;
	padding:4px 4px;
	box-sizing:border-box; -moz-box-sizing:border-box;
    }

table.fixture tbody a {
	display:block;
	}

/* medal/rank cells: the whole cell links to the squad sheet -- a.qlink is
   inline by default; here it fills the centred cell, the cell padding moved
   onto the anchor so the click target is the whole cell */
table.fixture tbody td:has(> a.qlink) { padding: 0; }
table.fixture tbody td > a.qlink {
	display: block; box-sizing: border-box; padding: 4px;
	}

/* zebra rows */
table.fixture tbody tr:nth-child(odd) {
    background-color: #fafafa;
    }

table.fixture tbody tr:nth-child(even) {
    background-color: #efefef;
    }

/* row hover (desktop; cursor hidden by design) */
table.fixture tbody {cursor:url("../../empty.cur"),url("empty.cur"),pointer;}

table.fixture tbody td:hover  {
	color: #FFE47A;
	text-shadow: 2px 2px 2px black;
	box-shadow:inset 2px 2px 2px 2px rgba(0,0,0,0.5);
	-moz-box-shadow:inset 2px 2px 2px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow:inset 2px 2px 2px 2px rgba(0,0,0,0.5);
	}

	table.fixture tbody tr:hover td:first-child {
    color:#FFE47A;
	text-shadow: 2px 1px 2px black;
    }

	table.fixture tbody tr:hover td:nth-last-of-type(-n+4) {
    color: #FFE47A;
	text-shadow: 2px 1px 1px black;
	}

	table.fixture tbody tr:hover {
    background-color: #808080;
	background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
	background: -moz-linear-gradient(top, #606060,#909090);
	background: -ms-linear-gradient(top,#606060, #909090);
	}

/* columns: the col-1/col-2 divider sits on the FIRST cell so it stays
   put on the frozen edge mid-scroll -- see fixwall2-css.md */
table.fixture tbody td:first-child {
    padding: inherit 0.2em;
    white-space:nowrap;
	overflow-x:hidden;

	border-right: solid 1px #606060;
    }

table.fixture tbody td:last-child {
    border-right: solid 1px #303030;
    overflow-x:hidden;
	}

/* footer */
table.fixture tfoot tr td {
    text-align:left;
	color: #303030;
	padding:0.5em 0.5em 1em 0.5em;
    text-shadow: 0 1px 1px rgba(255,255,255,0.3);
	border-top: solid 1px #303030;
	 }

/** Row-header autosize (season + team walls) **/

table.season tbody td:first-child {
    text-align: left;
	overflow-x: visible;
	max-width: none;
	padding: 0;
	}

/* whole cell links: block anchor fills the cell (was inline-block = text
   only), the cell padding moved onto the anchor so the click target is the
   whole cell; the 15em cap stays on the anchor to keep column autosize (a
   cell max-width silently rewrites column sizing) -- see fixwall2-css.md */
table.season tbody td:first-child a {
	display: block; max-width: 15em; box-sizing: border-box;
	padding: 4px 0.6em 4px 4px;
	overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap;
	}

/** Column classes **/

th.team {min-width:8.2em; text-align:left; overflow-x:hidden; white-space:nowrap;}
th.sm {width:1.6em; min-width:1.6em;}
th.mid {width:2.8em; min-width:2.8em;}
th.wide {width:7.5em; min-width:6em; overflow-x:hidden; }
th.xwide{width:12.5em; min-width:6em; white-space:nowrap;}
th.gap {width:0.2em; min-width:0.2em;}

td.gap {width:0.2em; border-right:solid 1px #303030; cursor:default;}
td.empty {height:5px; border-left:none !important; cursor:default; }

/* gap rows show no col-1 divider; first-child only (the colspan cell is
   also :last-child and keeps the right frame line) */
td.empty:first-child {border-right:none !important;}
td.club {text-align:left !important; white-space:nowrap; padding-left:1em;}

/* escapes must OUTRANK the blanket tbody td max-width rule (0,1,3); whole
   cell links (block anchor fills the cell, padding moved onto the anchor) */
table.fixture tbody td.club {
	overflow-x:visible; max-width:none; padding:0;}
table.fixture tbody td.club a {
	display:block; max-width:15em; box-sizing:border-box;
	padding:4px 0.6em 4px 4px;
	overflow-x:hidden; text-overflow:ellipsis; white-space:nowrap;
	}

/* league walls size the row-header column to the longest name in BOTH
   directions: width must be MAX-CONTENT, not auto -- see fixwall2-css.md */
table.fixture:has(tbody td.club) { width: max-content !important; }
table.fixture:has(tbody td.club) > colgroup > col:first-child { width: auto !important; }
td.spanner {cursor:default;}

/** Result cells **/

td.h {font-weight:bold;}
td.a {font-weight:normal;}
td.n {font-style:italic;}

td.w {background-color:#819FF7;
	background: -webkit-gradient(linear, left top, left bottom, from(#748FDE), to(#8EA9F8));
	background: -moz-linear-gradient(top,#748FDE,#8EA9F8);
	background: -ms-linear-gradient(top,#748FDE,#8EA9F8);}

td.d {background-color:#CFCFCF;
	background: -webkit-gradient(linear, left top, left bottom, from(#BABABA), to(#D4D4D4));
	background: -moz-linear-gradient(top,#BABABA,#D4D4D4);
	background: -ms-linear-gradient(top,#BABABA,#D4D4D4);}

td.l {background-color:#F78181;
	background: -webkit-gradient(linear, left top, left bottom, from(#DE7474), to(#F88E8E));
	background: -moz-linear-gradient(top,#DE7474,#F88E8E);
	background: -ms-linear-gradient(top,#DE7474,#F88E8E);}

/* legacy pso (ring = shootout, fill = regulation result) */
#dl {background-color:#CFCFCF;
	background: -webkit-gradient(linear, left top, left bottom, from(#BABABA), to(#D4D4D4));
	background: -moz-linear-gradient(top,#BABABA,#D4D4D4);
	background: -ms-linear-gradient(top,#BABABA,#D4D4D4);
	border:4px solid #F78181;
	padding:0;}

#dw {background-color:#CFCFCF;
	background: -webkit-gradient(linear, left top, left bottom, from(#BABABA), to(#D4D4D4));
	background: -moz-linear-gradient(top,#BABABA,#D4D4D4);
	background: -ms-linear-gradient(top,#BABABA,#D4D4D4);
	border:4px solid #819FF7;
	padding:0;}

#wl {background-color:#819FF7;
	background: -webkit-gradient(linear, left top, left bottom, from(#748FDE), to(#8EA9F8));
	background: -moz-linear-gradient(top,#748FDE,#8EA9F8);
	background: -ms-linear-gradient(top,#748FDE,#8EA9F8);
	border:4px solid #F78181;
	padding:0;}

#ww {background-color:#819FF7;
	background: -webkit-gradient(linear, left top, left bottom, from(#748FDE), to(#8EA9F8));
	background: -moz-linear-gradient(top,#748FDE,#8EA9F8);
	background: -ms-linear-gradient(top,#748FDE,#8EA9F8);
	border:4px solid #819FF7;
	padding:0;}

#lw {background-color:#F78181;
	background: -webkit-gradient(linear, left top, left bottom, from(#DE7474), to(#F88E8E));
	background: -moz-linear-gradient(top,#DE7474,#F88E8E);
	background: -ms-linear-gradient(top,#DE7474,#F88E8E);
	border:4px solid #819FF7;
	padding:0;}

#ll {background-color:#F78181;
	background: -webkit-gradient(linear, left top, left bottom, from(#DE7474), to(#F88E8E));
	background: -moz-linear-gradient(top,#DE7474,#F88E8E);
	background: -ms-linear-gradient(top,#DE7474,#F88E8E);
	border:4px solid #F78181;
	padding:0;}

/** Medals **/

td.gold {background-color:#D4AF37;
	background: -webkit-gradient(linear, left top, left bottom, from(#D4AF37), to(#DDBF5F));
	background: -moz-linear-gradient(top,#D4AF37,#DDBF5F);
	background: -ms-linear-gradient(top,#D4AF37,#DDBF5F);
	text-shadow:none;
	color:inherit;}
td.silver {background-color:#C0C0C0;
	background: -webkit-gradient(linear, left top, left bottom, from(#C0C0C0), to(#DDDDDD));
	background: -moz-linear-gradient(top,#C0C0C0,#DDDDDD);
	background: -ms-linear-gradient(top,#C0C0C0,#DDDDDD);
	text-shadow:none;
	color:inherit;}
td.bronze {background-color:#B89470;
	background: -webkit-gradient(linear, left top, left bottom, from(#B89470), to(#C6A98D));
	background: -moz-linear-gradient(top,#B89470,#C6A98D);
	background: -ms-linear-gradient(top,#B89470,#C6A98D);
	text-shadow:none;
	color:inherit;}

/** Tap/hover tooltips (all devices) **/
/* Bubble anchored to the cell corner, rightward by default, leftward in
   the last six columns; cell data lives in DATA-TITLE (dual-read with
   title for stragglers); linked cells bubble on hover devices only.
   Full design + history: fixwall2-css.md.  Assumes :has(). */

/* core: every device */
table.fixture td:is([title],[data-title]),
table.fixture th:is([title],[data-title]) { position: relative; }

/* a bubbled cell must not clip or scroll its own ::after; the crop moves
   to the block anchor for the hover -- see fixwall2-css.md */
table.fixture td:is([title],[data-title]):hover,
table.fixture th:is([title],[data-title]):hover { overflow: visible; }
table.fixture tbody td:is([title],[data-title]):hover > a { overflow-x: clip; }

/* the bubble box is shared; content source per attribute */
table.fixture td[title]:hover::after,
table.fixture th[title]:hover::after { content: attr(title); }
table.fixture td[data-title]:hover::after,
table.fixture th[data-title]:hover::after { content: attr(data-title); }
table.fixture td:is([title],[data-title]):hover::after,
table.fixture th:is([title],[data-title]):hover::after {
  position: absolute;
  top: 100%; right: auto; left: 0;
  z-index: 200;
  pointer-events: none;
  background: rgba(32,32,32,0.95);
  color: #fff;
  border-radius: 5px;
  box-shadow: 1px 2px 6px rgba(0,0,0,0.4);
  padding: 6px 9px;
  font: normal 13px/1.45 -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  text-shadow: none;
  white-space: pre-wrap;
  width: max-content;
  max-width: 320px;
}

/* PSO ring cells anchor to the PADDING box, 4px inside the ring */
table.fixture td[id]:is([title],[data-title]):hover::after {
  top: calc(100% + 4px);
  left: -4px;
}

/* leftward flip: last six columns, capped at half the row; cells with a
   later [colspan] sibling excluded -- see fixwall2-css.md */
table.fixture td:is([title],[data-title]):not(:has(~ [colspan])):is(:nth-last-child(1):nth-child(n+2),:nth-last-child(2):nth-child(n+3),:nth-last-child(3):nth-child(n+4),:nth-last-child(4):nth-child(n+5),:nth-last-child(5):nth-child(n+6),:nth-last-child(6):nth-child(n+7)):hover::after,
table.fixture th:is([title],[data-title]):not(:has(~ [colspan])):is(:nth-last-child(1):nth-child(n+2),:nth-last-child(2):nth-child(n+3),:nth-last-child(3):nth-child(n+4),:nth-last-child(4):nth-child(n+5),:nth-last-child(5):nth-child(n+6),:nth-last-child(6):nth-child(n+7)):hover::after {
  right: 0; left: auto;
}
table.fixture td[id]:is([title],[data-title]):not(:has(~ [colspan])):is(:nth-last-child(1):nth-child(n+2),:nth-last-child(2):nth-child(n+3),:nth-last-child(3):nth-child(n+4),:nth-last-child(4):nth-child(n+5),:nth-last-child(5):nth-child(n+6),:nth-last-child(6):nth-child(n+7)):hover::after {
  right: -4px; left: auto;
}

/* the page panel must not clip bubbles (only clip context for the
   unwrapped cup-page subtables) */
div#main { overflow-x: visible; }

/* desktop (mouse) extras: clip below the table, 130px landing reserve
   on the LAST wall wrapper; interior walls escape the clip on hover
   with the touch pair (no linked-cell disarm: desktop bubbles linked
   cells too) -- rationale and history: fixwall2-css.md */
@media (hover: hover) and (pointer: fine) {
  div[style*="overflow-x"]:has(> table.fixture) {
    overflow-y: hidden;
  }
  div[style*="overflow-x"]:has(> table.fixture):not(:has(~ div[style*="overflow-x"] > table.fixture)) {
    padding-bottom: 130px;
  }
  div[style*="overflow-x"]:has(~ div[style*="overflow-x"] > table.fixture):has(> table.fixture tbody tr:nth-last-child(-n+7) > td:is([title],[data-title]):hover) {
    padding-bottom: 144px;
    margin-bottom: -144px;
  }
}

/* touch extras, duplicated under both gates -- keep in sync */
@media (any-pointer: coarse) {
  table.fixture { touch-action: manipulation; }
  table.fixture td:is([title],[data-title]),
  table.fixture th:is([title],[data-title]) {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }

  /* linked titled cells navigate on tap: bubble is hover-device-only */
  table.fixture td:is([title],[data-title]):has(a):hover::after,
  table.fixture th:is([title],[data-title]):has(a):hover::after { content: none; }

  /* owner mark; no z-index: the cell must slide UNDER the frozen column */
  table.fixture td:is([title],[data-title]):not(:has(a)):hover,
  table.fixture th:is([title],[data-title]):not(:has(a)):hover {
    outline: 2px dotted black;
    outline-offset: -2px;
  }

  /* row-owner mark; single-level :has() only (nesting drops the rule) */
  table.fixture tbody tr:has(> td:is([title],[data-title]):hover) > td:first-child {
    outline: 2px dotted black;
    outline-offset: -2px;
  }

  /* clip escape, armed only for bottom-7-row unlinked bubbles (narrow
     trigger; self-canceling pair) -- see fixwall2-css.md */
  div[style*="overflow-x"]:has(> table.fixture tbody tr:nth-last-child(-n+7) > td:is([title],[data-title]):hover) {
    padding-bottom: 144px;
    margin-bottom: -144px;
  }
  div[style*="overflow-x"]:has(> table.fixture tbody tr:nth-last-child(-n+7) > td:is([title],[data-title]):hover a) {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* row-hover repaint off on touch; zebra restored explicitly */
  table.fixture tbody tr:hover { background: none; }
  table.fixture tbody tr:nth-child(odd):hover { background-color: #fafafa; }
  table.fixture tbody tr:nth-child(even):hover { background-color: #efefef; }
  table.fixture tbody tr:hover td:first-child,
  table.fixture tbody tr:hover td:nth-last-of-type(-n+4) {
    color: inherit;
    text-shadow: none;
  }
}
/* -- second gate: same content as above, keep in sync -- */
@supports (-webkit-touch-callout: none) {
  table.fixture { touch-action: manipulation; }
  table.fixture td:is([title],[data-title]),
  table.fixture th:is([title],[data-title]) {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }
  /* linked titled cells navigate on tap: bubble is hover-device-only */
  table.fixture td:is([title],[data-title]):has(a):hover::after,
  table.fixture th:is([title],[data-title]):has(a):hover::after { content: none; }
  /* owner mark; no z-index: the cell must slide UNDER the frozen column */
  table.fixture td:is([title],[data-title]):not(:has(a)):hover,
  table.fixture th:is([title],[data-title]):not(:has(a)):hover {
    outline: 2px dotted black;
    outline-offset: -2px;
  }
  /* row-owner mark; single-level :has() only (nesting drops the rule) */
  table.fixture tbody tr:has(> td:is([title],[data-title]):hover) > td:first-child {
    outline: 2px dotted black;
    outline-offset: -2px;
  }
  /* clip escape, armed only for bottom-7-row unlinked bubbles (narrow
     trigger; self-canceling pair) -- see fixwall2-css.md */
  div[style*="overflow-x"]:has(> table.fixture tbody tr:nth-last-child(-n+7) > td:is([title],[data-title]):hover) {
    padding-bottom: 144px;
    margin-bottom: -144px;
  }
  div[style*="overflow-x"]:has(> table.fixture tbody tr:nth-last-child(-n+7) > td:is([title],[data-title]):hover a) {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  /* row-hover repaint off on touch; zebra restored explicitly */
  table.fixture tbody tr:hover { background: none; }
  table.fixture tbody tr:nth-child(odd):hover { background-color: #fafafa; }
  table.fixture tbody tr:nth-child(even):hover { background-color: #efefef; }
  table.fixture tbody tr:hover td:first-child,
  table.fixture tbody tr:hover td:nth-last-of-type(-n+4) {
    color: inherit;
    text-shadow: none;
  }
}

/** Frozen row-header column **/
/* Pinned at the wall's left edge; inert on walls that fit.  left:0
   needs NO compensation for the touch clip escape (sticky insets
   measure from the CONTENT edge) -- see fixwall2-css.md */
table.fixture tbody > tr > td:first-child,
table.fixture thead > tr > :is(th,td):first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}
/* sticky cells need their own parity backgrounds (zebra lives on the TR);
   hover gradient per parity to outrank them */
table.fixture tbody tr:nth-child(odd) td:first-child { background-color: #fafafa; }
table.fixture tbody tr:nth-child(even) td:first-child { background-color: #efefef; }
table.fixture tbody tr:nth-child(odd):hover td:first-child,
table.fixture tbody tr:nth-child(even):hover td:first-child {
  background-color: #808080;
  background: -webkit-gradient(linear, left top, left bottom, from(#606060), to(#909090));
  background: -moz-linear-gradient(top, #606060, #909090);
  background: -ms-linear-gradient(top, #606060, #909090);
}

/* touch, both gates: frozen-cell leg of the row-hover repaint-off */
@media (any-pointer: coarse) {
  table.fixture tbody tr:nth-child(odd):hover td:first-child { background: #fafafa; }
  table.fixture tbody tr:nth-child(even):hover td:first-child { background: #efefef; }
}
@supports (-webkit-touch-callout: none) {
  table.fixture tbody tr:nth-child(odd):hover td:first-child { background: #fafafa; }
  table.fixture tbody tr:nth-child(even):hover td:first-child { background: #efefef; }
}

/** Sticky footer **/
/* dual-inset footpin pins tfoot content on-screen across the scroll
   range; inert without the span markup.  0.5em insets match the tfoot
   padding so pin-engage causes no jump -- see fixwall2-css.md */
table.fixture tfoot td > span.footpin {
  display: inline-block;
  position: sticky;
  left: 0.5em;
  right: 0.5em;
}