/* Plant-type picker (js/plant-picker.js): a field-like button showing the plant's finished product, and a pop-over
   grid of Rust-inventory-style tiles that pop out on hover / keyboard focus like the loot sim's slots.
   Sharp pops: nothing here scales an icon (or anything around one) with a CSS transform, which stretches the small
   bitmap and blurs it. A tile's face is its own layer (::before) and scales; the icon GROWS with real width/height
   (drawn sharp at the bigger size, js asks for an HD source) and only lifts and tilts. */
.pp {
  --pp-slot: #3a3834; --pp-slot-hi: #4b4843; --pp-slot-text: #e9e3d8;
  --pp-edge: rgba(255, 255, 255, .22); --pp-lift: 0 10px 22px rgba(0, 0, 0, .65); --pp-ic-lift: drop-shadow(0 9px 7px rgba(0, 0, 0, .6));
  --pp-spring: cubic-bezier(.3, 1.9, .5, 1); --pp-pop: cubic-bezier(.3, 1.7, .5, 1);
  position: relative; min-width: 0; max-width: 22rem;
}
:root[data-theme="light"] .pp {
  --pp-slot: #d6ccba; --pp-slot-hi: #e7dfcf; --pp-slot-text: #221d17;
  --pp-edge: rgba(255, 255, 255, .6); --pp-lift: 0 9px 20px rgba(60, 40, 20, .38); --pp-ic-lift: drop-shadow(0 8px 6px rgba(60, 40, 20, .45));
}

/* ---- the button ---- */
.pp-btn {
  appearance: none; display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 48px; margin: 0;
  padding: .3rem .75rem .3rem .45rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--field); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.pp-btn:hover:not(:disabled) { border-color: var(--muted); }
.pp-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.pp-btn[aria-expanded="true"] { border-color: var(--accent); }
.pp-btn:disabled { opacity: .55; cursor: not-allowed; }
/* icon holders keep their size: the icon grows past them, centred (a flex item with flex: none overflows both sides
   evenly, where a grid's auto track would widen and push it right) */
.pp-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; }
.pp-ic > .item-ic {
  flex: none; width: 34px; height: 34px; max-width: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
  transition: width .22s var(--pp-spring), height .22s var(--pp-spring), transform .22s var(--pp-spring);
}
.pp-btn:hover:not(:disabled) .pp-ic > .item-ic, .pp-btn[aria-expanded="true"] .pp-ic > .item-ic {
  width: 38px; height: 38px; transform: translateY(-2px) rotate(-4deg);
}
.pp-text { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; min-width: 0; }
.pp-name { font: 700 1.02rem/1.25 var(--head-font); font-stretch: 87.5%; letter-spacing: .02em; }
.pp-sep, .pp-count { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.pp-caret {
  flex: none; width: 8px; height: 8px; margin: 0 .1rem 4px .3rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s;
}
.pp-btn[aria-expanded="true"] .pp-caret { transform: translateY(4px) rotate(225deg); }

/* ---- the pop-over (fixed: js places it under or over the button, inside the viewport) ---- */
.pp-pop {
  position: fixed; z-index: 45; left: 8px; top: 8px; width: min(36rem, calc(100vw - 16px)); max-height: 26rem;
  display: flex; flex-direction: column; min-height: 0;
  background: url(../img/noise.svg), var(--panel-solid); border: 1px solid var(--line-strong); border-top: 2px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: pp-in .16s ease-out;
}
.pp-pop.up { border-top-width: 1px; border-bottom: 2px solid var(--accent); animation-name: pp-in-up; }
.pp-pop[hidden] { display: none; }
@keyframes pp-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes pp-in-up { from { opacity: 0; transform: translateY(6px); } }
.pp-grid {
  position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 5px;
  min-height: 0; padding: 12px 10px; overflow-y: auto; overscroll-behavior: contain;
}

/* ---- the tiles: inventory slots (the face is ::before, under the icon and the name) ---- */
.pp-tile {
  position: relative; isolation: isolate; display: grid; justify-items: center; align-content: start; gap: 5px; min-width: 0;
  margin: 0; padding: 9px 3px 7px; border: 0; border-radius: 2px; background: none; color: var(--pp-slot-text); font: inherit;
  cursor: pointer;
}
.pp-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .14)), var(--pp-slot);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
  transition: transform .18s var(--pp-pop), box-shadow .18s, background-color .12s;
}
.pp-tic { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; }
.pp-tic > .item-ic {
  flex: none; width: 46px; height: 46px; max-width: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
  transition: width .22s var(--pp-spring), height .22s var(--pp-spring), transform .22s var(--pp-spring), filter .22s;
}
.pp-tname {
  font: 700 .74rem/1.15 var(--head-font); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .04em;
  text-align: center; overflow-wrap: anywhere; transition: transform .18s var(--pp-pop);
}
.pp-n {
  position: absolute; top: 3px; right: 3px; min-width: 1.5em; padding: 1px 4px; border-radius: 9px;
  font: 700 .72rem/1.25 var(--head-font); font-stretch: 87.5%; font-variant-numeric: tabular-nums; text-align: center;
  color: #f1ece2; background: rgba(0, 0, 0, .6); transition: transform .18s var(--pp-pop);
}
.pp-n:empty { display: none; }
/* the plant you're on: accent ring plus a little corner flag, both drawn on the face so they pop with it */
.pp-tile[aria-selected="true"]::before {
  background:
    linear-gradient(135deg, var(--accent) calc(50% - .5px), transparent calc(50% + .5px)) 0 0 / 11px 11px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .14)), var(--pp-slot-hi);
  box-shadow: inset 0 0 0 2px var(--accent);
}
/* the focus ring goes on the face: the popped face would cover a ring on the tile itself */
.pp-tile:focus-visible { outline: none; }
.pp-tile:focus-visible::before { outline: 2px solid var(--focus); outline-offset: 2px; }

