/* /target layout. No colour literals here -- every colour is a theme.css
 * token, so the page follows light/dark and every palette like the rest of
 * the site. Until 2026-09 this sheet was a self-contained dark "terminal"
 * skin with its own hex palette, navbar tint and Bootstrap theme lock, and
 * the CSS audit carried it as a visual island; it is now an ordinary page
 * sheet and must stay one.
 *
 * Everything that is page CHROME comes from shared building blocks: the
 * masthead (pm-*), the binding and view switches (cc-tabs segment), the
 * search/sort bar (cc-toolbar + Bootstrap form controls), the facet chips
 * (cc-chip), stock badges (cc-pill), the loading, empty and error states
 * (skel-*, cc-empty) and the paging button (cc-btn). What is left below is the
 * deal row and tile themselves -- a Target-vs-comic-shop price comparison has
 * no shared tile -- plus spacing. None of the local classes carry a primitive
 * suffix (-card, -chip, -panel, -btn ...) on purpose: those are counted by
 * scripts/audit_css_building_blocks.py and the ceiling has no headroom.
 */

/* ---- masthead extras --------------------------------------------------- */
.tgt-credit { margin-top: 10px; font-size: 0.8rem; }
.tgt-credit a { font-weight: 600; }

/* ---- population switch + toolbar ---------------------------------------- */
.tgt-format-switch { margin: 1.25rem 0 0; }
.tgt-controls { margin: 1rem 0 0.75rem; row-gap: 0.75rem; }
.tgt-select { width: auto; min-width: 10rem; }
#target-q { flex: 1 1 12rem; min-width: 10rem; }
.tgt-oos-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

/* ---- facet rows ----------------------------------------------------------- */
.tgt-facets { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.tgt-facet-row { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.tgt-facet-label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 5.5rem;
}
.tgt-facet-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; }
.tgt-facet-count {
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  margin-left: 0.3rem;
}

