/* ============================================================================
   CARD GEOMETRY — where the card constants live
   JD's ruling, said for two weeks and made law 2026-08-21 (d892).
   ============================================================================

   THE RULE, IN ONE LINE. A number that is the same on every card belongs here.
   A number that comes from the data stays inline.

   So this file holds boxes: width, height, the edge a thing is anchored to, the
   inset it sits at. The component keeps hues (`owner.hex`, `POS_HEX`), image
   sources, opacity that depends on state, and any number computed from a
   measurement. Those are per-card facts, and a stylesheet cannot know them.

   WHY IT IS NOT IN THE BRAND SHEET. `public/brand.css` is GENERATED from the
   three ruled chapters and hand-editing it is thrown away on the next build.
   These are a component's own boxes, not brand steps, so they get their own
   file that is written by hand and read by people.

   HOW IT WINS, AND WHY NOT A LAYER. Every rule here is written with its class
   doubled — `.pcx-pill.pcx-pill` — which is two classes of specificity and
   beats any single-class rule in `brand.css` or a Tailwind utility, whatever
   order the sheets load in. A `@layer` would have done it the other way and
   LOST: brand.css is unlayered, and an unlayered rule beats a layered one no
   matter which came first. Specificity is the tool that works here.

   The doubling is deliberate and is not a mistake to tidy up.

   WHAT IS NOT ALLOWED BACK. `scripts/check-canonical.mjs` refuses a NEW inline
   `top` / `right` / `bottom` / `left` / `width` / `height` written as a
   constant in the canonical card files. A value read off a prop or a state
   variable still passes: that is the line this file draws.
   ========================================================================= */


/* ── THE CANONICAL PLAYER CARD ───────────────────────────────────────────────
   src/components/city/PlayerHeadshotCard.tsx

   The card is 220 x 56 in its v2 form. The two pills are the same object on
   opposite edges: jersey over position on the left, injury over owner on the
   right. Same width, same height, same bottom. A reader who has learned one
   edge has learned the other, and that is only true while these four numbers
   are one set rather than two.

   PILL BOTTOM IS 23. It was 22, the old 12px badge's bottom on a 56 card, and
   JD's reading of y -1 on the draft cell's jersey pill (d892 amendment 3)
   trickles here by his own instruction (amendment 4): one constant governs both
   sides on both card kinds. Move it and four things move together, which is the
   whole reason it is one line.

   THE CARD CARRIES ITS OWN FACE. `.d2card` sets `font: 13px/1.45 Inter` on the
   player-card wrapper, and that inherited Inter is what made the WR half of
   this pill a different object than the same pill on /scoring. Scoring sits in
   `.b-scope` and reads Barlow Semi Condensed. The pill is 13 wide and the
   kicker is 9.5; Inter does not fit, Barlow does. Stated on the shell so any
   wrapper that sets a font loses, not only d2card.
   ------------------------------------------------------------------------- */

.b-card-shell.b-card-shell {
  font-family: var(--brand-font-text);
  letter-spacing: var(--brand-track-floor);
}

.pcx-pill.pcx-pill {
  position: absolute;
  bottom: 23px;
  /* ONE WIDER, INWARD (JD, d898). Both pills grow toward the middle of the
     card, which happens by itself: each is anchored to its own outer edge, so
     the extra pixel can only go the other way. */
  width: 13px;
  height: 26px;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 20;
  /* The hairline. See the note at the left pill's call site: a 0.5px BORDER is
     rounded to whole device pixels and disappears at a 3x ratio, an inset
     shadow is not. `transparent` by default, so the right pill, which draws no
     line, is unchanged. */
  box-shadow: inset 0 0 0 0.5px var(--pcx-ink, transparent);
}

/* THE LEFT PILL IS ONE LOWER THAN THE RIGHT (JD, d896 amendment 1: pill y +1,
   rightpill 0). His two readings, and they are not the same number, so the two
   bottoms are stated separately rather than shared. If they ever go back to one
   value, this is the line to delete. */
/* x +0.5 on the left, x -0.5 on the right (JD, d898). Both readings move the
   pill AWAY from its own edge by half a pixel, which is why the two numbers
   have opposite signs and the same effect. */
