/* ==================================================================
   MATCHUP CARD -- 8.5x11, one offense against the defense it faces.

   Distinct from matchup.css, which dresses the Flip Card (11x17
   landscape, two pages). Different artifact, different sheet, so the
   class prefix here is mc- and never mu-.

   Every number on this sheet is published by the league, so the design
   leans quiet: the ranks and the gap ARE the content, and nothing
   should compete with them. Colour is used exactly twice -- data blue
   for values, one hot accent for the gap that decides the game.
   ================================================================== */

.mc-pad { padding: 18px 0 40px; }
.mc-pad *, .mc-page * { box-sizing: border-box; }

/* ---- toolbar ---- */
.mc-toolbar {
  display: flex; align-items: center; gap: 12px;
  max-width: 816px; margin: 0 auto 14px; padding: 0 4px;
}
.mc-toolbar-ttl {
  font-family: var(--font-display, "Oswald", sans-serif);
  font-size: 15px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #e8eaed; flex: 1 1 auto;
}
.mc-btn {
  font-family: var(--font-display, "Oswald", sans-serif);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 4px; cursor: pointer;
  background: #B68A4E; color: #16181c; border: 0;
}
.mc-btn:hover { filter: brightness(1.08); }
.mc-btn[disabled] { opacity: .45; cursor: default; filter: none; }

/* ---- blank / error state: always says WHY ---- */
.mc-blank {
  max-width: 816px; margin: 0 auto; padding: 46px 40px; text-align: center;
  background: #1c1e23; border: 1px solid #2b2e34; border-radius: 8px;
  color: #9aa1ab; font-family: "Barlow Condensed", sans-serif; font-size: 16px;
}
.mc-blank b {
  display: block; font-family: "Oswald", sans-serif; font-size: 17px;
  font-weight: 600; color: #e8eaed; margin-bottom: 8px; letter-spacing: .02em;
}
.mc-blank span { display: block; margin-top: 10px; font-size: 13.5px; color: #7d848e; }

/* ---- the sheet ---- */
.mc-page {
  --ink: #15171b; --mid: #5A6472; --soft: #6B7480;
  --rule: #e3e6ea; --data: #175FA6; --hot: #B0421A;
  /* FIXED height, not min-height. 816x1056 is letter at 96dpi, and the sheet
     is a flex column whose table rows are flex:1 1 0 -- they only distribute
     into the space left over if that space is bounded. With min-height they
     grow instead, and the page silently ran 58px long and printed a second,
     near-empty sheet. */
  /* border-box is load-bearing here, not housekeeping: as content-box the
     34px/24px padding is ADDED to the 1056 and the sheet measures 1114 --
     letter plus the padding, exactly the second page being chased. */
  box-sizing: border-box;
  width: 816px; height: auto; max-height: 1056px; background: #fff; color: var(--ink);
  margin: 0 auto; padding: 34px 42px 24px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column;
  font-family: "Barlow Condensed", sans-serif;
}

/* masthead */
.mc-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 9px; border-bottom: 2px solid var(--ink); flex: 0 0 auto; gap: 18px;
}
.mc-hd-m {
  font-family: "Oswald", sans-serif; font-size: 23px; font-weight: 700;
  letter-spacing: .005em; text-transform: uppercase;
}
.mc-hd-m em { font-style: normal; font-weight: 400; color: var(--soft); margin: 0 7px; }
.mc-hd-r {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mid); text-align: right; line-height: 1.45; white-space: nowrap;
}

/* The season caveat is not decoration. Between the March rollover and the
   September kickoff every official table is last season's, and an announcer
   holding this sheet has to be able to see that without being told. */
.mc-stale {
  flex: 0 0 auto; margin-top: 10px; padding: 7px 11px;
  border: 1px solid #d8bd8a; background: #fdf6e7; border-radius: 3px;
  font-size: 12px; color: #7a5a18; letter-spacing: .02em;
}
.mc-stale b { font-family: "Oswald", sans-serif; letter-spacing: .08em; text-transform: uppercase; }

/* ---- TWO MATCHUP BLOCKS ------------------------------------------------
   Left is always the offense, right is always the defense it faces, and the
   whole block reverses underneath. A row reads left to right as a sentence.

   The columns are fixed widths so the two blocks align down the page -- the
   offense number in the upper block sits exactly above the offense number in
   the lower one, which is what lets the eye compare them without counting
   across. */
.mc-blocks { flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px; margin-top: 13px; }
.mc-blk { display: flex; flex-direction: column; }

.mc-bh { display: flex; align-items: stretch; gap: 10px; margin-bottom: 3px; }
.mc-bh-s {
  flex: 1 1 0; font-family: "Oswald", sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  border-bottom: 3px solid; padding-bottom: 4px; display: flex; align-items: center; gap: 7px;
}
.mc-bh-s.r { justify-content: flex-end; }
.mc-bh-s i { font-style: normal; width: 11px; height: 11px; border-radius: 2px; flex: 0 0 11px; }
.mc-bh-v {
  flex: 0 0 auto; align-self: flex-end; padding-bottom: 5px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft);
}

.mc-tr { display: flex; align-items: center; height: 26px; border-bottom: 1px solid var(--rule); }
.mc-tr:last-child { border-bottom: 0; }

