/* Day91 — colour + energy layer.
   Loaded last. Adds the multi-hue accent system, gradient surfaces and the
   extra motion elements. Content and structure are untouched. */

:root {
  --c-green:  #12A150;
  --c-lime:   #8BD450;
  --c-teal:   #0FB5A0;
  --c-amber:  #F5A524;
  --c-coral:  #F2643C;
  --c-plum:   #A855C7;
  --c-ink-2:  #0B1F17;

  --grad-hero: linear-gradient(96deg, var(--c-green), var(--c-teal) 42%, var(--c-lime) 78%);
  --grad-warm: linear-gradient(96deg, var(--c-amber), var(--c-coral));
}

/* ---------- accent rotation, applied to any repeating card set ---------- */

.xtool:nth-child(6n+1), .persona:nth-child(6n+1), .toolcard:nth-child(6n+1) { --hue: var(--c-green); }
.xtool:nth-child(6n+2), .persona:nth-child(6n+2), .toolcard:nth-child(6n+2) { --hue: var(--c-teal); }
.xtool:nth-child(6n+3), .persona:nth-child(6n+3), .toolcard:nth-child(6n+3) { --hue: var(--c-plum); }
.xtool:nth-child(6n+4), .persona:nth-child(6n+4), .toolcard:nth-child(6n+4) { --hue: var(--c-amber); }
.xtool:nth-child(6n+5), .persona:nth-child(6n+5), .toolcard:nth-child(6n+5) { --hue: var(--c-coral); }
.xtool:nth-child(6n+6), .persona:nth-child(6n+6), .toolcard:nth-child(6n+6) { --hue: var(--c-lime); }

.xtool, .toolcard, .persona {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--hue, var(--c-green)) 13%, transparent), transparent 62%),
    var(--paper-3, #fff);
  transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}