/* pop out of the grid: the face springs out, the icon grows, lifts and tilts, the count rides out with the corner
   (hover only where there is a real pointer; keyboard focus always) */
.pp-tile:focus-visible { z-index: 2; }
.pp-tile:focus-visible::before {
  transform: scale(1.14); background-color: var(--pp-slot-hi); box-shadow: inset 0 0 0 1px var(--pp-edge), var(--pp-lift);
}
.pp-tile:focus-visible .pp-tic > .item-ic {
  width: 58px; height: 58px; transform: translateY(-4px) rotate(-4deg); filter: var(--pp-ic-lift) brightness(1.12);
}
.pp-tile:focus-visible .pp-tname { transform: translateY(3px); }
.pp-tile:focus-visible .pp-n { transform: translate(4px, -5px); }
.pp-tile[aria-selected="true"]:focus-visible::before { box-shadow: inset 0 0 0 2px var(--accent), var(--pp-lift); }
@media (hover: hover) {
  .pp-tile:hover { z-index: 2; }
  .pp-tile:hover::before {
    transform: scale(1.14); background-color: var(--pp-slot-hi); box-shadow: inset 0 0 0 1px var(--pp-edge), var(--pp-lift);
  }
  .pp-tile:hover .pp-tic > .item-ic {
    width: 58px; height: 58px; transform: translateY(-4px) rotate(-4deg); filter: var(--pp-ic-lift) brightness(1.12);
  }
  .pp-tile:hover .pp-tname { transform: translateY(3px); }
  .pp-tile:hover .pp-n { transform: translate(4px, -5px); }
  .pp-tile[aria-selected="true"]:hover::before { box-shadow: inset 0 0 0 2px var(--accent), var(--pp-lift); }
}
.pp-tile:active::before { transform: scale(1.05); }

/* less motion (OS setting or the site's switch): no pop, no growing or tilting; base.css already stops the
   transitions and the open animation. The light and shadow still change. */
@media (prefers-reduced-motion: reduce) {
  .pp-tile::before, .pp-tile .item-ic, .pp-tname, .pp-n, .pp-ic .item-ic { transform: none !important; }
  .pp-tic > .item-ic { width: 46px !important; height: 46px !important; }
  .pp-ic > .item-ic { width: 34px !important; height: 34px !important; }
}
:root[data-motion="reduce"] .pp-tile::before,
:root[data-motion="reduce"] :is(.pp-tile .item-ic, .pp-tname, .pp-n, .pp-ic .item-ic) { transform: none !important; }
:root[data-motion="reduce"] .pp-tic > .item-ic { width: 46px !important; height: 46px !important; }
:root[data-motion="reduce"] .pp-ic > .item-ic { width: 34px !important; height: 34px !important; }

/* forced colors: the selected plant gets a thick Highlight border on the face and keyboard focus keeps its own ring
   outside it, so a focused selected tile shows both (one outline could only show one of them) */
@media (forced-colors: active) {
  .pp-pop { border: 1px solid CanvasText; }
  .pp-tile::before { border: 1px solid ButtonText; }
  .pp-tile[aria-selected="true"]::before { border: 3px solid Highlight; }
  .pp-tile:focus-visible::before { outline: 3px solid CanvasText; outline-offset: 2px; }
  .pp-caret { border-color: ButtonText; }
}