/* ===========================================================================
   gta6ps4.com SIGNATURE FEATURE - Launch Readiness Checklist + countdown
   Self-contained module styled to match the "Miami Concrete Daylight" skin
   (concrete / teal / coral, thick ink borders, hard offset shadows, no blur).
   Mounts into #grc-feature on the homepage hero. All asset paths under
   /assets/feature/. localStorage-persisted, no login. Mobile-first, WCAG AA.
   NOTE: no em dashes in this file (the HTML normalizer does not run on assets).
   =========================================================================== */

.grc {
  --grc-ink: #1C2024;
  --grc-concrete: #F4F1EA;
  --grc-paper: #FFFFFF;
  --grc-sand: #E8DCC4;
  --grc-sand-2: #DECFB0;
  --grc-teal: #0E8C8C;
  --grc-teal-deep: #0A6E6E;
  --grc-coral: #FF5A4D;
  --grc-coral-deep: #D6382C;
  --grc-green: #1F7A4D;
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--grc-ink);
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 860px) {
  .grc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
}

/* ---- Eyebrow + headline -------------------------------------------------- */
.grc__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  font-size: 0.82rem; color: #fff; background: var(--grc-coral);
  border: 2px solid var(--grc-ink); border-radius: 3px; padding: 4px 10px;
  box-shadow: 2px 2px 0 var(--grc-ink);
}

/* ---- Countdown panel ----------------------------------------------------- */
.grc__countdown {
  background: var(--grc-paper);
  border: 3px solid var(--grc-ink);
  border-radius: 6px;
  box-shadow: 8px 8px 0 var(--grc-ink);
  padding: clamp(18px, 3vw, 28px);
}
.grc__count-title {
  font-family: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.02; margin: 14px 0 4px;
}
.grc__launch {
  font-size: 0.95rem; color: var(--grc-teal-deep); font-weight: 700; margin: 0 0 18px;
}
.grc__clock {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.grc__cell {
  background: var(--grc-ink); color: #fff; border-radius: 4px;
  padding: 12px 4px 8px; text-align: center;
}
.grc__num {
  font-family: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 6vw, 2.9rem); line-height: 1;
  font-variant-numeric: tabular-nums; display: block;
}
.grc__unit {
  display: block; margin-top: 4px; font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--grc-sand); font-weight: 600;
}
.grc__live {
  margin: 16px 0 0; font-size: 1rem; font-weight: 700; color: var(--grc-green);
  font-family: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.02em;
}

/* ---- Checklist panel ----------------------------------------------------- */
.grc__panel {
  background: var(--grc-paper);
  border: 3px solid var(--grc-ink);
  border-radius: 6px;
  box-shadow: 8px 8px 0 var(--grc-teal-deep);
  padding: clamp(18px, 3vw, 28px);
}
.grc__panel-title {
  font-family: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.04; margin: 0 0 14px;
}

/* progress bar */
.grc__progress { margin: 0 0 18px; }
.grc__bar {
  height: 16px; background: var(--grc-sand); border: 2px solid var(--grc-ink);
  border-radius: 3px; overflow: hidden;
}
.grc__bar-fill {
  height: 100%; width: 0%; background: var(--grc-teal);
  border-inline-end: 2px solid var(--grc-ink);
  transition: width 260ms ease;
}
.grc__bar-fill.is-full { background: var(--grc-green); border-inline-end: 0; }
.grc__progress-text {
  margin: 8px 0 0; font-size: 0.86rem; font-weight: 700; color: var(--grc-ink);
  font-variant-numeric: tabular-nums;
}

/* steps */
.grc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.grc__step {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  border: 2px solid var(--grc-ink); border-radius: 4px; padding: 12px 14px;
  background: var(--grc-concrete); transition: background 140ms ease;
  font-size: 0.98rem; line-height: 1.32; font-weight: 500;
}
.grc__step:hover { background: #fff; }
.grc__step input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.grc__box {
  flex: none; width: 24px; height: 24px; margin-top: 1px;
  border: 2px solid var(--grc-ink); border-radius: 3px; background: #fff;
  display: grid; place-items: center; transition: background 140ms ease;
}
.grc__box::after {
  content: ""; width: 12px; height: 7px; margin-top: -3px;
  border-left: 3px solid #fff; border-bottom: 3px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform 140ms ease;
}
.grc__step input:checked + .grc__box { background: var(--grc-teal); border-color: var(--grc-teal-deep); }
.grc__step input:checked + .grc__box::after { transform: rotate(-45deg) scale(1); }
.grc__step:has(input:checked) { background: #EEF6F4; }
.grc__step:has(input:checked) .grc__text { color: var(--grc-ink); }
.grc__step input:focus-visible + .grc__box { outline: 3px solid var(--grc-teal-deep); outline-offset: 2px; }
.grc__text { min-width: 0; }

.grc__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.grc__reset {
  font-family: "Archivo", system-ui, sans-serif; font-size: 0.84rem; font-weight: 700;
  color: var(--grc-ink); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px;
}
.grc__reset:hover { color: var(--grc-coral-deep); }
.grc__done {
  font-family: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.01em; font-weight: 700;
  color: var(--grc-green); font-size: 1rem; margin: 0;
}
.grc__done[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .grc__bar-fill, .grc__box, .grc__box::after, .grc__step { transition: none; }
}