/* ======================================
   INVENTORY
   ====================================== */

/* Worn slots: one per line at every width (maggie, 2026-09-23: "one per line,
   not two rows") - two columns clipped the item names. */
.inv-slots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
}

.inv-slot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  background: var(--bg-base);
  min-height: 2.4rem;
  min-width: 0;            /* let the cell shrink so the name ellipsizes instead of overflowing */
  position: relative;
  transition: border-color 0.15s;
}

.inv-slot.filled  { background: var(--bg-surface); border-color: var(--border-bright); }
.inv-slot.empty   { border-style: dashed; }
.inv-slot-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  width: 5.25rem;   /* the Polish "Ring" ran into the item name at 3.5rem */
  flex-shrink: 0;
}
.inv-slot-name {
  flex: 1;
  font-size: 0.78rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-slot-empty-hint {
  flex: 1;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}
.inv-slot-bonus {
  font-size: 0.72rem;
  color: var(--accent-gold);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.inv-slot-unequip, .inv-slot-words {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0.1rem 0.25rem;
  border-radius: 3px;
  line-height: 1;
  flex-shrink: 0;
}
.inv-slot-unequip { transition: color 0.15s; }
.inv-slot-unequip:hover { color: var(--text-danger); }

/* Carried section header */
.inv-carried-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-dim);
}
.inv-weight-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}
.inv-weight-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-base);
  overflow: hidden;
  border: 1px solid var(--border-dim);
}
.inv-weight-fill {
  height: 100%;
  background: var(--bar-fill-gradient);
  border-radius: 3px;
  transition: width 0.3s;
}
.inv-weight-fill.overweight { background: var(--text-danger); }
.inv-weight-label {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Item rows (carried + owned share this) */
.inv-item-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.inv-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  background: var(--bg-surface);
  transition: border-color 0.15s;
}
.inv-item-row:hover { border-color: var(--border-bright); }
.inv-item-icon {
  font-size: 0.9rem;
  width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
}
.inv-item-info { flex: 1; overflow: hidden; }
.inv-item-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  row-gap: 0.1rem;
  align-items: center;
  margin-top: 0.1rem;
}
.inv-item-weight {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.inv-item-bonus {
  font-size: 0.72rem;
  color: var(--accent-gold);
  font-family: var(--font-mono);
}
/* WHAT THE THING IS, UNDER ITS NAME (maggie, 2026-08-17).
   The blurb and the "worn on" chip drawn by itemBlurbHtml / itemSlotChipHtml in
   js/ui/helpers.js. Two lines then an ellipsis: some descriptions run to 220
   characters and a shelf of paragraphs is no easier to read than a shelf of
   bare names. The row itself is left alone: `.inv-item-row` is borrowed by the
   Crown's finance and salary lists in ui/court.js, which carry no blurb, and
   re-aligning it would move those for no reason. */
.inv-item-desc {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.inv-item-slot {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.inv-item-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}
/* THE ANIMALS TAB (2026-09-24): a horse carries up to five buttons, so on this
   tab they take a line of their own under the name instead of squeezing it. */
#animals-list .inv-item-row { flex-wrap: wrap; }
#animals-list .inv-item-actions { flex-basis: 100%; flex-wrap: wrap; padding-left: 1.7rem; }
/* ROOM BETWEEN ONE ANIMAL AND THE NEXT (maggie, 2026-09-27: "add a bit of
   padding between different horses or other animals on the market and in the
   lists, cause they are too much together"). About 10px between two animals:
   the Animals tab adds 0.3rem to its list's own 0.3rem gap; the market's
   stalls, Sell list and players' market have no gap, so a row marked
   `animal-row` (ui/market.js, ui/player-market.js) takes the whole 0.6rem.
   Only animal-to-animal - a list of swords is left as it was. */
#animals-list > .inv-item-row + .inv-item-row { margin-top: 0.3rem; }
.inv-item-row.animal-row + .inv-item-row.animal-row { margin-top: 0.6rem; }
/* THE ITEM PILLS ARE EMBER TOO (maggie, 2026-08-10). Buy, Sell, Equip, Take:
   the same pale-on-pale slab as the plain `.btn` was, in the one screen where a
   player presses a button forty times in a row. Same ruling, same colour - see
   the long note on `.btn` in components/controls.css. Kept as PILLS (999px, the
   small type): they sit inside a row of goods, not on a form, and turning them
   into full buttons would push the price out of every line. */
/* 2026-09-17: onto the button tokens. White on --accent-ember measured 3.4:1,
   and the hover below was a fixed orange that light mode never reached. */
.inv-btn {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--btn-edge);
  background: var(--btn-fill);
  color: var(--btn-ink);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.inv-btn:hover:not(:disabled) { background: var(--btn-fill-hover); border-color: var(--btn-edge); }
/* A button that names its own colour inline (the red "Cut losses") keeps it on
   no fill - red on brick could not be read. The .btn convention in
   controls.css, "a button that names its own colour keeps its own look". */
.inv-btn[style*="color"],
.inv-btn[style*="color"]:hover:not(:disabled) { background: transparent; }
/* The two that are not a purchase keep a colour of their own on hover, as
   before - gold for equipping what you own, green for picking a thing up. */
.inv-btn.inv-btn-equip:hover:not(:disabled) { background: var(--accent-gold); border-color: var(--accent-gold); color: #14100c; }
.inv-btn.inv-btn-pickup:hover:not(:disabled) { background: #4caf50; border-color: #4caf50; color: #fff; }
.inv-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.inv-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.25rem 0;
}

/* Owned section location group header */
.inv-location-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0.5rem 0 0.25rem;
  padding-left: 0.1rem;
}
.inv-location-label:first-child { margin-top: 0; }


/* == THE EDGE ON A FAMILY HEIRLOOM =========================================
   A thing a line keeps reads differently on the shelf: a violet border, a
   faint violet wash, a soft glow and a slow sheen that crosses it, on the worn
   tile and on the row alike, so one look down the pack finds it (maggie,
   2026-09-22: "purple, a border and some shine"). The crown's template flag
   and the Family Heirloom's record both earn it. The panel underneath holds the
   words its owner left with it and the names of everyone who has held it
   since; it is filled with textContent by invHeirloom() in ui/world.js, never
   with markup. */
.inv-heirloom-edge,
.inv-slot.filled.inv-heirloom-edge {
  position: relative;
  overflow: hidden;
  border-color: var(--accent-violet);
  border-left-width: 3px;
  background: color-mix(in srgb, var(--accent-violet) 9%, var(--bg-surface));
  box-shadow: 0 0 0.6rem color-mix(in srgb, var(--accent-violet) 30%, transparent),
              inset 0 0 1.2rem color-mix(in srgb, var(--accent-violet) 12%, transparent);
}
.inv-heirloom-edge:hover { border-color: var(--accent-violet); }
.inv-heirloom-edge::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%,
              color-mix(in srgb, var(--accent-violet) 28%, transparent) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: inv-heirloom-sheen 6s ease-in-out infinite;
}
@keyframes inv-heirloom-sheen {
  0%, 60% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) { .inv-heirloom-edge::after { animation: none; } }
.inv-heirloom-tag { color: var(--accent-violet); }
.inv-heirloom {
  margin-top: 0.35rem;
  padding: 0.4rem 0.55rem;
  border-left: 2px solid var(--accent-gold);
  border-radius: 0 4px 4px 0;
  background: var(--bg-surface);
}
.inv-heirloom-words {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--text-secondary);
  white-space: pre-wrap;
}
.inv-heirloom-line {
  margin: 0.35rem 0 0;
  font-size: 0.66rem;
  color: var(--text-muted);
}
.inv-heirloom-line:empty { display: none; }
/* The worn tile has no actions row, so its button sits in the tile beside the
   unequip cross, wearing the same shape as it. */
