/* Drop Radar — /shelf/ only.
   Palette and type come from site.css (:root tokens). Thin rules, modest
   corners, product photo dominant, mascots as small accents. Every tap target
   on the page is at least 44px high because this is the page people use on a
   phone while standing in a shop. */

/* A [hidden] element that also has display:flex/grid from a class is NOT
   hidden — that is the empty bordered toast the review saw under the cards.
   Scoped to this page's own components rather than set globally. */
.shelf-toast[hidden], .shelf-empty[hidden], #shelf-list [hidden] { display: none !important; }
:root { --in: #176C3A; }
a:hover { color: var(--ink); }
nav[aria-label="Primary"] a[aria-current="page"], .shelf-mobilenav a[aria-current="page"] { color: #A61B5A; }

/* The approved four-destination header. One row on a phone. */
header nav.nav-compact { display: flex; flex-wrap: nowrap; gap: 14px; align-items: center; }
header nav.nav-compact a { white-space: nowrap; }
.nav-count { font-family: 'Space Mono', monospace; font-size: 0.78em; opacity: 0.75; }

.shelf-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 22px; align-items: start; margin: 6px 0 14px;
}
.shelf-top h1 { font-size: clamp(2rem, 5.5vw, 3rem); line-height: 0.95; margin-bottom: 2px; }
.shelf-top .lede { margin: 8px 0 0; font-size: 0.96rem; color: var(--muted); font-weight: 600; max-width: 46ch; }

.shelf-buddy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.shelf-buddy__art { width: 64px; height: 64px; object-fit: contain; }
.shelf-buddy__pick { display: flex; gap: 6px; flex-wrap: wrap; }
.shelf-buddy__btn {
  border: 1.5px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 999px; padding: 7px 12px; min-height: 44px;
  font: 700 0.74rem/1 'Archivo', Arial, sans-serif; cursor: pointer;
}
.shelf-buddy__btn[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--acid); }

/* The one sentence most likely to lie, so it gets its own card and its copy
   comes from alertSummary() rather than from the markup. */
.shelf-alertcard {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); padding: 14px 16px;
}
.shelf-alertcard.is-on { border-color: var(--ink); }
.shelf-alertcard img { width: 48px; height: 48px; object-fit: contain; }
.shelf-alertcard__head { margin: 0; font-weight: 900; font-size: 0.95rem; }
.shelf-alertcard__detail { margin: 2px 0 0; font-size: 0.84rem; color: var(--muted); font-weight: 600; }
/* Aubergine on pink, not white on pink: #1C1030 on #F0529C is ~7.4:1, while
   white on the same pink is ~3.1:1 and fails normal text. */
.shelf-alertcard__cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--hot); color: var(--ink); text-decoration: none;
  font: 800 0.8rem/1 'Archivo', Arial, sans-serif;
}
.shelf-alertcard__cta:hover { color: var(--paper); background: var(--ink); }

.shelf-tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--line); margin: 20px 0 14px; }
.shelf-tab {
  appearance: none; background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 12px 14px; min-height: 44px; cursor: pointer;
  font: 800 0.92rem/1 'Archivo', Arial, sans-serif; color: var(--muted);
}
.shelf-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--hot); }
.shelf-tab__count {
  display: inline-block; margin-left: 6px; min-width: 22px; padding: 2px 6px;
  border-radius: 999px; background: var(--line); color: var(--ink);
  font-family: 'Space Mono', monospace; font-size: 0.72rem;
}
.shelf-tab[aria-selected="true"] .shelf-tab__count { background: var(--acid); }

.shelf-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.shelf-filters select, .shelf-filters input[type="search"] {
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--card);
  min-height: 44px; padding: 0 12px; font: 600 0.86rem/1 'Archivo', Arial, sans-serif; color: var(--ink);
}
.shelf-filters input[type="search"] { flex: 1 1 200px; }
.shelf-filters__note { width: 100%; margin: 0; font-size: 0.76rem; color: var(--muted); font-weight: 600; }

.shelf-toast {
  position: sticky; bottom: 12px; z-index: 30;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 0; padding: 12px 14px;
  border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card);
  font-size: 0.86rem; font-weight: 700;
}
.shelf-toast__undo {
  border: 1.5px solid var(--ink); background: var(--acid); border-radius: 999px;
  min-height: 36px; padding: 0 14px; cursor: pointer;
  font: 800 0.76rem/1 'Archivo', Arial, sans-serif;
}

