/* ============================================================================
   D2 GUN LOCKER — 08 SAVED
   Bookmark button on weapon/armor cards, the "Saved" top-strip trigger, the
   right-docked Saved side panel (patterned after the Ask panel), the saved-
   roll perk icon grid (rendered inside the panel), and the "roll saved" hint.
   Tokens only.
   ============================================================================ */

/* ---- bookmark button ---------------------------------------------------- */
/* A clear, unmistakable Save/bookmark control on every card. ~30px square hit
   target, outline bookmark when unsaved, FILLED accent bookmark + accent ring
   when saved. Sits in the card's action area (bottom-right); the SVG fills on
   save so the state reads at a glance. Never hardcode hex — tokens only. */
.d2gl-save-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; flex: 0 0 auto;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-secondary), transparent 8%);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.d2gl-save-btn svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.d2gl-save-btn:hover {
  color: var(--text-primary);
  border-color: var(--hairline-strong);
  background: var(--bg-card-hover);
}
.d2gl-save-btn.saved {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.14);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}
.d2gl-save-btn.saved svg { fill: currentColor; }
.d2gl-save-btn:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.75); outline-offset: 1px; }

/* Weapon card: the save button leads the action row (bottom-right), a hairline
   separating it from the compare "+". The action row is baked into the card
   markup, so the button survives every re-window / re-render. */
.card-action-btns .d2gl-save-btn { order: -1; }

/* List view hides the whole .card-action-btns row (02-refinements-3 / 49), which
   also hid the Save button on list-view weapon cards. Bring JUST the Save button
   back, pinned to the row's right edge so the flat .wlr grid is untouched. The
   compound selector (attr + attr + class + child class) out-specifies the
   list-view hide rule for this one button. Strip cards keep their own layout. */
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-grid .weapon-card > .card-action-btns {
  display: flex !important;
  position: absolute; top: 50%; right: 14px; bottom: auto;
  transform: translateY(-50%);
  gap: 0;
}
.app-layout[data-weapon-view="list"]:not([data-detail="open"]) .weapon-grid .weapon-card > .card-action-btns .card-compare-btn {
  display: none !important;
}

/* Armor card: pin to the header's bottom-right (season chip owns top-right).
   Re-emitted by 10-armor-refinements' simplifyCard rebuild, so it persists. */
.armor-card .armor-card-top { position: relative; }
.armor-card .d2gl-save-btn { position: absolute; right: 8px; bottom: 8px; z-index: 6; }
.armor-card .armor-db-info { padding-right: 40px; }

/* ---- Saved trigger (top strip) ------------------------------------------ */
/* A clearly-visible bookmark + "Saved N" pill injected into .header-inner, just
   left of the Ask pill. Quiet outline by default (the AI pill is the loud one);
   accent-tinted count once anything is saved. Icon-only on phones. */
.d2gl-saved-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto;
  padding: 6px 13px;
  background: var(--bg-secondary);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}
.d2gl-saved-trigger svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.d2gl-saved-trigger:hover { color: var(--text-primary); border-color: var(--hairline-strong); background: var(--bg-card-hover); }
.d2gl-saved-trigger.has-items { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.55); }
.d2gl-saved-trigger.has-items svg { fill: currentColor; }
.d2gl-saved-trigger[aria-expanded="true"] {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.12);
}
.d2gl-saved-trigger:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.75); outline-offset: 1px; }
.d2gl-saved-trigger-count {
  min-width: 18px; padding: 0 5px; line-height: 17px; text-align: center;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0;
  border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--hairline);
  color: var(--text-secondary);
}
.d2gl-saved-trigger.has-items .d2gl-saved-trigger-count {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
}

/* ---- Saved side panel (right-docked; patterned after .ask-panel) --------- */
.d2gl-saved-panel {
  position: fixed;
  top: var(--strip-h); right: 0; bottom: 0; left: auto;
  z-index: 10010; /* same band as the Ask panel — over #siteDisclaimer, under terminal overlays */
  width: 380px; max-width: calc(100vw - var(--rail-w));
  display: flex; flex-direction: column;
  background: var(--bg-primary);
  border: 0; border-left: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-raised);
  transform: translateX(102%);
  pointer-events: none; visibility: hidden;
  transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  overflow: hidden;
}
.d2gl-saved-panel.open {
  transform: none;
  pointer-events: auto; visibility: visible;
  transition: transform var(--dur-2) var(--ease);
}

.d2gl-sp-head {
  display: flex; align-items: baseline; gap: var(--sp-2);
  flex: 0 0 auto;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
}
.d2gl-sp-title {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-primary);
}
.d2gl-sp-close {
  margin-left: auto; align-self: center;
  background: none; border: 0; padding: 0 var(--sp-1);
  color: var(--text-dim); font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}
.d2gl-sp-close:hover { color: var(--text-primary); }

