/* ============================================================
   item-tools.css — Anvil + Seeker actions on item tiles
   Loaded alongside any set page. Relies on the page's :root vars.
   ============================================================ */
.item-actions { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.ia-btn {
  font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--line);
  background: rgba(8,15,17,0.6); color: var(--ink-dim); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ia-btn:hover { color: var(--teal-bright); border-color: var(--teal-deep); }
.ia-anvil:hover { color: var(--bronze-bright); border-color: var(--bronze); }

.anvil-panel {
  display: none; margin-top: 9px; padding: 12px;
  border: 1px solid var(--bronze); background: rgba(139,115,68,0.06);
}
.anvil-panel.open { display: block; }
.ap-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bronze-bright); margin-bottom: 8px; display: block;
}
.ap-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.cond-select {
  background: var(--bg-deeper); border: 1px solid var(--line); color: var(--ink);
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 7px 9px; flex: 1 1 170px;
  min-width: 0; max-width: 100%; box-sizing: border-box;
}
.cond-select:focus { outline: none; border-color: var(--teal); }
.ia-qr { width: 96px; height: 96px; flex-shrink: 0; background: #fff; padding: 6px; }
.ia-qr img, .ia-qr canvas { display: block; }
.ia-send { margin-top: 10px; color: var(--bronze-bright); border-color: var(--bronze); }
.ia-send:hover { color: var(--ink); border-color: var(--bronze-bright); background: rgba(201,169,104,0.12); }
.ap-hint {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px;
  color: var(--ink-faint); margin-top: 8px; line-height: 1.5;
}

/* ------------------------------------------------------------------
   Phones (device audit 2026-07-25): these panel controls were 8-11px
   text in 24-32px boxes — unreadable and under the 44px touch minimum.
   Scoped to <=600px so tablet/desktop keep their existing compact look.
   Every clamp() floor here is the real minimum (13px), because the vw
   term does not reach the max anywhere in the 320-600px range.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  .anvil-panel { padding: 12px 10px; }
  .ap-row { gap: 8px; }

  /* Anvil / Seeker actions: 44x44 minimum, label wraps instead of clipping */
  .item-actions { gap: 8px; }
  .item-actions .ia-btn,
  .ia-btn {
    font-size: clamp(13px, 3.2vw, 14px);
    letter-spacing: 0.06em;
    padding: 11px 12px;
    min-height: 44px;
    min-width: 44px;
    flex: 1 1 auto;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: normal;
    box-sizing: border-box;
  }

  .ap-label { font-size: clamp(13px, 3.2vw, 14px); letter-spacing: 0.12em; line-height: 1.3; }

  /* condition/grade field: full width and a 44px target, height driven by
     padding + line-height so it still grows with its text */
  .ap-row .cond-select,
  .cond-select {
    font-size: clamp(13px, 3.4vw, 15px);
    line-height: 1.2;
    min-height: 44px;
    padding: 10px 9px;
    flex: 1 1 100%;
    width: 100%;
  }

  .ia-send { min-height: 44px; }
  .ap-hint { font-size: clamp(13px, 3.4vw, 15px); }
  .ia-qr { width: 88px; height: 88px; }
}

/* Photo hover preview — a centred, fixed-position lightbox so the
   enlarged image is always fully on-screen (a plain scale() ran off
   the page edge). Only applies to slots that carry a photo (inline
   style attribute); empty "upload pending" slots are left alone.
   The small tile keeps the cursor, so there is no hover flicker. */
.set-tile .ph-f[style]:hover, .set-tile .ph-b[style]:hover { transform: none !important; }
.set-tile .ph-f[style]::after, .set-tile .ph-b[style]::after {
  content: ""; position: fixed; top: 50%; left: 50%;
  width: 84vmin; height: 84vmin; max-width: 680px; max-height: 680px;
  transform: translate(-50%, -50%) scale(0.7);
  background-image: inherit; background-size: contain;
  background-repeat: no-repeat; background-position: center;
  background-color: var(--bg-deeper);
  border: 1px solid var(--teal-bright);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.86), 0 24px 70px rgba(0,0,0,0.9);
  opacity: 0; pointer-events: none; z-index: 9999;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.set-tile .ph-f[style]:hover::after, .set-tile .ph-b[style]:hover::after {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}

/* ------------------------------------------------------------------
   One anvil affordance per tile. Where the item-tools row (◆ Anvil /
   ◎ Seeker) exists, hide the generic anvil-tiles per-item control (its
   ⚒ Anvil toggle + Condition/Grade panel) so a tile never shows two anvil
   buttons. Scoped with :has(.item-actions) so tiles WITHOUT the row keep
   their anvil; the pack-grade "Grade this pack" widget lives outside
   .set-tile and stays visible. item-tools' Send writes the queue via
   window.HTAnvil (anvil-queue.js).
   ------------------------------------------------------------------ */
.set-tile:has(.item-actions) .anvil-toggle { display: none !important; }
.set-tile:has(.item-actions) .anvil-ctl:not(.pack-grade-ctl) { display: none !important; }