.xtool::after, .toolcard::after, .persona::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--hue, var(--c-green));
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.xtool:hover::after, .toolcard:hover::after, .persona:hover::after { transform: scaleX(1); }
.xtool:hover, .toolcard:hover, .persona:hover {
  border-color: color-mix(in oklab, var(--hue, var(--c-green)) 45%, var(--rule));
  box-shadow: 0 18px 40px -22px color-mix(in oklab, var(--hue, var(--c-green)) 70%, transparent);
}
.xtool .k, .toolcard .tno {
  color: color-mix(in oklab, var(--hue, var(--c-green)) 78%, #000) !important;
  background: color-mix(in oklab, var(--hue, var(--c-green)) 15%, #fff);
  border-radius: 999px;
  padding: .18rem .55rem;
  display: inline-block;
}
.xtool .go { color: var(--hue, var(--c-green)); transition: transform .3s ease; }
.xtool:hover .go { transform: translateX(5px); }

/* ---------- eyebrows become colour chips ---------- */

.section .eyebrow, .sechead .eyebrow, .xhero .eyebrow {
  display: inline-block;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--c-green) 12%, #fff);
  color: #0B5E35;
  border: 1px solid color-mix(in oklab, var(--c-green) 25%, transparent);
}
.section:nth-of-type(3n+2) .eyebrow { background: color-mix(in oklab, var(--c-amber) 16%, #fff); color: #7A4C07; border-color: color-mix(in oklab, var(--c-amber) 35%, transparent); }
.section:nth-of-type(3n+3) .eyebrow { background: color-mix(in oklab, var(--c-plum) 14%, #fff); color: #6B2A83; border-color: color-mix(in oklab, var(--c-plum) 30%, transparent); }
.band .eyebrow { background: rgba(255,255,255,.08); color: #8FD3AE !important; border-color: rgba(255,255,255,.14); }

/* ---------- readable, colourful stat counters ---------- */

.stat dt { color: var(--ink); }
.stat dd { color: var(--muted); }
.stats .stat:nth-child(3n+1) dt { color: #0E7A45; }
.stats .stat:nth-child(3n+2) dt { color: #B4560F; }
.stats .stat:nth-child(3n+3) dt { color: #7B2E96; }
.band .stat dt,
.band .stats .stat:nth-child(3n+1) dt { color: #7BE3AC; }
.band .stats .stat:nth-child(3n+2) dt { color: #FFC862; }
.band .stats .stat:nth-child(3n+3) dt { color: #E6A6FF; }
.band .stat dd { color: #A9AEB6; }

.stat {
  position: relative;
  padding-left: .85rem;
}
.stat::before {
  content: "";
  position: absolute; left: 0; top: .1rem; bottom: .35rem; width: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: .35;
}
.stats .stat:nth-child(3n+1)::before { background: #0E7A45; }
.stats .stat:nth-child(3n+2)::before { background: #E08A16; }
.stats .stat:nth-child(3n+3)::before { background: #A855C7; }

/* ---------- buttons ---------- */

.btn:not(.ghost) {
  position: relative;
  overflow: hidden;
  background: var(--grad-hero);
  border-color: transparent;
  color: #fff;
}
.btn:not(.ghost)::after {
  content: "";
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}
.btn:not(.ghost):hover::after { left: 120%; }
.btn.ghost:hover {
  border-color: var(--c-green);
  color: #0B5E35;
  background: color-mix(in oklab, var(--c-green) 8%, #fff);
}

/* ---------- headline highlight ----------
   Headings always keep full-contrast ink; emphasis is carried by an
   underlay sweep (pop.css), never by transparent gradient text. */

.hl {
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
}


/* ---------- hero aurora ---------- */

.aurora {
  position: absolute;
  inset: -12% -6% auto -6%;
  height: 130%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  filter: blur(46px);
  opacity: .55;
}
.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: multiply;
  animation: drift 18s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { width: 30rem; height: 30rem; left: -6%;  top: -10%; background: #9FE9C0; }
.aurora i:nth-child(2) { width: 24rem; height: 24rem; right: 4%;  top: 6%;   background: #FFD9A8; animation-delay: -4s; }
.aurora i:nth-child(3) { width: 20rem; height: 20rem; right: 26%; bottom: -8%; background: #D9C0F5; animation-delay: -9s; }
.aurora i:nth-child(4) { width: 18rem; height: 18rem; left: 22%;  bottom: -12%; background: #BFEFA8; animation-delay: -13s; }
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(3.5rem,-2.5rem,0) scale(1.14); }
}
.xhero { position: relative; z-index: 0; }

/* ---------- colour rail + progress ---------- */

.progress { background: var(--grad-hero) !important; }

.rail::before {
  background: linear-gradient(180deg, var(--c-green), var(--c-teal) 35%, var(--c-amber) 70%, var(--c-coral)) !important;
  opacity: .5;
}
.rail > .mark { color: #4B5563 !important; }

/* ---------- dark bands get depth ---------- */

.band {
  background:
    radial-gradient(90% 130% at 12% 0%, #133A28 0%, transparent 60%),
    radial-gradient(70% 120% at 92% 100%, #2A1B36 0%, transparent 62%),
    var(--ink-band);
}

/* ---------- marquee ---------- */

.marquee { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: linear-gradient(90deg, #F1FBF5, #FFF8EC 50%, #F7F1FD); }
.marquee-track > * :is(span, b) { color: inherit; }

/* ---------- floating spark dots (added by color.js) ---------- */

.sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.sparks span {
  position: absolute;
  width: 7px; height: 7px; border-radius: 50%;
  opacity: .0;
  animation: spark 6s ease-in-out infinite;
}
@keyframes spark {
  0%   { opacity: 0; transform: translateY(14px) scale(.6); }
  35%  { opacity: .85; }
  70%  { opacity: .5; transform: translateY(-16px) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(.7); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .aurora i, .sparks span { animation: none !important; }
  .btn:not(.ghost)::after { display: none; }
}

.nobr { white-space: nowrap; }

/* ---------- tools page: family bands + hue-coded cards ---------- */

.famhead {
  --tone: var(--c-green);
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  padding-bottom: .6rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid color-mix(in oklab, var(--tone) 35%, transparent);
}
.famtag {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .28rem .65rem; border-radius: 999px;
  background: color-mix(in oklab, var(--tone) 16%, #fff);
  color: color-mix(in oklab, var(--tone) 82%, #000);
}
.famhead p { margin: 0; font-size: .9rem; color: var(--muted); max-width: 34rem; }

.toolgrid .tool {
  position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .35s ease;
}
.toolgrid .tool::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--tone, var(--c-green));
  transform: scaleX(.18); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.toolgrid .tool::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 70% at 100% 0%, color-mix(in oklab, var(--tone) 14%, transparent), transparent 65%);
  opacity: 0; transition: opacity .35s ease;
}
.toolgrid .tool:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--tone) 45%, var(--rule));
  box-shadow: 0 22px 46px -30px color-mix(in oklab, var(--tone) 90%, transparent);
}
.toolgrid .tool:hover::before { transform: scaleX(1); }
.toolgrid .tool:hover::after { opacity: 1; }
.toolgrid .tool .tnum { background: color-mix(in oklab, var(--tone) 15%, #fff); color: color-mix(in oklab, var(--tone) 82%, #000); }
.toolgrid .tool .go { color: color-mix(in oklab, var(--tone) 85%, #000); }
.toolgrid .tool.primary { border-color: color-mix(in oklab, var(--tone) 55%, var(--rule)); }
.toolgrid .tool .tprev .barmini i { background: var(--tone); }

@media (prefers-reduced-motion: reduce) {
  .toolgrid .tool { transition: none; }
}
.toolgrid.solo { grid-template-columns: 1fr; }

/* ---------- v3: provenance strip + sourcing tiers ---------- */

.provstrip {
  border: 1px solid var(--rule-soft, #E2E0D8);
  border-radius: 12px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--c-teal) 10%, transparent), transparent 60%),
    var(--paper-3, #fff);
  padding: 1rem 1.1rem;
  margin: 1.4rem 0;
}
.provstrip.is-seed {
  border-color: color-mix(in oklab, var(--c-amber) 45%, var(--rule, #E2E0D8));
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--c-amber) 14%, transparent), transparent 62%),
    var(--paper-3, #fff);
}
.prov-row { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.prov-stat { display: flex; flex-direction: column; gap: .1rem; }
.prov-stat b {
  font-family: var(--mono, monospace);
  font-size: 1.35rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--c-green) 80%, #000);
}
.provstrip.is-seed .prov-stat b { color: color-mix(in oklab, var(--c-amber) 82%, #000); }
.prov-stat span {
  font-family: var(--mono, monospace);
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint, #8A8D93);
}
.prov-note {
  margin: .9rem 0 0; font-size: .8125rem; line-height: 1.55;
  color: var(--muted, #63676E); max-width: 58rem;
}
.prov-note code {
  font-family: var(--mono, monospace); font-size: .78em;
  background: color-mix(in oklab, var(--c-green) 10%, #fff);
  border-radius: 4px; padding: .06rem .3rem;
}
.prov-tiers { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .4rem; }
.prov-tiers li { display: flex; gap: .55rem; align-items: flex-start;
  font-size: .8125rem; color: var(--muted, #63676E); line-height: 1.5; }

.tierchip {
  flex: none; font-style: normal;
  font-family: var(--mono, monospace); font-size: .62rem; font-weight: 700;
  width: 1.25rem; height: 1.25rem; border-radius: 5px;
  display: grid; place-items: center; color: #fff;
}
.tier-A { background: var(--c-green, #12A150); }
.tier-B { background: var(--c-teal, #0FB5A0); }
.tier-C { background: var(--c-amber, #F5A524); }

/* ---------- v3: reversal filings-mode findings ---------- */

.revf-head { margin: 1.6rem 0 .8rem; }
.revf-head h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
.revf-head p { font-size: .85rem; color: var(--muted, #63676E); margin: 0; }

.revf {
  border: 1px solid var(--rule-soft, #E2E0D8);
  border-left: 3px solid var(--c-teal, #0FB5A0);
  border-radius: 0 10px 10px 0;
  background: var(--paper-3, #fff);
  padding: 1rem 1.15rem;
  margin: .7rem 0;
}
.revf.sev-4 { border-left-color: var(--c-coral, #F2643C); }
.revf.sev-3 { border-left-color: var(--c-amber, #F5A524); }
.revf.sev-2 { border-left-color: var(--c-teal, #0FB5A0); }
.revf.empty { border-left-color: var(--c-green, #12A150); }

.revf header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.revf header h3 { flex: 1 1 100%; font-size: 1rem; margin: .3rem 0 0; line-height: 1.35; }
.revf .kind {
  font-family: var(--mono, monospace); font-size: .58rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint, #8A8D93);
}
.revf .detail { font-size: .9375rem; line-height: 1.6; margin: 0 0 .5rem;
  font-variant-numeric: tabular-nums; }
.revf .note { font-size: .8125rem; line-height: 1.55; color: var(--muted, #63676E); margin: 0; }
.revf p code, .revf .note code {
  font-family: var(--mono, monospace); font-size: .8em;
  background: color-mix(in oklab, var(--c-green) 10%, #fff);
  border-radius: 4px; padding: .06rem .3rem;
}
.revf ul.ev { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .35rem; }
.revf ul.ev li { font-size: .8125rem; display: flex; gap: .5rem; align-items: baseline;
  flex-wrap: wrap; }
.revf ul.ev .accn {
  font-family: var(--mono, monospace); font-size: .68rem; color: var(--faint, #8A8D93);
}

.rev-routes { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--rule-soft, #E2E0D8); }
.rev-routes h4 {
  font-family: var(--mono, monospace); font-size: .6rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint, #8A8D93); margin: 0 0 .5rem; font-weight: 500;
}
.rev-routes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.rev-routes li { display: flex; gap: .5rem; align-items: center; font-size: .8125rem; }

.st.ok { color: color-mix(in oklab, var(--c-green) 80%, #000); }
.st.warn { color: color-mix(in oklab, var(--c-coral) 80%, #000); }