/* =========================================================
   Zeal Portal — Horizon decay
   Time-as-pressure: typographic weight + colour saturation decay
   across time horizons. Applies to any element carrying the
   data-horizon attribute — rows, cards, bullet lists, section
   headings. Reference consumer is the Roadmap page.

   Tokens:
     now         --ink    / black / solid paper bg
     next        --ink-2  / xbold / solid paper bg
     later       --ink-3  / medium / transparent
     considering --ink-4  / regular italic / transparent
     parked      --ink-5  / light italic / transparent
   ========================================================= */

[data-horizon="now"] {
  color: var(--ink, #000);
  font-weight: var(--w-black, 900);
  font-style: normal;
  background: var(--paper, #fff);
}

[data-horizon="next"] {
  color: var(--ink-2, rgba(0, 0, 0, 0.72));
  font-weight: var(--w-xbold, 800);
  font-style: normal;
  background: var(--paper, #fff);
}

[data-horizon="later"] {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: var(--w-medium, 500);
  font-style: normal;
  background: transparent;
}

[data-horizon="considering"] {
  color: var(--ink-4, rgba(0, 0, 0, 0.38));
  font-weight: var(--w-regular, 400);
  font-style: italic;
  background: transparent;
}

[data-horizon="parked"] {
  color: var(--ink-5, rgba(0, 0, 0, 0.22));
  font-weight: var(--w-light, 300);
  font-style: italic;
  background: transparent;
}

/* Horizon row helper — adds the tier-standard row rhythm on top
   of the decay tokens. Use on the Roadmap's row elements. */
.horizon-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--s-5, 24px);
  align-items: baseline;
  padding: var(--s-3, 12px) var(--s-4, 16px);
  border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
}
.horizon-row .horizon-row__when {
  font-family: var(--font-cd);
  font-size: var(--t-small, 13px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.horizon-row .horizon-row__what {
  font-family: var(--font-ex);
  font-size: var(--t-h5, 21px);
  line-height: var(--lh-snug, 1.15);
  letter-spacing: var(--track-sub, -0.03em);
}
.horizon-row .horizon-row__who {
  font-family: var(--font-cd);
  font-size: var(--t-small, 13px);
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}

/* =========================================================
   Progress thread — in-flight horizon items
   3px bar with a percentage fill driven by --pct. Pairs with
   an optional .horizon-thread__meta line beneath for left/right
   eyebrow metadata (e.g. "67%" · "ETA Q3").

   Markup:
     <div class="horizon-thread" style="--pct: 67%"></div>
     <div class="horizon-thread__meta">
       <span>67% complete</span><span>ETA Q3</span>
     </div>
   ========================================================= */

.horizon-thread {
  position: relative;
  height: 3px;
  background: var(--rule, rgba(0, 0, 0, 0.08));
}
.horizon-thread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--pct, 0%);
  background: var(--accent, #FF5800);
  transition: width var(--dur-slow, 420ms) var(--ease-out);
}
.horizon-thread__meta {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-1, 4px);
  font-family: var(--font-cd);
  font-size: var(--t-micro, 11px);
  letter-spacing: var(--track-wide, 0.08em);
  text-transform: uppercase;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}