/* ===================================================================
   HOT BOARDS -- print-offense.css  v18
   11x17 landscape

   2026-06-17 print-board sizing pass (cache-bust css v95):
     - Skill columns are now UNIFORM FIXED heights per tier (feat 255 / key 195
       / bk 150 / deep grows 95->150) instead of content-dynamic flex. Every
       1st-team card matches across RB/WR/TE, every 2nd-team matches, etc. Build
       pads non-QB columns to 4 slots; deep grows to fill the foot. QB column is
       special (QB1 grows huge, QB2 = bk size, QB3 fixed tiny 95).
     - OL salary fix: backup raised 95 -> 110, salary/stat lines are now
       flex-shrink:0 and the write-in strip yields (flex 1 1 / min 18) so the
       contract line shows on every OL (and skill) card.

   v18 changes:
     - .pb-card-collapse button visible & bigger (was nearly invisible [-])
     - .pb-card-row.pb-collapsed shrinks the row's MIN-HEIGHT so collapsed
       starter cards actually shrink the slot (not just hide notes)
     - .pb-sb-kp-card has slightly more space for stat lines
     - .pb-sb-record-fetched / .pb-sb-details-fetched style for autofetched
       team header data (italic + lighter color until edited)
   =================================================================== */

.pb-page {
  background: #fff; color: #111;
  width: 1632px; height: 1056px;
  display: flex;
  border: 2px solid #1a1a1a;
  overflow: hidden;
  font-family: 'Oswald', 'Barlow Condensed', Helvetica, Arial, sans-serif;
  font-size: 10px; line-height: 1.35;
  margin-bottom: 14px;
}
.pb-empty { padding: 40px; text-align: center; color: #999; font-size: 14px; }
/* The sheets are a fixed 1632px and scaled to fit the screen via a top-left
   transform (pbFitToWidth); hide the empty layout width the un-scaled box reserves
   so there's no horizontal scrollbar. */
#printCanvases { overflow-x: hidden; }

.pb-controls { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; flex-wrap: wrap; }
.pb-ctrl-btn {
  font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 500;
  padding: 6px 14px; border-radius: 5px;
  border: 1px solid var(--b2, #333); background: var(--s2, #181c26);
  color: var(--t2, #8895aa); cursor: pointer;
}
.pb-ctrl-btn:hover { border-color: var(--red, #e8341a); color: var(--t1, #f0f2f6); }
.pb-print-btn { background: var(--red, #e8341a); color: #fff; border-color: transparent; }
/* Red-filled primary: own hover so it doesn't inherit the secondary .pb-ctrl-btn:hover. */
.pb-print-btn:hover { filter: brightness(1.07); border-color: transparent; color: #fff; }
.pb-ol-toggle, .pb-mode-toggle {
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 500;
  padding: 5px 12px; border-radius: 4px;
  border: 1px solid var(--b2, #555); background: var(--s2, #222);
  color: var(--t2, #aaa); cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px;
}
.pb-ol-toggle:not(.active):hover, .pb-mode-toggle:not(.active):hover {
  color: var(--t1, #f0f2f6); border-color: var(--red, #e8341a);
}
.pb-ol-toggle.active, .pb-mode-toggle.active {
  background: var(--red, #e8341a); color: #fff; border-color: transparent;
}
.pb-reset-cols-btn {
  font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 500;
  padding: 4px 10px; border-radius: 4px;
  border: 1px solid var(--b2, #555); background: transparent;
  color: var(--t3, #888); cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px;
}
.pb-reset-cols-btn:hover { color: var(--t1, #fff); border-color: var(--red, #e8341a); }
.pb-help-pill {
  font-family: 'Oswald', sans-serif; font-size: 10px;
  color: var(--t3, #888); margin-left: auto; padding: 4px 8px;
  border: 1px dashed #555; border-radius: 4px;
}
/* ── Redesigned controls bar: grouped + symmetric ── */
.pb-ctrl-btn { display: inline-flex; align-items: center; gap: 6px; }
.pb-ctrl-btn > svg { flex: 0 0 auto; }
.pb-ctrl-btn.pb-ghost { background: transparent; color: var(--t2, #8895aa); }
.pb-ctrl-btn.pb-ghost:hover { color: var(--t1, #f0f2f6); border-color: var(--red, #e8341a); }
.pb-ctrl-btn:disabled { opacity: 0.4; cursor: default; }
.pb-ctrl-btn:disabled:hover { color: var(--t2, #8895aa); border-color: var(--b2, #333); }
.pb-ctrl-btn.pb-dashed { border-style: dashed; }
.pb-ctrl-btn.pb-dashed.active { background: var(--red, #e8341a); color: #fff; border-color: transparent; }
.pb-ctrl-div { width: 1px; align-self: stretch; min-height: 20px; background: var(--b2, #333); margin: 0 4px; }
.pb-ctrl-spacer { flex: 1 1 auto; }
.pb-grp-lbl { font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 500; color: var(--t3, #888); text-transform: uppercase; letter-spacing: 0.8px; }
.pb-seg { display: inline-flex; border: 1px solid var(--b2, #333); border-radius: 5px; overflow: hidden; }
.pb-seg-btn { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 500; padding: 5px 12px; border: 0; background: var(--s2, #181c26); color: var(--t2, #8895aa); cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; }
.pb-seg-btn + .pb-seg-btn { border-left: 1px solid var(--b2, #333); }
.pb-seg-btn:not(.active):hover { color: var(--t1, #f0f2f6); }
.pb-seg-btn.active { background: var(--red, #e8341a); color: #fff; }
/* Keyboard a11y: visible focus ring on the on-screen editor controls (print-context
   red accent, not the app brass). Screen-only — these controls are display:none in print. */
.pb-ctrl-btn:focus-visible, .pb-print-btn:focus-visible, .pb-ol-toggle:focus-visible,
.pb-mode-toggle:focus-visible, .pb-seg-btn:focus-visible, .pb-reset-cols-btn:focus-visible,
.pb-help-x:focus-visible { outline: 2px solid var(--red, #e8341a); outline-offset: 2px; }
.hb-save-state { font-family: 'Oswald', sans-serif; font-size: 11px; color: var(--t3, #888); white-space: nowrap; }
.hb-save-state.on { color: #4bb38a; }
/* Help panel ("How to use") */
.pb-help-ov { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.pb-help-panel { position: relative; background: var(--s1, #11151c); border: 1px solid var(--b2, #333); border-radius: 10px; width: min(560px, 92vw); max-height: 86vh; overflow: auto; padding: 22px 24px 20px; color: var(--t1, #e8eef5); font-family: Archivo, system-ui, sans-serif; }
.pb-help-h { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600; margin: 0 0 3px; letter-spacing: 0.4px; }
.pb-help-sub { font-size: 12px; color: var(--t3, #888); margin: 0 0 14px; }
.pb-help-row { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--b2, #262b36); font-size: 13px; line-height: 1.45; }
.pb-help-k { flex: 0 0 116px; color: var(--red, #e8341a); font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.pb-help-v { color: var(--t2, #c2ccda); }
.pb-help-x { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--t3, #888); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 5px; }
.pb-help-x:hover { color: var(--t1, #fff); background: var(--s2, #1c2330); }
@media print { .pb-help-ov { display: none !important; } }

/* SIDEBAR */
/* ====== SIDEBAR — "Spotter Card" (bordered cards, color-coded headers) ====== */
.pb-sidebar {
  width: 276px; flex-shrink: 0;
  border-right: 2px solid #111; background: #fff;
  display: flex; flex-direction: column; gap: 6px; padding: 6px; overflow: hidden;
}
.pb-sbc { border: 1.4px solid #c9ccd2; border-radius: 3px; overflow: hidden; flex-shrink: 0; }

/* team identity card */
.pb-sb-ban { display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; }
.pb-sb-teamname { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 23px; text-transform: uppercase; letter-spacing: .015em; color: #fff; line-height: .95; }
.pb-sb-record { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 19px; color: #e7c98a; outline: none; white-space: nowrap; }
/* Light team-color banners (Steelers gold, Raiders silver, Saints gold): dark text for legibility. */
.pb-sb-ban-light .pb-sb-teamname { color: #141A22; }
.pb-sb-ban-light .pb-sb-record { color: #6b4e16; }
.pb-sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; padding: 6px 9px 4px; }
.pb-sb-grid > div span { font-size: 7.5px; letter-spacing: .07em; text-transform: uppercase; color: #8a8f97; display: block; line-height: 1; }
.pb-sb-grid > div b { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11.5px; color: #141A22; outline: none; }
.pb-sb-matchup { padding: 1px 9px 6px; font-size: 9.5px; font-style: italic; color: #5A636E; }
.pb-sb-record:focus, .pb-sb-stat:focus { background: #fffbe8; }

/* color-coded card headers */
.pb-sbc-hd { display: flex; align-items: center; justify-content: space-between; padding: 4px 9px; border-bottom: 1.4px solid #dfe2e7; }
.pb-sbc-l { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.pb-sbc-cnt { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 12px; }
.pb-sbc-hd-brass { background: #f4ecdb; } .pb-sbc-hd-brass .pb-sbc-l { color: #8a631c; }
.pb-sbc-hd-red { background: #fbeae7; } .pb-sbc-hd-red .pb-sbc-l, .pb-sbc-hd-red .pb-sbc-cnt { color: #c0392b; }
.pb-sbc-hd-navy { background: #e7edf5; } .pb-sbc-hd-navy .pb-sbc-l { color: #0B2A52; }

/* notes card (grows to fill) */
.pb-sbc-notes { flex: 1; display: flex; flex-direction: column; min-height: 90px; }
.pb-sbc-notes .pb-notes-toolbar { display: flex; gap: 2px; flex-wrap: wrap; padding: 3px 8px; border-bottom: 1px solid #eceef1; }
.pb-nt-btn { font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 600; padding: 0 5px; min-width: 16px; height: 15px; background: #fff; border: 1px solid #c9ccd2; border-radius: 2px; color: #555; cursor: pointer; line-height: 13px; user-select: none; }
.pb-nt-btn:hover { background: #f0f0f0; border-color: #888; color: #111; }
.pb-nt-btn:active, .pb-nt-btn.on { background: #ffe680; border-color: #b89020; color: #111; }
.pb-nt-btn.bold { font-weight: 800; } .pb-nt-btn.italic { font-style: italic; }
.pb-nt-sep { width: 1px; height: 11px; background: #c9ccd2; margin: 0 1px; align-self: center; }
.pb-sb-notes-area { flex: 1; min-height: 60px; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 17px, #eef0f2 17px, #eef0f2 18px); background-color: #fff; font-family: 'Oswald', sans-serif; font-size: 10.5px; font-weight: 500; color: #111; line-height: 18px; padding: 1px 8px; outline: none; overflow: auto; cursor: text; }
.pb-sb-notes-area:focus { background-color: #fffef5; }
.pb-sb-notes-area mark, .pb-sb-notes-area .hl, .pb-sb-notes-area .hb-hl { background: #fff200; color: inherit; padding: 0 1px; }

/* injuries card */
.pb-sb-inj-list { padding: 4px 9px 6px; }
.pb-sb-inj-row { display: flex; align-items: baseline; gap: 5px; padding: 2px 0; border-bottom: 1px dotted #eceef1; }
.pb-sb-inj-row:last-child { border-bottom: none; }
.pb-sb-pill { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 8px; padding: 1px 4px; border-radius: 2px; color: #fff; flex: 0 0 auto; }
.pb-sb-pill.out { background: #c0392b; } .pb-sb-pill.q { background: #d68a1e; } .pb-sb-pill.d { background: #9b59b6; } .pb-sb-pill.ir, .pb-sb-pill.other { background: #6b7280; }
.pb-sb-inj-nm { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 11.5px; color: #141A22; }
.pb-sb-inj-det { font-size: 9px; color: #5A636E; margin-left: auto; white-space: nowrap; }

/* coaches card — each coach is a block (header row + its own write-in space) */
.pb-sb-co { padding: 6px 9px 5px; }
.pb-sb-co + .pb-sb-co { border-top: 1px solid #dfe2e7; }
.pb-sb-co-row { display: flex; gap: 7px; align-items: flex-start; }
.pb-sb-crest { width: 28px; height: 28px; flex: 0 0 auto; background: #0B2A52; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 10px; color: #fff; letter-spacing: .02em; }
.pb-sb-co-body { min-width: 0; }
.pb-sb-co-nm { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .01em; color: #141A22; text-transform: uppercase; line-height: 1.05; }
.pb-sb-co-note { font-family: 'Barlow', sans-serif; font-size: 9.5px; font-weight: 500; color: #2c333b; padding-left: 9px; text-indent: -9px; line-height: 1.3; margin-top: 1px; }
/* Blank ruled write-in space — one per coach (and one for hand-added injuries). */
.pb-sb-co-write { min-height: 30px; margin-top: 4px;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 14px, #eef0f2 14px, #eef0f2 15px); }
.pb-sb-inj-write { min-height: 30px; margin: 3px 9px 7px;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 14px, #eef0f2 14px, #eef0f2 15px); }

/* RIGHT AREA */
.pb-right { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.pb-col-hdrs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 4px; padding: 2px 5px 0; flex-shrink: 0;
}
.pb-col-hdr {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; text-align: center; color: #555;
  border-bottom: 2px solid #111; padding-bottom: 2px;
  position: relative; cursor: grab; user-select: none;
}
.pb-col-hdr:active { cursor: grabbing; }
.pb-col-hdr.pb-col-dragging { opacity: 0.4; background: rgba(232,52,26,0.1); }
.pb-col-hdr.pb-col-dragover { background: rgba(240,192,64,0.25); border-bottom-color: #b89020; }
.pb-col-hdr-grip { display: inline-block; font-size: 8px; color: #aaa; margin-right: 4px; vertical-align: middle; }

/* ROWS AREA */
.pb-rows-area {
  flex: 1; display: flex; flex-direction: column;
  gap: 3px; padding: 3px 5px; min-height: 0; overflow: hidden;
}
/* Flipped defense: stack bottom-up (starters at the bottom). Row heights are
   assigned per-element by pbDefAutoFitRows, so the starter row keeps its tall
   slot — column-reverse only changes the visual stacking order. */
.pb-def-rows.pb-def-flip { flex-direction: column-reverse; }

/* draft2: skill area as per-position vertical columns. Feature (first) card
   takes the big share; backups below split the remaining height equally. */
.pb-skill-cols {
  flex: 1; display: flex; flex-direction: row;
  gap: 4px; padding: 3px 5px; min-height: 0; overflow: hidden;
}
.pb-skill-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pb-skill-col > .pb-card { min-height: 0; }
/* Depth-chart tiers: ALIGNED + DYNAMIC. pbAutoFitTiers (JS) measures the busiest
   card in each upper tier and gives every same-tier card across RB/WR/TE that
   height -- so columns stay lined up (Adam's symmetry bar) while heights track
   content. Starters + backups (feat/key/bk) absorb surplus column space; the 4th
   tier (deep) shrinks to give it back when content runs tall, and the jersey
   number shrinks as a last resort. The min-heights below are the CSS-only
   fallback used if the JS fit can't run yet (e.g. before first layout). */
.pb-skill-col > .pb-skill-feat { flex: 0 0 auto; min-height: 170px; }
.pb-skill-col > .pb-skill-key  { flex: 0 0 auto; min-height: 135px; }
.pb-skill-col > .pb-skill-bk   { flex: 0 0 auto; min-height: 110px; }
.pb-skill-col > .pb-skill-deep { flex: 1 1 auto; min-height: 80px; max-height: 160px; }
/* QB column special: QB1 grows huge, QB2 = 3rd-team size, QB3 tiny + fixed. */
.pb-skill-col[data-tok="QB"] > .pb-skill-feat { flex: 1 1 auto; min-height: 200px; }
.pb-skill-col[data-tok="QB"] > .pb-skill-deep { flex: 0 0 auto; min-height: 0; max-height: none; }
/* Gentle number gradient -- Spero-calibrated: his steps are subtle (~10%),
   content does the work of sizing cards (feature 42 via .pb-starter). */
.pb-skill-key  .pb-card-num { font-size: 37px; min-width: 44px; }
.pb-skill-bk   .pb-card-num { font-size: 33px; min-width: 40px; }
.pb-skill-deep .pb-card-num { font-size: 30px; min-width: 36px; }
/* body text tightens on the smaller tiers so they stay compact */
.pb-skill-bk   .pb-card-first { font-size: 11px; }
.pb-skill-bk   .pb-card-stat, .pb-skill-bk   .pb-card-nl, .pb-skill-bk   .pb-card-board .pbl-tp { font-size: 10px; }
.pb-skill-deep .pb-card-first { font-size: 10px; }
.pb-skill-deep .pb-card-stat, .pb-skill-deep .pb-card-nl, .pb-skill-deep .pb-card-board .pbl-tp { font-size: 9.5px; }
.pb-skill-deep .pb-card-bio { font-size: 9px; }
.pb-card-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.pb-card-row.pb-r1     { min-height: 380px; flex: 5; }
.pb-card-row.pb-r2     { min-height: 170px; flex: 3; }
.pb-card-row.pb-r3     { min-height: 110px; flex: 1.5; }
.pb-card-row.pb-r-over { min-height: 80px;  flex: 0.8; }

/* v18: row-collapsed shrinks min-height + flex when ALL cards in row are compact */
.pb-card-row.pb-row-collapsed { min-height: 80px !important; flex: 0.8 !important; }

/* Defense */
.pb-page.pb-def .pb-col-hdrs,
.pb-page.pb-def .pb-card-row { grid-template-columns: repeat(6, 1fr); }
/* Defense rows: pbDefAutoFitRows (JS) measures each row's tallest card and sizes
   every row to clear its content (no clipped backups) with starters only a touch
   bigger -- the old flex 4/4/2/1.5/1 gave the two starter rows ~325px of mostly
   blank space and starved r4/rOver into clipping. The near-equal flex + low
   min-heights below are the CSS-only fallback if the JS fit can't run. */
.pb-page.pb-def .pb-card-row.pb-r1     { min-height: 90px; flex: 1.2; }
.pb-page.pb-def .pb-card-row.pb-r2     { min-height: 90px; flex: 1.15; }
.pb-page.pb-def .pb-card-row.pb-r3     { min-height: 90px; flex: 1; }
.pb-page.pb-def .pb-card-row.pb-r4     { min-height: 90px; flex: 0.95; }
.pb-page.pb-def .pb-card-row.pb-r-over { min-height: 90px; flex: 0.9; }

.pb-page.pb-compact .pb-card-row.pb-r1,
.pb-page.pb-compact .pb-card-row.pb-r2,
.pb-page.pb-compact .pb-card-row.pb-r3,
.pb-page.pb-compact .pb-card-row.pb-r4,
.pb-page.pb-compact .pb-card-row.pb-r-over { min-height: 0; }
.pb-page.pb-compact .pb-ol-starter,
.pb-page.pb-compact .pb-ol-backup { min-height: 0; }

/* OL STRIP */
.pb-ol-strip {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 4px; padding: 3px 5px;
  border-top: 2px solid #111; flex-shrink: 0;
}
.pb-ol-strip.pb-ol-top {
  border-top: none; border-bottom: 2px solid #111;
}
.pb-ol-col { display: flex; flex-direction: column; gap: 2px; }
.pb-ol-pos-hdr {
  font-size: 7px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; color: #999; text-align: center;
}
/* OL is two FLAT tiers -- fixed heights so all 5 starters are identical and
   all backups identical. Backup raised 95 -> 110 so the salary/contract line
   clears with a usable write-in line below it (the 95px backup was too short:
   number + bio + SSN + salary + write-in overflowed and clipped the salary). */
.pb-ol-starter { height: 150px; }
.pb-ol-backup { height: 110px; }

/* PLAYER CARD */
.pb-card {
  border: 1.5px solid #aaa; background: #fff;
  display: flex; flex-direction: column;
  overflow: hidden; cursor: grab; user-select: text;
  position: relative;
}
.pb-card:hover { border-color: #666; }
.pb-card.pb-starter { border-width: 2px; border-color: #777; }
.pb-card.pb-rookie { background: rgba(40,184,112,0.05); }
/* A card whose note had to be trimmed to fit gets a small corner warning -- so a
   dropped note is NEVER a silent loss (the broadcaster sees it on screen + print). */
.pb-card-trimmed::after {
  content: "\26A0"; position: absolute; top: 1px; right: 3px;
  font-size: 9px; line-height: 1; color: #c03020; z-index: 5; pointer-events: none;
}
.pb-card.pb-empty-slot { border-style: dashed; border-color: #ddd; background: transparent; cursor: default; }
.pb-card.pb-dragging { opacity: 0.2; border-color: #e8341a; }
.pb-card.pb-dragover { border-color: #f0c040 !important; border-style: dashed !important; }
.pb-card .hb-hl { background: #fff200; color: inherit; padding: 0 1px; }

/* v18: collapse button -- visible, clickable, sits top-right */
.pb-card-collapse {
  display: none;  /* removed from the board -- no collapse control needed */
  position: absolute; top: 2px; right: 3px;
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 700;
  width: 18px; height: 16px; line-height: 14px; text-align: center;
  background: #f5f5f5; border: 1px solid #ccc; border-radius: 2px;
  color: #555; cursor: pointer; user-select: none; z-index: 5;
  padding: 0;
}
.pb-card-collapse:hover { background: #ffe680; border-color: #b89020; color: #111; }
.pb-card.pb-card-compact .pb-card-collapse { background: #ffe680; border-color: #b89020; color: #111; }

.pb-card-top { display: flex; align-items: stretch; flex-shrink: 0; }
.pb-card-num {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 34px;
  color: #fff; min-width: 44px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; padding: 2px 3px;
}
/* draft1: feature + OL-starter numbers punch bigger for glance reading */
.pb-card.pb-starter .pb-card-num,
.pb-card.pb-ol-starter .pb-card-num { font-size: 42px; min-width: 50px; }
.pb-card-names {
  flex: 1; min-width: 0; padding: 2px 4px 1px 5px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.pb-card-first {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 13px;
  color: #333; text-transform: uppercase; letter-spacing: 0.5px;
  line-height: 1; white-space: nowrap; overflow: hidden;
}
.pb-card-last {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 22px;
  color: #000; text-transform: uppercase; line-height: 1.05;
  white-space: nowrap; overflow: hidden;
}
.pb-card-tr {
  padding: 3px 4px 0 3px; text-align: right;
  /* Stack the honor/rookie badges ON TOP of the age (column-reverse keeps the age,
     which is first in the DOM, at the bottom), right-aligned to the corner.
     justify-content:flex-end top-packs the group (column-reverse main-end = top) so
     the badges ride the top line next to the first name instead of floating mid-card. */
  display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: flex-end; gap: 2px; flex-shrink: 0;
}
.pb-card-age {
  font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 500;
  color: #555; white-space: nowrap;
}
/* Badges sit on the TOP ROW beside the age: row-reverse in .pb-card-tr keeps the
   age block at the corner and places the badges (laid out horizontally) to its
   left, top-aligned with the age's first line. */
.pb-card-awards { display: flex; flex-direction: row; gap: 3px; align-items: flex-start; }
.pb-card-badge {
  font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 600;
  padding: 1px 4px; border-radius: 2px;
  letter-spacing: 0.3px; text-transform: uppercase; line-height: 1.4;
}
.pb-card-badge.pb { background: #d0e0ff; color: #1a50a0; border: 1px solid rgba(30,80,160,0.2); }
.pb-card-badge.ap { background: #e4d0ff; color: #5020a0; border: 1px solid rgba(80,32,160,0.2); }
/* Captain — gold "C", distinct from the blue PB / purple AP honor badges. */
.pb-card-badge.cap { background: #e7b84b; color: #3a2a05; border: 1px solid rgba(120,90,10,0.35); font-weight: 700; }
.pb-card-badge.rk { background: #2ecc71; color: #06351a; border: 1px solid rgba(8,80,36,0.45); font-weight: 700; }
/* Defensive columns are narrower (6 per row), so a decorated player's badges can
   crowd the name and force it to shrink hard. Tighten the badges on defense to
   leave the name more room (names still auto-shrink to fit via pbShrinkNames). */
.pb-page.pb-def .pb-card-awards { gap: 2px; }
.pb-page.pb-def .pb-card-badge { font-size: 8px; padding: 1px 3px; letter-spacing: 0.2px; }

.pb-card-body {
  padding: 1px 5px 3px 5px; flex: 1;
  display: flex; flex-direction: column; min-height: 0;
}

.pb-card-bio {
  font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 400;
  color: #444; line-height: 1.25;
  display: flex; align-items: baseline; gap: 6px;
  white-space: nowrap;
}
.pb-card-bio-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pb-card-bio-acq { flex: 0 0 auto; font-weight: 600; color: #c03020; margin-left: auto; white-space: nowrap; }
.pb-card-nick { font-family: 'Oswald', sans-serif; font-size: 9.5px; font-style: italic; color: #6a6a6a; line-height: 1.15; }

.pb-card-acq {
  font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 600;
  color: #c03020; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.25;
}
.pb-card-inj {
  font-family: 'Oswald', sans-serif; font-size: 10.5px; font-weight: 600;
  color: #c03020; line-height: 1.3; text-align: right;
}
.pb-card-stat {
  font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 500;
  color: #111; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 0;
}
.pb-card-stat .sl {
  font-weight: 600; color: #999; font-size: 8px; letter-spacing: 0.3px; margin-right: 2px;
}
.pb-card-notes {
  margin-top: 2px; padding-top: 2px; border-top: 1px solid #ddd;
  overflow: hidden; flex: 0 1 auto; min-height: 0;
}
.pb-card-contract {
  font-family: 'Oswald', sans-serif; font-size: 10px; font-weight: 500;
  color: #2a7a3a; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 0;
}
.pb-card-nl {
  font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 500;
  color: #222; line-height: 1.35;
  display: flex; align-items: flex-start; gap: 2px;
}
.pb-card-nl::before {
  content: "\25B8"; color: #c03020; flex-shrink: 0; font-size: 6px; margin-top: 2px;
}
/* The blank write-in strip is the slack absorber: it GROWS to fill the leftover
   height of every (now fixed-height) card, but it SHRINKS first when space is
   tight -- so the salary/stat lines above it (flex-shrink:0) are never clipped.
   This is what kept the OL salary line from showing on the short backup cards. */
.pb-card-write {
  flex: 1 1 auto; min-height: 18px;
}

/* Curated card body, mirrored verbatim from the player-modal print-board notes
   box (NT[pid].boardHtml). The box's .pbl-* classes are modal-scoped
   (.pmx-board-notes) and themed for the dark modal, so we re-style them here for
   the light print card: injury -> card red, salary -> card green, lists single
   column on the narrow card. The user's inline color accents carry through. */
.pb-card-board {
  font-family: 'Oswald', sans-serif; font-size: 9.5px; color: #111; line-height: 1.16;
  font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden;
  /* Fill the card as a flex column so the bottom stat group (season/career, which
     follow the thin rule) can pin to the card's BOTTOM edge. The blank gap above
     them IS the game-day write-in space (replaces .pb-card-write on box cards).
     pbFitCardBody still shrinks this element when a card's content is tight. */
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
/* CARD ZONING -- "Open field, pinned band". The bio-note UPPER zone holds the slack
   at the top of the box; the dark zone-divider (statrule) + the tinted STATS BAND
   after it pin to the card's BOTTOM. The single margin-top:auto on the divider
   absorbs the slack, so the open gap between the note and the band doubles as the
   game-day write-in space. */
.pb-card-board > [data-auto="statrule"] { margin-top: auto; }
/* Tint the whole stats band (the divider and every block after it) so it reads as
   one panel welded to the card foot. PRINT-only -- the dark editor modal (#cardOv)
   gives the band its own dark panel (card-overlay.css). */
#printCanvases .pb-card-board > [data-auto="statrule"],
#printCanvases .pb-card-board > [data-auto="statrule"] ~ * {
  background: #fafafa;
}
/* Dark zone-divider: a single near-black rule carries the note/stats split even on
   cheap toner where the faint band tint washes out. The divider block is just the
   line; the band's breathing room hangs off the first block after it. */
#printCanvases .pb-card-board > [data-auto="statrule"] .pbl-rule {
  border-top: 1px solid #999; margin: 0;
}
.pb-card-board > [data-auto="statrule"] { padding: 0; }
.pb-card-board > [data-auto="statrule"] + * { padding-top: 3px; }
.pb-card-board > [data-auto="statrule"] ~ *:last-child { padding-bottom: 4px; }
/* UPPER ZONE -- bio note on open white: the largest, darkest type in the box. No
   header label (per Adam). Board-only (the modal styles its note zone separately). */
#printCanvases .pb-card-board > [data-auto="bionote"] {
  background: transparent; border: 0; padding-left: 0;
}
#printCanvases .pb-card-board > [data-auto="bionote"] .pbl-tp {
  margin-top: 0;
}
/* GAME NOTE -- same uniform type as the bio note, marked with a gold left-rule so it
   reads as the this-week callout (the bio note is plain; the rule tells them apart). */
#printCanvases .pb-card-board > [data-auto="gamenote"] {
  background: transparent; border: 0; border-left: 2px solid #b68a4e; padding: 0 0 0 6px; margin: 1px 0 7px;
}
#printCanvases .pb-card-board > [data-auto="gamenote"] .pbl-tp {
  margin-top: 0;
}
/* SMALL-CARD INLINE STATS (backup + deep tiers only). Sparse backups waste vertical
   space stacking each stat on its own row, which forces pbFitCardBody to shrink the
   type to the 6.5px floor. The stats BAND is wrapped in a single .pb-band container
   (pbWrapBand) so the board stays a flex column -- the band still pins to the card
   BOTTOM via the divider's margin-top:auto, and pbFitCardBody's overflow guard is
   untouched. On these two tiers the band's stats flow HORIZONTALLY inside .pb-band
   with " · " separators (gold labels keep them scannable), so the band is 1-2 lines
   instead of 4 and the card reads BIGGER (no shrink). Feature/starter cards keep the
   stacked layout; the band wrapper is transparent for them (stacked, still bottom). */
/* DEFENSE backups flow inline too: defensive cards live in .pb-def-row; the starter
   rows (r1/r2) carry .pb-starter, so .pb-card:not(.pb-starter) is exactly the backup
   rows (r3/r4/over) -- mirrors the offense skill backups (bk/deep) so a defensive
   backup's GP/SN/CR read sequentially on one or two lines instead of stacking. */
#printCanvases .pb-skill-bk .pb-card-board > .pb-band > [data-auto],
#printCanvases .pb-skill-deep .pb-card-board > .pb-band > [data-auto],
#printCanvases .pb-def-row .pb-card:not(.pb-starter) .pb-card-board > .pb-band > [data-auto] { display: inline; }
#printCanvases .pb-skill-bk .pb-card-board > .pb-band > [data-auto] .pbl,
#printCanvases .pb-skill-deep .pb-card-board > .pb-band > [data-auto] .pbl,
#printCanvases .pb-def-row .pb-card:not(.pb-starter) .pb-card-board > .pb-band > [data-auto] .pbl {
  display: inline; padding-left: 0; text-indent: 0;
}
#printCanvases .pb-skill-bk .pb-card-board > .pb-band > [data-auto]::after,
#printCanvases .pb-skill-deep .pb-card-board > .pb-band > [data-auto]::after,
#printCanvases .pb-def-row .pb-card:not(.pb-starter) .pb-card-board > .pb-band > [data-auto]::after {
  content: " \00B7 "; color: #b0b0b0; font-weight: 400;
}
#printCanvases .pb-skill-bk .pb-card-board > .pb-band > [data-auto]:last-child::after,
#printCanvases .pb-skill-deep .pb-card-board > .pb-band > [data-auto]:last-child::after,
#printCanvases .pb-def-row .pb-card:not(.pb-starter) .pb-card-board > .pb-band > [data-auto]:last-child::after {
  content: "";
}
/* Drop the secondary stat sub-line (a WR's/QB's rushing under SN:/CR:) on the tighter
   tiers (2nd-string, backup, deep) so they stay regular size instead of shrinking or
   clipping. Feature/starter cards keep the full dual-threat split -- they have room.
   !important so it beats the inline-flow rule (which sets every band .pbl to inline). */
#printCanvases .pb-skill-key .pb-card-board .pbl-sub,
#printCanvases .pb-skill-bk .pb-card-board .pbl-sub,
#printCanvases .pb-skill-deep .pb-card-board .pbl-sub,
#printCanvases .pb-def-row .pb-card:not(.pb-starter) .pb-card-board .pbl-sub { display: none !important; }
.pb-card-board .pbl-blk, .pb-card-board .pbl { display: block; }
/* Hang-indent: a stat line that wraps to a second line indents the continuation so
   it reads as a wrapped row, not a new line. */
.pb-card-board .pbl { padding-left: 10px; text-indent: -10px; }
/* Game-week label (WK 18 NYG ▶ …) pops in brand brass like the stat headings. */
.pb-card-board .pbl-wk { color: #8a631c; font-weight: 800; }
/* Stat-line headings (GP / SN / SSN / CAR / Combine / Missed) pop on the print
   card: brand brass + taller, bolder letters so the labels read above the data. */
.pb-card-board .pbl-lbl { font-weight: 800; color: #8a631c; font-size: 1em; line-height: inherit; margin-right: 3px; letter-spacing: 0.2px; }
.pb-card-board .pbl-note { color: #333; font-style: italic; }
/* Sub-rows (e.g. "Run:" under SN/CAR) are indented to read as a secondary stat
   under the primary. They inherit the .pbl text-indent:-10px hang, so padding-left
   22px nets the first line ~12px in (past the main labels) and wrapped lines align
   at 22px — and it stays >= 10px so it never clips at the board's overflow edge. */
.pb-card-board .pbl-sub { padding-left: 22px; }
.pb-card-board .pbl-sub-lbl { font-weight: 800; color: #8a631c; font-size: 1em; }
.pb-card-board .pbl-rule { border-top: 1px solid #ddd; margin: 1px 0; height: 0; font-size: 0; }
.pb-card-board .pbl-inj, .pb-card-board .pbl-inj-line { color: #c03020; font-weight: 700; }
/* Right-justify the red injury designation line on the printed card. */
.pb-card-board .pbl-inj-line { text-align: right; padding-left: 0; text-indent: 0; }
.pb-card-board .pbl-sal, .pb-card-board .pbl-sal-line { color: #2a7a3a; font-weight: 700; }
/* Salary line is right-justified (reset the hang-indent so it sits flush right). */
.pb-card-board .pbl-sal-line { text-align: right; padding-left: 0; text-indent: 0; }
.pb-card-board .pbl-scratch { color: #b8740c; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.pb-card-board .pbl-head { font-weight: 800; color: #8a631c; text-transform: uppercase; letter-spacing: 0.5px; font-size: 1em; margin: 1px 0 0; }
.pb-card-board .pbl-bullet { padding-left: 8px; text-indent: -6px; }
.pb-card-board .pbl-bullet::before { content: "\2022"; color: #c03020; margin-right: 4px; }
/* ADVANCED / NGS bullets pack into 2 columns -- the single biggest vertical
   saver when advanced stats are on (the worst offender for card height). */
.pb-card-board .pbl-cols { column-count: 2; column-gap: 8px; }
.pb-card-board .pbl-cols .pbl-bullet { break-inside: avoid; -webkit-column-break-inside: avoid; }
.pb-card-board .pbl-ngs-rank { margin-left: 4px; font-weight: 700; }
.pb-card-board .pbl-ngs-hi { color: #2a7a3a; }
.pb-card-board .pbl-ngs-lo { color: #c03020; }
.pb-card-board .pbl-tp { margin-top: 2px; color: #222; font-family: 'Barlow', sans-serif; font-size: 11px; font-weight: 500; line-height: 1.35; }

/* v18: card-compact hides bottom content AND shrinks card */
.pb-card.pb-card-compact .pb-card-notes,
.pb-card.pb-card-compact .pb-card-write,
.pb-card.pb-card-compact .pb-card-contract,
.pb-card.pb-card-compact .pb-card-stat:not(:first-of-type) {
  display: none;
}
.pb-card.pb-card-compact .pb-card-num { font-size: 22px; min-width: 32px; }
.pb-card.pb-card-compact .pb-card-last { font-size: 16px; }
.pb-card.pb-card-compact { max-height: 80px; }

@media print {
  /* 17in x 11in = tabloid in landscape. Explicit dimensions ONLY (no `landscape`
     keyword) -- combining lengths with an orientation keyword is invalid CSS and
     browsers silently drop it, falling back to Letter. This valid form makes
     Chrome default the print dialog to Tabloid. */
  @page { size: 17in 11in; margin: 0.15in; }
  * { box-sizing: border-box !important; }
  body { background: #fff !important; color: #000 !important; margin: 0 !important; padding: 0 !important; }
  .hdr, .navtabs, .toolbar, .src-bar, .view:not(#printView), .mbg, .cmbg,
  .pb-controls, .pvhdr, .pp-page, .dc-board, .dc-tabs { display: none !important; }
  .pb-notes-toolbar { display: none !important; }
  .pb-card-collapse { display: none !important; }
  #printView { display: flex !important; flex-direction: column; padding: 0 !important; margin: 0 !important; }
  .print-pad { padding: 0 !important; margin: 0 !important; }
  .pb-page {
    border: none !important; margin: 0 !important; padding: 0 !important;
    width: 16.7in !important; height: 10.7in !important;
    max-height: 10.7in !important; overflow: hidden !important;
    transform: none !important; /* undo the on-screen fit-to-width scale */
    break-after: page !important; page-break-after: always !important;
  }
  .pb-card { break-inside: avoid; cursor: default !important; }
  .pb-col-hdr { cursor: default !important; }
  .pb-col-hdr-grip { display: none !important; }
  .pb-ol-toggle, .pb-mode-toggle, .pb-ctrl-btn, .pb-reset-cols-btn, .pb-help-pill { display: none !important; }
  .pb-sb-notes-area { background-color: transparent !important; }
  .pb-sb-notes-area mark, .pb-sb-notes-area .hl, .pb-sb-notes-area .hb-hl,
  .pb-card .hb-hl {
    background: #fff200 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .pb-card-num, .pb-card-badge, .pb-card-inj,
  .pb-card-stat, .pb-card-nl::before, .pb-card-write,
  .pb-sb-ban, .pb-sb-teamname, .pb-sbc-hd, .pb-sb-pill, .pb-sb-crest,
  .pb-ol-starter, .pb-ol-backup, .pb-card-bio-acq {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}