.pcx-pill-left.pcx-pill-left { left: 3.5px; bottom: 22px; }
.pcx-pill-right.pcx-pill-right { right: 3.5px; }

/* The half a pill's second fact sits in: position on the left, owner on the
   right. Square, and the same square on both edges, so the two pills are halves
   for halves rather than roughly the same height. */
.pcx-pill-half.pcx-pill-half {
  flex-shrink: 0;
  height: 12px;
  /* THE PILL'S CONTENT BOX, NOT ITS 13 (JD, d898). Stated as 100% because the
     pill carries a 0.5px border: a flat 13 made the half one wider than the room
     inside it, the pill clipped that pixel, and the centred glyph sat half a
     pixel off the middle it was centred in. Measured: scrollWidth was 1 over
     clientWidth on every card. */
  width: 100%;
  /* CENTRED GLYPHS (JD, d898): the position letters and the team initials sit
     in the middle of their half. The mark inside is a fixed 12, so without this
     it hangs on the leading edge of the wider box. */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* THE OWNER MARK HOLDS ONE POSITION IN EVERY STATE (JD, standing law, restated
   d892 amendment 1). Injured or not, drafted or rostered, at 119 or 220, the
   mark's bottom is 23 from the card's bottom edge: inside the pill it is the
   pill's lower half, and with no injury it is the same box in the same place
   with no pill drawn round it. ONE NUMBER, HERE, so the two paths cannot fork.
   Measured across every state and all three widths: 23 from the bottom edge,
   with the 1px card border. */
/* The lone owner mark keeps the 12 box the mark itself is: it has no pill round
   it to fill, and widening it would move the mark off the pill's centre line. */
.pcx-owner-slot.pcx-owner-slot {
  position: absolute;
  /* y +1 (JD, d896 amendment 1: owner). Same delta the in-pill half takes. */
  bottom: 22px;
  right: 3px;
  width: 12px;
  height: 12px;
  z-index: 20;
  /* FLEX, AND THIS IS THE WHOLE BUG (JD, d895). The box was in the right place
     in both states; the MARK inside it was not. `FantasyTeamMark` is
     inline-flex, so in a block wrapper it sits on the text baseline and drops.
     Measured on the gm keeper cards at 390: the healthy mark's bottom was 14.61
     from the card's bottom edge against the injured one's 24, which is 9.39
     lower, and that is what he saw.

     d888 found this on the injured path and made that wrapper flex. It never
     reached here, and one constant for the BOX could not have caught it,
     because the box was never wrong. Both wrappers are flex now, from one rule
     each, so the two paths cannot drift again. */
  display: flex;
  overflow: hidden;
}

/* The injury half. Red on transparent, no tile and no ring: the card's ground
   shows through it the way it shows through the jersey number opposite. */
.pcx-cross.pcx-cross {
  flex: 1 1 0%;
  display: grid;
  place-items: center;
  position: relative;
  left: 0.5px;
  /* y +1.5 (JD, d896 amendment 1: hurt). */
  top: 1.5px;
}

/* THE LONE CROSS SITS WHERE THE PILL'S CROSS SITS (JD, d906, and it is his
   standing law: the same thing in the same place in every state). With an owner
   the cross is the pill's top half; with no owner there is no pill to be a half
   of, and this branch had never been brought along. It still drew the card's
   old corner mark: a red rounded tile with a white glyph, on the photo's
   bottom-right corner.

   THE NUMBERS ARE THE PILL'S, RESOLVED. The right pill is at right 3.5 with its
   bottom 23 up; its top half is 14 of the pill's 26, so that half's bottom is
   12 above the pill's, at 35. `.pcx-cross` then nudges left 0.5 and top 1.5,
   which lands the painted box at right 3 and bottom 33.5. Measured on the
   registry before this existed: right 4, bottom 34.5 off the card's border box,
   13 by 14, transparent, rgb(176, 30, 40), radius 0. This matches it.

   Written out rather than derived because a stylesheet cannot do the flex
   arithmetic that produced them. If the pill's height or its bottom changes,
   these two numbers move with it, and the note above is how to redo them. */
.pcx-cross-lone.pcx-cross-lone {
  position: absolute;
  right: 3px;
  bottom: 33.5px;
  width: 13px;
  height: 14px;
  display: grid;
  place-items: center;
  z-index: 20;
}

/* THE OWNER MARK, ONE LOWER (JD, d896 amendment 1: owner y +1). Both paths, so
   the law that it holds one position in every state still holds: inside the
   pill it is a relative nudge on the half, and standing alone it comes off the
   slot's own bottom. Two lines, one number. */
.pcx-pill-half[data-tune-owner] { position: relative; top: 1px; }

/* THE STATUS LINE, THREE LOWER (JD, d896 amendment 1: statusline y +3). The
   solo status the either-or rule draws where the stat lines would have been. */
.pcx-statusline.pcx-statusline { position: relative; top: 3px; }

/* THE NAME COLUMN'S LEFT (JD, d898: name x +1, so 19). It was `MOCK_NAME_L`
   inline in the component, which is a constant and belongs here by the d892
   ruling. The number is what keeps the name clear of the pill, so it moves when
   the pill widens. */
.pcx-name.pcx-name { left: 19px; }

.pcx-bye.pcx-bye {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
}

/* ONE TYPE SIZE FOR BOTH PILLS (JD, d898 amendment 1). The left pill's position
   text is 7px and `FantasyTeamMark` ships at the 7.5 mark step, so the two
   halves of one mirrored object were set in different sizes. Stated once, on
   the half, so a change reaches both edges at the same time. */
.pcx-pill-half.pcx-pill-half,
.pcx-pill-half .b-step-mark,
.pcx-owner-slot .b-step-mark,
[data-tune-jersey][data-tune-jersey],
[data-tune-pos][data-tune-pos] { font-size: var(--brand-card-size-kicker); }

@media (max-width: 1151px) {
  .pcx-pill-left.pcx-pill-left {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  .pcx-pill-left [data-tune-jersey][data-tune-jersey] {
    font-size: var(--brand-card-size-mark);
  }
}

[data-mocksub][data-mocksub] { font-size: var(--brand-card-size-chip); }

[data-score-actual][data-score-actual] {
  font-size: var(--brand-card-size-name);
  font-weight: var(--brand-weight-700);
  font-style: normal;
  line-height: 1;
}
[data-score-under="proj"][data-score-under="proj"] {
  font-size: var(--brand-card-size-chip);
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}


/* ── THE DRAFT BOARD'S CELL ──────────────────────────────────────────────────
   src/components/draft/PlayerCard.tsx

   96 x 28 at the board's design minimum, and fluid above it: the cell takes its
   width from the column. So the numbers here that are percentages are the ones
   that must track the column, and the numbers in px are the ones measured off
   an edge and ruled to stay put.
   ------------------------------------------------------------------------- */

/* The team mark, three quarters of the box it used to fill and twelve left of
   where it sat (JD, d890, off the tuner). */
.dcx-logo.dcx-logo {
  position: absolute;
  top: 12.5%;
  height: 75%;
  width: 41.25%;
  right: 18.6px;
  z-index: 0;
}

/* The headshot, grounded on the bottom edge like the city card's.

   A QUARTER BIGGER (JD, d892 amendment 5: size 1.25, from the baked state, and
   it supersedes the earlier reading). 28.6 x 26.4 grown a quarter about its own
   centre is 35.75 x 33, which puts its right at 0.125 and its bottom at -2.5.
   The picture is taller than the 28 cell now and the cell clips it, which is the
   crop reading as a photograph rather than a cut-out. */
.dcx-face.dcx-face {
  position: absolute;
  width: 35.75px;
  height: 33px;
  right: 0.125px;
  bottom: -2.5px;
  z-index: 1;
}

/* Both pills, and the cell's are the canonical card's at the cell's scale: 24
   tall inside a 28 cell rather than 26 inside 56. CENTRED BY `top`, NEVER BY A
   TRANSFORM — the registry tuner writes `transform: … !important` on these
   selectors, and a translate-based centring vanishes the moment a slider
   renders. That cost a dispatch (d890). */
/* TOP 1, HIS READING (JD, d892 amendment 3: jersey pill y -1). One line, and it
   moves the right pill with it because they are the same class, which is the
   mirror holding by construction rather than by care. */
.dcx-pill.dcx-pill {
  position: absolute;
  top: 1px;
  width: 12px;
  height: 24px;
  border-radius: 3px;
  z-index: 20;
}

.dcx-pill-left.dcx-pill-left { left: 2px; display: flex; flex-direction: column; overflow: hidden; }
.dcx-pill-right.dcx-pill-right { right: 2px; display: flex; flex-direction: column; align-items: center; overflow: visible; }

.dcx-inj-letter.dcx-inj-letter {
  flex: 1 1 0%;
  align-self: flex-end;
  width: max-content;
  min-width: 12px;
  display: grid;
  place-items: center end;
  white-space: nowrap;
  overflow: visible;
  text-align: right;
}

.dcx-bye.dcx-bye {
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 30;
  pointer-events: none;
  line-height: 1;
  font-size: 7px;
  font-weight: 700;
  text-shadow: 0 0 2px #04070B, 0 1px 1px #04070B;
}

.dcx-pill-half.dcx-pill-half { flex-shrink: 0; height: 11px; }

/* The lone position badge, for a cell with no shirt number. Same centre as the
   pill that replaces it, stated the same way. */
.dcx-badge.dcx-badge {
  position: absolute;
  top: 7px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: grid;
  place-items: center;
  z-index: 20;
}

/* TEN LEFT OF THE OWNER MARK (JD, d890 amendment 6). Measured off the same
   right edge the mark is: the mark is 12 wide at an inset of 2, so its left
   edge is 14 out, and this sits ten further. The ten holds at any cell width
   because neither number is a percentage. */
.dcx-trade-arrow.dcx-trade-arrow {
  position: absolute;
  /* TWENTY, WHICH IS THE TEN MINUS FOUR HE ASKED FOR (JD, d892 amendment 2,
     item 4). The mark is 12 wide at an inset of 2, so its left edge is 14 out;
     ten put the arrow at 24 and four closer puts it at 20.

     THE ARROW GREW A SHAFT at amendment 4 and is 10 wide rather than 5. It is
     still anchored by its right edge, so the head stays where it was and the
     body grows away from the mark. */
  /* AND TWO RIGHT (JD, d897), so 18. */
  right: 18px;
  z-index: 20;
  /* THE POINT CENTRES ON THE BADGE (item 2). The arrow is 8 tall and its apex
     is at its own middle, so aligning the two boxes' centres aligns the point
     with the mark. The mark is the pill's lower half: 12 tall, sitting at the
     pill's bottom, and the pill is 24 tall at top 2. So the mark's centre is
     20 down the cell and this box's top is that less half of 8. The pill moved
     up one at amendment 3, so this moved with it. */
  top: 15px;
}

/* THE FULL SITE TEAL, NO WASH (JD, d896 amendment 3). It was #008C95, which is
   what the board's T has always drawn in, and on the cells both read washed
   out. #3BE6FF is `--brand-teal`, the site's own value, and it is written out
   rather than referenced because the token does not resolve at this node:
   measured on dev, the fill fell back instead of taking it.

   The T on the board takes the same value from `TRADE_TEAL` in
   `src/components/draft/PlayerCard.tsx`. Two writers for one colour is not
   ideal and is noted; the arrow is the one this sheet owns. */
.dcx-trade-arrow.dcx-trade-arrow { fill: #3BE6FF; }

/* THE OWNER MARK'S INITIALS MATCH THE POSITION LETTER OPPOSITE (item 3). The
   left pill's letter is 7px/700, and `FantasyTeamMark` ships at the 7.5 mark
   step. Scoped to this pill so the mark is unchanged everywhere else. */
.dcx-pill-right .b-step-mark { font-size: 7px; }

/* The name block, two px down (JD, d890, off the tuner). Height is kept by
   pulling the bottom the same two, so the block's centre moves rather than the
   block getting shorter. */
.dcx-name.dcx-name {
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  bottom: -2px;
  z-index: 10;
}