/* ============================================================
   MONOLITH · CALM — shared design system
   The signed-off calm language as reusable components.
   Flat paper, one Archivo grotesque, air over rules, one focal
   number per screen, a single pine-green accent used sparingly.
   Mobile-first. Used by every Premier Draft screen.
   ============================================================ */
:root {
  --paper:   #efece4;
  --paper-2: #e6e2d8;
  --ink:     #16140f;
  --soft:    #5d574c;
  --faint:   #908a7d;
  --line:    rgba(22,20,15,0.14);
  --line-2:  rgba(22,20,15,0.30);
  --pine:    #1f5c3a;
  --oxide:   #9a3520;            /* negative / sell — quiet rust, not loud red */
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
img { display: block; }
a { color: inherit; }

/* ----- app frame (phone-first, max 440) ----- */
.app {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--paper);
  padding: 0 22px 48px;
}

/* ----- top bar ----- */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  margin: 0 -22px;
  padding: 16px 22px 14px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line);
}
.bar .wm { font-weight: 900; font-size: 16px; letter-spacing: 0.01em; line-height: 1; color: inherit; text-decoration: none; }
.bar .wm i { font-style: normal; color: var(--pine); }
.bar .gw {
  margin-left: auto;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--soft);
  display: inline-flex; align-items: center; gap: 7px;
}
.live-dot { width: 7px; height: 7px; background: var(--pine); display: inline-block;
  animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ----- hamburger + drawer ----- */
.ham {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 30px; height: 30px; padding: 6px; margin-left: -6px; flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.ham span { display: block; height: 2px; width: 100%; background: var(--ink);
  transition: transform .2s, opacity .2s; }
.ham[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ham[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ham[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.drawer {
  display: none; flex-direction: column;
  position: sticky; top: 51px; z-index: 39;
  margin: 0 -22px; border-bottom: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.drawer.open { display: flex; }
.drawer a {
  text-decoration: none; color: var(--ink);
  font-size: 15px; font-weight: 800; letter-spacing: 0.02em;
  padding: 15px 22px; border-top: 1px solid var(--line);
}
.drawer a:first-child { border-top: 0; }
.drawer a[aria-current="true"] { color: var(--pine); }

/* ----- page head / hero ----- */
.hero { padding: 34px 0 6px; }
.hero .ey { font-size: 10px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--soft); }
.hero .team { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; margin-top: 6px; }
.hero .team .badge { font-size: 17px; margin-right: 5px; vertical-align: -1px; }
.hero h1, .hero .big {
  font-weight: 900; letter-spacing: -0.05em; line-height: 0.82;
  font-variant-numeric: tabular-nums;
}
.hero .big { font-size: clamp(104px, 38vw, 160px); margin: 12px 0 0 -6px; }
.hero .big .u { font-size: 24px; font-weight: 800; letter-spacing: 0.04em; color: var(--soft); margin-left: 12px; }
.hero .big .ord { font-size: 0.42em; font-weight: 800; color: var(--soft); letter-spacing: 0; }
.hero h1 { font-size: clamp(40px, 12vw, 60px); margin-top: 12px; }
.hero h1 em { font-style: normal; color: var(--pine); }
.hero .cap { font-size: 14px; color: var(--soft); margin-top: 14px; max-width: 34ch; line-height: 1.45; }
.hero .cap b { color: var(--ink); font-weight: 700; }
.hero .cap .arrow { color: var(--pine); font-weight: 700; }

/* ----- stat strip (no boxes) ----- */
.strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  margin-top: 26px;
}
.strip > div { padding: 18px 0; }
.strip > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.strip .l { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.strip .n { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; }
.strip .n small { font-size: 14px; font-weight: 700; color: var(--soft); }
.strip .n.neg { color: var(--oxide); }

/* ----- section header ----- */
.sec { display: flex; align-items: baseline; gap: 12px; margin: 40px 0 6px; }
.sec h2 { font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.sec .meta { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.sec a.meta { text-decoration: none; color: var(--soft); }
.sec a.meta:hover { color: var(--pine); }

/* ----- banner / callout ----- */
.banner { margin-top: 14px; border: 1px solid var(--line-2); padding: 18px 20px; }
.banner.ok { border-left: 3px solid var(--pine); }
/* Your-turn state: the action-needed accent (oxide), distinct from the calm
   pine of informational banners. */
.banner.turn { border-left: 3px solid var(--oxide); }
.banner.turn .k { color: var(--oxide); }
.banner .k { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pine); }
.banner .t { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-top: 6px; }
.banner .m { font-size: 12px; color: var(--soft); line-height: 1.5; margin-top: 8px; max-width: 46ch; }

/* ----- pills ----- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--soft); border: 1px solid var(--line-2); padding: 5px 9px; white-space: nowrap;
}
.pill.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill.pine { background: var(--pine); color: var(--paper); border-color: var(--pine); }
.pill.flag { color: var(--oxide); border-color: color-mix(in srgb, var(--oxide) 40%, var(--line-2)); }

/* ----- buttons ----- */
.btn {
  appearance: none; cursor: pointer; font-family: var(--sans);
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 14px 18px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: opacity .15s, background .15s, color .15s; text-decoration: none;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-primary { background: var(--pine); border-color: var(--pine); color: var(--paper); }
.btn-primary:hover { opacity: 0.88; background: var(--pine); color: var(--paper); }
/* Inactive control: dimmed, no pointer, no hover lift. */
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--ink); }
.btn-primary:disabled, .btn-primary:disabled:hover {
  background: var(--pine); color: var(--paper); opacity: 0.4;
}
/* Failed-submission state: oxide red so it's clear nothing was saved. */
.btn.submit-failed, .btn.submit-failed:hover {
  background: var(--oxide); border-color: var(--oxide); color: var(--paper); opacity: 1;
}
/* Armed pick confirm (draft pools): first tap flips Pick → SURE, second submits. */
.btn-sure, .btn-sure:hover {
  background: var(--oxide); border-color: var(--oxide); color: var(--paper); opacity: 1;
}
.btn-block { width: 100%; }
.btn-sm { padding: 9px 13px; font-size: 10px; }
.btn-ghost { border-color: var(--line-2); color: var(--soft); }

/* Kit badge: a manager's chosen kit mark wherever their emoji badge would
   render. Em-sized so the same fragment scales with hero, shield and chip
   text; slight downshift keeps it optically centred beside text. */
.kitb { height: 1.15em; width: auto; display: inline-block; vertical-align: -0.18em; }

/* ----- player / standings rows ----- */
.list { margin-top: 4px; }
.row {
  display: grid; grid-template-columns: 24px 44px 1fr auto;
  align-items: center; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--line); cursor: pointer; position: relative;
}
.row:last-child { border-bottom: 0; }
.row .pos { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; color: var(--faint); }
.row.gk .pos, .row.cap .pos { color: var(--pine); }
.ph {
  width: 44px; height: 44px; object-fit: cover; object-position: top center;
  background: var(--paper-2); filter: grayscale(1) contrast(1.04);
}
.ph.mono {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--soft); letter-spacing: 0.02em; filter: none;
}
.row .who { min-width: 0; }
.row .nm { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .nm .c { color: var(--pine); font-weight: 800; }
/* Injury marker (Fotmob availability). Quiet rust, trails the name; the
   expected return / status sits in the title/tooltip. */
.inj { color: var(--oxide); font-weight: 900; margin-left: 5px; cursor: help; }
.row .sub { margin-top: 4px; display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--faint); font-weight: 500; }
.crest { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.crest.mono { display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:14px; padding:0 4px; background:var(--ink); color:var(--paper);
  font-size:8px; font-weight:800; letter-spacing:0.04em; }
.row .val { text-align: right; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.row .val .u { font-size: 11px; font-weight: 600; color: var(--faint); margin-right: 1px; }
.row .val.zero { color: var(--faint); }
.row .val.neg { color: var(--oxide); }

/* bench / quieter variant */
.bench .row .ph, .ph.sm { width: 38px; height: 38px; }
.bench .row { grid-template-columns: 24px 38px 1fr auto; padding: 12px 0; }
.bench .row .nm { font-size: 15px; }

/* position group sub-head */
.grp { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint); margin: 22px 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }

/* ----- standings table ----- */
.table { margin-top: 8px; }
.trow {
  display: grid; grid-template-columns: 22px 22px 1fr auto auto;
  align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.trow:last-child { border-bottom: 0; }
a.trow { color: inherit; text-decoration: none; }
a.trow:hover .tm .nm { color: var(--pine); }
.trow .rk { font-size: 13px; font-weight: 800; color: var(--faint); }
.trow .shield { font-size: 18px; line-height: 1; text-align: center; }
.trow .tm { min-width: 0; }
.trow .tm .nm { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .tm .nm b { color: var(--pine); }
.trow .tm .mgr { font-size: 10px; color: var(--faint); font-weight: 500; margin-top: 2px;
  letter-spacing: 0.04em; text-transform: uppercase; }
.trow .val2 { font-size: 11px; font-weight: 700; color: var(--faint); width: 52px; text-align: right; }
.trow .pts { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; width: 42px; text-align: right; }
.trow .pts.neg { color: var(--oxide); }
.trow.you { background: color-mix(in srgb, var(--paper-2) 60%, transparent); margin: 0 -10px; padding: 13px 10px; }
.trow.you .rk { color: var(--pine); }

/* ----- block list (.lp-block) ----- */
.blocks { margin-top: 8px; }
.lp-block {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: stretch;
  text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.lp-block:last-child { border-bottom: 0; }
.lp-when { border-right: 1px solid var(--line); padding-right: 14px; }
.lp-when .d { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; }
.lp-when .t { font-size: 12px; font-weight: 700; color: var(--soft); margin-top: 2px; }
.lp-when .g { font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.lp-fx { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lp-fx-row { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.lp-fx-row em { font-style: normal; color: var(--faint); font-weight: 600; }
.lp-fx-more { font-size: 10px; font-weight: 700; color: var(--faint); letter-spacing: 0.04em; }
.lp-state { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lp-go { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.lp-block:hover .lp-go { color: var(--pine); }

/* ----- pick rows (block XI) ----- */
.pick {
  display: grid; grid-template-columns: 22px 40px 1fr auto; gap: 13px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line); cursor: pointer; position: relative;
}
.pick:last-child { border-bottom: 0; }
.pick input { appearance: none; width: 20px; height: 20px; border: 1.5px solid var(--line-2);
  cursor: pointer; flex-shrink: 0; display: grid; place-items: center; transition: .15s; }
.pick input:checked { background: var(--pine); border-color: var(--pine); }
.pick input:checked::after { content: ""; width: 6px; height: 10px; border: solid var(--paper);
  border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.pick .nm { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.pick .sub { margin-top: 3px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--faint); font-weight: 600; }
.pick .tag { font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pine); border: 1px solid color-mix(in srgb, var(--pine) 35%, var(--line-2)); padding: 4px 7px; white-space: nowrap; }
.pick input:not(:checked) ~ * { opacity: 0.5; }

/* formation/submit bar */
.formrow {
  position: sticky; top: 51px; z-index: 30; margin: 14px -22px 0; padding: 12px 22px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px;
}
.formrow .field { display: flex; flex-direction: column; gap: 4px; }
.formrow .lbl { font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.formrow .fmchip { font-size: 17px; font-weight: 900; letter-spacing: 0.02em; }
.formrow .fmchip.ok { color: var(--pine); }
.formrow .fmchip.bad { color: var(--oxide); }
.formrow .count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--soft); letter-spacing: 0.06em; text-transform: uppercase; }
.formrow .count b { font-size: 15px; color: var(--ink); }

/* prev/next block nav */
.lp-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 22px; border: 1px solid var(--line-2); }
.lp-nav-link { text-decoration: none; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.lp-nav-link.prev { border-right: 1px solid var(--line); align-items: flex-start; }
.lp-nav-link.next { text-align: right; align-items: flex-end; }
.lp-nav-arrow { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.lp-nav-when { font-size: 12px; font-weight: 700; }

/* ----- filter chips ----- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chip-f {
  appearance: none; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; line-height: 1;
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--soft); border: 1px solid var(--line-2); background: transparent; padding: 9px 13px;
  font-family: var(--sans); transition: .15s;
}
.chip-f:hover { border-color: var(--ink); color: var(--ink); }
.chip-f.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ----- search ----- */
.search { display: flex; align-items: center; gap: 10px; margin-top: 14px;
  border: 1px solid var(--line-2); padding: 0 14px; height: 46px; }
.search span { color: var(--faint); }
.search input { flex: 1; min-width: 0; appearance: none; border: 0; background: transparent;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); height: 100%; }
.search input:focus { outline: none; }
.search input::placeholder { color: var(--faint); }

/* ----- ledger ----- */
.ledger { width: 100%; border-collapse: collapse; margin-top: 10px; }
.ledger td { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger .lt { font-weight: 700; }
.ledger .lv { text-align: right; font-weight: 800; }
.ledger .lv.pos { color: var(--pine); }
.ledger .lv.neg { color: var(--oxide); }
.ledger tr.total td { border-top: 1px solid var(--line-2); padding-top: 12px; font-size: 14px; }
.ledger tr.total .lt { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }

/* RPS order */
.rps { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rps .slot { width: 40px; height: 40px; border: 1px solid var(--line-2); display: grid; place-items: center;
  font-size: 18px; position: relative; }
.rps .slot::after { content: attr(data-n); position: absolute; top: -7px; left: -1px; font-size: 8px;
  font-weight: 800; color: var(--faint); background: var(--paper); padding: 0 3px; }
.rps .slot.empty { color: var(--faint); border-style: dashed; }
.rps-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ----- player profile hero ----- */
.pf-hero { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.pf-photo { width: 96px; height: 96px; object-fit: cover; object-position: top center;
  background: var(--paper-2); filter: grayscale(1) contrast(1.04); flex-shrink: 0; }
.pf-photo.mono { display: grid; place-items: center; font-size: 30px; font-weight: 900; color: var(--soft); filter: none; }
.pf-id h1 { font-size: clamp(28px, 8vw, 40px); font-weight: 900; letter-spacing: -0.03em; line-height: 0.95; }
.pf-id .sub { display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.pf-row { display: grid; grid-template-columns: 16px 1fr auto auto auto; gap: 12px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line); }
.pf-row:last-child { border-bottom: 0; }
.pf-row .pf-nm { font-size: 15px; font-weight: 700; }
.pf-row .pf-nm .ha { color: var(--faint); font-weight: 600; }
.pf-row .pf-ev { font-size: 11px; color: var(--soft); margin-top: 2px; font-weight: 500; }
.pf-row .sc { font-size: 13px; font-weight: 700; color: var(--soft); }
.pf-row .gw { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; color: var(--faint); }
.pf-row .pt { font-size: 17px; font-weight: 800; color: var(--pine); width: 36px; text-align: right; }

/* ----- misc ----- */
.note { font-size: 11px; color: var(--faint); line-height: 1.6; margin-top: 20px; max-width: 52ch; }
.backlink { display: inline-block; margin-top: 24px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); text-decoration: none; }
.backlink:hover { color: var(--pine); }
.colophon { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line-2);
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.colophon b { color: var(--soft); font-weight: 800; }

/* ===== sort control (free-agents page + transfers picker) ===== */
.fa-sort { display: flex; align-items: center; gap: 10px; padding: 14px 0 4px; }
.fa-sort > label { font: 800 9px/1 'Archivo'; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint); flex: 0 0 auto; }
.fa-sort .sel { position: relative; flex: 1; }
.fa-sort select { appearance: none; -webkit-appearance: none; width: 100%; cursor: pointer;
  font: 800 12px/1 'Archivo'; color: var(--ink); background: transparent;
  border: 1px solid var(--line-2); padding: 10px 12px; border-radius: 0; }
.fa-sort .dir { appearance: none; cursor: pointer; font: 800 15px/1 'Archivo';
  color: var(--ink); background: transparent; border: 1px solid var(--line-2);
  padding: 8px 13px; flex: 0 0 auto; }
.pk-sort { padding: 10px 18px 4px; }

/* ===== wide stat columns (CS / For / Aga / G / A) =====
   Phone-first: hidden. Tablet/desktop: the app frame doubles and the extra
   stat columns appear in every table. A grid item set to display:none drops
   out of the grid entirely, so the mobile grid templates are untouched and
   only the wide templates below count the extra tracks. */
.x { display: none; }
.xs { text-align: right; font: 700 13px/1 'Archivo'; font-variant-numeric: tabular-nums;
  color: var(--soft); align-self: center; }
.xs.zero { color: var(--faint); }
.xs.na { color: var(--faint); }
.xh { text-align: right; font: 800 9px/1 'Archivo'; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--faint); }
.xh.l { text-align: left; }

@media (min-width: 768px) {
  .app { max-width: 880px; padding: 0 32px 56px; }
  .bar, .drawer { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; }
  .x { display: block; }

  /* The `.app` qualifier lifts these above each page's inline base grid, which
     is injected after calm.css and would otherwise win on source order. */
  body[data-page="squad"] .app .row,
  body[data-page="squad"] .app .colhead {
    grid-template-columns: 40px 1fr 28px 28px 30px 30px 30px 30px 30px 28px 38px; }
  body[data-page="squad"] .app .bench .row {
    grid-template-columns: 36px 1fr 28px 28px 30px 30px 30px 30px 30px 28px 38px; }

  body[data-page="league"] .app .trow,
  body[data-page="league"] .app .lcolhead {
    grid-template-columns: 22px 22px 1fr 30px 30px 30px 30px 30px 40px 48px; }
  body[data-page="league"] .app .thead { display: none; }

  body[data-page="owners"] .app .row.ow,
  body[data-page="owners"] .app .owhead {
    grid-template-columns: 38px 1fr 30px 30px 30px 30px 30px 48px 46px; }

  body[data-page="free-agents"] .app .fa-cols {
    grid-template-columns: 38px 1fr 30px 30px 30px 30px 30px 40px 36px 42px 34px; }

  body[data-page="transfers"] .app .sell,
  body[data-page="transfers"] .app .sellhead {
    grid-template-columns: 22px 38px 1fr 30px 30px 30px 30px 30px 46px 52px; }
  body[data-page="transfers"] .app .sheet { max-width: 640px; }
  body[data-page="transfers"] .app .pk-row,
  body[data-page="transfers"] .app .pkhead {
    grid-template-columns: 36px 1fr 30px 30px 30px 30px 30px 34px 60px; }
}

/* The wide-only column headers some tables grow at the breakpoint. */
.lcolhead, .owhead { display: none; }
@media (min-width: 768px) {
  .lcolhead, .owhead { display: grid; align-items: end; gap: 12px;
    padding: 0 0 6px; border-bottom: 1px solid var(--line); }
  .owhead { gap: 12px; margin-top: 4px; }
}