/* THE PDA OF THE PEOPLE — inventory / journal / shop panel. Owned by the inventoryUI agent. */
#pda {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 940px;
  max-width: 94vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: rgba(12, 10, 8, 0.96);
  border: 3px solid var(--red);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.6);
  z-index: 30;
  animation: pda-in 0.14s steps(3) both;
}
@keyframes pda-in { from { transform: translate(-50%, calc(-50% + 18px)); } to { transform: translate(-50%, -50%); } }

.pda-header {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: var(--red-dark);
  border-bottom: 3px solid var(--red);
}
.pda-title { font-size: var(--fs-xl); font-weight: bold; letter-spacing: 0.25em; color: var(--paper); }
.pda-title::before { content: "★ "; color: var(--gold); }
.pda-vouchers { margin-left: auto; color: var(--gold); font-size: 18px; font-weight: bold; letter-spacing: 0.15em; white-space: nowrap; }
.pda-close {
  width: 34px; height: 34px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--gold);
  font-family: var(--font); font-size: 18px; font-weight: bold;
  cursor: pointer;
}
.pda-close:hover { background: var(--red); color: #fff; }

.pda-tabs { display: flex; border-bottom: 3px solid var(--red); }
.pda-tab {
  flex: 1;
  padding: 10px 6px;
  background: var(--ink); color: var(--paper);
  border: none; border-right: 2px solid var(--red-dark);
  font-family: var(--font); font-size: var(--fs-md); font-weight: bold;
  letter-spacing: 0.22em; text-transform: uppercase;
  cursor: pointer;
  opacity: 0.55;
}
.pda-tab:last-child { border-right: none; }
.pda-tab:hover { opacity: 0.85; }
.pda-tab.active { background: var(--red); color: #fff; opacity: 1; }

.pda-body { padding: 16px; overflow-y: auto; min-height: 360px; }
.pda-empty { color: var(--grey); font-size: var(--fs-md); letter-spacing: 0.12em; text-align: center; padding: 40px 10px; line-height: 1.6; }

/* ---- INVENTORY: 10×6 grid, 48px cells (CELL in inventoryUI.js) ---- */
.pda-grid {
  position: relative;
  width: 480px; height: 288px;
  margin: 4px auto 0;
  border: 2px solid var(--red);
  background-color: rgba(192, 32, 32, 0.06);
  background-image:
    repeating-linear-gradient(90deg, rgba(192, 32, 32, 0.4) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(192, 32, 32, 0.4) 0 1px, transparent 1px 48px);
}
.pda-item {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  background: rgba(192, 32, 32, 0.25);
  border: 2px solid var(--red);
  color: var(--paper);
  cursor: pointer;
  overflow: hidden;
}
.pda-item.usable { border-color: var(--gold); background: rgba(232, 184, 58, 0.14); }
.pda-item:hover { background: var(--red); color: #fff; }
.pda-item .glyph {
  font-size: 18px; font-weight: bold; letter-spacing: 0.05em;
  color: var(--gold);
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}
.pda-item:hover .glyph { color: #fff; }
.pda-item .qty {
  position: absolute; right: 3px; bottom: 1px;
  font-size: var(--fs-xs); font-weight: bold;
  color: var(--paper);
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}
.pda-legend {
  margin-top: 12px;
  text-align: center;
  color: var(--grey);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
}

/* ---- tooltip ---- */
#pda-tooltip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  max-width: 260px;
  background: rgba(12, 10, 8, 0.97);
  border: 2px solid var(--gold);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);
  padding: 8px 12px;
  color: var(--paper);
  font-size: var(--fs-sm);
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#pda-tooltip .t-name { color: var(--gold); font-size: var(--fs-md); font-weight: bold; letter-spacing: 0.12em; margin-bottom: 2px; }
#pda-tooltip .t-line.gold { color: var(--gold); }
#pda-tooltip .t-line.dim { color: var(--grey); }

/* ---- JOURNAL ---- */
.pda-act {
  color: var(--gold);
  font-size: var(--fs-md); font-weight: bold;
  letter-spacing: 0.22em;
  border-bottom: 2px solid var(--red);
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.pda-act.done-h { margin-top: 20px; }
.pda-quest {
  background: var(--ink);
  border: 2px solid var(--red);
  border-left: 6px solid var(--red);
  padding: 10px 14px;
  margin-bottom: 10px;
}
.pda-quest .q-title { color: var(--gold); font-size: var(--fs-md); font-weight: bold; letter-spacing: 0.12em; }
.pda-quest .q-obj { color: var(--paper); font-size: var(--fs-md); margin-top: 4px; letter-spacing: 0.08em; }
.pda-quest.pda-done { opacity: 0.55; border-left-color: var(--gold); }
.pda-quest.pda-done .q-title { color: var(--paper); }
.pda-quest.pda-done .q-title::first-letter { color: var(--gold); }

/* ---- PHASE 76: the tracked quest, and the tracking switch ---- */
.pda-quest[data-track] { cursor: pointer; }
.pda-quest[data-track]:hover { border-color: var(--gold); }
.pda-quest.q-tracked { border-left-color: var(--gold); border-left-width: 10px; }
.pda-quest .q-pin {
  color: var(--ink); background: var(--gold);
  font-size: var(--fs-sm); padding: 1px 6px; margin-left: 8px; letter-spacing: 0.14em;
}
.pda-track-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; padding: 6px 10px;
  border: 2px solid var(--gold); background: var(--ink);
}
.pda-track-bar.off { border-color: var(--paper); opacity: 0.75; }
.pda-track-bar .q-trackstate {
  color: var(--gold); font-size: var(--fs-md); font-weight: bold; letter-spacing: 0.14em;
}
.pda-track-bar .q-track-btn {
  font-family: inherit; font-size: var(--fs-sm); letter-spacing: 0.14em;
  color: var(--paper); background: transparent; border: 2px solid var(--red);
  padding: 4px 10px; cursor: pointer;
}
.pda-track-bar .q-track-btn:hover { color: var(--gold); border-color: var(--gold); }

/* ---- SHOP ---- */
.pda-shop-name {
  color: var(--gold);
  font-size: var(--fs-md); font-weight: bold;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}
.pda-shop-cols { display: flex; gap: 16px; align-items: flex-start; }
.pda-col { flex: 1; min-width: 0; }
.pda-col h3 {
  color: var(--gold);
  font-size: var(--fs-md);
  letter-spacing: 0.2em;
  border-bottom: 2px solid var(--red);
  padding-bottom: 6px;
  margin: 0 0 10px;
}
.pda-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--red);
  padding: 8px 12px;
  margin-bottom: 6px;
  font-family: var(--font); font-size: var(--fs-md);
  letter-spacing: 0.08em; text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.pda-row:hover:not(:disabled) { background: var(--red); color: #fff; }
.pda-row:disabled { opacity: 0.4; cursor: default; }
.pda-row .price { color: var(--gold); font-weight: bold; white-space: nowrap; }
.pda-row:hover:not(:disabled) .price { color: #fff; }