/* ===========================================================================
   gta6ps6.com, SKIN "Orion Blueprint" · SIGNATURE FEATURE STYLES
   The Confirmed-vs-Rumour tracker: countdown clock + PS6 fact list + the
   localStorage decision checklist. Mounted into #ps6-tracker on the pillar.
   Uses the skin tokens, with safe local fallbacks so it renders standalone.
   AMBER = confirmed by Rockstar (reserved). CYAN = leak / rumour (unverified).
   =========================================================================== */

#ps6-tracker {
  --t-cyan: var(--cyan, #2BD4FF);
  --t-cyan-hi: var(--cyan-hi, #74E4FF);
  --t-amber: var(--amber, #FFB020);
  --t-amber-hi: var(--amber-hi, #FFC659);
  --t-ink: var(--text, #E8F1FB);
  --t-ink-2: var(--text-2, #B4C6DB);
  --t-ink-3: var(--text-3, #7E97B2);
  --t-line: var(--line, #1E3A57);
  --t-line-2: var(--line-2, #2C5078);
  --t-surface: var(--navy-800, #0E2238);
  --t-surface-2: var(--navy-850, #0C1E37);
  --t-mono: var(--font-mono, "Fragment Mono", ui-monospace, "SF Mono", Consolas, monospace);
  --t-sans: var(--font-body, "Spline Sans", system-ui, sans-serif);
  margin-top: 28px;
}

.ps6t {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 760px) {
  .ps6t { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.35fr); grid-template-rows: auto auto; }
  .ps6t__count  { grid-column: 1; grid-row: 1; }
  .ps6t__decide { grid-column: 1; grid-row: 2; }
  .ps6t__facts  { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---- shared panel chrome (blueprint card with corner brackets) ------------ */
.ps6t__count, .ps6t__facts, .ps6t__decide {
  position: relative;
  background: var(--t-surface-2);
  border: 1px solid var(--t-line);
  border-radius: 8px;
  padding: 18px 20px;
}
.ps6t__count::before, .ps6t__facts::before, .ps6t__decide::before {
  content: ""; position: absolute; left: 8px; top: 8px; width: 12px; height: 12px;
  border-left: 1.5px solid var(--t-line-2); border-top: 1.5px solid var(--t-line-2);
  pointer-events: none;
}
.ps6t__count::after, .ps6t__facts::after, .ps6t__decide::after {
  content: ""; position: absolute; right: 8px; bottom: 8px; width: 12px; height: 12px;
  border-right: 1.5px solid var(--t-line-2); border-bottom: 1.5px solid var(--t-line-2);
  pointer-events: none;
}

/* ---- countdown clock ------------------------------------------------------ */
.ps6t__count {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(43,212,255,0.08), transparent 60%),
    var(--t-surface-2);
}
.ps6t__count-label {
  margin: 0 0 12px; font-family: var(--t-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--t-cyan); max-width: none;
}
.ps6t__clock { display: flex; gap: 8px; flex-wrap: wrap; }
.ps6t__unit {
  flex: 1 1 0; min-width: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px; border: 1px solid var(--t-line);
  border-radius: 6px; background: var(--t-surface);
}
.ps6t__num {
  font-family: var(--t-mono); font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1;
  color: var(--t-cyan-hi); font-variant-numeric: tabular-nums;
}
.ps6t__unit-label {
  font-family: var(--t-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--t-ink-3);
}
.ps6t__launched {
  font-family: var(--t-mono); font-size: 1.05rem; color: var(--t-amber-hi);
  letter-spacing: 0.04em; padding: 10px 0;
}

/* ---- fact tracker --------------------------------------------------------- */
.ps6t__facts-title {
  margin: 0 0 4px; font-family: var(--t-sans); font-size: 1.12rem; font-weight: 700; color: var(--t-ink);
}
.ps6t__facts-note {
  margin: 0 0 14px; font-size: 0.86rem; color: var(--t-ink-3); max-width: none;
}
.ps6t__list { list-style: none; margin: 0; padding: 0; max-width: none; display: flex; flex-direction: column; gap: 1px; }
.ps6t__row {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start;
  padding: 11px 12px; background: var(--t-surface); border: 1px solid var(--t-line);
  border-radius: 6px; margin: 0;
}
.ps6t__row.is-confirmed { border-left: 3px solid var(--t-amber); }
.ps6t__row.is-rumour    { border-left: 3px solid var(--t-cyan); }
.ps6t__row-tag {
  grid-column: 1; align-self: start;
  font-family: var(--t-mono); font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; white-space: nowrap; border: 1px solid transparent;
}
.is-confirmed .ps6t__row-tag { color: var(--t-amber-hi); background: rgba(255,176,32,0.13); border-color: rgba(255,176,32,0.42); }
.is-rumour .ps6t__row-tag    { color: var(--t-cyan-hi); background: rgba(43,212,255,0.12); border-color: rgba(43,212,255,0.4); }
.ps6t__row-claim { grid-column: 2; grid-row: 1; color: var(--t-ink); font-size: 0.92rem; line-height: 1.35; }
.ps6t__row-as {
  grid-column: 2; grid-row: 2;
  font-family: var(--t-mono); font-size: 0.7rem; color: var(--t-ink-3); letter-spacing: 0.02em;
}

/* ---- decision checklist --------------------------------------------------- */
.ps6t__decide-title {
  margin: 0 0 4px; font-family: var(--t-sans); font-size: 1.12rem; font-weight: 700; color: var(--t-ink);
}
.ps6t__decide-note { margin: 0 0 12px; font-size: 0.84rem; color: var(--t-ink-3); max-width: none; }
.ps6t__opts { display: flex; flex-direction: column; gap: 8px; }
.ps6t__opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 13px; border: 1px solid var(--t-line-2); border-radius: 6px;
  background: var(--t-surface); color: var(--t-ink-2); cursor: pointer;
  font-family: var(--t-sans); font-size: 0.94rem; text-align: left;
  transition: border-color 130ms ease, color 130ms ease, background 130ms ease;
  min-height: 48px;
}
.ps6t__opt:hover { border-color: var(--t-cyan); color: var(--t-ink); }
.ps6t__opt:focus-visible { outline: 3px solid var(--t-cyan); outline-offset: 2px; }
.ps6t__opt-dot {
  flex: none; width: 16px; height: 16px; border-radius: 3px;
  border: 1.5px solid var(--t-line-2); position: relative;
}
.ps6t__opt.is-on { border-color: var(--t-cyan); color: var(--t-ink); background: rgba(43,212,255,0.07); }
.ps6t__opt.is-on .ps6t__opt-dot { border-color: var(--t-cyan); }
.ps6t__opt.is-on .ps6t__opt-dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 1px; background: var(--t-cyan);
}
.ps6t__opt-label { flex: 1 1 auto; }
.ps6t__opt-saved {
  flex: none; font-family: var(--t-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--t-cyan-hi);
}

@media (prefers-reduced-motion: reduce) {
  .ps6t__opt { transition: none; }
}