.inv-slot-words { color: var(--accent-gold); }   /* the shape is .inv-slot-unequip's, above */
.inv-slot-words:hover { color: var(--text-primary); }
/* The shared panel under the worn grid spans the whole shelf. */
#inv-heirloom-worn { margin: 0.5rem 0 0; }

/* -- WHAT KIND OF THING (the QoL pass, 2026-09-18, item 3.1) ----------- */
/* Carried is grouped under the Market's own headings now. Quiet by design: it
   is a divider, not a title - the eye should find the group and move on. */
.inv-group-head {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin: 0.6rem 0 0.25rem;
  border-bottom: 1px solid var(--border-dim); padding-bottom: 0.15rem;
}
.inv-group-head:first-child { margin-top: 0; }

/* -- A STORE THAT FOLDS (the QoL pass, 2026-09-18, item 3.2) ----------- */
.inv-store-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; cursor: pointer; min-height: var(--tap-min); }
.inv-store-head:hover { color: var(--accent-gold); }

/* -- THE EDGE OF AN ITEM (maggie, 2026-09-24) -------------------------- */
/* Two families, one per tile, chosen by itemBorderClass() in ui/helpers.js:
   the heirloom edge above wins, then a horse's coat, then the border bought at
   the Tailor & Forge. The ids and names are client/data/item-borders.json; each
   id is one class here.

   NOTHING BELOW MAY LOOK LIKE AN HEIRLOOM. No violet, no --accent-violet, no
   inv-heirloom-sheen and no ::after sweep across the tile - the heirloom's
   moving light is the one edge no gold can buy.

   The ring is painted as a background under a transparent border (the fill is
   clipped to the padding box, the pattern to the border box), which keeps the
   rounded corners and lets a border carry a gradient, a pattern or a moving
   light. :is() lifts it over `.inv-slot.filled` and the row's :hover. */
