/* Dark Mage of Mossfen — the quest log (v0.93, ui/questlog.js): J, or the Quests button by the keys. On the right like
   the quest window a giver opens (quest.css), whose rows it shares (.quest-needs). */

#questlog {
  top: 12px; right: 12px; z-index: 5;
  width: min(400px, calc(100% - 24px));
  max-height: calc(100% - 100px);
  overflow-y: auto;
  padding: 10px 14px 12px;
}
#questlog header { align-items: center; }
#questlog header .win-meta { margin-left: 10px; font-variant-numeric: tabular-nums; }
#questlog header .win-close { margin-left: auto; }
.ql-tabs [data-tab="done"] { --tab: #9bff8a; }
.ql-tabs button b { margin-left: 4px; font: 400 13px/1 var(--f-num); color: var(--ink-faint); }
.ql-tabs button[aria-selected="true"] b { color: var(--exp); }

.ql-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ql-empty { padding: 14px 10px; font: italic 500 14px/1.4 var(--f-body); color: var(--ink-faint); text-align: center; }

.ql-quest {
  padding: 9px 10px 10px; border-radius: 5px;
  background: rgba(11, 15, 12, 0.55); border: 1px solid rgba(206, 184, 118, 0.18);
}
.ql-quest.is-ready { border-color: rgba(155, 255, 138, 0.45); }
.ql-quest h4 { margin: 0; font: 700 16px/1.15 var(--f-display); letter-spacing: 0.03em; color: #f3d68a; }
.ql-quest h4::before { content: '✦ '; color: #b98cff; }
.ql-quest.is-done h4 { color: var(--ink-dim); }
.ql-quest.is-done h4::before { content: '✓ '; color: #9bff8a; }

.ql-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ql-track {
  flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
  font: 700 12.5px/1 var(--f-display); letter-spacing: 0.06em; color: var(--ink-dim);
}
.ql-track input { width: 16px; height: 16px; margin: 0; accent-color: #e8b33a; cursor: pointer; }
.ql-track:hover { color: var(--ink); }

.ql-giver { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; margin: 7px 0 0; }
.ql-giver img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: radial-gradient(circle at 50% 40%, rgba(255, 215, 106, 0.28), rgba(11, 15, 12, 0.9) 72%);
  box-shadow: inset 0 0 0 1px var(--edge-strong), 0 0 0 1px #000;
}
.ql-giver span { font: 500 13.5px/1.25 var(--f-body); color: var(--ink-dim); min-width: 0; }
.ql-giver b { font-weight: 700; color: var(--ink); }
.ql-giver small { display: block; font-size: 12.5px; color: var(--ink-faint); }
.ql-stage {
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  font: normal 700 11.5px/1 var(--f-display); letter-spacing: 0.06em;
  color: var(--ink-dim); box-shadow: inset 0 0 0 1px var(--edge);
}
.is-ready .ql-stage { color: #0f1a0c; background: #9bff8a; box-shadow: none; }
.is-done .ql-stage { color: #9bff8a; box-shadow: inset 0 0 0 1px rgba(155, 255, 138, 0.4); }

.ql-summary { margin: 7px 0 0; font: italic 500 13.5px/1.35 var(--f-body); color: var(--ink-dim); }
.ql-rows { margin: 7px 0 0; gap: 4px; }
.ql-rows li { grid-template-columns: 26px 1fr auto; gap: 8px; padding: 3px 7px; }
.ql-rows img { width: 26px; height: 26px; }
.ql-rows span { font-size: 13.5px; }
.ql-rows b { font-size: 14px; }
.ql-next { margin: 6px 0 0; font: italic 600 13px/1.3 var(--f-body); color: #9bff8a; }
.ql-reward { margin: 6px 0 0; font: 500 12.5px/1.3 var(--f-body); color: #e2d1ff; }
.is-done .ql-reward { color: var(--ink-faint); }

body.questlog-open #quest-track { visibility: hidden; }

@media (max-width: 600px) {
  #questlog { padding: 8px 10px 10px; }
  .ql-giver { grid-template-columns: 30px 1fr; }
  .ql-giver img { width: 30px; height: 30px; }
  .ql-stage { grid-column: 2; justify-self: start; }
}