.d2gl-sp-scroll {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-4);
}

.d2gl-sp-section { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Clickable section header (Weapons / Armor) — toggles data-collapsed on the
   section root. Cursor + hover make the affordance obvious; the chevron
   rotates to show state. Count badge stays put so it's visible either way. */
.d2gl-sp-section-head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 4px; border-bottom: 1px solid var(--hairline);
  cursor: pointer; user-select: none;
  border-radius: var(--radius-sm);
  transition: color var(--dur-1) var(--ease);
}
.d2gl-sp-section-head:hover { color: var(--text-secondary); }
.d2gl-sp-section-head:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.75); outline-offset: 1px; }
.d2gl-sp-chevron {
  flex: 0 0 auto; fill: none; stroke: currentColor;
  transform: rotate(0deg);
  transition: transform var(--dur-1) var(--ease);
}
.d2gl-sp-section[data-collapsed="true"] .d2gl-sp-chevron { transform: rotate(-90deg); }
.d2gl-sp-section-count {
  min-width: 18px; padding: 0 5px; line-height: 16px; text-align: center;
  font-size: 10px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--hairline);
  color: var(--text-secondary);
}
.d2gl-sp-section-empty {
  padding: var(--sp-2) 0;
  color: var(--text-dim); font-family: var(--font-ui); font-size: var(--fs-sm);
}

/* Collapsed: hide the list/empty-state, keep the head (with its count) visible. */
.d2gl-sp-section[data-collapsed="true"] .d2gl-sp-list,
.d2gl-sp-section[data-collapsed="true"] .d2gl-sp-section-empty {
  display: none;
}

.d2gl-sp-list { display: flex; flex-direction: column; gap: 6px; }

/* Panel item: a self-contained button with its own clean styling. It lives on
   <body>, NOT inside .app-layout, so it never inherits the list-view/detail
   cascade that hid the old strip cards. */
.d2gl-sp-item {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; text-align: left;
  padding: 8px 9px;
  background: var(--bg-card); border: 1px solid var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.d2gl-sp-item:hover { border-color: var(--hairline-strong); background: var(--bg-card-hover); }
.d2gl-sp-item:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.7); outline-offset: 1px; }

.d2gl-sp-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.d2gl-sp-icon {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-primary); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); overflow: hidden;
}
.d2gl-sp-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d2gl-sp-icon-blank { color: var(--text-dim); }
.d2gl-sp-icon-blank svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }

.d2gl-sp-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.d2gl-sp-name {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d2gl-sp-meta {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 400;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.d2gl-sp-remove {
  flex: 0 0 auto; align-self: center;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 18px; line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.d2gl-sp-remove:hover { color: var(--danger, #e5484d); background: var(--bg-secondary); }

/* saved-roll perk icon grid (weapons only) — rendered in the panel's own
   scope, to the right of the weapon photo inside .d2gl-sp-row. Always exactly
   5 columns; a column with no saved selection is left empty via grid-column
   placement (no left-fill/compaction), so columns stay aligned across cards. */
.d2gl-sp-perkgrid {
  flex: 0 0 auto;
  display: grid; grid-template-columns: repeat(5, 24px); gap: 4px;
}
.d2gl-sp-perkcell {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-primary); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); overflow: hidden;
}
.d2gl-sp-perkcell img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-sm); }

/* empty state */
.d2gl-sp-empty {
  margin: auto 0; padding: var(--sp-6) var(--sp-2);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  text-align: center;
}
.d2gl-sp-empty-glyph {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  border: 1px solid var(--hairline); border-radius: 999px;
}
.d2gl-sp-empty-glyph svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.d2gl-sp-empty-text {
  max-width: 260px;
  font-family: var(--font-ui); font-size: var(--fs-sm); line-height: 1.5;
  color: var(--text-secondary);
}

/* ---- "roll saved" hint ---------------------------------------------------- */
#d2glRollHint {
  position: fixed; left: 50%; bottom: 22px;
  transform: translateX(-50%) translateY(6px);
  z-index: 12000;
  padding: 6px 12px;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm);
  background: var(--bg-secondary); color: var(--text-secondary);
  font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: 0.4px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
#d2glRollHint.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- mobile (<=768px): icon-only trigger, full-height sheet -------------- */
@media (max-width: 768px) {
  .d2gl-saved-trigger { padding: 5px 9px; gap: 0; }
  .d2gl-saved-trigger-label { display: none; }
  /* keep the count visible on mobile — it's the whole point of the icon pill */
  .d2gl-saved-trigger-count { margin-left: 5px; }

  .d2gl-saved-panel {
    top: 0; left: 0; right: 0;
    width: auto; max-width: none;
    bottom: calc(var(--rail-mobile-h, 54px) + env(safe-area-inset-bottom, 0px));
    border-left: 0;
    box-shadow: none;
  }
  .d2gl-sp-head { padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px)); }
}