/* ---- results header ------------------------------------------------------- */
.tgt-results-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem;
}
.tgt-results-summary { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.tgt-results-summary strong { color: var(--text); }
.tgt-view-toggle { flex: 0 0 auto; }
.tgt-view-toggle .cc-tab { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ---- loading -------------------------------------------------------------- */
.tgt-skeleton-cover { width: 4rem; aspect-ratio: 2 / 3; margin: 0; flex: 0 0 auto; }

/* ---- shared price vocabulary --------------------------------------------- */
/* The saving is the page's one loud number: the reason the row exists. */
.tgt-saving { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.tgt-saving-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--status-success-fg);
  margin-bottom: 0.25rem;
}
.tgt-saving-amount {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--status-success-fg);
}
.tgt-price {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.tgt-price-store {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tgt-price-ist { font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
.tgt-price-ist.is-estimated { font-style: italic; }
.tgt-pct { font-size: 0.68rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* GH-874: the other-store verdict. A button inside the row's buy link. */
.tgt-verdict { border: 0; font: inherit; cursor: pointer; margin-top: 0.25rem; }
span.tgt-verdict { cursor: default; }
.tgt-ist-link {
  display: inline-flex;
  align-items: center;
  padding: 0 0.1rem;
  border: 0;
  background: none;
  color: var(--brand);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}
.tgt-ist-link:hover, .tgt-ist-link:focus-visible { color: var(--text); }

/* Not a chip: it sits inside a link and must read as a quiet inline action,
   not a filter. Hence no primitive suffix and no cc-chip. */
.tgt-similar-trigger {
  align-self: flex-start;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.tgt-similar-trigger:hover,
.tgt-similar-trigger:focus-visible,
.tgt-similar-trigger.is-active { color: var(--brand); border-color: var(--brand); }

/* ---- list rows ------------------------------------------------------------ */
.tgt-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.tgt-deal-shell { display: flex; flex-direction: column; }
.tgt-deal-shell.is-unavailable .tgt-deal,
.tgt-deal-shell.is-unavailable .tgt-tile { opacity: 0.55; }

.tgt-deal {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.tgt-deal:hover, .tgt-deal:focus-visible { border-color: var(--border-strong); color: inherit; }
.tgt-deal-shell.is-open .tgt-deal {
  border-color: var(--brand);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.tgt-deal-cells { display: contents; }

.tgt-deal-cover { background: var(--surface-2); min-height: 6rem; }
.tgt-deal-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tgt-deal-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.7rem 0.9rem;
}
.tgt-deal-title {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* What the matched edition collects (GH-877). Muted and clamped: it answers
   "which volume is this" without competing with the title. */
.tgt-contents {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tgt-deal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Catalog badges (scarcity, historical low) on a matched row. */
.tgt-deal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.tgt-deal-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.15rem;
  min-width: 8.5rem;
  padding: 0.7rem 1rem;
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--success) 6%, transparent);
}

/* ---- tiles ---------------------------------------------------------------- */
.tgt-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1rem;
}
.tgt-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.tgt-tile:hover, .tgt-tile:focus-visible { border-color: var(--border-strong); color: inherit; }
.tgt-deal-shell.is-open .tgt-tile { border-color: var(--brand); }
.tgt-tile-cells { display: contents; }
.tgt-tile-cover { position: relative; aspect-ratio: 2 / 3; background: var(--surface-2); overflow: hidden; }
.tgt-tile-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tgt-tile-saving {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--success);
  color: var(--on-success);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tgt-tile-body { display: flex; flex-direction: column; flex: 1; gap: 0.25rem; padding: 0.6rem 0.65rem; }
.tgt-tile-publisher {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tgt-tile-title {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tgt-tile-stock { align-self: flex-start; }
.tgt-tile-shelf { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.tgt-tile-prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; margin-top: auto; padding-top: 0.3rem; }

/* ---- similar prices (opens under a row or tile) --------------------------- */
.tgt-similar {
  padding: 0.6rem 0.75rem 0.75rem;
  border: 1px solid var(--brand);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface);
}
.tgt-tiles .tgt-similar { border-top: 1px solid var(--brand); border-radius: var(--radius); margin-top: 0.4rem; }
.tgt-similar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.tgt-similar-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgt-similar-head strong { color: var(--text); }
.tgt-similar-none { margin: 0; font-size: 0.78rem; color: var(--text-dim); }
.tgt-similar-list { display: flex; flex-direction: column; gap: 0.25rem; }
.tgt-similar-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.4rem;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}
.tgt-similar-item:hover, .tgt-similar-item:focus-visible { background: var(--surface-2); color: inherit; }
.tgt-similar-item img { width: 2rem; height: 3rem; object-fit: cover; border-radius: 2px; background: var(--surface-2); flex: 0 0 auto; }
.tgt-similar-item-text { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.tgt-similar-item-title { font-size: 0.78rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgt-similar-item-meta { display: flex; gap: 0.5rem; font-size: 0.68rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tgt-similar-item-saving { color: var(--status-success-fg); font-weight: 600; }

/* ---- footer controls ------------------------------------------------------ */
.tgt-footer-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
}
.tgt-bonus { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; }
.tgt-bonus input { margin: 0; }

/* ---- phone ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .tgt-facet-row { flex-direction: column; align-items: stretch; gap: 0.3rem; }
  .tgt-facet-label { min-width: 0; }
  /* The strip scrolls (h-scroll-strip) instead of wrapping. */
  .tgt-facet-strip { padding-bottom: 0.25rem; }
  .tgt-facet-strip .cc-chip { flex: 0 0 auto; }

  .tgt-deal { grid-template-columns: 3.25rem minmax(0, 1fr) auto; }
  .tgt-deal-info { padding: 0.55rem 0.65rem; }
  .tgt-deal-title { font-size: 0.82rem; }
  .tgt-deal-prices { min-width: 6.5rem; padding: 0.55rem 0.6rem; }
  .tgt-saving-amount { font-size: 1.1rem; }
  .tgt-pct { display: none; }

  .tgt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

  /* Touch targets. */
  .tgt-similar-trigger { min-height: 44px; padding-inline: 0.75rem; }
  .tgt-ist-link { min-width: 44px; min-height: 44px; justify-content: center; }
}