/* ============================================================
   任务面板
   ------------------------------------------------------------
   两张表：手上的、可接的。
   能不能点由服务端判，这里只把"不能点"的原因写在按钮上。
   ============================================================ */
.questp {
  width: min(680px, calc(100vw - 48px));
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--ink-3);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(255, 255, 255, 0.02);
  overflow: hidden;
  animation: questp-in 0.28s var(--ease-out) both;
}

@keyframes questp-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

/* ---------- 头 ---------- */
.questp__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line-soft);
  /* 头尾不参与压缩。不写这条，flex 会先挤底栏——
     交完任务的"获得 旧铜钱 ×5"就被挤没了 */
  flex: none;
}

.questp__title {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.3em;
  color: var(--t-0);
}

.questp__count {
  font-size: 11.5px;
  color: var(--t-2);
  font-variant-numeric: tabular-nums;
}

.questp__count b {
  color: var(--t-1);
  font-weight: 400;
}

.questp__count b.is-ready {
  color: var(--jin);
}

.questp__esc {
  margin-left: auto;
  font-size: 11px;
  color: var(--t-3);
}

/* ---------- 身 ---------- */
.questp__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 22px 16px;
}

.qsec {
  margin-top: 16px;
}

.qsec__name {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--t-1);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.qsec__name::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.questp__empty {
  padding: 40px 0;
  text-align: center;
  font-size: 12px;
  color: var(--t-3);
}

/* ---------- 一张任务 ---------- */
.qcard {
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-bright);
  border-radius: var(--r-sm);
  background: var(--ink-2);
  padding: 12px 14px;
  margin-bottom: 9px;
  transition: border-color 0.2s var(--ease);
}

.qcard:hover {
  border-color: var(--line-bright);
}

/* 可交的用金边：一眼扫过去就知道该干哪件 */
.qcard.is-ready {
  border-left-color: var(--jin);
  background: linear-gradient(90deg, rgba(217, 164, 65, 0.05), transparent 60%), var(--ink-2);
}

.qcard.is-avail {
  border-left-color: var(--qing-dim);
}

.qcard--empty {
  border-left-color: var(--line);
  color: var(--t-3);
  font-size: 11.5px;
  padding: 16px 14px;
}

.qcard__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.qcard__title {
  font-size: 13px;
  color: var(--t-0);
  letter-spacing: 0.02em;
}

.qcard__type {
  font-size: 10px;
  color: var(--t-2);
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 2px;
  line-height: 1.6;
}

.qcard__diff {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--t-3);
  font-variant-numeric: tabular-nums;
}

.qcard__obj {
  font-size: 12px;
  color: var(--t-1);
  line-height: 1.7;
}

/* ---------- 进度 ---------- */
.qcard__prog {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 2px;
}

.qcard__bar {
  flex: 1;
  height: 3px;
  background: var(--ink-4);
  border-radius: 2px;
  overflow: hidden;
}

.qcard__bar i {
  display: block;
  height: 100%;
  background: var(--qing-dim);
  transition: width 0.4s var(--ease-out);
}

.qcard.is-ready .qcard__bar i {
  background: var(--jin);
}

/* 数字放在条子外面。放进条子里会被 overflow:hidden 裁掉——
   第一版就是这么写的，"0 / 2" 一个字都没显示出来 */
.qcard__num {
  font-size: 10px;
  color: var(--t-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ---------- 脚 ---------- */
.qcard__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line-soft);
}

.qcard__where {
  font-size: 10.5px;
  color: var(--t-2);
}

.qcard__reward {
  font-size: 10.5px;
  color: var(--qing);
}

.qcard__btn {
  margin-left: auto;
  padding: 4px 14px;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--t-1);
  background: var(--ink-4);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.qcard__btn:hover:not(:disabled) {
  color: var(--t-0);
  border-color: var(--t-2);
}

.qcard__btn.is-primary {
  color: var(--jin);
  border-color: var(--jin-dim);
  background: rgba(217, 164, 65, 0.08);
}

.qcard__btn.is-primary:hover {
  color: var(--ink-0);
  background: var(--jin);
  border-color: var(--jin);
}

.qcard__btn:disabled {
  color: var(--t-3);
  border-color: var(--line);
  background: transparent;
  cursor: default;
}

/* ---------- 底 ---------- */
.questp__foot {
  padding: 12px 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--t-2);
  line-height: 1.9;
  min-height: 18px;
  max-height: 108px;
  overflow-y: auto;
  flex: none;
}

.qlog {
  color: var(--t-1);
}

.qlog--gain {
  color: var(--qing);
}

.qlog--sys {
  color: var(--t-0);
}

/* ---------- 侧栏 ---------- */
.quest.is-ready {
  border-left-color: var(--jin);
}

.quest--empty {
  border-left-color: var(--line);
  color: var(--t-3);
  font-size: 11.5px;
  cursor: default;
}

.quest__tag--ready {
  color: var(--jin);
  border-color: var(--jin-dim);
}

.quest__tag--here {
  color: var(--qing);
  border-color: var(--qing-dim);
}

.quest__tag--far {
  color: var(--t-3);
  border-color: var(--line);
}