/* Four across on a wide screen, never a lonely stretched card. */
#shelf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
@media (min-width: 1200px) { #shelf-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The alert price limit. Only drawn when the server has one. */
.shelf-card__cap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.shelf-card__caplabel { font-size: 0.74rem; font-weight: 700; color: var(--muted); width: 100%; }
.shelf-card__capbox {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 10px;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); min-height: 44px;
}
.shelf-card__capinput { border: 0; background: none; width: 86px; font-size: 0.95rem; color: var(--ink); }
.shelf-card__capinput:focus { outline: none; }
.shelf-card__capbox:focus-within { border-color: var(--ink); }
.shelf-card {
  display: flex; flex-direction: column;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden;
}
.shelf-card:hover { border-color: var(--ink); }
.shelf-card.is-stale { border-style: dashed; }
.shelf-card__img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #FFFFFF;
  border-bottom: 1.5px solid var(--line); padding: 10px;
}
.shelf-card__body { padding: 12px 14px 6px; display: flex; flex-direction: column; gap: 2px; }
.shelf-card__title { font-size: 0.98rem; font-stretch: 85%; text-transform: none; }
.shelf-card__meta { margin: 0; font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.shelf-card__stock { margin: 4px 0 0; font-size: 0.8rem; font-weight: 800; }
.shelf-card__stock.in { color: var(--in); }
.shelf-card__stock.out { color: var(--out); }
.shelf-card__stock.unknown { color: var(--muted); }
.shelf-card__checked { margin: 2px 0 0; font-size: 0.74rem; color: var(--muted); }
.shelf-card__price { margin: 6px 0 0; font-size: 1.25rem; font-weight: 700; }
.shelf-card__delta { margin: 0; font-size: 0.76rem; }
.shelf-card__delta.down { color: var(--in); }
.shelf-card__delta.up { color: var(--out); }
.shelf-card__state { margin: 6px 0 0; font-size: 0.76rem; font-weight: 700; color: var(--muted); }
.shelf-card__actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 14px; margin-top: auto; }
.shelf-card__open {
  flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px; border-radius: 10px;
  background: var(--acid); color: var(--ink); text-decoration: none;
  font: 800 0.82rem/1.2 'Archivo', Arial, sans-serif; text-align: center;
}
/* Yellow carries aubergine text; it never carries white. */
.shelf-card__open:hover { color: var(--ink); background: #FFC800; }

/* Fresh picks match the shelf cards: thin rules, no hard-shadow card spam. */
.rec-grid .rec-card {
  border: 1.5px solid var(--line); border-radius: 12px; box-shadow: none;
  background: var(--card); transform: none;
}
.rec-grid .rec-card:hover { box-shadow: none; transform: none; border-color: var(--ink); }
.shelf-card__btn {
  flex: 1 1 auto; min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
  font: 700 0.8rem/1 'Archivo', Arial, sans-serif; cursor: pointer;
}
.shelf-card__btn:hover { border-color: var(--ink); }
.shelf-card__btn.ghost { color: var(--muted); }

/* Phone nav: only paths that exist. Hidden on desktop, where the header nav
   already carries the same links. */
.shelf-mobilenav { display: none; }
@media (max-width: 760px) {
  .shelf-top { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .shelf-top .lede { font-size: 0.9rem; }
  .shelf-alertcard { grid-template-columns: 36px minmax(0, 1fr); padding: 10px 12px; gap: 10px; }
  .shelf-alertcard img { width: 36px; height: 36px; }
  .shelf-alertcard__cta { grid-column: 1 / -1; justify-content: center; }
  .shelf-tabs { margin: 12px 0 10px; gap: 0; }
  .shelf-tab { flex: 1 1 0; padding: 12px 6px; font-size: 0.84rem; }
  .shelf-filters { gap: 6px; }
  .shelf-filters__note { font-size: 0.72rem; }

  /* Compact row, not a full-bleed square: thumbnail + title + status on one
     line, actions directly under it, so the first toy and its buttons are both
     inside a 390x844 screen. */
  #shelf-list { grid-template-columns: 1fr; gap: 10px; }
  .shelf-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; }
  .shelf-card__img {
    width: 76px; height: 76px; aspect-ratio: auto; border-bottom: 0;
    border-right: 1.5px solid var(--line); padding: 6px; align-self: stretch;
  }
  .shelf-card__body { padding: 10px 12px 4px; }
  .shelf-card__title { font-size: 0.92rem; }
  .shelf-card__price { font-size: 1.05rem; margin-top: 4px; }
  .shelf-card__actions { grid-column: 1 / -1; padding: 0 12px 12px; }
  .shelf-card__open { flex: 1 1 100%; }

  /* The bottom bar is fixed; without this the last card and the sticky toast
     sit under it. The toast rides above the bar, never behind it. */
  main { padding-bottom: 86px; }
  .shelf-toast { bottom: 74px; }
  .shelf-mobilenav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; justify-content: space-around;
    background: var(--paper); border-top: 1.5px solid var(--ink);
    padding: 6px 4px env(safe-area-inset-bottom);
  }
  .shelf-mobilenav a {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center;
    min-height: 48px; text-decoration: none;
    font: 800 0.76rem/1 'Archivo', Arial, sans-serif; color: var(--muted);
  }
  .shelf-mobilenav a[aria-current="page"] { color: #A61B5A; }
}

.shelf-card__img.is-placeholder { padding: 20px; object-fit: scale-down; }
.shelf-card__photo-note { margin: 0; padding: 0; text-align: left; font-size: .75rem; color: var(--muted); }
.shelf-card__photo-note[hidden] { display: none; }