/*
 * A cup post: ages, and in every age its leagues as short tables. No mock-up;
 * the medal colours of the places are those of the front page's rail.
 */

.fwd-cupage{scroll-margin-top:16px}

/* the leagues of an age side by side; one column on a phone */
.fwd-lcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hair)}
.fwd-lc{min-width:0;padding:4px 0 8px;border-bottom:1px solid var(--hair-2)}
.fwd-lc:nth-child(odd){border-right:1px solid var(--hair-2)}
/* an odd one out spans the row instead of leaving a hole */
.fwd-lc:last-child:nth-child(odd){grid-column:1 / -1;border-right:0}

.fwd-lc__hd{display:flex;align-items:baseline;gap:10px;padding:12px 20px 8px}
#content .fwd-lc h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.015em}
.fwd-lc h3 span{margin-left:4px;font-size:12.5px;font-weight:500;color:var(--faint)}
a.fwd-lc__hd:hover h3{color:var(--gold-ink)}
.fwd-lc__st{margin-left:auto;font-size:12.5px;color:var(--faint);white-space:nowrap}

/* the short table */
/* Rookie draws a frame around every table */
.fwd-lt{width:100%;border-collapse:collapse;border:0;margin:0;background:none;font-variant-numeric:tabular-nums}
.fwd-lt tr{background:none}
.fwd-lt th,.fwd-lt td{border:0;padding:5px 6px;text-align:center;vertical-align:middle;background:none}
.fwd-lt th{font-size:12.5px;font-weight:600;color:var(--faint);padding-top:2px;padding-bottom:4px}
.fwd-lt td{font-size:14px;color:var(--ink-2);border-top:1px solid var(--hair-2)}
.fwd-lt th:first-child,.fwd-lt td:first-child{padding-left:20px}
.fwd-lt th:last-child,.fwd-lt td:last-child{padding-right:20px}
.fwd-lt th:nth-child(n+3),.fwd-lt td:nth-child(n+3){width:34px}
.fwd-lt__p{width:18px;font-weight:700;color:var(--faint)}
td.fwd-lt__p--m1{color:var(--gold-ink)}
td.fwd-lt__p--m2{color:#6B7489}
td.fwd-lt__p--m3{color:#9A5F33}
.fwd-lt .fwd-lt__c{text-align:left;width:auto}
.fwd-lt__c a{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ink);font-weight:600}
.fwd-lt__c a:hover{color:var(--gold-ink)}
.fwd-lt__c span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fwd-lt__c img,.fwd-cup__none{width:20px;height:20px;object-fit:contain;flex:0 0 auto}
.fwd-lt td.fwd-lt__o{font-weight:800;color:var(--ink)}
.fwd-lt tbody tr:hover td{background:var(--surface-2)}

/* a play-off: round by round; both teams alike, the score tells who won */
.fwd-ko{padding:0 20px 6px}
.fwd-ko__rd{padding:8px 0 4px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.fwd-ko__m{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;
  padding:5px 8px;margin:0 -8px;border-radius:6px;font-size:14px}
.fwd-ko__m:hover{background:var(--surface-2)}
.fwd-ko__t{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fwd-ko__t--b{text-align:left}
.fwd-ko__t:first-child{text-align:right}
.fwd-ko__sc{min-width:52px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.fwd-ko__sc small{display:block;font-size:11px;font-weight:500;color:var(--faint)}

.fwd-lc__more{display:inline-flex;align-items:center;gap:5px;margin:8px 20px 4px;font-size:12.5px;font-weight:700;color:var(--navy-2)}
.fwd-lc__more:hover{color:var(--gold-ink)}

/* the first stage, folded */
.fwd-stage1 > summary{display:flex;align-items:center;gap:8px;padding:14px 20px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:700;color:var(--ink-2)}
.fwd-stage1 > summary::-webkit-details-marker{display:none}
.fwd-stage1 > summary:hover{background:var(--surface-2)}
.fwd-stage1 > summary span{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--faint)}
.fwd-stage1 > summary .fwd-chev{transition:transform .15s}
.fwd-stage1[open] > summary .fwd-chev{transform:rotate(90deg)}

@media (max-width:760px){
  .fwd-lcs{grid-template-columns:1fr}
  .fwd-lc:nth-child(odd){border-right:0}
}

@media (max-width:620px){
  .fwd-lc__hd{padding:12px 16px 8px}
  .fwd-lt th:first-child,.fwd-lt td:first-child{padding-left:16px}
  .fwd-lt th:last-child,.fwd-lt td:last-child{padding-right:16px}
  .fwd-ko{padding:0 16px 6px}
  .fwd-lc__more{margin:8px 16px 4px}
  .fwd-stage1 > summary{padding:14px 16px}
}