/* ==========================================================================
   ROUND 49 (owner, 2026-10-16): "on the trail menu when you select your
   companion the companions are all compressed down, fix that."

   THE CAUSE (measured at 390 x 844, docs/qa/round49/companions/before-picker-390x844.jpg):
   `companionEl()` (ui/icons.js) returns the painted cast portrait as an <img>
   whose width and height attributes are both the same number (40 in the
   picker tiles, 28 on the Ready? card, 26 on the Trail chip), and no rule gave
   it an object-fit, so the browser used the default `fill`: a 238 x 512
   painting (Chestnut) became a 40 x 40 square, 2.15 times too wide for its
   height. The seven portraits are 229 to 455 px wide and all 512 tall, so
   their true width-to-height ratios are 0.447 to 0.889 and every one of them
   was squeezed to 1.0.

   THE FIX, in three parts, all here (nothing in styles.css or round36 moves):
   1. Every painted companion face keeps its proportions: `object-fit` is
      never `fill`. In the small square avatar slots (the Trail chip, the
      dialogue ability button, the Settings and Checklist lists) it is
      `cover`, aligned to the top: head and shoulders at true proportions,
      a full body 12 px wide being unreadable at 26 px tall.
   2. In the picker tiles (the Trail's companion sheet and the companion gate)
      the figure is drawn whole, 88 px tall (84 on the gate's rows) with its
      natural width: Sorrel 39 px wide, Thistle 78 px.
   3. On the Ready? card's Partner row the figure is drawn whole at 52 px tall.
      The row grows from 58 px (the 44 px Change partner button plus 14 px of
      padding) to 68 px (measured at 375 x 667); the card still fits.

   Tap targets: a picker tile is a whole <button> at least 100 px wide and
   150 px tall (the base rule was 108 px tall); the Ready? card's Change
   partner button keeps its 44 px minimum; the sheet's close button is the
   shared 48 px icon button.
   ========================================================================== */

/* 1. Never stretched. The procedural <svg> stand-in keeps its own viewBox. */
.pb-painted.pb-companion__face {
  object-fit: cover; object-position: 50% 4%;
}

/* 2a. The Trail's companion sheet (levelSelect.js) and the gate's rows
   (companionGate.js, which carries both class names): a whole figure. */
/* `grid-auto-rows: max-content`: the sheet is a height-limited flex column and the grid inside it scrolls, and a grid
   with a definite height only grows an `auto` row into spare room (measured at 375 x 667: three rows held at the tile's
   150 px min-height while the two-ability tiles needed 180, so the text spilled out of the bottom of the tile; the Round 22
   gate comment above describes the same grid behaviour). max-content sizes each row to its tallest tile whatever the room. */
.pb-companionSheet__grid { gap: 10px; padding: 4px 2px 8px; grid-auto-rows: max-content; }
.pb-companionSheet__tile {
  min-height: 150px; padding: 10px 8px 10px; gap: 4px;
}
.pb-companionSheet__tile .pb-companion__art {
  display: flex; align-items: flex-end; justify-content: center; flex: 0 0 auto;
  width: 100%; height: 88px; margin-top: 0;
}
.pb-companionSheet__tile .pb-companion__art .pb-painted.pb-companion__face {
  width: auto; height: 88px; max-width: 100%;
  object-fit: contain; object-position: 50% 100%;
}
/* The "Alone" dash and the vector stand-in sit in the middle of the same frame. */
.pb-companionSheet__tile .pb-companion__art .pb-companion__solo,
.pb-companionSheet__tile .pb-companion__art svg.pb-companion__face { align-self: center; }
.pb-companionSheet__tile .pb-companion__art svg.pb-companion__face { width: 64px; height: 64px; }
.pb-companionSheet__tile .pb-companion__lock { right: 6px; bottom: 2px; }

/* 2b. The companion gate: the figure on the left of a full-width row. */
.pb-companionGate__tile { min-height: 0; gap: 12px; padding: 12px 14px; }
.pb-companionGate__tile .pb-companion__art {
  width: auto; height: auto; flex: 0 0 auto; align-self: flex-start; margin-top: 2px;
}
.pb-companionGate__tile .pb-companion__art .pb-painted.pb-companion__face { height: 84px; max-width: 76px; }
.pb-companionGate__tile .pb-companion__art .pb-companion__solo,
.pb-companionGate__tile .pb-companion__art svg.pb-companion__face { width: 56px; height: 56px; }
.pb-companionGate__tile .pb-companion__lock { right: -4px; bottom: 0; }
.pb-companionGate__body > .pb-companionSheet__ability { text-align: left; font-size: 11.5px; }

/* 3. The Ready? card's Partner row (levelSelect.js and companionGate.js
   both build it with `readyRow()`; only this row holds a companion face, so
   the :has() match leaves the Weapon row's 34 px art column alone). */
.pb-row.pb-ready__row:has(> .pb-ready__art > .pb-painted.pb-companion__face) {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}
.pb-ready__art:has(> .pb-painted.pb-companion__face) { width: 48px; height: 52px; }
.pb-ready__art > .pb-painted.pb-companion__face {
  width: auto; height: 52px; max-width: 48px; object-fit: contain; object-position: 50% 100%;
}
@media (min-width: 560px) {
  .pb-row.pb-ready__row:has(> .pb-ready__art > .pb-painted.pb-companion__face) {
    grid-template-columns: 64px 48px minmax(0, 1fr) auto;
  }
}