/* Expert Model page (/{league}/expert): only what site.css lacks.
   Colours, fonts and easing are the tokens of site.css. Shared classes are
   used as they are; every rule here is keyed on a class of this page (xm-). */

/* ---------- layout ---------- */
/* today's picks, with the record beside them on a wide screen */
.xm-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; padding-top: 12px; }
.xm-lead > .mhead { grid-column: 1 / -1; }
.xm-side { min-width: 0; margin-top: 16px; }
@media (min-width: 1080px) {
  .xm-lead { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .xm-side { margin-top: 0; }
}
@media (min-width: 1080px) and (min-height: 700px) {
  .xm-side { position: sticky; top: 84px; }
}
.xm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 14px; }
.xm-grid.xm-now { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }

/* ---------- the pick card ---------- */
.xm-card { display: flex; flex-direction: column; }
.xm-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
/* confidence: the card's main figure, a ring that fills to the number out of 100 */
.xm-conf { display: grid; justify-items: center; gap: 6px; align-self: start; }
.xm-ring { --s: 0; position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px; flex: none; }
.xm-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.xm-trk { fill: none; stroke: rgba(var(--text-a), .09); stroke-width: 6; }
.xm-arc { fill: none; stroke: var(--info); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--s)); }
.xm-num { position: relative; font: 800 25px/1 var(--f-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--text); }
.xm-none .xm-num { color: var(--muted); }
.xm-cap { font: 700 11px/1 var(--f-label); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
/* the reason and the result close the card, edge to edge */
.xm-foot { margin: auto -16px -14px; }
.xm-foot .xm-why { margin: 0; }
.xm-why .xm-reason { white-space: pre-line; }
.xm-foot .xm-result { margin: 0; position: relative; }
/* the locked card of the non-member view: as tall as it needs, not as its row */
.xm-locked { align-self: start; }
.xm-locked .xm-join { margin: 0; }
.xm-ghost .redact { width: 8em; }
.xm-locked .fine { margin: 0; }

/* ---------- record ---------- */
.xm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xm-kpis div:last-child { grid-column: auto; }
@media (min-width: 560px) and (max-width: 1079px) {
  .xm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.xm-kpis dd.pos { color: var(--win); }
.xm-spark { display: block; width: 100%; height: 64px; overflow: visible; }
.xm-spark-zero { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.xm-spark-area { fill: rgba(var(--info-a), .1); stroke: none; }
.xm-spark-line { fill: none; stroke: var(--info); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.xm-spark-end { fill: none; stroke: var(--info); stroke-width: 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.xm-splits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 16px; align-items: start; }
.xm-tbl th:first-child { white-space: normal; }
.xm-tbl tbody th small { display: block; margin: 2px 0 0; }
@media (max-width: 520px) {
  .tbl.xm-tbl { font-size: 14px; }
  .tbl.xm-tbl th, .tbl.xm-tbl td { padding: 7px 5px; }
  .tbl.xm-tbl th:first-child { padding-left: 0; }
  .tbl.xm-tbl td:last-child, .tbl.xm-tbl th:last-child { padding-right: 0; }
}

/* ---------- past picks ---------- */
/* a day's units keep their lower-case u */
.xm-grid .grp span { text-transform: none; }
.xm-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.xm-more:empty { display: none; }
.xm-more p { margin: 0; font: 500 13.5px/1.3 var(--f-label); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- motion ---------- */
/* Entrances sit behind html.anim, which the page script adds only when motion
   is allowed. A card without the entrance class is simply shown. */
html.anim .xm-card.in { animation: xm-rise .44s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes xm-rise { from { opacity: 0; transform: translateY(14px); } }
/* the confidence ring fills once its card is in; the page script counts the
   number up over the same stretch */
html.anim .xm-card.in .xm-arc { animation: xm-fill .95s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 55ms + 160ms); }
@keyframes xm-fill { from { stroke-dashoffset: 100; } }