/* ===========================================================================
   TRIVUX PRO — October 2026 seasonal layer
   ---------------------------------------------------------------------------
   Additive only. Nothing in page-trivux-pro.php is edited; this file and
   october-2026.js are loaded alongside it and lift out cleanly on Nov 1 by
   removing the two <link>/<script> tags.

   Palette note: the app's base accent is gold #D8B264. This layer re-points
   it to ember #FF8A00 — a colour already present 18x in the app as --wo-hot,
   so this promotes an existing accent rather than introducing a new one.

   Contrast on the #141417 background:
     #FF8A00  7.78:1   fills, buttons, badges
     #FFAB52  9.80:1   gold-as-text (passes AA at body size)
     #C4541A  depth / gradient terminus only — never text
   =========================================================================== */

:root{
  --wo-gold:#FF8A00;
  --wo-hot:#FF8A00;
  --oct-tint:#FFAB52;
  --oct-deep:#C4541A;
  --oct-glow:rgba(255,138,0,.16);
  /* v1.0.221. The base app separates a RUNNING set from an idle one by turning
     the button amber while everything around it stays gold. This layer repaints
     everything amber — so the live state, the single control in the app that
     must never be ambiguous because it means a clock is running on a member
     mid-lift, would have dissolved into the theme. It moves to candle yellow,
     which differs from #FF8A00 in lightness as well as hue and so stays
     separable at a glance and under the common colour-vision deficiencies.
     These tokens exist in page-trivux-pro.php; this only re-points them. */
  --wo-live:#FFD24A;
  --wo-live-lbl:#FFE3A0;
  --wo-live-a:#2A1C02;
  --wo-live-b:#432D04;
  --wo-live-edge:rgba(255,210,74,.6);
}

