/* ===========================================================================
   gta6quests.com · SIGNATURE FEATURE styles ("Leonida Case Files")
   Countdown panel (ink dossier cover, mono readout) + Mission Tracker checklist
   (manila card). Self-contained: relies only on the skin's CSS custom properties,
   with hard fallbacks so it renders even if loaded out of order. Mobile-first,
   WCAG AA, no horizontal overflow at 360/375/414.
   =========================================================================== */

/* ---- shared host ---------------------------------------------------------- */
.quest-feature__card,
.quest-check {
  max-width: 920px;
  margin-inline: auto;
}

/* =========================================================================
   COUNTDOWN  (ink "case file cover" panel, mono numerals = the launch readout)
   ========================================================================= */
.quest-countdown {
  background: var(--ink, #1E1B17);
  color: #F2E8D5;
  border-radius: var(--radius-lg, 8px);
  padding: clamp(20px, 4vw, 36px);
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(242,232,213,0.10);
  box-shadow: var(--shadow-lg, 0 14px 40px rgba(30,27,23,0.14));
}
.quest-countdown::before {
  /* faint dossier ledger ruling on the dark cover */
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(242,232,213,0.06) 1px, transparent 1px);
  background-size: 100% 30px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 55%, transparent 100%);
}
.quest-countdown::after {
  /* red index stripe down the left edge of the file cover */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--red, #C8412B);
}
.quest-countdown > * { position: relative; z-index: 1; }

.quest-cd__title {
  font-family: var(--font-display, "Roboto Slab", serif);
  font-weight: 800;
  font-size: clamp(1.1rem, 1.4vw + 0.9rem, 1.5rem);
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 clamp(14px, 2.5vw, 22px);
  max-width: none;
}

.quest-cd__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 16px);
  max-width: 520px;
  margin: 0 auto;
}
.quest-cd__cell {
  background: rgba(242,232,213,0.06);
  border: 1px solid rgba(242,232,213,0.14);
  border-radius: var(--radius-md, 6px);
  padding: clamp(10px, 2.2vw, 18px) 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0;
}
.quest-cd__val {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.8rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.quest-cd__unit {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: clamp(0.62rem, 1.6vw, 0.78rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #C9A66A;
  font-weight: 700;
}
.quest-cd__note {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: clamp(0.72rem, 1.6vw, 0.85rem);
  color: #C9A66A;
  margin: clamp(14px, 2.5vw, 20px) auto 0;
  max-width: 48ch;
  letter-spacing: 0.01em;
}

/* compact variant for in-content bare countdowns (release-date, 100% checklist) */
.quest-countdown:not(.quest-countdown--hero) {
  padding: clamp(16px, 3vw, 26px);
}
.quest-countdown:not(.quest-countdown--hero) .quest-cd__grid { max-width: 460px; }

/* =========================================================================
   MISSION TRACKER CHECKLIST  (manila card under the countdown)
   ========================================================================= */
.quest-check {
  margin-top: clamp(18px, 3vw, 28px);
  background: var(--card, #FBF7EE);
  border: 1px solid var(--hairline-2, #C3B292);
  border-radius: var(--radius-lg, 8px);
  padding: clamp(18px, 3.5vw, 30px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(30,27,23,0.06));
}
.quest-check__title {
  font-family: var(--font-display, "Roboto Slab", serif);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.6vw + 0.9rem, 1.55rem);
  color: var(--ink, #1E1B17);
  margin: 0 0 6px;
}
.quest-check__intro {
  font-size: var(--text-small, 0.93rem);
  color: var(--ink-3, #6E6354);
  margin: 0 0 clamp(14px, 2.5vw, 20px);
  max-width: 64ch;
}

.quest-check__progress {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: clamp(14px, 2.5vw, 20px);
}
.quest-check__bar {
  flex: 1 1 auto;
  height: 10px;
  background: var(--paper-2, #EADEC6);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--hairline, #D8C9AE);
}
.quest-check__fill {
  display: block; height: 100%;
  width: 0%;
  background: linear-gradient(100deg, var(--teal, #2E7D74), var(--teal-hi, #3C988E));
  border-radius: 999px;
  transition: width var(--transition-base, 200ms ease);
}
.quest-check__pct {
  flex: none;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-weight: 700;
  font-size: var(--text-small, 0.93rem);
  color: var(--teal-deep, #235F58);
  white-space: nowrap;
  min-width: 7.5ch;
  text-align: right;
}

.quest-check__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: 8px;
}
.quest-check__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 16px);
  border: 1px solid var(--hairline, #D8C9AE);
  border-radius: var(--radius-md, 6px);
  background: var(--card-2, #FFFDF8);
  transition: border-color var(--transition-fast, 130ms ease), background var(--transition-fast, 130ms ease);
  margin: 0;
}
.quest-check__item.is-done {
  border-color: color-mix(in srgb, var(--teal, #2E7D74) 50%, transparent);
  background: var(--teal-tint, #DDEBE8);
}
.quest-check__box {
  flex: none;
  width: 22px; height: 22px;
  margin: 1px 0 0;
  accent-color: var(--teal, #2E7D74);
  cursor: pointer;
}
.quest-check__label {
  font-size: var(--text-body, 1.05rem);
  line-height: var(--leading-snug, 1.3);
  color: var(--ink, #1E1B17);
  cursor: pointer;
  font-weight: 500;
}
.quest-check__item.is-done .quest-check__label {
  color: var(--teal-deep, #235F58);
}

.quest-check__reset {
  margin-top: clamp(14px, 2.5vw, 18px);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: var(--text-xs, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, #6E6354);
  background: none;
  border: 1px solid var(--hairline-2, #C3B292);
  border-radius: var(--radius-sm, 4px);
  padding: 8px 16px;
  cursor: pointer;
  transition: color var(--transition-fast, 130ms ease), border-color var(--transition-fast, 130ms ease);
}
.quest-check__reset:hover { color: var(--red-deep, #A8331F); border-color: var(--red, #C8412B); }
.quest-check__reset:focus-visible { outline: 3px solid var(--teal, #2E7D74); outline-offset: 2px; }

/* keep the 4-column countdown readable on the very narrowest phones */
@media (max-width: 360px) {
  .quest-cd__grid { gap: 6px; }
  .quest-cd__cell { padding: 10px 2px; }
}