/* ============================================================
   QUEST DAILY — recording sheet + history heatmap
   Companion to quest-daily.css. Same --sl-* tokens.
   v1 — 2026-06-20 FRIDAY.
   ============================================================ */

/* ============ RECORDING SHEET — quick in-session logging ============ */
.qd-rec-overlay {
  position: fixed; inset: 0; z-index: 10500;
  background: rgba(2,6,17,0.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.qd-rec-overlay.show { opacity: 1; pointer-events: auto; }

.qd-rec {
  width: 100%; max-width: 520px;
  background: linear-gradient(180deg, rgba(8,18,38,0.96), rgba(15,8,35,0.96));
  border: 1px solid var(--sl-cyan-dim, rgba(0,246,255,0.5));
  border-top: 2px solid var(--sl-cyan, #00f6ff);
  box-shadow: 0 -10px 50px rgba(0,246,255,0.22);
  padding: 22px 18px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  clip-path: polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%,0 16px);
}
.qd-rec-overlay.show .qd-rec { transform: translateY(0); }

.qd-rec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.qd-rec-title {
  font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 10px var(--sl-cyan-glow, rgba(0,246,255,0.6));
}
.qd-rec-title::before { content: '◆ '; color: var(--sl-cyan, #00f6ff); }
.qd-rec-offline {
  font-family: 'Orbitron', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sl-gold, #ffd700); border: 1px solid rgba(255,215,0,0.4);
  background: rgba(255,215,0,0.07); padding: 3px 9px;
  clip-path: polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
.qd-rec-offline.synced { color: var(--sl-success, #00ffa3); border-color: rgba(0,255,163,0.4); background: rgba(0,255,163,0.07); }

/* Big live number */
.qd-rec-num {
  font-family: 'Orbitron', monospace; font-size: 56px; font-weight: 800;
  text-align: center; color: var(--sl-cyan, #00f6ff); line-height: 1.1;
  text-shadow: 0 0 22px var(--sl-cyan-glow, rgba(0,246,255,0.6));
  font-variant-numeric: tabular-nums; margin: 8px 0 2px;
}
.qd-rec-num small { font-size: 16px; color: var(--sl-text-dim, #7a8fb8); margin-left: 6px; }
.qd-rec-target {
  font-family: 'Orbitron', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-align: center; color: var(--sl-text-dim, #7a8fb8); text-transform: uppercase;
  margin-bottom: 16px;
}

/* +N chips */
.qd-rec-chips {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px;
}
.qd-rec-chip {
  font-family: 'Orbitron', monospace; font-size: 13px; font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, rgba(0,246,255,0.1), rgba(123,45,255,0.06));
  border: 1px solid var(--sl-cyan-dim, rgba(0,246,255,0.4));
  color: var(--sl-cyan, #00f6ff); padding: 13px 4px; cursor: pointer;
  text-align: center; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: transform 0.12s, box-shadow 0.18s, background 0.18s, color 0.18s;
}
.qd-rec-chip:hover, .qd-rec-chip:focus-visible {
  background: linear-gradient(135deg, rgba(0,246,255,0.28), rgba(123,45,255,0.16));
  color: #fff; box-shadow: 0 0 14px var(--sl-cyan-glow, rgba(0,246,255,0.45)); outline: none;
}
.qd-rec-chip:active { transform: scale(0.93); }

.qd-rec-actions { display: flex; gap: 10px; margin-top: 6px; }
.qd-rec-btn {
  flex: 1; font-family: 'Orbitron', monospace; font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 14px;
  border: 1px solid var(--sl-cyan-dim, rgba(0,246,255,0.55));
  background: linear-gradient(135deg, rgba(0,246,255,0.08), rgba(123,45,255,0.04));
  color: var(--sl-cyan, #00f6ff); cursor: pointer;
  clip-path: polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition: all 0.2s;
}
.qd-rec-btn.primary {
  background: linear-gradient(135deg, var(--sl-cyan, #00f6ff), #0099cc);
  color: #02060f; font-weight: 800; border-color: var(--sl-cyan, #00f6ff);
  box-shadow: 0 0 24px var(--sl-cyan-glow, rgba(0,246,255,0.5)), inset 0 0 16px rgba(255,255,255,0.15);
}
.qd-rec-btn.primary:hover { box-shadow: 0 0 34px var(--sl-cyan-glow, rgba(0,246,255,0.6)); }
.qd-rec-btn.ghost { background: rgba(8,18,38,0.4); border-color: var(--sl-text-muted, #4a5f87); color: var(--sl-text-dim, #7a8fb8); }

/* ============ HISTORY HEATMAP — calendar of cleared days ============ */
.qd-heatmap {
  background: var(--sl-bg-card, rgba(8,18,38,0.78));
  border: 1px solid var(--sl-line, rgba(0,246,255,0.12));
  padding: 16px 14px;
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.qd-heat-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
}
.qd-heat-dow {
  font-family: 'Orbitron', monospace; font-size: 8px; letter-spacing: 0.1em;
  text-align: center; color: var(--sl-text-muted, #4a5f87); text-transform: uppercase;
  padding-bottom: 4px;
}
.qd-heat-cell {
  aspect-ratio: 1; border: 1px solid var(--sl-line, rgba(0,246,255,0.1));
  background: rgba(2,6,17,0.5); position: relative;
  transition: box-shadow 0.18s, transform 0.12s;
}
/* intensity 0–4 = quests cleared that day */
.qd-heat-cell[data-lvl="1"] { background: rgba(0,255,163,0.18); border-color: rgba(0,255,163,0.25); }
.qd-heat-cell[data-lvl="2"] { background: rgba(0,255,163,0.34); border-color: rgba(0,255,163,0.4); }
.qd-heat-cell[data-lvl="3"] { background: rgba(0,255,163,0.55); border-color: rgba(0,255,163,0.6); }
.qd-heat-cell[data-lvl="4"] {
  background: var(--sl-success, #00ffa3); border-color: var(--sl-success, #00ffa3);
  box-shadow: 0 0 8px rgba(0,255,163,0.5);
}
.qd-heat-cell.today { outline: 1px solid var(--sl-cyan, #00f6ff); outline-offset: 1px; }
.qd-heat-cell:hover { transform: scale(1.15); box-shadow: 0 0 10px var(--sl-cyan-glow, rgba(0,246,255,0.5)); z-index: 2; }
.qd-heat-cell .qd-heat-day {
  position: absolute; top: 1px; left: 2px; font-size: 7px;
  font-family: 'Orbitron', monospace; color: rgba(255,255,255,0.35);
}

.qd-heat-legend {
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  margin-top: 12px; font-family: 'Orbitron', monospace; font-size: 8px;
  letter-spacing: 0.12em; color: var(--sl-text-muted, #4a5f87); text-transform: uppercase;
}
.qd-heat-legend i {
  width: 12px; height: 12px; display: inline-block;
  border: 1px solid var(--sl-line, rgba(0,246,255,0.1)); background: rgba(2,6,17,0.5);
}
.qd-heat-legend i[data-lvl="2"] { background: rgba(0,255,163,0.34); }
.qd-heat-legend i[data-lvl="4"] { background: var(--sl-success, #00ffa3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}