/* layer: shared
   is:    how a drawn thing is painted, and how a counted one is marked
   owns:  the colours of each kind, the rule that a thing is built from
          flat shapes with edges — never from a gradient — and the tag a
          thing wears once the hand has counted it */

.thing {
  display: inline-block;
  aspect-ratio: 1;
  line-height: 0;
}

/* a KEPT species is a finished asset: it fills its thing's box the way
   a drawn one does, and never stretches (the acervo's art declares
   preserveAspectRatio none — the fit is the platform's to keep) */
.thing img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.thing svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* THE COUNTING TAG: the number a thing wears once the hand has counted it.
   The mark of a tallied thing belongs to the house, not to a family — the
   coin's penny and the pack's loose piece wore the same nineteen lines,
   written twice. It hangs on the corner of whatever holds it, so that
   holder owns a positioning context of its own; the count's ink says the
   number she reached is hers. A family that marks a tally differently
   (the chart's ring around a loose thing) simply does not use it. */

.tag {
  position: absolute;
  inset-inline-end: -6px;
  inset-block-start: -6px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding-inline: var(--space-1);
  border-radius: var(--round-pill);
  background: var(--count);
  color: var(--paper-bright);
  font-size: var(--type-note);
  font-weight: 700;
  opacity: 0;
  scale: 0.6;
  transition: opacity var(--step) ease, scale var(--step) ease;
}

/* it arrives with the tally, and only with it */
[data-tallied="true"] .tag {
  opacity: 1;
  scale: 1;
}

/* one palette per kind: the skin, the shadow on it, the light on it */
.thing[data-kind="cherry"] {
  --skin: #c22138;
  --skin-deep: #8e1327;
  --skin-light: #e8546a;
  --stalk: #6f9142;
  --stalk-deep: #4c6a2c;
}

.thing[data-kind="banana"] {
  --skin: #c18326; /* the DARK layer: the rim along the convex edge */
  --skin-mid: #eaa724;
  --skin-light: #eec973;
  --stalk: #982d20;
  --stalk-deep: #930b10; /* the cut disc, and the nub on the tip */
  --fleck: #a2462d;
}

.thing[data-kind="lemon"] {
  --skin: #cf9d26; /* the DARK layer: the rim on the right and below */
  --skin-mid: #efc02a;
  --skin-light: #f2d878;
  --stalk: #7aae36; /* the leaf */
  --stalk-deep: #567f28;
  --twig: #8e4a2b;
}

.thing[data-kind="mango"] {
  --skin: #9d1016; /* the DARK layer: the rim along the belly */
  --skin-mid: #c22a28;
  --skin-light: #e7d08b;
  --blush: #b5a022; /* the green-gold shoulder */
  --cap: #0b8a48;
  --stalk: #8f1114;
}

.thing[data-kind="grapes"] {
  --skin: #7c0f26; /* the DARK layer: the web between the berries */
  --skin-mid: #8f2a4e;
  --skin-light: #a36ea4;
  --stalk: #7d403c;
}

.thing[data-kind="pineapple"] {
  --skin: #9c3a1c; /* the DARK layer: the rim, and the net strokes */
  --skin-mid: #c7682c;
  --skin-light: #dc8c5e;
  --stalk: #6cab39; /* the crown, light */
  --stalk-deep: #2f8a3c; /* the crown, deep */
}

.thing .skin2 {
  fill: var(--skin-mid);
}

.thing .gloss2 {
  fill: var(--skin-light);
  opacity: 0.55;
}

.thing .stalk2 {
  fill: var(--stalk);
}

.thing .tipdot {
  fill: var(--stalk-deep);
}

.thing .stem {
  fill: none;
  stroke: var(--stalk-deep);
  stroke-width: 7;
  stroke-linecap: round;
}

.thing .tipcap {
  fill: none;
  stroke: var(--stalk-deep);
  stroke-width: 4;
  stroke-linecap: round;
}

.thing .skin {
  fill: var(--skin);
}

.thing .shade {
  fill: var(--skin-deep);
}

.thing .gloss {
  fill: var(--skin-light);
  opacity: 0.55;
}

.thing .spec {
  fill: #ffffff;
  opacity: 0.5;
}

/* the dip where the stalk enters — a cherry without it is an orange */
.thing .dip {
  fill: none;
  stroke: var(--skin-deep);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.75;
}

.thing .stalk {
  fill: var(--stalk);
}

.thing .leaf {
  fill: var(--stalk);
}

.thing .rib {
  fill: none;
  stroke: var(--stalk-deep);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.7;
}

/* a full-strength light shape — a berry's face, a mango's gloss bean */
.thing .face {
  fill: var(--skin-light);
}

/* the freckles on a peel */
.thing .pore {
  fill: var(--skin-light);
  opacity: 0.8;
}

/* the ripe spots on a peel — darker than the skin, clipped by the body */
.thing .fleck {
  fill: var(--fleck);
}

/* a woody stub where a green leaf owns --stalk */
.thing .twig {
  fill: var(--twig);
}

/* the second skin colour of a two-skinned fruit */
.thing .blush {
  fill: var(--blush);
}

/* the small mound a stalk enters through */
.thing .cap {
  fill: var(--cap);
}

/* a lattice worn on the skin — stroked, clipped by the body */
.thing .net {
  fill: none;
  stroke: var(--skin);
  stroke-width: 3.2;
}

/* the deep partner of .leaf */
.thing .leaf2 {
  fill: var(--stalk-deep);
}

/* the ridge that runs the length of a banana */
.thing .ridge {
  fill: none;
  stroke: var(--skin-deep);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.5;
}

.thing .stem {
  fill: var(--stalk);
}

/* the seat is drawn inside the picture so it scales with the drawing; a
   shadow in pixels is enormous at eighteen and invisible at a hundred */
.thing .seat {
  fill: var(--shade-deep);
}