/* ---- colour pass ---- */
.cl-av,.pin-card .cl-av{background:linear-gradient(135deg,#FFC078,#FF8A00 58%,#C4541A)!important;color:#111!important;}
#btn-set,.abtn.gold,.pin-go,.wt-save{background:linear-gradient(180deg,#FFA338,#FF8A00 60%,#E8700A)!important;
         color:#111!important;
         box-shadow:0 6px 22px rgba(255,138,0,.34),inset 0 1px 0 rgba(255,255,255,.22)!important;}
.ch i{background:var(--oct-tint)!important;box-shadow:0 0 10px var(--oct-glow);}
.ex-wt,.cl-go,.pin-links button:hover,.s-t{color:var(--oct-tint)!important;}
.adm-row .ai{background:rgba(255,138,0,.13)!important;color:var(--oct-tint)!important;}
.ch{background:rgba(255,255,255,.06)!important;}
/* v1.0.221: the superset tint and its bracket were written as literal rgba of
   the OLD gold rather than as var(--wo-gold), so they are the one part of the
   chapter strip this layer was walking straight past -- a gold pair sitting in
   an otherwise ember progress bar. Literal values here too, because both are
   low-alpha overlays and a token would not carry the alpha. */
.chapters .ch.gp::before{background:rgba(255,138,0,.22)!important;}
.chapters .ch u{background:rgba(255,171,82,.55)!important;}
.ch.cur{box-shadow:0 0 0 1px rgba(255,138,0,.5),0 0 14px var(--oct-glow);}

/* v1.0.225: the same bug as the superset tint above, and the two most visible
   instances of it. Both elements originally painted themselves with
   var(--wo-gold) and would have re-pointed for free; the v1.0.221 cosmetic pass
   then re-declared them as literal gold gradients to add depth, which put them
   outside this layer's reach. The result was three solid gold play buttons
   sitting in an otherwise ember program list.

   Mapped to the .cl-av ramp rather than the .abtn.gold one: .dc-play is a
   46px circle and .cl-av is the avatar circle directly above it on the same
   screen, so they now read as the same object family. Black glyph on #FF8A00
   measures ~7.9:1, so the play triangle is no less legible than it was on gold.

   .resume-band is not on screen until a session is mid-flight, which is exactly
   why it is fixed here and not when someone next notices it. */
.dc-play{background:linear-gradient(140deg,#FFC078,#FF8A00 55%,#C4541A)!important;
         box-shadow:0 6px 20px -6px rgba(255,138,0,.55)!important;}
.dc-play.fin{background:rgba(255,138,0,.16)!important;box-shadow:none!important;}
.resume-band{background:linear-gradient(100deg,#FFC078,#FF8A00 55%,#C4541A)!important;
             box-shadow:0 14px 34px -14px rgba(255,138,0,.45)!important;}

/* Completed sets read as banked, not greyed out.
   Replaces the base rule's blanket opacity:.42, which made finished work
   look disabled rather than earned. */
.set.done{opacity:1!important;background:rgba(255,138,0,.07)!important;
          border-color:rgba(255,138,0,.26)!important;}
.set.done .s-n{background:var(--wo-gold)!important;color:#111!important;font-weight:800;}
.set.done .s-t{text-decoration-color:rgba(255,171,82,.6)!important;}

/* October ember wash */
body::before{content:"";position:fixed;top:-220px;left:50%;transform:translateX(-50%);
  width:620px;height:460px;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(255,138,0,.13),transparent 72%);}

/* ---- the icon set ---------------------------------------------------------
   Five flat-night icons, inlined by october-2026.js. They carry their own
   fills, so nothing here recolours them -- this is sizing and motion only.
   Every animation is disabled in the reduced-motion block at the bottom. */
.oct-ico{display:block;flex:0 0 auto;width:20px;height:20px;overflow:visible}

/* chip: the pumpkin breathes, the ghost drifts */
.oct-chip .oct-ico.fl{width:22px;height:22px}
.oct-chip:not(.cold) .oct-ico.fl{animation:octBreathe 3.4s ease-in-out infinite}
.oct-chip.cold .oct-ico.fl{animation:octDrift 4.2s ease-in-out infinite;opacity:.9}
@keyframes octBreathe{
  0%,100%{transform:scale(1) rotate(0)}
  50%{transform:scale(1.07) rotate(-3deg)}}
@keyframes octDrift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}}

/* challenge card title — the flex lives on the base rule further down, because
   .oct-ch .lbl b{display:block} is declared after this block and would win */
.oct-ico.inl{width:19px;height:19px}

/* badges */
.oct-badge .oct-ico.bi{width:17px;height:17px}

/* done screen: the candy corn sits above the XP number */
.oct-ico.treat{width:46px;height:46px;margin:0 auto 10px;
  filter:drop-shadow(0 4px 14px rgba(255,138,0,.45));
  animation:octTreat .72s cubic-bezier(.34,1.56,.64,1) both}
@keyframes octTreat{
  0%{opacity:0;transform:translateY(14px) scale(.6) rotate(-14deg)}
  100%{opacity:1;transform:none}}

/* the record moment */
.oct-pr-ico{display:block;width:54px;height:54px;margin:0 auto 10px}
.oct-pr-ico .oct-ico{width:54px;height:54px;
  filter:drop-shadow(0 0 16px rgba(255,138,0,.6))}
.oct-pr-ico.hit .oct-ico{animation:octLift 1.05s cubic-bezier(.34,1.5,.64,1) both}
/* the barbell is pressed overhead, held, then settles */
@keyframes octLift{
  0%{opacity:0;transform:translateY(16px) scale(.6)}
  38%{opacity:1;transform:translateY(-7px) scale(1.14)}
  58%{transform:translateY(-7px) scale(1.14)}
  78%{transform:translateY(2px) scale(.97)}
  100%{transform:none}}

/* ---- streak / challenge chip ---- */
.oct-chip{display:flex;align-items:center;gap:9px;width:100%;max-width:354px;
  margin:0 auto 12px;box-sizing:border-box;
  background:linear-gradient(100deg,rgba(255,138,0,.16),rgba(255,138,0,.04));
  border:1px solid rgba(255,138,0,.32);border-radius:18px;padding:11px 15px;
  font-size:13px;color:var(--oct-tint);letter-spacing:.03em;}
.oct-chip b{color:#fff;font-size:15px;font-weight:700;}
.oct-chip .fl{font-size:15px;line-height:1;}
.oct-chip .sp{margin-left:auto;font-size:10px;color:#828282;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;}
.oct-chip.cold{background:rgba(255,255,255,.03);border-color:var(--wo-line);color:#828282;}
.oct-chip.cold b{color:#CFCFD6;}

/* ---- October challenge ring (overview) ---- */
.oct-ch{display:flex;align-items:center;gap:16px;width:100%;max-width:354px;
  margin:0 auto 16px;box-sizing:border-box;background:var(--wo-raise);
  border:1px solid rgba(255,138,0,.22);border-radius:22px;padding:16px 18px;}
.oct-ring{flex:0 0 62px;width:62px;height:62px;position:relative;}
.oct-ring svg{width:62px;height:62px;transform:rotate(-90deg);}
.oct-ring .trk{fill:none;stroke:rgba(255,255,255,.08);stroke-width:7;}
.oct-ring .bar{fill:none;stroke:var(--wo-gold);stroke-width:7;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(255,138,0,.5));
  transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1);}
.oct-ring .num{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:17px;font-weight:800;color:#fff;}
.oct-ch .lbl{flex:1;min-width:0;}
.oct-ch .lbl b{display:flex;align-items:center;gap:7px;color:#fff;font-size:15px;
  font-weight:700;margin-bottom:3px;}
.oct-ch .lbl span{display:block;color:#828282;font-size:12px;line-height:1.45;}

/* ---- done screen: the reward moment ---- */
#done .oct-wrap{width:100%;max-width:354px;margin:0 auto;}
.oct-xp{text-align:center;margin:0 0 22px;}
.oct-xp .amt{font-size:52px;font-weight:800;color:var(--oct-tint);line-height:1;
  letter-spacing:-.02em;}
.oct-xp .amt small{font-size:20px;margin-left:4px;letter-spacing:.08em;}
.oct-xp .cap{display:block;margin-top:6px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#828282;}
.oct-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px;}
.oct-stat{background:var(--wo-raise);border:1px solid var(--wo-line);border-radius:16px;
  padding:14px 12px;text-align:center;}
.oct-stat b{display:block;color:#fff;font-size:22px;font-weight:800;margin-bottom:3px;}
.oct-stat span{display:block;color:#828282;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;}
.oct-stat.hot{border-color:rgba(255,138,0,.4);background:rgba(255,138,0,.08);}
.oct-stat.hot b{color:var(--oct-tint);}

/* badges */
.oct-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 20px;}
.oct-badge{display:flex;align-items:center;gap:7px;background:rgba(255,138,0,.1);
  border:1px solid rgba(255,138,0,.34);border-radius:999px;padding:8px 14px;
  font-size:12px;color:var(--oct-tint);letter-spacing:.03em;
  animation:octPop .5s cubic-bezier(.34,1.56,.64,1) both;}
.oct-badge i{font-style:normal;font-size:14px;line-height:1;}
.oct-badge:nth-child(2){animation-delay:.09s;}
.oct-badge:nth-child(3){animation-delay:.18s;}
.oct-badge:nth-child(4){animation-delay:.27s;}
@keyframes octPop{from{opacity:0;transform:scale(.72) translateY(8px);}to{opacity:1;transform:none;}}

/* FIX (audit): #done-back was display:flex;margin:0 — shrink-wrapped and pinned
   left, landing 67px off-centre from the headline above it. */
#done-back{margin-left:auto!important;margin-right:auto!important;}

/* ---- the PR moment -------------------------------------------------------
   Amplifies the app's own record card (#tp-pr) rather than replacing it.
   The markup inside is still the app's: .pr-star, .pr-t, .pr-d. */
.tp-pr{position:relative;overflow:hidden;}
.tp-pr .pr-star{color:var(--wo-gold)!important;}
.tp-pr.on{border:1px solid rgba(255,138,0,.38);border-radius:20px;
  background:linear-gradient(165deg,rgba(255,138,0,.15),rgba(255,138,0,.03));
  padding:18px 16px;}

.tp-pr.oct-pr-fire{animation:octPrIn .62s cubic-bezier(.34,1.46,.64,1) both;}
.tp-pr.oct-pr-fire .pr-star{animation:octStar .9s cubic-bezier(.34,1.56,.64,1) both;
  display:inline-block;text-shadow:0 0 18px rgba(255,138,0,.85);}
.tp-pr.oct-pr-fire .pr-t{animation:octRise .5s ease .12s both;}
.tp-pr.oct-pr-fire .pr-d{animation:octRise .5s ease .2s both;}

@keyframes octPrIn{
  from{opacity:0;transform:scale(.9) translateY(10px);}
  to{opacity:1;transform:none;}
}
@keyframes octStar{
  0%{transform:scale(0) rotate(-60deg);opacity:0;}
  60%{transform:scale(1.35) rotate(8deg);opacity:1;}
  100%{transform:scale(1) rotate(0);opacity:1;}
}
@keyframes octRise{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}

/* ember burst behind the star */
.oct-burst{position:absolute;top:-40px;left:50%;width:240px;height:200px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,138,0,.5),transparent 70%);
  animation:octBurst 1.05s ease-out both;}
@keyframes octBurst{
  0%{opacity:0;transform:translateX(-50%) scale(.3);}
  35%{opacity:1;}
  100%{opacity:0;transform:translateX(-50%) scale(1.5);}
}

/* flare on the set row that earned it */
.set.pr-hit{animation:octFlare 1.1s ease both;}
@keyframes octFlare{
  0%{box-shadow:0 0 0 0 rgba(255,138,0,.6);}
  55%{box-shadow:0 0 0 12px rgba(255,138,0,0);}
  100%{box-shadow:0 0 0 0 rgba(255,138,0,0);}
}

@media (prefers-reduced-motion:reduce){
  .oct-badge,.set.pr-hit,.oct-burst,
  .tp-pr.oct-pr-fire,.tp-pr.oct-pr-fire .pr-star,
  .tp-pr.oct-pr-fire .pr-t,.tp-pr.oct-pr-fire .pr-d,
  .oct-chip .oct-ico.fl,.oct-ico.treat,
  .oct-pr-ico .oct-ico,.oct-pr-ico.hit .oct-ico{animation:none!important;}
  .oct-ring .bar{transition:none!important;}
  .oct-burst{display:none;}
}