:is(.inv-slot, .inv-item-row).item-border {
  --ib-edge: var(--border-bright);
  --ib-fill: color-mix(in srgb, var(--ib-edge) 7%, var(--bg-surface));
  border-color: transparent;
  border-left-width: 3px;
}

:is(.inv-slot, .inv-item-row).item-border-gilded {
  --ib-edge: var(--accent-gold);
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(135deg, #f4dc8a, var(--accent-gold) 35%, #8a6a1e 65%, #f0d27a) border-box;
}
:is(.inv-slot, .inv-item-row).item-border-silvered {
  --ib-edge: #a9b0ba;
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(135deg, #f2f4f7, #a9b0ba 35%, #5f666f 65%, #e3e7ec) border-box;
}
:is(.inv-slot, .inv-item-row).item-border-bronze {
  --ib-edge: #a8672f;
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(135deg, #e0a468, #a8672f 35%, #6b3f1a 65%, #cf9056) border-box;
}
:is(.inv-slot, .inv-item-row).item-border-blackened_iron {
  --ib-edge: #3a3a3f;
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(135deg, #5f5f64, #2a2a2e 40%, #111113 70%, #48484d) border-box;
}
/* Pale bark with the red of the leaves down the leading edge. */
:is(.inv-slot, .inv-item-row).item-border-weirwood {
  --ib-edge: #d9cfbe;
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(90deg, #a3201a 0 3px, #ece4d4 3px 55%, #cfc4b0 80%, #b3261e) border-box;
}
:is(.inv-slot, .inv-item-row).item-border-jade {
  --ib-edge: #2e8b57;
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(135deg, #8fd9ad, #2e8b57 40%, #1d5c3a 70%, #6fbf8f) border-box;
}
:is(.inv-slot, .inv-item-row).item-border-sapphire {
  --ib-edge: #1f4fbf;
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(135deg, #8fb4ff, #1f4fbf 40%, #122e75 70%, #5f8cf0) border-box;
}
:is(.inv-slot, .inv-item-row).item-border-crimson_lacquer {
  --ib-edge: #a3141f;
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(160deg, #f0606a, #a3141f 30%, #5a0710 75%, #c42633) border-box;
}
:is(.inv-slot, .inv-item-row).item-border-bone {
  --ib-edge: #cfc4a8;
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(135deg, #f4eedf, #d6ccb2 40%, #a89a78 75%, #e8dfc8) border-box;
}
:is(.inv-slot, .inv-item-row).item-border-obsidian {
  --ib-edge: #16181e;
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(135deg, #4a5060, #0b0c10 30%, #1c1f27 60%, #07080a 80%, #3a3f4a) border-box;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #9aa3b5 25%, transparent);
}

/* -- the moving ones -- */
:is(.inv-slot, .inv-item-row).item-border-ember_flicker {
  --ib-edge: var(--accent-ember);
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(135deg, #ffb347, var(--accent-ember) 40%, #8e2a10 75%, #ff7a2e) border-box;
  animation: ib-ember-flicker 2.6s linear infinite;
}
@keyframes ib-ember-flicker {
  0%, 100% { box-shadow: 0 0 0.3rem color-mix(in srgb, #ff7a2e 35%, transparent); }
  18%      { box-shadow: 0 0 0.6rem color-mix(in srgb, #ff9a3c 60%, transparent); }
  32%      { box-shadow: 0 0 0.2rem color-mix(in srgb, #ff7a2e 25%, transparent); }
  51%      { box-shadow: 0 0 0.7rem color-mix(in srgb, #ffb347 55%, transparent); }
  66%      { box-shadow: 0 0 0.35rem color-mix(in srgb, #ff7a2e 30%, transparent); }
  80%      { box-shadow: 0 0 0.55rem color-mix(in srgb, #ff9a3c 50%, transparent); }
}
/* A cold light that runs along the ring itself, never across the tile. */
:is(.inv-slot, .inv-item-row).item-border-frost_shimmer {
  --ib-edge: #7fb3e0;
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(110deg, #9cc6ea 0%, #5f93c4 20%, #f2f9ff 30%, #5f93c4 40%, #9cc6ea 60%, #5f93c4 80%, #9cc6ea 100%) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: ib-frost-shimmer 5s ease-in-out infinite;
}
@keyframes ib-frost-shimmer {
  0%   { background-position: 0 0, 100% 0; }
  100% { background-position: 0 0, 0% 0; }
}
:is(.inv-slot, .inv-item-row).item-border-gold_pulse {
  --ib-edge: var(--accent-gold);
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(135deg, #f4dc8a, var(--accent-gold) 40%, #a07c28 75%, #f0d27a) border-box;
  animation: ib-gold-pulse 5s ease-in-out infinite;
}
@keyframes ib-gold-pulse {
  0%, 100% { box-shadow: 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0.75rem color-mix(in srgb, var(--accent-gold) 55%, transparent); }
}
/* Slate, dark for a long while, then two quick flashes. */
:is(.inv-slot, .inv-item-row).item-border-storm_flash {
  --ib-edge: #4a5a70;
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(135deg, #7d8ca3, #3d4a5c 40%, #232b36 70%, #5c6f8a) border-box;
  animation: ib-storm-flash 7s linear infinite;
}
@keyframes ib-storm-flash {
  0%, 86%, 89%, 93%, 100% { box-shadow: 0 0 0 transparent; }
  87%, 91%               { box-shadow: 0 0 0.8rem color-mix(in srgb, #dcecff 80%, transparent),
                                       inset 0 0 0.6rem color-mix(in srgb, #dcecff 35%, transparent); }
}
:is(.inv-slot, .inv-item-row).item-border-wildfire_creep {
  --ib-edge: #3fae4e;
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(90deg, #1f6b2c, #7dff4a 12%, #2fae4e 25%, #1f6b2c 37%, #b6ff3d 50%, #2fae4e 62%, #1f6b2c 75%, #7dff4a 87%, #1f6b2c) border-box;
  background-size: 100% 100%, 200% 100%;
  box-shadow: 0 0 0.4rem color-mix(in srgb, #7dff4a 25%, transparent);
  animation: ib-wildfire-creep 9s linear infinite;
}
@keyframes ib-wildfire-creep {
  0%   { background-position: 0 0, 0% 0; }
  100% { background-position: 0 0, 200% 0; }
}
:is(.inv-slot, .inv-item-row).item-border-drifting_smoke {
  --ib-edge: #8d9299;
  background: linear-gradient(var(--ib-fill), var(--ib-fill)) padding-box,
              linear-gradient(100deg, #5f646b, #c9ccd1 18%, #7d828a 34%, #a9adb3 52%, #5f646b 68%, #c9ccd1 84%, #6c7178) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: ib-drifting-smoke 14s ease-in-out infinite alternate;
}
@keyframes ib-drifting-smoke {
  0%   { background-position: 0 0, 0% 0; }
  100% { background-position: 0 0, 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.inv-slot, .inv-item-row):is(.item-border-ember_flicker, .item-border-frost_shimmer, .item-border-gold_pulse,
    .item-border-storm_flash, .item-border-wildfire_creep, .item-border-drifting_smoke) { animation: none; }
}

/* -- A HORSE'S COAT: THE SADDLE CLOTH AND THE HIDE WASH ---------------- */
/* maggie, 2026-09-24: "I like C and D the most" (the coat studies). A horse's
   row carries its coat twice: a band of hide across the top holding its name
   and the coat's name (the saddle cloth, drawn by horseClothHtml in
   ui/horses-ui.js), and the whole card faintly washed in that hide under the
   game's own colours, edged in the coat's POINTS colour (mane, tail, legs).

   Each coat is four values: --coat-background (the hide), --coat-points,
   --coat-ink (lettering on the band) and --coat-halo (what lifts that
   lettering off the hide); a patterned hide adds --coat-veil, softening it
   just under the name. THE HIDE IS A PICTURE: --coat-photo names a painted
   hide in client/assets/coats/ (made by scripts/gen-coat-textures.py - no
   photo copied from anywhere), cut to size (cover), never tiled; the drawn
   --coat-background stays beneath it for as long as it takes to load. The wash
   mixes with --bg-surface, so both themes hold. */
.inv-item-row.coat {
  border: 2px solid var(--coat-points);
  box-shadow: 0 0 0 1px var(--border-dim);
  background:
    linear-gradient(color-mix(in srgb, var(--bg-surface) 80%, transparent), color-mix(in srgb, var(--bg-surface) 80%, transparent)),
    var(--mark-white, none) center / cover no-repeat,
    var(--mark-roan, none) center / cover no-repeat,
    var(--coat-photo, none) center / cover no-repeat,
    var(--coat-background);
  flex-wrap: wrap;
  padding-top: 0;
  overflow: hidden;
}
.inv-slot.coat { border: 2px solid var(--coat-points); background: linear-gradient(color-mix(in srgb, var(--bg-surface) 80%, transparent), color-mix(in srgb, var(--bg-surface) 80%, transparent)), var(--coat-photo, none) center / cover no-repeat, var(--coat-background); }
/* The saddle cloth: the full width of the card, the name set on the hide. */
.horse-cloth {
  flex-basis: calc(100% + 1.2rem);
  margin: 0 -0.6rem 0.35rem;
  padding: 0.35rem 0.7rem 0.4rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem;
  background: var(--coat-veil, linear-gradient(transparent, transparent)), var(--mark-white, none) center / cover no-repeat, var(--mark-roan, none) center / cover no-repeat, var(--coat-photo, none) center / cover no-repeat, var(--coat-background);
  border-bottom: 3px solid var(--coat-points);
}
.horse-cloth-name { font-family: var(--font-ui); font-weight: 600; font-size: 0.86rem; color: var(--coat-ink); text-shadow: var(--coat-halo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.horse-cloth-coat { font-family: var(--font-ui); font-weight: 500; font-size: 0.72rem; color: var(--coat-ink); text-shadow: var(--coat-halo); flex-shrink: 0; }
/* On the band the name is said once; the row's own name line steps aside. */
.inv-item-row.coat .inv-item-name { display: none; }

/* The coats. Dark lettering gets a light halo, light lettering a dark one. */
.coat-bay       { --coat-photo: url('/assets/coats/bay.webp'); --coat-background: linear-gradient(160deg, #a45a2a, #7a3d1c); --coat-points: #1a1310; --coat-ink: #fff6ea; --coat-halo: 0 1px 2px rgba(0,0,0,.65); }
.coat-chestnut  { --coat-photo: url('/assets/coats/chestnut.webp'); --coat-background: linear-gradient(160deg, #cd7a3e, #9a4a21); --coat-points: #7a3a18; --coat-ink: #fff6ea; --coat-halo: 0 1px 2px rgba(0,0,0,.65); }
.coat-black     { --coat-photo: url('/assets/coats/black.webp'); --coat-background: linear-gradient(160deg, #48423d, #121110 60%, #2a2623); --coat-points: #000000; --coat-ink: #f0e8d4; --coat-halo: 0 1px 2px rgba(0,0,0,.8); }
.coat-grey      { --coat-photo: url('/assets/coats/grey.webp'); --coat-background: linear-gradient(160deg, #cfcfca, #8e8f8c); --coat-points: #4b4c49; --coat-ink: #1c1c1a; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }
.coat-dapple_grey { --coat-photo: url('/assets/coats/dapple_grey.webp'); --coat-background: radial-gradient(circle, #dcdcd8 0 3px, #a3a49f 4.5px, transparent 5.5px) 0 0 / 15px 15px, radial-gradient(circle, #dcdcd8 0 3px, #a3a49f 4.5px, transparent 5.5px) 7.5px 7.5px / 15px 15px, linear-gradient(#80817c, #80817c); --coat-points: #3f403c; --coat-ink: #16161a; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); --coat-veil: linear-gradient(rgba(250,250,247,.62), rgba(250,250,247,.62)); }
.coat-palomino  { --coat-photo: url('/assets/coats/palomino.webp'); --coat-background: linear-gradient(160deg, #ebc46a, #c8963a); --coat-points: #f5ecd2; --coat-ink: #2a1c08; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }
.coat-dun       { --coat-photo: url('/assets/coats/dun.webp'); --coat-background: linear-gradient(90deg, transparent 0 46%, #3a2a1a 46% 49%, transparent 49%), linear-gradient(160deg, #d3b077, #b38f58); --coat-points: #3a2a1a; --coat-ink: #2a1c08; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }
.coat-roan      { --coat-photo: url('/assets/coats/roan.webp'); --coat-background: radial-gradient(circle, rgba(255,250,244,.85) 0 .8px, transparent 1.3px) 0 0 / 4px 4px, radial-gradient(circle, rgba(255,250,244,.6) 0 .7px, transparent 1.2px) 2px 2px / 4px 4px, linear-gradient(160deg, #8a4f3e, #6e3a2c); --coat-points: #3a1e16; --coat-ink: #fff6ea; --coat-halo: 0 1px 2px rgba(0,0,0,.65); --coat-veil: linear-gradient(rgba(40,18,12,.28), rgba(40,18,12,.28)); }
.coat-piebald   { --coat-photo: url('/assets/coats/piebald.webp'); --coat-background: radial-gradient(ellipse 30px 20px at 22px 16px, #151311 96%, transparent 100%) 0 0 / 110px 64px, radial-gradient(ellipse 22px 26px at 80px 44px, #151311 96%, transparent 100%) 0 0 / 110px 64px, linear-gradient(#f4f1ea, #f4f1ea); --coat-points: #151311; --coat-ink: #151311; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); --coat-veil: linear-gradient(rgba(250,248,242,.66), rgba(250,248,242,.66)); }
.coat-buckskin  { --coat-photo: url('/assets/coats/buckskin.webp'); --coat-background: linear-gradient(160deg, #dcb87c, #c29a5a); --coat-points: #1a1512; --coat-ink: #2a1c08; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }
.coat-sand_gold { --coat-photo: url('/assets/coats/sand_gold.webp'); --coat-background: linear-gradient(135deg, #f6dfa0, #d9b25c 35%, #b8893a 60%, #f0d48a 85%, #caa050); --coat-points: #8a6424; --coat-ink: #3a2708; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }
.coat-white     { --coat-photo: url('/assets/coats/white.webp'); --coat-background: linear-gradient(160deg, #fbf9f3, #e3dfd5); --coat-points: #bdb6a8; --coat-ink: #2a2418; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }

.coat-smoky_black { --coat-photo: url('/assets/coats/smoky_black.webp'); --coat-background: linear-gradient(160deg, #4a3c32, #282019); --coat-points: #0e0b0a; --coat-ink: #f0e8d4; --coat-halo: 0 1px 2px rgba(0,0,0,.65); }
.coat-cremello { --coat-photo: url('/assets/coats/cremello.webp'); --coat-background: linear-gradient(160deg, #f8f0de, #e2d4ba); --coat-points: #d8c8a8; --coat-ink: #2a2418; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }
.coat-perlino { --coat-photo: url('/assets/coats/perlino.webp'); --coat-background: linear-gradient(160deg, #f4e6cc, #dccaa8); --coat-points: #8a6a4a; --coat-ink: #2a2418; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }
.coat-smoky_cream { --coat-photo: url('/assets/coats/smoky_cream.webp'); --coat-background: linear-gradient(160deg, #ece0ca, #cebea6); --coat-points: #7a6a5a; --coat-ink: #2a2418; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }
.coat-red_dun { --coat-photo: url('/assets/coats/red_dun.webp'); --coat-background: linear-gradient(160deg, #e2a474, #be784c); --coat-points: #82401f; --coat-ink: #2a1206; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }
.coat-grulla { --coat-photo: url('/assets/coats/grulla.webp'); --coat-background: linear-gradient(160deg, #8a847c, #605c58); --coat-points: #221e1c; --coat-ink: #f0e8d4; --coat-halo: 0 1px 2px rgba(0,0,0,.65); }
.coat-dunalino { --coat-photo: url('/assets/coats/dunalino.webp'); --coat-background: linear-gradient(160deg, #f0ce8c, #d6aa62); --coat-points: #966432; --coat-ink: #2a1c08; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }
.coat-dunskin { --coat-photo: url('/assets/coats/dunskin.webp'); --coat-background: linear-gradient(160deg, #e2c692, #c4a26a); --coat-points: #42301e; --coat-ink: #2a1c08; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }
.coat-silver_dapple { --coat-photo: url('/assets/coats/silver_dapple.webp'); --coat-background: linear-gradient(160deg, #746256, #4a3a32); --coat-points: #d8ccc0; --coat-ink: #f0e8d4; --coat-halo: 0 1px 2px rgba(0,0,0,.65); }
.coat-silver_bay { --coat-photo: url('/assets/coats/silver_bay.webp'); --coat-background: linear-gradient(160deg, #9c603a, #703e22); --coat-points: #d8ccc0; --coat-ink: #fff6ea; --coat-halo: 0 1px 2px rgba(0,0,0,.65); }
.coat-amber_champagne { --coat-photo: url('/assets/coats/amber_champagne.webp'); --coat-background: linear-gradient(160deg, #e6be82, #be8e52); --coat-points: #8a6038; --coat-ink: #2a1c08; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }
.coat-classic_champagne { --coat-photo: url('/assets/coats/classic_champagne.webp'); --coat-background: linear-gradient(160deg, #aa9c96, #7a6e6c); --coat-points: #4a4040; --coat-ink: #1c1816; --coat-halo: 0 0 3px rgba(255,255,255,.9), 0 0 1px rgba(255,255,255,.9); }

/* MARKINGS (maggie, 2026-09-24: "same with the markings"): each is a picture
   with see-through where the coat shows, laid over the hide - roan as white
   hairs, the rest as white patterns (client/assets/coats/mark-*.webp, painted
   by scripts/gen-coat-textures.py). Which a horse has comes from its genes
   (server/horse-coats.js). Lettering on the band gets a double halo, since a
   white patch can fall behind it. */
.mark-roan    { --mark-roan: url('/assets/coats/mark-roan.webp'); }
.mark-tobiano { --mark-white: url('/assets/coats/mark-tobiano.webp'); }
.mark-overo   { --mark-white: url('/assets/coats/mark-overo.webp'); }
.mark-tovero  { --mark-white: url('/assets/coats/mark-tovero.webp'); }
.mark-sabino  { --mark-white: url('/assets/coats/mark-sabino.webp'); }
.mark-splash  { --mark-white: url('/assets/coats/mark-splash.webp'); }
.mark-blanket { --mark-white: url('/assets/coats/mark-blanket.webp'); }
.mark-leopard { --mark-white: url('/assets/coats/mark-leopard.webp'); }
.inv-item-row.coat[class*=" mark-"] :is(.horse-cloth-name, .horse-cloth-coat) { text-shadow: var(--coat-halo), var(--coat-halo); }

/* THE HORSE'S HUNGER BAR NEEDS A TRACK YOU CAN SEE (render check, 2026-09-24):
   the shared track is the colour of the card it sits on, so "Hunger 38" read
   as a gold stub with nothing after it. */
.horse-hunger .bar-track { background: var(--bg-void); box-shadow: inset 0 0 0 1px var(--border-dim); }

/* AN ANIMAL'S STATE AS BARS (maggie, 2026-09-27: "Add some bars"). Every
   horse, cat, dog and wolf card: Fullness, then each stat NOW on the shared
   bar-fill with its POTENTIAL as a paler band behind it (ui/horses-ui.js
   horseMetaHtml). As many to a line as fit - two at 390px, four on a desk. */
.animal-bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: 0.15rem 0.6rem; margin-top: 0.2rem; }
.animal-bar { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
/* 4.7rem holds the longest label there is, the Polish for Stamina (it was
   clipped to "Wytrzy..." at 3.4rem, hunt 11d); the track and the number's
   floor give up the room, so label + track + number + gaps (8.1rem) still fit
   the 8.2rem the grid promises a cell. */
.animal-bar-label { font-size: 0.66rem; color: var(--text-muted); width: 4.7rem; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.animal-bar .bar-track { flex: 1; min-width: 1.2rem; }
.animal-bar .bar-fill { position: relative; }
.animal-bar-pot { position: absolute; top: 0; bottom: 0; left: 0; background: var(--accent-gold); opacity: 0.28; border-radius: var(--bar-radius); }
.animal-bar-num { font-size: 0.66rem; font-family: var(--font-mono); color: var(--accent-gold); flex-shrink: 0; min-width: 1.6rem; text-align: right; }
/* A cat's, dog's or wolf's markings (client/js/animals.js furMarkClass) lift the lettering the same way. */
.inv-item-row.coat[class*=" fm1-"] :is(.horse-cloth-name, .horse-cloth-coat) { text-shadow: var(--coat-halo), var(--coat-halo); }