/* offense side */
.mc-ov {
  flex: 0 0 72px; font-family: "JetBrains Mono", monospace; font-size: 13px;
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--data); line-height: 1;
}
.mc-or {
  flex: 0 0 38px; font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  font-weight: 600; color: #4A5460;   /* 7.7:1 -- primary data, do not lighten */
}
/* the stat, dead centre -- AND IT WAS NOT.
   The row is [72 val][38 rank][label][38 rank][72 val][96 gap]. The label is
   flex:1, so it centres in what is LEFT OVER, and the gap column is 96px of
   left-over on one side only. On the 732px content width that put every stat
   name 48px left of the row's true centre -- and 48px left of the "against"
   in the block header above it, which IS centred (two flex:1 siblings). The
   header and the rows disagreed on where the middle was.
   Pad the label by the width of the gap column to put the axis back. Applied
   to the label rather than as a spacer div so the offence value stays flush
   left, aligned with its block header. */
.mc-tr { --mc-gap-col: 96px; }
.mc-tl {
  flex: 1 1 auto; text-align: center; font-family: "Oswald", sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mid);
  padding: 0 8px 0 calc(var(--mc-gap-col) + 8px);
}
/* A cross-sport row renders NO gap column, so it was already centred -- adding
   the compensation there would break the one case that was right. */
.mc-tr-nogap .mc-tl { padding: 0 8px; }
/* defense side -- mirrored, and deliberately quieter than the offense it faces */
.mc-dr {
  flex: 0 0 38px; text-align: right; font-family: "JetBrains Mono", monospace;
  font-size: 9.5px; font-weight: 600; color: #4A5460;
}
.mc-dvv {
  flex: 0 0 72px; text-align: right; font-family: "JetBrains Mono", monospace;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--mid); line-height: 1;
}
/* the gap, last, where a summary belongs */
.mc-gp { flex: 0 0 var(--mc-gap-col); display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.mc-gb { width: 52px; height: 6px; background: #eef0f3; border-radius: 2px; overflow: hidden; display: block; }
.mc-gb i { display: block; height: 6px; background: var(--data); border-radius: 2px; }
.mc-gb.neg i { background: #c3c8cf; }
.mc-gn {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 700;
  color: var(--soft); min-width: 26px; text-align: right;
}
.mc-gn.up { color: var(--hot); }

/* context + footer */
.mc-ctx {
  flex: 0 0 auto; margin-top: 12px; padding-top: 9px;
  border-top: 2px solid var(--ink); display: flex; justify-content: space-between; gap: 16px;
}
.mc-ctx-l {
  font-family: "Oswald", sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--soft); margin-bottom: 2px;
}
.mc-ctx-v { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mc-ft {
  flex: 0 0 auto; margin-top: 10px; display: flex; justify-content: space-between;
  gap: 20px; font-size: 9.5px; letter-spacing: .05em; color: var(--soft); line-height: 1.4;
}
.mc-ft b { font-family: "Oswald", sans-serif; letter-spacing: .11em; color: var(--mid); }

@media print {
  body { background: #fff; }
  .mc-toolbar { display: none; }
  .mc-page { box-shadow: none; margin: 0; }
}

/* ---- cross-league sheet: no ranks, no gaps ----------------------------
   Towson (FCS) at Navy (FBS). Each is ranked against its own league, so a
   rank or a gap across them would compare two different fields. The rank
   and gap COLUMNS are removed rather than left blank -- an em-dash where a
   rank belongs reads as missing data, when the truth is that no comparable
   rank exists. The values, which are directly comparable, get the room. */
.mc-xnote {
  flex: 0 0 auto; margin: 15px 0 2px; padding: 9px 12px;
  border-left: 3px solid var(--mid); background: #f4f6f8;
  font-size: 12.5px; line-height: 1.45; color: var(--mid);
}
.mc-xnote b {
  font-family: "Oswald", sans-serif; font-weight: 600; color: var(--ink);
  letter-spacing: .04em;
}
.mc-dir-nr .mc-v { flex: 0 0 96px; font-size: 14px; }
.mc-dir-nr .mc-l { font-size: 11px; letter-spacing: .12em; }

/* ---- the verify line --------------------------------------------------
   This is the card's whole claim made checkable, so it gets real presence:
   its own labelled row above the fine print, links at 11px rather than a
   bare URL buried at 9 in the methodology line. A URL somebody has to
   retype is not verification, it is homework.

   Real anchors, so one click during a broadcast puts the league's own page
   on screen beside the sheet. On paper the link is inert, which is why the
   LABEL names the site rather than the path -- "NFL.com team stats" is what
   someone needs to recognise; /stats/team-stats/offense/passing/... is not. */
.mc-ft {
  flex: 0 0 auto; margin-top: 10px; display: block;
  font-size: 9.5px; letter-spacing: .05em; color: var(--soft); line-height: 1.4;
}
.mc-src {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 6px 0 5px; border-top: 2px solid var(--ink);
}
.mc-src-k {
  font-family: "Oswald", sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--soft);
}
.mc-src-a {
  font-family: "Oswald", sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; color: var(--data); text-decoration: none;
  border-bottom: 1.5px solid var(--data); padding-bottom: 1px;
}
.mc-src-a:hover { color: var(--hot); border-bottom-color: var(--hot); }
/* The separator is decorative, but it still has to clear AA -- a rule the
   sheet applies to every glyph on it rather than to a chosen subset. */
.mc-src-sep { color: var(--soft); }
.mc-src-as {
  margin-left: auto; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mid); white-space: nowrap;
}
.mc-ft-m {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 4px; font-size: 9px; color: var(--soft);
}
.mc-ft-hb {
  font-family: "Oswald", sans-serif; letter-spacing: .11em;
  color: var(--mid); white-space: nowrap;
}
.mc-ft-hb b { color: var(--mid); }

/* Marks a row combined from two published columns rather than read from one.
   Both are verifiable; only one is verifiable in ten seconds. */
.mc-dv { font-family: "JetBrains Mono", monospace; font-size: 7.5px; font-weight: 700;
         color: var(--soft); margin-left: 2px; top: -.4em; }